frontend/src/cart/Cart.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import {
   Layout, Typography, List, Button, Empty, Card, Radio, Form, Input,
-  Checkbox, Modal, message, Tag, Spin, theme
+  Checkbox, Modal, message, Tag, Spin, theme, Space
 } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useNavigate, Link } from 'react-router-dom';
 import {
   CartItem, ShippingAddress, fetchCart, removeFromCart, fetchAddresses,
   createAddress, createCartPaypalOrder, captureCartPaypalOrder, demoCartPurchase
@@ -133,12 +134,18 @@ export default function Cart() {
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Header style={{ background: token.colorBgContainer, borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
-        <Title level={3} style={{ color: token.colorText, margin: 0, lineHeight: '64px' }}>Your Cart</Title>
+      <Header style={{ background: token.colorBgContainer, borderBottom: `1px solid ${token.colorBorderSecondary}`, display: 'flex', alignItems: 'center', gap: 16 }}>
+        <Link to="/">
+          <Button icon={<ArrowLeftOutlined />}>Back to Shop</Button>
+        </Link>
+        <Title level={3} style={{ color: token.colorText, margin: 0 }}>Your Cart</Title>
       </Header>
       <Content style={{ padding: 24, maxWidth: 700, margin: '0 auto', width: '100%' }}>
         {items.length === 0 ? (
-          <Empty description="Your cart is empty" />
+          <Space direction="vertical" align="center" style={{ width: '100%', marginTop: 24 }}>
+            <Empty description="Your cart is empty" />
+            <Link to="/"><Button type="primary">Continue Shopping</Button></Link>
+          </Space>
         ) : (
           <>
             <List
@@ -234,4 +241,4 @@ export default function Cart() {
       </Modal>
     </Layout>
   );
-}
+}