diff --git a/.astro/data-store.json b/.astro/data-store.json
index a6ce75a..89af071 100644
--- a/.astro/data-store.json
+++ b/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4],"astro-version","5.0.5"]
\ No newline at end of file
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.1.3","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
diff --git a/.astro/settings.json b/.astro/settings.json
index 04d14be..0bc35d5 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1733168096785
+		"lastUpdateCheck": 1736275209506
 	}
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index c15da8e..483e722 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
@@ -11,14 +11,14 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.0.2",
-    "@astrojs/partytown": "^2.1.2",
-    "@astrojs/tailwind": "^5.1.3",
+    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/partytown": "^2.1.3",
+    "@astrojs/tailwind": "^5.1.4",
     "@iconify-json/ion": "^1.2.1",
     "@iconify-json/mdi": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "astro": "^5.0.5",
+    "astro": "^5.1.3",
     "astro-compress": "^2.3.5",
     "astro-icon": "^1.1.4",
     "eslint": "^8.57.0",
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index c6740bb..ae66785 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -71,7 +71,6 @@ const {
       html,
       body {
         height: 100%;
-        overflow-x: hidden;
       }
 
       body {
@@ -79,6 +78,7 @@ const {
         flex-direction: column;
         color: var(--font-color);
         background-color: var(--background);
+        overflow-x: hidden;
 
         main {
           flex: 1 0 auto;
diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro
index cb92565..e6b4c4d 100644
--- a/src/pages/accessible-components.astro
+++ b/src/pages/accessible-components.astro
@@ -24,7 +24,7 @@ import {
       <h1>Accessible Components</h1>
       <p class="text-2xl">
         This theme has a lot of extra a11y components provided by the <a
-          href="https://github.com/markteekman/accessible-astro-components">Accessible Astro Component</a
+          href="https://github.com/markteekman/accessible-astro-components">Accessible Astro Components</a
         > NPM package to help you build accessible pages faster:
       </p>
     </div>
@@ -159,23 +159,23 @@ import {
           <Notification>
             <Icon name="ion:notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
           </Notification>
-          <Notification type="info">
+          <Notification role="status" type="info">
             <Icon name="ion:information-circle-outline" /><p>
               <strong>Info:</strong> This is a notification of type info.
             </p>
           </Notification>
-          <Notification type="success">
+          <Notification role="status" type="success">
             <Icon name="ion:checkbox-outline" /><p>
               <strong>Success:</strong> This is a notification of type success.
             </p>
           </Notification>
-          <Notification type="warning">
+          <Notification role="status" type="warning">
             <Icon name="ion:warning-outline" /><p>
               <strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that
               looks.
             </p>
           </Notification>
-          <Notification type="error">
+          <Notification role="alert" type="error">
             <Icon name="ion:alert-circle-outline" /><p>
               <strong>Error:</strong> This is a notification of type error.
             </p>