diff --git a/static/css/style.css b/static/css/style.css
index e90b35e..876f8b2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,21 +1,33 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f9f9f9;
-    color: #333;
+:root {
+    --primary-brand-color: #07AAF9;
+    --light-bg-primary: #f4f7fa;
+    --light-bg-secondary: #ffffff;
+    --light-border-color: #dee2e6;
+    --text-color-primary: #212529;
+    --text-color-secondary: #6c757d;
+    --sidebar-width: 260px;
+    --sidebar-width-collapsed: 88px;
 }
 
-header {
+body {
+    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: var(--light-bg-primary);
+    color: var(--text-color-primary);
+    display: flex;
+}
+
+.page-header {
     position: relative;
-    background: url('../img/background.webp') no-repeat center center;
+    background: url('/static/img/background.webp') no-repeat center center;
     background-size: cover;
     color: white;
     padding: 40px 20px;
     text-align: center;
+    padding: 0.9rem;
+    border-bottom: 1px solid var(--light-border-color);
 }
 
-header::after {
+.page-header::after {
     content: "";
     position: absolute;
     top: 0;
@@ -26,60 +38,197 @@ header::after {
     z-index: 1;
 }
 
-header h1, header p {
+.page-header h1, .page-header p {
     position: relative;
     z-index: 2;
 }
 
-header h1 {
+.page-header h1 {
     margin: 0;
     font-size: 2.5em;
 }
 
-.header-content {
+.page-header-content {
     position: relative;
-    z-index: 2; /* hoger dan de overlay */
+    z-index: 2;
 }
 
+.sidebar {
+    width: var(--sidebar-width);
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--light-bg-secondary);
+    border-right: 1px solid var(--light-border-color);
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease;
+}
+
+.sidebar .offcanvas-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+}
+
+.sidebar .offcanvas-body > div:first-child {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--light-border-color);
+    flex-shrink: 0;
+}
+.vyos-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+}
+.vyos-logo {
+    height: 128px;
+    width: auto;
+}
+.sidebar-version {
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    color: var(--text-color-secondary);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: center;
+    transition: opacity 0.3s ease;
+}
+.sidebar-hostname {
+    color: var(--text-color-primary);
+    font-weight: 500;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: center;
+    transition: opacity 0.3s ease;
+}
+
+
+.sidebar .nav-link {
+    color: var(--text-color-secondary);
+    font-weight: 500;
+    padding: 0.8rem 1.5rem;
+    margin: 0.25rem 1rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    transition: background-color 0.2s, color 0.2s;
+}
+.sidebar .nav-link .fa-fw {
+    width: 1.5rem;
+    margin-right: 1rem;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+.sidebar .nav-link:hover {
+    background-color: #e9ecef;
+    color: var(--text-color-primary);
+}
+.sidebar .nav-link.active {
+    background-color: var(--primary-brand-color);
+    color: #fff;
+}
+.nav-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 1rem;
+    flex-shrink: 0;
+    transition: filter 0.2s;
+}
+.sidebar-footer {
+    padding: 1rem;
+    border-top: 1px solid var(--light-border-color);
+    text-align: center;
+    flex-shrink: 0;
+}
+#sidebar-toggle {
+    width: 100%;
+    color: var(--text-color-secondary);
+}
+#sidebar-toggle:hover {
+    background-color: #e9ecef;
+}
+
+body.sidebar-collapsed .sidebar {
+    width: var(--sidebar-width-collapsed);
+}
+body.sidebar-collapsed .vyos-logo {
+    height: 64px;
+	width: auto;
+}
+body.sidebar-collapsed .sidebar-hostname {
+    opacity: 0;
+    height: 0;
+    margin-bottom: 0;
+}
+body.sidebar-collapsed .sidebar-version {
+    opacity: 0;
+    height: 0;
+    margin-bottom: 0;
+}
+body.sidebar-collapsed .sidebar .nav-link span {
+    display: none;
+}
+body.sidebar-collapsed .sidebar .nav-link {
+    justify-content: center;
+    padding: 0.8rem 1rem;
+}
+body.sidebar-collapsed .sidebar .nav-link .fa-fw {
+    margin-right: 0;
+}
+body.sidebar-collapsed #sidebar-toggle .fa-chevron-left {
+    transform: rotate(180deg);
+}
+
+.main-content-wrapper {
+    width: calc(100% - var(--sidebar-width));
+    margin-left: var(--sidebar-width);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    transition: width 0.3s ease, margin-left 0.3s ease;
+}
+.main-content-wrapper1 {
+    max-width: 1200px!important;
+	margin: 0 auto!important;
+}
 main {
-    padding: 20px;
-    max-width: 1440px;
-    margin: 0 auto;
+    flex-grow: 1;
+}
+body.sidebar-collapsed .main-content-wrapper {
+    width: calc(100% - var(--sidebar-width-collapsed));
+    margin-left: var(--sidebar-width-collapsed);
 }
 
 section {
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
+    background: var(--light-bg-secondary);
+    border: 1px solid var(--light-border-color);
+    border-radius: 0.5rem;
     padding: 20px;
     margin-bottom: 20px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
-
 section h2 {
-    color: #07AAF9;
+    color: var(--text-color-primary);
     margin-top: 0;
-}
-
-footer {
-    background-color: #2D2E43;
-    color: white;
-    text-align: center;
-    padding: 10px 0;
-    margin-top: 20px;
-}
-
-.container {
-    display: flex;
-    gap: 50px;
-}
-
-.upstreamcon {
-    border: 2px solid #07AAF9;
-    border-radius: 8px;
-    padding: 10px;
-    width: 45%;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--light-border-color);
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    font-size: 1.5rem;
 }
 
 table {
@@ -144,7 +293,7 @@ th.desc .sort-arrow::after {
     vertical-align: text-bottom;
 }
 
- #bgpOutput {
+#bgpOutput {
     white-space: pre-wrap;
     background-color: #1e1e1e;
     color: #d4d4d4;
@@ -388,73 +537,6 @@ canvas {
     margin: 0 5px;
 }
 
-.icon-info, .icon-details, .icon-bfd, .icon-gear, .icon-graph {
-  display: inline-block;
-  width: clamp(1rem, 1vw + 0.5rem, 1.5625rem);
-  height: clamp(1rem, 1vw + 0.5rem, 1.5625rem);
-
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-size: contain;
-  cursor: pointer;
-  text-indent: -9999px;
-  overflow: hidden;
-}
-
-.icon-info {
-  background-image: url('/static/img/info.png');
-}
-
-.icon-details {
-  background-image: url('/static/img/details.png');
-}
-
-.icon-bfd {
-  background-image: url('/static/img/fast.png');
-}
-
-.icon-gear {
-  background-image: url('/static/img/settings.png');
-}
-
-.icon-graph {
-  background-image: url('/static/img/graph.png');
-}
-
-td.d-flex {
-  gap: 8px;
-}
-
-#progress {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  height: 70px;
-  width: 70px;
-  display: none;
-  place-items: center;
-  border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  z-index: 1000;
-  transition: opacity 0.3s, visibility 0.3s;
-}
-
-#progress.active {
-  display: grid;
-}
-
-#progress-value {
-  display: grid;
-  place-items: center;
-  height: calc(100% - 10px);
-  width: calc(100% - 10px);
-  background-color: #ffffff;
-  border-radius: 50%;
-  font-size: 25px;
-  color: #0d6efd;
-}
-
 .modal-overlay {
     position: fixed;
     top: 0;
@@ -506,4 +588,55 @@ td.d-flex {
 	border-radius: 0.25rem;
 	white-space: pre-wrap;
 	word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.icon-info, .icon-details, .icon-bfd, .icon-gear, .icon-graph {
+  display: inline-block;
+  width: clamp(1rem, 1vw + 0.5rem, 1.5625rem);
+  height: clamp(1rem, 1vw + 0.5rem, 1.5625rem);
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: contain;
+  cursor: pointer;
+  text-indent: -9999px;
+  overflow: hidden;
+  filter: none;
+}
+.icon-info { background-image: url('/static/img/info.png'); }
+.icon-details { background-image: url('/static/img/details.png'); }
+.icon-bfd { background-image: url('/static/img/fast.png'); }
+.icon-gear { background-image: url('/static/img/settings.png'); }
+.icon-graph { background-image: url('/static/img/graph.png'); }
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    color: var(--text-color-secondary);
+    background-color: var(--light-bg-secondary);
+    border-top: 1px solid var(--light-border-color);
+}
+
+.mobile-header {
+    background-color: var(--light-bg-secondary);
+    border-bottom: 1px solid var(--light-border-color);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.mobile-header .navbar-brand img {
+    height: 40px;
+}
+
+@media (max-width: 991.98px) {
+    body {
+        display: block;
+        padding-top: 60px;
+    }
+
+    .main-content-wrapper {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .offcanvas-header {
+        border-bottom: 1px solid var(--light-border-color);
+    }
+}