diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 239ee8d7..2e4b8860 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -267,7 +267,7 @@ devDependencies:
     version: 7.4.1
   drizzle-kit:
     specifier: ^0.20.16
-    version: 0.20.16
+    version: 0.20.17
   eslint:
     specifier: ^8.57.0
     version: 8.57.0
@@ -6324,8 +6324,8 @@ packages:
       wordwrap: 1.0.0
     dev: true
 
-  /drizzle-kit@0.20.16:
-    resolution: {integrity: sha512-WoqV0XDny8mHnVoLYcUs6H3Ae1HBxeV0zi3VXG/mTahIQYfadZmIc3eRqzXjD3yxemj+GdHI1nThddmsoabdIA==}
+  /drizzle-kit@0.20.17:
+    resolution: {integrity: sha512-mLVDS4nXmO09wFVlzGrdshWnAL+U9eQGC5zRs6hTN6Q9arwQGWU2XnZ17I8BM8Quau8CQRx3Ms6VPgRWJFVp7Q==}
     hasBin: true
     dependencies:
       '@esbuild-kit/esm-loader': 2.6.5
diff --git a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
index 9b556128..95605fe9 100644
--- a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
+++ b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
@@ -10,7 +10,7 @@ import {
 } from "@radix-ui/react-icons"
 
 import { type getStoresByUserId } from "@/lib/actions/store"
