diff --git a/public/fonts/BricolageGrotesque-Bold.ttf b/public/fonts/BricolageGrotesque-Bold.ttf
new file mode 100755
index 0000000..f3b1ded
Binary files /dev/null and b/public/fonts/BricolageGrotesque-Bold.ttf differ
diff --git a/public/fonts/BricolageGrotesque-Regular.ttf b/public/fonts/BricolageGrotesque-Regular.ttf
new file mode 100755
index 0000000..0674ae3
Binary files /dev/null and b/public/fonts/BricolageGrotesque-Regular.ttf differ
diff --git a/public/fonts/SchibstedGrotesk-Italic.ttf b/public/fonts/SchibstedGrotesk-Italic.ttf
new file mode 100644
index 0000000..3c5a187
Binary files /dev/null and b/public/fonts/SchibstedGrotesk-Italic.ttf differ
diff --git a/public/fonts/SchibstedGrotesk-Regular.ttf b/public/fonts/SchibstedGrotesk-Regular.ttf
new file mode 100644
index 0000000..dd70163
Binary files /dev/null and b/public/fonts/SchibstedGrotesk-Regular.ttf differ
diff --git a/public/fonts/SchibstedGrotesk-SemiBold.ttf b/public/fonts/SchibstedGrotesk-SemiBold.ttf
new file mode 100644
index 0000000..dd7e8fe
Binary files /dev/null and b/public/fonts/SchibstedGrotesk-SemiBold.ttf differ
diff --git a/src/app/auth-callback/page.tsx b/src/app/auth-callback/page.tsx
index 261d166..5261cfe 100644
--- a/src/app/auth-callback/page.tsx
+++ b/src/app/auth-callback/page.tsx
@@ -95,7 +95,7 @@ export default function AuthCallback() {
   }, [getToken]);
   return (
     <div>
-      {error ? (
+      {false ? (
         <div>{error}</div>
       ) : (
         <div>
diff --git a/src/app/globals.css b/src/app/globals.css
index ccdd8d9..93f189d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -93,4 +93,45 @@ body {
 
   --sds-color-border-default-default: #414142;
   --sds-color-border-warning-tertiary: #6C5A0D;
+}
+
+@font-face {
+  font-family: Bricolage Grotesque Bold;
+  src: url('/fonts/BricolageGrotesque-Bold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: Bricolage Grotesque;
+  src: url('/fonts/BricolageGrotesque-Bold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: Bricolage Grotesque Regular;
+  src: url('/fonts/BricolageGrotesque-Regular.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk;
+  src: url('/fonts/SchibstedGrotesk-Regular.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk Italic;
+  font-weight: 300;
+  src: url('/fonts/SchibstedGrotesk-Italic.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk Bold;
+  font-weight: 600;
+  src: url('/fonts/SchibstedGrotesk-SemiBold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'password';
+  src: local('Arial');
+  unicode-range: U+25CF;
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0db2f54..d6fe36d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import Toast from "src/components/Toast";
 import "./globals.css";
 import { Inter } from "next/font/google";
+// import '../assets/index.less';
 
 const inter = Inter({ subsets: ["latin"] });
 
diff --git a/src/components/Loading/index.css b/src/components/Loading/index.css
index 0451f21..3817151 100644
--- a/src/components/Loading/index.css
+++ b/src/components/Loading/index.css
@@ -1,6 +1,13 @@
 .loading-wrapper {
-  background-color: rgb(00 00 00 / 20%);
+   background: var(--sds-color-background-default-default);
 }
-.dark-theme {
-  color: #fff;
+.loading-text {
+  color: var(--sds-color-text-default-default);
+  text-align: center;
+  /* Body Strong */
+  font-family: 'Schibsted Grotesk';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%; /* 22.4px */
 }
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index ba6a80c..a6efa9e 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { OpacityType } from "src/types";
 import { PureLoadingIndicator } from "@portkey/did-ui-react";
 import "./index.css";
@@ -9,13 +9,25 @@ export interface LoadingProps {
   loadingText?: string;
   cancelable?: boolean;
   className?: string;
+  theme?: 'dark' | 'white';
+}
+export declare enum LoadingColor {
+  WHITE = "white",
+  DARK = "dark"
 }
-
 export default function Loading({
   loading,
   loadingText = "Loading...",
   className,
+  theme = 'white'
 }: LoadingProps) {
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  })
   const style = useMemo(
     () =>
       typeof loading !== "number"
@@ -26,14 +38,23 @@ export default function Loading({
     [loading]
   );
 
+  const loadingTheme = useMemo(
+    () =>
+      theme === "dark"
+        ? 'white'
+        : 'dark',
+    [theme]
+  );
+
   return loading ? (
     <div
       className={
-        "loading-wrapper max-h-screen fixed w-screen h-screen flex justify-center items-center z-999 text-center " +
+        "loading-wrapper max-h-screen fixed w-screen h-screen flex justify-center items-center z-999 text-center flex-col gap-6 " +
         (className || "")
       }
       style={style}>
-      <PureLoadingIndicator width={44} height={44}/>
+      <PureLoadingIndicator width={32} height={32}  color={loadingTheme as LoadingColor || 'dark'} />
+      <div className="loading-text">{loadingText}</div>
     </div>
   ) : null;
 }
diff --git a/src/pages-components/entry/mobile-styles.module.css b/src/pages-components/entry/mobile-styles.module.css
index 9e6ac50..a8cbe98 100644
--- a/src/pages-components/entry/mobile-styles.module.css
+++ b/src/pages-components/entry/mobile-styles.module.css
@@ -186,6 +186,7 @@
   border: 1px solid var(--sds-color-border-warning-tertiary);
   border-radius: 16px;
   color: var(--sds-color-text-warning-on-warning-tertiary);
+  background: var(--sds-color-background-warning-tertiary);
 }
 
 .warningTitle {
diff --git a/src/pages-components/entry/pc-styles.module.css b/src/pages-components/entry/pc-styles.module.css
index ea3da7f..d6c3733 100644
--- a/src/pages-components/entry/pc-styles.module.css
+++ b/src/pages-components/entry/pc-styles.module.css
@@ -222,6 +222,7 @@
   border: 1px solid var(--sds-color-border-warning-tertiary);
   border-radius: 16px;
   color: var(--sds-color-text-warning-on-warning-tertiary);
+  background: var(--sds-color-background-warning-tertiary);
 }
 
 .warningTitle {