diff --git a/shahab/jquery/jquery-ui.css b/shahab/jquery/jquery-ui.css
index 1ebcbc90e..127abc24c 100644
--- a/shahab/jquery/jquery-ui.css
+++ b/shahab/jquery/jquery-ui.css
@@ -1302,7 +1302,7 @@ a.ui-button:active,
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa;
+	background: #000;
 	opacity: .3;
 	filter: Alpha(Opacity=30); /* support: IE8 */
 }
diff --git a/shahab/scss/_alert.scss b/shahab/scss/_alert.scss
index d40f25d01..892bcd08f 100644
--- a/shahab/scss/_alert.scss
+++ b/shahab/scss/_alert.scss
@@ -1,5 +1,6 @@
 .alert {
 	text-align: $direction-start;
+	border-radius: 10px;
 	// -moz-box-shadow: 0 1px 1px #fff inset;
 	// -webkit-box-shadow: 0 1px 1px #fff inset;
 	// box-shadow: 0 1px 1px #fff inset;
@@ -23,8 +24,7 @@
 
 .alert-primary {
 	color: $Color-White;
-	background-color: $Color-Body;
-	background-image: none;
+	background: $Color-Body;
 	border-color: #3a6c7e;
 
 	h1 {
@@ -34,8 +34,7 @@
 
 .alert-success {
 	color: #000;
-	background-color: #ebf8a4;
-	background-image: none;
+	background: #8dde92;
 	border-color: #a2d246;
 
 	h1 {
@@ -45,8 +44,7 @@
 
 .alert-danger {
 	color: #000;
-	background-color: pink;
-	background-image: none;
+	background: rgb(247, 155, 170);
 	border-color: #333;
 
 	h1 {
@@ -59,5 +57,5 @@
 	border-bottom: none !important;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
-	padding-bottom: 5px;
+	// padding-bottom: 5px;
 }
diff --git a/shahab/scss/_breadcrumb.scss b/shahab/scss/_breadcrumb.scss
index 3beb80508..094890b0e 100644
--- a/shahab/scss/_breadcrumb.scss
+++ b/shahab/scss/_breadcrumb.scss
@@ -1,5 +1,7 @@
 .breadcrumb {
+	background: $Color-Body-Light;
 	padding-#{$direction-start}: 2.2em;
+	padding-block: 0.3em;
 	// text-shadow: 0 1px 0 #000;
 }
 
diff --git a/shahab/scss/_buttons.scss b/shahab/scss/_buttons.scss
index 689ef40c6..0f1f6f718 100644
--- a/shahab/scss/_buttons.scss
+++ b/shahab/scss/_buttons.scss
@@ -8,7 +8,8 @@
 	position: relative;
 	// font-size: 15px;
 	text-align: center;
-	padding: 0.5em 1.2em;
+	line-height: normal;
+	padding: 5px 10px;
 	max-width: 100%;
 	min-width: 6vw;
 	background: $Color-Azure;
@@ -21,6 +22,8 @@
 	text-decoration: none;
 	outline: 0;
 	transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
+	vertical-align: middle;
+	margin: 6px;
 
 	&:disabled {
 		// background-color: $Color-Text-Secondary-Dark;
@@ -44,3 +47,6 @@
 	}
 }
 
+.btn-link {
+	padding: 0.375rem 0.5rem;
+}
diff --git a/shahab/scss/_codemirror.scss b/shahab/scss/_codemirror.scss
index 38c81a7ee..4fda0c6f1 100644
--- a/shahab/scss/_codemirror.scss
+++ b/shahab/scss/_codemirror.scss
@@ -2,10 +2,17 @@ $textarea-cols: 40;
 $textarea-rows: 15;
 
 .CodeMirror {
+	color: $Color-Text-Main;
+	background: #1e1e1e;
 	height: 20rem;
 	direction: ltr;
 }
 
+.CodeMirror-gutters {
+	border-right: 1px solid #7f7f7f;
+	background-color: #1e1e1e;
+}
+
 #inline_editor_outer .CodeMirror {
 	height: ceil($textarea-rows * 0.4em);
 }
@@ -21,51 +28,79 @@ $textarea-rows: 15;
 	border: none;
 }
 
+.cm-s-default span,
 span {
+	&.cm-meta {
+		color: #569cd6;
+	}
 	&.cm-keyword,
 	&.cm-statement-verb {
-		color: #909;
+		color: #569cd6;
+	}
+	&.cm-def {
+		color: #9cdcfe;
 	}
-
 	&.cm-variable {
-		color: black;
+		color: #ddd6a3;
 	}
-
-	&.cm-comment {
-		color: #808000;
+	&.cm-variable-2 {
+		color: #9cdcfe;
+	}
+	&.cm-variable-3,
+	&.cm-type {
+		color: #a9b7c6;
+	}
+	&.cm-property {
+		color: #9cdcfe;
+	}
+	&.cm-operator {
+		color: #d4d4d4;
+	}
+	&.cm-string {
+		color: #ce9178;
+	}
+	&.cm-string-2 {
+		color: #6a8759;
 	}
-
 	&.cm-mysql-string {
 		color: #008000;
 	}
-
-	&.cm-operator {
-		color: fuchsia;
-	}
-
 	&.cm-mysql-word {
-		color: black;
+		color: white;
+	}
+	&.cm-comment {
+		color: #6a9955;
+	}
+	&.cm-link {
+		color: #287bde;
+	}
+	&.cm-atom {
+		color: #569cd6;
+	}
+	&.cm-error {
+		color: #bc3f3c;
+	}
+	&.cm-tag {
+		color: #569cd6;
+	}
+	&.cm-attribute {
+		color: #9cdcfe;
+	}
+	&.cm-qualifier {
+		color: #d7ba7d;
+	}
+	&.cm-bracket {
+		color: #808080;
+	}
+	&.cm-number {
+		color: #b5cea8;
 	}
-
 	&.cm-builtin {
 		color: #f00;
 	}
-
-	&.cm-variable-2 {
-		color: #f90;
-	}
-
-	&.cm-variable-3 {
-		color: #00f;
-	}
-
 	&.cm-separator {
 		color: fuchsia;
 	}
-
-	&.cm-number {
-		color: teal;
-	}
 }
 
 .autocomplete-column-name {
@@ -74,7 +109,7 @@ span {
 
 .autocomplete-column-hint {
 	display: inline-block;
-	float: $direction-end;
+	// float: $direction-end;
 	color: #666;
 	margin-#{$direction-start}: 1em;
 }
diff --git a/shahab/scss/_common.scss b/shahab/scss/_common.scss
index 5e858b248..08fe236de 100644
--- a/shahab/scss/_common.scss
+++ b/shahab/scss/_common.scss
@@ -1,5 +1,5 @@
 #page_content {
-	margin: 0 2em;
+	margin: 0 2vw;
 }
 
 .auth_config_tbl {
@@ -53,6 +53,11 @@ a {
 	}
 }
 
+input[type="checkbox"],
+input[type="checkbox"] + label {
+	cursor: pointer;
+}
+
 button.mult_submit,
 .checkall_box + label {
 	text-decoration: none;
@@ -120,8 +125,7 @@ dfn {
 .pma-table th {
 	font-weight: bold;
 	color: $th-color;
-	background: #f3f3f3;
-	background: linear-gradient(#fff, #ccc);
+	background: $Color-Body-Special;
 }
 
 a img {
@@ -148,10 +152,10 @@ select {
 }
 
 input {
-	&[type=text],
-	&[type=password],
-	&[type=number],
-	&[type=date] {
+	&[type="text"],
+	&[type="password"],
+	&[type="number"],
+	&[type="date"] {
 		border-radius: 2px;
 		-moz-border-radius: 2px;
 		-webkit-border-radius: 2px;
@@ -161,11 +165,11 @@ input {
 		padding: 4px;
 	}
 
-	&:not(.form-control)[type=text],
-	&[type=password],
-	&:not(.form-control)[type=number],
-	&[type=date],
-	&:not(.form-check-input)[type=checkbox] {
+	&:not(.form-control)[type="text"],
+	&[type="password"],
+	&:not(.form-control)[type="number"],
+	&[type="date"],
+	&:not(.form-check-input)[type="checkbox"] {
 		margin: 6px;
 	}
 }
@@ -175,10 +179,10 @@ select:not(.form-control) {
 }
 
 input {
-	&[type=text],
-	&[type=password],
-	&[type=number],
-	&[type=date] {
+	&[type="text"],
+	&[type="password"],
+	&[type="number"],
+	&[type="date"] {
 		transition: all 0.2s;
 		-ms-transition: all 0.2s;
 		-webkit-transition: all 0.2s;
@@ -198,10 +202,10 @@ select {
 }
 
 input {
-	&[type=text][disabled],
-	&[type=password][disabled],
-	&[type=number][disabled],
-	&[type=date][disabled] {
+	&[type="text"][disabled],
+	&[type="password"][disabled],
+	&[type="number"][disabled],
+	&[type="date"][disabled] {
 		background: #e8e8e8;
 		box-shadow: none;
 		-webkit-box-shadow: none;
@@ -231,7 +235,7 @@ select[disabled] {
 }
 
 input {
-	&[type=text] {
+	&[type="text"] {
 		&:hover,
 		&:focus {
 			border: 1px solid #7c7c7c;
@@ -239,7 +243,7 @@ input {
 		}
 	}
 
-	&[type=password] {
+	&[type="password"] {
 		&:hover,
 		&:focus {
 			border: 1px solid #7c7c7c;
@@ -247,7 +251,7 @@ input {
 		}
 	}
 
-	&[type=number] {
+	&[type="number"] {
 		&:hover,
 		&:focus {
 			border: 1px solid #7c7c7c;
@@ -255,7 +259,7 @@ input {
 		}
 	}
 
-	&[type=date] {
+	&[type="date"] {
 		&:hover,
 		&:focus {
 			border: 1px solid #7c7c7c;
@@ -299,11 +303,12 @@ textarea {
 
 fieldset {
 	margin-top: 1em;
-	border-radius: 4px 4px 0 0;
-	-moz-border-radius: 4px 4px 0 0;
-	-webkit-border-radius: 4px 4px 0 0;
+	// -moz-border-radius: 10px 10px 0 0;
+	// -webkit-border-radius: 10px 10px 0 0;
+	// border-radius: 10px 10px 0 0;
+	border-radius: 10px;
 	border: #aaa solid 1px;
-	padding: 0.5em;
+	padding: 1em;
 	background: $Color-Body-Light;
 
 	// @if $direction == rtl {
@@ -317,13 +322,20 @@ fieldset {
 	//   -webkit-box-shadow: 1px 1px 2px #fff inset;
 	//   box-shadow: 1px 1px 2px #fff inset;
 	// }
+
+	+ fieldset,
+	+ :not(fieldset) {
+		border-radius: 10px;
+		-moz-border-radius: 10px;
+		-webkit-border-radius: 10px;
+	}
 }
 
 fieldset {
 	fieldset {
 		margin: 0.8em;
 		border: 1px solid #aaa;
-		background: #e8e8e8;
+		// background: #e8e8e8;
 	}
 
 	legend {
@@ -341,6 +353,7 @@ fieldset {
 		// box-shadow: 3px 3px 15px #bbb;
 		width: initial;
 		font-size: 1em;
+		margin-inline-start: 10px;
 	}
 }
 
@@ -386,8 +399,8 @@ button {
 }
 
 input {
-	&:not(.form-check-input)[type=checkbox],
-	&[type=radio] {
+	&:not(.form-check-input)[type="checkbox"],
+	&[type="radio"] {
 		vertical-align: -11%;
 	}
 }
@@ -405,9 +418,9 @@ select {
 		margin: 6px;
 	}
 
-	&[multiple] {
-		background: linear-gradient(#fff, #f2f2f2);
-	}
+	// &[multiple] {
+	// 	background: linear-gradient(#fff, #f2f2f2);
+	// }
 }
 
 /* classes */
@@ -497,15 +510,15 @@ select {
 	text-shadow: 0 1px 0 #000;
 }
 
+.result_query {
+	border: 1px solid $Color-Body-Special;
+	border-radius: 10px;
+	margin-bottom: 0.5em;
+}
+
 div.tools {
 	padding: 0.2em;
-
-	a {
-		color: #3a7ead !important;
-	}
-
-	margin-top: 0;
-	margin-bottom: 0.5em;
+	margin-block: 0;
 	// avoid a thick line since this should be used under another fieldset
 	border-top: 0;
 	text-align: $direction-end;
@@ -514,6 +527,14 @@ div.tools {
 	-webkit-border-radius: 0 0 4px 4px;
 	-moz-border-radius: 0 0 4px 4px;
 	border-radius: 0 0 4px 5px;
+
+	&.print_ignore {
+		border-radius: 0 0 10px 10px;
+	}
+
+	a {
+		color: #3a7ead !important;
+	}
 }
 
 fieldset.tblFooters {
@@ -524,9 +545,9 @@ fieldset.tblFooters {
 	text-align: $direction-end;
 	float: none;
 	clear: both;
-	-webkit-border-radius: 0 0 4px 4px;
-	-moz-border-radius: 0 0 4px 4px;
-	border-radius: 0 0 4px 4px;
+	-webkit-border-radius: 0 0 10px 10px;
+	-moz-border-radius: 0 0 10px 10px;
+	border-radius: 0 0 10px 10px;
 }
 
 div.null_div {
@@ -538,14 +559,16 @@ div.null_div {
 
 fieldset {
 	.formelement {
-		float: $direction-start;
+		display: inline-block;
+		vertical-align: middle;
+		// float: $direction-start;
 		margin-#{$direction-end}: 0.5em;
 		// IE
 		white-space: nowrap;
 	}
 
 	// revert for Gecko
-	div[class=formelement] {
+	div[class="formelement"] {
 		white-space: normal;
 	}
 }
@@ -599,13 +622,13 @@ button.mult_submit {
 }
 
 // hovered items
-.pma-table tbody:first-of-type tr:not(.nopointer):hover,
-.pma-table tbody:first-of-type tr:not(.nopointer):hover th,
-.hover:not(.nopointer) {
-	// background: linear-gradient(#ced6df, #b6c6d7);
-	// color: $browse-pointer-color;
-	box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
-}
+// .pma-table tbody:first-of-type tr:not(.nopointer):hover,
+// .pma-table tbody:first-of-type tr:not(.nopointer):hover th,
+// .hover:not(.nopointer) {
+// 	// background: linear-gradient(#ced6df, #b6c6d7);
+// 	// color: $browse-pointer-color;
+// 	box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
+// }
 
 // hovered table rows
 #table_index tbody:hover tr,
@@ -664,7 +687,7 @@ button.mult_submit {
 	}
 
 	// IE doesnt handles 'pre' right
-	[class=value] {
+	[class="value"] {
 		white-space: normal;
 	}
 }
@@ -905,8 +928,8 @@ div#userPermissionModal {
 
 form.login {
 	input {
-		&[type=text],
-		&[type=password] {
+		&[type="text"],
+		&[type="password"] {
 			box-sizing: border-box;
 			width: 14em;
 		}
@@ -1225,7 +1248,7 @@ div {
 	}
 }
 
-#addChartDialog input[type=text] {
+#addChartDialog input[type="text"] {
 	margin: 0;
 	padding: 3px;
 }
@@ -1519,9 +1542,15 @@ kbd {
 	box-shadow: none;
 }
 
+pre *,
+code * {
+	font-family: $Font-Mono;
+}
+
 code {
 	font-size: 1em;
 	color: $main-color;
+	background: $Color-Body;
 
 	&.php {
 		display: block;
@@ -1555,7 +1584,7 @@ div.sqlvalidate {
 }
 
 .result_query div.sqlOuter {
-	background: $bg-one;
+	// background: $bg-one;
 	text-align: $direction-start;
 }
 
@@ -1637,10 +1666,10 @@ table {
 	*  Validation error message styles
 	*/
 input {
-	&[type=text].invalid_value,
-	&[type=password].invalid_value,
-	&[type=number].invalid_value,
-	&[type=date].invalid_value {
+	&[type="text"].invalid_value,
+	&[type="password"].invalid_value,
+	&[type="number"].invalid_value,
+	&[type="date"].invalid_value {
 		background: #fcc;
 	}
 }
@@ -1675,6 +1704,7 @@ select.invalid_value,
 	background-position: 2%;
 	border: 1px solid #e2b709;
 	background-color: #ffe57e;
+	color: #000;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
@@ -1771,6 +1801,7 @@ select.invalid_value,
 
 	#buttonGo {
 		float: $direction-end;
+		margin-bottom: 10px;
 	}
 }
 
@@ -1900,7 +1931,7 @@ input#import_merge {
 	margin-#{$direction-end}: 1em;
 }
 
-#addColumns input[type=radio] {
+#addColumns input[type="radio"] {
 	margin: 3px 0 0;
 	margin-#{$direction-start}: 1em;
 }
@@ -1910,7 +1941,7 @@ input#import_merge {
  */
 #index_frm {
 	.index_info {
-		input[type=text],
+		input[type="text"],
 		select {
 			width: 100%;
 			margin: 0;
@@ -2143,9 +2174,9 @@ table#index_columns {
 	}
 
 	input {
-		&[type=text],
-		&[type=password],
-		&[type=number] {
+		&[type="text"],
+		&[type="password"],
+		&[type="number"] {
 			border: 1px #a7a6aa solid;
 			height: auto;
 
@@ -2357,9 +2388,9 @@ input#auto_increment_opt {
 	overflow: auto;
 
 	input {
-		&[type=text],
-		&[type=password],
-		&[type=number] {
+		&[type="text"],
+		&[type="password"],
+		&[type="number"] {
 			width: 10em;
 			box-sizing: border-box;
 			-ms-box-sizing: border-box;
@@ -2600,10 +2631,10 @@ input#auto_increment_opt {
 
 .navigation {
 	margin: 0.8em 0;
-	border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	background: linear-gradient(#eee, #ccc);
+	border-radius: 10px;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	background: $Color-Body-Light;
 
 	td {
 		margin: 0;
@@ -2613,7 +2644,7 @@ input#auto_increment_opt {
 	}
 
 	input {
-		&[type=submit] {
+		&[type="submit"] {
 			background: none;
 			border: 0;
 			filter: none;
@@ -2669,7 +2700,7 @@ input#auto_increment_opt {
 	padding: 0;
 	position: absolute;
 
-	input[type=text] {
+	input[type="text"] {
 		background: #fff;
 		height: 100%;
 		margin: 0;
@@ -2702,7 +2733,7 @@ input#auto_increment_opt {
 	}
 
 	.edit_box_posting {
-		background: #fff url('../img/ajax_clock_small.gif') no-repeat $direction-end center;
+		background: #fff url("../img/ajax_clock_small.gif") no-repeat $direction-end center;
 		padding-#{$direction-end}: 1.5em;
 	}
 
@@ -2719,7 +2750,7 @@ input#auto_increment_opt {
 }
 
 .saving_edited_data {
-	background: url('../img/ajax_clock_small.gif') no-repeat $direction-start;
+	background: url("../img/ajax_clock_small.gif") no-repeat $direction-start;
 	padding-#{$direction-start}: 20px;
 }
 
@@ -2822,9 +2853,9 @@ div#page_content div {
 	&#tableslistcontainer {
 		margin-top: 1em;
 
-		table.data {
-			border-top: 0.1px solid #eee;
-		}
+		// table.data {
+		// 	border-top: 0.1px solid #eee;
+		// }
 	}
 
 	&.result_query {
@@ -3235,7 +3266,7 @@ textarea {
 		}
 	}
 
-	input[type=text] {
+	input[type="text"] {
 		margin: 0;
 		padding: 2px 4px;
 	}
diff --git a/shahab/scss/_forms.scss b/shahab/scss/_forms.scss
index 3c2c3c3b7..5b1929dba 100644
--- a/shahab/scss/_forms.scss
+++ b/shahab/scss/_forms.scss
@@ -1,3 +1,50 @@
+.input-group-text {
+	color: $Color-Text-Main;
+	background-color: $Color-Body-Light;
+	border: 1px solid $Color-Body-Special;
+}
+
+.form-control,
+input,
+select,
+optgroup,
+textarea,
+input:not([type="button"]):not([type="submit"]) {
+	padding: 5px 10px;
+	display: inline-block;
+	background-color: $Color-Body-Light;
+	border: 1px solid #686881;
+	color: $Color-Text-Main;
+	border-radius: 10px;
+	box-sizing: border-box;
+	line-height: normal;
+	vertical-align: middle;
+
+	// @include mobile() {
+	// 	width: 100%;
+	// 	padding: 1.8vw 3vw;
+	// 	border-radius: 6vw;
+	// }
+}
+
+.textfield {
+	width: 100%;
+}
+
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group > .btn-group:not(:last-child) > .btn {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin-inline-end: 0;
+}
+
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) > .btn {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	margin-inline-start: 0;
+}
+
 select#fieldsSelect,
 textarea#sqlquery {
 	margin: 0;
diff --git a/shahab/scss/_nav.scss b/shahab/scss/_nav.scss
index 9e0167b58..98b12da78 100644
--- a/shahab/scss/_nav.scss
+++ b/shahab/scss/_nav.scss
@@ -1,32 +1,32 @@
-.nav-pills {
-	.nav-link {
-		margin-#{$direction-start}: 0;
-		margin-#{$direction-end}: 6px;
-		padding: 4px 10px;
-		font-weight: bold;
-		background: #f2f2f2;
-		color: $Color-Misc1;
-		border: 1px solid #ddd;
+// .nav-pills {
+// 	.nav-link {
+// 		margin-#{$direction-start}: 0;
+// 		margin-#{$direction-end}: 6px;
+// 		padding: 4px 10px;
+// 		font-weight: bold;
+// 		background: #f2f2f2;
+// 		color: $Color-Misc1;
+// 		border: 1px solid #ddd;
 
-		@include border-radius(20px);
+// 		@include border-radius(20px);
 
-		&:hover {
-			background-color: $bg-one;
+// 		&:hover {
+// 			background-color: $bg-one;
 
-			@include border-radius(0.3em);
-		}
+// 			@include border-radius(0.3em);
+// 		}
 
-		img {
-			margin-#{$direction-end}: 0.5em;
-			vertical-align: -3px;
-		}
-	}
+// 		img {
+// 			margin-#{$direction-end}: 0.5em;
+// 			vertical-align: -3px;
+// 		}
+// 	}
 
-	.nav-link.active,
-	.show > .nav-link {
-		background-color: #fff;
-		color: $Color-Misc1;
+// 	.nav-link.active,
+// 	.show > .nav-link {
+// 		background-color: #fff;
+// 		color: $Color-Misc1;
 
-		@include border-radius(0.3em);
-	}
-}
+// 		@include border-radius(0.3em);
+// 	}
+// }
diff --git a/shahab/scss/_navbar.scss b/shahab/scss/_navbar.scss
index e5dd003bd..e5f4717f7 100644
--- a/shahab/scss/_navbar.scss
+++ b/shahab/scss/_navbar.scss
@@ -1,12 +1,18 @@
 .navbar.bg-light {
-	background: linear-gradient(#fff, #dcdcdc);
+	background: none !important;
 }
 
-.navbar-nav {
+.navbar-nav,
+.nav-pills {
 	font-weight: bold;
+	padding: 8px 10px;
+	background: $Color-Body;
+	border-bottom: 1px solid $Color-Azure-600;
+	width: 100%;
 }
 
-.navbar-nav .icon {
+.navbar-nav .icon,
+.nav-pills .icon {
 	width: 22px;
 	height: 22px;
 	margin-#{$direction-end}: 0.5em;
@@ -14,22 +20,51 @@
 	// vertical-align: -3px;
 }
 
-.navbar-nav .nav-item {
-	background: linear-gradient(#fff, #dcdcdc);
-	border-#{$direction-end}: 1px solid #fff;
-	border-#{$direction-start}: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
+.navbar-nav .nav-item,
+.nav-pills .nav-item {
+	color: $Color-Tailwind-Title;
+	background: $Color-Body;
+	// background: linear-gradient(#fff, #dcdcdc);
+	// border-#{$direction-end}: 1px solid #fff;
+	// border-#{$direction-start}: 1px solid #ccc;
+	border-bottom: 1px solid $Color-Body;
+	border-radius: 10px;
+	margin-inline-end: 0.5em;
 
-	&:first-child {
-		border-#{$direction-start}: 0;
+	// &:first-child {
+	// 	border-#{$direction-start}: 0;
+	// }
+
+	.nav-link {
+		padding: 0.5rem;
+		border-radius: 10px;
+	}
+
+	&.active,
+	.nav-link.active {
+		background: $Color-Body-Special;
+		border-bottom: 1px solid $Color-Body;
 	}
 
 	&:hover {
-		background: linear-gradient(#fff, #e5e5e5);
-	}
-
-	&.active {
-		background: #fff;
-		border-bottom: 0;
+		color: $Color-Tailwind-Title;
+		background: $Color-Body-Light;
 	}
 }
+
+.navbar-light .navbar-nav .nav-link {
+	color: $Color-Tailwind-Title;
+
+	&:hover {
+		color: $Color-Tailwind-Title;
+		// background: $Color-Body-Special;
+	}
+}
+
+.navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.show,
+.navbar-light .navbar-nav .nav-link.active,
+.nav-pills .nav-link.active {
+	color: $Color-Tailwind-Focus;
+}
diff --git a/shahab/scss/_navigation.scss b/shahab/scss/_navigation.scss
index e05dfae4b..81afe5199 100644
--- a/shahab/scss/_navigation.scss
+++ b/shahab/scss/_navigation.scss
@@ -5,7 +5,7 @@
 	top: 0;
 	#{$direction-start}: 0;
 	height: 100vh;
-	// background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background;
+	background: $Color-Body;
 	color: $navi-color;
 	z-index: 800;
 
diff --git a/shahab/scss/_tables.scss b/shahab/scss/_tables.scss
index a0aa993cd..dd4ecf785 100644
--- a/shahab/scss/_tables.scss
+++ b/shahab/scss/_tables.scss
@@ -8,6 +8,7 @@
 		text-shadow: 0 1px 0 #000;
 		vertical-align: middle;
 		padding: 0.1em 0.6em;
+		border-#{$direction-end}: 1px solid $Color-Body;
 	}
 
 	th {
@@ -18,9 +19,22 @@
 		touch-action: manipulation;
 	}
 
-	thead th {
-		border-#{$direction-end}: 1px solid #fff;
-		background-image: linear-gradient(#fff, #ccc);
+	thead th,
+	.thead-light th {
+		color: $Color-Tailwind-Title;
+		background: $Color-Body-Special;
+		border-#{$direction-end}: 1px solid $Color-Body;
+		// border-bottom: 1px solid $Color-Azure-500;
+
+		* {
+			color: $Color-Tailwind-Title;
+		}
+	}
+
+	&.table-light {
+		// border-radius: 10px;
+		// overflow: hidden;
+		border: 1px double $Color-Body;
 	}
 }
 
@@ -31,4 +45,3 @@
 // 		}
 // 	}
 // }
-
diff --git a/shahab/scss/_variables.scss b/shahab/scss/_variables.scss
index 7e62460a2..560acff41 100644
--- a/shahab/scss/_variables.scss
+++ b/shahab/scss/_variables.scss
@@ -35,6 +35,7 @@ $Color-Black: #000;
 $Color-Body: #1e1e2a;
 $Color-Body-Light: #2c2c3d;
 $Color-Body-Dark: #fafafa;
+$Color-Body-Special: #3a3a56;
 
 $Color-OnBody: $Color-Gray-500;
 $Color-OnBody-Light-Shade: $Color-Gray-500;
diff --git a/shahab/scss/theme.scss b/shahab/scss/theme.scss
index 925d97ca4..5ff640d3f 100644
--- a/shahab/scss/theme.scss
+++ b/shahab/scss/theme.scss
@@ -168,7 +168,7 @@ body {
 }
 
 ::-webkit-scrollbar {
-	width: .8rem;
+	width: 0.8rem;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -182,3 +182,7 @@ body {
 		background: $Color-Azure;
 	}
 }
+
+.card-header + .list-group.list-group-flush {
+	margin-top: 0;
+}