diff --git a/HomePage/static/HomePage/CSS/HKWTS.css b/HomePage/static/HomePage/CSS/HKWTS.css
index 52229c1..c07b076 100644
--- a/HomePage/static/HomePage/CSS/HKWTS.css
+++ b/HomePage/static/HomePage/CSS/HKWTS.css
@@ -559,4 +559,56 @@ a {
 
 .footerTable {
     width:100%;
+}
+
+#gallery {
+    width:80%;
+    display:none;
+}
+
+#gallery img {
+    width:70%;
+    align-items:center;
+    display:flex;
+
+}
+.galleryImg {
+    width:50%;
+}
+
+@media screen and (max-width: 768px) {
+    #gallery{
+        display:block;
+    }
+    #descriptionTable .img {
+        display:none;
+    }
+    #descriptionTable #information {
+        width:100%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/RUMS.css b/HomePage/static/HomePage/CSS/RUMS.css
index b5f3638..169fce3 100644
--- a/HomePage/static/HomePage/CSS/RUMS.css
+++ b/HomePage/static/HomePage/CSS/RUMS.css
@@ -509,4 +509,56 @@ a {
 #descriptionTable tr .img {
     width:30%;
     padding:2%;
+}
+
+#gallery {
+    width:80%;
+    display:none;
+}
+
+#gallery img {
+    width:70%;
+    align-items:center;
+    display:flex;
+
+}
+.galleryImg {
+    width:50%;
+}
+
+@media screen and (max-width: 768px) {
+    #gallery{
+        display:block;
+    }
+    #descriptionTable .img {
+        display:none;
+    }
+    #descriptionTable #information {
+        width:100%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/TKP.css b/HomePage/static/HomePage/CSS/TKP.css
index b94593e..a1f4114 100644
--- a/HomePage/static/HomePage/CSS/TKP.css
+++ b/HomePage/static/HomePage/CSS/TKP.css
@@ -279,4 +279,57 @@ a {
 
 .footerTable {
     width:100%;
+}
+
+#gallery {
+    width:80%;
+    display:none;
+}
+
+#gallery img {
+    width:75%;
+    align-items:center;
+    display:flex;
+
+}
+
+.galleryImg {
+    width:50%;
+}
+
+@media screen and (max-width: 768px) {
+    #gallery{
+        display:block;
+    }
+    #descriptionTable .img {
+        display:none;
+    }
+    #descriptionTable #information {
+        width:100%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/WQCS.css b/HomePage/static/HomePage/CSS/WQCS.css
index b94593e..24634fe 100644
--- a/HomePage/static/HomePage/CSS/WQCS.css
+++ b/HomePage/static/HomePage/CSS/WQCS.css
@@ -219,13 +219,13 @@ a {
 .footer {
     width:100%;
     background-color:#000;
-    height:50%;
     background-position:center;
     background-repeat:no-repeat;
 	background-size:cover;
 	position:fixed;
 	bottom:0;
 	z-index:-1;
+	overflow:hidden;
 }
 
 .footer h3 {
@@ -279,4 +279,53 @@ a {
 
 .footerTable {
     width:100%;
+}
+
+#gallery {
+    width:50%;
+    display:none;
+}
+
+#gallery img {
+    width:70%;
+    align-items:center;
+    display:flex;
+
+}
+
+@media screen and (max-width: 768px) {
+    #gallery{
+        display:block;
+    }
+    #descriptionTable .img {
+        display:none;
+    }
+    #descriptionTable #information {
+        width:100%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/aboutus.css b/HomePage/static/HomePage/CSS/aboutus.css
index 21303bd..1a3fd9c 100644
--- a/HomePage/static/HomePage/CSS/aboutus.css
+++ b/HomePage/static/HomePage/CSS/aboutus.css
@@ -2,6 +2,7 @@ html {
     margin:0 auto;
     padding:0;
     scroll-behavior:smooth;
+    overflow-x:hidden;
 }
 
 * {
@@ -137,8 +138,6 @@ a {
   margin-left:0%;
   background: #3498db;
   padding: 30px 25px;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
   text-align: center;
   color: #fff;
 }
@@ -220,13 +219,14 @@ table img {
 .footer {
     width:100%;
     background-color:#000;
-    height:50%;
     background-position:center;
     background-repeat:no-repeat;
 	background-size:cover;
 	position:fixed;
 	bottom:0;
 	z-index:-1;
+	padding-bottom:2%;
+	overflow:hidden;
 }
 
 .footer h3 {
@@ -282,3 +282,111 @@ table img {
     transform: translate(0%, 40%);
     transition: 0.4s ease-out;
 }
+
+#socialMedia #github {
+    margin-left:50%;
+}
+
+#socialMedia #youtube {
+    margin-right:50%;
+}
+
+@media screen and (max-width: 768px) {
+    #socialMedia #github {
+        margin-left:25%;
+    }
+    #socialMedia #youtube {
+        margin-right:25%;
+    }
+    #phoneData {
+        margin-left:30%;
+    }
+    .wrapper {
+        width:90%;
+    }
+    .wrapper .left {
+        width:80%;
+        padding: 15px 10px;
+    }
+}
+
+@media screen and (max-width: 460px) {
+    .wrapper .left img {
+        margin-top:120%;
+        margin-bottom:20%;
+    }
+}
+@media screen and (max-width: 410px) {
+    #phoneData {
+        display:inline-block;
+        margin-top:25%;
+        margin-left:-105%;
+        text-align:center;
+
+    }
+    #emailData {
+        align-items:center;
+        text-align:center;
+        width:100%;
+        margin-left:-5%;
+
+    }
+}
+
+@media screen and (max-width: 310px) {
+    .wrapper {
+        width:100%;
+        border:none;
+        border-top: 3px solid #000;
+        border-bottom: 3px solid #000;
+    }
+}
+
+@media screen and (max-width: 285px) {
+    #informationTitle, #projectsTitle {
+        letter-spacing:1px;
+    }
+    #socialMedia #github {
+        margin-left:0%;
+    }
+    #socialMedia #youtube {
+        margin-right:0%;
+    }
+    #recent {
+        width:100%;
+        text-align:center;
+        margin-left:-0%;
+    }
+    #mostViewed {
+        margin-top:40%;
+        margin-left:-100%;
+        width:100%;
+        text-align:center;
+    }
+}
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
+}
+
+
diff --git a/HomePage/static/HomePage/CSS/contacts.css b/HomePage/static/HomePage/CSS/contacts.css
index 4dc5432..4120edb 100644
--- a/HomePage/static/HomePage/CSS/contacts.css
+++ b/HomePage/static/HomePage/CSS/contacts.css
@@ -2,6 +2,7 @@ html {
     margin:0 auto;
     padding:0;
     overflow-x:hidden;
+    scroll-behavior:smooth;
 }
 
 * {
@@ -31,6 +32,23 @@ html {
     text-align:center;
 }
 
+.learn-more i {
+    color:#fff;
+    font-size:50px;
+    transition: 0.4s ease;
+
+}
+
+.learn-more {
+    margin-left:49%;
+    animation:title 1000ms;
+}
+
+.learn-more i:hover {
+    transform: translate(0%, 40%);
+    transition: 0.4s ease-out;
+}
+
 #slider figure h1 {
     font-size:3em;
     font-family: 'Gothic A1', sans serif;
@@ -38,10 +56,6 @@ html {
     color:#fff;
 }
 
-.content {
-    margin-top:50px;
-}
-
 .inner-container {
     width:100%;
     min-width:1000px;
@@ -59,20 +73,18 @@ html {
     margin: 0 auto;
     width:100%;
     height:80%;
-    padding-top:23%;
+    padding-top:24%;
     padding-bottom:19%;
     background-position:center;
     background-repeat:no-repeat;
 	background-size:cover;
 	background-attachment:fixed;
 	position:relative;
-	margin-bottom:24%;
 }
 
 .img-container h1 {
-    padding-left:20%;
+    text-align:center;
     font-size:4em;
-    float:left;
     font-family: 'Questrial', sans serif;
     text-align:center;
     color:#fff;
@@ -127,7 +139,6 @@ a {
 }
 
 .img-container .btn {
-    margin-top:3%;
     animation:title 1000ms;
     position:center;
     display: inline-block;
@@ -139,7 +150,7 @@ a {
     text-align:center;
     outline:none;
     text-decoration:none;
-    margin-left:-13%;
+    margin-left:45%;
     transition: background-color 0.2s ease-out, color 0.2s ease-out;
 }
 
@@ -458,7 +469,6 @@ a {
 .footer {
     width:100%;
     background-color:#000;
-    height:50%;
     background-position:center;
     background-repeat:no-repeat;
 	background-size:cover;
@@ -519,16 +529,11 @@ a {
 }
 
 .content {
-    background-color:#fff;
-    width:30%;
-    background-position:center;
-    background-repeat:no-repeat;
-	background-size:cover;
-	position:absolute;
-	top:25%;
-	left:40%;
-	transform:translate(50%, 50%);
-	background:none;
+    padding-top:2%;
+    width:100%;
+	position:relative;
+	background:#fff;
+	margin-bottom:24%;
 
 }
 
@@ -544,9 +549,38 @@ a {
 }
 
 .content h3 {
-    padding:3%;
+    padding:1%;
+    padding-left:20%;
     font-size:1.5em;
     font-family: 'Questrial', sans serif;
-    color:#fff;
+    color:#000;
     animation:title 1000ms;
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    .img-container {
+        padding-top:30%;
+    }
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/data.css b/HomePage/static/HomePage/CSS/data.css
index f06da75..82a053d 100644
--- a/HomePage/static/HomePage/CSS/data.css
+++ b/HomePage/static/HomePage/CSS/data.css
@@ -7,6 +7,7 @@ html {
     margin:0 auto;
 	padding:0;
 	scroll-behavior:smooth;
+	overflow-x:hidden;
 }
 
 ::-webkit-scrollbar {
@@ -610,4 +611,47 @@ a {
 .text-container ul {
     float:left;
     list-style:disc inside;
+}
+
+#tableLinksMobile {
+    display:none;
+}
+
+@media screen and (max-width:435px) {
+    #tableLinks {
+        display:none;
+    }
+    #tableLinksMobile {
+        display:flex;
+        flex-direction:column;
+        width:100%;
+    }
+    #tableLinksMobile tr, #tableLinksMobile td {
+        width:100%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/homepage.css b/HomePage/static/HomePage/CSS/homepage.css
index 55c8b80..f7a108f 100644
--- a/HomePage/static/HomePage/CSS/homepage.css
+++ b/HomePage/static/HomePage/CSS/homepage.css
@@ -12,37 +12,12 @@ html {
 ::-webkit-scrollbar {
     width:0px;
 }
-#slider {
-    overflow:hidden;
-}
-#slider figure image {
-    width:70%;
-    float:left;
-}
-#slider figure {
-    position:relative;
-    width:300%;
-    margin:0;
-    left:0;
-    text-align:center;
-}
-#slider figure h1 {
-    font-size:3em;
-    font-family: 'Gothic A1', sans serif;
-    text-align:center;
-    color:#fff;
-}
-#slider figure
-.content {
-    margin-top:50px;
-}
 .img-container {
     padding-top:22%;
-    padding-bottom:19%;
-    margin: 0 auto;
+    padding-bottom:20%;
     width:100%;
     height:80%;
-    background-position:center;
+    background-position:center 0px;
     background-repeat:no-repeat;
 	background-size:cover;
 	background-attachment:fixed;
@@ -174,7 +149,7 @@ a {
     margin-top:-17px;
     padding-left:3%;
 	padding-right:3%;
-    font-size:30px;
+    font-size:25px;
     font-family: 'Questrial', sans serif;
     font-weight:400;
     color:#79b9cf;
@@ -184,9 +159,8 @@ a {
     padding-top:2%;
     padding-bottom:1%;
     padding-left:5%;
-    font-size:30px;
+    font-size:25px;
     font-family: 'Questrial', sans serif;
-    font-weight:400;
     color:#79b9cf;
 
 }
@@ -454,13 +428,13 @@ table img {
 .footer {
     width:100%;
     background-color:#000;
-    height:50%;
     background-position:center;
     background-repeat:no-repeat;
 	background-size:cover;
 	position:fixed;
 	bottom:0;
 	z-index:-1;
+	overflow:hidden;
 }
 
 .footer h3 {
@@ -513,6 +487,67 @@ table img {
 }
 
 #title h1 {
-    font-size:4em;
+    font-size:5em;
+}
+@media screen and (max-width: 768px) {
+    .slider figure .slide .sliderHeading {
+    font-size:2em;
+    }
+    .slider figure .slide .blob {
+        font-size:1.3em;
+    }
+    .img-container {
+        padding-top:30%;
+    }
 }
 
+@media screen and (max-width:530px) {
+    .slider figure .slide #RUMS {
+        font-size:1.7em;
+    }
+    .slider figure .slide #WQCSBlob {
+        font-size: 1em;
+    }
+}
+
+@media screen and (max-width:940px) {
+    #divBeforeFooter .btn-right {
+        display:none;
+    }
+    #divBeforeFooter #mobile {
+        display:inline-block;
+    }
+    #contacts {
+        padding-left:25%;
+    }
+    #posts {
+        padding-right:23%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
+}
+
+
diff --git a/HomePage/static/HomePage/CSS/navbar.css b/HomePage/static/HomePage/CSS/navbar.css
index 02c7061..d8b6012 100644
--- a/HomePage/static/HomePage/CSS/navbar.css
+++ b/HomePage/static/HomePage/CSS/navbar.css
@@ -19,10 +19,10 @@ nav {
 nav img {
     float:left;
     margin-left:3%;
-    margin-top:1%;
+    margin-top:0.5%;
     padding-right:5%;
-    width:10%;
-    height:10%;
+    width:3%;
+    align-items:center;
 }
 
 nav ul .navoption {
@@ -49,6 +49,7 @@ nav ul li {
     float:left;
     list-style:none;
     position:relative;
+    padding-top:1.5%;
 }
 nav ul li a {
     transition:color 0.2s ease-out;
@@ -94,11 +95,11 @@ nav a:hover {
 @keyframes navmenu {
     0% {
         opacity:0;
-        top:105px;
+        top:110%;
     }
     100% {
         opacity:1;
-        top:95px;
+        top:100%;
     }
 }
 nav ul li ul li a {
@@ -130,6 +131,113 @@ nav ul li ul li:hover ul {
     position:absolute;
     width:190px;
     left:185px;
-    top:0px;
+    top:100px;
     animation:navmenu 300ms;
+}
+
+nav ul li a i {
+    font-size:0px;
+}
+
+nav .downButton {
+    display:none;
+}
+
+@media screen and (max-width: 768px) {
+    #monitoringData:hover ul {
+        display:none;
+    }
+    nav ul li a i {
+        font-size:1.2em;
+    }
+  .line {
+    width: 30px;
+    height: 3px;
+    background: black;
+    margin: 7px;
+  }
+  #hamburger {
+    position: absolute;
+    cursor: pointer;
+    right: 5%;
+    top: 50%;
+    transform: translate(-5%, -50%);
+    z-index: 2;
+  }
+  #nav-links {
+      top:100px;
+      padding-top:5%;
+    display:flex;
+    position: fixed;
+    background: #fff;
+    height: 100vh;
+    width: 100%;
+    flex-direction: column;
+    clip-path: circle(100px at 90% -12%);
+    -webkit-clip-path: circle(100px at 90% -12%);
+    transition: all 1s ease-out;
+    pointer-events: none;
+  }
+  nav img {
+    width:8%;
+    margin-top:0%;
+    z-index:20000000;
+  }
+  #nav-links.open {
+  padding-top:5%;
+  top:100px;
+  z-index:1;
+    -webkit-clip-path: circle(1500px at 90% -10%);
+    pointer-events: all;
+  }
+
+  #nav-links .navoption {
+  padding:3%;
+  opacity: 0;
+  transition:opacity 0.5s ease;
+
+  }
+
+  #nav-links .navoption.fade {
+  padding:3%;
+    opacity: 1;
+
+    transition: opacity 0.5s ease;
+  }
+    nav ul li:hover ul {
+        align-items:center;
+        position:relative;
+        flex-direction:column;
+        color:#c1c1c1;
+        display:flex;
+        animation: navmenu-mobile 300ms;
+        width:100%;
+        padding:10px 0px;
+    }
+    nav ul li:hover .long-menu {
+        flex-direction:column;
+        width:100%;
+        position:relative;
+        align-items:center;
+        padding:10px 8px;
+        color:#c1c1c1;
+        display:flex;
+        animation: navmenu-mobile 300ms;
+    }
+    @keyframes navmenu-mobile {
+         0% {
+            opacity:0;
+            top:0%;
+        }
+        100% {
+            opacity:1;
+            top:0%;
+        }
+    }
+
+
+
+
+
+
 }
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/posts.css b/HomePage/static/HomePage/CSS/posts.css
index dfa6e57..95537db 100644
--- a/HomePage/static/HomePage/CSS/posts.css
+++ b/HomePage/static/HomePage/CSS/posts.css
@@ -518,3 +518,34 @@ table {
 #title h1 {
     font-size:4em;
 }
+
+@media screen and (max-width:768px) {
+    .img-container {
+        padding-top:30%;
+    }
+}
+
+#footerTable table {
+    width:80%;
+    margin-left:16%;
+}
+
+#linksTable table {
+    width:25%;
+    margin-left:35%;
+}
+
+@media screen and (max-width:495px) {
+    #footerTable table {
+        width:90%;
+        float:left;
+        margin-left:0%;
+    }
+    #linksTable table {
+        width:35%;
+        margin-left:10%;
+    }
+    .img-container {
+        padding-top:40%;
+    }
+}
\ No newline at end of file
diff --git a/HomePage/static/HomePage/CSS/slider.css b/HomePage/static/HomePage/CSS/slider.css
index b85aac7..7e7b0f0 100644
--- a/HomePage/static/HomePage/CSS/slider.css
+++ b/HomePage/static/HomePage/CSS/slider.css
@@ -140,5 +140,5 @@
     background-color:#fff;
     color:#000;
     transition:background-color 0.3s ease-in, color 0.3s ease-in;
