diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css
index 3f2b22e708..d8b1acb57e 100644
--- a/src/main/frontend/components/container.css
+++ b/src/main/frontend/components/container.css
@@ -488,7 +488,8 @@ html[data-theme='dark'] {
 }
 
 .settings-modal {
-  margin: -15px;
+  @apply -m-8 rounded-lg;
+  /* box-shadow: inset 0 0 0 1px var(--ls-border-color); */
 }
 
 .cp__sidebar-main-layout {
diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs
index 0c0a61ded1..8e4172d8e6 100644
--- a/src/main/frontend/components/settings.cljs
+++ b/src/main/frontend/components/settings.cljs
@@ -876,12 +876,13 @@
         *active (::active state)]
 
     [:div#settings.cp__settings-main
-     [:header
-      [:h1.title (t :settings)]]
 
      [:div.cp__settings-inner
 
       [:aside.md:w-64 {:style {:min-width "10rem"}}
+       [:header.cp__settings-header
+        (ui/icon "settings")
+        [:h1.cp__settings-modal-title (t :settings)]]
        [:ul.settings-menu
         (for [[label id text icon]
               [[:account "account" (t :settings-page/tab-account) (ui/icon "user-circle")]
@@ -912,6 +913,8 @@
               [:strong text]]]))]]
 
       [:article
+       [:header.cp__settings-header
+        [:h1.cp__settings-category-title (name (first @*active))]]
 
        (case (first @*active)
 
diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css
index 9da8e11fd6..c01b256a28 100644
--- a/src/main/frontend/components/settings.css
+++ b/src/main/frontend/components/settings.css
@@ -1,5 +1,4 @@
 .cp__settings {
-
   &-main {
     > header {
       padding: 0 10px 10px;
@@ -10,34 +9,78 @@
         margin: 0;
       }
     }
+
+    aside {
+      @apply bg-gray-400/5 p-4;
+    }
+
+    article {
+      @apply p-4 flex-1 min-h-[12rem] w-auto overflow-y-auto;
+      @apply md:max-h-[70vh] md:w-[40rem];
+      /* margin-right: -17px; */
+      /* margin-bottom: -17px; */
+
+      @screen md {
+        /* max-height: 70vh; */
+        /* width: 680px; */
+      }
+    }
+
+    aside > .cp__settings-header,
+    article > .cp__settings-header {
+      @apply h-10 py-2 flex flex-row items-center justify-start gap-2;
+    }
+
+    aside > .cp__settings-header {
+      @apply px-2;
+    }
+
+    aside > .cp__settings-header > .ui__icon {
+      @apply h-8 w-8 bg-gray-700/10 rounded grid place-items-center;
+    }
+
+    aside > .cp__settings-header > .ui__icon > svg {
+      @apply h-6 w-6;
+    }
+
+    h1.cp__settings-modal-title {
+      @apply text-2xl font-semibold lowercase;
+    }
+
+    h1.cp__settings-category-title {
+      @apply text-xl lowercase;
+    }
+
+    h1.cp__settings-modal-title:first-letter, 
+    h1.cp__settings-category-title:first-letter {
+      @apply uppercase;
+    }
+
+    .settings-menu {
+      @apply p-0 m-0 mt-4 pr-3; 
+    }
+
+    .settings-menu-item {
+      @apply list-none p-0 my-1.5 rounded;
+      @apply hover:bg-black/10;
+    }
+
+    .settings-menu-link {
+      @apply px-2 py-1.5 select-none; 
+      color: var(--ls-primary-text-color);
+    }
   }
 
   &-inner {
     @apply flex flex-col md:flex-row;
 
     > aside {
-      border-right: 0 solid var(--ls-quaternary-background-color);
-      border-bottom: 1px solid var(--ls-quaternary-background-color);
-
-      @screen md {
-        border-right: 1px solid var(--ls-quaternary-background-color);
-        border-bottom: 0 solid var(--ls-quaternary-background-color);
-      }
 
       ul {
-        padding: 12px 12px 12px 5px;
-        margin: 0;
 
         > li {
-          list-style: none;
-          padding: 0;
-          margin: 5px 0;
-          border-radius: 4px;
 
           > a {
-            padding: 10px;
-            user-select: none;
-            color: var(--ls-primary-text-color);
 
             > i {
               overflow: hidden;
@@ -64,21 +107,6 @@
       }
     }
 
-    > article {
-      flex: 1;
-      padding: 0 12px 12px;
-      min-height: 380px;
-      width: auto;
-      overflow: auto;
-      margin-right: -17px;
-      margin-bottom: -17px;
-
-      @screen md {
-        max-height: 70vh;
-        width: 680px;
-      }
-    }
-
     &.no-aside {
       > article {
         padding-left: 0;
@@ -86,7 +114,7 @@
     }
 
     .panel-wrap {
-      padding: 12px;
+      @apply p-1;
 
       @screen sm {
         width: 600px;
diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
index 74ca8160dd..734bddd8bb 100644
--- a/src/main/frontend/ui.css
+++ b/src/main/frontend/ui.css
@@ -100,11 +100,12 @@
   }
 
   &-overlay div {
-    background: var(--ls-tertiary-background-color);
+    background-image: linear-gradient(to bottom, var(--ls-primary-background-color), var(--ls-quaternary-background-color));
   }
 
   &-panel {
-    @apply relative rounded-md shadow-xl;
+    @apply relative rounded-md shadow-xl border;
+    border-color: var(--ls-border-color);
 
     overflow: hidden;
     background: var(--ls-secondary-background-color);