diff --git a/bun.lock b/bun.lock
index 89d7211..805c89b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -39,6 +39,7 @@
         "@heroui/user": "^2.2.21",
         "@hookform/resolvers": "^5.2.2",
         "@internationalized/date": "^3.9.0",
+        "@reactour/tour": "^3.8.0",
         "@tanstack/react-query": "^5.89.0",
         "@tanstack/react-query-devtools": "^5.89.0",
         "axios": "^1.12.2",
@@ -600,6 +601,16 @@
 
     "@react-types/tooltip": ["@react-types/tooltip@3.4.20", "", { "dependencies": { "@react-types/overlays": "^3.9.1", "@react-types/shared": "^3.32.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-tF1yThwvgSgW8Gu/CLL0p92AUldHR6szlwhwW+ewT318sQlfabMGO4xlCNFdxJYtqTpEXk2rlaVrBuaC//du0w=="],
 
+    "@reactour/mask": ["@reactour/mask@1.2.0", "", { "dependencies": { "@reactour/utils": "*" }, "peerDependencies": { "react": "16.x || 17.x || 18.x || 19.x" } }, "sha512-XLgBLWfKJybtZjNTSO5lt/SIvRlCZBadB6JfE/hO1ErqURRjYhnv+edC0Ki1haUCqMGFppWk3lwcPCjmK0xNog=="],
+
+    "@reactour/popover": ["@reactour/popover@1.3.0", "", { "dependencies": { "@reactour/utils": "*" }, "peerDependencies": { "react": "16.x || 17.x || 18.x || 19.x" } }, "sha512-YdyjSmHPvEeQEcJM4gcGFa5pI/Yf4nZGqwG4JnT+rK1SyUJBIPnm4Gkl/h7/+1g0KCFMkwNwagS3ZiXvZB7ThA=="],
+
+    "@reactour/tour": ["@reactour/tour@3.8.0", "", { "dependencies": { "@reactour/mask": "*", "@reactour/popover": "*", "@reactour/utils": "*" }, "peerDependencies": { "react": "16.x || 17.x || 18.x || 19.x" } }, "sha512-KZTFi1pAvoTVKKRdBN5+XCYxXBp4k4Ql/acZcXyPvec8VU24fkMSEeV+v8krfYQpoVcewxIu3gM6xWZZLjxi7w=="],
+
+    "@reactour/utils": ["@reactour/utils@0.6.0", "", { "dependencies": { "@rooks/use-mutation-observer": "^4.11.2", "resize-observer-polyfill": "^1.5.1" }, "peerDependencies": { "react": "16.x || 17.x || 18.x || 19.x" } }, "sha512-GqaLjQi7MJsgtAKjdiw2Eak1toFkADoLRnm1+HZpaD+yl+DkaHpC1N7JAl+kVOO5I17bWInPA+OFbXjO9Co8Qg=="],
+
+    "@rooks/use-mutation-observer": ["@rooks/use-mutation-observer@4.11.2", "", { "peerDependencies": { "react": ">=16.8.0" } }, "sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@rushstack/eslint-patch": ["@rushstack/eslint-patch@1.12.0", "", {}, "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw=="],
@@ -1404,6 +1415,8 @@
 
     "requestidlecallback": ["requestidlecallback@0.3.0", "", {}, "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ=="],
 
+    "resize-observer-polyfill": ["resize-observer-polyfill@1.5.1", "", {}, "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="],
+
     "resolve": ["resolve@1.22.10", "", { "dependencies": { "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
 
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
diff --git a/package.json b/package.json
index 1c904e1..f89b7e7 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@heroui/user": "^2.2.21",
     "@hookform/resolvers": "^5.2.2",
     "@internationalized/date": "^3.9.0",
+    "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.89.0",
     "@tanstack/react-query-devtools": "^5.89.0",
     "axios": "^1.12.2",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9dc55c2..63f49da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { useProviders } from "@/hooks/data/use-providers";
 import { Button } from "@heroui/button";
+import { useTour } from "@reactour/tour";
 import Link from "next/link";
 
 export default function Home() {
@@ -21,9 +22,7 @@ export default function Home() {
     }
 
     if (data && data.length > 0) {
-      const hasLinkedIn = data.some(
-        (provider) => provider.provider.toLowerCase() === "linkedin"
-      );
+      const hasLinkedIn = data.some((provider) => provider.provider.toLowerCase() === "linkedin");
       if (!hasLinkedIn) {
         return true;
       }
@@ -31,25 +30,19 @@ export default function Home() {
 
     return false;
   }
-
   return (
-    <div className="flex items-center justify-center h-screen flex-col gap-4">
+    <div className="flex flex-col items-center justify-center h-screen gap-4">
       {actionNeeded() ? (
         <>
           <h1 className="text-2xl font-bold">Welcome to Post0</h1>
-          <p className="text-content4-foreground">
-            Please connect your LinkedIn account to get started.
-          </p>
+          <p className="text-content4-foreground">Please connect your LinkedIn account to get started.</p>
         </>
       ) : (
         <>
           <h1 className="text-2xl font-bold">Welcome Back to Post0</h1>
-          <p className="text-content4-foreground">
-            Your LinkedIn account is connected.
-          </p>
+          <p className="text-content4-foreground">Your LinkedIn account is connected.</p>
         </>
       )}
-
       <div className="mt-4">
         {actionNeeded() ? (
           <Link href="/connections">
diff --git a/src/app/personalize/page.tsx b/src/app/personalize/page.tsx
new file mode 100644
index 0000000..d6fa9a1
--- /dev/null
+++ b/src/app/personalize/page.tsx
@@ -0,0 +1,381 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@heroui/button";
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Input } from "@heroui/input";
+import { Textarea } from "@heroui/input";
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@heroui/dropdown";
+import { Avatar } from "@heroui/avatar";
+import { Badge } from "@heroui/badge";
+import { Chip } from "@heroui/chip";
+import { Divider } from "@heroui/divider";
+import { Plus, Search, Edit, Trash2, Copy, MoreVertical, User, Sparkles, Calendar, Settings } from "lucide-react";
+import { useUser } from "@/hooks/data/use-user";
+import { useGetPresets, useCreatePreset, useUpdatePreset, useDeletePreset, useUpdateUserProfile } from "@/hooks/data/use-presets";
+import LoaderSection from "@/components/shared/loader-section";
+import { addToast } from "@heroui/toast";
+
+export default function PresetsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [selectedPreset, setSelectedPreset] = useState<UserPreset | null>(null);
+  const [isEditingProfile, setIsEditingProfile] = useState(false);
+
+  const { data: userProfile, isLoading: userLoading, isError, error } = useUser();
+  const createPresetMutation = useCreatePreset();
+  const updatePresetMutation = useUpdatePreset();
+  const deletePresetMutation = useDeletePreset();
+  const updateProfileMutation = useUpdateUserProfile();
+
+  console.log("user", userProfile);
+
+  const [presetForm, setPresetForm] = useState({
+    title: "",
+    description: "",
+  });
+
+  const [profileForm, setProfileForm] = useState({
+    name: userProfile?.name || "",
+    bio: userProfile?.bio || "",
+  });
+
+  React.useEffect(() => {
+    if (userProfile) {
+      setProfileForm({
+        name: userProfile.name,
+        bio: userProfile.bio || "",
+      });
+    }
+  }, [userProfile]);
+
+  const handleCreatePreset = async () => {
+    if (presetForm.title.trim() && presetForm.description.trim()) {
+      try {
+        await createPresetMutation.mutateAsync({
+          title: presetForm.title,
+          description: presetForm.description,
+        });
+
+        addToast({
+          title: "Preset created successfully!",
+          color: "success",
+        });
+
+        setPresetForm({ title: "", description: "" });
+        setIsCreateModalOpen(false);
+      } catch (error) {
+        addToast({
+          title: "Failed to create preset. Please try again.",
+          color: "danger",
+        });
+      }
+    }
+  };
+
+  const handleEditPreset = (preset: UserPreset) => {
+    setSelectedPreset(preset);
+    setPresetForm({
+      title: preset.title,
+      description: preset.description,
+    });
+    setIsEditModalOpen(true);
+  };
+
+  const handleUpdatePreset = async () => {
+    if (selectedPreset && presetForm.title.trim() && presetForm.description.trim()) {
+      try {
+        await updatePresetMutation.mutateAsync({
+          title: presetForm.title,
+          description: presetForm.description,
+          id: selectedPreset.id,
+        });
+
+        addToast({
+          title: "Preset updated successfully!",
+          color: "success",
+        });
+
+        setIsEditModalOpen(false);
+        setSelectedPreset(null);
+        setPresetForm({ title: "", description: "" });
+      } catch (error) {
+        addToast({
+          title: "Failed to update preset. Please try again.",
+          color: "danger",
+        });
+      }
+    }
+  };
+
+  const handleDeletePreset = async (id: string) => {
+    try {
+      await deletePresetMutation.mutateAsync(id);
+
+      addToast({
+        title: "Preset deleted successfully!",
+        color: "success",
+      });
+    } catch (error) {
+      addToast({
+        title: "Failed to delete preset. Please try again.",
+        color: "danger",
+      });
+    }
+  };
+
+  const handleDuplicatePreset = (preset: UserPreset) => {
+    setPresetForm({
+      title: `${preset.title} (Copy)`,
+      description: preset.description,
+    });
+    setIsCreateModalOpen(true);
+  };
+
+  const handleUpdateProfile = async () => {
+    try {
+      await updateProfileMutation.mutateAsync({
+        name: profileForm.name,
+        bio: profileForm.bio,
+      });
+
+      addToast({
+        title: "Profile updated successfully!",
+        color: "success",
+      });
+
+      setIsEditingProfile(false);
+    } catch (error) {
+      addToast({
+        title: "Failed to update profile. Please try again.",
+        color: "danger",
+      });
+    }
+  };
+
+  interface FormatDateOptions {
+    month: "short" | "numeric" | "2-digit" | "long" | "narrow";
+    day: "numeric" | "2-digit";
+    year: "numeric" | "2-digit";
+  }
+
+  const formatDate = (date: Date): string | undefined => {
+    const options: FormatDateOptions = {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    };
+    if (!date) return;
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+  };
+
+  const isLoading = userLoading;
+
+  if (isLoading) return <LoaderSection />;
+
+  if (!userProfile) {
+    return (
+      <div className="p-6 text-center">
+        <p className="text-foreground-500">Failed to load user profile. Please try again.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="p-6 mx-auto space-y-8 min-w-7xl">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Presets</h1>
+          <p className="mt-1 text-foreground-500">Manage your AI personalities for customized content generation</p>
+        </div>
+        <Button color="primary" startContent={<Plus size={18} />} onPress={() => setIsCreateModalOpen(true)} className="w-full sm:w-auto">
+          New Preset
+        </Button>
+      </div>
+
+      <Card className="border-none dark:border-primary-800">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-3">
+              <User className="text-primary" size={20} />
+              <h2 className="text-lg font-semibold">Your Profile</h2>
+            </div>
+            <Button
+              isIconOnly
+              variant="light"
+              size="sm"
+              onPress={() => {
+                setProfileForm({ name: userProfile.name, bio: userProfile.bio || "" });
+                setIsEditingProfile(!isEditingProfile);
+              }}
+            >
+              <Edit size={16} />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardBody className="pt-0">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <Avatar src={userProfile.image!} name={userProfile.name} size="lg" className="shrink-0" />
+            <div className="flex-1 space-y-3">
+              {isEditingProfile ? (
+                <div className="space-y-3">
+                  <Input label="Name" value={profileForm.name} onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })} variant="bordered" isDisabled={updateProfileMutation.isPending} />
+                  <Textarea label="Bio" placeholder="Tell us about yourself..." value={profileForm.bio} onChange={(e) => setProfileForm({ ...profileForm, bio: e.target.value })} variant="bordered" rows={3} isDisabled={updateProfileMutation.isPending} />
+                  <div className="flex gap-2">
+                    <Button color="primary" size="sm" onPress={handleUpdateProfile} isLoading={updateProfileMutation.isPending}>
+                      Save Changes
+                    </Button>
+                    <Button variant="light" size="sm" onPress={() => setIsEditingProfile(false)} isDisabled={updateProfileMutation.isPending}>
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground">{userProfile.name}</h3>
+                  <p className="mb-2 text-sm text-foreground-600">{userProfile.email}</p>
+                  <p className="leading-relaxed text-foreground-500">{userProfile.bio || "No bio provided"}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <Input placeholder="Search presets..." startContent={<Search size={18} />} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="flex-1" variant="bordered" />
+      </div>
+
+      {!userProfile.userPreset || userProfile.userPreset.length == 0 ? (
+        <div className="py-16 text-center">
+          <div className="mb-4">
+            <Sparkles size={48} className="mx-auto text-primary-400" />
+          </div>
+          <h3 className="mb-2 text-xl font-semibold text-foreground">No preset yet</h3>
+          <p className="max-w-md mx-auto mb-6 text-foreground-500">Create your first AI preset to personalize your content generation experience!</p>
+          <Button color="primary" startContent={<Plus size={18} />} onPress={() => setIsCreateModalOpen(true)}>
+            Create Your First Preset
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {userProfile.userPreset.map((preset) => (
+            <Card>
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between w-full">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-foreground line-clamp-1">{preset.title}</h3>
+                    <div className="flex items-center gap-2 mt-1">
+                      <Calendar size={14} className="text-foreground-400" />
+                    </div>
+                  </div>
+                  <Dropdown>
+                    <DropdownTrigger>
+                      <Button isIconOnly variant="light" size="sm">
+                        <MoreVertical size={16} />
+                      </Button>
+                    </DropdownTrigger>
+                    <DropdownMenu aria-label="Preset actions">
+                      <DropdownItem key="edit" startContent={<Edit size={16} />} onPress={() => handleEditPreset(preset)}>
+                        Edit
+                      </DropdownItem>
+                      <DropdownItem key="duplicate" startContent={<Copy size={16} />} onPress={() => handleDuplicatePreset(preset)}>
+                        Duplicate
+                      </DropdownItem>
+                      <DropdownItem key="delete" className="text-danger" color="danger" startContent={<Trash2 size={16} />} onPress={() => handleDeletePreset(preset.id)}>
+                        Delete
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
+                </div>
+              </CardHeader>
+              <CardBody className="pt-0">
+                <p className="mb-3 text-sm leading-relaxed text-foreground-600 line-clamp-3">{preset.description}</p>
+              </CardBody>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <Modal
+        isOpen={isCreateModalOpen}
+        onClose={() => {
+          setIsCreateModalOpen(false);
+          setPresetForm({ title: "", description: "" });
+        }}
+        size="2xl"
+      >
+        <ModalContent>
+          <ModalHeader>
+            <div className="flex items-center gap-2">
+              <Plus size={20} />
+              Create New Preset
+            </div>
+          </ModalHeader>
+          <ModalBody>
+            <div className="space-y-4">
+              <Input label="Preset Title" placeholder="e.g., Professional LinkedIn, Casual Twitter..." value={presetForm.title} onChange={(e) => setPresetForm({ ...presetForm, title: e.target.value })} variant="bordered" isRequired isDisabled={createPresetMutation.isPending} />
+              <Textarea label="Description" placeholder="Describe the tone, style, and purpose of this preset..." value={presetForm.description} onChange={(e) => setPresetForm({ ...presetForm, description: e.target.value })} variant="bordered" rows={6} isRequired isDisabled={createPresetMutation.isPending} />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant="light"
+              onPress={() => {
+                setIsCreateModalOpen(false);
+                setPresetForm({ title: "", description: "" });
+              }}
+            >
+              Cancel
+            </Button>
+            <Button color="primary" onPress={handleCreatePreset} isDisabled={!presetForm.title.trim() || !presetForm.description.trim()} isLoading={createPresetMutation.isPending}>
+              Create Preset
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      {/* Edit Preset Modal */}
+      <Modal
+        isOpen={isEditModalOpen}
+        onClose={() => {
+          setIsEditModalOpen(false);
+          setSelectedPreset(null);
+          setPresetForm({ title: "", description: "" });
+        }}
+        size="2xl"
+      >
+        <ModalContent>
+          <ModalHeader>
+            <div className="flex items-center gap-2">
+              <Edit size={20} />
+              Edit Preset
+            </div>
+          </ModalHeader>
+          <ModalBody>
+            <div className="space-y-4">
+              <Input label="Preset Title" value={presetForm.title} onChange={(e) => setPresetForm({ ...presetForm, title: e.target.value })} variant="bordered" isRequired isDisabled={updatePresetMutation.isPending} />
+              <Textarea label="Description" value={presetForm.description} onChange={(e) => setPresetForm({ ...presetForm, description: e.target.value })} variant="bordered" rows={6} isRequired isDisabled={updatePresetMutation.isPending} />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant="light"
+              onPress={() => {
+                setIsEditModalOpen(false);
+                setSelectedPreset(null);
+                setPresetForm({ title: "", description: "" });
+              }}
+            >
+              Cancel
+            </Button>
+            <Button color="primary" onPress={handleUpdatePreset} isDisabled={!presetForm.title.trim() || !presetForm.description.trim()} isLoading={updatePresetMutation.isPending}>
+              Save Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/app/personalize/type.d.ts b/src/app/personalize/type.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/schedules/page.tsx b/src/app/schedules/page.tsx
index 52fcabf..1cd9d9d 100644
--- a/src/app/schedules/page.tsx
+++ b/src/app/schedules/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@heroui/button";
 import { useDisclosure } from "@heroui/modal";
-import { PlusIcon, CalendarIcon, AlertCircle, Clock } from "lucide-react";
+import { PlusIcon, CalendarIcon, AlertCircle, Clock, HelpCircle } from "lucide-react";
 import React, { useState } from "react";
 
 import { ScheduleFormModal } from "@/components/schedules/forms/CreateScheduleForm";
@@ -14,12 +14,13 @@ import { Divider } from "@heroui/divider";
 import { Tabs, Tab } from "@heroui/tabs";
 import { useRouter } from "next/navigation";
 import { getPlatform } from "@/lib/icons";
+import { useTour } from "@reactour/tour";
 
 export default function Schedules() {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const { data: schedules, isLoading, isError } = useSchedules();
   const [selectedTab, setSelectedTab] = useState("all");
-
+  const { setIsOpen: setTourOpen, setCurrentStep } = useTour();
   // Filter schedules based on search query and selected tab
   const filteredSchedules = React.useMemo(() => {
     if (!schedules?.schedules_list) return [];
@@ -28,44 +29,27 @@ export default function Schedules() {
 
     // Filter by tab/status
     if (selectedTab !== "all") {
-      filtered = filtered.filter(
-        (schedule) =>
-          schedule.status.toLowerCase() === selectedTab.toLowerCase()
-      );
+      filtered = filtered.filter((schedule) => schedule.status.toLowerCase() === selectedTab.toLowerCase());
     }
 
     return filtered;
   }, [schedules?.schedules_list, selectedTab]);
 
   return (
-    <div className="p-4 space-y-6 flex flex-col">
+    <div className="flex flex-col p-4 space-y-6">
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
           <h1 className="text-2xl font-bold">Schedules</h1>
-          <p className="text-sm text-default-800">
-            Manage your posting schedules across platforms
-          </p>
+          <p className="text-sm text-default-800">Manage your posting schedules across platforms</p>
         </div>
-        <Button
-          startContent={<PlusIcon size={18} />}
-          color="primary"
-          variant="flat"
-          onPress={onOpen}
-        >
+        <Button className="first-step" startContent={<PlusIcon size={18} />} color="primary" variant="flat" onPress={onOpen}>
           New Schedule
         </Button>
       </div>
 
       <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between flex-wrap gap-4">
-          <Tabs
-            aria-label="Schedule filters"
-            selectedKey={selectedTab}
-            onSelectionChange={(key) => setSelectedTab(key as string)}
-            color="primary"
-            variant="underlined"
-            className="max-w-full"
-          >
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <Tabs aria-label="Schedule filters" selectedKey={selectedTab} onSelectionChange={(key) => setSelectedTab(key as string)} color="primary" variant="underlined" className="max-w-full">
             <Tab key="all" title="All Schedules" />
             <Tab key="active" title="Active" />
             <Tab key="paused" title="Paused" />
@@ -73,27 +57,31 @@ export default function Schedules() {
           </Tabs>
         </div>
 
-        <ScheduleList
-          isError={isError}
-          isLoading={isLoading}
-          schedules={filteredSchedules}
-        />
+        <ScheduleList isError={isError} isLoading={isLoading} schedules={filteredSchedules} />
       </div>
 
       <ScheduleFormModal isOpen={isOpen} onOpenChange={onOpenChange} />
+
+      <Button
+        isIconOnly
+        onPressUp={() => {
+          setCurrentStep(0);
+          setTourOpen(true);
+        }}
+        className="fixed rounded-full bottom-4 right-4 md:bottom-8 md:right-8"
+        color="primary"
+        variant="flat"
+        size="lg"
+        onPress={onOpen}
+        aria-label="Hint"
+      >
+        <HelpCircle size={24} />
+      </Button>
     </div>
   );
 }
 
-function ScheduleList({
-  isError,
-  isLoading,
-  schedules,
-}: {
-  schedules: Schedule[];
-  isLoading: boolean;
-  isError: boolean;
-}) {
+function ScheduleList({ isError, isLoading, schedules }: { schedules: Schedule[]; isLoading: boolean; isError: boolean }) {
   const router = useRouter();
 
   // Function to get status badge color
@@ -130,7 +118,7 @@ function ScheduleList({
   };
 
   return (
-    <div className="flex items-center justify-center flex-col gap-4">
+    <div className="relative flex flex-col items-center justify-center gap-4">
       {isLoading && <LocalSkeletion />}
       {isError && (
         <Card className="w-full border-danger">
@@ -141,28 +129,20 @@ function ScheduleList({
         </Card>
       )}
       {!isLoading && !isError && schedules.length === 0 && (
-        <Card className="w-full text-center py-8 px-4" shadow="sm">
+        <Card className="w-full px-4 py-8 text-center" shadow="sm">
           <CardBody className="flex flex-col items-center gap-4">
             <CalendarIcon size={40} className="text-default-800" />
-            <div className="flex flex-col gap-1 items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-1">
               <h3 className="text-xl font-medium">No schedules found</h3>
-              <p className="text-default-700 mt-1">
-                Create a new schedule to start posting content
-              </p>
+              <p className="mt-1 text-default-700">Create a new schedule to start posting content</p>
             </div>
           </CardBody>
         </Card>
       )}
       {!isLoading && !isError && schedules.length > 0 && (
-        <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {schedules.map((schedule) => (
-            <Card
-              key={schedule.id}
-              className="w-full cursor-pointer"
-              isPressable
-              onPress={() => handleCardClick(schedule.id)}
-              shadow="sm"
-            >
+            <Card key={schedule.id} className="w-full cursor-pointer" isPressable onPress={() => handleCardClick(schedule.id)} shadow="sm">
               <CardHeader className="flex gap-3">
                 <div className="flex flex-col">
                   <div className="flex items-center gap-2">
@@ -174,30 +154,22 @@ function ScheduleList({
               <Divider />
               <CardBody>
                 <div className="flex flex-col gap-2">
-                  <div className="font-medium text-sm">
-                    <Chip color={getStatusColor(schedule.status)}>
-                      {schedule.status}
-                    </Chip>
+                  <div className="text-sm font-medium">
+                    <Chip color={getStatusColor(schedule.status)}>{schedule.status}</Chip>
                   </div>
                   <div className="flex items-center gap-2">
                     <CalendarIcon size={16} className="text-default-400" />
-                    <p className="text-sm text-default-800">
-                      {formatDateRange(schedule.startDate, schedule.endDate)}
-                    </p>
+                    <p className="text-sm text-default-800">{formatDateRange(schedule.startDate, schedule.endDate)}</p>
                   </div>
                   <div className="flex items-center gap-2">
                     <Clock size={16} className="text-default-400" />
-                    <p className="text-sm text-default-800">
-                      {schedule.timesPerDay} posts per day
-                    </p>
+                    <p className="text-sm text-default-800">{schedule.timesPerDay} posts per day</p>
                   </div>
                 </div>
               </CardBody>
-              <CardFooter className="flex justify-between items-center">
-                <p className="text-xs text-default-700">
-                  Created {new Date(schedule.createdAt).toLocaleDateString()}
-                </p>
-                <p className="text-sm text-primary font-medium">View Details</p>
+              <CardFooter className="flex items-center justify-between">
+                <p className="text-xs text-default-700">Created {new Date(schedule.createdAt).toLocaleDateString()}</p>
+                <p className="text-sm font-medium text-primary">View Details</p>
               </CardFooter>
             </Card>
           ))}
@@ -209,16 +181,16 @@ function ScheduleList({
 
 function LocalSkeletion() {
   return (
-    <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       {[1, 2, 3].map((item) => (
         <Card key={item} className="w-full" shadow="sm">
           <CardHeader className="flex gap-3">
-            <Skeleton className="h-10 w-10 rounded-md" />
+            <Skeleton className="w-10 h-10 rounded-md" />
             <div className="flex flex-col gap-1">
-              <Skeleton className="h-5 w-32 rounded" />
+              <Skeleton className="w-32 h-5 rounded" />
               <div className="flex gap-2">
-                <Skeleton className="h-4 w-20 rounded-full" />
-                <Skeleton className="h-4 w-16 rounded-full" />
+                <Skeleton className="w-20 h-4 rounded-full" />
+                <Skeleton className="w-16 h-4 rounded-full" />
               </div>
             </div>
           </CardHeader>
@@ -226,18 +198,18 @@ function LocalSkeletion() {
           <CardBody>
             <div className="flex flex-col gap-3">
               <div className="flex gap-2">
-                <Skeleton className="h-4 w-4 rounded" />
-                <Skeleton className="h-4 w-48 rounded" />
+                <Skeleton className="w-4 h-4 rounded" />
+                <Skeleton className="w-48 h-4 rounded" />
               </div>
               <div className="flex gap-2">
-                <Skeleton className="h-4 w-4 rounded" />
-                <Skeleton className="h-4 w-32 rounded" />
+                <Skeleton className="w-4 h-4 rounded" />
+                <Skeleton className="w-32 h-4 rounded" />
               </div>
             </div>
           </CardBody>
           <CardFooter className="flex justify-between">
-            <Skeleton className="h-3 w-24 rounded" />
-            <Skeleton className="h-8 w-24 rounded" />
+            <Skeleton className="w-24 h-3 rounded" />
+            <Skeleton className="w-24 h-8 rounded" />
           </CardFooter>
         </Card>
       ))}
diff --git a/src/components/schedules/forms/CreateScheduleForm.tsx b/src/components/schedules/forms/CreateScheduleForm.tsx
index c81c5ed..6cfca18 100644
--- a/src/components/schedules/forms/CreateScheduleForm.tsx
+++ b/src/components/schedules/forms/CreateScheduleForm.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from "@heroui/modal";
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
 
 import { Select, SelectItem } from "@heroui/select";
 import { Input } from "@heroui/input";
@@ -44,9 +38,7 @@ const scheduleSchema = z
     timezone: z.string(),
     startDate: z.date(),
     endDate: z.date(),
-    postTimes: z
-      .array(z.instanceof(Time))
-      .nonempty("At least one time is required"),
+    postTimes: z.array(z.instanceof(Time)).nonempty("At least one time is required"),
     assetSource: z.nativeEnum(AssetSource),
   })
   .refine((data) => data.endDate >= data.startDate, {
@@ -56,20 +48,13 @@ const scheduleSchema = z
 
 type ScheduleFormValues = z.infer<typeof scheduleSchema>;
 
-export function ScheduleFormModal({
-  isOpen,
-  onOpenChange,
-}: ScheduleFormModalProps) {
+export function ScheduleFormModal({ isOpen, onOpenChange }: ScheduleFormModalProps) {
   const { data: providersData } = useProviders();
   const { data: user } = authClient.useSession();
 
   const [isLoading, setIsLoading] = React.useState(false);
   const router = useRouter();
-  const connectedProviders = Object.entries(
-    REQUIRED_PROVIDER_CONNECTION
-  ).filter(([key]) =>
-    providersData?.some((p) => p.provider.toLowerCase() === key)
-  );
+  const connectedProviders = Object.entries(REQUIRED_PROVIDER_CONNECTION).filter(([key]) => providersData?.some((p) => p.provider.toLowerCase() === key));
 
   const availablePlatforms = connectedProviders.map(([key, provider]) => ({
     value: key.toUpperCase(),
@@ -126,12 +111,7 @@ export function ScheduleFormModal({
   };
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-      isDismissable={false}
-      scrollBehavior="inside"
-    >
+    <Modal className="second-step" isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={false} scrollBehavior="inside">
       <Form className="w-full min-w-full" onSubmit={handleSubmit(onSubmit)}>
         <ModalContent>
           {(onClose) => (
@@ -142,22 +122,7 @@ export function ScheduleFormModal({
               <ModalBody>
                 <div className="grid grid-cols-1 gap-6">
                   <div>
-                    <Controller
-                      name="title"
-                      control={control}
-                      render={({ field }) => (
-                        <Input
-                          isDisabled={isLoading}
-                          {...field}
-                          label="Schedule Name"
-                          placeholder="Enter schedule name"
-                          isInvalid={!!errors.title}
-                          errorMessage={errors.title?.message}
-                          isRequired
-                          variant="bordered"
-                        />
-                      )}
-                    />
+                    <Controller name="title" control={control} render={({ field }) => <Input isDisabled={isLoading} {...field} label="Schedule Name" placeholder="Enter schedule name" isInvalid={!!errors.title} errorMessage={errors.title?.message} isRequired variant="bordered" />} />
                   </div>
 
                   <div>
@@ -181,10 +146,7 @@ export function ScheduleFormModal({
                           variant="bordered"
                         >
                           {availablePlatforms.map((platform) => (
-                            <SelectItem
-                              key={platform.value}
-                              startContent={<platform.icon />}
-                            >
+                            <SelectItem key={platform.value} startContent={<platform.icon />}>
                               {platform.label}
                             </SelectItem>
                           ))}
@@ -208,34 +170,18 @@ export function ScheduleFormModal({
                                 label="Duration"
                                 variant="faded"
                                 value={{
-                                  start: parseDate(
-                                    field.value.toISOString().split("T")[0]
-                                  ),
-                                  end: parseDate(
-                                    endField.value.toISOString().split("T")[0]
-                                  ),
+                                  start: parseDate(field.value.toISOString().split("T")[0]),
+                                  end: parseDate(endField.value.toISOString().split("T")[0]),
                                 }}
                                 onChange={(range) => {
                                   if (range?.start && range?.end) {
-                                    field.onChange(
-                                      range.start.toDate(
-                                        form.getValues("timezone")
-                                      )
-                                    );
-                                    endField.onChange(
-                                      range.end.toDate(
-                                        form.getValues("timezone")
-                                      )
-                                    );
+                                    field.onChange(range.start.toDate(form.getValues("timezone")));
+                                    endField.onChange(range.end.toDate(form.getValues("timezone")));
                                   }
                                 }}
                                 className="w-full"
                               />
-                              {errors.endDate && (
-                                <p className="text-red-500 text-sm mt-1">
-                                  {errors.endDate.message}
-                                </p>
-                              )}
+                              {errors.endDate && <p className="mt-1 text-sm text-red-500">{errors.endDate.message}</p>}
                             </div>
                           )}
                         />
@@ -264,21 +210,15 @@ export function ScheduleFormModal({
                           isRequired
                           variant="bordered"
                         >
-                          <SelectItem key={AssetSource.GALLERY}>
-                            Gallery Assets
-                          </SelectItem>
-                          <SelectItem key={AssetSource.UNSPLASH}>
-                            Unsplash
-                          </SelectItem>
-                          <SelectItem key={AssetSource.NONE}>
-                            No image
-                          </SelectItem>
+                          <SelectItem key={AssetSource.GALLERY}>Gallery Assets</SelectItem>
+                          <SelectItem key={AssetSource.UNSPLASH}>Unsplash</SelectItem>
+                          <SelectItem key={AssetSource.NONE}>No image</SelectItem>
                         </Select>
                       )}
                     />
                   </div>
 
-                  <div>
+                  <div className="third-step">
                     <Controller
                       name="timezone"
                       control={control}
@@ -308,21 +248,11 @@ export function ScheduleFormModal({
                   </div>
 
                   <div>
-                    <Controller
-                      name="postTimes"
-                      control={control}
-                      render={({ field }) => (
-                        <TimeSlotInput
-                          isLoading={isLoading}
-                          onChange={field.onChange}
-                          timeSlots={form.watch("postTimes")}
-                        />
-                      )}
-                    />
+                    <Controller name="postTimes" control={control} render={({ field }) => <TimeSlotInput isLoading={isLoading} onChange={field.onChange} timeSlots={form.watch("postTimes")} />} />
                   </div>
                 </div>
               </ModalBody>
-              <ModalFooter>
+              <ModalFooter className="fourth-step">
                 <Button
                   isDisabled={isLoading}
                   color="danger"
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 4370c91..92ce11d 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,19 +1,8 @@
 import React from "react";
 import { usePathname } from "next/navigation";
 import { useSidebar } from "./sidebar-provider";
-import {
-  ChevronLeft,
-  ChevronRight,
-  GalleryVerticalEndIcon,
-  Home,
-  Inbox,
-  HelpCircle,
-  Settings,
-  TimerIcon,
-  SidebarOpenIcon,
-  SidebarCloseIcon,
-  BellDotIcon,
-} from "lucide-react";
+import { ChevronLeft, ChevronRight, GalleryVerticalEndIcon, Home, Inbox, HelpCircle, Settings, TimerIcon, SidebarOpenIcon, SidebarCloseIcon, MagnetIcon, BrainCircuit } from "lucide-react";
+
 import { Drawer, DrawerContent } from "@heroui/drawer";
 import { Button } from "@heroui/button";
 import Link from "next/link";
@@ -65,6 +54,11 @@ const navigationData: NavSection[] = [
         label: "Connections",
         href: "/connections",
       },
+      {
+        icon: BrainCircuit,
+        label: "Personalize AI",
+        href: "/personalize",
+      },
       { icon: Settings, label: "Settings", href: "/settings" },
     ],
   },
@@ -75,37 +69,25 @@ const SidebarHeader: React.FC<{
   onToggle: () => void;
 }> = ({ collapsed, onToggle }) => {
   return (
-    <div className="flex items-center p-4 border-b border-default-200 mb-2">
+    <div className="flex items-center p-4 mb-2 border-b border-default-200">
       {!collapsed && (
         <>
           <div className="flex items-center gap-2 mr-auto">
-            <div className="flex gap-8 items-center px-2">
+            <div className="flex items-center gap-8 px-2">
               <Brand className="w-8 h-8" text />
             </div>
           </div>
-          <Button
-            isIconOnly
-            variant="light"
-            onPress={onToggle}
-            aria-label="Collapse sidebar"
-            className="ml-2"
-          >
+          <Button isIconOnly variant="light" onPress={onToggle} aria-label="Collapse sidebar" className="ml-2">
             <SidebarCloseIcon className="w-4 h-4" />
           </Button>
         </>
       )}
       {collapsed && (
         <div className="flex flex-col items-center w-full">
-          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary-100 mb-2">
+          <div className="flex items-center justify-center w-8 h-8 mb-2 rounded-full bg-primary-100">
             <Brand />
           </div>
-          <Button
-            isIconOnly
-            variant="light"
-            onPress={onToggle}
-            aria-label="Expand sidebar"
-            size="sm"
-          >
+          <Button isIconOnly variant="light" onPress={onToggle} aria-label="Expand sidebar" size="sm">
             <SidebarOpenIcon className="w-4 h-4" />
           </Button>
         </div>
@@ -123,17 +105,7 @@ const NavItem: React.FC<{
   collapsed: boolean;
 }> = ({ icon: IconComponent, label, href, active, badge, collapsed }) => {
   const buttonContent = (
-    <Button
-      as={Link}
-      href={href}
-      className={cn(
-        `justify-start w-full mb-1 ${active ? "bg-primary-50" : ""}`,
-        collapsed ? "px-0" : "px-2"
-      )}
-      variant={"light"}
-      isIconOnly={collapsed}
-      color={active ? "primary" : "default"}
-    >
+    <Button as={Link} href={href} className={cn(`justify-start w-full mb-1 ${active ? "bg-primary-50" : ""}`, collapsed ? "px-0" : "px-2")} variant={"light"} isIconOnly={collapsed} color={active ? "primary" : "default"}>
       <IconComponent className={cn("w-5 h-5", collapsed ? "ml-2" : "mr-2")} />
       {!collapsed && label}
     </Button>
@@ -160,21 +132,9 @@ const SidebarSection: React.FC<{
 
   return (
     <div className="px-3 mb-4">
-      {!collapsed && title && (
-        <p className="px-3 my-2 text-xs font-medium text-default-700 uppercase">
-          {title}
-        </p>
-      )}
+      {!collapsed && title && <p className="px-3 my-2 text-xs font-medium uppercase text-default-700">{title}</p>}
       {items.map((item, index) => (
-        <NavItem
-          key={index}
-          icon={item.icon}
-          label={item.label}
-          href={item.href}
-          active={isActiveRoute(item.href)}
-          badge={item.badge}
-          collapsed={collapsed}
-        />
+        <NavItem key={index} icon={item.icon} label={item.label} href={item.href} active={isActiveRoute(item.href)} badge={item.badge} collapsed={collapsed} />
       ))}
     </div>
   );
@@ -191,12 +151,7 @@ const SidebarContent: React.FC<{
 
       <div className="flex-1 overflow-y-auto scrollbar-hidden">
         {navigationData.map((section, index) => (
-          <SidebarSection
-            key={index}
-            title={section.title}
-            items={section.items}
-            collapsed={collapsed}
-          />
+          <SidebarSection key={index} title={section.title} items={section.items} collapsed={collapsed} />
         ))}
       </div>
 
@@ -208,14 +163,14 @@ const SidebarContent: React.FC<{
 const SidebarFooter: React.FC<{ collapsed: boolean }> = ({ collapsed }) => {
   if (collapsed) {
     return (
-      <div className="mt-auto mb-4 flex justify-center">
+      <div className="flex justify-center mt-auto mb-4">
         <ThemeSwitch />
       </div>
     );
   }
 
   return (
-    <div className="mt-auto p-4 border-t border-default-200 flex items-center justify-between">
+    <div className="flex items-center justify-between p-4 mt-auto border-t border-default-200">
       <ProfileCard />
       <ThemeSwitch />
     </div>
@@ -259,27 +214,17 @@ export const DashboardSidebar = () => {
           <DrawerContent>
             <div className="flex flex-col h-full bg-background">
               <div className="flex items-center justify-between p-4 border-b border-default-200">
-                <div className="flex gap-4 items-center px-2">
+                <div className="flex items-center gap-4 px-2">
                   <Brand className="w-8 h-8" text />
                 </div>
               </div>
-              <SidebarContent
-                collapsed={false}
-                onToggle={onToggle}
-                isMobile={true}
-              />
+              <SidebarContent collapsed={false} onToggle={onToggle} isMobile={true} />
             </div>
           </DrawerContent>
         </Drawer>
 
-        <div className="fixed -top-1 -left-1 z-50 md:hidden">
-          <Button
-            isIconOnly
-            variant="light"
-            onPress={onOpen}
-            aria-label="Open sidebar"
-            size="sm"
-          >
+        <div className="fixed z-50 -top-1 -left-1 md:hidden">
+          <Button isIconOnly variant="light" onPress={onOpen} aria-label="Open sidebar" size="sm">
             <SidebarOpenIcon className="w-4 h-4" />
           </Button>
         </div>
@@ -288,16 +233,8 @@ export const DashboardSidebar = () => {
   }
 
   return (
-    <aside
-      className={`hidden md:flex flex-col h-full bg-background border-r border-default-200 transition-all duration-300 ease-in-out ${
-        collapsed ? "w-16" : "w-64"
-      }`}
-    >
-      <SidebarContent
-        collapsed={collapsed}
-        onToggle={onToggle}
-        isMobile={false}
-      />
+    <aside className={`hidden md:flex flex-col h-full bg-background border-r border-default-200 transition-all duration-300 ease-in-out ${collapsed ? "w-16" : "w-64"}`}>
+      <SidebarContent collapsed={collapsed} onToggle={onToggle} isMobile={false} />
     </aside>
   );
 };
diff --git a/src/hooks/data/payload.d.ts b/src/hooks/data/payload.d.ts
index 8aa0e80..79392ba 100644
--- a/src/hooks/data/payload.d.ts
+++ b/src/hooks/data/payload.d.ts
@@ -8,3 +8,19 @@ export interface UpdateSettingsDto {
   autoDeleteUsedAssets?: boolean;
   timezone?: string;
 }
+
+export interface CreatePresetDto {
+  title: string;
+  description: string;
+}
+
+export interface UpdatePresetDto {
+  title?: string;
+  description?: string;
+  id?: string;
+}
+
+export interface UpdateUserProfileDto {
+  name?: string;
+  bio?: string;
+}
diff --git a/src/hooks/data/response.d.ts b/src/hooks/data/response.d.ts
index 5fcc0a1..643128c 100644
--- a/src/hooks/data/response.d.ts
+++ b/src/hooks/data/response.d.ts
@@ -71,3 +71,39 @@ interface Inbox {
   scheduleId?: string;
   service?: string;
 }
+
+interface UserProfileWithPresets {
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+  email: string;
+  emailVerified: boolean | null;
+  name: string;
+  image: string | null;
+  bio: string | null;
+  userPreset: UserPreset[];
+}
+
+interface UserPreset {
+  id: string;
+  title: string;
+  description: string;
+  userId: string;
+  timestamp: Date;
+}
+
+interface PresetResponse {
+  id: string;
+  title: string;
+  description: string;
+  userId: string;
+  timestamp: Date;
+}
+
+interface UserProfile {
+  id: string;
+  name: string;
+  email: string;
+  bio: string | null;
+  image: string | null;
+}
diff --git a/src/hooks/data/use-presets.ts b/src/hooks/data/use-presets.ts
new file mode 100644
index 0000000..7eae989
--- /dev/null
+++ b/src/hooks/data/use-presets.ts
@@ -0,0 +1,61 @@
+import fetcher from "@/lib/fetcher";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CreatePresetDto, UpdatePresetDto, UpdateUserProfileDto } from "./payload";
+
+export function useGetPresets() {
+  return useQuery<PresetResponse[]>({
+    queryKey: ["presets"],
+    queryFn: async () => fetcher<PresetResponse[]>("GET", "/users/presets"),
+  });
+}
+
+export function useCreatePreset() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["createPreset"],
+    mutationFn: async (payload: CreatePresetDto) => fetcher<ApiResponse>("POST", "/users/presets", { body: payload }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["presets"] });
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+}
+
+export function useUpdatePreset() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["updatePreset"],
+    mutationFn: async (payload: UpdatePresetDto) => fetcher<ApiResponse>("PUT", `/users/presets/${payload.id}`, { body: payload }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["presets"] });
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+}
+
+export function useDeletePreset() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["deletePreset"],
+    mutationFn: async (id: string) => fetcher<ApiResponse>("DELETE", `/users/presets/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["presets"] });
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+}
+
+export function useUpdateUserProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["updateUserProfile"],
+    mutationFn: async (payload: UpdateUserProfileDto) => fetcher<ApiResponse>("PUT", "/users/profile", { body: payload }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+}
diff --git a/src/hooks/data/use-user.ts b/src/hooks/data/use-user.ts
new file mode 100644
index 0000000..59b6f9c
--- /dev/null
+++ b/src/hooks/data/use-user.ts
@@ -0,0 +1,9 @@
+import fetcher from "@/lib/fetcher";
+import { useQuery } from "@tanstack/react-query";
+
+export function useUser() {
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => fetcher<UserProfileWithPresets>("GET", "/users/profile/presets"),
+  });
+}
diff --git a/src/lib/fetcher.ts b/src/lib/fetcher.ts
index c1debe2..aec6540 100644
--- a/src/lib/fetcher.ts
+++ b/src/lib/fetcher.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 import { APP_CONFIG } from "./site-config";
 
 export default async function fetcher<T>(
-  method: "GET" | "POST" | "PATCH" | "DELETE",
+  method: "GET" | "POST" | "PATCH" | "DELETE" | "PUT",
   endpoint: string,
   others?: {
     searchParams?: Record<string, any>;
@@ -84,11 +84,7 @@ export default async function fetcher<T>(
     return response.data.data as T;
   } catch (error: any) {
     if (error.response) {
-      throw new Error(
-        `Error: ${error.response.status} - ${
-          error.response.data.message || error.response.statusText
-        }`
-      );
+      throw new Error(`Error: ${error.response.status} - ${error.response.data.message || error.response.statusText}`);
     } else if (error.request) {
       throw new Error("No response received from server.");
     } else {
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index 5d9d9f1..95282f2 100644
--- a/src/providers/index.tsx
+++ b/src/providers/index.tsx
@@ -6,10 +6,11 @@ import * as React from "react";
 import { HeroUIProvider } from "@heroui/system";
 import { ToastProvider } from "@heroui/toast";
 import { useRouter } from "next/navigation";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { getQueryClient } from "@/lib/get-query-client";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { TourProvider } from "@reactour/tour";
 
 export interface ProvidersProps {
   children: React.ReactNode;
@@ -25,15 +26,66 @@ declare module "@react-types/shared" {
 export function Providers({ children, themeProps }: ProvidersProps) {
   const router = useRouter();
   const queryClient = getQueryClient();
+  const { theme } = useTheme();
+  interface StyleBase {
+    [key: string]: unknown;
+  }
+
+  interface PopoverStyle extends StyleBase {
+    background: string;
+    color: string;
+  }
+
+  interface ArrowStyle extends StyleBase {
+    color: string;
+  }
+
+  interface TourStyles {
+    popover: (base: StyleBase) => PopoverStyle;
+    arrow: (base: StyleBase) => ArrowStyle;
+  }
+
+  const styles: TourStyles = {
+    popover: (base) => ({
+      ...base,
+      background: theme === "dark" ? "#1f2937" : "#ffffff", // gray-800 vs white
+      color: theme === "dark" ? "#f9fafb" : "#111827", // white vs gray-900
+    }),
+    arrow: (base) => ({
+      ...base,
+      color: theme === "dark" ? "#ffffff" : "#1f2937", // match background
+    }),
+  };
   return (
     <HeroUIProvider navigate={router.push}>
       <NextThemesProvider attribute="class" defaultTheme="light" disableTransitionOnChange {...themeProps}>
         <QueryClientProvider client={queryClient}>
           <ToastProvider placement="top-right" />
-          {children}
-          <ReactQueryDevtools initialIsOpen={false} />
+          <TourProvider styles={styles} badgeContent={({ totalSteps, currentStep }) => currentStep + 1 + "/" + totalSteps} steps={steps}>
+            {children}
+          </TourProvider>
+          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
         </QueryClientProvider>
       </NextThemesProvider>
     </HeroUIProvider>
   );
 }
+
+const steps = [
+  {
+    selector: ".first-step",
+    content: "Start by creating your first schedule.",
+  },
+  {
+    selector: ".second-step",
+    content: "Fill in the required schedule details.",
+  },
+  {
+    selector: ".third-step",
+    content: "Ensure the correct time zone is selected.",
+  },
+  {
+    selector: ".fourth-step",
+    content: "Click 'Create Schedule' to finalize.",
+  },
+];