diff --git a/src/Components/Bar/Bar.tsx b/src/Components/Bar/Bar.tsx
index 04a0b16..4c0b5e7 100644
--- a/src/Components/Bar/Bar.tsx
+++ b/src/Components/Bar/Bar.tsx
@@ -79,7 +79,7 @@ export function Bar(props: IBarProps): JSX.Element {
         title='Settings'
         onClick={() => props.toggleSettings()}>
         {
-          props.isMessagesOpen
+          props.isSettingsOpen
             ? <Cog8ToothIconS className='heroicon' />
             : <Cog8ToothIcon className='heroicon' />
         }
diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx
index a2f4ea1..06b17b1 100644
--- a/src/Components/UI/UI.tsx
+++ b/src/Components/UI/UI.tsx
@@ -135,15 +135,27 @@ export function UI(props: IUIProps): JSX.Element {
   const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
   const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
 
-  let isLeftSidebarOpenClasses = 'left-16 -bottom-full md:-left-64 md:bottom-0';
+  let isLeftSidebarOpenClasses = new Set<string>([
+    'left-sidebar',
+    'left-16',
+    '-bottom-full',
+    'md:-left-64',
+    'md:bottom-0'
+  ]);
+
   let isRightSidebarOpenClasses = 'right-0 -bottom-full md:-right-80 md:bottom-0';
 
   if (isLeftSidebarOpen) {
-    isLeftSidebarOpenClasses = 'left-16';
+    isLeftSidebarOpenClasses.delete('-bottom-full');
+    isLeftSidebarOpenClasses.delete('md:-left-64');
+    isLeftSidebarOpenClasses.delete('md:bottom-0');
   }
 
   if (isRightSidebarOpen) {
     isRightSidebarOpenClasses = 'right-0';
+  } else {
+    isLeftSidebarOpenClasses.delete('left-sidebar');
+    isLeftSidebarOpenClasses.add('left-sidebar-single');
   }
 
   return (
@@ -171,7 +183,7 @@ export function UI(props: IUIProps): JSX.Element {
         } }
       />
       <Sidebar
-        className={`left-sidebar ${isLeftSidebarOpenClasses}`}
+        className={`${[...isLeftSidebarOpenClasses.values()].join(' ')}`}
         title={leftSidebarTitle}
       >
         { leftChildren }