diff --git a/app/data/pinning.ts b/app/data/pinning.ts
new file mode 100644
index 0000000..80d9540
--- /dev/null
+++ b/app/data/pinning.ts
@@ -0,0 +1,55 @@
+interface PinningStatus {
+    id: string;
+    progress: number;
+    status: 'inprogress' | 'completed' | 'stale';
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
+class PinningProcess {
+    private static instances: Map<string, PinningStatus> = new Map();
+
+    static async pin(id: string): Promise<{ success: boolean; message: string }> {
+        if (PinningProcess.instances.has(id)) {
+            return { success: false, message: "ID is already being processed" };
+        }
+
+        const pinningStatus: PinningStatus = { id, progress: 0, status: 'inprogress' };
+        PinningProcess.instances.set(id, pinningStatus);
+
+        // Simulate async progress
+        (async () => {
+            for (let progress = 1; progress <= 100; progress++) {
+                await new Promise(resolve => setTimeout(resolve, Math.floor(Math.random() * (500 - 100 + 1)) + 100)); // Simulate time passing with random duration between 100 and 500
+                pinningStatus.progress = progress;
+                if (progress === 100) {
+                    pinningStatus.status = 'completed';
+                }
+            }
+        })();
+
+        return { success: true, message: "Pinning process started" };
+    }
+
+    static *pollProgress(id: string): Generator<PinningStatus | null, void, unknown> {
+        let status = PinningProcess.instances.get(id);
+        while (status && status.status !== 'completed') {
+            yield status;
+            status = PinningProcess.instances.get(id);
+        }
+        yield status ?? null; // Yield the final status, could be null if ID doesn't exist
+    }
+}
+
+// Example usage:
+// (async () => {
+//     const { success, message } = await PinningProcess.pin("123");
+//     console.log(message);
+//     if (success) {
+//         const progressGenerator = PinningProcess.pollProgress("123");
+//         let result = progressGenerator.next();
+//         while (!result.done) {
+//             console.log(result.value); // Log the progress
+//             result = progressGenerator.next();
+//         }
+//     }
+// })();
diff --git a/app/routes/account.tsx b/app/routes/account.tsx
index b8d32f7..41a4717 100644
--- a/app/routes/account.tsx
+++ b/app/routes/account.tsx
@@ -1,12 +1,23 @@
 import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword } from "@refinedev/core";
+import {
+  BaseKey,
+  useGetIdentity,
+  useUpdate,
+  useUpdatePassword,
+} from "@refinedev/core";
 import { useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
 import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons";
-import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle } from "~/components/management-card";
+import {
+  ManagementCard,
+  ManagementCardAvatar,
+  ManagementCardContent,
+  ManagementCardFooter,
+  ManagementCardTitle,
+} from "~/components/management-card";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -51,10 +62,12 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Email Address</ManagementCardTitle>
           <ManagementCardContent className="text-ring font-semibold">
-          {identity?.email}
+            {identity?.email}
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, changeEmail: true })}>
               <AddIcon />
               Change Email Address
             </Button>
@@ -63,8 +76,8 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Account Type</ManagementCardTitle>
           <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
-          Lite Premium Account
-          <CrownIcon />
+            Lite Premium Account
+            <CrownIcon />
           </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2">
@@ -82,7 +95,9 @@ export default function MyAccount() {
             <PasswordDots className="mt-6" />
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changePassword: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, changePassword: true })}>
               <AddIcon />
               Change Password
             </Button>
@@ -91,35 +106,27 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
           <ManagementCardContent>
-          Improve security by enabling 2FA.
+            Improve security by enabling 2FA.
           </ManagementCardContent>
           <ManagementCardFooter>
-            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
+            <Button
+              className="h-12 gap-x-2"
+              onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
               <AddIcon />
               Enable Two-Factor Authorization
             </Button>
           </ManagementCardFooter>
         </ManagementCard>
-        <ManagementCard>
-          <ManagementCardTitle>Backup Key</ManagementCardTitle>
-          <ManagementCardContent>
-          Never share this code with anyone.
-          </ManagementCardContent>
-          <ManagementCardFooter>
-            <Button className="h-12 gap-x-2">
-              <AddIcon />
-              Export Backup Key
-            </Button>
-          </ManagementCardFooter>
-        </ManagementCard>
       </div>
       <h2 className="font-bold my-8">More</h2>
       <div className="grid grid-cols-3 gap-x-8">
         <ManagementCard variant="accent">
           <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
