diff --git a/wiki/public/js/render_wiki.js b/wiki/public/js/render_wiki.js
index 2af6d832..839da0e5 100644
--- a/wiki/public/js/render_wiki.js
+++ b/wiki/public/js/render_wiki.js
@@ -210,8 +210,11 @@ window.RenderWiki = class RenderWiki extends Wiki {
 
     sidebar_items.each(function (index) {
       if ($(this).attr("class")) {
-        let dish = $(this).attr("class").split(/\s+/)[1];
-        if (dish === "active") {
+        const hasActiveClass = $(this)
+          .attr("class")
+          .split(/\s+/)
+          .includes("active");
+        if (hasActiveClass) {
           current_index = index;
         }
       }
@@ -292,9 +295,9 @@ window.RenderWiki = class RenderWiki extends Wiki {
         const groupName = $(this).parent().children("span:first-child").text();
         const newWikiPage = $(".sidebar-item[data-name=new-wiki-page]");
         const newSidebarItem = $(`
-        <li class="sidebar-item active" data-type="Wiki Page" data-name="new-wiki-page" data-group-name="${groupName}">
+        <li class="sidebar-item sidebar-group-item active" data-type="Wiki Page" data-name="new-wiki-page" data-group-name="${groupName}">
           <div>
-            <a href="#" class="active">New Wiki Page</a>
+            <a href="#">New Wiki Page</a>
           </div>
         </li>
       `);
diff --git a/wiki/public/js/wiki.js b/wiki/public/js/wiki.js
index 21ccdcb1..b725b56d 100644
--- a/wiki/public/js/wiki.js
+++ b/wiki/public/js/wiki.js
@@ -115,7 +115,7 @@ window.Wiki = class Wiki {
     $("pre code")
       .parent("pre")
       .prepend(
-        `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
+        `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
       );
 
     $(".copy-btn").on("click", function () {
diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss
index 825f8f3b..f4cee3fa 100644
--- a/wiki/public/scss/edit_wiki.scss
+++ b/wiki/public/scss/edit_wiki.scss
@@ -111,17 +111,17 @@ $font-sizes-mobile: (
 		}
 	}
 
-	li>ul,
-	li>ol {
+	li > ul,
+	li > ol {
 		padding-left: 1.5rem;
 	}
 
-	ul>li:first-child {
+	ul > li:first-child {
 		margin-top: 3px !important;
 	}
 
-	ul>*+*,
-	ol>*+* {
+	ul > * + *,
+	ol > * + * {
 		margin-top: 2px !important;
 	}
 
@@ -169,13 +169,13 @@ $font-sizes-mobile: (
 		font-weight: 600;
 
 		// for byline
-		&+p {
+		& + p {
 			margin-top: 1.5rem !important;
 			line-height: 1.4;
 		}
 	}
 
-	&>p {
+	& > p {
 		margin-top: 1.5rem !important;
 	}
 
@@ -220,8 +220,8 @@ $font-sizes-mobile: (
 		margin-top: 1rem !important;
 	}
 
-	tr>td,
-	tr>th {
+	tr > td,
+	tr > th {
 		font-size: $font-size-sm;
 		padding: 0.5rem;
 	}
@@ -236,14 +236,14 @@ $font-sizes-mobile: (
 		margin-top: 0.5rem !important;
 	}
 
-	.screenshot+em {
+	.screenshot + em {
 		text-align: center;
 		display: block;
 		margin-top: 0.5rem !important;
 		margin-bottom: 2rem !important;
 	}
 
-	p>code:not(.hljs) {
+	p > code:not(.hljs) {
 		padding: 0 0.25rem;
 		background-color: var(--code-bg-color);
 		color: var(--code-text-color);
@@ -267,7 +267,7 @@ $font-sizes-mobile: (
 			box-sizing: border-box;
 			position: relative;
 
-			>* {
+			> * {
 				margin-bottom: 0;
 			}
 		}
@@ -321,7 +321,7 @@ $font-sizes-mobile: (
 	pre {
 		margin: 1rem 0;
 		background: #011627;
-		color: #D6DEEB;
+		color: #d6deeb;
 		border-radius: 0.5rem;
 		overflow: hidden;
 		position: relative;
@@ -331,7 +331,6 @@ $font-sizes-mobile: (
 		}
 
 		.copy-btn {
-			margin-top: 0.5rem;
 			visibility: hidden;
 			right: 0.5rem;
 			padding: 0.75rem;
@@ -355,15 +354,13 @@ $font-sizes-mobile: (
 			background: none !important;
 
 			del {
-
 				&.diffmod,
 				&.diffdel {
-					background-color: #8B0000;
+					background-color: #8b0000;
 				}
 			}
 
 			ins {
-
 				&.diffmod,
 				&.diffins {
 					background-color: #006400;
@@ -374,24 +371,67 @@ $font-sizes-mobile: (
 }
 
 .wiki-editor {
-	margin: 1rem auto;
-	border-radius: 1rem;
-	border: 1px solid $gray-200;
+	margin-left: -1rem;
+	width: 800px;
+
+	@include media-breakpoint-down(md) {
+		margin: 0;
+		width: 100%;
+		max-width: none;
+	}
 
 	pre {
 		padding: 0.75rem 1rem;
 	}
 
 	h1 {
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 28px;
+		letter-spacing: 0.005em;
+		text-align: left;
 		margin-top: 0.75rem;
 	}
 
+	h2 {
+		margin-top: 2.5rem;
+		font-size: 20px;
+		font-weight: 600;
+		line-height: 23px;
+		letter-spacing: 0.01em;
+		text-align: left;
+	}
+
+	h3 {
+		font-size: 16px;
+		font-weight: 600;
+		line-height: 18px;
+		letter-spacing: 0.015em;
+		text-align: left;
+	}
+
+	p {
+		font-size: 14px;
+		font-weight: 420;
+		line-height: 21px;
+		letter-spacing: 0.02em;
+		text-align: left;
+	}
+
 	button:not(.btn-primary) {
 		all: unset;
 		cursor: pointer;
-		padding: 0.25rem;
-		margin: 0.25rem;
+		margin: 0 0.25rem;
 		border-radius: 0.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 1.75rem;
+	}
+
+	a.btn-primary-light {
+		background-color: var(--btn-secondary-color) !important;
 	}
 
 	button:hover {
@@ -414,6 +454,7 @@ $font-sizes-mobile: (
 		height: 80vh;
 		overflow-y: auto;
 		padding: 0 1rem;
+		padding-right: 120px;
 
 		@include media-breakpoint-down(md) {
 			padding-right: 1rem;
@@ -434,39 +475,50 @@ $font-sizes-mobile: (
 	}
 
 	img.ProseMirror-selectednode {
-		border: 2px solid #7CBCF5;
+		border: 2px solid #7cbcf5;
 	}
 
 	> :last-child {
 		overflow: auto;
 		margin-top: 0 !important;
-		border-top: 1px solid $gray-200;
+		border: 1px solid $gray-200;
+		border-radius: 0.5rem;
 	}
 
 	> :first-child {
-		padding: 0 1rem;
+		padding-bottom: 0.5rem;
 		display: flex;
 		flex-wrap: wrap;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		width: 800px;
+
+		@include media-breakpoint-down(md) {
+			width: 100%;
+			flex-wrap: nowrap;
+			align-items: flex-start;
+		}
 
 		.wiki-edit-controls {
 			flex-wrap: wrap;
 			display: inline-flex;
-
-			.vertical-sep {
-				border-right: 1px solid $gray-200;
-			}
+			row-gap: 0.5rem;
 		}
 
 		.wiki-edit-control-btn {
 			margin-left: auto;
 			display: inline-flex;
 
-			>* {
+			> * {
 				margin: 0.5rem 0.25rem;
 			}
+
+			@include media-breakpoint-down(md) {
+				margin-left: 0;
+				flex-direction: column;
+				align-items: flex-start;
+			}
 		}
 	}
 }
@@ -478,7 +530,7 @@ $font-sizes-mobile: (
 		max-width: calc(100vw - 3rem);
 	}
 
-	div>p:first-child {
+	div > p:first-child {
 		margin-top: 1.5rem !important;
 		line-height: 1.4;
 	}
@@ -518,14 +570,14 @@ ul[data-type="taskList"] {
 	li {
 		display: flex;
 
-		>label {
+		> label {
 			flex: 0 0 auto;
 			margin-right: 0.25rem;
 			margin-bottom: 0;
 			user-select: none;
 		}
 
-		>div {
+		> div {
 			flex: 1 1 auto;
 		}
 
@@ -534,25 +586,25 @@ ul[data-type="taskList"] {
 			display: list-item;
 		}
 
-		ul[data-type="taskList"]>li {
+		ul[data-type="taskList"] > li {
 			display: flex;
 		}
 
 		input {
 			color: #000;
-			margin: .1rem;
+			margin: 0.1rem;
 			margin-top: 0.4rem;
 			border: 1px solid var(--gray-500);
 			accent-color: black;
 
 			&:checked {
 				background-color: var(--primary);
-				background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-gradient);
+				background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
+					var(--checkbox-gradient);
 				background-size: 57%, 100%;
 				box-shadow: none;
 				border: none;
 			}
 		}
-
 	}
-}
\ No newline at end of file
+}
diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss
index 2234debd..cb5bb922 100644
--- a/wiki/public/scss/wiki.scss
+++ b/wiki/public/scss/wiki.scss
@@ -3,8 +3,8 @@
 
 body {
 	--gray-700: #242a30;
-	--gray-800: #1C2126;
-	--gray-900: #161A1F;
+	--gray-800: #1c2126;
+	--gray-900: #161a1f;
 
 	// light mode vars
 	--background-color: white;
@@ -40,7 +40,10 @@ body {
 
 	// ------------------------------------------
 
-	font-family: InterVar, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+	font-family: InterVar, ui-sans-serif, system-ui, -apple-system,
+		BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
+		"Noto Color Emoji";
 
 	background-color: var(--background-color);
 	color: var(--text-color);
@@ -72,7 +75,7 @@ body.dark {
 
 	--code-bg-color: var(--purple-900);
 	--code-text-color: var(--purple-50);
-	--input-bg-color: #242A30;
+	--input-bg-color: #242a30;
 
 	--sidebar-text-color: var(--gray-400);
 	--sidebar-hover-color: #242a30;
@@ -84,7 +87,7 @@ body.dark {
 	--text-on-green: var(--green-50);
 
 	--htmldiff-ins-color: #006400;
-	--htmldiff-del-color: #8B0000;
+	--htmldiff-del-color: #8b0000;
 
 	--editor-button-text-color: var(--gray-400);
 	--editor-hover-button-color: var(--gray-700);
@@ -92,7 +95,6 @@ body.dark {
 	.navbar .navbar-toggler-icon {
 		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 	}
-
 }
 
 .nav-tabs {
@@ -111,7 +113,7 @@ body.dark {
 		padding: 11px 16px 13px !important;
 		width: 48%;
 		height: 100%;
-		transition: border-color .25s;
+		transition: border-color 0.25s;
 		box-shadow: unset;
 		margin-bottom: 3.5rem;
 
@@ -129,7 +131,7 @@ body.dark {
 				font-size: 14px;
 				font-weight: 500;
 				color: var(--primary);
-				transition: color .25s;
+				transition: color 0.25s;
 			}
 		}
 
@@ -166,7 +168,7 @@ body.dark {
 
 // sidebar
 .sidebar-column {
-	margin-top: -4.5rem;
+	margin-top: -60px;
 }
 
 .sortable-chosen,
@@ -175,30 +177,54 @@ body.dark {
 	cursor: grabbing !important;
 }
 
-.web-sidebar {
-	.list-unstyled:first-child>* {
-		padding: 0.75rem 0;
-
-		&::before {
-			content: '';
-			position: relative;
-			top: -0.75rem;
-			left: 0.5rem;
-			border-top: 1px solid var(--border-color);
-			width: 99.8%;
-			display: block;
-
-			@include media-breakpoint-down(md) {
-				width: 95%;
-			}
-		}
-
-		&:first-child {
-			padding-top: 0.7rem;
-			border-top: 0;
-		}
+.sidebar-group-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	list-style-type: none;
+	padding: 0px;
+}
+.sidebar-group-container {
+	height: 32px;
+	padding: 5px 10px;
+	border-radius: 8px;
+	gap: 8px;
+}
+.sidebar-group-title {
+	font-size: 14px;
+	font-weight: 450;
+	line-height: 16px;
+	letter-spacing: 0.015em;
+	text-align: left;
+}
+.sidebar-group-item-list {
+	display: flex;
+	flex-direction: column;
+	list-style-type: none;
+	padding: 0px 10px;
+	margin-left: 10px;
+	margin-bottom: 10px !important;
+	border-left: 1px solid var(--border-color);
+}
+.sidebar-group-item {
+	display: flex;
+	align-items: center;
+	height: 26px;
+	padding: 5px 8px;
+	border-radius: 8px;
+}
+.sidebar-item-active {
+	a {
+		background-color: transparent !important;
+		color: var(--text-color) !important;
 	}
 }
+.sidebar-group-item-title {
+	color: var(--text-light);
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
 
 .sidebar-group {
 	margin: 0;
@@ -210,8 +236,11 @@ body.dark {
 
 	letter-spacing: -0.011em;
 
+	ul {
+		padding-left: 0.25rem;
+	}
+
 	.list-unstyled:empty::after {
-		margin: 0.5rem;
 		font-size: 12px;
 		font-weight: 400;
 		font-style: italic;
@@ -219,30 +248,13 @@ body.dark {
 		content: "This Wiki Group will be deleted automatically";
 	}
 
-	ul.list-unstyled {
-		ul {
-			padding-left: 0;
-		}
-	}
-
-	>ul {
-		padding-left: 0;
-		margin-bottom: 0;
-	}
-
 	.collapsible {
-		padding: 4px 0.5rem;
+		padding: 4px 10px;
 		display: flex;
 		align-items: center;
 		width: 100%;
 	}
 
-	.active {
-		border-radius: 4px;
-		color: var(--primary);
-		background-color: #ebf5ff;
-	}
-
 	div {
 		.h6 {
 			font-size: $font-size-sm;
@@ -259,7 +271,7 @@ body.dark {
 		display: inline-flex;
 		margin: 0 5px 0 auto;
 		transition: transform 0.2s ease-in-out;
-		transform: rotate(90deg);
+		// transform: rotate(90deg);
 		color: var(--sidebar-text-color);
 
 		&.rotate {
@@ -270,14 +282,12 @@ body.dark {
 
 .sidebar-group .collapsible,
 .sidebar-item {
-	margin: 2px 0;
-
 	&:hover {
 		cursor: pointer;
 
 		&:not(.active) {
 			background-color: var(--sidebar-hover-color);
-			border-radius: .625rem;
+			border-radius: 0.625rem;
 		}
 	}
 }
@@ -289,8 +299,8 @@ body.dark {
 
 	&.active {
 		background-color: var(--sidebar-active-item-color);
-		border-radius: .625rem;
-		box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, .1);
+		border-radius: 0.625rem;
+		box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, 0.1);
 	}
 
 	div {
@@ -302,6 +312,7 @@ body.dark {
 		margin: 0;
 		font-weight: 420;
 		width: 100%;
+		padding: 0;
 
 		&:hover {
 			color: unset;
@@ -313,7 +324,11 @@ body.dark {
 	}
 }
 
+.sm-sidebar {
+	width: 100%;
+}
 .sm-sidebar .web-sidebar {
+	margin-top: 4px;
 	padding-bottom: 2rem;
 }
 
@@ -322,27 +337,27 @@ body.dark {
 }
 
 .doc-sidebar {
-	height: 100vh;
 	margin-bottom: 0;
+	height: 100vh;
+	padding-top: 60px;
+	display: flex;
+	flex-direction: column;
 
 	.web-sidebar {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
-		margin-bottom: 8px;
-		margin-right: -0.5rem;
-		padding-top: 0;
-		padding-bottom: 0;
+		padding: 0px 8px;
 		overflow-x: hidden;
-		margin-left: 2rem;
+		overflow-y: scroll;
+		height: 100%;
+		width: 17rem;
 
 		.sidebar-items {
-			width: 17rem;
-			padding-top: 4.5rem;
-			margin-bottom: auto;
-
-			.list-unstyled {
-				max-width: 15rem;
-			}
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			width: 100%;
 		}
 	}
 }
@@ -358,8 +373,17 @@ body.dark {
 .navbar-nav {
 	width: 100%;
 	height: 100%;
+	display: flex;
+	align-items: center;
 	justify-content: flex-end;
 	background-color: var(--background-color);
+	padding: 0 14px;
+
+	@include media-breakpoint-down(sm) {
+		max-width: 100vw;
+		height: auto;
+		align-items: flex-start;
+	}
 
 	.search-item {
 		margin-right: auto;
@@ -386,23 +410,24 @@ body.dark {
 			}
 		}
 	}
-
 }
 
 .nav-item {
-	margin-left: 24px;
+	margin-left: 1rem;
+	display: flex;
+	align-items: center;
+
+	@include media-breakpoint-down(md) {
+		// display:;
+	}
 
 	#search-container {
-		width: 8rem;
-		height: 2.25rem;
 		padding-right: 0px;
 		padding-left: 0px;
 
 		.dropdown {
-			height: 100%;
-			border-radius: 4px;
-			border: 1px solid var(--border-color);
-			box-shadow: none;
+			height: 32px;
+			width: 240px;
 			background-color: var(--searchbar-color);
 
 			&:hover {
@@ -411,12 +436,9 @@ body.dark {
 
 			kbd {
 				position: absolute;
-				top: 0;
-				right: 0;
-				margin: 0.5rem;
-				border: 1px solid var(--border-color);
+				top: 4px;
+				right: 4px;
 				padding: 0.1rem 0.4rem;
-				border-radius: 5px;
 				color: var(--sidebar-text-color);
 				background-color: transparent;
 			}
@@ -434,7 +456,7 @@ body.dark {
 }
 
 #searchModal {
-	>div:first-child {
+	> div:first-child {
 		margin-top: 5rem;
 	}
 
@@ -510,7 +532,8 @@ body.dark {
 
 .wiki-navbar {
 	background-color: transparent;
-	padding: 0;
+	padding: 0px !important;
+	border-bottom: 1px solid var(--border-color);
 
 	@include media-breakpoint-down(md) {
 		width: auto;
@@ -518,17 +541,29 @@ body.dark {
 	}
 
 	.wiki-navbar-container {
-		padding: 0.5rem 0 1rem;
-		margin-left: 1rem;
+		padding-right: 1rem;
+		height: 60px;
+		align-items: center;
+		border-bottom: 1px solid var(--border-color);
 		background-color: var(--background-color);
-		box-shadow: 20px 5px 14px 8px var(--background-color);
 
 		@include media-breakpoint-down(md) {
 			box-shadow: unset;
 			margin-left: 0;
+
+			.navbar-nav {
+				padding-left: 10px !important;
+				max-width: 100vw;
+			}
 		}
 	}
 
+	// .wiki-navbar-container.collapse {
+	// 	.navbar-nav {
+
+	// 	}
+	// }
+
 	.doc-container .navbar-collapse {
 		padding-top: 2rem;
 		background-color: var(--background-color);
@@ -547,7 +582,13 @@ body.dark {
 
 	.sun-moon-container {
 		cursor: pointer;
-		margin-left: 1rem;
+		margin-left: 24px;
+		display: flex;
+		align-items: center;
+
+		svg {
+			width: 16px !important;
+		}
 
 		@include media-breakpoint-down(md) {
 			margin: 0.25rem 0 1rem 0.5rem;
@@ -555,12 +596,13 @@ body.dark {
 	}
 
 	.mobile-search-icon {
-		margin: 0 2rem 0 auto;
+		margin: 0 1rem 0 auto;
 		cursor: pointer;
+		display: flex;
+		align-items: center;
 	}
 }
 
-
 .doc-layout {
 	padding-top: 0rem;
 	margin: 0;
@@ -568,18 +610,18 @@ body.dark {
 }
 
 .navbar-brand {
-	padding-bottom: 1rem;
+	padding: 0;
 	color: var(--text-color) !important;
-	border-bottom: 1px solid var(--border-color);
-	width: 15rem;
-	margin-right: 0.5rem;
+	// border-bottom: 1px solid var(--border-color);
+	// width: 15rem;
+	// margin-right: 0.5rem;
 
-	@include media-breakpoint-down(md) {
-		border-bottom: unset;
+	img {
+		height: 24px;
 	}
 
-	img {
-		max-height: 18px;
+	@include media-breakpoint-down(md) {
+		border-bottom: unset;
 	}
 }
 
@@ -590,15 +632,19 @@ body.dark {
 }
 
 .navbar-brand-container {
-	padding: 1.4rem 0 0 2.5rem;
+	width: 17rem;
+	display: flex;
+	align-items: center;
+	padding: 10px 18px;
 	background-color: var(--sidebar-bg-color);
 	position: sticky;
 	top: 0;
 	z-index: 5;
+	height: 60px;
 
 	@include media-breakpoint-down(md) {
 		max-width: 14rem;
-		padding: 1rem 0 0 0;
+		// padding: 1rem 0 0 0;
 		background-color: var(--background-color);
 	}
 }
@@ -620,16 +666,16 @@ body.dark {
 // main-content
 .main-column {
 	background-color: var(--background-color);
-	flex: 8;
-	text-align: left;
-	margin: 0 2rem;
+	width: 745px;
+	padding: 10px 40px;
 
 	@include media-breakpoint-down(md) {
-		margin: 1rem;
+		padding: 20px;
+		width: 100vw;
 	}
 }
 
-.wiki-content .from-markdown> :first-child {
+.wiki-content .from-markdown > :first-child {
 	margin-top: 0;
 }
 
@@ -643,11 +689,32 @@ body.dark {
 		}
 
 		p {
-			font-size: 1rem;
+			font-size: 14px;
+			font-weight: 420;
+			line-height: 21px;
+			letter-spacing: 0.02em;
+			text-align: left;
 		}
 
 		h2 {
 			margin-top: 2.5rem;
+			font-size: 20px;
+			font-weight: 600;
+			line-height: 23px;
+			letter-spacing: 0.01em;
+			text-align: left;
+		}
+
+		h3 {
+			font-size: 16px;
+			font-weight: 600;
+			line-height: 18px;
+			letter-spacing: 0.015em;
+			text-align: left;
+		}
+
+		a.btn-primary-light {
+			background-color: var(--btn-secondary-color) !important;
 		}
 
 		ul[data-type="taskList"] input {
@@ -667,7 +734,6 @@ body.dark {
 
 // TODO: clear this when website related css is removed
 .wiki-page-content .from-markdown {
-
 	h1,
 	h2,
 	h3,
@@ -728,31 +794,49 @@ h6:hover .feather-link {
 	background-color: var(--gray-700);
 }
 
+.forward-back {
+	a {
+		p {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+	}
+}
+
 // toc
 .page-toc {
 	background-color: var(--background-color);
-	flex: 2.5;
 	font-size: $font-size-xs;
 	position: sticky;
-	top: 72px;
+	top: 90px;
 	overflow-x: hidden;
 	overflow-y: auto;
 	scrollbar-width: none;
 	height: 90vh;
+	margin-left: auto;
+	width: 240px;
+	margin-right: 16px;
+	padding-bottom: 10rem;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
 
-	.list-unstyled {
-		top: 0;
-		border-left: 1px solid var(--border-color);
+	.page-toc-title {
+		text-transform: uppercase;
+		font-size: 11px;
+		font-weight: 600;
+		line-height: 13px;
+		letter-spacing: 0.09em;
+		text-align: left;
+		margin-bottom: 0.75rem;
 	}
 
 	h5 {
 		font-size: $font-size-xs;
 		padding-left: 1rem;
-		letter-spacing: .4px;
+		letter-spacing: 0.4px;
 		line-height: 28px;
 		font-size: 13px;
 		font-weight: 600;
@@ -761,12 +845,21 @@ h6:hover .feather-link {
 
 	div {
 		width: 100%;
-		margin: 2rem 0;
 		padding: 0;
+		top: 0;
+		border-left: 1px solid var(--border-color);
 
 		ul {
 			padding-bottom: 0;
 			margin-bottom: 0;
+
+			li {
+				a {
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+				}
+			}
 		}
 	}
 
@@ -789,7 +882,7 @@ h6:hover .feather-link {
 }
 
 .doc-sidebar {
-	padding-right: 0.5rem;
+	// padding-right: 0.5rem;
 	background-color: var(--sidebar-bg-color);
 }
 
@@ -817,7 +910,7 @@ navbar
 
 	.navbar-link {
 		color: var(--text-color);
-		font-size: .875rem;
+		font-size: 0.875rem;
 		font-weight: 500;
 		padding: 0.5rem 0;
 		display: block;
@@ -830,7 +923,7 @@ navbar
 
 	.navbar-toggler {
 		border-color: transparent;
-		padding: 0;
+		padding: 18px;
 
 		&:focus {
 			outline: unset;
@@ -843,7 +936,7 @@ navbar
 	}
 
 	.logged-in .nav-avatar {
-		padding-left: 0;
+		padding: 0;
 	}
 }
 
@@ -865,12 +958,11 @@ navbar
 		padding-top: 0;
 	}
 
-	.web-sidebar>a {
+	.web-sidebar > a {
 		display: none;
 	}
 
 	.wiki-footer {
-
 		.btn.left,
 		.btn.right {
 			width: 100%;
@@ -958,7 +1050,7 @@ navbar
 }
 
 img::after {
-	content: '';
+	content: "";
 }
 
 img[alt]::after {
@@ -980,16 +1072,16 @@ strong {
 }
 
 h1 {
-	font-size: 1.75rem;
-	line-height: 1.25;
-	letter-spacing: -0.02em;
 	margin-top: 3rem;
 	margin-bottom: 0.75rem;
+	font-size: 24px;
+	font-weight: 600;
+	line-height: 28px;
+	letter-spacing: 0.005em;
 
 	@include media-breakpoint-up(sm) {
-		font-size: 2rem;
-		margin-top: 1rem;
-		margin-bottom: 0;
+		margin-top: 1.5rem !important;
+		margin-bottom: 0 !important;
 	}
 }
 
@@ -1060,7 +1152,7 @@ p {
 		input {
 			width: 100%;
 			background: $gray-200;
-			border-radius: .375rem;
+			border-radius: 0.375rem;
 			border: none;
 			outline: none;
 			padding: 0.25rem 0.5rem;
@@ -1132,7 +1224,6 @@ p {
 }
 
 del {
-
 	&.diffmod,
 	&.diffdel {
 		* {
@@ -1145,7 +1236,6 @@ del {
 }
 
 ins {
-
 	&.diffmod,
 	&.diffins {
 		* {
@@ -1160,12 +1250,12 @@ ins {
 .text-sm {
 	font-size: 13px !important;
 	line-height: 1.15;
-	letter-spacing: .02em;
+	letter-spacing: 0.02em;
 }
 
 .text-xs {
 	font-size: 12px;
 	line-height: 1.15;
-	letter-spacing: .02em;
+	letter-spacing: 0.02em;
 	font-weight: 400;
 }
diff --git a/wiki/wiki/doctype/wiki_page/templates/navbar_search.html b/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
index 7a97f58e..0d9c2739 100644
--- a/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
+++ b/wiki/wiki/doctype/wiki_page/templates/navbar_search.html
@@ -1,7 +1,7 @@
 {% if navbar_search %}
 <li class="nav-item search-item d-none d-lg-block">
   <div class="website-search doc-search" id="search-container">
-    <button class="dropdown btn" id="dropdownMenuSearch">
+    <button class="dropdown btn data-pill" id="dropdownMenuSearch">
       <div class="search-icon">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
diff --git a/wiki/wiki/doctype/wiki_page/templates/show.html b/wiki/wiki/doctype/wiki_page/templates/show.html
index 2e5753ea..bdf4c889 100644
--- a/wiki/wiki/doctype/wiki_page/templates/show.html
+++ b/wiki/wiki/doctype/wiki_page/templates/show.html
@@ -51,19 +51,18 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
 	{%- endif -%}
   </div>
   <div class="wiki-footer hide d-print-none">
-	<div class = "forward-back">
-		<a href="#" class="btn left">
-			<p>Previous Page</p>
-			<p>Left</p>
-		</a>
-		<a href="#" class="btn pull-right right">
-			<p>Next Page</p>
-			<p>Right</p></a>
-		</a>
+		<div class = "forward-back">
+			<a href="#" class="btn left">
+				<p>Previous Page</p>
+				<p>Left</p>
+			</a>
+			<a href="#" class="btn pull-right right">
+				<p>Next Page</p>
+				<p>Right</p></a>
+			</a>
+		</div>
 	</div>
 
-</div>
-
 <script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
 <script>
 	const patchNewCode = `<h1>{{ patch_new_title }}</h1>{{ patch_new_code }}`;
@@ -83,7 +82,7 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
 			.children("li");
 
 		items.each(function(item) {
-			name = $(this).children(".collapsible").children("span.text-sm").text();
+			name = $(this).children(".collapsible").children("span.sidebar-group-title, span.text-sm").text();
 			side[name] = [];
 
 			$(this).children(".list-unstyled").children(".sidebar-item").each(function (item) {
diff --git a/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html b/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
index 50ad1da9..eef1087b 100644
--- a/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
+++ b/wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
@@ -1,8 +1,9 @@
 {% macro render_sidebar_item(item) %}
-<li class="sidebar-item" data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
+<li class="sidebar-item sidebar-group-item  {% if item.route == current_route %}sidebar-item-active{% endif %}" data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
 	data-group-name="{{item.group_name or 'sidebar-item'}}" data-route="{{ item.route }}">
 	<div>
-		<a class="text-sm" href="/{{ item.route }}">
+		<a class="text-sm sidebar-group-item-title" 
+		href="/{{ item.route }}">
 			{{ item.title or item.name }}
 		</a>
 	</div>
@@ -11,11 +12,11 @@
 
 {% macro render_sidebar_items(sidebar_items) %}
 {%- if sidebar_items | len > 0 -%}
-<ul class="list-unstyled" style="min-height: 20px;">
+<ul class="list-unstyled sidebar-group-list" style="min-height: 20px;">
 	{% for sidebar_group in sidebar_items -%}
 	<li class="sidebar-group" data-type="Wiki Sidebar" data-title="{{sidebar_group}}">
-		<div class="collapsible">
-			<span class='text-sm'>{{ sidebar_group }}</span>
+		<div class="sidebar-group-container collapsible">
+			<span class='sidebar-group-title'>{{ sidebar_group }}</span>
 			<span class='add-sidebar-page hide' data-group-name="{{ sidebar_group }}" data-toggle="tooltip"
 				data-placement="top" title="New Wiki Page in the group {{ sidebar_group }}">
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none"
@@ -27,14 +28,10 @@
 			</span>
 			<span
 				class='drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}'>
-				<svg width="16" height="20" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M4 8.53967L4 3.46033C4 3.05582 4.45534 2.81874 4.78673 3.05071L8.41483 5.59038C8.69919 5.78943 8.69919 6.21057 8.41483 6.40962L4.78673 8.94929C4.45534 9.18126 4 8.94418 4 8.53967Z"
-						fill="currentColor"></path>
-				</svg>
+				<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="6 9 12 15 18 9"></polyline></svg>
 			</span>
 		</div>
-		<ul class="list-unstyled {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
+		<ul class="list-unstyled sidebar-group-item-list {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
 			style="min-height: 20px;">
 			{% for item in sidebar_items[sidebar_group] -%}
 			{{ render_sidebar_item(item) }}
diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html b/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
index 84a1e9ca..504a259a 100644
--- a/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
+++ b/wiki/wiki/doctype/wiki_page/templates/wiki_doc.html
@@ -39,8 +39,8 @@
 	{% if page_toc_html %}
 		<div class="page-toc d-none d-xl-block">
 			{% if page_toc_html %}
+				<p class="page-toc-title">On this page</p>
 				<div class='list-unstyled'>
-					<h5>On this page</h5>
 					<ul>
 						{{ page_toc_html }}
 					</ul>
diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
index 028cb9b2..93107db9 100644
--- a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
+++ b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
@@ -21,7 +21,7 @@
 
     {% if navbar_search %}
       <div class="d-lg-none mobile-search-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
           class="feather feather-search">
           <circle cx="11" cy="11" r="8"></circle>
diff --git a/wiki/wiki/doctype/wiki_page/wiki_page.py b/wiki/wiki/doctype/wiki_page/wiki_page.py
index 07a58268..5629132f 100644
--- a/wiki/wiki/doctype/wiki_page/wiki_page.py
+++ b/wiki/wiki/doctype/wiki_page/wiki_page.py
@@ -294,6 +294,7 @@ def get_items(self, sidebar_items):
 			context.active_sidebar_group = frappe.get_value(
 				"Wiki Group Item", {"wiki_page": self.name}, ["parent_label"]
 			)
+			context.current_route = self.route
 			context.collapse_sidebar_groups = wiki_settings.collapse_sidebar_groups
 			context.sidebar_items = sidebar_items
 			context.wiki_search_scope = self.get_space_route()
diff --git a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
index b3f1df8b..b5bd709c 100644
--- a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
+++ b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.js
@@ -31,7 +31,7 @@ frappe.ui.form.on("Wiki Page Patch", {
                     background-color:  #dcfce7;
                     text-decoration: none;
                 }
-             </style>`
+             </style>`,
             );
           }
         },
diff --git a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
index 99205feb..b0570e32 100644
--- a/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
+++ b/wiki/wiki/doctype/wiki_page_patch/wiki_page_patch.py
@@ -98,6 +98,7 @@ def approve_patch(self):
 		self.save()
 		return True
 
+
 @frappe.whitelist()
 def add_comment_to_patch(reference_name, content):
 	email = frappe.session.user