diff --git a/assets/css/icons.css b/assets/css/icons.css
new file mode 100644
index 0000000..a5da83e
--- /dev/null
+++ b/assets/css/icons.css
@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('/assets/fonts/icomoon.eot?ybqupz');
+  src:  url('/assets/fonts/icomoon.eot?ybqupz#iefix') format('embedded-opentype'),
+    url('/assets/fonts/icomoon.ttf?ybqupz') format('truetype'),
+    url('/assets/fonts/icomoon.woff?ybqupz') format('woff'),
+    url('/assets/fonts/icomoon.svg?ybqupz#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="pretendo-icon-"], [class*=" pretendo-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 1em;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.pretendo-icon-pretendo-logo:before {
+  content: "\e900";
+}
diff --git a/assets/css/pretendo.css b/assets/css/pretendo.css
index aea7140..fdc7dec 100644
--- a/assets/css/pretendo.css
+++ b/assets/css/pretendo.css
@@ -1,3 +1,4 @@
+
 /*
 
 pretendo.css -
@@ -13,8 +14,8 @@ sets the background
 */
 .hp-background {
 
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
+    -webkit-filter: brightness(30%) grayscale(100%);
+    filter: brightness(30%) grayscale(100%);
     min-height: 100%;
     min-width: 100%;
     width: 100%;
@@ -52,6 +53,7 @@ title text
     font-family: "Overpass Mono", monospace;
     font-size: 500%;
     line-height: 0;
+    color: white;
 
 }
 
@@ -64,19 +66,40 @@ main text
 
     font-family: "Space Mono", monospace;
     font-size: 150%;
+    color: white;
 
 }
 
 /*
 
-icon
+font awesome icon container stylings
 
 */
+.icons {
+    
+    margin-top: 10px;
+    font-size: 1.75em;
+  
+}
+
+.icons > a:not(:first-child) > .icon, .icons > .icon:not(:first-child) {
+  
+  margin-left: 20px;
+  
+}
+
 .icon {
+  
+  -webkit-transition: color 1s;
+  transition: color 1s;
+  color: white;
+  border: 0;
+  
+}
 
-    position: relative;
-    height: 10%;
-    width: 10%;
-
+.icon:hover {
+  
+  color: black;
+  
 }
   
