diff --git a/index.html b/index.html
index 168cc17..4f73b7e 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,11 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-    <title>Smoker Batu - Smoke Data Recorder</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
+    <title>Smoke Data Recorder</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
index 3af2fb4..3bbbabf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "batu-ui",
       "version": "0.0.0",
       "dependencies": {
+        "@vuepic/vue-datepicker": "^9.0.3",
         "vue": "^3.4.29"
       },
       "devDependencies": {
@@ -1319,6 +1320,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-9.0.3.tgz",
+      "integrity": "sha512-OtCAKG+CkVBpCwnPx7/BGRF+/z+jDzNl2cMBpcr8j2NkAN+13xkUt7sctbOVKbG/jhuXtKoUSedI69e0cDXPXw==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1534,6 +1550,16 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
diff --git a/package.json b/package.json
index 6e4b153..3f99a14 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@vuepic/vue-datepicker": "^9.0.3",
     "vue": "^3.4.29"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index f3e7d3d..d9ba7df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,10 @@
 <script setup lang="ts">
     import { ref } from 'vue';
     import stopSlider from './components/stopSlider.vue';
+    import VueDatePicker from '@vuepic/vue-datepicker';
+    import '@vuepic/vue-datepicker/dist/main.css'
+
+    const date = ref();
 
     const theme = ref( 'light_mode' );
 
@@ -83,17 +87,86 @@
             unlock();
         }
     }
+
+    const difficulty = ref( 0 );
+    const difficultyLevels = ref( [ 'sleep sessions', 'very easy', 'easy', 'of medium difficulty', 'hard', 'very hard', 'impossible to comprehend' ] );
+    const difficultySlider = ref( stopSlider );
+    const setDifficulty = ( value: number ) => {
+        difficulty.value = value;
+    }
+
+    const rest = ref( 0 );
+    const restLevels = ref( [ 'so tired I fell asleep again', 'very tired', 'tired', 'decently rested', 'well-rested', 'very well-rested', 'very energized and incredibly well-rested' ] );
+    const restSlider = ref( stopSlider );
+
+    const hasSelectedDate = ref( false );
+
+    const setRest = ( value: number ) => {
+        rest.value = value;
+    }
+
+    const setUpDifficultySlider = () => {
+        setTimeout( () => {
+            difficultySlider.value.setUp( 7, 3 );
+        }, 500 );
+    }
+
+    const setUpRestSlider = () => {
+        setTimeout( () => {
+            restSlider.value.setUp( 7, 3 );
+        }, 500 );
+    }
+
+    const showStats = () => {
+        alert( 'Coming soon!' );
+    }
+
+    const submitForm = () => {
+        alert( 'Data submitted. Remember: Stop smoking! Smoking hurts your health!' );
+    }
+
+    const dateUpdatedHandler = () => {
+        hasSelectedDate.value = true;
+        // TODO: Load old data, if present
+    }
 </script>
 
 <template>
     <div>
         <button @click="changeTheme();" id="themeSelector" title="Toggle between light and dark mode"><span class="material-symbols-outlined" v-html="theme"></span></button>
         <main>
-            <h1>Smoke Data Recorder</h1>
+            <h1 id="title">Smoke Data Recorder</h1>
             <div v-if="!isLoading">
-                <div v-if="unlocked">
-                    <input type="text" class="input" placeholder="">
-                    <stopSlider id="test" style="width: 80vw; margin-left: 20px;"></stopSlider>
+                <div v-if="unlocked" class="main-interface">
+                    <button class="fancy-button" @click="showStats()">Stats</button>
+                    <div class="input-element">
+                        <p>Date for which this form is filled out</p>
+                        <VueDatePicker v-model="date" :dark="theme === 'dark_mode'" @date-update="dateUpdatedHandler()"></VueDatePicker>
+                    </div>
+
+                    <div v-if="hasSelectedDate" class="main-interface">
+
+                        <div class="input-element">
+                            <p>How many cigarets did you smoke on that day?</p>
+                            <input type="number" class="input">
+                        </div>
+                        
+                        <div class="input-element">
+                            <p>How many hours of sleep did you get approximately?</p>
+                            <input type="number" class="input">
+                        </div>
+                        
+                        <div class="input-element">
+                            <p>That morning, I felt {{ restLevels[ rest ] }}</p>
+                            <stopSlider slider-id="rest" style="width: 80vw; margin-left: 20px;" @slider-pos="( pos ) => setRest( pos )" ref="restSlider" @ready="setUpRestSlider()"></stopSlider>
+                        </div>
+                        
+                        <div class="input-element">
+                            <p>The lectures on this day were {{ difficultyLevels[ difficulty ] }}</p>
+                            <stopSlider slider-id="difficulty" style="width: 80vw; margin-left: 20px;" @slider-pos="( pos ) => setDifficulty( pos )" ref="difficultySlider" @ready="setUpDifficultySlider()"></stopSlider>
+                        </div>
+                        <button @click="submitForm()" class="fancy-button" style="margin-top: 20px;">Submit</button>
+                    </div>
                 </div>
                 <div v-else>
                     <p>Please log in</p>
