diff --git a/frontend/src/app/portfolio/[id]/rebalance/page.tsx b/frontend/src/app/portfolio/[id]/rebalance/page.tsx
new file mode 100644
index 0000000..1e50b72
--- /dev/null
+++ b/frontend/src/app/portfolio/[id]/rebalance/page.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { api } from '@/lib/api';
+
+interface RebalanceItem {
+  ticker: string;
+  name: string | null;
+  target_ratio: number;
+  current_ratio: number;
+  current_quantity: number;
+  current_value: number;
+  target_value: number;
+  diff_value: number;
+  diff_quantity: number;
+  action: string;
+}
+
+interface RebalanceResponse {
+  portfolio_id: number;
+  total_value: number;
+  items: RebalanceItem[];
+}
+
+interface SimulationResponse extends RebalanceResponse {
+  current_total: number;
+  additional_amount: number;
+  new_total: number;
+}
+
+export default function RebalancePage() {
+  const router = useRouter();
+  const params = useParams();
+  const portfolioId = params.id as string;
+
+  const [loading, setLoading] = useState(true);
+  const [rebalance, setRebalance] = useState<RebalanceResponse | SimulationResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [additionalAmount, setAdditionalAmount] = useState('');
+  const [simulating, setSimulating] = useState(false);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await api.getCurrentUser();
+        await fetchRebalance();
+      } catch {
+        router.push('/login');
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, [router, portfolioId]);
+
+  const fetchRebalance = async () => {
+    try {
+      setError(null);
+      const data = await api.get<RebalanceResponse>(`/api/portfolios/${portfolioId}/rebalance`);
+      setRebalance(data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to calculate rebalance';
+      setError(message);
+    }
+  };
+
+  const simulate = async () => {
+    if (!additionalAmount) return;
+    setSimulating(true);
+    try {
+      setError(null);
+      const data = await api.post<SimulationResponse>(
+        `/api/portfolios/${portfolioId}/rebalance/simulate`,
+        { additional_amount: parseFloat(additionalAmount) }
+      );
+      setRebalance(data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Simulation failed';
+      setError(message);
+    } finally {
+      setSimulating(false);
+    }
+  };
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('ko-KR', {
+      style: 'currency',
+      currency: 'KRW',
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const getActionBadge = (action: string) => {
+    const styles: Record<string, string> = {
+      buy: 'bg-green-100 text-green-800',
+      sell: 'bg-red-100 text-red-800',
+      hold: 'bg-gray-100 text-gray-800',
+    };
+    const labels: Record<string, string> = {
+      buy: '매수',
+      sell: '매도',
+      hold: '유지',
+    };
+    return (
+      <span className={`px-2 py-1 rounded text-xs ${styles[action] || styles.hold}`}>
+        {labels[action] || action}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-gray-500">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <div className="flex-1">
+        <Header />
+        <main className="p-6">
+          <h1 className="text-2xl font-bold text-gray-800 mb-6">리밸런싱 계산</h1>
+
+          {error && (
+            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+              {error}
+            </div>
+          )}
+
+          {/* Simulation Input */}
+          <div className="bg-white rounded-lg shadow p-4 mb-6">
+            <div className="flex gap-4 items-end">
+              <div className="flex-1">
+                <label htmlFor="additional-amount" className="block text-sm font-medium text-gray-700 mb-2">
+                  추가 입금액 (시뮬레이션)
+                </label>
+                <input
+                  id="additional-amount"
+                  type="number"
+                  value={additionalAmount}
+                  onChange={(e) => setAdditionalAmount(e.target.value)}
+                  className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="예: 1000000"
+                />
+              </div>
+              <button
+                onClick={simulate}
+                disabled={!additionalAmount || simulating}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
+              >
+                {simulating ? '계산 중...' : '시뮬레이션'}
+              </button>
+              <button
+                onClick={fetchRebalance}
+                className="px-4 py-2 border rounded hover:bg-gray-50 transition-colors"
+              >
+                초기화
+              </button>
+            </div>
+          </div>
+
+          {rebalance && (
+            <>
+              {/* Summary */}
+              <div className="bg-white rounded-lg shadow p-4 mb-6">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <p className="text-sm text-gray-500">현재 총액</p>
+                    <p className="text-xl font-bold">
+                      {formatCurrency('current_total' in rebalance ? rebalance.current_total : rebalance.total_value)}
+                    </p>
+                  </div>
+                  {'additional_amount' in rebalance && (
+                    <>
+                      <div>
+                        <p className="text-sm text-gray-500">추가 입금</p>
+                        <p className="text-xl font-bold text-blue-600">
+                          +{formatCurrency(rebalance.additional_amount)}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-gray-500">새 총액</p>
+                        <p className="text-xl font-bold">
+                          {formatCurrency(rebalance.new_total)}
+                        </p>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Rebalance Table */}
+              <div className="bg-white rounded-lg shadow">
+                <div className="p-4 border-b">
+                  <h2 className="text-lg font-semibold">리밸런싱 내역</h2>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-600">종목</th>
+                        <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">목표 비중</th>
+                        <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">현재 비중</th>
+                        <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">현재 수량</th>
+                        <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">조정 금액</th>
+                        <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">조정 수량</th>
+                        <th scope="col" className="px-4 py-3 text-center text-sm font-medium text-gray-600">액션</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      {rebalance.items.map((item) => (
+                        <tr key={item.ticker}>
+                          <td className="px-4 py-3">
+                            <div className="font-medium">{item.ticker}</div>
+                            {item.name && <div className="text-xs text-gray-500">{item.name}</div>}
+                          </td>
+                          <td className="px-4 py-3 text-sm text-right">{item.target_ratio.toFixed(2)}%</td>
+                          <td className="px-4 py-3 text-sm text-right">{item.current_ratio.toFixed(2)}%</td>
+                          <td className="px-4 py-3 text-sm text-right">{item.current_quantity.toLocaleString()}</td>
+                          <td className={`px-4 py-3 text-sm text-right ${
+                            item.diff_value > 0 ? 'text-green-600' : item.diff_value < 0 ? 'text-red-600' : ''
+                          }`}>
+                            {item.diff_value > 0 ? '+' : ''}{formatCurrency(item.diff_value)}
+                          </td>
+                          <td className={`px-4 py-3 text-sm text-right font-medium ${
+                            item.diff_quantity > 0 ? 'text-green-600' : item.diff_quantity < 0 ? 'text-red-600' : ''
+                          }`}>
+                            {item.diff_quantity > 0 ? '+' : ''}{item.diff_quantity}
+                          </td>
+                          <td className="px-4 py-3 text-center">{getActionBadge(item.action)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}