diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 5747c70..6355031 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -1,6 +1,8 @@
 .docs-sidebar {
   width: 100vw;
-    
+  position: fixed;
+  top: var(--layout-height-header);
+
   @media (--desktop) {
     width: var(--layout-sidebar-width);
   }
@@ -14,7 +16,7 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
-  
+
     @media (--desktop) {
       height: calc(100vh - var(--layout-height-header));
       border-right: 1px solid var(--color-line-gray);
@@ -27,7 +29,6 @@
     }
   }
 
-
   &__section {
     overflow: hidden;
     flex-shrink: 0;
@@ -101,7 +102,6 @@
     }
   }
 
-
   &__section-list-item-wrapper {
     padding: 1px 0;
     display: block;
@@ -113,7 +113,6 @@
     }
   }
 
-
   &__section-title:not(&__section-title--active),
   &__section-list-item:not(&__section-list-item--active) {
     @media (--can-hover) {
@@ -125,12 +124,12 @@
 
   &__section-title--active,
   &__section-list-item--active {
-    background: linear-gradient(270deg, #129BFF 0%, #8A53FF 100%);
+    background: linear-gradient(270deg, #129bff 0%, #8a53ff 100%);
     color: white;
 
     @media (--can-hover) {
       .docs-sidebar__section-toggler:hover {
-        background: rgba(0,0,0,0.3);
+        background: rgba(0, 0, 0, 0.3);
       }
     }
   }
@@ -153,7 +152,7 @@
     height: 24px;
     transition-property: background-color;
     transition-duration: 0.1s;
-    
+
     @apply --squircle;
 
     @media (--can-hover) {
@@ -167,14 +166,13 @@
     }
   }
 
-
   &__toggler {
     font-size: 13px;
     cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
-    
+
     @media (--desktop) {
       display: none;
     }
@@ -197,7 +195,7 @@
       display: block;
     }
 
-    &-image{
+    &-image {
       display: inline-flex;
     }
 
@@ -212,5 +210,4 @@
       padding: 8px;
     }
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/frontend/styles/components/table-of-content.pcss b/src/frontend/styles/components/table-of-content.pcss
new file mode 100644
index 0000000..45efa74
--- /dev/null
+++ b/src/frontend/styles/components/table-of-content.pcss
@@ -0,0 +1,11 @@
+.table-of-content {
+  border-left: solid 1px var(--color-line-gray);
+  display: flex;
+  flex-direction: column;
+  letter-spacing: 0.01em;
+  font-size: 14px;
+  width: 100%;
+  /*dummy values*/
+  background: var(--color-line-gray);
+  height: 300px;
+}
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index ee55414..167eae2 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -7,6 +7,7 @@
 
   &__content {
     margin-top: var(--layout-height-header);
+    width: 100%;
 
     @media (--mobile) {
       width: 100%;
@@ -19,8 +20,17 @@
     }
   }
 
+  &__aside-right {
+    position: fixed;
+    top: var(--layout-height-header);
+    right: 0;
+    width: var(--layout-width-aside-right);
+    max-width: var(--layout-width-aside-right);
+  }
+
+  &__aside-right,
   &__content {
-    padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+    padding-top: var(--layout-padding-vertical);
 
     @media (--mobile) {
       padding: 20px var(--layout-padding-horizontal);
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index 1949f34..a730d9b 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -9,6 +9,7 @@
 @import './components/auth.pcss';
 @import './components/button.pcss';
 @import './components/sidebar.pcss';
+@import './components/table-of-content.pcss';
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;