diff --git a/package-lock.json b/package-lock.json
index d8a28b8..460c693 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2397,8 +2397,15 @@
     "svelte": {
       "version": "3.25.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.25.1.tgz",
-      "integrity": "sha512-IbrVKTmuR0BvDw4ii8/gBNy8REu7nWTRy9uhUz+Yuae5lIjWgSGwKlWtJGC2Vg95s+UnXPqDu0Kk/sUwe0t2GQ==",
-      "dev": true
+      "integrity": "sha512-IbrVKTmuR0BvDw4ii8/gBNy8REu7nWTRy9uhUz+Yuae5lIjWgSGwKlWtJGC2Vg95s+UnXPqDu0Kk/sUwe0t2GQ=="
+    },
+    "svelte-awesome": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-awesome/-/svelte-awesome-2.3.0.tgz",
+      "integrity": "sha512-xXU3XYJmr5PK9e3pCpW6feU/tNpAhERWDrgDxkC0DU6LNum02zzc00I17bmUWTSRdKLf+IFbA5hWvCm1V8g+/A==",
+      "requires": {
+        "svelte": "^3.15.0"
+      }
     },
     "terser": {
       "version": "5.3.1",
diff --git a/package.json b/package.json
index 7e3f428..bfaf7bc 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "next",
-    "sirv": "^1.0.0"
+    "sirv": "^1.0.0",
+    "svelte-awesome": "^2.3.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 0629a7d..c380a0d 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,5 +1,4 @@
 <script>
-  export let segment;
 </script>
 
 <style>
@@ -12,8 +11,9 @@
   }
 
   .jodc-mascot-img {
-    height: 100px;
+    height: 90px;
     width: auto;
+    margin-left: 40px;
   }
 
   ul {
@@ -33,19 +33,44 @@
     float: left;
   }
 
+  li:not(:last-child){
+    margin-right: 50px;
+  }
+
   a {
     text-decoration: none;
-    padding: .5em 0.5em;
+    padding: .1em 0.25em;
     display: block;
     text-transform: uppercase;
-    font-size: 2rem;
+    font-size: 1.6rem;
     transition: all .5s;
+    border-radius: 3px;
+    position: relative;
+    border-bottom: 2px solid #fff;
+  }
+
+  a::after{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: -1;
+    height: 0;
+    opacity: 0;
+    transition: all .6s;
+    background-color: #fff;
+  }
+
+  a:hover::after{
+    height: 100%;
+    opacity: 1;
   }
 
-  a:hover {
-    background-color: white;
-    color: black;
+  a:hover{
+    color: #000;
   }
+
 </style>
 
 <nav>
diff --git a/src/node_modules/@sapper/internal/manifest-client.mjs b/src/node_modules/@sapper/internal/manifest-client.mjs
index 0e083ec..01bc083 100644
--- a/src/node_modules/@sapper/internal/manifest-client.mjs
+++ b/src/node_modules/@sapper/internal/manifest-client.mjs
@@ -99,5 +99,7 @@ export const routes = (d => [
 if (typeof window !== 'undefined') {
 	import("/home/aayushmau5/Desktop/stuff/JODC_WEBSITE/jodc_website/node_modules/sapper/sapper-dev-client.js").then(client => {
 		client.connect(10000);
+	import("C:/Users/ishan/Desktop/Web Development/jodc/jodc_website/node_modules/sapper/sapper-dev-client.js").then(client => {
+		client.connect(10006);
 	});
 }
\ No newline at end of file
diff --git a/src/node_modules/@sapper/service-worker.js b/src/node_modules/@sapper/service-worker.js
index 2218371..76ec3bf 100644
--- a/src/node_modules/@sapper/service-worker.js
+++ b/src/node_modules/@sapper/service-worker.js
@@ -1,5 +1,5 @@
 // This file is generated by Sapper — do not edit it!
-export const timestamp = 1600442509811;
+export const timestamp = 1600443618580;
 
 export const files = [
 	"/service-worker-index.html",
@@ -15,14 +15,14 @@ export const files = [
 export { files as assets }; // legacy
 
 export const shell = [
-	"/client/client.ff5bedc8.js",
-	"/client/index.c3621494.js",
-	"/client/events.1af031e3.js",
-	"/client/index.fb983c6a.js",
-	"/client/[slug].85260d89.js",
-	"/client/team.3fc38ad5.js",
-	"/client/wiki.11849412.js",
-	"/client/Box.81d7e8b3.js",
+	"/client/client.fc4050ba.js",
+	"/client/index.ac10df3b.js",
+	"/client/events.e778f90f.js",
+	"/client/index.7e4ed952.js",
+	"/client/[slug].19cbcedc.js",
+	"/client/team.91c00470.js",
+	"/client/wiki.52349200.js",
+	"/client/Box.cdbcba88.js",
 	"/client/sapper-dev-client.1e7a4a5e.js"
 ];
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 45021d6..37b41e7 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,3 +1,8 @@
+<script>
+  import Icon from 'svelte-awesome/components/Icon.svelte';
+  import {telegram, twitter, facebook, github } from 'svelte-awesome/icons';
+</script>
+
 <style>
   :global(body) {
     background-color: black;
@@ -21,15 +26,18 @@
   }
 
   #social {
-    margin-top: 20px;
+    margin-top: 150px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     flex-grow: 0;
-    width: 100px;
+    justify-content: center;
+    width: 100%;
+    justify-content: space-around;
   }
 
+
   a {
-    font-size: 1.1rem;
+    font-size: 1.3rem;
     /* 1.1 * 16px */
     text-decoration: none;
     color: #aaa;
@@ -59,7 +67,7 @@
 </style>
 
 <svelte:head>
-  <title>JODC</title>
+  <title>JODC | JIIT Open-Source Developers Circle</title>
 </svelte:head>
 
 <figure>
@@ -85,8 +93,8 @@
 
 <!-- TODO(humancalico) add as a list? -->
 <div id="social">
-  <a href="https://github.com/jiitodc">GITHUB</a>
-  <a href="https://t.me/jiitodc">TELEGRAM</a>
-  <a href="https://twitter.com/jiitodc">TWITTER</a>
-  <a href="https://www.facebook.com/groups/jiitodc">FACEBOOK</a>
+  <a href="https://github.com/jiitodc"><Icon style="margin-right: 10px" data={github}/>GITHUB</a>
+  <a href="https://t.me/jiitodc"><Icon style="margin-right: 10px"  data={telegram}/>TELEGRAM</a>
+  <a href="https://twitter.com/jiitodc"><Icon style="margin-right: 10px" data={twitter}/>TWITTER</a>
+  <a href="https://www.facebook.com/groups/jiitodc"><Icon style="margin-right: 10px; font-size:40px;" data={facebook}/>FACEBOOK</a>
 </div>
\ No newline at end of file