diff --git a/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts b/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts
index ccda14e61..f35e2192a 100644
--- a/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts
+++ b/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import * as types from 'teleterm/ui/services/workspacesService';
 import useAsync from 'teleterm/ui/useAsync';
@@ -25,6 +25,7 @@ export default function useGateway(doc: types.DocumentGateway) {
   const workspaceDocumentsService = useWorkspaceDocumentsService();
   const gateway = ctx.clustersService.findGateway(doc.gatewayUri);
   const connected = !!gateway;
+  const cluster = ctx.clustersService.findRootClusterByResource(doc.targetUri);
 
   const [connectAttempt, createGateway, setConnectAttempt] = useAsync(
     async () => {
@@ -45,10 +46,7 @@ export default function useGateway(doc: types.DocumentGateway) {
   });
 
   const reconnect = () => {
-    const cluster = ctx.clustersService.findRootClusterByResource(
-      doc.targetUri
-    );
-    if (cluster && cluster.connected) {
+    if (cluster?.connected) {
       createGateway();
       return;
     }
@@ -75,6 +73,12 @@ export default function useGateway(doc: types.DocumentGateway) {
     }
   }, [disconnectAttempt.status]);
 
+  useEffect(() => {
+    if (cluster.connected) {
+      createGateway();
+    }
+  }, [cluster.connected]);
+
   return {
     doc,
     gateway,
diff --git a/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts b/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts
index 1203e6701..841346967 100644
--- a/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts
+++ b/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts
@@ -18,20 +18,25 @@ import { useAppContext } from 'teleterm/ui/appContextProvider';
 import * as types from 'teleterm/ui/services/workspacesService';
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
+import { useEffect } from 'react';
 
 export function useReconnect(doc: types.DocumentTshNode) {
   const ctx = useAppContext();
   const workspaceDocumentsService = useWorkspaceDocumentsService();
   const { attempt, setAttempt } = useAttempt('');
+  const cluster = ctx.clustersService.findRootClusterByResource(doc.serverUri);
 
-  function updateDoc() {
+  function markDocumentAsConnected() {
     workspaceDocumentsService.update(doc.uri, { status: 'connected' });
   }
 
+  useEffect(() => {
+    if (cluster.connected) {
+      markDocumentAsConnected();
+    }
+  }, []);
+
   function reconnect() {
-    const cluster = ctx.clustersService.findRootClusterByResource(
-      doc.serverUri
-    );
     if (!cluster) {
       setAttempt({
         status: 'failed',
@@ -44,13 +49,13 @@ export function useReconnect(doc: types.DocumentTshNode) {
     if (!cluster.connected) {
       ctx.commandLauncher.executeCommand('cluster-connect', {
         clusterUri: cluster.uri,
-        onSuccess: updateDoc,
+        onSuccess: markDocumentAsConnected,
       });
 
       return;
     }
 
-    updateDoc();
+    markDocumentAsConnected();
   }
 
   return { reconnect, attempt };
diff --git a/packages/teleterm/src/ui/ServerConnect/useServerConnect.ts b/packages/teleterm/src/ui/ServerConnect/useServerConnect.ts
index 3d25cf605..87f21578b 100644
--- a/packages/teleterm/src/ui/ServerConnect/useServerConnect.ts
+++ b/packages/teleterm/src/ui/ServerConnect/useServerConnect.ts
@@ -23,8 +23,10 @@ export default function useServerConnect({ serverUri, onClose }: Props) {
   const logins = cluster?.loggedInUser?.sshLoginsList || [];
 
   const connect = (login: string) => {
+    const rootCluster =
+      ctx.clustersService.findRootClusterByResource(serverUri);
     const documentsService = ctx.workspacesService.getWorkspaceDocumentService(
-      cluster.uri
+      rootCluster.uri
     );
     const doc = documentsService.createTshNodeDocument(serverUri);
     doc.title = `${login}@${server.hostname}`;
diff --git a/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx b/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx
index 61418cc6c..d1a3e025e 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx
@@ -18,6 +18,7 @@ export function ExpanderConnections() {
           id: 'e9c4fbc2',
           serverUri: 'brock',
           login: 'casey',
+          clusterName: 'teleport.example.sh',
         },
         {
           connected: true,
@@ -27,6 +28,7 @@ export function ExpanderConnections() {
           targetUri: 'brock',
           port: '22',
           gatewayUri: 'empty',
+          clusterName: 'teleport.example.sh',
         },
         {
           connected: false,
@@ -35,6 +37,7 @@ export function ExpanderConnections() {
           id: '949651ed',
           serverUri: 'brock',
           login: 'casey',
+          clusterName: 'teleport.example.sh',
         },
       ];
     },
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
index c5ba31bcb..7a41f8033 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { ButtonIcon, Flex, Text } from 'design';
 import { CircleCross, CircleStop } from 'design/Icon';
-import { TrackedConnection } from 'teleterm/ui/services/connectionTracker';
+import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
 import { ListItem } from 'teleterm/ui/components/ListItem';
 import { ConnectionStatusIndicator } from './ConnectionStatusIndicator';
 import { useKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 
 interface ConnectionItemProps {
   index: number;
-  item: TrackedConnection;
+  item: ExtendedTrackedConnection;
 
   onActivate(): void;
 
@@ -19,7 +19,6 @@ interface ConnectionItemProps {
 
 export function ConnectionItem(props: ConnectionItemProps) {
   const offline = !props.item.connected;
-  const color = !offline ? 'text.primary' : 'text.placeholder';
   const { isActive } = useKeyboardArrowsNavigation({
     index: props.index,
     onRun: props.onActivate,
@@ -41,8 +40,12 @@ export function ConnectionItem(props: ConnectionItemProps) {
   const actionIcon = offline ? actionIcons.remove : actionIcons.disconnect;
 
   return (
-    <ListItem onClick={() => props.onActivate()} isActive={isActive}>
-      <ConnectionStatusIndicator mr={2} connected={props.item.connected} />
+    <ListItem
+      onClick={props.onActivate}
+      isActive={isActive}
+      css={{ padding: '6px 8px', height: 'unset' }}
+    >
+      <ConnectionStatusIndicator mr={3} connected={props.item.connected} />
       <Flex
         alignItems="center"
         justifyContent="space-between"
@@ -50,9 +53,24 @@ export function ConnectionItem(props: ConnectionItemProps) {
         width="100%"
         minWidth="0"
       >
-        <Text typography="body1" color={color} title={props.item.title}>
-          {props.item.title}
-        </Text>
+        <Flex flexDirection="column">
+          <Text
+            typography="body1"
+            bold
+            color="text.primary"
+            title={props.item.title}
+            css={{ lineHeight: '16px', whiteSpace: 'normal' }}
+          >
+            {props.item.title}
+          </Text>
+          <Text
+            color="text.secondary"
+            typography="body2"
+            css={{ whiteSpace: 'normal' }}
+          >
+            {props.item.clusterName}
+          </Text>
+        </Flex>
         <ButtonIcon
           mr="-10px"
           color="text.placeholder"
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
index ca1a47c00..057f9d005 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { FilterableList } from 'teleterm/ui/components/FilterableList';
-import { TrackedConnection } from 'teleterm/ui/services/connectionTracker';
+import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
 import { ConnectionItem } from './ConnectionItem';
 import { Box, Text } from 'design';
 import { useKeyboardArrowsNavigationStateUpdate } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 
 interface ConnectionsFilterableListProps {
-  items: TrackedConnection[];
+  items: ExtendedTrackedConnection[];
 
   onActivateItem(id: string): void;
 
@@ -23,7 +23,7 @@ export function ConnectionsFilterableList(
   return (
     <Box width="300px">
       {props.items.length ? (
-        <FilterableList<TrackedConnection>
+        <FilterableList<ExtendedTrackedConnection>
           items={props.items}
           filterBy="title"
           placeholder="Search Connections"
diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
index a9aac1461..a4c082257 100644
--- a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
+++ b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ListThin } from 'design/Icon';
+import { Cluster } from 'design/Icon';
 import styled from 'styled-components';
 import { Button } from 'design';
 import { ConnectionsIconStatusIndicator } from './ConnectionsIconStatusIndicator';
@@ -21,7 +21,7 @@ export const ConnectionsIcon = forwardRef<HTMLDivElement, ConnectionsIconProps>(
           m="auto"
           title="Connections"
         >
-          <ListThin fontSize={12} />
+          <Cluster fontSize={14} />
         </StyledButton>
       </Container>
     );
diff --git a/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.ts b/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.ts
index 09ec15a1c..f80985bc0 100644
--- a/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.ts
+++ b/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.ts
@@ -26,7 +26,11 @@ import {
   getGatewayConnectionByDocument,
   getServerConnectionByDocument,
 } from './trackedConnectionUtils';
-import { TrackedConnection, TrackedGatewayConnection } from './types';
+import {
+  ExtendedTrackedConnection,
+  TrackedConnection,
+  TrackedGatewayConnection,
+} from './types';
 
 export class ConnectionTrackerService extends ImmutableStore<ConnectionTrackerState> {
   private _trackedConnectionOperationsFactory: TrackedConnectionOperationsFactory;
@@ -55,8 +59,13 @@ export class ConnectionTrackerService extends ImmutableStore<ConnectionTrackerSt
     return useStore(this).state;
   }
 
-  getConnections(): TrackedConnection[] {
-    return this.state.connections;
+  getConnections(): ExtendedTrackedConnection[] {
+    return this.state.connections.map(connection => {
+      const { clusterUri } =
+        this._trackedConnectionOperationsFactory.create(connection);
+      const cluster = this._clusterService.findCluster(clusterUri);
+      return { ...connection, clusterName: cluster?.name };
+    });
   }
 
   async activateItem(id: string): Promise<void> {
diff --git a/packages/teleterm/src/ui/services/connectionTracker/types.ts b/packages/teleterm/src/ui/services/connectionTracker/types.ts
index 53afa45b6..c83ba6d08 100644
--- a/packages/teleterm/src/ui/services/connectionTracker/types.ts
+++ b/packages/teleterm/src/ui/services/connectionTracker/types.ts
@@ -24,3 +24,7 @@ export interface TrackedGatewayConnection extends TrackedConnectionBase {
 export type TrackedConnection =
   | TrackedServerConnection
   | TrackedGatewayConnection;
+
+export type ExtendedTrackedConnection = TrackedConnection & {
+  clusterName: string;
+};