+}
 
-}
\ No newline at end of file
diff --git a/HomePage/static/HomePage/Rudra.png b/HomePage/static/HomePage/Rudra.png
index 347bc2d..0c63b1a 100644
Binary files a/HomePage/static/HomePage/Rudra.png and b/HomePage/static/HomePage/Rudra.png differ
diff --git a/HomePage/templates/HomePage/AboutUs.html b/HomePage/templates/HomePage/AboutUs.html
index a35f608..70f2653 100644
--- a/HomePage/templates/HomePage/AboutUs.html
+++ b/HomePage/templates/HomePage/AboutUs.html
@@ -15,23 +15,82 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
     <title>About Us</title>
 </head>
 <body>
-    <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+<script>
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/250), 2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#info').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
     })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
 </script>
-    <div class="navbar">
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -39,21 +98,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="#" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="#" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="#" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -61,7 +120,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="#" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -69,7 +128,14 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
+
+
 </div>
     <div class="img-container" style="background-image:url({{ background }});">
         <h1>About Us</h1>
@@ -79,22 +145,21 @@ <h2>Meet the Team</h2>
     </div>
     <div id="info" style="position:relative; padding-top:3.5%; margin-bottom:24%; background:#fff; height:30%; padding-bottom:0.5%;">
 
-    <div class="wrapper" style="margin-bottom:3%;">
+    <div class="wrapper" style="margin-bottom:3%;" id="divBeforeFooter">
     <div class="left">
