diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
index 82466df..cd6460e 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
@@ -3,6 +3,7 @@
   border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: 12px 16px;
+  box-sizing: border-box;
 }
 
 .answerHeader {
diff --git a/frontend/src/components/Layout/MaxWidthLayout.jsx b/frontend/src/components/Layout/MaxWidthLayout.jsx
index 9b4dc8c..8c302b9 100644
--- a/frontend/src/components/Layout/MaxWidthLayout.jsx
+++ b/frontend/src/components/Layout/MaxWidthLayout.jsx
@@ -1,5 +1,5 @@
 import styles from './MaxWidthLayout.module.css';
 
-export default function MaxWidthLayout({ children }) {
-  return <div className={styles.area}>{children}</div>;
+export default function MaxWidthLayout({ children, hasSideBar = false }) {
+  return <div className={`${styles.area} ${hasSideBar ? styles.hasSideBar : ''}`}>{children}</div>;
 }
diff --git a/frontend/src/components/Layout/MaxWidthLayout.module.css b/frontend/src/components/Layout/MaxWidthLayout.module.css
index 2e1a689..cbf9fa1 100644
--- a/frontend/src/components/Layout/MaxWidthLayout.module.css
+++ b/frontend/src/components/Layout/MaxWidthLayout.module.css
@@ -1,5 +1,21 @@
 .area {
+  width: 100%;
   max-width: 1320px;
   padding: 0 40px;
   margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.hasSideBar {
+  display: flex;
+  gap: 20px;
+
+  & > aside {
+    flex-shrink: 0;
+    width: 320px;
+  }
+
+  & > main {
+    width: 100%;
+  }
 }
diff --git a/frontend/src/components/SideBar/SideBar.jsx b/frontend/src/components/SideBar/SideBar.jsx
deleted file mode 100644
index 5fdbfdb..0000000
--- a/frontend/src/components/SideBar/SideBar.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 692b448..0000000
--- a/frontend/src/components/SideBar/SideBar.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.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.module.css b/frontend/src/components/SideBar/SideItem.module.css
index 312a9f5..b9b1af8 100644
--- a/frontend/src/components/SideBar/SideItem.module.css
+++ b/frontend/src/components/SideBar/SideItem.module.css
@@ -7,6 +7,7 @@
   font-size: 20px;
   line-height: 1.2;
   font-weight: 400;
+  margin-bottom: 16px;
 }
 
 .sub {
diff --git a/frontend/src/components/SideBar/SideLink.jsx b/frontend/src/components/SideBar/SideLink.jsx
index d93d817..adc5413 100644
--- a/frontend/src/components/SideBar/SideLink.jsx
+++ b/frontend/src/components/SideBar/SideLink.jsx
@@ -3,7 +3,7 @@ import styles from './SideLink.module.css';
 
 export default function SideLink({ children, path }) {
   return (
-    <li>
+    <li className={styles.list}>
       <Link
         to={path}
         className={styles.link}
diff --git a/frontend/src/components/SideBar/SideLink.module.css b/frontend/src/components/SideBar/SideLink.module.css
index a4dd687..1e32624 100644
--- a/frontend/src/components/SideBar/SideLink.module.css
+++ b/frontend/src/components/SideBar/SideLink.module.css
@@ -1,3 +1,8 @@
+.list {
+  list-style: none;
+  margin-bottom: 16px;
+}
+
 .link {
   width: 100%;
   text-decoration: none;
diff --git a/frontend/src/components/SideBar/SideTitle.module.css b/frontend/src/components/SideBar/SideTitle.module.css
index eacb1d4..1b90468 100644
--- a/frontend/src/components/SideBar/SideTitle.module.css
+++ b/frontend/src/components/SideBar/SideTitle.module.css
@@ -4,4 +4,5 @@
   font-size: 24px;
   line-height: 1.2;
   font-weight: 700;
+  margin-bottom: 20px;
 }
diff --git a/frontend/src/components/SideBar/index.js b/frontend/src/components/SideBar/index.js
index 977d3b1..64c4edc 100644
--- a/frontend/src/components/SideBar/index.js
+++ b/frontend/src/components/SideBar/index.js
@@ -1,4 +1,3 @@
-export { default as SideBar } from './SideBar';
 export { default as SideItem } from './SideItem';
 export { default as SideLink } from './SideLink';
 export { default as SideTitle } from './SideTitle';