diff --git a/src/content/docs/en/tutorial/2-pages/4.mdx b/src/content/docs/en/tutorial/2-pages/4.mdx
index 0856367e0df97..d2c96271a7a41 100644
--- a/src/content/docs/en/tutorial/2-pages/4.mdx
+++ b/src/content/docs/en/tutorial/2-pages/4.mdx
@@ -109,7 +109,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     const finished = false;
     const goal = 3;
   
-    const skillColor = "navy";
+    const skillColor = "crimson";
     ---
     ```
 
@@ -129,7 +129,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     </style>
     ```
 
-3. Check your About page in your browser preview. You should see that the skills are now navy blue, as set by the `skillColor` variable passed to the `define:vars` directive.
+3. Check your About page in your browser preview. You should see that the skills are now crimson red, as set by the `skillColor` variable passed to the `define:vars` directive.
 </Steps>
 
 <Box icon="puzzle-piece">
@@ -154,7 +154,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     ```
  
  2. Add any missing variable definitions in your frontmatter script so that your new `<style>` tag successfully applies these styles to your list of skills:
-    - The text color is navy blue
+    - The text color is crimson red
     - The text is bold
     - The list items are in all-caps (all uppercase letters)
 </Steps>
@@ -178,7 +178,7 @@ const happy = true;
 const finished = false;
 const goal = 3;
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---
diff --git a/src/content/docs/en/tutorial/2-pages/5.mdx b/src/content/docs/en/tutorial/2-pages/5.mdx
index 9fc709c9ee97f..72e3a7bbc47b3 100644
--- a/src/content/docs/en/tutorial/2-pages/5.mdx
+++ b/src/content/docs/en/tutorial/2-pages/5.mdx
@@ -74,7 +74,7 @@ There are a few ways to define styles **globally** in Astro, but in this tutoria
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     const fontWeight = "bold";
     const textCase = "uppercase";
     ---
diff --git a/src/content/docs/en/tutorial/3-components/3.mdx b/src/content/docs/en/tutorial/3-components/3.mdx
index 16613c1df0023..22107f2673391 100644
--- a/src/content/docs/en/tutorial/3-components/3.mdx
+++ b/src/content/docs/en/tutorial/3-components/3.mdx
@@ -49,9 +49,6 @@ Since your site will be viewed on different devices, it's time to create a page
 
 </Box>
 
-
-
-
 <Box icon="puzzle-piece">
 
 ## Try it yourself - Update your pages
@@ -95,12 +92,12 @@ Since your site will be viewed on different devices, it's time to create a page
 ## Add responsive styles
 
 <Steps>
-1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `<div>` with the class `nav-links`.
+1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `<div>` with the class `nav-links` and the id attribute set to `main-menu`.
 
     ```astro title="src/components/Navigation.astro" ins={3,7}
     ---
     ---
-    <div class="nav-links">
+    <div id="main-menu" class="nav-links">
       <a href="/">Home</a>
       <a href="/about">About</a>
       <a href="/blog">Blog</a>
@@ -117,7 +114,7 @@ Since your site will be viewed on different devices, it's time to create a page
     Start by defining what should happen on small screen sizes first! Smaller screen sizes require simpler layouts. Then, adjust your styles to accommodate larger devices. If you design the complicated case first, then you have to work to try to make it simple again.
     :::
 
-    ```css title="src/styles/global.css" ins={23-100}
+    ```css title="src/styles/global.css" ins={23-60}
     html {
       background-color: #f1f5f9;
       font-family: sans-serif;
@@ -144,9 +141,6 @@ Since your site will be viewed on different devices, it's time to create a page
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -159,6 +153,7 @@ Since your site will be viewed on different devices, it's time to create a page
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
@@ -166,10 +161,6 @@ Since your site will be viewed on different devices, it's time to create a page
       background-color: #ff9776;
     }
 
