diff --git a/static/css/style.css b/static/css/style.css
index d09dbb80..d3c7c458 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -24,7 +24,7 @@ header {
   background-color: #5763ab;
   z-index: 0; 
   display: none; 
-  transition: all 0.25s ease;
+  transition: transform 0.5s ease-out;
 }
 
 
@@ -57,7 +57,7 @@ header {
 }
 
 .menu_bar-top {
-  width: 30px;
+  width: 25px;
 }
 
 .menu_bar-mid {
@@ -65,7 +65,7 @@ header {
 }
 
 .menu_bar-bot {
-  width: 30px;
+  width: 25px;
 }
 
 .side-toggle {
@@ -137,6 +137,10 @@ footer {
   .side-menu {
       display: block;
   }
+  .saburly-footer{
+    margin-left: 10%;
+    margin-right: 10%;
+  }
   .empty-menu{
     display: none;
   }
@@ -145,26 +149,26 @@ footer {
   }
   .side-panel {
     width: 100%;
-    padding-left: 0;
-    padding-right: 0;
   }
   .content {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    width: 95%;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
     padding-left: 0;
     padding-right: 0;
   }
+  .saburly-menu {
+    z-index: 9999;
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+  .saburly-logo{
+    margin-right: 112px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
 }
 
-.side-menu {
-  display: none;
-}
-
-.side-menu.active {
-  display: block; 
-  transform: translateX(0); 
-}
 
 .header-hidden { 
   transform: translateY(-100%); 
@@ -176,26 +180,34 @@ footer {
   transition: transform 0.3s ease; 
 } 
 
+.side-menu {
+  display: none;
+}
 
 .side-menu.active {
-  display: block; 
+  display: block;
 }
 
-.menu-opened .menu_bar-top {
-  transform: rotate(45deg);
-  transform-origin: 15% 15%;
+.content:before {
+  content: '';
+  background-color: rgba(0, 0, 0, 0);
+}
+.content-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+.content-open{
+  margin-left: -256px;
+  transition: margin-left 0.1s;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-.menu-opened .menu_bar-mid {
-  opacity: 0;
+.header-move{
+  margin-left: -256px;
+  transition: margin-left 0.1s;
+  background-color: rgba(55, 65, 105, 1.0);
 }
-
-.menu-opened .menu_bar-bot {
-  transform: rotate(-45deg);
-  transform-origin: 15% 95%;
-}
-
-.menu-opened .side-panel {
-  position:absolute;
-  left: -256px;
-}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index d1c3f157..25d7ea4d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,13 +24,13 @@
 <body class="font-sans">
     <main class="side-panel panel">
         {% include 'header.html' %}
+        {% include 'side_menu.html'%}
         <div class="content">
           {% block content %}
           {% endblock %}
         </div>
         {% include 'footer.html' %}
     </main>
-    {% include 'side_menu.html'%}
 
     <script>
         //side menu
@@ -38,17 +38,22 @@
         const sideToggle = document.querySelector('.side-toggle');
         const sideMenu = document.querySelector('.side-menu');
         const sideCloseButtons = document.querySelectorAll('.side-close');
-        const toggleButton = document.querySelector('.menu_icon');
-        
+        const content = document.querySelector('.content');
+        const headermove = document.getElementById('header');
+
         sideToggle.addEventListener('click', function() {
             sideMenu.classList.toggle('active');
             this.classList.toggle('menu-opened');
+            content.classList.toggle('content-open');
+            headermove.classList.toggle('header-move');
             });
         
         sideCloseButtons.forEach(button => {
             button.addEventListener('click', function() {
                 sideMenu.classList.remove('active');
                 sideToggle.classList.remove('menu-opened');
+                content.classList.remove('content-open');
+                headermove.classList.remove('header-move');
                 });
             });
         })
diff --git a/templates/header.html b/templates/header.html
index dd3bbeed..990e2ca8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,8 +1,8 @@
 <header id="header" class="header-visible"> 
     <div class="saburly-menu">
-        <nav class="container mx-auto flex items-center justify-between lg:p-6 p-4">
+        <nav class="container mx-auto flex items-center justify-between lg:p-6 p-2">
             <a href="/">
-                <div class="max-w-xs mr-8">
+                <div class="max-w-xs mr-8 saburly-logo">
                       {% load static %}
                     <img
                         src="{% static './images/saburly-logo-w.svg' %}"
diff --git a/templates/side_menu.html b/templates/side_menu.html
index cc4ebd4d..8d734b1a 100644
--- a/templates/side_menu.html
+++ b/templates/side_menu.html
@@ -1,6 +1,6 @@
 <div class="side-menu hidden">
     <ul class="m-0 p-0 mt-4 side-navigation list-reset">
-        <br />
+        <div class="side-close text-white text-3xl font-bold px-4 m-2 opacity-50 hover:opacity-100">X</div>
         <a href="/" class="side-close menu-home no-underline">
             <li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
                 Home
