diff --git a/src/resources/js/Components/DropdownLink.vue b/src/resources/js/Components/DropdownLink.vue
new file mode 100644
index 0000000..9c1c0ea
--- /dev/null
+++ b/src/resources/js/Components/DropdownLink.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3'
+
+defineProps({
+    href: String,
+    as: String,
+});
+</script>
+
+<template>
+    <button v-if="as == 'button'" type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </button>
+
+    <a v-else-if="as =='a'" :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </a>
+
+    <Link v-else :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </Link>
+</template>
diff --git a/src/resources/js/Components/DropdownSeparator.vue b/src/resources/js/Components/DropdownSeparator.vue
new file mode 100644
index 0000000..fae64d6
--- /dev/null
+++ b/src/resources/js/Components/DropdownSeparator.vue
@@ -0,0 +1,7 @@
+<script setup>
+//
+</script>
+
+<template>
+<div class="border-t border-gray-100"></div>
+</template>
diff --git a/src/resources/js/Components/DropdownTitle.vue b/src/resources/js/Components/DropdownTitle.vue
new file mode 100644
index 0000000..09c3ec2
--- /dev/null
+++ b/src/resources/js/Components/DropdownTitle.vue
@@ -0,0 +1,9 @@
+<script setup>
+//
+</script>
+
+<template>
+<div class="block px-4 py-2 text-xs text-gray-400">
+    <slot></slot>
+</div>
+</template>