diff --git a/components/KeepOnline.ts b/components/KeepOnline.ts
index 53909cd..fe53598 100644
--- a/components/KeepOnline.ts
+++ b/components/KeepOnline.ts
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useKeepOnline } from "@/hooks/useKeepOnline";
 
@@ -14,4 +14,4 @@ const KeepOnline = () => {
   return null;
 }
 
-export default KeepOnline;
+export default KeepOnline;
\ No newline at end of file
diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx
index 8412baa..3aa294b 100644
--- a/components/admin/AdminAnalytics.tsx
+++ b/components/admin/AdminAnalytics.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import React, { useState, useEffect } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -739,4 +739,4 @@ export default function AdminAnalytics() {
       </Tabs>
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/admin/BanUserCard.tsx b/components/admin/BanUserCard.tsx
index 4143f65..9ddcf0e 100644
--- a/components/admin/BanUserCard.tsx
+++ b/components/admin/BanUserCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 
diff --git a/components/admin/InvitationsListCard.tsx b/components/admin/InvitationsListCard.tsx
index 0c5e41d..18172d3 100644
--- a/components/admin/InvitationsListCard.tsx
+++ b/components/admin/InvitationsListCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useEffect, useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 
@@ -62,7 +62,7 @@ export default function InvitationsListCard() {
                     Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{inv.code}</span>
                   </div>
                   <div className="text-xs text-muted-foreground">
-                    Created: {new Date(inv.createdAt).toLocaleString()} • Expires: {new Date(inv.expiresAt).toLocaleString()}
+                    Created: {new Date(inv.createdAt).toLocaleString()} · Expires: {new Date(inv.expiresAt).toLocaleString()}
                   </div>
                 </div>
                 <div className="flex items-center gap-2 shrink-0">
diff --git a/components/admin/InviteVendorCard.tsx b/components/admin/InviteVendorCard.tsx
index a13a80b..b7295b6 100644
--- a/components/admin/InviteVendorCard.tsx
+++ b/components/admin/InviteVendorCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 
diff --git a/components/admin/OrdersTable.tsx b/components/admin/OrdersTable.tsx
index 52b0415..2363d09 100644
--- a/components/admin/OrdersTable.tsx
+++ b/components/admin/OrdersTable.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
diff --git a/components/admin/RecentOrdersCard.tsx b/components/admin/RecentOrdersCard.tsx
index a4eb471..6f4c5f6 100644
--- a/components/admin/RecentOrdersCard.tsx
+++ b/components/admin/RecentOrdersCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useEffect, useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 
@@ -81,7 +81,7 @@ export default function RecentOrdersCard() {
                 </div>
               </div>
               <div className="mt-1 text-xs text-muted-foreground">
-                User: {o.userId} • Total: £{Number(o.total).toFixed(2)}
+                User: {o.userId} · Total: £{Number(o.total).toFixed(2)}
               </div>
               {o.items && o.items.length > 0 && (
                 <ul className="mt-2 text-xs list-disc pl-4 text-muted-foreground">
diff --git a/components/admin/SystemStatusCard.tsx b/components/admin/SystemStatusCard.tsx
index c462421..f035127 100644
--- a/components/admin/SystemStatusCard.tsx
+++ b/components/admin/SystemStatusCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useEffect, useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 import { Button } from "@/components/ui/button";
diff --git a/components/admin/VendorsCard.tsx b/components/admin/VendorsCard.tsx
index fe11d5d..6160dc0 100644
--- a/components/admin/VendorsCard.tsx
+++ b/components/admin/VendorsCard.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 import { useEffect, useState } from "react";
 import { fetchClient } from "@/lib/api-client";
 
@@ -63,7 +63,7 @@ export default function VendorsCard() {
                   <div className="font-medium">{vendor.username}</div>
                   <div className="text-xs text-muted-foreground">
                     Created: {new Date(vendor.createdAt).toLocaleDateString()}
-                    {vendor.lastLogin && ` • Last login: ${new Date(vendor.lastLogin).toLocaleDateString()}`}
+                    {vendor.lastLogin && ` · Last login: ${new Date(vendor.lastLogin).toLocaleDateString()}`}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
diff --git a/components/animated-counter.tsx b/components/animated-counter.tsx
index 9abf57d..c3ce52a 100644
--- a/components/animated-counter.tsx
+++ b/components/animated-counter.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useEffect, useRef } from "react";
 
@@ -68,4 +68,4 @@ export function AnimatedCounter({
     : `${prefix}${displayValue.toLocaleString()}${suffix}`;
 
   return <span>{formattedValue}</span>;
-} 
+} 
\ No newline at end of file
diff --git a/components/animated-stats-section.tsx b/components/animated-stats-section.tsx
index 30382ca..c7eafdd 100644
--- a/components/animated-stats-section.tsx
+++ b/components/animated-stats-section.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { Package, Users, CreditCard } from "lucide-react";
 import { AnimatedCounter } from "./animated-counter";
@@ -80,4 +80,4 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </div>
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/audio-preloader.tsx b/components/audio-preloader.tsx
index 068c8eb..51adb02 100644
--- a/components/audio-preloader.tsx
+++ b/components/audio-preloader.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useEffect } from "react"
 
diff --git a/components/christmas-decorations.tsx b/components/christmas-decorations.tsx
index cafadb7..bcdcd00 100644
--- a/components/christmas-decorations.tsx
+++ b/components/christmas-decorations.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useEffect, useState } from "react"
 import { isDecember } from "@/lib/utils/christmas"
@@ -39,30 +39,30 @@ export function ChristmasDecorations() {
             animationDuration: `${flake.duration}s`,
           }}
         >
-          ÔØä
+          ❄
         </div>
       ))}
       
       {/* Twinkling stars in corners */}
       <div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
