From bee8d6d8d57ec8273105002832f63fd1d8c23d8e Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 19:59:11 +0300
Subject: [PATCH 1/8] fix file link on resources page

---
 website2/src/app/clean-air-forum/layout.tsx   |  54 +++---
 website2/src/hooks/useResourceFilter.ts       |  41 ++++
 website2/src/types/index.ts                   |  21 +++
 website2/src/utils/string-utils.ts            |   6 +
 .../src/views/cleanairforum/TabNavigation.tsx |  40 ++--
 .../cleanairforum/resources/ResourceCard.tsx  |  60 ++++++
 .../cleanairforum/resources/ResourcePage.tsx  | 175 +++++-------------
 7 files changed, 225 insertions(+), 172 deletions(-)
 create mode 100644 website2/src/hooks/useResourceFilter.ts
 create mode 100644 website2/src/utils/string-utils.ts
 create mode 100644 website2/src/views/cleanairforum/resources/ResourceCard.tsx

diff --git a/website2/src/app/clean-air-forum/layout.tsx b/website2/src/app/clean-air-forum/layout.tsx
index 54f43a9fd1..8241bf6c22 100644
--- a/website2/src/app/clean-air-forum/layout.tsx
+++ b/website2/src/app/clean-air-forum/layout.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { Suspense } from 'react';
 
 import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
@@ -17,37 +16,40 @@ type CleanAirLayoutProps = {
 
 const CleanAirLayout: React.FC<CleanAirLayoutProps> = ({ children }) => {
   // Using the `useForumEvents` hook
-  const { forumEvents } = useForumEvents();
+  const { forumEvents, isLoading } = useForumEvents();
 
   // Extract the first event (if available)
   const eventData = forumEvents?.[0] || null;
 
+  // Loading state
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <ForumDataProvider data={eventData}>
-      <Suspense fallback={<Loading />}>
-        <div className="min-h-screen w-full flex flex-col">
-          {/* Navbar */}
-          <header className="sticky top-0 z-50">
-            <Navbar />
-          </header>
-
-          {/* Banner Section */}
-          <BannerSection data={eventData} />
-
-          {/* Main Content */}
-          <main className="flex-1 pb-8">{children}</main>
-
-          {/* Newsletter Section */}
-          <section className="my-16">
-            <NewsLetter />
-          </section>
-
-          {/* Footer */}
-          <footer>
-            <Footer />
-          </footer>
-        </div>
-      </Suspense>
+      <div className="min-h-screen w-full flex flex-col">
+        {/* Navbar */}
+        <header className="sticky top-0 z-50">
+          <Navbar />
+        </header>
+
+        {/* Banner Section */}
+        <BannerSection data={eventData} />
+
+        {/* Main Content */}
+        <main className="flex-1 pb-8">{children}</main>
+
+        {/* Newsletter Section */}
+        <section className="my-16">
+          <NewsLetter />
+        </section>
+
+        {/* Footer */}
+        <footer>
+          <Footer />
+        </footer>
+      </div>
     </ForumDataProvider>
   );
 };
diff --git a/website2/src/hooks/useResourceFilter.ts b/website2/src/hooks/useResourceFilter.ts
new file mode 100644
index 0000000000..30f90ab8bc
--- /dev/null
+++ b/website2/src/hooks/useResourceFilter.ts
@@ -0,0 +1,41 @@
+import { useMemo, useState } from 'react';
+
+import type { Resource } from '@/types/index';
+
+export const useResourceFilter = (
+  resources: Resource[],
+  itemsPerPage: number,
+) => {
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const filteredResources = useMemo(() => {
+    if (selectedCategory === 'All') return resources;
+    return resources.filter(
+      (resource) =>
+        resource.resource_category ===
+        selectedCategory.toLowerCase().replace(' ', '_'),
+    );
+  }, [resources, selectedCategory]);
+
+  const totalPages = Math.ceil(filteredResources.length / itemsPerPage);
+
+  const paginatedResources = useMemo(
+    () =>
+      filteredResources.slice(
+        (currentPage - 1) * itemsPerPage,
+        currentPage * itemsPerPage,
+      ),
+    [filteredResources, currentPage, itemsPerPage],
+  );
+
+  return {
+    selectedCategory,
+    setSelectedCategory,
+    currentPage,
+    setCurrentPage,
+    filteredResources,
+    paginatedResources,
+    totalPages,
+  };
+};
diff --git a/website2/src/types/index.ts b/website2/src/types/index.ts
index 85578ff142..b04173d81a 100644
--- a/website2/src/types/index.ts
+++ b/website2/src/types/index.ts
@@ -9,3 +9,24 @@ export interface PressArticle {
   website_category: string;
   article_tag: string;
 }
