diff --git a/resources/js/Components/AppTeamManager.vue b/resources/js/Components/AppTeamManager.vue
new file mode 100644
index 0000000..65b51cf
--- /dev/null
+++ b/resources/js/Components/AppTeamManager.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { Avatar, AvatarFallback } from '@/Components/shadcn/ui/avatar'
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandSeparator,
+} from '@/Components/shadcn/ui/command'
+import CommandEmpty from '@/Components/shadcn/ui/command/CommandEmpty.vue'
+import CommandList from '@/Components/shadcn/ui/command/CommandList.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/Components/shadcn/ui/dropdown-menu'
+import SidebarMenuButton from '@/Components/shadcn/ui/sidebar/SidebarMenuButton.vue'
+import { Icon } from '@iconify/vue'
+import { Link, router } from '@inertiajs/vue3'
+import { inject, ref } from 'vue'
+
+const route = inject('route')
+const open = ref(false)
+
+function switchToTeam(team) {
+  router.put(route('current-team.update'), {
+    team_id: team.id,
+  }, {
+    preserveState: false,
+  })
+}
+</script>
+
+<template>
+  <DropdownMenu v-model:open="open">
+    <DropdownMenuTrigger as-child>
+      <SidebarMenuButton
+        size="lg"
+        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      >
+        <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+          <Icon icon="lucide:rocket" />
+        </div>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ $page.props.auth.user.current_team.name }}</span>
+          <span class="truncate text-xs">Manage Team</span>
+        </div>
+        <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
+      </SidebarMenuButton>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg p-0"
+      align="start" side="bottom" :side-offset="4"
+    >
+      <Command :filter-function="(list, term) => list.filter(i => i?.name?.toLowerCase()?.includes(term))">
+        <CommandList>
+          <CommandInput placeholder="Search team..." />
+          <CommandEmpty>No team found.</CommandEmpty>
+          <CommandGroup heading="Switch Teams">
+            <CommandItem
+              v-for="team in $page.props.auth.user.all_teams"
+              :key="team.value" :value="team" @select="() => {
+                switchToTeam(team);
+                open = false;
+              }"
+            >
+              <Avatar class="mr-2 size-5">
+                <AvatarFallback>{{ team.name.charAt(0) }}</AvatarFallback>
+              </Avatar>
+              {{ team.name }}
+              <Icon
+                v-if="team.id === $page.props.auth.user.current_team_id"
+                icon="lucide:check" class="ml-auto size-4"
+              />
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+        <CommandSeparator v-if="$page.props.auth.user.all_teams.length > 1" />
+        <CommandGroup heading="Manage Team">
+          <CommandItem value="team-settings">
+            <Link :href="route('teams.show', $page.props.auth.user.current_team)">
+              Team Settings
+            </Link>
+          </CommandItem>
+          <CommandItem
+            v-if="$page.props.jetstream.canCreateTeams"
+            value="create-new-team"
+          >
+            <Link :href="route('teams.create')">
+              Create New Team
+            </Link>
+          </CommandItem>
+        </CommandGroup>
+      </Command>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/resources/js/Components/AppUserManager.vue b/resources/js/Components/AppUserManager.vue
new file mode 100644
index 0000000..9f7e3dc
--- /dev/null
+++ b/resources/js/Components/AppUserManager.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { Avatar, AvatarFallback } from '@/Components/shadcn/ui/avatar'
+import AvatarImage from '@/Components/shadcn/ui/avatar/AvatarImage.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/Components/shadcn/ui/dropdown-menu'
+import DropdownMenuGroup from '@/Components/shadcn/ui/dropdown-menu/DropdownMenuGroup.vue'
+import SidebarMenuButton from '@/Components/shadcn/ui/sidebar/SidebarMenuButton.vue'
+import { Icon } from '@iconify/vue'
+import { Link, router } from '@inertiajs/vue3'
+import { inject } from 'vue'
+
+const route = inject('route')
+
+function logout() {
+  router.post(route('logout'))
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <SidebarMenuButton
+        size="lg"
+        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      >
+        <Avatar class="h-8 w-8 rounded-lg">
+          <AvatarImage
+            :src="$page.props.auth.user.profile_photo_path ?? ''"
+            :alt="$page.props.auth.user.name"
+          />
+          <AvatarFallback class="rounded-lg">
+            {{ $page.props.auth.user.name.charAt(0) }}
+          </AvatarFallback>
+        </Avatar>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ $page.props.auth.user.name }}</span>
+          <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
+        </div>
+        <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
+      </SidebarMenuButton>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      side="bottom" align="end" :side-offset="4"
+    >
+      <DropdownMenuLabel class="p-0 font-normal">
+        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded-lg">
+            <AvatarImage
+              :src="$page.props.auth.user.profile_photo_path ?? ''"
+              :alt="$page.props.auth.user.name"
+            />
+            <AvatarFallback class="rounded-lg">
+              {{ $page.props.auth.user.name.charAt(0) }}
+            </AvatarFallback>
+          </Avatar>
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">{{ $page.props.auth.user.name }}</span>
+            <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
+          </div>
+        </div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem :as="Link" :href="route('profile.show')">
+          <Icon icon="lucide:settings" />
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem :as="Link" :href="route('api-tokens.index')">
+          <Icon icon="lucide:key" />
+          API Tokens
+        </DropdownMenuItem>
+        <DropdownMenuItem :as="Link" :href="route('subscriptions.create')">
+          <Icon icon="lucide:credit-card" />
+          Billing
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click="logout">
+        <Icon icon="lucide:log-out" />
+        Log out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/resources/js/Components/StatsCard.vue b/resources/js/Components/StatsCard.vue
new file mode 100644
index 0000000..b5e523f
--- /dev/null
+++ b/resources/js/Components/StatsCard.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Card from '@/Components/shadcn/ui/card/Card.vue'
+import CardContent from '@/Components/shadcn/ui/card/CardContent.vue'
+import CardHeader from '@/Components/shadcn/ui/card/CardHeader.vue'
+import CardTitle from '@/Components/shadcn/ui/card/CardTitle.vue'
+import { Icon } from '@iconify/vue';
+
+defineProps({
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: 'info'
+  }
+})
+
+</script>
+
+<template>
+  <a
+    :href="link"
+    target="_blank"
+    rel="noopener"
+  >
+    <Card class="hover:shadow">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          <Icon
+            :icon="icon"
+            class="size-8"
+          />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-primary">
+          {{ value }}
+        </div>
+        <p class="text-muted-foreground">
+          {{ description }}
+        </p>
+      </CardContent>
+    </Card>
+  </a>
+</template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 468c817..97fd816 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -1,60 +1,23 @@
 <script setup>
 import AppSidebarContent from '@/Components/AppSidebarContent.vue'
