diff --git a/src/app/admin/flows/[id]/page.tsx b/src/app/admin/flows/[id]/page.tsx
index 176946e..3256623 100644
--- a/src/app/admin/flows/[id]/page.tsx
+++ b/src/app/admin/flows/[id]/page.tsx
@@ -11,9 +11,8 @@ import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
 import { useToast } from '@/hooks/use-toast';
 import Link from 'next/link';
-import { ChevronLeft, Plus } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
-import { FlowCanvas } from '@/components/admin/flow-canvas';
 
 interface FlowFormPageProps {
   params: { id: string };
@@ -83,8 +82,10 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
                         <Skeleton className="h-20 w-full" />
                     </div>
                 </CardContent>
+                <CardFooter>
+                  <Skeleton className="h-10 w-32" />
+                </CardFooter>
             </Card>
-            <Skeleton className="h-10 w-32 mt-6" />
         </div>
     )
   }
@@ -107,7 +108,7 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
         </h1>
       </div>
 
-      <form action={formAction} className="space-y-8">
+      <form action={formAction}>
         <Card>
           <CardHeader>
             <CardTitle>Flow Details</CardTitle>
@@ -133,15 +134,10 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
               {getError('description') && <p className="text-sm text-destructive">{getError('description')}</p>}
             </div>
           </CardContent>
-        </Card>
-        
-        {!isNew && (
-          <FlowCanvas />
-        )}
-
-        <div className="flex justify-start">
+          <CardFooter>
             <SubmitButton isNew={isNew} />
-        </div>
+          </CardFooter>
+        </Card>
       </form>
     </div>
   );
diff --git a/src/components/admin/flow-canvas.tsx b/src/components/admin/flow-canvas.tsx
deleted file mode 100644
index a4a1659..0000000
--- a/src/components/admin/flow-canvas.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-
-'use client';
-
-import React, { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { MoreVertical, Trash2, Edit, Plus, Move } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogClose,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '../ui/textarea';
-
-type FlowStep = {
-  id: number;
-  title: string;
-  type: string;
-  description: string;
-};
-
-// Mock data for the flow steps.
-const initialFlowSteps: FlowStep[] = [
-  { id: 1, title: 'Project Type', type: 'Step 1', description: 'What are you looking to build?' },
-  { id: 2, title: 'Service Type', type: 'Step 2', description: 'Choose a service.' },
-  { id: 3, title: 'Project Stage', type: 'Step 3', description: 'Choose the stage of your project.' },
-  { id: 4, title: 'Design Process', type: 'Step 4', description: 'What type of design process?' },
-  { id: 5, title: 'Page Count', type: 'Step 5', description: 'How many pages/screens?' },
-  { id: 6, title: 'Animations', type: 'Step 6', description: 'Implement animated elements?' },
-  { id: 7, title: 'Illustrations', type: 'Step 7', description: 'Create tailored illustrations?' },
-  { id: 8, title: 'Branding', type: 'Step 8', description: 'Have you thought about branding?' },
-  { id: 9, title: 'Additional Features', type: 'Step 9', description: 'Develop additional features?' },
-  { id: 10, title: 'Shopping Cart', type: 'Step 10', description: 'Need a shopping cart?' },
-  { id: 11, title: 'UI/UX Design', type: 'Step 12', description: 'What type of design process?' },
-  { id: 12, title: 'Results', type: 'Results', description: 'Show the project estimate.' },
-];
-
-function EditStepDialog({
-  step,
-  isOpen,
-  onOpenChange,
-  onSave,
-}: {
-  step: FlowStep | null;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onSave: (updatedStep: FlowStep) => void;
-}) {
-  const [editedStep, setEditedStep] = useState<FlowStep | null>(step);
-
-  React.useEffect(() => {
-    setEditedStep(step);
-  }, [step]);
-
-  if (!editedStep) return null;
-
-  const handleSave = () => {
-    onSave(editedStep);
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit Step: {step?.title}</DialogTitle>
-          <DialogDescription>
-            Modify the details for this step in your flow.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-4">
-          <div className="space-y-2">
-            <Label htmlFor="step-title">Title</Label>
-            <Input
-              id="step-title"
-              value={editedStep.title}
-              onChange={(e) => setEditedStep({ ...editedStep, title: e.target.value })}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="step-description">Description</Label>
-            <Textarea
-              id="step-description"
-              value={editedStep.description}
-              onChange={(e) => setEditedStep({ ...editedStep, description: e.target.value })}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button onClick={handleSave}>Save Changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-
-function FlowStepCard({ step, onEdit }: { step: FlowStep, onEdit: (step: FlowStep) => void }) {
-  return (
-    <Card className="w-72 shadow-md hover:shadow-lg transition-shadow bg-card">
-       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <div className="space-y-1">
-           <p className="text-xs font-semibold uppercase text-primary">{step.type}</p>
-          <CardTitle className="text-lg">{step.title}</CardTitle>
-        </div>
-        <div className="flex items-center gap-1">
-           <Button variant="ghost" size="icon" className="cursor-move h-8 w-8">
-            <Move className="h-4 w-4" />
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <MoreVertical className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => onEdit(step)}>
-                <Edit className="mr-2 h-4 w-4" />
-                <span>Edit</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem className="text-destructive">
-                <Trash2 className="mr-2 h-4 w-4" />
-                <span>Delete</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">{step.description}</p>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function FlowCanvas() {
-  const [steps, setSteps] = useState<FlowStep[]>(initialFlowSteps);
-  const [editingStep, setEditingStep] = useState<FlowStep | null>(null);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-
-  const handleEditClick = (step: FlowStep) => {
-    setEditingStep(step);
-    setIsEditDialogOpen(true);
-  };
-
-  const handleSaveStep = (updatedStep: FlowStep) => {
-    setSteps(steps.map(s => s.id === updatedStep.id ? updatedStep : s));
-  };
-
-
-  return (
-    <div className="space-y-4">
-      <Card>
-        <CardHeader>
-          <CardTitle>Flow Canvas</CardTitle>
-          <CardDescription>
-            Visually represent and manage the steps of your flow.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="relative rounded-lg border border-dashed bg-muted/50 p-8 min-h-[500px]">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-              {steps.map((step) => (
-                <FlowStepCard key={step.id} step={step} onEdit={handleEditClick} />
-              ))}
-                <Button variant="outline" className="w-72 h-full min-h-[150px] border-dashed flex flex-col gap-2 items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary">
-                    <Plus className="h-8 w-8" />
-                    <span>Add New Step</span>
-                </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-      <EditStepDialog
-        step={editingStep}
-        isOpen={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        onSave={handleSaveStep}
-      />
-    </div>
-  );
-}