diff --git a/Dockerfile b/Dockerfile
index 8383ae180..5a7ac1ae0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,9 @@
-FROM node:20.8.1-alpine as remix
+FROM node:20.8.1-alpine AS remix
 WORKDIR  /app
 COPY ./package-production.json ./package.json
 RUN npm i --frozen-lockfile
 
-FROM node:20.8.1-alpine as install
+FROM node:20.8.1-alpine AS install
 RUN npm i -g pnpm
 WORKDIR  /app
 COPY ./package.json ./package.json
@@ -19,7 +19,7 @@ COPY ./src/generated/plugin/package.json  ./src/generated/plugin/pnpm-lock.yaml
 
 RUN pnpm i -p --frozen-lockfile
 
-FROM node:20.8.1-alpine as build
+FROM node:20.8.1-alpine AS build
 RUN npm i -g pnpm
 WORKDIR  /app
 ARG APP
diff --git a/src/apps/console/components/alert-modal.tsx b/src/apps/console/components/alert-modal.tsx
index 082d98375..aae883a60 100644
--- a/src/apps/console/components/alert-modal.tsx
+++ b/src/apps/console/components/alert-modal.tsx
@@ -13,6 +13,7 @@ export interface IAlertModal {
   title: ReactNode;
   okText?: string;
   okDisabled?: boolean;
+  showOkButton?: boolean;
   cancelText?: string;
   variant?: ButtonVariants;
   footer?: boolean;
@@ -28,6 +29,7 @@ const AlertModal = ({
   title,
   okDisabled = false,
   okText = 'Delete',
+  showOkButton = true,
   cancelText = 'Cancel',
   variant = 'critical',
 }: IAlertModal) => {
@@ -55,14 +57,16 @@ const AlertModal = ({
         {footer && (
           <AlertDialog.Footer>
             <AlertDialog.Button variant="basic" content={cancelText} closable />
-            <AlertDialog.Button
-              type="submit"
-              disabled={okDisabled}
-              variant={variant}
-              content={okText}
-              closable={false}
-              loading={isLoading}
-            />
+            {showOkButton && (
+              <AlertDialog.Button
+                type="submit"
+                disabled={okDisabled}
+                variant={variant}
+                content={okText}
+                closable={false}
+                loading={isLoading}
+              />
+            )}
           </AlertDialog.Footer>
         )}
       </form>
diff --git a/src/apps/console/hooks/use-cluster-status-depricated.tsx b/src/apps/console/hooks/use-cluster-status-depricated.tsx
deleted file mode 100644
index 485b0d2ad..000000000
--- a/src/apps/console/hooks/use-cluster-status-depricated.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useParams } from '@remix-run/react';
-import {
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { useConsoleApi } from '../server/gql/api-provider';
-import { IClustersStatus } from '../server/gql/queries/cluster-queries';
-import { ExtractNodeType, parseNodes } from '../server/r-utils/common';
-
-type IClusterMap = { [key: string]: ExtractNodeType<IClustersStatus> };
-
-const ClusterStatusContext = createContext<{
-  clusters: IClusterMap;
-  setClusters: Dispatch<SetStateAction<IClusterMap>>;
-}>({ clusters: {}, setClusters: () => {} });
-
-const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
-  const [clusters, setClusters] = useState<IClusterMap>({});
-  const api = useConsoleApi();
-  const [update, setUpdate] = useState(false);
-
-  const { account } = useParams();
-
-  const topic = useCallback(() => {
-    return Object.keys(clusters).map((c) => `account:${account}.cluster:${c}`);
-  }, [clusters])();
-
-  const listCluster = useCallback(async () => {
-    try {
-      const { data } = await api.listClusterStatus({
-        pagination: {
-          first: 500,
-        },
-        search: {
-          allClusters: {
-            exact: true,
-            matchType: 'exact',
-          },
-        },
-      });
-      const parsed = parseNodes(data).reduce((acc, c) => {
-        acc[c.metadata.name] = c;
-        return acc;
-      }, {} as IClusterMap);
-      setClusters(parsed);
-      return parsed;
-    } catch (err) {
-      console.error(err);
-      return false;
-    }
-  }, []);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      listCluster();
-    }, 30 * 1000);
-
-    const onlineEvent = () => {
-      setTimeout(() => {
-        listCluster();
-      }, 3000);
-    };
-
-    window.addEventListener('online', onlineEvent);
-
-    return () => {
-      clearInterval(interval);
-      window.removeEventListener('online', onlineEvent);
-    };
-  }, []);
-
-  useDebounce(
-    () => {
-      listCluster();
-    },
-    3000,
-    [update]
-  );
-
-  useSocketWatch(() => {
-    setUpdate((p) => !p);
-  }, topic);
-
-  return (
-    <ClusterStatusContext.Provider
-      value={useMemo(
-        () => ({ clusters, setClusters }),
-        [clusters, setClusters]
-      )}
-    >
-      {children}
-    </ClusterStatusContext.Provider>
-  );
-};
-
-export default ClusterStatusProvider;
-
-export const useClusterStatusV2 = () => {
-  return useContext(ClusterStatusContext);
-};
diff --git a/src/apps/console/hooks/use-cluster-status-v3.tsx b/src/apps/console/hooks/use-cluster-status-v3.tsx
index a73651201..f6a4783fa 100644
--- a/src/apps/console/hooks/use-cluster-status-v3.tsx
+++ b/src/apps/console/hooks/use-cluster-status-v3.tsx
@@ -1,3 +1,4 @@
+import { useOutletContext, useParams } from '@remix-run/react';
 import {
   createContext,
   useCallback,
@@ -7,12 +8,10 @@ import {
   useState,
 } from 'react';
 import { ChildrenProps } from '~/components/types';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch';
-import { useOutletContext, useParams } from '@remix-run/react';
-import { useConsoleApi } from '../server/gql/api-provider';
-import { parseName, parseNodes } from '../server/r-utils/common';
+import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { IAccountContext } from '../routes/_main+/$account+/_layout';
+import { useConsoleApi } from '../server/gql/api-provider';
 
 const ctx = createContext<{
   // clusters: {
@@ -43,7 +42,6 @@ const ClusterStatusProvider = ({
   }>({});
 
   const addToWatchList = (clusterNames: string[]) => {
-    console.log('nayak', clusterNames);
     setWatchList((s) => {
       const resp = clusterNames.reduce((acc, curr) => {
         if (!curr) {
@@ -69,7 +67,7 @@ const ClusterStatusProvider = ({
 
     (async () => {
       try {
-        const { data: clusters } = await api.listClusterStatus({
+        const { data: clustersStatus } = await api.listClusterStatus({
           pagination: {
             first: 100,
           },
@@ -85,17 +83,10 @@ const ClusterStatusProvider = ({
           },
         });
 
-        const parsedNodes = parseNodes(clusters);
-
-        const lastOnlineAt = parsedNodes.reduce((acc, curr) => {
-          acc[parseName(curr)] = curr.lastOnlineAt;
-          return acc;
-        }, {} as { [key: string]: string });
-
         setClustersMap((s) => {
           return {
             ...s,
-            ...lastOnlineAt,
+            ...clustersStatus,
           };
         });
       } catch (e) {
@@ -172,7 +163,7 @@ export const useClusterStatusV3 = ({
   clusterNames?: string[];
 }) => {
   const { clustersMap } = useOutletContext<IAccountContext>();
-  const { addToWatchList, removeFromWatchList } = useContext(ctx);
+  const { addToWatchList, removeFromWatchList: _ } = useContext(ctx);
   useDebounce(
     () => {
       if (!clusterName && !clusterNames) {
@@ -186,11 +177,11 @@ export const useClusterStatusV3 = ({
       }
 
       return () => {
-        if (clusterName) {
-          removeFromWatchList([clusterName]);
-        } else if (clusterNames) {
-          removeFromWatchList(clusterNames);
-        }
+        // if (clusterName) {
+        //   removeFromWatchList([clusterName]);
+        // } else if (clusterNames) {
+        //   removeFromWatchList(clusterNames);
+        // }
       };
     },
     100,
diff --git a/src/apps/console/page-components/app/compute.tsx b/src/apps/console/page-components/app/compute.tsx
index b415a4256..0682a7365 100644
--- a/src/apps/console/page-components/app/compute.tsx
+++ b/src/apps/console/page-components/app/compute.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { NumberInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
 import Slider from '~/components/atoms/slider';
@@ -257,7 +256,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
         )}
 
         <div className="flex flex-col gap-3xl pt-3xl">
-          <Button
+          {/* <Button
             size="sm"
             content={
               <span className="truncate text-left">Advanced options</span>
@@ -267,7 +266,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             onClick={() => {
               setAdvancedOptions(!advancedOptions);
             }}
-          />
+          /> */}
 
           {/* {advancedOptions && (
             <Select
diff --git a/src/apps/console/page-components/app/general.tsx b/src/apps/console/page-components/app/general.tsx
index 0c2a58e7d..e01f491ac 100644
--- a/src/apps/console/page-components/app/general.tsx
+++ b/src/apps/console/page-components/app/general.tsx
@@ -261,17 +261,18 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
   }, [readOnlyApp]);
 
   useEffect(() => {
-    if (
-      values.imagePullPolicy !==
-      readOnlyApp.spec.containers[activeContIndex].imagePullPolicy
-    ) {
-      setContainer((s) => {
-        return {
-          ...s,
-          imagePullPolicy: values.imagePullPolicy,
-        };
-      });
-    }
+    console.log('values', values.imagePullPolicy);
+    // if (
+    //   values.imagePullPolicy !==
+    //   readOnlyApp.spec.containers[activeContIndex].imagePullPolicy
+    // ) {
+    setContainer((s) => {
+      return {
+        ...s,
+        imagePullPolicy: values.imagePullPolicy,
+      };
+    });
+    // }
   }, [values.imagePullPolicy]);
 
   return (
diff --git a/src/apps/console/page-components/secret-resource-v2.tsx b/src/apps/console/page-components/secret-resource-v2.tsx
index f755403f1..af3b89afa 100644
--- a/src/apps/console/page-components/secret-resource-v2.tsx
+++ b/src/apps/console/page-components/secret-resource-v2.tsx
@@ -1,17 +1,17 @@
-import { Trash } from '~/console/components/icons';
 import { useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
+import { Trash } from '~/console/components/icons';
 import {
   ExtractNodeType,
   parseName,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
-import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import {
   ListBody,
   ListItem,
@@ -23,10 +23,10 @@ import {
 import DeleteDialog from '../components/delete-dialog';
 import Grid from '../components/grid';
 import ListGridView from '../components/list-grid-view';
+import ListV2 from '../components/listV2';
 import ResourceExtraAction from '../components/resource-extra-action';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { ISecrets } from '../server/gql/queries/secret-queries';
-import ListV2 from '../components/listV2';
 
 const RESOURCE_NAME = 'secret';
 type BaseType = ExtractNodeType<ISecrets>;
@@ -233,7 +233,7 @@ const SecretResourcesV2 = ({
   linkComponent = null,
 }: Omit<IResource, 'onDelete'>) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
-    null,
+    null
   );
 
   const api = useConsoleApi();
@@ -245,9 +245,9 @@ const SecretResourcesV2 = ({
   useWatchReload(
     items.map((i) => {
       return `account:${account}.environment:${environment}.secret:${parseName(
-        i,
+        i
       )}`;
-    }),
+    })
   );
 
   const props: IResource = {
diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index 664030d9e..87e7fe367 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -99,7 +99,7 @@ const NewAccount = () => {
     <form onSubmit={handleSubmit}>
       <MultiStepProgressWrapper
         fillerImage={<FillerCreateTeam />}
-        title="Setup your account!"
+        title="Setup your team!"
         action={
           accountsData?.length === 0 && (
             <Button
@@ -118,11 +118,11 @@ const NewAccount = () => {
         {...(accountsData?.length === 0
           ? {}
           : {
-            backButton: {
-              content: 'Back to teams',
-              to: `/teams`,
-            },
-          })}
+              backButton: {
+                content: 'Back to teams',
+                to: `/teams`,
+              },
+            })}
       >
         <MultiStepProgress.Root
           hasPages={false}
diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
index 94a135156..54b2717d4 100644
--- a/src/apps/console/routes/_a+/teams.tsx
+++ b/src/apps/console/routes/_a+/teams.tsx
@@ -4,23 +4,23 @@ import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { usePagination } from '~/components/molecule/pagination';
 import { cn, generateKey } from '~/components/utils';
-import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
-import { UserMe } from '~/root/lib/server/gql/saved-queries';
-import { IRemixCtx } from '~/root/lib/types/common';
-import { handleError } from '~/root/lib/utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import { IAccounts } from '~/console/server/gql/queries/account-queries';
-import { IInvites } from '~/console/server/gql/queries/access-queries';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import DynamicPagination from '~/console/components/dynamic-pagination';
-import List from '~/console/components/list';
-import { parseName } from '~/console/server/r-utils/common';
+import FillerTeam from '~/console/assets/filler-team';
 import ConsoleAvatar from '~/console/components/console-avatar';
+import DynamicPagination from '~/console/components/dynamic-pagination';
 import { ArrowRight, Users } from '~/console/components/icons';
+import List from '~/console/components/list';
 import SplitWrapper from '~/console/components/split-wrapper';
-import FillerTeam from '~/console/assets/filler-team';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { IInvites } from '~/console/server/gql/queries/access-queries';
+import { IAccounts } from '~/console/server/gql/queries/account-queries';
+import { GQLServerHandler } from '~/console/server/gql/saved-queries';
+import { parseName } from '~/console/server/r-utils/common';
+import { useReload } from '~/root/lib/client/helpers/reloader';
 import { useExtLoaderData } from '~/root/lib/client/hooks/use-custom-loader-data';
+import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
+import { UserMe } from '~/root/lib/server/gql/saved-queries';
+import { IRemixCtx } from '~/root/lib/types/common';
+import { handleError } from '~/root/lib/utils/common';
 
 export const loader = async (ctx: IRemixCtx) => {
   let accounts;
@@ -180,10 +180,10 @@ const Accounts = () => {
         <div className="flex flex-col gap-xl">
           <div className="heading3xl text-text-default">
             Welcome {(user?.name || '').split(' ')[0] || ''}! <br />
-            Select your account.
+            Select your team.
           </div>
           <div className="bodyLg text-text-default">
-            Select an account to proceed to console screens.
+            Select your team to proceed to console screens.
           </div>
         </div>
         <div className="flex flex-col gap-3xl">
diff --git a/src/apps/console/routes/_main+/$account+/_layout.tsx b/src/apps/console/routes/_main+/$account+/_layout.tsx
index dd3b1e530..6b39b4794 100644
--- a/src/apps/console/routes/_main+/$account+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/_layout.tsx
@@ -25,12 +25,13 @@ import {
   IAccount,
   IAccounts,
 } from '~/console/server/gql/queries/account-queries';
-import { parseName, parseNodes } from '~/console/server/r-utils/common';
+import { parseName } from '~/console/server/r-utils/common';
 
 import { Button } from '~/components/atoms/button';
 import OptionList from '~/components/atoms/option-list';
 import { cn } from '~/components/utils';
 import MenuSelect, { SelectItem } from '~/console/components/menu-select';
+import ClusterStatusProvider from '~/console/hooks/use-cluster-status-v3';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
@@ -46,7 +47,6 @@ import withContext from '~/root/lib/app-setup/with-contxt';
 import { useSearch } from '~/root/lib/client/helpers/search-filter';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 import { handleError } from '~/root/lib/utils/common';
-import ClusterStatusProvider from '~/console/hooks/use-cluster-status-v3';
 import { IConsoleRootContext } from '../_layout/_layout';
 
 export const loader = async (ctx: IExtRemixCtx) => {
@@ -87,17 +87,12 @@ export const loader = async (ctx: IExtRemixCtx) => {
       throw clusterError[0];
     }
 
-    const cMaps = parseNodes(clusterList).reduce((acc, c) => {
-      acc[parseName(c)] = c.lastOnlineAt;
-      return acc;
-    }, {} as { [key: string]: string });
-
     acccountData = data;
 
     return withContext(ctx, {
       msvtemplates: msvTemplates,
       account: data,
-      clustersMap: cMaps,
+      clustersMap: clusterList,
     });
   } catch (err) {
     handleError(err);
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx
index a740c78dd..a715a9759 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { NumberInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
@@ -236,7 +235,7 @@ const AppCompute = () => {
         )}
 
         <div className="flex flex-col gap-3xl pt-3xl">
-          <Button
+          {/* <Button
             size="sm"
             content={
               <span className="truncate text-left">Advanced options</span>
@@ -246,7 +245,7 @@ const AppCompute = () => {
             onClick={() => {
               setAdvancedOptions(!advancedOptions);
             }}
-          />
+          /> */}
 
           {/* {advancedOptions && (
             <Select
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx
index 1be2e7888..385490fb8 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx
@@ -292,15 +292,15 @@ const AppDetail = () => {
               ...{
                 ...(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+/env+/$environment+/new-app/app-network.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-network.tsx
index 43a830081..795260ec6 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-network.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-network.tsx
@@ -3,22 +3,20 @@ import { IconButton } from '~/components/atoms/button';
 // import { NumberInput } from '~/components/atoms/input';
 import { usePagination } from '~/components/molecule/pagination';
 import { cn } from '~/components/utils';
-import List from '~/console/components/list';
-import NoResultsFound from '~/console/components/no-results-found';
-import { useAppState } from '~/console/page-components/app-states';
 import { BottomNavigation } from '~/console/components/commons';
-import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
 import {
   ChevronLeft,
   ChevronRight,
   SmileySad,
   X,
 } from '~/console/components/icons';
+import List from '~/console/components/list';
+import NoResultsFound from '~/console/components/no-results-found';
+import { useAppState } from '~/console/page-components/app-states';
 import { FadeIn } from '~/console/page-components/util';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
 // import { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Select from '~/components/atoms/select';
-import useClipboard from '~/root/lib/client/hooks/use-clipboard';
-import { toast } from '~/components/molecule/toast';
 
 interface IExposedPorts {
   port: number;
@@ -254,7 +252,7 @@ export const Network = () => {
   return (
     <div className="flex flex-col gap-3xl p-3xl rounded border border-border-default">
       <ExposedPorts />
-      <ExposedRoute />
+      {/* <ExposedRoute /> */}
     </div>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/secret.$secret/resources.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/secret.$secret/resources.tsx
index dba5f62d4..6b5c6e47d 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/secret.$secret/resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/secret.$secret/resources.tsx
@@ -1,22 +1,21 @@
-import { Eye, PencilLine, SmileySad, Trash } from '~/console/components/icons';
 import { useEffect, useState } from 'react';
 import { cn } from '~/components/utils';
 import AlertModal, { IAlertModal } from '~/console/components/alert-modal';
+import {
+  ListTitleV2,
+  listClass,
+} from '~/console/components/console-list-components';
+import { Eye, PencilLine, SmileySad, Trash } from '~/console/components/icons';
 import ListGridView from '~/console/components/list-grid-view';
+import ListV2 from '~/console/components/listV2';
 import NoResultsFound from '~/console/components/no-results-found';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
 import {
   ICSBase,
   ICSValueExtended,
   IModifiedItem,
   IShowDialog,
 } from '~/console/components/types.d';
-import ResourceExtraAction from '~/console/components/resource-extra-action';
-import {
-  ListTitle,
-  ListTitleV2,
-  listClass,
-} from '~/console/components/console-list-components';
-import ListV2 from '~/console/components/listV2';
 import Handle from './handle';
 
 // const RESOURCE_NAME = 'secret';
@@ -331,7 +330,9 @@ const SecretItemResources = ({
             message: showSecret.data?.value.newvalue
               ? showSecret.data?.value.newvalue
               : showSecret.data?.value.value,
-            footer: false,
+            footer: true,
+            cancelText: 'Close',
+            showOkButton: false,
             data: showSecret.data,
           });
         }}
diff --git a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
index eca7c4073..731a8918c 100644
--- a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
@@ -1,6 +1,7 @@
 import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Badge } from '~/components/atoms/badge';
+import { Chip } from '~/components/atoms/chips';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
@@ -29,6 +30,7 @@ import ResourceExtraAction, {
 } from '~/console/components/resource-extra-action';
 import { SyncStatusV2 } from '~/console/components/sync-status';
 import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status';
+import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IEnvironments } from '~/console/server/gql/queries/environment-queries';
@@ -41,7 +43,6 @@ import {
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
-import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3';
 import CloneEnvironment from './clone-environment';
 
 const RESOURCE_NAME = 'environment';
@@ -215,16 +216,16 @@ const ListView = ({ items, onAction }: IResource) => {
             name: 'name',
             className: listClass.title,
           },
-          {
-            render: () => 'Cluster',
-            name: 'cluster',
-            className: listClass.item,
-          },
           {
             render: () => '',
             name: 'flex-post',
             className: listClass.flex,
           },
+          {
+            render: () => 'Cluster',
+            name: 'cluster',
+            className: 'w-[260px] flex',
+          },
           {
             render: () => 'Status',
             name: 'status',
@@ -251,28 +252,37 @@ const ListView = ({ items, onAction }: IResource) => {
             columns: {
               name: {
                 render: () => (
-                  <ListTitleV2
-                    title={name}
-                    subtitle={id}
-                    avatar={
-                      i.clusterName === '' ? (
-                        <ConsoleAvatar
-                          name={id}
-                          color="none"
-                          isAvatar
-                          icon={<EnvTemplateIconComponent size={20} />}
-                          className="border border-dashed !bg-surface-basic-subdued "
-                        />
-                      ) : (
-                        <ConsoleAvatar
-                          name={id}
-                          color="white"
-                          isAvatar
-                          icon={<EnvIconComponent size={20} />}
-                        />
-                      )
-                    }
-                  />
+                  <div className="flex flex-row gap-lg">
+                    <ListTitleV2
+                      title={name}
+                      subtitle={id}
+                      avatar={
+                        i.clusterName === '' ? (
+                          <ConsoleAvatar
+                            name={id}
+                            color="none"
+                            isAvatar
+                            icon={<EnvTemplateIconComponent size={20} />}
+                            className="border border-dashed !bg-surface-basic-subdued "
+                          />
+                        ) : (
+                          <ConsoleAvatar
+                            name={id}
+                            color="white"
+                            isAvatar
+                            icon={<EnvIconComponent size={20} />}
+                          />
+                        )
+                      }
+                    />
+                    {i.clusterName === '' && (
+                      <Chip
+                        item={{ name: 'template' }}
+                        label="Template"
+                        type="SM"
+                      />
+                    )}
+                  </div>
                 ),
               },
               cluster: {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/handle-cluster-resource.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/handle-cluster-resource.tsx
new file mode 100644
index 000000000..7fa87be94
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/handle-cluster-resource.tsx
@@ -0,0 +1,63 @@
+import { useParams } from '@remix-run/react';
+import { Button } from '~/components/atoms/button';
+import Popup from '~/components/molecule/popup';
+import CodeView from '~/console/components/code-view';
+import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
+
+export const LocalDeviceClusterInstructions = ({
+  show,
+  onClose,
+}: {
+  show: boolean;
+  onClose: () => void;
+}) => {
+  const params = useParams();
+  ensureAccountClientSide(params);
+
+  return (
+    <Popup.Root onOpenChange={onClose} show={show} className="!w-[800px]">
+      <Popup.Header>Instructions to add your local device</Popup.Header>
+      <Popup.Content>
+        <form className="flex flex-col gap-2xl">
+          <div className="flex flex-col gap-sm text-start ">
+            <span className="flex flex-wrap items-center gap-md py-lg">
+              1. Download and install kloudlite cli:
+            </span>
+            <CodeView
+              preClassName="!overflow-none text-wrap break-words"
+              copy
+              data="curl 'https://kl.kloudlite.io/kloudlite/kl!?select=kl' | bash"
+            />
+
+            <span className="flex flex-wrap items-center gap-md py-lg">
+              2. Login to your account:
+            </span>
+            <CodeView
+              preClassName="!overflow-none text-wrap break-words"
+              copy
+              language="bash"
+              data={`
+kl auth login
+# After login, you will be prompted to select your account.
+                `.trim()}
+            />
+
+            <span className="flex flex-wrap items-center gap-md py-lg">
+              3. Attach Compute:
+            </span>
+            <CodeView
+              preClassName="!overflow-none text-wrap break-words"
+              copy
+              data="kl up"
+            />
+
+            {/* {data.url} */}
+          </div>
+        </form>
+      </Popup.Content>
+      <Popup.Footer>
+        <Button variant="primary-outline" content="close" onClick={onClose} />
+      </Popup.Footer>
+    </Popup.Root>
+  );
+};
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 8173d0674..f783c1a98 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -1,5 +1,5 @@
 import { defer } from '@remix-run/node';
-import { Link, useLoaderData } from '@remix-run/react';
+import { useLoaderData } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button.jsx';
 import { EmptyClusterImage } from '~/console/components/empty-resource-images';
@@ -15,6 +15,7 @@ import fake from '~/root/fake-data-generator/fake';
 import { IRemixCtx } from '~/root/lib/types/common';
 import HandleByokCluster from '../byok-cluster/handle-byok-cluster';
 import ClusterResourcesV2 from './cluster-resources-v2';
+import { LocalDeviceClusterInstructions } from './handle-cluster-resource';
 import Tools from './tools';
 
 export const loader = async (ctx: IRemixCtx) => {
@@ -69,6 +70,7 @@ const ClusterComponent = ({
 }) => {
   const [clusterType, setClusterType] = useState('All');
   const byokClusters = parseNodes(clustersData);
+  const [visible, setVisible] = useState(false);
 
   const getEmptyState = ({
     byokClustersCount,
@@ -88,23 +90,33 @@ const ClusterComponent = ({
       return {
         image: <EmptyClusterImage />,
         is: true,
-        title: 'This is where you’ll attach your compute or local devices.',
+        title: 'This is where you’ll manage your compute.',
         content: (
-          <p>
-            You can attach a new compute and manage the listed compute.
-            <br />
-            Follow the instructions to attach your{' '}
-            <Link
-              to="https://github.com/kloudlite/kl"
-              className="text-text-default"
-            >
-              <span className="bodyMd-semibold underline underline-offset-1 text-text-default">
-                local device
+          <div className=" flex flex-col items-center gap-lg">
+            You can attach any kubernetes cluster.
+            <CreateClusterButton />
+            <div className="flex py-lg gap-xl items-center">
+              <span className="flex w-4xl h-md bg-surface-basic-pressed" />
+              <span className="bodySm-semibold">OR</span>
+              <span className="flex w-4xl h-md bg-surface-basic-pressed" />
+            </div>
+            <div className="inline-block">
+              Follow the{' '}
+              <span
+                onClick={() => {
+                  setVisible(true);
+                }}
+                className="bodyMd-semibold underline underline-offset-1 text-text-default cursor-pointer"
+              >
+                Instructions{' '}
               </span>
-            </Link>{' '}
-          </p>
+              to attach your local device.
+            </div>
+            <LocalDeviceClusterInstructions
+              {...{ show: visible, onClose: () => setVisible(false) }}
+            />
+          </div>
         ),
-        action: <CreateClusterButton />,
       };
     }
 
diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx
index 2677ea8f4..306429ddd 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx
@@ -39,11 +39,11 @@ const Images = () => {
     <>
       <LoadingComp
         data={promise}
-      // skeletonData={{
-      //   imagesData: fake.ConsoleListRegistryImagesQuery.core_listRegistryImages
-      //     as any,
+        // skeletonData={{
+        //   imagesData: fake.ConsoleListRegistryImagesQuery.core_listRegistryImages
+        //     as any,
 
-      // }}
+        // }}
       >
         {({ imagesData }) => {
           const images = parseNodes(imagesData);
@@ -55,7 +55,7 @@ const Images = () => {
                 action: images.length > 0 && (
                   <Button
                     variant="outline"
-                    size='md'
+                    size="md"
                     content="Add your images"
                     prefix={<Info />}
                     onClick={() => {
diff --git a/src/apps/console/server/gql/queries/cluster-queries.ts b/src/apps/console/server/gql/queries/cluster-queries.ts
index d3024c581..92cc42d68 100644
--- a/src/apps/console/server/gql/queries/cluster-queries.ts
+++ b/src/apps/console/server/gql/queries/cluster-queries.ts
@@ -11,6 +11,7 @@ import {
   ConsoleGetClusterQuery,
   ConsoleGetClusterQueryVariables,
   ConsoleGetClusterStatusQuery,
+  ConsoleGetClusterStatusQueryVariables,
   ConsoleGetKubeConfigQuery,
   ConsoleListAllClustersQuery,
   ConsoleListAllClustersQueryVariables,
@@ -22,8 +23,8 @@ import {
   ConsoleListDnsHostsQueryVariables,
   ConsoleUpdateClusterMutation,
   ConsoleUpdateClusterMutationVariables,
-  ConsoleGetClusterStatusQueryVariables,
 } from '~/root/src/generated/gql/server';
+import { parseName, parseNodes } from '../../r-utils/common';
 
 export type ICluster = NN<ConsoleGetClusterQuery['infra_getCluster']>;
 export type IClusters = NN<ConsoleListClustersQuery['infra_listClusters']>;
@@ -544,8 +545,12 @@ export const clusterQueries = (executor: IExecutor) => ({
       }
     `,
     {
-      transformer: (data: ConsoleListClusterStatusQuery) =>
-        data.infra_listBYOKClusters,
+      transformer: (data: ConsoleListClusterStatusQuery) => {
+        return parseNodes(data.infra_listBYOKClusters).reduce((acc, curr) => {
+          acc[parseName(curr)] = curr.lastOnlineAt;
+          return acc;
+        }, {} as { [key: string]: string });
+      },
       vars(_: ConsoleListClusterStatusQueryVariables) {},
     }
   ),
diff --git a/src/design-system/components/atoms/chips.tsx b/src/design-system/components/atoms/chips.tsx
index 7177fb601..c8bb187fd 100644
--- a/src/design-system/components/atoms/chips.tsx
+++ b/src/design-system/components/atoms/chips.tsx
@@ -16,6 +16,7 @@ type ChipTypes =
   | 'BASIC'
   | 'REMOVABLE'
   | 'CLICKABLE'
+  | 'SM'
   | (string & NonNullable<unknown>);
 
 type ItemType = any;
@@ -58,9 +59,9 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
       label,
       disabled = false,
       compType = 'BASIC',
-      onRemove = (_) => {},
+      onRemove = (_) => { },
       prefix = null,
-      onClick = (_) => {},
+      onClick = (_) => { },
       Component,
       loading = false,
       ...mprops
@@ -100,6 +101,10 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
             'pr-md pl-lg py-md': compType === 'REMOVABLE',
             'px-lg py-md': compType !== 'REMOVABLE',
           },
+          {
+            'pr-md pl-md py-sm': compType === 'SM',
+            // 'px-lg py-md': compType !== 'SM',
+          },
           {
             'hover:bg-surface-basic-hovered active:bg-surface-basic-pressed focus-visible:ring-2 focus-visible:ring-border-focus':
               compType === 'CLICKABLE',
@@ -125,7 +130,15 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
             <Spinner size={12} color="currentColor" />
           </span>
         )}
-        <span className="flex items-center">{label}</span>
+        <span
+          className={
+            compType === 'SM'
+              ? 'flex items-center text-text-default'
+              : 'flex items-center'
+          }
+        >
+          {label}
+        </span>
         {compType === 'REMOVABLE' && (
           <RovingFocusGroup.Item asChild focusable>
             <button
@@ -218,8 +231,8 @@ export const Chip = forwardRef<HTMLButtonElement, IChip>(
 );
 
 export const ChipGroup = ({
-  onClick = (_) => {},
-  onRemove = (_) => {},
+  onClick = (_) => { },
+  onRemove = (_) => { },
   children,
   className = '',
 }: IChipGroup) => {