-          <ManagementCardContent>Get 1 GB per friend invited for free (max 5 GB).</ManagementCardContent>
+          <ManagementCardContent>
+            Get 1 GB per friend invited for free (max 5 GB).
+          </ManagementCardContent>
           <ManagementCardFooter>
-          <Button variant="accent" className="h-12 gap-x-2">
+            <Button variant="accent" className="h-12 gap-x-2">
               <AddIcon />
               Send Invitation
             </Button>
@@ -127,7 +134,9 @@ export default function MyAccount() {
         </ManagementCard>
         <ManagementCard>
           <ManagementCardTitle>Read our Resources</ManagementCardTitle>
-          <ManagementCardContent>Navigate helpful articles or get assistance.</ManagementCardContent>
+          <ManagementCardContent>
+            Navigate helpful articles or get assistance.
+          </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2">
               <AddIcon />
@@ -137,7 +146,9 @@ export default function MyAccount() {
         </ManagementCard>
         <ManagementCard>
           <ManagementCardTitle>Delete Account</ManagementCardTitle>
-          <ManagementCardContent>Once initiated, this action cannot be undone.</ManagementCardContent>
+          <ManagementCardContent>
+            Once initiated, this action cannot be undone.
+          </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2" variant="destructive">
               <AddIcon />
@@ -170,21 +181,22 @@ export default function MyAccount() {
   );
 }
 
-const ChangeEmailSchema = z.object({
-  email: z.string().email(),
-  password: z.string(),
-  retypePassword: z.string(),
-})
-.superRefine((data, ctx) => {
-  if (data.password !== data.retypePassword) {
-    return ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      path: ["retypePassword"],
-      message: "Passwords do not match",
-    });
-  }
-  return true;
-});
+const ChangeEmailSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string(),
+    retypePassword: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.password !== data.retypePassword) {
+      return ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["retypePassword"],
+        message: "Passwords do not match",
+      });
+    }
+    return true;
+  });
 
 const ChangeEmailForm = ({
   open,
@@ -195,7 +207,7 @@ const ChangeEmailForm = ({
   setOpen: (value: boolean) => void;
   currentValue: string;
 }) => {
-  const{ data: identity } = useGetIdentity<{ id: BaseKey }>();
+  const { data: identity } = useGetIdentity<{ id: BaseKey }>();
   const { mutate: updateEmail } = useUpdate();
   const [form, fields] = useForm({
     id: "login",
@@ -210,13 +222,13 @@ const ChangeEmailForm = ({
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
       console.log(identity);
       updateEmail({
-        resource: 'users',
+        resource: "users",
         id: identity?.id || "",
         values: {
-          email: data.email.toString()
-        }
-      })
-    }
+          email: data.email.toString(),
+        },
+      });
+    },
   });
 
   return (
@@ -255,21 +267,22 @@ const ChangeEmailForm = ({
   );
 };
 
-const ChangePasswordSchema = z.object({
-  currentPassword: z.string().email(),
-  newPassword: z.string(),
-  retypePassword: z.string(),
-})
-.superRefine((data, ctx) => {
-  if (data.newPassword !== data.retypePassword) {
-    return ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      path: ["retypePassword"],
-      message: "Passwords do not match",
-    });
-  }
-  return true;
-});
+const ChangePasswordSchema = z
+  .object({
+    currentPassword: z.string().email(),
+    newPassword: z.string(),
+    retypePassword: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.newPassword !== data.retypePassword) {
+      return ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["retypePassword"],
+        message: "Passwords do not match",
+      });
+    }
+    return true;
+  });
 
 const ChangePasswordForm = ({
   open,
@@ -290,11 +303,10 @@ const ChangePasswordForm = ({
       e.preventDefault();
 
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-      
-      updatePassword({
-        password: data.newPassword.toString()
-      });
 
+      updatePassword({
+        password: data.newPassword.toString(),
+      });
     },
   });
 
@@ -390,6 +402,7 @@ const SetupTwoFactorDialog = ({
 const PasswordDots = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="219"
       height="7"
       viewBox="0 0 219 7"
@@ -414,4 +427,4 @@ const PasswordDots = ({ className }: { className?: string }) => {
       <circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
     </svg>
   );
-};
\ No newline at end of file
+};