diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss
index 9de6cc1..508c189 100755
--- a/app/static/css/partials/_film.scss
+++ b/app/static/css/partials/_film.scss
@@ -107,7 +107,7 @@ main > .film {
   font-size: 18px;
 
   a {
-    color: var(--color-link);
+    color: #ee0;
     text-decoration: none;
     font-weight: 700;
   }
@@ -115,7 +115,7 @@ main > .film {
 
 .summary-block {
   max-width: 1080px;
-  margin-top: 350px;  
+  margin-top: 60vh;  
 }
 
 .bio-block {
@@ -126,8 +126,8 @@ main > .film {
 
 .video-block {
   height: 100vh;
-  padding-bottom: 50px;
-  padding-top: 50px;
+  //padding-bottom: 50px;
+  //padding-top: 50px;
 
   video {
     position: fixed;
@@ -146,9 +146,9 @@ main > .film {
 
 .icon-play {
   color: #fff;
-  border: 3px solid var(--color-link);
+  border: 4px solid rgba(#fff, 0.3);
   border-radius: 50%;
-  font-size: 32px;
+  font-size: 36px;
   text-decoration: none;
   width: 50px;
   height: 50px;
@@ -160,7 +160,7 @@ main > .film {
 
 .film-play-block {
   text-align: center;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .film-play-spacer {
diff --git a/app/templates/base.html b/app/templates/base.html
old mode 100644
new mode 100755
diff --git a/app/templates/film.html b/app/templates/film.html
old mode 100644
new mode 100755
index abd0591..8f88ad2
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -52,7 +52,7 @@ body {
 		</div>
 		<div class="play">
 			<div class="film-play-block">
-				<div><a href="" id="play-fullscreen" class="icon-play"><span>&#x25b6;</span></a></div>
+				<div><a href="" id="play-fullscreen" class="icon-play"><span class="animated-title"><span class="text">&#x25b6;</span></span></a></div>
 				<div class="film-play-spacer">OR</div>
 				<div><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">watch on pad.ma</a></div>
 			</div>
diff --git a/app/templates/index-alt.html b/app/templates/index-alt.html
new file mode 100755
index 0000000..9fb073c
--- /dev/null
+++ b/app/templates/index-alt.html
@@ -0,0 +1,127 @@
+{% extends "base.html" %}
+{% block body_class%}body--home{% endblock %}
+{% block head %}
+	<style type="text/css">
+		.body--home {
+			display: flex;
+			flex-direction: column;
+			background-color: #000;
+			min-height: 100vh;
+		}
+
+		.body--home main {
+			margin:  auto;
+		}
+		
+		.body--home h2 {
+			font-size: 20px;
+			color: #fff;
+		}
+
+		@font-face { 
+	        font-family: "wrong font"; 
+	        src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff"); 
+	    } 
+
+		h1 {
+		    font-family: "wrong font";
+		    margin: auto;
+		    font-weight: normal;
+		    color: yellow;
+		    font-size: 52px;
+		    font-weight: bold;
+		}
+		
+		.h1-en-home {
+			line-height: 1.2;
+		}
+
+		.h1-zh-home {
+			font-size: 42px;			
+		}
+
+		@media screen and (min-width: 800px) {
+			h1 {
+				font-size: 66px;
+			}
+
+			.h1-zh-home {
+				font-size: 50px;
+			}
+		}
+
+		@keyframes rainbow_animation {
+		    0%,100% {
+		        background-position: 0 0;
+		    }
+
+		    50% {
+		        background-position: 100% 0;
+		    }
+		}
+
+		.topnav {
+			background-color: transparent;
+			order: 10;
+			font-weight: 700;
+		}
+
+		.topnav a.title {
+			display: none;
+		}
+
+		.topnav nav {
+			margin: auto;
+		}
+
+		.topnav nav .text .hide-mobile {
+			display: none;
+		}
+
+		.topnav a {
+			font-size: 16px;
+			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+		}
+
+		@media screen and (min-width: 800px) {
+			font-size: 20px;
+		}
+
+		main > .index {
+			font-size: 18px;
+			line-height: 1.5;
+			padding: 0 16px;
+		}
+
+		.rainbow_text_animated {
+		    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
+		    -webkit-background-clip: text;
+		    background-clip: text;
+		    color: transparent;
+		    animation: rainbow_animation 6s ease-in-out infinite;
+		    background-size: 400% 100%;
+		}
+
+	</style>
+{% endblock head %}
+{% block main %}
+<div class="index">
+	<h1 class="h1-en-home rainbow rainbow_text_animated">Phantasmapolis</h1>
+	<h2>Looking back to the future</h2><br>
+	<h1 class="h1-zh-home rainbow rainbow_text_animated">未至之城</h1>
+	<div>回望未來</div>
+	<br>
+	<h2 class="font-bold">Video art program</h2>
+	Curated by Anushka Rajendran<br>
+	Presented by Pad.ma<br><br>
+	
+	<div class="font-bold">錄像計畫</div>
+	策展人 安努舒卡．拉堅德蘭<br>
+	藝術家 Pad.ma<br>
+	<br>
+	<h2 class="font-bold">2021 Asian Art Biennale</h2>
+	Oct 30, 2021 – Mar 6, 2022<br><br>
+	<div class="font-bold">2021亞洲藝術雙年展</div>
+	2021.10.30 - 2022.3.6<br>
+</div>
+{% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
old mode 100644
new mode 100755
diff --git a/app/text/views.py b/app/text/views.py
old mode 100644
new mode 100755
index 907cb38..9132a52
--- a/app/text/views.py
+++ b/app/text/views.py
@@ -10,6 +10,10 @@ def index(request):
     context = {}
     return render(request, 'index.html', context)
 
+def index_alt(request):
+    context = {}
+    return render(request, 'index-alt.html', context)
+
 def page(request, slug=''):
     context = {}
     if request.user.is_staff:
diff --git a/app/urls.py b/app/urls.py
old mode 100644
new mode 100755
index 5ba3136..4546ec0
--- a/app/urls.py
+++ b/app/urls.py
@@ -32,6 +32,7 @@ urlpatterns = [
     path(settings.URL_PREFIX + 'tv/', video.tv, name='tv'),
     path(settings.URL_PREFIX + 'assemblies/', text.texts, name='texts'),
     path(settings.URL_PREFIX + 'assemblies/<str:slug>', text.text, name='text'),
+    path(settings.URL_PREFIX + 'index-alt/', text.index_alt, name='index_alt'),
     path(settings.URL_PREFIX + 'about/', text.about, name='about'),
     path(settings.URL_PREFIX + '<str:slug>/', text.page, name='page'),
     path(settings.URL_PREFIX[:-1], text.index, name='index'),