-import { Avatar, AvatarFallback } from '@/Components/shadcn/ui/avatar'
-import AvatarImage from '@/Components/shadcn/ui/avatar/AvatarImage.vue'
+import AppTeamManager from '@/Components/AppTeamManager.vue'
+import AppUserManager from '@/Components/AppUserManager.vue'
 import Breadcrumb from '@/Components/shadcn/ui/breadcrumb/Breadcrumb.vue'
 import BreadcrumbItem from '@/Components/shadcn/ui/breadcrumb/BreadcrumbItem.vue'
 import BreadcrumbLink from '@/Components/shadcn/ui/breadcrumb/BreadcrumbLink.vue'
 import BreadcrumbList from '@/Components/shadcn/ui/breadcrumb/BreadcrumbList.vue'
-import {
-  Command,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandSeparator,
-} from '@/Components/shadcn/ui/command'
-import CommandEmpty from '@/Components/shadcn/ui/command/CommandEmpty.vue'
-import CommandList from '@/Components/shadcn/ui/command/CommandList.vue'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/Components/shadcn/ui/dropdown-menu'
-
-import DropdownMenuGroup from '@/Components/shadcn/ui/dropdown-menu/DropdownMenuGroup.vue'
 import Separator from '@/Components/shadcn/ui/separator/Separator.vue'
 import { Sidebar, SidebarFooter, SidebarHeader, SidebarInset } from '@/Components/shadcn/ui/sidebar'
 import SidebarMenu from '@/Components/shadcn/ui/sidebar/SidebarMenu.vue'
-import SidebarMenuButton from '@/Components/shadcn/ui/sidebar/SidebarMenuButton.vue'
 import SidebarMenuItem from '@/Components/shadcn/ui/sidebar/SidebarMenuItem.vue'
 import SidebarProvider from '@/Components/shadcn/ui/sidebar/SidebarProvider.vue'
 import SidebarTrigger from '@/Components/shadcn/ui/sidebar/SidebarTrigger.vue'
 import Sonner from '@/Components/shadcn/ui/sonner/Sonner.vue'
