diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index 5ecd4b4a9444c7212b4b905b743b02983817507b..650953edc83e32b3ccb060ef5f8a8f55f6b909ed 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -39,43 +39,48 @@ width: 50px;  /* Adjust based on your image size */
 height: 50px; /* Adjust based on your image size */
 }
 
+/* Sidebar Styling */
+.theme-hope-sidebar {
+  position: fixed; /* Fixed position to stay within viewport */
+  top: 1rem; /* Space from the top of the viewport */
+  right: 1rem; /* Adjust as needed */
+  height: calc(100vh - 2rem); /* Full viewport height minus some margin */
+  overflow-y: auto; /* Enable vertical scrolling */
+  width: 18rem; /* Sidebar width */
+  background-color: #f9f9f9; /* Sidebar background color */
+  padding: 1rem; /* Sidebar padding */
+  border: 1px solid #ddd; /* Sidebar border */
+  border-radius: 8px; /* Rounded corners */
+  z-index: 1000; /* Ensure sidebar is above other content */
+}
+
 /* Sidebar Title */
 .theme-hope-sidebar::before {
-  content: 'On This Page';
+  content: 'On This Page'; /* Sidebar title */
   display: block;
   font-size: 1.2rem;
   font-weight: bold;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 1rem;
+  padding-bottom: 1rem; /* Space below title */
+  border-bottom: 1px solid #ddd; /* Optional: Border under title */
+  margin-bottom: 1rem; /* Space below title */
 }
 
 /* Links in the sidebar */
 .theme-hope-sidebar a {
-  color: #333;
-  text-decoration: none;
+  color: #333; /* Link color */
+  text-decoration: none; /* No underline */
   display: block;
-  margin: 0.5rem 0;
+  margin: 0.5rem 0; /* Space between links */
 }
 
 .theme-hope-sidebar a:hover {
-  text-decoration: underline;
-}
-
-/* Layout Adjustments */
-.theme-hope-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.theme-hope-sidebar {
-  flex-shrink: 0;
-  margin-bottom: 2rem;
+  text-decoration: underline; /* Underline on hover */
 }
 
+/* Main Content Area */
 .theme-hope-main {
-  flex-grow: 1;
+  flex-grow: 1; /* Main content grows to fill remaining space */
+  margin-right: 20rem; /* Space for sidebar */
 }
 
 /* Footer Styling */
@@ -85,6 +90,6 @@ height: 50px; /* Adjust based on your image size */
   color: #fff;
   text-align: center;
   padding: 10px;
-  position: relative;
+  position: relative; /* Change to relative if sidebar overlaps */
   bottom: 0;
 }
\ No newline at end of file