diff --git a/.vscode/settings.json b/.vscode/settings.json
index 11bdfb1..52c2ba8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "files.associations": {
     "**/*.jinja": "jinja"
   },
-  "python.testing.pytestArgs": ["tests"],
+  "python.testing.pytestArgs": ["."],
   "python.testing.unittestEnabled": false,
   "python.testing.pytestEnabled": true,
   "files.eol": "\n"
diff --git a/template_content/README.md.jinja b/template_content/README.md.jinja
index 6cd5477..1bde71f 100644
--- a/template_content/README.md.jinja
+++ b/template_content/README.md.jinja
@@ -47,7 +47,26 @@ For pull requests and pushes to `main` branch against this repository the follow
 
 The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.
 
-> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).
+**Please note**: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. Default setup provided by the template allows you to manage the secrets via environment variables and secrets on your github repository.
+
+{% if cloud_provider != none %}
+#### Setting up environment variables and secrets for webapp deployment
+
+1. [Create a new environment variable on your repository](https://docs.github.com/en/actions/learn-github-actions/variables#creating-configuration-variables-for-a-repository) called `NETLIFY_AUTH_TOKEN` and `NETLIFY_SITE_ID` if you are using Netlify as your cloud provider. Set it to the value of your Netlify auth token respectively. You can find your Netlify auth token by going to [app.netlify.com](https://app.netlify.com/).
+2. If you are using Vercel as your cloud provider, create a new environment variable on your repository called `VERCEL_TOKEN`. Set it to the value of your Vercel auth token. You can find your Vercel auth token by going to [vercel.com/account/tokens](https://vercel.com/account/tokens).
+3. Set environment variables similarly to step one for the following variables (see .env.template for default values):
+    - VITE_ALGOD_SERVER
+    - VITE_ALGOD_PORT
+    - VITE_ALGOD_NETWORK
+    - VITE_INDEXER_SERVER
+    - VITE_INDEXER_PORT
+    - VITE_ENVIRONMENT
+4. (Optional) [Set environment secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) for the following variables (see .env.template for default values):
+    - VITE_ALGOD_TOKEN
+    - VITE_INDEXER_TOKEN
+
+> If you prefer alternative deployment methods, you can remove the relevant workflow files from the [`.github/workflows`](./.github/workflows) folder and configure your own.
+{% endif %}
 
 {% endif -%}
 
@@ -96,4 +115,3 @@ It has also been configured to have a productive dev experience out of the box i
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
index 5563845..1ed3054 100644
--- a/template_content/package.json.jinja
+++ b/template_content/package.json.jinja
@@ -36,7 +36,7 @@
     "@playwright/test": "^1.35.0",
     "playwright": "^1.35.0",
     {% endif -%}
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
@@ -44,7 +44,7 @@
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     {% if use_daisy_ui -%}
     "daisyui": "^3.1.0",
diff --git a/template_content/src/App.tsx b/template_content/src/App.tsx
index 79657e2..58feddf 100644
--- a/template_content/src/App.tsx
+++ b/template_content/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
diff --git a/template_content/src/Home.tsx b/template_content/src/Home.tsx
new file mode 100644
index 0000000..42128d8
--- /dev/null
+++ b/template_content/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
diff --git a/template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml b/template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml.jinja
similarity index 83%
rename from template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml
rename to template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml.jinja
index e22e436..dbd056d 100644
--- a/template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml	
+++ b/template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml.jinja	
@@ -30,12 +30,12 @@ jobs:
 
       - name: Run linters
         run: npm run lint
-
+      {% if use_jest %}
       - name: Run unit tests
         run: npm run test
-
+      {% endif %}
       - name: Create placeholder .env file
-        if: ${{ inputs.run-build }}
+        if: ${{ '{{' }} inputs.run-build {{ '}}' }}
         uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
         with:
           env-output-path: './.env'
@@ -43,11 +43,11 @@ jobs:
           env-variable-prefix: VITE_
 
       - name: Build
-        if: ${{ inputs.run-build }}
+        if: ${{ '{{' }} inputs.run-build {{ '}}' }}
         run: npm run build
 
       - name: Archive
-        if: ${{ inputs.run-build }}
+        if: ${{ '{{' }} inputs.run-build {{ '}}' }}
         uses: actions/upload-artifact@v3
         with:
           name: dist
diff --git a/template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja b/template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja
index dacec48..224e88e 100644
--- a/template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja	
+++ b/template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja	
@@ -68,7 +68,7 @@ jobs:
 
       - name: Deploy Project Artifacts to Vercel
         run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
-        # Set your vercel project env variables on your site instance on https://vercel.com/dashboard
+        # Set your vercel project env variables on your github repository (see README for more info)
       {% endraw %}
     {%- else %}
       {% raw %}
@@ -100,5 +100,6 @@ jobs:
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          # Set your netlify project env variables on your github repository (see README for more info)
       {% endraw %}
     {%- endif %}
diff --git a/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml b/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml
index 3bf44a1..35bed0a 100644
--- a/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml
+++ b/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml
@@ -6,14 +6,12 @@ algod_server: http://localhost
 algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 author_email: None
 author_name: None
-cloud_provider: none
 ide_jetbrains: true
 ide_vscode: false
 indexer_port: 8980
 indexer_server: http://localhost
 indexer_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 project_name: test_all_default_parameters_jetbrains
-use_daisy_ui: false
 use_eslint_prettier: false
 use_github_actions: false
 use_jest: false
diff --git a/tests_generated/test_all_default_parameters_jetbrains/README.md b/tests_generated/test_all_default_parameters_jetbrains/README.md
index c16643d..83235a8 100644
--- a/tests_generated/test_all_default_parameters_jetbrains/README.md
+++ b/tests_generated/test_all_default_parameters_jetbrains/README.md
@@ -55,4 +55,3 @@ This project makes use of React and Tailwind to provider a base project configur
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/tests_generated/test_all_default_parameters_jetbrains/package.json b/tests_generated/test_all_default_parameters_jetbrains/package.json
index 031bbd5..a3ebe9a 100644
--- a/tests_generated/test_all_default_parameters_jetbrains/package.json
+++ b/tests_generated/test_all_default_parameters_jetbrains/package.json
@@ -17,7 +17,7 @@
     "autoprefixer": "10.4.14",
     "ts-node": "10.9.1",
     "typescript": "5.1.6",
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
@@ -25,7 +25,7 @@
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
diff --git a/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx b/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx
index 79657e2..58feddf 100644
--- a/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx
+++ b/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
diff --git a/tests_generated/test_all_default_parameters_jetbrains/src/Home.tsx b/tests_generated/test_all_default_parameters_jetbrains/src/Home.tsx
new file mode 100644
index 0000000..42128d8
--- /dev/null
+++ b/tests_generated/test_all_default_parameters_jetbrains/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
diff --git a/tests_generated/test_all_default_parameters_off/.copier-answers.yml b/tests_generated/test_all_default_parameters_off/.copier-answers.yml
index 4e6d86f..9186f25 100644
--- a/tests_generated/test_all_default_parameters_off/.copier-answers.yml
+++ b/tests_generated/test_all_default_parameters_off/.copier-answers.yml
@@ -6,14 +6,12 @@ algod_server: http://localhost
 algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 author_email: None
 author_name: None
-cloud_provider: none
 ide_jetbrains: false
 ide_vscode: false
 indexer_port: 8980
 indexer_server: http://localhost
 indexer_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 project_name: test_all_default_parameters_off
-use_daisy_ui: false
 use_eslint_prettier: false
 use_github_actions: false
 use_jest: false
diff --git a/tests_generated/test_all_default_parameters_off/README.md b/tests_generated/test_all_default_parameters_off/README.md
index 0dcb5d0..52afa0e 100644
--- a/tests_generated/test_all_default_parameters_off/README.md
+++ b/tests_generated/test_all_default_parameters_off/README.md
@@ -55,4 +55,3 @@ This project makes use of React and Tailwind to provider a base project configur
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/tests_generated/test_all_default_parameters_off/package.json b/tests_generated/test_all_default_parameters_off/package.json
index e61e8ee..4fbaa0b 100644
--- a/tests_generated/test_all_default_parameters_off/package.json
+++ b/tests_generated/test_all_default_parameters_off/package.json
@@ -17,7 +17,7 @@
     "autoprefixer": "10.4.14",
     "ts-node": "10.9.1",
     "typescript": "5.1.6",
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
@@ -25,7 +25,7 @@
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
diff --git a/tests_generated/test_all_default_parameters_off/src/App.tsx b/tests_generated/test_all_default_parameters_off/src/App.tsx
index 79657e2..58feddf 100644
--- a/tests_generated/test_all_default_parameters_off/src/App.tsx
+++ b/tests_generated/test_all_default_parameters_off/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
diff --git a/tests_generated/test_all_default_parameters_off/src/Home.tsx b/tests_generated/test_all_default_parameters_off/src/Home.tsx
new file mode 100644
index 0000000..42128d8
--- /dev/null
+++ b/tests_generated/test_all_default_parameters_off/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
diff --git a/tests_generated/test_all_default_parameters_on_netlify/.copier-answers.yml b/tests_generated/test_all_default_parameters_on_netlify/.copier-answers.yml
index 9554a42..fffc018 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/.copier-answers.yml
+++ b/tests_generated/test_all_default_parameters_on_netlify/.copier-answers.yml
@@ -7,7 +7,6 @@ algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 author_email: None
 author_name: None
 cloud_provider: netlify
-ide_jetbrains: false
 ide_vscode: true
 indexer_port: 8980
 indexer_server: http://localhost
diff --git a/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/checks.yaml b/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/checks.yaml
index e22e436..49586b8 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/checks.yaml
+++ b/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/checks.yaml
@@ -30,10 +30,10 @@ jobs:
 
       - name: Run linters
         run: npm run lint
-
+      
       - name: Run unit tests
         run: npm run test
-
+      
       - name: Create placeholder .env file
         if: ${{ inputs.run-build }}
         uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
diff --git a/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/release.yaml b/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/release.yaml
index ab62830..183a8da 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/release.yaml
+++ b/tests_generated/test_all_default_parameters_on_netlify/.github/workflows/release.yaml
@@ -61,4 +61,5 @@ jobs:
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          # Set your netlify project env variables on your github repository (see README for more info)
       
diff --git a/tests_generated/test_all_default_parameters_on_netlify/README.md b/tests_generated/test_all_default_parameters_on_netlify/README.md
index 2f249c6..66334c3 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/README.md
+++ b/tests_generated/test_all_default_parameters_on_netlify/README.md
@@ -45,7 +45,26 @@ For pull requests and pushes to `main` branch against this repository the follow
 
 The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.
 
-> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).
+**Please note**: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. Default setup provided by the template allows you to manage the secrets via environment variables and secrets on your github repository.
+
+
+#### Setting up environment variables and secrets for webapp deployment
+
+1. [Create a new environment variable on your repository](https://docs.github.com/en/actions/learn-github-actions/variables#creating-configuration-variables-for-a-repository) called `NETLIFY_AUTH_TOKEN` and `NETLIFY_SITE_ID` if you are using Netlify as your cloud provider. Set it to the value of your Netlify auth token respectively. You can find your Netlify auth token by going to [app.netlify.com](https://app.netlify.com/).
+2. If you are using Vercel as your cloud provider, create a new environment variable on your repository called `VERCEL_TOKEN`. Set it to the value of your Vercel auth token. You can find your Vercel auth token by going to [vercel.com/account/tokens](https://vercel.com/account/tokens).
+3. Set environment variables similarly to step one for the following variables (see .env.template for default values):
+    - VITE_ALGOD_SERVER
+    - VITE_ALGOD_PORT
+    - VITE_ALGOD_NETWORK
+    - VITE_INDEXER_SERVER
+    - VITE_INDEXER_PORT
+    - VITE_ENVIRONMENT
+4. (Optional) [Set environment secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) for the following variables (see .env.template for default values):
+    - VITE_ALGOD_TOKEN
+    - VITE_INDEXER_TOKEN
+
+> If you prefer alternative deployment methods, you can remove the relevant workflow files from the [`.github/workflows`](./.github/workflows) folder and configure your own.
+
 
 # Algorand Wallet integrations
 
@@ -79,4 +98,3 @@ It has also been configured to have a productive dev experience out of the box i
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/tests_generated/test_all_default_parameters_on_netlify/package.json b/tests_generated/test_all_default_parameters_on_netlify/package.json
index ac78493..3c29502 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/package.json
+++ b/tests_generated/test_all_default_parameters_on_netlify/package.json
@@ -28,7 +28,7 @@
     "typescript": "5.1.6",
     "@playwright/test": "^1.35.0",
     "playwright": "^1.35.0",
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
@@ -36,7 +36,7 @@
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     "daisyui": "^3.1.0",
     "notistack": "^3.0.1",
diff --git a/tests_generated/test_all_default_parameters_on_netlify/src/App.tsx b/tests_generated/test_all_default_parameters_on_netlify/src/App.tsx
index 79657e2..58feddf 100644
--- a/tests_generated/test_all_default_parameters_on_netlify/src/App.tsx
+++ b/tests_generated/test_all_default_parameters_on_netlify/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
diff --git a/tests_generated/test_all_default_parameters_on_netlify/src/Home.tsx b/tests_generated/test_all_default_parameters_on_netlify/src/Home.tsx
new file mode 100644
index 0000000..42128d8
--- /dev/null
+++ b/tests_generated/test_all_default_parameters_on_netlify/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
diff --git a/tests_generated/test_all_default_parameters_on_vercel/.copier-answers.yml b/tests_generated/test_all_default_parameters_on_vercel/.copier-answers.yml
index eab3d16..d2c54ed 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/.copier-answers.yml
+++ b/tests_generated/test_all_default_parameters_on_vercel/.copier-answers.yml
@@ -7,7 +7,6 @@ algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 author_email: None
 author_name: None
 cloud_provider: vercel
-ide_jetbrains: false
 ide_vscode: true
 indexer_port: 8980
 indexer_server: http://localhost
diff --git a/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/checks.yaml b/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/checks.yaml
index e22e436..49586b8 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/checks.yaml
+++ b/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/checks.yaml
@@ -30,10 +30,10 @@ jobs:
 
       - name: Run linters
         run: npm run lint
-
+      
       - name: Run unit tests
         run: npm run test
-
+      
       - name: Create placeholder .env file
         if: ${{ inputs.run-build }}
         uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
diff --git a/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/release.yaml b/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/release.yaml
index 135de77..13152f1 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/release.yaml
+++ b/tests_generated/test_all_default_parameters_on_vercel/.github/workflows/release.yaml
@@ -62,5 +62,5 @@ jobs:
 
       - name: Deploy Project Artifacts to Vercel
         run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
-        # Set your vercel project env variables on your site instance on https://vercel.com/dashboard
+        # Set your vercel project env variables on your github repository (see README for more info)
       
diff --git a/tests_generated/test_all_default_parameters_on_vercel/README.md b/tests_generated/test_all_default_parameters_on_vercel/README.md
index 62952cc..b18e21d 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/README.md
+++ b/tests_generated/test_all_default_parameters_on_vercel/README.md
@@ -45,7 +45,26 @@ For pull requests and pushes to `main` branch against this repository the follow
 
 The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.
 
-> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).
+**Please note**: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. Default setup provided by the template allows you to manage the secrets via environment variables and secrets on your github repository.
+
+
+#### Setting up environment variables and secrets for webapp deployment
+
+1. [Create a new environment variable on your repository](https://docs.github.com/en/actions/learn-github-actions/variables#creating-configuration-variables-for-a-repository) called `NETLIFY_AUTH_TOKEN` and `NETLIFY_SITE_ID` if you are using Netlify as your cloud provider. Set it to the value of your Netlify auth token respectively. You can find your Netlify auth token by going to [app.netlify.com](https://app.netlify.com/).
+2. If you are using Vercel as your cloud provider, create a new environment variable on your repository called `VERCEL_TOKEN`. Set it to the value of your Vercel auth token. You can find your Vercel auth token by going to [vercel.com/account/tokens](https://vercel.com/account/tokens).
+3. Set environment variables similarly to step one for the following variables (see .env.template for default values):
+    - VITE_ALGOD_SERVER
+    - VITE_ALGOD_PORT
+    - VITE_ALGOD_NETWORK
+    - VITE_INDEXER_SERVER
+    - VITE_INDEXER_PORT
+    - VITE_ENVIRONMENT
+4. (Optional) [Set environment secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) for the following variables (see .env.template for default values):
+    - VITE_ALGOD_TOKEN
+    - VITE_INDEXER_TOKEN
+
+> If you prefer alternative deployment methods, you can remove the relevant workflow files from the [`.github/workflows`](./.github/workflows) folder and configure your own.
+
 
 # Algorand Wallet integrations
 
@@ -79,4 +98,3 @@ It has also been configured to have a productive dev experience out of the box i
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/tests_generated/test_all_default_parameters_on_vercel/package.json b/tests_generated/test_all_default_parameters_on_vercel/package.json
index 1eedef2..047f1e9 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/package.json
+++ b/tests_generated/test_all_default_parameters_on_vercel/package.json
@@ -28,7 +28,7 @@
     "typescript": "5.1.6",
     "@playwright/test": "^1.35.0",
     "playwright": "^1.35.0",
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
@@ -36,7 +36,7 @@
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     "daisyui": "^3.1.0",
     "notistack": "^3.0.1",
diff --git a/tests_generated/test_all_default_parameters_on_vercel/src/App.tsx b/tests_generated/test_all_default_parameters_on_vercel/src/App.tsx
index 79657e2..58feddf 100644
--- a/tests_generated/test_all_default_parameters_on_vercel/src/App.tsx
+++ b/tests_generated/test_all_default_parameters_on_vercel/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
diff --git a/tests_generated/test_all_default_parameters_on_vercel/src/Home.tsx b/tests_generated/test_all_default_parameters_on_vercel/src/Home.tsx
new file mode 100644
index 0000000..42128d8
--- /dev/null
+++ b/tests_generated/test_all_default_parameters_on_vercel/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home