diff --git a/.prettierrc b/.prettierrc.json
similarity index 100%
rename from .prettierrc
rename to .prettierrc.json
diff --git a/public/icons/index.ts b/public/icons/index.ts
index 7a6a6b65..a5bd9e0d 100644
--- a/public/icons/index.ts
+++ b/public/icons/index.ts
@@ -2,3 +2,4 @@ export { default as IconLeftArrow } from './left-arrow.svg';
 export { default as IconShare } from './share.svg';
 export { default as IconPost } from './post.svg';
 export { default as IconOptions } from './options.svg';
+export { default as IconMore } from './more.svg';
diff --git a/public/icons/more.svg b/public/icons/more.svg
index 216ec6c5..7badbc42 100644
--- a/public/icons/more.svg
+++ b/public/icons/more.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.625 7.25C12.5188 7.25 13.25 6.51875 13.25 5.625C13.25 4.73125 12.5188 4 11.625 4C10.7312 4 10 4.73125 10 5.625C10 6.51875 10.7312 7.25 11.625 7.25ZM11.625 10.875C10.7312 10.875 10 11.6062 10 12.5C10 13.3938 10.7312 14.125 11.625 14.125C12.5188 14.125 13.25 13.3938 13.25 12.5C13.25 11.6062 12.5188 10.875 11.625 10.875ZM11.625 17.75C10.7312 17.75 10 18.4812 10 19.375C10 20.2688 10.7312 21 11.625 21C12.5188 21 13.25 20.2688 13.25 19.375C13.25 18.4812 12.5188 17.75 11.625 17.75Z" fill="black"/>
 </svg>
diff --git a/src/stories/Base/TopHeader.stories.tsx b/src/stories/Base/TopHeader.stories.tsx
new file mode 100644
index 00000000..00f9e04d
--- /dev/null
+++ b/src/stories/Base/TopHeader.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconMore } from '@public/icons';
+import TopHeader from '@/ui/Base/TopHeader';
+
+const meta: Meta<typeof TopHeader> = {
+  title: 'Base/TopHeader',
+  component: TopHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TopHeader>;
+
+const TopHeaderWithMenu = () => {
+  return (
+    <TopHeader label="Profile">
+      <button
+        onClick={() => {
+          alert('HAMBURGUR MENU!🍔');
+        }}
+      >
+        <IconMore width={20} height={20} alt="햄버거메뉴" />
+      </button>
+    </TopHeader>
+  );
+};
+
+export const Default: Story = {
+  args: { label: 'BookArchive' },
+};
+
+export const Menu: Story = {
+  render: () => <TopHeaderWithMenu />,
+};
diff --git a/src/ui/Base/TopHeader.tsx b/src/ui/Base/TopHeader.tsx
new file mode 100644
index 00000000..a32a5294
--- /dev/null
+++ b/src/ui/Base/TopHeader.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface TopHeaderProps {
+  label: string;
+  children?: ReactNode;
+}
+
+const TopHeader = ({ label, children }: TopHeaderProps) => {
+  return (
+    <div className="flex items-center justify-between px-[2rem] pb-[0.8rem] pt-[2rem]">
+      <p className="text-xl font-bold text-main-900">{label}</p>
+      {children}
+    </div>
+  );
+};
+
+export default TopHeader;