diff --git a/src/markdown/tutorial/part-1/01-orientation.md b/src/markdown/tutorial/part-1/01-orientation.md
index ed08a73..11493c4 100644
--- a/src/markdown/tutorial/part-1/01-orientation.md
+++ b/src/markdown/tutorial/part-1/01-orientation.md
@@ -46,12 +46,12 @@ Hack: make an empty package.json to convince ember-cli we are really not in an E
 # pretend we are running NPM.
 
 #[cfg(all(ci, unix))]
-#[display(ember new super-rentals --lang en --strict)]
-ember new super-rentals --lang en --strict --pnpm \
+#[display(ember new super-rentals --lang en)]
+ember new super-rentals --lang en --pnpm \
   | awk '{ gsub("Pnpm", "npm"); gsub("pnpm", "npm"); print }'
 
 #[cfg(not(all(ci, unix)))]
-ember new super-rentals --lang en --strict --pnpm
+ember new super-rentals --lang en --pnpm
 ```
 
 ```run:command hidden=true
@@ -196,7 +196,7 @@ del package.json
 
 ```run:file:patch hidden=true cwd=super-rentals filename=.prettierignore
 @@ -1 +1,2 @@
-+**/*.gjs
++**/*.hbs
  # unconventional js
 
 ```
@@ -277,24 +277,20 @@ You can exit out of the development server at any time by typing `Ctrl + C` into
 
 The development server has a feature called *live reload*, which monitors your app for file changes, automatically re-compiles everything, and refreshes any open browser pages. This comes in really handy during development, so let's give that a try!
 
-As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.gjs`. Let's try to edit that file and replace it with our own content:
+As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.hbs`. Let's try to edit that file and replace it with our own content:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/application.gjs
-@@ -1,12 +1,3 @@
--import pageTitle from 'ember-page-title/helpers/page-title';
--import WelcomePage from 'ember-welcome-page/components/welcome-page';
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/application.hbs
+@@ -1,7 +1 @@
+-{{page-title "SuperRentals"}}
 -
- <template>
--  {{pageTitle "SuperRentals"}}
+-{{outlet}}
 -
--  {{outlet}}
--
--  {{! The following component displays Ember's default welcome message. }}
--  <WelcomePage />
--  {{! Feel free to remove this! }}
-+  Hello World!!!
- </template>
- ```
+-{{! The following component displays Ember's default welcome message. }}
+-<WelcomePage />
+-{{! Feel free to remove this! }}
+\ No newline at end of file
++Hello World!!!
+```
 
 Soon after saving the file, your browser should automatically refresh and render our greetings to the world. Neat!
 
@@ -302,29 +298,27 @@ Soon after saving the file, your browser should automatically refresh and render
 visit http://localhost:4200/?deterministic
 ```
 
-When you are done experimenting, go ahead and delete the `app/templates/application.gjs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
+When you are done experimenting, go ahead and delete the `app/templates/application.hbs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
 
 ```run:command hidden=true cwd=super-rentals
-git rm -f app/templates/application.gjs
+git rm -f app/templates/application.hbs
 ```
 
 Again, if you still have your browser tab open, your tab will automatically re-render a blank page as soon as you delete the file. This reflects the fact that we no longer have an application template in our app.
 
 ## Working with HTML, CSS and Assets in an Ember App
 
-Create a `app/templates/index.gjs` file and paste the following markup.
+Create a `app/templates/index.hbs` file and paste the following markup.
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>Welcome to Super Rentals!</h2>
-    <p>We hope you find exactly what you're looking for in a place to stay.</p>
-  </div>
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Welcome to Super Rentals!</h2>
+  <p>We hope you find exactly what you're looking for in a place to stay.</p>
+</div>
 ```
 
-If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML wrapped in a `<template>` tag. If you are already familiar with HTML, you should feel right at home here.
+If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML. If you are already familiar with HTML, you should feel right at home here.
 
 Of course, unlike HTML, Ember templates can do a lot more than just displaying static content. We will see that in action soon.
 
@@ -335,7 +329,7 @@ visit http://localhost:4200/?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 Before we do anything else, let's add some styling to our app. We spend enough time staring at the computer screen as it is, so we must protect our eyesight against unstyled markup!
diff --git a/src/markdown/tutorial/part-1/02-building-pages.md b/src/markdown/tutorial/part-1/02-building-pages.md
index d26bc10..cd5d8cb 100644
--- a/src/markdown/tutorial/part-1/02-building-pages.md
+++ b/src/markdown/tutorial/part-1/02-building-pages.md
@@ -45,20 +45,18 @@ git add app/router.js
 
 ## Using Route Templates
 
-With that in place, we can create a new `app/templates/about.gjs` template with the following content:
+With that in place, we can create a new `app/templates/about.hbs` template with the following content:
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>About Super Rentals</h2>
-    <p>
-      The Super Rentals website is a delightful project created to explore Ember.
-      By building a property rental site, we can simultaneously imagine traveling
-      AND building Ember applications.
-    </p>
-  </div>
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>About Super Rentals</h2>
+  <p>
+    The Super Rentals website is a delightful project created to explore Ember.
+    By building a property rental site, we can simultaneously imagine traveling
+    AND building Ember applications.
+  </p>
+</div>
 ```
 
 To see this in action, navigate to `http://localhost:4200/about`.
@@ -68,7 +66,7 @@ visit http://localhost:4200/about?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/about.gjs
+git add app/templates/about.hbs
 ```
 
 With that, our second page is done!
@@ -92,28 +90,26 @@ Here, we added the `contact` route, but explicitly specified a path for the rout
 git add app/router.js
 ```
 
-Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file:
+Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file:
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>Contact Us</h2>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Contact Us</h2>
+  <p>
+    Super Rentals Representatives would love to help you<br>
+    choose a destination or answer any questions you may have.
+  </p>
+  <address>
+    Super Rentals HQ
     <p>
-      Super Rentals Representatives would love to help you<br>
-      choose a destination or answer any questions you may have.
+      1212 Test Address Avenue<br>
+      Testington, OR 97233
     </p>
-    <address>
-      Super Rentals HQ
-      <p>
-        1212 Test Address Avenue<br>
-        Testington, OR 97233
-      </p>
-      <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
-      <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
-    </address>
-  </div>
-</template>
+    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
+    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
+  </address>
+</div>
 ```
 
 Ember comes with strong *[conventions][TODO: link to conventions]* and sensible defaults&mdash;if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs!
@@ -125,7 +121,7 @@ visit http://localhost:4200/getting-in-touch?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/contact.gjs
+git add app/templates/contact.hbs
 ```
 
 ## Linking Pages with the `<LinkTo>` Component
@@ -136,43 +132,30 @@ Since Ember offers great support for URLs out-of-the-box, we *could* just link o
 
 With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -5,2 +7,3 @@
-     <p>We hope you find exactly what you're looking for in a place to stay.</p>
-+    <LinkTo @route="about" class="button">About Us</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -4,2 +4,3 @@
+   <p>We hope you find exactly what you're looking for in a place to stay.</p>
++  <LinkTo @route="about" class="button">About Us</LinkTo>
+ </div>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -9,2 +11,3 @@
-     </p>
-+    <LinkTo @route="contact" class="button">Contact Us</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+@@ -8,2 +8,3 @@
+   </p>
++  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
+ </div>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -17,2 +19,3 @@
-     </address>
-+    <LinkTo @route="about" class="button">About</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+@@ -16,2 +16,3 @@
+   </address>
++  <LinkTo @route="about" class="button">About</LinkTo>
+ </div>
 ```
 
-
 There is quite a bit going on here, so let's break it down.
 
-`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.
+`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember&mdash;you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
 
 We have a lot more to say about components later, but for now, you can think of them as a way to provide *[custom tags][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
 
@@ -199,9 +182,9 @@ visit http://localhost:4200/getting-in-touch?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/index.gjs
-git add app/templates/about.gjs
-git add app/templates/contact.gjs
+git add app/templates/index.hbs
+git add app/templates/about.hbs
+git add app/templates/contact.hbs
 ```
 
 We will learn more about how all of this works soon. In the meantime, go ahead and click on the link in the browser. Did you notice how snappy that was?
diff --git a/src/markdown/tutorial/part-1/03-automated-testing.md b/src/markdown/tutorial/part-1/03-automated-testing.md
index 2713709..efde175 100644
--- a/src/markdown/tutorial/part-1/03-automated-testing.md
+++ b/src/markdown/tutorial/part-1/03-automated-testing.md
@@ -120,17 +120,13 @@ wait  #qunit-banner.qunit-pass
 
 It happens really quickly though&mdash;blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it in action. I told you the robot has really, really fast hands!
 
-As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
+As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
 
-```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.gjs
-@@ -1,3 +1 @@
--import { LinkTo } from '@ember/routing'; 
--
- <template>
-@@ -7,3 +5,2 @@ import { LinkTo } from '@ember/routing';
-     <p>We hope you find exactly what you're looking for in a place to stay.</p>
--    <LinkTo @route="about" class="button">About Us</LinkTo>
-   </div>
+```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.hbs
+@@ -4,3 +4,2 @@
+   <p>We hope you find exactly what you're looking for in a place to stay.</p>
+-  <LinkTo @route="about" class="button">About Us</LinkTo>
+ </div>
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=fail.png alt="A failing test"
@@ -141,7 +137,7 @@ wait  #qunit-banner.qunit-fail
 Don't forget to put that line back in when you are done!
 
 ```run:command hidden=true cwd=super-rentals
-git checkout app/templates/index.gjs
+git checkout app/templates/index.hbs
 ember test --path dist
 ```
 
diff --git a/src/markdown/tutorial/part-1/04-component-basics.md b/src/markdown/tutorial/part-1/04-component-basics.md
index 56b8bb0..88aa803 100644
--- a/src/markdown/tutorial/part-1/04-component-basics.md
+++ b/src/markdown/tutorial/part-1/04-component-basics.md
@@ -33,22 +33,24 @@ During the course of developing an app, it is pretty common to reuse the same UI
 
 Since it is not a lot of code, it may not seem like a big deal to duplicate this structure on each page. However, if our designer wanted us to make a change to the header, we would have to find and update every single copy of this code. As our app gets bigger, this will become even more of a problem.
 
-Components are the perfect solution to this. In its most basic form, a component is just a piece of template that can be referred to by name. Let's start by creating a new file at `app/components/jumbo.gjs` with markup for the "jumbo" header:
+Components are the perfect solution to this. In its most basic form, a component is just a piece of template that can be referred to by name. Let's start by creating a new file at `app/components/jumbo.hbs` with markup for the "jumbo" header:
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/components/jumbo.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    {{yield}}
-  </div>
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/components/jumbo.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  {{yield}}
+</div>
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/components/jumbo.gjs
+git add app/components/jumbo.hbs
 ```
 
-That's it, we have created our first component! We can now *[invoke][TODO: link to invoke]* this component anywhere in our app, by importing it and using it like we saw with `<LinkTo>` previously.
+That's it, we have created our first component! We can now *[invoke][TODO: link to invoke]* this component anywhere in our app, using `<Jumbo>` as the tag name.
+
+> Zoey says...
+>
+> Remember, when invoking components, we need to capitalize their names so Ember can tell them apart from regular HTML elements. The `jumbo.hbs` template corresponds to the `<Jumbo>` tag, just like `super-awesome.hbs` corresponds to `<SuperAwesome>`.
 
 ## Passing Content to Components with `{{yield}}`
 
@@ -56,22 +58,16 @@ When invoking a component, Ember will replace the component tag with the content
 
 Let's try it out by editing the index template:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -1,6 +1,6 @@
--import { LinkTo } from '@ember/routing'; 
-+import { LinkTo } from '@ember/routing';
-+import Jumbo from 'super-rentals/components/jumbo';
- 
- <template>
--  <div class="jumbo">
--    <div class="right tomster"></div>
-+  <Jumbo>
-     <h2>Welcome to Super Rentals!</h2>
-@@ -8,3 +8,3 @@ import { LinkTo } from '@ember/routing';
-     <LinkTo @route="about" class="button">About Us</LinkTo>
--  </div>
-+  </Jumbo>
- </template>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -1,3 +1,2 @@
+-<div class="jumbo">
+-  <div class="right tomster"></div>
++<Jumbo>
+   <h2>Welcome to Super Rentals!</h2>
+@@ -5,2 +4,2 @@
+   <LinkTo @route="about" class="button">About Us</LinkTo>
+-</div>
++</Jumbo>
 ```
 
 ## Refactoring Existing Code
@@ -89,47 +85,45 @@ wait  #qunit-banner.qunit-pass
 
 Let's do the same for our other two pages as well.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-@@ -1,6 +1,6 @@
- import { LinkTo } from '@ember/routing'; 
-+import Jumbo from 'super-rentals/components/jumbo';
- 
- <template>
--  <div class="jumbo">
--    <div class="right tomster"></div>
-+  <Jumbo>
-     <h2>About Super Rentals</h2>
-@@ -12,3 +12,3 @@ import { LinkTo } from '@ember/routing';
-     <LinkTo @route="contact" class="button">Contact Us</LinkTo>
--  </div>
-+  </Jumbo>
- </template>
-```
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-@@ -1,6 +1,6 @@
- import { LinkTo } from '@ember/routing'; 
-+import Jumbo from 'super-rentals/components/jumbo';
- 
- <template>
--  <div class="jumbo">
--    <div class="right tomster"></div>
-+  <Jumbo>
-     <h2>Contact Us</h2>
-@@ -20,3 +20,3 @@ import { LinkTo } from '@ember/routing';
-     <LinkTo @route="about" class="button">About</LinkTo>
--  </div>
-+  </Jumbo>
- </template>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+@@ -1,5 +1,4 @@
+-<div class="jumbo">
+-  <div class="right tomster"></div>
++<Jumbo>
+   <h2>About Super Rentals</h2>
+   <p>
+     The Super Rentals website is a delightful project created to explore Ember.
+@@ -7,4 +6,4 @@
+     AND building Ember applications.
+   </p>
+   <LinkTo @route="contact" class="button">Contact Us</LinkTo>
+-</div>
++</Jumbo>
+```
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+@@ -1,5 +1,4 @@
+-<div class="jumbo">
+-  <div class="right tomster"></div>
++<Jumbo>
+   <h2>Contact Us</h2>
+   <p>
+     Super Rentals Representatives would love to help you<br>
+@@ -15,4 +14,4 @@
+     <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
+   </address>
+   <LinkTo @route="about" class="button">About</LinkTo>
+-</div>
++</Jumbo>
 ```
 
 After saving, everything should look exactly the same as before, and all the tests should still pass. Very nice!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/templates/index.gjs
-git add app/templates/about.gjs
-git add app/templates/contact.gjs
+git add app/templates/index.hbs
+git add app/templates/about.hbs
+git add app/templates/contact.hbs
 ```
 
 ```run:screenshot width=1024 retina=true filename=about.png alt="About page – nothing changed"
@@ -156,39 +150,38 @@ ember generate component-test jumbo
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/jumbo-test.gjs
+git add tests/integration/components/jumbo-test.js
 ```
 
 Here, we used the generator to generate a *[component test](../../../testing/testing-components/)*, also known as a rendering test. These are used to render and test a single component at a time. This is in contrast to the acceptance tests that we wrote earlier, which have to navigate and render entire pages worth of content.
 
 Let's replace the boilerplate code that was generated for us with our own test:
 
-```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/jumbo-test.gjs
-@@ -8,20 +8,10 @@ module('Integration | Component | jumbo', function (hooks) {
- 
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/jumbo-test.js
+@@ -8,18 +8,8 @@
+
 -  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
 -
--    await render(<template><Jumbo /></template>);
+-    await render(hbs`<Jumbo />`);
 -
 -    assert.dom().hasText('');
 -
 -    // Template block usage:
-+  test('it renders the content inside a jumbo header with a tomster', async function (assert) {
-     await render(<template>
+-    await render(hbs`
 -      <Jumbo>
 -        template block text
 -      </Jumbo>
-+      <Jumbo>Hello World</Jumbo>
-     </template>);
- 
+-    `);
+-
 -    assert.dom().hasText('template block text');
++  test('it renders the content inside a jumbo header with a tomster', async function (assert) {
++    await render(hbs`<Jumbo>Hello World</Jumbo>`);
++
 +    assert.dom('.jumbo').exists();
 +    assert.dom('.jumbo').hasText('Hello World');
-+    assert.dom('.jumbo .tomster').exists();  
++    assert.dom('.jumbo .tomster').exists();
    });
 ```
 
@@ -198,7 +191,7 @@ Just like visit and click, which we used earlier, render is also an async step,
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/jumbo-test.gjs
+git add tests/integration/components/jumbo-test.js
 ```
 
 ```run:screenshot width=1024 height=512 retina=true filename=pass-3.png alt="Tests still passing with our component test"
@@ -208,62 +201,46 @@ wait  #qunit-banner.qunit-pass
 
 We've been refactoring our existing code for a while, so let's change gears and implement a new feature: the site-wide navigation bar.
 
-We can create a `<NavBar>` component at `app/components/nav-bar.gjs`:
-
-```run:file:create lang=gjs cwd=super-rentals filename=app/components/nav-bar.gjs
-import { LinkTo } from '@ember/routing'; 
+We can create a `<NavBar>` component at `app/components/nav-bar.hbs`:
 
-<template>
-  <nav class="menu">
-    <LinkTo @route="index" class="menu-index">
-      <h1>SuperRentals</h1>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/components/nav-bar.hbs
+<nav class="menu">
+  <LinkTo @route="index" class="menu-index">
+    <h1>SuperRentals</h1>
+  </LinkTo>
+  <div class="links">
+    <LinkTo @route="about" class="menu-about">
+      About
     </LinkTo>
-    <div class="links">
-      <LinkTo @route="about" class="menu-about">
-        About
-      </LinkTo>
-      <LinkTo @route="contact" class="menu-contact">
-        Contact
-      </LinkTo>
-    </div>
-  </nav>
-</template>
+    <LinkTo @route="contact" class="menu-contact">
+      Contact
+    </LinkTo>
+  </div>
+</nav>
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/components/nav-bar.gjs
+git add app/components/nav-bar.hbs
 ```
 
 Next, we will add our `<NavBar>` component to the top of each page:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-@@ -2,4 +2,6 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
-+import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
-+  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+@@ -1 +1,2 @@
++<NavBar />
+ <Jumbo>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-@@ -2,4 +2,6 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
-+import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
-+  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+@@ -1 +1,2 @@
++<NavBar />
+ <Jumbo>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -2,4 +2,6 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
-+import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
-+  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -1 +1,2 @@
++<NavBar />
+ <Jumbo>
 ```
 
 Voilà, we made another component!
@@ -273,9 +250,9 @@ visit http://localhost:4200/?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/about.gjs
-git add app/templates/contact.gjs
-git add app/templates/index.gjs
+git add app/templates/about.hbs
+git add app/templates/contact.hbs
+git add app/templates/index.hbs
 ```
 
 > Zoey says...
@@ -343,54 +320,38 @@ wait  #qunit-banner.qunit-pass
 
 Before we move on to the next feature, there is one more thing we could clean up. Since the `<NavBar>` is used for site-wide navigation, it really needs to be displayed on *every* page in the app. So far, we have been adding the component on each page manually. This is a bit error-prone, as we could easily forget to do this the next time that we add a new page.
 
-We can solve this problem by moving the nav-bar into a special template called `application.gjs`. You may remember that it was generated for us when we first created the app but we deleted it. Now, it's time for us to bring it back!
+We can solve this problem by moving the nav-bar into a special template called `application.hbs`. You may remember that it was generated for us when we first created the app but we deleted it. Now, it's time for us to bring it back!
 
 This template is special in that it does not have its own URL and cannot be navigated to on its own. Rather, it is used to specify a common layout that is shared by every page in your app. This is a great place to put site-wide UI elements, like a nav-bar and a site footer.
 
 While we are at it, we will also add a container element that wraps around the whole page, as requested by our designer for styling purposes.
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/application.gjs
-import NavBar from 'super-rentals/components/nav-bar';
-
-<template>
-  <div class="container">
-    <NavBar />
-    <div class="body">
-      {{outlet}}
-    </div>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/application.hbs
+<div class="container">
+  <NavBar />
+  <div class="body">
+    {{outlet}}
   </div>
-</template>
+</div>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -2,6 +2,4 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
--import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
--  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -1,2 +1 @@
+-<NavBar />
+ <Jumbo>
 ```
 
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-@@ -2,6 +2,4 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
--import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
--  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+@@ -1,2 +1 @@
+-<NavBar />
+ <Jumbo>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-@@ -2,6 +2,4 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
--import NavBar from 'super-rentals/components/nav-bar';
- 
- <template>
--  <NavBar />
-   <Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+@@ -1,2 +1 @@
+-<NavBar />
+ <Jumbo>
 ```
 
 The `{{outlet}}` keyword denotes the place where our site's pages should be rendered into, similar to the `{{yield}}` keyword we saw [earlier](#toc_passing-content-to-components-with-yield).
@@ -399,10 +360,10 @@ This is much nicer! We can run our test suite, which confirms that everything st
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/templates/application.gjs
-git add app/templates/index.gjs
-git add app/templates/contact.gjs
-git add app/templates/about.gjs
+git add app/templates/application.hbs
+git add app/templates/index.hbs
+git add app/templates/contact.hbs
+git add app/templates/about.hbs
 ```
 
 ```run:screenshot width=1024 height=512 retina=true filename=pass-5.png alt="Tests still passing with {{outlet}}"
diff --git a/src/markdown/tutorial/part-1/05-more-about-components.md b/src/markdown/tutorial/part-1/05-more-about-components.md
index 946c77a..d3cf6fe 100644
--- a/src/markdown/tutorial/part-1/05-more-about-components.md
+++ b/src/markdown/tutorial/part-1/05-more-about-components.md
@@ -23,64 +23,63 @@ Let's start by creating the `<Rental>` component. This time, we will use the com
 ember generate component rental
 ```
 
-The generator created two new files for us, a component template at `app/components/rental.gjs`, and a component test file at `tests/integration/components/rental-test.gjs`.
+The generator created two new files for us, a component template at `app/components/rental.hbs`, and a component test file at `tests/integration/components/rental-test.js`.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental.gjs
-git add tests/integration/components/rental-test.gjs
+git add app/components/rental.hbs
+git add tests/integration/components/rental-test.js
 ```
 
-We will start by editing the component template. Let's *[hard-code](https://en.wikipedia.org/wiki/Hard_coding)* the details for one rental property for now, and replace it with the real data from the server later on.
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental.gjs
-@@ -1,3 +1,19 @@
- <template>
--  {{yield}}
-+  <article class="rental">
-+    <div class="details">
-+      <h3>Grand Old Mansion</h3>
-+      <div class="detail owner">
-+        <span>Owner:</span> Veruca Salt
-+      </div>
-+      <div class="detail type">
-+        <span>Type:</span> Standalone
-+      </div>
-+      <div class="detail location">
-+        <span>Location:</span> San Francisco
-+      </div>
-+      <div class="detail bedrooms">
-+        <span>Number of bedrooms:</span> 15
-+      </div>
+We will start by editing the template. Let's *[hard-code](https://en.wikipedia.org/wiki/Hard_coding)* the details for one rental property for now, and replace it with the real data from the server later on.
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
+@@ -1,1 +1,17 @@
+-{{yield}}
+\ No newline at end of file
++<article class="rental">
++  <div class="details">
++    <h3>Grand Old Mansion</h3>
++    <div class="detail owner">
++      <span>Owner:</span> Veruca Salt
 +    </div>
-+  </article>
- </template>
++    <div class="detail type">
++      <span>Type:</span> Standalone
++    </div>
++    <div class="detail location">
++      <span>Location:</span> San Francisco
++    </div>
++    <div class="detail bedrooms">
++      <span>Number of bedrooms:</span> 15
++    </div>
++  </div>
++</article>
 ```
 
 Then, we will write a test to ensure all of the details are present. We will replace the boilerplate test generated for us with our own assertions, just like we did for the `<Jumbo>` component earlier:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental-test.gjs
-@@ -8,20 +8,11 @@ module('Integration | Component | rental', function (hooks) {
- 
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
+@@ -8,18 +8,11 @@
+
 -  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
+-
+-    await render(hbs`<Rental />`);
 -
-+  test('it renders information about a rental property', async function (assert) {
-     await render(<template><Rental /></template>);
- 
 -    assert.dom().hasText('');
 -
 -    // Template block usage:
--    await render(<template>
+-    await render(hbs`
 -      <Rental>
 -        template block text
 -      </Rental>
--    </template>);
+-    `);
 -
 -    assert.dom().hasText('template block text');
++  test('it renders information about a rental property', async function (assert) {
++    await render(hbs`<Rental />`);
++
 +    assert.dom('article').hasClass('rental');
 +    assert.dom('article h3').hasText('Grand Old Mansion');
 +    assert.dom('article .detail.owner').includesText('Veruca Salt');
@@ -94,8 +93,8 @@ The test should pass.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental.gjs
-git add tests/integration/components/rental-test.gjs
+git add app/components/rental.hbs
+git add tests/integration/components/rental-test.js
 ```
 
 ```run:screenshot width=1024 height=512 retina=true filename=pass.png alt="Tests passing with the new <Rental> test"
@@ -105,27 +104,22 @@ wait  #qunit-banner.qunit-pass
 
 Finally, let's invoke this a couple of times from our index template to populate the page.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -2,2 +2,3 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
-+import Rental from 'super-rentals/components/rental';
- 
-@@ -9,2 +10,10 @@ import Jumbo from 'super-rentals/components/jumbo';
-   </Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -5 +5,9 @@
+ </Jumbo>
 +
-+  <div class="rentals">
-+    <ul class="results">
-+      <li><Rental /></li>
-+      <li><Rental /></li>
-+      <li><Rental /></li>
-+    </ul>
-+  </div>
- </template>
++<div class="rentals">
++  <ul class="results">
++    <li><Rental /></li>
++    <li><Rental /></li>
++    <li><Rental /></li>
++  </ul>
++</div>
 ```
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 With that, we should see the `<Rental>` component showing our Grand Old Mansion three times on the page:
@@ -137,7 +131,7 @@ wait  .rentals li:nth-of-type(3) article.rental
 
 Things are looking pretty convincing already; not bad for just a little bit of work!
 
