diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
index 0d68709fc..83b10e784 100644
--- a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
+++ b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
@@ -1,21 +1,22 @@
+
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
-<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse navigation-left-nav-web-app" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
-  <div class="d-flex flex-column justify-content-between h-100 w-100">
-    <div class="d-flex flex-column">
-      <button class="btn-left-nav-toggle mb-5" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
-        <span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference">
-          Menu
-        </span>
-        <span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
-          keyboard_double_arrow_left
-        </span>
-      </button>
+<div class="leftnav-container py-3" data-controller="navigation-left-nav-web-app">
+  <nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
+    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
+      <div class="d-flex flex-column">
+        <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
+          <span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
+            keyboard_double_arrow_left
+          </span>
+          <span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
+        </button>
 
-      <div class="mb-4">
-        <%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
+        <div class="mb-4">
+          <%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
+        </div>
+        <%+ LeftNavMenu { nav: upper_nav } %>
       </div>
-      <%+ LeftNavMenu { nav: upper_nav } %>
+      <%+ LeftNavMenu { nav: lower_nav} %>
     </div>
-    <%+ LeftNavMenu { nav: lower_nav} %>
-  </div>
-</nav>
+  </nav>
+</div>
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
index d08ee01c0..9a48d614b 100644
--- a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
+++ b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
@@ -25,3 +25,71 @@
         background-color: #{$gray-900}
     }
 }
+
+div[data-controller="navigation-left-nav-web-app"] {
+    .menu-container {
+        transition: width $animation-timer;
+        &.expanding, &.expanded {
+            width: 220px;
+        }
+        &.collapsing, &.collapsed {
+            width: 48px;
+        }
+    }
+
+    .btn-left-nav-toggle {
+        --bs-btn-padding-x: 0px;
+        display: flex;
+        justify-content: start;
+        font-weight: $font-weight-bold;
+    
+        color: #{$gray-100};
+    
+        border-radius: 0px;
+        --bs-btn-border-color: transparent;
+        border: 0px;
+    
+        --bs-btn-active-color: #{$gray-100};
+        --bs-btn-hover-color: #{$gray-100};
+    }
+    
+    .left-nav-toggle-icon {
+        margin-left: 12px;
+        margin-right: 0px;
+    
+        transition: all $animation-timer;
+        &.collapsing {
+            transform: rotate(-180deg);
+        }
+    
+        &.collapsed {
+            transform: rotate(-180deg);
+        }
+    
+        &.collapsing {
+            height: auto !important;
+        }
+    }
+}
+
+
+@keyframes collapse-margin {
+    from {
+        margin-left: calc($left-nav-w - 9rem);
+        margin-right: 0px;
+    }
+    to {
+        margin-left: calc($left-nav-w-collapsed/2 - 32px);
+        margin-right: calc($left-nav-w-collapsed/2 - 32px);
+    }
+}
+@keyframes expand-margin {
+    from {
+        margin-left: calc($left-nav-w-collapsed/2 - 32px);
+        margin-right: calc($left-nav-w-collapsed/2 - 32px);
+    }
+    to {
+        margin-left: calc($left-nav-w - 9rem);
+        margin-right: 0px;
+    }
+}
diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
index 38f245472..fae66c3e7 100644
--- a/pgml-dashboard/static/css/scss/abstracts/variables.scss
+++ b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -247,4 +247,4 @@ $breadcrumb-height:                 57px;
 
 // animations
 $animation-timer: 0.35s;
-$transition-collapse-width:   width 0.35s ease;
+$transition-collapse-width:   width .35s ease;
diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
index f04148619..840ba5144 100644
--- a/pgml-dashboard/static/css/scss/components/_buttons.scss
+++ b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -251,74 +251,3 @@
     border-right: none;
     font-weight: $font-weight-medium;
 }
-
-.btn-left-nav-toggle {
-    @extend .btn;
-    --bs-btn-padding-x: 0px;
-    display: flex;
-    font-weight: $font-weight-bold;
-
-    color: #{$gray-100};
-
-    border-radius: 0px;
-    --bs-btn-border-color: transparent;
-    border-top: 0px;
-    border-left: 0px;
-    border-right: 0px;
-    border-bottom: 1px solid #{$gray-100} !important;
-
-    --bs-btn-active-color: #{$gray-100};
-    --bs-btn-hover-color: #{$gray-100};
-}
-
-.left-nav-toggle-icon {
-    margin-left: calc($left-nav-w - 9rem);
-    margin-right: 0px;
-
-    &.expanding {
-        animation-name: expand-margin;
-        animation-duration: $animation-timer;
-    }
-
-    &.collapsing {
-        animation-name: collapse-margin;
-        animation-duration: $animation-timer;
-        transform: rotate(-180deg);
-    }
-
-    &.expanded {
-        margin-left: calc($left-nav-w - 9rem);
-        margin-right: 0px;
-    }
-
-    &.collapsed {
-        margin-left: calc($left-nav-w-collapsed/2 - 32px);
-        margin-right: calc($left-nav-w-collapsed/2 - 32px);
-        transform: rotate(-180deg);
-    }
-
-    &.collapsing {
-        height: auto !important;
-    }
-}
-
-@keyframes collapse-margin {
-    from {
-        margin-left: calc($left-nav-w - 9rem);
-        margin-right: 0px;
-    }
-    to {
-        margin-left: calc($left-nav-w-collapsed/2 - 32px);
-        margin-right: calc($left-nav-w-collapsed/2 - 32px);
-    }
-}
-@keyframes expand-margin {
-    from {
-        margin-left: calc($left-nav-w-collapsed/2 - 32px);
-        margin-right: calc($left-nav-w-collapsed/2 - 32px);
-    }
-    to {
-        margin-left: calc($left-nav-w - 9rem);
-        margin-right: 0px;
-    }
-}
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
index ccc868f71..a84ce5e8e 100644
--- a/pgml-dashboard/templates/layout/web_app_base.html
+++ b/pgml-dashboard/templates/layout/web_app_base.html
@@ -27,9 +27,7 @@
                     <%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>
 
                     <div class="d-flex">
-                        <div class="leftnav-container py-3" >
-                            <%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
-                        </div>
+                        <%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
     
                         <div class="clear-from-under-navbar flex-grow-1 min-vw-0">
                             <div class="px-5 py-3" style="position: absolute">