diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 817ac3ce..e7caa123 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/react';
 
+import '../src/tailwind.css'; 
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
new file mode 100644
index 00000000..5f967060
--- /dev/null
+++ b/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,15 @@
+import HeaderLeft from "./HeaderLeft";
+import HeaderRight from "./HeaderRight";
+
+interface HeaderProps {
+  rightItems: React.ReactNode[];
+}
+
+export default function Header({ rightItems }: HeaderProps) {
+  return (
+    <div className="flex justify-between items-center surface-content text-default pr-[28px] pl-[28px] pt-[12px] pb-[12px]">
+      <HeaderLeft />
+      <HeaderRight items={rightItems} />
+    </div>
+  );
+};
diff --git a/frontend/src/components/Header/HeaderLeft.tsx b/frontend/src/components/Header/HeaderLeft.tsx
new file mode 100644
index 00000000..61755c2d
--- /dev/null
+++ b/frontend/src/components/Header/HeaderLeft.tsx
@@ -0,0 +1,9 @@
+import { Link } from "react-router-dom";
+
+export default function HeaderLeft() {
+  return (
+    <div className="display-bold16">
+      <Link to="/">마법의 소라고둥</Link>
+    </div>
+  );
+};
diff --git a/frontend/src/components/Header/HeaderRight.tsx b/frontend/src/components/Header/HeaderRight.tsx
new file mode 100644
index 00000000..f7790235
--- /dev/null
+++ b/frontend/src/components/Header/HeaderRight.tsx
@@ -0,0 +1,7 @@
+interface HeaderRightProps {
+  items: React.ReactNode[];
+}
+
+export default function HeaderRight({ items }: HeaderRightProps) {
+  return <div className="flex gap-[16px]">{items}</div>;
+};
diff --git a/frontend/src/components/Header/index.ts b/frontend/src/components/Header/index.ts
new file mode 100644
index 00000000..579f1ac2
--- /dev/null
+++ b/frontend/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';