-## Organizing Code in Folders
+## Organizing Code with Namespaced Components
 
 Next, let's add the image for the rental property. We will use the component generator for this again:
 
@@ -145,121 +139,111 @@ Next, let's add the image for the rental property. We will use the component gen
 ember generate component rental/image
 ```
 
-This time, we had a `/` in the component's name. This resulted in the component being created at `app/components/rental/image.gjs`.
+This time, we had a `/` in the component's name. This resulted in the component being created at `app/components/rental/image.hbs`, which can be invoked as `<Rental::Image>`.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
-git add tests/integration/components/rental/image-test.gjs
+git add app/components/rental/image.hbs
+git add tests/integration/components/rental/image-test.js
 ```
 
-We can organize our components by folders according to their purpose. This is completely optional&mdash;these components are not special in any way.
+Components like these are known as *[namespaced](https://en.wikipedia.org/wiki/Namespace)* components. Namespacing allows us to organize our components by folders according to their purpose. This is completely optional&mdash;namespaced components are not special in any way.
 
 ## Forwarding HTML Attributes with `...attributes`
 
 Let's edit the component's template:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -1,3 +1,5 @@
- <template>
--  {{yield}}
-+  <div class="image">
-+    <img ...attributes />
-+  </div>
- </template>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/image.hbs
+@@ -1,1 +1,3 @@
+-{{yield}}
+\ No newline at end of file
++<div class="image">
++  <img ...attributes>
++</div>
 ```
 
 Instead of hard-coding specific values for the `src` and `alt` attributes on the `<img>` tag, we opted for the `...attributes` keyword instead, which is also sometimes referred to as the *["splattributes"](../../../components/component-arguments-and-html-attributes/#toc_html-attributes)* syntax. This allows arbitrary HTML attributes to be passed in when invoking this component, like so:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental.gjs
-@@ -1,3 +1,9 @@
-+import RentalImage from 'super-rentals/components/rental/image';
-+
- <template>
-   <article class="rental">
-+    <RentalImage
-+      src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
-+      alt="A picture of Grand Old Mansion"
-+    />
-     <div class="details">
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
+@@ -1,2 +1,6 @@
+ <article class="rental">
++  <Rental::Image
++    src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
++    alt="A picture of Grand Old Mansion"
++  />
+   <div class="details">
 ```
 
 We specified a `src` and an `alt` HTML attribute here, which will be passed along to the component and attached to the element where `...attributes` is applied in the component template. You can think of this as being similar to `{{yield}}`, but for HTML attributes specifically, rather than displayed content. In fact, we have already used this feature [earlier](../building-pages/) when we passed a `class` attribute to `<LinkTo>`.
 
-```run:screenshot width=1024 retina=true filename=rental-image.png alt="The <RentalImage> component in action"
+```run:screenshot width=1024 retina=true filename=rental-image.png alt="The <Rental::Image> component in action"
 visit http://localhost:4200/?deterministic
 wait  .rentals li:nth-of-type(3) article.rental .image img
 ```
 
-This way, our `<RentalImage>` component is not coupled to any specific rental property on the site. Of course, the hard-coding problem still exists (we simply moved it to the `<Rental>` component), but we will deal with that soon. We will limit all the hard-coding to the `<Rental>` component, so that we will have an easier time cleaning it up when we switch to fetching real data.
+This way, our `<Rental::Image>` component is not coupled to any specific rental property on the site. Of course, the hard-coding problem still exists (we simply moved it to the `<Rental>` component), but we will deal with that soon. We will limit all the hard-coding to the `<Rental>` component, so that we will have an easier time cleaning it up when we switch to fetching real data.
 
 In general, it is a good idea to add `...attributes` to the primary element in your component. This will allow for maximum flexibility, as the invoker may need to pass along classes for styling or ARIA attributes to improve accessibility.
 
 Let's write a test for our new component!
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental/image-test.gjs
-@@ -3,3 +3,3 @@ import { setupRenderingTest } from 'super-rentals/tests/helpers';
- import { render } from '@ember/test-helpers';
--import Image from 'super-rentals/components/rental/image';
-+import RentalImage from 'super-rentals/components/rental/image';
- 
-@@ -8,21 +8,16 @@ module('Integration | Component | rental/image', function (hooks) {
- 
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental/image-test.js
+@@ -8,18 +8,15 @@
+
 -  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
 -
--    await render(<template><Image /></template>);
+-    await render(hbs`<Rental::Image />`);
 -
 -    assert.dom().hasText('');
 -
 -    // Template block usage:
-+  test('it renders the given image', async function (assert) {
-     await render(<template>
--      <Image>
+-    await render(hbs`
+-      <Rental::Image>
 -        template block text
--      </Image>
-+      <RentalImage
+-      </Rental::Image>
+-    `);
+-
+-    assert.dom().hasText('template block text');
++  test('it renders the given image', async function (assert) {
++    await render(hbs`
++      <Rental::Image
 +        src="/assets/images/teaching-tomster.png"
 +        alt="Teaching Tomster"
 +      />
-     </template>);
- 
--    assert.dom().hasText('template block text');
--  });
++    `);
++
 +    assert
 +      .dom('.image img')
 +      .exists()
 +      .hasAttribute('src', '/assets/images/teaching-tomster.png')
 +      .hasAttribute('alt', 'Teaching Tomster');
-+   });
- });
+   });
 ```
 
 ## Determining the Appropriate Amount of Test Coverage
 
