diff --git a/app/assets/css/main.scss b/app/assets/css/main.scss
new file mode 100644
index 0000000..9253139
--- /dev/null
+++ b/app/assets/css/main.scss
@@ -0,0 +1,35 @@
+$drop-shadow: 3px 3px 0.5rem hsl(212 74% 20% / 50%);
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    background-image: linear-gradient(to bottom, hsl(12, 90%, 40%), hsl(0, 90%, 35%));
+    color: hsl(0, 74%, 90%);
+}
+  
+h1 {
+    font-size: 2rem;
+}
+
+.btn {
+    padding: 1rem;
+    text-decoration: none;
+    border-radius: 1rem;
+    transition: all 0.3s ease;
+    box-shadow: $drop-shadow;
+}
+
+.btn-primary {
+    color: hsl(212, 74%, 90%);
+    // background-color: hsl(212, 74%, 50%);
+    background-image: linear-gradient(to bottom, hsl(212, 74%, 55%), hsl(212, 74%, 45%));
+    border: 1px solid hsl(212, 74%, 75%);
+    &:hover {
+        background-color: hsl(212, 74%, 40%);
+    }
+}
\ No newline at end of file
diff --git a/app/assets/img/reindeerpoop.webp b/app/assets/img/reindeerpoop.webp
new file mode 100644
index 0000000..28c275c
Binary files /dev/null and b/app/assets/img/reindeerpoop.webp differ
diff --git a/app/assets/img/snow.svg b/app/assets/img/snow.svg
new file mode 100644
index 0000000..44e8acb
--- /dev/null
+++ b/app/assets/img/snow.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="216.92949mm"
+   height="87.615997mm"
+   viewBox="0 0 819.891 331.14709"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="snow.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="5.1125541"
+     inkscape:cx="403.02752"
+     inkscape:cy="262.58891"
+     inkscape:window-width="2560"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter5"
+       x="-0.0034301891"
+       y="-0.020573195"
+       width="1.0068604"
+       height="1.0411464">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.1718249"
+         id="feGaussianBlur5" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-27.660449,-210.22809)">
+    <path
+       id="rect1"
+       style="opacity:0.972438;fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:3.78;stroke-dasharray:none"
+       d="m 27.660645,210.22809 v 261.81837 a 100.13494,102.34787 0 0 0 40.45117,8.72265 100.13494,102.34787 0 0 0 80.177735,-41.03515 229.03793,229.03793 0 0 0 102.94335,24.4375 229.03793,229.03793 0 0 0 89.42383,-18.17774 178.18272,178.18272 0 0 0 147.63867,78.42188 178.18272,178.18272 0 0 0 149.94336,-81.92188 97.596779,97.596779 0 0 0 31.57032,5.24805 97.596779,97.596779 0 0 0 82.81054,-45.94531 178.18272,178.18272 0 0 0 65.0625,12.30273 178.18272,178.18272 0 0 0 29.86914,-2.52148 V 210.22809 Z" />
+    <path
+       id="path5"
+       style="opacity:0.972438;mix-blend-mode:normal;fill:#c4d3dd;fill-opacity:1;stroke:none;stroke-width:3.78;stroke-dasharray:none;filter:url(#filter5)"
+       d="m 752.61961,387.71442 a 97.596779,97.596779 0 0 1 -82.81054,45.94531 97.596779,97.596779 0 0 1 -31.57032,-5.24805 178.18272,178.18272 0 0 1 -149.94336,81.92188 178.18272,178.18272 0 0 1 -147.63867,-78.42188 229.03793,229.03793 0 0 1 -89.42383,18.17774 229.03793,229.03793 0 0 1 -102.94336,-24.4375 100.13494,102.34787 0 0 1 -80.17773,41.03515 100.13494,102.34787 0 0 1 -40.451172,-8.72265 v 14.08203 a 100.13494,102.34787 0 0 0 40.451172,8.72266 100.13494,102.34787 0 0 0 80.17773,-41.03516 229.03793,229.03793 0 0 0 102.94336,24.4375 229.03793,229.03793 0 0 0 89.42383,-18.17773 178.18272,178.18272 0 0 0 147.63867,78.42187 178.18272,178.18272 0 0 0 149.94336,-81.92187 97.596779,97.596779 0 0 0 31.57032,5.24804 97.596779,97.596779 0 0 0 82.81054,-45.94531 178.18272,178.18272 0 0 0 65.0625,12.30273 178.18272,178.18272 0 0 0 29.86914,-2.52148 v -14.08203 a 178.18272,178.18272 0 0 1 -29.86914,2.52148 178.18272,178.18272 0 0 1 -65.0625,-12.30273 z"
+       transform="matrix(0.99318683,0,0,0.99318683,2.9814967,6.6224044)" />
+  </g>
+</svg>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index af9fa97..33331c9 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,3 +1,99 @@
 <template>
+<div class="index-container">
+    <header>
+        <img src="@/assets/img/snow.svg" alt="">
+        <h1>Paska Joululeffa 2025</h1>
+    </header>
+    <main>
+        <img src="@/assets/img/reindeerpoop.webp" alt="">
+        <div class="warning">
+            <div>
+                <Icon name="mdi:warning" size="1.5rem"/>
+                <h2>Varoitus!</h2>
+                <Icon name="mdi:warning" size="1.5rem" />
+            </div>
+            <p>Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
+        </div>
+        <NuxtLink class="btn btn-primary" to="/info">Sisään</NuxtLink>
+    </main>
+    <footer><sup>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
+</div>
+</template>
 
-</template>
\ No newline at end of file
+<style scoped lang="scss">
+
+* {
+    font-family: DynaPuff, sans-serif;
+}
+
+.index-container {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    min-height: 100vh;
+    
+
+}
+
+header {
+    text-align: center;
+    display: grid;
+    grid-template-areas: "stack";
+    
+    > * {
+        grid-area: stack;
+        max-width: 100%;
+    }
+
+    img {
+        width: 100%;
+        object-fit: cover;
+    }
+    h1 {
+        padding: 1rem;
+        color: hsl(0 74% 5%);
+    }
+}
+
+main {
+    text-align: center;
+    padding: 1rem;
+    display: grid;
+    justify-content: center;
+    place-items: center;
+    
+    img {
+        max-width: 80%;
+    }
+
+    .warning {
+        .iconify {
+            color: hsl(44, 100%, 65%);
+        }
+    }
+
+    > div {
+        font-size: 0.9rem;
+        line-height: 2;
+        padding: 1rem;
+        max-width: 80%;
+        margin: auto;
+        background-color: hsl(212 74% 50% / 20%);
+        color: hsl(212 74% 90%);
+        border-radius: 1rem;
+        > div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+        }
+    }
+}
+
+footer {
+    text-align: center;
+    padding: 1rem;
+    background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
+    font-size: 0.8rem;
+}
+</style>