diff --git a/apps/career/src/components/common/IntersestGrid.tsx b/apps/career/src/components/common/IntersestGrid.tsx
index 7505a1fe..e6ce9270 100644
--- a/apps/career/src/components/common/IntersestGrid.tsx
+++ b/apps/career/src/components/common/IntersestGrid.tsx
@@ -12,7 +12,7 @@ const InterestGrid = ({ options, selectedInterests, onInterestChange }) => {
           key={option.value}
           className={`mb-2 inline-block w-24 overflow-hidden rounded-full px-2 py-1 font-sans ${
             selectedInterests.includes(option.value)
-              ? "bg-light-card3 dark:bg-dark-card2" // Selected style
+              ? "bg-light-main dark:bg-dark-main" // Selected style
               : "bg-light-card2 dark:bg-dark-card1" // Unselected style
           }`}
           onClick={() => handleInterestClick(option.value)}
diff --git a/apps/career/src/components/common/JobPostButton.tsx b/apps/career/src/components/common/JobPostButton.tsx
index 80e5d37b..dcba7cb4 100644
--- a/apps/career/src/components/common/JobPostButton.tsx
+++ b/apps/career/src/components/common/JobPostButton.tsx
@@ -9,7 +9,7 @@ const JobPostButton = () => {
   return (
     <button
       onClick={handleClick}
-      className="mx-4 rounded-lg bg-light-main px-2 text-white"
+      className="mx-4 cursor-pointer rounded-lg rounded-lg border-transparent bg-light-main bg-light-main px-2 text-center text-xl capitalize text-white text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
     >
       Post a Job
     </button>
diff --git a/apps/career/src/components/jobdetail/JobContent.tsx b/apps/career/src/components/jobdetail/JobContent.tsx
index 6befc734..86ad3984 100644
--- a/apps/career/src/components/jobdetail/JobContent.tsx
+++ b/apps/career/src/components/jobdetail/JobContent.tsx
@@ -67,7 +67,7 @@ const JobContent = ({ job }: { job: JobProps }) => {
         <div className="grid grid-cols-12">
           <div className="col-span-4 col-start-9 mt-8 space-y-2 p-6">
             <div
-              className="btn w-full cursor-pointer border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+              className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
               onClick={() => {
                 if (job && job.apply) {
                   window.open(job.apply, "_blank")
diff --git a/apps/career/src/components/jobdetail/JobOverview.tsx b/apps/career/src/components/jobdetail/JobOverview.tsx
index 995b6869..c0e69f23 100644
--- a/apps/career/src/components/jobdetail/JobOverview.tsx
+++ b/apps/career/src/components/jobdetail/JobOverview.tsx
@@ -72,7 +72,7 @@ const JobOverview = ({ job }: { job: JobProps }) => {
               }
               return (
                 <li key={detail.key}>
-                  <div className="mt-6 flex items-center">
+                  <div className="mt-6 flex items-center truncate">
                     {detail.icon && <i>{detail.icon}</i>}
                     <div className="ml-4">
                       <h2 className="mb-2 text-2xl font-bold">
@@ -87,7 +87,7 @@ const JobOverview = ({ job }: { job: JobProps }) => {
           </ul>
           <div className="mt-8 space-y-2">
             <div
-              className="btn w-full cursor-pointer border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+              className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
               onClick={() => {
                 if (job && job.apply) {
                   window.open(job.apply, "_blank")
diff --git a/apps/career/src/components/joblist/PostRegisterProfile.tsx b/apps/career/src/components/joblist/PostRegisterProfile.tsx
index 9da20415..1bb7e3d4 100644
--- a/apps/career/src/components/joblist/PostRegisterProfile.tsx
+++ b/apps/career/src/components/joblist/PostRegisterProfile.tsx
@@ -129,7 +129,7 @@ const PostRegisterProfile: React.FC<ProfileComponentProps> = ({
         <div className="mt-8 space-y-2">
           <button
             onClick={toggleModal}
-            className="btn w-full border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+            className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
           >
             Edit Profile
           </button>
diff --git a/apps/career/src/components/joblist/PreRegisterProfile.tsx b/apps/career/src/components/joblist/PreRegisterProfile.tsx
index ab38e16e..4ef9abe7 100644
--- a/apps/career/src/components/joblist/PreRegisterProfile.tsx
+++ b/apps/career/src/components/joblist/PreRegisterProfile.tsx
@@ -33,7 +33,7 @@ const PreRegisterProfile: React.FC<ProfileComponentProps> = ({
         <div className="mt-8 space-y-2">
           <button
             onClick={toggleModal}
-            className="btn w-full border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+            className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
           >
             Register Profile
           </button>