diff --git a/www/apps/frontend/src/app/app.component.html b/www/apps/frontend/src/app/app.component.html
index 0a323d2..9b93beb 100644
--- a/www/apps/frontend/src/app/app.component.html
+++ b/www/apps/frontend/src/app/app.component.html
@@ -9,5 +9,5 @@
   ></casper-ui-header>
 </header>
 <main>
-  <router-outlet class="contents"></router-outlet>
+  <casper-deployer></casper-deployer>
 </main>
diff --git a/www/apps/frontend/src/app/app.component.scss b/www/apps/frontend/src/app/app.component.scss
index 48f13b6..6708e5d 100644
--- a/www/apps/frontend/src/app/app.component.scss
+++ b/www/apps/frontend/src/app/app.component.scss
@@ -1,4 +1,14 @@
 :host {
   display: grid;
-  grid-template-rows: 3.75rem auto;
+  grid-template-rows: 3.75rem minmax(0, 1fr);
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+main {
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
 }
diff --git a/www/apps/frontend/src/app/app.component.spec.ts b/www/apps/frontend/src/app/app.component.spec.ts
index 6d8fae8..e812be1 100644
--- a/www/apps/frontend/src/app/app.component.spec.ts
+++ b/www/apps/frontend/src/app/app.component.spec.ts
@@ -1,15 +1,23 @@
 import { TestBed } from '@angular/core/testing';
-import { DEPLOYER_TOKEN } from '@casper-util/wasm';
-import { AppComponent } from './app.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ENV_CONFIG, config } from '@casper-util/config';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
+import { DEPLOYER_TOKEN } from '@casper-util/wasm';
+import { ENV_CONFIG, config } from '@casper-util/config';
+import { DeployerComponent } from '@casper-deployer/deployer';
+import { AppComponent } from './app.component';
 
 jest.mock('casper-rust-wasm-sdk', () => ({
   CasperWallet: jest.fn().mockImplementation(() => ({})),
 }));
 
+@Component({
+  selector: 'casper-deployer',
+  standalone: true,
+  template: '',
+})
+class DeployerStubComponent {}
+
 describe('AppComponent', () => {
   let mockHttpClient: Partial<HttpClient>;
 
@@ -28,7 +36,12 @@ describe('AppComponent', () => {
         { provide: ENV_CONFIG, useValue: config },
       ],
       schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(AppComponent, {
+        remove: { imports: [DeployerComponent] },
+        add: { imports: [DeployerStubComponent] },
+      })
+      .compileComponents();
   });
 
   it('should create the app', () => {
diff --git a/www/apps/frontend/src/app/app.component.ts b/www/apps/frontend/src/app/app.component.ts
index b5b98a8..e4d1b9b 100644
--- a/www/apps/frontend/src/app/app.component.ts
+++ b/www/apps/frontend/src/app/app.component.ts
@@ -16,13 +16,13 @@ import { HeaderComponent } from '@casper-ui/header';
 import { User } from '@casper-api/api-interfaces';
 import { DEPLOYER_TOKEN } from '@casper-util/wasm';
 import { Deployer } from 'deployer';
-import { RouterModule } from '@angular/router';
+import { DeployerComponent } from '@casper-deployer/deployer';
 import { RouteurHubService } from '@casper-util/routeur-hub';
 import { StorageService } from '@casper-util/storage';
 import { DeployerService } from '@casper-data/data-access-deployer';
 import { motesToCSPR } from 'casper-rust-wasm-sdk';
 import { WalletService } from '@casper-util/wallet';
-const imports = [CommonModule, RouterModule, HeaderComponent];
+const imports = [CommonModule, HeaderComponent, DeployerComponent];
 
 @Component({
   selector: 'casper-root',
diff --git a/www/apps/frontend/src/main.ts b/www/apps/frontend/src/main.ts
index a3b5ee2..4eee5bc 100644
--- a/www/apps/frontend/src/main.ts
+++ b/www/apps/frontend/src/main.ts
@@ -2,7 +2,7 @@ import {
   HttpClient,
   provideHttpClient,
   withInterceptorsFromDi,
-  withXhr
+  withXhr,
 } from '@angular/common/http';
 import {
   enableProdMode,
@@ -16,7 +16,6 @@ import { config, ENV_CONFIG } from '@casper-util/config';
 import { WasmModule } from '@casper-util/wasm';
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
-import { RouterModule, Routes } from '@angular/router';
 import { Toaster, TOASTER_TOKEN } from '@casper-util/toaster';
 declare const toastr: Toaster;
 
@@ -24,16 +23,8 @@ if (environment.production) {
   enableProdMode();
 }
 
-const ROUTES: Routes = [
-  {
-    path: '',
-    loadComponent: () =>
-      import('@casper-deployer/deployer').then((m) => m.DeployerComponent),
-  },
-];
-
 const providers: Array<Provider | EnvironmentProviders> = [
-  importProvidersFrom([WasmModule, RouterModule.forRoot(ROUTES)]),
+  importProvidersFrom([WasmModule]),
   provideHttpClient(withXhr(), withInterceptorsFromDi()),
 ];
 
diff --git a/www/apps/frontend/src/styles.scss b/www/apps/frontend/src/styles.scss
index 61bc3f0..df0f9dc 100644
--- a/www/apps/frontend/src/styles.scss
+++ b/www/apps/frontend/src/styles.scss
@@ -6,8 +6,10 @@ html,
 body {
   display: grid;
   height: 100%;
+  max-height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 textarea {
diff --git a/www/libs/feature/deployer/src/lib/deployer/deployer.component.scss b/www/libs/feature/deployer/src/lib/deployer/deployer.component.scss
index 28d68e3..f5a382a 100644
--- a/www/libs/feature/deployer/src/lib/deployer/deployer.component.scss
+++ b/www/libs/feature/deployer/src/lib/deployer/deployer.component.scss
@@ -1,10 +1,39 @@
 :host {
   display: grid;
   justify-content: center;
-  align-content: center;
+  align-content: stretch;
+  align-items: stretch;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: 1fr;
+  grid-template-rows: minmax(0, 1fr);
   grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  padding: 1rem;
+  grid-row-gap: 0;
+  padding: 0.75rem 1rem;
+  box-sizing: border-box;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+:host > section {
+  min-height: 0;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+:host > section:last-of-type {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Modal host must not create a second grid row (was +16px row-gap overflow). */
+:host > casper-deployer-arg-builder {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  z-index: 40;
 }
diff --git a/www/libs/feature/deployer/src/lib/get-deploy/get-deploy.component.html b/www/libs/feature/deployer/src/lib/get-deploy/get-deploy.component.html
index 3ce1709..55686fb 100644
--- a/www/libs/feature/deployer/src/lib/get-deploy/get-deploy.component.html
+++ b/www/libs/feature/deployer/src/lib/get-deploy/get-deploy.component.html
@@ -6,7 +6,7 @@ <h2 class="title">Transaction Info</h2>
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
         for="activePublicKey"
       >
-        Transaction hash <input type="reset" value="clear" (click)="reset()" />
+        Hash <input type="reset" value="clear" (click)="reset()" />
       </label>
       <div class="mb-2">
         <input
diff --git a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html
index 30fc09a..ccd4f03 100644
--- a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html
+++ b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html
@@ -4,25 +4,26 @@ <h2 class="title">Transaction</h2>
     <div class="mb-4">
       <label
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
-        for="apiUrl"
+        for="chainName"
       >
         Chain name
         <input type="reset" value="clear" (click)="resetFirstForm($event)" />
       </label>
-      <div class="mb-2">
+      <div class="mb-2 flex gap-2 items-stretch">
         <input
           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           name="chainName"
+          id="chainName"
           #chainNameElt
           type="search"
+          (change)="onChainNameInput()"
           [placeholder]="'ex: ' + config['chain_name_testnet']"
         />
-      </div>
-      <div class="mb-2">
         <select
           (change)="selectChainName($event)"
           #chainNameSelectElt
-          class="border border-gray-300 text-gray-900 text-xs focus:outline-none rounded focus:shadow-outline block w-full p-2.5"
+          class="border border-gray-300 text-gray-900 text-xs focus:outline-none rounded focus:shadow-outline block w-40 shrink-0 p-2.5"
+          title="Select a preset chain name"
         >
           <optgroup label="default">
             <option
@@ -115,7 +116,6 @@ <h2 class="title">Transaction</h2>
         </div>
       </div>
     </div>
-    <hr class="mb-3" />
     <div class="mb-4">
       <label
         class="flex justify-between text-gray-700 text-xs font-bold mb-2"
@@ -344,16 +344,23 @@ <h2 class="title">Transaction</h2>
         />
       </div>
     </div>
-    <div class="flex items-center justify-between mb-2 flex-wrap gap-2">
+    <input
+      class="hidden"
+      #signedTxFileElt
+      type="file"
+      accept=".json,application/json"
+      (change)="onSignedTransactionFileSelected($event)"
+    />
+    <div class="tx-actions">
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="makeTransaction()"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Make transaction
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -368,14 +375,14 @@ <h2 class="title">Transaction</h2>
         </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="signTransaction(false)"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Sign only
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -385,19 +392,19 @@ <h2 class="title">Transaction</h2>
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M15.75 5.25v13.5m-7.5-13.5v13.5"
+            d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
           ></path>
         </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="signTransaction()"
         [attr.disabled]="isMakeTransactionDisabled ? true : null"
       >
         Sign & Send
         <svg
-          class="w-6 h-6 ml-1"
+          class="w-5 h-5 ml-1 shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -407,31 +414,48 @@ <h2 class="title">Transaction</h2>
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
+            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
           ></path>
         </svg>
       </button>
-      <input
-        class="hidden"
-        #signedTxFileElt
-        type="file"
-        accept=".json,application/json"
-        (change)="onSignedTransactionFileSelected($event)"
-      />
-      <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
-        type="button"
-        (click)="signedTxFileElt.click()"
-      >
+      <button class="tx-btn" type="button" (click)="signedTxFileElt.click()">
         Load signed JSON
+        <svg
+          class="w-5 h-5 ml-1 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+          ></path>
+        </svg>
       </button>
       <button
-        class="flex bg-casper bg-opacity-75 hover:bg-opacity-100 text-white font-small py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-opacity-10"
+        class="tx-btn"
         type="button"
         (click)="sendLoadedTransaction()"
         [attr.disabled]="!loadedSignedTransaction ? true : null"
       >
         Send loaded
+        <svg
+          class="w-5 h-5 ml-1 shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 10V3L4 14h7v7l9-11h-7z"
+          ></path>
+        </svg>
       </button>
     </div>
   </form>
diff --git a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.scss b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.scss
index 84d3f4a..575ac81 100644
--- a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.scss
+++ b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.scss
@@ -3,3 +3,42 @@ textarea {
   font-size: 0.8em;
   background-color: rgb(232, 240, 254);
 }
+
+.tx-actions {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  align-items: stretch;
+}
+
+.tx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  grid-column: span 2;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  background-color: #ff473e;
+  color: #fff;
+  font-size: 0.72rem;
+  line-height: 1;
+  padding: 0 0.35rem;
+  border: 0;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    filter: brightness(0.95);
+  }
+
+  &:disabled {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+}
+
+.tx-actions > .tx-btn:nth-child(n + 4) {
+  grid-column: span 3;
+}
diff --git a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.ts b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.ts
index 75161df..14e7a54 100644
--- a/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.ts
+++ b/www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.ts
@@ -178,6 +178,15 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
     this.setChainName(($event.target as HTMLSelectElement).value);
   }
 
+  onChainNameInput() {
+    const chain_name = this.chainNameElt?.nativeElement.value?.trim() || '';
+    if (!chain_name) {
+      return;
+    }
+    this.setChainName(chain_name);
+    this.selectChainNameOption(chain_name, false);
+  }
+
   onGasFeeChange() {
     const fee = this.gasFeeElt.nativeElement.value;
     fee && this.storageService.setState({ fee });
@@ -599,20 +608,29 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
 
   private setChainName(chain_name: string) {
     this.chainNameElt.nativeElement.value = chain_name;
+    this.chain_name = chain_name;
     this.storageService.setState({ chain_name });
     this.deployerService.setState({ chain_name });
   }
 
-  private selectChainNameOption(chainName: string) {
+  private selectChainNameOption(chainName: string, apply = true) {
     const select = this.chainNameSelectElt.nativeElement as HTMLSelectElement;
-    chainName &&
-      Array.prototype.slice.call(select.options).find((option, index) => {
-        const match = chainName == option.value;
-        if (match) {
-          select.selectedIndex = index;
-          this.setChainName(chainName);
+    if (!chainName) {
+      return;
+    }
+    const matched = Array.prototype.slice
+      .call(select.options)
+      .some((option: HTMLOptionElement, index: number) => {
+        if (chainName !== option.value) {
+          return false;
         }
-        return match;
+        select.selectedIndex = index;
+        return true;
       });
+    if (apply) {
+      this.setChainName(chainName);
+    } else if (!matched) {
+      select.selectedIndex = -1;
+    }
   }
 }
diff --git a/www/libs/feature/deployer/src/lib/result/result.component.html b/www/libs/feature/deployer/src/lib/result/result.component.html
index 2b76f4f..5a92247 100644
--- a/www/libs/feature/deployer/src/lib/result/result.component.html
+++ b/www/libs/feature/deployer/src/lib/result/result.component.html
@@ -7,7 +7,7 @@ <h2 class="title">Output</h2>
         type="reset"
         value="clear"
         (click)="reset()"
-        />
+      />
       <div class="w-full bg-red-100 rounded p-3 mt-1">
         <div class="flex justify-between flex-col text-xs">
           <span class="text-xl text-casper font-bold flex justify-between">
@@ -23,11 +23,11 @@ <h2 class="title">Output</h2>
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  >
+                >
                   <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                   <path
                     d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-                    />
+                  />
                 </svg>
               </span>
             }
@@ -49,7 +49,7 @@ <h2 class="title">Output</h2>
                 stroke="currentColor"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
-                >
+              >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -66,7 +66,7 @@ <h2 class="title">Output</h2>
                 stroke="currentColor"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
-                >
+              >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -80,15 +80,15 @@ <h2 class="title">Output</h2>
       </div>
     </div>
   </div>
-  <div class="mb-2">
-    <h2 class="title mt-5">Notes</h2>
+  <div class="notes-block">
+    <h2 class="title">Notes</h2>
     <div class="flex flex-col items-end">
       <input
         (click)="emptyNotes()"
         type="reset"
         value="clear"
         class="text-gray-700 text-xs font-bold mb-2 mr-1"
-        />
+      />
       <textarea
         #NotesElt
         class="mono text-xs rounded"
diff --git a/www/libs/feature/deployer/src/lib/result/result.component.scss b/www/libs/feature/deployer/src/lib/result/result.component.scss
index 5c9eaa2..db32fc5 100644
--- a/www/libs/feature/deployer/src/lib/result/result.component.scss
+++ b/www/libs/feature/deployer/src/lib/result/result.component.scss
@@ -1,11 +1,15 @@
 :host {
   position: relative;
   height: 100%;
+  min-height: 0;
   display: flex;
+  flex-direction: column;
 }
+
 h2 {
   margin-bottom: -1.5rem;
 }
+
 .pre {
   width: 27rem;
   max-width: 27rem;
@@ -34,16 +38,25 @@ h2 {
     }
   }
 }
+
 .scrollToBottom {
   position: relative;
   right: -1px;
 }
+
 .scrollToTop {
   position: absolute;
   right: 0;
   top: 3.5rem;
 }
 
+.notes-block {
+  margin-top: auto;
+  padding-top: 1rem;
+  padding-bottom: 0.75rem;
+  flex: 0 0 auto;
+}
+
 textarea {
   resize: none;
   z-index: 30;
diff --git a/www/nx.json b/www/nx.json
index 1edd8f1..871f3aa 100644
--- a/www/nx.json
+++ b/www/nx.json
@@ -115,5 +115,6 @@
   "neverConnectToCloud": true,
   "tui": {
     "enabled": false
-  }
+  },
+  "analytics": false
 }