diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
index 449d2b6..d0bb769 100644
--- a/client/src/pages/About.jsx
+++ b/client/src/pages/About.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+
 import { MetaData } from '../components/MetaData'
 
 export const About = () => {
diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
index 1172ed6..abde5ef 100644
--- a/client/src/pages/Login.jsx
+++ b/client/src/pages/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import  { useEffect, useState } from 'react'
 import { MetaData } from '../components/MetaData'
 import { AiOutlineMail, AiOutlineUnlock, AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai'
 import { Link, useNavigate } from 'react-router-dom'
@@ -47,26 +47,26 @@ export const Login = () => {
       <div className='bg-gray-950 min-h-screen pt-14 md:px-20 px-3   text-white'>
 
 
-        <div className=' flex justify-center w-full items-start pt-14'>
+        <div className=' flex justify-center w-full items-start pt-10'> 
           <form onSubmit={loginHandler} className='flex  flex-col md:w-1/3 shadow-gray-700  w-full md:mx-0 mx-8' action="">
 
             <div className='md:px-10 px-2 py-6 w-full flex flex-col gap-4'>
               <div className='text-center'>
-                <p className='text-4xl  font-medium'>Login</p>
+                <p className='text-4xl  font-medium '>Login</p>
               </div>
 
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 px-2'>
+              <div className=' flex justify-center items-center mt-24 border-b-2 border-gray-600'>
+                <div className='text-gray-600 bg-[#030712] px-2'>
                   <AiOutlineMail size={20} />
                 </div>
-                <input onChange={(e) => setEmail(e.target.value)} value={email} required placeholder='Email' type="text" className='outline-none bold-placeholder  w-full text-black px-1 pr-3 py-2' />
+                <input onChange={(e) => setEmail(e.target.value)} value={email} required placeholder='Email' type="text" className='outline-none bold-placeholder  w-full text-white px-1 pr-3 py-2 bg-[#030712]' />
               </div>
 
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 px-2'>
+              <div className=' flex justify-center items-center border-b-2 border-gray-600'>
+                <div className='text-gray-600 bg-[#030712] px-2'>
                   <AiOutlineUnlock size={20} />
                 </div>
-                <input onChange={(e) => setPassword(e.target.value)} value={password} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' />
+                <input onChange={(e) => setPassword(e.target.value)} value={password} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]' />
                 <div className='text-gray-600 px-2 cursor-pointer' >
                   {eyeTog ?
                     <AiOutlineEye size={20} onClick={() => setEyeTog(!eyeTog)} /> : <AiOutlineEyeInvisible size={20} onClick={() => setEyeTog(!eyeTog)} />
@@ -74,10 +74,10 @@ export const Login = () => {
                 </div>
               </div>
               <div>
-              <button disabled={loading || !email || !password} className='blueCol px-8 w-full py-2 flex justify-center items-center font-semibold' >{loading ? <TbLoader2 className='animate-spin' size={24} /> : "Login"}</button>
+              <button disabled={loading || !email || !password} className='blueCol px-8 w-full py-2 flex justify-center items-center font-semibold rounded-lg' >{loading ? <TbLoader2 className='animate-spin' size={24} /> : "Login"}</button>
               </div>
               <div className='text-center text-sm pt-2'>
-                <p>Don't have an account, <Link to="/register" className='text-yellow-400 underline'>Register</Link> here. </p>
+                <p className='text-gray-300'> Don't have an account, <Link to="/register" className='text-yellow-400 underline'>Register</Link> here. </p>
               </div>
 
             </div>
diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx
index f7d0b88..13a8239 100644
--- a/client/src/pages/Register.jsx
+++ b/client/src/pages/Register.jsx
@@ -1,36 +1,37 @@
-import React, { useState, useEffect } from 'react'
-import { MetaData } from '../components/MetaData'
-import { AiOutlineMail, AiOutlineUnlock, AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai'
-import { MdPermIdentity, MdOutlineFeaturedPlayList } from 'react-icons/md'
-import { BsFileEarmarkText } from 'react-icons/bs'
-import { CgProfile } from 'react-icons/cg'
-import { Link, useNavigate } from 'react-router-dom'
-import { TbLoader2 } from 'react-icons/tb'
-import { registerUser } from '../actions/UserActions'
-import { useDispatch, useSelector } from 'react-redux'
-
-
+import React, { useState, useEffect, useRef } from "react";
+import { MetaData } from "../components/MetaData";
+import {
+  AiOutlineMail,
+  AiOutlineUnlock,
+  AiOutlineEyeInvisible,
+  AiOutlineEye,
+} from "react-icons/ai";
+import { MdPermIdentity, MdOutlineFeaturedPlayList } from "react-icons/md";
+import { BsFileEarmarkText } from "react-icons/bs";
+import { CgProfile } from "react-icons/cg";
+import { Link, useNavigate } from "react-router-dom";
+import { TbLoader2 } from "react-icons/tb";
+import { registerUser } from "../actions/UserActions";
+import { useDispatch, useSelector } from "react-redux";
 
 export const Register = () => {
+  const { loading, isLogin } = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
-  const { loading, isLogin } = useSelector(state => state.user)
-  const dispatch = useDispatch()
-  const navigate = useNavigate()
-
-  const [eyeTog, setEyeTog] = useState(false)
+  const [eyeTog, setEyeTog] = useState(false);
 
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [skills, setSkills] = useState("");
+  const skillsRef = useRef(null);
 
-  const [avatar, setAvatar] = useState("")
-  const [avatarName, setAvatarName] = useState("")
-
-  const [resume, setResume] = useState("")
-  const [resumeName, setResumeName] = useState("")
-
+  const [avatar, setAvatar] = useState("");
+  const [avatarName, setAvatarName] = useState("");
 
+  const [resume, setResume] = useState("");
+  const [resumeName, setResumeName] = useState("");
 
   const avatarChange = (e) => {
     if (e.target.name === "avatar") {
@@ -38,15 +39,13 @@ export const Register = () => {
       reader.onload = () => {
         if (reader.readyState === 2) {
           setAvatar(reader.result);
-          setAvatarName(e.target.files[0].name)
+          setAvatarName(e.target.files[0].name);
         }
       };
 
       reader.readAsDataURL(e.target.files[0]);
     }
-  }
-
-
+  };
 
   const resumeChange = (e) => {
     if (e.target.name === "resume") {
@@ -54,157 +53,234 @@ export const Register = () => {
       reader.onload = () => {
         if (reader.readyState === 2) {
           setResume(reader.result);
-          setResumeName(e.target.files[0].name)
+          setResumeName(e.target.files[0].name);
         }
       };
 
       reader.readAsDataURL(e.target.files[0]);
     }
-  }
-
+  };
 
   const registerHandler = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    const skillsArr = skills.split(",")
+    const skillsArr = skills.split(",");
     const data = {
       name,
       email,
       password,
       avatar,
       resume,
-      skills: skillsArr
-    }
-
-    dispatch(registerUser(data))
-
-    setName("")
-    setEmail("")
-    setPassword("")
-    setAvatar("")
-    setAvatarName("")
-    setResume("")
-    setResumeName("")
-    setSkills("")
-
-  }
+      skills: skillsArr,
+    };
 
+    dispatch(registerUser(data));
 
+    setName("");
+    setEmail("");
+    setPassword("");
+    setAvatar("");
+    setAvatarName("");
+    setResume("");
+    setResumeName("");
+    setSkills("");
+  };
 
   useEffect(() => {
     if (isLogin) {
-      navigate("/")
+      navigate("/");
     }
-  }, [isLogin])
+  }, [isLogin]);
 
   return (
     <>
       <MetaData title="Register" />
-      <div className='bg-gray-950 min-h-screen pt-14 md:px-20 px-3  text-white'>
-        <div className=' flex justify-center w-full items-start pt-6'>
-          <form onSubmit={registerHandler} className='flex flex-col md:w-1/3 shadow-gray-700  w-full md:mx-0 mx-8' action="">
-
-            <div className='md:px-10 px-2 pt-4 pb-20 w-full flex flex-col gap-4'>
-              <div className='text-center'>
-                <p className='text-4xl  font-medium'>Register</p>
+      <div className="bg-gray-950 min-h-screen pt-14 md:px-20 px-3  text-white">
+        <div className=" flex justify-center w-full items-start pt-6">
+          <form
+            onSubmit={registerHandler}
+            className="flex flex-col md:w-1/3 shadow-gray-700  w-full md:mx-0 mx-8"
+            action=""
+          >
+            <div className="md:px-10 px-2 pt-4 pb-20 w-full flex flex-col gap-4">
+              <div className="text-center">
+                <p className="text-4xl  font-medium">Register</p>
               </div>
 
               {/* Name */}
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 px-2'>
+              <div className=" flex justify-center items-center border-b-2 border-gray-600">
+                <div className="text-gray-600 bg-[#030712] px-2">
                   <MdPermIdentity size={20} />
                 </div>
-                <input value={name} onChange={(e) => setName(e.target.value)} required placeholder='Full name' type="text" className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' />
+                <input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                  placeholder="Full name"
+                  type="text"
+                  className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]"
+                />
               </div>
 
-
               {/* Mail */}
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 px-2'>
+              <div className=" flex justify-center items-center border-b-2 border-gray-600">
+                <div className="text-gray-600 bg-[#030712] px-2">
                   <AiOutlineMail size={20} />
                 </div>
-                <input value={email} onChange={(e) => setEmail(e.target.value)} required placeholder='Email' type="email" className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' />
+                <input
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  placeholder="Email"
+                  type="email"
+                  className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]"
+                />
               </div>
 
               {/* Password */}
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 px-2'>
+              <div className=" flex justify-center items-center border-b-2 border-gray-600">
+                <div className="text-gray-600 bg-[#030712] px-2">
                   <AiOutlineUnlock size={20} />
                 </div>
