From e3e64a06e033cdf99a41a743438fcc6030a36263 Mon Sep 17 00:00:00 2001
From: sayyadshahid <shahidsayyed0212@gmail.com>
Date: Wed, 10 Dec 2025 21:10:27 +0530
Subject: [PATCH 1/4] setup completed

---
 frontend/package-lock.json | 50 ++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1e1ddd5f..5c4674b22 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -128,6 +128,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -780,6 +781,7 @@
       "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
       },
@@ -1705,6 +1707,7 @@
       "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
         "@babel/helper-module-imports": "^7.27.1",
@@ -5354,8 +5357,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -5533,6 +5535,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
       "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -5550,6 +5553,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -5560,6 +5564,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5689,6 +5694,7 @@
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -5935,6 +5941,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6641,6 +6648,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -7349,8 +7357,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -7709,6 +7716,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -9753,6 +9761,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -11237,7 +11246,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -11924,6 +11932,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11956,6 +11965,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -12059,7 +12069,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -12075,7 +12084,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -12195,6 +12203,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12253,6 +12262,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -12288,14 +12298,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -12457,7 +12467,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -13420,6 +13431,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13560,6 +13572,7 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -13792,6 +13805,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14050,6 +14064,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -14182,6 +14197,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14476,20 +14492,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

From 78d234d6a49c6d31db0472806d832fa7d5086b7f Mon Sep 17 00:00:00 2001
From: sayyadshahid <shahidsayyed0212@gmail.com>
Date: Wed, 7 Jan 2026 09:21:51 +0530
Subject: [PATCH 2/4] fix(ui): smooth close animation for media info panel

