diff --git a/package-lock.json b/package-lock.json
index 4794ffe..b740f04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
-        "atft": "^1.5.2",
+        "atft": "^1.5.3",
         "dagre": "^0.8.5",
         "rxjs": "~7.8.0",
         "three": "^0.158.0",
@@ -6038,9 +6038,9 @@
       "dev": true
     },
     "node_modules/atft": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/atft/-/atft-1.5.2.tgz",
-      "integrity": "sha512-INVl+OSzl2A8SQxCfx1drqHd4LqZc9yFSep/MzO1vkX7ISfr8H0tg+QxVXqPR0vuzEfzBQjHyUJfM/lpfOZW0A==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/atft/-/atft-1.5.3.tgz",
+      "integrity": "sha512-K+f3ENtCaZoYFMYtic4VuqXh6Mp4NIBy5rYXfpD/k2X1kQI/Ac3+z5/bd3MuXGm2wy82EpA+Sz609vwSf0eHpg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
diff --git a/package.json b/package.json
index b80b2c6..578e6e9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "atft": "^1.5.2",
+    "atft": "^1.5.3",
     "dagre": "^0.8.5",
     "rxjs": "~7.8.0",
     "three": "^0.158.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5c8bc50..a516929 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,16 @@ import {MatCardModule} from "@angular/material/card";
 import {MatButtonModule} from "@angular/material/button";
 import {DynamicScriptLoaderService} from './general/service/dynamic-script-loader.service';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {
+  AtftCameraModule,
+  AtftControlModule,
+  AtftDataCenterActorModule, AtftEffectModule,
+  AtftLightModule,
+  AtftMeshModule,
+  AtftObjectModule,
+  AtftRendererModule,
+  UxActorModule
+} from 'atft';
 
 
 @NgModule({
@@ -37,7 +47,16 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
     MatGridListModule,
     MatCardModule,
     MatButtonModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    AtftCameraModule,
+    AtftControlModule,
+    AtftDataCenterActorModule,
+    AtftLightModule,
+    AtftMeshModule,
+    AtftObjectModule,
+    AtftRendererModule,
+    AtftEffectModule,
+    UxActorModule
   ],
   declarations: [
     AppComponent,
diff --git a/src/app/login-home/login-home.component.html b/src/app/login-home/login-home.component.html
index 4aec442..4b22c8f 100644
--- a/src/app/login-home/login-home.component.html
+++ b/src/app/login-home/login-home.component.html
@@ -1,3 +1,20 @@
+<atft-renderer-canvas>
+  <atft-orthographic-camera [positionX]=0 [positionY]=0 [positionZ]="100" [zoom]="4">
+  </atft-orthographic-camera>
+  <!-- Background -->
+  <atft-scene name="backgroundScene" background="0x000051">
+    <atft-effect-composer [renderToScreen]="false" [sceneBackgroundTarget]="mainScene">
+      <atft-blur></atft-blur>
+    </atft-effect-composer>
+    <atft-point-light [intensity]="0.4" [distance]="1000" [translateX]="-60" [translateY]="-60"
+                      [translateZ]="50"></atft-point-light>
+    <atft-loader-actor materialColor="#F0F0F0"></atft-loader-actor>
+  </atft-scene>
+  <!-- Foreground -->
+  <atft-scene name="scene" #mainScene atft-stats-auto-show>
+  </atft-scene>
+</atft-renderer-canvas>
+
 <mat-grid-list cols="1" rowHeight="100%" class="grid">
   <mat-grid-tile>
     <mat-card class="card">
@@ -7,12 +24,13 @@
       <mat-card-content>
         <p>
           The Vect application is serverless.
-          Diagrams are stored on your personal Google drive (several YAML files under /Vect folder).
+          Your diagrams will be stored on personal Google drive (several YAML files under /Vect folder).
           Please login to your account and permit access to Google Drive to continue.
         </p>
       </mat-card-content>
       <mat-card-actions align="end">
-        <button [disabled]="!authService.allowToSignIn" mat-button color="warn" mat-raised-button #btnFocus=matButton [autofocus]="btnFocus.focus()" (click)="handleAuthClick()">Google Login</button>
+        <button [disabled]="!authService.allowToSignIn" mat-raised-button #btnFocus=matButton
+                [autofocus]="btnFocus.focus()" (click)="handleAuthClick()">Google Login</button>
       </mat-card-actions>
     </mat-card>
   </mat-grid-tile>
diff --git a/src/app/login-home/login-home.component.scss b/src/app/login-home/login-home.component.scss
index a2cf83b..3a51298 100644
--- a/src/app/login-home/login-home.component.scss
+++ b/src/app/login-home/login-home.component.scss
@@ -3,9 +3,20 @@
 
 .card {
   max-width: 400px;
-  background: mat.get-color-from-palette($vect-primary, A400, 0.5);
+  background: mat.get-color-from-palette($vect-primary, A400, 0.3);
 }
 
 .grid {
   background: mat.get-color-from-palette($vect-primary, A200, 0.5);
 }
+
+mat-card-title {
+   font-weight: bold;
+}
+
+atft-renderer-canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}