diff --git a/app/components/forms/select/toggle/component.tsx b/app/components/forms/select/toggle/component.tsx
index 4279612e39..24e2f839d3 100644
--- a/app/components/forms/select/toggle/component.tsx
+++ b/app/components/forms/select/toggle/component.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
-import cx from 'classnames';
 
-import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
-import Icon from 'components/icon';
+import cx from 'classnames';
 
 import THEME from 'components/forms/select/constants/theme';
-
 import { SelectToggleProps } from 'components/forms/select/types';
+import Icon from 'components/icon';
+
+import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
 
 export const SelectToggle: React.FC<SelectToggleProps> = ({
   options,
@@ -25,7 +25,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
     return options.filter((o) => !o.disabled && o.enabled);
   }, [options]);
 
-  const labelDefaultFormatter:() => string = useCallback(() => {
+  const labelDefaultFormatter: () => string = useCallback(() => {
     if (!selectedItems.length) return placeholder;
     if (selectedItems.length === 1) return selectedItems[0].label;
     if (selectedItems.length === getEnabledOptions.length) return 'All items selected';
@@ -34,6 +34,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
 
   return (
     <button
+      aria-label="select"
       type="button"
       disabled={disabled}
       className={cx({
diff --git a/app/components/info-button/component.tsx b/app/components/info-button/component.tsx
index 3fbf673cc5..26ac61d7d6 100644
--- a/app/components/info-button/component.tsx
+++ b/app/components/info-button/component.tsx
@@ -45,6 +45,7 @@ export const InfoButton: React.FC<InfoButtonProps> = ({
     )}
   >
     <button
+      aria-label="info-button"
       className={cx({
         'flex flex-shrink-0 items-center justify-center w-5 h-5 transition rounded-full bg-opacity-50 focus:outline-none hover:bg-opacity-75 focus:bg-opacity-90': true,
         [THEME[theme].button]: true,
diff --git a/app/components/map/controls/fit-bounds/component.tsx b/app/components/map/controls/fit-bounds/component.tsx
index 7d9edb74b2..5988abbd90 100644
--- a/app/components/map/controls/fit-bounds/component.tsx
+++ b/app/components/map/controls/fit-bounds/component.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback } from 'react';
+
+import { ViewportProps } from 'react-map-gl';
+
 import cx from 'classnames';
 
 import Icon from 'components/icon';
 
-import { ViewportProps } from 'react-map-gl';
-
 import FIT_BOUNDS_SVG from 'svgs/map/fit-bounds.svg?sprite';
 
 export interface FitBoundsControlProps {
@@ -28,6 +29,7 @@ export const FitBoundsControl = ({
 
   return (
     <button
+      aria-label="fit-bounds"
       className={cx({
         'mb-0.5 px-0.5 py-1 rounded-4xl text-white bg-black focus:outline-none': true,
         'hover:bg-gray-700 active:bg-gray-600': !!bounds,
diff --git a/app/components/map/controls/zoom/component.tsx b/app/components/map/controls/zoom/component.tsx
index e07bec354a..f7ad6a38c8 100644
--- a/app/components/map/controls/zoom/component.tsx
+++ b/app/components/map/controls/zoom/component.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback } from 'react';
+
+import { ViewportProps } from 'react-map-gl';
+
 import cx from 'classnames';
 
 import Icon from 'components/icon';
 
-import { ViewportProps } from 'react-map-gl';
-
 import ZOOM_IN_SVG from 'svgs/map/zoom-in.svg?sprite';
 import ZOOM_OUT_SVG from 'svgs/map/zoom-out.svg?sprite';
 
@@ -47,6 +48,7 @@ export const ZoomControl = ({
       })}
     >
       <button
+        aria-label="zoom-in"
         className={cx({
           'mb-0.5 p-0.5 rounded-t-4xl text-white bg-black focus:outline-none': true,
           'hover:bg-gray-700 active:bg-gray-600': zoom !== maxZoom,
@@ -59,6 +61,7 @@ export const ZoomControl = ({
         <Icon icon={ZOOM_IN_SVG} />
       </button>
       <button
+        aria-label="zoom-out"
         className={cx({
           'p-0.5 rounded-b-4xl text-white bg-black focus:outline-none': true,
           'hover:bg-gray-700 active:bg-gray-600': zoom !== minZoom,
diff --git a/app/components/map/legend/item/component.tsx b/app/components/map/legend/item/component.tsx
index 1723014359..4d6d1a00e0 100644
--- a/app/components/map/legend/item/component.tsx
+++ b/app/components/map/legend/item/component.tsx
@@ -88,6 +88,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
 
         {sortable?.handle && (
           <button
+            aria-label="drag"
             type="button"
             className="text-gray-400 cursor-pointer hover:text-white"
             {...listeners}
@@ -147,6 +148,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                   )}
                 >
                   <button
+                    aria-label="manage-opacity"
                     type="button"
                     className={cx({
                       'block text-white': true,
@@ -175,6 +177,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
               )}
             >
               <button
+                aria-label="manage-visibility"
                 type="button"
                 onClick={onChangeVisibility}
                 className={cx({
diff --git a/app/components/search/component.tsx b/app/components/search/component.tsx
index dd26ed351c..f5dca30d5c 100644
--- a/app/components/search/component.tsx
+++ b/app/components/search/component.tsx
@@ -1,17 +1,18 @@
 import React, { useRef } from 'react';
-import cx from 'classnames';
 
 // react aria
+import { useButton } from '@react-aria/button'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useSearchField } from '@react-aria/searchfield';
 import { useSearchFieldState } from '@react-stately/searchfield';
-import { useButton } from '@react-aria/button'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
 // react types
 import { AriaSearchFieldProps } from '@react-types/searchfield';
+import cx from 'classnames';
 
 import Icon from 'components/icon';
-import SEARCH_SVG from 'svgs/ui/search.svg?sprite';
+
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import SEARCH_SVG from 'svgs/ui/search.svg?sprite';
 
 const THEME = {
   dark: 'text-white',
@@ -76,7 +77,12 @@ export const Search: React.FC<SearchProps> = ({
       />
 
       {state.value !== '' && (
-        <button className="relative flex items-center self-center justify-center w-5 h-5" type="button" {...buttonProps}>
+        <button
+          aria-label="close"
+          className="relative flex items-center self-center justify-center w-5 h-5"
+          type="button"
+          {...buttonProps}
+        >
           <Icon
             icon={CLOSE_SVG}
             className="inline-block w-2 h-2"
diff --git a/app/components/tabs/component.tsx b/app/components/tabs/component.tsx
index 41e8135682..85dd4d3498 100644
--- a/app/components/tabs/component.tsx
+++ b/app/components/tabs/component.tsx
@@ -25,6 +25,7 @@ export const Tabs: React.FC<TabsProps> = ({
       {items.map((tab) => (
         <li key={tab.id}>
           <button
+            aria-label="select-tab"
             type="button"
             className={cx(
               {
diff --git a/app/components/toast/component.tsx b/app/components/toast/component.tsx
index 338203beb0..caac885413 100644
--- a/app/components/toast/component.tsx
+++ b/app/components/toast/component.tsx
@@ -1,19 +1,18 @@
 import React, {
   useCallback, useEffect, useRef,
 } from 'react';
+
 import cx from 'classnames';
+import { motion, useAnimation } from 'framer-motion';
+
+import Icon from 'components/icon';
 
-import SUCCESS_SVG from 'svgs/notifications/success.svg?sprite';
 import ERROR_SVG from 'svgs/notifications/error.svg?sprite';
-import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 import INFO_SVG from 'svgs/notifications/info.svg?sprite';
-
+import SUCCESS_SVG from 'svgs/notifications/success.svg?sprite';
+import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
-import Icon from 'components/icon';
-
-import { motion, useAnimation } from 'framer-motion';
-
 import { ToastProps, ToastTheme } from './types';
 
 const THEME: ToastTheme = {
@@ -127,6 +126,7 @@ export const Toast: React.FC<ToastProps> = ({
           </div>
 
           <button
+            aria-label="close"
             type="button"
             className="flex items-center justify-center flex-shrink-0 w-10 h-10 ml-5"
             onClick={handleDismiss}
diff --git a/app/layout/header/component.tsx b/app/layout/header/component.tsx
index 7d68e0be50..f08a6bafa0 100644
--- a/app/layout/header/component.tsx
+++ b/app/layout/header/component.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 
 import Link from 'next/link';
 
-import { useMe } from 'hooks/me';
-
 import cx from 'classnames';
 
+import { useMe } from 'hooks/me';
+
 import MyProjects from 'layout/header/my-projects';
 import Title from 'layout/header/title';
 import User from 'layout/header/user';
@@ -37,7 +37,7 @@ const SIZE = {
   },
 };
 
-export const Header: React.FC<HeaderProps> = ({ published = false, size, theme = 'dark' }:HeaderProps) => {
+export const Header: React.FC<HeaderProps> = ({ published = false, size, theme = 'dark' }: HeaderProps) => {
   const { user } = useMe();
 
   return (
diff --git a/app/layout/header/user/component.tsx b/app/layout/header/user/component.tsx
index 24ac106fff..1faa3b36ce 100644
--- a/app/layout/header/user/component.tsx
+++ b/app/layout/header/user/component.tsx
@@ -65,6 +65,7 @@ export const HeaderUser: React.FC<HeaderUserProps> = () => {
           </nav>
 
           <button
+            aria-label="log-out"
             type="button"
             onClick={handleSignOut}
             className="flex w-full px-8 py-5 border-t border-gray-300 hover:underline focus:outline-none"
@@ -76,6 +77,7 @@ export const HeaderUser: React.FC<HeaderUserProps> = () => {
       )}
     >
       <button
+        aria-label="open-menu"
         type="button"
         className="flex items-center justify-start space-x-1 focus:outline-none"
         onClick={handleClick}
diff --git a/app/layout/help/beacon/component.tsx b/app/layout/help/beacon/component.tsx
index 1a9e1d7dbb..74a6bb63b7 100644
--- a/app/layout/help/beacon/component.tsx
+++ b/app/layout/help/beacon/component.tsx
@@ -11,12 +11,12 @@ import { useResizeDetector } from 'react-resize-detector';
 
 import { useRouter } from 'next/router';
 
-import { useHelp } from 'hooks/help';
-
 import type { Placement } from '@popperjs/core';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { useHelp } from 'hooks/help';
+
 import HelpSpotlight from 'layout/help/spotlight';
 import HelpTooltip from 'layout/help/tooltip';
 
@@ -173,6 +173,7 @@ export const HelpBeacon: React.FC<HelpBeaconProps> = ({
               {...attributes.popper}
             >
               <button
+                aria-label="manage-visibility"
                 type="button"
                 className={cx({
                   'relative beacon flex items-center justify-center w-6 h-6 bg-primary-500 border-2 border-gray-700 transition rounded-full focus:outline-none transform translate-y-3/4': true,
diff --git a/app/layout/me/profile/avatar/component.tsx b/app/layout/me/profile/avatar/component.tsx
index 7dd9b352be..fdad986a70 100644
--- a/app/layout/me/profile/avatar/component.tsx
+++ b/app/layout/me/profile/avatar/component.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 
 import { useDropzone } from 'react-dropzone';
+
+import { motion } from 'framer-motion';
+
 import { useMe } from 'hooks/me';
 import { useToasts } from 'hooks/toast';
 
 import Avatar from 'components/avatar';
 import Icon from 'components/icon';
 
-import { motion } from 'framer-motion';
-
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 import IMAGE_SVG from 'svgs/ui/image.svg?sprite';
 
@@ -24,7 +25,7 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 
-export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }:AvatarMeProps) => {
+export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }: AvatarMeProps) => {
   const { user } = useMe();
   const { addToast } = useToasts();
   const [preview, setPreview] = useState(value);
@@ -121,6 +122,7 @@ export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }:AvatarMePr
 
           {preview && (
             <button
+              aria-label="remove"
               type="button"
               className="absolute p-1 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full top-1 right-1"
               onClickCapture={onRemove}
diff --git a/app/layout/partners/component.tsx b/app/layout/partners/component.tsx
index e9040b1802..7ba931bfc0 100644
--- a/app/layout/partners/component.tsx
+++ b/app/layout/partners/component.tsx
@@ -23,7 +23,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 px-24 md:grid-cols-2 gap-y-20">
               {FOUNDING_LOGOS.map((fl) => (
                 <a href={fl.hyperlink} key={fl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={fl.alt} src={fl.src} />
+                  <img alt={fl.alt} src={fl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -36,7 +36,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 md:grid-cols-2 gap-y-20">
               {PARTNERSHIP_LOGOS.map((fl) => (
                 <a href={fl.hyperlink} key={fl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={fl.alt} src={fl.src} />
+                  <img alt={fl.alt} src={fl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -51,7 +51,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 px-32 pt-24 md:px-0 md:grid-cols-5 gap-y-24 md:gap-y-0 md:gap-x-16">
               {ADDITIONAL_SUPPORT_LOGOS.map((sl) => (
                 <a href={sl.hyperlink} key={sl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={sl.alt} src={sl.src} />
+                  <img alt={sl.alt} src={sl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -66,7 +66,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 pt-20 md:grid-cols-1 gap-x-16">
               {INITIATIVE_LOGOS.map((sl) => (
                 <a href={sl.hyperlink} key={sl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={sl.alt} src={sl.src} />
+                  <img alt={sl.alt} src={sl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx
index 77d2bf8f14..91ae6c2393 100644
--- a/app/layout/projects/new/form/planning-area-uploader/component.tsx
+++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx
@@ -52,7 +52,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
       input.onChange(null);
       dispatch(setUploadingPlanningArea(null));
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onDropAccepted = async (acceptedFiles) => {
@@ -218,6 +218,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                 <p className="text-sm text-blue-500">{successFile.name}</p>
               </label>
               <button
+                aria-label="remove"
                 id="cancel-shapefile-btn"
                 type="button"
                 className="flex items-center justify-center w-5 h-5 border border-white rounded-full group hover:bg-white border-opacity-20"
diff --git a/app/layout/projects/show/header/contributors/component.tsx b/app/layout/projects/show/header/contributors/component.tsx
index 2f86263c62..c95a310740 100644
--- a/app/layout/projects/show/header/contributors/component.tsx
+++ b/app/layout/projects/show/header/contributors/component.tsx
@@ -64,6 +64,7 @@ export const Contributors: React.FC<ContributorsProps> = () => {
 
               <li className="ml-3">
                 <button
+                  aria-label="add-contributor"
                   type="button"
                   onClick={() => {
                     console.info('Add contributor');
diff --git a/app/layout/scenarios/edit/analysis/cost-surface/component.tsx b/app/layout/scenarios/edit/analysis/cost-surface/component.tsx
index 8e363757d7..b0ba0c7c6b 100644
--- a/app/layout/scenarios/edit/analysis/cost-surface/component.tsx
+++ b/app/layout/scenarios/edit/analysis/cost-surface/component.tsx
@@ -134,6 +134,7 @@ export const ScenariosCostSurface: React.FC<ScenariosCostSurfaceProps> = ({
     >
       <header className="flex items-center pt-5 pb-1 space-x-3">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/edit/analysis/gap-analysis/component.tsx b/app/layout/scenarios/edit/analysis/gap-analysis/component.tsx
index 6f524bfd18..005383c3bc 100644
--- a/app/layout/scenarios/edit/analysis/gap-analysis/component.tsx
+++ b/app/layout/scenarios/edit/analysis/gap-analysis/component.tsx
@@ -33,6 +33,7 @@ export const ScenariosGapAnalysis: React.FC<ScenariosGapAnalysisProps> = ({
     >
       <header className="flex items-center pt-5 pb-1 space-x-3">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/edit/features/component.tsx b/app/layout/scenarios/edit/features/component.tsx
index 019f74cb1d..bd5d1c4bea 100644
--- a/app/layout/scenarios/edit/features/component.tsx
+++ b/app/layout/scenarios/edit/features/component.tsx
@@ -196,7 +196,7 @@ export const ScenariosSidebarEditFeatures: React.FC<ScenariosSidebarEditFeatures
                               your feature to be included in the solution.
                             </p>
                           </div>
-                          <h4 className="font-heading text-lg mb-2.5">What is the FPF?</h4>
+                          <h4 className="font-heading text-lg mt-5 mb-2.5">What is the FPF?</h4>
                           <div className="space-y-2">
                             <p>
                               FPF stands for
diff --git a/app/layout/scenarios/edit/wdpa/categories/component.tsx b/app/layout/scenarios/edit/wdpa/categories/component.tsx
index 3d36fecb66..dd00ce3309 100644
--- a/app/layout/scenarios/edit/wdpa/categories/component.tsx
+++ b/app/layout/scenarios/edit/wdpa/categories/component.tsx
@@ -31,7 +31,7 @@ export interface WDPACategoriesProps {
   onDismiss: () => void,
 }
 
-export const WDPACategories:React.FC<WDPACategoriesProps> = ({
+export const WDPACategories: React.FC<WDPACategoriesProps> = ({
   onSuccess,
   onDismiss,
 }: WDPACategoriesProps) => {
@@ -58,11 +58,11 @@ export const WDPACategories:React.FC<WDPACategoriesProps> = ({
     isFetched: wdpaIsFetched,
   } = useWDPACategories({
     adminAreaId: projectData?.adminAreaLevel2Id
-                 || projectData?.adminAreaLevel1I
-                 || projectData?.countryId,
+      || projectData?.adminAreaLevel1I
+      || projectData?.countryId,
     customAreaId: !projectData?.adminAreaLevel2Id
-                  && !projectData?.adminAreaLevel1I
-                  && !projectData?.countryId ? projectData?.planningAreaId : null,
+      && !projectData?.adminAreaLevel1I
+      && !projectData?.countryId ? projectData?.planningAreaId : null,
   });
 
   const { addToast } = useToasts();
@@ -279,7 +279,7 @@ export const WDPACategories:React.FC<WDPACategoriesProps> = ({
                                   <li>III: Natural Monument or Feature.</li>
                                   <li>IV: Habitat/Species Management Area.</li>
                                   <li>V: Protected Landscape/Seascape.</li>
-                                    <li>VI: Protected area with sustainable use of natural resources.</li> {/* eslint-disable-line*/}
+                                  <li>VI: Protected area with sustainable use of natural resources.</li> {/* eslint-disable-line*/}
                                 </ul>
                               </div>
                             </span>
@@ -287,37 +287,37 @@ export const WDPACategories:React.FC<WDPACategoriesProps> = ({
                         </div>
 
                         {WDPA_CATEGORIES_OPTIONS.length === 1 && (
-                        <Select
-                          theme="dark"
-                          size="base"
-                          placeholder="Select..."
-                          clearSelectionActive
-                          selected={values.wdpaIucnCategories.length
-                            ? values.wdpaIucnCategories[0]
-                            : null}
-                          options={WDPA_CATEGORIES_OPTIONS}
-                          onChange={(v) => {
-                            if (v) {
-                              flprops.input.onChange([v]);
-                            } else {
-                              flprops.input.onChange([]);
-                            }
-                          }}
-                        />
+                          <Select
+                            theme="dark"
+                            size="base"
+                            placeholder="Select..."
+                            clearSelectionActive
+                            selected={values.wdpaIucnCategories.length
+                              ? values.wdpaIucnCategories[0]
+                              : null}
+                            options={WDPA_CATEGORIES_OPTIONS}
+                            onChange={(v) => {
+                              if (v) {
+                                flprops.input.onChange([v]);
+                              } else {
+                                flprops.input.onChange([]);
+                              }
+                            }}
+                          />
                         )}
 
                         {WDPA_CATEGORIES_OPTIONS.length > 1 && (
-                        <Select
-                          theme="dark"
-                          size="base"
-                          multiple
-                          placeholder="Select..."
-                          clearSelectionActive={false}
-                          batchSelectionActive
-                          batchSelectionLabel="All protected areas"
-                          selected={values.wdpaIucnCategories}
-                          options={WDPA_CATEGORIES_OPTIONS}
-                        />
+                          <Select
+                            theme="dark"
+                            size="base"
+                            multiple
+                            placeholder="Select..."
+                            clearSelectionActive={false}
+                            batchSelectionActive
+                            batchSelectionLabel="All protected areas"
+                            selected={values.wdpaIucnCategories}
+                            options={WDPA_CATEGORIES_OPTIONS}
+                          />
                         )}
                       </Field>
                     )}
@@ -344,6 +344,7 @@ export const WDPACategories:React.FC<WDPACategoriesProps> = ({
                             </span>
 
                             <button
+                              aria-label="remove"
                               type="button"
                               className="flex items-center justify-center w-6 h-6 transition bg-transparent border border-gray-400 rounded-full hover:bg-gray-400"
                               onClick={() => {
diff --git a/app/layout/scenarios/show/analysis/gap-analysis/component.tsx b/app/layout/scenarios/show/analysis/gap-analysis/component.tsx
index f1403da952..578d30771f 100644
--- a/app/layout/scenarios/show/analysis/gap-analysis/component.tsx
+++ b/app/layout/scenarios/show/analysis/gap-analysis/component.tsx
@@ -33,6 +33,7 @@ export const ScenariosGapAnalysis: React.FC<ScenariosGapAnalysisProps> = ({
     >
       <header className="flex items-center pt-5 pb-1 space-x-3">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/show/solutions/details/component.tsx b/app/layout/scenarios/show/solutions/details/component.tsx
index 03b4608ead..4eaa5fbc78 100644
--- a/app/layout/scenarios/show/solutions/details/component.tsx
+++ b/app/layout/scenarios/show/solutions/details/component.tsx
@@ -85,6 +85,7 @@ export const ScenariosSolutionsDetails: React.FC<ScenariosSolutionsDetailsProps>
     >
       <header>
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full pt-5 pb-1 space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/show/solutions/gap-analysis/component.tsx b/app/layout/scenarios/show/solutions/gap-analysis/component.tsx
index a7417cc708..a3db24105d 100644
--- a/app/layout/scenarios/show/solutions/gap-analysis/component.tsx
+++ b/app/layout/scenarios/show/solutions/gap-analysis/component.tsx
@@ -32,6 +32,7 @@ export const ScenariosSolutionsGapAnalysis: React.FC<ScenariosSolutionsGapAnalys
     >
       <header className="flex items-center pt-5 pb-1">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full mr-2 space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/show/solutions/list/component.tsx b/app/layout/scenarios/show/solutions/list/component.tsx
index 0376ecf3b4..4cba221f68 100644
--- a/app/layout/scenarios/show/solutions/list/component.tsx
+++ b/app/layout/scenarios/show/solutions/list/component.tsx
@@ -21,6 +21,7 @@ export const ScenariosSolutionsGapAnalysis: React.FC<ScenariosSolutionsListProps
     >
       <header>
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full pt-5 pb-1 space-x-2 text-left focus:outline-none"
           onClick={() => {
diff --git a/app/layout/scenarios/show/solutions/table-form/component.tsx b/app/layout/scenarios/show/solutions/table-form/component.tsx
index 075330b288..7927b26b1e 100644
--- a/app/layout/scenarios/show/solutions/table-form/component.tsx
+++ b/app/layout/scenarios/show/solutions/table-form/component.tsx
@@ -108,11 +108,12 @@ export const SolutionsTableForm: React.FC<SolutionsTableFormProps> = ({
     <div className="relative flex flex-col flex-grow mt-8 overflow-hidden text-gray-800">
 
       <div className="relative flex flex-col flex-grow overflow-hidden overflow-x-hidden overflow-y-auto">
-        <div className="items-center px-8 pb-8 space-y-12 flex-column">
-          <div className="flex space-x-3">
-            <div className="flex-col">
-              <h2 className="mb-4 text-2xl font-heading">Solutions Table:</h2>
-              <div className="mr-20 space-y-4">
+        <div className="items-center px-8 pb-8 space-y-6 flex-column">
+
+          <div className="flex items-center space-x-3">
+            <h2 className="text-2xl font-heading">Solutions Table:</h2>
+            <InfoButton theme="secondary">
+              <div>
                 <p>
                   Each solution gives an alternative answer to your planning problem.
                   The result of each solution reflects whether a planning unit is
@@ -161,8 +162,9 @@ export const SolutionsTableForm: React.FC<SolutionsTableFormProps> = ({
                   </i>
                 </p>
               </div>
-            </div>
+            </InfoButton>
           </div>
+
           <div className="flex items-center justify-between space-x-8">
             <div className="flex items-center">
               <Checkbox
diff --git a/app/layout/sections/item/component.tsx b/app/layout/sections/item/component.tsx
index fc1a2cc3cf..0ce8079675 100644
--- a/app/layout/sections/item/component.tsx
+++ b/app/layout/sections/item/component.tsx
@@ -26,49 +26,50 @@ export const ScenariosSidebarAnalysisSection: React.FC<ScenariosSidebarAnalysisS
   return (
     !readonly && (
 
-    <button
-      type="button"
-      className="relative w-full py-5 pr-20 text-left focus:outline-none"
-      onMouseEnter={() => setAnimate('enter')}
-      onMouseLeave={() => setAnimate('leave')}
-      onClick={() => onChangeSection(id)}
-    >
-      <h4 className="text-xs uppercase font-heading">{name}</h4>
-      <p className="mt-1 text-sm text-gray-300">{description}</p>
+      <button
+        aria-label="change-section"
+        type="button"
+        className="relative w-full py-5 pr-20 text-left focus:outline-none"
+        onMouseEnter={() => setAnimate('enter')}
+        onMouseLeave={() => setAnimate('leave')}
+        onClick={() => onChangeSection(id)}
+      >
+        <h4 className="text-xs uppercase font-heading">{name}</h4>
+        <p className="mt-1 text-sm text-gray-300">{description}</p>
 
-      <motion.div
-        className="absolute transform -translate-y-1/2 right-4 top-1/2"
-        initial={{
-          opacity: 1,
-          x: 0,
-          y: '-50%',
-        }}
-        animate={animate}
-        variants={{
-          enter: {
-            opacity: 1,
-            x: 5,
-            y: '-50%',
-            transition: {
-              ease: 'easeInOut',
-              repeat: Infinity,
-              repeatType: 'mirror',
-              duration: 0.4,
-            },
-          },
-          leave: {
+        <motion.div
+          className="absolute transform -translate-y-1/2 right-4 top-1/2"
+          initial={{
             opacity: 1,
             x: 0,
             y: '-50%',
-            transition: {
-              ease: 'easeInOut',
+          }}
+          animate={animate}
+          variants={{
+            enter: {
+              opacity: 1,
+              x: 5,
+              y: '-50%',
+              transition: {
+                ease: 'easeInOut',
+                repeat: Infinity,
+                repeatType: 'mirror',
+                duration: 0.4,
+              },
             },
-          },
-        }}
-      >
-        <Icon icon={ARROW_RIGHT_2_SVG} className="w-5 h-5 opacity-75 text-primary-500" />
-      </motion.div>
-    </button>
+            leave: {
+              opacity: 1,
+              x: 0,
+              y: '-50%',
+              transition: {
+                ease: 'easeInOut',
+              },
+            },
+          }}
+        >
+          <Icon icon={ARROW_RIGHT_2_SVG} className="w-5 h-5 opacity-75 text-primary-500" />
+        </motion.div>
+      </button>
     )
   );
 };
diff --git a/app/layout/statics/contact/component.tsx b/app/layout/statics/contact/component.tsx
index 3e65ef61cf..bf5256c270 100644
--- a/app/layout/statics/contact/component.tsx
+++ b/app/layout/statics/contact/component.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import Button from 'components/button';
 import Wrapper from 'layout/wrapper';
 
+import Button from 'components/button';
+
 export interface StaticContactProps {
 
 }
@@ -19,7 +20,14 @@ export const StaticContact: React.FC<StaticContactProps> = () => {
             Help us strengthen Marxan.
           </p>
           <div className="w-44">
-            <Button href="mailto:marxancloud@gmail.com" size="lg" target="_blank" theme="transparent-black" type="submit" className="w-full">
+            <Button
+              href="mailto:marxancloud@gmail.com"
+              size="lg"
+              target="_blank"
+              theme="transparent-black"
+              type="submit"
+              className="w-full"
+            >
               Contact Us
             </Button>
           </div>
diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx
index 34e88c2d4a..c6b182c9b7 100644
--- a/app/pages/_document.tsx
+++ b/app/pages/_document.tsx
@@ -12,7 +12,7 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html>
+      <Html lang="en">
         <Head />
         <body className="text-white bg-black">
           <Main />