diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx
new file mode 100644
index 00000000..4e29c92e
--- /dev/null
+++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx
@@ -0,0 +1,111 @@
+import { useState, useRef, useEffect } from "react"
+import { ChevronDown, ChevronRight, Network, CircleChevronRight } from "lucide-react"
+import { CONNECTED } from "@common/src/constants.ts"
+import { ConnectionEntry } from "./ConnectionEntry.tsx"
+import type { ConnectionState } from "@/state/valkey-features/connection/connectionSlice"
+import history from "@/history.ts"
+
+interface ClusterConnectionGroupProps {
+  clusterId: string
+  connections: Array<{ connectionId: string; connection: ConnectionState }>
+}
+
+export const ClusterConnectionGroup = ({ clusterId, connections }: ClusterConnectionGroupProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [isOpen])
+
+  const connected = connections.filter(({ connection }) => connection.status === CONNECTED)
+  const connectedCount = connected.length
+  const hasConnectedInstance = connectedCount > 0
+  const firstConnectedConnection = connected[0]
+
+  const handleOpenCluster = () => {
+    if (firstConnectedConnection) {
+      history.navigate(`/${clusterId}/${firstConnectedConnection.connectionId}/cluster-topology`)
+    }
+  }
+
+  return (
+    <div
+      className="mb-3 border dark:border-tw-dark-border rounded bg-white dark:bg-tw-dark-primary"
+      ref={dropdownRef}
+    >
+      {/* cluster head */}
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 flex-1">
+            <button
+              className="p-1 rounded hover:bg-tw-primary/20"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              {isOpen ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
+            </button>
+
+            <div className="flex items-center gap-2">
+              <div className="p-2 bg-tw-primary/10 dark:bg-tw-primary/20 rounded">
+                <Network className="text-tw-primary" size={18} />
+              </div>
+              <div>
+                <div className="flex items-center gap-2">
+                  <h3 className="text-sm text-gray-900 dark:text-white">{clusterId}</h3>
+                  {hasConnectedInstance && (
+                    <span className="px-2 py-0.5 text-xs font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700
+                     dark:text-teal-400 rounded-full">
+                      {connectedCount} connected
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {connections.length} instance{connections.length !== 1 ? "s" : ""}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center text-sm gap-2">
+            {hasConnectedInstance && (
+              <button
+                className="flex items-center gap-1 p-2 rounded-md text-tw-primary border border-tw-primary/70
+                 hover:bg-tw-primary hover:text-white"
+                onClick={handleOpenCluster}
+              >
+                <CircleChevronRight size={16} />
+                Open Topology
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="border-t dark:border-tw-dark-border">
+          <div className="p-2 space-y-1">
+            {connections.map(({ connectionId, connection }) => (
+              <ConnectionEntry
+                clusterId={clusterId}
+                connection={connection}
+                connectionId={connectionId}
+                hideOpenButton={true}
+                isNested={true}
+                key={connectionId}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/frontend/src/components/connection/Connection.tsx b/apps/frontend/src/components/connection/Connection.tsx
index 1cb52eac..f0c3150f 100644
--- a/apps/frontend/src/components/connection/Connection.tsx
+++ b/apps/frontend/src/components/connection/Connection.tsx
@@ -4,14 +4,35 @@ import { HousePlug } from "lucide-react"
 import * as R from "ramda"
 import ConnectionForm from "../ui/connection-form.tsx"
 import EditForm from "../ui/edit-form.tsx"
+import type { ConnectionState } from "@/state/valkey-features/connection/connectionSlice.ts"
 import { selectConnections } from "@/state/valkey-features/connection/connectionSelectors.ts"
-import { ConnectionEntry, ConnectionEntryHeader } from "@/components/connection/ConnectionEntry.tsx"
+import { ConnectionEntry } from "@/components/connection/ConnectionEntry.tsx"
+import { ClusterConnectionGroup } from "@/components/connection/ClusterConnectionGroup.tsx"
 
 export function Connection() {
   const [showConnectionForm, setShowConnectionForm] = useState(false)
   const [showEditForm, setShowEditForm] = useState(false)
   const connections = useSelector(selectConnections)
 
+  // grouping connections
+  const { clusterGroups, standaloneConnections } = Object.entries(connections).reduce<{
+    clusterGroups: Record<string, Array<{ connectionId: string; connection: ConnectionState }>>
+    standaloneConnections: Array<{ connectionId: string; connection: ConnectionState }>
+  }>(
+    (acc, [connectionId, connection]) => {
+      const clusterId = connection.connectionDetails.clusterId
+      if (clusterId)
+        (acc.clusterGroups[clusterId] ??= []).push({ connectionId, connection })
+      else
+        acc.standaloneConnections.push({ connectionId, connection })
+      return acc
+    },
+    { clusterGroups: {}, standaloneConnections: [] },
+  )
+
+  const hasClusterGroups = Object.keys(clusterGroups).length > 0
+  const hasStandaloneConnections = standaloneConnections.length > 0
+
   const connectButton = () =>
     <button
       className="bg-tw-primary text-white px-2 rounded text-sm font-light py-1 cursor-pointer"
@@ -27,40 +48,63 @@ export function Connection() {
         <h1 className="text-xl font-bold flex items-center gap-2 text-gray-700 dark:text-white">
           <HousePlug /> Connections
         </h1>
-        { R.isNotEmpty(connections) && connectButton() }
+        {R.isNotEmpty(connections) && connectButton()}
       </div>
-      {
-        showConnectionForm &&
-        <ConnectionForm onClose={() => setShowConnectionForm(false)} />
-      }
-      {
-        showEditForm && // todo make this a separate URL /:id/edit; it's also unclear what edit means beside saving it in localStorage
-        <EditForm onClose={() => setShowEditForm(false)} />
-      }
-      {
-        R.isEmpty(connections) ?
-          <div className=" bg-white dark:bg-tw-dark-primary dark:border-tw-dark-border flex-1 flex items-center justify-center flex-col gap-2">
-            <span className="text-sm font-light text-gray-500 dark:text-white">
+
+      {showConnectionForm && <ConnectionForm onClose={() => setShowConnectionForm(false)} />}
+      {showEditForm && <EditForm onClose={() => setShowEditForm(false)} />}
+
+      {R.isEmpty(connections) ? (
+        <div className="flex-1 flex items-center justify-center flex-col gap-4">
+          <div className="text-center">
+            <h2 className="text-lg font-semibold text-gray-700 dark:text-white mb-2">
               You Have No Connections!
-            </span>
-            <p className="text-sm font-light text-gray-500 dark:text-white">
-              Click "+ Add Connection" button to connect to a Valkey instance.
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+              Click "+ Add Connection" button to connect to a Valkey instance or cluster.
             </p>
-            { connectButton() }
-          </div> :
-          <div className="border-t-1 mt-8 flex flex-col flex-1">
-            <ConnectionEntryHeader />
-            {
-              Object.entries(connections).map(([connectionId, connection]) =>
-                <ConnectionEntry
-                  clusterId={connection.connectionDetails.clusterId}
-                  connection={connection}
-                  connectionId={connectionId}
-                  key={connectionId}
-                />)
-            }
+            {connectButton()}
           </div>
-      }
+        </div>
+      ) : (
+        <div className="flex-1 mt-8">
+          {/* for clusters */}
+          {hasClusterGroups && (
+            <div className="mb-8">
+              <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
+                Clusters
+              </h2>
+              <div>
+                {Object.entries(clusterGroups).map(([clusterId, clusterConnections]) => (
+                  <ClusterConnectionGroup
+                    clusterId={clusterId}
+                    connections={clusterConnections}
+                    key={clusterId}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* for standalone instances */}
+          {hasStandaloneConnections && (
+            <div>
+              <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
+                Instances
+              </h2>
+              <div>
+                {standaloneConnections.map(({ connectionId, connection }) => (
+                  <ConnectionEntry
+                    connection={connection}
+                    connectionId={connectionId}
+                    key={connectionId}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/apps/frontend/src/components/connection/ConnectionEntry.tsx b/apps/frontend/src/components/connection/ConnectionEntry.tsx
index 425851b3..f6d38f74 100644
--- a/apps/frontend/src/components/connection/ConnectionEntry.tsx
+++ b/apps/frontend/src/components/connection/ConnectionEntry.tsx
@@ -5,11 +5,12 @@ import {
   CircleDotIcon,
   CircleSmallIcon,
   PencilIcon,
-  PowerIcon, PowerOffIcon,
-  Trash2Icon
+  PowerIcon,
+  PowerOffIcon,
+  Trash2Icon,
+  Server
 } from "lucide-react"
 import { Link } from "react-router"
-import type { ReactNode } from "react"
 import {
   type ConnectionState,
   connectPending,
@@ -21,25 +22,21 @@ import { cn } from "@/lib/utils.ts"
 import history from "@/history.ts"
 import { useAppDispatch } from "@/hooks/hooks.ts"
 
-type ConnectionEntryProps = {
-  connectionId: string,
-  connection: ConnectionState,
-  clusterId?: string,
+interface ConnectionEntryProps {
+  connectionId: string
+  connection: ConnectionState
+  clusterId?: string
+  hideOpenButton?: boolean
+  isNested?: boolean
 }
 
-const ConnectionEntryGrid = ({ children, className } : { children: ReactNode, className?: string}) =>
-  <div className={cn("grid grid-cols-[10rem_1fr_23rem] items-center py-1", className)}>
-    {children}
-  </div>
-
-export const ConnectionEntryHeader = () =>
-  <ConnectionEntryGrid className="font-bold bg-gray-100 dark:bg-tw-dark-primary">
-    <div className="pl-4">Status</div>
-    <div className="pl-4">Instance</div>
-    <div className="text-right pr-4">Actions</div>
-  </ConnectionEntryGrid>
-
-export const ConnectionEntry = ({ connectionId, connection, clusterId }: ConnectionEntryProps) => {
+export const ConnectionEntry = ({
+  connectionId,
+  connection,
+  clusterId,
+  hideOpenButton = false,
+  isNested = false,
+}: ConnectionEntryProps) => {
   const dispatch = useAppDispatch()
   const handleDisconnect = () => dispatch(closeConnection({ connectionId }))
   const handleConnect = () => dispatch(connectPending({ ...connection.connectionDetails, connectionId }))
@@ -50,55 +47,144 @@ export const ConnectionEntry = ({ connectionId, connection, clusterId }: Connect
   const isDisconnected = connection.status === DISCONNECTED
   const label = `${connection.connectionDetails.username}@${connection.connectionDetails.host}:${connection.connectionDetails.port}`
 
-  return (
-    <ConnectionEntryGrid>
-      <div className={cn(
-        isConnected ? "text-teal-500" : 
-          isDisconnected ? "text-orange-500" : 
-            "text-gray-500", 
-        "flex flex-row pl-2 text-sm font-semibold items-center",
-      )}>
-        {
-          isConnected ? <CircleDotIcon className="mr-2"/> :
-            isDisconnected ? <AlertCircleIcon className="mr-2 text-orange-500"/> :
-              isError ? <AlertCircleIcon className="mr-2"/> : 
-                <CircleSmallIcon className="mr-2"/>
-        }
-        {connection.status}
-      </div>
-      <Button asChild className={cn(!isConnected && "pointer-events-none", "justify-self-start")} variant="link">
-        <Link title={label} to={(clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`)}>{label}</Link>
-      </Button>
-      <div className="flex flex-row justify-end">
-        {
-          isConnected &&
-          <>
-            <Button onClick={() => history.navigate(clusterId ? `/${clusterId}/${connectionId}/cluster-topology` : `/${connectionId}/dashboard`)} variant="ghost">
-              <CircleChevronRight />
-              Open
+  const StatusBadge = () => {
+    if (isConnected) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-teal-100 dark:bg-teal-900/30
+         text-teal-700 dark:text-teal-400 rounded-full">
+          <CircleDotIcon size={12} />
+          Connected
+        </span>
+      )
+    }
+    if (isDisconnected) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-orange-100 dark:bg-orange-900/30
+         text-orange-700 dark:text-orange-400 rounded-full">
+          <AlertCircleIcon size={12} />
+          Disconnected
+        </span>
+      )
+    }
+    if (isError) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-red-100 dark:bg-red-900/30
+         text-red-700 dark:text-red-400 rounded-full">
+          <AlertCircleIcon size={12} />
+          Error
+        </span>
+      )
+    }
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-800
+       text-gray-600 dark:text-gray-400 rounded-full">
+        <CircleSmallIcon size={12} />
+        Not Connected
+      </span>
+    )
+  }
+
+  // for cluster instances
+  if (isNested) {
+    return (
+      <div className="p-3 bg-white dark:bg-tw-dark-primary rounded border dark:border-tw-dark-border">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <StatusBadge />
+            <Button
+              asChild
+              className={cn(!isConnected && "pointer-events-none opacity-60", "justify-start p-0 h-auto font-mono text-sm truncate")}
+              variant="link"
+            >
+              <Link title={label} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
+                {label}
+              </Link>
+            </Button>
+          </div>
+
+          {/* action buttons */}
+          <div className="flex items-center gap-1">
+            {isConnected && (
+              <>
+                <Button onClick={() => alert("todo")} size="sm" variant="ghost">
+                  <PencilIcon size={16} />
+                </Button>
+                <Button onClick={handleDisconnect} size="sm" variant="ghost">
+                  <PowerOffIcon size={16} />
+                </Button>
+              </>
+            )}
+            {(isDisconnected || !isConnected) && (
+              <Button onClick={handleConnect} size="sm" variant="ghost">
+                <PowerIcon size={16} />
+              </Button>
+            )}
+            <Button onClick={handleDelete} size="sm" variant="destructiveGhost">
+              <Trash2Icon size={16} />
             </Button>
-            <Button onClick={() => alert("todo")} variant="ghost">
-              <PencilIcon />
-              Edit
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // for standalone instnces 
+  return (
+    <div className="mb-3 p-2 border dark:border-tw-dark-border rounded bg-white dark:bg-tw-dark-primary">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <div className="p-2 bg-tw-primary/10 dark:bg-tw-primary/20 rounded">
+            <Server className="text-tw-primary" size={18} />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            <Button
+              asChild
+              className={cn(!isConnected && "pointer-events-none opacity-60", "justify-start p-0 h-auto font-mono text-sm mb-1 truncate")}
+              variant="link"
+            >
+              <Link title={label} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
+                {label}
+              </Link>
             </Button>
-            <Button onClick={handleDisconnect} variant="ghost">
-              <PowerOffIcon />
-              Disconnect
+            <div>
+              <StatusBadge />
+            </div>
+          </div>
+        </div>
+
+        {/* action buttons */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {isConnected && (
+            <>
+              {!hideOpenButton && (
+                <button
+                  className="flex items-center gap-1 p-2 rounded-md text-tw-primary border border-tw-primary/70
+                   hover:bg-tw-primary hover:text-white"
+                  onClick={() => history.navigate(clusterId ? `/${clusterId}/${connectionId}/cluster-topology` : `/${connectionId}/dashboard`)}
+                >
+                  <CircleChevronRight size={16} />
+                  Open
+                </button>
+              )}
+              <Button onClick={() => alert("todo")} size="sm" variant="ghost">
+                <PencilIcon size={16} />
+              </Button>
+              <Button onClick={handleDisconnect} size="sm" variant="ghost">
+                <PowerOffIcon size={16} />
+              </Button>
+            </>
+          )}
+          {(isDisconnected || !isConnected) && (
+            <Button onClick={handleConnect} size="sm" variant="ghost">
+              <PowerIcon size={16} />
             </Button>
-          </>
-        }
-        {
-          (isDisconnected || !isConnected) &&
-          <Button onClick={handleConnect} variant="ghost">
-            <PowerIcon />
-            Connect
+          )}
+          <Button onClick={handleDelete} size="sm" variant="destructiveGhost">
+            <Trash2Icon size={16} />
           </Button>
-        }
-        <Button onClick={handleDelete} variant="destructiveGhost">
-          <Trash2Icon />
-          Delete
-        </Button>
+        </div>
       </div>
-    </ConnectionEntryGrid>
+    </div>
   )
 }
diff --git a/apps/frontend/src/components/ui/app-sidebar.tsx b/apps/frontend/src/components/ui/app-sidebar.tsx
index f25c022d..87957e94 100644
--- a/apps/frontend/src/components/ui/app-sidebar.tsx
+++ b/apps/frontend/src/components/ui/app-sidebar.tsx
@@ -1,6 +1,6 @@
 import {
   LayoutDashboard,
-  Send,
+  SquareTerminal,
   HousePlug,
   ChevronLeft,
   ChevronRight,
@@ -8,7 +8,7 @@ import {
   CircleQuestionMark,
   Github,
   Compass,
-  Server
+  Network
 } from "lucide-react"
 import { Link, useLocation, useParams } from "react-router"
 import { useState } from "react"
@@ -62,14 +62,14 @@ export function AppSidebar() {
                   },
                   { to: (clusterId ? `/${clusterId}/${id}/sendcommand` : `/${id}/sendcommand`), 
                     title: "Send Command", 
-                    icon: Send, 
+                    icon: SquareTerminal, 
                   },
                   ...(clusterId
                     ? [
                       {
                         to: `/${clusterId}/${id}/cluster-topology`,
                         title: "Cluster Topology",
-                        icon: Server,
+                        icon: Network,
                       },
                     ]
                     : []),