diff --git a/.github/workflows/create-release-on-branch-changes.yml b/.github/workflows/create-release-on-branch-changes.yml
index babbeef71..bfbc560b3 100644
--- a/.github/workflows/create-release-on-branch-changes.yml
+++ b/.github/workflows/create-release-on-branch-changes.yml
@@ -41,10 +41,13 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@${{ github.repository_owner }}"
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create NPMRC
+        run: |
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
+          echo "[@${{ github.repository_owner }}]:registry=https://npm.pkg.github.com" >> ~/.npmrc
+          echo "always-auth=true" >> ~/.npmrc
+          echo 'registry "https://registry.yarnpkg.com"' >> ~/.yarnrc
 
       - run: yarn install --frozen-lockfile
 
diff --git a/.github/workflows/create-release-on-tag.yml b/.github/workflows/create-release-on-tag.yml
index c7972a431..1e8d56abb 100644
--- a/.github/workflows/create-release-on-tag.yml
+++ b/.github/workflows/create-release-on-tag.yml
@@ -30,8 +30,13 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@${{ github.repository_owner }}"
+
+      - name: Create NPMRC
+        run: |
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
+          echo "@${{ github.repository_owner }}]:registry=https://npm.pkg.github.com" >> ~/.npmrc
+          echo "always-auth=true" >> ~/.npmrc
+          echo 'registry "https://registry.yarnpkg.com"' >> ~/.yarnrc
 
       - run: yarn install --frozen-lockfile
 
diff --git a/base.scss b/base.scss
index 55e036791..657af1b6a 100644
--- a/base.scss
+++ b/base.scss
@@ -111,6 +111,8 @@
 @import "./src/stories/Library/video-embed/video-embed";
 @import "./src/stories/Library/card-grid/card-grid";
 @import "./src/stories/Library/promo-title/promo-title";
+@import "./src/stories/Library/Modals/group-modal-item-skeleton";
+@import "./src/stories/Library/Lists/list-dashboard/list-dashboard-skeleton";
 @import "./src/stories/Library/recommended-material/recommended-material";
 @import "./src/stories/Library/recommendation/recommendation";
 @import "./src/stories/Library/recommended-material/recommended-material-skeleton";
@@ -147,6 +149,7 @@
 @import "./src/stories/Blocks/event-list-page/event-list-page";
 @import "./src/stories/Blocks/page/page";
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
+@import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
diff --git a/src/public b/src/public
new file mode 120000
index 000000000..27f8dec3b
--- /dev/null
+++ b/src/public
@@ -0,0 +1 @@
+../public
\ No newline at end of file
diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
index 408760037..8d24e19f2 100644
--- a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
+++ b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
@@ -3,9 +3,10 @@ import { InputWithDropdown } from "../../Library/input-with-dropdown/InputWithDr
 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 data from "../../Library/card-list-page/SearchResultPageData";
 import { CardListItem } from "../../Library/card-list-item/CardListItem";
 import ResultPager from "../../Library/card-list-page/ResultPager";
+import { ReactComponent as PlusButtonIcon } from "../../../public/icons/collection/PlusButton.svg";
 
 export interface AdvancedSearchProps {
   inputPlaceholder: string;
@@ -36,13 +37,22 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
                   return (
                     <>
                       <div className="advanced-search__clauses">
-                        <button className="advanced-search__clause focus-styling">
+                        <button
+                          className="advanced-search__clause focus-styling"
+                          aria-label="og"
+                        >
                           OG
                         </button>
-                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                        <button
+                          className="advanced-search__clause advanced-search__clause--grey focus-styling"
+                          aria-label="eller"
+                        >
                           ELLER
                         </button>
-                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                        <button
+                          className="advanced-search__clause advanced-search__clause--grey focus-styling"
+                          aria-label="ikke"
+                        >
                           IKKE
                         </button>
                       </div>
@@ -50,12 +60,11 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
                     </>
                   );
                 })}
-              <button className="advanced-search__clauses">
-                <img
-                  className="mr-8"
-                  src="icons/collection/PlusButton.svg"
-                  alt="Plus button icon"
-                />
+              <button
+                className="advanced-search__clauses"
+                aria-label="tilføj ny linje"
+              >
+                <PlusButtonIcon className="mr-8" />
                 Tilføj ny linje
               </button>
             </div>
@@ -92,7 +101,10 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
       )}
       <footer className="advanced-search__footer">
         {isCqlSearch && (
-          <button className="link-tag advanced-search__back-button">
+          <button
+            className="link-tag advanced-search__back-button"
+            aria-label="til avanceret søgning"
+          >
             Til avanceret søgning
           </button>
         )}
