diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
index 5e1de69ef..559b25264 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Input, SimpleTooltip } from "@/components/ui";
+import { Button, SimpleTooltip } from "@/components/ui";
+import { DesignInput } from "@/components/design-components";
 import { cn } from "@/lib/utils";
 import { MagnifyingGlassIcon, PlusIcon } from "@phosphor-icons/react";
 import React, { ReactNode, useState } from "react";
@@ -53,22 +54,16 @@ export function ListSection({
                 "relative flex items-center transition-all duration-150 hover:transition-none",
                 isSearchFocused ? "w-[160px]" : "w-[140px]"
               )}>
-                <Input
+                <DesignInput
                   type="text"
                   size="sm"
-                  leadingIcon={<MagnifyingGlassIcon className="h-3 w-3" />}
+                  leadingIcon={<MagnifyingGlassIcon className="h-3.5 w-3.5" />}
                   placeholder={searchPlaceholder}
                   value={searchValue || ''}
                   onChange={(e) => onSearchChange(e.target.value)}
                   onFocus={() => setIsSearchFocused(true)}
                   onBlur={() => setIsSearchFocused(false)}
-                  className={cn(
-                    "w-full rounded-lg",
-                    "bg-background dark:bg-foreground/[0.04] border border-border/50 dark:border-foreground/[0.08]",
-                    "focus:bg-background dark:focus:bg-foreground/[0.06] focus:outline-none focus:ring-1 focus:ring-foreground/[0.1] focus:border-border dark:focus:border-foreground/[0.12]",
-                    "placeholder:text-muted-foreground/50",
-                    "transition-all duration-150 hover:transition-none"
-                  )}
+                  className="h-8 w-full rounded-lg"
                 />
               </div>
             </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
index 1a944589e..acf68b6c1 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
@@ -257,7 +257,7 @@ function ConnectionLine({ fromRef, toRef, containerRef, quantity }: ConnectionLi
               cx={midpoint.x}
               cy={midpoint.y}
               r="14"
-              className="fill-background"
+              className="fill-white dark:fill-background"
               stroke="hsl(200, 91%, 70%)"
               strokeWidth="1"
               strokeOpacity="0.3"