diff --git a/apps/dashboard/src/@/components/billing/renew-subscription-button.tsx b/apps/dashboard/src/@/components/billing/renew-subscription-button.tsx
index 3d66a24c496..a32b6103027 100644
--- a/apps/dashboard/src/@/components/billing/renew-subscription-button.tsx
+++ b/apps/dashboard/src/@/components/billing/renew-subscription-button.tsx
@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import { reSubscribePlan } from "@/actions/billing";
 import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { pollWithTimeout } from "@/utils/pollWithTimeout";
 import { tryCatch } from "@/utils/try-catch";
diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
index fbd8018d939..9df85b23723 100644
--- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
@@ -10,7 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";
 import { DynamicHeight } from "../ui/DynamicHeight";
 
diff --git a/apps/dashboard/src/@/components/blocks/ExportToCSVButton.tsx b/apps/dashboard/src/@/components/blocks/ExportToCSVButton.tsx
index fc183e72df2..050fd5daf90 100644
--- a/apps/dashboard/src/@/components/blocks/ExportToCSVButton.tsx
+++ b/apps/dashboard/src/@/components/blocks/ExportToCSVButton.tsx
@@ -3,7 +3,7 @@ import { DownloadIcon } from "lucide-react";
 import Papa from "papaparse";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";
 
 export function ExportToCSVButton(props: {
diff --git a/apps/dashboard/src/@/components/blocks/Img.tsx b/apps/dashboard/src/@/components/blocks/Img.tsx
index 3a185bd90c1..e87b7fae364 100644
--- a/apps/dashboard/src/@/components/blocks/Img.tsx
+++ b/apps/dashboard/src/@/components/blocks/Img.tsx
@@ -1,87 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 "use client";
-import { useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 
-type imgElementProps = React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
-> & {
-  skeleton?: React.ReactNode;
-  fallback?: React.ReactNode;
-  src: string | undefined;
-  containerClassName?: string;
-};
-
-export function Img(props: imgElementProps) {
-  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
-    "pending",
-  );
-  const status =
-    props.src === undefined
-      ? "pending"
-      : props.src === ""
-        ? "fallback"
-        : _status;
-  const { className, fallback, skeleton, containerClassName, ...restProps } =
-    props;
-  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-accent" />;
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    const imgEl = imgRef.current;
-    if (!imgEl) {
-      return;
-    }
-    if (imgEl.complete) {
-      setStatus("loaded");
-    } else {
-      function handleLoad() {
-        setStatus("loaded");
-      }
-      imgEl.addEventListener("load", handleLoad);
-      return () => {
-        imgEl.removeEventListener("load", handleLoad);
-      };
-    }
-  }, []);
-
-  return (
-    <div className={cn("relative shrink-0", containerClassName)}>
-      <img
-        {...restProps}
-        // avoid setting empty src string to prevent request to the entire page
-        alt={restProps.alt || ""}
-        className={cn(
-          "fade-in-0 object-cover transition-opacity duration-300",
-          className,
-        )}
-        decoding="async"
-        onError={() => {
-          setStatus("fallback");
-        }}
-        ref={imgRef}
-        src={restProps.src || undefined}
-        style={{
-          opacity: status === "loaded" ? 1 : 0,
-          ...restProps.style,
-        }}
-      />
-
-      {status !== "loaded" && (
-        <div
-          className={cn(
-            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
-            className,
-          )}
-          style={restProps.style}
-        >
-          {status === "pending" && (skeleton || defaultSkeleton)}
-          {status === "fallback" && (fallback || defaultFallback)}
-        </div>
-      )}
-    </div>
-  );
-}
+export { Img } from "@workspace/ui/components/img";
diff --git a/apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx b/apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx
index e2d12445fca..9a3cf057ad9 100644
--- a/apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function RouteDiscoveryCard(
diff --git a/apps/dashboard/src/@/components/blocks/SettingsCard.tsx b/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
index 030bbf316dd..f3bbf6bcba5 100644
--- a/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function SettingsCard(
diff --git a/apps/dashboard/src/@/components/blocks/TWTable.tsx b/apps/dashboard/src/@/components/blocks/TWTable.tsx
index 3414cccae50..b6e90529dd9 100644
--- a/apps/dashboard/src/@/components/blocks/TWTable.tsx
+++ b/apps/dashboard/src/@/components/blocks/TWTable.tsx
@@ -19,7 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Separator } from "@/components/ui/separator";
 import {
   Table,
diff --git a/apps/dashboard/src/@/components/blocks/TokenSelector.tsx b/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
index e6145bf8660..f782c82b39d 100644
--- a/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
+++ b/apps/dashboard/src/@/components/blocks/TokenSelector.tsx
@@ -9,12 +9,12 @@ import type { TokenMetadata } from "@/api/universal-bridge/tokens";
 import { Img } from "@/components/blocks/Img";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/Spinner";
 import { fallbackChainIcon } from "@/constants/chain";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useTokensData } from "@/hooks/tokens";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-import { Spinner } from "../ui/Spinner/Spinner";
 
 type Option = { label: string; value: string };
 
diff --git a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
index 4ca36385f1e..873a8760e62 100644
--- a/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
@@ -7,8 +7,8 @@ import {
   RefreshCwIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "../../ui/DynamicHeight";
-import { Spinner } from "../../ui/Spinner/Spinner";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Spinner } from "@/components/ui/Spinner";
 
 export type MultiStepState<T extends string> = {
   id: T;
diff --git a/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx b/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
index fd475ddffe0..1726f48d960 100644
--- a/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
+++ b/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export function GenericLoadingPage({ className }: { className?: string }) {
diff --git a/apps/dashboard/src/@/components/cmd-k-search/index.tsx b/apps/dashboard/src/@/components/cmd-k-search/index.tsx
index 02bbee89b4c..f5bc8bc28d8 100644
--- a/apps/dashboard/src/@/components/cmd-k-search/index.tsx
+++ b/apps/dashboard/src/@/components/cmd-k-search/index.tsx
@@ -23,7 +23,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { ScrollShadow } from "@/components/ui/ScrollShadow";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { fetchTopContracts, type TrendingContract } from "@/lib/search";
diff --git a/apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx b/apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx
index 5c6d3746344..2131ce4999f 100644
--- a/apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx
+++ b/apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx
@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import {
   Table,
diff --git a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
index 297b89ff78f..4b9256fc332 100644
--- a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
@@ -31,7 +31,7 @@ import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 
diff --git a/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx b/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
index c4cbc25af04..3c87506358a 100644
--- a/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
+++ b/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useChainSlug } from "@/hooks/chains/chainSlug";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
diff --git a/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx b/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
index e4ae756e441..e080540d8ca 100644
--- a/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
+++ b/apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx
@@ -4,7 +4,7 @@ import { SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx b/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
index 2795c1b0bd6..7e0ee70830e 100644
--- a/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
+++ b/apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
@@ -10,7 +10,7 @@ import type { WalletUser } from "thirdweb/wallets";
 import { TWTable } from "@/components/blocks/TWTable";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   ToolTipLabel,
   Tooltip,
diff --git a/apps/dashboard/src/@/components/misc/CustomChainRenderer.tsx b/apps/dashboard/src/@/components/misc/CustomChainRenderer.tsx
index 60924e2bd1a..fb764c29922 100644
--- a/apps/dashboard/src/@/components/misc/CustomChainRenderer.tsx
+++ b/apps/dashboard/src/@/components/misc/CustomChainRenderer.tsx
@@ -2,7 +2,7 @@ import { SettingsIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import type { UseNetworkSwitcherModalOptions } from "thirdweb/react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { OPSponsoredChains } from "@/constants/chains";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
diff --git a/apps/dashboard/src/@/components/misc/configure-networks/Form/IconUpload.tsx b/apps/dashboard/src/@/components/misc/configure-networks/Form/IconUpload.tsx
index a9618c51132..65f256949d9 100644
--- a/apps/dashboard/src/@/components/misc/configure-networks/Form/IconUpload.tsx
+++ b/apps/dashboard/src/@/components/misc/configure-networks/Form/IconUpload.tsx
@@ -5,7 +5,7 @@ import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { FileInput } from "@/components/blocks/FileInput";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
 
 export const IconUpload: React.FC<{
diff --git a/apps/dashboard/src/@/components/project/create-project-modal/index.tsx b/apps/dashboard/src/@/components/project/create-project-modal/index.tsx
index 64f7624fec7..2034be60fc3 100644
--- a/apps/dashboard/src/@/components/project/create-project-modal/index.tsx
+++ b/apps/dashboard/src/@/components/project/create-project-modal/index.tsx
@@ -32,7 +32,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { createProjectClient } from "@/hooks/useApi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
diff --git a/apps/dashboard/src/@/components/solidity-inputs/address-input.tsx b/apps/dashboard/src/@/components/solidity-inputs/address-input.tsx
index 3cb1abbef68..92ef70b0bbb 100644
--- a/apps/dashboard/src/@/components/solidity-inputs/address-input.tsx
+++ b/apps/dashboard/src/@/components/solidity-inputs/address-input.tsx
@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { isAddress, isValidENSName } from "thirdweb/utils";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useEns } from "@/hooks/contract-hooks";
 import type { SolidityInputProps } from ".";
 import { validateAddress } from "./helpers";
diff --git a/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx b/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
index 11d8e55d00d..b66580e4ac2 100644
--- a/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
+++ b/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
@@ -41,7 +41,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { LOCAL_NODE_PKEY } from "@/constants/misc";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
diff --git a/apps/dashboard/src/@/components/ui/Spinner.tsx b/apps/dashboard/src/@/components/ui/Spinner.tsx
new file mode 100644
index 00000000000..89399c0d854
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/Spinner.tsx
@@ -0,0 +1 @@
+export { Spinner } from "@workspace/ui/components/spinner";
diff --git a/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css b/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css
deleted file mode 100644
index 0367a2f3d33..00000000000
--- a/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.loader {
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 2s linear infinite;
-}
-
-.loader circle {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 4px solid #fff;
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
index 1ae4f4a0bb9..3a3e8a14a7b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
@@ -43,7 +43,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx
index 25215865bf8..30406c7b992 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx
@@ -11,7 +11,7 @@ import {
 import { useDebounce } from "use-debounce";
 import { useCustomConnectModal } from "@/components/connect-wallet";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 
 type AddChainToWalletProps = {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
index e241dda3696..42879f44a4e 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
@@ -46,7 +46,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Form } from "@/components/ui/form";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useIsAdmin } from "@/hooks/useContractRoles";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
index 4c88e496882..4b6e7c2816d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
@@ -11,7 +11,7 @@ import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Sheet,
   SheetContent,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/page-skeletons.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/page-skeletons.tsx
index 3bcf23b1e8f..21bcdfee31b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/page-skeletons.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/page-skeletons.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export function LoadingPage() {
   return (
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
index 0ac5df266aa..f50d66a4fb2 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
@@ -23,7 +23,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import type { EVMContractInfo } from "@/hooks/useActiveChainId";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
index f17681f29c0..b7b50df028a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
@@ -16,7 +16,7 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { Label } from "@/components/ui/label";
 import { ScrollShadow } from "@/components/ui/ScrollShadow";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx
index 8eed785a280..f6691a54c5a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx
@@ -5,7 +5,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getInstalledModules, owner } from "thirdweb/modules";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { InstalledModulesTable } from "./components/InstalledModulesTable";
 import { InstallModuleForm } from "./components/ModuleForm";
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx
index 8ff2d38e9f0..d3575e1b796 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx
@@ -27,7 +27,7 @@ import type { Account } from "thirdweb/wallets";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { TransactionButton } from "@/components/tx-button";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
index a0baaf8183e..b0cb97bf07b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
@@ -28,7 +28,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ModuleInstance } from "./module-instance";
 import { useModuleContractInfo } from "./moduleContractInfo";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index 50ddfcc24cd..8df477ed414 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -21,7 +21,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { CodeClient } from "@/components/ui/code/code.client";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useChainSlug } from "@/hooks/chains/chainSlug";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
index ef38f6d6ece..3d9ac0a65a4 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
@@ -16,7 +16,7 @@ import { NFTMediaWithEmptyState } from "@/components/blocks/nft-media";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
index cca2e6b0fc1..97bcd9b9dd0 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
@@ -6,7 +6,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
index 6d685623d22..bb9cd93c229 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
@@ -12,7 +12,7 @@ import { useReadContract } from "thirdweb/react";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
index 0d79b72e5d9..81e86c53714 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
@@ -35,7 +35,7 @@ import { TransactionButton } from "@/components/tx-button";
 import { Button } from "@/components/ui/button";
 import { DecimalInput } from "@/components/ui/decimal-input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/detected-state.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/detected-state.tsx
index 9df4869ee9b..9b7c363a552 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/detected-state.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/detected-state.tsx
@@ -1,5 +1,5 @@
 import { Grid2x2XIcon } from "lucide-react";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import type { ExtensionDetectedState } from "@/types/ExtensionDetectedState";
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/components/ContractSourcesPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/components/ContractSourcesPage.tsx
index 77bb80d12bf..06c7ea2dc6c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/components/ContractSourcesPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/components/ContractSourcesPage.tsx
@@ -21,7 +21,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useContractSources } from "@/hooks/contract-ui/useContractSources";
 import { useResolveContractAbi } from "@/hooks/useResolveContractAbi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
index 85f6f96a3d0..804a5e1da13 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
@@ -3,7 +3,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { DownloadableCode } from "@/components/blocks/code/downloadable-code";
 import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useCsvUpload } from "@/hooks/useCsvUpload";
 import { AirdropCSVTable } from "./airdrop-csv-table";
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx
index 42a698fef8f..ad3225e1551 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { StarIcon } from "lucide-react";
 import { apiServerProxy } from "@/actions/proxies";
 import { Button, type ButtonProps } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useFavoriteChainIds } from "@/hooks/favorite-chains";
 import { cn } from "@/lib/utils";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/index.tsx b/apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/index.tsx
index 3414ce1ec0a..4200dd665a0 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/index.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/contract-publish-form/index.tsx
@@ -13,7 +13,7 @@ import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { reportContractPublished } from "@/analytics/report";
 import { CustomConnectWallet } from "@/components/connect-wallet";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
   DASHBOARD_FORWARDER_ADDRESS,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
index 128c5102011..a22a81104d7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { fetchPublishedContracts } from "@/api/contract/fetchPublishedContracts";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { ProfileHeader } from "./components/profile-header";
 import { PublishedContracts } from "./components/published-contracts";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/contract-deploy-form/deploy-context-modal.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/contract-deploy-form/deploy-context-modal.tsx
index ff8756fdeed..29bf90e68b7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/contract-deploy-form/deploy-context-modal.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/components/contract-deploy-form/deploy-context-modal.tsx
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 export type DeployModalStep = {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
index cef3a4ad380..7d72e143c2a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
@@ -20,7 +20,7 @@ import { Card } from "@/components/ui/card";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
diff --git a/apps/dashboard/src/app/(app)/(stripe)/loading.tsx b/apps/dashboard/src/app/(app)/(stripe)/loading.tsx
index b1cc1d09823..cf559b55370 100644
--- a/apps/dashboard/src/app/(app)/(stripe)/loading.tsx
+++ b/apps/dashboard/src/app/(app)/(stripe)/loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export default function Loading() {
   return (
diff --git a/apps/dashboard/src/app/(app)/(stripe)/stripe-redirect/page.tsx b/apps/dashboard/src/app/(app)/(stripe)/stripe-redirect/page.tsx
index 55909d9d6d6..b6bd386d2ed 100644
--- a/apps/dashboard/src/app/(app)/(stripe)/stripe-redirect/page.tsx
+++ b/apps/dashboard/src/app/(app)/(stripe)/stripe-redirect/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { stripeRedirectPageChannel } from "@/hooks/stripe/redirect-event";
 
 export default function ClosePage() {
diff --git a/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx b/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
index b963965bb0c..320ce034f2c 100644
--- a/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx
@@ -41,7 +41,7 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "@/components/ui/input-otp";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import type { Account } from "@/hooks/useApi";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
diff --git a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx
index ad2b508d0de..6f1239367cb 100644
--- a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx
+++ b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx
@@ -18,7 +18,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx b/apps/dashboard/src/app/(app)/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
index eb3866d7fbe..93168a883f4 100644
--- a/apps/dashboard/src/app/(app)/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
+++ b/apps/dashboard/src/app/(app)/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
@@ -8,7 +8,7 @@ import type { Team } from "@/api/team/get-team";
 import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
 import { DotsBackgroundPattern } from "@/components/ui/background-patterns";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { ThirdwebMiniLogo } from "../../../../components/ThirdwebMiniLogo";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
index 88f37fa41f8..b03113746ed 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useTransition } from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useStripeRedirectEvent } from "@/hooks/stripe/redirect-event";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/CancelPlanModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/CancelPlanModal.tsx
index 5ce2beac5c8..0dfb54fc8be 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/CancelPlanModal.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/CancelPlanModal.tsx
@@ -5,7 +5,7 @@ import { useState, useTransition } from "react";
 import { toast } from "sonner";
 import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Sheet,
   SheetContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/Pricing.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/Pricing.tsx
index d69e29a8121..22a6681f6f5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/Pricing.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/Pricing.tsx
@@ -3,7 +3,7 @@
 import { useTransition } from "react";
 import type { Team } from "@/api/team/get-team";
 import { PricingCard } from "@/components/billing/pricing-card";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { PRO_CONTACT_US_URL } from "@/constants/pro";
 import { useStripeRedirectEvent } from "@/hooks/stripe/redirect-event";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/coupons/CouponsUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/coupons/CouponsUI.tsx
index 1b3fb81ead6..40ddf7bf786 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/coupons/CouponsUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/coupons/CouponsUI.tsx
@@ -11,7 +11,7 @@ import {
 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx
index e2c468c9568..92a85cfdddf 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx
@@ -20,7 +20,7 @@ import {
 } from "@/components/ui/dialog";
 import { ImageUpload } from "@/components/ui/image-upload";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx
index b1ac17247e5..c4a60b80412 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { partnerFormSchema } from "../../constants";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/create/components/client/create-ecosystem-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/create/components/client/create-ecosystem-form.client.tsx
index d5b08d7765d..6a9287d5bce 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/create/components/client/create-ecosystem-form.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/create/components/client/create-ecosystem-form.client.tsx
@@ -18,7 +18,7 @@ import {
 import { ImageUpload } from "@/components/ui/image-upload";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItemButton } from "@/components/ui/radio-group";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { createEcosystem } from "../../actions/create-ecosystem";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx
index 52e8206ffb3..173b97f6e7a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/infrastructure/[chain_id]/_components/service-card.tsx
@@ -3,7 +3,7 @@
 import { EmptyChartState } from "@/components/analytics/empty-chart-state";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 type ServiceStatus = "active" | "pending" | "inactive";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/domain-verification.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/domain-verification.tsx
index 3c460d11221..d91568de299 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/domain-verification.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/domain-verification.tsx
@@ -13,7 +13,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { CopyButton } from "@/components/ui/CopyButton";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 interface DomainVerificationFormProps {
   teamId: string;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
index 38086890cf7..237e6b31653 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
@@ -28,7 +28,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
index 68fa64ac2c4..9dff988c3cb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
@@ -23,7 +23,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { BASE_URL } from "@/constants/env-utils";
 import {
   FiltersSection,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
index f58fafb4cc4..9674775c56a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
@@ -23,7 +23,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { FiltersSection, type MemberSortId } from "./_common";
 
 type RoleFilterValue = "ALL ROLES" | TeamAccountRole;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx
index 3f1ebf37cd7..8c1c66e7b50 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
index 933115eb80c..b623117fcad 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
@@ -6,7 +6,7 @@ import { toast } from "sonner";
 import { revalidatePathAction } from "@/actions/revalidate";
 import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { createSupportTicket } from "../apis/support";
 import { SupportForm_SelectInput } from "./shared/SupportForm_SelectInput";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/storage/your-files.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/storage/your-files.tsx
index 79cee83da2f..5a59cc1f74f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/storage/your-files.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/storage/your-files.tsx
@@ -8,7 +8,7 @@ import { useActiveAccount } from "thirdweb/react";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/SponsorshipPolicies/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/SponsorshipPolicies/index.tsx
index 9f8492a74d0..84c5c829047 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/settings/SponsorshipPolicies/index.tsx
@@ -22,7 +22,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/DeployedContractsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/DeployedContractsPage.tsx
index 720e96c6b0b..4044c127414 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/DeployedContractsPage.tsx
@@ -3,7 +3,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { getSortedDeployedContracts } from "@/api/project/getSortedDeployedContracts";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { ContractTable } from "@/components/contract-components/tables/contract-table";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { DeployViaCLIOrImportCard } from "../../../../../account/contracts/_components/DeployViaCLIOrImportCard";
 
 export function DeployedContractsPage(props: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
index c188ccc9c8e..04ff3953eec 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
@@ -31,7 +31,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 
 const formSchema = z.object({
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
index 05c5bf03f47..a6d0f62a5dd 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
@@ -61,7 +61,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/_components/version.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/_components/version.tsx
index 39b3e5bd559..802fec88a85 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/_components/version.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/_components/version.tsx
@@ -17,7 +17,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
index 4cf61d3ee53..b5a14d0ebc7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   type AccessToken,
   useEngineRevokeAccessToken,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
index 50ffda101d7..dcfa2950807 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
@@ -11,7 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useEngineCreateAccessToken } from "@/hooks/useEngine";
 import { parseError } from "@/utils/errorParser";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
index f88130eb48f..a945e5ddb2d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
@@ -11,7 +11,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
index 50c67ff926a..77a8a06858e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { type Keypair, useEngineRemoveKeypair } from "@/hooks/useEngine";
 import { toDateTimeLocal } from "@/utils/date-utils";
 import { parseError } from "@/utils/errorParser";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
index 26039ccc0ae..1e2c0f50cf5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
@@ -23,7 +23,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useEngineGrantPermissions } from "@/hooks/useEngine";
 import { parseError } from "@/utils/errorParser";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/admins-table.tsx
index a6b1e78eaec..0eac73784cd 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/admins-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/admins/components/admins-table.tsx
@@ -26,7 +26,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   type EngineAdmin,
   useEngineGrantPermissions,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
index f7e2939d160..48cefd733ab 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
@@ -21,7 +21,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
index 021cc6a8b11..487544943ca 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export function EngineDeleteAlertModal(props: {
   onConfirm: () => void;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
index 851dd795757..5349054f7d6 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
index 9139c26d0cd..fb750cbacf5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
@@ -3,7 +3,7 @@
 import { formatDistance } from "date-fns";
 import { useMemo } from "react";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/circle-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
index db9122e0cad..7a35a38e7b3 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
@@ -6,7 +6,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   type EngineInstance,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/cors.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/cors.tsx
index 0664ff62f72..47f2cd989b2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/cors.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/cors.tsx
@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import {
   useEngineCorsConfiguration,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
index a77be407c91..ed2d83dc3e7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import {
   useEngineIpAllowlistConfiguration,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
index 3b629a6e4ea..f6990c31bd7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
@@ -5,7 +5,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
 import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   type EngineInstance,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
index 03941ffd939..4336ce27f35 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
@@ -5,7 +5,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
 import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
index 77ab5af652e..a085b833cef 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
@@ -30,7 +30,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
index c51ccc304b8..d5dacfa89cc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -20,7 +20,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Tooltip,
   TooltipContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
index 9b3fc76b8c7..dd34c8e2218 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
@@ -15,7 +15,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import type { ResultItem } from "./StatusCodes";
 
 function transformPrometheusData(timeseriesDatapoints: ResultItem[]) {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
index c4abce0ad82..c9dd2a86efb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
@@ -16,7 +16,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 
 export interface ResultItem {
   metric: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
index bf9cbf6e90b..2d29ca2058f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -41,7 +41,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
index 9a2b129b028..3e288146153 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -17,7 +17,7 @@ import {
 } from "@/components/ui/dialog";
 import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
index 8e55bde4792..07c713f9ceb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -21,7 +21,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
index 386560c82de..9551da5d539 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
@@ -24,7 +24,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
index 54a7cd78c46..5d9522219a6 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
@@ -29,7 +29,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
index ff3594e16bd..4f36c80cd7d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
index 423a9312db0..bbb2b8fdbd8 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
@@ -1,7 +1,7 @@
 import { format } from "date-fns";
 import { Badge } from "@/components/ui/badge";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Table,
   TableBody,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
index ec076d444ee..8dba4ed8c8f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
@@ -3,7 +3,7 @@
 import { CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   useEngineWalletCredentials,
   useHasEngineFeature,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
index ad32ef2f3e3..73a95145575 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
@@ -22,7 +22,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
index e799982647f..b53a7e5e650 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
@@ -16,7 +16,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
index 71b89a91e7a..8cce80e27c2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
@@ -31,7 +31,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { parseErrorToMessage } from "@/utils/errorParser";
 import { resolveAddressAndEns } from "@/utils/resolveAddressAndEns";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
index 03c43bd908f..68b16219786 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
@@ -22,7 +22,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx
index d10381a9739..24ffe371852 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx
@@ -37,7 +37,7 @@ import {
   RequiredFormLabel,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
index 364eff35e3d..8651f7106b5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
@@ -48,7 +48,7 @@ import {
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/components/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/components/index.tsx
index 30194d44594..9ce0fb6b566 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/components/index.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/components/index.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { planToTierRecordForGating } from "@/constants/planToTierRecord";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
index 15165be0d47..53f69feee05 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
@@ -7,7 +7,7 @@ import { apiServerProxy } from "@/actions/proxies";
 import { reportUpsellClicked, reportUpsellShown } from "@/analytics/report";
 import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useStripeRedirectEvent } from "@/hooks/stripe/redirect-event";
 import { pollWithTimeout } from "@/utils/pollWithTimeout";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page.client.tsx
index abb334e12ec..7bdd7c8738e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page.client.tsx
@@ -16,7 +16,7 @@ import {
 } from "thirdweb/tokens";
 import { reportAssetCreationStepConfigured } from "@/analytics/report";
 import type { Team } from "@/api/team/get-team";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import { StepCard } from "../_common/step-card";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-airdrop.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-airdrop.tsx
index b36129add14..c88463559fd 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-airdrop.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-airdrop.tsx
@@ -16,7 +16,7 @@ import { DropZone } from "@/components/blocks/drop-zone/drop-zone";
 import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { InlineCode } from "@/components/ui/inline-code";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Sheet,
   SheetContent,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx
index df65d3bc031..e529e71e2be 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { initVaultClient } from "../../lib/vault.client";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/create-vault-account.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/create-vault-account.client.tsx
index 2921a8d67c9..4bfd99bcf84 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/create-vault-account.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/create-vault-account.client.tsx
@@ -22,7 +22,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
index d325eb7dddb..d0610d0d06e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
@@ -23,7 +23,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
index 4864196d5f0..739771bd852 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
@@ -15,7 +15,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { truncateMiddle } from "../utils/abiUtils";
 import type {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx
index 6c4ea510626..f8a0240f9dc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/ReviewStep.tsx
@@ -2,7 +2,7 @@
 import { CheckIcon, PlayIcon, XIcon } from "lucide-react";
 import type { UseFormReturn } from "react-hook-form";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { truncateMiddle } from "../utils/abiUtils";
 import type { WebhookFormValues } from "../utils/webhookTypes";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
index a569aa88469..6031591c363 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
@@ -15,7 +15,7 @@ import { TWTable } from "@/components/blocks/TWTable";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useTestWebhook } from "../hooks/useTestWebhook";
 import { CreateContractWebhookButton } from "./CreateWebhookModal";
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index 2b2d79ccc87..e087a74952e 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -22,7 +22,7 @@ import { resetAnalytics } from "@/analytics/reset";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { LAST_USED_PROJECT_ID, LAST_USED_TEAM_ID } from "@/constants/cookie";
 import { NEXT_PUBLIC_TURNSTILE_SITE_KEY } from "@/constants/public-envs";
 import type { Account } from "@/hooks/useApi";
diff --git a/apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.tsx b/apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.tsx
index 0ae7827b654..7372f14518f 100644
--- a/apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.tsx
+++ b/apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.tsx
@@ -4,7 +4,7 @@ import { useMutation } from "@tanstack/react-query";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { shortenString } from "@/utils/usedapp-external";
 
diff --git a/apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx b/apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx
index 153d6a10a3b..355d9d1ce2a 100644
--- a/apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx
+++ b/apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx
@@ -11,7 +11,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { TabButtons } from "@/components/ui/tabs";
 import {
   type AccountValidationSchema,
diff --git a/apps/dashboard/src/app/login/onboarding/VerifyEmail/VerifyEmail.tsx b/apps/dashboard/src/app/login/onboarding/VerifyEmail/VerifyEmail.tsx
index 0299cca92d7..28cd5bc703c 100644
--- a/apps/dashboard/src/app/login/onboarding/VerifyEmail/VerifyEmail.tsx
+++ b/apps/dashboard/src/app/login/onboarding/VerifyEmail/VerifyEmail.tsx
@@ -11,7 +11,7 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "@/components/ui/input-otp";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import type { Account } from "@/hooks/useApi";
 import { cn } from "@/lib/utils";
 import {
diff --git a/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx b/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
index 966577c5c83..9f49d462d89 100644
--- a/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
+++ b/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
@@ -8,7 +8,7 @@ import {
   UsersIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
 
 type OnboardingStep = {
diff --git a/apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx b/apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx
index c4b5e1993cd..d0506a7e89c 100644
--- a/apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx
+++ b/apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx
@@ -12,7 +12,7 @@ import {
 import type { Team } from "@/api/team/get-team";
 import { PricingCard } from "@/components/billing/pricing-card";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Sheet,
   SheetContent,
diff --git a/apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.tsx b/apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.tsx
index a339caf332d..b863f6e46c2 100644
--- a/apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.tsx
+++ b/apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.tsx
@@ -20,7 +20,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   maxTeamNameLength,
   maxTeamSlugLength,
diff --git a/apps/playground-web/src/app/ai/components/ChatPageContent.tsx b/apps/playground-web/src/app/ai/components/ChatPageContent.tsx
index 4d9020ea211..48970535fbb 100644
--- a/apps/playground-web/src/app/ai/components/ChatPageContent.tsx
+++ b/apps/playground-web/src/app/ai/components/ChatPageContent.tsx
@@ -29,7 +29,7 @@ import {
 } from "@/components/ui/dialog";
 import { MarkdownRenderer } from "@/components/ui/markdown-renderer";
 import { Img } from "../../../components/ui/Img";
-import { Spinner } from "../../../components/ui/Spinner/Spinner";
+import { Spinner } from "../../../components/ui/Spinner";
 import { THIRDWEB_CLIENT } from "../../../lib/client";
 import { type NebulaContext, promptNebula } from "../api/chat";
 import type { NebulaUserMessage } from "../api/types";
diff --git a/apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx b/apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx
index f5282e45112..ac91fa43506 100644
--- a/apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx
+++ b/apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx
@@ -23,7 +23,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { ScrollShadow } from "@/components/ui/ScrollShadow";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import {
   Select,
   SelectContent,
diff --git a/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx b/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx
index d4315175e1c..8955f3b7b9a 100644
--- a/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx
+++ b/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx
@@ -12,7 +12,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import { Spinner } from "../../../../components/ui/Spinner/Spinner";
+import { Spinner } from "../../../../components/ui/Spinner";
 import { cn } from "../../../../lib/utils";
 import type { EngineTxStatus } from "../../types";
 import { airdropExample } from "../constants";
diff --git a/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx b/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx
index 80b864d62f9..f73a48cd678 100644
--- a/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx
+++ b/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx
@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 import { UploadImage } from "../../../../components/blocks/upload-image";
-import { Spinner } from "../../../../components/ui/Spinner/Spinner";
+import { Spinner } from "../../../../components/ui/Spinner";
 import { tryCatch } from "../../../../lib/try-catch";
 import { useEngineTxStatus } from "../../_hooks/useEngineTxStatus";
 import { mint_erc1155_nft_with_engine } from "../../actions";
diff --git a/apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx b/apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx
index 4f33829a297..4593a33c484 100644
--- a/apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx
+++ b/apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx
@@ -22,7 +22,7 @@ import { Input } from "@/components/ui/input";
 import CodeClient from "../../../../components/code/code.client";
 import { LoadingDots } from "../../../../components/ui/LoadingDots";
 import { Label } from "../../../../components/ui/label";
-import { Spinner } from "../../../../components/ui/Spinner/Spinner";
+import { Spinner } from "../../../../components/ui/Spinner";
 import { THIRDWEB_CLIENT } from "../../../../lib/client";
 import { useEngineTxStatus } from "../../_hooks/useEngineTxStatus";
 import { claim_erc1155_nft_with_engine } from "../../actions";
diff --git a/apps/playground-web/src/components/account-abstraction/5792-send-calls.tsx b/apps/playground-web/src/components/account-abstraction/5792-send-calls.tsx
index d5f24d0292a..1709e72b2bf 100644
--- a/apps/playground-web/src/components/account-abstraction/5792-send-calls.tsx
+++ b/apps/playground-web/src/components/account-abstraction/5792-send-calls.tsx
@@ -21,7 +21,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import { Spinner } from "../ui/Spinner/Spinner";
+import { Spinner } from "../ui/Spinner";
 
 const chain = sepolia;
 
diff --git a/apps/playground-web/src/components/ui/Img.tsx b/apps/playground-web/src/components/ui/Img.tsx
index 51c1ebaad05..e87b7fae364 100644
--- a/apps/playground-web/src/components/ui/Img.tsx
+++ b/apps/playground-web/src/components/ui/Img.tsx
@@ -1,85 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
-
 "use client";
-import { useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/utils";
-
-type imgElementProps = React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
-> & {
-  skeleton?: React.ReactNode;
-  fallback?: React.ReactNode;
-  src: string | undefined;
-};
-
-export function Img(props: imgElementProps) {
-  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
-    "pending",
-  );
-  const status =
-    props.src === undefined
-      ? "pending"
-      : props.src === ""
-        ? "fallback"
-        : _status;
-  const { className, fallback, skeleton, ...restProps } = props;
-  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-accent" />;
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useLayoutEffect(() => {
-    const imgEl = imgRef.current;
-    if (!imgEl) {
-      return;
-    }
-    if (imgEl.complete) {
-      setStatus("loaded");
-    } else {
-      function handleLoad() {
-        setStatus("loaded");
-      }
-      imgEl.addEventListener("load", handleLoad);
-      return () => {
-        imgEl.removeEventListener("load", handleLoad);
-      };
-    }
-  }, []);
-
-  return (
-    <div className="relative">
-      <img
-        {...restProps}
-        // avoid setting empty src string to prevent request to the entire page
-        alt={restProps.alt || ""}
-        className={cn(
-          "fade-in-0 object-cover transition-opacity duration-300",
-          className,
-        )}
-        decoding="async"
-        onError={() => {
-          setStatus("fallback");
-        }}
-        ref={imgRef}
-        src={restProps.src || undefined}
-        style={{
-          opacity: status === "loaded" ? 1 : 0,
-          ...restProps.style,
-        }}
-      />
 
-      {status !== "loaded" && (
-        <div
-          className={cn(
-            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
-            className,
-          )}
-          style={restProps.style}
-        >
-          {status === "pending" && (skeleton || defaultSkeleton)}
-          {status === "fallback" && (fallback || defaultFallback)}
-        </div>
-      )}
-    </div>
-  );
-}
+export { Img } from "@workspace/ui/components/img";
diff --git a/apps/playground-web/src/components/ui/Spinner.tsx b/apps/playground-web/src/components/ui/Spinner.tsx
new file mode 100644
index 00000000000..89399c0d854
--- /dev/null
+++ b/apps/playground-web/src/components/ui/Spinner.tsx
@@ -0,0 +1 @@
+export { Spinner } from "@workspace/ui/components/spinner";
diff --git a/apps/playground-web/src/components/ui/Spinner/Spinner.module.css b/apps/playground-web/src/components/ui/Spinner/Spinner.module.css
deleted file mode 100644
index 0367a2f3d33..00000000000
--- a/apps/playground-web/src/components/ui/Spinner/Spinner.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.loader {
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 2s linear infinite;
-}
-
-.loader circle {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 4px solid #fff;
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/apps/playground-web/src/components/ui/Spinner/Spinner.tsx b/apps/playground-web/src/components/ui/Spinner/Spinner.tsx
deleted file mode 100644
index 4db57326dba..00000000000
--- a/apps/playground-web/src/components/ui/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { cn } from "../../../lib/utils";
-import style from "./Spinner.module.css";
-
-export function Spinner(props: { className?: string }) {
-  return (
-    <svg
-      className={cn(style.loader, props.className || "size-4")}
-      viewBox="0 0 50 50"
-    >
-      <title>loading</title>
-      <circle
-        cx="25"
-        cy="25"
-        fill="none"
-        r="20"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-    </svg>
-  );
-}
diff --git a/apps/portal/src/components/AI/chat-button.tsx b/apps/portal/src/components/AI/chat-button.tsx
index 5b8051ba87b..6f96ba5d9d3 100644
--- a/apps/portal/src/components/AI/chat-button.tsx
+++ b/apps/portal/src/components/AI/chat-button.tsx
@@ -3,8 +3,8 @@
 import { MessageCircleIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import { lazy, Suspense, useCallback, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
-import { Spinner } from "../ui/Spinner/Spinner";
 
 const Chat = lazy(() =>
   import("./chat").then((mod) => ({ default: mod.Chat })),
diff --git a/apps/portal/src/components/AI/chat.tsx b/apps/portal/src/components/AI/chat.tsx
index 6102c1f2d4b..04a203abebb 100644
--- a/apps/portal/src/components/AI/chat.tsx
+++ b/apps/portal/src/components/AI/chat.tsx
@@ -24,11 +24,11 @@ import { toast } from "sonner";
 import { MarkdownRenderer } from "@/components/markdown/MarkdownRenderer";
 import { Button } from "@/components/ui/button";
 import { ScrollShadow } from "@/components/ui/ScrollShadow";
+import { Spinner } from "@/components/ui/Spinner";
 import { Toaster } from "@/components/ui/sonner";
 import { TextShimmer } from "@/components/ui/text-shimmer";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { ThirdwebIcon } from "@/icons/thirdweb";
-import { Spinner } from "../ui/Spinner/Spinner";
 import { getChatResponse, sendFeedback } from "./api";
 
 interface Message {
diff --git a/apps/portal/src/components/others/DocSearch.tsx b/apps/portal/src/components/others/DocSearch.tsx
index 2909636146a..b93549ff86a 100644
--- a/apps/portal/src/components/others/DocSearch.tsx
+++ b/apps/portal/src/components/others/DocSearch.tsx
@@ -10,11 +10,11 @@ import { CommandIcon, FileTextIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import type { SearchResult } from "@/app/api/search/types";
+import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Spinner } from "../ui/Spinner/Spinner";
 import { DynamicHeight } from "./DynamicHeight";
 
 const suggestedLinks: { title: string; href: string }[] = [
diff --git a/apps/portal/src/components/ui/Spinner.tsx b/apps/portal/src/components/ui/Spinner.tsx
new file mode 100644
index 00000000000..89399c0d854
--- /dev/null
+++ b/apps/portal/src/components/ui/Spinner.tsx
@@ -0,0 +1 @@
+export { Spinner } from "@workspace/ui/components/spinner";
diff --git a/apps/portal/src/components/ui/Spinner/Spinner.module.css b/apps/portal/src/components/ui/Spinner/Spinner.module.css
deleted file mode 100644
index 0367a2f3d33..00000000000
--- a/apps/portal/src/components/ui/Spinner/Spinner.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.loader {
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 2s linear infinite;
-}
-
-.loader circle {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 4px solid #fff;
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/apps/portal/src/components/ui/Spinner/Spinner.tsx b/apps/portal/src/components/ui/Spinner/Spinner.tsx
deleted file mode 100644
index b15ce7b546a..00000000000
--- a/apps/portal/src/components/ui/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cn } from "../../../lib/utils";
-import style from "./Spinner.module.css";
-
-export function Spinner(props: { className?: string }) {
-  return (
-    <svg className={cn(style.loader, props.className)} viewBox="0 0 50 50">
-      <title>Loading</title>
-      <circle
-        cx="25"
-        cy="25"
-        fill="none"
-        r="20"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-    </svg>
-  );
-}
diff --git a/packages/ui/src/components/button.stories.tsx b/packages/ui/src/components/button.stories.tsx
index fd8cbc61194..c5da13a84ec 100644
--- a/packages/ui/src/components/button.stories.tsx
+++ b/packages/ui/src/components/button.stories.tsx
@@ -5,7 +5,7 @@ import { BadgeContainer } from "@/storybook/utils";
 
 const meta = {
   component: Component,
-  title: "Shadcn/Buttons",
+  title: "ui/button",
 } satisfies Meta<typeof Component>;
 
 export default meta;
diff --git a/apps/dashboard/src/@/components/blocks/Img.stories.tsx b/packages/ui/src/components/img.stories.tsx
similarity index 92%
rename from apps/dashboard/src/@/components/blocks/Img.stories.tsx
rename to packages/ui/src/components/img.stories.tsx
index 2d723fe646a..f22d14f17fe 100644
--- a/apps/dashboard/src/@/components/blocks/Img.stories.tsx
+++ b/packages/ui/src/components/img.stories.tsx
@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, Loader2 } from "lucide-react";
 import { useState } from "react";
+import { Button } from "@/components/button";
 import { BadgeContainer } from "@/storybook/utils";
-import { Button } from "../ui/button";
-import { Spinner } from "../ui/Spinner/Spinner";
-import { Img } from "./Img";
+import { Img } from "./img";
 
 const meta = {
   component: Story,
-  title: "blocks/Img",
+  title: "ui/img",
 } satisfies Meta<typeof Story>;
 
 export default meta;
@@ -54,7 +53,7 @@ function Story() {
           className="size-20"
           skeleton={
             <div className="flex items-center justify-center rounded-lg border">
-              <Spinner className="size-6" />
+              <Loader2 className="size-6 animate-spin" />
             </div>
           }
           src={undefined}
diff --git a/packages/ui/src/components/img.tsx b/packages/ui/src/components/img.tsx
new file mode 100644
index 00000000000..a7d5ec44fef
--- /dev/null
+++ b/packages/ui/src/components/img.tsx
@@ -0,0 +1,85 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+type imgElementProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> & {
+  skeleton?: React.ReactNode;
+  fallback?: React.ReactNode;
+  src: string | undefined;
+  containerClassName?: string;
+};
+
+export function Img(props: imgElementProps) {
+  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
+    "pending",
+  );
+  const status =
+    props.src === undefined
+      ? "pending"
+      : props.src === ""
+        ? "fallback"
+        : _status;
+  const { className, fallback, skeleton, containerClassName, ...restProps } =
+    props;
+  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
+  const defaultFallback = <div className="bg-accent" />;
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useLayoutEffect(() => {
+    const imgEl = imgRef.current;
+    if (!imgEl) {
+      return;
+    }
+    if (imgEl.complete) {
+      setStatus("loaded");
+    } else {
+      function handleLoad() {
+        setStatus("loaded");
+      }
+      imgEl.addEventListener("load", handleLoad);
+      return () => {
+        imgEl.removeEventListener("load", handleLoad);
+      };
+    }
+  }, []);
+
+  return (
+    <div className={cn("relative shrink-0", containerClassName)}>
+      <img
+        {...restProps}
+        // avoid setting empty src string to prevent request to the entire page
+        alt={restProps.alt || ""}
+        className={cn(
+          "fade-in-0 object-cover transition-opacity duration-300",
+          className,
+        )}
+        decoding="async"
+        onError={() => {
+          setStatus("fallback");
+        }}
+        ref={imgRef}
+        src={restProps.src || undefined}
+        style={{
+          opacity: status === "loaded" ? 1 : 0,
+          ...restProps.style,
+        }}
+      />
+
+      {status !== "loaded" && (
+        <div
+          className={cn(
+            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
+            className,
+          )}
+          style={restProps.style}
+        >
+          {status === "pending" && (skeleton || defaultSkeleton)}
+          {status === "fallback" && (fallback || defaultFallback)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/spinner.stories.tsx b/packages/ui/src/components/spinner.stories.tsx
new file mode 100644
index 00000000000..6e04e71125f
--- /dev/null
+++ b/packages/ui/src/components/spinner.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Spinner } from "./spinner";
+
+const meta = {
+  component: Component,
+  title: "ui/spinner",
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllVariants: Story = {
+  args: {},
+};
+
+function Component() {
+  return (
+    <div className="flex flex-col justify-center gap-8 items-center py-10">
+      <Spinner className="size-4" />
+      <Spinner className="size-5" />
+      <Spinner className="size-6" />
+      <Spinner className="size-7" />
+      <Spinner className="size-8" />
+      <Spinner className="size-9" />
+      <Spinner className="size-10" />
+      <Spinner className="size-11" />
+      <Spinner className="size-12" />
+      <Spinner className="size-12 text-red-500" />
+      <div className="text-blue-500">
+        <Spinner className="size-12" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/@/components/ui/Spinner/Spinner.tsx b/packages/ui/src/components/spinner.tsx
similarity index 69%
rename from apps/dashboard/src/@/components/ui/Spinner/Spinner.tsx
rename to packages/ui/src/components/spinner.tsx
index 52c9eb74057..59d26e79e9e 100644
--- a/apps/dashboard/src/@/components/ui/Spinner/Spinner.tsx
+++ b/packages/ui/src/components/spinner.tsx
@@ -1,13 +1,12 @@
 import { cn } from "@/lib/utils";
-import style from "./Spinner.module.css";
 
 export function Spinner(props: { className?: string }) {
   return (
     <svg
-      className={cn(style.loader, props.className || "size-4")}
+      className={cn("animate-spin ease-linear", props.className)}
       viewBox="0 0 50 50"
     >
-      <title>loading</title>
+      <title>Loading</title>
       <circle
         cx="25"
         cy="25"
@@ -15,6 +14,7 @@ export function Spinner(props: { className?: string }) {
         r="20"
         stroke="currentColor"
         strokeWidth="4"
+        className="animate-spinner"
       />
     </svg>
   );
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 9ee1890641a..039c9b39536 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -32,6 +32,7 @@ const config: Config = {
         "caret-blink": "caret-blink 1.25s ease-out infinite",
         skeleton: "skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "text-shimmer": "text-shimmer 1.25s linear infinite",
+        spinner: "spinner 1.5s ease-in-out infinite",
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -124,6 +125,11 @@ const config: Config = {
           "0%": { backgroundPosition: "100% 50%" },
           "100%": { backgroundPosition: "-100% 50%" },
         },
+        spinner: {
+          "0%": { strokeDasharray: "1, 150", strokeDashoffset: "0" },
+          "50%": { strokeDasharray: "90, 150", strokeDashoffset: "-35" },
+          "100%": { strokeDasharray: "90, 150", strokeDashoffset: "-124" },
+        },
       },
     },
   },