diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 324268a..7c8d783 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -155,3 +155,8 @@
   padding: 0 16px 4px;
   min-height: 80vh;
 }
+
+.beacon {
+  position: relative;
+  top: -64px;
+}
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 80d36a2..2d7b88c 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -39,6 +39,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
         className="grid-container"
         style={{ backgroundColor: isDark ? "#35313D" : "" }}
       >
+        <i id="beacon" className="beacon" />
         <motion.div
           className="grid"
           initial="hidden"
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 9e62a0a..23238c5 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -13,7 +13,17 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   const [query, setQuery] = useRecoilState(searchQueryAtom);
   void query;
 
-  const [isReady] = useDebounce(() => setQuery(value), 250, [value]);
+  const [isReady] = useDebounce(
+    () => {
+      setQuery(value);
+      value &&
+        void document
+          .getElementById("beacon")
+          ?.scrollIntoView({ block: "start", behavior: "smooth" });
+    },
+    250,
+    [value]
+  );
 
   const handleCancelSearch = () => {
     setValue("");