diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f4df4eec..fc77746d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -462,7 +462,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.7.tgz",
       "integrity": "sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -2067,7 +2066,6 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz",
       "integrity": "sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==",
-      "peer": true,
       "dependencies": {
         "@jest/environment": "^29.7.0",
         "@jest/expect": "^29.7.0",
@@ -5174,6 +5172,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -5189,6 +5188,7 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -5205,6 +5205,7 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -5217,6 +5218,7 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -5226,6 +5228,7 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5422,7 +5425,8 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -5576,7 +5580,6 @@
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
       "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -5646,7 +5649,6 @@
       "version": "20.14.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
       "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
-      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -5667,7 +5669,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -5687,7 +5688,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -5779,7 +5779,6 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6255,7 +6254,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001629",
         "electron-to-chromium": "^1.4.796",
@@ -7238,7 +7236,6 @@
       "version": "8.57.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -8299,7 +8296,6 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -10691,7 +10687,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -10955,7 +10950,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10993,7 +10987,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -11027,14 +11020,12 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "peer": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -11234,8 +11225,7 @@
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "peer": true
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -11830,7 +11820,6 @@
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
       "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -11999,7 +11988,6 @@
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.4.tgz",
       "integrity": "sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "bs-logger": "0.x",
         "fast-json-stable-stringify": "2.x",
@@ -12056,7 +12044,6 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12140,7 +12127,6 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12365,7 +12351,6 @@
       "version": "5.2.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
       "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
diff --git a/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx b/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx
new file mode 100644
index 00000000..6b722d62
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx
@@ -0,0 +1,26 @@
+import { TableCell, TableRow } from '@/components/ui/table';
+
+export const Taskskeleton = ({ count }: { count: number }) => {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <TableRow key={i} className="animate-pulse">
+          <TableCell className="py-3">
+            <div className="h-5 w-6 bg-[#252528] rounded-md"></div>
+          </TableCell>
+
+          <TableCell className="py-3">
+            <div className="flex items-center space-x-2">
+              <div className="h-4 w-4 bg-[#252528] rounded-full"></div>
+              <div className="h-5 w-16 md:w-48 bg-[#252528] rounded-xl"></div>
+              <div className="h-5 w-12 md:w-16 bg-[#252528] rounded-xl"></div>
+            </div>
+          </TableCell>
+          <TableCell className="py-3">
+            <div className="h-5 w-6 bg-[#252528] rounded-md"></div>
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+};
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index bd87921b..140288db 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -70,6 +70,7 @@ import {
 import { debounce } from '@/components/utils/utils';
 import { DatePicker } from '@/components/ui/date-picker';
 import { format } from 'date-fns';
+import { Taskskeleton } from './Task-Skeleton';
 
 const db = new TasksDatabase();
 export let syncTasksWithTwAndDb: () => any;
@@ -266,6 +267,8 @@ export const Tasks = (
     } catch (error) {
       console.error('Error syncing tasks:', error);
       toast.error(`Failed to sync tasks. Please try again.`);
+    } finally {
+      props.setIsLoading(false);
     }
   }, [props.email, props.encryptionSecret, props.UUID]); // Add dependencies
 
