diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 47a71b295..70662d9f2 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -709,6 +709,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
index 0d8bd5ea3..989a058aa 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
@@ -1,15 +1,16 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import SearchBarComponent from "@/components/core/parameterRenderComponent/components/searchBarComponent";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog-with-no-close";
 import { cn } from "@/utils/utils";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // Update interface with better types
 interface ListSelectionComponentProps {
   open: boolean;
-  options: any[];
   onClose: () => void;
+  options: any[];
   setSelectedList: (action: any[]) => void;
   selectedList: any[];
   searchCategories?: string[];
@@ -22,41 +23,99 @@ const ListItem = ({
   isSelected,
   onClick,
   className,
+  onMouseEnter,
+  onMouseLeave,
+  isFocused,
+  isKeyboardNavActive,
 }: {
   item: any;
   isSelected: boolean;
   onClick: () => void;
   className?: string;
-}) => (
-  <Button
-    key={item.id}
-    unstyled
-    size="sm"
-    className={cn("w-full rounded-md py-3 pl-3 pr-3 hover:bg-muted", className)}
-    onClick={onClick}
-  >
-    <div className="flex items-center gap-2">
-      {item.icon && (
-        <ForwardedIconComponent name={item.icon} className="h-5 w-5" />
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  isFocused: boolean;
+  isKeyboardNavActive: boolean;
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const itemRef = useRef<HTMLButtonElement>(null);
+
+  // Clear hover state when keyboard navigation is active
+  useEffect(() => {
+    if (isKeyboardNavActive) {
+      setIsHovered(false);
+    }
+  }, [isKeyboardNavActive]);
+
+  // Scroll into view when focused by keyboard
+  useEffect(() => {
+    if (isFocused && itemRef.current) {
+      itemRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isFocused]);
+
+  return (
+    <Button
+      ref={itemRef}
+      key={item.id}
+      unstyled
+      size="sm"
+      className={cn(
+        "group w-full rounded-md py-3 pl-3 pr-3",
+        !isKeyboardNavActive && "hover:bg-muted", // Only apply hover styles when not in keyboard nav
+        isFocused && "bg-muted",
+        className,
       )}
-      <span className="truncate font-semibold">{item.name}</span>
-      {"metaData" in item && item.metaData && (
-        <span className="text-gray-500">{item.metaData}</span>
-      )}
-      {isSelected ? (
-        <ForwardedIconComponent
-          name="check"
-          className={cn(
-            "ml-auto flex h-4 w-4",
-            item.link === "validated" && "text-green-500",
-          )}
-        />
-      ) : (
-        <span className="ml-auto flex h-4 w-4" />
-      )}
-    </div>
-  </Button>
-);
+      onClick={onClick}
+      onMouseEnter={() => {
+        if (!isKeyboardNavActive) {
+          setIsHovered(true);
+          onMouseEnter();
+        }
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        onMouseLeave();
+      }}
+      // Disable pointer events during keyboard navigation
+      style={{ pointerEvents: isKeyboardNavActive ? "none" : "auto" }}
+    >
+      <div className="flex w-full items-center gap-2">
+        {item.icon && (
+          <ForwardedIconComponent name={item.icon} className="h-5 w-5" />
+        )}
+        <div className="truncate text-sm">{item.name}</div>
+        {"metaData" in item && item.metaData && (
+          <div className="text-gray-500">{item.metaData}</div>
+        )}
+        {isHovered || isFocused ? (
+          <div className="ml-auto flex items-center justify-start rounded-md">
+            <div className="flex items-center pr-1.5 text-sm text-muted-foreground">
+              Select
+            </div>
+            <div className="flex items-center justify-center rounded-md bg-border p-1">
+              <ForwardedIconComponent
+                name="corner-down-left"
+                className="h-3 w-3 text-muted-foreground"
+              />
+            </div>
+          </div>
+        ) : (
+          // Always show the check icon when selected, regardless of hover/focus state
+          isSelected && (
+            <ForwardedIconComponent
+              name="check"
+              className={cn(
+                "ml-auto flex h-4 w-4",
+                item.link === "validated" && "text-green-500",
+              )}
+            />
+          )
+        )}
+      </div>
+    </Button>
+  );
+};
 
 const ListSelectionComponent = ({
   open,
@@ -69,6 +128,10 @@ const ListSelectionComponent = ({
   limit = 1,
 }: ListSelectionComponentProps) => {
   const [search, setSearch] = useState("");
+  const [hoveredItem, setHoveredItem] = useState<any | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = useState(false);
+  const listContainerRef = useRef<HTMLDivElement>(null);
 
   const filteredList = useMemo(() => {
     if (!search.trim()) {
@@ -110,19 +173,96 @@ const ListSelectionComponent = ({
           },
         ]);
         onClose();
-        setSearch("");
       }
     },
-    [selectedList, setSelectedList, onClose, limit],
+    [selectedList, setSelectedList, limit, onClose],
   );
 
-  const handleCloseDialog = useCallback(() => {
-    onClose();
-  }, [onClose]);
+  // Reset focus state when filtered list changes
+  useEffect(() => {
+    if (open) {
+      if (filteredList.length > 0) {
+        setFocusedIndex(0);
+        setHoveredItem(filteredList[0]);
+      } else {
+        setFocusedIndex(-1);
+        setHoveredItem(null);
+      }
+    }
+  }, [open, filteredList.length]);
+
+  // Reset search when dialog opens
+  useEffect(() => {
+    if (open) {
+      setSearch("");
+      setIsKeyboardNavActive(false);
+    }
+  }, [open]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (filteredList.length === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setIsKeyboardNavActive(true);
+          setFocusedIndex((prev) => {
+            const newIndex = prev < filteredList.length - 1 ? prev + 1 : 0;
+            setHoveredItem(filteredList[newIndex]);
+            return newIndex;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setIsKeyboardNavActive(true);
+          setFocusedIndex((prev) => {
+            const newIndex = prev > 0 ? prev - 1 : filteredList.length - 1;
+            setHoveredItem(filteredList[newIndex]);
+            return newIndex;
+          });
+          break;
+        case "Enter":
+          if (hoveredItem) {
+            e.preventDefault();
+            handleSelectAction(hoveredItem);
+            if (onSelection) {
+              onSelection(hoveredItem);
+            }
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    },
+    [filteredList, hoveredItem, handleSelectAction, onSelection, onClose],
+  );
+
+  // Detect mouse movement to switch from keyboard to mouse navigation
+  useEffect(() => {
+    const handleMouseMove = () => {
+      if (isKeyboardNavActive) {
+        setIsKeyboardNavActive(false);
+      }
+    };
+
+    if (open) {
+      window.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+      };
+    }
+  }, [open, isKeyboardNavActive]);
 
   return (
-    <Dialog open={open} onOpenChange={handleCloseDialog}>
-      <DialogContent className="flex !w-auto w-fit min-w-[20vw] max-w-[50vw] flex-col">
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent
+        className="flex max-h-[65vh] min-h-[15vh] flex-col rounded-xl"
+        onKeyDown={handleKeyDown}
+      >
         <div className="flex items-center justify-between">
           <SearchBarComponent
             searchCategories={searchCategories}
@@ -133,13 +273,16 @@ const ListSelectionComponent = ({
             unstyled
             size="icon"
             className="ml-auto h-[38px]"
-            onClick={handleCloseDialog}
+            onClick={onClose}
           >
             <ForwardedIconComponent name="x" />
           </Button>
         </div>
 
-        <div className="flex max-h-[80vh] flex-col gap-1 overflow-y-auto">
+        <div
+          ref={listContainerRef}
+          className="flex flex-col gap-1 overflow-y-auto"
+        >
           {filteredList.length > 0 ? (
             filteredList.map((item, index) => (
               <ListItem
@@ -154,6 +297,17 @@ const ListSelectionComponent = ({
                   handleSelectAction(item);
                   onSelection?.(item);
                 }}
+                onMouseEnter={() => {
+                  setHoveredItem(item);
+                  setFocusedIndex(index);
+                  setIsKeyboardNavActive(false);
+                }}
+                onMouseLeave={() => {
+                  setHoveredItem(null);
+                  // Don't reset focused index on mouse leave
+                }}
+                isFocused={focusedIndex === index}
+                isKeyboardNavActive={isKeyboardNavActive}
               />
             ))
           ) : (
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/connectionComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/connectionComponent/index.tsx
index a7fda4c72..1d5a2fc31 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/connectionComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/connectionComponent/index.tsx
@@ -230,8 +230,8 @@ const ConnectionComponent = ({
 
       <ListSelectionComponent
         open={open}
-        onSelection={handleSelection}
         onClose={handleCloseListSelectionDialog}
+        onSelection={handleSelection}
         searchCategories={searchCategory}
         setSelectedList={setSelectedItem}
         selectedList={selectedItem}
diff --git a/src/frontend/src/components/ui/dialog-with-no-close.tsx b/src/frontend/src/components/ui/dialog-with-no-close.tsx
index 07553b0c2..1d8998440 100644
--- a/src/frontend/src/components/ui/dialog-with-no-close.tsx
+++ b/src/frontend/src/components/ui/dialog-with-no-close.tsx
@@ -6,15 +6,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  children,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal {...props}>
-    <div className="nopan nodelete nodrag noflow fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-      {children}
-    </div>
-  </DialogPrimitive.Portal>
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
@@ -25,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "nopan nodelete nodrag noflow fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-overlayHide data-[state=open]:animate-overlayShow",
       className,
     )}
     {...props}
@@ -42,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 flex w-full max-w-lg flex-col gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow",
         className,
       )}
       {...props}
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index c9b279c7d..ee310be15 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -41,6 +41,47 @@ const config = {
         "2xl": "1400px",
       },
       keyframes: {
+        // Overlay animations
+        overlayShow: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        overlayHide: {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+
+        // Content animations - now including both scale and clip in one animation
+        contentShow: {
+          from: {
+            opacity: 0,
+            transform: "translate(-50%, -50%) scale(0.95)",
+            clipPath: "inset(50% 0)",
+            boxShadow: "0 4px 8px -2px rgba(0, 0, 0, 0.1)", // Smaller shadow
+          },
+          to: {
+            opacity: 1,
+            transform: "translate(-50%, -50%) scale(1)",
+            clipPath: "inset(0% 0)",
+            boxShadow:
+              "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+          },
+        },
+        contentHide: {
+          from: {
+            opacity: 1,
+            transform: "translate(-50%, -50%) scale(1)",
+            clipPath: "inset(0% 0)",
+            boxShadow:
+              "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+          },
+          to: {
+            opacity: 0,
+            transform: "translate(-50%, -50%) scale(0.95)",
+            clipPath: "inset(50% 0)",
+            boxShadow: "0 4px 8px -2px rgba(0, 0, 0, 0.1)",
+          },
+        },
         wiggle: {
           "0%, 100%": { transform: "scale(100%)" },
           "50%": { transform: "scale(120%)" },
@@ -52,6 +93,11 @@ const config = {
         },
       },
       animation: {
+        // Animation definitions
+        overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        overlayHide: "overlayHide 500ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentHide: "contentHide 500ms cubic-bezier(0.16, 1, 0.3, 1)",
         wiggle: "wiggle 150ms ease-in-out 1",
         "slow-wiggle": "wiggle 500ms ease-in-out 1",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",