---
 frontend/package-lock.json                    |  7 ++--
 frontend/package.json                         |  1 +
 .../src/components/Media/MediaInfoPanel.tsx   | 33 ++++++++++++++++---
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5c4674b22..d38e56db1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -73,6 +73,7 @@
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
+        "baseline-browser-mapping": "^2.9.11",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-react-app": "^7.0.1",
@@ -6595,9 +6596,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.20",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz",
-      "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==",
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/frontend/package.json b/frontend/package.json
index 0a53f1b8d..147467cca 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -88,6 +88,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
+    "baseline-browser-mapping": "^2.9.11",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
diff --git a/frontend/src/components/Media/MediaInfoPanel.tsx b/frontend/src/components/Media/MediaInfoPanel.tsx
index c192aef4b..48cd7ac78 100644
--- a/frontend/src/components/Media/MediaInfoPanel.tsx
+++ b/frontend/src/components/Media/MediaInfoPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { open } from '@tauri-apps/plugin-shell';
 import {
   X,
@@ -26,6 +26,19 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
   currentIndex,
   totalImages,
 }) => {
+  const [isVisible, setIsVisible] = useState(show);
+
+  useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+    }
+  }, [show]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(onClose, 300); // must match animation duration
+  };
+
   const getFormattedDate = () => {
     if (currentImage?.metadata?.date_created) {
       return new Date(currentImage.metadata.date_created).toLocaleDateString(
@@ -58,19 +71,29 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
     }
   };
 
-  if (!show) return null;
+  if (!show && !isVisible) return null;
+
 
   return (
-    <div className="animate-in slide-in-from-left absolute top-10 left-6 z-50 w-[350px] rounded-xl border border-white/10 bg-black/60 p-6 shadow-xl backdrop-blur-lg transition-all duration-300">
+    <div
+      className={`
+    absolute top-10 left-6 z-50 w-[350px]
+    rounded-xl border border-white/10 bg-black/60 p-6
+    shadow-xl backdrop-blur-lg
+    transform transition-all duration-300 ease-in-out
+    ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-6'}
+  `}
+    >
       <div className="mb-4 flex items-center justify-between border-b border-white/10 pb-3">
         <h3 className="text-xl font-medium text-white">Image Details</h3>
         <button
-          onClick={onClose}
+          onClick={handleClose}
           className="text-white/70 hover:text-white"
           aria-label="Close info panel"
         >
           <X className="h-5 w-5" />
         </button>
+
       </div>
 
       <div className="space-y-4 text-sm">
@@ -106,7 +129,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           <div className="min-w-0 flex-1">
             <p className="text-xs text-white/50">Location</p>
             {currentImage?.metadata?.latitude &&
-            currentImage?.metadata?.longitude ? (
+              currentImage?.metadata?.longitude ? (
               <button
                 type="button"
                 onClick={handleLocationClick}

From 44c1e176bec0130d76065b01f471d428445f02c8 Mon Sep 17 00:00:00 2001
From: sayyadshahid <shahidsayyed0212@gmail.com>
Date: Wed, 7 Jan 2026 21:57:23 +0530
Subject: [PATCH 3/4] baseline-browser-mapping removed this dependency

---
 frontend/package-lock.json | 1 -
 frontend/package.json      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d38e56db1..a0b16bfd2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -73,7 +73,6 @@
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
-        "baseline-browser-mapping": "^2.9.11",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-react-app": "^7.0.1",
diff --git a/frontend/package.json b/frontend/package.json
index 147467cca..0a53f1b8d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -88,7 +88,6 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
-    "baseline-browser-mapping": "^2.9.11",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",

From e150827e78de749eb5ce8c830a173898ed06bedf Mon Sep 17 00:00:00 2001
From: sayyadshahid <shahidsayyed0212@gmail.com>
Date: Wed, 7 Jan 2026 21:58:24 +0530
Subject: [PATCH 4/4] feat(ui): add floating back-to-top button for improved
 navigation

---
 .../ScrollToTopButton/ScrollToTopButton.tsx   | 57 +++++++++++++++++++
 frontend/src/pages/Home/Home.tsx              |  6 +-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ScrollToTopButton/ScrollToTopButton.tsx

diff --git a/frontend/src/components/ScrollToTopButton/ScrollToTopButton.tsx b/frontend/src/components/ScrollToTopButton/ScrollToTopButton.tsx
new file mode 100644
index 000000000..b2570a821
--- /dev/null
+++ b/frontend/src/components/ScrollToTopButton/ScrollToTopButton.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+
+type ScrollToTopButtonProps = {
+  scrollContainerRef?: React.RefObject<HTMLElement | null>;
+  threshold?: number;
+};
+
+export const ScrollToTopButton = ({
+  scrollContainerRef,
+  threshold = 300,
+}: ScrollToTopButtonProps) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const scroller = scrollContainerRef?.current || window;
+
+    const handleScroll = () => {
+      const scrollTop =
+        scroller instanceof Window
+          ? window.scrollY
+          : scroller.scrollTop;
+
+      setVisible(scrollTop > threshold);
+    };
+
+    scroller.addEventListener('scroll', handleScroll);
+    return () => scroller.removeEventListener('scroll', handleScroll);
+  }, [scrollContainerRef, threshold]);
+
+  const scrollToTop = () => {
+    const scroller = scrollContainerRef?.current;
+
+    if (scroller) {
+      scroller.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Scroll to top"
+      className="
+        fixed top-35 right-15 z-50
+        rounded-full bg-primary p-3
+        text-white shadow-lg
+        transition-all duration-300
+        hover:scale-110 hover:shadow-xl
+      "
+    >
+      ↑
+    </button>
+  );
+};
diff --git a/frontend/src/pages/Home/Home.tsx b/frontend/src/pages/Home/Home.tsx
index 83c9e5c83..f342b1ca6 100644
--- a/frontend/src/pages/Home/Home.tsx
+++ b/frontend/src/pages/Home/Home.tsx
@@ -13,6 +13,7 @@ import { fetchAllImages } from '@/api/api-functions';
 import { RootState } from '@/app/store';
 import { EmptyGalleryState } from '@/components/EmptyStates/EmptyGalleryState';
 import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { ScrollToTopButton } from '@/components/ScrollToTopButton/ScrollToTopButton';
 
 export const Home = () => {
   const dispatch = useDispatch();
@@ -48,7 +49,7 @@ export const Home = () => {
   const title =
     isSearchActive && images.length > 0
       ? `Face Search Results (${images.length} found)`
-      : 'Image Gallery';
+      : 'Image Gallery'; 
 
   return (
     <div className="relative flex h-full flex-col pr-6">
@@ -78,6 +79,9 @@ export const Home = () => {
           className="absolute top-0 right-0 h-full w-4"
         />
       )}
+
+      <ScrollToTopButton scrollContainerRef={scrollableRef} />
     </div>
+    
   );
 };