diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index a28346a..dbc937f 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,59 +1,112 @@
 'use client'
-
+import { useRouter } from 'next/navigation';
+import { login } from "@/utils/actions";
 import Image from "next/image"
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useActionState } from "react";
 import { FaEye } from "react-icons/fa";
 import { IoCheckbox } from "react-icons/io5";
 import { MdCheckBoxOutlineBlank } from "react-icons/md";
+import { startTransition } from "react";
+import { useGlobalContext } from '@/context/context';
+
+const initialState: {
+    message:string | null, errors?: Record<string, string[] | undefined>, 
+    isLoggedIn?:boolean,
+    accessToken?: string | null,
+    userId?: string | null
+} = {
+    message:null,
+    isLoggedIn:false,
+    errors:{},
+    accessToken: null,
+    userId: null
+}
 
 const Login = () => {
     const [isChecked, setIsChecked] = useState<boolean>(false);
     const [togglePassword, setTogglePassword] = useState<boolean>(false);
+    const [state, formAction] = useActionState(login, initialState);
+    const [loading, setLoading] = useState<boolean>(false);
+    const {setUserId} = useGlobalContext();
+    const router = useRouter();
+    
+    const handleCheckboxToggle = () => {
+        setIsChecked((prev) => !prev);
+    };
+    
+    const handleSubmit = async (e:React.FormEvent<HTMLElement>) => {
+        e.preventDefault();
+        setLoading(true);
+        const formData = new FormData(e.currentTarget as HTMLFormElement)
+        startTransition(() => {
+            formAction(formData);
+            setLoading(false);
+        });
+        
+    }
+    
+    useEffect(()=>{
+        if(state?.isLoggedIn){
+            const userId = state?.userId as string 
+            setUserId(userId)
+            router.push("/")
+        }
+    },[state])
 
-  const handleCheckboxToggle = () => {
-    setIsChecked((prev) => !prev);
-  };
-
-  return (
+return (
     <div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen"  style={{ height: 'calc(100vh - 4rem)' }}>
-    <form action="" method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
+    <form onSubmit={handleSubmit} method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
         <h1 className="heading text-2xl font-bold">Welcome!</h1>
         <p className="para mb-5 mt-2">Log In your account.</p>
+            {(state?.errors?.root) && <>
+                <div className="flex gap-2">
+                    <p className="error-message font-bold mb-4 text-sm">
+                        {state?.errors?.root}
+                    </p>
+                </div>
+            </>}
         <div className="flex flex-col mb-5">
             <label className="label" htmlFor="email">Email <span className="asterik">*</span></label>
-            <input type="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
+            <input type="email" name="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
+            {state.errors && state.errors.email && (
+                    <p className="error-message">{state.errors.email}</p>
+            )}
         </div>
         <div className="flex flex-col mb-5 relative">
             <label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
             <div className="flex mt-2 relative">
-                <input type={togglePassword ?"text" :"password"} className="input value w-full pr-12" id="password" placeholder="Password" required/>
+                <input type={togglePassword ?"text" :"password"} name="password" className="input value w-full pr-12" id="password" placeholder="Password" required/>
                 <div className="flex justify-center items-center py-1 px-4 rounded-lg box-border  cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setTogglePassword(!togglePassword)}>
                     <FaEye className="value"/>
                 </div>
             </div>
+            {state.errors && state.errors.password && (
+                    <p className="error-message">{state.errors.password}</p>
+                )}
         </div>
         <div className="flex justify-between items-center">
-                <label className="label flex justify-between items-center gap-2 w-full">
-                    <div className="label flex items-center gap-2">
-                      {isChecked ? (
-                          <IoCheckbox
-                              className="primary border-0 text-xl"
-                              onClick={handleCheckboxToggle}
-                          />
-                          ) : (
-                          <MdCheckBoxOutlineBlank
-                              className="primary border-0 text-xl"
-                              onClick={handleCheckboxToggle}
-                          />
-                      )}
-                      <input type="checkbox" hidden />
-                      Remember me
-                    </div>
-                  <Link href={""} className="label hover:underline">Forget Password?</Link>
-                </label>
+            <label className="label flex justify-between items-center gap-2 w-full">
+                <div className="label flex items-center gap-2">
+                    {isChecked ? (
+                        <IoCheckbox
+                            className="primary border-0 text-xl"
+                            onClick={handleCheckboxToggle}
+                        />
+                        ) : (
+                        <MdCheckBoxOutlineBlank
+                            className="primary border-0 text-xl"
+                            onClick={handleCheckboxToggle}
+                        />
+                    )}
+                    <input type="checkbox" hidden data-testid="checkbox"/>
+                    Remember me
+                </div>
+                <Link href={""} className="label hover:underline">Forget Password?</Link>
+            </label>
         </div>
-        <button className="primaryBtn w-full mt-6">Login</button>
+        <button className="primaryBtn w-full mt-6" disabled={loading} data-testid="submit">{loading ? "Processing...": "Login"}</button>
         <p className="para text-sm mt-4 text-center">Don&#39;t have any account? <Link href={'/register'} className="heading font-bold">SignUp</Link></p>
     </form>
     <div className="relative hidden sm:block col-span-1 sm:col-span-2 md:col-span-3 h-full">
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 91323da..48fd32e 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -3,57 +3,105 @@
 import Image from "next/image"
 import Link from "next/link";
 import { useState } from "react";
+import { useFormState } from "react-dom";
 import { FaEye } from "react-icons/fa";
-import { IoCheckbox } from "react-icons/io5";
-import { MdCheckBoxOutlineBlank } from "react-icons/md";
+import { startTransition } from "react";
+
+
+
+// actions
+import { createUser } from "@/utils/actions";
+
+const initialState: { message: string | null; errors?: Record<string, string[] | undefined> } = {
+    message: null,
+    errors: {},
+};
 
 const Register = () => {
-    const [isChecked, setIsChecked] = useState<boolean>(false);
     const [togglePassword, setTogglePassword] = useState<boolean>(false);
     const [toggleConfirmPassword, setToggleConfirmPasword] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [state,formAction] = useFormState(createUser,initialState)
 
+  const handleSubmit = async (e:React.FormEvent<HTMLElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    const formData = new FormData(e.currentTarget as HTMLFormElement)
+    startTransition(() => {
+        formAction(formData);
+        setLoading(false);
+    });
 
-  const handleCheckboxToggle = () => {
-    setIsChecked((prev) => !prev);
-  };
+    }
 
   return (
     <div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen"  style={{ height: 'calc(100vh - 4rem)' }}>
-        <form action="" method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
+        <form onSubmit={handleSubmit} action={formAction} method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
             <h1 className="heading text-2xl font-bold">Register!</h1>
             <p className="para mb-5 mt-2">Create a new account.</p>
+            
+            {(state?.message) && <>
+                <div className="flex gap-2">
+                    <p className="success-message text-green-500 mb-4 font-bold">
+                        {state?.message}
+                    </p>
+                    <Link href={"/login"} className="heading underline cursor-pointer font-bold text-xs">Login here</Link>
+                </div>
+            </>}
+            {(state?.errors?.root) && <>
+                <div className="flex gap-2">
+                    <p className="error-message font-bold mb-4 text-sm">
+                        {state?.errors?.root}
+                    </p>
+                </div>
+            </>}
             <div className="flex flex-col mb-5">
                 <label className="label" htmlFor="firstName">First Name <span className="asterik">*</span></label>
-                <input type="text" className="input value w-full mt-2" id="firstName" placeholder="First Name" required/>
+                <input type="text" name="firstName" className="input value w-full mt-2" id="firstName" placeholder="First Name" required/>
+                {state.errors && state.errors.firstName && (
+                    <p className="error-message">{state.errors.firstName}</p>
+                )}
             </div>
             <div className="flex flex-col mb-5">
                 <label className="label" htmlFor="lastName">Last Name <span className="asterik">*</span></label>
-                <input type="text" className="input value w-full mt-2" id="lastName" placeholder="Last Name" required/>
+                <input type="text" name="lastName" className="input value w-full mt-2" id="lastName" placeholder="Last Name" required/>
+                {state.errors && state.errors.lastName && (
+                    <p className="error-message">{state.errors.lastName}</p>
+                )}
             </div>
             <div className="flex flex-col mb-5">
                 <label className="label" htmlFor="email">Email <span className="asterik">*</span></label>
-                <input type="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
+                <input type="email" name="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
+                {state.errors && state.errors.email && (
+                    <p className="error-message">{state.errors.email}</p>
+                )}
             </div>
-            <div className="flex flex-col mb-5 relative">
+            <div className="flex flex-col mb-5 relative z-0">
                 <label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
                 <div className="flex mt-2 relative">
-                <input type={togglePassword ?"text" :"password"} className="input value w-full pr-12" id="password" placeholder="Password" required/>
+                <input type={togglePassword ?"text" :"password"} name="password" className="input value w-full pr-12" id="password" placeholder="Password" required/>
                 <div className="flex justify-center items-center py-1 px-4 rounded-lg box-border  cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setTogglePassword(!togglePassword)}>
                     <FaEye className="value"/>
                 </div>
                 </div>
+                {state.errors && state.errors.password && (
+                    <p className="error-message">{state.errors.password}</p>
+                )}
                 
             </div>
             <div className="flex flex-col mb-5 relative w-full">
                 <label className="label" htmlFor="confirmPassword">Confirm Password <span className="asterik">*</span></label>
                 <div className="flex mt-2 relative">
-                    <input type={toggleConfirmPassword ?"text" :"password"} className="input value w-full pr-12" id="confirmPassword" placeholder="Confirm Password" required/>
+                    <input type={toggleConfirmPassword ?"text" :"password"} name="confirmPassword" className="input value w-full pr-12" id="confirmPassword" placeholder="Confirm Password" required />
                     <div className="flex justify-center items-center py-1 px-4 rounded-lg box-border  cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setToggleConfirmPasword(!toggleConfirmPassword)}>
                     <FaEye className="value"/>
                     </div>
                 </div>
+                    {state.errors && state.errors.confirmPassword && (
+                    <p className="error-message">{state.errors.confirmPassword}</p>
+                    )}
             </div>
-            <div>
+            {/* <div>
                 <label className="label flex items-center gap-2">
                     {isChecked ? (
                         <IoCheckbox
@@ -69,8 +117,9 @@ const Register = () => {
                     <input type="checkbox" hidden />
                     Remember me
                 </label>
-            </div>
-            <button className="primaryBtn w-full mt-6">Register</button>
+            </div> */}
+            <button className="primaryBtn w-full mt-6" disabled={loading}>{loading ? "Processing...": "Register"}</button>
+
             <p className="para text-sm mt-4 text-center">Do you have an account? <Link href={'/login'} className="heading font-bold">SignIn</Link></p>
         </form>
         <div className="relative hidden sm:block col-span-1 sm:col-span-2 md:col-span-3 h-full">
diff --git a/app/(profile)/create-post/page.tsx b/app/(profile)/create-post/page.tsx
new file mode 100644
index 0000000..4045cda
--- /dev/null
+++ b/app/(profile)/create-post/page.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { FaImage } from "react-icons/fa";
+
+const CreateBlog = () => {
+  return (
+    <div className='background p-6 rounded-lg max-w-4xl'>
+      <h1 className='text-xl font-bold mb-8'>Create a new blog</h1>
+      <form>
+        <p className='label mb-3'>Upload blog cover&nbsp;<span className='asterik'>*</span></p>
+        <label htmlFor="blogCover" className='border-2 border-dashed rounded-lg h-40 flex flex-col gap-2 justify-center items-center cursor-pointer mb-5 secondaryBg'>
+          <FaImage className='label text-3xl'/>
+          <p className='text-xs'>Upload Blog Cover Image</p>
+          <p className='text-xs'>click to browse</p>
+          <input type='file' name='blogCover' id='blogCover' className='hidden'/>
+        </label>
+        <div className="flex flex-col mb-5">
+            <label className="label" htmlFor="blogName">Blog Name <span className="asterik">*</span></label>
+            <input 
+              type="text" 
+              name="blogName" 
+              className="input value w-full mt-2" 
+              id="blogName" 
+              required
+              placeholder='Eg. Next.js 15 is know released.'
+            />
+            {/* {state.errors && state.errors.email && (
+                    <p className="error-message">{state.errors.email}</p>
+            )} */}
+        </div>
+        <div className="flex flex-col mb-5">
+            <label className="label" htmlFor="hook">Hook <span className="asterik">*</span></label>
+            <input 
+              type="text" 
+              name="hook" 
+              className="input value w-full mt-2" 
+              id="hook" 
+              placeholder='Eg. Did you know why next.js is so important? I tell you why'
+              required
+            />
+            {/* {state.errors && state.errors.email && (
+                    <p className="error-message">{state.errors.email}</p>
+            )} */}
+        </div>
+        <div className="flex flex-col mb-5">
+          <label className="label" htmlFor="desc">
+              Description <span className="asterik">*</span>
+          </label>
+          <textarea
+              name="desc"
+              id="desc"
+              className="input value w-full mt-2"
+              rows={10}
+              required
+              placeholder='Eg. <h1>What is Next.js.</h1>'
+          />
+          {/* {state.errors?.desc && (
+              <p className="error-message">{state.errors.desc}</p>
+          )} */}
+        </div>
+        <p className='label mb-3'>Tags&nbsp;<span className='asterik'>*</span></p>
+        <div className='myBorder rounded-lg h-24 p-3 gap-2 items-center cursor-pointer mb-5 flex flex-wrap justify-start'>
+          <span className='tag cursor-pointer hover:tagSelected'>Design</span>
+          <span className='tag cursor-pointer hover:tagSelected'>Research</span>
+          <span className='tag cursor-pointer hover:tagSelected'>Technology</span>
+          <span className='tag cursor-pointer hover:tagSelected'>Polotics</span>
+        </div>
+        <div className='flex justify-between mt-10'>
+          <button className='transparentBtn'>Cancel</button>
+          <div className='flex gap-7'>
+            <button className='secondaryBtn'>Save as Draft</button>
+            <button className='primaryBtn'>Publish</button>
+          </div>
+        </div>
+
+      </form>
+    </div>
+  )
+}
+
+export default CreateBlog
\ No newline at end of file
diff --git a/app/(profile)/dashboard/page.tsx b/app/(profile)/dashboard/page.tsx
new file mode 100644
index 0000000..12788ab
--- /dev/null
+++ b/app/(profile)/dashboard/page.tsx
@@ -0,0 +1,114 @@
+'use client'
+import {useState} from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { HiDotsHorizontal } from "react-icons/hi";
+
+const Dashboard = () => {
+  const [optionsNumber, setOptionsNumber] = useState<number>(-1)
+
+  const handleOptions = (num:number) => {
+    if(num !== optionsNumber){
+      setOptionsNumber(num);
+    }else{
+      setOptionsNumber(-1);
+    }
+  }
+  return (
+    <div className="background p-6 rounded-lg w-10/12 min-h-screen sm:w-full">
+      <h1 className="text-xl font-bold mb-8">Blog lists</h1>
+
+      <div className="overflow-x-auto w-full custom-scrollbar rounded-lg">
+        <table className="border-collapse w-full para">
+          <thead className='secondaryBg'>
+            <tr>
+              <th className="tableBorder px-4 py-2 w-1/6 font-extrabold text-left">SI No:</th>
+              <th className="tableBorder px-4 py-2 w-4/6 font-extrabold text-left">Blog name</th>
+              <th className="tableBorder px-4 py-2 w-1/4 font-extrabold text-left">Release Date</th>
+              <th className="tableBorder px-4 py-2 w-1/6 font-extrabold text-left">Status</th>
+              <th className="tableBorder px-4 py-2 w-1/4 font-extrabold text-left">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="tableBorder px-4 py-2">01</td>
+              <td className="tableBorder px-4 py-2">
+                <div className='flex gap-4 items-center'>
+                  <div className="w-8 h-8">
+                    <Image src="/images/blog1.png" alt='Blog Image' width={40} height={40} className="w-full h-full object-cover" priority />
+                  </div>
+                  Conversation with London Makr & co.
+                </div>
+              </td>
+              <td className="tableBorder px-4 py-2">20 Jan 2024</td>
+              <td className="tableBorder px-4 py-2">
+                <button className="active activeBorder p-2 rounded-lg font-bold">
+                  PUBLISHED
+                </button>
+              </td>
+              <td className="tableBorder px-4 py-2 relative">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg' onClick={()=>{handleOptions(1)}}>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+                {
+                  (optionsNumber == 1) && (
+                    <div className='absolute primaryBg primaryBtnText flex flex-col gap-1 bottom-1/4 right-2/3 rounded-lg z-30'>
+                      <Link href={''} className='tableBorder p-2 hover:font-bold'>Edit</Link>
+                      <Link href={''} className='p-2 hover:font-bold'>Delete</Link>
+                    </div>
+                  )
+                }
+              </td>
+            </tr>
+            <tr>
+              <td className="tableBorder px-4 py-2">02</td>
+              <td className="tableBorder px-4 py-2">
+                <div className='flex gap-4 items-center'>
+                  <div className="w-8 h-8">
+                    <Image src="/images/blog1.png" alt='Blog Image' width={40} height={40} className="w-full h-full object-cover" priority />
+                  </div>
+                  Conversation with London Makr & co.
+                </div>
+              </td>
+              <td className="tableBorder px-4 py-2">20 Jan 2024</td>
+              <td className="tableBorder px-4 py-2">
+                <button className="active activeBorder p-2 rounded-lg font-bold draftBorder draft">
+                  DRAFTED
+                </button>
+              </td>
+              <td className="tableBorder px-4 py-2">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg'>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td className="tableBorder px-4 py-2">03</td>
+              <td className="tableBorder px-4 py-2">
+                <div className='flex gap-4 items-center'>
+                  <div className="w-8 h-8">
+                    <Image src="/images/blog1.png" alt='Blog Image' width={40} height={40} className="w-full h-full object-cover" priority />
+                  </div>
+                  Conversation with London Makr & co.
+                </div>
+              </td>
+              <td className="tableBorder px-4 py-2">20 Jan 2024</td>
+              <td className="tableBorder px-4 py-2">
+                <button className="active activeBorder p-2 rounded-lg font-bold">
+                  PUBLISHED
+                </button>
+              </td>
+              <td className="tableBorder px-4 py-2">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg'>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/app/(profile)/layout.tsx b/app/(profile)/layout.tsx
new file mode 100644
index 0000000..b8ca08c
--- /dev/null
+++ b/app/(profile)/layout.tsx
@@ -0,0 +1,16 @@
+import SideMenu from "@/components/SideMenu";
+
+const layout = ({
+    children,
+  }: Readonly<{
+    children: React.ReactNode;
+  }>) => {
+  return (
+    <main className='flex'>
+        <SideMenu/>
+        <section className="sectionBg p-4 ml-14 sm:ml-0 w-screen min-h-screen">{children}</section>
+    </main>
+  )
+}
+
+export default layout
\ No newline at end of file
diff --git a/app/(profile)/subscribers/page.tsx b/app/(profile)/subscribers/page.tsx
new file mode 100644
index 0000000..922486e
--- /dev/null
+++ b/app/(profile)/subscribers/page.tsx
@@ -0,0 +1,95 @@
+'use client'
+import {useState} from 'react';
+import { HiDotsHorizontal } from "react-icons/hi";
+import Link from 'next/link';
+
+const Subscribers = () => {
+  const [optionsNumber, setOptionsNumber] = useState<number>(-1)
+
+  const handleOptions = (num:number) => {
+    if(num !== optionsNumber){
+      setOptionsNumber(num);
+    }else{
+      setOptionsNumber(-1);
+    }
+  }
+  return (
+    <div className="background p-6 rounded-lg w-10/12 min-h-screen sm:w-full">
+      <h1 className="text-xl font-bold mb-8">Subscribers</h1>
+
+      <div className="overflow-x-auto w-full custom-scrollbar rounded-lg ">
+        <table className="border-collapse w-full para">
+          <thead className='secondaryBg'>
+            <tr>
+              <th className="tableBorder px-4 py-2 w-1/6 font-extrabold text-left">SI No:</th>
+              <th className="tableBorder px-4 py-2 w-4/6 font-extrabold text-left">Subscriber&apos;s email</th>
+              <th className="tableBorder px-4 py-2 w-1/4 font-extrabold text-left">Subscribed Date</th>
+              <th className="tableBorder px-4 py-2 w-1/4 font-extrabold text-left">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="tableBorder px-4 py-2">01</td>
+              <td className="tableBorder px-4 py-2">
+                  amanuelabera46@gmail.com
+              </td>
+              <td className="tableBorder px-4 py-2">20 Jan 2024</td>
+              <td className="tableBorder px-4 py-2 relative">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg' onClick={()=>{handleOptions(1)}}>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+                {
+                  (optionsNumber == 1) && (
+                    <div className='absolute primaryBg primaryBtnText flex flex-col gap-1 bottom-1/4 right-2/3 rounded-lg'>
+                      <Link href={''} className='p-2 hover:font-bold'>Delete</Link>
+                    </div>
+                  )
+                }
+              </td>
+            </tr>
+            <tr>
+              <td className="tableBorder px-4 py-2">02</td>
+              <td className="tableBorder px-4 py-2">
+                  roby4739@gmail.com
+              </td>
+              <td className="tableBorder px-4 py-2">20 Dec 2024</td>
+              <td className="tableBorder px-4 py-2 relative">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg' onClick={()=>{handleOptions(2)}}>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+                {
+                  (optionsNumber == 2) && (
+                    <div className='absolute primaryBg primaryBtnText flex flex-col gap-1 bottom-1/4 right-2/3 rounded-lg'>
+                      <Link href={''} className='p-2 hover:font-bold'>Delete</Link>
+                    </div>
+                  )
+                }
+              </td>
+            </tr>
+            <tr>
+              <td className="tableBorder px-4 py-2">03</td>
+              <td className="tableBorder px-4 py-2">
+                  aberakd@gmail.com
+              </td>
+              <td className="tableBorder px-4 py-2">14 Apr 2024</td>
+              <td className="tableBorder px-4 py-2 relative">
+                <div className='h-full w-full flex justify-center items-center rounded-lg hover:secondaryBg relative' onClick={()=>{handleOptions(3)}}>
+                  <HiDotsHorizontal className='heading text-2xl cursor-pointer' />
+                </div>
+                {
+                  (optionsNumber == 3) && (
+                    <div className='absolute primaryBg primaryBtnText flex flex-col gap-1 bottom-1/4 right-2/3 rounded-lg z-30'>
+                      <Link href={''} className='p-2 hover:font-bold'>Delete</Link>
+                    </div>
+                  )
+                }
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default Subscribers
\ No newline at end of file
diff --git a/app/api/decoded/route.ts b/app/api/decoded/route.ts
new file mode 100644
index 0000000..fe267c9
--- /dev/null
+++ b/app/api/decoded/route.ts
@@ -0,0 +1,21 @@
+import { cookies } from "next/headers"
+import jwt from 'jsonwebtoken'
+
+const secret = process.env.ACCESS_TOKEN;
+export const GET = async() => {
+    const cookieStore = await cookies();
+    const accessToken = cookieStore.get('accessToken')?.value;
+
+    if (accessToken && secret) {
+        try {
+            const { id } = jwt.verify(accessToken, secret) as { id: string };
+            return new Response(JSON.stringify({ id }), { status: 200 });
+        } catch (error) {
+            if(error){
+                return new Response(JSON.stringify({ error: "Invalid token" }), { status: 401 });
+            }
+        }
+    } else {
+        return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401 });
+    }
+}
\ No newline at end of file
diff --git a/app/api/logout/route.ts b/app/api/logout/route.ts
new file mode 100644
index 0000000..bc3c2bb
--- /dev/null
+++ b/app/api/logout/route.ts
@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+
+export const GET = () => {
+    const response = NextResponse.json({ isLoggedOut: true });
+    response.cookies.set('accessToken', '', {
+        path: '/',
+        httpOnly: true,
+        expires: new Date(0), // Expire immediately
+    });
+    return response;
+};
diff --git a/app/globals.css b/app/globals.css
index b0f2ffa..cc4eb9b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -46,10 +46,11 @@
 
 body {
   font-family: 'Merriweather', serif;
-  font-size: 14px; 
+  font-size: 12px; 
   line-height: 1.6;
   background-color: var(--color-background);
   color: var(--color-paragraph); 
+  overflow-x: hidden;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -58,6 +59,25 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading); 
 }
 
+.custom-scrollbar::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+  border-radius: 4px; 
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #c2c2c2;
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #c2c2c2; 
+}
+
 @layer utilities{
   .background{
     background-color: var(--color-background);
@@ -79,7 +99,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .activeBorder{
-    border: 1px solid var(--color-active-status);
+    border: 2px solid var(--color-active-status);
   }
 
   .draft{
@@ -87,7 +107,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .draftBorder{
-    border: 1px solid var(--color-draft-status);
+    border: 2px solid var(--color-draft-status);
   }
 
   .label{
@@ -98,6 +118,10 @@ h1, h2, h3, h4, h5, h6 {
     color: var(--color-input-value);
   }
 
+  .tableBorder{
+    border-bottom: 1px solid var(--color-input-border);
+  }
+
   .myBorder{
     border: 1px solid var(--color-input-border);
   }
@@ -138,13 +162,13 @@ h1, h2, h3, h4, h5, h6 {
 
 @layer components {
   .primaryBtn {
-    @apply primaryBg primaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
+    @apply primaryBg primaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80;
   }
   .secondaryBtn {
-    @apply secondaryBg secondaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
+    @apply secondaryBg secondaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80;
   }
   .transparentBtn {
-    @apply bg-transparent secondaryBtnText myBorder text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
+    @apply bg-transparent secondaryBtnText myBorder text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80;
   }
   .input{
     @apply myBorder bg-transparent p-2 rounded-md value outline-none focus:inputFocus
@@ -157,6 +181,14 @@ h1, h2, h3, h4, h5, h6 {
     @apply myBorder-2 py-1 px-4 rounded-lg font-semibold
   }
   .tagSelected{
-    @apply primaryBg primaryBtnText border-0
+    @apply primaryBg primaryBtnText border-2 border-[var(--color-primary)]
+  }
+
+  .error-message{
+    @apply text-red-600 text-xs mt-1
+  }
+
+  .sideMenuLink{
+    @apply flex items-center gap-2 mb-1 heading font-bold text-base py-2 px-3 rounded-lg transition-all duration-100 cursor-pointer hover:secondaryBg 
   }
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 043e4be..c959657 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Header from "@/components/Header";
+import ContextAPI from "@/context/context";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -14,12 +15,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body>
-        <Header/>
-        <main>
-        {children}
-        </main>
-      </body>
+      <ContextAPI>
+        <body>
+          <Header/>
+          <main>
+          {children}
+          </main>
+        </body>
+      </ContextAPI>
     </html>
   );
 }
diff --git a/components/Header.tsx b/components/Header.tsx
index da9cf87..27a6e41 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,14 +1,22 @@
 'use client';
 
+import { useGlobalContext } from '@/context/context';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { GiHamburgerMenu } from "react-icons/gi";
 import { MdOutlineToggleOff } from "react-icons/md";
 import { MdOutlineToggleOn } from "react-icons/md";
+import { IoCreateOutline } from "react-icons/io5";
+import { useRouter } from 'next/navigation';
+import { FaCircleUser } from "react-icons/fa6";
+import { IoCloseSharp } from "react-icons/io5";
 
 
 const Header = () => {
     const [isDarkMode, setDarkMode] = useState<boolean>(false)
+    const {userId, setUserId} = useGlobalContext();
+    const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false);
+    const route = useRouter();
 
     useEffect(() => {
         
@@ -38,19 +46,51 @@ const Header = () => {
         }
     };
 
+    const handleLogout = async () => {
+        try {
+            const response = await fetch('/api/logout');
+            const data = await response.json();
+    
+            if (data.isLoggedOut) {
+                console.log("User logged out successfully");
+                setUserId(null); 
+                setIsMenuVisible(false)
+                route.push("/")
+            }
+        } catch (error) {
+            console.error("Error during logout:", error);
+        }
+    };
+
     return (
         <>
-        <section className='h-16 flex items-center px-5'>
+        <section className='h-16 flex items-center px-5 z-50'>
             <header className='max-w-7xl mx-auto flex justify-between items-center w-full'>
                 <Link href={"/"} className='heading font-bold text-2xl'>blogger</Link>
                 <nav className='flex items-center gap-3'>
-                    <div className='hidden sm:flex items-center gap-3 text-base'>
-                        <Link href={"/"} className='font-semibold heading'>Home</Link>
-                        <Link href={"#"} className='font-semibold heading'>Newsletter</Link>
-                        <Link href={"/login"} className='transparentBtn text-base'>Login</Link>
-                        <Link href={"/register"} className='primaryBtn text-base outline-none'>Create account</Link>
+                    <div className={`flex flex-col pt-24 items-center gap-3 text-base fixed top-0 left-0 bottom-0 background sm:bg-transparent w-full z-10 sm:flex-row sm:pt-0 sm:relative ${isMenuVisible ? 'flex' : 'hidden sm:flex'} `}>
+                        <IoCloseSharp className='fixed right-4 top-4 text-2xl font-bold cursor-pointer sm:hidden' onClick={() => setIsMenuVisible(false)} />
+                        <Link href={"/"} className={`font-semibold heading `} onClick={() => setIsMenuVisible(false)}>Home</Link>
+                        <Link href={"#"} className='font-semibold heading' onClick={() => setIsMenuVisible(false)}>Newsletter</Link>
+                        {
+                            userId
+                            ? (<Link href={"/create-post"} className='transparentBtn text-base flex items-center' onClick={() => setIsMenuVisible(false)}>
+                                <IoCreateOutline className='heading text-base font-bold'/>&nbsp;
+                                <span>Write Blog</span>
+                            </Link>)
+                            : (<Link href={"/login"} className='transparentBtn text-base' onClick={() => setIsMenuVisible(false)}>Login</Link>)
+                        }
+                        {
+                            userId
+                            ? (<button onClick={handleLogout} className='primaryBtn text-base outline-none' >Logout</button>)
+                            : (<Link href={"/register"} className='primaryBtn text-base outline-none' onClick={() => setIsMenuVisible(false)}>Create account</Link>)
+                        }
+                        
                     </div>
-                    <GiHamburgerMenu className='primary text-2xl cursor-pointer sm:hidden' />
+                    <GiHamburgerMenu className='primary text-2xl cursor-pointer sm:hidden' onClick={() => setIsMenuVisible(true)} />
+                    {userId && <Link title='dashboard' href={"/dashboard"}>
+                        <FaCircleUser className='heading text-xl cursor-pointer' />
+                    </Link>}
                     <div className='cursor-pointer'>
                     {
                         isDarkMode
diff --git a/components/SideMenu.tsx b/components/SideMenu.tsx
new file mode 100644
index 0000000..18514b3
--- /dev/null
+++ b/components/SideMenu.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import Link from 'next/link'
+import {useEffect, useState} from 'react'
+import { LuLayoutDashboard } from "react-icons/lu";
+import { MdAdd } from "react-icons/md";
+import { IoPersonAdd } from "react-icons/io5";
+import { FaBarsStaggered } from "react-icons/fa6";
+
+const SideMenu = () => {
+    const[isMenuHide, setIsMenuHide] = useState<boolean>(false)
+
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth < 640) {
+                setIsMenuHide(true);
+            } else {
+                setIsMenuHide(false);
+            }
+        };
+    
+        handleResize();
+    
+        window.addEventListener('resize', handleResize);
+    
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    
+
+  return (
+    <nav className={`h-full flex flex-col absolute sm:relative background ${isMenuHide ? 'items-center w-14 px-0' :'w-60 max-w-60 px-3'}`}>
+        <header 
+        className={`flex items-center mb-1 heading font-bold text-lg py-2 px-3 rounded-lg cursor-pointer hover:secondaryBtnText ${isMenuHide ? 'justify-center' :'justify-end'}`} onClick={()=>setIsMenuHide(!isMenuHide)}>
+            <FaBarsStaggered />
+        </header>
+        <Link 
+        href={'/dashboard'} 
+        className={`sideMenuLink ${isMenuHide ? 'justify-center  py-1 px-1' :'justify-normal'}`}>
+            <LuLayoutDashboard />
+            <span className={`${isMenuHide ? 'hidden' :'block'}`}>Dashboard</span>
+        </Link>
+        <Link 
+            href={'/create-post'} 
+            className={`sideMenuLink ${isMenuHide ? 'justify-center  py-1 px-1' :'justify-normal'}`}>
+            <MdAdd />
+            <span className={`${isMenuHide ? 'hidden' :'block'}`}>Create Blog</span>
+        </Link>
+        <Link 
+            href={'/subscribers'} 
+            className={`sideMenuLink ${isMenuHide ? 'justify-center  py-1 px-1' :'justify-normal'}`}>
+            <IoPersonAdd />
+            <span className={`${isMenuHide ? 'hidden' :'block'}`}>Subscribers</span>
+        </Link>
+    </nav>
+  )
+}
+
+export default SideMenu
\ No newline at end of file
diff --git a/context/context.tsx b/context/context.tsx
new file mode 100644
index 0000000..19eb2e1
--- /dev/null
+++ b/context/context.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { createContext, useState, useContext, useEffect } from "react";
+
+
+
+interface UserContextType {
+    userId: string | null;
+    setUserId: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+const UserContext = createContext<UserContextType | null>(null);
+
+const ContextAPI: React.FC<{children:React.ReactNode}> = ({children}) => {
+    const [userId, setUserId] = useState<string | null>(null);
+
+    useEffect(()=>{
+        const fetchUserData = async () => {
+
+            const response = await fetch(`/api/decoded`)
+    
+            if(response.ok){
+                const data = await response.json();
+                const { id } = data;
+                setUserId(id);
+            }
+        }
+
+        if (!userId) fetchUserData();
+
+    },[userId])
+
+    return (
+        <UserContext.Provider value={{userId, setUserId}}>
+            {children}
+        </UserContext.Provider>
+    )
+}
+
+export const useGlobalContext = () => {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error("useGlobalContext must be used within a ContextAPI provider");
+    }
+    return context;
+}
+
+
+export default ContextAPI;
\ No newline at end of file
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..b9eb02a
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+import { jwtVerify } from 'jose';
+import { cookies } from 'next/headers';
+
+const secret = new TextEncoder().encode(process.env.ACCESS_TOKEN);
+
+export async function middleware(request: Request) {
+    const cookieStore = await cookies();
+    const accessToken = cookieStore.get('accessToken')?.value;
+
+    if (!accessToken) {
+        return NextResponse.redirect(new URL('/login', request.url));
+    }
+
+    try {
+        await jwtVerify(accessToken, secret);
+        return NextResponse.next();
+    } catch (err: unknown) {
+        return NextResponse.redirect(new URL('/login', request.url));
+    }
+}
+
+export const config = {
+    matcher: ['/create-post/:path*'],
+};
+
+
diff --git a/package-lock.json b/package-lock.json
index 31f9ac8..5da1448 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,13 @@
         "@prisma/client": "^6.0.0",
         "axios": "^1.7.8",
         "bcryptjs": "^2.4.3",
+        "cookies-next": "^5.0.2",
+        "jose": "^5.9.6",
         "jsonwebtoken": "^9.0.2",
+        "jwt-decode": "^4.0.0",
         "next": "15.0.3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "zod": "^3.23.8"
       },
@@ -22,7 +25,9 @@
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.0.1",
+        "@types/bcryptjs": "^2.4.6",
         "@types/jest": "^29.5.14",
+        "@types/jsonwebtoken": "^9.0.7",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -2199,6 +2204,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -2301,6 +2313,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.7.tgz",
+      "integrity": "sha512-ugo316mmTYBl2g81zDFnZ7cfxlut3o+/EQdaP7J8QN2kY6lJ22hmQYCK5EHcJHbrW+dkCGSCPgbG8JtYj6qSrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.17.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
@@ -3588,6 +3610,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cookies-next": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-5.0.2.tgz",
+      "integrity": "sha512-Ft5yXMbN6wMfgLiL5TMyPnxsjkW6UEjZw0YMoDMiF3F6iYdFPjiJEMugx/sivUr8G+0xPG80lBYqI2b+VquSuw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1"
+      },
+      "peerDependencies": {
+        "next": ">=15.0.0"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -7153,6 +7196,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.9.6.tgz",
+      "integrity": "sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7331,6 +7383,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8595,9 +8656,9 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "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==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -8607,16 +8668,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-icons": {
diff --git a/package.json b/package.json
index 05c03e6..55f28f1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "npx prisma generate && next build",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -14,10 +14,13 @@
     "@prisma/client": "^6.0.0",
     "axios": "^1.7.8",
     "bcryptjs": "^2.4.3",
+    "cookies-next": "^5.0.2",
+    "jose": "^5.9.6",
     "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^4.0.0",
     "next": "15.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "zod": "^3.23.8"
   },
@@ -25,7 +28,9 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@types/bcryptjs": "^2.4.6",
     "@types/jest": "^29.5.14",
+    "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/prisma/dev.db b/prisma/dev.db
new file mode 100644
index 0000000..72c3b53
Binary files /dev/null and b/prisma/dev.db differ
diff --git a/prisma/migrations/20241211153138_initial_user_model/migration.sql b/prisma/migrations/20241211153138_initial_user_model/migration.sql
new file mode 100644
index 0000000..45e5a8f
--- /dev/null
+++ b/prisma/migrations/20241211153138_initial_user_model/migration.sql
@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "firstName" TEXT NOT NULL,
+    "lastName" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
diff --git a/prisma/migrations/20241212085138_/migration.sql b/prisma/migrations/20241212085138_/migration.sql
new file mode 100644
index 0000000..5e77f8e
--- /dev/null
+++ b/prisma/migrations/20241212085138_/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[email]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
diff --git a/prisma/migrations/20241212111426_add_refresh_token/migration.sql b/prisma/migrations/20241212111426_add_refresh_token/migration.sql
new file mode 100644
index 0000000..cf2442e
--- /dev/null
+++ b/prisma/migrations/20241212111426_add_refresh_token/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN "refreshToken" TEXT;
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..e5e5c47
--- /dev/null
+++ b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..1e1ce8c
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,24 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User{
+  id String @id @default(uuid())
+  firstName String
+  lastName String
+  email String @unique
+  password String
+  refreshToken String?
+  createdAt DateTime @default(now())
+}
\ No newline at end of file
diff --git a/public/images/blog1.png b/public/images/blog1.png
new file mode 100644
index 0000000..e8d5d20
Binary files /dev/null and b/public/images/blog1.png differ
diff --git a/utils/actions.ts b/utils/actions.ts
new file mode 100644
index 0000000..17f63bb
--- /dev/null
+++ b/utils/actions.ts
@@ -0,0 +1,169 @@
+'use server'
+
+import { z } from "zod";
+import prisma from "./db";
+import bcrypt from "bcryptjs"
+import jwt from 'jsonwebtoken'
+import { cookies } from 'next/headers';
+import { revalidatePath } from "next/cache";
+
+type RegisterResponse = {
+    message: string;
+    errors?: Record<string, string[] | undefined>,
+};
+
+export const createUser = async (
+  state: { message: string | null, errors?: Record<string, string[] | undefined> },
+  formData: FormData
+): Promise<RegisterResponse> => {
+
+    const UserValidation = z.object({
+        firstName: z.string().nonempty("First Name is required."),
+        lastName: z.string().nonempty("Last Name is required."),
+        email: z.string().email("Invalid email address."),
+        password: z.string().min(8, "Password must be at least 8 characters long."),
+        confirmPassword: z.string().nonempty("Confirm Password is required."),
+    }).refine((data) => data.password === data.confirmPassword, {
+        message: "Passwords do not match.",
+        path: ["confirmPassword"], 
+    });
+
+
+    try {
+        const formValues = Object.fromEntries(formData.entries());
+        UserValidation.parse(formValues);
+        
+        const inputValues = {
+            firstName: formData.get('firstName') as string,
+            lastName: formData.get('lastName') as string,
+            email: formData.get('email') as string,
+            password: formData.get('password') as string,
+        }
+        
+        const checkUser:{} | null = await prisma.user.findUnique({where:{email:inputValues.email}})
+        if(!checkUser){
+            const salt = await bcrypt.genSalt(10);
+            const hashedPassword = await bcrypt.hash(inputValues.password,salt);
+
+            await prisma.user.create({data:{...inputValues,password:hashedPassword}});
+            
+            return { message: "Registered Successfully" };
+        }else{
+            return {
+                message: '',
+                errors: {email:["This email is already taken."]},
+            };
+        }
+
+    } catch (error) {
+        if (error instanceof z.ZodError) {
+            
+            return {
+                message: '',
+                errors: error.flatten().fieldErrors,
+            };
+        }
+        return {
+            message: '',
+            errors: {root:["Something went wrong. Please try again!"]},
+        };
+    }
+};
+
+type LoginResponse = {
+    message: string,
+    errors?: Record<string, string[] | undefined>,
+    isLoggedIn?: boolean,
+    accessToken?: string,
+    userId?: string
+};
+
+export const login =  async(
+    state:{
+        message: string | null, 
+        errors?: Record<string, string [] | undefined>,
+        isLoggedIn?:boolean,
+        accessToken?: string | null,
+        userId?: string | null
+    },
+        formData:FormData): Promise<LoginResponse> =>  {
+    const inputValidation = z.object({
+        email: z.string().email('Invalid email address'),
+        password: z.string().nonempty('Password is required')
+    })
+    const formValues = {
+        email: formData.get('email') as string,
+        password: formData.get('password') as string
+    }
+
+    try{
+        inputValidation.parse(formValues);
+
+        const checkUser = await prisma.user.findUnique({where:{email:formValues.email}})
+        if(checkUser){
+            const isMatch = await bcrypt.compare(formValues.password,checkUser.password);
+            if(isMatch){
+
+                if(process.env.ACCESS_TOKEN && process.env.REFRESH_TOKEN){
+                    const payload:{id:string} = {id:checkUser.id}
+
+                const accessToken = jwt.sign(payload, process.env.ACCESS_TOKEN, { expiresIn: '2d' });
+
+                    const cookieStore = await cookies();
+                    
+                    cookieStore.set('accessToken', accessToken, {
+                        path: '/', 
+                        httpOnly: true, 
+                        secure: process.env.NODE_ENV === 'production', 
+                        sameSite: 'strict', 
+                        maxAge: 2 * 24 * 60 * 60,
+
+                    });
+
+                    return{
+                        message:'LoggedIn Succesfully',
+                        isLoggedIn:true,
+                        accessToken: accessToken,
+                        userId:checkUser.id
+                    }
+                    
+                }
+                
+            }else{
+                return{
+                    message:'',
+                    isLoggedIn:false,
+                    errors:{password:['Incorrect password']}
+                }
+            }
+        }else{
+            return{
+                message:'',
+                isLoggedIn:false,
+                errors:{email:['Incorrect email']}
+            }
+        }
+        
+
+        return {
+            message: "LoggedIn Successfully",
+            isLoggedIn:false
+        }
+        
+    }catch(error){
+
+        if(error instanceof z.ZodError){
+            return {
+                message: '',
+                isLoggedIn:false,
+                errors: error.flatten().fieldErrors,
+            }
+        }
+
+        return {
+            message: 'An unexpected error occurred. Please try again later.',
+            isLoggedIn:false,
+            errors: {root:['Something went wrong, Please try again!']}
+        }
+    }
+}
diff --git a/utils/blogActions.ts b/utils/blogActions.ts
new file mode 100644
index 0000000..e69de29
diff --git a/utils/db.ts b/utils/db.ts
new file mode 100644
index 0000000..7ddc22a
--- /dev/null
+++ b/utils/db.ts
@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+  return new PrismaClient()
+}
+
+declare const globalThis: {
+  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
+} & typeof global;
+
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
+
+export default prisma
+
+if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma
\ No newline at end of file