-                <input value={password} onChange={(e) => setPassword(e.target.value)} required placeholder='Password' type={eyeTog ? "text" : "password"} className='outline-none bold-placeholder w-full text-black px-1 pr-3 py-2' />
-                <div className='text-gray-600 px-2 cursor-pointer' >
-                  {eyeTog ?
-                    <AiOutlineEye size={20} onClick={() => setEyeTog(!eyeTog)} /> : <AiOutlineEyeInvisible size={20} onClick={() => setEyeTog(!eyeTog)} />
-                  }
+                <input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  placeholder="Password"
+                  type={eyeTog ? "text" : "password"}
+                  className="outline-none bold-placeholder w-full text-white px-1 pr-3 py-2 bg-[#030712]"
+                />
+                <div className="text-gray-600 px-2 cursor-pointer">
+                  {eyeTog ? (
+                    <AiOutlineEye
+                      size={20}
+                      onClick={() => setEyeTog(!eyeTog)}
+                    />
+                  ) : (
+                    <AiOutlineEyeInvisible
+                      size={20}
+                      onClick={() => setEyeTog(!eyeTog)}
+                    />
+                  )}
                 </div>
               </div>
 
               {/* Profile */}
               <div>
-                <div className='bg-white flex justify-center items-center'>
-                  <div className='text-gray-600 px-2'>
-                   {avatar.length === 0 ? <CgProfile size={20} />
-                   : <img src={avatar} className='w-[3em] h-[2.5em]'/> 
-                   }
+                <div className=" flex justify-center items-center border-b-2 border-gray-600">
+                  <div className="text-gray-600 bg-[#030712] px-2">
+                    {avatar.length === 0 ? (
+                      <CgProfile size={20} />
+                    ) : (
+                      <img src={avatar} className="w-[3em] h-[2.5em]" />
+                    )}
                   </div>
