diff --git a/frontend/config.ts b/frontend/config.ts
new file mode 100644
index 00000000..656687fd
--- /dev/null
+++ b/frontend/config.ts
@@ -0,0 +1 @@
+export const API_BASE = "http://localhost:3000/api";
diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 8c1a7dde..ac67f42e 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -3,6 +3,7 @@
     import { ref, onMounted, watch } from "vue";
     import { useI18n } from "vue-i18n";
     import {AGE_TO_THEMES, THEMESITEMS} from "@/utils/constants.ts";
+    import {getAllThemes} from "@/controller/themes.ts";
 
     // Receive the selectedTheme and selectedAge from the parent component
     const props = defineProps({
@@ -26,10 +27,9 @@
         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();
+            allCards.value = await getAllThemes(language);
             cards.value = allCards.value;
         } catch (error) {
             console.error("Error fetching themes:", error);
diff --git a/frontend/src/controller/fetch.ts b/frontend/src/controller/fetch.ts
new file mode 100644
index 00000000..09e9350b
--- /dev/null
+++ b/frontend/src/controller/fetch.ts
@@ -0,0 +1,20 @@
+export const fetchJson = async <T = any>(url: string, init?: RequestInit): Promise<T> => {
+    const response = await fetch(url, init);
+
+    if (!response.ok) {
+        let errorMessage = `Error ${response.status} ${response.statusText}`;
+
+        try {
+            const errorData = await response.json();
+            if (errorData?.error) {
+                errorMessage = errorData.error;
+            }
+        } catch {
+            // No valid JSON or error property
+        }
+
+        throw new Error(errorMessage);
+    }
+
+    return await response.json();
+};
diff --git a/frontend/src/controller/themes.ts b/frontend/src/controller/themes.ts
new file mode 100644
index 00000000..31e67446
--- /dev/null
+++ b/frontend/src/controller/themes.ts
@@ -0,0 +1,14 @@
+import {fetchJson} from "@/controller/fetch.ts";
+import {API_BASE} from "../../config.ts";
+
+export const getAllThemes = async (language: string | null = null) => {
+    const url = language
+        ? `${API_BASE}/theme?language=${encodeURIComponent(language)}`
+        : `${API_BASE}/theme`;
+    return await fetchJson(url);
+};
+
+export const getHruidsByTheme = async (theme: string) => {
+    const url = `${API_BASE}/theme/${encodeURIComponent(theme)}`;
+    return await fetchJson(url);
+};