diff --git a/frontend/src/components/SideBar/SideBar.jsx b/frontend/src/components/SideBar/SideBar.jsx
new file mode 100644
index 0000000..5fdbfdb
--- /dev/null
+++ b/frontend/src/components/SideBar/SideBar.jsx
@@ -0,0 +1,5 @@
+import styles from './SideBar.module.css';
+
+export default function SideBar({ children }) {
+  return <aside className={styles.sidebar}>{children}</aside>;
+}
diff --git a/frontend/src/components/SideBar/SideBar.module.css b/frontend/src/components/SideBar/SideBar.module.css
new file mode 100644
index 0000000..692b448
--- /dev/null
+++ b/frontend/src/components/SideBar/SideBar.module.css
@@ -0,0 +1,15 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 320px;
+
+  & > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
diff --git a/frontend/src/components/SideBar/SideItem.jsx b/frontend/src/components/SideBar/SideItem.jsx
new file mode 100644
index 0000000..93a1d62
--- /dev/null
+++ b/frontend/src/components/SideBar/SideItem.jsx
@@ -0,0 +1,10 @@
+import styles from './SideItem.module.css';
+
+export default function SideItem({ name, sub }) {
+  return (
+    <li className={styles.item}>
+      <div>{name}</div>
+      <div className={styles.sub}>{sub}</div>
+    </li>
+  );
+}
diff --git a/frontend/src/components/SideBar/SideItem.module.css b/frontend/src/components/SideBar/SideItem.module.css
new file mode 100644
index 0000000..312a9f5
--- /dev/null
+++ b/frontend/src/components/SideBar/SideItem.module.css
@@ -0,0 +1,16 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.sub {
+  color: var(--text-color-secondary);
+  font-size: 16px;
+  line-height: 1.4;
+}
diff --git a/frontend/src/components/SideBar/SideLink.jsx b/frontend/src/components/SideBar/SideLink.jsx
new file mode 100644
index 0000000..d93d817
--- /dev/null
+++ b/frontend/src/components/SideBar/SideLink.jsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+import styles from './SideLink.module.css';
+
+export default function SideLink({ children, path }) {
+  return (
+    <li>
+      <Link
+        to={path}
+        className={styles.link}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}
diff --git a/frontend/src/components/SideBar/SideLink.module.css b/frontend/src/components/SideBar/SideLink.module.css
new file mode 100644
index 0000000..a4dd687
--- /dev/null
+++ b/frontend/src/components/SideBar/SideLink.module.css
@@ -0,0 +1,8 @@
+.link {
+  width: 100%;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
diff --git a/frontend/src/components/SideBar/SideTitle.jsx b/frontend/src/components/SideBar/SideTitle.jsx
new file mode 100644
index 0000000..895d8e5
--- /dev/null
+++ b/frontend/src/components/SideBar/SideTitle.jsx
@@ -0,0 +1,5 @@
+import styles from './SideTitle.module.css';
+
+export default function SideTitle({ children }) {
+  return <div className={styles.title}>{children}</div>;
+}
diff --git a/frontend/src/components/SideBar/SideTitle.module.css b/frontend/src/components/SideBar/SideTitle.module.css
new file mode 100644
index 0000000..eacb1d4
--- /dev/null
+++ b/frontend/src/components/SideBar/SideTitle.module.css
@@ -0,0 +1,7 @@
+.title {
+  width: 100%;
+  color: var(--text-color);
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}
diff --git a/frontend/src/components/SideBar/index.js b/frontend/src/components/SideBar/index.js
new file mode 100644
index 0000000..977d3b1
--- /dev/null
+++ b/frontend/src/components/SideBar/index.js
@@ -0,0 +1,4 @@
+export { default as SideBar } from './SideBar';
+export { default as SideItem } from './SideItem';
+export { default as SideLink } from './SideLink';
+export { default as SideTitle } from './SideTitle';