diff --git a/src/app.ts b/src/app.ts
index 41d598518..375c74f0c 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,13 +1,12 @@
 import path from 'path';
-import {createProject, runDepsInstall} from './make';
-import {promptAndGetConfig,} from './user-input';
+import { createProject, runDepsInstall } from './make';
+import { promptAndGetConfig, } from './user-input';
 import * as show from './messages';
 
 (async function () {
-  const promptResult = await promptAndGetConfig();
-  if (promptResult === null) {
-    return;
-  }
+  const prompt = await promptAndGetConfig();
+  if (prompt === undefined) return;
+
   const {
     config: {
       projectName,
@@ -17,7 +16,7 @@ import * as show from './messages';
       install,
     },
     projectPath,
-  } = promptResult;
+  } = prompt;
 
   show.creatingApp();
 
@@ -28,22 +27,18 @@ import * as show from './messages';
       frontend,
       tests,
       projectName,
-      verbose: false,
-      rootDir: path.resolve(__dirname, '../templates'),
+      templatesDir: path.resolve(__dirname, '../templates'),
       projectPath,
     });
   } catch (e) {
     console.error(e);
     createSuccess = false;
   }
-  if (install) {
-    await runDepsInstall(projectPath);
-  }
 
   if (createSuccess) {
+    install && await runDepsInstall(projectPath);
     show.setupSuccess(projectName, contract, frontend, install);
   } else {
-    show.setupFailed();
-    return;
+    return show.setupFailed();
   }
 })();
\ No newline at end of file
diff --git a/src/make.ts b/src/make.ts
index 417853c42..028ff419c 100644
--- a/src/make.ts
+++ b/src/make.ts
@@ -1,113 +1,71 @@
-import {CreateProjectParams} from './types';
+import { CreateContractParams, CreateGatewayParams } from './types';
 import * as show from './messages';
 import spawn from 'cross-spawn';
 import fs from 'fs';
-import {ncp} from 'ncp';
+import { ncp } from 'ncp';
 import path from 'path';
-import {buildPackageJson} from './package-json';
 
