diff --git a/src/components/launch/SourceSelector.module.css b/src/components/launch/SourceSelector.module.css
index 788f672..e1aabf1 100644
--- a/src/components/launch/SourceSelector.module.css
+++ b/src/components/launch/SourceSelector.module.css
@@ -17,9 +17,9 @@
 }
 
 .selected {
-  border: 2px solid #8b5cf6;
+  border: 2px solid #34B27B;
   background: linear-gradient(120deg, rgba(91,33,182,0.18) 0%, rgba(38,38,48,0.98) 100%);
-  box-shadow: 0 0 0 2px #8b5cf633;
+  box-shadow: 0 0 0 2px #34B27B33;
 }
 
 .icon {
diff --git a/src/components/launch/SourceSelector.tsx b/src/components/launch/SourceSelector.tsx
index 39bcd64..d319b64 100644
--- a/src/components/launch/SourceSelector.tsx
+++ b/src/components/launch/SourceSelector.tsx
@@ -72,8 +72,8 @@ export function SourceSelector() {
       <div className="flex-1 flex flex-col w-full max-w-xl" style={{ padding: 0 }}>
         <Tabs defaultValue="screens">
           <TabsList className="grid grid-cols-2 mb-3 bg-zinc-900/40 rounded-full">
-            <TabsTrigger value="screens" className="data-[state=active]:bg-violet-700 data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
-            <TabsTrigger value="windows" className="data-[state=active]:bg-violet-700 data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
+            <TabsTrigger value="screens" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
+            <TabsTrigger value="windows" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
           </TabsList>
             <div className="h-60 flex flex-col justify-stretch">
             <TabsContent value="screens" className="h-full">
@@ -94,7 +94,7 @@ export function SourceSelector() {
                         />
                         {selectedSource?.id === source.id && (
                           <div className="absolute -top-1 -right-1">
-                            <div className="w-4 h-4 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
+                            <div className="w-4 h-4 bg-[#34B27B] rounded-full flex items-center justify-center shadow-md">
                               <MdCheck className={styles.icon} />
                             </div>
                           </div>
@@ -153,7 +153,7 @@ export function SourceSelector() {
       <div className="border-t border-zinc-800 p-2 w-full max-w-xl">
         <div className="flex justify-center gap-2">
           <Button variant="outline" onClick={() => window.close()} className="px-4 py-1 text-xs bg-zinc-800 border-zinc-700 text-zinc-200 hover:bg-zinc-700">Cancel</Button>
-          <Button onClick={handleShare} disabled={!selectedSource} className="px-4 py-1 text-xs bg-violet-700 text-white hover:bg-violet-800 disabled:opacity-50 disabled:bg-zinc-700">Share</Button>
+          <Button onClick={handleShare} disabled={!selectedSource} className="px-4 py-1 text-xs bg-[#34B27B] text-white hover:bg-[#34B27B]/80 disabled:opacity-50 disabled:bg-zinc-700">Share</Button>
         </div>
       </div>
     </div>
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index f79318f..15859bb 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-[#7c3aed] data-[state=unchecked]:bg-[#23232a]",
+      "data-[state=checked]:bg-[#34B27B] data-[state=unchecked]:bg-[#23232a]",
       className
     )}
     {...props}
diff --git a/src/components/video-editor/PlaybackControls.tsx b/src/components/video-editor/PlaybackControls.tsx
index da8ea67..24370a1 100644
--- a/src/components/video-editor/PlaybackControls.tsx
+++ b/src/components/video-editor/PlaybackControls.tsx
@@ -53,7 +53,7 @@ export default function PlaybackControls({
         step="0.01"
         className="flex-1 h-2 rounded-full transition-all duration-[33ms] custom-playback-range"
         style={{
-          background: `linear-gradient(to right, #7c3aed 0%, #7c3aed ${(currentTime / duration) * 100}%, #23232a ${(currentTime / duration) * 100}%, #23232a 100%)`,
+          background: `linear-gradient(to right, #34B27B 0%, #34B27B ${(currentTime / duration) * 100}%, #23232a ${(currentTime / duration) * 100}%, #23232a 100%)`,
         }}
       />
       <span className="text-xs text-slate-400 font-mono">
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 481aab1..14fcc4d 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -88,8 +88,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                   "duration-150 ease-in-out",
                   zoomEnabled ? "opacity-100" : "opacity-60",
                   isActive
-                    ? "border-[#7c3aed] bg-white text-black shadow-[#7c3aed]/20 scale-105"
-                    : "border-[#23232a] bg-[#23232a] text-slate-200 hover:border-[#7c3aed] hover:scale-105"
+                    ? "border-[#34B27B] bg-white text-black shadow-[#34B27B]/20 scale-105"
+                    : "border-[#23232a] bg-[#23232a] text-slate-200 hover:border-[#34B27B] hover:scale-105"
                 )}
                 style={isActive ? { background: '#fff', color: '#111' } : undefined}
               >
@@ -106,7 +106,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
             onClick={handleDeleteClick}
             variant="destructive"
             size="sm"
-            className="mt-3 w-full gap-2 bg-[#7c3aed] text-white border-none hover:bg-[#a78bfa]"
+            className="mt-3 w-full gap-2 bg-[#34B27B] text-white border-none hover:bg-[#34B27B]/80"
           >
             <Trash2 className="w-4 h-4" />
             Delete Zoom
@@ -135,7 +135,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
         <Button
           onClick={() => setShowCropDropdown(!showCropDropdown)}
           variant="outline"
-          className="w-full gap-2 bg-[#23232a] text-slate-200 border-none"
+          className="w-full gap-2 bg-[#23232a] text-slate-200 border-none hover:border-[#34B27B]"
         >
           <Crop className="w-4 h-4" />
           Crop Video
@@ -148,7 +148,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
             className="fixed inset-0 bg-black/80 backdrop-blur-sm z-40 animate-in fade-in duration-200"
             onClick={() => setShowCropDropdown(false)}
           />
-          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#23232a] rounded-2xl shadow-2xl border border-[#312e81] p-8 w-[90vw] max-w-5xl animate-in zoom-in-95 duration-200">
+          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#23232a] rounded-2xl shadow-2xl border border-[#34B27B] p-8 w-[90vw] max-w-5xl animate-in zoom-in-95 duration-200">
             <div className="flex items-center justify-between mb-6">
               <div>
                 <span className="text-xl font-bold text-slate-200">Crop Video</span>
@@ -158,7 +158,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                 variant="ghost"
                 size="icon"
                 onClick={() => setShowCropDropdown(false)}
-                className="hover:bg-[#312e81] text-slate-200"
+                className="hover:bg-[#34B27B]/20 text-slate-200"
               >
                 <X className="w-5 h-5" />
               </Button>
@@ -194,8 +194,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                 className={cn(
                   "aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all w-16 h-16",
                   selected === path
-                    ? "border-[#7c3aed] ring-1 ring-[#7c3aed] scale-105"
-                    : "border-[#23232a] hover:border-[#7c3aed] hover:scale-105"
+                    ? "border-[#34B27B] ring-1 ring-[#34B27B] scale-105"
+                    : "border-[#23232a] hover:border-[#34B27B] hover:scale-105"
                 )}
                 style={{ backgroundImage: `url(${path})`, backgroundSize: "cover", backgroundPosition: "center" }}
                 aria-label={`Wallpaper ${idx + 1}`}
@@ -226,7 +226,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                 key={g}
                 className={cn(
                   "aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all w-16 h-16",
-                  gradient === g ? "border-[#7c3aed] ring-1 ring-[#7c3aed] scale-105" : "border-[#23232a] hover:border-[#7c3aed] hover:scale-105"
+                  gradient === g ? "border-[#34B27B] ring-1 ring-[#34B27B] scale-105" : "border-[#23232a] hover:border-[#34B27B] hover:scale-105"
                 )}
                 style={{ background: g }}
                 aria-label={`Gradient ${idx + 1}`}
@@ -241,7 +241,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
           <Button
             type="button"
             size="lg"
-            className="w-full py-5 text-lg flex items-center justify-center gap-3 bg-[#7c3aed] text-white rounded-xl shadow-lg hover:bg-[#a78bfa] transition-all"
+            className="w-full py-5 text-lg flex items-center justify-center gap-3 bg-[#34B27B] text-white rounded-xl shadow-lg hover:bg-[#34B27B]/80 transition-all"
           >
             <Download className="w-6 h-6" />
             <span className="text-lg">Export Video</span>
diff --git a/src/components/video-editor/timeline/Item.module.css b/src/components/video-editor/timeline/Item.module.css
index 94a25be..ac79e29 100644
--- a/src/components/video-editor/timeline/Item.module.css
+++ b/src/components/video-editor/timeline/Item.module.css
@@ -1,6 +1,6 @@
 .itemDark {
   background: #23232a;
-  border: 1px solid #312e81;
+  border: 1px solid #34B27B;
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.18);
   color: #e5e7eb;
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index b7b171e..555947e 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -34,7 +34,7 @@ export default function Item({ id, span, rowId, isSelected = false, onSelect }:
             "w-full overflow-hidden flex items-center justify-center transition-all duration-150 cursor-grab active:cursor-grabbing group relative",
             glassStyles.glassPurple
           )}
-          style={{ height: 60 }}
+          style={{ height: 48 }}
           onClick={(event) => {
             event.stopPropagation();
             onSelect?.();
diff --git a/src/components/video-editor/timeline/ItemGlass.module.css b/src/components/video-editor/timeline/ItemGlass.module.css
index a2b2474..e5aa964 100644
--- a/src/components/video-editor/timeline/ItemGlass.module.css
+++ b/src/components/video-editor/timeline/ItemGlass.module.css
@@ -2,9 +2,9 @@
   position: relative;
   border-radius: 12px;
   -corner-smoothing: antialiased;
-  background: #7c3aed;
+  background: #34B27B;
   border: none;
-  box-shadow: 0 2px 12px 0 rgba(88,36,204,0.14) inset, 0 2px 8px 0 rgba(0,0,0,0.10), 0 1px 6px 0 rgba(124,58,237,0.08);
+  box-shadow: 0 2px 12px 0 rgba(52,178,123,0.14) inset, 0 2px 8px 0 rgba(0,0,0,0.10), 0 1px 6px 0 rgba(52,178,123,0.08);
   margin: 0 4px;
   backdrop-filter: blur(2px) saturate(120%);
   -webkit-backdrop-filter: blur(2px) saturate(120%);
@@ -13,7 +13,7 @@
 .zoomEndCap {
   position: absolute;
   top: 0;
-  background: #361e5a;
+  background: #315d4a;
 
     width: 18px;
     height: 100%;
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index d70a0b6..7bf63d9 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -267,8 +267,8 @@ function TimelineAxis({
                   width: '5px',
                   height: '5px',
                   borderRadius: '50%',
-                  backgroundColor: marker.time === currentTimeMs ? '#7c3aed' : '#94a3b8',
-                  boxShadow: marker.time === currentTimeMs ? '0 0 4px #7c3aed55' : 'none',
+                  backgroundColor: marker.time === currentTimeMs ? '#34B27B' : '#94a3b8',
+                  boxShadow: marker.time === currentTimeMs ? '0 0 4px #34B27B55' : 'none',
                   marginRight: '5px',
                   marginTop: '2px',
                   transition: 'background 0.2s, box-shadow 0.2s',
@@ -277,10 +277,10 @@ function TimelineAxis({
               <span
                 style={{
                   fontWeight: marker.time === currentTimeMs ? 700 : 500,
-                  color: marker.time === currentTimeMs ? '#7c3aed' : '#94a3b8',
+                  color: marker.time === currentTimeMs ? '#34B27B' : '#94a3b8',
                   fontSize: '11px',
                   letterSpacing: '-0.5px',
-                  textShadow: marker.time === currentTimeMs ? '0 1px 6px #7c3aed33' : 'none',
+                  textShadow: marker.time === currentTimeMs ? '0 1px 6px #34B27B33' : 'none',
                   marginTop: '2px',
                 }}
                 className="select-none"
@@ -486,12 +486,12 @@ export default function TimelineEditor({
         <div className="flex-1" />
         <div className="flex items-center gap-3 text-[10px] text-slate-400 font-medium">
           <span className="flex items-center gap-1">
-            <kbd className="px-1.5 py-0.5 bg-[#23232a] border border-[#312e81] rounded text-slate-300">Command + Shift + Scroll</kbd>
+            <kbd className="px-1.5 py-0.5 bg-[#23232a]  rounded text-slate-300">Command + Shift + Scroll</kbd>
             <span>Pan</span>
           </span>
           <span className="text-slate-600">•</span>
           <span className="flex items-center gap-1">
-            <kbd className="px-1.5 py-0.5 bg-[#23232a] border border-[#312e81] rounded text-slate-300">Command + Scroll</kbd>
+            <kbd className="px-1.5 py-0.5 bg-[#23232a]  rounded text-slate-300">Command + Scroll</kbd>
             <span>Zoom</span>
           </span>
         </div>
diff --git a/src/index.css b/src/index.css
index 7d72aa4..a452ccb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -98,7 +98,7 @@
     background: #fff;
     transform: scale(1.15);
     box-shadow: 0 3px 10px rgba(255,255,255,0.5);
-    border-color: #7c3aed;
+    border-color: #34B27B;
   }
 
   input[type="range"]::-webkit-slider-thumb:active {
@@ -120,7 +120,7 @@
     background: #fff;
     transform: scale(1.15);
     box-shadow: 0 3px 10px rgba(255,255,255,0.5);
-    border-color: #7c3aed;
+    border-color: #34B27B;
   }
 
   input[type="range"]::-moz-range-thumb:active {