diff --git a/app/components/PlayFieldButton.vue b/app/components/PlayFieldButton.vue
new file mode 100644
index 0000000..cbf6bc4
--- /dev/null
+++ b/app/components/PlayFieldButton.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        icon: string,
+        title: string,
+        description: string
+    }>()
+    const icon = computed(() => `/img/icons/${props.icon}`)
+</script>
+
+<template>
+    <div class="playfield-button">
+        <h3>{{ title }}</h3>
+        <NuxtImg :src="icon" alt="" format="webp" quality="80" />
+        <p>{{ description }}</p>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+$button-size: 80px;
+
+    .playfield-button {
+        height: $button-size;
+        width: $button-size;
+        padding: 0.4rem;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: 0.4rem;
+        grid-template-areas: 
+            "title"
+            "image"
+            "description";
+        justify-content: center;
+        align-items: center;
+        border: 1px solid hsl(0 74% 10% / 50%);
+        border-bottom-color: hsl(0 74% 80% / 10%);
+        border-radius: 0.5rem;
+        background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
+        box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
+        font-size: 0.2rem;
+        
+        overflow: hidden;
+        
+        
+        img {
+            grid-area: image;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            display: block;
+            aspect-ratio: 1 / 1;
+            min-width: 0;
+            min-height: 0;
+            max-width: 80%;
+            max-height: 100%;
+            margin: auto;
+        }
+
+        h3 {
+            grid-area: title;
+            font-weight: bold;
+            margin: 0;
+            font-size: 0.3rem;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            grid-area: description;
+            font-size: 0.2rem;
+            text-align: center;
+            overflow: hidden;
+            
+        }
+    }
+</style>
diff --git a/app/pages/gameroom.vue b/app/pages/gameroom.vue
new file mode 100644
index 0000000..e0f2951
--- /dev/null
+++ b/app/pages/gameroom.vue
@@ -0,0 +1,324 @@
+<script setup lang="ts">
+type playfieldButton = {
+    id: number,
+    title: string,
+    icon: string,
+    color: string,
+    description: string,
+    
+}
+    const movie_data = ref({
+        "Title": "A Maple Valley Christmas",
+        "Year": "2022",
+        "Rated": "TV-G",
+        "Released": "05 Nov 2022",
+        "Runtime": "85 min",
+        "Genre": "Comedy, Drama, Romance",
+        "Director": "Paul Ziller",
+        "Writer": "Joie Botkin, Jerry Todt",
+        "Actors": "Peyton List, Andrew W. Walker, Frances Flanagan",
+        "Plot": "Erica is a rancher who has spent her whole life working the family farm with her mother and sister. When Aaron arrives and disrupts her plans, she starts to question what it is she actually wants.",
+        "Language": "English, Italian",
+        "Country": "Canada, United States",
+        "Awards": "1 nomination total",
+        "Poster": "https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_SX300.jpg",
+        "Ratings": [
+            {
+                "Source": "Internet Movie Database",
+                "Value": "6.3/10"
+            }
+        ],
+        "Metascore": "N/A",
+        "imdbRating": "6.3",
+        "imdbVotes": "1,577",
+        "imdbID": "tt21841642",
+        "Type": "movie",
+        "DVD": "N/A",
+        "BoxOffice": "N/A",
+        "Production": "N/A",
+        "Website": "N/A",
+        "Response": "True"
+})
+
+const buttons = ref([
+    {
+        id: 1,
+        title: "Blondi tuli taloon",
+        icon: "blondi.webp",
+        color: "",
+        description: "Naispääosalla pitkät blondit hiukset."
+    },
+    {
+        id: 2,
+        title: "Ensilumi",
+        icon: "ensilumi.webp",
+        color: "",
+        description: "Juuri kun kaikki toivo on menetetty, ensilumi alkaa sataa."
+    },
+    {
+        id: 3,
+        title: "Evergreen",
+        icon: "evergreen.webp",
+        color: "",
+        description: "Tarinan kylä tai kaupunki on idyllinen paikka, nimeltään jotain jouluista, kuten 'Evergreen' tai 'Snowville'."
+    },
+    {
+        id: 4,
+        title: "Hengailua kirjastossa",
+        icon: "kirjasto.webp",
+        color: "",
+        description: "Pieni kirjakauppa tai kirjasto on keskeinen kohtauspaikka ja keskustelujen paikka."
+    },
+    {
+        id: 5,
+        title: "Himo jouluttaja",
+        icon: "himojouluttaja.webp",
+        color: "",
+        description: "Yksi hahmoista on ylitsepursuava jouluihminen, jolla on täydellisesti koristeltu koti"
+    },
+    {
+        id: 6,
+        title: "Joulukuusten invaasio",
+        icon: "joulukuuset.webp",
+        color: "",
+        description: "Elokuvassa on koti jossa on vähintään 5 joulukuusta. Kuuset voivat olla eri kokoisia."
+    },
+    {
+        id: 7,
+        title: "Jouluenkeli",
+        icon: "jouluenkeli.webp",
+        color: "",
+        description: "Jouluenkeli – joko koristeena tai todellisena ilmestyksenä – ohjaa hahmoja oikealle tielle."
+    },
+    {
+        id: 8,
+        title: "Joulumörkö",
+        icon: "joulumorko.webp",
+        color: "",
+        description: "Hahmo, joka vihaa joulua, mutta päätyy lopulta rakastamaan sitä."
+    },
+    {
+        id: 9,
+        title: "Jouluoksennus",
+        icon: "jouluoksennus.webp",
+        color: "",
+        description: "Koti, työpaikka tai jokin muu koristeltu liioitellusti jouluteemalla, ilman mitään hillittyä tyylitajua"
+    },
+    {
+        id: 10,
+        title: "Kantakahvila",
+        icon: "kantakahvila.webp",
+        color: "",
+        description: "Pieni, kodikas kahvila toimii kaikkien tapaamispaikkana ja keskustelujen keskuksena."
+    },
+    {
+        id: 11,
+        title: "Keskeytetty suudelma",
+        icon: "keskeytetty.webp",
+        color: "",
+        description: "Juuri, kun romanttinen hetki on käsillä, jokin keskeyttää ensisuudelman."
+    },
+    {
+        id: 12,
+        title: "Kuuma kaakao",
+        icon: "kaakao.webp",
+        color: "",
+        description: "Kuumaa kaakaota juodaan lukemattomia kertoja, aina kermavaahdon kera."
+    },
+    {
+        id: 13,
+        title: "Kuusen valinta",
+        icon: "kuusi.webp",
+        color: "",
+        description: "Kohtaus, jossa kuusen valinnasta tehdään koko tarinan käännekohta."
+    },
+    {
+        id: 14,
+        title: "Täysikuu",
+        icon: "taysikuu.webp",
+        color: "",
+        description: "Jouluyön täysikuu valaisee maiseman ja tuo taianomaisen tunnelman."
+    },
+    {
+        id: 15,
+        title: "Pääosa jumissa",
+        icon: "jumissa.webp",
+        color: "",
+        description: "Päähenkilö jää jumiin elokuvan tapahtumapaikalle."
+    },
+    {
+        id: 16,
+        title: "Luistelukohtaus",
+        icon: "luistelu.webp",
+        color: "",
+        description: "Pari luisteluhetkellä, jonka aiakana tunteet alkavat syttyä."
+    },
+    {
+        id: 17,
+        title: "Punainen lava-auto",
+        icon: "lavaauto.webp",
+        color: "",
+        description: "Joku hahmoista ajaa punaisella lava-autolla, usein ilman mitään käytännön syytä."
+    },
+    {
+        id: 18,
+        title: "Punainen villakangastakki",
+        icon: "villakangastakki.webp",
+        color: "",
+        description: "Päähenkilöllä on päällään kirkkaanpunainen, täydellisesti istuva talvitakki."
+    },
+    {
+        id: 19,
+        title: "Suuri salaisuus",
+        icon: "salaisuus.webp",
+        color: "",
+        description: "Joku hahmoista kantaa suurta salaisuutta, joka paljastuu juuri oikella hetkellä."
+    },
+    {
+        id: 20,
+        title: "The Huoltaja",
+        icon: "huoltaja.webp",
+        color: "",
+        description: "Miespäähenkilö on yksinhuoltaja, joka tasapainoilee uran ja lapsenhoidon välillä."
+    },
+    {
+        id: 21,
+        title: "Työkriisi",
+        icon: "tyokriisi.webp",
+        color: "",
+        description: "Päähenkilön työelämässä on kriisi, joka vaatii kaiken huomion joulun alla."
+    },
+    {
+        id: 22,
+        title: "Vanha kirje",
+        icon: "kirje.webp",
+        color: "",
+        description: "Päähenkilö löytää vanhan kirjeen, joka muuttaa hänen elämänsä."
+    },
+    {
+        id: 23,
+        title: "Vanhan parin rakkausneuvo",
+        icon: "rakkausneuvo.webp",
+        color: "",
+        description: "Iäkäs pariskunta antaa päähenkilölle neuvoja rakkaudesta."
+    },
+    {
+        id: 24,
+        title: "Yllätävä vieras",
+        icon: "vieras.webp",
+        color: "",
+        description: "Joulun alla joku saapuu yllättäen perhejuhliin tai kylään."
+    },
+    {
+        id: 25,
+        title: "Yritys pulassa",
+        icon: "pulassa.webp",
+        color: "",
+        description: "Päähenkilön yritys on konkurssin partaalla tai vaarassa tulla ostetuksi."
+    },
+    {
+        id: 26,
+        title: "Kylän joulutapahtuma",
+        icon: "joulutapahtuma.webp",
+        color: "",
+        description: "Koko kylän joulutapahtuma jossa kaikki on paikalla."
+    },
+    {
+        id: 27,
+        title: "Lapsen joulutoive",
+        icon: "joulutoive.webp",
+        color: "",
+        description: "Pieni lapsi toivoo joululta jotain suurta, yleensä perheeseen liittyvää."
+    },
+    {
+        id: 28,
+        title: "Leskimies",
+        icon: "leskimies.webp",
+        color: "",
+        description: "Miespääosa on leski."
+    },
+    {
+        id: 29,
+        title: "Lumiukko",
+        icon: "lumiukko.webp",
+        color: "",
+        description: "Lumiukon rakentamien on täydellisen joulupäivän kohokohta."
+    },
+    {
+        id: 30,
+        title: "Majatalo",
+        icon: "majatalo.webp",
+        color: "",
+        description: "Tarinaan kuuluu aina viehättävä majatalo."
+    },
+    {
+        id: 31,
+        title: "Eräjorma",
+        icon: "erajorma.webp",
+        color: "",
+        description: "Miespääosa on eräjorma / handyman."
+    },
+    {
+        id: 32,
+        title: "Naispääosa kaupungista",
+        icon: "naispaaosa.webp",
+        color: "",
+        description: "Uraohjautunut nainen suurkaupungista."
+    },
+    {
+        id: 33,
+        title: "Naispääosan tuore ero",
+        icon: "ero.webp",
+        color: "",
+        description: "Naispääosa on juuri eronnut tai eroaa elokuvan alussa."
+    },
+])
+</script>
+
+<template>
+    <div class="game-room-container">
+        <div>
+            <h1>{{ movie_data.Title }}</h1>
+        </div>
+        <div class="playfield">
+            <PlayFieldButton v-for="button in buttons" :key="button.id" :icon="button.icon" :title="button.title" :description="button.description" />
+        </div>
+        <div class="end-game">
+            <button class="btn btn-primary">Lopeta peli</button>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.game-room-container {
+    padding: 1rem;
+    display: grid;
+    gap: 1rem;
+    
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 1rem;
+}
+.playfield {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    width: fit-content;
+    margin: auto;
+    gap: 1.8rem;
+    padding: 0.5rem;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    place-items: center;
+    overflow-y: auto;
+}
+.end-game {
+    justify-self: center;
+    width: 100%;
+    button {
+        width: 100%;
+    }
+}
+</style>
diff --git a/app/pages/info.vue b/app/pages/info.vue
index 526bb1a..444ab64 100644
--- a/app/pages/info.vue
+++ b/app/pages/info.vue
@@ -39,7 +39,7 @@
         <div class="poster-content">
             <img class="poster" :src="movie_data.Poster" alt="">
             <p>{{ movie_data.Plot }}</p>
