diff --git a/src/certificate.tsx b/src/certificate.tsx
index a14700c4..69c4c53d 100644
--- a/src/certificate.tsx
+++ b/src/certificate.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import Certificate from "./components/Certificate/Certificate";
+import Layout from "./components/Layout/Layout";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Certificate />
+    <Layout>
+      <Certificate />
+    </Layout>
   </StrictMode>,
 );
diff --git a/src/components/Certificate/Certificate.test.tsx b/src/components/Certificate/Certificate.test.tsx
index e290f4b7..9f42932f 100644
--- a/src/components/Certificate/Certificate.test.tsx
+++ b/src/components/Certificate/Certificate.test.tsx
@@ -1,12 +1,11 @@
-import { afterAll, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { afterAll, expect, test, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
 
+import { Member } from "../../api/services/types";
 import useMembers from "../../hooks/useMembers";
-
 import Certificate from "./Certificate";
-import { Member } from "../../api/services/types";
 
 vi.mock("../../hooks/useMembers");
 
@@ -48,24 +47,6 @@ test("render the error message while fetching members", () => {
   expect(screen.getByText(/error/i)).toBeInTheDocument();
 });
 
-test("renders the page header", () => {
-  vi.mocked(useMembers).mockReturnValue(
-    mock({
-      isLoading: false,
-      error: null,
-      members: [],
-      totalCohorts: 0,
-      filter: { name: "", cohort: null },
-      setFilter: vi.fn(),
-    }),
-  );
-
-  render(<Certificate />);
-
-  const header = screen.getByRole("banner");
-  expect(header).toBeInTheDocument();
-});
-
 test("render page title", () => {
   vi.mocked(useMembers).mockReturnValue(
     mock({
@@ -233,19 +214,3 @@ test("render LinkedIn link", () => {
     `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${members[0].name}&organizationId=104834174&certUrl=${location.href}`,
   );
 });
-
-test("render footer", () => {
-  vi.mocked(useMembers).mockReturnValue(
-    mock({
-      isLoading: false,
-      error: null,
-      members: [mock<Member>()],
-      totalCohorts: 0,
-      filter: { name: "", cohort: null },
-      setFilter: vi.fn(),
-    }),
-  );
-  render(<Certificate />);
-
-  expect(screen.getByRole("contentinfo", { name: "Site Footer" }));
-});
diff --git a/src/components/Certificate/Certificate.tsx b/src/components/Certificate/Certificate.tsx
index 79f330cd..39581276 100644
--- a/src/components/Certificate/Certificate.tsx
+++ b/src/components/Certificate/Certificate.tsx
@@ -2,8 +2,6 @@ import { getMembers } from "../../api/getMembers";
 import useMembers from "../../hooks/useMembers";
 import Signature from "../../assets/signature.png";
 
-import Footer from "../Footer/Footer";
-import Header from "../Header/Header";
 import Link from "../Link/Link";
 import Button from "../Button/Button";
 
@@ -25,7 +23,6 @@ export default function Certificate() {
 
   return (
     <main className={styles.certificate}>
-      <Header />
       <section>
         <div>
           <h1>수료증</h1>
@@ -350,7 +347,6 @@ export default function Certificate() {
           </section>
         </div>
       </section>
-      <Footer />
     </main>
   );
 }
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
new file mode 100644
index 00000000..585ebfdc
--- /dev/null
+++ b/src/components/Layout/Layout.module.css
@@ -0,0 +1,4 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/Layout/Layout.stories.tsx b/src/components/Layout/Layout.stories.tsx
new file mode 100644
index 00000000..2574b63e
--- /dev/null
+++ b/src/components/Layout/Layout.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Layout from "./Layout";
+
+const meta = {
+  component: Layout,
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <main style={{ paddingTop: 100, height: 1000, textAlign: "center" }}>
+        <h1>👋 Welcome to the Layout component!</h1>
+        <p>This is the main content area.</p>
+      </main>
+    ),
+  },
+};
diff --git a/src/components/Layout/Layout.test.tsx b/src/components/Layout/Layout.test.tsx
new file mode 100644
index 00000000..9bdcc884
--- /dev/null
+++ b/src/components/Layout/Layout.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test } from "vitest";
+import Layout from "./Layout";
+
+test("renders the Header component", () => {
+  render(
+    <Layout>
+      <div>Main Content</div>
+    </Layout>,
+  );
+
+  const header = screen.getByRole("banner");
+  expect(header).toBeInTheDocument();
+});
+
+test("renders the Footer component", () => {
+  render(
+    <Layout>
+      <div>Main Content</div>
+    </Layout>,
+  );
+
+  expect(screen.getByRole("contentinfo", { name: "Site Footer" }));
+});
+
+test("renders children passed to the Layout component", () => {
+  render(
+    <Layout>
+      <div data-testid="content">Main Content</div>
+    </Layout>,
+  );
+
+  const content = screen.getByTestId("content");
+  expect(content).toBeInTheDocument();
+  expect(content).toHaveTextContent("Main Content");
+});
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
new file mode 100644
index 00000000..fe06b043
--- /dev/null
+++ b/src/components/Layout/Layout.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/components/Leaderboard/Leaderboard.test.tsx b/src/components/Leaderboard/Leaderboard.test.tsx
index 68359dc4..b37ba1fe 100644
--- a/src/components/Leaderboard/Leaderboard.test.tsx
+++ b/src/components/Leaderboard/Leaderboard.test.tsx
@@ -1,7 +1,7 @@
 import { faker } from "@faker-js/faker";
+import { render, screen } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
-import { render, screen } from "@testing-library/react";
 
 import { type Member, Grade } from "../../api/services/types";
 import useMembers from "../../hooks/useMembers";
@@ -43,24 +43,6 @@ test("render the error message while fetching members", () => {
   expect(screen.getByText(/error/i)).toBeInTheDocument();
 });
 
-test("render the site header", () => {
-  vi.mocked(useMembers).mockReturnValue(
-    mock({
-      isLoading: false,
-      error: null,
-      members: [],
-      totalCohorts: 0,
-      filter: { name: "", cohort: null },
-      setFilter: vi.fn(),
-    }),
-  );
-
-  render(<Leaderboard />);
-
-  const header = screen.getByRole("banner");
-  expect(header).toBeInTheDocument();
-});
-
 test("render the page title", () => {
   vi.mocked(useMembers).mockReturnValue(
     mock({
@@ -99,23 +81,6 @@ test("render the member cards", () => {
   expect(memberCards).toHaveLength(members.length);
 });
 
-test("render the site footer", () => {
-  vi.mocked(useMembers).mockReturnValue(
-    mock({
-      isLoading: false,
-      error: null,
-      members: [mockMember()],
-      totalCohorts: 0,
-      filter: { name: "", cohort: null },
-      setFilter: vi.fn(),
-    }),
-  );
-
-  render(<Leaderboard />);
-
-  expect(screen.getByRole("contentinfo", { name: "Site Footer" }));
-});
-
 test("render the search bar", () => {
   vi.mocked(useMembers).mockReturnValue(
     mock({
diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
index 77cd1d00..32e9bcf5 100644
--- a/src/components/Leaderboard/Leaderboard.tsx
+++ b/src/components/Leaderboard/Leaderboard.tsx
@@ -1,5 +1,3 @@
-import Footer from "../Footer/Footer";
-import Header from "../Header/Header";
 import SearchBar from "../SearchBar/SearchBar";
 
 import { getMembers } from "../../api/getMembers";
@@ -24,8 +22,6 @@ export default function Leaderboard() {
 
   return (
     <main className={styles.leaderboard}>
-      <Header />
-
       <div className={styles.contentWrapper}>
         <section className={styles.toolbar}>
           <h1>리더보드</h1>
@@ -49,8 +45,6 @@ export default function Leaderboard() {
           ))}
         </ul>
       </div>
-
-      <Footer />
     </main>
   );
 }
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
index a326086f..78c6e991 100644
--- a/src/components/Progress/Progress.test.tsx
+++ b/src/components/Progress/Progress.test.tsx
@@ -1,37 +1,13 @@
 import { faker } from "@faker-js/faker";
-import { expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import Progress from "./Progress";
+import { expect, test, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
-import useMembers from "../../hooks/useMembers";
-import { test, vi } from "vitest";
 import { type Member, Grade } from "../../api/services/types";
+import useMembers from "../../hooks/useMembers";
+import Progress from "./Progress";
 
 vi.mock("../../hooks/useMembers");
 
-test("render the site header", () => {
-  vi.mocked(useMembers).mockReturnValue(
-    mock({
-      isLoading: false,
-      error: null,
-      members: [mockMember({ id: "sam" })],
-      totalCohorts: 3, // Add missing property
-      filter: { name: "", cohort: null }, // Add missing property
-      setFilter: vi.fn(), // Add mock function
-    }),
-  );
-
-  vi.stubGlobal("location", {
-    href: `http://example.com?member=sam`,
-    search: `?member=sam`,
-  });
-
-  render(<Progress />);
-
-  const header = screen.getByRole("banner");
-  expect(header).toBeInTheDocument();
-});
-
 test("display error message if member is not found", () => {
   vi.mocked(useMembers).mockReturnValue(
     mock({
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 40437d1f..bc11aff9 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -1,9 +1,7 @@
+import { getMembers } from "../../api/getMembers";
+import { problemCounts, problemMap } from "../../constants/problems";
 import Sidebar from "../Sidebar/Sidebar";
-import Footer from "../Footer/Footer";
-import Header from "../Header/Header";
 import Table from "../Table/Table";
-import { getMembers } from "../../api/getMembers";
-import { problemMap, problemCounts } from "../../constants/problems";
 
 import useMembers from "../../hooks/useMembers";
 import styles from "./Progress.module.css";
@@ -74,7 +72,6 @@ export default function Progress() {
 
   return (
     <main className={styles.progress}>
-      <Header />
       <h1>풀이 현황</h1>
       <div className={styles.container}>
         <section aria-labelledby="profile">
@@ -95,8 +92,6 @@ export default function Progress() {
           <Table problems={mockedProblems} />
         </section>
       </div>
-
-      <Footer />
     </main>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
index bf82fa7c..8989990e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import Layout from "./components/Layout/Layout";
 import Leaderboard from "./components/Leaderboard/Leaderboard";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Leaderboard />
+    <Layout>
+      <Leaderboard />
+    </Layout>
   </StrictMode>,
 );
diff --git a/src/progress.tsx b/src/progress.tsx
index d3e2f7d6..90f4affb 100644
--- a/src/progress.tsx
+++ b/src/progress.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import Layout from "./components/Layout/Layout";
 import Progress from "./components/Progress/Progress";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Progress />
+    <Layout>
+      <Progress />
+    </Layout>
   </StrictMode>,
 );