diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index 37c8916..f983450 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -85,17 +85,91 @@ h1 {
     margin-bottom: 20px;
 }
 
+/* General sidebar styling */
 .sidebar {
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    padding: 10px;
+    margin: 10px 0;
     float: right;
     width: 250px;
-    background-color: #ffffff;
-    border: 1px solid #a2a9b1;
-    padding: 10px;
     box-sizing: border-box;
-    margin: 10px 0;
     clear: right;
 }
 
+.sidebar-title-with-pretitle,
+.sidebar-list-title {
+    background-color: #ccccff;
+    font-size: 1em;
+    padding: 0.5em;
+    margin: 0.4em 0;
+    text-align: center;
+}
+
+.sidebar-image {
+    text-align: center;
+    margin: 1em 0;
+}
+
+.sidebar-content {
+    font-size: 0.9em;
+    line-height: 1.5;
+}
+
+.sidebar-content a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+.sidebar-content a:hover {
+    text-decoration: underline;
+}
+
+.sidebar-content ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Collapsible sections */
+.sidebar-list {
+    position: relative;
+}
+
+.sidebar-list-title {
+    cursor: pointer;
+    background-color: #ddddff;
+    text-align: center;
+    padding: 0.5em;
+    color: var(--color-base);
+    border: 1px solid #ccc;
+    transition: background-color 0.3s ease;
+}
+
+.sidebar-list-title:after {
+    content: "\25BC"; /* Down arrow */
+    float: right;
+    margin-right: 10px;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-list:hover .sidebar-list-title:after,
+.sidebar-list:focus-within .sidebar-list-title:after {
+    transform: rotate(-180deg); /* Rotate arrow */
+}
+
+.sidebar-list-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.sidebar-list:hover .sidebar-list-content,
+.sidebar-list:focus-within .sidebar-list-content {
+    max-height: 1000px; /* Adjust as needed */
+}
+
+
 .toc {
     list-style-type: none;
     padding: 0;
@@ -511,6 +585,10 @@ span {
         clear: none;
     }
 
+    .sidebar-content {
+        font-size: 0.8em;
+    }
+
     .table th,
     .table td {
         padding: 5px;