diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css
deleted file mode 100644
index 8fb0a1165..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.label {
-  color: var(--Base-Text-Accent);
-  display: block;
-}
-
-.form {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--Surface-Primary-Default);
-  padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
-  border-radius: var(--Corner-radius-Rounded);
-  border: solid 1px var(--Border-Default);
-  position: relative;
-}
-
-.form:focus-within {
-  border-color: var(--UI-Input-Controls-Border-Focus);
-
-  & label {
-    color: var(--UI-Text-Active);
-  }
-}
-
-.autocomplete {
-  position: relative;
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.searchField:focus-within + .results {
-  display: block;
-}
-
-.fields {
-  position: relative;
-  width: 100%;
-}
-
-.clearButton {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  background: none;
-  border: 0;
-  color: var(--Text-Heading);
-  padding: var(--Space-x15); /* search field vertical padding */
-  cursor: pointer;
-}
-
-.input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  &::placeholder {
-    color: var(--UI-Text-Placeholder);
-  }
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.results {
-  position: relative;
-  display: none;
-}
-
-.searchButton {
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x05);
-  cursor: pointer;
-}
-
-.menuContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
-  background: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Large);
-  padding: var(--Space-x2);
-  width: 360px;
-  max-height: 400px;
-  box-sizing: content-box;
-  box-shadow: var(--BoxShadow-Level-4);
-  position: absolute;
-  left: 0;
-  top: var(--Space-x2);
-  z-index: 50;
-  overflow-y: auto;
-
-  & > div {
-    transition: opacity 0.2s 0.2s linear;
-  }
-
-  &.pending > div {
-    opacity: 0.5;
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .autocomplete {
-    max-width: 680px;
-  }
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx
deleted file mode 100644
index 5eb451c02..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import { cx } from "class-variance-authority"
-import { memo, useTransition } from "react"
-import {
-  Autocomplete,
-  Button as ButtonRAC,
-  Input,
-  Label,
-  SearchField,
-} from "react-aria-components"
-import { useIntl } from "react-intl"
-import { useIsMounted } from "usehooks-ts"
-
-import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { Results } from "../Results"
-
-import styles from "./clientInline.module.css"
-
-import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
-
-const ResultsMemo = memo(Results)
-
-export function ClientInline({
-  results,
-  latest,
-  setFilterString,
-  onAction,
-}: ClientProps) {
-  const intl = useIntl()
-  const [isPending, startTransition] = useTransition()
-  const isMounted = useIsMounted()
-
-  const showResults = !!results
-  const showHistory =
-    latest.length > 0 && isMounted() && (!results || results.length === 0)
-
-  return (
-    <Autocomplete>
-      <div className={styles.autocomplete}>
-        <SearchField
-          className={styles.searchField}
-          onClear={() => {
-            startTransition(() => {
-              setFilterString(null)
-            })
-          }}
-        >
-          {({ state }) => (
-            <form
-              className={styles.form}
-              onSubmit={(evt) => {
-                evt.preventDefault()
-                evt.stopPropagation()
-              }}
-            >
-              <div className={styles.fields}>
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <Label className={styles.label}>
-                    {intl.formatMessage({
-                      defaultMessage: "Where to?",
-                    })}
-                  </Label>
-                </Typography>
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <Input
-                    className={styles.input}
-                    placeholder={intl.formatMessage({
-                      defaultMessage: "Hotels & Destinations",
-                    })}
-                    onChange={(evt) => {
-                      startTransition(() => {
-                        if (evt.currentTarget.value) {
-                          setFilterString(evt.currentTarget.value)
-                        } else {
-                          setFilterString(null)
-                        }
-                      })
-                    }}
-                  />
-                </Typography>
-
-                {state.value !== "" && (
-                  <Typography variant="Body/Supporting text (caption)/smBold">
-                    <ButtonRAC className={styles.clearButton}>
-                      {intl.formatMessage({
-                        defaultMessage: "Clear",
-                      })}
-                    </ButtonRAC>
-                  </Typography>
-                )}
-              </div>
-
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <Button
-                  className={styles.searchButton}
-                  variant="Primary"
-                  size="Small"
-                  type="submit"
-                >
-                  <MaterialIcon icon="search" color="CurrentColor" />
-                  {intl.formatMessage({
-                    defaultMessage: "Search",
-                  })}
-                </Button>
-              </Typography>
-            </form>
-          )}
-        </SearchField>
-        {showResults || showHistory ? (
-          <div className={styles.results}>
-            <div
-              className={cx({
-                [styles.menuContainer]: true,
-                [styles.pending]: isPending,
-              })}
-              aria-live="polite"
-            >
-              {showResults ? (
-                <ResultsMemo
-                  aria-label={intl.formatMessage({
-                    defaultMessage: "Results",
-                  })}
-                  results={results}
-                  onAction={onAction}
-                  renderEmptyState={true}
-                />
-              ) : null}
-              {showHistory ? (
-                <ResultsMemo
-                  aria-label={intl.formatMessage({
-                    defaultMessage: "Latest searches",
-                  })}
-                  results={latest}
-                  onAction={onAction}
-                />
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-      </div>
-    </Autocomplete>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/clientModal.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/clientModal.module.css
deleted file mode 100644
index 6c0f5ebc2..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/clientModal.module.css
+++ /dev/null
@@ -1,192 +0,0 @@
-.label {
-  color: var(--Base-Text-Accent);
-  display: block;
-}
-
-.placeholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.searchField {
-  background: var(--Base-Background-Primary-Normal);
-  padding: var(--Space-x1) var(--Space-x15);
-  border-radius: var(--Corner-radius-Medium);
-  border: solid 1px transparent;
-  position: relative;
-}
-
-.searchField:focus-within {
-  border-color: var(--UI-Input-Controls-Border-Focus);
-
-  & label {
-    color: var(--UI-Text-Active);
-  }
-}
-
-.autocomplete {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: var(--Space-x4);
-}
-
-.clearButton {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  background: none;
-  border: 0;
-  color: var(--Text-Heading);
-  padding: var(--Space-x15); /* search field vertical padding */
-  cursor: pointer;
-}
-
-.input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  &::placeholder {
-    color: var(--UI-Text-Placeholder);
-  }
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.results {
-  position: relative;
-}
-
-.menuContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
-
-  & > div {
-    transition: opacity 0.2s 0.2s linear;
-  }
-
-  &.pending > div {
-    opacity: 0.5;
-  }
-}
-
-.trigger {
-  background: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
-  border: solid 1px var(--Border-Intense);
-  border-radius: var(--Corner-radius-Rounded);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-  text-align: left;
-  width: 100%;
-  cursor: pointer;
-
-  & span {
-    display: block;
-  }
-
-  & .icon {
-    background: var(--Base-Button-Primary-Fill-Normal);
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--Corner-radius-Rounded);
-    color: var(--Base-Text-Inverted);
-  }
-}
-
-.modalOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: var(--visual-viewport-height);
-  background: rgba(0, 0, 0, 0.4);
-
-  &[data-entering] {
-    animation: overlay-fade 200ms;
-  }
-
-  &[data-exiting] {
-    animation: overlay-fade 150ms reverse ease-in;
-  }
-}
-
-.modal {
-  --padding-x: 16px; /* Not a design token */
-  --height: 660px; /* Not a design token */
-
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: var(--height);
-  max-height: 95vh;
-  padding: var(--Space-x3) var(--padding-x);
-  background: var(--UI-Input-Controls-Surface-Normal);
-  z-index: 100;
-  border-top-left-radius: var(--Corner-radius-Large);
-  border-top-right-radius: var(--Corner-radius-Large);
-
-  &[data-entering] {
-    animation: modal-anim 200ms;
-  }
-
-  &[data-exiting] {
-    animation: modal-anim 150ms reverse ease-in;
-  }
-}
-
-.dialog {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  height: 100%;
-  gap: var(--Space-x3);
-}
-
-.closeButton {
-  background: transparent;
-  color: var(--UI-Text-High-contrast);
-  border: 0;
-  justify-self: end;
-  padding: 0;
-  cursor: pointer;
-}
-
-@keyframes overlay-fade {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-anim {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx
deleted file mode 100644
index fa02d6a13..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-"use client"
-
-import { cx } from "class-variance-authority"
-import { memo, useTransition } from "react"
-import {
-  Autocomplete,
-  Button as ButtonRAC,
-  Dialog,
-  DialogTrigger,
-  Heading,
-  Input,
-  Label,
-  Modal,
-  ModalOverlay,
-  SearchField,
-} from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { Results } from "../Results"
-
-import styles from "./clientModal.module.css"
-
-import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
-
-const ResultsMemo = memo(Results)
-
-export function ClientModal({
-  results,
-  latest,
-  setFilterString,
-  onAction,
-}: ClientProps) {
-  const intl = useIntl()
-  const [isPending, startTransition] = useTransition()
-
-  const showResults = !!results
-  const showHistory = latest.length > 0 && (!results || results.length === 0)
-
-  return (
-    <DialogTrigger>
-      <ButtonRAC className={styles.trigger}>
-        <span>
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <span className={styles.label}>
-              {intl.formatMessage({
-                defaultMessage: "Where to?",
-              })}
-            </span>
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <span className={styles.placeholder}>
-              {intl.formatMessage({
-                defaultMessage: "Hotels & Destinations",
-              })}
-            </span>
-          </Typography>
-        </span>
-        <span className={styles.icon}>
-          <MaterialIcon icon="search" color="CurrentColor" />
-        </span>
-      </ButtonRAC>
-      <ModalOverlay className={styles.modalOverlay} isDismissable={true}>
-        <Modal className={styles.modal}>
-          <Dialog className={styles.dialog}>
-            <Heading level={2} className="sr-only">
-              {intl.formatMessage({
-                defaultMessage: "Find a location",
-              })}
-            </Heading>
-            <ButtonRAC
-              className={styles.closeButton}
-              slot="close"
-              aria-label={intl.formatMessage({
-                defaultMessage: "Close",
-              })}
-            >
-              <MaterialIcon icon="close" color="CurrentColor" />
-            </ButtonRAC>
-            <Autocomplete>
-              <div className={styles.autocomplete}>
-                <SearchField
-                  autoFocus
-                  className={styles.searchField}
-                  onClear={() => {
-                    startTransition(() => {
-                      setFilterString(null)
-                    })
-                  }}
-                >
-                  {({ state }) => (
-                    <form
-                      onSubmit={(evt) => {
-                        evt.preventDefault()
-                        evt.stopPropagation()
-                      }}
-                    >
-                      <Typography variant="Body/Supporting text (caption)/smBold">
-                        <Label className={styles.label}>
-                          {intl.formatMessage({
-                            defaultMessage: "Where to?",
-                          })}
-                        </Label>
-                      </Typography>
-                      <Typography variant="Body/Paragraph/mdRegular">
-                        <Input
-                          className={styles.input}
-                          placeholder={intl.formatMessage({
-                            defaultMessage: "Hotels & Destinations",
-                          })}
-                          onChange={(evt) => {
-                            startTransition(() => {
-                              if (evt.currentTarget.value) {
-                                setFilterString(evt.currentTarget.value)
-                              } else {
-                                setFilterString(null)
-                              }
-                            })
-                          }}
-                        />
-                      </Typography>
-
-                      {state.value !== "" && (
-                        <Typography variant="Body/Supporting text (caption)/smBold">
-                          <ButtonRAC className={styles.clearButton}>
-                            {intl.formatMessage({
-                              defaultMessage: "Clear",
-                            })}
-                          </ButtonRAC>
-                        </Typography>
-                      )}
-                    </form>
-                  )}
-                </SearchField>
-                <div className={styles.results}>
-                  <div
-                    className={cx({
-                      [styles.menuContainer]: true,
-                      [styles.pending]: isPending,
-                    })}
-                    aria-live="polite"
-                  >
-                    {showResults ? (
-                      <ResultsMemo
-                        aria-label={intl.formatMessage({
-                          defaultMessage: "Results",
-                        })}
-                        results={results}
-                        onAction={onAction}
-                        renderEmptyState={true}
-                      />
-                    ) : null}
-                    {showHistory ? (
-                      <ResultsMemo
-                        aria-label={intl.formatMessage({
-                          defaultMessage: "Latest searches",
-                        })}
-                        results={latest}
-                        onAction={onAction}
-                      />
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-            </Autocomplete>
-          </Dialog>
-        </Modal>
-      </ModalOverlay>
-    </DialogTrigger>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx
deleted file mode 100644
index 49d82f085..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import SkeletonShimmer from "@/components/SkeletonShimmer"
-
-import styles from "./results.module.css"
-
-export function ResultsSkeleton() {
-  const intl = useIntl()
-
-  return (
-    <section className={styles.menu}>
-      <Typography variant="Title/Overline/sm">
-        <header className={styles.sectionHeader}>
-          {intl.formatMessage({
-            defaultMessage: "Loading results",
-          })}
-        </header>
-      </Typography>
-      <div>
-        <div className={styles.item}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="50%" display="inline-block" />
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <div className={styles.itemDescription}>
-              <SkeletonShimmer width="38%" display="inline-block" />
-            </div>
-          </Typography>
-        </div>
-        <div className={styles.item}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="40%" display="inline-block" />
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <div className={styles.itemDescription}>
-              <SkeletonShimmer width="23%" display="inline-block" />
-            </div>
-          </Typography>
-        </div>
-        <div className={styles.item}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="55%" display="inline-block" />
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <div className={styles.itemDescription}>
-              <SkeletonShimmer width="40%" display="inline-block" />
-            </div>
-          </Typography>
-        </div>
-        <div className={styles.item}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="27%" display="inline-block" />
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <div className={styles.itemDescription}>
-              <SkeletonShimmer width="33%" display="inline-block" />
-            </div>
-          </Typography>
-        </div>
-        <div className={styles.item}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="45%" display="inline-block" />
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <div className={styles.itemDescription}>
-              <SkeletonShimmer width="37%" display="inline-block" />
-            </div>
-          </Typography>
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx
deleted file mode 100644
index de5e47794..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client"
-
-import {
-  Collection,
-  Header,
-  ListLayout,
-  Menu,
-  MenuItem,
-  MenuSection,
-  Text,
-  Virtualizer,
-} from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./results.module.css"
-
-import type { ResultsProps } from "@/types/components/destinationOverviewPage/jumpTo/results"
-
-export function Results({
-  "aria-label": ariaLabel,
-  results,
-  onAction,
-  renderEmptyState = false,
-}: ResultsProps) {
-  const intl = useIntl()
-
-  return (
-    <Virtualizer
-      layout={ListLayout}
-      layoutOptions={{
-        estimatedRowHeight: 64,
-        estimatedHeadingHeight: 41,
-      }}
-    >
-      <Menu
-        aria-label={ariaLabel}
-        onAction={onAction}
-        className={styles.menu}
-        items={results}
-        renderEmptyState={() => {
-          if (renderEmptyState) {
-            return (
-              <>
-                <Typography variant="Body/Paragraph/mdBold">
-                  <Header className={styles.noResultsLabel}>
-                    {intl.formatMessage({
-                      defaultMessage: "No results",
-                    })}
-                  </Header>
-                </Typography>
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <span className={styles.noResultsDescription}>
-                    {intl.formatMessage({
-                      defaultMessage:
-                        "We couldn't find a matching location for your search.",
-                    })}
-                  </span>
-                </Typography>
-              </>
-            )
-          }
-
-          return null
-        }}
-      >
-        {(section) => {
-          if (section.id === "actions") {
-            return (
-              <MenuSection key={section.id} className={styles.actionsSection}>
-                <Header className={styles.menuDivider}>
-                  <span className="sr-only">{section.name}</span>
-                </Header>
-                <Collection items={section.children}>
-                  {(item) => (
-                    <MenuItem
-                      key={item.id}
-                      href={item.url}
-                      className={styles.item}
-                      textValue={item.displayName}
-                      // @ts-expect-error: pending https://github.com/adobe/react-spectrum/pull/8035
-                      closeOnSelect={item.closesModal}
-                    >
-                      <>
-                        {item.icon ? item.icon : null}
-                        <Typography variant="Body/Supporting text (caption)/smBold">
-                          <Text slot="label">{item.displayName}</Text>
-                        </Typography>
-                      </>
-                    </MenuItem>
-                  )}
-                </Collection>
-              </MenuSection>
-            )
-          }
-
-          return (
-            <MenuSection key={section.id}>
-              <Typography variant="Title/Overline/sm">
-                <Header className={styles.sectionHeader}>{section.name}</Header>
-              </Typography>
-              <Collection items={section.children}>
-                {(item) => (
-                  <MenuItem
-                    key={item.id}
-                    href={item.url}
-                    className={styles.item}
-                    textValue={item.displayName}
-                  >
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <Text slot="label" className={styles.itemLabel}>
-                        {item.displayName}
-                      </Text>
-                    </Typography>
-                    {item.description ? (
-                      <Typography variant="Body/Paragraph/mdRegular">
-                        <Text
-                          slot="description"
-                          className={styles.itemDescription}
-                        >
-                          {item.description}
-                        </Text>
-                      </Typography>
-                    ) : null}
-                  </MenuItem>
-                )}
-              </Collection>
-            </MenuSection>
-          )
-        }}
-      </Menu>
-    </Virtualizer>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css
deleted file mode 100644
index 8b587d9b3..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css
+++ /dev/null
@@ -1,80 +0,0 @@
-.menu {
-  height: 100%;
-  overflow-y: auto;
-
-  &[data-empty] {
-    height: initial;
-    overflow-y: initial;
-    padding-left: var(--Space-x1);
-  }
-}
-
-.menu ~ .menu {
-  padding-top: var(--Space-x2);
-  border-top: solid 1px var(--Border-Divider-Subtle);
-}
-
-.sectionHeader {
-  color: var(--UI-Text-Placeholder);
-  padding-left: var(--Space-x1);
-  padding-bottom: var(--Space-x05);
-
-  /* Due to Virtualizer we cannot use gap in .menu,
-  instead we use padding-top on each section header */
-  padding-top: var(--Space-x2);
-  /* Except for the first section header */
-  .menu > div > div:first-child & {
-    padding-top: 0;
-  }
-}
-
-.item {
-  display: block;
-  padding: var(--Space-x1);
-  border-radius: var(--Corner-radius-Medium);
-  text-decoration: none;
-
-  &[data-focused],
-  &[data-focus-visible],
-  &[data-selected],
-  &[data-hovered] {
-    background: var(--Base-Surface-Primary-light-Hover-alt);
-  }
-}
-
-.itemLabel {
-  display: block;
-  color: var(--UI-Text-High-contrast);
-}
-
-.itemDescription {
-  color: var(--UI-Text-Placeholder);
-}
-
-.noResultsLabel {
-  color: var(--Text-Default);
-}
-
-.noResultsDescription {
-  color: var(--Text-Tertiary);
-}
-
-.menuDivider {
-  padding-top: var(--Space-x2);
-  padding-bottom: var(--Space-x2);
-}
-
-.menuDivider:before {
-  display: block;
-  content: "";
-  height: 1px;
-  background: var(--Border-Divider-Subtle);
-}
-
-.actionsSection .item {
-  display: flex;
-  flex-direction: row;
-  gap: var(--Space-x05);
-  align-items: center;
-  cursor: pointer;
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/client.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/client.module.css
deleted file mode 100644
index f6113d1bc..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/client.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.inline {
-  display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .inline {
-    display: unset;
-  }
-
-  .modal {
-    display: none;
-  }
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx
deleted file mode 100644
index 97d802125..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client"
-
-import { useCallback, useMemo, useState } from "react"
-import { useIntl } from "react-intl"
-import { useIsMounted, useMediaQuery } from "usehooks-ts"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import { isDefined } from "@/server/utils"
-
-import { ClientInline } from "./ClientInline"
-import { ClientModal } from "./ClientModal"
-
-import styles from "./client.module.css"
-
-import type {
-  JumpToData,
-  JumpToProps,
-  LocationMatchResults,
-  ScoringMatch,
-} from "@/types/components/destinationOverviewPage/jumpTo"
-import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
-
-export function JumpToClient<T extends JumpToData>({
-  data,
-  history,
-  onAction,
-  onClearHistory,
-}: JumpToProps<T>) {
-  const intl = useIntl()
-  const isMounted = useIsMounted()
-  const displayInModal = useMediaQuery("(max-width: 767px)")
-
-  const [filterString, setFilterString] = useState<string | null>(null)
-
-  const filter = useCallback(
-    (needle: string): LocationMatchResults => {
-      needle = needle.toLowerCase().trim().replace("scandic ", "")
-
-      // This algorithm ranks the location data set based on a ruleset. Each
-      // match is given a score to rank the results. Different rules give
-      // different scores. The lower the string matching index the higer the
-      // score. All matchings are done with lower case comparison.
-      //
-      // Ruleset, from higest to lower in ranking score:
-      //
-      // 1. Match on name. If no match on name, check cityIdentifier. This
-      // allows for cities that suffer from different spellings to have a change
-      // to get matched and ranked better.
-      //
-      // 2. Match on keywords. Only the highest ranking keyword is considered.
-      // This prevents keyword overloading and evens out the matches.
-      const matchesWithScore = data
-        .map<ScoringMatch | null>((item) => {
-          // Rank all the names and filter out those that don't rank at all
-          const nameScores = item.rankingNames
-            .map((v) => {
-              const index = v.indexOf(needle)
-              const score = index !== -1 ? 1000 - index : 0
-              return score
-            })
-            .filter((score) => score > 0)
-
-          // Calculate the highest ranking name
-          const bestNameScore = nameScores.length ? Math.max(...nameScores) : 0
-
-          // Rank all the keywords and filter out those that don't rank at all
-          const keywordScores = item.rankingKeywords
-            .map((v) => {
-              const index = v.indexOf(needle)
-              const score = index !== -1 ? 500 - index : 0
-              return score
-            })
-            .filter((score) => score > 0)
-
-          // Calculate the highest ranking keyword
-          const bestKeywordScore = keywordScores.length
-            ? Math.max(...keywordScores)
-            : 0
-
-          const totalScore = bestNameScore + bestKeywordScore
-
-          return totalScore > 0
-            ? {
-                id: item.id,
-                displayName: item.displayName,
-                type: item.type,
-                description: item.description,
-                url: item.url,
-                score: totalScore,
-              }
-            : null
-        })
-        .filter(isDefined)
-        .sort((a, b) => {
-          return b.score - a.score
-        })
-
-      if (matchesWithScore.length > 0) {
-        // Map matchesWithScore to build the final results of matches and
-        // remove the score from the output as it is not needed anymore
-        const matches = matchesWithScore
-          .map(({ score, ...item }) => item) // No need for score anymore
-          .reduce<LocationMatchResults>(
-            (acc, item) => {
-              // Do this verbosely because its helps TS understand the data flow better.
-              if (item.type === "cities") {
-                acc[0].children.push(item)
-              } else if (item.type === "hotels") {
-                acc[1].children.push(item)
-              }
-              return acc
-            },
-            [
-              {
-                id: "cities",
-                name: "Cities",
-                children: [],
-              },
-              {
-                id: "hotels",
-                name: "Hotels",
-                children: [],
-              },
-            ]
-          )
-
-        // Hide section that does not have any matches
-        return matches.filter((section) => section.children.length)
-      }
-
-      return []
-    },
-    [data]
-  )
-
-  const latest = useMemo(() => {
-    if (data && history && history.length) {
-      const children = history
-        .map((v) => {
-          return data.find((d) => d.id === v.id && d.type === v.type)
-        })
-        .filter(isDefined)
-        .slice(0, 5) // Only show five items
-
-      const results: LocationMatchResults = [
-        {
-          id: "latestSearches",
-          name: "Latest searches",
-          children: children,
-        },
-        {
-          id: "actions", // The string "Actions" converts into a divider
-          name: "Actions",
-          children: [
-            {
-              id: "clearHistory",
-              type: "clearHistory",
-              closesModal: false,
-              icon: <MaterialIcon icon="delete" color="CurrentColor" />,
-              displayName: intl.formatMessage({
-                defaultMessage: "Clear searches",
-              }),
-            },
-          ],
-        },
-      ]
-
-      return results
-    }
-    return []
-  }, [data, history, intl])
-
-  const results = useMemo(() => {
-    if (filterString) {
-      return filter(filterString)
-    } else {
-      return null
-    }
-  }, [filterString, filter])
-
-  const props: ClientProps = useMemo(() => {
-    return {
-      results,
-      latest,
-      setFilterString,
-      onAction: (key) => {
-        switch (key) {
-          case "clearHistory":
-            onClearHistory()
-            break
-          default:
-            onAction(key)
-        }
-      },
-    }
-  }, [results, latest, setFilterString, onAction, onClearHistory])
-
-  return (
-    <>
-      <div className={styles.modal} hidden={isMounted() && !displayInModal}>
-        <ClientModal {...props} />
-      </div>
-      <div className={styles.inline} hidden={isMounted() && displayInModal}>
-        <ClientInline {...props} />
-      </div>
-    </>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx
deleted file mode 100644
index e948dec98..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import { use } from "react"
-
-import { useSearchHistory } from "@/components/Forms/BookingWidget/FormContent/Search/useSearchHistory"
-
-import { JumpToClient } from "../Client"
-
-import type { JumpToResolverProps } from "@/types/components/destinationOverviewPage/jumpTo/resolver"
-
-export function JumpToResolver({ dataPromise }: JumpToResolverProps) {
-  const data = use(dataPromise)
-
-  const { searchHistory, insertSearchHistoryItem, clearHistory } =
-    useSearchHistory()
-
-  if (!data) {
-    return null
-  }
-
-  return (
-    <JumpToClient
-      data={data}
-      history={searchHistory}
-      onAction={(key) => {
-        const item = data.find((d) => d.id === key)
-        if (!item) {
-          return
-        }
-
-        insertSearchHistoryItem({
-          id: item.id,
-          name: item.displayName,
-          type: item.type,
-          searchTokens: [],
-          destination: item.description,
-        })
-      }}
-      onClearHistory={() => {
-        clearHistory()
-      }}
-    />
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/index.tsx
index 4212d1141..969021017 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/index.tsx
@@ -1,9 +1,63 @@
-import { getJumpToData } from "@/lib/trpc/memoizedRequests"
+"use client"
 
-import { JumpToResolver } from "@/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as Sentry from "@sentry/nextjs"
+import { useRouter } from "next/navigation"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+import { z } from "zod"
 
-export async function JumpTo() {
-  const dataPromise = getJumpToData()
+import { Search } from "@/components/Forms/BookingWidget/FormContent/Search"
+import { toast } from "@/components/TempDesignSystem/Toasts"
 
-  return <JumpToResolver dataPromise={dataPromise} />
+const jumpToSchema = z.object({
+  destinationSearch: z.string().min(1, "Please enter a search term"),
+})
+type JumpToSchema = z.infer<typeof jumpToSchema>
+
+export function JumpTo() {
+  const router = useRouter()
+  const intl = useIntl()
+  const methods = useForm<JumpToSchema>({
+    defaultValues: {
+      destinationSearch: "",
+    },
+    shouldFocusError: false,
+    mode: "onSubmit",
+    resolver: zodResolver(jumpToSchema),
+    reValidateMode: "onSubmit",
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <Search
+        variant="rounded"
+        handlePressEnter={() => {
+          void 0
+        }}
+        inputName={"destinationSearch"}
+        onSelect={(item) => {
+          if (!item.url) {
+            Sentry.captureMessage(
+              "Unable to JumpTo selected location, no URL provided",
+              {
+                extra: { locationName: item.name },
+              }
+            )
+            toast.error(
+              intl.formatMessage(
+                { defaultMessage: "Unable to open page for {locationName}" },
+                { locationName: item.name }
+              )
+            )
+
+            return
+          }
+
+          router.push(item.url)
+        }}
+        withSearchButton
+      />
+    </FormProvider>
+  )
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/jumpTo.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/jumpTo.module.css
new file mode 100644
index 000000000..fbcb5ed95
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/jumpTo.module.css
@@ -0,0 +1,15 @@
+.searchContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+  border-radius: var(--Corner-radius-Rounded);
+  border: 1px solid var(--Border-Default);
+  background: var(--Surface-Primary-Default);
+  padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
+
+  & > * {
+    flex: 1;
+  }
+}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
index 39028f098..5488900f3 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
@@ -4,15 +4,12 @@
   width: 100%;
   height: 610px;
   margin: 0 auto;
-}
 
-@media screen and (min-width: 768px) {
-  .mapContainer {
+  @media screen and (min-width: 768px) {
     height: 580px;
   }
-}
-@media screen and (min-width: 1367px) {
-  .mapContainer {
+
+  @media screen and (min-width: 1367px) {
     height: 560px;
   }
 }
@@ -38,14 +35,25 @@
   margin: 0 auto;
 }
 
-.jumpToContainer {
-  display: grid;
+.headerContainer {
+  display: flex;
+  flex-direction: column;
   gap: var(--Space-x4);
   padding: var(--Space-x4) var(--Space-x2);
   background: var(--Surface-Secondary-Default);
-}
 
-.heading {
-  color: var(--Text-Interactive-Default);
-  text-align: center;
+  align-items: center;
+
+  .heading {
+    color: var(--Text-Interactive-Default);
+    text-align: center;
+  }
+
+  .jumpToContainer {
+    width: 100%;
+
+    @media screen and (min-width: 768px) {
+      max-width: 800px;
+    }
+  }
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
index 498107cc0..96b11b91b 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
@@ -25,11 +25,13 @@ export default async function DestinationOverviewPage() {
 
   return (
     <>
-      <div className={styles.jumpToContainer}>
+      <div className={styles.headerContainer}>
         <Typography variant="Title/lg">
           <h1 className={styles.heading}>{destinationOverviewPage.heading}</h1>
         </Typography>
-        <JumpTo />
+        <div className={styles.jumpToContainer}>
+          <JumpTo />
+        </div>
       </div>
       <div className={styles.mapContainer}>
         <Suspense fallback={<SkeletonShimmer width="100%" height="100%" />}>
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx
index fea9c7633..ad79b69dc 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx
@@ -47,21 +47,13 @@ export function ListItemSkeleton() {
 
   return (
     <li className={classNames}>
-      <Body
-        color="black"
-        textTransform="bold"
-        style={{ marginBottom: "0.25rem" }}
-      >
+      <div style={{ marginBottom: "0.25rem" }}>
         <SkeletonShimmer width={"200px"} height="18px" display="block" />
-      </Body>
+      </div>
 
-      <Body
-        color="black"
-        textTransform="bold"
-        style={{ marginBottom: "0.25rem" }}
-      >
+      <div>
         <SkeletonShimmer width={"70px"} height="18px" display="block" />
-      </Body>
+      </div>
     </li>
   )
 }
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
index afe44049d..073ab2edf 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
@@ -23,6 +23,7 @@ import styles from "./searchList.module.css"
 import type { SearchListProps } from "@/types/components/search"
 
 export default function SearchList({
+  searchInputName,
   getItemProps,
   getMenuProps,
   handleClearSearchHistory,
@@ -33,14 +34,14 @@ export default function SearchList({
 }: SearchListProps) {
   const lang = useLang()
   const intl = useIntl()
-  const [hasMounted, setHasMounted] = useState(false)
+
   const {
     clearErrors,
     formState: { errors, isSubmitted },
   } = useFormContext()
-  const searchError = errors["search"]
+  const searchError = errors[searchInputName]
 
-  const [debouncedSearch, setDebouncedSearch] = useDebounceValue(search, 250)
+  const [debouncedSearch, setDebouncedSearch] = useDebounceValue(search, 300)
 
   useEffect(() => {
     setDebouncedSearch(search)
@@ -57,14 +58,14 @@ export default function SearchList({
   )
 
   useEffect(() => {
-    clearErrors("search")
-  }, [search, clearErrors])
+    clearErrors(searchInputName)
+  }, [search, clearErrors, searchInputName])
 
   useEffect(() => {
     let timeoutID: ReturnType<typeof setTimeout> | null = null
     if (searchError) {
       timeoutID = setTimeout(() => {
-        clearErrors("search")
+        clearErrors(searchInputName)
         // magic number originates from animation
         // 5000ms delay + 120ms exectuion
       }, 5120)
@@ -75,15 +76,7 @@ export default function SearchList({
         clearTimeout(timeoutID)
       }
     }
-  }, [clearErrors, searchError])
-
-  useEffect(() => {
-    setHasMounted(true)
-  }, [setHasMounted])
-
-  if (!hasMounted) {
-    return null
-  }
+  }, [clearErrors, searchError, searchInputName])
 
   if (searchError && isSubmitted && typeof searchError.message === "string") {
     if (searchError.message === "Required") {
@@ -166,7 +159,7 @@ export default function SearchList({
               "We couldn't find a matching location for your search.",
           })}
         </Body>
-        {searchHistory && (
+        {searchHistory && searchHistory.length > 0 && (
           <>
             <Divider className={styles.noResultsDivider} color="beige" />
             <Footnote
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
index d0fdd07b5..7d7bcbd7a 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -1,13 +1,18 @@
 "use client"
+
+import { cva } from "class-variance-authority"
 import Downshift from "downshift"
 import { type ChangeEvent, type FormEvent } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { type AutoCompleteLocation } from "@/server/routers/autocomplete/schema"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { Input } from "../Input"
 import SearchList from "./SearchList"
@@ -15,15 +20,27 @@ import { useSearchHistory } from "./useSearchHistory"
 
 import styles from "./search.module.css"
 
-import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
-import type { SearchProps } from "@/types/components/search"
+interface SearchProps {
+  className?: string
+  handlePressEnter: () => void
+  inputName: string
+  onSelect?: (selectedItem: AutoCompleteLocation) => void
+  variant?: "rounded" | "default"
+  withSearchButton?: boolean
+  selectOnBlur?: boolean
+}
 
-const SEARCH_TERM_NAME = "search"
-
-export default function Search({ handlePressEnter }: SearchProps) {
-  const { register, setValue } = useFormContext<BookingWidgetSchema>()
+export function Search({
+  handlePressEnter,
+  inputName: SEARCH_TERM_NAME,
+  onSelect,
+  variant,
+  withSearchButton = false,
+  selectOnBlur = false,
+}: SearchProps) {
+  const { register, setValue, setFocus } = useFormContext()
   const intl = useIntl()
-  const searchTerm = useWatch({ name: SEARCH_TERM_NAME })
+  const searchTerm = useWatch({ name: SEARCH_TERM_NAME }) as string
   const { searchHistory, insertSearchHistoryItem, clearHistory } =
     useSearchHistory()
 
@@ -47,6 +64,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
       case "cities":
         setValue("hotel", undefined)
         setValue("city", selectedItem.name)
+
         break
       case "hotels":
         setValue("hotel", +selectedItem.id)
@@ -56,12 +74,21 @@ export default function Search({ handlePressEnter }: SearchProps) {
         console.error("Unhandled type:", selectedItem.type)
         break
     }
+
+    onSelect?.(selectedItem)
   }
 
   function handleClearSearchHistory() {
     clearHistory()
   }
 
+  const searchInputClassName = searchInputVariants({
+    withSearchButton: withSearchButton,
+  })
+  const clearButtonClassName = clearButtonVariants({
+    visible: !!searchTerm?.trim(),
+  })
+
   return (
     <Downshift
       inputValue={searchTerm}
@@ -78,48 +105,95 @@ export default function Search({ handlePressEnter }: SearchProps) {
         highlightedIndex,
         isOpen,
         openMenu,
+        selectHighlightedItem,
       }) => (
-        <div className={styles.container}>
-          <label
-            {...getLabelProps({ htmlFor: SEARCH_TERM_NAME })}
-            className={styles.label}
-          >
-            <Caption
-              type="bold"
-              color={isOpen ? "uiTextActive" : "red"}
-              asChild
+        <div className={searchContainerVariants({ variant })}>
+          <div className={styles.inputContainer}>
+            <label
+              {...getLabelProps({ htmlFor: SEARCH_TERM_NAME })}
+              className={labelVariants({
+                color: !withSearchButton || isOpen ? "red" : "default",
+              })}
             >
-              <span>
-                {intl.formatMessage({
-                  defaultMessage: "Where to?",
-                })}
-              </span>
-            </Caption>
-          </label>
-          <div {...getRootProps({}, { suppressRefError: true })}>
-            <label className={styles.searchInput}>
-              <Input
-                {...getInputProps({
-                  id: SEARCH_TERM_NAME,
-                  onFocus() {
-                    openMenu()
-                  },
-                  placeholder: intl.formatMessage({
-                    defaultMessage: "Hotels & Destinations",
-                  }),
-                  value: searchTerm,
-                  ...register(SEARCH_TERM_NAME, {
-                    onChange: handleOnChange,
-                  }),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !isOpen) {
-                      handlePressEnter()
-                    }
-                  },
-                  type: "search",
-                })}
-              />
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <span>
+                  {intl.formatMessage({ defaultMessage: "Where to?" })}
+                </span>
+              </Typography>
+              <div {...getRootProps({}, { suppressRefError: true })}>
+                <div className={searchInputClassName}>
+                  <Input
+                    {...getInputProps({
+                      id: SEARCH_TERM_NAME,
+                      onFocus() {
+                        openMenu()
+                      },
+                      placeholder: intl.formatMessage({
+                        defaultMessage: "Hotels & Destinations",
+                      }),
+                      value: searchTerm,
+                      ...register(SEARCH_TERM_NAME, {
+                        onChange: handleOnChange,
+                        onBlur: () => {
+                          if (selectOnBlur) {
+                            selectHighlightedItem()
+                          }
+                        },
+                      }),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !isOpen) {
+                          handlePressEnter()
+                        }
+                      },
+                      type: "search",
+                    })}
+                  />
+                </div>
+              </div>
             </label>
+            {withSearchButton && (
+              <div className={styles.searchButtonContainer}>
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <Button
+                    variant="Text"
+                    size="Small"
+                    onPress={() => {
+                      setValue(SEARCH_TERM_NAME, "")
+                    }}
+                    className={clearButtonClassName}
+                  >
+                    {intl.formatMessage({ defaultMessage: "Clear" })}
+                  </Button>
+                </Typography>
+                <Button
+                  className={styles.searchButton}
+                  variant="Primary"
+                  size="Small"
+                  type="submit"
+                  onPress={() => {
+                    if (!searchTerm) {
+                      setFocus(SEARCH_TERM_NAME)
+                      return
+                    }
+
+                    openMenu()
+                    setTimeout(() => {
+                      // This is a workaround to ensure that the menu is open before selecting the highlighted item
+                      // Otherwise there is no highlighted item.
+                      // Would need to keep track of the last highlighted item otherwise
+                      selectHighlightedItem()
+                    }, 0)
+                  }}
+                >
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <>
+                      <MaterialIcon icon="search" color="CurrentColor" />
+                      {intl.formatMessage({ defaultMessage: "Search" })}
+                    </>
+                  </Typography>
+                </Button>
+              </div>
+            )}
           </div>
           <SearchList
             getItemProps={getItemProps}
@@ -129,6 +203,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
             isOpen={isOpen}
             search={searchTerm}
             searchHistory={searchHistory}
+            searchInputName={SEARCH_TERM_NAME}
           />
         </div>
       )}
@@ -141,13 +216,9 @@ export function SearchSkeleton() {
   return (
     <div className={styles.container}>
       <div className={styles.label}>
-        <Caption type="bold" color="red" asChild>
-          <span>
-            {intl.formatMessage({
-              defaultMessage: "Where to?",
-            })}
-          </span>
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <span>{intl.formatMessage({ defaultMessage: "Where to?" })}</span>
+        </Typography>
       </div>
       <div>
         <SkeletonShimmer width={"100%"} display="block" height="16px" />
@@ -155,3 +226,48 @@ export function SearchSkeleton() {
     </div>
   )
 }
+
+const searchContainerVariants = cva(styles.container, {
+  variants: {
+    variant: {
+      default: "",
+      rounded: styles.rounded,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+const searchInputVariants = cva(styles.searchInput, {
+  variants: {
+    withSearchButton: {
+      true: styles.withSearchButton,
+      false: "",
+    },
+  },
+  defaultVariants: {
+    withSearchButton: false,
+  },
+})
+
+const clearButtonVariants = cva(styles.clearButton, {
+  variants: {
+    visible: {
+      true: styles.clearButtonVisible,
+      false: "",
+    },
+  },
+})
+
+const labelVariants = cva(styles.label, {
+  variants: {
+    color: {
+      default: "",
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "default",
+  },
+})
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css
index fe10a1c23..e79a088eb 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css
@@ -6,34 +6,71 @@
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   position: relative;
   height: 60px;
+
+  &.rounded {
+    background-color: var(--Base-Surface-Primary-light-Normal);
+    padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
+    border: 1px solid var(--Border-Intense);
+    border-radius: var(--Corner-radius-Rounded);
+    height: auto;
+  }
+
+  &:hover,
+  &:has(input:active, input:focus, input:focus-within) {
+    background-color: var(--Base-Background-Primary-Normal);
+  }
+
+  &:has(input:active, input:focus, input:focus-within) {
+    border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
+  }
 }
 
-.container:hover,
-.container:has(input:active, input:focus, input:focus-within) {
-  background-color: var(--Base-Background-Primary-Normal);
+.label {
+  flex: 1;
+  &:has(
+      ~ .inputContainer input:active,
+      ~ .inputContainer input:focus,
+      ~ .inputContainer input:focus-within
+    )
+    p {
+    color: var(--UI-Text-Active);
+  }
+
+  &.red {
+    color: var(--Scandic-Brand-Scandic-Red);
+  }
 }
 
-.container:has(input:active, input:focus, input:focus-within) {
-  border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
+.searchButtonContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--Space-x05);
 }
 
-.label:has(
-    ~ .inputContainer input:active,
-    ~ .inputContainer input:focus,
-    ~ .inputContainer input:focus-within
-  )
-  p {
-  color: var(--UI-Text-Active);
+.searchButton {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+  cursor: pointer;
+}
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .searchInput {
-  position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   height: 100%;
-  padding: var(--Spacing-x3) var(--Spacing-x-one-and-half) var(--Spacing-x-half);
+
   align-items: center;
   display: grid;
 
@@ -42,4 +79,21 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  &.withSearchButton {
+    & input[type="search"]::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+}
+
+.clearButton {
+  opacity: 0;
+  transition: opacity 0.1s ease;
+  pointer-events: none;
+
+  &.clearButtonVisible {
+    opacity: 1;
+    pointer-events: all;
+  }
 }
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/useSearchHistory.ts b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/useSearchHistory.ts
index 6af12fa03..5f7b1d971 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/useSearchHistory.ts
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/useSearchHistory.ts
@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import {
   type AutoCompleteLocation,
   autoCompleteLocationSchema,
 } from "@/server/routers/autocomplete/schema"
 
-export const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
+import useLang from "@/hooks/useLang"
+
 export function useSearchHistory() {
   const MAX_HISTORY_LENGTH = 5
+  const KEY = useSearchHistoryKey()
 
-  function getHistoryFromLocalStorage(): AutoCompleteLocation[] {
-    const stringifiedHistory = localStorage.getItem(
-      SEARCH_HISTORY_LOCALSTORAGE_KEY
-    )
+  const getHistoryFromLocalStorage = useCallback((): AutoCompleteLocation[] => {
+    const stringifiedHistory = localStorage.getItem(KEY)
 
     try {
       const parsedHistory = JSON.parse(stringifiedHistory ?? "[]")
@@ -26,14 +26,18 @@ export function useSearchHistory() {
       return existingHistory
     } catch (error) {
       console.error("Failed to parse search history:", error)
-      localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY)
+      localStorage.removeItem(KEY)
 
       return []
     }
-  }
+  }, [KEY])
 
   function updateSearchHistory(newItem: AutoCompleteLocation) {
     const existingHistory = getHistoryFromLocalStorage()
+    if (!autoCompleteLocationSchema.safeParse(newItem).success) {
+      return existingHistory
+    }
+
     const oldSearchHistoryWithoutTheNew = existingHistory.filter(
       (h) => h.type !== newItem.type || h.id !== newItem.id
     )
@@ -42,10 +46,7 @@ export function useSearchHistory() {
       newItem,
       ...oldSearchHistoryWithoutTheNew.slice(0, MAX_HISTORY_LENGTH - 1),
     ]
-    localStorage.setItem(
-      SEARCH_HISTORY_LOCALSTORAGE_KEY,
-      JSON.stringify(updatedSearchHistory)
-    )
+    localStorage.setItem(KEY, JSON.stringify(updatedSearchHistory))
 
     return updatedSearchHistory
   }
@@ -54,17 +55,19 @@ export function useSearchHistory() {
 
   useEffect(() => {
     setSearchHistory(getHistoryFromLocalStorage())
-  }, [])
+  }, [KEY, getHistoryFromLocalStorage])
 
   function clearHistory() {
-    localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY)
+    localStorage.removeItem(KEY)
     setSearchHistory([])
   }
+
   function insertSearchHistoryItem(
     newItem: AutoCompleteLocation
   ): AutoCompleteLocation[] {
     const updatedHistory = updateSearchHistory(newItem)
     setSearchHistory(updatedHistory)
+
     return updatedHistory
   }
 
@@ -74,3 +77,10 @@ export function useSearchHistory() {
     clearHistory,
   }
 }
+
+function useSearchHistoryKey() {
+  const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
+  const lang = useLang()
+
+  return `${SEARCH_HISTORY_LOCALSTORAGE_KEY}-${lang}`.toLowerCase()
+}
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
index 52d84b460..bb0f4fb53 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
@@ -14,7 +14,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { RemoveExtraRooms } from "./BookingCode"
-import Search, { SearchSkeleton } from "./Search"
+import { Search, SearchSkeleton } from "./Search"
 import Voucher, { VoucherSkeleton } from "./Voucher"
 
 import styles from "./formContent.module.css"
@@ -41,7 +41,11 @@ export default function FormContent({
       <div className={styles.input}>
         <div className={styles.inputContainer}>
           <div className={styles.where}>
-            <Search handlePressEnter={onSubmit} />
+            <Search
+              handlePressEnter={onSubmit}
+              selectOnBlur={true}
+              inputName="search"
+            />
           </div>
           <div className={styles.when}>
             <Caption color="red" type="bold">
diff --git a/apps/scandic-web/package.json b/apps/scandic-web/package.json
index f4f7eab67..e5a8c8b7e 100644
--- a/apps/scandic-web/package.json
+++ b/apps/scandic-web/package.json
@@ -77,6 +77,7 @@
     "fast-deep-equal": "^3.1.3",
     "fetch-retry": "^6.0.0",
     "framer-motion": "^11.3.28",
+    "fuse.js": "^7.1.0",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
diff --git a/apps/scandic-web/server/routers/autocomplete/destinations.ts b/apps/scandic-web/server/routers/autocomplete/destinations.ts
index e92e18388..7a116dc9f 100644
--- a/apps/scandic-web/server/routers/autocomplete/destinations.ts
+++ b/apps/scandic-web/server/routers/autocomplete/destinations.ts
@@ -2,13 +2,16 @@ import { z } from "zod"
 
 import { Lang } from "@/constants/languages"
 import { safeProtectedServiceProcedure } from "@/server/trpc"
+import { isDefined } from "@/server/utils"
 
 import { getCacheClient } from "@/services/dataCache"
+import { safeTry } from "@/utils/safeTry"
 
+import { getCityPageUrls } from "../contentstack/destinationCityPage/utils"
+import { getHotelPageUrls } from "../contentstack/hotelPage/utils"
 import { getCitiesByCountry, getCountries, getLocations } from "../hotels/utils"
-import { filterLocationByQuery } from "./util/filterLocationByQuery"
+import { filterAndCategorizeAutoComplete } from "./util/filterAndCategorizeAutoComplete"
 import { mapLocationToAutoCompleteLocation } from "./util/mapLocationToAutoCompleteLocation"
-import { sortAutocompleteLocations } from "./util/sortAutocompleteLocations"
 
 import type { AutoCompleteLocation } from "./schema"
 
@@ -35,10 +38,13 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
   .query(async ({ ctx, input }): Promise<DestinationsAutoCompleteOutput> => {
     const cacheClient = await getCacheClient()
 
+    const lang = input.lang || ctx.lang
     const locations: AutoCompleteLocation[] = await cacheClient.cacheOrGet(
-      `autocomplete:destinations:locations:${input.lang}`,
+      `autocomplete:destinations:locations:${lang}`,
       async () => {
-        const lang = input.lang || ctx.lang
+        const hotelUrlsPromise = safeTry(getHotelPageUrls(lang))
+        const cityUrlsPromise = safeTry(getCityPageUrls(lang))
+
         const countries = await getCountries({
           lang: lang,
           serviceToken: ctx.serviceToken,
@@ -60,16 +66,44 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
           citiesByCountry: citiesByCountry,
         })
 
+        const [hotelUrls, hotelUrlsError] = await hotelUrlsPromise
+        const [cityUrls, cityUrlsError] = await cityUrlsPromise
+
+        if (hotelUrlsError || cityUrlsError || !hotelUrls || !cityUrls) {
+          throw new Error("Unable to fetch location URLs")
+        }
+
         return locations
+          .map((location) => {
+            let url: string | undefined
+
+            if (location.type === "cities") {
+              url = cityUrls.find(
+                (c) =>
+                  c.city &&
+                  location.cityIdentifier &&
+                  c.city === location.cityIdentifier
+              )?.url
+            }
+
+            if (location.type === "hotels") {
+              url = hotelUrls.find(
+                (h) => h.hotelId && location.id && h.hotelId === location.id
+              )?.url
+            }
+
+            return { ...location, url }
+          })
           .map(mapLocationToAutoCompleteLocation)
           .filter(isDefined)
       },
       "1d"
     )
 
-    const filteredLocations = locations.filter((location) =>
-      filterLocationByQuery({ location, query: input.query })
-    )
+    const hits = filterAndCategorizeAutoComplete({
+      locations,
+      query: input.query,
+    })
 
     const selectedHotel = locations.find(
       (location) =>
@@ -81,21 +115,8 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
         location.type === "cities" && location.name === input.selectedCity
     )
 
-    const sortedCities = sortAutocompleteLocations(
-      filteredLocations.filter(isCity),
-      input.query
-    )
-
-    const sortedHotels = sortAutocompleteLocations(
-      filteredLocations.filter(isHotel),
-      input.query
-    )
-
     return {
-      hits: {
-        cities: sortedCities,
-        hotels: sortedHotels,
-      },
+      hits: hits,
       currentSelection: {
         city: isCity(selectedCity) ? selectedCity : null,
         hotel: isHotel(selectedHotel) ? selectedHotel : null,
@@ -114,9 +135,3 @@ function isCity(
 ): location is AutoCompleteLocation & { type: "cities" } {
   return !!location && location.type === "cities"
 }
-
-function isDefined(
-  value: AutoCompleteLocation | null | undefined
-): value is AutoCompleteLocation {
-  return !!value
-}
diff --git a/apps/scandic-web/server/routers/autocomplete/schema.ts b/apps/scandic-web/server/routers/autocomplete/schema.ts
index 679e8b07f..0d5ffa6e6 100644
--- a/apps/scandic-web/server/routers/autocomplete/schema.ts
+++ b/apps/scandic-web/server/routers/autocomplete/schema.ts
@@ -6,5 +6,7 @@ export const autoCompleteLocationSchema = z.object({
   type: z.enum(["cities", "hotels"]),
   searchTokens: z.array(z.string()),
   destination: z.string(),
+  url: z.string().optional(),
 })
+
 export type AutoCompleteLocation = z.infer<typeof autoCompleteLocationSchema>
diff --git a/apps/scandic-web/server/routers/autocomplete/util/filterAndCategorizeAutoComplete.ts b/apps/scandic-web/server/routers/autocomplete/util/filterAndCategorizeAutoComplete.ts
new file mode 100644
index 000000000..a317ee6be
--- /dev/null
+++ b/apps/scandic-web/server/routers/autocomplete/util/filterAndCategorizeAutoComplete.ts
@@ -0,0 +1,44 @@
+import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
+
+import type { AutoCompleteLocation } from "../schema"
+
+export type DestinationsAutoCompleteOutput = {
+  hits: {
+    hotels: AutoCompleteLocation[]
+    cities: AutoCompleteLocation[]
+  }
+  currentSelection: {
+    hotel: (AutoCompleteLocation & { type: "hotels" }) | null
+    city: (AutoCompleteLocation & { type: "cities" }) | null
+  }
+}
+
+export function filterAndCategorizeAutoComplete({
+  locations,
+  query,
+}: {
+  locations: AutoCompleteLocation[]
+  query: string
+}) {
+  const rankedLocations = filterAutoCompleteLocations(locations, query)
+
+  const sortedCities = rankedLocations.filter(isCity)
+  const sortedHotels = rankedLocations.filter(isHotel)
+
+  return {
+    cities: sortedCities,
+    hotels: sortedHotels,
+  }
+}
+
+function isHotel(
+  location: AutoCompleteLocation | null | undefined
+): location is AutoCompleteLocation & { type: "hotels" } {
+  return !!location && location.type === "hotels"
+}
+
+function isCity(
+  location: AutoCompleteLocation | null | undefined
+): location is AutoCompleteLocation & { type: "cities" } {
+  return !!location && location.type === "cities"
+}
diff --git a/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.test.ts b/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.test.ts
new file mode 100644
index 000000000..204f4a84c
--- /dev/null
+++ b/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.test.ts
@@ -0,0 +1,226 @@
+import { describe, expect, it } from "@jest/globals"
+
+import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
+
+import type { DeepPartial } from "@/types/DeepPartial"
+import type { AutoCompleteLocation } from "../schema"
+
+describe("rankAutoCompleteLocations", () => {
+  it("should give no hits when the query does not match", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "NonMatchingQuery"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(0)
+  })
+
+  it("should include items when the query matches parts of name", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+  })
+
+  it("should allow multiple search terms", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Aalborg Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+  })
+
+  it("should rank full word higher than part of word", () => {
+    const locations = [
+      scandicSyvSostre,
+      scandicAlborgOst,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(2)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+    expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
+  })
+
+  it("should ignore items without match", () => {
+    const locations = [
+      scandicSyvSostre,
+      scandicAlborgOst,
+      berlinLodge,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(3)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+    expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
+    expect(ranked.at(2)!.name).toEqual("Scandic Brennemoen")
+  })
+
+  it("should ignore 'scandic' from name and destination when searching", () => {
+    const locations = [scandicAlborgOst, scandicBrennemoen].map((x) => ({
+      ...x,
+      searchTokens: [],
+    })) as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "scandic"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(0)
+  })
+
+  it("should get hits for destination", () => {
+    const locations = [
+      scandicAlborgOst,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Mysen"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
+  })
+
+  it("should get hits for searchTokens", () => {
+    const locations = [
+      scandicAlborgOst,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "tusenfryd"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
+  })
+
+  it("should match when using the wrong aumlaut ö -> ø", () => {
+    const locations = [scandicBodo] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "bodö"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Bodø")
+  })
+})
+
+const scandicAlborgOst: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Aalborg Øst",
+  destination: "Aalborg",
+  searchTokens: [
+    "aalborg",
+    "aalborg øst",
+    "scandic aalborg øst",
+    "aalborg ost",
+    "scandic aalborg ost",
+  ],
+}
+
+const scandicBrennemoen: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Brennemoen",
+  destination: "Mysen",
+  searchTokens: [
+    "mysen",
+    "askim",
+    "indre østfold",
+    "drøbak",
+    "slitu",
+    "morenen",
+    "østfoldbadet",
+    "tusenfryd",
+    "brennemoen",
+    "scandic brennemoen",
+    "indre ostfold",
+    "drobak",
+    "ostfoldbadet",
+  ],
+}
+
+const scandicSyvSostre: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Syv Søstre",
+  destination: "Sandnessjoen",
+  searchTokens: [
+    "syv sostre",
+    "sandnessjoen",
+    "sandnessjøen",
+    "syv søstre",
+    "scandic syv søstre",
+    "scandic syv sostre",
+  ],
+}
+
+const berlinLodge: DeepPartial<AutoCompleteLocation> = {
+  name: "Berlin Lodge",
+  searchTokens: [],
+}
+
+const scandicBodo: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Bodø",
+  destination: "Bodo",
+  searchTokens: [
+    "bodo",
+    "kjerringoy",
+    "bodo i vinden",
+    "visit bodo",
+    "badin",
+    "scandic bodo",
+    "bodø",
+    "stormen",
+    "midnattsol",
+    "hurtigruten",
+    "saltstraumen",
+    "nord universitet",
+    "kjerringøy",
+    "nordlys",
+    "tuvsjyen",
+    "stella polaris",
+    "topptur",
+    "svartisen",
+    "polarsirkelen",
+    "aurora borealis",
+    "bodø i vinden",
+    "visit bodø",
+    "bådin",
+    "norsk luftfartsmuseum",
+    "rib",
+    "scandic bodø",
+  ],
+}
diff --git a/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.ts b/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.ts
new file mode 100644
index 000000000..9686d15d0
--- /dev/null
+++ b/apps/scandic-web/server/routers/autocomplete/util/filterAutoCompleteLocations.ts
@@ -0,0 +1,65 @@
+import Fuse from "fuse.js"
+
+import type { AutoCompleteLocation } from "../schema"
+
+type SearchableAutoCompleteLocation = AutoCompleteLocation & {
+  nameTokens: string[]
+  destinationTokens: string[]
+}
+type SearchableKey = keyof SearchableAutoCompleteLocation
+
+const fuseConfig = new Fuse([] as SearchableAutoCompleteLocation[], {
+  minMatchCharLength: 2,
+  isCaseSensitive: false,
+  ignoreDiacritics: true,
+  includeMatches: true,
+  includeScore: true,
+  threshold: 0.2,
+  keys: [
+    {
+      name: "nameTokens" satisfies SearchableKey,
+      weight: 3,
+    },
+    {
+      name: "destinationTokens" satisfies SearchableKey,
+      weight: 2,
+    },
+    {
+      name: "searchTokens" satisfies SearchableKey,
+      weight: 1,
+    },
+  ],
+})
+
+export function filterAutoCompleteLocations<T extends AutoCompleteLocation>(
+  locations: T[],
+  query: string
+) {
+  const searchable = locations.map((x) => ({
+    ...x,
+    nameTokens: extractTokens(x.name),
+    destinationTokens: extractTokens(x.destination),
+  }))
+  fuseConfig.setCollection(searchable)
+
+  const searchResults = fuseConfig.search(query, { limit: 50 })
+
+  return searchResults.map(
+    (x) =>
+      ({
+        id: x.item.id,
+        name: x.item.name,
+        destination: x.item.destination,
+        searchTokens: x.item.searchTokens,
+        type: x.item.type,
+        url: x.item.url,
+      }) satisfies AutoCompleteLocation
+  )
+}
+
+function extractTokens(value: string): string[] {
+  const cleaned = value?.toLowerCase().replaceAll("scandic", "").trim() ?? ""
+  const output = [...new Set([cleaned, ...cleaned.split(" ")])]
+
+  return output
+}
diff --git a/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.test.ts b/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.test.ts
deleted file mode 100644
index 2dd3450e6..000000000
--- a/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.test.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { describe, expect, it } from "@jest/globals"
-
-import { filterLocationByQuery } from "./filterLocationByQuery"
-
-import type { DeepPartial } from "@/types/DeepPartial"
-import type { AutoCompleteLocation } from "../schema"
-
-describe("filterLocationByQuery", () => {
-  it("should return false if the query is too short", () => {
-    const location: DeepPartial<AutoCompleteLocation> = {
-      searchTokens: ["beach", "luxury"],
-    }
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: " a ",
-      })
-    ).toBe(false)
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "  ",
-      })
-    ).toBe(false)
-  })
-
-  it("should return true if one of the search tokens includes part of a valid query token", () => {
-    const location: DeepPartial<AutoCompleteLocation> = {
-      searchTokens: ["beach", "grand hotel", "stockholm"],
-    }
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "Bea",
-      })
-    ).toBe(true)
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "hotel",
-      })
-    ).toBe(true)
-  })
-
-  it("should return false if none of the search tokens include a valid query token", () => {
-    const location: DeepPartial<AutoCompleteLocation> = {
-      searchTokens: ["beach", "grand hotel", "stockholm"],
-    }
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "xyz",
-      })
-    ).toBe(false)
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "garbage",
-      })
-    ).toBe(false)
-  })
-
-  it("should correctly handle queries with punctuation and extra spaces", () => {
-    const location: DeepPartial<AutoCompleteLocation> = {
-      searchTokens: ["grand hotel", "stockholm"],
-    }
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "  Grand Hotel! ",
-      })
-    ).toBe(true)
-  })
-
-  it("should work with queries containing multiple valid tokens", () => {
-    const location: DeepPartial<AutoCompleteLocation> = {
-      searchTokens: ["beach", "luxury", "grand hotel", "stockholm"],
-    }
-
-    expect(
-      filterLocationByQuery({
-        location: location as AutoCompleteLocation,
-        query: "luxury beach",
-      })
-    ).toBe(true)
-  })
-})
diff --git a/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.ts b/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.ts
deleted file mode 100644
index 931cdb410..000000000
--- a/apps/scandic-web/server/routers/autocomplete/util/filterLocationByQuery.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { AutoCompleteLocation } from "../schema"
-
-export function filterLocationByQuery({
-  location,
-  query,
-}: {
-  location: AutoCompleteLocation
-  query: string
-}) {
-  const queryable = query
-    .trim()
-    .toLowerCase()
-    .replace(/[^A-Za-zÀ-ÖØ-öø-ÿ0-9\s]/g, "") // Only keep alphanumeric characters and it's accents
-    .substring(0, 30)
-    .split(/\s+/)
-    .filter((s) => s.length > 2)
-
-  if (queryable.length === 0) return false
-
-  return location.searchTokens?.some((token) =>
-    queryable.some((q) => token.toLowerCase().includes(q))
-  )
-}
diff --git a/apps/scandic-web/server/routers/autocomplete/util/getSearchTokens.ts b/apps/scandic-web/server/routers/autocomplete/util/getSearchTokens.ts
index 4fa20bd48..426b731b5 100644
--- a/apps/scandic-web/server/routers/autocomplete/util/getSearchTokens.ts
+++ b/apps/scandic-web/server/routers/autocomplete/util/getSearchTokens.ts
@@ -1,3 +1,5 @@
+import { normalizeAumlauts } from "./normalizeAumlauts"
+
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export function getSearchTokens(location: Location) {
@@ -11,25 +13,8 @@ export function getSearchTokens(location: Location) {
     .filter(hasValue)
     .map((x) => x.toLocaleLowerCase())
 
-  const additionalTokens: string[] = []
-
-  tokens.forEach((token) => {
-    const replaced = token
-      .replace(/å/g, "a")
-      .replace(/ä/g, "a")
-      .replace(/ö/g, "o")
-      .replace(/æ/g, "a")
-      .replace(/ø/g, "o")
-      .replace(/é/g, "e")
-      .replace(/ü/g, "u")
-    if (replaced !== token) {
-      additionalTokens.push(replaced)
-    }
-  })
-
-  const allTokens = [...new Set([...tokens, ...additionalTokens])]
-
-  return allTokens
+  const normalizedTokens = normalizeAumlauts(tokens)
+  return normalizedTokens
 }
 
 function hasValue(value: string | null | undefined): value is string {
diff --git a/apps/scandic-web/server/routers/autocomplete/util/mapLocationToAutoCompleteLocation.ts b/apps/scandic-web/server/routers/autocomplete/util/mapLocationToAutoCompleteLocation.ts
index ad77f9c79..2bde410be 100644
--- a/apps/scandic-web/server/routers/autocomplete/util/mapLocationToAutoCompleteLocation.ts
+++ b/apps/scandic-web/server/routers/autocomplete/util/mapLocationToAutoCompleteLocation.ts
@@ -4,7 +4,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 import type { AutoCompleteLocation } from "../schema"
 
 export function mapLocationToAutoCompleteLocation(
-  location: Location | null | undefined
+  location: (Location & { url?: string }) | null | undefined
 ): AutoCompleteLocation | null {
   if (!location) return null
 
@@ -12,6 +12,7 @@ export function mapLocationToAutoCompleteLocation(
     id: location.id,
     name: location.name,
     type: location.type,
+    url: location.url,
     searchTokens: getSearchTokens(location),
     destination:
       location.type === "hotels"
diff --git a/apps/scandic-web/server/routers/autocomplete/util/normalizeAumlauts.ts b/apps/scandic-web/server/routers/autocomplete/util/normalizeAumlauts.ts
new file mode 100644
index 000000000..5439be930
--- /dev/null
+++ b/apps/scandic-web/server/routers/autocomplete/util/normalizeAumlauts.ts
@@ -0,0 +1,22 @@
+export function normalizeAumlauts(terms: string[]): string[] {
+  const additionalTerms: string[] = []
+
+  terms.forEach((token) => {
+    if (!token) return
+
+    const replaced = token
+      .replace(/å/g, "a")
+      .replace(/ä/g, "a")
+      .replace(/ö/g, "o")
+      .replace(/ø/g, "o")
+      .replace(/æ/g, "a")
+      .replace(/é/g, "e")
+      .replace(/ü/g, "u")
+
+    if (replaced !== token) {
+      additionalTerms.push(replaced)
+    }
+  })
+
+  return [...new Set([...additionalTerms, ...terms])]
+}
diff --git a/apps/scandic-web/server/routers/autocomplete/util/sortAutoCompleteLocations.test.ts b/apps/scandic-web/server/routers/autocomplete/util/sortAutoCompleteLocations.test.ts
deleted file mode 100644
index 77695cb91..000000000
--- a/apps/scandic-web/server/routers/autocomplete/util/sortAutoCompleteLocations.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { describe, expect, it } from "@jest/globals"
-
-import { sortAutocompleteLocations } from "./sortAutocompleteLocations"
-
-import type { DeepPartial } from "@/types/DeepPartial"
-import type { AutoCompleteLocation } from "../schema"
-
-describe("sortAutocompleteLocations", () => {
-  it("should put locations with names starting with the query at the top", () => {
-    const locations: DeepPartial<AutoCompleteLocation>[] = [
-      { name: "Paris Hotel" },
-      { name: "London Inn" },
-      { name: "paradise Resort" },
-      { name: "Berlin Lodge" },
-    ]
-    const query = "par"
-
-    const sorted = sortAutocompleteLocations(
-      locations as AutoCompleteLocation[],
-      query
-    )
-
-    expect(sorted.map((loc) => loc.name)).toEqual([
-      "paradise Resort",
-      "Paris Hotel",
-      "Berlin Lodge",
-      "London Inn",
-    ])
-  })
-
-  it("should sort locations alphabetically if both start with the query", () => {
-    const locations: DeepPartial<AutoCompleteLocation>[] = [
-      { name: "Alpha Place" },
-      { name: "alphabet City" },
-    ]
-    const query = "al"
-    const sorted = sortAutocompleteLocations(
-      locations as AutoCompleteLocation[],
-      query
-    )
-
-    expect(sorted.map((loc) => loc.name)).toEqual([
-      "Alpha Place",
-      "alphabet City",
-    ])
-  })
-
-  it("should sort locations alphabetically if neither name starts with the query", () => {
-    const locations: DeepPartial<AutoCompleteLocation>[] = [
-      { name: "Zenith" },
-      { name: "apple orchard" },
-      { name: "Mountain Retreat" },
-    ]
-    const query = "xyz"
-    const sorted = sortAutocompleteLocations(
-      locations as AutoCompleteLocation[],
-      query
-    )
-
-    expect(sorted.map((loc) => loc.name)).toEqual([
-      "apple orchard",
-      "Mountain Retreat",
-      "Zenith",
-    ])
-  })
-
-  it("should handle an empty query by sorting alphabetically", () => {
-    const locations: DeepPartial<AutoCompleteLocation>[] = [
-      { name: "Delta" },
-      { name: "Alpha" },
-      { name: "Charlie" },
-      { name: "Bravo" },
-    ]
-    const query = ""
-    const sorted = sortAutocompleteLocations(
-      locations as AutoCompleteLocation[],
-      query
-    )
-
-    expect(sorted.map((loc) => loc.name)).toEqual([
-      "Alpha",
-      "Bravo",
-      "Charlie",
-      "Delta",
-    ])
-  })
-
-  it("should be case-insensitive when sorting names", () => {
-    const locations: DeepPartial<AutoCompleteLocation>[] = [
-      { name: "Mountain Cabin" },
-      { name: "Beachside Villa" },
-      { name: "beach House" },
-    ]
-    const query = "beach"
-    const sorted = sortAutocompleteLocations(
-      locations as AutoCompleteLocation[],
-      query
-    )
-
-    expect(sorted.map((x) => x.name)).toEqual([
-      "beach House",
-      "Beachside Villa",
-      "Mountain Cabin",
-    ])
-  })
-})
diff --git a/apps/scandic-web/server/routers/autocomplete/util/sortAutocompleteLocations.ts b/apps/scandic-web/server/routers/autocomplete/util/sortAutocompleteLocations.ts
deleted file mode 100644
index de973f0cb..000000000
--- a/apps/scandic-web/server/routers/autocomplete/util/sortAutocompleteLocations.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { AutoCompleteLocation } from "../schema"
-
-export function sortAutocompleteLocations<T extends AutoCompleteLocation>(
-  locations: T[],
-  query: string
-) {
-  return locations.toSorted((a, b) => {
-    const queryLower = query.toLowerCase()
-    const aStarts = a.name.toLowerCase().startsWith(queryLower)
-    const bStarts = b.name.toLowerCase().startsWith(queryLower)
-
-    if (aStarts && !bStarts) return -1
-    if (!aStarts && bStarts) return 1
-
-    return a.name.localeCompare(b.name)
-  })
-}
diff --git a/apps/scandic-web/types/components/search.ts b/apps/scandic-web/types/components/search.ts
index 22afc04a8..36d64b1d6 100644
--- a/apps/scandic-web/types/components/search.ts
+++ b/apps/scandic-web/types/components/search.ts
@@ -21,6 +21,7 @@ export interface SearchListProps {
   isOpen: boolean
   handleClearSearchHistory: () => void
   highlightedIndex: HighlightedIndex
+  searchInputName: string
   search: string
   searchHistory: AutoCompleteLocation[] | null
 }
diff --git a/yarn.lock b/yarn.lock
index 8be80b4fc..512a269cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6430,6 +6430,7 @@ __metadata:
     fast-deep-equal: "npm:^3.1.3"
     fetch-retry: "npm:^6.0.0"
     framer-motion: "npm:^11.3.28"
+    fuse.js: "npm:^7.1.0"
     graphql: "npm:^16.8.1"
     graphql-request: "npm:^6.1.0"
     graphql-tag: "npm:^2.12.6"
@@ -13006,6 +13007,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fuse.js@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "fuse.js@npm:7.1.0"
+  checksum: 10c0/c0d1b1d192a4bdf3eade897453ddd28aff96b70bf3e49161a45880f9845ebaee97265595db633776700a5bcf8942223c752754a848d70c508c3c9fd997faad1e
+  languageName: node
+  linkType: hard
+
 "gensync@npm:^1.0.0-beta.2":
   version: 1.0.0-beta.2
   resolution: "gensync@npm:1.0.0-beta.2"