diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index 7681540..9f4d906 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -6,7 +6,7 @@ import QuickActions from "./quick-actions"
 import RecentActivity from "./recent-activity"
 import { WidgetSettings } from "./widget-settings"
 import { WidgetSettingsModal } from "./widget-settings-modal"
-import { DashboardEditor, EditDashboardButton } from "./dashboard-editor"
+import { DashboardEditor } from "./dashboard-editor"
 import { DraggableWidget } from "./draggable-widget"
 import RevenueWidget from "./revenue-widget"
 import LowStockWidget from "./low-stock-widget"
@@ -46,9 +46,8 @@ export default function Content({ username, orderStats }: ContentProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
-  const { widgets, toggleWidget, moveWidget, reorderWidgets, resetLayout, isWidgetVisible, updateWidgetSettings, updateWidgetColSpan } = useWidgetLayout();
+  const { widgets, toggleWidget, moveWidget, reorderWidgets, resetLayout, isWidgetVisible, updateWidgetSettings } = useWidgetLayout();
   const [configuredWidget, setConfiguredWidget] = useState<WidgetConfig | null>(null);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   // Initialize with a default quote to match server-side rendering, then randomize on client
   const [randomQuote, setRandomQuote] = useState({ text: "Loading wisdom...", author: "..." });
@@ -232,10 +231,6 @@ export default function Content({ username, orderStats }: ContentProps) {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <EditDashboardButton
-            isEditMode={isEditMode}
-            onToggle={() => setIsEditMode(!isEditMode)}
-          />
           <WidgetSettings
             widgets={widgets}
             onToggle={toggleWidget}
@@ -248,30 +243,24 @@ export default function Content({ username, orderStats }: ContentProps) {
 
       <DashboardEditor
         widgets={widgets}
-        isEditMode={isEditMode}
-        onToggleEditMode={() => setIsEditMode(false)}
+        isEditMode={false}
+        onToggleEditMode={() => { }}
         onReorder={reorderWidgets}
         onReset={resetLayout}
       >
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 auto-rows-min">
+        <div className="space-y-10">
           {widgets.map((widget) => {
-            if (!widget.visible && !isEditMode) return null;
+            if (!widget.visible) return null;
 
             return (
               <DraggableWidget
                 key={widget.id}
                 widget={widget}
-                isEditMode={isEditMode}
+                isEditMode={false}
                 onConfigure={() => setConfiguredWidget(widget)}
                 onToggleVisibility={() => toggleWidget(widget.id)}
               >
-                {!widget.visible && isEditMode ? (
-                  <div className="opacity-40 grayscale pointer-events-none h-full">
-                    {renderWidget(widget)}
-                  </div>
-                ) : (
-                  renderWidget(widget)
-                )}
+                {renderWidget(widget)}
               </DraggableWidget>
             );
           })}
@@ -283,9 +272,8 @@ export default function Content({ username, orderStats }: ContentProps) {
         widget={configuredWidget}
         open={!!configuredWidget}
         onOpenChange={(open) => !open && setConfiguredWidget(null)}
-        onSave={(widgetId, settings, colSpan) => {
+        onSave={(widgetId, settings) => {
           updateWidgetSettings(widgetId, settings);
-          if (colSpan !== undefined) updateWidgetColSpan(widgetId, colSpan);
         }}
       />
     </div>
diff --git a/components/dashboard/dashboard-editor.tsx b/components/dashboard/dashboard-editor.tsx
index bdd6765..063bfe0 100644
--- a/components/dashboard/dashboard-editor.tsx
+++ b/components/dashboard/dashboard-editor.tsx
@@ -15,7 +15,7 @@ import {
 import {
     SortableContext,
     sortableKeyboardCoordinates,
-    rectSortingStrategy,
+    verticalListSortingStrategy,
     arrayMove,
 } from "@dnd-kit/sortable"
 import { Button } from "@/components/ui/button"
@@ -81,7 +81,7 @@ export function DashboardEditor({
         >
             <SortableContext
                 items={widgets.map(w => w.id)}
-                strategy={rectSortingStrategy}
+                strategy={verticalListSortingStrategy}
             >
                 {children}
             </SortableContext>
@@ -126,32 +126,3 @@ export function DashboardEditor({
     )
 }
 
-// Edit button component to add to the header
-export function EditDashboardButton({
-    isEditMode,
-    onToggle
-}: {
-    isEditMode: boolean
-    onToggle: () => void
-}) {
-    return (
-        <Button
-            variant={isEditMode ? "default" : "outline"}
-            size="sm"
-            className="h-8 gap-2"
-            onClick={onToggle}
-        >
-            {isEditMode ? (
-                <>
-                    <X className="h-4 w-4" />
-                    <span className="hidden sm:inline">Cancel</span>
-                </>
-            ) : (
-                <>
-                    <Edit3 className="h-4 w-4" />
-                    <span className="hidden sm:inline">Edit Layout</span>
-                </>
-            )}
-        </Button>
-    )
-}
diff --git a/components/dashboard/draggable-widget.tsx b/components/dashboard/draggable-widget.tsx
index e4291b5..b404471 100644
--- a/components/dashboard/draggable-widget.tsx
+++ b/components/dashboard/draggable-widget.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 import { GripVertical, Settings, X, Eye, EyeOff } from "lucide-react"
@@ -41,21 +41,12 @@ export function DraggableWidget({
         zIndex: isDragging ? 1000 : 1,
     }
 
-    const colSpanClasses = {
-        1: "lg:col-span-1",
-        2: "lg:col-span-2",
-        3: "lg:col-span-3",
-        4: "lg:col-span-4",
-    }[widget.colSpan || 4] || "lg:col-span-4"
-
     return (
         <div
             ref={setNodeRef}
             style={style}
             className={cn(
                 "relative group",
-                colSpanClasses,
-                "md:col-span-2", // Default to 2 columns on tablet
                 isEditMode && "ring-2 ring-primary ring-offset-2 ring-offset-background rounded-lg",
                 isDragging && "z-50 shadow-2xl"
             )}
diff --git a/components/dashboard/widget-settings-modal.tsx b/components/dashboard/widget-settings-modal.tsx
index cc6646a..37b645e 100644
--- a/components/dashboard/widget-settings-modal.tsx
+++ b/components/dashboard/widget-settings-modal.tsx
@@ -28,25 +28,23 @@ interface WidgetSettingsModalProps {
     widget: WidgetConfig | null
     open: boolean
     onOpenChange: (open: boolean) => void
-    onSave: (widgetId: string, settings: Record<string, any>, colSpan: number) => void
+    onSave: (widgetId: string, settings: Record<string, any>) => void
 }
 
 export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: WidgetSettingsModalProps) {
     const [localSettings, setLocalSettings] = useState<Record<string, any>>({})
-    const [localColSpan, setLocalColSpan] = useState<number>(4)
 
     // Initialize local settings when widget changes
     const handleOpenChange = (isOpen: boolean) => {
         if (isOpen && widget) {
             setLocalSettings({ ...widget.settings })
-            setLocalColSpan(widget.colSpan || 4)
         }
         onOpenChange(isOpen)
     }
 
     const handleSave = () => {
         if (widget) {
-            onSave(widget.id, localSettings, localColSpan)
+            onSave(widget.id, localSettings)
             onOpenChange(false)
         }
     }
@@ -72,27 +70,6 @@ export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: Widg
 
                 <ScrollArea className="max-h-[60vh] -mr-4 pr-4">
                     <div className="space-y-6 py-4">
-                        {/* Resize Selection */}
-                        <div className="space-y-3 pb-6 border-b border-border/40">
-                            <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Widget Display</Label>
-                            <div className="flex items-center justify-between">
-                                <Label htmlFor="colSpan" className="text-sm font-medium">Widget Width</Label>
-                                <Select
-                                    value={String(localColSpan)}
-                                    onValueChange={(v) => setLocalColSpan(parseInt(v))}
-                                >
-                                    <SelectTrigger className="w-40">
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="1">Small (1/4)</SelectItem>
-                                        <SelectItem value="2">Medium (1/2)</SelectItem>
-                                        <SelectItem value="3">Large (3/4)</SelectItem>
-                                        <SelectItem value="4">Full Width</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
 
                         <div className="space-y-4">
                             {/* Recent Activity Settings */}
diff --git a/hooks/useWidgetLayout.ts b/hooks/useWidgetLayout.ts
index b2b0b22..51be753 100644
--- a/hooks/useWidgetLayout.ts
+++ b/hooks/useWidgetLayout.ts
@@ -50,22 +50,21 @@ export interface WidgetConfig {
     title: string
     visible: boolean
     order: number
-    colSpan: number // 1, 2, 3, 4 (full)
     settings?: Record<string, any>
 }
 
 const DEFAULT_WIDGETS: WidgetConfig[] = [
-    { id: "quick-actions", title: "Quick Actions", visible: true, order: 0, colSpan: 4 },
-    { id: "overview", title: "Overview", visible: true, order: 1, colSpan: 4, settings: { showChange: false } },
-    { id: "recent-activity", title: "Recent Activity", visible: true, order: 2, colSpan: 2, settings: { itemCount: 10 } },
-    { id: "top-products", title: "Top Products", visible: true, order: 3, colSpan: 2, settings: { itemCount: 5, showRevenue: true } },
-    { id: "revenue-chart", title: "Revenue Chart", visible: false, order: 4, colSpan: 2, settings: { days: 7, showComparison: false } },
-    { id: "low-stock", title: "Low Stock Alerts", visible: false, order: 5, colSpan: 2, settings: { threshold: 5, itemCount: 5 } },
-    { id: "recent-customers", title: "Recent Customers", visible: false, order: 6, colSpan: 2, settings: { itemCount: 5, showSpent: true } },
-    { id: "pending-chats", title: "Pending Chats", visible: false, order: 7, colSpan: 2, settings: { showPreview: true } },
+    { id: "quick-actions", title: "Quick Actions", visible: true, order: 0 },
+    { id: "overview", title: "Overview", visible: true, order: 1, settings: { showChange: false } },
+    { id: "recent-activity", title: "Recent Activity", visible: true, order: 2, settings: { itemCount: 10 } },
+    { id: "top-products", title: "Top Products", visible: true, order: 3, settings: { itemCount: 5, showRevenue: true } },
+    { id: "revenue-chart", title: "Revenue Chart", visible: false, order: 4, settings: { days: 7, showComparison: false } },
+    { id: "low-stock", title: "Low Stock Alerts", visible: false, order: 5, settings: { threshold: 5, itemCount: 5 } },
+    { id: "recent-customers", title: "Recent Customers", visible: false, order: 6, settings: { itemCount: 5, showSpent: true } },
+    { id: "pending-chats", title: "Pending Chats", visible: false, order: 7, settings: { showPreview: true } },
 ]
 
-const STORAGE_KEY = "dashboard-widget-layout-v3"
+const STORAGE_KEY = "dashboard-widget-layout-v4"
 
 /**
  * useWidgetLayout - Persist and manage dashboard widget visibility, order, and settings
@@ -140,11 +139,6 @@ export function useWidgetLayout() {
         )
     }, [])
 
-    const updateWidgetColSpan = useCallback((widgetId: string, colSpan: number) => {
-        setWidgets(prev =>
-            prev.map(w => w.id === widgetId ? { ...w, colSpan } : w)
-        )
-    }, [])
 
     const getWidgetSettings = useCallback(<T extends Record<string, any>>(widgetId: string): T | undefined => {
         return widgets.find(w => w.id === widgetId)?.settings as T | undefined
@@ -185,7 +179,6 @@ export function useWidgetLayout() {
         moveWidget,
         reorderWidgets,
         updateWidgetSettings,
-        updateWidgetColSpan,
         getWidgetSettings,
         resetLayout,
         getVisibleWidgets,