From b977a4828f2db18391307936d6dc4103588a5ee0 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Tue, 25 Feb 2025 08:58:50 +0100
Subject: [PATCH] chore: format templates

---
 templates/angular-example/juno.dev.config.js  |  32 ++--
 .../angular-example/src/app/app.component.ts  |  14 +-
 .../angular-example/src/app/app.config.ts     |   8 +-
 .../angular-example/src/app/app.routes.ts     |   2 +-
 .../src/app/components/auth/auth.component.ts |  12 +-
 .../backdrop/backdrop.component.html          |   6 +-
 .../components/backdrop/backdrop.component.ts |   6 +-
 .../background/background.component.html      |   6 +-
 .../background/background.component.ts        |   4 +-
 .../components/button/button.component.html   |   7 +-
 .../app/components/button/button.component.ts |   6 +-
 .../components/delete/delete.component.html   |  22 ++-
 .../app/components/delete/delete.component.ts |  22 +--
 .../components/footer/footer.component.html   | 146 ++++++++++++-----
 .../app/components/footer/footer.component.ts |   4 +-
 .../app/components/home/home.component.html   |  16 +-
 .../src/app/components/home/home.component.ts |  22 ++-
 .../app/components/login/login.component.ts   |   8 +-
 .../components/logout/logout.component.html   |   9 +-
 .../app/components/logout/logout.component.ts |   6 +-
 .../app/components/modal/modal.component.html |  48 ++++--
 .../app/components/modal/modal.component.ts   |  32 ++--
 .../app/components/table/table.component.html |  28 +++-
 .../app/components/table/table.component.ts   |  14 +-
 .../src/app/services/auth.service.ts          |  14 +-
 .../src/app/services/docs.service.ts          |  24 ++-
 .../src/environments/environment.prod.ts      |   2 +-
 .../src/environments/environment.ts           |   4 +-
 templates/angular-example/src/index.html      |   6 +-
 templates/angular-example/src/main.ts         |  10 +-
 templates/angular-example/src/styles.css      |  12 +-
 templates/angular-starter/juno.dev.config.js  |   8 +-
 .../angular-starter/src/app/app.component.ts  |  14 +-
 .../angular-starter/src/app/app.config.ts     |   8 +-
 .../angular-starter/src/app/app.routes.ts     |   2 +-
 .../components/article/article.component.html |   6 +-
 .../components/article/article.component.ts   |   4 +-
 .../background/background.component.html      |   5 +-
 .../background/background.component.ts        |   4 +-
 .../components/footer/footer.component.html   | 146 ++++++++++++-----
 .../app/components/footer/footer.component.ts |   4 +-
 .../app/components/hero/hero.component.html   |   3 +-
 .../src/app/components/hero/hero.component.ts |   4 +-
 .../app/components/home/home.component.html   |  24 ++-
 .../src/app/components/home/home.component.ts |  19 ++-
 .../src/environments/environment.prod.ts      |   2 +-
 .../src/environments/environment.ts           |   4 +-
 templates/angular-starter/src/index.html      |   6 +-
 templates/angular-starter/src/main.ts         |  10 +-
 templates/angular-starter/src/styles.css      |  12 +-
 .../src/components/Article.astro              |   4 +-
 .../src/components/Background.astro           |   2 +-
 .../astro-starter/src/components/Footer.astro |   4 +-
 .../astro-starter/src/components/Hero.astro   |   2 +-
 templates/astro-starter/src/pages/index.astro |   6 +-
 templates/astro-starter/src/styles/global.css |   2 +-
 templates/nextjs-example/juno.dev.config.ts   |  32 ++--
 templates/nextjs-example/next.config.mjs      |   4 +-
 templates/nextjs-example/postcss.config.js    |   4 +-
 templates/nextjs-example/src/app/globals.css  |  12 +-
 templates/nextjs-example/src/app/layout.tsx   |  18 +-
 templates/nextjs-example/src/app/page.tsx     |  31 ++--
 .../nextjs-example/src/components/auth.tsx    |  16 +-
 .../src/components/backdrop.tsx               |   8 +-
 .../src/components/background.tsx             |   4 +-
 .../nextjs-example/src/components/button.tsx  |  11 +-
 .../nextjs-example/src/components/delete.tsx  |  32 ++--
 .../nextjs-example/src/components/footer.tsx  |  48 ++++--
 .../nextjs-example/src/components/login.tsx   |   4 +-
 .../nextjs-example/src/components/logout.tsx  |   8 +-
 .../nextjs-example/src/components/modal.tsx   |  97 +++++------
 .../nextjs-example/src/components/table.tsx   |  57 ++++---
 templates/nextjs-example/src/types/note.ts    |   2 +-
 templates/nextjs-starter/juno.dev.config.ts   |   8 +-
 templates/nextjs-starter/next.config.mjs      |   4 +-
 templates/nextjs-starter/postcss.config.js    |   4 +-
 templates/nextjs-starter/src/app/globals.css  |  12 +-
 templates/nextjs-starter/src/app/layout.tsx   |  18 +-
 templates/nextjs-starter/src/app/page.tsx     |  39 +++--
 .../nextjs-starter/src/components/article.tsx |   9 +-
 .../src/components/background.tsx             |   4 +-
 .../nextjs-starter/src/components/footer.tsx  |  48 ++++--
 .../nextjs-starter/src/components/hero.tsx    |   7 +-
 templates/react-example/eslint.config.js      |  41 ++---
 templates/react-example/index.html            |   6 +-
 templates/react-example/juno.dev.config.js    |  32 ++--
 templates/react-example/src/App.jsx           |  29 ++--
 .../react-example/src/components/Auth.jsx     |  16 +-
 .../react-example/src/components/Backdrop.jsx |  12 +-
 .../src/components/Background.jsx             |   2 +-
 .../react-example/src/components/Button.jsx   |   9 +-
 .../react-example/src/components/Delete.jsx   |  34 ++--
 .../react-example/src/components/Footer.jsx   |  48 ++++--
 .../react-example/src/components/Login.jsx    |   4 +-
 .../react-example/src/components/Logout.jsx   |   8 +-
 .../react-example/src/components/Modal.jsx    |  94 ++++++-----
 .../react-example/src/components/Table.jsx    |  55 ++++---
 templates/react-example/src/index.css         |  12 +-
 templates/react-example/src/main.jsx          |  12 +-
 templates/react-example/vite.config.js        |  12 +-
 templates/react-starter/eslint.config.js      |  41 ++---
 templates/react-starter/index.html            |   6 +-
 templates/react-starter/juno.dev.config.js    |   8 +-
 templates/react-starter/src/App.jsx           |  37 +++--
 .../react-starter/src/components/Article.jsx  |  11 +-
 .../src/components/Background.jsx             |   2 +-
 .../react-starter/src/components/Footer.jsx   |  48 ++++--
 .../react-starter/src/components/Hero.jsx     |   9 +-
 templates/react-starter/src/index.css         |  12 +-
 templates/react-starter/src/main.jsx          |  12 +-
 templates/react-starter/vite.config.js        |  12 +-
 templates/react-ts-example/eslint.config.js   |  43 ++---
 templates/react-ts-example/index.html         |   6 +-
 templates/react-ts-example/juno.dev.config.ts |  32 ++--
 templates/react-ts-example/src/App.tsx        |  29 ++--
 .../react-ts-example/src/components/Auth.tsx  |  20 ++-
 .../src/components/Backdrop.tsx               |  11 +-
 .../src/components/Background.tsx             |   4 +-
 .../src/components/Button.tsx                 |   7 +-
 .../src/components/Delete.tsx                 |  32 ++--
 .../src/components/Footer.tsx                 |  50 ++++--
 .../react-ts-example/src/components/Login.tsx |   6 +-
 .../src/components/Logout.tsx                 |  10 +-
 .../react-ts-example/src/components/Modal.tsx |  94 ++++++-----
 .../react-ts-example/src/components/Table.tsx |  57 ++++---
 templates/react-ts-example/src/index.css      |  12 +-
 templates/react-ts-example/src/main.tsx       |  12 +-
 templates/react-ts-example/src/types/note.ts  |   2 +-
 templates/react-ts-example/tsconfig.json      |   5 +-
 templates/react-ts-example/vite.config.ts     |  12 +-
 templates/react-ts-starter/eslint.config.js   |  29 ++--
 templates/react-ts-starter/index.html         |   6 +-
 templates/react-ts-starter/juno.dev.config.ts |   8 +-
 templates/react-ts-starter/src/App.tsx        |  37 +++--
 .../src/components/Article.tsx                |   9 +-
 .../src/components/Background.tsx             |   4 +-
 .../src/components/Footer.tsx                 |  50 ++++--
 .../react-ts-starter/src/components/Hero.tsx  |   7 +-
 templates/react-ts-starter/src/index.css      |  12 +-
 templates/react-ts-starter/src/main.tsx       |  12 +-
 templates/react-ts-starter/tsconfig.json      |   5 +-
 templates/react-ts-starter/vite.config.ts     |  12 +-
 templates/react-workshop/README.md            |  40 ++---
 templates/react-workshop/eslint.config.js     |  41 ++---
 templates/react-workshop/index.html           |   6 +-
 templates/react-workshop/juno.config.mjs      |   8 +-
 templates/react-workshop/juno.dev.config.js   |  32 ++--
 templates/react-workshop/src/App.jsx          |  21 +--
 .../react-workshop/src/components/Auth.jsx    |  14 +-
 .../src/components/Backdrop.jsx               |  12 +-
 .../src/components/Background.jsx             |   2 +-
 .../react-workshop/src/components/Button.jsx  |   9 +-
 .../react-workshop/src/components/Delete.jsx  |  34 ++--
 .../react-workshop/src/components/Footer.jsx  |  48 ++++--
 .../react-workshop/src/components/Login.jsx   |   2 +-
 .../react-workshop/src/components/Logout.jsx  |   6 +-
 .../react-workshop/src/components/Modal.jsx   |  78 ++++-----
 .../react-workshop/src/components/Table.jsx   |  47 ++++--
 templates/react-workshop/src/index.css        |  12 +-
 templates/react-workshop/src/main.jsx         |  12 +-
 templates/react-workshop/vite.config.js       |  12 +-
 .../src/lib/components/Backdrop.svelte        |   4 +-
 .../src/lib/components/Background.svelte      |   2 +-
 .../src/lib/components/Button.svelte          |   2 +-
 .../src/lib/components/Footer.svelte          |   4 +-
 .../src/lib/components/Logout.svelte          |   2 +-
 .../src/lib/components/Modal.svelte           |  16 +-
 .../src/lib/components/Table.svelte           |  10 +-
 .../src/routes/+layout.svelte                 |   6 +-
 .../src/lib/components/Article.svelte         |   4 +-
 .../src/lib/components/Background.svelte      |   2 +-
 .../src/lib/components/Footer.svelte          |   4 +-
 .../src/lib/components/Hero.svelte            |   2 +-
 .../src/routes/+layout.svelte                 |   6 +-
 templates/vanilla-js-example/index.html       | 155 ++++++++++++------
 .../vanilla-js-example/juno.dev.config.js     |  32 ++--
 .../src/components/content.js                 |   6 +-
 .../src/components/delete.js                  |  20 +--
 .../src/components/login.js                   |   8 +-
 .../src/components/logout.js                  |   8 +-
 .../src/components/modal.js                   |  40 ++---
 .../src/components/table.js                   |  24 +--
 templates/vanilla-js-example/src/main.js      |  16 +-
 templates/vanilla-js-example/src/style.css    |  12 +-
 .../vanilla-js-example/src/utils/utils.js     |  10 +-
 templates/vanilla-js-example/vite.config.js   |  10 +-
 templates/vue-example/src/App.vue             |   6 +-
 templates/vue-example/src/assets/main.css     |   1 -
 .../vue-example/src/components/Backdrop.vue   |   4 +-
 .../vue-example/src/components/Background.vue |   2 +-
 .../vue-example/src/components/Button.vue     |   4 +-
 .../vue-example/src/components/Footer.vue     |   4 +-
 .../vue-example/src/components/Logout.vue     |   2 +-
 .../vue-example/src/components/Modal.vue      |  16 +-
 .../vue-example/src/components/Table.vue      |  10 +-
 templates/vue-starter/src/App.vue             |   6 +-
 .../vue-starter/src/components/Article.vue    |   4 +-
 .../vue-starter/src/components/Background.vue |   2 +-
 .../vue-starter/src/components/Footer.vue     |   4 +-
 templates/vue-starter/src/components/Hero.vue |   2 +-
 200 files changed, 2094 insertions(+), 1471 deletions(-)

diff --git a/templates/angular-example/juno.dev.config.js b/templates/angular-example/juno.dev.config.js
index 822145f9..914cd131 100644
--- a/templates/angular-example/juno.dev.config.js
+++ b/templates/angular-example/juno.dev.config.js
@@ -1,4 +1,4 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
@@ -6,22 +6,22 @@ export default defineDevConfig(() => ({
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/angular-example/src/app/app.component.ts b/templates/angular-example/src/app/app.component.ts
index a31327e2..f440fa78 100644
--- a/templates/angular-example/src/app/app.component.ts
+++ b/templates/angular-example/src/app/app.component.ts
@@ -1,12 +1,12 @@
-import {Component} from '@angular/core';
-import {initSatellite} from '@junobuild/core';
-import {environment} from '../environments/environment';
-import {HomeComponent} from './components/home/home.component';
+import { Component } from '@angular/core';
+import { initSatellite } from '@junobuild/core';
+import { environment } from '../environments/environment';
+import { HomeComponent } from './components/home/home.component';
 
 @Component({
   selector: 'app-root',
   imports: [HomeComponent],
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
 })
 export class AppComponent {
   title = 'Juno / Angular Example';
@@ -16,8 +16,8 @@ export class AppComponent {
       satelliteId: environment.satelliteId,
       container: environment.container,
       workers: {
-        auth: './assets/workers/auth.worker.js'
-      }
+        auth: './assets/workers/auth.worker.js',
+      },
     });
   }
 }
diff --git a/templates/angular-example/src/app/app.config.ts b/templates/angular-example/src/app/app.config.ts
index baf3e0c8..e7d665f8 100644
--- a/templates/angular-example/src/app/app.config.ts
+++ b/templates/angular-example/src/app/app.config.ts
@@ -1,8 +1,8 @@
-import {ApplicationConfig} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
 
-import {routes} from './app.routes';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes)],
 };
diff --git a/templates/angular-example/src/app/app.routes.ts b/templates/angular-example/src/app/app.routes.ts
index 8b5e5fb2..dc39edb5 100644
--- a/templates/angular-example/src/app/app.routes.ts
+++ b/templates/angular-example/src/app/app.routes.ts
@@ -1,3 +1,3 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
 export const routes: Routes = [];
diff --git a/templates/angular-example/src/app/components/auth/auth.component.ts b/templates/angular-example/src/app/components/auth/auth.component.ts
index 06ed38f3..28fef210 100644
--- a/templates/angular-example/src/app/components/auth/auth.component.ts
+++ b/templates/angular-example/src/app/components/auth/auth.component.ts
@@ -1,13 +1,13 @@
-import {NgIf} from '@angular/common';
-import {Component, inject} from '@angular/core';
-import {AuthService} from '../../services/auth.service';
-import {LoginComponent} from '../login/login.component';
-import {LogoutComponent} from '../logout/logout.component';
+import { NgIf } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
+import { LoginComponent } from '../login/login.component';
+import { LogoutComponent } from '../logout/logout.component';
 
 @Component({
   selector: 'app-auth',
   imports: [LoginComponent, LogoutComponent, NgIf],
-  templateUrl: './auth.component.html'
+  templateUrl: './auth.component.html',
 })
 export class AuthComponent {
   private readonly authService = inject(AuthService);
diff --git a/templates/angular-example/src/app/components/backdrop/backdrop.component.html b/templates/angular-example/src/app/components/backdrop/backdrop.component.html
index 029e90ef..a1082833 100644
--- a/templates/angular-example/src/app/components/backdrop/backdrop.component.html
+++ b/templates/angular-example/src/app/components/backdrop/backdrop.component.html
@@ -1,6 +1,8 @@
 <div
-  class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
+  class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
+>
   <div
     *ngIf="spinner"
-    class="w-12 h-12 rounded-full animate-spin border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>
+    class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
+  ></div>
 </div>
diff --git a/templates/angular-example/src/app/components/backdrop/backdrop.component.ts b/templates/angular-example/src/app/components/backdrop/backdrop.component.ts
index 5b2a8df9..93f0f959 100644
--- a/templates/angular-example/src/app/components/backdrop/backdrop.component.ts
+++ b/templates/angular-example/src/app/components/backdrop/backdrop.component.ts
@@ -1,10 +1,10 @@
-import {NgClass, NgIf} from '@angular/common';
-import {Component, Input} from '@angular/core';
+import { NgClass, NgIf } from '@angular/common';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-backdrop',
   imports: [NgIf, NgClass],
-  templateUrl: './backdrop.component.html'
+  templateUrl: './backdrop.component.html',
 })
 export class BackdropComponent {
   @Input() spinner = false;
diff --git a/templates/angular-example/src/app/components/background/background.component.html b/templates/angular-example/src/app/components/background/background.component.html
index 6ea0b1ec..b42914ab 100644
--- a/templates/angular-example/src/app/components/background/background.component.html
+++ b/templates/angular-example/src/app/components/background/background.component.html
@@ -1,8 +1,10 @@
 <div
-  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+  class="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4"
+>
   <img
     src="/assets/juno_illustration.svg"
     role="presentation"
     loading="lazy"
-    alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background." />
+    alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background."
+  />
 </div>
diff --git a/templates/angular-example/src/app/components/background/background.component.ts b/templates/angular-example/src/app/components/background/background.component.ts
index fa46f48f..5a48ef02 100644
--- a/templates/angular-example/src/app/components/background/background.component.ts
+++ b/templates/angular-example/src/app/components/background/background.component.ts
@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-background',
   imports: [],
-  templateUrl: './background.component.html'
+  templateUrl: './background.component.html',
 })
 export class BackgroundComponent {}
diff --git a/templates/angular-example/src/app/components/button/button.component.html b/templates/angular-example/src/app/components/button/button.component.html
index d2e6da26..bb45aae7 100644
--- a/templates/angular-example/src/app/components/button/button.component.html
+++ b/templates/angular-example/src/app/components/button/button.component.html
@@ -1,10 +1,11 @@
 <button
   [disabled]="disabled"
   [ngClass]="[
-    'flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff]',
+    'dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff]',
     disabled
       ? 'opacity-25'
-      : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'
-  ]">
+      : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black',
+  ]"
+>
   <ng-content></ng-content>
 </button>
diff --git a/templates/angular-example/src/app/components/button/button.component.ts b/templates/angular-example/src/app/components/button/button.component.ts
index 46a8a7d1..5c1031a7 100644
--- a/templates/angular-example/src/app/components/button/button.component.ts
+++ b/templates/angular-example/src/app/components/button/button.component.ts
@@ -1,10 +1,10 @@
-import {NgClass} from '@angular/common';
-import {Component, Input} from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-button',
   imports: [NgClass],
