diff --git a/src/app/changelog/page.jsx b/src/app/changelog/page.jsx
new file mode 100644
index 00000000..821254ec
--- /dev/null
+++ b/src/app/changelog/page.jsx
@@ -0,0 +1,40 @@
+'use client'
+
+import Hero from '@/components/Hero'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@nextui-org/react'
+
+export default function changelogPage() {
+  return (
+    <>
+      <Hero title="Change log" />
+      <div>
+        <Table isStriped>
+          <TableHeader>
+            <TableColumn>DATE</TableColumn>
+            <TableColumn>NAME</TableColumn>
+            <TableColumn>CONTENTS</TableColumn>
+          </TableHeader>
+          <TableBody>
+            <TableRow key="2">
+              <TableCell>2024.07.17</TableCell>
+              <TableCell>SWYOO</TableCell>
+              <TableCell>` * README.md 파일 이미지 경로 수정 `</TableCell>
+            </TableRow>
+            <TableRow key="1">
+              <TableCell>2024.07.16</TableCell>
+              <TableCell>SWYOO</TableCell>
+              <TableCell>` * 버튼 정리(템플릿 적용) `</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 3f9ae906..1c95a542 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -31,3 +31,9 @@ body {
     text-wrap: balance;
   }
 } */
+
+.archivo-black-regular {
+  font-family: 'Archivo Black', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx
index c5161f0a..12d36144 100644
--- a/src/components/Headers.jsx
+++ b/src/components/Headers.jsx
@@ -9,6 +9,7 @@ export default function Headers() {
         </Link>
         <div className="space-x-4 text-xl">
           <Link href="/intro">Intro</Link>
+          <Link href="/changelog">Changelog</Link>
           <Link href="/roof">Roof</Link>
           <Link href="/roof2">Roof2</Link>
         </div>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index eeb05c67..c7ac519f 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,7 +1,7 @@
 export default function Hero(props) {
   return (
     <div className="pt-48 flex justify-center">
-      <h1 className="text-6xl">{props.title}</h1>
+      <h1 className="text-6xl archivo-black-regular">{props.title}</h1>
     </div>
   )
 }