-        <img src="{{rudra}}"
-        alt="user" width="300">
+        <img src="{{rudra}}" alt="user" style="width:70%; padding-bottom:5%;">
         <h4>Rudra</h4>
         <p>Student</p>
     </div>
     <div class="right">
         <div class="info">
-            <h3>Information</h3>
+            <h3 id="informationTitle">Information</h3>
             <div class="info_data">
-                 <div class="data">
+                 <div class="data" id="emailData">
                     <h4>Email</h4>
                     <p>rudratheastonaut@gmail.com</p>
                  </div>
-                 <div class="data">
+                 <div class="data" id="phoneData">
                    <h4>Phone</h4>
                     <p>Unavailable</p>
               </div>
@@ -102,13 +167,13 @@ <h4>Phone</h4>
         </div>
 
       <div class="projects">
-            <h3>Projects</h3>
+            <h3 id="projectsTitle">Projects</h3>
             <div class="projects_data">
-                 <div class="data">
+                 <div class="data" id="recent">
                     <h4>Recent</h4>
                     <p>The Kangaroo Project</p>
                  </div>
-                 <div class="data">
+                 <div class="data" id="mostViewed">
                    <h4>Most Viewed</h4>
                     <p>Robot Walking School Bus</p>
               </div>
@@ -119,12 +184,12 @@ <h4>Most Viewed</h4>
             <table id="socialMedia">
                 <tr>
                     <td>