-                  <label htmlFor='avatar' className='outline-none w-full cursor-pointer text-black px-1 pr-3 py-2 '>
-                    {avatarName.length === 0 ? <span className='text-gray-500 font-medium'>Select Profile Pic...</span>
-                      : avatarName}
+                  <label
+                    htmlFor="avatar"
+                    className="outline-none w-full cursor-pointer text-white px-1 pr-3 py-2 "
+                  >
+                    {avatarName.length === 0 ? (
+                      <span className="text-gray-500 font-medium">
+                        Select Profile Pic...
+                      </span>
+                    ) : (
+                      avatarName
+                    )}
                   </label>
-                  <input id='avatar' name='avatar' required
+                  <input
+                    id="avatar"
+                    name="avatar"
+                    required
                     onChange={avatarChange}
-                    placeholder='Profile' accept="image/*" type="file" className='outline-none  w-full hidden text-black px-1 pr-3 py-2' />
-
-
+                    placeholder="Profile"
+                    accept="image/*"
+                    type="file"
+                    className="outline-none  w-full hidden text-white px-1 pr-3 py-2"
+                  />
                 </div>
-                <p className='bg-gray-950 text-white text-xs'>Please select Image file</p>
+                <p className="bg-gray-950 text-white text-xs">
+                  Please select Image file
+                </p>
               </div>
 
