diff --git a/src/components/sections/VideoSection.tsx b/src/components/sections/VideoSection.tsx
index 8c51f93..bfdcac9 100644
--- a/src/components/sections/VideoSection.tsx
+++ b/src/components/sections/VideoSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 /* eslint-disable @next/next/no-img-element */
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import type { Media } from '@/types/globals'
 
 const DEFAULT_MP4 = '/videos/shumiland-reels.mp4'
@@ -27,9 +27,18 @@ interface VideoSectionProps {
 
 export function VideoSection({ poster, src }: VideoSectionProps) {
   const [ytPlaying, setYtPlaying] = useState(false)
+  const [muted, setMuted] = useState(true)
+  const videoRef = useRef<HTMLVideoElement>(null)
   const posterUrl = getMediaUrl(poster) ?? undefined
   const youtubeEmbed = src ? getYouTubeEmbedUrl(src) : null
 
+  function toggleMute() {
+    const video = videoRef.current
+    if (!video) return
+    video.muted = !video.muted
+    setMuted(video.muted)
+  }
+
   // If CMS src is a YouTube URL → use click-to-play embed
   if (youtubeEmbed) {
     return (
@@ -69,19 +78,38 @@ export function VideoSection({ poster, src }: VideoSectionProps) {
   return (
     <section className="bg-[#396817] py-10 lg:py-16">
       <div className="mx-auto max-w-[1204px] px-8">
-        <video
-          className="w-full rounded-[20px] object-cover"
-          style={{ display: 'block', maxHeight: '80vh' }}
-          autoPlay
-          muted
-          loop
-          playsInline
-          preload="metadata"
-          poster={posterUrl}
-        >
-          <source src={DEFAULT_WEBM} type="video/webm" />
-          <source src={DEFAULT_MP4} type="video/mp4" />
-        </video>
+        <div className="relative">
+          <video
+            ref={videoRef}
+            className="w-full rounded-[20px] object-cover"
+            style={{ display: 'block', maxHeight: '80vh' }}
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            poster={posterUrl}
+          >
+            <source src={DEFAULT_WEBM} type="video/webm" />
+            <source src={DEFAULT_MP4} type="video/mp4" />
+          </video>
+          <button
+            onClick={toggleMute}
+            aria-label={muted ? 'Увімкнути звук' : 'Вимкнути звук'}
+            className="absolute right-4 bottom-4 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-colors hover:bg-black/70"
+          >
+            {muted ? (
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+                <path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM17.78 9.22a.75.75 0 1 0-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 1 0 1.06-1.06L20.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-1.72 1.72-1.72-1.72Z" />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+                <path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" />
+                <path d="M15.932 7.757a.75.75 0 0 1 1.061 0 6 6 0 0 1 0 8.486.75.75 0 0 1-1.06-1.061 4.5 4.5 0 0 0 0-6.364.75.75 0 0 1 0-1.06Z" />
+              </svg>
+            )}
+          </button>
+        </div>
       </div>
     </section>
   )