-Finally, we should also update the tests for the `<Rental>` component to confirm that we successfully invoked `<RentalImage>`.
+Finally, we should also update the tests for the `<Rental>` component to confirm that we successfully invoked `<Rental::Image>`.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental-test.gjs
-@@ -17,2 +17,3 @@ module('Integration | Component | rental', function (hooks) {
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
+@@ -17,2 +17,3 @@
      assert.dom('article .detail.bedrooms').includesText('15');
 +    assert.dom('article .image').exists();
    });
 ```
 
-Because we already tested `<RentalImage>` extensively on its own, we can omit the details here and keep our assertion to the bare minimum. That way, we won't  *also* have to update the `<Rental>` tests whenever we make changes to `<RentalImage>`.
+Because we already tested `<Rental::Image>` extensively on its own, we can omit the details here and keep our assertion to the bare minimum. That way, we won't  *also* have to update the `<Rental>` tests whenever we make changes to `<Rental::Image>`.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental.gjs
-git add app/components/rental/image.gjs
-git add tests/integration/components/rental-test.gjs
-git add tests/integration/components/rental/image-test.gjs
+git add app/components/rental.hbs
+git add app/components/rental/image.hbs
+git add tests/integration/components/rental-test.js
+git add tests/integration/components/rental/image-test.js
 ```
 
-```run:screenshot width=1024 height=512 retina=true filename=pass-2.png alt="Tests passing with the new <RentalImage> test"
+```run:screenshot width=1024 height=512 retina=true filename=pass-2.png alt="Tests passing with the new <Rental::Image> test"
 visit http://localhost:4200/tests?nocontainer&nolint&deterministic
 wait  #qunit-banner.qunit-pass
 ```
diff --git a/src/markdown/tutorial/part-1/06-interactive-components.md b/src/markdown/tutorial/part-1/06-interactive-components.md
index eaef026..348682a 100644
--- a/src/markdown/tutorial/part-1/06-interactive-components.md
+++ b/src/markdown/tutorial/part-1/06-interactive-components.md
@@ -32,56 +32,36 @@ Here, we are going to do just that! We are going to implement the "View Larger"
 
 In other words, we want a way to *toggle* the image between one of the two *[states](../../../components/component-state-and-actions/)*. In order to do that, we need a way for the component to store two possible states, and to be aware of which state it is currently in.
 
-Ember optionally allows us to associate JavaScript code with a component for exactly this purpose. We can add JavaScript to our `<RentalImage>` component by "wrapping" the component in a class definition.
+Ember optionally allows us to associate JavaScript code with a component for exactly this purpose. We can add a JavaScript file for our `<Rental::Image>` component by running the `component-class` generator:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -1,5 +1,9 @@
--<template>
--  <div class="image">
--    <img ...attributes />
--  </div>
--</template>
-+import Component from '@glimmer/component';
-+
-+export default class RentalImage extends Component {
-+  <template>
-+    <div class="image">
-+      <img ...attributes />
-+    </div>
-+  </template>
-+}
+```run:command cwd=super-rentals
+ember generate component-class rental/image
 ```
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.js
 ```
 
