diff --git a/apps/web/components/Organization/SearchBox/SearchBox.tsx b/apps/web/components/Organization/SearchBox/SearchBox.tsx
index 5daaddc68d8a..6b2813da2ae1 100644
--- a/apps/web/components/Organization/SearchBox/SearchBox.tsx
+++ b/apps/web/components/Organization/SearchBox/SearchBox.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
-  AsyncSearchInput,
   Box,
-  Button,
+  AsyncSearch,
   Text,
-  Link,
+  Button,
+  AsyncSearchOption,
 } from '@island.is/island-ui/core'
-import { useQuery } from '@apollo/client'
+import { useLazyQuery } from '@apollo/client'
 import {
   Query,
   QueryGetArticlesArgs,
@@ -15,6 +15,11 @@ import {
 import { GET_ORGANIZATION_SERVICES_QUERY } from '@island.is/web/screens/queries'
 import { LinkType, useLinkResolver } from '@island.is/web/hooks/useLinkResolver'
 import { useRouter } from 'next/router'
+import { useDebounce } from 'react-use'
+
+interface AsyncSearchOptionWithIsArticleField extends AsyncSearchOption {
+  isArticle: boolean
+}
 
 interface SearchBoxProps {
   organizationPage: Query['getOrganizationPage']
@@ -30,135 +35,206 @@ export const SearchBox = ({
   searchAllText,
 }: SearchBoxProps) => {
   const { linkResolver } = useLinkResolver()
-  const Router = useRouter()
+  const router = useRouter()
+
+  const [value, setValue] = useState('')
+  const [options, setOptions] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [waitingForNextPageToLoad, setWaitingForNextPageToLoad] = useState(
+    false,
+  )
 
-  const { data, loading } = useQuery<Query, QueryGetArticlesArgs>(
+  const [fetch, { data, loading }] = useLazyQuery<Query, QueryGetArticlesArgs>(
     GET_ORGANIZATION_SERVICES_QUERY,
-    {
-      variables: {
-        input: {
-          lang: 'is',
-          organization: organizationPage.slug,
-          size: 500,
-          sort: SortField.Popular,
-        },
-      },
-    },
   )
 
-  const items = useMemo(
-    () =>
-      data?.getArticles
-        .map((o) => ({
-          type: 'article',
-          label: o.title,
-          value: o.slug,
-        }))
-        .concat(
-          ...organizationPage.menuLinks.map((x) => [
-            {
-              type: 'url',
-              label: x.primaryLink.text,
-              value: x.primaryLink.url,
+  useDebounce(
+    () => {
+      if (value) {
+        fetch({
+          variables: {
+            input: {
+              lang: router.asPath.includes('/en/') ? 'en' : 'is',
+              organization: organizationPage.slug,
+              size: 500,
+              sort: SortField.Popular,
             },
-            ...x.childrenLinks.map((y) => ({
-              type: 'url',
-              label: y.text,
-              value: y.url,
-            })),
-          ]),
-        ) ?? [],
-    [data],
+          },
+        })
+      }
+      setIsLoading(false)
+    },
+    300,
+    [value],
   )
 
-  const [value, setValue] = useState('')
-  const [options, setOptions] = useState([])
+  const items = data?.getArticles?.map((item, index) => ({
+    label: item.title,
+    value: item.slug,
+    isArticle: true,
+    component: ({ active }) => {
+      return (
+        <Box
+          key={`article-${item.id ?? ''}-${index}`}
+          cursor="pointer"
+          outline="none"
+          paddingX={2}
+          paddingY={1}
+          role="button"
+          background={active ? 'blue100' : 'white'}
+          onClick={() => {
+            setOptions([])
+          }}
+        >
+          <Text as="span">{item.title}</Text>
+        </Box>
+      )
+    },
+  }))
+
+  const clearAll = () => {
+    setIsLoading(false)
+    setOptions([])
+  }
+
+  const handleOptionSelect = (
+    selectedItem: AsyncSearchOptionWithIsArticleField,
+    value: string,
+  ) => {
+    setOptions([])
+    if (!value) return
+    setWaitingForNextPageToLoad(true)
 
-  const [hasFocus, setHasFocus] = useState(false)
+    let pathname: string
+    let searchAll = false
 
-  useEffect(() => {
+    if (selectedItem && selectedItem?.isArticle) {
+      const newValue = selectedItem.value
+      pathname = linkResolver('Article' as LinkType, [newValue]).href
+      setValue(selectedItem.label)
+    } else {
+      pathname = linkResolver('search').href
+      searchAll = true
+    }
+
+    router
+      .push({
+        pathname,
+        query: searchAll ? { q: value } : {},
+      })
+      .then(() => window.scrollTo(0, 0))
+  }
+
+  const updateOptions = () => {
     const newOpts = items
-      .filter(
-        (item) =>
-          value && item.label.toLowerCase().includes(value.toLowerCase()),
-      )
-      .slice(0, 5)
+      ? items
+          .filter(
+            (item) =>
+              value && item.label.toLowerCase().includes(value.toLowerCase()),
+          )
+          .slice(0, 5)
+      : []
 
     if (!value) {
-      setOptions([])
+      clearAll()
     }
 
-    setOptions(newOpts)
-  }, [value])
-
-  const onBlur = () => {
-    setTimeout(() => {
-      setHasFocus(false)
-    }, 100)
-  }
-  return (
-    <Box marginTop={3}>
-      <AsyncSearchInput
-        rootProps={{
-          'aria-controls': '-menu',
-        }}
-        hasFocus={hasFocus}
-        menuProps={{
-          comp: 'div',
-        }}
-        buttonProps={{}}
-        inputProps={{
-          inputSize: 'medium',
-          onFocus: () => setHasFocus(true),
-          onBlur,
-          placeholder,
-          value,
-          onChange: (e) => setValue(e.target.value),
-        }}
-      >
-        {!!value && (
-          <>
-            <Box padding={2} onClick={(e) => e.stopPropagation()}>
-              {options?.map((x) => (
-                <Box paddingY={1}>
-                  <Link
-                    key={x.value}
-                    href={
-                      x.type === 'url'
-                        ? x.value
-                        : linkResolver('Article' as LinkType, [x.value]).href
-                    }
-                    underline="normal"
-                  >
-                    <Text key={x.value} as="span">
-                      {x.label}
-                    </Text>
-                  </Link>
-                </Box>
-              ))}
-              {!options?.length && (
-                <Box paddingY={1}>
-                  <Text as="span">{noResultsText}</Text>
-                </Box>
-              )}
-              <Box paddingY={2}>
+    setOptions(
+      newOpts.length
+        ? newOpts.concat({
+            label: value,
+            value: '',
+            isArticle: false,
+            component: ({ active }) => (
+              <Box
+                padding={2}
+                background={active ? 'blue100' : 'white'}
+                cursor="pointer"
+              >
                 <Button
                   type="button"
                   variant="text"
-                  onClick={() =>
-                    Router.push({
-                      pathname: linkResolver('search').href,
-                      query: { q: value },
-                    })
-                  }
+                  onClick={() => {
+                    setWaitingForNextPageToLoad(true)
+                    router
+                      .push({
+                        pathname: linkResolver('search').href,
+                        query: { q: value },
+                      })
+                      .then(() => window.scrollTo(0, 0))
+                  }}
                 >
                   {searchAllText}
                 </Button>
               </Box>
-            </Box>
-          </>
-        )}
-      </AsyncSearchInput>
+            ),
+          })
+        : [
+            {
+              label: value,
+              value: '',
+              isArticle: false,
+              component: () => (
+                <Box padding={2} disabled>
+                  <Text as="span">{noResultsText}</Text>
+                  <Box cursor="pointer">
+                    <Button
+                      type="button"
+                      variant="text"
+                      onClick={() => {
+                        setWaitingForNextPageToLoad(true)
+                        router
+                          .push({
+                            pathname: linkResolver('search').href,
+                            query: { q: value },
+                          })
+                          .then(() => window.scrollTo(0, 0))
+                      }}
+                    >
+                      {searchAllText}
+                    </Button>
+                  </Box>
+                </Box>
+              ),
+            },
+          ],
+    )
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(updateOptions, [value, loading, data])
+
+  const busy = loading || isLoading || waitingForNextPageToLoad
+
+  return (
+    <Box marginTop={3}>
+      <AsyncSearch
+        size={'medium'}
+        colored={false}
+        key="island-organization"
+        placeholder={placeholder}
+        options={options}
+        loading={busy}
+        initialInputValue={''}
+        inputValue={value}
+        onInputValueChange={(newValue) => {
+          setIsLoading(newValue !== value)
+          setValue(newValue ?? '')
+        }}
+        closeMenuOnSubmit
+        onSubmit={(value, selectedOption) => {
+          handleOptionSelect(
+            selectedOption as AsyncSearchOptionWithIsArticleField,
+            value,
+          )
+        }}
+        onChange={(i, option) => {
+          handleOptionSelect(
+            option.selectedItem as AsyncSearchOptionWithIsArticleField,
+            value,
+          )
+        }}
+      />
     </Box>
   )
 }