diff --git a/src/components/profile/AboutMe.tsx b/src/components/profile/AboutMe.tsx
index 4c67013e..3b7a7530 100644
--- a/src/components/profile/AboutMe.tsx
+++ b/src/components/profile/AboutMe.tsx
@@ -14,60 +14,54 @@ const ProfileAboutMe = ({
   aboutMe: string;
   isOwner: boolean;
 }) => {
-  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const hasAboutMe = !!aboutMe?.trim();
 
-  const title =
-    aboutMe.length === 0
-      ? SHEETS.aboutMe.title
-      : SHEETS.aboutMe.title.replace('Add', 'Edit');
+  // Improved title logic
+  const sheetTitle = hasAboutMe 
+    ? SHEETS.aboutMe.title.replace('Add', 'Edit')
+    : SHEETS.aboutMe.title;
 
-  const handleClose = () => {
-    setIsSheetOpen(false);
-  };
-  const handleOpen = () => {
-    setIsSheetOpen(true);
-  };
+  const handleClose = () => setIsSheetOpen(false);
+  const handleOpen = () => setIsSheetOpen(true);
 
   return (
     <>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center mb-4">
         <h3 className="font-bold text-2xl">About Me</h3>
         {isOwner && (
           <Button
-            variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            variant="outline"
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors"
             onClick={handleOpen}
+            aria-label={hasAboutMe ? "Edit about me" : "Add about me"}
           >
-            <Pencil height={16} width={16} /> Edit
+            <Pencil size={16} aria-hidden="true" />
+            <span>{hasAboutMe ? 'Edit' : 'Add'}</span>
           </Button>
         )}
       </div>
-      {!aboutMe && (
+
+      {!hasAboutMe ? (
         <ProfileEmptyContainers
           isOwner={isOwner}
           buttonText="Add About Me"
           handleClick={handleOpen}
-          title={
-            isOwner ? 'You haven’t added an about me yet' : 'No About Me added.'
-          }
-          description={
-            isOwner
-              ? 'Share a brief introduction to let companies know who you are.'
-              : ''
-          }
+          title={isOwner ? 'You haven’t added an about me yet' : 'No About Me added.'}
+          description={isOwner ? 'Share a brief introduction to let companies know who you are.' : undefined}
           Icon={SquareUserRound}
         />
-      )}
-      {aboutMe && (
+      ) : (
         <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
-          <p className="text-base leading-normal">{aboutMe}</p>
+          <p className="text-base leading-normal whitespace-pre-line">{aboutMe}</p>
         </div>
       )}
+
       {isOwner && (
         <SheetWrapper
           isOpen={isSheetOpen}
           handleClose={handleClose}
-          title={title}
+          title={sheetTitle}
           description={SHEETS.aboutMe.description}
         >
           <AboutMeForm handleClose={handleClose} aboutMe={aboutMe} />
@@ -77,4 +71,4 @@ const ProfileAboutMe = ({
   );
 };
 
-export default ProfileAboutMe;
+export default ProfileAboutMe;
\ No newline at end of file
diff --git a/src/layouts/footer.tsx b/src/layouts/footer.tsx
index eaf3f7af..ab36ce8a 100644
--- a/src/layouts/footer.tsx
+++ b/src/layouts/footer.tsx
@@ -4,31 +4,35 @@ import Link from 'next/link';
 
 const Footer = () => {
   return (
-    <footer className=" md:h-20 h-40 dark:bg-[#020817] relative w-full p-3 border-t dark:border-t-[#1E293B] border-t-[#E2E8F0] flex md:flex-row flex-col items-center md:justify-between justify-around md:px-14 px-3">
-      <ul className="flex items-center text-sm dark:text-[#94A3B8] text-[#64748B] font-medium">
+    <footer className="w-full p-3 border-t dark:border-t-[#1E293B] border-t-[#E2E8F0] dark:bg-[#020817] flex md:flex-row flex-col items-center justify-between md:h-20 gap-4 px-4 md:px-8">
+      <ul className="flex items-center text-sm text-[#64748B] dark:text-[#94A3B8] font-medium gap-2">
         {footerItems.map((item, i) => (
-          <li key={i} className="px-2">
-            <Link href={item.href}>{item.label}</Link>
+          <li key={i}>
+            <Link href={item.href} className="px-2 hover:text-[#475569] dark:hover:text-slate-300 transition-colors">
+              {item.label}
+            </Link>
           </li>
         ))}
       </ul>
-      <div className="flex items-center md:flex-row flex-col-reverse">
-        <p className="text-[#94A3B8]">© 2024 100xJobs. All rights reserved.</p>
-        <div className="flex items-center ml-4 md:mb-0 mb-3 text-[#64748B]">
+      <div className="flex items-center md:gap-4 gap-3">
+        <div className="flex items-center gap-2 text-[#64748B] dark:text-slate-400">
           {socials.map((social, i) => (
             <Link
               key={i}
               href={social.href}
-              className="p-3 rounded-full border mx-2 hover:bg-slate-50 duration-150 ease-in-out transition"
-              aria-label={`${social.icon}-logo`}
+              className="p-2 rounded-full border hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-all hover:scale-105"
+              aria-label={`Visit our ${social.icon}`}
             >
               <Icon icon={social.icon} className="w-4 h-4" />
             </Link>
           ))}
         </div>
+        <p className="text-[#64748B] dark:text-slate-400 text-sm">
+          © 2024 100xJobs. All rights reserved.
+        </p>
       </div>
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file