diff --git a/components/CompatibilityTags.tsx b/components/CompatibilityTags.tsx
index 5b432fca..fc3123f2 100644
--- a/components/CompatibilityTags.tsx
+++ b/components/CompatibilityTags.tsx
@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 
-import { A } from '~/common/styleguide';
+import { A, useLayout } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
 import tw from '~/util/tailwind';
 
@@ -11,9 +11,12 @@ import Tooltip from './Tooltip';
 
 type Props = {
   library: LibraryType;
+  small?: boolean;
 };
 
-export default function CompatibilityTags({ library }: Props) {
+export default function CompatibilityTags({ library, small }: Props) {
+  const { isSmallScreen } = useLayout();
+
   const platforms = [
     library.android ? 'Android' : null,
     library.ios ? 'iOS' : null,
@@ -25,12 +28,13 @@ export default function CompatibilityTags({ library }: Props) {
   ].filter(Boolean);
 
   return (
-    <View style={tw`flex-row flex-wrap items-center gap-1.5`}>
+    <View style={tw`max-w-full flex-row flex-wrap items-center gap-1.5`}>
       {library.dev ? (
         <Tag
           label="Development Tool"
           tagStyle={tw`border-[#d9c8fa] bg-[#ece3fc] dark:border-[#3d2861] dark:bg-[#261a3d]`}
           icon={null}
+          small={small}
         />
       ) : null}
       {library.template ? (
@@ -38,50 +42,53 @@ export default function CompatibilityTags({ library }: Props) {
           label="Template"
           tagStyle={tw`border-[#f5c6e8] bg-[#fce1f5] dark:border-[#52213e] dark:bg-[#37172e]`}
           icon={null}
+          small={small}
         />
       ) : null}
-      {!library.dev && !library.template && <NewArchitectureTag library={library} />}
+      {!library.dev && !library.template && <NewArchitectureTag library={library} small={small} />}
       {platforms.map(platform =>
         platform ? (
           <Tag
             label={platform}
             key={`${platform}-platform`}
             tagStyle={tw`border-palette-gray2 bg-palette-gray1 dark:border-default dark:bg-dark`}
+            small={small}
           />
         ) : null
       )}
-      {(library.expoGo ?? library.fireos ?? library.vegaos ?? library.horizon) && (
-        <Tooltip
-          side="bottom"
-          trigger={
-            <View
-              style={tw`cursor-pointer items-center justify-center rounded-full`}
-              role="button"
-              aria-label="Additional information">
-              <Info style={tw`text-icon`} />
-            </View>
-          }>
-          Additional information
-          <br />
-          <ul style={tw`m-0 pl-3.5`}>
-            {library.expoGo && <li>Works with Expo Go</li>}
-            {library.fireos && <li>Works with Fire OS</li>}
-            {library.horizon && <li>Works with Meta Horizon OS</li>}
-            {library.vegaos && typeof library.vegaos === 'boolean' && <li>Works with Vega OS</li>}
-            {library.vegaos && typeof library.vegaos === 'string' && (
-              <li>
-                Works with Vega OS
-                <br />
-                <A
-                  href={`https://www.npmjs.com/package/${library.vegaos}`}
-                  style={tw`text-xs font-light text-white`}>
-                  (via dedicated support package)
-                </A>
-              </li>
-            )}
-          </ul>
-        </Tooltip>
-      )}
+      {!(small && isSmallScreen) &&
+        (library.expoGo ?? library.fireos ?? library.vegaos ?? library.horizon) && (
+          <Tooltip
+            side="bottom"
+            trigger={
+              <View
+                style={tw`cursor-pointer items-center justify-center rounded-full`}
+                role="button"
+                aria-label="Additional information">
+                <Info style={tw`text-icon`} />
+              </View>
+            }>
+            Additional information
+            <br />
+            <ul style={tw`m-0 pl-3.5`}>
+              {library.expoGo && <li>Works with Expo Go</li>}
+              {library.fireos && <li>Works with Fire OS</li>}
+              {library.horizon && <li>Works with Meta Horizon OS</li>}
+              {library.vegaos && typeof library.vegaos === 'boolean' && <li>Works with Vega OS</li>}
+              {library.vegaos && typeof library.vegaos === 'string' && (
+                <li>
+                  Works with Vega OS
+                  <br />
+                  <A
+                    href={`https://www.npmjs.com/package/${library.vegaos}`}
+                    style={tw`text-xs font-light text-white`}>
+                    (via dedicated support package)
+                  </A>
+                </li>
+              )}
+            </ul>
+          </Tooltip>
+        )}
     </View>
   );
 }
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 6c000e30..c971ca00 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -1251,7 +1251,7 @@ export function FundingGitHub({ width = 24, height = 24, style }: IconProps) {
 export function RSS({ width = 24, height = 24, style }: IconProps) {
   return (
     <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
-      <path
+      <Path
         d="M64,40A152,152,0,0,1,216,192"
         fill="none"
         stroke="currentColor"
@@ -1259,7 +1259,7 @@ export function RSS({ width = 24, height = 24, style }: IconProps) {
         strokeLinejoin="round"
         strokeWidth="24"
       />
-      <path
+      <Path
         d="M64,112a80,80,0,0,1,80,80"
         fill="none"
         stroke="currentColor"
@@ -1267,7 +1267,102 @@ export function RSS({ width = 24, height = 24, style }: IconProps) {
         strokeLinejoin="round"
         strokeWidth="20"
       />
-      <circle cx="68" cy="188" r="12" fill="currentColor" />
+      <Circle cx="68" cy="188" r="12" fill="currentColor" />
+    </Svg>
+  );
+}
+
+export function Spinner({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style} id="spinner">
+      <Line
+        x1="128"
+        y1="32"
+        x2="128"
+        y2="64"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="195.88"
+        y1="60.12"
+        x2="173.25"
+        y2="82.75"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="224"
+        y1="128"
+        x2="192"
+        y2="128"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="195.88"
+        y1="195.88"
+        x2="173.25"
+        y2="173.25"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="128"
+        y1="224"
+        x2="128"
+        y2="192"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="60.12"
+        y1="195.88"
+        x2="82.75"
+        y2="173.25"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="32"
+        y1="128"
+        x2="64"
+        y2="128"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="60.12"
+        y1="60.12"
+        x2="82.75"
+        y2="82.75"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
     </Svg>
   );
 }
diff --git a/components/Library/LibraryDescription.tsx b/components/Library/LibraryDescription.tsx
index 5b5cbf6d..4f951e2f 100644
--- a/components/Library/LibraryDescription.tsx
+++ b/components/Library/LibraryDescription.tsx
@@ -1,5 +1,7 @@
 import * as emoji from 'node-emoji';
 import { Linkify } from 'react-easy-linkify';
+import { type StyleProp } from 'react-native';
+import { type Style } from 'twrnc';
 
 import { A, Caption, Headline } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
@@ -8,11 +10,12 @@ import tw from '~/util/tailwind';
 type Props = {
   github: LibraryType['github'];
   maxLines?: number;
+  style?: StyleProp<Style>;
 };
 
-export default function LibraryDescription({ github, maxLines }: Props) {
+export default function LibraryDescription({ github, maxLines, style }: Props) {
   return github.description && github.description.length > 0 ? (
-    <Headline numberOfLines={maxLines} style={tw`text-base font-light leading-snug`}>
+    <Headline numberOfLines={maxLines} style={[tw`text-base font-light leading-snug`, style]}>
       <Linkify
         options={{
           linkWrapper: ({ children, ...rest }) => <A {...rest}>{children}</A>,
@@ -21,7 +24,8 @@ export default function LibraryDescription({ github, maxLines }: Props) {
       </Linkify>
     </Headline>
   ) : (
-    <Caption style={tw`text-base font-light leading-snug text-palette-gray4 dark:text-secondary`}>
+    <Caption
+      style={[tw`text-base font-light leading-snug text-palette-gray4 dark:text-secondary`, style]}>
       The package does not have a description defined.
     </Caption>
   );
diff --git a/components/Library/NewArchitectureTag.tsx b/components/Library/NewArchitectureTag.tsx
index 3e45cbed..50c3fc58 100644
--- a/components/Library/NewArchitectureTag.tsx
+++ b/components/Library/NewArchitectureTag.tsx
@@ -11,9 +11,10 @@ import tw from '~/util/tailwind';
 
 type Props = {
   library: LibraryType;
+  small?: boolean;
 };
 
-export function NewArchitectureTag({ library }: Props) {
+export function NewArchitectureTag({ library, small = false }: Props) {
   const status = getNewArchSupportStatus(library);
   const icon = getTagIcon(status);
 
@@ -38,6 +39,7 @@ export function NewArchitectureTag({ library }: Props) {
     <View>
       <Tooltip
         side="bottom"
+        sideOffset={small ? 0 : undefined}
         trigger={
           <View>
             <A href="https://reactnative.dev/architecture/overview">
@@ -49,6 +51,7 @@ export function NewArchitectureTag({ library }: Props) {
                 }
                 icon={icon}
                 tagStyle={getTagColor(status)}
+                small={small}
               />
             </A>
           </View>
@@ -70,7 +73,7 @@ function getTagColor(status: NewArchSupportStatus) {
   switch (status) {
     case NewArchSupportStatus.NewArchOnly:
     case NewArchSupportStatus.Supported:
-      return tw`border-[#d4ebfa] bg-[#edf6fc] dark:border-[#203b4d] dark:bg-[#142733]`;
+      return tw`border-[#c3e3f7] bg-[#edf6fc] dark:border-[#203b4d] dark:bg-[#142733]`;
     case NewArchSupportStatus.Unsupported:
       return tw`border-[#faebaf] bg-[#fffae8] dark:border-[#3d3206] dark:bg-[#292005]`;
     default:
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 71322341..d7c81d14 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -30,15 +30,17 @@ export default function Navigation({
       {header ?? (
         <View
           style={[
-            tw`overflow-hidden bg-palette-gray6 py-10 dark:bg-dark`,
+            tw`relative z-10 bg-palette-gray6 py-10 dark:bg-dark`,
             isSmallScreen && tw`py-6`,
             style,
           ]}>
-          <Logo
-            width={580}
-            height={520}
-            style={tw`absolute left-1/2 top-[-76px] ml-[-280px] text-palette-gray5 opacity-15 dark:text-palette-gray7`}
-          />
+          <View style={tw`absolute inset-0 overflow-hidden`}>
+            <Logo
+              width={580}
+              height={520}
+              style={tw`absolute left-1/2 top-[-76px] ml-[-280px] text-palette-gray5 opacity-15 dark:text-palette-gray7`}
+            />
+          </View>
           <H1
             style={[
               tw`px-5 text-center text-[42px] leading-[54px] text-white`,
diff --git a/components/QuickSearch.tsx b/components/QuickSearch.tsx
new file mode 100644
index 00000000..dd80f3bd
--- /dev/null
+++ b/components/QuickSearch.tsx
@@ -0,0 +1,283 @@
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
+import { type ColorValue, type StyleProp, TextInput, View, type ViewStyle } from 'react-native';
+import useSWR from 'swr';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { Caption, Label, useLayout } from '~/common/styleguide';
+import InputKeyHint from '~/components/InputKeyHint';
+import { type APIResponseType } from '~/types';
+import isAppleDevice from '~/util/isAppleDevice';
+import tw from '~/util/tailwind';
+import urlWithQuery from '~/util/urlWithQuery';
+
+import { Search as SearchIcon, Spinner } from './Icons';
+import QuickSearchResult from './QuickSearchResult';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+};
+
+const RESULTS_LIMIT = 5;
+
+export default function QuickSearch({ style }: Props) {
+  const [isInputFocused, setInputFocused] = useState(false);
+  const [activeResultIndex, setActiveResultIndex] = useState<number | null>(null);
+  const [search, setSearch] = useState('');
+
+  const isApple = useMemo<boolean>(() => isAppleDevice(), []);
+  const inputRef = useRef<TextInput>(null);
+
+  const { push } = useRouter();
+  const { isSmallScreen } = useLayout();
+
+  const { data, isLoading } = useSWR<APIResponseType | undefined>(
+    search.length ? `/api/libraries?search=${search}&limit=${RESULTS_LIMIT}` : undefined,
+    (url: string) => fetch(url).then(res => res.json()),
+    {
+      revalidateOnFocus: false,
+    }
+  );
+  const libraries = useMemo(() => data?.libraries ?? [], [data?.libraries]);
+  const hasResults = Boolean(data?.total && data.total > 0);
+  const shouldShowResults = search.length > 0 && isInputFocused;
+
+  useEffect(() => {
+    if (isApple !== null) {
+      document.addEventListener('keydown', keyDownListener, false);
+      return () => document.removeEventListener('keydown', keyDownListener);
+    }
+  }, [isApple]);
+
+  useEffect(() => {
+    if (!shouldShowResults || libraries.length === 0) {
+      setActiveResultIndex(null);
+      return;
+    }
+
+    if (activeResultIndex !== null && activeResultIndex >= libraries.length) {
+      setActiveResultIndex(libraries.length - 1);
+    }
+  }, [activeResultIndex, libraries.length, shouldShowResults]);
+
+  const keyDownListener = useEffectEvent((event: KeyboardEvent) => {
+    if (event.key === 'k' && (isApple ? event.metaKey : event.ctrlKey)) {
+      event.preventDefault();
+      inputRef.current?.focus();
+    }
+  });
+
+  const typingCallback = useDebouncedCallback((text: string) => {
+    setSearch(text);
+  }, 200);
+
+  const handleSearchChange = useCallback(
+    (text: string) => {
+      setActiveResultIndex(null);
+      typingCallback(text);
+    },
+    [typingCallback]
+  );
+
+  const handleInputFocus = useCallback(() => {
+    setInputFocused(true);
+  }, []);
+
+  const handleInputBlur = useCallback(() => {
+    setInputFocused(false);
+    setActiveResultIndex(null);
+  }, []);
+
+  const handleResultHoverChange = useCallback((index: number | null) => {
+    setActiveResultIndex(index);
+  }, []);
+
+  const handleArrowDownPress = useCallback(() => {
+    setActiveResultIndex(currentIndex => {
+      if (libraries.length === 0) {
+        return null;
+      }
+
+      if (currentIndex === null) {
+        return 0;
+      }
+
+      return Math.min(currentIndex + 1, libraries.length - 1);
+    });
+  }, [libraries.length]);
+
+  const handleArrowUpPress = useCallback(() => {
+    setActiveResultIndex(currentIndex => {
+      if (libraries.length === 0) {
+        return null;
+      }
+
+      if (currentIndex === null) {
+        return libraries.length - 1;
+      }
+
+      return Math.max(currentIndex - 1, 0);
+    });
+  }, [libraries.length]);
+
+  const handleResultSelect = useCallback(
+    async (npmPkg: string) => {
+      setInputFocused(false);
+      inputRef.current?.blur();
+      setActiveResultIndex(null);
+      await push(urlWithQuery(`/package/${npmPkg}`));
+    },
+    [push]
+  );
+
+  return (
+    <>
+      <View style={[tw`items-center bg-palette-gray6 py-3.5 dark:bg-dark`, style]}>
+        <View style={tw`relative z-20 w-full max-w-layout px-5`}>
+          <View style={tw`flex-row items-center`}>
+            <View style={tw`pointer-events-none absolute left-4`}>
+              {isLoading ? (
+                <Spinner style={tw`-ml-0.5 text-primary`} />
+              ) : (
+                <SearchIcon style={isInputFocused ? tw`text-primary` : tw`text-white`} />
+              )}
+            </View>
+            <TextInput
+              ref={inputRef}
+              id="search"
+              autoComplete="off"
+              onKeyPress={event => {
+                if ('key' in event) {
+                  if (typeof event.key !== 'string') {
+                    return;
+                  }
+
+                  if (event.key === 'ArrowDown') {
+                    if (shouldShowResults && hasResults) {
+                      event.preventDefault();
+                      handleArrowDownPress();
+                    }
+                  }
+
+                  if (event.key === 'ArrowUp') {
+                    if (shouldShowResults && hasResults) {
+                      event.preventDefault();
+                      handleArrowUpPress();
+                    }
+                  }
+
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+
+                    if (activeResultIndex !== null && libraries[activeResultIndex]) {
+                      void handleResultSelect(libraries[activeResultIndex].npmPkg);
+                      return;
+                    }
+
+                    void push(urlWithQuery('/packages', { search }));
+                  }
+
+                  if (
+                    event.key === 'k' &&
+                    (('metaKey' in event && event.metaKey) || ('ctrlKey' in event && event.ctrlKey))
+                  ) {
+                    event.preventDefault();
+                  }
+
+                  if (inputRef.current && event.key === 'Escape') {
+                    if (activeResultIndex !== null) {
+                      event.preventDefault();
+                      setActiveResultIndex(null);
+                      return;
+                    }
+
+                    if (search) {
+                      event.preventDefault();
+                      inputRef.current.clear();
+                      setSearch('');
+                    } else {
+                      inputRef.current.blur();
+                    }
+                  }
+                }
+              }}
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
+              onChangeText={handleSearchChange}
+              placeholder="Search libraries..."
+              style={tw`h-12.5 font-sans pr-30 flex flex-1 rounded-md border-2 border-palette-gray5 bg-palette-gray6 p-4 pl-11 text-xl text-white -outline-offset-2 dark:border-default dark:bg-dark`}
+              placeholderTextColor={tw`text-palette-gray4`.color as ColorValue}
+            />
+            {!isSmallScreen && (
+              <View style={tw`pointer-events-none absolute right-4 flex-row items-center gap-1`}>
+                {isInputFocused ? (
+                  <InputKeyHint
+                    content={[
+                      { label: 'press' },
+                      { key: 'Enter' },
+                      {
+                        label:
+                          activeResultIndex !== null
+                            ? 'to open highlighted result'
+                            : 'to see all results',
+                      },
+                    ]}
+                  />
+                ) : (
+                  <InputKeyHint
+                    content={[{ key: isApple ? 'Cmd' : 'Ctrl' }, { label: '+' }, { key: 'K' }]}
+                  />
+                )}
+              </View>
+            )}
+          </View>
+        </View>
+        {shouldShowResults && (
+          <View
+            id="quick-search-results"
+            style={tw`absolute inset-x-5 top-[60px] z-10 rounded-b border-2 border-t-0 border-pewter shadow-xl dark:border-default`}>
+            {hasResults && (
+              <View style={tw`pb-1.5 pt-2`}>
+                {libraries.map((lib, index) => (
+                  <QuickSearchResult
+                    key={lib.npmPkg}
+                    index={index}
+                    library={lib}
+                    isActive={activeResultIndex === index}
+                    onHoverChange={handleResultHoverChange}
+                    onSelect={handleResultSelect}
+                  />
+                ))}
+              </View>
+            )}
+            {hasResults && (data?.total ?? 0) > RESULTS_LIMIT && (
+              <View
+                style={[
+                  tw`flex flex-row items-center gap-1.5 rounded-b border-t border-default bg-palette-gray1 px-3 py-1.5 dark:bg-dark`,
+                  isSmallScreen ? tw`justify-center` : tw`justify-end`,
+                ]}>
+                <Label style={tw`font-light text-palette-gray4`}>
+                  There are{' '}
+                  <span style={tw`font-medium text-primary-darker dark:text-primary`}>
+                    {(data?.total ?? 0) - RESULTS_LIMIT}
+                  </span>{' '}
+                  more results
+                  {!isSmallScreen && (
+                    <>
+                      , press <span style={tw`font-medium`}>Enter</span> to see all of them
+                    </>
+                  )}
+                </Label>
+              </View>
+            )}
+            {!hasResults && (
+              <Caption style={tw`pb-4.5 pt-5.5 text-center font-light text-secondary`}>
+                There are no results for &quot;{search}&quot; query.
+              </Caption>
+            )}
+          </View>
+        )}
+      </View>
+    </>
+  );
+}
diff --git a/components/QuickSearchResult.tsx b/components/QuickSearchResult.tsx
new file mode 100644
index 00000000..4557d956
--- /dev/null
+++ b/components/QuickSearchResult.tsx
@@ -0,0 +1,81 @@
+import { memo, useCallback } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Caption, useLayout } from '~/common/styleguide';
+import CompatibilityTags from '~/components/CompatibilityTags';
+import { Warning } from '~/components/Icons';
+import LibraryDescription from '~/components/Library/LibraryDescription';
+import Tooltip from '~/components/Tooltip';
+import { type LibraryType } from '~/types';
+import tw from '~/util/tailwind';
+
+type Props = {
+  index: number;
+  isActive: boolean;
+  library: LibraryType;
+  onHoverChange: (index: number | null) => void;
+  onSelect: (npmPkg: string) => Promise<void>;
+};
+
+function QuickSearchResult({ index, isActive, library, onHoverChange, onSelect }: Props) {
+  const { isSmallScreen } = useLayout();
+
+  const handleHoverIn = useCallback(() => {
+    onHoverChange(index);
+  }, [index, onHoverChange]);
+
+  const handleHoverOut = useCallback(() => {
+    onHoverChange(null);
+  }, [onHoverChange]);
+
+  const handlePress = useCallback(async () => {
+    await onSelect(library.npmPkg);
+  }, [library.npmPkg, onSelect]);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onPointerDown={event => event.preventDefault()}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      style={[
+        tw`max-w-full flex-row items-center justify-between gap-x-3 gap-y-1.5 py-1 pl-4 pr-3`,
+        isSmallScreen && tw`flex-wrap`,
+        isActive && tw`bg-palette-gray2 dark:bg-palette-gray6`,
+      ]}>
+      <View style={tw`flex-shrink gap-0.5`}>
+        <Caption style={tw`relative top-px flex items-center gap-1`}>
+          {library.npmPkg}
+          {library.unmaintained && (
+            <Tooltip
+              trigger={
+                <View style={tw`relative top-px`}>
+                  <Warning style={tw`text-warning-dark dark:text-warning`} />
+                </View>
+              }>
+              Unmaintained
+            </Tooltip>
+          )}
+        </Caption>
+        <LibraryDescription
+          github={library.github}
+          maxLines={isSmallScreen ? 3 : undefined}
+          style={tw`text-[12px] font-light leading-snug text-secondary`}
+        />
+      </View>
+      <CompatibilityTags library={library} small />
+    </Pressable>
+  );
+}
+
+function arePropsEqual(previousProps: Props, nextProps: Props) {
+  return (
+    previousProps.index === nextProps.index &&
+    previousProps.isActive === nextProps.isActive &&
+    previousProps.library === nextProps.library &&
+    previousProps.onHoverChange === nextProps.onHoverChange &&
+    previousProps.onSelect === nextProps.onSelect
+  );
+}
+
+export default memo(QuickSearchResult, arePropsEqual);
diff --git a/components/Search.tsx b/components/Search.tsx
index 0a54588b..67720f2b 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -19,10 +19,9 @@ type Props = {
   query: Query;
   total: number;
   style?: StyleProp<ViewStyle>;
-  isHomePage?: boolean;
 };
 
-export default function Search({ query, total, style, isHomePage = false }: Props) {
+export default function Search({ query, total, style }: Props) {
   const { search, order, direction, offset, owner, ...filterParams } = query;
   const [isInputFocused, setInputFocused] = useState(false);
   const [isFilterVisible, setFilterVisible] = useState(Object.keys(filterParams).length > 0);
@@ -40,13 +39,6 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
     }
   }, [search, isInputFocused]);
 
-  const keyDownListener = useEffectEvent((event: KeyboardEvent) => {
-    if (event.key === 'k' && (isApple ? event.metaKey : event.ctrlKey)) {
-      event.preventDefault();
-      inputRef.current?.focus();
-    }
-  });
-
   useEffect(() => {
     if (isApple !== null) {
       document.addEventListener('keydown', keyDownListener, false);
@@ -54,6 +46,13 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
     }
   }, [isApple]);
 
+  const keyDownListener = useEffectEvent((event: KeyboardEvent) => {
+    if (event.key === 'k' && (isApple ? event.metaKey : event.ctrlKey)) {
+      event.preventDefault();
+      inputRef.current?.focus();
+    }
+  });
+
   const typingCallback = useDebouncedCallback((text: string) => {
     void replace(urlWithQuery('/packages', { ...query, search: text, offset: null }));
   }, 200);
@@ -68,7 +67,7 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
         <View style={tw`w-full max-w-layout px-4`}>
           <View style={tw`flex-row items-center`}>
             <View style={tw`pointer-events-none absolute left-4`}>
-              <SearchIcon style={tw`text-white`} />
+              <SearchIcon style={isInputFocused ? tw`text-primary` : tw`text-white`} />
             </View>
             <TextInput
               ref={inputRef}
@@ -76,17 +75,6 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
               autoComplete="off"
               onKeyPress={event => {
                 if ('key' in event) {
-                  if (isHomePage && event.key === 'Enter') {
-                    event.preventDefault();
-                    void replace(
-                      urlWithQuery('/packages', {
-                        ...query,
-                        // @ts-expect-error using native input value
-                        search: inputRef.current.value,
-                        offset: undefined,
-                      })
-                    );
-                  }
                   if (
                     event.key === 'k' &&
                     (('metaKey' in event && event.metaKey) || ('ctrlKey' in event && event.ctrlKey))
@@ -112,28 +100,25 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
               }}
               onFocus={() => setInputFocused(true)}
               onBlur={() => setInputFocused(false)}
-              onChangeText={isHomePage ? undefined : typingCallback}
+              onChangeText={typingCallback}
               placeholder="Search libraries..."
-              style={tw`h-12.5 font-sans flex flex-1 rounded-md border-2 border-palette-gray5 bg-palette-gray6 p-4 pl-11 text-xl text-white -outline-offset-2 dark:border-default dark:bg-dark`}
+              style={[
+                tw`h-12.5 font-sans pr-30 flex flex-1 rounded-md border-2 border-palette-gray5 bg-palette-gray6 p-4 text-xl text-white -outline-offset-2 dark:border-default dark:bg-dark`,
+                !isSmallScreen && tw`pl-11`,
+              ]}
               defaultValue={search}
               placeholderTextColor={tw`text-palette-gray4`.color as ColorValue}
             />
             {!isSmallScreen && (
               <View style={tw`pointer-events-none absolute right-4 flex-row items-center gap-1`}>
                 {isInputFocused ? (
-                  isHomePage ? (
-                    <InputKeyHint
-                      content={[{ label: 'press' }, { key: 'Enter' }, { label: 'to search' }]}
-                    />
-                  ) : (
-                    <InputKeyHint
-                      content={[
-                        { label: 'press' },
-                        { key: 'Esc' },
-                        { label: `to ${(search?.length ?? 0) > 0 ? 'clear' : 'blur'}` },
-                      ]}
-                    />
-                  )
+                  <InputKeyHint
+                    content={[
+                      { label: 'press' },
+                      { key: 'Esc' },
+                      { label: `to ${(search?.length ?? 0) > 0 ? 'clear' : 'blur'}` },
+                    ]}
+                  />
                 ) : (
                   <InputKeyHint
                     content={[{ key: isApple ? 'Cmd' : 'Ctrl' }, { label: '+' }, { key: 'K' }]}
@@ -142,32 +127,30 @@ export default function Search({ query, total, style, isHomePage = false }: Prop
               </View>
             )}
           </View>
-          {!isHomePage && (
-            <View
-              style={[
-                tw`mt-2 flex-row items-center justify-between`,
-                isSmallScreen && tw`flex-col items-start`,
-              ]}>
-              {total ? (
-                <P style={tw`mt-1 text-white`}>
-                  <P style={tw`font-bold text-primary`}>{total}</P>{' '}
-                  {total === 1 ? 'entry' : 'entries'}
-                </P>
-              ) : (
-                <P />
-              )}
-              <View style={[tw`mt-1.5 flex-row items-center`, isSmallScreen && tw`mt-2.5`]}>
-                <FilterButton
-                  style={tw`h-6`}
-                  query={query}
-                  onPress={() => setFilterVisible(!isFilterVisible)}
-                  onClearAllPress={handleClearAllPress}
-                  isFilterVisible={isFilterVisible}
-                />
-                <SortButton query={query} />
-              </View>
+          <View
+            style={[
+              tw`mt-2 flex-row items-center justify-between`,
+              isSmallScreen && tw`flex-col items-start`,
+            ]}>
+            {total ? (
+              <P style={tw`mt-1 text-white`}>
+                <P style={tw`font-bold text-primary`}>{total}</P>{' '}
+                {total === 1 ? 'entry' : 'entries'}
+              </P>
+            ) : (
+              <P />
+            )}
+            <View style={[tw`mt-1.5 flex-row items-center`, isSmallScreen && tw`mt-2.5`]}>
+              <FilterButton
+                style={tw`h-6`}
+                query={query}
+                onPress={() => setFilterVisible(!isFilterVisible)}
+                onClearAllPress={handleClearAllPress}
+                isFilterVisible={isFilterVisible}
+              />
+              <SortButton query={query} />
             </View>
-          )}
+          </View>
         </View>
       </View>
       {isFilterVisible && <Filters query={query} />}
diff --git a/components/Tag.tsx b/components/Tag.tsx
index 799e81bf..f84f682e 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -9,12 +9,14 @@ import { Check } from './Icons';
 type Props = {
   label: string;
   tagStyle: StyleProp<ViewStyle>;
+  small?: boolean;
   icon?: ReactElement | null;
 };
 
 export function Tag({
   label,
   tagStyle,
+  small,
   icon = <Check width={12} height={8} style={tw`text-palette-gray5`} />,
 }: Props) {
   return (
@@ -22,10 +24,11 @@ export function Tag({
       key={label}
       style={[
         tw`min-h-6 select-none flex-row items-center gap-[5px] rounded border px-2 py-1`,
+        small && tw`min-h-5 px-1.5 py-0.5`,
         tagStyle,
       ]}>
-      {icon}
-      <Label style={tw`text-black dark:text-secondary`}>{label}</Label>
+      {!small && icon}
+      <Label style={[tw`text-black dark:text-secondary`, small && tw`text-[11px]`]}>{label}</Label>
     </View>
   );
 }
diff --git a/react-native-libraries.json b/react-native-libraries.json
index a9f9bec2..4f918e4a 100644
--- a/react-native-libraries.json
+++ b/react-native-libraries.json
@@ -20126,17 +20126,6 @@
     "tvos": true,
     "visionos": true
   },
-  {
-    "githubUrl": "https://github.com/Adoobdoob71/react-native-add-calendar",
-    "examples": ["https://github.com/Adoobdoob71/react-native-add-calendar/tree/main/example"],
-    "images": [
-      "https://raw.githubusercontent.com/Adoobdoob71/react-native-add-calendar/refs/heads/main/media/android_gif.gif",
-      "https://raw.githubusercontent.com/Adoobdoob71/react-native-add-calendar/refs/heads/main/media/ios_gif.gif"
-    ],
-    "ios": true,
-    "android": true,
-    "newArchitecture": true
-  },
   {
     "githubUrl": "https://github.com/vladrozhnev/react-native-interception-webview",
     "ios": true,
diff --git a/scenes/HomeScene.tsx b/scenes/HomeScene.tsx
index dc537a7c..ec78ccf8 100644
--- a/scenes/HomeScene.tsx
+++ b/scenes/HomeScene.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { View } from 'react-native';
 
 import { A, H4, P, useLayout } from '~/common/styleguide';
@@ -20,7 +19,7 @@ import {
 } from '~/components/Icons';
 import Navigation from '~/components/Navigation';
 import PageMeta from '~/components/PageMeta';
-import Search from '~/components/Search';
+import QuickSearch from '~/components/QuickSearch';
 import { type HomePageProps } from '~/types/pages';
 import tw from '~/util/tailwind';
 import urlWithQuery from '~/util/urlWithQuery';
@@ -32,7 +31,6 @@ export default function HomeScene({
   popular,
   statistic,
 }: HomePageProps) {
-  const router = useRouter();
   const { isSmallScreen } = useLayout();
 
   return (
@@ -41,12 +39,7 @@ export default function HomeScene({
       <Navigation
         title="React Native packages registry"
         description="Browse thousands of open-source packages and find the best ones for your current or next project.">
-        <Search
-          query={router.query}
-          total={statistic.total}
-          style={tw`w-[600px] max-w-full self-center bg-transparent`}
-          isHomePage
-        />
+        <QuickSearch style={tw`w-[1200px] max-w-full self-center bg-transparent`} />
       </Navigation>
       <ContentContainer style={[tw`px-4 py-5`, isSmallScreen && tw`pt-2`]}>
         <View style={[tw`mb-1 flex-1 flex-row gap-1`, isSmallScreen && tw`flex-col`]}>
diff --git a/styles/styles.css b/styles/styles.css
index 328dc985..1882d328 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -75,6 +75,8 @@
   --table-header-background: var(--gray-2);
   --code-block-background: var(--gray-2);
   --inline-code-background: var(--gray-2);
+
+  --quick-search-bg: #ffffff;
 }
 
 :root.dark {
@@ -113,6 +115,8 @@
   --table-header-background: var(--dark);
   --code-block-background: var(--very-dark);
   --inline-code-background: var(--gray-6);
+
+  --quick-search-bg: #111114ef;
 }
 
 *:focus-visible {
@@ -352,6 +356,23 @@ select {
   }
 }
 
+/* QUICK SEARCH */
+
+#quick-search-results {
+  background: var(--quick-search-bg);
+  backdrop-filter: blur(6px);
+}
+
+#spinner {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* PACKAGE STICKY CONTAINER */
 
 #metadataContainer {