diff --git a/base.scss b/base.scss
index ba740b98f..5c6e9592e 100644
--- a/base.scss
+++ b/base.scss
@@ -153,11 +153,12 @@
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
 @import "./src/stories/Blocks/event-page/event-page";
-@import "./src/stories/Blocks/fee-list/fee-list-page-skeleton.scss";
+@import "./src/stories/Blocks/fee-list/fee-list-page-skeleton";
 @import "./src/stories/Blocks/content-list-page/content-list-page";
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 @import "./src/stories/Blocks/registration-page/registration-page";
+@import "./src/stories/Blocks/webform/webform";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
diff --git a/src/stories/Blocks/advanced-search/advanced-search.scss b/src/stories/Blocks/advanced-search/advanced-search.scss
index bd00de0be..81f04e46c 100644
--- a/src/stories/Blocks/advanced-search/advanced-search.scss
+++ b/src/stories/Blocks/advanced-search/advanced-search.scss
@@ -19,6 +19,7 @@
 
   &__clauses {
     @include typography($typo__button);
+    color: $color__global-grey;
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx b/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx
new file mode 100644
index 000000000..d585eeb15
--- /dev/null
+++ b/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import FavouritesList from "./FavoritesList";
+
+export default {
+  title: "Blocks / Favourite List",
+  component: FavouritesList,
+} as ComponentMeta<typeof FavouritesList>;
+
+const Template: ComponentStory<typeof FavouritesList> = (args) => {
+  return <FavouritesList {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  materialsCount: 3,
+};
+
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  materialsCount: 3,
+  skeletonVersion: true,
+};
diff --git a/src/stories/Blocks/favorites-list/FavoritesList.tsx b/src/stories/Blocks/favorites-list/FavoritesList.tsx
new file mode 100644
index 000000000..5a1528c7f
--- /dev/null
+++ b/src/stories/Blocks/favorites-list/FavoritesList.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { CardListItem } from "../../Library/card-list-item/CardListItem";
+import { CardListItemSkeleton } from "../../Library/card-list-item/CardListItemSkeleton";
+import ResultPager from "../../Library/card-list-page/ResultPager";
+import data from "../../Library/card-list-page/SearchResultPageData";
+
+export interface FavouritesListProps {
+  skeletonVersion?: boolean;
+  materialsCount: number;
+}
+
+const FavouritesList: React.FC<FavouritesListProps> = ({
+  skeletonVersion = false,
+  materialsCount,
+}) => {
+  const pageTitle = (
+    <h1 className="text-header-h2 mb-16 search-result-title">Favourites</h1>
+  );
+
+  const materialsCountLine = materialsCount > 0 && (
+    <p className="text-small-caption my-32">{materialsCount} materials</p>
+  );
+
+  const SkeletonList = () => (
+    <ul className="card-list-page__list my-32">
+      {[...Array(5)].slice(0, materialsCount).map(() => (
+        <li>
+          <CardListItemSkeleton />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const FavouritesListContent = () => (
+    <ul className="card-list-page__list my-32">
+      {data.searchResult.slice(0, materialsCount).map((item, i) => (
+        <li>
+          <CardListItem {...item} heartFill tintIndex={i} />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const EmptyList = () => (
+    <div className="dpl-list-empty mt-24">Your favorites list is empty</div>
+  );
+
+  let content;
+  if (skeletonVersion) {
+    content = <SkeletonList />;
+  } else if (materialsCount > 0) {
+    content = <FavouritesListContent />;
+  } else {
+    content = <EmptyList />;
+  }
+
+  return (
+    <div className="card-list-page">
+      {pageTitle}
+      {materialsCountLine}
+      {content}
+      {!skeletonVersion && (
+        <ResultPager
+          currentResults={materialsCount}
+          totalResults={materialsCount}
+          classNames="result-pager--margin-bottom"
+        />
+      )}
+    </div>
+  );
+};
+
+export default FavouritesList;
diff --git a/src/stories/Blocks/patron-page/ContactInfoSection.tsx b/src/stories/Blocks/patron-page/ContactInfoSection.tsx
new file mode 100644
index 000000000..933341d62
--- /dev/null
+++ b/src/stories/Blocks/patron-page/ContactInfoSection.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import Input from "../../Library/Forms/input/Input";
+import { Checkbox } from "../../Library/Forms/checkbox/Checkbox";
+
+const ContactInfoSection: React.FC = () => {
+  return (
+    <section data-cy="patron-page-contact-info">
+      <h2 className="text-header-h4 mt-64 mb-16">Contact information</h2>
+      <p className="text-body-small-regular mb-32">
+        Patron contact info body text
+      </p>
+      <Input label="Phone number" type="text" id="phone" description="" />
+      <Checkbox
+        label="Receive text messages about your loans, reservations, and so forth"
+        isChecked={false}
+        hiddenLabel={false}
+        classNames="checkbox mt-8 mb-16"
+      />
+      <Input label="E-mail" type="text" id="email" description="" />
+      <Checkbox
+        label="Receive emails about your loans, reservations, and so forth"
+        isChecked={false}
+        hiddenLabel={false}
+        classNames="checkbox mt-8 mb-16"
+      />
+    </section>
+  );
+};
+
+export default ContactInfoSection;
diff --git a/src/stories/Blocks/patron-page/PatronPage.stories.tsx b/src/stories/Blocks/patron-page/PatronPage.stories.tsx
new file mode 100644
index 000000000..2cb4f7684
--- /dev/null
+++ b/src/stories/Blocks/patron-page/PatronPage.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import PatronPage from "./PatronPage";
+
+export default {
+  title: "Blocks / Patron Page",
+  component: PatronPage,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?type=design&node-id=1239-66174&mode=design",
+    },
+    layout: "fullscreen",
+  },
+  argTypes: {
+    skeletonVersion: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+} as ComponentMeta<typeof PatronPage>;
+
+const Template: ComponentStory<typeof PatronPage> = (args) => {
+  return <PatronPage {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  skeletonVersion: true,
+};
diff --git a/src/stories/Blocks/patron-page/PatronPage.tsx b/src/stories/Blocks/patron-page/PatronPage.tsx
new file mode 100644
index 000000000..a13d449f7
--- /dev/null
+++ b/src/stories/Blocks/patron-page/PatronPage.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import PatronInfo from "../../Library/patron-info/PatronInfo";
+import Input from "../../Library/Forms/input/Input";
+import { StatusLoans } from "../status-loans/statusLoans";
+import { Dropdown } from "../../Library/dropdown/Dropdown";
+import { Links } from "../../Library/links/Links";
+import PatronPageSkeleton from "./PatronPageSkeleton";
+import ContactInfoSection from "./ContactInfoSection";
+
+export interface PatronPageProps {
+  skeletonVersion?: boolean;
+}
+
+const PatronPage: React.FC<PatronPageProps> = ({ skeletonVersion = false }) => {
+  if (skeletonVersion) return <PatronPageSkeleton />;
+
+  const statusBarsData = [
+    {
+      title: "Loans per month",
+      statusBars: [
+        { amount: 1, fullAmount: 4, title: "Ebooks", outOf: "out of" },
+        { amount: 2, fullAmount: 10, title: "Audiobooks", outOf: "out of" },
+      ],
+    },
+  ];
+
+  const branches = [
+    {
+      title: "Copenhagen",
+    },
+    {
+      title: "New York",
+    },
+    {
+      title: "The Moon",
+    },
+  ];
+
+  return (
+    <form className="dpl-patron-page">
+      <h1 className="text-header-h1 my-32">Patron profile page</h1>
+      <h2 className="text-header-h4 mt-32 mb-16">Basic details</h2>
+
+      {/* Patron info section */}
+      <PatronInfo
+        name="Professor Utonium"
+        nameLabel="Name"
+        address="The Utonium Residence, 107 Pokey Oaks South, Townsville, USA"
+        addressLabel="Address"
+      />
+
+      <div className="patron-page-info">
+        <ContactInfoSection />
+
+        {/* Digital loans section */}
+        <section className="dpl-status-loans">
+          <StatusLoans
+            statusBarsData={statusBarsData}
+            title="Digital loans (eReolen)"
+            link={{
+              link: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66855",
+              text: "Click here, to see titles always eligible to be loaned",
+            }}
+            bread="There is a number of materials without limitation to amounts of loans per month."
+            reservationsText="You can reserve 4 ebooks and 10 audiobooks"
+          />
+        </section>
+
+        {/* Pickup branch section */}
+        <section>
+          <h2 className="text-header-h4 mt-64 mb-16">Reservations</h2>
+          <p className="text-body-small-regular mb-8">
+            Change pickup body text
+          </p>
+          <label
+            htmlFor="branches-dropdown"
+            className="text-body-medium-medium mt-32 mb-8"
+          >
+            Choose pickup branch
+          </label>
+          <Dropdown
+            list={branches}
+            ariaLabel="branches"
+            arrowIcon="chevron"
+            classNames="dropdown__desktop"
+          />
+        </section>
+
+        {/* Pin code section */}
+        <section>
+          <h2 className="text-header-h4 mt-64 mb-16">Pincode</h2>
+          <p className="text-body-small-regular mb-8">
+            Change current pin by entering a new pin and saving
+          </p>
+          <div className="dpl-pincode-container">
+            <div className="patron__input patron__input--desktop">
+              <Input
+                label="New pin"
+                type="password"
+                id="pincode-input"
+                description=""
+              />
+            </div>
+            <div className="patron__input patron__input--desktop">
+              <Input
+                label="Confirm new pin"
+                type="password"
+                id="pincode-input-2"
+                description=""
+              />
+            </div>
+          </div>
+        </section>
+
+        <button
+          className="mt-48 btn-primary btn-filled btn-small"
+          type="submit"
+        >
+          Save
+        </button>
+
+        {/* Delete profile link */}
+        <div className="text-body-small-regular mt-32">
+          Do you wish to delete your library profile?{" "}
+          <Links
+            href="https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66855"
+            linkText="Delete your profile"
+            classNames="link-tag"
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default PatronPage;
diff --git a/src/stories/Blocks/patron-page/PatronPageSkeleton.tsx b/src/stories/Blocks/patron-page/PatronPageSkeleton.tsx
new file mode 100644
index 000000000..e19a81c77
--- /dev/null
+++ b/src/stories/Blocks/patron-page/PatronPageSkeleton.tsx
@@ -0,0 +1,15 @@
+import PatronInfoSkeleton from "../../Library/patron-info/PatronInfoSkeleton";
+import ContactInfoSection from "./ContactInfoSection";
+
+const PatronPageSkeleton: React.FC = () => {
+  return (
+    <form className="dpl-patron-page">
+      <h1 className="text-header-h1 my-32">Patron profile page</h1>
+      <h2 className="text-header-h4 mt-32 mb-16">Basic details</h2>
+      <PatronInfoSkeleton />
+      <ContactInfoSection />
+    </form>
+  );
+};
+
+export default PatronPageSkeleton;
diff --git a/src/stories/Blocks/status-loans/statusLoans.stories.tsx b/src/stories/Blocks/status-loans/statusLoans.stories.tsx
index e14e7cc49..78ae4b6b9 100644
--- a/src/stories/Blocks/status-loans/statusLoans.stories.tsx
+++ b/src/stories/Blocks/status-loans/statusLoans.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { StatusLoans as StatusLoansComp } from "./statusLoans";
 
 export default {
-  title: "Blocks / Userprofile / Status loans",
+  title: "Blocks / User Profile / Status loans",
   component: StatusLoansComp,
   parameters: {
     design: {
@@ -29,6 +29,9 @@ export default {
       defaultValue:
         "På mange digitale materialer, er der er begrænsning på, hvor mange du kan låne pr. måned. Der findes dog en række materialer uden begrænsning.",
     },
+    reservationsText: {
+      defaultValue: "You can reserve 3 ebooks and 3 audiobooks",
+    },
     link: {
       defaultValue: {
         text: "Se titler du altid kan låne",
diff --git a/src/stories/Blocks/status-loans/statusLoans.tsx b/src/stories/Blocks/status-loans/statusLoans.tsx
index cedcd16a6..375a66781 100644
--- a/src/stories/Blocks/status-loans/statusLoans.tsx
+++ b/src/stories/Blocks/status-loans/statusLoans.tsx
@@ -18,25 +18,35 @@ export type StatusLoansProps = {
   title: string;
   link: LinkProps;
   bread: string;
+  reservationsText: string;
 };
 
 export const StatusLoans = (props: StatusLoansProps) => {
-  const { statusBarsData, title: statusBarsTitle, link, bread } = props;
+  const {
+    statusBarsData,
+    title: statusBarsTitle,
+    link,
+    bread,
+    reservationsText,
+  } = props;
   const { link: url, text: linkText } = link;
 
   return (
     <>
-      <h1 className="text-header-h1 m-8">{statusBarsTitle}</h1>
-      <div className="m-8 text-body-small-regular">
+      <h2 className="text-header-h4 mt-64 mb-16">{statusBarsTitle}</h2>
+      <div className="text-body-small-regular mb-8">
         {`${bread} `}
         <a href={url} className="text-links">
           {linkText}
         </a>
       </div>
-      <div className="dpl-status-loans">
+      <div className="text-body-small-regular mt-8 mb-8">
+        {reservationsText}
+      </div>
+      <div className="dpl-status mt-32">
         {statusBarsData.map(({ statusBars, title }) => (
-          <div className="dpl-status-loans__container m-8">
-            <h2 className="text-header-h2">{title}</h2>
+          <div className="dpl-status-loans__container">
+            <h3 className="text-small-caption">{title}</h3>
             {statusBars.map(
               ({ title: statusBarTitle, amount, fullAmount, outOf }) => (
                 <ProgressBar
diff --git a/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx b/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
index 282a25268..c99b8d4b2 100644
--- a/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
+++ b/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { StatusUserprofile as StatusUserprofileComp } from "./statusUserprofile";
 
 export default {
-  title: "Blocks / Userprofile / Loans and Reservations",
+  title: "Blocks / User Profile / Loans and Reservations",
   component: StatusUserprofileComp,
   parameters: {
     design: {
diff --git a/src/stories/Blocks/webform/Webform.stories.tsx b/src/stories/Blocks/webform/Webform.stories.tsx
new file mode 100644
index 000000000..da9fde54c
--- /dev/null
+++ b/src/stories/Blocks/webform/Webform.stories.tsx
@@ -0,0 +1,40 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import Webform from "./Webform";
+
+export default {
+  title: "Blocks / Webform",
+  component: Webform,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/c40knshyvc1lVmv24qmv9X/DDF---brugeroprettelse-side?type=design&node-id=62%3A606&mode=design&t=nBkRn3CetxXUizOH-1",
+    },
+    layout: "fullscreen",
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      defaultValue: "Webform title",
+    },
+    subtitle: {
+      control: "text",
+      defaultValue:
+        "I am a subtitle and I am here to help you with your form. I can be short, but also sometimes a bit longer, depending on the specific library wishes.",
+    },
+    withoutSubtitle: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+} as ComponentMeta<typeof Webform>;
+
+const Template: ComponentStory<typeof Webform> = (args) => {
+  return <Webform {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const WithoutSubtitle = Template.bind({});
+WithoutSubtitle.args = {
+  withoutSubtitle: true,
+};
diff --git a/src/stories/Blocks/webform/Webform.tsx b/src/stories/Blocks/webform/Webform.tsx
new file mode 100644
index 000000000..4b5359849
--- /dev/null
+++ b/src/stories/Blocks/webform/Webform.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Dropdown } from "../../Library/dropdown/Dropdown";
+import { Button } from "../../Library/Buttons/button/Button";
+
+export interface WebformProps {
+  title: string;
+  subtitle: string;
+  withoutSubtitle?: boolean;
+}
+
+const Webform: React.FC<WebformProps> = ({
+  title,
+  subtitle,
+  withoutSubtitle = false,
+}) => {
+  return (
+    <div className="webform">
+      <div className="webform__header">
+        <h1 className="webform__title">{title}</h1>
+        {!withoutSubtitle && <p className="webform__subtitle">{subtitle}</p>}
+      </div>
+      <section className="paragraph">
+        <div className="paragraphs__item paragraphs__item--webform webform__form">
+          <form className="webform-submission-form">
+            <div className="dpl-input">
+              <label htmlFor="edit-name" className="input-label">
+                Your name
+              </label>
+              <input
+                type="text"
+                id="edit-name"
+                className="form-text required"
+              />
+            </div>
+            <div className="dpl-input">
+              <label htmlFor="edit-email" className="input-label">
+                Your email
+              </label>
+              <input
+                type="text"
+                id="edit-email"
+                className="form-email required"
+              />
+            </div>
+            <div className="dpl-input">
+              <label htmlFor="edit-category" className="input-label">
+                Category
+              </label>
+              <Dropdown
+                ariaLabel="select category"
+                arrowIcon="chevron"
+                innerClassNames={{
+                  select: "dropdown__select--grey",
+                  arrowWrapper: "dropdown__arrows--grey",
+                }}
+                list={[
+                  { title: "Option 1" },
+                  { title: "Option 2" },
+                  { title: "Option 3" },
+                ]}
+              />
+            </div>
+            <div className="dpl-input">
+              <label htmlFor="edit-subject" className="input-label">
+                Subject
+              </label>
+              <input
+                type="text"
+                id="edit-subject"
+                className="form-text required"
+              />
+            </div>
+            <div className="dpl-input">
+              <label htmlFor="edit-message" className="input-label">
+                Message
+              </label>
+              <div>
+                <textarea
+                  id="edit-message"
+                  name="message"
+                  rows={8}
+                  cols={60}
+                  className="form-textarea required"
+                />
+              </div>
+            </div>
+            <Button
+              buttonType="none"
+              label="Send message"
+              size="small"
+              variant="filled"
+              classNames="mt-48 mb-22"
+            />
+            <p className="webform__info-message">
+              BEMÆRK!: Indsæt aldrig CPR-nummer eller følsomme oplysninger i
+              formularen. Læs mere om{" "}
+              <a href="" target="_blank" className="text-links">
+                behandlingen af persondata i vores privatlivspolitik
+              </a>
+            </p>
+          </form>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Webform;
diff --git a/src/stories/Blocks/webform/webform.scss b/src/stories/Blocks/webform/webform.scss
new file mode 100644
index 000000000..7781aa83d
--- /dev/null
+++ b/src/stories/Blocks/webform/webform.scss
@@ -0,0 +1,62 @@
+.webform {
+  max-width: 100%;
+
+  &__header {
+    margin: $s-2xl 0 $s-2xl $s-md;
+
+    @include media-query__small {
+      margin: $s-3xl 0 $s-4xl 160px;
+      max-width: $block-max-width__medium;
+    }
+  }
+
+  &__title {
+    @include typography($typo__h1);
+  }
+
+  &__subtitle {
+    @include typography($typo__subtitle);
+    margin-top: $s-sm;
+
+    @include media-query__small {
+      margin-top: $s-xl;
+    }
+  }
+
+  & .dpl-input {
+    @include typography($typo__body-placeholder);
+    margin-bottom: $s-lg;
+    max-width: 550px;
+
+    &:has(.form-textarea) {
+      max-width: $block-max-width__medium;
+    }
+  }
+
+  &__form {
+    margin: 0 $s-md 0 $s-md;
+
+    @include media-query__small {
+      margin-left: 160px;
+      max-width: $block-max-width__medium;
+    }
+  }
+
+  // Class from the webform Drupal module
+  & .form-textarea {
+    @include typography($typo__body-placeholder);
+    border: solid 1px $color__global-tertiary-1;
+    width: 100%;
+    padding: $s-md;
+    resize: none;
+    background-color: $color__global-primary;
+
+    @extend %default-focus-visible;
+  }
+
+  &__info-message {
+    @include typography($typo__links);
+    color: $color__global-tertiary-2;
+    max-width: 550px;
+  }
+}
diff --git a/src/stories/Library/Buttons/row-button/row-button.scss b/src/stories/Library/Buttons/row-button/row-button.scss
index c89ade0c8..b2ee59a18 100644
--- a/src/stories/Library/Buttons/row-button/row-button.scss
+++ b/src/stories/Library/Buttons/row-button/row-button.scss
@@ -1,6 +1,7 @@
 .row-button {
   height: 40px;
   background-color: $color__global-secondary;
+  color: $color__global-grey;
   padding: 9px $s-md;
   display: flex;
   align-items: center;
diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
index 9da96224f..5c1f3e9f7 100644
--- a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
+++ b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
@@ -34,7 +34,7 @@ Item.args = {
   year: "2001",
   title: "Audrey Hepburn",
   author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
-  statusMessage: "The item cannot be renewed further",
+  statusMessage: "Can't be renewed further",
   isChecked: true,
   disabled: true,
   statusMaterialType: {
diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
index 24d2ac6c2..0b850756d 100644
--- a/src/stories/Library/Lists/list-materials/ListMaterials.tsx
+++ b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
@@ -1,6 +1,7 @@
 import { useState, FC } from "react";
 import { Checkbox } from "../../Forms/checkbox/Checkbox";
 import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
+import { ReactComponent as ArrowSmallRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
 
 export type ListMaterialsProps = {
   title: string;
@@ -42,35 +43,34 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
             <div className="list-materials__content-status">
               <StatusLabel {...statusMaterialType} />
             </div>
+            <div className="status-label status-label--neutral hide-on-desktop ml-16">
+              Afleveres 27-04-2023
+            </div>
             <p className="list-materials__content__header mt-8">{title}</p>
             <p className="text-small-caption">
               {author} ({year})
             </p>
-          </div>
-          <div className="list-materials__status">
-            {statusMessage && (
-              <span className="list-materials__status__note-desktop">
-                {statusMessage}
-              </span>
-            )}
-            <div>
-              <div className="status-label status-label--neutral">
-                Afleveres 27-04-2023
-              </div>
+            <div className="list-materials__status list-materials__status--mobile">
               {statusMessage && (
                 <span className="list-materials__status__note-mobile">
                   {statusMessage}
                 </span>
               )}
-              <button
-                type="button"
-                className="list-reservation__note"
-                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
-              >
-                Go to material details
-              </button>
             </div>
           </div>
+          <div className="list-materials__status list-materials__status--desktop">
+            <div className="status-label status-label--neutral">
+              Afleveres 27-04-2023
+            </div>
+            {statusMessage && (
+              <span className="list-materials__status__note-desktop">
+                {statusMessage}
+              </span>
+            )}
+          </div>
+          <div className="list-materials__arrow arrow-button">
+            <ArrowSmallRight />
+          </div>
         </div>
       </li>
       <li>
@@ -86,26 +86,25 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
           <div className="list-materials__content">
             <div className="list-materials__content-status">
               <div className="status-label status-label--outline">Bog</div>
+              <div className="status-label status-label--neutral hide-on-desktop ml-16">
+                Afleveres 27-04-2023
+              </div>
             </div>
             <p className="list-materials__content__header mt-8">{title}</p>
             <p className="text-small-caption">
               {author} ({year})
             </p>
           </div>
-          <div className="list-materials__status">
+          <div className="list-materials__status list-materials__status--desktop">
             <div>
               <div className="status-label status-label--neutral">
                 Afleveres 27-04-2023
               </div>
-              <button
-                type="button"
-                className="list-reservation__note"
-                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
-              >
-                Go to material details
-              </button>
             </div>
           </div>
+          <div className="list-materials__arrow arrow-button">
+            <ArrowSmallRight />
+          </div>
         </div>
       </li>
     </>
diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss
index 7f13291da..bcd488b4f 100644
--- a/src/stories/Library/Lists/list-materials/list-materials.scss
+++ b/src/stories/Library/Lists/list-materials/list-materials.scss
@@ -62,15 +62,39 @@
 
 .list-materials__status {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   margin-top: 0;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: center;
   grid-gap: $s-md;
 }
 
+.list-materials__status--mobile {
+  @include typography($typo__small-caption);
+  margin-top: $s-md;
+
+  @include media-query__small {
+    display: none;
+  }
+}
+
+.list-materials__status--desktop {
+  @include typography($typo__small-caption);
+  display: none;
+
+  @include media-query__small {
+    display: block;
+    margin-top: $s-sm;
+    max-width: 150px;
+  }
+}
+
 .list-materials__status__note-desktop {
   @include typography($typo__small-caption);
   display: none;
+  margin-top: $s-sm;
+  max-width: 150px;
+
   @include media-query__small {
     display: flex;
   }
@@ -78,6 +102,7 @@
 .list-materials__status__note-mobile {
   @include typography($typo__small-caption);
   display: flex;
+
   @include media-query__small {
     display: none;
   }
diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss
index 9a06c8f89..df581288e 100644
--- a/src/stories/Library/Lists/list-reservation/list-reservation.scss
+++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss
@@ -57,7 +57,6 @@ $list-reservation-space-desktop: 24px;
 
 .list-reservation__note {
   @include typography($typo__small-caption);
-
   // To make it easy to click
   min-height: 20px;
   cursor: pointer;
@@ -79,6 +78,7 @@ $list-reservation-space-desktop: 24px;
 }
 
 .list-reservation__note--mobile {
+  text-align: left;
   @include media-query__small {
     display: none;
   }
@@ -123,6 +123,7 @@ $list-reservation-space-desktop: 24px;
 
 .list-reservation__header {
   @include typography($typo__h4);
+  color: $color__global-black;
   padding: 0;
   cursor: pointer;
 
diff --git a/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss b/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss
index 0a21d0311..28c8bd00f 100644
--- a/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss
+++ b/src/stories/Library/Modals/modal-facet-browser/facet-browser.scss
@@ -17,6 +17,10 @@
     display: flex;
     gap: $s-sm;
     flex-wrap: wrap;
+
+    .tag {
+      color: $color__global-grey;
+    }
   }
 
   &__clear-btn {
diff --git a/src/stories/Library/Modals/modal-find-on-shelf/ModalFindOnShelf.tsx b/src/stories/Library/Modals/modal-find-on-shelf/ModalFindOnShelf.tsx
index c4cee1c84..931722051 100644
--- a/src/stories/Library/Modals/modal-find-on-shelf/ModalFindOnShelf.tsx
+++ b/src/stories/Library/Modals/modal-find-on-shelf/ModalFindOnShelf.tsx
@@ -66,7 +66,7 @@ const ModalFindOnShelf: React.FC<ModalFindOnShelfProps> = ({
             headingLevel="h2"
             withAvailability
             fullWidth
-            headline="Bibliotek fliale navn"
+            headline="Bibliotek filial navn"
             icon="Various"
             key={branchKey}
           >
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
index f3ca826de..e44a241e5 100644
--- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
+++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
@@ -24,7 +24,7 @@ const listExpired: LoanMaterials = [
         title:
           "Den utrolige historie om den kæmpestore pære (eller beretningen om, hvordan Jeronimus Bjergstrøm Severin Olsen blev genindsat i sit retmæssige embede som Solbys borgmester til glæde for alle byens indbyggere på nær én)",
         author: "Af Jakob Martin Strid",
-        statusMessage: "The item cannot be renewed further",
+        statusMessage: "Can't be renewed further",
         isChecked: true,
         disabled: true,
         statusMaterialType: {
@@ -36,7 +36,7 @@ const listExpired: LoanMaterials = [
         year: "2001",
         title: "Audrey Hepburn",
         author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
-        statusMessage: "The item cannot be renewed further",
+        statusMessage: "Can't be renewed further",
         isChecked: true,
         disabled: false,
         statusMaterialType: {
@@ -48,7 +48,7 @@ const listExpired: LoanMaterials = [
         year: "2001",
         title: "Audrey Hepburn",
         author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
-        statusMessage: "The item cannot be renewed further",
+        statusMessage: "Can't be renewed further",
         isChecked: true,
         disabled: true,
         statusMaterialType: {
@@ -60,7 +60,7 @@ const listExpired: LoanMaterials = [
         year: "2001",
         title: "Audrey Hepburn",
         author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
-        statusMessage: "The item cannot be renewed further",
+        statusMessage: "Can't be renewed further",
         isChecked: true,
         disabled: true,
         statusMaterialType: {
@@ -79,7 +79,7 @@ const listExpiresSoon: LoanMaterials = [
         year: "2001",
         title: "Audrey Hepburn",
         author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
-        statusMessage: "The item cannot be renewed further",
+        statusMessage: "Can't be renewed further",
         isChecked: true,
         disabled: true,
         statusMaterialType: {
diff --git a/src/stories/Library/card-list-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss
index 13478330a..0ceb57a2f 100644
--- a/src/stories/Library/card-list-page/facet-line.scss
+++ b/src/stories/Library/card-list-page/facet-line.scss
@@ -1,8 +1,49 @@
+.facet-line {
+  width: 100vw;
+  max-height: $s-xl;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  margin-left: -16px;
+  padding-left: 16px;
+  // Hide scrollbar
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+  }
+
+  @include media-query__small() {
+    width: 100%;
+    margin-left: 0px;
+    padding-left: 0px;
+    overflow-y: visible;
+    max-height: none;
+    flex-wrap: wrap;
+  }
+}
+
 .facet-line-selected-terms__item,
 .facet-line__item {
   display: inline-block;
   margin-right: $s-sm;
-  margin-top: $s-md;
+  margin-top: 0px;
+  white-space: nowrap;
+
+  @include media-query__small() {
+    margin-top: $s-sm;
+  }
+
+  .tag {
+    color: $color__global-grey;
+  }
+}
+
+.facet-line-selected-terms__item {
+  margin-bottom: $s-sm;
 }
 
 .facet-line-selected-terms {
diff --git a/src/stories/Library/dropdown/dropdown.scss b/src/stories/Library/dropdown/dropdown.scss
index 1b5bf79bd..5c6d87c68 100644
--- a/src/stories/Library/dropdown/dropdown.scss
+++ b/src/stories/Library/dropdown/dropdown.scss
@@ -42,6 +42,10 @@ $_dropdown-icon-size: 50px;
 
   // Chromeium based browsers will trigger focus when opening the dropdown
   @extend %default-focus-visible;
+
+  &.dropdown__select--grey {
+    border-color: $color__global-tertiary-1;
+  }
 }
 
 .dropdown__option {
@@ -65,6 +69,10 @@ $_dropdown-icon-size: 50px;
   flex-direction: column;
   border-left: 1px solid;
   border-color: inherit;
+
+  &.dropdown__arrows--grey {
+    border-color: $color__global-tertiary-1;
+  }
 }
 
 .dropdown__arrow--bottom {
diff --git a/src/stories/Library/footer-accordions/footer-accordions.scss b/src/stories/Library/footer-accordions/footer-accordions.scss
index 146b03162..3db43bae9 100644
--- a/src/stories/Library/footer-accordions/footer-accordions.scss
+++ b/src/stories/Library/footer-accordions/footer-accordions.scss
@@ -22,6 +22,7 @@ $footer-content-width: $s-2xl;
 }
 
 .footer-accordion__header-button {
+  color: $color__global-black;
   padding-left: $footer-content-width;
   padding-right: $footer-content-width;
   width: 100%;
diff --git a/src/stories/Library/patron-info/PatronInfo.stories.tsx b/src/stories/Library/patron-info/PatronInfo.stories.tsx
index 5453f565f..e76631936 100644
--- a/src/stories/Library/patron-info/PatronInfo.stories.tsx
+++ b/src/stories/Library/patron-info/PatronInfo.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import PatronInfo from "./PatronInfo";
+import PatronInfoSkeleton from "./PatronInfoSkeleton";
 
 export default {
   title: "Library / User info",
@@ -33,3 +34,9 @@ const Template: ComponentStory<typeof PatronInfo> = (props) => (
 );
 
 export const PatronInfoExample = Template.bind({});
+
+const SkeletonTemplate: ComponentStory<typeof PatronInfoSkeleton> = () => (
+  <PatronInfoSkeleton />
+);
+
+export const PatronInfoSkeletonExample = SkeletonTemplate.bind({});
diff --git a/src/stories/Library/patron-info/PatronInfoSkeleton.tsx b/src/stories/Library/patron-info/PatronInfoSkeleton.tsx
new file mode 100644
index 000000000..cbc06cbf5
--- /dev/null
+++ b/src/stories/Library/patron-info/PatronInfoSkeleton.tsx
@@ -0,0 +1,20 @@
+const PatronInfoSkeleton = () => {
+  return (
+    <div className="dpl-patron-info ssc">
+      <div className="dpl-patron-info__label">
+        <div className="ssc-head-line w-10" />
+      </div>
+      <div className="dpl-patron-info__text">
+        <div className="ssc-head-line w-20 mts" />
+      </div>
+      <div className="dpl-patron-info__label">
+        <div className="ssc-head-line w-10" />
+      </div>
+      <div className="dpl-patron-info__text">
+        <div className="ssc-head-line w-40 mts" />
+      </div>
+    </div>
+  );
+};
+
+export default PatronInfoSkeleton;
diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss
index 7c896e491..8540ab8a0 100644
--- a/src/stories/Library/tag/tag.scss
+++ b/src/stories/Library/tag/tag.scss
@@ -1,4 +1,5 @@
 .tag {
+  color: $color__global-black;
   display: inline-flex;
   justify-content: center;
   align-items: center;