diff --git a/packages/server/src/services/OneClickDemo/CreateOneClickDemo.ts b/packages/server/src/services/OneClickDemo/CreateOneClickDemo.ts
index 62396cb6e..c167cda04 100644
--- a/packages/server/src/services/OneClickDemo/CreateOneClickDemo.ts
+++ b/packages/server/src/services/OneClickDemo/CreateOneClickDemo.ts
@@ -3,9 +3,10 @@ import { faker } from '@faker-js/faker';
 import uniqid from 'uniqid';
 import AuthenticationApplication from '../Authentication/AuthApplication';
 import OrganizationService from '../Organization/OrganizationService';
-import { IAuthSignInPOJO } from '@/interfaces';
 import { OneClickDemo } from '@/system/models/OneclickDemo';
 import { SystemUser } from '@/system/models';
+import { IAuthSignInPOJO } from '@/interfaces';
+import { ICreateOneClickDemoPOJO } from './interfaces';
 
 @Service()
 export class CreateOneClickDemo {
@@ -53,8 +54,9 @@ export class CreateOneClickDemo {
   /**
    * Sign-in automicatlly using the demo id one creating an account finish.
    * @param {string} oneClickDemoId -
+   * @returns {Promise<IAuthSignInPOJO>}
    */
-  async autoSignIn(oneClickDemoId: string) {
+  async autoSignIn(oneClickDemoId: string): Promise<IAuthSignInPOJO> {
     const foundOneclickDemo = await OneClickDemo.query()
       .findOne('key', oneClickDemoId)
       .throwIfNotFound();
@@ -66,14 +68,7 @@ export class CreateOneClickDemo {
     const password = '123123123';
 
     const signedIn = await this.authApp.signIn(email, password);
-    
+
     return signedIn;
   }
 }
-
-interface ICreateOneClickDemoPOJO {
-  email: string;
-  demoId: string;
-  signedIn: IAuthSignInPOJO;
-  buildJob: any;
-}
diff --git a/packages/server/src/services/OneClickDemo/OneClickDemoApplication.ts b/packages/server/src/services/OneClickDemo/OneClickDemoApplication.ts
index f14704f85..6b4bb2177 100644
--- a/packages/server/src/services/OneClickDemo/OneClickDemoApplication.ts
+++ b/packages/server/src/services/OneClickDemo/OneClickDemoApplication.ts
@@ -5,21 +5,21 @@ import { CreateOneClickDemo } from './CreateOneClickDemo';
 export class OneClickDemoApplication {
   @Inject()
   private createOneClickDemoService: CreateOneClickDemo;
-  
+
   /**
-   *
-   * @returns
+   * Creates one-click demo account.
+   * @returns {Promise<ICreateOneClickDemoPOJO>}
    */
   public createOneClick() {
     return this.createOneClickDemoService.createOneClickDemo();
   }
 
   /**
-   *
-   * @param oneClickDemoId
-   * @returns
+   * Auto-sign-in to created demo account.
+   * @param {string} demoId -
+   * @returns {Promise<IAuthSignInPOJO>}
    */
-  public autoSignIn(oneClickDemoId: string) {
-    return this.createOneClickDemoService.autoSignIn(oneClickDemoId);
+  public autoSignIn(demoId: string) {
+    return this.createOneClickDemoService.autoSignIn(demoId);
   }
 }
diff --git a/packages/server/src/services/OneClickDemo/interfaces.ts b/packages/server/src/services/OneClickDemo/interfaces.ts
new file mode 100644
index 000000000..e2b54b167
--- /dev/null
+++ b/packages/server/src/services/OneClickDemo/interfaces.ts
@@ -0,0 +1,8 @@
+import { IAuthSignInPOJO } from '@/interfaces';
+
+export interface ICreateOneClickDemoPOJO {
+  email: string;
+  demoId: string;
+  signedIn: IAuthSignInPOJO;
+  buildJob: any;
+}
diff --git a/packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.tsx b/packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.tsx
index fd996c99e..8c55da367 100644
--- a/packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.tsx
+++ b/packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Button, Intent, ProgressBar, Spinner, Text } from '@blueprintjs/core';
+import { Button, Intent, ProgressBar, Text } from '@blueprintjs/core';
 import { useEffect, useState } from 'react';
 import {
   useCreateOneClickDemo,
@@ -14,26 +14,21 @@ export default function OneClickDemoPage() {
     mutateAsync: createOneClickDemo,
     isLoading: isCreateOneClickLoading,
   } = useCreateOneClickDemo();
-  const { mutateAsync: oneClickDemoSignIn } = useOneClickDemoSignin();
+  const {
+    mutateAsync: oneClickDemoSignIn,
+    isLoading: isOneclickDemoSigningIn,
+  } = useOneClickDemoSignin();
   const [buildJobId, setBuildJobId] = useState<string>('');
-  const [demoId, setDemoId] = useState<string>('');
 
-  // Job done state.
+  // Job states.
+  const [demoId, setDemoId] = useState<string>('');
   const [isJobDone, setIsJobDone] = useState<boolean>(false);
 
   const {
-    data: { running, queued, failed, completed },
-    isFetching: isJobFetching,
+    data: { running, completed },
   } = useJob(buildJobId, {
     refetchInterval: 2000,
     enabled: !isJobDone && !!buildJobId,
-    onSuccess: (res) => {
-      if (res.completed) {
-        oneClickDemoSignIn({ demoId }).then((res) => {
-          debugger;
-        });
-      }
-    },
   });
 
   useEffect(() => {
@@ -42,15 +37,25 @@ export default function OneClickDemoPage() {
     }
   }, [completed, setIsJobDone]);
 
+  // One the job done request sign-in using the demo id.
+  useEffect(() => {
+    if (isJobDone) {
+      oneClickDemoSignIn({ demoId }).then((res) => {
+        debugger;
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isJobDone]);
+
   const handleCreateAccountBtnClick = () => {
     createOneClickDemo({})
-      .then((res) => {
-        setBuildJobId(res?.data?.data?.build_job?.job_id);
-        setDemoId(res?.data?.data?.demo_id);
+      .then(({ data: { data } }) => {
+        setBuildJobId(data?.build_job?.job_id);
+        setDemoId(data?.demo_id);
       })
       .catch(() => {});
   };
-  const isLoading = running;
+  const isLoading = running || isOneclickDemoSigningIn;
 
   return (
     <Box className={style.root}>
@@ -61,10 +66,17 @@ export default function OneClickDemoPage() {
           {isLoading && (
             <Stack align={'center'} spacing={15}>
               <ProgressBar stripes value={null} className={style.progressBar} />
-              <Text className={style.waitingText}>
-                We're preparing temporary environment for trial, It typically
-                take few seconds. Do not close or refresh the page.
-              </Text>
+              {isOneclickDemoSigningIn && (
+                <Text className={style.waitingText}>
+                  It's signin-in to your demo account, Just a second!
+                </Text>
+              )}
+              {running && (
+                <Text className={style.waitingText}>
+                  We're preparing temporary environment for trial, It typically
+                  take few seconds. Do not close or refresh the page.
+                </Text>
+              )}
             </Stack>
           )}
         </Stack>
@@ -72,7 +84,7 @@ export default function OneClickDemoPage() {
         {!isLoading && (
           <Button
             className={style.oneClickBtn}
-            intent={Intent.PRIMARY}
+            intent={Intent.NONE}
             onClick={handleCreateAccountBtnClick}
             loading={isCreateOneClickLoading}
           >