-
               {/* Resume */}
               <div>
-                <div className='bg-white flex justify-center items-center'>
-                  <div className='text-gray-600 px-2'>
+                <div className=" flex justify-center items-center border-b-2 border-gray-600">
+                  <div className="text-gray-600 bg-[#030712] px-2">
                     <BsFileEarmarkText size={20} />
                   </div>
-                  <label className='outline-none w-full text-black px-1 pr-3 py-2' htmlFor="resume">
-                    {resumeName.length === 0 ? <span className='text-gray-500 cursor-pointer font-medium'>Select Resume...</span> : resumeName}
+                  <label
+                    className="outline-none w-full text-white px-1 pr-3 py-2"
+                    htmlFor="resume"
+                  >
+                    {resumeName.length === 0 ? (
+                      <span className="text-gray-500 cursor-pointer font-medium">
+                        Select Resume...
+                      </span>
+                    ) : (
+                      resumeName
+                    )}
                   </label>
-                  <input required
+                  <input
+                    required
                     onChange={resumeChange}
-                    placeholder='Resume' id='resume' name='resume' accept="image/*" type="file" className='outline-none hidden w-full text-black px-1 pr-3 py-2' />
+                    placeholder="Resume"
+                    id="resume"
+                    name="resume"
+                    accept="image/*"
+                    type="file"
+                    className="outline-none hidden w-full text-white px-1 pr-3 py-2 bg-[#030712]"
+                  />
                 </div>
-                <p className='bg-gray-950 text-white text-xs'>Please select Image file</p>
+                <p className="bg-gray-950 text-white text-xs">
+                  Please select Image file
+                </p>
               </div>
 
               {/* Skills */}
-              <div className='bg-white flex justify-center items-center'>
-                <div className='text-gray-600 md:pb-12 pb-8 px-2'>
+              <div
+                className="bg-[#030712] border-2 border-gray-600 rounded-md flex justify-center items-center"
+                onClick={() => skillsRef.current?.focus()}
+              >
+                <div className="text-gray-600 md:pb-12 pb-8 px-2 ">
                   <MdOutlineFeaturedPlayList size={20} />
                 </div>
-                <textarea value={skills} onChange={(e) => setSkills(e.target.value)} placeholder='Skills' type="text" className='outline-none w-full text-black bold-placeholder px-1 pr-3 py-2' />
+                <textarea
+                  ref={skillsRef}
+                  value={skills}
+                  onChange={(e) => setSkills(e.target.value)}
+                  placeholder="Skills"
+                  type="text"
+                  className="outline-none w-full text-white bold-placeholder px-1 pr-3 py-2 bg-[#030712] "
+                />
               </div>
 
-
               <div>
-                <button disabled={loading} className='blueCol flex justify-center items-center px-8 w-full py-2 font-semibold' >
-                  {loading ? <TbLoader2 className='animate-spin' size={24} /> : "Register"}</button>
+                <button
+                  disabled={loading}
+                  className="blueCol flex justify-center items-center px-8 w-full py-2 font-semibold"
+                >
+                  {loading ? (
+                    <TbLoader2 className="animate-spin" size={24} />
+                  ) : (
+                    "Register"
+                  )}
+                </button>
               </div>
 
-              <div className='text-center text-sm pt-2'>
-                <p>Already have a account,<Link to="/login" className='text-yellow-400 underline'>Login</Link> here. </p>
+              <div className="text-center text-sm pt-2">
+                <p>
+                  Already have a account,
+                  <Link to="/login" className="text-yellow-400 underline">
+                    Login
+                  </Link>{" "}
+                  here.{" "}
+                </p>
               </div>
-
             </div>
-
-
-
           </form>
         </div>
-
-
       </div>
-
     </>
-  )
-}
+  );
+};