diff --git a/apps/frontend/src/components/CtaSection.astro b/apps/frontend/src/components/CtaSection.astro
index 518a47a..3a5cbb1 100644
--- a/apps/frontend/src/components/CtaSection.astro
+++ b/apps/frontend/src/components/CtaSection.astro
@@ -5,7 +5,7 @@
 ---
 
 <section
-    class="py-20 px-5 bg-white text-center mx-auto lg:py-[60px] lg:px-5 md:py-10"
+    class="py-15 px-5 md:py-20 bg-white text-center mx-auto"
     aria-labelledby="cta-heading"
 >
     <div class="max-w-3xl mx-auto">
diff --git a/apps/frontend/src/components/Footer.astro b/apps/frontend/src/components/Footer.astro
index b21df78..b9eab54 100644
--- a/apps/frontend/src/components/Footer.astro
+++ b/apps/frontend/src/components/Footer.astro
@@ -42,8 +42,8 @@ try {
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="bg-[var(--color-tropical-blue)] pt-10 mt-auto relative">
-    <div class="max-w-4xl mx-auto">
+<footer class="bg-(--color-tropical-blue) pt-10 mt-auto">
+    <div class="max-w-4xl mx-auto px-12">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-16">
             <div class="col-span-2">
                 <Image
@@ -56,16 +56,14 @@ const currentYear = new Date().getFullYear();
                     decoding="async"
                 />
                 <p
-                    class="text-[var(--color-st-tropaz)] text-sm pr-8 font-light leading-relaxed"
+                    class="text-(--color-st-tropaz) text-sm pr-0 md:pr-8 font-light leading-relaxed"
                 >
                     恩群數位累積多年廣告行銷操作經驗，擁有全方位行銷人才，讓我們可以為客戶精準的規劃每一分廣告預算，讓你的品牌深入人心。更重要的是恩群的存在，為了成為每家公司最佳數位夥伴，作為彼此最堅強的後盾，你會知道有我們的陪伴
                     你並不孤單。
                 </p>
             </div>
             <div>
-                <h3
-                    class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
-                >
+                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                     聯絡我們
                 </h3>
                 <a
@@ -84,7 +82,7 @@ const currentYear = new Date().getFullYear();
                         decoding="async"
                     />
                 </a>
-                <p class="text-sm text-[var(--color-st-tropaz)] mb-2">
+                <p class="text-sm text-(--color-st-tropaz) mb-2">
                     諮詢電話:<br /> 02 5570 0527
                 </p>
                 <a
@@ -94,9 +92,7 @@ const currentYear = new Date().getFullYear();
                 >
             </div>
             <div>
-                <h3
-                    class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
-                >
+                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                     行銷方案
                 </h3>
                 <ul
@@ -125,9 +121,7 @@ const currentYear = new Date().getFullYear();
                 </ul>
             </div>
             <div>
-                <h3
-                    class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4"
-                >
+                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                     行銷放大鏡
                 </h3>
                 <ul class="text-sm font-thin space-y-2" id="marketing-articles">
@@ -155,7 +149,7 @@ const currentYear = new Date().getFullYear();
         </div>
     </div>
     <div
-        class="w-screen bg-[var(--color-amber)] font-['Quicksand'] text-[var(--color-tarawera)] py-2 text-xs text-center"
+        class="w-screen bg-(--color-amber) font-['Quicksand'] text-(--color-tarawera) py-2 text-xs text-center"
     >
         <p>
             copyright © Enchun digital 2018 - {currentYear}
diff --git a/apps/frontend/src/components/SectionHeader.astro b/apps/frontend/src/components/SectionHeader.astro
index 2564dc0..aa386e5 100644
--- a/apps/frontend/src/components/SectionHeader.astro
+++ b/apps/frontend/src/components/SectionHeader.astro
@@ -22,7 +22,7 @@ const {
 <section class:list={classNameBg}>
   <div
     class:list={[
-      "flex flex-rows sm:max-w-lg px-8 md:px-0 md:max-w-xl lg:max-w-3xl items-center justify-center gap-4 py-12 mx-auto",
+      "flex flex-rows sm:max-w-lg px-8 md:px-0 md:max-w-xl lg:max-w-3xl items-center justify-center gap-4 pt-2 pb-10 mx-auto",
       className,
     ]}
   >
diff --git a/apps/frontend/src/pages/about-enchun.astro b/apps/frontend/src/pages/about-enchun.astro
index 1dcec69..c65799d 100644
--- a/apps/frontend/src/pages/about-enchun.astro
+++ b/apps/frontend/src/pages/about-enchun.astro
@@ -28,12 +28,6 @@ const description =
     }}
   />
 
-  <!-- Section Header -->
-  <SectionHeader
-    title="關於恩群"
-    subtitle="About Enchun"
-    sectionBg="bg-white"
-  />
   <!-- Service Features Section -->
   <FeatureSection />
 
diff --git a/apps/frontend/src/pages/marketing-solutions.astro b/apps/frontend/src/pages/marketing-solutions.astro
index 50390f9..b5b4179 100644
--- a/apps/frontend/src/pages/marketing-solutions.astro
+++ b/apps/frontend/src/pages/marketing-solutions.astro
@@ -4,24 +4,28 @@
  * Pixel-perfect implementation based on Webflow design
  * Data fetched from Payload CMS Pages Collection API
  */
-import Layout from '../layouts/Layout.astro'
-import SolutionsHero from '../sections/SolutionsHero.astro'
-import ServicesList from '../sections/ServicesList.astro'
-import { getMarketingSolutionsPage } from '../lib/api/marketing-solution'
-import SectionHeader from '../components/SectionHeader.astro'
+import Layout from "../layouts/Layout.astro";
+import SolutionsHero from "../sections/SolutionsHero.astro";
+import ServicesList from "../sections/ServicesList.astro";
+import { getMarketingSolutionsPage } from "../lib/api/marketing-solution";
+import SectionHeader from "../components/SectionHeader.astro";
+import CtaSection from "../components/CtaSection.astro";
 
 // Fetch page data from CMS
-const pageData = await getMarketingSolutionsPage()
+const pageData = await getMarketingSolutionsPage();
 
 // Use CMS data or fallback to defaults
-const heroTitle = pageData?.heroTitle || '行銷解決方案'
-const heroSubtitle = pageData?.heroSubtitle || '提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出'
-const heroImage = pageData?.heroImage
-const services = pageData?.services || []
+const heroTitle = pageData?.heroTitle || "行銷解決方案";
+const heroSubtitle =
+  pageData?.heroSubtitle ||
+  "提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出";
+const heroImage = pageData?.heroImage;
+const services = pageData?.services || [];
 
 // Metadata for SEO
-const title = '行銷解決方案 | 恩群數位行銷'
-const description = '恩群數位行銷提供全方位的數位行銷服務，包括 Google Ads、社群代操、論壇行銷、網紅行銷、網站設計等，協助您的品牌在數位時代脫穎而出。'
+const title = "行銷解決方案 | 恩群數位行銷";
+const description =
+  "恩群數位行銷提供全方位的數位行銷服務，包括 Google Ads、社群代操、論壇行銷、網紅行銷、網站設計等，協助您的品牌在數位時代脫穎而出。";
 ---
 
 <Layout title={title} description={description}>
@@ -39,4 +43,5 @@ const description = '恩群數位行銷提供全方位的數位行銷服務，
   />
   <!-- Services List -->
   <ServicesList services={services} />
+  <CtaSection />
 </Layout>
diff --git a/apps/frontend/src/pages/teams.astro b/apps/frontend/src/pages/teams.astro
index d827d7e..7f76a9a 100644
--- a/apps/frontend/src/pages/teams.astro
+++ b/apps/frontend/src/pages/teams.astro
@@ -9,7 +9,8 @@ import TeamsHero from "../sections/TeamsHero.astro";
 import EnvironmentSlider from "../sections/EnvironmentSlider.astro";
 import CompanyStory from "../sections/CompanyStory.astro";
 import BenefitsSection from "../sections/BenefitsSection.astro";
