diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index f628bc1..1f2979c 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -16,6 +16,7 @@ const nextConfig: NextConfig = {
         hostname: "**",
       },
     ],
+    qualities: [25, 50, 75, 80, 90, 100],
   },
 };
 
diff --git a/frontend/public/muie.jpeg b/frontend/public/muie.jpeg
new file mode 100644
index 0000000..70151eb
Binary files /dev/null and b/frontend/public/muie.jpeg differ
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index e3e39f5..6e40157 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -4,7 +4,7 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #1F2F40;
+  background-color: #f8f8f8;
 }
 
 @custom-variant dark (&:is(.dark *));
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 62256ad..d4dda8e 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -160,185 +160,105 @@ export default function HomePage() {
         </section>
 
         {/* Search Bar Section */}
-        <section className="bg-white py-16">
+        <section className="py-16">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
             <div className="mb-8">
-              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-0 mb-6">
-                <div className="flex-1 relative">
-                  <svg className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                  <input
-                    type="text"
-                    placeholder={t('home.search.placeholder')}
-                    className="w-full h-14 pl-12 pr-4 border border-gray-300 rounded-l-lg rounded-r-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white shadow-sm"
-                  />
-                </div>
-                <Button className="bg-primary hover:bg-primary/90 text-white h-14 px-16 rounded-r-lg rounded-l-none font-semibold flex items-center justify-center gap-3 shadow-md hover:shadow-lg transition-all -ml-px min-w-[220px] text-2xl">
-                  <FilterIcon />
-                  {t('home.search.filter')}
-                </Button>
+              <div className="mb-6 relative">
+                <svg className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <input
+                  type="text"
+                  placeholder={t('home.search.placeholder')}
+                  className="w-full h-14 pl-12 pr-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white shadow-sm"
+                />
               </div>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
-                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative">
-                  <button
-                    onClick={() => toggleFilter('contractType')}
-                    className="flex items-center justify-between w-full p-5"
-                  >
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-stretch">
+                {/* Contract Type - Static Expanded */}
+                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
+                  <div className="flex items-center justify-between w-full p-5 pb-2">
                     <span className="text-base font-bold text-gray-900">{t('home.search.contractType')}</span>
-                    <svg
-                      className={`w-5 h-5 text-gray-600 transition-transform ${openFilters.contractType ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </button>
-                  {openFilters.contractType && (
-                    <motion.div
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-lg z-50 space-y-3 px-5 py-5"
-                    >
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.pj')}</span>
-                      </label>
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.clt')}</span>
-                      </label>
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.freelancer')}</span>
-                      </label>
-                    </motion.div>
-                  )}
+                  </div>
+                  <div className="space-y-3 px-5 pb-5 pt-2 flex-1">
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.pj')}</span>
+                    </label>
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.clt')}</span>
+                    </label>
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.freelancer')}</span>
+                    </label>
+                  </div>
                 </div>
 
-                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative">
-                  <button
-                    onClick={() => toggleFilter('workMode')}
-                    className="flex items-center justify-between w-full p-5"
-                  >
+                {/* Work Mode - Static Expanded */}
+                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
+                  <div className="flex items-center justify-between w-full p-5 pb-2">
                     <span className="text-base font-bold text-gray-900">{t('home.search.workMode')}</span>
-                    <svg
-                      className={`w-5 h-5 text-gray-600 transition-transform ${openFilters.workMode ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </button>
-                  {openFilters.workMode && (
-                    <motion.div
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-lg z-50 space-y-3 px-5 py-5"
-                    >
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.homeOffice')}</span>
-                      </label>
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.presencial')}</span>
-                      </label>
-                      <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
-                        <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
-                        <span>{t('home.search.hybrid')}</span>
-                      </label>
-                    </motion.div>
-                  )}
+                  </div>
+                  <div className="space-y-3 px-5 pb-5 pt-2 flex-1">
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.homeOffice')}</span>
+                    </label>
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.presencial')}</span>
+                    </label>
+                    <label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
+                      <input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
+                      <span>{t('home.search.hybrid')}</span>
+                    </label>
+                  </div>
                 </div>
 
-                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative">
-                  <button
-                    onClick={() => toggleFilter('location')}
-                    className="flex items-center justify-between w-full p-5"
-                  >
+                {/* Location - Static Expanded */}
+                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
+                  <div className="flex items-center justify-between w-full p-5 pb-2">
                     <span className="text-base font-bold text-gray-900">{t('home.search.location')}</span>
-                    <svg
-                      className={`w-5 h-5 text-gray-600 transition-transform ${openFilters.location ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </button>
-                  {openFilters.location && (
-                    <motion.div
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-lg z-50 px-5 py-5"
-                    >
-                      <div className="flex items-stretch w-full">
-                        <input
-                          type="text"
-                          placeholder="Digite a cidade e estado"
-                          className="flex-1 border border-gray-300 rounded-l-lg rounded-r-none px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
-                        />
-                        <button type="button" className="bg-orange-500 hover:bg-orange-600 rounded-r-lg rounded-l-none flex items-center justify-center px-4 h-12" title="Enviar" style={{marginLeft: 0}}>
-                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="white" className="w-5 h-5">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M12 5l7 7-7 7" />
-                          </svg>
-                        </button>
-                      </div>
-                    </motion.div>
-                  )}
+                  </div>
+                  <div className="px-5 pb-5 pt-2 flex-1 flex items-center">
+                    <input
+                      type="text"
+                      placeholder="Cidade e estado"
+                      className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
+                    />
+                  </div>
                 </div>
 
-                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative">
-                  <button
-                    onClick={() => toggleFilter('salary')}
-                    className="flex items-center justify-between w-full p-5"
-                  >
+                {/* Salary - Static Expanded */}
+                <div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
+                  <div className="flex items-center justify-between w-full p-5 pb-2">
                     <span className="text-base font-bold text-gray-900">{t('home.search.salary')}</span>
-                    <svg
-                      className={`w-5 h-5 text-gray-600 transition-transform ${openFilters.salary ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </button>
-                  {openFilters.salary && (
-                    <motion.div
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-lg z-50 px-5 py-5"
-                    >
-                      <div className="flex items-stretch w-full">
-                        <input
-                          type="text"
-                          placeholder="Digite a pretensão salarial"
-                          className="flex-1 border border-gray-300 rounded-l-lg rounded-r-none px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
-                        />
-                        <button type="button" className="bg-orange-500 hover:bg-orange-600 rounded-r-lg rounded-l-none flex items-center justify-center px-4 h-12" title="Enviar" style={{marginLeft: 0}}>
-                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="white" className="w-5 h-5">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M12 5l7 7-7 7" />
-                          </svg>
-                        </button>
-                      </div>
-                    </motion.div>
-                  )}
+                  </div>
+                  <div className="px-5 pb-5 pt-2 flex-1 flex items-center">
+                    <input
+                      type="text"
+                      placeholder="R$ 0,00"
+                      className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
+                    />
+                  </div>
                 </div>
+
+                {/* Filter Button - Unified */}
+                <Button className="bg-primary hover:bg-primary/90 text-white h-full min-h-[200px] lg:min-h-0 rounded-xl font-bold text-3xl shadow-md hover:shadow-lg transition-all flex flex-col gap-3 items-center justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="size-12">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+                  </svg>
+                  {t('home.search.filter')}
+                </Button>
               </div>
             </div>
           </div>
         </section>
 
         {/* Featured Jobs */}
-        <section className="bg-white py-12">
+        <section className="py-12">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
             <div className="flex justify-between items-center mb-8">
               <h2 className="text-3xl font-bold text-gray-900">{t('home.featuredJobs.title')}</h2>
@@ -360,59 +280,60 @@ export default function HomePage() {
                       animate={{ opacity: 1, y: 0 }}
                       transition={{ duration: 0.3 }}
                     >
-                      <Card className="hover:shadow-lg transition-all border border-gray-200 rounded-2xl overflow-hidden bg-white h-full flex flex-col">
-                        {/* Header com logo, nome da empresa, seta e badge */}
-                        <div className="flex items-center justify-between p-4 border-b border-gray-100">
-                          <div className="flex items-center gap-3">
-                            <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                              <Building2 className="w-5 h-5 text-gray-700" />
+                      <Card className="hover:shadow-lg transition-all border border-gray-200 rounded-2xl overflow-hidden bg-white h-full group cursor-pointer flex flex-col">
+                        <div className="p-5 flex flex-col flex-1">
+                          {/* Header */}
+                          <div className="flex items-center justify-between mb-4">
+                            <div className="flex items-center gap-3">
+                              <div className="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-100">
+                                <Building2 className="w-5 h-5 text-gray-700" />
+                              </div>
+                              <span className="text-sm font-bold text-gray-900 line-clamp-1">{job.company}</span>
+                            </div>
+                            <span className="text-[10px] px-2.5 py-1 bg-gray-900 text-white rounded-md font-bold uppercase tracking-wide">
+                              {statusLabel}
+                            </span>
+                          </div>
+
+                          {/* Content */}
+                          <div className="flex-1">
+                            <h3 className="font-bold text-lg text-gray-900 mb-3 leading-tight line-clamp-2 pb-3 border-b border-gray-100">{job.title}</h3>
+                            <div className="relative w-full h-32 mb-4 flex items-center justify-center bg-gray-50/50 rounded-lg border border-gray-50">
+                                <Image
+                                    src="/111.png"
+                                    alt="Job Illustration"
+                                    fill
+                                    className="object-contain p-2"
+                                    quality={100}
+                                />
                             </div>
-                            <span className="text-sm font-medium text-gray-900 truncate">{job.company}</span>
-                            <svg className="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                            </svg>
                           </div>
-                          <span className="text-xs px-3 py-1 bg-gray-900 text-white rounded-full font-medium flex-shrink-0">
-                            {statusLabel}
-                          </span>
                         </div>
 
-                        {/* Background Image */}
-                        <div className="relative h-32 bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center overflow-hidden">
-                          <Image
-                            src="/111.png"
-                            alt="Background"
-                            fill
-                            className="object-cover"
-                            quality={100}
-                          />
+                        {/* Footer Section with Separator */}
+                        <div className="px-5 pb-5 pt-0 mt-auto">
+                            <div className="border-t border-gray-200 pt-4 mb-4">
+                                <p className="text-sm text-gray-500 font-medium flex items-center gap-2">
+                                    <span className="text-gray-900 font-bold">{level}</span>
+                                    <span className="w-1 h-1 rounded-full bg-gray-300"></span>
+                                    {job.location}
+                                </p>
+                            </div>
+
+                            <div className="flex gap-3">
+                                <Button
+                                variant="outline"
+                                className="flex-1 border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900 rounded-lg font-bold h-10 text-xs uppercase tracking-wide"
+                                >
+                                {t('home.featuredJobs.viewJob')}
+                                </Button>
+                                <Link href={`/jobs/${job.id}`} className="flex-1">
+                                <Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-bold h-10 text-xs uppercase tracking-wide">
+                                    {t('home.featuredJobs.apply')}
+                                </Button>
+                                </Link>
+                            </div>
                         </div>
-
-                        <CardContent className="p-5 flex flex-col flex-1">
-                          {/* Título da vaga */}
-                          <h3 className="font-bold text-lg text-gray-900 mb-2 line-clamp-2">{job.title}</h3>
-
-                          {/* Info do nível */}
-                          <div className="mb-4 pb-4 border-b border-gray-200">
-                            <p className="text-sm text-gray-500">{level} · {job.location}</p>
-                          </div>
-
-                          {/* Botões */}
-                          <div className="mt-auto flex gap-2">
-                            <Button
-                              variant="outline"
-                              className="flex-1 border-gray-300 text-gray-700 hover:bg-gray-50 rounded-lg font-medium h-9 text-sm flex items-center justify-center gap-2"
-                            >
-                              <Eye className="w-4 h-4" />
-                              {t('home.featuredJobs.viewJob')}
-                            </Button>
-                            <Link href={`/jobs/${job.id}`} className="flex-1">
-                              <Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-medium h-9 text-sm">
-                                {t('home.featuredJobs.apply')}
-                              </Button>
-                            </Link>
-                          </div>
-                        </CardContent>
                       </Card>
                     </motion.div>
                   )
@@ -422,7 +343,7 @@ export default function HomePage() {
         </section>
 
         {/* More Jobs Section */}
-        <section className="bg-white py-12">
+        <section className="py-12">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
             <div className="flex justify-between items-center mb-8">
               <h2 className="text-3xl font-bold text-gray-900">{t('home.moreJobs.title')}</h2>
@@ -468,18 +389,20 @@ export default function HomePage() {
                           </div>
 
                           {/* Rodapé com botões */}
-                          <div className="flex items-center gap-2 pt-3 border-t border-gray-100">
-                            <button className="flex-1 flex items-center justify-center gap-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors h-9 px-3">
-                              <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                              </svg>
-                              <span className="text-xs font-medium text-gray-700">{t('home.featuredJobs.favorite')}</span>
-                            </button>
-                            <Link href={`/jobs/${job.id}`} className="flex-1">
-                              <Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-white rounded-md font-medium text-xs h-9">
-                                {t('home.featuredJobs.apply')}
+                          <div className="pt-4 mt-4 border-t border-gray-200">
+                            <div className="flex gap-3">
+                              <Button
+                                variant="outline"
+                                className="flex-1 border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900 rounded-lg font-bold h-9 text-xs uppercase tracking-wide"
+                              >
+                                {t('home.featuredJobs.viewJob')}
                               </Button>
-                            </Link>
+                              <Link href={`/jobs/${job.id}`} className="flex-1">
+                                <Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-bold h-9 text-xs uppercase tracking-wide">
+                                  {t('home.featuredJobs.apply')}
+                                </Button>
+                              </Link>
+                            </div>
                           </div>
                         </CardContent>
                       </Card>
@@ -491,29 +414,32 @@ export default function HomePage() {
         </section>
 
         {/* CTA Section */}
-        <section className="py-12 bg-white">
+        <section className="py-12">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
-            <div className="bg-primary rounded-2xl overflow-hidden shadow-lg relative">
-              <div className="absolute inset-0 z-0">
+            <div className="bg-gray-900 rounded-2xl overflow-hidden shadow-lg relative min-h-[500px] flex items-center">
+              {/* Image Layer: Single Image with Seamless Gradient Overlay */}
+              <div className="absolute inset-y-0 right-0 w-full md:w-3/4 z-0">
                 <Image
-                  src="/18.png"
-                  alt="Background"
-                  fill
-                  className="object-cover object-right"
-                  quality={100}
-                  priority
+                    src="/muie.jpeg"
+                    alt="Woman with Notebook"
+                    fill
+                    className="object-contain object-right"
+                    quality={100}
+                    priority
                 />
+                {/* 
+                  Seamless Blend Gradient: 
+                  Starts solid gray-900 (matching, container) on left.
+                  Fades gradually to transparent on right.
+                  This "dyes" the dark background of the photo to match the container.
+                */}
+                <div className="absolute inset-0 bg-gradient-to-r from-gray-900 from-20% via-gray-900/80 via-50% to-transparent to-100%" />
               </div>
+
               <div className="grid lg:grid-cols-2 gap-8 items-center p-8 lg:p-12 relative z-10">
                 {/* Text Content */}
-                <div className="text-white">
-                  <div className="flex items-center gap-2 mb-6">
-                    <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
-                      <span className="text-white font-bold text-lg">$</span>
-                    </div>
-                    <span className="font-medium text-base">{t('home.cta.badge')}</span>
-                  </div>
-                  <h2 className="text-3xl lg:text-4xl font-bold mb-4 leading-tight whitespace-nowrap">
+                <div className="text-white max-w-lg">
+                  <h2 className="text-3xl lg:text-4xl font-bold mb-4 leading-tight">
                     {t('home.cta.title')}
                   </h2>
                   <p className="mb-6 text-white/90 text-lg">
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
index 636f56f..e56dd64 100644
--- a/frontend/src/components/navbar.tsx
+++ b/frontend/src/components/navbar.tsx
@@ -28,7 +28,7 @@ export function Navbar() {
   ]
 
   return (
-    <nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm">
+    <nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
@@ -53,26 +53,26 @@ export function Navbar() {
             ))}
           </div>
 
-          {/* Desktop Auth Buttons + Language Switcher */}
+          {/* Desktop Auth Buttons */}
           <div className="hidden md:flex items-center gap-3">
-            <LanguageSwitcher />
+            {/* LanguageSwitcher removed to match design */ }
             {user ? (
               <Link href="/dashboard">
-                <Button variant="ghost" className="gap-2">
+                <Button variant="ghost" className="gap-2 text-white hover:text-primary transition-colors">
                   <User className="w-4 h-4" />
                   Dashboard
                 </Button>
               </Link>
             ) : (
-              <div className="flex items-center gap-0 border-2 border-primary rounded-lg overflow-hidden">
+              <div className="flex items-center gap-0 border border-primary rounded-md overflow-hidden bg-transparent">
                 <Link href="/login">
-                  <Button variant="ghost" className="gap-2 text-primary hover:bg-primary/10 rounded-none border-r border-primary px-6">
+                  <Button variant="ghost" className="gap-2 text-primary hover:bg-primary/10 rounded-none border-r border-primary px-6 h-9 font-normal">
                     {t('footer.login')}
                   </Button>
                 </Link>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="text-primary hover:bg-primary/10 rounded-none px-3">
+                    <Button variant="ghost" size="icon" className="text-primary hover:bg-primary/10 rounded-none px-3 h-9 w-9">
                       <Menu className="w-5 h-5" />
                     </Button>
                   </DropdownMenuTrigger>
@@ -89,6 +89,12 @@ export function Navbar() {
                         <span>Cadastrar Empresa</span>
                       </Link>
                     </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                       <Link href="/auth/login" className="flex items-center gap-2 cursor-pointer">
+                        <LogIn className="w-4 h-4" />
+                        <span>Login</span>
+                      </Link>
+                    </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>