diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 2a455a4..12a0d02 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -1,6 +1,6 @@
 .docs-sidebar {
   width: 100vw;
-    
+
   @media (--desktop) {
     width: var(--layout-sidebar-width);
   }
@@ -14,7 +14,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);
@@ -31,6 +31,17 @@
     }
   }
 
+  &__search {
+    height: 34px;
+    appearance: none;
+    background: url("../svg/search.svg") left 10px center no-repeat,
+      url("../svg/shortcut.svg") right 10px center no-repeat;
+    background-color: var(--color-input-primary);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 8px 35px;
+    padding-right: 45px;
+  }
 
   &__section {
     overflow: hidden;
@@ -105,7 +116,6 @@
     }
   }
 
-
   &__section-list-item-wrapper {
     padding: 1px 0;
     display: block;
@@ -117,7 +127,6 @@
     }
   }
 
-
   &__section-title:not(&__section-title--active),
   &__section-list-item:not(&__section-list-item--active) {
     @media (--can-hover) {
@@ -129,12 +138,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);
       }
     }
   }
@@ -157,7 +166,7 @@
     height: 24px;
     transition-property: background-color;
     transition-duration: 0.1s;
-    
+
     @apply --squircle;
 
     @media (--can-hover) {
@@ -171,14 +180,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;
     }
@@ -201,7 +209,7 @@
       display: block;
     }
 
-    &-image{
+    &-image {
       display: inline-flex;
     }
 
@@ -216,5 +224,4 @@
       padding: 8px;
     }
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/frontend/svg/search.svg b/src/frontend/svg/search.svg
new file mode 100644
index 0000000..a37d686
--- /dev/null
+++ b/src/frontend/svg/search.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.5" cy="6.5" r="5.5" stroke="#717682" stroke-width="2"/>
+<rect x="10.4143" y="10" width="5" height="2" rx="1" transform="rotate(45 10.4143 10)" fill="#717682"/>
+</svg>
diff --git a/src/frontend/svg/shortcut.svg b/src/frontend/svg/shortcut.svg
new file mode 100644
index 0000000..34b0f4c
--- /dev/null
+++ b/src/frontend/svg/shortcut.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.856 10.5C4.424 10.5 4.928 9.52 4.928 8.344V7.182H6.468V8.344C6.468 9.52 6.972 10.5 8.54 10.5C9.842 10.5 10.682 9.674 10.682 8.386C10.682 7.028 9.87 6.23 8.274 6.23H7.448V4.69H8.274C9.87 4.69 10.682 3.892 10.682 2.534C10.682 1.246 9.842 0.42 8.54 0.42C6.972 0.42 6.468 1.4 6.468 2.576V3.738H4.928V2.576C4.928 1.4 4.424 0.42 2.856 0.42C1.554 0.42 0.714 1.246 0.714 2.534C0.714 3.892 1.526 4.69 3.122 4.69H3.948V6.23H3.122C1.526 6.23 0.714 7.028 0.714 8.386C0.714 9.674 1.554 10.5 2.856 10.5ZM7.448 2.548C7.448 1.834 7.812 1.386 8.54 1.386C9.198 1.386 9.688 1.708 9.688 2.534C9.688 3.332 9.268 3.738 8.274 3.738H7.448V2.548ZM3.122 3.738C2.128 3.738 1.708 3.332 1.708 2.534C1.708 1.708 2.198 1.386 2.856 1.386C3.584 1.386 3.948 1.834 3.948 2.548V3.738H3.122ZM4.928 6.23V4.69H6.468V6.23H4.928ZM2.856 9.534C2.198 9.534 1.708 9.212 1.708 8.386C1.708 7.588 2.128 7.182 3.122 7.182H3.948V8.372C3.948 9.086 3.584 9.534 2.856 9.534ZM7.448 8.372V7.182H8.274C9.268 7.182 9.688 7.588 9.688 8.386C9.688 9.212 9.198 9.534 8.54 9.534C7.812 9.534 7.448 9.086 7.448 8.372ZM16.3313 0.635742V10.5H17.5618V6.97949H20.0432C21.8958 6.97949 23.2151 5.67383 23.2151 3.82812C23.2151 1.94824 21.9231 0.635742 20.0569 0.635742H16.3313ZM17.5618 1.72949H19.7356C21.1643 1.72949 21.9505 2.47461 21.9505 3.82812C21.9505 5.13379 21.137 5.88574 19.7356 5.88574H17.5618V1.72949Z" fill="#717682"/>
+</svg>