diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index c77fe0c2..7b2e4339 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -41,7 +41,8 @@ class HandleInertiaRequests extends Middleware
     {
         $hasBilling = Module::has('Billing') && Module::isEnabled('Billing');
         $hasInvoicing = Module::has('Invoicing') && Module::isEnabled('Invoicing');
-
+        $hasServices = Module::has('Services') && Module::isEnabled('Services');
+        
         /** @var BillingContract $billing */
         $billing = app(BillingContract::class);
 
@@ -50,6 +51,7 @@ class HandleInertiaRequests extends Middleware
         return array_merge(parent::share($request), [
             'has_billing_extension' => $hasBilling,
             'has_invoicing_extension' => $hasInvoicing,
+            'has_services_extension' => $hasServices,
             'billing' => $currentOrganization !== null ? [
                 'has_subscription' => $billing->hasSubscription($currentOrganization),
                 'has_trial' => $billing->hasTrial($currentOrganization),
diff --git a/resources/js/Components/UserSettingsIcon.vue b/resources/js/Components/UserSettingsIcon.vue
index 6af3ffef..3fe5e0c4 100644
--- a/resources/js/Components/UserSettingsIcon.vue
+++ b/resources/js/Components/UserSettingsIcon.vue
@@ -1,10 +1,22 @@
 <script setup lang="ts">
-import { router, usePage } from '@inertiajs/vue3';
+import { Link, router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
-import DropdownLink from '@/Components/DropdownLink.vue';
-import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+} from '@/Components/ui/dropdown-menu';
+import {
+    UserCircleIcon,
+    KeyIcon,
+    ArrowLeftOnRectangleIcon,
+    ChatBubbleLeftRightIcon,
+} from '@heroicons/vue/24/solid';
 
 const page = usePage<{
+    has_services_extension?: boolean;
+    has_billing_extension?: boolean;
     jetstream: {
         canCreateTeams: boolean;
         hasTeamFeatures: boolean;
@@ -21,62 +33,95 @@ const page = usePage<{
 const logout = () => {
     router.post(route('logout'));
 };
+
+const openFeedback = () => {
+    if (
+        typeof window !== 'undefined' &&
+        'showChatWindow' in window &&
+        typeof window.showChatWindow === 'function'
+    ) {
+        window.showChatWindow();
+    }
+};
 </script>
 <template>
-    <div class="ms-3 relative">
-        <Dropdown align="center" width="48">
-            <template #trigger>
-                <button
-                    v-if="page.props.jetstream.managesProfilePhotos"
-                    data-testid="current_user_button"
-                    class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
-                    <img
-                        class="h-8 w-8 rounded-full object-cover"
-                        :src="page.props.auth.user.profile_photo_url"
-                        :alt="page.props.auth.user.name" />
-                </button>
+    <div class="relative">
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <template v-if="page.props.jetstream.managesProfilePhotos">
+                    <button
+                        data-testid="current_user_button"
+                        class="flex text-sm border-2 outline-none border-transparent rounded-full focus:border-gray-300 transition">
+                        <img
+                            class="h-8 w-8 rounded-full object-cover"
+                            :src="page.props.auth.user.profile_photo_url"
+                            :alt="page.props.auth.user.name" />
+                    </button>
+                </template>
+                <template v-else>
+                    <span class="inline-flex rounded-md">
+                        <button
+                            type="button"
+                            class="inline-flex outline-none items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
+                            {{ page.props.auth.user.name }}
 
-                <span v-else class="inline-flex rounded-md">
+                            <svg
+                                class="ms-2 -me-0.5 h-4 w-4"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                            </svg>
+                        </button>
+                    </span>
+                </template>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="center" class="min-w-40">
+                <div class="block px-2 py-2 text-xs text-gray-400">Manage Account</div>
+
+                <DropdownMenuItem as-child>
+                    <Link
+                        :href="route('profile.show')"
+                        class="inline-flex items-center gap-2.5 w-full">
+                        <UserCircleIcon class="w-5 h-5 text-text-secondary" />
+                        <span>Profile</span>
+                    </Link>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem v-if="page.props.jetstream.hasApiFeatures" as-child>
+                    <Link
+                        :href="route('api-tokens.index')"
+                        class="inline-flex items-center gap-2.5 w-full">
+                        <KeyIcon class="w-5 h-5 text-text-secondary" />
+                        <span>API Tokens</span>
+                    </Link>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem v-if="page.props.has_services_extension" as-child>
                     <button
                         type="button"
-                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
-                        {{ page.props.auth.user.name }}
-
-                        <svg
-                            class="ms-2 -me-0.5 h-4 w-4"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor">
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                        </svg>
+                        class="inline-flex items-center gap-2.5 w-full"
+                        @click="openFeedback">
+                        <ChatBubbleLeftRightIcon class="w-5 h-5 text-text-secondary" />
+                        <span>Feedback</span>
                     </button>
-                </span>
-            </template>
+                </DropdownMenuItem>
 
-            <template #content>
-                <!-- Account Management -->
-                <div class="block px-4 py-2 text-xs text-gray-400">Manage Account</div>
-
-                <DropdownLink :href="route('profile.show')"> Profile </DropdownLink>
-
-                <DropdownLink
-                    v-if="page.props.jetstream.hasApiFeatures"
-                    :href="route('api-tokens.index')">
-                    API Tokens
-                </DropdownLink>
-
-                <div class="border-t border-card-border" />
-
-                <!-- Authentication -->
-                <form @submit.prevent="logout">
-                    <DropdownLink as="button" data-testid="logout_button"> Log Out </DropdownLink>
+                <form class="w-full" @submit.prevent="logout">
+                    <DropdownMenuItem as-child class="inline-flex items-center gap-2.5 w-full">
+                        <button type="submit" data-testid="logout_button">
+                            <ArrowLeftOnRectangleIcon class="w-5 h-5 text-text-secondary" />
+                            <span>Log Out</span>
+                        </button>
+                    </DropdownMenuItem>
                 </form>
-            </template>
-        </Dropdown>
+            </DropdownMenuContent>
+        </DropdownMenu>
     </div>
 </template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 1373ad9d..80641bb0 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -106,7 +106,7 @@ const page = usePage<{
     <div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary">
         <div
             :class="{
-                '!flex bg-default-background w-full z-[9999999999]': showSidebarMenu,
+                '!flex bg-default-background w-full z-30': showSidebarMenu,
             }"
             class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between">
             <div class="flex flex-col h-full">