diff --git a/src/components/PrimitivesSidebar.vue b/src/components/PrimitivesSidebar.vue
index 70d9b2d46..5da168f1d 100644
--- a/src/components/PrimitivesSidebar.vue
+++ b/src/components/PrimitivesSidebar.vue
@@ -53,7 +53,7 @@ function toggle() {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: rgba(30, 30, 46, 0.85);
+  background: rgba(34, 34, 34, 0.9);
   border-right: 1px solid var(--color-border);
   overflow: hidden;
 }
@@ -80,7 +80,7 @@ function toggle() {
   top: var(--space-sm);
   left: var(--space-sm);
   right: auto;
-  background: rgba(30, 30, 46, 0.85);
+  background: rgba(34, 34, 34, 0.9);
   border: 1px solid var(--color-border);
 }
 
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index b42f6469d..c8547a5f9 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
+withDefaults(
+  defineProps<{
+    visible?: boolean
+  }>(),
+  {
+    visible: false,
+  }
+)
 </script>
 
 <template>
-  <aside class="properties-panel">
+  <aside v-show="visible" class="properties-panel">
     <div class="content">
       <slot />
     </div>
@@ -16,7 +24,7 @@
   right: var(--space-md);
   bottom: var(--space-md);
   width: var(--sidebar-width);
-  background: rgba(30, 30, 46, 0.85);
+  background: rgba(34, 34, 34, 0.7);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   display: flex;
diff --git a/src/components/Viewport.vue b/src/components/Viewport.vue
index 70b3689b6..1d5728ec7 100644
--- a/src/components/Viewport.vue
+++ b/src/components/Viewport.vue
@@ -41,7 +41,7 @@ function initScene() {
 
   // Create scene
   scene = new THREE.Scene()
-  scene.background = new THREE.Color(0x1a1a2e)
+  scene.background = new THREE.Color(0x1a1a1a)
 
   // Create cameras
   const { clientWidth: width, clientHeight: height } = containerRef.value
diff --git a/src/style.css b/src/style.css
index a6e31ff27..0fff20df9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,20 +1,20 @@
 :root {
   /* Colors - Dark Theme */
-  --color-bg-primary: #1a1a2e;
-  --color-bg-secondary: #1e1e2e;
-  --color-bg-tertiary: #252538;
-  --color-bg-viewport: #1a1a2e;
+  --color-bg-primary: #1a1a1a;
+  --color-bg-secondary: #222222;
+  --color-bg-tertiary: #2a2a2a;
+  --color-bg-viewport: #1a1a1a;
 
-  --color-border: #2a2a3e;
-  --color-border-light: #3a3a4e;
+  --color-border: #333333;
+  --color-border-light: #444444;
 
   --color-text-primary: #e0e0e0;
   --color-text-secondary: #a0a0a0;
-  --color-text-muted: #666;
+  --color-text-muted: #666666;
 
-  --color-accent: #4a90d9;
-  --color-accent-hover: #5aa0e9;
-  --color-accent-active: #3a80c9;
+  --color-accent: #808080;
+  --color-accent-hover: #909090;
+  --color-accent-active: #707070;
 
   --color-success: #4caf50;
   --color-warning: #ff9800;