diff --git a/src/components/home/GovernmentSection.tsx b/src/components/home/GovernmentSection.tsx
index 0b2746102..a13d25385 100644
--- a/src/components/home/GovernmentSection.tsx
+++ b/src/components/home/GovernmentSection.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Card, CardContent } from '../ui/Card';
+import { Card } from '../ui/Card';
 import { useTranslation } from 'react-i18next';
 
 const GovernmentSection: FC = () => {
@@ -23,6 +23,8 @@ const GovernmentSection: FC = () => {
           <path d='M12 17.8L5.8 21 7 14.1 2 9.3l7-1L12 2l3 6.3 7 1-5 4.8 1.2 6.9-6.2-3.2z'></path>
         </svg>
       ),
+      image:
+        'https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1200,h_630/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/iohofxdjvly3h69yfiwv/San%20Miguel%20%2B%20Malaca%C3%B1ang%20Palace%20Guided%20Walking%20Tour%20in%20Manila%2C%20Philippines.jpg',
       link: '/government/executive',
     },
     {
@@ -43,6 +45,8 @@ const GovernmentSection: FC = () => {
           <path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'></path>
         </svg>
       ),
+      image:
+        'https://www.bworldonline.com/wp-content/uploads/2021/08/Congress-072417-PCOO.jpg',
       link: '/government/legislative',
     },
     {
@@ -65,12 +69,14 @@ const GovernmentSection: FC = () => {
           <path d='M5 16h14'></path>
         </svg>
       ),
+      image:
+        'https://sc.judiciary.gov.ph/wp-content/uploads/2023/05/SC-Facade-768x312.png',
       link: '/government/judiciary',
     },
   ];
 
   return (
-    <section className='py-12 bg-white'>
+    <section className='py-12 lg:px-24 bg-white'>
       <div className='container mx-auto px-4'>
         <div className='text-center mb-12'>
           <h2 className='text-2xl md:text-3xl font-bold text-gray-900 mb-4'>
@@ -84,31 +90,40 @@ const GovernmentSection: FC = () => {
         <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
           {branches.map(branch => (
             <Card key={branch.id} hoverable className='text-center'>
-              <CardContent className='p-6'>
-                <div className='flex justify-center mb-4'>{branch.icon}</div>
-                <h3 className='text-xl font-semibold mb-2 text-gray-900'>
-                  {branch.title}
-                </h3>
-                <p className='text-gray-800 mb-4'>{branch.description}</p>
-                <a
-                  href={branch.link}
-                  className='text-primary-600 hover:text-primary-700 font-medium inline-flex items-center transition-colors'
-                >
-                  {t('government.learnMore')}
-                  <svg
-                    className='ml-1 h-4 w-4'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    stroke='currentColor'
-                    strokeWidth='2'
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
+              <div>
+                <div className='relative'>
+                  <img
+                    src={branch.image}
+                    alt={branch.title}
+                    className='w-full h-56 object-cover'
+                  />
+                  <div className='absolute inset-0 bg-gradient-to-t from-white to-transparent pointer-events-none'></div>
+                </div>
+                <div className='p-6'>
+                  <h3 className='text-xl font-semibold mb-2 text-gray-900'>
+                    {branch.title}
+                  </h3>
+                  <p className='text-gray-800 mb-4'>{branch.description}</p>
+                  <a
+                    href={branch.link}
+                    className='text-primary-600 hover:text-primary-700 font-medium inline-flex items-center transition-colors'
                   >
-                    <line x1='5' y1='12' x2='19' y2='12'></line>
-                    <polyline points='12 5 19 12 12 19'></polyline>
-                  </svg>
-                </a>
-              </CardContent>
+                    {t('government.learnMore')}
+                    <svg
+                      className='ml-1 h-4 w-4'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeWidth='2'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                    >
+                      <line x1='5' y1='12' x2='19' y2='12'></line>
+                      <polyline points='12 5 19 12 12 19'></polyline>
+                    </svg>
+                  </a>
+                </div>
+              </div>
             </Card>
           ))}
         </div>
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index b9568bd39..e600c7970 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -68,7 +68,7 @@ const Hero: FC = () => {
   ];
 
   return (
-    <div className='bg-linear-to-r from-primary-600 to-primary-700 text-white py-12 md:py-24'>
+    <div className='bg-linear-to-r from-primary-600 to-primary-700 text-white py-12 lg:py-24 lg:px-24'>
       <div className='container mx-auto px-4'>
         <div className='grid grid-cols-1 lg:grid-cols-2 gap-8 items-center'>
           {/* Left section with title and search */}
@@ -99,7 +99,7 @@ const Hero: FC = () => {
           </div>
 
           {/* Right section with quick access services */}
-          <div className='bg-white/10 backdrop-blur-xs rounded-xl p-6 shadow-lg animate-slide-in'>
+          <div className='backdrop-blur-xs rounded-xl p-6 shadow-lg animate-slide-in'>
             <h2 className='text-2xl font-semibold mb-4'>
               {t('services.title')}
             </h2>
@@ -108,9 +108,9 @@ const Hero: FC = () => {
                 to={`/services?category=${findCategorySlug(
                   'Certificates and IDs'
                 )}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -130,9 +130,9 @@ const Hero: FC = () => {
                 to={`/services?category=${findCategorySlug(
                   'Business and Trade'
                 )}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -157,9 +157,9 @@ const Hero: FC = () => {
               </Link>
               <Link
                 to={`/services?category=${findCategorySlug('Education')}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -177,9 +177,9 @@ const Hero: FC = () => {
               </Link>
               <Link
                 to={`/services?category=${findCategorySlug('Health')}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-500 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-500 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
diff --git a/src/components/home/InfoWidgets.tsx b/src/components/home/InfoWidgets.tsx
index e0246d9de..599b0d7dc 100644
--- a/src/components/home/InfoWidgets.tsx
+++ b/src/components/home/InfoWidgets.tsx
@@ -18,7 +18,9 @@ const InfoWidgets: FC = () => {
 
   // Function to get weather icon component
   const getWeatherIcon = (iconName: string) => {
-    const Icon = LucideIcons[iconName as keyof typeof LucideIcons];
+    const Icon = LucideIcons[
+      iconName as keyof typeof LucideIcons
+    ] as React.ComponentType<{ className?: string }>;
     return Icon ? <Icon className='h-8 w-8' /> : null;
   };
 
@@ -77,7 +79,7 @@ const InfoWidgets: FC = () => {
   }, []);
 
   return (
-    <section className='py-12 bg-gray-50'>
+    <section className='py-12 lg:px-24 bg-gray-50'>
       <div className='container mx-auto px-4'>
         <div className='text-center mb-12'>
           <h2 className='text-3xl font-bold text-gray-900 mb-4'>
@@ -89,7 +91,7 @@ const InfoWidgets: FC = () => {
         </div>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
           {/* Weather Widget */}
-          <Card>
+          <Card className='shadow-md'>
             <CardHeader className='bg-primary-50'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.Cloud className='h-5 w-5 mr-2 text-primary-600' />
@@ -154,7 +156,7 @@ const InfoWidgets: FC = () => {
           </Card>
 
           {/* Forex Widget */}
-          <Card>
+          <Card className='shadow-md'>
             <CardHeader className='bg-primary-50'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.BarChart3 className='h-5 w-5 mr-2 text-primary-600' />
diff --git a/src/components/home/JoinUsStrip.tsx b/src/components/home/JoinUsStrip.tsx
index 34bbc3961..f3076053f 100644
--- a/src/components/home/JoinUsStrip.tsx
+++ b/src/components/home/JoinUsStrip.tsx
@@ -25,9 +25,6 @@ const JoinUsStrip: FC = () => {
         <div className='flex flex-col sm:flex-row items-center justify-between gap-2'>
           <div className='flex items-center gap-3'>
             <div className='flex items-center gap-2'>
-              <div className='p-1.5 bg-yellow-300/30 rounded-full'>
-                <UsersIcon className='h-4 w-4 text-yellow-200' />
-              </div>
               <span className='font-bold text-sm'>
                 {t('joinUs.stripTitle')}
               </span>
diff --git a/src/components/home/NewsSection.tsx b/src/components/home/NewsSection.tsx
index cf3afca2d..c5b32a8d7 100644
--- a/src/components/home/NewsSection.tsx
+++ b/src/components/home/NewsSection.tsx
@@ -9,7 +9,7 @@ const NewsSection: FC = () => {
   const { t } = useTranslation('common');
 
   return (
-    <section className='py-12 bg-gray-50'>
+    <section className='py-12 lg:px-24 bg-gray-50'>
       <div className='container mx-auto px-4'>
         <div className='flex justify-between items-center mb-8'>
           <h2 className='text-2xl md:text-3xl font-bold text-gray-900'>
diff --git a/src/components/home/PromotionBanner.tsx b/src/components/home/PromotionBanner.tsx
index 843a9ab15..16d143c4b 100644
--- a/src/components/home/PromotionBanner.tsx
+++ b/src/components/home/PromotionBanner.tsx
@@ -7,7 +7,7 @@ const PromotionBanner: FC = () => {
   const { t } = useTranslation('common');
 
   return (
-    <section className='bg-accent-500 py-12 text-white'>
+    <section className='bg-accent-500 py-12 lg:px-24 text-white'>
       <div className='container mx-auto px-4'>
         <div className='md:flex items-center justify-between'>
           <div>
diff --git a/src/components/home/ServicesSection.tsx b/src/components/home/ServicesSection.tsx
index 33e8bcf24..b2de5717e 100644
--- a/src/components/home/ServicesSection.tsx
+++ b/src/components/home/ServicesSection.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { Card, CardContent } from '../ui/Card';
+import { Card } from '../ui/Card';
 import serviceCategories from '../../data/service_categories.json';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -35,7 +35,9 @@ const ServicesSection: FC = () => {
       'Transport and Driving': 'Car',
     };
 
-    const Icon = LucideIcons[iconMap[category] || 'FileText'];
+    const Icon = LucideIcons[
+      iconMap[category] || 'FileText'
+    ] as React.ComponentType<{ className?: string }>;
     return Icon ? <Icon className='h-6 w-6' /> : null;
   };
 
@@ -46,7 +48,7 @@ const ServicesSection: FC = () => {
   ) as Category[];
 
   return (
-    <section className='py-12 bg-white'>
+    <section className='py-12 lg:px-24 bg-white'>
       <div className='container mx-auto px-4'>
         <div className='text-center mb-12'>
           <h2 className='text-2xl md:text-3xl font-bold text-gray-900 mb-4'>
@@ -57,46 +59,45 @@ const ServicesSection: FC = () => {
           </p>
         </div>
 
-        <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6'>
           {displayedCategories.map(category => (
             <Card
               key={category.slug}
               hoverable
-              className='border-t-4 border-primary-500'
+              className='border border-primary-200'
             >
-              <CardContent className='flex flex-col h-full p-6'>
-                <div className='flex gap-2'>
-                  <div className='bg-primary-100 text-primary-600 p-3 rounded-md mb-4 self-start'>
+              <div className='flex items-center justify-between gap-2 bg-gradient-to-tr from-primary-400 to-primary-500 px-4 py-4'>
+                <div className='flex items-center gap-2'>
+                  <div className=' text-white rounded-full'>
                     {getIcon(category.category)}
                   </div>
 
-                  <h3 className='text-lg font-semibold mb-4 text-gray-900'>
+                  <h3 className='text-lg font-semibold text-neutral-100'>
                     {category.category}
                   </h3>
                 </div>
 
-                <ul className='space-y-2 mb-6 grow'>
-                  {category.subcategories.slice(0, 3).map(subcategory => (
-                    <li key={subcategory.slug}>
-                      <Link
-                        to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
-                        className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
-                      >
-                        <span className='w-1.5 h-1.5 bg-gray-300 rounded-full mr-2'></span>
-                        {subcategory.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-
                 <Link
                   to={`/services?category=${category.slug}`}
-                  className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center'
+                  className='flex items-center gap-2 text-white'
                 >
-                  {t('services.viewAllCategory')} {category.category}
-                  <LucideIcons.ArrowRight className='ml-1 h-4 w-4' />
+                  <p className='text-sm text-primary-100'>View All</p>
+                  <LucideIcons.ArrowRight className='bg-primary-50 text-primary-500 rounded-full p-2 h-10 w-10' />
                 </Link>
-              </CardContent>
+              </div>
+              <ul className='space-y-2 mb-6 grow p-6'>
+                {category.subcategories.slice(0, 3).map(subcategory => (
+                  <li key={subcategory.slug}>
+                    <Link
+                      to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
+                      className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
+                    >
+                      <span className='w-1.5 h-1.5 bg-gray-300 rounded-full mr-2'></span>
+                      {subcategory.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
             </Card>
           ))}
         </div>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 5c045410d..3f86a1ccc 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -49,7 +49,7 @@ const Footer: FC = () => {
 
   return (
     <footer className='bg-gray-900 text-white'>
-      <div className='container mx-auto px-4 pt-12 pb-8'>
+      <div className='container mx-auto px-4 pt-12 pb-8 lg:px-24'>
         <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8'>
           <div className='col-span-1 md:col-span-2'>
             <div className='flex items-center mb-4'>
diff --git a/src/components/search/MeilisearchInstantSearch.css b/src/components/search/MeilisearchInstantSearch.css
index e3a84ff30..b5124fe37 100644
--- a/src/components/search/MeilisearchInstantSearch.css
+++ b/src/components/search/MeilisearchInstantSearch.css
@@ -33,6 +33,7 @@
 /* Ensure SearchBox input has good contrast and size */
 .ais-SearchBox-input {
   font-size: 1rem;
+  border-radius: 100px;
   /* Ensure space for right action buttons; left aligns like normal when typing */
   padding: 0.75rem 5rem 0.75rem 1rem;
 }
diff --git a/src/components/search/MeilisearchInstantSearch.tsx b/src/components/search/MeilisearchInstantSearch.tsx
index 9e80dfe2b..6025037c0 100644
--- a/src/components/search/MeilisearchInstantSearch.tsx
+++ b/src/components/search/MeilisearchInstantSearch.tsx
@@ -9,10 +9,11 @@ import {
   Stats,
 } from 'react-instantsearch';
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
+import type { BaseHit, Hit, SearchClient } from 'instantsearch.js';
 import 'instantsearch.css/themes/satellite.css'; // Or your preferred theme
 import './MeilisearchInstantSearch.css'; // For custom styles
 
-interface SearchHit {
+interface SearchHit extends Hit<BaseHit> {
   objectID: string;
   name?: string;
   office_name?: string;
@@ -130,7 +131,11 @@ const Hit: FC<HitProps> = ({ hit }) => {
           {hit.category && (
             <span>
               <Highlight
-                attribute={hit.category?.name ? 'category.name' : 'category'}
+                attribute={
+                  typeof hit.category === 'object' && hit.category.name
+                    ? 'category.name'
+                    : 'category'
+                }
                 hit={hit as SearchHit}
               />
               {' > '}
@@ -140,7 +145,9 @@ const Hit: FC<HitProps> = ({ hit }) => {
             <span>
               <Highlight
                 attribute={
-                  hit.subcategory?.name ? 'subcategory.name' : 'subcategory'
+                  typeof hit.subcategory === 'object' && hit.subcategory.name
+                    ? 'subcategory.name'
+                    : 'subcategory'
                 }
                 hit={hit as SearchHit}
               />{' '}
@@ -198,7 +205,7 @@ const MeilisearchInstantSearch: FC = () => {
 
   return (
     <InstantSearch
-      searchClient={searchClient}
+      searchClient={searchClient as unknown as SearchClient}
       indexName='bettergov'
       initialUiState={{
         bettergov: {
@@ -208,7 +215,7 @@ const MeilisearchInstantSearch: FC = () => {
       }}
     >
       <Configure hitsPerPage={10} />
-      <div className='ais-InstantSearch rounded-lg'>
+      <div className='ais-InstantSearch rounded-full'>
         <div className='mb-2 w-full' ref={searchContainerRef}>
           <SearchBox
             placeholder='Search for services, directory items...'
@@ -218,7 +225,7 @@ const MeilisearchInstantSearch: FC = () => {
               root: 'mb-2',
               form: 'relative',
               input:
-                'w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-hidden transition duration-150 ease-in-out',
+                'w-full p-3 pl-10 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-hidden transition duration-150 ease-in-out',
               submit:
                 'absolute top-0 right-0 h-full px-3 text-gray-800 hover:text-blue-600',
               reset:
diff --git a/src/components/widgets/CriticalHotlinesWidget.tsx b/src/components/widgets/CriticalHotlinesWidget.tsx
index 437362b86..e5ccc2a4a 100644
--- a/src/components/widgets/CriticalHotlinesWidget.tsx
+++ b/src/components/widgets/CriticalHotlinesWidget.tsx
@@ -23,8 +23,8 @@ const CriticalHotlinesWidget: FC<CriticalHotlinesWidgetProps> = ({
   );
 
   return (
-    <div className='bg-white rounded-lg shadow-md overflow-hidden border border-gray-200'>
-      <div className='bg-red-600 px-4 py-3 flex items-center justify-between'>
+    <div className='bg-white rounded-lg shadow-md overflow-hidden border h-full border-gray-200'>
+      <div className='bg-red-600 px-4 py-6 flex items-center justify-between'>
         <div className='flex items-center'>
           <AlertCircleIcon className='h-5 w-5 text-white mr-2' />
           <h3 className='font-bold text-white'>Critical Emergency Hotlines</h3>
@@ -37,11 +37,13 @@ const CriticalHotlinesWidget: FC<CriticalHotlinesWidgetProps> = ({
         </Link>
       </div>
 
-      <div className='p-4'>
-        <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+      <div className='p-6'>
+        <div className='grid grid-cols-1 gap-4'>
           {displayedHotlines.map((hotline, index) => (
             <div key={index} className='flex flex-col'>
-              <span className='font-medium text-gray-900'>{hotline.name}</span>
+              <span className='font-bold text-lg text-gray-900'>
+                {hotline.name}
+              </span>
               <div className='mt-1 space-y-1'>
                 {hotline.numbers.map((number, idx) => (
                   <a
@@ -49,8 +51,8 @@ const CriticalHotlinesWidget: FC<CriticalHotlinesWidgetProps> = ({
                     href={`tel:${number.replace(/\D/g, '')}`}
                     className='flex items-center text-blue-600 hover:underline'
                   >
-                    <PhoneIcon className='h-3 w-3 mr-1' />
-                    <span className='text-sm'>{number}</span>
+                    <PhoneIcon className='h-4 w-4 mr-1' />
+                    <span className='text-md'>{number}</span>
                   </a>
                 ))}
               </div>
diff --git a/src/pages/philippines/about/index.tsx b/src/pages/philippines/about/index.tsx
index b2134f9dc..feeaf705a 100644
--- a/src/pages/philippines/about/index.tsx
+++ b/src/pages/philippines/about/index.tsx
@@ -43,7 +43,7 @@ const AboutPhilippines: FC = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       {/* Hero Section */}
-      <div className='relative h-[60vh] overflow-hidden'>
+      <div className='relative h-[60vh] overflow-hidden lg:px-24'>
         <div className='absolute inset-0'>
           <img
             src='https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg'
@@ -67,7 +67,7 @@ const AboutPhilippines: FC = () => {
       </div>
 
       {/* Main Content */}
-      <div className='container mx-auto px-4 py-12'>
+      <div className='container mx-auto px-4 py-12 lg:px-24'>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>
           {/* Quick Facts */}
           <div className='lg:col-span-2 space-y-8'>
@@ -78,11 +78,9 @@ const AboutPhilippines: FC = () => {
               <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                 {facts.map((fact, index) => (
                   <Card key={index}>
-                    <CardContent className='p-6'>
+                    <CardContent className='p-6 bg-primary-500/20 border'>
                       <div className='flex items-start space-x-4'>
-                        <div className='p-3 bg-primary-100 rounded-lg text-primary-600'>
-                          {fact.icon}
-                        </div>
+                        <div className=''>{fact.icon}</div>
                         <div>
                           <h3 className='text-lg font-semibold text-gray-900 mb-2'>
                             {fact.title}
@@ -123,7 +121,7 @@ const AboutPhilippines: FC = () => {
                 </h3>
                 <div className='space-y-3'>
                   <div>
-                    <div className='text-sm font-medium text-gray-800'>
+                    <div className='text-sm font-medium text-gray-600'>
                       {t('about.keyInformation.items.officialLanguages.label')}
                     </div>
                     <div className='text-gray-900'>
@@ -131,7 +129,7 @@ const AboutPhilippines: FC = () => {
                     </div>
                   </div>
                   <div>
-                    <div className='text-sm font-medium text-gray-800'>
+                    <div className='text-sm font-medium text-gray-600'>
                       {t('about.keyInformation.items.government.label')}
                     </div>
                     <div className='text-gray-900'>
@@ -139,7 +137,7 @@ const AboutPhilippines: FC = () => {
                     </div>
                   </div>
                   <div>
-                    <div className='text-sm font-medium text-gray-800'>
+                    <div className='text-sm font-medium text-gray-600'>
                       {t('about.keyInformation.items.currency.label')}
                     </div>
                     <div className='text-gray-900'>
@@ -147,7 +145,7 @@ const AboutPhilippines: FC = () => {
                     </div>
                   </div>
                   <div>
-                    <div className='text-sm font-medium text-gray-800'>
+                    <div className='text-sm font-medium text-gray-600'>
                       {t('about.keyInformation.items.timeZone.label')}
                     </div>
                     <div className='text-gray-900'>
@@ -155,7 +153,7 @@ const AboutPhilippines: FC = () => {
                     </div>
                   </div>
                   <div>
-                    <div className='text-sm font-medium text-gray-800'>
+                    <div className='text-sm font-medium text-gray-600'>
                       {t('about.keyInformation.items.majorCities.label')}
                     </div>
                     <div className='text-gray-900'>
diff --git a/src/pages/philippines/culture/index.tsx b/src/pages/philippines/culture/index.tsx
index 3b942e0f0..5ffa978e2 100644
--- a/src/pages/philippines/culture/index.tsx
+++ b/src/pages/philippines/culture/index.tsx
@@ -11,7 +11,7 @@ import { Card, CardContent } from '../../../components/ui/Card';
 const PhilippinesCulture: FC = () => {
   const culturalAspects = [
     {
-      icon: <Music2Icon className='h-6 w-6' />,
+      icon: <Music2Icon className='h-4 w-4 lg:h-6 lg:w-6' />,
       title: 'Music and Dance',
       description:
         'Traditional and modern Filipino performing arts, from Tinikling to contemporary OPM',
@@ -19,14 +19,14 @@ const PhilippinesCulture: FC = () => {
         'https://images.pexels.com/photos/5299821/pexels-photo-5299821.jpeg',
     },
     {
-      icon: <UtensilsIcon className='h-6 w-6' />,
+      icon: <UtensilsIcon className='h-4 w-4 lg:h-6 lg:w-6' />,
       title: 'Cuisine',
       description:
         'Rich culinary traditions blending native, Chinese, Spanish, and American influences',
       image: 'https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg',
     },
     {
-      icon: <HeartIcon className='h-6 w-6' />,
+      icon: <HeartIcon className='h-4 w-4 lg:h-6 lg:w-6' />,
       title: 'Festivals',
       description:
         'Vibrant celebrations showcasing Filipino faith, culture, and community spirit',
@@ -34,7 +34,7 @@ const PhilippinesCulture: FC = () => {
         'https://images.pexels.com/photos/2663163/pexels-photo-2663163.jpeg',
     },
     {
-      icon: <UsersIcon className='h-6 w-6' />,
+      icon: <UsersIcon className='h-4 w-4 lg:h-6 lg:w-6' />,
       title: 'Social Values',
       description:
         'Strong family ties, respect for elders, and the spirit of Bayanihan',
@@ -42,7 +42,7 @@ const PhilippinesCulture: FC = () => {
         'https://images.pexels.com/photos/32326425/pexels-photo-32326425.jpeg',
     },
     {
-      icon: <PaletteIcon className='h-6 w-6' />,
+      icon: <PaletteIcon className='h-4 w-4 lg:h-6 lg:w-6' />,
       title: 'Arts and Crafts',
       description:
         'Traditional weaving, pottery, and contemporary Filipino visual arts',
@@ -54,7 +54,7 @@ const PhilippinesCulture: FC = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       {/* Hero Section */}
-      <div className='relative h-[60vh] overflow-hidden'>
+      <div className='relative h-[60vh] overflow-hidden lg:px-24'>
         <div className='absolute inset-0'>
           <img
             src='https://images.pexels.com/photos/20380277/pexels-photo-20380277.jpeg'
@@ -79,7 +79,7 @@ const PhilippinesCulture: FC = () => {
       </div>
 
       {/* Main Content */}
-      <div className='container mx-auto px-4 py-12'>
+      <div className='container mx-auto px-4 py-12 lg:px-24'>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>
           {/* Cultural Aspects */}
           <div className='lg:col-span-2'>
@@ -90,26 +90,26 @@ const PhilippinesCulture: FC = () => {
               <div className='grid gap-6'>
                 {culturalAspects.map((aspect, index) => (
                   <Card key={index}>
-                    <CardContent className='p-6'>
-                      <div className='flex items-start space-x-4'>
-                        <div className='p-3 bg-primary-100 rounded-lg text-primary-600'>
-                          {aspect.icon}
-                        </div>
-                        <div className='flex-1'>
-                          <h3 className='text-xl font-semibold text-gray-900 mb-2'>
-                            {aspect.title}
-                          </h3>
-                          <p className='text-gray-800 mb-4'>
-                            {aspect.description}
-                          </p>
-                          <img
-                            src={aspect.image}
-                            alt={aspect.title}
-                            className='w-full h-48 object-cover rounded-lg'
-                          />
+                    <div className='flex items-start space-x-4'>
+                      <div className='flex items-center gap-4'>
+                        <div className='flex flex-col gap-2 px-6 rounded-lg text-primary-600'>
+                          <span className='flex flex-col gap-0'>
+                            <h3 className='flex items-center gap-1 text-sm lg:text-xl font-semibold text-gray-900'>
+                              {aspect.title}
+                            </h3>
+                            <p className='text-gray-800 text-xs lg:text-base '>
+                              {aspect.description}
+                            </p>
+                          </span>
                         </div>
+
+                        <img
+                          src={aspect.image}
+                          alt={aspect.title}
+                          className='w-1/2 h-auto object-cover rounded-lg'
+                        />
                       </div>
-                    </CardContent>
+                    </div>
                   </Card>
                 ))}
               </div>
diff --git a/src/pages/philippines/history/index.tsx b/src/pages/philippines/history/index.tsx
index 3c29f5bfc..68569a5c7 100644
--- a/src/pages/philippines/history/index.tsx
+++ b/src/pages/philippines/history/index.tsx
@@ -40,7 +40,7 @@ const PhilippinesHistory: FC = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       {/* Hero Section */}
-      <div className='relative h-[60vh] overflow-hidden'>
+      <div className='relative h-[60vh] overflow-hidden lg:px-12'>
         <div className='absolute inset-0'>
           <img
             src='https://images.pexels.com/photos/19376770/pexels-photo-19376770/free-photo-of-women-dancing-in-red-traditional-clothing-in-festival.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
@@ -51,7 +51,7 @@ const PhilippinesHistory: FC = () => {
           <div className='absolute inset-0 bg-black/50' />
         </div>
         <div className='relative h-full flex items-center'>
-          <div className='container mx-auto px-4'>
+          <div className='container mx-auto px-4 lg:px-24'>
             <div className='max-w-3xl'>
               <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6'>
                 {t('history.hero.title')}
@@ -70,7 +70,7 @@ const PhilippinesHistory: FC = () => {
       </div>
 
       {/* Main Content */}
-      <div className='container mx-auto px-4 py-12'>
+      <div className='container mx-auto px-4 py-12 lg:px-24'>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>
           {/* Timeline */}
           <div className='lg:col-span-2'>
diff --git a/src/pages/philippines/regions/index.tsx b/src/pages/philippines/regions/index.tsx
index 5cb6ccbef..df2a232d3 100644
--- a/src/pages/philippines/regions/index.tsx
+++ b/src/pages/philippines/regions/index.tsx
@@ -80,7 +80,7 @@ const PhilippinesRegions: FC = () => {
     <div className='min-h-screen bg-gray-50'>
       <SEO {...seoData} />
       {/* Hero Section */}
-      <div className='relative h-[60vh] overflow-hidden'>
+      <div className='relative h-[60vh] overflow-hidden lg:px-12'>
         <div className='absolute inset-0'>
           <img
             src='https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg'
@@ -90,7 +90,7 @@ const PhilippinesRegions: FC = () => {
           <div className='absolute inset-0 bg-black/50' />
         </div>
         <div className='relative h-full flex items-center'>
-          <div className='container mx-auto px-4'>
+          <div className='container mx-auto px-4 lg:px-24'>
             <div className='max-w-3xl'>
               <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6'>
                 {t('regions.hero.title')}
@@ -104,7 +104,7 @@ const PhilippinesRegions: FC = () => {
       </div>
 
       {/* Main Content */}
-      <div className='container mx-auto px-4 py-12'>
+      <div className='container mx-auto px-4 py-12 lg:px-24'>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>
           {/* Regions Grid */}
           <div className='lg:col-span-2'>
diff --git a/src/types/index.ts b/src/types/index.ts
index 5990e7784..ca5ec9de0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -90,6 +90,7 @@ export interface WeatherData {
   humidity: number;
   windSpeed: number;
   description: string;
+  icon: string;
 }
 
 export interface ForexData {
@@ -101,11 +102,13 @@ export interface ForexData {
 }
 
 export interface NewsItem {
+  id: string;
   title: string;
-  summary: string;
-  url: string;
-  publishedAt: string;
-  source: string;
+  excerpt: string;
+  content: string;
+  date: string;
+  category: string;
+  imageUrl: string;
 }
 
 export interface BlogPost {