-
+import SectionHeader from "../components/SectionHeader.astro";
+import CtaHrCompoents from "../sections/Cta-Hr-compoents.astro";
 // Metadata for SEO
 const title = "恩群大本營 | 恩群數位行銷";
 const description =
@@ -28,50 +29,23 @@ const description =
   />
 
   <!-- Environment Slider Section -->
+
   <EnvironmentSlider />
 
   <!-- Company Story Section -->
   <CompanyStory />
 
   <!-- Benefits Section -->
+
   <BenefitsSection />
 
   <!-- CTA Section -->
-  <section
-    class="py-20 px-5 bg-slate-100 text-center lg:py-[60px] lg:px-4 md:py-10"
-    aria-labelledby="cta-heading"
-  >
-    <div class="max-w-[1200px] mx-auto">
-      <div
-        class="grid grid-cols-[1fr_auto] gap-8 items-center relative lg:grid-cols-1 lg:text-center"
-      >
-        <div class="text-left lg:text-center">
-          <h3
-            id="cta-heading"
-            class="text-[1.75rem] font-semibold text-[#23608c] mb-4 leading-snug lg:text-[1.5rem] md:text-[1.5rem]"
-          >
-            以人的成長為優先<br />
-            創造人的最大價值
-          </h3>
-          <p
-            class="text-base text-slate-600 leading-relaxed max-w-[500px] lg:max-w-full md:text-[0.95rem]"
-          >
-            在恩群數位裡我們重視個人的特質能夠完全發揮，只要你樂於學習、善於跟人建立關係，並且重要的是你有一個善良的心，恩群數位歡迎你的加入
-          </p>
-        </div>
-        <a
-          href="https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center justify-center bg-link-hover text-white px-8 py-4 rounded-md font-semibold text-base transition-all duration-200 whitespace-nowrap hover:-translate-y-0.5 hover:shadow-md hover:bg-[#1a4d6e] lg:w-full lg:max-w-[300px] md:py-[14px] md:px-6 md:text-[0.95rem]"
-        >
-          立刻申請面試
-        </a>
-        <div
-          class="absolute inset-0 bg-gradient-to-br from-[rgba(35,96,140,0.05)] to-[rgba(35,96,140,0.02)] rounded-lg -z-10 lg:hidden"
-        >
-        </div>
-      </div>
-    </div>
-  </section>
+  <CtaHrCompoents
+    title="以人的成長為優先<br />創造人的最大價值"
+    description="在恩群數位裡我們重視個人的特質能夠完全發揮，只要你樂於學習、善於跟人建立關係，並且重要的是你有一個善良的心，恩群數位歡迎你的加入"
+    image={{
+      url: "https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b4723942d01_工作環境-銘言底圖-1400x659.jpg",
+      alt: "工作環境",
+    }}
+  />
 </Layout>
diff --git a/apps/frontend/src/sections/BenefitsSection.astro b/apps/frontend/src/sections/BenefitsSection.astro
index 65aee33..7253cc9 100644
--- a/apps/frontend/src/sections/BenefitsSection.astro
+++ b/apps/frontend/src/sections/BenefitsSection.astro
@@ -6,304 +6,93 @@
  */
 
 interface BenefitItem {
-  title: string
-  icon: string
+  title: string;
+  img: string;
 }
 
 interface Props {
-  benefits?: BenefitItem[]
+  benefits?: BenefitItem[];
 }
 
 const defaultBenefits: BenefitItem[] = [
   {
-    title: '高績效、高獎金\n新人開張獎金',
-    icon: 'bonus',
+    title: "高績效、高獎金\n新人開張獎金",
+    img: "/api/media/file/61f24aa108528b79b2942d05_Make%20it%20rain-bro-%E6%96%B0%E4%BA%BA%E9%96%8B%E5%BC%B5%E7%8D%8E%E9%87%91.svg",
   },
   {
-    title: '生日慶生、電影日\n員工下午茶',
-    icon: 'birthday',
+    title: "生日慶生、電影日\n員工下午茶",
+    img: "/api/media/file/61f24aa108528be590942d06_Blowing%20out%20Birthday%20candles-bro-%E7%94%9F%E6%97%A5%E6%85%B6%E7%94%9F.svg",
   },
   {
-    title: '教育訓練補助',
-    icon: 'education',
+    title: "教育訓練補助",
+    img: "/api/media/file/61f24aa108528be22a942d03_Online%20learning-bro-%E6%95%99%E8%82%B2%E8%A8%93%E7%B7%B4%E8%A3%9C%E5%8A%A9.svg",
   },
   {
-    title: '寬敞的工作空間',
-    icon: 'workspace',
+    title: "寬敞的工作空間",
+    img: "/api/media/file/61f24aa108528be064942d08_Shared%20workspace-bro-%E5%AF%AC%E6%95%9E%E7%9A%84%E5%B7%A5%E4%BD%9C%E7%A9%BA%E9%96%93.svg",
   },
   {
-    title: '員工國內外旅遊\n部門聚餐、年終活動',
-    icon: 'travel',
+    title: "員工國內外旅遊\n部門聚餐、年終活動",
+    img: "/api/media/file/61f24aa108528b0960942d04_Flight%20Booking-bro-%E5%93%A1%E5%B7%A5%E6%97%85%E9%81%8A.svg",
   },
   {
-    title: '入職培訓及團隊建設',
-    icon: 'training',
+    title: "入職培訓及團隊建設",
+    img: "/api/media/file/61f24aa108528bf90b942d02_Brainstorming-bro-%E5%85%A5%E8%81%B7%E5%9F%B9%E8%A8%93.svg",
   },
-]
+];
 
-const benefits = Astro.props.benefits || defaultBenefits
-
-// Icon SVG components (placeholder for now, replace with actual SVG)
-const getIconSVG = (iconType: string) => {
-  const icons: Record<string, string> = {
-    bonus: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">💰</text>
-    </svg>`,
-    birthday: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">🎂</text>
-    </svg>`,
-    education: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">📚</text>
-    </svg>`,
-    workspace: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">🏢</text>
-    </svg>`,
-    travel: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">✈️</text>
-    </svg>`,
-    training: `<svg viewBox="0 0 200 200" class="benefit-icon-svg">
-      <circle cx="100" cy="70" r="40" fill="#23608c" opacity="0.2"/>
-      <rect x="60" y="100" width="80" height="60" rx="8" fill="#23608c"/>
-      <text x="100" y="140" text-anchor="middle" fill="white" font-size="36">🤝</text>
-    </svg>`,
-  }
-  return icons[iconType] || icons.bonus
-}
+const benefits = Astro.props.benefits || defaultBenefits;
+import SectionHeader from "../components/SectionHeader.astro";
 ---
 
-<section class="section-benefit" aria-labelledby="benefits-heading">
-  <div class="container w-container">
+<section
+  class="py-15 px-5 bg-white md:py-10 md:px-4"
+  aria-labelledby="benefits-heading"
+>
+  <div class="max-w-6xl mx-auto">
     <!-- Section Header -->
-    <div class="section_header_w_line">
-      <div class="divider_line"></div>
-      <div class="header_subtitle">
-        <h2 id="benefits-heading" class="header_subtitle_head">工作福利</h2>
-        <p class="header_subtitle_paragraph">Benefit Package</p>
-      </div>
-      <div class="divider_line"></div>
-    </div>
+    <SectionHeader
+      title="工作福利"
+      subtitle="Benefit Packages"
+      sectionBg="bg-white"
+    />
 
-    <!-- Benefits Grid -->
-    <div class="benefit-grid-wrapper">
+    <!-- Benefits Grid: 2 cards per row -->
+    <div
+      class="max-w-md md:max-w-3xl mx-auto grid grid-cols-1 gap-x-2 gap-y-2 md:gap-y-6 md:grid-cols-2 py-18"
+    >
       {
-        benefits.map((benefit, index) => (
-          <div class={`benefit-card ${index % 2 === 0 ? 'benefit-card' : 'benefit-card-opposite'}`}>
-            <!-- Odd: Icon on right, Even: Icon on left -->
-            {
-              index % 2 === 0 ? (
-                <>
-                  <div class="benefit-content">
-                    <h3 class="benefit-title-text">{benefit.title}</h3>
-                  </div>
-                  <div class="benefit-image-right" set:html={getIconSVG(benefit.icon)} />
-                </>
-              ) : (
-                <>
-                  <div class="benefit-image-left" set:html={getIconSVG(benefit.icon)} />
-                  <div class="benefit-content">
-                    <h3 class="benefit-title-text">{benefit.title}</h3>
-                  </div>
-                </>
-              )
-            }
-          </div>
-        ))
+        benefits.map((benefit, index) => {
+          const isLeft = index % 2 === 0;
+          return (
+            <div class="grid grid-cols-2 gap-2 items-center">
+              <div
+                class:list={[
+                  isLeft ? "order-1 text-right" : "order-2 text-left",
+                ]}
+              >
+                <h3 class="text-xl md:text-base lg:text-xl font-semibold text-(--color-enchunblue) whitespace-pre-wrap leading-snug">
+                  {benefit.title}
+                </h3>
+              </div>
+              <div
+                class:list={[
+                  "flex items-center",
+                  isLeft ? "order-2 justify-start" : "order-1 justify-end",
+                ]}
+              >
+                <img
+                  src={`https://enchun-cms.anlstudio.cc${benefit.img}`}
+                  alt={benefit.title}
+                  class="size-35 object-contain"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+            </div>
+          );
+        })
       }
     </div>
   </div>
 </section>
