diff --git a/src/lib/components/backupRestoreBox.svelte b/src/lib/components/backupRestoreBox.svelte
index 91e8a6ad2..69d3dd60f 100644
--- a/src/lib/components/backupRestoreBox.svelte
+++ b/src/lib/components/backupRestoreBox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { sdk } from '$lib/stores/sdk';
-    import { type Payload, Query } from '@appwrite.io/console';
+    import { type Payload } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { isCloud, isSelfHosted } from '$lib/system';
     import { organization } from '$lib/stores/organization';
@@ -52,39 +52,6 @@
         }
     }
 
-    async function fetchBackupRestores() {
-        try {
-            const query = [
-                Query.equal('status', 'pending'),
-                Query.equal('status', 'uploading'),
-                Query.equal('status', 'processing')
-            ];
-
-            const [archivesResponse, restorationsResponse] = await Promise.all([
-                sdk.forProject.backups.listArchives([
-                    ...query,
-                    // only manual backups
-                    Query.isNull('policyId')
-                ]),
-                sdk.forProject.backups.listRestorations(query)
-            ]);
-
-            // this is a one time op.
-            backupRestoreItems.archives = new Map(
-                archivesResponse.archives.map((item) => [item.$id, item])
-            );
-
-            backupRestoreItems.restorations = new Map(
-                restorationsResponse.restorations.map((item) => [item.$id, item])
-            );
-        } catch (e) {
-            // ignore?
-        }
-    }
-
-    // fresh fetch.
-    fetchBackupRestores();
-
     function updateOrAddItem(payload: Payload) {
         const { $id, status, $collection, policyId } = payload;
         if ($collection === 'archives' && policyId !== null) {
@@ -155,8 +122,7 @@
         // fast path: don't subscribe if org is on a free plan or is self-hosted.
         if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
 
-        sdk.forConsole.client.subscribe('console', (response) => {
-            // nice!
+        return sdk.forConsole.client.subscribe('console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
 
             if (
diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index d0ecd9e1c..630cd4efb 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -122,7 +122,7 @@
 </Modal>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     .card {
         position: fixed;
@@ -133,7 +133,7 @@
         max-width: 600px;
     }
 
-    @media #{$break1} {
+    @media #{devices.$break1} {
         .card {
             bottom: 0.5rem;
             left: 0.5rem;
diff --git a/src/lib/components/migrationBox.svelte b/src/lib/components/migrationBox.svelte
index 9b019a54f..09fd2c86f 100644
--- a/src/lib/components/migrationBox.svelte
+++ b/src/lib/components/migrationBox.svelte
@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
-    import { last } from '$lib/helpers/array';
-    import { debounce } from '$lib/helpers/debounce';
     import { parseIfString } from '$lib/helpers/object';
+    import { getProjectId } from '$lib/helpers/project';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
@@ -49,17 +48,12 @@
         return Number.isNaN(res) ? 0 : res;
     })();
 
-    const fetchMigrations = debounce(async () => {
-        const { migrations } = await sdk.forProject.migrations.list();
-        migration = last(migrations);
-    }, 1000);
-
-    fetchMigrations();
-
-    onMount(async () => {
-        sdk.forConsole.client.subscribe(['project', 'console'], async (response) => {
+    onMount(() => {
+        return sdk.forConsole.client.subscribe<Models.Migration>(['console'], async (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
-                fetchMigrations();
+                if (response.payload.source === 'Backup') return;
+                migration = response.payload;
             }
         });
     });
diff --git a/src/lib/components/modalSideCol.svelte b/src/lib/components/modalSideCol.svelte
index 2d3f90238..22264001c 100644
--- a/src/lib/components/modalSideCol.svelte
+++ b/src/lib/components/modalSideCol.svelte
@@ -51,7 +51,7 @@
 </ModalWrapper>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/mixins/_scroll.scss';
+    @use '@appwrite.io/pink/src/abstract/mixins/scroll';
 
     .mk-grid {
         overflow: hidden;
@@ -60,7 +60,7 @@
         }
         &-item-2 {
             overflow: auto;
-            @include scroll;
+            @include scroll.scroll;
         }
     }
 
diff --git a/src/lib/components/modalWrapper.svelte b/src/lib/components/modalWrapper.svelte
index d85c3f0b0..4551ff70f 100644
--- a/src/lib/components/modalWrapper.svelte
+++ b/src/lib/components/modalWrapper.svelte
@@ -84,13 +84,13 @@
 </dialog>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     .modal.is-huge {
         block-size: 100%;
         min-block-size: 80vh;
 
-        @media #{$break1}, #{$break2} {
+        @media #{devices.$break1}, #{devices.$break2} {
             min-inline-size: 100%;
             min-block-size: 100%;
             border-radius: 0;
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index 71b330027..07d7f755e 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -86,7 +86,7 @@
 </FormItem>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     /* Default (including mobile) */
     ol {
@@ -99,7 +99,7 @@
     }
 
     /* for smaller screens */
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         ol {
             gap: 1rem;
 
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index da754bd5d..9e457cd27 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -222,8 +222,7 @@
 </main>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
-    @import '@appwrite.io/pink/src/abstract/variables/_common.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     .side-bg {
         position: relative;
@@ -251,7 +250,7 @@
                 block-size: 32%;
                 background: radial-gradient(49.55% 43.54% at 47% 50.69%, #e7f8f7 0%, #85dbd8 100%);
                 filter: blur(150px);
-                @media #{$break1} {
+                @media #{devices.$break1} {
                     filter: blur(100px);
                 }
             }
@@ -270,7 +269,7 @@
                 );
                 filter: blur(200px);
 
-                @media #{$break1} {
+                @media #{devices.$break1} {
                     filter: blur(100px);
                 }
             }
@@ -278,10 +277,10 @@
         &-img {
             padding-inline: 6.25rem;
             max-width: 40rem;
-            @media #{$break2} {
+            @media #{devices.$break2} {
                 max-width: 28rem;
             }
-            @media #{$break1} {
+            @media #{devices.$break1} {
                 margin-block-start: 3rem;
                 max-inline-size: 23rem;
                 padding-inline: 4rem;
@@ -326,7 +325,7 @@
     }
 
     /* for smaller screens */
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         .side-default {
             background: var(--url);
             background-repeat: no-repeat;
@@ -344,7 +343,7 @@
     }
 
     /* for larger screens */
-    @media #{$break3open} {
+    @media #{devices.$break3open} {
         .side-default {
             div {
                 padding-inline-start: 5.625rem;
@@ -379,7 +378,7 @@
     .logo-variation {
         padding-block-start: 2rem;
 
-        @media #{$break1} {
+        @media #{devices.$break1} {
             padding-block-start: 0rem;
             & img {
                 scale: 0.7;
@@ -389,7 +388,7 @@
 
     .review-footer-container {
         padding-block-start: 10rem;
-        @media #{$break1} {
+        @media #{devices.$break1} {
             padding-block-start: 5rem;
         }
     }
diff --git a/src/routes/(authenticated)/mfa/+page.svelte b/src/routes/(authenticated)/mfa/+page.svelte
index bfae50d5b..35b841124 100644
--- a/src/routes/(authenticated)/mfa/+page.svelte
+++ b/src/routes/(authenticated)/mfa/+page.svelte
@@ -70,7 +70,8 @@
 </Unauthenticated>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
+
     .top {
         inset-block-start: 5.85rem;
         inline-size: 100%;
@@ -89,7 +90,7 @@
     }
 
     /* for smaller screens */
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         .top {
             inset-block-start: 5.85rem;
             padding-inline: 0;
diff --git a/src/routes/(console)/account/updateMfa.svelte b/src/routes/(console)/account/updateMfa.svelte
index d945f8fb7..90004eba6 100644
--- a/src/routes/(console)/account/updateMfa.svelte
+++ b/src/routes/(console)/account/updateMfa.svelte
@@ -318,7 +318,7 @@
     factors={$factors} />
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     /* Default (including mobile) */
     .method {
@@ -329,7 +329,7 @@
     }
 
     /* for smaller screens */
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         .method {
             align-items: center;
         }
diff --git a/src/routes/(console)/project-[project]/+layout.svelte b/src/routes/(console)/project-[project]/+layout.svelte
index e50716318..501cb0048 100644
--- a/src/routes/(console)/project-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/+layout.svelte
@@ -106,7 +106,6 @@
 <div class="layout-level-progress-bars">
     <UploadBox />
     <MigrationBox />
-
     <BackupRestoreBox />
 </div>
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
index e304a32ce..8ffa5d948 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
@@ -106,14 +106,14 @@
 </CardGrid>
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     .stats-grid-box {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
     }
 
-    @media #{$break3open} {
+    @media #{devices.$break3open} {
         .stats-grid-box {
             grid-template-columns: repeat(4, 1fr);
         }
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 41c9581ba..677258ccc 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -187,7 +187,7 @@
     alt="statistics" />
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
 
     .card {
         :global(.theme-dark) & {
@@ -215,7 +215,7 @@
         margin-inline: 4rem;
     }
 
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         .card-header {
             background-image: var(--url);
             background-repeat: no-repeat;
@@ -234,11 +234,11 @@
         z-index: 1;
         position: absolute;
 
-        @media #{$break1} {
+        @media #{devices.$break1} {
             margin-block-start: 15%;
         }
 
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
             margin-block-start: 2rem;
         }
     }
diff --git a/src/routes/(public)/auth/oauth2/failure/+page.svelte b/src/routes/(public)/auth/oauth2/failure/+page.svelte
index 33ad1720a..811fb1b94 100644
--- a/src/routes/(public)/auth/oauth2/failure/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/failure/+page.svelte
@@ -42,9 +42,9 @@
 {/await}
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
     // override padding for screens bigger than mobile
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         article.card {
             padding: 2rem !important;
         }
diff --git a/src/routes/(public)/auth/oauth2/success/+page.svelte b/src/routes/(public)/auth/oauth2/success/+page.svelte
index 42c842c01..362b80222 100644
--- a/src/routes/(public)/auth/oauth2/success/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/success/+page.svelte
@@ -42,9 +42,9 @@
 {/await}
 
 <style lang="scss">
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
     // override padding for screens bigger than mobile
-    @media #{$break2open} {
+    @media #{devices.$break2open} {
         article.card {
             padding: 2rem !important;
         }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0abae2b69..5463680fe 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -103,9 +103,9 @@
 
 <Progress />
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
-    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @use '@appwrite.io/pink/src/abstract/variables/devices';
+
     .tippy-box {
         --p-tooltip-text-color: var(--color-neutral-10);
         --p-tooltip--bg-color: var(--color-neutral-80);
@@ -186,7 +186,7 @@
     .is-cloud {
         --heading-font: 'Aeonik Pro', arial, sans-serif;
         .heading-level {
-            @media #{$break3open} {
+            @media #{devices.$break3open} {
                 &-1,
                 &-2,
                 &-3,