diff --git a/src/components/Common/TopBar/TopBar.stories.tsx b/src/components/Common/TopBar/TopBar.stories.tsx
index f65c98a5..93b27658 100644
--- a/src/components/Common/TopBar/TopBar.stories.tsx
+++ b/src/components/Common/TopBar/TopBar.stories.tsx
@@ -22,6 +22,17 @@ export const Default: Story = {
   },
 };
 
+export const Logo: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.Logo />
+        <TopBar.SearchLink />
+      </TopBar>
+    );
+  },
+};
+
 export const CenterTitleAndSearch: Story = {
   render: (args) => {
     return (
diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index 77e647cd..5197fa3b 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -4,9 +4,11 @@ import { LeftNavigationWrapper, container, headerTitle, leftTitle } from './topB
 import SvgIcon from '../Svg/SvgIcon';
 import Text from '../Text/Text';
 
+import LogoImage from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
 import { vars } from '@/styles/theme.css';
 
+
 interface TopBarProps {
   children?: React.ReactNode;
   title?: string;
@@ -18,6 +20,14 @@ const TopBar = ({ children }: TopBarProps) => {
   return <header className={container}>{children}</header>;
 };
 
+const Logo = () => {
+  return (
+    <Link to={PATH.HOME}>
+      <LogoImage width={120} />
+    </Link>
+  );
+};
+
 const BackLink = ({ state }: TopBarProps) => {
   return (
     <Link to=".." relative="path" state={state}>
@@ -70,6 +80,7 @@ const Spacer = () => {
   return <div style={{ width: 24, height: 24 }} aria-hidden />;
 };
 
+TopBar.Logo = Logo;
 TopBar.BackLink = BackLink;
 TopBar.LeftNavigationGroup = LeftNavigationGroup;
 TopBar.Title = Title;