diff --git a/app/app/globals.css b/app/app/globals.css
index aac99b8..ddb5519 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -22,13 +22,15 @@
   --color-input: hsl(240 5.9% 90%);
   --color-ring: hsl(346.8 77.2% 49.8%);
   --radius: 0.65rem;
+  --color-menu: #eee;
 }
 
 @layer base {
   .dark {
-    --color-background: hsl(20 14.3% 4.1%);
-    --color-foreground: hsl(0 0% 95%);
-    --color-popover: hsl(0 0% 9%);
+    --color-menu: #1b1b1f;
+    --color-background: #16161a;
+    --color-foreground: #94a1b2;
+    --color-popover: #16161ad6;
     --color-popover-foreground: hsl(0 0% 95%);
     --color-card: hsl(24 9.8% 10%);
     --color-card-foreground: hsl(0 0% 95%);
diff --git a/app/app/page.tsx b/app/app/page.tsx
index 24422d4..574bac5 100644
--- a/app/app/page.tsx
+++ b/app/app/page.tsx
@@ -106,9 +106,9 @@ export default function Home() {
         {selectedItem ? (
           <KeyDetailsContent selectedItem={selectedItem} view={view} />
         ) : (
-          <div className="flex flex-col items-center justify-center gap-2 h-screen opacity-70">
+          <div className="flex flex-col items-center justify-center gap-2 h-screen opacity-50">
             <MousePointerClickIcon size={130} className="opacity-50" />
-            <div>Select a key to view details</div>
+            <div className="text-sm">Select a key to view details</div>
           </div>
         )}
         <Cluster
diff --git a/app/components/key/list.tsx b/app/components/key/list.tsx
index 54b9c88..14c4ad1 100644
--- a/app/components/key/list.tsx
+++ b/app/components/key/list.tsx
@@ -67,7 +67,9 @@ export function KeyList({
                     onClick={() => setSelectedItem(item)}
                     className={cn(
                       "p-2 rounded hover:bg-primary/30 cursor-pointer text-sm font-mono w-[280px] rounded-md",
-                      selectedItem?.key === item.key ? "bg-primary" : ""
+                      selectedItem?.key === item.key
+                        ? "bg-primary text-white"
+                        : ""
                     )}
                   >
                     <div className="flex items-center gap-2">
@@ -83,6 +85,7 @@ export function KeyList({
                   <Button
                     variant="secondary"
                     className="w-full"
+                    size="lg"
                     onClick={() => {
                       const last = keys[keys.length - 1];
                       if (last) {
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 2bc4490..f152150 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -36,7 +36,7 @@ export default function Sidebar({
   };
   return (
     <>
-      <div className="p-4 border-r border-border flex flex-col justify-between items-center">
+      <div className="p-4 flex flex-col justify-between items-center bg-menu">
         <a href="">
           <Image src={TiKV.src} alt="Logo" width={32} height={32} />
         </a>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index a52d60e..563a5de 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        menu: "var(--color-menu)",
         card: {
           DEFAULT: "var(--card)",
           foreground: "var(--card-foreground)",