-            <NuxtLink class="btn btn-primary" to="/">Aloita</NuxtLink>
+            <NuxtLink class="btn btn-primary" to="/gameroom">Aloita</NuxtLink>
         </div>
     </div>
 </template>
diff --git a/public/img/icons/blondi.webp b/public/img/icons/blondi.webp
new file mode 100644
index 0000000..856853b
Binary files /dev/null and b/public/img/icons/blondi.webp differ
diff --git a/public/img/icons/ensilumi.webp b/public/img/icons/ensilumi.webp
new file mode 100644
index 0000000..2898a72
Binary files /dev/null and b/public/img/icons/ensilumi.webp differ
diff --git a/public/img/icons/erajorma.webp b/public/img/icons/erajorma.webp
new file mode 100644
index 0000000..5a668b9
Binary files /dev/null and b/public/img/icons/erajorma.webp differ
diff --git a/public/img/icons/ero.webp b/public/img/icons/ero.webp
new file mode 100644
index 0000000..a369ea9
Binary files /dev/null and b/public/img/icons/ero.webp differ
diff --git a/public/img/icons/evergreen.webp b/public/img/icons/evergreen.webp
new file mode 100644
index 0000000..96be37c
Binary files /dev/null and b/public/img/icons/evergreen.webp differ
diff --git a/public/img/icons/himojouluttaja.webp b/public/img/icons/himojouluttaja.webp
new file mode 100644
index 0000000..bd6fae7
Binary files /dev/null and b/public/img/icons/himojouluttaja.webp differ
diff --git a/public/img/icons/huoltaja.webp b/public/img/icons/huoltaja.webp
new file mode 100644
index 0000000..0d36c02
Binary files /dev/null and b/public/img/icons/huoltaja.webp differ
diff --git a/public/img/icons/jouluenkeli.webp b/public/img/icons/jouluenkeli.webp
new file mode 100644
index 0000000..d1c76c4
Binary files /dev/null and b/public/img/icons/jouluenkeli.webp differ
diff --git a/public/img/icons/joulukuuset.webp b/public/img/icons/joulukuuset.webp
new file mode 100644
index 0000000..753cfd6
Binary files /dev/null and b/public/img/icons/joulukuuset.webp differ
diff --git a/public/img/icons/joulumorko.webp b/public/img/icons/joulumorko.webp
new file mode 100644
index 0000000..ea7dda8
Binary files /dev/null and b/public/img/icons/joulumorko.webp differ
diff --git a/public/img/icons/jouluoksennus.webp b/public/img/icons/jouluoksennus.webp
new file mode 100644
index 0000000..5565af0
Binary files /dev/null and b/public/img/icons/jouluoksennus.webp differ
diff --git a/public/img/icons/joulutapahtuma.webp b/public/img/icons/joulutapahtuma.webp
new file mode 100644
index 0000000..a62733e
Binary files /dev/null and b/public/img/icons/joulutapahtuma.webp differ
diff --git a/public/img/icons/joulutoive.webp b/public/img/icons/joulutoive.webp
new file mode 100644
index 0000000..4577b03
Binary files /dev/null and b/public/img/icons/joulutoive.webp differ
diff --git a/public/img/icons/jumissa.webp b/public/img/icons/jumissa.webp
new file mode 100644
index 0000000..ac7b511
Binary files /dev/null and b/public/img/icons/jumissa.webp differ
diff --git a/public/img/icons/kaakao.webp b/public/img/icons/kaakao.webp
new file mode 100644
index 0000000..9d2ca5a
Binary files /dev/null and b/public/img/icons/kaakao.webp differ
diff --git a/public/img/icons/kantakahvila.webp b/public/img/icons/kantakahvila.webp
new file mode 100644
index 0000000..66506c7
Binary files /dev/null and b/public/img/icons/kantakahvila.webp differ
diff --git a/public/img/icons/keskeytetty.webp b/public/img/icons/keskeytetty.webp
new file mode 100644
index 0000000..f78c2aa
Binary files /dev/null and b/public/img/icons/keskeytetty.webp differ
diff --git a/public/img/icons/kirjasto.webp b/public/img/icons/kirjasto.webp
new file mode 100644
index 0000000..7a14b78
Binary files /dev/null and b/public/img/icons/kirjasto.webp differ
diff --git a/public/img/icons/kirje.webp b/public/img/icons/kirje.webp
new file mode 100644
index 0000000..2066602
Binary files /dev/null and b/public/img/icons/kirje.webp differ
diff --git a/public/img/icons/kuusi.webp b/public/img/icons/kuusi.webp
new file mode 100644
index 0000000..f2b991d
Binary files /dev/null and b/public/img/icons/kuusi.webp differ
diff --git a/public/img/icons/lavaauto.webp b/public/img/icons/lavaauto.webp
new file mode 100644
index 0000000..e3be449
Binary files /dev/null and b/public/img/icons/lavaauto.webp differ
diff --git a/public/img/icons/leskimies.webp b/public/img/icons/leskimies.webp
new file mode 100644
index 0000000..4307650
Binary files /dev/null and b/public/img/icons/leskimies.webp differ
diff --git a/public/img/icons/luistelu.webp b/public/img/icons/luistelu.webp
new file mode 100644
index 0000000..fa6688e
Binary files /dev/null and b/public/img/icons/luistelu.webp differ
diff --git a/public/img/icons/lumipyry.webp b/public/img/icons/lumipyry.webp
new file mode 100644
index 0000000..59b8966
Binary files /dev/null and b/public/img/icons/lumipyry.webp differ
diff --git a/public/img/icons/lumiukko.webp b/public/img/icons/lumiukko.webp
new file mode 100644
index 0000000..f854e79
Binary files /dev/null and b/public/img/icons/lumiukko.webp differ
diff --git a/public/img/icons/majatalo.webp b/public/img/icons/majatalo.webp
new file mode 100644
index 0000000..3d5015f
Binary files /dev/null and b/public/img/icons/majatalo.webp differ
diff --git a/public/img/icons/naispaaosa.webp b/public/img/icons/naispaaosa.webp
new file mode 100644
index 0000000..e8e9a3c
Binary files /dev/null and b/public/img/icons/naispaaosa.webp differ
diff --git a/public/img/icons/pulassa.webp b/public/img/icons/pulassa.webp
new file mode 100644
index 0000000..e9c6390
Binary files /dev/null and b/public/img/icons/pulassa.webp differ
diff --git a/public/img/icons/rakkausneuvo.webp b/public/img/icons/rakkausneuvo.webp
new file mode 100644
index 0000000..c00f3fe
Binary files /dev/null and b/public/img/icons/rakkausneuvo.webp differ
diff --git a/public/img/icons/salaisuus.webp b/public/img/icons/salaisuus.webp
new file mode 100644
index 0000000..13e2128
Binary files /dev/null and b/public/img/icons/salaisuus.webp differ
diff --git a/public/img/icons/taysikuu.webp b/public/img/icons/taysikuu.webp
new file mode 100644
index 0000000..4aa6fc2
Binary files /dev/null and b/public/img/icons/taysikuu.webp differ
diff --git a/public/img/icons/tyokriisi.webp b/public/img/icons/tyokriisi.webp
new file mode 100644
index 0000000..5dc5597
Binary files /dev/null and b/public/img/icons/tyokriisi.webp differ
diff --git a/public/img/icons/vieras.webp b/public/img/icons/vieras.webp
new file mode 100644
index 0000000..216a439
Binary files /dev/null and b/public/img/icons/vieras.webp differ
diff --git a/public/img/icons/villakangastakki.webp b/public/img/icons/villakangastakki.webp
new file mode 100644
index 0000000..a88fddc
Binary files /dev/null and b/public/img/icons/villakangastakki.webp differ