-export async function createProject({contract, frontend, tests, projectPath, projectName, verbose, rootDir}: CreateProjectParams): Promise<boolean> {
-  
-  // Create files in the project folder
-  await createFiles({contract, frontend, projectName, tests, projectPath, verbose, rootDir});
+export async function createProject({ contract, frontend, tests, projectPath, projectName, templatesDir }: CreateContractParams & CreateGatewayParams): Promise<boolean> {
 
-  // Create package.json
-  const packageJson = buildPackageJson({contract, frontend, tests, projectName});
-  fs.writeFileSync(path.resolve(projectPath, 'package.json'), Buffer.from(JSON.stringify(packageJson, null, 2)));
+  if(contract !== 'none'){
+    await createContract({ contract, tests, projectPath, projectName, templatesDir });
+  }else{
+    await createGateway({ frontend, projectPath, projectName, templatesDir });
+  }
 
   return true;
 }
 
-export async function createFiles({contract, frontend, tests, projectPath, verbose, rootDir}: CreateProjectParams) {
-  // skip build artifacts and symlinks
-  const skip = ['.cache', 'dist', 'out', 'node_modules'];
+async function createContract({ contract, tests, projectPath, projectName, templatesDir }: CreateContractParams) {
+  // contract folder
+  const sourceContractDir = path.resolve(templatesDir, 'contracts', contract);
+  const targetContractDir = projectPath;
+  fs.mkdirSync(targetContractDir, { recursive: true });
+  await copyDir(sourceContractDir, targetContractDir);
 
-  // copy frontend
-  if (frontend !== 'none') {
-    const sourceFrontendDir = path.resolve(`${rootDir}/frontend/${frontend}`);
-    const targetFrontendDir = path.resolve(`${projectPath}/frontend`);
-    fs.mkdirSync(targetFrontendDir, { recursive: true });
-    await copyDir(sourceFrontendDir, targetFrontendDir, {verbose, skip: skip.map(f => path.join(sourceFrontendDir, f))});
-  }
+  // copy sandbox-test dir
+  const targetTestDir = path.resolve(projectPath, `sandbox-${tests}`);
+  const sourceTestDir = path.resolve(`${templatesDir}/sandbox-tests/sandbox-${tests}`);
 
-  // shared files
-  const sourceSharedDir = path.resolve(rootDir, 'shared');
-  await copyDir(sourceSharedDir, projectPath, {verbose, skip: skip.map(f => path.join(sourceSharedDir, f))});
+  fs.mkdirSync(targetTestDir);
+  await copyDir(sourceTestDir, targetTestDir);
 
-  // copy contract files
-  if(contract !== 'none') {
-    const sourceContractDir = path.resolve(rootDir, 'contracts', contract);
-    const targetContractDir = path.resolve(projectPath, 'contract');
-    fs.mkdirSync(targetContractDir, { recursive: true });
-    await copyDir(sourceContractDir, targetContractDir, {
-      verbose,
-      skip: skip.map(f => path.join(sourceContractDir, f))
-    });
-  }
-  // tests dir
-  if(contract !== 'none') {
-    const targetTestDir = path.resolve(projectPath, 'integration-tests');
-    fs.mkdirSync(targetTestDir, { recursive: true });
+  if (contract === 'rs'){
+    if (tests === 'rs') {
+      // leave only one test script
+      fs.unlinkSync(path.resolve(projectPath, 'test-ts.sh'));
+      fs.renameSync(path.resolve(projectPath, 'test-rs.sh'), path.resolve(projectPath, 'test.sh'));
 
-    // copy tests - shared files
-    const sourceTestSharedDir = path.resolve(`${rootDir}/integration-tests/${tests}-tests`);
-    await copyDir(sourceTestSharedDir, targetTestDir, {
-      verbose,
-      skip: skip.map(f => path.join(sourceTestSharedDir, f))
-    });
+      // add workspace to Cargo.toml
+      const cargoTomlPath = path.resolve(projectPath, 'Cargo.toml');
+      const cargoToml = fs.readFileSync(cargoTomlPath).toString();
+      const cargoTomlWithWorkspace = cargoToml + '\n[workspace]\nmembers = ["sandbox-rs"]';
+      fs.writeFileSync(cargoTomlPath, cargoTomlWithWorkspace);
+    }else{
+      // leave only one test script
+      fs.unlinkSync(path.resolve(projectPath, 'test-rs.sh'));
+      fs.renameSync(path.resolve(projectPath, 'test-ts.sh'), path.resolve(projectPath, 'test.sh'));
+    }
   }
-
-  // add .gitignore
-  await renameFile(`${projectPath}/template.gitignore`, `${projectPath}/.gitignore`);
 }
 
-export const renameFile = async function (oldPath: string, newPath: string) {
-  return new Promise<void>((resolve, reject) => {
-    fs.rename(oldPath, newPath, err => {
-      if (err) {
-        console.error(err);
-        reject(err);
-        return;
-      }
-      resolve();
-    });
-  });
-};
+async function createGateway({ frontend, projectPath, projectName, templatesDir }: CreateGatewayParams) {
+  const sourceFrontendDir = path.resolve(`${templatesDir}/frontend/${frontend}`);
+  const targetFrontendDir = path.resolve(`${projectPath}`);
+  fs.mkdirSync(targetFrontendDir, { recursive: true });
+  await copyDir(sourceFrontendDir, targetFrontendDir);
+}
 
 // Wrap `ncp` tool to wait for the copy to finish when using `await`
-// Allow passing `skip` variable to skip copying an array of filenames
-export function copyDir(source: string, dest: string, {skip, verbose}: {skip: string[], verbose: boolean}) {
+export function copyDir(source: string, dest: string) {
   return new Promise<void>((resolve, reject) => {
-    const copied: string[] = [];
-    const skipped: string[] = [];
-    const filter = skip && function(filename: string) {
-      const shouldCopy = !skip.find(f => filename.includes(f));
-      shouldCopy ? copied.push(filename) : skipped.push(filename);
-      return !skip.find(f => filename.includes(f));
-    };
-
-    ncp(source, dest, {filter}, err => {
-      if (err) {
-        reject(err);
-        return;
-      }
-
-      if (verbose) {
-        console.log('Copied:');
-        copied.forEach(f => console.log('  ' + f));
-        console.log('Skipped:');
-        skipped.forEach(f => console.log('  ' + f));
-      }
-
-      resolve();
-    });
+    ncp(source, dest, {  }, err => err? reject(err): resolve());
   });
 }
 
 export async function runDepsInstall(projectPath: string) {
   show.depsInstall();
-  const npmCommandArgs = ['install'];
-  await new Promise<void>((resolve, reject) => spawn('npm', npmCommandArgs, {
+  await new Promise<void>((resolve, reject) => spawn('npm', ['install'], {
     cwd: projectPath,
     stdio: 'inherit',
   }).on('close', (code: number) => {
diff --git a/src/messages.ts b/src/messages.ts
index 1e2d3c8a9..979e67e53 100644
--- a/src/messages.ts
+++ b/src/messages.ts
@@ -8,44 +8,52 @@ if (process.env.NEAR_NO_COLOR) {
 
 export const show = (...args: unknown[]) => console.log(...args);
 
-export const welcome = () => show(chalk`{blue ======================================================}
-👋 {bold {green Welcome to NEAR!}} Learn more: https://docs.near.org/
-🔧 Let's get your dApp ready.
+export const welcome = () => show(chalk`
 {blue ======================================================}
-(${trackingMessage})
-`);
+👋 {bold {green Welcome to Near!}} Learn more: https://docs.near.org/
+🔧 Let's get your project ready.
+{blue ======================================================}
+(${trackingMessage})`);
 
 export const setupFailed = () => show(chalk`{bold {red ==========================================}}
-{red ⛔️ There was a problem during NEAR project setup}.
+{red ⛔️ There was a problem during the project setup}.
 Please refer to https://github.com/near/create-near-app README to troubleshoot.
 Notice: some platforms aren't supported (yet).
 {bold {red ==========================================}}`);
 
-export const successContractToText = (contract: Contract) => contract === 'none' ? '' : chalk`with a smart contract in {bold ${contract === 'rust' ? 'Rust' : 'JavaScript'}}`;
-export const successFrontendToText = (frontend: Frontend) => frontend === 'none' ? '' : chalk` and a frontend template${frontend === 'gateway' ? chalk`{bold  in React.js}` : ''}`;
+export const successContractToText = (contract: Contract) => contract === 'none' ? '' : chalk`a smart contract in {bold ${contract === 'rs' ? 'Rust' : 'Typescript'}}`;
+export const successFrontendToText = (frontend: Frontend) => frontend === 'none' ? '' : chalk`a gateway using ${frontend === 'next' ? 'NextJS + React' : 'Vanilla-JS'}`;
 export const setupSuccess = (projectName: ProjectName, contract: Contract, frontend: Frontend, install: boolean) => show(chalk`
 {green ======================================================}
-✅  Success! Created '${projectName}'
-   ${successContractToText(contract)}${successFrontendToText(frontend)}.
-${contract === 'rust' ? chalk`🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}\n` : ''}
-  {bold {bgYellow {black Your next steps}}}:
+✅  Success! Created '${projectName}', ${successContractToText(contract)}${successFrontendToText(frontend)}.
+${contract === 'rs' ? chalk`🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}\n` : ''}
+{bold {bgYellow {black Next steps}}}:
+${contractInstructions(projectName, contract, install)}${gatewayInstructions(projectName, frontend, install)}`);
+
+export const contractInstructions = (projectName: ProjectName, contract: Contract, install: boolean) => contract === 'none' ? '' : chalk`
    - {inverse Navigate to your project}:
          {blue cd {bold ${projectName}}}
-   ${!install ? chalk`- {inverse Install all dependencies}
+${contract ==='ts' && !install ? chalk`   - {inverse Install all dependencies}
          {blue npm {bold install}}` : 'Then:'}
    - {inverse Build your contract}:
-         {blue npm {bold run build}}
-   - {inverse Test your contract} in NEAR SandBox:
-         {blue npm {bold test}}
+         ${contract === 'ts' ? chalk`{blue npm {bold run build}}` : chalk`{blue {bold ./build.sh}}`}
+   - {inverse Test your contract} in the Sandbox:
+         ${contract === 'ts' ? chalk`{blue npm {bold run test}}` : chalk`{blue {bold ./test.sh}}`}
    - {inverse Deploy your contract} to NEAR TestNet with a temporary dev account:
-         {blue npm {bold run deploy}}
-   ${frontend !== 'none' ? chalk`- {inverse Start your frontend}:
-         {blue npm {bold start}}\n` : ''}
-🧠 Read {bold {greenBright README.md}} to explore further.`);
+         ${contract === 'ts' ? chalk`{blue npm {bold run deploy}}` : chalk`{blue {bold ./deploy.sh}}`}
+🧠 Read {bold {greenBright README.md}} to explore further`;
+
+export const gatewayInstructions = (projectName: ProjectName, frontend: Frontend, install: boolean) => frontend === 'none' ? '' : chalk`
+   - {inverse Navigate to your project}:
+         {blue cd {bold ${projectName}}}
+${!install ? chalk`   - {inverse Install all dependencies}
+         {blue pnpm {bold install}}` : 'Then:'}
+   - {inverse Start your app}:
+         {blue pnpm {bold run dev}}`;
 
 export const argsError = () => show(chalk`{red Arguments error}
 Run {blue npx create-near-app} without arguments, or use:
-npx create-near-app <projectName> --contract rust|js --frontend react|vanilla|none --tests js|rust`);
+npx create-near-app <projectName> --frontend next|vanilla|none --contract rs|ts|none --tests rs|ts|none`);
 
 export const unsupportedNodeVersion = (supported: string) => show(chalk`{red We support node.js version ${supported} or later}`);
 
diff --git a/src/package-json.ts b/src/package-json.ts
deleted file mode 100644
index 8e1c0d139..000000000
--- a/src/package-json.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {Contract, CreateProjectParams, TestingFramework} from './types';
-
-type Entries = Record<string, unknown>;
-type PackageBuildParams = Pick<CreateProjectParams, 'contract' | 'frontend' | 'tests' | 'projectName'>;
-
-export function buildPackageJson({contract, frontend, tests, projectName}: PackageBuildParams): Entries {
-  const result = basePackage({
-    contract, frontend, tests, projectName,
-  });
-  return result;
-}
-
-function basePackage({contract, frontend, tests, projectName}: PackageBuildParams): Entries {
-  const hasFrontend = frontend !== 'none';
-  return {
-    'name': projectName,
-    'version': '1.0.0',
-    'license': '(MIT AND Apache-2.0)',
-    'scripts': {
-      ...startScript(hasFrontend),
-      ...deployScript(contract),
-      ...buildScript(hasFrontend),
-      ...buildContractScript(contract),
-      'test': 'npm run test:unit && npm run test:integration',
-      ...unitTestScripts(contract),
-      ...integrationTestScripts(contract, tests),
-      ...npmInstallScript(contract, hasFrontend, tests),
-    },
-    'devDependencies': {
-      'near-cli': '^3.3.0',
-    },
-    'dependencies': {}
-  };
-}
-
-const startScript = (hasFrontend: boolean): Entries => hasFrontend ? {
-  'start': 'cd frontend && npm run dev'
-} : {};
-
-const buildScript = (hasFrontend: boolean): Entries => hasFrontend ? {
-  'build': 'npm run build:contract && npm run build:web',
-  'build:web': 'cd frontend && npm run build',
-} : {
-  'build': 'npm run build:contract',
-};
-
-const buildContractScriptName = 'build:contract';
-
-const buildContractScript = (contract: Contract): Entries => {
-  switch (contract) {
-    case 'js':
-      return {
-        [buildContractScriptName]: 'cd contract && npm run build',
-      };
-    case 'rust':
-      return {
-        [buildContractScriptName]: 'cd contract && ./build.sh',
-      };
-    case 'none':
-      return {
-        [buildContractScriptName]: 'echo "No contract to build"',
-      };
-  }
-};
-
-const deployScript = (contract: Contract): Entries => {
-  switch (contract) {
-    case 'js':
-      return {
-        'deploy': 'cd contract && npm run deploy',
-      };
-    case 'rust':
-      return {
-        'deploy': 'cd contract && ./deploy.sh',
-      };
-    case 'none':
-      return {
-        'deploy': 'echo "No contract to deploy"',
-      };
-  }
-};
-
-const unitTestScripts = (contract: Contract): Entries => {
-  switch (contract) {
-    case 'js':
-      return {'test:unit': 'cd contract && npm test'};
-    case 'rust':
-      return {'test:unit': 'cd contract && cargo test'};
-    case 'none':
-      return {'test:unit': 'echo "No contract to test"'};
-  }  
-};
-
-const integrationTestScripts = (contract: Contract, tests: TestingFramework): Entries => {
-  if (contract === 'none') {
-    return {'test:integration': 'echo "No contract to test"'};
-  }
-
-  let wasm_path: String = '';
-  switch (contract) {
-    case 'js': wasm_path = 'contract/build/hello_near.wasm'; break;
-    case 'rust': wasm_path = 'contract/target/wasm32-unknown-unknown/release/hello_near.wasm'; break;
-  }
-
-  let run_test: String = '';
-  switch(tests){
-    case 'js': run_test = `npm test -- -- "./${wasm_path}"`; break;
-    case 'rust': run_test =`cargo run --example integration-tests "../${wasm_path}"`; break;
-  }
-
-  return {
-    'test:integration': `npm run ${buildContractScriptName} && cd integration-tests && ${run_test}`,
-  };
-};
-
-const npmInstallScript = (contract: Contract, hasFrontend: boolean, tests: TestingFramework): Entries => {
-  const frontend_install = hasFrontend? 'cd frontend && npm install && cd ..' : 'echo no frontend';
-  const test_install = (tests === 'js')? 'cd integration-tests && npm install && cd ..' : 'echo rs tests';
-
-  let contract_install = '';
-  switch (contract) {
-    case 'js':
-      contract_install = 'cd contract && npm install'; break;
-    case 'rust':
-      contract_install = 'echo rs contract'; break;
-    case 'none':
-      contract_install = 'echo no contract'; break;
-  }
-
-  return {
-    'postinstall': `${frontend_install} && ${test_install} && ${contract_install}`
-  };
-};
diff --git a/src/tracking.ts b/src/tracking.ts
index 9d3f7c194..fd95e2183 100644
--- a/src/tracking.ts
+++ b/src/tracking.ts
@@ -6,7 +6,7 @@ const MIXPANEL_TOKEN = 'df164f13212cbb0dfdae991da60e87f2';
 
 const tracker = mixpanel.init(MIXPANEL_TOKEN);
 
-export const trackingMessage = chalk`NEAR collects anonymous information on the commands used. No personal information that could identify you is shared`;
+export const trackingMessage = chalk`Near collects anonymous information on the commands used. No personal information that could identify you is shared`;
 
 // TODO: track different failures & install usage
 export const trackUsage = async (frontend: Frontend, contract: Contract) => {
diff --git a/src/types.ts b/src/types.ts
index b3dba64e9..bcbae450a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,9 +1,11 @@
-export type Contract = 'js' | 'rust' | 'none';
-export const CONTRACTS: Contract[] = ['js', 'rust'];
-export type Frontend = 'gateway' | 'vanilla' | 'none';
-export const FRONTENDS: Frontend[] = ['gateway', 'vanilla', 'none'];
-export type TestingFramework = 'rust' | 'js';
-export const TESTING_FRAMEWORKS: TestingFramework[] = ['rust', 'js'];
+export type Contract = 'ts' | 'rs' | 'none';
+export const CONTRACTS: Contract[] = ['ts', 'rs', 'none'];
+export type Frontend = 'next' | 'vanilla' | 'none';
+export const FRONTENDS: Frontend[] = ['next', 'vanilla', 'none'];
+export type TestingFramework = 'rs' | 'ts' | 'none';
+export const TESTING_FRAMEWORKS: TestingFramework[] = ['rs', 'ts', 'none'];
+export type App = 'contract' | 'gateway';
+export const APPS: App[] = ['contract', 'gateway'];
 export type ProjectName = string;
 export interface UserConfig {
   contract: Contract;
@@ -12,12 +14,18 @@ export interface UserConfig {
   tests: TestingFramework;
   install: boolean;
 }
-export type CreateProjectParams = {
+
+export type CreateContractParams = {
   contract: Contract,
-  frontend: Frontend,
   tests: TestingFramework,
   projectPath: string,
   projectName: ProjectName,
-  verbose: boolean,
-  rootDir: string,
+  templatesDir: string,
+}
+
+export type CreateGatewayParams = {
+  frontend: Frontend,
+  projectPath: string,
+  projectName: ProjectName,
+  templatesDir: string,
 }
\ No newline at end of file
diff --git a/src/user-input.ts b/src/user-input.ts
index ac53c83aa..bfa79d85f 100644
--- a/src/user-input.ts
+++ b/src/user-input.ts
@@ -1,4 +1,5 @@
 import {
+  App,
   Contract,
   CONTRACTS,
   Frontend,
@@ -9,35 +10,35 @@ import {
   UserConfig
 } from './types';
 import chalk from 'chalk';
-import prompt, {PromptObject} from 'prompts';
-import {program} from 'commander';
+import prompt, { PromptObject } from 'prompts';
+import { program } from 'commander';
 import * as show from './messages';
 import semver from 'semver';
-import {trackUsage} from './tracking';
+import { trackUsage } from './tracking';
 import fs from 'fs';
 
 export async function getUserArgs(): Promise<UserConfig> {
   program
     .argument('[projectName]')
-    .option('--contract <contract>')
-    .option('--frontend <frontend>')
-    .option('--tests <tests>')
-    .option('--install');
-
+    .option('--contract [ts|rs|none]')
+    .option('--frontend [next|vanilla|none]')
+    .option('--tests [rs|ts|none]')
+    .option('--install')
+    .addHelpText('after', 'You can create a frontend or a contract with tests');
 
   program.parse();
 
   const options = program.opts();
   const [projectName] = program.args;
-  const {contract, frontend, tests, install} = options;
-  return {contract, frontend, projectName, tests, install};
+  const { contract, frontend, tests, install } = options;
+  return { contract, frontend, projectName, tests, install };
 }
 
 export function validateUserArgs(args: UserConfig): 'error' | 'ok' | 'none' {
   if (args === null) {
     return 'error';
   }
-  const {projectName, contract, frontend, tests} = args;
+  const { projectName, contract, frontend, tests } = args;
   const hasAllOptions = contract !== undefined && frontend !== undefined;
   const hasPartialOptions = contract !== undefined || frontend !== undefined;
   const hasProjectName = projectName !== undefined;
@@ -57,125 +58,129 @@ export function validateUserArgs(args: UserConfig): 'error' | 'ok' | 'none' {
   }
 }
 
-type Choices<T> = {title: string, description?: string, value: T}[];
+type Choices<T> = { title: string, description?: string, value: T }[];
+
+const appChoices: Choices<App> = [
+  { title: 'A Near Smart Contract', description: 'A smart contract to be deployed in the Near Blockchain', value: 'contract' },
+  { title: 'A Near Gateway (Web App)', description: 'A multi-chain App that talks with Near contracts and Near components', value: 'gateway' },
+];
 const contractChoices: Choices<Contract> = [
-  {title: 'Yes, in TypeScript', description: 'Build a Near contract using javascript/typescript', value: 'js'},
-  {title: 'Yes, in Rust', description: 'Build a Near contract using Rust' , value: 'rust'},
-  {title: 'No', description: 'You are not building a Near smart contract' , value: 'none'},
+  { title: 'JS/TS Contract', description: 'A Near contract written in javascript/typescript', value: 'ts' },
+  { title: 'Rust Contract', description: 'A Near contract written in Rust', value: 'rs' },
 ];
 const testsChoices: Choices<TestingFramework> = [
-  {title: 'Tests written in Rust', value: 'rust'},
-  {title: 'Tests written in Javascript', value: 'js'},
+  { title: 'Tests written in Rust', value: 'rs' },
+  { title: 'Tests written in Typescript', value: 'ts' },
 ];
 const frontendChoices: Choices<Frontend> = [
-  {title: 'Composable web app (Gateway)' , description:'Leverage next.js and web3 components to create multi-chain apps', value: 'gateway'},
-  {title: 'Vanilla web app', description:'Interact with the Near blockchain using a simple web app' , value: 'vanilla'},
-  {title: 'No frontend', description:'Build a smart contract with no frontend', value: 'none'},
+  { title: 'NextJs + React', description: 'A composable app built using Next.js, React and Near components', value: 'next' },
+  { title: 'Vanilla JS', description: 'A framework-less web app with limited capabilities.', value: 'vanilla' },
 ];
-const userPrompts: PromptObject[] = [
-  {
-    type: 'select',
-    name: 'frontend',
-    message: 'Frontend: What kind of App are you building?',
-    choices: frontendChoices,
-  },
+
+const appPrompt: PromptObject = {
+  type: 'select',
+  name: 'app',
+  message: 'What do you want to build?',
+  choices: appChoices,
+};
+
+const frontendPrompt: PromptObject = {
+  type: 'select',
+  name: 'frontend',
+  message: 'Select a framework for your frontend (Gateway)',
+  choices: frontendChoices,
+};
+
+const contractPrompt: PromptObject[] = [
   {
     type: 'select',
     name: 'contract',
-    message: 'Contract: Are you building a NEAR contract?',
+    message: 'Select a smart contract template for your project',
     choices: contractChoices,
   },
   {
-    type: prev => prev === 'rust' ? 'select' : null,
+    type: prev => prev === 'rs' ? 'select' : null,
     name: 'tests',
     message: 'Sandbox Testing: Which language do you prefer to test your contract?',
     choices: testsChoices,
-  },
-  {
-    type: 'text',
-    name: 'projectName',
-    message: 'Name your project (this will create a directory with that name)',
-    initial: 'hello-near',
-  },
-  {
-    type: 'confirm',
-    name: 'install',
-    message: chalk`Run {bold {blue 'npm install'}} now?`,
-    initial: true,
-  },
+  }
 ];
 
-export async function getUserAnswers() {
-  const answers = await prompt(userPrompts);
-  if (!answers.tests) {
-    answers.tests = answers.contract !== 'rust' ? 'js' : 'rust';
+const namePrompts: PromptObject = {
+  type: 'text',
+  name: 'projectName',
+  message: 'Name your project (we will create a directory with that name)',
+  initial: 'hello-near',
+};
+
+const npmPrompt: PromptObject = {
+  type: 'confirm',
+  name: 'install',
+  message: chalk`Run {bold {blue 'npm install'}} now?`,
+  initial: true,
+};
+
+const promptUser = async (prompts: PromptObject | PromptObject[]): Promise<prompt.Answers<string>> => {
+  // Prompt, and exit if user cancels
+  return prompt(prompts, { onCancel: () => process.exit(0) });
+};
+
+export async function getUserAnswers(): Promise<UserConfig> {
+  // Either the user wants a gateway or a contract
+  const { app } = await promptUser(appPrompt);
+
+  if (app === 'gateway') {
+    // If gateway, ask for the framework to use
+    const { frontend, projectName, install } = await promptUser([frontendPrompt, namePrompts, npmPrompt]);
+    return { frontend, contract: 'none', tests: 'none', projectName, install };
+  } else {
+    // If contract, ask for the language for the contract and tests
+    let {contract, tests} = await promptUser(contractPrompt);
+    tests = contract === 'ts'? 'ts' : tests;
+    const { projectName } = await promptUser(namePrompts);
+    const install = contract === 'ts' ? (await promptUser(npmPrompt)).install as boolean : false;
+    return { frontend: 'none', contract, tests, projectName, install };
   }
-  return answers;
 }
 
-export async function showProjectNamePrompt() {
-  const [, , , projectName] = userPrompts;
-  const answers = await prompt([projectName]);
-  return answers;
-}
-
-export function userAnswersAreValid(answers: Partial<UserConfig>): answers is UserConfig {
-  const {contract, frontend, projectName, tests} = answers;
-  if ([contract, frontend, projectName, tests].includes(undefined)) {
-    return false;
-  } else {
-    return true;
+export async function promptAndGetConfig(): Promise<{ config: UserConfig, projectPath: string } | void> {
+  const supportedNodeVersion = require('../package.json').engines.node;
+  if (!semver.satisfies(process.version, supportedNodeVersion)) {
+    return show.unsupportedNodeVersion(supportedNodeVersion);
   }
-}
 
-export async function promptAndGetConfig(): Promise<{ config: UserConfig, projectPath: string, isFromPrompts: boolean } | null> {
-  let config: UserConfig | null = null;
-  let isFromPrompts = false;
-  // process cli args
-  const args = await getUserArgs();
-  const argsValid = validateUserArgs(args);
-  if (argsValid === 'error') {
-    show.argsError();
-    return null;
-  } else if (argsValid === 'ok') {
-    config = args as UserConfig;
+  if (process.platform === 'win32') {
+    return show.windowsWarning();
   }
 
-  show.welcome();
+  // process cli args
+  let args = await getUserArgs();
 
-  const nodeVersion = process.version;
-  const supportedNodeVersion = require('../package.json').engines.node;
-  if (!semver.satisfies(nodeVersion, supportedNodeVersion)) {
-    show.unsupportedNodeVersion(supportedNodeVersion);
-    // TODO: track unsupported versions
-    return null;
+  if( args.contract && (!args.tests || args.frontend) ){
+    return show.argsError();
   }
 
-  if (process.platform === 'win32') {
-    // TODO: track windows
-    show.windowsWarning();
-    return null;
+  if( args.frontend && (args.tests || args.contract) ){
+    return show.argsError();
   }
 
-  // Get user input
-  if (config === null) {
-    const userInput = await getUserAnswers();
-    isFromPrompts = true;
-    if (!userAnswersAreValid(userInput)) {
-      throw new Error(`Invalid prompt. ${JSON.stringify(userInput)}`);
-    }
-    config = userInput;
+  // If no args, prompt user
+  if( !args.contract && !args.frontend ){
+    show.welcome();
+    args = await getUserAnswers();
   }
-  const {frontend, contract} = config as UserConfig;
+
+  // track user input
+  const { frontend, contract } = args;
   trackUsage(frontend, contract);
 
-  let path = projectPath(config.projectName);
-  // If dir exists warn and exit
+  let path = projectPath(args.projectName);
+
   if (fs.existsSync(path)) {
-    show.directoryExists(path);
-    return null;
+    return show.directoryExists(path);
   }
-  return {config, projectPath: path, isFromPrompts};
+
+  return { config: args, projectPath: path };
 }
 
 export const projectPath = (projectName: ProjectName) => `${process.cwd()}/${projectName}`;
diff --git a/templates/contracts/js/build.sh b/templates/contracts/js/build.sh
deleted file mode 100755
index e3a278622..000000000
--- a/templates/contracts/js/build.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/sh
-
-echo ">> Building contract"
-
-near-sdk-js build src/contract.ts build/hello_near.wasm
diff --git a/templates/contracts/js/deploy.sh b/templates/contracts/js/deploy.sh
deleted file mode 100755
index 404cb2517..000000000
--- a/templates/contracts/js/deploy.sh
+++ /dev/null
@@ -1,18 +0,0 @@
-#!/bin/sh
-
-./build.sh
-
-if [ $? -ne 0 ]; then
-  echo ">> Error building contract"
-  exit 1
-fi
-
-echo ">> Deploying contract"
-
-# https://docs.near.org/tools/near-cli#near-dev-deploy
-near dev-deploy --wasmFile build/hello_near.wasm
-
-# if ../frontend folder exists, copy the env file there
-if [ -d "../frontend" ]; then
-    (echo ; cat ./neardev/dev-account.env) >> ../frontend/.env
-fi
\ No newline at end of file
diff --git a/templates/contracts/js/package.json b/templates/contracts/js/package.json
deleted file mode 100644
index 8c4dcdc85..000000000
--- a/templates/contracts/js/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "hello_near",
-  "version": "1.0.0",
-  "license": "(MIT AND Apache-2.0)",
-  "type": "module",
-  "scripts": {
-    "build": "./build.sh",
-    "deploy": "./deploy.sh",
-    "test": "echo use integration-tests"
-  },
-  "dependencies": {
-    "near-cli": "^3.4.2",
-    "near-sdk-js": "1.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^4.7.4",
-    "ts-morph": "^16.0.0"
-  }
-}
diff --git a/templates/contracts/rust/.cargo/config b/templates/contracts/rs/.cargo/config
similarity index 100%
rename from templates/contracts/rust/.cargo/config
rename to templates/contracts/rs/.cargo/config
diff --git a/templates/contracts/rust/.gitignore b/templates/contracts/rs/.gitignore
similarity index 100%
rename from templates/contracts/rust/.gitignore
rename to templates/contracts/rs/.gitignore
diff --git a/templates/contracts/rust/Cargo.toml b/templates/contracts/rs/Cargo.toml
similarity index 92%
rename from templates/contracts/rust/Cargo.toml
rename to templates/contracts/rs/Cargo.toml
index 23ac495ec..222ddd6de 100644
--- a/templates/contracts/rust/Cargo.toml
+++ b/templates/contracts/rs/Cargo.toml
@@ -18,6 +18,3 @@ lto = true
 debug = false
 panic = "abort"
 overflow-checks = true
-
-[workspace]
-members = []
diff --git a/templates/contracts/rust/README.md b/templates/contracts/rs/README.md
similarity index 71%
rename from templates/contracts/rust/README.md
rename to templates/contracts/rs/README.md
index 7b0ce0f7f..b8a2ed3a7 100644
--- a/templates/contracts/rust/README.md
+++ b/templates/contracts/rs/README.md
@@ -42,14 +42,23 @@ impl Contract {
 
 <br />
 
-## 1. Build and Deploy the Contract
-You can automatically compile and deploy the contract in the NEAR testnet by running:
+## 1. Build, Test and Deploy
+To build the contract you can execute the `./build.sh` script, which will in turn run:
 
 ```bash
-./deploy.sh
+rustup target add wasm32-unknown-unknown
+cargo build --target wasm32-unknown-unknown --release
 ```
 
-Once finished, check the `neardev/dev-account` file to find the address in which the contract was deployed:
+Then, run the `./deploy.sh` script, which will in turn run:
+
+```bash
+near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm
+```
+
+the command [`near dev-deploy`](https://docs.near.org/tools/near-cli#near-dev-deploy) automatically creates an account in the NEAR testnet, and deploys the compiled contract on it.
+
+Once finished, check the `./neardev/dev-account` file to find the address in which the contract was deployed:
 
 ```bash
 cat ./neardev/dev-account
@@ -74,7 +83,7 @@ near view <dev-account> get_greeting
 ## 3. Store a New Greeting
 `set_greeting` changes the contract's state, for which it is a `change` method.
 
-`Change` methods can only be invoked using a NEAR account, since the account needs to pay GAS for the transaction.
+`Change` methods can only be invoked using a NEAR account, since the account needs to pay GAS for the transaction. In this case, we are asking the account we created in step 1 to sign the transaction.
 
 ```bash
 # Use near-cli to set a new greeting
diff --git a/templates/contracts/rs/build.sh b/templates/contracts/rs/build.sh
new file mode 100755
index 000000000..243f2da61
--- /dev/null
+++ b/templates/contracts/rs/build.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+rustup target add wasm32-unknown-unknown
+cargo build --target wasm32-unknown-unknown --release
\ No newline at end of file
diff --git a/templates/contracts/rs/deploy.sh b/templates/contracts/rs/deploy.sh
new file mode 100755
index 000000000..3ebf84984
--- /dev/null
+++ b/templates/contracts/rs/deploy.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm
\ No newline at end of file
diff --git a/templates/contracts/rust/rust-toolchain.toml b/templates/contracts/rs/rust-toolchain.toml
similarity index 100%
rename from templates/contracts/rust/rust-toolchain.toml
rename to templates/contracts/rs/rust-toolchain.toml
diff --git a/templates/contracts/rust/src/lib.rs b/templates/contracts/rs/src/lib.rs
similarity index 88%
rename from templates/contracts/rust/src/lib.rs
rename to templates/contracts/rs/src/lib.rs
index f0b992738..afb9e74c0 100644
--- a/templates/contracts/rust/src/lib.rs
+++ b/templates/contracts/rs/src/lib.rs
@@ -1,9 +1,7 @@
 // Find all our documentation at https://docs.near.org
 use near_sdk::borsh::{self, BorshDeserialize, BorshSerialize};
-use near_sdk::{log, near_bindgen};
-
-// Define the default greeting
-const DEFAULT_GREETING: &str = "Hello";
+use near_sdk::env::log_str;
+use near_sdk::near_bindgen;
 
 // Define the contract structure
 #[near_bindgen]
@@ -15,7 +13,7 @@ pub struct Contract {
 // Define the default, which automatically initializes the contract
 impl Default for Contract {
     fn default() -> Self {
-        Self { greeting: DEFAULT_GREETING.to_string() }
+        Self { greeting: "Hello".to_string() }
     }
 }
 
@@ -29,7 +27,7 @@ impl Contract {
 
     // Public method - accepts a greeting, such as "howdy", and records it
     pub fn set_greeting(&mut self, greeting: String) {
-        log!("Saving greeting {}", greeting);
+        log_str(&format!("Saving greeting: {greeting}"));
         self.greeting = greeting;
     }
 }
diff --git a/templates/contracts/rs/test-rs.sh b/templates/contracts/rs/test-rs.sh
new file mode 100755
index 000000000..18014b597
--- /dev/null
+++ b/templates/contracts/rs/test-rs.sh
@@ -0,0 +1,9 @@
+#!/bin/sh
+
+# unit testing
+cargo test
+
+# sandbox testing
+./build.sh
+cd sandbox-rs
+cargo run --example sandbox "../target/wasm32-unknown-unknown/release/hello_near.wasm"
\ No newline at end of file
diff --git a/templates/contracts/rs/test-ts.sh b/templates/contracts/rs/test-ts.sh
new file mode 100755
index 000000000..6fb65c585
--- /dev/null
+++ b/templates/contracts/rs/test-ts.sh
@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# unit testing
+cargo test
+
+# sandbox testing
+./build.sh
+cd sandbox-ts
+npm i
+npm run test -- -- "../target/wasm32-unknown-unknown/release/hello_near.wasm"
\ No newline at end of file
diff --git a/templates/contracts/rust/build.sh b/templates/contracts/rust/build.sh
deleted file mode 100755
index 9bf74a26d..000000000
--- a/templates/contracts/rust/build.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-#!/bin/sh
-
-echo ">> Building contract"
-
-rustup target add wasm32-unknown-unknown
-cargo build --all --target wasm32-unknown-unknown --release
diff --git a/templates/contracts/rust/deploy.sh b/templates/contracts/rust/deploy.sh
deleted file mode 100755
index dbe0fe948..000000000
--- a/templates/contracts/rust/deploy.sh
+++ /dev/null
@@ -1,18 +0,0 @@
-#!/bin/sh
-
-./build.sh
-
-if [ $? -ne 0 ]; then
-  echo ">> Error building contract"
-  exit 1
-fi
-
-echo ">> Deploying contract"
-
-# https://docs.near.org/tools/near-cli#near-dev-deploy
-near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm
-
-# if ../frontend folder exists, copy the env file there
-if [ -d "../frontend" ]; then
-    (echo ; cat ./neardev/dev-account.env) >> ../frontend/.env
-fi
\ No newline at end of file
diff --git a/templates/contracts/js/.gitignore b/templates/contracts/ts/.gitignore
similarity index 100%
rename from templates/contracts/js/.gitignore
rename to templates/contracts/ts/.gitignore
diff --git a/templates/contracts/js/README.md b/templates/contracts/ts/README.md
similarity index 99%
rename from templates/contracts/js/README.md
rename to templates/contracts/ts/README.md
index a360f85b4..cdabf58dd 100644
--- a/templates/contracts/js/README.md
+++ b/templates/contracts/ts/README.md
@@ -34,6 +34,7 @@ class HelloNear {
 You can automatically compile and deploy the contract in the NEAR testnet by running:
 
 ```bash
+npm run build
 npm run deploy
 ```
 
diff --git a/templates/contracts/js/package-lock.json b/templates/contracts/ts/package-lock.json
similarity index 100%
rename from templates/contracts/js/package-lock.json
rename to templates/contracts/ts/package-lock.json
diff --git a/templates/contracts/ts/package.json b/templates/contracts/ts/package.json
new file mode 100644
index 000000000..77a0698aa
--- /dev/null
+++ b/templates/contracts/ts/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "hello_near",
+  "version": "1.0.0",
+  "license": "(MIT AND Apache-2.0)",
+  "type": "module",
+  "scripts": {
+    "build": "near-sdk-js build src/contract.ts build/hello_near.wasm",
+    "deploy": "near dev-deploy --wasmFile build/hello_near.wasm",
+    "test": "cd sandbox-ts && $npm_execpath run test -- -- ../build/hello_near.wasm",
+    "postinstall": "cd sandbox-ts && $npm_execpath i"
+  },
+  "dependencies": {
+    "near-cli": "^3.4.2",
+    "near-sdk-js": "1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "ts-morph": "^20.0.0"
+  }
+}
diff --git a/templates/contracts/js/src/contract.ts b/templates/contracts/ts/src/contract.ts
similarity index 100%
rename from templates/contracts/js/src/contract.ts
rename to templates/contracts/ts/src/contract.ts
diff --git a/templates/contracts/js/tsconfig.json b/templates/contracts/ts/tsconfig.json
similarity index 100%
rename from templates/contracts/js/tsconfig.json
rename to templates/contracts/ts/tsconfig.json
diff --git a/templates/frontend/gateway/.env b/templates/frontend/gateway/.env
deleted file mode 100644
index bee86de09..000000000
--- a/templates/frontend/gateway/.env
+++ /dev/null
@@ -1 +0,0 @@
-CONTRACT_NAME=hello.near-examples.near
\ No newline at end of file
diff --git a/templates/frontend/gateway/.nvmrc b/templates/frontend/gateway/.nvmrc
deleted file mode 100644
index 25bf17fc5..000000000
--- a/templates/frontend/gateway/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-18
\ No newline at end of file
diff --git a/templates/frontend/gateway/.prettierrc b/templates/frontend/gateway/.prettierrc
deleted file mode 100644
index 4c2dc1b1f..000000000
--- a/templates/frontend/gateway/.prettierrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "singleAttributePerLine": false,
-  "printWidth": 120
-}
\ No newline at end of file
diff --git a/templates/frontend/gateway/next.config.js b/templates/frontend/gateway/next.config.js
deleted file mode 100644
index 71d991284..000000000
--- a/templates/frontend/gateway/next.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  compiler: { styledComponents: true },
-  reactStrictMode: true,
-  redirects: async () => {
-    return [
-    ];
-  },
-  env: {
-    // adding CONTRACT_NAME as a public env variable
-    NEXT_PUBLIC_CONTRACT_NAME: process.env.CONTRACT_NAME,
-  }
-};
-
-module.exports = nextConfig;
\ No newline at end of file
diff --git a/templates/frontend/gateway/package.json b/templates/frontend/gateway/package.json
deleted file mode 100644
index 1b4b9e076..000000000
--- a/templates/frontend/gateway/package.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-    "name": "near-gateway",
-    "version": "1.0.0",
-    "private": true,
-    "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next dev",
-        "prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json}'",
-        "prettier:write": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json}'"
-    },
-    "dependencies": {
-        "@braintree/sanitize-url": "6.0.0",
-        "@keypom/selector": "1.2.3",
-        "@monaco-editor/react": "^4.4.6",
-        "@near-js/biometric-ed25519": "0.3.0",
-        "@near-wallet-selector/core": "8.5.1",
-        "@near-wallet-selector/here-wallet": "8.5.1",
-        "@near-wallet-selector/meteor-wallet": "8.5.1",
-        "@near-wallet-selector/modal-ui": "8.5.1",
-        "@near-wallet-selector/my-near-wallet": "8.5.1",
-        "@near-wallet-selector/near-wallet": "8.5.1",
-        "@near-wallet-selector/neth": "8.5.1",
-        "@near-wallet-selector/nightly": "8.5.1",
-        "@near-wallet-selector/sender": "8.5.1",
-        "@near-wallet-selector/welldone-wallet": "8.5.1",
-        "@radix-ui/react-accordion": "^1.1.1",
-        "@radix-ui/react-dropdown-menu": "^2.0.4",
-        "@radix-ui/react-navigation-menu": "^1.1.2",
-        "@radix-ui/react-toast": "^1.1.3",
-        "@types/node": "18.16.3",
-        "@types/react": "18.2.0",
-        "@types/react-dom": "18.2.1",
-        "@web3-onboard/core": "^2.20.2",
-        "@web3-onboard/injected-wallets": "^2.10.1",
-        "@web3-onboard/ledger": "^2.4.6",
-        "@web3-onboard/react": "^2.8.7",
-        "@web3-onboard/walletconnect": "^2.3.9",
-        "big.js": "^6.1.1",
-        "bootstrap": "^5.2.1",
-        "bootstrap-icons": "^1.9.0",
-        "classnames": "^2.3.2",
-        "eslint": "8.39.0",
-        "eslint-config-next": "13.3.4",
-        "firebase": "^9.19.1",
-        "iframe-resizer-react": "^1.1.0",
-        "local-storage": "^2.0.0",
-        "lodash": "^4.17.21",
-        "near-fastauth-wallet": "^0.0.8",
-        "near-social-vm": "github:NearSocial/VM#2.5.1",
-        "next": "13.3.4",
-        "prettier": "^2.7.1",
-        "react": "18.2.0",
-        "react-bootstrap": "^2.5.0",
-        "react-bootstrap-typeahead": "^6.1.2",
-        "react-dom": "18.2.0",
-        "react-hook-form": "^7.43.9",
-        "react-singleton-hook": "^3.1.1",
-        "remark": "^14.0.3",
-        "rudder-sdk-js": "^2.36.0",
-        "strip-markdown": "^5.0.1",
-        "styled-components": "^5.3.6",
-        "typescript": "5.0.4",
-        "zustand": "^4.3.7"
-    },
-    "devDependencies": {
-        "@types/big.js": "^6.1.6",
-        "@types/lodash": "^4.14.194",
-        "@types/styled-components": "^5.1.26",
-        "@typescript-eslint/eslint-plugin": "^5.59.2",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-simple-import-sort": "^10.0.0"
-    }
-}
diff --git a/templates/frontend/gateway/public/apple-touch-icon.png b/templates/frontend/gateway/public/apple-touch-icon.png
deleted file mode 100644
index 2189f415d..000000000
Binary files a/templates/frontend/gateway/public/apple-touch-icon.png and /dev/null differ
diff --git a/templates/frontend/gateway/public/bos-meta.png b/templates/frontend/gateway/public/bos-meta.png
deleted file mode 100644
index ee84d09e0..000000000
Binary files a/templates/frontend/gateway/public/bos-meta.png and /dev/null differ
diff --git a/templates/frontend/gateway/public/favicon.png b/templates/frontend/gateway/public/favicon.png
deleted file mode 100644
index abfae7c1d..000000000
Binary files a/templates/frontend/gateway/public/favicon.png and /dev/null differ
diff --git a/templates/frontend/gateway/public/fonts/FKGrotesk.woff2 b/templates/frontend/gateway/public/fonts/FKGrotesk.woff2
deleted file mode 100644
index ec97bcfc8..000000000
Binary files a/templates/frontend/gateway/public/fonts/FKGrotesk.woff2 and /dev/null differ
diff --git a/templates/frontend/gateway/public/fonts/Mona-Sans.woff2 b/templates/frontend/gateway/public/fonts/Mona-Sans.woff2
deleted file mode 100644
index 8208a5000..000000000
Binary files a/templates/frontend/gateway/public/fonts/Mona-Sans.woff2 and /dev/null differ
diff --git a/templates/frontend/gateway/public/logo192.png b/templates/frontend/gateway/public/logo192.png
deleted file mode 100644
index 7e5fcc65f..000000000
Binary files a/templates/frontend/gateway/public/logo192.png and /dev/null differ
diff --git a/templates/frontend/gateway/public/robots.txt b/templates/frontend/gateway/public/robots.txt
deleted file mode 100644
index 24c3915dc..000000000
--- a/templates/frontend/gateway/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-User-agent: *
-Sitemap: https://beta.near.org/sitemap.xml
-Sitemap: https://near.org/sitemap.xml
\ No newline at end of file
diff --git a/templates/frontend/gateway/public/site.webmanifest b/templates/frontend/gateway/public/site.webmanifest
deleted file mode 100644
index cbf188eac..000000000
--- a/templates/frontend/gateway/public/site.webmanifest
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "NEAR isn't just a Layer 1 blockchain — it's the platform for an Open Web.",
-  "short_name": "NEAR",
-  "icons": [],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}
diff --git a/templates/frontend/gateway/src/assets/images/near-icon.svg b/templates/frontend/gateway/src/assets/images/near-icon.svg
deleted file mode 100644
index ed33db6be..000000000
--- a/templates/frontend/gateway/src/assets/images/near-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5528 1.01528L12.3722 7.22222C12.3127 7.31161 12.2875 7.41954 12.3014 7.52604C12.3153 7.63254 12.3673 7.73042 12.4477 7.80156C12.5282 7.87271 12.6317 7.91231 12.7391 7.91305C12.8465 7.91378 12.9505 7.87559 13.0319 7.80556L17.1472 4.23611C17.1713 4.21453 17.2012 4.20045 17.2332 4.19557C17.2652 4.19068 17.2979 4.19522 17.3274 4.20862C17.3568 4.22203 17.3817 4.24371 17.3991 4.27104C17.4164 4.29836 17.4254 4.33014 17.425 4.3625V15.5375C17.425 15.5717 17.4144 15.6051 17.3948 15.6331C17.3752 15.6611 17.3474 15.6824 17.3152 15.6941C17.2831 15.7058 17.2481 15.7073 17.2151 15.6984C17.182 15.6895 17.1525 15.6707 17.1306 15.6444L4.69167 0.754167C4.49159 0.51791 4.24246 0.328063 3.9616 0.197824C3.68073 0.067585 3.37487 7.92977e-05 3.06528 7.36094e-08H2.63056C2.0655 7.36094e-08 1.52358 0.224469 1.12403 0.624025C0.724468 1.02358 0.5 1.5655 0.5 2.13056V17.8694C0.5 18.4345 0.724468 18.9764 1.12403 19.376C1.52358 19.7755 2.0655 20 2.63056 20C2.99488 20.0001 3.35316 19.9068 3.67119 19.7291C3.98922 19.5513 4.2564 19.2951 4.44722 18.9847L8.62778 12.7778C8.68732 12.6884 8.71248 12.5805 8.6986 12.474C8.68472 12.3675 8.63274 12.2696 8.55228 12.1984C8.47182 12.1273 8.36832 12.0877 8.26092 12.087C8.15352 12.0862 8.04948 12.1244 7.96806 12.1944L3.85278 15.7639C3.82866 15.7855 3.79878 15.7996 3.76679 15.8044C3.7348 15.8093 3.70208 15.8048 3.67263 15.7914C3.64317 15.778 3.61826 15.7563 3.60092 15.729C3.58358 15.7016 3.57458 15.6699 3.575 15.6375V4.45972C3.57501 4.42551 3.58555 4.39213 3.60519 4.36412C3.62483 4.3361 3.65261 4.31481 3.68477 4.30313C3.71693 4.29145 3.7519 4.28995 3.78494 4.29883C3.81797 4.30772 3.84748 4.32655 3.86944 4.35278L16.3069 19.2458C16.507 19.4821 16.7562 19.6719 17.037 19.8022C17.3179 19.9324 17.6237 19.9999 17.9333 20H18.3681C18.648 20.0002 18.9252 19.9452 19.1838 19.8382C19.4425 19.7312 19.6775 19.5743 19.8755 19.3765C20.0735 19.1786 20.2305 18.9437 20.3377 18.6851C20.4448 18.4265 20.5 18.1494 20.5 17.8694V2.13056C20.5 1.5655 20.2755 1.02358 19.876 0.624025C19.4764 0.224469 18.9345 7.36094e-08 18.3694 7.36094e-08C18.0051 -9.56524e-05 17.6468 0.093176 17.3288 0.270914C17.0108 0.448651 16.7436 0.704924 16.5528 1.01528Z" fill="#11181C"/>
-</svg>
diff --git a/templates/frontend/gateway/src/components/MetaTags.tsx b/templates/frontend/gateway/src/components/MetaTags.tsx
deleted file mode 100644
index a5c8bc5d3..000000000
--- a/templates/frontend/gateway/src/components/MetaTags.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Head from 'next/head';
-
-type Props = {
-  title: string;
-  description: string;
-  image?: string | null;
-};
-
-export function MetaTags(props: Props) {
-  return (
-    <Head>
-      <title>{props.title}</title>
-      <meta name="description" content={props.description} />
-      <meta property="og:title" content={props.title} />
-      <meta property="og:description" content={props.description} />
-      <meta property="og:type" content="website" />
-      <meta content={props.image || `${process.env.NEXT_PUBLIC_HOSTNAME}/bos-meta.png`} property="og:image" />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:site" content="@NEARProtocol" />
-    </Head>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/component/ComponentWrapperPage.tsx b/templates/frontend/gateway/src/components/component/ComponentWrapperPage.tsx
deleted file mode 100644
index 6103f4cf9..000000000
--- a/templates/frontend/gateway/src/components/component/ComponentWrapperPage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { VmComponent } from '@/components/vm/VmComponent';
-
-import { MetaTags } from '../MetaTags';
-
-type Props = {
-  componentProps?: Record<string, unknown>;
-  src: string;
-  meta?: {
-    title: string;
-    description: string;
-  };
-};
-
-export function ComponentWrapperPage(props: Props) {
-  return (
-    <>
-      {props.meta && <MetaTags {...props.meta} />}
-      <div
-        style={{
-          paddingTop: 'var(--body-top-padding)',
-        }}
-      >
-        <VmComponent src={props.src} props={props.componentProps} />
-      </div>
-    </>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/layouts/DefaultLayout.tsx b/templates/frontend/gateway/src/components/layouts/DefaultLayout.tsx
deleted file mode 100644
index 70b4ea7fc..000000000
--- a/templates/frontend/gateway/src/components/layouts/DefaultLayout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { Navigation } from '../navigation/Navigation';
-
-interface Props {
-  children: ReactNode;
-}
-
-export function DefaultLayout({ children }: Props) {
-  return (
-    <>
-      <Navigation />
-      {children}
-    </>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/layouts/SimpleLayout.tsx b/templates/frontend/gateway/src/components/layouts/SimpleLayout.tsx
deleted file mode 100644
index ba3f6056d..000000000
--- a/templates/frontend/gateway/src/components/layouts/SimpleLayout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-
-interface Props {
-  children: ReactNode;
-}
-
-export function SimpleLayout({ children }: Props) {
-  return <>{children}</>;
-}
diff --git a/templates/frontend/gateway/src/components/lib/Button/Button.tsx b/templates/frontend/gateway/src/components/lib/Button/Button.tsx
deleted file mode 100644
index 63b72a46f..000000000
--- a/templates/frontend/gateway/src/components/lib/Button/Button.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-
-type Fill = 'solid' | 'outline' | 'ghost';
-type Size = 'small' | 'default' | 'large';
-type Variant = 'primary' | 'secondary' | 'affirmative' | 'destructive';
-
-type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {
-  disabled?: boolean;
-  fill?: Fill;
-  href?: string;
-  icon?: string;
-  iconLeft?: string;
-  iconRight?: string;
-  label: string;
-  loading?: boolean;
-  size?: Size;
-  type?: 'button' | 'submit';
-  variant?: Variant;
-};
-
-type StyledProps = {
-  disabled?: boolean;
-  fill: Fill;
-  icon?: string;
-  loading?: boolean;
-  size: Size;
-  variant: Variant;
-};
-
-const variants: Record<Variant, any> = {
-  primary: {
-    outline: {
-      background: 'var(--sand1)',
-      border: 'var(--sand6)',
-      color: 'var(--violet8)',
-      iconColor: 'var(--violet9)',
-      hover: {
-        border: 'var(--violet6)',
-      },
-      focus: {
-        border: 'var(--violet9)',
-      },
-      active: {
-        background: 'var(--violet2)',
-        border: 'var(--violet7)',
-      },
-    },
-    solid: {
-      background: 'var(--sand12)',
-      border: 'var(--sand12)',
-      color: 'var(--sand1)',
-      iconColor: 'var(--sand9)',
-      hover: {
-        background: 'var(--sand11)',
-        border: 'var(--sand11)',
-      },
-      focus: {},
-      active: {},
-    },
-  },
-  secondary: {
-    outline: {
-      background: 'var(--sand1)',
-      border: 'var(--sand6)',
-      color: 'var(--sand12)',
-      iconColor: 'var(--sand10)',
-      hover: {
-        border: 'var(--sand8)',
-      },
-      focus: {
-        border: 'var(--violet8)',
-      },
-      active: {
-        background: 'var(--sand3)',
-        border: 'var(--sand8)',
-      },
-    },
-    solid: {
-      background: 'var(--sand3)',
-      border: 'var(--sand6)',
-      color: 'var(--sand12)',
-      iconColor: 'var(--sand11)',
-      hover: {
-        background: 'var(--sand4)',
-      },
-      focus: {
-        border: 'var(--violet8)',
-      },
-      active: {
-        background: 'var(--sand5)',
-      },
-    },
-  },
-  destructive: {
-    outline: {
-      background: 'var(--sand1)',
-      border: 'var(--sand6)',
-      color: 'var(--red8)',
-      iconColor: 'var(--red9)',
-      hover: {
-        border: 'var(--red6)',
-      },
-      focus: {
-        border: 'var(--violet8)',
-      },
-      active: {
-        background: 'var(--red2)',
-        border: 'var(--red7)',
-      },
-    },
-    solid: {
-      background: 'var(--red9)',
-      border: 'var(--red8)',
-      color: 'var(--red12)',
-      iconColor: 'var(--red11)',
-      hover: {
-        background: 'var(--red10)',
-      },
-      focus: {
-        border: 'var(--red11)',
-      },
-      active: {
-        background: 'var(--red8)',
-      },
-    },
-  },
-  affirmative: {
-    outline: {
-      background: 'var(--sand1)',
-      border: 'var(--sand6)',
-      color: 'var(--green11)',
-      iconColor: 'var(--green10)',
-      hover: {
-        border: 'var(--green9)',
-      },
-      focus: {
-        border: 'var(--violet8)',
-      },
-      active: {
-        background: 'var(--green2)',
-        border: 'var(--green8)',
-      },
-    },
-    solid: {
-      background: 'var(--green9)',
-      border: 'var(--green8)',
-      color: 'var(--green12)',
-      iconColor: 'var(--green11)',
-      hover: {
-        background: 'var(--green10)',
-      },
-      focus: {
-        border: 'var(--green11)',
-      },
-      active: {
-        background: 'var(--green8)',
-      },
-    },
-  },
-};
-variants.primary.ghost = {
-  ...variants.primary.outline,
-  border: 'hsla(0, 0%, 100%, 0)',
-  background: 'hsla(0, 0%, 100%, 0)',
-};
-variants.secondary.ghost = {
-  ...variants.secondary.outline,
-  border: 'hsla(0, 0%, 100%, 0)',
-  background: 'hsla(0, 0%, 100%, 0)',
-};
-variants.destructive.ghost = {
-  ...variants.destructive.outline,
-  border: 'hsla(0, 0%, 100%, 0)',
-  background: 'hsla(0, 0%, 100%, 0)',
-};
-variants.affirmative.ghost = {
-  ...variants.affirmative.outline,
-  border: 'hsla(0, 0%, 100%, 0)',
-  background: 'hsla(0, 0%, 100%, 0)',
-};
-
-const sizes: Record<Size, any> = {
-  small: {
-    font: 'var(--text-xs)',
-    gap: '6px',
-    height: '32px',
-    icon: '14px',
-    paddingX: '16px',
-  },
-  default: {
-    font: 'var(--text-s)',
-    gap: '8px',
-    height: '40px',
-    icon: '18px',
-    paddingX: '20px',
-  },
-  large: {
-    font: 'var(--text-base)',
-    gap: '8px',
-    height: '48px',
-    icon: '18px',
-    paddingX: '24px',
-  },
-};
-
-function returnColor(variant: Variant, fill: string, state: string, key: string) {
-  if (state === 'default') return variants[variant][fill][key];
-  return variants[variant][fill][state][key] || variants[variant][fill][key];
-}
-
-const StyledButton = styled.button<StyledProps>`
-  all: unset;
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: ${(p) => (p.icon ? sizes[p.size].height : undefined)};
-  height: ${(p) => sizes[p.size].height};
-  padding: ${(p) => (p.icon ? '0' : `0 ${sizes[p.size].paddingX}`)};
-  font: ${(p) => sizes[p.size].font};
-  font-weight: 600;
-  line-height: 1;
-  border-radius: 100px;
-  background: ${(p) => returnColor(p.variant, p.fill, 'default', 'background')};
-  color: ${(p) => returnColor(p.variant, p.fill, 'default', 'color')};
-  border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'default', 'border')};
-  box-shadow: 0 0 0 0px var(--violet4);
-  cursor: pointer;
-  transition: all 200ms;
-  text-decoration: none !important;
-
-  &:hover {
-    background: ${(p) => returnColor(p.variant, p.fill, 'hover', 'background')};
-    color: ${(p) => returnColor(p.variant, p.fill, 'hover', 'color')};
-    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'hover', 'border')};
-  }
-  &:focus {
-    background: ${(p) => returnColor(p.variant, p.fill, 'focus', 'background')};
-    color: ${(p) => returnColor(p.variant, p.fill, 'focus', 'color')};
-    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'focus', 'border')};
-    box-shadow: 0 0 0 4px var(--violet4);
-  }
-  &:active {
-    background: ${(p) => returnColor(p.variant, p.fill, 'active', 'background')};
-    color: ${(p) => returnColor(p.variant, p.fill, 'active', 'color')};
-    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'active', 'border')};
-  }
-
-  ${(p) =>
-    p.loading &&
-    `
-        pointer-events: none;
-      `}
-
-  ${(p) =>
-    p.disabled &&
-    `
-        opacity: 1;
-        background: ${p.fill === 'ghost' ? 'hsla(0, 0%, 100%, 0)' : 'var(--sand3)'};
-        border-color: var(--sand3);
-        color: var(--sand8);
-        pointer-events: none;
-    
-        i {
-          color: var(--sand8) !important;
-        }
-      `}
-`;
-
-const Inner = styled.span<StyledProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${(p) => sizes[p.size].gap};
-
-  i {
-    font-size: ${(p) => sizes[p.size].icon};
-    line-height: ${(p) => sizes[p.size].icon};
-    color: ${(p) => (p.icon ? undefined : returnColor(p.variant, p.fill, 'default', 'iconColor'))};
-  }
-
-  ${(p) =>
-    p.loading &&
-    `
-        opacity: 0;
-      `}
-`;
-
-const Label = styled.span``;
-
-const Spinner = styled.i<StyledProps>`
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  margin: calc(${(p) => sizes[p.size].icon} * -0.5) auto 0;
-  width: ${(p) => sizes[p.size].icon};
-  height: ${(p) => sizes[p.size].icon};
-  font-size: ${(p) => sizes[p.size].icon};
-  line-height: ${(p) => sizes[p.size].icon};
-  animation: spin 800ms infinite linear;
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-export const Button = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      disabled,
-      fill = 'solid',
-      href,
-      icon,
-      iconLeft,
-      iconRight,
-      label,
-      loading,
-      size = 'default',
-      type = 'button',
-      variant = 'primary',
-      ...forwardedProps
-    },
-    ref,
-  ) => {
-    const conditionalAttributes: Record<string, unknown> = href
-      ? {
-        as: 'a',
-        href,
-      }
-      : {
-        type,
-        disabled: disabled || loading,
-      };
-
-    if (icon) {
-      conditionalAttributes['aria-label'] = label;
-    }
-
-    const styledProps: StyledProps = {
-      disabled,
-      fill,
-      icon,
-      loading,
-      size,
-      variant,
-    };
-
-    return (
-      <StyledButton ref={ref} {...styledProps} {...conditionalAttributes} {...forwardedProps}>
-        <>
-          {loading && <Spinner {...styledProps} className="ph-bold ph-circle-notch" />}
-          <Inner {...styledProps}>
-            {icon ? (
-              <i className={icon} />
-            ) : (
-              <>
-                {iconLeft && <i className={iconLeft} />}
-                <Label>{label}</Label>
-                {iconRight && <i className={iconRight} />}
-              </>
-            )}
-          </Inner>
-        </>
-      </StyledButton>
-    );
-  },
-);
-
-Button.displayName = 'Button';
diff --git a/templates/frontend/gateway/src/components/lib/Button/index.tsx b/templates/frontend/gateway/src/components/lib/Button/index.tsx
deleted file mode 100644
index 8b166a86e..000000000
--- a/templates/frontend/gateway/src/components/lib/Button/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Button';
diff --git a/templates/frontend/gateway/src/components/lib/Spinner/Spinner.tsx b/templates/frontend/gateway/src/components/lib/Spinner/Spinner.tsx
deleted file mode 100644
index 6f9ef921e..000000000
--- a/templates/frontend/gateway/src/components/lib/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.span`
-  display: inline-flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-  animation: spin 1200ms infinite linear;
-
-  i {
-    color: currentColor;
-    font-size: 16px;
-    line-height: 16px;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-export function Spinner() {
-  return (
-    <Wrapper>
-      <i className="ph ph-spinner"></i>
-    </Wrapper>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/lib/Spinner/index.ts b/templates/frontend/gateway/src/components/lib/Spinner/index.ts
deleted file mode 100644
index b259397be..000000000
--- a/templates/frontend/gateway/src/components/lib/Spinner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Spinner';
diff --git a/templates/frontend/gateway/src/components/lib/Text/Text.tsx b/templates/frontend/gateway/src/components/lib/Text/Text.tsx
deleted file mode 100644
index af8921f73..000000000
--- a/templates/frontend/gateway/src/components/lib/Text/Text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-type Props = {
-  color?: string;
-  font?: string;
-  weight?: string;
-};
-
-export const Text = styled.p<Props>`
-  font: ${(p) => (p.font ? `var(--${p.font})` : 'var(--text-base)')};
-  font-weight: ${(p) => p.weight ?? '400'};
-  color: ${(p) => (p.color ? `var(--${p.color})` : 'currentColor')};
-  margin: 0;
-`;
diff --git a/templates/frontend/gateway/src/components/lib/Text/index.tsx b/templates/frontend/gateway/src/components/lib/Text/index.tsx
deleted file mode 100644
index b0c76af0b..000000000
--- a/templates/frontend/gateway/src/components/lib/Text/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Text';
diff --git a/templates/frontend/gateway/src/components/lib/Toast/README.md b/templates/frontend/gateway/src/components/lib/Toast/README.md
deleted file mode 100644
index d8dabeb73..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/README.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# Toast
-
-Implemented via Radix primitives: https://www.radix-ui.com/docs/primitives/components/toast
-
-_If the current props and Stitches style overrides aren't enough to cover your use case, feel free to implement your own component using the Radix primitives directly._
-
-## Example
-
-Using the `openToast` API allows you to easily open a toast from any context:
-
-```tsx
-import { openToast } from '@/components/lib/Toast';
-
-...
-
-<Button
-  onClick={() =>
-    openToast({
-      type: 'ERROR',
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-    })
-  }
->
-  Open a Toast
-</Button>
-```
-
-You can pass other options too:
-
-```tsx
-<Button
-  onClick={() =>
-    openToast({
-      type: 'SUCCESS', // SUCCESS | INFO | ERROR
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-      icon: 'ph-bold ph-pizza', // https://phosphoricons.com/
-      duration: 20000, // milliseconds (pass Infinity to disable auto close)
-    })
-  }
->
-  Open a Toast
-</Button>
-```
-
-## Deduplicate
-
-If you need to ensure only a single instance of a toast is ever displayed at once, you can deduplicate by passing a unique `id` key. If a toast with the passed `id` is currently open, a new toast will not be opened:
-
-```tsx
-<Button
-  onClick={() =>
-    openToast({
-      id: 'my-unique-toast',
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-    })
-  }
->
-  Deduplicated Toast
-</Button>
-```
-
-## Custom Toast
-
-If you need something more custom, you can render a custom toast using `lib/Toast/Toaster.tsx` as an example like so:
-
-```tsx
-import * as Toast from '@/components/lib/Toast';
-
-...
-
-<Toast.Provider duration={5000}>
-  <Toast.Root open={isOpen} onOpenChange={setIsOpen}>
-    <Toast.Title>My Title</Toast.Title>
-    <Toast.Description>My Description</Toast.Description>
-    <Toast.CloseButton />
-  </Toast.Root>
-
-  <Toast.Viewport />
-</Toast.Provider>
-```
diff --git a/templates/frontend/gateway/src/components/lib/Toast/Toast.tsx b/templates/frontend/gateway/src/components/lib/Toast/Toast.tsx
deleted file mode 100644
index a65a25cb6..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/Toast.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import type { ComponentProps } from 'react';
-import { forwardRef } from 'react';
-
-import * as S from './styles';
-
-type CloseButtonProps = ComponentProps<typeof S.CloseButton>;
-
-export const Root = S.Root;
-export const Title = S.Title;
-export const Description = S.Description;
-export const Content = S.Content;
-export const Viewport = S.Viewport;
-export const Action = ToastPrimitive.Action;
-export const Provider = ToastPrimitive.Provider;
-export const Close = ToastPrimitive.Close;
-
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((props, ref) => {
-  return (
-    <S.CloseButton aria-label="Close" ref={ref} {...props}>
-      <i className="ph-bold ph-x"></i>
-    </S.CloseButton>
-  );
-});
-CloseButton.displayName = 'CloseButton';
diff --git a/templates/frontend/gateway/src/components/lib/Toast/Toaster.tsx b/templates/frontend/gateway/src/components/lib/Toast/Toaster.tsx
deleted file mode 100644
index c3365a1d5..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/Toaster.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Toast, ToastType } from './store';
-import { useToasterStore } from './store';
-import * as T from './Toast';
-
-export function Toaster() {
-  const toaster = useToasterStore();
-
-  const iconsByType: Record<ToastType, string> = {
-    INFO: 'ph ph-info',
-    WARNING: 'ph ph-warning',
-    ERROR: 'ph ph-warning-circle',
-    SUCCESS: 'ph ph-check-circle',
-  };
-
-  function onOpenChange(open: boolean, toast: Toast) {
-    if (!open) toaster.close(toast);
-  }
-
-  return (
-    <T.Provider duration={5000}>
-      {toaster.toasts.map((toast) => {
-        const type = toast.type || 'INFO';
-        const icon = toast.icon || iconsByType[type];
-
-        return (
-          <T.Root
-            data-type={type}
-            duration={toast.duration}
-            open={toast.isOpen}
-            onOpenChange={(open) => onOpenChange(open, toast)}
-            key={toast.id}
-          >
-            <i className={icon} />
-
-            <T.Content>
-              <T.Title>{toast.title}</T.Title>
-              {toast.description && <T.Description>{toast.description}</T.Description>}
-            </T.Content>
-
-            <T.CloseButton data-type={type} />
-          </T.Root>
-        );
-      })}
-
-      <T.Viewport />
-    </T.Provider>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/lib/Toast/api.ts b/templates/frontend/gateway/src/components/lib/Toast/api.ts
deleted file mode 100644
index 334dcbe8c..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/api.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { OpenToastOptions } from './store';
-import { useToasterStore } from './store';
-
-export function openToast(options: OpenToastOptions) {
-  useToasterStore.getState().open(options);
-}
diff --git a/templates/frontend/gateway/src/components/lib/Toast/index.ts b/templates/frontend/gateway/src/components/lib/Toast/index.ts
deleted file mode 100644
index 17c87006d..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './api';
-export * from './Toast';
-export * from './Toaster';
diff --git a/templates/frontend/gateway/src/components/lib/Toast/store.ts b/templates/frontend/gateway/src/components/lib/Toast/store.ts
deleted file mode 100644
index d52a77ea9..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/store.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { create } from 'zustand';
-
-export type ToastType = 'INFO' | 'ERROR' | 'SUCCESS' | 'WARNING';
-
-export interface Toast {
-  description?: string;
-  duration?: number;
-  icon?: string;
-  id: string;
-  isOpen: boolean;
-  title: string;
-  type?: ToastType;
-}
-
-export interface OpenToastOptions {
-  description?: string;
-  duration?: number;
-  icon?: string;
-  id?: string;
-  title: string;
-  type?: ToastType;
-}
-
-interface ToasterStore {
-  toasts: Toast[];
-  close: (toast: Toast) => void;
-  destroy: (toast: Toast) => void;
-  open: (options: OpenToastOptions) => void;
-}
-
-export const useToasterStore = create<ToasterStore>((set) => ({
-  toasts: [],
-
-  close: (toast) => {
-    set((state) => {
-      const toasts = state.toasts.map((t) => {
-        if (t.id === toast.id) {
-          return {
-            ...t,
-            isOpen: false,
-          };
-        }
-
-        return t;
-      });
-
-      setTimeout(() => {
-        state.destroy(toast);
-      }, 5000);
-
-      return {
-        toasts,
-      };
-    });
-  },
-
-  destroy: (toast) => {
-    set((state) => {
-      const toasts = state.toasts.filter((t) => t.id !== toast.id);
-
-      return {
-        toasts,
-      };
-    });
-  },
-
-  open: (options) => {
-    const newToast = {
-      ...options,
-      isOpen: true,
-      id: options.id || Date.now().toString(),
-      type: options.type || 'INFO',
-    };
-
-    set((state) => {
-      const toasts = state.toasts.filter((t) => t.id !== newToast.id);
-
-      return {
-        toasts: [...toasts, newToast],
-      };
-    });
-  },
-}));
diff --git a/templates/frontend/gateway/src/components/lib/Toast/styles.ts b/templates/frontend/gateway/src/components/lib/Toast/styles.ts
deleted file mode 100644
index db957642d..000000000
--- a/templates/frontend/gateway/src/components/lib/Toast/styles.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import styled, { keyframes } from 'styled-components';
-
-const hideAnimation = keyframes`
-  from { opacity: 1; }
-  to { opacity: 0; }
-`;
-
-const slideInAnimation = keyframes`
-  from { transform: translateX(calc(100% + 1rem)) }
-  to { transform: translateX(0) }
-`;
-
-const swipeOutAnimation = keyframes`
-  from { transform: translateX(var(--radix-toast-swipe-end-x)) }
-  to { transform: translateX(calc(100% + 1rem)) }
-`;
-
-export const Viewport = styled(ToastPrimitive.Viewport)`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-  width: 100%;
-  max-height: 100vh;
-  max-width: 20rem;
-  z-index: 2147483632;
-`;
-
-export const Root = styled(ToastPrimitive.Root)`
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  background: #000;
-  color: #fff;
-  border-radius: 1rem;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-  padding: 1rem;
-
-  i {
-    font-size: 1.4rem;
-  }
-
-  &[data-state='open'] {
-    animation: ${slideInAnimation} 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  &[data-state='closed'] {
-    animation: ${hideAnimation} 200ms ease-in forwards;
-  }
-  &[data-swipe='move'] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
-  }
-  &[data-swipe='cancel'] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-  &[data-swipe='end'] {
-    animation: ${swipeOutAnimation} 100ms ease-out forwards;
-  }
-
-  &[data-type='ERROR'] {
-    background: var(--red11);
-  }
-  &[data-type='SUCCESS'] {
-    background: var(--green11);
-  }
-  &[data-type='INFO'] {
-    background: var(--sand12);
-  }
-  &[data-type='WARNING'] {
-    background: var(--amber4);
-    color: var(--amber12);
-  }
-`;
-
-export const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0rem;
-`;
-
-export const Title = styled(ToastPrimitive.Title)`
-  font: 450 16px/1.5 'Mona Sans', sans-serif;
-  color: currentColor;
-`;
-
-export const Description = styled(ToastPrimitive.Description)`
-  font: 450 14px/1.5 'Mona Sans', sans-serif;
-  color: currentColor;
-  opacity: 0.8;
-`;
-
-export const CloseButton = styled(ToastPrimitive.Close)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: 100%;
-  cursor: pointer;
-  color: #fff;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  background: none;
-  transition: all 200ms;
-
-  &:hover {
-    border-color: rgba(255, 255, 255, 0.5);
-  }
-
-  &:focus {
-    border-color: rgba(255, 255, 255, 1);
-  }
-
-  i {
-    font-size: 0.8rem;
-  }
-
-  &[data-type='WARNING'] {
-    color: var(--amber12);
-  }
-`;
diff --git a/templates/frontend/gateway/src/components/navigation/Navigation.tsx b/templates/frontend/gateway/src/components/navigation/Navigation.tsx
deleted file mode 100644
index c52546b4e..000000000
--- a/templates/frontend/gateway/src/components/navigation/Navigation.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { DesktopNavigation } from './desktop/DesktopNavigation';
-import { MobileNavigation } from './mobile/MobileNavigation';
-
-export const Navigation = () => {
-  const [matches, setMatches] = useState(true);
-
-  useEffect(() => {
-    setMatches(window.matchMedia('(min-width: 1024px)').matches);
-  }, []);
-
-  useEffect(() => {
-    window.matchMedia('(min-width: 1024px)').addEventListener('change', (e) => setMatches(e.matches));
-  }, []);
-
-  return (
-    <>
-      {matches && <DesktopNavigation />}
-      {!matches && <MobileNavigation />}
-    </>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/UserDropdownMenu.tsx b/templates/frontend/gateway/src/components/navigation/UserDropdownMenu.tsx
deleted file mode 100644
index e202971b0..000000000
--- a/templates/frontend/gateway/src/components/navigation/UserDropdownMenu.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import styled from 'styled-components';
-
-import { VmComponent } from '@/components/vm/VmComponent';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useAuthStore } from '@/stores/auth';
-
-const Wrapper = styled.div`
-  > button {
-    all: unset;
-    display: flex;
-    align-items: center;
-    border-radius: 50px;
-    background-color: var(--sand12);
-    padding: 4px;
-    transition: all 200ms;
-
-    &:hover {
-      background-color: var(--black);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px var(--violet4);
-    }
-  }
-  .d-inline-block {
-    width: unset !important;
-    height: unset !important;
-    img {
-      border-radius: 50% !important;
-      width: 38px !important;
-      height: 38px !important;
-    }
-  }
-
-  i {
-    color: #a1a09a;
-    margin: 0 5px 0 0;
-  }
-
-  .profile-info {
-    margin: 0 8px;
-    line-height: normal;
-    max-width: 110px;
-    font-size: 12px;
-
-    .profile-name,
-    .profile-username {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .profile-name {
-      color: white;
-    }
-    .profile-username {
-      color: #a1a09a;
-    }
-  }
-
-  .DropdownMenuContent {
-    background-color: #161615;
-    border-radius: 6px;
-    margin-top: 11px;
-    padding: 12px;
-    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-    animation-duration: 600ms;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    will-change: transform, opacity;
-    z-index: 10000000;
-  }
-  .DropdownMenuContent[data-side='top'] {
-    animation-name: slideDownAndFade;
-  }
-  .DropdownMenuContent[data-side='right'] {
-    animation-name: slideLeftAndFade;
-  }
-  .DropdownMenuContent[data-side='bottom'] {
-    animation-name: slideUpAndFade;
-  }
-  .DropdownMenuContent[data-side='left'] {
-    animation-name: slideRightAndFade;
-  }
-
-  .DropdownMenuItem {
-    all: unset;
-    font-size: 13px;
-    line-height: 1;
-    color: #9ba1a6;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    position: relative;
-    user-select: none;
-    outline: none;
-  }
-
-  .DropdownMenuItem:hover {
-    color: white;
-    cursor: pointer;
-  }
-
-  .DropdownMenuItem i {
-    font-size: 20px;
-    margin-right: 10px;
-  }
-
-  @keyframes slideUpAndFade {
-    from {
-      opacity: 0;
-      transform: translateY(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slideRightAndFade {
-    from {
-      opacity: 0;
-      transform: translateX(-2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideDownAndFade {
-    from {
-      opacity: 0;
-      transform: translateY(-2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slideLeftAndFade {
-    from {
-      opacity: 0;
-      transform: translateX(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @media (max-width: 800px) {
-    .profile-info,
-    .ph {
-      display: none;
-    }
-
-    > button {
-      background: var(--sand6);
-      padding: 1px;
-    }
-
-    .d-inline-block {
-      img {
-        width: 43px !important;
-        height: 43px !important;
-      }
-    }
-  }
-`;
-
-export const UserDropdownMenu = () => {
-  const accountId = useAuthStore((store) => store.accountId);
-  const logOut = useAuthStore((store) => store.logOut);
-  const components = useBosComponents();
-
-  return (
-    <Wrapper>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <VmComponent
-            src={components.UI.profileImage}
-            props={{
-              accountId,
-              className: 'd-inline-block',
-            }}
-          />
-          <div className="profile-info">
-            <div className="profile-name">
-              <VmComponent src={components.UI.profileName} />
-            </div>
-            <div className="profile-username">{accountId}</div>
-          </div>
-          <i className="ph ph-caret-down"></i>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Content className="DropdownMenuContent" sideOffset={-5}>
-          <DropdownMenu.Item className="DropdownMenuItem" onClick={() => logOut()}>
-            <i className="ph-duotone ph-sign-out"></i>
-            Sign out
-          </DropdownMenu.Item>
-
-          <DropdownMenu.Arrow style={{ fill: '#161615' }} />
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Wrapper>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/desktop/DesktopNavigation.tsx b/templates/frontend/gateway/src/components/navigation/desktop/DesktopNavigation.tsx
deleted file mode 100644
index b4215f71f..000000000
--- a/templates/frontend/gateway/src/components/navigation/desktop/DesktopNavigation.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { useAuthStore } from '@/stores/auth';
-
-import NearLogo from '../icons/near-icon.svg';
-import { UserDropdownMenu } from '../UserDropdownMenu';
-import { MainNavigationMenu } from './MainNavigationMenu';
-
-const Wrapper = styled.div<{
-  scrolled?: boolean;
-}>`
-  --nav-height: 75px;
-  z-index: 1000;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  height: var(--nav-height);
-  box-shadow: 0 1px 0 var(--sand6);
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  margin: 0 auto;
-`;
-
-const Logo = styled.a`
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  transition: all 200ms;
-  border-radius: 4px;
-
-  &:focus {
-    outline: 2px solid var(--violet4);
-    outline-offset: 0.3rem;
-  }
-
-  img {
-    width: 110px;
-  }
-`;
-
-const Actions = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  position: relative;
-  z-index: 10;
-  gap: 0.5rem;
-`;
-
-export const DesktopNavigation = () => {
-  const [scrolled, setScrolled] = useState(false);
-  const signedIn = useAuthStore((store) => store.signedIn);
-  const requestSignInWithWallet = useAuthStore((store) => store.requestSignInWithWallet);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 0) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  return (
-    <>
-
-      <Wrapper scrolled={scrolled}>
-        <Container className="container-xl">
-          <Link href="/" passHref legacyBehavior>
-            <Logo>
-              <Image priority src={NearLogo} alt="NEAR" />
-            </Logo>
-          </Link>
-
-          <MainNavigationMenu />
-
-          <Actions>
-            {signedIn ? (
-              <>
-                <UserDropdownMenu />
-              </>
-            ) : (
-              <>
-                <Button label="Sign In" variant="secondary" onClick={requestSignInWithWallet} />
-              </>
-            )}
-          </Actions>
-        </Container>
-      </Wrapper>
-    </>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/desktop/MainNavigationMenu.tsx b/templates/frontend/gateway/src/components/navigation/desktop/MainNavigationMenu.tsx
deleted file mode 100644
index 13d70c7de..000000000
--- a/templates/frontend/gateway/src/components/navigation/desktop/MainNavigationMenu.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import Link from 'next/link';
-import styled from 'styled-components';
-
-import { navigationCategories } from '../navigation-categories';
-
-const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  z-index: 1;
-  flex-grow: 1;
-  padding: 0 1rem;
-  height: var(--nav-height);
-
-  @media (min-width: 1145px) {
-    // This center aligns the nav items in the center of the viewport on larger screens
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    max-width: min-content;
-  }
-`;
-
-const NavRoot = styled(NavigationMenu.Root)`
-  height: 100%;
-
-  > div {
-    height: 100%;
-  }
-`;
-
-const NavList = styled(NavigationMenu.List)`
-  display: flex;
-  justify-content: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-`;
-
-const NavItem = styled(NavigationMenu.Item)`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 100%;
-`;
-
-const NavTrigger = styled(NavigationMenu.Trigger)`
-  all: unset;
-  font: var(--text-s);
-  color: var(--sand12);
-  font-weight: 600;
-  padding: 0 1rem;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  border-radius: 100px;
-  transition: all 200ms;
-
-  &:hover,
-  &:focus,
-  &[data-state='open'] {
-    background: var(--sand4);
-  }
-`;
-
-const NavContent = styled(NavigationMenu.Content)`
-  position: absolute;
-  top: calc(100% - 1rem + 1px);
-  left: 0;
-  padding-top: 1rem;
-  transform-origin: center top;
-  animation: fadeIn 200ms;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: scale(1, 0.5);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-`;
-
-const Container = styled.div`
-  display: flex;
-  padding: 12px 0;
-  transform-origin: center top;
-  background: var(--white);
-  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  max-height: calc(100dvh - var(--nav-height));
-  overflow: auto;
-  scroll-behavior: smooth;
-  overscroll-behavior: contain;
-`;
-
-const NavLink = styled(NavigationMenu.Link)`
-  display: block;
-  padding: 7px 0;
-  font: var(--text-s);
-  color: var(--sand12);
-  transition: color 200ms;
-  white-space: nowrap;
-  outline: none;
-
-  &:hover,
-  &:focus {
-    color: var(--sand12);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 24px 0;
-  min-width: 200px;
-`;
-
-const SectionTitle = styled.p`
-  font: var(--text-xs);
-  color: var(--sand10);
-  font-weight: 450;
-  padding: 12px 0;
-  letter-spacing: 0.24px;
-  margin: 0;
-`;
-
-export const MainNavigationMenu = () => {
-
-  return (
-    <Wrapper>
-      <NavRoot delayDuration={0}>
-        <NavList>
-          {navigationCategories
-            .filter((category) => category.visible === 'all' || category.visible === 'desktop')
-            .map((category) => (
-              <NavItem key={category.title}>
-                <NavTrigger >{category.title}</NavTrigger>
-
-                <NavContent>
-                  <Container>
-                    {category.sections.map((section) => (
-                      <Section key={section.title}>
-                        {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                        {section.links.map((link) => (
-                          <NavLink key={link.title} asChild>
-                            <Link href={link.url} target={link.url.indexOf('http') === 0 ? '_blank' : undefined}>
-                              {link.title}
-                            </Link>
-                          </NavLink>
-                        ))}
-                      </Section>
-                    ))}
-                  </Container>
-                </NavContent>
-              </NavItem>
-            ))}
-        </NavList>
-      </NavRoot>
-    </Wrapper>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/icons/close.svg b/templates/frontend/gateway/src/components/navigation/icons/close.svg
deleted file mode 100644
index 1ee908d50..000000000
--- a/templates/frontend/gateway/src/components/navigation/icons/close.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M17.25 6.75L6.75 17.25"
-        stroke="#9BA1A6"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M6.75 6.75L17.25 17.25"
-        stroke="#9BA1A6"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
\ No newline at end of file
diff --git a/templates/frontend/gateway/src/components/navigation/icons/near-icon.svg b/templates/frontend/gateway/src/components/navigation/icons/near-icon.svg
deleted file mode 100644
index ed33db6be..000000000
--- a/templates/frontend/gateway/src/components/navigation/icons/near-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5528 1.01528L12.3722 7.22222C12.3127 7.31161 12.2875 7.41954 12.3014 7.52604C12.3153 7.63254 12.3673 7.73042 12.4477 7.80156C12.5282 7.87271 12.6317 7.91231 12.7391 7.91305C12.8465 7.91378 12.9505 7.87559 13.0319 7.80556L17.1472 4.23611C17.1713 4.21453 17.2012 4.20045 17.2332 4.19557C17.2652 4.19068 17.2979 4.19522 17.3274 4.20862C17.3568 4.22203 17.3817 4.24371 17.3991 4.27104C17.4164 4.29836 17.4254 4.33014 17.425 4.3625V15.5375C17.425 15.5717 17.4144 15.6051 17.3948 15.6331C17.3752 15.6611 17.3474 15.6824 17.3152 15.6941C17.2831 15.7058 17.2481 15.7073 17.2151 15.6984C17.182 15.6895 17.1525 15.6707 17.1306 15.6444L4.69167 0.754167C4.49159 0.51791 4.24246 0.328063 3.9616 0.197824C3.68073 0.067585 3.37487 7.92977e-05 3.06528 7.36094e-08H2.63056C2.0655 7.36094e-08 1.52358 0.224469 1.12403 0.624025C0.724468 1.02358 0.5 1.5655 0.5 2.13056V17.8694C0.5 18.4345 0.724468 18.9764 1.12403 19.376C1.52358 19.7755 2.0655 20 2.63056 20C2.99488 20.0001 3.35316 19.9068 3.67119 19.7291C3.98922 19.5513 4.2564 19.2951 4.44722 18.9847L8.62778 12.7778C8.68732 12.6884 8.71248 12.5805 8.6986 12.474C8.68472 12.3675 8.63274 12.2696 8.55228 12.1984C8.47182 12.1273 8.36832 12.0877 8.26092 12.087C8.15352 12.0862 8.04948 12.1244 7.96806 12.1944L3.85278 15.7639C3.82866 15.7855 3.79878 15.7996 3.76679 15.8044C3.7348 15.8093 3.70208 15.8048 3.67263 15.7914C3.64317 15.778 3.61826 15.7563 3.60092 15.729C3.58358 15.7016 3.57458 15.6699 3.575 15.6375V4.45972C3.57501 4.42551 3.58555 4.39213 3.60519 4.36412C3.62483 4.3361 3.65261 4.31481 3.68477 4.30313C3.71693 4.29145 3.7519 4.28995 3.78494 4.29883C3.81797 4.30772 3.84748 4.32655 3.86944 4.35278L16.3069 19.2458C16.507 19.4821 16.7562 19.6719 17.037 19.8022C17.3179 19.9324 17.6237 19.9999 17.9333 20H18.3681C18.648 20.0002 18.9252 19.9452 19.1838 19.8382C19.4425 19.7312 19.6775 19.5743 19.8755 19.3765C20.0735 19.1786 20.2305 18.9437 20.3377 18.6851C20.4448 18.4265 20.5 18.1494 20.5 17.8694V2.13056C20.5 1.5655 20.2755 1.02358 19.876 0.624025C19.4764 0.224469 18.9345 7.36094e-08 18.3694 7.36094e-08C18.0051 -9.56524e-05 17.6468 0.093176 17.3288 0.270914C17.0108 0.448651 16.7436 0.704924 16.5528 1.01528Z" fill="#11181C"/>
-</svg>
diff --git a/templates/frontend/gateway/src/components/navigation/icons/near-logo.svg b/templates/frontend/gateway/src/components/navigation/icons/near-logo.svg
deleted file mode 100644
index d635e4212..000000000
--- a/templates/frontend/gateway/src/components/navigation/icons/near-logo.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="110" height="28" viewBox="0 0 110 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_1899)">
-<path d="M45.5211 4.46114C43.4964 4.46114 42.0241 4.93816 40.7733 6.03856L38.5644 7.94588C38.3803 8.09301 38.0121 8.20297 37.7549 7.98228C37.4969 7.76235 37.4604 7.46886 37.6811 7.17537L38.8589 5.41442C39.043 5.15733 38.8962 4.82743 38.5644 4.82743H35.7302C35.3992 4.82743 35.1413 5.08452 35.1413 5.41442V22.5841C35.1413 22.914 35.3992 23.1711 35.7302 23.1711H38.6748C39.0058 23.1711 39.2637 22.914 39.2637 22.5841V12.8988C39.2637 8.46006 42.9813 7.76311 44.3798 7.76311C47.3609 7.76311 48.4284 9.89112 48.4284 11.5049V22.5841C48.4284 22.914 48.6863 23.1711 49.0173 23.1711H51.9618C52.2928 23.1711 52.5508 22.914 52.5508 22.5841V11.1379C52.5508 7.029 49.8634 4.46114 45.5203 4.46114H45.5211Z" fill="black"/>
-<path d="M64.5489 4.38757C58.8439 4.38757 55.2001 7.87307 55.2001 12.6053V15.2104C55.2001 20.1997 58.8439 23.6117 64.5489 23.6117C69.5912 23.6117 73.1246 21.0067 73.4929 17.4848C73.5302 17.1177 73.2723 16.8614 72.904 16.8614H70.0332C69.7753 16.8614 69.5546 17.0085 69.4808 17.2648C69.1126 18.4388 67.3831 20.1997 64.5489 20.1997C61.7146 20.1997 59.0645 18.1453 59.1011 15.2104L59.1383 11.9456C59.1749 9.48766 61.7519 7.80027 64.5489 7.80027C67.0887 7.80027 69.5546 9.23133 69.8118 11.5793C69.8331 11.8508 69.6459 12.0957 69.3774 12.1473L61.125 13.7437C60.794 13.8172 60.5361 14.1107 60.5361 14.477V14.5134C60.5361 14.8433 60.867 15.1368 61.3456 15.1368H73.1977C73.5233 15.1368 73.7866 14.8737 73.7866 14.5498V12.2391C73.7866 7.87383 69.9952 4.38833 64.5481 4.38833L64.5489 4.38757Z" fill="black"/>
-<path d="M85.0863 4.38757C80.4853 4.38757 76.5105 7.0654 76.5105 10.5873C76.5105 10.8808 76.7685 11.1007 77.0994 11.1007H80.0805C80.375 11.1007 80.5956 10.8808 80.6329 10.5873C80.9274 8.97348 82.8782 7.79951 84.976 7.79951C87.4785 7.79951 89.1722 9.34053 89.1722 11.982V15.174C89.1722 18.4388 86.7427 20.0898 83.7243 20.0898C81.3687 20.0898 80.0067 19.2093 80.0067 17.7782C80.0067 16.5307 80.6694 15.4667 83.3926 14.8433L87.3309 13.7793C87.7356 13.6693 87.8832 13.3387 87.8094 12.9724C87.7729 12.6789 87.4419 12.5318 87.1467 12.5318H83.0616C79.6019 12.5318 76.105 14.7326 76.105 17.961V18.4744C76.105 21.7764 79.2337 23.5002 82.8037 23.5002C85.0855 23.5002 87.0364 22.6197 88.2507 21.5929L90.0548 20.0519C90.3492 19.7948 90.6437 19.7948 90.9008 20.0519C91.1215 20.2718 91.0477 20.6024 90.8636 20.8588L89.7595 22.5833C89.5754 22.8404 89.7223 23.1703 90.054 23.1703H92.7041C93.0351 23.1703 93.293 22.9132 93.293 22.5833V11.467C93.293 7.21177 90.2381 4.38681 85.0848 4.38681L85.0863 4.38757Z" fill="black"/>
-<path d="M109.194 4.82819H105.071C103.636 4.82819 102.237 5.70866 101.243 6.55274L99.6243 7.94663C99.4401 8.09376 99.1084 8.20372 98.8877 8.0202C98.6298 7.83667 98.5195 7.46962 98.7409 7.17612L99.9187 5.41517C100.103 5.15808 99.956 4.82819 99.6243 4.82819H96.8638C96.5328 4.82819 96.2749 5.08528 96.2749 5.41517V22.5848C96.2749 22.9147 96.5328 23.1718 96.8638 23.1718H99.8822C100.213 23.1718 100.471 22.9147 100.471 22.5848V13.7801C100.471 10.0011 102.017 8.31369 105.367 8.31369H109.194C109.525 8.31369 109.783 8.0566 109.783 7.7267V5.41517C109.783 5.08528 109.525 4.82819 109.194 4.82819H109.194Z" fill="black"/>
-<path d="M24.079 0.690475C23.0899 0.690475 22.1715 1.20162 21.6534 2.0419L16.0709 10.3029C15.889 10.5752 15.9628 10.9422 16.236 11.1235C16.4574 11.2706 16.7503 11.2524 16.952 11.0795L22.447 6.32901C22.5383 6.24711 22.679 6.25545 22.7612 6.34645C22.7985 6.38816 22.8183 6.44201 22.8183 6.49737V21.3707C22.8183 21.4935 22.7186 21.5921 22.5953 21.5921C22.5291 21.5921 22.4668 21.5633 22.4249 21.5125L5.81436 1.69457C5.27339 1.05829 4.47904 0.691234 3.64284 0.690475H3.0623C1.4911 0.690475 0.217407 1.96 0.217407 3.52605V24.4739C0.217407 26.04 1.4911 27.3095 3.0623 27.3095C4.05143 27.3095 4.9698 26.7984 5.48795 25.9581L11.0705 17.6971C11.2523 17.4248 11.1785 17.0578 10.9053 16.8765C10.6839 16.7294 10.391 16.7476 10.1894 16.9205L4.69436 21.671C4.60306 21.7529 4.4623 21.7445 4.38013 21.6535C4.34284 21.6118 4.32306 21.558 4.32382 21.5026V6.62554C4.32382 6.50268 4.42349 6.40409 4.54675 6.40409C4.61219 6.40409 4.67534 6.43291 4.71719 6.48372L21.3255 26.3054C21.8664 26.9417 22.6608 27.3088 23.497 27.3095H24.0775C25.6487 27.3103 26.9232 26.0415 26.9247 24.4755V3.52605C26.9247 1.96 25.651 0.690475 24.0798 0.690475H24.079Z" fill="black"/>
-</g>
-<defs>
-<clip-path id="clip0_1_1899">
-<rect width="110" height="27" fill="white" transform="translate(0 0.5)"/>
-</clip-path>
-</defs>
-</svg>
diff --git a/templates/frontend/gateway/src/components/navigation/icons/return.svg b/templates/frontend/gateway/src/components/navigation/icons/return.svg
deleted file mode 100644
index 3da7d1e0a..000000000
--- a/templates/frontend/gateway/src/components/navigation/icons/return.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_2_7)">
-    <path
-      d="M9 12L4.5 16.5L9 21"
-      stroke="#9BA1A6"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M18 3V16.5H4.5"
-      stroke="#9BA1A6"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </g>
-  <defs>
-    <clip-path id="clip0_2_7">
-      <rect width="24" height="24" fill="white" />
-    </clip-path>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/templates/frontend/gateway/src/components/navigation/icons/search.svg b/templates/frontend/gateway/src/components/navigation/icons/search.svg
deleted file mode 100644
index d1d5e6453..000000000
--- a/templates/frontend/gateway/src/components/navigation/icons/search.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z" stroke="#9BA1A6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/templates/frontend/gateway/src/components/navigation/mobile/AccordionMenu.tsx b/templates/frontend/gateway/src/components/navigation/mobile/AccordionMenu.tsx
deleted file mode 100644
index 31718e2fa..000000000
--- a/templates/frontend/gateway/src/components/navigation/mobile/AccordionMenu.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as Accordion from '@radix-ui/react-accordion';
-import Link from 'next/link';
-import styled from 'styled-components';
-
-import { navigationCategories } from '../navigation-categories';
-
-type Props = {
-  onCloseMenu: () => void;
-};
-
-const Wrapper = styled.div`
-  margin: 0 -24px;
-`;
-
-const AccordionRoot = styled(Accordion.Root)``;
-
-const AccordionItem = styled(Accordion.Item)``;
-
-const AccordionHeader = styled(Accordion.Header)`
-  display: block;
-  margin: 0;
-`;
-
-const AccordionTrigger = styled(Accordion.Trigger)`
-  all: unset;
-  box-sizing: border-box;
-  background: var(--white);
-  font: var(--text-base);
-  font-weight: 600;
-  color: var(--sand12);
-  padding: 0 24px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  i {
-    transition: transform 200ms;
-  }
-
-  &[data-state='open'] {
-    i {
-      transform: rotate(-180deg);
-    }
-  }
-`;
-
-const AccordionContent = styled(Accordion.Content)`
-  background: var(--sand3);
-  overflow: hidden;
-
-  &[data-state='open'] {
-    animation: slideDown 200ms;
-  }
-  &[data-state='closed'] {
-    animation: slideUp 200ms;
-  }
-
-  @keyframes slideDown {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes slideUp {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-`;
-
-const Section = styled.div`
-  padding: 0.5rem 0;
-
-  a {
-    display: block;
-    font: var(--text-s);
-    color: var(--sand12);
-    padding: 0.5rem 24px;
-    margin: 0;
-  }
-`;
-
-const SectionTitle = styled.p`
-  font: var(--text-xs);
-  color: var(--sand10);
-  font-weight: 450;
-  padding: 0.5rem 24px 1rem;
-  margin: 0 0 0.5rem;
-  letter-spacing: 0.24px;
-  border-bottom: 1px solid var(--sand6);
-`;
-
-export const AccordionMenu = (props: Props) => {
-
-  return (
-    <Wrapper>
-      <AccordionRoot type="multiple">
-        {navigationCategories
-          .filter((category) => category.visible === 'all' || category.visible === 'mobile')
-          .map((category) => (
-            <AccordionItem value={category.title} key={category.title}>
-              <AccordionHeader>
-                <AccordionTrigger>
-                  {category.title}
-                  <i className="ph-bold ph-caret-down" />
-                </AccordionTrigger>
-              </AccordionHeader>
-
-              <AccordionContent>
-                {category.sections.map((section) => (
-                  <Section key={section.title}>
-                    {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                    {section.links.map((link) => (
-                      <Link
-                        href={link.url}
-                        target={link.url.indexOf('http') === 0 ? '_blank' : undefined}
-                        key={link.title}
-                        onClick={props.onCloseMenu}
-                      >
-                        {link.title}
-                      </Link>
-                    ))}
-                  </Section>
-                ))}
-
-              </AccordionContent>
-            </AccordionItem>
-          ))}
-      </AccordionRoot>
-    </Wrapper>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/mobile/Menu.tsx b/templates/frontend/gateway/src/components/navigation/mobile/Menu.tsx
deleted file mode 100644
index 33435ba38..000000000
--- a/templates/frontend/gateway/src/components/navigation/mobile/Menu.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { useAuthStore } from '@/stores/auth';
-
-import { AccordionMenu } from './AccordionMenu';
-
-type Props = {
-  isVisible: boolean;
-  onCloseMenu: () => void;
-};
-
-const Wrapper = styled.div<{
-  visible: boolean;
-}>`
-  position: fixed;
-  top: var(--nav-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  display: ${(p) => (p.visible ? 'block' : 'none')};
-  transition: 200ms;
-  background: var(--white);
-  border-top: 1px solid var(--sand6);
-  overflow: auto;
-  scroll-behavior: smooth;
-  overscroll-behavior: contain;
-  transform-origin: center top;
-  animation: fadeIn 200ms;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: scale(1, 0);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-`;
-
-const InnerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px;
-  min-height: calc(100% + 1px);
-
-  /*
-    The +1px for "min-height" allows "overscroll-behavior: contain;" on the <Wrapper>
-    to prevent the <body> from scrolling. Setting "overflow: hidden;" on the <body> would
-    break the "position: sticky;" behavior of the navigation - that's why we need to
-    use this hack instead.
-
-    https://stackoverflow.com/a/48954092
-  */
-`;
-
-const Actions = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-
-export function Menu(props: Props) {
-  const signedIn = useAuthStore((store) => store.signedIn);
-  const requestSignInWithWallet = useAuthStore((store) => store.requestSignInWithWallet);
-
-  return (
-    <Wrapper visible={props.isVisible}>
-      <InnerWrapper>
-
-        <AccordionMenu onCloseMenu={props.onCloseMenu} />
-
-        {!signedIn && (
-          <Actions>
-            <Button label="Sign in" variant="secondary" size="large" onClick={requestSignInWithWallet} />
-          </Actions>
-        )}
-      </InnerWrapper>
-    </Wrapper>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/navigation/mobile/MobileNavigation.tsx b/templates/frontend/gateway/src/components/navigation/mobile/MobileNavigation.tsx
deleted file mode 100644
index c7ab35e4e..000000000
--- a/templates/frontend/gateway/src/components/navigation/mobile/MobileNavigation.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { useAuthStore } from '@/stores/auth';
-
-import NearIcon from '../icons/near-icon.svg';
-import { UserDropdownMenu } from '../UserDropdownMenu';
-import { Menu } from './Menu';
-
-const Wrapper = styled.div`
-  --nav-height: 72px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-`;
-
-const Navigation = styled.div`
-  height: var(--nav-height);
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  background-color: white;
-  box-shadow: 0 1px 0 var(--sand6);
-  position: relative;
-  z-index: 10005;
-`;
-
-const Logo = styled.a`
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  margin-right: auto;
-  transition: all 200ms;
-  border-radius: 4px;
-
-  &:focus {
-    outline: 2px solid var(--violet4);
-    outline-offset: 0.3rem;
-  }
-
-  img {
-    height: 32px;
-    width: 32px;
-  }
-`;
-
-const MenuButton = styled.button`
-  all: unset;
-  display: flex;
-  width: 32px;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  transition: all 200ms;
-  color: var(--sand12);
-
-  i {
-    font-size: 32px;
-    line-height: 32px;
-  }
-
-  &:hover,
-  &:focus {
-    opacity: 0.5;
-  }
-`;
-
-const Actions = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  position: relative;
-  z-index: 10;
-  gap: 10px;
-`;
-
-export const MobileNavigation = () => {
-  const [menuIsVisible, setMenuIsVisible] = useState(false);
-  const signedIn = useAuthStore((store) => store.signedIn);
-  const requestSignInWithWallet = useAuthStore((store) => store.requestSignInWithWallet);
-
-  const closeMenu = () => {
-    setMenuIsVisible(false);
-  };
-
-  const openMenu = () => {
-    setMenuIsVisible(true);
-  };
-
-  const toggleMenu = () => {
-    if (menuIsVisible) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  };
-
-  return (
-    <Wrapper>
-      <Navigation>
-        <Link href="/" passHref legacyBehavior>
-          <Logo onClick={closeMenu}>
-            <Image src={NearIcon} alt="NEAR" />
-          </Logo>
-        </Link>
-
-        <Actions onClick={closeMenu}>
-          {signedIn ? (
-            <>
-              <UserDropdownMenu />
-            </>
-          ) : (
-            <Button label="Login" variant="primary" onClick={requestSignInWithWallet} />
-          )}
-        </Actions>
-
-        <MenuButton aria-label="Menu" onClick={toggleMenu}>
-          {menuIsVisible ? <i className="ph ph-x" /> : <i className="ph ph-list" />}
-        </MenuButton>
-      </Navigation>
-
-      <Menu isVisible={menuIsVisible} onCloseMenu={closeMenu} />
-    </Wrapper>
-  );
-};
diff --git a/templates/frontend/gateway/src/components/navigation/navigation-categories.ts b/templates/frontend/gateway/src/components/navigation/navigation-categories.ts
deleted file mode 100644
index 610ab9fed..000000000
--- a/templates/frontend/gateway/src/components/navigation/navigation-categories.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export const navigationCategories = [
-  {
-    title: 'Examples',
-    visible: 'all',
-    sections: [
-      {
-        title: null,
-        links: [
-          {
-            title: 'Hello Component',
-            url: '/hello-component',
-          },
-          {
-            title: 'Hello API',
-            url: '/hello-api',
-          },
-          {
-            title: 'Hello Ethereum',
-            url: '/hello-ethereum',
-          },
-          {
-            title: 'Hello Social',
-            url: '/hello-social',
-          },
-          {
-            title: 'DIG UI Library',
-            url: '/dig',
-          },
-          {
-            title: 'NUI UI Library',
-            url: '/nui',
-          },
-        ],
-      },
-    ],
-  },
-
-  {
-    title: 'Resources',
-    visible: 'all',
-    sections: [
-      {
-        title: 'Documentation',
-        links: [
-          {
-            title: 'General Docs',
-            url: 'https://docs.near.org',
-          },
-          {
-            title: 'BOS Docs',
-            url: 'https://docs.near.org/bos/overview',
-          },
-          {
-            title: 'Components Docs',
-            url: 'https://docs.near.org/bos/components/widgets',
-          },
-        ],
-      },
-      {
-        title: 'Support',
-        links: [
-          {
-            title: 'Discord',
-            url: 'https://discord.gg/GZ7735Xjce',
-          },
-          {
-            title: 'Telegram',
-            url: 'https://t.me/neardev',
-          },
-        ],
-      },
-    ],
-  },
-
-];
diff --git a/templates/frontend/gateway/src/components/vm/VmCommitButton.tsx b/templates/frontend/gateway/src/components/vm/VmCommitButton.tsx
deleted file mode 100644
index 68b3a4d2c..000000000
--- a/templates/frontend/gateway/src/components/vm/VmCommitButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useVmStore } from '@/stores/vm';
-
-import { Spinner } from '../lib/Spinner';
-
-type Props = {
-  className?: string;
-  data: Record<string, unknown>;
-  handleCommit?: () => void;
-  onCommit?: () => void;
-};
-
-export function VmCommitButton(props: Props) {
-  const { near, CommitButton } = useVmStore();
-
-  if (!near || !CommitButton) {
-    return <Spinner />;
-  }
-
-  return <CommitButton near={near} {...props} />;
-}
diff --git a/templates/frontend/gateway/src/components/vm/VmComponent.tsx b/templates/frontend/gateway/src/components/vm/VmComponent.tsx
deleted file mode 100644
index f6510b025..000000000
--- a/templates/frontend/gateway/src/components/vm/VmComponent.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useBosLoaderStore } from '@/stores/bos-loader';
-import { useVmStore } from '@/stores/vm';
-
-import { Spinner } from '../lib/Spinner';
-
-type Props = {
-  src: string;
-  props?: Record<string, unknown>;
-};
-
-export function VmComponent(props: Props) {
-  const { EthersProvider, ethersContext, Widget } = useVmStore();
-  const redirectMapStore = useBosLoaderStore();
-
-  if (!EthersProvider || !redirectMapStore.hasResolved) {
-    return <Spinner />;
-  }
-
-  return (
-    <EthersProvider value={ethersContext}>
-      <Widget
-        config={{
-          redirectMap: redirectMapStore.redirectMap,
-        }}
-        {...props}
-      />
-    </EthersProvider>
-  );
-}
diff --git a/templates/frontend/gateway/src/components/vm/VmInitializer.tsx b/templates/frontend/gateway/src/components/vm/VmInitializer.tsx
deleted file mode 100644
index fe821c945..000000000
--- a/templates/frontend/gateway/src/components/vm/VmInitializer.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { sanitizeUrl } from '@braintree/sanitize-url';
-import { setupWalletSelector } from '@near-wallet-selector/core';
-import { setupModal } from '@near-wallet-selector/modal-ui';
-import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
-import { setupNearWallet } from '@near-wallet-selector/near-wallet';
-import Big from 'big.js';
-import {
-  CommitButton,
-  EthersProviderContext,
-  useAccount,
-  useCache,
-  useInitNear,
-  useNear,
-  utils,
-  Widget,
-} from 'near-social-vm';
-import Link from 'next/link';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { useEthersProviderContext } from '@/data/web3';
-import { useAuthStore } from '@/stores/auth';
-import { useVmStore } from '@/stores/vm';
-import { networkId } from '@/utils/config';
-
-export default function VmInitializer() {
-  const [signedIn, setSignedIn] = useState(false);
-  const [signedAccountId, setSignedAccountId] = useState('');
-  const [availableStorage, setAvailableStorage] = useState<Big | null>(null);
-  const ethersProviderContext = useEthersProviderContext();
-  const { initNear } = useInitNear();
-  const near = useNear();
-  const account = useAccount();
-  const cache = useCache();
-  const setAuthStore = useAuthStore((state) => state.set);
-  const setVmStore = useVmStore((store) => store.set);
-
-  useEffect(() => {
-    const selector = setupWalletSelector({
-      network: networkId,
-      modules: [
-        setupNearWallet(),
-        setupMyNearWallet()
-      ]
-    });
-
-    initNear &&
-      initNear({
-        networkId,
-        selector,
-        customElements: {
-          Link: ({ href, to, ...rest }: any) => <Link href={sanitizeUrl(href ?? to)} {...rest} />,
-        },
-      });
-    
-    selector.then( (walletSelector) => {
-      setSignedIn(walletSelector.isSignedIn());
-      const accounts = walletSelector.store.getState().accounts;
-      accounts.length && setSignedAccountId(accounts[0].accountId);
-    });
-  }, [initNear]);
-
-  const logOut = useCallback(async () => {
-    if (!near) {
-      return;
-    }
-    const wallet = await (await near.selector).wallet();
-    wallet.signOut();
-    near.accountId = null;
-    setSignedIn(false);
-    setSignedAccountId('');
-  }, [near]);
-
-  const refreshAllowance = useCallback(async () => {
-    alert('You\'re out of access key allowance. Need sign in again to refresh it');
-    await logOut();
-  }, [logOut]);
-
-  useEffect(() => {
-    setAvailableStorage(
-      account.storageBalance ? Big(account.storageBalance.available).div(utils.StorageCostPerByte) : Big(0),
-    );
-  }, [account]);
-
-  useEffect(() => {
-    const requestSignInWithWallet = async () => {
-      const selector = await near.selector;
-      const modal = setupModal(selector, { contractId: '' });
-      modal.show();
-    };
-
-    setAuthStore({
-      account,
-      accountId: signedAccountId,
-      availableStorage,
-      logOut,
-      refreshAllowance,
-      requestSignInWithWallet,
-      vmNear: near,
-      signedIn,
-    });
-  }, [
-    account,
-    availableStorage,
-    logOut,
-    refreshAllowance,
-    signedIn,
-    signedAccountId,
-    setAuthStore,
-    near,
-  ]);
-
-  useEffect(() => {
-    setVmStore({
-      cache,
-      CommitButton,
-      ethersContext: ethersProviderContext,
-      EthersProvider: EthersProviderContext.Provider,
-      Widget,
-      near,
-    });
-  }, [cache, ethersProviderContext, setVmStore, near]);
-
-  return <></>;
-}
diff --git a/templates/frontend/gateway/src/data/components.ts b/templates/frontend/gateway/src/data/components.ts
deleted file mode 100644
index 6e0af1ff3..000000000
--- a/templates/frontend/gateway/src/data/components.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { NetworkId } from '@/utils/types';
-
-type Components = {
-  helloExample: string
-  UI: {
-    profileImage: string,
-    profileName: string,
-    profilePage: string
-  }
-  lidoExample: string,
-  social:{
-    compose: string,
-    feed: string
-  },
-  DIG: string,
-  NUI: string
-};
-
-export const componentsByNetworkId: Record<NetworkId, Components | undefined> = {
-  testnet: {
-    helloExample: 'gagdiez.near/widget/HelloNear',
-    UI: {
-      profileImage: 'mob.near/widget/ProfileImage',
-      profileName: 'patrick.near/widget/ProfileName',
-      profilePage: 'near/widget/ProfilePage',
-    },
-    lidoExample: 'zavodil.near/widget/Lido',
-    social:{
-      compose: 'mob.near/widget/MainPage.N.Compose',
-      feed: 'mob.near/widget/MainPage.N.Feed'
-    },
-    DIG: 'near/widget/DIG.OverviewPage',
-    NUI: 'nearui.near/widget/index',
-  },
-  mainnet: {
-    helloExample: 'gagdiez.near/widget/HelloNear',
-    UI: {
-      profileImage: 'mob.near/widget/ProfileImage',
-      profileName: 'patrick.near/widget/ProfileName',
-      profilePage: 'near/widget/ProfilePage',
-    },
-    lidoExample: 'zavodil.near/widget/Lido',
-    social:{
-      compose: 'mob.near/widget/MainPage.N.Compose',
-      feed: 'mob.near/widget/MainPage.N.Feed'
-    },
-    DIG: 'near/widget/DIG.OverviewPage',
-    NUI: 'nearui.near/widget/index',
-  },
-};
diff --git a/templates/frontend/gateway/src/hooks/useBosComponents.ts b/templates/frontend/gateway/src/hooks/useBosComponents.ts
deleted file mode 100644
index 7f3841a11..000000000
--- a/templates/frontend/gateway/src/hooks/useBosComponents.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { componentsByNetworkId } from '@/data/components';
-import { networkId } from '@/utils/config';
-
-export function useBosComponents() {
-  const components = componentsByNetworkId[networkId];
-
-  if (!components) {
-    throw new Error(
-      `useBosComponents(): unimplemented NetworkId "${networkId}". Add values to "data/bos-components.ts"`,
-    );
-  }
-
-  return components;
-}
diff --git a/templates/frontend/gateway/src/hooks/useBosLoaderInitializer.ts b/templates/frontend/gateway/src/hooks/useBosLoaderInitializer.ts
deleted file mode 100644
index d6d5d3698..000000000
--- a/templates/frontend/gateway/src/hooks/useBosLoaderInitializer.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-import { useBosLoaderStore } from '@/stores/bos-loader';
-
-import { useFlags } from './useFlags';
-
-export function useBosLoaderInitializer() {
-  const [flags] = useFlags();
-  const loaderUrl = flags?.bosLoaderUrl;
-  const setStore = useBosLoaderStore((store) => store.set);
-
-  /**
-   * Fetch local component versions if a local loader
-   * is provided. must be provided as {components: { <path>: { code : <code>}}}
-   */
-  const fetchRedirectMap = useCallback(
-    async (url: string) => {
-      setStore({
-        loaderUrl: url,
-      });
-
-      try {
-        const res = await fetch(url, {
-          method: 'GET',
-          headers: {
-            Accept: 'application/json',
-          },
-        });
-
-        if (!res.ok) {
-          throw new Error('Network response was not OK');
-        }
-
-        const data = await res.json();
-
-        setStore({
-          hasResolved: true,
-          redirectMap: data.components,
-        });
-      } catch (e) {
-        console.error(e);
-
-        setStore({
-          failedToLoad: true,
-          hasResolved: true,
-        });
-      }
-    },
-    [setStore],
-  );
-
-  useEffect(() => {
-    if (loaderUrl) {
-      fetchRedirectMap(loaderUrl);
-    } else if (flags) {
-      // We need to check if "flags" has fully resolved to avoid prematurely setting "hasResolved: true"
-      setStore({ hasResolved: true });
-    }
-  }, [flags, fetchRedirectMap, loaderUrl, setStore]);
-}
diff --git a/templates/frontend/gateway/src/hooks/useFlags.ts b/templates/frontend/gateway/src/hooks/useFlags.ts
deleted file mode 100644
index cdb5c49dc..000000000
--- a/templates/frontend/gateway/src/hooks/useFlags.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-/**
- * Use Application flags
- *
- * `const [flags, setFlags] = useFlags();`
- *
- * Warning: setFlags causes page reload
- */
-
-type Flags = {
-  bosLoaderUrl?: string;
-};
-
-export function useFlags() {
-  const [rawFlags, setRawFlags] = useState<Flags>();
-
-  useEffect(() => {
-    const flags = localStorage.getItem('flags') ? JSON.parse(localStorage.getItem('flags') || '') : {};
-    setRawFlags(flags);
-  }, []);
-
-  const setFlags = useCallback((newFlags: Flags) => {
-    setRawFlags((f) => {
-      const updated = { ...f, ...newFlags };
-      localStorage.setItem('flags', JSON.stringify(updated));
-
-      alert('Flags have been saved.');
-
-      // reload for changes to take effect
-      // eslint-disable-next-line no-restricted-globals
-      location.reload();
-
-      // may not be reachable
-      return updated;
-    });
-  }, []);
-
-  return [rawFlags, setFlags] as const;
-}
diff --git a/templates/frontend/gateway/src/hooks/useLayout.tsx b/templates/frontend/gateway/src/hooks/useLayout.tsx
deleted file mode 100644
index 11458c407..000000000
--- a/templates/frontend/gateway/src/hooks/useLayout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { ReactElement } from 'react';
-
-import { DefaultLayout } from '@/components/layouts/DefaultLayout';
-import { SimpleLayout } from '@/components/layouts/SimpleLayout';
-
-export function useDefaultLayout(page: ReactElement) {
-  return <DefaultLayout>{page}</DefaultLayout>;
-}
-
-export function useSimpleLayout(page: ReactElement) {
-  return <SimpleLayout>{page}</SimpleLayout>;
-}
diff --git a/templates/frontend/gateway/src/index.d.ts b/templates/frontend/gateway/src/index.d.ts
deleted file mode 100644
index 0faa5ab17..000000000
--- a/templates/frontend/gateway/src/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module 'near-social-vm';
-
-declare module 'nanoid' {
-  export function nanoid(size?: number): string;
-}
-
-interface Window {
-  zE: (name: string, method: string) => void | undefined;
-}
diff --git a/templates/frontend/gateway/src/pages/_app.tsx b/templates/frontend/gateway/src/pages/_app.tsx
deleted file mode 100644
index e35b384e1..000000000
--- a/templates/frontend/gateway/src/pages/_app.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import '@/styles/theme.css';
-import '@/styles/globals.css';
-import 'bootstrap-icons/font/bootstrap-icons.css';
-import '@near-wallet-selector/modal-ui/styles.css';
-import 'react-bootstrap-typeahead/css/Typeahead.css';
-import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
-
-import type { AppProps } from 'next/app';
-import dynamic from 'next/dynamic';
-import Head from 'next/head';
-import Script from 'next/script';
-
-import { Toaster } from '@/components/lib/Toast';
-import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const VmInitializer = dynamic(() => import('../components/vm/VmInitializer'), {
-  ssr: false,
-});
-
-type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-};
-
-export default function App({ Component, pageProps }: AppPropsWithLayout) {
-  useBosLoaderInitializer();
-  const getLayout = Component.getLayout ?? ((page) => page);
-
-  return (
-    <>
-      <Head>
-        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="icon" href="favicon.ico" />
-      </Head>
-
-      <Script id="phosphor-icons" src="https://unpkg.com/@phosphor-icons/web@2.0.3" async />
-
-      <Script id="bootstrap" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" />
-
-      <VmInitializer />
-
-      {getLayout(<Component {...pageProps} />)}
-
-      <Toaster />
-    </>
-  );
-}
diff --git a/templates/frontend/gateway/src/pages/_document.tsx b/templates/frontend/gateway/src/pages/_document.tsx
deleted file mode 100644
index 68645f9bd..000000000
--- a/templates/frontend/gateway/src/pages/_document.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// https://nimblecode.dev/blog/fixing-fouc-nextjs-styled-components/
-
-import type { DocumentContext } from 'next/document';
-import Document from 'next/document';
-import { ServerStyleSheet } from 'styled-components';
-
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
-        });
-
-      const initialProps = await Document.getInitialProps(ctx);
-      return {
-        ...initialProps,
-        styles: [initialProps.styles, sheet.getStyleElement()],
-      };
-    } finally {
-      sheet.seal();
-    }
-  }
-}
diff --git a/templates/frontend/gateway/src/pages/dig.tsx b/templates/frontend/gateway/src/pages/dig.tsx
deleted file mode 100644
index b9101dfe7..000000000
--- a/templates/frontend/gateway/src/pages/dig.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { VmComponent } from '@/components/vm/VmComponent';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const ExampleComponentPage: NextPageWithLayout = () => {
-  const components = useBosComponents();
-
-  return <>
-    <p className="text-center mt-4 p-1"> This example shows a UI library for Near components</p>
-    
-    <div className="container p-2">
-      <VmComponent
-        key="compose"
-        src={components.DIG}
-        props={{}}
-      />
-
-    </div>
-  </>;
-};
-
-ExampleComponentPage.getLayout = useDefaultLayout;
-
-export default ExampleComponentPage;
diff --git a/templates/frontend/gateway/src/pages/flags.tsx b/templates/frontend/gateway/src/pages/flags.tsx
deleted file mode 100644
index 5c86a5ffd..000000000
--- a/templates/frontend/gateway/src/pages/flags.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect } from 'react';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { Text } from '@/components/lib/Text';
-import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
-import { useFlags } from '@/hooks/useFlags';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 2rem 1rem;
-`;
-
-const Form = styled.form`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-
-const InputGrid = styled.div`
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  gap: 1rem;
-
-  @media (max-width: 600px) {
-    grid-template-columns: 1fr;
-  }
-`;
-
-type FormData = {
-  bosLoaderUrl: string;
-};
-
-const FlagsPage: NextPageWithLayout = () => {
-  const [flags, setFlags] = useFlags();
-  const form = useForm<FormData>();
-
-  useClearCurrentComponent();
-
-  useEffect(() => {
-    form.setValue('bosLoaderUrl', flags?.bosLoaderUrl || '');
-  }, [form, flags]);
-
-  const submitHandler: SubmitHandler<FormData> = (data) => {
-    setFlags(data);
-  };
-
-  return (
-    <Container className="container-xl">
-      <Text as="h1" font="text-3xl">
-        Flags
-      </Text>
-
-      <Form onSubmit={form.handleSubmit(submitHandler)}>
-        <InputGrid>
-          <Text as="label" font="text-s" weight="500" htmlFor="bosLoaderUrl">
-            BOS Loader Url
-          </Text>
-
-          <input
-            className="form-control"
-            placeholder="e.g. http://127.0.0.1:3030/, https://my-loader.ngrok.io"
-            id="bosLoaderUrl"
-            {...form.register('bosLoaderUrl')}
-          />
-        </InputGrid>
-
-        <Button label="Save Flags" variant="affirmative" size="large" type="submit" style={{ marginLeft: 'auto' }} />
-      </Form>
-    </Container>
-  );
-};
-
-FlagsPage.getLayout = useDefaultLayout;
-
-export default FlagsPage;
diff --git a/templates/frontend/gateway/src/pages/hello-api.tsx b/templates/frontend/gateway/src/pages/hello-api.tsx
deleted file mode 100644
index 1280a3241..000000000
--- a/templates/frontend/gateway/src/pages/hello-api.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useDefaultLayout } from '@/hooks/useLayout';
-import { useAuthStore } from '@/stores/auth';
-import { useVmStore } from '@/stores/vm';
-import type { NextPageWithLayout } from '@/utils/types';
-
-// Contract that the app will interact with
-const CONTRACT = process.env.NEXT_PUBLIC_CONTRACT_NAME || '';
-
-const callMethod = async (near: any, contractId: string, methodName: string, args: any = {}, gas = '30000000000000', deposit = 0) => {
-  const selector = await near.selector;
-  const wallet = await selector.wallet();
-
-  wallet.signAndSendTransaction({
-    signerId: near.accountId,
-    receiverId: contractId,
-    actions: [
-      {
-        type: 'FunctionCall',
-        params: { methodName, args, gas, deposit },
-      },
-    ],
-  });
-};
-
-// Make a read-only call to retrieve information from the network
-const viewMethod = async (near: any, contractId: string, methodName: string, args = {}) => {
-  const provider = await near.nearConnection.connection.provider;
-
-  const res = await provider.query({
-    request_type: 'call_function',
-    account_id: contractId,
-    method_name: methodName,
-    args_base64: Buffer.from(JSON.stringify(args)).toString('base64'),
-    finality: 'optimistic',
-  });
-  return JSON.parse(Buffer.from(res.result).toString());
-};
-
-const ExampleAPIPage: NextPageWithLayout = () => {
-  const { signedIn } = useAuthStore(store => store);
-  const near = useVmStore(store => store.near);
-  const [greeting, setStateGreeting] = useState('');
-
-
-  useEffect(() => {
-    if (near) {
-      viewMethod(near, CONTRACT, 'get_greeting')
-        .then(
-          res => setStateGreeting(res)
-        );
-    }
-  }, [near]);
-
-  const setGreeting = async () => {
-    callMethod(near, CONTRACT, 'set_greeting', { greeting });
-  };
-
-  // Define components
-  const greetingForm = (
-    <>
-      <div className="border border-black p-3">
-        <label>Update greeting: </label>
-        <input className="w-50 mx-2" placeholder="Howdy" onChange={(e) => setStateGreeting(e.target.value)} />
-        <button className="btn btn-primary" onClick={setGreeting}>
-          Save
-        </button>
-      </div>
-    </>
-  );
-
-  const notLoggedInWarning = (
-    <p className="text-center py-2"> Please login to change the greeting </p>
-  );
-
-  return <>
-    <p className="text-center mt-3 p-3"> This example makes calls directly from the Gateway app using the <code>near-api-js</code> and <code>wallet-selector</code> libraries </p>
-
-    <div className="container border mt-2 border-warning p-3">
-
-      <h3 className="text-center">
-        The contract says:
-        <span className="text-decoration-underline"> {greeting} </span>
-      </h3>
-
-      <p className='pt-4 pb-2'>
-        Look at that! A greeting stored on <b>{CONTRACT}</b>.
-      </p>
-
-      <p>
-        <b> Note </b>: The contract address is being loaded from
-        an <code> env </code> variable. If you chose to add a contract during
-        the wizard, running <code> npm run deploy </code> will deploy the
-        contract code and update the <code> env </code> variable used here.
-      </p>
-
-      {signedIn ? greetingForm : notLoggedInWarning}
-    </div>
-  </>;
-};
-
-ExampleAPIPage.getLayout = useDefaultLayout;
-
-export default ExampleAPIPage;
diff --git a/templates/frontend/gateway/src/pages/hello-component.tsx b/templates/frontend/gateway/src/pages/hello-component.tsx
deleted file mode 100644
index a749bc0d2..000000000
--- a/templates/frontend/gateway/src/pages/hello-component.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentWrapperPage } from '@/components/component/ComponentWrapperPage';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const ExampleComponentPage: NextPageWithLayout = () => {
-  const components = useBosComponents();
-
-  return <>
-    <p className="text-center mt-4 p-1"> This example retrieves the <code><a href="https://near.org/near/widget/ComponentDetailsPage?src=gagdiez.near/widget/HelloNear&tab=source">Hello Near component</a></code> from the NEAR Blockchain (please wait while it loads...) </p>
-    
-    <ComponentWrapperPage
-      src={components.helloExample}
-      meta={{
-        title: 'Hello NEAR',
-        description: '"A Page that loads a full-page Component"',
-      }} />
-  </>;
-};
-
-ExampleComponentPage.getLayout = useDefaultLayout;
-
-export default ExampleComponentPage;
diff --git a/templates/frontend/gateway/src/pages/hello-ethereum.tsx b/templates/frontend/gateway/src/pages/hello-ethereum.tsx
deleted file mode 100644
index e2f6b8241..000000000
--- a/templates/frontend/gateway/src/pages/hello-ethereum.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentWrapperPage } from '@/components/component/ComponentWrapperPage';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const ExampleComponentPage: NextPageWithLayout = () => {
-  const components = useBosComponents();
-
-  return <>
-    <p className="text-center mt-4 p-1 text-dark"> This example retrieves an Ethereum component from the NEAR Blockchain (wait while it loads...) </p>
-    
-    <ComponentWrapperPage
-      src={components.lidoExample}
-      meta={{
-        title: 'Hello NEAR',
-        description: '"A Page that loads a full-page Component"',
-      }} />
-  </>;
-};
-
-ExampleComponentPage.getLayout = useDefaultLayout;
-
-export default ExampleComponentPage;
diff --git a/templates/frontend/gateway/src/pages/hello-social.tsx b/templates/frontend/gateway/src/pages/hello-social.tsx
deleted file mode 100644
index 52a51c377..000000000
--- a/templates/frontend/gateway/src/pages/hello-social.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { VmComponent } from '@/components/vm/VmComponent';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const ExampleComponentPage: NextPageWithLayout = () => {
-  const components = useBosComponents();
-
-  return <>
-    <p className="text-center mt-4 p-1"> This example shows the social feed of <a href="https://near.social">NEAR Social</a></p>
-    
-    <div className="container p-2">
-      <VmComponent
-        key="compose"
-        src={components.social.compose}
-        props={{}}
-      />
-
-      <VmComponent
-        key="reg-feed"
-        src={components.social.feed}
-        props={{}}
-      />
-
-    </div>
-  </>;
-};
-
-ExampleComponentPage.getLayout = useDefaultLayout;
-
-export default ExampleComponentPage;
diff --git a/templates/frontend/gateway/src/pages/index.tsx b/templates/frontend/gateway/src/pages/index.tsx
deleted file mode 100644
index 027e03394..000000000
--- a/templates/frontend/gateway/src/pages/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { isPassKeyAvailable } from '@near-js/biometric-ed25519';
-import { useEffect } from 'react';
-
-import { openToast } from '@/components/lib/Toast';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import { useAuthStore } from '@/stores/auth';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const HomePage: NextPageWithLayout = () => {
-  const signedIn = useAuthStore((store) => store.signedIn);
-
-  useEffect(() => {
-    if (signedIn) {
-      isPassKeyAvailable().then((passKeyAvailable: boolean) => {
-        if (!passKeyAvailable) {
-          openToast({
-            title: 'Limited Functionality',
-            type: 'WARNING',
-            description: 'To access all account features, try using a browser that supports passkeys',
-            duration: 5000,
-          });
-        }
-      });
-    }
-  }, [signedIn]);
-
-  return (
-    <div className="container mx-auto">
-      <h1 className="mt-5 text-center"> Your Gateway to an Open Web </h1>
-      <h3 className="text-center"> Welcome to your NEAR Gateway </h3>
-      
-      <p className="mt-5">
-        A gateway is a simple web app that can be augmented with <span className="red"> NEAR Components</span>.
-        This Gateway is built using `Next.js` and readily allows users to login
-        using FastAuth.
-      </p>
-
-      <h5 className="mt-5"> Configure your Gateway </h5>
-      <ul>
-        <li> Select the network <code>mainnet</code> or <code>testnet</code> in the <code> ./src/utils/config.ts </code> </li>
-        <li> Modify the navigation menu in <code>./src/components/navigation/navigation-categories.ts</code> </li>
-        <li> Create new pages by adding files in <code>./src/pages</code> </li>
-        <li> Define general components in <code>./src/data/components.ts</code> to use them across pages </li>
-      </ul>
-    </div>
-  );
-};
-
-HomePage.getLayout = useDefaultLayout;
-
-export default HomePage;
diff --git a/templates/frontend/gateway/src/pages/nui.tsx b/templates/frontend/gateway/src/pages/nui.tsx
deleted file mode 100644
index d74a587d9..000000000
--- a/templates/frontend/gateway/src/pages/nui.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { VmComponent } from '@/components/vm/VmComponent';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useDefaultLayout } from '@/hooks/useLayout';
-import type { NextPageWithLayout } from '@/utils/types';
-
-const ExampleComponentPage: NextPageWithLayout = () => {
-  const components = useBosComponents();
-
-  return <>
-    <p className="text-center mt-4 p-1"> This example shows a UI library for Near components</p>
-    
-    <div className="container p-2">
-      <VmComponent
-        key="compose"
-        src={components.NUI}
-        props={{}}
-      />
-
-    </div>
-  </>;
-};
-
-ExampleComponentPage.getLayout = useDefaultLayout;
-
-export default ExampleComponentPage;
diff --git a/templates/frontend/gateway/src/stores/auth.ts b/templates/frontend/gateway/src/stores/auth.ts
deleted file mode 100644
index 1be83da66..000000000
--- a/templates/frontend/gateway/src/stores/auth.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type Big from 'big.js';
-import { create } from 'zustand';
-
-type AuthState = {
-  account: any;
-  accountId: string;
-  availableStorage: Big | null;
-  logOut: () => Promise<void>;
-  refreshAllowance: () => Promise<void>;
-  requestSignInWithWallet: () => void;
-  signedIn: boolean;
-  vmNear: any;
-};
-
-type AuthStore = AuthState & {
-  set: (state: AuthState) => void;
-};
-
-export const useAuthStore = create<AuthStore>((set) => ({
-  account: null,
-  accountId: '',
-  availableStorage: null,
-  logOut: async () => undefined,
-  refreshAllowance: async () => undefined,
-  requestSignInWithWallet: () => undefined,
-  signedIn: false,
-  set: (state) => set((previousState) => ({ ...previousState, ...state })),
-  vmNear: null,
-}));
diff --git a/templates/frontend/gateway/src/stores/bos-loader.ts b/templates/frontend/gateway/src/stores/bos-loader.ts
deleted file mode 100644
index 8012b26ad..000000000
--- a/templates/frontend/gateway/src/stores/bos-loader.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { create } from 'zustand';
-
-type BosLoaderState = {
-  failedToLoad: boolean;
-  hasResolved: boolean;
-  loaderUrl: string;
-  redirectMap: Record<string, unknown>;
-};
-
-type BosLoaderStore = BosLoaderState & {
-  set: (state: Partial<BosLoaderState>) => void;
-};
-
-export const useBosLoaderStore = create<BosLoaderStore>((set) => ({
-  failedToLoad: false,
-  hasResolved: false,
-  loaderUrl: '',
-  redirectMap: {},
-  set: (state) => set((previousState) => ({ ...previousState, ...state })),
-}));
diff --git a/templates/frontend/gateway/src/stores/current-component.ts b/templates/frontend/gateway/src/stores/current-component.ts
deleted file mode 100644
index c12cb8fc6..000000000
--- a/templates/frontend/gateway/src/stores/current-component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { create } from 'zustand';
-
-type CurrentComponentStore = {
-  src: string | null;
-  setSrc: (src: string | null) => void;
-};
-
-export const useCurrentComponentStore = create<CurrentComponentStore>((set) => ({
-  src: null,
-  setSrc: (src) => set(() => ({ src })),
-}));
diff --git a/templates/frontend/gateway/src/stores/vm.ts b/templates/frontend/gateway/src/stores/vm.ts
deleted file mode 100644
index 730644b27..000000000
--- a/templates/frontend/gateway/src/stores/vm.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { create } from 'zustand';
-
-type VmState = {
-  cache: any;
-  CommitButton: any;
-  ethersContext: any;
-  EthersProvider: any;
-  Widget: any;
-  near: any;
-};
-
-type VmStore = VmState & {
-  set: (update: VmState) => void;
-};
-
-export const useVmStore = create<VmStore>((set) => ({
-  cache: null,
-  CommitButton: null,
-  ethersContext: null,
-  EthersProvider: null,
-  Widget: null,
-  near: null,
-  set: (params) => set(() => ({ ...params })),
-}));
diff --git a/templates/frontend/gateway/src/styles/globals.css b/templates/frontend/gateway/src/styles/globals.css
deleted file mode 100644
index c1a0cfa4a..000000000
--- a/templates/frontend/gateway/src/styles/globals.css
+++ /dev/null
@@ -1,68 +0,0 @@
-@import 'bootstrap';
-
-@font-face {
-  font-family: 'Mona Sans';
-  src: url('/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
-    url('/fonts/Mona-Sans.woff2') format('woff2-variations');
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
-}
-
-@font-face {
-  font-family: 'FK Grotesk';
-  src: url('/fonts/FKGrotesk.woff2') format('woff2 supports variations'),
-    url('/fonts/FKGrotesk.woff2') format('woff2-variations');
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
-}
-
-body,
-html {
-  --body-top-padding: 24px;
-  -webkit-font-smoothing: antialiased;
-  color: var(--sand12);
-  font: var(--text-base);
-}
-
-a {
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-.btn {
-  text-decoration: none;
-}
-
-#near-wallet-selector-modal .open {
-  z-index: 1001;
-}
-
-#w3m-modal {
-  z-index: 1002;
-}
-
-#launcher {
-  color-scheme: light;
-  width: 48px;
-  height: 50px;
-  padding: 0px;
-  margin: 10px 20px;
-  position: fixed;
-  bottom: 10px;
-  overflow: visible;
-  opacity: 1;
-  border: 0px;
-  z-index: 999998;
-  transition-duration: 250ms;
-  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition-property: opacity, top, bottom;
-  right: 10px;
-}
-
-@media (max-width: 650px) {
-  #launcher {
-    right: 2px;
-    bottom: 10px;
-  }
-}
diff --git a/templates/frontend/gateway/src/styles/theme.css b/templates/frontend/gateway/src/styles/theme.css
deleted file mode 100644
index 209e688a4..000000000
--- a/templates/frontend/gateway/src/styles/theme.css
+++ /dev/null
@@ -1,129 +0,0 @@
-:root {
-  --text-xs: 450 12px/1.4 'Mona Sans', sans-serif;
-  --text-s: 450 14px/1.5 'Mona Sans', sans-serif;
-  --text-base: 450 16px/1.5 'Mona Sans', sans-serif;
-  --text-l: 400 20px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-  --text-xl: 400 24px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-  --text-2xl: 400 30px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-  --text-3xl: 400 42px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-  --text-hero: 500 72px/1 'FK Grotesk', 'Mona Sans', sans-serif;
-
-  --black: hsl(0, 0%, 0%);
-  --blackA1: hsla(0, 0%, 0%, 0.012);
-  --blackA2: hsla(0, 0%, 0%, 0.027);
-  --blackA3: hsla(0, 0%, 0%, 0.047);
-  --blackA4: hsla(0, 0%, 0%, 0.071);
-  --blackA5: hsla(0, 0%, 0%, 0.09);
-  --blackA6: hsla(0, 0%, 0%, 0.114);
-  --blackA7: hsla(0, 0%, 0%, 0.141);
-  --blackA8: hsla(0, 0%, 0%, 0.22);
-  --blackA9: hsla(0, 0%, 0%, 0.439);
-  --blackA10: hsla(0, 0%, 0%, 0.478);
-  --blackA11: hsla(0, 0%, 0%, 0.565);
-  --blackA12: hsla(0, 0%, 0%, 0.91);
-
-  --white: hsl(0, 0%, 100%);
-  --whiteA1: hsla(0, 0%, 100%, 0);
-  --whiteA2: hsla(0, 0%, 100%, 0.013);
-  --whiteA3: hsla(0, 0%, 100%, 0.034);
-  --whiteA4: hsla(0, 0%, 100%, 0.056);
-  --whiteA5: hsla(0, 0%, 100%, 0.086);
-  --whiteA6: hsla(0, 0%, 100%, 0.124);
-  --whiteA7: hsla(0, 0%, 100%, 0.176);
-  --whiteA8: hsla(0, 0%, 100%, 0.249);
-  --whiteA9: hsla(0, 0%, 100%, 0.386);
-  --whiteA10: hsla(0, 0%, 100%, 0.446);
-  --whiteA11: hsla(0, 0%, 100%, 0.592);
-  --whiteA12: hsla(0, 0%, 100%, 0.923);
-
-  --amber1: hsl(39, 70%, 99%);
-  --amber2: hsl(40, 100%, 96.5%);
-  --amber3: hsl(44, 100%, 91.7%);
-  --amber4: hsl(43, 100%, 86.8%);
-  --amber5: hsl(42, 100%, 81.8%);
-  --amber6: hsl(38, 99.7%, 76.3%);
-  --amber7: hsl(36, 86.1%, 67.1%);
-  --amber8: hsl(35, 85.2%, 55.1%);
-  --amber9: hsl(39, 100%, 57%);
-  --amber10: hsl(35, 100%, 55.5%);
-  --amber11: hsl(30, 100%, 34%);
-  --amber12: hsl(20, 80%, 17%);
-
-  --cyan1: hsla(180, 82%, 98%, 1);
-  --cyan2: hsla(180, 75%, 97%, 1);
-  --cyan3: hsla(178, 78%, 93%, 1);
-  --cyan4: hsla(179, 77%, 88%, 1);
-  --cyan5: hsla(178, 78%, 82%, 1);
-  --cyan6: hsla(178, 73%, 77%, 1);
-  --cyan7: hsla(179, 65%, 72%, 1);
-  --cyan8: hsla(178, 60%, 52%, 1);
-  --cyan9: hsla(179, 72%, 64%, 1);
-  --cyan10: hsla(178, 67%, 57%, 1);
-  --cyan11: hsla(186, 78%, 33%, 1);
-  --cyan12: hsla(186, 78%, 14%, 1);
-
-  --green1: hsla(150, 100%, 98%, 1);
-  --green2: hsla(152, 100%, 97%, 1);
-  --green3: hsla(150, 94%, 93%, 1);
-  --green4: hsla(151, 93%, 88%, 1);
-  --green5: hsla(151, 93%, 82%, 1);
-  --green6: hsla(151, 93%, 77%, 1);
-  --green7: hsla(150, 86%, 72%, 1);
-  --green8: hsla(150, 60%, 51%, 1);
-  --green9: hsla(150, 80%, 64%, 1);
-  --green10: hsla(150, 74%, 58%, 1);
-  --green11: hsla(155, 66%, 32%, 1);
-  --green12: hsla(150, 79%, 10%, 1);
-
-  --mauve1: hsl(300, 20%, 99%);
-  --mauve2: hsl(300, 7.7%, 97.5%);
-  --mauve3: hsl(294, 5.5%, 95.3%);
-  --mauve4: hsl(289, 4.7%, 93.3%);
-  --mauve5: hsl(283, 4.4%, 91.3%);
-  --mauve6: hsl(278, 4.1%, 89.1%);
-  --mauve7: hsl(271, 3.9%, 86.3%);
-  --mauve8: hsl(255, 3.7%, 78.8%);
-  --mauve9: hsl(252, 4%, 57.3%);
-  --mauve10: hsl(253, 3.5%, 53.5%);
-  --mauve11: hsl(252, 4%, 44.8%);
-  --mauve12: hsl(260, 25%, 11%);
-
-  --red1: hsla(6, 100%, 98%, 1);
-  --red2: hsla(8, 100%, 97%, 1);
-  --red3: hsla(8, 100%, 93%, 1);
-  --red4: hsla(7, 100%, 88%, 1);
-  --red5: hsla(8, 100%, 82%, 1);
-  --red6: hsla(7, 100%, 77%, 1);
-  --red7: hsla(8, 99%, 72%, 1);
-  --red8: hsla(8, 65%, 57%, 1);
-  --red9: hsla(7, 90%, 69%, 1);
-  --red10: hsla(7, 81%, 65%, 1);
-  --red11: hsla(8, 100%, 33%, 1);
-  --red12: hsla(7, 95%, 15%, 1);
-
-  --sand1: hsl(50, 20%, 99%);
-  --sand2: hsl(60, 7.7%, 97.5%);
-  --sand3: hsl(59, 6.5%, 95.1%);
-  --sand4: hsl(58, 6.1%, 92.9%);
-  --sand5: hsl(57, 6%, 90.7%);
-  --sand6: hsl(56, 5.9%, 88.4%);
-  --sand7: hsl(55, 5.9%, 85.2%);
-  --sand8: hsl(51, 6%, 77.1%);
-  --sand9: hsl(50, 2%, 55.7%);
-  --sand10: hsl(55, 1.7%, 51.9%);
-  --sand11: hsl(50, 2%, 43.1%);
-  --sand12: hsl(50, 6%, 10%);
-
-  --violet1: hsla(248, 80%, 98%, 1);
-  --violet2: hsla(245, 73%, 97%, 1);
-  --violet3: hsla(245, 67%, 93%, 1);
-  --violet4: hsla(244, 67%, 88%, 1);
-  --violet5: hsla(245, 67%, 82%, 1);
-  --violet6: hsla(245, 68%, 77%, 1);
-  --violet7: hsla(245, 62%, 72%, 1);
-  --violet8: hsla(250, 53%, 54%, 1);
-  --violet9: hsla(245, 64%, 68%, 1);
-  --violet10: hsla(246, 57%, 61%, 1);
-  --violet11: hsla(241, 50%, 32%, 1);
-  --violet12: hsla(244, 49%, 17%, 1);
-}
diff --git a/templates/frontend/gateway/src/utils/config.ts b/templates/frontend/gateway/src/utils/config.ts
deleted file mode 100644
index be7a58a95..000000000
--- a/templates/frontend/gateway/src/utils/config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Network, NetworkId } from './types';
-
-export const networks: Record<NetworkId, Network> = {
-  mainnet: {
-    networkId: 'mainnet',
-    viewAccountId: 'near',
-    nodeUrl: 'https://rpc.mainnet.near.org',
-    walletUrl: 'https://wallet.near.org',
-    helperUrl: 'https://helper.mainnet.near.org',
-  },
-  testnet: {
-    networkId: 'testnet',
-    viewAccountId: 'testnet',
-    nodeUrl: 'https://rpc.testnet.near.org',
-    walletUrl: 'https://wallet.testnet.near.org',
-    helperUrl: 'https://helper.testnet.near.org',
-  },
-};
-
-export const networkId: NetworkId = 'mainnet';
-export const network = networks[networkId];
\ No newline at end of file
diff --git a/templates/frontend/gateway/src/utils/form-validation.ts b/templates/frontend/gateway/src/utils/form-validation.ts
deleted file mode 100644
index c6f2b16cf..000000000
--- a/templates/frontend/gateway/src/utils/form-validation.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const getEmailId = (email: string) => {
-  return email
-    .split('@')[0]
-    .toLowerCase()
-    .replace(/[^a-zA-Z0-9_-]/g, '-');
-};
-
-export const emailPattern = /\S+@\S+\.\S+/;
-export const accountAddressPattern = /^(([a-z\d]+[-_])*[a-z\d]+\.)*([a-z\d]+[-_])*[a-z\d]+$/;
-
-/**
- * regex for the body of an account not including TLA and not allowing subaccount
- */
-export const accountAddressPatternNoSubaccount = /^([a-z\d]+[-_])*[a-z\d]+$/;
-
-export const isValidEmail = (email: string) => {
-  return emailPattern.test(email);
-};
diff --git a/templates/frontend/gateway/src/utils/keypom-options.ts b/templates/frontend/gateway/src/utils/keypom-options.ts
deleted file mode 100644
index e8fa98709..000000000
--- a/templates/frontend/gateway/src/utils/keypom-options.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { NetworkId } from './types';
-
-export const KEYPOM_OPTIONS = (networkId: NetworkId) => {
-  return {
-    beginTrial: {
-      landing: {
-        title: 'Create an Account',
-        body: 'To start, enter a username.',
-        fieldPlaceholder: 'Account ID',
-        buttonText: 'Create',
-      },
-      claiming: {
-        title: 'Creating Account',
-        body: 'Your account is being created. Please wait...',
-      },
-      claimed: {
-        title: 'You\'re all set! 🎉',
-        body: 'Your account has been successfully created.',
-        buttonText: 'Continue to app',
-      },
-    },
-    trialOver: {
-      mainBody: {
-        title: 'Your trial has ended',
-        body: 'Choose a wallet provider and onboard fully into the NEAR ecosystem.',
-        imageOne: {
-          title: 'Secure Your Digital Assets',
-          body: 'Now that your trial is over, secure your account with an official wallet provider!',
-        },
-        imageTwo: {
-          title: 'Log In to Any NEAR App',
-          body: 'Once your account is secured, you can use any app on NEAR!',
-        },
-      },
-      offboardingOptions: {
-        title: 'Choose a Wallet',
-      },
-    },
-    invalidAction: {
-      title: 'Invalid Action',
-      body: 'Your trial does not allow you to perform this action. For more information, please contact the site administrator.',
-    },
-    insufficientBalance: {
-      title: 'Insufficient Balance',
-      body: 'Your account does not have enough balance for the action you are trying to perform. Please try again with a different action. For more information, please contact the site administrator.',
-    },
-    wallets: [
-      {
-        name: 'MyNEARWallet',
-        description: 'Secure your account with a Seed Phrase',
-        iconUrl:
-          'data:image/png;base64,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',
-        redirectUrl: `${
-          networkId === 'testnet' ? 'https://testnet.mynearwallet.com' : 'https://app.mynearwallet.com'
-        }/linkdrop/ACCOUNT_ID/SECRET_KEY`,
-      },
-    ],
-  };
-};
diff --git a/templates/frontend/gateway/src/utils/route/privateRoute.tsx b/templates/frontend/gateway/src/utils/route/privateRoute.tsx
deleted file mode 100644
index 2c837b930..000000000
--- a/templates/frontend/gateway/src/utils/route/privateRoute.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useAuthStore } from '@/stores/auth';
-import type { NextComponentType } from 'next';
-import { useRouter } from 'next/router';
-
-const privateRoute = (Component: NextComponentType) => {
-  const Private = (props: any) => {
-    const signedIn = useAuthStore((store) => store.signedIn);
-    const router = useRouter();
-
-    if (!signedIn && router) {
-      // `signin` or `signup`?
-      router.push('/signup');
-    }
-    return <Component {...props} />;
-  };
-
-  return Private;
-};
-
-export default privateRoute;
diff --git a/templates/frontend/gateway/src/utils/route/signedOutRoute.tsx b/templates/frontend/gateway/src/utils/route/signedOutRoute.tsx
deleted file mode 100644
index f39734cbc..000000000
--- a/templates/frontend/gateway/src/utils/route/signedOutRoute.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useRouter } from 'next/router';
-
-import { useAuthStore } from '@/stores/auth';
-
-import type { NextPageWithLayout } from '../types';
-
-const signedOutRoute = (Component: NextPageWithLayout) => {
-  const SignedOut = (props: NextPageWithLayout) => {
-    const signedIn = useAuthStore((store) => store.signedIn);
-    const router = useRouter();
-
-    if (signedIn && router) {
-      router.push('/');
-    }
-    return <Component {...props} />;
-  };
-
-  return SignedOut;
-};
-
-export default signedOutRoute;
diff --git a/templates/frontend/gateway/src/utils/types.ts b/templates/frontend/gateway/src/utils/types.ts
deleted file mode 100644
index 1b6d8c13f..000000000
--- a/templates/frontend/gateway/src/utils/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import type { ReactElement, ReactNode } from 'react';
-
-export type NextPageWithLayout<T = any> = NextPage<T> & {
-  getLayout?: (page: ReactElement) => ReactNode;
-};
-
-export type NetworkId = ProductionNetwork['networkId'];
-export type Network = ProductionNetwork;
-// export type NetworkId = ProductionNetwork['networkId'] | DevelopmentNetwork['networkId'];
-// export type Network = ProductionNetwork | DevelopmentNetwork;
-
-type ProductionNetwork = {
-  networkId: 'testnet' | 'mainnet';
-  viewAccountId: string;
-  nodeUrl: string;
-  walletUrl: string;
-  helperUrl: string;
-};
\ No newline at end of file
diff --git a/templates/frontend/gateway/tsconfig.json b/templates/frontend/gateway/tsconfig.json
deleted file mode 100644
index 0123f4be6..000000000
--- a/templates/frontend/gateway/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "strictPropertyInitialization": false,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/templates/frontend/next/.eslintrc.json b/templates/frontend/next/.eslintrc.json
new file mode 100644
index 000000000..bffb357a7
--- /dev/null
+++ b/templates/frontend/next/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/templates/frontend/gateway/.gitignore b/templates/frontend/next/.gitignore
similarity index 90%
rename from templates/frontend/gateway/.gitignore
rename to templates/frontend/next/.gitignore
index b89a86368..fd3dbb571 100644
--- a/templates/frontend/gateway/.gitignore
+++ b/templates/frontend/next/.gitignore
@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-.pnpm-store 
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -19,7 +19,6 @@
 # misc
 .DS_Store
 *.pem
