diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-chart-container.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-chart-container.tsx
new file mode 100644
index 00000000..08c4ec7d
--- /dev/null
+++ b/src/frontend/apps/web/src/features/stock/ui/stock-chart-container.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@workspace/ui/components';
+
+const StockChartContainer = () => {
+  return (
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel
+        defaultSize={30}
+        className="flex items-center justify-center bg-gray-200 p-4"
+      >
+        주식차트
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel
+        defaultSize={10}
+        className="flex items-center justify-center bg-gray-300 p-4"
+      >
+        거래량 캔들차트
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+};
+export default StockChartContainer;
diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx
index 2f8d8e32..25cbf242 100644
--- a/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx
+++ b/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx
@@ -1,5 +1,17 @@
+import StockChartContainer from './stock-chart-container';
+import StockInfoContainer from './stock-info-container';
+
 const StockDetailLayout = () => {
-  return <div className="bg-gray-200 w-full h-full">123</div>;
+  return (
+    <div className="w-full h-full flex flex-col min-w-0">
+      <div className="h-[120px]">
+        <StockInfoContainer />
+      </div>
+      <div className="h-full rounded-md overflow-hidden">
+        <StockChartContainer />
+      </div>
+    </div>
+  );
 };
 
 export default StockDetailLayout;
diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-info-container.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-info-container.tsx
new file mode 100644
index 00000000..e1c1f510
--- /dev/null
+++ b/src/frontend/apps/web/src/features/stock/ui/stock-info-container.tsx
@@ -0,0 +1,12 @@
+import StockInfo from './stock-info';
+import StockLogo from './stock-logo';
+
+const StockInfoContainer = () => {
+  return (
+    <div className="h-full flex flex-row justify-start items-center gap-3 min-w-0">
+      <StockLogo />
+      <StockInfo />
+    </div>
+  );
+};
+export default StockInfoContainer;
diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-info.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-info.tsx
new file mode 100644
index 00000000..9dc03bed
--- /dev/null
+++ b/src/frontend/apps/web/src/features/stock/ui/stock-info.tsx
@@ -0,0 +1,17 @@
+const StockInfo = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <span className="font-bold mr-1">테슬라</span>
+        <span>000000</span>
+      </div>
+      <div>
+        <span className="font-bold mr-2">579,913</span>
+        <span className="text-xs">
+          어제보다 <span className="text-red-700">+6.72(0.2%)</span>
+        </span>
+      </div>
+    </div>
+  );
+};
+export default StockInfo;
diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-logo.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-logo.tsx
new file mode 100644
index 00000000..57b577eb
--- /dev/null
+++ b/src/frontend/apps/web/src/features/stock/ui/stock-logo.tsx
@@ -0,0 +1,16 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components';
+
+const StockLogo = () => {
+  return (
+    <>
+      <Avatar
+        variant="square"
+        className="w-[60px] h-[60px]"
+      >
+        <AvatarImage src="https://thumb.tossinvest.com/image/resized/48x0/https%3A%2F%2Fstatic.toss.im%2Fpng-icons%2Fsecurities%2Ficn-sec-fill-NAS006XY7-E0.png" />
+        <AvatarFallback>Logo</AvatarFallback>
+      </Avatar>
+    </>
+  );
+};
+export default StockLogo;