diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 19c4ba94..8de21c71 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,29 +1,50 @@
 <script setup lang="ts">
-import ThemeCard from "@/components/ThemeCard.vue";
-import { ref, onMounted, watch } from "vue";
-import { useI18n } from "vue-i18n";
+    import ThemeCard from "@/components/ThemeCard.vue";
+    import { ref, onMounted, watch } from "vue";
+    import { useI18n } from "vue-i18n";
+    import {THEMESITEMS} from "@/utils/constants.ts";
 
-const { locale } = useI18n();
-const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+    // Receive the selectedTheme from the parent component
+    const props = defineProps<{ selectedTheme: string }>();
 
-// Fetch themes based on the current language
-const fetchThemes = async () => {
-    try {
-        const language = localStorage.getItem("user-lang") || locale.value;
-        const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
-        cards.value = await response.json();
-        console.log(cards.value);
-    } catch (error) {
-        console.error("Error fetching themes:", error);
+    const {locale} = useI18n();
+
+    const allCards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+    const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+
+    // Fetch all themes based on the current language
+    async function fetchThemes() {
+        try {
+            // Get the current selected language
+            const language = locale.value;
+            const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
+
+            // Update the cards value with the fetched themes
+            allCards.value = await response.json();
+            cards.value = allCards.value;
+            //console.log(allCards.value);
+        } catch (error) {
+            console.error("Error fetching themes:", error);
+        }
     }
-};
 
-onMounted(fetchThemes);
+    // Fetch on mount
+    onMounted(fetchThemes);
+
+    // Re-fetch themes when language changes
+    watch(locale, () => {
+        fetchThemes();
+    });
+
+    // Watch for selectedTheme change and filter themes
+    watch(() => props.selectedTheme, (newTheme) => {
+        if (newTheme && newTheme !== "all") {
+            cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key));
+        } else {
+            cards.value = allCards.value;
+        }
+    });
 
-// Refetch themes when language changes
-watch(locale, () => {
-    fetchThemes();
-});
 
 </script>
 
diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index 19ff92ee..8cea7d80 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -10,26 +10,24 @@
     "themes": "Themen",
     "choose-theme": "Wähle ein thema",
     "choose-age": "Alter auswählen",
-    "themes-options": {
-        "all-themes": "Alle themen",
-        "culture": "culture",
-        "electricity-and-mechanics": "Electricity and mechanics",
-        "nature-and-climate": "Nature and climate",
-        "agriculture": "agriculture",
+    "theme-options": {
+        "all": "Alle themen",
+        "culture": "Kultur",
+        "electricity-and-mechanics": "Elektrizität und Mechanik",
+        "nature-and-climate": "Natur und Klima",
+        "agriculture": "Landwirtschaft",
         "society": "society",
-        "math": "math",
-        "technology": "technology",
-        "algorithms": "algorithms"
+        "math": "Mathematik",
+        "technology": "Technologie",
+        "algorithms": "Algorithmisches Denken"
     },
     "age-options": {
-        "all-ages": "Alle altersgruppen",
+        "all": "Alle altersgruppen",
         "primary-school": "Grundschule",
         "lower-secondary": "12-14 jahre alt",
         "upper-secondary": "14-16 jahre alt",
         "high-school": "16-18 jahre alt",
         "older": "18 und älter"
     },
-    "basics-ai": {
-        "title": "Grundlegende Prinzipien der AI"
-    }
+    "read-more": "Mehr lesen"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 3f0bf04b..6095a79f 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -11,7 +11,7 @@
     "choose-theme": "Select a theme",
     "choose-age": "Select age",
     "theme-options": {
-        "all-themes": "All themes",
+        "all": "All themes",
         "culture": "culture",
         "electricity-and-mechanics": "Electricity and mechanics",
         "nature-and-climate": "Nature and climate",
@@ -22,16 +22,12 @@
         "algorithms": "Algorithms"
     },
     "age-options": {
-        "all-ages": "All ages",
+        "all": "All ages",
         "primary-school": "Primary school",
         "lower-secondary": "12-14 years old",
         "upper-secondary": "14-16 years old",
         "high-school": "16-18 years old",
         "older": "18 and older"
     },
-    "read-more": "read-more",
-    "basics-ai": {
-        "title": "Basic principles of AI",
-        "description": "Under this teaching theme, we combine several activities that cover the basics of artificial intelligence (AI). Students learn what AI is, how it works and how it can be applied in different domains."
-    }
+    "read-more": "Read more"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 82f66d2c..419aec0d 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -11,7 +11,7 @@
     "choose-theme": "Choisis un thème",
     "choose-age": "Choisis un âge",
     "theme-options": {
-        "all-themes": "Tous les thèmes",
+        "all": "Tous les thèmes",
         "culture": "Culture",
         "electricity-and-mechanics": "Electricité et méchanique",
         "nature-and-climate": "Nature et climat",
@@ -22,11 +22,12 @@
         "algorithms": "Algorithmes"
     },
     "age-options": {
-        "all-ages": "Tous les âges",
+        "all": "Tous les âges",
         "primary-school": "Ecole primaire",
         "lower-secondary": "12-14 ans",
         "upper-secondary": "14-16 ans",
         "high-school": "16-18 ans",
         "older": "18 et plus"
-    }
+    },
+    "read-more": "En savoir plus"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 3833099f..44621c53 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -11,7 +11,7 @@
     "choose-theme": "Kies een thema",
     "choose-age": "Kies een leeftijd",
     "theme-options": {
-        "all-themes": "Alle thema's",
+        "all": "Alle thema's",
         "culture": "Taal en kunst",
         "electricity-and-mechanics": "Elektriciteit en mechanica",
         "nature-and-climate": "Natuur en klimaat",
@@ -22,11 +22,12 @@
         "algorithms": "Algoritmes"
     },
     "age-options": {
-        "all-ages": "Alle leeftijden",
+        "all": "Alle leeftijden",
         "primary": "Lagere school",
         "lower-secondary": "1e graad secundair",
         "upper-secondary": "2e graad secundair",
         "high-school": "3e graad secundair",
         "older": "Hoger onderwijs"
-    }
+    },
+    "read-more": "Lees meer"
 }
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 32ccb76f..f6129671 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -1,22 +1,27 @@
-import { ref } from "vue";
+export const THEMES_KEYS = [
+    "kiks", "art", "socialrobot", "agriculture", "wegostem",
+    "computational_thinking", "math_with_python", "python_programming",
+    "stem", "care", "chatbot", "physical_computing", "algorithms", "basics_ai"
+];
 