-.vscode
 
 # debug
 npm-debug.log*
@@ -34,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
\ No newline at end of file
+next-env.d.ts
diff --git a/templates/frontend/next/README.md b/templates/frontend/next/README.md
new file mode 100644
index 000000000..0dc9ea2bc
--- /dev/null
+++ b/templates/frontend/next/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/templates/frontend/next/jsconfig.json b/templates/frontend/next/jsconfig.json
new file mode 100644
index 000000000..b8d6842d7
--- /dev/null
+++ b/templates/frontend/next/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/templates/frontend/next/next.config.js b/templates/frontend/next/next.config.js
new file mode 100644
index 000000000..1b7b80ecf
--- /dev/null
+++ b/templates/frontend/next/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig;
diff --git a/templates/frontend/next/package.json b/templates/frontend/next/package.json
new file mode 100644
index 000000000..baa535421
--- /dev/null
+++ b/templates/frontend/next/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "hello-near",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@near-wallet-selector/core": "^8.5.1",
+    "@near-wallet-selector/here-wallet": "^8.5.1",
+    "@near-wallet-selector/modal-ui": "^8.5.1",
+    "@near-wallet-selector/my-near-wallet": "^8.5.1",
+    "@web3-onboard/core": "^2.20.2",
+    "@web3-onboard/injected-wallets": "^2.10.1",
+    "@web3-onboard/ledger": "^2.4.6",
+    "@web3-onboard/react": "^2.8.7",
+    "@web3-onboard/walletconnect": "^2.3.9",
+    "base64-js": "^1.5.1",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.1",
+    "ieee754": "^1.2.1",
+    "near-api-js": "^2.1.4",
+    "near-social-vm": "github:NearSocial/VM#2.5.2",
+    "next": "14.0.1",
+    "pino-pretty": "^10.2.3",
+    "react": "^18",
+    "react-bootstrap": "2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "react-dom": "^18",
+    "react-singleton-hook": "^4.0.1",
+    "zustand": "^4.4.4"
+  },
+  "devDependencies": {
+    "eslint": "^8.53",
+    "eslint-config-next": "14.0.1"
+  }
+}
diff --git a/templates/frontend/next/public/near-logo.svg b/templates/frontend/next/public/near-logo.svg
new file mode 100644
index 000000000..50443c0ef
--- /dev/null
+++ b/templates/frontend/next/public/near-logo.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="26.707293"
+   height="26.619026"
+   viewBox="0 0 26.707293 26.619026"
+   fill="none"
+   version="1.1"
+   id="svg196"
+   sodipodi:docname="near-logo.svg"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview198"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="4.305628"
+     inkscape:cx="52.721693"
+     inkscape:cy="16.025537"
+     inkscape:window-width="1403"
+     inkscape:window-height="430"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg196" />
+  <g
+     clip-path="url(#clip0_1_1899)"
+     id="g192"
+     transform="translate(-0.217407,-0.690475)">
+    <path
+       d="m 24.079,0.690475 c -0.9891,0 -1.9075,0.511145 -2.4256,1.351425 l -5.5825,8.261 c -0.1819,0.2723 -0.1081,0.6393 0.1651,0.8206 0.2214,0.1471 0.5143,0.1289 0.716,-0.044 l 5.495,-4.75049 c 0.0913,-0.0819 0.232,-0.07356 0.3142,0.01744 0.0373,0.04171 0.0571,0.09556 0.0571,0.15092 V 21.3707 c 0,0.1228 -0.0997,0.2214 -0.223,0.2214 -0.0662,0 -0.1285,-0.0288 -0.1704,-0.0796 L 5.81436,1.69457 C 5.27339,1.05829 4.47904,0.691234 3.64284,0.690475 H 3.0623 C 1.4911,0.690475 0.217407,1.96 0.217407,3.52605 V 24.4739 c 0,1.5661 1.273693,2.8356 2.844893,2.8356 0.98913,0 1.9075,-0.5111 2.42565,-1.3514 l 5.58255,-8.261 c 0.1818,-0.2723 0.108,-0.6393 -0.1652,-0.8206 -0.2214,-0.1471 -0.5143,-0.1289 -0.7159,0.044 L 4.69436,21.671 C 4.60306,21.7529 4.4623,21.7445 4.38013,21.6535 4.34284,21.6118 4.32306,21.558 4.32382,21.5026 V 6.62554 c 0,-0.12286 0.09967,-0.22145 0.22293,-0.22145 0.06544,0 0.12859,0.02882 0.17044,0.07963 L 21.3255,26.3054 c 0.5409,0.6363 1.3353,1.0034 2.1715,1.0041 h 0.5805 c 1.5712,8e-4 2.8457,-1.268 2.8472,-2.834 V 3.52605 C 26.9247,1.96 25.651,0.690475 24.0798,0.690475 Z"
+       fill="#000000"
+       id="path190" />
+  </g>
+</svg>
diff --git a/templates/frontend/next/public/near.svg b/templates/frontend/next/public/near.svg
new file mode 100644
index 000000000..acec6fc15
--- /dev/null
+++ b/templates/frontend/next/public/near.svg
@@ -0,0 +1 @@
+<svg width="110" height="28" viewBox="0 0 110 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1_1899)"><path d="M45.5211 4.46114C43.4964 4.46114 42.0241 4.93816 40.7733 6.03856L38.5644 7.94588C38.3803 8.09301 38.0121 8.20297 37.7549 7.98228C37.4969 7.76235 37.4604 7.46886 37.6811 7.17537L38.8589 5.41442C39.043 5.15733 38.8962 4.82743 38.5644 4.82743H35.7302C35.3992 4.82743 35.1413 5.08452 35.1413 5.41442V22.5841C35.1413 22.914 35.3992 23.1711 35.7302 23.1711H38.6748C39.0058 23.1711 39.2637 22.914 39.2637 22.5841V12.8988C39.2637 8.46006 42.9813 7.76311 44.3798 7.76311C47.3609 7.76311 48.4284 9.89112 48.4284 11.5049V22.5841C48.4284 22.914 48.6863 23.1711 49.0173 23.1711H51.9618C52.2928 23.1711 52.5508 22.914 52.5508 22.5841V11.1379C52.5508 7.029 49.8634 4.46114 45.5203 4.46114H45.5211Z" fill="black"/><path d="M64.5489 4.38757C58.8439 4.38757 55.2001 7.87307 55.2001 12.6053V15.2104C55.2001 20.1997 58.8439 23.6117 64.5489 23.6117C69.5912 23.6117 73.1246 21.0067 73.4929 17.4848C73.5302 17.1177 73.2723 16.8614 72.904 16.8614H70.0332C69.7753 16.8614 69.5546 17.0085 69.4808 17.2648C69.1126 18.4388 67.3831 20.1997 64.5489 20.1997C61.7146 20.1997 59.0645 18.1453 59.1011 15.2104L59.1383 11.9456C59.1749 9.48766 61.7519 7.80027 64.5489 7.80027C67.0887 7.80027 69.5546 9.23133 69.8118 11.5793C69.8331 11.8508 69.6459 12.0957 69.3774 12.1473L61.125 13.7437C60.794 13.8172 60.5361 14.1107 60.5361 14.477V14.5134C60.5361 14.8433 60.867 15.1368 61.3456 15.1368H73.1977C73.5233 15.1368 73.7866 14.8737 73.7866 14.5498V12.2391C73.7866 7.87383 69.9952 4.38833 64.5481 4.38833L64.5489 4.38757Z" fill="black"/><path d="M85.0863 4.38757C80.4853 4.38757 76.5105 7.0654 76.5105 10.5873C76.5105 10.8808 76.7685 11.1007 77.0994 11.1007H80.0805C80.375 11.1007 80.5956 10.8808 80.6329 10.5873C80.9274 8.97348 82.8782 7.79951 84.976 7.79951C87.4785 7.79951 89.1722 9.34053 89.1722 11.982V15.174C89.1722 18.4388 86.7427 20.0898 83.7243 20.0898C81.3687 20.0898 80.0067 19.2093 80.0067 17.7782C80.0067 16.5307 80.6694 15.4667 83.3926 14.8433L87.3309 13.7793C87.7356 13.6693 87.8832 13.3387 87.8094 12.9724C87.7729 12.6789 87.4419 12.5318 87.1467 12.5318H83.0616C79.6019 12.5318 76.105 14.7326 76.105 17.961V18.4744C76.105 21.7764 79.2337 23.5002 82.8037 23.5002C85.0855 23.5002 87.0364 22.6197 88.2507 21.5929L90.0548 20.0519C90.3492 19.7948 90.6437 19.7948 90.9008 20.0519C91.1215 20.2718 91.0477 20.6024 90.8636 20.8588L89.7595 22.5833C89.5754 22.8404 89.7223 23.1703 90.054 23.1703H92.7041C93.0351 23.1703 93.293 22.9132 93.293 22.5833V11.467C93.293 7.21177 90.2381 4.38681 85.0848 4.38681L85.0863 4.38757Z" fill="black"/><path d="M109.194 4.82819H105.071C103.636 4.82819 102.237 5.70866 101.243 6.55274L99.6243 7.94663C99.4401 8.09376 99.1084 8.20372 98.8877 8.0202C98.6298 7.83667 98.5195 7.46962 98.7409 7.17612L99.9187 5.41517C100.103 5.15808 99.956 4.82819 99.6243 4.82819H96.8638C96.5328 4.82819 96.2749 5.08528 96.2749 5.41517V22.5848C96.2749 22.9147 96.5328 23.1718 96.8638 23.1718H99.8822C100.213 23.1718 100.471 22.9147 100.471 22.5848V13.7801C100.471 10.0011 102.017 8.31369 105.367 8.31369H109.194C109.525 8.31369 109.783 8.0566 109.783 7.7267V5.41517C109.783 5.08528 109.525 4.82819 109.194 4.82819H109.194Z" fill="black"/><path d="M24.079 0.690475C23.0899 0.690475 22.1715 1.20162 21.6534 2.0419L16.0709 10.3029C15.889 10.5752 15.9628 10.9422 16.236 11.1235C16.4574 11.2706 16.7503 11.2524 16.952 11.0795L22.447 6.32901C22.5383 6.24711 22.679 6.25545 22.7612 6.34645C22.7985 6.38816 22.8183 6.44201 22.8183 6.49737V21.3707C22.8183 21.4935 22.7186 21.5921 22.5953 21.5921C22.5291 21.5921 22.4668 21.5633 22.4249 21.5125L5.81436 1.69457C5.27339 1.05829 4.47904 0.691234 3.64284 0.690475H3.0623C1.4911 0.690475 0.217407 1.96 0.217407 3.52605V24.4739C0.217407 26.04 1.4911 27.3095 3.0623 27.3095C4.05143 27.3095 4.9698 26.7984 5.48795 25.9581L11.0705 17.6971C11.2523 17.4248 11.1785 17.0578 10.9053 16.8765C10.6839 16.7294 10.391 16.7476 10.1894 16.9205L4.69436 21.671C4.60306 21.7529 4.4623 21.7445 4.38013 21.6535C4.34284 21.6118 4.32306 21.558 4.32382 21.5026V6.62554C4.32382 6.50268 4.42349 6.40409 4.54675 6.40409C4.61219 6.40409 4.67534 6.43291 4.71719 6.48372L21.3255 26.3054C21.8664 26.9417 22.6608 27.3088 23.497 27.3095H24.0775C25.6487 27.3103 26.9232 26.0415 26.9247 24.4755V3.52605C26.9247 1.96 25.651 0.690475 24.0798 0.690475H24.079Z" fill="black"/></g></svg>
diff --git a/templates/frontend/gateway/public/next.svg b/templates/frontend/next/public/next.svg
similarity index 100%
rename from templates/frontend/gateway/public/next.svg
rename to templates/frontend/next/public/next.svg
diff --git a/templates/frontend/gateway/public/vercel.svg b/templates/frontend/next/public/vercel.svg
similarity index 100%
rename from templates/frontend/gateway/public/vercel.svg
rename to templates/frontend/next/public/vercel.svg
diff --git a/templates/frontend/next/src/app/app.module.css b/templates/frontend/next/src/app/app.module.css
new file mode 100644
index 000000000..85e5c04bf
--- /dev/null
+++ b/templates/frontend/next/src/app/app.module.css
@@ -0,0 +1,228 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+  width: 100%;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+  opacity: 0.3;
+}
+
+.logo {
+  position: relative;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(to bottom,
+        rgba(var(--background-start-rgb), 1),
+        rgba(var(--callout-rgb), 0.5));
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(to bottom,
+        transparent 0%,
+        rgb(var(--background-end-rgb)) 40%);
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
\ No newline at end of file
diff --git a/templates/frontend/gateway/public/favicon.ico b/templates/frontend/next/src/app/favicon.ico
similarity index 100%
rename from templates/frontend/gateway/public/favicon.ico
rename to templates/frontend/next/src/app/favicon.ico
diff --git a/templates/frontend/next/src/app/globals.css b/templates/frontend/next/src/app/globals.css
new file mode 100644
index 000000000..31b536846
--- /dev/null
+++ b/templates/frontend/next/src/app/globals.css
@@ -0,0 +1,95 @@
+@import 'bootstrap';
+@import 'bootstrap-icons';
+
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(from 180deg at 50% 50%,
+      #16abff33 0deg,
+      #0885ff33 55deg,
+      #54d6ff33 120deg,
+      #0071ff33 160deg,
+      transparent 360deg);
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(#00000080,
+      #00000040,
+      #00000030,
+      #00000020,
+      #00000010,
+      #00000010,
+      #00000080);
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(to bottom right,
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0.3));
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(#ffffff80,
+        #ffffff40,
+        #ffffff30,
+        #ffffff20,
+        #ffffff10,
+        #ffffff10,
+        #ffffff80);
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
\ No newline at end of file
diff --git a/templates/frontend/next/src/app/hello-components/page.js b/templates/frontend/next/src/app/hello-components/page.js
new file mode 100644
index 000000000..4736e2aec
--- /dev/null
+++ b/templates/frontend/next/src/app/hello-components/page.js
@@ -0,0 +1,44 @@
+import dynamic from 'next/dynamic';
+
+import styles from '@/app/app.module.css'
+import { DocsCard, HelloNearCard } from '@/components/cards';
+import { NetworkId, ComponentMap } from '@/config';
+
+const Component = dynamic(() => import('@/components/vm-component'), { ssr: false });
+
+const socialComponents = ComponentMap[NetworkId];
+
+export default function HelloComponents() {
+
+  return (
+    <>
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Loading components from: &nbsp;
+          <code className={styles.code}>{socialComponents.socialDB}</code>
+        </p>
+      </div>
+      <div className={styles.center}>
+        <h1> <code>Multi-chain</code> Components Made Simple </h1>
+      </div>
+      <div className='row'>
+        <div class="col-6">
+          <Component src={socialComponents.HelloNear} />
+          <p class="my-4">&nbsp;</p>
+          <Component src={socialComponents.LoveNear} />
+        </div>
+        <div class="col-6">
+          <Component src={socialComponents.Lido} />
+        </div>
+      </div>
+      <hr />
+
+      <div className={styles.grid}>
+        <DocsCard />
+        <HelloNearCard />
+      </div>
+    </main>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/templates/frontend/next/src/app/hello-near/page.js b/templates/frontend/next/src/app/hello-near/page.js
new file mode 100644
index 000000000..f8fc72626
--- /dev/null
+++ b/templates/frontend/next/src/app/hello-near/page.js
@@ -0,0 +1,64 @@
+'use client'
+import { DocsCard, HelloComponentsCard } from '@/components/cards';
+import { useWallet } from '@/wallets/wallet-selector';
+import { useState, useEffect } from 'react'
+import { HelloNearContract, NetworkId } from '../../config';
+import styles from '../app.module.css'
+
+// Contract that the app will interact with
+const CONTRACT = HelloNearContract[NetworkId];
+
+export default function HelloNear({ }) {
+  const { signedAccountId, viewMethod, callMethod } = useWallet()
+
+  const [greeting, setGreeting] = useState('loading...')
+  const [loggedIn, setLoggedIn] = useState(false)
+  const [showSpinner, setShowSpinner] = useState(false)
+
+  useEffect(() => {
+    viewMethod && viewMethod(CONTRACT, 'get_greeting', {}).then(
+      greeting => setGreeting(greeting)
+    )
+  }, [viewMethod])
+
+  useEffect(() => {
+    setLoggedIn(!!signedAccountId)
+  }, [signedAccountId])
+
+  const saveGreeting = async () => {
+    setShowSpinner(true)
+    await callMethod(CONTRACT, 'set_greeting', { greeting });
+    setShowSpinner(false)
+  }
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Interacting with the contract: &nbsp;
+          <code className={styles.code}>{CONTRACT}</code>
+        </p>
+      </div>
+
+      <div className={styles.center}>
+        <h1 className="w-100"> The contract says: <code>{greeting}</code> </h1>
+        <div className="input-group" hidden={!loggedIn}>
+          <input type="text" className="form-control w-20" placeholder="Store a new greeting" onChange={t => { setGreeting(t.target.value) }} />
+          <div className="input-group-append">
+            <button className="btn btn-secondary" onClick={saveGreeting}>
+              <span hidden={showSpinner}> Save </span>
+              <i className="spinner-border spinner-border-sm" hidden={!showSpinner}></i>
+            </button>
+          </div>
+        </div>
+        <div className='w-100 text-end align-text-center' hidden={loggedIn}>
+          <p className='m-0'> Please login to change the greeting </p>
+        </div>
+      </div>
+      <div className={styles.grid}>
+        <DocsCard />
+        <HelloComponentsCard />
+      </div>
+    </main>
+  )
+}
diff --git a/templates/frontend/next/src/app/layout.js b/templates/frontend/next/src/app/layout.js
new file mode 100644
index 000000000..334bb618f
--- /dev/null
+++ b/templates/frontend/next/src/app/layout.js
@@ -0,0 +1,22 @@
+'use client'
+import './globals.css'
+import '@near-wallet-selector/modal-ui/styles.css';
+
+import { ComponentMap, NetworkId } from '@/config';
+import { Navigation } from '@/components/navigation';
+import { initWallet } from '@/wallets/wallet-selector';
+
+export default function RootLayout({ children }) {
+
+  const createAccessKeyFor = ComponentMap[NetworkId].socialDB;
+  initWallet({ createAccessKeyFor });
+  
+  return (
+    <html lang="en">
+      <body>
+        <Navigation />
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/templates/frontend/next/src/app/page.js b/templates/frontend/next/src/app/page.js
new file mode 100644
index 000000000..593553e5c
--- /dev/null
+++ b/templates/frontend/next/src/app/page.js
@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import styles from './app.module.css'
+import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards'
+
+export default function Home({ }) {
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}> </div>
+
+      <div className={styles.center}>
+        <Image
+          className={styles.logo}
+          src="/near.svg"
+          alt="Next.js Logo"
+          width={110 * 1.5}
+          height={28 * 1.5}
+          priority
+        />
+        <h3 className="ms-2 me-3 text-dark"> + </h3>
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={300 * .58}
+          height={61 * .58}
+          priority
+        />
+      </div>
+
+      <div className={styles.grid}>
+        <HelloComponentsCard />
+        <HelloNearCard />
+        <DocsCard />
+      </div>
+    </main>
+  )
+}
diff --git a/templates/frontend/next/src/components/cards.js b/templates/frontend/next/src/components/cards.js
new file mode 100644
index 000000000..97239c423
--- /dev/null
+++ b/templates/frontend/next/src/components/cards.js
@@ -0,0 +1,46 @@
+import styles from '../app/app.module.css';
+
+export const DocsCard = () => {
+  return (
+    <a
+      href="https://docs.near.org/develop/integrate/quickstart-frontend"
+      className={styles.card}
+      target='_blank'
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Near Docs <span>-&gt;</span>
+      </h2>
+      <p>Learn how this application works, and what you can build on Near.</p>
+    </a>);
+}
+
+export const HelloNearCard = () => {
+  return (
+    <a
+      href="/hello-near"
+      className={styles.card}
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Near Integration <span>-&gt;</span>
+      </h2>
+      <p>Discover how simple it is to interact with a Near smart contract.</p>
+    </a>
+  );
+}
+
+export const HelloComponentsCard = () => {
+  return (
+    <a
+      href="/hello-components"
+      className={styles.card}
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Web3 Components <span>-&gt;</span>
+      </h2>
+      <p>See how Web3 components can help you to create multi-chain apps.</p>
+    </a>
+  )
+}
\ No newline at end of file
diff --git a/templates/frontend/next/src/components/navigation.js b/templates/frontend/next/src/components/navigation.js
new file mode 100644
index 000000000..3d3ae8778
--- /dev/null
+++ b/templates/frontend/next/src/components/navigation.js
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+import NearLogo from 'public/near-logo.svg';
+import { useWallet } from '@/wallets/wallet-selector';
+
+export const Navigation = () => {
+
+  const { signedAccountId, logOut, logIn } = useWallet()
+  const [action, setAction] = useState(() => { })
+  const [label, setLabel] = useState('Loading...')
+
+  useEffect(() => {
+    if (signedAccountId) {
+      setAction(() => logOut)
+      setLabel(`Logout ${signedAccountId}`)
+    } else {
+      setAction(() => logIn)
+      setLabel('Login')
+    }
+  }, [signedAccountId, logOut, logIn, setAction, setLabel]);
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/" passHref legacyBehavior>
+          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+        </Link>
+        <div className='navbar-nav pt-1'>
+          <button className="btn btn-secondary" onClick={action} > {label} </button>
+        </div>
+      </div>
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/templates/frontend/next/src/components/vm-component.js b/templates/frontend/next/src/components/vm-component.js
new file mode 100644
index 000000000..6e3f645b1
--- /dev/null
+++ b/templates/frontend/next/src/components/vm-component.js
@@ -0,0 +1,26 @@
+'use client';
+import { useEffect } from 'react';
+import { useInitNear, Widget, EthersProviderContext } from 'near-social-vm';
+
+import { useWallet } from '@/wallets/wallet-selector';
+import { useEthersProviderContext } from '@/wallets/web3-wallet';
+import { NetworkId } from '@/config';
+
+export default function Component({ src }) {
+  const ethersContext = useEthersProviderContext();
+  const { selector } = useWallet();
+  const { initNear } = useInitNear();
+
+  useEffect(() => {
+    initNear && selector && initNear({ networkId: NetworkId, selector });
+  }, [initNear, selector]);
+
+  return (
+    <div>
+      <EthersProviderContext.Provider value={ethersContext}>
+        <Widget src={src} />
+      </EthersProviderContext.Provider>
+      <p className="mt-4 small"> <span className="text-secondary">Source:</span> <a href={`https://near.social/mob.near/widget/WidgetSource?src=${src}`}> {src} </a> </p>
+    </div>
+  );
+}
diff --git a/templates/frontend/next/src/config.js b/templates/frontend/next/src/config.js
new file mode 100644
index 000000000..c10fed91d
--- /dev/null
+++ b/templates/frontend/next/src/config.js
@@ -0,0 +1,21 @@
+export const NetworkId = 'testnet';
+
+export const HelloNearContract = {
+  mainnet: 'hello.near-examples.near',
+  testnet: 'hello.near-examples.testnet',
+}
+
+export const ComponentMap = {
+  mainnet: {
+    socialDB: 'social.near',
+    Lido: 'zavodil.near/widget/Lido',
+    HelloNear: 'gagdiez.near/widget/HelloNear',
+    LoveNear: 'gagdiez.near/widget/LoveNear',
+  },
+  testnet: {
+    socialDB: 'v1.social08.testnet',
+    Lido: 'influencer.testnet/widget/Lido',
+    HelloNear: 'influencer.testnet/widget/HelloNear',
+    LoveNear: 'influencer.testnet/widget/LoveNear',
+  }
+} 
\ No newline at end of file
diff --git a/templates/frontend/next/src/wallets/wallet-selector.js b/templates/frontend/next/src/wallets/wallet-selector.js
new file mode 100644
index 000000000..5899b2803
--- /dev/null
+++ b/templates/frontend/next/src/wallets/wallet-selector.js
@@ -0,0 +1,128 @@
+import { create as createStore } from 'zustand';
+import { distinctUntilChanged, map } from "rxjs";
+import { providers } from 'near-api-js';
+import { setupWalletSelector } from '@near-wallet-selector/core';
+import { setupModal } from '@near-wallet-selector/modal-ui';
+import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
+import { setupHereWallet } from '@near-wallet-selector/here-wallet';
+
+import { NetworkId } from '@/config';
+import { useEffect, useState } from 'react';
+
+export const useWallet = createStore(set => ({
+  signedAccountId: '',
+  logOut: undefined,
+  logIn: undefined,
+  selector: undefined,
+  viewMethod: undefined,
+  callMethod: undefined,
+  setLogActions: ({ logOut, logIn }) => set({ logOut, logIn }),
+  setAuth: ({ signedAccountId }) => set({ signedAccountId }),
+  setMethods: ({ viewMethod, callMethod }) => set({ viewMethod, callMethod }),
+  setStoreSelector: ({ selector }) => set({ selector }),
+}));
+
+export function initWallet({ createAccessKeyFor }) {
+  const setAuth = useWallet(store => store.setAuth);
+  const setLogActions = useWallet(store => store.setLogActions);
+  const setMethods = useWallet(store => store.setMethods);
+  const setStoreSelector = useWallet(store => store.setStoreSelector);
+  const [selector, setSelector] = useState(undefined);
+
+  useEffect(() => {
+    console.log('initWallet')
+    const selector = setupWalletSelector({
+      network: NetworkId,
+      modules: [setupMyNearWallet(), setupHereWallet()]
+    })
+
+    setSelector(selector);
+    setStoreSelector({ selector });
+  }, []);
+
+  useEffect(() => {
+    console.log('selector then')
+    if(!selector) return;
+    
+    selector.then(walletSelector => {
+      const accounts = walletSelector.store.getState().accounts
+      const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
+      setAuth({ signedAccountId });
+
+      walletSelector.store.observable
+        .pipe(
+          map((state) => state.accounts),
+          distinctUntilChanged()
+        )
+        .subscribe((accounts) => {
+          console.log("accounts", accounts)
+          const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
+          setAuth({ signedAccountId });
+        });
+    })
+  }, [selector, setAuth]);
+
+  useEffect(() => {
+    console.log('actions')
+
+    if(!selector) return;
+  
+    // defined logOut and logIn actions
+    const logOut = async () => {
+      const wallet = await (await selector).wallet();
+      await wallet.signOut();
+      setAuth({ signedAccountId: '' });
+    }
+
+    const logIn = async () => {
+      const modal = setupModal(await selector, { contractId: createAccessKeyFor });
+      modal.show();
+    }
+
+    setLogActions({ logOut, logIn });
+  }, [selector, setAuth]);
+
+  useEffect(() => {
+    console.log('methods')
+
+    if(!selector) return;
+
+    const viewMethod = async (contractId, method, args = {}) => {
+      const { network } = (await selector).options;
+      const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+
+      let res = await provider.query({
+        request_type: 'call_function',
+        account_id: contractId,
+        method_name: method,
+        args_base64: Buffer.from(JSON.stringify(args)).toString('base64'),
+        finality: 'optimistic',
+      });
+      return JSON.parse(Buffer.from(res.result).toString());
+    }
+
+    const callMethod = async (contractId, method, args = {}, gas = '30000000000000', deposit = 0) => {
+      const wallet = await (await selector).wallet();
+
+      const outcome = await wallet.signAndSendTransaction({
+        receiverId: contractId,
+        actions: [
+          {
+            type: 'FunctionCall',
+            params: {
+              methodName: method,
+              args,
+              gas,
+              deposit,
+            },
+          },
+        ],
+      });
+
+      return providers.getTransactionLastResult(outcome)
+    }
+
+    setMethods({ viewMethod, callMethod });
+
+  }, [selector]);
+}
\ No newline at end of file
diff --git a/templates/frontend/gateway/src/data/web3.ts b/templates/frontend/next/src/wallets/web3-wallet.ts
similarity index 96%
rename from templates/frontend/gateway/src/data/web3.ts
rename to templates/frontend/next/src/wallets/web3-wallet.ts
index 385f020b4..091596e3c 100644
--- a/templates/frontend/gateway/src/data/web3.ts
+++ b/templates/frontend/next/src/wallets/web3-wallet.ts
@@ -1,3 +1,4 @@
+'use client';
 import type { EIP1193Provider } from '@web3-onboard/core';
 import injectedModule from '@web3-onboard/injected-wallets';
 import ledgerModule from '@web3-onboard/ledger';
@@ -6,8 +7,6 @@ import walletConnectModule from '@web3-onboard/walletconnect';
 import { useEffect, useState } from 'react';
 import { singletonHook } from 'react-singleton-hook';
 
-import icon from '@/assets/images/near-icon.svg';
-
 const web3onboardKey = 'web3-onboard:connectedWallets';
 
 const wcV2InitOptions: any = {
@@ -231,8 +230,8 @@ export const onboard = init({
   ],
   appMetadata: {
     name: 'NEAR',
-    icon: icon.content,
-    description: 'NEAR - BOS',
+    icon: '/next.svg',
+    description: 'NEAR',
   },
   theme: 'dark',
   containerElements: {
@@ -258,8 +257,6 @@ export const useEthersProviderContext = singletonHook(defaultEthersProviderConte
 
       const walletsSub = onboard.state.select('wallets');
 
-      // TODO: do we need to unsubscribe?
-      // const { unsubscribe } = walletsSub.subscribe((wallets) => {
       walletsSub.subscribe((wallets) => {
         const connectedWallets = wallets.map(({ label }) => label);
         localStorage.setItem(web3onboardKey, JSON.stringify(connectedWallets));
@@ -289,4 +286,4 @@ export const useEthersProviderContext = singletonHook(defaultEthersProviderConte
   }, [wallet]);
 
   return ethersProvider;
-});
+});
\ No newline at end of file
diff --git a/templates/frontend/vanilla/.babelrc b/templates/frontend/vanilla/.babelrc
new file mode 100644
index 000000000..dee42829a
--- /dev/null
+++ b/templates/frontend/vanilla/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": ["@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}]],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-class-properties"
+  ]
+}
\ No newline at end of file
diff --git a/templates/frontend/vanilla/.env b/templates/frontend/vanilla/.env
deleted file mode 100644
index f582eb418..000000000
--- a/templates/frontend/vanilla/.env
+++ /dev/null
@@ -1 +0,0 @@
-CONTRACT_NAME=hello.near-examples.testnet
\ No newline at end of file
diff --git a/templates/shared/template.gitignore b/templates/frontend/vanilla/.gitignore
similarity index 100%
rename from templates/shared/template.gitignore
rename to templates/frontend/vanilla/.gitignore
diff --git a/templates/shared/.gitpod.yml b/templates/frontend/vanilla/.gitpod.yml
similarity index 100%
rename from templates/shared/.gitpod.yml
rename to templates/frontend/vanilla/.gitpod.yml
diff --git a/templates/shared/README.md b/templates/frontend/vanilla/README.md
similarity index 100%
rename from templates/shared/README.md
rename to templates/frontend/vanilla/README.md
diff --git a/templates/frontend/vanilla/index.html b/templates/frontend/vanilla/index.html
deleted file mode 100644
index cd43c5c70..000000000
--- a/templates/frontend/vanilla/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="assets/favicon.ico"/>
-  <link rel="apple-touch-icon" href="assets/favicon.ico"/>
-  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> -->
-  <title>Welcome to NEAR</title>
-  <link rel="stylesheet" href="assets/global.css">
-</head>
-<body>
-  <main id="signed-out-flow" style="display: none">
-    <h1>
-      The contract says: <span class="greeting" data-behavior="greeting"></span>
-    </h1>
-    <h3>
-      Welcome to NEAR!
-    </h3>
-    <p>
-      <b data-behavior="contract"></b>
-      is storing a greeting message in the NEAR blockchain. To change it you
-      need to sign in using the NEAR Wallet. It is very simple, just use the
-      button below.
-    </p>
-    <p>
-      Do not worry, this app runs in the test network ("testnet"). It works
-      just like the main network ("mainnet"), but using NEAR Tokens that are
-      only for testing!
-    </p>
-
-    <p>
-      <b> Note </b>: The contract address is being loaded from
-      an <code> env </code> variable. If you chose to add a contract during
-      the wizard, running <code> npm run deploy </code> will deploy the
-      contract code and update the <code> env </code> variable used here.
-    </p>
-    
-    <p style="text-align: center; margin-top: 2.5em">
-      <button id="sign-in-button">Sign in with NEAR Wallet</button>
-    </p>
-
-  </main>
-
-  <div id="signed-in-flow" style="display: none">
-    <button style="float: right" id="sign-out-button">
-      Sign out <span data-behavior="account-id"></span>
-    </button>
-    <main>
-      <h1>
-        The contract says: <span class="greeting" data-behavior="greeting"></span>
-      </h1>
-      <form class="change">
-        <label for="greeting">Change greeting:</label>
-        <div>
-          <input
-                  autocomplete="off"
-                  id="greeting"
-                  data-behavior="greeting"
-          />
-          <button>
-            <span>Save</span>
-            <div class="loader"></div>
-          </button>
-        </div>
-      </form>
-      <p>
-        Look at that! A Hello World app! This greeting is stored on <b data-behavior="contract"></b>.
-      </p>
-      <ol>
-        <li>
-          Look in <code>index.js</code> - you will see a <code>Wallet</code> object being created and used 
-          to interact with the methods <code>set_greeting</code> and <code>get_greeting</code>.
-        </li>
-        <li>
-          These method live in the <a target="_blank" href="https://docs.near.org/develop/contracts/welcome">smart contract</a>,
-          who's code is defined in the <code>contract/</code> folder.
-        </li>
-        <li>
-          When you run <code>npm run deploy</code> the code in the <code>contract/</code> folder is compiled and deployed to the NEAR testnet.
-          You can see how this happens by looking in <code>package.json</code> at the <code>scripts</code> section to
-          find the <code>dev</code> command.
-        </li>
-      </ol>
-      <hr>
-      <p>
-        To keep learning, check out
-        <a target="_blank" href="https://docs.near.org">the NEAR docs</a>
-        or look through some
-        <a target="_blank" href="https://examples.near.org">example apps</a>.
-      </p>
-    </main>
-  </div>
-
-  <script src="index.js" type="module"></script>
-</body>
-</html>
diff --git a/templates/frontend/vanilla/index.js b/templates/frontend/vanilla/index.js
deleted file mode 100644
index b5d113787..000000000
--- a/templates/frontend/vanilla/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import 'regenerator-runtime/runtime';
-import { Wallet } from './near-wallet';
-
-const CONTRACT_ADDRESS = process.env.CONTRACT_NAME;
-
-// When creating the wallet you can optionally ask to create an access key
-// Having the key enables to call non-payable methods without interrupting the user to sign
-const wallet = new Wallet({ createAccessKeyFor: CONTRACT_ADDRESS });
-
-// Setup on page load
-window.onload = async () => {
-  let isSignedIn = await wallet.startUp();
-
-  if (isSignedIn) {
-    signedInFlow();
-  } else {
-    signedOutFlow();
-  }
-
-  getGreeting();
-};
-
-// Button clicks
-document.querySelector('form').onsubmit = setGreeting;
-document.querySelector('#sign-in-button').onclick = () => { wallet.signIn(); };
-document.querySelector('#sign-out-button').onclick = () => { wallet.signOut(); };
-
-async function setGreeting(event) {
-  // handle UI
-  event.preventDefault();
-  const { greeting } = event.target.elements;
-
-  document.querySelector('#signed-in-flow main')
-    .classList.add('please-wait');
-
-  // use the wallet to send the greeting to the Smart Contract
-  await wallet.callMethod({ method: 'set_greeting', args: { message: greeting.value }, contractId: CONTRACT_ADDRESS });
-
-  // query the new greeting
-  await getGreeting();
-
-  // handle UI stuff
-  document.querySelector('#signed-in-flow main').classList.remove('please-wait');
-}
-
-async function getGreeting() {
-  // use the wallet to query the Smart Contract
-  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: CONTRACT_ADDRESS });
-
-  // handle UI stuff
-  document.querySelectorAll('[data-behavior=greeting]').forEach(el => {
-    el.innerText = currentGreeting;
-    el.value = currentGreeting;
-  });
-}
-
-// UI: Display the signed-out-flow container
-function signedOutFlow() {
-  document.querySelector('#signed-in-flow').style.display = 'none';
-  document.querySelector('#signed-out-flow').style.display = 'block';
-}
-
-// UI: Displaying the signed in flow container and fill in account-specific data
-function signedInFlow() {
-  document.querySelector('#signed-out-flow').style.display = 'none';
-  document.querySelector('#signed-in-flow').style.display = 'block';
-  document.querySelectorAll('[data-behavior=account-id]').forEach(el => {
-    el.innerText = wallet.accountId;
-  });
-}
\ No newline at end of file
diff --git a/templates/frontend/vanilla/package.json b/templates/frontend/vanilla/package.json
index f640691a1..528827708 100644
--- a/templates/frontend/vanilla/package.json
+++ b/templates/frontend/vanilla/package.json
@@ -3,27 +3,41 @@
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
   "scripts": {
-    "start": "parcel index.html --open",
-    "dev": "parcel index.html --open",
-    "build": "parcel build index.html --public-url ./"
+    "dev": "webpack serve --open"
   },
   "devDependencies": {
-    "buffer": "^6.0.0",
-    "events": "^3.3.0",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "babel-loader": "^9.1.3",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.3",
     "https-browserify": "^1.0.0",
-    "nodemon": "^2.0.16",
-    "parcel": "^2.7.0",
     "process": "^0.11.10",
-    "punycode": "^1.4.1",
-    "stream-http": "^3.1.0",
-    "url": "^0.11.0"
+    "stream-http": "^3.2.0",
+    "style-loader": "^3.3.3",
+    "url": "^0.11.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@near-wallet-selector/core": "^8.7.0",
-    "@near-wallet-selector/ledger": "^8.7.0",
+    "@near-wallet-selector/here-wallet": "^8.7.0",
     "@near-wallet-selector/modal-ui": "^8.7.0",
     "@near-wallet-selector/my-near-wallet": "^8.7.0",
-    "@near-wallet-selector/near-wallet": "^8.7.0",
-    "near-api-js": "^2.1.4"
+    "crypto-browserify": "^3.12.0",
+    "near-api-js": "^2.1.4",
+    "near-social-vm": "github:NearSocial/VM#2.5.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "semantic-ui-react": "^2.1.4",
+    "stream": "^0.0.2"
   }
 }
