diff --git a/k8s/platform/values-stage.yaml b/k8s/platform/values-stage.yaml
index 528d436536..16ed7f5ddc 100644
--- a/k8s/platform/values-stage.yaml
+++ b/k8s/platform/values-stage.yaml
@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-next-platform
   pullPolicy: Always
-  tag: stage-7542a4b5-1700216129
+  tag: stage-d601c5d3-1700587995
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''
diff --git a/platform/package.json b/platform/package.json
index 7bd273c1be..228427c896 100644
--- a/platform/package.json
+++ b/platform/package.json
@@ -39,6 +39,7 @@
     "papaparse": "^5.4.1",
     "postcss": "^8.4.16",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^4.0.0",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
diff --git a/platform/src/common/components/Calendar/CustomCalendar.jsx b/platform/src/common/components/Calendar/CustomCalendar.jsx
index 741609b6ea..c6784a6a0f 100644
--- a/platform/src/common/components/Calendar/CustomCalendar.jsx
+++ b/platform/src/common/components/Calendar/CustomCalendar.jsx
@@ -4,7 +4,16 @@ import ChevronDownIcon from '@/icons/Common/chevron_down.svg';
 import { useSelector, useDispatch } from 'react-redux';
 import { setChartDataRange } from '@/lib/store/services/charts/ChartSlice';
 import Calendar from './Calendar';
