diff --git a/src/app/styles.css b/src/app/styles.css
index 0417873..366bb46 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
   color-scheme: light;
@@ -708,7 +709,7 @@ body {
 .dark .hover\:bg-slate-100:hover,
 .dark .hover\:bg-sky-50:hover,
 .dark .hover\:bg-white:hover {
-  background-color: var(--forge-dark-panel-3) !important;
+  background-color: var(--forge-dark-panel-3);
 }
 
 .dark .hover\:text-slate-950:hover,
diff --git a/src/features/json-yaml/JsonYamlPage.tsx b/src/features/json-yaml/JsonYamlPage.tsx
index c574a1e..b8fba43 100644
--- a/src/features/json-yaml/JsonYamlPage.tsx
+++ b/src/features/json-yaml/JsonYamlPage.tsx
@@ -519,7 +519,7 @@ function CodeEditor({
         <span className="sr-only">{label}</span>
         <textarea
           className={cn(
-            "scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
+            "scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/70 selection:text-transparent",
             lineWrap ? "overflow-auto" : "overflow-auto whitespace-pre",
           )}
           onChange={handleChange}
diff --git a/src/features/json/JsonToolsPage.tsx b/src/features/json/JsonToolsPage.tsx
index b38e59c..3216af9 100644
--- a/src/features/json/JsonToolsPage.tsx
+++ b/src/features/json/JsonToolsPage.tsx
@@ -528,7 +528,7 @@ function JsonCodeEditor({
         <span className="sr-only">{label}</span>
         <textarea
           className={cn(
-            "scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
+            "scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/70 selection:text-transparent",
             lineWrap ? "overflow-auto" : "overflow-auto whitespace-pre",
           )}
           onChange={handleChange}
diff --git a/src/widgets/sidebar/Sidebar.tsx b/src/widgets/sidebar/Sidebar.tsx
index 1984d20..d1142c7 100644
--- a/src/widgets/sidebar/Sidebar.tsx
+++ b/src/widgets/sidebar/Sidebar.tsx
@@ -188,7 +188,7 @@ export function Sidebar({
           ref={helpRef}
         >
           {helpOpen ? (
-            <div
+              <div
               className={cn(
                 "absolute bottom-14 z-30 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl shadow-slate-950/10 dark:border-pink-400/20 dark:bg-[#100b18] dark:shadow-black/40",
                 effectiveCollapsed ? "left-2 w-64" : "left-2.5 w-64",
@@ -268,15 +268,15 @@ export function Sidebar({
               effectiveCollapsed ? "flex-col" : "items-center justify-between",
             )}
           >
-            <NavLink
+              <NavLink
               aria-label="Settings"
               className={({ isActive }) =>
                 cn("flex h-9 w-9 items-center justify-center transition", {
-                  "text-slate-400 hover:text-slate-950 focus-visible:outline-none":
+                  "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     effectiveCollapsed && !isActive,
-                  "text-slate-700 hover:text-slate-950 focus-visible:outline-none":
+                  "rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     effectiveCollapsed && isActive,
-                  "rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
+                  "rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
                     !effectiveCollapsed && isActive,
                   "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     !effectiveCollapsed && !isActive,
@@ -292,11 +292,11 @@ export function Sidebar({
               className={cn(
                 "flex h-9 w-9 shrink-0 items-center justify-center transition",
                 {
-                  "text-slate-400 hover:text-slate-950 focus-visible:outline-none":
+                  "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     effectiveCollapsed && !helpOpen,
-                  "text-slate-700 hover:text-slate-950 focus-visible:outline-none":
+                  "rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     effectiveCollapsed && helpOpen,
-                  "rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
+                  "rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
                     !effectiveCollapsed && helpOpen,
                   "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
                     !effectiveCollapsed && !helpOpen,
@@ -312,7 +312,7 @@ export function Sidebar({
               className={cn(
                 "hidden h-9 w-9 shrink-0 items-center justify-center transition lg:flex",
                 effectiveCollapsed
-                  ? "text-slate-400 hover:text-slate-950 focus-visible:outline-none"
+                  ? "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200"
                   : "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200",
               )}
               onClick={toggleSidebar}
@@ -343,11 +343,11 @@ function HelpMenuItem({
   to,
 }: HelpMenuItemProps): JSX.Element {
   const className =
-    "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-sky-50 hover:text-sky-700 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20";
+    "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 [&.active]:bg-sky-50 [&.active]:text-sky-700 [&.active]:ring-1 [&.active]:ring-inset [&.active]:ring-sky-200 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20";
 
   if (to) {
     return (
-      <NavLink className={className} onClick={onSelect} to={to}>
+      <NavLink className={className} end onClick={onSelect} to={to}>
         <Icon aria-hidden="true" className="h-4 w-4 shrink-0" />
         <span>{label}</span>
       </NavLink>
diff --git a/src/widgets/sidebar/SidebarToolItem.tsx b/src/widgets/sidebar/SidebarToolItem.tsx
index 9e8dcdd..e80b1e3 100644
--- a/src/widgets/sidebar/SidebarToolItem.tsx
+++ b/src/widgets/sidebar/SidebarToolItem.tsx
@@ -18,7 +18,7 @@ export function SidebarToolItem({
     <NavLink
       className={({ isActive }) =>
         cn("group flex items-center text-[13px] font-medium transition", {
-          "h-8 justify-center text-slate-400 hover:text-slate-950 focus-visible:outline-none":
+          "h-8 justify-center text-slate-500 hover:text-slate-950 focus-visible:outline-none":
             collapsed && !isActive,
           "h-8 justify-center text-slate-700 hover:text-slate-950 focus-visible:outline-none":
             collapsed && isActive,