diff --git a/pages/docs/[[...slug]].js b/pages/docs/[[...slug]].js
index 1e4502a..25fd901 100644
--- a/pages/docs/[[...slug]].js
+++ b/pages/docs/[[...slug]].js
@@ -31,7 +31,7 @@ function Sidebar({data}) {
   };
 
   return (
-    <nav className="bg-pink docs__navi">
+    <nav className="docs__navi">
       <ul className="docs__list">
         {data.navi.map((item) => {
           const isActiveToggle = (active[item.path] ? true : false);
@@ -43,8 +43,8 @@ function Sidebar({data}) {
           return (
             <li key={nanoid()} className="docs__item">
               <div className="m docs__label" onClick={() => handleToggle(item.path)}>
+                {isActiveToggle ? <Icon name="ChevronDown" /> : <Icon name="ChevronRight" />}
                 <strong>{item.title}</strong>
-                {isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
               </div>
               <ul className={classNames(subClasses)}>
                 {item.pages.map((page) => {
diff --git a/styles/pages/_docs.scss b/styles/pages/_docs.scss
index d6654a4..118b3ed 100644
--- a/styles/pages/_docs.scss
+++ b/styles/pages/_docs.scss
@@ -16,16 +16,13 @@
   }
 
   &__navi {
-    max-width: calc(224px + 32px);
-    padding: 16px;
+    max-width: 224px;
     width: 100%;
-    border-radius: 8px;
-    border: 2px solid $jambonz;
     margin-right: 32px;
 
     @media (max-width: $width-tablet-1) {
       max-width: 100%;
-      margin: 0 0 32px;
+      margin: 0 0 48px;
     }
   }
 
@@ -71,19 +68,18 @@
   &__label {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     cursor: pointer;
-    color: $jambonz;
 
     svg {
       width: 20px;
       height: 20px;
       stroke: $jambonz;
+      margin-right: 8px;
     }
   }
 
   &__sublist {
-    padding-left: 16px;
+    padding-left: 28px;
     display: none;
 
     &.active {
@@ -94,7 +90,6 @@
   &__subitem {
     a {
       line-height: 1.5;
-      color: $charcoal;
 
       &.active {
         @include font-bold();