diff --git a/interactive-rating-component/index.html b/interactive-rating-component/index.html
index ad1f096..9c50ec5 100644
--- a/interactive-rating-component/index.html
+++ b/interactive-rating-component/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
-    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon-32x32.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Frontend Mentor | Interactive rating component</title>
 </head>
@@ -10,25 +10,43 @@
 <div id="app">
     <!-- Rating state start -->
 
-    How did we do?
+    <div id="rating" class="Rating Card" v-if="!submitted">
+        <img src="./src/assets/icon-star.svg" alt="Star icon" class="Rating-icon">
 
-    Please let us know how we did with your support request. All feedback is appreciated
-    to help us improve our offering!
+        <h1 class="Card-title">How did we do?</h1>
 
-    1 2 3 4 5
+        <p class="Card-text">
+            Please let us know how we did with your support request. All feedback is appreciated
+            to help us improve our offering!
+        </p>
 
-    Submit
+        <div class="Rating-numbers">
+            <button class="Rating-number" @click="rating = 1">1</button>
+            <button class="Rating-number" @click="rating = 2">2</button>
+            <button class="Rating-number" @click="rating = 3">3</button>
+            <button class="Rating-number" @click="rating = 4">4</button>
+            <button class="Rating-number" @click="rating = 5">5</button>
+        </div>
+
+        <button class="Card-button" @click="submitted = true">Submit</button>
+    </div>
 
     <!-- Rating state end -->
 
     <!-- Thank you state start -->
 
-    You selected <!-- Add rating here --> out of 5
+    <div id="thankYou" class="ThankYou Card" v-else>
+        <img src="./src/assets/illustration-thank-you.svg" alt="illustration" class="ThankYou-illustration">
 
-    Thank you!
+        <div class="ThankYou-userInput">You selected {{ rating }} out of 5</div>
 
-    We appreciate you taking the time to give a rating. If you ever need more support,
-    don’t hesitate to get in touch!
+        <h1 class="Card-title">Thank you!</h1>
+
+        <p class="Card-text">
+            We appreciate you taking the time to give a rating. If you ever need more support,
+            don’t hesitate to get in touch!
+        </p>
+    </div>
 
     <!-- Thank you state end -->
 
diff --git a/interactive-rating-component/images/favicon-32x32.png b/interactive-rating-component/src/assets/favicon-32x32.png
similarity index 100%
rename from interactive-rating-component/images/favicon-32x32.png
rename to interactive-rating-component/src/assets/favicon-32x32.png
diff --git a/interactive-rating-component/images/icon-star.svg b/interactive-rating-component/src/assets/icon-star.svg
similarity index 100%
rename from interactive-rating-component/images/icon-star.svg
rename to interactive-rating-component/src/assets/icon-star.svg
diff --git a/interactive-rating-component/images/illustration-thank-you.svg b/interactive-rating-component/src/assets/illustration-thank-you.svg
similarity index 100%
rename from interactive-rating-component/images/illustration-thank-you.svg
rename to interactive-rating-component/src/assets/illustration-thank-you.svg
diff --git a/interactive-rating-component/src/main.ts b/interactive-rating-component/src/main.ts
index 3c2c0ba..0ba9a8e 100644
--- a/interactive-rating-component/src/main.ts
+++ b/interactive-rating-component/src/main.ts
@@ -2,5 +2,10 @@ import { createApp } from 'vue'
 import './style.css'
 
 createApp({
-    
+    data() {
+        return {
+            rating: 0,
+            submitted: false,
+        }
+    }
 }).mount('#app')
diff --git a/interactive-rating-component/vite.config.ts b/interactive-rating-component/vite.config.ts
index 05c1740..acb206b 100644
--- a/interactive-rating-component/vite.config.ts
+++ b/interactive-rating-component/vite.config.ts
@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            'vue': 'vue/dist/vue.esm-bundler',
+        },
+    }
 })
