diff --git a/packages/extension/src/manifest.json b/packages/extension/src/manifest.json
index c17ba231e8b..d737fdbd3ca 100644
--- a/packages/extension/src/manifest.json
+++ b/packages/extension/src/manifest.json
@@ -32,8 +32,8 @@
     "https://*.staging.daily.dev/"
   ],
   "__firefox|dev__permissions": ["storage", "http://localhost/", "https://*.local.fylla.dev/"],
-  "optional_permissions": ["topSites", "declarativeNetRequestWithHostAccess"],
-  "__firefox__optional_permissions": ["topSites", "*://*/*"],
+  "optional_permissions": ["topSites", "bookmarks", "declarativeNetRequestWithHostAccess"],
+  "__firefox__optional_permissions": ["topSites", "bookmarks", "*://*/*"],
   "__chrome|opera|edge__optional_host_permissions": [ "*://*/*"],
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self';"
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutImportFlow.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutImportFlow.tsx
new file mode 100644
index 00000000000..80df4b7c472
--- /dev/null
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutImportFlow.tsx
@@ -0,0 +1,201 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useShortcuts } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
+import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal';
+import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/types';
+import {
+  Button,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { Modal } from '@dailydotdev/shared/src/components/modals/common/Modal';
+import { Justify } from '@dailydotdev/shared/src/components/utilities';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { MostVisitedSitesPermissionContent } from '@dailydotdev/shared/src/features/shortcuts/components/modals/MostVisitedSitesPermissionContent';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification';
+import { MAX_SHORTCUTS } from '@dailydotdev/shared/src/features/shortcuts/types';
+
+// Coordinates the "Import from browser" / "Import from bookmarks" flows for
+// the new hub. Keeps the permission modals, picker modal, and silent-import
+// paths in one place so the hub UI itself stays declarative.
+export function ShortcutImportFlow(): ReactElement | null {
+  const {
+    showImportSource,
+    setShowImportSource,
+    returnToAfterImport,
+    topSites,
+    hasCheckedPermission: hasCheckedTopSitesPermission,
+    askTopSitesPermission,
+    bookmarks,
+    hasCheckedBookmarksPermission,
+    askBookmarksPermission,
+  } = useShortcuts();
+  const { customLinks } = useSettingsContext();
+  const { displayToast } = useToastNotification();
+  const { openModal } = useLazyModal();
+
+  // Prevents running the same import more than once for a single click.
+  const handledRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!showImportSource) {
+      handledRef.current = null;
+      return;
+    }
+
+    const capacity = Math.max(0, MAX_SHORTCUTS - (customLinks?.length ?? 0));
+
+    if (showImportSource === 'topSites') {
+      if (!hasCheckedTopSitesPermission || topSites === undefined) {
+        return;
+      }
+      if (handledRef.current === 'topSites') {
+        return;
+      }
+      handledRef.current = 'topSites';
+
+      if (topSites.length === 0) {
+        displayToast('No top sites yet. Visit some sites and try again.');
+        setShowImportSource?.(null);
+        return;
+      }
+      if (capacity === 0) {
+        displayToast(
+          `You already have ${MAX_SHORTCUTS} shortcuts. Remove some to import more.`,
+        );
+        setShowImportSource?.(null);
+        return;
+      }
+
+      // Always show the picker so the user sees exactly what gets imported,
+      // which source it comes from, and can deselect items before confirming.
+      // Previously we silently imported when items fit in capacity, which was
+      // confusing ("what just got added? where from?").
+      const items = topSites.map((s) => ({ url: s.url }));
+      openModal({
+        type: LazyModal.ImportPicker,
+        props: { source: 'topSites', items, returnTo: returnToAfterImport },
+      });
+      setShowImportSource?.(null);
+      return;
+    }
+
+    if (showImportSource === 'bookmarks') {
+      if (!hasCheckedBookmarksPermission || bookmarks === undefined) {
+        return;
+      }
+      if (handledRef.current === 'bookmarks') {
+        return;
+      }
+      handledRef.current = 'bookmarks';
+
+      if (bookmarks.length === 0) {
+        displayToast(
+          'Your bookmarks bar is empty. Add some bookmarks and try again.',
+        );
+        setShowImportSource?.(null);
+        return;
+      }
+      if (capacity === 0) {
+        displayToast(
+          `You already have ${MAX_SHORTCUTS} shortcuts. Remove some to import more.`,
+        );
+        setShowImportSource?.(null);
+        return;
+      }
+
+      const items = bookmarks.map((b) => ({ url: b.url, title: b.title }));
+      openModal({
+        type: LazyModal.ImportPicker,
+        props: { source: 'bookmarks', items, returnTo: returnToAfterImport },
+      });
+      setShowImportSource?.(null);
+    }
+  }, [
+    showImportSource,
+    topSites,
+    hasCheckedTopSitesPermission,
+    bookmarks,
+    hasCheckedBookmarksPermission,
+    customLinks,
+    displayToast,
+    openModal,
+    setShowImportSource,
+    returnToAfterImport,
+  ]);
+
+  // Permission modals: shown when the user asked to import but the browser
+  // hasn't granted permission yet. Once granted, the provider refreshes
+  // `topSites` / `bookmarks` and the effect above finishes the import.
+  if (
+    showImportSource === 'topSites' &&
+    hasCheckedTopSitesPermission &&
+    topSites === undefined
+  ) {
+    const onGrant = async () => {
+      const granted = await askTopSitesPermission();
+      if (!granted) {
+        setShowImportSource?.(null);
+      }
+    };
+    return (
+      <Modal
+        kind={Modal.Kind.FlexibleCenter}
+        size={Modal.Size.Medium}
+        isOpen
+        onRequestClose={() => setShowImportSource?.(null)}
+      >
+        <Modal.Header showCloseButton>
+          <Typography tag={TypographyTag.H3} type={TypographyType.Body} bold>
+            Show most visited sites
+          </Typography>
+        </Modal.Header>
+        <MostVisitedSitesPermissionContent
+          onGrant={onGrant}
+          ctaLabel="Import shortcuts"
+        />
+      </Modal>
+    );
+  }
+
+  if (
+    showImportSource === 'bookmarks' &&
+    hasCheckedBookmarksPermission &&
+    bookmarks === undefined
+  ) {
+    const onGrant = async () => {
+      const granted = await askBookmarksPermission();
+      if (!granted) {
+        setShowImportSource?.(null);
+      }
+    };
+    return (
+      <Modal
+        kind={Modal.Kind.FlexibleCenter}
+        size={Modal.Size.Medium}
+        isOpen
+        onRequestClose={() => setShowImportSource?.(null)}
+      >
+        <Modal.Header />
+        <Modal.Body>
+          <Modal.Title className="mb-4">Import your bookmarks bar</Modal.Title>
+          <Modal.Text className="text-center">
+            To import your bookmarks bar, your browser will ask for permission
+            to read bookmarks. We never sync your bookmarks to our servers.
+          </Modal.Text>
+        </Modal.Body>
+        <Modal.Footer justify={Justify.Center}>
+          <Button onClick={onGrant} variant={ButtonVariant.Primary}>
+            Import bookmarks
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+  return null;
+}
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.spec.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.spec.tsx
index 4b857c7f4f0..48c3f3c4222 100644
--- a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.spec.tsx
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.spec.tsx
@@ -41,6 +41,13 @@ jest.mock('@dailydotdev/shared/src/lib/boot', () => ({
   getBootData: jest.fn(),
 }));
 
+// Pin these tests to the legacy code path. The shortcuts hub redesign is
+// default-on in production; the suite below exercises the legacy UI that the
+// hub is replacing behind the feature flag.
+jest.mock('@dailydotdev/shared/src/hooks/useConditionalFeature', () => ({
+  useConditionalFeature: () => ({ value: false, isLoading: false }),
+}));
+
 jest.mock('webextension-polyfill', () => {
   let providedPermission = false;
 
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.tsx
index 228a69ac85f..14bad4fa2f9 100644
--- a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.tsx
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.tsx
@@ -13,14 +13,21 @@ import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal';
 import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/types';
 import { useShortcuts } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
 import { useShortcutLinks } from '@dailydotdev/shared/src/features/shortcuts/hooks/useShortcutLinks';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import { featureShortcutsHub } from '@dailydotdev/shared/src/lib/featureManagement';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useShortcutsManager } from '@dailydotdev/shared/src/features/shortcuts/hooks/useShortcutsManager';
+import { useShortcutsMigration } from '@dailydotdev/shared/src/features/shortcuts/hooks/useShortcutsMigration';
 import { ShortcutLinksList } from './ShortcutLinksList';
 import { ShortcutGetStarted } from './ShortcutGetStarted';
+import { ShortcutLinksHub } from './ShortcutLinksHub';
+import { ShortcutImportFlow } from './ShortcutImportFlow';
 
 interface ShortcutLinksProps {
   shouldUseListFeedLayout: boolean;
 }
 
-export default function ShortcutLinks({
+function LegacyShortcutLinks({
   shouldUseListFeedLayout,
 }: ShortcutLinksProps): ReactElement {
   const { openModal } = useLazyModal();
@@ -111,7 +118,7 @@ export default function ShortcutLinks({
             {...{
               onLinkClick,
               onOptionsOpen,
-              shortcutLinks,
+              shortcutLinks: shortcutLinks ?? [],
               shouldUseListFeedLayout,
               toggleShowTopSites,
               onReorder,
@@ -123,3 +130,58 @@ export default function ShortcutLinks({
     </>
   );
 }
+
+function NewShortcutLinks({
+  shouldUseListFeedLayout,
+}: ShortcutLinksProps): ReactElement {
+  const { showTopSites, toggleShowTopSites, flags } = useSettingsContext();
+  const manager = useShortcutsManager();
+  const { openModal } = useLazyModal();
+  useShortcutsMigration();
+
+  if (!showTopSites) {
+    return <></>;
+  }
+
+  // Auto mode renders live top sites from the browser and ships its own
+  // permission CTA / empty state inside the hub, so an empty `customLinks`
+  // is not a signal to show onboarding. Only manual-mode users with zero
+  // curated shortcuts should see the "Choose your most visited sites" card.
+  const mode = flags?.shortcutsMode ?? 'manual';
+  const showOnboarding = mode === 'manual' && manager.shortcuts.length === 0;
+
+  if (showOnboarding) {
+    return (
+      <>
+        <ShortcutGetStarted
+          onTopSitesClick={toggleShowTopSites}
+          onCustomLinksClick={() =>
+            openModal({ type: LazyModal.ShortcutEdit, props: { mode: 'add' } })
+          }
+        />
+        <ShortcutImportFlow />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ShortcutLinksHub shouldUseListFeedLayout={shouldUseListFeedLayout} />
+      <ShortcutImportFlow />
+    </>
+  );
+}
+
+export default function ShortcutLinks(props: ShortcutLinksProps): ReactElement {
+  const { user } = useAuthContext();
+  const { value: hubEnabled } = useConditionalFeature({
+    feature: featureShortcutsHub,
+    shouldEvaluate: !!user,
+  });
+
+  if (user && hubEnabled) {
+    return <NewShortcutLinks {...props} />;
+  }
+
+  return <LegacyShortcutLinks {...props} />;
+}
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksHub.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksHub.tsx
new file mode 100644
index 00000000000..e0f1ceb6a94
--- /dev/null
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksHub.tsx
@@ -0,0 +1,517 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { Switch } from '@dailydotdev/shared/src/components/fields/Switch';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '@dailydotdev/shared/src/components/dropdown/DropdownMenu';
+import {
+  EyeIcon,
+  MenuIcon,
+  SettingsIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { ChromeIcon } from '@dailydotdev/shared/src/components/icons/Browser/Chrome';
+import { MenuIcon as WrappingMenuIcon } from '@dailydotdev/shared/src/components/MenuIcon';
+import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal';
+import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/types';
+import { ShortcutTile } from '@dailydotdev/shared/src/features/shortcuts/components/ShortcutTile';
+import { AddShortcutTile } from '@dailydotdev/shared/src/features/shortcuts/components/AddShortcutTile';
+import { useShortcutsManager } from '@dailydotdev/shared/src/features/shortcuts/hooks/useShortcutsManager';
+import { useHiddenTopSites } from '@dailydotdev/shared/src/features/shortcuts/hooks/useHiddenTopSites';
+import {
+  useDragClickGuard,
+  DRAG_ACTIVATION_DISTANCE_PX,
+} from '@dailydotdev/shared/src/features/shortcuts/hooks/useDragClickGuard';
+import { useShortcutDropZone } from '@dailydotdev/shared/src/features/shortcuts/hooks/useShortcutDropZone';
+import { useShortcuts } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification';
+import {
+  LogEvent,
+  ShortcutsSourceType,
+  TargetType,
+} from '@dailydotdev/shared/src/lib/log';
+import type {
+  Shortcut,
+  ShortcutsAppearance,
+  ShortcutsMode,
+} from '@dailydotdev/shared/src/features/shortcuts/types';
+import {
+  DEFAULT_SHORTCUTS_APPEARANCE,
+  MAX_SHORTCUTS,
+} from '@dailydotdev/shared/src/features/shortcuts/types';
+
+interface ShortcutLinksHubProps {
+  shouldUseListFeedLayout: boolean;
+}
+
+interface SourceModeToggleItemProps {
+  isAuto: boolean;
+  onToggle: () => void;
+}
+
+// Stable menu row that flips source mode in place. Uses the same metrics as
+// standard DropdownMenuOptions rows (h-7, typo-footnote, MenuIcon wrapper) so
+// the dropdown reads as one dense list — matching the PostOptionButton
+// convention. The enclosing DropdownMenuItem owns click + keyboard; the
+// native Switch is pointer-events-none so clicks fall through to the row
+// handler and `preventDefault` on `onSelect` keeps the menu open after
+// toggling (it's a setting, not an action).
+function SourceModeToggleItem({
+  isAuto,
+  onToggle,
+}: SourceModeToggleItemProps): ReactElement {
+  return (
+    <DropdownMenuItem
+      role="menuitemcheckbox"
+      aria-checked={isAuto}
+      onSelect={(event) => {
+        event.preventDefault();
+        onToggle();
+      }}
+    >
+      <span className="inline-flex flex-1 items-center gap-2">
+        <WrappingMenuIcon Icon={ChromeIcon} />
+        <span className="flex-1 truncate">Most visited sites</span>
+        <Switch
+          inputId="shortcuts-source-toggle"
+          name="shortcuts-source-toggle"
+          checked={isAuto}
+          onToggle={onToggle}
+          aria-label="Most visited sites"
+          className="pointer-events-none ml-2"
+          compact
+        />
+      </span>
+    </DropdownMenuItem>
+  );
+}
+
+export function ShortcutLinksHub({
+  shouldUseListFeedLayout,
+}: ShortcutLinksHubProps): ReactElement {
+  const { openModal } = useLazyModal();
+  const { toggleShowTopSites, showTopSites, flags, updateFlag } =
+    useSettingsContext();
+  const { logEvent } = useLogContext();
+  const { displayToast } = useToastNotification();
+  const manager = useShortcutsManager();
+  const {
+    hidden: hiddenTopSites,
+    hide: hideTopSite,
+    unhide: unhideTopSite,
+  } = useHiddenTopSites();
+  const {
+    topSites,
+    hasCheckedPermission: hasCheckedTopSitesPermission,
+    askTopSitesPermission,
+  } = useShortcuts();
+
+  // Default to 'manual' so existing users keep their curated lists. Auto mode
+  // is opt-in via the overflow menu (users who grant topSites permission and
+  // prefer Chrome-style live tiles).
+  const mode: ShortcutsMode = flags?.shortcutsMode ?? 'manual';
+  const isAuto = mode === 'auto';
+  const appearance: ShortcutsAppearance =
+    flags?.shortcutsAppearance ?? DEFAULT_SHORTCUTS_APPEARANCE;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE_PX },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // dnd-kit activates drag via pointer events; browsers still synthesize a
+  // `click` on `pointerup` because the tile follows the pointer via CSS
+  // transform, and on drops *outside* the toolbar the click target can be a
+  // sibling surface React's root listener never bubbles up to our handler.
+  // `useDragClickGuard` installs a document-level capture-phase listener so
+  // the stray click is swallowed wherever it lands, with the toolbar's
+  // `onClickCapture` kept as a React-side belt for the normal in-bounds case.
+  const { armGuard: armDragSuppression, onClickCapture: suppressClickCapture } =
+    useDragClickGuard();
+
+  // Belt-and-suspenders for native HTML5 drag. Each tile already marks its
+  // anchor/favicon as `draggable={false}`, but capture-phase cancellation
+  // at the toolbar root makes it impossible for a stray child (or a
+  // browser that ignores the attribute) to kick off a URL drag that could
+  // then navigate the tab when dropped outside any drop zone.
+  const suppressNativeDragCapture = (event: React.DragEvent) => {
+    event.preventDefault();
+  };
+
+  const loggedRef = useRef<ShortcutsMode | null>(null);
+  useEffect(() => {
+    if (!showTopSites) {
+      return;
+    }
+    if (loggedRef.current === mode) {
+      return;
+    }
+    loggedRef.current = mode;
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({
+        source: isAuto
+          ? ShortcutsSourceType.Browser
+          : ShortcutsSourceType.Custom,
+      }),
+    });
+  }, [logEvent, showTopSites, mode, isAuto]);
+
+  const [reorderAnnouncement, setReorderAnnouncement] = useState('');
+
+  // Auto mode: render live top sites from the browser, minus any the user
+  // dismissed (Chrome-style). Manual mode: render the curated customLinks.
+  const hiddenTopSitesSet = useMemo(
+    () => new Set(hiddenTopSites),
+    [hiddenTopSites],
+  );
+  const autoShortcuts: Shortcut[] = useMemo(
+    () =>
+      (topSites ?? [])
+        .filter((site) => !hiddenTopSitesSet.has(site.url))
+        .slice(0, MAX_SHORTCUTS)
+        .map((site) => ({ url: site.url, name: site.title || undefined })),
+    [topSites, hiddenTopSitesSet],
+  );
+  const manualShortcuts = manager.shortcuts.slice(0, MAX_SHORTCUTS);
+  const overflowCount = isAuto
+    ? 0
+    : manager.shortcuts.length - manualShortcuts.length;
+  const visibleShortcuts = isAuto ? autoShortcuts : manualShortcuts;
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    armDragSuppression();
+    if (isAuto) {
+      return;
+    }
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const urls = manualShortcuts.map((s) => s.url);
+    const oldIndex = urls.indexOf(active.id as string);
+    const newIndex = urls.indexOf(over.id as string);
+    if (oldIndex < 0 || newIndex < 0) {
+      return;
+    }
+    const overflowUrls = manager.shortcuts
+      .slice(MAX_SHORTCUTS)
+      .map((s) => s.url);
+    manager.reorder([...arrayMove(urls, oldIndex, newIndex), ...overflowUrls]);
+    const moved = manualShortcuts[oldIndex];
+    const label = moved?.name || moved?.url || 'Shortcut';
+    setReorderAnnouncement(
+      `Moved ${label} to position ${newIndex + 1} of ${urls.length}`,
+    );
+  };
+
+  const onLinkClick = () =>
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({
+        source: isAuto
+          ? ShortcutsSourceType.Browser
+          : ShortcutsSourceType.Custom,
+      }),
+    });
+
+  const onEdit = (shortcut: Shortcut) =>
+    openModal({
+      type: LazyModal.ShortcutEdit,
+      props: { mode: 'edit', shortcut },
+    });
+
+  const onRemove = (shortcut: Shortcut) => manager.removeShortcut(shortcut.url);
+
+  // Chrome-style dismiss for auto mode: hide the tile for this browser and
+  // offer a single-action "Undo" toast. We can't delete the site from the
+  // browser's history, so we just remember the URL locally.
+  const onHideTopSite = (shortcut: Shortcut) => {
+    hideTopSite(shortcut.url);
+    const label = shortcut.name || shortcut.url;
+    displayToast(`Hidden ${label}`, {
+      action: {
+        copy: 'Undo',
+        onClick: () => unhideTopSite(shortcut.url),
+      },
+    });
+  };
+
+  const onAdd = () =>
+    openModal({ type: LazyModal.ShortcutEdit, props: { mode: 'add' } });
+
+  // Drag-a-link-into-the-row shortcut: skip the edit modal entirely when
+  // the user drops a URL from the address bar, another tab, or the
+  // browser's bookmarks bar. We only surface a toast when the add fails
+  // (duplicate / limit), because the success case speaks for itself — the
+  // tile just appears in the row.
+  const onDropUrl = async (url: string) => {
+    const result = await manager.addShortcut({ url });
+    if (result.error) {
+      displayToast(result.error);
+    }
+  };
+
+  // The whole toolbar is the drop zone (auto mode excluded — we can't add
+  // to a browser-managed list). The "+" tile is still visible for click
+  // discoverability, but users no longer have to aim at a 44px target to
+  // drop a bookmark — anywhere on the row counts.
+  const canAcceptDroppedUrl = !isAuto && manager.canAdd;
+  const { isDropTarget, dropHandlers } = useShortcutDropZone(
+    onDropUrl,
+    canAcceptDroppedUrl,
+  );
+
+  const onManage = () => openModal({ type: LazyModal.ShortcutsManage });
+
+  const requestTopSitesAccess = async () => {
+    // Unlike the import flow, we only need READ access here — we're not
+    // copying sites into customLinks, just rendering whatever the browser
+    // exposes. If the user declines we stay on the empty-state CTA.
+    const granted = await askTopSitesPermission();
+    return granted;
+  };
+
+  const switchToAuto = async () => {
+    await updateFlag('shortcutsMode', 'auto');
+    // Auto mode is worthless without topSites permission — if the user
+    // declines (or it was previously denied and the browser returned no
+    // data), flip back to manual so they don't end up with an empty row
+    // and no idea how to fix it.
+    if (!hasCheckedTopSitesPermission || topSites === undefined) {
+      const granted = await requestTopSitesAccess();
+      if (!granted) {
+        await updateFlag('shortcutsMode', 'manual');
+      }
+    }
+  };
+
+  const switchToManual = () => updateFlag('shortcutsMode', 'manual');
+
+  // The overflow menu is the same shape in both modes — source selection is
+  // an inline toggle at the top, so users never see items appear/disappear
+  // after flipping mode. "Add shortcut" stays visible but is disabled in auto
+  // so the placement doesn't jump.
+  const toggleSourceMode = () => {
+    if (isAuto) {
+      switchToManual();
+    } else {
+      switchToAuto();
+    }
+  };
+
+  // The inline "+" tile already lets users add when there's room. We don't
+  // mirror "Add shortcut" into the dropdown: it either duplicates the tile
+  // (manual + room left) or points at a disabled action (at the 12/12 cap),
+  // both of which are clutter. At the limit, the library's-full story is
+  // told by the Manage modal's counter and by tiles already filling the row.
+  const menuOptions = [
+    {
+      icon: <WrappingMenuIcon Icon={SettingsIcon} />,
+      label: 'Manage shortcuts…',
+      action: onManage,
+    },
+    {
+      icon: <WrappingMenuIcon Icon={EyeIcon} />,
+      label: 'Hide shortcuts',
+      action: toggleShowTopSites,
+    },
+  ];
+
+  // Auto mode empty has two shapes: either the user hasn't granted topSites
+  // permission yet (ask for it) or they've granted it but the browser
+  // returned no sites (new profile, cleared history). We surface copy for
+  // both — "Grant access" is wrong when the user already granted and just
+  // has an empty history.
+  const autoPermissionGranted =
+    hasCheckedTopSitesPermission && topSites !== undefined;
+  const showAutoEmptyState = isAuto && visibleShortcuts.length === 0;
+  const showAutoPermissionCta = showAutoEmptyState && !autoPermissionGranted;
+  const showAutoNoHistoryMessage = showAutoEmptyState && autoPermissionGranted;
+
+  // Controlled open state so the trigger stays visible while the menu is
+  // open even when the user hovers *into* the floating menu content.
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Force the trigger visible in these cases so users aren't trapped:
+  // - the menu is already open (don't yank the trigger mid-hover)
+  // - the auto-mode empty state is showing (no tiles to hover, only options)
+  // - there's literally nothing else in the row (no "+" tile, no tiles)
+  const forceShowMenuButton =
+    menuOpen ||
+    showAutoEmptyState ||
+    (visibleShortcuts.length === 0 && (isAuto || !manager.canAdd));
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Shortcuts"
+      onClickCapture={suppressClickCapture}
+      onAuxClickCapture={suppressClickCapture}
+      onDragStartCapture={suppressNativeDragCapture}
+      {...dropHandlers}
+      className={classNames(
+        // `group` powers the hover-reveal of the overflow button below.
+        'group/hub',
+        // Shown from mobileXL (500px) up so narrow desktop windows and
+        // split-screen use get the hub too. Still hidden on phone-sized
+        // viewports where the new-tab page isn't really the use-case.
+        'hidden flex-wrap items-center mobileXL:flex',
+        // Gap scales with density: tiles still need a touch of breathing
+        // room because of the label, but tighter than before so the row
+        // reads as one cluster of shortcuts. Icons/chips pack like a real
+        // bookmarks bar.
+        appearance === 'tile' && 'items-start gap-x-1 gap-y-2',
+        appearance === 'icon' && 'gap-1',
+        appearance === 'chip' && 'gap-1',
+        shouldUseListFeedLayout ? 'mx-6 mb-3 mt-1' : 'mb-5',
+        // Drag-to-add indicator: a soft accent ring + tinted background
+        // highlights the entire row so users dragging a bookmark see a
+        // clear "drop here" affordance regardless of where on the row
+        // they aim. `ring` uses box-shadow so there's no layout shift,
+        // and `rounded-12` keeps the halo in keeping with the tiles.
+        'rounded-12 transition-[box-shadow,background-color] duration-150 motion-reduce:transition-none',
+        isDropTarget &&
+          'bg-overlay-float-cabbage ring-2 ring-accent-cabbage-default ring-offset-4 ring-offset-background-default',
+      )}
+    >
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={armDragSuppression}
+        onDragCancel={armDragSuppression}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={visibleShortcuts.map((s) => s.url)}
+          strategy={horizontalListSortingStrategy}
+        >
+          {visibleShortcuts.map((shortcut) => (
+            <ShortcutTile
+              key={shortcut.url}
+              shortcut={shortcut}
+              appearance={appearance}
+              onClick={onLinkClick}
+              draggable={!isAuto}
+              onEdit={isAuto ? undefined : onEdit}
+              onRemove={isAuto ? onHideTopSite : onRemove}
+              removeLabel={isAuto ? 'Hide' : 'Remove'}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+      {!isAuto && manager.canAdd && (
+        <AddShortcutTile
+          appearance={appearance}
+          onClick={onAdd}
+          acceptsDroppedUrl={canAcceptDroppedUrl}
+          isDropActive={isDropTarget}
+        />
+      )}
+      {showAutoPermissionCta && (
+        <button
+          type="button"
+          onClick={requestTopSitesAccess}
+          className="flex h-11 items-center gap-2 rounded-12 border border-dashed border-border-subtlest-tertiary px-3 text-text-tertiary transition-colors duration-150 typo-callout hover:border-solid hover:border-border-subtlest-secondary hover:bg-surface-float hover:text-text-primary motion-reduce:transition-none"
+        >
+          Grant access to show Most visited sites
+        </button>
+      )}
+      {showAutoNoHistoryMessage && (
+        <span className="flex h-11 items-center gap-2 rounded-12 border border-dashed border-border-subtlest-tertiary px-3 text-text-tertiary typo-callout">
+          Nothing visited yet — check back after browsing a few sites
+        </span>
+      )}
+      {overflowCount > 0 && (
+        <button
+          type="button"
+          onClick={onManage}
+          className={classNames(
+            'rounded-8 px-2 py-1 text-text-tertiary transition-colors duration-150 typo-caption1 hover:bg-surface-float hover:text-text-primary motion-reduce:transition-none',
+            // Align with the favicon vertical center (not the full tile which
+            // includes the label underneath). See the DropdownMenuTrigger
+            // below for the full math; this button is ~h-7 (28px) so we nudge
+            // its top by 16px to land center ≈ 30px from tile top.
+            appearance === 'tile' && 'mt-[16px] self-start',
+          )}
+        >
+          +{overflowCount} more
+        </button>
+      )}
+      <span role="status" aria-live="polite" className="sr-only">
+        {reorderAnnouncement}
+      </span>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.Small}
+            icon={<MenuIcon className="rotate-90" secondary />}
+            className={classNames(
+              'ml-1 !size-8 !min-w-0 !rounded-10 text-text-tertiary transition-opacity duration-150 hover:bg-surface-float hover:text-text-primary motion-reduce:transition-none',
+              // Quiet by default, reveals when the user shows intent:
+              // - hovering anywhere on the row
+              // - keyboard-focusing any child (focus-within)
+              // - touch devices where hover doesn't exist
+              // - any case flagged above where hiding would trap the user
+              forceShowMenuButton
+                ? 'opacity-100'
+                : 'opacity-0 focus-visible:opacity-100 group-focus-within/hub:opacity-100 group-hover/hub:opacity-100 [@media(hover:none)]:opacity-100',
+              // Center the button on the favicon row, not the whole tile
+              // (the tile is tall because of the label underneath).
+              //   tile padding-top: p-2   =  8px
+              //   favicon height:   size-11 = 44px → center at 8 + 22 = 30px
+              //   button height:    size-8 = 32px → top offset = 30 − 16 = 14px
+              // `self-start` pins align-self so parent `items-center` can't
+              // re-center the button on the full tile height and drag it
+              // back down onto the label row.
+              appearance === 'tile' && 'mt-[14px] self-start',
+            )}
+            aria-label="Shortcut options"
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <SourceModeToggleItem isAuto={isAuto} onToggle={toggleSourceMode} />
+          <div
+            aria-hidden
+            className="mx-2 my-1 h-px bg-border-subtlest-tertiary"
+          />
+          <DropdownMenuOptions options={menuOptions} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksItem.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksItem.tsx
index e60f5d036e9..d443ed02ef4 100644
--- a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksItem.tsx
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksItem.tsx
@@ -1,5 +1,9 @@
-import type { ReactElement } from 'react';
-import React from 'react';
+import type {
+  MouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactElement,
+} from 'react';
+import React, { useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
 
@@ -7,6 +11,7 @@ import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import { combinedClicks } from '@dailydotdev/shared/src/lib/click';
 
 import { apiUrl } from '@dailydotdev/shared/src/lib/config';
+import { DRAG_ACTIVATION_DISTANCE_SQ_PX } from '@dailydotdev/shared/src/features/shortcuts/hooks/useDragClickGuard';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
@@ -71,6 +76,35 @@ export function ShortcutLinksItem({
     transition,
   };
 
+  // Per-tile travel detector: if the pointer moved more than ~5px between
+  // pointerdown and click, it was a drag gesture — not a click — and we
+  // swallow the anchor's navigation. Works even when dnd-kit's `isDragging`
+  // has already flipped back to false by the time the browser fires click.
+  const pointerOriginRef = useRef<{ x: number; y: number } | null>(null);
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLAnchorElement>) => {
+      pointerOriginRef.current = { x: event.clientX, y: event.clientY };
+    },
+    [],
+  );
+  const handleAnchorClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      const origin = pointerOriginRef.current;
+      pointerOriginRef.current = null;
+      const travelled = origin
+        ? (event.clientX - origin.x) ** 2 + (event.clientY - origin.y) ** 2 >=
+          DRAG_ACTIVATION_DISTANCE_SQ_PX
+        : false;
+      if (isDragging || travelled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onLinkClick();
+    },
+    [isDragging, onLinkClick],
+  );
+
   return (
     <a
       ref={setNodeRef}
@@ -79,17 +113,20 @@ export function ShortcutLinksItem({
       {...listeners}
       href={url}
       rel="noopener noreferrer"
-      {...combinedClicks(onLinkClick)}
+      draggable={false}
+      onPointerDown={handlePointerDown}
+      {...combinedClicks(handleAnchorClick)}
       className={classNames(
         'mr-4 flex flex-col items-center',
         isDraggable && 'cursor-grab active:cursor-grabbing',
-        isDragging && 'opacity-50',
+        isDragging && 'pointer-events-none opacity-50',
       )}
     >
       <div className="mb-2 flex size-12 items-center justify-center rounded-full bg-surface-float text-text-secondary">
         <img
           src={`${apiUrl}/icon?url=${encodeURIComponent(url)}&size=${iconSize}`}
           alt={url}
+          draggable={false}
           className="size-6"
         />
       </div>
diff --git a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksList.tsx b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksList.tsx
index a871c082ba0..3becbfd47ae 100644
--- a/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksList.tsx
+++ b/packages/extension/src/newtab/ShortcutLinks/ShortcutLinksList.tsx
@@ -36,6 +36,10 @@ import {
   sortableKeyboardCoordinates,
   horizontalListSortingStrategy,
 } from '@dnd-kit/sortable';
+import {
+  useDragClickGuard,
+  DRAG_ACTIVATION_DISTANCE_PX,
+} from '@dailydotdev/shared/src/features/shortcuts/hooks/useDragClickGuard';
 import {
   ShortcutLinksItem,
   ShortcutItemPlaceholder,
@@ -64,14 +68,24 @@ export function ShortcutLinksList({
 }: ShortcutLinksListProps): ReactElement {
   const hasShortcuts = shortcutLinks?.length > 0;
 
+  // 5px distance activation lets a plain click through (so normal navigation
+  // still works) while still picking up any meaningful drag gesture.
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE_PX },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
 
+  // Same guard the hub/webapp rows use — document-level click capture so the
+  // stray click the browser fires on drag-release never navigates the tab,
+  // even if the drop lands outside the row's DOM subtree.
+  const { armGuard, onClickCapture } = useDragClickGuard();
+
   const handleDragEnd = (event: DragEndEvent) => {
+    armGuard();
     const { active, over } = event;
 
     if (!over || active.id === over.id || !onReorder || !isManual) {
@@ -100,6 +114,9 @@ export function ShortcutLinksList({
 
   const content = (
     <div
+      onClickCapture={onClickCapture}
+      onAuxClickCapture={onClickCapture}
+      onDragStartCapture={(event) => event.preventDefault()}
       className={classNames(
         'hidden tablet:flex',
         shouldUseListFeedLayout ? 'mx-6 mb-3 mt-1' : 'mb-5',
@@ -158,6 +175,8 @@ export function ShortcutLinksList({
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
+        onDragStart={armGuard}
+        onDragCancel={armGuard}
         onDragEnd={handleDragEnd}
       >
         <SortableContext
diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index 5e98747123a..61229027595 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -13,6 +13,7 @@ import type { FeedProps } from './Feed';
 import Feed from './Feed';
 import ReadingReminderHero from './banners/ReadingReminderHero';
 import ShortcutsExtensionPromo from './banners/ShortcutsExtensionPromo';
+import { WebappShortcutsRow } from '../features/shortcuts/components/WebappShortcutsRow';
 import { AskSearchBanner } from './notifications/AskSearchBanner';
 import AuthContext from '../contexts/AuthContext';
 import type { LoggedUser } from '../lib/user';
@@ -695,6 +696,9 @@ export default function MainFeedLayout({
           onDismiss={onDismiss}
         />
       )}
+      {!checkIsExtension() && isHomePage && (
+        <WebappShortcutsRow className="px-4 pb-2" />
+      )}
       {shouldShowShortcutsPromo && (
         <ShortcutsExtensionPromo
           className="px-4 pb-2"
diff --git a/packages/shared/src/components/ProfileMenu/sections/ExtensionSection.tsx b/packages/shared/src/components/ProfileMenu/sections/ExtensionSection.tsx
index 2b333802903..aa77eefeafc 100644
--- a/packages/shared/src/components/ProfileMenu/sections/ExtensionSection.tsx
+++ b/packages/shared/src/components/ProfileMenu/sections/ExtensionSection.tsx
@@ -9,11 +9,25 @@ import { PauseIcon, PlayIcon, ShortcutsIcon, StoryIcon } from '../../icons';
 import { useLazyModal } from '../../../hooks/useLazyModal';
 import { LazyModal } from '../../modals/common/types';
 import { checkIsExtension } from '../../../lib/func';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useConditionalFeature } from '../../../hooks/useConditionalFeature';
+import { featureShortcutsHub } from '../../../lib/featureManagement';
 
 export const ExtensionSection = (): ReactElement | null => {
   const { openModal } = useLazyModal();
   const { isActive: isDndActive, setShowDnd } = useDndContext();
   const { optOutCompanion, toggleOptOutCompanion } = useSettingsContext();
+  const { user } = useAuthContext();
+  // Route "Shortcuts" in the profile menu to the same modal the user sees
+  // elsewhere. On the new hub that's ShortcutsManage (settings-like); on
+  // the legacy hub it's still CustomLinks. Gating this through the same
+  // feature flag keeps the menu consistent with the row on the new tab.
+  const { value: hubEnabled } = useConditionalFeature({
+    feature: featureShortcutsHub,
+    shouldEvaluate: !!user,
+  });
+  const shortcutsModal =
+    user && hubEnabled ? LazyModal.ShortcutsManage : LazyModal.CustomLinks;
 
   if (!checkIsExtension()) {
     return null;
@@ -28,7 +42,7 @@ export const ExtensionSection = (): ReactElement | null => {
           {
             title: 'Shortcuts',
             icon: ShortcutsIcon,
-            onClick: () => openModal({ type: LazyModal.CustomLinks }),
+            onClick: () => openModal({ type: shortcutsModal }),
           },
           {
             title: `${isDndActive ? 'Resume' : 'Pause'} new tab`,
diff --git a/packages/shared/src/components/icons/Drag/filled.svg b/packages/shared/src/components/icons/Drag/filled.svg
new file mode 100644
index 00000000000..c974c45f128
--- /dev/null
+++ b/packages/shared/src/components/icons/Drag/filled.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9" cy="6" r="1.75"/>
+<circle cx="15" cy="6" r="1.75"/>
+<circle cx="9" cy="12" r="1.75"/>
+<circle cx="15" cy="12" r="1.75"/>
+<circle cx="9" cy="18" r="1.75"/>
+<circle cx="15" cy="18" r="1.75"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Drag/index.tsx b/packages/shared/src/components/icons/Drag/index.tsx
new file mode 100644
index 00000000000..de87f045780
--- /dev/null
+++ b/packages/shared/src/components/icons/Drag/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const DragIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Drag/outlined.svg b/packages/shared/src/components/icons/Drag/outlined.svg
new file mode 100644
index 00000000000..b70649864f1
--- /dev/null
+++ b/packages/shared/src/components/icons/Drag/outlined.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9" cy="6" r="1.25"/>
+<circle cx="15" cy="6" r="1.25"/>
+<circle cx="9" cy="12" r="1.25"/>
+<circle cx="15" cy="12" r="1.25"/>
+<circle cx="9" cy="18" r="1.25"/>
+<circle cx="15" cy="18" r="1.25"/>
+</svg>
diff --git a/packages/shared/src/components/icons/index.ts b/packages/shared/src/components/icons/index.ts
index 11cf7a5c9b3..f5be181e6ed 100644
--- a/packages/shared/src/components/icons/index.ts
+++ b/packages/shared/src/components/icons/index.ts
@@ -49,6 +49,7 @@ export * from './Discuss';
 export * from './Docs';
 export * from './Download';
 export * from './Downvote';
+export * from './Drag';
 export * from './DrawnArrow';
 export * from './Earth';
 export * from './Edit';
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index c1a8ae6c6d5..4924a9db1cc 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -261,6 +261,27 @@ const CustomLinksModal = dynamic(
     ),
 );
 
+const ShortcutEditModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "shortcutEditModal" */ '../../features/shortcuts/components/modals/ShortcutEditModal'
+    ),
+);
+
+const ShortcutsManageModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "shortcutsManageModal" */ '../../features/shortcuts/components/modals/ShortcutsManageModal'
+    ),
+);
+
+const ImportPickerModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "importPickerModal" */ '../../features/shortcuts/components/modals/ImportPickerModal'
+    ),
+);
+
 const ListAwardsModal = dynamic(() =>
   import(
     /* webpackChunkName: "listAwardsModal" */ './award/ListAwardsModal'
@@ -499,6 +520,9 @@ export const modals = {
   [LazyModal.GiveAward]: GiveAwardModal,
   [LazyModal.ContentModal]: ContentModal,
   [LazyModal.CustomLinks]: CustomLinksModal,
+  [LazyModal.ShortcutEdit]: ShortcutEditModal,
+  [LazyModal.ShortcutsManage]: ShortcutsManageModal,
+  [LazyModal.ImportPicker]: ImportPickerModal,
   [LazyModal.ListAwards]: ListAwardsModal,
   [LazyModal.AdsDashboard]: AdsDashboardModal,
   [LazyModal.BoostPost]: BoostPostModal,
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index f331f4ff9d7..87b53bf16f5 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -68,6 +68,9 @@ export enum LazyModal {
   GiveAward = 'giveAward',
   ContentModal = 'contentModal',
   CustomLinks = 'customLinks',
+  ShortcutEdit = 'shortcutEdit',
+  ShortcutsManage = 'shortcutsManage',
+  ImportPicker = 'importPicker',
   ListAwards = 'listAwards',
   AdsDashboard = 'adsDashboard',
   DirtyForm = 'dirtyForm',
diff --git a/packages/shared/src/features/shortcuts/components/AddShortcutTile.tsx b/packages/shared/src/features/shortcuts/components/AddShortcutTile.tsx
new file mode 100644
index 00000000000..7c27da0e66a
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/AddShortcutTile.tsx
@@ -0,0 +1,120 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { PlusIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import type { ShortcutsAppearance } from '../types';
+
+interface AddShortcutTileProps {
+  onClick: () => void;
+  appearance?: ShortcutsAppearance;
+  disabled?: boolean;
+  /**
+   * Whether the surrounding row is currently accepting a URL drop. Drop
+   * handling lives on the parent toolbar (see `useShortcutDropZone`) so the
+   * whole row is one big drop target instead of this small button. The tile
+   * itself only reflects the state in its label + aria hints so users know
+   * dropping is an option even when the indicator isn't firing yet.
+   */
+  acceptsDroppedUrl?: boolean;
+  /** Reflects the parent-owned `isDropTarget` state for the label swap. */
+  isDropActive?: boolean;
+}
+
+// Mirrors ShortcutTile's three appearance layouts so the row stays visually
+// coherent across modes. Dashed outline on the icon slot signals "empty"
+// without competing with the real tiles around it.
+export function AddShortcutTile({
+  onClick,
+  appearance = 'tile',
+  disabled,
+  acceptsDroppedUrl = false,
+  isDropActive = false,
+}: AddShortcutTileProps): ReactElement {
+  const isChip = appearance === 'chip';
+  const isIconOnly = appearance === 'icon';
+
+  // While the parent row is highlighted as a drop target, also tint the
+  // "+" slot so the user's aim has a clear focal point inside the halo.
+  const dropStateClass = isDropActive
+    ? 'border-accent-cabbage-default bg-accent-cabbage-default/10 text-accent-cabbage-default'
+    : '';
+
+  const iconBox = (
+    <span
+      className={classNames(
+        'flex items-center justify-center rounded-12 border border-dashed border-border-subtlest-tertiary bg-transparent text-text-tertiary transition-colors duration-150 ease-out',
+        'group-hover:border-solid group-hover:border-border-subtlest-secondary group-hover:bg-background-default group-hover:text-text-primary',
+        'group-focus-visible:ring-2 group-focus-visible:ring-accent-cabbage-default group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background-default',
+        'motion-reduce:transition-none',
+        isChip ? 'size-5 rounded-6' : 'size-11',
+        dropStateClass,
+      )}
+    >
+      <PlusIcon size={isChip ? IconSize.XSmall : IconSize.Size16} />
+    </span>
+  );
+
+  const dropHint = acceptsDroppedUrl
+    ? ' · drop a link anywhere on the row'
+    : '';
+
+  if (isChip) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={classNames(
+          'group flex h-9 max-w-[140px] items-center gap-2 rounded-10 border border-dashed border-border-subtlest-tertiary bg-transparent px-2 text-text-tertiary outline-none transition-colors duration-150 ease-out hover:border-solid hover:border-border-subtlest-secondary hover:bg-surface-float hover:text-text-primary focus-visible:bg-surface-float motion-reduce:transition-none',
+          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent',
+          isDropActive && dropStateClass,
+        )}
+        aria-label={`Add shortcut${dropHint}`}
+      >
+        <PlusIcon size={IconSize.Size16} />
+        <span className="truncate typo-caption1">Add</span>
+      </button>
+    );
+  }
+
+  if (isIconOnly) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={classNames(
+          'group flex size-12 items-center justify-center rounded-12 outline-none transition-colors duration-150 ease-out hover:bg-surface-float focus-visible:bg-surface-float motion-reduce:transition-none',
+          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent',
+        )}
+        aria-label={`Add shortcut${dropHint}`}
+        title={
+          acceptsDroppedUrl
+            ? 'Add shortcut or drop a link anywhere on the row'
+            : 'Add shortcut'
+        }
+      >
+        {iconBox}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={classNames(
+        'group flex w-[76px] flex-col items-center gap-1.5 rounded-14 p-2 outline-none transition-colors duration-150 ease-out hover:bg-surface-float focus-visible:bg-surface-float motion-reduce:transition-none',
+        'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent',
+      )}
+      aria-label={`Add shortcut${dropHint}`}
+    >
+      {iconBox}
+      <span className="max-w-full truncate text-text-tertiary typo-caption2 group-hover:text-text-primary">
+        {isDropActive ? 'Drop to add' : 'Add'}
+      </span>
+    </button>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/ShortcutTile.tsx b/packages/shared/src/features/shortcuts/components/ShortcutTile.tsx
new file mode 100644
index 00000000000..75fd2b13a14
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/ShortcutTile.tsx
@@ -0,0 +1,437 @@
+import type {
+  DragEvent as ReactDragEvent,
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactElement,
+} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '../../../components/dropdown/DropdownMenu';
+import {
+  EditIcon,
+  MenuIcon,
+  MiniCloseIcon,
+  TrashIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { MenuIcon as WrappingMenuIcon } from '../../../components/MenuIcon';
+import { combinedClicks } from '../../../lib/click';
+import { apiUrl } from '../../../lib/config';
+import { getDomainFromUrl } from '../../../lib/links';
+import {
+  DRAG_ACTIVATION_DISTANCE_SQ_PX,
+  POST_DRAG_SUPPRESSION_MS,
+} from '../hooks/useDragClickGuard';
+import type { Shortcut, ShortcutColor, ShortcutsAppearance } from '../types';
+
+const pixelRatio =
+  typeof globalThis?.window === 'undefined'
+    ? 1
+    : globalThis.window.devicePixelRatio ?? 1;
+const iconSize = Math.round(24 * pixelRatio);
+
+const colorClass: Record<ShortcutColor, string> = {
+  burger: 'bg-accent-burger-bolder text-white',
+  cheese: 'bg-accent-cheese-bolder text-black',
+  avocado: 'bg-accent-avocado-bolder text-white',
+  bacon: 'bg-accent-bacon-bolder text-white',
+  blueCheese: 'bg-accent-blueCheese-bolder text-white',
+  cabbage: 'bg-accent-cabbage-bolder text-white',
+};
+
+interface LetterChipProps {
+  name: string;
+  color: ShortcutColor;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+function LetterChip({
+  name,
+  color,
+  size = 'md',
+}: LetterChipProps): ReactElement {
+  const letter = (name || '?').charAt(0).toUpperCase();
+  const sizeClassMap: Record<'sm' | 'md' | 'lg', string> = {
+    lg: 'size-10 text-lg',
+    sm: 'size-6 text-xs',
+    md: 'size-8 text-sm',
+  };
+  const sizeClass = sizeClassMap[size];
+  return (
+    <span
+      aria-hidden
+      className={classNames(
+        'flex items-center justify-center rounded-8 font-bold',
+        colorClass[color],
+        sizeClass,
+      )}
+    >
+      {letter}
+    </span>
+  );
+}
+
+interface ShortcutTileProps {
+  shortcut: Shortcut;
+  appearance?: ShortcutsAppearance;
+  draggable?: boolean;
+  onClick?: () => void;
+  onEdit?: (shortcut: Shortcut) => void;
+  onRemove?: (shortcut: Shortcut) => void;
+  removeLabel?: string;
+  className?: string;
+}
+
+export function ShortcutTile({
+  shortcut,
+  appearance = 'tile',
+  draggable = true,
+  onClick,
+  onEdit,
+  onRemove,
+  removeLabel = 'Remove',
+  className,
+}: ShortcutTileProps): ReactElement {
+  const { url, name, iconUrl, color = 'burger' } = shortcut;
+  const label = name || getDomainFromUrl(url);
+  const [iconBroken, setIconBroken] = useState(false);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: url, disabled: !draggable });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const handleKey = useCallback(
+    (event: KeyboardEvent<HTMLAnchorElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+      if (onClick) {
+        onClick();
+      }
+    },
+    [onClick],
+  );
+
+  const pointerOriginRef = useRef<{ x: number; y: number } | null>(null);
+
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLAnchorElement>) => {
+      pointerOriginRef.current = { x: event.clientX, y: event.clientY };
+    },
+    [],
+  );
+
+  const didPointerTravel = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>): boolean => {
+      const origin = pointerOriginRef.current;
+      pointerOriginRef.current = null;
+      if (!origin) {
+        return false;
+      }
+      const dx = event.clientX - origin.x;
+      const dy = event.clientY - origin.y;
+      return dx * dx + dy * dy >= DRAG_ACTIVATION_DISTANCE_SQ_PX;
+    },
+    [],
+  );
+
+  // `isDragging` can flip back to false *before* the browser fires the stray
+  // `click` that follows pointerup on a drag. And because dnd-kit reorders
+  // tiles under the pointer, that click sometimes lands on a sibling tile
+  // where `didPointerTravel` has no recorded origin to compare against. A
+  // short "just dragged" window catches both cases reliably.
+  const justDraggedRef = useRef(false);
+  const dragWasActiveRef = useRef(false);
+  useEffect(() => {
+    if (isDragging) {
+      dragWasActiveRef.current = true;
+      justDraggedRef.current = true;
+      return undefined;
+    }
+    if (!dragWasActiveRef.current) {
+      return undefined;
+    }
+    dragWasActiveRef.current = false;
+    const timer = window.setTimeout(() => {
+      justDraggedRef.current = false;
+    }, POST_DRAG_SUPPRESSION_MS);
+    return () => window.clearTimeout(timer);
+  }, [isDragging]);
+
+  const handleAnchorClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      if (isDragging || justDraggedRef.current || didPointerTravel(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.();
+    },
+    [didPointerTravel, isDragging, onClick],
+  );
+
+  const finalIconSrc =
+    !iconBroken && iconUrl
+      ? iconUrl
+      : `${apiUrl}/icon?url=${encodeURIComponent(url)}&size=${iconSize}`;
+
+  const handleIconError = () => setIconBroken(true);
+
+  const shouldShowFavicon = !iconBroken;
+
+  const stop = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const useQuickRemove = !!onRemove && !onEdit;
+
+  const menuOptions = useQuickRemove
+    ? []
+    : [
+        ...(onEdit
+          ? [
+              {
+                icon: <WrappingMenuIcon Icon={EditIcon} />,
+                label: 'Edit',
+                action: () => onEdit(shortcut),
+              },
+            ]
+          : []),
+        ...(onRemove
+          ? [
+              {
+                icon: <WrappingMenuIcon Icon={TrashIcon} />,
+                label: removeLabel,
+                action: () => onRemove(shortcut),
+              },
+            ]
+          : []),
+      ];
+
+  const dragHandleProps = draggable ? { ...attributes, ...listeners } : {};
+
+  // Anchors (`<a href>`) and images are natively draggable via the browser's
+  // HTML5 drag-and-drop. With dnd-kit's PointerSensor using a 5px activation
+  // threshold, the browser can start its own URL-drag before dnd-kit takes
+  // over. If the user drops that URL outside a registered drop zone —
+  // anywhere to the *left* of `AddShortcutTile` — Chrome's default action is
+  // to navigate the current tab to the URL, which looks exactly like a
+  // stray click. Swallowing `dragstart` at the tile root disables native
+  // HTML5 drag for the anchor and favicon without affecting dnd-kit (which
+  // listens to pointer events, not drag events).
+  const suppressNativeDrag = useCallback((event: ReactDragEvent) => {
+    event.preventDefault();
+  }, []);
+
+  const isChip = appearance === 'chip';
+  const isIconOnly = appearance === 'icon';
+
+  // Favicon/letter renderer, sized per appearance. Chip mode uses a smaller
+  // 16px glyph to fit the compact pill; tile/icon modes stay at the roomier
+  // 24px favicon the rest of the feature uses. `draggable={false}` kills
+  // the browser's default image drag so dnd-kit's pointer lifecycle is the
+  // only drag semantics on the tile — a stray drop outside the hub can no
+  // longer hand Chrome a URL to navigate the tab to.
+  const iconContent = shouldShowFavicon ? (
+    <img
+      src={finalIconSrc}
+      alt=""
+      draggable={false}
+      onError={handleIconError}
+      className={classNames('rounded-4', isChip ? 'size-5' : 'size-6')}
+    />
+  ) : (
+    <LetterChip name={label} color={color} size={isChip ? 'sm' : 'lg'} />
+  );
+
+  // Anchor (the clickable favicon box). Tile/icon modes make it the whole
+  // square; chip mode makes it a compact slot inside a horizontal pill.
+  // `draggable={false}` at the DOM level — belt to the `onDragStart`
+  // preventDefault suspenders — because Chrome otherwise starts a URL drag
+  // on mousedown before React's delegated handler can cancel it.
+  const anchorCommon = {
+    href: url,
+    rel: 'noopener noreferrer',
+    draggable: false,
+    onPointerDown: handlePointerDown,
+    onKeyDown: handleKey,
+    'aria-label': label,
+  };
+
+  // `<a>` defaults to `cursor: pointer` which overrides the container's
+  // `cursor-grab` and makes users think the favicon isn't a drag handle
+  // (they see a click cursor, try to drag anyway, and the drop lands a
+  // stray click that navigates the tab). Force the grab/grabbing cursor
+  // on the anchor too so the whole tile reads as draggable. When drag is
+  // in-flight, `pointer-events-none` on the anchor keeps the browser from
+  // firing its `click` on pointerup — the drop becomes a no-op visually
+  // even if every other suppression fails.
+  const anchorCursorClass = draggable
+    ? classNames(
+        'cursor-grab active:cursor-grabbing',
+        isDragging && 'pointer-events-none',
+      )
+    : '';
+
+  // Outer container styling per appearance:
+  // - tile : 76px-wide column with label underneath (Chrome new tab).
+  // - icon : compact square (iOS dock / Arc pinned tabs).
+  // - chip : horizontal pill with favicon + label (Chrome bookmarks bar).
+  let appearanceContainerClass: string;
+  if (isChip) {
+    appearanceContainerClass =
+      'flex h-9 max-w-[200px] items-center gap-2 rounded-10 bg-surface-float pl-2 pr-2 focus-within:bg-background-default hover:bg-background-default';
+  } else if (isIconOnly) {
+    appearanceContainerClass =
+      'flex size-12 items-center justify-center rounded-12 focus-within:bg-surface-float hover:bg-surface-float';
+  } else {
+    appearanceContainerClass =
+      'flex w-[76px] flex-col items-center rounded-14 p-2 focus-within:bg-surface-float hover:bg-surface-float';
+  }
+  const containerClass = classNames(
+    'group relative outline-none transition-colors duration-150 ease-out motion-reduce:transition-none',
+    appearanceContainerClass,
+    draggable && 'cursor-grab active:cursor-grabbing',
+    isDragging &&
+      'z-10 rotate-[-2deg] bg-surface-float shadow-2 motion-reduce:rotate-0',
+    className,
+  );
+
+  // Action button sits in the top-right corner of the tile across every
+  // layout. Chip mode pokes slightly outside to clear the pill edge; tile
+  // and icon modes tuck just inside the container.
+  let actionBtnPositionClass: string;
+  if (isChip) {
+    actionBtnPositionClass = 'absolute -right-1 -top-1';
+  } else {
+    actionBtnPositionClass = 'absolute right-0.5 top-0.5';
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...dragHandleProps}
+      onDragStart={suppressNativeDrag}
+      className={containerClass}
+      title={isIconOnly || isChip ? label : undefined}
+    >
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {isChip ? (
+        // CHIP: single pill, favicon on the left inside the pill, text right.
+        <a
+          {...combinedClicks(handleAnchorClick)}
+          {...anchorCommon}
+          className={classNames(
+            'flex min-w-0 flex-1 items-center gap-2 focus-visible:outline-none',
+            anchorCursorClass,
+          )}
+        >
+          <span className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-6">
+            {iconContent}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-text-primary typo-caption1">
+            {label}
+          </span>
+        </a>
+      ) : isIconOnly ? (
+        // ICON ONLY: just the favicon box, no label.
+        <a
+          {...combinedClicks(handleAnchorClick)}
+          {...anchorCommon}
+          className={classNames(
+            'relative flex size-11 items-center justify-center overflow-hidden rounded-12 bg-surface-float text-text-secondary transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2 focus-visible:ring-offset-background-default group-hover:bg-background-default motion-reduce:transition-none',
+            anchorCursorClass,
+          )}
+        >
+          {iconContent}
+        </a>
+      ) : (
+        // TILE: favicon square + label under (default Chrome new-tab style).
+        <>
+          <a
+            {...combinedClicks(handleAnchorClick)}
+            {...anchorCommon}
+            className={classNames(
+              'relative mb-1.5 flex size-11 items-center justify-center overflow-hidden rounded-12 bg-surface-float text-text-secondary transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2 focus-visible:ring-offset-background-default group-hover:bg-background-default motion-reduce:transition-none',
+              anchorCursorClass,
+            )}
+          >
+            {iconContent}
+          </a>
+          <span
+            className="max-w-full truncate text-center text-text-secondary typo-caption2 group-hover:text-text-primary"
+            title={label}
+          >
+            {label}
+          </span>
+        </>
+      )}
+
+      {useQuickRemove && (
+        <button
+          type="button"
+          aria-label={`${removeLabel} ${label}`}
+          title={`${removeLabel} ${label}`}
+          onClick={(event) => {
+            stop(event);
+            onRemove?.(shortcut);
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+          className={classNames(
+            'flex size-5 cursor-pointer items-center justify-center rounded-full bg-text-primary text-surface-invert opacity-0 shadow-2 transition-[opacity,background-color] duration-150 hover:bg-accent-ketchup-default hover:text-white focus-visible:opacity-100 group-hover:opacity-100 motion-reduce:transition-none',
+            actionBtnPositionClass,
+          )}
+        >
+          <MiniCloseIcon size={IconSize.XXSmall} />
+        </button>
+      )}
+
+      {menuOptions.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label={`${label} actions`}
+              aria-haspopup="menu"
+              onClick={stop}
+              onPointerDown={(event) => event.stopPropagation()}
+              className={classNames(
+                'flex size-5 cursor-pointer items-center justify-center rounded-full bg-text-primary text-surface-invert opacity-0 shadow-2 transition-opacity duration-150 focus-visible:opacity-100 group-hover:opacity-100 motion-reduce:transition-none',
+                actionBtnPositionClass,
+              )}
+            >
+              <MenuIcon size={IconSize.XXSmall} />
+            </button>
+          </DropdownMenuTrigger>
+          {/* Tile menu only carries 1–2 short labels (Edit / Remove or
+              Hide), so the default 256px action width feels enormous next
+              to a 76px tile. min-w-0 + a sensible 7rem floor lets it size
+              to its content while staying tappable on touch. */}
+          <DropdownMenuContent className="!min-w-[7rem]">
+            <DropdownMenuOptions options={menuOptions} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/WebappShortcutsRow.tsx b/packages/shared/src/features/shortcuts/components/WebappShortcutsRow.tsx
new file mode 100644
index 00000000000..cbf018b0f63
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/WebappShortcutsRow.tsx
@@ -0,0 +1,226 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import { useSettingsContext } from '../../../contexts/SettingsContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { LazyModal } from '../../../components/modals/common/types';
+import { LogEvent, ShortcutsSourceType, TargetType } from '../../../lib/log';
+import { ShortcutTile } from './ShortcutTile';
+import { AddShortcutTile } from './AddShortcutTile';
+import { useShortcutsManager } from '../hooks/useShortcutsManager';
+import {
+  useDragClickGuard,
+  DRAG_ACTIVATION_DISTANCE_PX,
+} from '../hooks/useDragClickGuard';
+import { useShortcutDropZone } from '../hooks/useShortcutDropZone';
+import { DEFAULT_SHORTCUTS_APPEARANCE, MAX_SHORTCUTS } from '../types';
+import type { Shortcut, ShortcutsAppearance } from '../types';
+
+interface WebappShortcutsRowProps {
+  className?: string;
+}
+
+/**
+ * Webapp-side shortcut row. Only renders when the user has enabled
+ * `showShortcutsOnWebapp` from the extension's manage modal. Reuses the same
+ * `ShortcutTile` and `useShortcutsManager` the extension hub does so edits
+ * and reorders stay in sync across surfaces.
+ *
+ * Auto mode (live top-sites from the browser) is intentionally ignored on
+ * the webapp — we don't have topSites permission outside the extension and
+ * the "most visited sites" concept doesn't travel across devices anyway.
+ * Manual curated shortcuts do.
+ */
+export function WebappShortcutsRow({
+  className,
+}: WebappShortcutsRowProps): ReactElement | null {
+  const { flags, showTopSites } = useSettingsContext();
+  const { openModal } = useLazyModal();
+  const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
+  const manager = useShortcutsManager();
+
+  const enabled = flags?.showShortcutsOnWebapp ?? false;
+  const appearance: ShortcutsAppearance =
+    flags?.shortcutsAppearance ?? DEFAULT_SHORTCUTS_APPEARANCE;
+
+  const shortcuts: Shortcut[] = useMemo(
+    () => manager.shortcuts.slice(0, MAX_SHORTCUTS),
+    [manager.shortcuts],
+  );
+
+  // One-shot impression per enabled->rendered cycle. Lets us slice hub
+  // adoption between "on the extension" and "on the webapp" without needing
+  // client-side duplication.
+  const loggedRef = useRef(false);
+  useEffect(() => {
+    if (loggedRef.current) {
+      return;
+    }
+    if (!enabled || !showTopSites || shortcuts.length === 0) {
+      return;
+    }
+    loggedRef.current = true;
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({
+        source: ShortcutsSourceType.Custom,
+        surface: 'webapp',
+      }),
+    });
+  }, [enabled, showTopSites, shortcuts.length, logEvent]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE_PX },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Same click-suppression guard the extension hub uses: dnd-kit swallows
+  // the pointerdown to pointerup sequence but the browser still fires a
+  // click on release, so we intercept it (otherwise the link would
+  // navigate mid-drag). The hook attaches a document-level capture-phase
+  // listener so clicks that land *outside* the toolbar's DOM subtree after
+  // a long drag are still caught.
+  const { armGuard: armDragSuppression, onClickCapture: suppressClickCapture } =
+    useDragClickGuard();
+
+  // Match the extension hub's native-drag backstop. Tiles already mark their
+  // anchors/favicons as `draggable={false}`, but capture-phase cancellation
+  // at the toolbar root kills any stray URL drag before the browser can
+  // navigate the tab on drop-outside-a-handler.
+  const suppressNativeDragCapture = (event: React.DragEvent) => {
+    event.preventDefault();
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    armDragSuppression();
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const urls = shortcuts.map((s) => s.url);
+    const oldIndex = urls.indexOf(active.id as string);
+    const newIndex = urls.indexOf(over.id as string);
+    if (oldIndex < 0 || newIndex < 0) {
+      return;
+    }
+    const overflowUrls = manager.shortcuts
+      .slice(MAX_SHORTCUTS)
+      .map((s) => s.url);
+    manager.reorder([...arrayMove(urls, oldIndex, newIndex), ...overflowUrls]);
+  };
+
+  const onEdit = (shortcut: Shortcut) =>
+    openModal({
+      type: LazyModal.ShortcutEdit,
+      props: { mode: 'edit', shortcut },
+    });
+
+  const onRemove = (shortcut: Shortcut) => manager.removeShortcut(shortcut.url);
+
+  const onAdd = () =>
+    openModal({ type: LazyModal.ShortcutEdit, props: { mode: 'add' } });
+
+  const onDropUrl = async (url: string) => {
+    const result = await manager.addShortcut({ url });
+    if (result.error) {
+      displayToast(result.error);
+    }
+  };
+
+  // The whole row is the drop zone, not just the tiny "+" tile — see
+  // `useShortcutDropZone` for rationale. Only active when there's room in
+  // the library for another shortcut.
+  const canAcceptDroppedUrl = manager.canAdd;
+  const { isDropTarget, dropHandlers } = useShortcutDropZone(
+    onDropUrl,
+    canAcceptDroppedUrl,
+  );
+
+  // Gatekeeping: only render for opted-in users with something to show or
+  // the ability to add. Users who haven't turned on the setting — or who
+  // hid the row entirely — get nothing.
+  if (!enabled || !showTopSites) {
+    return null;
+  }
+  if (shortcuts.length === 0 && !manager.canAdd) {
+    return null;
+  }
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Shortcuts"
+      onClickCapture={suppressClickCapture}
+      onAuxClickCapture={suppressClickCapture}
+      onDragStartCapture={suppressNativeDragCapture}
+      {...dropHandlers}
+      className={classNames(
+        'hidden flex-wrap items-center mobileXL:flex',
+        appearance === 'tile' && 'items-start gap-x-1 gap-y-2',
+        appearance === 'icon' && 'gap-1',
+        appearance === 'chip' && 'gap-1',
+        // Drag-to-add indicator: same treatment as the extension hub so
+        // the two surfaces feel like the same widget. Ring is box-shadow
+        // based → no layout shift when the halo turns on.
+        'rounded-12 transition-[box-shadow,background-color] duration-150 motion-reduce:transition-none',
+        isDropTarget &&
+          'bg-overlay-float-cabbage ring-2 ring-accent-cabbage-default ring-offset-4 ring-offset-background-default',
+        className,
+      )}
+    >
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={armDragSuppression}
+        onDragCancel={armDragSuppression}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={shortcuts.map((s) => s.url)}
+          strategy={horizontalListSortingStrategy}
+        >
+          {shortcuts.map((shortcut) => (
+            <ShortcutTile
+              key={shortcut.url}
+              shortcut={shortcut}
+              appearance={appearance}
+              onEdit={onEdit}
+              onRemove={onRemove}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+      {manager.canAdd && (
+        <AddShortcutTile
+          appearance={appearance}
+          onClick={onAdd}
+          acceptsDroppedUrl={canAcceptDroppedUrl}
+          isDropActive={isDropTarget}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/modals/ImportPickerModal.tsx b/packages/shared/src/features/shortcuts/components/modals/ImportPickerModal.tsx
new file mode 100644
index 00000000000..cecc353e487
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/modals/ImportPickerModal.tsx
@@ -0,0 +1,348 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { Button, ButtonVariant } from '../../../../components/buttons/Button';
+import type { ModalProps } from '../../../../components/modals/common/Modal';
+import { Modal } from '../../../../components/modals/common/Modal';
+import { Justify } from '../../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { BookmarkIcon, SitesIcon, VIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { apiUrl } from '../../../../lib/config';
+import { getDomainFromUrl } from '../../../../lib/links';
+import { MAX_SHORTCUTS } from '../../types';
+import type { ImportSource } from '../../types';
+import { useShortcutsManager } from '../../hooks/useShortcutsManager';
+import { useSettingsContext } from '../../../../contexts/SettingsContext';
+import { useToastNotification } from '../../../../hooks/useToastNotification';
+import { useLazyModal } from '../../../../hooks/useLazyModal';
+import type { LazyModal } from '../../../../components/modals/common/types';
+import { invokeOnRequestClose } from './closeModal';
+
+export interface ImportPickerItem {
+  url: string;
+  title?: string;
+}
+
+export interface ImportPickerModalProps extends ModalProps {
+  source: ImportSource;
+  items: ImportPickerItem[];
+  onImported?: (result: { imported: number; skipped: number }) => void;
+  // When set, the Cancel button hands control back to this modal instead of
+  // fully dismissing the stack. Keeps "cancel the import" distinct from
+  // "close the whole flow" (which the header X still does). Narrowed to
+  // `ShortcutsManage` because that's the only prop-less modal we reopen
+  // from here; keeping it narrow avoids the generic `openModal` call
+  // requiring a `props` argument at the type level.
+  returnTo?: LazyModal.ShortcutsManage;
+}
+
+// Favicon with graceful fallback: the browser-icon proxy often ships a blurry
+// 16px globe for sites it doesn't know. Instead of rendering that fuzz, we
+// swap to a letter chip painted from the site's first character.
+function FaviconOrLetter({
+  url,
+  label,
+}: {
+  url: string;
+  label: string;
+}): ReactElement {
+  const [failed, setFailed] = useState(false);
+  const letter = (label || '?').charAt(0).toUpperCase();
+
+  if (failed) {
+    return (
+      <span
+        aria-hidden
+        className="flex size-10 shrink-0 items-center justify-center rounded-12 bg-surface-float text-text-secondary typo-callout"
+      >
+        {letter}
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-12 bg-surface-float">
+      <img
+        src={`${apiUrl}/icon?url=${encodeURIComponent(url)}&size=64`}
+        alt=""
+        onError={() => setFailed(true)}
+        className="size-6 rounded-4"
+      />
+    </span>
+  );
+}
+
+export default function ImportPickerModal({
+  source,
+  items,
+  onImported,
+  returnTo,
+  ...props
+}: ImportPickerModalProps): ReactElement {
+  const { customLinks } = useSettingsContext();
+  const manager = useShortcutsManager();
+  const { displayToast } = useToastNotification();
+  const { openModal, closeModal } = useLazyModal();
+
+  const close = () => {
+    closeModal();
+    invokeOnRequestClose(props.onRequestClose);
+  };
+
+  // Cancel = "back out of the import", not "close the whole shortcuts flow".
+  // If the picker was triggered from another modal (e.g. Manage), hand
+  // control back there so the user lands where they came from.
+  const handleCancel = () => {
+    if (returnTo) {
+      openModal({ type: returnTo });
+      return;
+    }
+    close();
+  };
+
+  const alreadyUsed = customLinks?.length ?? 0;
+  const capacity = Math.max(0, MAX_SHORTCUTS - alreadyUsed);
+  const [checked, setChecked] = useState<Record<string, boolean>>(() => {
+    const state: Record<string, boolean> = {};
+    items.slice(0, capacity).forEach((item) => {
+      state[item.url] = true;
+    });
+    return state;
+  });
+
+  const selected = useMemo(
+    () => items.filter((item) => checked[item.url]),
+    [checked, items],
+  );
+
+  const selectableCount = Math.min(items.length, capacity);
+  const atCapacity = selected.length >= capacity;
+
+  const toggle = (url: string) =>
+    setChecked((prev) => {
+      const next = !prev[url];
+      if (next && !prev[url] && selected.length >= capacity) {
+        return prev;
+      }
+      return { ...prev, [url]: next };
+    });
+
+  const allSelected = selectableCount > 0 && selected.length >= selectableCount;
+  const toggleAll = () => {
+    if (allSelected) {
+      setChecked({});
+      return;
+    }
+    const next: Record<string, boolean> = {};
+    items.slice(0, capacity).forEach((item) => {
+      next[item.url] = true;
+    });
+    setChecked(next);
+  };
+
+  const handleImport = async () => {
+    const result = await manager.importFrom(source, selected);
+    onImported?.(result);
+    const noun = source === 'bookmarks' ? 'bookmarks' : 'sites';
+    if (result.imported === 0) {
+      // Every selected row was a duplicate or we were at capacity — calling
+      // that a success with "Imported 0" reads like a bug. Tell the user
+      // what actually happened instead.
+      displayToast(
+        result.skipped > 0
+          ? `Nothing imported — ${result.skipped} ${noun} already in shortcuts`
+          : `Nothing to import`,
+      );
+    } else {
+      displayToast(
+        `Imported ${result.imported} ${noun} to shortcuts${
+          result.skipped ? `. ${result.skipped} skipped.` : ''
+        }`,
+      );
+    }
+    close();
+  };
+
+  const isBookmarks = source === 'bookmarks';
+  const title = isBookmarks ? 'Import bookmarks' : 'Import most visited';
+  // Spell out where the list came from and how many rows the browser surfaced.
+  // Stops users assuming we've clipped the list at whatever number they see
+  // (Chrome's topSites API, for instance, returns however many repeat-visit
+  // origins the profile has, sometimes 8, sometimes 20).
+  const sourceCopy = isBookmarks
+    ? `Pick the ones you want. Your bookmarks stay untouched. ${items.length} available.`
+    : `Pick the ones you want. Snapshot from your browser. ${
+        items.length
+      } site${items.length === 1 ? '' : 's'} available.`;
+
+  const slotsLeft = Math.max(0, capacity - selected.length);
+
+  return (
+    <Modal kind={Modal.Kind.FlexibleCenter} size={Modal.Size.Medium} {...props}>
+      {/* Same header rhythm as the Manage / Edit modals: left-aligned, Body
+          bold, no oversized Title1. Subtitle lives in the body as helper
+          copy so the header stays compact. */}
+      <Modal.Header showCloseButton>
+        <Typography tag={TypographyTag.H3} type={TypographyType.Body} bold>
+          {title}
+        </Typography>
+      </Modal.Header>
+      <Modal.Body>
+        <p className="mb-3 text-text-tertiary typo-callout">{sourceCopy}</p>
+        {/* Calm status strip: what you've picked + how many slots you have
+            left, and an inline Select-all / Clear-all toggle. No fill bar,
+            no "progress to fill" metaphor. Picking is optional, not a
+            task. */}
+        <div
+          className="bg-surface-float/40 mb-4 flex items-center justify-between gap-3 rounded-12 border border-border-subtlest-tertiary px-3 py-2"
+          aria-live="polite"
+        >
+          <div className="flex flex-col leading-tight">
+            <span className="font-bold tabular-nums text-text-primary typo-footnote">
+              {selected.length === 0
+                ? 'Nothing picked yet'
+                : `${selected.length} picked`}
+            </span>
+            <span className="text-text-tertiary typo-caption1">
+              {atCapacity
+                ? `You've hit the ${MAX_SHORTCUTS}-shortcut limit`
+                : `${slotsLeft} of ${MAX_SHORTCUTS} slot${
+                    slotsLeft === 1 ? '' : 's'
+                  } left${
+                    alreadyUsed > 0 ? ` · ${alreadyUsed} already saved` : ''
+                  }`}
+            </span>
+          </div>
+          <button
+            type="button"
+            onClick={toggleAll}
+            disabled={selectableCount === 0}
+            className="shrink-0 rounded-8 px-2 py-1 font-bold text-text-secondary transition-colors duration-150 typo-caption1 hover:bg-surface-float hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
+          >
+            {allSelected ? 'Clear all' : 'Select all'}
+          </button>
+        </div>
+
+        {items.length === 0 ? (
+          // Empty state worth looking at. The source-specific glyph tells
+          // users what we tried to read from, and the copy explains *why*
+          // there's nothing — not just "empty" which reads like our bug.
+          <div className="bg-surface-float/40 flex flex-col items-center gap-3 rounded-16 border border-dashed border-border-subtlest-tertiary px-6 py-10 text-center">
+            <span
+              aria-hidden
+              className="flex size-12 items-center justify-center rounded-14 bg-overlay-float-cabbage text-accent-cabbage-default"
+            >
+              {isBookmarks ? (
+                <BookmarkIcon secondary className="size-6" />
+              ) : (
+                <SitesIcon secondary className="size-6" />
+              )}
+            </span>
+            <Typography type={TypographyType.Callout} bold>
+              {isBookmarks
+                ? 'No bookmarks to import'
+                : 'No browsing history to show'}
+            </Typography>
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              {isBookmarks
+                ? 'Add bookmarks to your browser bar, then come back.'
+                : 'Visit a few sites first. Your browser needs history to suggest from.'}
+            </Typography>
+          </div>
+        ) : (
+          // Tap-to-toggle rows. No separate checkbox column. Selected state is
+          // a check badge on the icon itself (iOS Photos multi-select feel)
+          // plus a calm surface tint. Dead quiet until you interact.
+          <ul
+            role="listbox"
+            aria-multiselectable="true"
+            className="flex max-h-[60vh] flex-col gap-0.5 overflow-y-auto pr-1"
+          >
+            {items.map((item) => {
+              const isChecked = !!checked[item.url];
+              const atCap = !isChecked && atCapacity;
+              const label = item.title || getDomainFromUrl(item.url);
+              return (
+                <li key={item.url}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={isChecked}
+                    disabled={atCap}
+                    onClick={() => toggle(item.url)}
+                    className={classNames(
+                      // Selection is carried by the trailing check alone so
+                      // a long list of picked rows doesn't look like a wall
+                      // of colour. Selected rows get a hair of surface tint
+                      // to feel "lifted", nothing more.
+                      'group relative flex w-full items-center gap-3 rounded-12 p-2 text-left transition-colors duration-150 motion-reduce:transition-none',
+                      isChecked
+                        ? 'bg-surface-float hover:bg-surface-float'
+                        : 'hover:bg-surface-float/60',
+                      atCap && 'cursor-not-allowed opacity-40',
+                    )}
+                  >
+                    <FaviconOrLetter url={item.url} label={label} />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-text-primary typo-callout">
+                        {label}
+                      </p>
+                      <p className="truncate text-text-tertiary typo-caption1">
+                        {getDomainFromUrl(item.url)}
+                      </p>
+                    </div>
+                    {/* The only selection signal: a small filled check on the
+                        trailing edge. Empty ring at rest invites a tap. */}
+                    <span
+                      aria-hidden
+                      className={classNames(
+                        'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-150 motion-reduce:transition-none',
+                        isChecked
+                          ? 'border-accent-cabbage-default bg-accent-cabbage-default text-surface-invert'
+                          : 'border-border-subtlest-tertiary bg-transparent group-hover:border-border-subtlest-secondary',
+                      )}
+                    >
+                      <VIcon
+                        size={IconSize.XXSmall}
+                        className={classNames(
+                          'transition-opacity duration-150 motion-reduce:transition-none',
+                          isChecked ? 'opacity-100' : 'opacity-0',
+                        )}
+                      />
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </Modal.Body>
+      <Modal.Footer justify={Justify.End}>
+        <Button
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          onClick={handleCancel}
+        >
+          {returnTo ? 'Back' : 'Cancel'}
+        </Button>
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          onClick={handleImport}
+          disabled={!selected.length}
+        >
+          {selected.length ? `Import ${selected.length}` : 'Import'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesModal.tsx b/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesModal.tsx
index 052d0f973b2..7797248cdee 100644
--- a/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesModal.tsx
+++ b/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesModal.tsx
@@ -1,12 +1,15 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import { LazyImage } from '../../../../components/LazyImage';
-import { Button, ButtonVariant } from '../../../../components/buttons/Button';
 import type { ModalProps } from '../../../../components/modals/common/Modal';
 import { Modal } from '../../../../components/modals/common/Modal';
-import { Justify } from '../../../../components/utilities';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
 import { useShortcutLinks } from '../../hooks/useShortcutLinks';
 import { useShortcuts } from '../../contexts/ShortcutsProvider';
+import { MostVisitedSitesPermissionContent } from './MostVisitedSitesPermissionContent';
 
 export function MostVisitedSitesModal({
   className,
@@ -27,43 +30,23 @@ export function MostVisitedSitesModal({
       {...props}
       onRequestClose={onRequestClose}
     >
-      <Modal.Header />
-      <Modal.Body>
-        <Modal.Title className="mb-4">Show most visited sites</Modal.Title>
-        <Modal.Text className="text-center">
-          To show your most visited sites, your browser will now ask for more
-          permissions. Once approved, it will be kept locally.
-        </Modal.Text>
-        <LazyImage
-          imgSrc={
-            process.env.TARGET_BROWSER === 'firefox'
-              ? '/mvs_firefox.jpg'
-              : '/mvs_google.jpg'
+      {/* Unified with the rest of the shortcut modals: left-aligned Body bold
+          title, close button on the right. No more centered h1 hanging in
+          the middle of the body. */}
+      <Modal.Header showCloseButton>
+        <Typography tag={TypographyTag.H3} type={TypographyType.Body} bold>
+          Show most visited sites
+        </Typography>
+      </Modal.Header>
+      <MostVisitedSitesPermissionContent
+        onGrant={async () => {
+          const granted = await askTopSitesBrowserPermission();
+          setIsManual(!granted);
+          if (granted) {
+            setShowPermissionsModal(false);
           }
-          imgAlt="Image of the browser's default home screen"
-          className="mx-auto my-8 w-full max-w-[22rem] rounded-16"
-          ratio="45.8%"
-          eager
-        />
-        <Modal.Text className="text-center">
-          We will never collect your browsing history. We promise.
-        </Modal.Text>
-      </Modal.Body>
-      <Modal.Footer justify={Justify.Center}>
-        <Button
-          onClick={async () => {
-            const granted = await askTopSitesBrowserPermission();
-            setIsManual(!granted);
-
-            if (granted) {
-              setShowPermissionsModal(false);
-            }
-          }}
-          variant={ButtonVariant.Primary}
-        >
-          Add the shortcuts
-        </Button>
-      </Modal.Footer>
+        }}
+      />
     </Modal>
   );
 }
diff --git a/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesPermissionContent.tsx b/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesPermissionContent.tsx
new file mode 100644
index 00000000000..da6509984fc
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/modals/MostVisitedSitesPermissionContent.tsx
@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { LazyImage } from '../../../../components/LazyImage';
+import { Button, ButtonVariant } from '../../../../components/buttons/Button';
+import { Modal } from '../../../../components/modals/common/Modal';
+import { Justify } from '../../../../components/utilities';
+
+// Shared body/footer used by both the legacy `MostVisitedSitesModal` and the
+// new hub's `ShortcutImportFlow`. Both flows show the same copy + browser
+// screenshot + "grant access" CTA — having two copies of the markup was
+// drifting quickly, so they now share this presentational block.
+export interface MostVisitedSitesPermissionContentProps {
+  onGrant: () => void | Promise<void>;
+  ctaLabel?: string;
+  footerText?: string;
+}
+
+export function MostVisitedSitesPermissionContent({
+  onGrant,
+  ctaLabel = 'Add the shortcuts',
+  footerText = 'We will never collect your browsing history. We promise.',
+}: MostVisitedSitesPermissionContentProps): ReactElement {
+  return (
+    <>
+      <Modal.Body>
+        <Modal.Text className="text-center">
+          To show your most visited sites, your browser will now ask for more
+          permissions. Once approved, it will be kept locally.
+        </Modal.Text>
+        <LazyImage
+          imgSrc={
+            process.env.TARGET_BROWSER === 'firefox'
+              ? '/mvs_firefox.jpg'
+              : '/mvs_google.jpg'
+          }
+          imgAlt="Image of the browser's default home screen"
+          className="mx-auto my-6 w-full max-w-[22rem] rounded-16"
+          ratio="45.8%"
+          eager
+        />
+        <Modal.Text className="text-center">{footerText}</Modal.Text>
+      </Modal.Body>
+      <Modal.Footer justify={Justify.Center}>
+        <Button onClick={onGrant} variant={ButtonVariant.Primary}>
+          {ctaLabel}
+        </Button>
+      </Modal.Footer>
+    </>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/modals/ShortcutEditModal.tsx b/packages/shared/src/features/shortcuts/components/modals/ShortcutEditModal.tsx
new file mode 100644
index 00000000000..93d8f79c042
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/modals/ShortcutEditModal.tsx
@@ -0,0 +1,444 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import ControlledTextField from '../../../../components/fields/ControlledTextField';
+import type { ModalProps } from '../../../../components/modals/common/Modal';
+import { Modal } from '../../../../components/modals/common/Modal';
+import { Justify } from '../../../../components/utilities';
+import { useShortcutsManager } from '../../hooks/useShortcutsManager';
+import type { Shortcut } from '../../types';
+import { isValidHttpUrl, withHttps } from '../../../../lib/links';
+import { CameraIcon, EarthIcon } from '../../../../components/icons';
+import {
+  imageSizeLimitMB,
+  uploadContentImage,
+} from '../../../../graphql/posts';
+import { useFileInput } from '../../../../hooks/utils/useFileInput';
+import { useToastNotification } from '../../../../hooks/useToastNotification';
+import { useLazyModal } from '../../../../hooks/useLazyModal';
+import { apiUrl } from '../../../../lib/config';
+import { invokeOnRequestClose } from './closeModal';
+
+const schema = z.object({
+  name: z
+    .string()
+    .max(40, 'Name must be 40 characters or less')
+    .optional()
+    .or(z.literal('')),
+  url: z
+    .string()
+    .min(1, 'URL is required')
+    .refine(
+      (value) => isValidHttpUrl(withHttps(value)),
+      'Must be a valid HTTP/S URL',
+    ),
+  iconUrl: z
+    .string()
+    .optional()
+    .refine(
+      (value) =>
+        !value ||
+        value.startsWith('data:image/') ||
+        isValidHttpUrl(withHttps(value)),
+      'Must be a valid URL',
+    ),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+type ShortcutEditModalProps = ModalProps & {
+  mode: 'add' | 'edit';
+  shortcut?: Shortcut;
+  onSubmitted?: () => void;
+};
+
+export default function ShortcutEditModal({
+  mode,
+  shortcut,
+  onSubmitted,
+  ...props
+}: ShortcutEditModalProps): ReactElement {
+  const manager = useShortcutsManager();
+  const { displayToast } = useToastNotification();
+  const { closeModal } = useLazyModal();
+  const close = () => {
+    closeModal();
+    invokeOnRequestClose(props.onRequestClose);
+  };
+  const [isUploading, setIsUploading] = useState(false);
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const methods = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: shortcut?.name ?? '',
+      url: shortcut?.url ?? '',
+      iconUrl: shortcut?.iconUrl ?? '',
+    },
+    mode: 'onBlur',
+  });
+
+  const {
+    handleSubmit,
+    watch,
+    setError,
+    clearErrors,
+    setValue,
+    formState: { isSubmitting },
+  } = methods;
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [faviconFailed, setFaviconFailed] = useState(false);
+  const [customIconFailed, setCustomIconFailed] = useState(false);
+  // Drop-on-avatar: users who have a favicon.ico / logo sitting on disk
+  // should be able to fling it onto the icon picker without clicking
+  // through a file dialog. Mirrors the AddShortcutTile drop affordance.
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  // Debounced copy of the URL used solely for the live favicon preview.
+  // Typing 15 characters shouldn't fire 15 requests to the icon proxy —
+  // 250ms idle matches the "I stopped typing" feel of most address bars.
+  const [debouncedUrl, setDebouncedUrl] = useState<string>(shortcut?.url ?? '');
+
+  const handleIconBase64 = async (base64: string, file: File) => {
+    clearErrors('iconUrl');
+    // Show the base64 preview immediately while the upload finishes.
+    setValue('iconUrl', base64, { shouldDirty: true });
+    setIsUploading(true);
+    try {
+      const uploadedUrl = await uploadContentImage(file);
+      setValue('iconUrl', uploadedUrl, { shouldDirty: true });
+    } catch (error) {
+      const message = (error as Error)?.message ?? 'Failed to upload the image';
+      setError('iconUrl', { message });
+      displayToast(message);
+      setValue('iconUrl', shortcut?.iconUrl ?? '', { shouldDirty: true });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const { onFileChange } = useFileInput({
+    limitMb: imageSizeLimitMB,
+    onChange: handleIconBase64,
+  });
+
+  const values = watch();
+
+  // Reset the favicon-failed flag whenever the user edits the URL, so typing
+  // past a transiently-broken state recovers and shows the new favicon.
+  useEffect(() => {
+    setFaviconFailed(false);
+    const handle = setTimeout(() => {
+      setDebouncedUrl(values.url ?? '');
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [values.url]);
+
+  // Same deal for the custom icon: if the user pastes a new URL, give it a
+  // fresh chance to load instead of keeping the broken-image state.
+  useEffect(() => {
+    setCustomIconFailed(false);
+  }, [values.iconUrl]);
+
+  // Decide what to render inside the icon avatar:
+  // 1. A valid custom icon (uploaded, base64 preview, or pasted URL that
+  //    actually loads). If the user pasted a broken URL we fall through to
+  //    the favicon instead of showing a broken-image glyph.
+  // 2. Otherwise the site's favicon, derived from the URL as the user types.
+  // 3. If neither is available, fall back to a neutral Earth glyph so the
+  //    control still looks like "a picker", not an empty circle.
+  const hasCustomIcon = !!values.iconUrl && !customIconFailed;
+  const urlCandidate = debouncedUrl ? withHttps(debouncedUrl) : '';
+  const canShowFavicon =
+    !hasCustomIcon && !faviconFailed && isValidHttpUrl(urlCandidate);
+  const faviconSrc = canShowFavicon
+    ? `${apiUrl}/icon?url=${encodeURIComponent(urlCandidate)}&size=96`
+    : null;
+
+  const openFilePicker = () => fileInputRef.current?.click();
+  const clearCustomIcon = () => {
+    clearErrors('iconUrl');
+    setValue('iconUrl', '', { shouldDirty: true });
+  };
+
+  // File drop onto the avatar: we only accept a single image file. Multiple
+  // files or non-images are silently ignored — the user barely interacted,
+  // we shouldn't punish them with a modal error. The visual ring handles
+  // the feedback loop (green-ish while hovering a valid file, cleared on
+  // leave/drop).
+  const handleAvatarDragEnter = (event: React.DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer.types.includes('Files')) {
+      setIsDropTarget(true);
+    }
+  };
+  const handleAvatarDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    // Assigning to `dropEffect` is the standard HTML5 DnD pattern — the
+    // drop cursor is only configurable through the event's dataTransfer.
+    // eslint-disable-next-line no-param-reassign
+    event.dataTransfer.dropEffect = 'copy';
+  };
+  const handleAvatarDragLeave = () => setIsDropTarget(false);
+  const handleAvatarDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDropTarget(false);
+    const file = Array.from(event.dataTransfer.files || []).find((candidate) =>
+      candidate.type.startsWith('image/'),
+    );
+    if (!file) {
+      return;
+    }
+    onFileChange(file);
+  };
+
+  // Live character counter for the name field. Swaps from muted to warning
+  // tone as we close in on the 40-char cap, so users feel the limit before
+  // they hit it.
+  const nameValue = values.name ?? '';
+  const nameLen = nameValue.length;
+  const nameNearCap = nameLen >= 32;
+  const nameHint = nameLen
+    ? `${nameLen} / 40 characters`
+    : 'Up to 40 characters';
+
+  const onSubmit = handleSubmit(async (data) => {
+    const payload = {
+      url: data.url,
+      name: data.name || undefined,
+      iconUrl: data.iconUrl || undefined,
+    };
+
+    try {
+      const result =
+        mode === 'add'
+          ? await manager.addShortcut(payload)
+          : await manager.updateShortcut(shortcut!.url, payload);
+
+      if (result.error) {
+        setError('url', { message: result.error });
+        return;
+      }
+    } catch {
+      // The write is optimistic — local state already reflects the change.
+      // If the remote mutation rejects, SettingsContext rolls it back and will
+      // toast its own error. We still close here so the user isn't trapped.
+    }
+
+    onSubmitted?.();
+    close();
+  });
+
+  return (
+    <Modal kind={Modal.Kind.FlexibleCenter} size={Modal.Size.Small} {...props}>
+      {/* Title uses the same Body+bold rhythm as the Manage modal so the two
+          surfaces feel like siblings, not different products. */}
+      <Modal.Header showCloseButton>
+        <Typography tag={TypographyTag.H3} type={TypographyType.Body} bold>
+          {mode === 'add' ? 'Add shortcut' : 'Edit shortcut'}
+        </Typography>
+      </Modal.Header>
+      <Modal.Body>
+        <FormProvider {...methods}>
+          <form id="shortcut-edit-form" onSubmit={onSubmit}>
+            {/* Icon-first: a single tappable avatar at the top. The favicon
+                derived from the URL fills it by default; uploading (or
+                dropping an image onto the avatar) swaps it out. */}
+            <div className="mb-5 flex flex-col items-center gap-2">
+              <button
+                type="button"
+                onClick={openFilePicker}
+                onDragEnter={handleAvatarDragEnter}
+                onDragOver={handleAvatarDragOver}
+                onDragLeave={handleAvatarDragLeave}
+                onDrop={handleAvatarDrop}
+                aria-label={
+                  hasCustomIcon
+                    ? 'Replace shortcut icon'
+                    : 'Upload shortcut icon'
+                }
+                className={classNames(
+                  'group relative flex size-16 items-center justify-center overflow-hidden rounded-16 border bg-surface-float transition-all duration-150 hover:-translate-y-px hover:bg-surface-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2 focus-visible:ring-offset-background-default motion-reduce:transition-none motion-reduce:hover:transform-none',
+                  isDropTarget
+                    ? 'ring-accent-cabbage-default/30 border-accent-cabbage-default bg-overlay-float-cabbage ring-2'
+                    : 'border-border-subtlest-tertiary hover:border-border-subtlest-secondary',
+                  isUploading && 'opacity-60',
+                )}
+              >
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {hasCustomIcon ? (
+                  <img
+                    src={values.iconUrl}
+                    alt=""
+                    onError={() => setCustomIconFailed(true)}
+                    className="size-full object-cover"
+                  />
+                ) : faviconSrc ? (
+                  <img
+                    src={faviconSrc}
+                    alt=""
+                    onError={() => setFaviconFailed(true)}
+                    className="size-8 rounded-6"
+                  />
+                ) : (
+                  <EarthIcon secondary className="size-6 text-text-tertiary" />
+                )}
+                {/* Upload ring: a spinning cabbage arc that feels like real
+                    progress rather than just "something dimmed". Covers the
+                    icon while the asset is being posted to the server. */}
+                {isUploading && (
+                  <span
+                    aria-hidden
+                    className="absolute inset-0 flex items-center justify-center bg-overlay-primary-pepper"
+                  >
+                    <span className="size-8 animate-spin rounded-full border-[3px] border-border-subtlest-tertiary border-t-accent-cabbage-default motion-reduce:animate-none" />
+                  </span>
+                )}
+                {!isUploading && (
+                  <span
+                    aria-hidden
+                    className="absolute inset-0 flex items-center justify-center bg-overlay-primary-pepper text-text-primary opacity-0 transition-opacity duration-150 group-hover:opacity-100 motion-reduce:transition-none"
+                  >
+                    <CameraIcon secondary />
+                  </span>
+                )}
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="sr-only"
+                onChange={(event) => {
+                  onFileChange(event.target.files?.[0] ?? null);
+                  // Reset the input so picking the same file again still
+                  // fires a change event.
+                  // eslint-disable-next-line no-param-reassign
+                  event.target.value = '';
+                }}
+              />
+              {/* All icon-related affordances live with the avatar:
+                  upload status, remove, and the "paste URL" escape hatch.
+                  Keeping them together means a user scanning the form
+                  doesn't have to hunt around for icon controls. */}
+              <div
+                aria-live="polite"
+                className="flex min-h-[18px] flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-center text-text-tertiary typo-caption1"
+              >
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {isUploading ? (
+                  <span className="inline-flex items-center gap-2 text-accent-cabbage-default">
+                    <span className="size-1.5 animate-pulse rounded-full bg-accent-cabbage-default" />
+                    Uploading…
+                  </span>
+                ) : isDropTarget ? (
+                  <span className="text-accent-cabbage-default">
+                    Drop to use this image
+                  </span>
+                ) : (
+                  <>
+                    {/* eslint-disable-next-line no-nested-ternary */}
+                    {hasCustomIcon ? (
+                      <button
+                        type="button"
+                        onClick={clearCustomIcon}
+                        className="underline-offset-2 hover:text-text-primary hover:underline"
+                      >
+                        Remove custom icon
+                      </button>
+                    ) : customIconFailed ? (
+                      <span className="text-status-error">
+                        Couldn&apos;t load that image. Showing favicon instead.
+                      </span>
+                    ) : (
+                      <span>
+                        {faviconSrc
+                          ? 'Tap or drop to upload'
+                          : 'Tap or drop an image to upload'}
+                      </span>
+                    )}
+                    <span aria-hidden className="text-text-quaternary">
+                      ·
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => setShowUrlInput((prev) => !prev)}
+                      className="underline-offset-2 hover:text-text-primary hover:underline"
+                    >
+                      {showUrlInput ? 'Hide icon URL' : 'Paste image URL'}
+                    </button>
+                  </>
+                )}
+              </div>
+              {showUrlInput && (
+                <div className="mt-2 w-full">
+                  <ControlledTextField
+                    name="iconUrl"
+                    label="Icon URL"
+                    placeholder="https://example.com/icon.png"
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-3">
+              <div className="flex flex-col gap-1">
+                <ControlledTextField
+                  name="name"
+                  label="Name (optional)"
+                  placeholder="My shortcut"
+                />
+                <div
+                  className={classNames(
+                    'flex justify-end px-1 text-right tabular-nums transition-colors duration-150 typo-caption1 motion-reduce:transition-none',
+                    nameNearCap
+                      ? 'text-accent-cabbage-default'
+                      : 'text-text-tertiary',
+                  )}
+                  aria-live="polite"
+                >
+                  {nameHint}
+                </div>
+              </div>
+              <ControlledTextField
+                name="url"
+                label="URL"
+                placeholder="https://example.com"
+              />
+            </div>
+          </form>
+        </FormProvider>
+      </Modal.Body>
+      <Modal.Footer justify={Justify.End}>
+        <Button
+          type="button"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          onClick={close}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          form="shortcut-edit-form"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Small}
+          disabled={isSubmitting || isUploading}
+        >
+          {mode === 'add' ? 'Add' : 'Save'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/modals/ShortcutsManageModal.tsx b/packages/shared/src/features/shortcuts/components/modals/ShortcutsManageModal.tsx
new file mode 100644
index 00000000000..40a81179c2b
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/modals/ShortcutsManageModal.tsx
@@ -0,0 +1,964 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import type { ModalProps } from '../../../../components/modals/common/Modal';
+import { Modal } from '../../../../components/modals/common/Modal';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { Switch } from '../../../../components/fields/Switch';
+import {
+  BookmarkIcon,
+  DragIcon,
+  EarthIcon,
+  EditIcon,
+  LinkIcon,
+  PlusIcon,
+  RefreshIcon,
+  StarIcon,
+  TrashIcon,
+  VIcon,
+} from '../../../../components/icons';
+import { ChromeIcon } from '../../../../components/icons/Browser/Chrome';
+import { useSettingsContext } from '../../../../contexts/SettingsContext';
+import { useLogContext } from '../../../../contexts/LogContext';
+import { LogEvent, TargetType } from '../../../../lib/log';
+import { useShortcutsManager } from '../../hooks/useShortcutsManager';
+import { useHiddenTopSites } from '../../hooks/useHiddenTopSites';
+import { useShortcuts } from '../../contexts/ShortcutsProvider';
+import { useLazyModal } from '../../../../hooks/useLazyModal';
+import { LazyModal } from '../../../../components/modals/common/types';
+import { apiUrl } from '../../../../lib/config';
+import { getDomainFromUrl } from '../../../../lib/links';
+import { DEFAULT_SHORTCUTS_APPEARANCE, MAX_SHORTCUTS } from '../../types';
+import type { Shortcut, ShortcutsAppearance } from '../../types';
+import { invokeOnRequestClose } from './closeModal';
+
+// Flattened state-machine for the Browser access row's primary action. The
+// button can either trigger the picker (granted) or ask for permission (not
+// granted); extracted from JSX so we don't nest ternaries inline.
+function getTopSitesPrimaryAction({
+  topSitesGranted,
+  setShowImportSource,
+  askTopSitesPermission,
+}: {
+  topSitesGranted: boolean;
+  setShowImportSource?: (
+    source: 'topSites' | 'bookmarks',
+    returnTo?: LazyModal.ShortcutsManage,
+  ) => void;
+  askTopSitesPermission?: () => Promise<boolean> | void;
+}): (() => void) | undefined {
+  if (topSitesGranted) {
+    if (!setShowImportSource) {
+      return undefined;
+    }
+    return () => setShowImportSource('topSites', LazyModal.ShortcutsManage);
+  }
+  if (!askTopSitesPermission) {
+    return undefined;
+  }
+  return () => {
+    askTopSitesPermission();
+  };
+}
+
+// Same flattening as `getTopSitesPrimaryAction`, but for the Bookmarks row.
+function getBookmarksPrimaryAction({
+  bookmarksGranted,
+  onImportBookmarks,
+  onAskBookmarks,
+}: {
+  bookmarksGranted: boolean;
+  onImportBookmarks?: () => void;
+  onAskBookmarks?: () => Promise<boolean> | void;
+}): (() => void) | undefined {
+  if (bookmarksGranted) {
+    return onImportBookmarks;
+  }
+  if (!onAskBookmarks) {
+    return undefined;
+  }
+  return () => {
+    onAskBookmarks();
+  };
+}
+
+// Plain-text section header. Bold subhead + muted caption, no decorative
+// icon chip. Keeps each group clearly delimited vertically without the
+// visual weight of a leading glyph — settings rhythm closer to Linear /
+// GitHub preferences than Raycast.
+function SectionHeader({
+  title,
+  description,
+  trailing,
+}: {
+  title: string;
+  description?: string;
+  trailing?: ReactElement;
+}): ReactElement {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="min-w-0 flex-1">
+        <Typography bold type={TypographyType.Subhead}>
+          {title}
+        </Typography>
+        {description && (
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            {description}
+          </Typography>
+        )}
+      </div>
+      {trailing}
+    </div>
+  );
+}
+
+// Compact capacity pill used next to "Your shortcuts". The tone warms up as
+// the library fills so the limit feels present without ever shouting — grey
+// through most of the range, cabbage accent when there are two or fewer
+// slots left, rose when the cap is hit. Tabular nums keep the width steady
+// as the count ticks up.
+function CapacityPill({
+  used,
+  max,
+}: {
+  used: number;
+  max: number;
+}): ReactElement {
+  const remaining = max - used;
+  let tone = 'bg-surface-float text-text-tertiary';
+  if (used >= max) {
+    tone = 'bg-overlay-float-ketchup text-accent-ketchup-default';
+  } else if (remaining <= 2) {
+    tone = 'bg-overlay-float-cabbage text-accent-cabbage-default';
+  }
+  return (
+    <span
+      className={classNames(
+        'rounded-6 px-1.5 py-0.5 font-bold tabular-nums typo-caption1',
+        tone,
+      )}
+    >
+      {used}/{max}
+    </span>
+  );
+}
+
+// Clean radio row. Selected state is carried entirely by the filled cabbage
+// dot + bold title — no background fill, so it never reads like a hover.
+// Hover is the only place we tint the surface, which keeps the difference
+// between "you're pointing at this" and "this is selected" obvious. An
+// optional `trailingBadge` sits on the right (kept out of the radio/text
+// column) so we can flag a row with a brand mark — e.g. the Chrome glyph
+// on the auto-mode row — without knocking the radio bullet and copy out
+// of alignment.
+function ShortcutsModeOption({
+  id,
+  checked,
+  onSelect,
+  title,
+  description,
+  trailingBadge,
+}: {
+  id: string;
+  checked: boolean;
+  onSelect: () => void;
+  title: string;
+  description: string;
+  trailingBadge?: ReactElement;
+}): ReactElement {
+  return (
+    <label
+      htmlFor={id}
+      className="group flex cursor-pointer items-start gap-3 rounded-10 p-2 transition-colors duration-150 hover:bg-surface-float motion-reduce:transition-none"
+    >
+      <input
+        id={id}
+        type="radio"
+        name="shortcuts-mode"
+        checked={checked}
+        onChange={onSelect}
+        className="peer sr-only"
+      />
+      <span
+        aria-hidden
+        className={classNames(
+          'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-150 motion-reduce:transition-none',
+          checked
+            ? 'border-accent-cabbage-default'
+            : 'border-border-subtlest-secondary group-hover:border-border-subtlest-primary',
+        )}
+      >
+        {checked && (
+          <span className="size-2 rounded-full bg-accent-cabbage-default" />
+        )}
+      </span>
+      <div className="min-w-0 flex-1">
+        <p
+          className={classNames(
+            'typo-callout',
+            checked ? 'font-bold text-text-primary' : 'text-text-primary',
+          )}
+        >
+          {title}
+        </p>
+        <p className="mt-0.5 text-text-tertiary typo-caption1">{description}</p>
+      </div>
+      {trailingBadge && (
+        <span
+          aria-hidden
+          className="mt-0.5 flex size-5 shrink-0 items-center justify-center"
+        >
+          {trailingBadge}
+        </span>
+      )}
+    </label>
+  );
+}
+
+function ShortcutRow({
+  shortcut,
+  onEdit,
+  onRemove,
+}: {
+  shortcut: Shortcut;
+  onEdit: (shortcut: Shortcut) => void;
+  onRemove: (shortcut: Shortcut) => void;
+}): ReactElement {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: shortcut.url });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const label = shortcut.name || getDomainFromUrl(shortcut.url);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={classNames(
+        // Rows are quiet by default; hover darkens the surface only.
+        // Drag state tilts slightly with a real shadow so the user feels
+        // the row "lift" without the busy scale-up jump.
+        'group relative flex items-center gap-3 rounded-10 p-2 transition-colors duration-150 hover:bg-surface-float motion-reduce:transition-none',
+        isDragging &&
+          'z-10 rotate-[-1deg] bg-surface-float shadow-2 motion-reduce:rotate-0',
+      )}
+    >
+      <button
+        type="button"
+        aria-label={`Drag to reorder ${label}`}
+        className="flex size-6 shrink-0 cursor-grab items-center justify-center rounded-6 text-text-quaternary transition-colors duration-150 hover:text-text-primary focus-visible:text-text-primary active:cursor-grabbing motion-reduce:transition-none"
+        {...attributes}
+        {...listeners}
+      >
+        <DragIcon />
+      </button>
+      <img
+        src={`${apiUrl}/icon?url=${encodeURIComponent(shortcut.url)}&size=32`}
+        alt=""
+        className="size-8 shrink-0 rounded-8 bg-surface-float"
+      />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-text-primary typo-callout">{label}</p>
+        <p className="truncate text-text-tertiary typo-caption1">
+          {shortcut.url}
+        </p>
+      </div>
+      {/* Actions fade in on row hover/focus. On touch devices (no hover),
+          we reveal them at 60% opacity so they're always reachable without
+          overwhelming the row. */}
+      <div className="[@media(hover:none)]:opacity-60 flex items-center gap-0.5 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none [@media(hover:none)]:focus-within:opacity-100">
+        <Button
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          size={ButtonSize.Small}
+          icon={<EditIcon />}
+          aria-label={`Edit ${label}`}
+          onClick={() => onEdit(shortcut)}
+        />
+        <Button
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          size={ButtonSize.Small}
+          icon={<TrashIcon />}
+          aria-label={`Remove ${label}`}
+          onClick={() => onRemove(shortcut)}
+          className="hover:!bg-overlay-float-ketchup hover:!text-accent-ketchup-default"
+        />
+      </div>
+    </div>
+  );
+}
+
+// Appearance picker: three preset cards with tiny live previews so users
+// see what they're picking. Pattern borrowed from Raindrop.io's layout
+// switcher and Notion's view picker.
+function AppearancePicker({
+  value,
+  onChange,
+}: {
+  value: ShortcutsAppearance;
+  onChange: (next: ShortcutsAppearance) => void;
+}): ReactElement {
+  const options: Array<{
+    id: ShortcutsAppearance;
+    title: string;
+    preview: ReactElement;
+  }> = [
+    {
+      id: 'tile',
+      title: 'Tile',
+      preview: (
+        <div className="flex items-start gap-1.5" aria-hidden>
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex flex-col items-center gap-1">
+              <div className="size-5 rounded-6 bg-border-subtlest-secondary" />
+              <div className="rounded-1 h-1 w-4 bg-border-subtlest-tertiary" />
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: 'icon',
+      title: 'Icon',
+      preview: (
+        <div className="flex items-center gap-1" aria-hidden>
+          {[0, 1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="size-5 rounded-6 bg-border-subtlest-secondary"
+            />
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: 'chip',
+      title: 'Chip',
+      preview: (
+        <div className="flex flex-col gap-1" aria-hidden>
+          {[0, 1].map((i) => (
+            <div
+              key={i}
+              className="flex h-3 w-14 items-center gap-1 rounded-4 bg-border-subtlest-tertiary px-1"
+            >
+              <div className="size-1.5 shrink-0 rounded-2 bg-border-subtlest-secondary" />
+              <div className="rounded-1 h-0.5 flex-1 bg-border-subtlest-secondary" />
+            </div>
+          ))}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <fieldset className="flex flex-col gap-2">
+      <legend className="contents">
+        <SectionHeader
+          title="Appearance"
+          description="How the row renders on the new-tab page."
+        />
+      </legend>
+      <div
+        className="grid grid-cols-3 gap-2"
+        role="radiogroup"
+        aria-label="Shortcut appearance"
+      >
+        {options.map((opt) => {
+          const checked = value === opt.id;
+          return (
+            <button
+              key={opt.id}
+              type="button"
+              role="radio"
+              aria-checked={checked}
+              onClick={() => onChange(opt.id)}
+              className={classNames(
+                // Card rests on a 1px border. Selected adds an accent border
+                // + corner badge + a soft cabbage-tinted background to the
+                // preview shelf, so the choice feels lit up, not merely
+                // outlined. Focus ring stays on the whole card for keyboards.
+                'group relative flex flex-col items-center gap-1.5 rounded-12 border p-2 text-left outline-none transition-all duration-150 focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2 focus-visible:ring-offset-background-default motion-reduce:transition-none',
+                checked
+                  ? 'border-accent-cabbage-default bg-overlay-float-cabbage/40'
+                  : 'border-border-subtlest-tertiary hover:-translate-y-px hover:border-border-subtlest-secondary hover:bg-surface-float',
+              )}
+            >
+              {checked && (
+                <span
+                  aria-hidden
+                  className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-accent-cabbage-default text-surface-invert shadow-2"
+                >
+                  <VIcon className="size-2.5" />
+                </span>
+              )}
+              <div
+                className={classNames(
+                  'flex h-10 w-full items-center justify-center rounded-8 transition-colors duration-150 motion-reduce:transition-none',
+                  checked ? 'bg-background-default' : 'bg-background-subtle',
+                )}
+              >
+                {opt.preview}
+              </div>
+              <span
+                className={classNames(
+                  'transition-colors duration-150 typo-caption1 motion-reduce:transition-none',
+                  checked
+                    ? 'font-bold text-text-primary'
+                    : 'text-text-tertiary group-hover:text-text-primary',
+                )}
+              >
+                {opt.title}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}
+
+export default function ShortcutsManageModal(props: ModalProps): ReactElement {
+  const { logEvent } = useLogContext();
+  const { showTopSites, toggleShowTopSites, flags, updateFlag } =
+    useSettingsContext();
+  const manager = useShortcutsManager();
+  const {
+    setShowImportSource,
+    topSites,
+    hasCheckedPermission: hasCheckedTopSitesPermission,
+    askTopSitesPermission,
+    onRevokePermission,
+    bookmarks,
+    hasCheckedBookmarksPermission,
+    askBookmarksPermission,
+    revokeBookmarksPermission,
+  } = useShortcuts();
+  const { hidden: hiddenTopSites, restore: restoreHiddenTopSites } =
+    useHiddenTopSites();
+  const { openModal, closeModal } = useLazyModal();
+  const close = () => {
+    closeModal();
+    invokeOnRequestClose(props?.onRequestClose);
+  };
+
+  const mode = flags?.shortcutsMode ?? 'manual';
+  const selectMode = async (next: 'manual' | 'auto') => {
+    if (next === mode) {
+      return;
+    }
+    await updateFlag('shortcutsMode', next);
+    logEvent({
+      event_name: LogEvent.ChangeShortcutsMode,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({ mode: next }),
+    });
+    if (next === 'auto' && topSites === undefined) {
+      await askTopSitesPermission();
+    }
+  };
+
+  const appearance: ShortcutsAppearance =
+    flags?.shortcutsAppearance ?? DEFAULT_SHORTCUTS_APPEARANCE;
+  const selectAppearance = (next: ShortcutsAppearance) => {
+    if (next === appearance) {
+      return;
+    }
+    updateFlag('shortcutsAppearance', next);
+    logEvent({
+      event_name: LogEvent.ChangeShortcutsAppearance,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({ appearance: next }),
+    });
+  };
+
+  // Sync flag: when on, the same shortcuts render on daily.dev's web app
+  // (not just the new-tab extension). Lives here in the manage modal — with
+  // a clear description — instead of as a one-line toggle in the dropdown
+  // where the "what does this do" wasn't obvious.
+  const showOnWebapp = flags?.showShortcutsOnWebapp ?? false;
+  const toggleShowOnWebapp = () => {
+    const next = !showOnWebapp;
+    updateFlag('showShortcutsOnWebapp', next);
+    logEvent({
+      event_name: LogEvent.ToggleShortcutsOnWebapp,
+      target_type: TargetType.Shortcuts,
+      extra: JSON.stringify({ enabled: next }),
+    });
+  };
+
+  const topSitesCount = topSites?.length ?? 0;
+  const bookmarksCount = bookmarks?.length ?? 0;
+  const topSitesGranted = topSites !== undefined;
+  const topSitesKnown = hasCheckedTopSitesPermission && topSitesGranted;
+  const bookmarksKnown =
+    hasCheckedBookmarksPermission && bookmarks !== undefined;
+
+  const logRef = useRef<typeof logEvent>();
+  logRef.current = logEvent;
+
+  useEffect(() => {
+    logRef.current?.({
+      event_name: LogEvent.OpenShortcutConfig,
+      target_type: TargetType.Shortcuts,
+    });
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 250, tolerance: 5 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const urls = manager.shortcuts.map((s) => s.url);
+    const oldIndex = urls.indexOf(active.id as string);
+    const newIndex = urls.indexOf(over.id as string);
+    manager.reorder(arrayMove(urls, oldIndex, newIndex));
+  };
+
+  const onEdit = (shortcut: Shortcut) => {
+    openModal({
+      type: LazyModal.ShortcutEdit,
+      props: { mode: 'edit', shortcut },
+    });
+  };
+
+  const onRemove = (shortcut: Shortcut) => manager.removeShortcut(shortcut.url);
+
+  const onAdd = () =>
+    openModal({ type: LazyModal.ShortcutEdit, props: { mode: 'add' } });
+
+  return (
+    <Modal kind={Modal.Kind.FlexibleCenter} size={Modal.Size.Medium} {...props}>
+      {/* Header: title only on the left, primary Done on the right. The
+          count badge moved out of the header — it lives next to the
+          "Your shortcuts" subhead where it's contextual instead of
+          floating above unrelated sections. */}
+      <Modal.Header showCloseButton={false}>
+        <Typography tag={TypographyTag.H3} type={TypographyType.Body} bold>
+          Shortcuts
+        </Typography>
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Small}
+          className="-mr-2 ml-auto tablet:-mr-4"
+          onClick={close}
+        >
+          Done
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        {/* Sections stack vertically with hairline dividers. Flow goes:
+            visibility (master switch) → look → source (with inline auto
+            controls when auto is picked) → your list (manual) →
+            connections (bookmarks + cross-device sync). */}
+        <div className="flex flex-col divide-y divide-border-subtlest-tertiary [&>*:not(:first-child)]:pt-5 [&>*:not(:last-child)]:pb-5">
+          <SectionHeader
+            title="Show shortcuts"
+            description="Toggle the row visibility on the new-tab page."
+            trailing={
+              <Switch
+                inputId="showTopSites-switch"
+                name="showTopSites"
+                compact={false}
+                checked={showTopSites}
+                onToggle={toggleShowTopSites}
+                aria-label="Show shortcuts"
+              />
+            }
+          />
+
+          {showTopSites && (
+            <div className="flex flex-col gap-4">
+              <AppearancePicker
+                value={appearance}
+                onChange={selectAppearance}
+              />
+            </div>
+          )}
+
+          {showTopSites && (
+            <fieldset className="flex flex-col gap-2">
+              <legend className="contents">
+                <SectionHeader
+                  title="Source"
+                  description="Choose where this row gets its shortcuts from."
+                />
+              </legend>
+              <div className="flex flex-col gap-1">
+                <ShortcutsModeOption
+                  id="shortcuts-mode-manual"
+                  checked={mode === 'manual'}
+                  onSelect={() => selectMode('manual')}
+                  title="My shortcuts"
+                  description="Curated by you. Add, edit, and reorder."
+                />
+                <ShortcutsModeOption
+                  id="shortcuts-mode-auto"
+                  checked={mode === 'auto'}
+                  onSelect={() => selectMode('auto')}
+                  title="Most visited sites"
+                  description="Pulled automatically from your browser history."
+                  trailingBadge={<ChromeIcon className="size-5" />}
+                />
+              </div>
+            </fieldset>
+          )}
+
+          {/* Auto-mode connections. Mirrors the manual-mode Connections
+              section 1:1 — same SectionHeader treatment, same bare <ul>
+              of ConnectionRows — so the divider, title, and row padding
+              all line up regardless of which source the user picks. */}
+          {showTopSites && mode === 'auto' && (
+            <section aria-label="Connections" className="flex flex-col gap-2">
+              <SectionHeader
+                title="Connections"
+                description="Pull your most visited sites from your browser."
+              />
+              <ul className="flex flex-col gap-0.5">
+                <ConnectionRow
+                  icon={<LinkIcon />}
+                  label="Browser access"
+                  description={
+                    topSitesKnown
+                      ? `${topSitesCount} sites available from your browser.`
+                      : 'Grant access so we can read your most visited sites.'
+                  }
+                  primaryLabel={topSitesGranted ? 'Import' : 'Connect'}
+                  onPrimary={getTopSitesPrimaryAction({
+                    topSitesGranted,
+                    setShowImportSource,
+                    askTopSitesPermission,
+                  })}
+                  secondaryLabel={topSitesGranted ? 'Disconnect' : undefined}
+                  onSecondary={
+                    topSitesGranted ? () => onRevokePermission?.() : undefined
+                  }
+                />
+                {hiddenTopSites.length > 0 && (
+                  <ConnectionRow
+                    icon={<RefreshIcon />}
+                    label={`Hidden sites (${hiddenTopSites.length})`}
+                    description="Restore sites you removed from your Most visited row."
+                    primaryLabel="Restore all"
+                    onPrimary={() => restoreHiddenTopSites()}
+                  />
+                )}
+              </ul>
+            </section>
+          )}
+
+          {mode === 'manual' && (
+            <section className="flex flex-col gap-2">
+              <SectionHeader
+                title="Your shortcuts"
+                description="Drag to reorder. Hover a row to edit or remove."
+                trailing={
+                  <CapacityPill
+                    used={manager.shortcuts.length}
+                    max={MAX_SHORTCUTS}
+                  />
+                }
+              />
+              {manager.shortcuts.length === 0 ? (
+                <div className="bg-surface-float/40 flex flex-col items-center gap-3 rounded-14 border border-dashed border-border-subtlest-tertiary px-4 py-8 text-center">
+                  <span
+                    aria-hidden
+                    className="flex size-12 items-center justify-center rounded-14 bg-overlay-float-cabbage text-accent-cabbage-default"
+                  >
+                    <StarIcon secondary className="size-6" />
+                  </span>
+                  <Typography
+                    type={TypographyType.Callout}
+                    color={TypographyColor.Primary}
+                    bold
+                  >
+                    Your shortcuts, your rules
+                  </Typography>
+                  <Typography
+                    type={TypographyType.Caption1}
+                    color={TypographyColor.Tertiary}
+                  >
+                    Add one manually or import from Connections below.
+                  </Typography>
+                  <Button
+                    type="button"
+                    variant={ButtonVariant.Primary}
+                    size={ButtonSize.Small}
+                    icon={<PlusIcon />}
+                    onClick={onAdd}
+                    className="mt-1"
+                  >
+                    Add shortcut
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex flex-col gap-0.5">
+                  {/* Inline "Add" affordance sitting above the list. At
+                      the cap we keep it visible but disabled with a tiny
+                      "Library full" hint so users know why they can't add. */}
+                  <button
+                    type="button"
+                    onClick={onAdd}
+                    disabled={!manager.canAdd}
+                    className="disabled:opacity-60 group flex items-center gap-3 rounded-10 p-2 text-left transition-colors duration-150 hover:bg-surface-float disabled:cursor-not-allowed disabled:hover:bg-transparent motion-reduce:transition-none"
+                    aria-label="Add a shortcut"
+                  >
+                    <span className="flex size-8 shrink-0 items-center justify-center rounded-8 border border-dashed border-border-subtlest-tertiary text-text-tertiary transition-all duration-150 group-hover:border-solid group-hover:border-accent-cabbage-default group-hover:bg-overlay-float-cabbage group-hover:text-accent-cabbage-default motion-reduce:transition-none">
+                      <PlusIcon />
+                    </span>
+                    <p className="truncate text-text-primary typo-callout">
+                      Add a shortcut
+                    </p>
+                    {!manager.canAdd && (
+                      <span className="ml-auto text-text-tertiary typo-caption1">
+                        Library full
+                      </span>
+                    )}
+                  </button>
+                  <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                  >
+                    <SortableContext
+                      items={manager.shortcuts.map((s) => s.url)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      {manager.shortcuts.map((shortcut) => (
+                        <ShortcutRow
+                          key={shortcut.url}
+                          shortcut={shortcut}
+                          onEdit={onEdit}
+                          onRemove={onRemove}
+                        />
+                      ))}
+                    </SortableContext>
+                  </DndContext>
+                </div>
+              )}
+            </section>
+          )}
+
+          {/* Connections (bookmarks import + web-app sync) only apply when the
+              user curates their own list. In auto mode the row is fed by
+              browser history, so importing bookmarks or mirroring a manual
+              list across devices is meaningless — hide the whole section to
+              match how "Your shortcuts" disappears above. */}
+          {mode === 'manual' && (
+            <BrowserConnectionsSection
+              bookmarksGranted={bookmarks !== undefined}
+              bookmarksCount={bookmarksCount}
+              bookmarksKnown={bookmarksKnown}
+              showOnWebapp={showOnWebapp}
+              onToggleShowOnWebapp={toggleShowOnWebapp}
+              onImportBookmarks={
+                setShowImportSource
+                  ? () =>
+                      setShowImportSource(
+                        'bookmarks',
+                        LazyModal.ShortcutsManage,
+                      )
+                  : undefined
+              }
+              onAskBookmarks={askBookmarksPermission}
+              onRevokeBookmarks={revokeBookmarksPermission}
+            />
+          )}
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+interface BrowserConnectionsSectionProps {
+  bookmarksGranted: boolean;
+  bookmarksCount: number;
+  bookmarksKnown: boolean;
+  showOnWebapp: boolean;
+  onToggleShowOnWebapp: () => void;
+  onImportBookmarks?: () => void;
+  onAskBookmarks?: () => void | Promise<boolean>;
+  onRevokeBookmarks?: () => void | Promise<void>;
+}
+
+// "Connections" holds everything that's not specific to one source choice:
+// importing from bookmarks (available regardless of auto/manual) and the
+// cross-device web app sync. Top-sites permissions live under the Source
+// radio where they actually belong, so this section stays short and clear.
+function BrowserConnectionsSection({
+  bookmarksGranted,
+  bookmarksCount,
+  bookmarksKnown,
+  showOnWebapp,
+  onToggleShowOnWebapp,
+  onImportBookmarks,
+  onAskBookmarks,
+  onRevokeBookmarks,
+}: BrowserConnectionsSectionProps): ReactElement {
+  return (
+    <section aria-label="Connections" className="flex flex-col gap-2">
+      <SectionHeader
+        title="Connections"
+        description="Pull from your browser, or mirror your shortcuts on the daily.dev web app."
+      />
+      <ul className="flex flex-col gap-0.5">
+        <ConnectionRow
+          icon={<BookmarkIcon />}
+          label="Bookmarks bar"
+          description={
+            bookmarksKnown
+              ? `${bookmarksCount} available`
+              : 'Grant access to import your browser bookmarks.'
+          }
+          primaryLabel={bookmarksGranted ? 'Import' : 'Connect'}
+          onPrimary={getBookmarksPrimaryAction({
+            bookmarksGranted,
+            onImportBookmarks,
+            onAskBookmarks,
+          })}
+          secondaryLabel={bookmarksGranted ? 'Disconnect' : undefined}
+          onSecondary={
+            bookmarksGranted ? () => onRevokeBookmarks?.() : undefined
+          }
+        />
+        <ConnectionRow
+          icon={<EarthIcon />}
+          label="Show on daily.dev web app"
+          description="Mirror these shortcuts across every signed-in browser."
+          trailing={
+            <Switch
+              inputId="shortcuts-show-on-webapp"
+              name="shortcuts-show-on-webapp"
+              compact={false}
+              checked={showOnWebapp}
+              onToggle={onToggleShowOnWebapp}
+              aria-label="Show shortcuts on daily.dev web app"
+            />
+          }
+        />
+      </ul>
+    </section>
+  );
+}
+
+interface ConnectionRowProps {
+  icon: ReactElement;
+  label: string;
+  description: string;
+  primaryLabel?: string;
+  onPrimary?: () => void;
+  secondaryLabel?: string;
+  onSecondary?: () => void;
+  // Optional override for the trailing control. When provided, we skip the
+  // primary/secondary button pair and render this slot instead. Lets the
+  // sync row drop a Switch into the same footprint without a special-case
+  // component.
+  trailing?: ReactElement;
+}
+
+function ConnectionRow({
+  icon,
+  label,
+  description,
+  primaryLabel,
+  onPrimary,
+  secondaryLabel,
+  onSecondary,
+  trailing,
+}: ConnectionRowProps): ReactElement {
+  return (
+    <li className="flex items-center gap-3 rounded-10 p-2 transition-colors duration-150 hover:bg-surface-float motion-reduce:transition-none">
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-8 bg-surface-float text-text-tertiary">
+        {icon}
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-text-primary typo-callout">{label}</p>
+        <p className="truncate text-text-tertiary typo-caption1">
+          {description}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {trailing ?? (
+          <>
+            {secondaryLabel && (
+              <Button
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.XSmall}
+                onClick={onSecondary}
+              >
+                {secondaryLabel}
+              </Button>
+            )}
+            {primaryLabel && (
+              <Button
+                type="button"
+                variant={ButtonVariant.Float}
+                size={ButtonSize.XSmall}
+                disabled={!onPrimary}
+                onClick={onPrimary}
+              >
+                {primaryLabel}
+              </Button>
+            )}
+          </>
+        )}
+      </div>
+    </li>
+  );
+}
diff --git a/packages/shared/src/features/shortcuts/components/modals/closeModal.ts b/packages/shared/src/features/shortcuts/components/modals/closeModal.ts
new file mode 100644
index 00000000000..d7f5b2b348c
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/components/modals/closeModal.ts
@@ -0,0 +1,14 @@
+import type { ModalProps } from '../../../../components/modals/common/Modal';
+
+/**
+ * `react-modal` types `onRequestClose` as a function that *requires* a
+ * MouseEvent/KeyboardEvent, but callers programmatically closing the modal
+ * don't have one. The upstream prop doesn't actually read the event, so we
+ * cast past the type here in one place instead of sprinkling
+ * `undefined as never` across every shortcut modal.
+ */
+export const invokeOnRequestClose = (
+  onRequestClose?: ModalProps['onRequestClose'],
+): void => {
+  onRequestClose?.(undefined as never);
+};
diff --git a/packages/shared/src/features/shortcuts/contexts/ShortcutsProvider.tsx b/packages/shared/src/features/shortcuts/contexts/ShortcutsProvider.tsx
index 933dec44bfd..70c63b79fac 100644
--- a/packages/shared/src/features/shortcuts/contexts/ShortcutsProvider.tsx
+++ b/packages/shared/src/features/shortcuts/contexts/ShortcutsProvider.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { createContextProvider } from '@kickass-coderz/react';
 import { useTopSites } from '../hooks/useTopSites';
+import { useBrowserBookmarks } from '../hooks/useBrowserBookmarks';
 import { useLogContext } from '../../../contexts/LogContext';
 import { LogEvent, TargetType } from '../../../lib/log';
 import { useSettingsContext } from '../../../contexts/SettingsContext';
+import type { ImportSource } from '../types';
+import type { LazyModal } from '../../../components/modals/common/types';
 
 const [ShortcutsProvider, useShortcuts] = createContextProvider(
   () => {
@@ -12,6 +15,23 @@ const [ShortcutsProvider, useShortcuts] = createContextProvider(
 
     const [isManual, setIsManual] = useState(false);
     const [showPermissionsModal, setShowPermissionsModal] = useState(false);
+    const [showImportSource, setShowImportSourceRaw] =
+      useState<ImportSource | null>(null);
+    // When the picker was triggered from another modal (e.g. Manage), we
+    // remember it so the picker's Cancel button can hand control back there
+    // instead of fully dismissing the flow. Narrowed to ShortcutsManage
+    // because that's the only prop-less modal we reopen from here.
+    const [returnToAfterImport, setReturnToAfterImport] = useState<
+      LazyModal.ShortcutsManage | undefined
+    >(undefined);
+
+    const setShowImportSource = useCallback(
+      (source: ImportSource | null, returnTo?: LazyModal.ShortcutsManage) => {
+        setReturnToAfterImport(source ? returnTo : undefined);
+        setShowImportSourceRaw(source);
+      },
+      [],
+    );
 
     const {
       topSites,
@@ -20,6 +40,13 @@ const [ShortcutsProvider, useShortcuts] = createContextProvider(
       revokePermission,
     } = useTopSites();
 
+    const {
+      bookmarks,
+      hasCheckedPermission: hasCheckedBookmarksPermission,
+      askBookmarksPermission,
+      revokeBookmarksPermission,
+    } = useBrowserBookmarks();
+
     const onRevokePermission = async () => {
       await revokePermission();
 
@@ -52,6 +79,14 @@ const [ShortcutsProvider, useShortcuts] = createContextProvider(
       onRevokePermission,
       showPermissionsModal,
       setShowPermissionsModal,
+      // New hub state
+      bookmarks,
+      hasCheckedBookmarksPermission,
+      askBookmarksPermission,
+      revokeBookmarksPermission,
+      showImportSource,
+      setShowImportSource,
+      returnToAfterImport,
     };
   },
   {
diff --git a/packages/shared/src/features/shortcuts/hooks/useBrowserBookmarks.ts b/packages/shared/src/features/shortcuts/hooks/useBrowserBookmarks.ts
new file mode 100644
index 00000000000..c56371e9267
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useBrowserBookmarks.ts
@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Browser, Bookmarks } from 'webextension-polyfill';
+import { checkIsExtension } from '../../../lib/func';
+
+export type BrowserBookmark = {
+  title: string;
+  url: string;
+};
+
+// Cross-browser bookmarks-bar folder ids:
+// Chrome / Edge / Opera = "1"; Firefox = "toolbar_____" (5 underscores).
+const KNOWN_BOOKMARKS_BAR_IDS = ['1', 'toolbar_____'];
+const FALLBACK_BAR_TITLES = ['Bookmarks bar', 'Bookmarks Toolbar'];
+
+const isBookmarksBarNode = (node: Bookmarks.BookmarkTreeNode): boolean => {
+  if (KNOWN_BOOKMARKS_BAR_IDS.includes(node.id)) {
+    return true;
+  }
+  return !!node.title && FALLBACK_BAR_TITLES.includes(node.title);
+};
+
+const findBookmarksBar = (
+  nodes: Bookmarks.BookmarkTreeNode[] | undefined,
+): Bookmarks.BookmarkTreeNode | null => {
+  if (!nodes) {
+    return null;
+  }
+  return nodes.reduce<Bookmarks.BookmarkTreeNode | null>((found, node) => {
+    if (found) {
+      return found;
+    }
+    if (isBookmarksBarNode(node)) {
+      return node;
+    }
+    return findBookmarksBar(node.children);
+  }, null);
+};
+
+type FlattenResult = { bookmarks: BrowserBookmark[]; skippedNested: number };
+
+const flattenBar = (bar: Bookmarks.BookmarkTreeNode): FlattenResult => {
+  const bookmarks: BrowserBookmark[] = [];
+  let skippedNested = 0;
+
+  const walk = (nodes: Bookmarks.BookmarkTreeNode[], depth: number) => {
+    nodes.forEach((node) => {
+      if (node.url) {
+        bookmarks.push({
+          title: node.title || node.url,
+          url: node.url,
+        });
+        return;
+      }
+      if (depth === 0) {
+        if (node.children?.length) {
+          walk(node.children, depth + 1);
+        }
+      } else if (node.children) {
+        skippedNested += node.children.filter((c) => c.url).length;
+      }
+    });
+  };
+
+  walk(bar.children ?? [], 0);
+  return { bookmarks, skippedNested };
+};
+
+export interface UseBrowserBookmarks {
+  bookmarks: BrowserBookmark[] | undefined;
+  skippedNested: number;
+  hasCheckedPermission: boolean;
+  askBookmarksPermission: () => Promise<boolean>;
+  revokeBookmarksPermission: () => Promise<void>;
+}
+
+export const useBrowserBookmarks = (): UseBrowserBookmarks => {
+  const [browser, setBrowser] = useState<Browser>();
+  const [bookmarks, setBookmarks] = useState<BrowserBookmark[] | undefined>();
+  const [skippedNested, setSkippedNested] = useState(0);
+  const [hasCheckedPermission, setHasCheckedPermission] = useState(false);
+
+  const getBookmarks = useCallback(async (): Promise<void> => {
+    if (!browser?.bookmarks) {
+      setBookmarks(undefined);
+      setSkippedNested(0);
+      setHasCheckedPermission(true);
+      return;
+    }
+
+    try {
+      const tree = await browser.bookmarks.getTree();
+      const bar = findBookmarksBar(tree);
+      if (!bar) {
+        setBookmarks([]);
+        setSkippedNested(0);
+      } else {
+        const { bookmarks: flat, skippedNested: skipped } = flattenBar(bar);
+        setBookmarks(flat);
+        setSkippedNested(skipped);
+      }
+    } catch (_) {
+      setBookmarks(undefined);
+      setSkippedNested(0);
+    }
+
+    setHasCheckedPermission(true);
+  }, [browser]);
+
+  const askBookmarksPermission = useCallback(async (): Promise<boolean> => {
+    if (!browser) {
+      return false;
+    }
+
+    const granted = await browser.permissions.request({
+      permissions: ['bookmarks'],
+    });
+    if (granted) {
+      await getBookmarks();
+    }
+    return granted;
+  }, [browser, getBookmarks]);
+
+  const revokeBookmarksPermission = useCallback(async (): Promise<void> => {
+    if (!browser) {
+      return;
+    }
+
+    await browser.permissions.remove({ permissions: ['bookmarks'] });
+    setBookmarks(undefined);
+    setSkippedNested(0);
+  }, [browser]);
+
+  useEffect(() => {
+    if (!checkIsExtension()) {
+      return;
+    }
+    if (!browser) {
+      import('webextension-polyfill').then((mod) => setBrowser(mod.default));
+    } else {
+      getBookmarks();
+    }
+  }, [browser, getBookmarks]);
+
+  return useMemo(
+    () => ({
+      bookmarks,
+      skippedNested,
+      hasCheckedPermission,
+      askBookmarksPermission,
+      revokeBookmarksPermission,
+    }),
+    [
+      bookmarks,
+      skippedNested,
+      hasCheckedPermission,
+      askBookmarksPermission,
+      revokeBookmarksPermission,
+    ],
+  );
+};
diff --git a/packages/shared/src/features/shortcuts/hooks/useDragClickGuard.ts b/packages/shared/src/features/shortcuts/hooks/useDragClickGuard.ts
new file mode 100644
index 00000000000..30592d9a273
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useDragClickGuard.ts
@@ -0,0 +1,118 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Pointer distance (px) that promotes a pointerdown→pointerup into a drag
+ * gesture instead of a click. Shared between dnd-kit's `PointerSensor`
+ * `activationConstraint` and per-tile `didPointerTravel` calculations so the
+ * "is this a click or a drag?" threshold agrees across layers.
+ */
+export const DRAG_ACTIVATION_DISTANCE_PX = 5;
+
+/**
+ * Squared distance counterpart of {@link DRAG_ACTIVATION_DISTANCE_PX}, exposed
+ * so callers can skip a `Math.sqrt` in hot pointer paths by comparing against
+ * `dx * dx + dy * dy` directly. Kept next to its source value so the two
+ * cannot drift.
+ */
+export const DRAG_ACTIVATION_DISTANCE_SQ_PX =
+  DRAG_ACTIVATION_DISTANCE_PX * DRAG_ACTIVATION_DISTANCE_PX;
+
+/**
+ * How long after a drag ends we continue to swallow stray clicks. Chrome
+ * occasionally fires a second synthesized click when a drag crosses element
+ * boundaries, and the first click can arrive on a different DOM target than
+ * the tile the drag started from. 500ms covers both without meaningfully
+ * blocking a deliberate follow-up click.
+ */
+export const POST_DRAG_SUPPRESSION_MS = 500;
+
+/**
+ * Shared guard for the "drag ended, browser fires a stray click on pointerup,
+ * the click lands on an `<a href>` and navigates the tab" bug that plagues
+ * dnd-kit sortable rows of anchor tiles.
+ *
+ * The previous fix scoped click suppression to the toolbar's `onClickCapture`,
+ * which only catches clicks whose DOM target is a descendant of the toolbar.
+ * When the user drags a tile *outside* the toolbar (e.g. several hundred pixels
+ * to the left into the greeting area) and releases, the tile follows the
+ * pointer via CSS transform but the hit-test at pointerup can land on a
+ * sibling surface — or the synthetic click React dispatches can be routed to
+ * a different root-attached listener before ours fires. A document-level
+ * capture-phase listener sits above everything, so a single armed flag
+ * reliably swallows the next click regardless of where it lands.
+ *
+ * Usage:
+ *   const { armGuard, onClickCapture } = useDragClickGuard();
+ *   <DndContext
+ *     onDragStart={armGuard}
+ *     onDragCancel={armGuard}
+ *     onDragEnd={(event) => { armGuard(); ... }}
+ *   />
+ *   <div onClickCapture={onClickCapture}>...</div>
+ *
+ * `onClickCapture` stays wired on the toolbar as a React-side belt; the
+ * native document listener is the suspenders.
+ */
+export function useDragClickGuard(): {
+  armGuard: () => void;
+  onClickCapture: (event: ReactMouseEvent) => void;
+} {
+  const activeRef = useRef(false);
+  const timerRef = useRef<number | null>(null);
+
+  const disarm = useCallback(() => {
+    activeRef.current = false;
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const armGuard = useCallback(() => {
+    activeRef.current = true;
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+    }
+    timerRef.current = window.setTimeout(() => {
+      activeRef.current = false;
+      timerRef.current = null;
+    }, POST_DRAG_SUPPRESSION_MS);
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+    // Capture phase runs before any React synthetic handler (React attaches
+    // its own root listener in the bubble phase, and even with 17+'s root
+    // delegation, capture still wins). stopImmediatePropagation keeps any
+    // other capture-phase listener on the same target from re-triggering
+    // navigation.
+    const handler = (event: MouseEvent) => {
+      if (!activeRef.current) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    };
+    document.addEventListener('click', handler, true);
+    document.addEventListener('auxclick', handler, true);
+    return () => {
+      document.removeEventListener('click', handler, true);
+      document.removeEventListener('auxclick', handler, true);
+      disarm();
+    };
+  }, [disarm]);
+
+  const onClickCapture = useCallback((event: ReactMouseEvent) => {
+    if (!activeRef.current) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  return { armGuard, onClickCapture };
+}
diff --git a/packages/shared/src/features/shortcuts/hooks/useHiddenTopSites.ts b/packages/shared/src/features/shortcuts/hooks/useHiddenTopSites.ts
new file mode 100644
index 00000000000..8c47ea8ec61
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useHiddenTopSites.ts
@@ -0,0 +1,58 @@
+import { useCallback, useMemo } from 'react';
+import usePersistentContext from '../../../hooks/usePersistentContext';
+
+const HIDDEN_TOP_SITES_KEY = 'shortcuts_hidden_top_sites';
+
+// Persists a per-browser list of most-visited URLs the user has dismissed.
+// Mirrors Chrome's NTP behaviour: the browser keeps surfacing top sites from
+// history, but we respect the user's one-off "remove this tile" decision.
+// Stored in IndexedDB via `usePersistentContext` so it survives reloads and
+// stays local to the device (top sites are inherently a per-browser signal).
+export function useHiddenTopSites(): {
+  hidden: string[];
+  isHidden: (url: string) => boolean;
+  hide: (url: string) => Promise<void>;
+  unhide: (url: string) => Promise<void>;
+  restore: () => Promise<void>;
+} {
+  const [value, setValue] = usePersistentContext<string[]>(
+    HIDDEN_TOP_SITES_KEY,
+    [],
+    undefined,
+    [],
+  );
+  const hidden = useMemo(() => value ?? [], [value]);
+
+  const hiddenSet = useMemo(() => new Set(hidden), [hidden]);
+
+  const isHidden = useCallback(
+    (url: string) => hiddenSet.has(url),
+    [hiddenSet],
+  );
+
+  const hide = useCallback(
+    async (url: string) => {
+      if (hiddenSet.has(url)) {
+        return;
+      }
+      await setValue([...hidden, url]);
+    },
+    [hidden, hiddenSet, setValue],
+  );
+
+  const unhide = useCallback(
+    async (url: string) => {
+      if (!hiddenSet.has(url)) {
+        return;
+      }
+      await setValue(hidden.filter((existing) => existing !== url));
+    },
+    [hidden, hiddenSet, setValue],
+  );
+
+  const restore = useCallback(async () => {
+    await setValue([]);
+  }, [setValue]);
+
+  return { hidden, isHidden, hide, unhide, restore };
+}
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.spec.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.spec.ts
new file mode 100644
index 00000000000..d85fba0249b
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.spec.ts
@@ -0,0 +1,209 @@
+import { renderHook, act } from '@testing-library/react';
+import type { DragEvent } from 'react';
+import { useShortcutDropZone } from './useShortcutDropZone';
+
+// In jsdom, DragEvent's DataTransfer is sparsely implemented and `types` is
+// read-only — so we stub the parts the hook actually reads and fake just
+// enough of a React synthetic event to drive the handlers directly. This
+// matches how the hook is actually consumed (via React's synthetic event
+// system spreading `dropHandlers` onto a JSX element), so we're exercising
+// the same branches a real drag would hit.
+interface FakeDataTransfer {
+  types: string[];
+  data: Record<string, string>;
+  dropEffect: string;
+}
+
+const createDragEvent = (
+  payload: Record<string, string> = {},
+): {
+  event: DragEvent<HTMLElement>;
+  preventDefault: jest.Mock;
+  dataTransfer: FakeDataTransfer;
+} => {
+  const dataTransfer: FakeDataTransfer = {
+    types: Object.keys(payload),
+    data: payload,
+    dropEffect: 'none',
+  };
+  const preventDefault = jest.fn();
+  const event = {
+    preventDefault,
+    dataTransfer: {
+      ...dataTransfer,
+      getData: (type: string) => dataTransfer.data[type] ?? '',
+      // Make `dropEffect` writable the way the DOM spec treats it. The
+      // hook flips it to 'copy' on dragOver; tests then assert on it.
+      get dropEffect() {
+        return dataTransfer.dropEffect;
+      },
+      set dropEffect(value: string) {
+        dataTransfer.dropEffect = value;
+      },
+    },
+  } as unknown as DragEvent<HTMLElement>;
+  return { event, preventDefault, dataTransfer };
+};
+
+describe('useShortcutDropZone', () => {
+  it('returns no handlers when onDropUrl is undefined', () => {
+    const { result } = renderHook(() => useShortcutDropZone(undefined));
+    expect(result.current.dropHandlers).toBeUndefined();
+    expect(result.current.isDropTarget).toBe(false);
+  });
+
+  it('returns no handlers when explicitly disabled', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop, false));
+    expect(result.current.dropHandlers).toBeUndefined();
+    expect(result.current.isDropTarget).toBe(false);
+  });
+
+  it('ignores drags without a text/uri-list payload on hover', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+    const { event, preventDefault } = createDragEvent({
+      'text/plain': 'hello, plain text',
+    });
+
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(event);
+    });
+
+    expect(preventDefault).not.toHaveBeenCalled();
+    expect(result.current.isDropTarget).toBe(false);
+  });
+
+  it('activates the drop target for text/uri-list drags and flips dropEffect on dragOver', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+
+    const enter = createDragEvent({
+      'text/uri-list': 'https://example.com',
+    });
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(enter.event);
+    });
+    expect(enter.preventDefault).toHaveBeenCalledTimes(1);
+    expect(result.current.isDropTarget).toBe(true);
+
+    const over = createDragEvent({ 'text/uri-list': 'https://example.com' });
+    act(() => {
+      result.current.dropHandlers?.onDragOver(over.event);
+    });
+    expect(over.preventDefault).toHaveBeenCalledTimes(1);
+    expect(over.dataTransfer.dropEffect).toBe('copy');
+  });
+
+  it('keeps the highlight on while nested child boundaries are crossed', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+    const payload = { 'text/uri-list': 'https://example.com' };
+
+    // Simulates entering the toolbar, then crossing into a child tile: two
+    // enters, only one leave should NOT yet deactivate the zone.
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(createDragEvent(payload).event);
+      result.current.dropHandlers?.onDragEnter(createDragEvent(payload).event);
+    });
+    expect(result.current.isDropTarget).toBe(true);
+
+    act(() => {
+      result.current.dropHandlers?.onDragLeave();
+    });
+    expect(result.current.isDropTarget).toBe(true);
+
+    act(() => {
+      result.current.dropHandlers?.onDragLeave();
+    });
+    expect(result.current.isDropTarget).toBe(false);
+  });
+
+  it('calls onDropUrl with the text/uri-list payload', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(
+        createDragEvent({ 'text/uri-list': 'https://example.com' }).event,
+      );
+    });
+
+    const drop = createDragEvent({ 'text/uri-list': 'https://example.com' });
+    act(() => {
+      result.current.dropHandlers?.onDrop(drop.event);
+    });
+
+    expect(drop.preventDefault).toHaveBeenCalledTimes(1);
+    expect(onDrop).toHaveBeenCalledWith('https://example.com');
+    expect(result.current.isDropTarget).toBe(false);
+  });
+
+  it('falls back to text/plain for the URL at drop time (Firefox case)', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+
+    // Enter still gated on uri-list so the row lights up for real link drags.
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(
+        createDragEvent({ 'text/uri-list': 'https://example.com' }).event,
+      );
+    });
+
+    // On drop, the uri-list is empty but text/plain carries the URL.
+    const drop = createDragEvent({
+      'text/uri-list': '',
+      'text/plain': 'example.com',
+    });
+    act(() => {
+      result.current.dropHandlers?.onDrop(drop.event);
+    });
+
+    expect(onDrop).toHaveBeenCalledWith('https://example.com');
+  });
+
+  it('skips comment lines and whitespace in text/uri-list', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(
+        createDragEvent({ 'text/uri-list': 'https://example.com' }).event,
+      );
+    });
+
+    // Per RFC 2483, `#`-prefixed lines are comments. We should pick the
+    // first valid URL past them.
+    const drop = createDragEvent({
+      'text/uri-list':
+        '# comment line\n  \nhttps://daily.dev\nhttps://ignored.example',
+    });
+    act(() => {
+      result.current.dropHandlers?.onDrop(drop.event);
+    });
+
+    expect(onDrop).toHaveBeenCalledWith('https://daily.dev');
+  });
+
+  it('no-ops on drop when the payload is not a valid URL', () => {
+    const onDrop = jest.fn();
+    const { result } = renderHook(() => useShortcutDropZone(onDrop));
+
+    act(() => {
+      result.current.dropHandlers?.onDragEnter(
+        createDragEvent({ 'text/uri-list': 'https://example.com' }).event,
+      );
+    });
+
+    const drop = createDragEvent({
+      'text/uri-list': '',
+      'text/plain': 'just some selected text, not a URL at all',
+    });
+    act(() => {
+      result.current.dropHandlers?.onDrop(drop.event);
+    });
+
+    expect(onDrop).not.toHaveBeenCalled();
+    expect(result.current.isDropTarget).toBe(false);
+  });
+});
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.ts
new file mode 100644
index 00000000000..9e23bdaa0bb
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutDropZone.ts
@@ -0,0 +1,173 @@
+import type { DragEvent } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { isValidHttpUrl, withHttps } from '../../../lib/links';
+
+/**
+ * Drag-to-add drop zone for shortcuts rows.
+ *
+ * Historically only the small `AddShortcutTile` (the "+" button) listened for
+ * external URL drops. That's a ~44px target in a flexible row that can be
+ * hundreds of pixels wide, so users dragging a link from the browser's
+ * bookmarks bar almost always missed it — and because the rest of the row
+ * had no drop listeners, there was no visible "you can drop here" indicator
+ * either. This hook turns the entire toolbar container into a single drop
+ * target so a drop anywhere on the row counts.
+ *
+ * Drop lifecycle notes:
+ * - `dragenter` / `dragleave` fire on every child boundary the pointer
+ *   crosses, so a naive boolean state flickers as the drag moves across
+ *   tiles. We use a depth counter: +1 on enter, −1 on leave, indicator is
+ *   active while depth > 0. This is the well-known fix for the fact that
+ *   `relatedTarget` is unreliable across browsers during a drag.
+ * - During `dragenter`/`dragover` the spec disallows reading the dragged
+ *   data for security, so we key the "is this a URL?" gate off
+ *   `dataTransfer.types`. We only light up for `text/uri-list` at hover
+ *   time — every real link-drag source (bookmarks bar, address bar, link
+ *   elements) sets it, and gating on it alone avoids false-positive halos
+ *   for plain-text drags (selected text, etc). At `drop` time we broaden
+ *   to `text/plain` as a fallback since Firefox occasionally only sets
+ *   that for link drags initiated from older sources.
+ * - `dragover.preventDefault()` is required to make the drop event fire at
+ *   all; without it browsers reject the drop as "not a valid target".
+ */
+
+// During `dragenter`/`dragover` the spec doesn't let us read the dragged data
+// (security), so we pattern-match on `dataTransfer.types` instead. Browsers
+// emit `text/uri-list` for real link drags — bookmarks bar, address-bar URL,
+// link-to-link tab drags — so that's the only type we accept as a hover
+// signal. `text/plain` is too permissive (any selected-text drag advertises
+// it), so we save it for a fallback at *drop* time via `extractUrlFromDrop`.
+const URL_HOVER_TYPE = 'text/uri-list';
+
+const hasUrlHoverPayload = (event: DragEvent): boolean => {
+  const { types } = event.dataTransfer;
+  if (!types) {
+    return false;
+  }
+  // `types` is an array-like DOMStringList; avoid `.includes` for older APIs.
+  for (let i = 0; i < types.length; i += 1) {
+    if (types[i] === URL_HOVER_TYPE) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const parseUrlLine = (raw: string): string | null => {
+  const trimmed = raw.trim();
+  if (!trimmed || trimmed.startsWith('#')) {
+    return null;
+  }
+  const normalised = withHttps(trimmed);
+  return isValidHttpUrl(normalised) ? normalised : null;
+};
+
+const extractUrlFromDrop = (event: DragEvent): string | null => {
+  const uriList = event.dataTransfer.getData('text/uri-list');
+  if (uriList) {
+    const fromUriList = uriList
+      .split(/\r?\n/)
+      .map(parseUrlLine)
+      .find((parsed): parsed is string => !!parsed);
+    if (fromUriList) {
+      return fromUriList;
+    }
+  }
+  const plain = event.dataTransfer.getData('text/plain');
+  if (plain) {
+    return parseUrlLine(plain);
+  }
+  return null;
+};
+
+export interface ShortcutDropZoneHandlers {
+  onDragEnter: (event: DragEvent<HTMLElement>) => void;
+  onDragOver: (event: DragEvent<HTMLElement>) => void;
+  onDragLeave: () => void;
+  onDrop: (event: DragEvent<HTMLElement>) => void;
+}
+
+export interface UseShortcutDropZoneResult {
+  isDropTarget: boolean;
+  dropHandlers: ShortcutDropZoneHandlers | undefined;
+}
+
+export function useShortcutDropZone(
+  onDropUrl: ((url: string) => void) | undefined,
+  enabled: boolean = true,
+): UseShortcutDropZoneResult {
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  const depthRef = useRef(0);
+  const canAccept = !!onDropUrl && enabled;
+
+  const handleDragEnter = useCallback(
+    (event: DragEvent<HTMLElement>) => {
+      if (!canAccept || !hasUrlHoverPayload(event)) {
+        return;
+      }
+      event.preventDefault();
+      depthRef.current += 1;
+      setIsDropTarget(true);
+    },
+    [canAccept],
+  );
+
+  const handleDragOver = useCallback(
+    (event: DragEvent<HTMLElement>) => {
+      if (!canAccept || !hasUrlHoverPayload(event)) {
+        return;
+      }
+      // Required to mark the element a valid drop target; without it the
+      // browser won't fire `drop` and the copy cursor never appears.
+      event.preventDefault();
+      // eslint-disable-next-line no-param-reassign
+      event.dataTransfer.dropEffect = 'copy';
+      // Safety net: if a drag crosses browser windows or starts inside the
+      // zone, `dragenter` can be skipped — keep the indicator on while the
+      // pointer is actively hovering the zone.
+      if (depthRef.current === 0) {
+        depthRef.current = 1;
+        setIsDropTarget(true);
+      }
+    },
+    [canAccept],
+  );
+
+  const handleDragLeave = useCallback(() => {
+    if (!canAccept) {
+      return;
+    }
+    depthRef.current = Math.max(0, depthRef.current - 1);
+    if (depthRef.current === 0) {
+      setIsDropTarget(false);
+    }
+  }, [canAccept]);
+
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLElement>) => {
+      if (!canAccept) {
+        return;
+      }
+      event.preventDefault();
+      depthRef.current = 0;
+      setIsDropTarget(false);
+      const url = extractUrlFromDrop(event);
+      if (url && onDropUrl) {
+        onDropUrl(url);
+      }
+    },
+    [canAccept, onDropUrl],
+  );
+
+  return {
+    isDropTarget: canAccept && isDropTarget,
+    dropHandlers: canAccept
+      ? {
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+        }
+      : undefined,
+  };
+}
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutLinks.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutLinks.ts
index 688377461be..7706676403b 100644
--- a/packages/shared/src/features/shortcuts/hooks/useShortcutLinks.ts
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutLinks.ts
@@ -7,16 +7,16 @@ import { useShortcutsUser } from './useShortcutsUser';
 import { useShortcuts } from '../contexts/ShortcutsProvider';
 
 export interface UseShortcutLinks {
-  formRef: MutableRefObject<HTMLFormElement>;
+  formRef: MutableRefObject<HTMLFormElement | undefined>;
   onSaveChanges: (
     e: FormEvent,
-  ) => Promise<{ errors: Record<string | number, string> }>;
+  ) => Promise<{ errors: Record<string, string> | null }>;
   askTopSitesBrowserPermission: () => Promise<boolean>;
   hasCheckedPermission?: boolean;
-  isTopSiteActive?: boolean;
-  hasTopSites?: boolean;
+  isTopSiteActive?: boolean | null;
+  hasTopSites?: boolean | null;
   isManual?: boolean;
-  shortcutLinks: string[];
+  shortcutLinks?: string[];
   formLinks: string[];
   customLinks?: string[];
   hideShortcuts: boolean;
@@ -33,10 +33,14 @@ export function useShortcutLinks(): UseShortcutLinks {
   const { customLinks, updateCustomLinks, showTopSites } = useSettingsContext();
 
   const hasTopSites = topSites === undefined ? null : topSites?.length > 0;
-  const hasCustomLinks = customLinks?.length > 0;
+  const hasCustomLinks = (customLinks?.length ?? 0) > 0;
   const isTopSiteActive =
     hasCheckedPermission && !hasCustomLinks && hasTopSites;
-  const sites = topSites?.map((site) => site.url);
+  // Legacy surface caps at 8 tiles. The upstream hook now hands back up to
+  // `MAX_SHORTCUTS` (12) so the new hub's auto mode can render the full
+  // row, so we slice here to keep the legacy row's visual width stable
+  // for flag-off users.
+  const sites = topSites?.slice(0, 8).map((site) => site.url);
   const shortcutLinks = isTopSiteActive ? sites : customLinks;
   const formLinks = (isManual ? customLinks : sites) || [];
 
@@ -46,10 +50,14 @@ export function useShortcutLinks(): UseShortcutLinks {
   const showGetStarted =
     !isOldUser && hasNoShortcuts && !hasCompletedFirstSession;
 
-  const getFormInputs = () =>
-    Array.from(formRef.current.elements).filter(
+  const getFormInputs = () => {
+    if (!formRef.current) {
+      return [] as HTMLInputElement[];
+    }
+    return Array.from(formRef.current.elements).filter(
       (el) => el.getAttribute('name') === 'shortcutLink',
     ) as HTMLInputElement[];
+  };
 
   const onSaveChanges = async (e: FormEvent) => {
     e.preventDefault();
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.spec.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.spec.ts
new file mode 100644
index 00000000000..3441cc2e9d6
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.spec.ts
@@ -0,0 +1,166 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useShortcutsManager } from './useShortcutsManager';
+
+type ToastOptions = {
+  timer?: number;
+  action?: {
+    copy?: string;
+    onClick: () => void | Promise<void>;
+  };
+};
+
+// Jest hoists `jest.mock` factories above imports, so any identifiers they
+// reference must be prefixed with `mock` per jest's out-of-scope guard.
+const mockState = {
+  customLinks: [] as string[],
+  flags: { shortcutMeta: {} as Record<string, unknown> } as Record<
+    string,
+    unknown
+  >,
+};
+const mockSetSettings = jest.fn(async (patch: Record<string, unknown>) => {
+  if ('customLinks' in patch) {
+    mockState.customLinks = patch.customLinks as string[];
+  }
+  if ('flags' in patch) {
+    mockState.flags = { ...(patch.flags as Record<string, unknown>) };
+  }
+});
+const mockUpdateCustomLinks = jest.fn(async (links: string[]) => {
+  mockState.customLinks = [...links];
+});
+const mockLogEvent = jest.fn();
+const mockDisplayToast = jest.fn<void, [string, ToastOptions?]>();
+
+jest.mock('../../../contexts/SettingsContext', () => ({
+  useSettingsContext: () => ({
+    get customLinks() {
+      return mockState.customLinks;
+    },
+    get flags() {
+      return mockState.flags;
+    },
+    updateCustomLinks: mockUpdateCustomLinks,
+    setSettings: mockSetSettings,
+  }),
+}));
+
+jest.mock('../../../contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('../../../hooks/useToastNotification', () => ({
+  useToastNotification: () => ({ displayToast: mockDisplayToast }),
+}));
+
+jest.mock('../contexts/ShortcutsProvider', () => ({
+  useShortcuts: () => ({ setShowImportSource: jest.fn() }),
+}));
+
+const resetState = () => {
+  mockState.customLinks = [];
+  mockState.flags = { shortcutMeta: {} };
+  mockSetSettings.mockClear();
+  mockUpdateCustomLinks.mockClear();
+  mockLogEvent.mockClear();
+  mockDisplayToast.mockClear();
+};
+
+describe('useShortcutsManager', () => {
+  beforeEach(resetState);
+
+  it('adds a shortcut with https normalization', async () => {
+    const { result } = renderHook(() => useShortcutsManager());
+
+    await act(async () => {
+      const res = await result.current.addShortcut({ url: 'example.com' });
+      expect(res.error).toBeUndefined();
+    });
+
+    expect(mockSetSettings).toHaveBeenCalledTimes(1);
+    expect(mockState.customLinks).toEqual(['https://example.com']);
+  });
+
+  it('rejects duplicates regardless of www / trailing slash', async () => {
+    mockState.customLinks = ['https://www.example.com/'];
+    const { result } = renderHook(() => useShortcutsManager());
+
+    await act(async () => {
+      const res = await result.current.addShortcut({
+        url: 'https://example.com',
+      });
+      expect(res.error).toBe('This shortcut already exists');
+    });
+
+    expect(mockSetSettings).not.toHaveBeenCalled();
+  });
+
+  it('treats distinct search params as distinct shortcuts', async () => {
+    mockState.customLinks = ['https://example.com/search?q=foo'];
+    const { result } = renderHook(() => useShortcutsManager());
+
+    await act(async () => {
+      const res = await result.current.addShortcut({
+        url: 'https://example.com/search?q=bar',
+      });
+      expect(res.error).toBeUndefined();
+    });
+
+    expect(mockState.customLinks).toEqual([
+      'https://example.com/search?q=foo',
+      'https://example.com/search?q=bar',
+    ]);
+  });
+
+  it('undo restores a removed shortcut without stomping concurrent writes', async () => {
+    mockState.customLinks = ['https://a.com', 'https://b.com'];
+    const { result, rerender } = renderHook(() => useShortcutsManager());
+
+    await act(async () => {
+      await result.current.removeShortcut('https://a.com');
+    });
+
+    // Simulate a concurrent add landing while the undo toast is still visible.
+    mockState.customLinks = ['https://b.com', 'https://c.com'];
+    rerender();
+
+    await waitFor(() => {
+      expect(mockDisplayToast).toHaveBeenCalled();
+    });
+    const [, options] = mockDisplayToast.mock.calls[0];
+    expect(options?.action?.copy).toBe('Undo');
+
+    await act(async () => {
+      await options?.action?.onClick();
+    });
+
+    // The undo should merge the restored shortcut with the concurrent add,
+    // not roll back to the pre-remove snapshot that would lose `c.com`.
+    expect(mockState.customLinks).toEqual([
+      'https://a.com',
+      'https://b.com',
+      'https://c.com',
+    ]);
+  });
+
+  it('imports sites up to the MAX_SHORTCUTS capacity and skips dupes', async () => {
+    mockState.customLinks = ['https://a.com'];
+    const { result } = renderHook(() => useShortcutsManager());
+
+    await act(async () => {
+      const res = await result.current.importFrom('topSites', [
+        { url: 'a.com' },
+        { url: 'b.com', title: 'B' },
+        { url: 'c.com' },
+      ]);
+      expect(res.imported).toBe(2);
+      expect(res.skipped).toBe(1);
+    });
+
+    expect(mockState.customLinks).toEqual([
+      'https://a.com',
+      'https://b.com',
+      'https://c.com',
+    ]);
+  });
+});
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.ts
new file mode 100644
index 00000000000..da34c03c3e7
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutsManager.ts
@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSettingsContext } from '../../../contexts/SettingsContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { LogEvent, ShortcutsSourceType, TargetType } from '../../../lib/log';
+import { canonicalShortcutUrl, withHttps } from '../../../lib/links';
+import type { SettingsFlags } from '../../../graphql/settings';
+import type { ImportSource, Shortcut, ShortcutMeta } from '../types';
+import { MAX_SHORTCUTS, UNDO_TIMEOUT_MS, shortcutColorPalette } from '../types';
+import { useShortcuts } from '../contexts/ShortcutsProvider';
+
+// djb2-style string hash; bitwise ops are deliberate for 32-bit truncation
+// behaviour equivalent to what Java's String.hashCode() does.
+const hashString = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    // eslint-disable-next-line no-bitwise
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    // eslint-disable-next-line no-bitwise
+    hash |= 0;
+  }
+  return Math.abs(hash);
+};
+
+const defaultColorForUrl = (url: string) => {
+  try {
+    const host = new URL(withHttps(url)).hostname;
+    return shortcutColorPalette[hashString(host) % shortcutColorPalette.length];
+  } catch (_) {
+    return shortcutColorPalette[0];
+  }
+};
+
+export interface UseShortcutsManager {
+  shortcuts: Shortcut[];
+  canAdd: boolean;
+  addShortcut: (input: {
+    url: string;
+    name?: string;
+    iconUrl?: string;
+    color?: string;
+  }) => Promise<{ error?: string }>;
+  updateShortcut: (
+    url: string,
+    patch: { url?: string; name?: string; iconUrl?: string; color?: string },
+  ) => Promise<{ error?: string }>;
+  removeShortcut: (url: string) => Promise<void>;
+  reorder: (nextUrls: string[]) => Promise<void>;
+  importFrom: (
+    source: ImportSource,
+    items: Array<{ url: string; title?: string }>,
+  ) => Promise<{ imported: number; skipped: number }>;
+  findDuplicate: (url: string) => string | null;
+}
+
+const colorIsValid = (color?: string): color is ShortcutMeta['color'] =>
+  !!color && (shortcutColorPalette as readonly string[]).includes(color);
+
+export const useShortcutsManager = (): UseShortcutsManager => {
+  const { logEvent } = useLogContext();
+  const { displayToast } = useToastNotification();
+  const { customLinks, flags, updateCustomLinks, setSettings } =
+    useSettingsContext();
+  const { setShowImportSource } = useShortcuts();
+
+  const metaMap = useMemo(() => flags?.shortcutMeta ?? {}, [flags]);
+  const links = useMemo(() => customLinks ?? [], [customLinks]);
+
+  // Refs tracking the latest committed state so undo toasts can recompute
+  // against fresh data rather than a stale closure snapshot, which would
+  // otherwise clobber unrelated writes that landed during the undo window.
+  const linksRef = useRef(links);
+  const metaRef = useRef(metaMap);
+  useEffect(() => {
+    linksRef.current = links;
+    metaRef.current = metaMap;
+  }, [links, metaMap]);
+
+  const shortcuts = useMemo<Shortcut[]>(
+    () =>
+      links.map((url) => {
+        const meta = metaMap[url] ?? {};
+        return {
+          url,
+          name: meta.name,
+          iconUrl: meta.iconUrl,
+          color: meta.color ?? defaultColorForUrl(url),
+        };
+      }),
+    [links, metaMap],
+  );
+
+  const canonicalMap = useMemo(() => {
+    const map = new Map<string, string>();
+    links.forEach((url) => {
+      const key = canonicalShortcutUrl(url);
+      if (key) {
+        map.set(key, url);
+      }
+    });
+    return map;
+  }, [links]);
+
+  const findDuplicate = useCallback(
+    (url: string) => {
+      const key = canonicalShortcutUrl(url);
+      if (!key) {
+        return null;
+      }
+      return canonicalMap.get(key) ?? null;
+    },
+    [canonicalMap],
+  );
+
+  const canAdd = links.length < MAX_SHORTCUTS;
+
+  const log = useCallback(
+    (eventName: LogEvent, extra?: Record<string, unknown>) =>
+      logEvent({
+        event_name: eventName,
+        target_type: TargetType.Shortcuts,
+        extra: extra ? JSON.stringify(extra) : undefined,
+      }),
+    [logEvent],
+  );
+
+  const writeBatch = useCallback(
+    async (
+      nextLinks: string[],
+      nextMeta: Record<string, ShortcutMeta>,
+    ): Promise<void> => {
+      await setSettings({
+        customLinks: nextLinks,
+        flags: { ...flags, shortcutMeta: nextMeta } as SettingsFlags,
+      });
+    },
+    [flags, setSettings],
+  );
+
+  const addShortcut: UseShortcutsManager['addShortcut'] = useCallback(
+    async ({ url, name, iconUrl, color }) => {
+      if (!canAdd) {
+        return { error: `You can only add up to ${MAX_SHORTCUTS} shortcuts.` };
+      }
+      const httpsUrl = withHttps(url);
+      const existingDuplicate = findDuplicate(httpsUrl);
+      if (existingDuplicate) {
+        return { error: 'This shortcut already exists' };
+      }
+
+      const meta: ShortcutMeta = {};
+      if (name) {
+        meta.name = name;
+      }
+      if (iconUrl) {
+        meta.iconUrl = iconUrl;
+      }
+      if (colorIsValid(color)) {
+        meta.color = color;
+      }
+      const nextLinks = [...links, httpsUrl];
+      const nextMeta = { ...metaMap };
+      if (Object.keys(meta).length) {
+        nextMeta[httpsUrl] = meta;
+      }
+
+      await writeBatch(nextLinks, nextMeta);
+      log(LogEvent.AddShortcut);
+      return {};
+    },
+    [canAdd, findDuplicate, links, metaMap, writeBatch, log],
+  );
+
+  const updateShortcut: UseShortcutsManager['updateShortcut'] = useCallback(
+    async (url, patch) => {
+      const index = links.indexOf(url);
+      if (index === -1) {
+        return { error: 'Shortcut not found' };
+      }
+
+      const nextUrl = patch.url ? withHttps(patch.url) : url;
+      if (nextUrl !== url) {
+        const duplicate = findDuplicate(nextUrl);
+        if (duplicate && duplicate !== url) {
+          return { error: 'This shortcut already exists' };
+        }
+      }
+
+      const nextLinks = [...links];
+      nextLinks[index] = nextUrl;
+
+      const prevMeta = metaMap[url] ?? {};
+      const mergedMeta: ShortcutMeta = {
+        ...prevMeta,
+        ...(patch.name !== undefined ? { name: patch.name || undefined } : {}),
+        ...(patch.iconUrl !== undefined
+          ? { iconUrl: patch.iconUrl || undefined }
+          : {}),
+        ...(patch.color !== undefined && colorIsValid(patch.color)
+          ? { color: patch.color }
+          : {}),
+      };
+
+      const nextMeta = { ...metaMap };
+      delete nextMeta[url];
+      const isEmpty =
+        !mergedMeta.name && !mergedMeta.iconUrl && !mergedMeta.color;
+      if (!isEmpty) {
+        nextMeta[nextUrl] = mergedMeta;
+      }
+
+      await writeBatch(nextLinks, nextMeta);
+      log(LogEvent.EditShortcut);
+      return {};
+    },
+    [links, metaMap, findDuplicate, writeBatch, log],
+  );
+
+  const removeShortcut = useCallback<UseShortcutsManager['removeShortcut']>(
+    async (url) => {
+      const index = links.indexOf(url);
+      if (index === -1) {
+        return;
+      }
+      const prevMeta = metaMap[url];
+      const nextLinks = links.filter((u) => u !== url);
+      const nextMeta = { ...metaMap };
+      delete nextMeta[url];
+
+      await writeBatch(nextLinks, nextMeta);
+      log(LogEvent.RemoveShortcut);
+
+      // `displayToast` owns the 6s undo window via `timer`; a second
+      // remove clobbers the first toast through the toast manager, so we
+      // don't need to track timers here.
+      displayToast('Shortcut removed', {
+        timer: UNDO_TIMEOUT_MS,
+        action: {
+          copy: 'Undo',
+          onClick: async () => {
+            // Recompute from the latest committed state so we don't stomp
+            // unrelated shortcut writes that landed during the undo window.
+            const currentLinks = linksRef.current;
+            const currentMeta = metaRef.current;
+            if (currentLinks.includes(url)) {
+              // User re-added the same shortcut during the undo window;
+              // nothing to restore.
+              return;
+            }
+            const insertAt = Math.min(index, currentLinks.length);
+            const restoredLinks = [...currentLinks];
+            restoredLinks.splice(insertAt, 0, url);
+            const restoredMeta = { ...currentMeta };
+            if (prevMeta) {
+              restoredMeta[url] = prevMeta;
+            }
+            await writeBatch(restoredLinks, restoredMeta);
+            log(LogEvent.UndoRemoveShortcut);
+          },
+        },
+      });
+    },
+    [links, metaMap, writeBatch, displayToast, log],
+  );
+
+  const reorder = useCallback<UseShortcutsManager['reorder']>(
+    async (nextUrls) => {
+      await updateCustomLinks(nextUrls);
+      log(LogEvent.ReorderShortcuts);
+    },
+    [updateCustomLinks, log],
+  );
+
+  const importFrom = useCallback<UseShortcutsManager['importFrom']>(
+    async (source, items) => {
+      const capacity = MAX_SHORTCUTS - links.length;
+      if (capacity <= 0) {
+        return { imported: 0, skipped: items.length };
+      }
+
+      const existingKeys = new Set(canonicalMap.keys());
+      const batchLinks: string[] = [];
+      const batchMeta: Record<string, ShortcutMeta> = {};
+      let skipped = 0;
+
+      items.forEach((item) => {
+        if (batchLinks.length >= capacity) {
+          skipped += 1;
+          return;
+        }
+        const httpsUrl = withHttps(item.url);
+        const key = canonicalShortcutUrl(httpsUrl);
+        if (!key || existingKeys.has(key)) {
+          skipped += 1;
+          return;
+        }
+        existingKeys.add(key);
+        batchLinks.push(httpsUrl);
+        if (item.title) {
+          batchMeta[httpsUrl] = { name: item.title };
+        }
+      });
+
+      if (!batchLinks.length) {
+        setShowImportSource?.(null);
+        return { imported: 0, skipped };
+      }
+
+      await writeBatch([...links, ...batchLinks], { ...metaMap, ...batchMeta });
+
+      const logSource =
+        source === 'bookmarks'
+          ? ShortcutsSourceType.Bookmarks
+          : ShortcutsSourceType.Browser;
+      log(LogEvent.ImportShortcuts, {
+        source: logSource,
+        count: batchLinks.length,
+      });
+
+      setShowImportSource?.(null);
+      return { imported: batchLinks.length, skipped };
+    },
+    [canonicalMap, links, metaMap, writeBatch, setShowImportSource, log],
+  );
+
+  return {
+    shortcuts,
+    canAdd,
+    addShortcut,
+    updateShortcut,
+    removeShortcut,
+    reorder,
+    importFrom,
+    findDuplicate,
+  };
+};
diff --git a/packages/shared/src/features/shortcuts/hooks/useShortcutsMigration.ts b/packages/shared/src/features/shortcuts/hooks/useShortcutsMigration.ts
new file mode 100644
index 00000000000..b2748ee7b1c
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/hooks/useShortcutsMigration.ts
@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+import { useSettingsContext } from '../../../contexts/SettingsContext';
+import { useActions } from '../../../hooks/useActions';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { ActionType } from '../../../graphql/actions';
+import { useShortcutsManager } from './useShortcutsManager';
+import { useShortcuts } from '../contexts/ShortcutsProvider';
+
+/**
+ * One-time auto-import for users who previously relied on the top-sites mode
+ * (had topSites permission + empty customLinks). Seeds customLinks from
+ * topSites silently and surfaces a dismissible toast.
+ *
+ * Hardening notes:
+ * - `ranRef` only flips to `true` AFTER we know whether we imported or not,
+ *   so a thrown `importFrom` doesn't permanently lock out retry.
+ * - Strict Mode double-invoke is guarded by `inFlightRef` instead of the
+ *   commit-time `ranRef` so we never start two parallel imports.
+ * - `completeAction` only fires on a real success (imported > 0); if the
+ *   browser returned zero top sites we leave the action unchecked and retry
+ *   on the next mount.
+ */
+export const useShortcutsMigration = (): void => {
+  const { customLinks, flags } = useSettingsContext();
+  const { checkHasCompleted, completeAction, isActionsFetched } = useActions();
+  const { topSites, hasCheckedPermission } = useShortcuts();
+  // Destructure `importFrom` so the effect's dep list tracks the only
+  // function we actually invoke. Depending on `manager` would rerun the
+  // effect every time any *other* shortcut field on the manager changed.
+  const { importFrom } = useShortcutsManager();
+  const { displayToast } = useToastNotification();
+  const inFlightRef = useRef(false);
+  const ranRef = useRef(false);
+
+  useEffect(() => {
+    if (ranRef.current || inFlightRef.current) {
+      return;
+    }
+    if (!isActionsFetched || !hasCheckedPermission) {
+      return;
+    }
+    if (checkHasCompleted(ActionType.ShortcutsMigratedFromTopSites)) {
+      ranRef.current = true;
+      return;
+    }
+    // Auto mode renders live top sites directly, so copying them into
+    // `customLinks` would leave the user with a stale manual list the next
+    // time they flip back to manual. Latch the migration action anyway so
+    // we don't keep re-evaluating this branch on every mount.
+    if ((flags?.shortcutsMode ?? 'manual') === 'auto') {
+      ranRef.current = true;
+      completeAction(ActionType.ShortcutsMigratedFromTopSites);
+      return;
+    }
+    // Once the user has engaged with the hub at all (picked suggestions,
+    // added/skipped from the get-started screen, or dismissed it), they own
+    // their list. An empty `customLinks` after that point is intentional —
+    // never silently re-import top sites over it. We latch the migration
+    // action too so this decision persists across devices/new tabs and the
+    // effect won't keep re-evaluating on every remount.
+    if (checkHasCompleted(ActionType.FirstShortcutsSession)) {
+      ranRef.current = true;
+      completeAction(ActionType.ShortcutsMigratedFromTopSites);
+      return;
+    }
+    if ((customLinks?.length ?? 0) > 0) {
+      return;
+    }
+    if (!topSites?.length) {
+      return;
+    }
+
+    inFlightRef.current = true;
+    const items = topSites.map((s) => ({ url: s.url }));
+    importFrom('topSites', items)
+      .then((result) => {
+        if (result.imported > 0) {
+          displayToast(
+            'We imported your most visited sites. You can edit them anytime.',
+          );
+          completeAction(ActionType.ShortcutsMigratedFromTopSites);
+          ranRef.current = true;
+        }
+      })
+      .catch(() => {
+        // Swallow: if the import failed we want the next mount to retry.
+        // The user is not blocked — we never showed a loading spinner.
+      })
+      .finally(() => {
+        inFlightRef.current = false;
+      });
+  }, [
+    isActionsFetched,
+    hasCheckedPermission,
+    checkHasCompleted,
+    completeAction,
+    customLinks,
+    flags,
+    topSites,
+    importFrom,
+    displayToast,
+  ]);
+};
diff --git a/packages/shared/src/features/shortcuts/hooks/useTopSites.ts b/packages/shared/src/features/shortcuts/hooks/useTopSites.ts
index f5a11f590c8..ea2af793773 100644
--- a/packages/shared/src/features/shortcuts/hooks/useTopSites.ts
+++ b/packages/shared/src/features/shortcuts/hooks/useTopSites.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Browser, TopSites } from 'webextension-polyfill';
 import { checkIsExtension } from '../../../lib/func';
+import { MAX_SHORTCUTS } from '../types';
 
 type TopSite = TopSites.MostVisitedURL;
 
@@ -15,8 +16,14 @@ export const useTopSites = () => {
     }
 
     try {
+      // Slice upstream so downstream consumers can choose their own visible
+      // cap: the legacy `ShortcutLinksList` takes 8, the new hub's auto
+      // mode takes `MAX_SHORTCUTS`. `MAX_SHORTCUTS` here is a defensive
+      // upper bound — browsers typically return ~10, but some profiles
+      // (edge cases, long histories) will return the full limit they
+      // support, and we don't want to haul more than we'd ever render.
       await browser.topSites.get().then((result = []) => {
-        setTopSites(result.slice(0, 8));
+        setTopSites(result.slice(0, MAX_SHORTCUTS));
       });
     } catch (err) {
       setTopSites(undefined);
diff --git a/packages/shared/src/features/shortcuts/types.ts b/packages/shared/src/features/shortcuts/types.ts
new file mode 100644
index 00000000000..a52344d939a
--- /dev/null
+++ b/packages/shared/src/features/shortcuts/types.ts
@@ -0,0 +1,47 @@
+export type ShortcutColor =
+  | 'burger'
+  | 'cheese'
+  | 'avocado'
+  | 'bacon'
+  | 'blueCheese'
+  | 'cabbage';
+
+export const shortcutColorPalette: readonly ShortcutColor[] = [
+  'burger',
+  'cheese',
+  'avocado',
+  'bacon',
+  'blueCheese',
+  'cabbage',
+] as const;
+
+export type ShortcutMeta = {
+  name?: string;
+  iconUrl?: string;
+  color?: ShortcutColor;
+};
+
+export type Shortcut = {
+  url: string;
+  name?: string;
+  iconUrl?: string;
+  color?: ShortcutColor;
+};
+
+export type ImportSource = 'topSites' | 'bookmarks';
+
+// 'auto' mirrors Chrome's default new tab: live top-sites from the browser,
+// read-only. 'manual' is the curated list the user pins and edits.
+export type ShortcutsMode = 'auto' | 'manual';
+
+// Appearance presets informed by patterns users already know:
+// - 'tile'  → Chrome new-tab / iOS Home (favicon square, label under).
+// - 'icon'  → iOS Dock, macOS Finder sidebar (icon only, labels via title).
+// - 'chip'  → Chrome bookmarks bar, Toby, Raindrop headlines (horizontal
+//             pill with favicon left, title right; info-dense, more fit).
+export type ShortcutsAppearance = 'tile' | 'icon' | 'chip';
+
+export const DEFAULT_SHORTCUTS_APPEARANCE: ShortcutsAppearance = 'tile';
+
+export const MAX_SHORTCUTS = 12;
+export const UNDO_TIMEOUT_MS = 6000;
diff --git a/packages/shared/src/graphql/actions.ts b/packages/shared/src/graphql/actions.ts
index 0ce5b75e3db..2cddf5b0a53 100644
--- a/packages/shared/src/graphql/actions.ts
+++ b/packages/shared/src/graphql/actions.ts
@@ -32,6 +32,7 @@ export enum ActionType {
   DisableReadingStreakMilestone = 'disable_reading_streak_milestone',
   DisableReadingStreakRecover = 'disable_reading_streak_recover',
   FirstShortcutsSession = 'first_shortcuts_session',
+  ShortcutsMigratedFromTopSites = 'shortcuts_migrated_from_top_sites',
   VotePost = 'vote_post',
   BookmarkPost = 'bookmark_post',
   DigestConfig = 'digest_config',
diff --git a/packages/shared/src/graphql/settings.ts b/packages/shared/src/graphql/settings.ts
index c48d561e1ed..52354d7aa68 100644
--- a/packages/shared/src/graphql/settings.ts
+++ b/packages/shared/src/graphql/settings.ts
@@ -1,6 +1,11 @@
 import { gql } from 'graphql-request';
 import type { SortCommentsBy } from './comments';
 import type { WriteFormTab } from '../components/fields/form/common';
+import type {
+  ShortcutMeta,
+  ShortcutsAppearance,
+  ShortcutsMode,
+} from '../features/shortcuts/types';
 
 export type Spaciness = 'eco' | 'roomy' | 'cozy';
 export type RemoteTheme = 'darcula' | 'bright' | 'auto';
@@ -20,6 +25,10 @@ export type SettingsFlags = {
   timezoneMismatchIgnore?: string;
   prompt?: Record<string, boolean>;
   defaultWriteTab?: WriteFormTab;
+  shortcutMeta?: Record<string, ShortcutMeta>;
+  shortcutsMode?: ShortcutsMode;
+  shortcutsAppearance?: ShortcutsAppearance;
+  showShortcutsOnWebapp?: boolean;
 };
 
 export enum SidebarSettingsFlags {
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 08cb456228b..d15a23314a5 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -158,3 +158,5 @@ export const featureShortcutsExtensionPromo = new Feature(
   'shortcuts_extension_promo',
   false,
 );
+
+export const featureShortcutsHub = new Feature('shortcuts_hub', false);
diff --git a/packages/shared/src/lib/links.spec.ts b/packages/shared/src/lib/links.spec.ts
index c9e3c0805de..3743ca2301b 100644
--- a/packages/shared/src/lib/links.spec.ts
+++ b/packages/shared/src/lib/links.spec.ts
@@ -1,4 +1,4 @@
-import { withHttps } from './links';
+import { canonicalShortcutUrl, withHttps } from './links';
 
 describe('lib/links tests', () => {
   it('should return links as https links', () => {
@@ -14,4 +14,49 @@ describe('lib/links tests', () => {
       expect(withHttps(input)).toEqual(expected);
     });
   });
+
+  describe('canonicalShortcutUrl', () => {
+    it('lowercases the host and strips trailing slashes', () => {
+      expect(canonicalShortcutUrl('HTTPS://Example.COM/Foo/')).toEqual(
+        'https://example.com/Foo',
+      );
+    });
+
+    it('collapses www. so www.example.com and example.com dedup', () => {
+      expect(canonicalShortcutUrl('https://www.example.com/')).toEqual(
+        'https://example.com',
+      );
+      expect(canonicalShortcutUrl('https://example.com')).toEqual(
+        'https://example.com',
+      );
+    });
+
+    it('preserves non-www subdomains', () => {
+      expect(canonicalShortcutUrl('https://blog.example.com')).toEqual(
+        'https://blog.example.com',
+      );
+    });
+
+    it('preserves non-default ports', () => {
+      expect(canonicalShortcutUrl('https://www.example.com:8443/path')).toEqual(
+        'https://example.com:8443/path',
+      );
+    });
+
+    it('preserves search params and hash so distinct pages dedup separately', () => {
+      expect(canonicalShortcutUrl('https://example.com/search?q=foo')).toEqual(
+        'https://example.com/search?q=foo',
+      );
+      expect(canonicalShortcutUrl('https://example.com/app#/route')).toEqual(
+        'https://example.com/app#/route',
+      );
+      expect(
+        canonicalShortcutUrl('https://example.com/search?q=foo'),
+      ).not.toEqual(canonicalShortcutUrl('https://example.com/search?q=bar'));
+    });
+
+    it('returns null for invalid input', () => {
+      expect(canonicalShortcutUrl('not a url')).toBeNull();
+    });
+  });
 });
diff --git a/packages/shared/src/lib/links.ts b/packages/shared/src/lib/links.ts
index ad068d188ce..455227d20c0 100644
--- a/packages/shared/src/lib/links.ts
+++ b/packages/shared/src/lib/links.ts
@@ -29,6 +29,41 @@ export const stripLinkParameters = (link: string): string => {
   return origin + pathname;
 };
 
+/**
+ * Canonical URL form used for duplicate detection across shortcuts.
+ * We keep protocol, hostname (lower-cased, leading `www.` stripped), port,
+ * pathname (trailing slash stripped), search, and hash — so different
+ * hashes or query strings on the same site are treated as different
+ * shortcuts. The `www.` collapse matters because users routinely paste
+ * both `example.com` and `www.example.com` for the same site (and
+ * browsers treat them as one in top-sites/history), so without it the
+ * dedup pass would happily keep both tiles.
+ */
+export const canonicalShortcutUrl = (link: string): string | null => {
+  try {
+    const url = new URL(withHttps(link));
+    const hostname = url.hostname.toLowerCase().replace(/^www\./, '');
+    const pathname = url.pathname.replace(/\/+$/, '');
+    // `url.port` is already normalized (empty for default ports), so we
+    // rebuild origin from parts instead of using `url.origin` which would
+    // bake the `www.` back in.
+    const port = url.port ? `:${url.port}` : '';
+    return `${url.protocol.toLowerCase()}//${hostname}${port}${pathname}${
+      url.search
+    }${url.hash}`;
+  } catch (_) {
+    return null;
+  }
+};
+
+export const getDomainFromUrl = (link: string): string => {
+  try {
+    return new URL(withHttps(link)).hostname.replace(/^www\./, '');
+  } catch (_) {
+    return link;
+  }
+};
+
 export const removeQueryParam = (url: string, param: string): string => {
   const link = new URL(url);
   link.searchParams.delete(param);
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index 8d418c39ce3..993a387baf9 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -198,6 +198,15 @@ export enum LogEvent {
   RevokeShortcutAccess = 'revoke shortcut access',
   SaveShortcutAccess = 'save shortcut access',
   OpenShortcutConfig = 'open shortcut config',
+  AddShortcut = 'add shortcut',
+  EditShortcut = 'edit shortcut',
+  RemoveShortcut = 'remove shortcut',
+  ReorderShortcuts = 'reorder shortcuts',
+  ImportShortcuts = 'import shortcuts',
+  UndoRemoveShortcut = 'undo remove shortcut',
+  ChangeShortcutsMode = 'change shortcuts mode',
+  ChangeShortcutsAppearance = 'change shortcuts appearance',
+  ToggleShortcutsOnWebapp = 'toggle shortcuts on webapp',
   // Devcard
   ShareDevcard = 'share devcard',
   GenerateDevcard = 'generate devcard',
@@ -615,6 +624,7 @@ export enum ShortcutsSourceType {
   Browser = 'browser',
   Placeholder = 'placeholder',
   Button = 'button',
+  Bookmarks = 'bookmarks',
 }
 
 export enum UserAcquisitionEvent {
diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx
index 12a9aa58668..9031568a172 100644
--- a/packages/webapp/pages/_app.tsx
+++ b/packages/webapp/pages/_app.tsx
@@ -19,6 +19,7 @@ import {
 } from '@dailydotdev/shared/src/hooks/useCookieBanner';
 import { ProgressiveEnhancementContextProvider } from '@dailydotdev/shared/src/contexts/ProgressiveEnhancementContext';
 import { SubscriptionContextProvider } from '@dailydotdev/shared/src/contexts/SubscriptionContext';
+import { ShortcutsProvider } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
 import { canonicalFromRouter } from '@dailydotdev/shared/src/lib/canonical';
 import '@dailydotdev/shared/src/styles/globals.css';
 import useLogPageView from '@dailydotdev/shared/src/hooks/log/useLogPageView';
@@ -410,7 +411,9 @@ export default function App(
               <PushNotificationContextProvider>
                 <SubscriptionContextProvider>
                   <PostReferrerContextProvider>
-                    <InternalApp {...props} />
+                    <ShortcutsProvider>
+                      <InternalApp {...props} />
+                    </ShortcutsProvider>
                   </PostReferrerContextProvider>
                 </SubscriptionContextProvider>
               </PushNotificationContextProvider>