diff --git a/src/stories/Blocks/footer/Footer.tsx b/src/stories/Blocks/footer/Footer.tsx
index 170796adb..41d3b6c42 100644
--- a/src/stories/Blocks/footer/Footer.tsx
+++ b/src/stories/Blocks/footer/Footer.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 import Pagefold from "../../Library/pagefold/Pagefold";
+import { DropdownItem } from "../../Library/dropdown/Dropdown";
 import FooterAccordions from "../../Library/footer-accordions/FooterAccordions";
 import FooterColumns from "../../Library/footer-colums/FooterColumns";
 import FooterInfo, {
@@ -8,7 +9,6 @@ import FooterInfo, {
 } from "../../Library/footer-info/FooterInfo";
 import FooterSeparator from "../../Library/footer-separator/FooterSeparator";
 import FooterWidgets from "../../Library/footer-widgets/FooterWidgets";
-import { DropdownItem } from "../../Library/dropdown/Dropdown";
 import { FooterColumnType } from "../../Library/footer-colums/FooterColumn";
 
 export type FooterType = {
diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index 383499280..21806b098 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -2,7 +2,12 @@ import { useEffect, useState } from "react";
 import Logo from "../../Library/logo/Logo";
 import MenuItemList from "../../Library/header-menu-list/HeaderMenuList";
 import { menuItems } from "../../Library/header-menu-list/HeaderMenuListData";
-
+import { ReactComponent as SearchIcon } from "../../../public/icons/basic/icon-search.svg";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
+import { ReactComponent as MenuIcon } from "../../../public/icons/basic/icon-menu.svg";
+import { ReactComponent as ProfileIcon } from "../../../public/icons/basic/icon-profile.svg";
+import { ReactComponent as HeartIcon } from "../../../public/icons/basic/icon-heart.svg";
+import { ReactComponent as WatchStaticIcon } from "../../../public/icons/basic/icon-watch-static.svg";
 import Pagefold from "../../Library/pagefold/Pagefold";
 import HeaderSidebarNav from "../../Library/header-sidebar-nav/header-sidebar-nav";
 
@@ -62,7 +67,7 @@ export const Header = (props: HeaderProps) => {
                     tabIndex: 0,
                   }}
                 >
-                  <img src="icons/basic/icon-menu.svg" alt="Open menu" />
+                  <MenuIcon />
                 </Pagefold>
                 <div className="header__menu-navigation-logo">
                   <Logo
@@ -79,7 +84,7 @@ export const Header = (props: HeaderProps) => {
                 {signedIn && haveNotification && (
                   <div className="header__notification bg-signal-alert" />
                 )}
-                <img src="icons/basic/icon-profile.svg" alt="Profile" />
+                <ProfileIcon aria-label="go to user profile" />
                 {signedIn && (
                   <span className="text-small-caption">{username}</span>
                 )}
@@ -87,7 +92,7 @@ export const Header = (props: HeaderProps) => {
             </div>
             <div className="header__menu-bookmarked header__button">
               <a href="/">
-                <img src="icons/basic/icon-heart.svg" alt="List of bookmarks" />
+                <HeartIcon aria-label="go to favorites list" />
               </a>
             </div>
           </nav>
@@ -99,17 +104,11 @@ export const Header = (props: HeaderProps) => {
                   type="text"
                   placeholder={inputPlaceholder}
                 />
-                <img
-                  className="header__menu-search-icon"
-                  src="icons/basic/icon-search.svg"
-                  alt="search icon"
-                />
+                <SearchIcon className="header__menu-search-icon" />
               </form>
-              <img
+              <ExpandMoreIcon
                 className="header__menu-dropdown-icon"
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                src="icons/collection/ExpandMore.svg"
-                alt="expand dropdown icon"
               />
               {isDropdownOpen && (
                 <div className="header__menu-dropdown">
@@ -127,11 +126,7 @@ export const Header = (props: HeaderProps) => {
         <div className="header__clock">
           <Pagefold isInheriting={false} isAContainer={false} size="medium" />
           <div className="header__clock-items">
-            <img
-              src="icons/basic/icon-watch-static.svg"
-              className="mb-8"
-              alt="clock icon"
-            />
+            <WatchStaticIcon className="mb-8" />
             <span className="text-small-caption">Fredag</span>
             <span className="text-small-caption">28 Maj</span>
           </div>
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index 7f538da1e..733cd7c8b 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -206,6 +206,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  color: $color__text-primary-black;
 
   @include media-query__small {
     height: 70px;
diff --git a/src/stories/Blocks/loan-page/LoanPage.stories.tsx b/src/stories/Blocks/loan-page/LoanPage.stories.tsx
new file mode 100644
index 000000000..99141dd10
--- /dev/null
+++ b/src/stories/Blocks/loan-page/LoanPage.stories.tsx
@@ -0,0 +1,69 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import LoanPage, { LoanPageProps } from "./LoanPage";
+
+export default {
+  title: "Blocks / Loan Page",
+  component: LoanPage,
+  decorators: [withDesign],
+  argTypes: {
+    headline: {
+      name: "Headline",
+      defaultValue: "Your loans",
+      control: { type: "text" },
+    },
+    isStacked: {
+      name: "Is stacked?",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+    physicalLoans: {
+      name: "Physical loans amount",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    digitalLoans: {
+      name: "Digital loans amount",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    skeletonVersion: {
+      name: "Is skeleton version?",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=8513%3A85522&mode=design&t=Ms5I0A8fq9bNeuSJ-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof LoanPage> = (args: LoanPageProps) => (
+  <LoanPage {...args} />
+);
+
+export const Default = Template.bind({});
+export const Stacked = Template.bind({});
+Stacked.args = {
+  isStacked: true,
+};
+export const NoPhysicalLoans = Template.bind({});
+NoPhysicalLoans.args = {
+  physicalLoans: 0,
+};
+export const NoDigitalLoans = Template.bind({});
+NoDigitalLoans.args = {
+  digitalLoans: 0,
+};
+export const NoLoansAtAll = Template.bind({});
+NoLoansAtAll.args = {
+  physicalLoans: 0,
+  digitalLoans: 0,
+};
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  skeletonVersion: true,
+};
diff --git a/src/stories/Blocks/loan-page/LoanPage.tsx b/src/stories/Blocks/loan-page/LoanPage.tsx
new file mode 100644
index 000000000..1498acc98
--- /dev/null
+++ b/src/stories/Blocks/loan-page/LoanPage.tsx
@@ -0,0 +1,145 @@
+import { Button } from "../../Library/Buttons/button/Button";
+import ResultPager from "../../Library/card-list-page/ResultPager";
+import ReservationListEmptyState from "../reservation-page/ReservationListEmptyState";
+import ReservationListItem from "../reservation-page/ReservationListItem";
+import LoanPageSkeleton from "./LoanPageSkeleton";
+import { ReactComponent as ListIcon } from "../../../public/icons/collection/List.svg";
+import { ReactComponent as VariousIcon } from "../../../public/icons/collection/Various.svg";
+
+export interface LoanPageProps {
+  headline: string;
+  isStacked?: boolean;
+  physicalLoans: number;
+  digitalLoans: number;
+  skeletonVersion?: boolean;
+}
+
+const LoanPage: React.FC<LoanPageProps> = ({
+  headline,
+  isStacked = false,
+  physicalLoans,
+  digitalLoans,
+  skeletonVersion,
+}) => {
+  if (skeletonVersion) {
+    return <LoanPageSkeleton />;
+  }
+
+  if (!physicalLoans && !digitalLoans) {
+    return (
+      <div className="loan-list-page">
+        <h1 className="text-header-h1 my-32">{headline}</h1>
+        <ReservationListEmptyState
+          text="At the moment you have 0 loans"
+          classsNames="mt-64"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="loan-list-page">
+      <h1 className="text-header-h1 my-32">{headline}</h1>
+
+      <div>
+        <div className="dpl-list-buttons m-32">
+          <h2
+            data-cy="reservation-list-header"
+            className="dpl-list-buttons__header"
+          >
+            Physical loans
+            <div className="dpl-list-buttons__power">{physicalLoans}</div>
+          </h2>
+          <div className="dpl-list-buttons__buttons">
+            <div className="dpl-list-buttons__buttons__button">
+              <button
+                aria-pressed={!isStacked}
+                className="dpl-icon-button dpl-icon-button--selected"
+                id="test-list"
+                type="button"
+                aria-label="This button shows all loans in the list"
+              >
+                <ListIcon />
+              </button>
+            </div>
+            <div className="dpl-list-buttons__buttons__button">
+              <button
+                aria-pressed={isStacked}
+                className="dpl-icon-button"
+                type="button"
+                aria-label="This button filters the list, so only one the materials that have the same due date is shown"
+              >
+                <VariousIcon />
+              </button>
+            </div>
+            <div className="dpl-list-buttons__buttons__button">
+              <div className="dpl-list-buttons__buttons__button--hide-on-mobile">
+                <Button
+                  buttonType="none"
+                  label="Renew several"
+                  size="small"
+                  variant="filled"
+                />
+              </div>
+              <div className="hide-on-desktop button-box button-box--sticky-bottom">
+                <Button
+                  buttonType="none"
+                  label="Renew several"
+                  size="small"
+                  variant="filled"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        {!!physicalLoans && (
+          <div>
+            <ul className="list-reservation-container">
+              <li>
+                <ReservationListItem
+                  amount={physicalLoans}
+                  withNote
+                  isStacked={isStacked}
+                />
+              </li>
+            </ul>
+            <ResultPager
+              currentResults={physicalLoans}
+              totalResults={physicalLoans}
+            />
+          </div>
+        )}
+        {!physicalLoans && (
+          <ReservationListEmptyState text="At the moment you have 0 physical loans" />
+        )}
+      </div>
+
+      <div>
+        <div className="dpl-list-buttons m-32">
+          <h2 className="dpl-list-buttons__header">
+            Digital reservations
+            <div className="dpl-list-buttons__power">{digitalLoans}</div>
+          </h2>
+        </div>
+        {!!digitalLoans && (
+          <div>
+            <ul className="list-reservation-container">
+              <li>
+                <ReservationListItem amount={digitalLoans} />
+              </li>
+            </ul>
+            <ResultPager
+              currentResults={digitalLoans}
+              totalResults={digitalLoans + 1}
+            />
+          </div>
+        )}
+        {!digitalLoans && (
+          <ReservationListEmptyState text="At the moment you have 0 digital loans" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LoanPage;
diff --git a/src/stories/Blocks/loan-page/LoanPageSkeleton.tsx b/src/stories/Blocks/loan-page/LoanPageSkeleton.tsx
new file mode 100644
index 000000000..2257f8782
--- /dev/null
+++ b/src/stories/Blocks/loan-page/LoanPageSkeleton.tsx
@@ -0,0 +1,17 @@
+import ReservationListItemSkeleton from "../reservation-page/ReservationListItemSkeleton";
+
+const LoanPageSkeleton: React.FC = () => {
+  return (
+    <section className="loan-list-page ssc">
+      <div className="ssc-head-line w-60 mx-32 my-48" />
+      <div className="ssc-head-line w-10 mx-32 mt-64 mb-35" />
+      <ReservationListItemSkeleton />
+      <ReservationListItemSkeleton />
+      <div className="ssc-head-line w-10 mx-32 mt-80" />
+      <ReservationListItemSkeleton />
+      <ReservationListItemSkeleton />
+    </section>
+  );
+};
+
+export default LoanPageSkeleton;
diff --git a/src/stories/Blocks/loan-page/loan-page-skeleton.scss b/src/stories/Blocks/loan-page/loan-page-skeleton.scss
new file mode 100644
index 000000000..9400f50f1
--- /dev/null
+++ b/src/stories/Blocks/loan-page/loan-page-skeleton.scss
@@ -0,0 +1,13 @@
+// Since we are using the Skeleton Screen Css classes connected to the existing styling
+// we deliberately not follow the BEM naming convention here.
+.loan-list-page {
+  .ssc-square {
+    &.cover--size-small {
+      height: 137px;
+      width: 95px;
+    }
+  }
+  .ssc-circle {
+    height: 92px;
+  }
+}
diff --git a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.tsx b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.tsx
index 056b49f4b..7bea22487 100644
--- a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.tsx
+++ b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.tsx
@@ -5,6 +5,7 @@ import ListDescription, {
   ListData,
 } from "../../Library/Lists/list-description/ListDescription";
 import Cover from "../../Library/cover/Cover";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 
 export type MaterialMainfestationItemProps = {
   title: string;
@@ -51,7 +52,7 @@ export const MaterialMainfestationItem = ({
           }}
         >
           <p className="link-tag text-small-caption">Detaljer om materialet </p>
-          <img src="icons/collection/ExpandMore.svg" alt="ExpandMore" />
+          <ExpandMoreIcon />
         </div>
         {isOpen && <ListDescription className="mt-24" data={detailsData} />}
       </div>
diff --git a/src/stories/Blocks/reservation-page/ReservationListItem.tsx b/src/stories/Blocks/reservation-page/ReservationListItem.tsx
index 753b1cc3e..67f545b34 100644
--- a/src/stories/Blocks/reservation-page/ReservationListItem.tsx
+++ b/src/stories/Blocks/reservation-page/ReservationListItem.tsx
@@ -1,18 +1,28 @@
+import clsx from "clsx";
 import { Counter } from "../../Library/counter/Counter";
 import { ReactComponent as ArrowSmallRight } from "../../Library/Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
 
 export interface ReservationListItemProps {
   amount: number;
+  withNote?: boolean;
+  isStacked?: boolean;
 }
 
 const ReservationListItem: React.FC<ReservationListItemProps> = ({
   amount,
+  withNote = false,
+  isStacked = false,
 }) => {
   const listItems = Array(amount).fill(0);
   return (
     <>
       {listItems.map(() => (
-        <div className="list-reservation my-32 cursor-pointer arrow__hover--right-small">
+        <div
+          className={clsx(
+            "list-reservation my-32 cursor-pointer arrow__hover--right-small",
+            [{ "list-reservation--stacked": isStacked }]
+          )}
+        >
           <div className="list-reservation__material">
             <div>
               <div className="cover cover--size-small cover--aspect-small bg-identity-tint-120" />
@@ -39,33 +49,53 @@ const ReservationListItem: React.FC<ReservationListItemProps> = ({
                 >
                   Jørn Lier Horst (2020)
                 </p>
-                <p
-                  data-cy="reservation-about-series"
-                  className="text-small-caption color-secondary-gray"
-                >
-                  Detektivbureau Nr. 2
-                </p>
+                {!withNote && (
+                  <p
+                    data-cy="reservation-about-series"
+                    className="text-small-caption color-secondary-gray"
+                  >
+                    Detektivbureau Nr. 2
+                  </p>
+                )}
               </div>
+              {withNote && (
+                <div className="list-reservation__note list-reservation__note--desktop color-signal-alert">
+                  You will be charged a fee, when the item is returned
+                </div>
+              )}
               <div />
             </div>
           </div>
           <div className="list-reservation__status">
             <div className="list-reservation__counter color-secondary-gray">
-              <Counter
-                isReady
-                label="Ready"
-                percentage={100}
-                status="info"
-                value={20}
-              />
+              {!withNote && (
+                <Counter
+                  isReady
+                  label="Ready"
+                  percentage={100}
+                  status="info"
+                  value={20}
+                />
+              )}
+              {withNote && (
+                <Counter
+                  label="Days"
+                  percentage={100}
+                  status="danger"
+                  value={0}
+                />
+              )}
             </div>
             <div>
               <div className="list-reservation__deadline">
                 <div
                   data-cy="info-label"
-                  className="status-label status-label--info"
+                  className={clsx("status-label", [
+                    { "status-label--info": !withNote },
+                    { "status-label--danger": withNote },
+                  ])}
                 >
-                  Pick up before 02-02-2024
+                  Pick up before xx-xx-xxxx
                 </div>
                 <p className="text-small-caption">Hovedbiblioteket</p>
                 <p className="text-small-caption">Reserveringshylde 74</p>
diff --git a/src/stories/Blocks/reservation-page/reservation-page-skeleton.scss b/src/stories/Blocks/reservation-page/reservation-page-skeleton.scss
index 4aba799da..d30aaddbf 100644
--- a/src/stories/Blocks/reservation-page/reservation-page-skeleton.scss
+++ b/src/stories/Blocks/reservation-page/reservation-page-skeleton.scss
@@ -1,6 +1,6 @@
 // Since we are using the Skeleton Screen Css classes connected to the existing styling
 // we deliberately not follow the BEM naming convention here.
-.reservation-list-page.ssc {
+.reservation-list-page {
   .ssc-square {
     height: 72px;
 
@@ -12,12 +12,4 @@
   .ssc-circle {
     height: 90px;
   }
-
-  & .list-reservation__information {
-    min-width: 200px;
-
-    @include media-query__x-small("max-width") {
-      min-width: 100px;
-    }
-  }
 }
diff --git a/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.stories.tsx b/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.stories.tsx
index d13ef734b..9eed64765 100644
--- a/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.stories.tsx
+++ b/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import IconAccentComp from "./ArrowAccent";
+import { ReactComponent as ArrowAccentIcon } from "../../../../public/icons/arrow-accent/icon-arrow-accent.svg";
 
 const StoryBase: Meta = {
   title: "Library / Arrows / Arrow Accent",
-  component: IconAccentComp,
+  component: ArrowAccentIcon,
   decorators: [withDesign],
   parameters: {
     design: {
@@ -17,4 +17,4 @@ const StoryBase: Meta = {
 
 export default StoryBase;
 
-export const ArrowAccent = () => <IconAccentComp />;
+export const ArrowAccent = () => <ArrowAccentIcon />;
diff --git a/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.tsx b/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.tsx
deleted file mode 100644
index e0d661a13..000000000
--- a/src/stories/Library/Arrows/icon-arrow-accent/ArrowAccent.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const IconAccent = () => {
-  return (
-    <img src="icons/arrow-accent/icon-arrow-accent.svg" alt="arrow accent" />
-  );
-};
-
-export default IconAccent;
diff --git a/src/stories/Library/Buttons/button/Button.tsx b/src/stories/Library/Buttons/button/Button.tsx
index d774a5dd0..818decced 100644
--- a/src/stories/Library/Buttons/button/Button.tsx
+++ b/src/stories/Library/Buttons/button/Button.tsx
@@ -6,8 +6,8 @@ import { ButtonSize, ButtonType, ButtonVariant } from "./types";
 export type ButtonProps = {
   label: string;
   buttonType: ButtonType;
-  disabled: boolean;
-  collapsible: boolean;
+  disabled?: boolean;
+  collapsible?: boolean;
   size: ButtonSize;
   variant: ButtonVariant;
   onClick?: () => void;
@@ -17,8 +17,8 @@ export type ButtonProps = {
 export const Button: React.FC<ButtonProps> = ({
   label,
   buttonType,
-  disabled,
-  collapsible,
+  disabled = false,
+  collapsible = false,
   size,
   variant,
   onClick,
@@ -36,6 +36,7 @@ export const Button: React.FC<ButtonProps> = ({
       )}
       disabled={disabled}
       onClick={onClick}
+      aria-label={label}
     >
       {`${label} ${buttonType === "search" ? "(6)" : ""}`}
       <ButtonIcon collapsible={collapsible} buttonType={buttonType} />
diff --git a/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
index c0f8a9b34..5005a95ee 100644
--- a/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
+++ b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { FC } from "react";
+import { ReactComponent as ExpandMoreIcon } from "../../../../../public/icons/collection/ExpandMore.svg";
 
 export type ButtonExpandProps = {
   showMore: boolean;
@@ -14,12 +15,10 @@ const ButtonExpand: FC<ButtonExpandProps> = ({ showMore, setShowMore }) => {
       onClick={() => setShowMore(!showMore)}
       aria-label="Expand More"
     >
-      <img
+      <ExpandMoreIcon
         className={clsx("button-expand__image", {
           "button-expand__image--expanded": showMore,
         })}
-        src="icons/collection/ExpandMore.svg"
-        alt=""
       />
     </button>
   );
diff --git a/src/stories/Library/Buttons/icon-button/icon-button.scss b/src/stories/Library/Buttons/icon-button/icon-button.scss
index af9ccb403..d2adf91de 100644
--- a/src/stories/Library/Buttons/icon-button/icon-button.scss
+++ b/src/stories/Library/Buttons/icon-button/icon-button.scss
@@ -1,9 +1,28 @@
 .dpl-icon-button {
   all: unset;
   cursor: pointer;
+  height: 27px;
+  path {
+    fill: $color__global-tertiary-2;
+  }
 
+  // If the icon is not selected and hovered add a vague line at the bottom
+  // indicating that you can select it.
+  &:not(&--selected) {
+    &:hover {
+      box-shadow: inset 0 -2px 0 0 $color__global-tertiary-2;
+    }
+  }
+
+  // If the icon is selected, add a line at the bottom to indicate that it is
+  // selected.
   &--selected {
-    fill: $color__global-tertiary-2;
+    box-shadow: inset 0 -2px 0 0;
+    svg {
+      path {
+        fill: $color__text-primary-black;
+      }
+    }
   }
 
   @extend %default-focus-visible;
diff --git a/src/stories/Library/Forms/date-picker/DatePicker.tsx b/src/stories/Library/Forms/date-picker/DatePicker.tsx
index 4dd329baa..390594733 100644
--- a/src/stories/Library/Forms/date-picker/DatePicker.tsx
+++ b/src/stories/Library/Forms/date-picker/DatePicker.tsx
@@ -1,13 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 // Import default styling
 import "flatpickr/dist/flatpickr.css";
-
 import flatpickr from "flatpickr";
 import { english } from "flatpickr/dist/l10n/default";
 import { Danish } from "flatpickr/dist/l10n/da";
 import { Instance } from "flatpickr/dist/types/instance";
 import { MutableRefObject, useCallback, useRef } from "react";
 import { BaseOptions } from "flatpickr/dist/types/options";
+import { ReactComponent as ExpandMoreIcon } from "../../../../public/icons/collection/ExpandMore.svg";
 
 export type DatePickerProps = {
   locale?: "en" | "da";
@@ -43,14 +43,11 @@ const DatePicker = (props: DatePickerProps) => {
         />
         <button
           name="Toggle datepicker"
+          aria-label="open datepicker"
           className="datepicker__opener"
           data-toggle
         >
-          <img
-            className="datepicker__icon"
-            src="icons/collection/ExpandMore.svg"
-            alt="Expand more icon"
-          />
+          <ExpandMoreIcon className="datepicker__icon" />
         </button>
       </div>
     </div>
diff --git a/src/stories/Library/Icons/icon-watch/IconWatch.tsx b/src/stories/Library/Icons/icon-watch/IconWatch.tsx
index 126632fe1..afa955dca 100644
--- a/src/stories/Library/Icons/icon-watch/IconWatch.tsx
+++ b/src/stories/Library/Icons/icon-watch/IconWatch.tsx
@@ -1,8 +1,10 @@
+import { ReactComponent as WatchStaticIcon } from "../../../../public/icons/basic/icon-watch-static.svg";
+
 export const IconWatch = () => {
   return (
     <div className="internal-container-grid">
       <div className="internal-center">
-        <img src="icons/basic/icon-watch-static.svg" alt="klokke" />
+        <WatchStaticIcon />
         <span className="text-body-medium-regular">Clock</span>
       </div>
     </div>
diff --git a/src/stories/Library/Lists/list-dashboard/ListDashboard.stories.tsx b/src/stories/Library/Lists/list-dashboard/ListDashboard.stories.tsx
index 5fc33e05e..a83786331 100644
--- a/src/stories/Library/Lists/list-dashboard/ListDashboard.stories.tsx
+++ b/src/stories/Library/Lists/list-dashboard/ListDashboard.stories.tsx
@@ -34,6 +34,10 @@ export default {
       control: "string",
       defaultValue: "/",
     },
+    isSkeleton: {
+      control: "boolean",
+      defaultValue: false,
+    },
   },
   parameters: {
     design: {
@@ -50,3 +54,8 @@ const Template: ComponentStory<typeof ListDashboard> = (args) => (
 );
 
 export const DashboardList = Template.bind({});
+
+export const SkeletonScreen = Template.bind({});
+SkeletonScreen.args = {
+  isSkeleton: true,
+};
diff --git a/src/stories/Library/Lists/list-dashboard/ListDashboard.tsx b/src/stories/Library/Lists/list-dashboard/ListDashboard.tsx
index 311d248ab..6df63265e 100644
--- a/src/stories/Library/Lists/list-dashboard/ListDashboard.tsx
+++ b/src/stories/Library/Lists/list-dashboard/ListDashboard.tsx
@@ -1,6 +1,7 @@
 import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
 import { Number, NumberProps } from "../../number/Number";
 import { ReactComponent as ArrowSmallRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+import ListDashboardItemSkeleton from "./ListDashboardItemSkeleton";
 
 export type ListDashboardProps = {
   title: string;
@@ -8,6 +9,7 @@ export type ListDashboardProps = {
   number: NumberProps;
   label: StatusLabelProps;
   showDot: boolean;
+  isSkeleton?: boolean;
 };
 
 export const ListDashboard: React.FC<ListDashboardProps> = ({
@@ -16,7 +18,12 @@ export const ListDashboard: React.FC<ListDashboardProps> = ({
   number,
   label,
   showDot,
+  isSkeleton,
 }) => {
+  if (isSkeleton) {
+    return <ListDashboardItemSkeleton />;
+  }
+
   return (
     <a
       href={href}
diff --git a/src/stories/Library/Lists/list-dashboard/ListDashboardItemSkeleton.tsx b/src/stories/Library/Lists/list-dashboard/ListDashboardItemSkeleton.tsx
new file mode 100644
index 000000000..b03d9c054
--- /dev/null
+++ b/src/stories/Library/Lists/list-dashboard/ListDashboardItemSkeleton.tsx
@@ -0,0 +1,10 @@
+const ListDashboardItemSkeleton: React.FC = () => {
+  return (
+    <div className="list-dashboard ssc">
+      <div className="ssc-circle" />
+      <div className="ssc-head-line w-40" />
+    </div>
+  );
+};
+
+export default ListDashboardItemSkeleton;
diff --git a/src/stories/Library/Lists/list-dashboard/list-dashboard-skeleton.scss b/src/stories/Library/Lists/list-dashboard/list-dashboard-skeleton.scss
new file mode 100644
index 000000000..86b7ffe76
--- /dev/null
+++ b/src/stories/Library/Lists/list-dashboard/list-dashboard-skeleton.scss
@@ -0,0 +1,20 @@
+// We don't have any of these dimensions in variables, but we want to preserve
+// the skeleton components' dimensions the same as the actual components.
+.list-dashboard.ssc {
+  height: 72px;
+
+  @include media-query__small {
+    height: 88px;
+  }
+
+  & .ssc-circle {
+    width: 40px;
+    height: 40px;
+    margin-right: 24px;
+
+    @include media-query__small {
+      width: 56px;
+      height: 56px;
+    }
+  }
+}
diff --git a/src/stories/Library/Lists/list-empty/ListEmpty.tsx b/src/stories/Library/Lists/list-empty/ListEmpty.tsx
index b429e86c5..cf6c64fa1 100644
--- a/src/stories/Library/Lists/list-empty/ListEmpty.tsx
+++ b/src/stories/Library/Lists/list-empty/ListEmpty.tsx
@@ -8,8 +8,8 @@ interface ListEmptyProps {
 
 const ListEmpty = ({ text, links, className }: ListEmptyProps) => {
   return (
-    <div className={`dpl-list-empty ${className}`}>
-      {text}
+    <div className={`dpl-list-empty ${className ?? ""}`}>
+      <p>{text}</p>
       {links && (
         <div className="dpl-list-empty__links">
           {links.map((item, index) => (
diff --git a/src/stories/Library/Lists/list-empty/list-empty.scss b/src/stories/Library/Lists/list-empty/list-empty.scss
index 6321991ba..dd10d2e47 100644
--- a/src/stories/Library/Lists/list-empty/list-empty.scss
+++ b/src/stories/Library/Lists/list-empty/list-empty.scss
@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   border: 1px dotted $color__global-grey;
-  text-align: left;
+  text-align: center;
   color: $color__text-secondary-gray;
   padding: 48px $s-xs;
 
diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss
index 1c5837977..7f13291da 100644
--- a/src/stories/Library/Lists/list-materials/list-materials.scss
+++ b/src/stories/Library/Lists/list-materials/list-materials.scss
@@ -8,6 +8,11 @@
   padding: $s-md;
   background-color: $color__global-white;
   justify-content: space-between;
+  cursor: pointer;
+
+  &:hover {
+    filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 20%));
+  }
 
   @include media-query__small {
     padding: $s-md 32px;
@@ -18,6 +23,14 @@
   &--bottom-buttons-visible {
     padding-bottom: 90px;
   }
+
+  &.list-materials--no-hover {
+    cursor: default;
+
+    &:hover {
+      filter: none;
+    }
+  }
 }
 
 .list-materials__checkbox {
diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss
index c0c331b76..9a06c8f89 100644
--- a/src/stories/Library/Lists/list-reservation/list-reservation.scss
+++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss
@@ -14,11 +14,18 @@ $list-reservation-space-desktop: 24px;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
-  box-shadow: 0 $s-xs 20px rgb(0 0 0 / 10%);
   position: relative;
   padding: $list-reservation-space-mobile;
   cursor: pointer;
 
+  h3 {
+    color: $color__text-primary-black;
+  }
+
+  p {
+    color: $color__global-grey;
+  }
+
   @include media-query__small {
     grid-template-columns: 1fr 1fr;
     height: 184px;
@@ -26,7 +33,7 @@ $list-reservation-space-desktop: 24px;
   }
 
   &:hover {
-    filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%));
+    filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 20%));
   }
 }
 
@@ -84,6 +91,11 @@ $list-reservation-space-desktop: 24px;
   margin-left: $list-reservation-space-mobile;
   align-items: baseline;
   justify-content: space-between;
+  min-width: 200px;
+
+  @include media-query__x-small("max-width") {
+    min-width: 100px;
+  }
 
   @include media-query__small {
     margin-left: $list-reservation-space-desktop;
@@ -177,6 +189,7 @@ $list-reservation-space-desktop: 24px;
     @extend %list-stacked;
 
     content: " ";
+    height: 8px;
     transform: translateY(8px) scale(0.95);
     z-index: $-z-5;
   }
@@ -185,11 +198,8 @@ $list-reservation-space-desktop: 24px;
     @extend %list-stacked;
 
     content: " ";
+    height: 9px;
     transform: translateY($s-md) scale(0.9);
     z-index: $-z-10;
   }
-
-  &:hover {
-    filter: none;
-  }
 }
diff --git a/src/stories/Library/Modals/GroupModalItemSkeleton.tsx b/src/stories/Library/Modals/GroupModalItemSkeleton.tsx
new file mode 100644
index 000000000..eacd78595
--- /dev/null
+++ b/src/stories/Library/Modals/GroupModalItemSkeleton.tsx
@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { Checkbox } from "../Forms/checkbox/Checkbox";
+
+export type GroupModalItemSkeletonProps = {
+  withLeftOutset?: boolean;
+};
+
+const GroupModalItemSkeleton: FC<GroupModalItemSkeletonProps> = ({
+  withLeftOutset = false,
+}) => {
+  return (
+    <li className="ssc">
+      <div className="list-materials list-materials--disabled">
+        {withLeftOutset && (
+          <div className="list-materials__checkbox mr-32">
+            <Checkbox isChecked={false} hiddenLabel label="Select" />
+          </div>
+        )}
+        <div className="list-materials__content">
+          <div className="list-materials__content-status">
+            <div className="ssc-head-line status-label w-10" />
+          </div>
+          <div className="ssc-head-line status-label w-60 mt-8" />
+          <div className="ssc-head-line status-label w-50" />
+          <div className="ssc-line w-30" />
+        </div>
+        <div className="list-materials__status">
+          <div>
+            <div className="ssc-head-line status-label w-100 mt-8" />
+            <div className="ssc-line w-100" />
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default GroupModalItemSkeleton;
diff --git a/src/stories/Library/Modals/group-modal-item-skeleton.scss b/src/stories/Library/Modals/group-modal-item-skeleton.scss
new file mode 100644
index 000000000..897c80cd4
--- /dev/null
+++ b/src/stories/Library/Modals/group-modal-item-skeleton.scss
@@ -0,0 +1,7 @@
+.list-materials {
+  &__status {
+    & .ssc-head-line {
+      min-width: 143px;
+    }
+  }
+}
diff --git a/src/stories/Library/Modals/modal-details/modal-details.scss b/src/stories/Library/Modals/modal-details/modal-details.scss
index 8fe52ac75..a1f065c3d 100644
--- a/src/stories/Library/Modals/modal-details/modal-details.scss
+++ b/src/stories/Library/Modals/modal-details/modal-details.scss
@@ -13,7 +13,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px;
 .modal-details__container {
   width: 100%;
   max-width: 100%;
-  padding-bottom: $s-2xl;
+  padding-bottom: $s-4xl;
 
   @include media-query__small {
     margin: 0;
@@ -103,6 +103,12 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px;
 
 .modal-details__warning {
   margin-top: 40px;
+
+  & .text-body-medium-regular {
+    @include media-query__small("max-width") {
+      line-height: $s-lg;
+    }
+  }
 }
 
 .modal-details__list {
diff --git a/src/stories/Library/Modals/modal-infomedia/Infomedia.tsx b/src/stories/Library/Modals/modal-infomedia/Infomedia.tsx
index f87207575..c916fd20d 100644
--- a/src/stories/Library/Modals/modal-infomedia/Infomedia.tsx
+++ b/src/stories/Library/Modals/modal-infomedia/Infomedia.tsx
@@ -1,4 +1,5 @@
 import Modal from "../Modal";
+import { ReactComponent as InfomediaIcon } from "../../../../public/icons/logo/infomedia-logo.svg";
 
 export type InfomediaProps = {
   showModal: boolean;
@@ -11,11 +12,7 @@ export const Infomedia = (props: InfomediaProps) => {
   return (
     <Modal shownModal={showModal} classNames="">
       <article className="infomedia-article">
-        <img
-          className="infomedia-logo"
-          src="icons/logo/infomedia-logo.svg"
-          alt=""
-        />
+        <InfomediaIcon className="infomedia-logo" />
         <h2>{title}</h2>
         <div
           // eslint-disable-next-line react/no-danger
diff --git a/src/stories/Library/Modals/modal-infomedia/infomedia.scss b/src/stories/Library/Modals/modal-infomedia/infomedia.scss
index 21002fb7d..dd7ae0569 100644
--- a/src/stories/Library/Modals/modal-infomedia/infomedia.scss
+++ b/src/stories/Library/Modals/modal-infomedia/infomedia.scss
@@ -1,6 +1,7 @@
 .infomedia-logo {
   display: block;
   margin-left: auto;
+  margin-right: $s-2xl;
   object-fit: contain;
   height: $s-lg;
 }
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
index 27cef44d5..ca3c0be1e 100644
--- a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
+++ b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
@@ -19,6 +19,16 @@ const Template: ComponentStory<typeof ModalLoan> = (args) => (
   <ModalLoan {...args} />
 );
 
+export const ModalLoanLoading = Template.bind({});
+ModalLoanLoading.args = {
+  title: "Afleveres 12. oktober 2021",
+  description: "Kan afleveres på alle Rudersdals biblioteker",
+  showExpired: true,
+  showModal: true,
+  buttonsUpTop: true,
+  isLoadingItems: true,
+};
+
 export const ModalLoanExpired = Template.bind({});
 ModalLoanExpired.args = {
   title: "Afleveres 12. oktober 2021",
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
index e272ba121..f3ca826de 100644
--- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
+++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
@@ -9,6 +9,7 @@ import {
 import { WarningStatus } from "../../warning-status/WarningStatus";
 import Modal from "../Modal";
 import ResultPager from "../../card-list-page/ResultPager";
+import GroupModalItemSkeleton from "../GroupModalItemSkeleton";
 
 type LoanMaterials = Array<{
   materialType?: string;
@@ -96,6 +97,7 @@ export type ModalLoanProps = {
   showModal: boolean;
   showExpired: boolean;
   buttonsUpTop: boolean;
+  isLoadingItems?: boolean;
 };
 
 export const ModalLoan: React.FC<ModalLoanProps> = ({
@@ -104,6 +106,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
   showExpired,
   showModal,
   buttonsUpTop,
+  isLoadingItems = false,
 }) => {
   const [isAllChecked, setChecked] = useState(false);
   const isExpired = showExpired;
@@ -163,17 +166,23 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
             </div>
           )}
           <ul className="modal-loan__list-materials">
-            {loanList.map(({ list }) => (
+            {isLoadingItems &&
+              [0, 1].map(() => <GroupModalItemSkeleton withLeftOutset />)}
+            {!isLoadingItems && (
               <>
-                {list.map((listItem, index) => (
-                  <ListMaterials
-                    key={`${index}-${isAllChecked}`}
-                    {...listItem}
-                    isChecked={listItem.isChecked}
-                  />
+                {loanList.map(({ list }) => (
+                  <>
+                    {list.map((listItem, index) => (
+                      <ListMaterials
+                        key={`${index}-${isAllChecked}`}
+                        {...listItem}
+                        isChecked={listItem.isChecked}
+                      />
+                    ))}
+                  </>
                 ))}
               </>
-            ))}
+            )}
           </ul>
           <ResultPager
             currentResults={1}
diff --git a/src/stories/Library/Modals/modal-loan/modal-loan.scss b/src/stories/Library/Modals/modal-loan/modal-loan.scss
index 29f74e196..1d6e650e0 100644
--- a/src/stories/Library/Modals/modal-loan/modal-loan.scss
+++ b/src/stories/Library/Modals/modal-loan/modal-loan.scss
@@ -11,6 +11,12 @@
 .modal-loan__header {
   display: flex;
   align-items: center;
+
+  & .text-body-large {
+    @include media-query__small("max-width") {
+      line-height: $s-lg;
+    }
+  }
 }
 
 .modal-loan__list-container {
diff --git a/src/stories/Library/Modals/modal-login/modal-login.scss b/src/stories/Library/Modals/modal-login/modal-login.scss
index d0b0c1b12..be5520aaf 100644
--- a/src/stories/Library/Modals/modal-login/modal-login.scss
+++ b/src/stories/Library/Modals/modal-login/modal-login.scss
@@ -17,6 +17,11 @@
   &__container {
     justify-content: flex-start;
     width: 100%;
+    padding-bottom: $s-4xl;
+
+    @include media-query__small {
+      padding-bottom: 0px;
+    }
   }
 
   &__btn-create-profile {
diff --git a/src/stories/Library/Modals/modal-pause/modal-pause.scss b/src/stories/Library/Modals/modal-pause/modal-pause.scss
index dcf00d04f..65a2d3bd6 100644
--- a/src/stories/Library/Modals/modal-pause/modal-pause.scss
+++ b/src/stories/Library/Modals/modal-pause/modal-pause.scss
@@ -21,7 +21,6 @@
   margin: 0 $s-lg;
   padding-top: 96px;
   max-width: 550px;
-  width: 100%;
 
   @include media-query__small {
     margin: 0 45px;
diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
index 957f7f012..181ed9b27 100644
--- a/src/stories/Library/Modals/modal.scss
+++ b/src/stories/Library/Modals/modal.scss
@@ -71,10 +71,14 @@
 }
 
 .modal-btn-close {
+  background-color: $color__global-primary;
   position: fixed;
   top: 0;
   right: 0;
-  padding: 22.5px;
+  // We need both padding & margin so that when the icon rotates, we don't see
+  // the background color bleed outside the modal.
+  padding: $s-md;
+  margin: 6.5px;
   transition: 0.3s;
   z-index: $z-15;
 
@@ -86,7 +90,11 @@
   }
 
   @include media-query__small {
-    padding: 34px;
+    // We need both padding & margin so that when the icon rotates, we don't see
+    // the background color bleed outside the modal.
+    padding: $s-lg;
+    margin: $s-sm;
+    border-radius: $s-2xl;
   }
 
   &:hover {
diff --git a/src/stories/Library/availability-label/AvailabilityLabel.tsx b/src/stories/Library/availability-label/AvailabilityLabel.tsx
index 7ab94444a..ef4eaed57 100644
--- a/src/stories/Library/availability-label/AvailabilityLabel.tsx
+++ b/src/stories/Library/availability-label/AvailabilityLabel.tsx
@@ -2,6 +2,7 @@ import { AvailabilityLabelPropsType } from "../../availability-label/types";
 import PageFoldButton from "../Buttons/page-fold-button/PageFoldButton";
 import Pagefold from "../pagefold/Pagefold";
 import { withAvailabilityProps } from "./abilityLabel.hoc";
+import { ReactComponent as CheckIcon } from "../../../public/icons/collection/Check.svg";
 
 const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
   manifestationType,
@@ -12,11 +13,7 @@ const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
 }) => {
   const content = (
     <>
-      <img
-        className={`availability-label__check ${status}`}
-        src="icons/collection/Check.svg"
-        alt=""
-      />
+      <CheckIcon className={`availability-label__check ${status}`} />
       {manifestationType && (
         <>
           <p className="availability-label__text text-label-semibold ml-24">
diff --git a/src/stories/Library/avatar/Avatar.tsx b/src/stories/Library/avatar/Avatar.tsx
index 74f8f36b0..199be8431 100644
--- a/src/stories/Library/avatar/Avatar.tsx
+++ b/src/stories/Library/avatar/Avatar.tsx
@@ -1,7 +1,9 @@
+import { ReactComponent as ProfileIcon } from "../../../public/icons/collection/Profile.svg";
+
 export const Avatar = () => {
   return (
     <div className="avatar bg-global-secondary">
-      <img src="icons/collection/Profile.svg" alt="Profile avatar" />
+      <ProfileIcon />
     </div>
   );
 };
diff --git a/src/stories/Library/card-list-item/card-list-item.scss b/src/stories/Library/card-list-item/card-list-item.scss
index 6cefeafb9..61a92d428 100644
--- a/src/stories/Library/card-list-item/card-list-item.scss
+++ b/src/stories/Library/card-list-item/card-list-item.scss
@@ -18,7 +18,7 @@
   }
 
   &:hover {
-    filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%));
+    filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 20%));
   }
 }
 
diff --git a/src/stories/Library/card-list-page/CardListPage.stories.tsx b/src/stories/Library/card-list-page/SearchResultPage.stories.tsx
similarity index 66%
rename from src/stories/Library/card-list-page/CardListPage.stories.tsx
rename to src/stories/Library/card-list-page/SearchResultPage.stories.tsx
index 6e9509df9..87b8be959 100644
--- a/src/stories/Library/card-list-page/CardListPage.stories.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPage.stories.tsx
@@ -1,11 +1,11 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { CardListPage } from "./CardListPage";
-import { CardListPageSkeleton } from "./CardListPageSkeleton";
+import { SearchResultPage } from "./SearchResultPage";
+import { SearchResultPageSkeleton } from "./SearchResultPageSkeleton";
 
 export default {
-  title: "Blocks / Card list Page",
-  component: CardListPage,
+  title: "Blocks / Search Result Page",
+  component: SearchResultPage,
   decorators: [withDesign],
   parameters: {
     design: {
@@ -40,16 +40,16 @@ export default {
       defaultValue: false,
     },
   },
-} as ComponentMeta<typeof CardListPage>;
+} as ComponentMeta<typeof SearchResultPage>;
 
-const Template: ComponentStory<typeof CardListPage> = (args) => {
-  return <CardListPage {...args} />;
+const Template: ComponentStory<typeof SearchResultPage> = (args) => {
+  return <SearchResultPage {...args} />;
 };
 export const Item = Template.bind({});
 
-const SkeletonTemplate: ComponentStory<typeof CardListPageSkeleton> = (
+const SkeletonTemplate: ComponentStory<typeof SearchResultPageSkeleton> = (
   args
 ) => {
-  return <CardListPageSkeleton {...args} />;
+  return <SearchResultPageSkeleton {...args} />;
 };
 export const SkeletonVersion = SkeletonTemplate.bind({});
diff --git a/src/stories/Library/card-list-page/CardListPage.tsx b/src/stories/Library/card-list-page/SearchResultPage.tsx
similarity index 91%
rename from src/stories/Library/card-list-page/CardListPage.tsx
rename to src/stories/Library/card-list-page/SearchResultPage.tsx
index 62b86edcc..892e6b171 100644
--- a/src/stories/Library/card-list-page/CardListPage.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPage.tsx
@@ -5,9 +5,9 @@ import { SearchResultTitle } from "./SearchResultTitle";
 import { SearchResultZero } from "./SearchResultZero";
 import FacetLine from "./FacetLine";
 import FacetLineSelected from "./FacetLineSelectedTerms";
-import data from "./CardListPageData";
+import data from "./SearchResultPageData";
 
-export type CardListPageProps = {
+export type SearchResultPageProps = {
   title: string;
   currentResults: number;
   totalResults: number;
@@ -20,14 +20,14 @@ const SearchResultList = data.searchResult.map((item, i) => {
   return <CardListItem {...item} tintIndex={i} />;
 });
 
-export const CardListPage = ({
+export const SearchResultPage = ({
   title,
   linkName,
   linkTotalResults,
   currentResults,
   totalResults,
   zeroResult,
-}: CardListPageProps) => {
+}: SearchResultPageProps) => {
   return (
     <div className="card-list-page">
       <SearchResultTitle
diff --git a/src/stories/Library/card-list-page/CardListPageData.ts b/src/stories/Library/card-list-page/SearchResultPageData.ts
similarity index 100%
rename from src/stories/Library/card-list-page/CardListPageData.ts
rename to src/stories/Library/card-list-page/SearchResultPageData.ts
diff --git a/src/stories/Library/card-list-page/CardListPageSkeleton.tsx b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
similarity index 90%
rename from src/stories/Library/card-list-page/CardListPageSkeleton.tsx
rename to src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
index 1b6edddc6..358b012b7 100644
--- a/src/stories/Library/card-list-page/CardListPageSkeleton.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
@@ -1,7 +1,7 @@
 import { SearchResultTitle } from "./SearchResultTitle";
 import { CardListItemSkeleton } from "../card-list-item/CardListItemSkeleton";
 
-export type CardListPageSkeletonProps = {
+export type SearchResultPageSkeletonProps = {
   title: string;
   currentResults: number;
   totalResults: number;
@@ -10,7 +10,9 @@ export type CardListPageSkeletonProps = {
   zeroResult: boolean;
 };
 
-export const CardListPageSkeleton = ({ title }: CardListPageSkeletonProps) => {
+export const SearchResultPageSkeleton = ({
+  title,
+}: SearchResultPageSkeletonProps) => {
   return (
     <div className="card-list-page">
       <SearchResultTitle
diff --git a/src/stories/Library/counter/Counter.tsx b/src/stories/Library/counter/Counter.tsx
index 09d2b6228..5939d71eb 100644
--- a/src/stories/Library/counter/Counter.tsx
+++ b/src/stories/Library/counter/Counter.tsx
@@ -1,13 +1,15 @@
+import { ReactComponent as CheckIcon } from "../../../public/icons/collection/Check.svg";
+
 export type CounterProps = {
   value: number;
   percentage: number;
   label: string;
   status: "danger" | "warning" | "info" | "neutral";
-  isReady: boolean;
+  isReady?: boolean;
 };
 
 export const Counter = (props: CounterProps) => {
-  const { value, label, percentage, status, isReady } = props;
+  const { value, label, percentage, status, isReady = false } = props;
 
   function getColor() {
     if (status === "danger") return "#d22d43";
@@ -33,11 +35,7 @@ export const Counter = (props: CounterProps) => {
       aria-label="counter showing time remaining "
     >
       {isReady ? (
-        <img
-          className="counter__icon"
-          src="icons/basic/icon-check.svg"
-          alt="check icon"
-        />
+        <CheckIcon className="counter__icon" />
       ) : (
         <span className="counter__value">{value}</span>
       )}
diff --git a/src/stories/Library/counter/counter.scss b/src/stories/Library/counter/counter.scss
index e5401bb4a..6809190e6 100644
--- a/src/stories/Library/counter/counter.scss
+++ b/src/stories/Library/counter/counter.scss
@@ -29,7 +29,10 @@
   font-weight: 500;
   line-height: 19px;
   text-align: center;
-  text-transform: capitalize;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
 }
 
 .counter__icon {
diff --git a/src/stories/Library/disclosure/Disclosure.tsx b/src/stories/Library/disclosure/Disclosure.tsx
index 93a17ca33..884ba0229 100644
--- a/src/stories/Library/disclosure/Disclosure.tsx
+++ b/src/stories/Library/disclosure/Disclosure.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { clsx } from "clsx";
 import AvailabilityLabel from "../availability-label/AvailabilityLabel";
 import Heading, { HeadingLevelType } from "../heading/Heading";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 
 export type DisclosureProps = {
   headline: string;
@@ -61,12 +62,10 @@ const Disclosure: React.FC<DisclosureProps> = ({
         {withAvailability && (
           <AvailabilityLabel availability="Hjemme" status="available" />
         )}
-        <img
+        <ExpandMoreIcon
           className={`disclosure__expand noselect ${
             isOpen ? "disclosure__expand-open" : ""
           }`}
-          src="icons/collection/ExpandMore.svg"
-          alt="various-icon"
         />
       </summary>
       {contentPadding ? (
diff --git a/src/stories/Library/disclosure/disclosure.scss b/src/stories/Library/disclosure/disclosure.scss
index 960a14f1c..bed11f975 100644
--- a/src/stories/Library/disclosure/disclosure.scss
+++ b/src/stories/Library/disclosure/disclosure.scss
@@ -80,6 +80,8 @@
   &__expand {
     margin-left: auto;
     margin-right: $s-md;
+    height: 24px;
+    min-width: 24px;
 
     @include media-query__small {
       margin-right: $s-xl;
diff --git a/src/stories/Library/dropdown/Dropdown.tsx b/src/stories/Library/dropdown/Dropdown.tsx
index 6ab116ce7..896546138 100644
--- a/src/stories/Library/dropdown/Dropdown.tsx
+++ b/src/stories/Library/dropdown/Dropdown.tsx
@@ -1,4 +1,6 @@
 import clsx from "clsx";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
+import { ReactComponent as TriangleIcon } from "../../../public/icons/basic/icon-triangle.svg";
 
 export type DropdownItem = {
   title: string;
@@ -24,29 +26,15 @@ export const Dropdown: React.FC<DropdownProps> = ({
   const Icon = () => {
     if (arrowIcon === "triangles") {
       return (
-        <span>
-          <img
-            className="dropdown__arrow"
-            src="icons/basic/icon-triangle.svg"
-            alt=""
-          />
-          <img
-            className="dropdown__arrow dropdown__arrow--bottom"
-            src="icons/basic/icon-triangle.svg"
-            alt=""
-          />
-        </span>
+        <>
+          <TriangleIcon className="dropdown__arrow" />
+          <TriangleIcon className="dropdown__arrow dropdown__arrow--bottom" />
+        </>
       );
     }
 
     if (arrowIcon === "chevron") {
-      return (
-        <img
-          className="dropdown__arrow"
-          src="icons/collection/ExpandMore.svg"
-          alt=""
-        />
-      );
+      return <ExpandMoreIcon className="dropdown__arrow" />;
     }
 
     return null;
diff --git a/src/stories/Library/input-preview/InputPreview.tsx b/src/stories/Library/input-preview/InputPreview.tsx
index 83b2d92ae..855fa46a8 100644
--- a/src/stories/Library/input-preview/InputPreview.tsx
+++ b/src/stories/Library/input-preview/InputPreview.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { Links } from "../links/Links";
 import Pagefold from "../pagefold/Pagefold";
+import { ReactComponent as CheckIcon } from "../../../public/icons/collection/Check.svg";
 
 export interface InputPreviewProps {
   cqlPreviewText: string;
@@ -28,11 +29,7 @@ const InputPreview: React.FC<InputPreviewProps> = ({
         <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=""
-          />
+          <CheckIcon className="inline-icon" />
         </button>
         <Links href="/" linkText="Rediger CQL" classNames="link-tag" />
       </section>
diff --git a/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx b/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx
index e24b73e18..9d3e2930a 100644
--- a/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx
+++ b/src/stories/Library/input-with-dropdown/InputWithDropdown.tsx
@@ -1,4 +1,5 @@
 import { Dropdown } from "../dropdown/Dropdown";
+import { ReactComponent as MinusIcon } from "../../../public/icons/collection/MinusButton.svg";
 
 export interface InputWithDropdownProps {
   inputPlaceholder: string;
@@ -28,12 +29,8 @@ export const InputWithDropdown: React.FC<InputWithDropdownProps> = ({
           arrowWrapper: "dropdown__arrows--inline",
         }}
       />
-      <button>
-        <img
-          className="input-with-dropdown__icon"
-          src="icons/collection/MinusButton.svg"
-          alt="Minus button icon"
-        />
+      <button aria-label="remove this row">
+        <MinusIcon className="input-with-dropdown__icon" />
       </button>
     </div>
   );
diff --git a/src/stories/Library/instant-loan/InstantLoanSummary.tsx b/src/stories/Library/instant-loan/InstantLoanSummary.tsx
index 589e7fd1d..034db69b7 100644
--- a/src/stories/Library/instant-loan/InstantLoanSummary.tsx
+++ b/src/stories/Library/instant-loan/InstantLoanSummary.tsx
@@ -1,4 +1,5 @@
 import Cover from "../cover/Cover";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 
 type InstantLoanSummaryProps = {
   title: string;
@@ -24,11 +25,7 @@ const InstantLoanSummary: React.FunctionComponent<InstantLoanSummaryProps> = ({
       <p className="text-small-caption">{subTitle}</p>
       <div className="instant-loan-underline mt-35">
         <p className="link-tag text-small-caption">{underlineDescription}</p>
-        <img
-          className="instant-loan-arrow"
-          src="icons/collection/ExpandMore.svg"
-          alt="various-icon"
-        />
+        <ExpandMoreIcon className="instant-loan-arrow" />
       </div>
     </div>
   </>
diff --git a/src/stories/Library/list-buttons/ListButtons.tsx b/src/stories/Library/list-buttons/ListButtons.tsx
index 5c78fc355..922faddaa 100644
--- a/src/stories/Library/list-buttons/ListButtons.tsx
+++ b/src/stories/Library/list-buttons/ListButtons.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Button } from "../Buttons/button/Button";
-import IconButton from "../Buttons/icon-button/IconButton";
+import { ReactComponent as MenuIcon } from "../../../public/icons/collection/Menu.svg";
+import { ReactComponent as VariousIcon } from "../../../public/icons/collection/Various.svg";
 
 export type ListButtonProps = {
   buttonLabel: string;
@@ -29,16 +30,22 @@ export const ListButton: React.FC<ListButtonProps> = ({
       </h2>
       <div className="dpl-list-buttons__buttons">
         <div className="dpl-list-buttons__buttons__button">
-          <IconButton
-            altText="Denne knap sorterer listen efter afleveringsdato"
-            src="icons/collection/Menu.svg"
-          />
+          <button
+            className="dpl-icon-button"
+            type="button"
+            aria-label="list view"
+          >
+            <MenuIcon />
+          </button>
         </div>
         <div className="dpl-list-buttons__buttons__button">
-          <IconButton
-            altText="Denne knap sorterer listen i stakke"
-            src="icons/collection/Various.svg"
-          />
+          <button
+            className="dpl-icon-button"
+            type="button"
+            aria-label="stacked view"
+          >
+            <VariousIcon />
+          </button>
         </div>
         <div
           className="dpl-list-buttons__buttons__button"
diff --git a/src/stories/Library/multiselect/Multiselect.tsx b/src/stories/Library/multiselect/Multiselect.tsx
index a0092b3de..3824fbafd 100644
--- a/src/stories/Library/multiselect/Multiselect.tsx
+++ b/src/stories/Library/multiselect/Multiselect.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from "../Forms/checkbox/Checkbox";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 
 export type MultiselectProps = {
   options: string[];
@@ -21,11 +22,7 @@ export const Multiselect: React.FC<MultiselectProps> = ({
           Mulighed 1, Mulighed 2, Mulighed 3, Mulighed 4
         </div>
         <div className="multiselect__opener">
-          <img
-            className="multiselect__icon"
-            src="icons/collection/ExpandMore.svg"
-            alt=""
-          />
+          <ExpandMoreIcon className="multiselect__icon" />
         </div>
         {isOpen && (
           <ul className="multiselect__options">
diff --git a/src/stories/Library/pause-reservation/PauseReservation.tsx b/src/stories/Library/pause-reservation/PauseReservation.tsx
index 7b9be8cbc..be9687455 100644
--- a/src/stories/Library/pause-reservation/PauseReservation.tsx
+++ b/src/stories/Library/pause-reservation/PauseReservation.tsx
@@ -1,3 +1,5 @@
+import { ReactComponent as ReservationsIcon } from "../../../public/icons/collection/Reservations.svg";
+
 export type PauseReservationProps = {
   isChecked?: boolean;
   isPausedtext: string;
@@ -18,7 +20,7 @@ export const PauseReservation = ({
       <div className="dpl-pause-reservation-component__pagefold" />
       <div className="dpl-pause-reservation-component__flex">
         <div className="dpl-pause-reservation-component__flex__reservation-icon">
-          <img src="icons/collection/Reservations.svg" alt="" />
+          <ReservationsIcon />
         </div>
         <div className="dpl-pause-reservation-component__flex__text">
           {isChecked ? isPausedtext : pauseText}
diff --git a/src/stories/Library/promo-bar/PromoBarIcon.tsx b/src/stories/Library/promo-bar/PromoBarIcon.tsx
index 501027958..ca04b8bc7 100644
--- a/src/stories/Library/promo-bar/PromoBarIcon.tsx
+++ b/src/stories/Library/promo-bar/PromoBarIcon.tsx
@@ -1,3 +1,5 @@
+import { ReactComponent as InfoIcon } from "../../../public/icons/basic/icon-info.svg";
+
 export type PromoBarIconType = "none" | "info";
 
 export type PromoBarIconProps = {
@@ -8,7 +10,7 @@ export const PromoBarIcon: React.FunctionComponent<PromoBarIconProps> = ({
   type,
 }) => {
   if (type === "info") {
-    return <img src="icons/basic/icon-info.svg" alt="" />;
+    return <InfoIcon />;
   }
   return null;
 };
diff --git a/src/stories/Library/review/Review.tsx b/src/stories/Library/review/Review.tsx
index 89fca79be..ae5092e30 100644
--- a/src/stories/Library/review/Review.tsx
+++ b/src/stories/Library/review/Review.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { ReactComponent as HeartFilledIcon } from "../../../public/icons/basic/icon-heart-filled.svg";
+import { ReactComponent as HeartEmptyIcon } from "../../../public/icons/basic/icon-heart-grey.svg";
 
 export type ReviewProps = {
   numberOfReviews: number;
@@ -35,23 +37,11 @@ export const Review: React.FC<ReviewProps> = ({
             >
               {filledHeartsArray.map((value) => {
                 return (
-                  <img
-                    key={value}
-                    src="icons/basic/icon-heart-filled.svg"
-                    className="review__heart"
-                    alt=""
-                  />
+                  <HeartFilledIcon key={value} className="review__heart" />
                 );
               })}
               {emptyHeartsArray.map((value) => {
-                return (
-                  <img
-                    key={value}
-                    src="icons/basic/icon-heart-grey.svg"
-                    className="review__heart"
-                    alt=""
-                  />
-                );
+                return <HeartEmptyIcon key={value} className="review__heart" />;
               })}
             </div>
             <h3 className="review__headline mb-8">{headline}</h3>
diff --git a/src/stories/Library/review/review.scss b/src/stories/Library/review/review.scss
index b673b7edb..60b18a565 100644
--- a/src/stories/Library/review/review.scss
+++ b/src/stories/Library/review/review.scss
@@ -15,6 +15,7 @@
   &__heart {
     // Ensure SVG has same height as font despite top whitespace.
     height: 14px;
+    width: 14px;
     display: inline-block;
     margin-right: 2px;
     &:last-of-type {
diff --git a/src/stories/Library/search-result-page/SearchResultPage.stories.tsx b/src/stories/Library/search-result-page/SearchResultPage.stories.tsx
new file mode 100644
index 000000000..3df86a0c1
--- /dev/null
+++ b/src/stories/Library/search-result-page/SearchResultPage.stories.tsx
@@ -0,0 +1,55 @@
+import { withDesign } from "storybook-addon-designs";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { SearchResultPageSkeleton } from "../card-list-page/SearchResultPageSkeleton";
+import { SearchResultPage } from "../card-list-page/SearchResultPage";
+
+export default {
+  title: "Blocks / Search Result Page",
+  component: SearchResultPage,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "",
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      defaultValue: "harry potter",
+    },
+    totalResults: {
+      control: { type: "number" },
+      defaultValue: 3576,
+    },
+    linkName: {
+      control: { type: "text" },
+      defaultValue: "bibliotekets hjemmeside",
+    },
+    linkTotalResults: {
+      control: { type: "text" },
+      defaultValue: "8",
+    },
+    currentResults: {
+      control: { type: "number" },
+      defaultValue: 10,
+    },
+
+    zeroResult: {
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+  },
+} as ComponentMeta<typeof SearchResultPage>;
+
+const Template: ComponentStory<typeof SearchResultPage> = (args) => {
+  return <SearchResultPage {...args} />;
+};
+export const Item = Template.bind({});
+
+const SkeletonTemplate: ComponentStory<typeof SearchResultPageSkeleton> = (
+  args
+) => {
+  return <SearchResultPageSkeleton {...args} />;
+};
+export const SkeletonVersion = SkeletonTemplate.bind({});
diff --git a/src/stories/Library/tag/Tag.tsx b/src/stories/Library/tag/Tag.tsx
index 05f7f9698..78da44c1c 100644
--- a/src/stories/Library/tag/Tag.tsx
+++ b/src/stories/Library/tag/Tag.tsx
@@ -1,9 +1,11 @@
 import clsx from "clsx";
+import { ReactComponent as CrossIcon } from "../../../public/icons/basic/icon-cross.svg";
 
 export type TagProps = {
   children: React.ReactNode;
   size?: "small" | "large";
   hasBackground?: boolean;
+  showCloseIcon?: boolean;
   className?: string;
 };
 
@@ -11,6 +13,7 @@ const Tag = ({
   children,
   size = "small",
   hasBackground = false,
+  showCloseIcon = false,
   className,
 }: TagProps) => {
   return (
@@ -23,6 +26,7 @@ const Tag = ({
       )}
     >
       {children}
+      {showCloseIcon && <CrossIcon className="tag-icon" />}
     </span>
   );
 };
diff --git a/src/stories/Library/warning-status/WarningStatus.tsx b/src/stories/Library/warning-status/WarningStatus.tsx
index afd7c72e2..28b95de7d 100644
--- a/src/stories/Library/warning-status/WarningStatus.tsx
+++ b/src/stories/Library/warning-status/WarningStatus.tsx
@@ -1,5 +1,6 @@
 import { Button } from "../Buttons/button/Button";
 import { Links } from "../links/Links";
+import { ReactComponent as WarningIcon } from "../../../public/icons/basic/icon-warning.svg";
 
 export type WarningStatusProps = {
   title?: string;
@@ -18,11 +19,7 @@ export const WarningStatus = (props: WarningStatusProps) => {
   return (
     <div className="warning-bar bg-global-secondary">
       <div className="warning-bar__left">
-        <img
-          className="warning-bar__icon"
-          src="icons/basic/icon-warning.svg"
-          alt="warning icon"
-        />
+        <WarningIcon className="warning-bar__icon" />
         <div>
           {title && <p className="text-body-medium-medium">{title}</p>}
           {description && (
diff --git a/src/stories/Library/warning-status/warning-status.scss b/src/stories/Library/warning-status/warning-status.scss
index 7340f999b..3381e0660 100644
--- a/src/stories/Library/warning-status/warning-status.scss
+++ b/src/stories/Library/warning-status/warning-status.scss
@@ -11,6 +11,7 @@
 
 .warning-bar__icon {
   margin-right: $s-md;
+  min-width: 40px;
 }
 
 .warning-bar__left {