diff --git a/packages/design-system/Text.tsx b/packages/design-system/Text.tsx
index 9c09e31..abc876b 100644
--- a/packages/design-system/Text.tsx
+++ b/packages/design-system/Text.tsx
@@ -23,6 +23,7 @@ export const textVariants = cva("leading-[150%] tracking-[-2%]", {
       "title/12_sb": "font-semibold text-[12px]",
       "title/12_m": "font-medium text-[12px]",
       "title/12_r": "font-normal text-[12px]",
+      "body/16_sb": "font-semibold text-[16px]",
     },
   },
 });
diff --git a/packages/design-system/ToggleBar.stories.tsx b/packages/design-system/ToggleBar.stories.tsx
new file mode 100644
index 0000000..4ab1863
--- /dev/null
+++ b/packages/design-system/ToggleBar.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleBar } from "./ToggleBar";
+
+const meta: Meta = {
+  title: "ds/ToggleBar",
+  tags: ["autodocs"],
+};
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => {
+    return (
+      <>
+        <ToggleBar />
+      </>
+    );
+  },
+};
diff --git a/packages/design-system/ToggleBar.tsx b/packages/design-system/ToggleBar.tsx
new file mode 100644
index 0000000..4d3ad60
--- /dev/null
+++ b/packages/design-system/ToggleBar.tsx
@@ -0,0 +1,41 @@
+import { Flex } from "@repo/ui/Flex";
+import { ToggleButton } from "@repo/ui/ToggleButton";
+import { ToggleButtonGroup } from "@repo/ui/ToggleButtonGroup";
+import { useState } from "react";
+import { Text } from "./Text";
+import { cn } from "./cn";
+
+export const ToggleBar: React.FC = () => {
+  const [value, setValue] = useState<string | null>("created");
+
+  return (
+    <div className={cn("flex justify-between w-full h-[36px] px-4 items-end")}>
+      <Text as="h1" variant="title/24_sb">
+        독서기록
+      </Text>
+      <ToggleButtonGroup
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue ?? "created");
+        }}
+        allowToggle={false}
+      >
+        <Flex className="gap-x-4">
+          <ToggleButton
+            value="created"
+            className={cn("text-gray-300 data-[state=selected]:text-gray-500")}
+          >
+            생성일 순
+          </ToggleButton>
+
+          <ToggleButton
+            value="updated"
+            className={cn("text-gray-300 data-[state=selected]:text-gray-500")}
+          >
+            업데이트 순
+          </ToggleButton>
+        </Flex>
+      </ToggleButtonGroup>
+    </div>
+  );
+};
diff --git a/packages/design-system/TopNavigation.tsx b/packages/design-system/TopNavigation.tsx
index 1d3be8f..0487aa8 100644
--- a/packages/design-system/TopNavigation.tsx
+++ b/packages/design-system/TopNavigation.tsx
@@ -1,13 +1,13 @@
 import { BackIcon } from "@repo/icon/BackIcon";
-import { type ComponentPropsWithoutRef, type Ref, forwardRef } from "react";
+import { type ComponentPropsWithRef, type Ref, forwardRef } from "react";
 import { Text } from "./Text";
 import { cn } from "./cn";
 
-interface TopNavigationProps extends ComponentPropsWithoutRef<"button"> {
+interface TopNavigationProps extends ComponentPropsWithRef<"button"> {
   title?: string;
 }
 
-export const TopNavigation = forwardRef(function SearchBar(
+export const TopNavigation = forwardRef(function TopNavigation(
   { className, title = "독서기록", ...rest }: TopNavigationProps,
   ref?: Ref<HTMLButtonElement>,
 ) {