diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx
index a609e712d8..090b5a89ba 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx
@@ -2,7 +2,7 @@ import { ConfirmPopover } from "@/components/confirmation-popover";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { ArrowOppositeDirectionY, Ban, CircleCheck, Trash, XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
-import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@unkey/ui/src/lib/utils";
 import { useRef, useState } from "react";
 import { useDeleteKey } from "../actions/components/hooks/use-delete-key";
 import { useBatchUpdateKeyStatus } from "../actions/components/hooks/use-update-key-status";
@@ -24,6 +24,7 @@ export const SelectionControls = ({
   const [isBatchEditExternalIdOpen, setIsBatchEditExternalIdOpen] = useState(false);
   const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+
   const disableButtonRef = useRef<HTMLButtonElement>(null);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -57,98 +58,84 @@ export const SelectionControls = ({
     (key) => selectedKeys.has(key.id) && key.identity_id,
   ).length;
 
+  if (selectedKeys.size === 0) {
+    return null;
+  }
+
   return (
     <>
-      <AnimatePresence>
-        {selectedKeys.size > 0 && (
-          <motion.div
-            key="selection-controls"
-            className="border-b border-grayA-3"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{
-              opacity: 1,
-              y: 5,
-              transition: {
-                opacity: { duration: 0.3, ease: "easeOut" },
-                y: { duration: 0.3, ease: "easeOut" },
-              },
-            }}
-            exit={{
-              opacity: 0,
-              y: 10,
-              transition: {
-                opacity: { duration: 0.3, ease: "easeIn" },
-                y: { duration: 0.3, ease: "easeIn" },
-              },
-            }}
-          >
-            <div className="flex justify-between items-center w-full p-[18px]">
-              <div className="items-center flex gap-2">
-                <AnimatedCounter value={selectedKeys.size} />
-                <div className="text-accent-9 text-[13px] leading-6">selected</div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="text-gray-12 font-medium text-[13px]"
-                  onClick={() => setIsBatchEditExternalIdOpen(true)}
-                >
-                  <ArrowOppositeDirectionY size="sm-regular" /> Change External ID
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="text-gray-12 font-medium text-[13px]"
-                  disabled={getSelectedKeysState() !== "all-disabled" || updateKeyStatus.isLoading}
-                  loading={updateKeyStatus.isLoading}
-                  onClick={() =>
-                    updateKeyStatus.mutate({
-                      enabled: true,
-                      keyIds: Array.from(selectedKeys),
-                    })
-                  }
-                >
-                  <CircleCheck size="sm-regular" />
-                  Enable key
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="text-gray-12 font-medium text-[13px]"
-                  disabled={getSelectedKeysState() !== "all-enabled" || updateKeyStatus.isLoading}
-                  loading={updateKeyStatus.isLoading}
-                  onClick={handleDisableButtonClick}
-                  ref={disableButtonRef}
-                >
-                  <Ban size="sm-regular" />
-                  Disable key
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="text-gray-12 font-medium text-[13px]"
-                  disabled={deleteKey.isLoading}
-                  loading={deleteKey.isLoading}
-                  onClick={handleDeleteButtonClick}
-                  ref={deleteButtonRef}
-                >
-                  <Trash size="sm-regular" />
-                  Delete key
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="[&_svg]:size-[14px] ml-3"
-                  onClick={() => setSelectedKeys(new Set())}
-                >
-                  <XMark />
-                </Button>
-              </div>
-            </div>
-          </motion.div>
+      <div
+        className={cn(
+          "border-b border-grayA-3",
+          "animate-slideInFromTop opacity-0 translate-y-2",
+          "animation-fill-mode-forwards",
         )}
-      </AnimatePresence>
+      >
+        <div className="flex justify-between items-center w-full p-[18px]">
+          <div className="items-center flex gap-2">
+            <AnimatedCounter value={selectedKeys.size} />
+            <div className="text-accent-9 text-[13px] leading-6">selected</div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-gray-12 font-medium text-[13px]"
+              onClick={() => setIsBatchEditExternalIdOpen(true)}
+            >
+              <ArrowOppositeDirectionY size="sm-regular" /> Change External ID
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-gray-12 font-medium text-[13px]"
+              disabled={getSelectedKeysState() !== "all-disabled" || updateKeyStatus.isLoading}
+              loading={updateKeyStatus.isLoading}
+              onClick={() =>
+                updateKeyStatus.mutate({
+                  enabled: true,
+                  keyIds: Array.from(selectedKeys),
+                })
+              }
+            >
+              <CircleCheck size="sm-regular" />
+              Enable key
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-gray-12 font-medium text-[13px]"
+              disabled={getSelectedKeysState() !== "all-enabled" || updateKeyStatus.isLoading}
+              loading={updateKeyStatus.isLoading}
+              onClick={handleDisableButtonClick}
+              ref={disableButtonRef}
+            >
+              <Ban size="sm-regular" />
+              Disable key
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-gray-12 font-medium text-[13px]"
+              disabled={deleteKey.isLoading}
+              loading={deleteKey.isLoading}
+              onClick={handleDeleteButtonClick}
+              ref={deleteButtonRef}
+            >
+              <Trash size="sm-regular" />
+              Delete key
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="[&_svg]:size-[14px] ml-3"
+              onClick={() => setSelectedKeys(new Set())}
+            >
+              <XMark />
+            </Button>
+          </div>
+        </div>
+      </div>
 
       <ConfirmPopover
         isOpen={isDisableConfirmOpen}
@@ -186,50 +173,59 @@ export const SelectionControls = ({
           onClose={() => setIsBatchEditExternalIdOpen(false)}
         />
       )}
-    </>
-  );
-};
 
-const AnimatedDigit = ({ digit, index }: { digit: string; index: number }) => {
-  return (
-    <motion.span
-      key={`${digit}-${index}`}
-      initial={{ opacity: 0, y: -20 }}
-      animate={{
-        opacity: 1,
-        y: 0,
-        transition: {
-          type: "spring",
-          stiffness: 300,
-          damping: 30,
-          delay: index * 0.1,
-        },
-      }}
-      exit={{ opacity: 0, y: 20 }}
-      className="inline-block"
-    >
-      {digit}
-    </motion.span>
+      <style jsx>{`
+        @keyframes slideInFromTop {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes bounceIn {
+          0% {
+            opacity: 0;
+            transform: scale(0.5);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+
+        .animate-slideInFromTop {
+          animation: slideInFromTop 0.3s ease-out;
+        }
+
+        .animate-bounceIn {
+          animation: bounceIn 0.4s ease-out;
+        }
+
+        .animation-fill-mode-forwards {
+          animation-fill-mode: forwards;
+        }
+      `}</style>
+    </>
   );
 };
 
 export const AnimatedCounter = ({ value }: { value: number }) => {
-  const digits = value.toString().split("");
-
   return (
     <div
-      className="size-[18px] text-[11px] leading-6 ring-2 ring-gray-6 flex items-center justify-center font-medium overflow-hidden
-p-2 text-white dark:text-black bg-accent-12 hover:bg-accent-12/90 focus:hover:bg-accent-12 rounded-md border border-grayA-4
-"
+      key={`counter-${value}`}
+      className={cn(
+        "size-[18px] text-[11px] leading-6 ring-2 ring-gray-6 flex items-center justify-center font-medium overflow-hidden p-2 text-white dark:text-black bg-accent-12 hover:bg-accent-12/90 focus:hover:bg-accent-12 rounded-md border border-grayA-4",
+        "animate-bounceIn",
+      )}
     >
-      <AnimatePresence mode="wait">
-        <div key={value} className="flex items-center justify-center">
-          {digits.map((digit, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            <AnimatedDigit key={index} digit={digit} index={index} />
-          ))}
-        </div>
-      </AnimatePresence>
+      <span className="flex items-center justify-center">{value}</span>
     </div>
   );
 };
diff --git a/apps/dashboard/components/virtual-table/components/loading-indicator.tsx b/apps/dashboard/components/virtual-table/components/loading-indicator.tsx
index f33adb75f0..af13272c71 100644
--- a/apps/dashboard/components/virtual-table/components/loading-indicator.tsx
+++ b/apps/dashboard/components/virtual-table/components/loading-indicator.tsx
@@ -1,4 +1,6 @@
+import { ArrowsToAllDirections, ArrowsToCenter } from "@unkey/icons";
 import { Button } from "@unkey/ui";
+import { useCallback, useState } from "react";
 
 type LoadMoreFooterProps = {
   onLoadMore?: () => void;
@@ -26,46 +28,179 @@ export const LoadMoreFooter = ({
   hide,
   headerContent,
 }: LoadMoreFooterProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+
   const shouldShow = !!onLoadMore;
 
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
   if (hide) {
-    return;
+    return null;
+  }
+
+  // Minimized state - parked at right side
+  if (!isOpen) {
+    return (
+      <div
+        className="fixed bottom-6 right-6 z-10 transition-all duration-300 ease-out"
+        style={{
+          animation: "slideInFromBottom 0.3s ease-out",
+        }}
+      >
+        <button
+          type="button"
+          onClick={handleOpen}
+          className="bg-gray-1 dark:bg-black border border-gray-6 rounded-lg shadow-lg p-3 transition-all duration-200 hover:shadow-xl hover:scale-105 group"
+          title={`${buttonText} • ${totalVisible} of ${totalCount} ${itemLabel}`}
+        >
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2">
+              <span className="text-[11px] text-gray-9 font-medium">{countInfoText}</span>
+            </div>
+            <div className="w-px h-3 bg-gray-6" />
+            <span className="text-[12px] font-medium text-gray-11 group-hover:text-gray-12 transition-colors">
+              {buttonText}
+            </span>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="[&_svg]:size-[14px] transition-all duration-200 rounded hover:bg-gray-3 transform hover:scale-110"
+              title="Maximize"
+            >
+              <ArrowsToAllDirections size="sm-regular" />
+            </Button>
+          </div>
+        </button>
+      </div>
+    );
   }
 
   return (
     <div
-      className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-opacity duration-200"
+      className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-all duration-300 ease-out"
       style={{
         opacity: shouldShow ? 1 : 0,
         pointerEvents: shouldShow ? "auto" : "none",
+        animation: isOpen ? "slideUpFromBottom 0.3s ease-out" : undefined,
       }}
     >
-      <div className="w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg shadow-sm mb-5">
+      <div className="w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg shadow-sm mb-5 transition-all duration-200 hover:shadow-lg">
         <div className="flex flex-col w-full">
-          {headerContent}
-          <div className="flex w-full justify-between items-center text-[13px] text-accent-9 p-[18px]">
-            {countInfoText && <div>{countInfoText}</div>}
+          {/* Header content */}
+          {headerContent && (
+            <div
+              className="transition-all duration-200"
+              style={{
+                animation: "fadeInUp 0.3s ease-out 0.2s both",
+              }}
+            >
+              {headerContent}
+            </div>
+          )}
+
+          <div
+            className="flex w-full justify-between items-center text-[13px] text-accent-9 p-[18px] transition-all duration-200"
+            style={{
+              animation: "fadeInUp 0.3s ease-out 0.3s both",
+            }}
+          >
+            {countInfoText && <div className="transition-all duration-200">{countInfoText}</div>}
             {!countInfoText && (
-              <div className="flex gap-2">
-                <span>Viewing</span> <span className="text-accent-12">{totalVisible}</span>
+              <div className="flex gap-2 transition-all duration-200">
+                <span>Viewing</span>
+                <span className="text-accent-12 transition-colors duration-200">
+                  {totalVisible}
+                </span>
                 <span>of</span>
-                <span className="text-grayA-12">{totalCount}</span>
+                <span className="text-grayA-12 transition-colors duration-200">{totalCount}</span>
                 <span>{itemLabel}</span>
               </div>
             )}
 
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onLoadMore}
-              loading={isFetchingNextPage}
-              disabled={isFetchingNextPage || !hasMore}
-            >
-              {buttonText}
-            </Button>
+            <div className="items-center flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onLoadMore}
+                loading={isFetchingNextPage}
+                disabled={isFetchingNextPage || !hasMore}
+                className="transition-all"
+              >
+                {buttonText}
+              </Button>
+              <div
+                className="flex justify-end transition-all duration-200"
+                style={{
+                  animation: "fadeInDown 0.3s ease-out 0.1s both",
+                }}
+              >
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="[&_svg]:size-[14px] transition-all duration-200 rounded hover:bg-gray-3 transform hover:scale-110"
+                  onClick={handleClose}
+                  title="Minimize"
+                >
+                  <ArrowsToCenter size="lg-regular" />
+                </Button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      {/* CSS Keyframes */}
+      <style jsx>{`
+        @keyframes slideUpFromBottom {
+          from {
+            opacity: 0;
+            transform: translateY(100%);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slideInFromBottom {
+          from {
+            opacity: 0;
+            transform: translateY(20px) scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+
+        @keyframes fadeInDown {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
     </div>
   );
 };
diff --git a/internal/icons/src/icons/arrows-to-all-directions.tsx b/internal/icons/src/icons/arrows-to-all-directions.tsx
new file mode 100644
index 0000000000..49a1abf683
--- /dev/null
+++ b/internal/icons/src/icons/arrows-to-all-directions.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright © Nucleo
+ * Version 1.3, January 3, 2024
+ * Nucleo Icons
+ * https://nucleoapp.com/
+ * - Redistribution of icons is prohibited.
+ * - Icons are restricted for use only within the product they are bundled with.
+ *
+ * For more details:
+ * https://nucleoapp.com/license
+ */
+import type React from "react";
+import { type IconProps, sizeMap } from "../props";
+
+export const ArrowsToAllDirections: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
+
+  return (
+    <svg
+      height={pixelSize}
+      width={pixelSize}
+      {...props}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="2.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="2.25 5.75 2.25 2.25 5.75 2.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="12.25 2.25 15.75 2.25 15.75 5.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="15.75 12.25 15.75 15.75 12.25 15.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="5.75 15.75 2.25 15.75 2.25 12.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="2.25"
+          x2="5.5"
+          y1="2.25"
+          y2="5.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="15.75"
+          x2="12.5"
+          y1="2.25"
+          y2="5.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="15.75"
+          x2="12.5"
+          y1="15.75"
+          y2="12.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="2.25"
+          x2="5.5"
+          y1="15.75"
+          y2="12.5"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/internal/icons/src/icons/arrows-to-center.tsx b/internal/icons/src/icons/arrows-to-center.tsx
new file mode 100644
index 0000000000..d8f1bfa201
--- /dev/null
+++ b/internal/icons/src/icons/arrows-to-center.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright © Nucleo
+ * Version 1.3, January 3, 2024
+ * Nucleo Icons
+ * https://nucleoapp.com/
+ * - Redistribution of icons is prohibited.
+ * - Icons are restricted for use only within the product they are bundled with.
+ *
+ * For more details:
+ * https://nucleoapp.com/license
+ */
+import type React from "react";
+import { type IconProps, sizeMap } from "../props";
+
+export const ArrowsToCenter: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
+
+  return (
+    <svg
+      height={pixelSize}
+      width={pixelSize}
+      {...props}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="2.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="5.75 2.25 5.75 5.75 2.25 5.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="15.75 5.75 12.25 5.75 12.25 2.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="12.25 15.75 12.25 12.25 15.75 12.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <polyline
+          fill="none"
+          points="2.25 12.25 5.75 12.25 5.75 15.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="5.75"
+          x2="2.5"
+          y1="5.75"
+          y2="2.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="12.25"
+          x2="15.5"
+          y1="5.75"
+          y2="2.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="12.25"
+          x2="15.5"
+          y1="12.25"
+          y2="15.5"
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="5.75"
+          x2="2.5"
+          y1="12.25"
+          y2="15.5"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/internal/icons/src/index.ts b/internal/icons/src/index.ts
index 5f251f936f..b8b10f5719 100644
--- a/internal/icons/src/index.ts
+++ b/internal/icons/src/index.ts
@@ -4,6 +4,8 @@ export * from "./icons/arrow-dotted-rotate-anticlockwise";
 export * from "./icons/arrow-opposite-direction-y";
 export * from "./icons/arrow-right";
 export * from "./icons/arrow-up-right";
+export * from "./icons/arrows-to-all-directions";
+export * from "./icons/arrows-to-center";
 export * from "./icons/ban";
 export * from "./icons/bars-filter";
 export * from "./icons/bolt";