-    .expanded {
-      display: unset;
-    }
-
     @media screen and (min-width: 636px) {
       .nav-links {
         margin-left: 5em;
@@ -183,15 +174,12 @@ Since your site will be viewed on different devices, it's time to create a page
         display: inline-block;
         padding: 15px 20px;
       }
-
     }
     ```
 </Steps>
 
 Resize your window and look for different styles being applied at different screen widths. Your header is now **responsive** to screen size through the use of `@media` queries.
 
-
-
 <Box icon="check-list">
 
 ## Checklist
diff --git a/src/content/docs/en/tutorial/3-components/4.mdx b/src/content/docs/en/tutorial/3-components/4.mdx
index 8b07585a38fcd..669ce63ea52da 100644
--- a/src/content/docs/en/tutorial/3-components/4.mdx
+++ b/src/content/docs/en/tutorial/3-components/4.mdx
@@ -16,75 +16,66 @@ import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Let's add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!
+Let's add a button to open and close your navigation menu on mobile screen sizes, requiring some client-side interactivity!
 
 <PreCheck>
-  - Create a hamburger menu component
+  - Create a menu component
   - Write a `<script>` to allow your site visitors to open and close the navigation menu
   - Move your JavaScript to its `.js` file
 </PreCheck>
 
-## Build a Hamburger component
+## Build a Menu component
 
-Create a `<Hamburger />` component to open and close your mobile menu.
+Create a `<Menu />` component to open and close your mobile menu.
 
 <Steps>
-1. Create a file named `Hamburger.astro` in `src/components/`
+1. Create a file named `Menu.astro` in `src/components/`
   
 
-2. Copy the following code into your component. This will represent your 3-line "hamburger" menu to open and close your navigation links on mobile. (You will add the new CSS styles to `global.css` later.)
+2. Copy the following code into your component. It creates a button that will be used to toggle the visibility of the navigation links on mobile devices. (You will add the new CSS styles to `global.css` later.)
 
-    ```astro title="src/components/Hamburger.astro"
+    ```astro title="src/components/Menu.astro"
     --- 
     ---
-    <div class="hamburger">
-      <span class="line"></span>
-      <span class="line"></span>
-      <span class="line"></span>
-    </div>
+    <button aria-expanded="false" aria-controls="main-menu" class="menu">
+      Menu
+    </button>
     ```
 
-3. Place this new `<Hamburger />` component just before your `<Navigation />` component in `Header.astro`. 
+3. Place this new `<Menu />` component just before your `<Navigation />` component in `Header.astro`. 
 
     <details>
     <summary>Show me the code!</summary>
 
     ```astro title="src/components/Header.astro" ins={2,7}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
+        <Menu />
         <Navigation />
       </nav>
     </header>
     ```
     </details>
 
-4. Add the following styles for your Hamburger component:
+4. Add the following styles for your Menu component, including some responsive styles:
 
-    ```css title="src/styles/global.css" ins={2-13, 56-58}
+    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
     /* nav styles */
-    .hamburger {
-      padding-right: 20px;
-      cursor: pointer;
-    }
-
-    .hamburger .line {
-      display: block;
-      width: 40px;
-      height: 5px;
-      margin-bottom: 10px;
-      background-color: #ff9776;
+    .menu {
+      background-color: #0d0950;
+      border: none;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      padding: 5px 10px;
     }
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -97,13 +88,15 @@ Create a `<Hamburger />` component to open and close your mobile menu.
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
-    .nav-links a:hover, a:focus {
+    .nav-links a:hover,
+    .nav-links a:focus{
       background-color: #ff9776;
     }
 
-    .expanded {
+    :has(.menu[aria-expanded="true"]) .nav-links {
       display: unset;
     }
 
@@ -121,7 +114,7 @@ Create a `<Hamburger />` component to open and close your mobile menu.
         padding: 15px 20px;
       }
 
-      .hamburger {
+      .menu {
         display: none;
       }
     }
@@ -131,18 +124,21 @@ Create a `<Hamburger />` component to open and close your mobile menu.
 
 ## Write your first script tag
 
-Your header is not yet **interactive** because it can't respond to user input, like clicking on the hamburger menu to show or hide the navigation links. 
+Your header is not yet **interactive** because it can't respond to user input, like clicking on the menu to show or hide the navigation links. 
 
 Adding a `<script>` tag provides client-side JavaScript to "listen" for a user event and then respond accordingly.
 
 <Steps>
 1. Add the following `<script>` tag to `index.astro`, just before the closing `</body>` tag.
 
-    ```astro title="src/pages/index.astro" ins={2-6}
+    ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
       </script>
     </body>
@@ -159,18 +155,24 @@ Instead of writing your JavaScript directly on each page, you can move the conte
 1. Create `src/scripts/menu.js` (you will have to create a new `/scripts/` folder) and move your JavaScript into it.
 
     ```js title="src/scripts/menu.js"
-    document.querySelector('.hamburger').addEventListener('click', () => {
-      document.querySelector('.nav-links').classList.toggle('expanded');
+    const menu = document.querySelector('.menu');
+
+    menu.addEventListener('click', () => {
+      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+      menu.setAttribute('aria-expanded', !isExpanded);
     });
     ```
 
 2. Replace the contents of the `<script>` tag on `index.astro` with the following file import:
 
-    ```astro title="src/pages/index.astro" ins={7} del={3-5}
+    ```astro title="src/pages/index.astro" ins={10} del={3-8}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
 
         import "../scripts/menu.js";
