diff --git a/public/assets/icons/sign-out.png b/public/assets/icons/sign-out.png
new file mode 100644
index 0000000..2d02c37
Binary files /dev/null and b/public/assets/icons/sign-out.png differ
diff --git a/public/assets/icons/signout.png b/public/assets/icons/signout.png
new file mode 100644
index 0000000..04d7ffc
Binary files /dev/null and b/public/assets/icons/signout.png differ
diff --git a/src/app/(auth)/sign-out/page.jsx b/src/app/(auth)/sign-out/page.jsx
index 01e332c..3a5d3d8 100644
--- a/src/app/(auth)/sign-out/page.jsx
+++ b/src/app/(auth)/sign-out/page.jsx
@@ -9,11 +9,9 @@ import { signOut } from "next-auth/react";
 const SignOut = () => {
   return (
     <div className=" relative h-screen overflow-hidden flex py-10 flex-col items-center justify-center flex-0 flex-auto lg:px-0">
-      <Card className="sm:bg-color-6 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none">
+      <Card className="sm:bg-color-6 bg-color-6 w-full sm:w-96  sm:rounded-2xl rounded-none sm:border-solid border-none">
         <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl text-center sm:text-left">
-            Sign Out
-          </CardTitle>
+          <CardTitle className="text-2xl text-center ">Sign Out</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="flex flex-col text-center w-full space-y-4 mt-1">
@@ -22,10 +20,16 @@ const SignOut = () => {
           <div className="flex flex-col justify-center items-center gap-1 mt-8">
             <Button
               onClick={() => signOut({ callbackUrl: "/sign-in" })}
-              className="w-full font-bold text-md max-w-72"
+              className=" px-5 font-bold text-md  gap-4 "
               type="submit"
             >
               Sign out
+              <Image
+                src="/assets/icons/sign-out.png"
+                width={20}
+                height={20}
+                alt=""
+              />
             </Button>
             <Link
               className={buttonVariants({
@@ -45,23 +49,23 @@ const SignOut = () => {
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[80rem] h-[75rem] left-[-20rem] top-[5rem] opacity-60 mdxs:block lg:block hidden "
+        className="fixed min-[1680px]:hidden -z-10 w-[80rem] h-[75rem] left-[-20rem] top-[5rem] opacity-60 mdxs:block lg:block hidden "
       />
       <Image
         src="/assets/icons/Ellipse3.svg"
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[68.0625rem] mdxs:block h-[56.5rem] left-[-16rem] top-[16rem] opacity-50 lg:block hidden"
+        className="fixed min-[1680px]:hidden -z-10 w-[68.0625rem] mdxs:block h-[56.5rem] left-[-16rem] top-[16rem] opacity-50 lg:block hidden"
       />
       <Image
         src="/assets/icons/Ellipse3.svg"
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[51.5rem] h-[44.5rem] left-[-10rem] mdxs:block top-[24rem] overflow-hidden opacity-50 lg:block hidden"
+        className="fixed min-[1680px]:hidden -z-10 w-[51.5rem] h-[44.5rem] left-[-10rem] mdxs:block top-[24rem] overflow-hidden opacity-50 lg:block hidden"
       />
-      <div className="fixed min-[1536px]:hidden -z-10 w-[15rem] h-[15rem] left-[5rem] bg-color-2 rounded-full blur-2xl bottom-[-10rem] opacity-50 lg:block hidden" />
+      <div className="fixed min-[1680px]:hidden mdxs:block -z-10 w-[15rem] h-[15rem] left-[5rem] bg-color-2 rounded-full blur-2xl bottom-[-10rem] opacity-50 lg:block hidden" />
     </div>
   );
 };
diff --git a/src/app/(auth)/sign-up/page.jsx b/src/app/(auth)/sign-up/page.jsx
index 8cc1f75..a83946a 100644
--- a/src/app/(auth)/sign-up/page.jsx
+++ b/src/app/(auth)/sign-up/page.jsx
@@ -12,23 +12,23 @@ function Page() {
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[80rem] h-[75rem] left-[-20rem] top-[5rem] opacity-60 lg:block hidden "
+        className="fixed min-[1680px]:hidden -z-10 w-[80rem] h-[75rem] left-[-20rem] top-[5rem] opacity-60 lg:block hidden "
       />
       <Image
         src="/assets/icons/Ellipse3.svg"
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[68.0625rem] h-[56.5rem] left-[-16rem] top-[16rem] opacity-50 lg:block hidden"
+        className="fixed  min-[1680px]:hidden -z-10 w-[68.0625rem] h-[56.5rem] left-[-16rem] top-[16rem] opacity-50 lg:block hidden"
       />
       <Image
         src="/assets/icons/Ellipse3.svg"
         alt="Ellipse"
         height={100}
         width={24}
-        className="fixed min-[1536px]:hidden -z-10 w-[51.5rem] h-[44.5rem] left-[-10rem] top-[24rem] overflow-hidden opacity-50 lg:block hidden"
+        className="fixed  min-[1680px]:hidden -z-10 w-[51.5rem] h-[44.5rem] left-[-10rem] top-[24rem] overflow-hidden opacity-50 lg:block hidden"
       />
-      <div className="fixed min-[1536px]:hidden -z-10 w-[15rem] h-[15rem] left-[5rem] bg-color-2 rounded-full blur-2xl bottom-[-10rem] opacity-50 lg:block hidden" />
+      <div className="fixed  min-[1680px]:hidden -z-10 w-[15rem] h-[15rem] left-[5rem] bg-color-2 rounded-full blur-2xl bottom-[-10rem] opacity-50 lg:block hidden" />
     </div>
   );
 }
diff --git a/src/app/(auth)/verifyemail/page.jsx b/src/app/(auth)/verifyemail/page.jsx
index 9e682d0..3ac5050 100644
--- a/src/app/(auth)/verifyemail/page.jsx
+++ b/src/app/(auth)/verifyemail/page.jsx
@@ -82,7 +82,7 @@ const EmailVerificationPage = async (props) => {
       ) : (
         <>
           <div className="fixed min-[1536px]:hidden -z-10 w-[15rem] mdxs:block h-[15rem] left-[5rem] bg-color-2 rounded-full blur-2xl bottom-[-10rem] opacity-50 lg:block hidden" />
-          <Card className="sm:bg-color-6 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none">
+          <Card className="sm:bg-color-6 w-full h-auto sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none">
             <CardHeader className="space-y-1">
               <CardTitle className="text-2xl text-center flex-col justify-center items-center  sm:text-left">
                 Opps.. Something Went Wrong!
diff --git a/src/app/learning-paths/[domain]/[id]/page.jsx b/src/app/learning-paths/[domain]/[id]/page.jsx
index 35e2d27..dbfa2ab 100644
--- a/src/app/learning-paths/[domain]/[id]/page.jsx
+++ b/src/app/learning-paths/[domain]/[id]/page.jsx
@@ -6,6 +6,7 @@ import LearningPathHeader from "@/components/learningPath/LearningPathHeader";
 import LearningPathActions from "@/components/learningPath/LearningPathActions";
 import { calculateProgress } from "@/data/dashboard";
 import { getLearningPathData } from "@/data/learning-paths";
+import Navbar from "@/components/ui/Navbar";
 
 const page = async ({ params }) => {
   const session = await getServerSession(authOptions);
@@ -17,6 +18,7 @@ const page = async ({ params }) => {
     await calculateProgress(learningPathData, session);
   return (
     <>
+      <Navbar />
       <LearningPathHeader
         title={title}
         description={description}
diff --git a/src/app/learning-paths/edit/[id]/page.jsx b/src/app/learning-paths/edit/[id]/page.jsx
index 4d2d435..a3f2b08 100644
--- a/src/app/learning-paths/edit/[id]/page.jsx
+++ b/src/app/learning-paths/edit/[id]/page.jsx
@@ -27,7 +27,7 @@ const getLearningPathData = async (id) => {
 const EditPage = async ({ params }) => {
   const learningPathData = await getLearningPathData(params.id);
   return (
-    <div className="h-auto flex justify-center   items-centers mt-10 ">
+    <div className="h-screen flex justify-center   items-centers mt-10 ">
       <EditForm learningPathData={learningPathData} />
       {/* Background */}
       <Image
diff --git a/src/components/auth/sign-in/login-form.jsx b/src/components/auth/sign-in/login-form.jsx
index 62d2854..d68b574 100644
--- a/src/components/auth/sign-in/login-form.jsx
+++ b/src/components/auth/sign-in/login-form.jsx
@@ -79,7 +79,7 @@ export function LoginForm({ callbackUrl }) {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-8 flex justify-center">
-      <Card className="sm:bg-color-6  sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none w-full">
+      <Card className="sm:bg-color-6  bg-color-6 sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none w-full">
         <CardHeader className="space-y-1">
           <CardTitle className="text-2xl flex justify-center">LOGIN</CardTitle>
         </CardHeader>
diff --git a/src/components/auth/sign-up/register-form.jsx b/src/components/auth/sign-up/register-form.jsx
index 3d87aff..d1e2d78 100644
--- a/src/components/auth/sign-up/register-form.jsx
+++ b/src/components/auth/sign-up/register-form.jsx
@@ -62,81 +62,85 @@ export default function RegisterForm() {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-8">
-      <Card className="sm:bg-color-6 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none ">
+      <Card className="sm:bg-color-6 bg-color-6 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none ">
         <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Create Account</CardTitle>
+          <CardTitle className=" flex justify-center text-2xl">
+            REGISTER
+          </CardTitle>
         </CardHeader>
         <CardContent className="grid gap-4">
-          <div className="grid gap-2">
-            <Input
-              name="name"
-              placeholder="Name"
-              type="text"
-              value={values.name}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              className={cn(
-                `bg-[url('/assets/auth/user.svg')] ${
-                  errors.name && "border-red-500"
-                }`
+          <div className="flex flex-col space-y-4">
+            <div className="flex flex-col  space-y-2">
+              <Input
+                name="name"
+                placeholder="Name"
+                type="text"
+                value={values.name}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn(
+                  `bg-[url('/assets/auth/user.svg')] ${
+                    errors.name && "border-red-500"
+                  }`
+                )}
+              />
+              {errors.name && (
+                <p className="text-red-500 text-sm">{errors.name}</p>
               )}
-            />
-            {errors.name && (
-              <p className="text-red-500 text-sm">{errors.name}</p>
-            )}
-          </div>
-          <div className="grid gap-2">
-            <Input
-              name="email"
-              placeholder="Email"
-              type="email"
-              value={values.email}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              className={cn(
-                `bg-[url('/assets/auth/email.svg')] ${
-                  errors.email && "border-red-500"
-                }`
+            </div>
+            <div className="flex flex-col  space-y-2">
+              <Input
+                name="email"
+                placeholder="Email"
+                type="email"
+                value={values.email}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn(
+                  `bg-[url('/assets/auth/email.svg')] ${
+                    errors.email && "border-red-500"
+                  }`
+                )}
+              />
+              {errors.email && (
+                <p className="text-red-500 text-sm">{errors.email}</p>
               )}
-            />
-            {errors.email && (
-              <p className="text-red-500 text-sm">{errors.email}</p>
-            )}
-          </div>
-          <div className="grid gap-2">
-            <PasswordInput
-              name="password"
-              showPassword={() => setShowPassword((prev) => !prev)}
-              placeholder="Password"
-              type={showPassword ? "text" : "password"}
-              value={values.password}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              className={cn(`${errors.password && "border-red-500"}`)}
-            />
-            {errors.password && (
-              <p className="text-red-500 text-sm">{errors.password}</p>
-            )}
-          </div>
-          <div className="grid gap-2">
-            <PasswordInput
-              name="confirmPassword"
-              placeholder="Confirm Password"
-              type={showConfirmPassword ? "text" : "password"}
-              showPassword={() => setShowConfirmPassword((prev) => !prev)}
-              value={values.confirmPassword}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              className={cn(`${errors.confirmPassword && "border-red-500"}`)}
-            />
-            {errors.confirmPassword && (
-              <p className="text-red-500 text-sm">{errors.confirmPassword}</p>
-            )}
+            </div>
+            <div className="flex flex-col  space-y-2">
+              <PasswordInput
+                name="password"
+                showPassword={() => setShowPassword((prev) => !prev)}
+                placeholder="Password"
+                type={showPassword ? "text" : "password"}
+                value={values.password}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn(`${errors.password && "border-red-500"}`)}
+              />
+              {errors.password && (
+                <p className="text-red-500 text-sm">{errors.password}</p>
+              )}
+            </div>
+            <div className="flex flex-col  space-y-2">
+              <PasswordInput
+                name="confirmPassword"
+                placeholder="Confirm Password"
+                type={showConfirmPassword ? "text" : "password"}
+                showPassword={() => setShowConfirmPassword((prev) => !prev)}
+                value={values.confirmPassword}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn(`${errors.confirmPassword && "border-red-500"}`)}
+              />
+              {errors.confirmPassword && (
+                <p className="text-red-500 text-sm">{errors.confirmPassword}</p>
+              )}
+            </div>
           </div>
         </CardContent>
         <CardFooter className="flex flex-col items-start gap-5">
           <Button className="w-full" type="submit" disabled={isSubmitting}>
-            Create Account
+            REGISTER
             {isSubmitting && <Loader2 className="animate-spin h-4 w-4 ml-2" />}
           </Button>
           <div className="text-xs text-gray-300 text-center w-full">
diff --git a/src/components/learningPath/LearningPathHeader.jsx b/src/components/learningPath/LearningPathHeader.jsx
index 326ac50..f44cbb6 100644
--- a/src/components/learningPath/LearningPathHeader.jsx
+++ b/src/components/learningPath/LearningPathHeader.jsx
@@ -14,7 +14,7 @@ const LearningPathHeader = ({
 }) => {
   return (
     <>
-      <div className="relative h-full min-w-screen max-w-[180rem] ">
+      <div className="relative h-full min-w-screen max-w-[180rem] mt-2 mx-2 ">
         <div
           className="absolute inset-0 h-[40rem] bg-left-top -top-20  bg-no-repeat bg-blend-normal -z-10"
           style={{
diff --git a/src/components/learningPath/edit/EditForm.jsx b/src/components/learningPath/edit/EditForm.jsx
index 280e2fc..62acbdb 100644
--- a/src/components/learningPath/edit/EditForm.jsx
+++ b/src/components/learningPath/edit/EditForm.jsx
@@ -99,7 +99,7 @@ const EditForm = ({ learningPathData }) => {
             className="space-y-2 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none"
             onSubmit={handleSubmit}
           >
-            <Card className="sm:bg-color-6 w-full flexy sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none">
+            <Card className="sm:bg-color-6 bg-color-6 w-full sm:w-96 sm:rounded-2xl rounded-none sm:border-solid border-none">
               <CardHeader className="space-y-1">
                 <Input
                   name="title"
diff --git a/src/components/ui/input-password.jsx b/src/components/ui/input-password.jsx
index 28c69b5..1445941 100644
--- a/src/components/ui/input-password.jsx
+++ b/src/components/ui/input-password.jsx
@@ -9,8 +9,7 @@ const PasswordInput = React.forwardRef(
         <input
           type={type}
           className={cn(
-            `flex h-9 pr-12 pl-4 w-full text-color-2 peer placeholder:text-color-2 border-white border-b-2  bg-transparent py-1 text-md shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus:rounded-lg transition-all disabled:cursor-not-allowed disabled:opacity-50`,
-            className
+            `flex h-9 pr-12 pl-4 w-full text-color-2 peer placeholder:white  border-white border-b-2  bg-transparent py-1 text-md shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus:rounded-lg transition-all disabled:cursor-not-allowed disabled:opacity-50 focus:text-white`
           )}
           ref={ref}
           {...props}
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index ffc3cc3..6d127e5 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
       <input
         type={type}
         className={cn(
-          `flex-1 h-9 pr-12 pl-4 md:min-w-[50rem] xl:min-w-[70rem]  bg-no-repeat bg-[position:95%] bg-[length:1.5rem] text-white peer placeholder:text-white border-white border-b-2 bg-transparent py-1 text-md shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus:rounded-lg transition-all disabled:cursor-not-allowed disabled:opacity-50`,
+          `flex-1 h-9 pr-12 pl-4    bg-no-repeat bg-[position:95%] bg-[length:1.5rem] text-white peer placeholder:text-white border-white border-b-2 bg-transparent py-1 text-md shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus:rounded-lg transition-all disabled:cursor-not-allowed disabled:opacity-50`,
           className
         )}
         ref={ref}