diff --git a/base/footer.tmpl b/base/footer.tmpl
index 2a4b895..87e0a81 100644
--- a/base/footer.tmpl
+++ b/base/footer.tmpl
@@ -120,6 +120,67 @@
 	<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
 	<script src="{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js"></script>
 	<script src="{{AppSubUrl}}/vendor/plugins/vue/vue.min.js"></script>
+	
+	<script>
+		//Matrix canvas	
+        var c = document.getElementById("c");
+        var ctx = c.getContext("2d");
+		//Get client offsets
+		var my_height = document.getElementById("main_doc").offsetHeight;
+		var my_width = document.getElementById("home").offsetWidth;
+
+        //making the canvas full screen
+        c.height = my_height;
+        c.width = my_width;
+
+        //latin characters - taken from the unicode charset
+        var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
+        //converting the string into an array of single characters
+        matrix = matrix.split("");
+
+        var font_size = 10;
+        var columns = c.width/font_size; //number of columns for the rain
+        //an array of drops - one per column
+        var drops = [];
+        //x below is the x coordinate
+        //1 = y co-ordinate of the drop(same for every drop initially)
+        for(var x = 0; x < columns; x++)
+            drops[x] = 1; 
+
+        //drawing the characters
+        function draw()
+        {
+            //Black BG for the canvas
+            //translucent BG to show trail
+            ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
+            ctx.fillRect(0, 0, c.width, c.height);
+
+            ctx.fillStyle = "#5AA509";// Gitea green
+			//ctx.fillStyle = "red";
+            ctx.font = font_size + "px arial";
+            //looping over drops
+            for(var i = 0; i < drops.length; i++)
+            {
+                //a random chinese character to print
+                var text = matrix[Math.floor(Math.random()*matrix.length)];
+                //x = i*font_size, y = value of drops[i]*font_size
+                ctx.fillText(text, i*font_size, drops[i]*font_size);
+
+                //sending the drop back to the top randomly after it has crossed the screen
+                //adding a randomness to the reset to make the drops scattered on the Y axis
+
+                if(drops[i]*font_size > c.height && Math.random() > 0.975){
+					drops[i] = 0;
+				}
+                   
+
+                //incrementing Y coordinate
+                drops[i]++;
+            }
+        }
+
+        setInterval(draw, 35);
+	</script>
 
 	<!-- JavaScript -->
 	<script src="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js"></script>
diff --git a/base/footer_content.tmpl b/base/footer_content.tmpl
index 6f680d4..f0935cb 100644
--- a/base/footer_content.tmpl
+++ b/base/footer_content.tmpl
@@ -1,4 +1,4 @@
-<footer>
+<footer id="footer" style="position:relative;margin-bottom:0px">
 	<div class="ui container">
 		<div class="ui left">
 			© Gitea {{if (or .ShowFooterVersion .PageIsAdmin)}}{{.i18n.Tr "version"}}: {{AppVer}}{{end}} {{if ShowFooterTemplateLoadTime}}{{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong>{{end}}
diff --git a/base/head.tmpl b/base/head.tmpl
index 7cdfdd3..df9019b 100644
--- a/base/head.tmpl
+++ b/base/head.tmpl
@@ -82,6 +82,7 @@
 	<link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
 	<noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
 	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">
+	
 
 {{if .RequireSimpleMDE}}
 	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css">
@@ -99,6 +100,7 @@
 	<!-- Stylesheet -->
 	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css">
 	<link rel="stylesheet" href="{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}">
+	<link rel="stylesheet" href="{{AppSubUrl}}/css/gitea-matrix-theme.css">
 	<noscript>
 		<style>
 			.dropdown:hover > .menu { display: block; }
@@ -160,7 +162,7 @@
 <body>
 	{{template "custom/body_outer_pre" .}}
 
-	<div class="full height">
+	<div id="main_doc" class="full height">
 		<noscript>{{.i18n.Tr "enable_javascript"}}</noscript>
 
 		{{template "custom/body_inner_pre" .}}
diff --git a/base/head_navbar.tmpl b/base/head_navbar.tmpl
index 390a1fe..38ccad8 100644
--- a/base/head_navbar.tmpl
+++ b/base/head_navbar.tmpl
@@ -1,7 +1,7 @@
 <div class="ui container" id="navbar">
 	<div class="item brand" style="justify-content: space-between;">
 		<a href="{{AppSubUrl}}/">
-			<img class="ui mini image" src="{{AppSubUrl}}/img/gitea-sm.png">
+			<i class="octicon octicon-flame gitea-matrix-primary-color brand-logo"></i>
 		</a>
 		<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
 			<i class="sidebar icon"></i>
diff --git a/gitea-matrix-theme.css b/gitea-matrix-theme.css
new file mode 100644
index 0000000..97fe9b2
--- /dev/null
+++ b/gitea-matrix-theme.css
@@ -0,0 +1,14 @@
+.gitea-matrix-active-color{color:#83f20d}
+.gitea-matrix-primary-color{color:#76da0b}
+.gitea-matrix-secondary-color{color:#5AA509}
+
+.ui.secondary.menu .active.item{color:#83f20d !important}
+.ui.secondary.menu .item{color:#5AA509 !important}
+.ui.secondary.menu .active.item:hover,.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{color:#83f20d !important}
+
+
+.brand-logo{font-size:35px;}
+body{
+    background-color: black !important;
+    color: #83f20d !important;
+}
\ No newline at end of file
diff --git a/home.tmpl b/home.tmpl
index d31094a..48276af 100644
--- a/home.tmpl
+++ b/home.tmpl
@@ -1,13 +1,16 @@
 {{template "base/head" .}}
-<div class="home">
+<div id="home" class="home">
+	<div style="margin:auto; width:100%; position: fixed; padding-top:14px">			
+		<canvas id="c"></canvas>			
+	</div>
 	<div class="ui stackable middle very relaxed page grid">
 		<div class="sixteen wide center aligned centered column">
 			<div>
-				<img class="logo" src="{{AppSubUrl}}/img/gitea-lg.png" />
+				<i class="octicon octicon-flame gitea-matrix-primary-color" style="font-size:180px;"></i>
 			</div>
 			<div class="hero">
 				<h1 class="ui icon header title">
-					{{AppName}}
+					<span class="gitea-matrix-primary-color">{{AppName}}</span>
 				</h1>
 				<h2>{{.i18n.Tr "app_desc"}}</h2>
 			</div>