diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index f244b47..a3b17bf 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -14,6 +14,8 @@ interface BunnyVideoModalProps {
   isOpen: boolean;
   onClose: () => void;
   onEdit?: () => void;
+  videos?: Video[];
+  onVideoChange?: (video: Video) => void;
 }
 
 function formatDuration(seconds: number): string {
@@ -49,8 +51,11 @@ function formatDate(date: Date | string): string {
   return `Pred ${Math.floor(diffDays / 30)} mesec${Math.floor(diffDays / 30) > 1 ? 'i' : 'em'}`;
 }
 
-export default function BunnyVideoModal({ video, isOpen, onClose, onEdit }: BunnyVideoModalProps) {
+export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [dragOffset, setDragOffset] = useState(0);
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -137,6 +142,100 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit }: Bunn
     setShowShareMenu(false);
   };
 
+  // Navigation functions
+  const getCurrentVideoIndex = () => {
+    if (!video || !videos.length) return -1;
+    return videos.findIndex(v => v.id === video.id);
+  };
+
+  const navigateToVideo = (direction: 'next' | 'prev') => {
+    const currentIndex = getCurrentVideoIndex();
+    if (currentIndex === -1) return;
+    
+    let newIndex;
+    if (direction === 'next') {
+      newIndex = currentIndex + 1 >= videos.length ? 0 : currentIndex + 1;
+    } else {
+      newIndex = currentIndex - 1 < 0 ? videos.length - 1 : currentIndex - 1;
+    }
+    
+    const newVideo = videos[newIndex];
+    if (newVideo && onVideoChange) {
+      onVideoChange(newVideo);
+    }
+  };
+
+  // Touch and mouse drag handlers
+  const handleDragStart = (clientX: number, clientY: number) => {
+    setIsDragging(true);
+    setDragStart({ x: clientX, y: clientY });
+    setDragOffset(0);
+  };
+
+  const handleDragMove = (clientX: number, clientY: number) => {
+    if (!isDragging) return;
+    
+    const deltaX = clientX - dragStart.x;
+    const deltaY = Math.abs(clientY - dragStart.y);
+    
+    // Only allow horizontal drag if it's more horizontal than vertical
+    if (deltaY < Math.abs(deltaX)) {
+      setDragOffset(deltaX);
+    }
+  };
+
+  const handleDragEnd = () => {
+    if (!isDragging) return;
+    
+    const threshold = 100; // minimum drag distance to trigger navigation
+    
+    if (Math.abs(dragOffset) > threshold && videos.length > 1) {
+      if (dragOffset > 0) {
+        navigateToVideo('prev'); // drag right = previous video
+      } else {
+        navigateToVideo('next'); // drag left = next video
+      }
+    }
+    
+    setIsDragging(false);
+    setDragOffset(0);
+  };
+
+  // Mouse events
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) return; // only on video area
+    handleDragStart(e.clientX, e.clientY);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    handleDragMove(e.clientX, e.clientY);
+  };
+
+  const handleMouseUp = () => {
+    handleDragEnd();
+  };
+
+  // Touch events
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (e.touches.length !== 1) return;
+    const touch = e.touches[0];
+    handleDragStart(touch.clientX, touch.clientY);
+    e.preventDefault();
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (e.touches.length !== 1) return;
+    if (!isDragging) return;
+    const touch = e.touches[0];
+    handleDragMove(touch.clientX, touch.clientY);
+    e.preventDefault();
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    handleDragEnd();
+    e.preventDefault();
+  };
+
   if (!isOpen || !video) return null;
 
   return (
@@ -231,7 +330,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit }: Bunn
         <div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
           {/* Main video player */}
           <div className="flex-1">
-            <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden">
+            <div 
+              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden cursor-grab active:cursor-grabbing select-none"
+              style={{ transform: `translateX(${dragOffset}px)`, transition: isDragging ? 'none' : 'transform 0.3s ease-out' }}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+            >
               {video.videoUrlIframe ? (
                 <iframe
                   src={video.videoUrlIframe}
@@ -248,6 +357,25 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit }: Bunn
                 </div>
               )}
             </div>
+            
+            {/* Navigation indicators */}
+            {videos.length > 1 && (
+              <div className="absolute top-1/2 left-4 right-4 flex justify-between items-center pointer-events-none z-10">
+                <div className={`bg-black bg-opacity-50 rounded-full p-2 text-white transition-opacity ${dragOffset > 50 ? 'opacity-100' : 'opacity-30'}`}>
+                  <span className="text-sm">← Prejšnji</span>
+                </div>
+                <div className={`bg-black bg-opacity-50 rounded-full p-2 text-white transition-opacity ${dragOffset < -50 ? 'opacity-100' : 'opacity-30'}`}>
+                  <span className="text-sm">Naslednji →</span>
+                </div>
+              </div>
+            )}
+            
+            {/* Video counter */}
+            {videos.length > 1 && (
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 rounded-full px-3 py-1 text-white text-sm pointer-events-none">
+                {getCurrentVideoIndex() + 1} od {videos.length}
+              </div>
+            )}
           </div>
 
           {/* Video info sidebar */}
diff --git a/client/src/components/video-grid.tsx b/client/src/components/video-grid.tsx
index 824f4b7..5db4538 100644
--- a/client/src/components/video-grid.tsx
+++ b/client/src/components/video-grid.tsx
@@ -27,6 +27,10 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
     setSelectedVideo(null);
   };
 
+  const handleVideoChange = (video: Video) => {
+    setSelectedVideo(video);
+  };
+
   if (isLoading && videos.length === 0) {
     return (
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" data-testid="grid-loading">
@@ -99,6 +103,8 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
         video={selectedVideo}
         isOpen={isModalOpen}
         onClose={handleCloseModal}
+        videos={videos}
+        onVideoChange={handleVideoChange}
       />
     </>
   );