diff --git a/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss b/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss
index c2dc82a2cd..2405211071 100644
--- a/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss
+++ b/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss
@@ -38,13 +38,34 @@ cc-ribbon-bar {
 	}
 
 	cc-search-panel {
-		.search-panel-card.expanded {
-			height: 100%;
+		.search-panel-card {
+			border-left: none;
+			width: 100%;
+
+			&.expanded {
+				height: 100%;
+
+				.section-body {
+					min-height: ($heightExpanded - $heightCollapsed) + 5px;
+					max-height: 500px;
+					overflow-y: auto;
+				}
+			}
 
 			.section-body {
-				min-height: ($heightExpanded - $heightCollapsed) + 5 + px;
-				max-height: 500px;
-				overflow-y: auto;
+				display: flex;
+				flex-direction: column;
+				padding: 6px;
+				position: absolute;
+				top: 45px;
+				background: white;
+				border: 1px solid #b5b5b5;
+				box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+
+				&.hidden {
+					display: none;
+					pointer-events: none;
+				}
 			}
 		}
 	}
@@ -87,10 +108,10 @@ cc-ribbon-bar {
 				font-size: 8pt;
 				display: block;
 				width: 100%;
+				height: 100%;
 				color: gray;
 				text-align: center;
 				transition: background-color 0.4s;
-				padding: 1px 0 1px 0;
 				border-bottom: 1px solid transparent;
 
 				&:hover {
diff --git a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.html b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.html
index 73a72b160b..09536bf71f 100644
--- a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.html
+++ b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.html
@@ -10,7 +10,7 @@
 		<span class="section-title" (click)="updateSearchPanelMode('treeView')">
 			File/Node Explorer <i class="fa fa-angle-down" title="Show folder structure"></i>
 		</span>
-		<div class="section-body">
+		<div class="section-body" [class.hidden]="searchPanelMode === 'minimized'">
 			<cc-blacklist-panel [hidden]="searchPanelMode !== 'blacklist'"></cc-blacklist-panel>
 			<cc-matching-files-counter [hidden]="searchPanelMode !== 'treeView'"></cc-matching-files-counter>
 			<cc-map-tree-view [hidden]="searchPanelMode !== 'treeView'"></cc-map-tree-view>
diff --git a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
index 0b9b489ed4..d9aa10a9c4 100644
--- a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
+++ b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
@@ -1,5 +1,21 @@
 cc-search-panel {
+	.search-panel-card {
+		border-left: none;
+		width: 100%;
+	}
 	.search-panel-card .section-body {
+		display: flex;
+		flex-direction: column;
 		padding: 6px;
+		position: absolute;
+		top: 45px;
+		background: white;
+		border: 1px solid #b5b5b5;
+		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+
+		&.hidden {
+			display: none;
+			pointer-events: none;
+		}
 	}
 }
diff --git a/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.html b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.html
index 0a6e202de9..e8cc496837 100644
--- a/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.html
+++ b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.html
@@ -1,4 +1,9 @@
-<mat-select title="Sort by" [value]="selectedSortingOption$ | async" (selectionChange)="handleSelectedSortingOptionChanged($event)">
+<mat-select
+	class="sorting-option-select"
+	title="Sort by"
+	[value]="selectedSortingOption$ | async"
+	(selectionChange)="handleSelectedSortingOptionChanged($event)"
+>
 	<mat-option *ngFor="let option of sortingOptions" [value]="option">
 		{{ option }}
 	</mat-option>
diff --git a/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.scss b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.scss
new file mode 100644
index 0000000000..0cc4f7bea9
--- /dev/null
+++ b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.scss
@@ -0,0 +1,3 @@
+.sorting-option-select {
+	max-width: 88px;
+}
diff --git a/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts
index be0e3d7a47..5f8bb1eded 100644
--- a/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts
+++ b/visualization/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts
@@ -9,6 +9,7 @@ import { sortingOrderSelector } from "../../../state/store/dynamicSettings/sorti
 @Component({
 	selector: "cc-sorting-option",
 	templateUrl: "./sortingOption.component.html",
+	styleUrls: ["./sortingOption.component.scss"],
 	encapsulation: ViewEncapsulation.None
 })
 export class SortingOptionComponent {