-  templateUrl: './button.component.html'
+  templateUrl: './button.component.html',
 })
 export class ButtonComponent {
   @Input() disabled!: boolean;
diff --git a/templates/angular-example/src/app/components/delete/delete.component.html b/templates/angular-example/src/app/components/delete/delete.component.html
index c1791297..b78ceeec 100644
--- a/templates/angular-example/src/app/components/delete/delete.component.html
+++ b/templates/angular-example/src/app/components/delete/delete.component.html
@@ -1,21 +1,31 @@
 <button
   role="cell"
   class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
-  (click)="delItem()">
-  <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+  (click)="delItem()"
+>
+  <svg
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 29 29"
+    fill="currentColor"
+  >
     <g>
       <rect fill="none" class="opacity-25" width="29" height="29" />
       <path
         fill="none"
-        d="M14.5,6.26H5.19l1.26,17.82c.09,1.21,1.09,2.14,2.3,2.14h11.49c1.21,0,2.22-.94,2.3-2.14l1.26-17.82h-9.31Z" />
+        d="M14.5,6.26H5.19l1.26,17.82c.09,1.21,1.09,2.14,2.3,2.14h11.49c1.21,0,2.22-.94,2.3-2.14l1.26-17.82h-9.31Z"
+      />
       <path
-        d="M26.17,5.26h-6.88v-1.26c0-1.35-1.09-2.44-2.44-2.44h-4.7c-1.35,0-2.44,1.1-2.44,2.44v1.26H2.83c-.55,0-1,.45-1,1s.45,1,1,1h1.43l1.2,16.89c.12,1.72,1.57,3.07,3.3,3.07h11.49c1.73,0,3.18-1.35,3.3-3.07l1.2-16.89h1.43c.55,0,1-.45,1-1s-.45-1-1-1ZM11.71,4c0-.24.2-.44.44-.44h4.7c.24,0,.44.2.44.44v1.26h-5.58v-1.26ZM21.55,24.01c-.05.68-.62,1.21-1.3,1.21h-11.49c-.68,0-1.25-.53-1.3-1.21l-1.18-16.75h16.47l-1.18,16.75Z" />
+        d="M26.17,5.26h-6.88v-1.26c0-1.35-1.09-2.44-2.44-2.44h-4.7c-1.35,0-2.44,1.1-2.44,2.44v1.26H2.83c-.55,0-1,.45-1,1s.45,1,1,1h1.43l1.2,16.89c.12,1.72,1.57,3.07,3.3,3.07h11.49c1.73,0,3.18-1.35,3.3-3.07l1.2-16.89h1.43c.55,0,1-.45,1-1s-.45-1-1-1ZM11.71,4c0-.24.2-.44.44-.44h4.7c.24,0,.44.2.44.44v1.26h-5.58v-1.26ZM21.55,24.01c-.05.68-.62,1.21-1.3,1.21h-11.49c-.68,0-1.25-.53-1.3-1.21l-1.18-16.75h16.47l-1.18,16.75Z"
+      />
       <path
         class="dark:text-black"
-        d="M11.29,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z" />
+        d="M11.29,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z"
+      />
       <path
         class="dark:text-black"
-        d="M17.71,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z" />
+        d="M17.71,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z"
+      />
     </g>
   </svg>
 </button>
diff --git a/templates/angular-example/src/app/components/delete/delete.component.ts b/templates/angular-example/src/app/components/delete/delete.component.ts
index 3ba1a5c7..11bb0085 100644
--- a/templates/angular-example/src/app/components/delete/delete.component.ts
+++ b/templates/angular-example/src/app/components/delete/delete.component.ts
@@ -1,14 +1,14 @@
-import {NgIf} from '@angular/common';
-import {Component, inject, Input} from '@angular/core';
-import {deleteAsset, deleteDoc, Doc} from '@junobuild/core';
-import {DocsService} from '../../services/docs.service';
-import {Note} from '../../types/note';
-import {BackdropComponent} from '../backdrop/backdrop.component';
+import { NgIf } from '@angular/common';
+import { Component, inject, Input } from '@angular/core';
+import { deleteAsset, deleteDoc, Doc } from '@junobuild/core';
+import { DocsService } from '../../services/docs.service';
+import { Note } from '../../types/note';
+import { BackdropComponent } from '../backdrop/backdrop.component';
 
 @Component({
   selector: 'app-delete',
   imports: [BackdropComponent, NgIf],
-  templateUrl: './delete.component.html'
+  templateUrl: './delete.component.html',
 })
 export class DeleteComponent {
   private readonly docsServices = inject(DocsService);
@@ -22,21 +22,21 @@ export class DeleteComponent {
 
     try {
       const {
-        data: {url}
+        data: { url },
       } = this.doc;
 
       if (url !== undefined) {
-        const {pathname: fullPath} = new URL(url);
+        const { pathname: fullPath } = new URL(url);
 
         await deleteAsset({
           collection: 'images',
-          fullPath
+          fullPath,
         });
       }
 
       await deleteDoc({
         collection: 'notes',
-        doc: this.doc
+        doc: this.doc,
       });
 
       await this.docsServices.reload();
diff --git a/templates/angular-example/src/app/components/footer/footer.component.html b/templates/angular-example/src/app/components/footer/footer.component.html
index 952dc428..2c950d49 100644
--- a/templates/angular-example/src/app/components/footer/footer.component.html
+++ b/templates/angular-example/src/app/components/footer/footer.component.html
@@ -1,21 +1,39 @@
 <footer
-  class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-  <span class="flex gap-2 items-baseline">
+  class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white"
+>
+  <span class="flex items-baseline gap-2">
     <svg
       id="Layer_2"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1000 220.39"
       width="80"
-      fill="currentColor">
+      fill="currentColor"
+    >
       <g>
         <path
-          d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
+          d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"
+        ></path>
         <path
-          d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-        <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+          d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"
+        ></path>
+        <rect
+          x="725.65"
+          y="0"
+          width="220.39"
+          height="220.39"
+          rx="110.19"
+          ry="110.19"
+        ></rect>
         <path
-          d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-        <circle class="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+          d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"
+        ></path>
+        <circle
+          class="cls-1"
+          cx="931.86"
+          cy="68.14"
+          r="68.14"
+          fill="#7888ff"
+        ></circle>
       </g>
     </svg>
     <small class="hidden md:block">Blockchainless Platform</small>
@@ -27,41 +45,66 @@
       aria-label="Go to Juno website and documentation"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <path
-            d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
+            d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"
+          ></path>
           <path
-            d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
+            d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"
+          ></path>
           <path
-            d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"></path>
-          <path d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"></path>
+            d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"
+          ></path>
           <path
-            d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"></path>
+            d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"
+          ></path>
           <path
-            d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"></path>
+            d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"
+          ></path>
           <path
-            d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"></path>
+            d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"
+          ></path>
           <path
-            d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"></path>
+            d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"
+          ></path>
           <path
-            d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"></path>
+            d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"
+          ></path>
           <path
-            d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"></path>
+            d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"
+          ></path>
           <path
-            d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"></path>
-          <path d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"></path>
+            d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"
+          ></path>
           <path
-            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"></path>
+            d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"
+          ></path>
           <path
-            d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"></path>
+            d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"
+          ></path>
           <path
-            d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"></path>
+            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"
+          ></path>
           <path
-            d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"></path>
+            d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"
+          ></path>
           <path
-            d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"></path>
+            d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"
+          ></path>
+          <path
+            d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"
+          ></path>
+          <path
+            d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"
+          ></path>
         </g>
       </svg>
     </a>
@@ -71,14 +114,21 @@
       aria-label="Juno is open source on GitHub"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
           <g>
             <g>
               <g>
                 <path
-                  d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"></path>
+                  d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"
+                ></path>
               </g>
             </g>
           </g>
@@ -91,17 +141,26 @@
       aria-label="Join our channel on Discord to chat or ask questions"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <g>
             <g>
               <path
-                d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"></path>
+                d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"
+              ></path>
               <path
-                d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"></path>
+                d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"
+              ></path>
               <path
-                d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"></path>
+                d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"
+              ></path>
             </g>
           </g>
         </g>
@@ -113,12 +172,21 @@
       aria-label="Follow Juno on X/Twitter"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <path
-            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
-          <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
+            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"
+          ></path>
+          <polygon
+            points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"
+          ></polygon>
         </g>
       </svg>
     </a>
diff --git a/templates/angular-example/src/app/components/footer/footer.component.ts b/templates/angular-example/src/app/components/footer/footer.component.ts
index d4872d9e..5fa5bf19 100644
--- a/templates/angular-example/src/app/components/footer/footer.component.ts
+++ b/templates/angular-example/src/app/components/footer/footer.component.ts
@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
   imports: [],
-  templateUrl: './footer.component.html'
+  templateUrl: './footer.component.html',
 })
 export class FooterComponent {}
diff --git a/templates/angular-example/src/app/components/home/home.component.html b/templates/angular-example/src/app/components/home/home.component.html
index 5007fe2e..c23e35f4 100644
--- a/templates/angular-example/src/app/components/home/home.component.html
+++ b/templates/angular-example/src/app/components/home/home.component.html
@@ -1,12 +1,20 @@
 <div class="relative isolate min-h-[100dvh]">
   <main
-    class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-    <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+    class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+  >
+    <h1
+      class="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white"
+    >
       Example App
     </h1>
-    <p class="dark:text-white py-4 md:max-w-lg">
+    <p class="py-4 md:max-w-lg dark:text-white">
       Explore this demo app built with Angular, Tailwind, and
-      <a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
+      <a
+        href="https://juno.build"
+        rel="noopener noreferrer"
+        target="_blank"
+        class="underline"
+      >
         Juno</a
       >, showcasing a practical application of these technologies.
     </p>
diff --git a/templates/angular-example/src/app/components/home/home.component.ts b/templates/angular-example/src/app/components/home/home.component.ts
index 32009185..78df450e 100644
--- a/templates/angular-example/src/app/components/home/home.component.ts
+++ b/templates/angular-example/src/app/components/home/home.component.ts
@@ -1,13 +1,19 @@
-import {Component} from '@angular/core';
-import {AuthComponent} from '../auth/auth.component';
-import {BackgroundComponent} from '../background/background.component';
-import {FooterComponent} from '../footer/footer.component';
-import {ModalComponent} from '../modal/modal.component';
-import {TableComponent} from '../table/table.component';
+import { Component } from '@angular/core';
+import { AuthComponent } from '../auth/auth.component';
+import { BackgroundComponent } from '../background/background.component';
+import { FooterComponent } from '../footer/footer.component';
+import { ModalComponent } from '../modal/modal.component';
+import { TableComponent } from '../table/table.component';
 
 @Component({
   selector: 'app-home',
-  imports: [FooterComponent, BackgroundComponent, TableComponent, AuthComponent, ModalComponent],
-  templateUrl: './home.component.html'
+  imports: [
+    FooterComponent,
+    BackgroundComponent,
+    TableComponent,
+    AuthComponent,
+    ModalComponent,
+  ],
+  templateUrl: './home.component.html',
 })
 export class HomeComponent {}
diff --git a/templates/angular-example/src/app/components/login/login.component.ts b/templates/angular-example/src/app/components/login/login.component.ts
index 0371a73a..43b02875 100644
--- a/templates/angular-example/src/app/components/login/login.component.ts
+++ b/templates/angular-example/src/app/components/login/login.component.ts
@@ -1,11 +1,11 @@
-import {Component} from '@angular/core';
-import {signIn} from '@junobuild/core';
-import {ButtonComponent} from '../button/button.component';
+import { Component } from '@angular/core';
+import { signIn } from '@junobuild/core';
+import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'app-login',
   imports: [ButtonComponent],
-  templateUrl: './login.component.html'
+  templateUrl: './login.component.html',
 })
 export class LoginComponent {
   readonly signIn = signIn;
diff --git a/templates/angular-example/src/app/components/logout/logout.component.html b/templates/angular-example/src/app/components/logout/logout.component.html
index 25b306ac..178fd2ca 100644
--- a/templates/angular-example/src/app/components/logout/logout.component.html
+++ b/templates/angular-example/src/app/components/logout/logout.component.html
@@ -1,15 +1,18 @@
 <button
   type="button"
   (click)="signOut()"
-  class="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400">
+  class="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
+>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="16"
     viewBox="0 -960 960 960"
     width="16"
-    fill="currentColor">
+    fill="currentColor"
+  >
     <path
-      d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
+      d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"
+    />
   </svg>
   <span>
     <small>Logout</small>
diff --git a/templates/angular-example/src/app/components/logout/logout.component.ts b/templates/angular-example/src/app/components/logout/logout.component.ts
index b3748080..56f45687 100644
--- a/templates/angular-example/src/app/components/logout/logout.component.ts
+++ b/templates/angular-example/src/app/components/logout/logout.component.ts
@@ -1,10 +1,10 @@
-import {Component} from '@angular/core';
-import {signOut} from '@junobuild/core';
+import { Component } from '@angular/core';
+import { signOut } from '@junobuild/core';
 
 @Component({
   selector: 'app-logout',
   imports: [],
-  templateUrl: './logout.component.html'
+  templateUrl: './logout.component.html',
 })
 export class LogoutComponent {
   readonly signOut = signOut;
diff --git a/templates/angular-example/src/app/components/modal/modal.component.html b/templates/angular-example/src/app/components/modal/modal.component.html
index 7a6a6e19..8aadc9bf 100644
--- a/templates/angular-example/src/app/components/modal/modal.component.html
+++ b/templates/angular-example/src/app/components/modal/modal.component.html
@@ -5,40 +5,51 @@
     height="20"
     viewBox="0 -960 960 960"
     width="20"
-    fill="currentColor">
+    fill="currentColor"
+  >
     <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
   </svg>
 </app-button>
 
-<div class="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog" *ngIf="showModal">
+<div
+  class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+  role="dialog"
+  *ngIf="showModal"
+>
   <form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
     <div class="relative w-full max-w-xl">
       <textarea
-        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
+        class="form-control m-0 block w-full resize-none rounded-xs border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
         rows="{7}"
         placeholder="Your diary entry"
-        formControlName="entry"></textarea>
+        formControlName="entry"
+      ></textarea>
 
-      <div role="toolbar" class="flex justify-between items-center">
+      <div role="toolbar" class="flex items-center justify-between">
         <div>
           <button
             type="button"
             aria-label="Attach a file to the entry"
-            class="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400"
-            (click)="openSelectFile()">
+            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+            (click)="openSelectFile()"
+          >
             <svg
               width="20"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 29 29"
-              fill="currentColor">
+              fill="currentColor"
+            >
               <g>
                 <rect fill="none" class="opacity-25" width="29" height="29" />
                 <path
-                  d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
+                  d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
+                />
               </g>
             </svg>
-            <span class="truncate max-w-48">
-              <small>{{ file !== undefined ? file.name : 'Attach file' }}</small>
+            <span class="max-w-48 truncate">
+              <small>{{
+                file !== undefined ? file.name : "Attach file"
+              }}</small>
             </span>
           </button>
 
@@ -47,22 +58,25 @@
             class="fixed right-0 -bottom-24 opacity-0"
             (change)="onFileChanged($event)"
             [disabled]="diaryForm.disabled"
-            #inputFile />
+            #inputFile
+          />
         </div>
 
         <div
-          class="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+          class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
           role="status"
           aria-label="loading"
-          *ngIf="diaryForm.disabled">
+          *ngIf="diaryForm.disabled"
+        >
           <span class="sr-only">Loading...</span>
         </div>
 
-        <div class="flex my-4" *ngIf="!diaryForm.disabled">
+        <div class="my-4 flex" *ngIf="!diaryForm.disabled">
           <button
-            class="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
             type="button"
-            (click)="closeModal()">
+            (click)="closeModal()"
+          >
             Close
           </button>
 
diff --git a/templates/angular-example/src/app/components/modal/modal.component.ts b/templates/angular-example/src/app/components/modal/modal.component.ts
index 88260bda..bfad1ae1 100644
--- a/templates/angular-example/src/app/components/modal/modal.component.ts
+++ b/templates/angular-example/src/app/components/modal/modal.component.ts
@@ -1,17 +1,17 @@
-import {NgIf} from '@angular/common';
-import {Component, ElementRef, inject, ViewChild} from '@angular/core';
-import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
-import {setDoc, uploadFile, User} from '@junobuild/core';
-import {nanoid} from 'nanoid';
-import {AuthService} from '../../services/auth.service';
-import {DocsService} from '../../services/docs.service';
-import {BackdropComponent} from '../backdrop/backdrop.component';
-import {ButtonComponent} from '../button/button.component';
+import { NgIf } from '@angular/common';
+import { Component, ElementRef, inject, ViewChild } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { setDoc, uploadFile, User } from '@junobuild/core';
+import { nanoid } from 'nanoid';
+import { AuthService } from '../../services/auth.service';
+import { DocsService } from '../../services/docs.service';
+import { BackdropComponent } from '../backdrop/backdrop.component';
+import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'app-modal',
   imports: [NgIf, BackdropComponent, ReactiveFormsModule, ButtonComponent],
-  templateUrl: './modal.component.html'
+  templateUrl: './modal.component.html',
 })
 export class ModalComponent {
   private readonly authService = inject(AuthService);
@@ -22,7 +22,7 @@ export class ModalComponent {
   #formBuilder = inject(FormBuilder);
 
   diaryForm = this.#formBuilder.group({
-    entry: ''
+    entry: '',
   });
 
   showModal = false;
@@ -64,10 +64,10 @@ export class ModalComponent {
     if (this.file !== undefined) {
       const filename = `${user.key}-${this.file.name}`;
 
-      const {downloadUrl} = await uploadFile({
+      const { downloadUrl } = await uploadFile({
         collection: 'images',
         data: this.file,
-        filename
+        filename,
       });
 
       url = downloadUrl;
@@ -81,9 +81,9 @@ export class ModalComponent {
         key,
         data: {
           text: this.diaryForm.value.entry,
-          ...(url !== undefined && {url})
-        }
-      }
+          ...(url !== undefined && { url }),
+        },
+      },
     });
   }
 
diff --git a/templates/angular-example/src/app/components/table/table.component.html b/templates/angular-example/src/app/components/table/table.component.html
index cb0f3219..d92a3ddc 100644
--- a/templates/angular-example/src/app/components/table/table.component.html
+++ b/templates/angular-example/src/app/components/table/table.component.html
@@ -1,34 +1,44 @@
-<div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
+<div class="mt-8 w-full max-w-2xl dark:text-white" role="table">
   <div role="row">
     <span role="columnheader" aria-sort="none"> Entries </span>
   </div>
 
   <div class="py-2" role="rowgroup">
     <div
-      class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
+      class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
       role="row"
-      *ngFor="let item of docs(); index as i">
-      <span role="cell" aria-rowindex="{index}" class="p-1 flex align-center min-w-max">
+      *ngFor="let item of docs(); index as i"
+    >
+      <span
+        role="cell"
+        aria-rowindex="{index}"
+        class="align-center flex min-w-max p-1"
+      >
         {{ i + 1 }}
       </span>
-      <div role="cell" class="line-clamp-3 overflow-hidden grow">{{ item.data.text }}</div>
-      <div role="cell" class="flex gap-2 justify-center align-middle">
+      <div role="cell" class="line-clamp-3 grow overflow-hidden">
+        {{ item.data.text }}
+      </div>
+      <div role="cell" class="flex justify-center gap-2 align-middle">
         <a
           aria-label="Open data"
           rel="noopener noreferrer"
           [href]="item.data.url"
           *ngIf="item.data.url !== undefined"
           target="_blank"
-          class="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+          class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+        >
           <svg
             width="16"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 29 29"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <rect fill="none" class="opacity-25" width="29" height="29" />
               <path
-                d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
+                d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
+              />
             </g>
           </svg>
         </a>
diff --git a/templates/angular-example/src/app/components/table/table.component.ts b/templates/angular-example/src/app/components/table/table.component.ts
index 640fcaa7..24fe4863 100644
--- a/templates/angular-example/src/app/components/table/table.component.ts
+++ b/templates/angular-example/src/app/components/table/table.component.ts
@@ -1,14 +1,14 @@
-import {NgForOf, NgIf} from '@angular/common';
-import {Component, Signal, inject} from '@angular/core';
-import {Doc} from '@junobuild/core';
-import {DocsService} from '../../services/docs.service';
-import {Note} from '../../types/note';
-import {DeleteComponent} from '../delete/delete.component';
+import { NgForOf, NgIf } from '@angular/common';
+import { Component, Signal, inject } from '@angular/core';
+import { Doc } from '@junobuild/core';
+import { DocsService } from '../../services/docs.service';
+import { Note } from '../../types/note';
+import { DeleteComponent } from '../delete/delete.component';
 
 @Component({
   selector: 'app-table',
   imports: [NgForOf, NgIf, DeleteComponent],
-  templateUrl: './table.component.html'
+  templateUrl: './table.component.html',
 })
 export class TableComponent {
   private readonly docsService = inject(DocsService);
diff --git a/templates/angular-example/src/app/services/auth.service.ts b/templates/angular-example/src/app/services/auth.service.ts
index 72831037..6c04ddfd 100644
--- a/templates/angular-example/src/app/services/auth.service.ts
+++ b/templates/angular-example/src/app/services/auth.service.ts
@@ -1,14 +1,20 @@
-import {computed, Injectable, Signal, signal, WritableSignal} from '@angular/core';
-import {authSubscribe, User} from '@junobuild/core';
+import {
+  computed,
+  Injectable,
+  Signal,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import { authSubscribe, User } from '@junobuild/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AuthService {
   user: WritableSignal<User | undefined | null> = signal(undefined);
 
   readonly signedIn: Signal<boolean> = computed(
-    () => this.user() !== null && this.user() !== undefined
+    () => this.user() !== null && this.user() !== undefined,
   );
 
   constructor() {
diff --git a/templates/angular-example/src/app/services/docs.service.ts b/templates/angular-example/src/app/services/docs.service.ts
index ab33756f..063ccdf6 100644
--- a/templates/angular-example/src/app/services/docs.service.ts
+++ b/templates/angular-example/src/app/services/docs.service.ts
@@ -1,11 +1,17 @@
-import {effect, inject, Injectable, signal, WritableSignal} from '@angular/core';
-import type {Doc} from '@junobuild/core';
-import {listDocs} from '@junobuild/core';
-import type {Note} from '../types/note';
-import {AuthService} from './auth.service';
+import {
+  effect,
+  inject,
+  Injectable,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import type { Doc } from '@junobuild/core';
+import { listDocs } from '@junobuild/core';
+import type { Note } from '../types/note';
+import { AuthService } from './auth.service';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class DocsService {
   private readonly authService = inject(AuthService);
@@ -14,7 +20,7 @@ export class DocsService {
 
   constructor() {
     effect(async () => await this.loadDocs(this.authService.signedIn()), {
-      allowSignalWrites: true
+      allowSignalWrites: true,
     });
   }
 
@@ -28,8 +34,8 @@ export class DocsService {
       return;
     }
 
-    const {items} = await listDocs<Note>({
-      collection: 'notes'
+    const { items } = await listDocs<Note>({
+      collection: 'notes',
     });
 
     this.docs.set(items);
diff --git a/templates/angular-example/src/environments/environment.prod.ts b/templates/angular-example/src/environments/environment.prod.ts
index 81c7235d..addc93b2 100644
--- a/templates/angular-example/src/environments/environment.prod.ts
+++ b/templates/angular-example/src/environments/environment.prod.ts
@@ -1,4 +1,4 @@
 export const environment = {
   satelliteId: undefined,
-  container: false
+  container: false,
 };
diff --git a/templates/angular-example/src/environments/environment.ts b/templates/angular-example/src/environments/environment.ts
index 5f5c37b3..a5e0745f 100644
--- a/templates/angular-example/src/environments/environment.ts
+++ b/templates/angular-example/src/environments/environment.ts
@@ -1,4 +1,4 @@
-export const environment: {satelliteId: string; container: boolean} = {
+export const environment: { satelliteId: string; container: boolean } = {
   satelliteId: 'jx5yt-yyaaa-aaaal-abzbq-cai',
-  container: true
+  container: true,
 };
diff --git a/templates/angular-example/src/index.html b/templates/angular-example/src/index.html
index 8afc88bd..ce526388 100644
--- a/templates/angular-example/src/index.html
+++ b/templates/angular-example/src/index.html
@@ -15,13 +15,15 @@
       href="/assets/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/assets/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <app-root></app-root>
diff --git a/templates/angular-example/src/main.ts b/templates/angular-example/src/main.ts
index c8f2cda2..3fdb36ef 100644
--- a/templates/angular-example/src/main.ts
+++ b/templates/angular-example/src/main.ts
@@ -1,10 +1,12 @@
-import {bootstrapApplication} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
-import {appConfig} from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
 // Agent-js requires a polyfill 😕
 // I've reported this issue multiple times. Hopefully, it will be addressed in the future.
 // ERROR ReferenceError: global is not defined
 (window as any).global = window;
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);
diff --git a/templates/angular-example/src/styles.css b/templates/angular-example/src/styles.css
index 2537e07a..ba53aec2 100644
--- a/templates/angular-example/src/styles.css
+++ b/templates/angular-example/src/styles.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('/assets/fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("/assets/fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('/assets/fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("/assets/fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/angular-starter/juno.dev.config.js b/templates/angular-starter/juno.dev.config.js
index a985e4dc..2de27daa 100644
--- a/templates/angular-starter/juno.dev.config.js
+++ b/templates/angular-starter/juno.dev.config.js
@@ -1,11 +1,11 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [],
-      storage: []
-    }
-  }
+      storage: [],
+    },
+  },
 }));
diff --git a/templates/angular-starter/src/app/app.component.ts b/templates/angular-starter/src/app/app.component.ts
index 3a0ca9f7..a9fa0c15 100644
--- a/templates/angular-starter/src/app/app.component.ts
+++ b/templates/angular-starter/src/app/app.component.ts
@@ -1,12 +1,12 @@
-import {Component} from '@angular/core';
-import {initSatellite} from '@junobuild/core';
-import {environment} from '../environments/environment';
-import {HomeComponent} from './components/home/home.component';
+import { Component } from '@angular/core';
+import { initSatellite } from '@junobuild/core';
+import { environment } from '../environments/environment';
+import { HomeComponent } from './components/home/home.component';
 
 @Component({
   selector: 'app-root',
   imports: [HomeComponent],
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
 })
 export class AppComponent {
   title = 'Juno / Angular Starter';
@@ -16,8 +16,8 @@ export class AppComponent {
       satelliteId: environment.satelliteId,
       container: environment.container,
       workers: {
-        auth: './assets/workers/auth.worker.js'
-      }
+        auth: './assets/workers/auth.worker.js',
+      },
     });
   }
 }
diff --git a/templates/angular-starter/src/app/app.config.ts b/templates/angular-starter/src/app/app.config.ts
index baf3e0c8..e7d665f8 100644
--- a/templates/angular-starter/src/app/app.config.ts
+++ b/templates/angular-starter/src/app/app.config.ts
@@ -1,8 +1,8 @@
-import {ApplicationConfig} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
 
-import {routes} from './app.routes';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes)],
 };
diff --git a/templates/angular-starter/src/app/app.routes.ts b/templates/angular-starter/src/app/app.routes.ts
index 8b5e5fb2..dc39edb5 100644
--- a/templates/angular-starter/src/app/app.routes.ts
+++ b/templates/angular-starter/src/app/app.routes.ts
@@ -1,3 +1,3 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
 export const routes: Routes = [];
diff --git a/templates/angular-starter/src/app/components/article/article.component.html b/templates/angular-starter/src/app/components/article/article.component.html
index f1cd3558..2d73c1c2 100644
--- a/templates/angular-starter/src/app/components/article/article.component.html
+++ b/templates/angular-starter/src/app/components/article/article.component.html
@@ -3,9 +3,11 @@
   rel="noreferrer noopener"
   target="_blank"
   [attr.aria-label]="ariaLabel"
-  class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+  class="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+>
   <h4
-    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
+    class="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white"
+  >
     <ng-content select=".title"></ng-content>
   </h4>
 
diff --git a/templates/angular-starter/src/app/components/article/article.component.ts b/templates/angular-starter/src/app/components/article/article.component.ts
index 2dd9fd85..c41950b9 100644
--- a/templates/angular-starter/src/app/components/article/article.component.ts
+++ b/templates/angular-starter/src/app/components/article/article.component.ts
@@ -1,9 +1,9 @@
-import {Component, Input} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-article',
   imports: [],
-  templateUrl: './article.component.html'
+  templateUrl: './article.component.html',
 })
 export class ArticleComponent {
   @Input() href!: string;
diff --git a/templates/angular-starter/src/app/components/background/background.component.html b/templates/angular-starter/src/app/components/background/background.component.html
index d1fcb634..20acd295 100644
--- a/templates/angular-starter/src/app/components/background/background.component.html
+++ b/templates/angular-starter/src/app/components/background/background.component.html
@@ -1,6 +1,7 @@
 <img
-  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4"
   src="/assets/juno_illustration.svg"
   role="presentation"
   loading="lazy"
-  alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background." />
+  alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background."
+/>
diff --git a/templates/angular-starter/src/app/components/background/background.component.ts b/templates/angular-starter/src/app/components/background/background.component.ts
index fa46f48f..5a48ef02 100644
--- a/templates/angular-starter/src/app/components/background/background.component.ts
+++ b/templates/angular-starter/src/app/components/background/background.component.ts
@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-background',
   imports: [],
-  templateUrl: './background.component.html'
+  templateUrl: './background.component.html',
 })
 export class BackgroundComponent {}
diff --git a/templates/angular-starter/src/app/components/footer/footer.component.html b/templates/angular-starter/src/app/components/footer/footer.component.html
index 8929724c..3238928f 100644
--- a/templates/angular-starter/src/app/components/footer/footer.component.html
+++ b/templates/angular-starter/src/app/components/footer/footer.component.html
@@ -1,21 +1,39 @@
 <footer
-  class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
-  <span class="flex gap-2 items-baseline">
+  class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white"
+>
+  <span class="flex items-baseline gap-2">
     <svg
       id="Layer_2"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1000 220.39"
       width="80"
-      fill="currentColor">
+      fill="currentColor"
+    >
       <g>
         <path
-          d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
+          d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"
+        ></path>
         <path
-          d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-        <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+          d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"
+        ></path>
+        <rect
+          x="725.65"
+          y="0"
+          width="220.39"
+          height="220.39"
+          rx="110.19"
+          ry="110.19"
+        ></rect>
         <path
