diff --git a/frontend/src/components/dashboard/AddCards.tsx b/frontend/src/components/dashboard/AddCards.tsx
new file mode 100644
index 0000000..73c7216
--- /dev/null
+++ b/frontend/src/components/dashboard/AddCards.tsx
@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { useCardStore } from "@/lib/store/useCardStore";
+import { toast } from "sonner";
+
+export function AddCards() {
+    const { cards, addCard } = useCardStore();
+
+    const handleAddPPOO = () => {
+        const existingCard = cards.filter((c) => c.i === "PPOO");
+        //console.log(existingCard.length);
+        //console.log(data);
+        if (existingCard.length != 0) {
+            toast.error(`PPOO already exists no card will be added`);
+            return;
+        }
+        addCard({
+            i: "PPOO",
+            x: 0,
+            y: 0,
+            w: 5,
+            h: 3,
+            isResizable: true,
+            isDraggable: true,
+        });
+    };
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant="outline">Add Cards</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Cards</DialogTitle>
+                    <DialogDescription>
+                        Please add a card below.
+                    </DialogDescription>
+                </DialogHeader>
+                <Button onClick={handleAddPPOO} className="w-48">
+                    PPOO
+                </Button>
+
+                <DialogFooter>
+                    <Button type="submit">Save changes</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/frontend/src/components/dashboard/DashBoard.tsx b/frontend/src/components/dashboard/DashBoard.tsx
new file mode 100644
index 0000000..659f2ad
--- /dev/null
+++ b/frontend/src/components/dashboard/DashBoard.tsx
@@ -0,0 +1,68 @@
+export default function DashBoard() {
+    // const handleResizeStop = (newLayout: any, newItem: any) => {
+    //     updateCard(
+    //         newItem.i,
+    //         newLayout.filter((n: any) => n.i === newItem.i)[0]
+    //     ); // Store the new layout in state
+    // };
+
+    // const handleDragStop = (newLayout: any, newItem: any) => {
+    //     updateCard(
+    //         newItem.i,
+    //         newLayout.filter((n: any) => n.i === newItem.i)[0]
+    //     ); // Persist the updated layout with custom name
+    // };
+
+    return (
+        <div className="ml-5 w-11/12 h-9/10">
+            <p>Comming soon...</p>
+            {/* <ResizablePanelGroup
+                direction="horizontal"
+                //className="rounded-lg border"
+                autoSaveId="persistence"
+            >
+                <ResizablePanel>
+                    <ResizablePanelGroup direction="vertical">
+                        <ResizablePanel>
+                            <div className="overflow: auto">
+                                <Lots />
+                            </div>
+                        </ResizablePanel>
+                        <ResizableHandle />
+                        <ResizablePanel>
+                            <ResizablePanelGroup direction="horizontal">
+                                <ResizablePanel>
+                                    <LabelLog />
+                                </ResizablePanel>
+                                <ResizableHandle />
+                                <ResizablePanel>
+                                    <OcpLogs />
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                </ResizablePanel>
+                <ResizableHandle />
+                <ResizablePanel defaultSize={25}>
+                    <ResizablePanelGroup direction="vertical">
+                        {server[0].value === "usday1vms006" && (
+                            <ResizablePanel className="max-h-[300px]">
+                                <WrapperManualTrigger />
+                            </ResizablePanel>
+                        )}
+                        {server[0].value === "usday1vms006" && (
+                            <ResizablePanel className="max-h-[300px]">
+                                <WrapperManualTrigger />
+                            </ResizablePanel>
+                        )}
+
+                        <ResizableHandle />
+                        <ResizablePanel>
+                            <PrinterStatus />
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                </ResizablePanel>
+            </ResizablePanelGroup> */}
+        </div>
+    );
+}
diff --git a/frontend/src/components/extendedUI/LstCard.tsx b/frontend/src/components/extendedUI/LstCard.tsx
index 167b7dd..1b9c2e8 100644
--- a/frontend/src/components/extendedUI/LstCard.tsx
+++ b/frontend/src/components/extendedUI/LstCard.tsx
@@ -1,5 +1,5 @@
-import {ReactNode} from "react";
-import {Card} from "../ui/card";
+import { ReactNode } from "react";
+import { Card } from "../ui/card";
 
 interface LstCardProps {
     children?: ReactNode;
@@ -7,12 +7,17 @@ interface LstCardProps {
     style?: React.CSSProperties;
 }
 
-export function LstCard({children, className = "", style = {}}: LstCardProps) {
+export function LstCard({
+    children,
+    className = "",
+    style = {},
+}: LstCardProps) {
     return (
-        <div className="m-auto">
-            <Card className={`border-solid border-1 border-[#00659c] ${className}`} style={style}>
-                {children}
-            </Card>
-        </div>
+        <Card
+            className={`border-solid border-1 border-[#00659c] ${className}`}
+            style={style}
+        >
+            {children}
+        </Card>
     );
 }
diff --git a/frontend/src/components/logistics/siloAdjustments/HistoricalData.tsx b/frontend/src/components/logistics/siloAdjustments/HistoricalData.tsx
index 163aad4..6ed910e 100644
--- a/frontend/src/components/logistics/siloAdjustments/HistoricalData.tsx
+++ b/frontend/src/components/logistics/siloAdjustments/HistoricalData.tsx
@@ -1,6 +1,6 @@
 import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
-import { columns } from "@/utils/tableData/siloAdjustmentHist/siloAdjHist";
-import { DataTable } from "@/utils/tableData/siloAdjustmentHist/siloDate";
+import { columns } from "@/utils/tableData/siloAdjustmentHist/siloAdjHistColumns";
+import { SiloTable } from "@/utils/tableData/siloAdjustmentHist/siloData";
 import { useQuery } from "@tanstack/react-query";
 
 export default function HistoricalData(props: any) {
@@ -18,11 +18,9 @@ export default function HistoricalData(props: any) {
     const adjustments: any = data.filter(
         (l: any) => l.locationID === parseInt(props.laneId)
     );
-
-    console.log(adjustments);
     return (
         <div className="container mx-auto py-10">
-            <DataTable columns={columns} data={adjustments} />
+            <SiloTable columns={columns} data={adjustments} />
         </div>
     );
 }
diff --git a/frontend/src/components/logistics/warehouse/PPOOCard.tsx b/frontend/src/components/logistics/warehouse/PPOOCard.tsx
new file mode 100644
index 0000000..1ec5f61
--- /dev/null
+++ b/frontend/src/components/logistics/warehouse/PPOOCard.tsx
@@ -0,0 +1,50 @@
+import { LstCard } from "@/components/extendedUI/LstCard";
+import { useCardStore } from "@/lib/store/useCardStore";
+import { getPPOO } from "@/utils/querys/logistics/getPPOO";
+import { columns } from "@/utils/tableData/ppoo/ppooColumns";
+import { PPOOTable } from "@/utils/tableData/ppoo/ppooData";
+import { useQuery } from "@tanstack/react-query";
+import { CircleX } from "lucide-react";
+import { Suspense } from "react";
+import { toast } from "sonner";
+
+export default function PPOO({ style = {} }) {
+    const { removeCard } = useCardStore();
+    const { data, isError, isLoading } = useQuery(getPPOO());
+
+    if (isLoading) return <div>Loading adjustmnet data...</div>;
+    if (isError) {
+        return (
+            <div>
+                <p>There was an error getting the adjustments.</p>
+            </div>
+        );
+    }
+
+    const handleCloseCard = () => {
+        removeCard("PPOO");
+
+        toast.success("card removed");
+    };
+    return (
+        <div style={style}>
+            <LstCard style={style}>
+                <Suspense fallback={<p>Loading PPOO...</p>}>
+                    <div className={`flex justify-center`}>
+                        <p
+                            className={`drag-handle w-fit`}
+                            style={{ cursor: "move", padding: "5px" }}
+                        >
+                            PPOO
+                        </p>
+
+                        <button onClick={handleCloseCard}>
+                            <CircleX />
+                        </button>
+                    </div>
+                    <PPOOTable columns={columns} data={data} style={style} />
+                </Suspense>
+            </LstCard>
+        </div>
+    );
+}