diff --git a/deployment/frontend/src/components/_shared/CarouselNavButton.tsx b/deployment/frontend/src/components/_shared/CarouselNavButton.tsx
index 525ed0e13..ec1d385f4 100644
--- a/deployment/frontend/src/components/_shared/CarouselNavButton.tsx
+++ b/deployment/frontend/src/components/_shared/CarouselNavButton.tsx
@@ -1,5 +1,5 @@
 
-import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/20/solid";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 
 const sizes = {
   small: 'w-[30px] h-[30px]',
@@ -15,8 +15,8 @@ const CarouselNavButton: React.FC<{
       <button
         className={`bg-white shadow ${sizes[size ?? 'medium']} rounded-full flex justify-center items-center`}
       >
-        <ArrowRightIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "right" ? "block" : "hidden"}`} />
-        <ArrowLeftIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "left" ? "block" : "hidden"}`} />
+        <ChevronRightIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "right" ? "block" : "hidden"}`} />
+        <ChevronLeftIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "left" ? "block" : "hidden"}`} />
       </button>
     </>
   );
@@ -24,4 +24,4 @@ const CarouselNavButton: React.FC<{
 
 CarouselNavButton.defaultProps = { orientation: 'left', size: 'medium' };
 
-export default CarouselNavButton;
\ No newline at end of file
+export default CarouselNavButton;
diff --git a/deployment/frontend/src/components/_shared/Footer.tsx b/deployment/frontend/src/components/_shared/Footer.tsx
index 8b5323d3c..ab0122708 100644
--- a/deployment/frontend/src/components/_shared/Footer.tsx
+++ b/deployment/frontend/src/components/_shared/Footer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
+import { Button } from "./Button";
 
 export default function Footer({
   links = {
@@ -37,73 +38,68 @@ export default function Footer({
           </div>
         </div>
       </div>
-
-      <div className="flex flex-col w-full px-8 xxl:px-0  max-w-8xl mx-auto">
-        <div className=" pt-16 lg:pl-10 flex flex-col items-center sm:items-start sm:flex-row gap-y-4 sm:gap-x-4 font-bold text-wri-black">
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start gap-y-4 mb-6 sm:mb-0">
+<div className="default-home-container mx-auto flex w-full flex-col pb-16">
+        <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 items-center gap-y-8 pt-16 font-bold text-wri-black sm:flex-row sm:items-start">
+          <div className="mb-6 flex w-full flex-col items-center gap-y-4 sm:mb-0 sm:items-start">
             <p className="text-base font-bold">ABOUT WRI</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start  gap-y-4 mb-6 sm:mb-0">
+          <div className="mb-6 flex w-full flex-col items-center gap-y-4  sm:mb-0 sm:items-start">
             <p className="text-base font-bold">USEFUL LINKS</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start gap-y-4">
+          <div className="flex w-full flex-col items-center gap-y-4 sm:items-start">
             <p className="text-base font-bold">GET STARTED</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/2 flex flex-col items-center sm:items-start gap-y-4 shrink xl:ml-20 mt-10 sm:mt-0">
-            <p className="font-bold text-base sm:text-[1.375rem]">
+          <div className="ml-auto mt-10 lg:col-span-2 lg:w-[90%] flex w-full shrink flex-col items-center gap-y-4 sm:mt-0 sm:items-start xl:min-w-[420px]">
+            <div className="font-acumin text-[22px] font-bold text-gray-800">
               STAY UP TO DATE WITH THE NEWS{" "}
-            </p>
-            <div className="flex flex-col lg:flex-row gap-y-4 gap-x-2 w-full ">
-              <div className="outline outline-1 rounded-sm pl-1 py-2 gap-x-2 flex flex-row items-center min-w-fit  w-full lg:w-[337px]">
-                <div className=" my-auto">
-                  <EnvelopeIcon className="w-5 h-5 text-wri-gray" />
-                </div>
-                <div className="grow shrink basis-auto">
-                  <input
-                    type="text"
-                    placeholder="Enter your email address"
-                    className=" focus:outline-none placeholder:text-xs text-xs font-normal w-full"
-                  />
+            </div>
+            <div className="flex w-full flex-col gap-x-2 gap-y-4 lg:flex-row justify-between">
+              <div className="relative grow">
+                <input
+                  type="text"
+                  className="h-11 w-full peer grow rounded border-0 shadow outline-0 ring-0 ring-offset-0"
+                />
+                <div className="absolute pointer-events-none peer-focus:hidden inset-y-0 left-0 flex gap-x-2 items-center pl-3">
+                  <EnvelopeIcon className="h-6 w-5 text-gray-400" />
+                  <span className="text-xs text-gray-400">Enter your email</span>
                 </div>
               </div>
-              <div className="px-4 py-2 sm:px-6 2xl:px-10 bg-wri-gold text-wri-black font-bold  text-[0.875rem] xxl:w-[139px] rounded-sm text-center">
-                SUBSCRIBE
-              </div>
+              <Button>SUBSCRIBE</Button>
             </div>
             <div className="flex flex-row gap-5">
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/fb.svg" alt="" fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/x.svg" alt={""} fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/linkedin.svg" alt={""} fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/mail.svg" alt={""} fill />
               </div>
             </div>
           </div>
         </div>
-        <div className=" w-full mx-auto pt-16 lg:pl-10  flex flex-col sm:flex-row  gap-y-8 sm:gap-y-4 items sm:items-start">
-          <div className=" w-52 h-16 sm:w-56 sm:h-20 relative mx-auto sm:ml-0">
+        <div className="items mx-auto flex w-full flex-col gap-y-8 pt-16 sm:flex-row sm:gap-y-4">
+          <div className=" relative mx-auto h-16 w-52 sm:ml-0 sm:h-20 sm:w-56">
             <Image
               src="/images/WRI_logo_4c.png"
               alt="Picture of the author"
               fill
             />
           </div>
-          <div className="mx-auto sm:ml-auto sm:mr-0 xxl:mr-14  w-fit flex  items-end gap-x-1 font-normal text-base mt-auto">
+          <div className="mt-auto flex items-end gap-x-1  text-base font-normal sm:ml-auto">
             <span>
               Powered by{" "}
               <a href="#" className=" text-wri-green">
@@ -111,12 +107,13 @@ export default function Footer({
               </a>{" "}
               from
             </span>
-            <div className=" w-24 h-6 relative">
+            <div className=" relative h-6 w-24">
               <Image src="/images/datopian.png" alt="" fill></Image>
             </div>
           </div>
         </div>
       </div>
+
     </section>
   );
 }
diff --git a/deployment/frontend/src/components/_shared/Login.tsx b/deployment/frontend/src/components/_shared/Login.tsx
index 091603161..51e505d36 100644
--- a/deployment/frontend/src/components/_shared/Login.tsx
+++ b/deployment/frontend/src/components/_shared/Login.tsx
@@ -1,48 +1,71 @@
-import React from 'react'
-import { ExclamationCircleIcon, EnvelopeIcon, LockClosedIcon } from '@heroicons/react/24/outline'
-import Image from 'next/image'
+import React from "react";
+import {
+  ExclamationCircleIcon,
+  EnvelopeIcon,
+  LockClosedIcon,
+} from "@heroicons/react/24/outline";
+import Image from "next/image";
 
 export default function Login() {
   return (
-    <section id="login-modal" className=' font-acumin mb-4'>
+    <section id="login-modal" className=" mb-4 font-acumin max-w-[24rem] mx-auto">
       <div className="mt-2 flex flex-col">
-        <div className=' text-center'>
-          <ExclamationCircleIcon className='w-5 h-5 mx-auto mb-2' />
-          <p className=' font-light font-wri-black text-[0.813rem]'>Registration Not Available Yet! <b>Login for WRI Members Only.</b> You Can Still Use All Portal Features.</p>
-          <h3 className='mt-8 font-semibold text-[1.75rem]'>Log In</h3>
+        <div className=" text-center">
+          <ExclamationCircleIcon className="mx-auto mb-2 h-5 w-5" />
+          <p className=" font-wri-black text-[0.813rem] font-light">
+            Registration Not Available Yet! <b>Login for WRI Members Only.</b>{" "}
+            You Can Still Use All Portal Features.
+          </p>
+          <h3 className="mt-8 text-[1.75rem] font-semibold">Log In</h3>
         </div>
-        <div className='mt-4'>
-          <form action="" className='flex flex-col gap-y-4'>
-
-            <div className=' rounded-md px-4 group hover:bg-[#F0FDF4] hover:border-0 hover:border-b-2 hover:border-b-[#3654A5] py-3 gap-x-2 flex pr-8 flex-row items-center min-w-fit  w-full bg-white border-[1px] border-wri-gray-200'>
-              <div className='grow shrink basis-auto'><input type="text" placeholder='Email' className=' focus:outline-none group-hover:bg-[#F0FDF4]  placeholder:text-xs placeholder:font-light placeholder:text-[#353535] text-xs font-light w-full' /></div>
-              <div className=' my-auto'><EnvelopeIcon className='w-4 h-4 text-[#3654A5]' /></div>
+        <div className="mt-4">
+          <form action="" className="flex flex-col gap-y-4">
+            <div className="relative mx-auto w-full rounded-md">
+              <input
+                type="text"
+                placeholder="Email Address"
+                className="shadow-wri-small peer block w-full rounded-md border-0 px-5 py-3 text-neutral-700 ring-1 ring-inset ring-gray-300 placeholder:text-neutral-700 focus:border-b-2 focus:border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+              ></input>
+              <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center pr-3 text-neutral-700 peer-focus:text-[#3654A5]">
+                <EnvelopeIcon className="h-5 w-5 " />
+              </div>
             </div>
-
-            <div className=' rounded-md px-4 group hover:bg-[#F0FDF4] hover:border-0 hover:border-b-2 hover:border-b-[#3654A5] py-3 gap-x-2 flex pr-8 flex-row items-center min-w-fit  w-full bg-white border-[1px] border-wri-gray-200'>
-              <div className='grow shrink basis-auto'><input type="text" placeholder='Password' className=' focus:outline-none placeholder:text-xs placeholder:font-light placeholder:text-[#353535] text-xs font-light w-full group-hover:bg-[#F0FDF4]' /></div>
-              <div className=' my-auto'><LockClosedIcon className='w-4 h-4 text-[#3654A5]' /></div>
+            <div className="relative mx-auto w-full max-w-[24rem] rounded-md">
+              <input
+                type="text"
+                placeholder="Password"
+                className="shadow-wri-small peer block w-full rounded-md border-0 px-5 py-3 text-neutral-700 ring-1 ring-inset ring-gray-300 placeholder:text-neutral-700 focus:border-b-2 focus:border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+              ></input>
+              <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center pr-3 text-neutral-700 peer-focus:text-[#3654A5]">
+                <LockClosedIcon className="h-5 w-5 " />
+              </div>
             </div>
-            <div className='font-light text-[0.875rem] text-wri-black text-right -mt-2'>
+
+            <div className="-mt-2 text-right text-[0.875rem] font-light text-wri-black">
               Forgot password?
             </div>
-            <button type='submit' className='bg-wri-gold text-wri-black font-semibold text-[1.125rem] rounded-sm px-4 py-4'>Log In</button>
+            <button
+              type="submit"
+              className="rounded-sm bg-wri-gold px-4 py-4 text-[1.125rem] font-semibold text-wri-black"
+            >
+              Log In
+            </button>
           </form>
         </div>
-        <div className='mt-8 text-center flex justify-center items-center gap-x-2'>
-          <div className='font-light text-[0.875rem] border border-1 border-wri-gray w-20 h-0' />
-          <div className='text-wri-black '>or</div>
-          <div className='font-light text-[0.875rem] border border-1 border-wri-gray w-20 h-0' />
+        <div className="mt-8 flex items-center justify-center gap-x-2 text-center">
+          <div className="border-1 h-0 w-20 border border-wri-gray text-[0.875rem] font-light" />
+          <div className="text-wri-black ">or</div>
+          <div className="border-1 h-0 w-20 border border-wri-gray text-[0.875rem] font-light" />
         </div>
-        <div className='flex  mt-8 outline outline-1 outline-wri-gold rounded-sm justify-center py-4 '>
-          <div className='w-4 h-4 relative my-auto'>
-            <Image src='/images/wri_logo.png' alt="comment" fill />
+        <div className="mt-8  flex justify-center rounded-sm py-4 outline outline-1 outline-wri-gold ">
+          <div className="relative my-auto h-4 w-4">
+            <Image src="/images/wri_logo.png" alt="comment" fill />
           </div>
-          <div className='ml-2 w-fit font-semibold text-base text-wri-black '>
+          <div className="ml-2 w-fit text-base font-semibold text-wri-black ">
             Sign In with your WRI Credentials
           </div>
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/deployment/frontend/src/components/_shared/Modal.tsx b/deployment/frontend/src/components/_shared/Modal.tsx
index 36948a786..c8aa97f3e 100644
--- a/deployment/frontend/src/components/_shared/Modal.tsx
+++ b/deployment/frontend/src/components/_shared/Modal.tsx
@@ -34,7 +34,7 @@ export default function Modal({ open, setOpen, children, className = "" }: { ope
                 <div className="absolute right-0 top-0  pr-4 pt-4 block z-50">
                   <button
                     type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                     onClick={() => setOpen(false)}
                   >
                     <span className="sr-only">Close</span>
diff --git a/deployment/frontend/src/components/dashboard/ActivityStreams.tsx b/deployment/frontend/src/components/dashboard/ActivityStreams.tsx
index 66f428500..24bf2d1ef 100644
--- a/deployment/frontend/src/components/dashboard/ActivityStreams.tsx
+++ b/deployment/frontend/src/components/dashboard/ActivityStreams.tsx
@@ -25,7 +25,7 @@ export default function UserActivityStreams({ drag }: { drag: boolean }) {
       }
       <div className='flex px-2 mb-4 border-b-[0.3px] border-b-gray-100'>
         <p className='font-normal text-[20px]'>Activity Stream</p>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         activitydata.slice(0, 6).map((items, index) => {
@@ -37,4 +37,4 @@ export default function UserActivityStreams({ drag }: { drag: boolean }) {
     </section>
 
   )
-}
\ No newline at end of file
+}
diff --git a/deployment/frontend/src/components/dashboard/Favourites.tsx b/deployment/frontend/src/components/dashboard/Favourites.tsx
index d5b2d6ab4..8791191f7 100644
--- a/deployment/frontend/src/components/dashboard/Favourites.tsx
+++ b/deployment/frontend/src/components/dashboard/Favourites.tsx
@@ -27,7 +27,7 @@ export default function Favourites({ drag }: { drag: boolean }) {
       }
       <div className='flex px-2 mb-4 border-b-[0.3px] border-b-gray-100'>
         <p className='font-normal text-[20px]'>My Favourites</p>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         [1, 2, 3, 4, 5, 6].map((items) => {
diff --git a/deployment/frontend/src/components/dashboard/Notifications.tsx b/deployment/frontend/src/components/dashboard/Notifications.tsx
index 9988e4a82..d9b23796b 100644
--- a/deployment/frontend/src/components/dashboard/Notifications.tsx
+++ b/deployment/frontend/src/components/dashboard/Notifications.tsx
@@ -34,7 +34,7 @@ export default function Notifications({ drag }: { drag: boolean }) {
           <p className='font-normal text-[20px]'>Notifications </p>
           <div className='rounded-full my-auto w-4 h-4 bg-wri-gold font-bold text-[11px] flex justify-center items-center'>3</div>
         </div>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         [1, 2, 3, 4, 5, 6].map((items) => {
diff --git a/deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx b/deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx
index 99fbfdc4c..552f2a1d7 100644
--- a/deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx
+++ b/deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx
@@ -5,7 +5,7 @@ import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 function LeftNode({ placeholder }: { placeholder?: string }) {
   return (
     <div className=' px-2 py-4 gap-x-2 flex flex-row items-center min-w-fit  w-full bg-white'>
-      <div className='grow shrink basis-auto'><input type="text" placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none placeholder:text-[14px] text-[14px] font-light w-full' /></div>
+      <div className='grow shrink basis-auto'><input type="text" placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none focus:ring-0 focus:ring-offset-0 placeholder:text-[14px] text-[14px] font-light w-full' /></div>
       <div className=' my-auto'><MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /></div>
     </div>
   )
diff --git a/deployment/frontend/src/components/dashboard/datasets/DatasetTabs.tsx b/deployment/frontend/src/components/dashboard/datasets/DatasetTabs.tsx
index 68dee0bbc..a872b538e 100644
--- a/deployment/frontend/src/components/dashboard/datasets/DatasetTabs.tsx
+++ b/deployment/frontend/src/components/dashboard/datasets/DatasetTabs.tsx
@@ -10,7 +10,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
-import { PlusSmallIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
+import { PlusSmallIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 
 type TabProps = {
   name: string;
@@ -25,7 +25,7 @@ export default function DatasetTabs({ tabs }: { tabs: TabProps[] }) {
   return (
     <>
       <Swiper
-        className="flex dataset-tabs w-full"
+        className="dataset-tabs flex w-full"
         modules={[Navigation]}
         spaceBetween={0}
         slidesPerView="auto"
@@ -36,22 +36,28 @@ export default function DatasetTabs({ tabs }: { tabs: TabProps[] }) {
       >
         {tabs.map((tab) => (
           <SwiperSlide key={tab.name} className=" max-w-8xl">
-            <Tab key={tab.title} className="  text-black font-normal text-base   accent-white ">
+            <Tab
+              key={tab.title}
+              className="text-base font-normal text-black accent-white"
+            >
               {({ selected }) => (
                 <div
-                  className={`font-normal  px-6 py-4 focus:outline-0  border-b-2  w-full lg:px-12 2xl:px-14 ${selected ? " border-b-wri-dark-green border-b-2 text-wri-green" : ""
-                    } `}
+                  className={`w-full border-b-2 py-4 font-normal focus:outline-0 ${
+                    selected
+                      ? " border-b-2 border-b-wri-dark-green text-wri-green"
+                      : ""
+                  } `}
                 >
-                  {tab.title === 'Add dataset' ? (
-                    <div className='flex'>
-                      <div className='flex  items-center justify-center w-4 h-4 rounded-full  bg-wri-gold mr-2 mt-[0.2rem]'>
-                        <PlusSmallIcon className='w-3 h-3 text-white' />
+                  {tab.title === "Add dataset" ? (
+                    <div className="flex lg:px-12 2xl:px-14 px-6 sm:px-8 ">
+                      <div className="mr-2  mt-[0.2rem] flex h-4 w-4 items-center  justify-center rounded-full bg-wri-gold">
+                        <PlusSmallIcon className="h-3 w-3 text-white" />
                       </div>
                       <span>{tab.title}</span>
                     </div>
-                  ) : (<span>{tab.title}</span>)
-                  }
-
+                  ) : (
+                    <span className="text-center px-6 sm:px-8 lg:px-12 2xl:px-14 ">{tab.title}</span>
+                  )}
                 </div>
               )}
             </Tab>
@@ -59,14 +65,10 @@ export default function DatasetTabs({ tabs }: { tabs: TabProps[] }) {
         ))}
       </Swiper>
       <button className="nav-prev-button--tabs">
-        <ChevronDoubleLeftIcon
-          className="h-6 w-6 text-black"
-        />
+        <ChevronDoubleLeftIcon className="h-6 w-6 text-black" />
       </button>
       <button className="nav-next-button--tabs">
-        <ChevronDoubleRightIcon
-          className="h-6 w-6 text-black"
-        />
+        <ChevronDoubleRightIcon className="h-6 w-6 text-black" />
       </button>
     </>
   );
diff --git a/deployment/frontend/src/components/datasets/DatasetHeader.tsx b/deployment/frontend/src/components/datasets/DatasetHeader.tsx
index 2b437a3b5..cb8403876 100644
--- a/deployment/frontend/src/components/datasets/DatasetHeader.tsx
+++ b/deployment/frontend/src/components/datasets/DatasetHeader.tsx
@@ -18,12 +18,14 @@ import Link from "next/link";
 
 export function DatasetHeader() {
   return (
-    <div className="flex w-full flex-col font-acumin pb-10 pr-4 @sm:pr-8">
+    <div className="flex w-full flex-col pb-10 font-acumin">
       <div className="my-4 flex items-center gap-x-3">
-        <Button variant="outline">
-          <ChevronLeftIcon className="mb-1 h-5 w-5" />
-          Go back
-        </Button>
+        <Link href="/search">
+          <Button variant="outline">
+            <ChevronLeftIcon className="mb-1 h-5 w-5" />
+            Go back
+          </Button>
+        </Link>
         <Button>
           Open in GFW
           <ArrowUpRightIcon className="mb-1 h-6 w-6" />
@@ -52,12 +54,12 @@ export function DatasetHeader() {
         <h1 className="text-3xl font-bold text-black">
           Title of the dataset goes here lorem ipsum
         </h1>
-        <p className=" text-base font-light leading-snug text-stone-900 text-justify">
+        <p className=" text-justify text-base font-light leading-snug text-stone-900">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta
           sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed
           consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.
         </p>
-        <div className="flex gap-4 py-4 flex-wrap">
+        <div className="flex flex-wrap gap-4 py-4">
           <div className="flex gap-x-1">
             <FingerPrintIcon className="h-5 w-5 text-blue-800" />
             <div>
@@ -106,8 +108,8 @@ export function DatasetHeader() {
           </div>
         </div>
       </div>
-      <div className="flex lg:flex-row flex-col items-center gap-x-3 rounded-sm bg-cyan-700 bg-opacity-10 p-3">
-        <ExclamationTriangleIcon className="h-8 w-8 sm:h-12 sm:w-12 text-yellow-600" />
+      <div className="flex flex-col items-center gap-x-3 rounded-sm bg-cyan-700 bg-opacity-10 p-3 lg:flex-row">
+        <ExclamationTriangleIcon className="h-8 w-8 text-yellow-600 sm:h-12 sm:w-12" />
         <p>
           <span className="font-acumin text-sm font-semibold leading-none text-black">
             Caution:{" "}
@@ -145,7 +147,9 @@ export function DatasetHeader() {
       </div>
       <div className="flex items-center gap-x-1 pt-4">
         <LinkIcon className="h-4 w-4 text-wri-green" />
-        <div className="text-green-700 text-sm font-semibold font-['Acumin Pro SemiCondensed']">Technical Notes</div>
+        <div className="font-['Acumin Pro SemiCondensed'] text-sm font-semibold text-green-700">
+          Technical Notes
+        </div>
       </div>
     </div>
   );
diff --git a/deployment/frontend/src/components/datasets/DatasetPageLayout.tsx b/deployment/frontend/src/components/datasets/DatasetPageLayout.tsx
index eba3456c3..17cd733f0 100644
--- a/deployment/frontend/src/components/datasets/DatasetPageLayout.tsx
+++ b/deployment/frontend/src/components/datasets/DatasetPageLayout.tsx
@@ -53,7 +53,7 @@ export default function DatasetPageLayout({
                         </Disclosure.Button>
                         <Disclosure.Panel
                             as="div"
-                            className="lg:max-h-[90vh] overflow-y-scroll overflow-x-hidden min-w-[100%] lg:min-w-[50%] h-full w-full lg:z-10 lg:flex lg:flex-col pl-4 sm:pl-6 py-4 border-r border-gray-200 @container"
+                            className="lg:max-h-[90vh] overflow-y-scroll overflow-x-hidden min-w-[100%] lg:min-w-[50%] h-full w-full lg:z-10 lg:flex lg:flex-col px-4 sm:px-6 py-4 border-r border-gray-200 @container"
                         >
                             {lhs}
                         </Disclosure.Panel>
diff --git a/deployment/frontend/src/components/datasets/sections/DataFiles.tsx b/deployment/frontend/src/components/datasets/sections/DataFiles.tsx
index c2c40b046..89903d6a8 100644
--- a/deployment/frontend/src/components/datasets/sections/DataFiles.tsx
+++ b/deployment/frontend/src/components/datasets/sections/DataFiles.tsx
@@ -125,7 +125,7 @@ function DatafileCard({ datafile }: { datafile: Datafile }) {
                                         open
                                             ? 'rotate-180 transform  transition'
                                             : ''
-                                    } h-5 w-5 text-purple-500`}
+                                    } h-5 w-5 text-stone-900`}
                                 />
                             </Disclosure.Button>
                         </div>
diff --git a/deployment/frontend/src/components/datasets/sections/Members.tsx b/deployment/frontend/src/components/datasets/sections/Members.tsx
index adc39162e..afe22f9f9 100644
--- a/deployment/frontend/src/components/datasets/sections/Members.tsx
+++ b/deployment/frontend/src/components/datasets/sections/Members.tsx
@@ -7,6 +7,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/_shared/Table";
+import { PlusCircleIcon } from "@heroicons/react/20/solid";
 import { PencilIcon } from "@heroicons/react/24/outline";
 
 const users = [
@@ -29,30 +30,47 @@ const users = [
 
 export function Members() {
   return (
-    <Table>
-      <TableHeader>
-        <TableRow className="bg-neutral-100">
-          <TableHead className="text-black text-xs font-semibold font-acumin">User</TableHead>
-          <TableHead className="text-black text-xs font-semibold font-acumin">Email</TableHead>
-          <TableHead className="text-black text-xs font-semibold font-acumin">Role</TableHead>
-          <TableHead></TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {users.map((user, index) => (
-          <TableRow key={user.user} className={index === 1 ? 'bg-neutral-100' : ''}>
-            <TableCell className="font-medium flex flex-col sm:flex-row items-center gap-x-2">
-              <div className="h-6 w-6 rounded-full bg-zinc-300" />
-              {user.user}
-            </TableCell>
-            <TableCell>{user.email}</TableCell>
-            <TableCell>{user.role}</TableCell>
-            <TableCell className="flex justify-end">
-              <PencilIcon className="mr-4 h-5 w-5 text-black" />
-            </TableCell>
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-neutral-100">
+            <TableHead className="font-acumin text-xs font-semibold text-black">
+              User
+            </TableHead>
+            <TableHead className="font-acumin text-xs font-semibold text-black">
+              Email
+            </TableHead>
+            <TableHead className="font-acumin text-xs font-semibold text-black">
+              Role
+            </TableHead>
+            <TableHead></TableHead>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {users.map((user, index) => (
+            <TableRow
+              key={user.user}
+              className={index === 1 ? "bg-neutral-100" : ""}
+            >
+              <TableCell className="flex flex-col items-center gap-x-2 font-medium sm:flex-row">
+                <div className="h-6 w-6 rounded-full bg-zinc-300" />
+                {user.user}
+              </TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.role}</TableCell>
+              <TableCell className="flex justify-end">
+                <PencilIcon className="mr-4 h-5 w-5 text-black" />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>{" "}
+      <button className="ml-auto mt-4 flex items-center justify-end gap-x-1">
+        <PlusCircleIcon className="h-5 w-5 text-amber-400" />
+        <span className="font-['Acumin Pro SemiCondensed'] text-lg font-normal leading-tight text-black">
+          Add another collaborator
+        </span>
+      </button>
+    </>
   );
 }
diff --git a/deployment/frontend/src/components/home/Hero.tsx b/deployment/frontend/src/components/home/Hero.tsx
index 3fa5afbdc..5d5d94079 100644
--- a/deployment/frontend/src/components/home/Hero.tsx
+++ b/deployment/frontend/src/components/home/Hero.tsx
@@ -170,7 +170,7 @@ export function Hero() {
               eiusmod tempor incididunt ut labore et dolore.
             </p>
             <div className="mt-10 flex relative items-start justify-start gap-x-6 w-full max-w-[932px]">
-              <input name="search" placeholder="Search data" className="placeholder:text-white text-white text-xl font-normal font-acumin w-full px-6 h-[66px] bg-white bg-opacity-25 rounded-[3px] border-b-2 border-amber-400" />
+              <input name="search" placeholder="Search data" className="placeholder:text-white text-white text-xl font-normal font-acumin w-full px-6 h-[66px] bg-white bg-opacity-25 rounded-[3px] outline-none ring-0 border-0 focus:ring-0 focus:ring-offset-0 focus:border-amber-400 ring-offset-0 border-b-2 border-amber-400" />
               <MagnifyingGlassIcon className="w-7 h-7 text-white absolute top-[18px] right-4" />
             </div>
           </div>
diff --git a/deployment/frontend/src/components/home/HomeFooter.tsx b/deployment/frontend/src/components/home/HomeFooter.tsx
index 7d1571766..89fce5087 100644
--- a/deployment/frontend/src/components/home/HomeFooter.tsx
+++ b/deployment/frontend/src/components/home/HomeFooter.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { Button } from "../_shared/Button";
-import { EnvelopeIcon } from "@heroicons/react/24/outline";
+import { EnvelopeIcon } from "@heroicons/react/20/solid";
 
 export function HomeFooter() {
   return (
@@ -18,8 +18,8 @@ export function HomeFooter() {
           <Button>Read More</Button>
         </div>
       </section>
-      <div className="mx-auto flex w-full default-home-container flex-col pb-16">
-        <div className="flex flex-col items-center gap-y-4 pt-16 font-bold text-wri-black sm:flex-row sm:items-start">
+      <div className="default-home-container mx-auto flex w-full flex-col pb-16">
+        <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 items-center gap-y-8 pt-16 font-bold text-wri-black sm:flex-row sm:items-start">
           <div className="mb-6 flex w-full flex-col items-center gap-y-4 sm:mb-0 sm:items-start">
             <p className="text-base font-bold">ABOUT WRI</p>
             <p className=" font-normal">About us</p>
@@ -38,26 +38,22 @@ export function HomeFooter() {
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="mt-10 flex w-full shrink flex-col items-center gap-y-4 sm:mt-0 sm:w-1/2 sm:items-start ml-auto">
-            <p className="text-base font-bold sm:text-[1.375rem]">
+          <div className="ml-auto mt-10 lg:col-span-2 lg:w-[90%] flex w-full shrink flex-col items-center gap-y-4 sm:mt-0 sm:items-start xl:min-w-[420px]">
+            <div className="font-acumin text-[22px] font-bold text-gray-800">
               STAY UP TO DATE WITH THE NEWS{" "}
-            </p>
-            <div className="flex w-full flex-col gap-x-2 gap-y-4 lg:flex-row">
-              <div className="flex w-full min-w-fit flex-row items-center gap-x-2 rounded-sm py-2 pl-1 outline  outline-1 lg:w-[337px]">
-                <div className=" my-auto">
-                  <EnvelopeIcon className="h-5 w-5 text-wri-gray" />
-                </div>
-                <div className="shrink grow basis-auto">
-                  <input
-                    type="text"
-                    placeholder="Enter your email address"
-                    className=" w-full text-xs font-normal placeholder:text-xs focus:outline-none"
-                  />
+            </div>
+            <div className="flex w-full flex-col gap-x-2 gap-y-4 lg:flex-row justify-between">
+              <div className="relative grow">
+                <input
+                  type="text"
+                  className="h-11 w-full peer grow rounded border-0 shadow outline-0 ring-0 ring-offset-0"
+                />
+                <div className="absolute pointer-events-none peer-focus:hidden inset-y-0 left-0 flex gap-x-2 items-center pl-3">
+                  <EnvelopeIcon className="h-6 w-5 text-gray-400" />
+                  <span className="text-xs text-gray-400">Enter your email</span>
                 </div>
               </div>
-              <div className="rounded-sm bg-wri-gold px-4 py-2 text-center text-[0.875rem] font-bold  text-wri-black sm:px-6 xxl:w-[139px] 2xl:px-10">
-                SUBSCRIBE
-              </div>
+              <Button>SUBSCRIBE</Button>
             </div>
             <div className="flex flex-row gap-5">
               <div className="relative h-5 w-5 ">
diff --git a/deployment/frontend/src/components/search/Facet.tsx b/deployment/frontend/src/components/search/Facet.tsx
index 94d0137e3..e24b29e7f 100644
--- a/deployment/frontend/src/components/search/Facet.tsx
+++ b/deployment/frontend/src/components/search/Facet.tsx
@@ -29,7 +29,7 @@ export default function Facet({
             <ChevronDownIcon
               className={`${
                 open ? "rotate-180 transform  transition" : ""
-              } h-5 w-5 text-purple-500`}
+              } h-5 w-5 text-black`}
             />
           </Disclosure.Button>
           <Transition
@@ -53,7 +53,7 @@ export default function Facet({
                           id={`person-${option.value}`}
                           name={`person-${option.value}`}
                           type="checkbox"
-                          className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                          className="h-4 w-4 rounded border-gray-300 text-gray-500 focus:ring-gray-500"
                         />
                       </div>
                       <div className="min-w-0 flex-1 text-sm leading-6">
diff --git a/deployment/frontend/src/components/search/FilteredSearchLayout.tsx b/deployment/frontend/src/components/search/FilteredSearchLayout.tsx
index 537025f70..3222acf62 100644
--- a/deployment/frontend/src/components/search/FilteredSearchLayout.tsx
+++ b/deployment/frontend/src/components/search/FilteredSearchLayout.tsx
@@ -1,9 +1,8 @@
 import { Fragment, useState } from "react";
 import { Dialog, Disclosure, Transition } from "@headlessui/react";
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Facet from "./Facet";
 import LocationSearch from "./LocationSearch";
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
 import classNames from "@/utils/classnames";
 
 export default function FilteredSearchLayout({
@@ -219,7 +218,7 @@ export default function FilteredSearchLayout({
             <>
               <Disclosure.Button className="absolute lg:block hidden left-[calc(25%-1.5rem)] top-[60vh] z-20">
                 <div className={classNames("flex h-12 w-12 items-center rounded-full bg-white shadow-lg transition", open ? "" : "-translate-x-[23.5vw]")}>
-                  <ArrowRightIcon
+                  <ChevronRightIcon
                     className={classNames(
                       "mx-auto h-6 w-6 text-black transition",
                       open ? "rotate-180 transform" : "",
diff --git a/deployment/frontend/src/components/search/LocationSearch.tsx b/deployment/frontend/src/components/search/LocationSearch.tsx
index d52a90563..1e57aa0b8 100644
--- a/deployment/frontend/src/components/search/LocationSearch.tsx
+++ b/deployment/frontend/src/components/search/LocationSearch.tsx
@@ -17,7 +17,7 @@ export default function LocationSearch() {
             <ChevronDownIcon
               className={`${
                 open ? "rotate-180 transform" : ""
-              } h-5 w-5 text-purple-500`}
+              } h-5 w-5 text-black`}
             />
           </Disclosure.Button>
           <Transition
diff --git a/deployment/frontend/src/components/team/TeamsSearch.tsx b/deployment/frontend/src/components/team/TeamsSearch.tsx
index 0769255be..9bc827dea 100644
--- a/deployment/frontend/src/components/team/TeamsSearch.tsx
+++ b/deployment/frontend/src/components/team/TeamsSearch.tsx
@@ -6,15 +6,16 @@ export default function TeamsSearch() {
     <section id="search" className='bg-cover bg-center bg-no-repeat w-full flex flex-col justify-center font-acumin h-[245px]' style={{
       backgroundImage: 'url(/images/bg.png)'
     }}>
-      <div className='w-full'>
-        <div className='px-8 sm:pl-12  xxl:pl-5 max-w-8xl mx-auto'>
-          <div className='shadow rounded-sm px-4 py-4 gap-x-2 flex flex-row items-center min-w-fit  w-full sm:w-1/2 bg-white'>
-            <div className='grow shrink basis-auto'><input type="text" placeholder='Search data' className=' focus:outline-none placeholder:text-xs text-xs font-normal w-full' /></div>
-            <div className=' my-auto'><MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /></div>
-          </div>
+      <div className='w-full px-8 xxl:px-0 max-w-8xl mx-auto'>
+        <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0">
+          <input
+            name="search"
+            placeholder="Search data"
+            className="h-14 rounded-sm block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-gray-900 placeholder:text-base border-b-2 border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+          />
+          <MagnifyingGlassIcon className="absolute right-8 top-[1rem] h-5 w-5 text-wri-black" />
         </div>
       </div>
-
     </section>
   )
 }
diff --git a/deployment/frontend/src/components/topics/Hero.tsx b/deployment/frontend/src/components/topics/Hero.tsx
index 86795b902..4304e2f82 100644
--- a/deployment/frontend/src/components/topics/Hero.tsx
+++ b/deployment/frontend/src/components/topics/Hero.tsx
@@ -9,14 +9,14 @@ export function Hero() {
     <div className="mx-auto mb-8 mt-10 grid max-w-[1440px] font-acumin lg:mb-16 lg:max-h-[18.5rem] lg:grid-cols-5">
       <div className="relative h-[18.5rem] lg:col-span-2">
         <Image alt="Topic name" fill={true} src="/images/topics/1.png" />
-        <div className="absolute bottom-0 z-10 flex h-[68px] w-56 items-center justify-center rounded-t-[3px] bg-white">
+        <div className="absolute bottom-0 z-10 flex lg:h-[68px] lg:w-56 px-4 py-4 items-center justify-center rounded-t-[3px] bg-white">
           <Button>
-            <ChevronLeftIcon className="mb-1 mr-1 h-6 w-6" />
+            <ChevronLeftIcon className="mb-1 lg:mr-1 h-6 w-6" />
             <span>See all topics</span>
           </Button>
         </div>
       </div>
-      <div className="flex flex-col gap-y-1 px-6 py-6 lg:col-span-3">
+      <div className="flex flex-col gap-y-1 px-4 py-6 lg:col-span-3">
         <div className="text-[33px] font-bold text-black">Topic 1</div>
         <div className="max-w-[578.85px] text-lg font-light text-black">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
diff --git a/deployment/frontend/src/components/topics/Subtopics.tsx b/deployment/frontend/src/components/topics/Subtopics.tsx
index 92cbbd4c2..d4950e4c9 100644
--- a/deployment/frontend/src/components/topics/Subtopics.tsx
+++ b/deployment/frontend/src/components/topics/Subtopics.tsx
@@ -57,7 +57,7 @@ export default function Subtopics() {
       className=" mx-auto mt-8 flex  max-w-[1380px] flex-col gap-y-6 px-4 font-acumin sm:px-6 lg:mt-16 xxl:px-0"
     >
       <h1 className="font-['Acumin Pro SemiCondensed'] truncate whitespace-normal text-2xl font-semibold text-black">
-        Subtopics
+        Subtopics ({subtopics.length})
       </h1>
       <div className="relative">
         <div className="peer">
diff --git a/deployment/frontend/src/components/topics/TopicsSearch.tsx b/deployment/frontend/src/components/topics/TopicsSearch.tsx
index 3a14b6bc7..52cc3f49d 100644
--- a/deployment/frontend/src/components/topics/TopicsSearch.tsx
+++ b/deployment/frontend/src/components/topics/TopicsSearch.tsx
@@ -6,12 +6,14 @@ export default function TopicsSearch() {
     <section id="search" className='bg-cover bg-center bg-no-repeat w-full flex flex-col justify-center font-acumin h-[245px]' style={{
       backgroundImage: 'url(/images/bg.png)'
     }}>
-      <div className='w-full'>
-        <div className='px-8 sm:pl-12  xxl:pl-5 max-w-8xl mx-auto'>
-          <div className='shadow rounded-sm px-4 py-4 gap-x-2 flex flex-row items-center min-w-fit  w-full sm:w-1/2 bg-white'>
-            <div className='grow shrink basis-auto'><input type="text" placeholder='Search data' className=' focus:outline-none placeholder:text-xs text-xs font-normal w-full' /></div>
-            <div className=' my-auto'><MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /></div>
-          </div>
+      <div className='w-full px-8 xxl:px-0 max-w-8xl mx-auto'>
+        <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0">
+          <input
+            name="search"
+            placeholder="Search data"
+            className="h-14 rounded-sm block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-gray-900 placeholder:text-base border-b-2 border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+          />
+          <MagnifyingGlassIcon className="absolute right-8 top-[1rem] h-5 w-5 text-wri-black" />
         </div>
       </div>
 
diff --git a/deployment/frontend/src/pages/datasets/[datasetName].tsx b/deployment/frontend/src/pages/datasets/[datasetName].tsx
index e0c5fe50e..f95ec037b 100644
--- a/deployment/frontend/src/pages/datasets/[datasetName].tsx
+++ b/deployment/frontend/src/pages/datasets/[datasetName].tsx
@@ -55,12 +55,12 @@ export default function DatasetPage() {
                             <Tab.Group>
                                 <Tab.List
                                     as="nav"
-                                    className="flex w-full gap-x-2 @sm:pr-8 pr-4"
+                                    className="flex w-full gap-x-2 border-b border-zinc-300"
                                 >
                                     <DatasetTabs tabs={tabs} />
                                 </Tab.List>
-                                <div className="mb-4 mr-9 border-b border-zinc-300" />
-                                <div className="@sm:pr-8 pr-4">
+                                <div className="mb-4 mr-9" />
+                                <div>
                                     <Tab.Panels>
                                         <Tab.Panel>
                                             <DataFiles />
diff --git a/deployment/frontend/src/styles/globals.scss b/deployment/frontend/src/styles/globals.scss
index eaf5dc3c7..abf128c67 100644
--- a/deployment/frontend/src/styles/globals.scss
+++ b/deployment/frontend/src/styles/globals.scss
@@ -24,6 +24,17 @@ body, html {
   float: none;
 }
 
+.suggestions {
+  max-height: 220px;
+}
+
+@media screen and (min-width: 640px) {
+.mapboxgl-ctrl-geocoder--input {
+    height: 36px;
+    padding: 6px 35px !important;
+}
+}
+
 .dataset-tabs .swiper-slide {
   width: fit-content !important;
 }
@@ -36,6 +47,7 @@ body, html {
   width: fit-content !important;
 }
 
+
 input[type="color"] {
   -webkit-appearance: none;
   border: none;
diff --git a/deployment/frontend/src/styles/rte.css b/deployment/frontend/src/styles/rte.css
index bd99280ea..01901ed68 100644
--- a/deployment/frontend/src/styles/rte.css
+++ b/deployment/frontend/src/styles/rte.css
@@ -2,9 +2,9 @@ html {
   box-sizing: border-box;
 }
 
-*,
-*:before,
-*:after {
+.editor *,
+.editor *:before,
+.editor *:after {
   box-sizing: inherit;
 }