-                        <a class="icon" href="https://github.com/rudrathegreat" style="margin-left:50%;">
+                        <a class="icon" href="https://github.com/rudrathegreat" style="" id="github">
                             <i class="fab fa-github"></i>
                         </a>
                     </td>
                     <td>
-                        <a class="icon" href="https://www.youtube.com/channel/UCMD4ZUhoBXZtWoKaL3l7_9w" style="">
+                        <a class="icon" href="https://www.youtube.com/channel/UCMD4ZUhoBXZtWoKaL3l7_9w" style="" id="youtube">
                             <i class="fab fa-youtube"></i>
                         </a>
                     </td>
@@ -136,7 +201,7 @@ <h4>Most Viewed</h4>
     </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -182,8 +247,8 @@ <h4>Most Viewed</h4>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/HKWTS.html b/HomePage/templates/HomePage/HKWTS.html
index 2dbf914..0ace72c 100644
--- a/HomePage/templates/HomePage/HKWTS.html
+++ b/HomePage/templates/HomePage/HKWTS.html
@@ -13,20 +13,85 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Robot Walking School Bus</title>
     <style>
 
     </style>
 </head>
-<body>
-    <div class="navbar">
+<script>
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2.2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#description').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
+    })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -34,21 +99,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -56,7 +121,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -64,8 +129,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ crosswalk }});">
         <h1>Robot Walking School Bus</h1>
         <br>
@@ -205,10 +277,16 @@ <h2>Encouraging Kids to Walk to School by Following a Robot</h2>
                 <td class="img" style=""><img src="{{robot}}" style="margin-bottom:170%;"></td>
             </tr>
         </table>
+        <table id="gallery">
+            <tr>
+                <td class="galleryImg" style=""><img src="{{litter}}" style=""></td>
+                <td class="galleryImg" style=""><img src="{{robot}}" style=""></td>
+            </tr>
+        </table>
     </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -254,8 +332,8 @@ <h2>Encouraging Kids to Walk to School by Following a Robot</h2>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/RUMS.html b/HomePage/templates/HomePage/RUMS.html
index 8c9170c..4db6c54 100644
--- a/HomePage/templates/HomePage/RUMS.html
+++ b/HomePage/templates/HomePage/RUMS.html
@@ -13,19 +13,85 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Rainwater Usage Monitoring System</title>
     <style>
     </style>
 </head>
 <body>
-    <div class="navbar">
+<script>
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2.2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#description').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
+    })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -33,21 +99,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -55,7 +121,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -63,8 +129,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ rain }});">
         <h1>Rainwater Usage Monitoring System</h1>
         <br>
@@ -113,13 +186,19 @@ <h2>Monitoring How Efficiently We Use Rainwater</h2>
                 <td class="img" style=""><img src="{{tank2}}" style="margin-bottom:75%;"></td>
             </tr>
         </table>
