diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
index b6d7e0c35..2e06a60b2 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
@@ -10,6 +10,7 @@ import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -17,7 +18,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 
 import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
 
diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
index 3c7f7b485..5e396a675 100644
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
@@ -9,6 +9,7 @@ import IconChip from "@scandic-hotels/design-system/IconChip"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
@@ -17,7 +18,6 @@ import PriceType from "@/components/HotelReservation/MyStay/PriceType"
 import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { sumPackages } from "@/components/HotelReservation/utils"
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
diff --git a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
index 4956230c4..685da518f 100644
--- a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
@@ -4,8 +4,8 @@ import { DialogTrigger } from "react-aria-components"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import { HotelSidePeekContent } from "./HotelSidePeekContent"
diff --git a/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx
index c45e135d1..26584fad1 100644
--- a/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx
@@ -4,8 +4,8 @@ import { DialogTrigger } from "react-aria-components"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import { RoomSidePeekContent } from "./RoomSidePeekContent"
diff --git a/apps/scandic-web/components/TempDesignSystem/Popover/index.tsx b/apps/scandic-web/components/TempDesignSystem/Popover/index.tsx
index 1abc34424..5445b6cdc 100644
--- a/apps/scandic-web/components/TempDesignSystem/Popover/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Popover/index.tsx
@@ -6,10 +6,9 @@ import {
   Popover as RAPopover,
 } from "react-aria-components"
 
+import useSetOverFlowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
-
 import { Arrow } from "./Arrow"
 
 import styles from "./popover.module.css"
diff --git a/apps/scandic-web/hooks/useSetOverflowVisibleOnRA.ts b/packages/common/hooks/useSetOverflowVisibleOnRA.ts
similarity index 100%
rename from apps/scandic-web/hooks/useSetOverflowVisibleOnRA.ts
rename to packages/common/hooks/useSetOverflowVisibleOnRA.ts
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx b/packages/design-system/lib/components/SidePeek/SelfControlled/SidePeekSEO.tsx
similarity index 74%
rename from apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
rename to packages/design-system/lib/components/SidePeek/SelfControlled/SidePeekSEO.tsx
index 5c64ade27..4ba5b7638 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
+++ b/packages/design-system/lib/components/SidePeek/SelfControlled/SidePeekSEO.tsx
@@ -1,4 +1,4 @@
-import type { SidePeekSelfControlledProps } from "./sidePeek"
+import type { SidePeekSelfControlledProps } from './sidePeek'
 
 // Sidepeeks generally have important content that should be indexed by search engines.
 // The content is hidden behind a modal, but it is still important for SEO.
@@ -6,7 +6,7 @@ import type { SidePeekSelfControlledProps } from "./sidePeek"
 export default function SidePeekSEO({
   title,
   children,
-}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, "title">>) {
+}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, 'title'>>) {
   return (
     <div className="sr-only">
       <h2>{title}</h2>
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx b/packages/design-system/lib/components/SidePeek/SelfControlled/index.tsx
similarity index 71%
rename from apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
rename to packages/design-system/lib/components/SidePeek/SelfControlled/index.tsx
index 3635c80b4..57335c095 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
+++ b/packages/design-system/lib/components/SidePeek/SelfControlled/index.tsx
@@ -1,20 +1,20 @@
-"use client"
+'use client'
 
-import { useEffect } from "react"
-import { Dialog, Modal, ModalOverlay } from "react-aria-components"
-import { useIntl } from "react-intl"
+import { useEffect } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'
 
-import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
+import { IconButton } from '../../IconButton'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
 
-import SidePeekSEO from "./SidePeekSEO"
+import SidePeekSEO from './SidePeekSEO'
 
-import styles from "./sidePeekSelfControlled.module.css"
+import styles from './sidePeekSelfControlled.module.css'
 
-import type { SidePeekSelfControlledProps } from "./sidePeek"
+import type { SidePeekSelfControlledProps } from './sidePeek'
 
 export default function SidePeekSelfControlled({
   children,
@@ -39,7 +39,7 @@ export default function SidePeekSelfControlled({
                     style="Muted"
                     onPress={close}
                     aria-label={intl.formatMessage({
-                      defaultMessage: "Close",
+                      defaultMessage: 'Close',
                     })}
                   >
                     <MaterialIcon
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeek.ts b/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeek.ts
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeek.ts
rename to packages/design-system/lib/components/SidePeek/SelfControlled/sidePeek.ts
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css b/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css
rename to packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 14f4d31ae..bf88d6050 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -144,6 +144,7 @@
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",
+    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./StaticMap": "./lib/components/StaticMap/index.tsx",