diff --git a/templates/frontend/vanilla/assets/favicon.ico b/templates/frontend/vanilla/src/assets/favicon.ico
similarity index 100%
rename from templates/frontend/vanilla/assets/favicon.ico
rename to templates/frontend/vanilla/src/assets/favicon.ico
diff --git a/templates/frontend/vanilla/assets/global.css b/templates/frontend/vanilla/src/assets/global.css
similarity index 69%
rename from templates/frontend/vanilla/assets/global.css
rename to templates/frontend/vanilla/src/assets/global.css
index 0159390d1..01408eb10 100644
--- a/templates/frontend/vanilla/assets/global.css
+++ b/templates/frontend/vanilla/src/assets/global.css
@@ -12,40 +12,47 @@ html {
   --primary: #FF585D;
   --secondary: #0072CE;
 
-  background-color: var(--bg);
   color: var(--fg);
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
   font-size: calc(0.9em + 0.5vw);
   line-height: 1.3;
 }
 
 body {
   margin: 0;
-  padding: 1em;
+  height: 100vh;
+  background: linear-gradient(to bottom, transparent, rgb(var(--shadow))) rgb(var(--light-gray));
+  background-color: var(--shadow) !important;
 }
 
-main {
-  margin: 0 auto;
-  max-width: 26em;
+a {
+  color: var(--fg) !important;
+  text-decoration: none !important;
 }
 
-main.please-wait {}
+.container{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem;
+  padding-top: 0;
+}
 
 h1 {
-  background-image: url(./logo-black.svg);
-  background-position: center 1em;
-  background-repeat: no-repeat;
-  background-size: auto 1.5em;
-  margin-top: 0;
-  padding: 3.5em 0 0;
   text-align: center;
   font-size: 1.5em;
 }
+
 .greeting {
   color: var(--secondary);
   text-decoration: underline;
 }
-h2 {
+
+.alert{
+  max-width: 410px;
+  font-size: 13px;
   text-align: center;
 }
 
@@ -53,22 +60,6 @@ h2 {
   pointer-events: none;
 }
 
-ul.information  {
-  margin: 2em 0 2em 0;
-  padding: 0;
-  text-align: left;
-  font-size: 0.8em;
-
-}
-.information li:first-child {
-  border-top: 1px solid var(--light-gray);
-}
-.information li {
-  padding: 0.5em 0;
-  border-bottom: 1px solid var(--light-gray);
-  list-style: none;
-}
-
 .change {
   display: flex;
   flex-direction: column;
@@ -76,7 +67,6 @@ ul.information  {
   justify-content: space-evenly;
   align-items: stretch;
   font-size: 1em;
-  border: 2px solid var(--light-gray);
   padding: 0.5em;
 }
 .change > div {
@@ -90,12 +80,6 @@ ul.information  {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-.change label {
-  display: block;
-  text-align: left;
-  margin-right: 10px;
-  padding-bottom: 0.5em;
-}
 .change button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -122,30 +106,15 @@ button, input {
   outline: none;
 }
 
-main.please-wait .change button {
+.please-wait .change button {
   position: relative;
   pointer-events: none;
-  background-color: white;
 }
-main.please-wait .change button span {
+.please-wait .change button span {
   visibility: hidden;
 }
 
-button {
-  background-color: var(--secondary);
-  border-radius: 5px;
-  border: none;
-  color: #efefef;
-  cursor: pointer;
-  padding: 0.3em 0.75em;
-  transition: transform 30ms;
-}
-button:hover, button:focus {
-  box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset;
-}
-
 input {
-  background-color: var(--light-gray);
   border: none;
   border-radius: 5px 0 0 5px;
   caret-color: var(--primary);
@@ -184,8 +153,8 @@ li {
   }
 }
 
-main.please-wait .loader,
-main.please-wait .loader:after{
+.please-wait .loader,
+.please-wait .loader:after{
   display: inline-block;
 }
 .loader,
diff --git a/templates/frontend/vanilla/assets/logo-black.svg b/templates/frontend/vanilla/src/assets/logo-black.svg
similarity index 100%
rename from templates/frontend/vanilla/assets/logo-black.svg
rename to templates/frontend/vanilla/src/assets/logo-black.svg
diff --git a/templates/frontend/vanilla/assets/logo-white.svg b/templates/frontend/vanilla/src/assets/logo-white.svg
similarity index 100%
rename from templates/frontend/vanilla/assets/logo-white.svg
rename to templates/frontend/vanilla/src/assets/logo-white.svg
diff --git a/templates/frontend/vanilla/src/components.html b/templates/frontend/vanilla/src/components.html
new file mode 100644
index 000000000..f47c633ba
--- /dev/null
+++ b/templates/frontend/vanilla/src/components.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="assets/favicon.ico" />
+  <link rel="apple-touch-icon" href="assets/favicon.ico" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
+  <title>Welcome to NEAR</title>
+  <link rel="stylesheet" href="assets/global.css">
+</head>
+
+<body>
+  <nav class="navbar">
+    <div class="container-fluid navbar-expand-lg">
+      <a href="/"><img src="./assets/logo-black.svg" alt="Near" height="40" class="d-inline-block align-text-top" /></a>
+      <div class='navbar-nav pt-1'>
+        <button class="btn btn-secondary" id="sign-in-button"> Login </button>
+        <button class="btn btn-secondary" id="sign-out-button"> Logout <span data-behavior="account-id"></span></button>
+      </div>
+    </div>
+  </nav>
+
+  <div class="alert alert-info mx-auto mt-1" role="alert">
+    Loading components from: v1.social08.testnet
+  </div>
+
+  <div class="alert alert-danger mx-auto mt-1" role="alert">
+    Ethereum components do <b>not</b> work on this vanilla-js template
+  </div>
+
+  <div class="container my-4 pt-4">
+    <div id="components"> </div>
+
+    <div class="row pt-5">
+      <div class="col-6">
+        <a href="/hello-near.html" className={styles.card} rel="noopener noreferrer">
+          <h3>
+            NEAR Integration <span>-&gt;</span>
+          </h3>
+          <p class="small">Discover how simple it is to interact with a NEAR smart contract.</p>
+        </a>
+      </div>
+      <div class="col-6">
+        <a href="https://docs.near.org/develop/integrate/quickstart-frontend" target="_blank">
+          <h3>
+            NEAR Docs <span>-&gt;</span>
+          </h3>
+          <p class="small">Learn how this application works, and what you can build on NEAR.</p>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <script src="components.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/frontend/vanilla/src/components.js b/templates/frontend/vanilla/src/components.js
new file mode 100644
index 000000000..0cb2f3094
--- /dev/null
+++ b/templates/frontend/vanilla/src/components.js
@@ -0,0 +1,63 @@
+import { createRoot } from 'react-dom/client';
+import { Wallet } from './near-wallet';
+import { useInitNear, Widget } from 'near-social-vm';
+import { useEffect } from 'react';
+
+const CONTRACT_ADDRESS = 'v1.social08.testnet';
+
+// When creating the wallet you can optionally ask to create an access key
+// Having the key enables to call non-payable methods without interrupting the user to sign
+const wallet = new Wallet({createAccessKeyFor: CONTRACT_ADDRESS, network: 'testnet'});
+
+export default function Component({ src }) {
+
+  const { initNear } = useInitNear();
+
+  useEffect(() => {
+    initNear && initNear({ networkId: wallet.network, selector: wallet.selector });
+  }, [initNear]);
+
+  return (
+    <div>
+      <Widget src={src} />
+      <p className="mt-4 small"> <span class="text-secondary">Source:</span> <a href={`https://near.social/mob.near/widget/WidgetSource?src=${src}`}> {src} </a> </p>
+    </div>
+  );
+}
+
+window.onload = async () => {
+  let isSignedIn = await wallet.startUp();
+  isSignedIn? signedInUI(): signedOutUI();
+
+  const domNode = document.getElementById('components');
+  const root = createRoot(domNode);
+  root.render(
+    <div className='row'>
+      <div className='col-6'>
+        <Component src='influencer.testnet/widget/HelloNear' />
+        <p class="my-2">&nbsp;</p>
+        <Component src='influencer.testnet/widget/LoveNear' />
+      </div>
+      <div className='col-6'>
+        <Component src='influencer.testnet/widget/Lido' />      
+      </div>
+    </div>
+  );
+};
+
+// Button clicks
+document.querySelector('#sign-in-button').onclick = () => { wallet.signIn() };
+document.querySelector('#sign-out-button').onclick = () => { wallet.signOut() };
+
+// UI: Display the signed-out container
+function signedOutUI() {
+  document.querySelectorAll('#sign-out-button').forEach(el => el.style.display = 'none');
+}
+
+// UI: Displaying the signed in flow container and fill in account-specific data
+function signedInUI() {
+  document.querySelectorAll('#sign-in-button').forEach(el => el.style.display = 'none');
+  document.querySelectorAll('[data-behavior=account-id]').forEach(el => {
+    el.innerText = wallet.accountId;
+  });
+}
\ No newline at end of file
diff --git a/templates/frontend/vanilla/src/hello-near.html b/templates/frontend/vanilla/src/hello-near.html
new file mode 100644
index 000000000..44916bf19
--- /dev/null
+++ b/templates/frontend/vanilla/src/hello-near.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="assets/favicon.ico" />
+  <link href="assets/global.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+    crossorigin="anonymous"></script>
+  <title>Welcome to NEAR</title>
+</head>
+
+<body>
+  <nav class="navbar">
+    <div class="container-fluid navbar-expand-lg">
+      <a href="/"><img src="./assets/logo-black.svg" alt="Near" height="40" class="d-inline-block align-text-top" /></a>
+      <div class='navbar-nav pt-1'>
+        <button class="btn btn-secondary" id="sign-in-button"> Login </button>
+        <button class="btn btn-secondary" id="sign-out-button"> Logout <span data-behavior="account-id"></span></button>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+
+    <div class="alert alert-info mx-auto mt-3" role="alert">
+      Interacting with the contract: hello.near-examples.testnet
+    </div>
+
+    <div class="row my-5 pt-5 flex-1">
+      <div class="col-8">
+        <h1> The contract says: <span class="greeting" id="displayGreeting"></span> </h1>
+      </div>
+      <div class="col-4">
+        <div id="signed-out" class="small">
+          Please login to change the greeting
+        </div>
+        <div id="signed-in">
+          <form class="change">
+            <div className="input-group">
+              <input placeholder="Store a new greeting" id="greeting" />
+              <button class="btn btn-primary">
+                <span>Save</span>
+                <div class="loader"></div>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="row pt-5">
+      <div class="col-6">
+        <a href="/components.html">
+          <h3>
+            Web3 Components <span>-&gt;</span>
+          </h3>
+          <p class="small">See how Web3 components can help you to create multi-chain apps.</p>
+        </a>
+      </div>
+      <div class="col-6">
+        <a href="https://docs.near.org/develop/integrate/quickstart-frontend" target="_blank">
+          <h3>
+            NEAR Docs <span>-&gt;</span>
+          </h3>
+          <p class="small">Learn how this application works, and what you can build on NEAR.</p>
+        </a>
+      </div>
+    </div>
+
+  </div>
+
+  <script src="hello.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/frontend/vanilla/src/hello.js b/templates/frontend/vanilla/src/hello.js
new file mode 100644
index 000000000..3fd61e8f4
--- /dev/null
+++ b/templates/frontend/vanilla/src/hello.js
@@ -0,0 +1,61 @@
+import { Wallet } from './near-wallet';
+
+const CONTRACT_ADDRESS = 'v1.social08.testnet';
+
+// When creating the wallet you can optionally ask to create an access key
+// Having the key enables to call non-payable methods without interrupting the user to sign
+const wallet = new Wallet({createAccessKeyFor: CONTRACT_ADDRESS, network: 'testnet'});
+
+// Setup on page load
+window.onload = async () => {
+  let isSignedIn = await wallet.startUp();
+  isSignedIn? signedInUI(): signedOutUI();
+  getGreeting();
+};
+
+// Button clicks
+document.querySelector('form').onsubmit = setGreeting;
+document.querySelector('#sign-in-button').onclick = () => { wallet.signIn() };
+document.querySelector('#sign-out-button').onclick = () => { wallet.signOut() };
+
+async function setGreeting(event) {
+  event.preventDefault();
+
+  // handle UI
+  document.querySelector('#signed-in').classList.add('please-wait');
+
+  // use the wallet to send the greeting to the Smart Contract
+  const { greeting } = event.target.elements;
+  await wallet.callMethod({ method: 'set_greeting', args: { greeting: greeting.value }, contractId: CONTRACT_ADDRESS });
+
+  // query the new greeting
+  await getGreeting();
+
+  // handle UI
+  document.querySelector('#signed-in').classList.remove('please-wait');
+}
+
+async function getGreeting() {
+  // use the wallet to query the Smart Contract
+  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: CONTRACT_ADDRESS });
+
+  // Display it
+  document.querySelector('#displayGreeting').innerText = currentGreeting;
+}
+
+// UI: Hide signed-in elements
+function signedOutUI() { hide('#signed-in'); hide('#sign-out-button'); }
+
+// UI: Hide signed-out elements
+function signedInUI() {
+  hide('#signed-out');
+  hide('#sign-in-button');
+
+  document.querySelectorAll('[data-behavior=account-id]').forEach(el => {
+    el.innerText = wallet.accountId;
+  });
+}
+
+function hide(id){
+  document.querySelectorAll(id).forEach(el => el.style.display = 'none');
+}
\ No newline at end of file
diff --git a/templates/frontend/vanilla/src/index.html b/templates/frontend/vanilla/src/index.html
new file mode 100644
index 000000000..7f9888c9d
--- /dev/null
+++ b/templates/frontend/vanilla/src/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="assets/favicon.ico" />
+  <link href="assets/global.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+    crossorigin="anonymous"></script>
+  <title>Welcome to NEAR</title>
+</head>
+
+<body>
+  <nav class="navbar">
+    <div class="container-fluid navbar-expand-lg">
+      <a href="/"><img src="./assets/logo-black.svg" alt="Near" height="40" class="d-inline-block align-text-top" /></a>
+      <div class='navbar-nav pt-1'>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+
+    <div class="alert alert-info mx-auto mt-3 text-left" role="alert">
+      For educational purposes only. To build production ready apps use the Next.js template.
+    </div>
+
+    <h1 class="mt-5 pt-5"> Welcome to Near </h1>
+
+    <div class="row pt-5 mt-5">
+      <div class="col-6">
+        <a href="/hello-near.html" className={styles.card} rel="noopener noreferrer">
+          <h3>
+            NEAR Integration <span>-&gt;</span>
+          </h3>
+          <p class="small">Discover how simple it is to interact with a NEAR smart contract.</p>
+        </a>
+      </div>
+      <div class="col-6">
+        <a href="/components.html">
+          <h3>
+            Web3 Components <span>-&gt;</span>
+          </h3>
+          <p class="small">See how Web3 components can help you to create multi-chain apps.</p>
+        </a>
+      </div>
+      <div class="col-6 mt-md-3">
+        <a href="https://docs.near.org/develop/integrate/quickstart-frontend" target="_blank">
+          <h3>
+            NEAR Docs <span>-&gt;</span>
+          </h3>
+          <p class="small">Learn how this application works, and what you can build on NEAR.</p>
+        </a>
+      </div>
+    </div>
+
+  </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/frontend/vanilla/near-wallet.js b/templates/frontend/vanilla/src/near-wallet.js
similarity index 78%
rename from templates/frontend/vanilla/near-wallet.js
rename to templates/frontend/vanilla/src/near-wallet.js
index d9625f24d..75de86808 100644
--- a/templates/frontend/vanilla/near-wallet.js
+++ b/templates/frontend/vanilla/src/near-wallet.js
@@ -14,54 +14,55 @@ const NO_DEPOSIT = '0';
 
 // Wallet that simplifies using the wallet selector
 export class Wallet {
-  walletSelector;
+  selector;
   wallet;
   network;
   createAccessKeyFor;
 
-  constructor({ createAccessKeyFor = undefined, network = 'testnet' }) {
+  constructor({ createAccessKeyFor = undefined, network = 'mainnet' }) {
     // Login to a wallet passing a contractId will create a local
     // key, so the user skips signing non-payable transactions.
     // Omitting the accountId will result in the user being
     // asked to sign all transactions.
-    this.createAccessKeyFor = createAccessKeyFor;
-    this.network = 'testnet';
-  }
-
-  // To be called when the website loads
-  async startUp() {
-    this.walletSelector = await setupWalletSelector({
+    this.createAccessKeyFor = createAccessKeyFor
+    this.network = network
+    this.selector = setupWalletSelector({
       network: this.network,
       modules: [setupMyNearWallet()],
     });
+  }
 
-    const isSignedIn = this.walletSelector.isSignedIn();
+  // To be called when the website loads
+  async startUp() {
+    const walletSelector = await this.selector;
+    const isSignedIn = walletSelector.isSignedIn();
 
     if (isSignedIn) {
-      this.wallet = await this.walletSelector.wallet();
-      this.accountId = this.walletSelector.store.getState().accounts[0].accountId;
+      this.wallet = await walletSelector.wallet();
+      this.accountId = walletSelector.store.getState().accounts[0].accountId;
     }
 
     return isSignedIn;
   }
 
   // Sign-in method
-  signIn() {
+  async signIn() {
     const description = 'Please select a wallet to sign in.';
-    const modal = setupModal(this.walletSelector, { contractId: this.createAccessKeyFor, description });
+    const modal = setupModal(await this.selector, { contractId: this.createAccessKeyFor, description });
     modal.show();
   }
 
   // Sign-out method
-  signOut() {
-    this.wallet.signOut();
+  async signOut() {
+    await this.wallet.signOut();
     this.wallet = this.accountId = this.createAccessKeyFor = null;
     window.location.replace(window.location.origin + window.location.pathname);
   }
 
   // Make a read-only call to retrieve information from the network
   async viewMethod({ contractId, method, args = {} }) {
-    const { network } = this.walletSelector.options;
+    const walletSelector = await this.selector;
+    const { network } = walletSelector.options;
     const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
 
     let res = await provider.query({
@@ -96,7 +97,8 @@ export class Wallet {
 
   // Get transaction result from the network
   async getTransactionResult(txhash) {
-    const { network } = this.walletSelector.options;
+    const walletSelector = await this.selector;
+    const { network } = walletSelector.options;
     const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
 
     // Retrieve transaction result from the network
diff --git a/templates/frontend/vanilla/webpack.config.js b/templates/frontend/vanilla/webpack.config.js
new file mode 100644
index 000000000..a37130a80
--- /dev/null
+++ b/templates/frontend/vanilla/webpack.config.js
@@ -0,0 +1,79 @@
+const path = require('path');
+const webpack = require('webpack')
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    hello: './src/hello.js',
+    components: './src/components.js',
+    'near-wallet': './src/near-wallet.js',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    static: './dist',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  resolve: {
+    fallback: {
+      https: require.resolve("https-browserify"),
+      http: require.resolve("stream-http"),
+      crypto: require.resolve("crypto-browserify"),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+            fullySpecified: false
+        }
+      }
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [{ from: 'src/assets', to: 'assets' }]
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: './src/index.html',
+      chunks: ['index'],
+    }), 
+    new HtmlWebpackPlugin({
+      filename: 'hello-near.html',
+      template: './src/hello-near.html',
+      chunks: ['index'],
+    }), 
+    new HtmlWebpackPlugin({
+      filename: 'components.html',
+      template: './src/components.html',
+      chunks: ['components'],
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ]
+};
\ No newline at end of file
diff --git a/templates/integration-tests/rust-tests/Cargo.toml b/templates/sandbox-tests/sandbox-rs/Cargo.toml
similarity index 87%
rename from templates/integration-tests/rust-tests/Cargo.toml
rename to templates/sandbox-tests/sandbox-rs/Cargo.toml
index bc36ff435..8d54a2946 100644
--- a/templates/integration-tests/rust-tests/Cargo.toml
+++ b/templates/sandbox-tests/sandbox-rs/Cargo.toml
@@ -1,22 +1,22 @@
 [package]
-name = "integration-tests"
+name = "sandbox"
 version = "1.0.0"
 publish = false
-edition = "2018"
+edition = "2021"
 
 [dev-dependencies]
 anyhow = "1.0"
 borsh = "0.9"
 maplit = "1.0"
 near-units = "0.2.0"
-# arbitrary_precision enabled for u128 types that workspaces requires for Balance types
-serde_json = { version = "1.0", features = ["arbitrary_precision"] }
 tokio = { version = "1.18.1", features = ["full"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3.11", features = ["env-filter"] }
 workspaces = "0.6.0"
 pkg-config = "0.3.1"
+serde_json = { version = "1.0", features = ["arbitrary_precision"] }
+# arbitrary_precision enabled for u128 types that workspaces requires for Balance types
 
 [[example]]
-name = "integration-tests"
+name = "sandbox"
 path = "src/tests.rs"
diff --git a/templates/integration-tests/rust-tests/src/tests.rs b/templates/sandbox-tests/sandbox-rs/src/tests.rs
similarity index 100%
rename from templates/integration-tests/rust-tests/src/tests.rs
rename to templates/sandbox-tests/sandbox-rs/src/tests.rs
diff --git a/templates/integration-tests/js-tests/ava.config.cjs b/templates/sandbox-tests/sandbox-ts/ava.config.cjs
similarity index 100%
rename from templates/integration-tests/js-tests/ava.config.cjs
rename to templates/sandbox-tests/sandbox-ts/ava.config.cjs
diff --git a/templates/integration-tests/js-tests/package-lock.json b/templates/sandbox-tests/sandbox-ts/package-lock.json
similarity index 100%
rename from templates/integration-tests/js-tests/package-lock.json
rename to templates/sandbox-tests/sandbox-ts/package-lock.json
diff --git a/templates/integration-tests/js-tests/package.json b/templates/sandbox-tests/sandbox-ts/package.json
similarity index 56%
rename from templates/integration-tests/js-tests/package.json
rename to templates/sandbox-tests/sandbox-ts/package.json
index deffe68f4..2e88698b1 100644
--- a/templates/integration-tests/js-tests/package.json
+++ b/templates/sandbox-tests/sandbox-ts/package.json
@@ -9,12 +9,12 @@
     "test": "ava"
   },
   "devDependencies": {
-    "@types/bn.js": "^5.1.0",
-    "@types/node": "^18.6.2",
-    "ava": "^4.2.0",
-    "near-workspaces": "^3.2.1",
-    "ts-node": "^10.8.0",
-    "typescript": "^4.7.2"
+    "@types/bn.js": "^5.1.4",
+    "@types/node": "^20.8.10",
+    "ava": "^5.3.1",
+    "near-workspaces": "^3.3.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
   },
   "dependencies": {}
 }
diff --git a/templates/integration-tests/js-tests/src/main.ava.ts b/templates/sandbox-tests/sandbox-ts/src/main.ava.ts
similarity index 100%
rename from templates/integration-tests/js-tests/src/main.ava.ts
rename to templates/sandbox-tests/sandbox-ts/src/main.ava.ts
diff --git a/test/e2e.sh b/test/e2e.sh
index f8a1e2f02..af3af0e62 100755
--- a/test/e2e.sh
+++ b/test/e2e.sh
@@ -25,13 +25,13 @@ test () {
 }
 
 ## CONTRACT:JS SANDBOX:JS
-scaffold js none js
-test "js_none_js"
+scaffold js none ts
+test "js_none_ts"
 
-## CONTRACT:RUST SANDBOX:JS
-scaffold rust none js
-test "rust_none_js"
+## CONTRACT:RUST SANDBOX:TS
+scaffold rust none ts
+test "rust_none_ts"
 
 ### CONTRACT:RUST SANDBOX:RUST
-scaffold rust none rust
-test "rust_none_rust"
\ No newline at end of file
+scaffold rust none rs
+test "rust_none_rs"
\ No newline at end of file
diff --git a/test/make.test.ts b/test/make.test.ts
index 666fa11ec..12838d7ff 100644
--- a/test/make.test.ts
+++ b/test/make.test.ts
@@ -6,8 +6,8 @@ import {Contract, Frontend, TestingFramework} from '../src/types';
 
 describe('create', () => {
   const contracts: Contract[] = ['js', 'rust', 'none'];
-  const frontends: Frontend[] = ['gateway', 'vanilla', 'none'];
-  const tests: TestingFramework[] = ['js', 'rust'];
+  const frontends: Frontend[] = ['next', 'vanilla', 'none'];
+  const tests: TestingFramework[] = ['ts', 'rs'];
   // all combinations of the above
   const testMatrix = contracts.flatMap(c => frontends.flatMap(f => tests.map(t => ([c, f, t]))));
 
diff --git a/test/user-input.test.ts b/test/user-input.test.ts
index 72842ee59..5e25734f6 100644
--- a/test/user-input.test.ts
+++ b/test/user-input.test.ts
@@ -24,7 +24,7 @@ describe('messages', () => {
     show.successContractToText('js');
     show.successContractToText('rust');
 
-    show.successFrontendToText('gateway');
+    show.successFrontendToText('next');
     show.successFrontendToText('vanilla');
     show.successFrontendToText('none');
 
@@ -40,8 +40,8 @@ describe('messages', () => {
 describe('test success message', () => {
   let showSpy;
   const contracts: Contract[] = ['js', 'rust', 'none'];
-  const frontends: Frontend[] = ['gateway', 'vanilla', 'none'];
-  const tests: TestingFramework[] = ['js', 'rust'];
+  const frontends: Frontend[] = ['next', 'vanilla', 'none'];
+  const tests: TestingFramework[] = ['ts', 'rs'];
   const install = [true, false];
   // all combinations of the above
   const testMatrix = contracts.flatMap(c => frontends.flatMap(f => tests.flatMap(t => install.map(i => ([c, f, t, i])))));