diff --git a/app/Http/Controllers/DashboardAdminRandomGeneratorController.php b/app/Http/Controllers/DashboardAdminRandomGeneratorController.php
index 39e7e8a1..618541a7 100644
--- a/app/Http/Controllers/DashboardAdminRandomGeneratorController.php
+++ b/app/Http/Controllers/DashboardAdminRandomGeneratorController.php
@@ -82,4 +82,24 @@ public function indexExecuteSubmit(): JsonResponse
             'success' => true,
         ]);
     }
+
+    /*
+     * Display the dashboard admin random generator display page
+    */
+    public function display(): Response
+    {
+        // get all users except tutors and admins
+        $users = User::doesntHave('roles')->with('course')->get()->map(function ($user) {
+            $user->avatarUrl = $user->avatarUrl();
+
+            return $user;
+        });
+
+        // shuffle the users
+        $users = $users->shuffle();
+
+        return Inertia::render('Dashboard/Admin/RandomGenerator/Display', [
+            'users' => $users,
+        ]);
+    }
 }
diff --git a/public/images/random-generator/background/comic-blue.jpg b/public/images/random-generator/background/comic-blue.jpg
new file mode 100644
index 00000000..0e18c142
Binary files /dev/null and b/public/images/random-generator/background/comic-blue.jpg differ
diff --git a/public/images/random-generator/background/comic-yellow.jpg b/public/images/random-generator/background/comic-yellow.jpg
new file mode 100644
index 00000000..d62e5844
Binary files /dev/null and b/public/images/random-generator/background/comic-yellow.jpg differ
diff --git a/public/images/random-generator/gifs/cat.gif b/public/images/random-generator/gifs/cat.gif
new file mode 100644
index 00000000..16423b83
Binary files /dev/null and b/public/images/random-generator/gifs/cat.gif differ
diff --git a/public/images/random-generator/gifs/trumpet.gif b/public/images/random-generator/gifs/trumpet.gif
new file mode 100644
index 00000000..b344ec73
Binary files /dev/null and b/public/images/random-generator/gifs/trumpet.gif differ
diff --git a/public/sounds/random-generator/airhorn.mp3 b/public/sounds/random-generator/airhorn.mp3
new file mode 100644
index 00000000..94bd241a
Binary files /dev/null and b/public/sounds/random-generator/airhorn.mp3 differ
diff --git a/public/sounds/random-generator/rise.mp3 b/public/sounds/random-generator/rise.mp3
new file mode 100644
index 00000000..5b0d340e
Binary files /dev/null and b/public/sounds/random-generator/rise.mp3 differ
diff --git a/public/sounds/random-generator/running.mp3 b/public/sounds/random-generator/running.mp3
new file mode 100644
index 00000000..1f384770
Binary files /dev/null and b/public/sounds/random-generator/running.mp3 differ
diff --git a/resources/js/components/random/generator/user/AvatarCard.vue b/resources/js/components/random/generator/user/AvatarCard.vue
new file mode 100644
index 00000000..e409a291
--- /dev/null
+++ b/resources/js/components/random/generator/user/AvatarCard.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="flex h-fit w-[30rem] items-center justify-center border-[16px] border-white bg-[url('/images/random-generator/background/comic-blue.jpg')] bg-cover bg-center"
+  >
+    <img v-if="props.src" :src="props.src" class="h-fit" />
+    <div
+      v-else
+      class="flex h-[30rem] transform items-center justify-center text-center font-eighty-miles text-8xl text-white"
+    >
+      <span>{{ props.firstname }} {{ props.lastname }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  src: {
+    type: String,
+    required: false,
+  },
+  firstname: {
+    type: String,
+    required: true,
+  },
+  lastname: {
+    type: String,
+    required: true,
+  },
+});
+</script>
diff --git a/resources/js/layouts/RandomGeneratorLayout.vue b/resources/js/layouts/RandomGeneratorLayout.vue
new file mode 100644
index 00000000..dc1ddb9a
--- /dev/null
+++ b/resources/js/layouts/RandomGeneratorLayout.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="flex h-full flex-col bg-slate-950">
+    <div class="flex-grow">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/resources/js/pages/Dashboard/Admin/RandomGenerator/Display.vue b/resources/js/pages/Dashboard/Admin/RandomGenerator/Display.vue
new file mode 100644
index 00000000..9edb2850
--- /dev/null
+++ b/resources/js/pages/Dashboard/Admin/RandomGenerator/Display.vue
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div
+      class="h-screen bg-[url('/images/random-generator/background/comic-yellow.jpg')] bg-cover"
+    >
+      <div v-if="randomGeneratorState.state === 'setup'" class="flex h-screen">
+        <div
+          class="m-auto rounded-full bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text font-eighty-miles text-[15rem] text-transparent"
+        >
+          ZuFHallsgenerator
+        </div>
+      </div>
+      <div
+        v-if="randomGeneratorState.state === 'idle'"
+        class="flex h-screen w-screen flex-col"
+      ></div>
+      <Transition>
+        <div
+          v-if="randomGeneratorState.state === 'running'"
+          class="flex h-screen w-screen flex-col overflow-hidden"
+        >
+          <div class="h-screen flex-1 overflow-hidden">
+            <div
+              class="grid h-fit w-screen animate-fly justify-items-center space-y-32 overflow-hidden py-20"
+            >
+              <RandomGeneratorUserAvatarCard
+                class="animate-wiggle"
+                v-for="user in users"
+                :src="user.avatarUrl"
+                :firstname="user.firstname"
+                :lastname="user.lastname"
+              />
+            </div>
+
+            <img
+              class="absolute left-[10%] top-1/2 h-1/3 -translate-y-1/2 transform"
+              src="/images/random-generator/gifs/cat.gif"
+            />
+            <img
+              class="absolute right-[10%] top-1/2 h-1/3 -translate-y-1/2 scale-x-[-1] transform"
+              src="/images/random-generator/gifs/cat.gif"
+            />
+          </div>
+        </div>
+      </Transition>
+      <Transition name="winner">
+        <div
+          v-if="randomGeneratorState.state === 'stopped'"
+          class="flex h-screen items-center justify-center"
+        >
+          <RandomGeneratorUserAvatarCard
+            class="scale-[130%]"
+            :src="randomGeneratorState.user?.avatarUrl"
+            :firstname="randomGeneratorState.user?.firstname"
+            :lastname="randomGeneratorState.user?.lastname"
+          />
+
+          <img
+            class="absolute left-0 top-1/2 h-2/3 -translate-y-1/2 transform"
+            src="/images/random-generator/gifs/trumpet.gif"
+          />
+          <img
+            class="absolute right-0 top-1/2 h-2/3 -translate-y-1/2 scale-x-[-1] transform"
+            src="/images/random-generator/gifs/trumpet.gif"
+          />
+        </div>
+      </Transition>
+    </div>
+  </div>
+
+  <audio autoplay v-if="randomGeneratorState.state === 'running'">
+    <source src="/sounds/random-generator/running.mp3" type="audio/mpeg" />
+  </audio>
+  <audio autoplay v-if="randomGeneratorState.state === 'stopped'">
+    <source src="/sounds/random-generator/airhorn.mp3" type="audio/mpeg" />
+  </audio>
+  <audio autoplay v-if="randomGeneratorState.state === 'stopped'">
+    <source src="/sounds/random-generator/rise.mp3" type="audio/mpeg" />
+  </audio>
+</template>
+
+<script lang="ts">
+import RandomGeneratorLayout from "@/layouts/RandomGeneratorLayout.vue";
+
+export default {
+  layout: RandomGeneratorLayout,
+};
+</script>
+
+<script setup lang="ts">
+import { ref, PropType, onBeforeUnmount } from "vue";
+import RandomGeneratorUserAvatarCard from "@/components/random/generator/user/AvatarCard.vue";
+
+const props = defineProps({
+  users: {
+    type: Array as PropType<App.Models.User[]>,
+    required: true,
+  },
+});
+
+// locale state variables
+const randomGeneratorState = ref<{
+  state: "setup" | "idle" | "running" | "stopped";
+  user?: Models.User;
+}>({
+  state: "setup",
+});
+
+const isFetchingRandomGenerator = ref(false);
+
+// functions
+const fetchRandomGeneratorState = async () => {
+  if (isFetchingRandomGenerator.value) {
+    return;
+  }
+
+  isFetchingRandomGenerator.value = true;
+
+  const response = await fetch("/api/random-generator/state", {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (response.ok) {
+    const data = await response.json();
+
+    if (
+      randomGeneratorState.value.state != "running" &&
+      data.state == "running"
+    ) {
+      props.users.sort(() => Math.random() - 0.5);
+    }
+
+    randomGeneratorState.value = data;
+  }
+
+  isFetchingRandomGenerator.value = false;
+};
+
+const randomGeneratorInterval = setInterval(fetchRandomGeneratorState, 500);
+
+onBeforeUnmount(() => {
+  clearInterval(randomGeneratorInterval);
+});
+</script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.winner-enter-active {
+  transition: opacity 2s ease;
+  transition-delay: 2s;
+}
+
+.winner-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.winner-enter-from,
+.winner-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/resources/js/types/components.d.ts b/resources/js/types/components.d.ts
index 2cbebf33..352edd45 100644
--- a/resources/js/types/components.d.ts
+++ b/resources/js/types/components.d.ts
@@ -12,6 +12,7 @@ declare module "vue" {
     AppMessage: typeof import("./../components/app/Message.vue")["default"];
     AppNavbar: typeof import("./../components/app/Navbar.vue")["default"];
     BoxContainer: typeof import("./../components/box/Container.vue")["default"];
+    CardAvatarCard: typeof import("./../components/card/AvatarCard.vue")["default"];
     CardBase: typeof import("./../components/card/Base.vue")["default"];
     CardContainer: typeof import("./../components/card/Container.vue")["default"];
     CardLayout: typeof import("./../layouts/CardLayout.vue")["default"];
@@ -29,6 +30,8 @@ declare module "vue" {
     GridContainer: typeof import("./../components/grid/Container.vue")["default"];
     GroupTable: typeof import("./../components/group/Table.vue")["default"];
     LayoutDashboardContent: typeof import("./../components/layout/DashboardContent.vue")["default"];
+    RandomGeneratorLayout: typeof import("./../layouts/RandomGeneratorLayout.vue")["default"];
+    RandomGeneratorUserAvatarCard: typeof import("./../components/random/generator/user/AvatarCard.vue")["default"];
     RegistrationTable: typeof import("./../components/registration/Table.vue")["default"];
     SlotTable: typeof import("./../components/slot/Table.vue")["default"];
     UiDateString: typeof import("./../components/ui/DateString.vue")["default"];
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index b62447d2..0d8b3dea 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -7,6 +7,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/eighty-miles">
 
     <title>{{ config('app.name') }}</title>
 
diff --git a/routes/web.php b/routes/web.php
index 6c4912bb..ef7fd998 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -84,6 +84,7 @@
         ], function () {
             Route::get('/random-generator', [DashboardAdminRandomGeneratorController::class, 'index'])->name('dashboard.admin.randomGenerator.index');
             Route::post('/random-generator', [DashboardAdminRandomGeneratorController::class, 'indexExecuteSubmit'])->name('dashboard.admin.randomGenerator.indexExecuteSubmit');
+            Route::get('/random-generator/display', [DashboardAdminRandomGeneratorController::class, 'display'])->name('dashboard.admin.randomGenerator.display');
         });
     });
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 95f4328c..3825113b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
@@ -12,6 +13,28 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      keyframes: {
+        wiggle: {
+          "0%, 100%": {
+            transform: "rotate(-15deg)",
+          },
+          "50%": {
+            transform: "rotate(15deg)",
+          },
+        },
+        fly: {
+          from: {
+            transform: "translateY(100vh)",
+          },
+          to: {
+            transform: "translateY(-100%)",
+          },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 2s ease-in-out infinite",
+        fly: "fly 75s infinite linear alternate",
+      },
       colors: {
         fhac: {
           mint: "#00b5ad",
@@ -20,6 +43,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+        "eighty-miles": ['"EIGHTY MILES"'],
       },
     },
   },