-import { set } from 'date-fns';
+import {
+  differenceInDays,
+  isSameDay,
+  startOfMonth,
+  endOfMonth,
+  startOfQuarter,
+  endOfQuarter,
+  subMonths,
+  subDays,
+} from 'date-fns';
 
 const CustomCalendar = ({
   initialStartDate,
@@ -24,27 +33,15 @@ const CustomCalendar = ({
   });
 
   const handleValueChange = (newValue) => {
-    const computeDaysBetweenDates = (startDate, endDate) => {
-      const oneDay = 24 * 60 * 60 * 1000;
-      return Math.floor(Math.abs((startDate.getTime() - endDate.getTime()) / oneDay));
-    };
-
-    const isSameDay = (date1, date2) =>
-      date1.getDate() === date2.getDate() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getFullYear() === date2.getFullYear();
-
     const handleDateChange = (newValue) => {
       const startDate = new Date(newValue.start);
       const endDate = new Date(newValue.end);
 
       const today = new Date();
 
-      const yesterday = new Date(today);
-      yesterday.setDate(yesterday.getDate() - 1);
-      yesterday.setHours(0, 0, 0, 0);
+      const yesterday = subDays(today, 1);
 
-      const computedValue = computeDaysBetweenDates(startDate, endDate);
+      const computedValue = Math.abs(differenceInDays(startDate, endDate));
 
       let label = `Last ${computedValue} days`;
 
@@ -64,12 +61,9 @@ const CustomCalendar = ({
         label = 'Last year';
       }
 
-      // include also for This month and Last month
-      const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
-
-      const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-
-      const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
+      const thisMonthStart = startOfMonth(today);
+      const lastMonthStart = startOfMonth(subMonths(today, 1));
+      const lastMonthEnd = endOfMonth(subMonths(today, 1));
 
       if (isSameDay(startDate, thisMonthStart) && isSameDay(endDate, today)) {
         label = 'This month';
@@ -77,6 +71,16 @@ const CustomCalendar = ({
         label = 'Last month';
       }
 
+      const thisQuarterStart = startOfQuarter(today);
+      const lastQuarterStart = startOfQuarter(subMonths(today, 3));
+      const lastQuarterEnd = endOfQuarter(subMonths(today, 3));
+
+      if (isSameDay(startDate, thisQuarterStart) && isSameDay(endDate, today)) {
+        label = 'This quarter';
+      } else if (isSameDay(startDate, lastQuarterStart) && isSameDay(endDate, lastQuarterEnd)) {
+        label = 'Last quarter';
+      }
+
       dispatch(setChartDataRange({ startDate, endDate, label }));
       setValue(newValue);
     };
diff --git a/platform/src/common/components/Calendar/components/ShortCuts.jsx b/platform/src/common/components/Calendar/components/ShortCuts.jsx
index 2411cb9aaf..bcf30bce89 100644
--- a/platform/src/common/components/Calendar/components/ShortCuts.jsx
+++ b/platform/src/common/components/Calendar/components/ShortCuts.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   startOfDay,
   endOfDay,
@@ -7,41 +7,49 @@ import {
   startOfYear,
   endOfMonth,
   endOfYear,
+  startOfQuarter,
+  endOfQuarter,
+  subQuarters,
 } from 'date-fns';
 
-const ShortCuts = ({ setSelectedRange }) => {
-  const timePeriods = [
-    { label: 'Today', range: () => [startOfDay(new Date()), endOfDay(new Date())] },
-    {
-      label: 'Yesterday',
-      range: () => [startOfDay(subDays(new Date(), 1)), endOfDay(subDays(new Date(), 1))],
-    },
-    {
-      label: 'Last 7 days',
-      range: () => [startOfDay(subDays(new Date(), 7)), endOfDay(new Date())],
-    },
-    {
-      label: 'Last 30 days',
-      range: () => [startOfDay(subDays(new Date(), 30)), endOfDay(new Date())],
-    },
-    {
-      label: 'Last 90 days',
-      range: () => [startOfDay(subDays(new Date(), 90)), endOfDay(new Date())],
-    },
-    { label: 'This month', range: () => [startOfMonth(new Date()), endOfMonth(new Date())] },
-    { label: 'This year', range: () => [startOfYear(new Date()), endOfYear(new Date())] },
-    {
-      label: 'Last year',
-      range: () => [startOfYear(subDays(new Date(), 365)), endOfYear(subDays(new Date(), 365))],
-    },
-  ];
+const timePeriods = [
+  { label: 'Today', range: () => [startOfDay(new Date()), endOfDay(new Date())] },
+  {
+    label: 'Yesterday',
+    range: () => [startOfDay(subDays(new Date(), 1)), endOfDay(subDays(new Date(), 1))],
+  },
+  { label: 'Last 7 days', range: () => [startOfDay(subDays(new Date(), 7)), endOfDay(new Date())] },
+  {
+    label: 'Last 30 days',
+    range: () => [startOfDay(subDays(new Date(), 30)), endOfDay(new Date())],
+  },
+  {
+    label: 'Last 90 days',
+    range: () => [startOfDay(subDays(new Date(), 90)), endOfDay(new Date())],
+  },
+  { label: 'This month', range: () => [startOfMonth(new Date()), endOfMonth(new Date())] },
+  { label: 'This year', range: () => [startOfYear(new Date()), endOfYear(new Date())] },
+  {
+    label: 'Last year',
+    range: () => [startOfYear(subDays(new Date(), 365)), endOfYear(subDays(new Date(), 365))],
+  },
+  { label: 'This quarter', range: () => [startOfQuarter(new Date()), endOfQuarter(new Date())] },
+  {
+    label: 'Last quarter',
+    range: () => [
+      startOfQuarter(subQuarters(new Date(), 1)),
+      endOfQuarter(subQuarters(new Date(), 1)),
+    ],
+  },
+];
 
+const ShortCuts = ({ setSelectedRange }) => {
   const handleShortcutClick = (range) => {
     setSelectedRange({ start: range()[0], end: range()[1] });
   };
 
   return (
-    <div className='py-6 border-r border-gray-100 w-full md:w-[260px]'>
+    <div className='py-6 border-r border-gray-100 w-full md:w-[260px] max-h-[350px] overflow-y-auto scr'>
       <ul className='text-sm leading-5 font-normal flex flex-wrap md:flex-col lg:flex-col'>
         {timePeriods.map((period) => (
           <li key={period.label}>
diff --git a/platform/src/common/components/Charts/ChartContainer.js b/platform/src/common/components/Charts/ChartContainer.js
index f56c6e587d..ecf9ef767d 100644
--- a/platform/src/common/components/Charts/ChartContainer.js
+++ b/platform/src/common/components/Charts/ChartContainer.js
@@ -210,7 +210,7 @@ const ChartContainer = ({ chartType, chartTitle, menuBtn, height, width, id, dow
       <PrintReportModal
         title='Share report'
         btnText='Send'
-        ModalType='share'
+        shareModel={true}
         open={openShare}
         onClose={() => setOpenShare(false)}
         format={shareFormat}
diff --git a/platform/src/common/components/Customise/LocationsContentComponent.jsx b/platform/src/common/components/Customise/LocationsContentComponent.jsx
index 94b63422f6..758f83005f 100644
--- a/platform/src/common/components/Customise/LocationsContentComponent.jsx
+++ b/platform/src/common/components/Customise/LocationsContentComponent.jsx
@@ -12,6 +12,7 @@ import StarIconLight from '@/icons/Actions/star_icon_light.svg';
 import DragIcon from '@/icons/Actions/drag_icon.svg';
 import DragIconLight from '@/icons/Actions/drag_icon_light.svg';
 import Toast from '../Toast';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 const LocationsContentComponent = ({ selectedLocations }) => {
   const dispatch = useDispatch();
@@ -23,6 +24,7 @@ const LocationsContentComponent = ({ selectedLocations }) => {
   const [locationArray, setLocationArray] = useState(selectedLocations);
   const [filteredLocations, setFilteredLocations] = useState([]);
   const [unSelectedLocations, setUnSelectedLocations] = useState([]);
+  const [draggedLocations, setDraggedLocations] = useState(selectedLocations);
 
   const handleLocationEntry = (e) => {
     setInputSelect(false);
@@ -45,20 +47,36 @@ const LocationsContentComponent = ({ selectedLocations }) => {
   };
 
   const handleLocationSelect = (item) => {
-    unSelectedLocations.includes(item)
-      ? setUnSelectedLocations(unSelectedLocations.filter((location) => location._id !== item._id))
-      : null;
-    locationArray.includes(item)
-      ? setLocationArray(locationArray.filter((location) => location._id !== item._id))
-      : setLocationArray((locations) => [...locations, item]);
+    const unSelectedIndex = unSelectedLocations.findIndex((location) => location._id === item._id);
+    if (unSelectedIndex !== -1) {
+      setUnSelectedLocations(unSelectedLocations.filter((location) => location._id !== item._id));
+    }
+    const locationIndex = locationArray.findIndex((location) => location._id === item._id);
+    if (locationIndex !== -1) {
+      setLocationArray(locationArray.filter((location) => location._id !== item._id));
+    } else {
+      const newLocationArray = [...locationArray, item];
+      setLocationArray(newLocationArray);
+      setDraggedLocations(newLocationArray);
+    }
     setInputSelect(true);
     setLocation('');
   };
 
   const removeLocation = (item) => {
-    setLocationArray(locationArray.filter((location) => location._id !== item._id));
+    const newLocationArray = locationArray.filter((location) => location._id !== item._id);
+    setLocationArray(newLocationArray);
+    setDraggedLocations(newLocationArray);
     setUnSelectedLocations((locations) => [...locations, item]);
-    dispatch(setSelectedLocations(locationArray));
+    dispatch(setSelectedLocations(newLocationArray));
+  };
+
+  const onDragEnd = (result) => {
+    const items = Array.from(draggedLocations);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    setDraggedLocations(items);
   };
 
   useEffect(() => {
@@ -77,10 +95,10 @@ const LocationsContentComponent = ({ selectedLocations }) => {
     if (gridLocationsData && gridLocationsData.length > 0) {
       try {
         dispatch(setSelectedLocations(locationArray));
-        while (unSelectedLocations.length < 15) {
+        while (unSelectedLocations.length < 8) {
           const randomIndex = Math.floor(Math.random() * gridLocationsData.length);
           const randomObject = gridLocationsData[randomIndex];
-          if (!unSelectedLocations.includes(randomObject)) {
+          if (!unSelectedLocations.find((location) => location._id === randomObject._id)) {
             unSelectedLocations.push(randomObject);
           }
         }
@@ -92,120 +110,129 @@ const LocationsContentComponent = ({ selectedLocations }) => {
 
   return (
     <form>
-      {locationArray && locationArray.length > 4 && (
-        <Toast type={'error'} message='Choose only 4 locations' timeout={6000} />
-      )}
-      <div className='mt-6'>
-        <div className='w-full flex flex-row items-center justify-start'>
-          <div className='flex items-center justify-center pl-3 bg-white border h-12 rounded-lg rounded-r-none border-r-0 border-input-light-outline focus:border-input-light-outline'>
-            <SearchIcon />
-          </div>
-          <input
-            onChange={(e) => {
-              handleLocationEntry(e);
-            }}
-            onClick={() => toggleInputSelect()}
-            value={location}
-            placeholder='Search Villages, Cities or Country'
-            className='input text-sm text-secondary-neutral-light-800 w-full h-12 ml-0 rounded-lg bg-white border-l-0 rounded-l-none border-input-light-outline focus:border-input-light-outline'
-          />
-        </div>
-        {location !== '' && (
-          <div
-            className={`bg-white max-h-48 overflow-y-scroll px-3 pt-2 pr-1 my-1 border border-input-light-outline rounded-md ${
-              inputSelect ? 'hidden' : 'relative'
-            }`}
-          >
-            {filteredLocations && filteredLocations.length > 0 ? (
-              filteredLocations.map((location) => (
-                <div
-                  className='flex flex-row justify-start items-center mb-0.5 text-sm w-full hover:cursor-pointer'
-                  onClick={() => {
-                    handleLocationSelect(location);
-                  }}
-                  key={location._id}
-                >
-                  <LocationIcon />
-                  <div className='text-sm ml-1 text-black capitalize'>{location.name}</div>
-                </div>
-              ))
-            ) : (
-              <div className='flex flex-row justify-start items-center mb-0.5 text-sm w-full'>
-                <LocationIcon />
-                <div className='text-sm ml-1 text-black font-medium capitalize'>
-                  Location not found
-                </div>
-              </div>
-            )}
-          </div>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {locationArray && locationArray.length > 4 && (
+          <Toast type={'error'} message='Choose only 4 locations' timeout={6000} />
         )}
-      </div>
-      {
-        <div className='mt-4'>
-          {locationArray && locationArray.length > 0 ? (
-            locationArray.map((location) => (
-              <div
-                className='border rounded-lg bg-secondary-neutral-light-25 border-input-light-outline flex flex-row justify-between items-center p-3 w-full mb-2'
-                key={location._id}
-              >
-                <div className='flex flex-row items-center overflow-x-clip'>
-                  <div>
-                    <DragIcon />
-                  </div>
-                  <span className='text-sm text-secondary-neutral-light-800 font-medium'>
-                    {location.name}
-                  </span>
-                </div>
-                <div className='flex flex-row'>
+        <div className='mt-6'>
+          <div className='w-full flex flex-row items-center justify-start'>
+            <div className='flex items-center justify-center pl-3 bg-white border h-12 rounded-lg rounded-r-none border-r-0 border-input-light-outline focus:border-input-light-outline'>
+              <SearchIcon />
+            </div>
+            <input
+              onChange={(e) => {
+                handleLocationEntry(e);
+              }}
+              onClick={() => toggleInputSelect()}
+              value={location}
+              placeholder='Search Villages, Cities or Country'
+              className='input text-sm text-secondary-neutral-light-800 w-full h-12 ml-0 rounded-lg bg-white border-l-0 rounded-l-none border-input-light-outline focus:border-input-light-outline'
+            />
+          </div>
+          {location !== '' && (
+            <div
+              className={`bg-white max-h-48 overflow-y-scroll px-3 pt-2 pr-1 my-1 border border-input-light-outline rounded-md ${
+                inputSelect ? 'hidden' : 'relative'
+              }`}>
+              {filteredLocations && filteredLocations.length > 0 ? (
+                filteredLocations.map((location) => (
                   <div
-                    className='mr-1 hover:cursor-pointer'
-                    onClick={() => removeLocation(location)}
-                  >
-                    <TrashIcon />
+                    className='flex flex-row justify-start items-center mb-0.5 text-sm w-full hover:cursor-pointer'
+                    onClick={() => {
+                      handleLocationSelect(location);
+                    }}
+                    key={location._id}>
+                    <LocationIcon />
+                    <div className='text-sm ml-1 text-black capitalize'>{location.name}</div>
                   </div>
-                  <div className='bg-primary-600 rounded-md p-2 flex items-center justify-center'>
-                    <StarIcon />
+                ))
+              ) : (
+                <div className='flex flex-row justify-start items-center mb-0.5 text-sm w-full'>
+                  <LocationIcon />
+                  <div className='text-sm ml-1 text-black font-medium capitalize'>
+                    Location not found
                   </div>
                 </div>
-              </div>
-            ))
-          ) : (
-            <span />
+              )}
+            </div>
           )}
         </div>
-      }
-      <div className='mt-6'>
-        <h3 className='text-sm text-black-800 font-semibold'>Suggestions</h3>
-        <div className='mt-3'>
-          {unSelectedLocations &&
-            unSelectedLocations.length > 0 &&
-            unSelectedLocations.slice(0, 15).map((location) => (
-              <div
-                className='border rounded-lg bg-secondary-neutral-light-25 border-input-light-outline flex flex-row justify-between items-center p-3 w-full mb-2'
-                key={location._id}
-              >
-                <div className='flex flex-row items-center overflow-x-clip'>
-                  <div>
-                    <DragIconLight />
-                  </div>
-                  <span className='text-sm text-secondary-neutral-light-800 font-medium'>
-                    {location.name}
-                  </span>
+        <Droppable droppableId='starredLocations'>
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {
+                <div className='mt-4'>
+                  {locationArray &&
+                    locationArray.length > 0 &&
+                    draggedLocations.map((location, index) => (
+                      <Draggable draggableId={location._id} index={index}>
+                        {(provided) => (
+                          <div
+                            className='border rounded-lg bg-secondary-neutral-light-25 border-input-light-outline flex flex-row justify-between items-center p-3 w-full mb-2'
+                            key={location._id}
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}>
+                            <div className='flex flex-row items-center overflow-x-clip'>
+                              <div>
+                                <DragIcon />
+                              </div>
+                              <span className='text-sm text-secondary-neutral-light-800 font-medium'>
+                                {location.name}
+                              </span>
+                            </div>
+                            <div className='flex flex-row'>
+                              <div
+                                className='mr-1 hover:cursor-pointer'
+                                onClick={() => removeLocation(location)}>
+                                <TrashIcon />
+                              </div>
+                              <div
+                                className='bg-primary-600 rounded-md p-2 flex items-center justify-center hover:cursor-pointer'
+                                onClick={() => removeLocation(location)}>
+                                <StarIcon />
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
                 </div>
-                <div className='flex flex-row'>
-                  <div
-                    className='border border-input-light-outline rounded-md p-2 flex items-center justify-center hover:cursor-pointer'
-                    onClick={() => {
-                      handleLocationSelect(location);
-                    }}
-                  >
-                    <StarIconLight />
-                  </div>
+              }
+              <div className='mt-6 mb-24'>
+                <h3 className='text-sm text-black-800 font-semibold'>Suggestions</h3>
+                <div className='mt-3'>
+                  {unSelectedLocations &&
+                    unSelectedLocations.length > 0 &&
+                    unSelectedLocations.slice(0, 15).map((location) => (
+                      <div
+                        className='border rounded-lg bg-secondary-neutral-light-25 border-input-light-outline flex flex-row justify-between items-center p-3 w-full mb-2'
+                        key={location._id}>
+                        <div className='flex flex-row items-center overflow-x-clip'>
+                          <div>
+                            <DragIconLight />
+                          </div>
+                          <span className='text-sm text-secondary-neutral-light-800 font-medium'>
+                            {location.name}
+                          </span>
+                        </div>
+                        <div className='flex flex-row'>
+                          <div
+                            className='border border-input-light-outline rounded-md p-2 flex items-center justify-center hover:cursor-pointer'
+                            onClick={() => {
+                              handleLocationSelect(location);
+                            }}>
+                            <StarIconLight />
+                          </div>
+                        </div>
+                      </div>
+                    ))}
                 </div>
               </div>
-            ))}
-        </div>
-      </div>
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
     </form>
   );
 };
diff --git a/platform/src/common/components/Customise/index.jsx b/platform/src/common/components/Customise/index.jsx
index 01a33083cb..167c1610aa 100644
--- a/platform/src/common/components/Customise/index.jsx
+++ b/platform/src/common/components/Customise/index.jsx
@@ -4,11 +4,13 @@ import LocationsContentComponent from './LocationsContentComponent';
 import { useDispatch, useSelector } from 'react-redux';
 import Spinner from '@/components/Spinner';
 import {
-  updateUserPreferences,
+  replaceUserPreferences,
   getIndividualUserPreferences,
 } from '@/lib/store/services/account/UserDefaultsSlice';
 import Toast from '@/components/Toast';
 import { fetchUserPreferences } from '@/lib/store/services/charts/userDefaultsSlice';
+import { RxInfoCircled } from 'react-icons/rx';
+import { completeTask } from '@/lib/store/services/checklists/CheckList';
 
 const CustomiseLocationsComponent = ({ toggleCustomise }) => {
   const dispatch = useDispatch();
@@ -54,19 +56,19 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
         },
       };
       try {
-        const response = await dispatch(updateUserPreferences(data));
-
+        const response = await dispatch(replaceUserPreferences(data));
         if (!response.payload.success) {
           setCreationErrors({
             state: true,
             message: response.payload.message,
           });
-
           setLoading(false);
         } else {
           toggleCustomise();
           // fetching user preferences after update
+          dispatch(getIndividualUserPreferences(id));
           dispatch(fetchUserPreferences(id));
+          dispatch(completeTask(2));
         }
       } catch (error) {
         throw error;
@@ -77,7 +79,7 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
 
   useEffect(() => {
     dispatch(getIndividualUserPreferences(id));
-  }, [preferenceData]);
+  }, []);
 
   return (
     <div>
@@ -85,10 +87,17 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
         <Toast type={'error'} timeout={6000} message={creationErrors.message} />
       )}
       <div
-        className='absolute right-0 top-0 w-full lg:w-4/12 h-full overflow-y-scroll bg-white z-50 border-l-grey-50 px-6'
+        className='absolute right-0 top-0 w-full lg:w-3/12 h-full overflow-y-scroll bg-white z-50 border-l-grey-50 px-6'
         style={{ boxShadow: '0px 16px 32px 0px rgba(83, 106, 135, 0.20)' }}>
         <div className='flex flex-row justify-between items-center mt-6'>
-          <h3 className='text-xl text-black-800 font-semibold'>Customise</h3>
+          <h3 className='text-xl text-black-800 font-semibold'>
+            Customise
+            <span
+              className='tooltip tooltip-bottom ml-1 hover:cursor-pointer text-lg font-normal'
+              data-tip='Changes are applied when 4 locations have been selected'>
+              <RxInfoCircled style={{ paddingTop: '2px' }} />
+            </span>
+          </h3>
           <div
             className='p-3 rounded-md border border-secondary-neutral-light-100 bg-white hover:cursor-pointer'
             onClick={() => toggleCustomise()}>
@@ -97,7 +106,7 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
         </div>
         <div className='mt-6'>
           <p className='text-grey-350 text-sm font-normal'>
-            Select at least 4 locations you would like to feature on your overview page.
+            Select any 4 locations you would like to feature on your overview page.
           </p>
         </div>
         <div className='mt-6'>
@@ -123,7 +132,7 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
         )}
         {/* TODO: Pollutant component and post selection to user defaults */}
       </div>
-      <div className='absolute w-full lg:w-4/12 bg-white z-50 bottom-0 right-0 border-t border-input-light-outline py-4 px-6'>
+      <div className='absolute w-full lg:w-3/12 bg-white z-50 bottom-0 right-0 border-t border-input-light-outline py-4 px-6'>
         <div className='flex flex-row justify-end items-center'>
           <button
             className='btn bg-white mr-3 border border-input-light-outline text-sm text-secondary-neutral-light-800 font-medium py-3 px-4 rounded-lg hover:bg-white hover:border-input-light-outline'
diff --git a/platform/src/common/components/Dropdowns/CustomDropdown.jsx b/platform/src/common/components/Dropdowns/CustomDropdown.jsx
index e75358376c..477a2ed351 100644
--- a/platform/src/common/components/Dropdowns/CustomDropdown.jsx
+++ b/platform/src/common/components/Dropdowns/CustomDropdown.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 
-const CustomDropdown = ({ trigger, children, className, id }) => {
+const CustomDropdown = ({ trigger, children, className, id, dropdownWidth = '200px' }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -25,7 +25,10 @@ const CustomDropdown = ({ trigger, children, className, id }) => {
       {React.cloneElement(trigger, { onClick: handleDropdown })}
       {isOpen && (
         <div
-          className={`absolute w-[200px] mt-2 bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg z-50 ${className}`}>
+          className={`absolute mt-2 bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg z-50 ${className}`}
+          style={{
+            width: dropdownWidth,
+          }}>
           <div className='py-1'>{children}</div>
         </div>
       )}
diff --git a/platform/src/common/components/Dropdowns/OrganizationDropdown.jsx b/platform/src/common/components/Dropdowns/OrganizationDropdown.jsx
index 05279e8345..22138edfb0 100644
--- a/platform/src/common/components/Dropdowns/OrganizationDropdown.jsx
+++ b/platform/src/common/components/Dropdowns/OrganizationDropdown.jsx
@@ -2,6 +2,9 @@ import { useEffect, useState } from 'react';
 import CustomDropdown from './CustomDropdown';
 import CheckIcon from '@/icons/tickIcon';
 import ChevronDownIcon from '@/icons/Common/chevron_down.svg';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateUserPreferences } from '@/lib/store/services/account/UserDefaultsSlice';
+import Spinner from '@/components/Spinner';
 
 const splitNameIntoList = (fullName) => {
   if (fullName && fullName.length > 0) {
@@ -11,16 +14,56 @@ const splitNameIntoList = (fullName) => {
   return;
 };
 
+export const formatString = (string) => {
+  return string
+    .replace(/_/g, ' ')
+    .replace(/\w\S*/g, (txt) => {
+      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    })
+    .replace('Id', 'ID');
+};
+
 const OrganizationDropdown = () => {
+  const dispatch = useDispatch();
   const [activeGroup, setActiveGroup] = useState({});
   const [userGroups, setUserGroups] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedGroup, setSelectedGroup] = useState({});
+  const preferences = useSelector((state) => state.defaults.individual_preferences);
 
   useEffect(() => {
     const storedActiveGroup = localStorage.getItem('activeGroup');
-    const storedUserGroups = localStorage.getItem('loggedUser');
-    const userGroups = JSON.parse(storedUserGroups)?.groups;
+    const storedUser = localStorage.getItem('loggedUser');
+    const userGroups = JSON.parse(storedUser)?.groups;
+    const userId = JSON.parse(storedUser)?._id;
+
+    const handleUpdatePreferences = async () => {
+      setLoading(true);
+      const data = {
+        user_id: userId,
+        group_id: JSON.parse(storedActiveGroup)?._id,
+      };
+
+      try {
+        const response = await dispatch(updateUserPreferences(data));
+        if (response.payload.success) {
+          setActiveGroup(JSON.parse(storedActiveGroup));
+        }
+      } catch (error) {
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    };
 
-    if (storedActiveGroup !== null) {
+    if (
+      storedActiveGroup !== null &&
+      preferences &&
+      preferences[0] &&
+      preferences[0].group_id === ''
+    ) {
+      handleUpdatePreferences();
+    } else {
       setActiveGroup(JSON.parse(storedActiveGroup));
     }
 
@@ -29,9 +72,28 @@ const OrganizationDropdown = () => {
     }
   }, []);
 
-  const handleDropdownSelect = (option) => {
-    setActiveGroup(option);
-    localStorage.setItem('activeGroup', JSON.stringify(option));
+  const handleDropdownSelect = async (option) => {
+    setLoading(true);
+    const storedUser = localStorage.getItem('loggedUser');
+    const userId = JSON.parse(storedUser)?._id;
+    const data = {
+      user_id: userId,
+      group_id: option._id,
+    };
+    setSelectedGroup(option);
+
+    try {
+      const response = await dispatch(updateUserPreferences(data));
+      if (response.payload.success) {
+        setActiveGroup(option);
+        localStorage.setItem('activeGroup', JSON.stringify(option));
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+      setSelectedGroup({});
+    }
   };
 
   return (
@@ -52,14 +114,14 @@ const OrganizationDropdown = () => {
                       : splitNameIntoList(activeGroup?.grp_title)[0][0]}
                   </div>
                 </div>
-                <div className='pt-0.5 justify-start items-center gap-1 flex'>
+                <div className='pt-0.5 justify-start items-start gap-1 flex'>
                   <div
-                    className='text-slate-500 text-sm font-medium uppercase leading-tight'
-                    title={activeGroup?.grp_title}
+                    className='text-slate-500 text-sm font-medium uppercase leading-tight text-left'
+                    title={formatString(activeGroup?.grp_title)}
                   >
-                    {activeGroup && activeGroup?.grp_title && activeGroup?.grp_title.length > 16
-                      ? activeGroup?.grp_title.slice(0, 16) + '...'
-                      : activeGroup?.grp_title}
+                    {activeGroup && activeGroup?.grp_title && activeGroup?.grp_title.length > 14
+                      ? formatString(activeGroup?.grp_title.slice(0, 14)) + '...'
+                      : formatString(activeGroup?.grp_title)}
                   </div>
                 </div>
               </div>
@@ -70,10 +132,10 @@ const OrganizationDropdown = () => {
           </button>
         }
         id='options'
+        dropdownWidth='224px'
         dropStyle={{
           top: '41px',
           zIndex: 999,
-          width: '224px',
           maxHeight: '320px',
           overflowY: 'scroll',
           overflowX: 'hidden',
@@ -82,10 +144,10 @@ const OrganizationDropdown = () => {
       >
         {userGroups.map((format) => (
           <a
-            key={format}
+            key={format._id}
             href='#'
             onClick={() => handleDropdownSelect(format)}
-            className={`w-full h-11 px-3.5 py-2.5 justify-between items-center inline-flex ${
+            className={`w-56 h-11 px-3.5 py-2.5 justify-between items-center inline-flex ${
               activeGroup &&
               activeGroup?.grp_title === format?.grp_title &&
               'bg-secondary-neutral-light-50'
@@ -102,13 +164,23 @@ const OrganizationDropdown = () => {
                     : splitNameIntoList(format?.grp_title)[0][0]}
                 </div>
               </div>
-              <div className='max-w-[120px] w-full text-gray-700 text-sm font-normal leading-tight capitalize'>
-                {format.grp_title}
+              <div
+                className='max-w-[120px] w-full text-gray-700 text-sm font-normal leading-tight uppercase'
+                title={format.grp_title}
+              >
+                {format && format.grp_title && format.grp_title.length > 24
+                  ? formatString(format.grp_title.slice(0, 24)) + '...'
+                  : formatString(format.grp_title)}
               </div>
             </div>
             {activeGroup && activeGroup?.grp_title === format?.grp_title && (
               <CheckIcon fill='#145FFF' />
             )}
+            {loading && selectedGroup._id === format._id && (
+              <span>
+                <Spinner width={20} height={20} />
+              </span>
+            )}
           </a>
         ))}
       </CustomDropdown>
diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
index 66d33d69dc..35f13f8ded 100644
--- a/platform/src/common/components/Layout/index.jsx
+++ b/platform/src/common/components/Layout/index.jsx
@@ -27,6 +27,7 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
   const [collapsed, setCollapsed] = useState(
     () => JSON.parse(localStorage.getItem('collapsed')) || false,
   );
+  const cardCheckList = useSelector((state) => state.cardChecklist.cards);
 
   // Fetching user preferences
   useEffect(() => {
@@ -77,7 +78,7 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
   }, [userInfo, userPreferences, dispatch]);
 
   // Fetching user checklists
-  useEffect(() => {
+  const fetchData = () => {
     if (userInfo?._id && !localStorage.getItem('dataFetched')) {
       dispatch(fetchUserChecklists(userInfo._id)).then((action) => {
         if (fetchUserChecklists.fulfilled.match(action)) {
@@ -85,15 +86,14 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
           if (payload && payload.length > 0) {
             const { items } = payload[0];
             dispatch(updateCards(items));
-            localStorage.setItem('dataFetched', 'true');
-          } else {
-            localStorage.setItem('dataFetched', 'true');
-            return;
           }
+          localStorage.setItem('dataFetched', 'true');
         }
       });
     }
-  }, [dispatch, userInfo]);
+  };
+
+  useEffect(fetchData, [dispatch, userInfo]);
 
   useEffect(() => {
     localStorage.setItem('collapsed', collapsed);
diff --git a/platform/src/common/components/Modal/PrintReportModal.jsx b/platform/src/common/components/Modal/PrintReportModal.jsx
index 11d906db4e..7bf96b9bca 100644
--- a/platform/src/common/components/Modal/PrintReportModal.jsx
+++ b/platform/src/common/components/Modal/PrintReportModal.jsx
@@ -20,7 +20,7 @@ const PrintReportModal = ({
   title,
   format,
   btnText,
-  ModalType = 'share',
+  shareModel,
   shareStatus,
 }) => {
   const [loading, setLoading] = useState(false);
@@ -32,6 +32,46 @@ const PrintReportModal = ({
   const [emails, setEmails] = useState(['']);
   const [emailErrors, setEmailErrors] = useState([]);
   const userInfo = useSelector((state) => state.login.userInfo);
+  // State for selected columns
+  const [selectedColumns, setSelectedColumns] = useState({
+    site_name: true,
+    device_name: true,
+    pm2_5_calibrated_value: true,
+    pm10_calibrated_value: true,
+    device_latitude: true,
+    device_longitude: true,
+    frequency: true,
+    datetime: true,
+  });
+
+  // Function to handle checkbox change
+  const handleCheckboxChange = (column) => {
+    setSelectedColumns((prev) => ({ ...prev, [column]: !prev[column] }));
+  };
+
+  // Array of table columns
+  const tableColumns = [
+    'site_name',
+    'device_name',
+    'pm2_5_calibrated_value',
+    'pm10_calibrated_value',
+    'device_latitude',
+    'device_longitude',
+    'frequency',
+    'datetime',
+  ];
+
+  // Mapping of column names
+  const columnNamesMapping = {
+    site_name: 'Site Name',
+    device_name: 'Device Name',
+    pm2_5_calibrated_value: 'PM2.5 Value',
+    pm10_calibrated_value: 'PM10 Value',
+    device_latitude: 'Latitude',
+    device_longitude: 'Longitude',
+    frequency: 'Frequency',
+    datetime: 'Date & Time',
+  };
 
   const handleEmailChange = (index, value) => {
     const updatedEmails = [...emails];
@@ -71,6 +111,16 @@ const PrintReportModal = ({
     setEmails(['']);
     setEmailErrors([]);
     onClose();
+    setSelectedColumns({
+      site_name: true,
+      device_name: true,
+      pm2_5_calibrated_value: true,
+      pm10_calibrated_value: true,
+      device_latitude: true,
+      device_longitude: true,
+      frequency: true,
+      datetime: true,
+    });
   };
 
   const downloadDataFunc = () => {
@@ -103,23 +153,17 @@ const PrintReportModal = ({
 
   // Function to generate CSV file
   const generateCsv = (data) => {
-    // convert data to array of objects
     const dataArr = data.map((row) => {
-      return {
-        SiteName: row.site_name,
-        PM2_5: row.pm2_5_calibrated_value,
-        PM10: row.pm10_calibrated_value,
-        Latitude: row.device_latitude,
-        Longitude: row.device_longitude,
-        Frequency: row.frequency,
-        Date: row.datetime,
-      };
+      const dataRow = {};
+      Object.keys(selectedColumns).forEach((column) => {
+        if (selectedColumns[column]) {
+          dataRow[columnNamesMapping[column]] = row[column];
+        }
+      });
+      return dataRow;
     });
 
-    // convert data to CSV
     const csv = Papa.unparse(dataArr);
-
-    // save CSV file
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -128,48 +172,40 @@ const PrintReportModal = ({
     a.click();
     window.URL.revokeObjectURL(url);
 
-    // Return the CSV file
     return new Blob([csv], { type: 'text/csv' });
   };
 
   // Function to generate PDF file
   const generatePdf = (data) => {
     const doc = new jsPDF('p', 'pt');
-    const tableColumn = [
-      'SiteName',
-      'PM2.5 Value',
-      'PM10 Value',
-      'Latitude',
-      'Longitude',
-      'Frequency',
-      'Date',
-    ];
     const tableRows = [];
 
-    // Loop through the data and push the rows to the tableRows array
     data.forEach((row) => {
-      const dataRow = [
-        row.site_name,
-        row.pm2_5_calibrated_value,
-        row.pm10_calibrated_value,
-        row.device_latitude,
-        row.device_longitude,
-        row.frequency,
-        row.datetime,
-      ];
+      const dataRow = {};
+      Object.keys(selectedColumns).forEach((column) => {
+        if (selectedColumns[column]) {
+          dataRow[columnNamesMapping[column]] = row[column];
+        }
+      });
       tableRows.push(dataRow);
     });
 
-    // Set the table headers and data
-    doc.autoTable(tableColumn, tableRows, { startY: 60 });
+    autoTable(doc, {
+      columns: Object.keys(selectedColumns)
+        .filter((column) => selectedColumns[column])
+        .map((col) => ({
+          header: columnNamesMapping[col],
+          dataKey: columnNamesMapping[col],
+        })),
+      body: tableRows,
+      startY: 60,
+    });
 
-    // Add title and date
     doc.text('Air quality data', 14, 15);
     doc.text(`From: ${data[0].date} - To: ${data[data.length - 1].date}`, 14, 30);
 
     doc.save('air_quality_data.pdf');
 
-    // Return the PDF file
     return doc.output('blob');
   };
 
@@ -245,13 +281,12 @@ const PrintReportModal = ({
           onClose;
           handleCancel();
         }}
-        downloadDataFunc={ModalType === 'share' ? handleShareReport : handleDataExport}
+        downloadDataFunc={shareModel ? handleShareReport : handleDataExport}
         loading={loading}
         ModalIcon={ShareIcon}
         primaryButtonText={btnText || 'Print'}
-        data={data}
-      >
-        {ModalType === 'share' && (
+        data={data}>
+        {shareModel && (
           <>
             <div className='w-full'>
               <AlertBox
@@ -261,6 +296,29 @@ const PrintReportModal = ({
                 hide={() => setAlert({ ...alert, show: false })}
               />
             </div>
+            <div>
+              <div className='self-stretch pr-2 justify-start items-start inline-flex'>
+                <div className='text-gray-700 text-base font-medium leading-tight'>
+                  Deselect Columns for Report
+                </div>
+              </div>
+              <div className='flex flex-wrap'>
+                {tableColumns.map((column, index) => (
+                  <div key={index} className='w-1/2 flex items-center space-x-2 p-1'>
+                    <input
+                      type='checkbox'
+                      id={column}
+                      checked={selectedColumns[column]}
+                      onChange={() => handleCheckboxChange(column)}
+                      className='form-checkbox h-5 w-5 text-blue-600 rounded'
+                    />
+                    <label htmlFor={column} className='text-gray-700 text-sm font-medium'>
+                      {columnNamesMapping[column]}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
             <div className='self-stretch pr-2 justify-start items-start gap-2.5 inline-flex'>
               <div className='text-gray-700 text-base font-medium leading-tight'>Send to email</div>
             </div>
@@ -271,7 +329,7 @@ const PrintReportModal = ({
                   <input
                     type='text'
                     placeholder='Enter email'
-                    className='input input-bordered w-full pl-9 placeholder-shown:text-secondary-neutral-light-300 text-secondary-neutral-light-800 text-sm leading-[26px] border border-secondary-neutral-light-100  rounded'
+                    className='input input-bordered w-full pl-9 placeholder-shown:text-secondary-neutral-light-300 text-secondary-neutral-light-800 text-sm leading-[26px] border rounded-md'
                     value={email}
                     onChange={(e) => handleEmailChange(index, e.target.value)}
                   />
@@ -281,8 +339,7 @@ const PrintReportModal = ({
                   {index > 0 && (
                     <button
                       className='absolute inset-y-0 right-0 flex justify-center items-center mr-3 pointer-events-auto'
-                      onClick={() => handleRemoveEmail(index)}
-                    >
+                      onClick={() => handleRemoveEmail(index)}>
                       ✕
                     </button>
                   )}
@@ -298,8 +355,7 @@ const PrintReportModal = ({
             <div>
               <Button
                 className='text-sm font-medium text-primary-600 leading-5 gap-2 h-5 mt-3 mb-8 w-auto pl-0'
-                onClick={handleAddEmail}
-              >
+                onClick={handleAddEmail}>
                 <PlusIcon /> <span>Add email</span>
               </Button>
             </div>
diff --git a/platform/src/core/apis/Account.js b/platform/src/core/apis/Account.js
index 0155c833c1..f9540f2f17 100644
--- a/platform/src/core/apis/Account.js
+++ b/platform/src/core/apis/Account.js
@@ -149,7 +149,7 @@ export const updateUserPreferencesApi = async (data) => {
   }
 }
 
-// Get Individual user preferences
+// Get Individual User preferences
 export const getUserPreferencesApi = async (identifier) => {
   try {
     const response = await createAxiosInstance().get(`${USER_PREFERENCES_URL}/${identifier}`);
@@ -160,6 +160,18 @@ export const getUserPreferencesApi = async (identifier) => {
   }
 }
 
+// Patch/Replace User Preferences
+export const patchUserPreferencesApi = async (data) => {
+  try {
+    const response = await createAxiosInstance().patch(`${USER_PREFERENCES_URL}/replace`, data);
+    return response.data;
+  }
+  catch (error) {
+    throw error;
+  }
+}
+
+// User Defaults
 export const getUserDefaults = async () => {
   return await createAxiosInstance()
     .get(USER_DEFAULTS_URL)
@@ -176,6 +188,7 @@ export const updateUserDefaults = async (defaultsId, defaults) => {
     .then((response) => response.data);
 };
 
+// User Checklist
 export const getUserChecklists = async (userID) => {
   return await createAxiosInstance()
     .get(`${USER_CHECKLISTS_URL}/${userID}`)
@@ -188,6 +201,7 @@ export const upsertUserChecklists = async (checklist) => {
     .then((response) => response.data);
 };
 
+// Group Details
 export const getGroupDetailsApi = async (groupID) => {
   return await createAxiosInstance()
     .get(`${GROUPS_URL}/${groupID}`)
diff --git a/platform/src/lib/store/services/account/UserDefaultsSlice.js b/platform/src/lib/store/services/account/UserDefaultsSlice.js
index b9a1fa3a12..25f0ef5949 100644
--- a/platform/src/lib/store/services/account/UserDefaultsSlice.js
+++ b/platform/src/lib/store/services/account/UserDefaultsSlice.js
@@ -1,4 +1,4 @@
-import { getUserPreferencesApi, postUserDefaultsApi, postUserPreferencesApi, updateUserDefaultsApi, updateUserPreferencesApi } from '@/core/apis/Account';
+import { getUserPreferencesApi, patchUserPreferencesApi, postUserDefaultsApi, postUserPreferencesApi, updateUserDefaultsApi, updateUserPreferencesApi } from '@/core/apis/Account';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
@@ -47,6 +47,18 @@ export const getIndividualUserPreferences = createAsyncThunk('/get/individual/pr
     }
 })
 
+export const replaceUserPreferences = createAsyncThunk('/replace/individual/preference', async (data, { rejectWithValue }) => {
+    try {
+        const response = await patchUserPreferencesApi(data);
+        return response
+    } catch (error) {
+        if (!error.response) {
+            throw error
+        }
+        return rejectWithValue(error.response.data);
+    }
+})
+
 export const defaultsSlice = createSlice({
     name: 'defaults',
     initialState,
@@ -90,6 +102,10 @@ export const defaultsSlice = createSlice({
                 state.errors = action.payload;
                 state.success = false;
             })
+            .addCase(replaceUserPreferences.rejected, (state, action) => {
+                state.errors = action.payload;
+                state.success = false;
+            })
     }
 })
 
diff --git a/platform/src/pages/Home/index.jsx b/platform/src/pages/Home/index.jsx
index 9b27959137..385a024076 100644
--- a/platform/src/pages/Home/index.jsx
+++ b/platform/src/pages/Home/index.jsx
@@ -9,7 +9,7 @@ import AnalyticsImage from '@/images/Home/analyticsImage.png';
 import PlayIcon from '@/images/Home/playIcon.svg';
 import AnalyticsVideo from '../../../public/videos/analytics.mp4';
 import { useSelector, useDispatch } from 'react-redux';
-import { startTask, updateTitle } from '@/lib/store/services/checklists/CheckList';
+import { startTask, completeTask, updateTitle } from '@/lib/store/services/checklists/CheckList';
 import HomeSkeleton from '@/components/skeletons/HomeSkeleton';
 import CustomModal from '@/components/Modal/videoModals/CustomModal';
 import StepProgress from '@/components/steppers/CircularStepper';
@@ -48,17 +48,21 @@ const Home = () => {
   };
 
   const handleCardClick = (id) => {
-    const card = cardCheckList.find((card) => card.id === id);
-    if (card) {
-      switch (card.status) {
-        case 'not started':
-          dispatch(startTask(id));
-          break;
-        default:
-          return;
-      }
+    if (id === 4) {
+      dispatch(completeTask(4));
     } else {
-      console.log('Card not found');
+      const card = cardCheckList.find((card) => card.id === id);
+      if (card) {
+        switch (card.status) {
+          case 'not started':
+            dispatch(startTask(id));
+            break;
+          default:
+            return;
+        }
+      } else {
+        console.log('Card not found');
+      }
     }
   };
 
@@ -84,7 +88,7 @@ const Home = () => {
     {
       label: 'Practical ways to reduce air pollution',
       time: '1 min',
-      link: '#',
+      link: 'https://blog.airqo.net/',
       func: () => handleCardClick(4),
     },
   ];
@@ -150,7 +154,10 @@ const Home = () => {
                       ) : (
                         <>
                           <Link href={step.link}>
-                            <a onClick={step.func} className={statusColor}>
+                            <a
+                              onClick={step.func}
+                              className={statusColor}
+                              target={index === 3 ? '_blank' : ''}>
                               {card && card.status === 'inProgress' ? 'Resume' : statusText}
                             </a>
                           </Link>
diff --git a/platform/src/pages/_app.jsx b/platform/src/pages/_app.jsx
index aaf0f4d62f..e1266772d8 100644
--- a/platform/src/pages/_app.jsx
+++ b/platform/src/pages/_app.jsx
@@ -10,7 +10,10 @@ export default function App({ Component, ...rest }) {
   const persistor = persistStore(store);
 
   useEffect(() => {
-    if (process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'staging') {
+    if (
+      process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'staging' ||
+      process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'production'
+    ) {
       return;
     } else {
       // Disable context menu (right click)
diff --git a/platform/src/pages/account/login/index.jsx b/platform/src/pages/account/login/index.jsx
index fbb681c680..9dd40e679b 100644
--- a/platform/src/pages/account/login/index.jsx
+++ b/platform/src/pages/account/login/index.jsx
@@ -21,6 +21,7 @@ const UserLogin = () => {
   const postData = useSelector((state) => state.login);
   const [loading, setLoading] = useState(false);
   const [passwordType, setPasswordType] = useState('password');
+  const preferences = useSelector((state) => state.defaults.individual_preferences);
 
   const handleLogin = async (e) => {
     e.preventDefault();
@@ -45,11 +46,20 @@ const UserLogin = () => {
               setLoading(false);
               return;
             }
-            // find airqo group in the users groups and set it as the active group
-            const airqoGroup = response.users[0].groups.find(
-              (group) => group.grp_title === 'airqo',
-            );
-            localStorage.setItem('activeGroup', JSON.stringify(airqoGroup));
+
+            // check if user has a saved organisation
+            if (preferences && preferences[0] && preferences[0].group_id) {
+              const activeGroup = response.users[0].groups.find(
+                (group) => group._id === preferences[0].group_id,
+              );
+              localStorage.setItem('activeGroup', JSON.stringify(activeGroup));
+            } else {
+              const airqoGroup = response.users[0].groups.find(
+                (group) => group.grp_title === 'airqo',
+              );
+              localStorage.setItem('activeGroup', JSON.stringify(airqoGroup));
+            }
+
             dispatch(setUserInfo(response.users[0]));
             dispatch(setSuccess(true));
             setLoading(false);
@@ -137,7 +147,8 @@ const UserLogin = () => {
             <button
               data-testid='login-btn'
               className='w-full btn bg-blue-900 rounded-none text-white text-sm outline-none border-none hover:bg-blue-950'
-              type='submit'>
+              type='submit'
+            >
               {loading ? <Spinner data-testid='spinner' width={25} height={25} /> : 'Login'}
             </button>
           </div>
diff --git a/platform/src/pages/analytics/index.jsx b/platform/src/pages/analytics/index.jsx
index e741a3857e..b0f6173f57 100644
--- a/platform/src/pages/analytics/index.jsx
+++ b/platform/src/pages/analytics/index.jsx
@@ -151,16 +151,14 @@ const AuthenticatedHomePage = () => {
             <Button
               className='text-sm font-medium capitalize'
               variant='outlined'
-              onClick={openPrintModalFunc}
-            >
+              onClick={openPrintModalFunc}>
               Print
             </Button>
             <Button
               className='text-sm font-medium capitalize'
               variant='filled'
               Icon={DownloadIcon}
-              onClick={exportFile}
-            >
+              onClick={exportFile}>
               Export
             </Button>
           </div>
@@ -210,9 +208,10 @@ const AuthenticatedHomePage = () => {
         <PrintReportModal
           title='Share report'
           open={openPrintModal}
+          handlePrintPDF={printFile}
           onClose={() => setOpenPrintModal(false)}
           data={data}
-          ModalType='share'
+          shareModel={false}
           format={'pdf'}
         />
       )}
diff --git a/platform/yarn.lock b/platform/yarn.lock
index 4800f67696..813cec132c 100644
--- a/platform/yarn.lock
+++ b/platform/yarn.lock
@@ -1073,6 +1073,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.15.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
+  integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.20.13":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
@@ -1815,6 +1822,14 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1868,6 +1883,16 @@
   resolved "https://registry.yarnpkg.com/@types/raf/-/raf-3.4.2.tgz#4e2ea094fcce9ed693cd236e530c0c88f2e09e68"
   integrity sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==
 
+"@types/react-redux@^7.1.20":
+  version "7.1.31"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.31.tgz#ff914f80401488bb31d064b1d84ae525dad41b23"
+  integrity sha512-merF9AH72krBUekQY6uObXnMsEo1xTeZy9NONNRnqSwvwVe3HtLeRvNIPaKmPDIOWPsSFE51rc2WGpPMqmuCWg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react@*":
   version "18.0.27"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
@@ -2857,6 +2882,13 @@ crypto-js@^4.0.0:
   resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
   integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-line-break@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
@@ -4868,6 +4900,11 @@ media-engine@^1.0.3:
   resolved "https://registry.yarnpkg.com/media-engine/-/media-engine-1.0.3.tgz#be3188f6cd243ea2a40804a35de5a5b032f58dad"
   integrity sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5463,7 +5500,7 @@ process-on-spawn@^1.0.0:
   dependencies:
     fromentries "^1.2.0"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5522,6 +5559,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -5536,6 +5578,19 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+react-beautiful-dnd@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
+  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-calendar@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-4.0.0.tgz#99ad73dd0c7c5b25aa535a5fdeee3d71bfe45faa"
@@ -5578,6 +5633,11 @@ react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -5588,6 +5648,18 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-redux@^7.2.0:
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-redux@^8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
@@ -5691,7 +5763,7 @@ redux-thunk@^2.4.2:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
   integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
 
-redux@^4.2.0, redux@^4.2.1:
+redux@^4.0.0, redux@^4.0.4, redux@^4.2.0, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -6336,6 +6408,11 @@ tiny-inflate@^1.0.0, tiny-inflate@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
+tiny-invariant@^1.0.6:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
 tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -6528,6 +6605,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-memo-one@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
 use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
diff --git a/website/frontend/src/components/CleanAir/Hightlights/MainHighlight.js b/website/frontend/src/components/CleanAir/Hightlights/MainHighlight.js
index e35a22b0f0..3498478e90 100644
--- a/website/frontend/src/components/CleanAir/Hightlights/MainHighlight.js
+++ b/website/frontend/src/components/CleanAir/Hightlights/MainHighlight.js
@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getAllEvents } from '../../../../reduxStore/Events/EventSlice';
 import { isEmpty } from 'underscore';
 import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 import { AccessTimeOutlined, CalendarMonth } from '@mui/icons-material';
 import { format } from 'date-fns';
 
@@ -53,7 +52,7 @@ const Highlight = () => {
                       <CalendarMonth />
                       {featuredEvent.end_date !== null ? (
                         <span>
-                          {format(new Date(featuredEvent.start_date), 'do')} -{' '}
+                          {format(new Date(featuredEvent.start_date), 'do MMM')} -{' '}
                           {format(new Date(featuredEvent.end_date), 'do MMMM yyyy')}
                         </span>
                       ) : (
diff --git a/website/frontend/src/components/CleanAir/SecondaryNav/index.js b/website/frontend/src/components/CleanAir/SecondaryNav/index.js
index d3674095f6..fa1f399f38 100644
--- a/website/frontend/src/components/CleanAir/SecondaryNav/index.js
+++ b/website/frontend/src/components/CleanAir/SecondaryNav/index.js
@@ -1,34 +1,37 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setActiveTab } from '../../../../reduxStore/CleanAirNetwork/CleanAir';
 import PropTypes from 'prop-types';
 
 const SecondaryNavComponent = ({ disabledTabs }) => {
+  const tabs = ['About', 'Membership', 'Events', 'Resources'];
   const dispatch = useDispatch();
   const activeTab = useSelector((state) => state.cleanAirData.activeTab);
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
   useEffect(() => {
-    dispatch(setActiveTab(0));
-  }, [dispatch]);
+    setSelectedTab(activeTab)
+  }, [])
 
-  const handleTabClick = (index) => {
-    if (!disabledTabs.includes(index)) {
-      dispatch(setActiveTab(index));
+  const handleTabClick = (tab) => {
+    if (!disabledTabs.includes(tab)) {
+      setSelectedTab(tab);
+      dispatch(setActiveTab(tab));
     }
   };
 
-  const tabs = ['About', 'Membership', 'Events', 'Resources'];
-
   return (
     <div className="header-subnav">
       <ul className="tabs">
         {tabs.map((tab, index) => (
           <li
             key={index}
-            className={`${activeTab === index ? 'active' : ''} ${
-              disabledTabs.includes(index) ? 'disabled' : ''
-            }`}
-            onClick={() => handleTabClick(index)}>
+            className={`${selectedTab === index ? 'active' : ''} ${disabledTabs.includes(index) ? 'disabled' : ''
+              }`}
+            onClick={() => {
+              handleTabClick(index);
+              
+            }}>
             <span>{tab}</span>
           </li>
         ))}
diff --git a/website/frontend/src/components/CleanAir/Sections/SplitSection.js b/website/frontend/src/components/CleanAir/Sections/SplitSection.js
index ddaa98d7ed..5c7e093b08 100644
--- a/website/frontend/src/components/CleanAir/Sections/SplitSection.js
+++ b/website/frontend/src/components/CleanAir/Sections/SplitSection.js
@@ -15,10 +15,10 @@ const SplitSection = ({
   imageStyle,
   showButton,
   children,
-  customBtn, wrapperPadding
+  customBtn, wrapperPadding, titleSection
 }) => {
   return (
-    <div className="splitSection-section" style={{ backgroundColor: bgColor, padding: wrapperPadding }}>
+    <div className={titleSection ? "splitSection-section title-section" : "splitSection-section"} style={{ backgroundColor: bgColor, padding: wrapperPadding }}>
       <div className={` ${reverse ? 'backdrop-rev' : 'backdrop'}`}>
         <div className="splitSection-content">
           {pillTitle && (
diff --git a/website/frontend/src/components/Footer.js b/website/frontend/src/components/Footer.js
index 5401fc66a0..464e283491 100644
--- a/website/frontend/src/components/Footer.js
+++ b/website/frontend/src/components/Footer.js
@@ -262,13 +262,15 @@ const Footer = () => {
             <div className="category-label">{t('footer.modal.country')}</div>
             <div className="countries">
               {/* The country list displayed here */}
-              {countries.map((country) => (
-                <CountryTab
-                  className={`tab tab-margin-sm ${active(country.name)}`}
-                  flag={country.flag}
-                  name={country.name}
-                  onClick={onTabClick(country.name)}
-                />
+              {countries.map((country, key) => (
+                <div key={key}>
+                  <CountryTab
+                    className={`tab tab-margin-sm ${active(country.name)}`}
+                    flag={country.flag}
+                    name={country.name}
+                    onClick={onTabClick(country.name)}
+                  />
+                </div>
               ))}
               <CountryTab className={`tab tab-margin-sm`} />
             </div>
diff --git a/website/frontend/src/pages/CleanAir/CleanAirAbout.js b/website/frontend/src/pages/CleanAir/CleanAirAbout.js
index ac4f4fd3e3..324d229cbb 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirAbout.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirAbout.js
@@ -13,8 +13,8 @@ const CleanAirAbout = () => {
   return (
     <div className="page-wrapper">
       <SEO
-        title="CLEAN-Air Africa Network"
-        siteTitle="AirQo"
+        title="About"
+        siteTitle="CLEAN-Air Network"
         description="An African led, multi-region network bringing together a community of practice for air quality solutions and air quality management across Africa."
       />
       {/* section 1 */}
diff --git a/website/frontend/src/pages/CleanAir/CleanAirEvents.js b/website/frontend/src/pages/CleanAir/CleanAirEvents.js
index d67e41e106..8e7f83622e 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirEvents.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirEvents.js
@@ -11,6 +11,7 @@ import EventCard from '../Events/EventCard';
 import event1 from 'assets/img/cleanAir/event-sec1.png';
 import event2 from 'assets/img/cleanAir/event-sec2.png';
 import useWindowSize from 'utilities/customHooks';
+import Loadspinner from 'src/components/LoadSpinner/SectionLoader';
 
 const ITEMS_PER_PAGE = 9;
 
@@ -78,8 +79,8 @@ const CleanAirEvents = () => {
   return (
     <div className="page-wrapper">
       <SEO
-        title="CLEAN-Air Africa Network | Events"
-        siteTitle="CLEAN-Air Africa Network"
+        title="Events"
+        siteTitle="CLEAN-Air Network"
         description="CLEAN-Air Africa Network is a network of African cities, governments, and partners committed to improving air quality and reducing carbon emissions through sustainable transport and mobility solutions."
       />
 
@@ -99,13 +100,13 @@ const CleanAirEvents = () => {
         </div>
       </div>
 
-      <div className="partners">
+      {/* <div className="partners">
         <div className="partners-wrapper">
           <div className="event-intro-image">
             <img src={event1} alt="CLEAN-Air Africa Network Events" className="events-image" />
           </div>
         </div>
-      </div>
+      </div> */}
 
       <div>
         <hr className="separator-1" />
@@ -138,6 +139,7 @@ const CleanAirEvents = () => {
           bgColor="#FFFFFF"
           wrapperPadding='0'
           reverse
+          titleSection={true}
         />
       </div>
 
@@ -163,16 +165,7 @@ const CleanAirEvents = () => {
             </div>
           </div>
           {loading ? (
-            <div
-              style={{
-                display: 'flex',
-                width: '100%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                marginTop: '50px'
-              }}>
-              loading ...
-            </div>
+            <Loadspinner />
           ) : null}
           {!loading && upcomingEvents.length === 0 && selectedNavTab === 'upcoming events' ? (
             <div className="no-events">There are currently no events</div>
diff --git a/website/frontend/src/pages/CleanAir/CleanAirPartners.js b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
index e89c7583e4..2f37741be5 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirPartners.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
@@ -91,8 +91,8 @@ const CleanAirPartners = () => {
     <div className="page-wrapper">
       {/* SEO */}
       <SEO
-        title="Partners | CLEAN-Air Africa Network"
-        siteTitle="CLEAN-Air Africa Network"
+        title="Partners"
+        siteTitle="CLEAN-Air Network"
         description="Meet the partners of CLEAN-Air Africa Network, a diverse group of organizations and individuals dedicated to improving air quality across Africa. Join us in our mission to foster innovative air quality solutions and effective air quality management strategies."
       />
 
@@ -138,6 +138,7 @@ const CleanAirPartners = () => {
           imgURL={Partner1}
           bgColor="#FFFFFF"
           reverse
+          titleSection={true}
         />
 
         {implementingPartners.length > 0 && (
@@ -146,7 +147,7 @@ const CleanAirPartners = () => {
               <div className="partners-list">
                 {implementingPartners.slice(0, itemsToShow).map((networkPartner) => (
                   <div
-                    style={{ cursor: 'pointer' }}
+                    style={networkPartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
                     className="partner-img"
                     key={networkPartner.id}
                     onClick={onLogoClick(networkPartner)}>
@@ -206,25 +207,22 @@ const CleanAirPartners = () => {
           imgURL={Partner2}
           bgColor="#FFFFFF"
           reverse
+          titleSection={true}
         />
 
         {policyPartners.length > 0 && (
-          <div className="AboutUsPage">
-            <div className="wrapper">
-              <div className="partner-logos" id="logo-table">
-                <table>
-                  <tbody>
-                    {policyPartnerDataGroup.slice(0, itemsToShowPolicy).map((partnerGroup, key) => (
-                      <tr key={key}>
-                        {partnerGroup.map((partner) => (
-                          <td key={partner.id} onClick={() => onLogoClick(partner)}>
-                            <img src={partner.partner_logo} alt={partner.partner_name} />
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+          <div className="partners AboutUsPage">
+            <div className="partners-wrapper wrapper">
+              <div className="partners-list">
+                {policyPartners.slice(0, itemsToShowPolicy).map((policyPartner) => (
+                  <div
+                    style={policyPartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
+                    className="partner-img"
+                    key={policyPartner.id}
+                    onClick={onLogoClick(policyPartner)}>
+                    <img src={policyPartner.partner_logo} alt={policyPartner.partner_name} />
+                  </div>
+                ))}
                 {itemsToShowPolicy < policyPartnerDataGroup.length && (
                   <button
                     className="partners-toggle-button"
@@ -276,27 +274,22 @@ const CleanAirPartners = () => {
           imgURL={Partner4}
           bgColor="#FFFFFF"
           reverse
+          titleSection={true}
         />
 
         {privateSectorPartners.length > 0 && (
-          <div className="AboutUsPage">
-            <div className="wrapper">
-              <div className="partner-logos" id="logo-table">
-                <table>
-                  <tbody>
-                    {privateSectorPartnerDataGroup
-                      .slice(0, itemsToShowPolicy)
-                      .map((partnerGroup, key) => (
-                        <tr key={key}>
-                          {partnerGroup.map((partner) => (
-                            <td key={partner.id} onClick={() => onLogoClick(partner)}>
-                              <img src={partner.partner_logo} alt={partner.partner_name} />
-                            </td>
-                          ))}
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
+          <div className="partners AboutUsPage">
+            <div className="partners-wrapper wrapper">
+              <div className="partners-list">
+                {privateSectorPartners.slice(0, itemsToShowPolicy).map((privatePartner) => (
+                  <div
+                    style={privatePartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
+                    className="partner-img"
+                    key={privatePartner.id}
+                    onClick={onLogoClick(privatePartner)}>
+                    <img src={privatePartner.partner_logo} alt={privatePartner.partner_name} />
+                  </div>
+                ))}
                 {itemsToShowPolicy < policyPartnerDataGroup.length && (
                   <button
                     className="partners-toggle-button"
@@ -351,27 +344,22 @@ const CleanAirPartners = () => {
           imgURL={Partner3}
           bgColor="#FFFFFF"
           reverse
+          titleSection={true}
         />
 
         {supportPartners.length > 0 && (
-          <div className="AboutUsPage">
-            <div className="wrapper">
-              <div className="partner-logos" id="logo-table">
-                <table>
-                  <tbody>
-                    {supportPartnerDataGroup
-                      .slice(0, itemsToShowSupport)
-                      .map((partnerGroup, key) => (
-                        <tr key={key}>
-                          {partnerGroup.map((partner) => (
-                            <td key={partner.id} onClick={() => onLogoClick(partner)}>
-                              <img src={partner.partner_logo} alt={partner.partner_name} />
-                            </td>
-                          ))}
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
+          <div className="partners AboutUsPage">
+            <div className="partners-wrapper wrapper">
+              <div className="partners-list">
+                {supportPartners.slice(0, itemsToShowSupport).map((supportPartner) => (
+                  <div
+                    style={supportPartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
+                    className="partner-img"
+                    key={supportPartner.id}
+                    onClick={onLogoClick(supportPartner)}>
+                    <img src={supportPartner.partner_logo} alt={supportPartner.partner_name} />
+                  </div>
+                ))}
                 {itemsToShowSupport < supportPartnerDataGroup.length && (
                   <button
                     className="partners-toggle-button"
@@ -392,7 +380,7 @@ const CleanAirPartners = () => {
         )}
       </div>
 
-      <div style={{marginTop:'60px'}}>
+      <div style={{ marginTop: '60px' }}>
         <SingleSection
           content="
         Individuals actively involved in air quality work in Africa are welcome to join the CLEAN-Air Africa Network."
diff --git a/website/frontend/src/pages/CleanAir/CleanAirPublications.js b/website/frontend/src/pages/CleanAir/CleanAirPublications.js
index d9661becd6..4acb870edc 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirPublications.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirPublications.js
@@ -4,11 +4,12 @@ import { useInitScrollTop } from 'utilities/customHooks';
 import { isEmpty } from 'underscore';
 import { useDispatch, useSelector } from 'react-redux';
 import { setActiveResource } from 'reduxStore/CleanAirNetwork/CleanAir';
-import { CardComponent, ReportComponent } from 'components/CleanAir';
+import { ReportComponent } from 'components/CleanAir';
 import { getAllCleanAirApi } from 'apis/index.js';
 import ListIcon from '@mui/icons-material/List';
 import CloseIcon from '@mui/icons-material/Close';
 import useWindowSize from 'utilities/customHooks';
+import Loadspinner from 'src/components/LoadSpinner/SectionLoader';
 
 const ResourceMenuItem = ({ activeResource, resource, dispatch, setToggle }) => {
   const { width } = useWindowSize();
@@ -99,16 +100,8 @@ const CleanAirPublications = () => {
 
     if (loading) {
       return (
-        <div
-          style={{
-            display: 'flex',
-            width: '100%',
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginTop: '50px'
-          }}>
-          Loading...
+        <div style={{ marginTop: '100px' }}>
+          <Loadspinner />
         </div>
       );
     }
@@ -125,7 +118,7 @@ const CleanAirPublications = () => {
             alignItems: 'center',
             marginTop: '50px'
           }}>
-          <h1>No Data</h1>
+          <h1>No Resources available</h1>
         </div>
       );
     }
@@ -224,14 +217,14 @@ const CleanAirPublications = () => {
   return (
     <div className="page-wrapper">
       <SEO
-        title="CLEAN-Air Africa Network | Partners"
-        siteTitle="CLEAN-Air Africa Network"
+        title="Partners"
+        siteTitle="CLEAN-Air Network"
         description="CLEAN-Air Africa Network is a network of African cities and partners committed to improving air quality and reducing carbon emissions through knowledge sharing and capacity building."
       />
 
       <div>
         <div className="partners">
-          <div className="partners-wrapper" style={{ marginTop: '50px' }}>
+          <div className="partners-wrapper" style={{ marginTop: '20px' }}>
             <div className="resources-container">
               <div className="resource-menu" id="top-menu-sec">
                 <div className="title-wrapper">
diff --git a/website/frontend/src/pages/CleanAir/EventDetails.js b/website/frontend/src/pages/CleanAir/EventDetails.js
index 280e4b16ed..996d6b0c64 100644
--- a/website/frontend/src/pages/CleanAir/EventDetails.js
+++ b/website/frontend/src/pages/CleanAir/EventDetails.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { AccessTimeOutlined, CalendarMonth, PlaceOutlined } from '@mui/icons-material';
 import { useInitScrollTop } from 'utilities/customHooks';
 import { useParams } from 'react-router-dom';
@@ -8,7 +8,6 @@ import { getAllEvents } from '../../../reduxStore/Events/EventSlice';
 import { format } from 'date-fns';
 import Loadspinner from '../../components/LoadSpinner';
 import PageMini from '../PageMini';
-import { setActiveTab } from '../../../reduxStore/CleanAirNetwork/CleanAir';
 
 const EventDetails = () => {
   useInitScrollTop();
@@ -67,7 +66,7 @@ const EventDetails = () => {
                         <span>
                           {event.end_date !== null ? (
                             <span>
-                              {format(new Date(event.start_date), 'do')} -{' '}
+                              {format(new Date(event.start_date), 'do MMM')} -{' '}
                               {format(new Date(event.end_date), 'do MMMM yyyy')}
                             </span>
                           ) : (
@@ -91,11 +90,9 @@ const EventDetails = () => {
                       {event.location_name ? (
                         <div className="item">
                           <PlaceOutlined />
-                          <span>
-                            <a href={event.location_link !== null ? event.location_link : null}>
-                              <span>{event.location_name}</span>
-                            </a>
-                          </span>
+                          {
+                            event.location_link !== null ? <a href={event.location_link} target='_blank'><span>{event.location_name}</span></a> : <span>{event.location_name}</span>
+                          }
                         </div>
                       ) : (
                         <span />
diff --git a/website/frontend/styles/CleanAirPage.scss b/website/frontend/styles/CleanAirPage.scss
index 4df0473083..43ea42804f 100644
--- a/website/frontend/styles/CleanAirPage.scss
+++ b/website/frontend/styles/CleanAirPage.scss
@@ -169,6 +169,10 @@
       text-align: center;
     }
 
+    .splitSection-section.title-section{
+      padding: 20px 0 10px 0;
+    }
+
     .splitSection-section {
       display: grid;
       grid-template-columns: $gridColumn;
@@ -909,13 +913,17 @@
           .partner-img {
             width: 200px;
             height: auto;
-            padding: 50px;
+            padding: 20px 0;
             box-sizing: border-box;
+            max-width: 264px;
+            margin: 0 10px;
 
             img {
               width: 100%;
-              height: auto;
+              height: 100%;
               object-fit: contain;
+              max-width: 192px;
+              max-height: 110px;
             }
           }
         }
@@ -1258,6 +1266,13 @@
         display: none;
       }
 
+    .splitSection-section.title-section{
+      margin-top: 0;
+      .backdrop-rev{
+        grid-gap: 0;
+      }
+    }
+
       .splitSection-section {
         width: 100%;
         padding: 40px 0;