diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 0cecbb1..11cadc7 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,8 +15,8 @@
       </div>
 
       <!-- Content -->
-      <div class="flex-1">
-        <slot name="content"/>
+      <div class="flex-1 border rounded-3xl">
+          <slot name="content"/>
       </div>
 
       <!-- Footer -->
diff --git a/pages/home.vue b/pages/home.vue
new file mode 100644
index 0000000..24e22a1
--- /dev/null
+++ b/pages/home.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+
+useSeoMeta({
+  title: "BeatBuzzer",
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
+})
+
+</script>
+
+<template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <HeaderFooterView>
+      <template #header>
+        <div>
+          1A
+        </div>
+        <div>
+          2B
+        </div>
+        <div>
+          3C
+        </div>
+      </template>
+      <template #content>
+        <div class="flex justify-center items-end h-full space-x-1">
+            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+                Start Game
+            </button>
+            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+                Start Round
+            </button>
+        </div>
+      </template>
+      <template #footer>
+        <div class="text-4xl">A</div>
+        <div class="text-4xl">B</div>
+        <div class="text-4xl">C</div>
+      </template>
+    </HeaderFooterView>
+  </div>
+</template>
\ No newline at end of file