@@ -805,7 +808,13 @@ export const Tasks = (
                       </Dialog>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <Button variant="outline" onClick={syncTasksWithTwAndDb}>
+                      <Button
+                        variant="outline"
+                        onClick={() => (
+                          props.setIsLoading(true),
+                          syncTasksWithTwAndDb()
+                        )}
+                      >
                         Sync
                       </Button>
                     </div>
@@ -852,105 +861,209 @@ export const Tasks = (
                     </TableHeader>
                     <TableBody>
                       {/* Display tasks */}
-                      {currentTasks.map((task: Task, index: number) => (
-                        <Dialog
-                          onOpenChange={(_isDialogOpen) =>
-                            handleDialogOpenChange(_isDialogOpen, task)
-                          }
-                          key={index}
-                        >
-                          <DialogTrigger asChild>
-                            <TableRow key={index} className="border-b">
-                              {/* Display task details */}
-                              <TableCell className="py-2">
-                                <span className="text-s text-foreground">
-                                  {task.id}
-                                </span>
-                              </TableCell>
-                              <TableCell className="flex items-center space-x-2 py-2">
-                                {task.priority === 'H' && (
-                                  <div className="flex items-center justify-center w-3 h-3 bg-red-500 rounded-full border-0 min-w-3"></div>
-                                )}
-                                {task.priority === 'M' && (
-                                  <div className="flex items-center justify-center w-3 h-3 bg-yellow-500 rounded-full border-0 min-w-3"></div>
-                                )}
-                                {task.priority != 'H' &&
-                                  task.priority != 'M' && (
-                                    <div className="flex items-center justify-center w-3 h-3 bg-green-500 rounded-full border-0 min-w-3"></div>
+                      {props.isLoading ? (
+                        <Taskskeleton count={tasksPerPage} />
+                      ) : (
+                        currentTasks.map((task: Task, index: number) => (
+                          <Dialog
+                            onOpenChange={(_isDialogOpen) =>
+                              handleDialogOpenChange(_isDialogOpen, task)
+                            }
+                            key={index}
+                          >
+                            <DialogTrigger asChild>
+                              <TableRow key={index} className="border-b">
+                                {/* Display task details */}
+                                <TableCell className="py-2">
+                                  <span className="text-s text-foreground">
+                                    {task.id}
+                                  </span>
+                                </TableCell>
+                                <TableCell className="flex items-center space-x-2 py-2">
+                                  {task.priority === 'H' && (
+                                    <div className="flex items-center justify-center w-3 h-3 bg-red-500 rounded-full border-0 min-w-3"></div>
                                   )}
-                                <span className="text-s text-foreground">
-                                  {task.description}
-                                </span>
-                                {task.project != '' && (
-                                  <Badge variant={'secondary'}>
-                                    <Folder className="pr-2" />
-                                    {task.project === '' ? '' : task.project}
-                                  </Badge>
-                                )}
-                              </TableCell>
-                              <TableCell className="py-2">
-                                <Badge
-                                  variant={
-                                    task.status === 'pending'
-                                      ? 'secondary'
+                                  {task.priority === 'M' && (
+                                    <div className="flex items-center justify-center w-3 h-3 bg-yellow-500 rounded-full border-0 min-w-3"></div>
+                                  )}
+                                  {task.priority != 'H' &&
+                                    task.priority != 'M' && (
+                                      <div className="flex items-center justify-center w-3 h-3 bg-green-500 rounded-full border-0 min-w-3"></div>
+                                    )}
+                                  <span className="text-s text-foreground">
+                                    {task.description}
+                                  </span>
+                                  {task.project != '' && (
+                                    <Badge variant={'secondary'}>
+                                      <Folder className="pr-2" />
+                                      {task.project === '' ? '' : task.project}
+                                    </Badge>
+                                  )}
+                                </TableCell>
+                                <TableCell className="py-2">
+                                  <Badge
+                                    variant={
+                                      task.status === 'pending'
+                                        ? 'secondary'
+                                        : task.status === 'deleted'
+                                          ? 'destructive'
+                                          : 'default'
+                                    }
+                                  >
+                                    {task.status === 'completed'
+                                      ? 'C'
                                       : task.status === 'deleted'
-                                        ? 'destructive'
-                                        : 'default'
-                                  }
-                                >
-                                  {task.status === 'completed'
-                                    ? 'C'
-                                    : task.status === 'deleted'
-                                      ? 'D'
-                                      : 'P'}
-                                </Badge>
-                              </TableCell>
-                            </TableRow>
-                          </DialogTrigger>
-                          <DialogContent className="sm:max-w-[625px] max-h-[90vh] flex flex-col">
-                            <DialogHeader>
-                              <DialogTitle>
-                                <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                  <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                    Task{' '}
+                                        ? 'D'
+                                        : 'P'}
+                                  </Badge>
+                                </TableCell>
+                              </TableRow>
+                            </DialogTrigger>
+                            <DialogContent className="sm:max-w-[625px] max-h-[90vh] flex flex-col">
+                              <DialogHeader>
+                                <DialogTitle>
+                                  <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                    <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                      Task{' '}
+                                    </span>
+                                    Details
                                   </span>
-                                  Details
-                                </span>
-                              </DialogTitle>
-                            </DialogHeader>
+                                </DialogTitle>
+                              </DialogHeader>
 
-                            {/* Scrollable content */}
-                            <div className="overflow-y-auto flex-1">
-                              <DialogDescription asChild>
-                                <Table>
-                                  <TableBody>
-                                    <TableRow>
-                                      <TableCell>ID:</TableCell>
-                                      <TableCell>{task.id}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Description:</TableCell>
-                                      <TableCell>
-                                        {isEditing ? (
-                                          <>
-                                            <div className="flex items-center">
-                                              <Input
-                                                id={`description-${task.id}`}
-                                                name={`description-${task.id}`}
-                                                type="text"
-                                                value={editedDescription}
-                                                onChange={(e) =>
-                                                  setEditedDescription(
-                                                    e.target.value
+                              {/* Scrollable content */}
+                              <div className="overflow-y-auto flex-1">
+                                <DialogDescription asChild>
+                                  <Table>
+                                    <TableBody>
+                                      <TableRow>
+                                        <TableCell>ID:</TableCell>
+                                        <TableCell>{task.id}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Description:</TableCell>
+                                        <TableCell>
+                                          {isEditing ? (
+                                            <>
+                                              <div className="flex items-center">
+                                                <Input
+                                                  id={`description-${task.id}`}
+                                                  name={`description-${task.id}`}
+                                                  type="text"
+                                                  value={editedDescription}
+                                                  onChange={(e) =>
+                                                    setEditedDescription(
+                                                      e.target.value
+                                                    )
+                                                  }
+                                                  className="flex-grow mr-2"
+                                                />
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={() =>
+                                                    handleSaveClick(task)
+                                                  }
+                                                >
+                                                  <CheckIcon className="h-4 w-4 text-green-500" />
+                                                </Button>
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={handleCancelClick}
+                                                >
+                                                  <XIcon className="h-4 w-4 text-red-500" />
+                                                </Button>
+                                              </div>
+                                            </>
+                                          ) : (
+                                            <>
+                                              <span>{task.description}</span>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() =>
+                                                  handleEditClick(
+                                                    task.description
                                                   )
                                                 }
-                                                className="flex-grow mr-2"
-                                              />
+                                              >
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
+                                              </Button>
+                                            </>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Due:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.due)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Start:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.start)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>End:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.end)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Wait:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.wait)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Depends:</TableCell>
+                                        <TableCell>{task.depends}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Recur:</TableCell>
+                                        <TableCell>{task.recur}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>RType:</TableCell>
+                                        <TableCell>{task.rtype}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Priority:</TableCell>
+                                        <TableCell>
+                                          {isEditingPriority ? (
+                                            <div className="flex items-center">
+                                              <Select
+                                                value={editedPriority}
+                                                onValueChange={
+                                                  setEditedPriority
+                                                }
+                                              >
+                                                <SelectTrigger className="flex-grow mr-2">
+                                                  <SelectValue placeholder="Select priority" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                  <SelectItem value="NONE">
+                                                    None
+                                                  </SelectItem>
+                                                  <SelectItem value="H">
+                                                    High (H)
+                                                  </SelectItem>
+                                                  <SelectItem value="M">
+                                                    Medium (M)
+                                                  </SelectItem>
+                                                  <SelectItem value="L">
+                                                    Low (L)
+                                                  </SelectItem>
+                                                </SelectContent>
+                                              </Select>
                                               <Button
                                                 variant="ghost"
                                                 size="icon"
                                                 onClick={() =>
-                                                  handleSaveClick(task)
+                                                  handleSavePriority(task)
                                                 }
                                               >
                                                 <CheckIcon className="h-4 w-4 text-green-500" />
@@ -958,150 +1071,111 @@ export const Tasks = (
                                               <Button
                                                 variant="ghost"
                                                 size="icon"
-                                                onClick={handleCancelClick}
+                                                onClick={handleCancelPriority}
                                               >
                                                 <XIcon className="h-4 w-4 text-red-500" />
                                               </Button>
                                             </div>
-                                          </>
-                                        ) : (
-                                          <>
-                                            <span>{task.description}</span>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleEditClick(
-                                                  task.description
-                                                )
-                                              }
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Due:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.due)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Start:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.start)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>End:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.end)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Wait:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.wait)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Depends:</TableCell>
-                                      <TableCell>{task.depends}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Recur:</TableCell>
-                                      <TableCell>{task.recur}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>RType:</TableCell>
-                                      <TableCell>{task.rtype}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Priority:</TableCell>
-                                      <TableCell>
-                                        {isEditingPriority ? (
-                                          <div className="flex items-center">
-                                            <Select
-                                              value={editedPriority}
-                                              onValueChange={setEditedPriority}
-                                            >
-                                              <SelectTrigger className="flex-grow mr-2">
-                                                <SelectValue placeholder="Select priority" />
-                                              </SelectTrigger>
-                                              <SelectContent>
-                                                <SelectItem value="NONE">
-                                                  None
-                                                </SelectItem>
-                                                <SelectItem value="H">
-                                                  High (H)
-                                                </SelectItem>
-                                                <SelectItem value="M">
-                                                  Medium (M)
-                                                </SelectItem>
-                                                <SelectItem value="L">
-                                                  Low (L)
-                                                </SelectItem>
-                                              </SelectContent>
-                                            </Select>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleSavePriority(task)
-                                              }
-                                            >
-                                              <CheckIcon className="h-4 w-4 text-green-500" />
-                                            </Button>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={handleCancelPriority}
-                                            >
-                                              <XIcon className="h-4 w-4 text-red-500" />
-                                            </Button>
-                                          </div>
-                                        ) : (
-                                          <div className="flex items-center">
-                                            <span>
-                                              {task.priority
-                                                ? task.priority === 'H'
-                                                  ? 'High (H)'
-                                                  : task.priority === 'M'
-                                                    ? 'Medium (M)'
-                                                    : task.priority === 'L'
-                                                      ? 'Low (L)'
-                                                      : task.priority
-                                                : 'None'}
-                                            </span>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleEditPriorityClick(task)
-                                              }
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </div>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Project:</TableCell>
-                                      <TableCell>
-                                        {isEditingProject ? (
-                                          <>
+                                          ) : (
+                                            <div className="flex items-center">
+                                              <span>
+                                                {task.priority
+                                                  ? task.priority === 'H'
+                                                    ? 'High (H)'
+                                                    : task.priority === 'M'
+                                                      ? 'Medium (M)'
+                                                      : task.priority === 'L'
+                                                        ? 'Low (L)'
+                                                        : task.priority
+                                                  : 'None'}
+                                              </span>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() =>
+                                                  handleEditPriorityClick(task)
+                                                }
+                                              >
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
+                                              </Button>
+                                            </div>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Project:</TableCell>
+                                        <TableCell>
+                                          {isEditingProject ? (
+                                            <>
+                                              <div className="flex items-center">
+                                                <Input
+                                                  id={`project-${task.id}`}
+                                                  name={`project-${task.id}`}
+                                                  type="text"
+                                                  value={editedProject}
+                                                  onChange={(e) =>
+                                                    setEditedProject(
+                                                      e.target.value
+                                                    )
+                                                  }
+                                                  className="flex-grow mr-2"
+                                                />
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={() =>
+                                                    handleProjectSaveClick(task)
+                                                  }
+                                                >
+                                                  <CheckIcon className="h-4 w-4 text-green-500" />
+                                                </Button>
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={() =>
+                                                    setIsEditingProject(false)
+                                                  }
+                                                >
+                                                  <XIcon className="h-4 w-4 text-red-500" />
+                                                </Button>
+                                              </div>
+                                            </>
+                                          ) : (
+                                            <>
+                                              <span>{task.project}</span>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() => {
+                                                  setIsEditingProject(true);
+                                                  setEditedProject(
+                                                    task.project
+                                                  );
+                                                }}
+                                              >
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
+                                              </Button>
+                                            </>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Status:</TableCell>
+                                        <TableCell>{task.status}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Tags:</TableCell>
+                                        <TableCell>
+                                          {isEditingTags ? (
                                             <div className="flex items-center">
                                               <Input
-                                                id={`project-${task.id}`}
-                                                name={`project-${task.id}`}
                                                 type="text"
-                                                value={editedProject}
+                                                value={editedTags.join(', ')}
                                                 onChange={(e) =>
-                                                  setEditedProject(
+                                                  setEditedTags(
                                                     e.target.value
+                                                      .split(',')
+                                                      .map((tag) => tag.trim())
                                                   )
                                                 }
                                                 className="flex-grow mr-2"
@@ -1110,226 +1184,171 @@ export const Tasks = (
                                                 variant="ghost"
                                                 size="icon"
                                                 onClick={() =>
-                                                  handleProjectSaveClick(task)
+                                                  handleSaveTags(task)
                                                 }
                                               >
                                                 <CheckIcon className="h-4 w-4 text-green-500" />
                                               </Button>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={handleCancelTags}
+                                              >
+                                                <XIcon className="h-4 w-4 text-red-500" />
+                                              </Button>
+                                            </div>
+                                          ) : (
+                                            <div className="flex items-center">
+                                              {task.tags !== null &&
+                                              task.tags.length >= 1 ? (
+                                                task.tags.map((tag, index) => (
+                                                  <Badge
+                                                    key={index}
+                                                    variant="secondary"
+                                                    className="mr-2"
+                                                  >
+                                                    <Tag className="pr-3" />
+                                                    {tag}
+                                                  </Badge>
+                                                ))
+                                              ) : (
+                                                <span>No Tags</span>
+                                              )}
                                               <Button
                                                 variant="ghost"
                                                 size="icon"
                                                 onClick={() =>
-                                                  setIsEditingProject(false)
+                                                  handleEditTagsClick(task)
                                                 }
                                               >
-                                                <XIcon className="h-4 w-4 text-red-500" />
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
                                               </Button>
                                             </div>
-                                          </>
-                                        ) : (
-                                          <>
-                                            <span>{task.project}</span>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() => {
-                                                setIsEditingProject(true);
-                                                setEditedProject(task.project);
-                                              }}
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Status:</TableCell>
-                                      <TableCell>{task.status}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Tags:</TableCell>
-                                      <TableCell>
-                                        {isEditingTags ? (
-                                          <div className="flex items-center">
-                                            <Input
-                                              type="text"
-                                              value={editedTags.join(', ')}
-                                              onChange={(e) =>
-                                                setEditedTags(
-                                                  e.target.value
-                                                    .split(',')
-                                                    .map((tag) => tag.trim())
-                                                )
-                                              }
-                                              className="flex-grow mr-2"
-                                            />
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleSaveTags(task)
-                                              }
-                                            >
-                                              <CheckIcon className="h-4 w-4 text-green-500" />
-                                            </Button>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={handleCancelTags}
-                                            >
-                                              <XIcon className="h-4 w-4 text-red-500" />
-                                            </Button>
-                                          </div>
-                                        ) : (
-                                          <div className="flex items-center">
-                                            {task.tags !== null &&
-                                            task.tags.length >= 1 ? (
-                                              task.tags.map((tag, index) => (
-                                                <Badge
-                                                  key={index}
-                                                  variant="secondary"
-                                                  className="mr-2"
-                                                >
-                                                  <Tag className="pr-3" />
-                                                  {tag}
-                                                </Badge>
-                                              ))
-                                            ) : (
-                                              <span>No Tags</span>
-                                            )}
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleEditTagsClick(task)
-                                              }
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </div>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Urgency:</TableCell>
-                                      <TableCell>{task.urgency}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>UUID:</TableCell>
-                                      <TableCell className="flex items-center">
-                                        <span>{task.uuid}</span>
-                                        <CopyToClipboard
-                                          text={task.uuid}
-                                          onCopy={() => handleCopy('Task UUID')}
-                                        >
-                                          <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-2 px-2 rounded ml-2">
-                                            <CopyIcon />
-                                          </button>
-                                        </CopyToClipboard>
-                                      </TableCell>
-                                    </TableRow>
-                                  </TableBody>
-                                </Table>
-                              </DialogDescription>
-                            </div>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Urgency:</TableCell>
+                                        <TableCell>{task.urgency}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>UUID:</TableCell>
+                                        <TableCell className="flex items-center">
+                                          <span>{task.uuid}</span>
+                                          <CopyToClipboard
+                                            text={task.uuid}
+                                            onCopy={() =>
+                                              handleCopy('Task UUID')
+                                            }
+                                          >
+                                            <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-2 px-2 rounded ml-2">
+                                              <CopyIcon />
+                                            </button>
+                                          </CopyToClipboard>
+                                        </TableCell>
+                                      </TableRow>
+                                    </TableBody>
+                                  </Table>
+                                </DialogDescription>
+                              </div>
 
-                            {/* Non-scrollable footer */}
-                            <DialogFooter className="flex flex-row justify-end pt-4">
-                              {task.status == 'pending' ? (
-                                <Dialog>
-                                  <DialogTrigger asChild className="mr-5">
-                                    <Button>Mark As Completed</Button>
-                                  </DialogTrigger>
-                                  <DialogContent>
-                                    <DialogTitle>
-                                      <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                        <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                          Are you{' '}
+                              {/* Non-scrollable footer */}
+                              <DialogFooter className="flex flex-row justify-end pt-4">
+                                {task.status == 'pending' ? (
+                                  <Dialog>
+                                    <DialogTrigger asChild className="mr-5">
+                                      <Button>Mark As Completed</Button>
+                                    </DialogTrigger>
+                                    <DialogContent>
+                                      <DialogTitle>
+                                        <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                          <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                            Are you{' '}
+                                          </span>
+                                          sure?
                                         </span>
-                                        sure?
-                                      </span>
-                                    </DialogTitle>
-                                    <DialogFooter className="flex flex-row justify-center">
-                                      <DialogClose asChild>
-                                        <Button
-                                          className="mr-5"
-                                          onClick={() =>
-                                            markTaskAsCompleted(
-                                              props.email,
-                                              props.encryptionSecret,
-                                              props.UUID,
-                                              task.uuid
-                                            )
-                                          }
-                                        >
-                                          Yes
-                                        </Button>
-                                      </DialogClose>
-                                      <DialogClose asChild>
-                                        <Button variant={'destructive'}>
-                                          No
-                                        </Button>
-                                      </DialogClose>
-                                    </DialogFooter>
-                                  </DialogContent>
-                                </Dialog>
-                              ) : null}
+                                      </DialogTitle>
+                                      <DialogFooter className="flex flex-row justify-center">
+                                        <DialogClose asChild>
+                                          <Button
+                                            className="mr-5"
+                                            onClick={() =>
+                                              markTaskAsCompleted(
+                                                props.email,
+                                                props.encryptionSecret,
+                                                props.UUID,
+                                                task.uuid
+                                              )
+                                            }
+                                          >
+                                            Yes
+                                          </Button>
+                                        </DialogClose>
+                                        <DialogClose asChild>
+                                          <Button variant={'destructive'}>
+                                            No
+                                          </Button>
+                                        </DialogClose>
+                                      </DialogFooter>
+                                    </DialogContent>
+                                  </Dialog>
+                                ) : null}
 
-                              {task.status != 'deleted' ? (
-                                <Dialog>
-                                  <DialogTrigger asChild>
-                                    <Button
-                                      className="mr-4"
-                                      variant={'destructive'}
-                                    >
-                                      <Trash2Icon />
-                                    </Button>
-                                  </DialogTrigger>
-                                  <DialogContent>
-                                    <DialogTitle>
-                                      <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                        <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                          Are you{' '}
+                                {task.status != 'deleted' ? (
+                                  <Dialog>
+                                    <DialogTrigger asChild>
+                                      <Button
+                                        className="mr-4"
+                                        variant={'destructive'}
+                                      >
+                                        <Trash2Icon />
+                                      </Button>
+                                    </DialogTrigger>
+                                    <DialogContent>
+                                      <DialogTitle>
+                                        <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                          <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                            Are you{' '}
+                                          </span>
+                                          sure?
                                         </span>
-                                        sure?
-                                      </span>
-                                    </DialogTitle>
-                                    <DialogFooter className="flex flex-row justify-center">
-                                      <DialogClose asChild>
-                                        <Button
-                                          className="mr-5"
-                                          onClick={() =>
-                                            markTaskAsDeleted(
-                                              props.email,
-                                              props.encryptionSecret,
-                                              props.UUID,
-                                              task.uuid
-                                            )
-                                          }
-                                        >
-                                          Yes
-                                        </Button>
-                                      </DialogClose>
-                                      <DialogClose asChild>
-                                        <Button variant={'destructive'}>
-                                          No
-                                        </Button>
-                                      </DialogClose>
-                                    </DialogFooter>
-                                  </DialogContent>
-                                </Dialog>
-                              ) : null}
-                              <DialogClose asChild>
-                                <Button className="bg-white">Close</Button>
-                              </DialogClose>
-                            </DialogFooter>
-                          </DialogContent>
-                        </Dialog>
-                      ))}
+                                      </DialogTitle>
+                                      <DialogFooter className="flex flex-row justify-center">
+                                        <DialogClose asChild>
+                                          <Button
+                                            className="mr-5"
+                                            onClick={() =>
+                                              markTaskAsDeleted(
+                                                props.email,
+                                                props.encryptionSecret,
+                                                props.UUID,
+                                                task.uuid
+                                              )
+                                            }
+                                          >
+                                            Yes
+                                          </Button>
+                                        </DialogClose>
+                                        <DialogClose asChild>
+                                          <Button variant={'destructive'}>
+                                            No
+                                          </Button>
+                                        </DialogClose>
+                                      </DialogFooter>
+                                    </DialogContent>
+                                  </Dialog>
+                                ) : null}
+                                <DialogClose asChild>
+                                  <Button className="bg-white">Close</Button>
+                                </DialogClose>
+                              </DialogFooter>
+                            </DialogContent>
+                          </Dialog>
+                        ))
+                      )}
 
                       {/* Display empty rows */}
-                      {emptyRows > 0 && (
+                      {!props.isLoading && emptyRows > 0 && (
                         <TableRow style={{ height: 52 * emptyRows }}>
                           <TableCell colSpan={6} />
                         </TableRow>