diff --git a/frontend/src/components/WorkspaceLabelBar/LabelButton.tsx b/frontend/src/components/WorkspaceLabelBar/LabelButton.tsx
new file mode 100644
index 0000000..d212c98
--- /dev/null
+++ b/frontend/src/components/WorkspaceLabelBar/LabelButton.tsx
@@ -0,0 +1,46 @@
+import { Label } from '@/types';
+import { Edit, Trash2 } from 'lucide-react';
+import { MouseEventHandler } from 'react';
+
+export default function LabelButton({ id, name, color }: Label) {
+  const handleClick: MouseEventHandler = () => {
+    console.log(`LabelButton ${id} clicked`);
+  };
+  const handleEdit: MouseEventHandler = (event) => {
+    event.stopPropagation();
+    console.log(`Edit LabelButton ${id}`);
+  };
+  const handleDelete: MouseEventHandler = (event) => {
+    event.stopPropagation();
+    console.log(`Delete LabelButton ${id}`);
+  };
+
+  return (
+    <div className="flex items-center gap-2.5 rounded-lg bg-gray-100 p-2.5 transition-colors hover:bg-gray-200">
+      <button
+        className="flex grow items-center gap-2.5 text-left"
+        onClick={handleClick}
+      >
+        <div
+          className="h-3 w-3 rounded-full"
+          style={{
+            backgroundColor: color,
+          }}
+        />
+        <span className="body grow text-gray-900">{name}</span>
+      </button>
+      <button onClick={handleEdit}>
+        <Edit
+          size={16}
+          className="stroke-gray-500 hover:stroke-gray-600"
+        />
+      </button>
+      <button onClick={handleDelete}>
+        <Trash2
+          size={16}
+          className="stroke-red-500 hover:stroke-red-600"
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceLabelBar/index.stories.tsx b/frontend/src/components/WorkspaceLabelBar/index.stories.tsx
new file mode 100644
index 0000000..5b45dee
--- /dev/null
+++ b/frontend/src/components/WorkspaceLabelBar/index.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/react';
+import WorkspaceLabelBar from '.';
+import { Label } from '@/types';
+
+const meta: Meta<typeof WorkspaceLabelBar> = {
+  title: 'Workspace/WorkspaceLabelBar',
+  component: WorkspaceLabelBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const labels: Label[] = [
+  {
+    id: 1,
+    name: 'Label 1',
+    color: '#FFaa33',
+  },
+  {
+    id: 2,
+    name: 'Label 2',
+    color: '#aaFF55',
+  },
+  {
+    id: 3,
+    name: 'Label 3',
+    color: '#77aaFF',
+  },
+];
+
+export const Default = () => {
+  return (
+    <div className="flex h-screen justify-end">
+      <WorkspaceLabelBar labels={labels} />
+    </div>
+  );
+};
diff --git a/frontend/src/components/WorkspaceLabelBar/index.tsx b/frontend/src/components/WorkspaceLabelBar/index.tsx
new file mode 100644
index 0000000..87b63ca
--- /dev/null
+++ b/frontend/src/components/WorkspaceLabelBar/index.tsx
@@ -0,0 +1,41 @@
+import { Label } from '@/types';
+import LabelButton from './LabelButton';
+import { Button } from '../ui/button';
+import { Play } from 'lucide-react';
+
+export default function WorkspaceLabelBar({ labels }: { labels: Label[] }) {
+  const handleAutoLabeling = () => {
+    console.log('Auto labeling');
+  };
+
+  return (
+    <div className="flex h-full w-[280px] flex-col justify-between border-l border-gray-300 bg-gray-100">
+      <div className="flex flex-col gap-2.5">
+        <header className="subheading flex w-full items-center gap-2 px-5 py-2.5">
+          <h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">레이블 목록</h1>
+        </header>
+        <div className="flex flex-col gap-1 px-2.5">
+          {labels.map((label) => (
+            <LabelButton
+              key={label.id}
+              {...label}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex p-2.5">
+        <Button
+          variant="outlinePrimary"
+          className="w-full"
+          onClick={handleAutoLabeling}
+        >
+          <Play
+            size={16}
+            className="mr-1"
+          />
+          <span>자동 레이블링</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceLayout/index.tsx b/frontend/src/components/WorkspaceLayout/index.tsx
index 2feb0a9..bdbf0e0 100644
--- a/frontend/src/components/WorkspaceLayout/index.tsx
+++ b/frontend/src/components/WorkspaceLayout/index.tsx
@@ -1,8 +1,9 @@
 import { Outlet } from 'react-router-dom';
 import Header from '../Header';
-import { Project } from '@/types';
+import { Label, Project } from '@/types';
 import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
 import WorkspaceSidebar from '../WorkspaceSidebar';
+import WorkspaceLabelBar from '../WorkspaceLabelBar';
 
 export default function WorkspaceLayout() {
   const workspace: { name: string; projects: Project[] } = {
@@ -59,21 +60,41 @@ export default function WorkspaceLayout() {
       },
     ],
   };
+  const labels: Label[] = [
+    {
+      id: 1,
+      name: 'Label 1',
+      color: '#FFaa33',
+    },
+    {
+      id: 2,
+      name: 'Label 2',
+      color: '#aaFF55',
+    },
+    {
+      id: 3,
+      name: 'Label 3',
+      color: '#77aaFF',
+    },
+  ];
 
   return (
     <>
       <Header className="fixed left-0 top-0" />
-      <main className="mt-16 h-[calc(100vh-64px)] w-screen">
+      <div className="mt-16 h-[calc(100vh-64px)] w-screen">
         <ResizablePanelGroup direction="horizontal">
           <WorkspaceSidebar
             workspaceName={workspace.name}
             projects={workspace.projects}
           />
-          <ResizablePanel className="flex w-full items-center justify-center">
-            <Outlet />
+          <ResizablePanel className="flex w-full items-center">
+            <main className="grow">
+              <Outlet />
+            </main>
+            <WorkspaceLabelBar labels={labels} />
           </ResizablePanel>
         </ResizablePanelGroup>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 1bfb42d..561eb60 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -19,3 +19,9 @@ export type Project = {
   type: 'Classification' | 'Detection' | 'Segmentation';
   children: Array<DirectoryItem | FileItem>;
 };
+
+export type Label = {
+  id: number;
+  name: string;
+  color: string;
+};