diff --git a/attached_assets/image_1754560740858.png b/attached_assets/image_1754560740858.png
new file mode 100644
index 0000000..aa680b9
Binary files /dev/null and b/attached_assets/image_1754560740858.png differ
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 3863050..5298bf9 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { X, Share2, Edit3 } from "lucide-react";
+import { X, Share2, Edit3, Play, Pause, Volume2, VolumeX, Maximize } from "lucide-react";
 import { type Video } from "@shared/schema";
 import { Button } from "@/components/ui/button";
 import { apiRequest } from "@/lib/queryClient";
@@ -417,6 +417,61 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
             Your browser does not support the video tag.
           </video>
           
+          {/* Central Play/Pause Button */}
+          {!isPlaying && showControls && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Button
+                onClick={togglePlay}
+                variant="ghost"
+                size="icon"
+                className="w-20 h-20 rounded-full bg-black/50 hover:bg-black/70 text-white border-2 border-white/20 hover:border-white/40 transition-all duration-200"
+                data-testid="button-play-center"
+              >
+                <Play className="w-8 h-8 ml-1" />
+              </Button>
+            </div>
+          )}
+
+          {/* Bottom Control Bar */}
+          {showControls && (
+            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/60 to-transparent p-4">
+              <div className="flex items-center gap-4">
+                {/* Play/Pause Button */}
+                <Button
+                  onClick={togglePlay}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors"
+                  data-testid="button-play-pause"
+                >
+                  {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+                </Button>
+
+                {/* Volume Control */}
+                <Button
+                  onClick={toggleMute}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors"
+                  data-testid="button-volume"
+                >
+                  {isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+                </Button>
+
+                {/* Fullscreen Button */}
+                <Button
+                  onClick={toggleFullscreen}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors ml-auto"
+                  data-testid="button-fullscreen"
+                >
+                  <Maximize className="w-5 h-5" />
+                </Button>
+              </div>
+            </div>
+          )}
+
           {/* Quality Indicator */}
           {hlsRef.current && (
             <QualityIndicator 
@@ -525,7 +580,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
           </div>
           </div>
 
-          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
+          <div className="absolute bottom-16 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 pointer-events-none">
             <h3 
               className="text-xl font-semibold mb-2 text-white"
               data-testid="text-modal-title"