diff --git a/nym-vpn-app/src/contexts/node-list-state/context.ts b/nym-vpn-app/src/contexts/node-list-state/context.ts
index f99c7728c9..e4847e6dd6 100644
--- a/nym-vpn-app/src/contexts/node-list-state/context.ts
+++ b/nym-vpn-app/src/contexts/node-list-state/context.ts
@@ -25,7 +25,7 @@ type State = {
     // country code
     value: string,
   ) => void;
-  setFocused: (hop: Hop, focused: Focused) => void;
+  setFocused: (hop: Hop, focused: Focused | null) => void;
   setSearch: (hop: Hop, search: string | null) => void;
   reset: (hop: Hop | 'all') => void;
 };
diff --git a/nym-vpn-app/src/contexts/node-list-state/provider.tsx b/nym-vpn-app/src/contexts/node-list-state/provider.tsx
index 9bec125717..e24751ee17 100644
--- a/nym-vpn-app/src/contexts/node-list-state/provider.tsx
+++ b/nym-vpn-app/src/contexts/node-list-state/provider.tsx
@@ -29,15 +29,15 @@ function NodeListPrevStateProvider({ children }: NodeListPrevStateProps) {
         return;
       }
       if (hop === 'entry') {
-        setEntryExpanded([...entryExpanded, value]);
+        setEntryExpanded((prev) => [...prev, value]);
       } else {
-        setExitExpanded([...exitExpanded, value]);
+        setExitExpanded((prev) => [...prev, value]);
       }
     },
     [entryExpanded, exitExpanded],
   );
 
