diff --git a/01-frontend/src/pages/Orders.tsx b/01-frontend/src/pages/Orders.tsx
index 113d987..1ed4b95 100644
--- a/01-frontend/src/pages/Orders.tsx
+++ b/01-frontend/src/pages/Orders.tsx
@@ -1,34 +1,133 @@
-import { Box, Typography, Button } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
+import { useState } from "react";
 import "./pages.css";
 
-export default function Orders() {
-    const navigate = useNavigate();
+type Order = {
+    id: string;
+    date: string;
+    status: "laufend" | "abgeschlossen";
+    items: { name: string; quantity: number; price: number }[];
+    total: number;
+    address: string;
+};
 
-    const handleGoHome = () => {
-        navigate("/");
+const mockOrders: Order[] = [
+    {
+        id: "1001",
+        date: "2025-05-20",
+        status: "laufend",
+        items: [
+            { name: "Tomatensamen", quantity: 2, price: 3.99 },
+            { name: "Blumenerde", quantity: 1, price: 7.49 }
+        ],
+        total: 15.47,
+        address: "Musterstraße 1, 12345 Musterstadt"
+    },
+    {
+        id: "1000",
+        date: "2025-05-10",
+        status: "abgeschlossen",
+        items: [
+            { name: "Gießkanne", quantity: 1, price: 12.99 }
+        ],
+        total: 12.99,
+        address: "Musterstraße 1, 12345 Musterstadt"
+    }
+];
+
+export default function Orders() {
+    const [tab, setTab] = useState(0);
+    const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
+
+    const laufendeBestellungen = mockOrders.filter(o => o.status === "laufend");
+    const vergangeneBestellungen = mockOrders.filter(o => o.status === "abgeschlossen");
+
+    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
+
+    const handleCancelOrder = (orderId: string) => {
+        // Hier API-Call zum Stornieren einbauen
+        alert(`Bestellung ${orderId} wurde storniert.`);
+        setSelectedOrder(null);
     };
 
     return (
-        <Box className="no-page-container">
-            <Typography variant="h1" className="no-page-title">
-                Orders
-            </Typography>
-            <Typography variant="h5" className="no-page-subtitle">
-                Oops! The page you're looking for doesn't exist.
-            </Typography>
-            <Typography variant="body1" className="no-page-description">
-                It seems you may have taken a wrong turn. Let's get you back on track.
-            </Typography>
-            <Button
-                variant="contained"
-                color="primary"
-                size="large"
-                className="no-page-button"
-                onClick={handleGoHome}
-            >
-                Go Back to Home
-            </Button>
+        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
+            <Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
+                <Typography variant="h4" gutterBottom>
+                    Meine Bestellungen
+                </Typography>
+                <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
+                    <Tab label="Laufende Bestellungen" />
+                    <Tab label="Vergangene Bestellungen" />
+                </Tabs>
+                <Divider sx={{ mb: 2 }} />
+                {tab === 0 ? (
+                    laufendeBestellungen.length > 0 ? (
+                        <List>
+                            {laufendeBestellungen.map(order => (
+                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
+                                    <ListItemText
+                                        primary={`Bestellung #${order.id} • ${order.date}`}
+                                        secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
+                                    />
+                                </ListItemButton>
+                            ))}
+                        </List>
+                    ) : (
+                        <Typography color="text.secondary">Keine laufenden Bestellungen.</Typography>
+                    )
+                ) : (
+                    vergangeneBestellungen.length > 0 ? (
+                        <List>
+                            {vergangeneBestellungen.map(order => (
+                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
+                                    <ListItemText
+                                        primary={`Bestellung #${order.id} • ${order.date}`}
+                                        secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
+                                    />
+                                </ListItemButton>
+                            ))}
+                        </List>
+                    ) : (
+                        <Typography color="text.secondary">Keine vergangenen Bestellungen.</Typography>
+                    )
+                )}
+
+                <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
+                    <DialogTitle>
+                        {selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id}
+                    </DialogTitle>
+                    <DialogContent dividers>
+                        {selectedOrder && (
+                            <Stack spacing={2}>
+                                <Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography>
+                                <Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography>
+                                <Divider />
+                                <Typography variant="subtitle2">Artikel:</Typography>
+                                <List dense>
+                                    {selectedOrder.items.map((item, idx) => (
+                                        <ListItemText
+                                            key={idx}
+                                            primary={`${item.name} x${item.quantity}`}
+                                            secondary={`Einzelpreis: ${item.price.toFixed(2)} €`}
+                                        />
+                                    ))}
+                                </List>
+                                <Divider />
+                                <Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography>
+                            </Stack>
+                        )}
+                    </DialogContent>
+                    <DialogActions>
+                        {selectedOrder?.status === "laufend" && (
+                            <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
+                                Bestellung stornieren
+                            </Button>
+                        )}
+                        <Button onClick={() => setSelectedOrder(null)}>Schließen</Button>
+                    </DialogActions>
+                </Dialog>
+            </Paper>
         </Box>
     );
 }
\ No newline at end of file