diff --git a/base.scss b/base.scss
index d3e089090..24677307e 100644
--- a/base.scss
+++ b/base.scss
@@ -93,6 +93,8 @@
 @import "./src/stories/Library/Lists/fee-list/fee-list";
 @import "./src/stories/Library/instant-loan/instant-loan";
 @import "./src/stories/Library/scroll-lock-background/scroll-lock-background";
+@import "./src/stories/Library/multiselect/multiselect";
+@import "./src/stories/Library/input-with-dropdown/input-with-dropdown";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -106,6 +108,7 @@
 @import "./src/stories/Blocks/status-loans/status-loans";
 @import "./src/stories/Blocks/status-userprofile/status-userprofile";
 @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
+@import "./src/stories/Blocks/advanced-search/advanced-search";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
diff --git a/public/icons/collection/MinusButton.svg b/public/icons/collection/MinusButton.svg
new file mode 100644
index 000000000..0162c0dee
--- /dev/null
+++ b/public/icons/collection/MinusButton.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9.5" stroke="black"/>
+<path d="M8 13C7.44772 13 7 12.5523 7 12V12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12V12C17 12.5523 16.5523 13 16 13H8Z" fill="black"/>
+</svg>
diff --git a/public/icons/collection/PlusButton.svg b/public/icons/collection/PlusButton.svg
new file mode 100644
index 000000000..f15c46907
--- /dev/null
+++ b/public/icons/collection/PlusButton.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7C11.4477 7 11 7.44772 11 8L11 11H8C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H11L11 16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H13V8C13 7.44772 12.5523 7 12 7Z" fill="white"/>
+</svg>
diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.stories.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.stories.tsx
new file mode 100644
index 000000000..f4f6a6572
--- /dev/null
+++ b/src/stories/Blocks/advanced-search/AdvancedSearch.stories.tsx
@@ -0,0 +1,52 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import {
+  AdvancedSearch as AdvancedSearchComp,
+  AdvancedSearchProps,
+} from "./AdvancedSearch";
+
+export default {
+  title: "Blocks / Advanced Search",
+  component: AdvancedSearchComp,
+  decorators: [withDesign],
+  argTypes: {
+    inputPlaceholder: {
+      name: "Input placeholder",
+      defaultValue: "Søgeterm",
+      control: { type: "text" },
+    },
+    inputAmount: {
+      name: "Amount of input rows",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    cqlPreviewText: {
+      name: "CQL preview text",
+      defaultValue:
+        "title = harry potter AND subtitle = and the philosophers stone",
+      control: { type: "text" },
+    },
+    isCqlSearch: {
+      name: "Is CQL search?",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=9759%3A31313&mode=design&t=G77riF8Vp9iyZ7pP-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof AdvancedSearchComp> = (
+  args: AdvancedSearchProps
+) => <AdvancedSearchComp {...args} />;
+
+export const AdvancedSearch = Template.bind({});
+
+export const CqlSearch = Template.bind({});
+CqlSearch.args = {
+  isCqlSearch: true,
+};
diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
new file mode 100644
index 000000000..408760037
--- /dev/null
+++ b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { InputWithDropdown } from "../../Library/input-with-dropdown/InputWithDropdown";
+import { Multiselect } from "../../Library/multiselect/Multiselect";
+import { Button } from "../../Library/Buttons/button/Button";
+import InputPreview from "../../Library/input-preview/InputPreview";
+import data from "../../Library/card-list-page/CardListPageData";
+import { CardListItem } from "../../Library/card-list-item/CardListItem";
+import ResultPager from "../../Library/card-list-page/ResultPager";
+
+export interface AdvancedSearchProps {
+  inputPlaceholder: string;
+  inputAmount: number;
+  cqlPreviewText: string;
+  isCqlSearch: boolean;
+}
+
+export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
+  inputPlaceholder,
+  inputAmount,
+  cqlPreviewText,
+  isCqlSearch,
+}) => {
+  return (
+    <div className="advanced-search">
+      <h1 className="text-header-h2 advanced-search__title capitalize-first">
+        {isCqlSearch ? "CQL søgning" : "Avanceret søgning"}
+      </h1>
+      {!isCqlSearch && (
+        <>
+          <div className="input-and-preview">
+            <div className="input-and-preview__input">
+              <InputWithDropdown inputPlaceholder={inputPlaceholder} />
+              {Array(inputAmount - 1)
+                .fill(0)
+                .map(() => {
+                  return (
+                    <>
+                      <div className="advanced-search__clauses">
+                        <button className="advanced-search__clause focus-styling">
+                          OG
+                        </button>
+                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                          ELLER
+                        </button>
+                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                          IKKE
+                        </button>
+                      </div>
+                      <InputWithDropdown inputPlaceholder={inputPlaceholder} />
+                    </>
+                  );
+                })}
+              <button className="advanced-search__clauses">
+                <img
+                  className="mr-8"
+                  src="icons/collection/PlusButton.svg"
+                  alt="Plus button icon"
+                />
+                Tilføj ny linje
+              </button>
+            </div>
+            <InputPreview cqlPreviewText={cqlPreviewText} />
+          </div>
+          <section className="advanced-search__filters">
+            {Array(3)
+              .fill(0)
+              .map((item, index) => {
+                return (
+                  <div
+                    className="advanced-search__filter"
+                    key={`${item}${index}`}
+                  >
+                    <Multiselect
+                      options={["Mulighed 1", "Mulighed 2", "Mulighed 3"]}
+                      withCaption
+                      isOpen={index === 0}
+                    />
+                  </div>
+                );
+              })}
+          </section>
+          <InputPreview cqlPreviewText={cqlPreviewText} isMobile />
+        </>
+      )}
+      {isCqlSearch && (
+        <textarea
+          className="advanced-search__cql-input focus-styling__input"
+          cols={100}
+          rows={5}
+          placeholder="e.g. title=snemand*"
+        />
+      )}
+      <footer className="advanced-search__footer">
+        {isCqlSearch && (
+          <button className="link-tag advanced-search__back-button">
+            Til avanceret søgning
+          </button>
+        )}
+        <Button
+          size="xlarge"
+          label="Søg"
+          buttonType="none"
+          variant="filled"
+          collapsible={false}
+          disabled={false}
+          classNames="advanced-search__search-button"
+        />
+      </footer>
+      <div className="advanced-search__divider" />
+      <section>
+        <h2 className="text-header-h2 advanced-search__title capitalize-first">
+          Viser materialer (20)
+        </h2>
+        <button className="link-tag mb-16">Link til søgninget</button>
+        <div className="card-list-page__list my-32">
+          {data.searchResult.map((item, i) => {
+            return <CardListItem {...item} tintIndex={i} />;
+          })}
+        </div>
+        <ResultPager currentResults={10} totalResults={20} />
+      </section>
+    </div>
+  );
+};
+
+export default {};
diff --git a/src/stories/Blocks/advanced-search/advanced-search.scss b/src/stories/Blocks/advanced-search/advanced-search.scss
new file mode 100644
index 000000000..e5c644b26
--- /dev/null
+++ b/src/stories/Blocks/advanced-search/advanced-search.scss
@@ -0,0 +1,152 @@
+.advanced-search {
+  width: 100%;
+  padding: 40px $s-md;
+
+  background-color: $c-global-primary;
+
+  @include breakpoint-m {
+    width: 100%;
+    padding: $s-4xl 157px 64px 157px;
+  }
+
+  &__title {
+    margin-bottom: $s-xl;
+
+    @include breakpoint-m {
+      margin-bottom: 48px;
+    }
+  }
+
+  &__clauses {
+    @extend %text-button-placeholder;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 0 $s-md $s-xl;
+
+    @include breakpoint-m {
+      margin: 0 0 $s-lg $s-xl;
+    }
+  }
+
+  &__clause {
+    display: inline-block;
+    margin-right: $s-xl;
+    color: $c-text-primary-black;
+
+    &.advanced-search__clause--grey {
+      color: $c-global-tertiary-2;
+    }
+  }
+
+  &__filters {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: $s-xl;
+    margin-bottom: 46px;
+  }
+
+  &__filter {
+    width: 100%;
+
+    @include breakpoint-s {
+      width: 260px;
+      margin-right: $s-lg;
+    }
+  }
+
+  &__footer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    @include breakpoint-s {
+      flex-direction: row;
+    }
+  }
+
+  &__back-button {
+    align-self: center;
+    margin-bottom: $s-lg;
+
+    @include breakpoint-s {
+      align-self: center;
+      margin-bottom: 0;
+    }
+  }
+
+  &__search-button {
+    width: 100%;
+
+    @include breakpoint-s {
+      margin-left: $s-lg;
+      width: 266px;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    background-color: $c-global-tertiary-1;
+    margin: $s-2xl 0;
+    width: 100%;
+  }
+
+  &__cql-input {
+    @extend %text-body-medium-regular-placeholder;
+    border: solid 1px $c-global-tertiary-1;
+    width: 100%;
+    margin-bottom: 46px;
+    padding: $s-md;
+    resize: none;
+    background-color: $c-global-primary;
+  }
+}
+
+.input-and-preview {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 64px;
+
+  &__input {
+    width: 100%;
+
+    @include breakpoint-m {
+      padding-right: $s-4xl;
+      margin-bottom: 48px;
+    }
+  }
+
+  &__preview {
+    padding: $s-xl 48px $s-xl 64px;
+    background-color: $c-global-secondary;
+    flex-direction: column;
+    align-self: flex-start;
+    display: none;
+
+    @include breakpoint-m {
+      display: flex;
+      width: 300px;
+      min-width: 300px;
+      padding: $s-2xl $s-xl;
+    }
+    @include breakpoint-l {
+      padding: $s-xl 48px $s-xl 64px;
+      width: 420px;
+      min-width: 420px;
+      display: flex;
+    }
+
+    &--mobile {
+      display: flex;
+      width: 100%;
+      margin-bottom: 48px;
+
+      @include breakpoint-m {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
index 524b00e52..79deea078 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -48,6 +48,11 @@ const Template: ComponentStory<typeof Autosuggest> = (
             src="icons/basic/icon-search.svg"
             alt="search icon"
           />
+          <img
+            className="header__menu-dropdown-icon"
+            src="icons/collection/ExpandMore.svg"
+            alt="expand dropdown icon"
+          />
           <Autosuggest {...args} />
         </div>
       </div>
diff --git a/src/stories/Blocks/header/Header.stories.tsx b/src/stories/Blocks/header/Header.stories.tsx
index 77202f0ce..7253e5ac7 100644
--- a/src/stories/Blocks/header/Header.stories.tsx
+++ b/src/stories/Blocks/header/Header.stories.tsx
@@ -20,6 +20,9 @@ export default {
     inputPlaceholder: {
       defaultValue: "Søg blandt bibliotekets materialer",
     },
+    openDropdown: {
+      defaultValue: false,
+    },
   },
   parameters: {
     design: {
diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index 5e3e181d5..4730582d5 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Logo } from "../../Library/logo/Logo";
 import Pagefold from "../../Library/pagefold/Pagefold";
 
@@ -7,6 +7,7 @@ export type HeaderProps = {
   haveNotification: boolean;
   username: string;
   inputPlaceholder: string;
+  openDropdown: boolean;
 };
 
 const list = [
@@ -33,7 +34,14 @@ const list = [
 ];
 
 export const Header = (props: HeaderProps) => {
-  const { signedIn, haveNotification, username, inputPlaceholder } = props;
+  const {
+    signedIn,
+    haveNotification,
+    username,
+    inputPlaceholder,
+    openDropdown,
+  } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = useState(openDropdown);
 
   useEffect(() => {
     require("./header-toggle");
@@ -124,6 +132,21 @@ export const Header = (props: HeaderProps) => {
                   alt="search icon"
                 />
               </form>
+              <img
+                className="header__menu-dropdown-icon"
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                src="icons/collection/ExpandMore.svg"
+                alt="expand dropdown icon"
+              />
+              {isDropdownOpen && (
+                <div className="header__menu-dropdown">
+                  <ul>
+                    <li className="header__menu-dropdown-item">
+                      Avanceret søgning
+                    </li>
+                  </ul>
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index d5d37d7b3..8c5f30189 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -176,7 +176,44 @@
 
 .header__menu-search-icon {
   position: absolute;
-  right: 24px;
+  right: $s-3xl;
+}
+
+.header__menu-dropdown {
+  @extend %text-body-medium-regular-placeholder;
+  position: absolute;
+  right: 0;
+  top: 58px;
+  background-color: $c-global-primary;
+  padding: $s-xs 0;
+  outline: $c-global-tertiary-1 solid 1px;
+  z-index: 2;
+
+  @include breakpoint-s {
+    padding: $s-sm 0;
+    right: 0;
+    top: 72px;
+  }
+}
+
+.header__menu-dropdown-item {
+  width: 100%;
+  padding: $s-xs $s-2xl;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $c-global-secondary;
+  }
+}
+
+.header__menu-dropdown-item--highlighted {
+  background-color: $c-global-secondary;
+}
+
+.header__menu-dropdown-icon {
+  position: absolute;
+  cursor: pointer;
+  right: $s-lg;
 }
 
 .header__clock {
diff --git a/src/stories/Library/Forms/checkbox/Checkbox.tsx b/src/stories/Library/Forms/checkbox/Checkbox.tsx
index 3d43a00f7..0ba0db973 100644
--- a/src/stories/Library/Forms/checkbox/Checkbox.tsx
+++ b/src/stories/Library/Forms/checkbox/Checkbox.tsx
@@ -9,6 +9,7 @@ export type CheckboxProps = {
   validation?: string;
   callback?: (isChecked: boolean) => void;
   hiddenLabel: boolean;
+  classNames?: string;
 };
 
 export const Checkbox: React.FC<CheckboxProps> = ({
@@ -20,6 +21,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   callback,
   validation,
   hiddenLabel = false,
+  classNames,
 }) => {
   const checkboxId = useRef(`checkbox_id__${Math.random()}`);
   const [checked, setChecked] = useState(isChecked);
@@ -32,7 +34,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   };
 
   return (
-    <div className="checkbox">
+    <div className={`checkbox ${classNames || ""}`}>
       <input
         id={checkboxId.current}
         className="checkbox__input"
diff --git a/src/stories/Library/Icons/icon-collection/icon-collection.json b/src/stories/Library/Icons/icon-collection/icon-collection.json
index 995dcdaa2..07f5d505f 100644
--- a/src/stories/Library/Icons/icon-collection/icon-collection.json
+++ b/src/stories/Library/Icons/icon-collection/icon-collection.json
@@ -1,5 +1,5 @@
 [
-   {
+  {
     "title": "About",
     "fileName": "About.svg"
   },
@@ -290,5 +290,13 @@
   {
     "title": "Volume Off",
     "fileName": "VolumeOff.svg"
+  },
+  {
+    "title": "Minus circle",
+    "fileName": "MinusButton.svg"
+  },
+  {
+    "title": "Plus circle",
+    "fileName": "PlusButton.svg"
   }
 ]
diff --git a/src/stories/Library/dropdown/dropdown.scss b/src/stories/Library/dropdown/dropdown.scss
index a3b571423..0a89d0c09 100644
--- a/src/stories/Library/dropdown/dropdown.scss
+++ b/src/stories/Library/dropdown/dropdown.scss
@@ -33,6 +33,11 @@
   white-space: nowrap;
 
   @extend %text-button-placeholder;
+
+  &:focus {
+    outline: none;
+    border-color: $c-text-primary-black;
+  }
 }
 
 .dropdown__option {
@@ -70,6 +75,13 @@
   min-width: 200px;
 }
 
+.dropdown__select--inline-body-font {
+  @extend %text-body-medium-regular-placeholder;
+  height: 100%;
+  padding: $s-sm $s-3xl $s-sm $s-md;
+  min-width: 200px;
+}
+
 .dropdown__arrows--inline {
   height: 100%;
 }
diff --git a/src/stories/Library/input-preview/InputPreview.tsx b/src/stories/Library/input-preview/InputPreview.tsx
new file mode 100644
index 000000000..83b2d92ae
--- /dev/null
+++ b/src/stories/Library/input-preview/InputPreview.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { Links } from "../links/Links";
+import Pagefold from "../pagefold/Pagefold";
+
+export interface InputPreviewProps {
+  cqlPreviewText: string;
+  isMobile?: boolean;
+}
+
+const InputPreview: React.FC<InputPreviewProps> = ({
+  cqlPreviewText = "placeholder text",
+  isMobile = false,
+}) => {
+  return (
+    <Pagefold
+      size="large"
+      isInheriting
+      isAContainer={false}
+      className={clsx("input-and-preview__preview", {
+        "input-and-preview__preview--mobile": isMobile,
+      })}
+    >
+      <div className="text-body-medium-medium mb-24 capitalize-first">
+        CQL søgestreng
+      </div>
+      <p className="text-body-medium-regular mb-32">{cqlPreviewText}</p>
+      <section>
+        <button className="link-tag mr-16 capitalize-first">Nulstil</button>
+        <button className="link-tag mr-16 capitalize-first">
+          Kopier streng
+          <img
+            className="inline-icon"
+            src="icons/collection/Check.svg"
+            alt=""
+          />
+        </button>
+        <Links href="/" linkText="Rediger CQL" classNames="link-tag" />
+      </section>
+    </Pagefold>
+  );
+};
+
+export default InputPreview;
diff --git a/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx b/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx
new file mode 100644
index 000000000..e24b73e18
--- /dev/null
+++ b/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx
@@ -0,0 +1,42 @@
+import { Dropdown } from "../dropdown/Dropdown";
+
+export interface InputWithDropdownProps {
+  inputPlaceholder: string;
+}
+
+export const InputWithDropdown: React.FC<InputWithDropdownProps> = ({
+  inputPlaceholder,
+}) => {
+  return (
+    <div className="input-with-dropdown">
+      <input
+        className="input-with-dropdown__input focus-styling__input"
+        type="text"
+        placeholder={inputPlaceholder}
+      />
+      <Dropdown
+        ariaLabel="input field dropdown"
+        list={[
+          { title: "Alle indekser" },
+          { title: "Alle indekser" },
+          { title: "Alle indekser" },
+        ]}
+        arrowIcon="chevron"
+        classNames="dropdown--grey-borders input-with-dropdown__dropdown"
+        innerClassNames={{
+          select: "dropdown__select--inline-body-font focus-styling",
+          arrowWrapper: "dropdown__arrows--inline",
+        }}
+      />
+      <button>
+        <img
+          className="input-with-dropdown__icon"
+          src="icons/collection/MinusButton.svg"
+          alt="Minus button icon"
+        />
+      </button>
+    </div>
+  );
+};
+
+export default {};
diff --git a/src/stories/Library/input-with-dropdown/input-with-dropdown.scss b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss
new file mode 100644
index 000000000..2f38d3418
--- /dev/null
+++ b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss
@@ -0,0 +1,53 @@
+.input-with-dropdown {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $s-md;
+  padding-right: 48px;
+
+  @include breakpoint-s {
+    margin-bottom: $s-lg;
+    flex-direction: row;
+    padding-right: 0px;
+    height: 48px;
+  }
+
+  @include breakpoint-m {
+    margin-bottom: $s-lg;
+  }
+
+  &__input {
+    @extend %text-body-small-regular;
+    width: 100%;
+    min-height: 48px;
+    border: 1px solid $c-global-tertiary-1;
+    padding-left: $s-md;
+    background-color: transparent;
+  }
+
+  &__dropdown {
+    width: 100%;
+    height: 48px;
+    min-height: 48px;
+    margin-top: -1px;
+
+    @include breakpoint-s {
+      width: 200px;
+      margin: 0 0 0 -1px;
+    }
+  }
+
+  &__icon {
+    width: 25px;
+    cursor: pointer;
+    position: absolute;
+    top: 12px;
+    right: $s-sm;
+
+    @include breakpoint-s {
+      margin: 0 $s-md $s-lg $s-md;
+      position: relative;
+    }
+  }
+}
diff --git a/src/stories/Library/multiselect/Multiselect.stories.tsx b/src/stories/Library/multiselect/Multiselect.stories.tsx
new file mode 100644
index 000000000..d969d8b60
--- /dev/null
+++ b/src/stories/Library/multiselect/Multiselect.stories.tsx
@@ -0,0 +1,42 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { Multiselect as MultiselectComp } from "./Multiselect";
+
+export default {
+  title: "Library / Dropdown / Multiselect",
+  component: MultiselectComp,
+  decorators: [withDesign],
+  argTypes: {
+    options: {
+      defaultValue: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
+      control: {
+        type: "array",
+      },
+    },
+    isOpen: {
+      defaultValue: true,
+      control: {
+        type: "boolean",
+      },
+    },
+    withCaption: {
+      defaultValue: false,
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=9759%3A31313&mode=design&t=TmGJu5BAOnJAi4UR-1",
+    },
+    layout: "centered",
+  },
+} as ComponentMeta<typeof MultiselectComp>;
+
+const Template: ComponentStory<typeof MultiselectComp> = (args) => (
+  <MultiselectComp {...args} />
+);
+
+export const Multiselect = Template.bind({});
diff --git a/src/stories/Library/multiselect/Multiselect.tsx b/src/stories/Library/multiselect/Multiselect.tsx
new file mode 100644
index 000000000..a0092b3de
--- /dev/null
+++ b/src/stories/Library/multiselect/Multiselect.tsx
@@ -0,0 +1,53 @@
+import { Checkbox } from "../Forms/checkbox/Checkbox";
+
+export type MultiselectProps = {
+  options: string[];
+  isOpen?: boolean;
+  withCaption?: boolean;
+};
+
+export const Multiselect: React.FC<MultiselectProps> = ({
+  options,
+  isOpen = false,
+  withCaption,
+}) => {
+  return (
+    <>
+      {withCaption && (
+        <div className="multiselect__caption">Caption for multiselect</div>
+      )}
+      <div className="multiselect">
+        <div className="multiselect__selected">
+          Mulighed 1, Mulighed 2, Mulighed 3, Mulighed 4
+        </div>
+        <div className="multiselect__opener">
+          <img
+            className="multiselect__icon"
+            src="icons/collection/ExpandMore.svg"
+            alt=""
+          />
+        </div>
+        {isOpen && (
+          <ul className="multiselect__options">
+            {options.map((item, index) => (
+              <li
+                className={`multiselect__option ${
+                  index === 0 ? "multiselect__option--highlighted" : ""
+                }`}
+                key={`${item}${index}`}
+              >
+                {item}
+                <Checkbox
+                  hiddenLabel
+                  isChecked
+                  ariaLabel={`checkbox ${item}`}
+                  classNames="multiselect__checkbox"
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/src/stories/Library/multiselect/multiselect.scss b/src/stories/Library/multiselect/multiselect.scss
new file mode 100644
index 000000000..8bab09bf3
--- /dev/null
+++ b/src/stories/Library/multiselect/multiselect.scss
@@ -0,0 +1,73 @@
+.multiselect {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  border: 1px solid $c-global-tertiary-1;
+
+  &__selected {
+    @extend %text-button-placeholder;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 $s-md;
+    cursor: pointer;
+  }
+
+  &__opener {
+    width: 44px;
+    min-width: 44px;
+    height: 48px;
+    border-left: 1px solid $c-global-tertiary-1;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__icon {
+    margin: auto;
+  }
+
+  &__options {
+    @extend %text-body-medium-regular-placeholder;
+    width: 100%;
+    padding: $s-md 0;
+    position: absolute;
+    top: 47px;
+    background-color: $c-global-primary;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    outline: 1px solid $c-global-tertiary-1;
+  }
+
+  &__option {
+    position: relative;
+    width: 100%;
+    height: 28px;
+    padding: 0 0 0 $s-md;
+    cursor: pointer;
+
+    &.multiselect__option--highlighted {
+      background-color: $c-global-secondary;
+    }
+  }
+
+  &__checkbox {
+    position: absolute;
+    right: $s-sm;
+    top: 0px;
+  }
+
+  &__caption {
+    @extend %text-small-caption;
+    width: 100%;
+    height: $s-lg;
+    margin-bottom: $s-sm;
+    padding-top: $s-xs;
+  }
+}
diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss
index e5561e624..f73b704de 100644
--- a/src/styles/scss/shared.scss
+++ b/src/styles/scss/shared.scss
@@ -81,3 +81,22 @@
     width: 1.25em;
   }
 }
+
+.focus-styling {
+  &:focus {
+    outline: none;
+    border: 1px solid $c-text-primary-black;
+  }
+  &__input {
+    &:focus {
+      outline: none;
+      border: 1px solid $c-text-primary-black;
+      background-color: $c-text-primary-white;
+    }
+  }
+}
+
+.inline-icon {
+  display: inline;
+  margin: 0 0 -5px 5px;
+}