@@ -178,7 +180,7 @@ Instead of writing your JavaScript directly on each page, you can move the conte
     </body>
     ```
 
-3. Check your browser preview again at a smaller size and verify that the hamburger menu still opens and closes your navigation links. 
+3. Check your browser preview again at a smaller size and verify that the menu still opens and closes your navigation links. 
 
 
 4. Add the same `<script>` with import to your other two pages, `about.astro` and `blog.astro` and verify that you have a responsive, interactive header on each page.
diff --git a/src/content/docs/en/tutorial/3-components/index.mdx b/src/content/docs/en/tutorial/3-components/index.mdx
index 659faa9d697ea..e9e958628f6fa 100644
--- a/src/content/docs/en/tutorial/3-components/index.mdx
+++ b/src/content/docs/en/tutorial/3-components/index.mdx
@@ -26,7 +26,7 @@ You'll build:
 - A Navigation component that presents a menu of links to your pages 
 - A Footer component to include at the bottom of each page
 - A Social Media component, used in the Footer, that links to profile pages
-- An interactive Hamburger component to toggle the Navigation on mobile
+- An interactive Menu component to toggle the Navigation on mobile
 
 Along the way, you'll use CSS and JavaScript to build a responsive design that reacts to screen sizes and user input.
 
diff --git a/src/content/docs/en/tutorial/6-islands/2.mdx b/src/content/docs/en/tutorial/6-islands/2.mdx
index c62e08b816e48..6a9d41468ed25 100644
--- a/src/content/docs/en/tutorial/6-islands/2.mdx
+++ b/src/content/docs/en/tutorial/6-islands/2.mdx
@@ -30,8 +30,8 @@ Let's build a clickable icon to let your users toggle between light or dark mode
     ```astro title="src/components/ThemeIcon.astro"
     ---
     ---
-    <button id="themeToggle">
-      <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <button id="themeToggle" aria-label="Toggle theme">
+      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
         <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
       </svg>
@@ -50,21 +50,30 @@ Let's build a clickable icon to let your users toggle between light or dark mode
     </style>
     ```
 
-2. Add the icon to `Header.astro` so that it will be displayed on all pages. Don't forget to import the component.
+2. Import and add the `<ThemeIcon  />` component to `Header.astro` so that it will be displayed on all pages. Wrap both `<ThemeIcon />` and `<Menu />` inside a `<div>` to group them together for styling, and add the `<style>` tag as shown below for some basic styles to improve the layout.
 
-    ```astro title="src/components/Header.astro" ins={4,9}
+    ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     import ThemeIcon from './ThemeIcon.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
-        <ThemeIcon />
+        <div>
+          <ThemeIcon />
+          <Menu />
+        </div>
         <Navigation />
       </nav>
     </header>
+
+    <style>
+      div {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
     ```
 
 3. Visit your browser preview at `http://localhost:4321` to see the icon now on all your pages. You can try clicking it, but you have not written a script to make it interactive yet.
@@ -83,12 +92,34 @@ Choose some alternate colors to use in dark mode.
       color: #fff;
     }
 
+    .dark .menu {
+      background-color: #fff;
+      color: #000;
+    }
+
+    .dark .nav-links a:hover,
+    .dark .nav-links a:focus {
+      color: #0d0950;
+    }
+
     .dark .nav-links a {
       color: #fff;
     }
+
+    .dark a {
+      color: #ff9776;
+    }
     ```
 </Steps>
 
+:::tip[Check colors for accessibility]
+When you update your site to include dark mode, some colors used may need updating.
+
+Always check your rendered site when adding new styles and colors, and make adjustments when necessary! This can mean adding more `.dark` CSS style rules to display different styles in dark mode, or you may wish to update some colors so that they work equally well in both themes.
+
+Consider using accessibility tools such as a contrast checker when creating a set of colors for your site. Or, you can run a check on your website with a browser extension to spot any potential issues.
+:::
+
 ## Add client-side interactivity
 
 To add interactivity to an Astro component, you can use a `<script>` tag. This script can check and set the current theme from `localStorage` and toggle the theme when the icon is clicked. 
diff --git a/src/content/docs/en/tutorial/6-islands/3.mdx b/src/content/docs/en/tutorial/6-islands/3.mdx
index c974c3fde56f7..c4bd9513bf533 100644
--- a/src/content/docs/en/tutorial/6-islands/3.mdx
+++ b/src/content/docs/en/tutorial/6-islands/3.mdx
@@ -33,7 +33,7 @@ const identity = {
   hobbies: ["photography", "birdwatching", "baseball"],
 };
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---