diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index c8c1f6e0..6d1a3077 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -20,7 +20,7 @@ export default function AuthLayout({ children }: React.PropsWithChildren) {
       <div className="relative aspect-video size-full">
         <Image
           src="/images/auth-layout.webp"
-          alt="A skateboarder doing a high drop"
+          alt="A skateboarder dropping into a bowl"
           fill
           className="absolute inset-0 object-cover"
           priority
diff --git a/src/app/(checkout)/checkout/[storeId]/error.tsx b/src/app/(checkout)/checkout/[storeId]/error.tsx
index deecd0d9..deda8046 100644
--- a/src/app/(checkout)/checkout/[storeId]/error.tsx
+++ b/src/app/(checkout)/checkout/[storeId]/error.tsx
@@ -3,7 +3,7 @@
 // Error components must be Client Components
 import * as React from "react"
 
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function StoreCheckoutError({
diff --git a/src/app/(dashboard)/dashboard/_components/dashboard-header.tsx b/src/app/(dashboard)/dashboard/_components/dashboard-header.tsx
index 220cdb84..d17d8249 100644
--- a/src/app/(dashboard)/dashboard/_components/dashboard-header.tsx
+++ b/src/app/(dashboard)/dashboard/_components/dashboard-header.tsx
@@ -1,8 +1,5 @@
-import Link from "next/link"
 import type { User } from "@clerk/nextjs/server"
 
-import { siteConfig } from "@/config/site"
-import { Icons } from "@/components/icons"
 import { AuthDropdown } from "@/components/layouts/auth-dropdown"
 
 interface DashboardHeaderProps {
@@ -12,15 +9,8 @@ interface DashboardHeaderProps {
 
 export function DashboardHeader({ user, children }: DashboardHeaderProps) {
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background">
-      <div className="container flex h-16 items-center">
-        <Link href="/" className="hidden items-center space-x-2 lg:flex">
-          <Icons.logo className="size-6" aria-hidden="true" />
-          <span className="hidden font-bold lg:inline-block">
-            {siteConfig.name}
-          </span>
-          <span className="sr-only">Home</span>
-        </Link>
+    <header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center px-6">
         {children}
         <div className="flex flex-1 items-center justify-end space-x-4">
           <nav className="flex items-center space-x-2">
diff --git a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar-sheet.tsx b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar-sheet.tsx
index 0d998dde..67f6cf41 100644
--- a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar-sheet.tsx
+++ b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar-sheet.tsx
@@ -2,11 +2,15 @@
 
 import Link from "next/link"
 
-import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { Button, type ButtonProps } from "@/components/ui/button"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTrigger,
+} from "@/components/ui/sheet"
 import { Icons } from "@/components/icons"
 
 import { useSidebar } from "./sidebar-provider"
@@ -41,19 +45,16 @@ export function DashboardSidebarSheet({
       </SheetTrigger>
       <SheetContent
         side="left"
-        className="inset-y-0 flex h-auto w-[300px] flex-col items-center px-0 pt-9"
+        className="inset-y-0 flex h-auto w-[18.75rem] flex-col items-center gap-4 px-0 py-4"
       >
-        <div className="w-full self-start px-7">
+        <SheetClose asChild>
           <Link
             href="/"
-            className="flex items-center"
-            onClick={() => setOpen(false)}
+            className="mx-6 flex items-center self-start font-heading tracking-wider text-foreground/90 transition-colors hover:text-foreground"
           >
-            <Icons.logo className="mr-2 size-4" aria-hidden="true" />
-            <span className="font-bold">{siteConfig.name}</span>
-            <span className="sr-only">Home</span>
+            <Icons.logo className="size-6" aria-hidden="true" />
           </Link>
-        </div>
+        </SheetClose>
         {children}
       </SheetContent>
     </Sheet>
diff --git a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
index 45b08721..2e69c4b4 100644
--- a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
+++ b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
@@ -1,8 +1,11 @@
 import * as React from "react"
+import Link from "next/link"
 
 import { dashboardConfig } from "@/config/dashboard"
+import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { Icons } from "@/components/icons"
 import { SidebarNav } from "@/components/layouts/sidebar-nav"
 
 interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
@@ -15,9 +18,20 @@ export function DashboardSidebar({
   ...props
 }: DashboardSidebarProps) {
   return (
-    <aside className={cn("w-full", className)} {...props}>
-      <div className="pr-6 pt-4 lg:pt-6">{children}</div>
-      <ScrollArea className="h-[calc(100vh-8rem)] py-2.5 pr-6">
+    <aside className={cn("h-screen w-full", className)} {...props}>
+      <div className="hidden h-[3.55rem] items-center border-b border-border/60 px-6 lg:flex">
+        <Link
+          href="/"
+          className="flex w-fit items-center font-heading tracking-wider text-foreground/90 transition-colors hover:text-foreground"
+        >
+          <Icons.logo className="mb-1 mr-2 size-6" aria-hidden="true" />
+          {siteConfig.name}
+        </Link>
+      </div>
+      <div className="flex flex-col gap-2.5 px-4 pt-2 lg:px-6 lg:pt-4">
+        {children}
+      </div>
+      <ScrollArea className="h-[calc(100vh-8rem)] px-3 py-2.5 lg:px-5">
         <SidebarNav items={dashboardConfig.sidebarNav} className="p-1 pt-4" />
       </ScrollArea>
     </aside>
diff --git a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
index 95605fe9..e0aaa53b 100644
--- a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
+++ b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
@@ -2,11 +2,12 @@
 
 import * as React from "react"
 import { useParams, usePathname, useRouter } from "next/navigation"
+import { DialogTitle } from "@radix-ui/react-dialog"
 import {
   CaretSortIcon,
   CheckIcon,
+  FrameIcon,
   PlusCircledIcon,
-  ShadowIcon,
 } from "@radix-ui/react-icons"
 
 import { type getStoresByUserId } from "@/lib/actions/store"
@@ -22,11 +23,13 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
+import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
+import { RateLimitAlert } from "@/components/rate-limit-alert"
 
 import { CreateStoreDialog } from "../stores/_components/create-store-dialog"
 
@@ -49,9 +52,12 @@ export function StoreSwitcher({
   const pathname = usePathname()
   const [open, setOpen] = React.useState(false)
   const [showNewStoreDialog, setShowNewStoreDialog] = React.useState(false)
+  const [showRateLimitDialog, setShowRateLimitDialog] = React.useState(false)
 
   const stores = React.use(storesPromise)
   const planMetrics = React.use(planMetricsPromise)
+  const rateLimitExceeded =
+    planMetrics.storeLimitExceeded || planMetrics.productLimitExceeded
 
   const selectedStore = stores.find((store) => store.id === storeId)
 
@@ -62,8 +68,15 @@ export function StoreSwitcher({
         planMetricsPromise={planMetricsPromise}
         open={showNewStoreDialog}
         onOpenChange={setShowNewStoreDialog}
-        showTrigger={false}
       />
+      <Dialog open={showRateLimitDialog} onOpenChange={setShowRateLimitDialog}>
+        <DialogContent className="gap-0">
+          <DialogHeader className="text-left">
+            <DialogTitle>Rate limit exceeded</DialogTitle>
+          </DialogHeader>
+          <RateLimitAlert planMetrics={planMetrics} />
+        </DialogContent>
+      </Dialog>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
@@ -76,7 +89,7 @@ export function StoreSwitcher({
           >
             {selectedStore?.name ?? "Select a store"}
             <CaretSortIcon
-              className="ml-auto size-3.5 shrink-0 opacity-50"
+              className="ml-auto size-4 shrink-0 opacity-50"
               aria-hidden="true"
             />
           </Button>
@@ -98,7 +111,10 @@ export function StoreSwitcher({
                     }}
                     className="text-sm"
                   >
-                    <ShadowIcon className="mr-2 size-5" aria-hidden="true" />
+                    <FrameIcon
+                      className="mr-2 size-4  text-muted-foreground"
+                      aria-hidden="true"
+                    />
                     {store.name}
                     <CheckIcon
                       className={cn(
@@ -118,12 +134,16 @@ export function StoreSwitcher({
               <CommandGroup>
                 <CommandItem
                   onSelect={() => {
+                    if (rateLimitExceeded) {
+                      setShowRateLimitDialog(true)
+                      return
+                    }
+
                     setOpen(false)
                     setShowNewStoreDialog(true)
                   }}
-                  disabled={planMetrics.storeLimitExceeded}
                 >
-                  <PlusCircledIcon className="mr-2 size-5" aria-hidden="true" />
+                  <PlusCircledIcon className="mr-2 size-4" aria-hidden="true" />
                   Create store
                 </CommandItem>
               </CommandGroup>
diff --git a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
index ef524e49..f2f91836 100644
--- a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
+++ b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
@@ -15,8 +15,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { UsageCard } from "@/components/cards/usage-card"
 import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
+import { UsageCard } from "@/components/usage-card"
 
 interface BillingProps {
   subscriptionPlanPromise: Promise<UserSubscriptionPlan | null>
@@ -121,7 +121,7 @@ export async function Billing({
                   stripePriceId={plan.stripePriceId}
                   stripeCustomerId={subscriptionPlan?.stripeCustomerId}
                   stripeSubscriptionId={subscriptionPlan?.stripeSubscriptionId}
-                  isSubscribed={subscriptionPlan?.isSubscribed ?? false}
+                  isSubscribed={subscriptionPlan?.isSubscribed}
                   isCurrentPlan={subscriptionPlan?.title === plan.title}
                 />
               )}
diff --git a/src/app/(dashboard)/dashboard/layout.tsx b/src/app/(dashboard)/dashboard/layout.tsx
index ee063aa7..0c542f6f 100644
--- a/src/app/(dashboard)/dashboard/layout.tsx
+++ b/src/app/(dashboard)/dashboard/layout.tsx
@@ -2,7 +2,6 @@ import { redirect } from "next/navigation"
 
 import { getStoresByUserId } from "@/lib/actions/store"
 import { getCachedUser, getUserPlanMetrics } from "@/lib/queries/user"
-import { SiteFooter } from "@/components/layouts/site-footer"
 
 import { DashboardHeader } from "./_components/dashboard-header"
 import { DashboardSidebar } from "./_components/dashboard-sidebar"
@@ -24,34 +23,28 @@ export default async function DashboardLayout({
 
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen flex-col">
-        <DashboardHeader user={user}>
-          <DashboardSidebarSheet className="lg:hidden">
-            <DashboardSidebar className="pl-4">
-              <StoreSwitcher
-                userId={user.id}
-                storesPromise={storesPromise}
-                planMetricsPromise={planMetricsPromise}
-              />
-            </DashboardSidebar>
-          </DashboardSidebarSheet>
-        </DashboardHeader>
-        <div className="container flex-1 items-start lg:grid lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-          <DashboardSidebar
-            // the top-16 class is used for the dashboard-header of h-16, added extra 0.1rem to fix the sticky layout shift issue
-            className="top-[calc(theme('spacing.16')_+_0.1rem)] z-30 hidden border-r lg:sticky lg:block"
-          >
-            <StoreSwitcher
-              userId={user.id}
-              storesPromise={storesPromise}
-              planMetricsPromise={planMetricsPromise}
-            />
-          </DashboardSidebar>
-          <main className="flex w-full flex-col overflow-hidden">
-            {children}
-          </main>
+      <div className="grid min-h-screen w-full lg:grid-cols-[17.5rem_1fr]">
+        <DashboardSidebar className="top-0 z-30 hidden flex-col gap-4 border-r border-border/60 lg:sticky lg:block">
+          <StoreSwitcher
+            userId={user.id}
+            storesPromise={storesPromise}
+            planMetricsPromise={planMetricsPromise}
+          />
+        </DashboardSidebar>
+        <div className="flex flex-col">
+          <DashboardHeader user={user}>
+            <DashboardSidebarSheet className="lg:hidden">
+              <DashboardSidebar>
+                <StoreSwitcher
+                  userId={user.id}
+                  storesPromise={storesPromise}
+                  planMetricsPromise={planMetricsPromise}
+                />
+              </DashboardSidebar>
+            </DashboardSidebarSheet>
+          </DashboardHeader>
+          <main className="flex-1 overflow-hidden px-6">{children}</main>
         </div>
-        <SiteFooter />
       </div>
     </SidebarProvider>
   )
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/error.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/error.tsx
index 2dec9664..641acd86 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/error.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/error.tsx
@@ -3,7 +3,7 @@
 // Error components must be Client Components
 import * as React from "react"
 
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 
 export default function UpdateStoreError({
   error,
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/not-found.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/not-found.tsx
index 9ed2c6b2..cdc253e8 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/not-found.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function StoreNotFound() {
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/_components/update-product-form.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/_components/update-product-form.tsx
index 52d55034..53f689a5 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/_components/update-product-form.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/_components/update-product-form.tsx
@@ -47,8 +47,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
-import { FilesCard } from "@/components/cards/FilesCard"
 import { FileUploader } from "@/components/file-uploader"
+import { Files } from "@/components/files"
 import { Icons } from "@/components/icons"
 
 interface UpdateProductFormProps {
@@ -279,7 +279,7 @@ export function UpdateProductForm({
                 <FormMessage />
               </FormItem>
               {uploadedFiles.length > 0 ? (
-                <FilesCard files={uploadedFiles} />
+                <Files files={uploadedFiles} />
               ) : null}
             </div>
           )}
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/not-found.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/not-found.tsx
index 13a157c3..bfc99e75 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/not-found.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 interface ProductNotFoundProps {
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
index 9deb58e1..c34db89e 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/create-product-form.tsx
@@ -44,8 +44,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
-import { FilesCard } from "@/components/cards/FilesCard"
 import { FileUploader } from "@/components/file-uploader"
+import { Files } from "@/components/files"
 import { Icons } from "@/components/icons"
 
 interface CreateProductFormProps {
@@ -307,7 +307,7 @@ export function CreateProductForm({
                   <FormMessage />
                 </FormItem>
                 {uploadedFiles.length > 0 ? (
-                  <FilesCard files={uploadedFiles} />
+                  <Files files={uploadedFiles} />
                 ) : null}
               </div>
             )}
diff --git a/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx b/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
index 0ac336e6..a20dcc97 100644
--- a/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
+++ b/src/app/(dashboard)/dashboard/stores/_components/create-store-dialog.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { HoverCardPortal } from "@radix-ui/react-hover-card"
 import { useForm, type UseFormReturn } from "react-hook-form"
 import { toast } from "sonner"
 
@@ -13,11 +14,11 @@ 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 {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -27,6 +28,7 @@ import {
 } from "@/components/ui/dialog"
 import {
   Drawer,
+  DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerFooter,
@@ -50,36 +52,27 @@ import {
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Icons } from "@/components/icons"
-import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
+import { RateLimitAlert } from "@/components/rate-limit-alert"
 
 interface CreateStoreDialogProps
   extends React.ComponentPropsWithoutRef<typeof Dialog> {
   userId: string
   planMetricsPromise: ReturnType<typeof getUserPlanMetrics>
-  showTrigger?: boolean
 }
 
-type PlanMetrics = Awaited<ReturnType<typeof getUserPlanMetrics>>
-
 export function CreateStoreDialog({
   userId,
   planMetricsPromise,
-  open: openProp,
   onOpenChange,
-  defaultOpen,
-  showTrigger = true,
   ...props
 }: CreateStoreDialogProps) {
   const router = useRouter()
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-  })
   const [loading, setLoading] = React.useState(false)
   const isDesktop = useMediaQuery("(min-width: 640px)")
 
   const planMetrics = React.use(planMetricsPromise)
+  const rateLimitExceeded =
+    planMetrics.storeLimitExceeded || planMetrics.productLimitExceeded
 
   const form = useForm<CreateStoreSchema>({
     resolver: zodResolver(createStoreSchema),
@@ -105,27 +98,34 @@ export function CreateStoreDialog({
     }
 
     setLoading(false)
-    setOpen(false)
+    onOpenChange?.(false)
     form.reset()
   }
 
   if (isDesktop) {
     return (
       <Dialog
-        open={open}
         onOpenChange={(open) => {
           if (!open) {
             form.reset()
           }
-          setOpen(open)
+          onOpenChange?.(open)
         }}
         {...props}
       >
-        <DynamicTrigger
-          planMetrics={planMetrics}
-          isDesktop={isDesktop}
-          showTrigger={showTrigger}
-        />
+        {
+          /**
+           * If onOpenChange is provided, the drawer is controlled by the parent component.
+           * In this case, we don't show the trigger button.
+           */
+          !!onOpenChange ? null : rateLimitExceeded ? (
+            <RateLimitHoverCard planMetrics={planMetrics} />
+          ) : (
+            <DialogTrigger asChild>
+              <Button size="sm">Create store</Button>
+            </DialogTrigger>
+          )
+        }
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle>Create a new store</DialogTitle>
@@ -135,11 +135,20 @@ export function CreateStoreDialog({
           </DialogHeader>
           <CreateStoreForm form={form} onSubmit={onSubmit}>
             <DialogFooter className="pt-4">
-              <FormFooter
-                loading={loading}
-                planMetrics={planMetrics}
-                onToggle={() => setOpen(false)}
-              />
+              <DialogClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </DialogClose>
+              <Button type="submit" disabled={loading || rateLimitExceeded}>
+                {loading && (
+                  <Icons.spinner
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Add store
+              </Button>
             </DialogFooter>
           </CreateStoreForm>
         </DialogContent>
@@ -149,21 +158,21 @@ export function CreateStoreDialog({
 
   return (
     <Drawer
-      open={open}
       onOpenChange={(open) => {
         if (!open) {
           form.reset()
         }
-        setOpen(open)
         onOpenChange?.(open)
       }}
       {...props}
     >
-      <DynamicTrigger
-        planMetrics={planMetrics}
-        isDesktop={isDesktop}
-        showTrigger={showTrigger}
-      />
+      {!!onOpenChange ? null : rateLimitExceeded ? (
+        <RateLimitHoverCard planMetrics={planMetrics} />
+      ) : (
+        <DrawerTrigger asChild>
+          <Button size="sm">Create store</Button>
+        </DrawerTrigger>
+      )}
       <DrawerContent>
         <DrawerHeader className="text-left">
           <DrawerTitle>Create a new store</DrawerTitle>
@@ -173,11 +182,20 @@ export function CreateStoreDialog({
         </DrawerHeader>
         <CreateStoreForm form={form} onSubmit={onSubmit} className="px-4">
           <DrawerFooter className="flex-col-reverse px-0">
-            <FormFooter
-              loading={loading}
-              planMetrics={planMetrics}
-              onToggle={() => setOpen(false)}
-            />
+            <DrawerClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DrawerClose>
+            <Button type="submit" disabled={loading || rateLimitExceeded}>
+              {loading && (
+                <Icons.spinner
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Add store
+            </Button>
           </DrawerFooter>
         </CreateStoreForm>
       </DrawerContent>
@@ -242,112 +260,30 @@ function CreateStoreForm({
   )
 }
 
-interface FormFooterProps {
-  loading: boolean
-  planMetrics: PlanMetrics
-  onToggle: (open: boolean) => void
+interface RateLimitHoverCardProps {
+  planMetrics: Awaited<ReturnType<typeof getUserPlanMetrics>>
 }
 
-function FormFooter({ onToggle, loading, planMetrics }: FormFooterProps) {
-  const { storeLimitExceeded, productLimitExceeded } = planMetrics
-
+export function RateLimitHoverCard({ planMetrics }: RateLimitHoverCardProps) {
   return (
-    <>
-      <Button type="button" variant="outline" onClick={() => onToggle(false)}>
-        Cancel
-      </Button>
-      <Button
-        type="submit"
-        disabled={loading || storeLimitExceeded || productLimitExceeded}
-      >
-        {loading && (
-          <Icons.spinner
-            className="mr-2 size-4 animate-spin"
-            aria-hidden="true"
-          />
-        )}
-        Add store
-      </Button>
-    </>
-  )
-}
-
-interface DynamicTriggerProps {
-  planMetrics: PlanMetrics
-  isDesktop: boolean
-  showTrigger?: boolean
-}
-
-function DynamicTrigger({
-  planMetrics,
-  showTrigger,
-  isDesktop,
-}: DynamicTriggerProps) {
-  if (!showTrigger) return null
-
-  const {
-    storeLimit,
-    productLimit,
-    storeLimitExceeded,
-    productLimitExceeded,
-    subscriptionPlan,
-  } = planMetrics
-
-  if (storeLimitExceeded || productLimitExceeded) {
-    return (
-      <HoverCard>
-        <HoverCardTrigger asChild>
-          <Button
-            size="sm"
-            className="cursor-not-allowed opacity-50 hover:bg-primary"
-          >
-            Create store
-          </Button>
-        </HoverCardTrigger>
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button
+          size="sm"
+          className="cursor-not-allowed opacity-50 hover:bg-primary"
+        >
+          Create store
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardPortal>
         <HoverCardContent
-          className="space-y-4 sm:w-80"
+          className="z-50 space-y-4 sm:w-80"
           align="end"
           sideOffset={8}
         >
-          {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>
-          )}
-          {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>
-          )}
-          {subscriptionPlan && (
-            <ManageSubscriptionForm
-              stripePriceId={subscriptionPlan.stripePriceId}
-              stripeCustomerId={subscriptionPlan.stripeCustomerId}
-              stripeSubscriptionId={subscriptionPlan.stripeSubscriptionId}
-              isSubscribed={subscriptionPlan.isSubscribed ?? false}
-              isCurrentPlan={subscriptionPlan.title === "Standard"}
-            />
-          )}
+          <RateLimitAlert planMetrics={planMetrics} />
         </HoverCardContent>
-      </HoverCard>
-    )
-  }
-
-  if (isDesktop) {
-    return (
-      <DialogTrigger asChild>
-        <Button size="sm">Create store</Button>
-      </DialogTrigger>
-    )
-  }
-
-  return (
-    <DrawerTrigger asChild>
-      <Button size="sm">Create store</Button>
-    </DrawerTrigger>
+      </HoverCardPortal>
+    </HoverCard>
   )
 }
diff --git a/src/app/(dashboard)/dashboard/stores/_components/stores.tsx b/src/app/(dashboard)/dashboard/stores/_components/stores.tsx
index c7ea9522..90f736e8 100644
--- a/src/app/(dashboard)/dashboard/stores/_components/stores.tsx
+++ b/src/app/(dashboard)/dashboard/stores/_components/stores.tsx
@@ -1,6 +1,6 @@
 import { type getStoresByUserId } from "@/lib/actions/store"
-import { EmptyCard } from "@/components/cards/empty-card"
-import { StoreCard } from "@/components/cards/store-card"
+import { EmptyCard } from "@/components/empty-card"
+import { StoreCard } from "@/components/store-card"
 
 interface Stores {
   storesPromise: ReturnType<typeof getStoresByUserId>
diff --git a/src/app/(dashboard)/dashboard/stores/page.tsx b/src/app/(dashboard)/dashboard/stores/page.tsx
index 47c93d6f..b66e6c64 100644
--- a/src/app/(dashboard)/dashboard/stores/page.tsx
+++ b/src/app/(dashboard)/dashboard/stores/page.tsx
@@ -5,13 +5,9 @@ import { env } from "@/env.js"
 
 import { getStoresByUserId } from "@/lib/actions/store"
 import { getCachedUser, getUserPlanMetrics } from "@/lib/queries/user"
-import {
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
+import { PageHeader, PageHeaderHeading } from "@/components/page-header"
 import { Shell } from "@/components/shell"
-import { StoreCardSkeleton } from "@/components/skeletons/store-card-skeleton"
+import { StoreCardSkeleton } from "@/components/store-card-skeleton"
 
 import { CreateStoreDialog } from "./_components/create-store-dialog"
 import { Stores } from "./_components/stores"
@@ -34,21 +30,16 @@ export default async function StoresPage() {
 
   return (
     <Shell variant="sidebar">
-      <PageHeader>
-        <div className="flex space-x-4">
-          <PageHeaderHeading size="sm" className="flex-1">
-            Stores
-          </PageHeaderHeading>
-          <CreateStoreDialog
-            userId={user.id}
-            planMetricsPromise={planMetricsPromise}
-          />
-        </div>
-        <PageHeaderDescription size="sm">
-          Manage your stores
-        </PageHeaderDescription>
+      <PageHeader className="max-w-full flex-row gap-4">
+        <PageHeaderHeading size="sm" className="flex-1">
+          Stores
+        </PageHeaderHeading>
+        <CreateStoreDialog
+          userId={user.id}
+          planMetricsPromise={planMetricsPromise}
+        />
       </PageHeader>
-      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <React.Suspense
           fallback={Array.from({ length: 3 }).map((_, i) => (
             <StoreCardSkeleton key={i} />
diff --git a/src/app/(lobby)/(content)/[...slug]/not-found.tsx b/src/app/(lobby)/(content)/[...slug]/not-found.tsx
index 0b19a93f..07e80552 100644
--- a/src/app/(lobby)/(content)/[...slug]/not-found.tsx
+++ b/src/app/(lobby)/(content)/[...slug]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function PageNotFound() {
diff --git a/src/app/(lobby)/(content)/blog/[...slug]/not-found.tsx b/src/app/(lobby)/(content)/blog/[...slug]/not-found.tsx
index c7826bbf..01115300 100644
--- a/src/app/(lobby)/(content)/blog/[...slug]/not-found.tsx
+++ b/src/app/(lobby)/(content)/blog/[...slug]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function BlogNotFound() {
diff --git a/src/app/(lobby)/@modal/(.)preview/product/[productId]/not-found.tsx b/src/app/(lobby)/@modal/(.)preview/product/[productId]/not-found.tsx
index 67482dd2..d4322ec3 100644
--- a/src/app/(lobby)/@modal/(.)preview/product/[productId]/not-found.tsx
+++ b/src/app/(lobby)/@modal/(.)preview/product/[productId]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function ProductModalNotFound() {
diff --git a/src/app/(lobby)/_components/category-card-skeleton.tsx b/src/app/(lobby)/_components/category-card-skeleton.tsx
index 0b913043..034b7a16 100644
--- a/src/app/(lobby)/_components/category-card-skeleton.tsx
+++ b/src/app/(lobby)/_components/category-card-skeleton.tsx
@@ -1,17 +1,16 @@
-import { Card } from "@/components/ui/card"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 
 export function CategoryCardSkeleton() {
   return (
-    <Card className="flex size-full flex-col gap-4 rounded-md p-5">
-      <div className="flex flex-1 flex-col space-y-1.5">
+    <Card className="h-full rounded-md">
+      <CardHeader className="flex-1">
         <Skeleton className="h-6 w-20" />
-        <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" />
+        <Skeleton className="h-4 w-5/6" />
+      </CardHeader>
+      <CardContent className="pt-2">
+        <Skeleton className="h-4 w-20" />
+      </CardContent>
     </Card>
   )
 }
diff --git a/src/app/(lobby)/_components/category-card.tsx b/src/app/(lobby)/_components/category-card.tsx
index fe690347..a46a62cb 100644
--- a/src/app/(lobby)/_components/category-card.tsx
+++ b/src/app/(lobby)/_components/category-card.tsx
@@ -2,9 +2,15 @@ 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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  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,22 +23,18 @@ export function CategoryCard({ category }: CategoryCardProps) {
 
   return (
     <Link href={`/collections/${category.slug}`}>
-      <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">
+      <Card className="h-full rounded-md transition-colors hover:bg-muted/25">
+        <CardHeader className="flex-1">
           <CardTitle className="capitalize">{category.name}</CardTitle>
           <CardDescription className="line-clamp-3 text-balance">
             {category.description}
           </CardDescription>
-        </div>
-        <React.Suspense
-          fallback={
-            <div className="pt-1">
-              <Skeleton className="h-4 w-20" />
-            </div>
-          }
-        >
-          <ProductCount productCountPromise={productCountPromise} />
-        </React.Suspense>
+        </CardHeader>
+        <CardContent className="pt-2">
+          <React.Suspense fallback={<Skeleton className="h-4 w-20" />}>
+            <ProductCount productCountPromise={productCountPromise} />
+          </React.Suspense>
+        </CardContent>
       </Card>
     </Link>
   )
@@ -46,11 +48,9 @@ async function ProductCount({ productCountPromise }: ProductCountProps) {
   const count = await productCountPromise
 
   return (
-    <Badge
-      variant="secondary"
-      className="pointer-events-none w-fit rounded font-medium"
-    >
+    <div className="flex w-fit items-center text-[0.8rem] text-muted-foreground">
+      <Icons.product className="mr-1.5 size-3.5" aria-hidden="true" />
       {count} products
-    </Badge>
+    </div>
   )
 }
diff --git a/src/app/(lobby)/_components/lobby-skeleton.tsx b/src/app/(lobby)/_components/lobby-skeleton.tsx
index 4bd2ba3b..47c5b2ea 100644
--- a/src/app/(lobby)/_components/lobby-skeleton.tsx
+++ b/src/app/(lobby)/_components/lobby-skeleton.tsx
@@ -10,9 +10,9 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import { ProductCardSkeleton } from "@/components/product-card-skeleton"
 import { Shell } from "@/components/shell"
-import { ProductCardSkeleton } from "@/components/skeletons/product-card-skeleton"
-import { StoreCardSkeleton } from "@/components/skeletons/store-card-skeleton"
+import { StoreCardSkeleton } from "@/components/store-card-skeleton"
 
 import { CategoryCardSkeleton } from "./category-card-skeleton"
 
@@ -24,7 +24,7 @@ export function LobbySkeleton() {
         className="mx-auto items-center gap-2 text-center"
         withPadding
       >
-        <Skeleton className="h-7 w-44" />
+        <Skeleton className="h-7 w-44 rounded-full" />
         <PageHeaderHeading
           className="animate-fade-up"
           style={{ animationDelay: "0.20s", animationFillMode: "both" }}
diff --git a/src/app/(lobby)/_components/lobby.tsx b/src/app/(lobby)/_components/lobby.tsx
index 4a17b28d..8a90ecdf 100644
--- a/src/app/(lobby)/_components/lobby.tsx
+++ b/src/app/(lobby)/_components/lobby.tsx
@@ -7,8 +7,6 @@ import { type getFeaturedStores } from "@/lib/actions/store"
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
-import { ProductCard } from "@/components/cards/product-card"
-import { StoreCard } from "@/components/cards/store-card"
 import { ContentSection } from "@/components/content-section"
 import { Icons } from "@/components/icons"
 import {
@@ -17,7 +15,9 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import { ProductCard } from "@/components/product-card"
 import { Shell } from "@/components/shell"
+import { StoreCard } from "@/components/store-card"
 
 import { CategoryCard } from "./category-card"
 
@@ -58,8 +58,8 @@ export async function Lobby({
         >
           <Badge
             aria-hidden="true"
-            className="px-3.5 py-1.5"
             variant="secondary"
+            className="rounded-full px-3.5 py-1.5"
           >
             <Icons.gitHub className="mr-2 size-3.5" aria-hidden="true" />
             {githubStars} stars on GitHub
@@ -69,7 +69,7 @@ export async function Lobby({
           className="animate-fade-up"
           style={{ animationDelay: "0.20s", animationFillMode: "both" }}
         >
-          Build for your commerce platform
+          Foundation for your commerce platform
         </PageHeaderHeading>
         <PageHeaderDescription
           className="max-w-[46.875rem] animate-fade-up"
diff --git a/src/app/(lobby)/product/[productId]/loading.tsx b/src/app/(lobby)/product/[productId]/loading.tsx
index a23cadb2..260a015b 100644
--- a/src/app/(lobby)/product/[productId]/loading.tsx
+++ b/src/app/(lobby)/product/[productId]/loading.tsx
@@ -3,8 +3,8 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Icons } from "@/components/icons"
+import { ProductCardSkeleton } from "@/components/product-card-skeleton"
 import { Shell } from "@/components/shell"
-import { ProductCardSkeleton } from "@/components/skeletons/product-card-skeleton"
 
 export default function ProductLoading() {
   return (
diff --git a/src/app/(lobby)/product/[productId]/not-found.tsx b/src/app/(lobby)/product/[productId]/not-found.tsx
index 8b65c2a3..998778f1 100644
--- a/src/app/(lobby)/product/[productId]/not-found.tsx
+++ b/src/app/(lobby)/product/[productId]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function ProductNotFound() {
diff --git a/src/app/(lobby)/product/[productId]/page.tsx b/src/app/(lobby)/product/[productId]/page.tsx
index 5fe3f884..3a417700 100644
--- a/src/app/(lobby)/product/[productId]/page.tsx
+++ b/src/app/(lobby)/product/[productId]/page.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/accordion"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
-import { ProductCard } from "@/components/cards/product-card"
+import { ProductCard } from "@/components/product-card"
 import { ProductImageCarousel } from "@/components/product-image-carousel"
 import { Rating } from "@/components/rating"
 import { Shell } from "@/components/shell"
diff --git a/src/app/(lobby)/products/loading.tsx b/src/app/(lobby)/products/loading.tsx
index 9a56c85c..5eaab68d 100644
--- a/src/app/(lobby)/products/loading.tsx
+++ b/src/app/(lobby)/products/loading.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@/components/ui/skeleton"
+import { ProductCardSkeleton } from "@/components/product-card-skeleton"
 import { Shell } from "@/components/shell"
-import { ProductCardSkeleton } from "@/components/skeletons/product-card-skeleton"
 
 export default function ProductsLoading() {
   return (
diff --git a/src/app/(lobby)/store/[storeId]/not-found.tsx b/src/app/(lobby)/store/[storeId]/not-found.tsx
index a11c3556..0c0e27fc 100644
--- a/src/app/(lobby)/store/[storeId]/not-found.tsx
+++ b/src/app/(lobby)/store/[storeId]/not-found.tsx
@@ -1,4 +1,4 @@
-import { ErrorCard } from "@/components/cards/error-card"
+import { ErrorCard } from "@/components/error-card"
 import { Shell } from "@/components/shell"
 
 export default function ProductNotFound() {
diff --git a/src/app/(lobby)/stores/loading.tsx b/src/app/(lobby)/stores/loading.tsx
index e51ea0c2..3e542914 100644
--- a/src/app/(lobby)/stores/loading.tsx
+++ b/src/app/(lobby)/stores/loading.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@/components/ui/skeleton"
 import { Shell } from "@/components/shell"
-import { StoreCardSkeleton } from "@/components/skeletons/store-card-skeleton"
+import { StoreCardSkeleton } from "@/components/store-card-skeleton"
 
 export default function StoresLoading() {
   return (
diff --git a/src/components/board-builder.tsx b/src/components/board-builder.tsx
index 8a9ba1c2..ae5bb2e1 100644
--- a/src/components/board-builder.tsx
+++ b/src/components/board-builder.tsx
@@ -35,8 +35,8 @@ import {
 } from "@/components/ui/sheet"
 import { Slider } from "@/components/ui/slider"
 import { Switch } from "@/components/ui/switch"
-import { ProductCard } from "@/components/cards/product-card"
 import { PaginationButton } from "@/components/pagination-button"
+import { ProductCard } from "@/components/product-card"
 
 interface BoardBuilderProps {
   products: Product[]
diff --git a/src/components/cards/store-card.tsx b/src/components/cards/store-card.tsx
deleted file mode 100644
index f0aa1b7a..00000000
--- a/src/components/cards/store-card.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link"
-
-import { type getFeaturedStores } from "@/lib/actions/store"
-import { getRandomPatternStyle } from "@/lib/generate-pattern"
-import { cn } from "@/lib/utils"
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-import { Badge } from "@/components/ui/badge"
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-
-interface StoreCardProps {
-  store: Awaited<ReturnType<typeof getFeaturedStores>>[number]
-  href: string
-}
-
-export function StoreCard({ store, href }: StoreCardProps) {
-  return (
-    <Link href={href}>
-      <Card className="h-full overflow-hidden rounded-md transition-colors hover:bg-muted/50">
-        <AspectRatio ratio={21 / 9}>
-          <div className="absolute inset-0 bg-gradient-to-t from-transparent to-zinc-950/50" />
-          <Badge
-            className={cn(
-              "pointer-events-none absolute right-2 top-2 rounded-sm px-2 py-0.5 font-semibold",
-              store.stripeAccountId
-                ? "border-green-600/20 bg-green-100 text-green-700"
-                : "border-red-600/10 bg-red-100 text-red-700"
-            )}
-          >
-            {store.stripeAccountId ? "Active" : "Inactive"}
-          </Badge>
-          <div
-            className="h-full border-b"
-            style={getRandomPatternStyle(String(store.id))}
-          />
-        </AspectRatio>
-        <CardHeader className="p-4">
-          <CardTitle className="line-clamp-1">{store.name}</CardTitle>
-          <CardDescription className="line-clamp-1">
-            {store.description?.length
-              ? store.description
-              : `Explore ${store.name} products`}
-          </CardDescription>
-        </CardHeader>
-      </Card>
-    </Link>
-  )
-}
diff --git a/src/components/cards/empty-card.tsx b/src/components/empty-card.tsx
similarity index 91%
rename from src/components/cards/empty-card.tsx
rename to src/components/empty-card.tsx
index 7a247e02..f2c391aa 100644
--- a/src/components/cards/empty-card.tsx
+++ b/src/components/empty-card.tsx
@@ -5,7 +5,6 @@ import { Icons } from "@/components/icons"
 interface EmptyCardProps extends React.ComponentPropsWithoutRef<typeof Card> {
   title: string
   description?: string
-  action?: React.ReactNode
   icon?: keyof typeof Icons
 }
 
@@ -13,7 +12,7 @@ export function EmptyCard({
   title,
   description,
   icon = "placeholder",
-  action,
+  children,
   className,
   ...props
 }: EmptyCardProps) {
@@ -22,7 +21,7 @@ export function EmptyCard({
   return (
     <Card
       className={cn(
-        "flex w-full flex-col items-center justify-center space-y-6 bg-transparent p-16",
+        "flex w-full flex-col items-center justify-center space-y-6 rounded-md border-dashed bg-transparent p-16",
         className
       )}
       {...props}
@@ -34,7 +33,7 @@ export function EmptyCard({
         <CardTitle>{title}</CardTitle>
         {description ? <CardDescription>{description}</CardDescription> : null}
       </div>
-      {action ? action : null}
+      {children}
     </Card>
   )
 }
diff --git a/src/components/cards/error-card.tsx b/src/components/error-card.tsx
similarity index 100%
rename from src/components/cards/error-card.tsx
rename to src/components/error-card.tsx
diff --git a/src/components/cards/FilesCard.tsx b/src/components/files.tsx
similarity index 90%
rename from src/components/cards/FilesCard.tsx
rename to src/components/files.tsx
index 3fe7389d..6710f9c0 100644
--- a/src/components/cards/FilesCard.tsx
+++ b/src/components/files.tsx
@@ -9,13 +9,13 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { EmptyCard } from "@/components/cards/empty-card"
+import { EmptyCard } from "@/components/empty-card"
 
-interface FilesCardProps {
+interface FilesProps {
   files: StoredFile[]
 }
 
-export function FilesCard({ files }: FilesCardProps) {
+export function Files({ files }: FilesProps) {
   return (
     <Card>
       <CardHeader>
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 7d80ff9e..dabcb9ae 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,4 +1,9 @@
-import { AvatarIcon, GearIcon, ImageIcon } from "@radix-ui/react-icons"
+import {
+  AvatarIcon,
+  DashboardIcon,
+  GearIcon,
+  ImageIcon,
+} from "@radix-ui/react-icons"
 
 export type IconProps = React.HTMLAttributes<SVGElement>
 
@@ -166,6 +171,24 @@ export const Icons = {
       <path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7" />
     </svg>
   ),
+  users: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 21a8 8 0 0 0-16 0" />
+      <circle cx="10" cy="8" r="5" />
+      <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3" />
+    </svg>
+  ),
   credit: (props: IconProps) => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -285,6 +308,7 @@ export const Icons = {
       <path d="M12 18h4" />
     </svg>
   ),
+  dashboard: DashboardIcon,
   avatar: AvatarIcon,
   placeholder: ImageIcon,
   settings: GearIcon,
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
index 87b9999a..5a1fa76d 100644
--- a/src/components/page-header.tsx
+++ b/src/components/page-header.tsx
@@ -36,7 +36,7 @@ const headingVariants = cva(
     variants: {
       size: {
         default: "text-3xl md:text-5xl",
-        sm: "text-2xl md:text-4xl",
+        sm: "text-xl md:text-3xl",
         lg: "text-3xl sm:text-5xl md:text-6xl lg:text-7xl",
       },
     },
diff --git a/src/components/skeletons/product-card-skeleton.tsx b/src/components/product-card-skeleton.tsx
similarity index 100%
rename from src/components/skeletons/product-card-skeleton.tsx
rename to src/components/product-card-skeleton.tsx
diff --git a/src/components/cards/product-card.tsx b/src/components/product-card.tsx
similarity index 100%
rename from src/components/cards/product-card.tsx
rename to src/components/product-card.tsx
diff --git a/src/components/products.tsx b/src/components/products.tsx
index 5d129e9f..8d5b8222 100644
--- a/src/components/products.tsx
+++ b/src/components/products.tsx
@@ -42,9 +42,9 @@ import {
 } from "@/components/ui/sheet"
 import { Slider } from "@/components/ui/slider"
 import { Switch } from "@/components/ui/switch"
-import { ProductCard } from "@/components/cards/product-card"
 import { MultiSelect } from "@/components/multi-select"
 import { PaginationButton } from "@/components/pagination-button"
+import { ProductCard } from "@/components/product-card"
 
 interface ProductsProps {
   products: Product[]
diff --git a/src/components/rate-limit-alert.tsx b/src/components/rate-limit-alert.tsx
new file mode 100644
index 00000000..9f78d9d5
--- /dev/null
+++ b/src/components/rate-limit-alert.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link"
+
+import { type getUserPlanMetrics } from "@/lib/queries/user"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
+
+interface RateLimitAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  planMetrics: Awaited<ReturnType<typeof getUserPlanMetrics>>
+}
+
+export function RateLimitAlert({
+  planMetrics,
+  className,
+  ...props
+}: RateLimitAlertProps) {
+  const {
+    storeLimit,
+    productLimit,
+    storeLimitExceeded,
+    productLimitExceeded,
+    subscriptionPlan,
+  } = planMetrics
+
+  return (
+    <div className={cn("space-y-4", className)} {...props}>
+      {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>
+      )}
+      {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>
+      )}
+      {subscriptionPlan ? (
+        subscriptionPlan.title === "Pro" ? (
+          <Link
+            href="https://cal.com/sadmann7/15min"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={buttonVariants({ className: "w-full" })}
+          >
+            Contact us
+          </Link>
+        ) : (
+          <ManageSubscriptionForm
+            stripePriceId={subscriptionPlan.stripePriceId}
+            stripeCustomerId={subscriptionPlan.stripeCustomerId}
+            stripeSubscriptionId={subscriptionPlan.stripeSubscriptionId}
+            isSubscribed={subscriptionPlan.isSubscribed}
+          />
+        )
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/shell.tsx b/src/components/shell.tsx
index 6a195287..5ecaa7a9 100644
--- a/src/components/shell.tsx
+++ b/src/components/shell.tsx
@@ -3,13 +3,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const shellVariants = cva("grid items-center gap-8 pb-8 pt-6 md:py-8", {
+const shellVariants = cva("grid items-center gap-8 pb-8 pt-6 lg:py-6", {
   variants: {
     variant: {
       default: "container",
       sidebar: "",
       centered: "container flex h-dvh max-w-2xl flex-col justify-center",
-      markdown: "container max-w-3xl py-8 md:py-10 lg:py-10",
+      markdown: "container max-w-3xl py-8 md:py-10",
     },
   },
   defaultVariants: {
diff --git a/src/components/skeletons/store-card-skeleton.tsx b/src/components/skeletons/store-card-skeleton.tsx
deleted file mode 100644
index c4b568bd..00000000
--- a/src/components/skeletons/store-card-skeleton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-import { Card, CardHeader } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
-
-export function StoreCardSkeleton() {
-  return (
-    <Card className="h-full overflow-hidden rounded-md">
-      <AspectRatio ratio={21 / 9}>
-        <div className="absolute inset-0 bg-gradient-to-t from-transparent to-zinc-950/50" />
-        <Skeleton className="absolute right-2 top-2 h-6 w-14 rounded-sm px-2 py-1" />
-        <Skeleton className="size-full rounded-b-none" />
-      </AspectRatio>
-      <CardHeader className="space-y-1.5">
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-4 w-1/4" />
-      </CardHeader>
-    </Card>
-  )
-}
diff --git a/src/components/store-card-skeleton.tsx b/src/components/store-card-skeleton.tsx
new file mode 100644
index 00000000..4361eabb
--- /dev/null
+++ b/src/components/store-card-skeleton.tsx
@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function StoreCardSkeleton() {
+  return (
+    <Card className="relative h-full rounded-md">
+      <Skeleton className="absolute right-4 top-4 h-4 w-20 rounded-sm px-2 py-0.5" />
+      <CardHeader>
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-1/4" />
+      </CardHeader>
+      <CardContent className="flex flex-wrap items-center gap-4 pt-4">
+        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-4 w-1/3" />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/store-card.tsx b/src/components/store-card.tsx
new file mode 100644
index 00000000..8b440a92
--- /dev/null
+++ b/src/components/store-card.tsx
@@ -0,0 +1,96 @@
+import Link from "next/link"
+
+import { type getStoresByUserId } from "@/lib/actions/store"
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Icons } from "@/components/icons"
+
+type Store = Awaited<ReturnType<typeof getStoresByUserId>>[number]
+
+interface StoreCardProps {
+  store: Omit<Store, "orderCount" | "customerCount"> &
+    Partial<Pick<Store, "orderCount" | "customerCount">>
+  href: string
+}
+
+export function StoreCard({ store, href }: StoreCardProps) {
+  const isUserStore = href.includes("dashboard")
+
+  return (
+    <Link href={href}>
+      <Card className="relative h-full rounded-md transition-colors hover:bg-muted/25">
+        {isUserStore ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge
+                className={cn(
+                  "absolute right-4 top-4 rounded-sm px-2 py-0.5 font-semibold",
+                  store.stripeAccountId
+                    ? "border-green-600/20 bg-green-100 text-green-700"
+                    : "border-red-600/10 bg-red-100 text-red-700"
+                )}
+              >
+                {store.stripeAccountId ? "Active" : "Inactive"}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent
+              align="start"
+              className="w-52 border border-input bg-background text-foreground shadow-sm"
+            >
+              Connect your Stripe account to activate your store
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <Badge
+            className={cn(
+              "pointer-events-none absolute right-4 top-4 rounded-sm px-2 py-0.5 font-semibold",
+              store.stripeAccountId
+                ? "border-green-600/20 bg-green-100 text-green-700"
+                : "border-red-600/10 bg-red-100 text-red-700"
+            )}
+          >
+            {store.stripeAccountId ? "Active" : "Inactive"}
+          </Badge>
+        )}
+        <CardHeader>
+          <CardTitle className="line-clamp-1">{store.name}</CardTitle>
+          <CardDescription className="line-clamp-1">
+            {store.description?.length
+              ? store.description
+              : `Explore ${store.name} products`}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-4 pt-4 text-[0.8rem] text-muted-foreground">
+          <div className="flex items-center">
+            <Icons.product className="mr-1.5 size-3.5" aria-hidden="true" />
+            {store.productCount} products
+          </div>
+          {isUserStore ? (
+            <>
+              <div className="flex items-center">
+                <Icons.cart className="mr-1.5 size-3.5" aria-hidden="true" />
+                {store.orderCount} orders
+              </div>
+              <div className="flex items-center">
+                <Icons.users className="mr-1.5 size-3.5" aria-hidden="true" />
+                {store.customerCount} customers
+              </div>
+            </>
+          ) : null}
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
diff --git a/src/components/stores.tsx b/src/components/stores.tsx
index 05f191de..17839a2c 100644
--- a/src/components/stores.tsx
+++ b/src/components/stores.tsx
@@ -16,15 +16,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { StoreCard } from "@/components/cards/store-card"
+import { FacetedFilter } from "@/components/faceted-filter"
 import { PaginationButton } from "@/components/pagination-button"
+import { StoreCard } from "@/components/store-card"
 
-import { FacetedFilter } from "./faceted-filter"
+type StoresProps = Awaited<ReturnType<typeof getStores>>
 
-export function Stores({
-  data: stores,
-  pageCount,
-}: Awaited<ReturnType<typeof getStores>>) {
+export function Stores({ data: stores, pageCount }: StoresProps) {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 052f96a7..9e748210 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
@@ -12,36 +11,20 @@ const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
-const tooltipVariants = cva(
-  "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-  {
-    variants: {
-      variant: {
-        default: "text-primary-foreground",
-        outline: "border border-input bg-transparent shadow-sm",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
-    VariantProps<typeof tooltipVariants> {}
-
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  TooltipContentProps
->(({ className, variant, sideOffset = 4, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
-    className={cn(tooltipVariants({ variant }), className)}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
     {...props}
   />
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/components/cards/usage-card.tsx b/src/components/usage-card.tsx
similarity index 100%
rename from src/components/cards/usage-card.tsx
rename to src/components/usage-card.tsx
diff --git a/src/config/dashboard.ts b/src/config/dashboard.ts
index 030617d1..300bd9ec 100644
--- a/src/config/dashboard.ts
+++ b/src/config/dashboard.ts
@@ -6,12 +6,6 @@ export interface DashboardConfig {
 
 export const dashboardConfig: DashboardConfig = {
   sidebarNav: [
-    {
-      title: "Account",
-      href: "/dashboard/account",
-      icon: "avatar",
-      items: [],
-    },
     {
       title: "Stores",
       href: "/dashboard/stores",
@@ -30,6 +24,12 @@ export const dashboardConfig: DashboardConfig = {
       icon: "dollarSign",
       items: [],
     },
+    {
+      title: "Account",
+      href: "/dashboard/account",
+      icon: "avatar",
+      items: [],
+    },
     {
       title: "Settings",
       href: "/dashboard/settings",
diff --git a/src/lib/actions/store.ts b/src/lib/actions/store.ts
index f45c44f3..a4ffbf19 100644
--- a/src/lib/actions/store.ts
+++ b/src/lib/actions/store.ts
@@ -7,9 +7,19 @@ import {
   revalidateTag,
 } from "next/cache"
 import { db } from "@/db"
-import { products, stores, type Store } from "@/db/schema"
+import { orders, 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 {
+  and,
+  asc,
+  count,
+  countDistinct,
+  desc,
+  eq,
+  isNull,
+  not,
+  sql,
+} from "drizzle-orm"
 
 import { getErrorMessage } from "@/lib/handle-error"
 import { slugify } from "@/lib/utils"
@@ -26,8 +36,10 @@ export async function getFeaturedStores() {
         .select({
           id: stores.id,
           name: stores.name,
+          slug: stores.slug,
           description: stores.description,
           stripeAccountId: stores.stripeAccountId,
+          productCount: count(products.id),
         })
         .from(stores)
         .limit(4)
@@ -53,9 +65,13 @@ export async function getStoresByUserId(input: { userId: string }) {
           slug: stores.slug,
           description: stores.description,
           stripeAccountId: stores.stripeAccountId,
+          productCount: count(products.id),
+          orderCount: count(orders.id),
+          customerCount: countDistinct(orders.email),
         })
         .from(stores)
         .leftJoin(products, eq(products.storeId, stores.id))
+        .leftJoin(orders, eq(orders.storeId, stores.id))
         .groupBy(stores.id)
         .orderBy(desc(stores.stripeAccountId), desc(sql<number>`count(*)`))
         .where(eq(stores.userId, input.userId))
@@ -87,6 +103,7 @@ export async function getStores(input: SearchParams) {
         .select({
           id: stores.id,
           name: stores.name,
+          slug: stores.slug,
           description: stores.description,
           stripeAccountId: stores.stripeAccountId,
           productCount: count(products.id),
diff --git a/src/lib/validations/stripe.ts b/src/lib/validations/stripe.ts
index 6e75cf8f..4b0d19d1 100644
--- a/src/lib/validations/stripe.ts
+++ b/src/lib/validations/stripe.ts
@@ -6,8 +6,8 @@ export const manageSubscriptionSchema = z.object({
   stripePriceId: z.string(),
   stripeCustomerId: z.string().optional().nullable(),
   stripeSubscriptionId: z.string().optional().nullable(),
-  isSubscribed: z.boolean(),
-  isCurrentPlan: z.boolean(),
+  isSubscribed: z.boolean().optional(),
+  isCurrentPlan: z.boolean().optional(),
 })
 
 export const getStripeAccountSchema = z.object({