diff --git a/packages/ui/src/components/Organisms/Footer.stories.tsx b/packages/ui/src/components/Organisms/Footer.stories.tsx
index 1d773a29b..086f62743 100644
--- a/packages/ui/src/components/Organisms/Footer.stories.tsx
+++ b/packages/ui/src/components/Organisms/Footer.stories.tsx
@@ -21,12 +21,48 @@ export const Footer = {
       {
         locale: Locale.En,
         items: [
-          { title: 'About', target: '/about' as Url },
-          { title: 'Blog', target: '/blog' as Url },
-          { title: 'Jobs', target: '/jobs' as Url },
-          { title: 'Press', target: '/press' as Url },
-          { title: 'Accessibility', target: '/accessibility' as Url },
-          { title: 'Partners', target: '/partners' as Url },
+          {
+            id: '1',
+            title: 'About',
+            target: '/about' as Url,
+          },
+          {
+            id: '2',
+            title: 'Blog',
+            target: '/blog' as Url,
+          },
+          {
+            id: '3',
+            title: 'Jobs',
+            target: '/jobs' as Url,
+          },
+          {
+            id: '4',
+            title: 'Press',
+            target: '/press' as Url,
+          },
+          {
+            id: '5',
+            title: 'Accessibility',
+            target: '/accessibility' as Url,
+          },
+          {
+            id: '6',
+            title: 'Partners',
+            target: '/partners' as Url,
+          },
+          {
+            id: '7',
+            title: 'Drupal',
+            target: '/drupal' as Url,
+            parent: '0',
+          },
+          {
+            id: '8',
+            title: 'Gatsby',
+            target: '/gatsby' as Url,
+            parent: '0',
+          },
         ].map((item, index) => ({
           ...item,
           id: index.toString(),
diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 87c80dc6c..7abb52e7a 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -19,36 +19,195 @@ export function Footer() {
   const intl = useIntl();
   const items = buildNavigationTree(useFooterNavigation(intl.locale));
   return (
-    <footer className="bg-white">
-      <div className="mx-auto max-w-7xl overflow-hidden py-20 px-6 sm:py-24 lg:px-8">
-        <nav
-          className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
-          aria-label="Footer"
-        >
-          {items.filter(isTruthy).map((item) => (
-            <div key={item.title} className="pb-6">
-              <Link
-                href={item.target}
-                className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+    <footer
+      id="footer"
+      className={'relative z-10 bg-gray-100 text-gray-500 py-4 lg:py-16 px-4'}
+    >
+      <h2 className={'sr-only'}>Footer</h2>
+      <div className="container mx-auto pb-8">
+        <div className="lg:px-6 flex flex-wrap justify-between">
+          <div className={'w-full mb-8 md:mb-0 md:w-1/4'}>
+            <a href="/" className={'mb-4 block'}>
+              <svg
+                width="168"
+                height="14"
+                viewBox="0 0 168 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                {item.title}
-              </Link>
+                <mask
+                  id="mask0_176_129733"
+                  maskUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="168"
+                  height="14"
+                >
+                  <path d="M167.999 0H0V14H167.999V0Z" fill="white" />
+                </mask>
+                <g mask="url(#mask0_176_129733)">
+                  <path
+                    d="M165.267 13.4665C166.124 13.1115 166.793 12.6068 167.276 11.9537C167.758 11.3007 168 10.5279 168 9.63681C168 8.99092 167.864 8.45054 167.591 8.01709C167.318 7.58365 166.934 7.22149 166.439 6.93063C165.943 6.63976 165.372 6.4045 164.725 6.22343C164.078 6.04235 163.385 5.89406 162.65 5.77715C162.167 5.70015 161.723 5.61175 161.317 5.5148C160.911 5.41784 160.558 5.29522 160.26 5.14694C159.962 4.99866 159.729 4.81758 159.565 4.60371C159.4 4.38984 159.318 4.14175 159.318 3.85659C159.318 3.50726 159.445 3.2107 159.699 2.96403C159.952 2.71879 160.295 2.53059 160.726 2.40226C161.157 2.27394 161.653 2.20835 162.212 2.20835C162.733 2.20835 163.227 2.27679 163.697 2.41224C164.166 2.5477 164.609 2.75159 165.02 3.02249C165.432 3.29339 165.798 3.62418 166.115 4.012L167.658 2.28677C167.303 1.80913 166.864 1.39849 166.345 1.05488C165.824 0.712681 165.225 0.450333 164.546 0.269255C163.867 0.0881779 163.108 -0.00164795 162.271 -0.00164795C161.484 -0.00164795 160.757 0.0924553 160.091 0.279236C159.424 0.467443 158.836 0.735494 158.329 1.08339C157.821 1.43271 157.427 1.85618 157.149 2.35379C156.87 2.85139 156.73 3.41031 156.73 4.03053C156.73 4.65076 156.841 5.14837 157.063 5.60177C157.285 6.05375 157.612 6.4487 158.044 6.78519C158.475 7.12168 159.001 7.39544 159.624 7.60931C160.246 7.82318 160.957 7.99428 161.757 8.1226C162.1 8.17393 162.443 8.23239 162.784 8.29655C163.127 8.36214 163.456 8.43913 163.774 8.52896C164.092 8.62021 164.374 8.73285 164.621 8.8683C164.869 9.00375 165.065 9.16629 165.212 9.35307C165.358 9.54128 165.431 9.76371 165.431 10.0218C165.431 10.4096 165.281 10.7361 164.983 11.0013C164.684 11.2665 164.304 11.4661 163.84 11.603C163.377 11.7384 162.885 11.8069 162.364 11.8069C161.463 11.8069 160.623 11.6301 159.841 11.2736C159.06 10.9186 158.283 10.3069 157.509 9.44147L156.043 11.4191C156.538 11.988 157.093 12.4599 157.709 12.8349C158.325 13.2099 159.01 13.4979 159.766 13.6975C160.52 13.8971 161.349 13.9984 162.251 13.9984C163.406 13.9984 164.413 13.8201 165.27 13.4651M143.663 2.49922H147.737C148.434 2.49922 149 2.63182 149.431 2.89702C149.862 3.16222 150.078 3.56002 150.078 4.08899C150.078 4.42548 149.986 4.71635 149.802 4.96159C149.619 5.20682 149.361 5.39788 149.031 5.53333C148.7 5.66879 148.332 5.73723 147.926 5.73723H143.661V2.50064L143.663 2.49922ZM143.663 7.90873H148.137C148.581 7.90873 149.007 7.97004 149.413 8.09266C149.819 8.21528 150.149 8.40634 150.403 8.66441C150.656 8.9239 150.784 9.2661 150.784 9.69242C150.784 10.0931 150.679 10.4324 150.47 10.7104C150.26 10.9885 149.966 11.1952 149.585 11.3307C149.204 11.4661 148.754 11.5346 148.233 11.5346H143.663V7.90873ZM148.233 13.803C148.892 13.803 149.524 13.7289 150.127 13.5806C150.731 13.4323 151.27 13.2028 151.746 12.8919C152.222 12.5811 152.596 12.1676 152.869 11.6515C153.142 11.1353 153.277 10.508 153.277 9.77083C153.277 9.11211 153.135 8.53894 152.849 8.05416C152.563 7.56939 152.18 7.17444 151.697 6.87074C151.214 6.56704 150.68 6.35032 150.098 6.22057L150.04 6.60839C150.865 6.38882 151.494 6.02096 151.925 5.50339C152.356 4.98725 152.572 4.3599 152.572 3.62275C152.572 2.88561 152.394 2.28535 152.038 1.78061C151.683 1.27588 151.156 0.892333 150.457 0.627133C149.759 0.361933 148.896 0.229333 147.867 0.229333H141.24V13.8059H148.228L148.233 13.803ZM135.12 10.8174L134.511 8.62591H127.39L126.514 10.8174H135.12ZM126.361 13.803L129.998 5.48486C130.099 5.22679 130.209 4.96159 130.322 4.68926C130.437 4.41835 130.55 4.13319 130.665 3.83662C130.78 3.53863 130.886 3.24491 130.988 2.95405C131.089 2.66319 131.184 2.3823 131.274 2.10997L130.703 2.12993C130.778 2.36234 130.868 2.62469 130.969 2.91555C131.07 3.20642 131.179 3.50441 131.292 3.80811C131.407 4.11181 131.518 4.40695 131.625 4.69068C131.733 4.97442 131.838 5.22108 131.939 5.42782L135.595 13.8044H138.203L132.281 0.232184H129.786L123.845 13.8059H126.358L126.361 13.803ZM121.176 13.803V11.4761H114.532V0.232184H112.057V13.8059H121.176V13.803ZM91.2451 5.7358H83.267V7.98572H91.2451V5.7358ZM92.2924 13.803V11.5146H84.4473V2.5206H92.2168V0.232184H82.0097V13.8059H92.2924V13.803ZM76.7689 5.7358H68.7909V7.98572H76.7689V5.7358ZM77.8162 13.803V11.5146H69.9712V2.5206H77.7406V0.232184H67.5335V13.8059H77.8162V13.803ZM63.8637 13.803V11.4561H54.1327L54.9896 12.1149L63.6523 1.97737V0.232184H52.3419V2.61756H61.3868L60.53 1.91891L51.8462 12.0407V13.8059H63.8623L63.8637 13.803ZM46.2302 10.8174L45.6211 8.62591H38.5L37.6235 10.8174H46.2302ZM37.4709 13.803L41.1085 5.48486C41.2107 5.22679 41.3185 4.96159 41.4319 4.68926C41.5453 4.41693 41.6601 4.13319 41.7749 3.83662C41.8897 3.53863 41.9976 3.24491 42.0984 2.95405C42.1992 2.66319 42.2944 2.3823 42.384 2.10997L41.8127 2.12993C41.8883 2.36234 41.9779 2.62469 42.0788 2.91555C42.1796 3.20642 42.2888 3.50441 42.4022 3.80811C42.517 4.11181 42.6276 4.40695 42.7354 4.69068C42.8432 4.97442 42.9483 5.22108 43.0491 5.42782L46.7049 13.8044H49.3133L43.3907 0.232184H40.8956L34.9548 13.8059H37.4681L37.4709 13.803ZM19.8556 13.803V8.59027C19.8556 7.43964 19.8303 6.3988 19.7799 5.46775C19.7295 4.5367 19.6273 3.60564 19.4747 2.67602L19.2087 3.56857L23.6906 13.8073H25.543L30.0977 3.56715L29.8316 2.67459C29.679 3.63131 29.5768 4.57804 29.5264 5.5148C29.476 6.45298 29.4508 7.47671 29.4508 8.58884V13.8044H31.9067V0.232184H29.2058L24.042 11.7313L25.2797 11.7513L20.1356 0.232184H17.3969V13.8059H19.8528L19.8556 13.803ZM11.2754 10.8174L10.6664 8.62591H3.54238L2.66589 10.8174H11.2726H11.2754ZM2.51607 13.803L6.15367 5.48486C6.25588 5.22679 6.36369 4.96159 6.4771 4.68926C6.59191 4.41835 6.70533 4.13319 6.82014 3.83662C6.93495 3.53863 7.04136 3.24491 7.14357 2.95405C7.24579 2.66319 7.3396 2.3823 7.4292 2.10997L6.85794 2.12993C6.93355 2.36234 7.02316 2.62469 7.12397 2.91555C7.22618 3.20642 7.33399 3.50441 7.44741 3.80811C7.56222 4.11181 7.67283 4.40695 7.78064 4.69068C7.88845 4.97442 7.99347 5.22108 8.09428 5.42782L11.7501 13.8044H14.3586L8.43591 0.232184H5.94084L0 13.8059H2.51327L2.51607 13.803Z"
+                    fill="#1D1D1B"
+                  />
+                </g>
+                <mask
+                  id="mask1_176_129733"
+                  maskUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="168"
+                  height="14"
+                >
+                  <path d="M168 0H0V14H168V0Z" fill="white" />
+                </mask>
+                <g mask="url(#mask1_176_129733)">
+                  <path
+                    d="M108.051 11.5175H95.9463V13.8059H108.051V11.5175Z"
+                    fill="#1D1D1B"
+                  />
+                </g>
+              </svg>
+            </a>
+            <div className={'text-base text-gray-500 mb-4'}>
+              <p>meta description</p>
             </div>
-          ))}
-        </nav>
-        <p className="mt-10 text-center text-xs leading-5 text-gray-500">
-          &copy;{' '}
-          {intl.formatMessage(
-            {
-              defaultMessage: '{year} {company_name}. All rights reserved.',
-              id: 'qA8qQH',
-            },
-            {
-              year: 2020,
-              company_name: 'Company name, Inc',
-            },
-          )}
-        </p>
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <ul
+            className={'md:ml-[5.625rem] flex flex-wrap justify-between grow'}
+            aria-label="Footer Primary"
+          >
+            {items.map((item, key) => (
+              <>
+                <li
+                  key={key + 'header'}
+                  className={
+                    'block mb-3 lg:mr-5 last:mr-0 md:mb-0 md:text-left w-1/2 lg:w-auto'
+                  }
+                >
+                  {item.target ? (
+                    <Link
+                      href={item.target!}
+                      className={
+                        'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                      }
+                    >
+                      {item.title}
+                    </Link>
+                  ) : (
+                    <span
+                      className={
+                        'block transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                      }
+                    >
+                      {item.title}
+                    </span>
+                  )}
+                  {item.children.length > 0
+                    ? item.children.map((child) => (
+                        <Link
+                          key={child.target}
+                          href={child.target}
+                          className="block transition-all text-base mb-4 hover:text-blue-600"
+                        >
+                          {child.title}
+                        </Link>
+                      ))
+                    : null}
+                </li>
+              </>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div
+        className={
+          'container mx-auto w-full border-t border-t-gray-200 text-center'
+        }
+      >
+        <div className={'text-base'}>
+          <p className="mt-10 text-center text-xs leading-5 text-gray-500">
+            &copy;{' '}
+            {intl.formatMessage(
+              {
+                defaultMessage: '{year} {company_name}. All rights reserved.',
+                id: 'qA8qQH',
+              },
+              {
+                year: 2024,
+                company_name: 'Company name, Inc',
+              },
+            )}
+          </p>
+        </div>
       </div>
     </footer>
   );