-  const setFocused = useCallback((hop: Hop, focus: Focused) => {
+  const setFocused = useCallback((hop: Hop, focus: Focused | null) => {
     if (hop === 'entry') {
       setEntryFocused(focus);
     } else {
diff --git a/nym-vpn-app/src/screens/home/Home.tsx b/nym-vpn-app/src/screens/home/Home.tsx
index cd92c96ab2..ca3324b4b7 100644
--- a/nym-vpn-app/src/screens/home/Home.tsx
+++ b/nym-vpn-app/src/screens/home/Home.tsx
@@ -6,11 +6,19 @@ import { useNavigate } from 'react-router';
 import clsx from 'clsx';
 import { motion } from 'motion/react';
 import {
+  Focused,
+  useGateways,
   useMainDispatch,
   useMainState,
   useNodeListState,
 } from '../../contexts';
-import { BackendError, StateDispatch } from '../../types';
+import {
+  BackendError,
+  StateDispatch,
+  isCountry,
+  isGateway,
+  isRegion,
+} from '../../types';
 import { routes } from '../../router';
 import { Button } from '../../ui';
 import { capFirst } from '../../util';
@@ -20,7 +28,7 @@ import HopSelect from './HopSelect';
 import NetworkUpdateDialog from './NetworkUpdateDialog';
 import UpdateDialog from './UpdateDialog';
 import useStreamingOptimizedLabel from './useStreamingOptimizedLabel';
-import { setStreamOptimizedLabelSeen } from './util';
+import { regionToCountryCode, setStreamOptimizedLabelSeen } from './util';
 
 const updaterEnabled = window._APP.updaterEnabled;
 const devMode = window._APP.devMode;
@@ -42,7 +50,8 @@ function Home() {
     welcomeChecked,
   } = useMainState();
   const dispatch = useMainDispatch() as StateDispatch;
-  const { reset: resetNodeList } = useNodeListState();
+  const { setFocused, setSearch, setExpanded } = useNodeListState();
+  const { lookupGw } = useGateways();
   const navigate = useNavigate();
   const { t } = useTranslation('home');
   const loading = state === 'disconnecting';
@@ -167,11 +176,36 @@ function Home() {
   };
 
   const goToNodeList = (hop: 'entry' | 'exit') => {
+    const expanded: string[] = [];
+    let focused: Focused | null = null;
+    const node = hop === 'entry' ? entryNode : exitNode;
+
+    if (isCountry(node)) {
+      focused = { type: 'country', key: node.country.code };
+    } else if (isRegion(node)) {
+      const code = regionToCountryCode(node.region);
+      if (code) {
+        expanded.push(code.toUpperCase());
+        focused = { type: 'region', key: node.region };
+      }
+    } else if (isGateway(node)) {
+      focused = { type: 'gateway', key: node.gateway.id };
+      const gw = lookupGw(node.gateway.id, hop);
+      if (gw) {
+        expanded.push(gw.country.code.toUpperCase());
+        if (gw.country.code.toLowerCase() === 'us') {
+          expanded.push(gw.location.region);
+        }
+      }
+    }
+
+    setExpanded(hop, expanded);
+    setFocused(hop, focused);
+    setSearch(hop, null);
+
     if (hop === 'entry') {
-      resetNodeList('entry');
       navigate(routes.entryNodeLocation);
     } else {
-      resetNodeList('exit');
       navigate(routes.exitNodeLocation);
       setStreamOptimizedLabelSeen(dispatch);
     }
diff --git a/nym-vpn-app/src/screens/home/HopSelect.tsx b/nym-vpn-app/src/screens/home/HopSelect.tsx
index 6b5fac6e27..a0f304933a 100644
--- a/nym-vpn-app/src/screens/home/HopSelect.tsx
+++ b/nym-vpn-app/src/screens/home/HopSelect.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AnimatePresence, motion } from 'motion/react';
 import clsx from 'clsx';
 import { useNavigate } from 'react-router';
 import { Button } from '@headlessui/react';
@@ -12,13 +11,16 @@ import {
   isGateway,
   isRegion,
 } from '../../types';
-import { FlagIcon, MsIcon, countryCode } from '../../ui';
+import { MsIcon, countryCode } from '../../ui';
 import { useLang } from '../../hooks';
 import { useGateways, useMainState } from '../../contexts';
 import { countriesWithRegions } from '../../constants';
-import { QuicTag } from '../node';
 import { routes } from '../../router';
 import { isBridgeMode, regionToCountryCode, useActionToast } from './util';
+import {
+  SelectedNodeDisplay,
+  SelectedNodeDisplayProps,
+} from './SelectedNodeDisplay';
 
 type HopSelectProps = {
   node: SelectedNode;
@@ -28,15 +30,6 @@ type HopSelectProps = {
   disabled?: boolean;
 };
 
-type SelectedNodeProps = {
-  countryCode?: countryCode;
-  name: string;
-  subInfo?: string | null;
-  animate?: boolean;
-  quic?: boolean;
-  streamOptimized?: boolean;
-};
-
 export default function HopSelect({
   nodeHop,
   node,
@@ -67,22 +60,25 @@ export default function HopSelect({
   };
 
   const handleDetailsClick = () => {
-    if (disabled) {
-      toast();
-    } else if (isGateway(node) && gateway) {
-      navigate(routes.nodeDetails, {
-        state: { gateway, hop: nodeHop, resetScroll: true },
-      });
-    }
+    if (!gateway) return;
+
+    navigate(routes.nodeDetails, {
+      state: { gateway, hop: nodeHop, resetScroll: true },
+    });
   };
 
-  const nodeData = (selected: SelectedNode, gateway: Gateway | null) => {
+  const nodeData = (
+    selected: SelectedNode,
+    gateway: Gateway | null,
+  ): SelectedNodeDisplayProps => {
     if (selected === 'random') {
       return {
         name: t('fastest', { ns: 'common' }),
         animate: false,
-        quic: gateway?.quic,
-        streamOptimized: gateway?.asn?.type === 'residential',
+        showQuic: Boolean(quicTag && gateway?.quic),
+        showStreamOptimized:
+          nodeHop === 'exit' && gateway?.asn?.type === 'residential',
+        showFastest: node === 'random' && !gateway?.country?.code,
       };
     }
     if (isCountry(selected)) {
@@ -103,7 +99,7 @@ export default function HopSelect({
     countryCode: string,
     gateway: Gateway | null,
     region?: string,
-  ): SelectedNodeProps => {
+  ): SelectedNodeDisplayProps => {
     let location = getCountryName(countryCode) || countryCode;
     let subInfo = null;
     if (region && region.length > 0) {
@@ -125,15 +121,17 @@ export default function HopSelect({
       name: location,
       subInfo,
       animate: true,
-      quic: gateway?.quic,
-      streamOptimized: gateway?.asn?.type === 'residential',
+      showQuic: Boolean(quicTag && gateway?.quic),
+      showStreamOptimized:
+        nodeHop === 'exit' && gateway?.asn?.type === 'residential',
+      showFastest: node === 'random' && !gateway?.country?.code,
     };
   };
 
   const getGatewayInfo = (
     id: string,
     gateway: Gateway | null,
-  ): SelectedNodeProps => {
+  ): SelectedNodeDisplayProps => {
     if (!gateway) {
       return {
         name: id,
@@ -157,77 +155,13 @@ export default function HopSelect({
       countryCode: country.code.toLowerCase() as countryCode,
       name,
       subInfo: components.join(', '),
-      quic: gateway?.quic,
-      streamOptimized: gateway?.asn?.type === 'residential',
+      showQuic: Boolean(quicTag && gateway?.quic),
+      showStreamOptimized:
+        nodeHop === 'exit' && gateway?.asn?.type === 'residential',
+      showFastest: node === 'random' && !gateway?.country?.code,
     };
   };
 
-  const SelectedNode = ({
-    countryCode,
-    name,
-    subInfo,
-    animate,
-    quic,
-    streamOptimized,
-  }: SelectedNodeProps) => {
-    const showQuic = quicTag && quic;
-    const showStreamOptimized = nodeHop === 'exit' && streamOptimized;
-    const showFastest = node === 'random' && !countryCode;
-
-    return (
-      <div className="flex flex-row items-center gap-3 overflow-hidden w-full">
-        {countryCode && <FlagIcon code={countryCode} alt={countryCode} />}
-        {showFastest && (
-          <MsIcon
-            icon="electric_bolt"
-            className="text-2xl text-baltic-sea dark:text-white"
-          />
-        )}
-        <div className={clsx('flex flex-col items-start truncate')}>
-          <div
-            className={clsx([
-              'text-base truncate',
-              disabled && 'cursor-default',
-            ])}
-          >
-            {name}
-          </div>
-          {animate ? (
-            <AnimatePresence>
-              {subInfo && (
-                <motion.div
-                  initial={{ opacity: 0, x: '-1rem' }}
-                  exit={{ opacity: 0, x: '1rem' }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.2, ease: 'easeOut' }}
-                  className="text-sm text-iron dark:text-bombay truncate"
-                >
-                  {subInfo}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          ) : (
-            <>
-              {subInfo && (
-                <div className="text-sm text-iron dark:text-bombay truncate">
-                  {subInfo}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-        {(showQuic || showStreamOptimized) && (
-          <div className="flex items-center justify-end gap-3 flex-1 mr-1">
-            {showStreamOptimized && (
-              <MsIcon icon="smart_display" className="text-cornflower" />
-            )}
-            {showQuic && <QuicTag />}
-          </div>
-        )}
-      </div>
-    );
-  };
-
   const gateway = useMemo(() => {
     if (node === 'random') {
       return null;
@@ -269,9 +203,9 @@ export default function HopSelect({
         onClick={handleClick}
         onKeyDown={handleClick}
       >
-        <SelectedNode {...nodeData(node, gateway)} />
+        <SelectedNodeDisplay {...nodeData(node, gateway)} disabled={disabled} />
       </Button>
-      {isGateway(node) && (
+      {!!gateway && (
         <Button
           className={clsx(
             'h-11 w-11 my-2 mr-2 flex items-center justify-center rounded-full',
diff --git a/nym-vpn-app/src/screens/home/SelectedNodeDisplay.tsx b/nym-vpn-app/src/screens/home/SelectedNodeDisplay.tsx
new file mode 100644
index 0000000000..9f3df844d4
--- /dev/null
+++ b/nym-vpn-app/src/screens/home/SelectedNodeDisplay.tsx
@@ -0,0 +1,96 @@
+import { memo } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import clsx from 'clsx';
+import { FlagIcon, MsIcon, Skeleton, countryCode } from '../../ui';
+import { QuicTag } from '../node';
+
+export type SelectedNodeDisplayProps = {
+  countryCode?: countryCode;
+  name: string;
+  subInfo?: string | null;
+  animate?: boolean;
+  disabled?: boolean;
+  showQuic?: boolean;
+  showStreamOptimized?: boolean;
+  showFastest?: boolean;
+};
+
+export const SelectedNodeDisplay = memo<SelectedNodeDisplayProps>(
+  ({
+    countryCode,
+    name,
+    subInfo,
+    animate,
+    disabled,
+    showQuic,
+    showStreamOptimized,
+    showFastest,
+  }) => {
+    if (!countryCode && !showFastest) {
+      return (
+        <div className="flex flex-row items-center gap-3 overflow-hidden w-full">
+          <Skeleton className="w-7 h-7" rounded="full" />
+          <div className="flex flex-col items-start justify-center gap-1">
+            <Skeleton className="w-36 h-4" rounded />
+            <Skeleton className="w-36 h-3" rounded />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex flex-row items-center gap-3 overflow-hidden w-full">
+        {countryCode && <FlagIcon code={countryCode} alt={countryCode} />}
+        {showFastest && (
+          <MsIcon
+            icon="electric_bolt"
+            className="text-2xl text-baltic-sea dark:text-white"
+          />
+        )}
+        <div className={clsx('flex flex-col items-start truncate')}>
+          <div
+            className={clsx([
+              'text-base truncate',
+              disabled && 'cursor-default',
+            ])}
+          >
+            {name}
+          </div>
+          {animate ? (
+            <AnimatePresence>
+              {subInfo && (
+                <motion.div
+                  initial={{ opacity: 0, x: '-1rem' }}
+                  exit={{ opacity: 0, x: '1rem' }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                  className="text-sm text-iron dark:text-bombay truncate"
+                >
+                  {subInfo}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          ) : (
+            <>
+              {subInfo && (
+                <div className="text-sm text-iron dark:text-bombay truncate">
+                  {subInfo}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+        {(showQuic || showStreamOptimized) && (
+          <div className="flex items-center justify-end gap-3 flex-1 mr-1">
+            {showStreamOptimized && (
+              <MsIcon icon="smart_display" className="text-cornflower" />
+            )}
+            {showQuic && <QuicTag />}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+SelectedNodeDisplay.displayName = 'SelectedNodeDisplay';
diff --git a/nym-vpn-app/src/screens/node/Node.tsx b/nym-vpn-app/src/screens/node/Node.tsx
index e5100fbd89..97a0d89dc3 100644
--- a/nym-vpn-app/src/screens/node/Node.tsx
+++ b/nym-vpn-app/src/screens/node/Node.tsx
@@ -12,18 +12,11 @@ import {
   useNodeList,
   useNodeListState,
 } from '../../contexts';
-import {
-  NodeHop,
-  StateDispatch,
-  isCountry,
-  isGateway,
-  isRegion,
-} from '../../types';
+import { NodeHop, StateDispatch, isGateway } from '../../types';
 import { Link, PageAnim, TextInput } from '../../ui';
 import { uiNodeToSelectedNode } from '../../contexts/node-list/util';
 import { useI18nError } from '../../hooks';
 import { routes } from '../../router';
-import { regionToCountryCode } from '../home/util';
 import { LocationDetailsDialog } from './location-details-dialog';
 import { NodeList, useFilterList } from './list';
 
@@ -48,8 +41,6 @@ function Node({ node }: { node: NodeHop }) {
   const search = node === 'entry' ? entryNodeList.search : exitNodeList.search;
 
   const { tE } = useI18nError();
-  const { entryNode, exitNode } = useMainState();
-  const selectedNode = node === 'entry' ? entryNode : exitNode;
 
   const quicFilter =
     vpnMode === 'wg' && node === 'entry' && backendFlags.quic && quic;
@@ -66,25 +57,6 @@ function Node({ node }: { node: NodeHop }) {
     if (searchRef.current) searchRef.current.focus();
   }, []);
 
-  useEffect(() => {
-    // if there's already a focused node, don't do anything
-    // when navigating to node details new focused is set
-    if (focused) {
-      return;
-    }
-    if (isCountry(selectedNode)) {
-      setFocused(node, { type: 'country', key: selectedNode.country.code });
-    }
-    if (isRegion(selectedNode)) {
-      const code = regionToCountryCode(selectedNode.region);
-      if (code) {
-        addToExpanded(node, code);
-        setFocused(node, { type: 'region', key: selectedNode.region });
-      }
-    }
-    // TODO handle US regions auto-expand and focus
-  }, [selectedNode, node, addToExpanded, setFocused, focused]);
-
   const handleSelect = async (selected: SelectedUiNode) => {
     const selectedNode = uiNodeToSelectedNode(selected);
     if (
@@ -133,7 +105,7 @@ function Node({ node }: { node: NodeHop }) {
         data-testid="node-error-container"
       >
         <div
-          className="w-4/5 h-2/3 overflow-auto break-words text-center"
+          className="w-4/5 h-2/3 overflow-auto wrap-break-word text-center"
           data-testid="node-error-message"
         >
           <p
diff --git a/nym-vpn-app/src/screens/node/details/NodeDetails.tsx b/nym-vpn-app/src/screens/node/details/NodeDetails.tsx
index f3a70b8370..39a7d8ea00 100644
--- a/nym-vpn-app/src/screens/node/details/NodeDetails.tsx
+++ b/nym-vpn-app/src/screens/node/details/NodeDetails.tsx
@@ -27,7 +27,7 @@ import {
   NetworkExplorerNodeUrl,
   SupportServerLocationUrl,
 } from '../../../constants';
-import { uiNodeToSelectedNode } from '../../../contexts/node-list/util';
+import { isSelectedNodeType } from '../../../contexts/node-list/util';
 import { routes } from '../../../router';
 import { ScoreIndicator } from '../ScoreIndicator';
 import DataCard from './DataCard';
@@ -38,7 +38,7 @@ type RouteState = {
 };
 
 function NodeDetails() {
-  const { backendFlags } = useMainState();
+  const { backendFlags, entryNode, exitNode } = useMainState();
   const dispatch = useMainDispatch() as StateDispatch;
   const location = useLocation() as H.Location<RouteState>;
   const { t } = useTranslation('nodeLocation');
@@ -65,8 +65,8 @@ function NodeDetails() {
   const asnValue = asn?.asn;
   const asnName = asn?.name;
   const showCard3 = exitIpv4 || exitIpv6 || asnValue || asnName;
-  const isSelected =
-    gateway.isSelected === 'exit' || gateway.isSelected === 'entry';
+  const selectedNode = isSelectedNodeType(gateway, entryNode, exitNode);
+  const isSelected = selectedNode === 'exit' || selectedNode === 'entry';
   const quic = backendFlags.quic && gateway.quic;
 
   const DataRow = ({
@@ -152,10 +152,9 @@ function NodeDetails() {
   );
 
   const handleSelect = async () => {
-    if (isSelected) {
-      return;
-    }
-    const node = uiNodeToSelectedNode(gateway);
+    if (isSelected) return;
+
+    const node = { gateway: { id: gateway.id } };
     try {
       await invoke('set_node', {
         node,
diff --git a/nym-vpn-app/src/screens/node/list/GatewayItem.tsx b/nym-vpn-app/src/screens/node/list/GatewayItem.tsx
index ebff9d1773..a610f9ede0 100644
--- a/nym-vpn-app/src/screens/node/list/GatewayItem.tsx
+++ b/nym-vpn-app/src/screens/node/list/GatewayItem.tsx
@@ -1,6 +1,7 @@
+import { useCallback } from 'react';
 import { Button } from '@headlessui/react';
 import clsx from 'clsx';
-import { UiGateway } from '../../../contexts';
+import { UiGateway, useNodeListState } from '../../../contexts';
 import { MsIcon } from '../../../ui';
 import { NodeHop, VpnMode } from '../../../types';
 import { useLang } from '../../../hooks';
@@ -9,7 +10,6 @@ import QuicTag from '../QuicTag';
 import { ScoreIndicator } from '../ScoreIndicator';
 
 type GatewayRowProps = {
-  ref?: React.Ref<HTMLDivElement>;
   gateway: UiGateway;
   onSelect: (gateway: UiGateway) => void;
   onNodeDetails: (node: UiGateway) => void;
@@ -20,7 +20,6 @@ type GatewayRowProps = {
 };
 
 const GatewayItem = ({
-  ref,
   gateway,
   node,
   vpnMode,
@@ -29,6 +28,10 @@ const GatewayItem = ({
   quicLabel,
   inSearchResult,
 }: GatewayRowProps) => {
+  const { exit: exitNodeList, entry: entryNodeList } = useNodeListState();
+  const focused =
+    node === 'entry' ? entryNodeList.focused : exitNodeList.focused;
+
   const { isSelected } = gateway;
   const score = vpnMode === 'mixnet' ? gateway.mxScore : gateway.wgScore;
   const { getCountryName } = useLang();
@@ -54,9 +57,23 @@ const GatewayItem = ({
     return gateway.location.city;
   };
 
+  const scrollToGatewayRef = useCallback(
+    (htmlElement: HTMLDivElement) => {
+      if (!htmlElement || inSearchResult) return;
+      if (focused?.type === 'gateway' && focused.key === gateway.id) {
+        htmlElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center',
+        });
+      }
+    },
+    [focused, gateway.id, inSearchResult],
+  );
+
   return (
     <div
-      ref={ref}
+      ref={scrollToGatewayRef}
       className={clsx(
         'flex flex-row justify-between items-center select-none',
         'hover:bg-mercury hover:dark:bg-mine-shaft',
diff --git a/nym-vpn-app/src/screens/node/list/NodeItem.tsx b/nym-vpn-app/src/screens/node/list/NodeItem.tsx
new file mode 100644
index 0000000000..3bee607539
--- /dev/null
+++ b/nym-vpn-app/src/screens/node/list/NodeItem.tsx
@@ -0,0 +1,115 @@
+import { memo } from 'react';
+import { Accordion } from '@base-ui-components/react';
+import {
+  SelectedKind,
+  SelectedUiNode,
+  UiCountry,
+  UiGateway,
+  UiGatewaysByCountry,
+  UiRegion,
+} from '../../../contexts';
+import { NodeHop, VpnMode } from '../../../types';
+import GatewayItem from './GatewayItem';
+import RowHeader from './RowHeader';
+import { PanelContent } from './NodeListPanelContent';
+
+export const NodeItem = memo(function NodeItem({
+  node,
+  hop,
+  vpnMode,
+  quicFilter,
+  handleLocationSelect,
+  onGatewaySelect,
+  onNodeDetails,
+}: {
+  node: UiGatewaysByCountry;
+  hop: NodeHop;
+  vpnMode: VpnMode;
+  quicFilter: boolean;
+  handleLocationSelect: (
+    location: UiCountry | UiRegion,
+    isSelected: SelectedKind,
+    gwCount: number,
+  ) => void;
+  onGatewaySelect: (node: SelectedUiNode) => void;
+  onNodeDetails: (gateway: UiGateway) => void;
+}) {
+  const { i18n, isSelected, gateways, country, regions } = node;
+
+  return (
+    <>
+      <RowHeader
+        hop={hop}
+        isSelected={isSelected}
+        node={country}
+        i18n={i18n}
+        onClick={() =>
+          handleLocationSelect(country, isSelected, gateways.length)
+        }
+        gwCount={gateways.length}
+      />
+      <Accordion.Panel
+        data-testid={`country-accordion-content-${country.code}`}
+        className="w-full flex flex-col gap-3"
+      >
+        {country.code.toLowerCase() === 'us' ? (
+          regions.map((region) => (
+            <Accordion.Item
+              className="first:pt-3"
+              key={region.name}
+              value={region.name}
+              render={() => (
+                <>
+                  <RowHeader
+                    hop={hop}
+                    isSelected={region.isSelected}
+                    node={region}
+                    i18n={i18n}
+                    onClick={() => {
+                      handleLocationSelect(
+                        region,
+                        region.isSelected,
+                        region.gateways.length,
+                      );
+                    }}
+                    gwCount={region.gateways.length}
+                    sub
+                  />
+                  <Accordion.Panel>
+                    <PanelContent>
+                      {region.gateways.map((gateway) => (
+                        <GatewayItem
+                          key={gateway.id}
+                          node={hop}
+                          gateway={gateway}
+                          vpnMode={vpnMode}
+                          quicLabel={quicFilter}
+                          onSelect={onGatewaySelect}
+                          onNodeDetails={onNodeDetails}
+                        />
+                      ))}
+                    </PanelContent>
+                  </Accordion.Panel>
+                </>
+              )}
+            ></Accordion.Item>
+          ))
+        ) : (
+          <PanelContent>
+            {gateways.map((gateway) => (
+              <GatewayItem
+                key={gateway.id}
+                node={hop}
+                gateway={gateway}
+                onSelect={onGatewaySelect}
+                onNodeDetails={onNodeDetails}
+                vpnMode={vpnMode}
+                quicLabel={quicFilter}
+              />
+            ))}
+          </PanelContent>
+        )}
+      </Accordion.Panel>
+    </>
+  );
+});
diff --git a/nym-vpn-app/src/screens/node/list/NodeList.tsx b/nym-vpn-app/src/screens/node/list/NodeList.tsx
index 5508d4f017..bfae956013 100644
--- a/nym-vpn-app/src/screens/node/list/NodeList.tsx
+++ b/nym-vpn-app/src/screens/node/list/NodeList.tsx
@@ -1,8 +1,7 @@
-import { ReactNode, memo, useCallback, useEffect, useRef } from 'react';
+import { memo } from 'react';
 import { dequal } from 'dequal';
 import { Accordion } from '@base-ui-components/react';
 import { useTranslation } from 'react-i18next';
-import { motion } from 'motion/react';
 import {
   Focused,
   SelectedKind,
@@ -15,8 +14,9 @@ import {
   useNodeListState,
 } from '../../../contexts';
 import { NodeHop, VpnMode } from '../../../types';
+import { NodeItem } from './NodeItem';
 import GatewayItem from './GatewayItem';
-import RowHeader from './RowHeader';
+import { PanelContent } from './NodeListPanelContent';
 
 export type NodeListProps = {
   nodes: UiGatewaysByCountry[];
@@ -37,68 +37,14 @@ const NodeList = memo(function NodeList({
   vpnMode,
   onNodeDetails,
   expanded,
-  focused,
 }: NodeListProps) {
   const { backendFlags, quic } = useMainState();
   const { setExpanded } = useNodeListState();
   const { t } = useTranslation('nodeLocation');
 
-  const countriesRef = useRef<Map<string, HTMLDivElement>>(null);
-  const regionsRef = useRef<Map<string, HTMLDivElement>>(null);
-  const gatewaysRef = useRef<Map<string, HTMLDivElement>>(null);
   const quicFilter =
     vpnMode === 'wg' && hop === 'entry' && backendFlags.quic && quic;
 
-  const getMap = (type: 'country' | 'region' | 'gateway') => {
-    if (type === 'country') {
-      if (!countriesRef.current) {
-        countriesRef.current = new Map();
-      }
-      return countriesRef.current;
-    }
-    if (type === 'region') {
-      if (!regionsRef.current) {
-        regionsRef.current = new Map();
-      }
-      return regionsRef.current;
-    }
-    if (type === 'gateway') {
-      if (!gatewaysRef.current) {
-        gatewaysRef.current = new Map();
-      }
-      return gatewaysRef.current;
-    }
-  };
-
-  const setRef = (
-    type: 'country' | 'region' | 'gateway',
-    key: string,
-    node: HTMLDivElement | null,
-  ) => {
-    if (!node) {
-      return;
-    }
-    const map = getMap(type);
-    map?.set(key, node);
-
-    return () => {
-      map?.delete(key);
-    };
-  };
-
-  const scrollToNode = useCallback(
-    (type: 'country' | 'region' | 'gateway', key: string) => {
-      const map = getMap(type);
-      const node = map?.get(key);
-      node?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center',
-      });
-    },
-    [],
-  );
-
   const handleLocationSelect = (
     location: UiCountry | UiRegion,
     isSelected: SelectedKind,
@@ -118,36 +64,8 @@ const NodeList = memo(function NodeList({
     setExpanded(hop, value);
   };
 
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
-    if (focused) {
-      timeoutId = setTimeout(() => {
-        scrollToNode(focused.type, focused.key);
-      }, 100);
-    }
-
-    return () => clearTimeout(timeoutId);
-  }, [focused, scrollToNode]);
-
-  const PanelContent = ({
-    children,
-    animate = false,
-  }: {
-    children: ReactNode;
-    animate?: boolean;
-  }) => (
-    <motion.div
-      initial={animate && { opacity: 0, translateY: -4 }}
-      animate={animate && { opacity: 1, translateY: 0 }}
-      transition={animate ? { duration: 0.1, ease: 'easeIn' } : undefined}
-      className="flex flex-col gap-2"
-    >
-      {children}
-    </motion.div>
-  );
-
   return (
-    <>
+    <div className="mr-0">
       <Accordion.Root
         className="w-full flex flex-col gap-3"
         data-testid="node-list-accordion"
@@ -155,86 +73,23 @@ const NodeList = memo(function NodeList({
         onValueChange={onValueChange}
         multiple
       >
-        {nodes.map(({ i18n, isSelected, gateways, country, regions }) => (
+        {nodes.map((node) => (
           <Accordion.Item
-            key={country.code}
-            value={country.code}
-            ref={(node) => setRef('country', country.code, node)}
-            data-testid={`country-accordion-item-${country.code}`}
-          >
-            <RowHeader
-              hop={hop}
-              isSelected={isSelected}
-              node={country}
-              i18n={i18n}
-              onClick={() =>
-                handleLocationSelect(country, isSelected, gateways.length)
-              }
-              gwCount={gateways.length}
-            />
-            <Accordion.Panel
-              data-testid={`country-accordion-content-${country.code}`}
-              className="w-full flex flex-col gap-3"
-            >
-              {country.code.toLowerCase() === 'us' ? (
-                regions.map((region) => (
-                  <Accordion.Item
-                    className="first:pt-3"
-                    key={region.name}
-                    value={region.name}
-                    ref={(node) => setRef('region', region.name, node)}
-                  >
-                    <RowHeader
-                      hop={hop}
-                      isSelected={region.isSelected}
-                      node={region}
-                      i18n={i18n}
-                      onClick={() => {
-                        handleLocationSelect(
-                          region,
-                          region.isSelected,
-                          region.gateways.length,
-                        );
-                      }}
-                      gwCount={region.gateways.length}
-                      sub
-                    />
-                    <Accordion.Panel>
-                      <PanelContent>
-                        {region.gateways.map((gateway) => (
-                          <GatewayItem
-                            key={gateway.id}
-                            ref={(node) => setRef('gateway', gateway.id, node)}
-                            node={hop}
-                            gateway={gateway}
-                            onSelect={onSelect}
-                            onNodeDetails={onNodeDetails}
-                            vpnMode={vpnMode}
-                            quicLabel={quicFilter}
-                          />
-                        ))}
-                      </PanelContent>
-                    </Accordion.Panel>
-                  </Accordion.Item>
-                ))
-              ) : (
-                <PanelContent>
-                  {gateways.map((gateway) => (
-                    <GatewayItem
-                      key={gateway.id}
-                      ref={(node) => setRef('gateway', gateway.id, node)}
-                      node={hop}
-                      gateway={gateway}
-                      onSelect={onSelect}
-                      onNodeDetails={onNodeDetails}
-                      vpnMode={vpnMode}
-                      quicLabel={quicFilter}
-                    />
-                  ))}
-                </PanelContent>
-              )}
-            </Accordion.Panel>
-          </Accordion.Item>
+            key={node.country.code}
+            value={node.country.code}
+            render={() => (
+              <NodeItem
+                key={node.country.code}
+                node={node}
+                hop={hop}
+                vpnMode={vpnMode}
+                quicFilter={quicFilter}
+                handleLocationSelect={handleLocationSelect}
+                onGatewaySelect={onSelect}
+                onNodeDetails={onNodeDetails}
+              />
+            )}
+          ></Accordion.Item>
         ))}
       </Accordion.Root>
       {gateways.length > 0 && (
@@ -243,28 +98,21 @@ const NodeList = memo(function NodeList({
             {t('search-other-nodes')}
           </h3>
           {gateways.map((gateway) => (
-            <motion.div
-              key={gateway.id}
-              initial={{ opacity: 0, translateX: -4 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              transition={{ duration: 0.1, ease: 'easeOut' }}
-              className="flex flex-col gap-2"
-              data-testid={`standalone-gateway-${gateway.id.substring(0, 8)}`}
-            >
+            <PanelContent animate key={gateway.id}>
               <GatewayItem
                 node={hop}
                 gateway={gateway}
                 onSelect={onSelect}
-                vpnMode={vpnMode}
                 onNodeDetails={onNodeDetails}
+                vpnMode={vpnMode}
                 quicLabel={quicFilter}
                 inSearchResult
               />
-            </motion.div>
+            </PanelContent>
           ))}
         </div>
       )}
-    </>
+    </div>
   );
 }, arePropsEqual);
 
diff --git a/nym-vpn-app/src/screens/node/list/NodeListPanelContent.tsx b/nym-vpn-app/src/screens/node/list/NodeListPanelContent.tsx
new file mode 100644
index 0000000000..0befa1d0bc
--- /dev/null
+++ b/nym-vpn-app/src/screens/node/list/NodeListPanelContent.tsx
@@ -0,0 +1,21 @@
+import { motion } from 'motion/react';
+import { ReactNode } from 'react';
+
+export const PanelContent = ({
+  children,
+  animate = false,
+}: {
+  children: ReactNode;
+  animate?: boolean;
+}) => {
+  return (
+    <motion.div
+      initial={animate && { opacity: 0, translateY: -4 }}
+      animate={animate && { opacity: 1, translateY: 0 }}
+      transition={animate ? { duration: 0.1, ease: 'easeIn' } : undefined}
+      className="flex flex-col gap-2"
+    >
+      {children}
+    </motion.div>
+  );
+};
diff --git a/nym-vpn-app/src/screens/node/list/RowHeader.tsx b/nym-vpn-app/src/screens/node/list/RowHeader.tsx
index 97c261297e..1c42c44bcd 100644
--- a/nym-vpn-app/src/screens/node/list/RowHeader.tsx
+++ b/nym-vpn-app/src/screens/node/list/RowHeader.tsx
@@ -1,6 +1,12 @@
+import { useCallback } from 'react';
 import clsx from 'clsx';
 import { Accordion } from '@base-ui-components/react';
-import { SelectedKind, UiCountry, UiRegion } from '../../../contexts';
+import {
+  SelectedKind,
+  UiCountry,
+  UiRegion,
+  useNodeListState,
+} from '../../../contexts';
 import LocationInfo from './LocationInfo';
 import FoldButton from './FoldButton';
 
@@ -23,8 +29,33 @@ function RowHeader({
   i18n,
   sub,
 }: RowHeaderProps) {
+  const { exit: exitNodeList, entry: entryNodeList } = useNodeListState();
+
+  const focused =
+    hop === 'entry' ? entryNodeList.focused : exitNodeList.focused;
+
+  const scrollToRowRef = useCallback(
+    (htmlElement: HTMLDivElement) => {
+      if (!htmlElement) return;
+      const isFocused =
+        focused?.type === node.nodeType &&
+        ((node.nodeType === 'country' && focused.key === node.code) ||
+          (node.nodeType === 'region' && focused.key === node.name));
+
+      if (isFocused) {
+        htmlElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center',
+        });
+      }
+    },
+    [focused, node],
+  );
+
   return (
     <div
+      ref={scrollToRowRef}
       className={clsx(
         'flex flex-row justify-between rounded-r-lg',
         !sub
diff --git a/nym-vpn-app/src/screens/node/list/useFilterList.ts b/nym-vpn-app/src/screens/node/list/useFilterList.ts
index c32f6f3a7b..ccf1e1dc99 100644
--- a/nym-vpn-app/src/screens/node/list/useFilterList.ts
+++ b/nym-vpn-app/src/screens/node/list/useFilterList.ts
@@ -11,7 +11,8 @@ import { sortByScore } from './util';
 
 export function useFilterList(hop: NodeHop) {
   const { nodes, gateways, vpnMode } = useNodeList();
-  const { addToExpanded, setExpanded, entry, exit } = useNodeListState();
+  const { addToExpanded, setExpanded, entry, exit, setFocused } =
+    useNodeListState();
   const search = hop === 'entry' ? entry.search : exit.search;
 
   const [filteredNodes, setFilteredNodes] =
@@ -25,6 +26,7 @@ export function useFilterList(hop: NodeHop) {
         setFilteredNodes(nodes);
         setFilteredGateways([]);
         setExpanded(hop, []);
+        setFocused(hop, null);
         return;
       }
 
@@ -68,7 +70,7 @@ export function useFilterList(hop: NodeHop) {
       setFilteredNodes(filteredNodes);
       setFilteredGateways(filteredGw);
     },
-    [gateways, nodes, vpnMode, addToExpanded, setExpanded, hop],
+    [gateways, nodes, vpnMode, addToExpanded, setExpanded, setFocused, hop],
   );
 
   // refresh the UI list whenever the backend gateway data changes
diff --git a/nym-vpn-app/src/ui/Skeleton.tsx b/nym-vpn-app/src/ui/Skeleton.tsx
new file mode 100644
index 0000000000..0585d0c8ed
--- /dev/null
+++ b/nym-vpn-app/src/ui/Skeleton.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+
+export type SkeletonProps = {
+  className?: string;
+  rounded?: boolean | 'full';
+};
+
+function Skeleton({ className, rounded = true }: SkeletonProps) {
+  const getRoundedClass = () => {
+    if (rounded === false) return '';
+    if (rounded === 'full') return 'rounded-full';
+    return 'rounded';
+  };
+
+  return (
+    <div
+      className={clsx([
+        'animate-pulse',
+        'bg-iron dark:bg-bombay',
+        getRoundedClass(),
+        className,
+      ])}
+    />
+  );
+}
+
+export default Skeleton;
diff --git a/nym-vpn-app/src/ui/index.ts b/nym-vpn-app/src/ui/index.ts
index 95dfa3007f..dc62002f1d 100644
--- a/nym-vpn-app/src/ui/index.ts
+++ b/nym-vpn-app/src/ui/index.ts
@@ -21,6 +21,7 @@ export { default as Notifications } from './Notifications';
 export { default as Link } from './Link';
 export { default as Progress } from './Progress';
 export { default as PulseDot } from './PulseDot';
+export { default as Skeleton } from './Skeleton';
 export { default as Toast } from './Toast';
 export * from './Button';
 export * from './ButtonIcon';