diff --git a/inventory/src/components/ui/alert.tsx b/inventory/src/components/ui/alert.tsx
new file mode 100644
index 0000000..5afd41d
--- /dev/null
+++ b/inventory/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/inventory/src/pages/Settings.tsx b/inventory/src/pages/Settings.tsx
index 5410901..24f83d6 100644
--- a/inventory/src/pages/Settings.tsx
+++ b/inventory/src/pages/Settings.tsx
@@ -4,7 +4,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Progress } from "@/components/ui/progress";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Loader2, RefreshCw, Upload, X } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
 import config from '../config';
 
 interface ImportProgress {
@@ -350,9 +352,11 @@ export function Settings() {
         )}
 
         {progress.error && (
-          <div className="text-sm text-red-500">
-            Error: {progress.error}
-          </div>
+          <Alert variant="destructive" className="mt-2">
+            <AlertDescription>
+              {progress.error}
+            </AlertDescription>
+          </Alert>
         )}
       </div>
     );
@@ -364,114 +368,136 @@ export function Settings() {
         <h1 className="text-2xl font-bold">Settings</h1>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div className="max-w-[400px] space-y-4">
+        {/* Update CSV Card */}
         <Card>
           <CardHeader>
-            <CardTitle>Data Management</CardTitle>
-            <CardDescription>Update and import CSV data files</CardDescription>
+            <CardTitle>Update CSV Files</CardTitle>
+            <CardDescription>Download the latest CSV data files</CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-4">
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="products-limit">Products Import Limit (0 for no limit)</Label>
-                  <Input
-                    id="products-limit"
-                    type="number"
-                    min="0"
-                    value={limits.products}
-                    onChange={(e) => setLimits(prev => ({ ...prev, products: parseInt(e.target.value) || 0 }))}
-                    disabled={isUpdating || isImporting}
-                  />
-                </div>
-                
-                <div className="space-y-2">
-                  <Label htmlFor="orders-limit">Orders Import Limit (0 for no limit)</Label>
-                  <Input
-                    id="orders-limit"
-                    type="number"
-                    min="0"
-                    value={limits.orders}
-                    onChange={(e) => setLimits(prev => ({ ...prev, orders: parseInt(e.target.value) || 0 }))}
-                    disabled={isUpdating || isImporting}
-                  />
-                </div>
-                
-                <div className="space-y-2">
-                  <Label htmlFor="purchase-orders-limit">Purchase Orders Import Limit (0 for no limit)</Label>
-                  <Input
-                    id="purchase-orders-limit"
-                    type="number"
-                    min="0"
-                    value={limits.purchaseOrders}
-                    onChange={(e) => setLimits(prev => ({ ...prev, purchaseOrders: parseInt(e.target.value) || 0 }))}
-                    disabled={isUpdating || isImporting}
-                  />
-                </div>
-              </div>
-
-              <div className="flex gap-2">
-                <Button 
-                  className="flex-1"
-                  onClick={handleUpdateCSV}
-                  disabled={isUpdating || isImporting}
-                >
-                  {isUpdating ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Updating CSV Files...
-                    </>
-                  ) : (
-                    <>
-                      <RefreshCw className="mr-2 h-4 w-4" />
-                      Update CSV Files
-                    </>
-                  )}
-                </Button>
-
-                {isUpdating && (
-                  <Button
-                    variant="destructive"
-                    onClick={handleCancel}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
+          <CardContent>
+            <div className="flex gap-2">
+              <Button 
+                className="flex-1"
+                onClick={handleUpdateCSV}
+                disabled={isUpdating || isImporting}
+              >
+                {isUpdating ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Updating CSV Files...
+                  </>
+                ) : (
+                  <>
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    Update CSV Files
+                  </>
                 )}
-              </div>
+              </Button>
 
-              <div className="flex gap-2">
-                <Button 
-                  className="flex-1"
-                  onClick={handleImportCSV}
-                  disabled={isUpdating || isImporting}
+              {isUpdating && (
+                <Button
+                  variant="destructive"
+                  onClick={handleCancel}
                 >
-                  {isImporting ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Importing Data...
-                    </>
-                  ) : (
-                    <>
-                      <Upload className="mr-2 h-4 w-4" />
-                      Import Data
-                    </>
-                  )}
+                  <X className="h-4 w-4" />
                 </Button>
-
-                {isImporting && (
-                  <Button
-                    variant="destructive"
-                    onClick={handleCancel}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                )}
-              </div>
-
-              {(isUpdating || isImporting || progress) && renderProgress()}
+              )}
             </div>
+
+            {isUpdating && renderProgress()}
           </CardContent>
         </Card>
+
+        {/* Import Data Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Import Data</CardTitle>
+            <CardDescription>Import current CSV files into database. Set limits to 0 to import all records.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <Label htmlFor="products-limit" className="text-xs">Products Limit</Label>
+                <Input
+                  id="products-limit"
+                  type="number"
+                  min="0"
+                  value={limits.products}
+                  onChange={(e) => setLimits(prev => ({ ...prev, products: parseInt(e.target.value) || 0 }))}
+                  disabled={isUpdating || isImporting}
+                  className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  placeholder="0 for no limit"
+                />
+              </div>
+              <div>
+                <Label htmlFor="orders-limit" className="text-xs">Orders Limit</Label>
+                <Input
+                  id="orders-limit"
+                  type="number"
+                  min="0"
+                  value={limits.orders}
+                  onChange={(e) => setLimits(prev => ({ ...prev, orders: parseInt(e.target.value) || 0 }))}
+                  disabled={isUpdating || isImporting}
+                  className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  placeholder="0 for no limit"
+                />
+              </div>
+              <div>
+                <Label htmlFor="purchase-orders-limit" className="text-xs">PO Limit</Label>
+                <Input
+                  id="purchase-orders-limit"
+                  type="number"
+                  min="0"
+                  value={limits.purchaseOrders}
+                  onChange={(e) => setLimits(prev => ({ ...prev, purchaseOrders: parseInt(e.target.value) || 0 }))}
+                  disabled={isUpdating || isImporting}
+                  className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  placeholder="0 for no limit"
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button 
+                className="flex-1"
+                onClick={handleImportCSV}
+                disabled={isUpdating || isImporting}
+              >
+                {isImporting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Importing...
+                  </>
+                ) : (
+                  <>
+                    <Upload className="mr-2 h-4 w-4" />
+                    Import Data
+                  </>
+                )}
+              </Button>
+
+              {isImporting && (
+                <Button
+                  variant="destructive"
+                  onClick={handleCancel}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+
+            {isImporting && renderProgress()}
+      
+
+        {/* Show progress outside cards if neither operation is running but we have progress state */}
+        {!isUpdating && !isImporting && progress && (
+          <>
+            {renderProgress()}
+          </>
+        )}
+            </CardContent>
+            </Card>
       </div>
     </div>
   );