-
+        <table id="gallery">
+            <tr>
+                <td class="galleryImg" style=""><img src="{{tank2}}" style=""></td>
+                <td class="galleryImg" style=""><img src="{{tank}}" style=""></td>
+            </tr>
+        </table>
         <br>
         <br>
     </div>
+
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -165,8 +244,8 @@ <h2>Monitoring How Efficiently We Use Rainwater</h2>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/TKP.html b/HomePage/templates/HomePage/TKP.html
index c95480b..95d65d9 100644
--- a/HomePage/templates/HomePage/TKP.html
+++ b/HomePage/templates/HomePage/TKP.html
@@ -13,23 +13,87 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>The Kangaroo Project</title>
+    <style>
+
+    </style>
+
 </head>
 <body>
 <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2.2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#description').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
     })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
 </script>
-    <div class="navbar">
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -37,21 +101,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -59,7 +123,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -67,8 +131,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ kangaroo }});">
         <h1>The Kangaroo Project</h1>
         <br>
@@ -79,7 +150,7 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
         <table id="descriptionTable">
             <tr>
                 <td class="img" style=""><img src="{{kangaroo1}}" style="margin-top:60%;"></td>
-                <td>
+                <td id="information">
                     <p>
                         Our community used to be home to thousands of kangaroos. They are
                         Australia's national animal and have been respected for thousands
@@ -145,11 +216,18 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
                 </td>
             </tr>
         </table>
-        
+        <table id="gallery">
+            <tr>
+                <td class="galleryImg" style=""><img src="{{kangaroo1}}" style=""></td>
+                <td class="galleryImg">
+                    <img src="{{kangaroo2}}" style="">
+                </td>
+            </tr>
+        </table>
     </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -195,8 +273,8 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/WQCS.html b/HomePage/templates/HomePage/WQCS.html
index 962070c..b5fbbf8 100644
--- a/HomePage/templates/HomePage/WQCS.html
+++ b/HomePage/templates/HomePage/WQCS.html
@@ -13,23 +13,83 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Water Quality Checking System</title>
 </head>
 <body>
 <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#description').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
     })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
 </script>
-    <div class="navbar">
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -37,21 +97,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -59,7 +119,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -67,8 +127,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ river }});">
         <h1>Water Quality Monitoring System</h1>
         <br>
@@ -79,7 +146,7 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
         <table id="descriptionTable">
             <tr>
                 <td class="img" style=""><img src="{{platypus1}}" style="margin-top:60%;"></td>
-                <td>
+                <td id="information">
                     <p>
                         Water resources are getting more and more important with each passing
                         day in case of survival of humanity. For this reason, assessing water
@@ -148,18 +215,26 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
                     </p>
                     <br>
                     <br>
-                    <a href="/md/" class="btn">VIEW LIVE MONITORING DATA</a>
+
                 </td>
                 <td class="img">
                     <img src="{{platypus2}}" style="margin-bottom:150%;">
                 </td>
             </tr>
         </table>
-        
+        <a href="/md/" class="btn">VIEW LIVE MONITORING DATA</a>
+        <table id="gallery" style="width:100%;">
+            <tr>
+                <td class="galleryImg" style="width:50%;">
+                    <img src="{{platypus2}}" style="">
+                </td>
+                <td class="galleryImg" style=""><img src="{{platypus1}}" style=""></td>
+            </tr>
+        </table>
     </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -205,8 +280,8 @@ <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/contacts.html b/HomePage/templates/HomePage/contacts.html
index 48955c4..b74140f 100644
--- a/HomePage/templates/HomePage/contacts.html
+++ b/HomePage/templates/HomePage/contacts.html
@@ -13,23 +13,71 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Contacts</title>
 </head>
 <body>
 <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+        resizeFooter();
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
     })
+    $(window).resize(function(){
+        resizeFooter();
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 2)+0.1;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'padding-top': marginAboveLogo + '%'});
+    }
+
+    function resizeFooter() {
+        var width = $(window).width();
+        if(width!=2560) {
+            marginBottom = Math.pow(((2560-width)/300), 1)+23;
+            paddingTop = ((2560-width)/150)+1;
+        }
+        else {
+            marginBottom = 23;
+        }
+        $('#divBeforeFooter').css({'margin-bottom': marginBottom + '%'});
+        $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+}
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
 </script>
 <div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -37,21 +85,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -59,7 +107,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -67,15 +115,21 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
+
+
 </div>
-    <div class="img-container" style="background-image:url({{ background }});">
+    <div class="img-container" style="background-image:url({{ background }});" id="title">
         <h1>Contacts</h1>
-        <br>
-        <a class="btn" href="../">BACK TO HOME</a>
+        <a class="learn-more" onclick="document.getElementById('divBeforeFooter').scrollIntoView(true);"><i class="fas fa-chevron-down"></i></a>
     </div>
 
-    <div class="content">
+    <div class="content" id="divBeforeFooter">
         <h3>e: rudrasekhri@gmail.com</h3>
         <br>
         <h3>p: (03) 9437 8189</h3>
@@ -84,9 +138,10 @@ <h3>l: 394 Plenty Rd, Mill Park, VIC 3082</h3>
         <br>
         <br>
     </div>
+
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -132,8 +187,8 @@ <h3>l: 394 Plenty Rd, Mill Park, VIC 3082</h3>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/data.html b/HomePage/templates/HomePage/data.html
index 5155340..1dfa3f9 100644
--- a/HomePage/templates/HomePage/data.html
+++ b/HomePage/templates/HomePage/data.html
@@ -13,6 +13,8 @@
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Monitoring Data</title>
 </head>
 <body>
@@ -22,14 +24,85 @@
         ('.img-container').css({'height': height + 'px'});
     })
 </script>
-    <div class="navbar">
+<script>
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+            if(width<632){
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+            if(width < 632) {
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2.25)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#links').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
+    })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.7)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -37,21 +110,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -59,7 +132,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -67,8 +140,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ background }});">
         <h1>Monitoring Data</h1>
         <br>
