diff --git a/.github/workflows/build-container.yaml b/.github/workflows/build-container.yaml
index bd840bc37..83f030dff 100644
--- a/.github/workflows/build-container.yaml
+++ b/.github/workflows/build-container.yaml
@@ -75,6 +75,12 @@ jobs:
           echo "IMAGE_TAG=$IMAGE_TAG" >> $GITHUB_ENV
           echo "OVERRIDE_PUSHED_IMAGE=false" >> $GITHUB_ENV
 
+      - name: Build
+        if: "!startsWith(github.ref, 'refs/heads/release-') && !startsWith(github.ref, 'refs/tags/')"
+        run: |
+          image_name="ghcr.io/${{ github.repository }}/${{matrix.app}}"
+          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t "$image_name:test"
+
       - name: Build & Push Image
         if: startsWith(github.ref, 'refs/heads/release-') || startsWith(github.ref, 'refs/tags/')
         run: |
@@ -92,12 +98,3 @@ jobs:
           
           docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t "$image_name:$IMAGE_TAG" --push
 
-
-#      - name: Build & Push Image
-#        if: startsWith(github.ref, 'refs/heads/release')
-#        run: |
-#          branch_name=${GITHUB_REF#refs/heads/}
-#          version_string="v${branch_name#release-}-nightly"
-#
-#          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/web/${{matrix.app}}:$version_string --push
-#          docker build --build-arg APP=${{matrix.app}} -f ${{matrix.dockerFile}} . -t ghcr.io/kloudlite/web/${{matrix.app}}:commit-${GITHUB_SHA} --push
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f02da370b..9f711bc21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,7 @@ public/**
 
 out
 .firebase
+.firebaseConfig.js
 
 storybook-dist
 
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 17b56733b..3cac9a950 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -557,6 +557,7 @@ query consoleGetProviderSecret($name: String!) {
 
 query consoleGetNodePool($clusterName: String!, $poolName: String!) {
   infra_getNodePool(clusterName: $clusterName, poolName: $poolName) {
+    id
     clusterName
     createdBy {
       userEmail
@@ -657,6 +658,7 @@ query consoleListNodePools($clusterName: String!, $search: SearchNodepool, $pagi
     edges {
       cursor
       node {
+        id
         clusterName
         createdBy {
           userEmail
@@ -894,6 +896,10 @@ mutation consoleCloneEnvironment($projectName: String!, $sourceEnvName: String!,
   }
 }
 
+query consoleRestartApp($projectName: String!, $envName: String!, $appName: String!) {
+  core_restartApp(projectName: $projectName, envName: $envName, appName: $appName)
+}
+
 mutation consoleCreateApp($projectName: String!, $envName: String!, $app: AppIn!) {
   core_createApp(projectName: $projectName, envName: $envName, app: $app) {
     id
@@ -2691,6 +2697,10 @@ query consoleListPvs($clusterName: String!, $search: SearchPersistentVolumes, $p
   }
 }
 
+mutation consoleDeletePV($clusterName: String!, $pvName: String!) {
+  infra_deletePV(clusterName: $clusterName, pvName: $pvName)
+}
+
 query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: CursorPaginationIn) {
   cr_listBuildRuns(repoName: $repoName, search: $search, pq: $pq) {
     edges {
@@ -3786,6 +3796,7 @@ query authCli_getDevice($name: String!) {
     }
     clusterName
     projectName
+    environmentName
     spec {
       activeNamespace
       disabled
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 21abc78d5..29776665e 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -29,6 +29,7 @@ import { TopBar } from '~/components/organisms/top-bar';
 import styleZenerSelect from '@oshq/react-select/index.css';
 import stylesUrl from '~/design-system/index.css';
 import rcss from 'react-highlightjs-logs/dist/index.css';
+import tailwindBase from '~/design-system/tailwind-base.js';
 import { isDev } from '../client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 
@@ -171,15 +172,20 @@ const Root = ({
         <div
           id="loadOverlay"
           style={{
-            backgroundColor: '#777',
+            backgroundColor: tailwindBase.theme.colors.surface.basic.default,
             position: 'absolute',
             top: '0px',
             left: '0px',
             width: '100vw',
             height: '100vh',
             zIndex: '2000',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
-        />
+        >
+          Loading...
+        </div>
 
         {/* <Loading progress={transition} /> */}
         <script
diff --git a/lib/client/components/logger/dummy.ts b/lib/client/components/logger/dummy.ts
new file mode 100644
index 000000000..5353047d5
--- /dev/null
+++ b/lib/client/components/logger/dummy.ts
@@ -0,0 +1,12 @@
+export const logsMockData = [
+  'nnQhCA0QTSuukrRA',
+  '0dlRACNaaPWkx3hBmZNksKoR',
+  '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
+  'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
+  'o2Znr1VqxwlnFcyOe8S78z1HXrwIUcrnGdpXoEj2smsD6d',
+  '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
+  'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
+  'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
+  'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
+  'SQpMBRSCEvC2EWIq2eQ21ljhQkx7hi3t9WNgMpLI0vuaeaUTTcIDXYPqorSJUiGmvQ9R1uQ0x9O0z0fVCNvGYehoaAEYp',
+];
diff --git a/src/apps/console/components/logger.tsx b/lib/client/components/logger/index.tsx
similarity index 70%
rename from src/apps/console/components/logger.tsx
rename to lib/client/components/logger/index.tsx
index b30a3fe23..f38e92fc9 100644
--- a/src/apps/console/components/logger.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -5,31 +5,77 @@ import Anser from 'anser';
 import classNames from 'classnames';
 import Fuse from 'fuse.js';
 import hljs from 'highlight.js';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, {
+  ReactNode,
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ViewportList } from 'react-viewport-list';
-import * as sock from 'websocket';
 import { dayjs } from '~/components/molecule/dayjs';
 import {
   ISearchInfProps,
   useSearch,
 } from '~/root/lib/client/helpers/search-filter';
 import useClass from '~/root/lib/client/hooks/use-class';
-import { socketUrl } from '~/root/lib/configs/base-url.cjs';
-import { generatePlainColor } from './color-generator';
-import Pulsable from './pulsable';
-import { logsMockData } from '../dummy/data';
+import { useSocketLogs } from '~/root/lib/client/helpers/socket/useSockLogs';
+import { generatePlainColor } from '~/root/lib/utils/color-generator';
 
-const hoverClass = `hover:bg-[#ddd]`;
-const hoverClassDark = `hover:bg-[#333]`;
+import ReactPulsable from 'react-pulsable';
+import { ChildrenProps } from '~/components/types';
+import { logsMockData } from './dummy';
 