-
-<style>
-  /* Benefits Section Styles - Pixel-perfect from Webflow */
-  .section-benefit {
-    padding: 60px 20px;
-    background-color: #ffffff;
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .w-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  /* Section Header */
-  .section_header_w_line {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    margin-bottom: 48px;
-  }
-
-  .header_subtitle {
-    text-align: center;
-  }
-
-  .header_subtitle_head {
-    color: var(--color-enchunblue);
-    font-family: "Noto Sans TC", sans-serif;
-    font-weight: 700;
-    font-size: 2rem;
-    margin-bottom: 8px;
-  }
-
-  .header_subtitle_paragraph {
-    color: var(--color-gray-600);
-    font-family: "Quicksand", sans-serif;
-    font-weight: 400;
-    font-size: 1rem;
-  }
-
-  .divider_line {
-    width: 40px;
-    height: 2px;
-    background-color: var(--color-enchunblue);
-  }
-
-  /* Benefits Grid */
-  .benefit-grid-wrapper {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
-
-  /* Benefit Card */
-  .benefit-card,
-  .benefit-card-opposite {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 40px;
-    align-items: center;
-    margin-bottom: 60px;
-  }
-
-  /* Odd cards: icon on right */
-  .benefit-card {
-    grid-template-areas: "content image";
-  }
-
-  .benefit-card .benefit-content {
-    grid-area: content;
-    text-align: left;
-  }
-
-  .benefit-card .benefit-image-right {
-    grid-area: image;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  /* Even cards: icon on left */
-  .benefit-card-opposite {
-    grid-template-areas: "image content";
-  }
-
-  .benefit-card-opposite .benefit-content {
-    grid-area: content;
-    text-align: left;
-  }
-
-  .benefit-card-opposite .benefit-image-left {
-    grid-area: image;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  /* Benefit Title */
-  .benefit-title-text {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: var(--color-tarawera, #23608c);
-    white-space: pre-line;
-    line-height: 1.4;
-  }
-
-  /* Benefit Icon */
-  .benefit-icon-svg {
-    width: 120px;
-    height: 120px;
-  }
-
-  .benefit-image-right,
-  .benefit-image-left {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .benefit-image-right svg,
-  .benefit-image-left svg {
-    width: 120px;
-    height: 120px;
-  }
-
-  /* Responsive Adjustments */
-  @media (max-width: 991px) {
-    .benefit-card,
-    .benefit-card-opposite {
-      gap: 24px;
-      margin-bottom: 40px;
-    }
-
-    .benefit-title-text {
-      font-size: 1.25rem;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .section-benefit {
-      padding: 40px 16px;
-    }
-
-    .section_header_w_line {
-      flex-wrap: wrap;
-    }
-
-    .benefit-card,
-    .benefit-card-opposite {
-      grid-template-columns: 1fr;
-      grid-template-areas: "image" "content" !important;
-      gap: 24px;
-      margin-bottom: 48px;
-    }
-
-    .benefit-content {
-      text-align: center !important;
-    }
-
-    .benefit-image-right,
-    .benefit-image-left {
-      order: -1;
-    }
-
-    .benefit-title-text {
-      font-size: 1.125rem;
-    }
-
-    .benefit-icon-svg {
-      width: 100px;
-      height: 100px;
-    }
-
-    .benefit-image-right svg,
-    .benefit-image-left svg {
-      width: 100px;
-      height: 100px;
-    }
-  }
-</style>
diff --git a/apps/frontend/src/sections/CompanyStory.astro b/apps/frontend/src/sections/CompanyStory.astro
index be1877c..ae91fda 100644
--- a/apps/frontend/src/sections/CompanyStory.astro
+++ b/apps/frontend/src/sections/CompanyStory.astro
@@ -4,128 +4,36 @@
  * Pixel-perfect implementation based on Webflow design
  */
 interface Props {
-  title?: string
-  subtitle?: string
-  content?: string
+  title?: string;
+  subtitle?: string;
+  content?: string;
 }
 
 const {
-  title = '恩群數位的故事',
-  subtitle = 'Something About Enchun Digital',
-  content = '恩群數位是由一群年輕果斷、敢冒險的年輕人聚在一起，共同為台灣在地經營努力不懈的商家老闆們建立品牌的知名度。而商家的經營本身就不是一件容易的事情，早在恩群成立之前，我們便一直聚焦在與不同行業的老闆們建立起信賴可靠的關係，從一家又一家的合作關係當中，聚集了在行銷領域裡的頂尖好手，培育了許多優秀行銷顧問。讓每個辛苦經營的商家老闆可以獲得最佳的服務，讓每次的行銷需求可以透過有效的互動與聆聽，達到彼此心目中的預期目標。數字的確會說話，但是每一個有溫度的服務才是在恩群裡最重視的地方。',
-} = Astro.props
+  title = "恩群數位的故事",
+  subtitle = "Something About Enchun Digital",
+  content = "恩群數位是由一群年輕果斷、敢冒險的年輕人聚在一起，共同為台灣在地經營努力不懈的商家老闆們建立品牌的知名度。而商家的經營本身就不是一件容易的事情，早在恩群成立之前，我們便一直聚焦在與不同行業的老闆們建立起信賴可靠的關係，從一家又一家的合作關係當中，聚集了在行銷領域裡的頂尖好手，培育了許多優秀行銷顧問。讓每個辛苦經營的商家老闆可以獲得最佳的服務，讓每次的行銷需求可以透過有效的互動與聆聽，達到彼此心目中的預期目標。數字的確會說話，但是每一個有溫度的服務才是在恩群裡最重視的地方。",
+} = Astro.props;
+import SectionHeader from "../components/SectionHeader.astro";
 ---
 
-<section class="section-story" aria-labelledby="story-heading">
-  <div class="container w-container">
+<section
+  class="section-story py-20 md:py-[60px] md:px-4 max-md:py-10 max-md:px-4 text-center bg-white"
+  aria-labelledby="story-heading"
+>
+  <div class="container w-container max-w-4xl mx-auto">
     <!-- Section Header -->
-    <div class="section_header_w_line">
-      <div class="divider_line"></div>
-      <div class="header_subtitle">
-        <h2 id="story-heading" class="header_subtitle_head">{title}</h2>
-        <p class="header_subtitle_paragraph">{subtitle}</p>
-      </div>
-      <div class="divider_line"></div>
-    </div>
+    <SectionHeader
+      title="恩群數位的故事"
+      subtitle="Something About Enchun Digital"
+      sectionBg="bg-white"
+    />
 
     <!-- Story Content -->
-    <p class="story-paragraph">{content}</p>
+    <p
+      class="story-paragraph max-w-3xl mx-auto text-base md:text-lg font-thin leading-[1.8] max-md:leading-[1.7] text-(--color-text-secondary)/80 font-[Noto_Sans_TC,sans-serif]"
+    >
+      {content}
+    </p>
   </div>
 </section>
-
-<style>
-  /* Company Story Styles - Pixel-perfect from Webflow */
-  .section-story {
-    padding: 80px 20px;
-    text-align: center;
-    background-color: #ffffff;
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .w-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  /* Section Header */
-  .section_header_w_line {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    margin-bottom: 40px;
-  }
-
-  .header_subtitle {
-    text-align: center;
-  }
-
-  .header_subtitle_head {
-    color: var(--color-enchunblue);
-    font-family: "Noto Sans TC", sans-serif;
-    font-weight: 700;
-    font-size: 2rem;
-    margin-bottom: 8px;
-  }
-
-  .header_subtitle_paragraph {
-    color: var(--color-gray-600);
-    font-family: "Quicksand", sans-serif;
-    font-weight: 400;
-    font-size: 1rem;
-  }
-
-  .divider_line {
-    width: 40px;
-    height: 2px;
-    background-color: var(--color-enchunblue);
-  }
-
-  /* Story Content */
-  .story-paragraph {
-    max-width: 800px;
-    margin: 0 auto;
-    font-size: 1.125rem;
-    line-height: 1.8;
-    color: var(--color-text-secondary);
-    font-family: "Noto Sans TC", sans-serif;
-  }
-
-  /* Responsive Adjustments */
-  @media (max-width: 991px) {
-    .section-story {
-      padding: 60px 16px;
-    }
-
-    .header_subtitle_head {
-      font-size: 1.75rem;
-    }
-
-    .story-paragraph {
-      font-size: 1rem;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .section-story {
-      padding: 40px 16px;
-    }
-
-    .section_header_w_line {
-      flex-wrap: wrap;
-    }
-
-    .header_subtitle_head {
-      font-size: 1.5rem;
-    }
-
-    .story-paragraph {
-      font-size: 0.95rem;
-      line-height: 1.7;
-    }
-  }
-</style>
diff --git a/apps/frontend/src/sections/ComparisonSection.astro b/apps/frontend/src/sections/ComparisonSection.astro
index b285d66..ce3cd74 100644
--- a/apps/frontend/src/sections/ComparisonSection.astro
+++ b/apps/frontend/src/sections/ComparisonSection.astro
@@ -1,274 +1,139 @@
 ---
+import SectionHeader from "@/components/SectionHeader.astro";
+
 /**
  * ComparisonSection - 恩群數位 vs 其他行銷公司 對比表格
- * Pixel-perfect implementation based on Webflow design
+ * Custom layout based on new design specs with Tailwind CSS
  */
-interface ComparisonItem {
-  feature: string
-  enchun: string
-  others: string
-}
 
-const comparisonItems: ComparisonItem[] = [
-  {
-    feature: '服務範圍',
-    enchun: '全方位數位行銷服務，從策略到執行一條龍',
-    others: '單一服務項目，缺乏整合性',
-  },
-  {
-    feature: '數據分析',
-    enchun: '專業數據分析團隊，精準追蹤 ROI',
-    others: '基礎報告，缺乏深度分析',
-  },
-  {
-    feature: '在地化經驗',
-    enchun: '深耕台灣市場，了解本地消費者習性',
-    others: '通用策略，缺乏在地化調整',
-  },
-  {
-    feature: '客戶服務',
-    enchun: '一對一專人服務，快速響應',
-    others: '標準化流程，回應較慢',
-  },
-  {
-    feature: '價格透明',
-    enchun: '明確報價，無隱藏費用',
-    others: '複雜收費結構，容易超支',
-  },
-]
+const otherCompanyItems = [
+  "缺乏經驗",
+  "沒有成效保證",
+  "售後無服務",
+  "沒有策略",
+  "不了解客戶需求",
+  "沒有接受客戶反饋",
+];
+
+const enchunItems = [
+  "實際執行經驗豐富",
+  "實際成效",
+  "售後服務架構完善",
+  "行銷策略有方",
+  "熟悉客戶需求",
+  "最多客戶回饋",
+];
 ---
 
-<section class="section-comparison" aria-labelledby="comparison-heading">
-  <div class="w-container">
+<section
+  class="bg-[#f8f9fa] py-10 px-3 md:py-[60px] md:px-4 lg:py-20 lg:px-5"
+  aria-labelledby="comparison-heading"
+>
+  <div class="max-w-[1000px] mx-auto">
     <!-- Section Header -->
-    <div class="section-header-w-line">
-      <h2 id="comparison-heading" class="header-subtitle-head">
-        為什麼選擇恩群數位
-      </h2>
-      <div class="divider-line"></div>
+    <SectionHeader
+      title="恩群與其他公司有什麼不同"
+      subtitle="What make us different from others"
+    />
+
+    <!-- Comparison Cards Layout -->
+    <div
+      class="relative bg-white rounded-2xl shadow-xl overflow-hidden mt-10 md:mt-12 max-w-4xl mx-auto border border-gray-100"
+    >
+      <!-- Winning Medal (Absolute Positioned) -->
+      <div
+        class="absolute -top-2 right-6 md:right-12 w-16 h-16 md:w-20 md:h-20 z-10 drop-shadow-lg"
+      >
+        <img
+          src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b7eab942cd9_winning%20medal.svg"
+          loading="lazy"
+          alt="Winning Medal"
+          class="w-full h-full object-contain"
+        />
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2">
+        <!-- Left Column: Other Companies -->
+        <div
+          class="p-8 md:p-12 border-b md:border-b-0 md:border-r border-gray-200 bg-gray-50 flex flex-col gap-6"
+        >
+          <h3
+            class="text-2xl md:text-3xl font-bold text-gray-800 tracking-tight font-['Noto_Sans_TC',sans-serif]"
+          >
+            其他行銷公司
+          </h3>
+          <p
+            class="text-gray-500 text-sm md:text-base leading-relaxed h-[60px]"
+          >
+            市場上每間行銷公司想要讓自己的公司服務可以被看見，有時候客戶只能成為待宰羔羊
+          </p>
+          <div class="h-px w-full bg-gray-200 my-2"></div>
+          <ul role="list" class="flex flex-col gap-4 md:gap-5 mt-2">
+            {
+              otherCompanyItems.map((item) => (
+                <li class="flex items-center gap-3">
+                  <span class="text-gray-700 font-medium text-base md:text-lg flex-1">
+                    {item}
+                  </span>
+                  <div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-red-50 relative top-1">
+                    <img
+                      src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b9634942cdb_wrong.svg"
+                      loading="lazy"
+                      alt="Cross Icon"
+                      class="w-3 h-3"
+                    />
+                  </div>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+
+        <!-- Right Column: Enchun Digital -->
+        <div class="p-8 md:p-12 flex flex-col gap-6 relative bg-white">
+          <h3
+            class="text-2xl md:text-3xl font-bold text-[var(--color-enchunblue)] tracking-tight font-['Noto_Sans_TC',sans-serif]"
+          >
+            恩群數位
+          </h3>
+          <p
+            class="text-gray-600 text-sm md:text-base leading-relaxed h-[60px]"
+          >
+            在恩群數位每個客戶都是我們最重視的拍檔，不論合作的項目大小，我們珍惜與客戶的合作關係
+          </p>
+          <div class="h-px w-full bg-blue-100 my-2"></div>
+          <ul role="list" class="flex flex-col gap-4 md:gap-5 mt-2">
+            {
+              enchunItems.map((item) => (
+                <li class="flex items-center gap-3">
+                  <span class="text-gray-800 font-medium text-base md:text-lg flex-1">
+                    {item}
+                  </span>
+                  <div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-green-50 relative top-1">
+                    <img
+                      src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b7a79942cda_checked.svg"
+                      loading="lazy"
+                      alt="Check Icon"
+                      class="w-4 h-4"
+                    />
+                  </div>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+      </div>
     </div>
 
-    <!-- Comparison Table -->
-    <div class="comparison-table-wrapper">
-      <table class="comparison-table">
-        <thead>
-          <tr>
-            <th class="th-feature">比較項目</th>
-            <th class="th-enchun">
-              <span class="enchun-badge">恩群數位</span>
-            </th>
-            <th class="th-others">其他行銷公司</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            comparisonItems.map((item, index) => (
-              <tr class={index % 2 === 0 ? 'row-even' : 'row-odd'}>
-                <td class="td-feature">{item.feature}</td>
-                <td class="td-enchun">
-                  <span class="enchun-icon">✓</span>
-                  {item.enchun}
-                </td>
-                <td class="td-others">{item.others}</td>
-              </tr>
-            ))
-          }
-        </tbody>
-      </table>
-    </div>
-
-    <!-- CTA Note -->
-    <div class="comparison-note">
-      <p class="note-text">
-        選擇恩群數位，讓您的品牌在數位時代脫穎而出！
-      </p>
+    <!-- CTA Button -->
+    <div class="mt-12 flex justify-center">
+      <a
+        href="https://heyform.itslouis.cc/form/7mYtUNjA"
+        target="_blank"
+        class="inline-flex items-center justify-center bg-[var(--color-enchunblue)] text-white font-bold text-lg px-10 py-4 rounded-full shadow-[0_8px_20px_-6px_rgba(43,83,186,0.5)] hover:shadow-[0_12px_24px_-8px_rgba(43,83,186,0.6)] hover:opacity-95 transition-all duration-300 transform hover:-translate-y-1"
+      >
+        <div class="tracking-wide">跟行銷顧問聊聊</div>
+      </a>
     </div>
   </div>
 </section>
-
-<style>
-  /* Comparison Section Styles - Pixel-perfect from Webflow */
-  .section-comparison {
-    background-color: #f8f9fa;
-    padding: 80px 20px;
-  }
-
-  .w-container {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
-
-  /* Section Header */
-  .section-header-w-line {
-    text-align: center;
-    margin-bottom: 48px;
-  }
-
-  .header-subtitle-head {
-    color: var(--color-enchunblue);
-    font-family: "Noto Sans TC", "Quicksand", sans-serif;
-    font-weight: 700;
-    font-size: 2rem;
-    margin-bottom: 16px;
-  }
-
-  .divider-line {
-    background-color: var(--color-enchunblue);
-    height: 2px;
-    width: 60px;
-    margin: 0 auto;
-  }
-
-  /* Table Wrapper */
-  .comparison-table-wrapper {
-    background: white;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-    overflow: hidden;
-  }
-
-  /* Comparison Table */
-  .comparison-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  /* Table Header */
-  .comparison-table thead {
-    background-color: var(--color-enchunblue);
-  }
-
-  .comparison-table th {
-    color: white;
-    font-family: "Noto Sans TC", sans-serif;
-    font-weight: 600;
-    font-size: 1.125rem;
-    padding: 20px;
-    text-align: left;
-  }
-
-  .th-feature {
-    width: 20%;
-  }
-
-  .th-enchun {
-    width: 45%;
-    text-align: center;
-  }
-
-  .th-others {
-    width: 35%;
-  }
-
-  /* Enchun Badge */
-  .enchun-badge {
-    display: inline-block;
-    background-color: white;
-    color: var(--color-enchunblue);
-    padding: 4px 16px;
-    border-radius: 20px;
-    font-weight: 700;
-  }
-
-  /* Table Body */
-  .comparison-table tbody tr {
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .comparison-table tbody tr:last-child {
-    border-bottom: none;
-  }
-
-  .row-even {
-    background-color: #ffffff;
-  }
-
-  .row-odd {
-    background-color: #f8f9fa;
-  }
-
-  .comparison-table td {
-    padding: 20px;
-    vertical-align: top;
-  }
-
-  .td-feature {
-    font-weight: 600;
-    color: var(--color-text-primary);
-  }
-
-  .td-enchun {
-    color: var(--color-text-secondary);
-    position: relative;
-  }
-
-  .enchun-icon {
-    display: inline-block;
-    color: #22c55e;
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  .td-others {
-    color: var(--color-text-muted);
-  }
-
-  /* Comparison Note */
-  .comparison-note {
-    text-align: center;
-    margin-top: 32px;
-  }
-
-  .note-text {
-    font-size: 1.125rem;
-    color: var(--color-enchunblue);
-    font-weight: 500;
-  }
-
-  /* Responsive Adjustments */
-  @media (max-width: 991px) {
-    .section-comparison {
-      padding: 60px 16px;
-    }
-
-    .comparison-table th,
-    .comparison-table td {
-      padding: 16px 12px;
-      font-size: 0.9rem;
-    }
-
-    .header-subtitle-head {
-      font-size: 1.75rem;
-    }
-  }
-
-  @media (max-width: 767px) {
-    /* Convert to card layout on mobile */
-    .comparison-table-wrapper {
-      overflow-x: auto;
-    }
-
-    .comparison-table {
-      min-width: 600px;
-    }
-
-    .section-comparison {
-      padding: 40px 12px;
-    }
-
-    .header-subtitle-head {
-      font-size: 1.5rem;
-    }
-
-    .comparison-table th,
-    .comparison-table td {
-      padding: 12px 8px;
-      font-size: 0.875rem;
-    }
-
-    .enchun-badge {
-      font-size: 0.875rem;
-      padding: 2px 12px;
-    }
-  }
-</style>
diff --git a/apps/frontend/src/sections/Cta-Hr-compoents.astro b/apps/frontend/src/sections/Cta-Hr-compoents.astro
new file mode 100644
index 0000000..5a190c7
--- /dev/null
+++ b/apps/frontend/src/sections/Cta-Hr-compoents.astro
@@ -0,0 +1,62 @@
+---
+/**
+ * Cta-Hr-compoents - HR CTA Section
+ * 招募行動呼籲區塊，引導求職者申請面試
+ */
+interface Props {
+    title: string;
+    description: string;
+    image?: { url: string; alt: string };
+}
+
+const { title, description, image } = Astro.props;
+---
+
+<section
+    class="relative py-20 px-5 bg-slate-100 bg-cover bg-center overflow-hidden"
+    aria-labelledby="cta-heading"
+    style={image ? `background-image: url('${image.url}')` : undefined}
+>
+    {/* Dark overlay when image is present */}
+    {
+        image && (
+            <div
+                class="absolute inset-0 bg-linear-to-b from-transparent to-black/70 z-0"
+                aria-hidden="true"
+            />
+        )
+    }
+    <div class="relative z-10 max-w-3xl md:max-w-3xl mx-auto">
+        <div
+            class="grid grid-rows-[1fr_auto] gap-8 items-center lg:grid-cols-[1fr_auto]"
+        >
+            <div class="text-center md:text-left">
+                <h3
+                    id="cta-heading"
+                    class:list={[
+                        "text-4xl md:text-4xl font-semibold mb-4 leading-snug",
+                        image ? "text-white" : "text-[#23608c]",
+                    ]}
+                >
+                    <Fragment set:html={title} />
+                </h3>
+                <p
+                    class:list={[
+                        "text-sm md:text-base leading-relaxed text-balance max-w-xl lg:max-w-full",
+                        image ? "text-white/80" : "text-slate-600",
+                    ]}
+                >
+                    {description}
+                </p>
+            </div>
+            <a
+                href="https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center justify-center mx-auto bg-(--color-pale-purple) text-white px-8 py-4 rounded-md font-semibold text-xl transition-all duration-200 whitespace-nowrap hover:-translate-y-0.5 hover:shadow-md hover:bg-(--color-pale-purple)/90 w-full max-w-3xs md:w-full lg:max-w-[300px]"
+            >
+                立刻申請面試
+            </a>
+        </div>
+    </div>
+</section>
diff --git a/apps/frontend/src/sections/EnvironmentSlider.astro b/apps/frontend/src/sections/EnvironmentSlider.astro
index f37c019..ecba189 100644
--- a/apps/frontend/src/sections/EnvironmentSlider.astro
+++ b/apps/frontend/src/sections/EnvironmentSlider.astro
@@ -6,54 +6,88 @@
  */
 
 interface SlideImage {
-  src: string
-  alt: string
+  src: string;
+  alt: string;
 }
 
 interface Props {
-  slides?: SlideImage[]
+  slides?: SlideImage[];
 }
 
 const defaultSlides: SlideImage[] = [
-  { src: '/placeholder-environment-1.jpg', alt: '恩群環境照片 1' },
-  { src: '/placeholder-environment-2.jpg', alt: '恩群環境照片 2' },
-  { src: '/placeholder-environment-3.jpg', alt: '恩群環境照片 3' },
-  { src: '/placeholder-environment-4.jpg', alt: '恩群環境照片 4' },
-  { src: '/placeholder-environment-5.jpg', alt: '恩群環境照片 5' },
-  { src: '/placeholder-environment-6.jpg', alt: '恩群環境照片 6' },
-  { src: '/placeholder-environment-7.jpg', alt: '恩群環境照片 7' },
-  { src: '/placeholder-environment-8.jpg', alt: '恩群環境照片 8' },
-]
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b4962117e2d84363174_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871.jpg",
+    alt: "恩群環境照片 1",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b49558b7e5b0e81de8f_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-7.jpg",
+    alt: "恩群環境照片 2",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b4962117e2d84363174_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-1.jpg",
+    alt: "恩群環境照片 3",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76c511895ed028da1c7f0_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-3.jpg",
+    alt: "恩群環境照片 4",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b48558b7e072a81de8e_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-4.jpg",
+    alt: "恩群環境照片 5",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b483504a25babe537ef_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-1.jpg",
+    alt: "恩群環境照片 6",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/61f76b48ef5754e17a8c1676_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%871-6.jpg",
+    alt: "恩群環境照片 7",
+  },
+  {
+    src: "https://enchun-cms.anlstudio.cc/api/media/file/620639d7a68fef44f6569b23_%E6%81%A9%E7%BE%A4%E7%92%B0%E5%A2%83%20%E7%85%A7%E7%89%879.jpg",
+    alt: "恩群環境照片 8",
+  },
+];
 
-const slides = Astro.props.slides || defaultSlides
+const slides = Astro.props.slides || defaultSlides;
 
-import SectionHeader from '../components/SectionHeader.astro'
+import SectionHeader from "../components/SectionHeader.astro";
 ---
 
-<section class="section-video" aria-label="工作環境照片">
-  <div class="container spacer8 w-container">
+<section
+  class="section-video py-10 md:py-20 md:px-5 px-4 bg-white"
+  aria-label="工作環境照片"
+>
+  <div class="container w-container max-w-3xl mx-auto">
     <!-- Section Header -->
     <SectionHeader
       title="在恩群工作的環境"
       subtitle="Working Enviroment"
+      sectionBg="bg-white"
     />
 
     <!-- Environment Slider -->
     <div
-      class="environment-slider"
+      class="environment-slider relative w-full max-w-4xl mx-auto"
       id="env-slider-{Math.random().toString(36).slice(2, 8)}"
     >
       <!-- Slides Container -->
-      <div class="slides-container">
+      <div
+        class="slides-container flex overflow-x-auto snap-x snap-mandatory scroll-smooth overscroll-x-contain [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden cursor-grab"
+      >
         {
           slides.map((slide, index) => (
-            <div class="environment-slide" data-index={index}>
+            <div
+              class="environment-slide flex-none w-full snap-start aspect-video overflow-hidden rounded-xl"
+              data-index={index}
+            >
               <img
                 src={slide.src}
                 alt={slide.alt}
-                loading={index === 0 ? 'eager' : 'lazy'}
+                loading={index === 0 ? "eager" : "lazy"}
                 width="800"
                 height="450"
+                class="w-full h-full object-cover"
               />
             </div>
           ))
@@ -61,23 +95,33 @@ import SectionHeader from '../components/SectionHeader.astro'
       </div>
 
       <!-- Arrow Navigation -->
-      <button class="slider-arrow slider-arrow-left" aria-label="上一張">
+      <button
+        class="slider-arrow slider-arrow-left absolute top-1/2 -translate-y-1/2 w-12 h-12 md:w-12 md:h-12 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 ease-in-out z-10 hover:bg-white hover:scale-110 left-4 md:left-4 left-2"
+        aria-label="上一張"
+      >
         <svg viewBox="0 0 24 24" width="24" height="24">
-          <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+          <path
+            fill="currentColor"
+            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
         </svg>
       </button>
-      <button class="slider-arrow slider-arrow-right" aria-label="下一張">
+      <button
+        class="slider-arrow slider-arrow-right absolute top-1/2 -translate-y-1/2 w-12 h-12 md:w-12 md:h-12 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 ease-in-out z-10 hover:bg-white hover:scale-110 right-4 md:right-4 right-2"
+        aria-label="下一張"
+      >
         <svg viewBox="0 0 24 24" width="24" height="24">
-          <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+          <path
+            fill="currentColor"
+            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
         </svg>
       </button>
 
       <!-- Dot Navigation -->
-      <div class="slider-dots">
+      <div class="slider-dots flex justify-center gap-2 mt-4">
         {
           slides.map((_, index) => (
             <button
-              class={`slider-dot ${index === 0 ? 'active' : ''}`}
+              class={`slider-dot w-3 h-3 rounded-full cursor-pointer transition-all duration-200 ease-in-out ${index === 0 ? "active bg-(--color-enchunblue) w-8 rounded-[6px]" : "bg-(--color-enchunblue)/30"}`}
               data-index={index}
               aria-label={`顯示第 ${index + 1} 張照片`}
             />
@@ -88,313 +132,183 @@ import SectionHeader from '../components/SectionHeader.astro'
   </div>
 </section>
 
-<style>
-  /* Environment Slider Styles - Pixel-perfect from Webflow */
-  .section-video {
-    padding: 80px 20px;
-    background-color: #ffffff;
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .w-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .spacer8 {
-    padding-top: 2rem;
-  }
-
-
-
-  /* Environment Slider */
-  .environment-slider {
-    position: relative;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .slides-container {
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
-
-  .slides-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  .environment-slide {
-    flex: 0 0 100%;
-    scroll-snap-align: start;
-    aspect-ratio: 16/9;
-    overflow: hidden;
-    border-radius: 12px;
-  }
-
-  .environment-slide img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  /* Arrow Navigation */
-  .slider-arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 48px;
-    height: 48px;
-    background-color: rgba(255, 255, 255, 0.8);
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 200ms ease;
-    z-index: 10;
-  }
-
-  .slider-arrow:hover {
-    background-color: white;
-    transform: translateY(-50%) scale(1.1);
-  }
-
-  .slider-arrow-left {
-    left: 16px;
-  }
-
-  .slider-arrow-right {
-    right: 16px;
-  }
-
-  /* Dot Navigation */
-  .slider-dots {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .slider-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: rgba(35, 96, 140, 0.3);
-    border: none;
-    cursor: pointer;
-    transition: all 200ms ease;
-  }
-
-  .slider-dot.active {
-    background-color: var(--color-enchunblue);
-    width: 32px;
-    border-radius: 6px;
-  }
-
-  /* Responsive Adjustments */
-  @media (min-width: 992px) {
-    .environment-slider {
-      max-width: 100%;
-    }
-  }
-
-  @media (max-width: 991px) {
-    .environment-slider {
-      max-width: 550px;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .section-video {
-      padding: 60px 16px;
-    }
-
-    .environment-slider {
-      max-width: 90vw;
-    }
-
-    .slider-arrow {
-      width: 40px;
-      height: 40px;
-    }
-
-    .slider-arrow-left {
-      left: 8px;
-    }
-
-    .slider-arrow-right {
-      right: 8px;
-    }
-  }
-</style>
-
 <script>
   // Environment Slider functionality
   function initEnvironmentSlider() {
-    const sliders = document.querySelectorAll('.environment-slider')
+    const sliders = document.querySelectorAll(".environment-slider");
 
     sliders.forEach((slider) => {
-      const container = slider.querySelector('.slides-container') as HTMLElement
-      const slides = slider.querySelectorAll('.environment-slide')
-      const dots = slider.querySelectorAll('.slider-dot')
-      const prevBtn = slider.querySelector('.slider-arrow-left') as HTMLButtonElement
-      const nextBtn = slider.querySelector('.slider-arrow-right') as HTMLButtonElement
+      const container = slider.querySelector(
+        ".slides-container",
+      ) as HTMLElement;
+      const slides = slider.querySelectorAll(".environment-slide");
+      const dots = slider.querySelectorAll(".slider-dot");
+      const prevBtn = slider.querySelector(
+        ".slider-arrow-left",
+      ) as HTMLButtonElement;
+      const nextBtn = slider.querySelector(
+        ".slider-arrow-right",
+      ) as HTMLButtonElement;
 
-      if (!container || slides.length === 0) return
+      if (!container || slides.length === 0) return;
 
-      let currentIndex = 0
-      const totalSlides = slides.length
-      let isDragging = false
-      let startPos = 0
-      let currentTranslate = 0
-      let prevTranslate = 0
-      let animationID: number
+      let currentIndex = 0;
+      const totalSlides = slides.length;
+      let isDragging = false;
+      let startPos = 0;
+      let currentTranslate = 0;
+      let prevTranslate = 0;
+      let animationID: number;
 
       // Update slider position
       const updateSlider = () => {
         container.scrollTo({
           left: currentIndex * container.offsetWidth,
-          behavior: 'smooth'
-        })
-        updateDots()
-      }
+          behavior: "smooth",
+        });
+        updateDots();
+      };
 
       // Update dots
       const updateDots = () => {
         dots.forEach((dot, index) => {
           if (index === currentIndex) {
-            dot.classList.add('active')
+            dot.classList.add(
+              "active",
+              "w-8",
+              "rounded-[6px]",
+              "bg-(--color-enchunblue)",
+            );
+            dot.classList.remove("w-3", "bg-(--color-enchunblue)/30");
           } else {
-            dot.classList.remove('active')
+            dot.classList.remove(
+              "active",
+              "w-8",
+              "rounded-[6px]",
+              "bg-(--color-enchunblue)",
+            );
+            dot.classList.add("w-3", "bg-(--color-enchunblue)/30");
           }
-        })
-      }
+        });
+      };
 
       // Go to specific slide
       const goToSlide = (index: number) => {
-        if (index < 0) index = totalSlides - 1
-        if (index >= totalSlides) index = 0
-        currentIndex = index
-        updateSlider()
-      }
+        if (index < 0) index = totalSlides - 1;
+        if (index >= totalSlides) index = 0;
+        currentIndex = index;
+        updateSlider();
+      };
 
       // Previous slide
-      prevBtn?.addEventListener('click', () => goToSlide(currentIndex - 1))
+      prevBtn?.addEventListener("click", () => goToSlide(currentIndex - 1));
 
       // Next slide
-      nextBtn?.addEventListener('click', () => goToSlide(currentIndex + 1))
+      nextBtn?.addEventListener("click", () => goToSlide(currentIndex + 1));
 
       // Dot navigation
       dots.forEach((dot, index) => {
-        dot.addEventListener('click', () => goToSlide(index))
-      })
+        dot.addEventListener("click", () => goToSlide(index));
+      });
 
       // Scroll snap detection
-      container.addEventListener('scroll', () => {
-        const slideIndex = Math.round(container.scrollLeft / container.offsetWidth)
+      container.addEventListener("scroll", () => {
+        const slideIndex = Math.round(
+          container.scrollLeft / container.offsetWidth,
+        );
         if (slideIndex !== currentIndex) {
-          currentIndex = slideIndex
-          updateDots()
+          currentIndex = slideIndex;
+          updateDots();
         }
-      })
+      });
 
       // Touch/swipe support
       const touchStart = (_index: number) => {
-        return function(event: TouchEvent) {
-          isDragging = true
-          startPos = event.touches[0].clientX
-          animationID = requestAnimationFrame(animation)
-          container.style.cursor = 'grabbing'
-        }
-      }
+        return function (event: TouchEvent) {
+          isDragging = true;
+          startPos = event.touches[0].clientX;
+          animationID = requestAnimationFrame(animation);
+          container.style.cursor = "grabbing";
+        };
+      };
 
       const touchEnd = () => {
-        isDragging = false
-        cancelAnimationFrame(animationID)
-        container.style.cursor = 'grab'
+        isDragging = false;
+        cancelAnimationFrame(animationID);
+        container.style.cursor = "grab";
 
-        const movedBy = currentTranslate - prevTranslate
+        const movedBy = currentTranslate - prevTranslate;
 
         if (movedBy < -50 && currentIndex < totalSlides - 1) {
-          currentIndex += 1
+          currentIndex += 1;
         } else if (movedBy > 50 && currentIndex > 0) {
-          currentIndex -= 1
+          currentIndex -= 1;
         }
 
-        goToSlide(currentIndex)
-      }
+        goToSlide(currentIndex);
+      };
 
       const touchMove = (event: TouchEvent) => {
         if (isDragging) {
-          const currentPosition = event.touches[0].clientX
-          currentTranslate = prevTranslate + currentPosition - startPos
+          const currentPosition = event.touches[0].clientX;
+          currentTranslate = prevTranslate + currentPosition - startPos;
         }
-      }
+      };
 
       const animation = () => {
-        if (isDragging) requestAnimationFrame(animation)
-      }
+        if (isDragging) requestAnimationFrame(animation);
+      };
 
       // Mouse events for desktop
-      let mouseStartPos = 0
-      let isMouseDown = false
+      let mouseStartPos = 0;
+      let isMouseDown = false;
 
-      container.addEventListener('mousedown', (e: MouseEvent) => {
-        isMouseDown = true
-        mouseStartPos = e.clientX
-        container.style.cursor = 'grabbing'
-      })
+      container.addEventListener("mousedown", (e: MouseEvent) => {
+        isMouseDown = true;
+        mouseStartPos = e.clientX;
+        container.style.cursor = "grabbing";
+      });
 
-      container.addEventListener('mouseup', (e: MouseEvent) => {
-        if (!isMouseDown) return
-        isMouseDown = false
-        container.style.cursor = 'grab'
+      container.addEventListener("mouseup", (e: MouseEvent) => {
+        if (!isMouseDown) return;
+        isMouseDown = false;
+        container.style.cursor = "grab";
 
-        const movedBy = e.clientX - mouseStartPos
+        const movedBy = e.clientX - mouseStartPos;
         if (movedBy < -50 && currentIndex < totalSlides - 1) {
-          currentIndex += 1
+          currentIndex += 1;
         } else if (movedBy > 50 && currentIndex > 0) {
-          currentIndex -= 1
+          currentIndex -= 1;
         }
-        goToSlide(currentIndex)
-      })
+        goToSlide(currentIndex);
+      });
 
-      container.addEventListener('mouseleave', () => {
-        isMouseDown = false
-        container.style.cursor = 'grab'
-      })
+      container.addEventListener("mouseleave", () => {
+        isMouseDown = false;
+        container.style.cursor = "grab";
+      });
 
       // Touch events
-      container.addEventListener('touchstart', touchStart(currentIndex))
-      container.addEventListener('touchend', touchEnd)
-      container.addEventListener('touchmove', touchMove)
+      container.addEventListener("touchstart", touchStart(currentIndex));
+      container.addEventListener("touchend", touchEnd);
+      container.addEventListener("touchmove", touchMove);
 
       // Keyboard navigation
-      slider.addEventListener('keydown', (e) => {
+      slider.addEventListener("keydown", (e) => {
         if (e instanceof KeyboardEvent) {
-          if (e.key === 'ArrowLeft') goToSlide(currentIndex - 1)
-          if (e.key === 'ArrowRight') goToSlide(currentIndex + 1)
+          if (e.key === "ArrowLeft") goToSlide(currentIndex - 1);
+          if (e.key === "ArrowRight") goToSlide(currentIndex + 1);
         }
-      })
+      });
 
       // Set initial state
-      container.style.cursor = 'grab'
-    })
+      container.style.cursor = "grab";
+    });
   }
 
   // Initialize when DOM is ready
-  document.addEventListener('DOMContentLoaded', initEnvironmentSlider)
-  if (document.readyState !== 'loading') {
-    initEnvironmentSlider()
+  document.addEventListener("DOMContentLoaded", initEnvironmentSlider);
+  if (document.readyState !== "loading") {
+    initEnvironmentSlider();
   }
 </script>
diff --git a/apps/frontend/src/sections/FeatureSection.astro b/apps/frontend/src/sections/FeatureSection.astro
index 495d162..52ec5e2 100644
--- a/apps/frontend/src/sections/FeatureSection.astro
+++ b/apps/frontend/src/sections/FeatureSection.astro
@@ -36,38 +36,35 @@ const features = [
     description: '除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單。',
   },
 ]
+import SectionHeader from '../components/SectionHeader.astro'
 ---
 
-<section class="section_feature bg-white px-4 py-[60px] md:px-5 md:py-[80px]" aria-labelledby="feature-heading">
+<section class="section_feature bg-white px-4 py-16 md:px-5 md:py-20" aria-labelledby="feature-heading">
   <div class="w-container mx-auto max-w-4xl">
     <!-- Section Header -->
-    <div class="section_header_w_line mb-[60px] text-center">
-      <h2 id="feature-heading" class="header_subtitle_head my-4 text-[1.75rem] font-bold leading-[1.2] text-[var(--color-enchunblue)] md:text-[2.25rem]">
-        {title}
-      </h2>
-      <p class="header_subtitle_paragraph mt-2 text-base font-normal text-[#666666]">
-        {subtitle}
-      </p>
-      <div class="divider_line mx-auto h-[2px] w-[100px] bg-[var(--color-enchunblue)]"></div>
-    </div>
+    <SectionHeader
+      title="恩群服務特色"
+      subtitle="Why you can trust us"
+      sectionBg="bg-white"
+    />
 
     <!-- Features Grid -->
-    <div class="grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2 lg:gap-6">
+    <div class="grid grid-cols-2 gap-1 md:grid-cols-2 md:gap-2 lg:gap-6">
       {
         features.map((feature) => (
         <div class="feature_card bg-white p-5 transition-all duration-[var(--transition-base)] hover:-translate-y-1 md:p-6 lg:p-8">
-          <div class="grid grid-cols-[120px_1fr] items-start gap-4 md:grid-cols-[110px_1fr] lg:grid-cols-[190px_1fr] lg:gap-6">
+          <div class="flex flex-col items-center gap-4 text-center md:flex-row md:items-start md:text-left lg:gap-6">
             <!-- Icon -->
-            <div class="flex w-full items-center justify-center">
+            <div class="flex w-full max-w-[100px] shrink-0 items-center justify-center md:max-w-[110px] lg:max-w-[190px]">
               <img src={feature.img} alt={feature.title} class="h-auto w-full object-contain" />
             </div>
-            
+
             <div class="flex flex-col gap-2">
               <!-- Title -->
-              <h3 class="font-['Noto_Sans_TC'] lg:text-3xl text-2xl font-semibold text-(--color-dark-blue)">{feature.title}</h3>
+              <h3 class="font-['Noto_Sans_TC'] text-2xl font-semibold text-(--color-dark-blue) lg:text-3xl">{feature.title}</h3>
 
               <!-- Description -->
-              <p class="font-['Noto_Sans_TC'] lg:text-base text-sm font-thin leading-[1.6] text-grey-2">{feature.description}</p>
+              <p class="font-['Noto_Sans_TC'] text-sm font-thin leading-[1.6] text-grey-2 lg:text-base">{feature.description}</p>
             </div>
           </div>
         </div>
diff --git a/apps/frontend/src/sections/PainpointSection.astro b/apps/frontend/src/sections/PainpointSection.astro
index ad0eab8..6931fb2 100644
--- a/apps/frontend/src/sections/PainpointSection.astro
+++ b/apps/frontend/src/sections/PainpointSection.astro
@@ -34,7 +34,7 @@ const painpoints = [
   {
     id: 'burning',
     title: '廣告行銷像燒錢',
-    icon: '💸',
+    img: '💸',
     description: '廣告預算投入很多，但看不到實際效果？感覺像在燒錢？',
   },
 ]
diff --git a/apps/frontend/src/sections/ServicesList.astro b/apps/frontend/src/sections/ServicesList.astro
index 017a673..cc72d44 100644
--- a/apps/frontend/src/sections/ServicesList.astro
+++ b/apps/frontend/src/sections/ServicesList.astro
@@ -158,7 +158,7 @@ const renderIcon = (service: ServicesListItem): string | null => {
 ---
 
 <section class="bg-white py-[60px] px-5 md:py-[60px] md:px-5 lg:py-[60px] lg:px-5" aria-labelledby="services-heading">
-  <div class="max-w-3xl mx-auto">
+  <div class="max-w-3xl mx-auto flex flex-col gap-6">
     {
       servicesList.map((service, index) => {
         const isOdd = index % 2 === 0
@@ -177,14 +177,14 @@ const renderIcon = (service: ServicesListItem): string | null => {
             <!-- Content Side -->
             <div class={`service-item-content order-2 ${isOdd ? 'md:order-1' : 'md:order-2'}`}>
               <!-- Category Tag with Icon -->
-              <div class="flex items-center gap-2 mb-4">
+              <div class="flex flex-col-reverse items-start gap-2 mb-4">
                 <span class="inline-block text-(--color-enchunblue) text-3xl font-light">
                   {service.category}
                 </span>
                 {/* Icon displayed next to category */}
                 {
                   iconHtml && (
-                    <span class="inline-flex items-center justify-center w-8 h-8 text-(--color-enchunblue)" set:html={iconHtml} />
+                    <span class="inline-flex items-center justify-start w-8 h-8 ml-2 scale-150 text-(--color-enchunblue)" set:html={iconHtml} />
                   )
                 }
               </div>
diff --git a/apps/frontend/src/sections/TeamsHero.astro b/apps/frontend/src/sections/TeamsHero.astro
index 7797979..b024899 100644
--- a/apps/frontend/src/sections/TeamsHero.astro
+++ b/apps/frontend/src/sections/TeamsHero.astro
@@ -36,7 +36,7 @@ const bgImageUrl = backgroundImage?.url || "";
     // Background color fallback
     !hasBackgroundImage && "bg-(--color-dark-blue)",
     // Background image styles
-    hasBackgroundImage && "bg-size-[120vw] bg-center bg-no-repeat",
+    hasBackgroundImage && "bg-cover bg-center bg-no-repeat",
     // Pull up to counteract layout's pt-20 padding (80px)
     "-mt-20",
     // Full viewport height
diff --git a/apps/frontend/src/styles/theme.css b/apps/frontend/src/styles/theme.css
index 9d0588c..dda87b2 100644
--- a/apps/frontend/src/styles/theme.css
+++ b/apps/frontend/src/styles/theme.css
@@ -136,6 +136,8 @@
     /* Amber - CTA/強調 */
     --color-tarawera: #2d3748;
     /* Tarawera - 深色文字 */
+    --color-pale-purple: oklch(62.664% 0.15547 290.298);
+    /* Pale Purple - CTA/強調 */
     --color-nav-link: var(--color-gray-200);
     /* Navigation Link - 使用灰色系 */