diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 8c4f8ce..a000dee 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -40,12 +40,12 @@ export default function SearchHeader({
   };
 
   return (
-    <div className="bg-bunny-gray border-b border-gray-700 sticky top-0 z-50">
+    <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-20">
           <div className="flex items-center space-x-4">
             <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-              <div className="w-9 h-9 bg-bunny-blue rounded-lg flex items-center justify-center">
+              <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
                 <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
               </div>
               <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 9df0b88..b59537d 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -44,11 +44,11 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className="transition-transform duration-200 hover:scale-[1.02]"
+      className="video-card transition-transform duration-200 hover:scale-[1.02] p-3"
     >
       {/* Simple thumbnail with fallback - no HLS loading until needed */}
       <div 
-        className="relative bg-bunny-gray rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
+        className="relative gradient-card rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
         onClick={() => window.location.href = `/video/${video.id}`}
       >
         <img
@@ -83,8 +83,8 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
         
         {/* Play button overlay */}
         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
-          <div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
-            <Play className="text-white ml-1 text-xl" />
+          <div className="gradient-primary rounded-full w-16 h-16 flex items-center justify-center group-hover:scale-110 transition-all duration-300 shadow-lg">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
           </div>
         </div>
       </div>
diff --git a/client/src/index.css b/client/src/index.css
index bafa09d..4e3f3a2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -24,10 +24,11 @@
   --ring: hsl(217, 91%, 60%);
   --radius: 0.75rem;
   
-  /* Custom video app colors */
-  --bunny-dark: hsl(222, 84%, 4.9%);
-  --bunny-gray: hsl(217, 32.6%, 17.5%);
-  --bunny-blue: hsl(217, 91%, 60%);
+  /* 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%);
 }
@@ -61,20 +62,31 @@
 
   body {
     @apply font-sans antialiased bg-background text-foreground;
-    background-color: hsl(222, 84%, 4.9%);
+    background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
     color: hsl(210, 40%, 98%);
+    min-height: 100vh;
   }
 }
 
 @layer utilities {
   .bunny-dark {
-    background-color: hsl(222, 84%, 4.9%);
+    background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
   }
   
   .bunny-gray {
-    background-color: hsl(217, 32.6%, 17.5%);
+    background: linear-gradient(135deg, hsl(240, 30%, 25%) 0%, hsl(235, 25%, 30%) 100%);
   }
-  
+
+  .gradient-primary {
+    background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
+  }
+
+  .gradient-card {
+    background: linear-gradient(135deg, rgba(75, 85, 175, 0.1) 0%, rgba(128, 90, 213, 0.1) 100%);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
   .bunny-blue {
     background-color: hsl(217, 91%, 60%);
   }
@@ -143,7 +155,7 @@
   }
 }
 
-/* Zagotovi vidnost besedila v input poljih - super visoka prioriteta */
+/* Video edit modal styles */
 .video-edit-modal input,
 .video-edit-modal textarea,
 .video-edit-modal select,
@@ -154,7 +166,6 @@ textarea[data-testid*="input-video"] {
   border-color: #6b7280 !important;
 }
 
-/* Zagotovi vidnost placeholder besedila */
 .video-edit-modal input::placeholder,
 .video-edit-modal textarea::placeholder,
 input[data-testid*="input-video"]::placeholder,
@@ -163,19 +174,16 @@ textarea[data-testid*="input-video"]::placeholder {
   opacity: 1 !important;
 }
 
-/* Modal ozadje - temno sivo */
 .video-edit-modal {
   background-color: #1f2937 !important;
 }
 
-/* Label besedilo - belo */
 .video-edit-modal label,
 .video-edit-modal .text-gray-700,
 .video-edit-modal .dark\:text-gray-300 {
   color: #ffffff !important;
 }
 
-/* Dropdown/Select elementi - siva shema */
 .video-edit-modal select,
 select[data-testid*="select"],
 .video-edit-modal [role="combobox"],
@@ -184,3 +192,48 @@ select[data-testid*="select"],
   color: #ffffff !important;
   border-color: #6b7280 !important;
 }
+
+/* Search input styles */
+input[type="search"],
+input[placeholder*="Search"],
+input[data-testid*="search"] {
+  background-color: rgba(55, 65, 81, 0.8) !important;
+  color: #ffffff !important;
+  border-color: #6b7280 !important;
+}
+
+input[type="search"]::placeholder,
+input[placeholder*="Search"]::placeholder,
+input[data-testid*="search"]::placeholder {
+  color: #d1d5db !important;
+  opacity: 1 !important;
+}
+
+/* Video card hover effects with gradients */
+.video-card:hover {
+  transform: translateY(-2px);
+  transition: all 0.3s ease;
+}
+
+.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);
+  border-radius: 12px;
+}
+
+/* Modern button styles */
+.gradient-button {
+  background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 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);
+}
+
+.gradient-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+}
\ No newline at end of file
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index a469e62..7eaacb5 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -72,7 +72,7 @@ export default function Home() {
   }, [searchQuery, offset, refetch]);
 
   return (
-    <div className="min-h-screen bg-bunny-dark">
+    <div className="min-h-screen bunny-dark">
       <SearchHeader
         onSearch={handleSearch}
         onViewChange={setViewMode}
@@ -94,12 +94,12 @@ export default function Home() {
 
 
       {/* Footer */}
-      <footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">
+      <footer className="bunny-gray border-t border-white/20 mt-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             <div className="col-span-1 md:col-span-2">
               <div className="flex items-center space-x-2 mb-4">
-                <div className="w-8 h-8 bg-bunny-blue rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
                 </div>
                 <h3 className="text-xl font-bold text-bunny-light">go4.video</h3>