-type ILog = {
-  pod_name: string;
+const pulsableContext = createContext(false);
+
+export const usePulsableLoading = () => {
+  return useContext(pulsableContext);
+};
+
+const Pulsable = ({
+  children,
+  isLoading,
+}: ChildrenProps & { isLoading: boolean }) => {
+  return (
+    <pulsableContext.Provider value={useMemo(() => isLoading, [isLoading])}>
+      <ReactPulsable
+        config={{
+          bgColors: {
+            light: 'rgba(161, 161, 170, 0.2)',
+            medium: 'rgba(161, 161, 170, 0.3)',
+          },
+        }}
+        isLoading={isLoading}
+      >
+        {children}
+      </ReactPulsable>
+    </pulsableContext.Provider>
+  );
+};
+
+export type ILog = {
+  podName: string;
+  containerName: string;
   message: string;
   timestamp: string;
 };
-type ILogWithLineNumber = ILog & { lineNumber: number };
 
-type ISocketMessage = ILog;
+export type ISocketMessage = ILog;
+
+export interface IuseLog {
+  url?: string;
+  account: string;
+  cluster: string;
+  trackingId: string;
+}
+
+const hoverClass = `hover:bg-[#ddd]`;
+const hoverClassDark = `hover:bg-[#333]`;
+
+type ILogWithLineNumber = ILog & { lineNumber: number };
 
 const padLeadingZeros = (num: number, size: number) => {
   let s = `${num}`;
@@ -46,6 +92,48 @@ interface IHighlightIt {
   enableHL?: boolean;
 }
 
+const LoadingComp = memo(() => (
+  <Pulsable isLoading>
+    <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex inset-0 rounded-md">
+      <div className="flex flex-col w-full">
+        <div className="flex justify-between items-center border-b border-border-tertiary p-lg">
+          <div>Logs</div>
+
+          <div className="flex items-center gap-xl">
+            <div className="flex gap-xl items-center text-sm">
+              <div className="pulsable">
+                <input
+                  className="bg-transparent border border-surface-tertiary-default rounded-md px-lg py-xs w-[10rem]"
+                  placeholder="Search"
+                />
+              </div>
+              <div className="cursor-pointer active:translate-y-[1px] transition-all">
+                <span className={classNames('font-medium pulsable', {})}>
+                  <List color="currentColor" size={16} />
+                </span>
+              </div>
+              <code className={classNames('text-xs font-bold pulsable', {})}>
+                00 matches
+              </code>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col p-3xl gap-md">
+          {Array.from({ length: 20 }).map((_, i) => {
+            const log = logsMockData[Math.floor(Math.random() * 10)];
+            return (
+              <div className="flex gap-3xl" key={`${i + log}`}>
+                <div className="w-xl pulsable" />
+                <div className="pulsable">{log}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  </Pulsable>
+));
+
 const getHashId = (str: string) => {
   let hash = 0;
   let i;
@@ -285,7 +373,8 @@ interface ILogLine {
   searchText: string;
   language: string;
   lines: number;
-  hideLines?: boolean;
+  hideLineNumber?: boolean;
+  hideTimestamp?: boolean;
   log: ILogWithLineNumber & {
     searchInf?: ISearchInfProps['searchInf'];
   };
@@ -300,12 +389,15 @@ const LogLine = ({
   searchText,
   language,
   lines,
-  hideLines,
+  hideLineNumber,
+  hideTimestamp,
   dark,
 }: ILogLine) => {
   return (
     <code
-      title={`pod: ${log.pod_name}`}
+      title={`pod: ${log.podName} | container: ${log.containerName} | line: ${
+        log.lineNumber
+      } | timestamp: ${dayjs(`${log.timestamp}`).format('lll')}`}
       className={classNames(
         'flex py-xs items-center whitespace-pre border-b border-transparent transition-all',
         {
@@ -320,7 +412,7 @@ const LogLine = ({
         paddingRight: fontSize / 2,
       }}
     >
-      {!hideLines && (
+      {!hideLineNumber && (
         <LineNumber
           lineNumber={log.lineNumber}
           lines={lines}
@@ -330,18 +422,20 @@ const LogLine = ({
 
       <div
         className="w-[3px] mr-xl ml-sm h-full pulsable pulsable-hidden"
-        style={{ background: generatePlainColor(log.pod_name) }}
+        style={{ background: generatePlainColor(log.podName) }}
       />
 
       <div className="inline-flex gap-xl pulsable">
-        <HighlightIt
-          {...{
-            className: 'select-none',
-            inlineData: `${dayjs(log.timestamp).format('lll')} |`,
-            language: 'apache',
-            enableHL: true,
-          }}
-        />
+        {!hideTimestamp && (
+          <HighlightIt
+            {...{
+              className: 'select-none',
+              inlineData: `${dayjs(log.timestamp).format('lll')} |`,
+              language: 'apache',
+              enableHL: true,
+            }}
+          />
+        )}
 
         <FilterdHighlightIt
           {...{
@@ -367,7 +461,8 @@ interface ILogBlock {
   noScrollBar: boolean;
   fontSize: number;
   actionComponent: ReactNode;
-  hideLines: boolean;
+  hideLineNumber: boolean;
+  hideTimestamp: boolean;
   language: string;
   solid: boolean;
   dark: boolean;
@@ -383,10 +478,11 @@ const LogBlock = ({
   maxLines,
   fontSize,
   actionComponent,
-  hideLines,
+  hideLineNumber,
   language,
   solid,
   dark,
+  hideTimestamp,
 }: ILogBlock) => {
   const [searchText, setSearchText] = useState('');
 
@@ -404,13 +500,15 @@ const LogBlock = ({
   const [showAll, setShowAll] = useState(true);
 
   const ref = useRef(null);
-  // const listRef = useRef(null);
 
   useEffect(() => {
-    console.log('data', ref.current);
-
     (async () => {
-      if (follow && ref.current) {
+      if (
+        follow &&
+        ref.current &&
+        // @ts-ignore
+        typeof ref.current.scrollToIndex === 'function'
+      ) {
         // @ts-ignore
         ref.current.scrollToIndex({
           index: data.length - 1,
@@ -426,7 +524,7 @@ const LogBlock = ({
       })}
     >
       <div className="flex justify-between items-center border-b border-border-tertiary p-lg">
-        <div className="">{data ? title : 'No logs found'}</div>
+        <div>{data ? title : 'No logs found'}</div>
 
         <div className="flex items-center gap-xl">
           {actionComponent}
@@ -487,6 +585,7 @@ const LogBlock = ({
               {(log, index) => {
                 return (
                   <LogLine
+                    hideTimestamp={hideTimestamp}
                     dark={dark}
                     log={{
                       ...log,
@@ -498,9 +597,9 @@ const LogBlock = ({
                     lines={data.length}
                     showAll={showAll}
                     key={getHashId(
-                      `${log.message}${log.timestamp}${log.pod_name}${index}`
+                      `${log.message}${log.timestamp}${log.podName}${index}`
                     )}
-                    hideLines={hideLines}
+                    hideLineNumber={hideLineNumber}
                     selectableLines={selectableLines}
                   />
                 );
@@ -513,13 +612,6 @@ const LogBlock = ({
   );
 };
 
-interface IuseLog {
-  url?: string;
-  account: string;
-  cluster: string;
-  trackingId: string;
-}
-
 export interface IHighlightJsLog {
   websocket: IuseLog;
   follow?: boolean;
@@ -535,170 +627,14 @@ export interface IHighlightJsLog {
   fontSize?: number;
   loadingComponent?: ReactNode;
   actionComponent?: ReactNode;
-  hideLines?: boolean;
+  hideLineNumber?: boolean;
+  hideTimestamp?: boolean;
   language?: string;
   solid?: boolean;
   className?: string;
   dark?: boolean;
 }
 
-const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
-  const [logs, setLogs] = useState<ISocketMessage[]>([]);
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-
-  let wsclient: Promise<sock.w3cwebsocket>;
-
-  const [socState, setSocState] = useState<sock.w3cwebsocket | null>(null);
-
-  if (typeof window !== 'undefined') {
-    try {
-      wsclient = new Promise<sock.w3cwebsocket>((res, rej) => {
-        try {
-          // eslint-disable-next-line new-cap
-          const w = new sock.w3cwebsocket(
-            url || `${socketUrl}/logs`,
-            '',
-            '',
-            {}
-          );
-
-          w.onmessage = (msg) => {
-            try {
-              const m: {
-                timestamp: string;
-                message: string;
-                spec: {
-                  podName: string;
-                  containerName: string;
-                };
-                type: 'update' | 'error' | 'info';
-              } = JSON.parse(msg.data as string);
-
-              if (m.type === 'error') {
-                setLogs([]);
-                console.error(m.message);
-                return;
-              }
-
-              if (m.type === 'info') {
-                console.log(m.message);
-                return;
-              }
-
-              if (m.type === 'update') {
-                console.log(m.message);
-                return;
-              }
-
-              if (m.type === 'log') {
-                setIsLoading(false);
-                setLogs((s) => [
-                  ...s,
-                  {
-                    pod_name: `${m.spec.podName}:${m.spec.containerName}`,
-                    message: m.message,
-                    timestamp: m.timestamp,
-                  },
-                ]);
-                return;
-              }
-
-              console.log(m);
-            } catch (err) {
-              console.error(err);
-            }
-          };
-
-          w.onopen = () => {
-            // console.log('socket connected');
-            res(w);
-          };
-
-          w.onerror = (e) => {
-            console.error(e);
-            rej(e);
-          };
-
-          w.onclose = () => {
-            // wsclient.send(newMessage({ event: 'unsubscribe', data: 'test' }));
-            // logger.log('socket disconnected');
-          };
-        } catch (e) {
-          rej(e);
-        }
-      });
-    } catch (e) {
-      console.log(e);
-    }
-  }
-
-  useEffect(() => {
-    (async () => {
-      try {
-        // const client = await wsclient.;
-        // 'wss://auth-vision.devc.kloudlite.io/logs'
-
-        if (account === '' || cluster === '' || trackingId === '') {
-          return () => {};
-        }
-
-        if (logs.length) {
-          setLogs([]);
-        }
-        setIsLoading(true);
-
-        const client = await wsclient;
-        console.log('client', client);
-
-        setSocState(client);
-
-        client.send(
-          JSON.stringify({
-            event: 'subscribe',
-            data: {
-              account,
-              cluster,
-              trackingId,
-            },
-          })
-        );
-      } catch (e) {
-        console.error(e);
-        setLogs([]);
-        setError((e as Error).message);
-      }
-
-      return () => {
-        (async () => {
-          if (!socState) return;
-
-          socState.send(
-            JSON.stringify({
-              event: 'unsubscribe',
-              data: {
-                account,
-                cluster,
-                trackingId,
-              },
-            })
-          );
-
-          // client.close();
-
-          setLogs([]);
-        })();
-      };
-    })();
-  }, [account, cluster, trackingId, url]);
-
-  return {
-    logs,
-    error,
-    isLoading,
-  };
-};
-
 const LogComp = ({
   websocket,
   follow = true,
@@ -711,7 +647,8 @@ const LogComp = ({
   maxLines,
   fontSize = 14,
   actionComponent = null,
-  hideLines = false,
+  hideLineNumber = false,
+  hideTimestamp = false,
   language = 'accesslog',
   solid = false,
   className = '',
@@ -744,7 +681,7 @@ const LogComp = ({
     }
   }, [fullScreen]);
 
-  const { logs, error, isLoading } = useSocketLogs(websocket);
+  const { logs, subscribed, errors } = useSocketLogs(websocket);
 
   const [isClientSide, setIsClientSide] = useState(false);
 
@@ -755,22 +692,65 @@ const LogComp = ({
   }, []);
 
   return isClientSide ? (
-    <Pulsable isLoading={isLoading}>
-      <div
-        className={classNames(className, {
-          'fixed w-full h-full left-0 top-0 z-[999] bg-black': fullScreen,
-        })}
-        style={{
-          width: fullScreen ? '100%' : width,
-          height: fullScreen ? '100vh' : height,
-        }}
-      >
-        {error ? (
-          <pre>{error}</pre>
-        ) : (
+    <div
+      className={classNames(className, {
+        'fixed w-full h-full left-0 top-0 z-[999] bg-black': fullScreen,
+        'relative hljs rounded-md': !fullScreen,
+      })}
+      style={{
+        width: fullScreen ? '100%' : width,
+        height: fullScreen ? '100vh' : height,
+      }}
+    >
+      {subscribed && logs.length === 0 && (
+        <Pulsable isLoading>
+          <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex inset-0 rounded-md">
+            <div className="flex flex-col w-full">
+              <div className="flex justify-between items-center border-b border-border-tertiary p-lg">
+                <div>Logs</div>
+
+                <div className="flex items-center gap-xl">
+                  <div className="flex gap-xl items-center text-sm">
+                    <div className="pulsable">
+                      <input
+                        className="bg-transparent border border-surface-tertiary-default rounded-md px-lg py-xs w-[10rem]"
+                        placeholder="Search"
+                      />
+                    </div>
+                    <div className="cursor-pointer active:translate-y-[1px] transition-all">
+                      <span className={classNames('font-medium pulsable', {})}>
+                        <List color="currentColor" size={16} />
+                      </span>
+                    </div>
+                    <code
+                      className={classNames('text-xs font-bold pulsable', {})}
+                    >
+                      00 matches
+                    </code>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col items-center justify-center flex-1">
+                <div className="headingMd">
+                  (only last 3 hours logs) fetching logs...
+                </div>
+              </div>
+            </div>
+          </div>
+        </Pulsable>
+      )}
+
+      {!subscribed && logs.length === 0 && <LoadingComp />}
+
+      {errors.length ? (
+        <pre>{JSON.stringify(errors)}</pre>
+      ) : (
+        logs.length > 0 && (
           <LogBlock
             {...{
-              data: isLoading ? logsMockData : logs,
+              data: logs.map((d) => {
+                return d.data;
+              }),
               follow,
               dark,
               enableSearch,
@@ -804,13 +784,14 @@ const LogComp = ({
               ),
               width: fullScreen ? '100vw' : width,
               height: fullScreen ? '100vh' : height,
-              hideLines,
+              hideLineNumber,
+              hideTimestamp,
               language,
             }}
           />
-        )}
-      </div>
-    </Pulsable>
+        )
+      )}
+    </div>
   ) : (
     <div
       className={classNames(className, {
diff --git a/lib/client/helpers/socket-context.tsx b/lib/client/helpers/socket-context.tsx
deleted file mode 100644
index 1ca6b9366..000000000
--- a/lib/client/helpers/socket-context.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { createContext, useContext, useEffect, useMemo } from 'react';
-import * as sock from 'websocket';
-import { v4 as uuid } from 'uuid';
-import { socketUrl } from '~/lib/configs/base-url.cjs';
-import { ChildrenProps } from '~/components/types';
-import logger from './log';
-import { NonNullableString } from '../../types/common';
-import { useReload } from './reloader';
-
-type Ievent = 'subscribe' | 'unsubscribe' | NonNullableString;
-
-type IMessage = {
-  data: string;
-  event: Ievent;
-};
-
-const message = ({ event, data }: IMessage): string => {
-  return JSON.stringify({ event, data });
-};
-
-const socketContextDefaultValue: {
-  subscribe: (
-    topic: string,
-    callback: (arg: { topic: string; message: string }) => void
-  ) => string;
-  unsubscribe: (topic: string, id: string) => void;
-} = {
-  subscribe: (): string => '',
-  unsubscribe: (): void => {},
-};
-
-const createSocketContext = () => {
-  if (typeof window === 'undefined') {
-    return socketContextDefaultValue;
-  }
-
-  const callbacks: {
-    [key: string]: {
-      [key: string]: (arg: { topic: string; message: string }) => void;
-    };
-  } = {};
-
-  const wsclient = new Promise<sock.w3cwebsocket>((res, rej) => {
-    try {
-      // eslint-disable-next-line new-cap
-      const w = new sock.w3cwebsocket(`${socketUrl}/ws`, '', '', {});
-
-      w.onmessage = (msg) => {
-        try {
-          const m: {
-            topic: string;
-            message: string;
-            type: 'update' | 'error' | 'info';
-          } = JSON.parse(msg.data as string);
-
-          if (m.type === 'error') {
-            console.error(m.message);
-            return;
-          }
-
-          if (m.type === 'info') {
-            console.log(m.message);
-            return;
-          }
-
-          Object.values(callbacks[m.topic]).forEach((cb) => {
-            cb(m);
-          });
-        } catch (err) {
-          console.error(err);
-        }
-      };
-
-      w.onopen = () => {
-        res(w);
-      };
-
-      w.onerror = (e) => {
-        rej(e);
-      };
-
-      w.onclose = () => {
-        // wsclient.send(newMessage({ event: 'unsubscribe', data: 'test' }));
-        logger.log('socket disconnected');
-      };
-    } catch (e) {
-      rej(e);
-    }
-  });
-
-  return {
-    subscribe: (
-      topic: string,
-      callback: (arg: { topic: string; message: string }) => void
-    ): string => {
-      (async () => {
-        if (!callbacks[topic]) {
-          callbacks[topic] = {};
-
-          try {
-            const w = await wsclient;
-
-            w.send(
-              message({
-                event: 'subscribe',
-                data: topic,
-              })
-            );
-
-            logger.log('subscribed to', topic);
-          } catch (err) {
-            logger.warn(err);
-          }
-        }
-      })();
-
-      const id = uuid();
-      callbacks[topic][id] = callback;
-      return id;
-    },
-
-    unsubscribe: (topic: string, id: string) => {
-      (async () => {
-        delete callbacks[topic][id];
-
-        try {
-          const w = await wsclient;
-
-          if (Object.keys(callbacks[topic]).length === 0) {
-            w.send(
-              message({
-                event: 'unsubscribe',
-                data: topic,
-              })
-            );
-          }
-        } catch (err) {
-          logger.warn(err);
-        }
-      })();
-    },
-  };
-};
-
-const SocketContext = createContext(socketContextDefaultValue);
-
-const SocketProvider = ({ children }: ChildrenProps) => {
-  const socket = useMemo(() => {
-    if (typeof window !== 'undefined') {
-      return createSocketContext();
-    }
-
-    return socketContextDefaultValue;
-  }, [typeof window]);
-
-  return (
-    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
-  );
-};
-
-export const useSubscribe = (
-  topics: string[],
-  callback: (arg: { topic: string; message: string }) => void,
-  dependencies: any[] = []
-) => {
-  const t = typeof topics === 'string' ? [topics] : topics;
-
-  const { subscribe, unsubscribe } = useContext(SocketContext);
-
-  useEffect(() => {
-    const subscriptions = t.map((topic) => ({
-      topic,
-      id: subscribe(topic, callback),
-    }));
-
-    return () => {
-      subscriptions.forEach(({ topic, id }) => unsubscribe(topic, id));
-    };
-  }, [...dependencies, ...t]);
-};
-
-export const useWatch = (...topics: string[]) => {
-  const reloadPage = useReload();
-  useSubscribe(
-    topics,
-    () => {
-      reloadPage();
-    },
-    topics
-  );
-};
-
-export default SocketProvider;
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
new file mode 100644
index 000000000..a6e7e1fa0
--- /dev/null
+++ b/lib/client/helpers/socket/context.tsx
@@ -0,0 +1,299 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import * as wsock from 'websocket';
+import { ChildrenProps } from '~/components/types';
+import logger from '~/root/lib/client/helpers/log';
+import useDebounce from '~/root/lib/client/hooks/use-debounce';
+import { socketUrl } from '~/root/lib/configs/base-url.cjs';
+
+type IFor = 'logs' | 'resource-update';
+
+export interface ISocketResp<T = any> {
+  type: 'response' | 'error' | 'info';
+  for: IFor;
+  message: string;
+  id: string;
+  data: T;
+}
+
+type IData = {
+  event?: string;
+  id: string;
+};
+
+interface ISocketMsg<T extends IData> {
+  for: IFor;
+  data: T;
+}
+
+interface IResponses {
+  [key: string | IFor]: {
+    [id: string]: ISocketResp[];
+  };
+}
+
+type IsendMsg = <T extends IData>(msg: ISocketMsg<T>) => void;
+
+const Context = createContext<{
+  responses: IResponses;
+  errors: IResponses;
+  infos: IResponses;
+  sendMsg: IsendMsg;
+  clear: (msg: ISocketMsg<IData>) => void;
+}>({
+  clear: () => {},
+  responses: {},
+  errors: {},
+  infos: {},
+  sendMsg: () => {},
+});
+
+export const useSubscribe = <T extends IData>(
+  msg: ISocketMsg<T>,
+  dep: never[]
+) => {
+  const {
+    sendMsg,
+    responses,
+    infos: i,
+    errors: e,
+    clear,
+  } = useContext(Context);
+
+  const [resp, setResp] = useState<ISocketResp[]>([]);
+  const [subscribed, setSubscribed] = useState(false);
+  const [errors, setErrors] = useState<ISocketResp[]>([]);
+  const [infos, setInfos] = useState<ISocketResp[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      setResp(responses[msg.for]?.[msg.data.id || 'default'] || []);
+
+      setErrors(e[msg.for]?.[msg.data.id || 'default'] || []);
+      setInfos(i[msg.for]?.[msg.data.id || 'default'] || []);
+
+      if (resp.length || i[msg.for]?.[msg.data.id || 'default']?.length) {
+        setSubscribed(true);
+      }
+    })();
+  }, [responses]);
+
+  useDebounce(
+    () => {
+      console.log('subscribing');
+      sendMsg({ ...msg, data: { ...msg.data, event: 'subscribe' } });
+
+      return () => {
+        console.log('unsubscribing');
+        clear(msg);
+        setSubscribed(false);
+        sendMsg({ ...msg, data: { ...msg.data, event: 'unsubscribe' } });
+      };
+    },
+    1000,
+    [...dep]
+  );
+
+  return {
+    responses: resp,
+    subscribed,
+    infos,
+    errors,
+  };
+};
+
+export const SockProvider = ({ children }: ChildrenProps) => {
+  const sockPromise = useRef<Promise<wsock.w3cwebsocket> | null>(null);
+
+  const [responses, setResponses] = useState<IResponses>({});
+  const [errors, setErrors] = useState<IResponses>({});
+  const [infos, setInfos] = useState<IResponses>({});
+
+  const setResp = useCallback((resp: ISocketResp) => {
+    setResponses((s) => {
+      const key = resp.for;
+      const { id } = resp;
+      return {
+        ...s,
+        [key]: {
+          ...s[key],
+          [id]: [...(s[key]?.[id] || []), resp],
+        },
+      };
+    });
+  }, []);
+
+  const setError = useCallback((resp: ISocketResp) => {
+    setErrors((s) => {
+      const key = resp.for;
+      const { id } = resp;
+      return {
+        ...s,
+        [key]: {
+          ...s[key],
+          [id]: [...(s[key]?.[id] || []), resp],
+        },
+      };
+    });
+  }, []);
+
+  const setInfo = useCallback((resp: ISocketResp) => {
+    setInfos((s) => {
+      const key = resp.for;
+      const { id } = resp;
+      return {
+        ...s,
+        [key]: {
+          ...s[key],
+          [id]: [...(s[key]?.[id] || []), resp],
+        },
+      };
+    });
+  }, []);
+
+  const onMessage = useCallback((msg: wsock.IMessageEvent) => {
+    try {
+      const m: ISocketResp = JSON.parse(msg.data as string);
+
+      switch (m.type) {
+        case 'response':
+          setResp(m);
+          break;
+
+        case 'info':
+          setInfo(m);
+          break;
+        case 'error':
+          setError(m);
+          break;
+        default:
+          logger.log('unknown message', m);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }, []);
+
+  useDebounce(
+    () => {
+      if (typeof window !== 'undefined') {
+        try {
+          sockPromise.current = new Promise<wsock.w3cwebsocket>((res, rej) => {
+            let rejected = false;
+            try {
+              // eslint-disable-next-line new-cap
+              const w = new wsock.w3cwebsocket(`${socketUrl}/ws`, '', '', {});
+
+              w.onmessage = onMessage;
+
+              w.onopen = () => {
+                res(w);
+              };
+
+              w.onerror = (e) => {
+                console.error(e);
+                if (!rejected) {
+                  rejected = true;
+                  rej(e);
+                }
+              };
+
+              w.onclose = () => {};
+            } catch (e) {
+              rej(e);
+            }
+          });
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    },
+    1000,
+    []
+  );
+
+  const sendMsg = useCallback(
+    async <T extends IData>(msg: ISocketMsg<T>) => {
+      if (!sockPromise.current) {
+        logger.log('no socket connection');
+        return;
+      }
+      try {
+        const w = await sockPromise.current;
+        if (!w) {
+          logger.log('no socket connection');
+          return;
+        }
+
+        w.send(JSON.stringify(msg));
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    [sockPromise.current]
+  );
+
+  const clear = useCallback(
+    <T extends IData>(msg: ISocketMsg<T>) => {
+      setResponses((s) => {
+        const key = msg.for;
+        const id = msg.data.id || 'default';
+        return {
+          ...s,
+          [key]: {
+            ...s[key],
+            [id]: [],
+          },
+        };
+      });
+
+      setErrors((s) => {
+        const key = msg.for;
+        const id = msg.data.id || 'default';
+        return {
+          ...s,
+          [key]: {
+            ...s[key],
+            [id]: [],
+          },
+        };
+      });
+
+      setInfos((s) => {
+        const key = msg.for;
+        const id = msg.data.id || 'default';
+        return {
+          ...s,
+          [key]: {
+            ...s[key],
+            [id]: [],
+          },
+        };
+      });
+    },
+    [responses]
+  );
+
+  return (
+    <Context.Provider
+      value={useMemo(() => {
+        return {
+          clear,
+          responses,
+          errors,
+          infos,
+          sendMsg,
+        };
+      }, [responses, errors, infos, sendMsg])}
+    >
+      {children}
+    </Context.Provider>
+  );
+};
diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
new file mode 100644
index 000000000..81e28e5cc
--- /dev/null
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
+import { ISocketResp, useSubscribe } from './context';
+import { ILog } from '../../components/logger';
+
+interface IuseLog {
+  account: string;
+  cluster: string;
+  trackingId: string;
+}
+
+export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
+  const [logs, setLogs] = useState<ISocketResp<ILog>[]>([]);
+  const { responses, subscribed, errors } = useSubscribe(
+    {
+      for: 'logs',
+      data: {
+        id: `${account}.${cluster}.${trackingId}`,
+        spec: {
+          account,
+          cluster,
+          trackingId,
+        },
+      },
+    },
+    []
+  );
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (subscribed && isLoading) {
+      setIsLoading(false);
+    } else if (!subscribed && !isLoading) {
+      setIsLoading(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    const sorted = responses.sort((a, b) => {
+      const resp = b.data.podName.localeCompare(a.data.podName);
+
+      if (resp === 0) {
+        return dayjs(a.data.timestamp).unix() - dayjs(b.data.timestamp).unix();
+      }
+
+      return resp;
+    });
+
+    if (JSON.stringify(sorted) !== JSON.stringify(logs)) {
+      setLogs(sorted);
+    }
+  }, [responses]);
+
+  return {
+    logs,
+    errors,
+    isLoading,
+    subscribed,
+  };
+};
diff --git a/lib/client/hooks/use-custom-swr.ts b/lib/client/hooks/use-custom-swr.ts
index 3ed5acc8e..0c0e1d6d0 100644
--- a/lib/client/hooks/use-custom-swr.ts
+++ b/lib/client/hooks/use-custom-swr.ts
@@ -15,7 +15,10 @@ const useCustomSwr = <T>(
   key: string | null | (() => string | null),
   func: () => IGqlReturn<T>
 ) => {
-  return useSWR(key, caller(func));
+  return useSWR(key, caller(func), {
+    shouldRetryOnError: false,
+    revalidateOnFocus: false,
+  });
 };
 
 export default useCustomSwr;
diff --git a/lib/client/hooks/use-debounce.ts b/lib/client/hooks/use-debounce.ts
index 9bfa35a0d..a96524bf3 100644
--- a/lib/client/hooks/use-debounce.ts
+++ b/lib/client/hooks/use-debounce.ts
@@ -7,15 +7,19 @@ const useDebounce: IuseDebounce = (action, delay, dep = []) => {
   // const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
     () => {
+      let resp = () => {};
       // Update debounced value after delay
       const handler = setTimeout(() => {
-        action();
+        resp = action();
       }, delay);
       // Cancel the timeout if value changes (also on delay change or unmount)
       // This is how we prevent debounced value from updating if value is changed ...
       // .. within the delay period. Timeout gets cleared and restarted.
       return () => {
         clearTimeout(handler);
+        if (typeof resp === 'function') {
+          resp();
+        }
       };
     },
     [delay, ...dep] // Only re-call effect if value or delay changes
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
index eb8923696..d4d541d2e 100644
--- a/lib/configs/base-url.cjs
+++ b/lib/configs/base-url.cjs
@@ -87,6 +87,7 @@ const baseUrls = () => {
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
     socketUrl: `wss://websocket.${bUrl}`,
+    observeUrl: `https://observe.${bUrl}`,
   };
 };
 
@@ -99,6 +100,7 @@ const defaultConfig = {
   githubAppName: baseUrls().githubAppName,
   socketUrl: baseUrls().socketUrl,
   registryHost: baseUrls().registryHost,
+  observeUrl: baseUrls().observeUrl,
   getServerEnv,
   getClientEnv,
 };
diff --git a/lib/types/common.ts b/lib/types/common.ts
index 2e99ee969..626caf76f 100644
--- a/lib/types/common.ts
+++ b/lib/types/common.ts
@@ -68,3 +68,5 @@ export type ExtractArrayType<T> = T extends (infer U)[] ? U : never;
 export type LoaderResult<T extends (props: any) => Promise<any>> = Awaited<
   ReturnType<T>
 >;
+
+export type ISetState<T> = React.Dispatch<React.SetStateAction<T>>;
diff --git a/src/apps/console/components/color-generator.tsx b/lib/utils/color-generator.tsx
similarity index 100%
rename from src/apps/console/components/color-generator.tsx
rename to lib/utils/color-generator.tsx
diff --git a/package.json b/package.json
index 9e44a406a..2b9ab13e1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-   "name": "kloudlite.github.io",
+	"name": "kloudlite.github.io",
 	"private": true,
 	"version": "0.0.0",
 	"homepage": "https://kloudlite.github.io",
@@ -26,7 +26,7 @@
 		"@codemirror/legacy-modes": "^6.3.3",
 		"@jengaicons/react": "^1.3.0",
 		"@mdx-js/react": "^2.3.0",
-		"@oshq/react-select": "^1.3.0",
+		"@oshq/react-select": "^1.3.3",
 		"@radix-ui/primitive": "^1.0.1",
 		"@radix-ui/react-alert-dialog": "1.0.4",
 		"@radix-ui/react-checkbox": "^1.0.4",
@@ -64,6 +64,7 @@
 		"@remix-run/react": "^1.19.3",
 		"@uiw/react-codemirror": "^4.21.21",
 		"anser": "^2.1.1",
+		"apexcharts": "^3.45.2",
 		"aria-hidden": "^1.2.3",
 		"axios": "^1.6.3",
 		"classnames": "^2.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6d305692..b5d87b58c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ dependencies:
     specifier: ^2.3.0
     version: 2.3.0(react@18.2.0)
   '@oshq/react-select':
-    specifier: ^1.3.0
-    version: 1.3.0(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@10.17.8)(rc-virtual-list@3.11.3)(react@18.2.0)
+    specifier: ^1.3.3
+    version: 1.3.3(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@10.17.8)(rc-virtual-list@3.11.3)(react@18.2.0)
   '@radix-ui/primitive':
     specifier: ^1.0.1
     version: 1.0.1
@@ -131,6 +131,9 @@ dependencies:
   anser:
     specifier: ^2.1.1
     version: 2.1.1
+  apexcharts:
+    specifier: ^3.45.2
+    version: 3.45.2
   aria-hidden:
     specifier: ^1.2.3
     version: 1.2.3
@@ -2607,8 +2610,8 @@ packages:
       json-parse-even-better-errors: 2.3.1
     dev: true
 
-  /@oshq/react-select@1.3.0(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@10.17.8)(rc-virtual-list@3.11.3)(react@18.2.0):
-    resolution: {integrity: sha512-Q9qZugOhG4Q8Cpt4U5lk4GuA8m2l4YED+fciVRVllsWy8H9If8zX6vo+pbSJhzd4YE5KwmjeKmt0Q7jHLS7Nzw==}
+  /@oshq/react-select@1.3.3(@radix-ui/react-portal@1.0.4)(classnames@2.5.1)(framer-motion@10.17.8)(rc-virtual-list@3.11.3)(react@18.2.0):
+    resolution: {integrity: sha512-ygM/Wp562SiesSJRGfgrb7CfMN8gTvdhnz+cjtBXAyDWTHTw7yDXgKyAwdj52VT6zrsDCWJEFFOrq8kb02CLeQ==}
     peerDependencies:
       '@radix-ui/react-portal': ^1.0.4
       classnames: ^2.3.2
@@ -4505,6 +4508,10 @@ packages:
   /@web3-storage/multipart-parser@1.0.0:
     resolution: {integrity: sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==}
 
+  /@yr/monotone-cubic-spline@1.0.3:
+    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
+    dev: false
+
   /@zxing/text-encoding@0.9.0:
     resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
     requiresBuild: true
@@ -4624,6 +4631,18 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /apexcharts@3.45.2:
+    resolution: {integrity: sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==}
+    dependencies:
+      '@yr/monotone-cubic-spline': 1.0.3
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
+    dev: false
+
   /arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
     dev: true
@@ -10062,6 +10081,60 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svg.draggable.js@2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.easing.js@2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.filter.js@2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.js@2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+    dev: false
+
+  /svg.pathmorphing.js@0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.resize.js@1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+    dev: false
+
+  /svg.select.js@2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.select.js@3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
   /swr@2.2.4(react@18.2.0):
     resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
     peerDependencies:
diff --git a/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx b/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx
index 0e6277468..b9dc31c47 100644
--- a/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx
+++ b/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx
@@ -47,6 +47,7 @@ const CallBack = () => {
                     type: 'add-provider',
                     query,
                     status: 'success',
+                    provider,
                   },
                   '*'
                 );
diff --git a/src/apps/console/components/charts/charts-client.tsx b/src/apps/console/components/charts/charts-client.tsx
new file mode 100644
index 000000000..1d4844001
--- /dev/null
+++ b/src/apps/console/components/charts/charts-client.tsx
@@ -0,0 +1,71 @@
+import React, { Suspense } from 'react';
+import { cn } from '~/components/utils';
+import { type ApexOptions } from 'apexcharts';
+import { LoadingPlaceHolder } from '../loading';
+import { Box } from '../common-console-components';
+
+// @ts-ignore
+const ChartsMain = React.lazy(() => import('./charts'));
+
+const Chart = (
+  props: {
+    options: ApexOptions;
+  } & {
+    disabled?: boolean;
+    title?: string;
+    height?: string;
+    width?: string;
+    className?: string;
+  }
+) => {
+  const { height, width, className, title, disabled } = props;
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            width: width || '100%',
+            height: height || '100%',
+          }}
+          className={cn(className, 'flex flex-col')}
+        >
+          <Box title={title} className="h-full">
+            <div className="flex flex-col justify-center h-full">
+              <LoadingPlaceHolder />
+            </div>
+          </Box>
+        </div>
+      }
+    >
+      <div
+        className={cn(className, 'flex flex-col')}
+        style={{
+          height: height || '100%',
+          width: width || '100%',
+        }}
+      >
+        <div
+          className={cn(
+            'rounded border border-border-default bg-surface-basic-default shadow-button flex flex-col',
+            className
+          )}
+        >
+          <div className="text-text-strong headingMd px-2xl pt-2xl">
+            {title}
+          </div>
+          <div className="relative">
+            {disabled && (
+              <div className="flex absolute inset-0 justify-center items-center bg-surface-basic-default z-10 headingSm">
+                Not Available
+              </div>
+            )}
+
+            <ChartsMain {...props} />
+          </div>
+        </div>
+      </div>
+    </Suspense>
+  );
+};
+
+export default Chart;
diff --git a/src/apps/console/components/charts/charts.tsx b/src/apps/console/components/charts/charts.tsx
new file mode 100644
index 000000000..e2769fb8c
--- /dev/null
+++ b/src/apps/console/components/charts/charts.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/no-unused-prop-types */
+import ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
+import { useEffect, useRef } from 'react';
+
+const ChartServer = ({ options }: { options: ApexOptions }) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return () => {};
+    }
+
+    const chart = new ApexCharts(ref.current, options);
+    chart.render();
+
+    return () => {
+      chart.destroy();
+    };
+  }, [ref.current, options]);
+
+  return <div ref={ref} className="flex items-center justify-center" />;
+};
+
+export default ChartServer;
diff --git a/src/apps/console/components/code-view.tsx b/src/apps/console/components/code-view.tsx
index bf91fa4c5..290460987 100644
--- a/src/apps/console/components/code-view.tsx
+++ b/src/apps/console/components/code-view.tsx
@@ -1,4 +1,6 @@
 import { CopySimple } from '@jengaicons/react';
+import hljs from 'highlight.js';
+import { useEffect, useRef } from 'react';
 import { toast } from '~/components/molecule/toast';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 
@@ -6,31 +8,62 @@ interface ICodeView {
   data: string;
   copy: boolean;
   showShellPrompt?: boolean;
+  language?: string;
+  title?: string;
 }
-const CodeView = ({ data, copy, showShellPrompt }: ICodeView) => {
+const CodeView = ({
+  data,
+  copy,
+  showShellPrompt,
+  language = 'shell',
+  title,
+}: ICodeView) => {
   const { copy: cpy } = useClipboard({
     onSuccess() {
       toast.success('Text copied to clipboard.');
     },
   });
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    (async () => {
+      if (ref.current) {
+        const hr = hljs.highlight(
+          data,
+          {
+            language,
+          },
+          false
+        );
+
+        // @ts-ignore
+        ref.current.innerHTML = hr.value;
+      }
+    })();
+  }, [data, language]);
+
   return (
-    <div
-      onClick={() => {
-        if (copy) cpy(data);
-      }}
-      className="group/sha cursor-pointer bg-surface-basic-active p-lg rounded-lg bodyMd flex flex-row gap-xl items-center"
-    >
-      <pre>
-        <code className="flex flex-row items-center gap-lg flex-1 break-all">
-          <span className="opacity-60">{showShellPrompt && '$'}</span>
-          <div className="break-all" style={{ whiteSpace: 'pre-wrap' }}>
-            {data}
-          </div>
-        </code>
-      </pre>
-      <span className="invisible group-hover/sha:visible">
-        <CopySimple size={14} />
-      </span>
+    <div className="flex flex-col gap-lg flex-1 min-w-[45%]">
+      {!!title && (
+        <div className="bodyMd-medium text-text-default">{title}</div>
+      )}
+      <div className="bodyMd text-text-strong">
+        <div
+          onClick={() => {
+            if (copy) cpy(data);
+          }}
+          className="group/sha cursor-pointer p-lg rounded-md bodyMd flex flex-row gap-xl items-center hljs w-full"
+        >
+          <pre className="flex-1">
+            <code ref={ref}>{data}</code>
+          </pre>
+
+          <span className="invisible group-hover/sha:visible">
+            <CopySimple size={14} />
+          </span>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/apps/console/components/common-console-components.tsx b/src/apps/console/components/common-console-components.tsx
index 1aaf88935..dae60b845 100644
--- a/src/apps/console/components/common-console-components.tsx
+++ b/src/apps/console/components/common-console-components.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
+import { cn } from '~/components/utils';
 
 interface IDeleteContainer {
   title: ReactNode;
@@ -34,13 +35,19 @@ export const BoxPrimitive = ({ children }: IBoxPrimitive) => {
 
 interface IBox extends IBoxPrimitive {
   title: ReactNode;
+  className?: string;
 }
 
-export const Box = ({ children, title }: IBox) => {
+export const Box = ({ children, title, className }: IBox) => {
   return (
-    <div className="rounded border border-border-default bg-surface-basic-default shadow-button p-3xl flex flex-col gap-3xl ">
+    <div
+      className={cn(
+        'rounded border border-border-default bg-surface-basic-default shadow-button p-3xl flex flex-col gap-3xl ',
+        className
+      )}
+    >
       <div className="text-text-strong headingLg">{title}</div>
-      <div className="flex flex-col gap-3xl">{children}</div>
+      <div className="flex flex-col gap-3xl flex-1">{children}</div>
     </div>
   );
 };
diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx
index 25c1fc5e6..52521d213 100644
--- a/src/apps/console/components/console-avatar.tsx
+++ b/src/apps/console/components/console-avatar.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from '~/components/atoms/avatar';
 import { titleCase } from '~/components/utils';
-import generateColor from './color-generator';
+import generateColor from '~/root/lib/utils/color-generator';
 
 const ConsoleAvatar = ({
   name,
diff --git a/src/apps/console/components/dynamic-pagination.tsx b/src/apps/console/components/dynamic-pagination.tsx
index 10147e51f..ea33b1039 100644
--- a/src/apps/console/components/dynamic-pagination.tsx
+++ b/src/apps/console/components/dynamic-pagination.tsx
@@ -86,7 +86,7 @@ const DynamicPagination = ({
   return (
     <div className={cn('bg-surface-basic-default flex', className)}>
       {hasItems && (
-        <div className="w-full flex flex-col">
+        <div className="w-full flex flex-col h-full">
           <DynamicPaginationHeader
             {...{
               hasNext,
@@ -98,7 +98,7 @@ const DynamicPagination = ({
           >
             {header}
           </DynamicPaginationHeader>
-          <div>{children}</div>
+          <div className="h-full">{children}</div>
         </div>
       )}
       {!hasItems && (
diff --git a/src/apps/console/components/git-repo-selector.tsx b/src/apps/console/components/git-repo-selector.tsx
deleted file mode 100644
index 27410e2fc..000000000
--- a/src/apps/console/components/git-repo-selector.tsx
+++ /dev/null
@@ -1,625 +0,0 @@
-import {
-  CircleFill,
-  GithubLogoFill,
-  GitlabLogoFill,
-  ListBullets,
-  LockSimple,
-  LockSimpleOpen,
-  Plus,
-  Search,
-} from '@jengaicons/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '~/components/atoms/button';
-import { TextInput } from '~/components/atoms/input';
-import Select from '~/components/atoms/select';
-import { dayjs } from '~/components/molecule/dayjs';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { githubAppName } from '~/root/lib/configs/base-url.cjs';
-import { SWRResponse } from 'swr';
-import Radio from '~/components/atoms/radio';
-import { useConsoleApi } from '../server/gql/api-provider';
-import {
-  IGithubInstallations,
-  IGitlabGroups,
-} from '../server/gql/queries/git-queries';
-import { popupWindow } from '../utils/commons';
-import Pulsable from './pulsable';
-
-const ADD_GITHUB_ACCOUNT_VALUE = 'add-github-account';
-const SWITCH_GIT_PROVIDER_VALUE = 'switch-git-provider';
-
-const useDebounceText = (value: string, delay: number) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-};
-
-const useGithubProvider = ({
-  fetchInstallations = true,
-}: {
-  fetchInstallations?: boolean;
-}) => {
-  const [organization, setOrganization] = useState<string | null>(null);
-  const [searchText, setSearchText] = useState('');
-  const [repoUrl, setRepoUrl] = useState<string | null>(null);
-  const [_fetchInstallations, setFetchInstallations] =
-    useState(fetchInstallations);
-
-  const api = useConsoleApi();
-  const data = {
-    key: 'api/github-installations',
-    repoKey: 'api/github-repos',
-    branchKey: 'api/github-branches',
-    api: api.listGithubInstalltions,
-    repoApi: api.searchGithubRepos,
-    branchApi: api.listGithubBranches,
-  };
-
-  const debouncedSearch = useDebounceText(searchText, 500);
-  return {
-    installations: useCustomSwr(
-      () => (_fetchInstallations ? data.key : null),
-      async () => data.api({})
-    ),
-    repos: useCustomSwr(
-      () =>
-        organization
-          ? `${data.repoKey}-${organization}-${debouncedSearch}`
-          : null,
-      async () =>
-        data.repoApi({
-          organization: organization || '',
-          search: searchText,
-          pagination: {
-            page: 1,
-            per_page: 5,
-          },
-        })
-    ),
-    branches: useCustomSwr(
-      () => (repoUrl ? `${data.branchKey}-${repoUrl}` : null),
-      async () =>
-        data.branchApi({
-          repoUrl: repoUrl!,
-        })
-    ),
-    setOrganization,
-    setSearchText,
-    setRepoUrl,
-    setFetchInstallations,
-  };
-};
-
-const useGitlabProvider = ({
-  fetchGroups = true,
-}: {
-  fetchGroups?: boolean;
-}) => {
-  const [searchText, setSearchText] = useState('');
-  const [groupId, setGroupId] = useState<string | null>(null);
-  const [repoId, setRepId] = useState<string | null>(null);
-  const [_fetchGroups, setFetchGroups] = useState(fetchGroups);
-
-  const api = useConsoleApi();
-  const data = {
-    key: 'api/gitlab-installations',
-    repoKey: 'api/gitlab-repos',
-    branchKey: 'api/gitlab-branches',
-    api: api.listGitlabGroups,
-    repoApi: api.listGitlabRepos,
-    branchApi: api.listGitlabBranches,
-  };
-  const debouncedSearch = useDebounceText(searchText, 500);
-
-  return {
-    groups: useCustomSwr(
-      () => (_fetchGroups ? data.key : null),
-      async () => data.api({})
-    ),
-    repos: useCustomSwr(
-      () => (groupId ? `${data.repoKey}-${groupId}-${debouncedSearch}` : null),
-      async () =>
-        data.repoApi({
-          groupId: groupId!,
-          query: searchText,
-          pagination: {
-            page: 1,
-            per_page: 5,
-          },
-        })
-    ),
-    branches: useCustomSwr(
-      () => (repoId ? `${data.branchKey}-${repoId}` : null),
-      async () =>
-        data.branchApi({
-          repoId: repoId!,
-        })
-    ),
-    setGroupId,
-    setRepId,
-    setFetchGroups,
-    setSearchText,
-  };
-};
-interface IBranch {
-  repo: string;
-  branch: string;
-  provider: 'github' | 'gitlab';
-}
-
-interface IListRenderer {
-  response: SWRResponse<
-    { name: string; updatedAt: any; private: true; url: string }[],
-    any,
-    any
-  >;
-  onChange: (value: string) => void;
-  value: string;
-}
-
-const mockListData = [
-  {
-    name: 'this is moc name',
-    private: false,
-    updatedAt: 'a month ago',
-    url: '',
-  },
-  {
-    name: 'this is moc name1',
-    private: false,
-    updatedAt: 'a month ago',
-    url: '',
-  },
-  {
-    name: 'this is moc name2',
-    private: false,
-    updatedAt: 'a month ago',
-    url: '',
-  },
-  {
-    name: 'this is moc name3',
-    private: false,
-    updatedAt: 'a month ago',
-    url: '',
-  },
-  {
-    name: 'this is moc name4',
-    private: false,
-    updatedAt: 'a month ago',
-    url: '',
-  },
-];
-
-const ListRenderer = ({ response, onChange, value }: IListRenderer) => {
-  const { isLoading, data } = response;
-
-  return (
-    <div className="flex flex-col">
-      <Pulsable isLoading={isLoading || !data}>
-        <Radio.Root
-          value={value}
-          withBounceEffect={false}
-          labelPlacement="left"
-          className="!gap-0"
-          onChange={onChange}
-        >
-          {[...(isLoading || !data ? mockListData : data)].map((repo) => {
-            return (
-              <Radio.Item
-                key={repo.name}
-                value={repo.url}
-                className="pulsable flex-row justify-between w-full py-2xl bodyMd-medium"
-                labelPlacement="left"
-              >
-                <div className="flex flex-row items-center gap-lg bodyMd-medium">
-                  <span>{repo.name}</span>
-
-                  <span>
-                    {repo.private ? (
-                      <LockSimple size={12} />
-                    ) : (
-                      <LockSimpleOpen size={12} />
-                    )}
-                  </span>
-                  <span>
-                    <CircleFill size={2} />
-                  </span>
-                  <span className="text-text-soft">
-                    {dayjs(repo.updatedAt).fromNow()}
-                  </span>
-                </div>
-              </Radio.Item>
-            );
-          })}
-        </Radio.Root>
-      </Pulsable>
-    </div>
-  );
-};
-
-interface IRepoRender {
-  label: string;
-  labelValueIcon: JSX.Element;
-  value: string;
-  render: () => JSX.Element;
-}
-
-type IFormattedData =
-  | ({ data: IGithubInstallations } & { provider: 'github' })
-  | ({ data: IGitlabGroups } & { provider: 'gitlab' });
-
-const formatData = (data: IFormattedData) => {
-  let formattedData: IRepoRender[] = [];
-
-  const iconSize = 16;
-
-  switch (data.provider) {
-    case 'github':
-      formattedData = data.data?.map((d) => ({
-        label: d.account?.login || '',
-        labelValueIcon: <GithubLogoFill size={iconSize} />,
-        value: `${d.id!}`,
-        render: () => (
-          <div className="flex flex-row gap-lg items-center">
-            <div>
-              <GithubLogoFill size={iconSize} />
-            </div>
-            <div>{d.account?.login}</div>
-          </div>
-        ),
-      }));
-
-      formattedData?.push({
-        label: 'Add Github Account',
-        value: ADD_GITHUB_ACCOUNT_VALUE,
-        labelValueIcon: <Plus size={iconSize} />,
-        render: () => (
-          <div className="flex flex-row gap-lg items-center">
-            <div>
-              <Plus size={iconSize} />
-            </div>
-            <div>Add Github Account</div>
-          </div>
-        ),
-      });
-
-      break;
-    case 'gitlab':
-      formattedData = data.data?.map((d) => ({
-        label: d.fullName || '',
-        labelValueIcon: <GitlabLogoFill size={iconSize} />,
-        value: `${d.id!}`,
-        render: () => (
-          <div className="flex flex-row gap-lg items-center">
-            <div>
-              <GitlabLogoFill size={iconSize} />
-            </div>
-            <div>{d.fullName}</div>
-          </div>
-        ),
-      }));
-      break;
-    default:
-      formattedData = [];
-      break;
-  }
-
-  formattedData?.push({
-    label: 'Switch Git Provider',
-    value: SWITCH_GIT_PROVIDER_VALUE,
-    labelValueIcon: <ListBullets size={iconSize} />,
-    render: () => (
-      <div className="flex flex-row gap-lg items-center">
-        <div>
-          <ListBullets size={iconSize} />
-        </div>
-        <div>Switch Git Provider</div>
-      </div>
-    ),
-  });
-
-  return formattedData;
-};
-
-interface IGitRepoSelector {
-  onChange?(source: IBranch): void;
-  error?: string;
-  value?: {
-    provider: 'github' | 'gitlab';
-    repository: string;
-    branch: string;
-  };
-}
-const GitRepoSelector = ({ onChange, error, value }: IGitRepoSelector) => {
-  const githubInstallUrl = `https://github.com/apps/${githubAppName}/installations/new`;
-
-  const [showProviderSwitch, setProviderSwitch] = useState(false);
-
-  const [searchText, setSearchText] = useState('');
-
-  const [provider, setProvider] = useState<'github' | 'gitlab'>('github');
-  const [repo, setRepo] = useState('');
-  const {
-    installations,
-    repos: githubRepos,
-    setOrganization,
-    setSearchText: setGithubRepoSearchText,
-    setFetchInstallations,
-    branches: githubBranches,
-    setRepoUrl,
-  } = useGithubProvider({});
-
-  const {
-    groups,
-    repos: gitlabRepos,
-    setFetchGroups,
-    setGroupId,
-    setRepId,
-    branches: gitlabBranches,
-    setSearchText: setGitlabRepoSearchText,
-  } = useGitlabProvider({
-    fetchGroups: false,
-  });
-
-  const [selectedBranch, setSelectedBranch] = useState<IBranch | null>();
-  const [options, setOptions] = useState<IRepoRender[]>([]);
-
-  const [selectedAccount, setSelectedAccount] = useState<IRepoRender>();
-
-  const setupRepo = useCallback((v: string) => {
-    setRepo(v);
-    if (value) {
-      setSelectedBranch({
-        branch: value.branch,
-        provider: value.provider,
-        repo: value.repository,
-      });
-      onChange?.({ branch: value.branch, provider, repo: value.repository });
-    } else {
-      setSelectedBranch(null);
-      onChange?.({ branch: '', provider, repo: 'null' });
-    }
-
-    if (provider === 'github') {
-      setRepoUrl(v);
-    } else {
-      setRepId(v);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (value) {
-      setProvider(value.provider);
-    }
-    if (!repo) {
-      switch (provider) {
-        case 'github':
-          setupRepo(
-            value ? value.repository : githubRepos.data?.[0]?.url || ''
-          );
-          break;
-        case 'gitlab':
-          setupRepo(
-            value ? value.repository : gitlabRepos.data?.[0]?.url || ''
-          );
-          break;
-        default:
-          break;
-      }
-    }
-  }, [githubRepos.data, gitlabRepos.data, value]);
-
-  useEffect(() => {
-    let formattedData: IRepoRender[] = [];
-
-    if (installations?.data && provider === 'github') {
-      setOrganization(
-        installations.data?.[0]?.account?.login
-          ? `${installations.data?.[0].account?.login}`
-          : null
-      );
-
-      formattedData = formatData({
-        data: installations.data,
-        provider,
-      });
-    }
-
-    if (groups?.data && provider === 'gitlab') {
-      setGroupId(groups.data?.[0]?.id);
-      formattedData = formatData({ data: groups.data, provider });
-    }
-
-    setOptions(formattedData || []);
-    if (
-      formattedData &&
-      ((provider === 'github' && formattedData?.length > 2) ||
-        (provider === 'gitlab' && formattedData?.length > 1))
-    ) {
-      setSelectedAccount(formattedData[0]);
-    }
-  }, [installations.data, groups.data]);
-
-  useEffect(() => {
-    if (showProviderSwitch) {
-      setOrganization(null);
-      setGroupId(null);
-      setFetchGroups(false);
-      setFetchInstallations(false);
-      setSelectedBranch(null);
-      onChange?.({ branch: '', provider, repo: 'null' });
-    }
-  }, [showProviderSwitch]);
-
-  useEffect(() => {
-    switch (provider) {
-      case 'github':
-        setGithubRepoSearchText(searchText);
-        break;
-      case 'gitlab':
-        setGitlabRepoSearchText(searchText);
-        break;
-      default:
-        break;
-    }
-  }, [searchText]);
-
-  const valueRender = ({ label, labelValueIcon }: IRepoRender) => {
-    return (
-      <div className="flex flex-row gap-xl items-center bodyMd text-text-default">
-        <span>{labelValueIcon}</span>
-        <span>{label}</span>
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      <div className="flex flex-col relative border border-border-default rounded px-2xl">
-        <div className="flex flex-row gap-lg items-center py-2xl">
-          <div className="flex-1">
-            <Pulsable isLoading={installations.isLoading || groups.isLoading}>
-              <div className="pulsable">
-                <Select
-                  size="lg"
-                  valueRender={valueRender}
-                  disabled={showProviderSwitch}
-                  options={async () => options}
-                  value={selectedAccount}
-                  onChange={(res) => {
-                    if (
-                      ![
-                        ADD_GITHUB_ACCOUNT_VALUE,
-                        SWITCH_GIT_PROVIDER_VALUE,
-                      ].includes(res.value)
-                    ) {
-                      setRepo('');
-                      setSelectedAccount(res);
-                      switch (provider) {
-                        case 'github':
-                          setOrganization(res.label);
-                          break;
-                        case 'gitlab':
-                          setGroupId(res.value);
-                          break;
-                        default:
-                          break;
-                      }
-                    } else if (res.value === SWITCH_GIT_PROVIDER_VALUE) {
-                      setProviderSwitch(true);
-                    } else if (res.value === ADD_GITHUB_ACCOUNT_VALUE) {
-                      popupWindow({
-                        url: githubInstallUrl,
-                      });
-                    }
-                  }}
-                />
-              </div>
-            </Pulsable>
-          </div>
-          <div className="flex-1">
-            <Pulsable isLoading={installations.isLoading || groups.isLoading}>
-              <TextInput
-                size="lg"
-                placeholder="Search"
-                prefixIcon={<Search />}
-                value={searchText}
-                onChange={({ target }) => {
-                  setSearchText(target.value);
-                }}
-              />
-            </Pulsable>
-          </div>
-        </div>
-        <ListRenderer
-          value={repo}
-          response={provider === 'github' ? githubRepos : gitlabRepos}
-          onChange={setupRepo}
-        />
-        <AnimatePresence mode="wait">
-          {showProviderSwitch && (
-            <motion.div className="absolute z-10 inset-0 flex flex-col items-center justify-center bg-surface-basic-subdued border border-border-default rounded">
-              <div className="text-text-soft bodyMd mb-5xl">
-                Select a Git provider to import an existing project from a Git
-                Repository.
-              </div>
-              <div className="w-[320px] flex flex-col gap-lg">
-                <Button
-                  variant="tertiary"
-                  content="Continue with Github"
-                  prefix={<GithubLogoFill />}
-                  block
-                  onClick={() => {
-                    setProvider('github');
-                    setFetchInstallations(true);
-                    setFetchGroups(false);
-                    setProviderSwitch(false);
-                  }}
-                />
-                <Button
-                  variant="purple"
-                  content="Continue with Gitlab"
-                  prefix={<GitlabLogoFill />}
-                  block
-                  onClick={() => {
-                    setProvider('gitlab');
-                    setFetchInstallations(false);
-                    setFetchGroups(true);
-                    setProviderSwitch(false);
-                  }}
-                />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-      <div className="pt-3xl">
-        <Pulsable isLoading={installations.isLoading || groups.isLoading}>
-          <div className="pulsable">
-            <Select
-              label="Branch"
-              size="lg"
-              value={
-                selectedBranch
-                  ? {
-                      label: selectedBranch.branch,
-                      value: selectedBranch.branch,
-                    }
-                  : undefined
-              }
-              loading={githubBranches.isLoading || gitlabBranches.isLoading}
-              disableWhileLoading
-              disabled={!repo}
-              placeholder="Select a branch"
-              options={async () =>
-                (
-                  (provider === 'github' ? githubBranches : gitlabBranches)
-                    .data || []
-                )?.map((d) => ({ label: d.name || '', value: d.name || '' }))
-              }
-              onChange={({ value }) => {
-                setSelectedBranch({ branch: value, provider, repo });
-                onChange?.({ branch: value, provider, repo });
-              }}
-              error={!!error}
-              message={error}
-            />
-          </div>
-        </Pulsable>
-      </div>
-    </div>
-  );
-};
-
-export default GitRepoSelector;
diff --git a/src/apps/console/components/git.tsx b/src/apps/console/components/git.tsx
new file mode 100644
index 000000000..5b3012e56
--- /dev/null
+++ b/src/apps/console/components/git.tsx
@@ -0,0 +1,466 @@
+import {
+  CircleFill,
+  GithubLogoFill,
+  GitlabLogoFill,
+  ListBullets,
+  LockSimple,
+  LockSimpleOpen,
+  Plus,
+  Search,
+} from '@jengaicons/react';
+import { TextInput } from '~/components/atoms/input';
+import Select from '~/components/atoms/select';
+import { dayjs } from '~/components/molecule/dayjs';
+import { githubAppName } from '~/root/lib/configs/base-url.cjs';
+import Radio from '~/components/atoms/radio';
+import { useAppend, useMapper } from '~/components/utils';
+import { ReactNode, useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button } from '~/components/atoms/button';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useLocation } from '@remix-run/react';
+import { ILoginUrls, ILogins } from '../server/gql/queries/git-queries';
+import Pulsable from './pulsable';
+import useGit, { IGIT_PROVIDERS } from '../hooks/use-git';
+
+const extraAddOption = 'add';
+const extraSwitchOption = 'switch';
+
+const iconSize = 16;
+
+const gitHubOptions = [
+  {
+    label: 'Add Github Account',
+    value: extraAddOption,
+    labelValueIcon: <Plus size={iconSize} />,
+    render: () => (
+      <div className="flex flex-row gap-lg items-center">
+        <div>
+          <Plus size={iconSize} />
+        </div>
+        <div>Add Github Account</div>
+      </div>
+    ),
+  },
+];
+
+const commonOptions = [
+  {
+    label: 'Switch Git Provider',
+    value: extraSwitchOption,
+    labelValueIcon: <ListBullets size={iconSize} />,
+    render: () => (
+      <div className="flex flex-row gap-lg items-center">
+        <div>
+          <ListBullets size={iconSize} />
+        </div>
+        <div>Switch Git Provider</div>
+      </div>
+    ),
+  },
+];
+
+const githubInstallUrl = `https://github.com/apps/${githubAppName}/installations/new`;
+
+const popupWindow = ({
+  url = '',
+  onClose = () => { },
+  width = 800,
+  height = 500,
+  title = 'kloudlite',
+}) => {
+  const frame = window.open(
+    url,
+    title,
+    `toolbar=no,scrollbars=yes,resizable=no,top=${window.screen.height / 2 - height / 2
+    },left=${window.screen.width / 2 - width / 2},width=800,height=600`
+  );
+  const interval = setInterval(() => {
+    if (frame && frame.closed) {
+      clearInterval(interval);
+      onClose();
+    }
+  }, 100);
+};
+
+interface IBranch {
+  repo: string;
+  branch: string;
+  provider: IGIT_PROVIDERS;
+}
+
+interface IListRenderer {
+  data:
+  | { name: string; updatedAt: any; private: true; url: string }[]
+  | undefined;
+  onChange: (value: string) => void;
+  value: string;
+  isLoading?: boolean;
+}
+
+const mockListData = [
+  {
+    name: 'this is moc name',
+    private: false,
+    updatedAt: 'a month ago',
+    url: '',
+  },
+  {
+    name: 'this is moc name1',
+    private: false,
+    updatedAt: 'a month ago',
+    url: '',
+  },
+  {
+    name: 'this is moc name2',
+    private: false,
+    updatedAt: 'a month ago',
+    url: '',
+  },
+  {
+    name: 'this is moc name3',
+    private: false,
+    updatedAt: 'a month ago',
+    url: '',
+  },
+  {
+    name: 'this is moc name4',
+    private: false,
+    updatedAt: 'a month ago',
+    url: '',
+  },
+];
+
+const ListRenderer = ({ data, onChange, value, isLoading }: IListRenderer) => {
+  return (
+    <div className="flex flex-col min-h-[260px]">
+      <Pulsable isLoading={isLoading || !data}>
+        <Radio.Root
+          value={value}
+          withBounceEffect={false}
+          labelPlacement="left"
+          className="!gap-0"
+          onChange={onChange}
+        >
+          {[...(isLoading || !data ? mockListData : data)].map((repo) => {
+            return (
+              <Radio.Item
+                key={repo.name}
+                value={repo.url}
+                className="pulsable flex-row justify-between w-full py-2xl bodyMd-medium"
+                labelPlacement="left"
+              >
+                <div className="flex flex-row items-center gap-lg bodyMd-medium">
+                  <span>{repo.name}</span>
+
+                  <span>
+                    {repo.private ? (
+                      <LockSimple size={12} />
+                    ) : (
+                      <LockSimpleOpen size={12} />
+                    )}
+                  </span>
+                  <span>
+                    <CircleFill size={2} />
+                  </span>
+                  <span className="text-text-soft">
+                    {dayjs(repo.updatedAt).fromNow()}
+                  </span>
+                </div>
+              </Radio.Item>
+            );
+          })}
+        </Radio.Root>
+      </Pulsable>
+    </div>
+  );
+};
+
+interface IRepoRender {
+  label: string | undefined;
+  labelValueIcon: JSX.Element;
+  value: string;
+  render: () => JSX.Element;
+}
+
+interface IGitRepoSelector {
+  onChange?(source: IBranch): void;
+  error?: string;
+  value?: IBranch;
+  logins: ILogins;
+  loginUrls: ILoginUrls;
+}
+
+const valueRender = ({ label, labelValueIcon }: IRepoRender): ReactNode => {
+  return (
+    <div className="flex flex-row gap-xl items-center bodyMd text-text-default">
+      <span>{labelValueIcon}</span>
+      <span>{label}</span>
+    </div>
+  );
+};
+
+const Git = ({
+  onChange,
+  error,
+  value,
+  logins,
+  loginUrls,
+}: IGitRepoSelector) => {
+  const [showProviderOverlay, setShowProviderOverlay] = useState(
+    !logins?.providerGithub || !logins?.providerGitlab || false
+  );
+
+  const {
+    searchText,
+    setSearchText,
+    installations,
+    repos,
+    repo,
+    setRepo,
+    branches,
+    branch,
+    setBranch,
+    org,
+    setOrg,
+    provider,
+    isLoading,
+    forceFetchInstallations,
+    revalidate,
+  } = useGit({
+    provider: value?.provider || 'github',
+    retryWithOtherGitProvider: true,
+    defaultFetch: true,
+    onChange: (e) => {
+      if (!showProviderOverlay) {
+        onChange?.(e);
+      } else {
+        onChange?.({ repo: '', branch: '', provider });
+      }
+    },
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  const [githubButtonLoading, setGithubButtonLoading] = useState(false);
+  const [gitlabButtonLoading, setGitlabButtonLoading] = useState(false);
+
+  const accounts = useMapper(installations.data || [], (d) => {
+    return {
+      label: d.label,
+      value: provider === 'gitlab' ? d.value : d.label,
+      labelValueIcon:
+        provider === 'gitlab' ? (
+          <GitlabLogoFill size={iconSize} />
+        ) : (
+          <GithubLogoFill size={iconSize} />
+        ),
+      render: () => (
+        <div className="flex flex-row gap-lg items-center">
+          <div>
+            {provider === 'gitlab' ? (
+              <GitlabLogoFill size={iconSize} />
+            ) : (
+              <GithubLogoFill size={iconSize} />
+            )}
+          </div>
+          <div>{d.label}</div>
+        </div>
+      ),
+    };
+  });
+
+  const accountsModified = useAppend(
+    accounts,
+    provider === 'github'
+      ? [...gitHubOptions, ...commonOptions]
+      : [...commonOptions]
+  );
+
+  useEffect(() => {
+    setShowProviderOverlay(!!installations.error && !isLoading);
+  }, [installations.error, isLoading, installations.data]);
+
+  useEffect(() => {
+    setGitlabButtonLoading(false);
+    setGithubButtonLoading(false);
+  }, [installations.data, isLoading]);
+
+  useEffect(() => {
+    window.addEventListener('message', (e) => {
+      console.log(e);
+      if (e.data) {
+        const { type, status, provider } = e.data;
+        if (type === 'add-provider' && status === 'success') {
+          revalidate(provider);
+        }
+
+        if (type === 'install') {
+          revalidate(provider);
+        }
+      }
+    });
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (showProviderOverlay) {
+      setBranch('');
+    }
+  }, [showProviderOverlay]);
+
+  return (
+    <div>
+      <div className="flex flex-col relative border border-border-default rounded px-2xl">
+        <div className="flex flex-row gap-lg items-center py-2xl">
+          <div className="flex-1">
+            <Pulsable isLoading={installations.isLoading || loading}>
+              <div className="pulsable">
+                <Select
+                  size="lg"
+                  valueRender={valueRender}
+                  options={async () => accountsModified}
+                  value={{ label: org, value: org }}
+                  onChange={(res) => {
+                    switch (res.value) {
+                      case extraAddOption:
+                        popupWindow({
+                          url: githubInstallUrl,
+                        });
+                        break;
+                      case extraSwitchOption:
+                        setShowProviderOverlay(true);
+                        break;
+                      default:
+                        setOrg(res.label);
+                        break;
+                    }
+                  }}
+                />
+              </div>
+            </Pulsable>
+          </div>
+          <div className="flex-1">
+            <Pulsable isLoading={installations.isLoading || loading}>
+              <TextInput
+                size="lg"
+                placeholder="Search"
+                prefixIcon={<Search />}
+                value={searchText}
+                onChange={({ target }) => {
+                  setSearchText(target.value);
+                }}
+              />
+            </Pulsable>
+          </div>
+        </div>
+
+        <ListRenderer
+          value={repo}
+          data={repos.data}
+          isLoading={installations.isLoading || repos.isLoading || loading}
+          onChange={(v) => {
+            setRepo(v);
+          }}
+        />
+
+        <AnimatePresence mode="wait">
+          {showProviderOverlay && (
+            <motion.div className="absolute z-10 inset-0 flex flex-col items-center justify-center bg-surface-basic-subdued border border-border-default rounded">
+              <div className="text-text-soft bodyMd mb-5xl">
+                Select a Git provider to import an existing project from a Git
+                Repository.
+              </div>
+              <div className="w-[320px] flex flex-col gap-lg">
+                <Button
+                  variant="tertiary"
+                  content="Continue with Github"
+                  prefix={<GithubLogoFill />}
+                  block
+                  loading={githubButtonLoading}
+                  onClick={async () => {
+                    setGithubButtonLoading(true);
+                    const { errors } = await forceFetchInstallations('github');
+                    if (errors) {
+                      popupWindow({
+                        url: loginUrls.githubLoginUrl,
+                      });
+                    } else if (provider === 'github') {
+                      setShowProviderOverlay(false);
+                      setGitlabButtonLoading(false);
+                      setGithubButtonLoading(false);
+                    } else {
+                      revalidate('github');
+                    }
+                  }}
+                />
+                <Button
+                  variant="purple"
+                  content="Continue with Gitlab"
+                  prefix={<GitlabLogoFill />}
+                  block
+                  loading={gitlabButtonLoading}
+                  onClick={async () => {
+                    setGitlabButtonLoading(true);
+                    const { errors } = await forceFetchInstallations('gitlab');
+                    if (errors) {
+                      popupWindow({
+                        url: loginUrls.gitlabLoginUrl,
+                      });
+                    } else if (provider === 'gitlab') {
+                      setShowProviderOverlay(false);
+                      setGitlabButtonLoading(false);
+                      setGithubButtonLoading(false);
+                    } else {
+                      revalidate('gitlab');
+                    }
+                  }}
+                />
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+      <div className="pt-3xl">
+        <Pulsable
+          isLoading={
+            installations.isLoading ||
+            repos.isLoading ||
+            branches.isLoading ||
+            loading
+          }
+        >
+          <div className="pulsable">
+            <Select
+              label="Select branch"
+              size="lg"
+              value={
+                branch && !showProviderOverlay
+                  ? {
+                    label: branch,
+                    value: branch,
+                  }
+                  : undefined
+              }
+              disabled={!repo || showProviderOverlay}
+              placeholder="Select a branch"
+              options={async () => [
+                ...(branches.data?.map((d) => ({
+                  label: d.name || '',
+                  value: d.name || '',
+                })) || []),
+              ]}
+              onChange={({ value }) => {
+                setBranch(value);
+              }}
+              error={!!error}
+              message={error}
+            />
+          </div>
+        </Pulsable>
+      </div>
+    </div>
+  );
+};
+
+export default Git;
diff --git a/src/apps/console/components/list.tsx b/src/apps/console/components/list.tsx
index 9dc154938..c99134837 100644
--- a/src/apps/console/components/list.tsx
+++ b/src/apps/console/components/list.tsx
@@ -273,7 +273,7 @@ const Root = ({
       {loading && (
         <div
           className={cn(
-            'flex items-center justify-center',
+            'flex items-center justify-center h-full',
             {
               'rounded border border-border-default shadow-button': !plain,
             },
diff --git a/src/apps/console/components/multi-step-progress.tsx b/src/apps/console/components/multi-step-progress.tsx
index 62d488885..a23b9280a 100644
--- a/src/apps/console/components/multi-step-progress.tsx
+++ b/src/apps/console/components/multi-step-progress.tsx
@@ -1,41 +1,42 @@
 import { Check } from '@jengaicons/react';
-import React, {
-  Children,
-  ReactElement,
-  ReactNode,
-  useRef,
-  useState,
-} from 'react';
+import React, { Children, ReactElement, ReactNode, useState } from 'react';
 import { cn } from '~/components/utils';
 
 interface IUseMultiStepProgress {
   defaultStep: number;
   totalSteps: number;
+  onChange?: (step: number) => void;
 }
 export const useMultiStepProgress = ({
   defaultStep = 1,
   totalSteps = 1,
+  onChange,
 }: IUseMultiStepProgress) => {
   const [currentIndex, setCurrentIndex] = useState(defaultStep);
 
   const nextStep = () => {
     if (currentIndex < totalSteps) {
+      onChange?.(currentIndex + 1);
       setCurrentIndex((prev) => prev + 1);
     }
   };
   const prevStep = () => {
     if (currentIndex > 1) {
+      onChange?.(currentIndex - 1);
       setCurrentIndex((prev) => prev - 1);
     }
   };
 
   const jumpStep = (step: number) => {
+    onChange?.(step);
     setCurrentIndex(step);
   };
 
   const reset = () => {
+    onChange?.(1);
     setCurrentIndex(1);
   };
+
   return { currentStep: currentIndex, nextStep, prevStep, reset, jumpStep };
 };
 
@@ -45,9 +46,10 @@ type IProgressTrackerItem = {
   label: ReactNode;
   children?: ReactNode;
   onClick?: () => void;
-  hasBorder: boolean;
   index: number;
-  noJump?: boolean;
+  noJump?: (step: number) => boolean;
+  editable?: boolean;
+  step: number;
 };
 
 function ProgressTrackerItem(
@@ -59,17 +61,19 @@ function ProgressTrackerItem(
     completed = false,
     label,
     onClick,
-    hasBorder,
     index,
     noJump,
+    editable,
+    step,
   } = props;
-
   return (
     <div
       className={cn(
-        'pl-3xl  border-dashed flex flex-col -mt-[10px]',
-        { 'border-l': hasBorder || active },
-        completed ? 'border-l-border-primary' : 'border-l-icon-disabled'
+        'pl-5xl  border-dashed flex flex-col -mt-[10px] border-l-icon-disabled',
+        {
+          '[&:not(:last-child)]:border-l': !active,
+          'border-l': active,
+        }
       )}
     >
       <div>
@@ -78,12 +82,17 @@ function ProgressTrackerItem(
           aria-label={`step-${index}`}
           onClick={onClick}
           className={cn(
-            'border-2 border-surface-basic-default headingXs box-content w-3xl h-3xl rounded-full flex items-center justify-center absolute left-0 -ml-[12px]',
-            completed
-              ? 'bg-surface-primary-default text-text-on-primary'
-              : 'bg-surface-primary-selected',
-            active && !completed ? 'text-text-primary' : 'text-text-disabled',
-            onClick && !noJump ? 'cursor-pointer' : 'cursor-default'
+            'border-2 border-surface-basic-default headingXs box-content w-3xl h-3xl rounded-full flex items-center justify-center absolute left-0 ',
+            onClick && !noJump?.(step) ? 'cursor-pointer' : 'cursor-default',
+            {
+              'bg-surface-primary-default text-text-on-primary':
+                !!completed && !!editable,
+              'bg-icon-disabled text-text-on-primary': !!completed && !editable,
+              'bg-surface-basic-active text-text-disabled':
+                !completed && !active,
+              'bg-surface-primary-selected text-text-default':
+                active && !completed,
+            }
           )}
         >
           {completed ? <Check size={12} /> : index}
@@ -91,8 +100,11 @@ function ProgressTrackerItem(
         <span
           className={cn(
             '-mt-[14px] headingMd',
-            !noJump ? 'cursor-pointer select-none' : '',
-            !active || completed ? 'text-text-disabled' : 'text-text-default'
+            !noJump?.(step) ? 'cursor-pointer select-none' : 'cursor-default',
+            {
+              'text-text-default': !completed || (!!completed && !!editable),
+              'text-text-disabled': !!completed && !editable,
+            }
           )}
           onClick={onClick}
         >
@@ -109,8 +121,15 @@ interface IStep {
   label: ReactNode;
   step: number;
   className?: string;
+  completed?: boolean;
 }
-const Step = ({ children, step, className, label: _label }: IStep) => {
+const Step = ({
+  children,
+  step,
+  className,
+  label: _label,
+  completed: _completed,
+}: IStep) => {
   return (
     <div className={className} data-step={step}>
       {children}
@@ -122,13 +141,15 @@ interface IMultiStepProgress {
   children: ReactElement<IStep> | ReactElement<IStep>[];
   currentStep: number;
   jumpStep: (step: number) => void;
-  noJump?: boolean;
+  noJump?: (step: number) => boolean;
+  editable?: boolean;
 }
 const Root = ({
   children,
   currentStep,
   jumpStep,
   noJump,
+  editable = true,
 }: IMultiStepProgress) => {
   let child = children;
   // @ts-ignore
@@ -138,26 +159,26 @@ const Root = ({
   }
 
   return (
-    <div className="flex flex-col relative [counter-reset:steps]">
+    <div className="pl-[12px] flex flex-col relative [counter-reset:steps]">
       {Children.map(child, (ch, index) => {
         return (
           <ProgressTrackerItem
             {...ch}
             index={index + 1}
             label={ch.props.label}
-            hasBorder={ch.props.step <= currentStep}
+            step={ch.props.step}
             active={currentStep === ch.props.step}
-            noJump={noJump}
+            noJump={noJump || (() => !(index + 1 < currentStep))}
+            editable={editable}
+            completed={currentStep > ch.props.step}
             onClick={() => {
-              if (index + 1 < currentStep) {
-                if (!noJump) {
-                  jumpStep(index + 1);
-                }
+              if (noJump ? !noJump?.(ch.props.step) : index + 1 < currentStep) {
+                jumpStep(index + 1);
               }
             }}
           >
             {currentStep === ch.props.step ? (
-              <div className="py-3xl">{ch.props.children}</div>
+              <div className="pt-3xl pb-5xl">{ch.props.children}</div>
             ) : null}
           </ProgressTrackerItem>
         );
diff --git a/src/apps/console/dummy/data.js b/src/apps/console/dummy/data.js
index 2abc1cb81..652f43155 100644
--- a/src/apps/console/dummy/data.js
+++ b/src/apps/console/dummy/data.js
@@ -720,85 +720,3 @@ export const dummyData = {
     },
   ],
 };
-
-export const logsMockData = [
-  {
-    pod_name: 'main',
-    message:
-      'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message:
-      'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: '0dlRACNaaPWkx3hBmZNksKoR',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message:
-      'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'nnQhCA0QTSuukrRA',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message:
-      'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: 'nnQhCA0QTSuukrRA',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-  {
-    pod_name: 'main',
-    message: '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
-    timestamp: '2024-01-14T07:04:20.612Z',
-  },
-];
diff --git a/src/apps/console/hooks/use-git.tsx b/src/apps/console/hooks/use-git.tsx
new file mode 100644
index 000000000..b4ef489e2
--- /dev/null
+++ b/src/apps/console/hooks/use-git.tsx
@@ -0,0 +1,235 @@
+import { useEffect, useState } from 'react';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '../server/gql/api-provider';
+
+export type IGIT_PROVIDERS = 'gitlab' | 'github';
+
+const useDebounceText = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+type IGit = {
+  retryWithOtherGitProvider?: boolean;
+  defaultFetch?: boolean;
+  provider?: IGIT_PROVIDERS;
+  repo?: string;
+  branch?: string;
+  onChange?: (value: {
+    branch: string;
+    repo: string;
+    provider: IGIT_PROVIDERS;
+  }) => void;
+};
+const useGit = ({
+  retryWithOtherGitProvider,
+  defaultFetch,
+  onChange,
+  provider: initialProvider,
+  repo: initialRepo,
+  branch: initialBranch,
+}: IGit) => {
+  const [provider, setProvider] = useState<IGIT_PROVIDERS>(
+    initialProvider || 'github'
+  );
+  const [searchText, setSearchText] = useState('');
+  const [repo, setRepo] = useState(initialRepo || '');
+  const [org, setOrg] = useState('');
+  const [branch, setBranch] = useState(initialBranch || '');
+  const api = useConsoleApi();
+  const [loading, setLoading] = useState(true);
+  const [_revalidate, setRevalidate] = useState(0);
+
+  useEffect(() => {
+    setRevalidate((prev) => (defaultFetch ? prev + 1 : prev));
+  }, [defaultFetch]);
+
+  const data = {
+    github: {
+      key: 'api/github-installations',
+      repoKey: 'api/github-repos',
+      branchKey: 'api/github-branches',
+      api: api.listGithubInstalltions,
+      repoApi: api.searchGithubRepos,
+      branchApi: api.listGithubBranches,
+    },
+    gitlab: {
+      key: 'api/gitlab-installations',
+      repoKey: 'api/gitlab-repos',
+      branchKey: 'api/gitlab-branches',
+      api: api.listGitlabGroups,
+      repoApi: api.listGitlabRepos,
+      branchApi: api.listGitlabBranches,
+    },
+  };
+
+  useEffect(() => {
+    if (_revalidate === 0) {
+      setRevalidate((prev) => prev + 1);
+    }
+  }, [provider]);
+
+  const revalidate = (prov?: IGIT_PROVIDERS) => {
+    if (prov) {
+      setProvider(prov);
+      if (provider === prov) {
+        setRevalidate((prev) => prev + 1);
+      }
+    } else {
+      setRevalidate((prev) => prev + 1);
+    }
+  };
+
+  const debouncedSearch = useDebounceText(searchText, 500);
+
+  const forceFetchInstallations = async (prov: IGIT_PROVIDERS) =>
+    data[prov].api({});
+
+  const installations = useCustomSwr(
+    () => (_revalidate > 0 ? `${data[provider].key}_${_revalidate}` : null),
+    async () => data[provider].api({})
+  );
+
+  const repos = useCustomSwr(
+    () => (org ? `${data[provider].repoKey}_${org}_${debouncedSearch}` : null),
+    async () => {
+      switch (provider) {
+        case 'github':
+          return data.github.repoApi({
+            organization: org,
+            search: debouncedSearch,
+            pagination: {
+              page: 1,
+              per_page: 5,
+            },
+          });
+        case 'gitlab':
+          return data.gitlab.repoApi({
+            groupId: org,
+            query: debouncedSearch,
+            pagination: {
+              page: 1,
+              per_page: 5,
+            },
+          });
+        default:
+          return data.github.repoApi({
+            organization: org,
+            search: debouncedSearch,
+            pagination: {
+              page: 1,
+              per_page: 5,
+            },
+          });
+      }
+    }
+  );
+  const branches = useCustomSwr(
+    () => (repo ? `${data[provider].branchKey}_${repo}` : null),
+    async () => {
+      switch (provider) {
+        case 'github':
+          return data.github.branchApi({
+            repoUrl: repo,
+          });
+        case 'gitlab':
+          return data.gitlab.branchApi({
+            repoId: repo,
+          });
+        default:
+          return data.github.branchApi({
+            repoUrl: repo,
+          });
+      }
+    }
+  );
+
+  // trigger our loading
+  useEffect(() => {
+    if (installations.isLoading || installations.isValidating) {
+      setLoading(true);
+    }
+  }, [installations.isLoading, installations.isValidating]);
+
+  // fetch repos for first organization
+  useEffect(() => {
+    if (installations.data && installations.data.length > 0) {
+      switch (provider) {
+        case 'gitlab':
+          setOrg(installations.data[0].value);
+          break;
+        case 'github':
+          setOrg(installations.data[0].label);
+          break;
+        default:
+          break;
+      }
+      setLoading(false);
+    } else if (installations.error && !!retryWithOtherGitProvider) {
+      setProvider('gitlab');
+      if (provider !== 'github') {
+        setLoading(false);
+      }
+    }
+  }, [installations.data, installations.isValidating]);
+
+  // fetch branches for first repo
+  useEffect(() => {
+    if (repos.data && repos.data.length > 0) {
+      setRepo(repos.data[0].url);
+    }
+  }, [repos.data, repos.isValidating]);
+
+  // fetch branches for first repo
+  useEffect(() => {
+    if (branches.data && branches.data.length > 0) {
+      setBranch(branches.data[0].name || '');
+    }
+  }, [branches.data, branches.isValidating]);
+
+  useEffect(() => {
+    onChange?.({
+      branch,
+      repo,
+      provider,
+    });
+  }, [branch, repo]);
+
+  useEffect(() => {
+    if (installations.isLoading || repos.isLoading || branches.isLoading) {
+      setBranch('');
+    }
+  }, [installations.isLoading, repos.isLoading, branches.isLoading]);
+
+  return {
+    provider,
+    setProvider,
+    searchText,
+    setSearchText,
+    setRepo,
+    setOrg,
+    org,
+    repo,
+    installations,
+    repos,
+    branches,
+    branch,
+    setBranch,
+    isLoading: loading,
+    forceFetchInstallations,
+    revalidate,
+  };
+};
+
+export default useGit;
diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index 6a7d8c7ed..ddb844e49 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -23,19 +23,11 @@ const defaultApp: AppIn = {
   displayName: '',
 };
 
-type ISetState<T = any> = (fn: ((val: T) => T) | T) => void;
+export type ISetState<T = any> = (fn: ((val: T) => T) | T) => void;
 type ISetContainer<T = any> = (fn: ((val: T) => T) | T, index?: number) => void;
 
 const CreateAppContext = createContext<any>(null);
 
-export type createAppTabs =
-  | 'Environment'
-  | 'Application details'
-  | 'Compute'
-  | 'Network'
-  | 'Review'
-  | NonNullableString;
-
 export type createAppEnvPage =
   | 'environment_variables'
   | 'config_mounts'
@@ -47,7 +39,7 @@ interface IappState {
   };
   activeContIndex: number;
   envPage: createAppEnvPage;
-  page: createAppTabs;
+  page: number;
   app: AppIn;
 }
 
@@ -99,7 +91,7 @@ export const useAppState = () => {
     });
   };
 
-  const setPage: ISetState<createAppTabs> = (fn) => {
+  const setPage: ISetState<number> = (fn) => {
     if (typeof fn === 'function') {
       setState((s) => ({ ...s, page: fn(s.page) }));
     } else {
@@ -117,7 +109,7 @@ export const useAppState = () => {
 
   useEffect(() => {
     if (!page) {
-      setPage('Application details');
+      setPage(1);
     }
     if (!envPage) {
       setEnvPage('environment_variables');
@@ -159,7 +151,7 @@ export const useAppState = () => {
     }
   };
 
-  const isPageComplete = (page: createAppTabs) => {
+  const isPageComplete = (page: number) => {
     if (completePages) return completePages[page];
 
     setState((s) => {
@@ -171,7 +163,7 @@ export const useAppState = () => {
     return false;
   };
 
-  const markPageAsCompleted = (page: createAppTabs) => {
+  const markPageAsCompleted = (page: number) => {
     setState((s) => {
       return {
         ...s,
@@ -185,7 +177,7 @@ export const useAppState = () => {
 
   const resetState = (iApp?: AppIn) => {
     setState({
-      page: 'Application details',
+      page: 1,
       app: iApp || defaultApp,
       completePages: {},
       envPage: 'environment_variables',
diff --git a/src/apps/console/page-components/common-state.tsx b/src/apps/console/page-components/common-state.tsx
new file mode 100644
index 000000000..8a5a62104
--- /dev/null
+++ b/src/apps/console/page-components/common-state.tsx
@@ -0,0 +1,75 @@
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { ImmerHook, useImmer } from 'use-immer';
+import { ChildrenProps } from '~/components/types';
+
+const defaultData = {};
+const stateName = 'common_config_data';
+
+// type ISetState<T = any> = (fn: ((val: T) => T) | T) => void;
+
+const CreateDataContext = createContext<any>(null);
+
+interface IdataState {
+  [key: string]: any;
+}
+
+export const useDataState = <T,>(key: string) => {
+  const [state, setState] =
+    useContext<ImmerHook<IdataState>>(CreateDataContext);
+  const resetState = () => {
+    setState(() => defaultData);
+  };
+
+  return {
+    state: (state ? state[key] || {} : {}) as T,
+    setState: (fn: ((val: T) => any) | T) => {
+      if (typeof fn === 'function') {
+        setState((draft: IdataState) => {
+          // @ts-ignore
+          draft[key] = fn(draft[key] || {});
+        });
+      } else {
+        setState((draft: IdataState) => {
+          draft[key] = fn;
+        });
+      }
+    },
+    resetState,
+  };
+};
+
+export const clearDataState = () => {
+  if (typeof window === 'undefined') return;
+  sessionStorage.removeItem(stateName);
+};
+
+export const DataContextProvider = ({ children }: ChildrenProps) => {
+  const loadSession = () => {
+    if (typeof window === 'undefined') return defaultData;
+    const stateString =
+      sessionStorage.getItem(stateName) || JSON.stringify(defaultData);
+
+    try {
+      const data = JSON.parse(stateString);
+      return data || {};
+    } catch (_) {
+      return {};
+    }
+  };
+  const [state, setState] = useImmer<IdataState>(() => {
+    return loadSession();
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    sessionStorage.setItem(stateName, JSON.stringify(state || {}));
+  }, [state]);
+
+  return (
+    <CreateDataContext.Provider
+      value={useMemo(() => [state, setState], [state, setState])}
+    >
+      {children}
+    </CreateDataContext.Provider>
+  );
+};
diff --git a/src/apps/console/page-components/config-resource.tsx b/src/apps/console/page-components/config-resource.tsx
index 0862f7009..c94005fc7 100644
--- a/src/apps/console/page-components/config-resource.tsx
+++ b/src/apps/console/page-components/config-resource.tsx
@@ -224,7 +224,7 @@ const ConfigResources = ({
 
   const api = useConsoleApi();
   const reloadPage = useReload();
-  const { project, workspace } = useParams();
+  const { project, environment } = useParams();
   const props: IResource = {
     items,
     hasActions,
@@ -246,14 +246,14 @@ const ConfigResources = ({
         show={showDeleteDialog}
         setShow={setShowDeleteDialog}
         onSubmit={async () => {
-          if (!project || !workspace) {
+          if (!project || !environment) {
             throw new Error('Project and Environment name is required!.');
           }
           try {
             const { errors } = await api.deleteConfig({
               configName: parseName(showDeleteDialog),
               projectName: project,
-              envName: workspace,
+              envName: environment,
             });
 
             if (errors) {
diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
index 24d60f3ee..e9971e294 100644
--- a/src/apps/console/page-components/new-cluster.tsx
+++ b/src/apps/console/page-components/new-cluster.tsx
@@ -33,13 +33,13 @@ import { TitleBox } from '../components/raw-wrapper';
 
 type props =
   | {
-      providerSecrets: IProviderSecrets;
-      cloudProvider?: IProviderSecret;
-    }
+    providerSecrets: IProviderSecrets;
+    cloudProvider?: IProviderSecret;
+  }
   | {
-      providerSecrets?: IProviderSecrets;
-      cloudProvider: IProviderSecret;
-    };
+    providerSecrets?: IProviderSecrets;
+    cloudProvider: IProviderSecret;
+  };
 
 export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
   const { cloudprovider: cp } = useParams();
@@ -65,6 +65,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
   }));
 
   const { a: accountName } = useParams();
+  const rootUrl = `/${accountName}/infra/clusters`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: isOnboarding ? 4 : 1,
@@ -75,11 +76,11 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
 
   const [selectedProvider, setSelectedProvider] = useState<
     | {
-        label: string;
-        value: string;
-        provider: ExtractNodeType<IProviderSecrets>;
-        render: () => JSX.Element;
-      }
+      label: string;
+      value: string;
+      provider: ExtractNodeType<IProviderSecrets>;
+      render: () => JSX.Element;
+    }
     | undefined
   >(options.length === 1 ? options[0] : undefined);
 
@@ -93,7 +94,6 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
 
   const { values, errors, handleSubmit, handleChange, isLoading } = useForm({
     initialValues: {
-      vpc: '',
       name: '',
       region: 'ap-south-1' || selectedRegion?.Name,
       cloudProvider: cloudProvider
@@ -105,7 +105,6 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
       isNameError: false,
     },
     validationSchema: Yup.object({
-      vpc: Yup.string(),
       region: Yup.string().trim().required('Region is required'),
       cloudProvider: Yup.string().trim().required('Cloud provider is required'),
       name: Yup.string().trim().required('Name is required'),
@@ -151,7 +150,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
             throw e[0];
           }
           toast.success('Cluster created successfully');
-          navigate(`/${accountName}/infra/clusters`);
+          navigate(rootUrl);
         } catch (err) {
           handleError(err);
         }
@@ -173,7 +172,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
 
   const getView = () => {
     return (
-      <div className="flex flex-col gap-3xl py-3xl">
+      <div className="flex flex-col gap-3xl">
         <TitleBox
           subtitle="A cluster is a group of interconnected elements working together as a
           single unit."
@@ -253,15 +252,6 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                 setSelectedAvailabilityMode(availabilityMode);
               }}
             />
-
-            <TextInput
-              label="VPC"
-              size="lg"
-              onChange={handleChange('vpc')}
-              value={values.vpc}
-              error={!!errors.vpc}
-              message={errors.vpc}
-            />
           </div>
         </div>
         {isOnboarding ? (
@@ -305,16 +295,17 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
         {...(isOnboarding
           ? {}
           : {
-              backButton: {
-                content: 'Back to clusters',
-                to: `/${accountName}/infra/clusters`,
-              },
-            })}
+            backButton: {
+              content: 'Back to clusters',
+              to: rootUrl,
+            },
+          })}
       >
         <MultiStepProgress.Root
-          noJump={isOnboarding}
+          noJump={(step) => isOnboarding || !(step < currentStep)}
           currentStep={currentStep}
           jumpStep={jumpStep}
+          editable={!isOnboarding}
         >
           {!isOnboarding ? (
             <>
@@ -328,7 +319,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                     jumpStep(1);
                   }}
                 >
-                  <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
+                  <div className="flex flex-col p-xl gap-lg rounded border border-border-default flex-1 overflow-hidden">
                     <div className="flex flex-col gap-md  pb-lg  border-b border-border-default">
                       <div className="bodyMd-semibold text-text-default">
                         Cluster name
diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
index d7d69c391..34717d7c6 100644
--- a/src/apps/console/page-components/new-project.tsx
+++ b/src/apps/console/page-components/new-project.tsx
@@ -28,6 +28,7 @@ const NewProject = () => {
 
   const params = useParams();
   const { a: accountName } = params;
+  const rootUrl = `/${accountName}/projects`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: 1,
@@ -68,7 +69,7 @@ const NewProject = () => {
             throw e[0];
           }
           toast.success('project created successfully');
-          navigate(`/${accountName}/projects`);
+          navigate(rootUrl);
         } catch (err) {
           handleError(err);
         }
@@ -102,7 +103,7 @@ const NewProject = () => {
         subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams"
         backButton={{
           content: 'Back to projects',
-          to: `/${accountName}/projects`,
+          to: rootUrl,
         }}
       >
         <MultiStepProgress.Root currentStep={currentStep} jumpStep={jumpStep}>
diff --git a/src/apps/console/page-components/new-scope.tsx b/src/apps/console/page-components/new-scope.tsx
index ae76cd5c1..0a86b3339 100644
--- a/src/apps/console/page-components/new-scope.tsx
+++ b/src/apps/console/page-components/new-scope.tsx
@@ -57,7 +57,6 @@ const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null> & {}) => {
             env: {
               metadata: {
                 name: val.name,
-                namespace: parseTargetNs(project),
               },
               displayName: val.displayName,
               spec: {
diff --git a/src/apps/console/root.tsx b/src/apps/console/root.tsx
index 93548e154..966c169c6 100644
--- a/src/apps/console/root.tsx
+++ b/src/apps/console/root.tsx
@@ -1,8 +1,10 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import Root, { links as baseLinks } from '~/lib/app-setup/root';
 import { ChildrenProps } from '~/components/types';
+import { SockProvider } from '~/root/lib/client/helpers/socket/context';
 import authStylesUrl from './styles/index.css';
 import highlightCss from './styles/hljs/tokyo-night-dark.min.css';
+import { DataContextProvider } from './page-components/common-state';
 
 export { loader } from '~/lib/app-setup/root.jsx';
 export { shouldRevalidate } from '~/lib/app-setup/root.jsx';
@@ -18,12 +20,17 @@ export const links = () => {
 export { ErrorBoundary } from '~/lib/app-setup/root';
 
 const Layout = ({ children }: ChildrenProps) => {
-  // return <SocketProvider>{children}</SocketProvider>;
   return <>{children}</>;
 };
 
 const _Root = ({ ...props }) => {
-  return <Root {...props} Wrapper={Layout} />;
+  return (
+    <SockProvider>
+      <DataContextProvider>
+        <Root {...props} Wrapper={Layout} />
+      </DataContextProvider>
+    </SockProvider>
+  );
 };
 
 export default _Root;
diff --git a/src/apps/console/routes/_a+/$a+/new-project.tsx b/src/apps/console/routes/_a+/$a+/new-project.tsx
index 7d6656415..606513b55 100644
--- a/src/apps/console/routes/_a+/$a+/new-project.tsx
+++ b/src/apps/console/routes/_a+/$a+/new-project.tsx
@@ -5,7 +5,6 @@ import { getPagination, getSearch } from '~/console/server/utils/common';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 
-
 const _NewProject = () => {
   return <NewProject />;
 };
diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index 66c651f62..e0a7ef1f0 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -1,225 +1,34 @@
-import { ArrowRight, Plus, X } from '@jengaicons/react';
-import { useNavigate, useParams } from '@remix-run/react';
-import { Button, IconButton } from '~/components/atoms/button';
-import { TextInput } from '~/components/atoms/input';
+import { ArrowRight } from '@jengaicons/react';
+import { useNavigate } from '@remix-run/react';
+import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import useForm from '~/root/lib/client/hooks/use-form';
 import { UserMe } from '~/root/lib/server/gql/saved-queries';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
-import { useEffect, useState } from 'react';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import RawWrapper, { TitleBox } from '~/console/components/raw-wrapper';
-import { FadeIn } from '~/console/page-components/util';
-import { IdSelector } from '~/console/components/id-selector';
-import ProgressWrapper from '~/console/components/progress-wrapper';
-import SelectPrimitive from '~/components/atoms/select-primitive';
-import DynamicPagination from '~/console/components/dynamic-pagination';
-import List from '~/console/components/list';
-import {
-  ListBody,
-  ListItem,
-} from '~/console/components/console-list-components';
-import { usePagination } from '~/components/molecule/pagination';
-import { ACCOUNT_ROLES } from '~/console/utils/commons';
-import { Github__Com___Kloudlite___Api___Apps___Iam___Types__Role as Role } from '~/root/src/generated/gql/server';
-import { titleCase } from '~/components/utils';
+import { NameIdView } from '~/console/components/name-id-view';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
 
-const InviteSection = () => {
-  const { a: accountName } = useParams();
-  const api = useConsoleApi();
-  const [inviting, setInviting] = useState(false);
-
-  const [inviteMembers, setInviteMembers] = useState<
-    { userEmail: string; userRole: Role }[]
-  >([]);
-
-  const {
-    values: valuesInvite,
-    errors: errorsInvite,
-    handleChange: handleChangeInvite,
-    handleSubmit: handleSubmitInvite,
-    resetValues: resetValuesInvite,
-  } = useForm({
-    initialValues: {
-      userEmail: '',
-      userRole: 'account_member',
-    },
-    validationSchema: Yup.object({
-      userEmail: Yup.string()
-        .required()
-        .email()
-        .test('is-valid', 'Email already exists.', (value) => {
-          return !inviteMembers.find(
-            (im) => im.userEmail.toLowerCase() === value.toLowerCase()
-          );
-        }),
-      userRole: Yup.string().required().oneOf(Object.keys(ACCOUNT_ROLES)),
-    }),
-    onSubmit: async () => {
-      setInviteMembers((prev) => [
-        ...prev,
-        {
-          userEmail: valuesInvite.userEmail,
-          userRole: valuesInvite.userRole as Role,
-        },
-      ]);
-      resetValuesInvite();
-    },
-  });
-
-  const { page, hasNext, hasPrevious, onNext, onPrev, setItems } =
-    usePagination({
-      items: inviteMembers,
-      itemsPerPage: 5,
-    });
-
-  useEffect(() => {
-    setItems(inviteMembers);
-  }, [inviteMembers]);
-
-  const removeMember = ({ item }: { item: (typeof inviteMembers)[number] }) => {
-    setInviteMembers(inviteMembers.filter((im) => im !== item));
-  };
-
-  const sendInvitation = async () => {
-    if (inviting) {
-      return;
-    }
-
-    if (inviteMembers.length > 0) {
-      try {
-        setInviting(true);
-        const { errors: e } = await api.inviteMembersForAccount({
-          accountName: accountName!,
-          invitations: inviteMembers,
-        });
-        if (e) {
-          throw e[0];
-        }
-        toast.success('user invited');
-        // navigate(`/onboarding/${accountName}/new-cloud-provider`);
-      } catch (err) {
-        handleError(err);
-      } finally {
-        setInviting(false);
-      }
-    } else {
-      // navigate(`/onboarding/${accountName}/new-cloud-provider`);
-    }
-  };
-  return (
-    <div className="flex flex-col gap-6xl justify-center">
-      <form onSubmit={handleSubmitInvite} className="flex flex-col gap-3xl">
-        <div className="flex flex-col gap-xl">
-          <div className="flex gap-2xl">
-            <div className="flex-1">
-              <TextInput
-                label="Email"
-                value={valuesInvite.userEmail}
-                onChange={handleChangeInvite('userEmail')}
-                error={!!errorsInvite.userEmail}
-                message={titleCase(errorsInvite.userEmail || '')}
-              />
-            </div>
-
-            <SelectPrimitive.Root
-              label="Role"
-              value={valuesInvite.userRole}
-              onChange={handleChangeInvite('userRole')}
-            >
-              {Object.entries(ACCOUNT_ROLES).map(([key, value]) => {
-                return (
-                  <SelectPrimitive.Option key={key} value={key}>
-                    {value}
-                  </SelectPrimitive.Option>
-                );
-              })}
-            </SelectPrimitive.Root>
-          </div>
-          <div>
-            <Button
-              content="Invite"
-              variant="basic"
-              prefix={<Plus />}
-              size="sm"
-              type="submit"
-            />
-          </div>
-        </div>
-      </form>
-      <DynamicPagination
-        {...{
-          hasNext,
-          hasPrevious,
-          hasItems: inviteMembers.length > 0,
-          noItemsMessage: '0 teammates to invite.',
-          onNext,
-          onPrev,
-          headerClassName: 'bg-surface-basic-subdued',
-          header: <div className="bodyMd-medium py-lg px-2xl">Team list</div>,
-        }}
-        className="rounded border border-border-default overflow-hidden min-h-[266px]"
-      >
-        <List.Root plain>
-          {page.map((item) => {
-            return (
-              <List.Row
-                key={item.userEmail}
-                plain
-                className="p-lg px-xl [&:not(:last-child)]:border-b border-border-default"
-                columns={[
-                  {
-                    key: 1,
-                    className: 'flex-1',
-                    render: () => <ListItem data={item.userEmail} />,
-                  },
-                  {
-                    key: 2,
-                    render: () => <ListBody data={item.userRole} />,
-                  },
-                  {
-                    key: 3,
-                    render: () => (
-                      <IconButton
-                        icon={<X />}
-                        variant="plain"
-                        size="sm"
-                        onClick={() => {
-                          removeMember({ item });
-                        }}
-                      />
-                    ),
-                  },
-                ]}
-              />
-            );
-          })}
-        </List.Root>
-      </DynamicPagination>
-    </div>
-  );
-};
 const NewAccount = () => {
   const api = useConsoleApi();
   const navigate = useNavigate();
   const user = useDataFromMatches<UserMe>('user', {});
-  const [isNameLoading, setIsNameLoading] = useState(false);
   const { values, handleChange, errors, isLoading, handleSubmit } = useForm({
     initialValues: {
       name: '',
       displayName: '',
+      isNameError: false,
     },
     validationSchema: Yup.object({
       name: Yup.string().required(),
       displayName: Yup.string().required(),
     }),
     onSubmit: async (v) => {
-      if (isNameLoading) {
-        toast.error('id is being checked, please wait');
-        return;
-      }
       try {
         const { errors: _errors } = await api.createAccount({
           account: {
@@ -239,70 +48,53 @@ const NewAccount = () => {
     },
   });
 
-  const progressItems = [
-    {
-      label: 'Create Team',
-      active: true,
-      completed: false,
-      children: (
-        <form className="py-3xl flex flex-col gap-3xl" onSubmit={handleSubmit}>
-          <div className="flex flex-col">
-            <TextInput
-              size="lg"
-              value={values.displayName}
-              onChange={handleChange('displayName')}
-              error={!!errors.displayName}
-              message={errors.displayName}
-              label="Name"
-            />
-            <IdSelector
-              onLoad={(v) => setIsNameLoading(v)}
-              name={values.displayName}
-              onChange={(v) => handleChange('name')(dummyEvent(v))}
-              resType="account"
-              className="pt-2xl"
-            />
-          </div>
-          {/* <InviteSection /> */}
-          <div className="flex flex-row gap-xl justify-start">
-            <Button
-              variant="primary"
-              content="Continue"
-              suffix={<ArrowRight />}
-              size="md"
-              loading={isLoading}
-              type="submit"
-            />
-          </div>
-        </form>
-      ),
-    },
-    {
-      label: 'Add your Cloud Provider',
-      active: false,
-      completed: false,
-    },
-    {
-      label: 'Validate Cloud Provider',
-      active: false,
-      completed: false,
-    },
-    {
-      label: 'Setup First Cluster',
-      active: false,
-      completed: false,
-    },
-  ];
+  const { currentStep, jumpStep } = useMultiStepProgress({
+    defaultStep: 1,
+    totalSteps: 4,
+  });
 
   return (
-    <ProgressWrapper
-      title="Setup your account!"
-      subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
+    <form onSubmit={handleSubmit}>
+      <MultiStepProgressWrapper
+        title="Setup your account!"
+        subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
   teams"
-      progressItems={{
-        items: progressItems,
-      }}
-    />
+      >
+        <MultiStepProgress.Root
+          currentStep={currentStep}
+          editable={false}
+          noJump={() => true}
+          jumpStep={jumpStep}
+        >
+          <MultiStepProgress.Step step={1} label="Create team">
+            <div className="flex flex-col gap-3xl">
+              <NameIdView
+                label="Name"
+                resType="account"
+                name={values.name}
+                displayName={values.displayName}
+                errors={errors.name}
+                handleChange={handleChange}
+                nameErrorLabel="isNameError"
+              />
+              <div className="flex flex-row gap-xl justify-start">
+                <Button
+                  variant="primary"
+                  content="Continue"
+                  suffix={<ArrowRight />}
+                  size="md"
+                  loading={isLoading}
+                  type="submit"
+                />
+              </div>
+            </div>
+          </MultiStepProgress.Step>
+          <MultiStepProgress.Step step={2} label="Add your cloud provider" />
+          <MultiStepProgress.Step step={3} label="Validate cloud provider" />
+          <MultiStepProgress.Step step={4} label="Setup first cluster" />
+        </MultiStepProgress.Root>
+      </MultiStepProgressWrapper>
+    </form>
   );
 };
 
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
index 2655de7c1..0e54073f8 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
@@ -19,6 +19,10 @@ import { LoadingPlaceHolder } from '~/console/components/loading';
 import CodeView from '~/console/components/code-view';
 import { asyncPopupWindow } from '~/console/utils/commons';
 import ProgressWrapper from '~/console/components/progress-wrapper';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
 import { IAccountContext } from '../../../../_main+/$account+/_layout';
 
 export const loader = async (ctx: IRemixCtx) => {
@@ -45,7 +49,6 @@ export const loader = async (ctx: IRemixCtx) => {
 
 const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
   const { account } = useOutletContext<IAccountContext>();
-  const [showUnsavedChanges, setShowUnsavedChanges] = useState(false);
   const navigate = useNavigate();
 
   const api = useConsoleApi();
@@ -73,126 +76,114 @@ const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
     }
   );
 
-  const progressItems = [
-    {
-      label: 'Create Team',
-      active: false,
-      completed: true,
-    },
-    {
-      label: 'Invite your Team Members',
-      active: false,
-      completed: true,
-    },
-    {
-      label: 'Add your Cloud Provider',
-      active: false,
-      completed: true,
-    },
-    {
-      label: 'Validate Cloud Provider',
-      active: true,
-      completed: false,
-      children: (
-        <div className="flex flex-col gap-3xl py-3xl">
-          <div className="bodyMd text-text-soft">
-            Validate your cloud provider's credentials
-          </div>
-          {il ? (
-            <div className="py-2xl">
-              <LoadingPlaceHolder
-                title="Validating the cloudformation stack"
-                height={100}
-              />
-            </div>
-          ) : data?.result ? (
-            <div className="py-2xl">
-              <Badge type="success" icon={<Check />}>
-                Your Credential is valid
-              </Badge>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-3xl p-xl border border-border-default rounded">
-              <div className="flex gap-xl items-center">
-                <span>Account ID</span>
-                <span className="bodyMd-semibold text-text-primary">
-                  {cloudProvider.aws?.awsAccountId}
-                </span>
-              </div>
-              <div className="flex flex-col gap-2xl text-start">
-                <CodeView copy data={data?.installationUrl || ''} />
-
-                <span className="">
-                  visit the link above or
-                  <button
-                    className="inline-block mx-lg text-text-primary hover:underline"
-                    onClick={async () => {
-                      setIsLoading(true);
-                      try {
-                        await asyncPopupWindow({
-                          url: data?.installationUrl || '',
-                        });
-
-                        const res = await checkAwsAccess();
-
-                        if (res.result) {
-                          toast.success('Aws account validated successfully');
-                        } else {
-                          toast.error('Aws account validation failed');
-                        }
-                      } catch (err) {
-                        handleError(err);
-                      }
-
-                      setIsLoading(false);
-                    }}
-                  >
-                    click here
-                  </button>
-                  to create AWS cloudformation stack
-                </span>
-              </div>
-            </div>
-          )}
-          <div className="flex flex-row gap-xl justify-start">
-            {/* <Button */}
-            {/*   variant="outline" */}
-            {/*   content="Back" */}
-            {/*   prefix={<ArrowLeft />} */}
-            {/*   size="lg" */}
-            {/* /> */}
-            <Button
-              variant="primary"
-              content={data?.result ? 'Next' : 'Skip'}
-              suffix={<ArrowRight />}
-              onClick={() => {
-                navigate(
-                  `/onboarding/${parseName(account)}/${parseName(
-                    cloudProvider
-                  )}/new-cluster`
-                );
-              }}
-            />
-          </div>
-        </div>
-      ),
-    },
-    {
-      label: 'Setup First Cluster',
-      active: false,
-      completed: false,
-    },
-  ];
+  const { currentStep, jumpStep } = useMultiStepProgress({
+    defaultStep: 3,
+    totalSteps: 4,
+  });
 
   return (
-    <ProgressWrapper
-      title="Setup your account!"
-      subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
+    <form>
+      <MultiStepProgressWrapper
+        title="Setup your account!"
+        subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
   teams"
-      progressItems={{
-        items: progressItems,
-      }}
-    />
+      >
+        <MultiStepProgress.Root
+          currentStep={currentStep}
+          editable={false}
+          noJump={() => true}
+          jumpStep={jumpStep}
+        >
+          <MultiStepProgress.Step
+            step={1}
+            label="Create team"
+            className="py-3xl flex flex-col gap-3xl
+            "
+          />
+          <MultiStepProgress.Step step={2} label="Add your cloud provider" />
+          <MultiStepProgress.Step step={3} label="Validate cloud provider">
+            <div className="flex flex-col gap-3xl">
+              <div className="bodyMd text-text-soft">
+                Validate your cloud provider's credentials
+              </div>
+              {il ? (
+                <div className="py-2xl">
+                  <LoadingPlaceHolder
+                    title="Validating the cloudformation stack"
+                    height={100}
+                  />
+                </div>
+              ) : data?.result ? (
+                <div className="py-2xl">
+                  <Badge type="success" icon={<Check />}>
+                    Your Credential is valid
+                  </Badge>
+                </div>
+              ) : (
+                <div className="flex flex-col gap-3xl p-xl border border-border-default rounded">
+                  <div className="flex gap-xl items-center">
+                    <span>Account ID</span>
+                    <span className="bodyMd-semibold text-text-primary">
+                      {cloudProvider.aws?.awsAccountId}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-2xl text-start">
+                    <CodeView copy data={data?.installationUrl || ''} />
+
+                    <span className="">
+                      visit the link above or
+                      <button
+                        className="inline-block mx-lg text-text-primary hover:underline"
+                        onClick={async () => {
+                          setIsLoading(true);
+                          try {
+                            await asyncPopupWindow({
+                              url: data?.installationUrl || '',
+                            });
+
+                            const res = await checkAwsAccess();
+
+                            if (res.result) {
+                              toast.success(
+                                'Aws account validated successfully'
+                              );
+                            } else {
+                              toast.error('Aws account validation failed');
+                            }
+                          } catch (err) {
+                            handleError(err);
+                          }
+
+                          setIsLoading(false);
+                        }}
+                      >
+                        click here
+                      </button>
+                      to create AWS cloudformation stack
+                    </span>
+                  </div>
+                </div>
+              )}
+              <div className="flex flex-row gap-xl justify-start">
+                <Button
+                  variant="primary"
+                  content={data?.result ? 'Next' : 'Skip'}
+                  suffix={<ArrowRight />}
+                  onClick={() => {
+                    navigate(
+                      `/onboarding/${parseName(account)}/${parseName(
+                        cloudProvider
+                      )}/new-cluster`
+                    );
+                  }}
+                />
+              </div>
+            </div>
+          </MultiStepProgress.Step>
+          <MultiStepProgress.Step step={4} label="Setup first cluster" />
+        </MultiStepProgress.Root>
+      </MultiStepProgressWrapper>
+    </form>
   );
 };
 
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
index 2ed12a137..5d599a4b9 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
@@ -10,8 +10,11 @@ import { handleError } from '~/root/lib/utils/common';
 import { useState } from 'react';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { validateCloudProvider } from '~/console/server/r-utils/common';
-import ProgressWrapper from '~/console/components/progress-wrapper';
 import { NameIdView } from '~/console/components/name-id-view';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
 
 const NewCloudProvider = () => {
   const { a: accountName } = useParams();
@@ -80,92 +83,89 @@ const NewCloudProvider = () => {
     },
   });
 
-  const progressItems = [
-    {
-      label: 'Create Team',
-      active: false,
-      completed: true,
-    },
-    {
-      label: 'Add your Cloud Provider',
-      active: true,
-      completed: false,
-      children: (
-        <form className="py-3xl flex flex-col gap-3xl" onSubmit={handleSubmit}>
-          <div className="bodyMd text-text-soft">
-            A cloud provider offers remote computing resources and services over
-            the internet.
-          </div>
-          <div className="flex flex-col">
-            <NameIdView
-              nameErrorLabel="isNameError"
-              resType="providersecret"
-              displayName={values.displayName}
-              name={values.name}
-              label="Name"
-              placeholder="Enter provider name"
-              errors={errors.name}
-              handleChange={handleChange}
-            />
-            <div className="flex flex-col gap-3xl pt-3xl">
-              <Select
-                error={!!errors.provider}
-                message={errors.provider}
-                value={values.provider}
-                size="lg"
-                label="Provider"
-                onChange={(value) => {
-                  handleChange('provider')(dummyEvent(value));
-                }}
-                options={async () => providers}
-              />
-
-              {values.provider.value === 'aws' && (
-                <TextInput
-                  name="awsAccountId"
-                  onChange={handleChange('awsAccountId')}
-                  error={!!errors.awsAccountId}
-                  message={errors.awsAccountId}
-                  value={values.awsAccountId}
-                  label="Account ID"
-                  size="lg"
-                />
-              )}
-            </div>
-          </div>
-          <div className="flex flex-row gap-xl justify-start">
-            <Button
-              loading={isLoading}
-              type="submit"
-              variant="primary"
-              content="Continue"
-              suffix={<ArrowRight />}
-            />
-          </div>
-        </form>
-      ),
-    },
-    {
-      label: 'Validate Cloud Provider',
-      active: false,
-      completed: false,
-    },
-    {
-      label: 'Setup First Cluster',
-      active: false,
-      completed: false,
-    },
-  ];
+  const { currentStep, jumpStep } = useMultiStepProgress({
+    defaultStep: 2,
+    totalSteps: 4,
+  });
 
   return (
-    <ProgressWrapper
-      title="Setup your account!"
-      subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
+    <form onSubmit={handleSubmit}>
+      <MultiStepProgressWrapper
+        title="Setup your account!"
+        subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
   teams"
-      progressItems={{
-        items: progressItems,
-      }}
-    />
+      >
+        <MultiStepProgress.Root
+          currentStep={currentStep}
+          editable={false}
+          noJump={() => true}
+          jumpStep={jumpStep}
+        >
+          <MultiStepProgress.Step
+            step={1}
+            label="Create team"
+            className="py-3xl flex flex-col gap-3xl
+            "
+          />
+          <MultiStepProgress.Step step={2} label="Add your cloud provider">
+            <div className="flex flex-col gap-3xl">
+              <div className="bodyMd text-text-soft">
+                A cloud provider offers remote computing resources and services
+                over the internet.
+              </div>
+              <div className="flex flex-col">
+                <NameIdView
+                  nameErrorLabel="isNameError"
+                  resType="providersecret"
+                  displayName={values.displayName}
+                  name={values.name}
+                  label="Name"
+                  placeholder="Enter provider name"
+                  errors={errors.name}
+                  handleChange={handleChange}
+                />
+                <div className="flex flex-col gap-3xl pt-3xl">
+                  <Select
+                    error={!!errors.provider}
+                    message={errors.provider}
+                    value={values.provider}
+                    size="lg"
+                    label="Provider"
+                    onChange={(value) => {
+                      handleChange('provider')(dummyEvent(value));
+                    }}
+                    options={async () => providers}
+                  />
+
+                  {values.provider.value === 'aws' && (
+                    <TextInput
+                      name="awsAccountId"
+                      onChange={handleChange('awsAccountId')}
+                      error={!!errors.awsAccountId}
+                      message={errors.awsAccountId}
+                      value={values.awsAccountId}
+                      label="Account ID"
+                      size="lg"
+                    />
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-row gap-xl justify-start">
+                <Button
+                  loading={isLoading}
+                  type="submit"
+                  variant="primary"
+                  content="Continue"
+                  suffix={<ArrowRight />}
+                />
+              </div>
+            </div>
+          </MultiStepProgress.Step>
+          <MultiStepProgress.Step step={3} label="Validate cloud provider" />
+          <MultiStepProgress.Step step={4} label="Setup first cluster" />
+        </MultiStepProgress.Root>
+      </MultiStepProgressWrapper>
+    </form>
   );
 };
 
diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
index d7fc64eb9..9919644d6 100644
--- a/src/apps/console/routes/_a+/teams.tsx
+++ b/src/apps/console/routes/_a+/teams.tsx
@@ -70,9 +70,10 @@ const Accounts = () => {
     user: UserMe;
   }>();
 
-  const [isHandling, setIsHandling] = useState<
-    'none' | 'accepting' | 'rejecting'
-  >('none');
+  const [isHandling, setIsHandling] = useState<{
+    id: string;
+    state: 'none' | 'accepting' | 'rejecting';
+  }>({ id: '', state: 'none' });
 
   const { email } = user;
 
@@ -134,7 +135,7 @@ const Accounts = () => {
     } catch (err) {
       handleError(err);
     } finally {
-      setIsHandling('none');
+      setIsHandling({ id: '', state: 'none' });
     }
   };
 
@@ -145,7 +146,7 @@ const Accounts = () => {
     accountName: string;
     inviteToken: string;
   }) => {
-    setIsHandling('accepting');
+    setIsHandling({ id: accountName, state: 'accepting' });
     await handleInvitation({
       accountName,
       inviteToken,
@@ -163,7 +164,7 @@ const Accounts = () => {
     accountName: string;
     inviteToken: string;
   }) => {
-    setIsHandling('rejecting');
+    setIsHandling({ id: accountName, state: 'rejecting' });
 
     await handleInvitation({
       accountName,
@@ -175,6 +176,7 @@ const Accounts = () => {
     });
   };
 
+  console.log('accounts', accounts, page);
   return (
     <div className="min-h-screen max-w-[1024px] bg-surface-basic-default p-10xl">
       <div className="max-w-[568px] flex flex-col gap-7xl">
@@ -193,7 +195,7 @@ const Accounts = () => {
               hasNext,
               hasPrevious,
               hasItems: accounts.length > 0 || invites.length > 0,
-              noItemsMessage: '0 teammates to invite.',
+              noItemsMessage: '0 teams',
               onNext,
               onPrev,
               header: (
@@ -203,12 +205,14 @@ const Accounts = () => {
                 </div>
               ),
             }}
-            className="shadow-button border border-border-default bg-surface-basic-default rounded min-h-[427px]"
+            className="shadow-button border border-border-default bg-surface-basic-default rounded min-h-[427px] h-[427px]"
           >
-            <List.Root plain linkComponent={Link}>
+            <List.Root
+              plain
+              linkComponent={Link}
+              loading={accounts.length > 0 && page.length === 0}
+            >
               {page.map((account, index) => {
-                // console.log('here....', account);
-
                 const name = parseName(account);
                 const { isInvite, displayName, inviteToken } = account;
                 return (
@@ -252,7 +256,10 @@ const Accounts = () => {
                                         inviteToken: inviteToken || '',
                                       });
                                     }}
-                                    loading={isHandling === 'rejecting'}
+                                    loading={
+                                      isHandling.id === displayName &&
+                                      isHandling.state === 'rejecting'
+                                    }
                                   />
                                   <Button
                                     content="Accept invitation"
@@ -263,7 +270,10 @@ const Accounts = () => {
                                         inviteToken: inviteToken || '',
                                       })
                                     }
-                                    loading={isHandling === 'accepting'}
+                                    loading={
+                                      isHandling.id === displayName &&
+                                      isHandling.state === 'accepting'
+                                    }
                                   />
                                 </div>
                               ),
diff --git a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx b/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx
deleted file mode 100644
index 0717ad91d..000000000
--- a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useOutletContext, useSearchParams } from '@remix-run/react';
-import LogComp from '~/console/components/logger';
-import { NumberInput } from '~/components/atoms/input';
-import { useState } from 'react';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { Button } from '~/components/atoms/button';
-import { useQueryParameters } from '~/root/lib/client/hooks/use-search';
-import { parseName } from '~/console/server/r-utils/common';
-import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route';
-
-const ItemList = () => {
-  const { app } = useOutletContext<IAppContext>();
-  const [sp] = useSearchParams();
-
-  const [url] = useState(
-    `wss://observability.dev.kloudlite.io/observability/logs/app?resource_name=${parseName(
-      app
-    )}&resource_namespace=${app.metadata!.namespace}&start_time=${
-      sp.get('start') || 1690273382
-    }&end_time=${sp.get('end') || 1690532560}`
-  );
-
-  const { setQueryParameters } = useQueryParameters();
-
-  const { values, handleChange, handleSubmit } = useForm({
-    initialValues: {
-      start: sp.get('start') || '1690273382',
-      end: sp.get('end') || '1690532560',
-    },
-    validationSchema: Yup.object({}),
-    onSubmit: (val) => {
-      // @ts-ignore
-      setQueryParameters(val);
-    },
-  });
-
-  return (
-    <div className="p-lg flex flex-col gap-xl">
-      <div>Logs Url: {url}</div>
-      <LogComp
-        dark
-        websocket={{
-          account: '',
-          cluster: '',
-          trackingId: '',
-        }}
-        height="60vh"
-        width="100%"
-        url={url}
-        selectableLines
-      />
-      <form onSubmit={handleSubmit} className="flex flex-col gap-xl">
-        <NumberInput
-          label="start data timestamp"
-          value={values.start}
-          onChange={handleChange('start')}
-          placeholder="start"
-        />
-        <NumberInput
-          label="end date timestamp"
-          placeholder="end"
-          value={values.end}
-          onChange={handleChange('end')}
-        />
-        <div className="flex gap-xl">
-          <Button type="submit" content="update search params" />
-          <Button
-            onClick={() => {
-              window.location.reload();
-            }}
-            content="reload"
-          />
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default ItemList;
diff --git a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx b/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx
deleted file mode 100644
index 1e1db9c82..000000000
--- a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useSearchParams } from '@remix-run/react';
-import { useMemo } from 'react';
-import { toast } from 'react-toastify';
-import CommonTools from '~/console/components/common-tools';
-
-const Tools = () => {
-  const [searchParams] = useSearchParams();
-
-  const options = useMemo(
-    () => [
-      {
-        name: 'Status',
-        type: 'text',
-        search: false,
-        dataFetcher: async () => {
-          return [
-            { content: 'Active', value: 'active' },
-            { content: 'Freezed', value: 'freezed' },
-            { content: 'Archived', value: 'archived' },
-          ];
-        },
-      },
-    ],
-    [searchParams]
-  );
-
-  return <CommonTools {...{ options, noViewMode: true, noSort: true }} />;
-};
-
-export default Tools;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx
index dd73de1bb..a5ba0e205 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx
@@ -1,5 +1,5 @@
 import { redirect } from '@remix-run/node';
 
 export const loader = async () => {
-  return redirect('overview');
+  return redirect('logs-n-metrics');
 };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx
index a7f24be71..5f27ee193 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx
@@ -26,16 +26,10 @@ const ProjectTabs = () => {
       }}
       tabs={[
         {
-          label: 'Overview',
-          to: '/overview',
-          value: '/overview',
+          label: 'Logs & Metrics',
+          to: '/logs-n-metrics',
+          value: '/logs-n-metrics',
         },
-        {
-          label: 'Logs',
-          to: '/logs',
-          value: '/logs',
-        },
-
         {
           label: 'Settings',
           to: '/settings/general',
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
new file mode 100644
index 000000000..8ea1645d2
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -0,0 +1,289 @@
+import { useOutletContext } from '@remix-run/react';
+import axios from 'axios';
+import Chart from '~/console/components/charts/charts-client';
+import useDebounce from '~/root/lib/client/hooks/use-debounce';
+import { useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
+import { parseValue } from '~/console/page-components/util';
+import { ApexOptions } from 'apexcharts';
+import { parseName } from '~/console/server/r-utils/common';
+import { Clock, ListNumbers } from '@jengaicons/react';
+import { cn } from '~/components/utils';
+import { useDataState } from '~/console/page-components/common-state';
+import { observeUrl } from '~/root/lib/configs/base-url.cjs';
+import { IAppContext } from '../_layout';
+import LogComp from '~/root/lib/client/components/logger';
+
+const LogsAndMetrics = () => {
+  const { app, project, account } = useOutletContext<IAppContext>();
+  const [cpuData, setCpuData] = useState<number[]>([]);
+  const [memoryData, setMemoryData] = useState<number[]>([]);
+
+  const xAxisFormatter = (_: string, __?: number) => {
+    // return dayjs((val || 0) * 1000).format('hh:mm A');
+    return '';
+  };
+
+  const tooltipXAixsFormatter = (val: number) =>
+    dayjs(val * 1000).format('DD/MM/YY hh:mm A');
+
+  useDebounce(
+    () => {
+      (async () => {
+        try {
+          const resp = await axios({
+            url: `${observeUrl}/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
+            method: 'GET',
+            withCredentials: true,
+          });
+
+          setCpuData(resp?.data?.data?.result[0]?.values || []);
+        } catch (err) {
+          console.error(err);
+        }
+      })();
+      (async () => {
+        try {
+          const resp = await axios({
+            url: `${observeUrl}/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
+            method: 'GET',
+            withCredentials: true,
+          });
+
+          setMemoryData(resp?.data?.data?.result[0]?.values || []);
+        } catch (err) {
+          console.error(err);
+        }
+      })();
+    },
+    1000,
+    []
+  );
+
+  const chartOptions: ApexOptions = {
+    chart: {
+      type: 'area',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      redrawOnWindowResize: true,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'smooth',
+    },
+
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        show: false,
+        formatter: xAxisFormatter,
+      },
+    },
+  };
+
+  const { state, setState } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
+  return (
+    <div className="flex flex-col gap-6xl pt-6xl">
+      <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-4">
+        <Chart
+          title="CPU Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'CPU',
+                data: cpuData,
+              },
+            ],
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} m`;
+                },
+              },
+            },
+            yaxis: {
+              min: 0,
+              max: parseValue(app.spec.containers[0].resourceCpu?.max, 0),
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} m`,
+              },
+            },
+          }}
+        />
+
+        <Chart
+          title="Memory Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'Memory',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+
+        <Chart
+          disabled
+          title="Network IO"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'DiskIO',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+
+        <Chart
+          disabled
+          title="Disk IO"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'DiskIO',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+      </div>
+
+      <div className="flex-1">
+        <LogComp
+          {...{
+            hideLineNumber: !state.linesVisible,
+            hideTimestamp: !state.timestampVisible,
+            dark: true,
+            width: '100%',
+            height: '70vh',
+            title: 'Logs',
+            actionComponent: (
+              <div className="hljs flex items-center gap-xl px-xs">
+                <div
+                  onClick={() => {
+                    setState((s) => ({ ...s, linesVisible: !s.linesVisible }));
+                  }}
+                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+                >
+                  <span
+                    className={cn({
+                      'opacity-50': !state.linesVisible,
+                    })}
+                  >
+                    <ListNumbers color="currentColor" size={16} />
+                  </span>
+                </div>
+                <div
+                  onClick={() => {
+                    setState((s) => ({
+                      ...s,
+                      timestampVisible: !s.timestampVisible,
+                    }));
+                  }}
+                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+                >
+                  <span
+                    className={cn({
+                      'opacity-50': !state.timestampVisible,
+                    })}
+                  >
+                    <Clock color="currentColor" size={16} />
+                  </span>
+                </div>
+              </div>
+            ),
+            websocket: {
+              account: parseName(account),
+              cluster: project.clusterName || '',
+              trackingId: app.id,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LogsAndMetrics;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx
deleted file mode 100644
index 5369da90c..000000000
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useOutletContext } from '@remix-run/react';
-import LogComp from '~/console/components/logger';
-import { parseName } from '~/console/server/r-utils/common';
-import { IAppContext } from '../route';
-
-const Overview = () => {
-  const { app, project, account } = useOutletContext<IAppContext>();
-  return (
-    <div className="my-6xl flex-1">
-      <LogComp
-        {...{
-          dark: true,
-          width: '100%',
-          height: 'calc(100vh - 12rem)',
-          title: 'Logs',
-          websocket: {
-            account: parseName(account),
-            cluster: project.clusterName || '',
-            trackingId: app.id,
-          },
-        }}
-      />
-    </div>
-  );
-};
-
-export default Overview;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx
deleted file mode 100644
index a25b7aaa0..000000000
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Wip from '~/console/components/wip';
-
-const Overview = () => {
-  return <Wip />;
-};
-
-export default Overview;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
index 5dd8beb07..189b367a8 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
@@ -19,7 +19,7 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { DiffViewer, yamlDump } from '~/console/components/diff-viewer';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
-import { IAppContext } from '../route';
+import { IAppContext } from '../_layout';
 
 const navItems = [
   { label: 'General', value: 'general' },
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx
index b84298bfd..af52b113c 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx
@@ -11,7 +11,7 @@ import { toast } from '~/components/molecule/toast';
 import { handleError } from '~/root/lib/utils/common';
 import Wrapper from '~/console/components/wrapper';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { IAppContext } from '../../route';
+import { IAppContext } from '../../_layout';
 
 const SettingAdvance = () => {
   const { app } = useAppState();
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 507c7277f..4811a8f4a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -1,18 +1,13 @@
 import { useEffect } from 'react';
-import {
-  NumberInput,
-  PasswordInput,
-  TextInput,
-} from '~/components/atoms/input';
+import { NumberInput, TextInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
-import { TitleBox } from '~/console/components/raw-wrapper';
 import { useAppState } from '~/console/page-components/app-states';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 
 import { InfoLabel } from '~/console/components/commons';
-import { FadeIn, parseValue } from '~/console/page-components/util';
+import { parseValue } from '~/console/page-components/util';
 import Select from '~/components/atoms/select';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import Wrapper from '~/console/components/wrapper';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
index ec5ec9388..771841875 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
@@ -1,14 +1,11 @@
 import {
-  DotsThreeVerticalFill,
   GearSix,
   LinkBreak,
-  Trash,
   Link as LinkIcon,
+  Repeat,
 } from '@jengaicons/react';
 import { Link, useOutletContext, useParams } from '@remix-run/react';
-import { IconButton } from '~/components/atoms/button';
-import { cn, generateKey, titleCase } from '~/components/utils';
-import { listRender } from '~/console/components/commons';
+import { generateKey, titleCase } from '~/components/utils';
 import {
   ListItem,
   ListSecondary,
@@ -26,7 +23,7 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IApps } from '~/console/server/gql/queries/app-queries';
 import {
   ExtractNodeType,
-  parseName,
+  parseName as pn,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
@@ -34,7 +31,7 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { listStatus } from '~/console/components/sync-status';
-import { IAppContext } from '../app+/$app+/route';
+import { IEnvironmentContext } from '../_layout';
 
 const RESOURCE_NAME = 'app';
 type BaseType = ExtractNodeType<IApps>;
@@ -42,7 +39,7 @@ type BaseType = ExtractNodeType<IApps>;
 const parseItem = (item: ExtractNodeType<IApps>) => {
   return {
     name: item.displayName,
-    id: parseName(item),
+    id: pn(item),
     intercept: item.spec.intercept,
     updateInfo: {
       author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
@@ -55,7 +52,7 @@ type OnAction = ({
   action,
   item,
 }: {
-  action: 'delete' | 'edit' | 'intercept' | 'remove_intercept';
+  action: 'delete' | 'edit' | 'intercept' | 'remove_intercept' | 'restart';
   item: BaseType;
 }) => void;
 
@@ -91,7 +88,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
     options = [
       {
         label: 'Intercept',
-        icon: <LinkIcon size={iconSize} />,
+        icon: <Repeat size={iconSize} />,
         type: 'item',
         onClick: () => onAction({ action: 'intercept', item }),
         key: 'intercept',
@@ -99,6 +96,18 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
       ...options,
     ];
   }
+
+  options = [
+    {
+      label: 'Restart',
+      icon: <LinkIcon size={iconSize} />,
+      type: 'item',
+      onClick: () => onAction({ action: 'restart', item }),
+      key: 'restart',
+    },
+    ...options,
+  ];
+
   return <ResourceExtraAction options={options} />;
 };
 
@@ -107,7 +116,7 @@ interface IResource {
   onAction: OnAction;
 }
 
-const GridView = ({ items = [], onAction }: IResource) => {
+const GridView = ({ items = [], onAction: _ }: IResource) => {
   const { account, project, environment } = useParams();
 
   return (
@@ -219,10 +228,17 @@ const ListView = ({ items = [], onAction }: IResource) => {
 
 const AppsResources = ({ items = [] }: Omit<IResource, 'onAction'>) => {
   const api = useConsoleApi();
-  const { environment, project } = useParams();
-  const { devicesForUser } = useOutletContext<IAppContext>();
+  const { environment, project, account } = useParams();
+  const { devicesForUser } = useOutletContext<IEnvironmentContext>();
   const reload = useReload();
 
+  // useWatchItems(items, (item) => ({
+  //   account,
+  //   project,
+  //   environment,
+  //   app: pn(item),
+  // }));
+
   const interceptApp = async (item: BaseType, intercept: boolean) => {
     if (!environment || !project) {
       throw new Error('Environment is required!.');
@@ -231,8 +247,8 @@ const AppsResources = ({ items = [] }: Omit<IResource, 'onAction'>) => {
       const device = devicesForUser[0];
       try {
         const { errors } = await api.interceptApp({
-          appname: parseName(item),
-          deviceName: parseName(device),
+          appname: pn(item),
+          deviceName: pn(device),
           envName: environment,
           intercept,
           projectName: project,
@@ -248,6 +264,29 @@ const AppsResources = ({ items = [] }: Omit<IResource, 'onAction'>) => {
       }
     }
   };
+
+  const restartApp = async (item: BaseType) => {
+    if (!environment || !project) {
+      throw new Error('Environment is required!.');
+    }
+
+    try {
+      const { errors } = await api.restartApp({
+        appName: pn(item),
+        envName: environment,
+        projectName: project,
+      });
+
+      if (errors) {
+        throw errors[0];
+      }
+      toast.success('App restarted successfully');
+      // reload();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   const props: IResource = {
     items,
     onAction: ({ action, item }) => {
@@ -255,6 +294,9 @@ const AppsResources = ({ items = [] }: Omit<IResource, 'onAction'>) => {
         case 'intercept':
           interceptApp(item, true);
           break;
+        case 'restart':
+          restartApp(item);
+          break;
         case 'remove_intercept':
           interceptApp(item, false);
           break;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 8d775f13c..cf71f78d3 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -134,12 +134,11 @@ const AppCompute = () => {
         (async () => {
           const res = await submit();
           if (res) {
-            setPage('Environment');
-            markPageAsCompleted('Compute');
+            setPage(3);
+            markPageAsCompleted(2);
           }
         })();
       }}
-      className="py-3xl"
     >
       <div className="bodyMd text-text-soft">
         Compute refers to the processing power and resources used for data
@@ -396,7 +395,7 @@ const AppCompute = () => {
         </div>
       </div> */}
 
-      <div className="flex flex-row gap-xl justify-end items-center">
+      <div className="flex flex-row gap-xl items-center">
         <Button
           content="App Info"
           prefix={<ArrowLeft />}
@@ -405,7 +404,7 @@ const AppCompute = () => {
             (async () => {
               const res = await submit();
               if (res) {
-                setPage('Application details');
+                setPage(1);
               }
             })();
           }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
index 56d3a481b..9b0ccc0b5 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
@@ -1,10 +1,9 @@
 import { ArrowRight } from '@jengaicons/react';
 import { Button } from '~/components/atoms/button';
 import { TextInput } from '~/components/atoms/input';
-import { IdSelector } from '~/console/components/id-selector';
 import { useAppState } from '~/console/page-components/app-states';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
@@ -41,8 +40,8 @@ const AppDetail = () => {
           displayName: val.displayName,
         };
       });
-      setPage('Compute');
-      markPageAsCompleted('Application details');
+      setPage(2);
+      markPageAsCompleted(1);
     },
   });
 
@@ -55,7 +54,6 @@ const AppDetail = () => {
           e.preventDefault();
         }
       }}
-      className="py-3xl"
     >
       <div className="bodyMd text-text-soft">
         The application streamlines project management through intuitive task
@@ -82,14 +80,13 @@ const AppDetail = () => {
           onChange={handleChange('description')}
         />
       </div>
-      <div className="flex flex-row gap-xl justify-end items-center">
+      <div className="flex flex-row gap-xl items-center">
         <Button
           loading={isLoading}
           type="submit"
           content="Save & Continue"
           suffix={<ArrowRight />}
           variant="primary"
-          // onClick={next}
         />
       </div>
     </FadeIn>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
index 7bf68b801..502627173 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
@@ -33,7 +33,7 @@ const AppEnvironment = () => {
   ];
 
   return (
-    <FadeIn notForm className="py-3xl">
+    <FadeIn notForm>
       <div className="flex flex-col gap-xl ">
         <ExtendedFilledTab
           value={envPage}
@@ -55,13 +55,13 @@ const AppEnvironment = () => {
         </motion.div>
       </AnimatePresence>
 
-      <div className="flex flex-row gap-xl justify-end items-center">
+      <div className="flex flex-row gap-xl items-center">
         <Button
           content="Compute"
           prefix={<ArrowLeft />}
           variant="outline"
           onClick={() => {
-            setPage('Compute');
+            setPage(2);
           }}
         />
 
@@ -72,8 +72,8 @@ const AppEnvironment = () => {
           suffix={<ArrowRight />}
           variant="primary"
           onClick={() => {
-            setPage('Network');
-            markPageAsCompleted('Environment');
+            setPage(4);
+            markPageAsCompleted(3);
           }}
         />
       </div>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx
index 27d547c4f..ef0ad5eed 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx
@@ -234,21 +234,20 @@ export const ExposedPorts = () => {
 
 const AppNetwork = () => {
   const { setPage, markPageAsCompleted } = useAppState();
-  console.log('networkd');
   return (
-    <FadeIn className="py-3xl">
+    <FadeIn>
       <div className="bodyMd text-text-soft">
         Expose service ports that need to be exposed from container
       </div>
 
       <ExposedPorts />
-      <div className="flex flex-row gap-xl justify-end items-center">
+      <div className="flex flex-row gap-xl items-center">
         <Button
           content="Environments"
           prefix={<ArrowLeft />}
           variant="outline"
           onClick={() => {
-            setPage('Environment');
+            setPage(3);
           }}
         />
 
@@ -259,9 +258,9 @@ const AppNetwork = () => {
           suffix={<ArrowRight />}
           variant="primary"
           onClick={() => {
-            setPage('Review');
-            markPageAsCompleted('Network');
-            markPageAsCompleted('Review');
+            setPage(5);
+            markPageAsCompleted(4);
+            markPageAsCompleted(5);
           }}
         />
       </div>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index 9fca4b87e..be67e0a45 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -171,13 +171,13 @@ const AppReview = () => {
           })}
         </div>
       )}
-      <div className="flex flex-row gap-xl justify-end items-center">
+      <div className="flex flex-row gap-xl items-center">
         <Button
           content="Networks"
           prefix={<ArrowLeft />}
           variant="outline"
           onClick={() => {
-            setPage('Network');
+            setPage(4);
           }}
         />
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
index 40a42a72f..2bcf367d0 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
@@ -1,85 +1,61 @@
-import { useMapper } from '~/components/utils';
 import {
   AppContextProvider,
-  createAppTabs,
   useAppState,
 } from '~/console/page-components/app-states';
-import ProgressWrapper from '~/console/components/progress-wrapper';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import { useEffect } from 'react';
 import AppCompute from './app-compute';
 import AppDetail from './app-detail';
 import AppEnvironment from './app-environment';
 import AppNetwork from './app-network';
 import AppReview from './app-review';
-import { FadeIn } from '../../../../../../page-components/util';
 
 const AppComp = () => {
   const { setPage, page, isPageComplete } = useAppState();
-  const isActive = (t: createAppTabs) => t === page;
 
-  const progressItems: {
-    label: createAppTabs;
-  }[] = [
-    {
-      label: 'Application details',
-    },
-    {
-      label: 'Compute',
-    },
-    {
-      label: 'Environment',
-    },
-    {
-      label: 'Network',
-    },
-    {
-      label: 'Review',
-    },
-  ];
-
-  const tab = () => {
-    switch (page) {
-      case 'Application details':
-        return <AppDetail />;
-      case 'Compute':
-        return <AppCompute />;
-      case 'Environment':
-        return <AppEnvironment />;
-      case 'Network':
-        return <AppNetwork />;
-      case 'Review':
-        return <AppReview />;
-      default:
-        return (
-          <FadeIn>
-            <span>404 | page not found</span>
-          </FadeIn>
-        );
-    }
-  };
-
-  const items = useMapper(progressItems, (i) => {
-    return {
-      label: i.label,
-      active: isActive(i.label),
-      completed: isPageComplete(i.label),
-      children: isActive(i.label) ? tab() : null,
-    };
+  const { currentStep, jumpStep } = useMultiStepProgress({
+    defaultStep: page || 1,
+    totalSteps: 5,
   });
 
-  return (
-    <ProgressWrapper
-      onClick={(p) => {
-        console.log(p);
+  useEffect(() => {
+    jumpStep(page);
+  }, [page]);
 
-        if (isPageComplete(p.label as createAppTabs))
-          setPage(p.label as createAppTabs);
-      }}
+  return (
+    <MultiStepProgressWrapper
       title="Let’s create new application."
       subTitle="Create your application under project effortlessly."
-      progressItems={{
-        items,
+      backButton={{
+        content: 'Back to apps',
+        to: '../apps',
       }}
-    />
+    >
+      <MultiStepProgress.Root
+        currentStep={currentStep}
+        jumpStep={(step) => setPage(step)}
+        noJump={(step) => !isPageComplete(step)}
+      >
+        <MultiStepProgress.Step step={1} label="Application details">
+          <AppDetail />
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step step={2} label="Compute">
+          <AppCompute />
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step step={3} label="Environment">
+          <AppEnvironment />
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step step={4} label="Network">
+          <AppNetwork />
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step step={5} label="Review">
+          <AppReview />
+        </MultiStepProgress.Step>
+      </MultiStepProgress.Root>
+    </MultiStepProgressWrapper>
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx
index 0125b5ab6..515b96238 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx
@@ -10,17 +10,10 @@ import {
 import { Button } from '~/components/atoms/button';
 import Select from '~/components/atoms/select';
 import { NameIdView } from '~/console/components/name-id-view';
-import ProgressWrapper from '~/console/components/progress-wrapper';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
-import {
-  Dispatch,
-  FormEventHandler,
-  SetStateAction,
-  useEffect,
-  useState,
-} from 'react';
+import { FormEventHandler, useEffect, useState } from 'react';
 import { IMSvTemplate } from '~/console/server/gql/queries/managed-templates-queries';
 import { Switch } from '~/components/atoms/switch';
 import { NumberInput, TextInput } from '~/components/atoms/input';
@@ -37,6 +30,10 @@ import {
 } from '~/console/server/r-utils/common';
 import { IProjectMSvs } from '~/console/server/gql/queries/project-managed-services-queries';
 import { getManagedTemplate } from '~/console/utils/commons';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
 import { ReviewComponent } from '../new-app/app-review';
 import { IProjectContext } from '../../_layout';
 
@@ -57,11 +54,6 @@ export const loader = (ctx: IRemixCtx) => {
   return defer({ promise });
 };
 
-type steps = 'Select service' | 'Configure resource' | 'Review';
-
-const hasResource = (res: any) =>
-  (!!res && res?.resource?.fields.length > 0) || !res;
-
 const RenderField = ({
   field,
   value,
@@ -252,7 +244,7 @@ const TemplateView = ({
   isLoading,
 }: ITemplateView) => {
   return (
-    <form className="flex flex-col gap-3xl py-3xl" onSubmit={handleSubmit}>
+    <form className="flex flex-col gap-3xl" onSubmit={handleSubmit}>
       <div className="bodyMd text-text-soft">Create your managed services.</div>
 
       <Select
@@ -322,7 +314,7 @@ const FieldView = ({
 }) => {
   return (
     <form
-      className="flex flex-col gap-3xl py-3xl"
+      className="flex flex-col gap-3xl"
       onSubmit={(e) => {
         if (!values.isNameError) {
           handleSubmit(e);
@@ -379,14 +371,14 @@ const ReviewView = ({
   selectedResource,
   selectedService,
   isLoading,
-  setStep,
+  onEdit,
 }: {
   values: Record<string, any>;
   handleSubmit: FormEventHandler<HTMLFormElement>;
   selectedResource: ISelectedResource | null;
   selectedService: ISelectedService | null;
   isLoading?: boolean;
-  setStep: Dispatch<SetStateAction<steps>>;
+  onEdit: (step: number) => void;
 }) => {
   const renderFieldView = () => {
     const fields = Object.entries(values.res).filter(
@@ -397,7 +389,7 @@ const ReviewView = ({
         <ReviewComponent
           title="Fields"
           onEdit={() => {
-            setStep('Configure resource');
+            onEdit(2);
           }}
         >
           <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
@@ -424,12 +416,12 @@ const ReviewView = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-3xl py-3xl">
+    <form onSubmit={handleSubmit} className="flex flex-col gap-3xl">
       <div className="flex flex-col gap-xl">
         <ReviewComponent
           title="Basic detail"
           onEdit={() => {
-            setStep('Configure resource');
+            onEdit(2);
           }}
         >
           <div className="flex flex-col p-xl gap-lg rounded border border-border-default">
@@ -445,7 +437,7 @@ const ReviewView = ({
           <ReviewComponent
             title="Service detail"
             onEdit={() => {
-              setStep('Select service');
+              onEdit(1);
             }}
           >
             <div className="flex flex-col p-xl gap-lg rounded border border-border-default">
@@ -484,12 +476,16 @@ const ReviewView = ({
 
 const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
   const { msvtemplates } = useOutletContext<IProjectContext>();
-  const [activeState, setActiveState] = useState<steps>('Select service');
   const navigate = useNavigate();
   const api = useConsoleApi();
-  const isActive = (step: steps) => step === activeState;
 
   const { project, account, environment } = useParams();
+  const rootUrl = `/${account}/${project}/${environment}/managed-resources`;
+
+  const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
+    defaultStep: 1,
+    totalSteps: 3,
+  });
 
   const { values, errors, handleSubmit, handleChange, isLoading, setValues } =
     useForm({
@@ -503,10 +499,10 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
       },
       validationSchema: Yup.object({
         name: Yup.string().test('required', 'Name is required', (v) => {
-          return !(isActive('Configure resource') && !v);
+          return !(currentStep === 2 && !v);
         }),
         displayName: Yup.string().test('required', 'Name is required', (v) => {
-          return !(isActive('Configure resource') && !v);
+          return !(currentStep === 2 && !v);
         }),
         selectedService: Yup.object().required('Service is required'),
         selectedResource: Yup.object({}).required('Resource type is required'),
@@ -561,19 +557,19 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
             if (e) {
               throw e[0];
             }
-            navigate(`/${account}/${project}/${environment}/managed-resources`);
+            navigate(rootUrl);
           } catch (err) {
             handleError(err);
           }
         };
-        switch (activeState) {
-          case 'Select service':
-            setActiveState('Configure resource');
+        switch (currentStep) {
+          case 1:
+            nextStep();
             break;
-          case 'Configure resource':
-            setActiveState('Review');
+          case 2:
+            nextStep();
             break;
-          case 'Review':
+          case 3:
             await submit();
             break;
           default:
@@ -618,13 +614,17 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
     })
   );
 
-  const items = useMapper(
-    [
-      {
-        label: 'Select service',
-        active: isActive('Select service'),
-        completed: false,
-        children: isActive('Select service') ? (
+  return (
+    <MultiStepProgressWrapper
+      title="Let’s create new managed resource."
+      subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams"
+      backButton={{
+        content: 'Back to managed resources',
+        to: rootUrl,
+      }}
+    >
+      <MultiStepProgress.Root currentStep={currentStep} jumpStep={jumpStep}>
+        <MultiStepProgress.Step label="Select service" step={1}>
           <TemplateView
             isLoading={isLoading}
             services={services}
@@ -634,13 +634,8 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
             values={values}
             resources={resources}
           />
-        ) : null,
-      },
-      {
-        label: 'Configure resource',
-        active: isActive('Configure resource'),
-        completed: false,
-        children: isActive('Configure resource') ? (
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step label="Configure managed resource" step={2}>
           <FieldView
             selectedResource={values.selectedResource}
             values={values}
@@ -648,41 +643,19 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
             handleChange={handleChange}
             handleSubmit={handleSubmit}
           />
-        ) : null,
-      },
-      {
-        label: 'Review',
-        active: isActive('Review'),
-        completed: false,
-        children: isActive('Review') ? (
+        </MultiStepProgress.Step>
+        <MultiStepProgress.Step label="Review" step={3}>
           <ReviewView
-            setStep={setActiveState}
+            onEdit={jumpStep}
             values={values}
             handleSubmit={handleSubmit}
             selectedService={values.selectedService}
             selectedResource={values.selectedResource}
             isLoading={isLoading}
           />
-        ) : null,
-      },
-    ],
-    (val) => val
-  );
-
-  return (
-    <ProgressWrapper
-      title="Let’s create new managed resource."
-      subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams"
-      progressItems={{
-        items,
-      }}
-      onClick={({ label }) => {
-        if (label !== 'Review')
-          if (values.selectedResource) {
-            setActiveState(label as steps);
-          }
-      }}
-    />
+        </MultiStepProgress.Step>
+      </MultiStepProgress.Root>
+    </MultiStepProgressWrapper>
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx
index 6aa26716b..b8771aca2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx
@@ -19,8 +19,7 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { NameIdView } from '~/console/components/name-id-view';
 import Select from '~/components/atoms/select';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { IDomains } from '~/console/server/gql/queries/domain-queries';
-import { useMapper } from '~/components/utils';
+import { useAppend, useMapper } from '~/components/utils';
 
 type IDialog = IDialogBase<ExtractNodeType<IRouters>>;
 
@@ -31,7 +30,7 @@ const Root = (props: IDialog) => {
 
   const { project: projectName, environment: envName } = useParams();
   const [selectedDomains, setSelectedDomains] = useState<
-    { label: string; value: string; domain: ExtractNodeType<IDomains> }[]
+    { label: string; value: string }[]
   >([]);
 
   const {
@@ -46,17 +45,17 @@ const Root = (props: IDialog) => {
     useForm({
       initialValues: isUpdate
         ? {
-            name: parseName(props.data),
-            displayName: props.data.displayName,
-            domains: [],
-            isNameError: false,
-          }
+          name: parseName(props.data),
+          displayName: props.data.displayName,
+          domains: [],
+          isNameError: false,
+        }
         : {
-            name: '',
-            displayName: '',
-            domains: [],
-            isNameError: false,
-          },
+          name: '',
+          displayName: '',
+          domains: [],
+          isNameError: false,
+        },
       validationSchema: Yup.object({
         displayName: Yup.string().required(),
         name: Yup.string().required(),
@@ -129,15 +128,24 @@ const Root = (props: IDialog) => {
     });
 
   const domains = useMapper(parseNodes(data), (val) => ({
-    label: val.displayName,
+    label: val.domainName,
     value: val.domainName,
-    domain: val,
-    render: () => val.displayName,
   }));
 
+  const combinedDomains = useAppend(
+    domains,
+    isUpdate
+      ? props.data.spec.domains
+        .filter((d) => !domains.find((f) => f.value === d))
+        .map((d) => ({ label: d, value: d }))
+      : []
+  );
+
+  console.log(combinedDomains);
+
   useEffect(() => {
     if (isUpdate) {
-      const d = domains.filter((d) =>
+      const d = combinedDomains.filter((d) =>
         props.data.spec.domains.includes(d.value)
       );
       setSelectedDomains(d);
@@ -179,7 +187,7 @@ const Root = (props: IDialog) => {
           label="Domains"
           multiple
           value={selectedDomains}
-          options={async () => [...domains]}
+          options={async () => [...combinedDomains]}
           onChange={(val) => {
             setSelectedDomains(val);
             handleChange('domains')(dummyEvent([...val.map((v) => v.value)]));
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
index c9f03804a..d15abeeef 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
@@ -1,6 +1,6 @@
 import { Trash, PencilLine } from '@jengaicons/react';
 import { useState } from 'react';
-import { generateKey } from '~/components/utils';
+import { generateKey, titleCase } from '~/components/utils';
 import {
   ListItem,
   ListTitle,
@@ -12,18 +12,19 @@ import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
 import {
   ExtractNodeType,
   parseName,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { Link, useParams } from '@remix-run/react';
 import { listStatus } from '~/console/components/sync-status';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { toast } from '~/components/molecule/toast';
 import HandleRouter from './handle-router';
 
 const RESOURCE_NAME = 'domain';
@@ -170,6 +171,7 @@ const RouterResources = ({ items = [] }: { items: BaseType[] }) => {
   const [visible, setVisible] = useState<BaseType | null>(null);
   const api = useConsoleApi();
   const reloadPage = useReload();
+  const { environment, project } = useParams();
 
   const props: IResource = {
     items,
@@ -197,16 +199,21 @@ const RouterResources = ({ items = [] }: { items: BaseType[] }) => {
         show={showDeleteDialog}
         setShow={setShowDeleteDialog}
         onSubmit={async () => {
+          if (!environment || !project) {
+            throw new Error('Project and Environment is required!.');
+          }
           try {
-            // const { errors } = await api.deleteDomain({
-            //   domainName: showDeleteDialog!.domainName,
-            // });
+            const { errors } = await api.deleteRouter({
+              envName: environment,
+              projectName: project,
+              routerName: parseName(showDeleteDialog),
+            });
 
-            // if (errors) {
-            //   throw errors[0];
-            // }
-            // reloadPage();
-            // toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);
+            if (errors) {
+              throw errors[0];
+            }
+            reloadPage();
+            toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);
             setShowDeleteDialog(null);
           } catch (err) {
             handleError(err);
diff --git a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
index eb39fa22d..00211445a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
@@ -359,7 +359,7 @@ const ReviewView = ({
     return null;
   };
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-3xl py-3xl">
+    <form onSubmit={handleSubmit} className="flex flex-col gap-3xl">
       <div className="flex flex-col gap-xl">
         <ReviewComponent
           title="Basic detail"
@@ -445,11 +445,13 @@ const ManagedServiceLayout = () => {
   const api = useConsoleApi();
 
   const { project, account } = useParams();
+  const rootUrl = `/${account}/${project}/managed-services`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: 1,
     totalSteps: 3,
   });
+
   const { values, errors, handleSubmit, handleChange, isLoading, setValues } =
     useForm({
       initialValues: {
@@ -537,7 +539,7 @@ const ManagedServiceLayout = () => {
             if (e) {
               throw e[0];
             }
-            navigate(`/${account}/${project}/managed-services`);
+            navigate(rootUrl);
           } catch (err) {
             handleError(err);
           }
@@ -580,6 +582,10 @@ const ManagedServiceLayout = () => {
     <MultiStepProgressWrapper
       title="Let’s create new managed service."
       subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams"
+      backButton={{
+        content: 'Back to managed services',
+        to: rootUrl,
+      }}
     >
       <MultiStepProgress.Root currentStep={currentStep} jumpStep={jumpStep}>
         <MultiStepProgress.Step label="Select template" step={1}>
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
index 245f92abf..cc7a02337 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
-import * as Chips from '~/components/atoms/chips';
 import { TextArea, TextInput } from '~/components/atoms/input';
 import Popup from '~/components/molecule/popup';
-import { IdSelector } from '~/console/components/id-selector';
 import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IHelmCharts } from '~/console/server/gql/queries/helm-chart-queries';
@@ -64,12 +62,15 @@ const Root = (props: IDialog) => {
   const api = useConsoleApi();
   const reloadPage = useReload();
   const { cluster } = useParams();
+
   const [hemlCharts, setHelmCharts] = useState<
     Array<{ label: string; value: string; item: IHelmDoc['entries']['key'] }>
   >([]);
+
   const [chartVersions, setChartVersions] = useState<
     IHelmDoc['entries']['key']
   >([]);
+
   const [helmChartsLoading, setHelmChartsLoading] = useState(false);
   const [repoSearchText, setRepoSearchText] = useState('');
   const [repos, setRepos] = useState<
@@ -80,6 +81,7 @@ const Root = (props: IDialog) => {
       render: () => ReactNode;
     }[]
   >([]);
+
   const [reposLoading, setReposLoading] = useState(false);
   const [chartName, setChartName] = useState<
     { label: string; value: string } | undefined
@@ -182,7 +184,7 @@ const Root = (props: IDialog) => {
               };
             }) => ({
               label: hc.name,
-              value: hc.package_id,
+              value: hc.repository.url,
               repoUrl: hc.repository.url,
               render: () => (
                 <div className="flex flex-row gap-xl items-center">
@@ -463,7 +465,7 @@ const Root = (props: IDialog) => {
                   } else {
                     handleChange('chartRepoURL')(dummyEvent(value.value));
                   }
-
+                  console.log(value.repoUrl, values.chartRepoURL);
                   setHelmCharts([]);
                 }}
                 onSearch={(text) => {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/handle-nodepool.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/handle-nodepool.tsx
index 7e72442db..efcace3d5 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/handle-nodepool.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/handle-nodepool.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react/destructuring-assignment */
 import { useMemo } from 'react';
 import { toast } from 'react-toastify';
-import { NumberInput, TextInput } from '~/components/atoms/input';
+import { NumberInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
 import Popup from '~/components/molecule/popup';
-import { IdSelector } from '~/console/components/id-selector';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { ExtractNodeType, parseName } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
@@ -14,7 +13,6 @@ import { handleError } from '~/root/lib/utils/common';
 import { Github__Com___Kloudlite___Operator___Apis___Clusters___V1__AwsPoolType as awsPoolType } from '~/root/src/generated/gql/server';
 import { useOutletContext } from '@remix-run/react';
 import { INodepools } from '~/console/server/gql/queries/nodepool-queries';
-import Chips from '~/components/atoms/chips';
 import { awsRegions } from '~/console/dummy/consts';
 import { mapper } from '~/components/utils';
 import { IDialogBase } from '~/console/components/types.d';
@@ -99,21 +97,27 @@ const Root = (props: IDialog) => {
                 };
               case 'spot':
                 const plan = findNodePlan(val.instanceType);
-                return {
-                  spotPool: {
-                    cpuNode: {
-                      vcpu: {
-                        max: `${plan?.spotSpec.cpuMax}`,
-                        min: `${plan?.spotSpec.cpuMin}`,
+                return val.nvidiaGpuEnabled
+                  ? {
+                      gpuNode: {
+                        instanceTypes: [plan?.value],
                       },
-                      memoryPerVcpu: {
-                        max: `${plan?.spotSpec.memMax}`,
-                        min: `${plan?.spotSpec.memMin}`,
+                    }
+                  : {
+                      spotPool: {
+                        cpuNode: {
+                          vcpu: {
+                            max: `${plan?.spotSpec.cpuMax}`,
+                            min: `${plan?.spotSpec.cpuMin}`,
+                          },
+                          memoryPerVcpu: {
+                            max: `${plan?.spotSpec.memMax}`,
+                            min: `${plan?.spotSpec.memMin}`,
+                          },
+                        },
+                        nodes: {},
                       },
-                    },
-                    nodes: {},
-                  },
-                };
+                    };
               default:
                 return {};
             }
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
index 8104d51a9..319925dec 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -1,4 +1,4 @@
-import { PencilLine, Trash, Cpu, CircleFill } from '@jengaicons/react';
+import { PencilLine, Trash, Cpu } from '@jengaicons/react';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -16,7 +16,7 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import Popup from '~/components/molecule/popup';
 import { HighlightJsLogs } from 'react-highlightjs-logs';
 import { yamlDump } from '~/console/components/diff-viewer';
@@ -25,11 +25,20 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { Link } from '@remix-run/react';
+import { Link, useOutletContext } from '@remix-run/react';
 import { IStatus, listRender } from '~/console/components/commons';
 import { listStatus } from '~/console/components/sync-status';
+import AnimateHide from '~/components/atoms/animate-hide';
+import { ISetState } from '~/console/page-components/app-states';
+import { Button } from '~/components/atoms/button';
+import { dayjs } from '~/components/molecule/dayjs';
 import HandleNodePool from './handle-nodepool';
-import { findNodePlanWithCategory } from './nodepool-utils';
+import {
+  findNodePlanWithCategory,
+  findNodePlanWithSpec,
+} from './nodepool-utils';
+import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'nodepool';
 type BaseType = ExtractNodeType<INodepools>;
@@ -99,14 +108,20 @@ const NodePoolAvatar = ({ title }: { title: string }) => {
 };
 
 const ListDetail = (
-  props: Omit<IResource, 'items'> & { open: boolean; item: BaseType }
+  props: Omit<IResource, 'items'> & {
+    open: string;
+    item: BaseType;
+    setOpen: ISetState<string>;
+  }
 ) => {
-  const { item, open, onDelete, onEdit } = props;
+  const { item, onDelete, onEdit, open, setOpen } = props;
   const { name, id } = parseItem(item);
   const { minCount, maxCount, cloudProvider, aws } = item.spec;
   const keyPrefix = `${RESOURCE_NAME}-${id}`;
   const lR = listRender({ keyPrefix, resource: item });
 
+  const { account } = useOutletContext<IAccountContext>();
+
   const parseSize = () => {
     if (minCount === maxCount) {
       return (
@@ -126,9 +141,34 @@ const ListDetail = (
     const iconSize = 14;
     switch (cloudProvider) {
       case 'aws':
-        const nodePlan = findNodePlanWithCategory(
+        let nodePlan = findNodePlanWithCategory(
           aws?.ec2Pool?.instanceType || ''
         );
+
+        if (aws?.poolType === 'spot') {
+          nodePlan = findNodePlanWithSpec({
+            spot: true,
+            spec: {
+              cpu: aws.spotPool?.cpuNode?.vcpu.min,
+              memory: aws.spotPool?.cpuNode?.memoryPerVcpu?.min,
+            },
+          });
+          <div className="flex flex-col gap-sm">
+            <div className="bodySm text-text-soft pulsable">
+              {nodePlan?.category} - {nodePlan?.labelDetail.size}
+            </div>
+            <div className="flex flex-row gap-lg bodyMd-medium pulsable">
+              <span className="flex flex-row gap-md items-center">
+                <Cpu size={iconSize} /> <span>{nodePlan?.labelDetail.cpu}</span>
+              </span>
+              <span className="flex flex-row gap-md items-center">
+                <Cpu size={iconSize} />{' '}
+                <span>{nodePlan?.labelDetail.memory}</span>
+              </span>
+            </div>
+          </div>;
+        }
+
         return (
           <div className="flex flex-col gap-sm">
             <div className="bodySm text-text-soft pulsable">
@@ -164,6 +204,8 @@ const ListDetail = (
     className: 'basis-full text-center',
   });
 
+  const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
+
   return (
     <div className="w-full flex flex-col">
       <div className="flex flex-row items-center">
@@ -173,13 +215,30 @@ const ListDetail = (
             subtitle={
               <div className="flex flex-row items-center gap-md">
                 {id}
-                {/*<CircleFill size={7} />*/}
-                {/*<span>Running {targetCount} nodes</span>*/}
+                {/* <CircleFill size={7} /> */}
+                {/* <span>Running {targetCount} nodes</span> */}
               </div>
             }
             avatar={<NodePoolAvatar title={id} />}
           />
         </div>
+
+        {isLatest && (
+          <Button
+            size="sm"
+            variant="basic"
+            content={open === item.id ? 'Hide Logs' : 'Show Logs'}
+            onClick={() =>
+              setOpen((s) => {
+                if (s === item.id) {
+                  return '';
+                }
+                return item.id;
+              })
+            }
+          />
+        )}
+
         <div className="flex items-center w-[20px] mx-xl flex-grow">
           {tempStatus.render()}
         </div>
@@ -191,33 +250,41 @@ const ListDetail = (
           <ListItem data={parseProviderInfo()} />
         </div>
 
-        {/* <div className="flex flex-row gap-2xl items-center pl-3xl pr-xl mr-3xl border-border-disabled border-r w-[160px] min-w-[160px]">
-          <div className="flex flex-col gap-sm">
-            <span className="bodySm text-text-soft pulsable">Expected</span>
-            <span className="bodyMd-medium pulsable">
-              {targetCount} node
-              {targetCount > 1 && 's'}
-            </span>
-          </div>
-          <div className="flex flex-col gap-sm">
-            <span className="bodySm text-text-soft pulsable">Current</span>
-            <span className="bodyMd-medium pulsable">
-              {targetCount} node
-              {targetCount > 1 && 's'}
-            </span>
-          </div>
-        </div> */}
         <div className="pr-3xl w-[180px] min-w-[180px]">
           {lR.authorRender({ className: '' }).render()}
         </div>
+
         <ExtraButton
           onDelete={() => onDelete(item)}
           onEdit={() => onEdit(item)}
+          // onLogsToggle={() => {
+          //   setOpen((s) => {
+          //     if (s === item.id) {
+          //       return '';
+          //     }
+          //     return item.id;
+          //   });
+          // }}
           status={statusRender.status}
         />
       </div>
 
-      {/* <AnimateHide show={open}>hello</AnimateHide> */}
+      <AnimateHide show={open === item.id} className="w-full pt-4xl">
+        <LogComp
+          {...{
+            dark: true,
+            width: '100%',
+            height: '40rem',
+            title: 'Logs',
+            hideLineNumber: true,
+            websocket: {
+              account: parseName(account),
+              cluster: item.clusterName,
+              trackingId: item.id,
+            },
+          }}
+        />
+      </AnimateHide>
     </div>
   );
 };
@@ -295,7 +362,7 @@ const GridView = ({ items, onDelete, onEdit }: IResource) => {
 };
 
 const ListView = ({ items, onDelete, onEdit }: IResource) => {
-  const [open, setOpen] = useState<string | null>(null);
+  const [open, setOpen] = useState<string>('');
   return (
     <List.Root>
       {items.map((item, index) => {
@@ -306,32 +373,6 @@ const ListView = ({ items, onDelete, onEdit }: IResource) => {
           <List.Row
             key={id}
             className="!p-3xl"
-            onClick={() => setOpen((prev) => (prev === id ? null : id))}
-            // columns={[
-            //   {
-            //     key: generateKey(keyPrefix, name + id),
-            //     className: 'flex-1',
-            //     render: () => (
-            //       <ListTitle
-            //         title={name}
-            //         subtitle={id}
-            //         avatar={<NodePoolAvatar title={name} />}
-            //       />
-            //     ),
-            //   },
-            //   lR.statusRender({ className: 'w-[180px]' }),
-            //   lR.authorRender({ className: 'w-[180px]' }),
-            //   {
-            //     key: generateKey(keyPrefix, 'action'),
-            //     render: () => (
-            //       <ExtraButton
-            //         onDelete={() => onDelete(item)}
-            //         onEdit={() => onEdit(item)}
-            //         onShowResourceYaml={() => onShowResourceYaml(item)}
-            //       />
-            //     ),
-            //   },
-            // ]}
             columns={[
               {
                 className: 'w-full',
@@ -339,7 +380,8 @@ const ListView = ({ items, onDelete, onEdit }: IResource) => {
                 render: () => (
                   <ListDetail
                     item={item}
-                    open={open === id}
+                    open={open}
+                    setOpen={setOpen}
                     onDelete={() => onDelete(item)}
                     onEdit={() => onEdit(item)}
                   />
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-utils.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-utils.tsx
index bb07efbf7..29332cc6c 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-utils.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-utils.tsx
@@ -1,3 +1,5 @@
+import { parseValue } from '~/console/page-components/util';
+
 const { nodePlans, provisionTypes, taintsData } = {
   nodePlans: [
     {
@@ -8,14 +10,14 @@ const { nodePlans, provisionTypes, taintsData } = {
           labelDetail: {
             size: 'small',
             cpu: '2VCPU',
-            memory: '3.75GB',
+            memory: '4GB',
           },
           value: 'c6a.large',
           spotSpec: {
-            cpuMax: 4,
-            cpuMin: 4,
-            memMax: 8192,
-            memMin: 8192,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 2,
+            memMin: 2,
             disabled: false,
           },
           gpuEnabled: false,
@@ -25,14 +27,14 @@ const { nodePlans, provisionTypes, taintsData } = {
           labelDetail: {
             size: 'medium',
             cpu: '4VCPU',
-            memory: '7.5GB',
+            memory: '8GB',
           },
           value: 'c6a.xlarge',
           spotSpec: {
-            cpuMax: 8,
-            cpuMin: 8,
-            memMax: 16384,
-            memMin: 16384,
+            cpuMax: 4,
+            cpuMin: 4,
+            memMax: 2,
+            memMin: 2,
             disabled: false,
           },
         },
@@ -41,14 +43,14 @@ const { nodePlans, provisionTypes, taintsData } = {
           labelDetail: {
             size: 'large',
             cpu: '8VCPU',
-            memory: '15GB',
+            memory: '16GB',
           },
           value: 'c6a.2xlarge',
           spotSpec: {
-            cpuMax: 16,
-            cpuMin: 16,
-            memMax: 32768,
-            memMin: 32768,
+            cpuMax: 8,
+            cpuMin: 8,
+            memMax: 2,
+            memMin: 2,
             disabled: false,
           },
         },
@@ -57,14 +59,14 @@ const { nodePlans, provisionTypes, taintsData } = {
           labelDetail: {
             size: 'xlarge',
             cpu: '16VCPU',
-            memory: '30GB',
+            memory: '32GB',
           },
           value: 'c6a.4xlarge',
           spotSpec: {
-            cpuMax: 32,
-            cpuMin: 32,
-            memMax: 65536,
-            memMin: 65536,
+            cpuMax: 16,
+            cpuMin: 16,
+            memMax: 2,
+            memMin: 2,
             disabled: false,
           },
         },
@@ -78,14 +80,14 @@ const { nodePlans, provisionTypes, taintsData } = {
           labelDetail: {
             size: 'small',
             cpu: '2VCPU',
-            memory: '4GB',
+            memory: '2GB',
           },
           value: 't4g.small',
           spotSpec: {
-            cpuMax: 4,
-            cpuMin: 4,
-            memMax: 8192,
-            memMin: 8192,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 1,
+            memMin: 1,
             disabled: false,
           },
         },
@@ -93,15 +95,15 @@ const { nodePlans, provisionTypes, taintsData } = {
           label: '2x - medium - 4VCPU 8GB Memory',
           labelDetail: {
             size: 'medium',
-            cpu: '4VCPU',
-            memory: '8GB',
+            cpu: '2VCPU',
+            memory: '4GB',
           },
           value: 't4g.medium',
           spotSpec: {
-            cpuMax: 8,
-            cpuMin: 8,
-            memMax: 16384,
-            memMin: 16384,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 2,
+            memMin: 2,
             disabled: false,
           },
         },
@@ -109,15 +111,15 @@ const { nodePlans, provisionTypes, taintsData } = {
           label: '4x - large - 8VCPU 16GB Memory',
           labelDetail: {
             size: 'large',
-            cpu: '8VCPU',
-            memory: '16GB',
+            cpu: '2VCPU',
+            memory: '8GB',
           },
           value: 't4g.large',
           spotSpec: {
-            cpuMax: 16,
-            cpuMin: 16,
-            memMax: 32768,
-            memMin: 32768,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 4,
+            memMin: 2,
             disabled: false,
           },
         },
@@ -125,15 +127,15 @@ const { nodePlans, provisionTypes, taintsData } = {
           label: '8x - xlarge - 16VCPU 32GB Memory',
           labelDetail: {
             size: 'xlarge',
-            cpu: '16VCPU',
-            memory: '32GB',
+            cpu: '4VCPU',
+            memory: '16GB',
           },
           value: 't4g.xlarge',
           spotSpec: {
-            cpuMax: 32,
-            cpuMin: 32,
-            memMax: 65536,
-            memMin: 65536,
+            cpuMax: 4,
+            cpuMin: 4,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
         },
@@ -143,69 +145,69 @@ const { nodePlans, provisionTypes, taintsData } = {
       label: 'GPU Optimised',
       options: [
         {
-          label: '1x - small - 2VCPU 8GB Memory',
+          label: '1x - small - (1 GPU 24GB) (4VCPU 16GB)',
           labelDetail: {
             size: 'small',
             cpu: '2VCPU',
             memory: '8GB',
           },
-          value: 'g4dn.xlarge',
+          value: 'g5.xlarge',
           spotSpec: {
-            cpuMax: 4,
-            cpuMin: 4,
-            memMax: 16384,
-            memMin: 16384,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
           gpuEnabled: true,
         },
         {
-          label: '2x - medium - 4VCPU 16GB Memory',
+          label: '2x - medium - (1 GPU 24GB) (8VCPU 32GB)',
           labelDetail: {
             size: 'medium',
             cpu: '4VCPU',
             memory: '16GB',
           },
-          value: 'g4dn.2xlarge',
+          value: 'g5.2xlarge',
           spotSpec: {
-            cpuMax: 8,
-            cpuMin: 8,
-            memMax: 32768,
-            memMin: 32768,
+            cpuMax: 4,
+            cpuMin: 4,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
           gpuEnabled: true,
         },
         {
-          label: '4x - large - 8VCPU 32GB Memory',
+          label: '4x - large - (1 GPU 24GB) (16VCPU 64GB)',
           labelDetail: {
             size: 'large',
             cpu: '8VCPU',
             memory: '32GB',
           },
-          value: 'g4dn.4xlarge',
+          value: 'g5.4xlarge',
           spotSpec: {
-            cpuMax: 16,
-            cpuMin: 16,
-            memMax: 65536,
-            memMin: 65536,
+            cpuMax: 8,
+            cpuMin: 8,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
           gpuEnabled: true,
         },
         {
-          label: '8x - xlarge - 16VCPU 64GB Memory',
+          label: '8x - xlarge - (1 GPU 24GB) (32VCPU 128GB)',
           labelDetail: {
             size: 'xlarge',
             cpu: '16VCPU',
             memory: '64GB',
           },
-          value: 'g4dn.8xlarge',
+          value: 'g5.8xlarge',
           spotSpec: {
-            cpuMax: 32,
-            cpuMin: 32,
-            memMax: 131072,
-            memMin: 131072,
+            cpuMax: 16,
+            cpuMin: 16,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
           gpuEnabled: true,
@@ -224,10 +226,10 @@ const { nodePlans, provisionTypes, taintsData } = {
           },
           value: 'm6a.large',
           spotSpec: {
-            cpuMax: 4,
-            cpuMin: 4,
-            memMax: 16384,
-            memMin: 16384,
+            cpuMax: 2,
+            cpuMin: 2,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
         },
@@ -240,10 +242,10 @@ const { nodePlans, provisionTypes, taintsData } = {
           },
           value: 'm6a.xlarge',
           spotSpec: {
-            cpuMax: 8,
-            cpuMin: 8,
-            memMax: 32768,
-            memMin: 32768,
+            cpuMax: 4,
+            cpuMin: 4,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
         },
@@ -256,10 +258,10 @@ const { nodePlans, provisionTypes, taintsData } = {
           },
           value: 'm6a.2xlarge',
           spotSpec: {
-            cpuMax: 16,
-            cpuMin: 16,
-            memMax: 65536,
-            memMin: 65536,
+            cpuMax: 8,
+            cpuMin: 8,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
         },
@@ -272,10 +274,10 @@ const { nodePlans, provisionTypes, taintsData } = {
           },
           value: 'm6a.4xlarge',
           spotSpec: {
-            cpuMax: 32,
-            cpuMin: 32,
-            memMax: 131072,
-            memMin: 131072,
+            cpuMax: 16,
+            cpuMin: 16,
+            memMax: 4,
+            memMin: 4,
             disabled: false,
           },
         },
@@ -303,6 +305,45 @@ const findNodePlan = (id: string) => {
     .find((np) => np.value === id);
 };
 
+export const findNodePlanWithSpec = ({
+  spot,
+  spec,
+}: {
+  spot?: boolean;
+  spec?: {
+    cpu?: string;
+    memory?: string;
+  };
+}):
+  | ((typeof nodePlans)[number]['options'][number] & { category: string })
+  | null => {
+  if (!spec) {
+    return null;
+  }
+
+  let nodePlan = null;
+
+  nodePlans.forEach((np) => {
+    np.options.forEach((npp) => {
+      if (
+        (spot && npp.spotSpec) ||
+        (!spot && !npp.spotSpec) ||
+        (spot && !npp.spotSpec)
+      ) {
+        if (
+          npp.spotSpec &&
+          npp.spotSpec.cpuMax === parseValue(spec.cpu, 0) &&
+          npp.spotSpec.memMax === parseValue(spec.memory, 0)
+        ) {
+          nodePlan = { ...npp, category: np.label };
+        }
+      }
+    });
+  });
+
+  return nodePlan;
+};
+
 const findNodePlanWithCategory = (
   id: string
 ):
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
index a81aca391..a7ed28151 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
@@ -1,6 +1,6 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
-import { Link, useLoaderData, useOutletContext } from '@remix-run/react';
+import { Link, useLoaderData } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
@@ -11,7 +11,6 @@ import {
   ensureClusterSet,
 } from '~/console/server/utils/auth-utils';
 import { IRemixCtx } from '~/root/lib/types/common';
-import fake from '~/root/fake-data-generator/fake';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import HandleNodePool from './handle-nodepool';
 import Tools from './tools';
@@ -60,8 +59,6 @@ const Nodepools = () => {
           }
           const { pageInfo, totalCount } = nodePoolData;
 
-          console.log('nodepools...', nodepools, nodePoolData);
-
           return (
             <Wrapper
               header={{
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
index 6dff890a6..5ddcfce4c 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
@@ -16,12 +16,12 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import LogComp from '~/console/components/logger';
 import { renderCloudProvider } from '~/console/utils/commons';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { DetailItem } from '~/console/components/commons';
 import { INodepool } from '~/console/server/gql/queries/nodepool-queries';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const ClusterTabs = () => {
   const { account, cluster } = useParams();
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/_layout.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/_layout.tsx
index db675c12d..45554775f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/_layout.tsx
@@ -11,8 +11,7 @@ const ClusterOverview = () => {
     <SidebarLayout
       navItems={[
         { label: 'Info', value: 'info' },
-        // { label: 'Logs', value: 'logs' },
-        { label: 'Metrics', value: 'metrics' },
+        { label: 'Logs & Metrics', value: 'logs-n-metrics' },
       ]}
       headerTitle=""
       parentPath="/overview"
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/info/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/info/route.tsx
index aa9d62d7d..f66e5b9d7 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/info/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/info/route.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import { Link, useOutletContext } from '@remix-run/react';
+import { useOutletContext } from '@remix-run/react';
 import { Box } from '~/console/components/common-console-components';
 import { parseName } from '~/console/server/r-utils/common';
 import { DownloadSimple } from '@jengaicons/react';
@@ -73,7 +73,7 @@ const KubeConfigDownload = ({ cluster }: { cluster: string }) => {
 };
 
 const ClusterInfo = () => {
-  const { cluster, account } = useOutletContext<IClusterContext>();
+  const { cluster } = useOutletContext<IClusterContext>();
   const providerInfo = () => {
     const provider = cluster.spec?.cloudProvider;
     switch (provider) {
@@ -176,31 +176,31 @@ const ClusterInfo = () => {
           </span>
           <span className="bodyMd">
             Log into your account and start accessing your cluster config using
-            <code className="mx-md">kl cluster</code>command as shown below.
+            <code className="mx-md">kli</code>command as shown below.
           </span>
         </div>
-        <DetailItem
-          title="Kubectl"
-          value={
-            <CodeView
-              copy
-              data={`kl cluter --cluster=${parseName(
-                cluster
-              )} --account=${parseName(account)} -- kubectl ...`}
-            />
-          }
+
+        <CodeView
+          title="Download kli CLI to manage your infrastructure"
+          copy
+          data="curl 'https://kl.kloudlite.io/kloudlite/kl!?source=kli' | bash"
         />
-        <DetailItem
-          title="Helm"
-          value={
-            <CodeView
-              copy
-              data={`kl exec --cluster-name=${parseName(
-                cluster
-              )} --account-name=${parseName(account)} -- helm ...`}
-            />
-          }
+
+        <CodeView
+          title="Login to your account and select cluster"
+          copy
+          data="kli auth login
+kli use account
+kli use cluster
+kli status"
+        />
+
+        <CodeView
+          title="Access cluster using kubectl"
+          copy
+          data="kli -- kubectl get nodes"
         />
+        <CodeView title="Helm" copy data="kli -- helm ..." />
       </Box>
     </>
   );
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
new file mode 100644
index 000000000..6f4b3e22c
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -0,0 +1,287 @@
+import { useOutletContext } from '@remix-run/react';
+import Chart from '~/console/components/charts/charts-client';
+import { useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
+import { ApexOptions } from 'apexcharts';
+import { parseName } from '~/console/server/r-utils/common';
+import { Clock, ListNumbers } from '@jengaicons/react';
+import { cn } from '~/components/utils';
+import { useDataState } from '~/console/page-components/common-state';
+import { IClusterContext } from '../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
+
+const LogsAndMetrics = () => {
+  const { cluster, account } = useOutletContext<IClusterContext>();
+  const [cpuData, _setCpuData] = useState<number[]>([]);
+  const [memoryData, _setMemoryData] = useState<number[]>([]);
+
+  const xAxisFormatter = (_: string, __?: number) => {
+    // return dayjs((val || 0) * 1000).format('hh:mm A');
+    return '';
+  };
+
+  const tooltipXAixsFormatter = (val: number) =>
+    dayjs(val * 1000).format('DD/MM/YY hh:mm A');
+
+  // useDebounce(
+  //   () => {
+  //     (async () => {
+  //       try {
+  //         const resp = await axios({
+  //           url: `https://observe.dev.kloudlite.io/observability/metrics/cpu?cluster_name=${parseName(
+  //             cluster
+  //           )}&tracking_id=${cluster.id}`,
+  //           method: 'GET',
+  //           withCredentials: true,
+  //         });
+  //
+  //         setCpuData(resp?.data?.data?.result[0]?.values || []);
+  //       } catch (err) {
+  //         console.error(err);
+  //       }
+  //     })();
+  //     (async () => {
+  //       try {
+  //         const resp = await axios({
+  //           url: `https://observe.dev.kloudlite.io/observability/metrics/memory?cluster_name=${parseName(
+  //             cluster
+  //           )}&tracking_id=${cluster.id}`,
+  //           method: 'GET',
+  //           withCredentials: true,
+  //         });
+  //
+  //         setMemoryData(resp?.data?.data?.result[0]?.values || []);
+  //       } catch (err) {
+  //         console.error(err);
+  //       }
+  //     })();
+  //   },
+  //   1000,
+  //   []
+  // );
+
+  const chartOptions: ApexOptions = {
+    chart: {
+      type: 'area',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      redrawOnWindowResize: true,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'smooth',
+    },
+
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        show: false,
+        formatter: xAxisFormatter,
+      },
+    },
+  };
+
+  const { state, setState } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
+  return (
+    <div className="flex flex-col gap-6xl pt-6xl">
+      <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-4">
+        <Chart
+          disabled
+          title="CPU Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'CPU',
+                data: cpuData,
+              },
+            ],
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} m`;
+                },
+              },
+            },
+            yaxis: {
+              min: 0,
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} m`,
+              },
+            },
+          }}
+        />
+
+        <Chart
+          disabled
+          title="Memory Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'Memory',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+
+        <Chart
+          disabled
+          title="Network IO"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'DiskIO',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+
+        <Chart
+          disabled
+          title="Disk IO"
+          options={{
+            ...chartOptions,
+            series: [
+              {
+                color: '#1D4ED8',
+                name: 'DiskIO',
+                data: memoryData,
+              },
+            ],
+            yaxis: {
+              min: 0,
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+      </div>
+
+      <div className="flex-1">
+        <LogComp
+          {...{
+            hideLineNumber: !state.linesVisible,
+            hideTimestamp: !state.timestampVisible,
+            dark: true,
+            width: '100%',
+            height: '70vh',
+            title: 'Logs',
+            actionComponent: (
+              <div className="hljs flex items-center gap-xl px-xs">
+                <div
+                  onClick={() => {
+                    setState((s) => ({ ...s, linesVisible: !s.linesVisible }));
+                  }}
+                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+                >
+                  <span
+                    className={cn({
+                      'opacity-50': !state.linesVisible,
+                    })}
+                  >
+                    <ListNumbers color="currentColor" size={16} />
+                  </span>
+                </div>
+                <div
+                  onClick={() => {
+                    setState((s) => ({
+                      ...s,
+                      timestampVisible: !s.timestampVisible,
+                    }));
+                  }}
+                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+                >
+                  <span
+                    className={cn({
+                      'opacity-50': !state.timestampVisible,
+                    })}
+                  >
+                    <Clock color="currentColor" size={16} />
+                  </span>
+                </div>
+              </div>
+            ),
+            websocket: {
+              account: parseName(account),
+              cluster: parseName(cluster),
+              trackingId: cluster.id,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LogsAndMetrics;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs/route.tsx
deleted file mode 100644
index 777dac184..000000000
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs/route.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Suspense } from 'react';
-import { Box } from '~/console/components/common-console-components';
-import LogComp from '~/console/components/logger';
-
-const Log = () => {
-  const getTime = () => {
-    return Math.floor(new Date().getTime() / 1000);
-  };
-
-  const selectOptions = [
-    {
-      label: 'Last 12 hours',
-      value: '1',
-      from: () => getTime() - 43200,
-    },
-    {
-      label: 'Last 24 hours',
-      value: '2',
-      from: () => getTime() - 86400,
-    },
-    {
-      label: 'Last 7 days',
-      value: '3',
-      from: () => getTime() - 604800,
-    },
-    {
-      label: 'Last 30 days',
-      value: '3',
-      from: () => getTime() - 2592000,
-    },
-  ];
-
-  // const [from, setFrom] = useState(selectOptions[1].from());
-  // const [selected, setSelected] = useState('1');
-
-  const getUrl = (f: number) => {
-    return `wss://observability.dev.kloudlite.io/observability/logs/cluster-job?start_time=${f}&end_time=${getTime()}`;
-  };
-
-  // const [url, setUrl] = useState(getUrl(from));
-
-  return (
-    <Box title="Cluster Logs">
-      <div className=" hljs rounded">
-        <LogComp
-          // actionComponent={
-          //   <Select
-          //     size="md"
-          //     options={async () => selectOptions}
-          //     value={selectOptions[parseValue(selected, 1)]}
-          //     onChange={(e) => {
-          //       setSelected(e.value);
-          //     }}
-          //   />
-          // }
-          // title={
-          //   <div className="flex flex-col gap-lg">
-          //     <div className="">Cluster logs</div>
-          //   </div>
-          // }
-          dark
-          websocket={{
-            account: '',
-            trackingId: '',
-            cluster: '',
-          }}
-          height="60vh"
-          width="100%"
-          url={getUrl(selectOptions[3].from())}
-          selectableLines
-        />
-      </div>
-    </Box>
-  );
-};
-
-const ClusterLogs = () => {
-  return (
-    <div>
-      <Suspense>
-        <Log />
-      </Suspense>
-    </div>
-  );
-};
-
-export default ClusterLogs;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/metrics/route.tsx
deleted file mode 100644
index 898af67db..000000000
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/metrics/route.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Box } from '~/console/components/common-console-components';
-
-const ClusterMetrics = () => {
-  return <Box title="Metrics">Metrics</Box>;
-};
-
-export default ClusterMetrics;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
index 6e9d3a735..7cd734938 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
@@ -1,4 +1,4 @@
-import { generateKey } from '~/components/utils';
+import { generateKey, titleCase } from '~/components/utils';
 import {
   ListBody,
   ListSecondary,
@@ -16,6 +16,12 @@ import { IPvs } from '~/console/server/gql/queries/pv-queries';
 import { CircleFill, Database, Trash } from '@jengaicons/react';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
 import { useState } from 'react';
+import DeleteDialog from '~/console/components/delete-dialog';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useParams } from '@remix-run/react';
+import { toast } from '~/components/molecule/toast';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { handleError } from '~/root/lib/utils/common';
 
 const RESOURCE_NAME = 'storage';
 type BaseType = ExtractNodeType<IPvs>;
@@ -165,6 +171,11 @@ const StorageResources = ({ items = [] }: { items: BaseType[] }) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
     null
   );
+
+  const { cluster } = useParams();
+  const reloadPage = useReload();
+  const api = useConsoleApi();
+
   const props: IResource = {
     items,
     onAction: ({ action, item }) => {
@@ -184,20 +195,19 @@ const StorageResources = ({ items = [] }: { items: BaseType[] }) => {
         listView={<ListView {...props} />}
         gridView={<GridView {...props} />}
       />
-      {/* <DeleteDialog
+      <DeleteDialog
         resourceName={parseName(showDeleteDialog)}
         resourceType={RESOURCE_NAME}
         show={showDeleteDialog}
         setShow={setShowDeleteDialog}
         onSubmit={async () => {
-          if (!params.project || !params.environment) {
-            throw new Error('Project and Environment is required!.');
+          if (!cluster) {
+            throw new Error('Cluster is required!.');
           }
           try {
-            const { errors } = await api.deleteManagedResource({
-              mresName: parseName(showDeleteDialog),
-              envName: params.environment,
-              projectName: params.project,
+            const { errors } = await api.deletePV({
+              pvName: parseName(showDeleteDialog),
+              clusterName: cluster,
             });
 
             if (errors) {
@@ -210,7 +220,7 @@ const StorageResources = ({ items = [] }: { items: BaseType[] }) => {
             handleError(err);
           }
         }}
-      /> */}
+      />
     </>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
index 7f0c6f1db..47f838606 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -7,7 +7,6 @@ import { parseNodes } from '~/console/server/r-utils/common';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
-import SecondarySubHeader from '~/console/components/secondary-sub-header';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
@@ -130,33 +129,31 @@ const Clusters = () => {
 
         const { pageInfo, totalCount } = clustersData;
         return (
-          <div className="flex flex-col gap-6xl">
-            <Wrapper
-              secondaryHeader={{
-                title: 'Clusters',
-                action: clusters.length > 0 && (
-                  <Button
-                    content="Create cluster"
-                    variant="primary"
-                    prefix={<Plus />}
-                    LinkComponent={Link}
-                    to={`/${account}/new-cluster`}
-                  />
-                ),
-              }}
-              empty={getEmptyState({
-                clustersCount: clusters.length,
-                cloudProviderSecretsCount: secretsCount,
-              })}
-              pagination={{
-                pageInfo,
-                totalCount,
-              }}
-              tools={<Tools />}
-            >
-              <ClusterResources items={clusters} />
-            </Wrapper>
-          </div>
+          <Wrapper
+            secondaryHeader={{
+              title: 'Clusters',
+              action: clusters.length > 0 && (
+                <Button
+                  content="Create cluster"
+                  variant="primary"
+                  prefix={<Plus />}
+                  LinkComponent={Link}
+                  to={`/${account}/new-cluster`}
+                />
+              ),
+            }}
+            empty={getEmptyState({
+              clustersCount: clusters.length,
+              cloudProviderSecretsCount: secretsCount,
+            })}
+            pagination={{
+              pageInfo,
+              totalCount,
+            }}
+            tools={<Tools />}
+          >
+            <ClusterResources items={clusters} />
+          </Wrapper>
         );
       }}
     </LoadingComp>
diff --git a/src/apps/console/routes/_main+/$account+/packages+/access-management/handle-cr-cred.tsx b/src/apps/console/routes/_main+/$account+/packages+/access-management/handle-cr-cred.tsx
index 77cb0888b..ee2f68e43 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/access-management/handle-cr-cred.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/access-management/handle-cr-cred.tsx
@@ -5,6 +5,7 @@ import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
 import { IdSelector } from '~/console/components/id-selector';
+import { NameIdView } from '~/console/components/name-id-view';
 import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
@@ -29,23 +30,24 @@ const Root = (props: IDialog) => {
   const { values, errors, handleChange, handleSubmit, resetValues, isLoading } =
     useForm({
       initialValues: {
+        displayName: '',
         name: '',
-        username: '',
         access: 'read_write' as CredentialIn['access'],
         unit: 'd' as CredentialIn['expiration']['unit'],
         value: '1',
+        isNameError: false,
       },
       validationSchema: Yup.object({
+        displayName: Yup.string().required(),
         name: Yup.string().required(),
-        username: Yup.string().required(),
         value: Yup.string().required('expiration time is required.'),
       }),
       onSubmit: async (val) => {
         try {
           const { errors: e } = await api.createCred({
             credential: {
-              name: val.name,
-              username: val.username,
+              name: val.displayName,
+              username: val.name,
               expiration: {
                 unit: val.unit,
                 value: parseInt(val.value, 10),
@@ -69,24 +71,14 @@ const Root = (props: IDialog) => {
     <Popup.Form onSubmit={handleSubmit}>
       <Popup.Content>
         <div className="flex flex-col gap-3xl">
-          <TextInput
-            value={values.name}
+          <NameIdView
+            resType="username"
             label="Name"
-            onChange={handleChange('name')}
-            error={!!errors.name}
-            message={errors.name}
-          />
-          {/* <TextInput
-          value={values.username}
-          label="Username"
-          onChange={handleChange('username')}
-          error={!!errors.username}
-          message={errors.username}
-        /> */}
-          <IdSelector
+            displayName={values.displayName}
             name={values.name}
-            resType="username"
-            onChange={(value) => handleChange('username')(dummyEvent(value))}
+            errors={errors.name}
+            handleChange={handleChange}
+            nameErrorLabel="isNameError"
           />
           <Radio.Root
             label="Access"
diff --git a/src/apps/console/routes/_main+/$account+/projects/route.tsx b/src/apps/console/routes/_main+/$account+/projects/route.tsx
index a854adf50..6ccde0bdf 100644
--- a/src/apps/console/routes/_main+/$account+/projects/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/projects/route.tsx
@@ -72,7 +72,7 @@ export const loader = (ctx: IRemixCtx) => {
 
 const Projects = () => {
   // return <Wip />;
-
+  console.log('projects');
   const { account } = useParams();
   const { promise } = useLoaderData<typeof loader>();
 
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index 1bf719c45..ea949e042 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { toast } from '~/components/molecule/toast';
-import { cn, generateKey, titleCase } from '~/components/utils';
+import { cn, generateKey } from '~/components/utils';
 import {
   ListBody,
   ListTitle,
@@ -9,18 +8,14 @@ import DeleteDialog from '~/console/components/delete-dialog';
 import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
 import {
   ExtractNodeType,
   parseName,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { handleError } from '~/root/lib/utils/common';
-import { useOutletContext, useParams } from '@remix-run/react';
+import { useOutletContext } from '@remix-run/react';
 import { IBuildRuns } from '~/console/server/gql/queries/build-run-queries';
 import AnimateHide from '~/components/atoms/animate-hide';
-import LogComp from '~/console/components/logger';
 import { Button } from '~/components/atoms/button';
 import {
   CheckCircleFill,
@@ -30,8 +25,8 @@ import {
   XCircleFill,
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
-import { Badge } from '~/components/atoms/badge';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;
@@ -193,7 +188,7 @@ const ListItem = ({ item }: { item: BaseType }) => {
             width: '100%',
             height: '40rem',
             title: 'Logs',
-            hideLines: true,
+            hideLineNumber: true,
             websocket: {
               account: parseName(account),
               cluster: item.clusterName,
@@ -234,9 +229,6 @@ const BuildRunResources = ({ items = [] }: { items: BaseType[] }) => {
     null
   );
 
-  const api = useConsoleApi();
-  const reloadPage = useReload();
-
   const props: IResource = {
     items,
     // onDelete: (item) => {
@@ -244,7 +236,6 @@ const BuildRunResources = ({ items = [] }: { items: BaseType[] }) => {
     // },
   };
 
-  const params = useParams();
   return (
     <>
       <ListGridView
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
index 6e5cc8d94..5d2c3bac7 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
@@ -22,7 +22,6 @@ import MultiStep, { useMultiStep } from '~/console/components/multi-step';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import Popup from '~/components/molecule/popup';
-import GitRepoSelector from '~/console/components/git-repo-selector';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
 import { IBuilds } from '~/console/server/gql/queries/build-queries';
 import {
@@ -144,7 +143,7 @@ const Root = (props: IDialog) => {
     }
   }, [isUpdate]);
 
-  const { currentStep, onNext, onPrevious } = useMultiStep({
+  const { currentStep, onPrevious } = useMultiStep({
     defaultStep: isUpdate ? 2 : 1,
     totalSteps: 2,
   });
@@ -162,30 +161,30 @@ const Root = (props: IDialog) => {
   const { values, errors, handleChange, handleSubmit, resetValues } = useForm({
     initialValues: isUpdate
       ? {
-          name: props.data.name,
-          tags:
-            props.data.spec.registry.repo.tags.map((t) => ({
-              label: t,
-              value: t,
-            })) || [],
-          buildClusterName: '',
-          repository: repo,
-          advanceOptions: isAdvanceOptions(props.data.spec.buildOptions),
-          ...props.data.spec.buildOptions,
-          ...(props.data.spec.buildOptions?.buildArgs || props),
-        }
+        name: props.data.name,
+        tags:
+          props.data.spec.registry.repo.tags.map((t) => ({
+            label: t,
+            value: t,
+          })) || [],
+        buildClusterName: '',
+        repository: repo,
+        advanceOptions: isAdvanceOptions(props.data.spec.buildOptions),
+        ...props.data.spec.buildOptions,
+        ...(props.data.spec.buildOptions?.buildArgs || props),
+      }
       : {
-          name: '',
-          tags: [],
-          buildClusterName: '',
-          advanceOptions: false,
-          repository: repo,
-          buildArgs: {},
-          buildContexts: {},
-          contextDir: '',
-          dockerfilePath: '',
-          dockerfileContent: '',
-        },
+        name: '',
+        tags: [],
+        buildClusterName: '',
+        advanceOptions: false,
+        repository: repo,
+        buildArgs: {},
+        buildContexts: {},
+        contextDir: '',
+        dockerfilePath: '',
+        dockerfileContent: '',
+      },
     validationSchema: Yup.object({
       name: Yup.string().required(),
       buildClusterName: Yup.string().required(),
@@ -230,15 +229,15 @@ const Root = (props: IDialog) => {
                   ...{
                     ...(val.advanceOptions
                       ? {
-                          buildOptions: {
-                            buildArgs: val.buildArgs,
-                            buildContexts: val.buildContexts,
-                            contextDir: val.contextDir,
-                            dockerfileContent: val.dockerfileContent,
-                            dockerfilePath: val.dockerfilePath,
-                            targetPlatforms: [],
-                          },
-                        }
+                        buildOptions: {
+                          buildArgs: val.buildArgs,
+                          buildContexts: val.buildContexts,
+                          contextDir: val.contextDir,
+                          dockerfileContent: val.dockerfileContent,
+                          dockerfilePath: val.dockerfilePath,
+                          targetPlatforms: [],
+                        },
+                      }
                       : {}),
                   },
                   registry: {
@@ -272,15 +271,15 @@ const Root = (props: IDialog) => {
                   ...{
                     ...(val.advanceOptions
                       ? {
-                          buildOptions: {
-                            buildArgs: val.buildArgs,
-                            buildContexts: val.buildContexts,
-                            contextDir: val.contextDir,
-                            dockerfileContent: val.dockerfileContent,
-                            dockerfilePath: val.dockerfilePath,
-                            targetPlatforms: [],
-                          },
-                        }
+                        buildOptions: {
+                          buildArgs: val.buildArgs,
+                          buildContexts: val.buildContexts,
+                          contextDir: val.contextDir,
+                          dockerfileContent: val.dockerfileContent,
+                          dockerfilePath: val.dockerfilePath,
+                          targetPlatforms: [],
+                        },
+                      }
                       : {}),
                   },
                   registry: {
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/repo-selector.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/repo-selector.tsx
deleted file mode 100644
index 2f0e79e51..000000000
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/repo-selector.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import GitRepoSelector from '~/console/components/git-repo-selector';
-
-const RepoSelector = () => {
-  return <GitRepoSelector />;
-};
-
-export default RepoSelector;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/review-build.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/review-build.tsx
index 8ffde5295..bd92a296c 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/review-build.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/review-build.tsx
@@ -1,8 +1,6 @@
 import {
   GitBranchFill,
-  GithubLogo,
   GithubLogoFill,
-  GitlabLogo,
   GitlabLogoFill,
 } from '@jengaicons/react';
 import { ReviewComponent } from '../../../$project+/$environment+/new-app/app-review';
@@ -86,50 +84,56 @@ const ReviewBuild = ({
           </div>
         </div>
       </ReviewComponent>
-      {values.advanceOptions && (
-        <ReviewComponent title="Advance options" onEdit={() => onEdit(2)}>
-          <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
-            {Object.keys(values.buildArgs).length > 0 && (
-              <div className="flex flex-row items-center gap-lg [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
-                <div className="flex-1 bodyMd-medium text-text-default">
-                  Build Args
+      {values.advanceOptions &&
+        (Object.keys(values.buildArgs).length > 0 ||
+          Object.keys(values.buildContexts).length > 0 ||
+          values.contextDir ||
+          values.dockerfilePath) && (
+          <ReviewComponent title="Advance options" onEdit={() => onEdit(2)}>
+            <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
+              {Object.keys(values.buildArgs).length > 0 && (
+                <div className="flex flex-row items-center gap-lg [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
+                  <div className="flex-1 bodyMd-medium text-text-default">
+                    Build Args
+                  </div>
+                  <div className="text-text-soft bodyMd">
+                    {Object.keys(values.buildArgs).length || 0}
+                  </div>
                 </div>
-                <div className="text-text-soft bodyMd">
-                  {Object.keys(values.buildArgs).length || 0}
+              )}
+              {Object.keys(values.buildContexts).length > 0 && (
+                <div className="flex flex-row items-center gap-lg [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
+                  <div className="flex-1 bodyMd-medium text-text-default">
+                    Build contexts
+                  </div>
+                  <div className="text-text-soft bodyMd">
+                    {Object.keys(values.buildContexts).length || 0}
+                  </div>
                 </div>
-              </div>
-            )}
-            {Object.keys(values.buildContexts).length > 0 && (
-              <div className="flex flex-row items-center gap-lg [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
-                <div className="flex-1 bodyMd-medium text-text-default">
-                  Build contexts
-                </div>
-                <div className="text-text-soft bodyMd">
-                  {Object.keys(values.buildContexts).length || 0}
+              )}
+              {values.contextDir && (
+                <div className="flex flex-col gap-md [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
+                  <div className="bodyMd-medium text-text-default">
+                    Context dir
+                  </div>
+                  <div className="bodySm text-text-soft">
+                    {values.contextDir}
+                  </div>
                 </div>
-              </div>
-            )}
-            {values.contextDir && (
-              <div className="flex flex-col gap-md [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
-                <div className="bodyMd-medium text-text-default">
-                  Context dir
-                </div>
-                <div className="bodySm text-text-soft">{values.contextDir}</div>
-              </div>
-            )}
-            {values.dockerfilePath && (
-              <div className="flex flex-col gap-md [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
-                <div className="bodyMd-medium text-text-default">
-                  Docker filepath
+              )}
+              {values.dockerfilePath && (
+                <div className="flex flex-col gap-md [&:not(:last-child)]:pb-lg [&:not(:last-child)]:border-b border-border-default">
+                  <div className="bodyMd-medium text-text-default">
+                    Docker filepath
+                  </div>
+                  <div className="bodySm text-text-soft">
+                    {values.dockerfilePath}
+                  </div>
                 </div>
-                <div className="bodySm text-text-soft">
-                  {values.dockerfilePath}
-                </div>
-              </div>
-            )}
-          </div>
-        </ReviewComponent>
-      )}
+              )}
+            </div>
+          </ReviewComponent>
+        )}
     </div>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
index a02e49b85..ea3b8a73f 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
@@ -1,5 +1,5 @@
 import { ArrowRight } from '@jengaicons/react';
-import { useNavigate, useParams } from '@remix-run/react';
+import { useLoaderData, useNavigate, useParams } from '@remix-run/react';
 import { Button } from '~/components/atoms/button';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
@@ -8,12 +8,48 @@ import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
 import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
-import GitRepoSelector from '~/console/components/git-repo-selector';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import BuildDetails from './build-details';
+import { IRemixCtx } from '~/root/lib/types/common';
+import { GQLServerHandler } from '~/console/server/gql/saved-queries';
+import logger from '~/root/lib/client/helpers/log';
+import Git from '~/console/components/git';
+import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
 import ReviewBuild from './review-build';
+import BuildDetails from './build-details';
+
+export const loader = async (ctx: IRemixCtx) => {
+  try {
+    const { data, errors } = await GQLServerHandler(ctx.request).getLogins({});
+
+    if (errors) {
+      throw errors[0];
+    }
+
+    const { data: e, errors: dErrors } = await GQLServerHandler(
+      ctx.request
+    ).loginUrls({});
+
+    if (dErrors) {
+      throw dErrors[0];
+    }
+
+    return {
+      loginUrls: e,
+      logins: data,
+    };
+  } catch (err) {
+    logger.error(err);
+  }
+
+  return {
+    logins: {},
+    loginUrls: {},
+  };
+};
 
 const NewBuild = () => {
+  const { loginUrls, logins } = useLoaderData();
+
   const navigate = useNavigate();
 
   const { account } = useParams();
@@ -43,11 +79,14 @@ const NewBuild = () => {
       contextDir: '',
       dockerfilePath: '',
       dockerfileContent: '',
+      isGitLoading: false,
     },
     validationSchema: Yup.object({
-      source: Yup.object().shape({
-        branch: Yup.string().required('Branch is required'),
-      }),
+      source: Yup.object()
+        .shape({
+          branch: Yup.string().required('Branch is required'),
+        })
+        .required('Branch is required'),
       name: Yup.string().test('required', 'Name is required', (v) => {
         return !(currentStep === 2 && !v);
       }),
@@ -82,15 +121,15 @@ const NewBuild = () => {
                 ...{
                   ...(val.advanceOptions
                     ? {
-                        buildOptions: {
-                          buildArgs: val.buildArgs,
-                          buildContexts: val.buildContexts,
-                          contextDir: val.contextDir,
-                          dockerfileContent: val.dockerfileContent,
-                          dockerfilePath: val.dockerfilePath,
-                          targetPlatforms: [],
-                        },
-                      }
+                      buildOptions: {
+                        buildArgs: val.buildArgs,
+                        buildContexts: val.buildContexts,
+                        contextDir: val.contextDir,
+                        dockerfileContent: val.dockerfileContent,
+                        dockerfilePath: val.dockerfilePath,
+                        targetPlatforms: [],
+                      },
+                    }
                     : {}),
                 },
                 registry: {
@@ -141,7 +180,10 @@ const NewBuild = () => {
         <MultiStepProgress.Root currentStep={currentStep} jumpStep={jumpStep}>
           <MultiStepProgress.Step label="Import git repository" step={1}>
             <div className="flex flex-col gap-3xl">
-              <GitRepoSelector
+              <Git
+                logins={logins}
+                loginUrls={loginUrls}
+                error={errors?.['source.branch'] || ''}
                 onChange={(git) => {
                   handleChange('source')(
                     dummyEvent({
@@ -150,15 +192,20 @@ const NewBuild = () => {
                       provider: git.provider,
                     })
                   );
-                  console.log(git);
                 }}
-                error={errors?.['source.branch'] || ''}
+                value={{
+                  branch: values.source.branch,
+                  repo: values.source.repository,
+                  provider:
+                    (values.source.provider as IGIT_PROVIDERS) || 'github',
+                }}
               />
               <Button
                 content="Next"
                 variant="primary"
                 type="submit"
                 size="lg"
+                disabled={!values.source.branch}
                 suffix={<ArrowRight />}
               />
             </div>
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/handle-build-cache.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/handle-build-cache.tsx
index 09fe665b9..b47f9bbfd 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/handle-build-cache.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/handle-build-cache.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable react/destructuring-assignment */
-import { NumberInput, TextInput } from '~/components/atoms/input';
+import { NumberInput } from '~/components/atoms/input';
 import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
-import { IdSelector } from '~/console/components/id-selector';
+import { NameIdView } from '~/console/components/name-id-view';
 import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IBuildCaches } from '~/console/server/gql/queries/build-caches-queries';
 import { ExtractNodeType } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 
@@ -19,81 +19,76 @@ const Root = (props: IDialog) => {
   const api = useConsoleApi();
   const reloadPage = useReload();
 
-  const { values, errors, handleChange, handleSubmit, resetValues, isLoading } =
-    useForm({
-      initialValues: isUpdate
-        ? {
-            name: props.data.name,
-            displayName: props.data.displayName,
-            volumeSize: props.data.volumeSizeInGB,
+  const { values, errors, handleChange, handleSubmit, isLoading } = useForm({
+    initialValues: isUpdate
+      ? {
+          name: props.data.name,
+          displayName: props.data.displayName,
+          volumeSize: props.data.volumeSizeInGB,
+          isNameError: false,
+        }
+      : {
+          name: '',
+          displayName: '',
+          volumeSize: 0,
+          isNameError: false,
+        },
+    validationSchema: Yup.object({
+      name: Yup.string().required(),
+      displayName: Yup.string().required(),
+      volumeSize: Yup.number().required(),
+    }),
+    onSubmit: async (val) => {
+      try {
+        if (!isUpdate) {
+          const { errors: e } = await api.createBuildCache({
+            buildCacheKey: {
+              displayName: val.displayName,
+              name: val.name,
+              volumeSizeInGB: val.volumeSize,
+            },
+          });
+          if (e) {
+            throw e[0];
           }
-        : {
-            name: '',
-            displayName: '',
-            volumeSize: 0,
-          },
-      validationSchema: Yup.object({
-        name: Yup.string().required(),
-        displayName: Yup.string().required(),
-        volumeSize: Yup.number().required(),
-      }),
-      onSubmit: async (val) => {
-        try {
-          if (!isUpdate) {
-            const { errors: e } = await api.createBuildCache({
-              buildCacheKey: {
-                displayName: val.displayName,
-                name: val.name,
-                volumeSizeInGB: val.volumeSize,
-              },
-            });
-            if (e) {
-              throw e[0];
-            }
-          } else {
-            const { errors: e } = await api.updateBuildCaches({
-              crUpdateBuildCacheKeyId: props.data.id,
-              buildCacheKey: {
-                displayName: val.displayName,
-                name: props.data.name,
-                volumeSizeInGB: val.volumeSize,
-              },
-            });
-            if (e) {
-              throw e[0];
-            }
+        } else {
+          const { errors: e } = await api.updateBuildCaches({
+            crUpdateBuildCacheKeyId: props.data.id,
+            buildCacheKey: {
+              displayName: val.displayName,
+              name: props.data.name,
+              volumeSizeInGB: val.volumeSize,
+            },
+          });
+          if (e) {
+            throw e[0];
           }
-          // resetValues();
-          toast.success(
-            `Build cache ${isUpdate ? 'updated' : 'created'} successfully`
-          );
-          setVisible(false);
-          reloadPage();
-        } catch (err) {
-          handleError(err);
         }
-      },
-    });
+        // resetValues();
+        toast.success(
+          `Build cache ${isUpdate ? 'updated' : 'created'} successfully`
+        );
+        setVisible(false);
+        reloadPage();
+      } catch (err) {
+        handleError(err);
+      }
+    },
+  });
   return (
     <Popup.Form onSubmit={handleSubmit}>
       <Popup.Content>
         <div className="flex flex-col gap-2xl">
-          <TextInput
-            value={values.displayName}
+          <NameIdView
+            displayName={values.displayName}
+            name={values.name}
+            handleChange={handleChange}
+            isUpdate={isUpdate}
             label="Name"
-            onChange={handleChange('displayName')}
-            error={!!errors.displayName}
-            message={errors.displayName}
+            errors={errors.name}
+            resType="project"
+            nameErrorLabel="isNameError"
           />
-          {!isUpdate && (
-            <IdSelector
-              resType="username"
-              onChange={(v) => {
-                handleChange('name')(dummyEvent(v));
-              }}
-              name={values.displayName}
-            />
-          )}
           <NumberInput
             value={values.volumeSize}
             min={0}
diff --git a/src/apps/console/routes/_main+/$account+/settings+/sample.tsx b/src/apps/console/routes/_main+/$account+/settings+/sample.tsx
deleted file mode 100644
index 79ec8d2fc..000000000
--- a/src/apps/console/routes/_main+/$account+/settings+/sample.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { useLoaderData } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
-import GitRepoSelector from '~/console/components/git-repo-selector';
-import { IAccount } from '~/console/server/gql/queries/account-queries';
-import {
-  type ConsoleApiType,
-  GQLServerHandler,
-} from '~/console/server/gql/saved-queries';
-import { parseName } from '~/console/server/r-utils/common';
-import logger from '~/root/lib/client/helpers/log';
-import { githubAppName } from '~/root/lib/configs/base-url.cjs';
-import { IRemixCtx } from '~/root/lib/types/common';
-import { handleError } from '~/root/lib/utils/common';
-
-export const popupWindow = ({
-  url = '',
-  onClose = () => {},
-  width = 800,
-  height = 500,
-  title = 'kloudlite',
-}) => {
-  const frame = window.open(
-    url,
-    title,
-    `toolbar=no,scrollbars=yes,resizable=no,top=${
-      window.screen.height / 2 - height / 2
-    },left=${window.screen.width / 2 - width / 2},width=800,height=600`
-  );
-
-  const interval = setInterval(() => {
-    if (frame && frame.closed) {
-      clearInterval(interval);
-      // logger.log('closed');
-      onClose();
-    }
-  }, 100);
-};
-
-export const loader = async (ctx: IRemixCtx) => {
-  try {
-    const { data, errors } = await GQLServerHandler(ctx.request).getLogins({});
-
-    if (errors) {
-      throw errors[0];
-    }
-
-    const { data: e, errors: dErrors } = await GQLServerHandler(
-      ctx.request
-    ).loginUrls({});
-
-    if (dErrors) {
-      throw dErrors[0];
-    }
-
-    return {
-      loginUrls: e,
-      logins: data,
-    };
-  } catch (err) {
-    logger.error(err);
-  }
-
-  return {
-    logins: {},
-  };
-};
-
-const Logins = () => {
-  const eventListner = (e: MessageEvent) => {
-    logger.log(e?.data?.status);
-    logger.log(e, 'e');
-    if (e?.data?.status === 'success') {
-      console.log(e.data, 'logged in');
-      // setContainerData((s) => ({
-      //   ...s,
-      //   gitProvider: provider,
-      // }));
-    }
-  };
-
-  const { logins, loginUrls } = useLoaderData();
-  console.log(logins);
-  const githubInstallUrl = `https://github.com/apps/${githubAppName}/installations/new`;
-  return (
-    <div className="flex flex-col gap-md">
-      <h2>Logins</h2>
-      <Button
-        content="Install New App"
-        onClick={() =>
-          popupWindow({
-            url: githubInstallUrl,
-          })
-        }
-      />
-      <Button
-        content={logins.providerGithub ? 'github' : ''}
-        onClick={() => {
-          popupWindow({
-            url: loginUrls.githubLoginUrl,
-            onClose: async () => {
-              window.removeEventListener('message', eventListner);
-            },
-          });
-        }}
-      />
-      <Button
-        onClick={() => {
-          popupWindow({
-            url: loginUrls.gitlabLoginUrl,
-            onClose: async () => {
-              window.removeEventListener('message', eventListner);
-            },
-          });
-        }}
-        content={logins.providerGitlab ? 'gitlab' : ''}
-      />
-    </div>
-  );
-};
-
-export const updateAccount = async ({
-  api,
-  data,
-}: {
-  api: ConsoleApiType;
-  data: IAccount;
-}) => {
-  try {
-    const { errors: e } = await api.updateAccount({
-      account: {
-        displayName: data.displayName,
-        metadata: {
-          name: parseName(data),
-        },
-        contactEmail: data.contactEmail,
-      },
-    });
-    if (e) {
-      throw e[0];
-    }
-  } catch (err) {
-    handleError(err);
-  }
-};
-
-const SettingGeneral = () => {
-  return (
-    <>
-      <Logins />
-      <GitRepoSelector />
-    </>
-  );
-};
-
-export default SettingGeneral;
diff --git a/src/apps/console/routes/_main+/$account+/settings+/vpn/route.tsx b/src/apps/console/routes/_main+/$account+/settings+/vpn/route.tsx
index 40cb88431..536f558c2 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/vpn/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/vpn/route.tsx
@@ -41,23 +41,15 @@ const ConsoleVPN = () => {
 
   return (
     <>
-      <LoadingComp
-        data={promise}
-        // skeletonData={{
-        //   devicesData: fake.vp
-        //     .core_listVPNDevicesForUser as any,
-        // }}
-      >
+      <LoadingComp data={promise}>
         {({ devicesData }) => {
           const devices = devicesData?.edges?.map(({ node }) => node);
-          console.log('devices', devicesData);
-
           if (!devices) {
             return null;
           }
           return (
             <Wrapper
-              header={{
+              secondaryHeader={{
                 title: 'VPN devices',
                 action: devices.length > 0 && (
                   <Button
diff --git a/src/apps/console/routes/test.tsx b/src/apps/console/routes/test.tsx
index 6c408999a..5e9ae4409 100644
--- a/src/apps/console/routes/test.tsx
+++ b/src/apps/console/routes/test.tsx
@@ -1,9 +1,4 @@
 import { useLoaderData } from '@remix-run/react';
-import SocketProvider, {
-  useSubscribe,
-  // useSubscribe,
-  useWatch,
-} from '~/root/lib/client/helpers/socket-context';
 
 export const loader = () => {
   return {
@@ -12,14 +7,6 @@ export const loader = () => {
 };
 
 const App = () => {
-  useSubscribe(
-    ['account:newteam.cluster'],
-    () => {
-      console.log('hi');
-    },
-    []
-  );
-
   // useWatch('account:newteam.cluster');
   // res-updates.account.acc-ruwibp-pf5jvcsew2rnl54kriv59.cluster.*
   // res-updates.account.accid.project.projid.env.envid.app.*
@@ -30,9 +17,5 @@ const App = () => {
 };
 
 export default () => {
-  return (
-    <SocketProvider>
-      <App />
-    </SocketProvider>
-  );
+  return <App />;
 };
diff --git a/src/apps/console/routes/test2/_index.tsx b/src/apps/console/routes/test2/_index.tsx
index f07a41ec2..315d5f0d7 100644
--- a/src/apps/console/routes/test2/_index.tsx
+++ b/src/apps/console/routes/test2/_index.tsx
@@ -1,34 +1,18 @@
-import LogComp from '~/console/components/logger';
-import axios from "axios";
-import {useEffect} from "react";
-import https from "https";
+import { useEffect } from 'react';
+import { useSocketLogs } from '~/root/lib/client/helpers/socket/useSockLogs';
 
 const App = () => {
+  const resp = useSocketLogs({
+    account: 'ab-641330',
+    cluster: 'ab-cluster-3',
+    trackingId: 'app-3ez2fpr-3oc8gqjib-ii5-pbat6d',
+  });
 
-    useEffect(() => {
-        (async()=>{
-            try{
-                var axios1 =await axios({
-                    url:'http://10.13.0.1:17171',
+  useEffect(() => {
+    console.log(resp);
+  }, [resp]);
 
-                });
-
-                console.log((axios1))
-            }catch(err){
-                // console.log(err.message)
-            }
-
-        })()
-    }, []);
-  return (
-    <div className="flex items-center justify-center h-screen w-screen">
-     kk
-    </div>
-  );
-};
-
-const Logs = () => {
-  return <App />;
+  return <div>Logs</div>;
 };
 
-export default Logs;
+export default App;
diff --git a/src/apps/console/server/gql/queries/app-queries.ts b/src/apps/console/server/gql/queries/app-queries.ts
index 3aed5a5d2..0bcc2c5c5 100644
--- a/src/apps/console/server/gql/queries/app-queries.ts
+++ b/src/apps/console/server/gql/queries/app-queries.ts
@@ -14,12 +14,29 @@ import {
   ConsoleUpdateAppMutationVariables,
   ConsoleInterceptAppMutation,
   ConsoleInterceptAppMutationVariables,
+  ConsoleRestartAppQuery,
+  ConsoleRestartAppQueryVariables,
 } from '~/root/src/generated/gql/server';
 
 export type IApp = NN<ConsoleGetAppQuery['core_getApp']>;
 export type IApps = NN<ConsoleListAppsQuery['core_listApps']>;
 
 export const appQueries = (executor: IExecutor) => ({
+  restartApp: executor(
+    gql`
+      query Query($projectName: String!, $envName: String!, $appName: String!) {
+        core_restartApp(
+          projectName: $projectName
+          envName: $envName
+          appName: $appName
+        )
+      }
+    `,
+    {
+      transformer: (data: ConsoleRestartAppQuery) => data.core_restartApp,
+      vars: (_: ConsoleRestartAppQueryVariables) => {},
+    }
+  ),
   createApp: executor(
     gql`
       mutation Core_createApp(
@@ -38,7 +55,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleCreateAppMutation) => data.core_createApp,
-      vars(_: ConsoleCreateAppMutationVariables) { },
+      vars(_: ConsoleCreateAppMutationVariables) {},
     }
   ),
 
@@ -62,7 +79,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer: (data: ConsoleUpdateAppMutation) => {
         return data.core_updateApp;
       },
-      vars(_: ConsoleUpdateAppMutationVariables) { },
+      vars(_: ConsoleUpdateAppMutationVariables) {},
     }
   ),
   interceptApp: executor(
@@ -86,7 +103,7 @@ export const appQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleInterceptAppMutation) =>
         data.core_interceptApp,
-      vars(_: ConsoleInterceptAppMutationVariables) { },
+      vars(_: ConsoleInterceptAppMutationVariables) {},
     }
   ),
   deleteApp: executor(
@@ -105,7 +122,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleDeleteAppMutation) => data.core_deleteApp,
-      vars(_: ConsoleDeleteAppMutationVariables) { },
+      vars(_: ConsoleDeleteAppMutationVariables) {},
     }
   ),
   getApp: executor(
@@ -252,7 +269,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetAppQuery) {
         return data.core_getApp;
       },
-      vars(_: ConsoleGetAppQueryVariables) { },
+      vars(_: ConsoleGetAppQueryVariables) {},
     }
   ),
   listApps: executor(
@@ -397,7 +414,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListAppsQuery) => data.core_listApps,
-      vars(_: ConsoleListAppsQueryVariables) { },
+      vars(_: ConsoleListAppsQueryVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/gql/queries/git-queries.ts b/src/apps/console/server/gql/queries/git-queries.ts
index d30ba20da..fd91ddd5f 100644
--- a/src/apps/console/server/gql/queries/git-queries.ts
+++ b/src/apps/console/server/gql/queries/git-queries.ts
@@ -31,6 +31,8 @@ export type IGithubInstallations = NN<
 export type IGitlabGroups = NN<
   ConsoleListGitlabGroupsQuery['cr_listGitlabGroups']
 >;
+export type ILogins = NN<ConsoleGetLoginsQuery['auth_me']>;
+export type ILoginUrls = NN<ConsoleLoginUrlsQuery>;
 // export type IProject = NN<Console['core_getProject']>;
 
 export const gitQueries = (executor: IExecutor) => ({
@@ -127,7 +129,10 @@ export const gitQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListGithubInstalltionsQuery) =>
-        data.cr_listGithubInstallations,
+        data.cr_listGithubInstallations?.map((ins) => ({
+          label: ins.account?.login || '',
+          value: `${ins.id}`,
+        })),
       vars(_: ConsoleListGithubInstalltionsQueryVariables) {},
     }
   ),
@@ -195,7 +200,10 @@ export const gitQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListGitlabGroupsQuery) =>
-        data.cr_listGitlabGroups,
+        data.cr_listGitlabGroups?.map((gps) => ({
+          label: gps.fullName,
+          value: gps.id,
+        })),
       vars(_: ConsoleListGitlabGroupsQueryVariables) {},
     }
   ),
diff --git a/src/apps/console/server/gql/queries/nodepool-queries.ts b/src/apps/console/server/gql/queries/nodepool-queries.ts
index db93fdc0e..eaaaf6ff3 100644
--- a/src/apps/console/server/gql/queries/nodepool-queries.ts
+++ b/src/apps/console/server/gql/queries/nodepool-queries.ts
@@ -20,6 +20,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
     gql`
       query Infra_getNodePool($clusterName: String!, $poolName: String!) {
         infra_getNodePool(clusterName: $clusterName, poolName: $poolName) {
+          id
           clusterName
           createdBy {
             userEmail
@@ -103,7 +104,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetNodePoolQuery) {
         return data.infra_getNodePool;
       },
-      vars(_: ConsoleGetNodePoolQueryVariables) { },
+      vars(_: ConsoleGetNodePoolQueryVariables) {},
     }
   ),
   createNodePool: executor(
@@ -117,7 +118,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateNodePoolMutation) =>
         data.infra_createNodePool,
-      vars(_: ConsoleCreateNodePoolMutationVariables) { },
+      vars(_: ConsoleCreateNodePoolMutationVariables) {},
     }
   ),
   updateNodePool: executor(
@@ -131,7 +132,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateNodePoolMutation) =>
         data.infra_createNodePool,
-      vars(_: ConsoleCreateNodePoolMutationVariables) { },
+      vars(_: ConsoleCreateNodePoolMutationVariables) {},
     }
   ),
   listNodePools: executor(
@@ -149,6 +150,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
           edges {
             cursor
             node {
+              id
               clusterName
               createdBy {
                 userEmail
@@ -239,7 +241,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListNodePoolsQuery) =>
         data.infra_listNodePools,
-      vars(_: ConsoleListNodePoolsQueryVariables) { },
+      vars(_: ConsoleListNodePoolsQueryVariables) {},
     }
   ),
   deleteNodePool: executor(
@@ -251,7 +253,7 @@ export const nodepoolQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteNodePoolMutation) =>
         data.infra_deleteNodePool,
-      vars(_: ConsoleDeleteNodePoolMutationVariables) { },
+      vars(_: ConsoleDeleteNodePoolMutationVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/gql/queries/pv-queries.ts b/src/apps/console/server/gql/queries/pv-queries.ts
index a90add1e3..51f432246 100644
--- a/src/apps/console/server/gql/queries/pv-queries.ts
+++ b/src/apps/console/server/gql/queries/pv-queries.ts
@@ -6,6 +6,8 @@ import {
   ConsoleGetPvQueryVariables,
   ConsoleListPvsQuery,
   ConsoleListPvsQueryVariables,
+  ConsoleDeletePvMutationVariables,
+  ConsoleDeletePvMutation,
 } from '~/root/src/generated/gql/server';
 
 export type IPvs = NN<ConsoleListPvsQuery['infra_listPVs']>;
@@ -516,4 +518,15 @@ export const pvQueries = (executor: IExecutor) => ({
       vars(_: ConsoleListPvsQueryVariables) { },
     }
   ),
+  deletePV: executor(
+    gql`
+      mutation Infra_deletePV($clusterName: String!, $pvName: String!) {
+        infra_deletePV(clusterName: $clusterName, pvName: $pvName)
+      }
+    `,
+    {
+      transformer: (data: ConsoleDeletePvMutation) => data.infra_deletePV,
+      vars(_: ConsoleDeletePvMutationVariables) { },
+    }
+  ),
 });
diff --git a/src/apps/console/server/r-utils/common.ts b/src/apps/console/server/r-utils/common.ts
index d97143f60..357a6b843 100644
--- a/src/apps/console/server/r-utils/common.ts
+++ b/src/apps/console/server/r-utils/common.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import { Params } from '@remix-run/react';
+// import { Params } from '@remix-run/react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { FlatMapType, NonNullableString } from '~/root/lib/types/common';
 import {
@@ -13,9 +13,9 @@ type IparseNodes<T> = {
   edges: Array<{ node: T }>;
 };
 
-interface IParamsCtx {
-  params: Params<string>;
-}
+// interface IParamsCtx {
+//   params: Params<string>;
+// }
 
 // export const getProjectQuery = (ctx: IParamsCtx): ProjectId => {
 //   const { project } = ctx.params;
@@ -47,10 +47,10 @@ export const parseNodes = <T>(resources: IparseNodes<T> | undefined): T[] =>
 
 type IparseName =
   | {
-    metadata?: {
-      name: string;
-    };
-  }
+      metadata?: {
+        name: string;
+      };
+    }
   | undefined
   | null;
 
@@ -74,10 +74,10 @@ export const parseName = (resource: IparseName, ensure = false) => {
 
 type IparseNamespace =
   | {
-    metadata: {
-      namespace: string;
-    };
-  }
+      metadata: {
+        namespace: string;
+      };
+    }
   | undefined
   | null;
 
@@ -86,10 +86,10 @@ export const parseNamespace = (resource: IparseNamespace) =>
 
 type IparseTargetNs =
   | {
-    spec?: {
-      targetNamespace: string;
-    };
-  }
+      spec?: {
+        targetNamespace: string;
+      };
+    }
   | undefined
   | null;
 
diff --git a/src/apps/devdoc/.gitignore b/src/apps/devdoc/.gitignore
index f74c78183..6721fd734 100644
--- a/src/apps/devdoc/.gitignore
+++ b/src/apps/devdoc/.gitignore
@@ -1,2 +1,3 @@
 .next
 node_modules
+.firebaseConfig
diff --git a/src/apps/devdoc/app/components/highlightit.tsx b/src/apps/devdoc/app/components/highlightit.tsx
index 86ad305b3..f051e2c10 100644
--- a/src/apps/devdoc/app/components/highlightit.tsx
+++ b/src/apps/devdoc/app/components/highlightit.tsx
@@ -18,7 +18,7 @@ const HighlightIt = ({
       if (ref.current) {
         // @ts-ignore
         ref.current.innerHTML = hljs.highlight(
-          inlineData,
+          `<pre>${inlineData}</pre>`,
           {
             language,
           },
diff --git a/src/apps/devdoc/app/components/page/index.tsx b/src/apps/devdoc/app/components/page/index.tsx
index c2dd01953..f2d960471 100644
--- a/src/apps/devdoc/app/components/page/index.tsx
+++ b/src/apps/devdoc/app/components/page/index.tsx
@@ -348,7 +348,7 @@ const TeamTaskSection = () => {
           <div className="grid grid-cols-2 gap-5xl 2xl:!gap-8xl 3xl:!gap-5xl px-10xl py-3xl md:py-8xl overflow-hidden">
             <div className="w-full flex flex-col">
               <h4 className="headingMd-marketing md:!headingXl-marketing text-text-default relative -top-[32px] -mt-[28px] right-1/2 transform translate-x-1/2 text-center">
-                Your team’s task
+                Your team’s tasks
               </h4>
               <GraphItem className="basis-1/2">
                 <div className="flex p-xl md:!p-5xl flex-col bg-gradient-to-b from-[#E4E4E7] to-[#F3F4F6] h-[512px] max-h-[512px] overflow-hidden">
diff --git a/src/apps/devdoc/app/layout/theme.tsx b/src/apps/devdoc/app/layout/theme.tsx
index 510067669..989a2b933 100644
--- a/src/apps/devdoc/app/layout/theme.tsx
+++ b/src/apps/devdoc/app/layout/theme.tsx
@@ -71,7 +71,6 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
   } = pageData;
 
   const hideSidebar = activeType === 'page';
-
   return (
     <div className="bg-surface-basic-subdued min-h-screen antialiased">
       <Head>
@@ -92,6 +91,7 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
           type="font/woff2"
           crossOrigin="anonymous"
         />
+
         {/** Hubspot* */}
         <script
           type="text/javascript"
@@ -162,8 +162,8 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
                 </div>
                 <div className="bodyLg text-text-strong">
                   {activeThemeContext.timestamp &&
-                  pageOpts.timestamp &&
-                  activeThemeContext.layout !== 'raw'
+                    pageOpts.timestamp &&
+                    activeThemeContext.layout !== 'raw'
                     ? GitTimestamp({ timestamp: new Date(pageOpts.timestamp) })
                     : null}
                 </div>
diff --git a/src/apps/devdoc/package.json b/src/apps/devdoc/package.json
index 5bfbc8b09..c95de4092 100644
--- a/src/apps/devdoc/package.json
+++ b/src/apps/devdoc/package.json
@@ -17,6 +17,7 @@
     "@types/git-url-parse": "^9.0.3",
     "classnames": "^2.5.1",
     "escape-string-regexp": "^5.0.0",
+    "firebase": "^10.8.0",
     "flexsearch": "^0.7.31",
     "framer-motion": "^10.16.16",
     "git-url-parse": "^13.1.1",
diff --git a/src/apps/devdoc/pages/_app.tsx b/src/apps/devdoc/pages/_app.tsx
index bb4e45476..1be5663de 100644
--- a/src/apps/devdoc/pages/_app.tsx
+++ b/src/apps/devdoc/pages/_app.tsx
@@ -4,8 +4,16 @@ import type { AppProps } from 'next/app';
 import '../public/arduino-light.min.css';
 import { MenuProvider } from '~/app/utils/use-menu';
 import { SearchProvider } from '~/app/utils/use-search';
+import { initializeApp } from 'firebase/app';
+import { getAnalytics } from 'firebase/analytics';
+import { useEffect } from 'react';
+import config from '../.firebaseConfig';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
+  const app = initializeApp(config);
+  useEffect(() => {
+    getAnalytics(app);
+  }, []);
   return (
     <MenuProvider>
       <div
diff --git a/src/apps/devdoc/pnpm-lock.yaml b/src/apps/devdoc/pnpm-lock.yaml
index fb7eb7451..2167d5427 100644
--- a/src/apps/devdoc/pnpm-lock.yaml
+++ b/src/apps/devdoc/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   escape-string-regexp:
     specifier: ^5.0.0
     version: 5.0.0
+  firebase:
+    specifier: ^10.8.0
+    version: 10.8.0
   flexsearch:
     specifier: ^0.7.31
     version: 0.7.31
@@ -235,6 +238,473 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fastify/busboy@2.1.0:
+    resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==}
+    engines: {node: '>=14'}
+    dev: false
+
+  /@firebase/analytics-compat@0.2.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-17VCly4P0VFBDqaaal7m1nhyYQwsygtaTpSsnc51sFPRrr9XIYtnD8ficon9fneEGEoJQ2g7OtASvhwX9EbK8g==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/analytics': 0.10.1(@firebase/app@0.9.27)
+      '@firebase/analytics-types': 0.8.0
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/analytics-types@0.8.0:
+    resolution: {integrity: sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw==}
+    dev: false
+
+  /@firebase/analytics@0.10.1(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-5mnH1aQa99J5lZMJwTNzIoRc4yGXHf+fOn+EoEWhCDA3XGPweGHcylCbqq+G1wVJmfILL57fohDMa8ftMZ+44g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/app-check-compat@0.3.9(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-7LxyupQ8XeEHRh72mO+tqm69kHT6KbWi2KtFMGedJ6tNbwzFzojcXESMKN8RpADXbYoQgY3loWMJjMx4r2Zt7w==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-check': 0.8.2(@firebase/app@0.9.27)
+      '@firebase/app-check-types': 0.5.0
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/app-check-interop-types@0.3.0:
+    resolution: {integrity: sha512-xAxHPZPIgFXnI+vb4sbBjZcde7ZluzPPaSK7Lx3/nmuVk4TjZvnL8ONnkd4ERQKL8WePQySU+pRcWkh8rDf5Sg==}
+    dev: false
+
+  /@firebase/app-check-types@0.5.0:
+    resolution: {integrity: sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ==}
+    dev: false
+
+  /@firebase/app-check@0.8.2(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-A2B5+ldOguYAeqW1quFN5qNdruSNRrg4W59ag1Eq6QzxuHNIkrE+TrapfrW/z5NYFjCxAYqr/unVCgmk80Dwcg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/app-compat@0.2.27:
+    resolution: {integrity: sha512-SYlqocfUDKPHR6MSFC8hree0BTiWFu5o8wbf6zFlYXyG41w7TcHp4wJi4H/EL5V6cM4kxwruXTJtqXX/fRAZtw==}
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/app-types@0.9.0:
+    resolution: {integrity: sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==}
+    dev: false
+
+  /@firebase/app@0.9.27:
+    resolution: {integrity: sha512-p2Dvl1ge4kRsyK5+wWcmdAIE9MSwZ0pDKAYB51LZgZuz6wciUZk4E1yAEdkfQlRxuHehn+Ol9WP5Qk2XQZiHGg==}
+    dependencies:
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      idb: 7.1.1
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/auth-compat@0.5.2(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-pRgje5BPCNR1vXyvGOVXwOHtv88A2WooXfklI8sV7/jWi03ExFqNfpJT26GUo/oD39NoKJ3Kt6rD5gVvdV7lMw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/auth': 1.6.0(@firebase/app@0.9.27)
+      '@firebase/auth-types': 0.12.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4)
+      '@firebase/component': 0.6.5
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+      undici: 5.26.5
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - '@react-native-async-storage/async-storage'
+    dev: false
+
+  /@firebase/auth-interop-types@0.2.1:
+    resolution: {integrity: sha512-VOaGzKp65MY6P5FI84TfYKBXEPi6LmOCSMMzys6o2BN2LOsqy7pCuZCup7NYnfbk5OkkQKzvIfHOzTm0UDpkyg==}
+    dev: false
+
+  /@firebase/auth-types@0.12.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4):
+    resolution: {integrity: sha512-pPwaZt+SPOshK8xNoiQlK5XIrS97kFYc3Rc7xmy373QsOJ9MmqXxLaYssP5Kcds4wd2qK//amx/c+A8O2fVeZA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.9.0
+      '@firebase/util': 1.9.4
+    dev: false
+
+  /@firebase/auth@1.6.0(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-Qhl35eJTV6BwvuueTPCY6x8kUlYyzALtjp/Ws0X3fw3AnjVVfuVb7oQ3Xh5VPVfMFhaIuUAd1KXwcAuIklkSDw==}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@react-native-async-storage/async-storage': ^1.18.1
+    peerDependenciesMeta:
+      '@react-native-async-storage/async-storage':
+        optional: true
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+      undici: 5.26.5
+    dev: false
+
+  /@firebase/component@0.6.5:
+    resolution: {integrity: sha512-2tVDk1ixi12sbDmmfITK8lxSjmcb73BMF6Qwc3U44hN/J1Fi1QY/Hnnb6klFlbB9/G16a3J3d4nXykye2EADTw==}
+    dependencies:
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/database-compat@1.0.3:
+    resolution: {integrity: sha512-7tHEOcMbK5jJzHWyphPux4osogH/adWwncxdMxdBpB9g1DNIyY4dcz1oJdlkXGM/i/AjUBesZsd5CuwTRTBNTw==}
+    dependencies:
+      '@firebase/component': 0.6.5
+      '@firebase/database': 1.0.3
+      '@firebase/database-types': 1.0.1
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/database-types@1.0.1:
+    resolution: {integrity: sha512-Tmcmx5XgiI7UVF/4oGg2P3AOTfq3WKEPsm2yf+uXtN7uG/a4WTWhVMrXGYRY2ZUL1xPxv9V33wQRJ+CcrUhVXw==}
+    dependencies:
+      '@firebase/app-types': 0.9.0
+      '@firebase/util': 1.9.4
+    dev: false
+
+  /@firebase/database@1.0.3:
+    resolution: {integrity: sha512-9fjqLt9JzL46gw9+NRqsgQEMjgRwfd8XtzcKqG+UYyhVeFCdVRQ0Wp6Dw/dvYHnbH5vNEKzNv36dcB4p+PIAAA==}
+    dependencies:
+      '@firebase/app-check-interop-types': 0.3.0
+      '@firebase/auth-interop-types': 0.2.1
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      faye-websocket: 0.11.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/firestore-compat@0.3.25(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-+xI7WmsgZCBhMn/+uhDKcg+lsOUJ9FJyt5PGTzkFPbCsozWfeQZ7eVnfPh0rMkUOf0yIQ924RIe04gwvEIbcoQ==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/firestore': 4.4.2(@firebase/app@0.9.27)
+      '@firebase/firestore-types': 3.0.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4)
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+    dev: false
+
+  /@firebase/firestore-types@3.0.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4):
+    resolution: {integrity: sha512-Meg4cIezHo9zLamw0ymFYBD4SMjLb+ZXIbuN7T7ddXN6MGoICmOTq3/ltdCGoDCS2u+H1XJs2u/cYp75jsX9Qw==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.9.0
+      '@firebase/util': 1.9.4
+    dev: false
+
+  /@firebase/firestore@4.4.2(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-YaX6ypa/RzU6OkxzUQlpSxwhOIWdTraCNz7sMsbaSEjjl/pj/QvX6TqjkdWGzuBYh2S6rz7ErhDO0g39oZZw/g==}
+    engines: {node: '>=10.10.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      '@firebase/webchannel-wrapper': 0.10.5
+      '@grpc/grpc-js': 1.9.14
+      '@grpc/proto-loader': 0.7.10
+      tslib: 2.6.2
+      undici: 5.26.5
+    dev: false
+
+  /@firebase/functions-compat@0.3.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-uXe6Kmku5lNogp3OpPBcOJbSvnaCOn+YxS3zlXKNU6Q/NLwcvO3RY1zwYyctCos2RemEw3KEQ7YdzcECXjHWLw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/functions': 0.11.1(@firebase/app@0.9.27)
+      '@firebase/functions-types': 0.6.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/functions-types@0.6.0:
+    resolution: {integrity: sha512-hfEw5VJtgWXIRf92ImLkgENqpL6IWpYaXVYiRkFY1jJ9+6tIhWM7IzzwbevwIIud/jaxKVdRzD7QBWfPmkwCYw==}
+    dev: false
+
+  /@firebase/functions@0.11.1(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-3uUa1hB79Gmy6E1gHTfzoHeZolBeHc/I/n3+lOCDe6BOos9AHmzRjKygcFE/7VA2FJjitCE0K+OHI6+OuoY8fQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/app-check-interop-types': 0.3.0
+      '@firebase/auth-interop-types': 0.2.1
+      '@firebase/component': 0.6.5
+      '@firebase/messaging-interop-types': 0.2.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+      undici: 5.26.5
+    dev: false
+
+  /@firebase/installations-compat@0.2.5(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-usvoIaog5CHEw082HXLrKAZ1qd4hIC3N/LDe2NqBgI3pkGE/7auLVM4Gn5gvyryp0x8z/IP1+d9fkGUj2OaGLQ==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/installations-types': 0.5.0(@firebase/app-types@0.9.0)
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+    dev: false
+
+  /@firebase/installations-types@0.5.0(@firebase/app-types@0.9.0):
+    resolution: {integrity: sha512-9DP+RGfzoI2jH7gY4SlzqvZ+hr7gYzPODrbzVD82Y12kScZ6ZpRg/i3j6rleto8vTFC8n6Len4560FnV1w2IRg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+    dependencies:
+      '@firebase/app-types': 0.9.0
+    dev: false
+
+  /@firebase/installations@0.6.5(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-0xxnQWw8rSRzu0ZOCkZaO+MJ0LkDAfwwTB2Z1SxRK6FAz5xkxD1ZUwM0WbCRni49PKubCrZYOJ6yg7tSjU7AKA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/util': 1.9.4
+      idb: 7.1.1
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/logger@0.4.0:
+    resolution: {integrity: sha512-eRKSeykumZ5+cJPdxxJRgAC3G5NknY2GwEbKfymdnXtnT0Ucm4pspfR6GT4MUQEDuJwRVbVcSx85kgJulMoFFA==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/messaging-compat@0.2.6(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-Q2xC1s4L7Vpss7P7Gy6GuIS+xmJrf/vm9+gX76IK1Bo1TjoKwleCLHt1LHkPz5Rvqg5pTgzzI8qqPhBpZosFCg==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/messaging': 0.12.6(@firebase/app@0.9.27)
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/messaging-interop-types@0.2.0:
+    resolution: {integrity: sha512-ujA8dcRuVeBixGR9CtegfpU4YmZf3Lt7QYkcj693FFannwNuZgfAYaTmbJ40dtjB81SAu6tbFPL9YLNT15KmOQ==}
+    dev: false
+
+  /@firebase/messaging@0.12.6(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-IORsPp9IPWq4j4yEhTOZ6GAGi3gQwGc+4yexmTAlya+qeBRSdRnJg2iIU/aj+tcKDQYr9RQuQPgHHOdFIx//vA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/messaging-interop-types': 0.2.0
+      '@firebase/util': 1.9.4
+      idb: 7.1.1
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/performance-compat@0.2.5(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-jJwJkVyDcIMBaVGrZ6CRGs4m5FCZsWB5QCWYI3FdsHyIa9/TfteNDilxj9wGciF2naFIHDW7TgE69U5dAH9Ktg==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/performance': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/performance-types': 0.2.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/performance-types@0.2.0:
+    resolution: {integrity: sha512-kYrbr8e/CYr1KLrLYZZt2noNnf+pRwDq2KK9Au9jHrBMnb0/C9X9yWSXmZkFt4UIdsQknBq8uBB7fsybZdOBTA==}
+    dev: false
+
+  /@firebase/performance@0.6.5(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-OzAGcWhOqEFH9GdwUuY0oC5FSlnMejcnmSAhR+EjpI7exdDvixyLyCR4txjSHYNTbumrFBG+EP8GO11CNXRaJA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/remote-config-compat@0.2.5(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-ImkNnLuGrD/bylBHDJigSY6LMwRrwt37wQbsGZhWG4QQ6KLzHzSf0nnFRRFvkOZodEUE57Ib8l74d6Yn/6TDUQ==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/logger': 0.4.0
+      '@firebase/remote-config': 0.4.5(@firebase/app@0.9.27)
+      '@firebase/remote-config-types': 0.3.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: false
+
+  /@firebase/remote-config-types@0.3.0:
+    resolution: {integrity: sha512-RtEH4vdcbXZuZWRZbIRmQVBNsE7VDQpet2qFvq6vwKLBIQRQR5Kh58M4ok3A3US8Sr3rubYnaGqZSurCwI8uMA==}
+    dev: false
+
+  /@firebase/remote-config@0.4.5(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-rGLqc/4OmxrS39RA9kgwa6JmgWytQuMo+B8pFhmGp3d++x2Hf9j+MLQfhOLyyUo64fNw20J19mLXhrXvKHsjZQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/logger': 0.4.0
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/storage-compat@0.3.4(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-Y0m5e2gS/wB9Ioth2X/Sgz76vcxvqgQrCmfa9qwhss/N31kxY2Gks6Frv0nrE18AjVfcSmcfDitqUwxcMOTRSg==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.2.27
+      '@firebase/component': 0.6.5
+      '@firebase/storage': 0.12.1(@firebase/app@0.9.27)
+      '@firebase/storage-types': 0.8.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4)
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+    dev: false
+
+  /@firebase/storage-types@0.8.0(@firebase/app-types@0.9.0)(@firebase/util@1.9.4):
+    resolution: {integrity: sha512-isRHcGrTs9kITJC0AVehHfpraWFui39MPaU7Eo8QfWlqW7YPymBmRgjDrlOgFdURh6Cdeg07zmkLP5tzTKRSpg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.9.0
+      '@firebase/util': 1.9.4
+    dev: false
+
+  /@firebase/storage@0.12.1(@firebase/app@0.9.27):
+    resolution: {integrity: sha512-KJ5NV7FUh54TeTlEjdkTTX60ciCKOp9EqlbLnpdcXUYRJg0Z4810TXbilPc1z7fTIG4iPjtdi95bGE9n4dBX8A==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.9.27
+      '@firebase/component': 0.6.5
+      '@firebase/util': 1.9.4
+      tslib: 2.6.2
+      undici: 5.26.5
+    dev: false
+
+  /@firebase/util@1.9.4:
+    resolution: {integrity: sha512-WLonYmS1FGHT97TsUmRN3qnTh5TeeoJp1Gg5fithzuAgdZOUtsYECfy7/noQ3llaguios8r5BuXSEiK82+UrxQ==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
+  /@firebase/webchannel-wrapper@0.10.5:
+    resolution: {integrity: sha512-eSkJsnhBWv5kCTSU1tSUVl9mpFu+5NXXunZc83le8GMjMlsWwQArSc7cJJ4yl+aDFY0NGLi0AjZWMn1axOrkRg==}
+    dev: false
+
+  /@grpc/grpc-js@1.9.14:
+    resolution: {integrity: sha512-nOpuzZ2G3IuMFN+UPPpKrC6NsLmWsTqSsm66IRfnBt1D4pwTqE27lmbpcPM+l2Ua4gE7PfjRHI6uedAy7hoXUw==}
+    engines: {node: ^8.13.0 || >=10.10.0}
+    dependencies:
+      '@grpc/proto-loader': 0.7.10
+      '@types/node': 20.8.4
+    dev: false
+
+  /@grpc/proto-loader@0.7.10:
+    resolution: {integrity: sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      lodash.camelcase: 4.3.0
+      long: 5.2.3
+      protobufjs: 7.2.6
+      yargs: 17.7.2
+    dev: false
+
   /@headlessui/react@1.7.17(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==}
     engines: {node: '>=10'}
@@ -624,6 +1094,49 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
+  /@protobufjs/aspromise@1.1.2:
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+    dev: false
+
+  /@protobufjs/base64@1.1.2:
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+    dev: false
+
+  /@protobufjs/codegen@2.0.4:
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+    dev: false
+
+  /@protobufjs/eventemitter@1.1.0:
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+    dev: false
+
+  /@protobufjs/fetch@1.1.0:
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+    dev: false
+
+  /@protobufjs/float@1.0.2:
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+    dev: false
+
+  /@protobufjs/inquire@1.1.0:
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+    dev: false
+
+  /@protobufjs/path@1.1.2:
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+    dev: false
+
+  /@protobufjs/pool@1.1.0:
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+    dev: false
+
+  /@protobufjs/utf8@1.1.0:
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+    dev: false
+
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
@@ -1042,7 +1555,6 @@ packages:
     resolution: {integrity: sha512-ZVPnqU58giiCjSxjVUESDtdPk4QR5WQhhINbc9UBrKLU68MX5BF6kbQzTrkwbolyr0X8ChBpXfavr5mZFKZQ5A==}
     dependencies:
       undici-types: 5.25.3
-    dev: true
 
   /@types/prop-types@15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -1235,7 +1747,6 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
@@ -1257,7 +1768,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
@@ -1591,6 +2101,15 @@ packages:
       execa: 0.8.0
     dev: false
 
+  /cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: false
+
   /clsx@2.1.0:
     resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
     engines: {node: '>=6'}
@@ -1606,14 +2125,12 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
@@ -2125,7 +2642,6 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -2241,7 +2757,6 @@ packages:
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: true
 
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -2784,6 +3299,13 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /faye-websocket@0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      websocket-driver: 0.7.4
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2810,6 +3332,39 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /firebase@10.8.0:
+    resolution: {integrity: sha512-UJpC24vw8JFuHEOQyArBGKTUd7+kohLISCzHyn0M/prP0KOTx2io1eyLliEid330QqnWI7FOlPxoU97qecCSfQ==}
+    dependencies:
+      '@firebase/analytics': 0.10.1(@firebase/app@0.9.27)
+      '@firebase/analytics-compat': 0.2.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/app': 0.9.27
+      '@firebase/app-check': 0.8.2(@firebase/app@0.9.27)
+      '@firebase/app-check-compat': 0.3.9(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/app-compat': 0.2.27
+      '@firebase/app-types': 0.9.0
+      '@firebase/auth': 1.6.0(@firebase/app@0.9.27)
+      '@firebase/auth-compat': 0.5.2(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27)
+      '@firebase/database': 1.0.3
+      '@firebase/database-compat': 1.0.3
+      '@firebase/firestore': 4.4.2(@firebase/app@0.9.27)
+      '@firebase/firestore-compat': 0.3.25(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27)
+      '@firebase/functions': 0.11.1(@firebase/app@0.9.27)
+      '@firebase/functions-compat': 0.3.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/installations': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/installations-compat': 0.2.5(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27)
+      '@firebase/messaging': 0.12.6(@firebase/app@0.9.27)
+      '@firebase/messaging-compat': 0.2.6(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/performance': 0.6.5(@firebase/app@0.9.27)
+      '@firebase/performance-compat': 0.2.5(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/remote-config': 0.4.5(@firebase/app@0.9.27)
+      '@firebase/remote-config-compat': 0.2.5(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)
+      '@firebase/storage': 0.12.1(@firebase/app@0.9.27)
+      '@firebase/storage-compat': 0.3.4(@firebase/app-compat@0.2.27)(@firebase/app-types@0.9.0)(@firebase/app@0.9.27)
+      '@firebase/util': 1.9.4
+    transitivePeerDependencies:
+      - '@react-native-async-storage/async-storage'
+    dev: false
+
   /flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2897,6 +3452,11 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: false
+
   /get-intrinsic@1.2.2:
     resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
     dependencies:
@@ -3242,6 +3802,10 @@ packages:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
     dev: false
 
+  /http-parser-js@0.5.8:
+    resolution: {integrity: sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==}
+    dev: false
+
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -3249,6 +3813,10 @@ packages:
       safer-buffer: 2.1.2
     dev: false
 
+  /idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+    dev: false
+
   /ignore@5.3.0:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
@@ -3426,7 +3994,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@@ -3738,6 +4305,10 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: false
+
   /lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
@@ -3750,6 +4321,10 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
 
+  /long@5.2.3:
+    resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
+    dev: false
+
   /longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -5362,6 +5937,25 @@ packages:
     resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
     dev: false
 
+  /protobufjs@7.2.6:
+    resolution: {integrity: sha512-dgJaEDDL6x8ASUZ1YqWciTRrdOuYNzoOf27oHNfdyvKqHr5i0FV7FSLU+aIeFjyFgVxrpTOtQUi0BLLBymZaBw==}
+    engines: {node: '>=12.0.0'}
+    requiresBuild: true
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/node': 20.8.4
+      long: 5.2.3
+    dev: false
+
   /protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
     dev: false
@@ -5579,6 +6173,11 @@ packages:
     resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==}
     dev: false
 
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -5650,7 +6249,6 @@ packages:
 
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
 
   /safe-regex-test@1.0.0:
     resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
@@ -5806,7 +6404,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -5882,7 +6479,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
@@ -6184,7 +6780,13 @@ packages:
 
   /undici-types@5.25.3:
     resolution: {integrity: sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==}
-    dev: true
+
+  /undici@5.26.5:
+    resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
+    engines: {node: '>=14.0'}
+    dependencies:
+      '@fastify/busboy': 2.1.0
+    dev: false
 
   /unified-engine@11.2.0:
     resolution: {integrity: sha512-H9wEDpBSM0cpEUuuYAOIiPzLCVN0pjASZZ6FFNzgzYS/HHzl9tArk/ereOMGtcF8m8vgjzw+HrU3YN7oenT7Ww==}
@@ -6506,6 +7108,20 @@ packages:
     resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}
     dev: false
 
+  /websocket-driver@0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      http-parser-js: 0.5.8
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+    dev: false
+
+  /websocket-extensions@0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
@@ -6576,7 +7192,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -6591,6 +7206,11 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+    dev: false
+
   /yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
     dev: false
@@ -6604,6 +7224,24 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
+  /yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.1
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+    dev: false
+
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
diff --git a/src/design-system/components/atoms/button.tsx b/src/design-system/components/atoms/button.tsx
index 0c6f81bf1..3223e697d 100644
--- a/src/design-system/components/atoms/button.tsx
+++ b/src/design-system/components/atoms/button.tsx
@@ -54,6 +54,7 @@ interface IBaseButton {
   className?: string;
   value?: any;
   toLabel?: string;
+  target?: string;
 }
 
 export interface IIconButton extends IBaseButton {
@@ -81,7 +82,7 @@ export const ButtonBase = React.forwardRef<
   Omit<IButton, 'size'> & { size?: ButtonSizes | IconButtonSizes }
 >((props, ref) => {
   const {
-    onClick = () => {},
+    onClick = () => { },
     to = '',
     LinkComponent = motion.button,
     disabled = false,
@@ -103,6 +104,7 @@ export const ButtonBase = React.forwardRef<
     loading = false,
     tabIndex,
     toLabel,
+    target,
     ...mprops
   } = props;
 
@@ -132,14 +134,15 @@ export const ButtonBase = React.forwardRef<
       {...(Component === 'a'
         ? { href: to }
         : toLabel
-        ? { [toLabel]: to }
-        : { to })}
+          ? { [toLabel]: to }
+          : { to })}
       disabled={disabled}
       onClick={onClick}
       {...extraProps}
       ref={ref}
       type={type}
       tabIndex={tabIndex}
+      target={target}
       className={cn(
         'pulsable',
         {
@@ -147,6 +150,9 @@ export const ButtonBase = React.forwardRef<
           'w-fit': !block,
           selected,
         },
+        {
+          'pointer-events-none': loading,
+        },
         {
           'bodyMd-medium': !variant?.includes('plain'),
           bodyMd: variant?.includes('plain'),
@@ -289,12 +295,12 @@ export const ButtonBase = React.forwardRef<
               variant === 'critical-plain' ||
               variant === 'secondary-plain'
             ) && {
-              'py-md px-lg': size === 'sm',
-              'py-lg px-2xl': size === 'md',
-              'py-xl px-4xl': size === 'lg',
-              'py-2xl px-6xl': size === 'xl',
-              'py-2xl px-9xl': size === '2xl',
-            }),
+            'py-md px-lg': size === 'sm',
+            'py-lg px-2xl': size === 'md',
+            'py-xl px-4xl': size === 'lg',
+            'py-2xl px-6xl': size === 'xl',
+            'py-2xl px-9xl': size === '2xl',
+          }),
         },
         {
           ...(!iconOnly &&
@@ -302,10 +308,10 @@ export const ButtonBase = React.forwardRef<
               variant === 'primary-plain' ||
               variant === 'critical-plain' ||
               variant === 'secondary-plain') && {
-              'px-md py-sm': size === 'sm',
-              'py-sm px-md': size === 'md',
-              'py-md px-lg': size === 'lg',
-            }),
+            'px-md py-sm': size === 'sm',
+            'py-sm px-md': size === 'md',
+            'py-md px-lg': size === 'lg',
+          }),
         },
         {
           'p-lg': iconOnly && size === 'md',
diff --git a/src/design-system/components/utils.tsx b/src/design-system/components/utils.tsx
index 24f6e086e..2ff2292fc 100644
--- a/src/design-system/components/utils.tsx
+++ b/src/design-system/components/utils.tsx
@@ -26,6 +26,10 @@ export function useMapper<A, B>(
   return useMemo(() => array.map(transform), [array]);
 }
 
+export function useAppend<A, B>(arrayA: A[], arrayB: B[]) {
+  return useMemo(() => [...arrayA, ...arrayB], [arrayA, arrayB]);
+}
+
 export function titleCase(string: string) {
   if (!string) return string;
   if (typeof string !== 'string')
diff --git a/src/design-system/index.css b/src/design-system/index.css
index 0b12aa2bf..f748f2404 100644
--- a/src/design-system/index.css
+++ b/src/design-system/index.css
@@ -28,7 +28,7 @@ select{
     print-color-adjust: exact;
 }
 
-#loadOverlay{display: none;}
+#loadOverlay{display: none!important;}
 
 .pulse-element{
     @apply !text-transparent !relative !border-0
@@ -53,4 +53,4 @@ select{
       margin-inline: 0px !important;
       overflow-x: hidden;
     }
-  }
\ No newline at end of file
+  }
diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql
index da4b64fbf..c202c8c67 100644
--- a/src/generated/gql/sdl.graphql
+++ b/src/generated/gql/sdl.graphql
@@ -2920,6 +2920,7 @@ type Mutation {
   infra_deleteHelmRelease(clusterName: String!, releaseName: String!): Boolean!
   infra_deleteNodePool(clusterName: String!, poolName: String!): Boolean!
   infra_deleteProviderSecret(secretName: String!): Boolean!
+  infra_deletePV(clusterName: String!, pvName: String!): Boolean!
   infra_updateCluster(cluster: ClusterIn!): Cluster
   infra_updateClusterManagedService(clusterName: String!, service: ClusterManagedServiceIn!): ClusterManagedService
   infra_updateDomainEntry(domainEntry: DomainEntryIn!): DomainEntry
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index b979d299a..0e6410150 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -2012,6 +2012,7 @@ export type ConsoleGetNodePoolQueryVariables = Exact<{
 
 export type ConsoleGetNodePoolQuery = {
   infra_getNodePool?: {
+    id: string;
     clusterName: string;
     creationTime: any;
     displayName: string;
@@ -2100,6 +2101,7 @@ export type ConsoleListNodePoolsQuery = {
     edges: Array<{
       cursor: string;
       node: {
+        id: string;
         clusterName: string;
         creationTime: any;
         displayName: string;
@@ -2309,6 +2311,14 @@ export type ConsoleCloneEnvironmentMutation = {
   core_cloneEnvironment?: { id: string };
 };
 
+export type ConsoleRestartAppQueryVariables = Exact<{
+  projectName: Scalars['String']['input'];
+  envName: Scalars['String']['input'];
+  appName: Scalars['String']['input'];
+}>;
+
+export type ConsoleRestartAppQuery = { core_restartApp: boolean };
+
 export type ConsoleCreateAppMutationVariables = Exact<{
   projectName: Scalars['String']['input'];
   envName: Scalars['String']['input'];
@@ -4029,6 +4039,13 @@ export type ConsoleListPvsQuery = {
   };
 };
 
+export type ConsoleDeletePvMutationVariables = Exact<{
+  clusterName: Scalars['String']['input'];
+  pvName: Scalars['String']['input'];
+}>;
+
+export type ConsoleDeletePvMutation = { infra_deletePV: boolean };
+
 export type ConsoleListBuildRunsQueryVariables = Exact<{
   repoName: Scalars['String']['input'];
   search?: InputMaybe<SearchBuildRuns>;
@@ -5045,6 +5062,7 @@ export type AuthCli_GetDeviceQuery = {
     displayName: string;
     clusterName?: string;
     projectName?: string;
+    environmentName?: string;
     metadata?: { name: string };
     spec?: {
       activeNamespace?: string;