diff --git a/package.json b/package.json
index fa4aaf0d50..7251aebb63 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e",
+    "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",
diff --git a/src/apps/advanced-search/AdvancedSearchResults.tsx b/src/apps/advanced-search/AdvancedSearchResults.tsx
index 26eee21720..8fa91dfbad 100644
--- a/src/apps/advanced-search/AdvancedSearchResults.tsx
+++ b/src/apps/advanced-search/AdvancedSearchResults.tsx
@@ -88,7 +88,7 @@ const AdvancedSearchResult: React.FC<AdvancedSearchResultProps> = ({
   }, [data, page]);
 
   const shouldShowSearchResults = isLoading || (!isLoading && hitcount > 0);
-  const shouldShowResultHeadline = hitcount && !isLoading;
+  const shouldShowResultHeadline = !!(hitcount && !isLoading);
 
   useEffect(() => {
     if (copiedLinkToSearch) {
@@ -108,11 +108,14 @@ const AdvancedSearchResult: React.FC<AdvancedSearchResultProps> = ({
         /* ID is used to scroll to the results upon hitting the search button. */
         id="advanced-search-result"
       >
-        {isLoading && t("loadingResultsText")}
-        {shouldShowResultHeadline &&
-          t("showingMaterialsText", {
-            placeholders: { "@hitcount": hitcount }
-          })}
+        {isLoading && <>{t("loadingResultsText")}</>}
+        {shouldShowResultHeadline && (
+          <>
+            {t("showingMaterialsText", {
+              placeholders: { "@hitcount": hitcount }
+            })}
+          </>
+        )}
       </h2>
       {!showContentOnly && (
         <button
diff --git a/src/apps/advanced-search/advanced-search.test.ts b/src/apps/advanced-search/advanced-search.test.ts
index 4ced1cb185..d4012d9fec 100644
--- a/src/apps/advanced-search/advanced-search.test.ts
+++ b/src/apps/advanced-search/advanced-search.test.ts
@@ -45,7 +45,7 @@ describe("Search Result", () => {
     cy.getBySel("advanced-search-material-types").first().click();
     cy.getBySel("preview-section", true).should(
       "contain",
-      "'Harry' AND 'Prince' AND generalmaterialtype='bøger'"
+      "'Harry' AND 'Prince' AND term.generalmaterialtype='bøger'"
     );
   });
 
@@ -170,7 +170,7 @@ describe("Search Result", () => {
       .eq(1)
       .within(() => {
         cy.get("input").should("have.value", "Rowling");
-        cy.get("select").should("have.value", "creator");
+        cy.get("select").should("have.value", "term.creatorcontributor");
       });
     // We currently have no good way to identify selected options in the
     // multiselect so checking the text of the button is the best we can do.
diff --git a/src/apps/advanced-search/types.ts b/src/apps/advanced-search/types.ts
index 817f0f7e3e..0ac4bb359a 100644
--- a/src/apps/advanced-search/types.ts
+++ b/src/apps/advanced-search/types.ts
@@ -2,40 +2,36 @@ import { MultiselectOption } from "../../components/multiselect/types";
 
 export const advancedSearchIndexes = [
   "all",
-  "creator",
-  "subject",
-  "genre",
-  "language",
-  "date",
-  "mainCreator",
-  "mainTitle",
-  "source",
-  "dateFirstEdition",
-  "decimaldk5",
-  "type",
-  "audience",
-  "publisher",
-  "identifier",
-  "acSource"
+  "term.creatorcontributor",
+  "term.subject",
+  "term.genreandform",
+  "term.mainlanguage",
+  "datefirstedition",
+  "term.creator",
+  "term.title",
+  "term.source",
+  "dk5",
+  "term.specificmaterialtype",
+  "term.childrenoradults",
+  "term.publisher",
+  "term.isbn"
 ] as const;
 
 export const advancedSearchIndexTranslations = {
   all: "advancedSearchAllIndexesText",
-  creator: "advancedSearchCreatorText",
-  subject: "advancedSearchSubjectText",
-  genre: "advancedSearchGenreText",
-  language: "advancedSearchLanguageText",
-  date: "advancedSearchDateText",
-  mainCreator: "advancedSearchMainCreatorText",
-  mainTitle: "advancedSearchMainTitleText",
-  source: "advancedSearchSourceText",
-  dateFirstEdition: "advancedSearchDateFirstEditionText",
-  decimaldk5: "advancedSearchDecimalDk5Text",
-  type: "advancedSearchTypeText",
-  audience: "advancedSearchAudienceText",
-  publisher: "advancedSearchPublisherText",
-  identifier: "advancedSearchIdentifierText",
-  acSource: "advancedSearchAcSourceText"
+  "term.creatorcontributor": "advancedSearchCreatorText",
+  "term.subject": "advancedSearchSubjectText",
+  "term.genreandform": "advancedSearchGenreText",
+  "term.mainlanguage": "advancedSearchLanguageText",
+  datefirstedition: "advancedSearchDateText",
+  "term.creator": "advancedSearchMainCreatorText",
+  "term.title": "advancedSearchMainTitleText",
+  "term.source": "advancedSearchSourceText",
+  dk5: "advancedSearchDecimalDk5Text",
+  "term.specificmaterialtype": "advancedSearchTypeText",
+  "term.childrenoradults": "advancedSearchAudienceText",
+  "term.publisher": "advancedSearchPublisherText",
+  "term.isbn": "advancedSearchIdentifierText"
 } as const;
 
 export type AdvancedSearchIndex = typeof advancedSearchIndexes[number];
@@ -106,7 +102,7 @@ export const advancedSearchFiction: MultiselectOption[] = [
 ];
 
 export const advancedSearchFilters = {
-  materialTypes: "generalmaterialtype",
-  fiction: "fictionnonfiction",
-  accessibility: "accesstype"
+  materialTypes: "term.generalmaterialtype",
+  fiction: "term.fictionnonfiction",
+  accessibility: "term.accesstype"
 };
diff --git a/src/apps/fee-list/FeeList.dev.tsx b/src/apps/fee-list/FeeList.dev.tsx
index fad6aefb74..d70683c51c 100644
--- a/src/apps/fee-list/FeeList.dev.tsx
+++ b/src/apps/fee-list/FeeList.dev.tsx
@@ -65,10 +65,6 @@ export default {
       defaultValue: "Total @total,-",
       control: { type: "text" }
     },
-    amountText: {
-      defaultValue: "@amount,-",
-      control: { type: "text" }
-    },
     expirationWarningDaysBeforeConfig: {
       defaultValue: "6",
       control: { type: "text" }
@@ -126,11 +122,11 @@ export default {
       defaultValue: "You have 0 unpaid fees or replacement costs",
       control: { type: "text" }
     },
-    FeeDetailsModalCloseModalAriaLabelText: {
+    feeDetailsModalCloseModalAriaLabelText: {
       defaultValue: "Close fee details modal",
       control: { type: "text" }
     },
-    FeeDetailsModalDescriptionText: {
+    feeDetailsModalDescriptionText: {
       defaultValue:
         "Modal containing information about this element or group of elements fees",
       control: { type: "text" }
@@ -166,6 +162,10 @@ export default {
     paymentOverviewUrl: {
       defaultValue: "https://unsplash.com/photos/yjI3ozta2Zk", // Open source image of a fluffy floofer
       control: { type: "text" }
+    },
+    materialNumberText: {
+      defaultValue: "# @materialNumber",
+      control: { type: "text" }
     }
   },
   decorators: [withQuery]
diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx
index 8f6047de2b..7c5693a5f4 100644
--- a/src/apps/fee-list/FeeList.entry.tsx
+++ b/src/apps/fee-list/FeeList.entry.tsx
@@ -13,37 +13,40 @@ export interface IntermedateListEntryConfigProps {
 }
 
 export interface FeeListProps {
-  totalFeeAmountText: string;
-  otherMaterialsText: string;
-  materialByAuthorText: string;
-  materialAndAuthorText: string;
+  alreadyPaidText: string;
+  availablePaymentTypesUrl: string;
+  emptyFeeListText: string;
+  etAlText: string;
+  feeCreatedText: string;
+  feeDetailsModalScreenReaderText: string;
+  feeDetailsModalCloseModalAriaLabelText: string;
+  feeDetailsModalDescriptionText: string;
+  feeListBodyText: string;
   feeListDaysText: string;
-  payText: string;
-  totalText: string;
-  iAcceptText: string;
-  termsOfTradeText: string;
-  termsOfTradeUrl: string;
   feeListHeadlineText: string;
-  feeListBodyText: string;
-  viewFeesAndCompensationRatesText: string;
-  etAlText: string;
-  viewFeesAndCompensationRatesUrl: string;
-  unpaidFeesFirstHeadlineText: string;
-  unpaidFeesSecondHeadlineText: string;
-  alreadyPaidText: string;
-  feePaymentModalHeaderText: string;
   feePaymentModalBodyText: string;
-  feePaymentModalNoticeText: string;
-  feePaymentModalGotoText: string;
   feePaymentModalCancelText: string;
-  feeDetailsModalScreenReaderText: string;
-  emptyFeeListText: string;
-  turnedInText: string;
-  plusXOtherMaterialsText: string;
+  feePaymentModalGotoText: string;
+  feePaymentModalHeaderText: string;
+  feePaymentModalNoticeText: string;
+  iAcceptText: string;
   itemFeeAmountText: string;
-  feeCreatedText: string;
-  availablePaymentTypesUrl: string;
+  materialAndAuthorText: string;
+  materialByAuthorText: string;
+  materialNumberText: string;
+  otherMaterialsText: string;
   paymentOverviewUrl: string;
+  payText: string;
+  plusXOtherMaterialsText: string;
+  termsOfTradeText: string;
+  termsOfTradeUrl: string;
+  totalFeeAmountText: string;
+  totalText: string;
+  turnedInText: string;
+  unpaidFeesFirstHeadlineText: string;
+  unpaidFeesSecondHeadlineText: string;
+  viewFeesAndCompensationRatesText: string;
+  viewFeesAndCompensationRatesUrl: string;
 }
 
 const FeeListEntry: FC<
diff --git a/src/apps/fee-list/FeeList.tsx b/src/apps/fee-list/FeeList.tsx
index a9569f5987..745c60c5b5 100644
--- a/src/apps/fee-list/FeeList.tsx
+++ b/src/apps/fee-list/FeeList.tsx
@@ -63,7 +63,7 @@ const FeeList: FC = () => {
       }
       const feesPostPaymentChange = getFeesInRelationToPaymentChangeDate(
         fbsFees,
-        true
+        false
       ).length;
       if (feesPostPaymentChange > 0) {
         setItemsPostPaymentChange(
diff --git a/src/apps/fee-list/fee-list.test.ts b/src/apps/fee-list/fee-list.test.ts
index 1aca8b30ab..eec068f2fc 100644
--- a/src/apps/fee-list/fee-list.test.ts
+++ b/src/apps/fee-list/fee-list.test.ts
@@ -253,21 +253,6 @@ describe("Fee list", () => {
       .click();
 
     // 5. modal
-    // counter number
-    cy.get("div.modal-loan__header")
-      .find("div")
-      .find(".counter")
-      .find(".counter__value")
-      .should("have.text", "32");
-
-    // counter text
-    cy.get("div.modal-loan__header")
-      .find("div")
-      .find(".counter")
-      .find(".counter__label")
-      .should("exist")
-      .should("have.text", "Days");
-
     // header
     cy.get("div.modal-loan__header")
       .find("div")
@@ -275,19 +260,6 @@ describe("Fee list", () => {
       .should("exist")
       .should("have.text", "Turned in 6. April 2022");
 
-    // "i accept the Terms of trade*"
-    cy.getBySel("checkbox_id__fee_details").should("exist");
-
-    cy.get(".modal")
-      .find(".checkbox__label")
-      .should("have.text", "I accept the Terms of trade*");
-
-    // pay button
-    cy.get(".button-box")
-      .find("button")
-      .should("exist")
-      .should("have.text", "Pay");
-
     // book list
     cy.get(".modal-loan__list-materials")
       .find("li")
diff --git a/src/apps/fee-list/modal/fee-details-modal.tsx b/src/apps/fee-list/modal/fee-details-modal.tsx
index 8904040c49..166954a13f 100644
--- a/src/apps/fee-list/modal/fee-details-modal.tsx
+++ b/src/apps/fee-list/modal/fee-details-modal.tsx
@@ -15,8 +15,8 @@ const FeeDetailsModal: FC<FeeDetailsModalProps> = ({ modalId, children }) => {
     <Modal
       modalId={modalId || ""}
       classNames="modal-details"
-      closeModalAriaLabelText={t("FeeDetailsModalCloseModalAriaLabelText")}
-      screenReaderModalDescriptionText={t("FeeDetailsModalDescriptionText")}
+      closeModalAriaLabelText={t("feeDetailsModalCloseModalAriaLabelText")}
+      screenReaderModalDescriptionText={t("feeDetailsModalDescriptionText")}
     >
       {children}
     </Modal>
diff --git a/src/apps/fee-list/stackable-fees/fee-details-content.tsx b/src/apps/fee-list/stackable-fees/fee-details-content.tsx
index 853ab43cc4..8b0779808d 100644
--- a/src/apps/fee-list/stackable-fees/fee-details-content.tsx
+++ b/src/apps/fee-list/stackable-fees/fee-details-content.tsx
@@ -1,16 +1,11 @@
 import dayjs from "dayjs";
 import * as React from "react";
-import { FC, useState } from "react";
-import Link from "../../../components/atoms/links/Link";
+import { FC } from "react";
 import { FeeV2 } from "../../../core/fbs/model";
 import { useText } from "../../../core/utils/text";
 import { FaustId } from "../../../core/utils/types/ids";
-import { useUrls } from "../../../core/utils/url";
-import FeeStatusCircle from "../utils/fee-status-circle";
-import { isDateBeforePaymentChangeDate } from "../utils/helper";
 import { dateFormatCustom } from "../../../core/configuration/date-format.json";
 import StackableFeesList from "./stackable-fees-list";
-import AcceptTermsCheckbox from "./AcceptTermsCheckbox";
 import GroupModalContent from "../../../components/GroupModal/GroupModalContent";
 
 export interface FeeDetailsContentProps {
@@ -19,31 +14,17 @@ export interface FeeDetailsContentProps {
 
 const FeeDetailsContent: FC<FeeDetailsContentProps> = ({ feeDetailsData }) => {
   const t = useText();
-  const u = useUrls();
-  const paymentOverviewUrl = u("paymentOverviewUrl");
-  const [check, setCheck] = useState(false);
-  const handleAcceptedTerms = () => {
-    setCheck(!check);
-  };
   const {
     amount = 0,
     creationDate = "",
-    dueDate = "",
-    materials = []
+    materials = [],
+    reasonMessage
   } = feeDetailsData;
-  const prePaymentTypeChange = isDateBeforePaymentChangeDate(dueDate);
   const creationDateFormatted = dayjs(creationDate).format(dateFormatCustom);
-  const showPaymentButton = !prePaymentTypeChange && check;
 
   return (
     <div className="modal-loan__container">
       <div className="modal-loan__header">
-        <div className="mr-32">
-          <FeeStatusCircle
-            dueDate={dueDate || ""}
-            feeCreationDate={creationDate}
-          />
-        </div>
         <div>
           <h2 className="modal-loan__title text-header-h2">
             {t("turnedInText", {
@@ -55,43 +36,23 @@ const FeeDetailsContent: FC<FeeDetailsContentProps> = ({ feeDetailsData }) => {
       <GroupModalContent
         amountOfSelectableMaterials={0}
         buttonComponent={
-          <>
-            <AcceptTermsCheckbox handleAcceptedTerms={handleAcceptedTerms} />
-            <div>
-              <p>
-                {t("amountText", {
-                  placeholders: { "@amount": amount }
-                })}
-              </p>
-            </div>
-            {!showPaymentButton && (
-              <button
-                type="button"
-                className="btn-primary btn-outline btn-small arrow__hover--right-small"
-                disabled={!showPaymentButton}
-              >
-                {t("payText")}
-              </button>
-            )}
-            {showPaymentButton && (
-              <Link
-                className="btn-primary btn-filled btn-small arrow__hover--right-small disabled"
-                href={paymentOverviewUrl}
-              >
-                {t("payText")}
-              </Link>
-            )}
-          </>
+          <div>
+            <p className="text-body-small-medium">
+              {t("totalText", {
+                placeholders: { "@total": amount }
+              })}
+            </p>
+          </div>
         }
       >
         <div />
       </GroupModalContent>
       {materials.map(({ recordId }) => (
         <StackableFeesList
+          reasonForFee={reasonMessage}
           materials={materials}
           key={recordId}
           item={{ faust: `${recordId}` as FaustId }}
-          creationDateFormatted={creationDateFormatted}
         />
       ))}
     </div>
diff --git a/src/apps/fee-list/stackable-fees/stackable-fees-list.tsx b/src/apps/fee-list/stackable-fees/stackable-fees-list.tsx
index 7692743fb4..4703447e6a 100644
--- a/src/apps/fee-list/stackable-fees/stackable-fees-list.tsx
+++ b/src/apps/fee-list/stackable-fees/stackable-fees-list.tsx
@@ -9,13 +9,13 @@ import StatusBadge from "../../loan-list/materials/utils/status-badge";
 import { FaustId } from "../../../core/utils/types/ids";
 
 interface StackableFeeListProps {
-  creationDateFormatted: string;
   materials: FeeMaterialV2[];
+  reasonForFee: string;
 }
 
 const StackableFeeList: FC<StackableFeeListProps & MaterialProps> = ({
   materials,
-  creationDateFormatted
+  reasonForFee
 }) => {
   const t = useText();
 
@@ -25,23 +25,21 @@ const StackableFeeList: FC<StackableFeeListProps & MaterialProps> = ({
         <SelectableMaterial
           focused={false}
           disabled
-          statusBadgeComponent={
-            <StatusBadge
-              dangerText={t("turnedInText", {
-                placeholders: { "@date": creationDateFormatted }
-              })}
-            />
-          }
+          statusBadgeComponent={<StatusBadge dangerText={reasonForFee} />}
           item={{ faust: recordId as FaustId }}
           key={recordId}
           statusMessageComponentMobile={
             <div className="list-materials__status__note-mobile">
-              {materialItemNumber}
+              {t("materialNumberText", {
+                placeholders: { "@materialNumber": materialItemNumber }
+              })}
             </div>
           }
           statusMessageComponentDesktop={
             <div className="list-materials__status__note-desktop">
-              {materialItemNumber}
+              {t("materialNumberText", {
+                placeholders: { "@materialNumber": materialItemNumber }
+              })}
             </div>
           }
         />
diff --git a/src/apps/fee-list/stackable-fees/stackable-fees.tsx b/src/apps/fee-list/stackable-fees/stackable-fees.tsx
index 137923c47a..558545c9ec 100644
--- a/src/apps/fee-list/stackable-fees/stackable-fees.tsx
+++ b/src/apps/fee-list/stackable-fees/stackable-fees.tsx
@@ -31,12 +31,17 @@ const StackableFees: FC<StackableFeeProps & MaterialProps> = ({
   const { amount = 0, creationDate = "", reasonMessage = "" } = feeData;
   const stackSize = amountOfMaterialsWithDueDate - 1;
   const listReservationClass = clsx(["list-reservation", "my-32"], {
-    "list-reservation--stacked": stackSize > 1
+    "list-reservation--stacked": stackSize > 0
   });
   return (
     <button
       type="button"
       onClick={() => openDetailsModalClickEvent(faust)}
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.key === "Space") {
+          openDetailsModalClickEvent(faust);
+        }
+      }}
       className={listReservationClass}
     >
       {feeData && (
diff --git a/src/apps/fee-list/utils/helper.ts b/src/apps/fee-list/utils/helper.ts
index 457624819c..cff26d21e0 100644
--- a/src/apps/fee-list/utils/helper.ts
+++ b/src/apps/fee-list/utils/helper.ts
@@ -1,11 +1,19 @@
 import dayjs from "dayjs";
 import { FeeV2 } from "../../../core/fbs/model";
+import configuration, { getConf } from "../../../core/configuration";
+
+const paymentConf = getConf("payment", configuration);
+const {
+  paymentChangeDate
+}: // paymentChangeDate should never be undefined, but the config system requires
+// us to handle that case
+{ paymentChangeDate?: `${number}-${number}-${number}` } = paymentConf;
 
 export const getFeesInRelationToPaymentChangeDate = (
   feeObj: FeeV2[],
   beforePaymentChangeDate: boolean
 ) => {
-  const paymentMethodChangeDate = dayjs("2020-10-27"); // The Date fee-payment-method changed
+  const paymentMethodChangeDate = dayjs(paymentChangeDate); // The Date fee-payment-method changed
   return feeObj.filter((fee) => {
     const { dueDate } = fee;
     if (dueDate) {
diff --git a/src/apps/loan-list/list/ListHeader.tsx b/src/apps/loan-list/list/ListHeader.tsx
index d9cc082111..280d0d987f 100644
--- a/src/apps/loan-list/list/ListHeader.tsx
+++ b/src/apps/loan-list/list/ListHeader.tsx
@@ -11,7 +11,7 @@ const ListHeader: FC<ListHeaderProps> = ({ header, amount, children }) => {
     <div className="dpl-list-buttons">
       <h2 className="dpl-list-buttons__header">
         {header}
-        <div className="dpl-list-buttons__power">{amount}</div>
+        <span className="dpl-list-buttons__power">{amount}</span>
       </h2>
       <div className="dpl-list-buttons__buttons">{children}</div>
     </div>
diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
index 92ff9b5ae7..632f75118f 100644
--- a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
+++ b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
@@ -66,7 +66,7 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
   };
 
   return (
-    <li className="arrow arrow__hover--right-small">
+    <li className="arrow__hover--right-small">
       <div
         className={clsx("list-materials", {
           "list-materials--disabled": disabled
diff --git a/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx b/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx
index 1a6fe262b9..bb99774258 100644
--- a/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx
+++ b/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx
@@ -27,6 +27,11 @@ const AdditionalMaterialsButton: FC<AdditionalMaterialsButtonProps> = ({
     <button
       type="button"
       onClick={(e) => openDueDateModalCallBack(e)}
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.key === "Space") {
+          openDueDateModalCallBack(e as unknown as MouseEvent);
+        }
+      }}
       // in loan-list-items.tsx
       aria-describedby="materials-modal-text"
       className={`list-reservation__note list-reservation__note--${showOn}`}
diff --git a/src/apps/loan-list/materials/stackable-material/material-info.tsx b/src/apps/loan-list/materials/stackable-material/material-info.tsx
index a9beac93d1..0eccfb7692 100644
--- a/src/apps/loan-list/materials/stackable-material/material-info.tsx
+++ b/src/apps/loan-list/materials/stackable-material/material-info.tsx
@@ -33,6 +33,10 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
     lang
   } = material || {};
   const coverId = pid || isbnForCover;
+  const handleDetailsModal = (event: React.SyntheticEvent) => {
+    event.stopPropagation();
+    openDetailsModal();
+  };
 
   return (
     <div className="list-reservation__material">
@@ -53,7 +57,14 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
         </div>
         <div className="list-reservation__about">
           <button
-            onClick={() => openDetailsModal()}
+            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+              handleDetailsModal(e);
+            }}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === "Space") {
+                handleDetailsModal(e);
+              }
+            }}
             type="button"
             // This is to handle focus when more items are loaded via pagination
             // eslint-disable-next-line jsx-a11y/no-autofocus
diff --git a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
index aa4d772150..2f49ba5d94 100644
--- a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
+++ b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
@@ -29,21 +29,22 @@ const StackableMaterial: FC<StackableMaterialProps & MaterialProps> = ({
 }) => {
   const { dueDate, identifier, periodical } = loan;
 
-  const openLoanDetailsModalHandler = () => {
-    openLoanDetailsModal(loan);
-  };
-
   const handleOpenDueDateModal = () => {
     if (openDueDateModal && dueDate) {
       openDueDateModal(dueDate);
+      return;
     }
+    openLoanDetailsModal(loan);
   };
 
   return (
     <div
-      className={clsx("list-reservation my-32 cursor-pointer", {
-        "list-reservation--stacked": additionalMaterials > 0
-      })}
+      className={clsx(
+        "list-reservation my-32 cursor-pointer arrow__hover--right-small",
+        {
+          "list-reservation--stacked": additionalMaterials > 0
+        }
+      )}
       role="button"
       onClick={handleOpenDueDateModal}
       onKeyUp={(e) => {
@@ -56,7 +57,7 @@ const StackableMaterial: FC<StackableMaterialProps & MaterialProps> = ({
       {material && (
         <MaterialInfo
           arrowLabelledBy={`${loanId || identifier}-title`}
-          openDetailsModal={openLoanDetailsModalHandler}
+          openDetailsModal={handleOpenDueDateModal}
           periodical={periodical}
           material={material}
           focused={focused}
diff --git a/src/apps/reservation-list/list/list.tsx b/src/apps/reservation-list/list/list.tsx
index f426c6e5e6..546a853229 100644
--- a/src/apps/reservation-list/list/list.tsx
+++ b/src/apps/reservation-list/list/list.tsx
@@ -83,7 +83,7 @@ const List: FC<ListProps> = ({
             <h2 className="dpl-list-buttons__header">
               <>
                 {header}
-                <div className="dpl-list-buttons__power">0</div>
+                <span className="dpl-list-buttons__power">0</span>
               </>
             </h2>
           </div>
diff --git a/src/apps/reservation-list/reservation-material/reservation-material.tsx b/src/apps/reservation-list/reservation-material/reservation-material.tsx
index e74ed266ab..b22e86e31b 100644
--- a/src/apps/reservation-list/reservation-material/reservation-material.tsx
+++ b/src/apps/reservation-list/reservation-material/reservation-material.tsx
@@ -30,7 +30,7 @@ const ReservationMaterial: FC<ReservationMaterialProps & MaterialProps> = ({
   return (
     <li>
       <div
-        className="list-reservation my-32 cursor-pointer"
+        className="list-reservation my-32 cursor-pointer arrow__hover--right-small"
         role="button"
         onClick={() => openDetailsModal()}
         onKeyUp={(e) => {
diff --git a/src/apps/search-header/search-header.test.ts b/src/apps/search-header/search-header.test.ts
index d147e94994..07e10cd1fb 100644
--- a/src/apps/search-header/search-header.test.ts
+++ b/src/apps/search-header/search-header.test.ts
@@ -37,7 +37,7 @@ describe("Search header app", () => {
     cy.getBySel("search-header-input").focus().type("ha");
     cy.getBySel("autosuggest").should("not.be.visible");
     cy.getBySel("search-header-input").focus().type("r");
-    cy.getBySel("autosuggest").should("be.visible");
+    cy.getBySel("autosuggest-text-item").should("be.visible");
   });
 
   it("Allows use of arrow keys to navigate autosuggest", () => {
diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index 3b92e8113a..700e9dc3c8 100644
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -18,6 +18,7 @@ const ArrowButton: React.FC<ArrowButtonProps> = ({
   return (
     <button
       aria-labelledby={arrowLabelledBy}
+      className="arrow-button"
       style={pointer}
       type="button"
       onClick={(e) => {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 7169be29e0..cebe7d04a8 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -71,7 +71,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
               value={value}
               className={classes.option}
               disabled={disabled}
-              selected={value === defaultValue}
+              selected={value.toString() === defaultValue?.toString()}
             >
               {optionsLabel}
             </option>
diff --git a/src/components/card-item-list/card-list-item/card-list-item.tsx b/src/components/card-item-list/card-list-item/card-list-item.tsx
index 03652199ad..4fd114ae91 100644
--- a/src/components/card-item-list/card-list-item/card-list-item.tsx
+++ b/src/components/card-item-list/card-list-item/card-list-item.tsx
@@ -122,7 +122,7 @@ const CardListItem: React.FC<CardListItemProps> = ({
     <article
       ref={itemRef}
       data-cy={dataCy}
-      className="card-list-item arrow arrow__hover--right-small"
+      className="card-list-item arrow__hover--right-small"
       onClick={() => {
         handleClick();
       }}
diff --git a/src/components/contact-info-section/ContactInfoPhone.tsx b/src/components/contact-info-section/ContactInfoPhone.tsx
index 1c9d14484e..bac786c56c 100644
--- a/src/components/contact-info-section/ContactInfoPhone.tsx
+++ b/src/components/contact-info-section/ContactInfoPhone.tsx
@@ -36,7 +36,6 @@ const ContactInfoPhone: FC<ContactInfoPhoneProps> = ({
         }
         value={patron?.phoneNumber}
         label={t("patronContactPhoneLabelText")}
-        placeholder={t("patronPagePhoneInputMessageText")}
       />
       {showCheckboxes && (
         <CheckBox
diff --git a/src/components/list-header/list-header.tsx b/src/components/list-header/list-header.tsx
index 457943de23..f8324d4ef5 100644
--- a/src/components/list-header/list-header.tsx
+++ b/src/components/list-header/list-header.tsx
@@ -18,7 +18,7 @@ const ListHeader: FC<ListHeaderProps> = ({
       <h2 data-cy={dataCy} className="dpl-list-buttons__header">
         {header}
         {amount !== null && (
-          <div className="dpl-list-buttons__power">{amount}</div>
+          <span className="dpl-list-buttons__power">{amount}</span>
         )}
       </h2>
       <div className="dpl-list-buttons__buttons">{children}</div>
diff --git a/src/components/reservation/UserListItems.tsx b/src/components/reservation/UserListItems.tsx
index 8ca023f373..733e03393e 100644
--- a/src/components/reservation/UserListItems.tsx
+++ b/src/components/reservation/UserListItems.tsx
@@ -36,12 +36,7 @@ export interface UserListItemsProps {
 
 const UserListItems: FC<UserListItemsProps> = ({
   patron,
-  patron: {
-    defaultInterestPeriod,
-    preferredPickupBranch,
-    phoneNumber,
-    emailAddress
-  },
+  patron: { preferredPickupBranch, phoneNumber, emailAddress },
   branches,
   selectedBranch,
   selectBranchHandler,
@@ -74,7 +69,7 @@ const UserListItems: FC<UserListItemsProps> = ({
 
   return (
     <>
-      {defaultInterestPeriod && (
+      {interestPeriods && (
         <>
           <ReservationFormListItem
             icon={LoanHistoryIcon}
@@ -84,7 +79,9 @@ const UserListItems: FC<UserListItemsProps> = ({
             buttonAriaLabel={t("changeInterestPeriodText")}
           />
           <NoInterestAfterModal
-            selectedInterest={selectedInterest ?? defaultInterestPeriod}
+            selectedInterest={
+              selectedInterest ?? interestPeriods.defaultInterestPeriod.value
+            }
             setSelectedInterest={setSelectedInterest}
           />
         </>
diff --git a/src/components/reservation/forms/NoInterestAfterModal.tsx b/src/components/reservation/forms/NoInterestAfterModal.tsx
index 2451f0be33..f63fa63d6a 100644
--- a/src/components/reservation/forms/NoInterestAfterModal.tsx
+++ b/src/components/reservation/forms/NoInterestAfterModal.tsx
@@ -6,7 +6,7 @@ import { RequestStatus } from "../../../core/utils/types/request";
 import { Periods } from "../types";
 
 export interface PickupModalProps {
-  selectedInterest: number;
+  selectedInterest: number | string;
   setSelectedInterest: (value: number) => void;
   saveCallback?: () => void;
   reservationStatus?: RequestStatus;
diff --git a/src/components/reservation/helper.ts b/src/components/reservation/helper.ts
index b20c5a97a2..0afa820ff6 100644
--- a/src/components/reservation/helper.ts
+++ b/src/components/reservation/helper.ts
@@ -34,9 +34,9 @@ export const getNoInterestAfter = (
   interestPeriod: Periods,
   t: UseTextFunction
 ) => {
-  const interestPeriodFound = interestPeriod.interestPeriods.find(
-    ({ value }) => value === String(days)
-  );
+  const interestPeriodFound = interestPeriod.interestPeriods.find((period) => {
+    return period.value.toString() === days.toString();
+  });
 
   if (interestPeriodFound) {
     return interestPeriodFound.label;
diff --git a/src/core/configuration/index.ts b/src/core/configuration/index.ts
index 5a652e99c8..68dbcf6cee 100644
--- a/src/core/configuration/index.ts
+++ b/src/core/configuration/index.ts
@@ -7,6 +7,7 @@ import coverTints from "./cover-tints.json";
 import colors from "./colors.json";
 import modalIds from "./modal-ids.json";
 import reservation from "./reservation.json";
+import payment from "./payment.json";
 
 export type ConfScope =
   | "pageSize"
@@ -16,7 +17,8 @@ export type ConfScope =
   | "recommenderMaterialLimits"
   | "colors"
   | "modalIds"
-  | "reservation";
+  | "reservation"
+  | "payment";
 type Device = "mobile" | "desktop";
 type ConfigurationEntry = {
   [key: string]: string | number | Record<string, unknown>;
@@ -54,5 +56,6 @@ export default {
   colors,
   recommenderMaterialLimits,
   modalIds,
-  reservation
+  reservation,
+  payment
 } as Configuration;
diff --git a/src/core/configuration/payment.json b/src/core/configuration/payment.json
new file mode 100644
index 0000000000..79b7fdb636
--- /dev/null
+++ b/src/core/configuration/payment.json
@@ -0,0 +1,3 @@
+{
+  "paymentChangeDate": "2020-10-27"
+}
diff --git a/src/core/utils/text.tsx b/src/core/utils/text.tsx
index fb7e8bc57d..9f14ed4d58 100644
--- a/src/core/utils/text.tsx
+++ b/src/core/utils/text.tsx
@@ -105,13 +105,15 @@ const processTexts = (texts: string[], placeholders: Placeholders) =>
   );
 
 export const useText = (): UseTextFunction => {
-  const { data } = useSelector((state: RootState) => state.text);
+  const { data } = useSelector<{ data: Record<string, string> }>(
+    (state: RootState) => state.text
+  );
 
   return (key: string, { placeholders, count } = { count: 0 }) => {
     if (!data) {
       throw new Error(`The translation store is broken.`);
     }
-    if (!data[key]) {
+    if (data[key] === undefined) {
       throw new Error(`The translation for ${key} is not defined.`);
     }
     const textDefinition = constructTextDefinitionFromRawTextTextEntry(
diff --git a/src/tests/unit/text.test.tsx b/src/tests/unit/text.test.tsx
index af0768d4e9..0ecae2c569 100644
--- a/src/tests/unit/text.test.tsx
+++ b/src/tests/unit/text.test.tsx
@@ -15,7 +15,8 @@ const store = configureStore({
       data: {
         simpleText: "This is a @simple test",
         placeholdersText: `{"type":"simple","text":["This is a text with a @placeholder embedded. Does it work? @result it does!"]}`,
-        pluralText: `{"type":"plural","text":["You have 1 material on the waiting list","You have @count materials on the waiting list"]}`
+        pluralText: `{"type":"plural","text":["You have 1 material on the waiting list","You have @count materials on the waiting list"]}`,
+        emptyStringText: ""
       }
     }
   }
@@ -88,3 +89,15 @@ test("Should throw an error if the text definition is not found", () => {
     );
   });
 });
+
+test("Shouldn't throw an error if the text is an empty string", () => {
+  const { result } = renderHook(() => useText(), { wrapper: Wrapper });
+  // We name it t, because that is how we normally use it in the code.
+  const t = result.current;
+
+  act(() => {
+    // This test would be failing if an error was thrown for empty strings.
+    // That's why we don't need to define anything else here to know that it works.
+    t("emptyStringText");
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 850a7876ea..52a051ee6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1477,10 +1477,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@danskernesdigitalebibliotek/dpl-design-system@2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e":
-  version "2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e"
-  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e/eaa8bd13af004074cd2447655a4bb20fccd8dc2c#eaa8bd13af004074cd2447655a4bb20fccd8dc2c"
-  integrity sha512-Zimpf9G00kcS7QA27wuOtN4zmrRbs+4UAADXkAq0lFE+VhaQZ7EbcueVw2tZ47UXzQUgcPbF5a9X5P1Jk/kkZQ==
+"@danskernesdigitalebibliotek/dpl-design-system@0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a":
+  version "0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a"
+  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a/b7efe97875a0bae09fc27425250b8de333dd0476#b7efe97875a0bae09fc27425250b8de333dd0476"
+  integrity sha512-U1orycYBJoaLt42wVXTc0+XNpuatby/JD2gV1YH8ewd0lOo6yNhik2U/iSbcKIsUpwrGx64itxEPt9e+dbRXNw==
 
 "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"