-import { Icon } from '@iconify/vue'
-import { Head, Link, router } from '@inertiajs/vue3'
-import { inject, ref } from 'vue'
+import { Head } from '@inertiajs/vue3'
 
 defineProps({
   title: String,
 })
-const route = inject('route')
-
-const open = ref(false)
-
-function switchToTeam(team) {
-  router.put(route('current-team.update'), {
-    team_id: team.id,
-  }, {
-    preserveState: false,
-  })
-}
-
-function logout() {
-  router.post(route('logout'))
-}
 </script>
 
 <template>
@@ -66,73 +29,7 @@ function logout() {
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <DropdownMenu v-if="$page.props.jetstream.hasTeamFeatures" v-model:open="open">
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuButton
-                    size="lg"
-                    class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                    <div
-                      class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"
-                    >
-                      <Icon icon="lucide:rocket" />
-                    </div>
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                      <span class="truncate font-semibold">{{
-                        $page.props.auth.user.current_team.name }}</span>
-                      <span class="truncate text-xs">Manage Team</span>
-                    </div>
-                    <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
-                  </SidebarMenuButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg p-0"
-                  align="start" side="bottom" :side-offset="4"
-                >
-                  <Command
-                    :filter-function="(list, term) => list.filter(i => i?.name?.toLowerCase()?.includes(term))"
-                  >
-                    <CommandList>
-                      <CommandInput placeholder="Search team..." />
-                      <CommandEmpty>No team found.</CommandEmpty>
-                      <CommandGroup heading="Switch Teams">
-                        <CommandItem
-                          v-for="team in $page.props.auth.user.all_teams"
-                          :key="team.value" :value="team" @select="() => {
-                            switchToTeam(team);
-                            open = false;
-                          }"
-                        >
-                          <Avatar class="mr-2 size-5">
-                            <AvatarFallback>{{ team.name.charAt(0) }}</AvatarFallback>
-                          </Avatar>
-                          {{ team.name }}
-                          <Icon
-                            v-if="team.id === $page.props.auth.user.current_team_id"
-                            icon="lucide:check" class="ml-auto size-4"
-                          />
-                        </CommandItem>
-                      </CommandGroup>
-                    </CommandList>
-                    <CommandSeparator v-if="$page.props.auth.user.all_teams.length > 1" />
-                    <CommandGroup heading="Manage Team">
-                      <CommandItem value="team-settings">
-                        <Link :href="route('teams.show', $page.props.auth.user.current_team)">
-                          Team Settings
-                        </Link>
-                      </CommandItem>
-                      <CommandItem
-                        v-if="$page.props.jetstream.canCreateTeams"
-                        value="create-new-team"
-                      >
-                        <Link :href="route('teams.create')">
-                          Create New Team
-                        </Link>
-                      </CommandItem>
-                    </CommandGroup>
-                  </Command>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <AppTeamManager v-if="$page.props.jetstream.hasTeamFeatures" />
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -142,72 +39,7 @@ function logout() {
         <SidebarFooter>
           <SidebarMenu>
             <SidebarMenuItem>
-              <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuButton
-                    size="lg"
-                    class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                  >
-                    <Avatar class="h-8 w-8 rounded-lg">
-                      <AvatarImage
-                        :src="$page.props.auth.user.profile_photo_path ?? ''"
-                        :alt="$page.props.auth.user.name"
-                      />
-                      <AvatarFallback class="rounded-lg">
-                        {{ $page.props.auth.user.name.charAt(0) }}
-                      </AvatarFallback>
-                    </Avatar>
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                      <span class="truncate font-semibold">{{ $page.props.auth.user.name }}</span>
-                      <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
-                    </div>
-                    <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
-                  </SidebarMenuButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                  side="bottom" align="end" :side-offset="4"
-                >
-                  <DropdownMenuLabel class="p-0 font-normal">
-                    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                      <Avatar class="h-8 w-8 rounded-lg">
-                        <AvatarImage
-                          :src="$page.props.auth.user.profile_photo_path ?? ''"
-                          :alt="$page.props.auth.user.name"
-                        />
-                        <AvatarFallback class="rounded-lg">
-                          {{ $page.props.auth.user.name.charAt(0) }}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div class="grid flex-1 text-left text-sm leading-tight">
-                        <span class="truncate font-semibold">{{ $page.props.auth.user.name
-                        }}</span>
-                        <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
-                      </div>
-                    </div>
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem :as="Link" :href="route('profile.show')">
-                      <Icon icon="lucide:settings" />
-                      Settings
-                    </DropdownMenuItem>
-                    <DropdownMenuItem :as="Link" :href="route('api-tokens.index')">
-                      <Icon icon="lucide:key" />
-                      API Tokens
-                    </DropdownMenuItem>
-                    <DropdownMenuItem :as="Link" :href="route('subscriptions.create')">
-                      <Icon icon="lucide:credit-card" />
-                      Billing
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem @click="logout">
-                    <Icon icon="lucide:log-out" />
-                    Log out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <AppUserManager />
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarFooter>
diff --git a/resources/js/Layouts/WebLayout.vue b/resources/js/Layouts/WebLayout.vue
index 47b6f9a..c05d46e 100644
--- a/resources/js/Layouts/WebLayout.vue
+++ b/resources/js/Layouts/WebLayout.vue
@@ -24,8 +24,9 @@ const mode = useColorMode({
 })
 
 const navLinks = [
-  { label: 'Features', href: '/#features' },
-  { label: 'Pricing', href: '/pricing' },
+  { label: 'Features', href: '/#features', external: false },
+  { label: 'Pricing', href: '/pricing', external: false },
+  { label: 'Docs', href: 'https://docs.larasonic.com/introduction', external: true },
 ]
 
 const githubUrl = 'https://github.com/pushpak1300/larasonic'
@@ -49,12 +50,24 @@ function toggleMenu() {
           </a>
         </div>
         <nav class="hidden md:flex gap-6">
-          <Link
-            v-for="link in navLinks" :key="link.href" :href="link.href"
-            :class="cn('flex items-center text-sm font-medium transition-colors hover:text-foreground/80')"
-          >
-            {{ link.label }}
-          </Link>
+          <template v-for="link in navLinks" :key="link.href">
+            <a
+              v-if="link.external"
+              :href="link.href"
+              target="_blank"
+              rel="noopener noreferrer"
+              :class="cn('flex items-center text-sm font-medium transition-colors hover:text-foreground/80')"
+            >
+              {{ link.label }}
+            </a>
+            <Link
+              v-else
+              :href="link.href"
+              :class="cn('flex items-center text-sm font-medium transition-colors hover:text-foreground/80')"
+            >
+              {{ link.label }}
+            </Link>
+          </template>
         </nav>
         <div class="flex items-center space-x-4">
           <template v-if="!$page.props.auth.user">
diff --git a/resources/js/Pages/Chat/Index.vue b/resources/js/Pages/Chat/Index.vue
index 1bdc582..ee5da99 100644
--- a/resources/js/Pages/Chat/Index.vue
+++ b/resources/js/Pages/Chat/Index.vue
@@ -4,13 +4,16 @@ import Alert from '@/Components/shadcn/ui/alert/Alert.vue'
 import AlertDescription from '@/Components/shadcn/ui/alert/AlertDescription.vue'
 import AlertTitle from '@/Components/shadcn/ui/alert/AlertTitle.vue'
 import { Button } from '@/Components/shadcn/ui/button'
+
 import { Label } from '@/Components/shadcn/ui/label'
 import Skeleton from '@/Components/shadcn/ui/skeleton/Skeleton.vue'
 import { Textarea } from '@/Components/shadcn/ui/textarea'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import { Icon } from '@iconify/vue'
+import { router } from '@inertiajs/vue3'
 import { useFetch } from '@vueuse/core'
-import { ref } from 'vue'
+import { inject, onMounted, ref } from 'vue'
+import { toast } from 'vue-sonner'
 import ModelSelector from './Components/ModelSelector.vue'
 import TemperatureSelector from './Components/TemperatureSelector.vue'
 
@@ -20,6 +23,8 @@ const props = defineProps({
   subscriptionEnabled: Boolean,
 })
 
+const route = inject('route')
+
 const userInput = ref('')
 const modelOutput = ref(null)
 const error = ref(null)
@@ -57,6 +62,23 @@ async function submit() {
     modelOutput.value = data.value.choices[0].message.content
   }
 }
+
+onMounted(() => {
+  if (!props.subscriptionEnabled) {
+    const promise = new Promise((resolve, _reject) => {
+      setTimeout(() => {
+        resolve(route('subscriptions.create'))
+      }, 5000)
+    })
+
+    toast.promise(promise, {
+      loading: 'Pro Subscription Required to use this feature.',
+      success: (data) => {
+        router.visit(data)
+      },
+    })
+  }
+})
 </script>
 
 <template>
@@ -71,7 +93,9 @@ async function submit() {
         <Icon icon="lucide:info" class="size-4" />
         <AlertTitle>Demo AI Chat</AlertTitle>
         <AlertDescription>
-          This is a demo AI chat. You can use it to test the AI chat. And This is subscrition protected page so you can't use it without subscription.
+          This is a demo AI chat. You can use it to test the AI chat. And This is subscrition protected page
+          so you
+          can't use it without subscription.
         </AlertDescription>
       </Alert>
       <div v-if="props.subscriptionEnabled" class="flex-1">
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index a080b91..5570165 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,5 +1,33 @@
 <script setup>
+import StatsCard from '@/Components/StatsCard.vue'
 import AppLayout from '@/Layouts/AppLayout.vue'
+
+const stats = [
+  {
+    value: 'Larasonic Documentation',
+    description: 'Check out our comprehensive documentation',
+    link: 'https://docs.larasonic.com/introduction',
+    icon: 'lucide:book-open'
+  },
+  {
+    value: 'GitHub Repository',
+    description: 'Star us on GitHub',
+    link: 'https://github.com/pushpak1300/Larasonic',
+    icon: 'lucide:github'
+  },
+  {
+    value: 'Roadmap',
+    description: 'See what\'s coming next',
+    link: 'https://github.com/pushpak1300/Larasonic/discussions/categories/roadmap',
+    icon: 'lucide:map'
+  },
+  {
+    value: 'Join Us',
+    description: 'Be part of our growing community',
+    link: 'https://github.com/pushpak1300/Larasonic/discussions',
+    icon: 'lucide:users'
+  },
+]
 </script>
 
 <template>
@@ -11,10 +39,13 @@ import AppLayout from '@/Layouts/AppLayout.vue'
     </template>
 
     <div>
-      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+      <div class="flex flex-1 flex-col gap-4 pt-0">
         <div class="grid auto-rows-min gap-4 md:grid-cols-2">
-          <div class="aspect-video rounded-xl bg-muted/50" />
-          <div class="aspect-video rounded-xl bg-muted/50" />
+          <StatsCard
+            v-for="stat in stats"
+            :key="stat.title"
+            v-bind="stat"
+          />
         </div>
       </div>
     </div>
diff --git a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
index 8f7849e..969d26e 100644
--- a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
+++ b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
@@ -40,7 +40,7 @@ function createTeam() {
 
         <div class="flex items-center mt-2">
           <Avatar>
-            <AvatarImage :src="$page.props.auth.user.profile_photo_url ?? ''" :alt="$page.props.auth.user.name" />
+            <AvatarImage :src="$page.props.auth.user.profile_photo_path ?? ''" :alt="$page.props.auth.user.name" />
             <AvatarFallback class="rounded-full bg-secondary p-2">
               {{ $page.props.auth.user.name.charAt(0) }}
             </AvatarFallback>
diff --git a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
index efde5da..f0a6f1a 100644
--- a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
+++ b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
@@ -47,17 +47,17 @@ function updateTeamName() {
 
         <div class="mt-2 flex items-center">
           <Avatar>
-            <AvatarImage :src="team.owner.profile_photo_url ?? ''" alt="profile photo" />
+            <AvatarImage :src="team.owner.profile_photo_path ?? ''" alt="profile photo" />
             <AvatarFallback class="rounded-full bg-secondary p-2">
               {{ team.name.charAt(0) }}
             </AvatarFallback>
           </Avatar>
 
           <div class="ms-4 leading-tight">
-            <div class="text-gray-900 dark:text-white">
+            <div class="">
               {{ team.owner.name }}
             </div>
-            <div class="text-sm text-gray-700 dark:text-gray-300">
+            <div class="text-sm ">
               {{ team.owner.email }}
             </div>
           </div>