diff --git a/django_project/minisass_frontend/src/components/Footer/index.tsx b/django_project/minisass_frontend/src/components/Footer/index.tsx
index e098f45f..5608b5ae 100644
--- a/django_project/minisass_frontend/src/components/Footer/index.tsx
+++ b/django_project/minisass_frontend/src/components/Footer/index.tsx
@@ -1,20 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { HashLink } from 'react-router-hash-link';
-
 import { Img, Text } from "../../components";
 import ContactFormModal from '../../components/ContactFormModal';
-import { useState } from 'react';
 import { ContactFormData } from '../../components/ContactFormModal/types';
 import { globalVariables } from "../../utils";
 
 type FooterProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,
   HTMLDivElement
-> &
-  Partial<{
-    showLogo?: boolean;
-  }>;
+> & Partial<{
+  showLogo?: boolean;
+}>;
 
 const Footer: React.FC<FooterProps> = (props) => {
   const hideLogo = props.showLogo === false;
@@ -44,75 +41,32 @@ const Footer: React.FC<FooterProps> = (props) => {
         <div className={className}>
           {!hideLogo &&
             <>
-              <div
-              className="flex flex-row md:gap-10 gap-[67px] items-center justify-center sm:overflow-auto w-auto md:w-full"
-              style={{marginLeft: '-5%'}}>
-              <a href="https://www.groundtruth.co.za" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}img_image6.jpg`}
-                  alt="Ground Truth"
-                />
-              </a>
-              <a href="https://www.unicef.org/" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_5.png`}
-                  alt="Unicef"
-                />
-              </a>
-                <a href="https://www.cgiar.org" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_4.png`}
-                  alt="CGIAR"
-                />
-              </a>
-              <a href="https://www.iwmi.cgiar.org" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_2.png`}
-                  alt="IWMI"
-                />
-              </a>
-            </div>
-            <div
-              className="flex flex-row md:gap-10 gap-[67px] items-center justify-center sm:overflow-auto w-auto md:w-full mt-[-75px]"
-              style={{marginLeft: '-5%'}}>
-              <a href="https://www.wrc.org.za/" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_6.jpg`}
-                  alt="Water Research Commission"
-                />
-              </a>
-              <a href="https://wessa.org.za/" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_8.png`}
-                  alt="Wildlife and Environment Society of South Africa (WESSA)"
-                />
-              </a>
-              <a href="https://kartoza.com/" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}patners_logo_7.png`}
-                  alt="Kartoza"
-                />
-              </a>
-              <a href="javascript:void(0);" target="_blank" rel="noopener noreferrer">
-                <Img
-                  className="h-[100px] md:h-auto object-contain"
-                  src={`${globalVariables.staticPath}uMngeni-uThukela_ logo.jpg`}
-                  alt="uMngeni-uThukela"
-                />
-              </a>
-            </div>
+              <div className="flex flex-row md:gap-10 gap-[67px] items-center justify-center sm:overflow-auto w-auto md:w-full" style={{ marginLeft: '-5%' }}>
+                {["https://www.groundtruth.co.za", "https://www.unicef.org/", "https://www.cgiar.org", "https://www.iwmi.cgiar.org"].map((link, index) => (
+                  <a key={index} href={link} target="_blank" rel="noopener noreferrer" className="transition-transform transform hover:scale-105 hover:shadow-lg">
+                    <Img
+                      className="h-[100px] md:h-auto object-contain"
+                      src={`${globalVariables.staticPath}img_image${index + 6}.png`}
+                      alt="Logo"
+                    />
+                  </a>
+                ))}
+              </div>
+              <div className="flex flex-row md:gap-10 gap-[67px] items-center justify-center sm:overflow-auto w-auto md:w-full mt-[-75px]" style={{ marginLeft: '-5%' }}>
+                {["https://www.wrc.org.za/", "https://wessa.org.za/", "https://kartoza.com/", "javascript:void(0);"].map((link, index) => (
+                  <a key={index} href={link} target="_blank" rel="noopener noreferrer" className="transition-transform transform hover:scale-105 hover:shadow-lg">
+                    <Img
+                      className="h-[100px] md:h-auto object-contain"
+                      src={`${globalVariables.staticPath}patners_logo_${index + 6}.png`}
+                      alt="Logo"
+                    />
+                  </a>
+                ))}
+              </div>
             </>
           }
 
-          <div className="bg-blue-900 flex flex-col items-center justify-end p-6 sm:px-5 rounded-tl-[65px]
-            md:w-[105%] sm:w-[110%] w-full mt-[-75px] sm:mt-[-5px] mb-[-10px]">
+          <div className="bg-blue-900 flex flex-col items-center justify-end p-6 sm:px-5 rounded-tl-[65px] md:w-[105%] sm:w-[110%] w-full mt-[-75px] sm:mt-[-5px] mb-[-10px]">
             <div className="flex flex-col items-center justify-start mt-8 w-[85%] md:w-full">
               <div className="flex flex-col gap-10 items-center justify-start w-auto md:w-full">
                 <div className="bg-transparent flex flex-col items-start justify-start w-auto">
@@ -124,45 +78,27 @@ const Footer: React.FC<FooterProps> = (props) => {
                 </div>
 
                 <ul className="flex sm:flex-col flex-row gap-[19px] items-start justify-start w-auto md:w-full common-column-list md:ml-[50px]">
-                  <li style={{ whiteSpace: 'nowrap' }}>
-                    <HashLink to="/howto#howto-title">
-                      <Text
-                        className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer"
-                        size="txtRalewayExtraBold14WhiteA700"
-                      >
-                        How to
-                      </Text>
-                    </HashLink>
-                  </li>
-                  <li style={{ whiteSpace: 'nowrap' }}>
-                    <Text
-                      className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer"
-                      size="txtRalewayExtraBold14WhiteA700"
-                      onClick={() => navigate("/map")}
-                    >
-                      Map
-                    </Text>
-                  </li>
-                  <li style={{ whiteSpace: 'nowrap' }}>
-                    <Text
-                      className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer"
-                      size="txtRalewayExtraBold14WhiteA700"
-                      onClick={() => window.open('https://kartoza.github.io/miniSASS/', "_blank")}
-                    >
-                      Documentation
-                    </Text>
-                  </li>
+                  {["/howto#howto-title", "/map", 'https://kartoza.github.io/miniSASS/'].map((link, index) => (
+                    <li key={index} style={{ whiteSpace: 'nowrap' }}>
+                      <HashLink to={link}>
+                        <Text
+                          className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer transition-colors hover:text-gray-400"
+                          size="txtRalewayExtraBold14WhiteA700"
+                        >
+                          {index === 0 ? "How to" : index === 1 ? "Map" : "Documentation"}
+                        </Text>
+                      </HashLink>
+                    </li>
+                  ))}
                   <li style={{ whiteSpace: 'nowrap' }}>
                     <a>
                       <Text
-                        className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer"
+                        className="text-sm text-white-A700 tracking-[0.98px] uppercase cursor-pointer transition-colors hover:text-gray-400"
                         size="txtRalewayExtraBold14WhiteA700"
                         onClick={openModal}
                       >
                         Contact us
                       </Text>
-                      
-                      {/* ContactFormModal opens when isModalOpen is true */}
                       <ContactFormModal isOpen={isModalOpen} onClose={closeModal} onSubmit={handleFormSubmit} />
                     </a>
                   </li>
@@ -173,23 +109,18 @@ const Footer: React.FC<FooterProps> = (props) => {
                     <Img
                       className="h-6 w-6"
                       src={`${globalVariables.staticPath}img_riyoutubefill_white_a700.svg`}
-                      alt="riyoutubefill_One"
+                      alt="YouTube"
                     />
                   </a>
                 </div>
 
                 <div className="flex md:flex-col flex-row md:gap-10 items-center justify-between max-w-[1180px] w-full">
-                  <Text
-                    className="text-base text-white-A700 w-auto"
-                    size="txtRalewayRomanRegular16WhiteA700"
-                  >
+                  <Text className="text-base text-white-A700 w-auto" size="txtRalewayRomanRegular16WhiteA700">
                     <span className="text-white-A700 font-raleway text-left font-normal">
                       © International Water Management Institute (IWMI) and UNICEF.
                     </span>
                   </Text>
                 </div>
-
-
               </div>
             </div>
           </div>