diff --git a/src/router/index.ts b/src/router/index.ts
index 65353da..f4c07d3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,15 +12,20 @@ const routes = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
       },
-    ],
-  },
+      {
+        path: 'matches',
+        name: 'Matches',
+        component: () => import('@/views/Matches.vue')
+      }
+    ]
+  }
 ]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
+  routes
 })
 
 export default router
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7646ab7..71faf21 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
-  <HelloWorld />
+  <home-hero />
 </template>
 
 <script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
+import HomeHero from '@/components/Home/HomeHero.vue'
 </script>
diff --git a/src/views/Matches.vue b/src/views/Matches.vue
new file mode 100644
index 0000000..adb9834
--- /dev/null
+++ b/src/views/Matches.vue
@@ -0,0 +1,3 @@
+<template>Matches</template>
+
+<script setup lang="ts"></script>