@@ -115,6 +188,15 @@
     </div>
 </template>
 
+<style>
+    .main-interface {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>
+
 <style>
     body {
         background-color: var( --background-color );
@@ -173,6 +255,12 @@
         color: white;
     }
 
+    #title {
+        font-family: "Qwitcher Grypen", cursive;
+        font-weight: 700;
+        font-size: 5rem;
+    }
+
     html,
     body {
         width: 100%;
@@ -180,6 +268,7 @@
         margin: 0;
         padding: 0;
         font-size: 17px;
+        font-family: "Jost", sans-serif;
     }
 
     #app {
diff --git a/src/components/stopSlider.vue b/src/components/stopSlider.vue
index cae555a..d1cc063 100644
--- a/src/components/stopSlider.vue
+++ b/src/components/stopSlider.vue
@@ -21,10 +21,11 @@
     const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge
     const sliderFillPosRight = ref( maxWidth.value ); // Offset from right edge
     const sliderStops: Ref<SliderStop[]> = ref( [] );
+    const sliderIndex = ref( 0 );
     let intervalSize = 0;
 
-    const setUp = ( stops: number ) => {
-        maxWidth.value = document.getElementById( 'slider-' + props.id )!.clientWidth;
+    const setUp = ( stops: number, preset?: number ) => {
+        maxWidth.value = document.getElementById( 'slider-' + props[ 'slider-id' ] )!.clientWidth;
         sliderStops.value = [];
         intervalSize = maxWidth.value / ( stops - 1 );
         for ( let i = 0; i < stops; i ++ ) {
@@ -33,6 +34,8 @@
                 index: i,
             } );
         }
+
+        setSliderIndex( preset ?? 0 );
     }
 
     const xOffset = ref( 0 );
@@ -46,6 +49,13 @@
         originalSliderPos = sliderKnobPos.value;
     }
 
+    const setSliderIndex = ( index: number ) => {
+        sliderIndex.value = index ?? 0;
+        sliderKnobPos.value = sliderIndex.value * intervalSize + sliderOffset;
+        sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
+        emits( 'slider-pos', sliderIndex.value );
+    }
+
     const handleDrag = ( x: number ) => {
         if ( isDragging.value ) {
             const newPos = originalSliderPos + ( x - xOffset.value );
@@ -58,7 +68,9 @@
             }
 
             // Calculate progress of slider background / progress bar
-            sliderFillPosRight.value = maxWidth.value - Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset;
+            sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
+            sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
+            emits( 'slider-pos', sliderIndex.value );
         }
     }
 
@@ -66,11 +78,14 @@
         isDragging.value = false;
 
         // snapping
-        sliderKnobPos.value = Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset;
+        sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
+        sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
+        sliderKnobPos.value = sliderIndex.value * intervalSize + sliderOffset;
+        emits( 'slider-pos', sliderIndex.value );
     }
 
     const props = defineProps( {
-        'id': {
+        'slider-id': {
             default: '1',
             required: true,
             type: String
@@ -82,9 +97,10 @@
         setUp
     } );
 
+    const emits = defineEmits( [ 'slider-pos', 'ready' ] );
     setTimeout( () => {
-        setUp( 5 );
-    }, 500 );
+        emits( 'ready', true );
+    } );
 </script>
 
 
@@ -96,10 +112,14 @@
         </div>
 
 
-        <div class="slider-stop" v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"></div>
-        <div class="slider" :id="'slider-' + $props.id">
+        <div :class="'slider-stop' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )" 
+            v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"
+            @click="setSliderIndex( stop.index )"></div>
+        <div class="slider" :id="'slider-' + $props[ 'slider-id' ]">
             <div class="slider-fill" :style="'left: ' + sliderFillPosLeft + 'px; width: ' + ( maxWidth - sliderFillPosLeft - sliderFillPosRight ) + 'px'"></div>
-            <div class="slider-stop-fill" v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"></div>
+            <div :class="'slider-stop-fill' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )" 
+                v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"
+                @click="setSliderIndex( stop.index )"></div>
         </div>
     </div>
 </template>
@@ -167,8 +187,10 @@
         border: solid 2px var( --gray-color );
         position: absolute;
         top: -5px;
+        transition: background-color 0.5s;
+        cursor: pointer;
     }
-
+    
     .slider-stop-fill {
         border-radius: 10px;
         width: 20px;
@@ -177,5 +199,11 @@
         position: absolute;
         top: -5px;
         background-color: var( --background-color );
+        transition: background-color 0.5s;
+        cursor: pointer;
+    }
+    
+    .stop-filled {
+        background-color: var( --slider-color );
     }
 </style>
\ No newline at end of file
