diff --git a/.eslintrc.js b/.eslintrc.js
index 3c03cfb..198e11e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
       extends: [
         'eslint:recommended',
         'plugin:ember/recommended', // or other configuration
+        'plugin:prettier/recommended',
       ],
       rules: {
         // override / enable optional rules
@@ -23,6 +24,7 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
         'plugin:ember/recommended',
         'plugin:ember/recommended-gts',
+        'plugin:prettier/recommended',
       ],
       rules: {
         // To use the @RouteTemplate decorator on Glimmer components in `/templates`
@@ -37,6 +39,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:ember/recommended',
         'plugin:ember/recommended-gjs',
+        'plugin:prettier/recommended',
       ],
     },
     {
diff --git a/app/components/home-button.gts b/app/components/home-button.gts
index 6e10d41..3555b80 100644
--- a/app/components/home-button.gts
+++ b/app/components/home-button.gts
@@ -4,10 +4,10 @@ import { LinkTo } from '@ember/routing';
 const HomeButton: TOC<object> = <template>
   <LinkTo
     @route='index'
-    class='relative inline-flex items-center justify-center hover:drop-shadow-lg p-0.5 mb-16 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white focus:ring-4 focus:outline-none focus:ring-pink-200'
+    class='group relative mb-16 me-2 inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-pink-500 to-orange-400 p-0.5 text-sm font-medium text-gray-900 hover:text-white hover:drop-shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-200 group-hover:from-pink-500 group-hover:to-orange-400'
   >
     <span
-      class='relative px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0'
+      class='relative rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0'
     >⬅️ back
     </span>
   </LinkTo>
diff --git a/app/components/loading-bar.gts b/app/components/loading-bar.gts
index 396c21c..2f9c9dc 100644
--- a/app/components/loading-bar.gts
+++ b/app/components/loading-bar.gts
@@ -1,10 +1,10 @@
 import type { TOC } from '@ember/component/template-only';
 
 const LoadingBar: TOC<object> = <template>
-  <div class='w-full absolute top-0 right-0'>
-    <div class='h-1.5 w-full bg-pink-100 overflow-hidden'>
+  <div class='absolute right-0 top-0 w-full'>
+    <div class='h-1.5 w-full overflow-hidden bg-pink-100'>
       <div
-        class='animate-progress w-full h-full bg-pink-500 origin-left-right'
+        class='h-full w-full origin-left-right animate-progress bg-pink-500'
       ></div>
     </div>
   </div>
diff --git a/app/components/pokemon-details.gts b/app/components/pokemon-details.gts
index a9d6e16..806e8a1 100644
--- a/app/components/pokemon-details.gts
+++ b/app/components/pokemon-details.gts
@@ -11,7 +11,7 @@ export default class PokemonDetails extends Component<{
       class='pokemon-details flex flex-col justify-center gap-16 md:flex-row'
     >
       <img
-        class='animate-wiggle max-size-96 full-embed aspect-square size-96 drop-shadow-2xl [animation-delay:_0.2s]'
+        class='max-size-96 full-embed aspect-square size-96 animate-wiggle drop-shadow-2xl [animation-delay:_0.2s]'
         src={{@pokemon.image.hires}}
         alt={{@pokemon.name.english}}
       />
diff --git a/app/components/pokemon-grid-item.gts b/app/components/pokemon-grid-item.gts
index 9371409..9f9475b 100644
--- a/app/components/pokemon-grid-item.gts
+++ b/app/components/pokemon-grid-item.gts
@@ -54,7 +54,7 @@ export default class PokemonGridItem extends Component<PokemonSignature> {
         class='block aspect-square w-full p-4 transition-transform group-hover:scale-125 group-hover:drop-shadow-xl'
         loading='lazy'
         src={{@pokemon.image.thumbnail}}
-        alt="{{@pokemon.name.english}} thumbnail"
+        alt='{{@pokemon.name.english}} thumbnail'
       />
       <h3 class='mt-4 text-lg font-medium'>{{@pokemon.name.english}}</h3>
     </button>
diff --git a/app/models/pokemon.ts b/app/models/pokemon.ts
index 2d2e23b..9a21c7b 100644
--- a/app/models/pokemon.ts
+++ b/app/models/pokemon.ts
@@ -1,7 +1,25 @@
 import Model, { attr } from '@ember-data/model';
 import { Type } from '@warp-drive/core-types/symbols';
 
-export type PokemonType = 'Normal' | 'Fighting' | 'Flying' | 'Poison' | 'Ground' | 'Rock' | 'Bug' | 'Ghost' | 'Steel' | 'Fire' | 'Water' | 'Grass' | 'Electric' | 'Psychic' | 'Ice' | 'Dragon' | 'Dark' | 'Fairy';
+export type PokemonType =
+  | 'Normal'
+  | 'Fighting'
+  | 'Flying'
+  | 'Poison'
+  | 'Ground'
+  | 'Rock'
+  | 'Bug'
+  | 'Ghost'
+  | 'Steel'
+  | 'Fire'
+  | 'Water'
+  | 'Grass'
+  | 'Electric'
+  | 'Psychic'
+  | 'Ice'
+  | 'Dragon'
+  | 'Dark'
+  | 'Fairy';
 
 export default class PokemonModel extends Model {
   @attr declare name: {
diff --git a/app/router.ts b/app/router.ts
index a3db337..9d30300 100644
--- a/app/router.ts
+++ b/app/router.ts
@@ -7,7 +7,7 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('pokemon', function() {
+  this.route('pokemon', function () {
     this.route('pokemon', { path: ':pokemon_id' });
   });
   this.route('about');
diff --git a/app/routes/application.ts b/app/routes/application.ts
index ac2801e..581d427 100644
--- a/app/routes/application.ts
+++ b/app/routes/application.ts
@@ -9,7 +9,7 @@ export default class ApplicationRoute extends Route {
 
   model() {
     return {
-      pokemonRequest: this.store.request(query<PokemonModel>('pokemon'))
+      pokemonRequest: this.store.request(query<PokemonModel>('pokemon')),
     };
   }
 }
diff --git a/app/routes/pokemon/pokemon.ts b/app/routes/pokemon/pokemon.ts
index 5fc8575..1e786d5 100644
--- a/app/routes/pokemon/pokemon.ts
+++ b/app/routes/pokemon/pokemon.ts
@@ -5,7 +5,9 @@ import type ApplicationRoute from 'ember-polaris-pokedex/routes/application';
 export default class PokemonRoute extends Route {
   model(params: { pokemon_id: string }) {
     return {
-      pokemonRequest: (this.modelFor('application') as ModelFrom<ApplicationRoute>).pokemonRequest,
+      pokemonRequest: (
+        this.modelFor('application') as ModelFrom<ApplicationRoute>
+      ).pokemonRequest,
       id: params.pokemon_id,
     };
   }
diff --git a/app/templates/about.gts b/app/templates/about.gts
index b0535b0..3a8d911 100644
--- a/app/templates/about.gts
+++ b/app/templates/about.gts
@@ -16,14 +16,14 @@ export default class ApplicationTemplate extends Component {
         <a
           href='https://emberjs.com/editions/polaris/'
           target='_blank'
-          class='hover:underline text-slate-900 font-medium'
+          class='font-medium text-slate-900 hover:underline'
           rel='noopener noreferrer'
         >the Ember Polaris edition</a>
         looks like. The source code is
         <a
           href='https://github.com/IgnaceMaes/ember-polaris-pokedex'
           target='_blank'
-          class='hover:underline text-slate-900 font-medium'
+          class='font-medium text-slate-900 hover:underline'
           rel='noopener noreferrer'
         >available on GitHub</a>.</p>
       <p class='mb-2'>The app is built using the latest bleeding-edge
@@ -33,40 +33,40 @@ export default class ApplicationTemplate extends Component {
           <a
             href='https://vitejs.dev/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >⚡️ Vite-based</a>
           <a
             href='https://github.com/embroider-build/embroider'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >Embroider</a></li>
         <li>
           <a
             href='https://volarjs.dev/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >🔥 Volar-based</a>
           <a
             href='https://typed-ember.gitbook.io/glint'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >Glint</a></li>
         <li>
           <a
             href='https://blog.emberjs.com/stable-typescript-types-in-ember-5-1/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >💙 Native Ember TypeScript types from source</a></li>
         <li>
           <a
             href='https://guides.emberjs.com/release/components/template-tag-format/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >📦 Template-tag components ('.gjs', '.gts')</a>
           <ul class='mt-2 list-inside list-[circle] space-y-1 ps-5'>
@@ -74,7 +74,7 @@ export default class ApplicationTemplate extends Component {
               <a
                 href='https://github.com/discourse/ember-route-template'
                 target='_blank'
-                class='hover:underline text-slate-900 font-medium'
+                class='font-medium text-slate-900 hover:underline'
                 rel='noopener noreferrer'
               >ember-route-template</a>
               for template tag as route templates</li>
@@ -84,7 +84,7 @@ export default class ApplicationTemplate extends Component {
           <a
             href='https://warp-drive.io/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >🚀 Warp Drive</a>
           <ul class='mt-2 list-inside list-[circle] space-y-1 ps-5'>
@@ -100,27 +100,63 @@ export default class ApplicationTemplate extends Component {
         <li><a
             href='https://developer.chrome.com/docs/web-platform/view-transitions/same-document'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >🔗 View transition API</a></li>
         <li><a
             href='https://scroll-driven-animations.style/'
             target='_blank'
-            class='hover:underline text-slate-900 font-medium'
+            class='font-medium text-slate-900 hover:underline'
             rel='noopener noreferrer'
           >🎥 Scroll-driven animations</a></li>
       </ul>
 
-      <div class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-9 mt-16 gap-8">
-        <img src="/images/ember.svg" alt='ember' class='w-full h-full drop-shadow-md' />
-        <img src="/images/embroider.svg" alt='embroider' class='w-full h-full drop-shadow-md' />
-        <img src="/images/vite.svg" alt='vite' class='w-full h-full drop-shadow-md' />
-        <img src="/images/volar.svg" alt='volar' class='w-full h-full drop-shadow-md' />
-        <img src="/images/glint.png" alt='glint' class='w-full h-full drop-shadow-md' />
-        <img src="/images/typescript.svg" alt='typescript' class='w-full h-full drop-shadow-md' />
-        <img src="/images/warp-drive.svg" alt='Warp Drive' class='w-full h-full drop-shadow-md' />
-        <img src="/images/glimmer-ts.svg" alt='Glimmer TS' class='w-full h-full drop-shadow-md' />
-        <img src="/images/tailwind.svg" alt='TailwindCSS' class='w-full h-full drop-shadow-md' />
+      <div class='mt-16 grid grid-cols-3 gap-8 md:grid-cols-6 lg:grid-cols-9'>
+        <img
+          src='/images/ember.svg'
+          alt='ember'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/embroider.svg'
+          alt='embroider'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/vite.svg'
+          alt='vite'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/volar.svg'
+          alt='volar'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/glint.png'
+          alt='glint'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/typescript.svg'
+          alt='typescript'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/warp-drive.svg'
+          alt='Warp Drive'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/glimmer-ts.svg'
+          alt='Glimmer TS'
+          class='h-full w-full drop-shadow-md'
+        />
+        <img
+          src='/images/tailwind.svg'
+          alt='TailwindCSS'
+          class='h-full w-full drop-shadow-md'
+        />
       </div>
     </section>
   </template>
diff --git a/app/templates/application.gts b/app/templates/application.gts
index 582716d..84d0ef9 100644
--- a/app/templates/application.gts
+++ b/app/templates/application.gts
@@ -9,7 +9,9 @@ export default class ApplicationTemplate extends Component {
     {{pageTitle 'Ember Polaris Pokedex'}}
 
     <main class='container m-auto min-h-screen px-4 py-8'>
-      <div class='mb-6 flex justify-between text-2xl lg:text-5xl font-extrabold gap-4'>
+      <div
+        class='mb-6 flex justify-between gap-4 text-2xl font-extrabold lg:text-5xl'
+      >
         <h2>
           <LinkTo
             @route='index'
diff --git a/app/utils/handlers.ts b/app/utils/handlers.ts
index 001f2b2..999cdd0 100644
--- a/app/utils/handlers.ts
+++ b/app/utils/handlers.ts
@@ -1,4 +1,4 @@
-import type { Handler } from "@ember-data/request";
+import type { Handler } from '@ember-data/request';
 
 export const JsonSuffixHandler: Handler = {
   request(context, next) {