diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx
index 92ff5739e..cedccc4df 100644
--- a/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner fullPage />
diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx
index c739b6635..b278f9856 100644
--- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner />
diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx
index 92ff5739e..cedccc4df 100644
--- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner fullPage />
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx
index c739b6635..b278f9856 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner />
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx
index 92ff5739e..cedccc4df 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner fullPage />
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx
index 3bb7ec960..129fac816 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx
@@ -2,6 +2,7 @@ import { notFound } from "next/navigation"
 
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
 
 import { PaymentCallbackStatusEnum } from "@/constants/booking"
@@ -9,7 +10,6 @@ import { serverClient } from "@/lib/trpc/server"
 
 import GuaranteeCallback from "@/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback"
 import TrackGuarantee from "@/components/HotelReservation/MyStay/TrackGuarantee"
-import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx
index 92ff5739e..cedccc4df 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 export default function Loading() {
   return <LoadingSpinner fullPage />
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx
index c9bdc9f24..9d18c0905 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 // Commenting to trigger a build
 export default function Loading() {
diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx
index aaf3fb778..efcb7b912 100644
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 import { SASModal } from "./sas-x-scandic/components/SASModal"
 
diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx
index 92056cfc0..5db79b4d4 100644
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx
@@ -1,10 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
-
 import { SASModal } from "../components/SASModal"
 
 export default function Loading() {
diff --git a/apps/scandic-web/app/[lang]/webview/refresh/page.tsx b/apps/scandic-web/app/[lang]/webview/refresh/page.tsx
index 9677171db..262253793 100644
--- a/apps/scandic-web/app/[lang]/webview/refresh/page.tsx
+++ b/apps/scandic-web/app/[lang]/webview/refresh/page.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 import styles from "./page.module.css"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx
index 966026ce1..3b572b68d 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx
@@ -3,9 +3,9 @@
 import { keepPreviousData } from "@tanstack/react-query"
 import { useState } from "react"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import Pagination from "@/components/MyPages/Pagination"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx
index 147c81817..752c6b4cb 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx
@@ -1,8 +1,8 @@
 "use client"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx
index 0d49d9c9e..9c6c8298c 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx
@@ -1,8 +1,8 @@
 "use client"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
index 8d8a15d98..7b6901632 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
@@ -19,7 +20,6 @@ import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierCo
 import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
-import LoadingSpinner from "@/components/LoadingSpinner"
 
 import JobylonFeed from "./JobylonFeed"
 
diff --git a/apps/scandic-web/components/Dialog/index.tsx b/apps/scandic-web/components/Dialog/index.tsx
index 8044ada34..b61f7f600 100644
--- a/apps/scandic-web/components/Dialog/index.tsx
+++ b/apps/scandic-web/components/Dialog/index.tsx
@@ -8,11 +8,10 @@ import {
 
 import Body from "@scandic-hotels/design-system/Body"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
-
 import styles from "./dialog.module.css"
 
 import type { DialogProps } from "@/types/components/dialog"
diff --git a/apps/scandic-web/components/Headers/DynamicContent/index.tsx b/apps/scandic-web/components/Headers/DynamicContent/index.tsx
index 758f5f019..5bb8ace11 100644
--- a/apps/scandic-web/components/Headers/DynamicContent/index.tsx
+++ b/apps/scandic-web/components/Headers/DynamicContent/index.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from "react"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 
 import EmployeeBenefitsCallToActions from "@/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions"
-import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { HeaderDynamicContentProps } from "@/types/components/headers/dynamicContent"
 
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx
index 6d082a9f7..4ef3d1ab6 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx
@@ -5,11 +5,11 @@ import { useEffect } from "react"
 
 import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
 import { trackEvent } from "@scandic-hotels/common/tracking/base"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 import { PaymentCallbackStatusEnum } from "@/constants/booking"
 import { detailsStorageName } from "@/stores/enter-details"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { trackPaymentEvent } from "@/utils/tracking"
 
 import {
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx
index 2391037a0..f71c1a843 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx
@@ -3,11 +3,11 @@
 import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
 
 import { MEMBERSHIP_FAILED_ERROR } from "@/constants/booking"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 
 import TimeoutSpinner from "./TimeoutSpinner"
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
index 40196236c..b9abf33aa 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
@@ -4,11 +4,11 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { customerService } from "@/constants/webHrefs"
 
-import LoadingSpinner from "@/components/LoadingSpinner"
 import useLang from "@/hooks/useLang"
 
 import styles from "./timeoutSpinner.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
index 976759c68..edfd558a0 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
@@ -11,6 +11,7 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel
 import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -31,7 +32,6 @@ import {
   getAncillarySessionData,
   setAncillarySessionData,
 } from "@/components/HotelReservation/MyStay/utils/ancillaries"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
 import {
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx
index f364e0bd4..2b9f92443 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx
@@ -3,13 +3,13 @@
 import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import {
   clearAncillarySessionData,
   getAncillarySessionData,
 } from "@/components/HotelReservation/MyStay/utils/ancillaries"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import {
   trackAncillaryFailed,
   trackAncillarySuccess,
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
index 4172a3c8f..295720096 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
@@ -9,6 +9,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -20,7 +21,6 @@ import { writeGlaToSessionStorage } from "@/components/HotelReservation/EnterDet
 import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx b/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx
index f4f658f87..ac7a6badc 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 
 import { trackEvent } from "@scandic-hotels/common/tracking/base"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 import { PaymentCallbackStatusEnum } from "@/constants/booking"
 
@@ -12,7 +13,6 @@ import {
   readGlaFromSessionStorage,
 } from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers"
 import { getAncillarySessionData } from "@/components/HotelReservation/MyStay/utils/ancillaries"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import {
   buildAncillariesTracking,
   buildBreakfastTracking,
diff --git a/apps/scandic-web/providers/EnterDetailsProvider.tsx b/apps/scandic-web/providers/EnterDetailsProvider.tsx
index 884127dbb..2684b34d3 100644
--- a/apps/scandic-web/providers/EnterDetailsProvider.tsx
+++ b/apps/scandic-web/providers/EnterDetailsProvider.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"
 
 import { isSameBooking } from "@scandic-hotels/booking-flow/utils/isSameBooking"
 import { dt } from "@scandic-hotels/common/dt"
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 
 import { createDetailsStore } from "@/stores/enter-details"
 import {
@@ -15,7 +16,6 @@ import {
 
 import { getMultiroomDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/Multiroom/schema"
 import { guestDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/RoomOne/schema"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { DetailsContext } from "@/contexts/Details"
 
 import type { DetailsStore } from "@/types/contexts/enter-details"
diff --git a/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx
new file mode 100644
index 000000000..19ec3ba17
--- /dev/null
+++ b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { LoadingSpinner } from './index'
+
+const meta: Meta<typeof LoadingSpinner> = {
+  title: 'Components/LoadingSpinner',
+  component: LoadingSpinner,
+  argTypes: {
+    fullPage: {
+      control: 'check',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoadingSpinner>
+
+export const Default: Story = {
+  args: {
+    fullPage: false,
+  },
+}
+
+export const Fullpage: Story = {
+  args: {
+    fullPage: true,
+  },
+}
diff --git a/apps/scandic-web/components/LoadingSpinner/index.tsx b/packages/design-system/lib/components/LoadingSpinner/index.tsx
similarity index 73%
rename from apps/scandic-web/components/LoadingSpinner/index.tsx
rename to packages/design-system/lib/components/LoadingSpinner/index.tsx
index 93c87d3c1..06a9fc17a 100644
--- a/apps/scandic-web/components/LoadingSpinner/index.tsx
+++ b/packages/design-system/lib/components/LoadingSpinner/index.tsx
@@ -1,8 +1,8 @@
-import styles from "./loading.module.css"
+import styles from './loading.module.css'
 
-export default function LoadingSpinner({ fullPage }: { fullPage?: boolean }) {
+export function LoadingSpinner({ fullPage }: { fullPage?: boolean }) {
   return (
-    <div className={`${styles.container} ${fullPage ? styles.fullPage : ""}`}>
+    <div className={`${styles.container} ${fullPage ? styles.fullPage : ''}`}>
       <div className={styles.spinner}>
         <div></div>
         <div></div>
diff --git a/apps/scandic-web/components/LoadingSpinner/loading.module.css b/packages/design-system/lib/components/LoadingSpinner/loading.module.css
similarity index 98%
rename from apps/scandic-web/components/LoadingSpinner/loading.module.css
rename to packages/design-system/lib/components/LoadingSpinner/loading.module.css
index 17b9cb741..543d933af 100644
--- a/apps/scandic-web/components/LoadingSpinner/loading.module.css
+++ b/packages/design-system/lib/components/LoadingSpinner/loading.module.css
@@ -22,7 +22,7 @@
 }
 
 .spinner div::after {
-  content: " ";
+  content: ' ';
   display: block;
   position: absolute;
   top: 3px;
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index e7f0ce0d8..737fae0f5 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -131,6 +131,7 @@
     "./Label": "./lib/components/Label/index.tsx",
     "./Lightbox": "./lib/components/Lightbox/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
+    "./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx",
     "./Map/InteractiveMap": "./lib/components/Map/InteractiveMap/index.tsx",
     "./Map/mapConstants": "./lib/components/Map/mapConstants.ts",
     "./Map/Markers/HotelMarkerByType": "./lib/components/Map/Markers/HotelMarkerByType.tsx",