From fdb8d4747aafbe8d9d0cfb2b45fd374d82c40efd Mon Sep 17 00:00:00 2001
From: Aman Srivastava <amansri345@gmail.com>
Date: Thu, 4 Dec 2025 16:13:08 +0530
Subject: [PATCH 1/2] add multi-select exercise category dropdown in settings

---
 src/app.js              | 41 +++++++++++++++++++++++++++++++++++++++--
 src/pages/home.js       |  7 +++++--
 src/stores/exercises.js | 30 +++++++++++++++++++++---------
 src/stores/settings.js  | 32 ++++++++++++++++++++------------
 4 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/src/app.js b/src/app.js
index 43c9247..e42cb2d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,6 +7,7 @@ import { captionTextStyles } from './shared/styles/captionTextStyles.js';
 import { linkStyles } from './shared/styles/linkStyles.js';
 import { modalStyles } from './shared/styles/modalStyles.js';
 import { appStore } from './stores/app.js';
+import { EXERCISE_CATEGORY } from './stores/exercises.js';
 import { DEFAULT_SETTINGS, settingsStore } from './stores/settings.js';
 import {
   CLIENT_ERROR_MESSAGE,
@@ -14,7 +15,7 @@ import {
   SETTINGS_EVENT,
   STORAGE_KEY_NAMESPACE,
 } from './utils/constants.js';
-import { isBool, isNum } from './utils/helpers.js';
+import { isBool, isNum, toSentenceCase } from './utils/helpers.js';
 
 import './components/app-top-bar.js';
 import './components/header.js';
@@ -254,6 +255,7 @@ export class App extends LitElement {
       exercisesCount,
       exerciseReps,
       exerciseSets,
+      selectedExerciseCategories,
       pomodoroMinutes,
       shortBreakMinutes,
       longBreakMinutes,
@@ -268,7 +270,26 @@ export class App extends LitElement {
         <h1>Settings</h1>
         <div>
           <form id="settingsForm" @submit=${this.#onSubmit}>
-            <h5>Preferences</h5>
+            <h5>Exercise Category Filter</h5>
+            <label> Select allowed exercise categories (multi-select): </label>
+
+            <select
+              multiple
+              size="6"
+              name="selectedExerciseCategories"
+              @change=${this.#updateCategorySelection}
+            >
+              ${Object.values(EXERCISE_CATEGORY).map(
+                (category) => html`
+                  <option
+                    value=${category}
+                    ?selected=${selectedExerciseCategories.includes(category)}
+                  >
+                    ${toSentenceCase(category)}
+                  </option>
+                `
+              )}
+            </select>
 
             <div class="checkbox-group">
               <label>
@@ -446,6 +467,22 @@ export class App extends LitElement {
     }
   }
 
+  #updateCategorySelection(event) {
+    const options = event.target.options;
+    const selected = [];
+
+    for (const option of options) {
+      if (option.selected) {
+        selected.push(option.value);
+      }
+    }
+
+    this._settingsFormValues = {
+      ...this._settingsFormValues,
+      selectedExerciseCategories: selected,
+    };
+  }
+
   #closeEnableNotificationsModal() {
     this._enableNotificationsModalOpen = false;
   }
diff --git a/src/pages/home.js b/src/pages/home.js
index fffba67..5137b5d 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -135,7 +135,7 @@ export class HomePage extends LitElement {
     _motivationalQuote: { type: String, state: true },
     _selectedPomodoroMode: { type: String, state: true },
     _exercises: { type: Array, state: true },
-    _showExercises: { type: Array, state: true },
+    _showExercises: { type: Boolean, state: true },
     _settings: { type: Object, state: true },
     _minutes: { type: Number, state: true },
     _seconds: { type: Number, state: true },
@@ -463,7 +463,10 @@ export class HomePage extends LitElement {
 
     if (isPomodoroModeSelected) {
       this._showExercises = true;
-      this._exercises = ExercisesStore.getRandomExercises(exercisesCount);
+      this._exercises = ExercisesStore.getRandomExercises(
+        exercisesCount,
+        this._settings.selectedExerciseCategories
+      );
     }
   }
 
diff --git a/src/stores/exercises.js b/src/stores/exercises.js
index 4b9af37..eac68b9 100644
--- a/src/stores/exercises.js
+++ b/src/stores/exercises.js
@@ -3,7 +3,7 @@ import { isNum } from '../utils/helpers.js';
 import { DEFAULT_SETTINGS } from './settings.js';
 
 /** @type {Readonly<Record<string, import("../index.d.js").ExerciseCategory>>} */
-const EXERCISE_CATEGORY = Object.freeze({
+export const EXERCISE_CATEGORY = Object.freeze({
   UPPER_BODY: 'upperBody',
   LOWER_BODY: 'lowerBody',
   CORE: 'core',
@@ -112,16 +112,29 @@ const EXERCISES_ENTRIES = Object.freeze([
 class ExercisesStore {
   /**
    * @param {number} exercisesCount
+   * @param {string[]} selectedCategories
    * @returns {import("../index.d.js").Exercise[]}
    */
-  static getRandomExercises(exercisesCount) {
+  static getRandomExercises(exercisesCount, selectedCategories = []) {
     const count = isNum(exercisesCount)
       ? exercisesCount
       : DEFAULT_SETTINGS.exercisesCount;
+
+    const allowedCategories =
+      Array.isArray(selectedCategories) && selectedCategories.length > 0
+        ? selectedCategories
+        : null;
+
+    const filteredEntries = allowedCategories
+      ? EXERCISES_ENTRIES.filter(([category]) =>
+          allowedCategories.includes(category)
+        )
+      : EXERCISES_ENTRIES;
+
     const result = [];
     const pairSet = new Set();
 
-    const maxPairs = EXERCISES_ENTRIES.reduce(
+    const maxPairs = filteredEntries.reduce(
       (sum, [, list]) => sum + list.length,
       0
     );
@@ -130,17 +143,16 @@ class ExercisesStore {
 
     while (result.length < limit) {
       const [randomCategory, exerciseList] =
-        EXERCISES_ENTRIES[Math.floor(Math.random() * EXERCISES_ENTRIES.length)];
+        filteredEntries[Math.floor(Math.random() * filteredEntries.length)];
+
       const randomExercise =
         exerciseList[Math.floor(Math.random() * exerciseList.length)];
 
       const key = `${randomCategory}:${randomExercise}`;
 
-      if (pairSet.has(key)) {
-        continue;
-      } else {
-        pairSet.add(key);
-      }
+      if (pairSet.has(key)) continue;
+
+      pairSet.add(key);
 
       result.push({
         category: randomCategory,
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 5295502..f39d8a1 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -12,6 +12,10 @@ export const DEFAULT_SETTINGS = Object.freeze({
   exerciseReps: 5,
   exerciseSets: 1,
   exercisesCount: 1,
+
+  //NEW: multi-select category filter (empty = allow all)
+  selectedExerciseCategories: [],
+
   enableNotifications: false,
   showTimerInTitle: false,
   showMotivationalQuote: true,
@@ -36,18 +40,18 @@ class SettingsStore extends EventTarget {
     const settingsMap = new Map(Object.entries(this.#settings));
 
     for (const [key, defaultValue] of settingsMap.entries()) {
-      const storedValue = /** @type {boolean | number | null} */ (
-        this.#settingsStorage.get(key)
-      );
+      const storedValue = this.#settingsStorage.get(key);
 
-      const value = /** @type {boolean | number} */ (
+      //FIXED: now supports arrays (for multi-select)
+      const value =
         storedValue === null
           ? defaultValue
-          : (isBool(defaultValue) && isBool(storedValue)) ||
-              (isNum(defaultValue) && isNum(storedValue))
+          : Array.isArray(defaultValue) && Array.isArray(storedValue)
             ? storedValue
-            : defaultValue
-      );
+            : (isBool(defaultValue) && isBool(storedValue)) ||
+                (isNum(defaultValue) && isNum(storedValue))
+              ? storedValue
+              : defaultValue;
 
       settingsMap.set(key, value);
       this.#settingsStorage.set(key, value);
@@ -69,11 +73,15 @@ class SettingsStore extends EventTarget {
     const settingsMap = new Map(Object.entries(this.#settings));
 
     for (const [key, defaultValue] of Object.entries(DEFAULT_SETTINGS)) {
-      const val = /** @type {boolean | number} */ (
-        valueMap.has(key) ? valueMap.get(key) : defaultValue
-      );
+      const val = valueMap.has(key) ? valueMap.get(key) : defaultValue;
 
-      const newValue = isBool(val) || isNum(val) ? val : defaultValue;
+      //FIXED: now supports arrays (for multi-select)
+      const newValue =
+        Array.isArray(defaultValue) && Array.isArray(val)
+          ? val
+          : isBool(val) || isNum(val)
+            ? val
+            : defaultValue;
 
       settingsMap.set(key, newValue);
       this.#settingsStorage.set(key, newValue);

From c6ff2afb8fa5c87d90d0d638fac6970553d6de01 Mon Sep 17 00:00:00 2001
From: brysonbw <brysonward77@gmail.com>
Date: Sat, 13 Dec 2025 02:09:15 -0700
Subject: [PATCH 2/2] feat(settings form): add exercise category tabs with
 corresponding multi-select exercise dropdowns

---
 src/app.js                     | 241 +++++++++++++++++++++------------
 src/index.d.js                 |   6 +-
 src/pages/home.js              |  18 +--
 src/shared/styles/tabStyles.js |  45 ++++++
 src/stores/exercises.js        | 167 -----------------------
 src/stores/settings.js         |  67 +++++----
 src/utils/constants.js         | 112 +++++++++++++++
 src/utils/helpers.js           |  14 +-
 8 files changed, 376 insertions(+), 294 deletions(-)
 create mode 100644 src/shared/styles/tabStyles.js
 delete mode 100644 src/stores/exercises.js

diff --git a/src/app.js b/src/app.js
index ff94a69..06bb58a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,25 +7,33 @@ import { buttonStyles } from './shared/styles/buttonStyles.js';
 import { captionTextStyles } from './shared/styles/captionTextStyles.js';
 import { linkStyles } from './shared/styles/linkStyles.js';
 import { modalStyles } from './shared/styles/modalStyles.js';
+import { tabStyles } from './shared/styles/tabStyles.js';
 import { tooltipStyles } from './shared/styles/tooltipStyles.js';
 import { appStore } from './stores/app.js';
-import { EXERCISE_CATEGORY } from './stores/exercises.js';
 import { DEFAULT_SETTINGS, settingsStore } from './stores/settings.js';
 import {
   AUDIO_SOUND,
   AUDIO_VOLUME,
+  EXERCISES_BY_CATEGORY_MAP,
   CLIENT_ERROR_MESSAGE,
+  EXERCISE_CATEGORY,
   NOTIFICATION_PERMISSION,
   SETTINGS_EVENT,
   STORAGE_KEY_NAMESPACE,
 } from './utils/constants.js';
-import { isBool, isNum, toSentenceCase } from './utils/helpers.js';
+import {
+  isBool,
+  isNum,
+  isPlainObject,
+  toSentenceCase,
+} from './utils/helpers.js';
 
 import './components/app-top-bar.js';
 import './components/header.js';
 
 const AUDIO_SOUNDS = Object.freeze(Object.values(AUDIO_SOUND));
 const AUDIO_VOLUMES = Object.freeze(Object.values(AUDIO_VOLUME));
+const EXERCISE_CATEGORIES = Object.freeze(Object.values(EXERCISE_CATEGORY));
 
 const POMODORO_RESOURCE_LINKS = Object.freeze({
   WIKI: 'https://en.wikipedia.org/wiki/Pomodoro_Technique',
@@ -48,6 +56,7 @@ export class App extends LitElement {
     _enableNotificationsModalOpen: { type: Boolean, state: true },
     _faqModalOpen: { type: Boolean, state: true },
     _settingsModalOpen: { type: Boolean, state: true },
+    _activeCategoryTab: { type: String, state: true },
   };
 
   #router = new Router(this, [
@@ -89,6 +98,8 @@ export class App extends LitElement {
     this._faqModalOpen = false;
     /** @type {boolean} */
     this._settingsModalOpen = false;
+    /** @type {import("index.d.js").ExerciseCategory} */
+    this._activeCategoryTab = EXERCISE_CATEGORY.UPPER_BODY;
   }
 
   connectedCallback() {
@@ -263,17 +274,24 @@ export class App extends LitElement {
       showTimerInTitle,
       showMotivationalQuote,
       enableNotifications,
-      enableExerciseDisplay,
-      exercisesCount,
+      showExercises,
+      exercisesByCategory,
       exerciseReps,
       exerciseSets,
-      selectedExerciseCategories,
       pomodoroMinutes,
       shortBreakMinutes,
       longBreakMinutes,
       audioSound,
       audioVolume,
     } = this._settingsFormValues;
+    const activeCategoryExercises =
+      EXERCISES_BY_CATEGORY_MAP.get(
+        /** @type {import("index.d.js").ExerciseCategory} */ (
+          this._activeCategoryTab
+        )
+      ) ?? [];
+    const selectedCategoryExercises =
+      exercisesByCategory[this._activeCategoryTab] ?? [];
 
     return html`<div
       class="modal"
@@ -284,83 +302,52 @@ export class App extends LitElement {
         <h1>Settings</h1>
         <div>
           <form id="settingsForm" @submit=${this.#onSubmit}>
-            <h5>Exercise Category Filter</h5>
-            <label> Select allowed exercise categories (multi-select): </label>
-
-            <select
-              multiple
-              size="6"
-              name="selectedExerciseCategories"
-              @change=${this.#updateCategorySelection}
-            >
-              ${Object.values(EXERCISE_CATEGORY).map(
-                (category) => html`
-                  <option
-                    value=${category}
-                    ?selected=${selectedExerciseCategories.includes(category)}
-                  >
-                    ${toSentenceCase(category)}
-                  </option>
-                `
-              )}
-            </select>
-            <h2>Preferences</h2>
+            <h2>General</h2>
 
             <div class="checkbox-group">
               <label>
                 <input
                   type="checkbox"
-                  name="showTimerInTitle"
-                  .checked=${showTimerInTitle}
-                  @change=${this.#updateSettingsField}
+                  name="enableNotifications"
+                  .checked=${enableNotifications}
+                  @change=${this.#onInputChange}
                 />
-                Show timer in title
+                Enable desktop notifications
               </label>
 
               <label>
                 <input
                   type="checkbox"
-                  name="showMotivationalQuote"
-                  .checked=${showMotivationalQuote}
-                  @change=${this.#updateSettingsField}
+                  name="showTimerInTitle"
+                  .checked=${showTimerInTitle}
+                  @change=${this.#onInputChange}
                 />
-                Show motivational quote
+                Show timer in title
               </label>
 
               <label>
                 <input
                   type="checkbox"
-                  name="enableNotifications"
-                  .checked=${enableNotifications}
-                  @change=${this.#updateSettingsField}
+                  name="showMotivationalQuote"
+                  .checked=${showMotivationalQuote}
+                  @change=${this.#onInputChange}
                 />
-                Enable desktop notifications
+                Show motivational quote
               </label>
 
               <label>
                 <input
                   type="checkbox"
-                  name="enableExerciseDisplay"
-                  .checked=${enableExerciseDisplay}
-                  @change=${this.#updateSettingsField}
+                  name="showExercises"
+                  .checked=${showExercises}
+                  @change=${this.#onInputChange}
                 />
-                Enable exercise display after the timer ends
+                Show exercises after the timer ends
               </label>
             </div>
 
-            <h3>Exercises</h3>
+            <h2>Exercise</h2>
             <div class="field-group">
-              <label>
-                Exercises Count:
-                <input
-                  type="number"
-                  name="exercisesCount"
-                  min="1"
-                  .value=${String(exercisesCount)}
-                  @input=${this.#updateSettingsField}
-                />
-              </label>
-
               <label>
                 Exercise Reps:
                 <input
@@ -368,7 +355,7 @@ export class App extends LitElement {
                   name="exerciseReps"
                   min="1"
                   .value=${String(exerciseReps)}
-                  @input=${this.#updateSettingsField}
+                  @input=${this.#onInputChange}
                 />
               </label>
 
@@ -379,13 +366,56 @@ export class App extends LitElement {
                   name="exerciseSets"
                   min="1"
                   .value=${String(exerciseSets)}
-                  @input=${this.#updateSettingsField}
+                  @input=${this.#onInputChange}
                 />
               </label>
             </div>
 
+            <h3>Select Exercises By Category</h3>
+
+            <div class="tabs">
+              ${EXERCISE_CATEGORIES.map(
+                (category) => html`
+                  <button
+                    class="tab-item"
+                    data-category=${category}
+                    data-tab-active=${this._activeCategoryTab === category}
+                    @click=${this.#changeCategoryTab}
+                  >
+                    ${toSentenceCase(category)}
+                  </button>
+                `
+              )}
+            </div>
+
+            <div class="field-group select-group">
+              <label>
+                <select
+                  id="exerciseSelect"
+                  name="exercisesByCategory"
+                  multiple
+                  size=${activeCategoryExercises.length}
+                  @change=${this.#onSelectChange}
+                  key=${this._activeCategoryTab}
+                >
+                  ${activeCategoryExercises.map(
+                    (item) => html`
+                      <option
+                        data-selected=${selectedCategoryExercises.includes(
+                          item
+                        )}
+                        value=${item}
+                      >
+                        ${item}
+                      </option>
+                    `
+                  )}
+                </select>
+              </label>
+            </div>
+
             <div id="audioSection">
-              <h3>Audio</h3>
+              <h2>Audio</h2>
               <div class="tooltip tooltip-right">
                 <button
                   ?disabled=${audioVolume === AUDIO_VOLUME.MUTE}
@@ -399,13 +429,13 @@ export class App extends LitElement {
               </div>
             </div>
 
-            <h4>Sound</h4>
+            <h3>Sound</h3>
             <div class="field-group select-group">
               <label>
                 <select
                   size=${AUDIO_SOUNDS.length}
                   name="audioSound"
-                  @change=${this.#updateSettingsField}
+                  @change=${this.#onSelectChange}
                   .value=${audioSound}
                 >
                   ${AUDIO_SOUNDS.map(
@@ -419,13 +449,13 @@ export class App extends LitElement {
               </label>
             </div>
 
-            <h4>Volume</h4>
+            <h3>Volume</h3>
             <div class="field-group select-group">
               <label>
                 <select
                   size=${AUDIO_VOLUMES.length}
                   name="audioVolume"
-                  @change=${this.#updateSettingsField}
+                  @change=${this.#onSelectChange}
                   .value=${audioVolume}
                 >
                   ${AUDIO_VOLUMES.map(
@@ -448,7 +478,7 @@ export class App extends LitElement {
                   name="pomodoroMinutes"
                   min="1"
                   .value=${String(pomodoroMinutes)}
-                  @input=${this.#updateSettingsField}
+                  @input=${this.#onInputChange}
                 />
               </label>
 
@@ -459,7 +489,7 @@ export class App extends LitElement {
                   name="shortBreakMinutes"
                   min="1"
                   .value=${String(shortBreakMinutes)}
-                  @input=${this.#updateSettingsField}
+                  @input=${this.#onInputChange}
                 />
               </label>
 
@@ -470,7 +500,7 @@ export class App extends LitElement {
                   name="longBreakMinutes"
                   min="1"
                   .value=${String(longBreakMinutes)}
-                  @input=${this.#updateSettingsField}
+                  @input=${this.#onInputChange}
                 />
               </label>
             </div>
@@ -488,17 +518,14 @@ export class App extends LitElement {
     </div>`;
   }
 
-  #previewSound() {
-    const { audioSound, audioVolume } = this._settingsFormValues;
-    webAudioApiService.playSound(audioSound, audioVolume);
-  }
-
   /** @param {Event} event */
   #onSubmit(event) {
     event.preventDefault();
 
     for (const [key, value] of Object.entries(this._settingsFormValues)) {
-      if (!isNum(value) && !isBool(value)) {
+      if (key === 'exercisesByCategory' && isPlainObject(value)) {
+        continue;
+      } else if (!isNum(value) && !isBool(value)) {
         alert(CLIENT_ERROR_MESSAGE.INVALID_INPUTS);
         return;
       } else if (key !== 'audioVolume' && isNum(value) && Number(value) <= 0) {
@@ -522,7 +549,7 @@ export class App extends LitElement {
   /**
    * @param {InputEvent | Event} event
    */
-  #updateSettingsField(event) {
+  #onInputChange(event) {
     event.preventDefault();
     const { target } = event;
 
@@ -540,10 +567,37 @@ export class App extends LitElement {
           [name]: value,
         };
       }
-    } else if (target instanceof HTMLSelectElement) {
+    }
+  }
+
+  /** @param {Event} event */
+  #onSelectChange(event) {
+    event.preventDefault();
+    const { target } = event;
+
+    if (target instanceof HTMLSelectElement) {
       const { name, value } = target;
 
-      if (name === 'audioSound' || name === 'audioVolume') {
+      if (name === 'exercisesByCategory') {
+        const category = this._activeCategoryTab;
+        const exercisesInCategory =
+          EXERCISES_BY_CATEGORY_MAP.get(category) ?? [];
+        const { selectedOptions } = target;
+
+        const validSelections = Array.from(selectedOptions)
+          .map((option) => option.value)
+          .filter((option) => exercisesInCategory.includes(option));
+
+        if (validSelections.length) {
+          this._settingsFormValues = {
+            ...this._settingsFormValues,
+            [name]: {
+              ...this._settingsFormValues.exercisesByCategory,
+              [category]: validSelections,
+            },
+          };
+        }
+      } else if (name === 'audioSound' || name === 'audioVolume') {
         this._settingsFormValues = {
           ...this._settingsFormValues,
           [name]: Number(value),
@@ -552,22 +606,22 @@ export class App extends LitElement {
     }
   }
 
-  #updateCategorySelection(event) {
-    const options = event.target.options;
-    const selected = [];
+  /** @param {Event} event */
+  #changeCategoryTab(event) {
+    event.preventDefault();
+    const { target } = event;
 
-    for (const option of options) {
-      if (option.selected) {
-        selected.push(option.value);
-      }
+    if (target instanceof HTMLButtonElement) {
+      const category = /** @type {import("index.d.js").ExerciseCategory} */ (
+        target.dataset.category
+      );
+      this._activeCategoryTab = category;
     }
+  }
 
-    this._settingsFormValues = {
-      ...this._settingsFormValues,
-      selectedExerciseCategories: selected,
-    };
-  async #initAudio() {
-    await webAudioApiService.init();
+  #previewSound() {
+    const { audioSound, audioVolume } = this._settingsFormValues;
+    webAudioApiService.playSound(audioSound, audioVolume);
   }
 
   #closeEnableNotificationsModal() {
@@ -586,12 +640,17 @@ export class App extends LitElement {
     this._hasUserVisited = true;
   }
 
+  async #initAudio() {
+    await webAudioApiService.init();
+  }
+
   static styles = [
     buttonStyles,
     captionTextStyles,
     modalStyles,
     linkStyles,
     tooltipStyles,
+    tabStyles,
     css`
       :host {
         display: flex;
@@ -690,6 +749,14 @@ export class App extends LitElement {
         width: 100%;
       }
 
+      #exerciseSelect option[data-selected='true'] {
+        background-color: #464646;
+      }
+
+      #exerciseSelect option[data-selected='false'] {
+        background-color: #2b2a33;
+      }
+
       #audioSection {
         display: flex;
         gap: 0.5rem;
@@ -700,7 +767,7 @@ export class App extends LitElement {
         border-radius: 50%;
         border: 1px;
         font-size: 0.7rem;
-        padding: 0.3rem 0.5rem;
+        padding: 0.46rem 0.65rem;
       }
 
       #previewSound:hover {
diff --git a/src/index.d.js b/src/index.d.js
index 50a64b5..faf1187 100644
--- a/src/index.d.js
+++ b/src/index.d.js
@@ -10,6 +10,8 @@
 
 /** @typedef {[ExerciseCategory, readonly string[]]} ExerciseEntries */
 
+/** @typedef {Partial<Record<ExerciseCategory, string[]>>} ExerciseByCategory */
+
 /**
  * @typedef {Record<string, string>} Exercise
  * @property {string} category
@@ -21,10 +23,10 @@
  * @property {boolean} showTimerInTitle
  * @property {boolean} showMotivationalQuote
  * @property {boolean} enableNotifications
- * @property {boolean} enableExerciseDisplay
+ * @property {boolean} showExercises
+ * @property {ExerciseByCategory} exercisesByCategory
  * @property {number} exerciseReps
  * @property {number} exerciseSets
- * @property {number} exercisesCount
  * @property {number} pomodoroMinutes
  * @property {number} shortBreakMinutes
  * @property {number} longBreakMinutes
diff --git a/src/pages/home.js b/src/pages/home.js
index 5429b44..43b109a 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -4,7 +4,6 @@ import { notificationApiService } from '../services/notification-api.service.js'
 import { webAudioApiService } from '../services/web-audio-api.service.js';
 import { buttonStyles } from '../shared/styles/buttonStyles.js';
 import { checkboxStyles } from '../shared/styles/checkboxStyles.js';
-import ExercisesStore from '../stores/exercises.js';
 import { DEFAULT_SETTINGS, settingsStore } from '../stores/settings.js';
 import {
   AUDIO_VOLUME,
@@ -212,12 +211,8 @@ export class HomePage extends LitElement {
   }
 
   render() {
-    const {
-      enableExerciseDisplay,
-      exerciseReps,
-      exerciseSets,
-      showMotivationalQuote,
-    } = this._settings;
+    const { showExercises, exerciseReps, exerciseSets, showMotivationalQuote } =
+      this._settings;
 
     return html` <div class="container">
       <section id="pomodoroModes">
@@ -257,7 +252,7 @@ export class HomePage extends LitElement {
             <h2 id="quote">${this._motivationalQuote}</h2>
           </section>`
         : nothing}
-      ${this._showExercises && enableExerciseDisplay
+      ${this._showExercises && showExercises
         ? html`<section id="exercises">
             <div class="exercise-container">
               <h2>Exercises</h2>
@@ -447,7 +442,6 @@ export class HomePage extends LitElement {
   #complete() {
     const {
       enableNotifications,
-      exercisesCount,
       showMotivationalQuote,
       audioSound,
       audioVolume,
@@ -475,10 +469,8 @@ export class HomePage extends LitElement {
 
     if (isPomodoroModeSelected) {
       this._showExercises = true;
-      this._exercises = ExercisesStore.getRandomExercises(
-        exercisesCount,
-        this._settings.selectedExerciseCategories
-      );
+      // TODO: Exercises based on settings form selections
+      this._exercises = [{ category: 'fullBody', name: 'Jumping jacks' }];
     }
   }
 
diff --git a/src/shared/styles/tabStyles.js b/src/shared/styles/tabStyles.js
new file mode 100644
index 0000000..6655705
--- /dev/null
+++ b/src/shared/styles/tabStyles.js
@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+const tabStyles = css`
+  .tabs {
+    display: flex;
+    width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .tabs button.tab-item {
+    flex: 1 1 0;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border: none;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    background-color: #1f1f27;
+    color: #c0c0c8;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+    border-radius: 0;
+    border-right: 0.0625rem solid #2c2c35;
+  }
+
+  .tabs button.tab-item:last-child {
+    border-right: none;
+  }
+
+  .tabs button.tab-item[data-tab-active='true'] {
+    font-weight: 500;
+    background-color: #3b3b48;
+    color: #ffffff;
+  }
+
+  .tabs button.tab-item:hover {
+    background-color: #353540;
+  }
+`;
+
+export { tabStyles };
diff --git a/src/stores/exercises.js b/src/stores/exercises.js
deleted file mode 100644
index eac68b9..0000000
--- a/src/stores/exercises.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import { isNum } from '../utils/helpers.js';
-
-import { DEFAULT_SETTINGS } from './settings.js';
-
-/** @type {Readonly<Record<string, import("../index.d.js").ExerciseCategory>>} */
-export const EXERCISE_CATEGORY = Object.freeze({
-  UPPER_BODY: 'upperBody',
-  LOWER_BODY: 'lowerBody',
-  CORE: 'core',
-  CARDIO: 'cardio',
-  MOBILITY: 'mobility',
-  BALANCE: 'balance',
-  FULL_BODY: 'fullBody',
-  STATIC_STRENGTH: 'staticStrength',
-  YOGA: 'yoga',
-});
-
-/** @type {readonly import("../index.d.js").ExerciseEntries[]} */
-const EXERCISES_ENTRIES = Object.freeze([
-  [
-    EXERCISE_CATEGORY.UPPER_BODY,
-    Object.freeze([
-      'Push-ups',
-      'Wide push-ups',
-      'Diamond push-ups',
-      'Decline push-ups',
-      'Incline push-ups',
-      'Shoulder taps',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.LOWER_BODY,
-    Object.freeze([
-      'Squats',
-      'Lunges',
-      'Reverse lunges',
-      'Side lunges',
-      'Curtsy lunges',
-      'Bulgarian split squat',
-      'Calf raises',
-      'Wall sit',
-      'Hip thrusts',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.CORE,
-    Object.freeze([
-      'Sit-ups',
-      'Crunches',
-      'Bicycle crunches',
-      'Leg raises',
-      'Flutter kicks',
-      'Scissor kicks',
-      'Russian twists',
-      'Plank',
-      'Side plank',
-      'Mountain climbers',
-      'V-ups',
-      'Supermans',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.CARDIO,
-    Object.freeze([
-      'Jumping jacks',
-      'Burpees',
-      'Standing knee drives',
-      'Invisible jump rope',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.MOBILITY,
-    Object.freeze([
-      'Hip flexor stretch',
-      'Hamstring stretch',
-      'Quad stretch',
-      'Ankle circles',
-      'Arm circles',
-      'Torso twists',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.BALANCE,
-    Object.freeze([
-      'Single-leg balance hold',
-      'Single-leg toe touch',
-      'Heel-to-toe walk',
-      'Single-leg calf raise',
-    ]),
-  ],
-  [
-    EXERCISE_CATEGORY.FULL_BODY,
-    Object.freeze(['Burpees', 'Mountain climbers', 'Jumping jacks']),
-  ],
-  [
-    EXERCISE_CATEGORY.STATIC_STRENGTH,
-    Object.freeze(['Static squat hold', 'Static plank hold']),
-  ],
-  [
-    EXERCISE_CATEGORY.YOGA,
-    Object.freeze([
-      'Warrior pose',
-      'Chair pose',
-      'Tree pose',
-      'Boat pose',
-      'Bridge pose',
-      'Crescent lunge hold',
-    ]),
-  ],
-]);
-
-class ExercisesStore {
-  /**
-   * @param {number} exercisesCount
-   * @param {string[]} selectedCategories
-   * @returns {import("../index.d.js").Exercise[]}
-   */
-  static getRandomExercises(exercisesCount, selectedCategories = []) {
-    const count = isNum(exercisesCount)
-      ? exercisesCount
-      : DEFAULT_SETTINGS.exercisesCount;
-
-    const allowedCategories =
-      Array.isArray(selectedCategories) && selectedCategories.length > 0
-        ? selectedCategories
-        : null;
-
-    const filteredEntries = allowedCategories
-      ? EXERCISES_ENTRIES.filter(([category]) =>
-          allowedCategories.includes(category)
-        )
-      : EXERCISES_ENTRIES;
-
-    const result = [];
-    const pairSet = new Set();
-
-    const maxPairs = filteredEntries.reduce(
-      (sum, [, list]) => sum + list.length,
-      0
-    );
-
-    const limit = Math.min(count, maxPairs);
-
-    while (result.length < limit) {
-      const [randomCategory, exerciseList] =
-        filteredEntries[Math.floor(Math.random() * filteredEntries.length)];
-
-      const randomExercise =
-        exerciseList[Math.floor(Math.random() * exerciseList.length)];
-
-      const key = `${randomCategory}:${randomExercise}`;
-
-      if (pairSet.has(key)) continue;
-
-      pairSet.add(key);
-
-      result.push({
-        category: randomCategory,
-        name: randomExercise,
-      });
-    }
-
-    return result;
-  }
-}
-
-export default ExercisesStore;
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 46e09c3..8c50b40 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -4,20 +4,19 @@ import {
   AUDIO_VOLUME,
   CLIENT_ERROR_MESSAGE,
   DEFAULT_POMODORO_TIMES,
+  EXERCISES_BY_CATEGORY_MAP,
   STORAGE_KEY_NAMESPACE,
 } from '../utils/constants.js';
-import { isBool, isNum } from '../utils/helpers.js';
+import { isBool, isNum, isPlainObject } from '../utils/helpers.js';
+
+/** @typedef {boolean | number | import('index.d.js').ExerciseByCategory} SettingsStorageValue */
 
 /** @type {import('index.d.js').Settings} */
 export const DEFAULT_SETTINGS = Object.freeze({
-  enableExerciseDisplay: true,
+  showExercises: true,
   exerciseReps: 5,
   exerciseSets: 1,
-  exercisesCount: 1,
-
-  //NEW: multi-select category filter (empty = allow all)
-  selectedExerciseCategories: [],
-
+  exercisesByCategory: {},
   enableNotifications: false,
   showTimerInTitle: false,
   showMotivationalQuote: true,
@@ -46,32 +45,56 @@ class SettingsStore extends EventTarget {
     for (const [key, defaultValue] of settingsMap.entries()) {
       const storedValue = this.#settingsStorage.get(key);
 
-      //FIXED: now supports arrays (for multi-select)
-      const value =
-      let value = /** @type {boolean | number} */ (
+      let value = /** @type {SettingsStorageValue} */ (
         storedValue === null
           ? defaultValue
-          : Array.isArray(defaultValue) && Array.isArray(storedValue)
+          : (isBool(defaultValue) && isBool(storedValue)) ||
+              (isNum(defaultValue) && isNum(storedValue)) ||
+              (isPlainObject(defaultValue) && isPlainObject(storedValue))
             ? storedValue
-            : (isBool(defaultValue) && isBool(storedValue)) ||
-                (isNum(defaultValue) && isNum(storedValue))
-              ? storedValue
-              : defaultValue;
+            : defaultValue
+      );
 
-      if (key === 'audioSound' && typeof value === 'number') {
+      // Additional checks for specific settings
+      if (key === 'audioSound') {
         const matchingAudioSound = Object.values(AUDIO_SOUND).find(
           ({ ID }) => ID === value
         );
         if (matchingAudioSound === undefined) {
           value = defaultValue;
         }
-      } else if (key === 'audioVolume' && typeof value === 'number') {
+      } else if (key === 'audioVolume') {
         const matchingAudioVolume = Object.values(AUDIO_VOLUME).find(
           (volume) => volume === value
         );
         if (matchingAudioVolume === undefined) {
           value = defaultValue;
         }
+      } else if (key === 'exercises' && Object.keys(value).length > 0) {
+        const exercisesByCategoryValue =
+          /** @type {import('index.d.js').ExerciseByCategory} */ (value);
+
+        value = Object.fromEntries(
+          Object.entries(exercisesByCategoryValue)
+            .filter(
+              ([category, exercises]) =>
+                EXERCISES_BY_CATEGORY_MAP.has(
+                  /** @type {import('index.d.js').ExerciseCategory} */ (
+                    category
+                  )
+                ) && Array.isArray(exercises)
+            )
+            .map(([category, exercises]) => [
+              category,
+              exercises.filter((exercise) =>
+                EXERCISES_BY_CATEGORY_MAP.get(
+                  /** @type {import('index.d.js').ExerciseCategory} */ (
+                    category
+                  )
+                )?.includes(exercise)
+              ),
+            ])
+        );
       }
 
       settingsMap.set(key, value);
@@ -96,13 +119,9 @@ class SettingsStore extends EventTarget {
     for (const [key, defaultValue] of Object.entries(DEFAULT_SETTINGS)) {
       const val = valueMap.has(key) ? valueMap.get(key) : defaultValue;
 
-      //FIXED: now supports arrays (for multi-select)
-      const newValue =
-        Array.isArray(defaultValue) && Array.isArray(val)
-          ? val
-          : isBool(val) || isNum(val)
-            ? val
-            : defaultValue;
+      const newValue = /** @type {SettingsStorageValue} */ (
+        isBool(val) || isNum(val) || isPlainObject(val) ? val : defaultValue
+      );
 
       settingsMap.set(key, newValue);
       this.#settingsStorage.set(key, newValue);
diff --git a/src/utils/constants.js b/src/utils/constants.js
index ce4c76c..b64cb35 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -44,6 +44,115 @@ const CLIENT_ERROR_MESSAGE = Object.freeze({
   PRELOAD_AUDIO_FAILED: 'Failed to load audio/sound.',
 });
 
+/** @type {Readonly<Record<string, import("../index.d.js").ExerciseCategory>>} */
+const EXERCISE_CATEGORY = Object.freeze({
+  UPPER_BODY: 'upperBody',
+  LOWER_BODY: 'lowerBody',
+  CORE: 'core',
+  CARDIO: 'cardio',
+  MOBILITY: 'mobility',
+  BALANCE: 'balance',
+  FULL_BODY: 'fullBody',
+  STATIC_STRENGTH: 'staticStrength',
+  YOGA: 'yoga',
+});
+
+/** @type {readonly import("../index.d.js").ExerciseEntries[]} */
+const EXERCISES_ENTRIES = Object.freeze([
+  [
+    EXERCISE_CATEGORY.UPPER_BODY,
+    Object.freeze([
+      'Push-ups',
+      'Wide push-ups',
+      'Diamond push-ups',
+      'Decline push-ups',
+      'Incline push-ups',
+      'Shoulder taps',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.LOWER_BODY,
+    Object.freeze([
+      'Squats',
+      'Lunges',
+      'Reverse lunges',
+      'Side lunges',
+      'Curtsy lunges',
+      'Bulgarian split squat',
+      'Calf raises',
+      'Wall sit',
+      'Hip thrusts',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.CORE,
+    Object.freeze([
+      'Sit-ups',
+      'Crunches',
+      'Bicycle crunches',
+      'Leg raises',
+      'Flutter kicks',
+      'Scissor kicks',
+      'Russian twists',
+      'Plank',
+      'Side plank',
+      'Mountain climbers',
+      'V-ups',
+      'Supermans',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.CARDIO,
+    Object.freeze([
+      'Jumping jacks',
+      'Burpees',
+      'Standing knee drives',
+      'Invisible jump rope',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.MOBILITY,
+    Object.freeze([
+      'Hip flexor stretch',
+      'Hamstring stretch',
+      'Quad stretch',
+      'Ankle circles',
+      'Arm circles',
+      'Torso twists',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.BALANCE,
+    Object.freeze([
+      'Single-leg balance hold',
+      'Single-leg toe touch',
+      'Heel-to-toe walk',
+      'Single-leg calf raise',
+    ]),
+  ],
+  [
+    EXERCISE_CATEGORY.FULL_BODY,
+    Object.freeze(['Burpees', 'Mountain climbers', 'Jumping jacks']),
+  ],
+  [
+    EXERCISE_CATEGORY.STATIC_STRENGTH,
+    Object.freeze(['Static squat hold', 'Static plank hold']),
+  ],
+  [
+    EXERCISE_CATEGORY.YOGA,
+    Object.freeze([
+      'Warrior pose',
+      'Chair pose',
+      'Tree pose',
+      'Boat pose',
+      'Bridge pose',
+      'Crescent lunge hold',
+    ]),
+  ],
+]);
+
+const EXERCISES_BY_CATEGORY_MAP = Object.freeze(new Map(EXERCISES_ENTRIES));
+
 const POMODORO_MODE = Object.freeze({
   POMODORO: 'pomodoroMinutes',
   SHORT_BREAK: 'shortBreakMinutes',
@@ -83,6 +192,9 @@ export {
   AUDIO_SOUND,
   AUDIO_VOLUME,
   CLIENT_ERROR_MESSAGE,
+  EXERCISES_BY_CATEGORY_MAP,
+  EXERCISE_CATEGORY,
+  EXERCISES_ENTRIES,
   DEFAULT_POMODORO_TIMES,
   POMODORO_MODE,
   POMODORO_TIMER_ACTION,
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
index 51f8a99..fdd160a 100644
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@@ -23,6 +23,18 @@ function isNum(input) {
   return false;
 }
 
+/**
+ * @param {unknown} input
+ * @returns  {boolean}
+ */
+function isPlainObject(input) {
+  return (
+    typeof input === 'object' &&
+    input !== null &&
+    Object.prototype.toString.call(input) === '[object Object]'
+  );
+}
+
 /**
  *  @param {unknown} input
  *  @returns {string}
@@ -58,4 +70,4 @@ function toTitleCase(input) {
     .join(' ');
 }
 
-export { isBool, isNum, toTitleCase, toSentenceCase };
+export { isBool, isNum, isPlainObject, toTitleCase, toSentenceCase };