-          d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-        <circle class="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+          d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"
+        ></path>
+        <circle
+          class="cls-1"
+          cx="931.86"
+          cy="68.14"
+          r="68.14"
+          fill="#7888ff"
+        ></circle>
       </g>
     </svg>
     <small class="hidden md:block">Blockchainless Platform</small>
@@ -27,41 +45,66 @@
       aria-label="Go to Juno website and documentation"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <path
-            d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
+            d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"
+          ></path>
           <path
-            d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
+            d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"
+          ></path>
           <path
-            d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"></path>
-          <path d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"></path>
+            d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"
+          ></path>
           <path
-            d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"></path>
+            d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"
+          ></path>
           <path
-            d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"></path>
+            d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"
+          ></path>
           <path
-            d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"></path>
+            d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"
+          ></path>
           <path
-            d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"></path>
+            d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"
+          ></path>
           <path
-            d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"></path>
+            d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"
+          ></path>
           <path
-            d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"></path>
+            d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"
+          ></path>
           <path
-            d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"></path>
-          <path d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"></path>
+            d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"
+          ></path>
           <path
-            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"></path>
+            d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"
+          ></path>
           <path
-            d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"></path>
+            d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"
+          ></path>
           <path
-            d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"></path>
+            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"
+          ></path>
           <path
-            d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"></path>
+            d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"
+          ></path>
           <path
-            d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"></path>
+            d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"
+          ></path>
+          <path
+            d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"
+          ></path>
+          <path
+            d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"
+          ></path>
         </g>
       </svg>
     </a>
@@ -71,14 +114,21 @@
       aria-label="Juno is open source on GitHub"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
           <g>
             <g>
               <g>
                 <path
-                  d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"></path>
+                  d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"
+                ></path>
               </g>
             </g>
           </g>
@@ -91,17 +141,26 @@
       aria-label="Join our channel on Discord to chat or ask questions"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <g>
             <g>
               <path
-                d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"></path>
+                d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"
+              ></path>
               <path
-                d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"></path>
+                d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"
+              ></path>
               <path
-                d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"></path>
+                d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"
+              ></path>
             </g>
           </g>
         </g>
@@ -113,12 +172,21 @@
       aria-label="Follow Juno on X/Twitter"
       class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
       target="_blank"
-      rel="noopener noreferrer">
-      <svg width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="currentColor">
+      rel="noopener noreferrer"
+    >
+      <svg
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49 49"
+        fill="currentColor"
+      >
         <g>
           <path
-            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
-          <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
+            d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"
+          ></path>
+          <polygon
+            points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"
+          ></polygon>
         </g>
       </svg>
     </a>
diff --git a/templates/angular-starter/src/app/components/footer/footer.component.ts b/templates/angular-starter/src/app/components/footer/footer.component.ts
index d4872d9e..5fa5bf19 100644
--- a/templates/angular-starter/src/app/components/footer/footer.component.ts
+++ b/templates/angular-starter/src/app/components/footer/footer.component.ts
@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
   imports: [],
-  templateUrl: './footer.component.html'
+  templateUrl: './footer.component.html',
 })
 export class FooterComponent {}
diff --git a/templates/angular-starter/src/app/components/hero/hero.component.html b/templates/angular-starter/src/app/components/hero/hero.component.html
index 72903b05..e7a73913 100644
--- a/templates/angular-starter/src/app/components/hero/hero.component.html
+++ b/templates/angular-starter/src/app/components/hero/hero.component.html
@@ -3,6 +3,7 @@
   rel="noreferrer noopener"
   target="_blank"
   [attr.aria-label]="ariaLabel"
-  class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+  class="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+>
   <ng-content></ng-content>
 </a>
diff --git a/templates/angular-starter/src/app/components/hero/hero.component.ts b/templates/angular-starter/src/app/components/hero/hero.component.ts
index 6a7b55e4..b435a913 100644
--- a/templates/angular-starter/src/app/components/hero/hero.component.ts
+++ b/templates/angular-starter/src/app/components/hero/hero.component.ts
@@ -1,9 +1,9 @@
-import {Component, Input} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-hero',
   imports: [],
-  templateUrl: './hero.component.html'
+  templateUrl: './hero.component.html',
 })
 export class HeroComponent {
   @Input() href!: string;
diff --git a/templates/angular-starter/src/app/components/home/home.component.html b/templates/angular-starter/src/app/components/home/home.component.html
index e7cabbcb..ca954334 100644
--- a/templates/angular-starter/src/app/components/home/home.component.html
+++ b/templates/angular-starter/src/app/components/home/home.component.html
@@ -1,20 +1,25 @@
 <div class="relative isolate min-h-[100dvh]">
   <main
-    class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-    <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
+    class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+  >
+    <h1 class="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">
+      Welcome to Juno
+    </h1>
 
-    <div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+    <div class="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
       <app-hero
         class="contents"
         href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
-        ariaLabel="Discover how to create a Satellite and deploy your project to production">
+        ariaLabel="Discover how to create a Satellite and deploy your project to production"
+      >
         Not yet live? Launch your Satellite
       </app-hero>
 
       <app-article
         class="contents"
         href="https://juno.build/docs/guides/astro"
-        ariaLabel="Open quickstart guides on Juno's website">
+        ariaLabel="Open quickstart guides on Juno's website"
+      >
         <span class="title">Quickstart</span>
 
         Discover how to deploy and enhance your newly created Juno project.
@@ -23,7 +28,8 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome
       <app-article
         class="contents"
         href="https://juno.build/docs/category/build"
-        ariaLabel="Open the list of features for building apps on Juno's website">
+        ariaLabel="Open the list of features for building apps on Juno's website"
+      >
         <span class="title">Documentation</span>
 
         Learn how Juno works and explore the official docs.
@@ -32,7 +38,8 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome
       <app-article
         class="contents"
         href="https://juno.build/docs/miscellaneous/github_actions"
-        ariaLabel="Open the guide to setting up GitHub Actions for Juno">
+        ariaLabel="Open the guide to setting up GitHub Actions for Juno"
+      >
         <span class="title">Continuous Integration</span>
 
         Automate your deployment with GitHub Actions.
@@ -41,7 +48,8 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome
       <app-article
         class="contents"
         href="https://discord.gg/wHZ57Z2RAG"
-        ariaLabel="Join Juno's Discord channel for questions or to share the fun">
+        ariaLabel="Join Juno's Discord channel for questions or to share the fun"
+      >
         <span class="title">Community</span>
 
         Come say hi to our amazing Discord community. ❤️
diff --git a/templates/angular-starter/src/app/components/home/home.component.ts b/templates/angular-starter/src/app/components/home/home.component.ts
index 076b90b6..b4691c7e 100644
--- a/templates/angular-starter/src/app/components/home/home.component.ts
+++ b/templates/angular-starter/src/app/components/home/home.component.ts
@@ -1,12 +1,17 @@
-import {Component} from '@angular/core';
-import {ArticleComponent} from '../article/article.component';
-import {BackgroundComponent} from '../background/background.component';
-import {FooterComponent} from '../footer/footer.component';
-import {HeroComponent} from '../hero/hero.component';
+import { Component } from '@angular/core';
+import { ArticleComponent } from '../article/article.component';
+import { BackgroundComponent } from '../background/background.component';
+import { FooterComponent } from '../footer/footer.component';
+import { HeroComponent } from '../hero/hero.component';
 
 @Component({
   selector: 'app-home',
-  imports: [HeroComponent, ArticleComponent, FooterComponent, BackgroundComponent],
-  templateUrl: './home.component.html'
+  imports: [
+    HeroComponent,
+    ArticleComponent,
+    FooterComponent,
+    BackgroundComponent,
+  ],
+  templateUrl: './home.component.html',
 })
 export class HomeComponent {}
diff --git a/templates/angular-starter/src/environments/environment.prod.ts b/templates/angular-starter/src/environments/environment.prod.ts
index 81c7235d..addc93b2 100644
--- a/templates/angular-starter/src/environments/environment.prod.ts
+++ b/templates/angular-starter/src/environments/environment.prod.ts
@@ -1,4 +1,4 @@
 export const environment = {
   satelliteId: undefined,
-  container: false
+  container: false,
 };
diff --git a/templates/angular-starter/src/environments/environment.ts b/templates/angular-starter/src/environments/environment.ts
index 5f5c37b3..a5e0745f 100644
--- a/templates/angular-starter/src/environments/environment.ts
+++ b/templates/angular-starter/src/environments/environment.ts
@@ -1,4 +1,4 @@
-export const environment: {satelliteId: string; container: boolean} = {
+export const environment: { satelliteId: string; container: boolean } = {
   satelliteId: 'jx5yt-yyaaa-aaaal-abzbq-cai',
-  container: true
+  container: true,
 };
diff --git a/templates/angular-starter/src/index.html b/templates/angular-starter/src/index.html
index 3ba82184..616393c5 100644
--- a/templates/angular-starter/src/index.html
+++ b/templates/angular-starter/src/index.html
@@ -15,13 +15,15 @@
       href="/assets/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/assets/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <app-root></app-root>
diff --git a/templates/angular-starter/src/main.ts b/templates/angular-starter/src/main.ts
index c8f2cda2..3fdb36ef 100644
--- a/templates/angular-starter/src/main.ts
+++ b/templates/angular-starter/src/main.ts
@@ -1,10 +1,12 @@
-import {bootstrapApplication} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
-import {appConfig} from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
 // Agent-js requires a polyfill 😕
 // I've reported this issue multiple times. Hopefully, it will be addressed in the future.
 // ERROR ReferenceError: global is not defined
 (window as any).global = window;
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);
diff --git a/templates/angular-starter/src/styles.css b/templates/angular-starter/src/styles.css
index e8eeceb3..15dbc1db 100644
--- a/templates/angular-starter/src/styles.css
+++ b/templates/angular-starter/src/styles.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('/assets/fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("/assets/fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('/assets/fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("/assets/fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/astro-starter/src/components/Article.astro b/templates/astro-starter/src/components/Article.astro
index d250df5a..c4e4f776 100644
--- a/templates/astro-starter/src/components/Article.astro
+++ b/templates/astro-starter/src/components/Article.astro
@@ -12,10 +12,10 @@ const { href, ariaLabel } = Astro.props;
   rel="noreferrer noopener"
   target="_blank"
   aria-label={ariaLabel}
-  class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+  class="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
   <h4
-    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white"
+    class="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white"
   >
     <slot name="title" />
   </h4>
diff --git a/templates/astro-starter/src/components/Background.astro b/templates/astro-starter/src/components/Background.astro
index e59b7cd3..2d1961ea 100644
--- a/templates/astro-starter/src/components/Background.astro
+++ b/templates/astro-starter/src/components/Background.astro
@@ -1,5 +1,5 @@
 <img
-  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4"
   src="./juno_illustration.svg"
   role="presentation"
   loading="lazy"
diff --git a/templates/astro-starter/src/components/Footer.astro b/templates/astro-starter/src/components/Footer.astro
index 696f7b35..d6e68fb1 100644
--- a/templates/astro-starter/src/components/Footer.astro
+++ b/templates/astro-starter/src/components/Footer.astro
@@ -1,7 +1,7 @@
 <footer
-  class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
+  class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white"
 >
-  <span class="flex gap-2 items-baseline">
+  <span class="flex items-baseline gap-2">
     <svg
       id="Layer_2"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/astro-starter/src/components/Hero.astro b/templates/astro-starter/src/components/Hero.astro
index 9d2aa92c..dd087062 100644
--- a/templates/astro-starter/src/components/Hero.astro
+++ b/templates/astro-starter/src/components/Hero.astro
@@ -12,7 +12,7 @@ const { href, ariaLabel } = Astro.props;
   rel="noreferrer noopener"
   target="_blank"
   aria-label={ariaLabel}
-  class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+  class="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
   <slot />
 </a>
diff --git a/templates/astro-starter/src/pages/index.astro b/templates/astro-starter/src/pages/index.astro
index ead8b27f..66fe8533 100644
--- a/templates/astro-starter/src/pages/index.astro
+++ b/templates/astro-starter/src/pages/index.astro
@@ -22,15 +22,15 @@ import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts";
   <body class="bg-white dark:bg-black">
     <div class="relative isolate min-h-[100dvh]">
       <main
-        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+        class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
       >
         <h1
-          class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16"
+          class="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white"
         >
           Welcome to Juno
         </h1>
 
-        <div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+        <div class="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
           <Hero
             href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
             ariaLabel="Discover how to create a Satellite and deploy your project to production"
diff --git a/templates/astro-starter/src/styles/global.css b/templates/astro-starter/src/styles/global.css
index 5a1e3501..df5a55b4 100644
--- a/templates/astro-starter/src/styles/global.css
+++ b/templates/astro-starter/src/styles/global.css
@@ -15,7 +15,7 @@
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/nextjs-example/juno.dev.config.ts b/templates/nextjs-example/juno.dev.config.ts
index 58e1e172..3e33a9f9 100644
--- a/templates/nextjs-example/juno.dev.config.ts
+++ b/templates/nextjs-example/juno.dev.config.ts
@@ -1,26 +1,26 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed' as const,
-          write: 'managed' as const,
-          memory: 'stable' as const,
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed" as const,
+          write: "managed" as const,
+          memory: "stable" as const,
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed' as const,
-          write: 'managed' as const,
-          memory: 'stable' as const,
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed" as const,
+          write: "managed" as const,
+          memory: "stable" as const,
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/nextjs-example/next.config.mjs b/templates/nextjs-example/next.config.mjs
index 997d1e85..8f0cb88e 100644
--- a/templates/nextjs-example/next.config.mjs
+++ b/templates/nextjs-example/next.config.mjs
@@ -1,3 +1,3 @@
-import {withJuno} from '@junobuild/nextjs-plugin';
+import { withJuno } from "@junobuild/nextjs-plugin";
 
-export default withJuno({juno: {container: true}});
+export default withJuno({ juno: { container: true } });
diff --git a/templates/nextjs-example/postcss.config.js b/templates/nextjs-example/postcss.config.js
index 6b56317c..483f3785 100644
--- a/templates/nextjs-example/postcss.config.js
+++ b/templates/nextjs-example/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {}
-  }
+    "@tailwindcss/postcss": {},
+  },
 };