\ No newline at end of file
diff --git a/assets/fonts/icomoon.eot b/assets/fonts/icomoon.eot
new file mode 100644
index 0000000..01476ee
Binary files /dev/null and b/assets/fonts/icomoon.eot differ
diff --git a/assets/fonts/icomoon.svg b/assets/fonts/icomoon.svg
new file mode 100644
index 0000000..1e28f37
--- /dev/null
+++ b/assets/fonts/icomoon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="pretendo-logo" d="M31.2 941.6l-27.2-18.4v-950.4l27.2-18.4c24-16.8 36.8-18.4 117.6-18.4h91.2v295.2c0 162.4 2.4 300.8 4.8 308 3.2 8.8 15.2 12.8 35.2 12.8 17.6 0 49.6 10.4 80 26.4 48 24 55.2 25.6 135.2 25.6 77.6 0 88.8-1.6 131.2-23.2 56.8-28.8 104-79.2 132-139.2 56-123.2-2.4-276.8-132-342.4-41.6-20.8-54.4-23.2-122.4-23.2-41.6 0-85.6 2.4-97.6 6.4l-22.4 5.6v-152h291.2c289.6 0 290.4 0 317.6 18.4l27.2 18.4v950.4l-54.4 36.8h-907.2l-27.2-18.4zM641.6 768c28-8.8 73.6-28.8 101.6-45.6 52-31.2 128.8-106.4 128.8-127.2 0-26.4-23.2-16.8-72.8 32-116.8 113.6-279.2 152.8-426.4 102.4-50.4-16.8-71.2-15.2-67.2 4.8 3.2 15.2 61.6 38.4 121.6 49.6 56.8 9.6 154.4 2.4 214.4-16zM596 692.8c22.4-5.6 59.2-20 82.4-32 48-24 121.6-91.2 121.6-111.2 0-26.4-18.4-22.4-54.4 12-52 49.6-78.4 66.4-136 85.6-58.4 20-141.6 22.4-198.4 4.8-52.8-16-67.2-15.2-67.2 3.2 0 14.4 36 33.6 84 43.2 35.2 8 130.4 4.8 168-5.6zM444 484.8c-30.4-13.6-72.8-58.4-83.2-87.2-4.8-12.8-8.8-41.6-8.8-64.8 0-89.6 73.6-154.4 168-147.2 92.8 6.4 149.6 72.8 142.4 167.2-4 52-16.8 75.2-65.6 114.4-24 20-37.6 24.8-79.2 26.4-30.4 1.6-58.4-1.6-73.6-8.8z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf
new file mode 100644
index 0000000..89ee3a7
Binary files /dev/null and b/assets/fonts/icomoon.ttf differ
diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff
new file mode 100644
index 0000000..e022c7a
Binary files /dev/null and b/assets/fonts/icomoon.woff differ
diff --git a/assets/images/bg.gif b/assets/images/bg1.gif
similarity index 100%
rename from assets/images/bg.gif
rename to assets/images/bg1.gif
diff --git a/assets/images/bg2.gif b/assets/images/bg2.gif
new file mode 100644
index 0000000..17aa4e8
Binary files /dev/null and b/assets/images/bg2.gif differ
diff --git a/assets/js/index.js b/assets/js/index.js
new file mode 100644
index 0000000..35b2976
--- /dev/null
+++ b/assets/js/index.js
@@ -0,0 +1,29 @@
+/*
+
+index.js -
+the main javascript file
+
+*/
+
+// set some variables
+var bg = document.getElementById("hp-bg"),
+    index = 0,
+    imageList = [ "/assets/images/bg1.gif", "/assets/images/bg2.gif" ]
+
+// set the first image
+bg.src = imageList[index]
+index++
+
+setInterval(() => {
+  
+  if (index === imageList.length) {
+    
+    index = 0
+    
+  }
+  
+  bg.src = imageList[index]
+  
+  index++
+  
+}, 5000)
\ No newline at end of file
diff --git a/views/home.hbs b/views/home.hbs
index d81b285..612d121 100644
--- a/views/home.hbs
+++ b/views/home.hbs
@@ -1,25 +1,46 @@
+<!--
+
+home.hbs -
+the front page of the pretendo website
+
+-->
+
 <html lang="en">
 
     <head>
+				
+				 {{> head }}
 
-        {{> head }}
+        <title>pretendo</title>
 
     </head>
 
     <body class="hp-container">
 
-        <img class="hp-background" src="/assets/images/bg.gif">
+        <img id="hp-bg" class="hp-background" src="">
 
         <div class="hp-container">
 
-            <h1 class="title"><img class="icon" src="/assets/images/pretendo-logo.svg">pretendo</h1>
+            <h1 class="title"><i class="pretendo-icon-pretendo-logo"></i>pretendo</h1>
+            
             <div class="text">
                 an accurate-as-possible server emulation project for<br>
                 nintendo consoles that use nintendo network
             </div>
+            
+            <div class="icons">
+              
+              <a href="https://github.com/PretendoNetwork"><i class="fab fa-github-alt icon"></i></a>
+              <a href="https://www.npmjs.com/search?q=%40pretendo"><i class="fab fa-npm icon"></i></a>
+              <a href="https://discord.gg/rxekqVJ"><i class="fab fa-discord icon"></i></a>
+              <a href="https://twitter.com/pretendonetwork"><i class="fab fa-twitter icon"></i></a>
+              
+            </div>
 
         </div>
 
     </body>
+    
+    <script src="/assets/js/index.js" type="text/javascript"></script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/views/partials/head.hbs b/views/partials/head.hbs
index a898056..10f9d38 100644
--- a/views/partials/head.hbs
+++ b/views/partials/head.hbs
@@ -1,14 +1,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="an accurate-as-possible server emulation project for nintendo network-enabled devices">
-
+        
 <link rel="icon" href="/assets/favicon.ico">
 <link rel="apple-touch-icon" href="/assets/favicon.ico">
 <link rel="mask-icon" href="/assets/images/pretendo-logo.svg">
-
+        
 <link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Space+Mono" rel="stylesheet">
 <link rel="stylesheet" href="/assets/css/pretendo.css">
-
+<link rel="stylesheet" href="/assets/css/icons.css">
+        
 <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
-
-<title>pretendo</title>
+        
\ No newline at end of file