diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2312dc5..76bab66 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,3 @@
+export PATH="/usr/local/bin:$PATH"
+
 npx lint-staged
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 51fe8ce..8d6cad3 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -25,6 +25,12 @@ const preview: Preview = {
         },
       },
     },
+    backgrounds: {
+      options: {
+        dark: { name: "Dark", value: "#081221" },
+        light: { name: "Light", value: "#FCFCFD" },
+      },
+    },
   },
 };
 
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index cc6145c..a06b4b4 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,10 +1,10 @@
 import { Text, View } from "react-native";
 
-import { Button } from "@/components/button";
+import { Button } from "@/components/common/Button/Button";
 
 export default function HomeScreen() {
   return (
-    <View className="flex-1 items-center justify-center gap-4 bg-bg">
+    <View className="flex-1 items-center justify-center gap-4 bg-bg px-4">
       <Text className="text-gray-900 text-h-04">비밀번호 찾기</Text>
       <Button label="Button" />
     </View>
diff --git a/assets/images/checktask-logo.png b/assets/images/checktask-logo.png
new file mode 100644
index 0000000..d7df2e9
Binary files /dev/null and b/assets/images/checktask-logo.png differ
diff --git a/components/button.stories.tsx b/components/button.stories.tsx
deleted file mode 100644
index 1ec6f5d..0000000
--- a/components/button.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-
-import { Button } from "./button";
-
-const meta = {
-  title: "Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    label: "Button",
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {};
diff --git a/components/button.tsx b/components/button.tsx
deleted file mode 100644
index cf8eb2f..0000000
--- a/components/button.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Pressable, Text } from "react-native";
-
-export function Button({ label }: { label: string }) {
-  return (
-    <Pressable className="items-center justify-center rounded-lg bg-primary px-4 py-3">
-      <Text className="text-primary-button-text text-btn">{label}</Text>
-    </Pressable>
-  );
-}
diff --git a/components/common/Button/Button.stories.tsx b/components/common/Button/Button.stories.tsx
new file mode 100644
index 0000000..3b6b194
--- /dev/null
+++ b/components/common/Button/Button.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { Button } from "./Button";
+
+const meta = {
+  title: "Common/Button",
+  component: Button,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "inline-radio",
+      options: ["blue", "gray", "outline", "white"],
+    },
+    size: {
+      control: "inline-radio",
+      options: ["tiny", "sm", "modal", "lg", "xl"],
+    },
+  },
+  args: {
+    label: "label",
+  },
+  decorators: [
+    (Story) => (
+      <View className="w-[358px]">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Blue: Story = {};
+
+export const Gray: Story = {
+  args: { variant: "gray" },
+};
+
+export const Outline: Story = {
+  args: { variant: "outline" },
+};
+
+export const White: Story = {
+  args: { variant: "white", size: "xl" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const All: Story = {
+  render: (args) => (
+    <View className="gap-3">
+      <Button {...args} size="tiny" variant="outline" className="self-start" />
+      <View className="flex-row gap-3">
+        <Button {...args} size="sm" />
+        <Button {...args} size="sm" variant="outline" />
+        <Button {...args} size="sm" variant="gray" />
+      </View>
+      <Button {...args} size="modal" />
+      <Button {...args} size="modal" variant="gray" />
+      <Button {...args} size="lg" />
+      <Button {...args} size="lg" variant="gray" />
+      <Button {...args} size="xl" />
+      <Button {...args} size="xl" variant="white" />
+    </View>
+  ),
+};
diff --git a/components/common/Button/Button.tsx b/components/common/Button/Button.tsx
new file mode 100644
index 0000000..50f1b14
--- /dev/null
+++ b/components/common/Button/Button.tsx
@@ -0,0 +1,79 @@
+import { Pressable, Text } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+export type ButtonStyle = "blue" | "gray" | "outline" | "white";
+export type ButtonSize = "tiny" | "sm" | "modal" | "lg" | "xl";
+
+const VARIANT_CLASS: Record<ButtonStyle, string> = {
+  blue: "bg-primary",
+  gray: "bg-gray-100",
+  outline: "border border-primary bg-bg",
+  // white는 xl 전용 색상
+  white: "bg-gray-0",
+};
+
+const VARIANT_TEXT_CLASS: Record<ButtonStyle, string> = {
+  blue: "text-gray-0",
+  gray: "text-gray-600",
+  outline: "text-primary",
+  white: "text-gray-600",
+};
+
+const SIZE_CLASS: Record<ButtonSize, string> = {
+  tiny: "w-auto rounded-full px-3 py-1.5",
+  sm: "w-[84px] rounded py-2",
+  modal: "h-11 rounded-lg p-2.5",
+  lg: "h-12 rounded-lg p-2.5",
+  xl: "h-12 p-2.5",
+};
+
+const SIZE_TEXT_CLASS: Record<ButtonSize, string> = {
+  tiny: "text-b-04-m",
+  sm: "text-b-04-m",
+  modal: "text-b-02-m",
+  lg: "text-btn",
+  xl: "text-btn",
+};
+
+export type ButtonProps = {
+  label: string;
+  variant?: ButtonStyle;
+  size?: ButtonSize;
+  onPress?: () => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function Button({
+  label,
+  variant = "blue",
+  size = "lg",
+  onPress,
+  disabled = false,
+  className,
+}: ButtonProps) {
+  return (
+    <Pressable
+      accessibilityRole={onPress ? "button" : undefined}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      className={cn(
+        "w-full items-center justify-center",
+        SIZE_CLASS[size],
+        disabled ? "bg-gray-200" : VARIANT_CLASS[variant],
+        className
+      )}
+    >
+      <Text
+        className={cn(
+          disabled ? "text-gray-400" : VARIANT_TEXT_CLASS[variant],
+          SIZE_TEXT_CLASS[size]
+        )}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
diff --git a/components/common/Fab/Fab.stories.tsx b/components/common/Fab/Fab.stories.tsx
new file mode 100644
index 0000000..648f9bf
--- /dev/null
+++ b/components/common/Fab/Fab.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { Fab } from "./Fab";
+
+const meta = {
+  title: "Common/Fab",
+  component: Fab,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultOpen: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <View pointerEvents="none">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof Fab>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  args: { defaultOpen: true },
+};
diff --git a/components/common/Fab/Fab.tsx b/components/common/Fab/Fab.tsx
new file mode 100644
index 0000000..8f5296f
--- /dev/null
+++ b/components/common/Fab/Fab.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+
+import { Add, Cancel, TaskGenerate, TaskJoin } from "@/components/icons";
+import { FAB_PRIMARY_SHADOW, FAB_SECONDARY_SHADOW } from "@/constants/shadows";
+import { cn } from "@/lib/utils";
+
+export type FabProps = {
+  onCreateTask?: () => void;
+  onJoinTeamTask?: () => void;
+  defaultOpen?: boolean;
+  className?: string;
+};
+
+export function Fab({
+  onCreateTask,
+  onJoinTeamTask,
+  defaultOpen = false,
+  className,
+}: FabProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  function handleCreateTask() {
+    setIsOpen(false);
+    onCreateTask?.();
+  }
+
+  function handleJoinTeamTask() {
+    setIsOpen(false);
+    onJoinTeamTask?.();
+  }
+
+  return (
+    <View className={cn("items-end gap-3", className)}>
+      {isOpen ? (
+        <>
+          <View className="flex-row items-center gap-4">
+            <Text className="text-gray-0 text-b-01-m">새 과제 생성</Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="새 과제 생성"
+              onPress={handleCreateTask}
+              style={FAB_SECONDARY_SHADOW}
+              className="size-[60px] items-center justify-center rounded-full bg-gray-100"
+            >
+              <TaskGenerate variant="2xl" className="text-gray-800" />
+            </Pressable>
+          </View>
+          <View className="flex-row items-center gap-4">
+            <Text className="text-gray-0 text-b-01-m">팀 과제 참여</Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="팀 과제 참여"
+              onPress={handleJoinTeamTask}
+              style={FAB_SECONDARY_SHADOW}
+              className="size-[60px] items-center justify-center rounded-full bg-gray-100"
+            >
+              <TaskJoin variant="2xl" className="text-gray-800" />
+            </Pressable>
+          </View>
+        </>
+      ) : null}
+
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={isOpen ? "닫기" : "새 과제 만들기"}
+        onPress={() => setIsOpen((prev) => !prev)}
+        style={FAB_PRIMARY_SHADOW}
+        className="size-[60px] items-center justify-center rounded-full bg-blue-500"
+      >
+        {isOpen ? (
+          <Cancel variant="2xl" className="text-primary-button-text" />
+        ) : (
+          <Add variant="2xl" className="text-primary-button-text" />
+        )}
+      </Pressable>
+    </View>
+  );
+}
diff --git a/components/common/Header/BackHeader.tsx b/components/common/Header/BackHeader.tsx
new file mode 100644
index 0000000..de4688e
--- /dev/null
+++ b/components/common/Header/BackHeader.tsx
@@ -0,0 +1,30 @@
+import { Pressable, Text } from "react-native";
+
+import { Left } from "@/components/icons";
+
+import { HeaderContainer } from "./HeaderContainer";
+
+export type BackHeaderProps = {
+  label?: string;
+  onBack?: () => void;
+  className?: string;
+};
+
+export function BackHeader({ label, onBack, className }: BackHeaderProps) {
+  return (
+    <HeaderContainer className={className}>
+      <Pressable
+        accessibilityRole={onBack ? "button" : undefined}
+        accessibilityLabel="뒤로가기"
+        onPress={onBack}
+        hitSlop={8}
+        className="flex-row items-center gap-1"
+      >
+        <Left variant="lg" className="text-gray-800" />
+        {label ? (
+          <Text className="text-gray-800 text-b-01-m">{label}</Text>
+        ) : null}
+      </Pressable>
+    </HeaderContainer>
+  );
+}
diff --git a/components/common/Header/CloseHeader.tsx b/components/common/Header/CloseHeader.tsx
new file mode 100644
index 0000000..c045b41
--- /dev/null
+++ b/components/common/Header/CloseHeader.tsx
@@ -0,0 +1,26 @@
+import { Pressable } from "react-native";
+
+import { Cancel } from "@/components/icons";
+
+import { HeaderContainer } from "./HeaderContainer";
+
+export type CloseHeaderProps = {
+  onClose?: () => void;
+  className?: string;
+};
+
+export function CloseHeader({ onClose, className }: CloseHeaderProps) {
+  return (
+    <HeaderContainer className={className}>
+      <Pressable
+        accessibilityRole={onClose ? "button" : undefined}
+        accessibilityLabel="닫기"
+        onPress={onClose}
+        hitSlop={8}
+        className="ml-auto"
+      >
+        <Cancel variant="xl" color="text-gray-800" />
+      </Pressable>
+    </HeaderContainer>
+  );
+}
diff --git a/components/common/Header/Header.stories.tsx b/components/common/Header/Header.stories.tsx
new file mode 100644
index 0000000..05a5e37
--- /dev/null
+++ b/components/common/Header/Header.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { BackHeader } from "./BackHeader";
+import { CloseHeader } from "./CloseHeader";
+import { LogoHeader } from "./LogoHeader";
+
+const meta = {
+  title: "Common/Header",
+  component: BackHeader,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <View className="w-[390px]">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof BackHeader>;
+
+export default meta;
+
+export const BackHeaderStory: StoryObj<typeof BackHeader> = {
+  name: "BackHeader",
+  render: () => <BackHeader />,
+};
+
+export const BackHeaderWithLabel: StoryObj<typeof BackHeader> = {
+  render: () => <BackHeader label="label" />,
+};
+
+export const LogoHeaderStory: StoryObj<typeof LogoHeader> = {
+  name: "LogoHeader",
+  render: () => <LogoHeader />,
+};
+
+export const CloseHeaderStory: StoryObj<typeof CloseHeader> = {
+  name: "CloseHeader",
+  render: () => <CloseHeader />,
+};
+
+export const All: StoryObj<typeof BackHeader> = {
+  render: () => (
+    <View className="gap-3">
+      <BackHeader />
+      <BackHeader label="label" />
+      <LogoHeader />
+      <CloseHeader />
+    </View>
+  ),
+};
diff --git a/components/common/Header/HeaderContainer.tsx b/components/common/Header/HeaderContainer.tsx
new file mode 100644
index 0000000..a9a14ef
--- /dev/null
+++ b/components/common/Header/HeaderContainer.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { View } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+export type HeaderContainerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function HeaderContainer({ children, className }: HeaderContainerProps) {
+  return (
+    <View
+      className={cn(
+        "h-14 w-full flex-row items-center border-b border-gray-100 bg-gray-0 px-4 py-2.5",
+        className
+      )}
+    >
+      {children}
+    </View>
+  );
+}
diff --git a/components/common/Header/LogoHeader.tsx b/components/common/Header/LogoHeader.tsx
new file mode 100644
index 0000000..cde1259
--- /dev/null
+++ b/components/common/Header/LogoHeader.tsx
@@ -0,0 +1,36 @@
+import { Image, type ImageStyle } from "expo-image";
+import { Pressable, View } from "react-native";
+
+import { Hamburger } from "@/components/icons";
+
+import { HeaderContainer } from "./HeaderContainer";
+
+const LOGO_STYLE = { width: 152, height: 28 } satisfies ImageStyle;
+
+export type LogoHeaderProps = {
+  onMenuPress?: () => void;
+  className?: string;
+};
+
+export function LogoHeader({ onMenuPress, className }: LogoHeaderProps) {
+  return (
+    <HeaderContainer className={className}>
+      <View className="w-full flex-row items-center justify-between">
+        <Image
+          source={require("@/assets/images/checktask-logo.png")}
+          style={LOGO_STYLE}
+          contentFit="contain"
+          accessibilityLabel="CheckTask"
+        />
+        <Pressable
+          accessibilityRole={onMenuPress ? "button" : undefined}
+          accessibilityLabel="메뉴 열기"
+          onPress={onMenuPress}
+          hitSlop={8}
+        >
+          <Hamburger variant="lg" className="text-gray-800" />
+        </Pressable>
+      </View>
+    </HeaderContainer>
+  );
+}
diff --git a/components/common/IconButton/IconButton.stories.tsx b/components/common/IconButton/IconButton.stories.tsx
new file mode 100644
index 0000000..8a8a866
--- /dev/null
+++ b/components/common/IconButton/IconButton.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { Folder } from "@/components/icons";
+
+import { IconButton } from "./IconButton";
+
+const meta = {
+  title: "Common/IconButton",
+  component: IconButton,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    label: "label",
+  },
+  decorators: [
+    (Story) => (
+      <View className="w-[358px]">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: "TASK 추가" },
+};
+
+export const FolderIcon: Story = {
+  args: {
+    label: "label",
+    icon: <Folder variant="sm" className="text-gray-600" />,
+  },
+};
diff --git a/components/common/IconButton/IconButton.tsx b/components/common/IconButton/IconButton.tsx
new file mode 100644
index 0000000..fa6c34c
--- /dev/null
+++ b/components/common/IconButton/IconButton.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { Pressable, Text } from "react-native";
+
+import { Add } from "@/components/icons";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_ICON = <Add variant="sm" className="text-gray-600" />;
+
+export type IconButtonProps = {
+  label: string;
+  icon?: ReactNode;
+  onPress?: () => void;
+  className?: string;
+};
+
+export function IconButton({
+  label,
+  icon = DEFAULT_ICON,
+  onPress,
+  className,
+}: IconButtonProps) {
+  return (
+    <Pressable
+      accessibilityRole={onPress ? "button" : undefined}
+      onPress={onPress}
+      className={cn(
+        "h-10 w-full flex-row items-center gap-1 rounded-lg border border-gray-100 bg-gray-0 px-3 py-2.5",
+        className
+      )}
+    >
+      {icon}
+      <Text className="text-gray-600 text-b-04-m">{label}</Text>
+    </Pressable>
+  );
+}
diff --git a/components/icons/icon.types.ts b/components/icons/icon.types.ts
index c3c40b0..68347ff 100644
--- a/components/icons/icon.types.ts
+++ b/components/icons/icon.types.ts
@@ -10,6 +10,8 @@ export const ICON_SIZES = {
   sm: 16,
   md: 20,
   lg: 24,
+  xl: 28,
+  "2xl": 32,
 } as const;
 
 export type IconVariant = keyof typeof ICON_SIZES;
diff --git a/constants/shadows.ts b/constants/shadows.ts
index 5022e27..9363e53 100644
--- a/constants/shadows.ts
+++ b/constants/shadows.ts
@@ -1,15 +1,5 @@
 import type { ViewStyle } from "react-native";
 
-/**
- * Figma `card` 이펙트 (drop shadow, #090A0B 8%, offset (0, 1), blur 4).
- *
- * NativeWind 4.2는 `box-shadow`를 `shadowColor` / `shadowRadius`로만 변환해
- * offset과 opacity가 유실되므로, className이 아닌 RN style 값으로 노출한다.
- * (AGENTS.md 컬러 규칙 5번 — className으로 처리할 수 없는 값은 JS 상수로 매핑)
- *
- * 그림자 색은 테마에 따라 반전되면 안 되는 고정 이펙트 토큰이므로
- * semantic color token(`gray-900`)이 아닌 고정 hex를 사용한다.
- */
 export const CARD_SHADOW = {
   shadowColor: "#090A0B",
   shadowOffset: { width: 0, height: 1 },
@@ -17,3 +7,19 @@ export const CARD_SHADOW = {
   shadowRadius: 4,
   elevation: 2,
 } satisfies ViewStyle;
+
+export const FAB_PRIMARY_SHADOW = {
+  shadowColor: "#317AE4",
+  shadowOffset: { width: 0, height: 6 },
+  shadowOpacity: 0.24,
+  shadowRadius: 16,
+  elevation: 8,
+} satisfies ViewStyle;
+
+export const FAB_SECONDARY_SHADOW = {
+  shadowColor: "#090A0B",
+  shadowOffset: { width: 0, height: 6 },
+  shadowOpacity: 0.08,
+  shadowRadius: 16,
+  elevation: 8,
+} satisfies ViewStyle;