diff --git a/templates/nextjs-example/src/app/globals.css b/templates/nextjs-example/src/app/globals.css
index 51261358..363ffcab 100644
--- a/templates/nextjs-example/src/app/globals.css
+++ b/templates/nextjs-example/src/app/globals.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("/fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('/fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("/fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/nextjs-example/src/app/layout.tsx b/templates/nextjs-example/src/app/layout.tsx
index afac0c7d..cf610961 100644
--- a/templates/nextjs-example/src/app/layout.tsx
+++ b/templates/nextjs-example/src/app/layout.tsx
@@ -1,22 +1,24 @@
-import type {Metadata} from 'next';
-import {JetBrains_Mono} from 'next/font/google';
-import './globals.css';
+import type { Metadata } from "next";
+import { JetBrains_Mono } from "next/font/google";
+import "./globals.css";
 
-const jetBrainsMono = JetBrains_Mono({subsets: ['latin']});
+const jetBrainsMono = JetBrains_Mono({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Juno / Next.js Example',
-  description: 'Welcome to my app!'
+  title: "Juno / Next.js Example",
+  description: "Welcome to my app!",
 };
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={`${jetBrainsMono.className} bg-white dark:bg-black`}>{children}</body>
+      <body className={`${jetBrainsMono.className} bg-white dark:bg-black`}>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/templates/nextjs-example/src/app/page.tsx b/templates/nextjs-example/src/app/page.tsx
index a122469f..c04659e4 100644
--- a/templates/nextjs-example/src/app/page.tsx
+++ b/templates/nextjs-example/src/app/page.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import {Auth} from '@/components/auth';
-import {Background} from '@/components/background';
-import {Footer} from '@/components/footer';
-import {Modal} from '@/components/modal';
-import {Table} from '@/components/table';
-import {initSatellite} from '@junobuild/core';
-import {useEffect} from 'react';
+import { Auth } from "@/components/auth";
+import { Background } from "@/components/background";
+import { Footer } from "@/components/footer";
+import { Modal } from "@/components/modal";
+import { Table } from "@/components/table";
+import { initSatellite } from "@junobuild/core";
+import { useEffect } from "react";
 
 export default function Home() {
   useEffect(() => {
@@ -14,25 +14,26 @@ export default function Home() {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <>
       <div className="relative isolate min-h-[100dvh]">
-        <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-          <h1 className="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+        <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+          <h1 className="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
             Example App
           </h1>
-          <p className="dark:text-white py-4 md:max-w-lg">
-            Explore this demo app built with Next.js, Tailwind, and{' '}
+          <p className="py-4 md:max-w-lg dark:text-white">
+            Explore this demo app built with Next.js, Tailwind, and{" "}
             <a
               href="https://juno.build"
               rel="noopener noreferrer"
               target="_blank"
-              className="underline">
+              className="underline"
+            >
               Juno
             </a>
             , showcasing a practical application of these technologies.
diff --git a/templates/nextjs-example/src/components/auth.tsx b/templates/nextjs-example/src/components/auth.tsx
index 280b1871..b318a05f 100644
--- a/templates/nextjs-example/src/components/auth.tsx
+++ b/templates/nextjs-example/src/components/auth.tsx
@@ -1,15 +1,17 @@
-import {Login} from '@/components/login';
-import {Logout} from '@/components/logout';
-import {authSubscribe, type User} from '@junobuild/core';
-import {createContext, useEffect, useState, type ReactNode} from 'react';
+import { Login } from "@/components/login";
+import { Logout } from "@/components/logout";
+import { authSubscribe, type User } from "@junobuild/core";
+import { createContext, useEffect, useState, type ReactNode } from "react";
 
-export const AuthContext = createContext<{user: User | undefined | null}>({user: undefined});
+export const AuthContext = createContext<{ user: User | undefined | null }>({
+  user: undefined,
+});
 
 interface AuthProps {
   children: ReactNode;
 }
 
-export const Auth = ({children}: AuthProps) => {
+export const Auth = ({ children }: AuthProps) => {
   const [user, setUser] = useState<User | undefined | null>(undefined);
 
   useEffect(() => {
@@ -23,7 +25,7 @@ export const Auth = ({children}: AuthProps) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{user}}>
+    <AuthContext.Provider value={{ user }}>
       {user !== undefined && user !== null ? (
         <div>
           {children}
diff --git a/templates/nextjs-example/src/components/backdrop.tsx b/templates/nextjs-example/src/components/backdrop.tsx
index df4f84b6..9d309d63 100644
--- a/templates/nextjs-example/src/components/backdrop.tsx
+++ b/templates/nextjs-example/src/components/backdrop.tsx
@@ -2,12 +2,10 @@ interface BackdropProps {
   spinner?: boolean;
 }
 
-export const Backdrop = ({spinner = false}: BackdropProps) => (
-  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
+export const Backdrop = ({ spinner = false }: BackdropProps) => (
+  <div className="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl">
     {spinner && (
-      <div
-        className="w-12 h-12 rounded-full animate-spin
-                    border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>
+      <div className="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"></div>
     )}
   </div>
 );
diff --git a/templates/nextjs-example/src/components/background.tsx b/templates/nextjs-example/src/components/background.tsx
index 7c885103..32375ea9 100644
--- a/templates/nextjs-example/src/components/background.tsx
+++ b/templates/nextjs-example/src/components/background.tsx
@@ -1,8 +1,8 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <Image
         src="/juno_illustration.svg"
         role="presentation"
diff --git a/templates/nextjs-example/src/components/button.tsx b/templates/nextjs-example/src/components/button.tsx
index 4316cc4c..b06666e2 100644
--- a/templates/nextjs-example/src/components/button.tsx
+++ b/templates/nextjs-example/src/components/button.tsx
@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from "react";
 
 interface ButtonProps {
   children: ReactNode;
@@ -6,12 +6,17 @@ interface ButtonProps {
   disabled?: boolean;
 }
 
-export const Button = ({children, onClick, disabled = false}: ButtonProps) => {
+export const Button = ({
+  children,
+  onClick,
+  disabled = false,
+}: ButtonProps) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
+      className={`dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? "opacity-25" : "hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black"}`}
+    >
       {children}
     </button>
   );
diff --git a/templates/nextjs-example/src/components/delete.tsx b/templates/nextjs-example/src/components/delete.tsx
index 6080d355..b94cc893 100644
--- a/templates/nextjs-example/src/components/delete.tsx
+++ b/templates/nextjs-example/src/components/delete.tsx
@@ -1,14 +1,14 @@
-import {Backdrop} from '@/components/backdrop';
-import type {Note} from '@/types/note';
-import {deleteAsset, deleteDoc} from '@junobuild/core';
-import {useState} from 'react';
+import { Backdrop } from "@/components/backdrop";
+import type { Note } from "@/types/note";
+import { deleteAsset, deleteDoc } from "@junobuild/core";
+import { useState } from "react";
 
 interface DeleteProps {
   item: Note;
   reload: () => Promise<void>;
 }
 
-export const Delete = ({item, reload}: DeleteProps) => {
+export const Delete = ({ item, reload }: DeleteProps) => {
   const [inProgress, setInProgress] = useState(false);
 
   const delItem = async (doc: Note) => {
@@ -16,21 +16,21 @@ export const Delete = ({item, reload}: DeleteProps) => {
 
     try {
       const {
-        data: {url}
+        data: { url },
       } = doc;
 
       if (url !== undefined) {
-        const {pathname: fullPath} = new URL(url);
+        const { pathname: fullPath } = new URL(url);
 
         await deleteAsset({
-          collection: 'images',
-          fullPath
+          collection: "images",
+          fullPath,
         });
       }
 
       await deleteDoc({
-        collection: 'notes',
-        doc
+        collection: "notes",
+        doc,
       });
 
       await reload();
@@ -48,8 +48,14 @@ export const Delete = ({item, reload}: DeleteProps) => {
         className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
         onClick={async () => {
           await delItem(item);
-        }}>
-        <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+        }}
+      >
+        <svg
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 29 29"
+          fill="currentColor"
+        >
           <g>
             <rect fill="none" className="opacity-25" width="29" height="29" />
             <path
diff --git a/templates/nextjs-example/src/components/footer.tsx b/templates/nextjs-example/src/components/footer.tsx
index f0aca094..8a013328 100644
--- a/templates/nextjs-example/src/components/footer.tsx
+++ b/templates/nextjs-example/src/components/footer.tsx
@@ -1,19 +1,33 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -25,12 +39,14 @@ export const Footer = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -58,12 +74,14 @@ export const Footer = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -81,12 +99,14 @@ export const Footer = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -104,12 +124,14 @@ export const Footer = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/nextjs-example/src/components/login.tsx b/templates/nextjs-example/src/components/login.tsx
index b35d476a..e53ed6e9 100644
--- a/templates/nextjs-example/src/components/login.tsx
+++ b/templates/nextjs-example/src/components/login.tsx
@@ -1,5 +1,5 @@
-import {Button} from '@/components/button';
-import {signIn} from '@junobuild/core';
+import { Button } from "@/components/button";
+import { signIn } from "@junobuild/core";
 
 export const Login = () => {
   return <Button onClick={signIn}>Sign in</Button>;
diff --git a/templates/nextjs-example/src/components/logout.tsx b/templates/nextjs-example/src/components/logout.tsx
index 38fdc8fb..9462198f 100644
--- a/templates/nextjs-example/src/components/logout.tsx
+++ b/templates/nextjs-example/src/components/logout.tsx
@@ -1,17 +1,19 @@
-import {signOut} from '@junobuild/core';
+import { signOut } from "@junobuild/core";
 
 export const Logout = () => {
   return (
     <button
       type="button"
       onClick={signOut}
-      className="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400">
+      className="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="16"
         viewBox="0 -960 960 960"
         width="16"
-        fill="currentColor">
+        fill="currentColor"
+      >
         <path d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
       </svg>
       <span>
diff --git a/templates/nextjs-example/src/components/modal.tsx b/templates/nextjs-example/src/components/modal.tsx
index c691c378..e0bd72c6 100644
--- a/templates/nextjs-example/src/components/modal.tsx
+++ b/templates/nextjs-example/src/components/modal.tsx
@@ -1,26 +1,26 @@
-import {AuthContext} from '@/components/auth';
-import {Backdrop} from '@/components/backdrop';
-import {Button} from '@/components/button';
-import {setDoc, uploadFile} from '@junobuild/core';
-import {nanoid} from 'nanoid';
-import {useContext, useEffect, useRef, useState} from 'react';
+import { AuthContext } from "@/components/auth";
+import { Backdrop } from "@/components/backdrop";
+import { Button } from "@/components/button";
+import { setDoc, uploadFile } from "@junobuild/core";
+import { nanoid } from "nanoid";
+import { useContext, useEffect, useRef, useState } from "react";
 
 export const Modal = () => {
   const [showModal, setShowModal] = useState<boolean>(false);
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState("");
   const [valid, setValid] = useState(false);
   const [progress, setProgress] = useState(false);
   const [file, setFile] = useState<File | undefined>(undefined);
   const uploadElement = useRef<HTMLInputElement>(null);
 
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
 
   useEffect(() => {
-    setValid(inputText !== '' && user !== undefined && user !== null);
+    setValid(inputText !== "" && user !== undefined && user !== null);
   }, [showModal, inputText, user]);
 
   const reload = () => {
-    const event = new CustomEvent('reload');
+    const event = new CustomEvent("reload");
     window.dispatchEvent(event);
   };
 
@@ -38,10 +38,10 @@ export const Modal = () => {
       if (file !== undefined) {
         const filename = `${user.key}-${file.name}`;
 
-        const {downloadUrl} = await uploadFile({
-          collection: 'images',
+        const { downloadUrl } = await uploadFile({
+          collection: "images",
           data: file,
-          filename
+          filename,
         });
 
         url = downloadUrl;
@@ -50,14 +50,14 @@ export const Modal = () => {
       const key = nanoid();
 
       await setDoc({
-        collection: 'notes',
+        collection: "notes",
         doc: {
           key,
           data: {
             text: inputText,
-            ...(url !== undefined && {url})
-          }
-        }
+            ...(url !== undefined && { url }),
+          },
+        },
       });
 
       setShowModal(false);
@@ -75,64 +75,67 @@ export const Modal = () => {
       <Button
         onClick={() => {
           setShowModal(true);
-        }}>
-        Add an entry{' '}
+        }}
+      >
+        Add an entry{" "}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="20"
           viewBox="0 -960 960 960"
           width="20"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
         </svg>
       </Button>
 
       {showModal ? (
         <>
-          <div className="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+          >
             <div className="relative w-full max-w-xl">
               <textarea
-                className="
-        form-control
-        block
-        w-full
-        px-3
-        py-1.5
-        text-base
-        font-normal
-        m-0
-        resize-none
-        border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)]
-        focus:outline-hidden
-      "
+                className="form-control m-0 block w-full resize-none rounded-sm border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
                 rows={7}
                 placeholder="Your diary entry"
                 onChange={(e) => {
                   setInputText(e.target.value);
                 }}
                 value={inputText}
-                disabled={progress}></textarea>
+                disabled={progress}
+              ></textarea>
 
-              <div role="toolbar" className="flex justify-between items-center">
+              <div role="toolbar" className="flex items-center justify-between">
                 <div>
                   <button
                     aria-label="Attach a file to the entry"
                     onClick={() => {
                       uploadElement?.current?.click();
                     }}
-                    className="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+                  >
                     <svg
                       width="20"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
-                    <span className="truncate max-w-48">
-                      <small>{file !== undefined ? file.name : 'Attach file'}</small>
+                    <span className="max-w-48 truncate">
+                      <small>
+                        {file !== undefined ? file.name : "Attach file"}
+                      </small>
                     </span>
                   </button>
 
@@ -149,19 +152,21 @@ export const Modal = () => {
 
                 {progress ? (
                   <div
-                    className="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+                    className="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
                     role="status"
-                    aria-label="loading">
+                    aria-label="loading"
+                  >
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex my-4">
+                  <div className="my-4 flex">
                     <button
-                      className="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+                      className="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
                       type="button"
                       onClick={() => {
                         setShowModal(false);
-                      }}>
+                      }}
+                    >
                       Close
                     </button>
 
diff --git a/templates/nextjs-example/src/components/table.tsx b/templates/nextjs-example/src/components/table.tsx
index 5c10e246..0e3d5fe3 100644
--- a/templates/nextjs-example/src/components/table.tsx
+++ b/templates/nextjs-example/src/components/table.tsx
@@ -1,25 +1,25 @@
-import {AuthContext} from '@/components/auth';
-import {Delete} from '@/components/delete';
-import type {Note, NoteData} from '@/types/note';
-import {listDocs} from '@junobuild/core';
-import {useContext, useEffect, useState} from 'react';
+import { AuthContext } from "@/components/auth";
+import { Delete } from "@/components/delete";
+import type { Note, NoteData } from "@/types/note";
+import { listDocs } from "@junobuild/core";
+import { useContext, useEffect, useState } from "react";
 
 export const Table = () => {
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const [items, setItems] = useState<Note[]>([]);
 
   useEffect(() => {
-    window.addEventListener('reload', list);
+    window.addEventListener("reload", list);
 
     return () => {
-      window.removeEventListener('reload', list);
+      window.removeEventListener("reload", list);
     };
   }, []);
 
   const list = async () => {
-    const {items} = await listDocs<NoteData>({
-      collection: 'notes',
-      filter: {}
+    const { items } = await listDocs<NoteData>({
+      collection: "notes",
+      filter: {},
     });
 
     setItems(items);
@@ -38,7 +38,7 @@ export const Table = () => {
   }, [user]);
 
   return (
-    <div className="w-full max-w-2xl mt-8 dark:text-white" role="table">
+    <div className="mt-8 w-full max-w-2xl dark:text-white" role="table">
       <div role="row">
         <span role="columnheader" aria-sort="none">
           Entries
@@ -49,35 +49,50 @@ export const Table = () => {
         {items.map((item, index) => {
           const {
             key,
-            data: {text, url}
+            data: { text, url },
           } = item;
 
           return (
             <div
               key={key}
-              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
-              role="row">
-              <span role="cell" aria-rowindex={index} className="p-1 flex align-center min-w-max">
+              className="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
+              role="row"
+            >
+              <span
+                role="cell"
+                aria-rowindex={index}
+                className="align-center flex min-w-max p-1"
+              >
                 {index + 1} )
               </span>
-              <div role="cell" className="line-clamp-3 overflow-hidden grow">
+              <div role="cell" className="line-clamp-3 grow overflow-hidden">
                 {text}
               </div>
-              <div role="cell" className="flex gap-2 justify-center align-middle">
+              <div
+                role="cell"
+                className="flex justify-center gap-2 align-middle"
+              >
                 {url !== undefined ? (
                   <a
                     aria-label="Open data"
                     rel="noopener noreferrer"
                     href={url}
                     target="_blank"
-                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+                  >
                     <svg
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
diff --git a/templates/nextjs-example/src/types/note.ts b/templates/nextjs-example/src/types/note.ts
index bb58281e..409b53e0 100644
--- a/templates/nextjs-example/src/types/note.ts
+++ b/templates/nextjs-example/src/types/note.ts
@@ -1,4 +1,4 @@
-import type {Doc} from '@junobuild/core';
+import type { Doc } from "@junobuild/core";
 
 export interface NoteData {
   text: string;
diff --git a/templates/nextjs-starter/juno.dev.config.ts b/templates/nextjs-starter/juno.dev.config.ts
index 55e369d5..49078a02 100644
--- a/templates/nextjs-starter/juno.dev.config.ts
+++ b/templates/nextjs-starter/juno.dev.config.ts
@@ -1,10 +1,10 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [],
-      storage: []
-    }
-  }
+      storage: [],
+    },
+  },
 }));
diff --git a/templates/nextjs-starter/next.config.mjs b/templates/nextjs-starter/next.config.mjs
index 997d1e85..8f0cb88e 100644
--- a/templates/nextjs-starter/next.config.mjs
+++ b/templates/nextjs-starter/next.config.mjs
@@ -1,3 +1,3 @@
-import {withJuno} from '@junobuild/nextjs-plugin';
+import { withJuno } from "@junobuild/nextjs-plugin";
 
-export default withJuno({juno: {container: true}});
+export default withJuno({ juno: { container: true } });
diff --git a/templates/nextjs-starter/postcss.config.js b/templates/nextjs-starter/postcss.config.js
index 6b56317c..483f3785 100644
--- a/templates/nextjs-starter/postcss.config.js
+++ b/templates/nextjs-starter/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {}
-  }
+    "@tailwindcss/postcss": {},
+  },
 };
diff --git a/templates/nextjs-starter/src/app/globals.css b/templates/nextjs-starter/src/app/globals.css
index 25945bed..ba81b866 100644
--- a/templates/nextjs-starter/src/app/globals.css
+++ b/templates/nextjs-starter/src/app/globals.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("/fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('/fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("/fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/nextjs-starter/src/app/layout.tsx b/templates/nextjs-starter/src/app/layout.tsx
index 59a8923b..b50135b1 100644
--- a/templates/nextjs-starter/src/app/layout.tsx
+++ b/templates/nextjs-starter/src/app/layout.tsx
@@ -1,22 +1,24 @@
-import type {Metadata} from 'next';
-import {JetBrains_Mono} from 'next/font/google';
-import './globals.css';
+import type { Metadata } from "next";
+import { JetBrains_Mono } from "next/font/google";
+import "./globals.css";
 
-const jetBrainsMono = JetBrains_Mono({subsets: ['latin']});
+const jetBrainsMono = JetBrains_Mono({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Juno / Next.js Starter',
-  description: 'Welcome to my app!'
+  title: "Juno / Next.js Starter",
+  description: "Welcome to my app!",
 };
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={`${jetBrainsMono.className} bg-white dark:bg-black`}>{children}</body>
+      <body className={`${jetBrainsMono.className} bg-white dark:bg-black`}>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/templates/nextjs-starter/src/app/page.tsx b/templates/nextjs-starter/src/app/page.tsx
index 8169df66..65b89dec 100644
--- a/templates/nextjs-starter/src/app/page.tsx
+++ b/templates/nextjs-starter/src/app/page.tsx
@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import {Article} from '@/components/article';
-import {Background} from '@/components/background';
-import {Footer} from '@/components/footer';
-import {Hero} from '@/components/hero';
-import {initSatellite} from '@junobuild/core';
-import {useEffect} from 'react';
+import { Article } from "@/components/article";
+import { Background } from "@/components/background";
+import { Footer } from "@/components/footer";
+import { Hero } from "@/components/hero";
+import { initSatellite } from "@junobuild/core";
+import { useEffect } from "react";
 
 export default function Home() {
   useEffect(() => {
@@ -13,50 +13,55 @@ export default function Home() {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <div className="relative isolate min-h-[100dvh]">
-      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-        <h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
+      <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+        <h1 className="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">
           Welcome to Juno
         </h1>
 
-        <div className="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+        <div className="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
           <Hero
             href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
-            ariaLabel="Discover how to create a Satellite and deploy your project to production">
+            ariaLabel="Discover how to create a Satellite and deploy your project to production"
+          >
             Not yet live? Launch your Satellite
           </Hero>
 
           <Article
             href="https://juno.build/docs/category/build"
             ariaLabel="Open the list of features for building apps on Juno's website"
-            title="Documentation">
+            title="Documentation"
+          >
             Learn how Juno works and explore the official docs.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/local-development"
             ariaLabel="Open Juno's documentation for guidance on setting up local development"
-            title="Local Development">
+            title="Local Development"
+          >
             Set up your environment and start building locally.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/github_actions"
             ariaLabel="Open the guide to setting up GitHub Actions for Juno"
-            title="Continuous Integration">
+            title="Continuous Integration"
+          >
             Automate your deployment with GitHub Actions.
           </Article>
 
           <Article
             href="https://discord.gg/wHZ57Z2RAG"
             ariaLabel="Join Juno's Discord channel for questions or to share the fun"
-            title="Community">
+            title="Community"
+          >
             Come say hi to our amazing Discord community. ❤️
           </Article>
         </div>
diff --git a/templates/nextjs-starter/src/components/article.tsx b/templates/nextjs-starter/src/components/article.tsx
index 4e236d9f..c02e49bf 100644
--- a/templates/nextjs-starter/src/components/article.tsx
+++ b/templates/nextjs-starter/src/components/article.tsx
@@ -1,4 +1,4 @@
-import type {FunctionComponent, PropsWithChildren} from 'react';
+import type { FunctionComponent, PropsWithChildren } from "react";
 
 interface HeroProps {
   href: string;
@@ -10,7 +10,7 @@ export const Article: FunctionComponent<PropsWithChildren<HeroProps>> = ({
   href,
   ariaLabel,
   children,
-  title
+  title,
 }) => {
   return (
     <a
@@ -18,8 +18,9 @@ export const Article: FunctionComponent<PropsWithChildren<HeroProps>> = ({
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
-      <h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
+      className="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
+      <h4 className="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white">
         {title}
       </h4>
 
diff --git a/templates/nextjs-starter/src/components/background.tsx b/templates/nextjs-starter/src/components/background.tsx
index 7c885103..32375ea9 100644
--- a/templates/nextjs-starter/src/components/background.tsx
+++ b/templates/nextjs-starter/src/components/background.tsx
@@ -1,8 +1,8 @@
-import Image from 'next/image';
+import Image from "next/image";
 
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <Image
         src="/juno_illustration.svg"
         role="presentation"
diff --git a/templates/nextjs-starter/src/components/footer.tsx b/templates/nextjs-starter/src/components/footer.tsx
index f8a09112..7952dc2e 100644
--- a/templates/nextjs-starter/src/components/footer.tsx
+++ b/templates/nextjs-starter/src/components/footer.tsx
@@ -1,19 +1,33 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -25,12 +39,14 @@ export const Footer = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -58,12 +74,14 @@ export const Footer = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -81,12 +99,14 @@ export const Footer = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -104,12 +124,14 @@ export const Footer = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/nextjs-starter/src/components/hero.tsx b/templates/nextjs-starter/src/components/hero.tsx
index dda48a67..5eaa8e54 100644
--- a/templates/nextjs-starter/src/components/hero.tsx
+++ b/templates/nextjs-starter/src/components/hero.tsx
@@ -1,4 +1,4 @@
-import type {FunctionComponent, PropsWithChildren} from 'react';
+import type { FunctionComponent, PropsWithChildren } from "react";
 
 interface HeroProps {
   href: string;
@@ -8,7 +8,7 @@ interface HeroProps {
 export const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
   href,
   ariaLabel,
-  children
+  children,
 }) => {
   return (
     <a
@@ -16,7 +16,8 @@ export const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+      className="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
       {children}
     </a>
   );
diff --git a/templates/react-example/eslint.config.js b/templates/react-example/eslint.config.js
index dcbd023a..4ab00721 100644
--- a/templates/react-example/eslint.config.js
+++ b/templates/react-example/eslint.config.js
@@ -1,35 +1,38 @@
-import js from '@eslint/js';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import globals from 'globals';
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 
 export default [
-  {ignores: ['dist', 'public/workers']},
+  { ignores: ["dist", "public/workers"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: {jsx: true},
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
     },
-    settings: {react: {version: '18.3'}},
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
-    }
-  }
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
 ];
diff --git a/templates/react-example/index.html b/templates/react-example/index.html
index 0b16c3fb..959e47b9 100644
--- a/templates/react-example/index.html
+++ b/templates/react-example/index.html
@@ -12,13 +12,15 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div id="root"></div>
diff --git a/templates/react-example/juno.dev.config.js b/templates/react-example/juno.dev.config.js
index 822145f9..914cd131 100644
--- a/templates/react-example/juno.dev.config.js
+++ b/templates/react-example/juno.dev.config.js
@@ -1,4 +1,4 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
@@ -6,22 +6,22 @@ export default defineDevConfig(() => ({
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/react-example/src/App.jsx b/templates/react-example/src/App.jsx
index 0db3f68c..f6e89ac4 100644
--- a/templates/react-example/src/App.jsx
+++ b/templates/react-example/src/App.jsx
@@ -1,35 +1,36 @@
-import {initSatellite} from '@junobuild/core';
-import {useEffect} from 'react';
-import {Auth} from './components/Auth';
-import {Background} from './components/Background';
-import {Footer} from './components/Footer';
-import {Modal} from './components/Modal';
-import {Table} from './components/Table';
+import { initSatellite } from "@junobuild/core";
+import { useEffect } from "react";
+import { Auth } from "./components/Auth";
+import { Background } from "./components/Background";
+import { Footer } from "./components/Footer";
+import { Modal } from "./components/Modal";
+import { Table } from "./components/Table";
 
 function App() {
   useEffect(() => {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <>
       <div className="relative isolate min-h-[100dvh]">
-        <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-          <h1 className="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+        <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+          <h1 className="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
             Example App
           </h1>
-          <p className="dark:text-white py-4 md:max-w-lg">
-            Explore this demo app built with React, Tailwind, and{' '}
+          <p className="py-4 md:max-w-lg dark:text-white">
+            Explore this demo app built with React, Tailwind, and{" "}
             <a
               href="https://juno.build"
               rel="noopener noreferrer"
               target="_blank"
-              className="underline">
+              className="underline"
+            >
               Juno
             </a>
             , showcasing a practical application of these technologies.
diff --git a/templates/react-example/src/components/Auth.jsx b/templates/react-example/src/components/Auth.jsx
index 2589dbfd..d6f2e360 100644
--- a/templates/react-example/src/components/Auth.jsx
+++ b/templates/react-example/src/components/Auth.jsx
@@ -1,12 +1,12 @@
-import {authSubscribe} from '@junobuild/core';
-import PropTypes from 'prop-types';
-import {createContext, useEffect, useState} from 'react';
-import {Login} from './Login';
-import {Logout} from './Logout';
+import { authSubscribe } from "@junobuild/core";
+import PropTypes from "prop-types";
+import { createContext, useEffect, useState } from "react";
+import { Login } from "./Login";
+import { Logout } from "./Logout";
 
 export const AuthContext = createContext();
 
-export const Auth = ({children}) => {
+export const Auth = ({ children }) => {
   const [user, setUser] = useState(undefined);
 
   useEffect(() => {
@@ -16,7 +16,7 @@ export const Auth = ({children}) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{user}}>
+    <AuthContext.Provider value={{ user }}>
       {user !== undefined && user !== null ? (
         <div>
           {children}
@@ -31,5 +31,5 @@ export const Auth = ({children}) => {
 };
 
 Auth.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
diff --git a/templates/react-example/src/components/Backdrop.jsx b/templates/react-example/src/components/Backdrop.jsx
index 380263ec..697ab2d2 100644
--- a/templates/react-example/src/components/Backdrop.jsx
+++ b/templates/react-example/src/components/Backdrop.jsx
@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Backdrop = ({spinner = false}) => (
-  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
+export const Backdrop = ({ spinner = false }) => (
+  <div className="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl">
     {spinner && (
-      <div
-        className="w-12 h-12 rounded-full animate-spin
-                    border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>
+      <div className="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"></div>
     )}
   </div>
 );
 
 Backdrop.propTypes = {
-  spinner: PropTypes.bool
+  spinner: PropTypes.bool,
 };
diff --git a/templates/react-example/src/components/Background.jsx b/templates/react-example/src/components/Background.jsx
index aa1277dc..51bb75dc 100644
--- a/templates/react-example/src/components/Background.jsx
+++ b/templates/react-example/src/components/Background.jsx
@@ -1,6 +1,6 @@
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <img
         src="./juno_illustration.svg"
         role="presentation"
diff --git a/templates/react-example/src/components/Button.jsx b/templates/react-example/src/components/Button.jsx
index 7b54ff27..b4e1c08f 100644
--- a/templates/react-example/src/components/Button.jsx
+++ b/templates/react-example/src/components/Button.jsx
@@ -1,11 +1,12 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Button = ({children, onClick, disabled = false}) => {
+export const Button = ({ children, onClick, disabled = false }) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
+      className={`dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? "opacity-25" : "hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black"}`}
+    >
       {children}
     </button>
   );
@@ -14,5 +15,5 @@ export const Button = ({children, onClick, disabled = false}) => {
 Button.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
diff --git a/templates/react-example/src/components/Delete.jsx b/templates/react-example/src/components/Delete.jsx
index a77a9c63..de89627f 100644
--- a/templates/react-example/src/components/Delete.jsx
+++ b/templates/react-example/src/components/Delete.jsx
@@ -1,9 +1,9 @@
-import {deleteAsset, deleteDoc} from '@junobuild/core';
-import PropTypes from 'prop-types';
-import {useState} from 'react';
-import {Backdrop} from './Backdrop';
+import { deleteAsset, deleteDoc } from "@junobuild/core";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { Backdrop } from "./Backdrop";
 
-export const Delete = ({item, reload}) => {
+export const Delete = ({ item, reload }) => {
   const [inProgress, setInProgress] = useState(false);
 
   const delItem = async (doc) => {
@@ -11,21 +11,21 @@ export const Delete = ({item, reload}) => {
 
     try {
       const {
-        data: {url}
+        data: { url },
       } = doc;
 
       if (url !== undefined) {
-        const {pathname: fullPath} = new URL(url);
+        const { pathname: fullPath } = new URL(url);
 
         await deleteAsset({
-          collection: 'images',
-          fullPath
+          collection: "images",
+          fullPath,
         });
       }
 
       await deleteDoc({
-        collection: 'notes',
-        doc
+        collection: "notes",
+        doc,
       });
 
       await reload();
@@ -41,8 +41,14 @@ export const Delete = ({item, reload}) => {
       <button
         role="cell"
         className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
-        onClick={async () => await delItem(item)}>
-        <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+        onClick={async () => await delItem(item)}
+      >
+        <svg
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 29 29"
+          fill="currentColor"
+        >
           <g>
             <rect fill="none" className="opacity-25" width="29" height="29" />
             <path
@@ -69,5 +75,5 @@ export const Delete = ({item, reload}) => {
 
 Delete.propTypes = {
   item: PropTypes.object.isRequired,
-  reload: PropTypes.func.isRequired
+  reload: PropTypes.func.isRequired,
 };
diff --git a/templates/react-example/src/components/Footer.jsx b/templates/react-example/src/components/Footer.jsx
index f0aca094..8a013328 100644
--- a/templates/react-example/src/components/Footer.jsx
+++ b/templates/react-example/src/components/Footer.jsx
@@ -1,19 +1,33 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -25,12 +39,14 @@ export const Footer = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -58,12 +74,14 @@ export const Footer = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -81,12 +99,14 @@ export const Footer = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -104,12 +124,14 @@ export const Footer = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/react-example/src/components/Login.jsx b/templates/react-example/src/components/Login.jsx
index e1e9a949..e300ff05 100644
--- a/templates/react-example/src/components/Login.jsx
+++ b/templates/react-example/src/components/Login.jsx
@@ -1,5 +1,5 @@
-import {signIn} from '@junobuild/core';
-import {Button} from './Button';
+import { signIn } from "@junobuild/core";
+import { Button } from "./Button";
 
 export const Login = () => {
   return <Button onClick={signIn}>Sign in</Button>;
diff --git a/templates/react-example/src/components/Logout.jsx b/templates/react-example/src/components/Logout.jsx
index 38fdc8fb..9462198f 100644
--- a/templates/react-example/src/components/Logout.jsx
+++ b/templates/react-example/src/components/Logout.jsx
@@ -1,17 +1,19 @@
-import {signOut} from '@junobuild/core';
+import { signOut } from "@junobuild/core";
 
 export const Logout = () => {
   return (
     <button
       type="button"
       onClick={signOut}
-      className="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400">
+      className="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="16"
         viewBox="0 -960 960 960"
         width="16"
-        fill="currentColor">
+        fill="currentColor"
+      >
         <path d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
       </svg>
       <span>
diff --git a/templates/react-example/src/components/Modal.jsx b/templates/react-example/src/components/Modal.jsx
index 799e4663..e59b26c5 100644
--- a/templates/react-example/src/components/Modal.jsx
+++ b/templates/react-example/src/components/Modal.jsx
@@ -1,26 +1,26 @@
-import {setDoc, uploadFile} from '@junobuild/core';
-import {nanoid} from 'nanoid';
-import {useContext, useEffect, useRef, useState} from 'react';
-import {AuthContext} from './Auth';
-import {Backdrop} from './Backdrop';
-import {Button} from './Button';
+import { setDoc, uploadFile } from "@junobuild/core";
+import { nanoid } from "nanoid";
+import { useContext, useEffect, useRef, useState } from "react";
+import { AuthContext } from "./Auth";
+import { Backdrop } from "./Backdrop";
+import { Button } from "./Button";
 
 export const Modal = () => {
   const [showModal, setShowModal] = useState(false);
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState("");
   const [valid, setValid] = useState(false);
   const [progress, setProgress] = useState(false);
   const [file, setFile] = useState(undefined);
   const uploadElement = useRef(null);
 
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
 
   useEffect(() => {
-    setValid(inputText !== '' && user !== undefined && user !== null);
+    setValid(inputText !== "" && user !== undefined && user !== null);
   }, [showModal, inputText, user]);
 
   const reload = () => {
-    const $event = new Event('reload');
+    const $event = new Event("reload");
     window.dispatchEvent($event);
   };
 
@@ -38,10 +38,10 @@ export const Modal = () => {
       if (file !== undefined) {
         const filename = `${user.key}-${file.name}`;
 
-        const {downloadUrl} = await uploadFile({
-          collection: 'images',
+        const { downloadUrl } = await uploadFile({
+          collection: "images",
           data: file,
-          filename
+          filename,
         });
 
         url = downloadUrl;
@@ -50,14 +50,14 @@ export const Modal = () => {
       const key = nanoid();
 
       await setDoc({
-        collection: 'notes',
+        collection: "notes",
         doc: {
           key,
           data: {
             text: inputText,
-            ...(url !== undefined && {url})
-          }
-        }
+            ...(url !== undefined && { url }),
+          },
+        },
       });
 
       setShowModal(false);
@@ -73,61 +73,63 @@ export const Modal = () => {
   return (
     <>
       <Button onClick={() => setShowModal(true)}>
-        Add an entry{' '}
+        Add an entry{" "}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="20"
           viewBox="0 -960 960 960"
           width="20"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
         </svg>
       </Button>
 
       {showModal ? (
         <>
-          <div className="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+          >
             <div className="relative w-full max-w-xl">
               <textarea
-                className="
-        form-control
-        block
-        w-full
-        px-3
-        py-1.5
-        text-base
-        font-normal
-        m-0
-        resize-none
-        border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)]
-        focus:outline-hidden
-      "
+                className="form-control m-0 block w-full resize-none rounded-sm border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
                 rows={7}
                 placeholder="Your diary entry"
                 onChange={(e) => {
                   setInputText(e.target.value);
                 }}
                 value={inputText}
-                disabled={progress}></textarea>
+                disabled={progress}
+              ></textarea>
 
-              <div role="toolbar" className="flex justify-between items-center">
+              <div role="toolbar" className="flex items-center justify-between">
                 <div>
                   <button
                     aria-label="Attach a file to the entry"
                     onClick={() => uploadElement?.current?.click()}
-                    className="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+                  >
                     <svg
                       width="20"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
-                    <span className="truncate max-w-48">
-                      <small>{file !== undefined ? file.name : 'Attach file'}</small>
+                    <span className="max-w-48 truncate">
+                      <small>
+                        {file !== undefined ? file.name : "Attach file"}
+                      </small>
                     </span>
                   </button>
 
@@ -142,17 +144,19 @@ export const Modal = () => {
 
                 {progress ? (
                   <div
-                    className="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+                    className="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
                     role="status"
-                    aria-label="loading">
+                    aria-label="loading"
+                  >
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex my-4">
+                  <div className="my-4 flex">
                     <button
-                      className="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+                      className="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
                       type="button"
-                      onClick={() => setShowModal(false)}>
+                      onClick={() => setShowModal(false)}
+                    >
                       Close
                     </button>
 
diff --git a/templates/react-example/src/components/Table.jsx b/templates/react-example/src/components/Table.jsx
index 4dca02ea..8865f56e 100644
--- a/templates/react-example/src/components/Table.jsx
+++ b/templates/react-example/src/components/Table.jsx
@@ -1,24 +1,24 @@
-import {listDocs} from '@junobuild/core';
-import {useContext, useEffect, useState} from 'react';
-import {AuthContext} from './Auth';
-import {Delete} from './Delete';
+import { listDocs } from "@junobuild/core";
+import { useContext, useEffect, useState } from "react";
+import { AuthContext } from "./Auth";
+import { Delete } from "./Delete";
 
 export const Table = () => {
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const [items, setItems] = useState([]);
 
   useEffect(() => {
-    window.addEventListener('reload', list);
+    window.addEventListener("reload", list);
 
     return () => {
-      window.removeEventListener('reload', list);
+      window.removeEventListener("reload", list);
     };
   }, []);
 
   const list = async () => {
-    const {items} = await listDocs({
-      collection: 'notes',
-      filter: {}
+    const { items } = await listDocs({
+      collection: "notes",
+      filter: {},
     });
 
     setItems(items);
@@ -34,7 +34,7 @@ export const Table = () => {
   }, [user]);
 
   return (
-    <div className="w-full max-w-2xl mt-8 dark:text-white" role="table">
+    <div className="mt-8 w-full max-w-2xl dark:text-white" role="table">
       <div role="row">
         <span role="columnheader" aria-sort="none">
           Entries
@@ -45,35 +45,50 @@ export const Table = () => {
         {items.map((item, index) => {
           const {
             key,
-            data: {text, url}
+            data: { text, url },
           } = item;
 
           return (
             <div
               key={key}
-              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
-              role="row">
-              <span role="cell" aria-rowindex={index} className="p-1 flex align-center min-w-max">
+              className="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
+              role="row"
+            >
+              <span
+                role="cell"
+                aria-rowindex={index}
+                className="align-center flex min-w-max p-1"
+              >
                 {index + 1} )
               </span>
-              <div role="cell" className="line-clamp-3 overflow-hidden grow">
+              <div role="cell" className="line-clamp-3 grow overflow-hidden">
                 {text}
               </div>
-              <div role="cell" className="flex gap-2 justify-center align-middle">
+              <div
+                role="cell"
+                className="flex justify-center gap-2 align-middle"
+              >
                 {url !== undefined ? (
                   <a
                     aria-label="Open data"
                     rel="noopener noreferrer"
                     href={url}
                     target="_blank"
-                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+                  >
                     <svg
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
diff --git a/templates/react-example/src/index.css b/templates/react-example/src/index.css
index 3796215d..1a7a57ab 100644
--- a/templates/react-example/src/index.css
+++ b/templates/react-example/src/index.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/react-example/src/main.jsx b/templates/react-example/src/main.jsx
index 7497ae86..c9900533 100644
--- a/templates/react-example/src/main.jsx
+++ b/templates/react-example/src/main.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/templates/react-example/vite.config.js b/templates/react-example/vite.config.js
index a2267f9f..b1381d41 100644
--- a/templates/react-example/vite.config.js
+++ b/templates/react-example/vite.config.js
@@ -1,10 +1,10 @@
-import juno from '@junobuild/vite-plugin';
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
-import tailwindcss from '@tailwindcss/vite';
+import juno from "@junobuild/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [react(), nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/react-starter/eslint.config.js b/templates/react-starter/eslint.config.js
index dcbd023a..4ab00721 100644
--- a/templates/react-starter/eslint.config.js
+++ b/templates/react-starter/eslint.config.js
@@ -1,35 +1,38 @@
-import js from '@eslint/js';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import globals from 'globals';
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 
 export default [
-  {ignores: ['dist', 'public/workers']},
+  { ignores: ["dist", "public/workers"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: {jsx: true},
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
     },
-    settings: {react: {version: '18.3'}},
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
-    }
-  }
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
 ];
diff --git a/templates/react-starter/index.html b/templates/react-starter/index.html
index 933a110c..668bd5e0 100644
--- a/templates/react-starter/index.html
+++ b/templates/react-starter/index.html
@@ -12,13 +12,15 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div id="root"></div>
diff --git a/templates/react-starter/juno.dev.config.js b/templates/react-starter/juno.dev.config.js
index a985e4dc..2de27daa 100644
--- a/templates/react-starter/juno.dev.config.js
+++ b/templates/react-starter/juno.dev.config.js
@@ -1,11 +1,11 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [],
-      storage: []
-    }
-  }
+      storage: [],
+    },
+  },
 }));
diff --git a/templates/react-starter/src/App.jsx b/templates/react-starter/src/App.jsx
index 7e742b1d..4c207efe 100644
--- a/templates/react-starter/src/App.jsx
+++ b/templates/react-starter/src/App.jsx
@@ -1,59 +1,64 @@
-import {initSatellite} from '@junobuild/core';
-import {useEffect} from 'react';
-import {Article} from './components/Article';
-import {Background} from './components/Background';
-import {Footer} from './components/Footer';
-import {Hero} from './components/Hero';
+import { initSatellite } from "@junobuild/core";
+import { useEffect } from "react";
+import { Article } from "./components/Article";
+import { Background } from "./components/Background";
+import { Footer } from "./components/Footer";
+import { Hero } from "./components/Hero";
 
 function App() {
   useEffect(() => {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <div className="relative isolate min-h-[100dvh]">
-      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-        <h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
+      <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+        <h1 className="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">
           Welcome to Juno
         </h1>
 
-        <div className="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+        <div className="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
           <Hero
             href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
-            ariaLabel="Discover how to create a Satellite and deploy your project to production">
+            ariaLabel="Discover how to create a Satellite and deploy your project to production"
+          >
             Not yet live? Launch your Satellite
           </Hero>
 
           <Article
             href="https://juno.build/docs/category/build"
             ariaLabel="Open the list of features for building apps on Juno's website"
-            title="Documentation">
+            title="Documentation"
+          >
             Learn how Juno works and explore the official docs.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/local-development"
             ariaLabel="Open Juno's documentation for guidance on setting up local development"
-            title="Local Development">
+            title="Local Development"
+          >
             Set up your environment and start building locally.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/github_actions"
             ariaLabel="Open the guide to setting up GitHub Actions for Juno"
-            title="Continuous Integration">
+            title="Continuous Integration"
+          >
             Automate your deployment with GitHub Actions.
           </Article>
 
           <Article
             href="https://discord.gg/wHZ57Z2RAG"
             ariaLabel="Join Juno's Discord channel for questions or to share the fun"
-            title="Community">
+            title="Community"
+          >
             Come say hi to our amazing Discord community. ❤️
           </Article>
         </div>
diff --git a/templates/react-starter/src/components/Article.jsx b/templates/react-starter/src/components/Article.jsx
index b39a66f6..a571feba 100644
--- a/templates/react-starter/src/components/Article.jsx
+++ b/templates/react-starter/src/components/Article.jsx
@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Article = ({href, ariaLabel, children, title}) => {
+export const Article = ({ href, ariaLabel, children, title }) => {
   return (
     <a
       href={href}
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
-      <h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
+      className="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
+      <h4 className="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white">
         {title}
       </h4>
 
@@ -21,5 +22,5 @@ Article.propTypes = {
   href: PropTypes.string.isRequired,
   ariaLabel: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
diff --git a/templates/react-starter/src/components/Background.jsx b/templates/react-starter/src/components/Background.jsx
index aa1277dc..51bb75dc 100644
--- a/templates/react-starter/src/components/Background.jsx
+++ b/templates/react-starter/src/components/Background.jsx
@@ -1,6 +1,6 @@
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <img
         src="./juno_illustration.svg"
         role="presentation"
diff --git a/templates/react-starter/src/components/Footer.jsx b/templates/react-starter/src/components/Footer.jsx
index f8a09112..7952dc2e 100644
--- a/templates/react-starter/src/components/Footer.jsx
+++ b/templates/react-starter/src/components/Footer.jsx
@@ -1,19 +1,33 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -25,12 +39,14 @@ export const Footer = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -58,12 +74,14 @@ export const Footer = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -81,12 +99,14 @@ export const Footer = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -104,12 +124,14 @@ export const Footer = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/react-starter/src/components/Hero.jsx b/templates/react-starter/src/components/Hero.jsx
index 863f5a9f..6b5c7046 100644
--- a/templates/react-starter/src/components/Hero.jsx
+++ b/templates/react-starter/src/components/Hero.jsx
@@ -1,13 +1,14 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Hero = ({href, ariaLabel, children}) => {
+export const Hero = ({ href, ariaLabel, children }) => {
   return (
     <a
       href={href}
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+      className="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
       {children}
     </a>
   );
@@ -16,5 +17,5 @@ export const Hero = ({href, ariaLabel, children}) => {
 Hero.propTypes = {
   href: PropTypes.string.isRequired,
   ariaLabel: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
diff --git a/templates/react-starter/src/index.css b/templates/react-starter/src/index.css
index 13d13fd8..df5a55b4 100644
--- a/templates/react-starter/src/index.css
+++ b/templates/react-starter/src/index.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/react-starter/src/main.jsx b/templates/react-starter/src/main.jsx
index 7497ae86..c9900533 100644
--- a/templates/react-starter/src/main.jsx
+++ b/templates/react-starter/src/main.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/templates/react-starter/vite.config.js b/templates/react-starter/vite.config.js
index ec876725..515577e8 100644
--- a/templates/react-starter/vite.config.js
+++ b/templates/react-starter/vite.config.js
@@ -1,10 +1,10 @@
-import juno from '@junobuild/vite-plugin';
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
+import juno from "@junobuild/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [react(), nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/react-ts-example/eslint.config.js b/templates/react-ts-example/eslint.config.js
index 19677c0d..c48feaea 100644
--- a/templates/react-ts-example/eslint.config.js
+++ b/templates/react-ts-example/eslint.config.js
@@ -1,38 +1,41 @@
-import js from '@eslint/js';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  {ignores: ['dist', 'public/workers']},
+  { ignores: ["dist", "public/workers"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parser: tseslint.parser,
       parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: {tsx: true},
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        ecmaFeatures: { tsx: true },
+        sourceType: "module",
+      },
     },
-    settings: {react: {version: '18.3'}},
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
-    }
-  }
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
 );
diff --git a/templates/react-ts-example/index.html b/templates/react-ts-example/index.html
index b786e4cf..bae16543 100644
--- a/templates/react-ts-example/index.html
+++ b/templates/react-ts-example/index.html
@@ -12,13 +12,15 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div id="root"></div>
diff --git a/templates/react-ts-example/juno.dev.config.ts b/templates/react-ts-example/juno.dev.config.ts
index 58e1e172..3e33a9f9 100644
--- a/templates/react-ts-example/juno.dev.config.ts
+++ b/templates/react-ts-example/juno.dev.config.ts
@@ -1,26 +1,26 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed' as const,
-          write: 'managed' as const,
-          memory: 'stable' as const,
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed" as const,
+          write: "managed" as const,
+          memory: "stable" as const,
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed' as const,
-          write: 'managed' as const,
-          memory: 'stable' as const,
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed" as const,
+          write: "managed" as const,
+          memory: "stable" as const,
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/react-ts-example/src/App.tsx b/templates/react-ts-example/src/App.tsx
index 47da2709..50fed756 100644
--- a/templates/react-ts-example/src/App.tsx
+++ b/templates/react-ts-example/src/App.tsx
@@ -1,35 +1,36 @@
-import {initSatellite} from '@junobuild/core';
-import {FC, useEffect} from 'react';
-import {Auth} from './components/Auth';
-import {Background} from './components/Background';
-import {Footer} from './components/Footer';
-import {Modal} from './components/Modal';
-import {Table} from './components/Table';
+import { initSatellite } from "@junobuild/core";
+import { FC, useEffect } from "react";
+import { Auth } from "./components/Auth";
+import { Background } from "./components/Background";
+import { Footer } from "./components/Footer";
+import { Modal } from "./components/Modal";
+import { Table } from "./components/Table";
 
 const App: FC = () => {
   useEffect(() => {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <>
       <div className="relative isolate min-h-[100dvh]">
-        <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-          <h1 className="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+        <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+          <h1 className="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
             Example App
           </h1>
-          <p className="dark:text-white py-4 md:max-w-lg">
-            Explore this demo app built with React, Tailwind, and{' '}
+          <p className="py-4 md:max-w-lg dark:text-white">
+            Explore this demo app built with React, Tailwind, and{" "}
             <a
               href="https://juno.build"
               rel="noopener noreferrer"
               target="_blank"
-              className="underline">
+              className="underline"
+            >
               Juno
             </a>
             , showcasing a practical application of these technologies.
diff --git a/templates/react-ts-example/src/components/Auth.tsx b/templates/react-ts-example/src/components/Auth.tsx
index 5507d5cd..261cc688 100644
--- a/templates/react-ts-example/src/components/Auth.tsx
+++ b/templates/react-ts-example/src/components/Auth.tsx
@@ -1,12 +1,18 @@
-import {authSubscribe, User} from '@junobuild/core';
-import {createContext, FC, PropsWithChildren, useEffect, useState} from 'react';
-import {Login} from './Login';
-import {Logout} from './Logout';
+import { authSubscribe, User } from "@junobuild/core";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from "react";
+import { Login } from "./Login";
+import { Logout } from "./Logout";
 
-export const AuthContext = createContext<{user: User | null}>({user: null});
+export const AuthContext = createContext<{ user: User | null }>({ user: null });
 
 export const Auth: FC<PropsWithChildren> = (props) => {
-  const {children} = props;
+  const { children } = props;
   const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
@@ -16,7 +22,7 @@ export const Auth: FC<PropsWithChildren> = (props) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{user}}>
+    <AuthContext.Provider value={{ user }}>
       {user !== null ? (
         <div>
           {children}
diff --git a/templates/react-ts-example/src/components/Backdrop.tsx b/templates/react-ts-example/src/components/Backdrop.tsx
index 87cbc89a..4ea008e6 100644
--- a/templates/react-ts-example/src/components/Backdrop.tsx
+++ b/templates/react-ts-example/src/components/Backdrop.tsx
@@ -1,19 +1,18 @@
-import {FC} from 'react';
+import { FC } from "react";
 
 interface BackdropProps {
   spinner?: boolean;
 }
 
 export const Backdrop: FC<BackdropProps> = (props) => {
-  const {spinner = false} = props;
+  const { spinner = false } = props;
 
   return (
     <div
-      className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}>
+      className={`fixed inset-0 z-40 ${spinner ? "backdrop-blur-xs" : "backdrop-blur-xl"} flex items-center justify-center bg-white/30`}
+    >
       {spinner && (
-        <div
-          className="w-12 h-12 rounded-full animate-spin
-          border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>
+        <div className="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"></div>
       )}
     </div>
   );
diff --git a/templates/react-ts-example/src/components/Background.tsx b/templates/react-ts-example/src/components/Background.tsx
index ed36bda9..a15c633d 100644
--- a/templates/react-ts-example/src/components/Background.tsx
+++ b/templates/react-ts-example/src/components/Background.tsx
@@ -1,8 +1,8 @@
-import {FC} from 'react';
+import { FC } from "react";
 
 export const Background: FC = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="tall:top-2/4 fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3">
       <img
         src="./juno_illustration.svg"
         role="presentation"
diff --git a/templates/react-ts-example/src/components/Button.tsx b/templates/react-ts-example/src/components/Button.tsx
index e9685c88..24744d77 100644
--- a/templates/react-ts-example/src/components/Button.tsx
+++ b/templates/react-ts-example/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import {FC, PropsWithChildren} from 'react';
+import { FC, PropsWithChildren } from "react";
 
 interface ButtonProps extends PropsWithChildren {
   onClick: () => void;
@@ -6,12 +6,13 @@ interface ButtonProps extends PropsWithChildren {
 }
 
 export const Button: FC<ButtonProps> = (props) => {
-  const {children, onClick, disabled = false} = props;
+  const { children, onClick, disabled = false } = props;
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
+      className={`dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? "opacity-25" : "hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black"}`}
+    >
       {children}
     </button>
   );
diff --git a/templates/react-ts-example/src/components/Delete.tsx b/templates/react-ts-example/src/components/Delete.tsx
index 138281ef..54c336af 100644
--- a/templates/react-ts-example/src/components/Delete.tsx
+++ b/templates/react-ts-example/src/components/Delete.tsx
@@ -1,7 +1,7 @@
-import {deleteAsset, deleteDoc} from '@junobuild/core';
-import {FC, useState} from 'react';
-import type {Note} from '../types/note';
-import {Backdrop} from './Backdrop';
+import { deleteAsset, deleteDoc } from "@junobuild/core";
+import { FC, useState } from "react";
+import type { Note } from "../types/note";
+import { Backdrop } from "./Backdrop";
 
 interface DeleteProps {
   item: Note;
@@ -9,7 +9,7 @@ interface DeleteProps {
 }
 
 export const Delete: FC<DeleteProps> = (props) => {
-  const {item, reload} = props;
+  const { item, reload } = props;
 
   const [inProgress, setInProgress] = useState(false);
 
@@ -18,21 +18,21 @@ export const Delete: FC<DeleteProps> = (props) => {
 
     try {
       const {
-        data: {url}
+        data: { url },
       } = doc;
 
       if (url !== undefined) {
-        const {pathname: fullPath} = new URL(url);
+        const { pathname: fullPath } = new URL(url);
 
         await deleteAsset({
-          collection: 'images',
-          fullPath
+          collection: "images",
+          fullPath,
         });
       }
 
       await deleteDoc({
-        collection: 'notes',
-        doc
+        collection: "notes",
+        doc,
       });
 
       await reload();
@@ -48,8 +48,14 @@ export const Delete: FC<DeleteProps> = (props) => {
       <button
         role="cell"
         className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
-        onClick={async () => await delItem(item)}>
-        <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+        onClick={async () => await delItem(item)}
+      >
+        <svg
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 29 29"
+          fill="currentColor"
+        >
           <g>
             <rect fill="none" className="opacity-25" width="29" height="29" />
             <path
diff --git a/templates/react-ts-example/src/components/Footer.tsx b/templates/react-ts-example/src/components/Footer.tsx
index bccc69d2..f45e4f34 100644
--- a/templates/react-ts-example/src/components/Footer.tsx
+++ b/templates/react-ts-example/src/components/Footer.tsx
@@ -1,21 +1,35 @@
-import {FC} from 'react';
+import { FC } from "react";
 
 export const Footer: FC = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -27,12 +41,14 @@ export const Footer: FC = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -60,12 +76,14 @@ export const Footer: FC = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -83,12 +101,14 @@ export const Footer: FC = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -106,12 +126,14 @@ export const Footer: FC = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/react-ts-example/src/components/Login.tsx b/templates/react-ts-example/src/components/Login.tsx
index 97730857..336529b6 100644
--- a/templates/react-ts-example/src/components/Login.tsx
+++ b/templates/react-ts-example/src/components/Login.tsx
@@ -1,6 +1,6 @@
-import {signIn} from '@junobuild/core';
-import {FC} from 'react';
-import {Button} from './Button';
+import { signIn } from "@junobuild/core";
+import { FC } from "react";
+import { Button } from "./Button";
 
 export const Login: FC = () => {
   return <Button onClick={signIn}>Sign in</Button>;
diff --git a/templates/react-ts-example/src/components/Logout.tsx b/templates/react-ts-example/src/components/Logout.tsx
index 22bb1934..59b0b586 100644
--- a/templates/react-ts-example/src/components/Logout.tsx
+++ b/templates/react-ts-example/src/components/Logout.tsx
@@ -1,18 +1,20 @@
-import {signOut} from '@junobuild/core';
-import {FC} from 'react';
+import { signOut } from "@junobuild/core";
+import { FC } from "react";
 
 export const Logout: FC = () => {
   return (
     <button
       type="button"
       onClick={signOut}
-      className="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400">
+      className="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="16"
         viewBox="0 -960 960 960"
         width="16"
-        fill="currentColor">
+        fill="currentColor"
+      >
         <path d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
       </svg>
       <span>
diff --git a/templates/react-ts-example/src/components/Modal.tsx b/templates/react-ts-example/src/components/Modal.tsx
index e61bd782..51e4640c 100644
--- a/templates/react-ts-example/src/components/Modal.tsx
+++ b/templates/react-ts-example/src/components/Modal.tsx
@@ -1,26 +1,26 @@
-import {setDoc, uploadFile, User} from '@junobuild/core';
-import {nanoid} from 'nanoid';
-import {FC, useContext, useEffect, useRef, useState} from 'react';
-import {AuthContext} from './Auth';
-import {Backdrop} from './Backdrop';
-import {Button} from './Button';
+import { setDoc, uploadFile, User } from "@junobuild/core";
+import { nanoid } from "nanoid";
+import { FC, useContext, useEffect, useRef, useState } from "react";
+import { AuthContext } from "./Auth";
+import { Backdrop } from "./Backdrop";
+import { Button } from "./Button";
 
 export const Modal: FC = () => {
   const [showModal, setShowModal] = useState(false);
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState("");
   const [valid, setValid] = useState(false);
   const [progress, setProgress] = useState(false);
   const [file, setFile] = useState<File | undefined>(undefined);
   const uploadElement = useRef<HTMLInputElement>(null);
 
-  const {user} = useContext<{user: User | null}>(AuthContext);
+  const { user } = useContext<{ user: User | null }>(AuthContext);
 
   useEffect(() => {
-    setValid(inputText !== '' && user !== undefined && user !== null);
+    setValid(inputText !== "" && user !== undefined && user !== null);
   }, [showModal, inputText, user]);
 
   const reload = () => {
-    const $event = new Event('reload');
+    const $event = new Event("reload");
     window.dispatchEvent($event);
   };
 
@@ -38,10 +38,10 @@ export const Modal: FC = () => {
       if (file !== undefined) {
         const filename = `${user.key}-${file.name}`;
 
-        const {downloadUrl} = await uploadFile({
-          collection: 'images',
+        const { downloadUrl } = await uploadFile({
+          collection: "images",
           data: file,
-          filename
+          filename,
         });
 
         url = downloadUrl;
@@ -50,14 +50,14 @@ export const Modal: FC = () => {
       const key = nanoid();
 
       await setDoc({
-        collection: 'notes',
+        collection: "notes",
         doc: {
           key,
           data: {
             text: inputText,
-            ...(url !== undefined && {url})
-          }
-        }
+            ...(url !== undefined && { url }),
+          },
+        },
       });
 
       setShowModal(false);
@@ -73,61 +73,63 @@ export const Modal: FC = () => {
   return (
     <>
       <Button onClick={() => setShowModal(true)}>
-        Add an entry{' '}
+        Add an entry{" "}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="20"
           viewBox="0 -960 960 960"
           width="20"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
         </svg>
       </Button>
 
       {showModal ? (
         <>
-          <div className="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+          >
             <div className="relative w-full max-w-xl">
               <textarea
-                className="
-        form-control
-        block
-        w-full
-        px-3
-        py-1.5
-        text-base
-        font-normal
-        m-0
-        resize-none
-        border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)]
-        focus:outline-hidden
-      "
+                className="form-control m-0 block w-full resize-none rounded-sm border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
                 rows={7}
                 placeholder="Your diary entry"
                 onChange={(e) => {
                   setInputText(e.target.value);
                 }}
                 value={inputText}
-                disabled={progress}></textarea>
+                disabled={progress}
+              ></textarea>
 
-              <div role="toolbar" className="flex justify-between items-center">
+              <div role="toolbar" className="flex items-center justify-between">
                 <div>
                   <button
                     aria-label="Attach a file to the entry"
                     onClick={() => uploadElement?.current?.click()}
-                    className="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+                  >
                     <svg
                       width="20"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
-                    <span className="truncate max-w-48">
-                      <small>{file !== undefined ? file.name : 'Attach file'}</small>
+                    <span className="max-w-48 truncate">
+                      <small>
+                        {file !== undefined ? file.name : "Attach file"}
+                      </small>
                     </span>
                   </button>
 
@@ -142,17 +144,19 @@ export const Modal: FC = () => {
 
                 {progress ? (
                   <div
-                    className="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+                    className="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
                     role="status"
-                    aria-label="loading">
+                    aria-label="loading"
+                  >
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex my-4">
+                  <div className="my-4 flex">
                     <button
-                      className="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+                      className="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
                       type="button"
-                      onClick={() => setShowModal(false)}>
+                      onClick={() => setShowModal(false)}
+                    >
                       Close
                     </button>
 
diff --git a/templates/react-ts-example/src/components/Table.tsx b/templates/react-ts-example/src/components/Table.tsx
index 0466bf66..9aaa75fa 100644
--- a/templates/react-ts-example/src/components/Table.tsx
+++ b/templates/react-ts-example/src/components/Table.tsx
@@ -1,25 +1,25 @@
-import {Doc, listDocs} from '@junobuild/core';
-import {FC, useContext, useEffect, useState} from 'react';
-import {NoteData} from '../types/note';
-import {AuthContext} from './Auth';
-import {Delete} from './Delete';
+import { Doc, listDocs } from "@junobuild/core";
+import { FC, useContext, useEffect, useState } from "react";
+import { NoteData } from "../types/note";
+import { AuthContext } from "./Auth";
+import { Delete } from "./Delete";
 
 export const Table: FC = () => {
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const [items, setItems] = useState<Doc<NoteData>[]>([]);
 
   useEffect(() => {
-    window.addEventListener('reload', list);
+    window.addEventListener("reload", list);
 
     return () => {
-      window.removeEventListener('reload', list);
+      window.removeEventListener("reload", list);
     };
   }, []);
 
   const list = async () => {
-    const {items} = await listDocs<NoteData>({
-      collection: 'notes',
-      filter: {}
+    const { items } = await listDocs<NoteData>({
+      collection: "notes",
+      filter: {},
     });
 
     setItems(items);
@@ -35,7 +35,7 @@ export const Table: FC = () => {
   }, [user]);
 
   return (
-    <div className="w-full max-w-2xl mt-8 dark:text-white" role="table">
+    <div className="mt-8 w-full max-w-2xl dark:text-white" role="table">
       <div role="row">
         <span role="columnheader" aria-sort="none">
           Entries
@@ -46,35 +46,50 @@ export const Table: FC = () => {
         {items.map((item, index) => {
           const {
             key,
-            data: {text, url}
+            data: { text, url },
           } = item;
 
           return (
             <div
               key={key}
-              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
-              role="row">
-              <span role="cell" aria-rowindex={index} className="p-1 flex align-center min-w-max">
+              className="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
+              role="row"
+            >
+              <span
+                role="cell"
+                aria-rowindex={index}
+                className="align-center flex min-w-max p-1"
+              >
                 {index + 1} )
               </span>
-              <div role="cell" className="line-clamp-3 overflow-hidden grow">
+              <div role="cell" className="line-clamp-3 grow overflow-hidden">
                 {text}
               </div>
-              <div role="cell" className="flex gap-2 justify-center align-middle">
+              <div
+                role="cell"
+                className="flex justify-center gap-2 align-middle"
+              >
                 {url !== undefined ? (
                   <a
                     aria-label="Open data"
                     rel="noopener noreferrer"
                     href={url}
                     target="_blank"
-                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+                  >
                     <svg
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
diff --git a/templates/react-ts-example/src/index.css b/templates/react-ts-example/src/index.css
index 3796215d..1a7a57ab 100644
--- a/templates/react-ts-example/src/index.css
+++ b/templates/react-ts-example/src/index.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/react-ts-example/src/main.tsx b/templates/react-ts-example/src/main.tsx
index 4453a2dd..c2a145c6 100644
--- a/templates/react-ts-example/src/main.tsx
+++ b/templates/react-ts-example/src/main.tsx
@@ -1,10 +1,10 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import App from './App';
-import './index.css';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/templates/react-ts-example/src/types/note.ts b/templates/react-ts-example/src/types/note.ts
index bb58281e..409b53e0 100644
--- a/templates/react-ts-example/src/types/note.ts
+++ b/templates/react-ts-example/src/types/note.ts
@@ -1,4 +1,4 @@
-import type {Doc} from '@junobuild/core';
+import type { Doc } from "@junobuild/core";
 
 export interface NoteData {
   text: string;
diff --git a/templates/react-ts-example/tsconfig.json b/templates/react-ts-example/tsconfig.json
index 2340846f..1ffef600 100644
--- a/templates/react-ts-example/tsconfig.json
+++ b/templates/react-ts-example/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "files": [],
-  "references": [{"path": "./tsconfig.app.json"}, {"path": "./tsconfig.node.json"}]
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/templates/react-ts-example/vite.config.ts b/templates/react-ts-example/vite.config.ts
index a2267f9f..b1381d41 100644
--- a/templates/react-ts-example/vite.config.ts
+++ b/templates/react-ts-example/vite.config.ts
@@ -1,10 +1,10 @@
-import juno from '@junobuild/vite-plugin';
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
-import tailwindcss from '@tailwindcss/vite';
+import juno from "@junobuild/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [react(), nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/react-ts-starter/eslint.config.js b/templates/react-ts-starter/eslint.config.js
index aeca8ba5..c1507b63 100644
--- a/templates/react-ts-starter/eslint.config.js
+++ b/templates/react-ts-starter/eslint.config.js
@@ -1,25 +1,28 @@
-import js from '@eslint/js';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  {ignores: ['dist', 'public/workers']},
+  { ignores: ["dist", "public/workers"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser
+      globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
-    }
-  }
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
 );
diff --git a/templates/react-ts-starter/index.html b/templates/react-ts-starter/index.html
index 68f1f3d5..8439a490 100644
--- a/templates/react-ts-starter/index.html
+++ b/templates/react-ts-starter/index.html
@@ -12,13 +12,15 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div id="root"></div>
diff --git a/templates/react-ts-starter/juno.dev.config.ts b/templates/react-ts-starter/juno.dev.config.ts
index 55e369d5..49078a02 100644
--- a/templates/react-ts-starter/juno.dev.config.ts
+++ b/templates/react-ts-starter/juno.dev.config.ts
@@ -1,10 +1,10 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 export default defineDevConfig(() => ({
   satellite: {
     collections: {
       datastore: [],
-      storage: []
-    }
-  }
+      storage: [],
+    },
+  },
 }));
diff --git a/templates/react-ts-starter/src/App.tsx b/templates/react-ts-starter/src/App.tsx
index 7e742b1d..4c207efe 100644
--- a/templates/react-ts-starter/src/App.tsx
+++ b/templates/react-ts-starter/src/App.tsx
@@ -1,59 +1,64 @@
-import {initSatellite} from '@junobuild/core';
-import {useEffect} from 'react';
-import {Article} from './components/Article';
-import {Background} from './components/Background';
-import {Footer} from './components/Footer';
-import {Hero} from './components/Hero';
+import { initSatellite } from "@junobuild/core";
+import { useEffect } from "react";
+import { Article } from "./components/Article";
+import { Background } from "./components/Background";
+import { Footer } from "./components/Footer";
+import { Hero } from "./components/Hero";
 
 function App() {
   useEffect(() => {
     (async () =>
       await initSatellite({
         workers: {
-          auth: true
-        }
+          auth: true,
+        },
       }))();
   }, []);
 
   return (
     <div className="relative isolate min-h-[100dvh]">
-      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-        <h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
+      <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+        <h1 className="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">
           Welcome to Juno
         </h1>
 
-        <div className="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+        <div className="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
           <Hero
             href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
-            ariaLabel="Discover how to create a Satellite and deploy your project to production">
+            ariaLabel="Discover how to create a Satellite and deploy your project to production"
+          >
             Not yet live? Launch your Satellite
           </Hero>
 
           <Article
             href="https://juno.build/docs/category/build"
             ariaLabel="Open the list of features for building apps on Juno's website"
-            title="Documentation">
+            title="Documentation"
+          >
             Learn how Juno works and explore the official docs.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/local-development"
             ariaLabel="Open Juno's documentation for guidance on setting up local development"
-            title="Local Development">
+            title="Local Development"
+          >
             Set up your environment and start building locally.
           </Article>
 
           <Article
             href="https://juno.build/docs/miscellaneous/github_actions"
             ariaLabel="Open the guide to setting up GitHub Actions for Juno"
-            title="Continuous Integration">
+            title="Continuous Integration"
+          >
             Automate your deployment with GitHub Actions.
           </Article>
 
           <Article
             href="https://discord.gg/wHZ57Z2RAG"
             ariaLabel="Join Juno's Discord channel for questions or to share the fun"
-            title="Community">
+            title="Community"
+          >
             Come say hi to our amazing Discord community. ❤️
           </Article>
         </div>
diff --git a/templates/react-ts-starter/src/components/Article.tsx b/templates/react-ts-starter/src/components/Article.tsx
index fc9c2038..67b72443 100644
--- a/templates/react-ts-starter/src/components/Article.tsx
+++ b/templates/react-ts-starter/src/components/Article.tsx
@@ -1,4 +1,4 @@
-import {FC, PropsWithChildren} from 'react';
+import { FC, PropsWithChildren } from "react";
 
 interface ArticleProps extends PropsWithChildren {
   href: string;
@@ -7,15 +7,16 @@ interface ArticleProps extends PropsWithChildren {
 }
 
 export const Article: FC<ArticleProps> = (props) => {
-  const {href, ariaLabel, children, title} = props;
+  const { href, ariaLabel, children, title } = props;
   return (
     <a
       href={href}
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
-      <h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
+      className="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
+      <h4 className="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white">
         {title}
       </h4>
 
diff --git a/templates/react-ts-starter/src/components/Background.tsx b/templates/react-ts-starter/src/components/Background.tsx
index 4232587c..a40a833a 100644
--- a/templates/react-ts-starter/src/components/Background.tsx
+++ b/templates/react-ts-starter/src/components/Background.tsx
@@ -1,8 +1,8 @@
-import {FC} from 'react';
+import { FC } from "react";
 
 export const Background: FC = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <img
         src="./juno_illustration.svg"
         role="presentation"
diff --git a/templates/react-ts-starter/src/components/Footer.tsx b/templates/react-ts-starter/src/components/Footer.tsx
index 50d81afe..3646aeb1 100644
--- a/templates/react-ts-starter/src/components/Footer.tsx
+++ b/templates/react-ts-starter/src/components/Footer.tsx
@@ -1,21 +1,35 @@
-import {FC} from 'react';
+import { FC } from "react";
 
 export const Footer: FC = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -27,12 +41,14 @@ export const Footer: FC = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -60,12 +76,14 @@ export const Footer: FC = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -83,12 +101,14 @@ export const Footer: FC = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -106,12 +126,14 @@ export const Footer: FC = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/react-ts-starter/src/components/Hero.tsx b/templates/react-ts-starter/src/components/Hero.tsx
index 9f33bf2e..8bee23de 100644
--- a/templates/react-ts-starter/src/components/Hero.tsx
+++ b/templates/react-ts-starter/src/components/Hero.tsx
@@ -1,4 +1,4 @@
-import {FC, PropsWithChildren} from 'react';
+import { FC, PropsWithChildren } from "react";
 
 interface HeroProps extends PropsWithChildren {
   href: string;
@@ -6,14 +6,15 @@ interface HeroProps extends PropsWithChildren {
 }
 
 export const Hero: FC<HeroProps> = (props) => {
-  const {href, ariaLabel, children} = props;
+  const { href, ariaLabel, children } = props;
   return (
     <a
       href={href}
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+      className="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
+    >
       {children}
     </a>
   );
diff --git a/templates/react-ts-starter/src/index.css b/templates/react-ts-starter/src/index.css
index 13d13fd8..df5a55b4 100644
--- a/templates/react-ts-starter/src/index.css
+++ b/templates/react-ts-starter/src/index.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/react-ts-starter/src/main.tsx b/templates/react-ts-starter/src/main.tsx
index acbee010..ef474bf6 100644
--- a/templates/react-ts-starter/src/main.tsx
+++ b/templates/react-ts-starter/src/main.tsx
@@ -1,10 +1,10 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/templates/react-ts-starter/tsconfig.json b/templates/react-ts-starter/tsconfig.json
index 2340846f..1ffef600 100644
--- a/templates/react-ts-starter/tsconfig.json
+++ b/templates/react-ts-starter/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "files": [],
-  "references": [{"path": "./tsconfig.app.json"}, {"path": "./tsconfig.node.json"}]
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/templates/react-ts-starter/vite.config.ts b/templates/react-ts-starter/vite.config.ts
index a2267f9f..b1381d41 100644
--- a/templates/react-ts-starter/vite.config.ts
+++ b/templates/react-ts-starter/vite.config.ts
@@ -1,10 +1,10 @@
-import juno from '@junobuild/vite-plugin';
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
-import tailwindcss from '@tailwindcss/vite';
+import juno from "@junobuild/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [react(), nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/react-workshop/README.md b/templates/react-workshop/README.md
index 565bdaa7..ce98a9f5 100644
--- a/templates/react-workshop/README.md
+++ b/templates/react-workshop/README.md
@@ -40,15 +40,15 @@ First, configure the satellite ID in the `juno.config.mjs` file.
 > TODO: find and replace STEP_1_CONFIGURATION
 
 ```javascript
-import {defineConfig} from '@junobuild/config';
+import { defineConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoConfig} */
 export default defineConfig({
   satellite: {
     // TODO: STEP_1_CONFIGURATION
-    id: 'replace-satellite-id',
-    source: 'dist'
-  }
+    id: "replace-satellite-id",
+    source: "dist",
+  },
 });
 ```
 
@@ -69,7 +69,7 @@ To securely identify users anonymously, they will need to sign in.
 > TODO: find and replace STEP_3_AUTH_SIGN_IN
 
 ```javascript
-import {signIn} from '@junobuild/core';
+import { signIn } from "@junobuild/core";
 
 await signIn();
 ```
@@ -79,7 +79,7 @@ To get to know the user’s state, Juno provides an observable function called `
 > TODO: find and replace STEP_4_AUTH_SUBSCRIBE
 
 ```typescript
-import {authSubscribe, type User} from '@junobuild/core';
+import { authSubscribe, type User } from "@junobuild/core";
 
 const sub = authSubscribe((user: User | null) => console.log(user));
 ```
@@ -89,7 +89,7 @@ Users should obviously also be able to sign out.
 > TODO: find and replace STEP_5_AUTH_SIGN_OUT
 
 ```javascript
-import {signOut} from '@junobuild/core';
+import { signOut } from "@junobuild/core";
 
 await signOut();
 ```
@@ -106,13 +106,13 @@ Once our collection is created, we can persist data on the blockchain using the
 
 ```javascript
 await setDoc({
-  collection: 'notes',
+  collection: "notes",
   doc: {
     key,
     data: {
-      text: inputText
-    }
-  }
+      text: inputText,
+    },
+  },
 });
 ```
 
@@ -125,8 +125,8 @@ To fetch the list of documents saved on the blockchain, we can use the `listDocs
 > TODO: find and replace STEP_7_LIST_DOCS
 
 ```javascript
-const {items} = await listDocs({
-  collection: 'notes'
+const { items } = await listDocs({
+  collection: "notes",
 });
 ```
 
@@ -141,10 +141,10 @@ Once our collection is set, we can upload a file on chain using the `uploadFile`
 > TODO: find and replace STEP_8_UPLOAD_FILE
 
 ```javascript
-const {downloadUrl} = await uploadFile({
-  collection: 'images',
+const { downloadUrl } = await uploadFile({
+  collection: "images",
   data: file,
-  filename
+  filename,
 });
 ```
 
@@ -154,14 +154,14 @@ In this particular workshop, we also want to save a reference within the documen
 
 ```javascript
 await setDoc({
-  collection: 'notes',
+  collection: "notes",
   doc: {
     key,
     data: {
       text: inputText,
-      ...(url !== undefined && {url}) // <--- We add this reference
-    }
-  }
+      ...(url !== undefined && { url }), // <--- We add this reference
+    },
+  },
 });
 ```
 
diff --git a/templates/react-workshop/eslint.config.js b/templates/react-workshop/eslint.config.js
index dcbd023a..4ab00721 100644
--- a/templates/react-workshop/eslint.config.js
+++ b/templates/react-workshop/eslint.config.js
@@ -1,35 +1,38 @@
-import js from '@eslint/js';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import globals from 'globals';
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 
 export default [
-  {ignores: ['dist', 'public/workers']},
+  { ignores: ["dist", "public/workers"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: {jsx: true},
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
     },
-    settings: {react: {version: '18.3'}},
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
-    }
-  }
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
 ];
diff --git a/templates/react-workshop/index.html b/templates/react-workshop/index.html
index f79c98fb..397806fa 100644
--- a/templates/react-workshop/index.html
+++ b/templates/react-workshop/index.html
@@ -12,13 +12,15 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div id="root"></div>
diff --git a/templates/react-workshop/juno.config.mjs b/templates/react-workshop/juno.config.mjs
index 58f8e87f..7aa71e5a 100644
--- a/templates/react-workshop/juno.config.mjs
+++ b/templates/react-workshop/juno.config.mjs
@@ -1,10 +1,10 @@
-import {defineConfig} from '@junobuild/config';
+import { defineConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoConfig} */
 export default defineConfig({
   satellite: {
     // TODO: STEP_1_CONFIGURATION
-    id: 'replace-satellite-id',
-    source: 'dist'
-  }
+    id: "replace-satellite-id",
+    source: "dist",
+  },
 });
diff --git a/templates/react-workshop/juno.dev.config.js b/templates/react-workshop/juno.dev.config.js
index 822145f9..914cd131 100644
--- a/templates/react-workshop/juno.dev.config.js
+++ b/templates/react-workshop/juno.dev.config.js
@@ -1,4 +1,4 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
@@ -6,22 +6,22 @@ export default defineDevConfig(() => ({
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/react-workshop/src/App.jsx b/templates/react-workshop/src/App.jsx
index fb5bb09c..e9acdf3d 100644
--- a/templates/react-workshop/src/App.jsx
+++ b/templates/react-workshop/src/App.jsx
@@ -1,8 +1,8 @@
-import {Auth} from './components/Auth';
-import {Background} from './components/Background';
-import {Footer} from './components/Footer';
-import {Modal} from './components/Modal';
-import {Table} from './components/Table';
+import { Auth } from "./components/Auth";
+import { Background } from "./components/Background";
+import { Footer } from "./components/Footer";
+import { Modal } from "./components/Modal";
+import { Table } from "./components/Table";
 
 function App() {
   // TODO: STEP_2_INITIALIZATION
@@ -13,17 +13,18 @@ function App() {
   return (
     <>
       <div className="relative isolate min-h-[100dvh]">
-        <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-          <h1 className="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+        <main className="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+          <h1 className="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
             Example App
           </h1>
-          <p className="dark:text-white py-4 md:max-w-lg">
-            Explore this demo app built with React, Tailwind, and{' '}
+          <p className="py-4 md:max-w-lg dark:text-white">
+            Explore this demo app built with React, Tailwind, and{" "}
             <a
               href="https://juno.build"
               rel="noopener noreferrer"
               target="_blank"
-              className="underline">
+              className="underline"
+            >
               Juno
             </a>
             , showcasing a practical application of these technologies.
diff --git a/templates/react-workshop/src/components/Auth.jsx b/templates/react-workshop/src/components/Auth.jsx
index 072ac5d1..6ad5a2c1 100644
--- a/templates/react-workshop/src/components/Auth.jsx
+++ b/templates/react-workshop/src/components/Auth.jsx
@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
-import {createContext, useEffect, useState} from 'react';
-import {Login} from './Login';
-import {Logout} from './Logout';
+import PropTypes from "prop-types";
+import { createContext, useEffect, useState } from "react";
+import { Login } from "./Login";
+import { Logout } from "./Logout";
 
 export const AuthContext = createContext();
 
-export const Auth = ({children}) => {
+export const Auth = ({ children }) => {
   const [user, setUser] = useState(undefined);
 
   useEffect(() => {
@@ -17,7 +17,7 @@ export const Auth = ({children}) => {
   }, []);
 
   return (
-    <AuthContext.Provider value={{user}}>
+    <AuthContext.Provider value={{ user }}>
       {user !== undefined && user !== null ? (
         <div>
           {children}
@@ -32,5 +32,5 @@ export const Auth = ({children}) => {
 };
 
 Auth.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
diff --git a/templates/react-workshop/src/components/Backdrop.jsx b/templates/react-workshop/src/components/Backdrop.jsx
index 380263ec..697ab2d2 100644
--- a/templates/react-workshop/src/components/Backdrop.jsx
+++ b/templates/react-workshop/src/components/Backdrop.jsx
@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Backdrop = ({spinner = false}) => (
-  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
+export const Backdrop = ({ spinner = false }) => (
+  <div className="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl">
     {spinner && (
-      <div
-        className="w-12 h-12 rounded-full animate-spin
-                    border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>
+      <div className="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"></div>
     )}
   </div>
 );
 
 Backdrop.propTypes = {
-  spinner: PropTypes.bool
+  spinner: PropTypes.bool,
 };
diff --git a/templates/react-workshop/src/components/Background.jsx b/templates/react-workshop/src/components/Background.jsx
index aa1277dc..51bb75dc 100644
--- a/templates/react-workshop/src/components/Background.jsx
+++ b/templates/react-workshop/src/components/Background.jsx
@@ -1,6 +1,6 @@
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4">
       <img
         src="./juno_illustration.svg"
         role="presentation"
diff --git a/templates/react-workshop/src/components/Button.jsx b/templates/react-workshop/src/components/Button.jsx
index 7b54ff27..b4e1c08f 100644
--- a/templates/react-workshop/src/components/Button.jsx
+++ b/templates/react-workshop/src/components/Button.jsx
@@ -1,11 +1,12 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-export const Button = ({children, onClick, disabled = false}) => {
+export const Button = ({ children, onClick, disabled = false }) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
+      className={`dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? "opacity-25" : "hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black"}`}
+    >
       {children}
     </button>
   );
@@ -14,5 +15,5 @@ export const Button = ({children, onClick, disabled = false}) => {
 Button.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
diff --git a/templates/react-workshop/src/components/Delete.jsx b/templates/react-workshop/src/components/Delete.jsx
index a77a9c63..de89627f 100644
--- a/templates/react-workshop/src/components/Delete.jsx
+++ b/templates/react-workshop/src/components/Delete.jsx
@@ -1,9 +1,9 @@
-import {deleteAsset, deleteDoc} from '@junobuild/core';
-import PropTypes from 'prop-types';
-import {useState} from 'react';
-import {Backdrop} from './Backdrop';
+import { deleteAsset, deleteDoc } from "@junobuild/core";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { Backdrop } from "./Backdrop";
 
-export const Delete = ({item, reload}) => {
+export const Delete = ({ item, reload }) => {
   const [inProgress, setInProgress] = useState(false);
 
   const delItem = async (doc) => {
@@ -11,21 +11,21 @@ export const Delete = ({item, reload}) => {
 
     try {
       const {
-        data: {url}
+        data: { url },
       } = doc;
 
       if (url !== undefined) {
-        const {pathname: fullPath} = new URL(url);
+        const { pathname: fullPath } = new URL(url);
 
         await deleteAsset({
-          collection: 'images',
-          fullPath
+          collection: "images",
+          fullPath,
         });
       }
 
       await deleteDoc({
-        collection: 'notes',
-        doc
+        collection: "notes",
+        doc,
       });
 
       await reload();
@@ -41,8 +41,14 @@ export const Delete = ({item, reload}) => {
       <button
         role="cell"
         className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
-        onClick={async () => await delItem(item)}>
-        <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+        onClick={async () => await delItem(item)}
+      >
+        <svg
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 29 29"
+          fill="currentColor"
+        >
           <g>
             <rect fill="none" className="opacity-25" width="29" height="29" />
             <path
@@ -69,5 +75,5 @@ export const Delete = ({item, reload}) => {
 
 Delete.propTypes = {
   item: PropTypes.object.isRequired,
-  reload: PropTypes.func.isRequired
+  reload: PropTypes.func.isRequired,
 };
diff --git a/templates/react-workshop/src/components/Footer.jsx b/templates/react-workshop/src/components/Footer.jsx
index f0aca094..8a013328 100644
--- a/templates/react-workshop/src/components/Footer.jsx
+++ b/templates/react-workshop/src/components/Footer.jsx
@@ -1,19 +1,33 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-      <span className="flex gap-2 items-baseline">
+    <footer className="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white">
+      <span className="flex items-baseline gap-2">
         <svg
           id="Layer_2"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 220.39"
           width="80"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <g>
             <path d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
             <path d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-            <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+            <rect
+              x="725.65"
+              y="0"
+              width="220.39"
+              height="220.39"
+              rx="110.19"
+              ry="110.19"
+            ></rect>
             <path d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-            <circle className="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            <circle
+              className="cls-1"
+              cx="931.86"
+              cy="68.14"
+              r="68.14"
+              fill="#7888ff"
+            ></circle>
           </g>
         </svg>
         <small className="hidden md:block">Blockchainless Platform</small>
@@ -25,12 +39,14 @@ export const Footer = () => {
           aria-label="Go to Juno website and documentation"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
               <path d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
@@ -58,12 +74,14 @@ export const Footer = () => {
           aria-label="Juno is open source on GitHub"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
               <g>
                 <g>
@@ -81,12 +99,14 @@ export const Footer = () => {
           aria-label="Join our channel on Discord to chat or ask questions"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <g>
                 <g>
@@ -104,12 +124,14 @@ export const Footer = () => {
           aria-label="Follow Juno on X/Twitter"
           className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           <svg
             width="32"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 49 49"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
               <polygon points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
diff --git a/templates/react-workshop/src/components/Login.jsx b/templates/react-workshop/src/components/Login.jsx
index d1a3ae59..1b8e6809 100644
--- a/templates/react-workshop/src/components/Login.jsx
+++ b/templates/react-workshop/src/components/Login.jsx
@@ -1,4 +1,4 @@
-import {Button} from './Button';
+import { Button } from "./Button";
 
 export const Login = () => {
   //TODO: STEP_3_AUTH_SIGN_IN
diff --git a/templates/react-workshop/src/components/Logout.jsx b/templates/react-workshop/src/components/Logout.jsx
index a5b38a4f..c2ebf082 100644
--- a/templates/react-workshop/src/components/Logout.jsx
+++ b/templates/react-workshop/src/components/Logout.jsx
@@ -5,13 +5,15 @@ export const Logout = () => {
   return (
     <button
       type="button"
-      className="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400">
+      className="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="16"
         viewBox="0 -960 960 960"
         width="16"
-        fill="currentColor">
+        fill="currentColor"
+      >
         <path d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
       </svg>
       <span>
diff --git a/templates/react-workshop/src/components/Modal.jsx b/templates/react-workshop/src/components/Modal.jsx
index ebd7d73a..8d3c4b9d 100644
--- a/templates/react-workshop/src/components/Modal.jsx
+++ b/templates/react-workshop/src/components/Modal.jsx
@@ -1,25 +1,25 @@
-import {nanoid} from 'nanoid';
-import {useContext, useEffect, useRef, useState} from 'react';
-import {AuthContext} from './Auth';
-import {Backdrop} from './Backdrop';
-import {Button} from './Button';
+import { nanoid } from "nanoid";
+import { useContext, useEffect, useRef, useState } from "react";
+import { AuthContext } from "./Auth";
+import { Backdrop } from "./Backdrop";
+import { Button } from "./Button";
 
 export const Modal = () => {
   const [showModal, setShowModal] = useState(false);
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState("");
   const [valid, setValid] = useState(false);
   const [progress, setProgress] = useState(false);
   const [file, setFile] = useState(undefined);
   const uploadElement = useRef(null);
 
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
 
   useEffect(() => {
-    setValid(inputText !== '' && user !== undefined && user !== null);
+    setValid(inputText !== "" && user !== undefined && user !== null);
   }, [showModal, inputText, user]);
 
   const reload = () => {
-    const $event = new Event('reload');
+    const $event = new Event("reload");
     window.dispatchEvent($event);
   };
 
@@ -77,61 +77,63 @@ export const Modal = () => {
   return (
     <>
       <Button onClick={() => setShowModal(true)}>
-        Add an entry{' '}
+        Add an entry{" "}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="20"
           viewBox="0 -960 960 960"
           width="20"
-          fill="currentColor">
+          fill="currentColor"
+        >
           <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
         </svg>
       </Button>
 
       {showModal ? (
         <>
-          <div className="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+          >
             <div className="relative w-full max-w-xl">
               <textarea
-                className="
-        form-control
-        block
-        w-full
-        px-3
-        py-1.5
-        text-base
-        font-normal
-        m-0
-        resize-none
-        border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)]
-        focus:outline-hidden
-      "
+                className="form-control m-0 block w-full resize-none rounded-sm border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
                 rows={7}
                 placeholder="Your diary entry"
                 onChange={(e) => {
                   setInputText(e.target.value);
                 }}
                 value={inputText}
-                disabled={progress}></textarea>
+                disabled={progress}
+              ></textarea>
 
-              <div role="toolbar" className="flex justify-between items-center">
+              <div role="toolbar" className="flex items-center justify-between">
                 <div>
                   <button
                     aria-label="Attach a file to the entry"
                     onClick={() => uploadElement?.current?.click()}
-                    className="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+                  >
                     <svg
                       width="20"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
-                    <span className="truncate max-w-48">
-                      <small>{file !== undefined ? file.name : 'Attach file'}</small>
+                    <span className="max-w-48 truncate">
+                      <small>
+                        {file !== undefined ? file.name : "Attach file"}
+                      </small>
                     </span>
                   </button>
 
@@ -146,17 +148,19 @@ export const Modal = () => {
 
                 {progress ? (
                   <div
-                    className="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+                    className="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
                     role="status"
-                    aria-label="loading">
+                    aria-label="loading"
+                  >
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex my-4">
+                  <div className="my-4 flex">
                     <button
-                      className="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+                      className="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
                       type="button"
-                      onClick={() => setShowModal(false)}>
+                      onClick={() => setShowModal(false)}
+                    >
                       Close
                     </button>
 
diff --git a/templates/react-workshop/src/components/Table.jsx b/templates/react-workshop/src/components/Table.jsx
index 4a55da52..7eb652b2 100644
--- a/templates/react-workshop/src/components/Table.jsx
+++ b/templates/react-workshop/src/components/Table.jsx
@@ -1,16 +1,16 @@
-import {useContext, useEffect, useState} from 'react';
-import {AuthContext} from './Auth';
-import {Delete} from './Delete';
+import { useContext, useEffect, useState } from "react";
+import { AuthContext } from "./Auth";
+import { Delete } from "./Delete";
 
 export const Table = () => {
-  const {user} = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const [items, setItems] = useState([]);
 
   useEffect(() => {
-    window.addEventListener('reload', list);
+    window.addEventListener("reload", list);
 
     return () => {
-      window.removeEventListener('reload', list);
+      window.removeEventListener("reload", list);
     };
   }, []);
 
@@ -34,7 +34,7 @@ export const Table = () => {
   }, [user]);
 
   return (
-    <div className="w-full max-w-2xl mt-8 dark:text-white" role="table">
+    <div className="mt-8 w-full max-w-2xl dark:text-white" role="table">
       <div role="row">
         <span role="columnheader" aria-sort="none">
           Entries
@@ -45,35 +45,50 @@ export const Table = () => {
         {items.map((item, index) => {
           const {
             key,
-            data: {text, url}
+            data: { text, url },
           } = item;
 
           return (
             <div
               key={key}
-              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
-              role="row">
-              <span role="cell" aria-rowindex={index} className="p-1 flex align-center min-w-max">
+              className="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
+              role="row"
+            >
+              <span
+                role="cell"
+                aria-rowindex={index}
+                className="align-center flex min-w-max p-1"
+              >
                 {index + 1} )
               </span>
-              <div role="cell" className="line-clamp-3 overflow-hidden grow">
+              <div role="cell" className="line-clamp-3 grow overflow-hidden">
                 {text}
               </div>
-              <div role="cell" className="flex gap-2 justify-center align-middle">
+              <div
+                role="cell"
+                className="flex justify-center gap-2 align-middle"
+              >
                 {url !== undefined ? (
                   <a
                     aria-label="Open data"
                     rel="noopener noreferrer"
                     href={url}
                     target="_blank"
-                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+                  >
                     <svg
                       width="16"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 29 29"
-                      fill="currentColor">
+                      fill="currentColor"
+                    >
                       <g>
-                        <rect fill="none" className="opacity-25" width="29" height="29" />
+                        <rect
+                          fill="none"
+                          className="opacity-25"
+                          width="29"
+                          height="29"
+                        />
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
diff --git a/templates/react-workshop/src/index.css b/templates/react-workshop/src/index.css
index 3796215d..1a7a57ab 100644
--- a/templates/react-workshop/src/index.css
+++ b/templates/react-workshop/src/index.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/react-workshop/src/main.jsx b/templates/react-workshop/src/main.jsx
index 7497ae86..c9900533 100644
--- a/templates/react-workshop/src/main.jsx
+++ b/templates/react-workshop/src/main.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/templates/react-workshop/vite.config.js b/templates/react-workshop/vite.config.js
index a2267f9f..b1381d41 100644
--- a/templates/react-workshop/vite.config.js
+++ b/templates/react-workshop/vite.config.js
@@ -1,10 +1,10 @@
-import juno from '@junobuild/vite-plugin';
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
-import tailwindcss from '@tailwindcss/vite';
+import juno from "@junobuild/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [react(), nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/sveltekit-example/src/lib/components/Backdrop.svelte b/templates/sveltekit-example/src/lib/components/Backdrop.svelte
index d0b753f6..f0369990 100644
--- a/templates/sveltekit-example/src/lib/components/Backdrop.svelte
+++ b/templates/sveltekit-example/src/lib/components/Backdrop.svelte
@@ -7,11 +7,11 @@
 </script>
 
 <div
-	class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"
+	class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
 >
 	{#if spinner}
 		<div
-			class="w-12 h-12 rounded-full animate-spin border-[3px] border-solid border-lavender-blue-600 border-t-transparent"
+			class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
 		></div>
 	{/if}
 </div>
diff --git a/templates/sveltekit-example/src/lib/components/Background.svelte b/templates/sveltekit-example/src/lib/components/Background.svelte
index 41b1f6b0..7b14ead2 100644
--- a/templates/sveltekit-example/src/lib/components/Background.svelte
+++ b/templates/sveltekit-example/src/lib/components/Background.svelte
@@ -1,5 +1,5 @@
 <div
-	class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+	class="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4"
 >
 	<img
 		src="/juno_illustration.svg"
diff --git a/templates/sveltekit-example/src/lib/components/Button.svelte b/templates/sveltekit-example/src/lib/components/Button.svelte
index 2533488f..025d7d9c 100644
--- a/templates/sveltekit-example/src/lib/components/Button.svelte
+++ b/templates/sveltekit-example/src/lib/components/Button.svelte
@@ -13,7 +13,7 @@
 <button
 	{onclick}
 	{disabled}
-	class={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled === true ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}
+	class={`dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff] ${disabled === true ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black'}`}
 >
 	{@render children()}
 </button>
diff --git a/templates/sveltekit-example/src/lib/components/Footer.svelte b/templates/sveltekit-example/src/lib/components/Footer.svelte
index 01743771..afe2c508 100644
--- a/templates/sveltekit-example/src/lib/components/Footer.svelte
+++ b/templates/sveltekit-example/src/lib/components/Footer.svelte
@@ -1,7 +1,7 @@
 <footer
-	class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white"
+	class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white"
 >
-	<span class="flex gap-2 items-baseline">
+	<span class="flex items-baseline gap-2">
 		<svg
 			id="Layer_2"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/sveltekit-example/src/lib/components/Logout.svelte b/templates/sveltekit-example/src/lib/components/Logout.svelte
index f2f91c97..b9489583 100644
--- a/templates/sveltekit-example/src/lib/components/Logout.svelte
+++ b/templates/sveltekit-example/src/lib/components/Logout.svelte
@@ -5,7 +5,7 @@
 <button
 	type="button"
 	onclick={signOut}
-	class="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400"
+	class="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
 >
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/sveltekit-example/src/lib/components/Modal.svelte b/templates/sveltekit-example/src/lib/components/Modal.svelte
index 00b42038..09e09c33 100644
--- a/templates/sveltekit-example/src/lib/components/Modal.svelte
+++ b/templates/sveltekit-example/src/lib/components/Modal.svelte
@@ -93,21 +93,21 @@
 </Button>
 
 {#if showModal}
-	<div class="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
+	<div class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44" role="dialog">
 		<div class="relative w-full max-w-xl">
 			<textarea
-				class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
+				class="form-control m-0 block w-full resize-none rounded-xs border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
 				rows={7}
 				placeholder="Your diary entry"
 				bind:value={inputText}
 				disabled={progress}
 			></textarea>
 
-			<div role="toolbar" class="flex justify-between items-center">
+			<div role="toolbar" class="flex items-center justify-between">
 				<div>
 					<button
 						aria-label="Attach a file to the entry"
-						class="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400"
+						class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
 						onclick={openSelectFile}
 					>
 						<svg
@@ -123,7 +123,7 @@
 								/>
 							</g>
 						</svg>
-						<span class="truncate max-w-48">
+						<span class="max-w-48 truncate">
 							<small>{file !== undefined ? file.name : 'Attach file'}</small>
 						</span>
 					</button>
@@ -139,16 +139,16 @@
 
 				{#if progress}
 					<div
-						class="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+						class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
 						role="status"
 						aria-label="loading"
 					>
 						<span class="sr-only">Loading...</span>
 					</div>
 				{:else}
-					<div class="flex my-4">
+					<div class="my-4 flex">
 						<button
-							class="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+							class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
 							type="button"
 							onclick={() => (showModal = false)}
 						>
diff --git a/templates/sveltekit-example/src/lib/components/Table.svelte b/templates/sveltekit-example/src/lib/components/Table.svelte
index 237da7e4..4337c18f 100644
--- a/templates/sveltekit-example/src/lib/components/Table.svelte
+++ b/templates/sveltekit-example/src/lib/components/Table.svelte
@@ -29,7 +29,7 @@
 
 <svelte:window onjunoExampleReload={reload} />
 
-<div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
+<div class="mt-8 w-full max-w-2xl dark:text-white" role="table">
 	<div role="row">
 		<span role="columnheader" aria-sort="none"> Entries </span>
 	</div>
@@ -37,14 +37,14 @@
 	<div class="py-2" role="rowgroup">
 		{#each items as item, index}
 			<div
-				class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
+				class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
 				role="row"
 			>
-				<span role="cell" aria-rowindex={index} class="p-1 flex align-center min-w-max">
+				<span role="cell" aria-rowindex={index} class="align-center flex min-w-max p-1">
 					{index + 1}
 				</span>
-				<div role="cell" class="line-clamp-3 overflow-hidden grow">{item.data.text}</div>
-				<div role="cell" class="flex gap-2 justify-center align-middle">
+				<div role="cell" class="line-clamp-3 grow overflow-hidden">{item.data.text}</div>
+				<div role="cell" class="flex justify-center gap-2 align-middle">
 					{#if item.data.url !== undefined}
 						<a
 							aria-label="Open data"
diff --git a/templates/sveltekit-example/src/routes/+layout.svelte b/templates/sveltekit-example/src/routes/+layout.svelte
index 6cdb6a7c..ea1267d8 100644
--- a/templates/sveltekit-example/src/routes/+layout.svelte
+++ b/templates/sveltekit-example/src/routes/+layout.svelte
@@ -27,12 +27,12 @@
 
 <div class="relative isolate min-h-[100dvh]">
 	<main
-		class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+		class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
 	>
-		<h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+		<h1 class="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
 			Example App
 		</h1>
-		<p class="dark:text-white py-4 md:max-w-lg">
+		<p class="py-4 md:max-w-lg dark:text-white">
 			Explore this demo app built with SvelteKit, Tailwind, and
 			<a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
 				Juno</a
diff --git a/templates/sveltekit-starter/src/lib/components/Article.svelte b/templates/sveltekit-starter/src/lib/components/Article.svelte
index 9d58b8b3..8dab8a28 100644
--- a/templates/sveltekit-starter/src/lib/components/Article.svelte
+++ b/templates/sveltekit-starter/src/lib/components/Article.svelte
@@ -16,10 +16,10 @@
 	rel="noreferrer noopener"
 	target="_blank"
 	aria-label={ariaLabel}
-	class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+	class="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
 	<h4
-		class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white"
+		class="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white"
 	>
 		{title}
 	</h4>
diff --git a/templates/sveltekit-starter/src/lib/components/Background.svelte b/templates/sveltekit-starter/src/lib/components/Background.svelte
index a9ddc0d5..e0708eac 100644
--- a/templates/sveltekit-starter/src/lib/components/Background.svelte
+++ b/templates/sveltekit-starter/src/lib/components/Background.svelte
@@ -1,5 +1,5 @@
 <div
-	class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+	class="tall:top-2/4 fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3"
 >
 	<img
 		src="/juno_illustration.svg"
diff --git a/templates/sveltekit-starter/src/lib/components/Footer.svelte b/templates/sveltekit-starter/src/lib/components/Footer.svelte
index 5caf24bd..f9770838 100644
--- a/templates/sveltekit-starter/src/lib/components/Footer.svelte
+++ b/templates/sveltekit-starter/src/lib/components/Footer.svelte
@@ -1,7 +1,7 @@
 <footer
-	class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
+	class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white"
 >
-	<span class="flex gap-2 items-baseline">
+	<span class="flex items-baseline gap-2">
 		<svg
 			id="Layer_2"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/sveltekit-starter/src/lib/components/Hero.svelte b/templates/sveltekit-starter/src/lib/components/Hero.svelte
index f261a9e4..d1dfc68f 100644
--- a/templates/sveltekit-starter/src/lib/components/Hero.svelte
+++ b/templates/sveltekit-starter/src/lib/components/Hero.svelte
@@ -15,7 +15,7 @@
 	rel="noreferrer noopener"
 	target="_blank"
 	aria-label={ariaLabel}
-	class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+	class="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
 >
 	{@render children()}
 </a>
diff --git a/templates/sveltekit-starter/src/routes/+layout.svelte b/templates/sveltekit-starter/src/routes/+layout.svelte
index 2578136f..84e43f87 100644
--- a/templates/sveltekit-starter/src/routes/+layout.svelte
+++ b/templates/sveltekit-starter/src/routes/+layout.svelte
@@ -23,11 +23,11 @@
 
 <div class="relative isolate min-h-[100dvh]">
 	<main
-		class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+		class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
 	>
-		<h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
+		<h1 class="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">Welcome to Juno</h1>
 
-		<div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+		<div class="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
 			{@render children?.()}
 		</div>
 	</main>
diff --git a/templates/vanilla-js-example/index.html b/templates/vanilla-js-example/index.html
index 8689acd7..be6d14b8 100644
--- a/templates/vanilla-js-example/index.html
+++ b/templates/vanilla-js-example/index.html
@@ -12,24 +12,34 @@
       href="/fonts/jetbrainsmono-regular.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
     <link
       rel="preload"
       href="/fonts/jetbrainsmono-bold.woff2"
       as="font"
       type="font/woff"
-      crossorigin />
+      crossorigin
+    />
   </head>
   <body class="bg-white dark:bg-black">
     <div class="relative isolate min-h-[100dvh]">
       <main
-        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
-        <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+        class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+      >
+        <h1
+          class="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white"
+        >
           Example App
         </h1>
-        <p class="dark:text-white py-4 md:max-w-lg">
+        <p class="py-4 md:max-w-lg dark:text-white">
           Explore this demo app built with vanilla JavaScript, Tailwind, and
-          <a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
+          <a
+            href="https://juno.build"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="underline"
+          >
             Juno</a
           >, showcasing a practical application of these technologies.
         </p>
@@ -38,23 +48,41 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
       </main>
 
       <footer
-        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
-        <span class="flex gap-2 items-baseline">
+        class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white"
+      >
+        <span class="flex items-baseline gap-2">
           <svg
             id="Layer_2"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 1000 220.39"
             width="80"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <g>
               <path
-                d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
+                d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"
+              ></path>
               <path
-                d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
-              <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+                d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"
+              ></path>
+              <rect
+                x="725.65"
+                y="0"
+                width="220.39"
+                height="220.39"
+                rx="110.19"
+                ry="110.19"
+              ></rect>
               <path
-                d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
-              <circle class="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+                d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"
+              ></path>
+              <circle
+                class="cls-1"
+                cx="931.86"
+                cy="68.14"
+                r="68.14"
+                fill="#7888ff"
+              ></circle>
             </g>
           </svg>
           <small class="hidden md:block">Blockchainless Platform</small>
@@ -66,47 +94,66 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
             aria-label="Go to Juno website and documentation"
             class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
             target="_blank"
-            rel="noopener noreferrer">
+            rel="noopener noreferrer"
+          >
             <svg
               width="32"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 49 49"
-              fill="currentColor">
+              fill="currentColor"
+            >
               <g>
                 <path
-                  d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
+                  d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"
+                ></path>
                 <path
-                  d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
+                  d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"
+                ></path>
                 <path
-                  d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"></path>
+                  d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"
+                ></path>
                 <path
-                  d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"></path>
+                  d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"
+                ></path>
                 <path
-                  d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"></path>
+                  d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"
+                ></path>
                 <path
-                  d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"></path>
+                  d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"
+                ></path>
                 <path
-                  d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"></path>
+                  d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"
+                ></path>
                 <path
-                  d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"></path>
+                  d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"
+                ></path>
                 <path
-                  d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"></path>
+                  d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"
+                ></path>
                 <path
-                  d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"></path>
+                  d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"
+                ></path>
                 <path
-                  d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"></path>
+                  d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"
+                ></path>
                 <path
-                  d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"></path>
+                  d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"
+                ></path>
                 <path
-                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"></path>
+                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"
+                ></path>
                 <path
-                  d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"></path>
+                  d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"
+                ></path>
                 <path
-                  d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"></path>
+                  d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"
+                ></path>
                 <path
-                  d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"></path>
+                  d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"
+                ></path>
                 <path
-                  d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"></path>
+                  d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"
+                ></path>
               </g>
             </svg>
           </a>
@@ -116,18 +163,21 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
             aria-label="Juno is open source on GitHub"
             class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
             target="_blank"
-            rel="noopener noreferrer">
+            rel="noopener noreferrer"
+          >
             <svg
               width="32"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 49 49"
-              fill="currentColor">
+              fill="currentColor"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
                 <g>
                   <g>
                     <g>
                       <path
-                        d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"></path>
+                        d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"
+                      ></path>
                     </g>
                   </g>
                 </g>
@@ -140,21 +190,26 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
             aria-label="Join our channel on Discord to chat or ask questions"
             class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
             target="_blank"
-            rel="noopener noreferrer">
+            rel="noopener noreferrer"
+          >
             <svg
               width="32"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 49 49"
-              fill="currentColor">
+              fill="currentColor"
+            >
               <g>
                 <g>
                   <g>
                     <path
-                      d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"></path>
+                      d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"
+                    ></path>
                     <path
-                      d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"></path>
+                      d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"
+                    ></path>
                     <path
-                      d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"></path>
+                      d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"
+                    ></path>
                   </g>
                 </g>
               </g>
@@ -166,17 +221,21 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
             aria-label="Follow Juno on X/Twitter"
             class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
             target="_blank"
-            rel="noopener noreferrer">
+            rel="noopener noreferrer"
+          >
             <svg
               width="32"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 49 49"
-              fill="currentColor">
+              fill="currentColor"
+            >
               <g>
                 <path
-                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
+                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"
+                ></path>
                 <polygon
-                  points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
+                  points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"
+                ></polygon>
               </g>
             </svg>
           </a>
@@ -184,12 +243,14 @@ <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-2
       </footer>
 
       <div
-        class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+        class="tall:top-2/4 fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3"
+      >
         <img
           src="./juno_illustration.svg"
           role="presentation"
           loading="lazy"
-          alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background." />
+          alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background."
+        />
       </div>
     </div>
     <script type="module" src="/src/main.js"></script>
diff --git a/templates/vanilla-js-example/juno.dev.config.js b/templates/vanilla-js-example/juno.dev.config.js
index 822145f9..914cd131 100644
--- a/templates/vanilla-js-example/juno.dev.config.js
+++ b/templates/vanilla-js-example/juno.dev.config.js
@@ -1,4 +1,4 @@
-import {defineDevConfig} from '@junobuild/config';
+import { defineDevConfig } from "@junobuild/config";
 
 /** @type {import('@junobuild/config').JunoDevConfig} */
 export default defineDevConfig(() => ({
@@ -6,22 +6,22 @@ export default defineDevConfig(() => ({
     collections: {
       datastore: [
         {
-          collection: 'notes',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
+          collection: "notes",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
-          collection: 'images',
-          read: 'managed',
-          write: 'managed',
-          memory: 'stable',
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          collection: "images",
+          read: "managed",
+          write: "managed",
+          memory: "stable",
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }));
diff --git a/templates/vanilla-js-example/src/components/content.js b/templates/vanilla-js-example/src/components/content.js
index 2d998321..757249d0 100644
--- a/templates/vanilla-js-example/src/components/content.js
+++ b/templates/vanilla-js-example/src/components/content.js
@@ -1,6 +1,6 @@
-import {renderLogout} from './logout';
-import {renderModal} from './modal';
-import {renderTable} from './table';
+import { renderLogout } from "./logout";
+import { renderModal } from "./modal";
+import { renderTable } from "./table";
 
 export const renderContent = (app) => {
   app.innerHTML = `<div>
diff --git a/templates/vanilla-js-example/src/components/delete.js b/templates/vanilla-js-example/src/components/delete.js
index 696054ed..b8639b51 100644
--- a/templates/vanilla-js-example/src/components/delete.js
+++ b/templates/vanilla-js-example/src/components/delete.js
@@ -1,24 +1,24 @@
-import {deleteAsset, deleteDoc} from '@junobuild/core';
-import {addEventClick, reload} from '../utils/utils';
+import { deleteAsset, deleteDoc } from "@junobuild/core";
+import { addEventClick, reload } from "../utils/utils";
 
 const deleteItem = async (item) => {
   try {
     const {
-      data: {url}
+      data: { url },
     } = item;
 
     if (url !== undefined) {
-      const {pathname: fullPath} = new URL(url);
+      const { pathname: fullPath } = new URL(url);
 
       await deleteAsset({
-        collection: 'images',
-        fullPath
+        collection: "images",
+        fullPath,
       });
     }
 
     await deleteDoc({
-      collection: 'notes',
-      doc: item
+      collection: "notes",
+      doc: item,
     });
 
     reload();
@@ -27,11 +27,11 @@ const deleteItem = async (item) => {
   }
 };
 
-export const renderDelete = ({table, item, index}) => {
+export const renderDelete = ({ table, item, index }) => {
   addEventClick({
     target: table,
     selector: `#deleteItem${index}`,
-    fn: async () => await deleteItem(item)
+    fn: async () => await deleteItem(item),
   });
 
   return `<button
diff --git a/templates/vanilla-js-example/src/components/login.js b/templates/vanilla-js-example/src/components/login.js
index b5a3b981..c3a5c75c 100644
--- a/templates/vanilla-js-example/src/components/login.js
+++ b/templates/vanilla-js-example/src/components/login.js
@@ -1,11 +1,11 @@
-import {signIn} from '@junobuild/core';
-import {addEventClick} from '../utils/utils';
+import { signIn } from "@junobuild/core";
+import { addEventClick } from "../utils/utils";
 
 export const renderLogin = (app) => {
   addEventClick({
     target: app,
-    selector: '#login',
-    fn: signIn
+    selector: "#login",
+    fn: signIn,
   });
 
   app.innerHTML = `<button id="login"
diff --git a/templates/vanilla-js-example/src/components/logout.js b/templates/vanilla-js-example/src/components/logout.js
index e9503261..0e5b28d1 100644
--- a/templates/vanilla-js-example/src/components/logout.js
+++ b/templates/vanilla-js-example/src/components/logout.js
@@ -1,11 +1,11 @@
-import {signOut} from '@junobuild/core';
-import {addEventClick} from '../utils/utils';
+import { signOut } from "@junobuild/core";
+import { addEventClick } from "../utils/utils";
 
 export const renderLogout = (app) => {
   addEventClick({
     target: app,
-    selector: '#logout',
-    fn: signOut
+    selector: "#logout",
+    fn: signOut,
   });
 
   return `<button
diff --git a/templates/vanilla-js-example/src/components/modal.js b/templates/vanilla-js-example/src/components/modal.js
index 6a5ab1d2..d2dc740c 100644
--- a/templates/vanilla-js-example/src/components/modal.js
+++ b/templates/vanilla-js-example/src/components/modal.js
@@ -1,6 +1,6 @@
-import {authSubscribe, setDoc, uploadFile} from '@junobuild/core';
-import {nanoid} from 'nanoid';
-import {addEventClick, reload} from '../utils/utils';
+import { authSubscribe, setDoc, uploadFile } from "@junobuild/core";
+import { nanoid } from "nanoid";
+import { addEventClick, reload } from "../utils/utils";
 
 let user;
 authSubscribe((u) => (user = u));
@@ -11,8 +11,8 @@ const submitEntry = async (modal) => {
     return;
   }
 
-  const textarea = modal.querySelector('#entryText');
-  const input = modal.querySelector('#fileEntry');
+  const textarea = modal.querySelector("#entryText");
+  const input = modal.querySelector("#fileEntry");
 
   const inputText = textarea.value;
   const file = input.files[0];
@@ -23,10 +23,10 @@ const submitEntry = async (modal) => {
     if (file !== undefined) {
       const filename = `${user.key}-${file.name}`;
 
-      const {downloadUrl} = await uploadFile({
-        collection: 'images',
+      const { downloadUrl } = await uploadFile({
+        collection: "images",
         data: file,
-        filename
+        filename,
       });
 
       url = downloadUrl;
@@ -35,14 +35,14 @@ const submitEntry = async (modal) => {
     const key = nanoid();
 
     await setDoc({
-      collection: 'notes',
+      collection: "notes",
       doc: {
         key,
         data: {
           text: inputText,
-          ...(url !== undefined && {url})
-        }
-      }
+          ...(url !== undefined && { url }),
+        },
+      },
     });
 
     closeModal(modal);
@@ -53,21 +53,21 @@ const submitEntry = async (modal) => {
   }
 };
 
-const closeModal = (modal) => (modal.innerHTML = '');
+const closeModal = (modal) => (modal.innerHTML = "");
 
 const showModal = () => {
-  const modal = document.querySelector('#modal');
+  const modal = document.querySelector("#modal");
 
   addEventClick({
     target: modal,
-    selector: '#closeModal',
-    fn: () => closeModal(modal)
+    selector: "#closeModal",
+    fn: () => closeModal(modal),
   });
 
   addEventClick({
     target: modal,
-    selector: '#submitEntry',
-    fn: async () => await submitEntry(modal)
+    selector: "#submitEntry",
+    fn: async () => await submitEntry(modal),
   });
 
   modal.innerHTML = `<div class="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
@@ -121,8 +121,8 @@ const showModal = () => {
 export const renderModal = (app) => {
   addEventClick({
     target: app,
-    selector: '#addEntry',
-    fn: showModal
+    selector: "#addEntry",
+    fn: showModal,
   });
 
   return `<button
diff --git a/templates/vanilla-js-example/src/components/table.js b/templates/vanilla-js-example/src/components/table.js
index ddf4a4af..517b01ba 100644
--- a/templates/vanilla-js-example/src/components/table.js
+++ b/templates/vanilla-js-example/src/components/table.js
@@ -1,13 +1,13 @@
-import {listDocs} from '@junobuild/core';
-import {renderDelete} from './delete';
+import { listDocs } from "@junobuild/core";
+import { renderDelete } from "./delete";
 
 const list = async () => {
-  const {items} = await listDocs({
-    collection: 'notes',
-    filter: {}
+  const { items } = await listDocs({
+    collection: "notes",
+    filter: {},
   });
 
-  const table = document.querySelector('#table');
+  const table = document.querySelector("#table");
 
   table.innerHTML = `<div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
       <div role="row">
@@ -21,7 +21,7 @@ const list = async () => {
           .map((item, index) => {
             const {
               key,
-              data: {text, url}
+              data: { text, url },
             } = item;
 
             return `<div
@@ -54,14 +54,14 @@ const list = async () => {
                     </svg>
                   </a>
                     `
-                    : ''
+                    : ""
                 }
                 
-                ${renderDelete({table, item, index})}
+                ${renderDelete({ table, item, index })}
               </div>
             </div>`;
           })
-          .join('')}
+          .join("")}
       </div>
 </div>`;
 };
@@ -72,9 +72,9 @@ export const renderTable = (app) => {
 
     await list();
   });
-  observer.observe(app, {childList: true, subtree: true});
+  observer.observe(app, { childList: true, subtree: true });
 
   return `<div id="table" class="contents"></div>`;
 };
 
-window.addEventListener('reload', list);
+window.addEventListener("reload", list);
diff --git a/templates/vanilla-js-example/src/main.js b/templates/vanilla-js-example/src/main.js
index b9991429..882cc834 100644
--- a/templates/vanilla-js-example/src/main.js
+++ b/templates/vanilla-js-example/src/main.js
@@ -1,13 +1,13 @@
-import {authSubscribe, initSatellite} from '@junobuild/core';
-import {renderContent} from './components/content';
-import {renderLogin} from './components/login';
-import './style.css';
+import { authSubscribe, initSatellite } from "@junobuild/core";
+import { renderContent } from "./components/content";
+import { renderLogin } from "./components/login";
+import "./style.css";
 
 /**
  * Global listener. When the user sign-in or sign-out, we re-render the app.
  */
 authSubscribe((user) => {
-  const app = document.querySelector('#app');
+  const app = document.querySelector("#app");
 
   if (user === null || user === undefined) {
     renderLogin(app);
@@ -24,9 +24,9 @@ authSubscribe((user) => {
 const onAppInit = async () => {
   await initSatellite({
     workers: {
-      auth: true
-    }
+      auth: true,
+    },
   });
 };
 
-document.addEventListener('DOMContentLoaded', onAppInit, {once: true});
+document.addEventListener("DOMContentLoaded", onAppInit, { once: true });
diff --git a/templates/vanilla-js-example/src/style.css b/templates/vanilla-js-example/src/style.css
index 3796215d..1a7a57ab 100644
--- a/templates/vanilla-js-example/src/style.css
+++ b/templates/vanilla-js-example/src/style.css
@@ -1,21 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/jetbrainsmono-regular.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+  font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
+  src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2");
 }
 
 @theme {
-  --font-display: 'JetBrains Mono', sans-serif;
+  --font-display: "JetBrains Mono", sans-serif;
 
   --color-*: initial;
   --color-inherit: inherit;
diff --git a/templates/vanilla-js-example/src/utils/utils.js b/templates/vanilla-js-example/src/utils/utils.js
index fb1cbc85..8c8e6f0f 100644
--- a/templates/vanilla-js-example/src/utils/utils.js
+++ b/templates/vanilla-js-example/src/utils/utils.js
@@ -4,15 +4,17 @@
  * @param selector The selector to the element to which the function should attach the click event.
  * @param fn The function to trigger on click.
  */
-export const addEventClick = ({target, selector, fn}) => {
+export const addEventClick = ({ target, selector, fn }) => {
   const observer = new MutationObserver(() => {
     observer.disconnect();
-    document.querySelector(selector)?.addEventListener('click', fn, {passive: true});
+    document
+      .querySelector(selector)
+      ?.addEventListener("click", fn, { passive: true });
   });
-  observer.observe(target, {childList: true, subtree: true});
+  observer.observe(target, { childList: true, subtree: true });
 };
 
 export const reload = () => {
-  const event = new Event('reload');
+  const event = new Event("reload");
   window.dispatchEvent(event);
 };
diff --git a/templates/vanilla-js-example/vite.config.js b/templates/vanilla-js-example/vite.config.js
index 53432f88..464223db 100644
--- a/templates/vanilla-js-example/vite.config.js
+++ b/templates/vanilla-js-example/vite.config.js
@@ -1,9 +1,9 @@
-import juno from '@junobuild/vite-plugin';
-import {defineConfig} from 'vite';
-import {nodePolyfills} from 'vite-plugin-node-polyfills';
-import tailwindcss from '@tailwindcss/vite';
+import juno from "@junobuild/vite-plugin";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tailwindcss from "@tailwindcss/vite";
 
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
-  plugins: [nodePolyfills(), juno({container: true}), tailwindcss()]
+  plugins: [nodePolyfills(), juno({ container: true }), tailwindcss()],
 });
diff --git a/templates/vue-example/src/App.vue b/templates/vue-example/src/App.vue
index ae008f52..33664ffc 100644
--- a/templates/vue-example/src/App.vue
+++ b/templates/vue-example/src/App.vue
@@ -20,12 +20,12 @@ onMounted(
 <template>
   <div class="relative isolate min-h-[100dvh]">
     <main
-      class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+      class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
     >
-      <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+      <h1 class="text-5xl font-bold tracking-tight md:pt-24 md:text-6xl dark:text-white">
         Example App
       </h1>
-      <p class="dark:text-white py-4 md:max-w-lg">
+      <p class="py-4 md:max-w-lg dark:text-white">
         Explore this demo app built with Vue, Tailwind, and
         <a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
           Juno</a
diff --git a/templates/vue-example/src/assets/main.css b/templates/vue-example/src/assets/main.css
index e2787858..51261358 100644
--- a/templates/vue-example/src/assets/main.css
+++ b/templates/vue-example/src/assets/main.css
@@ -14,7 +14,6 @@
   src: url('/fonts/jetbrainsmono-bold.woff2') format('woff2');
 }
 
-
 @theme {
   --font-display: 'JetBrains Mono', sans-serif;
 
diff --git a/templates/vue-example/src/components/Backdrop.vue b/templates/vue-example/src/components/Backdrop.vue
index 3e7d4081..f8496286 100644
--- a/templates/vue-example/src/components/Backdrop.vue
+++ b/templates/vue-example/src/components/Backdrop.vue
@@ -6,11 +6,11 @@ defineProps<{
 
 <template>
   <div
-    class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"
+    class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
   >
     <div
       v-if="spinner"
-      class="w-12 h-12 rounded-full animate-spin border-[3px] border-solid border-lavender-blue-600 border-t-transparent"
+      class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
     ></div>
   </div>
 </template>
diff --git a/templates/vue-example/src/components/Background.vue b/templates/vue-example/src/components/Background.vue
index 16887f25..14e975d5 100644
--- a/templates/vue-example/src/components/Background.vue
+++ b/templates/vue-example/src/components/Background.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+    class="tall:top-2/4 fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3"
   >
     <img
       src="/juno_illustration.svg"
diff --git a/templates/vue-example/src/components/Button.vue b/templates/vue-example/src/components/Button.vue
index 250a0d32..9d806ca7 100644
--- a/templates/vue-example/src/components/Button.vue
+++ b/templates/vue-example/src/components/Button.vue
@@ -7,10 +7,10 @@ defineProps<{
 <template>
   <button
     :disabled="disabled"
-    class="flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff]"
+    class="dark:border-lavender-blue-500 bg-lavender-blue-500 my-2 flex items-center gap-2 rounded-xs border-[3px] border-black px-8 py-1 font-semibold text-white shadow-[5px_5px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:shadow-[5px_5px_0px_#7888ff]"
     :class="{
       'opacity-25': disabled === true,
-      'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]':
+      'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:translate-x-[5px] active:translate-y-[5px] active:shadow-none dark:hover:text-black':
         disabled !== true,
     }"
   >
diff --git a/templates/vue-example/src/components/Footer.vue b/templates/vue-example/src/components/Footer.vue
index 23e8bde1..4e93f366 100644
--- a/templates/vue-example/src/components/Footer.vue
+++ b/templates/vue-example/src/components/Footer.vue
@@ -1,8 +1,8 @@
 <template>
   <footer
-    class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white"
+    class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:justify-start md:gap-24 md:px-24 dark:text-white"
   >
-    <span class="flex gap-2 items-baseline">
+    <span class="flex items-baseline gap-2">
       <svg
         id="Layer_2"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/vue-example/src/components/Logout.vue b/templates/vue-example/src/components/Logout.vue
index 30eacb39..6144b928 100644
--- a/templates/vue-example/src/components/Logout.vue
+++ b/templates/vue-example/src/components/Logout.vue
@@ -6,7 +6,7 @@ import { signOut } from '@junobuild/core'
   <button
     type="button"
     @click="signOut"
-    class="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400"
+    class="hover:text-lavender-blue-500 active:text-lavender-blue-400 mt-24 flex items-center gap-2 dark:text-white"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/vue-example/src/components/Modal.vue b/templates/vue-example/src/components/Modal.vue
index c4ee3124..ec3798ba 100644
--- a/templates/vue-example/src/components/Modal.vue
+++ b/templates/vue-example/src/components/Modal.vue
@@ -94,24 +94,24 @@ const openSelectFile = () => inputFile.value?.click()
   </Button>
 
   <div
-    class="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade"
+    class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
     role="dialog"
     v-if="showModal"
   >
     <div class="relative w-full max-w-xl">
       <textarea
-        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
+        class="form-control m-0 block w-full resize-none rounded-xs border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
         rows="{7}"
         placeholder="Your diary entry"
         v-model="inputText"
         :disabled="progress"
       ></textarea>
 
-      <div role="toolbar" class="flex justify-between items-center">
+      <div role="toolbar" class="flex items-center justify-between">
         <div>
           <button
             aria-label="Attach a file to the entry"
-            class="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400"
+            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
             @click="openSelectFile"
           >
             <svg
@@ -127,7 +127,7 @@ const openSelectFile = () => inputFile.value?.click()
                 />
               </g>
             </svg>
-            <span class="truncate max-w-48">
+            <span class="max-w-48 truncate">
               <small>{{ file !== undefined ? file.name : 'Attach file' }}</small>
             </span>
           </button>
@@ -142,7 +142,7 @@ const openSelectFile = () => inputFile.value?.click()
         </div>
 
         <div
-          class="my-8 animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full"
+          class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
           role="status"
           aria-label="loading"
           v-if="progress"
@@ -150,9 +150,9 @@ const openSelectFile = () => inputFile.value?.click()
           <span class="sr-only">Loading...</span>
         </div>
 
-        <div class="flex my-4" v-if="!progress">
+        <div class="my-4 flex" v-if="!progress">
           <button
-            class="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
+            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
             type="button"
             @click="() => setShowModal(false)"
           >
diff --git a/templates/vue-example/src/components/Table.vue b/templates/vue-example/src/components/Table.vue
index 3580c59e..ff66fcdb 100644
--- a/templates/vue-example/src/components/Table.vue
+++ b/templates/vue-example/src/components/Table.vue
@@ -24,7 +24,7 @@ onUnmounted(() => window.removeEventListener('reload', list))
 </script>
 
 <template>
-  <div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
+  <div class="mt-8 w-full max-w-2xl dark:text-white" role="table">
     <div role="row">
       <span role="columnheader" aria-sort="none"> Entries </span>
     </div>
@@ -32,15 +32,15 @@ onUnmounted(() => window.removeEventListener('reload', list))
     <div class="py-2" role="rowgroup">
       <div
         v-bind:key="index"
-        class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
+        class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
         role="row"
         v-for="(item, index) in items"
       >
-        <span role="cell" aria-rowindex="{index}" class="p-1 flex align-center min-w-max">
+        <span role="cell" aria-rowindex="{index}" class="align-center flex min-w-max p-1">
           {{ index + 1 }}
         </span>
-        <div role="cell" class="line-clamp-3 overflow-hidden grow">{{ item.data.text }}</div>
-        <div role="cell" class="flex gap-2 justify-center align-middle">
+        <div role="cell" class="line-clamp-3 grow overflow-hidden">{{ item.data.text }}</div>
+        <div role="cell" class="flex justify-center gap-2 align-middle">
           <a
             aria-label="Open data"
             rel="noopener noreferrer"
diff --git a/templates/vue-starter/src/App.vue b/templates/vue-starter/src/App.vue
index eb534c31..6e94faf2 100644
--- a/templates/vue-starter/src/App.vue
+++ b/templates/vue-starter/src/App.vue
@@ -19,11 +19,11 @@ onMounted(
 <template>
   <div class="relative isolate min-h-[100dvh]">
     <main
-      class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+      class="mx-auto max-w-(--breakpoint-2xl) px-8 py-16 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
     >
-      <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
+      <h1 class="text-5xl font-extrabold md:pt-16 md:text-6xl dark:text-white">Welcome to Juno</h1>
 
-      <div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
+      <div class="mt-8 grid w-full max-w-2xl grid-cols-2 gap-8">
         <Hero
           href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
           ariaLabel="Discover how to create a Satellite and deploy your project to production"
diff --git a/templates/vue-starter/src/components/Article.vue b/templates/vue-starter/src/components/Article.vue
index 70015a38..208c0173 100644
--- a/templates/vue-starter/src/components/Article.vue
+++ b/templates/vue-starter/src/components/Article.vue
@@ -12,10 +12,10 @@ defineProps<{
     rel="noreferrer noopener"
     target="_blank"
     :aria-label="ariaLabel"
-    class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+    class="group dark:border-lavender-blue-500 hover:bg-lavender-blue-200 active:bg-lavender-blue-400 flex flex-col rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
   >
     <h4
-      class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white"
+      class="dark:text-lavender-blue-500 mb-1 font-extrabold break-words sm:text-lg dark:group-hover:text-white"
     >
       {{ title }}
     </h4>
diff --git a/templates/vue-starter/src/components/Background.vue b/templates/vue-starter/src/components/Background.vue
index 2d24d85c..430493c6 100644
--- a/templates/vue-starter/src/components/Background.vue
+++ b/templates/vue-starter/src/components/Background.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+    class="fixed top-[400px] right-0 -z-10 hidden aspect-square h-[100dvh] min-h-[800px] -translate-y-2/4 translate-x-2/4 sm:block lg:translate-x-1/3 [@media(min-height:800px)]:top-2/4"
   >
     <img
       src="/juno_illustration.svg"
diff --git a/templates/vue-starter/src/components/Footer.vue b/templates/vue-starter/src/components/Footer.vue
index 36ff86ee..0d4244de 100644
--- a/templates/vue-starter/src/components/Footer.vue
+++ b/templates/vue-starter/src/components/Footer.vue
@@ -1,8 +1,8 @@
 <template>
   <footer
-    class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
+    class="mx-auto flex h-24 max-w-(--breakpoint-2xl) items-center justify-between px-8 py-16 md:mt-12 md:justify-start md:gap-24 md:px-24 md:pt-0 dark:text-white"
   >
-    <span class="flex gap-2 items-baseline">
+    <span class="flex items-baseline gap-2">
       <svg
         id="Layer_2"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/templates/vue-starter/src/components/Hero.vue b/templates/vue-starter/src/components/Hero.vue
index cab22c33..de559b1b 100644
--- a/templates/vue-starter/src/components/Hero.vue
+++ b/templates/vue-starter/src/components/Hero.vue
@@ -11,7 +11,7 @@ defineProps<{
     rel="noreferrer noopener"
     target="_blank"
     :aria-label="ariaLabel"
-    class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+    class="bg-lavender-blue-500 dark:border-lavender-blue-500 hover:bg-lavender-blue-400 active:bg-lavender-blue-600 col-span-2 rounded-sm border-[3px] border-black px-4 py-3 text-center text-lg font-extrabold text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all active:translate-x-[8px] active:translate-y-[8px] active:shadow-none dark:bg-white dark:text-black dark:shadow-[8px_8px_0px_#7888FF] dark:hover:border-white dark:hover:bg-black dark:hover:text-white dark:hover:shadow-[8px_8px_0px_#fff] dark:active:bg-black"
   >
     <slot />
   </a>