-Now our component contains a *[JavaScript class](https://javascript.info/class)*, *[inheriting](https://javascript.info/class-inheritance)* from `@glimmer/component`. The template is now nested inside the class definition.
+This generated a JavaScript file with the same name as our component's template at `app/components/rental/image.js`. It contains a *[JavaScript class](https://javascript.info/class)*, *[inheriting](https://javascript.info/class-inheritance)* from `@glimmer/component`.
 
 > Zoey says...
 >
-> Until now, all our components have been *[Template-only components][TODO: link to template-only]*. Glimmer components are used exactly like Template-only components and they are both used interchangeably in this tutorial.
->
-> In general, whenever you want to add behavior to your components, use a JavaScript Glimmer component, otherwise use a Template-only component. 
+> `@glimmer/component`, or *[Glimmer component](../../../upgrading/current-edition/glimmer-components/)*, is one of the several component classes available to use. They are a great starting point whenever you want to add behavior to your components. In this tutorial, we will be using Glimmer components exclusively.
 >
+> In general, Glimmer components should be used whenever possible. However, you may also see `@ember/components`, or *[classic components](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/)*, used in older apps. You can tell them apart by looking at their import path (which is helpful for looking up the respective documentation, as they have different and incompatible APIs).
 
 Ember will create an *[instance][TODO: link to instance]* of the class whenever our component is invoked. We can use that instance to store our state:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -3,2 +3,7 @@ import Component from '@glimmer/component';
- export default class RentalImage extends Component {
+```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
+@@ -3 +3,6 @@
+-export default class RentalImage extends Component {}
++export default class RentalImage extends Component {
 +  constructor(...args) {
 +    super(...args);
 +    this.isLarge = false;
 +  }
-+
-   <template>
-```
-
-```run:command hidden=true cwd=super-rentals
-ember test --path dist
-git add app/components/rental/image.gjs
++}
 ```
 
 Here, in the *[component's constructor][TODO: link to component's constructor]*, we *[initialized][TODO: link to initialized]* the *[instance variable][TODO: link to instance variable]* `this.isLarge` with the value `false`, since this is the default state that we want for our component.
@@ -90,37 +70,36 @@ Here, in the *[component's constructor][TODO: link to component's constructor]*,
 
 Let's update our template to use this state we just added:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -9,5 +9,13 @@ export default class RentalImage extends Component {
-   <template>
--    <div class="image">
--      <img ...attributes />
--    </div>
-+    {{#if this.isLarge}}
-+      <div class="image large">
-+        <img ...attributes>
-+        <small>View Smaller</small>
-+      </div>
-+    {{else}}
-+      <div class="image">
-+        <img ...attributes>
-+        <small>View Larger</small>
-+      </div>
-+    {{/if}}
-   </template>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/image.hbs
+@@ -1,3 +1,11 @@
+-<div class="image">
+-  <img ...attributes>
+-</div>
++{{#if this.isLarge}}
++  <div class="image large">
++    <img ...attributes>
++    <small>View Smaller</small>
++  </div>
++{{else}}
++  <div class="image">
++    <img ...attributes>
++    <small>View Larger</small>
++  </div>
++{{/if}}
 ```
 
-In the component's template section, we have access to the component's JavaScript instance variables. The `{{#if ...}}...{{else}}...{{/if}}` *[conditionals](../../../components/conditional-content/)* syntax allows us to render different content based on a condition (in this case, the value of the instance variable `this.isLarge`). Combining these two features, we can render either the small or the large version of the image accordingly.
+In the template, we have access to the component's instance variables. The `{{#if ...}}...{{else}}...{{/if}}` *[conditionals](../../../components/conditional-content/)* syntax allows us to render different content based on a condition (in this case, the value of the instance variable `this.isLarge`). Combining these two features, we can render either the small or the large version of the image accordingly.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.hbs
+git add app/components/rental/image.js
 ```
 
 We can verify this works by temporarily changing the initial value in our JavaScript file. If we change `app/components/rental/image.js` to initialize `this.isLarge = true;` in the constructor, we should see the large version of the property image in the browser. Cool!
 
-```run:file:patch lang=gjs hidden=true cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -5,3 +5,3 @@ export default class RentalImage extends Component {
+```run:file:patch hidden=true cwd=super-rentals filename=app/components/rental/image.js
+@@ -5,3 +5,3 @@
      super(...args);
 -    this.isLarge = false;
 +    this.isLarge = true;
@@ -135,27 +114,27 @@ wait  .rentals li:nth-of-type(3) article.rental .image.large img
 Once we've tested this out, we can change `this.isLarge` back to `false`.
 
 ```run:command hidden=true cwd=super-rentals
-git checkout app/components/rental/image.gjs
+git checkout app/components/rental/image.js
 ```
 
 Since this pattern of initializing instance variables in the constructor is pretty common, there happens to be a much more concise syntax for it:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -3,6 +3,3 @@ import Component from '@glimmer/component';
+```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
+@@ -3,6 +3,3 @@
  export default class RentalImage extends Component {
 -  constructor(...args) {
 -    super(...args);
 -    this.isLarge = false;
 -  }
 +  isLarge = false;
- 
+ }
 ```
 
 This does exactly the same thing as before, but it's much shorter and less to type!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.js
 ```
 
 Of course, our users cannot edit our source code, so we need a way for them to toggle the image size from the browser. Specifically, we want to toggle the value of `this.isLarge` whenever the user clicks on our component.
@@ -164,12 +143,12 @@ Of course, our users cannot edit our source code, so we need a way for them to t
 
 Let's modify our class to add a *[method](../../../in-depth-topics/native-classes-in-depth/#toc_methods)* for toggling the size:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
+```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
 @@ -1,5 +1,11 @@
  import Component from '@glimmer/component';
 +import { tracked } from '@glimmer/tracking';
 +import { action } from '@ember/object';
- 
+
  export default class RentalImage extends Component {
 -  isLarge = false;
 +  @tracked isLarge = false;
@@ -177,12 +156,7 @@ Let's modify our class to add a *[method](../../../in-depth-topics/native-classe
 +  @action toggleSize() {
 +    this.isLarge = !this.isLarge;
 +  }
- 
-```
-
-```run:command hidden=true cwd=super-rentals
-ember test --path dist
-git add app/components/rental/image.gjs
+ }
 ```
 
 We did a few things here, so let's break it down.
@@ -193,7 +167,7 @@ In our case, whenever we assign a new value to `this.isLarge`, the `@tracked` an
 
 > Zoey says...
 >
-> Don't worry! If you reference a variable in the template section but forget to add the `@tracked` decorator, you will get a helpful development mode error when you change its value!
+> Don't worry! If you reference a variable in the template but forget to add the `@tracked` decorator, you will get a helpful development mode error when you change its value!
 
 ## Responding to User Interaction with Actions
 
@@ -205,36 +179,32 @@ Finally, we added the `@action` decorator to our method. This indicates to Ember
 >
 > If you forget to add the `@action` decorator, you will also get a helpful error when clicking on the button in development mode!
 
-With that, it's time to wire this up in the template section:
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -3,2 +3,3 @@ import { tracked } from '@glimmer/tracking';
- import { action } from '@ember/object';
-+import { on } from '@ember/modifier';
- 
-@@ -13,11 +14,11 @@ export default class RentalImage extends Component {
-     {{#if this.isLarge}}
--      <div class="image large">
-+      <button type="button" class="image large" {{on "click" this.toggleSize}}>
-         <img ...attributes>
-         <small>View Smaller</small>
--      </div>
-+      </button>
-     {{else}}
--      <div class="image">
-+      <button type="button" class="image" {{on "click" this.toggleSize}}>
-         <img ...attributes>
-         <small>View Larger</small>
--      </div>
-+      </button>
-     {{/if}}
+With that, it's time to wire this up in the template:
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/image.hbs
+@@ -1,11 +1,11 @@
+ {{#if this.isLarge}}
+-  <div class="image large">
++  <button type="button" class="image large" {{on "click" this.toggleSize}}>
+     <img ...attributes>
+     <small>View Smaller</small>
+-  </div>
++  </button>
+ {{else}}
+-  <div class="image">
++  <button type="button" class="image" {{on "click" this.toggleSize}}>
+     <img ...attributes>
+     <small>View Larger</small>
+-  </div>
++  </button>
+ {{/if}}
 ```
 
 We changed two things here.
 
 First, since we wanted to make our component interactive, we switched the containing tag from `<div>` to `<button>` (this is important for accessibility reasons). By using the correct semantic tag, we will also get focusability and keyboard interaction handling "for free".
 
-Next, we used the `{{on}}` *[modifier](../../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers)* to attach `this.toggleSize` as a click handler on the button. The `{{on}}` modifier is imported from the `@ember/modifier` package, which is part of Ember.
+Next, we used the `{{on}}` *[modifier](../../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers)* to attach `this.toggleSize` as a click handler on the button.
 
 With that, we have created our first *[interactive][TODO: link to interactive]* component. Go ahead and try it in the browser!
 
@@ -254,29 +224,30 @@ wait  .rentals li:first-of-type article.rental .image.large img
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.hbs
+git add app/components/rental/image.js
 ```
 
 ## Testing User Interactions
 
 Finally, let's write a test for this new behavior:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental/image-test.gjs
-@@ -2,3 +2,3 @@ import { module, test } from 'qunit';
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental/image-test.js
+@@ -2,3 +2,3 @@
  import { setupRenderingTest } from 'super-rentals/tests/helpers';
 -import { render } from '@ember/test-helpers';
 +import { render, click } from '@ember/test-helpers';
- import RentalImage from 'super-rentals/components/rental/image';
-@@ -22,2 +22,26 @@ module('Integration | Component | rental/image', function (hooks) {
-    });
+ import { hbs } from 'ember-cli-htmlbars';
+@@ -20,2 +21,26 @@
+   });
 +
 +  test('clicking on the component toggles its size', async function (assert) {
-+    await render(<template>
-+      <RentalImage
++    await render(hbs`
++      <Rental::Image
 +        src="/assets/images/teaching-tomster.png"
 +        alt="Teaching Tomster"
 +      />
-+    </template>);
++    `);
 +
 +    assert.dom('button.image').exists();
 +
@@ -298,7 +269,7 @@ Finally, let's write a test for this new behavior:
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/rental/image-test.gjs
+git add tests/integration/components/rental/image-test.js
 ```
 
 ```run:screenshot width=1024 height=512 retina=true filename=pass.png alt="Tests passing with the new <Rental::Image> test"
@@ -313,48 +284,46 @@ Let's clean up our template before moving on. We introduced a lot of duplication
 
 These changes are buried deep within the large amount of duplicated code. We can reduce the duplication by using an `{{if}}` *[expression](../../../components/conditional-content/#toc_inline-if)* instead:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -13,13 +13,10 @@ export default class RentalImage extends Component {
-   <template>
--    {{#if this.isLarge}}
--      <button type="button" class="image large" {{on "click" this.toggleSize}}>
--        <img ...attributes>
-+    <button type="button" class="image {{if this.isLarge "large"}}" {{on "click" this.toggleSize}}>
-+      <img ...attributes>
-+      {{#if this.isLarge}}
-         <small>View Smaller</small>
--      </button>
--    {{else}}
--      <button type="button" class="image" {{on "click" this.toggleSize}}>
--        <img ...attributes>
-+      {{else}}
-         <small>View Larger</small>
--      </button>
--    {{/if}}
-+      {{/if}}
-+    </button>
-   </template>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/image.hbs
+@@ -1,11 +1,8 @@
+-{{#if this.isLarge}}
+-  <button type="button" class="image large" {{on "click" this.toggleSize}}>
+-    <img ...attributes>
++<button type="button" class="image {{if this.isLarge "large"}}" {{on "click" this.toggleSize}}>
++  <img ...attributes>
++  {{#if this.isLarge}}
+     <small>View Smaller</small>
+-  </button>
+-{{else}}
+-  <button type="button" class="image" {{on "click" this.toggleSize}}>
+-    <img ...attributes>
++  {{else}}
+     <small>View Larger</small>
+-  </button>
+-{{/if}}
++  {{/if}}
++</button>
 ```
 
 The expression version of `{{if}}` takes two arguments. The first argument is the condition. The second argument is the expression that should be evaluated if the condition is true.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.hbs
 ```
 
 Optionally, `{{if}}` can take a third argument for what the expression should evaluate into if the condition is false. This means we could rewrite the button label like so:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/image.gjs
-@@ -15,7 +15,3 @@ export default class RentalImage extends Component {
-       <img ...attributes>
--      {{#if this.isLarge}}
--        <small>View Smaller</small>
--      {{else}}
--        <small>View Larger</small>
--      {{/if}}
-+      <small>View {{if this.isLarge "Smaller" "Larger"}}</small>
-     </button>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/image.hbs
+@@ -2,7 +2,3 @@
+   <img ...attributes>
+-  {{#if this.isLarge}}
+-    <small>View Smaller</small>
+-  {{else}}
+-    <small>View Larger</small>
+-  {{/if}}
++  <small>View {{if this.isLarge "Smaller" "Larger"}}</small>
+ </button>
 ```
 
 Whether or not this is an improvement in the clarity of our code is mostly a matter of taste. Either way, we have significantly reduced the duplication in our code, and made the important bits of logic stand out from the rest.
@@ -363,7 +332,7 @@ Run the test suite one last time to confirm our refactor didn't break anything u
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/image.gjs
+git add app/components/rental/image.hbs
 ```
 
 ```run:screenshot width=1024 height=512 retina=true filename=pass-2.png alt="Tests still passing after the refactor"
diff --git a/src/markdown/tutorial/part-1/07-reusable-components.md b/src/markdown/tutorial/part-1/07-reusable-components.md
index e21970d..bdbcfda 100644
--- a/src/markdown/tutorial/part-1/07-reusable-components.md
+++ b/src/markdown/tutorial/part-1/07-reusable-components.md
@@ -80,12 +80,12 @@ npm start
 With the Mapbox API key in place, let's generate a new component for our map.
 
 ```run:command cwd=super-rentals
-ember generate component map --component-class=@glimmer/component
+ember generate component map --with-component-class
 ```
 
-Since not every component will necessarily have some defined behavior associated with it, the component generator does not generate the JavaScript parts of the file for us by default. As we saw earlier, we can always add the JavaScript class to a component later on.
+Since not every component will necessarily have some defined behavior associated with it, the component generator does not generate a JavaScript file for us by default. As we saw earlier, we can always use the `component-class` generator to add a JavaScript file for a component later on.
 
-However, in the case of our `<Map>` component, we are pretty sure that we are going to need a JavaScript file for some behavior that we have yet to define! To save a step later, we can pass the `--component-class=@glimmer/component` flag to the component generator so that we have everything we need from the get-go.
+However, in the case of our `<Map>` component, we are pretty sure that we are going to need a JavaScript file for some behavior that we have yet to define! To save a step later, we can pass the `--with-component-class` flag to the component generator so that we have everything we need from the get-go.
 
 > Zoey says...
 >
@@ -93,44 +93,53 @@ However, in the case of our `<Map>` component, we are pretty sure that we are go
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/map.gjs
-git add tests/integration/components/map-test.gjs
+git add app/components/map.hbs
+git add app/components/map.js
+git add tests/integration/components/map-test.js
 ```
 
 ## Parameterizing Components with Arguments
 
-Let's update our component:
+Let's start with our JavaScript file:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/map.gjs
-@@ -1,6 +1,18 @@
+```run:file:patch lang=js cwd=super-rentals filename=app/components/map.js
+@@ -1,3 +1,8 @@
  import Component from '@glimmer/component';
 +import ENV from 'super-rentals/config/environment';
- 
- export default class Map extends Component {
+
+-export default class Map extends Component {}
++export default class Map extends Component {
 +  get token() {
 +    return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
 +  }
-+
-   <template>
--    {{yield}}
-+    <div class="map">
-+      <img
-+        alt="Map image at coordinates {{@lat}},{{@lng}}"
-+        ...attributes
-+        src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/{{@lng}},{{@lat}},{{@zoom}}/{{@width}}x{{@height}}@2x?access_token={{this.token}}"
-+        width={{@width}} height={{@height}}
-+      >
-+    </div>
-   </template>
++}
 ```
 
-Here, we import the access token from the config file and return it from a `token` *[getter](https://javascript.info/property-accessors)*. This allows us to access our token as `this.token` both inside the `Map` class body, as well as the template section. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
+Here, we import the access token from the config file and return it from a `token` *[getter](https://javascript.info/property-accessors)*. This allows us to access our token as `this.token` both inside the `Map` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
+
+## Interpolating Values in Templates
+
+Now, let's move from the JavaScript file to the template:
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/map.hbs
+@@ -1 +1,8 @@
+-{{yield}}
+\ No newline at end of file
++<div class="map">
++  <img
++    alt="Map image at coordinates {{@lat}},{{@lng}}"
++    ...attributes
++    src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/{{@lng}},{{@lat}},{{@zoom}}/{{@width}}x{{@height}}@2x?access_token={{this.token}}"
++    width={{@width}} height={{@height}}
++  >
++</div>
+```
 
 First, we have a container element for styling purposes.
 
 Then we have an `<img>` tag to request and render the static map image from Mapbox.
 
-Our component's template contains several values that don't yet exist&mdash;`@lat`, `@lng`, `@zoom`, `@width`, and `@height`. These are *[arguments](../../../components/component-arguments-and-html-attributes/#toc_arguments)* to the `<Map>` component that we will supply when invoking it.
+Our template contains several values that don't yet exist&mdash;`@lat`, `@lng`, `@zoom`, `@width`, and `@height`. These are *[arguments](../../../components/component-arguments-and-html-attributes/#toc_arguments)* to the `<Map>` component that we will supply when invoking it.
 
 By *[parameterizing][TODO: link to parameterizing]* our component using arguments, we made a reusable component that can be invoked from different parts of the app and customized to meet the needs for those specific contexts. We have already seen this in action when using the `<LinkTo>` component [earlier](../building-pages/); we had to specify a `@route` argument so that it knew what page to navigate to.
 
@@ -150,31 +159,29 @@ Finally, since we are using the `@2x` "retina" image, we should specify the `wid
 
 We just added a lot of behavior into a single component, so let's write some tests! In particular, we should make sure to have some *[test coverage](../../../testing/)* for the overriding-HTML-attributes behavior we discussed above.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/map-test.gjs
-@@ -2,3 +2,4 @@ import { module, test } from 'qunit';
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/map-test.js
+@@ -2,4 +2,5 @@
  import { setupRenderingTest } from 'super-rentals/tests/helpers';
 -import { render } from '@ember/test-helpers';
 +import { render, find } from '@ember/test-helpers';
+ import { hbs } from 'ember-cli-htmlbars';
 +import ENV from 'super-rentals/config/environment';
- import Map from 'super-rentals/components/map';
-@@ -8,20 +9,79 @@ module('Integration | Component | map', function (hooks) {
- 
+
+@@ -8,18 +9,73 @@
+
 -  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
 +  test('it renders a map image for the specified parameters', async function (assert) {
-+    await render(<template>
-+      <Map
-+        @lat="37.7797"
-+        @lng="-122.4184"
-+        @zoom="10"
-+        @width="150"
-+        @height="120"
-+      />
-+    </template>);
-+
++    await render(hbs`<Map
++      @lat="37.7797"
++      @lng="-122.4184"
++      @zoom="10"
++      @width="150"
++      @height="120"
++    />`);
+
+-    await render(hbs`<Map />`);
 +    assert
 +      .dom('.map img')
 +      .exists()
@@ -182,27 +189,33 @@ We just added a lot of behavior into a single component, so let's write some tes
 +      .hasAttribute('src')
 +      .hasAttribute('width', '150')
 +      .hasAttribute('height', '120');
-+
+
+-    assert.dom().hasText('');
 +    let { src } = find('.map img');
 +    let token = encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
-+
+
+-    // Template block usage:
+-    await render(hbs`
+-      <Map>
+-        template block text
+-      </Map>
+-    `);
 +    assert.ok(
 +      src.startsWith('https://api.mapbox.com/'),
 +      'the src starts with "https://api.mapbox.com/"',
 +    );
-+
+
+-    assert.dom().hasText('template block text');
 +    assert.ok(
 +      src.includes('-122.4184,37.7797,10'),
 +      'the src should include the lng,lat,zoom parameter',
 +    );
- 
--    await render(<template><Map /></template>);
++
 +    assert.ok(
 +      src.includes('150x120@2x'),
 +      'the src should include the width,height and @2x parameter',
 +    );
- 
--    assert.dom().hasText('');
++
 +    assert.ok(
 +      src.includes(`access_token=${token}`),
 +      'the src should include the escaped access token',
@@ -210,39 +223,30 @@ We just added a lot of behavior into a single component, so let's write some tes
 +  });
 +
 +  test('the default alt attribute can be overridden', async function (assert) {
-+    await render(<template>
-+      <Map
-+        @lat="37.7797"
-+        @lng="-122.4184"
-+        @zoom="10"
-+        @width="150"
-+        @height="120"
-+        alt="A map of San Francisco"
-+      />
-+    </template>);
++    await render(hbs`<Map
++      @lat="37.7797"
++      @lng="-122.4184"
++      @zoom="10"
++      @width="150"
++      @height="120"
++      alt="A map of San Francisco"
++    />`);
 +
 +    assert.dom('.map img').hasAttribute('alt', 'A map of San Francisco');
 +  });
- 
--    // Template block usage:
++
 +  test('the src, width and height attributes cannot be overridden', async function (assert) {
-     await render(<template>
--      <Map>
--        template block text
--      </Map>
-+      <Map
-+        @lat="37.7797"
-+        @lng="-122.4184"
-+        @zoom="10"
-+        @width="150"
-+        @height="120"
-+        src="/assets/images/teaching-tomster.png"
-+        width="200"
-+        height="300"
-+      />
-     </template>);
- 
--    assert.dom().hasText('template block text');
++    await render(hbs`<Map
++      @lat="37.7797"
++      @lng="-122.4184"
++      @zoom="10"
++      @width="150"
++      @height="120"
++      src="/assets/images/teaching-tomster.png"
++      width="200"
++      height="300"
++    />`);
++
 +    assert
 +      .dom('.map img')
 +      .hasAttribute('src', /^https:\/\/api\.mapbox\.com\//)
@@ -257,8 +261,9 @@ Note that the `hasAttribute` test helper from [`qunit-dom`](https://github.com/s
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/map.gjs
-git add tests/integration/components/map-test.gjs
+git add app/components/map.hbs
+git add app/components/map.js
+git add tests/integration/components/map-test.js
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass.png alt="Tests passing with the new <Map> tests"
@@ -268,22 +273,18 @@ wait  #qunit-banner.qunit-pass
 
 Hey, all the tests passed! But does that mean it actually works in practice? Let's find out by invoking the `<Map>` component from the `<Rental>` component's template:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental.gjs
-@@ -1,2 +1,3 @@
- import RentalImage from 'super-rentals/components/rental/image';
-+import Map from 'super-rentals/components/map';
- 
-@@ -23,2 +24,10 @@ import RentalImage from 'super-rentals/components/rental/image';
-     </div>
-+    <Map
-+      @lat="37.7749"
-+      @lng="-122.4194"
-+      @zoom="9"
-+      @width="150"
-+      @height="150"
-+      alt="A map of Grand Old Mansion"
-+    />
-   </article>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
+@@ -20,2 +20,10 @@
+   </div>
++  <Map
++    @lat="37.7749"
++    @lng="-122.4194"
++    @zoom="9"
++    @width="150"
++    @height="150"
++    alt="A map of Grand Old Mansion"
++  />
+ </article>
 ```
 
 Hey! That's a map!
@@ -301,8 +302,8 @@ wait  .rentals li:nth-of-type(3) article.rental .map
 
 For good measure, we will also add an assertion to the `<Rental>` tests to make sure we rendered the `<Map>` component successfully.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental-test.gjs
-@@ -18,2 +18,3 @@ module('Integration | Component | rental', function (hooks) {
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
+@@ -18,2 +18,3 @@
      assert.dom('article .image').exists();
 +    assert.dom('article .map').exists();
    });
@@ -310,23 +311,27 @@ For good measure, we will also add an assertion to the `<Rental>` tests to make
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental.gjs
-git add tests/integration/components/rental-test.gjs
+git add app/components/rental.hbs
+git add tests/integration/components/rental-test.js
 ```
 
 ## Refactoring with Getters and Auto-track
 
-At this point, a big part of our `<Map>` component's template section is devoted to the `<img>` tag's `src` attribute, which is getting pretty long. One alternative is to move this computation into the JavaScript class instead.
+At this point, a big part of our `<Map>` template is devoted to the `<img>` tag's `src` attribute, which is getting pretty long. One alternative is to move this computation into the JavaScript class instead.
 
-From within our JavaScript class, we have access to our component's arguments using the `this.args.*` API. Using that, we can move the URL logic up from the template into a new getter.
+From within our JavaScript class, we have access to our component's arguments using the `this.args.*` API. Using that, we can move the URL logic from the template into a new getter.
 
 > Zoey says...
 >
 > `this.args` is an API provided by the Glimmer component superclass. You may come across other component superclasses, such as "classic" components in legacy codebases, that provide different APIs for accessing component arguments from JavaScript code.
 
-```run:file:patch lang=js cwd=super-rentals filename=app/components/map.gjs
-@@ -3,3 +3,15 @@ import ENV from 'super-rentals/config/environment';
- 
+```run:file:patch lang=js cwd=super-rentals filename=app/components/map.js
+diff --git a/app/components/map.js b/app/components/map.js
+index 78e765f..1cad468 100644
+--- a/app/components/map.js
++++ b/app/components/map.js
+@@ -3,3 +3,15 @@
+
 +const MAPBOX_API = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static';
 +
  export default class Map extends Component {
@@ -341,18 +346,22 @@ From within our JavaScript class, we have access to our component's arguments us
 +  }
 +
    get token() {
-@@ -13,3 +25,3 @@ export default class Map extends Component {
-         ...attributes
--        src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/{{@lng}},{{@lat}},{{@zoom}}/{{@width}}x{{@height}}@2x?access_token={{this.token}}"
-+        src={{this.src}}
-         width={{@width}} height={{@height}}
+```
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/map.hbs
+@@ -4,3 +4,3 @@
+     ...attributes
+-    src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/{{@lng}},{{@lat}},{{@zoom}}/{{@width}}x{{@height}}@2x?access_token={{this.token}}"
++    src={{this.src}}
+     width={{@width}} height={{@height}}
 ```
 
 Much nicer! And all of our tests still pass!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/map.gjs
+git add app/components/map.hbs
+git add app/components/map.js
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass-2.png alt="Tests passing after the src getter refactor"
@@ -370,37 +379,25 @@ Ember does this by automatically tracking any variables that were accessed while
 
 Just to be sure, we can add a test for this behavior:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/map-test.gjs
-@@ -2,5 +2,6 @@ import { module, test } from 'qunit';
- import { setupRenderingTest } from 'super-rentals/tests/helpers';
--import { render, find } from '@ember/test-helpers';
-+import { render, find, rerender } from '@ember/test-helpers';
- import ENV from 'super-rentals/config/environment';
- import Map from 'super-rentals/components/map';
-+import { tracked } from '@glimmer/tracking';
- 
-@@ -52,2 +53,67 @@ module('Integration | Component | map', function (hooks) {
- 
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/map-test.js
+@@ -32,2 +32,63 @@
+
 +  test('it updates the `src` attribute when the arguments change', async function (assert) {
-+    class State { 
-+      @tracked lat = 37.7749;
-+      @tracked lng = -122.4194;
-+      @tracked zoom = 10;
-+      @tracked width = 150;
-+      @tracked height = 120;
-+    };
-+
-+    const state = new State();
++    this.setProperties({
++      lat: 37.7749,
++      lng: -122.4194,
++      zoom: 10,
++      width: 150,
++      height: 120,
++    });
 +
-+    await render(<template>
-+      <Map
-+        @lat={{state.lat}}
-+        @lng={{state.lng}}
-+        @zoom={{state.zoom}}
-+        @width={{state.width}}
-+        @height={{state.height}}
-+      />
-+    </template>);
++    await render(hbs`<Map
++      @lat={{this.lat}}
++      @lng={{this.lng}}
++      @zoom={{this.zoom}}
++      @width={{this.width}}
++      @height={{this.height}}
++    />`);
 +
 +    let img = find('.map img');
 +
@@ -414,11 +411,11 @@ Just to be sure, we can add a test for this behavior:
 +      'the src should include the width,height and @2x parameter',
 +    );
 +
-+    state.width = 300;
-+    state.height = 200;
-+    state.zoom = 12;
-+
-+    await rerender();
++    this.setProperties({
++      width: 300,
++      height: 200,
++      zoom: 12,
++    });
 +
 +    assert.ok(
 +      img.src.includes('-122.4194,37.7749,12'),
@@ -430,10 +427,10 @@ Just to be sure, we can add a test for this behavior:
 +      'the src should include the width,height and @2x parameter',
 +    );
 +
-+    state.lat = 47.6062;
-+    state.lng = -122.3321;
-+
-+    await rerender();
++    this.setProperties({
++      lat: 47.6062,
++      lng: -122.3321,
++    });
 +
 +    assert.ok(
 +      img.src.includes('-122.3321,47.6062,12'),
@@ -449,15 +446,17 @@ Just to be sure, we can add a test for this behavior:
    test('the default alt attribute can be overridden', async function (assert) {
 ```
 
-In this test, we create a local class called `State` and an instance of that class called `state`. There is nothing special about the name `State`&mdash;it's just a regular JavaScript class we use to keep track of data we might want to pass into our component. We use the `@tracked` decorator just like in the application code so whenever we make a change, Ember will update the page automatically.
+Using the special `this.setProperties` testing API, we can pass arbitrary values into our component.
+
+Note that the value of `this` here does *not* refer to the component instance. We are not directly accessing or modifying the component's internal states (that would be extremely rude!).
 
-In tests like this, whenever we make changes to state that is rendered, we call `await rerender()`. This gives Ember a chance to update the display before continuing with the queries and assertions that follow. Following this pattern allows us to update these values as needed from the test function.
+Instead, `this` refers to a special *[test context][TODO: link to test context]* object, which we have access to inside the `render` helper. This provides a "bridge" for us to pass dynamic values, in the form of arguments, into our invocation of the component. This allows us to update these values as needed from the test function.
 
 With all our tests passing, we are ready to move on!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/map-test.gjs
+git add tests/integration/components/map-test.js
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass-3.png alt="All our tests are passing"
diff --git a/src/markdown/tutorial/part-1/08-working-with-data.md b/src/markdown/tutorial/part-1/08-working-with-data.md
index 45693b4..403d719 100644
--- a/src/markdown/tutorial/part-1/08-working-with-data.md
+++ b/src/markdown/tutorial/part-1/08-working-with-data.md
@@ -71,12 +71,12 @@ So, now that we've prepared some model data for our route, let's use it in our t
 
 To test that this is working, let's modify our template and try to render the `title` property from our model:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -11,2 +11,4 @@ import Rental from 'super-rentals/components/rental';
- 
-+  <h1>{{@model.title}}</h1>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -6,2 +6,4 @@
+
++<h1>{{@model.title}}</h1>
 +
-   <div class="rentals">
+ <div class="rentals">
 ```
 
 If we look at our page in the browser, we should see our model data reflected as a new header.
@@ -91,7 +91,7 @@ Awesome!
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
 git add app/routes/index.js
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 Okay, now that we know that we have a model to use at our disposal, let's remove some of the hard-coding that we did earlier! Instead of explicitly hard-coding the rental information into our `<Rental>` component, we can pass the model object to our component instead.
@@ -100,63 +100,66 @@ Let's try it out.
 
 First, let's pass in our model to our `<Rental>` component as the `@rental` argument. We will also remove the extraneous `<h1>` tag we added earlier, now that we know things are working:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -11,9 +11,7 @@ import Rental from 'super-rentals/components/rental';
- 
--  <h1>{{@model.title}}</h1>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -6,9 +6,7 @@
+
+-<h1>{{@model.title}}</h1>
 -
-   <div class="rentals">
-     <ul class="results">
--      <li><Rental /></li>
--      <li><Rental /></li>
--      <li><Rental /></li>
-+      <li><Rental @rental={{@model}} /></li>
-+      <li><Rental @rental={{@model}} /></li>
-+      <li><Rental @rental={{@model}} /></li>
-     </ul>
+ <div class="rentals">
+   <ul class="results">
+-    <li><Rental /></li>
+-    <li><Rental /></li>
+-    <li><Rental /></li>
++    <li><Rental @rental={{@model}} /></li>
++    <li><Rental @rental={{@model}} /></li>
++    <li><Rental @rental={{@model}} /></li>
+   </ul>
 ```
 
 By passing in `@model` into the `<Rental>` component as the `@rental` argument, we will have access to our "Grand Old Mansion" model object in the `<Rental>` component's template! Now, we can replace our hard-coded values in this component by using the values that live on our `@rental` model.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental.gjs
-@@ -6,18 +6,18 @@ import Map from 'super-rentals/components/map';
-     <RentalImage
--      src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
--      alt="A picture of Grand Old Mansion"
-+      src={{@rental.image}}
-+      alt="A picture of {{@rental.title}}"
-     />
-     <div class="details">
--      <h3>Grand Old Mansion</h3>
-+      <h3>{{@rental.title}}</h3>
-       <div class="detail owner">
--        <span>Owner:</span> Veruca Salt
-+        <span>Owner:</span> {{@rental.owner}}
-       </div>
-       <div class="detail type">
--        <span>Type:</span> Standalone
-+        <span>Type:</span> {{@rental.type}}
-       </div>
-       <div class="detail location">
--        <span>Location:</span> San Francisco
-+        <span>Location:</span> {{@rental.city}}
-       </div>
-       <div class="detail bedrooms">
--        <span>Number of bedrooms:</span> 15
-+        <span>Number of bedrooms:</span> {{@rental.bedrooms}}
-       </div>
-@@ -25,4 +25,4 @@ import Map from 'super-rentals/components/map';
-     <Map
--      @lat="37.7749"
--      @lng="-122.4194"
-+      @lat={{@rental.location.lat}}
-+      @lng={{@rental.location.lng}}
-       @zoom="9"
-@@ -30,3 +30,3 @@ import Map from 'super-rentals/components/map';
-       @height="150"
--      alt="A map of Grand Old Mansion"
-+      alt="A map of {{@rental.title}}"
-     />
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
+@@ -2,18 +2,18 @@
+   <Rental::Image
+-    src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+-    alt="A picture of Grand Old Mansion"
++    src={{@rental.image}}
++    alt="A picture of {{@rental.title}}"
+   />
+   <div class="details">
+-    <h3>Grand Old Mansion</h3>
++    <h3>{{@rental.title}}</h3>
+     <div class="detail owner">
+-      <span>Owner:</span> Veruca Salt
++      <span>Owner:</span> {{@rental.owner}}
+     </div>
+     <div class="detail type">
+-      <span>Type:</span> Standalone
++      <span>Type:</span> {{@rental.type}}
+     </div>
+     <div class="detail location">
+-      <span>Location:</span> San Francisco
++      <span>Location:</span> {{@rental.city}}
+     </div>
+     <div class="detail bedrooms">
+-      <span>Number of bedrooms:</span> 15
++      <span>Number of bedrooms:</span> {{@rental.bedrooms}}
+     </div>
+@@ -21,8 +21,8 @@
+   <Map
+-    @lat="37.7749"
+-    @lng="-122.4194"
+-    @zoom="9"
+-    @width="150"
+-    @height="150"
+-    alt="A map of Grand Old Mansion"
++    @lat={{@rental.location.lat}}
++    @lng={{@rental.location.lng}}
++    @zoom="9"
++    @width="150"
++    @height="150"
++    alt="A map of {{@rental.title}}"
+   />
 ```
 
 Since the model object contains exactly the same data as the previously-hard-coded "Grand Old Mansion", the page should look exactly the same as before the change.
@@ -170,18 +173,14 @@ Now, we have one last thing to do: update the tests to reflect this change.
 
 Because component tests are meant to render and test a single component in isolation from the rest of the app, they do not perform any routing, which means we won't have access to the same data returned from the `model` hook.
 
-Therefore, in our `<Rental>` component's test, we will have to feed the data into it some other way. We can do this using the same `State` mechanism we learned about from the [previous chapter](../reusable-components/).
+Therefore, in our `<Rental>` component's test, we will have to feed the data into it some other way. We can do this using the `setProperties` we learned about from the [previous chapter](../reusable-components/).
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental-test.gjs
-@@ -4,2 +4,3 @@ import { render } from '@ember/test-helpers';
- import Rental from 'super-rentals/components/rental';
-+import { tracked } from '@glimmer/tracking';
- 
-@@ -9,3 +10,24 @@ module('Integration | Component | rental', function (hooks) {
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
+@@ -9,3 +9,22 @@
    test('it renders information about a rental property', async function (assert) {
--    await render(<template><Rental /></template>);
-+    class State { 
-+      @tracked rental = {
+-    await render(hbs`<Rental />`);
++    this.setProperties({
++      rental: {
 +        title: 'Grand Old Mansion',
 +        owner: 'Veruca Salt',
 +        city: 'San Francisco',
@@ -196,22 +195,20 @@ Therefore, in our `<Rental>` component's test, we will have to feed the data int
 +          'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
 +        description:
 +          'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
-+      };
-+    };
-+
-+    const state = new State();
++      },
++    });
 +
-+    await render(<template><Rental @rental={{state.rental}} /></template>);
- 
++    await render(hbs`<Rental @rental={{this.rental}} />`);
+
 ```
 
 Notice that we also need to update the invocation of the `<Rental>` component in the `render` function call to also have a `@rental` argument passed into it. If we run our tests now, they should all pass!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental.gjs
-git add app/templates/index.gjs
-git add tests/integration/components/rental-test.gjs
+git add app/components/rental.hbs
+git add app/templates/index.hbs
+git add tests/integration/components/rental-test.js
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass.png alt="All our tests are passing"
@@ -351,16 +348,16 @@ The last change we'll need to make is to our `index.hbs` route template, where w
 
 Let's see how.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -13,5 +13,5 @@ import Rental from 'super-rentals/components/rental';
-     <ul class="results">
--      <li><Rental @rental={{@model}} /></li>
--      <li><Rental @rental={{@model}} /></li>
--      <li><Rental @rental={{@model}} /></li>
-+      {{#each @model as |rental|}}
-+        <li><Rental @rental={{rental}} /></li>
-+      {{/each}}
-     </ul>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -8,5 +8,5 @@
+   <ul class="results">
+-    <li><Rental @rental={{@model}} /></li>
+-    <li><Rental @rental={{@model}} /></li>
+-    <li><Rental @rental={{@model}} /></li>
++    {{#each @model as |rental|}}
++      <li><Rental @rental={{rental}} /></li>
++    {{/each}}
+   </ul>
 ```
 
 We can use the `{{#each}}...{{/each}}` syntax to iterate and loop through the array returned by the model hook. For each iteration through the array&mdash;for each item in the array&mdash;we will render the block that is passed to it once. In our case, the block is our `<Rental>` component, surrounded by `<li>` tags.
@@ -381,7 +378,7 @@ Better yet, all of our tests are still passing too!
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
 git add app/routes/index.js
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass-2.png alt="All our tests are passing"
diff --git a/src/markdown/tutorial/part-2/09-route-params.md b/src/markdown/tutorial/part-2/09-route-params.md
index d56365d..5ee2b2f 100644
--- a/src/markdown/tutorial/part-2/09-route-params.md
+++ b/src/markdown/tutorial/part-2/09-route-params.md
@@ -38,26 +38,22 @@ git add app/router.js
 
 Now that we have this route in place, we can update our `<Rental>` component to actually *link* to each of our detailed rental properties!
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental.gjs
-@@ -2,2 +2,3 @@ import RentalImage from 'super-rentals/components/rental/image';
- import Map from 'super-rentals/components/map';
-+import { LinkTo } from '@ember/routing';
- 
-@@ -10,3 +11,7 @@ import Map from 'super-rentals/components/map';
-     <div class="details">
--      <h3>{{@rental.title}}</h3>
-+      <h3>
-+        <LinkTo @route="rental" @model={{@rental}}>
-+          {{@rental.title}}
-+        </LinkTo>
-+      </h3>
-       <div class="detail owner">
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
+@@ -6,3 +6,7 @@
+   <div class="details">
+-    <h3>{{@rental.title}}</h3>
++    <h3>
++      <LinkTo @route="rental" @model={{@rental}}>
++        {{@rental.title}}
++      </LinkTo>
++    </h3>
+     <div class="detail owner">
 ```
 
 Since we know that we're linking to the `rental` route that we just created, we also know that this route requires a dynamic segment. Thus, we need to pass in a `@model` argument so that the `<LinkTo>` component can generate the appropriate URL for that model.
 
 ```run:command hidden=true cwd=super-rentals
-git add app/components/rental.gjs
+git add app/components/rental.hbs
 ```
 
 Let's see this in action. If we go back to our browser and refresh the page, we should see our links, but something isn't quite right yet!
@@ -101,12 +97,12 @@ git add app/routes/index.js
 
 Alright, we have just one more step left here: updating the tests. We can add an `id` to the rental that we defined in our test using `setProperties` and add an assertion for the expected URL, too.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental-test.gjs
-@@ -12,2 +12,3 @@ module('Integration | Component | rental', function (hooks) {
-       @tracked rental = {
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
+@@ -11,2 +11,3 @@
+       rental: {
 +        id: 'grand-old-mansion',
          title: 'Grand Old Mansion',
-@@ -35,2 +36,5 @@ module('Integration | Component | rental', function (hooks) {
+@@ -30,2 +31,5 @@
      assert.dom('article h3').hasText('Grand Old Mansion');
 +    assert
 +      .dom('article h3 a')
@@ -115,7 +111,7 @@ Alright, we have just one more step left here: updating the tests. We can add an
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/rental-test.gjs
+git add tests/integration/components/rental-test.js
 ```
 
 If we run the tests in the browser, everything should just pass!
@@ -169,7 +165,7 @@ git add app/routes/rental.js
 
 ## Displaying Model Details with a Component
 
-Next, let's make a `<RentalDetailed>` component.
+Next, let's make a `<Rental::Detailed>` component.
 
 ```run:command cwd=super-rentals
 ember generate component rental/detailed
@@ -177,63 +173,58 @@ ember generate component rental/detailed
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/detailed.gjs
-git add tests/integration/components/rental/detailed-test.gjs
+git add app/components/rental/detailed.hbs
+git add tests/integration/components/rental/detailed-test.js
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/detailed.gjs
-@@ -1,3 +1,50 @@
-+import Jumbo from 'super-rentals/components/jumbo';
-+import RentalImage from 'super-rentals/components/rental/image';
-+import Map from 'super-rentals/components/map';
-+
- <template>
--  {{yield}}
-+  <Jumbo>
-+    <h2>{{@rental.title}}</h2>
-+    <p>Nice find! This looks like a nice place to stay near {{@rental.city}}.</p>
-+    <a href="#" target="_blank" rel="external nofollow noopener noreferrer" class="share button">
-+      Share on Twitter
-+    </a>
-+  </Jumbo>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/detailed.hbs
+@@ -1 +1,44 @@
+-{{yield}}
+\ No newline at end of file
++<Jumbo>
++  <h2>{{@rental.title}}</h2>
++  <p>Nice find! This looks like a nice place to stay near {{@rental.city}}.</p>
++  <a href="#" target="_blank" rel="external nofollow noopener noreferrer" class="share button">
++    Share on Twitter
++  </a>
++</Jumbo>
 +
-+  <article class="rental detailed">
-+    <RentalImage
-+      src={{@rental.image}}
-+      alt="A picture of {{@rental.title}}"
-+    />
++<article class="rental detailed">
++  <Rental::Image
++    src={{@rental.image}}
++    alt="A picture of {{@rental.title}}"
++  />
 +
-+    <div class="details">
-+      <h3>About {{@rental.title}}</h3>
++  <div class="details">
++    <h3>About {{@rental.title}}</h3>
 +
-+      <div class="detail owner">
-+        <span>Owner:</span> {{@rental.owner}}
-+      </div>
-+      <div class="detail type">
-+        <span>Type:</span> {{@rental.type}} – {{@rental.category}}
-+      </div>
-+      <div class="detail location">
-+        <span>Location:</span> {{@rental.city}}
-+      </div>
-+      <div class="detail bedrooms">
-+        <span>Number of bedrooms:</span> {{@rental.bedrooms}}
-+      </div>
-+      <div class="detail description">
-+        <p>{{@rental.description}}</p>
-+      </div>
++    <div class="detail owner">
++      <span>Owner:</span> {{@rental.owner}}
++    </div>
++    <div class="detail type">
++      <span>Type:</span> {{@rental.type}} – {{@rental.category}}
++    </div>
++    <div class="detail location">
++      <span>Location:</span> {{@rental.city}}
++    </div>
++    <div class="detail bedrooms">
++      <span>Number of bedrooms:</span> {{@rental.bedrooms}}
 +    </div>
++    <div class="detail description">
++      <p>{{@rental.description}}</p>
++    </div>
++  </div>
 +
-+    <Map
-+      @lat={{@rental.location.lat}}
-+      @lng={{@rental.location.lng}}
-+      @zoom="12"
-+      @width="894"
-+      @height="600"
-+      alt="A map of {{@rental.title}}"
-+      class="large"
-+    />
-+  </article>
- </template>
++  <Map
++    @lat={{@rental.location.lat}}
++    @lng={{@rental.location.lng}}
++    @zoom="12"
++    @width="894"
++    @height="600"
++    alt="A map of {{@rental.title}}"
++    class="large"
++  />
++</article>
 ```
 
 This component is similar to our `<Rental>` component, except for the following differences.
@@ -247,52 +238,38 @@ This component is similar to our `<Rental>` component, except for the following
 
 Now that we have this template in place, we can add some tests for this new component of ours.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rental/detailed-test.gjs
-@@ -3,3 +3,10 @@ import { setupRenderingTest } from 'super-rentals/tests/helpers';
- import { render } from '@ember/test-helpers';
--import Detailed from 'super-rentals/components/rental/detailed';
-+import { tracked } from '@glimmer/tracking';
-+import RentalDetailed from 'super-rentals/components/rental/detailed';
-+
-+class State {
-+  @tracked rental = {};
-+}
-+
-+const state = new State();
- 
-@@ -8,20 +15,48 @@ module('Integration | Component | rental/detailed', function (hooks) {
- 
+```run:file:patch lang=handlebars cwd=super-rentals filename=tests/integration/components/rental/detailed-test.js
+@@ -8,18 +8,46 @@
+
 -  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
 +  hooks.beforeEach(function () {
-+    state.rental = {
-+      id: 'grand-old-mansion',
-+      title: 'Grand Old Mansion',
-+      owner: 'Veruca Salt',
-+      city: 'San Francisco',
-+      location: {
-+        lat: 37.7749,
-+        lng: -122.4194,
++    this.setProperties({
++      rental: {
++        id: 'grand-old-mansion',
++        title: 'Grand Old Mansion',
++        owner: 'Veruca Salt',
++        city: 'San Francisco',
++        location: {
++          lat: 37.7749,
++          lng: -122.4194,
++        },
++        category: 'Estate',
++        type: 'Standalone',
++        bedrooms: 15,
++        image:
++          'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
++        description:
++          'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
 +      },
-+      category: 'Estate',
-+      type: 'Standalone',
-+      bedrooms: 15,
-+      image:
-+        'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
-+      description:
-+        'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
-+    };
++    });
 +  });
- 
--    await render(<template><Detailed /></template>);
+
+-    await render(hbs`<Rental::Detailed />`);
 +  test('it renders a header with a share button', async function (assert) {
-+    await render(<template>
-+      <RentalDetailed @rental={{state.rental}} />
-+    </template>);
- 
++    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);
+
 -    assert.dom().hasText('');
 +    assert.dom('.jumbo').exists();
 +    assert.dom('.jumbo h2').containsText('Grand Old Mansion');
@@ -301,16 +278,16 @@ Now that we have this template in place, we can add some tests for this new comp
 +      .containsText('a nice place to stay near San Francisco');
 +    assert.dom('.jumbo a.button').containsText('Share on Twitter');
 +  });
- 
+
 -    // Template block usage:
-+  test('it renders detailed information about a rental property', async function (assert) {
-     await render(<template>
--      <Detailed>
+-    await render(hbs`
+-      <Rental::Detailed>
 -        template block text
--      </Detailed>
-+      <RentalDetailed @rental={{state.rental}} />
-     </template>);
- 
+-      </Rental::Detailed>
+-    `);
++  test('it renders detailed information about a rental property', async function (assert) {
++    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);
+
 -    assert.dom().hasText('template block text');
 +    assert.dom('article').hasClass('rental');
 +    assert.dom('article h3').containsText('About Grand Old Mansion');
@@ -331,8 +308,8 @@ We can use the `beforeEach` hook to share some boilerplate code, which allows us
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/detailed.gjs
-git add tests/integration/components/rental/detailed-test.gjs
+git add app/components/rental/detailed.hbs
+git add tests/integration/components/rental/detailed-test.js
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=pass-2.png alt="Tests are passing as expected"
@@ -342,14 +319,10 @@ wait  #qunit-banner.qunit-pass
 
 ## Adding a Route Template
 
-Finally, let's add a `rental` template to actually *invoke* our `<RentalDetailed>` component, as well as adding an acceptance test for this new behavior in our app.
-
-```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/rental.gjs
-import RentalDetailed from 'super-rentals/components/rental/detailed';
+Finally, let's add a `rental` template to actually *invoke* our `<Rental::Detailed>` component, as well as adding an acceptance test for this new behavior in our app.
 
-<template>
-  <RentalDetailed @rental={{@model}} />
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/rental.hbs
+<Rental::Detailed @rental={{@model}} />
 ```
 
 ```run:file:patch lang=js cwd=super-rentals filename=tests/acceptance/super-rentals-test.js
@@ -387,7 +360,7 @@ And if we run our tests now...
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/templates/rental.gjs
+git add app/templates/rental.hbs
 git add tests/acceptance/super-rentals-test.js
 ```
 
diff --git a/src/markdown/tutorial/part-2/10-service-injection.md b/src/markdown/tutorial/part-2/10-service-injection.md
index 2b6ea9b..07b89cc 100644
--- a/src/markdown/tutorial/part-2/10-service-injection.md
+++ b/src/markdown/tutorial/part-2/10-service-injection.md
@@ -48,23 +48,49 @@ For our app, it probably makes the most sense for our share button to automatica
 Now that we have a better understanding of the scope of this feature, let's get to work and generate a `share-button` component.
 
 ```run:command cwd=super-rentals
-ember generate component share-button -gc
+ember generate component share-button --with-component-class
 ```
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/share-button.gjs
-git add tests/integration/components/share-button-test.gjs
+git add app/components/share-button.hbs
+git add app/components/share-button.js
+git add tests/integration/components/share-button-test.js
 ```
 
-Let's start with the template that was generated for this component. We already have some markup for the share button in the `<RentalDetailed>` component we made earlier, so let's just copy that over into our new `<ShareButton>` component.
+Let's start with the template that was generated for this component. We already have some markup for the share button in the `<Rental::Detailed>` component we made earlier, so let's just copy that over into our new `<ShareButton>` component.
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/share-button.hbs
+@@ -1 +1,9 @@
+-{{yield}}
+\ No newline at end of file
++<a
++  ...attributes
++  href={{this.shareURL}}
++  target="_blank"
++  rel="external nofollow noopener noreferrer"
++  class="share button"
++>
++  {{yield}}
++</a>
+```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/share-button.gjs
-@@ -1,6 +1,39 @@
- import Component from '@glimmer/component';
-+const TWEET_INTENT = 'https://twitter.com/intent/tweet';
+Notice that we added `...attributes` to our `<a>` tag here. As [we learned earlier](../../part-1/reusable-components/) when working on our `<Map>` component, the order of `...attributes` relative to other attributes is significant. We don't want to allow `href`, `target`, or `rel` to be overridden by the invoker, so we specified those attributes after `...attributes`.
 
- export default class ShareButton extends Component {
+But what happens to the `class` attribute? Well, as it turns out, the `class` attribute is the one exception to how these component attributes are overridden! While all other HTML attributes follow the "last-write wins" rule, the values for the `class` attribute are merged together (concatenated) instead. There is a good reason for this: it allows the component to specify whatever classes that *it* needs, while allowing the invokers of the component to freely add any extra classes that *they* need for styling purposes.
+
+We also have a `{{yield}}` inside of our `<a>` tag so that we can customize the text for the link later when invoking the `<ShareButton>` component.
+
+## Accessing the Current Page URL
+
+Whew! Let's look at the JavaScript class next.
+
+```run:file:patch lang=js cwd=super-rentals filename=app/components/share-button.js
+@@ -3 +3,27 @@
+-export default class ShareButton extends Component {}
++const TWEET_INTENT = 'https://twitter.com/intent/tweet';
++
++export default class ShareButton extends Component {
 +  get currentURL() {
 +    return window.location.href;
 +  }
@@ -88,54 +114,28 @@ Let's start with the template that was generated for this component. We already
 +
 +    return url;
 +  }
-+
-   <template>
--    {{yield}}
-+    <a
-+      ...attributes
-+      href={{this.shareURL}}
-+      target="_blank"
-+      rel="external nofollow noopener noreferrer"
-+      class="share button"
-+    >
-+      {{yield}}
-+    </a>
-   </template>
++}
 ```
 
-Looking at the template section, notice that we added `...attributes` to our `<a>` tag here. As [we learned earlier](../../part-1/reusable-components/) when working on our `<Map>` component, the order of `...attributes` relative to other attributes is significant. We don't want to allow `href`, `target`, or `rel` to be overridden by the invoker, so we specified those attributes after `...attributes`.
-
-But what happens to the `class` attribute? Well, as it turns out, the `class` attribute is the one exception to how these component attributes are overridden! While all other HTML attributes follow the "last-write wins" rule, the values for the `class` attribute are merged together (concatenated) instead. There is a good reason for this: it allows the component to specify whatever classes that *it* needs, while allowing the invokers of the component to freely add any extra classes that *they* need for styling purposes.
-
-We also have a `{{yield}}` inside of our `<a>` tag so that we can customize the text for the link later when invoking the `<ShareButton>` component.
-
-## Accessing the Current Page URL
-
-Whew! Let's look at the JavaScript part next.
-
 The key functionality of this class is to build the appropriate URL for the Twitter Web Intent API, which is exposed to the template via the `this.shareURL` getter. It mainly involves "gluing together" the component's arguments and setting the appropriate query params on the resulting URL. Conveniently, the browser provides a handy [`URL` class](https://javascript.info/url) that handles escaping and joining of query params for us.
 
 The other notable functionality of this class has to do with getting the current page's URL and automatically adding it to the Twitter Intent URL. To accomplish this, we defined a `currentURL` getter that simply used the browser's global [`Location` object](https://developer.mozilla.org/en-US/docs/Web/API/Window/location), which we could access at `window.location`. Among other things, it has a `href` property (`window.location.href`) that reports the current page's URL.
 
-Let's put this component to use by invoking it from the `<RentalDetailed>` component!
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rental/detailed.gjs
-@@ -3,2 +3,3 @@ import RentalImage from 'super-rentals/components/rental/image';
- import Map from 'super-rentals/components/map';
-+import ShareButton from 'super-rentals/components/share-button';
- 
-@@ -8,5 +9,9 @@ import Map from 'super-rentals/components/map';
-     <p>Nice find! This looks like a nice place to stay near {{@rental.city}}.</p>
--    <a href="#" target="_blank" rel="external nofollow noopener noreferrer" class="share button">
-+    <ShareButton
-+      @text="Check out {{@rental.title}} on Super Rentals!"
-+      @hashtags="vacation,travel,authentic,blessed,superrentals"
-+      @via="emberjs"
-+    >
-       Share on Twitter
--    </a>
-+    </ShareButton>
-   </Jumbo>
+Let's put this component to use by invoking it from the `<Rental::Detailed>` component!
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/detailed.hbs
+@@ -3,5 +3,9 @@
+   <p>Nice find! This looks like a nice place to stay near {{@rental.city}}.</p>
+-  <a href="#" target="_blank" rel="external nofollow noopener noreferrer" class="share button">
++  <ShareButton
++    @text="Check out {{@rental.title}} on Super Rentals!"
++    @hashtags="vacation,travel,authentic,blessed,superrentals"
++    @via="emberjs"
++  >
+     Share on Twitter
+-  </a>
++  </ShareButton>
+ </Jumbo>
 ```
 
 With that, we should have a working share button!
@@ -151,8 +151,9 @@ wait  .share.button
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rental/detailed.gjs
-git add app/components/share-button.gjs
+git add app/components/rental/detailed.hbs
+git add app/components/share-button.hbs
+git add app/components/share-button.js
 git add tests/acceptance/super-rentals-test.js
 ```
 
@@ -211,12 +212,11 @@ However, during tests, the router is configured to maintain the "logical" URL in
 
 To fix our problem, we would need to do the same. Ember exposes this internal state through the *[router service](https://api.emberjs.com/ember/release/classes/RouterService)*, which we can *[inject](../../../services/#toc_accessing-services)* into our component:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/share-button.gjs
-@@ -1,2 +1,3 @@
- import Component from '@glimmer/component';
+```run:file:patch lang=js cwd=super-rentals filename=app/components/share-button.js
+@@ -1 +1,2 @@
 +import { service } from '@ember/service';
- const TWEET_INTENT = 'https://twitter.com/intent/tweet';
-@@ -4,4 +5,6 @@ const TWEET_INTENT = 'https://twitter.com/intent/tweet';
+ import Component from '@glimmer/component';
+@@ -5,4 +6,6 @@
  export default class ShareButton extends Component {
 +  @service router;
 +
@@ -232,7 +232,7 @@ With this change, everything is now working the way we intended.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/share-button.gjs
+git add app/components/share-button.js
 git add tests/acceptance/super-rentals-test.js
 ```
 
@@ -257,49 +257,47 @@ More importantly, services are designed to be easily *swappable*. In our compone
 
 We will take advantage of this capability in our component test:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/share-button-test.gjs
-@@ -2,2 +2,3 @@ import { module, test } from 'qunit';
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/share-button-test.js
+@@ -2,2 +2,3 @@
  import { setupRenderingTest } from 'super-rentals/tests/helpers';
 +import Service from '@ember/service';
  import { render } from '@ember/test-helpers';
-@@ -5,23 +6,36 @@ import ShareButton from 'super-rentals/components/share-button';
- 
--module('Integration | Component | share-button', function (hooks) {
--  setupRenderingTest(hooks);
+@@ -5,2 +6,13 @@
+
 +const MOCK_URL = new URL(
 +  '/foo/bar?baz=true#some-section',
 +  window.location.origin,
 +);
- 
--  test('it renders', async function (assert) {
--    // Updating values is achieved using autotracking, just like in app code. For example:
--    // class State { @tracked myProperty = 0; }; const state = new State();
--    // and update using state.myProperty = 1; await rerender();
--    // Handle any actions with function myAction(val) { ... };
++
 +class MockRouterService extends Service {
 +  get currentURL() {
 +    return '/foo/bar?baz=true#some-section';
 +  }
 +}
- 
--    await render(<template><ShareButton /></template>);
-+module('Integration | Component | share-button', function (hooks) {
-+  setupRenderingTest(hooks);
- 
++
+ module('Integration | Component | share-button', function (hooks) {
+@@ -8,18 +20,20 @@
+
+-  test('it renders', async function (assert) {
+-    // Set any properties with this.set('myProperty', 'value');
+-    // Handle any actions with this.set('myAction', function(val) { ... });
+-
+-    await render(hbs`<ShareButton />`);
+-
 -    assert.dom().hasText('');
 +  hooks.beforeEach(function () {
 +    this.owner.register('service:router', MockRouterService);
 +  });
- 
+
 -    // Template block usage:
-+  test('basic usage', async function (assert) {
-     await render(<template>
+-    await render(hbs`
 -      <ShareButton>
 -        template block text
 -      </ShareButton>
-+      <ShareButton>Tweet this!</ShareButton>
-     </template>);
- 
+-    `);
++  test('basic usage', async function (assert) {
++    await render(hbs`<ShareButton>Tweet this!</ShareButton>`);
+
 -    assert.dom().hasText('template block text');
 +    assert
 +      .dom('a')
@@ -323,31 +321,27 @@ By using service injections and mocks, Ember allows us to build *[loosely couple
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/share-button-test.gjs
+git add tests/integration/components/share-button-test.js
 ```
 
 While we are here, let's add some more tests for the various functionalities of the `<ShareButton>` component:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/share-button-test.gjs
-@@ -3,3 +3,3 @@ import { setupRenderingTest } from 'super-rentals/tests/helpers';
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/share-button-test.js
+@@ -3,3 +3,3 @@
  import Service from '@ember/service';
 -import { render } from '@ember/test-helpers';
 +import { find, render } from '@ember/test-helpers';
- import ShareButton from 'super-rentals/components/share-button';
-@@ -17,2 +17,8 @@ class MockRouterService extends Service {
- 
-+function tweetParam(param) {
-+  let link = find('a');
-+  let url = new URL(link.href);
-+  return url.searchParams.get(param);
-+}
-+
- module('Integration | Component | share-button', function (hooks) {
-@@ -22,2 +28,3 @@ module('Integration | Component | share-button', function (hooks) {
+ import { hbs } from 'ember-cli-htmlbars';
+@@ -22,2 +22,8 @@
      this.owner.register('service:router', MockRouterService);
 +
++    this.tweetParam = (param) => {
++      let link = find('a');
++      let url = new URL(link.href);
++      return url.searchParams.get(param);
++    };
    });
-@@ -33,6 +40,3 @@ module('Integration | Component | share-button', function (hooks) {
+@@ -31,6 +37,3 @@
        .hasAttribute('rel', 'external nofollow noopener noreferrer')
 -      .hasAttribute(
 -        'href',
@@ -355,40 +349,37 @@ While we are here, let's add some more tests for the various functionalities of
 -      )
 +      .hasAttribute('href', /^https:\/\/twitter\.com\/intent\/tweet/)
        .hasClass('share')
-@@ -40,3 +44,55 @@ module('Integration | Component | share-button', function (hooks) {
+@@ -38,2 +41,50 @@
        .containsText('Tweet this!');
 +
-+    assert.strictEqual(tweetParam('url'), MOCK_URL.href);
++    assert.strictEqual(this.tweetParam('url'), MOCK_URL.href);
 +  });
 +
 +  test('it supports passing @text', async function (assert) {
-+    await render(<template>
-+      <ShareButton @text="Hello Twitter!">Tweet this!</ShareButton>
-+    </template>);
++    await render(
++      hbs`<ShareButton @text="Hello Twitter!">Tweet this!</ShareButton>`,
++    );
 +
-+    assert.strictEqual(tweetParam('text'), 'Hello Twitter!');
++    assert.strictEqual(this.tweetParam('text'), 'Hello Twitter!');
 +  });
 +
 +  test('it supports passing @hashtags', async function (assert) {
-+    await render(<template>
-+      <ShareButton @hashtags="foo,bar,baz">Tweet this!</ShareButton>
-+    </template>);
++    await render(
++      hbs`<ShareButton @hashtags="foo,bar,baz">Tweet this!</ShareButton>`,
++    );
 +
-+    assert.strictEqual(tweetParam('hashtags'), 'foo,bar,baz');
++    assert.strictEqual(this.tweetParam('hashtags'), 'foo,bar,baz');
 +  });
 +
 +  test('it supports passing @via', async function (assert) {
-+    await render(<template>
-+      <ShareButton @via="emberjs">Tweet this!</ShareButton>
-+    </template>);
-+
-+    assert.strictEqual(tweetParam('via'), 'emberjs');
-   });
++    await render(hbs`<ShareButton @via="emberjs">Tweet this!</ShareButton>`);
++    assert.strictEqual(this.tweetParam('via'), 'emberjs');
++  });
 +
 +  test('it supports adding extra classes', async function (assert) {
-+    await render(<template>
-+      <ShareButton class="extra things">Tweet this!</ShareButton>
-+    </template>);
++    await render(
++      hbs`<ShareButton class="extra things">Tweet this!</ShareButton>`,
++    );
 +
 +    assert
 +      .dom('a')
@@ -399,27 +390,25 @@ While we are here, let's add some more tests for the various functionalities of
 +  });
 +
 +  test('the target, rel and href attributes cannot be overridden', async function (assert) {
-+    await render(<template>
-+      <ShareButton target="_self" rel="" href="/">Not a Tweet!</ShareButton>
-+    </template>);
++    await render(
++      hbs`<ShareButton target="_self" rel="" href="/">Not a Tweet!</ShareButton>`,
++    );
 +
 +    assert
 +      .dom('a')
 +      .hasAttribute('target', '_blank')
 +      .hasAttribute('rel', 'external nofollow noopener noreferrer')
 +      .hasAttribute('href', /^https:\/\/twitter\.com\/intent\/tweet/);
-+   });
-+
- });
+   });
 ```
 
-The main goal here is to test the key functionalities of the component individually. That way, if any of these features regresses in the future, these tests can help pinpoint the source of the problem for us. Because a lot of these tests require parsing the URL and accessing its query params, we setup our own `tweetParam` utility test helper function. This pattern allows us to easily share functionality between tests. We were even able to refactor the previous test using this new helper!
+The main goal here is to test the key functionalities of the component individually. That way, if any of these features regresses in the future, these tests can help pinpoint the source of the problem for us. Because a lot of these tests require parsing the URL and accessing its query params, we setup our own `this.tweetParam` test helper function in the `beforeEach` hook. This pattern allows us to easily share functionality between tests. We were even able to refactor the previous test using this new helper!
 
 With that, everything should be good to go, and our `<ShareButton>` component should now work everywhere!
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/share-button-test.gjs
+git add tests/integration/components/share-button-test.js
 ```
 
 ```run:screenshot width=1024 height=960 retina=true filename=pass-2.png alt="All the tests pass!"
diff --git a/src/markdown/tutorial/part-2/12-provider-components.md b/src/markdown/tutorial/part-2/12-provider-components.md
index dc4191e..f1643ca 100644
--- a/src/markdown/tutorial/part-2/12-provider-components.md
+++ b/src/markdown/tutorial/part-2/12-provider-components.md
@@ -23,24 +23,24 @@ As our app grows and as we add more features to it, one thing that would be real
 
 Well, we can start simple. Before we worry about implementing the "search" part of this feature, let's just get something on the page. The first step is to add a form with an `<input>` tag to our `index` page, and make it look pretty with a class.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -12,2 +12,9 @@ import Rental from 'super-rentals/components/rental';
-   <div class="rentals">
-+    <form>
-+      <label>
-+        <span>Where would you like to stay?</span>
-+        <input class="light">
-+      </label>
-+    </form>
-+  
-     <ul class="results">
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -7,2 +7,9 @@
+ <div class="rentals">
++  <form>
++    <label>
++      <span>Where would you like to stay?</span>
++      <input class="light">
++    </label>
++  </form>
++
+   <ul class="results">
 ```
 
 Now if we refresh the UI, it has an `<input>` element on the page.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 ```run:screenshot width=1024 retina=true filename=homepage-with-inert-search.png alt="The homepage with a search box, but it doesn't work yet."
@@ -58,62 +58,45 @@ But where are we going to put this newly-introduced piece of state? In order to
 
 Wait...why don't we just refactor the search box into a component? Once we do that, this will all be a bit easier&mdash;hooray!
 
-Let's start simple again and begin our refactor by creating a new component, which we will call `<Rentals>`&mdash;notice the "s" at the end. We know we're going to add some state, so we're using a Glimmer component.
-
-```run:file:create lang=gjs cwd=super-rentals filename=app/components/rentals.gjs
-import Component from '@glimmer/component';
-import Rental from 'super-rentals/components/rental';
-
-export default class Rentals extends Component {
-  <template>
-    <div class="rentals">
-      <form>
-        <label>
-          <span>Where would you like to stay?</span>
-          <input class="light">
-        </label>
-      </form>
-
-      <ul class="results">
-        {{#each @rentals as |rental|}}
-          <li><Rental @rental={{rental}} /></li>
-        {{/each}}
-      </ul>
-    </div>
-  </template>
-}
-```
-
-```run:command hidden=true cwd=super-rentals
-git add app/components/rentals.gjs
+Let's start simple again and begin our refactor by creating a new template for our component, which we will call `rentals.hbs`.
+
+```run:file:create lang=handlebars cwd=super-rentals filename=app/components/rentals.hbs
+<div class="rentals">
+  <form>
+    <label>
+      <span>Where would you like to stay?</span>
+      <input class="light">
+    </label>
+  </form>
+
+  <ul class="results">
+    {{#each @rentals as |rental|}}
+      <li><Rental @rental={{rental}} /></li>
+    {{/each}}
+  </ul>
+</div>
 ```
 
-There is one minor change to note here: while extracting our markup into a component, we also renamed the `@model` argument to be `@rentals` instead, just in order to be a little more specific about what we're iterating over in our `{{#each}}` loop. Otherwise, all we're doing here is copy-pasting what was on our `index.gjs` page into our new component template. Now we just need to actually use our new component in the index template where we started this whole refactor! Let's import and render our `<Rentals>` component in our `index.gjs` template.
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -2,3 +2,3 @@ import { LinkTo } from '@ember/routing';
- import Jumbo from 'super-rentals/components/jumbo';
--import Rental from 'super-rentals/components/rental';
-+import Rentals from 'super-rentals/components/rentals';
- 
-@@ -11,16 +11,3 @@ import Rental from 'super-rentals/components/rental';
- 
--  <div class="rentals">
--    <form>
--      <label>
--        <span>Where would you like to stay?</span>
--        <input class="light">
--      </label>
--    </form>
--  
--    <ul class="results">
--      {{#each @model as |rental|}}
--        <li><Rental @rental={{rental}} /></li>
--      {{/each}}
--    </ul>
--  </div>
-+  <Rentals @rentals={{@model}} />
- </template>
+There is one minor change to note here: while extracting our markup into a component, we also renamed the `@model` argument to be `@rentals` instead, just in order to be a little more specific about what we're iterating over in our `{{#each}}` loop. Otherwise, all we're doing here is copy-pasting what was on our `index.hbs` page into our new component template. Now we just need to actually use our new component in the index template where we started this whole refactor! Let's render our `<Rentals>` component in our `index.hbs` template.
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -6,15 +6,2 @@
+
+-<div class="rentals">
+-  <form>
+-    <label>
+-      <span>Where would you like to stay?</span>
+-      <input class="light">
+-    </label>
+-  </form>
+-
+-  <ul class="results">
+-    {{#each @model as |rental|}}
+-      <li><Rental @rental={{rental}} /></li>
+-    {{/each}}
+-  </ul>
+-</div>
++<Rentals @rentals={{@model}} />
 ```
 
 Remember the small change we made in the markup when we extracted our `<Rentals>` component? We renamed the `@model` argument to be `@rentals`. Because we made that change in our component, we now need to pass the `@model` argument into the `<Rentals>` component as `@rentals`. Once we do this, everything should be wired up properly so that the `@model` is passed into `<Rentals>` as `@rentals`, just as we expect.
@@ -122,8 +105,8 @@ Let's check our UI as well to make sure that we didn't break anything during thi
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rentals.gjs
-git add app/templates/index.gjs
+git add app/components/rentals.hbs
+git add app/templates/index.hbs
 ```
 
 ```run:screenshot width=1024 retina=true filename=homepage-with-rentals-component.png alt="The homepage looks exactly the same as before!"
@@ -135,78 +118,73 @@ Awesome, it looks exactly the same!
 
 Now that we've finished our refactor and tried it out in the UI, let's write a test for it as well.
 
-```run:file:create lang=gjs cwd=super-rentals filename=tests/integration/components/rentals-test.gjs
+```run:file:create lang=js cwd=super-rentals filename=tests/integration/components/rentals-test.js
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'super-rentals/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { tracked } from '@glimmer/tracking';
-import Rentals from 'super-rentals/components/rentals';
-
-class State {
-  @tracked rentals = {};
-}
-
-const state = new State();
+import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | rentals', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders all given rental properties by default', async function (assert) {
-    state.rentals = [
-      {
-        id: 'grand-old-mansion',
-        title: 'Grand Old Mansion',
-        owner: 'Veruca Salt',
-        city: 'San Francisco',
-        location: {
-          lat: 37.7749,
-          lng: -122.4194,
+    this.setProperties({
+      rentals: [
+        {
+          id: 'grand-old-mansion',
+          title: 'Grand Old Mansion',
+          owner: 'Veruca Salt',
+          city: 'San Francisco',
+          location: {
+            lat: 37.7749,
+            lng: -122.4194,
+          },
+          category: 'Estate',
+          type: 'Standalone',
+          bedrooms: 15,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
+          description:
+            'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
         },
-        category: 'Estate',
-        type: 'Standalone',
-        bedrooms: 15,
-        image:
-          'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
-        description:
-          'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
-      },
-      {
-        id: 'urban-living',
-        title: 'Urban Living',
-        owner: 'Mike Teavee',
-        city: 'Seattle',
-        location: {
-          lat: 47.6062,
-          lng: -122.3321,
+        {
+          id: 'urban-living',
+          title: 'Urban Living',
+          owner: 'Mike Teavee',
+          city: 'Seattle',
+          location: {
+            lat: 47.6062,
+            lng: -122.3321,
+          },
+          category: 'Condo',
+          type: 'Community',
+          bedrooms: 1,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
+          description:
+            'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.',
         },
-        category: 'Condo',
-        type: 'Community',
-        bedrooms: 1,
-        image:
-          'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
-        description:
-          'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.',
-      },
-      {
-        id: 'downtown-charm',
-        title: 'Downtown Charm',
-        owner: 'Violet Beauregarde',
-        city: 'Portland',
-        location: {
-          lat: 45.5175,
-          lng: -122.6801,
+        {
+          id: 'downtown-charm',
+          title: 'Downtown Charm',
+          owner: 'Violet Beauregarde',
+          city: 'Portland',
+          location: {
+            lat: 45.5175,
+            lng: -122.6801,
+          },
+          category: 'Apartment',
+          type: 'Community',
+          bedrooms: 3,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
+          description:
+            'Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet.',
         },
-        category: 'Apartment',
-        type: 'Community',
-        bedrooms: 3,
-        image:
-          'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
-        description:
-          'Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet.',
-      },
-    ];
-
-    await render(<template><Rentals @rentals={{state.rentals}} /></template>);
+      ],
+    });
+
+    await render(hbs`<Rentals @rentals={{this.rentals}} />`);
 
     assert.dom('.rentals').exists();
     assert.dom('.rentals input').exists();
@@ -233,7 +211,7 @@ Now, if we try running our tests, they should all pass after making this change.
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add tests/integration/components/rentals-test.gjs
+git add tests/integration/components/rentals-test.js
 ```
 
 ```run:screenshot width=1024 height=1024 retina=true filename=pass-1.png alt="The new test is passing."
@@ -243,42 +221,44 @@ wait  #qunit-banner.qunit-pass
 
 ## Using a `form`
 
-Now that we have our component all set up, we can finally wire up our search box and store our search query! Let's create a component class to store our query state and handle events from the `form` element and wire up our query state in the component template:
-
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rentals.gjs
-@@ -1,2 +1,5 @@
- import Component from '@glimmer/component';
-+import { tracked } from '@glimmer/tracking';
-+import { action } from '@ember/object';
-+import { on } from '@ember/modifier';
- import Rental from 'super-rentals/components/rental';
-@@ -4,9 +7,24 @@ import Rental from 'super-rentals/components/rental';
- export default class Rentals extends Component {
-+  @tracked query = '';
-+
-+  @action
-+  updateQuery(event) {
-+    let formData = new FormData(event.currentTarget);
-+    this.query = formData.get('rental-search-term');
-+  }
-+
-+  @action
-+  handleSubmit(event) {
-+    event.preventDefault();
-+    this.updateQuery(event);
-+  }
-+
-   <template>
-     <div class="rentals">
--      <form>
-+      <form {{on "input" this.updateQuery}} {{on "submit" this.handleSubmit}}>
-         <label>
-           <span>Where would you like to stay?</span>
--          <input class="light">
-+          <input name="rental-search-term" class="light">
-         </label>
-+        <p>The results below will update as you type.</p>
-       </form>
+Now that we have our component all set up, we can finally wire up our search box and store our search query! First things first: let's create a component class to store our query state and handle events from the `form` element:
+
+```run:file:create lang=js cwd=super-rentals filename=app/components/rentals.js
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class Rentals extends Component {
+  @tracked query = '';
+
+  @action
+  updateQuery(event) {
+    let formData = new FormData(event.currentTarget);
+    this.query = formData.get('rental-search-term');
+  }
+
+  @action
+  handleSubmit(event) {
+    event.preventDefault();
+    this.updateQuery(event);
+  }
+}
+```
+
+Next, we'll wire up our query state in the component template.
+
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rentals.hbs
+@@ -1,7 +1,8 @@
+ <div class="rentals">
+-  <form>
++  <form {{on "input" this.updateQuery}} {{on "submit" this.handleSubmit}}>
+     <label>
+       <span>Where would you like to stay?</span>
+-      <input class="light">
++      <input name="rental-search-term" class="light">
+     </label>
++    <p>The results below will update as you type.</p>
+   </form>
 ```
 
 [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) is a built-in JavaScript object for handling forms. It requires the `name` attribute on the `input`. We handle both `submit` and `input` events for the form so that the query updates both when the user types into the input and when they submit the form.
@@ -289,14 +269,15 @@ Now that we have our component all set up, we can finally wire up our search box
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rentals.gjs
+git add app/components/rentals.hbs
+git add app/components/rentals.js
 ```
 
-## Adding the `<RentalsFilter>` Provider Component
+## Adding the `<Rentals::Filter>` Provider Component
 
-Now that our search query is wired up to our `<Rentals>` component, we can get into the really fun stuff! Namely, we can make our component *filter* results based on our search query. In order to encapsulate this functionality, we'll create another component called `<RentalsFilter>`.
+Now that our search query is wired up to our `<Rentals>` component, we can get into the really fun stuff! Namely, we can make our component *filter* results based on our search query. In order to encapsulate this functionality, we'll create another component called `<Rentals::Filter>`.
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/components/rentals/filter.gjs
+```run:file:create lang=js cwd=super-rentals filename=app/components/rentals/filter.js
 import Component from '@glimmer/component';
 
 export default class RentalsFilter extends Component {
@@ -309,40 +290,36 @@ export default class RentalsFilter extends Component {
 
     return rentals;
   }
-
-  <template>
-    {{yield this.results}}
-  </template>
 }
 ```
 
-In the `<RentalsFilter>` component class, we have created a getter to do the work of filtering through our rentals based on two arguments: `@rentals` and `@query`. Inside of our getter function, we have these arguments accessible to us from `this.args`.
+```run:file:create lang=handlebars cwd=super-rentals filename=app/components/rentals/filter.hbs
+{{yield this.results}}
+```
+
+In the `<Rentals::Filter>` component class, we have created a getter to do the work of filtering through our rentals based on two arguments: `@rentals` and `@query`. Inside of our getter function, we have these arguments accessible to us from `this.args`.
 
 In our component template, we are not actually *rendering* anything. Instead, we're yielding to something, using the `{{yield}}` keyword, a syntax that [we have seen before](../../part-1/component-basics/). As we might recall, the purpose of `{{yield}}` is to render the *block* that is passed in by the component's *caller*, which is the thing that is invoking the current component (a template or another component, for example). But in this specific case, we don't just have a `{{yield}}` keyword. Instead, we have `this.results` *inside* of our `{{yield}}` keyword. What is that doing, exactly?
 
 Well, in order to answer this question, let's look at how the data that we're yielding is being used in the `<Rentals>` component.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/components/rentals.gjs
-@@ -5,2 +5,3 @@ import { on } from '@ember/modifier';
- import Rental from 'super-rentals/components/rental';
-+import RentalsFilter from 'super-rentals/components/rentals/filter';
- 
-@@ -32,5 +33,7 @@ export default class Rentals extends Component {
-       <ul class="results">
--        {{#each @rentals as |rental|}}
--          <li><Rental @rental={{rental}} /></li>
--        {{/each}}
-+        <RentalsFilter @rentals={{@rentals}} @query={{this.query}} as |results|>
-+          {{#each results as |rental|}}
-+            <li><Rental @rental={{rental}} /></li>
-+          {{/each}}
-+        </RentalsFilter>
-       </ul>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rentals.hbs
+@@ -7,5 +7,7 @@
+   <ul class="results">
+-    {{#each @rentals as |rental|}}
+-      <li><Rental @rental={{rental}} /></li>
+-    {{/each}}
++    <Rentals::Filter @rentals={{@rentals}} @query={{this.query}} as |results|>
++      {{#each results as |rental|}}
++        <li><Rental @rental={{rental}} /></li>
++      {{/each}}
++    </Rentals::Filter>
+   </ul>
 ```
 
-Here, we're invoking `<RentalsFilter>` similar to how we've invoked other components. We're passing in `@rentals` and `@query` as arguments, and we're also passing in a block. The block is the content that is enclosed in between the component's opening and closing tags (`<RentalsFilter>...</RentalsFilter>`). We have seen both of these before.
+Here, we're invoking `<Rentals::Filter>` similar to how we've invoked other components. We're passing in `@rentals` and `@query` as arguments, and we're also passing in a block. The block is the content that is enclosed in between the component's opening and closing tags (`<Rentals::Filter>...</Rentals::Filter>`). We have seen both of these before.
 
-However, the main difference here is the use of `as |results|` when we are invoking our `<RentalsFilter>` component. Incidentally, this new syntax goes hand-in-hand with the `{{yield this.results}}` syntax we were introduced to in the component template.
+However, the main difference here is the use of `as |results|` when we are invoking our `<Rentals::Filter>` component. Incidentally, this new syntax goes hand-in-hand with the `{{yield this.results}}` syntax we were introduced to in the component template.
 
 The `as |results|` syntax might look a little new to us, but it isn't the first time that we've seen this feature in action. Back when we first learned about the `{{#each}}` syntax, which we use to loop over a collection, we wrote something like this: `{{#each @items as |item|}}...some content here...{{/each}}`.
 
@@ -352,16 +329,16 @@ Inside of our block, we need to be able to access the current item *somehow*. Th
 
 The need to provide some data to a block is not unique to the `{{#each}}` syntax. In this case, our `<Rentals::Filter>` component wants to take the unfiltered list of rental properties and match them against the user's query. Once the component has matched the rentals against the query, it will need to provide a filtered list of rental properties to its caller (the `<Rentals>` component).
 
-As it turns out, this ability to provide block params is not a superpower that only built-in syntaxes like `{{#each}}` can use. We can do this with our own components as well. In fact, Ember allows us to pass arbitrary data to blocks in the form of passing in additional arguments to the `{{yield}}` keyword. Indeed, this is exactly what we did with `{{yield this.results}}` in the `<RentalsFilter>` component.
+As it turns out, this ability to provide block params is not a superpower that only built-in syntaxes like `{{#each}}` can use. We can do this with our own components as well. In fact, Ember allows us to pass arbitrary data to blocks in the form of passing in additional arguments to the `{{yield}}` keyword. Indeed, this is exactly what we did with `{{yield this.results}}` in the `<Rentals::Filter>` component.
 
-In our `<Rentals>` component, we used the `as |results|` syntax when invoking `<RentalsFilter>`. Just like with the `{{#each}}` syntax, this block parameter syntax allowed our block to access the yielded data using the local variable `results`. The yielded data came from `{{yield this.results}}`, where `this.results` is our filtered list of rental properties.
+In our `<Rentals>` component, we used the `as |results|` syntax when invoking `<Rentals::Filter>`. Just like with the `{{#each}}` syntax, this block parameter syntax allowed our block to access the yielded data using the local variable `results`. The yielded data came from `{{yield this.results}}`, where `this.results` is our filtered list of rental properties.
 
 > Zoey says...
 >
 > The local variable name `results` is arbitrary, and isn't special in any way! You could name it anything: `as |data|`, `as |filtered|`, or even `as |banana|`! In fact, the `... as |banana|` syntax is the same as declaring a local variable in JavaScript.
 > Just as we can create a variable like `let banana = ...`, and then have access to that variable whenever we call `banana`, we can also have access to the yielded item by using whatever variable name we gave to our block parameter. The important thing here is that however you name the block param is how you will have access to the yielded data from inside the block.
 
-Interestingly, if we take a look at our `<RentalsFilter>` component template, we see that we don't actually render any content. Instead, this component's only responsibility is to set up some piece of state (`this.results`, the list of filtered rental properties), and then yield that state back up to its caller (`<Rentals>`) in the form of a block parameter (`as |results|`).
+Interestingly, if we take a look at our `<Rentals::Filter>` component template, we see that we don't actually render any content. Instead, this component's only responsibility is to set up some piece of state (`this.results`, the list of filtered rental properties), and then yield that state back up to its caller (`<Rentals>`) in the form of a block parameter (`as |results|`).
 
 This is called the *[provider component pattern][TODO: link to provider component pattern]*, which we see in action with one component providing data up to its caller.
 
@@ -376,28 +353,28 @@ wait  .rental
 
 Hooray, it works! Awesome. Now that we've tried this out manually in the UI, let's write a test for this new behavior as well.
 
-```run:file:patch lang=gjs cwd=super-rentals filename=tests/integration/components/rentals-test.gjs
-@@ -2,3 +2,3 @@ import { module, test } from 'qunit';
+```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rentals-test.js
+@@ -2,3 +2,3 @@
  import { setupRenderingTest } from 'super-rentals/tests/helpers';
 -import { render } from '@ember/test-helpers';
 +import { render, fillIn } from '@ember/test-helpers';
- import { tracked } from '@glimmer/tracking';
-@@ -15,3 +15,3 @@ module('Integration | Component | rentals', function (hooks) {
- 
+ import { hbs } from 'ember-cli-htmlbars';
+@@ -8,3 +8,3 @@
+
 -  test('it renders all given rental properties by default', async function (assert) {
 +  hooks.beforeEach(function () {
-     state.rentals = [
-@@ -69,2 +69,5 @@ module('Integration | Component | rentals', function (hooks) {
-     ];
+     this.setProperties({
+@@ -64,3 +64,5 @@
+     });
 +  });
-+
+
 +  test('it renders all given rental properties by default', async function (assert) {
- 
-@@ -90,2 +93,21 @@ module('Integration | Component | rentals', function (hooks) {
+     await render(hbs`<Rentals @rentals={{this.rentals}} />`);
+@@ -85,2 +87,21 @@
    });
 +
 +  test('it updates the results according to the search query', async function (assert) {
-+    await render(<template><Rentals @rentals={{state.rentals}} /></template>);
++    await render(hbs`<Rentals @rentals={{this.rentals}} />`);
 +
 +    assert.dom('.rentals').exists();
 +    assert.dom('.rentals input').exists();
@@ -425,9 +402,10 @@ Great! In the process of adding this test, we'll notice that we also extracted o
 
 ```run:command hidden=true cwd=super-rentals
 ember test --path dist
-git add app/components/rentals.gjs
-git add app/components/rentals/filter.gjs
-git add tests/integration/components/rentals-test.gjs
+git add app/components/rentals.hbs
+git add app/components/rentals/filter.hbs
+git add app/components/rentals/filter.js
+git add tests/integration/components/rentals-test.js
 ```
 
 ```run:screenshot width=1024 height=1024 retina=true filename=pass-2.png alt="The new test is passing."