diff --git a/.env b/.env
new file mode 100644
index 0000000..4eddc0e
--- /dev/null
+++ b/.env
@@ -0,0 +1,26 @@
+NEXT_PUBLIC_SANITY_DATASET=production
+NEXT_PUBLIC_SANITY_PROJECT_ID=mlxdtup8
+NEXT_PUBLIC_BASE_URL=http://localhost:3000/
+SANITY_API_TOKEN=skT2G7wl4BFGvOLkELSIrcnFEBG3MyrXC71IJgv5iBOj5yxJx75MjgBzbbTvIwUtckXFIluhN2iEHiV37jNA0EcJmbTkMT1LJKwCNWH3ddJnof3mPQWDoVNggRM4ZCNgTDpbGqvjf4FE7xb5TkkTVUX5Rf1Fp4Z3IWZmlmwkSR2Fa8UdcikH
+NEXTAUTH_SECRET=k3yf4g3h2u1t4sr5eh6s7i
+NEXTAUTH_URL=http://localhost:3000/
+GOOGLE_CLIENT_ID=618426972732-a7fqd0fdg2aoa8iagu0vb7f6m0sl2hhs.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+TRACING_ENABLED=false
+NEXT_PUBLIC_SOCKET_URL="http://localhost:4000/"
+NEXT_PUBLIC_SOCKETIO_URL_2=http://localhost:5000/
+NEXT_PUBLIC_SHAZAM_CORE_RAPID_API_KEY='2d7b7a8dfcmsh5d7d9d777fe58aap127c50jsn3b17984aa2a3'
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2FjcmVkLWdhcmZpc2gtNy5jbGVyay5hY2NvdW50cy5kZXYk
+CLERK_SECRET_KEY=sk_test_LPEsuGh4YWMmMpL3t18rOw08KDjht3lBIsCgRq0Hl6
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
+NEXT_PUBLIC_RAPID_API_KEY=0e8903e27emsh2333e866a960be6p1d76cbjsn8250ba0b208d
+NEXT_PUBLIC_TINY=limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m
+NEXT_PUBLIC_CLIENT_SECRET=505a9fece5074f17b4b9a5edee644089
+NEXT_PUBLIC_CLIENT_ID=db6947afde104dbc94f707562b9c20fc
+JWT_SECRET=BQBjHQZbyyIZW-WjQ0TxejxcA9dO4v-CRE3zsHabyeowEWKGhepBwAbAPX1B1cnzZkV15J7KEZXA2pUfAmtc8Hms9TTXuAyQxsCB__qKtHDUteEoTsoipMzsiDXTi2kx9Vz0S1cInDyNsevceq29ivhfV-U3oFCWFtRyknTaEQsH1mCigpn-uXZ5AVD5gSqqPt3mK0Z2e5G40r0HpCJtCLgi1Ld2OufzmzagXiKcv9MY7unDjo5hjthV2UF9rmlAy0E6bUH3FcdtCoSsA7JFqAGZyg
+NEXT_PUBLIC_CATTO_KEY=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
+NEXT_PUBLIC_CHAT_KEY=8ef40a21-bcb4-47f3-928e-2b83389392b1
+NEXT_PUBLIC_CHAT_KEY=pk-ihWDwESgKjNoJBbORkgfGDrBGEqnBSCIVwftLcSjoEgIYuFK
\ No newline at end of file
diff --git a/components/Notes/LofiNotes.tsx b/components/Notes/LofiNotes.tsx
index e681177..3603765 100644
--- a/components/Notes/LofiNotes.tsx
+++ b/components/Notes/LofiNotes.tsx
@@ -155,9 +155,9 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
     <div className="flex flex-col justify-center   items-center gap-4">
       <div className="flex justify-center    gap-1 relative items-center">
         <div className="flex items-center gap-2  col-span-2 justify-end">
-          <Draggable>
-            <div className="flex items-center justify-between gap-2 select-none">
-              <MenuIcon className="text-neutral-200/50 cursor-pointer" />
+          <Draggable cancel=".btn">
+            <div className="flex items-center justify-between gap-2 select-none btn">
+              <MenuIcon className="text-neutral-200/50 cursor-pointer btn" />
               <CategoryDropdown
                 categories={categories}
                 handleCategoryChange={handleCategoryChange}
