diff --git a/package.json b/package.json
index 7b89a49b..1d9228a5 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "emoji-regex": "^10.2.1",
     "escape-string-regexp": "^5.0.0",
     "events": "^3.3.0",
+    "framer-motion": "^12.6.3",
     "google-protobuf": "^3.15.12",
     "hast-util-to-mdast": "^10.1.0",
     "highlight.js": "^11.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fadd0fe4..2b2f2f09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,6 +112,9 @@ dependencies:
   events:
     specifier: ^3.3.0
     version: 3.3.0
+  framer-motion:
+    specifier: ^12.6.3
+    version: 12.6.3(react-dom@18.2.0)(react@18.2.0)
   google-protobuf:
     specifier: ^3.15.12
     version: 3.21.2
@@ -609,7 +612,7 @@ packages:
       class-variance-authority: 0.7.1
       clsx: 2.1.1
       dompurify: 3.1.7
-      framer-motion: 12.4.7(react-dom@18.2.0)(react@18.2.0)
+      framer-motion: 12.6.3(react-dom@18.2.0)(react@18.2.0)
       i18next: 22.5.1
       i18next-resources-to-backend: 1.2.1
       lodash-es: 4.17.21
@@ -9025,8 +9028,8 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
-  /framer-motion@12.4.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==}
+  /framer-motion@12.6.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2hsqknz23aloK85bzMc9nSR2/JP+fValQ459ZTVElFQ0xgwR2YqNjYSuDZdFBPOwVCt4Q9jgyTt6hg6sVOALzw==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -9039,8 +9042,8 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      motion-dom: 12.4.5
-      motion-utils: 12.0.0
+      motion-dom: 12.6.3
+      motion-utils: 12.6.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
@@ -11575,14 +11578,14 @@ packages:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
     dev: false
 
-  /motion-dom@12.4.5:
-    resolution: {integrity: sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==}
+  /motion-dom@12.6.3:
+    resolution: {integrity: sha512-gRY08RjcnzgFYLemUZ1lo/e9RkBxR+6d4BRvoeZDSeArG4XQXERSPapKl3LNQRu22Sndjf1h+iavgY0O4NrYqA==}
     dependencies:
-      motion-utils: 12.0.0
+      motion-utils: 12.6.3
     dev: false
 
-  /motion-utils@12.0.0:
-    resolution: {integrity: sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==}
+  /motion-utils@12.6.3:
+    resolution: {integrity: sha512-R/b3Ia2VxtTNZ4LTEO5pKYau1OUNHOuUfxuP0WFCTDYdHkeTBR9UtxR1cc8mDmKr8PEhmmfnTKGz3rSMjNRoRg==}
     dev: false
 
   /mrmime@2.0.0:
diff --git a/src/@types/translations/en.json b/src/@types/translations/en.json
index 607699f5..9dc02595 100644
--- a/src/@types/translations/en.json
+++ b/src/@types/translations/en.json
@@ -3094,5 +3094,11 @@
   "embedLink": "Embed link",
   "embedVideoLinkPlaceholder": "Paste a video link here.",
   "videoSupported": "Supported services: YouTube, Vimeo, and more.",
-  "copiedVideoLink": "Video original link copied to clipboard"
+  "copiedVideoLink": "Video original link copied to clipboard",
+  "checkYourEmail": "Check your email",
+  "checkEmailTip": "A temporary verification link has been sent. Please check your inbox at",
+  "enterCodeManually": "Enter code manually",
+  "backToLogin": "Back to login",
+  "enterCode": "Enter code",
+  "continueToSignIn": "Continue to sign in"
 }
diff --git a/src/application/services/js-services/http/gotrue.ts b/src/application/services/js-services/http/gotrue.ts
index 32ff40bb..f46eebb3 100644
--- a/src/application/services/js-services/http/gotrue.ts
+++ b/src/application/services/js-services/http/gotrue.ts
@@ -1,9 +1,11 @@
+import { emit, EventType } from '@/application/session';
+import { afterAuth } from '@/application/session/sign_in';
 import { refreshToken as refreshSessionToken } from '@/application/session/token';
 import axios, { AxiosInstance } from 'axios';
 
 let axiosInstance: AxiosInstance | null = null;
 
-export function initGrantService(baseURL: string) {
+export function initGrantService (baseURL: string) {
   if (axiosInstance) {
     return;
   }
@@ -21,7 +23,7 @@ export function initGrantService(baseURL: string) {
   });
 }
 
