diff --git a/frontend/app/trades/[id]/page.tsx b/frontend/app/trades/[id]/page.tsx
new file mode 100644
index 0000000..a5a1cd2
--- /dev/null
+++ b/frontend/app/trades/[id]/page.tsx
@@ -0,0 +1,300 @@
+"use client";
+
+import { useEffect, useState, CSSProperties } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Permission } from "../../auth-context";
+import { api } from "../../api";
+import { Header } from "../../components/Header";
+import { SatsDisplay } from "../../components/SatsDisplay";
+import { useRequireAuth } from "../../hooks/useRequireAuth";
+import { components } from "../../generated/api";
+import { formatDateTime } from "../../utils/date";
+import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
+import {
+  layoutStyles,
+  typographyStyles,
+  bannerStyles,
+  badgeStyles,
+  buttonStyles,
+  tradeCardStyles,
+} from "../../styles/shared";
+
+type ExchangeResponse = components["schemas"]["ExchangeResponse"];
+
+export default function TradeDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const tradeId = params?.id ? parseInt(params.id as string, 10) : null;
+
+  const { user, isLoading, isAuthorized } = useRequireAuth({
+    requiredPermission: Permission.VIEW_OWN_EXCHANGES,
+    fallbackRedirect: "/",
+  });
+
+  const [trade, setTrade] = useState<ExchangeResponse | null>(null);
+  const [isLoadingTrade, setIsLoadingTrade] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!user || !isAuthorized || !tradeId) return;
+
+    const fetchTrade = async () => {
+      try {
+        setIsLoadingTrade(true);
+        setError(null);
+        const data = await api.get<ExchangeResponse>(`/api/trades/${tradeId}`);
+        setTrade(data);
+      } catch (err) {
+        console.error("Failed to fetch trade:", err);
+        setError(
+          "Failed to load trade. It may not exist or you may not have permission to view it."
+        );
+      } finally {
+        setIsLoadingTrade(false);
+      }
+    };
+
+    fetchTrade();
+  }, [user, isAuthorized, tradeId]);
+
+  if (isLoading || isLoadingTrade) {
+    return (
+      <main style={layoutStyles.main}>
+        <div style={layoutStyles.loader}>Loading...</div>
+      </main>
+    );
+  }
+
+  if (!isAuthorized) {
+    return null;
+  }
+
+  if (error || !trade) {
+    return (
+      <main style={layoutStyles.main}>
+        <Header currentPage="trades" />
+        <div style={styles.content}>
+          <h1 style={typographyStyles.pageTitle}>Trade Details</h1>
+          {error && <div style={bannerStyles.errorBanner}>{error}</div>}
+          <button onClick={() => router.push("/trades")} style={buttonStyles.primaryButton}>
+            Back to Trades
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  const status = getTradeStatusDisplay(trade.status);
+  const isBuy = trade.direction === "buy";
+
+  return (
+    <main style={layoutStyles.main}>
+      <Header currentPage="trades" />
+      <div style={styles.content}>
+        <div style={styles.header}>
+          <h1 style={typographyStyles.pageTitle}>Trade Details</h1>
+          <button onClick={() => router.push("/trades")} style={buttonStyles.secondaryButton}>
+            ← Back to Trades
+          </button>
+        </div>
+
+        <div style={styles.tradeDetailCard}>
+          <div style={styles.detailSection}>
+            <h2 style={styles.sectionTitle}>Trade Information</h2>
+            <div style={styles.detailGrid}>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Status:</span>
+                <span
+                  style={{
+                    ...badgeStyles.badge,
+                    background: status.bgColor,
+                    color: status.textColor,
+                  }}
+                >
+                  {status.text}
+                </span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Time:</span>
+                <span style={styles.detailValue}>{formatDateTime(trade.slot_start)}</span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Direction:</span>
+                <span
+                  style={{
+                    ...styles.detailValue,
+                    color: isBuy ? "#4ade80" : "#f87171",
+                    fontWeight: 600,
+                  }}
+                >
+                  {isBuy ? "BUY BTC" : "SELL BTC"}
+                </span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Payment Method:</span>
+                <span style={styles.detailValue}>
+                  {isBuy
+                    ? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
+                    : `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.detailSection}>
+            <h2 style={styles.sectionTitle}>Amounts</h2>
+            <div style={styles.detailGrid}>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>EUR Amount:</span>
+                <span style={styles.detailValue}>{formatEur(trade.eur_amount)}</span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Bitcoin Amount:</span>
+                <span style={{ ...styles.detailValue, ...tradeCardStyles.satsAmount }}>
+                  <SatsDisplay sats={trade.sats_amount} />
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.detailSection}>
+            <h2 style={styles.sectionTitle}>Pricing</h2>
+            <div style={styles.detailGrid}>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Market Price:</span>
+                <span style={styles.detailValue}>
+                  €
+                  {trade.market_price_eur.toLocaleString("de-DE", {
+                    maximumFractionDigits: 0,
+                  })}
+                  /BTC
+                </span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Agreed Price:</span>
+                <span style={styles.detailValue}>
+                  €
+                  {trade.agreed_price_eur.toLocaleString("de-DE", {
+                    maximumFractionDigits: 0,
+                  })}
+                  /BTC
+                </span>
+              </div>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Premium:</span>
+                <span style={styles.detailValue}>{trade.premium_percentage}%</span>
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.detailSection}>
+            <h2 style={styles.sectionTitle}>Timestamps</h2>
+            <div style={styles.detailGrid}>
+              <div style={styles.detailRow}>
+                <span style={styles.detailLabel}>Created:</span>
+                <span style={styles.detailValue}>{formatDateTime(trade.created_at)}</span>
+              </div>
+              {trade.cancelled_at && (
+                <div style={styles.detailRow}>
+                  <span style={styles.detailLabel}>Cancelled:</span>
+                  <span style={styles.detailValue}>{formatDateTime(trade.cancelled_at)}</span>
+                </div>
+              )}
+              {trade.completed_at && (
+                <div style={styles.detailRow}>
+                  <span style={styles.detailLabel}>Completed:</span>
+                  <span style={styles.detailValue}>{formatDateTime(trade.completed_at)}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {trade.status === "booked" && (
+            <div style={styles.actionSection}>
+              <button
+                onClick={async () => {
+                  if (
+                    !confirm(
+                      "Are you sure you want to cancel this trade? This action cannot be undone."
+                    )
+                  ) {
+                    return;
+                  }
+                  try {
+                    await api.post(`/api/trades/${trade.id}/cancel`, {});
+                    router.push("/trades");
+                  } catch (err) {
+                    setError(err instanceof Error ? err.message : "Failed to cancel trade");
+                  }
+                }}
+                style={buttonStyles.secondaryButton}
+              >
+                Cancel Trade
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+const styles: Record<string, CSSProperties> = {
+  content: {
+    flex: 1,
+    padding: "2rem",
+    maxWidth: "800px",
+    margin: "0 auto",
+    width: "100%",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "2rem",
+  },
+  tradeDetailCard: {
+    background: "rgba(255, 255, 255, 0.03)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: "12px",
+    padding: "2rem",
+  },
+  detailSection: {
+    marginBottom: "2rem",
+  },
+  sectionTitle: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    fontSize: "1.1rem",
+    fontWeight: 600,
+    color: "#fff",
+    marginBottom: "1rem",
+  },
+  detailGrid: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+  },
+  detailRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.75rem 0",
+    borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+  },
+  detailLabel: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    fontSize: "0.9rem",
+    color: "rgba(255, 255, 255, 0.6)",
+  },
+  detailValue: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    fontSize: "0.9rem",
+    color: "#fff",
+    fontWeight: 500,
+  },
+  actionSection: {
+    marginTop: "2rem",
+    paddingTop: "2rem",
+    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+  },
+};