diff --git a/src/api/kospi-kosdac/index.ts b/src/api/kospi-kosdac/index.ts
index cd2f078..f553c8a 100644
--- a/src/api/kospi-kosdac/index.ts
+++ b/src/api/kospi-kosdac/index.ts
@@ -1,13 +1,4 @@
-export interface StockIndexResponse {
-  indexName: string;
-  indexValue: string;
-  fluctuationRate: string;
-}
-
-interface StockData {
-  kospi: StockIndexResponse | null;
-  kosdaq: StockIndexResponse | null;
-}
+import { StockData } from "@/app/main/types";
 
 async function getInitialStockData(): Promise<StockData> {
   try {
diff --git a/src/app/main/_components/main-contents.tsx b/src/app/main/_components/main-contents.tsx
new file mode 100644
index 0000000..577df3e
--- /dev/null
+++ b/src/app/main/_components/main-contents.tsx
@@ -0,0 +1,43 @@
+import { memo } from "react";
+
+import NewsCarousel from "@/app/main/_components/news-carousel";
+import SearchStock from "@/app/main/_components/search-stock";
+import StockIndexCarousel from "@/app/main/_components/stock-carousel";
+import ErrorBoundary from "@/components/common/error-boundary";
+
+import { Fluctuation, News, StockData, TradingVolume } from "../types";
+import RankingSection from "./ranking-section";
+
+interface MainContentProps {
+  initialStockData: StockData;
+  initialNews: News[];
+  traddata: TradingVolume[];
+  flucdata: Fluctuation[];
+}
+
+function MainContent({
+  initialStockData,
+  initialNews,
+  traddata,
+  flucdata,
+}: MainContentProps) {
+  return (
+    <div className="flex flex-1 flex-col p-10 pt-30 md:px-32 lg:max-w-[calc(100%-320px)]">
+      <ErrorBoundary errorMessage="검색 기능을 일시적으로 사용할 수 없습니다">
+        <SearchStock />
+      </ErrorBoundary>
+
+      <ErrorBoundary errorMessage="주가 정보를 불러올 수 없습니다">
+        <StockIndexCarousel initialData={initialStockData} />
+      </ErrorBoundary>
+
+      <RankingSection traddata={traddata} flucdata={flucdata} />
+
+      <ErrorBoundary errorMessage="뉴스를 불러올 수 없습니다">
+        <NewsCarousel initialData={initialNews} />
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+export default memo(MainContent);
diff --git a/src/app/main/_components/my-info.tsx b/src/app/main/_components/my-info.tsx
new file mode 100644
index 0000000..e9ec60d
--- /dev/null
+++ b/src/app/main/_components/my-info.tsx
@@ -0,0 +1,22 @@
+import { memo } from "react";
+
+import AssetInfo from "@/app/main/_components/asset-info";
+import MyStockInfo from "@/app/main/_components/stock-info";
+import ErrorBoundary from "@/components/common/error-boundary";
+
+function Sidebar() {
+  return (
+    <div className="w-330 shrink-0">
+      <div className="sticky top-24 flex flex-col gap-16">
+        <ErrorBoundary errorMessage="자산 정보를 불러올 수 없습니다">
+          <AssetInfo />
+        </ErrorBoundary>
+        <ErrorBoundary errorMessage="관심 종목을 불러올 수 없습니다">
+          <MyStockInfo />
+        </ErrorBoundary>
+      </div>
+    </div>
+  );
+}
+
+export default memo(Sidebar);
diff --git a/src/app/main/_components/ranking-section.tsx b/src/app/main/_components/ranking-section.tsx
new file mode 100644
index 0000000..1505fbc
--- /dev/null
+++ b/src/app/main/_components/ranking-section.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { memo } from "react";
+
+import FluctuationTable from "@/app/main/_components/flucctuate-table";
+import RankingStock from "@/app/main/_components/ranking-stock";
+import ErrorBoundary from "@/components/common/error-boundary";
+
+import { Fluctuation, TradingVolume } from "../types";
+
+interface RankingSectionProps {
+  traddata: TradingVolume[];
+  flucdata: Fluctuation[];
+}
+
+function RankingSection({ traddata, flucdata }: RankingSectionProps) {
+  return (
+    <div className="mb-30 flex flex-col gap-20">
+      <h2 className="mt-80 text-24-700">실시간 랭킹</h2>
+      <div className="flex w-full gap-30">
+        <div className="mr-40 w-full">
+          <ErrorBoundary errorMessage="거래량 순위를 불러올 수 없습니다">
+            <RankingStock data={traddata} />
+          </ErrorBoundary>
+        </div>
+        <div className="w-full">
+          <ErrorBoundary errorMessage="변동폭 순위를 불러올 수 없습니다">
+            <FluctuationTable data={flucdata} />
+          </ErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(RankingSection);
diff --git a/src/app/main/_components/table-wrapper.tsx b/src/app/main/_components/table-wrapper.tsx
new file mode 100644
index 0000000..6360728
--- /dev/null
+++ b/src/app/main/_components/table-wrapper.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { memo, PropsWithChildren } from "react";
+
+function TableWrapper({ children }: PropsWithChildren) {
+  return <div className="w-full">{children}</div>;
+}
+
+export default memo(TableWrapper);
diff --git a/src/app/main/types/index.ts b/src/app/main/types/index.ts
index b55308d..06273f8 100644
--- a/src/app/main/types/index.ts
+++ b/src/app/main/types/index.ts
@@ -4,6 +4,16 @@ export interface StockIndexResponse {
   fluctuationRate: string;
 }
 
+export interface StockData {
+  kospi: StockIndexResponse | null;
+  kosdaq: StockIndexResponse | null;
+}
+
+export interface News {
+  title: string;
+  link: string;
+}
+
 export interface TradingVolume {
   stockName: string;
   rank: number;
@@ -13,7 +23,11 @@ export interface TradingVolume {
   volumeChangeRate: number;
 }
 
-export interface News {
-  title: string;
-  link: string;
+export interface Fluctuation {
+  rank: number;
+  stockName: string;
+  currentPrice: number;
+  prevChangePrice: number;
+  prevSign: string;
+  prevChangeRate: number;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5a946ed..270bb8a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,14 +3,8 @@ import { QueryClient } from "@tanstack/react-query";
 import getInitialStockData from "@/api/kospi-kosdac/index";
 import getNews from "@/api/news";
 import { getFluctuation, getTradingVolume } from "@/api/ranking-table/index";
-import AssetInfo from "@/app/main/_components/asset-info";
-import FluctuationTable from "@/app/main/_components/flucctuate-table";
-import NewsCarousel from "@/app/main/_components/news-carousel";
-import RankingStock from "@/app/main/_components/ranking-stock";
-import SearchStock from "@/app/main/_components/search-stock";
-import StockIndexCarousel from "@/app/main/_components/stock-carousel";
-import MyStockInfo from "@/app/main/_components/stock-info";
-import ErrorBoundary from "@/components/common/error-boundary";
+import MainContent from "@/app/main/_components/main-contents";
+import Sidebar from "@/app/main/_components/my-info";
 
 export default async function Home() {
   const queryClient = new QueryClient({
@@ -43,46 +37,13 @@ export default async function Home() {
 
   return (
     <div className="flex xxl:px-230">
-      {/* 메인 컨텐츠 */}
-      <div className="flex flex-1 flex-col p-10 pt-30 md:px-32 lg:max-w-[calc(100%-320px)]">
-        <ErrorBoundary errorMessage="검색 기능을 일시적으로 사용할 수 없습니다">
-          <SearchStock />
-        </ErrorBoundary>
-
-        <ErrorBoundary errorMessage="주가 정보를 불러올 수 없습니다">
-          <StockIndexCarousel initialData={initialStockData} />
-        </ErrorBoundary>
-
-        <div className="flex flex-col gap-20">
-          <h2 className="mt-80 text-24-700">실시간 랭킹</h2>
-          <div className="flex w-full gap-30">
-            <div className="mr-50 w-full">
-              <ErrorBoundary errorMessage="거래량 순위를 불러올 수 없습니다">
-                <RankingStock data={traddata} />
-              </ErrorBoundary>
-            </div>
-            <div className="w-full">
-              <ErrorBoundary errorMessage="변동폭 순위를 불러올 수 없습니다">
-                <FluctuationTable data={flucdata} />
-              </ErrorBoundary>
-            </div>
-          </div>
-          <ErrorBoundary errorMessage="뉴스를 불러올 수 없습니다">
-            <NewsCarousel initialData={initialNews} />
-          </ErrorBoundary>
-        </div>
-      </div>
-      {/* 우측 사이드바 */}
-      <div className="w-330 shrink-0">
-        <div className="sticky top-24 flex flex-col gap-16">
-          <ErrorBoundary errorMessage="자산 정보를 불러올 수 없습니다">
-            <AssetInfo />
-          </ErrorBoundary>
-          <ErrorBoundary errorMessage="관심 종목을 불러올 수 없습니다">
-            <MyStockInfo />
-          </ErrorBoundary>
-        </div>
-      </div>
+      <MainContent
+        initialStockData={initialStockData}
+        initialNews={initialNews}
+        traddata={traddata}
+        flucdata={flucdata}
+      />
+      <Sidebar />
     </div>
   );
 }