@@ -77,11 +157,39 @@ <h2>LIVE Temperature, Conductivtity and pH Data Extracted from the Plenty River<
     </div>
     <div class="img-container" style="padding-top:3%; padding-bottom:3%; background:#fff; margin-bottom:25%;" id="links">
         <div class="table">
-            <table style="width:100%;">
+            <table style="width:100%;" id="tableLinks">
+                <tr>
+                    <td>
+                        <a href="/data/last24HoursTemperature/" class="btn" target="_blank">Last 24 Hours Temperature Data</a>
+                    </td>
+                    <td>
+                        <a href="/data/lastYearTemperature/" class="btn" target="_blank">Last Year Temperature Data</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="/data/last24HoursConductivity/" class="btn" target="_blank">Last 24 Hours Conductivity Data</a>
+                    </td>
+                    <td>
+                        <a href="/data/lastYearConductivity/" class="btn" target="_blank">Last Year Conductivity Data</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="/data/last24HourspH/" class="btn" target="_blank">Last 24 Hours pH Data</a>
+                    </td>
+                    <td>
+                        <a href="/data/lastYearpH/" class="btn" target="_blank">Last Year pH Data</a>
+                    </td>
+                </tr>
+            </table>
+            <table id="tableLinksMobile">
                 <tr>
                     <td>
                         <a href="/data/last24HoursTemperature/" class="btn" target="_blank">Last 24 Hours Temperature Data</a>
                     </td>
+                </tr>
+                <tr>
                     <td>
                         <a href="/data/lastYearTemperature/" class="btn" target="_blank">Last Year Temperature Data</a>
                     </td>
@@ -90,6 +198,8 @@ <h2>LIVE Temperature, Conductivtity and pH Data Extracted from the Plenty River<
                     <td>
                         <a href="/data/last24HoursConductivity/" class="btn" target="_blank">Last 24 Hours Conductivity Data</a>
                     </td>
+                </tr>
+                <tr>
                     <td>
                         <a href="/data/lastYearConductivity/" class="btn" target="_blank">Last Year Conductivity Data</a>
                     </td>
@@ -98,6 +208,8 @@ <h2>LIVE Temperature, Conductivtity and pH Data Extracted from the Plenty River<
                     <td>
                         <a href="/data/last24HourspH/" class="btn" target="_blank">Last 24 Hours pH Data</a>
                     </td>
+                </tr>
+                <tr>
                     <td>
                         <a href="/data/lastYearpH/" class="btn" target="_blank">Last Year pH Data</a>
                     </td>
@@ -108,7 +220,7 @@ <h2>LIVE Temperature, Conductivtity and pH Data Extracted from the Plenty River<
     </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -154,8 +266,8 @@ <h2>LIVE Temperature, Conductivtity and pH Data Extracted from the Plenty River<
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/index.html b/HomePage/templates/HomePage/index.html
index ca33805..fcd4332 100644
--- a/HomePage/templates/HomePage/index.html
+++ b/HomePage/templates/HomePage/index.html
@@ -11,27 +11,111 @@
     <link rel="stylesheet" type="text/css" href="{{navCSS}}">
     <link rel="stylesheet" type="text/css" href="{{slider}}">
     <link rel="stylesheet" type="text/css" href="{{socialIcons}}">
-    <link rel="stylesheet" type="text/css" href="{{fontawesome}}">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
     <title>MPL Maker's Club</title>
+    <style>
+   </style>
 </head>
 <body>
 <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+        $(document).ready(function(){
+            resizeFooter();
+            resizeSlider();
+            var width = $(window).width();
+            if(width<632){
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            resizeSlider();
+            var width = $(window).width();
+            if(width < 632) {
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#divBeforeFooter').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+    function resizeSlider() {
+        var width = $(window).width();
+        if(width!=2560) {
+            padding = Math.pow(((2650-width)/500), 1.3);
+        }
+        else {
+            padding = 3.5;
+        }
+        $('#justBeforeSlider').css({'padding-top': padding + '%'});
+        $('#justBeforeSlider').css({'padding-bottom': padding + '%'});
+    }
+
+
+
+
+
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
+    })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
     })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.5)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
+</script>
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
 </script>
 <div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Home</a></li>
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
+                    <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -39,21 +123,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -61,7 +145,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -69,17 +153,24 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
+
+
 </div>
 <div class="img-container" style="background-image:url({{ background }});" id="title">
     <h1>Mill Park Library Maker's Club</h1>
     <br>
     <h2>Working with the Whittlesea Council to Solve Major Problems</h2>
-    <a class="learn-more" onclick="document.getElementById('description').scrollIntoView(true);"><i class="fas fa-chevron-down"></i></a>
-
+    <a class="learn-more" onclick="document.getElementById('description').scrollIntoView(true);"><i
+            class="fas fa-chevron-down"></i></a>
 </div>
 
-<div class="text-container" id="description" style="padding-bottom:10%;">
+<div class="text-container" id="description" style="">
     <br>
     <br>
     <h3>
@@ -88,57 +179,84 @@ <h3>
         of Melbourne, RMIT University, Deakin University, Yellowfin, Whittlesea Tech School
         , Melbourne Water and Lalor Secondary College are solving some of the most
         challenging environmental problems -
+        <br>
+        <br>
+        Using GPS trackers to monitor and save kangaroos
+        <br>
+        <br>
+        Encouraging kids to walk to school by following a robot
+        <br>
+        <br>
+        Monitoring the water quality in the Plenty River to save various wildlife species
+        <br>
+        <br>
+        Monitoring how efficiently we are using rainwater
     </h3>
-    <br>
-    <ul style="list-style:circle inside;">
-        <li>Using GPS trackers to monitor and save kangaroos</li>
-        <li>Encouraging kids to walk to school by following a robot</li>
-        <li>Monitoring the water quality in the Plenty River to save various wildlife species</li>
-        <li>Monitoring how efficiently we are using rainwater</li>
-    </ul>
+
 </div>
