diff --git a/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx b/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
index b03df78ec..29e6a2943 100644
--- a/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
+++ b/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
@@ -22,7 +22,13 @@ export const ClusterSelector = forwardRef<HTMLDivElement, ClusterSelectorProps>(
         isClusterSelected={!!props.clusterName}
         title={text}
       >
-        <Text css={{ whiteSpace: 'nowrap' }}>{text}</Text>
+        <Text
+          css={`
+            white-space: nowrap;
+          `}
+        >
+          {text}
+        </Text>
         <SortIcon fontSize={12} ml={3} />
       </Container>
     );
@@ -42,7 +48,7 @@ const Container = styled.button`
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
-  opacity: ${props => props.isClusterSelected ? 1 : 0.6};
+  opacity: ${props => (props.isClusterSelected ? 1 : 0.6)};
   cursor: pointer;
 
   &:hover,
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
index 7a41f8033..c6514df8e 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -43,7 +43,10 @@ export function ConnectionItem(props: ConnectionItemProps) {
     <ListItem
       onClick={props.onActivate}
       isActive={isActive}
-      css={{ padding: '6px 8px', height: 'unset' }}
+      css={`
+        padding: 6px 8px;
+        height: unset;
+      `}
     >
       <ConnectionStatusIndicator mr={3} connected={props.item.connected} />
       <Flex
@@ -59,20 +62,25 @@ export function ConnectionItem(props: ConnectionItemProps) {
             bold
             color="text.primary"
             title={props.item.title}
-            css={{ lineHeight: '16px', whiteSpace: 'normal' }}
+            css={`
+              line-height: 16px;
+              white-space: normal;
+            `}
           >
             {props.item.title}
           </Text>
           <Text
             color="text.secondary"
             typography="body2"
-            css={{ whiteSpace: 'normal' }}
+            css={`
+              white-space: normal;
+            `}
           >
             {props.item.clusterName}
           </Text>
         </Flex>
         <ButtonIcon
-          mr="-10px"
+          mr="-3px"
           color="text.placeholder"
           title={actionIcon.title}
           onClick={e => {
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
index a4c082257..c009bf254 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
@@ -6,6 +6,7 @@ import { ConnectionsIconStatusIndicator } from './ConnectionsIconStatusIndicator
 
 interface ConnectionsIconProps {
   isAnyConnectionActive: boolean;
+
   onClick(): void;
 }
 
@@ -13,7 +14,9 @@ export const ConnectionsIcon = forwardRef<HTMLDivElement, ConnectionsIconProps>(
   (props, ref) => {
     return (
       <Container ref={ref}>
-        <ConnectionsIconStatusIndicator connected={props.isAnyConnectionActive} />
+        <ConnectionsIconStatusIndicator
+          connected={props.isAnyConnectionActive}
+        />
         <StyledButton
           onClick={props.onClick}
           kind="secondary"
@@ -21,7 +24,7 @@ export const ConnectionsIcon = forwardRef<HTMLDivElement, ConnectionsIconProps>(
           m="auto"
           title="Connections"
         >
-          <Cluster fontSize={14} />
+          <Cluster fontSize={16} />
         </StyledButton>
       </Container>
     );