diff --git a/17th Website/src/router.js b/17th Website/src/router.js
index b46bd12..1eac67d 100644
--- a/17th Website/src/router.js	
+++ b/17th Website/src/router.js	
@@ -8,6 +8,11 @@ export default createRouter({
       name: 'Home',
       component: () => import('./views/home.vue'),
     },
+    {
+      path: '/test',
+      name: 'test',
+      component: () => import('./views/test.vue')
+    },
     {
       path: '/profile/:name',
       name: 'profile',
diff --git a/17th Website/src/views/test.vue b/17th Website/src/views/test.vue
new file mode 100644
index 0000000..182b25b
--- /dev/null
+++ b/17th Website/src/views/test.vue	
@@ -0,0 +1,60 @@
+<template>
+    <div class="my-5 flex flex-row items-center justify-between">
+        <Dropdown :values="items" :currentIndex="currentIndex" display="name"
+            @changeSelection="(index) => currentIndex = index" class="w-52">
+        </Dropdown>
+        <p>The current value is {{ items[currentIndex] }}</p>
+
+    </div>
+</template>
+
+<script setup>
+import Dropdown from '../components/dropdown/Dropdown.vue';
+import { ref } from 'vue';
+
+const items = [
+    {
+        "id": 1,
+        "name": "John",
+        "age": 27,
+        "email": "john@example.com",
+        "city": "New York"
+    },
+    {
+        "id": 2,
+        "name": "Emily",
+        "age": 32,
+        "email": "emily@example.com",
+        "city": "London"
+    },
+    {
+        "id": 3,
+        "name": "Michael",
+        "age": 45,
+        "email": "michael@example.com",
+        "city": "Los Angeles"
+    },
+    {
+        "id": 4,
+        "name": "Sarah",
+        "age": 29,
+        "email": "sarah@example.com",
+        "city": "Paris"
+    },
+    {
+        "id": 5,
+        "name": "David",
+        "age": 52,
+        "email": "david@example.com",
+        "city": "Tokyo"
+    }
+];
+
+// const items = ref([
+//     "abby",
+//     "john",
+//     "jacob",
+//     "johnny appleseed"
+// ])
+var currentIndex = ref(0);
+</script>
\ No newline at end of file