diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
new file mode 100644
index 0000000..50f1e05
--- /dev/null
+++ b/client/src/components/TitleBox.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="titlebox">
+    <div class="titlebox__titlebox">
+      <div class="titlebox__titleborderbox2" />
+      <div class="titlebox__titleborderbox3" />
+      <div class="titlebox__titleborderbox1">
+        <h1 class="titlebox__title">
+          Know Your Teammates!
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.titlebox {
+  &__titlebox {
+    position: relative;
+    margin: 120px 0;
+    display: flex;
+    justify-content: center;
+  }
+  &__titleborderbox1,
+  &__titleborderbox2,
+  &__titleborderbox3 {
+    border: 4px solid #808040;
+    border-radius: 16px;
+    background-color: #6040c0;
+  }
+  &__titleborderbox1 {
+    display: flex;
+    width: 600px;
+    height: 200px;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+  }
+  &__titleborderbox2 {
+    position: absolute;
+    top: 40px;
+    width: 720px;
+    height: 120px;
+    z-index: 2;
+  }
+  &__titleborderbox3 {
+    position: absolute;
+    top: 80px;
+    width: 760px;
+    height: 40px;
+    z-index: 1;
+  }
+  &__title {
+    color: #e0e080;
+    font-size: 64px;
+    font-family: 'Wendy One';
+    color: #ffff80;
+    text-align: center;
+  }
+}
+</style>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index eb2d61c..1550047 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,14 +1,6 @@
 <template>
   <div class="startpage">
-    <div class="startpage__titlebox">
-      <div class="startpage__titleborderbox2" />
-      <div class="startpage__titleborderbox3" />
-      <div class="startpage__titleborderbox1">
-        <h1 class="startpage__title">
-          Know Your Teammates!
-        </h1>
-      </div>
-    </div>
+    <TitleBox />
     <div class="startpage__buttonline">
       <NuxtLink class="startpage__playbutton" to="/play">
         Play!
@@ -22,48 +14,6 @@
 
 <style lang="scss">
 .startpage {
-  &__titlebox {
-    position: relative;
-    margin: 120px 0;
-    display: flex;
-    justify-content: center;
-  }
-  &__titleborderbox1,
-  &__titleborderbox2,
-  &__titleborderbox3 {
-    border: 4px solid #808040;
-    border-radius: 16px;
-    background-color: #6040c0;
-  }
-  &__titleborderbox1 {
-    display: flex;
-    width: 600px;
-    height: 200px;
-    justify-content: center;
-    align-items: center;
-    z-index: 3;
-  }
-  &__titleborderbox2 {
-    position: absolute;
-    top: 40px;
-    width: 720px;
-    height: 120px;
-    z-index: 2;
-  }
-  &__titleborderbox3 {
-    position: absolute;
-    top: 80px;
-    width: 760px;
-    height: 40px;
-    z-index: 1;
-  }
-  &__title {
-    color: #e0e080;
-    font-size: 64px;
-    font-family: 'Wendy One';
-    color: #ffff80;
-    text-align: center;
-  }
   &__buttonline {
     display: flex;
     justify-content: center;