diff --git a/app/Http/Controllers/DeckController.php b/app/Http/Controllers/DeckController.php
index 5b761c0..386bc42 100644
--- a/app/Http/Controllers/DeckController.php
+++ b/app/Http/Controllers/DeckController.php
@@ -35,11 +35,13 @@ public function store(Request $request)
         $validated = $request->validate([
             'name' => 'required|string',
             'description' => 'string|nullable',
+            'is_tts_enabled' => 'boolean|nullable',
         ]);
 
         $deck = Deck::create([
             'name' => $validated['name'],
             'description' => $validated['description'] ?? null,
+            'is_tts_enabled' => $validated['is_tts_enabled'] ?? false,
         ]);
 
         $deck->memberships()->create([
@@ -96,11 +98,13 @@ public function update(Request $request, Deck $deck)
         $validated = $request->validate([
             'name' => 'string',
             'description' => 'string|nullable',
+            'is_tts_enabled' => 'boolean|nullable',
         ]);
 
         $deck->update([
             'name' => $validated['name'] ?? $deck->name,
             'description' => $validated['description'] ?? $deck->description,
+            'is_tts_enabled' => $validated['is_tts_enabled'] ?? $deck->is_tts_enabled,
         ]);
 
         return DeckResource::make($deck->fresh());
diff --git a/app/Http/Resources/DeckResource.php b/app/Http/Resources/DeckResource.php
index 1ec7e43..064cdba 100644
--- a/app/Http/Resources/DeckResource.php
+++ b/app/Http/Resources/DeckResource.php
@@ -19,6 +19,7 @@ public function toArray(Request $request): array
             'name' => $this->name,
             'description' => $this->description,
             'is_public' => $this->is_public,
+            'is_tts_enabled' => $this->is_tts_enabled,
 
             'cards_count' => $this->when(isset($this->cards_count), $this->cards_count),
 
diff --git a/app/Models/Deck.php b/app/Models/Deck.php
index fc05796..cb83847 100644
--- a/app/Models/Deck.php
+++ b/app/Models/Deck.php
@@ -19,12 +19,14 @@ class Deck extends Model implements AuditableContract
         'avg_score' => 'float',
         'is_public' => 'boolean',
         'current_user_xp' => 'integer',
+        'is_tts_enabled' => 'boolean',
     ];
 
     protected $fillable = [
         'name',
         'description',
         'is_public',
+        'is_tts_enabled',
     ];
 
     public function users()
diff --git a/database/migrations/2024_12_05_215120_add_is_tts_enabled_column_to_decks_table.php b/database/migrations/2024_12_05_215120_add_is_tts_enabled_column_to_decks_table.php
new file mode 100644
index 0000000..d7876e5
--- /dev/null
+++ b/database/migrations/2024_12_05_215120_add_is_tts_enabled_column_to_decks_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('decks', function (Blueprint $table) {
+            $table
+                ->boolean('is_tts_enabled')
+                ->default(false)
+                ->after('is_public');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('decks', function (Blueprint $table) {
+            $table->dropColumn('is_tts_enabled');
+        });
+    }
+};
diff --git a/resources/client/api/index.ts b/resources/client/api/index.ts
index 2bc1ed5..0b0e2e2 100644
--- a/resources/client/api/index.ts
+++ b/resources/client/api/index.ts
@@ -68,11 +68,18 @@ export async function getDeckById(deckId: number) {
 }
 
 export async function createDeck(
-  deck: { name: string; description: string },
+  deck: { name: string; description: string; isTTSEnabled: boolean },
   customConfig: T.CustomAxiosRequestConfig = {},
 ) {
   await csrf();
-  const res = await axios.post<{ data: T.Deck }>(`/decks`, deck, customConfig);
+  const res = await axios.post<{ data: T.Deck }>(
+    `/decks`,
+    {
+      ...deck,
+      is_tts_enabled: deck.isTTSEnabled,
+    },
+    customConfig,
+  );
   return res.data.data;
 }
 
@@ -88,14 +95,17 @@ export async function updateDeck({
   id,
   name,
   description,
+  isTTSEnabled,
 }: {
   id: number;
   name: string;
   description: string;
+  isTTSEnabled: boolean;
 }) {
   const res = await axios.put<{ data: T.Deck }>(`/decks/${id}`, {
     name,
     description,
+    is_tts_enabled: isTTSEnabled,
   });
   return res.data.data;
 }
diff --git a/resources/client/components/BlockEditor/TextBlockInput.vue b/resources/client/components/BlockEditor/TextBlockInput.vue
index a0777c4..93c1d29 100644
--- a/resources/client/components/BlockEditor/TextBlockInput.vue
+++ b/resources/client/components/BlockEditor/TextBlockInput.vue
@@ -5,7 +5,7 @@
       :selectedLanguage="selectedLanguage"
       class="top-1 right-1 absolute z-10"
       isIdleClass="bg-brand-oatmeal-50"
-      v-if="featureFlags?.text_to_speech && charCount < MAX_TTS_CHARS"
+      v-if="isDeckTTSEnabled && charCount < MAX_TTS_CHARS"
     />
 
     <QuillyEditor
@@ -16,7 +16,10 @@
       class="bg-brand-maroon-800/5 rounded-sm focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-blue-600"
     />
 
-    <div class="flex gap-2 items-center justify-end mt-2">
+    <div
+      class="flex gap-2 items-center justify-end mt-2"
+      v-if="isDeckTTSEnabled"
+    >
       <Select
         v-if="isSettingCustomLanguage"
         :id="`block-${nonce}__language-select`"
@@ -54,7 +57,7 @@
 <script setup lang="ts">
 import { QuillyEditor } from "vue-quilly";
 import Quill from "quill/quill"; // Core build
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, computed, watch, inject, toRef } from "vue";
 import {
   Select,
   SelectTrigger,
@@ -70,8 +73,7 @@ import { TextContentBlock } from "@/types";
 import { uuid } from "@/lib/utils";
 import { IconGlobe } from "../icons";
 import Toggle from "@/components/Toggle.vue";
-import { MAX_TTS_CHARS } from "@/constants";
-import { useAllFeatureFlagsQuery } from "@/queries/featureFlags";
+import { IS_DECK_TTS_ENABLED_INJECTION_KEY, MAX_TTS_CHARS } from "@/constants";
 
 import SimpleTTSPlayer from "../SimpleTTSPlayer.vue";
 
@@ -136,7 +138,10 @@ const options = computed(() => ({
   readOnly: false,
 }));
 
-const { data: featureFlags } = useAllFeatureFlagsQuery();
+const isDeckTTSEnabled = inject(
+  IS_DECK_TTS_ENABLED_INJECTION_KEY,
+  toRef(false),
+);
 
 onMounted(() => {
   if (!editor.value) {
diff --git a/resources/client/components/CardSideView/TextBlockView.vue b/resources/client/components/CardSideView/TextBlockView.vue
index 9b19b16..2413f48 100644
--- a/resources/client/components/CardSideView/TextBlockView.vue
+++ b/resources/client/components/CardSideView/TextBlockView.vue
@@ -18,23 +18,21 @@
     />
     <div
       class="flex items-center justify-center"
-      v-if="featureFlags?.text_to_speech"
+      v-if="isDeckTTSEnabled && charCount < MAX_TTS_CHARS"
     >
       <SimpleTTSPlayer
         :text="block.content"
         :selectedLanguage="block.meta?.lang ?? null"
-        v-if="charCount < MAX_TTS_CHARS"
       />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import * as T from "@/types";
-import { computed } from "vue";
+import { computed, inject, toRef } from "vue";
 import { cn } from "@/lib/utils";
 import SimpleTTSPlayer from "@/components/SimpleTTSPlayer.vue";
-import { MAX_TTS_CHARS } from "@/constants";
-import { useAllFeatureFlagsQuery } from "@/queries/featureFlags";
+import { MAX_TTS_CHARS, IS_DECK_TTS_ENABLED_INJECTION_KEY } from "@/constants";
 
 const props = defineProps<{
   block: T.TextContentBlock;
@@ -44,7 +42,10 @@ const props = defineProps<{
 const wordCount = computed(() => props.block.content.split(/\s+/).length);
 const charCount = computed(() => props.block.content.length);
 
-const { data: featureFlags } = useAllFeatureFlagsQuery();
+const isDeckTTSEnabled = inject(
+  IS_DECK_TTS_ENABLED_INJECTION_KEY,
+  toRef(false),
+);
 </script>
 <style type="post-css">
 /**
diff --git a/resources/client/components/HintTooltip.vue b/resources/client/components/HintTooltip.vue
index 007325c..5ae84de 100644
--- a/resources/client/components/HintTooltip.vue
+++ b/resources/client/components/HintTooltip.vue
@@ -2,7 +2,7 @@
   <TooltipProvider>
     <Tooltip :delayDuration="0">
       <TooltipTrigger
-        class="bg-brand-maroon-800/70 hover:bg-brand-maroon-800 rounded-full size-4 text-brand-oatmeal-100 text-xs inline-flex items-center justify-center"
+        class="bg-brand-maroon-800/70 hover:bg-brand-maroon-800 rounded-full size-4 text-brand-oatmeal-100 text-xs inline-flex items-center justify-center font-black"
       >
         ?
       </TooltipTrigger>
@@ -13,7 +13,6 @@
   </TooltipProvider>
 </template>
 <script setup lang="ts">
-import IconQuestionMark from "./icons/IconQuestionMark.vue";
 import {
   TooltipProvider,
   Tooltip,
diff --git a/resources/client/components/SimpleTTSPlayer.vue b/resources/client/components/SimpleTTSPlayer.vue
index 55e9139..7e5a99c 100644
--- a/resources/client/components/SimpleTTSPlayer.vue
+++ b/resources/client/components/SimpleTTSPlayer.vue
@@ -2,8 +2,10 @@
   <Toggle
     v-model="isPlaying"
     label="Listen"
+    :disabled="isEmpty"
     :class="{
       [isIdleClass]: !isPlaying && props.isIdleClass,
+      '!opacity-25 cursor-not-allowed': isEmpty,
     }"
   >
     <IconSound class="size-5" />
@@ -34,7 +36,7 @@ const props = defineProps<{
 const textRef = computed(() => props.text);
 const selectedLanguageRef = computed(() => props.selectedLanguage);
 
-const { isPlaying } = useTextToSpeech(textRef, selectedLanguageRef);
+const { isPlaying, isEmpty } = useTextToSpeech(textRef, selectedLanguageRef);
 
 const languages = getTTSLanguageOptions();
 const languageName = computed(() => {
diff --git a/resources/client/components/Toggle.vue b/resources/client/components/Toggle.vue
index d3dc237..1f836af 100644
--- a/resources/client/components/Toggle.vue
+++ b/resources/client/components/Toggle.vue
@@ -19,7 +19,6 @@
 </template>
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import SimpleTooltip from "@/components/SimpleTooltip.vue";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<{
diff --git a/resources/client/components/icons/IconSettings.vue b/resources/client/components/icons/IconSettings.vue
new file mode 100644
index 0000000..d62edc2
--- /dev/null
+++ b/resources/client/components/icons/IconSettings.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M10.96 21q-.349 0-.605-.229q-.257-.229-.319-.571l-.263-2.092q-.479-.145-1.036-.454q-.556-.31-.947-.664l-1.915.824q-.317.14-.644.03t-.504-.415L3.648 15.57q-.177-.305-.104-.638t.348-.546l1.672-1.25q-.045-.272-.073-.559q-.03-.288-.03-.559q0-.252.03-.53q.028-.278.073-.626l-1.672-1.25q-.275-.213-.338-.555t.113-.648l1.06-1.8q.177-.287.504-.406t.644.021l1.896.804q.448-.373.97-.673q.52-.3 1.013-.464l.283-2.092q.061-.342.318-.571T10.96 3h2.08q.349 0 .605.229q.257.229.319.571l.263 2.112q.575.202 1.016.463t.909.654l1.992-.804q.318-.14.645-.021t.503.406l1.06 1.819q.177.306.104.638t-.348.547L18.36 10.92q.082.31.092.569t.01.51q0 .233-.02.491q-.019.259-.088.626l1.69 1.27q.275.213.358.546t-.094.638l-1.066 1.839q-.176.306-.513.415q-.337.11-.654-.03l-1.923-.824q-.467.393-.94.673t-.985.445l-.264 2.111q-.061.342-.318.571t-.605.23zm.04-1h1.956l.369-2.708q.756-.2 1.36-.549q.606-.349 1.232-.956l2.495 1.063l.994-1.7l-2.189-1.644q.125-.427.166-.786q.04-.358.04-.72q0-.38-.04-.72t-.166-.747l2.227-1.683l-.994-1.7l-2.552 1.07q-.454-.499-1.193-.935q-.74-.435-1.4-.577L13 4h-1.994l-.312 2.689q-.756.161-1.39.52q-.633.358-1.26.985L5.55 7.15l-.994 1.7l2.169 1.62q-.125.336-.175.73t-.05.82q0 .38.05.755t.156.73l-2.15 1.645l.994 1.7l2.475-1.05q.589.594 1.222.953q.634.359 1.428.559zm.973-5.5q1.046 0 1.773-.727T14.473 12t-.727-1.773t-1.773-.727q-1.052 0-1.776.727T9.473 12t.724 1.773t1.776.727M12 12"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "MaterialSymbolsLightSettingsOutlineRounded",
+};
+</script>
diff --git a/resources/client/components/icons/index.ts b/resources/client/components/icons/index.ts
index 62b23ec..2fc33a6 100644
--- a/resources/client/components/icons/index.ts
+++ b/resources/client/components/icons/index.ts
@@ -27,6 +27,7 @@ export { default as IconPencil } from "./IconPencil.vue";
 export { default as IconPlusFilled } from "./IconPlusFilled.vue";
 export { default as IconUser } from "./IconUser.vue";
 export { default as IconRefresh } from "./IconRefresh.vue";
+export { default as IconSettings } from "./IconSettings.vue";
 export { default as IconSpinner } from "./IconSpinner.vue";
 export { default as IconSound } from "./IconSound.vue";
 export { default as IconTeX } from "./IconTeX.vue";
diff --git a/resources/client/components/ui/switch/Switch.vue b/resources/client/components/ui/switch/Switch.vue
index eeb3759..ffb2634 100644
--- a/resources/client/components/ui/switch/Switch.vue
+++ b/resources/client/components/ui/switch/Switch.vue
@@ -1,37 +1,45 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 import {
   SwitchRoot,
   type SwitchRootEmits,
   type SwitchRootProps,
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  SwitchRootProps & { class?: HTMLAttributes["class"] }
+>();
 
-const emits = defineEmits<SwitchRootEmits>()
+const emits = defineEmits<SwitchRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <SwitchRoot
     v-bind="forwarded"
-    :class="cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-stone-900 data-[state=unchecked]:bg-stone-200 dark:focus-visible:ring-stone-300 dark:focus-visible:ring-offset-stone-950 dark:data-[state=checked]:bg-stone-50 dark:data-[state=unchecked]:bg-stone-800',
-      props.class,
-    )"
+    :class="
+      cn(
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-umn-maroon-800/10 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-umn-maroon-800 data-[state=unchecked]:bg-umn-maroon-800/10',
+        props.class,
+      )
+    "
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-stone-950')"
+      :class="
+        cn(
+          'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-stone-950',
+        )
+      "
     />
   </SwitchRoot>
 </template>
diff --git a/resources/client/composables/useIsDeckTTSEnabled.ts b/resources/client/composables/useIsDeckTTSEnabled.ts
new file mode 100644
index 0000000..8c7e11e
--- /dev/null
+++ b/resources/client/composables/useIsDeckTTSEnabled.ts
@@ -0,0 +1,26 @@
+import { computed, MaybeRefOrGetter, provide, toValue, type Ref } from "vue";
+
+import { Deck } from "@/types";
+import { useAllFeatureFlagsQuery } from "@/queries/featureFlags";
+
+/*
+ * Provides the isDeckTTSEnabled ref to the component tree.
+ * to avoid prop drilling
+ */
+export const useIsDeckTTSEnabled = (
+  deck: MaybeRefOrGetter<Deck | null | undefined>,
+) => {
+  const { data: featureFlags } = useAllFeatureFlagsQuery();
+
+  const isDeckTTSEnabled = computed(
+    () =>
+      // global tts feature flag is enabled
+      (featureFlags.value?.text_to_speech ?? false) &&
+      // and deck has tts enabled
+      (toValue(deck)?.is_tts_enabled ?? false),
+  );
+
+  return {
+    isDeckTTSEnabled,
+  };
+};
diff --git a/resources/client/composables/useTextToSpeech.ts b/resources/client/composables/useTextToSpeech.ts
index 5786d2f..8944a73 100644
--- a/resources/client/composables/useTextToSpeech.ts
+++ b/resources/client/composables/useTextToSpeech.ts
@@ -29,6 +29,10 @@ export function useTextToSpeech(
   const isPaused = computed(() => audioState.value === "paused");
   const isIdle = computed(() => audioState.value === "idle");
 
+  function isHTMLEmpty(html: string): boolean {
+    return !html || html === "<p><br></p>";
+  }
+
   async function getAudioUrl(): Promise<string> {
     const blob = await api.getAudioForText(toValue(text).trim(), toValue(lang));
     return URL.createObjectURL(blob);
@@ -40,6 +44,8 @@ export function useTextToSpeech(
   }
 
   async function play() {
+    if (isHTMLEmpty(toValue(text))) return;
+
     audioState.value = "playing";
     blobUrl.value ??= await getAudioUrl();
     audio.src = blobUrl.value;
@@ -86,6 +92,7 @@ export function useTextToSpeech(
     isPlaying,
     isPaused,
     isIdle,
+    isEmpty: computed(() => isHTMLEmpty(toValue(text))),
     audioState,
   };
 }
diff --git a/resources/client/constants.ts b/resources/client/constants.ts
index 64c48d1..a67314f 100644
--- a/resources/client/constants.ts
+++ b/resources/client/constants.ts
@@ -1 +1,6 @@
+import { type Ref, type InjectionKey } from "vue";
+
 export const MAX_TTS_CHARS = 200;
+
+export const IS_DECK_TTS_ENABLED_INJECTION_KEY: InjectionKey<Ref<boolean>> =
+  Symbol("isDeckTtsEnabled");
diff --git a/resources/client/pages/Cards/CreateOrEditCardPage.vue b/resources/client/pages/Cards/CreateOrEditCardPage.vue
index 3882cbb..236512e 100644
--- a/resources/client/pages/Cards/CreateOrEditCardPage.vue
+++ b/resources/client/pages/Cards/CreateOrEditCardPage.vue
@@ -55,7 +55,15 @@
 </template>
 <script setup lang="ts">
 import { AuthenticatedLayout } from "@/layouts/AuthenticatedLayout";
-import { computed, reactive, watch, ref, onMounted, capitalize } from "vue";
+import {
+  computed,
+  reactive,
+  watch,
+  ref,
+  onMounted,
+  capitalize,
+  provide,
+} from "vue";
 import {
   useUpdateCardMutation,
   useCreateCardMutation,
@@ -69,6 +77,8 @@ import { IconChevronLeft } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import PageTitle from "@/components/PageTitle.vue";
 import PageSubtitle from "@/components/PageSubtitle.vue";
+import { useIsDeckTTSEnabled } from "@/composables/useIsDeckTTSEnabled";
+import { IS_DECK_TTS_ENABLED_INJECTION_KEY } from "@/constants";
 
 const props = defineProps<{
   deckId: number;
@@ -179,5 +189,9 @@ function handleSave({ saveAndAddAnother = false } = {}) {
     { onSuccess },
   );
 }
+
+// provide info about TTS to any card blocks that need it
+const { isDeckTTSEnabled } = useIsDeckTTSEnabled(deck);
+provide(IS_DECK_TTS_ENABLED_INJECTION_KEY, isDeckTTSEnabled);
 </script>
 <style scoped></style>
diff --git a/resources/client/pages/Decks/CreateOrEditDeckPage.vue b/resources/client/pages/Decks/CreateOrEditDeckPage.vue
index 71840d7..9300c90 100644
--- a/resources/client/pages/Decks/CreateOrEditDeckPage.vue
+++ b/resources/client/pages/Decks/CreateOrEditDeckPage.vue
@@ -14,11 +14,26 @@
           v-model="form.description"
           id="description"
         />
+        <div class="flex gap-2 items-center">
+          <Switch
+            id="tts-enabled"
+            :checked="form.isTTSEnabled"
+            @update:checked="form.isTTSEnabled = $event"
+            label="Enable TTS"
+          />
+          <Label for="tts-enabled">
+            Enable Text-to-Speech
+            <HintTooltip>
+              When enabled, a button to read text aloud will be available. This
+              is useful for learning pronunciation.
+            </HintTooltip>
+          </Label>
+        </div>
         <div class="flex items-center justify-end py-4 gap-2">
           <Button asChild variant="secondary">
             <RouterLink :to="{ name: 'decks.index' }"> Cancel </RouterLink>
           </Button>
-          <Button type="submit">{{
+          <Button type="submit" :disabled="!form.name">{{
             isCreateMode ? "Create Deck" : "Save"
           }}</Button>
         </div>
@@ -38,6 +53,10 @@ import { useRouter } from "vue-router";
 import InputGroup from "@/components/InputGroup.vue";
 import PageHeader from "@/components/PageHeader.vue";
 import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import HintTooltip from "@/components/HintTooltip.vue";
+import { Label } from "@/components/ui/label";
+import { Deck } from "@/types";
 
 const props = defineProps<{
   deckId: number | null;
@@ -46,6 +65,7 @@ const props = defineProps<{
 const form = reactive({
   name: "",
   description: "",
+  isTTSEnabled: false,
 });
 
 const isCreateMode = computed(() => props.deckId === null);
@@ -60,7 +80,8 @@ watch(
   () => {
     if (deck.value) {
       form.name = deck.value.name;
-      form.description = deck.value.description;
+      form.description = deck.value.description ?? "";
+      form.isTTSEnabled = deck.value.is_tts_enabled;
     }
   },
   { immediate: true },
@@ -69,8 +90,8 @@ watch(
 async function handleSubmit() {
   if (isCreateMode.value) {
     createDeck(form, {
-      onSuccess: () => {
-        router.push({ name: "decks.index" });
+      onSuccess: (newDeck) => {
+        router.push({ name: "decks.show", params: { deckId: newDeck.id } });
       },
     });
     return;
@@ -83,8 +104,8 @@ async function handleSubmit() {
   updateDeck(
     { id: props.deckId, ...form },
     {
-      onSuccess: () => {
-        router.push({ name: "decks.index" });
+      onSuccess: (updatedDeck: Deck) => {
+        router.push({ name: "decks.show", params: { deckId: updatedDeck.id } });
       },
     },
   );
diff --git a/resources/client/pages/Decks/DeckIndexPage/MoreDeckActions.vue b/resources/client/pages/Decks/DeckIndexPage/MoreDeckActions.vue
index 7dae7de..df81ca0 100644
--- a/resources/client/pages/Decks/DeckIndexPage/MoreDeckActions.vue
+++ b/resources/client/pages/Decks/DeckIndexPage/MoreDeckActions.vue
@@ -9,8 +9,8 @@
     <DropdownMenuContent align="end">
       <DropdownMenuItem asChild v-if="deck.capabilities.canUpdate">
         <RouterLink :to="{ name: 'decks.edit', params: { deckId: deck.id } }">
-          <IconPencil class="size-5 mr-4" />
-          Edit Name
+          <IconSettings class="size-5 mr-4" />
+          Settings
         </RouterLink>
       </DropdownMenuItem>
       <DropdownMenuItem asChild>
@@ -80,6 +80,7 @@ import {
   IconTrash,
   IconUpload,
   IconCirclePlay,
+  IconSettings,
 } from "@/components/icons";
 import {
   DropdownMenu,
diff --git a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
index 4662cec..ef2a49e 100644
--- a/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
+++ b/resources/client/pages/Decks/DeckShowPage/DeckShowPage.vue
@@ -114,7 +114,7 @@ import { useDeleteCardMutation } from "@/queries/cards";
 import { useDeckByIdQuery } from "@/queries/decks";
 import * as T from "@/types";
 import { RouterLink } from "vue-router";
-import { computed } from "vue";
+import { computed, provide } from "vue";
 import { Button } from "@/components/ui/button";
 import MoreDeckActions from "@/pages/Decks/DeckIndexPage/MoreDeckActions.vue";
 import PageHeader from "@/components/PageHeader.vue";
@@ -125,7 +125,8 @@ import MoreCardActions from "./MoreCardActions.vue";
 import { ref } from "vue";
 import LevelProgress from "@/components/LevelProgress.vue";
 import { useActivityTypesQuery } from "@/queries/activityTypes/useActivityTypesQuery";
-import { match } from "ramda";
+import { useIsDeckTTSEnabled } from "@/composables/useIsDeckTTSEnabled";
+import { IS_DECK_TTS_ENABLED_INJECTION_KEY } from "@/constants";
 
 const props = defineProps<{
   deckId: number;
@@ -175,5 +176,9 @@ const initialCardSide = ref<T.CardSideName>("front");
 function flipAllCards() {
   initialCardSide.value = initialCardSide.value === "front" ? "back" : "front";
 }
+
+// provide info about TTS to any card blocks that need it
+const { isDeckTTSEnabled } = useIsDeckTTSEnabled(deck);
+provide(IS_DECK_TTS_ENABLED_INJECTION_KEY, isDeckTTSEnabled);
 </script>
 <style scoped></style>
diff --git a/resources/client/pages/Decks/PracticeDeckPage/PracticeDeckPage.vue b/resources/client/pages/Decks/PracticeDeckPage/PracticeDeckPage.vue
index 9812e62..dc738c2 100644
--- a/resources/client/pages/Decks/PracticeDeckPage/PracticeDeckPage.vue
+++ b/resources/client/pages/Decks/PracticeDeckPage/PracticeDeckPage.vue
@@ -79,7 +79,7 @@
   </AuthenticatedLayout>
 </template>
 <script setup lang="ts">
-import { computed, watch, reactive } from "vue";
+import { computed, reactive, provide } from "vue";
 import { AuthenticatedLayout } from "@/layouts/AuthenticatedLayout";
 import { useDeckByIdQuery } from "@/queries/decks";
 import * as T from "@/types";
@@ -96,6 +96,8 @@ import { useCreateDeckActivityEventMutation } from "@/queries/deckActivityEvents
 import LevelProgress from "@/components/LevelProgress.vue";
 import { useDeckStatsQuery } from "@/queries/decks/useDeckStatsQuery";
 import PracticeDeck from "./PracticeDeck.vue";
+import { IS_DECK_TTS_ENABLED_INJECTION_KEY } from "@/constants";
+import { useIsDeckTTSEnabled } from "@/composables/useIsDeckTTSEnabled";
 
 const props = defineProps<{
   deckId: number;
@@ -115,15 +117,17 @@ const { data: deckStats } = useDeckStatsQuery(deckIdRef);
 const { mutate: createActivityEvent } = useCreateDeckActivityEventMutation();
 
 async function handlePracticeComplete(cardCount: number) {
-  const event = await createActivityEvent({
+  await createActivityEvent({
     deckId: deck.value?.id ?? 0,
     activityType: T.ActivityTypeName.PRACTICE_ALL_CARDS,
     correctCount: cardCount,
     totalCount: cardCount,
   });
-
-  console.log("event", event);
 }
+
+// provide info about TTS to any card blocks that need it
+const { isDeckTTSEnabled } = useIsDeckTTSEnabled(deck);
+provide(IS_DECK_TTS_ENABLED_INJECTION_KEY, isDeckTTSEnabled);
 </script>
 <style scoped>
 button {
diff --git a/resources/client/types/index.ts b/resources/client/types/index.ts
index 6ab0ef6..ffee5e2 100644
--- a/resources/client/types/index.ts
+++ b/resources/client/types/index.ts
@@ -60,6 +60,7 @@ export interface Deck {
   cards_count?: number;
   memberships_count?: number;
   is_public: boolean;
+  is_tts_enabled: boolean;
   current_user_role: MembershipRole | null; // could be null if public deck
 
   current_user_details: {