diff --git a/composables/useRecipeRandom.ts b/composables/useRecipeRandom.ts
new file mode 100644
index 0000000..6b4e2ce
--- /dev/null
+++ b/composables/useRecipeRandom.ts
@@ -0,0 +1,4 @@
+export default function useRecipeRandom() {
+  const { $client } = useNuxtApp();
+  return $client.recipeRandom.useQuery();
+}
diff --git a/pages/[id].vue b/pages/[id].vue
index b3866a1..8cf18eb 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -15,10 +15,13 @@ useHead({
 const { params } = useRoute();
 const routeParam = params.id;
 
-const id =
-  typeof routeParam === "string" ? Number(routeParam) : Number(routeParam[0]);
+const id = typeof routeParam === "string" ? routeParam : routeParam[0];
 
-const { data: recipe, status, error } = await useRecipeById(id);
+const {
+  data: recipe,
+  status,
+  error,
+} = id === "random" ? await useRecipeRandom() : await useRecipeById(Number(id));
 
 if (error.value) {
   let statusCode = 400;
diff --git a/pages/random.vue b/pages/random.vue
deleted file mode 100644
index 46607ef..0000000
--- a/pages/random.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const {
-  data: recipe,
-  pending,
-  error,
-} = await useFetch("/api/recipes", { lazy: true });
-</script>
-
-<template>
-  <div v-if="pending">Loading</div>
-  <div v-else-if="error">Failed: {{ error }}</div>
-  <section v-else>
-    <Recipe :recipe="recipe" />
-  </section>
-</template>
diff --git a/server/api/recipes.get.ts b/server/api/recipes.get.ts
deleted file mode 100644
index fb80e2d..0000000
--- a/server/api/recipes.get.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { parseRecipeData } from "~/utils/recipes";
-import type { Meal } from "~/types/recipe";
-
-export default defineEventHandler(async (_event) => {
-  const { apiUrl } = useRuntimeConfig();
-
-  const data = await $fetch<{ meals: Meal[] }>(
-    new URL("random.php", apiUrl).toString(),
-  );
-
-  const recipes = parseRecipeData(data);
-  return recipes[0];
-});
diff --git a/server/trpc/routers/recipes.ts b/server/trpc/routers/recipes.ts
index 0418fab..91a0070 100644
--- a/server/trpc/routers/recipes.ts
+++ b/server/trpc/routers/recipes.ts
@@ -29,4 +29,17 @@ export const recipeRouter = router({
       const recipes = parseRecipeData(data);
       return recipes[0];
     }),
+  recipeRandom: publicProcedure.query(async () => {
+    const data = await $fetch<{ meals: Meal[] }>(
+      new URL("random.php", apiUrl).toString(),
+    );
+    if (!data?.meals) {
+      throw createError({
+        statusCode: 500,
+      });
+    }
+
+    const recipes = parseRecipeData(data);
+    return recipes[0];
+  }),
 });