diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
index e2b61b0c..dd45e980 100644
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -45,6 +45,28 @@ body {
     transition: all 0.6s ease-out;
 }
 
+#view-controls-container {
+	height: calc(100% - 156px);
+	overflow-y: hidden;
+}
+
+#view-controls-container:hover {
+	overflow-y: overlay;
+}
+
+#view-controls-container::-webkit-scrollbar {
+	width: 4px;
+}
+
+#view-controls-container::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+#view-controls-container::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
+
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;
diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
index cb84d303..2306b795 100644
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -176,7 +176,7 @@ class ServerManagerView {
 			});
 		});
 
-		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip);
+		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
 		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
@@ -188,9 +188,17 @@ class ServerManagerView {
 		return currentIndex;
 	}
 
-	sidebarHoverEvent(SidebarButton, SidebarTooltip) {
+	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
 		SidebarButton.addEventListener('mouseover', () => {
 			SidebarTooltip.removeAttribute('style');
+			// To handle position of add server tooltip due to scrolling of list of organizations
+			// This could not be handled using CSS, hence the top of the tooltip is made same
+			// as that of its parent element.
+			// This needs to handled only for the add server tooltip and not others.
+			if (addServer) {
+				const { top } = SidebarButton.getBoundingClientRect();
+				SidebarTooltip.style.top = top + 'px';
+			}
 		});
 		SidebarButton.addEventListener('mouseout', () => {
 			SidebarTooltip.style.display = 'none';
@@ -200,6 +208,11 @@ class ServerManagerView {
 	onHover(index, serverName) {
 		this.$serverIconTooltip[index].innerHTML = serverName;
 		this.$serverIconTooltip[index].removeAttribute('style');
+		// To handle position of servers' tooltip due to scrolling of list of organizations
+		// This could not be handled using CSS, hence the top of the tooltip is made same
+		// as that of its parent element.
+		const { top } = this.$serverIconTooltip[index].parentElement.getBoundingClientRect();
+		this.$serverIconTooltip[index].style.top = top + 'px';
 	}
 
 	onHoverOut(index) {