-export const THEMESITEMS = ref([
-    "all-themes",
-    "culture",
-    "electricity-and-mechanics",
-    "nature-and-climate",
-    "agriculture",
-    "society",
-    "math",
-    "technology",
-    "algorithms",
-]);
+export const THEMESITEMS: Record<string, string[]> = {
+    "all": THEMES_KEYS,
+    "culture": ["art", "wegostem", "chatbot"],
+    "electricity-and-mechanics": ["socialrobot", "wegostem", "stem", "physical_computing"],
+    "nature-and-climate": ["kiks", "agriculture"],
+    "agriculture": ["agriculture"],
+    "society": ["kiks", "socialrobot", "care", "chatbot"],
+    "math": ["kiks", "math_with_python", "python_programming", "stem", "care", "basics_ai"],
+    "technology": ["socialrobot", "wegostem", "computational_thinking", "stem", "physical_computing", "basics_ai"],
+    "algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
+};
 
-export const AGEITEMS = ref([
-    "all-ages",
+
+export const AGEITEMS = [
+    "all",
     "primary-school",
     "lower-secondary",
     "upper-secondary",
     "high-school",
     "older",
-]);
+];
diff --git a/frontend/src/views/homepage/UserHomePage.vue b/frontend/src/views/homepage/UserHomePage.vue
index e90f0262..7acffb11 100644
--- a/frontend/src/views/homepage/UserHomePage.vue
+++ b/frontend/src/views/homepage/UserHomePage.vue
@@ -1,22 +1,19 @@
 <script setup lang="ts">
-    import {ref, watch} from "vue";
+    import { ref, watch } from "vue";
     import { useI18n } from "vue-i18n";
-    import {AGEITEMS, THEMESITEMS} from "@/utils/constants.ts";
+    import { THEMESITEMS, AGEITEMS } from "@/utils/constants.ts";
     import BrowseThemes from "@/components/BrowseThemes.vue";
 
     const { t, locale } = useI18n();
 
+    const selectedThemeKey = ref<string | null>(null);
+    const selectedAgeKey = ref<string | null>(null);
 
-    const selectedTheme = ref(t('choose-theme'));
-    const selectedAge = ref(t('choose-age'));
-
-    // Watch for language change and update the labels accordingly
+    // Reset selection when language changes
     watch(locale, () => {
-        // Make sure that when the language is changed the
-        selectedTheme.value = t('choose-theme');
-        selectedAge.value = t('choose-age');
+        selectedThemeKey.value = null;
+        selectedAgeKey.value = null;
     });
-
 </script>
 
 <template>
@@ -24,19 +21,27 @@
         <h1 class="title">{{ t("themes") }}</h1>
         <v-container class="dropdowns">
             <v-select class="v-select"
-                :label="t('choose-theme')"
-                      :items="THEMESITEMS.map(theme => t(`theme-options.${theme}`))"
-                      v-model="selectedTheme"
+                      :label="t('choose-theme')"
+                      :items="Object.keys(THEMESITEMS).map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
+                      v-model="selectedThemeKey"
+                      item-title="title"
+                      item-value="value"
                       variant="outlined"
-            ></v-select>
-            <v-select class="v-select"
+            />
+
+
+            <v-select
+                class="v-select"
                 :label="t('choose-age')"
-                      :items="AGEITEMS.map(age => t(`age-options.${age}`))"
-                      v-model="selectedAge"
-                    variant="outlined"
+                :items="AGEITEMS.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))"
+                v-model="selectedAgeKey"
+                item-title="label"
+                item-value="key"
+                variant="outlined"
             ></v-select>
         </v-container>
-        <BrowseThemes/>
+
+        <BrowseThemes :selectedTheme="selectedThemeKey ?? ''" />
     </div>
 </template>