diff --git a/attached_assets/folx_MT_poz_b_1756991830394.png b/attached_assets/folx_MT_poz_b_1756991830394.png
new file mode 100644
index 0000000..c949dcf
Binary files /dev/null and b/attached_assets/folx_MT_poz_b_1756991830394.png differ
diff --git a/attached_assets/image_1756991665336.png b/attached_assets/image_1756991665336.png
new file mode 100644
index 0000000..62fbc9a
Binary files /dev/null and b/attached_assets/image_1756991665336.png differ
diff --git a/client/src/index.css b/client/src/index.css
index 6c72652..510c097 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -5,56 +5,56 @@
 @tailwind utilities;
 
 :root {
-  --background: hsl(222, 84%, 4.9%);
-  --foreground: hsl(210, 40%, 98%);
-  --muted: hsl(217, 32.6%, 17.5%);
-  --muted-foreground: hsl(215, 20.2%, 65.1%);
-  --popover: hsl(222, 84%, 4.9%);
-  --popover-foreground: hsl(210, 40%, 98%);
-  --card: hsl(222, 84%, 4.9%);
-  --card-foreground: hsl(210, 40%, 98%);
-  --border: hsl(217, 32.6%, 17.5%);
-  --input: hsl(217, 32.6%, 17.5%);
-  --primary: hsl(217, 91%, 60%);
-  --primary-foreground: hsl(222, 47%, 11%);
-  --secondary: hsl(217, 32.6%, 17.5%);
-  --secondary-foreground: hsl(210, 40%, 98%);
-  --accent: hsl(217, 32.6%, 17.5%);
-  --accent-foreground: hsl(210, 40%, 98%);
+  --background: hsl(220, 13%, 9%);
+  --foreground: hsl(210, 40%, 95%);
+  --muted: hsl(220, 13%, 15%);
+  --muted-foreground: hsl(215, 20%, 55%);
+  --popover: hsl(220, 13%, 12%);
+  --popover-foreground: hsl(210, 40%, 95%);
+  --card: hsl(220, 13%, 12%);
+  --card-foreground: hsl(210, 40%, 95%);
+  --border: hsl(220, 13%, 20%);
+  --input: hsl(220, 13%, 15%);
+  --primary: hsl(340, 75%, 55%);
+  --primary-foreground: hsl(210, 40%, 95%);
+  --secondary: hsl(220, 13%, 15%);
+  --secondary-foreground: hsl(210, 40%, 85%);
+  --accent: hsl(340, 75%, 55%);
+  --accent-foreground: hsl(210, 40%, 95%);
   --destructive: hsl(0, 62.8%, 30.6%);
   --destructive-foreground: hsl(210, 40%, 98%);
-  --ring: hsl(217, 91%, 60%);
+  --ring: hsl(340, 75%, 55%);
   --radius: 0.75rem;
   
-  /* Custom video app colors - Modern gradient theme */
-  --bunny-dark: hsl(250, 50%, 15%);
-  --bunny-gray: hsl(240, 30%, 25%);
-  --bunny-blue: hsl(200, 100%, 60%);
-  --bunny-purple: hsl(280, 80%, 60%);
-  --bunny-light: hsl(210, 40%, 98%);
-  --bunny-muted: hsl(215, 20.2%, 65.1%);
+  /* Custom video app colors - Temno sivo-črno z roza poudarki */
+  --bunny-dark: hsl(220, 13%, 9%);
+  --bunny-gray: hsl(220, 13%, 15%);
+  --bunny-blue: hsl(340, 75%, 55%);
+  --bunny-purple: hsl(350, 70%, 50%);
+  --bunny-light: hsl(210, 40%, 95%);
+  --bunny-muted: hsl(215, 20%, 55%);
 }
 
 .dark {
-  --background: hsl(222, 84%, 4.9%);
-  --foreground: hsl(210, 40%, 98%);
-  --muted: hsl(217, 32.6%, 17.5%);
-  --muted-foreground: hsl(215, 20.2%, 65.1%);
-  --popover: hsl(222, 84%, 4.9%);
-  --popover-foreground: hsl(210, 40%, 98%);
-  --card: hsl(222, 84%, 4.9%);
-  --card-foreground: hsl(210, 40%, 98%);
-  --border: hsl(217, 32.6%, 17.5%);
-  --input: hsl(217, 32.6%, 17.5%);
-  --primary: hsl(217, 91%, 60%);
-  --primary-foreground: hsl(222, 47%, 11%);
-  --secondary: hsl(217, 32.6%, 17.5%);
-  --secondary-foreground: hsl(210, 40%, 98%);
-  --accent: hsl(217, 32.6%, 17.5%);
-  --accent-foreground: hsl(210, 40%, 98%);
+  --background: hsl(220, 13%, 9%);
+  --foreground: hsl(210, 40%, 95%);
+  --muted: hsl(220, 13%, 15%);
+  --muted-foreground: hsl(215, 20%, 55%);
+  --popover: hsl(220, 13%, 12%);
+  --popover-foreground: hsl(210, 40%, 95%);
+  --card: hsl(220, 13%, 12%);
+  --card-foreground: hsl(210, 40%, 95%);
+  --border: hsl(220, 13%, 20%);
+  --input: hsl(220, 13%, 15%);
+  --primary: hsl(340, 75%, 55%);
+  --primary-foreground: hsl(210, 40%, 95%);
+  --secondary: hsl(220, 13%, 15%);
+  --secondary-foreground: hsl(210, 40%, 85%);
+  --accent: hsl(340, 75%, 55%);
+  --accent-foreground: hsl(210, 40%, 95%);
   --destructive: hsl(0, 62.8%, 30.6%);
   --destructive-foreground: hsl(210, 40%, 98%);
-  --ring: hsl(217, 91%, 60%);
+  --ring: hsl(340, 75%, 55%);
 }
 
 @layer base {
@@ -64,7 +64,7 @@
 
   body {
     @apply font-sans antialiased bg-background text-foreground;
-    background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
+    background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 50%, hsl(220, 13%, 15%) 100%);
     color: hsl(210, 40%, 98%);
     min-height: 100vh;
     /* iOS PWA optimizacije */
@@ -77,33 +77,33 @@
 
 @layer utilities {
   .bunny-dark {
-    background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
+    background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 100%);
   }
   
   .bunny-gray {
-    background: linear-gradient(135deg, hsl(240, 30%, 25%) 0%, hsl(235, 25%, 30%) 100%);
+    background: linear-gradient(135deg, hsl(220, 13%, 12%) 0%, hsl(220, 13%, 15%) 100%);
   }
 
   .gradient-primary {
-    background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
+    background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
   }
 
   .gradient-card {
-    background: linear-gradient(135deg, rgba(75, 85, 175, 0.1) 0%, rgba(128, 90, 213, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(30, 30, 35, 0.8) 0%, rgba(40, 40, 45, 0.8) 100%);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(220, 55, 95, 0.2);
   }
 
   .bunny-blue {
-    background-color: hsl(217, 91%, 60%);
+    background-color: hsl(340, 75%, 55%);
   }
   
   .bunny-light {
-    color: hsl(210, 40%, 98%);
+    color: hsl(210, 40%, 95%);
   }
   
   .bunny-muted {
-    color: hsl(215, 20.2%, 65.1%);
+    color: hsl(215, 20%, 55%);
   }
   
   .line-clamp-2 {
@@ -234,25 +234,25 @@ input[data-testid*="search"]::placeholder {
 
 .video-card {
   transition: all 0.3s ease;
-  background: linear-gradient(135deg, rgba(75, 85, 175, 0.05) 0%, rgba(128, 90, 213, 0.05) 100%);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: linear-gradient(135deg, rgba(30, 30, 35, 0.6) 0%, rgba(40, 40, 45, 0.6) 100%);
+  border: 1px solid rgba(220, 55, 95, 0.15);
   border-radius: 12px;
 }
 
 /* Modern button styles */
 .gradient-button {
-  background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
+  background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
   border: none;
   color: white;
   font-weight: 600;
   border-radius: 8px;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 4px 15px rgba(220, 55, 95, 0.4);
 }
 
 .gradient-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+  box-shadow: 0 8px 25px rgba(220, 55, 95, 0.5);
 }
 
 /* Geometric triangle decorations */
@@ -262,7 +262,7 @@ input[data-testid*="search"]::placeholder {
   height: 0;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
-  border-bottom: 50px solid rgba(59, 130, 246, 0.08);
+  border-bottom: 50px solid rgba(220, 55, 95, 0.08);
   transform: rotate(15deg);
   z-index: 1;
 }
@@ -273,7 +273,7 @@ input[data-testid*="search"]::placeholder {
   height: 0;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
-  border-bottom: 35px solid rgba(147, 51, 234, 0.08);
+  border-bottom: 35px solid rgba(220, 55, 95, 0.12);
   transform: rotate(-25deg);
   z-index: 1;
 }
@@ -284,7 +284,7 @@ input[data-testid*="search"]::placeholder {
   height: 0;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
-  border-bottom: 40px solid rgba(6, 182, 212, 0.08);
+  border-bottom: 40px solid rgba(220, 55, 95, 0.10);
   transform: rotate(45deg);
   z-index: 1;
 }