diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7101d54..a200d20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.1...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.2...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.2.2](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.1...v0.2.2) - 2024-07-24
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.2.2`
+
 ## [0.2.1](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.0...v0.2.1) - 2024-07-19
 
 ### Changed
diff --git a/package-lock.json b/package-lock.json
index 2279aac..a400292 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@nationalarchives/frontend": "0.2.1",
+        "@nationalarchives/frontend": "0.2.2",
         "diff": "^5.1.0",
         "glob": "^10.2.7",
         "js-beautify": "^1.14.8",
@@ -30,9 +30,9 @@
       }
     },
     "node_modules/@nationalarchives/frontend": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@nationalarchives/frontend/-/frontend-0.2.1.tgz",
-      "integrity": "sha512-GGfmTceC2Tb/Ff39sqMHX3ilopKMDVgc13H0o6NuR0g3kNGA+BqjlO35sP2fASa7HMjCUSsAQ0L5+wH3PqPj3Q=="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@nationalarchives/frontend/-/frontend-0.2.2.tgz",
+      "integrity": "sha512-82teUgYYEs5I3yA8PQcdqC5d+yIlveTOrng1FZFl40/McolmSBGchEpniXYGNq8Fj+VNlhfDpx23qiR6ryhDRA=="
     },
     "node_modules/@one-ini/wasm": {
       "version": "0.1.1",
diff --git a/package.json b/package.json
index c569207..56118d6 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.2.1",
+    "@nationalarchives/frontend": "0.2.2",
     "diff": "^5.1.0",
     "glob": "^10.2.7",
     "js-beautify": "^1.14.8",
diff --git a/setup.py b/setup.py
index 6d21ff3..be232a3 100644
--- a/setup.py
+++ b/setup.py
@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="tna-frontend-jinja",
-    version="0.2.1",
+    version="0.2.2",
     author="Andrew Hosgood",
     author_email="andrew.hosgood@nationalarchives.gov.uk",
     description="TNA Frontend Jinja templates",
diff --git a/tna_frontend_jinja/templates/components/gallery/macro.html b/tna_frontend_jinja/templates/components/gallery/macro.html
index 7d1e8b3..0b22ba1 100644
--- a/tna_frontend_jinja/templates/components/gallery/macro.html
+++ b/tna_frontend_jinja/templates/components/gallery/macro.html
@@ -3,7 +3,7 @@
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<section class="tna-gallery{% if classes %} {{ classes }}{% endif %}" data-module="tna-gallery" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+<section class="tna-gallery{% if classes %} {{ classes }}{% endif %}" data-module="tna-gallery" {%- if params.showGrid %} data-showgrid="true"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <div class="tna-gallery__header">
     <div class="tna-gallery__header-inner">
       <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }}">
@@ -17,33 +17,36 @@
     </div>
     <div class="tna-gallery__options tna-button-group tna-button-group--small" hidden>
       {{ tnaButton({
-        'text': 'See all images',
-        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z"/></svg>',
+        'text': 'Full screen',
+        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>',
+        'title': 'Full screen',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
           'hidden': '',
-          'value': 'show-index'
+          'value': 'enter-fullscreen'
         }
       }) | indent(6) }}
       {{ tnaButton({
-        'text': 'Full screen',
-        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>',
+        'text': 'Exit full screen',
+        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>',
+        'title': 'Exit full screen',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
           'hidden': '',
-          'value': 'enter-fullscreen'
+          'value': 'exit-fullscreen'
         }
       }) | indent(6) }}
       {{ tnaButton({
-        'text': 'Exit full screen',
-        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>',
+        'text': 'See all images',
+        'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z"/></svg>',
+        'title': 'See all images',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
           'hidden': '',
-          'value': 'exit-fullscreen'
+          'value': 'show-index'
         }
       }) | indent(6) }}
     </div>
diff --git a/tna_frontend_jinja/templates/components/warning/macro.html b/tna_frontend_jinja/templates/components/warning/macro.html
index 7a603b0..61e918a 100644
--- a/tna_frontend_jinja/templates/components/warning/macro.html
+++ b/tna_frontend_jinja/templates/components/warning/macro.html
@@ -2,8 +2,7 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-warning {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <h{{ params.headingLevel }} class="tna-warning__heading">
-    <span class="tna-visually-hidden">{{ params.heading or 'Important information' }}</span>
-    <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
+    <span class="tna-visually-hidden">{{ params.heading or 'Important information' }}</span><span class="tna-warning__heading-icon" aria-hidden="true">!</span>
   </h{{ params.headingLevel }}>
   <div class="tna-warning__body">
     {{ params.body | safe }}