-export async function refreshToken(refresh_token: string) {
+export async function refreshToken (refresh_token: string) {
   const response = await axiosInstance?.post<{
     access_token: string;
     expires_at: number;
@@ -41,7 +43,48 @@ export async function refreshToken(refresh_token: string) {
   return newToken;
 }
 
-export async function signInWithMagicLink(email: string, authUrl: string) {
+export async function signInOTP ({
+  email,
+  code,
+}: {
+  email: string;
+  code: string;
+  redirectTo: string;
+}) {
+  try {
+    const response = await axiosInstance?.post<{
+      access_token: string;
+      expires_at: number;
+      refresh_token: string;
+    }>('/verify', {
+      email,
+      token: code,
+      type: 'recovery',
+    });
+
+    const newToken = response?.data;
+
+    if (newToken) {
+      refreshSessionToken(JSON.stringify(newToken));
+      emit(EventType.SESSION_VALID);
+      afterAuth();
+    } else {
+      emit(EventType.SESSION_INVALID);
+      return Promise.reject('Failed to sign in otp');
+    }
+    // eslint-disable-next-line
+  } catch (e: any) {
+    emit(EventType.SESSION_INVALID);
+    return Promise.reject({
+      code: e.code,
+      message: e.msg,
+    });
+  }
+
+  return;
+}
+
+export async function signInWithMagicLink (email: string, authUrl: string) {
   const res = await axiosInstance?.post(
     '/magiclink',
     {
@@ -60,13 +103,13 @@ export async function signInWithMagicLink(email: string, authUrl: string) {
   return res?.data;
 }
 
-export async function settings() {
+export async function settings () {
   const res = await axiosInstance?.get('/settings');
 
   return res?.data;
 }
 
-export function signInGoogle(authUrl: string) {
+export function signInGoogle (authUrl: string) {
   const provider = 'google';
   const redirectTo = encodeURIComponent(authUrl);
   const accessType = 'offline';
@@ -77,7 +120,7 @@ export function signInGoogle(authUrl: string) {
   window.open(url, '_current');
 }
 
-export function signInApple(authUrl: string) {
+export function signInApple (authUrl: string) {
   const provider = 'apple';
   const redirectTo = encodeURIComponent(authUrl);
   const baseURL = axiosInstance?.defaults.baseURL;
@@ -86,7 +129,7 @@ export function signInApple(authUrl: string) {
   window.open(url, '_current');
 }
 
-export function signInGithub(authUrl: string) {
+export function signInGithub (authUrl: string) {
   const provider = 'github';
   const redirectTo = encodeURIComponent(authUrl);
   const baseURL = axiosInstance?.defaults.baseURL;
@@ -95,7 +138,7 @@ export function signInGithub(authUrl: string) {
   window.open(url, '_current');
 }
 
-export function signInDiscord(authUrl: string) {
+export function signInDiscord (authUrl: string) {
   const provider = 'discord';
   const redirectTo = encodeURIComponent(authUrl);
   const baseURL = axiosInstance?.defaults.baseURL;
@@ -103,3 +146,4 @@ export function signInDiscord(authUrl: string) {
 
   window.open(url, '_current');
 }
+
diff --git a/src/application/services/js-services/index.ts b/src/application/services/js-services/index.ts
index 74b02fc0..51c6cd00 100644
--- a/src/application/services/js-services/index.ts
+++ b/src/application/services/js-services/index.ts
@@ -69,56 +69,56 @@ export class AFClientService implements AFService {
     }
   > = new Map();
 
-  constructor(config: AFServiceConfig) {
+  constructor (config: AFServiceConfig) {
     APIService.initAPIService(config.cloudConfig);
   }
 
-  getAxiosInstance() {
+  getAxiosInstance () {
     return APIService.getAxiosInstance();
   }
 
-  getClientId() {
+  getClientId () {
     return this.clientId;
   }
 
-  async publishView(workspaceId: string, viewId: string, payload?: PublishViewPayload) {
-    if(this.publishViewInfo.has(viewId)) {
+  async publishView (workspaceId: string, viewId: string, payload?: PublishViewPayload) {
+    if (this.publishViewInfo.has(viewId)) {
       this.publishViewInfo.delete(viewId);
     }
 
     return APIService.publishView(workspaceId, viewId, payload);
   }
 
-  async unpublishView(workspaceId: string, viewId: string) {
-    if(this.publishViewInfo.has(viewId)) {
+  async unpublishView (workspaceId: string, viewId: string) {
+    if (this.publishViewInfo.has(viewId)) {
       this.publishViewInfo.delete(viewId);
     }
 
     return APIService.unpublishView(workspaceId, viewId);
   }
 
-  async updatePublishNamespace(workspaceId: string, payload: UploadPublishNamespacePayload) {
+  async updatePublishNamespace (workspaceId: string, payload: UploadPublishNamespacePayload) {
     this.publishViewInfo.clear();
     return APIService.updatePublishNamespace(workspaceId, payload);
   }
 
-  async getPublishNamespace(workspaceId: string) {
+  async getPublishNamespace (workspaceId: string) {
     return APIService.getPublishNamespace(workspaceId);
   }
 
-  async getPublishHomepage(workspaceId: string) {
+  async getPublishHomepage (workspaceId: string) {
     return APIService.getPublishHomepage(workspaceId);
   }
 
-  async updatePublishHomepage(workspaceId: string, viewId: string) {
+  async updatePublishHomepage (workspaceId: string, viewId: string) {
     return APIService.updatePublishHomepage(workspaceId, viewId);
   }
 
-  async removePublishHomepage(workspaceId: string) {
+  async removePublishHomepage (workspaceId: string) {
     return APIService.removePublishHomepage(workspaceId);
   }
 
-  async getPublishViewMeta(namespace: string, publishName: string) {
+  async getPublishViewMeta (namespace: string, publishName: string) {
     const name = `${namespace}_${publishName}`;
 
     const isLoaded = this.publishViewLoaded.has(name);
@@ -133,26 +133,26 @@ export class AFClientService implements AFService {
       isLoaded ? StrategyType.CACHE_FIRST : StrategyType.CACHE_AND_NETWORK,
     );
 
-    if(!viewMeta) {
+    if (!viewMeta) {
       return Promise.reject(new Error('View has not been published yet'));
     }
 
     return viewMeta;
   }
 
-  async getPublishView(namespace: string, publishName: string) {
+  async getPublishView (namespace: string, publishName: string) {
     const name = `${namespace}_${publishName}`;
 
     const isLoaded = this.publishViewLoaded.has(name);
 
     const { doc } = await getPublishView(
-      async() => {
+      async () => {
         try {
           return await fetchPublishView(namespace, publishName);
-        } catch(e) {
+        } catch (e) {
           console.error(e);
-          void (async() => {
-            if(await hasViewMetaCache(name)) {
+          void (async () => {
+            if (await hasViewMetaCache(name)) {
               this.publishViewLoaded.delete(name);
               void deleteView(name);
             }
@@ -168,17 +168,17 @@ export class AFClientService implements AFService {
       isLoaded ? StrategyType.CACHE_FIRST : StrategyType.CACHE_AND_NETWORK,
     );
 
-    if(!isLoaded) {
+    if (!isLoaded) {
       this.publishViewLoaded.add(name);
     }
 
     return doc;
   }
 
-  async getPublishRowDocument(viewId: string) {
+  async getPublishRowDocument (viewId: string) {
     const doc = await openCollabDB(viewId);
 
-    if(hasCollabCache(doc)) {
+    if (hasCollabCache(doc)) {
       return doc;
     }
 
@@ -186,15 +186,15 @@ export class AFClientService implements AFService {
 
   }
 
-  async createRowDoc(rowKey: string) {
+  async createRowDoc (rowKey: string) {
     return createRowDoc(rowKey);
   }
 
-  deleteRowDoc(rowKey: string) {
+  deleteRowDoc (rowKey: string) {
     return deleteRowDoc(rowKey);
   }
 
-  async getAppDatabaseViewRelations(workspaceId: string, databaseStorageId: string) {
+  async getAppDatabaseViewRelations (workspaceId: string, databaseStorageId: string) {
 
     const res = await APIService.getCollab(workspaceId, databaseStorageId, Types.WorkspaceDatabase);
     const doc = new Y.Doc();
@@ -213,8 +213,8 @@ export class AFClientService implements AFService {
     return result;
   }
 
-  async getPublishInfo(viewId: string) {
-    if(this.publishViewInfo.has(viewId)) {
+  async getPublishInfo (viewId: string) {
+    if (this.publishViewInfo.has(viewId)) {
       return this.publishViewInfo.get(viewId) as {
         namespace: string;
         publishName: string;
@@ -230,7 +230,7 @@ export class AFClientService implements AFService {
 
     const namespace = info.namespace;
 
-    if(!namespace) {
+    if (!namespace) {
       return Promise.reject(new Error('View not found'));
     }
 
@@ -249,85 +249,90 @@ export class AFClientService implements AFService {
     return data;
   }
 
-  async updatePublishConfig(workspaceId: string, config: UpdatePublishConfigPayload) {
+  async updatePublishConfig (workspaceId: string, config: UpdatePublishConfigPayload) {
     this.publishViewInfo.delete(config.view_id);
     return APIService.updatePublishConfig(workspaceId, config);
   }
 
-  async getPublishOutline(namespace: string) {
+  async getPublishOutline (namespace: string) {
     return APIService.getPublishOutline(namespace);
   }
 
-  async getAppOutline(workspaceId: string) {
+  async getAppOutline (workspaceId: string) {
     return APIService.getAppOutline(workspaceId);
   }
 
-  async getAppView(workspaceId: string, viewId: string) {
+  async getAppView (workspaceId: string, viewId: string) {
     return APIService.getView(workspaceId, viewId);
   }
 
-  async getAppFavorites(workspaceId: string) {
+  async getAppFavorites (workspaceId: string) {
     return APIService.getAppFavorites(workspaceId);
   }
 
-  async getAppRecent(workspaceId: string) {
+  async getAppRecent (workspaceId: string) {
     return APIService.getAppRecent(workspaceId);
   }
 
-  async getAppTrash(workspaceId: string) {
+  async getAppTrash (workspaceId: string) {
     return APIService.getAppTrash(workspaceId);
   }
 
-  async loginAuth(url: string) {
+  async loginAuth (url: string) {
     try {
       await APIService.signInWithUrl(url);
       emit(EventType.SESSION_VALID);
       afterAuth();
       return;
-    } catch(e) {
+    } catch (e) {
       emit(EventType.SESSION_INVALID);
       return Promise.reject(e);
     }
   }
 
   @withSignIn()
-  async signInMagicLink({ email }: { email: string; redirectTo: string }) {
+  async signInMagicLink ({ email }: { email: string; redirectTo: string }) {
     return await APIService.signInWithMagicLink(email, AUTH_CALLBACK_URL);
   }
 
   @withSignIn()
-  async signInGoogle(_: { redirectTo: string }) {
+  async signInOTP (params: { email: string; code: string; redirectTo: string }) {
+    return APIService.signInOTP(params);
+  }
+
+  @withSignIn()
+  async signInGoogle (_: { redirectTo: string }) {
     return APIService.signInGoogle(AUTH_CALLBACK_URL);
   }
 
   @withSignIn()
-  async signInApple(_: { redirectTo: string }) {
+  async signInApple (_: { redirectTo: string }) {
     return APIService.signInApple(AUTH_CALLBACK_URL);
   }
 
   @withSignIn()
-  async signInGithub(_: { redirectTo: string }) {
+  async signInGithub (_: { redirectTo: string }) {
     return APIService.signInGithub(AUTH_CALLBACK_URL);
   }
 
   @withSignIn()
-  async signInDiscord(_: { redirectTo: string }) {
+  async signInDiscord (_: { redirectTo: string }) {
     return APIService.signInDiscord(AUTH_CALLBACK_URL);
   }
 
-  async getWorkspaces() {
+  async getWorkspaces () {
     const data = APIService.getWorkspaces();
 
     return data;
   }
 
-  async getWorkspaceFolder(workspaceId: string) {
+  async getWorkspaceFolder (workspaceId: string) {
     const data = await APIService.getWorkspaceFolder(workspaceId);
 
     return data;
   }
 
-  async getCurrentUser() {
+  async getCurrentUser () {
     const token = getTokenParsed();
     const userId = token?.user?.id;
 
@@ -337,29 +342,29 @@ export class AFClientService implements AFService {
       StrategyType.CACHE_AND_NETWORK,
     );
 
-    if(!user) {
+    if (!user) {
       return Promise.reject(new Error('User not found'));
     }
 
     return user;
   }
 
-  async openWorkspace(workspaceId: string) {
+  async openWorkspace (workspaceId: string) {
     return APIService.openWorkspace(workspaceId);
   }
 
-  async createWorkspace(payload: CreateWorkspacePayload) {
+  async createWorkspace (payload: CreateWorkspacePayload) {
     return APIService.createWorkspace(payload);
   }
 
-  async updateWorkspace(workspaceId: string, payload: UpdateWorkspacePayload) {
+  async updateWorkspace (workspaceId: string, payload: UpdateWorkspacePayload) {
     return APIService.updateWorkspace(workspaceId, payload);
   }
 
-  async getUserWorkspaceInfo() {
+  async getUserWorkspaceInfo () {
     const workspaceInfo = await APIService.getUserWorkspaceInfo();
 
-    if(!workspaceInfo) {
+    if (!workspaceInfo) {
       return Promise.reject(new Error('Workspace info not found'));
     }
 
@@ -370,7 +375,7 @@ export class AFClientService implements AFService {
     };
   }
 
-  async duplicatePublishView(params: DuplicatePublishView) {
+  async duplicatePublishView (params: DuplicatePublishView) {
     return APIService.duplicatePublishView(params.workspaceId, {
       dest_view_id: params.spaceViewId,
       published_view_id: params.viewId,
@@ -378,97 +383,97 @@ export class AFClientService implements AFService {
     });
   }
 
-  createCommentOnPublishView(viewId: string, content: string, replyCommentId: string | undefined): Promise<void> {
+  createCommentOnPublishView (viewId: string, content: string, replyCommentId: string | undefined): Promise<void> {
     return APIService.createGlobalCommentOnPublishView(viewId, content, replyCommentId);
   }
 
-  deleteCommentOnPublishView(viewId: string, commentId: string): Promise<void> {
+  deleteCommentOnPublishView (viewId: string, commentId: string): Promise<void> {
     return APIService.deleteGlobalCommentOnPublishView(viewId, commentId);
   }
 
-  getPublishViewGlobalComments(viewId: string): Promise<GlobalComment[]> {
+  getPublishViewGlobalComments (viewId: string): Promise<GlobalComment[]> {
     return APIService.getPublishViewComments(viewId);
   }
 
-  getPublishViewReactions(viewId: string, commentId?: string): Promise<Record<string, Reaction[]>> {
+  getPublishViewReactions (viewId: string, commentId?: string): Promise<Record<string, Reaction[]>> {
     return APIService.getReactions(viewId, commentId);
   }
 
-  addPublishViewReaction(viewId: string, commentId: string, reactionType: string): Promise<void> {
+  addPublishViewReaction (viewId: string, commentId: string, reactionType: string): Promise<void> {
     return APIService.addReaction(viewId, commentId, reactionType);
   }
 
-  removePublishViewReaction(viewId: string, commentId: string, reactionType: string): Promise<void> {
+  removePublishViewReaction (viewId: string, commentId: string, reactionType: string): Promise<void> {
     return APIService.removeReaction(viewId, commentId, reactionType);
   }
 
-  async getTemplateCategories() {
+  async getTemplateCategories () {
     return APIService.getTemplateCategories();
   }
 
-  async getTemplateCreators() {
+  async getTemplateCreators () {
     return APIService.getTemplateCreators();
   }
 
-  async createTemplate(template: UploadTemplatePayload) {
+  async createTemplate (template: UploadTemplatePayload) {
     return APIService.createTemplate(template);
   }
 
-  async updateTemplate(id: string, template: UploadTemplatePayload) {
+  async updateTemplate (id: string, template: UploadTemplatePayload) {
     return APIService.updateTemplate(id, template);
   }
 
-  async getTemplateById(id: string) {
+  async getTemplateById (id: string) {
     return APIService.getTemplateById(id);
   }
 
-  async getTemplates(params: {
+  async getTemplates (params: {
     categoryId?: string;
     nameContains?: string;
   }) {
     return APIService.getTemplates(params);
   }
 
-  async deleteTemplate(id: string) {
+  async deleteTemplate (id: string) {
     return APIService.deleteTemplate(id);
   }
 
-  async addTemplateCategory(category: TemplateCategoryFormValues) {
+  async addTemplateCategory (category: TemplateCategoryFormValues) {
     return APIService.addTemplateCategory(category);
   }
 
-  async updateTemplateCategory(categoryId: string, category: TemplateCategoryFormValues) {
+  async updateTemplateCategory (categoryId: string, category: TemplateCategoryFormValues) {
     return APIService.updateTemplateCategory(categoryId, category);
   }
 
-  async deleteTemplateCategory(categoryId: string) {
+  async deleteTemplateCategory (categoryId: string) {
     return APIService.deleteTemplateCategory(categoryId);
   }
 
-  async updateTemplateCreator(creatorId: string, creator: TemplateCreatorFormValues) {
+  async updateTemplateCreator (creatorId: string, creator: TemplateCreatorFormValues) {
     return APIService.updateTemplateCreator(creatorId, creator);
   }
 
-  async createTemplateCreator(creator: TemplateCreatorFormValues) {
+  async createTemplateCreator (creator: TemplateCreatorFormValues) {
     return APIService.createTemplateCreator(creator);
   }
 
-  async deleteTemplateCreator(creatorId: string) {
+  async deleteTemplateCreator (creatorId: string) {
     return APIService.deleteTemplateCreator(creatorId);
   }
 
-  async uploadTemplateAvatar(file: File) {
+  async uploadTemplateAvatar (file: File) {
     return APIService.uploadTemplateAvatar(file);
   }
 
-  async getPageDoc(workspaceId: string, viewId: string, errorCallback?: (error: {
+  async getPageDoc (workspaceId: string, viewId: string, errorCallback?: (error: {
     code: number;
   }) => void) {
 
     const token = getTokenParsed();
     const userId = token?.user.id;
 
-    if(!userId) {
+    if (!userId) {
       throw new Error('User not found');
     }
 
@@ -477,15 +482,15 @@ export class AFClientService implements AFService {
     const isLoaded = this.viewLoaded.has(name);
 
     const { doc } = await getPageDoc(
-      async() => {
+      async () => {
         try {
           return await fetchPageCollab(workspaceId, viewId);
           // eslint-disable-next-line
-        } catch(e: any) {
+        } catch (e: any) {
           console.error(e);
 
           errorCallback?.(e);
-          void (async() => {
+          void (async () => {
             this.viewLoaded.delete(name);
             void deleteView(name);
           })();
@@ -497,60 +502,60 @@ export class AFClientService implements AFService {
       isLoaded ? StrategyType.CACHE_FIRST : StrategyType.CACHE_AND_NETWORK,
     );
 
-    if(!isLoaded) {
+    if (!isLoaded) {
       this.viewLoaded.add(name);
     }
 
     return doc;
   }
 
-  async getInvitation(invitationId: string) {
+  async getInvitation (invitationId: string) {
     return APIService.getInvitation(invitationId);
   }
 
-  async acceptInvitation(invitationId: string) {
+  async acceptInvitation (invitationId: string) {
     return APIService.acceptInvitation(invitationId);
   }
 
-  approveRequestAccess(requestId: string): Promise<void> {
+  approveRequestAccess (requestId: string): Promise<void> {
     return APIService.approveRequestAccess(requestId);
   }
 
-  getRequestAccessInfo(requestId: string) {
+  getRequestAccessInfo (requestId: string) {
     return APIService.getRequestAccessInfo(requestId);
   }
 
-  sendRequestAccess(workspaceId: string, viewId: string): Promise<void> {
+  sendRequestAccess (workspaceId: string, viewId: string): Promise<void> {
     return APIService.sendRequestAccess(workspaceId, viewId);
   }
 
-  getSubscriptionLink(workspaceId: string, plan: SubscriptionPlan, interval: SubscriptionInterval) {
+  getSubscriptionLink (workspaceId: string, plan: SubscriptionPlan, interval: SubscriptionInterval) {
     return APIService.getSubscriptionLink(workspaceId, plan, interval);
   }
 
-  cancelSubscription(workspaceId: string, plan: SubscriptionPlan, reason?: string) {
+  cancelSubscription (workspaceId: string, plan: SubscriptionPlan, reason?: string) {
     return APIService.cancelSubscription(workspaceId, plan, reason);
   }
 
-  getSubscriptions() {
+  getSubscriptions () {
     return APIService.getSubscriptions();
   }
 
-  getActiveSubscription(workspaceId: string) {
+  getActiveSubscription (workspaceId: string) {
     return APIService.getActiveSubscription(workspaceId);
   }
 
-  getWorkspaceSubscriptions(workspaceId: string) {
+  getWorkspaceSubscriptions (workspaceId: string) {
     return APIService.getWorkspaceSubscriptions(workspaceId);
   }
 
-  registerDocUpdate(doc: Y.Doc, context: {
+  registerDocUpdate (doc: Y.Doc, context: {
     workspaceId: string, objectId: string, collabType: Types
   }) {
     const token = getTokenParsed();
     const userId = token?.user.id;
 
-    if(!userId) {
+    if (!userId) {
       throw new Error('User not found');
     }
 
@@ -559,69 +564,69 @@ export class AFClientService implements AFService {
     sync.initialize();
   }
 
-  async importFile(file: File, onProgress: (progress: number) => void) {
+  async importFile (file: File, onProgress: (progress: number) => void) {
     const task = await APIService.createImportTask(file);
 
     await APIService.uploadImportFile(task.presignedUrl, file, onProgress);
   }
 
-  async createSpace(workspaceId: string, payload: CreateSpacePayload) {
+  async createSpace (workspaceId: string, payload: CreateSpacePayload) {
     return APIService.createSpace(workspaceId, payload);
   }
 
-  async updateSpace(workspaceId: string, payload: UpdateSpacePayload) {
+  async updateSpace (workspaceId: string, payload: UpdateSpacePayload) {
     return APIService.updateSpace(workspaceId, payload);
   }
 
-  async addAppPage(workspaceId: string, parentViewId: string, payload: CreatePagePayload) {
+  async addAppPage (workspaceId: string, parentViewId: string, payload: CreatePagePayload) {
     return APIService.addAppPage(workspaceId, parentViewId, payload);
   }
 
-  async updateAppPage(workspaceId: string, viewId: string, data: UpdatePagePayload) {
+  async updateAppPage (workspaceId: string, viewId: string, data: UpdatePagePayload) {
     return APIService.updatePage(workspaceId, viewId, data);
   }
 
-  async duplicateAppPage(workspaceId: string, viewId: string) {
+  async duplicateAppPage (workspaceId: string, viewId: string) {
     return APIService.duplicatePage(workspaceId, viewId);
   }
 
-  async deleteTrash(workspaceId: string, viewId?: string) {
+  async deleteTrash (workspaceId: string, viewId?: string) {
     return APIService.deleteTrash(workspaceId, viewId);
   }
 
-  async moveToTrash(workspaceId: string, viewId: string) {
+  async moveToTrash (workspaceId: string, viewId: string) {
     return APIService.moveToTrash(workspaceId, viewId);
   }
 
-  async restoreFromTrash(workspaceId: string, viewId?: string) {
+  async restoreFromTrash (workspaceId: string, viewId?: string) {
     return APIService.restorePage(workspaceId, viewId);
   }
 
-  async movePage(workspaceId: string, viewId: string, parentId: string, prevViewId?: string) {
+  async movePage (workspaceId: string, viewId: string, parentId: string, prevViewId?: string) {
     return APIService.movePageTo(workspaceId, viewId, parentId, prevViewId);
   }
 
-  async uploadFile(workspaceId: string, viewId: string, file: File, onProgress?: (progress: number) => void) {
+  async uploadFile (workspaceId: string, viewId: string, file: File, onProgress?: (progress: number) => void) {
     return APIService.uploadFile(workspaceId, viewId, file, onProgress);
   }
 
-  deleteWorkspace(workspaceId: string): Promise<void> {
+  deleteWorkspace (workspaceId: string): Promise<void> {
     return APIService.deleteWorkspace(workspaceId);
   }
 
-  leaveWorkspace(workspaceId: string): Promise<void> {
+  leaveWorkspace (workspaceId: string): Promise<void> {
     return APIService.leaveWorkspace(workspaceId);
   }
 
-  inviteMembers(workspaceId: string, emails: string[]): Promise<void> {
+  inviteMembers (workspaceId: string, emails: string[]): Promise<void> {
     return APIService.inviteMembers(workspaceId, emails);
   }
 
-  getWorkspaceMembers(workspaceId: string): Promise<WorkspaceMember[]> {
+  getWorkspaceMembers (workspaceId: string): Promise<WorkspaceMember[]> {
     return APIService.getMembers(workspaceId);
   }
 
-  getQuickNoteList(workspaceId: string, params: {
+  getQuickNoteList (workspaceId: string, params: {
     offset?: number;
     limit?: number;
     searchTerm?: string;
@@ -629,23 +634,23 @@ export class AFClientService implements AFService {
     return APIService.getQuickNoteList(workspaceId, params);
   }
 
-  createQuickNote(workspaceId: string, data: QuickNoteEditorData[]) {
+  createQuickNote (workspaceId: string, data: QuickNoteEditorData[]) {
     return APIService.createQuickNote(workspaceId, data);
   }
 
-  updateQuickNote(workspaceId: string, id: string, data: QuickNoteEditorData[]) {
+  updateQuickNote (workspaceId: string, id: string, data: QuickNoteEditorData[]) {
     return APIService.updateQuickNote(workspaceId, id, data);
   }
 
-  deleteQuickNote(workspaceId: string, id: string) {
+  deleteQuickNote (workspaceId: string, id: string) {
     return APIService.deleteQuickNote(workspaceId, id);
   }
 
-  searchWorkspace(workspaceId: string, query: string) {
+  searchWorkspace (workspaceId: string, query: string) {
     return APIService.searchWorkspace(workspaceId, query);
   }
 
-  async getChatMessages(
+  async getChatMessages (
     workspaceId: string,
     chatId: string,
     limit?: number | undefined,
diff --git a/src/application/services/services.type.ts b/src/application/services/services.type.ts
index 3c607b3b..27b7835b 100644
--- a/src/application/services/services.type.ts
+++ b/src/application/services/services.type.ts
@@ -85,6 +85,7 @@ export interface AppService {
   getAppTrash: (workspaceId: string) => Promise<View[]>;
   loginAuth: (url: string) => Promise<void>;
   signInMagicLink: (params: { email: string; redirectTo: string }) => Promise<void>;
+  signInOTP: (params: { email: string; code: string; redirectTo: string }) => Promise<void>;
   signInGoogle: (params: { redirectTo: string }) => Promise<void>;
   signInGithub: (params: { redirectTo: string }) => Promise<void>;
   signInDiscord: (params: { redirectTo: string }) => Promise<void>;
@@ -174,7 +175,7 @@ export interface PublishService {
   updatePublishHomepage: (workspaceId: string, viewId: string) => Promise<void>;
   removePublishHomepage: (workspaceId: string) => Promise<void>;
 
-  getPublishOutline(namespace: string): Promise<View[]>;
+  getPublishOutline (namespace: string): Promise<View[]>;
 
   getPublishViewGlobalComments: (viewId: string) => Promise<GlobalComment[]>;
   createCommentOnPublishView: (viewId: string, content: string, replyCommentId?: string) => Promise<void>;
diff --git a/src/application/session/sign_in.ts b/src/application/session/sign_in.ts
index 00a8da63..474175f3 100644
--- a/src/application/session/sign_in.ts
+++ b/src/application/session/sign_in.ts
@@ -1,20 +1,20 @@
-export function saveRedirectTo(redirectTo: string) {
+export function saveRedirectTo (redirectTo: string) {
   localStorage.setItem('redirectTo', redirectTo);
 }
 
-export function getRedirectTo() {
+export function getRedirectTo () {
   return localStorage.getItem('redirectTo');
 }
 
-export function clearRedirectTo() {
+export function clearRedirectTo () {
   localStorage.removeItem('redirectTo');
 }
 
 export const AUTH_CALLBACK_PATH = '/auth/callback';
 export const AUTH_CALLBACK_URL = `${window.location.origin}${AUTH_CALLBACK_PATH}`;
 
-export function withSignIn() {
-  return function(
+export function withSignIn () {
+  return function (
     // eslint-disable-next-line
     _target: any,
     _propertyKey: string,
@@ -23,14 +23,14 @@ export function withSignIn() {
     const originalMethod = descriptor.value;
 
     // eslint-disable-next-line
-    descriptor.value = async function(args: { redirectTo: string }) {
+    descriptor.value = async function (args: { redirectTo: string }) {
       const redirectTo = args.redirectTo;
 
       saveRedirectTo(redirectTo);
 
       try {
         await originalMethod.apply(this, [args]);
-      } catch(e) {
+      } catch (e) {
         console.error(e);
         return Promise.reject(e);
       }
@@ -40,18 +40,21 @@ export function withSignIn() {
   };
 }
 
-export function afterAuth() {
+export function afterAuth () {
   const redirectTo = getRedirectTo();
+  
+  clearRedirectTo();
 
-  if(redirectTo) {
-    clearRedirectTo();
+  if (redirectTo) {
     const url = new URL(decodeURIComponent(redirectTo));
     const pathname = url.pathname;
 
-    if(pathname === '/' || !pathname) {
+    if (pathname === '/' || !pathname) {
       url.pathname = '/app';
     }
 
     window.location.href = url.toString();
+  } else {
+    window.location.href = '/app';
   }
 }
diff --git a/src/assets/login/apple.svg b/src/assets/login/apple.svg
index 9be1f9f0..b4d89ac6 100644
--- a/src/assets/login/apple.svg
+++ b/src/assets/login/apple.svg
@@ -1,46 +1,4 @@
-<svg fill="currentColor" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     viewBox="0 0 22.773 22.773" xml:space="preserve">
-<g>
-	<g>
-		<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
-			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
-        <path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
-			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
-			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
-			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
-			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
-			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-    <g>
-	</g>
-</g>
-</svg>
\ No newline at end of file
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.5848 7.95495C16.4922 8.02695 14.857 8.95024 14.857 11.0033C14.857 13.3779 16.9377 14.218 17 14.2388C16.9904 14.29 16.6695 15.3893 15.903 16.5094C15.2195 17.4951 14.5057 18.4792 13.4199 18.4792C12.334 18.4792 12.0545 17.8471 10.801 17.8471C9.57941 17.8471 9.14507 18.5 8.15182 18.5C7.15858 18.5 6.46554 17.5879 5.66871 16.4678C4.74573 15.1525 4 13.1091 4 11.1697C4 8.05896 6.01843 6.40919 8.00491 6.40919C9.06044 6.40919 9.9403 7.10366 10.603 7.10366C11.2338 7.10366 12.2174 6.36759 13.4183 6.36759C13.8734 6.36759 15.5085 6.40919 16.5848 7.95495ZM12.8482 5.05065C13.3448 4.4602 13.6961 3.64091 13.6961 2.82163C13.6961 2.70802 13.6865 2.59281 13.6658 2.5C12.8578 2.5304 11.8965 3.03925 11.3168 3.71292C10.8617 4.23137 10.4369 5.05065 10.4369 5.88114C10.4369 6.00595 10.4577 6.13076 10.4673 6.17077C10.5184 6.18037 10.6014 6.19157 10.6844 6.19157C11.4094 6.19157 12.3212 5.70512 12.8482 5.05065Z"
+          fill="currentColor"/>
+</svg>
diff --git a/src/assets/login/discord.svg b/src/assets/login/discord.svg
index 901b2fd9..8aea08cf 100644
--- a/src/assets/login/discord.svg
+++ b/src/assets/login/discord.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
-    <path d="M16.3916 2.18032C16.3865 2.17042 16.378 2.16267 16.3677 2.15844C15.1764 1.61184 13.9191 1.22207 12.6275 0.998881C12.6158 0.996699 12.6037 0.998273 12.5929 1.00338C12.5821 1.00848 12.5732 1.01686 12.5674 1.02732C12.3962 1.33803 12.2408 1.65719 12.1018 1.98357C10.7095 1.77222 9.29329 1.77222 7.901 1.98357C7.76105 1.65636 7.60315 1.33713 7.42803 1.02732C7.42202 1.01709 7.41307 1.0089 7.40235 1.00383C7.39162 0.99876 7.37962 0.997034 7.3679 0.998881C6.07615 1.2216 4.81885 1.6114 3.62765 2.15847C3.61745 2.1628 3.60885 2.17018 3.60303 2.1796C1.22087 5.73704 0.568308 9.20701 0.888433 12.634C0.889334 12.6424 0.891914 12.6505 0.896021 12.6579C0.900128 12.6653 0.905677 12.6718 0.912339 12.677C2.29945 13.704 3.85094 14.488 5.50062 14.9954C5.51224 14.9989 5.52464 14.9987 5.53617 14.9949C5.5477 14.9912 5.55779 14.9839 5.56509 14.9743C5.9194 14.4922 6.23335 13.9817 6.50375 13.4479C6.50746 13.4406 6.50958 13.4326 6.50997 13.4244C6.51036 13.4162 6.509 13.408 6.50599 13.4004C6.50298 13.3927 6.49839 13.3858 6.49251 13.3801C6.48664 13.3743 6.47961 13.3699 6.4719 13.3671C5.97683 13.1776 5.49754 12.9493 5.03853 12.6842C5.03019 12.6793 5.02319 12.6724 5.01814 12.6641C5.01309 12.6559 5.01015 12.6465 5.00958 12.6369C5.00901 12.6272 5.01082 12.6176 5.01486 12.6088C5.0189 12.6 5.02504 12.5923 5.03275 12.5865C5.12933 12.5143 5.22424 12.44 5.3174 12.3634C5.32557 12.3567 5.33546 12.3524 5.34595 12.351C5.35644 12.3496 5.36712 12.3511 5.37678 12.3554C8.38393 13.7278 11.6396 13.7278 14.6112 12.3554C14.6208 12.3508 14.6316 12.3491 14.6423 12.3504C14.6529 12.3517 14.663 12.3559 14.6713 12.3627C14.7645 12.4396 14.8597 12.5143 14.9567 12.5865C14.9644 12.5923 14.9706 12.5999 14.9747 12.6086C14.9788 12.6174 14.9807 12.627 14.9802 12.6367C14.9797 12.6463 14.9768 12.6557 14.9718 12.664C14.9668 12.6723 14.9599 12.6792 14.9516 12.6842C14.4936 12.9515 14.0139 13.1797 13.5175 13.3663C13.5098 13.3693 13.5028 13.3738 13.497 13.3796C13.4911 13.3855 13.4866 13.3925 13.4836 13.4002C13.4807 13.4079 13.4794 13.4161 13.4799 13.4243C13.4803 13.4326 13.4825 13.4406 13.4863 13.4479C13.7612 13.9787 14.0747 14.4885 14.4242 14.9734C14.4313 14.9834 14.4414 14.9908 14.4529 14.9947C14.4645 14.9987 14.477 14.9989 14.4887 14.9953C16.1413 14.4896 17.6955 13.7056 19.0844 12.677C19.0911 12.672 19.0968 12.6657 19.1009 12.6584C19.105 12.6511 19.1075 12.6431 19.1083 12.6347C19.4915 8.67276 18.4667 5.23122 16.3916 2.18032ZM6.95284 10.5473C6.04746 10.5473 5.30146 9.71647 5.30146 8.6961C5.30146 7.67572 6.033 6.84482 6.95284 6.84482C7.87987 6.84482 8.61865 7.68294 8.60418 8.69604C8.60418 9.71647 7.87262 10.5473 6.95284 10.5473ZM13.0585 10.5473C12.1531 10.5473 11.4071 9.71647 11.4071 8.6961C11.4071 7.67572 12.1387 6.84482 13.0585 6.84482C13.9856 6.84482 14.7243 7.68294 14.7098 8.69604C14.7098 9.71647 13.9856 10.5473 13.0585 10.5473Z"
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.7524 4.43555C12.596 4.71315 12.4556 5.00033 12.328 5.29389C11.1154 5.11201 9.88058 5.11201 8.66486 5.29389C8.54042 5.00033 8.39682 4.71315 8.24048 4.43555C7.10134 4.6302 5.99091 4.97161 4.93793 5.45343C2.8511 8.54539 2.28631 11.5576 2.56711 14.5283C3.78921 15.4313 5.1581 16.1205 6.61632 16.5608C6.94498 16.1205 7.23535 15.6514 7.48424 15.1632C7.01199 14.9877 6.55569 14.7676 6.11855 14.5123C6.23342 14.4293 6.3451 14.3432 6.45358 14.2602C9.01585 15.4664 11.9834 15.4664 14.5488 14.2602C14.6573 14.3496 14.769 14.4357 14.8839 14.5123C14.4467 14.7708 13.9904 14.9877 13.515 15.1664C13.7639 15.6546 14.0542 16.1237 14.3829 16.564C15.8411 16.1237 17.21 15.4377 18.4322 14.5346C18.7639 11.0885 17.8641 8.10185 16.0549 5.45663C15.0051 4.97481 13.8947 4.63338 12.7555 4.44193L12.7524 4.43555ZM7.84161 12.6999C7.05348 12.6999 6.39935 11.9851 6.39935 11.1013C6.39935 10.2174 7.02795 9.49946 7.83843 9.49946C8.64892 9.49946 9.29346 10.2206 9.2807 11.1013C9.26794 11.982 8.64572 12.6999 7.84161 12.6999ZM13.1576 12.6999C12.3663 12.6999 11.7185 11.9851 11.7185 11.1013C11.7185 10.2174 12.3471 9.49946 13.1576 9.49946C13.9681 9.49946 14.6095 10.2206 14.5967 11.1013C14.5839 11.982 13.9617 12.6999 13.1576 12.6999Z"
           fill="#5865F2"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/assets/login/github.svg b/src/assets/login/github.svg
index 0a73a316..154ed445 100644
--- a/src/assets/login/github.svg
+++ b/src/assets/login/github.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path d="M10.0002 0.83128C7.59472 0.806836 5.27798 1.73845 3.55911 3.42138C1.84023 5.10431 0.85988 7.40085 0.833496 9.80628C0.842765 11.7073 1.45428 13.5564 2.58021 15.0881C3.70615 16.6198 5.28856 17.7552 7.10016 18.3313C7.5585 18.4146 7.72516 18.1396 7.72516 17.8979V16.3729C5.17516 16.9146 4.6335 15.1729 4.6335 15.1729C4.46374 14.6262 4.10286 14.1588 3.61683 13.8563C2.7835 13.3063 3.6835 13.3146 3.6835 13.3146C3.97154 13.3531 4.24712 13.4563 4.48959 13.6165C4.73205 13.7767 4.93509 13.9898 5.0835 14.2396C5.34211 14.688 5.76644 15.017 6.26517 15.1557C6.7639 15.2944 7.29716 15.2318 7.75016 14.9813C7.79675 14.5249 8.00341 14.0998 8.3335 13.7813C6.30016 13.5563 4.16683 12.7896 4.16683 9.34795C4.14865 8.45018 4.48036 7.58054 5.09183 6.92295C4.81335 6.15217 4.84623 5.30321 5.1835 4.55628C5.1835 4.55628 5.9585 4.31461 7.6835 5.47295C9.18507 5.07281 10.7653 5.07281 12.2668 5.47295C14.0168 4.31461 14.7668 4.55628 14.7668 4.55628C15.1041 5.30321 15.137 6.15217 14.8585 6.92295C15.4842 7.56849 15.8339 8.43229 15.8335 9.33128C15.8335 12.7813 13.6835 13.5396 11.6668 13.7646C11.8876 13.979 12.0582 14.2397 12.1663 14.5278C12.2744 14.816 12.3172 15.1246 12.2918 15.4313V17.8896C12.2918 18.1813 12.4585 18.4146 12.9168 18.3229C14.7233 17.7433 16.3004 16.6076 17.4228 15.0781C18.5453 13.5485 19.1557 11.7034 19.1668 9.80628C19.1404 7.40085 18.1601 5.10431 16.4412 3.42138C14.7223 1.73845 12.4056 0.806836 10.0002 0.83128Z"
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.35161 15.1919C7.35161 15.2555 7.27742 15.3064 7.18387 15.3064C7.07742 15.3159 7.00323 15.265 7.00323 15.1919C7.00323 15.1283 7.07742 15.0775 7.17097 15.0775C7.26774 15.0679 7.35161 15.1188 7.35161 15.1919ZM6.34839 15.0489C6.32581 15.1124 6.39032 15.1856 6.4871 15.2046C6.57097 15.2364 6.66774 15.2046 6.6871 15.1411C6.70645 15.0775 6.64516 15.0044 6.54839 14.9758C6.46452 14.9535 6.37097 14.9853 6.34839 15.0489ZM7.77419 14.9948C7.68065 15.0171 7.61613 15.0775 7.62581 15.1506C7.63548 15.2142 7.71936 15.2555 7.81613 15.2332C7.90968 15.211 7.97419 15.1506 7.96452 15.087C7.95484 15.0266 7.86774 14.9853 7.77419 14.9948ZM9.89677 2.81396C5.42258 2.81396 2 6.16116 2 10.5701C2 14.0953 4.25161 17.1119 7.46774 18.1736C7.88065 18.2467 8.02581 17.9956 8.02581 17.7889C8.02581 17.5919 8.01613 16.5047 8.01613 15.8372C8.01613 15.8372 5.75806 16.314 5.28387 14.8899C5.28387 14.8899 4.91613 13.9649 4.3871 13.7265C4.3871 13.7265 3.64839 13.2275 4.43871 13.237C4.43871 13.237 5.24194 13.3006 5.68387 14.0571C6.39032 15.2841 7.57419 14.9313 8.03548 14.7215C8.10968 14.2129 8.31936 13.86 8.55161 13.6502C6.74839 13.4532 4.92903 13.1957 4.92903 10.1377C4.92903 9.2636 5.17419 8.82493 5.69032 8.26548C5.60645 8.05886 5.33226 7.20696 5.77419 6.10712C6.44839 5.90051 8 6.96538 8 6.96538C8.64516 6.78737 9.33871 6.69519 10.0258 6.69519C10.7129 6.69519 11.4065 6.78737 12.0516 6.96538C12.0516 6.96538 13.6032 5.89733 14.2774 6.10712C14.7194 7.21014 14.4452 8.05886 14.3613 8.26548C14.8774 8.82811 15.1935 9.26678 15.1935 10.1377C15.1935 13.2052 13.2935 13.45 11.4903 13.6502C11.7871 13.9014 12.0387 14.3782 12.0387 15.1252C12.0387 16.1964 12.029 17.5219 12.029 17.7826C12.029 17.9892 12.1774 18.2403 12.5871 18.1672C15.8129 17.1119 18 14.0953 18 10.5701C18 6.16116 14.371 2.81396 9.89677 2.81396ZM5.13548 13.7774C5.09355 13.8092 5.10323 13.8823 5.15806 13.9427C5.20968 13.9935 5.28387 14.0158 5.32581 13.9745C5.36774 13.9427 5.35806 13.8696 5.30323 13.8092C5.25161 13.7583 5.17742 13.7361 5.13548 13.7774ZM4.7871 13.5199C4.76452 13.5612 4.79677 13.6121 4.86129 13.6439C4.9129 13.6757 4.97742 13.6661 5 13.6216C5.02258 13.5803 4.99032 13.5294 4.92581 13.4977C4.86129 13.4786 4.80968 13.4881 4.7871 13.5199ZM5.83226 14.6515C5.78065 14.6929 5.8 14.7882 5.87419 14.8486C5.94839 14.9217 6.04194 14.9313 6.08387 14.8804C6.12581 14.8391 6.10645 14.7437 6.04194 14.6833C5.97097 14.6102 5.87419 14.6007 5.83226 14.6515ZM5.46452 14.1843C5.4129 14.216 5.4129 14.2987 5.46452 14.3718C5.51613 14.4449 5.60323 14.4767 5.64516 14.4449C5.69677 14.4036 5.69677 14.3209 5.64516 14.2478C5.6 14.1747 5.51613 14.1429 5.46452 14.1843Z"
           fill="currentColor"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/assets/login/google.svg b/src/assets/login/google.svg
index 3ffa2aab..9b6d682b 100644
--- a/src/assets/login/google.svg
+++ b/src/assets/login/google.svg
@@ -1,2 +1,10 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+    <path d="M5.35037 10.5C5.35037 9.98044 5.43901 9.48202 5.59583 9.01496L2.84257 6.95581C2.2894 8.05526 2.00214 9.26924 2.00391 10.5C2.00391 11.7737 2.30529 12.9751 2.84121 14.0415L5.59311 11.9789C5.43265 11.5023 5.35067 11.0029 5.35037 10.5Z"
+          fill="#FBBC05"/>
+    <path d="M10.186 5.77282C11.3383 5.77282 12.3794 6.17238 13.1976 6.82694L15.5779 4.49983C14.1277 3.26366 12.2683 2.5 10.186 2.5C6.95268 2.5 4.17352 4.31028 2.84257 6.95581L5.59719 9.01496C6.2313 7.12899 8.03953 5.77282 10.186 5.77282Z"
+          fill="#EA4335"/>
+    <path d="M10.186 15.2272C8.03885 15.2272 6.23062 13.871 5.59583 11.985L2.84257 14.0442C4.17283 16.6897 6.952 18.5 10.186 18.5C12.181 18.5 14.0861 17.8066 15.5166 16.5063L12.9024 14.5276C12.1653 14.9824 11.2373 15.2272 10.186 15.2272Z"
+          fill="#34A853"/>
+    <path d="M17.9957 10.5C17.9957 10.0275 17.9207 9.51815 17.8096 9.04564H10.1853V12.1364H14.5736C14.3547 13.1905 13.7567 14.0006 12.9024 14.5276L15.5166 16.5063C17.0186 15.1413 17.9957 13.108 17.9957 10.5Z"
+          fill="#4285F4"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/editor/editor.scss b/src/components/editor/editor.scss
index b6ef116c..55944ef8 100644
--- a/src/components/editor/editor.scss
+++ b/src/components/editor/editor.scss
@@ -36,12 +36,24 @@
 
 .block-element.selected {
   &:not([data-block-type="table"]):not([data-block-type="simple_table"]):not([data-block-type="grid"]):not([data-block-type="board"]):not([data-block-type="calendar"]) {
-    @apply bg-content-blue-100;
+    &[data-block-type="paragraph"],
+    &[data-block-type="todo_list"],
+    &[data-block-type="heading"],
+    &[data-block-type="toggle_list"],
+    &[data-block-type="quote"],
+    &[data-block-type="bulleted_list"],
+    &[data-block-type="numbered_list"],
+    &[data-block-type="divider"],
+    {
+      @apply bg-content-blue-100;
+    }
+
     .embed-block {
       @apply bg-content-blue-50;
     }
   }
 
+
   .block-element[data-block-type="table/cell"] {
     @apply bg-content-blue-50;
     border-radius: 0 !important;
diff --git a/src/components/login/CheckEmail.tsx b/src/components/login/CheckEmail.tsx
new file mode 100644
index 00000000..a7a10445
--- /dev/null
+++ b/src/components/login/CheckEmail.tsx
@@ -0,0 +1,103 @@
+import { notify } from '@/components/_shared/notify';
+import { AFConfigContext } from '@/components/main/app.hooks';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import React, { useContext, useState } from 'react';
+import { ReactComponent as Logo } from '@/assets/icons/logo.svg';
+import { useTranslation } from 'react-i18next';
+
+function CheckEmail ({ email, redirectTo }: {
+  email: string;
+  redirectTo: string;
+}) {
+  const { t } = useTranslation();
+  const [isEnter, setEnter] = useState<boolean>(false);
+  const [code, setCode] = useState<string>('');
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const service = useContext(AFConfigContext)?.service;
+  const handleSubmit = async () => {
+    setLoading(true);
+
+    try {
+      await service?.signInOTP({
+        email,
+        redirectTo,
+        code,
+      });
+    } catch (e) {
+      notify.error(t('web.signInError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={'flex flex-col gap-5 items-center justify-center w-full px-4'}>
+      <div
+        onClick={() => {
+          window.location.href = '/';
+        }}
+        className={'flex cursor-pointer'}
+      >
+        <Logo className={'h-10 w-10'} />
+      </div>
+      <div className={'text-xl text-text-primary font-semibold'}>
+        {t('checkYourEmail')}
+      </div>
+      <div className={'flex text-sm w-[320px] text-center items-center flex-col justify-center'}>
+        <div className={'font-normal'}>{t('checkEmailTip')}</div>
+        <div className={'font-semibold'}>
+          {email}
+        </div>
+      </div>
+      {isEnter ? (
+        <div className={'flex flex-col gap-3'}>
+          <Input
+            autoFocus
+            size={'md'}
+            className={'w-[320px]'}
+            onChange={(e) => setCode(e.target.value)}
+            value={code}
+            placeholder={t('enterCode')}
+          />
+
+          <Button
+            onClick={handleSubmit}
+            disabled={loading}
+            size={'lg'}
+            className={'w-[320px]'}
+          >
+            {loading ? (
+              <>
+                <Progress size={'sm'} />
+                {t('editor.loading')}...
+              </>
+            ) : (
+              t('continueToSignIn')
+            )}
+          </Button>
+        </div>
+      ) : <Button
+        size={'lg'}
+        className={'w-[320px]'}
+        onClick={() => setEnter(true)}
+      >
+        {t('enterCodeManually')}
+      </Button>}
+
+      <Button
+        size={'lg'}
+        variant={'ghost'}
+        onClick={() => {
+          window.location.href = `/login?redirectTo=${redirectTo}`;
+        }}
+        className={'w-[320px] hover:bg-transparent text-text-theme hover:text-text-theme-hover h-5'}
+      >
+        {t('backToLogin')}
+      </Button>
+    </div>
+  );
+}
+
+export default CheckEmail;
\ No newline at end of file
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 9b932596..dfca16e8 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -1,59 +1,73 @@
 import LoginProvider from '@/components/login/LoginProvider';
 import MagicLink from '@/components/login/MagicLink';
-import { Divider } from '@mui/material';
+import { Separator } from '@/components/ui/separator';
 import React from 'react';
 import { ReactComponent as Logo } from '@/assets/icons/logo.svg';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as ArrowRight } from '@/assets/icons/arrow_right.svg';
 
-export function Login({ redirectTo }: { redirectTo: string }) {
+export function Login ({ redirectTo }: { redirectTo: string }) {
   const { t } = useTranslation();
 
   return (
-    <div className={'my-10 flex flex-col items-center justify-center gap-[24px] px-4'}>
-      <div
-        onClick={() => {
-          window.location.href = '/';
-        }}
-        className={'flex w-full cursor-pointer flex-col items-center justify-center gap-[14px]'}
-      >
-        <Logo className={'h-10 w-10'} />
-        <div className={'text-[24px] font-semibold max-sm:text-[20px]'}>{t('welcomeTo')} AppFlowy</div>
+    <div className={'py-10 flex flex-col h-full items-center justify-between gap-5 px-4'}>
+      <div className={'flex flex-1 flex-col items-center justify-center w-full gap-5'}>
+        <div
+          onClick={() => {
+            window.location.href = '/';
+          }}
+          className={'flex w-full cursor-pointer flex-col items-center justify-center gap-5'}
+        >
+          <Logo className={'h-9 w-9'} />
+          <div className={'text-xl font-semibold'}>{t('welcomeTo')} AppFlowy</div>
+        </div>
+        <MagicLink redirectTo={redirectTo} />
+        <div className={'flex w-full items-center justify-center gap-2 text-text-secondary'}>
+          <Separator className={'flex-1'} />
+          {t('web.or')}
+          <Separator className={'flex-1'} />
+        </div>
+        <LoginProvider redirectTo={redirectTo} />
+        <div
+          className={
+            'w-[300px] overflow-hidden whitespace-pre-wrap break-words text-center text-[12px] tracking-[0.36px] text-text-secondary'
+          }
+        >
+          <span>{t('web.signInAgreement')} </span>
+          <a
+            href={'https://appflowy.com/terms'}
+            target={'_blank'}
+            className={'text-text-theme underline'}
+          >
+            {t('web.termOfUse')}
+          </a>{' '}
+          {t('web.and')}{' '}
+          <a
+            href={'https://appflowy.com/privacy'}
+            target={'_blank'}
+            className={'text-text-theme underline'}
+          >
+            {t('web.privacyPolicy')}
+          </a>
+          .
+        </div>
       </div>
-      <MagicLink redirectTo={redirectTo} />
-      <div className={'flex w-full items-center justify-center gap-2 text-text-caption'}>
-        <Divider className={'flex-1 border-line-divider'} />
-        {t('web.or')}
-        <Divider className={'flex-1 border-line-divider'} />
-      </div>
-      <LoginProvider redirectTo={redirectTo} />
-      <div
-        className={
-          'mt-[40px] w-[300px] overflow-hidden whitespace-pre-wrap break-words text-center text-[12px] tracking-[0.36px] text-text-caption'
-        }
-      >
-        <span>{t('web.signInAgreement')} </span>
-        <a href={'https://appflowy.com/terms'} target={'_blank'} className={'text-fill-default underline'}>
-          {t('web.termOfUse')}
-        </a>{' '}
-        {t('web.and')}{' '}
-        <a href={'https://appflowy.com/privacy'} target={'_blank'} className={'text-fill-default underline'}>
-          {t('web.privacyPolicy')}
-        </a>
-        .
-      </div>
-      <Divider className={'w-[300px] max-w-full border-line-divider'} />
-      <div
-        onClick={() => {
-          window.location.href = 'https://appflowy.com';
-        }}
-        className={
-          'flex w-full cursor-pointer items-center justify-center gap-2 text-xs font-medium text-text-title opacity-60 hover:opacity-100'
-        }
-      >
-        <span>{t('web.visitOurWebsite')}</span>
-        <ArrowRight className={'h-5 w-5'} />
+
+      <div className={'flex flex-col w-full gap-5'}>
+        <Separator className={'w-[320px] max-w-full'} />
+        <div
+          onClick={() => {
+            window.location.href = 'https://appflowy.com';
+          }}
+          className={
+            'flex w-full cursor-pointer items-center justify-center gap-2 text-xs font-medium text-text-title opacity-60 hover:opacity-100'
+          }
+        >
+          <span>{t('web.visitOurWebsite')}</span>
+          <ArrowRight className={'h-5 w-5'} />
+        </div>
       </div>
+
     </div>
   );
 }
diff --git a/src/components/login/LoginProvider.tsx b/src/components/login/LoginProvider.tsx
index f8faa454..3611fb20 100644
--- a/src/components/login/LoginProvider.tsx
+++ b/src/components/login/LoginProvider.tsx
@@ -1,14 +1,36 @@
 import { notify } from '@/components/_shared/notify';
 import { AFConfigContext } from '@/components/main/app.hooks';
-import { Button, Collapse } from '@mui/material';
+import { motion, AnimatePresence } from 'framer-motion';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as GoogleSvg } from '@/assets/login/google.svg';
 import { ReactComponent as GithubSvg } from '@/assets/login/github.svg';
 import { ReactComponent as DiscordSvg } from '@/assets/login/discord.svg';
 import { ReactComponent as AppleSvg } from '@/assets/login/apple.svg';
+import { Button } from '@/components/ui/button';
 
-function LoginProvider({ redirectTo }: { redirectTo: string }) {
+const moreOptionsVariants = {
+  hidden: {
+    opacity: 0,
+    height: 0,
+  },
+  visible: {
+    opacity: 1,
+    height: 'auto',
+    transition: {
+      height: {
+        duration: 0.3,
+        ease: [0.4, 0, 0.2, 1],
+      },
+      opacity: {
+        duration: 0.2,
+        delay: 0.05,
+      },
+    },
+  },
+};
+
+function LoginProvider ({ redirectTo }: { redirectTo: string }) {
   const { t } = useTranslation();
   const [expand, setExpand] = React.useState(false);
   const options = useMemo(
@@ -38,9 +60,9 @@ function LoginProvider({ redirectTo }: { redirectTo: string }) {
   );
   const service = useContext(AFConfigContext)?.service;
 
-  const handleClick = useCallback(async(option: string) => {
+  const handleClick = useCallback(async (option: string) => {
     try {
-      switch(option) {
+      switch (option) {
         case 'google':
           await service?.signInGoogle({ redirectTo });
           break;
@@ -54,7 +76,7 @@ function LoginProvider({ redirectTo }: { redirectTo: string }) {
           await service?.signInDiscord({ redirectTo });
           break;
       }
-    } catch(e) {
+    } catch (e) {
       notify.error(t('web.signInError'));
     }
   }, [service, t, redirectTo]);
@@ -63,37 +85,80 @@ function LoginProvider({ redirectTo }: { redirectTo: string }) {
 
     return <Button
       key={option.value}
-      color={'inherit'}
-      variant={'outlined'}
+      size={'lg'}
+      variant={'outline'}
+      className={'w-full'}
       onClick={() => handleClick(option.value)}
-      className={
-        `flex h-[46px] w-full items-center justify-center gap-[10px] rounded-[12px] border border-line-divider text-sm font-medium  max-sm:w-full text-text-title`
-      }
     >
-      <option.Icon className={'w-[24px] h-[24px]'} />
+      <option.Icon className={'w-5 h-5'} />
       <div className={'w-auto whitespace-pre'}>{option.label}</div>
 
     </Button>;
   }, [handleClick]);
 
   return (
-    <div className={'flex w-full flex-col items-center justify-center gap-[10px]'}>
-      {options.slice(0, 2).map(renderOption)}
-      {!expand && <Button
-        color={'inherit'}
-        size={'small'}
-        onClick={() => setExpand(!expand)}
-        className={'text-sm w-full flex gap-2 items-center hover:bg-transparent font-medium text-fill-default'}
-      >
-        {t('web.moreOptions')}
-      </Button>}
+    <div className={'flex transform transition-all gap-3 w-full flex-col items-center justify-center'}>
+      {options.slice(0, 2).map((option, index) => (
+        <motion.div
+          key={`option-${index}`}
+          className="w-full"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: 0.3,
+            delay: index * 0.1,
+          }}
+        >
+          {renderOption(option)}
+        </motion.div>
+      ))}
 
-      <Collapse
-        className={'w-full'}
-        in={expand}
-      >
-        <div className={'gap-[10px] w-full flex-col flex'}>{options.slice(2).map(renderOption)}</div>
-      </Collapse>
+      <AnimatePresence mode="wait">
+        {!expand && (
+          <motion.div
+            className="w-full"
+            initial="initial"
+            animate="initial"
+            exit="exit"
+            whileHover="hover"
+            whileTap="tap"
+          >
+            <Button
+              variant={'ghost'}
+              onClick={() => setExpand(true)}
+              className={'w-full !h-5 text-text-theme hover:bg-transparent hover:text-text-theme-hover'}
+            >
+              {t('web.moreOptions')}
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {expand && (
+          <motion.div
+            className="w-full flex flex-col gap-3 overflow-hidden"
+            variants={moreOptionsVariants}
+            initial="hidden"
+            animate="visible"
+          >
+            {options.slice(2).map((option, index) => (
+              <motion.div
+                key={`extra-option-${index}`}
+                className="w-full"
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.25,
+                  delay: 0.1 + (index * 0.07),
+                }}
+              >
+                {renderOption(option)}
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/src/components/login/MagicLink.tsx b/src/components/login/MagicLink.tsx
index dc9f24fb..c5251087 100644
--- a/src/components/login/MagicLink.tsx
+++ b/src/components/login/MagicLink.tsx
@@ -1,6 +1,8 @@
-import { notify } from '@/components/_shared/notify';
+import { toast } from 'sonner';
 import { AFConfigContext } from '@/components/main/app.hooks';
-import { Button, CircularProgress, OutlinedInput } from '@mui/material';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import isEmail from 'validator/lib/isEmail';
@@ -14,7 +16,7 @@ function MagicLink ({ redirectTo }: { redirectTo: string }) {
     const isValidEmail = isEmail(email);
 
     if (!isValidEmail) {
-      notify.error(t('signIn.invalidEmail'));
+      toast.error(t('signIn.invalidEmail'));
       return;
     }
 
@@ -25,39 +27,39 @@ function MagicLink ({ redirectTo }: { redirectTo: string }) {
         email,
         redirectTo,
       });
-      notify.success(t('signIn.magicLinkSent'));
+
+      window.location.href = `/login?action=checkEmail&email=${email}&redirectTo=${redirectTo}`;
     } catch (e) {
-      notify.error(t('web.signInError'));
+      toast.error(t('web.signInError'));
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className={'flex w-full flex-col items-center justify-center gap-[12px]'}>
-      <OutlinedInput
-        value={email}
+    <div className={'flex w-full flex-col items-center justify-center gap-3'}>
+      <Input
+        size={'md'}
         type={'email'}
-        className={'h-[46px] w-[380px] rounded-[12px] py-[15px] px-[20px] text-base max-sm:w-full'}
-        placeholder={t('signIn.pleaseInputYourEmail')}
-        inputProps={{
-          className: 'px-0 py-0',
-        }}
+        className={'w-[320px]'}
         onChange={(e) => setEmail(e.target.value)}
+        value={email}
+        placeholder={t('signIn.pleaseInputYourEmail')}
       />
+
       <Button
         onClick={handleSubmit}
         disabled={loading}
-        variant={'contained'}
-        className={'flex h-[46px] w-[380px] items-center justify-center gap-2 rounded-[12px] text-base max-sm:w-full'}
+        size={'lg'}
+        className={'w-[320px]'}
       >
         {loading ? (
           <>
-            <CircularProgress size={'small'} />
+            <Progress />
             {t('editor.loading')}...
           </>
         ) : (
-          t('web.continue')
+          t('signIn.signInWithEmail')
         )}
       </Button>
     </div>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8ded3827..1679cfe9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5 outline-none focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick-hover focus-visible:ring-[0.5px] aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick-hover',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick-hover focus-visible:ring-[0.5px] aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick-hover',
   {
     variants: {
       variant: {
@@ -14,9 +14,9 @@ const buttonVariants = cva(
         destructive:
           'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
         outline:
-          'border border-border-grey-tertiary bg-background-primary text-text-primary hover:bg-fill-primary-alpha-5 hover:border-border-grey-tertiary-hover disabled:text-text-tertiary',
+          'border border-border-grey-tertiary bg-transparent text-text-primary hover:bg-fill-primary-alpha-5 hover:border-border-grey-tertiary-hover disabled:text-text-tertiary',
         'destructive-outline':
-          'bg-background-primary text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-grey-tertiary',
+          'bg-transparent text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-grey-tertiary',
         ghost:
           'hover:bg-fill-primary-alpha-5 text-text-primary disabled:bg-fill-transparent disabled:text-text-tertiary',
       },
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 7accc3bc..57e8b52c 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -55,7 +55,7 @@ const progressCircleVariants = cva(
   {
     variants: {
       variant: {
-        default: 'stroke-fill-secondary',
+        default: 'stroke-text-on-fill',
         theme: 'stroke-fill-theme-thick',
         success: 'stroke-fill-success-thick',
         warning: 'stroke-warning-thick',
@@ -75,8 +75,6 @@ export interface ProgressProps
   value?: number;
   /** Line ending style */
   strokeLinecap?: 'round' | 'square';
-  /** Custom stroke width in pixels */
-  strokeWidth?: number;
 }
 
 export function Progress ({
@@ -84,7 +82,6 @@ export function Progress ({
   size = 'md',
   variant = 'default',
   strokeLinecap = 'round',
-  strokeWidth = 3.5,
   className,
   ...props
 }: ProgressProps) {
@@ -96,6 +93,8 @@ export function Progress ({
     xl: 40,
   }[size as string] || 24;
 
+  const strokeWidth = Math.ceil(dimensions * 0.125); // 12.5% of dimensions
+  
   const radius = dimensions / 2 - strokeWidth;
   const circumference = Math.ceil(2 * Math.PI * radius);
   const isIndeterminate = value === undefined;
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 0ebde20b..f50ba8ef 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -10,18 +10,21 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps['theme']}
-      className='toaster group'
+      className="toaster group flex items-center justify-center"
       {...props}
-      position='bottom-center'
+      position="bottom-center"
       visibleToasts={1}
       toastOptions={{
         className:
-          '!shadow-toast px-4 py-2 gap-2 bg-fill-primary border-none text-text-quaternary w-fit max-w-[360px] rounded-400',
+          '!shadow-toast px-4 py-2 max-w-[360px] w-fit gap-2 bg-surface-secondary border-none text-text-on-fill rounded-400',
+        classNames: {
+          actionButton: '!text-text-theme font-semibold !px-2 hover:!text-text-theme-hover bg-transparent hover:bg-transparent',
+        },
       }}
       icons={{
-        success: <ToastSuccess className='h-5 w-5 text-fill-success-thick' />,
-        warning: <ToastWarning className='h-5 w-5 text-fill-warning-thick' />,
-        error: <ToastError className='h-5 w-5 text-fill-error-thick' />,
+        success: <ToastSuccess className="h-5 w-5 text-fill-success-thick" />,
+        warning: <ToastWarning className="h-5 w-5 text-fill-warning-thick" />,
+        error: <ToastError className="h-5 w-5 text-fill-error-thick" />,
       }}
     />
   );
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index b5d372bc..599885c9 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -3,23 +3,25 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '@/lib/utils';
 
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return <TooltipPrimitive.Provider data-slot='tooltip-provider' delayDuration={delayDuration} {...props} />;
+function TooltipProvider ({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider
+    data-slot="tooltip-provider"
+    delayDuration={delayDuration} {...props} />;
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot='tooltip' {...props} />
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
   );
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
+function TooltipTrigger ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
-function TooltipContent({
+function TooltipContent ({
   className,
   sideOffset = 0,
   children,
@@ -28,7 +30,7 @@ function TooltipContent({
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
-        data-slot='tooltip-content'
+        data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
           // Animation behavior
@@ -43,10 +45,10 @@ function TooltipContent({
 
           // Styling and layout
           'text-balance shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]',
-          'w-fit rounded-400 bg-fill-primary px-3 py-2 text-sm text-text-quaternary',
+          'w-fit rounded-400 bg-surface-secondary px-3 py-2 text-sm text-text-on-fill',
           'flex flex-col',
 
-          className
+          className,
         )}
         {...props}
       >
@@ -56,8 +58,10 @@ function TooltipContent({
   );
 }
 
-function TooltipShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return <span data-slot='tooltip-shortcut' className={cn('text-text-secondary', className)} {...props} />;
+function TooltipShortcut ({ className, ...props }: React.ComponentProps<'span'>) {
+  return <span
+    data-slot="tooltip-shortcut"
+    className={cn('text-text-secondary', className)} {...props} />;
 }
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipShortcut };
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index f959e8ec..e67ae5f5 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,3 +1,4 @@
+import CheckEmail from '@/components/login/CheckEmail';
 import { AFConfigContext } from '@/components/main/app.hooks';
 import { Login } from '@/components/login';
 import React, { useContext, useEffect } from 'react';
@@ -6,6 +7,8 @@ import { useSearchParams } from 'react-router-dom';
 function LoginPage () {
   const [search] = useSearchParams();
   const redirectTo = search.get('redirectTo') || '';
+  const action = search.get('action') || '';
+  const email = search.get('email') || '';
   const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated || false;
 
   useEffect(() => {
@@ -14,8 +17,14 @@ function LoginPage () {
     }
   }, [isAuthenticated, redirectTo]);
   return (
-    <div className={'bg-body flex h-screen w-screen items-center justify-center'}>
-      <Login redirectTo={redirectTo} />
+    <div className={'bg-background-primary flex h-screen w-screen items-center justify-center'}>
+      {action === 'checkEmail' ? (
+        <CheckEmail
+          email={email}
+          redirectTo={redirectTo}
+        />
+      ) : <Login redirectTo={redirectTo} />}
+
     </div>
   );
 }
diff --git a/src/styles/variables/semantic.dark.css b/src/styles/variables/semantic.dark.css
index 6b94088f..7b71faf8 100644
--- a/src/styles/variables/semantic.dark.css
+++ b/src/styles/variables/semantic.dark.css
@@ -10,247 +10,248 @@
  */
 
 :root[data-dark-mode=true] {
-  --text-primary: #e4e8f5;
-  --text-secondary: #b5bbd3;
-  --text-tertiary: #6f748c;
-  --text-quaternary: #21232a;
-  --text-inverse: #21232a;
-  --text-on-fill: #ffffff;
-  --text-theme: #00b5ff;
-  --text-theme-hover: #0092d6;
-  --text-action: #00b5ff;
-  --text-action-hover: #0092d6;
-  --text-info: #00b5ff;
-  --text-info-hover: #0092d6;
-  --text-success: #248569;
-  --text-success-hover: #29725d;
-  --text-warning: #db7e21;
-  --text-warning-hover: #b75f17;
-  --text-error: #f33641;
-  --text-error-hover: #ff5050;
-  --text-purple: #9327ff;
-  --text-purple-hover: #7a1dcc;
-  --icon-primary: #e4e8f5;
-  --icon-secondary: #b5bbd3;
-  --icon-tertiary: #6f748c;
-  --icon-quaternary: #21232a;
-  --icon-white: #ffffff;
-  --icon-purple-thick: #ffffff;
-  --icon-purple-thick-hover: #ffffff;
-  --border-grey-primary: #f8faff;
-  --border-grey-primary-hover: #e4e8f5;
-  --border-grey-secondary: #ced3e6;
-  --border-grey-secondary-hover: #b5bbd3;
-  --border-grey-tertiary: #3c3f4e;
-  --border-grey-tertiary-hover: #54596e;
-  --border-grey-quaternary: #21232a;
-  --border-grey-quaternary-hover: #272930;
-  --border-transparent: #ffffff00;
-  --border-theme-thick: #00b5ff;
-  --border-theme-thick-hover: #0092d6;
-  --border-info-thick: #00b5ff;
-  --border-info-thick-hover: #0092d6;
-  --border-success-thick: #248569;
-  --border-success-thick-hover: #29725d;
-  --border-warning-thick: #db7e21;
-  --border-warning-thick-hover: #b75f17;
-  --border-error-thick: #f33641;
-  --border-error-thick-hover: #ff5050;
-  --border-purple-thick: #9327ff;
-  --border-purple-thick-hover: #7a1dcc;
-  --fill-primary: #f8faff;
-  --fill-primary-hover: #e4e8f5;
-  --fill-secondary: #ced3e6;
-  --fill-secondary-hover: #b5bbd3;
-  --fill-tertiary: #6f748c;
-  --fill-tertiary-hover: #989eb7;
-  --fill-quaternary: #21232a;
-  --fill-quaternary-hover: #272930;
-  --fill-transparent: #ffffff00;
-  --fill-primary-alpha-5: #f9fafd0d;
-  --fill-primary-alpha-5-hover: #f9fafd1a;
-  --fill-primary-alpha-80: #1f2329cc;
-  --fill-primary-alpha-80-hover: #1f2329b2;
-  --fill-white: #ffffff;
-  --fill-white-alpha: #ffffff33;
-  --fill-white-alpha-hover: #ffffff4d;
-  --fill-black: #000000;
-  --fill-theme-light: #e3f6ff;
-  --fill-theme-light-hover: #a9e2ff;
-  --fill-theme-thick: #00b5ff;
-  --fill-theme-thick-hover: #4ec1ff;
-  --fill-theme-select: #00b5ff26;
-  --fill-info-light: #e3f6ff;
-  --fill-info-light-hover: #a9e2ff;
-  --fill-info-thick: #00b5ff;
-  --fill-info-thick-hover: #0092d6;
-  --fill-success-light: #ecf9f5;
-  --fill-success-light-hover: #c3e5d8;
-  --fill-success-thick: #248569;
-  --fill-success-thick-hover: #29725d;
-  --fill-warning-light: #fff3d5;
-  --fill-warning-light-hover: #ffe4ab;
-  --fill-warning-thick: #db7e21;
-  --fill-warning-thick-hover: #b75f17;
-  --fill-error-light: #ffd2dd;
-  --fill-error-light-hover: #ffa5b4;
-  --fill-error-thick: #e71d32;
-  --fill-error-thick-hover: #f33641;
-  --fill-error-select: #f336411a;
-  --fill-purple-light: #f1e0ff;
-  --fill-purple-light-hover: #e1b3ff;
-  --fill-purple-thick-hover: #7a1dcc;
-  --fill-purple-thick: #9327ff;
-  --surface-primary: #272930;
-  --surface-overlay: #00000099;
-  --background-primary: #21232a;
-  --background-secondary: #272930;
-  --background-tertiary: #3c3f4e;
-  --background-quaternary: #54596e;
-  --badge-color-rose-rose-light-1: #fcf2f2;
-  --badge-color-rose-rose-light-2: #fae3e3;
-  --badge-color-rose-rose-light-3: #fad9d9;
-  --badge-color-rose-rose-thick-1: #edadad;
-  --badge-color-rose-rose-thick-2: #cc4e4e;
-  --badge-color-rose-rose-thick-3: #702828;
-  --badge-color-papaya-papaya-light-1: #fcf4f0;
-  --badge-color-papaya-papaya-light-2: #fae8de;
-  --badge-color-papaya-papaya-light-3: #fadfd2;
-  --badge-color-papaya-papaya-thick-1: #f0bda3;
-  --badge-color-papaya-papaya-thick-2: #d67240;
-  --badge-color-papaya-papaya-thick-3: #6b3215;
-  --badge-color-tangerine-tangerine-light-1: #fff7ed;
-  --badge-color-tangerine-tangerine-light-2: #fcedd9;
-  --badge-color-tangerine-tangerine-light-3: #fae5ca;
-  --badge-color-tangerine-tangerine-thick-1: #f2cb99;
-  --badge-color-tangerine-tangerine-thick-2: #db8f2c;
-  --badge-color-tangerine-tangerine-thick-3: #613b0a;
-  --badge-color-mango-mango-light-1: #fff9ec;
-  --badge-color-mango-mango-light-2: #fcf1d7;
-  --badge-color-mango-mango-light-3: #fae9c3;
-  --badge-color-mango-mango-thick-1: #f5d68e;
-  --badge-color-mango-mango-thick-2: #e0a416;
-  --badge-color-mango-mango-thick-3: #5c4102;
-  --badge-color-lemon-lemon-light-1: #fffbe8;
-  --badge-color-lemon-lemon-light-2: #fcf5cf;
-  --badge-color-lemon-lemon-light-3: #faefb9;
-  --badge-color-lemon-lemon-thick-1: #f5e282;
-  --badge-color-lemon-lemon-thick-2: #e0bb00;
-  --badge-color-lemon-lemon-thick-3: #574800;
-  --badge-color-olive-olive-light-1: #f9fae6;
-  --badge-color-olive-olive-light-2: #f6f7d0;
-  --badge-color-olive-olive-light-3: #f0f2b3;
-  --badge-color-olive-olive-thick-1: #dbde83;
-  --badge-color-olive-olive-thick-2: #adb204;
-  --badge-color-olive-olive-thick-3: #4a4c03;
-  --badge-color-lime-lime-light-1: #f6f9e6;
-  --badge-color-lime-lime-light-2: #eef5ce;
-  --badge-color-lime-lime-light-3: #e7f0bb;
-  --badge-color-lime-lime-thick-1: #cfdb91;
-  --badge-color-lime-lime-thick-2: #92a822;
-  --badge-color-lime-lime-thick-3: #414d05;
-  --badge-color-grass-grass-light-1: #f4faeb;
-  --badge-color-grass-grass-light-2: #e9f5d7;
-  --badge-color-grass-grass-light-3: #def0c5;
-  --badge-color-grass-grass-thick-1: #bfd998;
-  --badge-color-grass-grass-thick-2: #75a828;
-  --badge-color-grass-grass-thick-3: #334d0c;
-  --badge-color-forest-forest-light-1: #f1faf0;
-  --badge-color-forest-forest-light-2: #e2f5df;
-  --badge-color-forest-forest-light-3: #d7f0d3;
-  --badge-color-forest-forest-thick-1: #a8d6a1;
-  --badge-color-forest-forest-thick-2: #49a33b;
-  --badge-color-forest-forest-thick-3: #1e4f16;
-  --badge-color-jade-jade-light-1: #f0faf6;
-  --badge-color-jade-jade-light-2: #dff5eb;
-  --badge-color-jade-jade-light-3: #cef0e1;
-  --badge-color-jade-jade-thick-1: #90d1b5;
-  --badge-color-jade-jade-thick-2: #1c9963;
-  --badge-color-jade-jade-thick-3: #075231;
-  --badge-color-aqua-aqua-light-1: #f0f9fa;
-  --badge-color-aqua-aqua-light-2: #dff3f5;
-  --badge-color-aqua-aqua-light-3: #ccecf0;
-  --badge-color-aqua-aqua-thick-1: #83ccd4;
-  --badge-color-aqua-aqua-thick-2: #008e9e;
-  --badge-color-aqua-aqua-thick-3: #004e57;
-  --badge-color-azure-azure-light-1: #f0f6fa;
-  --badge-color-azure-azure-light-2: #e1eef7;
-  --badge-color-azure-azure-light-3: #d3e6f5;
-  --badge-color-azure-azure-thick-1: #88c0eb;
-  --badge-color-azure-azure-thick-2: #0877cc;
-  --badge-color-azure-azure-thick-3: #154469;
-  --badge-color-denim-denim-light-1: #f0f3fa;
-  --badge-color-denim-denim-light-2: #e3ebfa;
-  --badge-color-denim-denim-light-3: #d7e2f7;
-  --badge-color-denim-denim-thick-1: #9ab6ed;
-  --badge-color-denim-denim-thick-2: #3267d1;
-  --badge-color-denim-denim-thick-3: #223c70;
-  --badge-color-mauve-mauve-light-1: #f2f2fc;
-  --badge-color-mauve-mauve-thick-2: #5555e0;
-  --badge-color-mauve-mauve-thick-3: #36366b;
-  --badge-color-mauve-mauve-thick-1: #aeaef5;
-  --badge-color-lavender-lavender-light-1: #f6f3fc;
-  --badge-color-lavender-lavender-light-2: #ebe3fa;
-  --badge-color-lavender-lavender-light-3: #e4daf7;
-  --badge-color-lavender-lavender-thick-1: #c1aaf0;
-  --badge-color-lavender-lavender-thick-2: #8153db;
-  --badge-color-lavender-lavender-thick-3: #462f75;
-  --badge-color-lilac-liliac-light-1: #f7f0fa;
-  --badge-color-lilac-liliac-light-2: #f0e1f7;
-  --badge-color-lilac-liliac-light-3: #edd7f7;
-  --badge-color-lilac-liliac-thick-1: #d3a9e8;
-  --badge-color-lilac-liliac-thick-2: #9e4cc7;
-  --badge-color-lilac-liliac-thick-3: #562d6b;
-  --badge-color-mallow-mallow-light-1: #faf0fa;
-  --badge-color-mallow-mallow-light-2: #f5e1f4;
-  --badge-color-mallow-mallow-light-3: #f5d7f4;
-  --badge-color-mallow-mallow-thick-1: #dea4dc;
-  --badge-color-mallow-mallow-thick-2: #b240af;
-  --badge-color-mallow-mallow-thick-3: #632861;
-  --badge-color-camellia-camellia-light-1: #f9eff3;
-  --badge-color-camellia-camellia-light-2: #f7e1eb;
-  --badge-color-camellia-camellia-light-3: #f7d7e5;
-  --badge-color-camellia-camellia-thick-1: #e5a3c0;
-  --badge-color-camellia-camellia-thick-2: #c24279;
-  --badge-color-camellia-camellia-thick-3: #6e2343;
-  --badge-color-smoke-smoke-light-1: #f5f5f5;
-  --badge-color-smoke-smoke-light-2: #e8e8e8;
-  --badge-color-smoke-smoke-light-3: #dedede;
-  --badge-color-smoke-smoke-thick-1: #b8b8b8;
-  --badge-color-smoke-smoke-thick-2: #6e6e6e;
-  --badge-color-smoke-smoke-thick-3: #404040;
-  --badge-color-iron-icon-light-1: #f2f4f7;
-  --badge-color-iron-icon-light-2: #e6e9f0;
-  --badge-color-iron-icon-light-3: #dadee5;
-  --badge-color-iron-icon-thick-1: #b0b5bf;
-  --badge-color-iron-icon-thick-2: #666f80;
-  --badge-color-iron-icon-thick-3: #394152;
-  --shadow-sm: 0px;
-  --shadow-md: 0px;
-  --brand-skyline: #00b5ff;
-  --brand-aqua: #00c8ff;
-  --brand-violet: #9327ff;
-  --brand-amethyst: #8427e0;
-  --brand-berry: #e3006d;
-  --brand-coral: #fb006d;
-  --brand-golden: #f7931e;
-  --brand-amber: #ffbd00;
-  --brand-lemon: #ffce00;
-  --other-colors-text-highlight: #a9e2ff;
-  --spacing-spacing-0: 0px;
-  --spacing-spacing-xs: 4px;
-  --spacing-spacing-s: 6px;
-  --spacing-spacing-m: 8px;
-  --spacing-spacing-l: 12px;
-  --spacing-spacing-xl: 16px;
-  --spacing-spacing-xxl: 20px;
-  --spacing-spacing-full: 1000px;
-  --border-radius-border-radius-0: 0px;
-  --border-radius-border-radius-xs: 4px;
-  --border-radius-border-radius-s: 6px;
-  --border-radius-border-radius-m: 8px;
-  --border-radius-border-radius-l: 12px;
-  --border-radius-border-radius-xl: 16px;
-  --border-radius-border-radius-xxl: 20px;
-  --border-radius-border-radius-full: 1000px;
+    --text-primary: #e4e8f5;
+    --text-secondary: #b5bbd3;
+    --text-tertiary: #6f748c;
+    --text-quaternary: #21232a;
+    --text-inverse: #21232a;
+    --text-on-fill: #ffffff;
+    --text-theme: #00b5ff;
+    --text-theme-hover: #0092d6;
+    --text-action: #00b5ff;
+    --text-action-hover: #0092d6;
+    --text-info: #00b5ff;
+    --text-info-hover: #0092d6;
+    --text-success: #248569;
+    --text-success-hover: #29725d;
+    --text-warning: #db7e21;
+    --text-warning-hover: #b75f17;
+    --text-error: #f33641;
+    --text-error-hover: #ff5050;
+    --text-purple: #9327ff;
+    --text-purple-hover: #7a1dcc;
+    --icon-primary: #e4e8f5;
+    --icon-secondary: #b5bbd3;
+    --icon-tertiary: #6f748c;
+    --icon-quaternary: #21232a;
+    --icon-white: #ffffff;
+    --icon-purple-thick: #ffffff;
+    --icon-purple-thick-hover: #ffffff;
+    --border-grey-primary: #f8faff;
+    --border-grey-primary-hover: #e4e8f5;
+    --border-grey-secondary: #ced3e6;
+    --border-grey-secondary-hover: #b5bbd3;
+    --border-grey-tertiary: #3c3f4e;
+    --border-grey-tertiary-hover: #54596e;
+    --border-grey-quaternary: #21232a;
+    --border-grey-quaternary-hover: #272930;
+    --border-transparent: #ffffff00;
+    --border-theme-thick: #00b5ff;
+    --border-theme-thick-hover: #0092d6;
+    --border-info-thick: #00b5ff;
+    --border-info-thick-hover: #0092d6;
+    --border-success-thick: #248569;
+    --border-success-thick-hover: #29725d;
+    --border-warning-thick: #db7e21;
+    --border-warning-thick-hover: #b75f17;
+    --border-error-thick: #f33641;
+    --border-error-thick-hover: #ff5050;
+    --border-purple-thick: #9327ff;
+    --border-purple-thick-hover: #7a1dcc;
+    --fill-primary: #f8faff;
+    --fill-primary-hover: #e4e8f5;
+    --fill-secondary: #ced3e6;
+    --fill-secondary-hover: #b5bbd3;
+    --fill-tertiary: #6f748c;
+    --fill-tertiary-hover: #989eb7;
+    --fill-quaternary: #21232a;
+    --fill-quaternary-hover: #272930;
+    --fill-transparent: #ffffff00;
+    --fill-primary-alpha-5: #f9fafd0d;
+    --fill-primary-alpha-5-hover: #f9fafd1a;
+    --fill-primary-alpha-80: #1f2329cc;
+    --fill-primary-alpha-80-hover: #1f2329b2;
+    --fill-white: #ffffff;
+    --fill-white-alpha: #ffffff33;
+    --fill-white-alpha-hover: #ffffff4d;
+    --fill-black: #000000;
+    --fill-theme-light: #e3f6ff;
+    --fill-theme-light-hover: #a9e2ff;
+    --fill-theme-thick: #00b5ff;
+    --fill-theme-thick-hover: #4ec1ff;
+    --fill-theme-select: #00b5ff26;
+    --fill-info-light: #e3f6ff;
+    --fill-info-light-hover: #a9e2ff;
+    --fill-info-thick: #00b5ff;
+    --fill-info-thick-hover: #0092d6;
+    --fill-success-light: #ecf9f5;
+    --fill-success-light-hover: #c3e5d8;
+    --fill-success-thick: #248569;
+    --fill-success-thick-hover: #29725d;
+    --fill-warning-light: #fff3d5;
+    --fill-warning-light-hover: #ffe4ab;
+    --fill-warning-thick: #db7e21;
+    --fill-warning-thick-hover: #b75f17;
+    --fill-error-light: #ffd2dd;
+    --fill-error-light-hover: #ffa5b4;
+    --fill-error-thick: #e71d32;
+    --fill-error-thick-hover: #f33641;
+    --fill-error-select: #f336411a;
+    --fill-purple-light: #f1e0ff;
+    --fill-purple-light-hover: #e1b3ff;
+    --fill-purple-thick-hover: #7a1dcc;
+    --fill-purple-thick: #9327ff;
+    --surface-primary: #272930;
+    --surface-overlay: #00000099;
+    --surface-secondary: #3C3F4E;
+    --background-primary: #21232a;
+    --background-secondary: #272930;
+    --background-tertiary: #3c3f4e;
+    --background-quaternary: #54596e;
+    --badge-color-rose-rose-light-1: #fcf2f2;
+    --badge-color-rose-rose-light-2: #fae3e3;
+    --badge-color-rose-rose-light-3: #fad9d9;
+    --badge-color-rose-rose-thick-1: #edadad;
+    --badge-color-rose-rose-thick-2: #cc4e4e;
+    --badge-color-rose-rose-thick-3: #702828;
+    --badge-color-papaya-papaya-light-1: #fcf4f0;
+    --badge-color-papaya-papaya-light-2: #fae8de;
+    --badge-color-papaya-papaya-light-3: #fadfd2;
+    --badge-color-papaya-papaya-thick-1: #f0bda3;
+    --badge-color-papaya-papaya-thick-2: #d67240;
+    --badge-color-papaya-papaya-thick-3: #6b3215;
+    --badge-color-tangerine-tangerine-light-1: #fff7ed;
+    --badge-color-tangerine-tangerine-light-2: #fcedd9;
+    --badge-color-tangerine-tangerine-light-3: #fae5ca;
+    --badge-color-tangerine-tangerine-thick-1: #f2cb99;
+    --badge-color-tangerine-tangerine-thick-2: #db8f2c;
+    --badge-color-tangerine-tangerine-thick-3: #613b0a;
+    --badge-color-mango-mango-light-1: #fff9ec;
+    --badge-color-mango-mango-light-2: #fcf1d7;
+    --badge-color-mango-mango-light-3: #fae9c3;
+    --badge-color-mango-mango-thick-1: #f5d68e;
+    --badge-color-mango-mango-thick-2: #e0a416;
+    --badge-color-mango-mango-thick-3: #5c4102;
+    --badge-color-lemon-lemon-light-1: #fffbe8;
+    --badge-color-lemon-lemon-light-2: #fcf5cf;
+    --badge-color-lemon-lemon-light-3: #faefb9;
+    --badge-color-lemon-lemon-thick-1: #f5e282;
+    --badge-color-lemon-lemon-thick-2: #e0bb00;
+    --badge-color-lemon-lemon-thick-3: #574800;
+    --badge-color-olive-olive-light-1: #f9fae6;
+    --badge-color-olive-olive-light-2: #f6f7d0;
+    --badge-color-olive-olive-light-3: #f0f2b3;
+    --badge-color-olive-olive-thick-1: #dbde83;
+    --badge-color-olive-olive-thick-2: #adb204;
+    --badge-color-olive-olive-thick-3: #4a4c03;
+    --badge-color-lime-lime-light-1: #f6f9e6;
+    --badge-color-lime-lime-light-2: #eef5ce;
+    --badge-color-lime-lime-light-3: #e7f0bb;
+    --badge-color-lime-lime-thick-1: #cfdb91;
+    --badge-color-lime-lime-thick-2: #92a822;
+    --badge-color-lime-lime-thick-3: #414d05;
+    --badge-color-grass-grass-light-1: #f4faeb;
+    --badge-color-grass-grass-light-2: #e9f5d7;
+    --badge-color-grass-grass-light-3: #def0c5;
+    --badge-color-grass-grass-thick-1: #bfd998;
+    --badge-color-grass-grass-thick-2: #75a828;
+    --badge-color-grass-grass-thick-3: #334d0c;
+    --badge-color-forest-forest-light-1: #f1faf0;
+    --badge-color-forest-forest-light-2: #e2f5df;
+    --badge-color-forest-forest-light-3: #d7f0d3;
+    --badge-color-forest-forest-thick-1: #a8d6a1;
+    --badge-color-forest-forest-thick-2: #49a33b;
+    --badge-color-forest-forest-thick-3: #1e4f16;
+    --badge-color-jade-jade-light-1: #f0faf6;
+    --badge-color-jade-jade-light-2: #dff5eb;
+    --badge-color-jade-jade-light-3: #cef0e1;
+    --badge-color-jade-jade-thick-1: #90d1b5;
+    --badge-color-jade-jade-thick-2: #1c9963;
+    --badge-color-jade-jade-thick-3: #075231;
+    --badge-color-aqua-aqua-light-1: #f0f9fa;
+    --badge-color-aqua-aqua-light-2: #dff3f5;
+    --badge-color-aqua-aqua-light-3: #ccecf0;
+    --badge-color-aqua-aqua-thick-1: #83ccd4;
+    --badge-color-aqua-aqua-thick-2: #008e9e;
+    --badge-color-aqua-aqua-thick-3: #004e57;
+    --badge-color-azure-azure-light-1: #f0f6fa;
+    --badge-color-azure-azure-light-2: #e1eef7;
+    --badge-color-azure-azure-light-3: #d3e6f5;
+    --badge-color-azure-azure-thick-1: #88c0eb;
+    --badge-color-azure-azure-thick-2: #0877cc;
+    --badge-color-azure-azure-thick-3: #154469;
+    --badge-color-denim-denim-light-1: #f0f3fa;
+    --badge-color-denim-denim-light-2: #e3ebfa;
+    --badge-color-denim-denim-light-3: #d7e2f7;
+    --badge-color-denim-denim-thick-1: #9ab6ed;
+    --badge-color-denim-denim-thick-2: #3267d1;
+    --badge-color-denim-denim-thick-3: #223c70;
+    --badge-color-mauve-mauve-light-1: #f2f2fc;
+    --badge-color-mauve-mauve-thick-2: #5555e0;
+    --badge-color-mauve-mauve-thick-3: #36366b;
+    --badge-color-mauve-mauve-thick-1: #aeaef5;
+    --badge-color-lavender-lavender-light-1: #f6f3fc;
+    --badge-color-lavender-lavender-light-2: #ebe3fa;
+    --badge-color-lavender-lavender-light-3: #e4daf7;
+    --badge-color-lavender-lavender-thick-1: #c1aaf0;
+    --badge-color-lavender-lavender-thick-2: #8153db;
+    --badge-color-lavender-lavender-thick-3: #462f75;
+    --badge-color-lilac-liliac-light-1: #f7f0fa;
+    --badge-color-lilac-liliac-light-2: #f0e1f7;
+    --badge-color-lilac-liliac-light-3: #edd7f7;
+    --badge-color-lilac-liliac-thick-1: #d3a9e8;
+    --badge-color-lilac-liliac-thick-2: #9e4cc7;
+    --badge-color-lilac-liliac-thick-3: #562d6b;
+    --badge-color-mallow-mallow-light-1: #faf0fa;
+    --badge-color-mallow-mallow-light-2: #f5e1f4;
+    --badge-color-mallow-mallow-light-3: #f5d7f4;
+    --badge-color-mallow-mallow-thick-1: #dea4dc;
+    --badge-color-mallow-mallow-thick-2: #b240af;
+    --badge-color-mallow-mallow-thick-3: #632861;
+    --badge-color-camellia-camellia-light-1: #f9eff3;
+    --badge-color-camellia-camellia-light-2: #f7e1eb;
+    --badge-color-camellia-camellia-light-3: #f7d7e5;
+    --badge-color-camellia-camellia-thick-1: #e5a3c0;
+    --badge-color-camellia-camellia-thick-2: #c24279;
+    --badge-color-camellia-camellia-thick-3: #6e2343;
+    --badge-color-smoke-smoke-light-1: #f5f5f5;
+    --badge-color-smoke-smoke-light-2: #e8e8e8;
+    --badge-color-smoke-smoke-light-3: #dedede;
+    --badge-color-smoke-smoke-thick-1: #b8b8b8;
+    --badge-color-smoke-smoke-thick-2: #6e6e6e;
+    --badge-color-smoke-smoke-thick-3: #404040;
+    --badge-color-iron-icon-light-1: #f2f4f7;
+    --badge-color-iron-icon-light-2: #e6e9f0;
+    --badge-color-iron-icon-light-3: #dadee5;
+    --badge-color-iron-icon-thick-1: #b0b5bf;
+    --badge-color-iron-icon-thick-2: #666f80;
+    --badge-color-iron-icon-thick-3: #394152;
+    --shadow-sm: 0px;
+    --shadow-md: 0px;
+    --brand-skyline: #00b5ff;
+    --brand-aqua: #00c8ff;
+    --brand-violet: #9327ff;
+    --brand-amethyst: #8427e0;
+    --brand-berry: #e3006d;
+    --brand-coral: #fb006d;
+    --brand-golden: #f7931e;
+    --brand-amber: #ffbd00;
+    --brand-lemon: #ffce00;
+    --other-colors-text-highlight: #a9e2ff;
+    --spacing-spacing-0: 0px;
+    --spacing-spacing-xs: 4px;
+    --spacing-spacing-s: 6px;
+    --spacing-spacing-m: 8px;
+    --spacing-spacing-l: 12px;
+    --spacing-spacing-xl: 16px;
+    --spacing-spacing-xxl: 20px;
+    --spacing-spacing-full: 1000px;
+    --border-radius-border-radius-0: 0px;
+    --border-radius-border-radius-xs: 4px;
+    --border-radius-border-radius-s: 6px;
+    --border-radius-border-radius-m: 8px;
+    --border-radius-border-radius-l: 12px;
+    --border-radius-border-radius-xl: 16px;
+    --border-radius-border-radius-xxl: 20px;
+    --border-radius-border-radius-full: 1000px;
 }
diff --git a/src/styles/variables/semantic.light.css b/src/styles/variables/semantic.light.css
index edaaf421..f8e6f10f 100644
--- a/src/styles/variables/semantic.light.css
+++ b/src/styles/variables/semantic.light.css
@@ -10,247 +10,248 @@
  */
 
 :root {
-  --text-primary: #21232a;
-  --text-secondary: #6f748c;
-  --text-tertiary: #b5bbd3;
-  --text-quaternary: #e4e8f5;
-  --text-inverse: #ffffff;
-  --text-on-fill: #ffffff;
-  --text-theme: #00b5ff;
-  --text-theme-hover: #0092d6;
-  --text-action: #00b5ff;
-  --text-action-hover: #0092d6;
-  --text-info: #00b5ff;
-  --text-info-hover: #0092d6;
-  --text-success: #248569;
-  --text-success-hover: #29725d;
-  --text-warning: #db7e21;
-  --text-warning-hover: #b75f17;
-  --text-error: #e71d32;
-  --text-error-hover: #ad1625;
-  --text-purple: #9327ff;
-  --text-purple-hover: #7a1dcc;
-  --icon-primary: #21232a;
-  --icon-secondary: #6f748c;
-  --icon-tertiary: #b5bbd3;
-  --icon-quaternary: #e4e8f5;
-  --icon-white: #ffffff;
-  --icon-purple-thick: #9327ff;
-  --icon-purple-thick-hover: #7a1dcc;
-  --border-grey-primary: #21232a;
-  --border-grey-primary-hover: #272930;
-  --border-grey-secondary: #3c3f4e;
-  --border-grey-secondary-hover: #54596e;
-  --border-grey-tertiary: #ced3e6;
-  --border-grey-tertiary-hover: #b5bbd3;
-  --border-grey-quaternary: #f8faff;
-  --border-grey-quaternary-hover: #e4e8f5;
-  --border-transparent: #ffffff00;
-  --border-theme-thick: #00b5ff;
-  --border-theme-thick-hover: #0092d6;
-  --border-info-thick: #00b5ff;
-  --border-info-thick-hover: #0092d6;
-  --border-success-thick: #248569;
-  --border-success-thick-hover: #29725d;
-  --border-warning-thick: #db7e21;
-  --border-warning-thick-hover: #b75f17;
-  --border-error-thick: #e71d32;
-  --border-error-thick-hover: #ad1625;
-  --border-purple-thick: #9327ff;
-  --border-purple-thick-hover: #7a1dcc;
-  --fill-primary: #21232a;
-  --fill-primary-hover: #272930;
-  --fill-secondary: #6f748c;
-  --fill-secondary-hover: #989eb7;
-  --fill-tertiary: #ced3e6;
-  --fill-tertiary-hover: #b5bbd3;
-  --fill-quaternary: #f8faff;
-  --fill-quaternary-hover: #e4e8f5;
-  --fill-transparent: #ffffff00;
-  --fill-primary-alpha-5: #1f23290d;
-  --fill-primary-alpha-5-hover: #1f23291a;
-  --fill-primary-alpha-80: #1f2329cc;
-  --fill-primary-alpha-80-hover: #1f2329b2;
-  --fill-white: #ffffff;
-  --fill-white-alpha: #ffffff33;
-  --fill-white-alpha-hover: #ffffff4d;
-  --fill-black: #000000;
-  --fill-theme-light: #e3f6ff;
-  --fill-theme-light-hover: #a9e2ff;
-  --fill-theme-thick: #00b5ff;
-  --fill-theme-thick-hover: #0092d6;
-  --fill-theme-select: #00b5ff26;
-  --fill-info-light: #e3f6ff;
-  --fill-info-light-hover: #a9e2ff;
-  --fill-info-thick: #00b5ff;
-  --fill-info-thick-hover: #0092d6;
-  --fill-success-light: #ecf9f5;
-  --fill-success-light-hover: #c3e5d8;
-  --fill-success-thick: #248569;
-  --fill-success-thick-hover: #29725d;
-  --fill-warning-light: #fff3d5;
-  --fill-warning-light-hover: #ffe4ab;
-  --fill-warning-thick: #db7e21;
-  --fill-warning-thick-hover: #b75f17;
-  --fill-error-light: #ffd2dd;
-  --fill-error-light-hover: #ffa5b4;
-  --fill-error-thick: #e71d32;
-  --fill-error-thick-hover: #ad1625;
-  --fill-error-select: #f336411a;
-  --fill-purple-light: #f1e0ff;
-  --fill-purple-light-hover: #e1b3ff;
-  --fill-purple-thick-hover: #7a1dcc;
-  --fill-purple-thick: #9327ff;
-  --surface-primary: #ffffff;
-  --surface-overlay: #00000099;
-  --background-primary: #ffffff;
-  --background-secondary: #f8faff;
-  --background-tertiary: #e4e8f5;
-  --background-quaternary: #ced3e6;
-  --badge-color-rose-rose-light-1: #fcf2f2;
-  --badge-color-rose-rose-light-2: #fae3e3;
-  --badge-color-rose-rose-light-3: #fad9d9;
-  --badge-color-rose-rose-thick-1: #edadad;
-  --badge-color-rose-rose-thick-2: #cc4e4e;
-  --badge-color-rose-rose-thick-3: #702828;
-  --badge-color-papaya-papaya-light-1: #fcf4f0;
-  --badge-color-papaya-papaya-light-2: #fae8de;
-  --badge-color-papaya-papaya-light-3: #fadfd2;
-  --badge-color-papaya-papaya-thick-1: #f0bda3;
-  --badge-color-papaya-papaya-thick-2: #d67240;
-  --badge-color-papaya-papaya-thick-3: #6b3215;
-  --badge-color-tangerine-tangerine-light-1: #fff7ed;
-  --badge-color-tangerine-tangerine-light-2: #fcedd9;
-  --badge-color-tangerine-tangerine-light-3: #fae5ca;
-  --badge-color-tangerine-tangerine-thick-1: #f2cb99;
-  --badge-color-tangerine-tangerine-thick-2: #db8f2c;
-  --badge-color-tangerine-tangerine-thick-3: #613b0a;
-  --badge-color-mango-mango-light-1: #fff9ec;
-  --badge-color-mango-mango-light-2: #fcf1d7;
-  --badge-color-mango-mango-light-3: #fae9c3;
-  --badge-color-mango-mango-thick-1: #f5d68e;
-  --badge-color-mango-mango-thick-2: #e0a416;
-  --badge-color-mango-mango-thick-3: #5c4102;
-  --badge-color-lemon-lemon-light-1: #fffbe8;
-  --badge-color-lemon-lemon-light-2: #fcf5cf;
-  --badge-color-lemon-lemon-light-3: #faefb9;
-  --badge-color-lemon-lemon-thick-1: #f5e282;
-  --badge-color-lemon-lemon-thick-2: #e0bb00;
-  --badge-color-lemon-lemon-thick-3: #574800;
-  --badge-color-olive-olive-light-1: #f9fae6;
-  --badge-color-olive-olive-light-2: #f6f7d0;
-  --badge-color-olive-olive-light-3: #f0f2b3;
-  --badge-color-olive-olive-thick-1: #dbde83;
-  --badge-color-olive-olive-thick-2: #adb204;
-  --badge-color-olive-olive-thick-3: #4a4c03;
-  --badge-color-lime-lime-light-1: #f6f9e6;
-  --badge-color-lime-lime-light-2: #eef5ce;
-  --badge-color-lime-lime-light-3: #e7f0bb;
-  --badge-color-lime-lime-thick-1: #cfdb91;
-  --badge-color-lime-lime-thick-2: #92a822;
-  --badge-color-lime-lime-thick-3: #414d05;
-  --badge-color-grass-grass-light-1: #f4faeb;
-  --badge-color-grass-grass-light-2: #e9f5d7;
-  --badge-color-grass-grass-light-3: #def0c5;
-  --badge-color-grass-grass-thick-1: #bfd998;
-  --badge-color-grass-grass-thick-2: #75a828;
-  --badge-color-grass-grass-thick-3: #334d0c;
-  --badge-color-forest-forest-light-1: #f1faf0;
-  --badge-color-forest-forest-light-2: #e2f5df;
-  --badge-color-forest-forest-light-3: #d7f0d3;
-  --badge-color-forest-forest-thick-1: #a8d6a1;
-  --badge-color-forest-forest-thick-2: #49a33b;
-  --badge-color-forest-forest-thick-3: #1e4f16;
-  --badge-color-jade-jade-light-1: #f0faf6;
-  --badge-color-jade-jade-light-2: #dff5eb;
-  --badge-color-jade-jade-light-3: #cef0e1;
-  --badge-color-jade-jade-thick-1: #90d1b5;
-  --badge-color-jade-jade-thick-2: #1c9963;
-  --badge-color-jade-jade-thick-3: #075231;
-  --badge-color-aqua-aqua-light-1: #f0f9fa;
-  --badge-color-aqua-aqua-light-2: #dff3f5;
-  --badge-color-aqua-aqua-light-3: #ccecf0;
-  --badge-color-aqua-aqua-thick-1: #83ccd4;
-  --badge-color-aqua-aqua-thick-2: #008e9e;
-  --badge-color-aqua-aqua-thick-3: #004e57;
-  --badge-color-azure-azure-light-1: #f0f6fa;
-  --badge-color-azure-azure-light-2: #e1eef7;
-  --badge-color-azure-azure-light-3: #d3e6f5;
-  --badge-color-azure-azure-thick-1: #88c0eb;
-  --badge-color-azure-azure-thick-2: #0877cc;
-  --badge-color-azure-azure-thick-3: #154469;
-  --badge-color-denim-denim-light-1: #f0f3fa;
-  --badge-color-denim-denim-light-2: #e3ebfa;
-  --badge-color-denim-denim-light-3: #d7e2f7;
-  --badge-color-denim-denim-thick-1: #9ab6ed;
-  --badge-color-denim-denim-thick-2: #3267d1;
-  --badge-color-denim-denim-thick-3: #223c70;
-  --badge-color-mauve-mauve-light-1: #f2f2fc;
-  --badge-color-mauve-mauve-thick-2: #5555e0;
-  --badge-color-mauve-mauve-thick-3: #36366b;
-  --badge-color-mauve-mauve-thick-1: #aeaef5;
-  --badge-color-lavender-lavender-light-1: #f6f3fc;
-  --badge-color-lavender-lavender-light-2: #ebe3fa;
-  --badge-color-lavender-lavender-light-3: #e4daf7;
-  --badge-color-lavender-lavender-thick-1: #c1aaf0;
-  --badge-color-lavender-lavender-thick-2: #8153db;
-  --badge-color-lavender-lavender-thick-3: #462f75;
-  --badge-color-lilac-liliac-light-1: #f7f0fa;
-  --badge-color-lilac-liliac-light-2: #f0e1f7;
-  --badge-color-lilac-liliac-light-3: #edd7f7;
-  --badge-color-lilac-liliac-thick-1: #d3a9e8;
-  --badge-color-lilac-liliac-thick-2: #9e4cc7;
-  --badge-color-lilac-liliac-thick-3: #562d6b;
-  --badge-color-mallow-mallow-light-1: #faf0fa;
-  --badge-color-mallow-mallow-light-2: #f5e1f4;
-  --badge-color-mallow-mallow-light-3: #f5d7f4;
-  --badge-color-mallow-mallow-thick-1: #dea4dc;
-  --badge-color-mallow-mallow-thick-2: #b240af;
-  --badge-color-mallow-mallow-thick-3: #632861;
-  --badge-color-camellia-camellia-light-1: #f9eff3;
-  --badge-color-camellia-camellia-light-2: #f7e1eb;
-  --badge-color-camellia-camellia-light-3: #f7d7e5;
-  --badge-color-camellia-camellia-thick-1: #e5a3c0;
-  --badge-color-camellia-camellia-thick-2: #c24279;
-  --badge-color-camellia-camellia-thick-3: #6e2343;
-  --badge-color-smoke-smoke-light-1: #f5f5f5;
-  --badge-color-smoke-smoke-light-2: #e8e8e8;
-  --badge-color-smoke-smoke-light-3: #dedede;
-  --badge-color-smoke-smoke-thick-1: #b8b8b8;
-  --badge-color-smoke-smoke-thick-2: #6e6e6e;
-  --badge-color-smoke-smoke-thick-3: #404040;
-  --badge-color-iron-icon-light-1: #f2f4f7;
-  --badge-color-iron-icon-light-2: #e6e9f0;
-  --badge-color-iron-icon-light-3: #dadee5;
-  --badge-color-iron-icon-thick-1: #b0b5bf;
-  --badge-color-iron-icon-thick-2: #666f80;
-  --badge-color-iron-icon-thick-3: #394152;
-  --shadow-sm: 0px;
-  --shadow-md: 0px;
-  --brand-skyline: #00b5ff;
-  --brand-aqua: #00c8ff;
-  --brand-violet: #9327ff;
-  --brand-amethyst: #8427e0;
-  --brand-berry: #e3006d;
-  --brand-coral: #fb006d;
-  --brand-golden: #f7931e;
-  --brand-amber: #ffbd00;
-  --brand-lemon: #ffce00;
-  --other-colors-text-highlight: #a9e2ff;
-  --spacing-spacing-0: 0px;
-  --spacing-spacing-xs: 4px;
-  --spacing-spacing-s: 6px;
-  --spacing-spacing-m: 8px;
-  --spacing-spacing-l: 12px;
-  --spacing-spacing-xl: 16px;
-  --spacing-spacing-xxl: 20px;
-  --spacing-spacing-full: 1000px;
-  --border-radius-border-radius-0: 0px;
-  --border-radius-border-radius-xs: 4px;
-  --border-radius-border-radius-s: 6px;
-  --border-radius-border-radius-m: 8px;
-  --border-radius-border-radius-l: 12px;
-  --border-radius-border-radius-xl: 16px;
-  --border-radius-border-radius-xxl: 20px;
-  --border-radius-border-radius-full: 1000px;
+    --text-primary: #21232a;
+    --text-secondary: #6f748c;
+    --text-tertiary: #b5bbd3;
+    --text-quaternary: #e4e8f5;
+    --text-inverse: #ffffff;
+    --text-on-fill: #ffffff;
+    --text-theme: #00b5ff;
+    --text-theme-hover: #0092d6;
+    --text-action: #00b5ff;
+    --text-action-hover: #0092d6;
+    --text-info: #00b5ff;
+    --text-info-hover: #0092d6;
+    --text-success: #248569;
+    --text-success-hover: #29725d;
+    --text-warning: #db7e21;
+    --text-warning-hover: #b75f17;
+    --text-error: #e71d32;
+    --text-error-hover: #ad1625;
+    --text-purple: #9327ff;
+    --text-purple-hover: #7a1dcc;
+    --icon-primary: #21232a;
+    --icon-secondary: #6f748c;
+    --icon-tertiary: #b5bbd3;
+    --icon-quaternary: #e4e8f5;
+    --icon-white: #ffffff;
+    --icon-purple-thick: #9327ff;
+    --icon-purple-thick-hover: #7a1dcc;
+    --border-grey-primary: #21232a;
+    --border-grey-primary-hover: #272930;
+    --border-grey-secondary: #3c3f4e;
+    --border-grey-secondary-hover: #54596e;
+    --border-grey-tertiary: #ced3e6;
+    --border-grey-tertiary-hover: #b5bbd3;
+    --border-grey-quaternary: #f8faff;
+    --border-grey-quaternary-hover: #e4e8f5;
+    --border-transparent: #ffffff00;
+    --border-theme-thick: #00b5ff;
+    --border-theme-thick-hover: #0092d6;
+    --border-info-thick: #00b5ff;
+    --border-info-thick-hover: #0092d6;
+    --border-success-thick: #248569;
+    --border-success-thick-hover: #29725d;
+    --border-warning-thick: #db7e21;
+    --border-warning-thick-hover: #b75f17;
+    --border-error-thick: #e71d32;
+    --border-error-thick-hover: #ad1625;
+    --border-purple-thick: #9327ff;
+    --border-purple-thick-hover: #7a1dcc;
+    --fill-primary: #21232a;
+    --fill-primary-hover: #272930;
+    --fill-secondary: #6f748c;
+    --fill-secondary-hover: #989eb7;
+    --fill-tertiary: #ced3e6;
+    --fill-tertiary-hover: #b5bbd3;
+    --fill-quaternary: #f8faff;
+    --fill-quaternary-hover: #e4e8f5;
+    --fill-transparent: #ffffff00;
+    --fill-primary-alpha-5: #1f23290d;
+    --fill-primary-alpha-5-hover: #1f23291a;
+    --fill-primary-alpha-80: #1f2329cc;
+    --fill-primary-alpha-80-hover: #1f2329b2;
+    --fill-white: #ffffff;
+    --fill-white-alpha: #ffffff33;
+    --fill-white-alpha-hover: #ffffff4d;
+    --fill-black: #000000;
+    --fill-theme-light: #e3f6ff;
+    --fill-theme-light-hover: #a9e2ff;
+    --fill-theme-thick: #00b5ff;
+    --fill-theme-thick-hover: #0092d6;
+    --fill-theme-select: #00b5ff26;
+    --fill-info-light: #e3f6ff;
+    --fill-info-light-hover: #a9e2ff;
+    --fill-info-thick: #00b5ff;
+    --fill-info-thick-hover: #0092d6;
+    --fill-success-light: #ecf9f5;
+    --fill-success-light-hover: #c3e5d8;
+    --fill-success-thick: #248569;
+    --fill-success-thick-hover: #29725d;
+    --fill-warning-light: #fff3d5;
+    --fill-warning-light-hover: #ffe4ab;
+    --fill-warning-thick: #db7e21;
+    --fill-warning-thick-hover: #b75f17;
+    --fill-error-light: #ffd2dd;
+    --fill-error-light-hover: #ffa5b4;
+    --fill-error-thick: #e71d32;
+    --fill-error-thick-hover: #ad1625;
+    --fill-error-select: #f336411a;
+    --fill-purple-light: #f1e0ff;
+    --fill-purple-light-hover: #e1b3ff;
+    --fill-purple-thick-hover: #7a1dcc;
+    --fill-purple-thick: #9327ff;
+    --surface-primary: #ffffff;
+    --surface-overlay: #00000099;
+    --surface-secondary: #21232A;
+    --background-primary: #ffffff;
+    --background-secondary: #f8faff;
+    --background-tertiary: #e4e8f5;
+    --background-quaternary: #ced3e6;
+    --badge-color-rose-rose-light-1: #fcf2f2;
+    --badge-color-rose-rose-light-2: #fae3e3;
+    --badge-color-rose-rose-light-3: #fad9d9;
+    --badge-color-rose-rose-thick-1: #edadad;
+    --badge-color-rose-rose-thick-2: #cc4e4e;
+    --badge-color-rose-rose-thick-3: #702828;
+    --badge-color-papaya-papaya-light-1: #fcf4f0;
+    --badge-color-papaya-papaya-light-2: #fae8de;
+    --badge-color-papaya-papaya-light-3: #fadfd2;
+    --badge-color-papaya-papaya-thick-1: #f0bda3;
+    --badge-color-papaya-papaya-thick-2: #d67240;
+    --badge-color-papaya-papaya-thick-3: #6b3215;
+    --badge-color-tangerine-tangerine-light-1: #fff7ed;
+    --badge-color-tangerine-tangerine-light-2: #fcedd9;
+    --badge-color-tangerine-tangerine-light-3: #fae5ca;
+    --badge-color-tangerine-tangerine-thick-1: #f2cb99;
+    --badge-color-tangerine-tangerine-thick-2: #db8f2c;
+    --badge-color-tangerine-tangerine-thick-3: #613b0a;
+    --badge-color-mango-mango-light-1: #fff9ec;
+    --badge-color-mango-mango-light-2: #fcf1d7;
+    --badge-color-mango-mango-light-3: #fae9c3;
+    --badge-color-mango-mango-thick-1: #f5d68e;
+    --badge-color-mango-mango-thick-2: #e0a416;
+    --badge-color-mango-mango-thick-3: #5c4102;
+    --badge-color-lemon-lemon-light-1: #fffbe8;
+    --badge-color-lemon-lemon-light-2: #fcf5cf;
+    --badge-color-lemon-lemon-light-3: #faefb9;
+    --badge-color-lemon-lemon-thick-1: #f5e282;
+    --badge-color-lemon-lemon-thick-2: #e0bb00;
+    --badge-color-lemon-lemon-thick-3: #574800;
+    --badge-color-olive-olive-light-1: #f9fae6;
+    --badge-color-olive-olive-light-2: #f6f7d0;
+    --badge-color-olive-olive-light-3: #f0f2b3;
+    --badge-color-olive-olive-thick-1: #dbde83;
+    --badge-color-olive-olive-thick-2: #adb204;
+    --badge-color-olive-olive-thick-3: #4a4c03;
+    --badge-color-lime-lime-light-1: #f6f9e6;
+    --badge-color-lime-lime-light-2: #eef5ce;
+    --badge-color-lime-lime-light-3: #e7f0bb;
+    --badge-color-lime-lime-thick-1: #cfdb91;
+    --badge-color-lime-lime-thick-2: #92a822;
+    --badge-color-lime-lime-thick-3: #414d05;
+    --badge-color-grass-grass-light-1: #f4faeb;
+    --badge-color-grass-grass-light-2: #e9f5d7;
+    --badge-color-grass-grass-light-3: #def0c5;
+    --badge-color-grass-grass-thick-1: #bfd998;
+    --badge-color-grass-grass-thick-2: #75a828;
+    --badge-color-grass-grass-thick-3: #334d0c;
+    --badge-color-forest-forest-light-1: #f1faf0;
+    --badge-color-forest-forest-light-2: #e2f5df;
+    --badge-color-forest-forest-light-3: #d7f0d3;
+    --badge-color-forest-forest-thick-1: #a8d6a1;
+    --badge-color-forest-forest-thick-2: #49a33b;
+    --badge-color-forest-forest-thick-3: #1e4f16;
+    --badge-color-jade-jade-light-1: #f0faf6;
+    --badge-color-jade-jade-light-2: #dff5eb;
+    --badge-color-jade-jade-light-3: #cef0e1;
+    --badge-color-jade-jade-thick-1: #90d1b5;
+    --badge-color-jade-jade-thick-2: #1c9963;
+    --badge-color-jade-jade-thick-3: #075231;
+    --badge-color-aqua-aqua-light-1: #f0f9fa;
+    --badge-color-aqua-aqua-light-2: #dff3f5;
+    --badge-color-aqua-aqua-light-3: #ccecf0;
+    --badge-color-aqua-aqua-thick-1: #83ccd4;
+    --badge-color-aqua-aqua-thick-2: #008e9e;
+    --badge-color-aqua-aqua-thick-3: #004e57;
+    --badge-color-azure-azure-light-1: #f0f6fa;
+    --badge-color-azure-azure-light-2: #e1eef7;
+    --badge-color-azure-azure-light-3: #d3e6f5;
+    --badge-color-azure-azure-thick-1: #88c0eb;
+    --badge-color-azure-azure-thick-2: #0877cc;
+    --badge-color-azure-azure-thick-3: #154469;
+    --badge-color-denim-denim-light-1: #f0f3fa;
+    --badge-color-denim-denim-light-2: #e3ebfa;
+    --badge-color-denim-denim-light-3: #d7e2f7;
+    --badge-color-denim-denim-thick-1: #9ab6ed;
+    --badge-color-denim-denim-thick-2: #3267d1;
+    --badge-color-denim-denim-thick-3: #223c70;
+    --badge-color-mauve-mauve-light-1: #f2f2fc;
+    --badge-color-mauve-mauve-thick-2: #5555e0;
+    --badge-color-mauve-mauve-thick-3: #36366b;
+    --badge-color-mauve-mauve-thick-1: #aeaef5;
+    --badge-color-lavender-lavender-light-1: #f6f3fc;
+    --badge-color-lavender-lavender-light-2: #ebe3fa;
+    --badge-color-lavender-lavender-light-3: #e4daf7;
+    --badge-color-lavender-lavender-thick-1: #c1aaf0;
+    --badge-color-lavender-lavender-thick-2: #8153db;
+    --badge-color-lavender-lavender-thick-3: #462f75;
+    --badge-color-lilac-liliac-light-1: #f7f0fa;
+    --badge-color-lilac-liliac-light-2: #f0e1f7;
+    --badge-color-lilac-liliac-light-3: #edd7f7;
+    --badge-color-lilac-liliac-thick-1: #d3a9e8;
+    --badge-color-lilac-liliac-thick-2: #9e4cc7;
+    --badge-color-lilac-liliac-thick-3: #562d6b;
+    --badge-color-mallow-mallow-light-1: #faf0fa;
+    --badge-color-mallow-mallow-light-2: #f5e1f4;
+    --badge-color-mallow-mallow-light-3: #f5d7f4;
+    --badge-color-mallow-mallow-thick-1: #dea4dc;
+    --badge-color-mallow-mallow-thick-2: #b240af;
+    --badge-color-mallow-mallow-thick-3: #632861;
+    --badge-color-camellia-camellia-light-1: #f9eff3;
+    --badge-color-camellia-camellia-light-2: #f7e1eb;
+    --badge-color-camellia-camellia-light-3: #f7d7e5;
+    --badge-color-camellia-camellia-thick-1: #e5a3c0;
+    --badge-color-camellia-camellia-thick-2: #c24279;
+    --badge-color-camellia-camellia-thick-3: #6e2343;
+    --badge-color-smoke-smoke-light-1: #f5f5f5;
+    --badge-color-smoke-smoke-light-2: #e8e8e8;
+    --badge-color-smoke-smoke-light-3: #dedede;
+    --badge-color-smoke-smoke-thick-1: #b8b8b8;
+    --badge-color-smoke-smoke-thick-2: #6e6e6e;
+    --badge-color-smoke-smoke-thick-3: #404040;
+    --badge-color-iron-icon-light-1: #f2f4f7;
+    --badge-color-iron-icon-light-2: #e6e9f0;
+    --badge-color-iron-icon-light-3: #dadee5;
+    --badge-color-iron-icon-thick-1: #b0b5bf;
+    --badge-color-iron-icon-thick-2: #666f80;
+    --badge-color-iron-icon-thick-3: #394152;
+    --shadow-sm: 0px;
+    --shadow-md: 0px;
+    --brand-skyline: #00b5ff;
+    --brand-aqua: #00c8ff;
+    --brand-violet: #9327ff;
+    --brand-amethyst: #8427e0;
+    --brand-berry: #e3006d;
+    --brand-coral: #fb006d;
+    --brand-golden: #f7931e;
+    --brand-amber: #ffbd00;
+    --brand-lemon: #ffce00;
+    --other-colors-text-highlight: #a9e2ff;
+    --spacing-spacing-0: 0px;
+    --spacing-spacing-xs: 4px;
+    --spacing-spacing-s: 6px;
+    --spacing-spacing-m: 8px;
+    --spacing-spacing-l: 12px;
+    --spacing-spacing-xl: 16px;
+    --spacing-spacing-xxl: 20px;
+    --spacing-spacing-full: 1000px;
+    --border-radius-border-radius-0: 0px;
+    --border-radius-border-radius-xs: 4px;
+    --border-radius-border-radius-s: 6px;
+    --border-radius-border-radius-m: 8px;
+    --border-radius-border-radius-l: 12px;
+    --border-radius-border-radius-xl: 16px;
+    --border-radius-border-radius-xxl: 20px;
+    --border-radius-border-radius-full: 1000px;
 }
diff --git a/tailwind/new-colors.cjs b/tailwind/new-colors.cjs
index dbd6130b..65fc35e1 100644
--- a/tailwind/new-colors.cjs
+++ b/tailwind/new-colors.cjs
@@ -1,266 +1,267 @@
 /**
  * TailwindCSS color configuration
  * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
- * 
+ *
  * This file is auto-generated by convert-tokens.cjs script
  * Generation time: 2025-03-31T09:19:58.459Z
- * 
+ *
  * To modify these colors, edit the source JSON files and run the token conversion script:
  * node scripts/system-token/convert-tokens.cjs
- * 
+ *
  * These colors reference CSS variables, ensure the corresponding CSS files are loaded
  */
 
 module.exports = {
-  "text": {
-    "primary": "var(--text-primary)",
-    "secondary": "var(--text-secondary)",
-    "tertiary": "var(--text-tertiary)",
-    "quaternary": "var(--text-quaternary)",
-    "inverse": "var(--text-inverse)",
-    "on-fill": "var(--text-on-fill)",
-    "theme": "var(--text-theme)",
-    "theme-hover": "var(--text-theme-hover)",
-    "action": "var(--text-action)",
-    "action-hover": "var(--text-action-hover)",
-    "info": "var(--text-info)",
-    "info-hover": "var(--text-info-hover)",
-    "success": "var(--text-success)",
-    "success-hover": "var(--text-success-hover)",
-    "warning": "var(--text-warning)",
-    "warning-hover": "var(--text-warning-hover)",
-    "error": "var(--text-error)",
-    "error-hover": "var(--text-error-hover)",
-    "purple": "var(--text-purple)",
-    "purple-hover": "var(--text-purple-hover)"
+  'text': {
+    'primary': 'var(--text-primary)',
+    'secondary': 'var(--text-secondary)',
+    'tertiary': 'var(--text-tertiary)',
+    'quaternary': 'var(--text-quaternary)',
+    'inverse': 'var(--text-inverse)',
+    'on-fill': 'var(--text-on-fill)',
+    'theme': 'var(--text-theme)',
+    'theme-hover': 'var(--text-theme-hover)',
+    'action': 'var(--text-action)',
+    'action-hover': 'var(--text-action-hover)',
+    'info': 'var(--text-info)',
+    'info-hover': 'var(--text-info-hover)',
+    'success': 'var(--text-success)',
+    'success-hover': 'var(--text-success-hover)',
+    'warning': 'var(--text-warning)',
+    'warning-hover': 'var(--text-warning-hover)',
+    'error': 'var(--text-error)',
+    'error-hover': 'var(--text-error-hover)',
+    'purple': 'var(--text-purple)',
+    'purple-hover': 'var(--text-purple-hover)',
   },
-  "icon": {
-    "primary": "var(--icon-primary)",
-    "secondary": "var(--icon-secondary)",
-    "tertiary": "var(--icon-tertiary)",
-    "quaternary": "var(--icon-quaternary)",
-    "white": "var(--icon-white)",
-    "purple-thick": "var(--icon-purple-thick)",
-    "purple-thick-hover": "var(--icon-purple-thick-hover)"
+  'icon': {
+    'primary': 'var(--icon-primary)',
+    'secondary': 'var(--icon-secondary)',
+    'tertiary': 'var(--icon-tertiary)',
+    'quaternary': 'var(--icon-quaternary)',
+    'white': 'var(--icon-white)',
+    'purple-thick': 'var(--icon-purple-thick)',
+    'purple-thick-hover': 'var(--icon-purple-thick-hover)',
   },
-  "border": {
-    "grey-primary": "var(--border-grey-primary)",
-    "grey-primary-hover": "var(--border-grey-primary-hover)",
-    "grey-secondary": "var(--border-grey-secondary)",
-    "grey-secondary-hover": "var(--border-grey-secondary-hover)",
-    "grey-tertiary": "var(--border-grey-tertiary)",
-    "grey-tertiary-hover": "var(--border-grey-tertiary-hover)",
-    "grey-quaternary": "var(--border-grey-quaternary)",
-    "grey-quaternary-hover": "var(--border-grey-quaternary-hover)",
-    "transparent": "var(--border-transparent)",
-    "theme-thick": "var(--border-theme-thick)",
-    "theme-thick-hover": "var(--border-theme-thick-hover)",
-    "info-thick": "var(--border-info-thick)",
-    "info-thick-hover": "var(--border-info-thick-hover)",
-    "success-thick": "var(--border-success-thick)",
-    "success-thick-hover": "var(--border-success-thick-hover)",
-    "warning-thick": "var(--border-warning-thick)",
-    "warning-thick-hover": "var(--border-warning-thick-hover)",
-    "error-thick": "var(--border-error-thick)",
-    "error-thick-hover": "var(--border-error-thick-hover)",
-    "purple-thick": "var(--border-purple-thick)",
-    "purple-thick-hover": "var(--border-purple-thick-hover)",
-    "radius-border-radius-0": "var(--border-radius-border-radius-0)",
-    "radius-border-radius-xs": "var(--border-radius-border-radius-xs)",
-    "radius-border-radius-s": "var(--border-radius-border-radius-s)",
-    "radius-border-radius-m": "var(--border-radius-border-radius-m)",
-    "radius-border-radius-l": "var(--border-radius-border-radius-l)",
-    "radius-border-radius-xl": "var(--border-radius-border-radius-xl)",
-    "radius-border-radius-xxl": "var(--border-radius-border-radius-xxl)",
-    "radius-border-radius-full": "var(--border-radius-border-radius-full)"
+  'border': {
+    'grey-primary': 'var(--border-grey-primary)',
+    'grey-primary-hover': 'var(--border-grey-primary-hover)',
+    'grey-secondary': 'var(--border-grey-secondary)',
+    'grey-secondary-hover': 'var(--border-grey-secondary-hover)',
+    'grey-tertiary': 'var(--border-grey-tertiary)',
+    'grey-tertiary-hover': 'var(--border-grey-tertiary-hover)',
+    'grey-quaternary': 'var(--border-grey-quaternary)',
+    'grey-quaternary-hover': 'var(--border-grey-quaternary-hover)',
+    'transparent': 'var(--border-transparent)',
+    'theme-thick': 'var(--border-theme-thick)',
+    'theme-thick-hover': 'var(--border-theme-thick-hover)',
+    'info-thick': 'var(--border-info-thick)',
+    'info-thick-hover': 'var(--border-info-thick-hover)',
+    'success-thick': 'var(--border-success-thick)',
+    'success-thick-hover': 'var(--border-success-thick-hover)',
+    'warning-thick': 'var(--border-warning-thick)',
+    'warning-thick-hover': 'var(--border-warning-thick-hover)',
+    'error-thick': 'var(--border-error-thick)',
+    'error-thick-hover': 'var(--border-error-thick-hover)',
+    'purple-thick': 'var(--border-purple-thick)',
+    'purple-thick-hover': 'var(--border-purple-thick-hover)',
+    'radius-border-radius-0': 'var(--border-radius-border-radius-0)',
+    'radius-border-radius-xs': 'var(--border-radius-border-radius-xs)',
+    'radius-border-radius-s': 'var(--border-radius-border-radius-s)',
+    'radius-border-radius-m': 'var(--border-radius-border-radius-m)',
+    'radius-border-radius-l': 'var(--border-radius-border-radius-l)',
+    'radius-border-radius-xl': 'var(--border-radius-border-radius-xl)',
+    'radius-border-radius-xxl': 'var(--border-radius-border-radius-xxl)',
+    'radius-border-radius-full': 'var(--border-radius-border-radius-full)',
   },
-  "fill": {
-    "primary": "var(--fill-primary)",
-    "primary-hover": "var(--fill-primary-hover)",
-    "secondary": "var(--fill-secondary)",
-    "secondary-hover": "var(--fill-secondary-hover)",
-    "tertiary": "var(--fill-tertiary)",
-    "tertiary-hover": "var(--fill-tertiary-hover)",
-    "quaternary": "var(--fill-quaternary)",
-    "quaternary-hover": "var(--fill-quaternary-hover)",
-    "transparent": "var(--fill-transparent)",
-    "primary-alpha-5": "var(--fill-primary-alpha-5)",
-    "primary-alpha-5-hover": "var(--fill-primary-alpha-5-hover)",
-    "primary-alpha-80": "var(--fill-primary-alpha-80)",
-    "primary-alpha-80-hover": "var(--fill-primary-alpha-80-hover)",
-    "white": "var(--fill-white)",
-    "white-alpha": "var(--fill-white-alpha)",
-    "white-alpha-hover": "var(--fill-white-alpha-hover)",
-    "black": "var(--fill-black)",
-    "theme-light": "var(--fill-theme-light)",
-    "theme-light-hover": "var(--fill-theme-light-hover)",
-    "theme-thick": "var(--fill-theme-thick)",
-    "theme-thick-hover": "var(--fill-theme-thick-hover)",
-    "theme-select": "var(--fill-theme-select)",
-    "info-light": "var(--fill-info-light)",
-    "info-light-hover": "var(--fill-info-light-hover)",
-    "info-thick": "var(--fill-info-thick)",
-    "info-thick-hover": "var(--fill-info-thick-hover)",
-    "success-light": "var(--fill-success-light)",
-    "success-light-hover": "var(--fill-success-light-hover)",
-    "success-thick": "var(--fill-success-thick)",
-    "success-thick-hover": "var(--fill-success-thick-hover)",
-    "warning-light": "var(--fill-warning-light)",
-    "warning-light-hover": "var(--fill-warning-light-hover)",
-    "warning-thick": "var(--fill-warning-thick)",
-    "warning-thick-hover": "var(--fill-warning-thick-hover)",
-    "error-light": "var(--fill-error-light)",
-    "error-light-hover": "var(--fill-error-light-hover)",
-    "error-thick": "var(--fill-error-thick)",
-    "error-thick-hover": "var(--fill-error-thick-hover)",
-    "error-select": "var(--fill-error-select)",
-    "purple-light": "var(--fill-purple-light)",
-    "purple-light-hover": "var(--fill-purple-light-hover)",
-    "purple-thick-hover": "var(--fill-purple-thick-hover)",
-    "purple-thick": "var(--fill-purple-thick)"
+  'fill': {
+    'primary': 'var(--fill-primary)',
+    'primary-hover': 'var(--fill-primary-hover)',
+    'secondary': 'var(--fill-secondary)',
+    'secondary-hover': 'var(--fill-secondary-hover)',
+    'tertiary': 'var(--fill-tertiary)',
+    'tertiary-hover': 'var(--fill-tertiary-hover)',
+    'quaternary': 'var(--fill-quaternary)',
+    'quaternary-hover': 'var(--fill-quaternary-hover)',
+    'transparent': 'var(--fill-transparent)',
+    'primary-alpha-5': 'var(--fill-primary-alpha-5)',
+    'primary-alpha-5-hover': 'var(--fill-primary-alpha-5-hover)',
+    'primary-alpha-80': 'var(--fill-primary-alpha-80)',
+    'primary-alpha-80-hover': 'var(--fill-primary-alpha-80-hover)',
+    'white': 'var(--fill-white)',
+    'white-alpha': 'var(--fill-white-alpha)',
+    'white-alpha-hover': 'var(--fill-white-alpha-hover)',
+    'black': 'var(--fill-black)',
+    'theme-light': 'var(--fill-theme-light)',
+    'theme-light-hover': 'var(--fill-theme-light-hover)',
+    'theme-thick': 'var(--fill-theme-thick)',
+    'theme-thick-hover': 'var(--fill-theme-thick-hover)',
+    'theme-select': 'var(--fill-theme-select)',
+    'info-light': 'var(--fill-info-light)',
+    'info-light-hover': 'var(--fill-info-light-hover)',
+    'info-thick': 'var(--fill-info-thick)',
+    'info-thick-hover': 'var(--fill-info-thick-hover)',
+    'success-light': 'var(--fill-success-light)',
+    'success-light-hover': 'var(--fill-success-light-hover)',
+    'success-thick': 'var(--fill-success-thick)',
+    'success-thick-hover': 'var(--fill-success-thick-hover)',
+    'warning-light': 'var(--fill-warning-light)',
+    'warning-light-hover': 'var(--fill-warning-light-hover)',
+    'warning-thick': 'var(--fill-warning-thick)',
+    'warning-thick-hover': 'var(--fill-warning-thick-hover)',
+    'error-light': 'var(--fill-error-light)',
+    'error-light-hover': 'var(--fill-error-light-hover)',
+    'error-thick': 'var(--fill-error-thick)',
+    'error-thick-hover': 'var(--fill-error-thick-hover)',
+    'error-select': 'var(--fill-error-select)',
+    'purple-light': 'var(--fill-purple-light)',
+    'purple-light-hover': 'var(--fill-purple-light-hover)',
+    'purple-thick-hover': 'var(--fill-purple-thick-hover)',
+    'purple-thick': 'var(--fill-purple-thick)',
   },
-  "surface": {
-    "primary": "var(--surface-primary)",
-    "overlay": "var(--surface-overlay)"
+  'surface': {
+    'primary': 'var(--surface-primary)',
+    'overlay': 'var(--surface-overlay)',
+    'secondary': 'var(--surface-secondary)',
   },
-  "background": {
-    "primary": "var(--background-primary)",
-    "secondary": "var(--background-secondary)",
-    "tertiary": "var(--background-tertiary)",
-    "quaternary": "var(--background-quaternary)"
+  'background': {
+    'primary': 'var(--background-primary)',
+    'secondary': 'var(--background-secondary)',
+    'tertiary': 'var(--background-tertiary)',
+    'quaternary': 'var(--background-quaternary)',
   },
-  "badge": {
-    "color-rose-rose-light-1": "var(--badge-color-rose-rose-light-1)",
-    "color-rose-rose-light-2": "var(--badge-color-rose-rose-light-2)",
-    "color-rose-rose-light-3": "var(--badge-color-rose-rose-light-3)",
-    "color-rose-rose-thick-1": "var(--badge-color-rose-rose-thick-1)",
-    "color-rose-rose-thick-2": "var(--badge-color-rose-rose-thick-2)",
-    "color-rose-rose-thick-3": "var(--badge-color-rose-rose-thick-3)",
-    "color-papaya-papaya-light-1": "var(--badge-color-papaya-papaya-light-1)",
-    "color-papaya-papaya-light-2": "var(--badge-color-papaya-papaya-light-2)",
-    "color-papaya-papaya-light-3": "var(--badge-color-papaya-papaya-light-3)",
-    "color-papaya-papaya-thick-1": "var(--badge-color-papaya-papaya-thick-1)",
-    "color-papaya-papaya-thick-2": "var(--badge-color-papaya-papaya-thick-2)",
-    "color-papaya-papaya-thick-3": "var(--badge-color-papaya-papaya-thick-3)",
-    "color-tangerine-tangerine-light-1": "var(--badge-color-tangerine-tangerine-light-1)",
-    "color-tangerine-tangerine-light-2": "var(--badge-color-tangerine-tangerine-light-2)",
-    "color-tangerine-tangerine-light-3": "var(--badge-color-tangerine-tangerine-light-3)",
-    "color-tangerine-tangerine-thick-1": "var(--badge-color-tangerine-tangerine-thick-1)",
-    "color-tangerine-tangerine-thick-2": "var(--badge-color-tangerine-tangerine-thick-2)",
-    "color-tangerine-tangerine-thick-3": "var(--badge-color-tangerine-tangerine-thick-3)",
-    "color-mango-mango-light-1": "var(--badge-color-mango-mango-light-1)",
-    "color-mango-mango-light-2": "var(--badge-color-mango-mango-light-2)",
-    "color-mango-mango-light-3": "var(--badge-color-mango-mango-light-3)",
-    "color-mango-mango-thick-1": "var(--badge-color-mango-mango-thick-1)",
-    "color-mango-mango-thick-2": "var(--badge-color-mango-mango-thick-2)",
-    "color-mango-mango-thick-3": "var(--badge-color-mango-mango-thick-3)",
-    "color-lemon-lemon-light-1": "var(--badge-color-lemon-lemon-light-1)",
-    "color-lemon-lemon-light-2": "var(--badge-color-lemon-lemon-light-2)",
-    "color-lemon-lemon-light-3": "var(--badge-color-lemon-lemon-light-3)",
-    "color-lemon-lemon-thick-1": "var(--badge-color-lemon-lemon-thick-1)",
-    "color-lemon-lemon-thick-2": "var(--badge-color-lemon-lemon-thick-2)",
-    "color-lemon-lemon-thick-3": "var(--badge-color-lemon-lemon-thick-3)",
-    "color-olive-olive-light-1": "var(--badge-color-olive-olive-light-1)",
-    "color-olive-olive-light-2": "var(--badge-color-olive-olive-light-2)",
-    "color-olive-olive-light-3": "var(--badge-color-olive-olive-light-3)",
-    "color-olive-olive-thick-1": "var(--badge-color-olive-olive-thick-1)",
-    "color-olive-olive-thick-2": "var(--badge-color-olive-olive-thick-2)",
-    "color-olive-olive-thick-3": "var(--badge-color-olive-olive-thick-3)",
-    "color-lime-lime-light-1": "var(--badge-color-lime-lime-light-1)",
-    "color-lime-lime-light-2": "var(--badge-color-lime-lime-light-2)",
-    "color-lime-lime-light-3": "var(--badge-color-lime-lime-light-3)",
-    "color-lime-lime-thick-1": "var(--badge-color-lime-lime-thick-1)",
-    "color-lime-lime-thick-2": "var(--badge-color-lime-lime-thick-2)",
-    "color-lime-lime-thick-3": "var(--badge-color-lime-lime-thick-3)",
-    "color-grass-grass-light-1": "var(--badge-color-grass-grass-light-1)",
-    "color-grass-grass-light-2": "var(--badge-color-grass-grass-light-2)",
-    "color-grass-grass-light-3": "var(--badge-color-grass-grass-light-3)",
-    "color-grass-grass-thick-1": "var(--badge-color-grass-grass-thick-1)",
-    "color-grass-grass-thick-2": "var(--badge-color-grass-grass-thick-2)",
-    "color-grass-grass-thick-3": "var(--badge-color-grass-grass-thick-3)",
-    "color-forest-forest-light-1": "var(--badge-color-forest-forest-light-1)",
-    "color-forest-forest-light-2": "var(--badge-color-forest-forest-light-2)",
-    "color-forest-forest-light-3": "var(--badge-color-forest-forest-light-3)",
-    "color-forest-forest-thick-1": "var(--badge-color-forest-forest-thick-1)",
-    "color-forest-forest-thick-2": "var(--badge-color-forest-forest-thick-2)",
-    "color-forest-forest-thick-3": "var(--badge-color-forest-forest-thick-3)",
-    "color-jade-jade-light-1": "var(--badge-color-jade-jade-light-1)",
-    "color-jade-jade-light-2": "var(--badge-color-jade-jade-light-2)",
-    "color-jade-jade-light-3": "var(--badge-color-jade-jade-light-3)",
-    "color-jade-jade-thick-1": "var(--badge-color-jade-jade-thick-1)",
-    "color-jade-jade-thick-2": "var(--badge-color-jade-jade-thick-2)",
-    "color-jade-jade-thick-3": "var(--badge-color-jade-jade-thick-3)",
-    "color-aqua-aqua-light-1": "var(--badge-color-aqua-aqua-light-1)",
-    "color-aqua-aqua-light-2": "var(--badge-color-aqua-aqua-light-2)",
-    "color-aqua-aqua-light-3": "var(--badge-color-aqua-aqua-light-3)",
-    "color-aqua-aqua-thick-1": "var(--badge-color-aqua-aqua-thick-1)",
-    "color-aqua-aqua-thick-2": "var(--badge-color-aqua-aqua-thick-2)",
-    "color-aqua-aqua-thick-3": "var(--badge-color-aqua-aqua-thick-3)",
-    "color-azure-azure-light-1": "var(--badge-color-azure-azure-light-1)",
-    "color-azure-azure-light-2": "var(--badge-color-azure-azure-light-2)",
-    "color-azure-azure-light-3": "var(--badge-color-azure-azure-light-3)",
-    "color-azure-azure-thick-1": "var(--badge-color-azure-azure-thick-1)",
-    "color-azure-azure-thick-2": "var(--badge-color-azure-azure-thick-2)",
-    "color-azure-azure-thick-3": "var(--badge-color-azure-azure-thick-3)",
-    "color-denim-denim-light-1": "var(--badge-color-denim-denim-light-1)",
-    "color-denim-denim-light-2": "var(--badge-color-denim-denim-light-2)",
-    "color-denim-denim-light-3": "var(--badge-color-denim-denim-light-3)",
-    "color-denim-denim-thick-1": "var(--badge-color-denim-denim-thick-1)",
-    "color-denim-denim-thick-2": "var(--badge-color-denim-denim-thick-2)",
-    "color-denim-denim-thick-3": "var(--badge-color-denim-denim-thick-3)",
-    "color-mauve-mauve-light-1": "var(--badge-color-mauve-mauve-light-1)",
-    "color-mauve-mauve-thick-2": "var(--badge-color-mauve-mauve-thick-2)",
-    "color-mauve-mauve-thick-3": "var(--badge-color-mauve-mauve-thick-3)",
-    "color-mauve-mauve-thick-1": "var(--badge-color-mauve-mauve-thick-1)",
-    "color-lavender-lavender-light-1": "var(--badge-color-lavender-lavender-light-1)",
-    "color-lavender-lavender-light-2": "var(--badge-color-lavender-lavender-light-2)",
-    "color-lavender-lavender-light-3": "var(--badge-color-lavender-lavender-light-3)",
-    "color-lavender-lavender-thick-1": "var(--badge-color-lavender-lavender-thick-1)",
-    "color-lavender-lavender-thick-2": "var(--badge-color-lavender-lavender-thick-2)",
-    "color-lavender-lavender-thick-3": "var(--badge-color-lavender-lavender-thick-3)",
-    "color-lilac-liliac-light-1": "var(--badge-color-lilac-liliac-light-1)",
-    "color-lilac-liliac-light-2": "var(--badge-color-lilac-liliac-light-2)",
-    "color-lilac-liliac-light-3": "var(--badge-color-lilac-liliac-light-3)",
-    "color-lilac-liliac-thick-1": "var(--badge-color-lilac-liliac-thick-1)",
-    "color-lilac-liliac-thick-2": "var(--badge-color-lilac-liliac-thick-2)",
-    "color-lilac-liliac-thick-3": "var(--badge-color-lilac-liliac-thick-3)",
-    "color-mallow-mallow-light-1": "var(--badge-color-mallow-mallow-light-1)",
-    "color-mallow-mallow-light-2": "var(--badge-color-mallow-mallow-light-2)",
-    "color-mallow-mallow-light-3": "var(--badge-color-mallow-mallow-light-3)",
-    "color-mallow-mallow-thick-1": "var(--badge-color-mallow-mallow-thick-1)",
-    "color-mallow-mallow-thick-2": "var(--badge-color-mallow-mallow-thick-2)",
-    "color-mallow-mallow-thick-3": "var(--badge-color-mallow-mallow-thick-3)",
-    "color-camellia-camellia-light-1": "var(--badge-color-camellia-camellia-light-1)",
-    "color-camellia-camellia-light-2": "var(--badge-color-camellia-camellia-light-2)",
-    "color-camellia-camellia-light-3": "var(--badge-color-camellia-camellia-light-3)",
-    "color-camellia-camellia-thick-1": "var(--badge-color-camellia-camellia-thick-1)",
-    "color-camellia-camellia-thick-2": "var(--badge-color-camellia-camellia-thick-2)",
-    "color-camellia-camellia-thick-3": "var(--badge-color-camellia-camellia-thick-3)",
-    "color-smoke-smoke-light-1": "var(--badge-color-smoke-smoke-light-1)",
-    "color-smoke-smoke-light-2": "var(--badge-color-smoke-smoke-light-2)",
-    "color-smoke-smoke-light-3": "var(--badge-color-smoke-smoke-light-3)",
-    "color-smoke-smoke-thick-1": "var(--badge-color-smoke-smoke-thick-1)",
-    "color-smoke-smoke-thick-2": "var(--badge-color-smoke-smoke-thick-2)",
-    "color-smoke-smoke-thick-3": "var(--badge-color-smoke-smoke-thick-3)",
-    "color-iron-icon-light-1": "var(--badge-color-iron-icon-light-1)",
-    "color-iron-icon-light-2": "var(--badge-color-iron-icon-light-2)",
-    "color-iron-icon-light-3": "var(--badge-color-iron-icon-light-3)",
-    "color-iron-icon-thick-1": "var(--badge-color-iron-icon-thick-1)",
-    "color-iron-icon-thick-2": "var(--badge-color-iron-icon-thick-2)",
-    "color-iron-icon-thick-3": "var(--badge-color-iron-icon-thick-3)"
+  'badge': {
+    'color-rose-rose-light-1': 'var(--badge-color-rose-rose-light-1)',
+    'color-rose-rose-light-2': 'var(--badge-color-rose-rose-light-2)',
+    'color-rose-rose-light-3': 'var(--badge-color-rose-rose-light-3)',
+    'color-rose-rose-thick-1': 'var(--badge-color-rose-rose-thick-1)',
+    'color-rose-rose-thick-2': 'var(--badge-color-rose-rose-thick-2)',
+    'color-rose-rose-thick-3': 'var(--badge-color-rose-rose-thick-3)',
+    'color-papaya-papaya-light-1': 'var(--badge-color-papaya-papaya-light-1)',
+    'color-papaya-papaya-light-2': 'var(--badge-color-papaya-papaya-light-2)',
+    'color-papaya-papaya-light-3': 'var(--badge-color-papaya-papaya-light-3)',
+    'color-papaya-papaya-thick-1': 'var(--badge-color-papaya-papaya-thick-1)',
+    'color-papaya-papaya-thick-2': 'var(--badge-color-papaya-papaya-thick-2)',
+    'color-papaya-papaya-thick-3': 'var(--badge-color-papaya-papaya-thick-3)',
+    'color-tangerine-tangerine-light-1': 'var(--badge-color-tangerine-tangerine-light-1)',
+    'color-tangerine-tangerine-light-2': 'var(--badge-color-tangerine-tangerine-light-2)',
+    'color-tangerine-tangerine-light-3': 'var(--badge-color-tangerine-tangerine-light-3)',
+    'color-tangerine-tangerine-thick-1': 'var(--badge-color-tangerine-tangerine-thick-1)',
+    'color-tangerine-tangerine-thick-2': 'var(--badge-color-tangerine-tangerine-thick-2)',
+    'color-tangerine-tangerine-thick-3': 'var(--badge-color-tangerine-tangerine-thick-3)',
+    'color-mango-mango-light-1': 'var(--badge-color-mango-mango-light-1)',
+    'color-mango-mango-light-2': 'var(--badge-color-mango-mango-light-2)',
+    'color-mango-mango-light-3': 'var(--badge-color-mango-mango-light-3)',
+    'color-mango-mango-thick-1': 'var(--badge-color-mango-mango-thick-1)',
+    'color-mango-mango-thick-2': 'var(--badge-color-mango-mango-thick-2)',
+    'color-mango-mango-thick-3': 'var(--badge-color-mango-mango-thick-3)',
+    'color-lemon-lemon-light-1': 'var(--badge-color-lemon-lemon-light-1)',
+    'color-lemon-lemon-light-2': 'var(--badge-color-lemon-lemon-light-2)',
+    'color-lemon-lemon-light-3': 'var(--badge-color-lemon-lemon-light-3)',
+    'color-lemon-lemon-thick-1': 'var(--badge-color-lemon-lemon-thick-1)',
+    'color-lemon-lemon-thick-2': 'var(--badge-color-lemon-lemon-thick-2)',
+    'color-lemon-lemon-thick-3': 'var(--badge-color-lemon-lemon-thick-3)',
+    'color-olive-olive-light-1': 'var(--badge-color-olive-olive-light-1)',
+    'color-olive-olive-light-2': 'var(--badge-color-olive-olive-light-2)',
+    'color-olive-olive-light-3': 'var(--badge-color-olive-olive-light-3)',
+    'color-olive-olive-thick-1': 'var(--badge-color-olive-olive-thick-1)',
+    'color-olive-olive-thick-2': 'var(--badge-color-olive-olive-thick-2)',
+    'color-olive-olive-thick-3': 'var(--badge-color-olive-olive-thick-3)',
+    'color-lime-lime-light-1': 'var(--badge-color-lime-lime-light-1)',
+    'color-lime-lime-light-2': 'var(--badge-color-lime-lime-light-2)',
+    'color-lime-lime-light-3': 'var(--badge-color-lime-lime-light-3)',
+    'color-lime-lime-thick-1': 'var(--badge-color-lime-lime-thick-1)',
+    'color-lime-lime-thick-2': 'var(--badge-color-lime-lime-thick-2)',
+    'color-lime-lime-thick-3': 'var(--badge-color-lime-lime-thick-3)',
+    'color-grass-grass-light-1': 'var(--badge-color-grass-grass-light-1)',
+    'color-grass-grass-light-2': 'var(--badge-color-grass-grass-light-2)',
+    'color-grass-grass-light-3': 'var(--badge-color-grass-grass-light-3)',
+    'color-grass-grass-thick-1': 'var(--badge-color-grass-grass-thick-1)',
+    'color-grass-grass-thick-2': 'var(--badge-color-grass-grass-thick-2)',
+    'color-grass-grass-thick-3': 'var(--badge-color-grass-grass-thick-3)',
+    'color-forest-forest-light-1': 'var(--badge-color-forest-forest-light-1)',
+    'color-forest-forest-light-2': 'var(--badge-color-forest-forest-light-2)',
+    'color-forest-forest-light-3': 'var(--badge-color-forest-forest-light-3)',
+    'color-forest-forest-thick-1': 'var(--badge-color-forest-forest-thick-1)',
+    'color-forest-forest-thick-2': 'var(--badge-color-forest-forest-thick-2)',
+    'color-forest-forest-thick-3': 'var(--badge-color-forest-forest-thick-3)',
+    'color-jade-jade-light-1': 'var(--badge-color-jade-jade-light-1)',
+    'color-jade-jade-light-2': 'var(--badge-color-jade-jade-light-2)',
+    'color-jade-jade-light-3': 'var(--badge-color-jade-jade-light-3)',
+    'color-jade-jade-thick-1': 'var(--badge-color-jade-jade-thick-1)',
+    'color-jade-jade-thick-2': 'var(--badge-color-jade-jade-thick-2)',
+    'color-jade-jade-thick-3': 'var(--badge-color-jade-jade-thick-3)',
+    'color-aqua-aqua-light-1': 'var(--badge-color-aqua-aqua-light-1)',
+    'color-aqua-aqua-light-2': 'var(--badge-color-aqua-aqua-light-2)',
+    'color-aqua-aqua-light-3': 'var(--badge-color-aqua-aqua-light-3)',
+    'color-aqua-aqua-thick-1': 'var(--badge-color-aqua-aqua-thick-1)',
+    'color-aqua-aqua-thick-2': 'var(--badge-color-aqua-aqua-thick-2)',
+    'color-aqua-aqua-thick-3': 'var(--badge-color-aqua-aqua-thick-3)',
+    'color-azure-azure-light-1': 'var(--badge-color-azure-azure-light-1)',
+    'color-azure-azure-light-2': 'var(--badge-color-azure-azure-light-2)',
+    'color-azure-azure-light-3': 'var(--badge-color-azure-azure-light-3)',
+    'color-azure-azure-thick-1': 'var(--badge-color-azure-azure-thick-1)',
+    'color-azure-azure-thick-2': 'var(--badge-color-azure-azure-thick-2)',
+    'color-azure-azure-thick-3': 'var(--badge-color-azure-azure-thick-3)',
+    'color-denim-denim-light-1': 'var(--badge-color-denim-denim-light-1)',
+    'color-denim-denim-light-2': 'var(--badge-color-denim-denim-light-2)',
+    'color-denim-denim-light-3': 'var(--badge-color-denim-denim-light-3)',
+    'color-denim-denim-thick-1': 'var(--badge-color-denim-denim-thick-1)',
+    'color-denim-denim-thick-2': 'var(--badge-color-denim-denim-thick-2)',
+    'color-denim-denim-thick-3': 'var(--badge-color-denim-denim-thick-3)',
+    'color-mauve-mauve-light-1': 'var(--badge-color-mauve-mauve-light-1)',
+    'color-mauve-mauve-thick-2': 'var(--badge-color-mauve-mauve-thick-2)',
+    'color-mauve-mauve-thick-3': 'var(--badge-color-mauve-mauve-thick-3)',
+    'color-mauve-mauve-thick-1': 'var(--badge-color-mauve-mauve-thick-1)',
+    'color-lavender-lavender-light-1': 'var(--badge-color-lavender-lavender-light-1)',
+    'color-lavender-lavender-light-2': 'var(--badge-color-lavender-lavender-light-2)',
+    'color-lavender-lavender-light-3': 'var(--badge-color-lavender-lavender-light-3)',
+    'color-lavender-lavender-thick-1': 'var(--badge-color-lavender-lavender-thick-1)',
+    'color-lavender-lavender-thick-2': 'var(--badge-color-lavender-lavender-thick-2)',
+    'color-lavender-lavender-thick-3': 'var(--badge-color-lavender-lavender-thick-3)',
+    'color-lilac-liliac-light-1': 'var(--badge-color-lilac-liliac-light-1)',
+    'color-lilac-liliac-light-2': 'var(--badge-color-lilac-liliac-light-2)',
+    'color-lilac-liliac-light-3': 'var(--badge-color-lilac-liliac-light-3)',
+    'color-lilac-liliac-thick-1': 'var(--badge-color-lilac-liliac-thick-1)',
+    'color-lilac-liliac-thick-2': 'var(--badge-color-lilac-liliac-thick-2)',
+    'color-lilac-liliac-thick-3': 'var(--badge-color-lilac-liliac-thick-3)',
+    'color-mallow-mallow-light-1': 'var(--badge-color-mallow-mallow-light-1)',
+    'color-mallow-mallow-light-2': 'var(--badge-color-mallow-mallow-light-2)',
+    'color-mallow-mallow-light-3': 'var(--badge-color-mallow-mallow-light-3)',
+    'color-mallow-mallow-thick-1': 'var(--badge-color-mallow-mallow-thick-1)',
+    'color-mallow-mallow-thick-2': 'var(--badge-color-mallow-mallow-thick-2)',
+    'color-mallow-mallow-thick-3': 'var(--badge-color-mallow-mallow-thick-3)',
+    'color-camellia-camellia-light-1': 'var(--badge-color-camellia-camellia-light-1)',
+    'color-camellia-camellia-light-2': 'var(--badge-color-camellia-camellia-light-2)',
+    'color-camellia-camellia-light-3': 'var(--badge-color-camellia-camellia-light-3)',
+    'color-camellia-camellia-thick-1': 'var(--badge-color-camellia-camellia-thick-1)',
+    'color-camellia-camellia-thick-2': 'var(--badge-color-camellia-camellia-thick-2)',
+    'color-camellia-camellia-thick-3': 'var(--badge-color-camellia-camellia-thick-3)',
+    'color-smoke-smoke-light-1': 'var(--badge-color-smoke-smoke-light-1)',
+    'color-smoke-smoke-light-2': 'var(--badge-color-smoke-smoke-light-2)',
+    'color-smoke-smoke-light-3': 'var(--badge-color-smoke-smoke-light-3)',
+    'color-smoke-smoke-thick-1': 'var(--badge-color-smoke-smoke-thick-1)',
+    'color-smoke-smoke-thick-2': 'var(--badge-color-smoke-smoke-thick-2)',
+    'color-smoke-smoke-thick-3': 'var(--badge-color-smoke-smoke-thick-3)',
+    'color-iron-icon-light-1': 'var(--badge-color-iron-icon-light-1)',
+    'color-iron-icon-light-2': 'var(--badge-color-iron-icon-light-2)',
+    'color-iron-icon-light-3': 'var(--badge-color-iron-icon-light-3)',
+    'color-iron-icon-thick-1': 'var(--badge-color-iron-icon-thick-1)',
+    'color-iron-icon-thick-2': 'var(--badge-color-iron-icon-thick-2)',
+    'color-iron-icon-thick-3': 'var(--badge-color-iron-icon-thick-3)',
   },
-  "brand": {
-    "skyline": "var(--brand-skyline)",
-    "aqua": "var(--brand-aqua)",
-    "violet": "var(--brand-violet)",
-    "amethyst": "var(--brand-amethyst)",
-    "berry": "var(--brand-berry)",
-    "coral": "var(--brand-coral)",
-    "golden": "var(--brand-golden)",
-    "amber": "var(--brand-amber)",
-    "lemon": "var(--brand-lemon)"
+  'brand': {
+    'skyline': 'var(--brand-skyline)',
+    'aqua': 'var(--brand-aqua)',
+    'violet': 'var(--brand-violet)',
+    'amethyst': 'var(--brand-amethyst)',
+    'berry': 'var(--brand-berry)',
+    'coral': 'var(--brand-coral)',
+    'golden': 'var(--brand-golden)',
+    'amber': 'var(--brand-amber)',
+    'lemon': 'var(--brand-lemon)',
+  },
+  'other': {
+    'colors-text-highlight': 'var(--other-colors-text-highlight)',
   },
-  "other": {
-    "colors-text-highlight": "var(--other-colors-text-highlight)"
-  }
 };