diff --git a/frontend/components/game-room.vue b/frontend/components/game-room.vue
new file mode 100644
index 0000000..5d5f612
--- /dev/null
+++ b/frontend/components/game-room.vue
@@ -0,0 +1,143 @@
+<template>
+    <ul class="game-room">
+        <button class="left-arrow"></button>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+        <li class="game-room_name">
+            <div class="font-cubic">
+                <h2>房間名稱</h2>
+                <p>人數：4/8</p>
+                <p>房主：player name</p>
+            </div>
+            <button class="font-cubic">加入</button>
+        </li>
+    </ul>
+</template>
+
+<style>
+.game-room_name, .game-room_name button{
+    font-weight: 400;
+}
+.game-room{
+    box-sizing: border-box;
+    width: 1239px;
+    height: 717px;
+    padding: 56px 48px;
+    border: 4px solid #939393;
+    border-radius: 20px;
+    background-color: rgba(132, 132, 132, 0.20);
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+.left-arrow{
+    width: 32px;
+    height: 32px;
+    background-image: url("../public/left-arrow.png");
+    position: absolute;
+    left: 19.5px;
+    top: 20px;
+    border: none;
+    cursor: pointer;
+}
+.game-room_name{
+    box-sizing: border-box;
+    width: 554px;
+    height: 141px;
+    background-color: rgba(132, 132, 132, 0.20);
+    border-radius: 20px;
+    display: flex;
+    justify-content: space-between;
+}
+.game-room_name:not(:last-of-type){
+    margin-right: 11px;
+    margin-bottom: 11px;
+}
+.game-room_name div{
+    margin-left: 24px;
+    margin-top: 24px;
+    margin-bottom: 21px;
+    line-height: 1;
+    text-align: left;
+}
+.game-room_name h2{
+    color: #FFC700;
+    font-size: 32px;
+    margin: 0;
+}
+.game-room_name p{
+    color: #FFF;
+    font-size: 20px;
+    margin: 0;
+}
+.game-room_name h2, p:not(:last-of-type){
+    margin-bottom: 12px;
+}
+.game-room_name button{
+    color: #000;
+    font-size: 20px;
+    background-color: #FFD15C;
+    border: none;
+    width: 91px;
+    height: 91px;
+    border-radius: 50px;
+    margin-top: 25px;
+    margin-right: 23px;
+    margin-bottom: 25px;
+    cursor: pointer;
+}
+</style>
diff --git a/frontend/public/left-arrow.png b/frontend/public/left-arrow.png
new file mode 100644
index 0000000..366a507
Binary files /dev/null and b/frontend/public/left-arrow.png differ