diff --git a/frontend/src/components/About.jsx b/frontend/src/components/About.jsx
index ddeafbd..b257093 100644
--- a/frontend/src/components/About.jsx
+++ b/frontend/src/components/About.jsx
@@ -7,7 +7,7 @@ const About = () => {
     {
       icon: (
         <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
+          <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" />
         </svg>
       ),
       title: 'Perlindungan',
@@ -16,7 +16,7 @@ const About = () => {
     {
       icon: (
         <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
         </svg>
       ),
       title: 'Pendampingan',
@@ -25,7 +25,7 @@ const About = () => {
     {
       icon: (
         <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+          <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
         </svg>
       ),
       title: 'Kerahasiaan',
@@ -34,7 +34,7 @@ const About = () => {
     {
       icon: (
         <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
         </svg>
       ),
       title: 'Keadilan',
@@ -43,7 +43,7 @@ const About = () => {
   ];
 
   return (
-    <section id="about" className="py-20 bg-gradient-to-br from-purple-50 to-purple-100 relative overflow-hidden">
+    <section id="about" className="py-20 bg-gradient-to-br from-slate-50 via-indigo-50/60 to-purple-50 relative overflow-hidden">
       {/* Background Pattern */}
       <div className="absolute inset-0 opacity-5">
         <div className="absolute top-10 right-10 w-64 h-64 bg-primary rounded-full blur-3xl"></div>
@@ -52,24 +52,24 @@ const About = () => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         {/* Section Header */}
-        <motion.div 
+        <motion.div
           className="text-center mb-20"
           variants={fadeIn}
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}
         >
-          <motion.h2 
-            className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
+          <motion.h2
+            className="text-4xl md:text-5xl font-bold text-[#191970] mb-6"
             variants={slideUp}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
           >
-            Tentang <span className="text-primary">Satgas PPKPT</span>
+            Tentang <span className="text-indigo-500">Satgas PPKPT</span>
           </motion.h2>
-          <motion.p 
-            className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"
+          <motion.p
+            className="text-xl text-slate-500 max-w-3xl mx-auto leading-relaxed"
             variants={fadeIn}
             initial="hidden"
             whileInView="visible"
@@ -80,57 +80,18 @@ const About = () => {
           </motion.p>
         </motion.div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
           {/* Left Content - Logo and Description */}
-          <motion.div 
+          <motion.div
             className="space-y-8"
             variants={slideLeft}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
           >
-            {/* PolijeCare Logo */}
-            <div className="flex justify-center lg:justify-start">
-              <motion.div 
-                className="relative group"
-                variants={fadeIn}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                whileHover={{ scale: 1.05 }}
-                transition={{ duration: 0.3 }}
-              >
-                <div className="relative w-56 h-56">
-                  {/* Outer gradient ring */}
-                  <div className="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-3xl flex items-center justify-center shadow-soft group-hover:shadow-card transition-all duration-300">
-                    <div className="w-48 h-48 bg-white rounded-2xl flex items-center justify-center">
-                      <div className="w-40 h-40 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center">
-                        <span className="text-2xl font-bold text-primary">PolijeCare</span>
-                      </div>
-                    </div>
-                  </div>
-                  {/* Floating decoration */}
-                  <motion.div 
-                    className="absolute -top-3 -right-3 w-10 h-10 bg-accent rounded-2xl shadow-soft flex items-center justify-center"
-                    animate={{ 
-                      scale: [1, 1.2, 1],
-                      rotate: [0, 10, -10, 0]
-                    }}
-                    transition={{ 
-                      duration: 3, 
-                      repeat: Infinity,
-                      ease: "easeInOut" 
-                    }}
-                  >
-                    <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-                    </svg>
-                  </motion.div>
-                </div>
-              </motion.div>
-            </div>
 
-            <motion.div 
+
+            <motion.div
               className="space-y-6"
               variants={fadeIn}
               initial="hidden"
@@ -138,19 +99,19 @@ const About = () => {
               viewport={{ once: true }}
               transition={{ delay: 0.3 }}
             >
-              <h3 className="text-2xl font-bold text-gray-900">
+              <h3 className="text-2xl font-bold text-[#191970]">
                 Layanan Pengaduan dan Pendampingan Terpercaya
               </h3>
-              <p className="text-lg text-gray-600 leading-relaxed">
+              <p className="text-lg text-slate-500 leading-relaxed">
                 PolijeCare merupakan kanal resmi pengaduan Satgas PPKPT Politeknik Negeri Jember yang menangani laporan kekerasan seksual secara empati, profesional, dan menjaga kerahasiaan.
               </p>
-              <p className="text-lg text-gray-600 leading-relaxed">
-                Kami berkomitmen untuk menciptakan lingkungan kampus yang <span className="text-primary font-semibold">aman</span>, <span className="text-primary font-semibold">mendukung</span>, dan <span className="text-primary font-semibold">bebas dari kekerasan seksual</span> bagi seluruh sivitas akademika.
+              <p className="text-lg text-slate-500 leading-relaxed">
+                Kami berkomitmen untuk menciptakan lingkungan kampus yang <span className="text-[#191970] font-semibold">aman</span>, <span className="text-[#191970] font-semibold">mendukung</span>, dan <span className="text-[#191970] font-semibold">bebas dari kekerasan seksual</span> bagi seluruh sivitas akademika.
               </p>
             </motion.div>
 
             {/* Stats */}
-            <motion.div 
+            <motion.div
               className="grid grid-cols-2 gap-6 pt-6"
               variants={fadeIn}
               initial="hidden"
@@ -158,19 +119,19 @@ const About = () => {
               viewport={{ once: true }}
               transition={{ delay: 0.4 }}
             >
-              <div className="text-center p-4 bg-white rounded-2xl shadow-soft">
-                <div className="text-3xl font-bold text-primary mb-2">24/7</div>
-                <div className="text-sm text-gray-600 font-medium">Layanan Darurat</div>
+              <div className="text-center p-4 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-white/50">
+                <div className="text-3xl font-bold text-[#191970] mb-2">24/7</div>
+                <div className="text-sm text-slate-500 font-medium">Layanan Darurat</div>
               </div>
-              <div className="text-center p-4 bg-white rounded-2xl shadow-soft">
-                <div className="text-3xl font-bold text-accent mb-2">100%</div>
-                <div className="text-sm text-gray-600 font-medium">Rahasia Terjamin</div>
+              <div className="text-center p-4 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-white/50">
+                <div className="text-3xl font-bold text-indigo-500 mb-2">100%</div>
+                <div className="text-sm text-slate-500 font-medium">Rahasia Terjamin</div>
               </div>
             </motion.div>
           </motion.div>
 
           {/* Right Content - Features Grid */}
-          <motion.div 
+          <motion.div
             className="space-y-6"
             variants={fadeIn}
             initial="hidden"
@@ -178,7 +139,7 @@ const About = () => {
             viewport={{ once: true }}
             transition={{ delay: 0.2 }}
           >
-            <motion.div 
+            <motion.div
               className="grid grid-cols-1 sm:grid-cols-2 gap-6"
               variants={staggerChildren}
               initial="hidden"
@@ -188,7 +149,7 @@ const About = () => {
               {features.map((feature, index) => (
                 <motion.div
                   key={feature.title}
-                  className="bg-white rounded-2xl p-6 shadow-soft hover:shadow-card transition-all duration-300 hover:-translate-y-1 group"
+                  className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-white/50 hover:shadow-md hover:bg-white/90 transition-all duration-300 hover:-translate-y-1 group"
                   variants={fadeIn}
                   initial="hidden"
                   whileInView="visible"
@@ -197,14 +158,14 @@ const About = () => {
                   whileHover={{ scale: 1.02 }}
                 >
                   <div className="flex items-start space-x-4">
-                    <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center text-primary group-hover:from-primary/20 group-hover:to-accent/20 transition-all duration-300">
+                    <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center text-[#191970] group-hover:from-indigo-200 group-hover:to-purple-200 transition-all duration-300">
                       {feature.icon}
                     </div>
                     <div className="flex-1">
-                      <h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary transition-colors">
+                      <h4 className="text-lg font-semibold text-[#191970] mb-2 group-hover:text-indigo-600 transition-colors">
                         {feature.title}
                       </h4>
-                      <p className="text-gray-600 text-sm leading-relaxed">
+                      <p className="text-slate-500 text-sm leading-relaxed">
                         {feature.description}
                       </p>
                     </div>
@@ -214,18 +175,18 @@ const About = () => {
             </motion.div>
 
             {/* Quote */}
-            <motion.blockquote 
-              className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-2xl p-6 border-l-4 border-primary"
+            <motion.blockquote
+              className="bg-gradient-to-r from-indigo-50/80 to-purple-50/80 backdrop-blur-sm rounded-2xl p-6 border-l-4 border-[#191970]"
               variants={fadeIn}
               initial="hidden"
               whileInView="visible"
               viewport={{ once: true }}
               transition={{ delay: 0.6 }}
             >
-              <p className="text-lg text-gray-700 italic font-medium leading-relaxed">
+              <p className="text-lg text-slate-600 italic font-medium leading-relaxed">
                 "Setiap individu berhak mendapatkan perlindungan dan rasa aman dalam menempuh pendidikan. Mari bersama-sama menjaga kampus kita sebagai tempat yang aman dan mendukung bagi semua."
               </p>
-              <footer className="mt-4 text-sm text-gray-600 font-semibold">
+              <footer className="mt-4 text-sm text-[#191970] font-semibold">
                 — Satgas PPKPT Polije
               </footer>
             </motion.blockquote>