diff --git a/swd/assets/css/style.css b/swd/assets/css/style.css
index ed5402a3..fab2bbe3 100644
--- a/swd/assets/css/style.css
+++ b/swd/assets/css/style.css
@@ -62,13 +62,23 @@ nav .button-collapse i{
 }
 
 .side-nav li {
-  margin: 8px;
+  margin-bottom: 4px;
+  margin-left: 0px;
+  margin-right: 0px;
   background-color: #1C5960;
 }
 .side-nav li:hover {
   background-color: #FFBE57;
 }
 
+.side-nav li:focus {
+  background-color: #FFBE57;
+}
+
+.side-nav li:target {
+  background-color: #FFBE57;
+}
+
 .tabs.tabs-transparent {
   background-color: #074F57;
   color: white;
@@ -134,6 +144,27 @@ nav .button-collapse i{
   right: 0px;
 }
 
+.tab-inner > a {
+  padding: 0 48px !important;
+  background-color: #05393f;
+}
+
+.tab-inner:hover > a {
+  background-color: #FFBE57;
+}
+
+.active1 {
+  background-color: #FFBE57 !important;
+  color: #074F57 !important;
+  font-weight: 700 !important;
+}
+
+.active2 {
+  background-color: #05393f !important;
+  border-right: solid 10px #FFBE57;
+  color: white  !important;
+}
+
 @media screen and (max-width: 800px) {
   .desktop{
     display: none;
@@ -152,6 +183,4 @@ nav .button-collapse i{
     padding-bottom: 24px !important;
   }
 
-}
-
-
+}
\ No newline at end of file
diff --git a/swd/templates/base.html b/swd/templates/base.html
index 5da5dc66..2c70b102 100644
--- a/swd/templates/base.html
+++ b/swd/templates/base.html
@@ -24,7 +24,7 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="{% static 'img/ms-icon-144x144.png' %}">
     <meta name="theme-color" content="#ffffff">
-  
+
 
     <!-- CSS  -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -43,15 +43,19 @@
         <div class="nav-wrapper" style="margin-bottom: 5px;">
                 <a href="/#" class="brand-logo"><img id="swd" src="{% static 'img/swd.png' %}"></a>
             <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
-            <ul id="nav-mobile" class="right hide-on-med-and-down">
-                <li class=""><a href="/profile" class="valign-wrapper"><img class="circle profileImg" src="/media/{{ student.profile_picture }}">&nbsp;{{ student.name|title }}</a></li>
-                <li><a href="/logout">Logout</a></li>
+            <ul id="nav-mobile" class="right custom-mobile">
+                <li><a href="{% url 'csa' %}" class="hide-on-med-and-down">CSA</a></li>
+                <li><a href="{% url 'sac' %}" class="hide-on-med-and-down">SAC</a></li>
+                <li><a href="{% url 'swd' %}" class="hide-on-med-and-down">Services</a></li>
+                <li><a href="{% url 'contact' %}" class="hide-on-med-and-down">Contact Us</a></li>
+                <li><a href="{% url 'profile' %}" class="valign-wrapper hide-on-med-and-down"><img class="circle profileImg" src="/media/{{ student.profile_picture }}">&nbsp;{{ student.name|title }}</a></li>
+                <li><a href="{% url 'logout' %}" class="hide-on-med-and-down">Logout</a></li>
             </ul>
             <ul class="side-nav" id="mobile-demo">
                     <div class="container-fluid" style="margin-top:10px">
                         <div class="row" style="position: relative; margin-top: 20px">
                             <div class="col sm-2">
-                                    <a href="/profile" class="valign-wrapper">
+                                    <a href="{% url 'profile' %}" class="valign-wrapper">
                                         <img style="max-width:80px" class="circle profileImg" src="/media/{{ student.profile_picture }}">
                                     </a>
                             </div>
@@ -64,30 +68,49 @@
                             </div>
                         </div>
                     </div>
-                    
-               
+
+
                 {%if student %}
-                <li class="tab"><a href="/dashboard" target="_self">Dashboard</a></li>
-                {% if not student.nophd %}<li class="tab"><a href="/messoption" target="_self">Mess Option</a></li>{% endif %}
-                {% if not student.nophd %}<li class="tab"><a href="/leave" target="_self">Leave</a></li>{% endif %}
-                {% if not student.nophd %}<li class="tab"><a href="/certificates" target="_self">Certificates</a></li>{% endif %}
-                {% if not student.nophd %}<li class="tab"><a href="/daypass" target="_self">Daypass</a></li>{% endif %}
-                <li class="tab"><a href="/store" target="_self">Store</a></li>
-                <li class="tab"><a href="/dues" target="_self">Dues</a></li>
-                <li class="tab"><a href="/documents" target="_self">Documents</a></li>
-                <li class="tab"><a href="/search" target="_self">Search</a></li>
-                <li class="tab"><a href="/submit_mcn" target="_self">MCN</a></li>
-                <li><a href="/logout">Logout</a></li>
-                <div class="center"><a href="/developers" style="color: white;">Developers</a></div>
+                <li><a href="/dashboard/" target="_self">Home</a></li>
+                <li class="tab" id="hello"><a>My account</a></li>
+                {% if not student.nophd %}<li class="tab tab-inner"><a href="/messoption/" target="_self">Mess Option</a></li>{% endif %}
+                {% if not student.nophd %}<li class="tab tab-inner"><a href="/leave/" target="_self">Leave</a></li>{% endif %}
+                <li class="tab tab-inner"><a href="/events/" target="_self">Events</a></li>
+                <li class="tab tab-inner"><a href="/dues/" target="_self">Dues</a></li>
+                {% if not student.nophd %}<li class="tab tab-inner"><a href="/certificates/" target="_self">Certificates</a></li>{% endif %}
+                <!-- {% if not student.nophd %}<li class="tab tab-inner"><a href="/daypass/" target="_self">Daypass</a></li>{% endif %} -->
+                <li class="tab tab-inner"><a href="/submit_mcn" target="_self">MCN</a></li>
+                <li class="tab tab-inner"><a href="/logout/">Logout</a></li>
+                <li class="tab"><a href="/search/" target="_self">Student Search</a></li>
+                <li class="tab"><a>About Us</a>
+                    <li class="tab tab-inner"><a href="/swd/" target="_self">SWD</a></li>
+                    <li class="tab tab-inner"><a href="/csa/" target="_self">CSA</a></li>
+                    <li class="tab tab-inner"><a href="/sac/" target="_self">SAC</a></li>
+                </li>
+                <!-- <li class="tab"><a href="/store/" target="_self">Store</a></li>
+                <li class="tab"><a href="/documents/" target="_self">Documents</a></li> -->
+                <li class="tab"><a href="/migration/">Migration</a></li>
+                <li class="tab"><a href="/antiragging/">Anti-Ragging</a></li>
+                <li class="tab"><a href="/contact/">Contact Us</a></li>
+                <div class="center"><a href="/developers/" style="color: white;">Developers</a></div>
             </ul>
             <style>
                 .profileImg {
                     max-width: 35px;
                     height:auto
                 }
+                .custom-mobile {
+                    display: flex;
+                    min-width: fit-content;
+                }
+                @media screen and (max-width: 800px) {
+                    .custom-mobile{
+                        margin-top: 3.5rem;
+                    }
+                }
             </style>
         </div>
-        
+
         <div class="nav-content desktop" style="margin-bottom:10px;">
             <ul class="tabs tabs-transparent">
                 {% load main_extras %}
@@ -108,23 +131,23 @@
     {% comment %} <nav class="" role="navigation">
         <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo"></a>
             <ul id="dropdown1" class="dropdown-content">
-                <li><a href="/profile"><i class="material-icons">person_outline</i>Profile</a></li>
-                <li><a href="/logout"><i class="material-icons">exit_to_app</i>Logout</a></li>
+                <li><a href="{% url 'profile' %}"><i class="material-icons">person_outline</i>Profile</a></li>
+                <li><a href="{% url 'logout' %}"><i class="material-icons">exit_to_app</i>Logout</a></li>
             </ul>
             <ul class="right hide-on-med-and-down">
                 <li><a class="dropdown-button" href="#!" data-activates="dropdown1">&nbsp;&nbsp;&nbsp;&nbsp;Settings<i class="material-icons right">arrow_drop_down</i></a></li>
             </ul>
 
             <ul id="nav-mobile" class="side-nav">
-                <li><a href="/profile">Profile</a></li>
+                <li><a href="{% url 'profile' %}">Profile</a></li>
                 <li><a href="/#">Home</a></li>
-                <li><a href="/swd">Services</a></li>
-                <li><a href="/csa">CSA</a></li>
-                <li><a href="/sac">SAC</a></li>
-                <li><a href="/antiragging">Anti-Ragging</a></li>
-                <li><a href="/contact">Contact Us</a></li>
-                <li><a href="/search">Search</a></li>
-                <li><a href="/logout">Logout</a></li>
+                <li><a href="{% url 'swd' %}">Services</a></li>
+                <li><a href="{% url 'csa' %}">CSA</a></li>
+                <li><a href="{% url 'sac' %}">SAC</a></li>
+                <li><a href="{% url 'antiragging' %}">Anti-Ragging</a></li>
+                <li><a href="{% url 'contact' %}">Contact Us</a></li>
+                <li><a href="{% url 'search' %}">Search</a></li>
+                <li><a href="{% url 'logout' %}">Logout</a></li>
             </ul>
             <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
         </div>
@@ -143,10 +166,10 @@
             </div>
         </li>
          {% load main_extras %}
-        <li class="{% active_page request 'dashboard' %}"><a href="/dashboard"><i class="material-icons">dashboard</i>Dashboard</a></li>
-        {% if not student.nophd %}<li class="{% active_page request 'messoption' %}"><a href="/messoption"><i class="material-icons">local_dining</i>Mess Option</a></li>{% endif %}
-        {% if not student.nophd %}<li class="{% active_page request 'leave' %}"><a href="/leave"><i class="material-icons">flight_takeoff</i>Leave</a></li>{% endif %}
-        <li class="{% active_page request 'certificates' %}"><a href="/certificates"><i class="material-icons">assignment</i>Certificates</a></li>
+        <li class="{% active_page request 'dashboard' %}"><a href="{% url 'dashboard' %}"><i class="material-icons">dashboard</i>Dashboard</a></li>
+        {% if not student.nophd %}<li class="{% active_page request 'messoption' %}"><a href="{% url 'messoption' %}"><i class="material-icons">local_dining</i>Mess Option</a></li>{% endif %}
+        {% if not student.nophd %}<li class="{% active_page request 'leave' %}"><a href="{% url 'leave' %}"><i class="material-icons">flight_takeoff</i>Leave</a></li>{% endif %}
+        <li class="{% active_page request 'certificates' %}"><a href="{% url 'certificates' %}"><i class="material-icons">assignment</i>Certificates</a></li>
         <li>
             <div class="divider"></div>
         </li>
@@ -154,8 +177,8 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col l3 desktop">
-        
-                    {% include 'quickupdates.html' %} 
+
+                    {% include 'quickupdates.html' %}
             </div>
             <div class="col l9 s12" style="overflow-y: auto; height: 100vh; padding-bottom: 70px">
                 {% block content %}
@@ -169,12 +192,27 @@
     <script>
         $(document).ready(function () {
             $('select').material_select();
+
+            var url = window.location.pathname;
+
+            $(".side-nav > li > a").each(function() {
+                if (url == (this.pathname)) {
+                    $(this).closest("a").addClass("active1");
+                }
+            });
+
+            $(".tab-inner > a").each(function() {
+                if (url == (this.pathname)) {
+                    $(this).closest("a").addClass("active2");
+                    $(this).closest("#hello").addClass("active1");
+                }
+            });
         });
 
         // var yesterday = new Date((new Date()).valueOf()-1000*60*60*24);
 
         $('.datepicker').pickadate({
-           
+
             selectMonths: true, // Creates a dropdown to control month
             selectYears: 15, // Creates a dropdown of 15 years to control year,
             today: 'Today',
@@ -182,7 +220,7 @@
             close: 'Ok',
             closeOnSelect: false, // Close upon selecting a date,
             container: undefined, // ex. 'body' will append picker to body
-     
+
         });
 
         $('.timepicker').pickatime({
diff --git a/swd/templates/indexbase.html b/swd/templates/indexbase.html
index 9b24e584..57c1381f 100644
--- a/swd/templates/indexbase.html
+++ b/swd/templates/indexbase.html
@@ -69,15 +69,16 @@
                   </div>
               </div>
               <!-- <li><img src="{% static 'img/person.svg' %}"></imgsrc>Not Logged in</li> -->
-              <li><a href="/#">Home</a></li>
-              <li id="login"><a href="/login">Log In</a></li>
-              <li><a href="/swd">Services</a></li>
-              <li><a href="/csa">CSA</a></li>
-              <li><a href="/sac">SAC</a></li>
-              <li><a href="/antiragging">Anti-Ragging</a></li>
-              <li><a href="/migration">Migration</a></li>
-              <li><a href="/contact">Contact Us</a></li>
-              <li><a href="/search">Search</a></li>
+              <li><a href="/dashboard">Home</a></li>
+              <li id="login" class="tab"><a href="/login">Log In</a></li>
+              <li class="tab"><a href="/search">Search</a></li>
+              <li class="tab"><a href="/swd">About Us</a></li>
+              <li class="tab tab-inner"><a href="/swd" target="_self">SWD</a></li>
+              <li class="tab tab-inner"><a href="/csa">CSA</a></li>
+              <li class="tab tab-inner"><a href="/sac">SAC</a></li>
+              <li class="tab"><a href="/antiragging">Anti-Ragging</a></li>
+              <li class="tab"><a href="/migration">Migration</a></li>
+              <li class="tab"><a href="/contact">Contact Us</a></li>
               
               <div class="center"><a href="/developers" style="color: white;">Developers</a></div>
           </ul>
@@ -135,6 +136,25 @@
         $(document).ready(function () {
             $('select').material_select();
         });
+
+        $(document).ready(function () {
+            $('select').material_select();
+
+            var url = window.location.pathname;
+
+            $(".side-nav > li > a").each(function() {
+                if (url == (this.pathname +"/")) {
+                    $(this).closest("a").addClass("active1");
+                }
+            });
+
+            $(".tab-inner > a").each(function() {
+                if (url == (this.pathname +"/")) {
+                    $(this).closest("a").addClass("active2");
+                    $(this).closest("#hello").addClass("active1");
+                }
+            });
+        });
     </script>
 
 </body>