diff --git a/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.module.scss b/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.module.scss
new file mode 100644
index 000000000..5ed725c4f
--- /dev/null
+++ b/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.module.scss
@@ -0,0 +1,116 @@
+@use "../../styles/viewport.module.scss" as *;
+
+.modalBackground {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ background: rgba(0, 0, 0, 0.4);
+}
+
+.modal {
+ position: relative;
+ width: 100%;
+ max-width: 90vw;
+ max-height: 90vh;
+
+ @media (min-width: $desktop_min_width) {
+ width: auto;
+ }
+}
+
+.modalCard {
+ background: var(--bg-primary);
+ border: 1px solid var(--border-primary);
+ border-radius: 16px;
+ box-shadow: var(--shadow-xl);
+ width: 100%;
+ max-width: 400px;
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.header {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 20px 20px 0;
+}
+
+.closeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ padding: 6px;
+ border: none;
+ background: none;
+ border-radius: 8px;
+ cursor: pointer;
+ color: var(--fg-quaternary);
+
+ &:hover {
+ background: var(--bg-secondary);
+ }
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 20px 8px;
+}
+
+.logoWrapper {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ width: 100%;
+}
+
+.body {
+ text-align: center;
+ width: 100%;
+}
+
+.warningBox {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ width: 100%;
+ padding: 12px;
+ border-radius: 12px;
+ background: #fef0c7;
+ box-sizing: border-box;
+}
+
+.warningText {
+ flex: 1;
+ color: #dc6803;
+ font-family: Inter, sans-serif;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
+ line-height: 20px;
+ text-align: center;
+}
+
+.footer {
+ display: flex;
+ width: 100%;
+ padding: 12px 24px 16px;
+ box-sizing: border-box;
+}
+
+.footerButton {
+ flex: 1;
+}
diff --git a/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.tsx b/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.tsx
new file mode 100644
index 000000000..3b2b67fad
--- /dev/null
+++ b/apps/customer_dashboard/src/components/service_shutdown_modal/service_shutdown_modal.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Button } from "@oko-wallet/oko-common-ui/button";
+import { Card } from "@oko-wallet/oko-common-ui/card";
+import { OkoLogoIcon } from "@oko-wallet/oko-common-ui/icons/oko_logo_icon";
+import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
+import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+import { type FC, useEffect, useState } from "react";
+
+import styles from "./service_shutdown_modal.module.scss";
+
+const SESSION_KEY = "oko_ct_shutdown_noticed";
+
+export const ServiceShutdownModal: FC = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => {
+ if (!sessionStorage.getItem(SESSION_KEY)) {
+ setIsOpen(true);
+ sessionStorage.setItem(SESSION_KEY, "1");
+ }
+ }, []);
+
+ const onClose = () => setIsOpen(false);
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Service Shutdown Notice
+
+
+
+
+
+
+
+ Oko is shutting down its service on June 1, 2026.
+
+
+
+
+
+
+
+ Please remove Oko SDK and API integrations from your dapp before
+ the shutdown date.
+
+
+
+
+
+
+
+ Also, please inform your users to export their private keys and
+ migrate to another wallet. After June 1, Oko API and SDK will no
+ longer be available.
+
+
+
+
+
+
+ Close
+
+
+
+
+
+ );
+};
diff --git a/apps/customer_dashboard/src/styles/viewport.module.scss b/apps/customer_dashboard/src/styles/viewport.module.scss
index 5a61e2624..c456e550f 100644
--- a/apps/customer_dashboard/src/styles/viewport.module.scss
+++ b/apps/customer_dashboard/src/styles/viewport.module.scss
@@ -1 +1,3 @@
$width_360: 360px;
+$tablet_min_width: 361px;
+$desktop_min_width: 769px;
diff --git a/apps/user_dashboard/src/app/layout.tsx b/apps/user_dashboard/src/app/layout.tsx
index d428db613..80f4d57d8 100644
--- a/apps/user_dashboard/src/app/layout.tsx
+++ b/apps/user_dashboard/src/app/layout.tsx
@@ -8,6 +8,7 @@ import "@oko-wallet/oko-common-ui/styles/shadow.scss";
import "@oko-wallet/oko-common-ui/styles/animation.scss";
import { Providers } from "@oko-wallet-user-dashboard/components/providers/providers";
+import { ServiceShutdownModal } from "@oko-wallet-user-dashboard/components/service_shutdown_modal/service_shutdown_modal";
import "./globals.scss";
@@ -62,7 +63,10 @@ export default function RootLayout({
className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} ${robotoMono.variable}`}
suppressHydrationWarning
>
-
{children}
+
+ {children}
+