diff --git a/apps/frontend/src/components/cluster-topology/Cluster.tsx b/apps/frontend/src/components/cluster-topology/Cluster.tsx
index e044cead..df3823b0 100644
--- a/apps/frontend/src/components/cluster-topology/Cluster.tsx
+++ b/apps/frontend/src/components/cluster-topology/Cluster.tsx
@@ -2,7 +2,7 @@ import { useState } from "react"
 import { useSelector } from "react-redux"
 import { Server, CheckCircle2 } from "lucide-react"
 import { useParams } from "react-router"
-import { CONNECTED } from "@common/src/constants.ts"
+import { CONNECTED, MAX_CONNECTIONS } from "@common/src/constants.ts"
 import { AppHeader } from "../ui/app-header"
 import RouteContainer from "../ui/route-container"
 import { StatCard } from "../ui/stat-card"
@@ -62,6 +62,8 @@ export function Cluster() {
     })
   })
 
+  const highlight = searchQuery && filteredEntries.length < MAX_CONNECTIONS ? searchQuery : ""
+
   return (
     <RouteContainer className="overflow-y-hidden" title="Cluster Topology">
       <AppHeader icon={<Server size={20} />} title="Cluster Topology" />
@@ -110,6 +112,7 @@ export function Cluster() {
             return (
               <ClusterNode
                 clusterId={clusterId!}
+                highlight={highlight}
                 key={primaryKey}
                 primary={primary}
                 primaryData={primaryData}
diff --git a/apps/frontend/src/components/cluster-topology/cluster-node.tsx b/apps/frontend/src/components/cluster-topology/cluster-node.tsx
index db24429c..cb88e97f 100644
--- a/apps/frontend/src/components/cluster-topology/cluster-node.tsx
+++ b/apps/frontend/src/components/cluster-topology/cluster-node.tsx
@@ -7,6 +7,7 @@ import { Badge } from "../ui/badge"
 import { CustomTooltip } from "../ui/tooltip"
 import { Button } from "../ui/button"
 import { Typography } from "../ui/typography"
+import { HighlightSearchMatch } from "../ui/highlight-search-match"
 import type { RootState } from "@/store.ts"
 import type { PrimaryNode, ParsedNodeInfo } from "@/state/valkey-features/cluster/clusterSlice"
 import { connectPending, type ConnectionDetails } from "@/state/valkey-features/connection/connectionSlice.ts"
@@ -20,6 +21,7 @@ interface ClusterNodeProps {
   primary: PrimaryNode
   primaryData: ParsedNodeInfo
   clusterId: string
+  highlight?: string
 }
 
 export function ClusterNode({
@@ -27,6 +29,7 @@ export function ClusterNode({
   primary,
   primaryData,
   clusterId,
+  highlight = "",
 }: ClusterNodeProps) {
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
@@ -83,12 +86,14 @@ export function ClusterNode({
               <Server className="text-primary shrink-0" size={18} />
               <div className="flex flex-col gap-1 min-w-0">
                 <div className="flex items-center gap-2 flex-wrap">
-                  <Typography variant={"label"}>{primaryData?.server_name || primaryKey}</Typography>
+                  <Typography variant={"label"}>
+                    <HighlightSearchMatch query={highlight} text={primaryData?.server_name || primaryKey} />
+                  </Typography>
                   <Badge className="text-xs px-2 py-0" variant={isConnected ? "success" : "secondary"}>
                     PRIMARY
                   </Badge>
                 </div>
-                <Typography variant="bodyXs">{`${primary.host}:${primary.port}`}</Typography>
+                <Typography variant="bodyXs"><HighlightSearchMatch query={highlight} text={`${primary.host}:${primary.port}`} /></Typography>
                 <NodeDetails nodeData={primaryData} />
               </div>
             </div>
@@ -109,7 +114,9 @@ export function ClusterNode({
                   return (
                     <div className="flex items-center mb-2 gap-1" key={replicaKey}>
                       <Server className="text-primary shrink-0" size={16} />
-                      <Typography className="underline" variant="bodyXs">{replicaKey}</Typography>
+                      <Typography className="underline" variant="bodyXs">
+                        <HighlightSearchMatch query={highlight} text={replicaKey} />
+                      </Typography>
                     </div>
                   )
                 })}
diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx
index 80d32ef2..249b340e 100644
--- a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx
+++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx
@@ -22,10 +22,12 @@ import { useAppDispatch } from "@/hooks/hooks.ts"
 import { Button } from "@/components/ui/button.tsx"
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip.tsx"
 import { Typography } from "@/components/ui/typography.tsx"
+import { HighlightSearchMatch } from "@/components/ui/highlight-search-match.tsx"
 
 interface ClusterConnectionGroupProps {
   clusterId: string
   connections: Array<{ connectionId: string; connection: ConnectionState }>
+  highlight?: string
   onEdit?: (connectionId: string) => void
 }
 
@@ -39,7 +41,7 @@ const getLatestTimestamp = R.pipe(
 // storage key for persisting open/closed state of cluster groups
 const getStorageKey = (clusterId: string) => `cluster-group-open-${clusterId}`
 
-export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: ClusterConnectionGroupProps) => {
+export const ClusterConnectionGroup = ({ clusterId, connections, highlight = "", onEdit }: ClusterConnectionGroupProps) => {
   const dispatch = useAppDispatch()
   const [isOpen, setIsOpen] = useState(() => {
     const stored = localStorage.getItem(getStorageKey(clusterId))
@@ -147,7 +149,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust
                               title={firstNodeAlias || clusterId}
                               to={`/${clusterId}/${firstConnectedConnection.connectionId}/cluster-topology`}
                             >
-                              {firstNodeAlias || clusterId}
+                              <HighlightSearchMatch query={highlight} text={firstNodeAlias || clusterId} />
                             </Link>
                           </Typography>
                         </div>
@@ -164,7 +166,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust
                         title={firstNodeAlias || clusterId}
                         variant="code"
                       >
-                        {firstNodeAlias || clusterId}
+                        <HighlightSearchMatch query={highlight} text={firstNodeAlias || clusterId} />
                       </Typography>
                     </div>
                   )}
@@ -236,6 +238,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust
                 connection={connection}
                 connectionId={connectionId}
                 hideOpenButton={true}
+                highlight={highlight}
                 isNested={true}
                 key={connectionId}
                 onEdit={onEdit}
diff --git a/apps/frontend/src/components/connection/Connection.tsx b/apps/frontend/src/components/connection/Connection.tsx
index ad2691c5..46beabab 100644
--- a/apps/frontend/src/components/connection/Connection.tsx
+++ b/apps/frontend/src/components/connection/Connection.tsx
@@ -1,21 +1,27 @@
 import { useState } from "react"
 import { useSelector } from "react-redux"
 import { HousePlug } from "lucide-react"
+import { MAX_CONNECTIONS } from "@common/src/constants.ts"
 import ConnectionForm from "../ui/connection-form.tsx"
 import EditForm from "../ui/edit-form.tsx"
 import RouteContainer from "../ui/route-container.tsx"
 import { Button } from "../ui/button.tsx"
 import { EmptyState } from "../ui/empty-state.tsx"
+import { SearchInput } from "../ui/search-input.tsx"
 import { Typography } from "../ui/typography.tsx"
 import type { ConnectionState } from "@/state/valkey-features/connection/connectionSlice.ts"
 import { selectConnections } from "@/state/valkey-features/connection/connectionSelectors.ts"
 import { ConnectionEntry } from "@/components/connection/ConnectionEntry.tsx"
 import { ClusterConnectionGroup } from "@/components/connection/ClusterConnectionGroup.tsx"
 
+const matchesSearch = (q: string, connection: ConnectionState) =>
+  connection.searchableText.includes(q)
+
 export function Connection() {
   const [showConnectionForm, setShowConnectionForm] = useState(false)
   const [showEditForm, setShowEditForm] = useState(false)
   const [editingConnectionId, setEditingConnectionId] = useState<string | undefined>(undefined)
+  const [searchQuery, setSearchQuery] = useState("")
   const connections = useSelector(selectConnections)
 
   const handleEditConnection = (connectionId: string) => {
@@ -51,16 +57,37 @@ export function Connection() {
     { clusterGroups: {}, standaloneConnections: [] },
   )
 
-  const hasClusterGroups = Object.keys(clusterGroups).length > 0
-  const hasStandaloneConnections = standaloneConnections.length > 0
   const hasConnectionsWithHistory = connectionsWithHistory.length > 0
 
+  // Filter by search query
+  const q = searchQuery.toLowerCase()
+  const filteredClusterGroups: typeof clusterGroups = {}
+  if (q) {
+    for (const [clusterId, conns] of Object.entries(clusterGroups)) {
+      const matched = conns.filter(({ connection }) => matchesSearch(q, connection))
+      if (matched.length > 0) filteredClusterGroups[clusterId] = matched
+    }
+  }
+  const filteredStandaloneConnections = q
+    ? standaloneConnections.filter(({ connection }) => matchesSearch(q, connection))
+    : standaloneConnections
+
+  const hasFilteredClusters = q ? Object.keys(filteredClusterGroups).length > 0 : Object.keys(clusterGroups).length > 0
+  const hasFilteredStandalone = q ? filteredStandaloneConnections.length > 0 : standaloneConnections.length > 0
+  const hasAnyResults = hasFilteredClusters || hasFilteredStandalone
+  const displayClusterGroups = q ? filteredClusterGroups : clusterGroups
+
+  const totalResults = filteredStandaloneConnections.length +
+    Object.values(displayClusterGroups).reduce((sum, conns) => sum + conns.length, 0)
+    
+  const highlight = q && totalResults < MAX_CONNECTIONS ? q : ""
+
   return (
     <RouteContainer title="connection">
       {/* top header */}
       <div className="flex items-center justify-between h-10">
         <Typography className="flex items-center gap-2" variant="heading">
-          <HousePlug size={20}/> Connections
+          <HousePlug size={20} /> Connections
         </Typography>
         {hasConnectionsWithHistory && (
           <Button
@@ -91,41 +118,59 @@ export function Connection() {
           title="You Have No Connections!"
         />
       ) : (
-        <div className="flex-1">
-          {/* for clusters */}
-          {hasClusterGroups && (
-            <div className="mb-8">
-              <Typography className="mb-2" variant="bodyLg">Clusters</Typography>
-              <div>
-                {Object.entries(clusterGroups).map(([clusterId, clusterConnections]) => (
-                  <ClusterConnectionGroup
-                    clusterId={clusterId}
-                    connections={clusterConnections}
-                    key={clusterId}
-                    onEdit={handleEditConnection}
-                  />
-                ))}
+        <>
+          {/* Search */}
+          <SearchInput
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onClear={() => setSearchQuery("")}
+            placeholder="Search connections by host, port, or alias..."
+            value={searchQuery}
+          />
+          <div className="flex-1 h-full border border-input rounded-md shadow-xs overflow-y-auto px-4 py-2">
+            {!hasAnyResults && q ? (
+              <div className="text-center py-8 text-muted-foreground min-h-40">
+                No connections match "{searchQuery}"
               </div>
-            </div>
-          )}
+            ) : (
+              <>
+                {/* for clusters */}
+                {hasFilteredClusters && (
+                  <div className="mb-8">
+                    <Typography className="mb-2" variant="bodyLg">Clusters</Typography>
+                    <div>
+                      {Object.entries(displayClusterGroups).map(([clusterId, clusterConnections]) => (
+                        <ClusterConnectionGroup
+                          clusterId={clusterId}
+                          connections={clusterConnections}
+                          highlight={highlight}
+                          key={clusterId}
+                          onEdit={handleEditConnection}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
 
-          {/* for standalone instances */}
-          {hasStandaloneConnections && (
-            <div>
-              <Typography className="mb-2" variant="bodyLg">Instances</Typography>
-              <div>
-                {standaloneConnections.map(({ connectionId, connection }) => (
-                  <ConnectionEntry
-                    connection={connection}
-                    connectionId={connectionId}
-                    key={connectionId}
-                    onEdit={handleEditConnection}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
+                {/* for standalone instances */}
+                {hasFilteredStandalone && (
+                  <div>
+                    <Typography className="mb-2" variant="bodyLg">Instances</Typography>
+                    <div>
+                      {filteredStandaloneConnections.map(({ connectionId, connection }) => (
+                        <ConnectionEntry
+                          connection={connection}
+                          connectionId={connectionId}
+                          highlight={highlight}
+                          key={connectionId}
+                          onEdit={handleEditConnection}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div></>
       )}
     </RouteContainer>
   )
diff --git a/apps/frontend/src/components/connection/ConnectionEntry.tsx b/apps/frontend/src/components/connection/ConnectionEntry.tsx
index f43ec366..c6532918 100644
--- a/apps/frontend/src/components/connection/ConnectionEntry.tsx
+++ b/apps/frontend/src/components/connection/ConnectionEntry.tsx
@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button.tsx"
 import { ConnectionStatusBadge } from "@/components/ui/connection-status-badge"
 import { ConnectionActionButtons } from "@/components/ui/connection-action-buttons.tsx"
 import { Typography } from "@/components/ui/typography.tsx"
+import { HighlightSearchMatch } from "@/components/ui/highlight-search-match"
 import { cn } from "@/lib/utils.ts"
 import history from "@/history.ts"
 import { useAppDispatch } from "@/hooks/hooks.ts"
@@ -21,6 +22,7 @@ interface ConnectionEntryProps {
   clusterId?: string
   hideOpenButton?: boolean
   isNested?: boolean
+  highlight?: string
   onEdit?: (connectionId: string) => void
 }
 
@@ -30,6 +32,7 @@ export const ConnectionEntry = ({
   clusterId,
   hideOpenButton = false,
   isNested = false,
+  highlight = "",
   onEdit,
 }: ConnectionEntryProps) => {
   const dispatch = useAppDispatch()
@@ -73,7 +76,7 @@ export const ConnectionEntry = ({
                   variant="link"
                 >
                   <Link title={label} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
-                    {label}
+                    <HighlightSearchMatch query={highlight} text={label} />
                   </Link>
                 </Button>
               </Typography>
@@ -114,7 +117,7 @@ export const ConnectionEntry = ({
                 variant="link"
               >
                 <Link title={aliasLabel} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
-                  {aliasLabel}
+                  <HighlightSearchMatch query={highlight} text={aliasLabel}/>
                 </Link>
               </Button>
             </Typography>
diff --git a/apps/frontend/src/components/ui/accordion.tsx b/apps/frontend/src/components/ui/accordion.tsx
index 89f3b594..5dc30cc1 100644
--- a/apps/frontend/src/components/ui/accordion.tsx
+++ b/apps/frontend/src/components/ui/accordion.tsx
@@ -96,7 +96,7 @@ export default function Accordion({ accordionName, accordionItems, valueType = "
                     {formatKey(key)}
                   </Typography>
                   {singleMetricDescriptions[key] && (
-                    <TooltipIcon description={`${singleMetricDescriptions[key].description} ${singleMetricDescriptions[key].unit}` } size={13} />
+                    <TooltipIcon description={singleMetricDescriptions[key].description} size={13} />
                   )}
                 </div>
                 <Typography variant="bodySm">{formatMetricValue(key, value, valueType)}</Typography>
diff --git a/apps/frontend/src/components/ui/app-header.tsx b/apps/frontend/src/components/ui/app-header.tsx
index 42a0351e..6a0ad4e4 100644
--- a/apps/frontend/src/components/ui/app-header.tsx
+++ b/apps/frontend/src/components/ui/app-header.tsx
@@ -1,9 +1,10 @@
 import { useNavigate, useParams } from "react-router"
 import { useSelector } from "react-redux"
 import { useState, useRef, useEffect, type ReactNode } from "react"
-import { CircleChevronDown, CircleChevronUp, Dot, CornerDownRight } from "lucide-react"
+import { CircleChevronDown, CircleChevronUp, Dot, CornerDownRight, Search } from "lucide-react"
 import { CONNECTED } from "@common/src/constants.ts"
 import { Badge } from "./badge"
+import { Input } from "./input"
 import { Typography } from "./typography"
 import type { RootState } from "@/store.ts"
 import { selectConnectionDetails } from "@/state/valkey-features/connection/connectionSelectors.ts"
@@ -18,6 +19,7 @@ type AppHeaderProps = {
 
 function AppHeader({ title, icon, className }: AppHeaderProps) {
   const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState("")
   const dropdownRef = useRef<HTMLDivElement>(null)
   const navigate = useNavigate()
   const { id, clusterId } = useParams<{ id: string; clusterId: string }>()
@@ -37,8 +39,14 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
   const handleNavigate = (primaryKey: string) => {
     navigate(`/${clusterId}/${primaryKey}/dashboard`)
     setIsOpen(false)
+    setSearch("")
   }
 
+  const filteredNodes = Object.entries(clusterData?.clusterNodes ?? {}).filter(([, primary]) => {
+    const term = search.toLowerCase()
+    return `${primary.host}:${primary.port}`.toLowerCase().includes(term)
+  })
+
   // for closing the dropdown when we click anywhere in screen
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -73,9 +81,13 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
             {icon}
             {title}
           </Typography>
-          <div>
+          <div ref={dropdownRef}>
             <Badge
-              className="h-5 w-auto text-nowrap px-2 py-4 flex items-center gap-2 justify-between cursor-pointer"
+              className={cn(
+                "h-5 w-auto text-nowrap px-2 py-4 flex items-center gap-2 justify-between",
+                isConnected ? "cursor-pointer" : "cursor-default",
+              )}
+              onClick={() => isConnected && setIsOpen(!isOpen)}
               variant="default"
             >
               <div className="flex flex-col gap-1">
@@ -87,21 +99,35 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
                   {id}
                 </Typography>
               </div>
-              <button aria-label="Toggle dropdown" disabled={!isConnected} onClick={() => isConnected && setIsOpen(!isOpen)}>
-                <ToggleIcon
-                  className={isConnected
-                    ? "text-primary cursor-pointer hover:text-primary/80"
-                    : "text-gray-400 cursor-not-allowed"
-                  }
-                  size={18}
-                />
-              </button>
+              <ToggleIcon
+                aria-label="Toggle dropdown"
+                className={isConnected
+                  ? "text-primary hover:text-primary/80"
+                  : "text-gray-400"
+                }
+                size={18}
+              />
             </Badge>
             {isOpen && (
               <div className="p-4 w-auto text-nowrap py-3 border bg-gray-50 dark:bg-gray-800 text-sm dark:border-tw-dark-border
-                rounded z-100 absolute top-10 right-0" ref={dropdownRef}>
+                rounded z-100 absolute top-10 right-0">
+                <div className="relative mb-3">
+                  <Search className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" size={14} />
+                  <Input
+                    autoFocus
+                    className="pl-7 h-7 text-xs"
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search by host or port"
+                    value={search}
+                  />
+                </div>
                 <ul className="space-y-2">
-                  {Object.entries(clusterData.clusterNodes).map(([primaryKey, primary]) => {
+                  {filteredNodes.length === 0 && (
+                    <li>
+                      <Typography className="text-muted-foreground" variant="caption">No nodes found</Typography>
+                    </li>
+                  )}
+                  {filteredNodes.map(([primaryKey, primary]) => {
                     const nodeIsConnected = allConnections?.[primaryKey]?.status === CONNECTED
 
                     return (
diff --git a/apps/frontend/src/components/ui/highlight-search-match.tsx b/apps/frontend/src/components/ui/highlight-search-match.tsx
new file mode 100644
index 00000000..592e7b7c
--- /dev/null
+++ b/apps/frontend/src/components/ui/highlight-search-match.tsx
@@ -0,0 +1,19 @@
+interface HighlightMatchProps {
+  text: string;
+  query: string;
+}
+
+export function HighlightSearchMatch({ text, query }: HighlightMatchProps) {
+  if (!query) return <span>{text}</span>
+  const idx = text.toLowerCase().indexOf(query.toLowerCase())
+  if (idx === -1) return <span>{text}</span>
+  return (
+    <span>
+      {text.slice(0, idx)}
+      <span className="bg-primary text-white">
+        {text.slice(idx, idx + query.length)}
+      </span>
+      {text.slice(idx + query.length)}
+    </span>
+  )
+}
diff --git a/apps/frontend/src/state/epics/valkeyEpics.ts b/apps/frontend/src/state/epics/valkeyEpics.ts
index 71dafce8..2a81a615 100644
--- a/apps/frontend/src/state/epics/valkeyEpics.ts
+++ b/apps/frontend/src/state/epics/valkeyEpics.ts
@@ -83,6 +83,7 @@ export const connectionEpic = (store: Store) =>
             connectionDetails: baseConnectionDetails,
             status: NOT_CONNECTED,
             connectionHistory: connection?.connectionHistory ?? [],
+            searchableText: connection?.searchableText ?? "",
           }
 
           currentConnections[payload.connectionId] = connectionToSave
@@ -291,6 +292,7 @@ export const updateConnectionDetailsEpic = (store: Store) =>
         if (connection && currentConnections[connectionId]) {
           currentConnections[connectionId].connectionDetails = connection.connectionDetails
           currentConnections[connectionId].connectionHistory = connection.connectionHistory || []
+          currentConnections[connectionId].searchableText = connection.searchableText ?? ""
           localStorage.setItem(LOCAL_STORAGE.VALKEY_CONNECTIONS, JSON.stringify(currentConnections))
         }
       } catch (e) {
diff --git a/apps/frontend/src/state/valkey-features/connection/connectionSlice.test.ts b/apps/frontend/src/state/valkey-features/connection/connectionSlice.test.ts
index 9e83ca9a..5dccba3c 100644
--- a/apps/frontend/src/state/valkey-features/connection/connectionSlice.test.ts
+++ b/apps/frontend/src/state/valkey-features/connection/connectionSlice.test.ts
@@ -48,13 +48,15 @@ describe("connectionSlice", () => {
           port: "6379",
           username: "admin",
           password: "secret",
-          tls: false, 
+          tls: false,
           verifyTlsCertificate: false,
           alias: "Test",
           clusterSlotStatsEnabled: false,
           jsonModuleAvailable: false,
         },
+        searchableText: "conn-1 localhost 6379 admin test",
         wasEdit: false,
+        connectionHistory: undefined,
       })
     })
 
diff --git a/apps/frontend/src/state/valkey-features/connection/connectionSlice.ts b/apps/frontend/src/state/valkey-features/connection/connectionSlice.ts
index 973c0a90..6e0eda13 100644
--- a/apps/frontend/src/state/valkey-features/connection/connectionSlice.ts
+++ b/apps/frontend/src/state/valkey-features/connection/connectionSlice.ts
@@ -50,6 +50,7 @@ export interface ConnectionState {
   status: ConnectionStatus;
   errorMessage: string | null;
   connectionDetails: ConnectionDetails;
+  searchableText: string;
   reconnect?: ReconnectState;
   connectionHistory?: ConnectionHistoryEntry[];
   wasEdit?: boolean;
@@ -59,9 +60,15 @@ export interface ValkeyConnectionsState {
   [connectionId: string]: ConnectionState
 }
 
+const buildSearchableText = (connectionId: string, details: ConnectionDetails) =>
+  [connectionId, details.host, details.port, details.username, details.alias]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+
 const currentConnections = R.pipe(
   (v: string) => localStorage.getItem(v),
-  (s) => (s === null ? {} : JSON.parse(s)),
+  (s) => (s === null ? {} : JSON.parse(s) as ValkeyConnectionsState),
 )(LOCAL_STORAGE.VALKEY_CONNECTIONS)
 
 const connectionSlice = createSlice({
@@ -97,7 +104,7 @@ const connectionSlice = createSlice({
           clusterSlotStatsEnabled: false,
           jsonModuleAvailable: false,
         },
-
+        searchableText: buildSearchableText(connectionId, connectionDetails),
         wasEdit: isEdit,
         ...(isRetry && existingConnection?.reconnect && {
           reconnect: existingConnection.reconnect,
@@ -225,10 +232,12 @@ const connectionSlice = createSlice({
     },
     updateConnectionDetails: (state, action) => {
       const { connectionId, ...details } = action.payload
-      state.connections[connectionId].connectionDetails = {
+      const merged = {
         ...state.connections[connectionId].connectionDetails,
         ...details,
       }
+      state.connections[connectionId].connectionDetails = merged
+      state.connections[connectionId].searchableText = buildSearchableText(connectionId, merged)
     },
     deleteConnection: (state, { payload: { connectionId } }) => {
       return R.dissocPath(["connections", connectionId], state)