+
+export interface Resource {
+  id: number;
+  resource_file_url: string;
+  created: string;
+  modified: string;
+  is_deleted: boolean;
+  resource_title: string;
+  resource_link: string | null;
+  resource_file: string;
+  author_title: string;
+  resource_category:
+    | 'workshop_report'
+    | 'technical_report'
+    | 'toolkit'
+    | 'research_publication';
+  resource_authors: string;
+  order: number;
+}
+
+export type ResourceCategory = Resource['resource_category'];
diff --git a/website2/src/utils/string-utils.ts b/website2/src/utils/string-utils.ts
new file mode 100644
index 0000000000..6dd4fb6dd5
--- /dev/null
+++ b/website2/src/utils/string-utils.ts
@@ -0,0 +1,6 @@
+export const formatString = (category: string): string => {
+  return category
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
diff --git a/website2/src/views/cleanairforum/TabNavigation.tsx b/website2/src/views/cleanairforum/TabNavigation.tsx
index d51687e4bd..28b50e024f 100644
--- a/website2/src/views/cleanairforum/TabNavigation.tsx
+++ b/website2/src/views/cleanairforum/TabNavigation.tsx
@@ -1,31 +1,33 @@
 'use client';
-import { usePathname, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+
+const tabs = [
+  { label: 'About', value: '/clean-air-network' },
+  { label: 'Membership', value: '/clean-air-network/membership' },
+  { label: 'Events', value: '/clean-air-network/events' },
+  { label: 'Resources', value: '/clean-air-network/resources' },
+];
 
 const TabNavigation: React.FC = () => {
-  const router = useRouter();
   const pathname = usePathname();
   const [activeTab, setActiveTab] = useState(pathname);
 
-  const tabs = [
-    { label: 'About', value: '/clean-air-network' },
-    { label: 'Membership', value: '/clean-air-network/membership' },
-    { label: 'Events', value: '/clean-air-network/events' },
-    { label: 'Resources', value: '/clean-air-network/resources' },
-  ];
-
-  const handleTabClick = (value: string) => {
-    setActiveTab(value);
-    router.push(value);
-  };
+  useEffect(() => {
+    setActiveTab(pathname);
+  }, [pathname]);
 
   return (
-    <div className="border-y pt-4 overflow-x-auto bg-white border-gray-200">
+    <nav className="border-y pt-4 overflow-x-auto bg-white border-gray-200">
       <div className="flex space-x-8 max-w-5xl mx-auto px-4 lg:px-0">
         {tabs.map((tab) => (
-          <button
+          <Link
             key={tab.value}
-            onClick={() => handleTabClick(tab.value)}
+            href={tab.value}
+            onClick={() => setActiveTab(tab.value)}
             className={`pb-2 text-[14px] font-normal transition-colors duration-300 ${
               activeTab === tab.value
                 ? 'text-blue-600 border-b-2 border-blue-600'
@@ -33,10 +35,10 @@ const TabNavigation: React.FC = () => {
             }`}
           >
             {tab.label}
-          </button>
+          </Link>
         ))}
       </div>
-    </div>
+    </nav>
   );
 };
 
diff --git a/website2/src/views/cleanairforum/resources/ResourceCard.tsx b/website2/src/views/cleanairforum/resources/ResourceCard.tsx
new file mode 100644
index 0000000000..4fedfcb1c9
--- /dev/null
+++ b/website2/src/views/cleanairforum/resources/ResourceCard.tsx
@@ -0,0 +1,60 @@
+import type React from 'react';
+
+import { CustomButton } from '@/components/ui';
+import type { Resource } from '@/types/index';
+import { formatString } from '@/utils/string-utils';
+
+interface ResourceCardProps {
+  resource: Resource;
+}
+
+const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => (
+  <div className="bg-white rounded-lg p-5 lg:p-8 shadow">
+    <p className="text-blue-500 text-lg font-semibold mb-2">
+      {formatString(resource.resource_category)}
+    </p>
+    <h3 className="text-2xl lg:text-4xl font-semibold mb-2">
+      {resource.resource_title}
+    </h3>
+    <div className="mb-4">
+      <p className="font-semibold text-lg">{resource.author_title}</p>
+      <p>{resource.resource_authors}</p>
+    </div>
+    <div className="flex flex-wrap gap-4">
+      {resource.resource_link && (
+        <CustomButton
+          className="text-black bg-transparent border border-gray-800 hover:bg-gray-100"
+          onClick={() => {
+            if (resource.resource_link) {
+              window.open(
+                resource.resource_link,
+                '_blank',
+                'noopener,noreferrer',
+              );
+            }
+          }}
+        >
+          Read action plan →
+        </CustomButton>
+      )}
+      {resource.resource_file && resource.resource_file_url && (
+        <CustomButton
+          className="text-white bg-blue-500 border border-blue-500 hover:bg-blue-600"
+          onClick={() => {
+            if (resource.resource_file_url) {
+              window.open(
+                resource.resource_file_url,
+                '_blank',
+                'noopener,noreferrer',
+              );
+            }
+          }}
+        >
+          Download
+        </CustomButton>
+      )}
+    </div>
+  </div>
+);
+
+export default ResourceCard;
diff --git a/website2/src/views/cleanairforum/resources/ResourcePage.tsx b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
index a2b8e7295d..0d31955895 100644
--- a/website2/src/views/cleanairforum/resources/ResourcePage.tsx
+++ b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
@@ -1,10 +1,9 @@
 'use client';
 
 import Image from 'next/image';
-import React, { useMemo, useState } from 'react';
+import type React from 'react';
 
 import {
-  CustomButton,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -13,73 +12,48 @@ import {
   Pagination,
 } from '@/components/ui';
 import { useCleanAirResources } from '@/hooks/useApiHooks';
-
-const ResourcePage = () => {
+import { useResourceFilter } from '@/hooks/useResourceFilter';
+import type { Resource } from '@/types/index';
+
+import ResourceCard from './ResourceCard';
+
+const categories = [
+  'All',
+  'Toolkit',
+  'Technical Report',
+  'Workshop Report',
+  'Research Publication',
+];
+
+const LoadingSkeleton = ({ itemsPerPage }: { itemsPerPage: number }) => (
+  <div className="space-y-6">
+    {Array.from({ length: itemsPerPage }).map((_, index) => (
+      <div key={index} className="bg-white rounded-lg p-5 lg:p-8 animate-pulse">
+        <div className="h-5 bg-blue-500 rounded w-1/4 mb-4"></div>
+        <div className="h-10 bg-gray-300 rounded w-full mb-4"></div>
+        <div className="h-6 bg-gray-300 rounded w-3/4 mb-2"></div>
+        <div className="h-6 bg-gray-300 rounded w-1/2 mb-4"></div>
+        <div className="h-10 bg-gray-200 rounded w-40"></div>
+      </div>
+    ))}
+  </div>
+);
+
+const ResourcePage: React.FC = () => {
   const { cleanAirResources, isLoading, isError } = useCleanAirResources();
-  const [selectedCategory, setSelectedCategory] = useState<string>('All');
-  const [currentPage, setCurrentPage] = useState<number>(1);
   const itemsPerPage = 3;
 
-  // Categories for the dropdown filter
-  const categories = [
-    'All',
-    'Toolkits',
-    'Technical Reports',
-    'Workshop Reports',
-    'Research Publications',
-  ];
-
-  // Map and filter resources based on the selected category
-  const filteredResources = useMemo(() => {
-    if (selectedCategory === 'All') return cleanAirResources || [];
-
-    const categoryMap: { [key: string]: string } = {
-      Toolkits: 'toolkit',
-      'Technical Reports': 'technical_report',
-      'Workshop Reports': 'workshop_report',
-      'Research Publications': 'research_publication',
-    };
-
-    return (
-      cleanAirResources?.filter(
-        (resource: any) =>
-          resource.resource_category === categoryMap[selectedCategory],
-      ) || []
-    );
-  }, [cleanAirResources, selectedCategory]);
-
-  // Pagination logic
-  const totalPages = Math.ceil(filteredResources.length / itemsPerPage);
-  const paginatedResources = useMemo(
-    () =>
-      filteredResources.slice(
-        (currentPage - 1) * itemsPerPage,
-        currentPage * itemsPerPage,
-      ),
-    [filteredResources, currentPage, itemsPerPage],
-  );
-
-  // Loading Skeleton Component
-  const LoadingSkeleton = () => (
-    <div className="space-y-6">
-      {Array.from({ length: itemsPerPage }).map((_, index) => (
-        <div
-          key={index}
-          className="bg-white rounded-lg p-5 lg:p-8 animate-pulse"
-        >
-          <div className="h-5 bg-blue-500 rounded w-1/4 mb-4"></div>
-          <div className="h-10 bg-gray-300 rounded w-full mb-4"></div>
-          <div className="h-6 bg-gray-300 rounded w-3/4 mb-2"></div>
-          <div className="h-6 bg-gray-300 rounded w-1/2 mb-4"></div>
-          <div className="h-10 bg-gray-200 rounded w-40"></div>
-        </div>
-      ))}
-    </div>
-  );
+  const {
+    selectedCategory,
+    setSelectedCategory,
+    currentPage,
+    setCurrentPage,
+    paginatedResources,
+    totalPages,
+  } = useResourceFilter(cleanAirResources || [], itemsPerPage);
 
   return (
     <div className="py-8 space-y-16">
-      {/* Main banner section */}
       <section className="max-w-5xl mx-auto w-full">
         <div className="py-8 px-4 lg:px-0 flex flex-col items-center space-y-6 md:space-y-8">
           <div className="w-full">
@@ -89,19 +63,18 @@ const ResourcePage = () => {
               width={800}
               height={400}
               className="rounded-lg object-contain w-full"
+              priority
             />
           </div>
         </div>
       </section>
 
-      {/* Resource Filter and List */}
       <section className="px-4 bg-blue-50 lg:px-0 py-16">
         <div className="max-w-5xl mx-auto w-full space-y-8">
           <div className="flex flex-col md:flex-row justify-between items-center">
             <h2 className="text-2xl font-semibold mb-4 md:mb-0">
               Resource Center
             </h2>
-            {/* Filter Dropdown */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button className="px-4 py-2 bg-gray-200 rounded-lg focus:outline-none">
@@ -124,82 +97,30 @@ const ResourcePage = () => {
             </DropdownMenu>
           </div>
 
-          {/* Loading and Error States */}
-          {isLoading && <LoadingSkeleton />}
+          {isLoading && <LoadingSkeleton itemsPerPage={itemsPerPage} />}
           {isError && (
             <NoData message="Failed to load resources. Please try again later." />
           )}
 
-          {/* Resource Cards */}
           {!isLoading && !isError && paginatedResources.length === 0 && (
             <NoData />
           )}
 
           {!isLoading && !isError && paginatedResources.length > 0 && (
             <div className="space-y-6">
-              {paginatedResources.map((resource: any, index: any) => (
-                <div
-                  key={`${resource.resource_title}-${index}`}
-                  className="bg-white rounded-lg p-5 lg:p-8 shadow"
-                >
-                  <p className="text-blue-500 text-lg font-semibold mb-2">
-                    {resource.resource_category.toUpperCase()}
-                  </p>
-                  <h3 className="text-2xl lg:text-4xl font-semibold mb-2">
-                    {resource.resource_title}
-                  </h3>
-                  <div className="mb-4">
-                    <p className="font-semibold text-lg">Created by</p>
-                    <p>{resource.resource_authors}</p>
-                  </div>
-                  <div className="flex flex-wrap gap-4">
-                    {/* Read Action Plan Button */}
-                    {resource.resource_link && (
-                      <CustomButton
-                        className="text-black bg-transparent border border-gray-800 hover:bg-gray-100"
-                        onClick={() =>
-                          window.open(
-                            resource.resource_link,
-                            '_blank',
-                            'noopener,noreferrer',
-                          )
-                        }
-                      >
-                        Read action plan →
-                      </CustomButton>
-                    )}
-
-                    {/* Download Button */}
-                    {resource.resource_file && (
-                      <CustomButton
-                        className="text-white bg-blue-500 border border-blue-500 hover:bg-blue-600"
-                        onClick={() =>
-                          window.open(
-                            resource.resource_file,
-                            '_blank',
-                            'noopener,noreferrer',
-                          )
-                        }
-                      >
-                        Download
-                      </CustomButton>
-                    )}
-                  </div>
-                </div>
+              {paginatedResources.map((resource: Resource) => (
+                <ResourceCard key={resource.id} resource={resource} />
               ))}
             </div>
           )}
 
-          {/* Pagination */}
-          {!isLoading &&
-            !isError &&
-            filteredResources.length > itemsPerPage && (
-              <Pagination
-                totalPages={totalPages}
-                currentPage={currentPage}
-                onPageChange={setCurrentPage}
-              />
-            )}
+          {!isLoading && !isError && totalPages > 1 && (
+            <Pagination
+              totalPages={totalPages}
+              currentPage={currentPage}
+              onPageChange={setCurrentPage}
+            />
+          )}
         </div>
       </section>
     </div>

From 219d2b4aa9d53247d109334a040b5a9917866397 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 20:00:23 +0300
Subject: [PATCH 2/8] text change

---
 website2/src/views/cleanairforum/resources/ResourceCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website2/src/views/cleanairforum/resources/ResourceCard.tsx b/website2/src/views/cleanairforum/resources/ResourceCard.tsx
index 4fedfcb1c9..adb27ee6aa 100644
--- a/website2/src/views/cleanairforum/resources/ResourceCard.tsx
+++ b/website2/src/views/cleanairforum/resources/ResourceCard.tsx
@@ -34,7 +34,7 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => (
             }
           }}
         >
-          Read action plan →
+          Read more →
         </CustomButton>
       )}
       {resource.resource_file && resource.resource_file_url && (

From f80b4e5e53b11dada64925fa8c9997d96b07279f Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 21:26:59 +0300
Subject: [PATCH 3/8] set up main config settings for whole website

---
 website2/src/app/legal/layout.tsx             |   5 +-
 .../components/dialogs/EngagementDialog.tsx   |   5 +-
 .../src/components/layouts/ActionButtons.tsx  |   5 +-
 .../src/components/layouts/ActionButtons2.tsx |   6 +-
 website2/src/components/layouts/Footer.tsx    |   4 +-
 website2/src/components/layouts/Highlight.tsx |   6 +-
 website2/src/components/layouts/Navbar.tsx    |   5 +-
 .../src/components/layouts/NewsLetter.tsx     |   5 +-
 .../components/layouts/NotificationBanner.tsx |  57 +--
 website2/src/components/ui/Pagination.tsx     |  61 ++-
 website2/src/configs/mainConfigs.ts           |  13 +
 website2/src/views/about/AboutPage.tsx        | 417 +++++++++---------
 website2/src/views/careers/CareerPage.tsx     | 215 ++++-----
 website2/src/views/careers/DetailsPage.tsx    |   7 +-
 .../src/views/cleanairforum/FeaturedEvent.tsx |   9 +-
 .../views/cleanairforum/PaginatedSection.tsx  |   3 +-
 .../views/cleanairforum/RegisterBanner.tsx    |   3 +-
 .../src/views/cleanairforum/TabNavigation.tsx |  20 +-
 .../cleanairforum/resources/ResourcePage.tsx  |   1 +
 .../src/views/events/EventCardsSection.tsx    |   5 +-
 website2/src/views/events/EventPage.tsx       |  21 +-
 website2/src/views/events/SingleEvent.tsx     | 341 +++++++-------
 .../views/home/AnalyticsContentSection.tsx    |   5 +-
 .../src/views/home/AppDownloadSection.tsx     |   6 +-
 website2/src/views/home/FeaturedCarousel.tsx  |   5 +-
 website2/src/views/home/HomePlayerSection.tsx |   5 +-
 website2/src/views/home/HomeStatsSection.tsx  |   3 +-
 website2/src/views/legal/AirQoDataPage.tsx    |   2 +-
 website2/src/views/legal/PP_Page.tsx          |   2 +-
 website2/src/views/legal/PRP_Page.tsx         |   2 +-
 website2/src/views/legal/TOSPage.tsx          |   2 +-
 website2/src/views/legal/Tabsection.tsx       |  46 +-
 website2/src/views/press/PressPage.tsx        |  10 +-
 .../src/views/publications/ResourcePage.tsx   |   6 +-
 .../solutions/AfricanCities/AfricanCities.tsx |   3 +-
 .../AfricanCities/AfricanCityPage.tsx         |   5 +-
 .../solutions/communities/CommunityPage.tsx   |  11 +-
 website2/tsconfig.json                        |   3 +-
 38 files changed, 738 insertions(+), 592 deletions(-)
 create mode 100644 website2/src/configs/mainConfigs.ts

diff --git a/website2/src/app/legal/layout.tsx b/website2/src/app/legal/layout.tsx
index d712dc909d..09908370d0 100644
--- a/website2/src/app/legal/layout.tsx
+++ b/website2/src/app/legal/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import React from 'react';
 
 import MainLayout from '@/components/layouts/MainLayout';
+import mainConfig from '@/configs/mainConfigs';
 import TabSection from '@/views/legal/Tabsection';
 
 export const metadata: Metadata = {
@@ -51,7 +52,9 @@ const LegalPageLayout: React.FC<LegalPageLayoutProps> = ({ children }) => {
   return (
     <MainLayout>
       <TabSection />
-      <main className="legal-page-content">{children}</main>
+      <main className={`${mainConfig.containerClass} legal-page-content`}>
+        {children}
+      </main>
     </MainLayout>
   );
 };
diff --git a/website2/src/components/dialogs/EngagementDialog.tsx b/website2/src/components/dialogs/EngagementDialog.tsx
index 1aab405e97..0ad66e1528 100644
--- a/website2/src/components/dialogs/EngagementDialog.tsx
+++ b/website2/src/components/dialogs/EngagementDialog.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { FiArrowLeft } from 'react-icons/fi';
 
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch, useSelector } from '@/hooks';
 import { postContactUs } from '@/services/externalService';
 import { closeModal } from '@/store/slices/modalSlice';
@@ -349,7 +350,9 @@ const EngagementDialog = () => {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-5xl max-h-[90vh] mx-auto p-0 overflow-x-hidden overflow-y-auto md:overflow-hidden">
+      <DialogContent
+        className={`${mainConfig.containerClass} max-h-[90vh] p-0 overflow-x-hidden overflow-y-auto md:overflow-hidden`}
+      >
         <div className="flex flex-col lg:flex-row">
           {/* Left Side - Breadcrumb and Text with Animation */}
           <motion.div
diff --git a/website2/src/components/layouts/ActionButtons.tsx b/website2/src/components/layouts/ActionButtons.tsx
index 7a96a7681a..fc47d398f0 100644
--- a/website2/src/components/layouts/ActionButtons.tsx
+++ b/website2/src/components/layouts/ActionButtons.tsx
@@ -2,6 +2,7 @@
 import { useRouter } from 'next/navigation';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch } from '@/hooks';
 import { openModal } from '@/store/slices/modalSlice';
 
@@ -11,7 +12,9 @@ const ActionButtons = () => {
   const router = useRouter();
   const dispatch = useDispatch();
   return (
-    <div className="flex flex-col md:flex-row gap-6 w-full max-w-5xl mx-auto">
+    <div
+      className={`flex flex-col md:flex-row gap-6 w-full ${mainConfig.containerClass}`}
+    >
       {/* Card 1 */}
       <CustomButton
         onClick={() => {
diff --git a/website2/src/components/layouts/ActionButtons2.tsx b/website2/src/components/layouts/ActionButtons2.tsx
index 67883d54eb..ae6f58f9ec 100644
--- a/website2/src/components/layouts/ActionButtons2.tsx
+++ b/website2/src/components/layouts/ActionButtons2.tsx
@@ -1,11 +1,15 @@
 'use client';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
+
 import { CustomButton } from '../ui';
 
 const ActionButtons2 = () => {
   return (
-    <div className="flex flex-col md:flex-row gap-6 w-full max-w-5xl mx-auto">
+    <div
+      className={`flex flex-col md:flex-row gap-6 w-full ${mainConfig.containerClass}`}
+    >
       {/* Card 1 */}
       <CustomButton
         onClick={() => {
diff --git a/website2/src/components/layouts/Footer.tsx b/website2/src/components/layouts/Footer.tsx
index 1bff44d4c6..24c76d3f8e 100644
--- a/website2/src/components/layouts/Footer.tsx
+++ b/website2/src/components/layouts/Footer.tsx
@@ -8,6 +8,8 @@ import {
   FaYoutube,
 } from 'react-icons/fa';
 
+import mainConfig from '@/configs/mainConfigs';
+
 import CountrySelectorDialog from '../sections/footer/CountrySelectorDialog';
 import MonitorDisplay from '../sections/footer/MonitorDisplay';
 import ScrollToTopButton from './ScrollToTopButton';
@@ -17,7 +19,7 @@ const Footer = () => {
   return (
     <footer
       id="WebsiteFooter"
-      className="relative py-8 px-4 max-w-5xl mx-auto text-[14px]"
+      className={`relative py-8 px-4 ${mainConfig.containerClass} text-[14px]`}
     >
       <ScrollToTopButton />
       {/* Top Section with Grid */}
diff --git a/website2/src/components/layouts/Highlight.tsx b/website2/src/components/layouts/Highlight.tsx
index 14e5d08521..c4d1f338dd 100644
--- a/website2/src/components/layouts/Highlight.tsx
+++ b/website2/src/components/layouts/Highlight.tsx
@@ -2,9 +2,13 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
+
 const Highlight = () => {
   return (
-    <div className="flex flex-col lg:flex-row items-center justify-center p-8 lg:p-14 bg-[#EBFFF5] dark:bg-[#1F2937] lg:rounded-xl max-w-5xl mx-auto">
+    <div
+      className={`flex flex-col lg:flex-row items-center justify-center p-8 lg:p-14 bg-[#EBFFF5] dark:bg-[#1F2937] lg:rounded-xl ${mainConfig.containerClass}`}
+    >
       {/* Left section: Portrait */}
       <div className="flex justify-center lg:justify-end items-center w-full lg:w-1/2 mb-8 lg:mb-0 lg:mr-12">
         <Image
diff --git a/website2/src/components/layouts/Navbar.tsx b/website2/src/components/layouts/Navbar.tsx
index d2fb462521..b29651c4df 100644
--- a/website2/src/components/layouts/Navbar.tsx
+++ b/website2/src/components/layouts/Navbar.tsx
@@ -17,6 +17,7 @@ import {
   NavigationMenuTrigger,
   NavigationMenuViewport,
 } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch } from '@/hooks';
 import { openModal } from '@/store/slices/modalSlice';
 import TabNavigation from '@/views/cleanairforum/TabNavigation';
@@ -185,7 +186,9 @@ const Navbar: React.FC = () => {
     >
       {!pathname.startsWith('/clean-air-network') && <NotificationBanner />}
       <nav className="w-full bg-white p-4">
-        <div className="flex items-center justify-between max-w-5xl mx-auto">
+        <div
+          className={`flex items-center justify-between ${mainConfig.containerClass}`}
+        >
           {/* Logo Section */}
           <Link href="/" passHref className="flex items-center">
             <Image
diff --git a/website2/src/components/layouts/NewsLetter.tsx b/website2/src/components/layouts/NewsLetter.tsx
index 917e0f52e2..45c3e553cf 100644
--- a/website2/src/components/layouts/NewsLetter.tsx
+++ b/website2/src/components/layouts/NewsLetter.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { subscribeToNewsletter } from '@/services/externalService';
 
 const NewsLetter: React.FC = () => {
@@ -45,7 +46,9 @@ const NewsLetter: React.FC = () => {
 
   return (
     <section className="bg-blue-50 py-28 px-4">
-      <div className="max-w-5xl mx-auto flex flex-col lg:flex-row items-center lg:items-start lg:justify-between gap-12">
+      <div
+        className={`${mainConfig.containerClass} flex flex-col lg:flex-row items-center lg:items-start lg:justify-between gap-12`}
+      >
         {/* Header Section */}
         <div className="lg:w-1/2 text-center lg:text-left space-y-4">
           <h2 className="text-2xl md:text-[40px] font-bold text-blue-600">
diff --git a/website2/src/components/layouts/NotificationBanner.tsx b/website2/src/components/layouts/NotificationBanner.tsx
index 7dbe7b0955..1627db1531 100644
--- a/website2/src/components/layouts/NotificationBanner.tsx
+++ b/website2/src/components/layouts/NotificationBanner.tsx
@@ -1,16 +1,21 @@
 'use client';
+
 import { motion } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import React from 'react';
+import Link from 'next/link';
+import type React from 'react';
 import { FaArrowRightLong } from 'react-icons/fa6';
+
 // import { FiGlobe } from 'react-icons/fi';
+import mainConfig from '@/configs/mainConfigs';
 
-const NotificationBanner: React.FC = () => {
-  const router = useRouter();
+const CLEAN_AIR_NETWORK_ROUTE = '/clean-air-network';
 
+const NotificationBanner: React.FC = () => {
   return (
     <div className="bg-blue-50 text-[14px] text-gray-700">
-      <div className="py-[11px] px-4 lg:px-0 flex justify-end items-center max-w-5xl mx-auto">
+      <div
+        className={`py-[11px] px-4 lg:px-0 flex justify-end items-center ${mainConfig.containerClass}`}
+      >
         {/* Language Selector */}
         {/* <div className="flex items-center space-x-2">
           <FiGlobe className="w-4 h-4" />
@@ -18,29 +23,25 @@ const NotificationBanner: React.FC = () => {
         </div> */}
 
         {/* CLEAN-AIR Network Link */}
-        <div
-          onClick={() => router.push('/clean-air-network')}
-          className="items-center space-x-2 hidden md:flex cursor-pointer"
-        >
-          <span className="text-sm font-medium">
-            Join the CLEAN-AIR Network
-          </span>
-          <motion.span
-            className="text-blue-600 hover:text-blue-800 flex items-center"
-            animate={{ x: [0, 4, 0] }}
-            transition={{ duration: 1.5, repeat: Infinity }}
-          >
-            Learn more <FaArrowRightLong className="ml-2 w-4 h-4" />
-          </motion.span>
-        </div>
-        <div
-          onClick={() => router.push('/clean-air-network')}
-          className="items-center space-x-2 flex md:hidden cursor-pointer"
-        >
-          <span className="text-[10px] text-blue-600 hover:text-blue-800 font-medium">
-            Join the CLEAN-AIR Network
-          </span>
-        </div>
+        <Link href={CLEAN_AIR_NETWORK_ROUTE}>
+          <div className="items-center space-x-2 hidden md:flex cursor-pointer">
+            <span className="text-sm font-medium">
+              Join the CLEAN-AIR Network
+            </span>
+            <motion.span
+              className="text-blue-600 hover:text-blue-800 flex items-center"
+              animate={{ x: [0, 4, 0] }}
+              transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY }}
+            >
+              Learn more <FaArrowRightLong className="ml-2 w-4 h-4" />
+            </motion.span>
+          </div>
+          <div className="items-center space-x-2 flex md:hidden cursor-pointer">
+            <span className="text-[10px] text-blue-600 hover:text-blue-800 font-medium">
+              Join the CLEAN-AIR Network
+            </span>
+          </div>
+        </Link>
       </div>
     </div>
   );
diff --git a/website2/src/components/ui/Pagination.tsx b/website2/src/components/ui/Pagination.tsx
index 65959094ca..5adc09c6dd 100644
--- a/website2/src/components/ui/Pagination.tsx
+++ b/website2/src/components/ui/Pagination.tsx
@@ -1,61 +1,90 @@
-import React from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
 
 interface PaginationProps {
   totalPages: number;
   currentPage: number;
   onPageChange: (page: number) => void;
+  scrollToTop?: boolean;
+  maxVisiblePages?: number;
 }
 
 const Pagination: React.FC<PaginationProps> = ({
   totalPages,
   currentPage,
   onPageChange,
+  scrollToTop = false,
+  maxVisiblePages = 5,
 }) => {
-  const handlePrevClick = () => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
+  const handlePageChange = useCallback(
+    (page: number) => {
+      onPageChange(page);
+      if (scrollToTop) {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
+    },
+    [onPageChange, scrollToTop],
+  );
+
+  const getPageNumbers = () => {
+    const pageNumbers = [];
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+    let start = Math.max(1, currentPage - halfVisible);
+    const end = Math.min(totalPages, start + maxVisiblePages - 1);
+
+    if (end - start + 1 < maxVisiblePages) {
+      start = Math.max(1, end - maxVisiblePages + 1);
     }
-  };
 
-  const handleNextClick = () => {
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
+    for (let i = start; i <= end; i++) {
+      pageNumbers.push(i);
     }
+
+    return pageNumbers;
   };
 
+  if (totalPages <= 1) return null;
+
   return (
-    <div className="flex items-center justify-center space-x-4 mt-8">
+    <nav
+      className="flex items-center justify-center space-x-2 mt-8"
+      aria-label="Pagination"
+    >
       <button
-        onClick={handlePrevClick}
+        onClick={() => handlePageChange(currentPage - 1)}
         disabled={currentPage === 1}
         className="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Previous page"
       >
         <FiChevronLeft size={20} />
       </button>
 
-      {Array.from({ length: totalPages }, (_, idx) => idx + 1).map((page) => (
+      {getPageNumbers().map((page) => (
         <button
           key={page}
-          onClick={() => onPageChange(page)}
+          onClick={() => handlePageChange(page)}
           className={`px-4 py-2 rounded-lg ${
             page === currentPage
               ? 'bg-blue-600 text-white'
-              : 'bg-gray-200 text-gray-700'
-          } hover:bg-blue-500 hover:text-white transition-colors`}
+              : 'bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white'
+          } transition-colors`}
+          aria-label={`Page ${page}`}
+          aria-current={page === currentPage ? 'page' : undefined}
         >
           {page}
         </button>
       ))}
 
       <button
-        onClick={handleNextClick}
+        onClick={() => handlePageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
         className="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Next page"
       >
         <FiChevronRight size={20} />
       </button>
-    </div>
+    </nav>
   );
 };
 
diff --git a/website2/src/configs/mainConfigs.ts b/website2/src/configs/mainConfigs.ts
new file mode 100644
index 0000000000..80ab3d6238
--- /dev/null
+++ b/website2/src/configs/mainConfigs.ts
@@ -0,0 +1,13 @@
+export type Config = {
+  templateName: string;
+  homePageUrl: string;
+  containerClass: string;
+};
+
+const mainConfig: Config = {
+  templateName: 'AirQo Website',
+  homePageUrl: '/home',
+  containerClass: 'max-w-5xl mx-auto',
+};
+
+export default mainConfig;
diff --git a/website2/src/views/about/AboutPage.tsx b/website2/src/views/about/AboutPage.tsx
index dff11220c6..2ee146fc0d 100644
--- a/website2/src/views/about/AboutPage.tsx
+++ b/website2/src/views/about/AboutPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { FaArrowRightLong } from 'react-icons/fa6';
 
 import { CustomButton, Divider, MemberCard } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch } from '@/hooks/reduxHooks';
 import {
   useBoardMembers,
@@ -54,9 +55,9 @@ const AboutPage: React.FC = () => {
       return (
         <section
           id={sectionId}
-          className="max-w-5xl mx-auto w-full px-4 lg:px-0 space-y-8 scroll-mt-[100px]"
+          className="w-full px-4 lg:px-0 space-y-8 scroll-mt-[100px]"
         >
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
             {Array.from({ length: 3 }).map((_, idx) => (
               <SkeletonCard key={idx} />
             ))}
@@ -74,7 +75,7 @@ const AboutPage: React.FC = () => {
       <>
         <section
           id={sectionId}
-          className="max-w-5xl mx-auto w-full px-4 lg:px-0 space-y-8 scroll-mt-[200px]"
+          className={`${mainConfig.containerClass} w-full px-4 lg:px-0 space-y-8 scroll-mt-[200px]`}
         >
           <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
             {/* Title */}
@@ -141,10 +142,12 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className="pb-16 flex flex-col w-full space-y-16">
+    <div className="pb-16 flex flex-col w-full">
       {/* Hero Section */}
-      <section className="bg-[#F3F4F6] px-4 lg:px-0 h-[300px] w-full scroll-mt-[100px]">
-        <div className="max-w-5xl mx-auto w-full h-full flex flex-col justify-between">
+      <section className="bg-[#F3F4F6] mb-16 px-4 lg:px-0 h-[300px] w-full scroll-mt-[100px]">
+        <div
+          className={`${mainConfig.containerClass} w-full h-full flex flex-col justify-between`}
+        >
           <div></div>
           <div className="text-left">
             <h1 className="text-2xl lg:text-[48px] font-bold text-gray-800">
@@ -166,233 +169,237 @@ const AboutPage: React.FC = () => {
         </div>
       </section>
 
-      {/* Introduction Section */}
-      <section className="max-w-5xl mx-auto w-full px-4 lg:px-0 scroll-mt-[100px]">
-        <p className="text-2xl lg:text-[48px] max-w-[800px] leading-[48px] font-medium text-left">
-          At AirQo, we empower communities across Africa with accurate,
-          hyperlocal, and timely air quality data to drive air pollution
-          mitigation actions.
-        </p>
-      </section>
+      <div className={`space-y-16 ${mainConfig.containerClass}`}>
+        {/* Introduction Section */}
+        <section className="w-full px-4 lg:px-0 scroll-mt-[100px]">
+          <p className="text-2xl lg:text-[48px] max-w-[800px] leading-[48px] font-medium text-left">
+            At AirQo, we empower communities across Africa with accurate,
+            hyperlocal, and timely air quality data to drive air pollution
+            mitigation actions.
+          </p>
+        </section>
 
-      {/* Vision Section */}
-      <section
-        id="vision"
-        className="max-w-5xl mx-auto w-full px-4 lg:px-0 space-y-8 scroll-mt-[100px]"
-      >
-        <div className="flex flex-col-reverse relative transition-transform duration-500 ease-in-out transform hover:scale-110 cursor-pointer">
-          <Image
-            src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728295735/website/photos/about/teamImage_ganc1y.png"
-            alt="Abstract Outline"
-            width={1024}
-            height={480}
-            className="object-cover w-auto h-auto"
-            loading="eager"
-          />
-          <Image
-            src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728295909/website/photos/about/Frame_ugwgqr.png"
-            alt="Abstract Outline"
-            width={1024}
-            height={49}
-            className="absolute w-auto h-auto object-cover"
-            loading="eager"
-          />
-        </div>
-        <div className="flex flex-col lg:flex-row justify-start items-center gap-8">
-          <div className="relative w-full h-[400px] flex items-center justify-center">
-            {/* Background Abstract Shape Image */}
+        {/* Vision Section */}
+        <section
+          id="vision"
+          className="w-full px-4 lg:px-0 space-y-8 scroll-mt-[100px]"
+        >
+          <div className="flex flex-col-reverse relative transition-transform duration-500 ease-in-out transform hover:scale-110 cursor-pointer">
             <Image
-              src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728294910/website/photos/about/about_us_vector_3_wiw2ie.png"
-              alt="Abstract Background"
-              width={800}
-              height={400}
-              className="absolute w-[300px] h-[200px] lg:w-[410px] lg:h-[225px]"
+              src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728295735/website/photos/about/teamImage_ganc1y.png"
+              alt="Abstract Outline"
+              width={1024}
+              height={480}
+              className="object-cover w-auto h-auto"
               loading="eager"
             />
-
-            {/* Outline Abstract Shape Image */}
             <Image
-              src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728294910/website/photos/about/about-us-vector-2_mioxcy.png"
+              src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728295909/website/photos/about/Frame_ugwgqr.png"
               alt="Abstract Outline"
-              width={800}
-              height={400}
-              className="absolute w-[350px] h-[230px] lg:w-[450px] lg:h-[300px] object-contain"
+              width={1024}
+              height={49}
+              className="absolute w-auto h-auto object-cover"
               loading="eager"
             />
-
-            {/* Text */}
-            <span className="text-gray-800 text-lg lg:text-[48px] relative">
-              Our vision
-            </span>
           </div>
-          <div className="space-y-4">
-            <div className="flex items-center gap-4">
-              <p className="text-xl lg:text-[48px] leading-[56px] font-normal">
-                Clean air for all African cities.
-              </p>
+          <div className="flex flex-col lg:flex-row justify-start items-center gap-8">
+            <div className="relative w-full h-[400px] flex items-center justify-center">
+              {/* Background Abstract Shape Image */}
+              <Image
+                src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728294910/website/photos/about/about_us_vector_3_wiw2ie.png"
+                alt="Abstract Background"
+                width={800}
+                height={400}
+                className="absolute w-[300px] h-[200px] lg:w-[410px] lg:h-[225px]"
+                loading="eager"
+              />
+
+              {/* Outline Abstract Shape Image */}
+              <Image
+                src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728294910/website/photos/about/about-us-vector-2_mioxcy.png"
+                alt="Abstract Outline"
+                width={800}
+                height={400}
+                className="absolute w-[350px] h-[230px] lg:w-[450px] lg:h-[300px] object-contain"
+                loading="eager"
+              />
+
+              {/* Text */}
+              <span className="text-gray-800 text-lg lg:text-[48px] relative">
+                Our vision
+              </span>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                <p className="text-xl lg:text-[48px] leading-[56px] font-normal">
+                  Clean air for all African cities.
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      <Divider />
-
-      {/* Story Section */}
-      <section
-        id="story"
-        className="max-w-5xl mx-auto w-full px-4 space-y-8 scroll-mt-[150px]"
-      >
-        <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
-          {/* Title */}
-          <h2 className="text-3xl lg:text-[48px] text-left w-full font-medium flex-shrink-0 lg:w-1/3">
-            Our Story
-          </h2>
-
-          {/* Content */}
-          <div className="space-y-6 w-full max-w-[556px]">
-            <p className="text-lg text-gray-700 leading-relaxed">
-              We are on a mission to empower communities across Africa with
-              information about the quality of the air they breathe.
-            </p>
-            <p className="text-lg text-gray-700 leading-relaxed">
-              AirQo was founded in 2015 at Makerere University to close the gaps
-              in air quality monitoring across Africa. Our low-cost air quality
-              monitors are designed to suit the African infrastructure,
-              providing locally-led solutions to African air pollution
-              challenges.
-            </p>
-            <p className="text-lg text-gray-700 leading-relaxed">
-              They provide accurate, hyperlocal, and timely data providing
-              evidence of the magnitude and scale of air pollution across the
-              continent.
-            </p>
-            <p className="text-lg text-gray-700 leading-relaxed">
-              By empowering citizens with air quality information, we hope to
-              inspire change and action among African citizens to take effective
-              action to reduce air pollution.
-            </p>
-          </div>
-        </div>
-      </section>
+        <Divider />
 
-      <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
-
-      {/* Mission Section */}
-      <section
-        id="mission"
-        className="max-w-5xl mx-auto w-full px-4 space-y-4 scroll-mt-[150px]"
-      >
-        <p className="text-lg lg:text-[48px] leading-[56px] font-medium text-left">
-          Our mission is to efficiently collect, analyze and forecast air
-          quality data to international standards and work with partners to
-          reduce air pollution and raise awareness of its effects in African
-          cities.
-        </p>
-      </section>
+        {/* Story Section */}
+        <section id="story" className="w-full px-4 space-y-8 scroll-mt-[150px]">
+          <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
+            {/* Title */}
+            <h2 className="text-3xl lg:text-[48px] text-left w-full font-medium flex-shrink-0 lg:w-1/3">
+              Our Story
+            </h2>
 
-      <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
-
-      {/* Values Section */}
-      <section
-        id="values"
-        className="max-w-5xl mx-auto w-full px-4 space-y-8 scroll-mt-[150px]"
-      >
-        <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
-          {/* Title */}
-          <h2 className="text-3xl lg:text-[48px] font-medium flex-shrink-0 w-full text-left lg:w-1/3">
-            Our Values
-          </h2>
-
-          {/* Content */}
-          <div className="space-y-6 w-full max-w-[556px]">
-            <ul className="space-y-6 text-lg text-gray-700 leading-relaxed">
-              <li>
-                <span className="font-bold">Citizen Focus:</span>
-                <br /> At AirQo, we believe that the main beneficiary of our
-                work should be the citizen.
-              </li>
-              <li>
-                <span className="font-bold">Precision:</span>
-                <br /> We convert low-cost sensor data into a reliable measure
-                of air quality thus making our network and our models as
-                accurate as they can be.
-              </li>
-              <li>
-                <span className="font-bold">Collaboration and Openness:</span>
-                <br /> In order to maximize our impact, we collaborate by
-                sharing our data through partnerships.
-              </li>
-              <li>
-                <span className="font-bold">Investment in People:</span> We work
-                in a fast-moving field with continuous improvements in
-                technology. We recruit the best teams and also commit to their
-                ongoing professional development and training.
-              </li>
-            </ul>
+            {/* Content */}
+            <div className="space-y-6 w-full max-w-[556px]">
+              <p className="text-lg text-gray-700 leading-relaxed">
+                We are on a mission to empower communities across Africa with
+                information about the quality of the air they breathe.
+              </p>
+              <p className="text-lg text-gray-700 leading-relaxed">
+                AirQo was founded in 2015 at Makerere University to close the
+                gaps in air quality monitoring across Africa. Our low-cost air
+                quality monitors are designed to suit the African
+                infrastructure, providing locally-led solutions to African air
+                pollution challenges.
+              </p>
+              <p className="text-lg text-gray-700 leading-relaxed">
+                They provide accurate, hyperlocal, and timely data providing
+                evidence of the magnitude and scale of air pollution across the
+                continent.
+              </p>
+              <p className="text-lg text-gray-700 leading-relaxed">
+                By empowering citizens with air quality information, we hope to
+                inspire change and action among African citizens to take
+                effective action to reduce air pollution.
+              </p>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
+
+        <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
 
-      <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
-
-      {/* Team Section */}
-      {renderMembersSection(teamMembers, loadingTeam, 'team', 'Meet the team')}
-
-      {/* External Team Section */}
-      {renderMembersSection(
-        externalTeamMembers,
-        loadingExternalTeam,
-        'external-team',
-        'External team',
-      )}
-
-      {/* Board Section */}
-      {renderMembersSection(
-        boardMembers,
-        loadingBoard,
-        'board',
-        'Meet the Board',
-      )}
-
-      {/* Partners Section */}
-      {partners && (
+        {/* Mission Section */}
         <section
-          id="partners"
-          className="max-w-5xl mx-auto w-full px-4 lg:px-0 space-y-8 scroll-mt-[200px]"
+          id="mission"
+          className="w-full px-4 space-y-4 scroll-mt-[150px]"
+        >
+          <p className="text-lg lg:text-[48px] leading-[56px] font-medium text-left">
+            Our mission is to efficiently collect, analyze and forecast air
+            quality data to international standards and work with partners to
+            reduce air pollution and raise awareness of its effects in African
+            cities.
+          </p>
+        </section>
+
+        <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
+
+        {/* Values Section */}
+        <section
+          id="values"
+          className="w-full px-4 space-y-8 scroll-mt-[150px]"
         >
           <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
             {/* Title */}
             <h2 className="text-3xl lg:text-[48px] font-medium flex-shrink-0 w-full text-left lg:w-1/3">
-              Our <br />
-              partners
+              Our Values
             </h2>
 
             {/* Content */}
             <div className="space-y-6 w-full max-w-[556px]">
-              <p>
-                Together with our partners, we are solving large, complex air
-                quality monitoring challenges across Africa. We are providing
-                much-needed air quality data to Governments and individuals in
-                the continent to facilitate policy changes that combat air
-                pollution.
-              </p>
-              <CustomButton
-                onClick={() => dispatch(openModal())}
-                className="bg-transparent p-0 m-0 flex items-center text-blue-700"
-              >
-                <span>Partner with Us </span>
-                <FaArrowRightLong className="inline-block ml-2 " />
-              </CustomButton>
+              <ul className="space-y-6 text-lg text-gray-700 leading-relaxed">
+                <li>
+                  <span className="font-bold">Citizen Focus:</span>
+                  <br /> At AirQo, we believe that the main beneficiary of our
+                  work should be the citizen.
+                </li>
+                <li>
+                  <span className="font-bold">Precision:</span>
+                  <br /> We convert low-cost sensor data into a reliable measure
+                  of air quality thus making our network and our models as
+                  accurate as they can be.
+                </li>
+                <li>
+                  <span className="font-bold">Collaboration and Openness:</span>
+                  <br /> In order to maximize our impact, we collaborate by
+                  sharing our data through partnerships.
+                </li>
+                <li>
+                  <span className="font-bold">Investment in People:</span> We
+                  work in a fast-moving field with continuous improvements in
+                  technology. We recruit the best teams and also commit to their
+                  ongoing professional development and training.
+                </li>
+              </ul>
             </div>
           </div>
-          <PaginatedSection
-            logos={partners.map((partner: any) => ({
-              id: partner.id,
-              logoUrl: partner.partner_logo_url || '',
-            }))}
-          />
         </section>
-      )}
+
+        <Divider className="bg-black w-full p-0 h-[1px] mx-auto" />
+
+        {/* Team Section */}
+        {renderMembersSection(
+          teamMembers,
+          loadingTeam,
+          'team',
+          'Meet the team',
+        )}
+
+        {/* External Team Section */}
+        {renderMembersSection(
+          externalTeamMembers,
+          loadingExternalTeam,
+          'external-team',
+          'External team',
+        )}
+
+        {/* Board Section */}
+        {renderMembersSection(
+          boardMembers,
+          loadingBoard,
+          'board',
+          'Meet the Board',
+        )}
+
+        {/* Partners Section */}
+        {partners && (
+          <section
+            id="partners"
+            className="w-full px-4 lg:px-0 space-y-8 scroll-mt-[200px]"
+          >
+            <div className="flex flex-col lg:flex-row items-start lg:space-x-12">
+              {/* Title */}
+              <h2 className="text-3xl lg:text-[48px] font-medium flex-shrink-0 w-full text-left lg:w-1/3">
+                Our <br />
+                partners
+              </h2>
+
+              {/* Content */}
+              <div className="space-y-6 w-full max-w-[556px]">
+                <p>
+                  Together with our partners, we are solving large, complex air
+                  quality monitoring challenges across Africa. We are providing
+                  much-needed air quality data to Governments and individuals in
+                  the continent to facilitate policy changes that combat air
+                  pollution.
+                </p>
+                <CustomButton
+                  onClick={() => dispatch(openModal())}
+                  className="bg-transparent p-0 m-0 flex items-center text-blue-700"
+                >
+                  <span>Partner with Us </span>
+                  <FaArrowRightLong className="inline-block ml-2 " />
+                </CustomButton>
+              </div>
+            </div>
+            <PaginatedSection
+              logos={partners.map((partner: any) => ({
+                id: partner.id,
+                logoUrl: partner.partner_logo_url || '',
+              }))}
+            />
+          </section>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/website2/src/views/careers/CareerPage.tsx b/website2/src/views/careers/CareerPage.tsx
index c6dc8924f2..c62e1af150 100644
--- a/website2/src/views/careers/CareerPage.tsx
+++ b/website2/src/views/careers/CareerPage.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { FiArrowRight } from 'react-icons/fi';
 
 import { CustomButton, NoData } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useCareers, useDepartments } from '@/hooks/useApiHooks';
 
 const CareerPage: React.FC = () => {
@@ -59,10 +60,10 @@ const CareerPage: React.FC = () => {
   const isLoading = departmentsLoading || careersLoading;
 
   return (
-    <div className="flex flex-col w-full space-y-16 bg-[#F2F1F6]">
+    <div className="flex flex-col w-full bg-[#F2F1F6]">
       {/* Header Section */}
       <header
-        className="relative h-[300px] lg:h-[400px] w-full bg-cover bg-center"
+        className="relative h-[300px] lg:h-[400px] mb-16 w-full bg-cover bg-center"
         style={{
           backgroundImage:
             'url("https://res.cloudinary.com/dbibjvyhm/image/upload/v1728310706/website/photos/about/careerImage_t91yzh.png")',
@@ -80,114 +81,122 @@ const CareerPage: React.FC = () => {
         </div>
       </header>
 
-      {/* Categories Section */}
-      <section className="max-w-5xl mx-auto px-4 lg:px-8">
-        <h2 className="text-3xl font-normal mb-8">Categories</h2>
-        <div className="flex flex-wrap gap-4">
-          {isLoading
-            ? [...Array(5)].map((_, idx) => (
+      <div className={`space-y-16 ${mainConfig.containerClass}`}>
+        {/* Categories Section */}
+        <section className="px-4 lg:px-8">
+          <h2 className="text-3xl font-normal mb-8">Categories</h2>
+          <div className="flex flex-wrap gap-4">
+            {isLoading
+              ? [...Array(5)].map((_, idx) => (
+                  <div
+                    key={idx}
+                    className="w-32 h-10 bg-gray-300 rounded-full animate-pulse"
+                  ></div>
+                ))
+              : allDepartments.map((department: any) => (
+                  <button
+                    key={department.id}
+                    onClick={() => setSelectedDepartmentId(department.id)}
+                    className={`px-6 py-2 rounded-full transition-colors ${
+                      selectedDepartmentId === department.id
+                        ? 'bg-[#0CE87E] text-black'
+                        : 'bg-[#FFFFFF80] text-gray-600 hover:bg-green-500 hover:text-white'
+                    }`}
+                  >
+                    {department.name}
+                  </button>
+                ))}
+          </div>
+        </section>
+
+        {/* Loading Skeleton for Job Listings */}
+        {isLoading && (
+          <section className="w-full px-4 lg:px-8 space-y-12">
+            <div className="space-y-4">
+              {[...Array(3)].map((_, idx) => (
                 <div
                   key={idx}
-                  className="w-32 h-10 bg-gray-300 rounded-full animate-pulse"
-                ></div>
-              ))
-            : allDepartments.map((department: any) => (
-                <button
-                  key={department.id}
-                  onClick={() => setSelectedDepartmentId(department.id)}
-                  className={`px-6 py-2 rounded-full transition-colors ${
-                    selectedDepartmentId === department.id
-                      ? 'bg-[#0CE87E] text-black'
-                      : 'bg-[#FFFFFF80] text-gray-600 hover:bg-green-500 hover:text-white'
-                  }`}
+                  className="flex items-center justify-between p-4 lg:p-6 bg-[#E0E0E0] rounded-lg animate-pulse"
                 >
-                  {department.name}
-                </button>
+                  <div className="h-6 bg-gray-300 w-1/3 rounded"></div>
+                  <div className="h-6 bg-gray-300 w-1/6 rounded"></div>
+                  <div className="h-6 bg-gray-300 w-8 rounded-full"></div>
+                </div>
               ))}
-        </div>
-      </section>
-
-      {/* Loading Skeleton for Job Listings */}
-      {isLoading && (
-        <section className="max-w-5xl mx-auto w-full px-4 lg:px-8 space-y-12">
-          <div className="space-y-4">
-            {[...Array(3)].map((_, idx) => (
-              <div
-                key={idx}
-                className="flex items-center justify-between p-4 lg:p-6 bg-[#E0E0E0] rounded-lg animate-pulse"
-              >
-                <div className="h-6 bg-gray-300 w-1/3 rounded"></div>
-                <div className="h-6 bg-gray-300 w-1/6 rounded"></div>
-                <div className="h-6 bg-gray-300 w-8 rounded-full"></div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+            </div>
+          </section>
+        )}
 
-      {/* Job Listings Section */}
-      {!isLoading && (
-        <section className="max-w-5xl mx-auto w-full px-4 lg:px-8 space-y-12">
-          {careersError || departmentsError ? (
-            <NoData message="Failed to load careers or departments. Please try again later." />
-          ) : Object.keys(groupedJobsByDepartment || {}).length === 0 ? (
-            <NoData message="No open positions found." />
-          ) : (
-            Object.keys(groupedJobsByDepartment || {}).map((departmentName) => (
-              <div key={departmentName} className="cursor-pointer">
-                <h3 className="text-2xl text-gray-400 font-semibold mb-4">
-                  {departmentName} (
-                  {groupedJobsByDepartment[departmentName].openCount})
-                </h3>
-                <div className="space-y-4">
-                  {groupedJobsByDepartment[departmentName].jobs.map(
-                    (job: any, idx: number) => (
-                      <CustomButton
-                        key={idx}
-                        onClick={() => router.push(`careers/${job.id}`)}
-                        className="flex items-center justify-between p-4 lg:p-6 text-black w-full bg-[#FFFFFF80] rounded-lg shadow-sm hover:shadow-md"
-                      >
-                        <div className="text-left">
-                          <h4 className="text-lg font-semibold">{job.title}</h4>
-                          <p
-                            className={`text-sm ${
-                              isJobOpen(job.closing_date)
-                                ? 'text-green-500'
-                                : 'text-red-500'
-                            }`}
+        {/* Job Listings Section */}
+        {!isLoading && (
+          <section className="w-full px-4 lg:px-8 space-y-12">
+            {careersError || departmentsError ? (
+              <NoData message="Failed to load careers or departments. Please try again later." />
+            ) : Object.keys(groupedJobsByDepartment || {}).length === 0 ? (
+              <NoData message="No open positions found." />
+            ) : (
+              Object.keys(groupedJobsByDepartment || {}).map(
+                (departmentName) => (
+                  <div key={departmentName} className="cursor-pointer">
+                    <h3 className="text-2xl text-gray-400 font-semibold mb-4">
+                      {departmentName} (
+                      {groupedJobsByDepartment[departmentName].openCount})
+                    </h3>
+                    <div className="space-y-4">
+                      {groupedJobsByDepartment[departmentName].jobs.map(
+                        (job: any, idx: number) => (
+                          <CustomButton
+                            key={idx}
+                            onClick={() => router.push(`careers/${job.id}`)}
+                            className="flex items-center justify-between p-4 lg:p-6 text-black w-full bg-[#FFFFFF80] rounded-lg shadow-sm hover:shadow-md"
                           >
-                            {isJobOpen(job.closing_date) ? 'Open' : 'Closed'}
-                          </p>
-                        </div>
-                        <p className="text-gray-500">{job.type}</p>
-                        <span className="text-gray-700 hover:text-black">
-                          <FiArrowRight size={24} />
-                        </span>
-                      </CustomButton>
-                    ),
-                  )}
-                </div>
-              </div>
-            ))
-          )}
-        </section>
-      )}
+                            <div className="text-left">
+                              <h4 className="text-lg font-semibold">
+                                {job.title}
+                              </h4>
+                              <p
+                                className={`text-sm ${
+                                  isJobOpen(job.closing_date)
+                                    ? 'text-green-500'
+                                    : 'text-red-500'
+                                }`}
+                              >
+                                {isJobOpen(job.closing_date)
+                                  ? 'Open'
+                                  : 'Closed'}
+                              </p>
+                            </div>
+                            <p className="text-gray-500">{job.type}</p>
+                            <span className="text-gray-700 hover:text-black">
+                              <FiArrowRight size={24} />
+                            </span>
+                          </CustomButton>
+                        ),
+                      )}
+                    </div>
+                  </div>
+                ),
+              )
+            )}
+          </section>
+        )}
 
-      {/* Contact Section */}
-      <footer className="bg-[#F2F1F6] py-16 text-center">
-        <p className="text-xl mb-4">
-          Don&apos;t see a position that fits you perfectly?
-        </p>
-        <p className="text-lg">
-          Introduce yourself here <br />
-          <a
-            href="mailto:careers@airqo.africa"
-            className="text-blue-600 underline"
-          >
-            careers@airqo.africa
-          </a>
-        </p>
-      </footer>
+        {/* Contact Section */}
+        <footer className="py-16 text-center">
+          <p className="text-xl mb-4">
+            Don&apos;t see a position that fits you perfectly?
+          </p>
+          <p className="text-lg">
+            Introduce yourself here <br />
+            <a
+              href="mailto:careers@airqo.africa"
+              className="text-blue-600 underline"
+            >
+              careers@airqo.africa
+            </a>
+          </p>
+        </footer>
+      </div>
     </div>
   );
 };
diff --git a/website2/src/views/careers/DetailsPage.tsx b/website2/src/views/careers/DetailsPage.tsx
index f604b087a4..4278715e8a 100644
--- a/website2/src/views/careers/DetailsPage.tsx
+++ b/website2/src/views/careers/DetailsPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { FiArrowLeft } from 'react-icons/fi';
 
 import { CustomButton, NoData } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useCareerDetails } from '@/hooks/useApiHooks';
 
 const DetailsPage: React.FC<{ id: string }> = ({ id }) => {
@@ -14,7 +15,7 @@ const DetailsPage: React.FC<{ id: string }> = ({ id }) => {
 
   if (isLoading) {
     return (
-      <div className="max-w-5xl mx-auto p-8">
+      <div className={`${mainConfig.containerClass} p-8`}>
         {/* Skeleton for the Header */}
         <div className="mb-8">
           <div className="h-8 bg-gray-300 rounded w-3/4 mb-4 animate-pulse"></div>
@@ -56,7 +57,9 @@ const DetailsPage: React.FC<{ id: string }> = ({ id }) => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto p-8 bg-white border border-gray-200 rounded-lg mt-6">
+    <div
+      className={`${mainConfig.containerClass} p-8 bg-white border border-gray-200 rounded-lg mt-6`}
+    >
       {/* Back Button */}
       <div className="mb-4">
         <CustomButton
diff --git a/website2/src/views/cleanairforum/FeaturedEvent.tsx b/website2/src/views/cleanairforum/FeaturedEvent.tsx
index 15653da53d..682e5c09b9 100644
--- a/website2/src/views/cleanairforum/FeaturedEvent.tsx
+++ b/website2/src/views/cleanairforum/FeaturedEvent.tsx
@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { FiCalendar, FiClock } from 'react-icons/fi';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { getCleanAirEvents } from '@/services/apiService';
 
 const FeaturedEvent: React.FC = () => {
@@ -44,7 +45,9 @@ const FeaturedEvent: React.FC = () => {
 
   // Loading Skeleton Component
   const LoadingSkeleton = () => (
-    <section className="max-w-5xl mx-auto w-full mt-16 bg-blue-50 rounded-lg shadow-sm p-6 lg:px-8 lg:py-12 flex flex-col lg:flex-row items-center gap-6 animate-pulse">
+    <section
+      className={`${mainConfig.containerClass} w-full mt-16 bg-blue-50 rounded-lg shadow-sm p-6 lg:px-8 lg:py-12 flex flex-col lg:flex-row items-center gap-6 animate-pulse`}
+    >
       {/* Image Skeleton */}
       <div className="w-full lg:w-1/2">
         <div className="relative flex justify-center w-auto lg:w-[416px] lg:h-[518px] items-center">
@@ -65,7 +68,9 @@ const FeaturedEvent: React.FC = () => {
 
   // Error Message Component
   const ErrorMessage = ({ message }: { message: string }) => (
-    <section className="max-w-5xl mx-auto w-full mt-16 bg-blue-50 rounded-lg shadow-sm p-6 lg:px-8 lg:py-12 flex flex-col lg:flex-row items-center gap-6">
+    <section
+      className={`${mainConfig.containerClass} w-full mt-16 bg-blue-50 rounded-lg shadow-sm p-6 lg:px-8 lg:py-12 flex flex-col lg:flex-row items-center gap-6`}
+    >
       <div className="w-full lg:w-1/2 flex justify-center items-center">
         <div className="w-full h-full bg-gray-300 rounded-lg flex items-center justify-center">
           <p className="text-gray-500">{message}</p>
diff --git a/website2/src/views/cleanairforum/PaginatedSection.tsx b/website2/src/views/cleanairforum/PaginatedSection.tsx
index cb16babe09..e3fd192e57 100644
--- a/website2/src/views/cleanairforum/PaginatedSection.tsx
+++ b/website2/src/views/cleanairforum/PaginatedSection.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { cn } from '@/lib/utils';
 
 import { Pagination } from '../../components/ui';
@@ -34,7 +35,7 @@ const PaginatedSection: React.FC<PaginatedSectionProps> = ({
 
   return (
     <section className={`${bgColor} py-14`}>
-      <div className="max-w-5xl mx-auto px-4 lg:px-0 w-full">
+      <div className={`${mainConfig.containerClass} px-4 lg:px-0 w-full`}>
         <div className="flex flex-col gap-8 items-center">
           {title && description && (
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
diff --git a/website2/src/views/cleanairforum/RegisterBanner.tsx b/website2/src/views/cleanairforum/RegisterBanner.tsx
index 8b40bedad6..f2039a9ec9 100644
--- a/website2/src/views/cleanairforum/RegisterBanner.tsx
+++ b/website2/src/views/cleanairforum/RegisterBanner.tsx
@@ -2,10 +2,11 @@
 import Image from 'next/image';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 const RegisterBanner = () => {
   return (
-    <section className="max-w-5xl mx-auto w-full px-2 lg:px-0">
+    <section className={`${mainConfig.containerClass} w-full px-2 lg:px-0`}>
       <div className="flex flex-col lg:flex-row items-center bg-card-custom-gradient py-12 px-12 gap-6 rounded-lg">
         {/* Image Section */}
         <div className="flex-shrink-0">
diff --git a/website2/src/views/cleanairforum/TabNavigation.tsx b/website2/src/views/cleanairforum/TabNavigation.tsx
index 28b50e024f..9fb60cf74e 100644
--- a/website2/src/views/cleanairforum/TabNavigation.tsx
+++ b/website2/src/views/cleanairforum/TabNavigation.tsx
@@ -3,7 +3,8 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type React from 'react';
-import { useEffect, useState } from 'react';
+
+import mainConfig from '@/configs/mainConfigs';
 
 const tabs = [
   { label: 'About', value: '/clean-air-network' },
@@ -14,22 +15,25 @@ const tabs = [
 
 const TabNavigation: React.FC = () => {
   const pathname = usePathname();
-  const [activeTab, setActiveTab] = useState(pathname);
 
-  useEffect(() => {
-    setActiveTab(pathname);
-  }, [pathname]);
+  const isActiveTab = (tabValue: string) => {
+    if (tabValue === '/clean-air-network') {
+      return pathname === tabValue;
+    }
+    return pathname.startsWith(tabValue);
+  };
 
   return (
     <nav className="border-y pt-4 overflow-x-auto bg-white border-gray-200">
-      <div className="flex space-x-8 max-w-5xl mx-auto px-4 lg:px-0">
+      <div
+        className={`flex space-x-8 ${mainConfig.containerClass} px-4 lg:px-0`}
+      >
         {tabs.map((tab) => (
           <Link
             key={tab.value}
             href={tab.value}
-            onClick={() => setActiveTab(tab.value)}
             className={`pb-2 text-[14px] font-normal transition-colors duration-300 ${
-              activeTab === tab.value
+              isActiveTab(tab.value)
                 ? 'text-blue-600 border-b-2 border-blue-600'
                 : 'text-gray-400 hover:text-gray-600'
             }`}
diff --git a/website2/src/views/cleanairforum/resources/ResourcePage.tsx b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
index 0d31955895..c2536799c1 100644
--- a/website2/src/views/cleanairforum/resources/ResourcePage.tsx
+++ b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
@@ -119,6 +119,7 @@ const ResourcePage: React.FC = () => {
               totalPages={totalPages}
               currentPage={currentPage}
               onPageChange={setCurrentPage}
+              scrollToTop={true}
             />
           )}
         </div>
diff --git a/website2/src/views/events/EventCardsSection.tsx b/website2/src/views/events/EventCardsSection.tsx
index a89722d7aa..7adcddd2e4 100644
--- a/website2/src/views/events/EventCardsSection.tsx
+++ b/website2/src/views/events/EventCardsSection.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { FiCalendar } from 'react-icons/fi';
 
 import { CustomButton, NoData } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 const EventCardsSection: React.FC<{
   selectedTab: string;
@@ -35,7 +36,9 @@ const EventCardsSection: React.FC<{
     );
 
   return (
-    <section className="max-w-5xl mx-auto w-full mb-8 px-4 lg:px-0">
+    <section
+      className={`${mainConfig.containerClass} w-full mb-8 px-4 lg:px-0`}
+    >
       {/* If there are no events to display */}
       {eventsToShow.length === 0 ? (
         noEventsMessage
diff --git a/website2/src/views/events/EventPage.tsx b/website2/src/views/events/EventPage.tsx
index 134bdfa244..d241a11d16 100644
--- a/website2/src/views/events/EventPage.tsx
+++ b/website2/src/views/events/EventPage.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { FiCalendar, FiClock } from 'react-icons/fi';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useAirQoEvents } from '@/hooks/useApiHooks';
 import EventCardsSection from '@/views/events/EventCardsSection';
 
@@ -51,7 +52,9 @@ const EventPage: React.FC = () => {
       {/* Header Section */}
       {isLoading ? (
         <div className="mb-12 bg-[#F2F1F6] py-4 lg:py-16">
-          <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 flex flex-col-reverse lg:flex-row lg:space-x-12 items-center">
+          <div
+            className={`${mainConfig.containerClass} w-full px-4 lg:px-0 flex flex-col-reverse lg:flex-row lg:space-x-12 items-center`}
+          >
             <div className="flex-1 mb-8 lg:mb-0">
               <div className="h-6 bg-gray-300 w-1/2 rounded mb-4 animate-pulse"></div>
               <div className="h-4 bg-gray-300 w-3/4 rounded mb-6 animate-pulse"></div>
@@ -68,7 +71,9 @@ const EventPage: React.FC = () => {
         </div>
       ) : isError ? (
         <div className="mb-12 bg-[#F2F1F6] py-4 lg:py-16">
-          <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 text-center">
+          <div
+            className={`${mainConfig.containerClass} w-full px-4 lg:px-0 text-center`}
+          >
             <h1 className="text-4xl font-bold mb-4">Error Loading Events</h1>
             <p className="text-lg text-gray-600">
               We couldn&apos;t fetch the events at this time. Please try again
@@ -79,7 +84,9 @@ const EventPage: React.FC = () => {
       ) : (
         firstFeaturedEvent && (
           <section className="mb-12 bg-[#F2F1F6] py-4 lg:py-16">
-            <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 flex flex-col-reverse lg:flex-row lg:space-x-12 items-center">
+            <div
+              className={`${mainConfig.containerClass} w-full px-4 lg:px-0 flex flex-col-reverse lg:flex-row lg:space-x-12 items-center`}
+            >
               <div className="flex-1 mb-8 lg:mb-0">
                 <h1 className="text-4xl font-bold mb-4">
                   {firstFeaturedEvent.title}
@@ -145,7 +152,9 @@ const EventPage: React.FC = () => {
       )}
 
       {/* Tabs Section */}
-      <section className="max-w-5xl mx-auto w-full px-4 lg:px-0 mb-8">
+      <section
+        className={`${mainConfig.containerClass} w-full px-4 lg:px-0 mb-8`}
+      >
         <div className="flex space-x-8 border-b border-gray-300">
           <button
             onClick={() => handleTabClick('upcoming')}
@@ -172,7 +181,9 @@ const EventPage: React.FC = () => {
 
       {/* Event Cards Section */}
       {isLoading ? (
-        <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 mb-8">
+        <div
+          className={`${mainConfig.containerClass} w-full px-4 lg:px-0 mb-8`}
+        >
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {[...Array(6)].map((_, idx) => (
               <div
diff --git a/website2/src/views/events/SingleEvent.tsx b/website2/src/views/events/SingleEvent.tsx
index 6b5892432c..632662a8cb 100644
--- a/website2/src/views/events/SingleEvent.tsx
+++ b/website2/src/views/events/SingleEvent.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-icons/fi';
 
 import { Accordion, CustomButton, NoData } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useEventDetails } from '@/hooks/useApiHooks';
 import { convertDeltaToHtml } from '@/utils/quillUtils';
 
@@ -79,7 +80,9 @@ const SingleEvent: React.FC<{ id: string }> = ({ id }) => {
           }}
         >
           <div className="absolute inset-0 bg-black opacity-50"></div>
-          <div className="relative z-10 max-w-5xl mx-auto w-full space-y-6 text-start px-4">
+          <div
+            className={`relative z-10 ${mainConfig.containerClass} w-full space-y-6 text-start px-4`}
+          >
             <nav className="flex items-start text-sm">
               <button
                 type="button"
@@ -109,7 +112,9 @@ const SingleEvent: React.FC<{ id: string }> = ({ id }) => {
       {/* Partner Logos Section */}
       {event.partner_logos?.length > 0 && (
         <section className="py-12 bg-gray-100">
-          <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8">
+          <div
+            className={`${mainConfig.containerClass} grid grid-cols-2 md:grid-cols-4 gap-8`}
+          >
             {event.partner_logos.map((partner: any) => (
               <div
                 key={partner.id}
@@ -129,183 +134,185 @@ const SingleEvent: React.FC<{ id: string }> = ({ id }) => {
         </section>
       )}
 
-      {/* Event Details Section */}
-      {eventDetailsHtml && (
-        <section className="max-w-5xl mx-auto px-4 lg:px-0 py-8">
-          <h2 className="text-3xl font-semibold mb-6 pb-2">Event Details</h2>
-          <div className="flex justify-between w-full items-center border-b-2 py-4 mb-6">
-            <div className="flex flex-col gap-4 mb-6">
-              <div className="flex items-center space-x-2">
-                <FiCalendar className="text-gray-500 w-5 h-5" />
-                <p className="text-gray-600">
-                  {event.start_date && event.end_date
-                    ? formatDateRange(event.start_date, event.end_date)
-                    : 'Date to be announced'}
-                </p>
-              </div>
+      <div className={`${mainConfig.containerClass}`}>
+        {/* Event Details Section */}
+        {eventDetailsHtml && (
+          <section className="px-4 lg:px-0 py-8">
+            <h2 className="text-3xl font-semibold mb-6 pb-2">Event Details</h2>
+            <div className="flex justify-between w-full items-center border-b-2 py-4 mb-6">
+              <div className="flex flex-col gap-4 mb-6">
+                <div className="flex items-center space-x-2">
+                  <FiCalendar className="text-gray-500 w-5 h-5" />
+                  <p className="text-gray-600">
+                    {event.start_date && event.end_date
+                      ? formatDateRange(event.start_date, event.end_date)
+                      : 'Date to be announced'}
+                  </p>
+                </div>
 
-              <div className="flex items-center space-x-2">
-                <FiClock className="text-gray-500 w-5 h-5" />
-                <p className="text-gray-600">
-                  {event.start_time && event.end_time
-                    ? `${format(
-                        parse(event.start_time, 'HH:mm:ss', new Date()),
-                        'HH:mm',
-                      )} - ${format(
-                        parse(event.end_time, 'HH:mm:ss', new Date()),
-                        'HH:mm',
-                      )}`
-                    : 'Time to be announced'}
-                </p>
+                <div className="flex items-center space-x-2">
+                  <FiClock className="text-gray-500 w-5 h-5" />
+                  <p className="text-gray-600">
+                    {event.start_time && event.end_time
+                      ? `${format(
+                          parse(event.start_time, 'HH:mm:ss', new Date()),
+                          'HH:mm',
+                        )} - ${format(
+                          parse(event.end_time, 'HH:mm:ss', new Date()),
+                          'HH:mm',
+                        )}`
+                      : 'Time to be announced'}
+                  </p>
+                </div>
               </div>
+              {event.registration_link && (
+                <CustomButton
+                  type="button"
+                  onClick={() => window.open(event.registration_link)}
+                  className="text-white"
+                >
+                  Register Now
+                </CustomButton>
+              )}
             </div>
-            {event.registration_link && (
-              <CustomButton
-                type="button"
-                onClick={() => window.open(event.registration_link)}
-                className="text-white"
-              >
-                Register Now
-              </CustomButton>
-            )}
-          </div>
-          <div
-            className="prose lg:prose-xl"
-            dangerouslySetInnerHTML={{
-              __html: eventDetailsHtml || 'Event details coming soon.',
-            }}
-          ></div>
-        </section>
-      )}
+            <div
+              className="prose lg:prose-xl"
+              dangerouslySetInnerHTML={{
+                __html: eventDetailsHtml || 'Event details coming soon.',
+              }}
+            ></div>
+          </section>
+        )}
 
-      {/* Event Program Section */}
-      {event.programs?.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 py-8">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            Event Schedule
-          </h2>
-          {event.programs.map((program: any) => (
-            <Accordion
-              key={program.id}
-              title={format(new Date(program.date), 'MMMM do, yyyy')}
-            >
-              <div className="p-6 bg-blue-50 rounded-lg shadow-sm space-y-4">
-                {program.sessions?.length > 0 ? (
-                  program.sessions.map((session: any) => (
-                    <div
-                      key={session.id}
-                      className="border-b pb-4 last:border-none"
-                    >
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-gray-500">
-                          {format(
-                            new Date(`1970-01-01T${session.start_time}`),
-                            'h:mm a',
-                          )}{' '}
-                          -{' '}
-                          {format(
-                            new Date(`1970-01-01T${session.end_time}`),
-                            'h:mm a',
-                          )}
-                        </span>
-                        {session.venue && (
+        {/* Event Program Section */}
+        {event.programs?.length > 0 && (
+          <section className="px-4 py-8">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              Event Schedule
+            </h2>
+            {event.programs.map((program: any) => (
+              <Accordion
+                key={program.id}
+                title={format(new Date(program.date), 'MMMM do, yyyy')}
+              >
+                <div className="p-6 bg-blue-50 rounded-lg shadow-sm space-y-4">
+                  {program.sessions?.length > 0 ? (
+                    program.sessions.map((session: any) => (
+                      <div
+                        key={session.id}
+                        className="border-b pb-4 last:border-none"
+                      >
+                        <div className="flex items-center justify-between">
                           <span className="text-sm text-gray-500">
-                            {session.venue}
+                            {format(
+                              new Date(`1970-01-01T${session.start_time}`),
+                              'h:mm a',
+                            )}{' '}
+                            -{' '}
+                            {format(
+                              new Date(`1970-01-01T${session.end_time}`),
+                              'h:mm a',
+                            )}
                           </span>
-                        )}
-                      </div>
-                      <h3 className="text-xl font-semibold mt-2">
-                        {session.session_title}
-                      </h3>
-                      <div className="text-gray-700 mt-1">
-                        <div
-                          dangerouslySetInnerHTML={{
-                            __html: session.session_details,
-                          }}
-                        ></div>
+                          {session.venue && (
+                            <span className="text-sm text-gray-500">
+                              {session.venue}
+                            </span>
+                          )}
+                        </div>
+                        <h3 className="text-xl font-semibold mt-2">
+                          {session.session_title}
+                        </h3>
+                        <div className="text-gray-700 mt-1">
+                          <div
+                            dangerouslySetInnerHTML={{
+                              __html: session.session_details,
+                            }}
+                          ></div>
+                        </div>
                       </div>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-gray-500">No sessions available.</p>
-                )}
-              </div>
-            </Accordion>
-          ))}
-        </section>
-      )}
+                    ))
+                  ) : (
+                    <p className="text-gray-500">No sessions available.</p>
+                  )}
+                </div>
+              </Accordion>
+            ))}
+          </section>
+        )}
 
-      {/* Inquiry Section */}
-      {event.inquiries?.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 py-8 bg-gray-50 rounded-lg shadow">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            For any inquiries and clarifications:
-          </h2>
-          <div className="space-y-6">
-            {event.inquiries.map((inquiry: any) => (
-              <div
-                key={inquiry.id}
-                className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300"
-              >
-                <p className="text-lg font-medium">{inquiry.inquiry}</p>
-                {inquiry.role && (
-                  <p className="text-gray-600">{inquiry.role}</p>
-                )}
-                <a
-                  href={`mailto:${inquiry.email}`}
-                  className="text-blue-500 hover:underline"
+        {/* Inquiry Section */}
+        {event.inquiries?.length > 0 && (
+          <section className="px-4 py-8 bg-gray-50 rounded-lg shadow">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              For any inquiries and clarifications:
+            </h2>
+            <div className="space-y-6">
+              {event.inquiries.map((inquiry: any) => (
+                <div
+                  key={inquiry.id}
+                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300"
                 >
-                  {inquiry.email}
-                </a>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+                  <p className="text-lg font-medium">{inquiry.inquiry}</p>
+                  {inquiry.role && (
+                    <p className="text-gray-600">{inquiry.role}</p>
+                  )}
+                  <a
+                    href={`mailto:${inquiry.email}`}
+                    className="text-blue-500 hover:underline"
+                  >
+                    {inquiry.email}
+                  </a>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
 
-      {/* Resources Section */}
-      {event.resources?.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 lg:px-0 py-8">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            Access the Event Resources here:
-          </h2>
-          <div className="space-y-4">
-            {event.resources.map((resource: any) => (
-              <div
-                key={resource.id}
-                className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
-              >
-                <div>
-                  <h3 className="text-xl font-semibold mb-2 text-gray-800">
-                    {resource.title}
-                  </h3>
-                  <div className="flex space-x-4">
-                    {resource.link && (
-                      <a
-                        href={resource.link}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
-                      >
-                        <FiExternalLink className="mr-2" /> View Link
-                      </a>
-                    )}
-                    {resource.resource_url && (
-                      <a
-                        href={resource.resource_url}
-                        download
-                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
-                      >
-                        <FiDownload className="mr-2" /> Download
-                      </a>
-                    )}
+        {/* Resources Section */}
+        {event.resources?.length > 0 && (
+          <section className="px-4 lg:px-0 py-8">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              Access the Event Resources here:
+            </h2>
+            <div className="space-y-4">
+              {event.resources.map((resource: any) => (
+                <div
+                  key={resource.id}
+                  className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
+                >
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2 text-gray-800">
+                      {resource.title}
+                    </h3>
+                    <div className="flex space-x-4">
+                      {resource.link && (
+                        <a
+                          href={resource.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                        >
+                          <FiExternalLink className="mr-2" /> View Link
+                        </a>
+                      )}
+                      {resource.resource_url && (
+                        <a
+                          href={resource.resource_url}
+                          download
+                          className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                        >
+                          <FiDownload className="mr-2" /> Download
+                        </a>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/website2/src/views/home/AnalyticsContentSection.tsx b/website2/src/views/home/AnalyticsContentSection.tsx
index 15bf7a5d1a..b16789f592 100644
--- a/website2/src/views/home/AnalyticsContentSection.tsx
+++ b/website2/src/views/home/AnalyticsContentSection.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { cn } from '@/lib/utils';
 
 type AnalyticsContentSectionProps = {
@@ -28,7 +29,9 @@ const AnalyticsContentSection: React.FC<AnalyticsContentSectionProps> = ({
 }) => {
   return (
     <section className={cn(backgroundColor, 'pt-16 px-4')}>
-      <div className="max-w-5xl mx-auto flex flex-col items-center gap-4">
+      <div
+        className={`${mainConfig.containerClass} flex flex-col items-center gap-4`}
+      >
         {/* Top Text Section */}
         <div className="flex flex-col lg:flex-row w-full items-start lg:items-center lg:justify-between gap-8 lg:gap-12">
           <div className="lg:w-1/2 w-full space-y-6 text-center lg:text-left">
diff --git a/website2/src/views/home/AppDownloadSection.tsx b/website2/src/views/home/AppDownloadSection.tsx
index f76ded5b0f..49fece6d8e 100644
--- a/website2/src/views/home/AppDownloadSection.tsx
+++ b/website2/src/views/home/AppDownloadSection.tsx
@@ -1,6 +1,8 @@
 import Image from 'next/image';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
+
 interface AppDownloadSectionProps {
   title?: string;
   description?: string;
@@ -18,7 +20,9 @@ const AppDownloadSection: React.FC<AppDownloadSectionProps> = ({
 }) => {
   return (
     <section className="w-full ">
-      <div className="max-w-5xl relative mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+      <div
+        className={`${mainConfig.containerClass} relative px-4 sm:px-6 lg:px-8 py-16 lg:py-24`}
+      >
         <div className="flex flex-col-reverse lg:flex-row items-center justify-between gap-12 lg:gap-24">
           {/* Left Content */}
           <div className="flex flex-col items-center lg:items-start text-center lg:text-left space-y-8 lg:w-1/2">
diff --git a/website2/src/views/home/FeaturedCarousel.tsx b/website2/src/views/home/FeaturedCarousel.tsx
index e2aaaa4429..faf9dd641c 100644
--- a/website2/src/views/home/FeaturedCarousel.tsx
+++ b/website2/src/views/home/FeaturedCarousel.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { HiArrowSmallLeft, HiArrowSmallRight } from 'react-icons/hi2';
 
+import mainConfig from '@/configs/mainConfigs';
 import { useHighlights } from '@/hooks/useApiHooks';
 
 const FeaturedCarousel = () => {
@@ -26,7 +27,7 @@ const FeaturedCarousel = () => {
   if (isLoading) {
     return (
       <section className="w-full bg-[#F0F4FA] py-16 md:py-24 overflow-hidden">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className={`${mainConfig.containerClass} px-4 sm:px-6 lg:px-8`}>
           <div className="flex space-x-4 animate-pulse">
             <div className="w-1/2 h-64 bg-gray-300 rounded-lg"></div>
             <div className="w-1/2 space-y-4">
@@ -57,7 +58,7 @@ const FeaturedCarousel = () => {
 
   return (
     <section className="w-full bg-[#F0F4FA] py-16 md:py-24 overflow-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className={`${mainConfig.containerClass} px-4 sm:px-6 lg:px-8`}>
         <div className="relative">
           {/* Carousel Track */}
           <div
diff --git a/website2/src/views/home/HomePlayerSection.tsx b/website2/src/views/home/HomePlayerSection.tsx
index 4333658754..1050c42f88 100644
--- a/website2/src/views/home/HomePlayerSection.tsx
+++ b/website2/src/views/home/HomePlayerSection.tsx
@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useRef, useState } from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch } from '@/hooks';
 import { openModal } from '@/store/slices/modalSlice';
 
@@ -65,7 +66,9 @@ const HomePlayerSection = () => {
   };
 
   return (
-    <div className="flex flex-col-reverse px-4 lg:flex-row items-center justify-between max-w-5xl mx-auto mt-8 gap-8">
+    <div
+      className={`flex flex-col-reverse px-4 lg:flex-row items-center justify-between ${mainConfig.containerClass} mt-8 gap-8`}
+    >
       {/* Text Section */}
       <div className="lg:w-1/2 w-full flex flex-col justify-center gap-1">
         <h1 className="text-[32px] lg:text-[56px] font-semibold leading-tight">
diff --git a/website2/src/views/home/HomeStatsSection.tsx b/website2/src/views/home/HomeStatsSection.tsx
index c16543904b..b9be4dc630 100644
--- a/website2/src/views/home/HomeStatsSection.tsx
+++ b/website2/src/views/home/HomeStatsSection.tsx
@@ -13,6 +13,7 @@ import Records from '@public/assets/svgs/ImpactNumbers/Records.svg';
 import Image from 'next/image';
 import React, { useState } from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { useImpactNumbers } from '@/hooks/useApiHooks';
 
 import { CustomButton } from '../../components/ui';
@@ -137,7 +138,7 @@ const HomeStatsSection: React.FC = () => {
 
   return (
     <section className="py-8 px-4 w-full space-y-20 bg-[#ECF2FF]">
-      <div className="max-w-6xl mx-auto space-y-16">
+      <div className={`${mainConfig.containerClass} space-y-16`}>
         {/* Partner Logos Section */}
         <section className="max-w-6xl mx-auto py-12 px-4">
           <div className="text-center space-y-6">
diff --git a/website2/src/views/legal/AirQoDataPage.tsx b/website2/src/views/legal/AirQoDataPage.tsx
index 02f606d597..689a285fe3 100644
--- a/website2/src/views/legal/AirQoDataPage.tsx
+++ b/website2/src/views/legal/AirQoDataPage.tsx
@@ -243,7 +243,7 @@ const AirQoDataPage = () => {
     },
   ];
   return (
-    <div className="max-w-5xl mx-auto w-full flex flex-col md:flex-row">
+    <div className="w-full flex flex-col md:flex-row">
       {/* Sidebar */}
       <aside className="w-full md:w-1/4 bg-blue-50 p-4 lg:sticky top-[124px] h-fit">
         <h2 className="text-xl font-semibold mb-4">Table of Contents</h2>
diff --git a/website2/src/views/legal/PP_Page.tsx b/website2/src/views/legal/PP_Page.tsx
index 2ba4071ff5..194da505c5 100644
--- a/website2/src/views/legal/PP_Page.tsx
+++ b/website2/src/views/legal/PP_Page.tsx
@@ -225,7 +225,7 @@ const PP_Page = () => {
     },
   ];
   return (
-    <div className="max-w-5xl mx-auto w-full flex flex-col md:flex-row">
+    <div className="w-full flex flex-col md:flex-row">
       {/* Sidebar */}
       <aside className="w-full md:w-1/4 bg-blue-50 p-4 lg:sticky top-[124px] h-fit">
         <h2 className="text-xl font-semibold mb-4">Table of Contents</h2>
diff --git a/website2/src/views/legal/PRP_Page.tsx b/website2/src/views/legal/PRP_Page.tsx
index 612922baff..1d4e02ef29 100644
--- a/website2/src/views/legal/PRP_Page.tsx
+++ b/website2/src/views/legal/PRP_Page.tsx
@@ -99,7 +99,7 @@ const PRP_Page = () => {
   ];
 
   return (
-    <div className="max-w-5xl mx-auto w-full flex flex-col md:flex-row">
+    <div className="w-full flex flex-col md:flex-row">
       {/* Sidebar */}
       <aside className="w-full md:w-1/4 bg-blue-50 p-4 lg:sticky top-[124px] h-fit">
         <h2 className="text-xl font-semibold mb-4">Table of Contents</h2>
diff --git a/website2/src/views/legal/TOSPage.tsx b/website2/src/views/legal/TOSPage.tsx
index c7bc525f57..004b5d1af7 100644
--- a/website2/src/views/legal/TOSPage.tsx
+++ b/website2/src/views/legal/TOSPage.tsx
@@ -598,7 +598,7 @@ const TOSPage = () => {
     },
   ];
   return (
-    <div className="max-w-5xl mx-auto w-full flex flex-col md:flex-row">
+    <div className="w-full flex flex-col md:flex-row">
       {/* Sidebar */}
       <aside className="w-full md:w-1/4 bg-blue-50 p-4 lg:sticky top-[124px] h-fit">
         <h2 className="text-xl font-semibold mb-4">Table of Contents</h2>
diff --git a/website2/src/views/legal/Tabsection.tsx b/website2/src/views/legal/Tabsection.tsx
index 0cbf793202..e9ff957a43 100644
--- a/website2/src/views/legal/Tabsection.tsx
+++ b/website2/src/views/legal/Tabsection.tsx
@@ -1,25 +1,31 @@
 'use client';
-import { usePathname, useRouter } from 'next/navigation';
-import React from 'react';
 
-const TabSection = () => {
-  const router = useRouter();
-  const pathname = usePathname();
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import type React from 'react';
+
+import mainConfig from '@/configs/mainConfigs';
 
-  const tabs = [
-    { label: 'Terms of Service', value: 'terms-of-service' },
-    { label: 'Privacy Policy', value: 'privacy-policy' },
-    { label: 'AirQo Data', value: 'airqo-data' },
-    { label: 'Payment Terms & Refund Policy', value: 'payment-refund-policy' },
-  ];
+interface Tab {
+  label: string;
+  value: string;
+}
 
-  const handleTabClick = (value: string) => {
-    router.push(`/legal/${value}`);
-  };
+const tabs: Tab[] = [
+  { label: 'Terms of Service', value: 'terms-of-service' },
+  { label: 'Privacy Policy', value: 'privacy-policy' },
+  { label: 'AirQo Data', value: 'airqo-data' },
+  { label: 'Payment Terms & Refund Policy', value: 'payment-refund-policy' },
+];
+
+const TabSection: React.FC = () => {
+  const pathname = usePathname();
 
   return (
-    <div className="w-full bg-[#F2F1F6]  pt-16 h-[250px] px-4 lg:px-0">
-      <div className="w-full h-full flex flex-col justify-between items-start max-w-5xl mx-auto">
+    <div className="w-full bg-[#F2F1F6] pt-16 h-[250px] px-4 lg:px-0">
+      <div
+        className={`w-full h-full flex flex-col justify-between items-start ${mainConfig.containerClass}`}
+      >
         <div></div>
 
         {/* Heading */}
@@ -28,17 +34,17 @@ const TabSection = () => {
         {/* Tabs */}
         <div className="flex border-b border-gray-200 overflow-x-auto w-full space-x-8">
           {tabs.map((tab) => (
-            <button
+            <Link
               key={tab.value}
-              onClick={() => handleTabClick(tab.value)}
-              className={`pb-2 text-sm font-medium ${
+              href={`/legal/${tab.value}`}
+              className={`pb-2 text-sm font-medium transition-colors duration-200 ${
                 pathname.includes(tab.value)
                   ? 'text-black border-b-2 border-blue-600'
                   : 'text-gray-500 hover:text-black'
               }`}
             >
               {tab.label}
-            </button>
+            </Link>
           ))}
         </div>
       </div>
diff --git a/website2/src/views/press/PressPage.tsx b/website2/src/views/press/PressPage.tsx
index fc3c2e0ed1..1afa2bb16a 100644
--- a/website2/src/views/press/PressPage.tsx
+++ b/website2/src/views/press/PressPage.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 
 import { CustomButton, NoData, Pagination } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { usePressArticles } from '@/hooks/useApiHooks';
 
 const PressPage: React.FC = () => {
@@ -43,7 +44,7 @@ const PressPage: React.FC = () => {
     <div className="flex flex-col w-full h-full">
       {/* Header Section */}
       <section className="mb-12 bg-[#F2F1F6] px-4 lg:px-0 py-16">
-        <div className="max-w-5xl mx-auto w-full">
+        <div className={`${mainConfig.containerClass} w-full`}>
           <h1 className="text-4xl font-bold mb-2">In the Press</h1>
           <p className="text-lg text-gray-600">
             Stories about AirQo that we think you&apos;ll love
@@ -52,10 +53,10 @@ const PressPage: React.FC = () => {
       </section>
 
       {/* Articles Section */}
-      <section>
+      <section className={`${mainConfig.containerClass}`}>
         {isLoading ? (
           // Display 4 skeletons when loading
-          <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          <div className="w-full px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
             <ArticleSkeleton />
             <ArticleSkeleton />
             <ArticleSkeleton />
@@ -64,7 +65,7 @@ const PressPage: React.FC = () => {
         ) : isError ? (
           <NoData message="Failed to load articles. Please try again later." />
         ) : displayedArticles.length > 0 ? (
-          <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          <div className="w-full px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
             {displayedArticles.map((article: any) => (
               <div
                 key={article.id}
@@ -109,6 +110,7 @@ const PressPage: React.FC = () => {
           totalPages={totalPages}
           currentPage={currentPage}
           onPageChange={handlePageChange}
+          scrollToTop={true}
         />
       )}
     </div>
diff --git a/website2/src/views/publications/ResourcePage.tsx b/website2/src/views/publications/ResourcePage.tsx
index 84c02d4bbd..d2d44aa8f0 100644
--- a/website2/src/views/publications/ResourcePage.tsx
+++ b/website2/src/views/publications/ResourcePage.tsx
@@ -4,6 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { FiDownload } from 'react-icons/fi';
 
 import { CustomButton, NoData, Pagination } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { usePublications } from '@/hooks/useApiHooks';
 
 const ResourcePage: React.FC = () => {
@@ -66,7 +67,7 @@ const ResourcePage: React.FC = () => {
     <div className="flex flex-col w-full space-y-16 overflow-hidden">
       {/* Header Section */}
       <section className="bg-[#F2F1F6] pt-16">
-        <div className="max-w-5xl mx-auto px-4 lg:px-8">
+        <div className={`${mainConfig.containerClass} px-4 lg:px-8`}>
           <h1 className="text-4xl font-bold mb-4">Resources</h1>
           <p className="text-xl mb-8">
             Discover our latest collection of resources
@@ -97,7 +98,7 @@ const ResourcePage: React.FC = () => {
       </section>
 
       {/* Resources List Section */}
-      <section className="max-w-5xl mx-auto w-full px-4 lg:px-8">
+      <section className={`${mainConfig.containerClass} w-full px-4 lg:px-8`}>
         {isLoading ? (
           // Skeleton Loader
           <div className="space-y-6">
@@ -159,6 +160,7 @@ const ResourcePage: React.FC = () => {
           totalPages={totalPages}
           currentPage={currentPage}
           onPageChange={handlePageChange}
+          scrollToTop={true}
         />
       )}
     </div>
diff --git a/website2/src/views/solutions/AfricanCities/AfricanCities.tsx b/website2/src/views/solutions/AfricanCities/AfricanCities.tsx
index 9f81ce49ce..693f1381b6 100644
--- a/website2/src/views/solutions/AfricanCities/AfricanCities.tsx
+++ b/website2/src/views/solutions/AfricanCities/AfricanCities.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { useAfricanCountries } from '@/hooks/useApiHooks';
 
 const AfricanCities: React.FC = () => {
@@ -49,7 +50,7 @@ const AfricanCities: React.FC = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto p-4 lg:p-0">
+    <div className={`${mainConfig.containerClass} p-4 lg:p-0`}>
       {/* Top Section: Countries List */}
       <div className="flex gap-4 flex-wrap pb-4">
         {africanCountries.map((country: any) => (
diff --git a/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx b/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx
index af82c66c6e..6e048982a2 100644
--- a/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx
+++ b/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import CardWrapper from '@/components/sections/solutions/CardWrapper';
 import HeroSection from '@/components/sections/solutions/HeroSection';
 import { CustomButton, Divider } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import AfricanCities from '@/views/solutions/AfricanCities/AfricanCities';
 
 // Define motion variants for different animations
@@ -46,7 +47,7 @@ const AfricanCityPage = () => {
 
       {/* Challenge Statement */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 text-center py-16"
+        className={`${mainConfig.containerClass} px-4 text-center py-16`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -66,7 +67,7 @@ const AfricanCityPage = () => {
 
       {/* Approach Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4"
+        className={`${mainConfig.containerClass} px-4`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
diff --git a/website2/src/views/solutions/communities/CommunityPage.tsx b/website2/src/views/solutions/communities/CommunityPage.tsx
index a38a703784..36804b563e 100644
--- a/website2/src/views/solutions/communities/CommunityPage.tsx
+++ b/website2/src/views/solutions/communities/CommunityPage.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import CardWrapper from '@/components/sections/solutions/CardWrapper';
 import HeroSection from '@/components/sections/solutions/HeroSection';
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useDispatch } from '@/hooks';
 import { openModal } from '@/store/slices/modalSlice';
 
@@ -50,7 +51,7 @@ const CommunitiesPage = () => {
 
       {/* AirQo + Communities -> AirQommunities */}
       <motion.section
-        className="max-w-5xl mx-auto py-16 px-4"
+        className={`${mainConfig.containerClass} py-16 px-4`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -77,7 +78,7 @@ const CommunitiesPage = () => {
         variants={containerVariants}
       >
         <motion.div
-          className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
+          className={`${mainConfig.containerClass} grid grid-cols-1 lg:grid-cols-2 gap-8 items-center`}
           variants={itemVariants}
         >
           {/* Text Content */}
@@ -156,7 +157,7 @@ const CommunitiesPage = () => {
         variants={containerVariants}
       >
         <motion.div
-          className="max-w-5xl mx-auto py-12 md:py-16 flex flex-col lg:flex-row  gap-4 items-center"
+          className={`${mainConfig.containerClass} py-12 md:py-16 flex flex-col lg:flex-row  gap-4 items-center`}
           variants={itemVariants}
         >
           {/* Left column with title */}
@@ -213,7 +214,7 @@ const CommunitiesPage = () => {
         variants={containerVariants}
       >
         <motion.div
-          className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
+          className={`${mainConfig.containerClass} grid grid-cols-1 lg:grid-cols-2 gap-8 items-center`}
           variants={itemVariants}
         >
           {/* Text Content */}
@@ -313,7 +314,7 @@ const CommunitiesPage = () => {
       >
         <CustomButton
           onClick={() => dispatch(openModal())}
-          className="max-w-5xl mx-auto w-full px-4 rounded-lg text-black py-16 bg-[#FFEA2B]"
+          className={`${mainConfig.containerClass} w-full px-4 rounded-lg text-black py-16 bg-[#FFEA2B]`}
         >
           <div className="text-center">
             <h2 className="text-3xl mb-4">Become an air quality champion.</h2>
diff --git a/website2/tsconfig.json b/website2/tsconfig.json
index 3fc9ee7bcc..286c30a113 100644
--- a/website2/tsconfig.json
+++ b/website2/tsconfig.json
@@ -26,7 +26,8 @@
       "@/lib/*": ["./src/lib/*"],
       "@/services/*": ["./src/services/*"],
       "@/context/*": ["./src/context/*"],
-      "@/views/*": ["./src/views/*"]
+      "@/views/*": ["./src/views/*"],
+      "@/configs/*": ["./src/configs/*"]
     },
     "plugins": [
       {

From 2ef11949c42ae2087eeae1001128f4b1108388b2 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 21:44:48 +0300
Subject: [PATCH 4/8] updates

---
 .../src/app/clean-air-forum/glossary/page.tsx |   4 +-
 website2/src/app/clean-air-forum/layout.tsx   |   5 +-
 .../app/clean-air-forum/logistics/page.tsx    |   6 +-
 .../src/app/clean-air-forum/partners/page.tsx |  12 +-
 .../program-committee/page.tsx                |   6 +-
 .../app/clean-air-forum/resources/page.tsx    |   4 +-
 .../src/app/clean-air-forum/schedule/page.tsx |   8 +-
 .../src/app/clean-air-forum/speakers/page.tsx |  10 +-
 .../views/cleanairforum/events/EventsPage.tsx |   7 +-
 .../cleanairforum/events/SingleEvent.tsx      | 426 +++++++++---------
 .../cleanairforum/membership/MemberPage.tsx   |   5 +-
 .../cleanairforum/resources/ResourcePage.tsx  |   5 +-
 12 files changed, 259 insertions(+), 239 deletions(-)

diff --git a/website2/src/app/clean-air-forum/glossary/page.tsx b/website2/src/app/clean-air-forum/glossary/page.tsx
index 680f0cd037..5c278261dc 100644
--- a/website2/src/app/clean-air-forum/glossary/page.tsx
+++ b/website2/src/app/clean-air-forum/glossary/page.tsx
@@ -13,8 +13,8 @@ const Page = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>
diff --git a/website2/src/app/clean-air-forum/layout.tsx b/website2/src/app/clean-air-forum/layout.tsx
index 8241bf6c22..4b28ada2d7 100644
--- a/website2/src/app/clean-air-forum/layout.tsx
+++ b/website2/src/app/clean-air-forum/layout.tsx
@@ -6,6 +6,7 @@ import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
 import NewsLetter from '@/components/layouts/NewsLetter';
 import Loading from '@/components/loading';
+import mainConfig from '@/configs/mainConfigs';
 import { ForumDataProvider } from '@/context/ForumDataContext';
 import { useForumEvents } from '@/hooks/useApiHooks';
 import BannerSection from '@/views/Forum/BannerSection';
@@ -38,7 +39,9 @@ const CleanAirLayout: React.FC<CleanAirLayoutProps> = ({ children }) => {
         <BannerSection data={eventData} />
 
         {/* Main Content */}
-        <main className="flex-1 pb-8">{children}</main>
+        <main className={`${mainConfig.containerClass} w-full flex-1 pb-8`}>
+          {children}
+        </main>
 
         {/* Newsletter Section */}
         <section className="my-16">
diff --git a/website2/src/app/clean-air-forum/logistics/page.tsx b/website2/src/app/clean-air-forum/logistics/page.tsx
index 8b7a54eff4..4db91a8225 100644
--- a/website2/src/app/clean-air-forum/logistics/page.tsx
+++ b/website2/src/app/clean-air-forum/logistics/page.tsx
@@ -12,8 +12,8 @@ const Page = () => {
     return null;
   }
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>
@@ -30,7 +30,7 @@ const Page = () => {
         </div>
       </div>
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>
diff --git a/website2/src/app/clean-air-forum/partners/page.tsx b/website2/src/app/clean-air-forum/partners/page.tsx
index 79bbfb0936..ceb0eb8c94 100644
--- a/website2/src/app/clean-air-forum/partners/page.tsx
+++ b/website2/src/app/clean-air-forum/partners/page.tsx
@@ -45,8 +45,8 @@ const Page = () => {
     }));
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Partners Text Section */}
       <div className="py-4">
@@ -71,7 +71,7 @@ const Page = () => {
       {/* Convening Partners Section */}
       {conveningPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -92,7 +92,7 @@ const Page = () => {
       {/* Host Partners Section */}
       {hostPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -113,7 +113,7 @@ const Page = () => {
       {/* Sponsors Section */}
       {sponsorPartner?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -132,7 +132,7 @@ const Page = () => {
       {/* Funding Partners Section */}
       {fundingPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
diff --git a/website2/src/app/clean-air-forum/program-committee/page.tsx b/website2/src/app/clean-air-forum/program-committee/page.tsx
index 4c2a11e574..6ae5799636 100644
--- a/website2/src/app/clean-air-forum/program-committee/page.tsx
+++ b/website2/src/app/clean-air-forum/program-committee/page.tsx
@@ -45,8 +45,8 @@ const Page: React.FC = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       <div className="py-4">
         <h2 className="text-2xl font-bold">Program Committee</h2>
@@ -58,7 +58,7 @@ const Page: React.FC = () => {
       </div>
 
       {/* Member Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedMembers?.map((person: any) => (
           <MemberCard
             key={person.id}
diff --git a/website2/src/app/clean-air-forum/resources/page.tsx b/website2/src/app/clean-air-forum/resources/page.tsx
index 8bad5cf35a..36342dee9a 100644
--- a/website2/src/app/clean-air-forum/resources/page.tsx
+++ b/website2/src/app/clean-air-forum/resources/page.tsx
@@ -113,7 +113,7 @@ const Page = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 py-6 gap-6 flex flex-col">
+    <div className=" px-4 lg:px-0 py-6 gap-6 flex flex-col">
       {/* Buttons for Expand/Collapse All */}
       <div className="flex justify-end space-x-4 mb-4">
         <button
@@ -155,7 +155,7 @@ const Page = () => {
             ),
           )}
 
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
         </div>
       ))}
     </div>
diff --git a/website2/src/app/clean-air-forum/schedule/page.tsx b/website2/src/app/clean-air-forum/schedule/page.tsx
index 72f18619cb..8dc072116d 100644
--- a/website2/src/app/clean-air-forum/schedule/page.tsx
+++ b/website2/src/app/clean-air-forum/schedule/page.tsx
@@ -43,7 +43,7 @@ const AccordionItem: React.FC<any> = ({
         <div className="mt-4 pt-4">
           {sessions?.map((item: any, index: any) => (
             <div className="flex flex-col gap-4" key={index}>
-              <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+              <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
               <div className="grid grid-cols-12 gap-4 mb-4">
                 <div className="col-span-2 text-sm font-semibold">
                   {formatTime(item.start_time)}
@@ -81,7 +81,7 @@ const Page = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
+    <div className=" px-4 lg:px-0 flex flex-col gap-6">
       {/* Schedule Section */}
       <div className="py-4">
         <h2 className="text-2xl font-bold">Schedule</h2>
@@ -104,7 +104,7 @@ const Page = () => {
         />
       ))}
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Registration Section */}
       <div>
@@ -121,7 +121,7 @@ const Page = () => {
         </div>
       </div>
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Sponsorship Section */}
       <div>
diff --git a/website2/src/app/clean-air-forum/speakers/page.tsx b/website2/src/app/clean-air-forum/speakers/page.tsx
index 27eeaed363..6748aba32e 100644
--- a/website2/src/app/clean-air-forum/speakers/page.tsx
+++ b/website2/src/app/clean-air-forum/speakers/page.tsx
@@ -55,8 +55,8 @@ const Page = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto flex flex-col px-4 lg:px-0 gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="flex flex-col px-4 lg:px-0 gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       <div className="py-4">
         <div
@@ -68,7 +68,7 @@ const Page = () => {
 
       {/* Keynote Speakers Section */}
       <h2 className="text-2xl font-bold">Keynote Speakers</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedKeyNoteSpeakers?.map((person: any) => (
           <MemberCard
             key={person.id}
@@ -90,11 +90,11 @@ const Page = () => {
         </div>
       )}
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Speakers Section */}
       <h2 className="text-2xl font-bold">Speakers</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedSpeakers?.map((person: any) => (
           <MemberCard
             key={person.id}
diff --git a/website2/src/views/cleanairforum/events/EventsPage.tsx b/website2/src/views/cleanairforum/events/EventsPage.tsx
index 0fa2cef0c2..21ec9f5ae0 100644
--- a/website2/src/views/cleanairforum/events/EventsPage.tsx
+++ b/website2/src/views/cleanairforum/events/EventsPage.tsx
@@ -12,6 +12,7 @@ import {
   DropdownMenuTrigger,
   Pagination,
 } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useCleanAirEvents } from '@/hooks/useApiHooks';
 import EventCard from '@/views/cleanairforum/EventCard';
 import EventSkeleton from '@/views/cleanairforum/EventSkeleton';
@@ -124,7 +125,7 @@ const EventsPage: React.FC = () => {
   return (
     <div className="py-8 space-y-16">
       {/* Main banner section */}
-      <section className="max-w-5xl mx-auto w-full">
+      <section className={`${mainConfig.containerClass} w-full`}>
         <div className="py-8 px-4 lg:px-0 flex flex-col items-center space-y-6 md:space-y-8">
           <div className="w-full">
             <Image
@@ -151,7 +152,9 @@ const EventsPage: React.FC = () => {
       </section>
 
       <section className="bg-blue-50 py-16">
-        <div className="max-w-5xl mx-auto w-full px-4 lg:px-0 flex flex-col gap-8">
+        <div
+          className={`${mainConfig.containerClass} w-full px-4 lg:px-0 flex flex-col gap-8`}
+        >
           {/* Filter Section */}
           <div className="flex justify-end py-8 items-center">
             <div className="flex space-x-4">
diff --git a/website2/src/views/cleanairforum/events/SingleEvent.tsx b/website2/src/views/cleanairforum/events/SingleEvent.tsx
index 100382e867..9bf54ca26d 100644
--- a/website2/src/views/cleanairforum/events/SingleEvent.tsx
+++ b/website2/src/views/cleanairforum/events/SingleEvent.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react-icons/fi';
 
 import { Accordion, CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { getEventDetails } from '@/services/apiService';
 import { convertDeltaToHtml } from '@/utils/quillUtils';
 
@@ -67,7 +68,9 @@ const SingleEvent: React.FC<any> = ({ id }) => {
 
         {/* Partner Logos Skeleton */}
         <section className="py-12 bg-gray-100">
-          <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8">
+          <div
+            className={`${mainConfig.containerClass} grid grid-cols-2 md:grid-cols-4 gap-8`}
+          >
             {[...Array(4)].map((_, index) => (
               <div key={index} className="flex items-center justify-center">
                 <div className="w-36 h-24 bg-gray-300 rounded animate-pulse"></div>
@@ -75,49 +78,50 @@ const SingleEvent: React.FC<any> = ({ id }) => {
             ))}
           </div>
         </section>
+        <div className={`${mainConfig.containerClass}`}>
+          {/* Event Details Skeleton */}
+          <section className="px-4 py-8">
+            <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
+            <div className="space-y-4">
+              {[...Array(5)].map((_, index) => (
+                <div
+                  key={index}
+                  className="h-4 bg-gray-300 rounded animate-pulse"
+                ></div>
+              ))}
+            </div>
+          </section>
 
-        {/* Event Details Skeleton */}
-        <section className="max-w-5xl mx-auto px-4 py-8">
-          <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
-          <div className="space-y-4">
-            {[...Array(5)].map((_, index) => (
-              <div
-                key={index}
-                className="h-4 bg-gray-300 rounded animate-pulse"
-              ></div>
+          {/* Event Program Skeleton */}
+          <section className="px-4 py-8">
+            <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
+            {[...Array(3)].map((_, index) => (
+              <div key={index} className="mb-4">
+                <div className="h-4 bg-gray-300 rounded w-1/4 mb-2 animate-pulse"></div>
+                <div className="space-y-2">
+                  {[...Array(3)].map((_, idx) => (
+                    <div
+                      key={idx}
+                      className="h-4 bg-gray-300 rounded animate-pulse"
+                    ></div>
+                  ))}
+                </div>
+              </div>
             ))}
-          </div>
-        </section>
+          </section>
 
-        {/* Event Program Skeleton */}
-        <section className="max-w-5xl mx-auto px-4 py-8">
-          <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
-          {[...Array(3)].map((_, index) => (
-            <div key={index} className="mb-4">
-              <div className="h-4 bg-gray-300 rounded w-1/4 mb-2 animate-pulse"></div>
-              <div className="space-y-2">
-                {[...Array(3)].map((_, idx) => (
-                  <div
-                    key={idx}
-                    className="h-4 bg-gray-300 rounded animate-pulse"
-                  ></div>
-                ))}
+          {/* Inquiry Skeleton */}
+          <section className="px-4 py-8">
+            <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
+            {[...Array(2)].map((_, index) => (
+              <div key={index} className="mb-4 space-y-2">
+                <div className="h-4 bg-gray-300 rounded w-1/2 animate-pulse"></div>
+                <div className="h-3 bg-gray-300 rounded w-1/3 animate-pulse"></div>
+                <div className="h-3 bg-gray-300 rounded w-1/2 animate-pulse"></div>
               </div>
-            </div>
-          ))}
-        </section>
-
-        {/* Inquiry Skeleton */}
-        <section className="max-w-5xl mx-auto px-4 py-8">
-          <div className="h-6 bg-gray-300 rounded w-1/3 mb-6 animate-pulse"></div>
-          {[...Array(2)].map((_, index) => (
-            <div key={index} className="mb-4 space-y-2">
-              <div className="h-4 bg-gray-300 rounded w-1/2 animate-pulse"></div>
-              <div className="h-3 bg-gray-300 rounded w-1/3 animate-pulse"></div>
-              <div className="h-3 bg-gray-300 rounded w-1/2 animate-pulse"></div>
-            </div>
-          ))}
-        </section>
+            ))}
+          </section>
+        </div>
       </div>
     );
   }
@@ -146,7 +150,9 @@ const SingleEvent: React.FC<any> = ({ id }) => {
           }}
         >
           <div className="absolute inset-0 bg-black opacity-50"></div>
-          <div className="relative z-10 max-w-5xl mx-auto w-full space-y-6 text-start px-4">
+          <div
+            className={`relative z-10 ${mainConfig.containerClass} w-full space-y-6 text-start px-4`}
+          >
             {/* bread crumb */}
 
             <nav className="flex items-start text-sm">
@@ -178,7 +184,9 @@ const SingleEvent: React.FC<any> = ({ id }) => {
       {/* Partner Logos Section */}
       {event?.partner_logos && event?.partner_logos?.length > 0 && (
         <section className="py-12 bg-gray-100">
-          <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8">
+          <div
+            className={`${mainConfig.containerClass} grid grid-cols-2 md:grid-cols-4 gap-8`}
+          >
             {event?.partner_logos?.map((partner: any) => (
               <div
                 key={partner.id}
@@ -198,184 +206,186 @@ const SingleEvent: React.FC<any> = ({ id }) => {
         </section>
       )}
 
-      {/* Event Details Section */}
-      {eventDetailsHtml && (
-        <section className="max-w-5xl mx-auto px-4 lg:px-0 py-8">
-          <h2 className="text-3xl font-semibold mb-6 pb-2">Event Details</h2>
-          <div className="flex justify-between w-full items-center border-b-2 py-4 mb-6">
-            <div className="flex flex-col gap-4 mb-6">
-              <div className="flex items-center space-x-2">
-                <FiCalendar className="text-gray-500 w-5 h-5" />
-                <p className="text-gray-600">
-                  {event?.start_date && event?.end_date
-                    ? formatDateRange(event?.start_date, event?.end_date)
-                    : 'Date to be announced'}
-                </p>
-              </div>
+      <div className={`${mainConfig.containerClass}`}>
+        {/* Event Details Section */}
+        {eventDetailsHtml && (
+          <section className="px-4 lg:px-0 py-8">
+            <h2 className="text-3xl font-semibold mb-6 pb-2">Event Details</h2>
+            <div className="flex justify-between w-full items-center border-b-2 py-4 mb-6">
+              <div className="flex flex-col gap-4 mb-6">
+                <div className="flex items-center space-x-2">
+                  <FiCalendar className="text-gray-500 w-5 h-5" />
+                  <p className="text-gray-600">
+                    {event?.start_date && event?.end_date
+                      ? formatDateRange(event?.start_date, event?.end_date)
+                      : 'Date to be announced'}
+                  </p>
+                </div>
 
-              <div className="flex items-center space-x-2">
-                <FiClock className="text-gray-500 w-5 h-5" />
-                <p className="text-gray-600">
-                  {event?.start_time && event?.end_time
-                    ? `${format(
-                        parse(event?.start_time, 'HH:mm:ss', new Date()),
-                        'HH:mm',
-                      )} - ${format(
-                        parse(event?.end_time, 'HH:mm:ss', new Date()),
-                        'HH:mm',
-                      )}`
-                    : 'Time to be announced'}
-                </p>
+                <div className="flex items-center space-x-2">
+                  <FiClock className="text-gray-500 w-5 h-5" />
+                  <p className="text-gray-600">
+                    {event?.start_time && event?.end_time
+                      ? `${format(
+                          parse(event?.start_time, 'HH:mm:ss', new Date()),
+                          'HH:mm',
+                        )} - ${format(
+                          parse(event?.end_time, 'HH:mm:ss', new Date()),
+                          'HH:mm',
+                        )}`
+                      : 'Time to be announced'}
+                  </p>
+                </div>
               </div>
+              {/* Registration Link Section */}
+              {event?.registration_link && (
+                <CustomButton
+                  type="button"
+                  onClick={() => window.open(event.registration_link)}
+                  className="text-white"
+                >
+                  Register Now
+                </CustomButton>
+              )}
             </div>
-            {/* Registration Link Section */}
-            {event?.registration_link && (
-              <CustomButton
-                type="button"
-                onClick={() => window.open(event.registration_link)}
-                className="text-white"
-              >
-                Register Now
-              </CustomButton>
-            )}
-          </div>
-          <div
-            className="prose lg:prose-xl"
-            dangerouslySetInnerHTML={{
-              __html: eventDetailsHtml || 'Event details coming soon.',
-            }}
-          ></div>
-        </section>
-      )}
+            <div
+              className="prose lg:prose-xl"
+              dangerouslySetInnerHTML={{
+                __html: eventDetailsHtml || 'Event details coming soon.',
+              }}
+            ></div>
+          </section>
+        )}
 
-      {/* Event Program Section */}
-      {event.programs && event.programs.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 py-8">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            Event Schedule
-          </h2>
-          {event.programs.map((program: any) => (
-            <Accordion
-              key={program.id}
-              title={format(new Date(program.date), 'MMMM do, yyyy')}
-            >
-              <div className="p-6 bg-blue-50 rounded-lg shadow-sm space-y-4">
-                {program.sessions && program.sessions.length > 0 ? (
-                  program.sessions.map((session: any) => (
-                    <div
-                      key={session.id}
-                      className="border-b pb-4 last:border-none"
-                    >
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-gray-500">
-                          {format(
-                            new Date(`1970-01-01T${session.start_time}`),
-                            'h:mm a',
-                          )}{' '}
-                          -{' '}
-                          {format(
-                            new Date(`1970-01-01T${session.end_time}`),
-                            'h:mm a',
-                          )}
-                        </span>
-                        {session.venue && (
+        {/* Event Program Section */}
+        {event.programs && event.programs.length > 0 && (
+          <section className="px-4 py-8">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              Event Schedule
+            </h2>
+            {event.programs.map((program: any) => (
+              <Accordion
+                key={program.id}
+                title={format(new Date(program.date), 'MMMM do, yyyy')}
+              >
+                <div className="p-6 bg-blue-50 rounded-lg shadow-sm space-y-4">
+                  {program.sessions && program.sessions.length > 0 ? (
+                    program.sessions.map((session: any) => (
+                      <div
+                        key={session.id}
+                        className="border-b pb-4 last:border-none"
+                      >
+                        <div className="flex items-center justify-between">
                           <span className="text-sm text-gray-500">
-                            {session.venue}
+                            {format(
+                              new Date(`1970-01-01T${session.start_time}`),
+                              'h:mm a',
+                            )}{' '}
+                            -{' '}
+                            {format(
+                              new Date(`1970-01-01T${session.end_time}`),
+                              'h:mm a',
+                            )}
                           </span>
-                        )}
-                      </div>
-                      <h3 className="text-xl font-semibold mt-2">
-                        {session.session_title}
-                      </h3>
-                      <div className="text-gray-700 mt-1">
-                        <div
-                          dangerouslySetInnerHTML={{
-                            __html: session.session_details,
-                          }}
-                        ></div>
+                          {session.venue && (
+                            <span className="text-sm text-gray-500">
+                              {session.venue}
+                            </span>
+                          )}
+                        </div>
+                        <h3 className="text-xl font-semibold mt-2">
+                          {session.session_title}
+                        </h3>
+                        <div className="text-gray-700 mt-1">
+                          <div
+                            dangerouslySetInnerHTML={{
+                              __html: session.session_details,
+                            }}
+                          ></div>
+                        </div>
                       </div>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-gray-500">No sessions available.</p>
-                )}
-              </div>
-            </Accordion>
-          ))}
-        </section>
-      )}
+                    ))
+                  ) : (
+                    <p className="text-gray-500">No sessions available.</p>
+                  )}
+                </div>
+              </Accordion>
+            ))}
+          </section>
+        )}
 
-      {/* Inquiry Section */}
-      {event.inquiries && event.inquiries.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 py-8 bg-gray-50 rounded-lg shadow">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            For any inquiries and clarifications:
-          </h2>
-          <div className="space-y-6">
-            {event.inquiries.map((inquiry: any) => (
-              <div
-                key={inquiry.id}
-                className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300"
-              >
-                <p className="text-lg font-medium">{inquiry.inquiry}</p>
-                {inquiry.role && (
-                  <p className="text-gray-600">{inquiry.role}</p>
-                )}
-                <a
-                  href={`mailto:${inquiry.email}`}
-                  className="text-blue-500 hover:underline"
+        {/* Inquiry Section */}
+        {event.inquiries && event.inquiries.length > 0 && (
+          <section className="px-4 py-8 bg-gray-50 rounded-lg shadow">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              For any inquiries and clarifications:
+            </h2>
+            <div className="space-y-6">
+              {event.inquiries.map((inquiry: any) => (
+                <div
+                  key={inquiry.id}
+                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300"
                 >
-                  {inquiry.email}
-                </a>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+                  <p className="text-lg font-medium">{inquiry.inquiry}</p>
+                  {inquiry.role && (
+                    <p className="text-gray-600">{inquiry.role}</p>
+                  )}
+                  <a
+                    href={`mailto:${inquiry.email}`}
+                    className="text-blue-500 hover:underline"
+                  >
+                    {inquiry.email}
+                  </a>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
 
-      {/* Resources Section */}
-      {event.resources && event.resources.length > 0 && (
-        <section className="max-w-5xl mx-auto px-4 lg:px-0 py-8">
-          <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
-            Access the Event Resources here:
-          </h2>
-          <div className="space-y-4">
-            {event.resources.map((resource: any) => (
-              <div
-                key={resource.id}
-                className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
-              >
-                <div>
-                  <h3 className="text-xl font-semibold mb-2 text-gray-800">
-                    {resource.title}
-                  </h3>
-                  <div className="flex space-x-4">
-                    {resource.link && (
-                      <a
-                        href={resource.link}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
-                      >
-                        <FiExternalLink className="mr-2" /> View Link
-                      </a>
-                    )}
-                    {resource.resource_url && (
-                      <a
-                        href={resource.resource_url}
-                        download
-                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
-                      >
-                        <FiDownload className="mr-2" /> Download
-                      </a>
-                    )}
+        {/* Resources Section */}
+        {event.resources && event.resources.length > 0 && (
+          <section className="px-4 lg:px-0 py-8">
+            <h2 className="text-3xl font-semibold mb-6 border-b-2 pb-2">
+              Access the Event Resources here:
+            </h2>
+            <div className="space-y-4">
+              {event.resources.map((resource: any) => (
+                <div
+                  key={resource.id}
+                  className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
+                >
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2 text-gray-800">
+                      {resource.title}
+                    </h3>
+                    <div className="flex space-x-4">
+                      {resource.link && (
+                        <a
+                          href={resource.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                        >
+                          <FiExternalLink className="mr-2" /> View Link
+                        </a>
+                      )}
+                      {resource.resource_url && (
+                        <a
+                          href={resource.resource_url}
+                          download
+                          className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                        >
+                          <FiDownload className="mr-2" /> Download
+                        </a>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/website2/src/views/cleanairforum/membership/MemberPage.tsx b/website2/src/views/cleanairforum/membership/MemberPage.tsx
index 2e9e2a1fd4..5ce0248185 100644
--- a/website2/src/views/cleanairforum/membership/MemberPage.tsx
+++ b/website2/src/views/cleanairforum/membership/MemberPage.tsx
@@ -3,13 +3,16 @@
 import Image from 'next/image';
 import React, { useMemo } from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import { usePartners } from '@/hooks/useApiHooks';
 import PaginatedSection from '@/views/cleanairforum/PaginatedSection';
 import RegisterBanner from '@/views/cleanairforum/RegisterBanner';
 
 const SkeletonPaginatedSection: React.FC = () => {
   return (
-    <section className="max-w-5xl mx-auto w-full py-8 px-4 lg:px-0 space-y-6 md:space-y-8">
+    <section
+      className={`${mainConfig.containerClass} w-full py-8 px-4 lg:px-0 space-y-6 md:space-y-8`}
+    >
       <div className="animate-pulse space-y-6">
         {/* Title Skeleton */}
         <div className="h-12 bg-gray-200 rounded w-3/4"></div>
diff --git a/website2/src/views/cleanairforum/resources/ResourcePage.tsx b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
index c2536799c1..7cb4d62ced 100644
--- a/website2/src/views/cleanairforum/resources/ResourcePage.tsx
+++ b/website2/src/views/cleanairforum/resources/ResourcePage.tsx
@@ -11,6 +11,7 @@ import {
   NoData,
   Pagination,
 } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 import { useCleanAirResources } from '@/hooks/useApiHooks';
 import { useResourceFilter } from '@/hooks/useResourceFilter';
 import type { Resource } from '@/types/index';
@@ -54,7 +55,7 @@ const ResourcePage: React.FC = () => {
 
   return (
     <div className="py-8 space-y-16">
-      <section className="max-w-5xl mx-auto w-full">
+      <section className={`${mainConfig.containerClass} w-full`}>
         <div className="py-8 px-4 lg:px-0 flex flex-col items-center space-y-6 md:space-y-8">
           <div className="w-full">
             <Image
@@ -70,7 +71,7 @@ const ResourcePage: React.FC = () => {
       </section>
 
       <section className="px-4 bg-blue-50 lg:px-0 py-16">
-        <div className="max-w-5xl mx-auto w-full space-y-8">
+        <div className={`${mainConfig.containerClass} w-full space-y-8`}>
           <div className="flex flex-col md:flex-row justify-between items-center">
             <h2 className="text-2xl font-semibold mb-4 md:mb-0">
               Resource Center

From 26b03ad51dc84dafccc5b18b13d55d1cb2800507 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 23:01:06 +0300
Subject: [PATCH 5/8] updates

---
 .../app/products/analytics/AnalyticsPage.tsx  | 17 ++++++++++----
 website2/src/app/products/api/ApiPage.tsx     | 17 ++++++++++----
 .../app/products/calibrate/CalibratePage.tsx  | 17 ++++++++++----
 .../app/products/mobile-app/MobilePage.tsx    | 19 +++++++++++----
 .../src/app/products/monitor/MonitorPage.tsx  | 23 ++++++++++++++-----
 website2/src/views/careers/CareerPage.tsx     |  2 +-
 website2/src/views/careers/DetailsPage.tsx    |  2 +-
 7 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/website2/src/app/products/analytics/AnalyticsPage.tsx b/website2/src/app/products/analytics/AnalyticsPage.tsx
index 15a9a8d47e..72f1871ffc 100644
--- a/website2/src/app/products/analytics/AnalyticsPage.tsx
+++ b/website2/src/app/products/analytics/AnalyticsPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { BiDownload } from 'react-icons/bi';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 // Define motion variants for different animations
 const containerVariants = {
@@ -49,7 +50,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -85,7 +88,7 @@ const AnalyticsPage = () => {
 
       {/* Unlock Air Quality Insights Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`${mainConfig.containerClass} px-4 grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -117,7 +120,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-green-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -189,7 +194,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -235,7 +242,7 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto space-y-8">
+        <div className={`${mainConfig.containerClass} space-y-8`}>
           {/* Description and Button */}
           <motion.div
             className="text-center flex flex-col items-center space-y-6"
diff --git a/website2/src/app/products/api/ApiPage.tsx b/website2/src/app/products/api/ApiPage.tsx
index 549411cede..7d4d8e50e8 100644
--- a/website2/src/app/products/api/ApiPage.tsx
+++ b/website2/src/app/products/api/ApiPage.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import React from 'react';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 // Define motion variants for different animations
 const containerVariants = {
@@ -48,7 +49,9 @@ const ApiPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -83,7 +86,7 @@ const ApiPage = () => {
 
       {/* Unlock Air Quality Insights Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`${mainConfig.containerClass} px-4 grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -114,7 +117,9 @@ const ApiPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-gray-100 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -159,7 +164,9 @@ const ApiPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -206,7 +213,7 @@ const ApiPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto space-y-8">
+        <div className={`${mainConfig.containerClass} space-y-8`}>
           {/* Description and Button */}
           <motion.div
             className="text-center flex flex-col items-center space-y-6"
diff --git a/website2/src/app/products/calibrate/CalibratePage.tsx b/website2/src/app/products/calibrate/CalibratePage.tsx
index a9951aee2b..05f97cec96 100644
--- a/website2/src/app/products/calibrate/CalibratePage.tsx
+++ b/website2/src/app/products/calibrate/CalibratePage.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import React from 'react';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 // Define motion variants for different animations
 const containerVariants = {
@@ -48,7 +49,9 @@ const CalibratePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -84,7 +87,7 @@ const CalibratePage = () => {
 
       {/* Why Calibrate Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`${mainConfig.containerClass} px-4 grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -117,7 +120,9 @@ const CalibratePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-yellow-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -169,7 +174,9 @@ const CalibratePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -217,7 +224,7 @@ const CalibratePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto space-y-8">
+        <div className={`${mainConfig.containerClass} space-y-8`}>
           {/* Description and Button */}
           <motion.div
             className="text-center flex flex-col items-center space-y-6"
diff --git a/website2/src/app/products/mobile-app/MobilePage.tsx b/website2/src/app/products/mobile-app/MobilePage.tsx
index 2f542acd6d..b0207716fe 100644
--- a/website2/src/app/products/mobile-app/MobilePage.tsx
+++ b/website2/src/app/products/mobile-app/MobilePage.tsx
@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import Image from 'next/image';
 import React from 'react';
 
+import mainConfig from '@/configs/mainConfigs';
 import AppDownloadSection from '@/views/home/AppDownloadSection';
 
 // Define motion variants for different animations
@@ -48,7 +49,9 @@ const MobilePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -85,7 +88,7 @@ const MobilePage = () => {
 
       {/* Know Your Air Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`${mainConfig.containerClass} px-4 grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -115,7 +118,9 @@ const MobilePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-gray-100 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -173,7 +178,9 @@ const MobilePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="relative order-2 lg:order-1 mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -227,7 +234,9 @@ const MobilePage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto flex flex-col-reverse lg:flex-row gap-8 items-center relative">
+        <div
+          className={`${mainConfig.containerClass} flex flex-col-reverse lg:flex-row gap-8 items-center relative`}
+        >
           {/* Card Section (Health Tips Description) */}
           <motion.div
             className="bg-gray-100 p-6 rounded-lg shadow-md w-full lg:w-[40%] z-10 lg:absolute lg:left-0 lg:top-44 sm:w-auto md:w-[630px] md:-top-10"
diff --git a/website2/src/app/products/monitor/MonitorPage.tsx b/website2/src/app/products/monitor/MonitorPage.tsx
index bb21d1a521..17ccd2be10 100644
--- a/website2/src/app/products/monitor/MonitorPage.tsx
+++ b/website2/src/app/products/monitor/MonitorPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { BiDownload } from 'react-icons/bi';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 // Define motion variants for different animations
 const containerVariants = {
@@ -49,7 +50,9 @@ const MonitorPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -89,7 +92,9 @@ const MonitorPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-green-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -146,7 +151,9 @@ const MonitorPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="order-2 lg:order-1 mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -191,7 +198,9 @@ const MonitorPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -232,7 +241,7 @@ const MonitorPage = () => {
 
       {/* Monitor Installation Guide Section */}
       <motion.section
-        className="px-4 max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`px-4 ${mainConfig.containerClass} grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -261,7 +270,9 @@ const MonitorPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-yellow-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-16 z-10 space-y-6"
diff --git a/website2/src/views/careers/CareerPage.tsx b/website2/src/views/careers/CareerPage.tsx
index c62e1af150..6be2218ea1 100644
--- a/website2/src/views/careers/CareerPage.tsx
+++ b/website2/src/views/careers/CareerPage.tsx
@@ -81,7 +81,7 @@ const CareerPage: React.FC = () => {
         </div>
       </header>
 
-      <div className={`space-y-16 ${mainConfig.containerClass}`}>
+      <div className={`space-y-16 w-full ${mainConfig.containerClass}`}>
         {/* Categories Section */}
         <section className="px-4 lg:px-8">
           <h2 className="text-3xl font-normal mb-8">Categories</h2>
diff --git a/website2/src/views/careers/DetailsPage.tsx b/website2/src/views/careers/DetailsPage.tsx
index 4278715e8a..23a9911fac 100644
--- a/website2/src/views/careers/DetailsPage.tsx
+++ b/website2/src/views/careers/DetailsPage.tsx
@@ -58,7 +58,7 @@ const DetailsPage: React.FC<{ id: string }> = ({ id }) => {
 
   return (
     <div
-      className={`${mainConfig.containerClass} p-8 bg-white border border-gray-200 rounded-lg mt-6`}
+      className={`${mainConfig.containerClass} w-full p-8 bg-white border border-gray-200 rounded-lg mt-6`}
     >
       {/* Back Button */}
       <div className="mb-4">

From 81f89f48f80cc37a8dfa7887b7cb327d80eb20c8 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 23:14:35 +0300
Subject: [PATCH 6/8] fix to filter only airqo partners

---
 website2/src/views/about/AboutPage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/website2/src/views/about/AboutPage.tsx b/website2/src/views/about/AboutPage.tsx
index 2ee146fc0d..e0826a40ed 100644
--- a/website2/src/views/about/AboutPage.tsx
+++ b/website2/src/views/about/AboutPage.tsx
@@ -41,6 +41,11 @@ const AboutPage: React.FC = () => {
     useExternalTeamMembers();
   const { partners } = usePartners();
 
+  // filter out partners whose website_category is airqo
+  const filteredPartners = partners.filter(
+    (partner: any) => partner.website_category !== 'cleanair',
+  );
+
   const dispatch = useDispatch();
 
   /** Helper Function to Render Member Sections **/
@@ -392,7 +397,7 @@ const AboutPage: React.FC = () => {
               </div>
             </div>
             <PaginatedSection
-              logos={partners.map((partner: any) => ({
+              logos={filteredPartners.map((partner: any) => ({
                 id: partner.id,
                 logoUrl: partner.partner_logo_url || '',
               }))}

From f0738d192960342438140c4d8bf25c024a31c4be Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 23:20:29 +0300
Subject: [PATCH 7/8] updates

---
 website2/src/configs/mainConfigs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website2/src/configs/mainConfigs.ts b/website2/src/configs/mainConfigs.ts
index 80ab3d6238..d3781a75b3 100644
--- a/website2/src/configs/mainConfigs.ts
+++ b/website2/src/configs/mainConfigs.ts
@@ -7,7 +7,7 @@ export type Config = {
 const mainConfig: Config = {
   templateName: 'AirQo Website',
   homePageUrl: '/home',
-  containerClass: 'max-w-5xl mx-auto',
+  containerClass: 'max-w-5xl mx-auto w-full',
 };
 
 export default mainConfig;

From 9c76dd0fbd20680192ae3bff50680d4bb09068ad Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 26 Jan 2025 23:54:38 +0300
Subject: [PATCH 8/8] updates

---
 website2/src/hooks/swrConfig.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/website2/src/hooks/swrConfig.ts b/website2/src/hooks/swrConfig.ts
index 4cdea83587..e48c6edcd9 100644
--- a/website2/src/hooks/swrConfig.ts
+++ b/website2/src/hooks/swrConfig.ts
@@ -1,9 +1,11 @@
-export const swrOptions = {
+import type { SWRConfiguration } from 'swr';
+
+export const swrOptions: SWRConfiguration = {
   // Revalidate data on focus of the window (when the user returns to the tab)
-  revalidateOnFocus: true,
+  revalidateOnFocus: false,
 
   // Revalidate data when the browser reconnects to the network
-  revalidateOnReconnect: true,
+  revalidateOnReconnect: false,
 
   // Disable automatic refreshing at intervals
   refreshInterval: 0,
@@ -13,6 +15,15 @@ export const swrOptions = {
 
   // Retry fetching on error settings
   shouldRetryOnError: true,
-  errorRetryCount: 3,
+  errorRetryCount: 2, // This will result in 3 total attempts (initial + 2 retries)
   errorRetryInterval: 5000,
+
+  // Custom onErrorRetry function to stop retrying after 3 attempts
+  onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
+    // Only retry up to 2 times (3 total attempts)
+    if (retryCount >= 2) return;
+
+    // Retry after 5 seconds
+    setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 5000);
+  },
 };