diff --git a/apps/Cloud-Computer-Control-Panel/app/dashboard/page.tsx b/apps/Cloud-Computer-Control-Panel/app/dashboard/page.tsx
index 8f63f17a..5d04e41c 100644
--- a/apps/Cloud-Computer-Control-Panel/app/dashboard/page.tsx
+++ b/apps/Cloud-Computer-Control-Panel/app/dashboard/page.tsx
@@ -6,9 +6,9 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Plus, Server, Activity, Settings, BookOpen } from "lucide-react"
-import { ManagerList } from "@/components/manager-list"
-import { CreateManager } from "@/components/create-manager"
-import { CredentialsSettings } from "@/components/credentials-settings"
+import { ManagerList } from "@/components/dashboard/manager-list"
+import { CreateManager } from "@/components/instance/create-manager"
+import { CredentialsSettings } from "@/components/dashboard/credentials-settings"
 
 export default function DashboardPage() {
   const router = useRouter()
@@ -73,7 +73,7 @@ export default function DashboardPage() {
               <img src="/apple-touch-icon.png" alt="CCCP" className="h-10 w-10 rounded-lg" />
               <div>
                 <h1 className="text-2xl font-bold">CCCP Cloud Computer Control Panel</h1>
-                <p className="text-sm text-muted-foreground">Cloud Infrastructure Management</p>
+                <p className="text-sm text-muted-foreground">Manage your own personal cloud with fully self-hosted cloud applications using Dokploy</p>
               </div>
             </div>
             <div className="flex items-center gap-2">
diff --git a/apps/Cloud-Computer-Control-Panel/components/cost-estimator.tsx b/apps/Cloud-Computer-Control-Panel/components/cost-estimator.tsx
deleted file mode 100644
index faffd2dc..00000000
--- a/apps/Cloud-Computer-Control-Panel/components/cost-estimator.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-"use client"
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { DollarSign, TrendingUp, TrendingDown, PieChart, Calculator } from "lucide-react"
-
-interface CostEstimatorProps {
-  managers: any[]
-}
-
-export function CostEstimator({ managers }: CostEstimatorProps) {
-  const calculateTotalCosts = () => {
-    return managers.reduce((total, manager) => {
-      const cost = manager.costEstimate?.estimatedMonthlyCost?.total || 0
-      return total + cost
-    }, 0)
-  }
-
-  const calculateCostsByType = () => {
-    const costsByType: { [key: string]: number } = {}
-    managers.forEach((manager) => {
-      const type = manager.config.instanceType
-      const cost = manager.costEstimate?.estimatedMonthlyCost?.total || 0
-      costsByType[type] = (costsByType[type] || 0) + cost
-    })
-    return costsByType
-  }
-
-  const calculateCostsByRegion = () => {
-    const costsByRegion: { [key: string]: number } = {}
-    managers.forEach((manager) => {
-      const region = manager.config.region
-      const cost = manager.costEstimate?.estimatedMonthlyCost?.total || 0
-      costsByRegion[region] = (costsByRegion[region] || 0) + cost
-    })
-    return costsByRegion
-  }
-
-  const getRunningCosts = () => {
-    return managers
-      .filter((m) => m.status?.state === "running")
-      .reduce((total, manager) => {
-        const cost = manager.costEstimate?.estimatedMonthlyCost?.total || 0
-        return total + cost
-      }, 0)
-  }
-
-  const totalCost = calculateTotalCosts()
-  const runningCost = getRunningCosts()
-  const costsByType = calculateCostsByType()
-  const costsByRegion = calculateCostsByRegion()
-  const potentialSavings = totalCost - runningCost
-
-  return (
-    <div className="space-y-6">
-      {/* Cost Overview */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Monthly Cost</CardTitle>
-            <DollarSign className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">${totalCost.toFixed(2)}</div>
-            <p className="text-xs text-muted-foreground">All instances if running</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Current Running Cost</CardTitle>
-            <TrendingUp className="h-4 w-4 text-green-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">${runningCost.toFixed(2)}</div>
-            <p className="text-xs text-muted-foreground">Only running instances</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Potential Savings</CardTitle>
-            <TrendingDown className="h-4 w-4 text-blue-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">${potentialSavings.toFixed(2)}</div>
-            <p className="text-xs text-muted-foreground">From stopped instances</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Cost Efficiency</CardTitle>
-            <Calculator className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {totalCost > 0 ? Math.round((potentialSavings / totalCost) * 100) : 0}%
-            </div>
-            <p className="text-xs text-muted-foreground">Savings percentage</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Cost Breakdown by Instance Type */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <PieChart className="h-5 w-5" />
-            Cost Breakdown by Instance Type
-          </CardTitle>
-          <CardDescription>Monthly cost distribution across different instance types</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {Object.keys(costsByType).length > 0 ? (
-            <div className="space-y-4">
-              {Object.entries(costsByType)
-                .sort(([, a], [, b]) => b - a)
-                .map(([type, cost]) => {
-                  const percentage = totalCost > 0 ? (cost / totalCost) * 100 : 0
-                  return (
-                    <div key={type} className="space-y-2">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline">{type}</Badge>
-                          <span className="text-sm text-muted-foreground">
-                            {managers.filter((m) => m.config.instanceType === type).length} instance(s)
-                          </span>
-                        </div>
-                        <div className="text-right">
-                          <div className="font-semibold">${cost.toFixed(2)}</div>
-                          <div className="text-xs text-muted-foreground">{percentage.toFixed(1)}%</div>
-                        </div>
-                      </div>
-                      <div className="w-full bg-gray-200 rounded-full h-2">
-                        <div className="bg-blue-500 h-2 rounded-full" style={{ width: `${percentage}%` }} />
-                      </div>
-                    </div>
-                  )
-                })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">No cost data available</div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Cost Breakdown by Region */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <PieChart className="h-5 w-5" />
-            Cost Breakdown by Region
-          </CardTitle>
-          <CardDescription>Monthly cost distribution across AWS regions</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {Object.keys(costsByRegion).length > 0 ? (
-            <div className="space-y-4">
-              {Object.entries(costsByRegion)
-                .sort(([, a], [, b]) => b - a)
-                .map(([region, cost]) => {
-                  const percentage = totalCost > 0 ? (cost / totalCost) * 100 : 0
-                  return (
-                    <div key={region} className="space-y-2">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline">{region}</Badge>
-                          <span className="text-sm text-muted-foreground">
-                            {managers.filter((m) => m.config.region === region).length} instance(s)
-                          </span>
-                        </div>
-                        <div className="text-right">
-                          <div className="font-semibold">${cost.toFixed(2)}</div>
-                          <div className="text-xs text-muted-foreground">{percentage.toFixed(1)}%</div>
-                        </div>
-                      </div>
-                      <div className="w-full bg-gray-200 rounded-full h-2">
-                        <div className="bg-green-500 h-2 rounded-full" style={{ width: `${percentage}%` }} />
-                      </div>
-                    </div>
-                  )
-                })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">No cost data available</div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Individual Instance Costs */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Individual Instance Costs</CardTitle>
-          <CardDescription>Detailed cost breakdown for each managed instance</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {managers.length > 0 ? (
-            <div className="space-y-4">
-              {managers.map((manager) => {
-                const cost = manager.costEstimate?.estimatedMonthlyCost
-                const isRunning = manager.status?.state === "running"
-                return (
-                  <div key={manager.managerId} className="flex items-center justify-between p-4 border rounded-lg">
-                    <div className="space-y-1">
-                      <div className="font-medium">{manager.config.instanceName || "Unnamed Instance"}</div>
-                      <div className="text-sm text-muted-foreground">
-                        {manager.config.instanceType} • {manager.config.region} • {manager.config.storageSize}GB
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Badge variant={isRunning ? "default" : "secondary"}>
-                          {manager.status?.state || "Not launched"}
-                        </Badge>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <div className="font-semibold">${cost?.total?.toFixed(2) || "0.00"}/mo</div>
-                      <div className="text-xs text-muted-foreground">
-                        Compute: ${cost?.compute?.toFixed(2) || "0.00"} • Storage: $
-                        {cost?.storage?.toFixed(2) || "0.00"}
-                      </div>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">No instances to display</div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Cost Optimization Tips */}
-      <Card>
-        <CardHeader>
-          <CardTitle>💡 Cost Optimization Tips</CardTitle>
-          <CardDescription>Ways to reduce your AWS EC2 costs</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
-              <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Stop Unused Instances</h4>
-              <p className="text-sm text-blue-800 dark:text-blue-200">
-                Stop instances when not in use to save ~70% on compute costs. You only pay for storage when stopped.
-              </p>
-            </div>
-            <div className="p-4 bg-green-50 dark:bg-green-950 rounded-lg">
-              <h4 className="font-semibold text-green-900 dark:text-green-100 mb-2">Right-size Your Instances</h4>
-              <p className="text-sm text-green-800 dark:text-green-200">
-                Choose the appropriate instance type for your workload. Start small and scale up as needed.
-              </p>
-            </div>
-            <div className="p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
-              <h4 className="font-semibold text-yellow-900 dark:text-yellow-100 mb-2">Use Spot Instances</h4>
-              <p className="text-sm text-yellow-800 dark:text-yellow-200">
-                For non-critical workloads, consider Spot instances which can be up to 90% cheaper.
-              </p>
-            </div>
-            <div className="p-4 bg-purple-50 dark:bg-purple-950 rounded-lg">
-              <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">Monitor and Set Alerts</h4>
-              <p className="text-sm text-purple-800 dark:text-purple-200">
-                Set up billing alerts in AWS Console to get notified when costs exceed your budget.
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/Cloud-Computer-Control-Panel/components/credentials-settings.tsx b/apps/Cloud-Computer-Control-Panel/components/dashboard/credentials-settings.tsx
similarity index 100%
rename from apps/Cloud-Computer-Control-Panel/components/credentials-settings.tsx
rename to apps/Cloud-Computer-Control-Panel/components/dashboard/credentials-settings.tsx
diff --git a/apps/Cloud-Computer-Control-Panel/components/manager-list.tsx b/apps/Cloud-Computer-Control-Panel/components/dashboard/manager-list.tsx
similarity index 99%
rename from apps/Cloud-Computer-Control-Panel/components/manager-list.tsx
rename to apps/Cloud-Computer-Control-Panel/components/dashboard/manager-list.tsx
index 45a4e5a0..b3b92d7e 100644
--- a/apps/Cloud-Computer-Control-Panel/components/manager-list.tsx
+++ b/apps/Cloud-Computer-Control-Panel/components/dashboard/manager-list.tsx
@@ -18,8 +18,8 @@ import {
   RotateCw,
   Trash2,
 } from "lucide-react"
-import { InstanceControls } from "./instance-controls"
-import { AddSoftwareModal } from "./add-software-modal"
+import { InstanceControls } from "../instance/instance-controls"
+import { AddSoftwareModal } from "../instance/add-software-modal"
 import { useToast } from "@/hooks/use-toast"
 
 interface Manager {
diff --git a/apps/Cloud-Computer-Control-Panel/components/instance-dashboard.tsx b/apps/Cloud-Computer-Control-Panel/components/instance-dashboard.tsx
deleted file mode 100644
index ff85f39a..00000000
--- a/apps/Cloud-Computer-Control-Panel/components/instance-dashboard.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Alert, AlertDescription } from "@/components/ui/alert"
-import {
-  Server,
-  Play,
-  Square,
-  Trash2,
-  RefreshCw,
-  ExternalLink,
-  DollarSign,
-  Clock,
-  MapPin,
-  HardDrive,
-  Shield,
-  Terminal,
-} from "lucide-react"
-import { useToast } from "@/hooks/use-toast"
-
-interface InstanceDashboardProps {
-  manager: any
-  apiUrl: string
-  onSelect: () => void
-  onDelete: () => void
-  onStatusUpdate: () => void
-  isActive: boolean
-}
-
-export function InstanceDashboard({
-  manager,
-  apiUrl,
-  onSelect,
-  onDelete,
-  onStatusUpdate,
-  isActive,
-}: InstanceDashboardProps) {
-  const [loading, setLoading] = useState(false)
-  const { toast } = useToast()
-
-  const getStateColor = (state: string) => {
-    switch (state) {
-      case "running":
-        return "bg-green-500"
-      case "stopped":
-        return "bg-yellow-500"
-      case "pending":
-        return "bg-blue-500"
-      case "stopping":
-        return "bg-orange-500"
-      case "terminated":
-        return "bg-red-500"
-      default:
-        return "bg-gray-500"
-    }
-  }
-
-  const getStateIcon = (state: string) => {
-    switch (state) {
-      case "running":
-        return <Play className="h-4 w-4" />
-      case "stopped":
-        return <Square className="h-4 w-4" />
-      case "pending":
-        return <Clock className="h-4 w-4" />
-      default:
-        return <Server className="h-4 w-4" />
-    }
-  }
-
-  const refreshStatus = async () => {
-    setLoading(true)
-    try {
-      await onStatusUpdate()
-      toast({
-        title: "Status Updated",
-        description: "Instance status refreshed successfully",
-      })
-    } catch (error) {
-      toast({
-        title: "Error",
-        description: "Failed to refresh status",
-        variant: "destructive",
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  // Auto-refresh status every 30 seconds for active manager
-  useEffect(() => {
-    if (isActive && manager.status?.instanceId) {
-      const interval = setInterval(onStatusUpdate, 30000)
-      return () => clearInterval(interval)
-    }
-  }, [isActive, manager.status?.instanceId, onStatusUpdate])
-
-  return (
-    <Card className={`transition-all ${isActive ? "ring-2 ring-blue-500" : ""}`}>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
-              <Server className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-            </div>
-            <div>
-              <CardTitle className="text-lg">{manager.config.instanceName || "Unnamed Instance"}</CardTitle>
-              <CardDescription className="flex items-center gap-2">
-                <span className="text-xs font-mono">{manager.managerId}</span>
-                {manager.status?.state && (
-                  <Badge variant="secondary" className="flex items-center gap-1">
-                    <div className={`w-2 h-2 rounded-full ${getStateColor(manager.status.state)}`} />
-                    {manager.status.state}
-                  </Badge>
-                )}
-              </CardDescription>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={refreshStatus} disabled={loading}>
-              <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
-            </Button>
-            <Button variant="ghost" size="sm" onClick={onDelete}>
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        {/* Instance Details */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-          <div className="flex items-center gap-2">
-            <Server className="h-4 w-4 text-muted-foreground" />
-            <span>{manager.config.instanceType}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <MapPin className="h-4 w-4 text-muted-foreground" />
-            <span>{manager.config.region}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <HardDrive className="h-4 w-4 text-muted-foreground" />
-            <span>{manager.config.storageSize}GB</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <DollarSign className="h-4 w-4 text-muted-foreground" />
-            <span>${manager.costEstimate?.estimatedMonthlyCost?.total?.toFixed(2) || "0.00"}/mo</span>
-          </div>
-        </div>
-
-        {/* Connection Info */}
-        {manager.status?.publicIp && (
-          <Alert>
-            <Terminal className="h-4 w-4" />
-            <AlertDescription>
-              <div className="space-y-1">
-                <div>
-                  <strong>Public IP:</strong> {manager.status.publicIp}
-                </div>
-                {manager.config.setupDokploy && (
-                  <div className="mt-2">
-                    <strong>Dokploy Dashboard:</strong>{" "}
-                    <a
-                      href={`http://${manager.status.publicIp}:3000`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-500 hover:text-blue-600 underline inline-flex items-center gap-1"
-                    >
-                      http://{manager.status.publicIp}:3000
-                      <ExternalLink className="h-3 w-3" />
-                    </a>
-                  </div>
-                )}
-                <div>
-                  <strong>SSH Command:</strong>
-                </div>
-                <code className="text-xs bg-muted px-2 py-1 rounded">
-                  {manager.config.keyName
-                    ? `ssh -i ${manager.config.keyName}.pem ubuntu@${manager.status.publicIp}`
-                    : `# Connect via AWS Systems Manager Session Manager`}
-                </code>
-              </div>
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Security Groups */}
-        {manager.config.allowedPorts && (
-          <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm font-medium">
-              <Shield className="h-4 w-4" />
-              Allowed Ports
-            </div>
-            <div className="flex flex-wrap gap-1">
-              {manager.config.allowedPorts.map((port: number) => (
-                <Badge key={port} variant="outline" className="text-xs">
-                  {port}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Development Environment */}
-        {manager.config.setupDevEnvironment && (
-          <div className="space-y-2">
-            <div className="text-sm font-medium">Development Tools</div>
-            <div className="flex flex-wrap gap-1">
-              {manager.config.devTools?.map((tool: string) => (
-                <Badge key={tool} variant="secondary" className="text-xs">
-                  {tool}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="flex gap-2 pt-2">
-          <Button onClick={onSelect} variant={isActive ? "default" : "outline"} size="sm" className="flex-1">
-            {isActive ? "Selected" : "Select"}
-          </Button>
-          {manager.status?.publicIp && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => window.open(`http://${manager.status.publicIp}`, "_blank")}
-            >
-              <ExternalLink className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/Cloud-Computer-Control-Panel/components/add-software-modal.tsx b/apps/Cloud-Computer-Control-Panel/components/instance/add-software-modal.tsx
similarity index 100%
rename from apps/Cloud-Computer-Control-Panel/components/add-software-modal.tsx
rename to apps/Cloud-Computer-Control-Panel/components/instance/add-software-modal.tsx
diff --git a/apps/Cloud-Computer-Control-Panel/components/create-manager.tsx b/apps/Cloud-Computer-Control-Panel/components/instance/create-manager.tsx
similarity index 91%
rename from apps/Cloud-Computer-Control-Panel/components/create-manager.tsx
rename to apps/Cloud-Computer-Control-Panel/components/instance/create-manager.tsx
index c154ec1a..51752999 100644
--- a/apps/Cloud-Computer-Control-Panel/components/create-manager.tsx
+++ b/apps/Cloud-Computer-Control-Panel/components/instance/create-manager.tsx
@@ -11,11 +11,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Checkbox } from "@/components/ui/checkbox"
 import { Badge } from "@/components/ui/badge"
 import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Slider } from "@/components/ui/slider"
 import { Rocket, CheckCircle, HardDrive, Cpu, MapPin } from "lucide-react"
 import { useToast } from "@/hooks/use-toast"
 import { Textarea } from "@/components/ui/textarea"
-import { DockerImageSearch } from "@/components/docker-image-search"
-import { GitHubRepoSearch } from "@/components/github-repo-search"
+import { DockerImageSearch } from "@/components/search/docker-image-search"
+import { GitHubRepoSearch } from "@/components/search/github-repo-search"
 
 const INSTANCE_TYPES = [
   { value: "t3.micro", label: "t3.micro", vcpu: 2, ram: 1, cost: 7.59 },
@@ -264,15 +265,23 @@ export function CreateManager({ credentials, onSuccess }: { credentials: any; on
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="storageSize">Storage Size (GB)</Label>
-              <Input
+              <div className="flex items-center justify-between">
+                <Label htmlFor="storageSize">Storage Size</Label>
+                <span className="text-sm font-medium">{formData.storageSize} GB</span>
+              </div>
+              <Slider
                 id="storageSize"
-                type="number"
                 min={20}
                 max={200}
-                value={formData.storageSize}
-                onChange={(e) => setFormData({ ...formData, storageSize: Number.parseInt(e.target.value) })}
+                step={10}
+                value={[formData.storageSize]}
+                onValueChange={([value]) => setFormData({ ...formData, storageSize: value })}
+                className="py-4"
               />
+              <div className="flex justify-between text-xs text-muted-foreground">
+                <span>20 GB</span>
+                <span>200 GB</span>
+              </div>
             </div>
 
             <Alert>
@@ -281,7 +290,32 @@ export function CreateManager({ credentials, onSuccess }: { credentials: any; on
                 SSH key pairs will be automatically generated and saved securely when you launch the instance
               </AlertDescription>
             </Alert>
+
+            {/* Cost Estimate */}
+            <div className="border-t pt-4 mt-4">
+              <div className="text-sm font-medium mb-3">Cost Estimate</div>
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <div className="text-xs text-muted-foreground mb-1">Instance</div>
+                  <div className="text-lg font-bold">${cost.estimatedMonthlyCost.instance.toFixed(2)}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground mb-1">Storage ({formData.storageSize}GB)</div>
+                  <div className="text-lg font-bold">${cost.estimatedMonthlyCost.storage.toFixed(2)}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-muted-foreground mb-1">Total Monthly</div>
+                  <div className="text-lg font-bold text-blue-500">${cost.estimatedMonthlyCost.total.toFixed(2)}</div>
+                </div>
+              </div>
+            </div>
           </CardContent>
+          <CardFooter className="border-t pt-6">
+            <Button type="submit" size="lg" className="w-full">
+              <Rocket className="h-4 w-4 mr-2" />
+              Create Manager
+            </Button>
+          </CardFooter>
         </Card>
 
         {/* Software Setup */}
@@ -467,41 +501,6 @@ export function CreateManager({ credentials, onSuccess }: { credentials: any; on
           </Card>
         )}
 
-        {/* Cost Estimate */}
-        <Card className="md:col-span-2">
-          <CardHeader>
-            <CardTitle>Cost Estimate</CardTitle>
-            <CardDescription>Estimated monthly AWS costs</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid md:grid-cols-4 gap-6">
-              <div>
-                <div className="text-sm text-muted-foreground mb-1">Instance</div>
-                <div className="text-2xl font-bold">${cost.estimatedMonthlyCost.instance.toFixed(2)}</div>
-              </div>
-              <div>
-                <div className="text-sm text-muted-foreground mb-1">Storage ({formData.storageSize}GB)</div>
-                <div className="text-2xl font-bold">${cost.estimatedMonthlyCost.storage.toFixed(2)}</div>
-              </div>
-              <div>
-                <div className="text-sm text-muted-foreground mb-1">Total Monthly</div>
-                <div className="text-2xl font-bold text-blue-500">${cost.estimatedMonthlyCost.total.toFixed(2)}</div>
-              </div>
-              <div className="flex items-center">
-                <Badge variant="outline" className="h-fit">
-                  <MapPin className="h-3 w-3 mr-1" />
-                  {formData.region}
-                </Badge>
-              </div>
-            </div>
-          </CardContent>
-          <CardFooter className="border-t pt-6">
-            <Button type="submit" size="lg" className="w-full md:w-auto">
-              <Rocket className="h-4 w-4 mr-2" />
-              Create Manager
-            </Button>
-          </CardFooter>
-        </Card>
       </div>
     </form>
   )
diff --git a/apps/Cloud-Computer-Control-Panel/components/instance-controls.tsx b/apps/Cloud-Computer-Control-Panel/components/instance/instance-controls.tsx
similarity index 100%
rename from apps/Cloud-Computer-Control-Panel/components/instance-controls.tsx
rename to apps/Cloud-Computer-Control-Panel/components/instance/instance-controls.tsx
diff --git a/apps/Cloud-Computer-Control-Panel/components/docker-image-search.tsx b/apps/Cloud-Computer-Control-Panel/components/search/docker-image-search.tsx
similarity index 100%
rename from apps/Cloud-Computer-Control-Panel/components/docker-image-search.tsx
rename to apps/Cloud-Computer-Control-Panel/components/search/docker-image-search.tsx
diff --git a/apps/Cloud-Computer-Control-Panel/components/github-repo-search.tsx b/apps/Cloud-Computer-Control-Panel/components/search/github-repo-search.tsx
similarity index 100%
rename from apps/Cloud-Computer-Control-Panel/components/github-repo-search.tsx
rename to apps/Cloud-Computer-Control-Panel/components/search/github-repo-search.tsx
diff --git a/apps/Cloud-Computer-Control-Panel/components/system-status.tsx b/apps/Cloud-Computer-Control-Panel/components/system-status.tsx
deleted file mode 100644
index 572f8ac4..00000000
--- a/apps/Cloud-Computer-Control-Panel/components/system-status.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { CheckCircle, Activity } from "lucide-react"
-
-export function SystemStatus() {
-  return (
-    <Card className="border-border/50">
-      <CardHeader className="pb-3">
-        <CardTitle className="flex items-center gap-2 text-lg">
-          <Activity className="h-5 w-5" />
-          System Status
-        </CardTitle>
-        <CardDescription>AWS Manager with Dokploy Integration</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <CheckCircle className="h-4 w-4 text-green-500" />
-            <Badge variant="secondary" className="flex items-center gap-1">
-              <div className="w-2 h-2 rounded-full bg-green-500" />
-              System Operational
-            </Badge>
-          </div>
-          <div className="text-sm text-muted-foreground">
-            Ready to create and manage EC2 instances with automated Dokploy installation
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/Cloud-Computer-Control-Panel/components/theme-provider.tsx b/apps/Cloud-Computer-Control-Panel/components/theme-provider.tsx
deleted file mode 100644
index 55c2f6eb..00000000
--- a/apps/Cloud-Computer-Control-Panel/components/theme-provider.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-  ThemeProvider as NextThemesProvider,
-  type ThemeProviderProps,
-} from 'next-themes'
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
diff --git a/apps/Cloud-Computer-Control-Panel/components/ui/slider.tsx b/apps/Cloud-Computer-Control-Panel/components/ui/slider.tsx
new file mode 100644
index 00000000..e161daec
--- /dev/null
+++ b/apps/Cloud-Computer-Control-Panel/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/apps/Cloud-Computer-Control-Panel/package.json b/apps/Cloud-Computer-Control-Panel/package.json
index a70bba7b..2e54a1eb 100644
--- a/apps/Cloud-Computer-Control-Panel/package.json
+++ b/apps/Cloud-Computer-Control-Panel/package.json
@@ -12,34 +12,15 @@
   "dependencies": {
     "@aws-sdk/client-ec2": "3.956.0",
     "@aws-sdk/credential-providers": "3.956.0",
-    "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "1.1.4",
-    "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-avatar": "1.1.2",
     "@radix-ui/react-checkbox": "1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.4",
     "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-hover-card": "1.1.4",
     "@radix-ui/react-label": "2.1.1",
-    "@radix-ui/react-menubar": "1.1.4",
-    "@radix-ui/react-navigation-menu": "1.2.3",
-    "@radix-ui/react-popover": "1.1.4",
-    "@radix-ui/react-progress": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.2",
     "@radix-ui/react-scroll-area": "1.2.2",
     "@radix-ui/react-select": "2.1.4",
-    "@radix-ui/react-separator": "1.1.1",
     "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.1",
-    "@radix-ui/react-switch": "1.1.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-toast": "1.2.4",
-    "@radix-ui/react-toggle": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.6",
     "@scalar/nextjs-api-reference": "0.9.7",
     "@types/node-forge": "^1.3.14",
     "@types/ssh2": "^1.15.5",
@@ -47,26 +28,15 @@
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.0.4",
-    "date-fns": "4.1.0",
-    "embla-carousel-react": "8.5.1",
-    "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
     "next": "16.0.10",
     "next-themes": "^0.4.6",
     "node-forge": "^1.3.3",
     "react": "19.2.0",
-    "react-day-picker": "9.8.0",
     "react-dom": "19.2.0",
-    "react-hook-form": "^7.60.0",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "2.15.4",
-    "sonner": "^1.7.4",
     "ssh2": "^1.17.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "3.25.76"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.9",