diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 8c1a567..b93d165 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -101,62 +101,27 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
         {category.title}
       </h2>
       
-      <div className="relative">
-        {/* Left scroll button */}
-        <button
-          onClick={() => scroll('left')}
-          onMouseEnter={() => startAutoScroll('left')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
-        >
-          <ChevronLeft className="w-6 h-6 text-white" />
-        </button>
-
-        {/* Right scroll button */}
-        <button
-          onClick={() => scroll('right')}
-          onMouseEnter={() => startAutoScroll('right')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
-        >
-          <ChevronRight className="w-6 h-6 text-white" />
-        </button>
-
-        {/* Scroll container */}
-        <div 
-          ref={scrollContainerRef}
-          className="overflow-x-auto pb-8"
-          style={{ 
-            scrollbarWidth: 'none', 
-            msOverflowStyle: 'none'
-          }}
-        >
-          <div className="flex space-x-4 w-max">
-            {/* Create many copies for infinite feel */}
-            {Array.from({ length: 20 }).map((_, copyIndex) => 
-              category.videos.map((video, videoIndex) => (
-                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-48 md:w-80 relative individual-video-hover">
-                  {/* Top 10 Number overlay for first category */}
-                  {category.title.includes("Top 10") && (
-                    <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"
-                         style={{ 
-                           textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                           WebkitTextStroke: '2px rgba(0,0,0,0.8)',
-                           transform: 'none'
-                         }}>
-                      {videoIndex + 1}
-                    </div>
-                  )}
-                  <VideoCard
-                    video={video}
-                    onClick={onVideoClick}
-                    className="w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
-                  />
-                </div>
-              ))
-            ).flat()}
+      {/* Container z flex wrap */}
+      <div className="container flex flex-wrap justify-center gap-2.5 p-2.5 md:flex-row flex-col items-center">
+        {category.videos.map((video, videoIndex) => (
+          <div key={video.id} className="relative">
+            {/* Top 10 Number overlay for first category */}
+            {category.title.includes("Top 10") && (
+              <div className="absolute top-1 left-1 z-30 text-white font-black text-xl md:text-2xl drop-shadow-2xl pointer-events-none"
+                   style={{ 
+                     textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                     WebkitTextStroke: '1px rgba(0,0,0,0.8)',
+                   }}>
+                {videoIndex + 1}
+              </div>
+            )}
+            <VideoCard
+              video={video}
+              onClick={onVideoClick}
+              className="poster w-[150px] md:w-[150px] sm:w-[120px] h-auto hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
+            />
           </div>
-        </div>
+        ))}
       </div>
     </div>
   );
diff --git a/client/src/index.css b/client/src/index.css
index a689e01..44ad051 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -401,6 +401,30 @@ input[data-testid*="search"]::placeholder {
   font-display: swap;
 }
 
+/* Container flex wrap styles */
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px; /* Razmik med slikami */
+  padding: 10px;
+}
+
+.poster {
+  width: 150px; /* Velikost slike */
+  height: auto; /* Ohranja razmerje */
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column; /* Slike ena pod drugo */
+    align-items: center;
+  }
+  .poster {
+    width: 120px; /* Manjša velikost za mobilne naprave */
+  }
+}
+
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;