diff --git a/src/lib/components/SoundControl.svelte b/src/lib/components/SoundControl.svelte
new file mode 100644
index 0000000..7cfad9e
--- /dev/null
+++ b/src/lib/components/SoundControl.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { getItem, setItem } from '$lib/utils/storage';
+  import SpeakerWave from '$lib/components/icons/SpeakerWave.svelte';
+  import SpeakerMute from '$lib/components/icons/SpeakerMute.svelte';
+  import { browser } from '$app/environment';
+  import { SOUND_KEY } from '$lib/constants';
+  import { soundEnabled } from '$lib/store';
+
+  let resolvedSoundPreference: string;
+
+  if (browser) {
+    const userSoundPreference = getItem(SOUND_KEY);
+    if (userSoundPreference) {
+      resolvedSoundPreference = userSoundPreference;
+    } else {
+      resolvedSoundPreference = 'true';
+    }
+    updateStore();
+  }
+
+  function updateStore() {
+    const isSoundEnabled = resolvedSoundPreference === 'true' ? true : false;
+    soundEnabled.set(isSoundEnabled);
+  }
+
+  function toggleSound() {
+    resolvedSoundPreference = resolvedSoundPreference === 'true' ? 'false' : 'true';
+    try {
+      setItem(SOUND_KEY, resolvedSoundPreference);
+      updateStore();
+    } catch (e) {
+      // ignore
+    }
+  }
+</script>
+
+{#if resolvedSoundPreference !== undefined}
+  <button class="btn-toggle-sound" on:click={toggleSound} title="Toggle sound">
+    {#if resolvedSoundPreference === 'true'}
+      <SpeakerWave />
+    {:else}
+      <SpeakerMute />
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .btn-toggle-sound {
+    background: none;
+    border: none;
+    width: 2rem;
+    padding: 0;
+    cursor: pointer;
+    margin-right: 1rem;
+  }
+  .btn-toggle-sound:active {
+    background-color: transparent;
+  }
+</style>
diff --git a/src/lib/components/icons/SpeakerMute.svelte b/src/lib/components/icons/SpeakerMute.svelte
new file mode 100644
index 0000000..9a31b75
--- /dev/null
+++ b/src/lib/components/icons/SpeakerMute.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="var(--text-color)"
+  class="w-6 h-6"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z"
+  />
+</svg>
diff --git a/src/lib/components/icons/SpeakerWave.svelte b/src/lib/components/icons/SpeakerWave.svelte
new file mode 100644
index 0000000..6b7b1e4
--- /dev/null
+++ b/src/lib/components/icons/SpeakerWave.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="var(--text-color)"
+  class="w-6 h-6"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+  />
+</svg>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 821ef28..3a45d2e 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,3 +1,4 @@
 export const THEME_KEY = 'connect4:theme';
+export const SOUND_KEY = 'connect4:sound';
 export const BOARD_VALUE_FOR_PLAYER1 = 1;
 export const BOARD_VALUE_FOR_PLAYER2 = 2;
diff --git a/src/lib/store/index.ts b/src/lib/store/index.ts
new file mode 100644
index 0000000..ae6bfd7
--- /dev/null
+++ b/src/lib/store/index.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const soundEnabled = writable(true);
diff --git a/src/lib/utils/sounds.ts b/src/lib/utils/sounds.ts
index 075faa7..33249cf 100644
--- a/src/lib/utils/sounds.ts
+++ b/src/lib/utils/sounds.ts
@@ -1,3 +1,6 @@
+import { soundEnabled } from '$lib/store';
+import { get } from 'svelte/store';
+
 let coinDropSounds: HTMLAudioElement[];
 let winningSound: HTMLAudioElement;
 
@@ -21,15 +24,17 @@ export function initSounds() {
 }
 
 export function playCoinDrop(rowNumber: number) {
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin
   const coinDropSound = coinDropSounds[rowNumber];
-  if (coinDropSound.readyState >= 2) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin
+  if (coinDropSound.readyState >= 2 && get(soundEnabled)) {
+    coinDropSound.volume = 0.75;
     coinDropSound.play();
   }
 }
 
 export function playWinningCelebration() {
-  if (winningSound.readyState >= 2) {
+  if (winningSound.readyState >= 2 && get(soundEnabled)) {
+    winningSound.volume = 0.5;
     winningSound.play();
   }
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0127c54..28fb1fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
   import Footer from '$lib/components/Footer.svelte';
   import GoogleAnalytics from '$lib/components/GoogleAnalytics.svelte';
   import MetaTags from '$lib/components/MetaTags.svelte';
+  import SoundControl from '$lib/components/SoundControl.svelte';
 </script>
 
 <InitialThemeSetter />
@@ -20,6 +21,7 @@
       <Logo />
     </div>
     <div class="theme-selector-container">
+      <SoundControl />
       <ThemeSelector />
     </div>
   </header>
diff --git a/static/audio/winning-celebration.mp3 b/static/audio/winning-celebration.mp3
index 5aac18d..79e3ad2 100644
Binary files a/static/audio/winning-celebration.mp3 and b/static/audio/winning-celebration.mp3 differ