@@ -185,8 +185,8 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
         {filteredNotes.map((note: any) => (
           <>
             <Dialog isOpen={showModal} onClose={setShowModal}>
-              <Draggable>
-                <div className="rounded-md scale-150 md:scale-100  bg-white bg-opacity-30  border border-white border-opacity-50 backdrop-blur-xl p-2 w-full h-full  md:p-8">
+              <Draggable cancel=".btn">
+                <div className="btn rounded-md scale-150 md:scale-100  bg-white bg-opacity-30  border border-white border-opacity-50 backdrop-blur-xl p-2 w-full h-full  md:p-8">
                   <XIcon
                     onClick={() => setShowModal(false)}
                     className="flex justify-end right-2 text-white/30 text-sm font-light cursor-pointer absolute top-2"
@@ -227,14 +227,14 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
               </Draggable>
             </Dialog>
             {notesshow && (
-              <Draggable>
+              <Draggable cancel=".btn">
                 <div
                   onClick={() => {
                     setShowModal(true);
                     setSelectedNote(note.topic);
                     setSelectedNoteData(note.note);
                   }}
-                  className=" bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5  text-neutral-200"
+                  className="btn bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5  text-neutral-200"
                 >
                   <div>
                     <h1 className="border-b w-fit">{note.topic}</h1>
@@ -252,8 +252,8 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
       {showTaskInput && (
         <div>
           {" "}
-          <Draggable>
-            <div className=" bg-white bg-opacity-30   z-50  border border-white border-opacity-50 backdrop-blur-xl space-y-5 overflow-y-scroll h-fit   w-full px-2 rounded-xl py-2">
+          <Draggable cancel=".btn">
+            <div className="btn bg-white bg-opacity-30   z-50  border border-white border-opacity-50 backdrop-blur-xl space-y-5 overflow-y-scroll h-fit   w-full px-2 rounded-xl py-2">
               <div className="flex justify-center items-center">
                 <div className="flex flex-col gap-5">
                   <input
diff --git a/components/lofi/MusicPlayer/Controls.tsx b/components/lofi/MusicPlayer/Controls.tsx
index e0becfa..4dafa91 100644
--- a/components/lofi/MusicPlayer/Controls.tsx
+++ b/components/lofi/MusicPlayer/Controls.tsx
@@ -7,6 +7,8 @@ import {
   BsShuffle,
 } from "react-icons/bs";
 
+import "../../Clock/clock.css";
+
 const Controls = ({
   isPlaying,
   repeat,
@@ -18,50 +20,64 @@ const Controls = ({
   handlePrevSong,
   handleNextSong,
 }: any) => (
-  <div className="flex items-center justify-around md:w-36 lg:w-52 2xl:w-80">
-    <BsArrowRepeat
-      size={20}
-      color={repeat ? "red" : "white"}
-      onClick={() => setRepeat((prev: any) => !prev)}
-      className="hidden sm:block cursor-pointer"
-    />
-    {currentSongs?.length && (
-      <MdSkipPrevious
-        size={30}
-        color="#FFF"
-        className="cursor-pointer"
-        onClick={handlePrevSong}
+
+  
+  <div className="flex items-center justify-around md:w-36 lg:w-96 2xl:w-80 md:gap-4">
+    <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+      <BsArrowRepeat
+        size={20}
+        color={repeat ? "red" : "white"}
+        onClick={() => setRepeat((prev: any) => !prev)}
+        className="hidden sm:block cursor-pointer"
       />
+    </div>
+    {currentSongs?.length && (
+      <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+        <MdSkipPrevious
+          size={30}
+          color="#FFF"
+          className="cursor-pointer"
+          onClick={handlePrevSong}
+        />
+      </div>
     )}
     {isPlaying ? (
-      <BsFillPauseFill
-        size={45}
-        color="#FFF"
-        onClick={handlePlayPause}
-        className="cursor-pointer"
-      />
+      <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+        <BsFillPauseFill
+          size={45}
+          color="#FFF"
+          onClick={handlePlayPause}
+          className="cursor-pointer"
+        />
+      </div>
     ) : (
-      <BsFillPlayFill
-        size={45}
-        color="#FFF"
-        onClick={handlePlayPause}
-        className="cursor-pointer"
-      />
+      <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+        <BsFillPlayFill
+          size={45}
+          color="#FFF"
+          onClick={handlePlayPause}
+          className="cursor-pointer"
+        />
+      </div>
     )}
     {currentSongs?.length && (
-      <MdSkipNext
-        size={30}
-        color="#FFF"
-        className="cursor-pointer"
-        onClick={handleNextSong}
-      />
+      <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+        <MdSkipNext
+          size={30}
+          color="#FFF"
+          className="cursor-pointer"
+          onClick={handleNextSong}
+        />
+      </div>
     )}
-    <BsShuffle
-      size={20}
-      color={shuffle ? "red" : "white"}
-      onClick={() => setShuffle((prev: any) => !prev)}
-      className="hidden sm:block cursor-pointer"
-    />
+    <div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
+      <BsShuffle
+        size={20}
+        color={shuffle ? "red" : "white"}
+        onClick={() => setShuffle((prev: any) => !prev)}
+        className="hidden sm:block cursor-pointer"
+      />
+    </div>
   </div>
 );
 
diff --git a/components/lofi/MusicPlayer/index.tsx b/components/lofi/MusicPlayer/index.tsx
index 2e839ec..3c0f55b 100644
--- a/components/lofi/MusicPlayer/index.tsx
+++ b/components/lofi/MusicPlayer/index.tsx
@@ -12,7 +12,17 @@ import Seekbar from "./Seekbar";
 import Track from "./Track";
 import VolumeBar from "./VolumeBar";
 
-const MusicPlayer = () => {
+import {
+  BsArrowRepeat,
+  BsFillPauseFill,
+  BsFillPlayFill,
+  BsShuffle,
+} from "react-icons/bs";
+
+import "../../Clock/clock.css";
+
+//@ts-ignore
+const MusicPlayer = ({ sessionStarted }) => {
   const { activeSong, currentSongs, currentIndex, isActive, isPlaying } =
     useSelector((state: any) => state.player);
   const [duration, setDuration] = useState(0);
@@ -58,52 +68,86 @@ const MusicPlayer = () => {
   };
 
   return (
-    <div className="relative z-50 sm:px-12 px-8 w-full flex items-center justify-between">
-      <Track
+    // flex-col items-center justify-center w-3/5 h-full ml-[4vw] md:justify-center md:space-y-32
+    <div className="absolute flex flex-col items-center w-3/5 h-full ml-[4vw] md:justify-center md:space-y-32">
+      {sessionStarted ? (
+        <div className="relative flex items-center justify-center -top-80 -z-40">
+          {isPlaying ? (
+            <div className="absolute z-10">
+              <BsFillPauseFill
+                size={65}
+                color="#FFF"
+                onClick={handlePlayPause}
+                className="cursor-pointer"
+              />
+            </div>
+          ) : (
+            <div className="absolute z-10">
+              <BsFillPlayFill
+                size={65}
+                color="#FFF"
+                onClick={handlePlayPause}
+                className="cursor-pointer"
+              />
+            </div>
+          )}
+
+          <div
+            className={`w-[212px] h-[212px] absolute bg-white bg-opacity-30 backdrop-blur-3xl border-opacity-50 border-white border text-white rounded-full flex items-center justify-center`}
+          >
+            <div className="spinner"></div>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="absolute z-50 w-full sm:px-12 px-8 w-full flex flex-col items-center justify-between mr-0">
+        {/* <Track
         isPlaying={isPlaying}
         isActive={isActive}
         activeSong={activeSong}
-      />
-      <div className="flex-1 flex flex-col items-center justify-center">
-        <Controls
-          isPlaying={isPlaying}
-          isActive={isActive}
-          repeat={repeat}
-          setRepeat={setRepeat}
-          shuffle={shuffle}
-          setShuffle={setShuffle}
-          currentSongs={currentSongs}
-          handlePlayPause={handlePlayPause}
-          handlePrevSong={handlePrevSong}
-          handleNextSong={handleNextSong}
-        />
-        <Seekbar
+      /> */}
+
+        <div className="flex-1 flex flex-col items-center justify-center">
+          <Controls
+            isPlaying={isPlaying}
+            isActive={isActive}
+            repeat={repeat}
+            setRepeat={setRepeat}
+            shuffle={shuffle}
+            setShuffle={setShuffle}
+            currentSongs={currentSongs}
+            handlePlayPause={handlePlayPause}
+            handlePrevSong={handlePrevSong}
+            handleNextSong={handleNextSong}
+          />
+          {/* <Seekbar
           value={appTime}
           min="0"
           max={duration}
           onInput={(event: any) => setSeekTime(event.target.value)}
           setSeekTime={setSeekTime}
           appTime={appTime}
-        />
-        <Player
-          activeSong={activeSong}
-          volume={volume}
-          isPlaying={isPlaying}
-          seekTime={seekTime}
-          repeat={repeat}
-          currentIndex={currentIndex}
-          onEnded={handleNextSong}
-          onTimeUpdate={(event: any) => setAppTime(event.target.currentTime)}
-          onLoadedData={(event: any) => setDuration(event.target.duration)}
-        />
-      </div>
-      <VolumeBar
+        /> */}
+          <Player
+            activeSong={activeSong}
+            volume={volume}
+            isPlaying={isPlaying}
+            seekTime={seekTime}
+            repeat={repeat}
+            currentIndex={currentIndex}
+            onEnded={handleNextSong}
+            onTimeUpdate={(event: any) => setAppTime(event.target.currentTime)}
+            onLoadedData={(event: any) => setDuration(event.target.duration)}
+          />
+        </div>
+        {/* <VolumeBar
         value={volume}
         min="0"
         max="1"
         onChange={(event: any) => setVolume(event.target.value)}
         setVolume={setVolume}
-      />
+      /> */}
+      </div>
     </div>
   );
 };
diff --git a/components/lofi/components/Discover.tsx b/components/lofi/components/Discover.tsx
index 11f4e1d..982d38f 100644
--- a/components/lofi/components/Discover.tsx
+++ b/components/lofi/components/Discover.tsx
@@ -45,9 +45,9 @@ const Discover = () => {
         </select>
       </div>
 
-      <Draggable>
+      <Draggable cancel='.btn'>
         <div className="flex flex-wrap sm:justify-start w-fit rounded-md overflow-x-hidden justify-center gap-8 bg-white bg-opacity-50 border-white border">
-          <div className="flex w-[300px] flex-col items-start overflow-x-hidden">
+          <div className="flex w-[300px] flex-col items-start overflow-x-hidden btn">
             {filteredSongs?.map((song: any, i: any) => (
               <div
                 className={play}
diff --git a/pages/lofi.tsx b/pages/lofi.tsx
index ac62366..cca445e 100644
--- a/pages/lofi.tsx
+++ b/pages/lofi.tsx
@@ -132,7 +132,6 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => {
   const showNote = () => {
     setShowModal(true);
   };
-  console.log(notess);
   const [showAddNotesModal, setShowAddNotesModal] = useState(false);
 
   const handleAddingNewNote = () => {
@@ -209,20 +208,21 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => {
               <>
                 <Discover />
                 {seconds > 0 && (
-                  <div className="absolute right-6 top-20   p-4 flex items-center justify-center">
+                  <div className="absolute right-16 top-[15vh] flex items-center justify-end">
                     <Clock />
                   </div>
                 )}
               </>
             )}
-            <Clock />
 
-            <Draggable>
+            {!sessionStarted && <Clock />}
+
+            <Draggable cancel=".btn">
               <div
                 className={
                   showTodo
-                    ? "top-36 right-10 absolute inline transition-opacity  opacity-100 duration-150 "
-                    : "top-36 right-10 absolute opacity-0 "
+                    ? "btn top-36 right-10 absolute inline transition-opacity  opacity-100 duration-150 "
+                    : "btn top-36 right-10 absolute opacity-0 "
                 }
               >
                 <LofiTodo todos={todos} user={user} setTodos={setTodos} />
@@ -241,8 +241,8 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => {
               )}
             </div>
 
-            <Draggable>
-              <div className="w-fit cursor-pointer absolute bottom-10 right-4 h-fit space-y-5 px-5 py-3 bg-white bg-opacity-30 rounded-[5px] border border-white border-opacity-50 backdrop-blur-[30px]">
+            <Draggable cancel=".btn">
+              <div className="btn w-fit cursor-pointer absolute bottom-10 right-4 h-fit space-y-5 px-5 py-3 bg-white bg-opacity-30 rounded-[5px] border border-white border-opacity-50 backdrop-blur-[30px]">
                 <div className="flex gap-4 justify-center items-center ">
                   <div
                     className={
@@ -306,18 +306,22 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => {
               </div>
             </Draggable>
             <button
-              className="bg-[#D9D9D9] active:scale-105 transition-all Z-10 select-none duration-100 bg-opacity-10 border-opacity-50 backdrop-blur-lg border-white border text-white w-1/5 rounded p-4 cursor-pointer"
+              className="bg-[#D9D9D9] z-50 mb-40 active:scale-105 transition-all Z-10 select-none duration-100 bg-opacity-10 border-opacity-50 backdrop-blur-lg border-white border text-white w-1/5 rounded p-4 cursor-pointer"
               onClick={sessionStarted ? handleStop : handleStart}
             >
               {sessionStarted ? "Stop Session" : "Start Session"}
             </button>
           </div>
 
+          {/* {from-white/10  to-[#2a2a80] backdrop-blur-lg rounded-t-3xl } */}
+
           {activeSong?.title && (
-            <div className="absolute z-50 h-28 w-4/5 bottom-0  right-0 flex animate-slideup bg-gradient-to-br from-white/10 to-[#2a2a80] backdrop-blur-lg rounded-t-3xl ">
-              <MusicPlayer />
-            </div>
-          )}
+          
+          <div className="absolute justify-center z-40 h-1/5 w-3/5 -bottom-24 right-0 mr-56 flex animate-slideup bg-gradient-to-br">
+            <MusicPlayer sessionStarted={sessionStarted}/>
+          </div>)}
+
+          
         </div>
       }
     />
diff --git a/pages/select-categories.tsx b/pages/select-categories.tsx
index bcb0e92..1e79c71 100644
--- a/pages/select-categories.tsx
+++ b/pages/select-categories.tsx
@@ -17,11 +17,11 @@ import { Toaster, toast } from "react-hot-toast";
 interface Props {
   users: User[];
 }
-const Home = ({ users }: Props) => {
+const Home = ({ users,next,setNext }: any) => {
   const router = useRouter();
   const { isLoaded, isSignedIn, user } = useUser();
   const match = users.filter(
-    (userss) => userss.email == user?.emailAddresses[0].emailAddress
+    (userss:any) => userss.email == user?.emailAddresses[0].emailAddress
   );
   const [isNewUser, setIsNewUser] = useState(false);
 
@@ -102,7 +102,6 @@ const Home = ({ users }: Props) => {
         <link rel="icon" href="/logo.png" />
       </Head>
       <Toaster position="top-right" reverseOrder={false} />
-      <Navbar />
       <div className="mx-auto my-auto">
         <div className="  flex flex-col items-center gap-6   justify-center max-w-5xl mx-auto">
           <span className="flex font-semibold text-2xl">Hi There!</span>
@@ -154,13 +153,12 @@ const Home = ({ users }: Props) => {
             </div>
           </div>
           <div
-            onClick={() => router.push("/dashboard")}
+            onClick={() => {router.push("/workspace"); setNext(!next)}}
             className="bg-cyan-500 p-3 text-white font-semibold rounded-lg mt-20 cursor-pointer"
           >
             <p>Return To User Dashboard</p>
           </div>
         </div>
-        <Body />
       </div>
     </>
   );
diff --git a/pages/workspace.tsx b/pages/workspace.tsx
index 8241740..d906845 100644
--- a/pages/workspace.tsx
+++ b/pages/workspace.tsx
@@ -39,6 +39,9 @@ import CustomLoader from "../components/CustomLoader";
 import Notes from "../components/Notes/Notes";
 import { DeleteIcon, XIcon } from "lucide-react";
 
+import Category from '../pages/select-categories'
+import { nextSong } from "../redux/features/playerSlice";
+
 const ReactQuill = dynamic(import("react-quill"), { ssr: false });
 interface Props {
   users: User[];
@@ -416,8 +419,11 @@ const Home = ({ users, goals, notes, setLoading }: Props) => {
 
   // const notes = [1,2,2,3,3,3,3,3,3,3,3,3]
 
+  const [onboard,setOnboard] = useState(false);
+  const [next,setNext] = useState(true);
   return (
     <>
+    { !onboard ? next? <h1>Welcome to Ownboon ... before going to app we woild lile u to select some categories u follow <button className="flex absolute justify-center" onClick={(e)=>{setNext(!next)}}>lets Explore</button></h1>: <Category users={users} next={next} setNext={setNext}/> :
       <div className="overflow-y-visible bg-[#101010] fade flex mt-[40px] flex-row justify-end relative font-sans w-full items-start">
         <div className="flex font-fontspring flex-col justify-start  gap-x-4 gap-y-5 relative w-full  items-end">
           <section
@@ -855,6 +861,7 @@ const Home = ({ users, goals, notes, setLoading }: Props) => {
           </div>
         </div>
       </div>
+}
     </>
   );
 };