diff --git a/frontend/app/(sidebar)/data-pipeline/page.tsx b/frontend/app/(sidebar)/data-pipeline/page.tsx
index 2acdf94..44d3a88 100644
--- a/frontend/app/(sidebar)/data-pipeline/page.tsx
+++ b/frontend/app/(sidebar)/data-pipeline/page.tsx
@@ -1,10 +1,9 @@
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Badge } from "@/components/ui/badge"
-import { Clock, Database, Play, Plus, RefreshCw, Pause, AlertTriangle, Copy } from "lucide-react"
-import Link from "next/link"
-import PageHeader from "@/components/page-header"
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import PageHeader from "@/components/page-header";
+import { PipelineCard } from "@/components/pipeline/card";
 
 export default function DataPipelinePage() {
   return (
@@ -135,108 +134,5 @@ export default function DataPipelinePage() {
         </Tabs>
       </div>
     </div>
-  )
+  );
 }
-
-interface PipelineCardProps {
-  title: string
-  description: string
-  status: "active" | "paused" | "error"
-  lastRun: string
-  nextRun: string
-  sources: number
-  records: number
-  error?: string
-  aiPowered?: boolean
-}
-
-function PipelineCard({
-  title,
-  description,
-  status,
-  lastRun,
-  nextRun,
-  sources,
-  records,
-  error,
-  aiPowered,
-}: PipelineCardProps) {
-  return (
-    <Card className={`pipeline-card ${status === "active" ? "border-2 border-green-500 dark:border-green-600" : ""}`}>
-      <CardHeader className="pb-2">
-        <div className="flex justify-between items-start">
-          <CardTitle className="text-lg">{title}</CardTitle>
-          <StatusBadge status={status} />
-        </div>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-2">
-          <div className="flex items-center text-sm">
-            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
-            <span className="text-muted-foreground">Last run:</span>
-            <span className="ml-1 font-medium">{lastRun}</span>
-          </div>
-          <div className="flex items-center text-sm">
-            <RefreshCw className="h-4 w-4 mr-2 text-muted-foreground" />
-            <span className="text-muted-foreground">Next run:</span>
-            <span className="ml-1 font-medium">{nextRun}</span>
-          </div>
-          <div className="flex items-center text-sm">
-            <Database className="h-4 w-4 mr-2 text-muted-foreground" />
-            <span className="text-muted-foreground">Sources:</span>
-            <span className="ml-1 font-medium">{sources}</span>
-            <span className="mx-2">•</span>
-            <span className="text-muted-foreground">Records:</span>
-            <span className="ml-1 font-medium">{records}</span>
-          </div>
-          {error && (
-            <div className="flex items-center text-sm text-destructive mt-2">
-              <AlertTriangle className="h-4 w-4 mr-2" />
-              {error}
-            </div>
-          )}
-        </div>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Link href={`/data-pipeline/${title.toLowerCase().replace(/\s+/g, "-")}`}>
-          <Button variant="outline" size="sm">
-            View Details
-          </Button>
-        </Link>
-        <div className="flex gap-2">
-          <Button variant="outline" size="icon" className="h-8 w-8 text-primary border-primary/20 hover:border-primary">
-            <Copy className="h-4 w-4" />
-          </Button>
-          {status === "active" ? (
-            <Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
-              <Pause className="h-4 w-4" />
-            </Button>
-          ) : (
-            <Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
-              <Play className="h-4 w-4" />
-            </Button>
-          )}
-          <Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
-
-function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
-  if (status === "active") {
-    return (
-      <Badge variant="default" className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">
-        Active
-      </Badge>
-    )
-  } else if (status === "paused") {
-    return <Badge variant="secondary">Paused</Badge>
-  } else {
-    return <Badge variant="destructive">Error</Badge>
-  }
-}
-
diff --git a/frontend/app/(sidebar)/maps/page.tsx b/frontend/app/(sidebar)/maps/page.tsx
index a1f6c89..65630b2 100644
--- a/frontend/app/(sidebar)/maps/page.tsx
+++ b/frontend/app/(sidebar)/maps/page.tsx
@@ -83,7 +83,7 @@ export default function MapsPage() {
   return (
     <div className="relative h-screen w-full overflow-hidden bg-gray-100 dark:bg-gray-900">
       {/* Map Container */}
-      <div className="absolute inset-0 bg-[url('/map.png')] bg-cover bg-center">
+      <div className="">
         {/* Map Placeholder - In a real implementation, this would be a map component */}
         <div className="absolute inset-0 flex items-center justify-center">
           <div className="text-2xl text-muted-foreground opacity-0">Map View</div>
diff --git a/frontend/components/pipeline/badge.tsx b/frontend/components/pipeline/badge.tsx
new file mode 100644
index 0000000..afc435d
--- /dev/null
+++ b/frontend/components/pipeline/badge.tsx
@@ -0,0 +1,18 @@
+import { Badge } from "@/components/ui/badge";
+
+export function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
+  if (status === "active") {
+    return (
+      <Badge
+        variant="default"
+        className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
+      >
+        Active
+      </Badge>
+    );
+  } else if (status === "paused") {
+    return <Badge variant="secondary">Paused</Badge>;
+  } else {
+    return <Badge variant="destructive">Error</Badge>;
+  }
+}
diff --git a/frontend/components/pipeline/card.tsx b/frontend/components/pipeline/card.tsx
new file mode 100644
index 0000000..8302bf9
--- /dev/null
+++ b/frontend/components/pipeline/card.tsx
@@ -0,0 +1,132 @@
+import {
+  Clock,
+  Database,
+  Play,
+  RefreshCw,
+  Pause,
+  AlertTriangle,
+  Copy,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { StatusBadge } from "./badge";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+
+interface PipelineCardProps {
+  title: string;
+  description: string;
+  status: "active" | "paused" | "error";
+  lastRun: string;
+  nextRun: string;
+  sources: number;
+  records: number;
+  error?: string;
+  aiPowered?: boolean;
+}
+
+export function PipelineCard({
+  title,
+  description,
+  status,
+  lastRun,
+  nextRun,
+  sources,
+  records,
+  error,
+}: PipelineCardProps) {
+  return (
+    <Card
+      className={`pipeline-card ${
+        status === "active"
+          ? "border-2 border-green-500 dark:border-green-600"
+          : ""
+      }`}
+    >
+      <CardHeader className="pb-2">
+        <div className="flex justify-between items-start">
+          <CardTitle className="text-lg">{title}</CardTitle>
+          <StatusBadge status={status} />
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <div className="flex items-center text-sm">
+            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
+            <span className="text-muted-foreground">Last run:</span>
+            <span className="ml-1 font-medium">{lastRun}</span>
+          </div>
+          <div className="flex items-center text-sm">
+            <RefreshCw className="h-4 w-4 mr-2 text-muted-foreground" />
+            <span className="text-muted-foreground">Next run:</span>
+            <span className="ml-1 font-medium">{nextRun}</span>
+          </div>
+          <div className="flex items-center text-sm">
+            <Database className="h-4 w-4 mr-2 text-muted-foreground" />
+            <span className="text-muted-foreground">Sources:</span>
+            <span className="ml-1 font-medium">{sources}</span>
+            <span className="mx-2">•</span>
+            <span className="text-muted-foreground">Records:</span>
+            <span className="ml-1 font-medium">{records}</span>
+          </div>
+          {error && (
+            <div className="flex items-center text-sm text-destructive mt-2">
+              <AlertTriangle className="h-4 w-4 mr-2" />
+              {error}
+            </div>
+          )}
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Link
+          href={`/data-pipeline/${title.toLowerCase().replace(/\s+/g, "-")}`}
+        >
+          <Button variant="outline" size="sm">
+            View Details
+          </Button>
+        </Link>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 text-primary border-primary/20 hover:border-primary"
+          >
+            <Copy className="h-4 w-4" />
+          </Button>
+          {status === "active" ? (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 border-primary/20 hover:border-primary"
+            >
+              <Pause className="h-4 w-4" />
+            </Button>
+          ) : (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 border-primary/20 hover:border-primary"
+            >
+              <Play className="h-4 w-4" />
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 border-primary/20 hover:border-primary"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}