-        Ô£¿
+        ✨
       </div>
       <div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
-        Ô£¿
+        ✨
       </div>
       <div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
-        Ô£¿
+        ✨
       </div>
       <div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
-        Ô£¿
+        ✨
       </div>
 
       {/* Christmas tree emoji decorations */}
       <div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
-        ­ƒÄä
+        🎄
       </div>
       <div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
-        ­ƒÄä
+        🎄
       </div>
     </div>
   )
diff --git a/components/dashboard/BuyerOrderInfo.tsx b/components/dashboard/BuyerOrderInfo.tsx
index aed607b..064bbf9 100644
--- a/components/dashboard/BuyerOrderInfo.tsx
+++ b/components/dashboard/BuyerOrderInfo.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Package, ShoppingBag, Info, ExternalLink, Loader2, AlertTriangle } from "lucide-react";
@@ -237,7 +237,7 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
               <div className="p-3 border-b">
                 <h4 className="font-medium text-sm">Customer Orders</h4>
                 <p className="text-xs text-muted-foreground">
-                  {orders.length} {orders.length === 1 ? 'order' : 'orders'} ÔÇó Total: {formatPrice(
+                  {orders.length} {orders.length === 1 ? 'order' : 'orders'} • Total: {formatPrice(
                     orders.reduce((sum, order) => sum + order.totalPrice, 0)
                   )}
                 </p>
@@ -279,11 +279,11 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                     <div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
                       <div className="flex gap-1">
                         <span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
-                        <span>•</span>
+                        <span>·</span>
                         <span>{formatPrice(order.totalPrice)}</span>
                         {isOrderUnderpaid(order) && (
                           <>
-                            <span>•</span>
+                            <span>·</span>
                             <span className="text-red-500">Underpaid</span>
                           </>
                         )}
@@ -299,4 +299,4 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
       </Tooltip>
     </TooltipProvider>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/ChatDetail.tsx b/components/dashboard/ChatDetail.tsx
index f4f5ccc..017d176 100644
--- a/components/dashboard/ChatDetail.tsx
+++ b/components/dashboard/ChatDetail.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import React, { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
@@ -832,4 +832,4 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
       />
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/ChatTable.tsx b/components/dashboard/ChatTable.tsx
index 2b1d6c1..ff63394 100644
--- a/components/dashboard/ChatTable.tsx
+++ b/components/dashboard/ChatTable.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
@@ -420,4 +420,4 @@ export default function ChatTable() {
       )}
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/NewChatForm.tsx b/components/dashboard/NewChatForm.tsx
index 404c5dd..c8a7414 100644
--- a/components/dashboard/NewChatForm.tsx
+++ b/components/dashboard/NewChatForm.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import React, { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -350,4 +350,4 @@ export default function NewChatForm() {
       </CardContent>
     </Card>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index ab6b9e1..7c8ba0e 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useState, useEffect } from "react"
 import OrderStats from "./order-stats"
@@ -75,7 +75,7 @@ export default function Content({ username, orderStats }: ContentProps) {
           {greeting}, {username}!
         </h1>
         <p className="text-muted-foreground mt-1 italic text-sm">
-          "{randomQuote.text}" ÔÇö <span className="font-medium">{randomQuote.author}</span>
+          "{randomQuote.text}" — <span className="font-medium">{randomQuote.author}</span>
         </p>
       </div>
 
diff --git a/components/dashboard/dashboard.tsx b/components/dashboard/dashboard.tsx
index d6cc568..5bec345 100644
--- a/components/dashboard/dashboard.tsx
+++ b/components/dashboard/dashboard.tsx
@@ -1,4 +1,4 @@
-import type React from "react"
+import type React from "react"
 import Layout from "../layout/layout"
 
 export default function Dashboard({ children }: { children: React.ReactNode }) {
diff --git a/components/dashboard/order-stats.tsx b/components/dashboard/order-stats.tsx
index aa18d00..a9051d0 100644
--- a/components/dashboard/order-stats.tsx
+++ b/components/dashboard/order-stats.tsx
@@ -1,4 +1,4 @@
-import type { LucideIcon } from "lucide-react"
+import type { LucideIcon } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 interface OrderStatsProps {
diff --git a/components/dashboard/page-loading.tsx b/components/dashboard/page-loading.tsx
index ca3d5c1..5574836 100644
--- a/components/dashboard/page-loading.tsx
+++ b/components/dashboard/page-loading.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card } from "@/components/ui/card";
@@ -113,4 +113,4 @@ export default function PageLoading({
       </Card>
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/promotions/EditPromotionForm.tsx b/components/dashboard/promotions/EditPromotionForm.tsx
index acfc1a3..473b117 100644
--- a/components/dashboard/promotions/EditPromotionForm.tsx
+++ b/components/dashboard/promotions/EditPromotionForm.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useState, useEffect } from 'react';
 import { z } from 'zod';
@@ -464,4 +464,4 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
       </form>
     </Form>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/promotions/NewPromotionForm.tsx b/components/dashboard/promotions/NewPromotionForm.tsx
index 43b7e11..715799c 100644
--- a/components/dashboard/promotions/NewPromotionForm.tsx
+++ b/components/dashboard/promotions/NewPromotionForm.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useState, useEffect } from 'react';
 import { z } from 'zod';
@@ -459,4 +459,4 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
       </form>
     </Form>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/promotions/ProductSelector.tsx b/components/dashboard/promotions/ProductSelector.tsx
index 384f728..27bc2b2 100644
--- a/components/dashboard/promotions/ProductSelector.tsx
+++ b/components/dashboard/promotions/ProductSelector.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useState, useEffect, useRef } from 'react';
 import { Check, ChevronDown, X, Search } from 'lucide-react';
@@ -248,4 +248,4 @@ export default function ProductSelector({
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/promotions/PromotionDetailsModal.tsx b/components/dashboard/promotions/PromotionDetailsModal.tsx
index 6d507f9..8ed342c 100644
--- a/components/dashboard/promotions/PromotionDetailsModal.tsx
+++ b/components/dashboard/promotions/PromotionDetailsModal.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useState, useEffect } from 'react';
 import { 
@@ -222,7 +222,7 @@ export default function PromotionDetailsModal({
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm font-medium">Current Usage</span>
                       <span className="text-sm text-muted-foreground">
-                        {promotion.usageCount} / {promotion.maxUsage || 'Ôê×'}
+                        {promotion.usageCount} / {promotion.maxUsage || '∞'}
                       </span>
                     </div>
                     <div className="w-full bg-gray-200 rounded-full h-2">
@@ -382,4 +382,4 @@ export default function PromotionDetailsModal({
       </DialogContent>
     </Dialog>
   );
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/promotions/PromotionsList.tsx b/components/dashboard/promotions/PromotionsList.tsx
index a53d323..0e4daa2 100644
--- a/components/dashboard/promotions/PromotionsList.tsx
+++ b/components/dashboard/promotions/PromotionsList.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useState, useEffect } from 'react';
 import { Plus, Tag, RefreshCw, Trash, Edit, Check, X, Eye } from 'lucide-react';
@@ -184,7 +184,7 @@ export default function PromotionsList() {
                         : 'None'}
                     </TableCell>
                     <TableCell>
-                      {promotion.usageCount} / {promotion.maxUsage || 'Ôê×'}
+                      {promotion.usageCount} / {promotion.maxUsage || '∞'}
                     </TableCell>
                     <TableCell>{formatDate(promotion.endDate)}</TableCell>
                     <TableCell>
@@ -306,4 +306,4 @@ export default function PromotionsList() {
       />
     </>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/dashboard/promotions/PromotionsPageSkeleton.tsx b/components/dashboard/promotions/PromotionsPageSkeleton.tsx
index 4d626e2..af97572 100644
--- a/components/dashboard/promotions/PromotionsPageSkeleton.tsx
+++ b/components/dashboard/promotions/PromotionsPageSkeleton.tsx
@@ -1,4 +1,4 @@
-import {
+import {
   Table,
   TableBody,
   TableCell,
@@ -59,4 +59,4 @@ export default function PromotionsPageSkeleton() {
       </Card>
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/home-navbar.tsx b/components/home-navbar.tsx
index b850a08..5eeb0d9 100644
--- a/components/home-navbar.tsx
+++ b/components/home-navbar.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
@@ -89,4 +89,4 @@ export function HomeNavbar() {
       )}
     </header>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/layout/KeepOnlineWrapper.tsx b/components/layout/KeepOnlineWrapper.tsx
index ee77023..0fba45d 100644
--- a/components/layout/KeepOnlineWrapper.tsx
+++ b/components/layout/KeepOnlineWrapper.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { usePathname } from "next/navigation";
 import KeepOnline from "@/components/KeepOnline";
@@ -14,4 +14,4 @@ const KeepOnlineWrapper = () => {
   return <KeepOnline />;
 };
 
-export default KeepOnlineWrapper; 
+export default KeepOnlineWrapper; 
\ No newline at end of file
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 5071a52..7daf193 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useState, useEffect } from "react"
 import { useTheme } from "next-themes"
diff --git a/components/layout/nav-item.tsx b/components/layout/nav-item.tsx
index b3bd125..553be3e 100644
--- a/components/layout/nav-item.tsx
+++ b/components/layout/nav-item.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
@@ -65,4 +65,4 @@ export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, on
       {children}
     </Link>
   )
-}
+}
\ No newline at end of file
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 4dd16df..f45ec00 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useState } from "react"
 import Link from "next/link"
diff --git a/components/layout/theme-provider.tsx b/components/layout/theme-provider.tsx
index 873e1de..32797a7 100644
--- a/components/layout/theme-provider.tsx
+++ b/components/layout/theme-provider.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
 import type { ThemeProviderProps } from "next-themes"
 
diff --git a/components/modals/broadcast-dialog.tsx b/components/modals/broadcast-dialog.tsx
index 7920fe0..9880914 100644
--- a/components/modals/broadcast-dialog.tsx
+++ b/components/modals/broadcast-dialog.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useRef } from "react";
 import { Button } from "@/components/ui/button";
@@ -350,4 +350,4 @@ __italic text__
       </DialogContent>
     </Dialog>
   );
-}
+}
\ No newline at end of file
diff --git a/components/modals/image-viewer-modal.tsx b/components/modals/image-viewer-modal.tsx
index 3caa98d..269a56d 100644
--- a/components/modals/image-viewer-modal.tsx
+++ b/components/modals/image-viewer-modal.tsx
@@ -1,4 +1,4 @@
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useEffect } from "react";
@@ -96,4 +96,4 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
       </DialogContent>
     </Dialog>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/modals/import-products-modal.tsx b/components/modals/import-products-modal.tsx
index 1699b9d..d45408e 100644
--- a/components/modals/import-products-modal.tsx
+++ b/components/modals/import-products-modal.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
@@ -65,7 +65,7 @@ export default function ImportProductsModal({ open, setOpen, onImportComplete }:
         const [name] = productInfo.split("\n");
         if (!name) continue;
 
-        const [category, subcategory] = productInfo.split("\n")[1].split("ÔÇó")[0].split("->")
+        const [category, subcategory] = productInfo.split("\n")[1].split("•")[0].split("->")
           .map(item => item.trim());
 
         if (!category || !subcategory) continue;
@@ -193,4 +193,4 @@ export default function ImportProductsModal({ open, setOpen, onImportComplete }:
       </DialogContent>
     </Dialog>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/modals/product-modal.tsx b/components/modals/product-modal.tsx
index ca12289..dda246b 100644
--- a/components/modals/product-modal.tsx
+++ b/components/modals/product-modal.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
@@ -320,7 +320,7 @@ const ProductBasicInfo: React.FC<{
     </div>
 
     <div className="bg-background rounded-lg border border-border p-4">
-      <h3 className="text-sm font-medium mb-4">­ƒÆ░ Cost & Profit Tracking</h3>
+      <h3 className="text-sm font-medium mb-4">💰 Cost & Profit Tracking</h3>
       <p className="text-xs text-muted-foreground mb-4">
         Track your costs to automatically calculate profit margins and markup percentages.
       </p>
@@ -474,4 +474,4 @@ const UnitTypeSelect: React.FC<{
       </Button>
     </div>
   </div>
-);
+);
\ No newline at end of file
diff --git a/components/modals/product-selector.tsx b/components/modals/product-selector.tsx
index ab4ddd2..b32a282 100644
--- a/components/modals/product-selector.tsx
+++ b/components/modals/product-selector.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
@@ -127,4 +127,4 @@ export default function ProductSelector({ selectedProducts, onSelectionChange }:
       )}
     </div>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/modals/profit-analysis-modal.tsx b/components/modals/profit-analysis-modal.tsx
index c91f2b8..83e04fd 100644
--- a/components/modals/profit-analysis-modal.tsx
+++ b/components/modals/profit-analysis-modal.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
diff --git a/components/modals/shipping-modal.tsx b/components/modals/shipping-modal.tsx
index ecaedf8..c8af667 100644
--- a/components/modals/shipping-modal.tsx
+++ b/components/modals/shipping-modal.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { ChangeEvent, FormEvent } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
@@ -9,7 +9,7 @@ import { ShippingData } from "@/lib/types";
 interface ShippingModalProps {
   open: boolean;
   onClose: () => void;
-  onSave: (shippingData: ShippingData) => void; //  Allow passing shippingData
+  onSave: (shippingData: ShippingData) => void; // ✅ Allow passing shippingData
   shippingData: ShippingData;
   setShippingData: React.Dispatch<React.SetStateAction<ShippingData>>;
   editing: boolean;
diff --git a/components/snow-loader.tsx b/components/snow-loader.tsx
index 8b16b5e..ac43f56 100644
--- a/components/snow-loader.tsx
+++ b/components/snow-loader.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useEffect, useState } from "react"
 import { isDecember } from "@/lib/utils/christmas"
@@ -45,7 +45,7 @@ export function SnowLoader({ className = "", count = 20 }: SnowLoaderProps) {
             fontSize: `${flake.size}rem`,
           }}
         >
-          ÔØä
+          ❄
         </div>
       ))}
     </div>