-import { type getProgress } from "@/lib/queries/user"
+import { type getUserPlanMetrics } from "@/lib/queries/user"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -28,19 +28,19 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-import { AddStoreDialog } from "../stores/_components/add-store-dialog"
+import { CreateStoreDialog } from "../stores/_components/create-store-dialog"
 
 interface StoreSwitcherProps
   extends React.ComponentPropsWithoutRef<typeof PopoverTrigger> {
   userId: string
   storesPromise: ReturnType<typeof getStoresByUserId>
-  progressPromise: ReturnType<typeof getProgress>
+  planMetricsPromise: ReturnType<typeof getUserPlanMetrics>
 }
 
 export function StoreSwitcher({
   userId,
   storesPromise,
-  progressPromise,
+  planMetricsPromise,
   className,
   ...props
 }: StoreSwitcherProps) {
@@ -51,15 +51,15 @@ export function StoreSwitcher({
   const [showNewStoreDialog, setShowNewStoreDialog] = React.useState(false)
 
   const stores = React.use(storesPromise)
-  const progress = React.use(progressPromise)
+  const planMetrics = React.use(planMetricsPromise)
 
   const selectedStore = stores.find((store) => store.id === storeId)
 
   return (
     <>
-      <AddStoreDialog
+      <CreateStoreDialog
         userId={userId}
-        progressPromise={progressPromise}
+        planMetricsPromise={planMetricsPromise}
         open={showNewStoreDialog}
         onOpenChange={setShowNewStoreDialog}
         showTrigger={false}
@@ -70,13 +70,13 @@ export function StoreSwitcher({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            aria-label="Select a team"
+            aria-label="Select a store"
             className={cn("w-full justify-between", className)}
             {...props}
           >
             {selectedStore?.name ?? "Select a store"}
             <CaretSortIcon
-              className="ml-auto size-4 shrink-0 opacity-50"
+              className="ml-auto size-3.5 shrink-0 opacity-50"
               aria-hidden="true"
             />
           </Button>
@@ -121,7 +121,7 @@ export function StoreSwitcher({
                     setOpen(false)
                     setShowNewStoreDialog(true)
                   }}
-                  disabled={progress.storeCount >= progress.storeLimit}
+                  disabled={planMetrics.storeLimitExceeded}
                 >
                   <PlusCircledIcon className="mr-2 size-5" aria-hidden="true" />
                   Create store
diff --git a/src/app/(dashboard)/dashboard/account/_components/user-profile.tsx b/src/app/(dashboard)/dashboard/account/[[...rest]]/_components/user-profile.tsx
similarity index 52%
rename from src/app/(dashboard)/dashboard/account/_components/user-profile.tsx
rename to src/app/(dashboard)/dashboard/account/[[...rest]]/_components/user-profile.tsx
index 130e7597..a3def1e9 100644
--- a/src/app/(dashboard)/dashboard/account/_components/user-profile.tsx
+++ b/src/app/(dashboard)/dashboard/account/[[...rest]]/_components/user-profile.tsx
@@ -2,36 +2,28 @@
 
 import { UserProfile as ClerkUserProfile } from "@clerk/nextjs"
 import { dark } from "@clerk/themes"
-import { type Theme } from "@clerk/types"
+import type { Theme, UserProfileProps } from "@clerk/types"
 import { useTheme } from "next-themes"
 
 const appearance: Theme = {
-  baseTheme: undefined,
   variables: {
     borderRadius: "0.25rem",
   },
-  elements: {
-    card: "shadow-none",
-    navbar: "hidden",
-    navbarMobileMenuButton: "hidden",
-    headerTitle: "hidden",
-    headerSubtitle: "hidden",
-  },
 }
 
-export function UserProfile() {
+export function UserProfile({ ...props }: UserProfileProps) {
   const { theme } = useTheme()
 
   return (
     <ClerkUserProfile
       appearance={{
         ...appearance,
-        baseTheme: theme === "dark" ? dark : appearance.baseTheme,
+        baseTheme: theme === "light" ? appearance.baseTheme : dark,
         variables: {
           ...appearance.variables,
-          colorBackground: theme === "light" ? "#fafafa" : undefined,
         },
       }}
+      {...props}
     />
   )
 }
diff --git a/src/app/(dashboard)/dashboard/account/loading.tsx b/src/app/(dashboard)/dashboard/account/[[...rest]]/loading.tsx
similarity index 100%
rename from src/app/(dashboard)/dashboard/account/loading.tsx
rename to src/app/(dashboard)/dashboard/account/[[...rest]]/loading.tsx
diff --git a/src/app/(dashboard)/dashboard/account/page.tsx b/src/app/(dashboard)/dashboard/account/[[...rest]]/page.tsx
similarity index 75%
rename from src/app/(dashboard)/dashboard/account/page.tsx
rename to src/app/(dashboard)/dashboard/account/[[...rest]]/page.tsx
index ac50df74..f10542d3 100644
--- a/src/app/(dashboard)/dashboard/account/page.tsx
+++ b/src/app/(dashboard)/dashboard/account/[[...rest]]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { env } from "@/env.js"
 
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import {
   PageHeader,
   PageHeaderDescription,
@@ -18,16 +19,17 @@ export const metadata: Metadata = {
 
 export default function AccountPage() {
   return (
-    <Shell variant="sidebar">
+    <Shell variant="sidebar" className="overflow-hidden">
       <PageHeader>
         <PageHeaderHeading size="sm">Account</PageHeaderHeading>
         <PageHeaderDescription size="sm">
           Manage your account settings
         </PageHeaderDescription>
       </PageHeader>
-      <section className="w-full overflow-hidden">
+      <ScrollArea className="w-full pb-3.5">
         <UserProfile />
-      </section>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </Shell>
   )
 }
diff --git a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
index 80803449..ef524e49 100644
--- a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
+++ b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
@@ -2,6 +2,7 @@ import Link from "next/link"
 import type { SubscriptionPlanWithPrice, UserSubscriptionPlan } from "@/types"
 import { CheckIcon } from "@radix-ui/react-icons"
 
+import { type getUserUsageMetrics } from "@/lib/queries/user"
 import { getPlanLimits } from "@/lib/subscription"
 import { cn, formatDate } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
@@ -20,22 +21,17 @@ import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
 interface BillingProps {
   subscriptionPlanPromise: Promise<UserSubscriptionPlan | null>
   subscriptionPlansPromise: Promise<SubscriptionPlanWithPrice[]>
-  usagePromise: Promise<{
-    storeCount: number
-    productCount: number
-  }>
+  usageMetricsPromise: ReturnType<typeof getUserUsageMetrics>
 }
 
 export async function Billing({
   subscriptionPlanPromise,
   subscriptionPlansPromise,
-  usagePromise,
+  usageMetricsPromise,
 }: BillingProps) {
-  const [subscriptionPlan, subscriptionPlans, usage] = await Promise.all([
-    subscriptionPlanPromise,
-    subscriptionPlansPromise,
-    usagePromise,
-  ])
+  const [subscriptionPlan, subscriptionPlans, usageMetrics] = await Promise.all(
+    [subscriptionPlanPromise, subscriptionPlansPromise, usageMetricsPromise]
+  )
 
   const { storeLimit, productLimit } = getPlanLimits({
     planTitle: subscriptionPlan?.title,
@@ -68,13 +64,13 @@ export async function Billing({
         <CardContent className="grid gap-6 sm:grid-cols-2">
           <UsageCard
             title="Stores"
-            count={usage.storeCount}
+            count={usageMetrics.storeCount}
             limit={storeLimit}
             moreInfo="The number of stores you can create on the current plan."
           />
           <UsageCard
             title="Products"
-            count={usage.productCount}
+            count={usageMetrics.productCount}
             limit={productLimit}
             moreInfo="The number of products you can create on the current plan."
           />
diff --git a/src/app/(dashboard)/dashboard/billing/page.tsx b/src/app/(dashboard)/dashboard/billing/page.tsx
index 08c6c21d..ac79e92c 100644
--- a/src/app/(dashboard)/dashboard/billing/page.tsx
+++ b/src/app/(dashboard)/dashboard/billing/page.tsx
@@ -5,7 +5,7 @@ import { env } from "@/env.js"
 import { RocketIcon } from "@radix-ui/react-icons"
 
 import { getSubscriptionPlan, getSubscriptionPlans } from "@/lib/actions/stripe"
-import { getCachedUser, getUsage } from "@/lib/queries/user"
+import { getCachedUser, getUserUsageMetrics } from "@/lib/queries/user"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import {
   PageHeader,
@@ -32,7 +32,7 @@ export default async function BillingPage() {
 
   const subscriptionPlanPromise = getSubscriptionPlan({ userId: user.id })
   const subscriptionPlansPromise = getSubscriptionPlans()
-  const usagePromise = getUsage({ userId: user.id })
+  const usageMetricsPromise = getUserUsageMetrics({ userId: user.id })
 
   return (
     <Shell variant="sidebar">
@@ -63,7 +63,7 @@ export default async function BillingPage() {
         <Billing
           subscriptionPlanPromise={subscriptionPlanPromise}
           subscriptionPlansPromise={subscriptionPlansPromise}
-          usagePromise={usagePromise}
+          usageMetricsPromise={usageMetricsPromise}
         />
       </React.Suspense>
     </Shell>
diff --git a/src/app/(dashboard)/dashboard/layout.tsx b/src/app/(dashboard)/dashboard/layout.tsx
index 8acc00fa..ee063aa7 100644
--- a/src/app/(dashboard)/dashboard/layout.tsx
+++ b/src/app/(dashboard)/dashboard/layout.tsx
@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation"
 
 import { getStoresByUserId } from "@/lib/actions/store"
-import { getCachedUser, getProgress } from "@/lib/queries/user"
+import { getCachedUser, getUserPlanMetrics } from "@/lib/queries/user"
 import { SiteFooter } from "@/components/layouts/site-footer"
 
 import { DashboardHeader } from "./_components/dashboard-header"
@@ -20,7 +20,7 @@ export default async function DashboardLayout({
   }
 
   const storesPromise = getStoresByUserId({ userId: user.id })
-  const progressPromise = getProgress({ userId: user.id })
+  const planMetricsPromise = getUserPlanMetrics({ userId: user.id })
 
   return (
     <SidebarProvider>
@@ -31,7 +31,7 @@ export default async function DashboardLayout({
               <StoreSwitcher
                 userId={user.id}
                 storesPromise={storesPromise}
-                progressPromise={progressPromise}
+                planMetricsPromise={planMetricsPromise}
               />
             </DashboardSidebar>
           </DashboardSidebarSheet>
@@ -44,7 +44,7 @@ export default async function DashboardLayout({
             <StoreSwitcher
               userId={user.id}
               storesPromise={storesPromise}
-              progressPromise={progressPromise}
+              planMetricsPromise={planMetricsPromise}
             />
           </DashboardSidebar>
           <main className="flex w-full flex-col overflow-hidden">
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/add-product-form.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
similarity index 96%
rename from src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/add-product-form.tsx
rename to src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
index f12cabc7..9deb58e1 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/add-product-form.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
@@ -13,8 +13,8 @@ import {
 } from "@/lib/actions/product"
 import { getErrorMessage } from "@/lib/handle-error"
 import {
-  addProductSchema,
-  type AddProductSchema,
+  createProductSchema,
+  type CreateProductSchema,
 } from "@/lib/validations/product"
 import { useUploadFile } from "@/hooks/use-upload-file"
 import { Button } from "@/components/ui/button"
@@ -48,7 +48,7 @@ import { FilesCard } from "@/components/cards/FilesCard"
 import { FileUploader } from "@/components/file-uploader"
 import { Icons } from "@/components/icons"
 
-interface AddProductFormProps {
+interface CreateProductFormProps {
   storeId: string
   promises: Promise<{
     categories: Awaited<ReturnType<typeof getCategories>>
@@ -56,15 +56,18 @@ interface AddProductFormProps {
   }>
 }
 
-export function AddProductForm({ storeId, promises }: AddProductFormProps) {
+export function CreateProductForm({
+  storeId,
+  promises,
+}: CreateProductFormProps) {
   const { categories, subcategories } = React.use(promises)
 
   const [loading, setLoading] = React.useState(false)
   const { uploadFiles, progresses, uploadedFiles, isUploading } =
     useUploadFile("productImage")
 
-  const form = useForm<AddProductSchema>({
-    resolver: zodResolver(addProductSchema),
+  const form = useForm<CreateProductSchema>({
+    resolver: zodResolver(createProductSchema),
     defaultValues: {
       name: "",
       description: "",
@@ -76,7 +79,7 @@ export function AddProductForm({ storeId, promises }: AddProductFormProps) {
     },
   })
 
-  function onSubmit(input: AddProductSchema) {
+  function onSubmit(input: CreateProductSchema) {
     setLoading(true)
 
     toast.promise(
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/page.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/page.tsx
index 3992dd67..baf35b9b 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/page.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/page.tsx
@@ -12,7 +12,7 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 
-import { AddProductForm } from "./_components/add-product-form"
+import { CreateProductForm } from "./_components/create-product-form"
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),
@@ -46,7 +46,7 @@ export default async function NewProductPage({ params }: NewProductPageProps) {
         <CardDescription>Add a new product to your store</CardDescription>
       </CardHeader>
       <CardContent>
-        <AddProductForm storeId={storeId} promises={promises} />
+        <CreateProductForm storeId={storeId} promises={promises} />
       </CardContent>
     </Card>
   )
diff --git a/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx b/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
similarity index 63%
rename from src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx
rename to src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
index e8241f08..0ac336e6 100644
--- a/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx
+++ b/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
@@ -5,12 +5,15 @@ import { useRouter } from "next/navigation"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm, type UseFormReturn } from "react-hook-form"
 import { toast } from "sonner"
-import type { z } from "zod"
 
 import { addStore } from "@/lib/actions/store"
-import { type getProgress } from "@/lib/queries/user"
+import { type getUserPlanMetrics } from "@/lib/queries/user"
 import { cn } from "@/lib/utils"
-import { addStoreSchema } from "@/lib/validations/store"
+import {
+  createStoreSchema,
+  type CreateStoreSchema,
+} from "@/lib/validations/store"
+import { useControllableState } from "@/hooks/use-controllable-state"
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { Button } from "@/components/ui/button"
 import {
@@ -46,70 +49,64 @@ import {
 } from "@/components/ui/hover-card"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
-import { UsageCard } from "@/components/cards/usage-card"
 import { Icons } from "@/components/icons"
 import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
 
-interface AddStoreDialogProps
+interface CreateStoreDialogProps
   extends React.ComponentPropsWithoutRef<typeof Dialog> {
   userId: string
-  progressPromise: ReturnType<typeof getProgress>
+  planMetricsPromise: ReturnType<typeof getUserPlanMetrics>
   showTrigger?: boolean
 }
 
-type Progress = Awaited<ReturnType<typeof getProgress>>
-
-type Inputs = z.infer<typeof addStoreSchema>
+type PlanMetrics = Awaited<ReturnType<typeof getUserPlanMetrics>>
 
-export function AddStoreDialog({
+export function CreateStoreDialog({
   userId,
-  progressPromise,
+  planMetricsPromise,
+  open: openProp,
   onOpenChange,
+  defaultOpen,
   showTrigger = true,
   ...props
-}: AddStoreDialogProps) {
+}: CreateStoreDialogProps) {
   const router = useRouter()
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  })
   const [loading, setLoading] = React.useState(false)
   const isDesktop = useMediaQuery("(min-width: 640px)")
 
-  const progress = React.use(progressPromise)
+  const planMetrics = React.use(planMetricsPromise)
 
-  // react-hook-form
-  const form = useForm<Inputs>({
-    resolver: zodResolver(addStoreSchema),
+  const form = useForm<CreateStoreSchema>({
+    resolver: zodResolver(createStoreSchema),
     defaultValues: {
       name: "",
       description: "",
     },
   })
 
-  function onToggle(open: boolean) {
-    setOpen(open)
-    onOpenChange?.(open)
-  }
-
-  async function onSubmit(data: Inputs) {
+  async function onSubmit(input: CreateStoreSchema) {
     setLoading(true)
 
-    try {
-      const { data: store, error } = await addStore({ ...data, userId })
+    const { data, error } = await addStore({ ...input, userId })
 
-      if (store) {
-        router.push(`/dashboard/stores/${store.id}`)
-        toast.success("Store created")
-        return
-      }
+    if (error) {
+      toast.error(error)
+      return
+    }
 
-      if (error) {
-        toast.error(error)
-        return
-      }
-    } finally {
-      setLoading(false)
-      onToggle(false)
-      form.reset()
+    if (data) {
+      router.push(`/dashboard/stores/${data.id}`)
+      toast.success("Store created")
     }
+
+    setLoading(false)
+    setOpen(false)
+    form.reset()
   }
 
   if (isDesktop) {
@@ -120,12 +117,12 @@ export function AddStoreDialog({
           if (!open) {
             form.reset()
           }
-          onToggle(open)
+          setOpen(open)
         }}
         {...props}
       >
         <DynamicTrigger
-          progress={progress}
+          planMetrics={planMetrics}
           isDesktop={isDesktop}
           showTrigger={showTrigger}
         />
@@ -136,15 +133,15 @@ export function AddStoreDialog({
               Create a new store to manage your products
             </DialogDescription>
           </DialogHeader>
-          <AddStoreForm form={form} onSubmit={onSubmit}>
+          <CreateStoreForm form={form} onSubmit={onSubmit}>
             <DialogFooter className="pt-4">
               <FormFooter
                 loading={loading}
-                progress={progress}
-                onToggle={onToggle}
+                planMetrics={planMetrics}
+                onToggle={() => setOpen(false)}
               />
             </DialogFooter>
-          </AddStoreForm>
+          </CreateStoreForm>
         </DialogContent>
       </Dialog>
     )
@@ -163,7 +160,7 @@ export function AddStoreDialog({
       {...props}
     >
       <DynamicTrigger
-        progress={progress}
+        planMetrics={planMetrics}
         isDesktop={isDesktop}
         showTrigger={showTrigger}
       />
@@ -174,34 +171,34 @@ export function AddStoreDialog({
             Create a new store to manage your products
           </DrawerDescription>
         </DrawerHeader>
-        <AddStoreForm form={form} onSubmit={onSubmit} className="px-4">
+        <CreateStoreForm form={form} onSubmit={onSubmit} className="px-4">
           <DrawerFooter className="flex-col-reverse px-0">
             <FormFooter
               loading={loading}
-              progress={progress}
-              onToggle={onToggle}
+              planMetrics={planMetrics}
+              onToggle={() => setOpen(false)}
             />
           </DrawerFooter>
-        </AddStoreForm>
+        </CreateStoreForm>
       </DrawerContent>
     </Drawer>
   )
 }
 
-interface AddStoreFormProps
+interface CreateStoreFormProps
   extends Omit<React.ComponentPropsWithRef<"form">, "onSubmit"> {
   children: React.ReactNode
-  form: UseFormReturn<Inputs>
-  onSubmit: (data: Inputs) => void
+  form: UseFormReturn<CreateStoreSchema>
+  onSubmit: (data: CreateStoreSchema) => void
 }
 
-function AddStoreForm({
+function CreateStoreForm({
   children,
   form,
   onSubmit,
   className,
   ...props
-}: AddStoreFormProps) {
+}: CreateStoreFormProps) {
   return (
     <Form {...form}>
       <form
@@ -247,11 +244,13 @@ function AddStoreForm({
 
 interface FormFooterProps {
   loading: boolean
-  progress: Progress
+  planMetrics: PlanMetrics
   onToggle: (open: boolean) => void
 }
 
-function FormFooter({ onToggle, loading, progress }: FormFooterProps) {
+function FormFooter({ onToggle, loading, planMetrics }: FormFooterProps) {
+  const { storeLimitExceeded, productLimitExceeded } = planMetrics
+
   return (
     <>
       <Button type="button" variant="outline" onClick={() => onToggle(false)}>
@@ -259,11 +258,7 @@ function FormFooter({ onToggle, loading, progress }: FormFooterProps) {
       </Button>
       <Button
         type="submit"
-        disabled={
-          loading ||
-          progress.storeCount >= progress.storeLimit ||
-          progress.productCount >= progress.productLimit
-        }
+        disabled={loading || storeLimitExceeded || productLimitExceeded}
       >
         {loading && (
           <Icons.spinner
@@ -278,13 +273,13 @@ function FormFooter({ onToggle, loading, progress }: FormFooterProps) {
 }
 
 interface DynamicTriggerProps {
-  progress: Progress
+  planMetrics: PlanMetrics
   isDesktop: boolean
   showTrigger?: boolean
 }
 
 function DynamicTrigger({
-  progress,
+  planMetrics,
   showTrigger,
   isDesktop,
 }: DynamicTriggerProps) {
@@ -292,20 +287,20 @@ function DynamicTrigger({
 
   const {
     storeLimit,
-    storeCount,
     productLimit,
-    productCount,
+    storeLimitExceeded,
+    productLimitExceeded,
     subscriptionPlan,
-  } = progress
+  } = planMetrics
 
-  const storeLimitReached = storeCount >= storeLimit
-  const productLimitReached = productCount >= productLimit
-
-  if (storeLimitReached || productLimitReached) {
+  if (storeLimitExceeded || productLimitExceeded) {
     return (
       <HoverCard>
         <HoverCardTrigger asChild>
-          <Button className="cursor-not-allowed opacity-50 hover:bg-primary">
+          <Button
+            size="sm"
+            className="cursor-not-allowed opacity-50 hover:bg-primary"
+          >
             Create store
           </Button>
         </HoverCardTrigger>
@@ -314,33 +309,21 @@ function DynamicTrigger({
           align="end"
           sideOffset={8}
         >
-          {storeLimitReached ? (
-            <div className="space-y-3">
-              <div className="text-sm text-muted-foreground">
-                You&apos;ve reached the limit of{" "}
-                <span className="font-bold">{storeLimit}</span> stores for the{" "}
-                <span className="font-bold">{subscriptionPlan?.title}</span>{" "}
-                plan.
-              </div>
-              <UsageCard title="Stores" count={storeCount} limit={storeLimit} />
+          {storeLimitExceeded && (
+            <div className="text-sm text-muted-foreground">
+              You&apos;ve reached the limit of{" "}
+              <span className="font-bold">{storeLimit}</span> stores for the{" "}
+              <span className="font-bold">{subscriptionPlan?.title}</span> plan.
             </div>
-          ) : null}
-          {productLimitReached ? (
-            <div className="space-y-3">
-              <div className="text-sm text-muted-foreground">
-                You&apos;ve reached the limit of{" "}
-                <span className="font-bold">{productLimit}</span> products for
-                the <span className="font-bold">{subscriptionPlan?.title}</span>{" "}
-                plan.
-              </div>
-              <UsageCard
-                title="Products"
-                count={productCount}
-                limit={productLimit}
-              />
+          )}
+          {productLimitExceeded && (
+            <div className="text-sm text-muted-foreground">
+              You&apos;ve reached the limit of{" "}
+              <span className="font-bold">{productLimit}</span> products for the{" "}
+              <span className="font-bold">{subscriptionPlan?.title}</span> plan.
             </div>
-          ) : null}
-          {subscriptionPlan ? (
+          )}
+          {subscriptionPlan && (
             <ManageSubscriptionForm
               stripePriceId={subscriptionPlan.stripePriceId}
               stripeCustomerId={subscriptionPlan.stripeCustomerId}
@@ -348,7 +331,7 @@ function DynamicTrigger({
               isSubscribed={subscriptionPlan.isSubscribed ?? false}
               isCurrentPlan={subscriptionPlan.title === "Standard"}
             />
-          ) : null}
+          )}
         </HoverCardContent>
       </HoverCard>
     )
@@ -357,14 +340,14 @@ function DynamicTrigger({
   if (isDesktop) {
     return (
       <DialogTrigger asChild>
-        <Button>Create store</Button>
+        <Button size="sm">Create store</Button>
       </DialogTrigger>
     )
   }
 
   return (
     <DrawerTrigger asChild>
-      <Button>Create store</Button>
+      <Button size="sm">Create store</Button>
     </DrawerTrigger>
   )
 }
diff --git a/src/app/(dashboard)/dashboard/stores/page.tsx b/src/app/(dashboard)/dashboard/stores/page.tsx
index 1ec32187..47c93d6f 100644
--- a/src/app/(dashboard)/dashboard/stores/page.tsx
+++ b/src/app/(dashboard)/dashboard/stores/page.tsx
@@ -4,7 +4,7 @@ import { redirect } from "next/navigation"
 import { env } from "@/env.js"
 
 import { getStoresByUserId } from "@/lib/actions/store"
-import { getCachedUser, getProgress } from "@/lib/queries/user"
+import { getCachedUser, getUserPlanMetrics } from "@/lib/queries/user"
 import {
   PageHeader,
   PageHeaderDescription,
@@ -13,7 +13,7 @@ import {
 import { Shell } from "@/components/shell"
 import { StoreCardSkeleton } from "@/components/skeletons/store-card-skeleton"
 
-import { AddStoreDialog } from "./_components/add-store-dialog"
+import { CreateStoreDialog } from "./_components/create-store-dialog"
 import { Stores } from "./_components/stores"
 
 export const metadata: Metadata = {
@@ -30,7 +30,7 @@ export default async function StoresPage() {
   }
 
   const storesPromise = getStoresByUserId({ userId: user.id })
-  const progressPromise = getProgress({ userId: user.id })
+  const planMetricsPromise = getUserPlanMetrics({ userId: user.id })
 
   return (
     <Shell variant="sidebar">
@@ -39,7 +39,10 @@ export default async function StoresPage() {
           <PageHeaderHeading size="sm" className="flex-1">
             Stores
           </PageHeaderHeading>
-          <AddStoreDialog userId={user.id} progressPromise={progressPromise} />
+          <CreateStoreDialog
+            userId={user.id}
+            planMetricsPromise={planMetricsPromise}
+          />
         </div>
         <PageHeaderDescription size="sm">
           Manage your stores
diff --git a/src/app/(lobby)/_components/category-card-skeleton.tsx b/src/app/(lobby)/_components/category-card-skeleton.tsx
index 36b9a06e..0b913043 100644
--- a/src/app/(lobby)/_components/category-card-skeleton.tsx
+++ b/src/app/(lobby)/_components/category-card-skeleton.tsx
@@ -3,11 +3,13 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 export function CategoryCardSkeleton() {
   return (
-    <Card className="flex size-full flex-col bg-muted p-4">
-      <Skeleton className="size-10" />
-      <div className="flex flex-1 flex-col space-y-1.5 pb-4 pt-10">
+    <Card className="flex size-full flex-col gap-4 rounded-md p-5">
+      <div className="flex flex-1 flex-col space-y-1.5">
         <Skeleton className="h-6 w-20" />
-        <Skeleton className="h-4 w-full" />
+        <div className="space-y-1">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+        </div>
       </div>
       <Skeleton className="h-4 w-20" />
     </Card>
diff --git a/src/app/(lobby)/_components/category-card.tsx b/src/app/(lobby)/_components/category-card.tsx
index 37ad1a3e..fe690347 100644
--- a/src/app/(lobby)/_components/category-card.tsx
+++ b/src/app/(lobby)/_components/category-card.tsx
@@ -2,9 +2,9 @@ import * as React from "react"
 import Link from "next/link"
 
 import { getProductCount, type getCategories } from "@/lib/actions/product"
+import { Badge } from "@/components/ui/badge"
 import { Card, CardDescription, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Icons } from "@/components/icons"
 
 interface CategoryCardProps {
   category: Awaited<ReturnType<typeof getCategories>>[number]
@@ -17,14 +17,12 @@ export function CategoryCard({ category }: CategoryCardProps) {
 
   return (
     <Link href={`/collections/${category.slug}`}>
-      <Card className="relative flex size-full flex-col bg-muted p-4 transition-colors hover:bg-muted/50">
-        <Icons.product
-          className="size-10 text-muted-foreground"
-          aria-hidden="true"
-        />
-        <div className="flex flex-1 flex-col space-y-1.5 pb-4 pt-10">
+      <Card className="flex size-full flex-col gap-4 rounded-md p-5 transition-colors hover:bg-muted/25">
+        <div className="flex flex-1 flex-col space-y-1">
           <CardTitle className="capitalize">{category.name}</CardTitle>
-          <CardDescription>{category.description}</CardDescription>
+          <CardDescription className="line-clamp-3 text-balance">
+            {category.description}
+          </CardDescription>
         </div>
         <React.Suspense
           fallback={
@@ -45,7 +43,14 @@ interface ProductCountProps {
 }
 
 async function ProductCount({ productCountPromise }: ProductCountProps) {
-  const { data } = await productCountPromise
+  const count = await productCountPromise
 
-  return <CardDescription>{data.count} products</CardDescription>
+  return (
+    <Badge
+      variant="secondary"
+      className="pointer-events-none w-fit rounded font-medium"
+    >
+      {count} products
+    </Badge>
+  )
 }
diff --git a/src/components/join-newsletter-form.tsx b/src/components/join-newsletter-form.tsx
index 3a0ff26c..05c963d7 100644
--- a/src/components/join-newsletter-form.tsx
+++ b/src/components/join-newsletter-form.tsx
@@ -5,9 +5,9 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { PaperPlaneIcon } from "@radix-ui/react-icons"
 import { useForm } from "react-hook-form"
 import { toast } from "sonner"
-import type { z } from "zod"
 
-import { emailSchema } from "@/lib/validations/notification"
+import { unknownError } from "@/lib/constants"
+import { emailSchema, type EmailSchema } from "@/lib/validations/notification"
 import { Button } from "@/components/ui/button"
 import {
   Form,
@@ -20,26 +20,24 @@ import {
 import { Input } from "@/components/ui/input"
 import { Icons } from "@/components/icons"
 
-type Inputs = z.infer<typeof emailSchema>
-
 export function JoinNewsletterForm() {
-  const [isPending, startTransition] = React.useTransition()
+  const [loading, setLoading] = React.useState(false)
 
   // react-hook-form
-  const form = useForm<Inputs>({
+  const form = useForm<EmailSchema>({
     resolver: zodResolver(emailSchema),
     defaultValues: {
       email: "",
     },
   })
 
-  function onSubmit(data: Inputs) {
-    startTransition(async () => {
+  async function onSubmit(data: EmailSchema) {
+    setLoading(true)
+    try {
       const response = await fetch("/api/email/newsletter", {
         method: "POST",
         body: JSON.stringify({
           email: data.email,
-          // This token is used as a search param in the email preferences page to identify the subscriber.
           token: crypto.randomUUID(),
           subject: "Welcome to Skateshop13",
         }),
@@ -56,18 +54,20 @@ export function JoinNewsletterForm() {
           case 429:
             toast.error("The daily email limit has been reached.")
             break
-          case 500:
-            toast.error("Something went wrong. Please try again later.")
-            break
           default:
-            toast.error("Something went wrong. Please try again later.")
+            toast.error(unknownError)
         }
         return
       }
 
       toast.success("You have been subscribed to our newsletter.")
       form.reset()
-    })
+    } catch (err) {
+      console.log(err)
+      toast.error(unknownError)
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -94,9 +94,9 @@ export function JoinNewsletterForm() {
               <Button
                 className="absolute right-[3.5px] top-[4px] z-20 size-7"
                 size="icon"
-                disabled={isPending}
+                disabled={loading}
               >
-                {isPending ? (
+                {loading ? (
                   <Icons.spinner
                     className="size-3 animate-spin"
                     aria-hidden="true"
diff --git a/src/components/layouts/sidebar-nav.tsx b/src/components/layouts/sidebar-nav.tsx
index daef1144..91f05132 100644
--- a/src/components/layouts/sidebar-nav.tsx
+++ b/src/components/layouts/sidebar-nav.tsx
@@ -7,6 +7,7 @@ import { ChevronLeftIcon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
+import { useSidebar } from "@/app/(dashboard)/dashboard/_components/sidebar-provider"
 
 export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
   items: SidebarNavItem[]
@@ -14,6 +15,7 @@ export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function SidebarNav({ items, className, ...props }: SidebarNavProps) {
   const segment = useSelectedLayoutSegment()
+  const { open, setOpen } = useSidebar()
 
   if (!items?.length) return null
 
@@ -32,6 +34,9 @@ export function SidebarNav({ items, className, ...props }: SidebarNavProps) {
             href={item.href}
             target={item.external ? "_blank" : ""}
             rel={item.external ? "noreferrer" : ""}
+            onClick={() => {
+              if (open) setOpen(false)
+            }}
           >
             <span
               className={cn(
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 65661a52..7dd62eeb 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index 7ed3234b..5d0e20dd 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,15 +1,15 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Toaster as RadToaster } from "sonner"
+import { Toaster as Sonner } from "sonner"
 
-type ToasterProps = React.ComponentProps<typeof RadToaster>
+type ToasterProps = React.ComponentProps<typeof Sonner>
 
 function Toaster({ ...props }: ToasterProps) {
   const { theme = "system" } = useTheme()
 
   return (
-    <RadToaster
+    <Sonner
       theme={theme as ToasterProps["theme"]}
       // eslint-disable-next-line tailwindcss/no-custom-classname
       className="toaster group"
diff --git a/src/lib/actions/product.ts b/src/lib/actions/product.ts
index d2783994..dc2813c3 100644
--- a/src/lib/actions/product.ts
+++ b/src/lib/actions/product.ts
@@ -20,8 +20,8 @@ import { type z } from "zod"
 import { getErrorMessage } from "@/lib/handle-error"
 import {
   getProductsSchema,
-  type AddProductSchema,
-  type addProductSchema,
+  type CreateProductSchema,
+  type createProductSchema,
   type updateProductRatingSchema,
 } from "@/lib/validations/product"
 
@@ -168,7 +168,7 @@ export async function getProductCount({ categoryId }: { categoryId: string }) {
   noStore()
 
   try {
-    const total = await db
+    return await db
       .select({
         count: count(products.id),
       })
@@ -176,20 +176,8 @@ export async function getProductCount({ categoryId }: { categoryId: string }) {
       .where(eq(products.categoryId, categoryId))
       .execute()
       .then((res) => res[0]?.count ?? 0)
-
-    return {
-      data: {
-        count: total,
-      },
-      error: null,
-    }
   } catch (err) {
-    return {
-      data: {
-        count: 0,
-      },
-      error: getErrorMessage(err),
-    }
+    return 0
   }
 }
 
@@ -299,7 +287,7 @@ export async function filterProducts({ query }: { query: string }) {
 }
 
 export async function addProduct(
-  input: Omit<AddProductSchema, "images"> & {
+  input: Omit<CreateProductSchema, "images"> & {
     storeId: string
     images: StoredFile[]
   }
@@ -336,7 +324,7 @@ export async function addProduct(
 }
 
 export async function updateProduct(
-  input: z.infer<typeof addProductSchema> & { id: string; storeId: string }
+  input: z.infer<typeof createProductSchema> & { id: string; storeId: string }
 ) {
   try {
     const product = await db.query.products.findFirst({
diff --git a/src/lib/actions/store.ts b/src/lib/actions/store.ts
index 2b865aa9..f45c44f3 100644
--- a/src/lib/actions/store.ts
+++ b/src/lib/actions/store.ts
@@ -10,14 +10,13 @@ import { db } from "@/db"
 import { products, stores, type Store } from "@/db/schema"
 import type { SearchParams } from "@/types"
 import { and, asc, count, desc, eq, isNull, not, sql } from "drizzle-orm"
-import { type z } from "zod"
 
 import { getErrorMessage } from "@/lib/handle-error"
 import { slugify } from "@/lib/utils"
 import {
   getStoresSchema,
   updateStoreSchema,
-  type addStoreSchema,
+  type CreateStoreSchema,
 } from "@/lib/validations/store"
 
 export async function getFeaturedStores() {
@@ -164,9 +163,7 @@ export async function getStores(input: SearchParams) {
   }
 }
 
-export async function addStore(
-  input: z.infer<typeof addStoreSchema> & { userId: string }
-) {
+export async function addStore(input: CreateStoreSchema & { userId: string }) {
   noStore()
   try {
     const storeWithSameName = await db.query.stores.findFirst({
diff --git a/src/lib/queries/user.ts b/src/lib/queries/user.ts
index 4c2d9926..d7719f88 100644
--- a/src/lib/queries/user.ts
+++ b/src/lib/queries/user.ts
@@ -25,7 +25,7 @@ export const getCachedUser = cache(async () => {
   }
 })
 
-export async function getUsage(input: { userId: string }) {
+export async function getUserUsageMetrics(input: { userId: string }) {
   noStore()
   try {
     const data = await db
@@ -52,7 +52,7 @@ export async function getUsage(input: { userId: string }) {
   }
 }
 
-export async function getProgress(input: { userId: string }) {
+export async function getUserPlanMetrics(input: { userId: string }) {
   noStore()
 
   const fallback = {
@@ -60,6 +60,8 @@ export async function getProgress(input: { userId: string }) {
     storeLimit: 0,
     productCount: 0,
     productLimit: 0,
+    storeLimitExceeded: false,
+    productLimitExceeded: false,
     subscriptionPlan: null,
   }
 
@@ -70,7 +72,7 @@ export async function getProgress(input: { userId: string }) {
       return fallback
     }
 
-    const { storeCount, productCount } = await getUsage({
+    const { storeCount, productCount } = await getUserUsageMetrics({
       userId: input.userId,
     })
 
@@ -78,11 +80,16 @@ export async function getProgress(input: { userId: string }) {
       planTitle: subscriptionPlan.title,
     })
 
+    const storeLimitExceeded = storeCount >= storeLimit
+    const productLimitExceeded = productCount >= productLimit
+
     return {
       storeCount,
       storeLimit,
       productCount,
       productLimit,
+      storeLimitExceeded,
+      productLimitExceeded,
       subscriptionPlan,
     }
   } catch (err) {
diff --git a/src/lib/validations/auth.ts b/src/lib/validations/auth.ts
index dec4f05d..b3a8e89c 100644
--- a/src/lib/validations/auth.ts
+++ b/src/lib/validations/auth.ts
@@ -45,3 +45,7 @@ export const userPrivateMetadataSchema = z.object({
   stripeCustomerId: z.string().optional().nullable(),
   stripeCurrentPeriodEnd: z.string().optional().nullable(),
 })
+
+export type UserPrivateMetadataSchema = z.infer<
+  typeof userPrivateMetadataSchema
+>
diff --git a/src/lib/validations/notification.ts b/src/lib/validations/notification.ts
index 831223c6..d1eaa081 100644
--- a/src/lib/validations/notification.ts
+++ b/src/lib/validations/notification.ts
@@ -18,3 +18,7 @@ export const updateNotificationSchema = z.object({
   transactional: z.boolean().default(false).optional(),
   marketing: z.boolean().default(false).optional(),
 })
+
+export type EmailSchema = z.infer<typeof emailSchema>
+export type JoinNewsletterSchema = z.infer<typeof joinNewsletterSchema>
+export type UpdateNotificationSchema = z.infer<typeof updateNotificationSchema>
diff --git a/src/lib/validations/product.ts b/src/lib/validations/product.ts
index f426ecf0..a3412787 100644
--- a/src/lib/validations/product.ts
+++ b/src/lib/validations/product.ts
@@ -1,6 +1,6 @@
 import * as z from "zod"
 
-export const addProductSchema = z.object({
+export const createProductSchema = z.object({
   name: z.string().min(1, {
     message: "Must be at least 1 character",
   }),
@@ -63,7 +63,7 @@ export const updateProductRatingSchema = z.object({
   rating: z.number(),
 })
 
-export type AddProductSchema = z.infer<typeof addProductSchema>
+export type CreateProductSchema = z.infer<typeof createProductSchema>
 export type UpdateProductSchema = z.infer<typeof updateProductSchema>
 export type FilterProductsSchema = z.infer<typeof filterProductsSchema>
 export type GetProductInventorySchema = z.infer<
diff --git a/src/lib/validations/store.ts b/src/lib/validations/store.ts
index 929ff974..144370fd 100644
--- a/src/lib/validations/store.ts
+++ b/src/lib/validations/store.ts
@@ -2,7 +2,7 @@ import * as z from "zod"
 
 import { slugify } from "@/lib/utils"
 
-export const addStoreSchema = z
+export const createStoreSchema = z
   .object({
     name: z.string().min(3).max(50),
     description: z.string().optional(),
@@ -39,3 +39,8 @@ export const updateStoreSchema = z.object({
   name: z.string().min(3).max(50),
   description: z.string().optional(),
 })
+
+export type CreateStoreSchema = z.infer<typeof createStoreSchema>
+export type GetStoreSchema = z.infer<typeof getStoreSchema>
+export type GetStoresSchema = z.infer<typeof getStoresSchema>
+export type UpdateStoreSchema = z.infer<typeof updateStoreSchema>
diff --git a/src/middleware.ts b/src/middleware.ts
index bf2a4a12..98e7507f 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -6,12 +6,9 @@ export default clerkMiddleware((auth, req) => {
   if (isProtectedRoute(req)) {
     const url = new URL(req.nextUrl.origin)
 
-    const unauthenticatedUrl = `${url.origin}/signin`
-    const unauthorizedUrl = `${url.origin}/dashboard/stores`
-
     auth().protect({
-      unauthenticatedUrl,
-      unauthorizedUrl,
+      unauthenticatedUrl: `${url.origin}/signin`,
+      unauthorizedUrl: `${url.origin}/dashboard/stores`,
     })
   }
 })
diff --git a/src/types/index.ts b/src/types/index.ts
index 9b5385c5..b2b3e77a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,9 +2,7 @@ import { type SQL } from "drizzle-orm"
 import { type FileWithPath } from "react-dropzone"
 import type Stripe from "stripe"
 import { type ClientUploadedFileData } from "uploadthing/types"
-import { type z } from "zod"
 
-import { type userPrivateMetadataSchema } from "@/lib/validations/auth"
 import type { Icons } from "@/components/icons"
 
 export interface NavItem {
@@ -38,8 +36,6 @@ export type MainNavItem = NavItemWithOptionalChildren
 
 export type SidebarNavItem = NavItemWithChildren
 
-export type UserRole = z.infer<typeof userPrivateMetadataSchema.shape.role>
-
 export interface SearchParams {
   [key: string]: string | string[] | undefined
 }