-<div style="background:#fff; padding-top:3.5%; padding-bottom:3.5%;">
+<div style="background:#fff; padding-top:3.5%; padding-bottom:3.5%;" id="justBeforeSlider">
 </div>
 
-<div class="slider">
+<div class="slider" style="background-color:#fff;">
     <figure>
         <div class="slide" style="background-image:url({{river}});">
-            <h1>Water Quality Monitoring System</h1>
+            <h1 class="sliderHeading">Water Quality Monitoring System</h1>
             <br>
-            <h2>Using Water Pollution Sensors to Help Save the Platypuses</h2>
+            <h2 class="blob" id="WQCSBlob">Using Water Pollution Sensors to Help Save Platypuses</h2>
             <a href="/wqcs/" class="btn">LEARN MORE</a>
         </div>
         <div class="slide" style="background-image:url({{crosswalk}});">
-            <h1>Robot Walking School Bus</h1>
+            <h1 class="sliderHeading">Robot Walking School Bus</h1>
             <br>
-            <h2>Reducing Street Litter by Encouraging Kids to Walk to School</h2>
+            <h2 class="blob">Reducing Street Litter with a Line-Following Robot</h2>
             <a href="/hkwts/" class="btn">LEARN MORE</a>
         </div>
         <div class="slide" style="background-image:url({{rain}});">
-            <h1>Rainwater Usage Monitoring System</h1>
+            <h1 class="sliderHeading" id="RUMS">Rainwater Usage Monitoring System</h1>
             <br>
-            <h2>Monitoring How Efficiently We Are Using Rainwater</h2>
+            <h2 class="blob">Monitoring How Efficiently We Are Using Rainwater</h2>
             <a href="/rums/" class="btn">LEARN MORE</a>
         </div>
         <div class="slide" style="background-image:url({{kangaroo}});">
-            <h1>The Kangaroo Project</h1>
+            <h1 class="sliderHeading">The Kangaroo Project</h1>
             <br>
-            <h2>Using GPS Trackers to Help Save the Kangaroos</h2>
+            <h2 class="blob">Using GPS Trackers to Help Save the Kangaroos</h2>
             <a href="/tkp/" class="btn">LEARN MORE</a>
         </div>
         <div class="slide" style="background-image:url({{background}});">
-            <h1>More Projects Coming Soon</h1>
+            <h1 class="sliderHeading">More Projects Coming Soon</h1>
             <br>
-            <h2>Check Out Our Other Projects</h2>
+            <h2 class="blob">Check Out Our Other Projects</h2>
             <a href="javascript:void(1);" class="btn">LEARN MORE</a>
         </div>
     </figure>
 </div>
-<div style="background:#fff">
+<div style="background:#fff;">
     <br>
 </div>
 
-<div class="img-container" style="background-image:url({{ stars }}); padding-top:5%; padding-bottom:5%; margin-bottom:23%;">
+<script>
+    $(document).ready(function(){
+        resizeMarginBetweenButtons();
+    })
+    $(window).resize(function(){
+        resizeMarginBetweenButtons();
+    })
+    function resizeMarginBetweenButtons() {
+        var width = $(window).width();
+        if (width!=2650) {
+            marginBetweenButtons = 60-Math.pow(((2650-width)/200),1.7);
+        }
+        else {
+            marginBetweenButtons = 60;
+        }
+        $('.btn-left').css({'margin-left': marginBetweenButtons + '%'});
+        $('.btn-right').css({'margin-right': marginBetweenButtons + '%'});
+    }
+</script>
+
+<div class="img-container" style="background-image:url({{ stars }}); padding-top:5%; padding-bottom:5%;"
+     id="divBeforeFooter">
     <br>
     <h1>Make a Difference Today</h1>
     <h3>
@@ -149,19 +267,27 @@ <h3>
         <table style="width:100%;">
             <tr>
                 <td>
-                    <a href="/contacts/" class="btn-left">CONTACTS</a>
+                    <div id="contacts">
+                        <a href="/contacts/" class="btn-left">CONTACTS</a>
+                    </div>
+
                 </td>
                 <td>
                     <a href="/posts/" class="btn-right">POSTS FEEDS</a>
                 </td>
             </tr>
+            <tr>
+                <td id="posts">
+                    <a href="/posts/" class="btn-right" id="mobile">POSTS FEEDS</a>
+                </td>
+            </tr>
         </table>
     </div>
 
 </div>
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -207,8 +333,8 @@ <h3>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
diff --git a/HomePage/templates/HomePage/posts.html b/HomePage/templates/HomePage/posts.html
index 30e7aa8..71f2123 100644
--- a/HomePage/templates/HomePage/posts.html
+++ b/HomePage/templates/HomePage/posts.html
@@ -13,23 +13,90 @@
     <link rel="stylesheet" type="text/css" href="{{fontawesome}}">
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <title>Posts</title>
 </head>
 <body>
 <script>