diff --git a/components/tables/order-table.tsx b/components/tables/order-table.tsx
index 19c6bcf..f39a99f 100644
--- a/components/tables/order-table.tsx
+++ b/components/tables/order-table.tsx
@@ -34,7 +34,9 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { clientFetch } from '@/lib/api';
+import { exportOrdersToCSV } from '@/lib/api-client';
 import { toast } from "sonner";
+import { Download } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   AlertDialog,
@@ -140,6 +142,7 @@ export default function OrderTable() {
   const [itemsPerPage, setItemsPerPage] = useState<number>(20);
   const pageSizeOptions = [5, 10, 15, 20, 25, 50, 75, 100];
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [exporting, setExporting] = useState(false);
 
   // Add order refresh subscription
   useEffect(() => {
@@ -351,6 +354,25 @@ export default function OrderTable() {
     toast.success("Orders refreshed");
   };
 
+  // Handle CSV export
+  const handleExportCSV = async () => {
+    if (statusFilter === "all") {
+      toast.error("Please select a specific status to export");
+      return;
+    }
+
+    try {
+      setExporting(true);
+      await exportOrdersToCSV(statusFilter);
+      toast.success(`Orders exported successfully!`);
+    } catch (error) {
+      console.error("Error exporting orders:", error);
+      toast.error("Failed to export orders");
+    } finally {
+      setExporting(false);
+    }
+  };
+
   // Add periodic refresh for underpaid orders
   useEffect(() => {
     // Check if we have any underpaid orders
@@ -384,6 +406,27 @@ export default function OrderTable() {
                 onChange={(value) => handleItemsPerPageChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
                 options={pageSizeOptions}
               />
+
+              {statusFilter !== "all" && (
+                <Button
+                  onClick={handleExportCSV}
+                  disabled={exporting}
+                  variant="outline"
+                  size="sm"
+                >
+                  {exporting ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Exporting...
+                    </>
+                  ) : (
+                    <>
+                      <Download className="mr-2 h-4 w-4" />
+                      Export CSV
+                    </>
+                  )}
+                </Button>
+              )}
             </div>
             
             <div className="flex items-center gap-2 self-end lg:self-auto">
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
index 002d1a5..9500b86 100644
--- a/components/theme-switcher.tsx
+++ b/components/theme-switcher.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -27,4 +27,4 @@ export function ThemeSwitcher() {
       )}
     </Button>
   );
-} 
+} 
\ No newline at end of file
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 287c550..0133f54 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { Moon, Sun } from "lucide-react"
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 9897b05..070c70f 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index 889ec71..81f54b8 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
index ab29656..06df060 100644
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils/styles";
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 9b2ba85..72d04dd 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index c776257..480294f 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils/styles";
@@ -35,4 +35,4 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   );
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants };
\ No newline at end of file
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 250192d..532f09c 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index d187fc7..25790d0 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index cba3784..990feca 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 35b1e96..b39c5a6 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils/general"
 
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index 6fd2c92..3bb8c21 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import useEmblaCarousel, {
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 6f4b30e..d621d11 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 01bf9b5..b0171aa 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
index 52b6e4c..9fa4894 100644
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index e00f393..73d036c 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 2984e24..125f11d 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
index 04e9d28..ef7d11c 100644
--- a/components/ui/date-picker.tsx
+++ b/components/ui/date-picker.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { format, addDays, startOfDay, endOfDay, isSameDay, isWithinInterval, getMonth, getYear, setMonth, setYear } from "date-fns"
@@ -410,4 +410,4 @@ export function DateRangeDisplay({ dateRange }: { dateRange?: DateRange }) {
       </span>
     </div>
   )
-} 
+} 
\ No newline at end of file
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index b43a8a0..442fb65 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 07a5bb3..e91bd4b 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index d5d13ad..b295e2a 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index 139e992..7b8d7e7 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 8e45814..8be3061 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils/styles";
 
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 0adbb1d..f61b3bf 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
index 7d5ccb0..1e067c8 100644
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 4ac662e..c084a57 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index ae71b17..9ad1c59 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils/styles";
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 72da2de..d128d6e 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index f69ad17..0d401fd 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 908a9ee..9726319 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
index a79dcc0..d77f153 100644
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index 574e83a..e625243 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 48d405e..13bca40 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 04aab35..b9930d9 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 3dcfe86..77f40f8 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 16f6787..bcea5c8 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index fee15e4..3e2b7d0 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils/styles";
+import { cn } from "@/lib/utils/styles";
 
 function Skeleton({
   className,
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index a800df8..f941aca 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 2c0fd53..cb9279b 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 32d1384..b83bda8 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils/styles";
 
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 208a078..ddf91f9 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index b4a9138..89d213a 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils/styles";
 
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index deb2af2..2d960fa 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
index 341a397..e16c3dc 100644
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index 74251f8..9f76738 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index e52ca51..0c10cda 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
index 7c2e88c..02e111d 100644
--- a/components/ui/use-toast.ts
+++ b/components/ui/use-toast.ts
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 // Inspired by react-hot-toast library
 import * as React from "react"