diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
deleted file mode 100644
index e2de938bf..000000000
--- a/.github/workflows/release.yml
+++ /dev/null
@@ -1,61 +0,0 @@
-name: Release
-
-on:
-  workflow_dispatch:
-
-#  push:
-#    tags: ['r*']
-
-#  pull_request:
-
-# permissions:
-#   contents: write
-#   id-token: write
-#   pages: write
-
-
-jobs:
-  build-all:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Check Out Code
-      uses: actions/checkout@v2
-
-    - name: Set up Docker
-      uses: docker/setup-buildx-action@v1
-
-    - name: Set up Task
-      run: |
-        sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin
-        echo "Task version: $(task --version)"
-
-    - name: Login to DockerHub
-      uses: docker/login-action@v3
-      with:
-        registry: https://ghcr.io
-        username: ${{ secrets.DOCKER_USERNAME }}
-        password: ${{ secrets.DOCKER_TOKEN }}
-
-    -
-      name: Extract branch or tag name
-      id: extract_branch
-      run: |+
-        name=${GITHUB_REF##*/}
-        echo "branch_or_tag=v${name:1}" >> $GITHUB_OUTPUT
-
-
-    - name: Build All
-      run: |
-        task docker-build-all  tag=${{ steps.extract_branch.outputs.branch_or_tag }}
-
-    -
-      name: Create Release
-      id: create_release
-      uses: actions/create-release@v1
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        tag_name: ${{ steps.extract_branch.outputs.branch_or_tag }}
-        release_name: Release ${{ steps.extract_branch.outputs.branch_or_tag }}
-        draft: false
-        prerelease: true
diff --git a/.gitignore b/.gitignore
index fb61cdf7a..f02da370b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,9 @@ public/**
 !public/package.json
 .tmp
 
+out
+.firebase
+
 storybook-dist
 
 tsconfig-compile.tsbuildinfo
diff --git a/src/apps/auth/server/gql/queries/device-queries.ts b/src/apps/auth/server/gql/queries/device-queries.ts
index ca4147aa1..da96ab7b4 100644
--- a/src/apps/auth/server/gql/queries/device-queries.ts
+++ b/src/apps/auth/server/gql/queries/device-queries.ts
@@ -111,6 +111,7 @@ export const vpnQueries = (executor: IExecutor) => ({
           }
           clusterName
           projectName
+          environmentName
           spec {
             activeNamespace
             disabled
diff --git a/src/apps/console/components/delete-dialog.tsx b/src/apps/console/components/delete-dialog.tsx
index 0e6b97329..c8fcc77c2 100644
--- a/src/apps/console/components/delete-dialog.tsx
+++ b/src/apps/console/components/delete-dialog.tsx
@@ -59,6 +59,7 @@ const DeleteDialog = ({
                 setInputName(target.value);
               }}
               disabled={loading}
+              autoComplete="off"
             />
           </div>
         </div>
diff --git a/src/apps/console/components/menu-select.tsx b/src/apps/console/components/menu-select.tsx
index 0804b8a3b..6b552756e 100644
--- a/src/apps/console/components/menu-select.tsx
+++ b/src/apps/console/components/menu-select.tsx
@@ -11,13 +11,10 @@ interface ISelectItem {
   active?: boolean;
 }
 
-const SelectItem = React.forwardRef<HTMLDivElement, ISelectItem>(
+export const SelectItem = React.forwardRef<HTMLDivElement, ISelectItem>(
   ({ children, className, ...props }, forwardedRef) => {
     return (
       <Select.Item
-        onClick={(e) => {
-          console.log(e);
-        }}
         className={cn(
           'group relative flex flex-row gap-xl items-center bodyMd gap cursor-pointer select-none py-lg px-xl text-text-default outline-none transition-colors focus:bg-surface-basic-hovered hover:bg-surface-basic-hovered data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled data-[state=checked]:bg-surface-basic-active',
           className
@@ -37,6 +34,7 @@ interface IMenuSelect {
   items: {
     label: ReactNode;
     value: string;
+    render?: () => ReactNode;
   }[];
   onChange?: (value: string) => void;
   onClick?: (value: string) => void;
@@ -83,15 +81,13 @@ const MenuSelect = ({
                 >
                   {items.map((item) => (
                     <div key={item.value} onClick={() => onClick?.(item.value)}>
-                      <SelectItem key={item.value} value={item.value}>
-                        <div
-                          onClick={() => {
-                            console.log('clicked');
-                          }}
-                        >
-                          {item.label}
-                        </div>
-                      </SelectItem>
+                      {item.render ? (
+                        item.render()
+                      ) : (
+                        <SelectItem key={item.value} value={item.value}>
+                          <div>{item.label}</div>
+                        </SelectItem>
+                      )}
                     </div>
                   ))}
                 </Select.Viewport>
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 b840c5cd4..2ed12a137 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,8 @@ 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 { IdSelector } from '~/console/components/id-selector';
 import ProgressWrapper from '~/console/components/progress-wrapper';
+import { NameIdView } from '~/console/components/name-id-view';
 
 const NewCloudProvider = () => {
   const { a: accountName } = useParams();
@@ -27,6 +27,7 @@ const NewCloudProvider = () => {
       name: '',
       provider: providers[0],
       awsAccountId: '',
+      isNameError: false,
     },
     validationSchema: Yup.object({
       displayName: Yup.string().required(),
@@ -35,6 +36,7 @@ const NewCloudProvider = () => {
         label: Yup.string().required(),
         value: Yup.string().required(),
       }).required(),
+      awsAccountId: Yup.string().required('AccountId is required.'),
     }),
     onSubmit: async (val) => {
       const addProvider = async () => {
@@ -95,24 +97,16 @@ const NewCloudProvider = () => {
             the internet.
           </div>
           <div className="flex flex-col">
-            <TextInput
-              label="Name"
-              onChange={handleChange('displayName')}
-              error={!!errors.displayName}
-              message={errors.displayName}
-              value={values.displayName}
-              name="provider-secret-name"
-              size="lg"
-            />
-            <IdSelector
-              name={values.displayName}
+            <NameIdView
+              nameErrorLabel="isNameError"
               resType="providersecret"
-              onChange={(id) => {
-                handleChange('name')({ target: { value: id } });
-              }}
-              className="pt-xl"
+              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}
diff --git a/src/apps/console/routes/_main+/$account+/_layout.tsx b/src/apps/console/routes/_main+/$account+/_layout.tsx
index 87ec4feec..3b180815c 100644
--- a/src/apps/console/routes/_main+/$account+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/_layout.tsx
@@ -1,7 +1,5 @@
 import {
-  ArrowCounterClockwise,
   ArrowsCounterClockwise,
-  CaretDownFill,
   ChevronUpDown,
   Copy,
   GearSix,
@@ -18,7 +16,7 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import Popup from '~/components/molecule/popup';
 import logger from '~/root/lib/client/helpers/log';
 import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
@@ -29,25 +27,23 @@ 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 {
   ensureAccountClientSide,
   ensureAccountSet,
 } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import MenuSelect from '~/console/components/menu-select';
+import MenuSelect, { SelectItem } from '~/console/components/menu-select';
 import { BreadcrumButtonContent } from '~/console/utils/commons';
 import OptionList from '~/components/atoms/option-list';
 import { IConsoleDevicesForUser } from '~/console/server/gql/queries/console-vpn-queries';
 import { Button, IconButton } from '~/components/atoms/button';
 import HandleConsoleDevices, {
-  QRCodeView,
   ShowWireguardConfig,
   decodeConfig,
   switchEnvironment,
 } from '~/console/page-components/handle-console-devices';
-import Profile from '~/components/molecule/profile';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { handleError } from '~/root/lib/utils/common';
@@ -59,14 +55,42 @@ const AccountMenu = ({ account }: { account: IAccount }) => {
   const accounts = useDataFromMatches<IAccounts>('accounts', {});
   const { account: accountName } = useParams();
   const navigate = useNavigate();
+  const [acc, setAcc] = useState<
+    { label: string; value: string; render?: () => ReactNode }[]
+  >([]);
+
+  useEffect(() => {
+    setAcc([
+      ...accounts.map((acc) => ({
+        label: acc.displayName,
+        value: parseName(acc),
+      })),
+      {
+        label: 'create new team',
+        value: 'newteam',
+        render: () => (
+          <SelectItem
+            className="!flex-row items-center !text-text-primary border-t border-border-default"
+            value="newteam"
+          >
+            <div className="flex flex-row items-center gap-xl">
+              <Plus size={16} /> create new team
+            </div>{' '}
+          </SelectItem>
+        ),
+      },
+    ]);
+  }, [accounts]);
+
   return (
     <MenuSelect
       value={accountName}
-      items={accounts.map((acc) => ({
-        label: acc.displayName,
-        value: parseName(acc),
-      }))}
+      items={acc}
       onChange={(value) => {
+        if (value === 'newteam') {
+          navigate('/new-team');
+          return;
+        }
         navigate(`/${value}/projects`);
       }}
       trigger={
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 2356b0b40..6e9d3a735 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
@@ -16,7 +16,6 @@ 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';
 
 const RESOURCE_NAME = 'storage';
 type BaseType = ExtractNodeType<IPvs>;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index 7d08fa3cb..dcec3dfde 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -7,6 +7,7 @@ import {
   ListBody,
   ListItem,
   ListTitle,
+  listFlex,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
@@ -157,7 +158,7 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
         const tempStatus = listStatus({
           key: keyPrefix,
           item,
-          className: 'basis-full text-center',
+          className: 'text-center',
         });
 
         return (
@@ -190,6 +191,7 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
                 ),
               },
               tempStatus,
+              listFlex({ key: 'flex-1' }),
               {
                 key: generateKey(keyPrefix, `${provider}`),
                 className: 'min-w-[150px] text-start',
diff --git a/src/apps/console/routes/_main+/_layout/_layout.tsx b/src/apps/console/routes/_main+/_layout/_layout.tsx
index 088eb40ce..ea93fb024 100644
--- a/src/apps/console/routes/_main+/_layout/_layout.tsx
+++ b/src/apps/console/routes/_main+/_layout/_layout.tsx
@@ -38,7 +38,6 @@ import {
   Container as ContainerIcon,
   GearSix,
   Project,
-  WireGuardlogo,
 } from '@jengaicons/react';
 import HandleProfile from './handle-profile';
 
@@ -200,7 +199,7 @@ const Console = () => {
 
   const noMainLayout = useHandleFromMatches('noMainLayout', null);
 
-  const devicesMenu = useHandleFromMatches('devicesMenu', null);
+  const _devicesMenu = useHandleFromMatches('devicesMenu', null);
 
   const headerExtra = useHandleFromMatches('headerExtra', null);
 
@@ -236,7 +235,7 @@ const Console = () => {
         tabs={navbar === constants.nan ? null : navbar}
         actions={
           <div className="flex flex-row gap-2xl items-center">
-            {/*{!!devicesMenu && devicesMenu()}*/}
+            {/* {!!devicesMenu && devicesMenu()} */}
             {!!headerExtra && headerExtra()}
             <ProfileMenu setShowProfileDialog={setShowProfileDialog} />
           </div>
diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx
index a755e8a55..ea1a5a96b 100644
--- a/src/design-system/components/atoms/input.tsx
+++ b/src/design-system/components/atoms/input.tsx
@@ -99,7 +99,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
       disabled = false,
       label,
       onKeyDown,
-      autoComplete,
+      autoComplete = 'off',
       onBlur = () => {},
       onFocus = () => {},
       onChange = () => {},
@@ -116,7 +116,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
       tabIndex,
       shimmerLoading,
       autoFocus,
-      focusRing,
+      focusRing = true,
       ...extraProps
     } = props;
     const [t, setT] = useState(type || 'text');
@@ -218,8 +218,6 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
             }}
             onFocus={(e: any) => {
               if (focusRing) {
-                console.log('here', placeholder);
-
                 containerRef.current?.classList.add(
                   'ring-2',
                   'ring-border-focus'
diff --git a/src/design-system/tailwind-base.js b/src/design-system/tailwind-base.js
index ed5b8845f..9a83d9122 100644
--- a/src/design-system/tailwind-base.js
+++ b/src/design-system/tailwind-base.js
@@ -176,6 +176,48 @@ const config = {
           '40%': { transform: 'translateX(0) scaleX(0.4)' },
           '100%': { transform: 'translateX(100%) scaleX(0.5)' },
         },
+        enterFromRight: {
+          from: { opacity: 0, transform: 'translateX(200px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        enterFromLeft: {
+          from: { opacity: 0, transform: 'translateX(-200px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        exitToRight: {
+          from: { opacity: 1, transform: 'translateX(0)' },
+          to: { opacity: 0, transform: 'translateX(200px)' },
+        },
+        exitToLeft: {
+          from: { opacity: 1, transform: 'translateX(0)' },
+          to: { opacity: 0, transform: 'translateX(-200px)' },
+        },
+        scaleIn: {
+          from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
+          to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
+        },
+        scaleOut: {
+          from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
+          to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
+        },
+        fadeIn: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        fadeOut: {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+      },
+      animation: {
+        scaleIn: 'scaleIn 200ms ease',
+        scaleOut: 'scaleOut 200ms ease',
+        fadeIn: 'fadeIn 200ms ease',
+        fadeOut: 'fadeOut 200ms ease',
+        enterFromLeft: 'enterFromLeft 250ms ease',
+        enterFromRight: 'enterFromRight 250ms ease',
+        exitToLeft: 'exitToLeft 250ms ease',
+        exitToRight: 'exitToRight 250ms ease',
       },
       boxShadow: {
         button: '0px 1px 4px rgba(0, 0, 0, 0.05)',