-    $(document).ready(function {
-        var height = window.height();
-        ('.img-container').css({'height': height + 'px'});
+        $(document).ready(function(){
+            resizeFooter();
+            var width = $(window).width();
+            if(width<632){
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        })
+        $(window).resize(function(){
+            resizeFooter();
+            var width = $(window).width();
+            if(width < 632) {
+                ('.sliderHeading').css({'font-size': '2em'});
+            }
+        });
+
+    function resizeFooter() {
+        var width = $(window).width();
+            if(width!=2560) {
+                marginBottom = Math.pow(((2560-width)/300), 2.25)+23;
+                paddingTop = ((2560-width)/150)+1;
+            }
+            else {
+                marginBottom = 23;
+            }
+            $('#divBeforeFooter').css({'margin-bottom': marginBottom + '%'});
+            $('#footerTable').css({'padding-top': paddingTop + '%'});
+
+    }
+
+</script>
+<script>
+        $(window).scroll(function(){
+        var wScroll = $(window).scrollTop();
+        $('#title').css({'background-position': 'center ' + -(wScroll*0.1) + 'px'});
+        $('#content').css({'top': 'center ' + -5+(wScroll*0.3) + 'px'});
     })
+    $(document).ready(function() {
+        lowerLogoInNavbar();
+    })
+    $(window).resize(function(){
+        lowerLogoInNavbar();
+    });
+    function lowerLogoInNavbar() {
+        var width = $(window).width();
+            if(width!=2650) {
+                marginAboveLogo = Math.pow(((2650-width)/1000), 1.7)+0.5;
+            }
+            else {
+                marginAboveLogo = 0.5;
+            }
+            $('#logo').css({'margin-top': marginAboveLogo + '%'});
+    }
+
 </script>
-        <div class="navbar">
+<script>
+    function openMenu() {
+        if($("#hamburger").hasClass("on")) {
+            $("#hamburger").removeClass("on");
+            $("#nav-links").removeClass("open");
+            $(".navoption").removeClass("fade");
+        }
+        else {
+            $("#hamburger").addClass("on");
+            $("#nav-links").addClass("open");
+            $(".navoption").addClass("fade");
+        }
+
+    }
+</script>
+<div class="navbar">
             <nav>
-                <ul>
-                    <img src="{{logo}}">
+                <img src="{{logo}}" id="logo">
+                <ul id="nav-links">
+
                     <li class="navoption"><a href="../" class="navelement">Home</a></li>
                     <li class="navoption"><a href="/about-us/" class="navelement">About</a>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Projects</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Projects <i class="fas fa-sort-down"></i></a>
                         <ul class="long-menu">
                             <li><a href="/wqcs/">Water Quality Checking System</a></li>
                             <li><a href="/rums/">Rainwater Usage Monitoring System</a></li>
@@ -37,21 +104,21 @@
                             <li><a href="/tkp/">The Kangaroo Project</a></li>
                         </ul>
                     </li>
-                     <li class="navoption"><a href="/md/" class="navelement">Monitoring Data</a>
+                     <li class="navoption menu" id="monitoringData"><a href="/md/" class="navelement">Monitoring Data</a>
                         <ul>
-                            <li><a href="javascript:void(1);" class="submenu">Temperature</a>
+                            <li><a href="javascript:void(1);" class="submenu">Temperature <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursTemperature/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearTemperature/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu">Conductivity</a>
+                            <li><a href="javascript:void(1);" class="submenu">Conductivity <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HoursConductivity/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearConductivity/" target="_blank">Last Year</a></li>
                                 </ul>
                             </li>
-                            <li><a href="javascript:void(1);" class="submenu-2">pH</a>
+                            <li><a href="javascript:void(1);" class="submenu-2">pH <i class="fas fa-sort-down"></i></a>
                                 <ul>
                                     <li><a href="/data/last24HourspH/" target="_blank">Last 24 Hours</a></li>
                                     <li><a href="/data/lastYearpH/" target="_blank">Last Year</a></li>
@@ -59,7 +126,7 @@
                             </li>
                         </ul>
                     </li>
-                    <li class="navoption"><a href="javascript:void(1);" class="navelement">Contact Us</a>
+                    <li class="navoption menu"><a href="javascript:void(1);" class="navelement">Contact Us <i class="fas fa-sort-down"></i></a>
                         <ul>
                             <li><a href="/posts/">Post Feeds</a></li>
                             <li><a href="/contacts/">Contacts</a></li>
@@ -67,8 +134,15 @@
                     </li>
                     <li class="navoption"><a href="/admin" target="_blank" class="navelement">Admin</a></li>
                 </ul>
+                <div id="hamburger" onclick="openMenu();">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
             </nav>
-    </div>
+
+
+</div>
     <div class="img-container" style="background-image:url({{ stars }});">
         <h1>Posts Feeds Section</h1>
         <br>
@@ -76,7 +150,7 @@ <h2>Any Questions? Mention Here.</h2>
         <a class="learn-more" onclick="document.getElementById('description').scrollIntoView(true);"><i class="fas fa-chevron-down"></i></a>
 
     </div>
-    <div class="img-c" style="background:#fff; margin-bottom:23%; z-index:10000;">
+    <div class="img-c" style="background:#fff; margin-bottom:23%; z-index:10000;" id="divBeforeFooter">
     <br>
     <br>
     <br>
@@ -88,7 +162,7 @@ <h4>{{message}}</h4>
 
 <div class="footer" style="overflow-x:hidden;">
     <div id="footerTable" style="padding-top:2%;">
-        <table style="width:80%; margin-left:16%;">
+        <table style="">
             <tr>
                 <td class="img">
                     <img src="{{wts}}" style="width:90%;">
@@ -134,8 +208,8 @@ <h4>{{message}}</h4>
         </table>
     </div>
     <br>
-    <div>
-        <table style="width:25%; margin-left:35%;">
+    <div id="linksTable">
+        <table style="">
             <tr>
                 <td style="width:40%;">
                    <h3>
@@ -161,7 +235,6 @@ <h3>
         </table>
     </div>
 </div>
-    </div>
     {% endblock %}
 </body>
 </html>
\ No newline at end of file
diff --git a/HomePage/views.py b/HomePage/views.py
index b992c44..a1d5794 100644
--- a/HomePage/views.py
+++ b/HomePage/views.py
@@ -15,7 +15,7 @@
     'mw': static('HomePage/melbournew.png'),
     'yprl': static('HomePage/yprl.png'),
     'rudra': static('HomePage/Rudra.png'),
-    'logo': static('HomePage/satms.jpg'),
+    'logo': static('HomePage/Logo.jpg'),
     'navCSS': static('HomePage/CSS/navbar.css'),
     'kangaroo': static('HomePage/kangaroo.jpg'),
     'socialIcons': static('HomePage/CSS/social-icons.css'),
@@ -27,7 +27,8 @@
     'vsg': static('HomePage/vsg.png'),
     'lsc': static('HomePage/lsc.png'),
     'mu': static('HomePage/mu.png'),
-    'wts': static('HomePage/wts.png')
+    'wts': static('HomePage/wts.png'),
+    'navbarJS': static('HomePage/JS/navbar.js')
 
 }