diff --git a/Taskfile.yaml b/Taskfile.yaml
index 9eb24a05e..b210e68ff 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -35,7 +35,7 @@ tasks:
 
         case $(whoami) in
           "bikash")
-            URL_SUFFIX="-bikash"
+            URL_SUFFIX="1"
             ;;
 
           "vision")
diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 206bc3c9c..36cab1a7a 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -4,9 +4,15 @@ import {
   Plus,
   Trash,
   PencilLine,
+  Check,
   GithubLogoFill,
   GitBranchFill,
   GitlabLogoFill,
+  Users,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  SmileySad,
 } from '@jengaicons/react';
 
 export {
@@ -18,4 +24,10 @@ export {
   GithubLogoFill,
   GitlabLogoFill,
   GitBranchFill,
+  Users,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  SmileySad,
 };
diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
index 91333fd2b..360ef99f4 100644
--- a/src/apps/console/page-components/new-cluster.tsx
+++ b/src/apps/console/page-components/new-cluster.tsx
@@ -1,7 +1,5 @@
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
 import { useMemo, useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
 import { mapper, useMapper } from '~/components/utils';
@@ -28,7 +26,8 @@ import MultiStepProgress, {
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
-import { ReviewComponent } from '../components/commons';
+import { BottomNavigation, ReviewComponent } from '../components/commons';
+import { ArrowRight } from '../components/icons';
 
 type props =
   | {
@@ -87,10 +86,6 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
     (typeof awsRegions)[number]
   >(awsRegions[0]);
 
-  const [selectedAvailabilityMode, setSelectedAvailabilityMode] = useState<
-    (typeof constDatas.availabilityModes)[number] | undefined
-  >();
-
   const { values, errors, handleSubmit, handleChange, isLoading } = useForm({
     initialValues: {
       name: '',
@@ -242,26 +237,14 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
             />
           </div>
         </div>
-        {isOnboarding ? (
-          <div className="flex flex-row gap-xl justify-start">
-            <Button
-              variant="primary"
-              content="Create"
-              suffix={<ArrowRight />}
-              type="submit"
-              loading={isLoading}
-            />
-          </div>
-        ) : (
-          <div className="flex flex-row justify-start">
-            <Button
-              variant="primary"
-              content="Continue"
-              suffix={<ArrowRight />}
-              type="submit"
-            />
-          </div>
-        )}
+        <BottomNavigation
+          primaryButton={{
+            loading: isLoading,
+            variant: 'primary',
+            content: isOnboarding ? 'Create' : 'Next',
+            type: 'submit',
+          }}
+        />
       </div>
     );
   };
@@ -344,15 +327,14 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                     </div>
                   </div>
                 </ReviewComponent>
-                <div className="flex flex-row justify-start">
-                  <Button
-                    loading={isLoading}
-                    variant="primary"
-                    content="Create"
-                    suffix={<ArrowRight />}
-                    type="submit"
-                  />
-                </div>
+                <BottomNavigation
+                  primaryButton={{
+                    loading: isLoading,
+                    variant: 'primary',
+                    content: 'Create',
+                    type: 'submit',
+                  }}
+                />
               </MultiStepProgress.Step>
             </>
           ) : (
diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
index 02a5b6468..1f2ff4788 100644
--- a/src/apps/console/page-components/new-project.tsx
+++ b/src/apps/console/page-components/new-project.tsx
@@ -1,7 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { ArrowRight } from '@jengaicons/react';
 import { useLoaderData, useNavigate, useParams } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
@@ -23,7 +21,7 @@ import MultiStepProgress, {
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
-import { ReviewComponent } from '../components/commons';
+import { BottomNavigation, ReviewComponent } from '../components/commons';
 
 const statusRender = (item: ExtractNodeType<IClusters>) => {
   return listStatus({
@@ -157,8 +155,6 @@ const NewProject = () => {
                               </div>
                             </div>
                           ) : (
-                            // parseStatus({ item: clster }) === 'syncing' ||
-                            // parseStatus({ item: clster }) === 'notready' ?
                             <div className="flex text-text-disabled">
                               <div className="flex-grow">
                                 <div className="flex flex-col">
@@ -184,14 +180,13 @@ const NewProject = () => {
                     handleChange('clusterName')(dummyEvent(v.value));
                 }}
               />
-              <div className="flex flex-row justify-start">
-                <Button
-                  variant="primary"
-                  content="Next"
-                  suffix={<ArrowRight />}
-                  type="submit"
-                />
-              </div>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={2} label="Review">
@@ -218,15 +213,14 @@ const NewProject = () => {
                 </div>
               </div>
             </ReviewComponent>
-            <div className="flex flex-row justify-start">
-              <Button
-                loading={isLoading}
-                variant="primary"
-                content="Create"
-                suffix={<ArrowRight />}
-                type="submit"
-              />
-            </div>
+            <BottomNavigation
+              primaryButton={{
+                loading: isLoading,
+                variant: 'primary',
+                content: 'Create',
+                type: 'submit',
+              }}
+            />
           </MultiStepProgress.Step>
         </MultiStepProgress.Root>
       </MultiStepProgressWrapper>
diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index e0a7ef1f0..1188ae7be 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -1,6 +1,4 @@
-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 from '~/root/lib/client/hooks/use-form';
@@ -13,6 +11,7 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
+import { BottomNavigation } from '~/console/components/commons';
 
 const NewAccount = () => {
   const api = useConsoleApi();
@@ -77,16 +76,14 @@ const NewAccount = () => {
                 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>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  loading: isLoading,
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={2} label="Add your cloud provider" />
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 0e54073f8..dd9c55132 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
@@ -1,11 +1,9 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable no-nested-ternary */
 import { IRemixCtx } from '~/root/lib/types/common';
-import { ArrowRight, Check } from '@jengaicons/react';
 import { useLoaderData, useNavigate, useOutletContext } from '@remix-run/react';
 import { defer } from '@remix-run/node';
 import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { handleError } from '~/root/lib/utils/common';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
@@ -18,11 +16,12 @@ import { parseName } from '~/console/server/r-utils/common';
 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 { Check } from '~/console/components/icons';
+import { BottomNavigation } from '~/console/components/commons';
 import { IAccountContext } from '../../../../_main+/$account+/_layout';
 
 export const loader = async (ctx: IRemixCtx) => {
@@ -164,20 +163,19 @@ const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
                   </div>
                 </div>
               )}
-              <div className="flex flex-row gap-xl justify-start">
-                <Button
-                  variant="primary"
-                  content={data?.result ? 'Next' : 'Skip'}
-                  suffix={<ArrowRight />}
-                  onClick={() => {
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: data?.result ? 'Next' : 'Skip',
+                  onClick: () => {
                     navigate(
                       `/onboarding/${parseName(account)}/${parseName(
                         cloudProvider
                       )}/new-cluster`
                     );
-                  }}
-                />
-              </div>
+                  },
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={4} label="Setup first cluster" />
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 4b0a42a62..51025f653 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
@@ -1,6 +1,4 @@
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import { TextInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
@@ -15,6 +13,7 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
+import { BottomNavigation } from '~/console/components/commons';
 
 const NewCloudProvider = () => {
   const { a: accountName } = useParams();
@@ -147,15 +146,14 @@ const NewCloudProvider = () => {
                   )}
                 </div>
               </div>
-              <div className="flex flex-row gap-xl justify-start">
-                <Button
-                  loading={isLoading}
-                  type="submit"
-                  variant="primary"
-                  content="Continue"
-                  suffix={<ArrowRight />}
-                />
-              </div>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  loading: isLoading,
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={3} label="Validate cloud provider" />
diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
index 9919644d6..f329263da 100644
--- a/src/apps/console/routes/_a+/teams.tsx
+++ b/src/apps/console/routes/_a+/teams.tsx
@@ -1,4 +1,3 @@
-import { ArrowRight, Users } from '@jengaicons/react';
 import { redirect } from '@remix-run/node';
 import {
   Link,
@@ -24,6 +23,7 @@ import DynamicPagination from '~/console/components/dynamic-pagination';
 import List from '~/console/components/list';
 import { parseName } from '~/console/server/r-utils/common';
 import ConsoleAvatar from '~/console/components/console-avatar';
+import { ArrowRight, Users } from '~/console/components/icons';
 
 export const loader = async (ctx: IRemixCtx) => {
   let accounts;
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 d4b01d1d2..9522a84c1 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
@@ -1,5 +1,3 @@
-import { ArrowLeft, ArrowRight } from '@jengaicons/react';
-import { Button } from '~/components/atoms/button';
 import { NumberInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
@@ -14,6 +12,7 @@ import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useMapper } from '~/components/utils';
 import { registryHost } from '~/lib/configs/base-url.cjs';
+import { BottomNavigation } from '~/console/components/commons';
 import { plans } from './datas';
 
 const valueRender = ({
@@ -100,11 +99,11 @@ const AppCompute = () => {
       ),
     },
     validationSchema: Yup.object({
-      // imageUrl: Yup.string().required(),
       pullSecret: Yup.string(),
+      repoName: Yup.string().required(),
+      repoImageTag: Yup.string().required(),
       cpuMode: Yup.string().required(),
       selectedPlan: Yup.string().required(),
-      // cpu: Yup.number().required().min(100).max(8000),
     }),
     onSubmit: (val) => {
       setApp((s) => ({
@@ -128,32 +127,32 @@ const AppCompute = () => {
               // image: val.image === '' ? val.repoImageUrl : val.imageUrl,
               image:
                 values.repoAccountName === undefined ||
-                  values.repoAccountName === ''
+                values.repoAccountName === ''
                   ? `${values.repoName}:${values.repoImageTag}`
                   : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
                   ? {
-                    max: `${val.cpu}m`,
-                    min: `${val.cpu}m`,
-                  }
+                      max: `${val.cpu}m`,
+                      min: `${val.cpu}m`,
+                    }
                   : {
-                    max: `${val.manualCpuMax}m`,
-                    min: `${val.manualCpuMin}m`,
-                  },
+                      max: `${val.manualCpuMax}m`,
+                      min: `${val.manualCpuMin}m`,
+                    },
               resourceMemory:
                 val.selectionMode === 'quick'
                   ? {
-                    max: `${(
-                      (values.cpu || 1) * parseValue(values.memPerCpu, 4)
-                    ).toFixed(2)}Mi`,
-                    min: `${val.cpu}Mi`,
-                  }
+                      max: `${(
+                        (values.cpu || 1) * parseValue(values.memPerCpu, 4)
+                      ).toFixed(2)}Mi`,
+                      min: `${val.cpu}Mi`,
+                    }
                   : {
-                    max: `${val.manualMemMax}Mi`,
-                    min: `${val.manualMemMin}Mi`,
-                  },
+                      max: `${val.manualMemMax}Mi`,
+                      min: `${val.manualMemMin}Mi`,
+                    },
             },
           ],
         },
@@ -201,9 +200,7 @@ const AppCompute = () => {
           label="Repo Name"
           size="lg"
           placeholder="Select Repo"
-          // value={{ label: '', value: values.repoName }}
           value={values.repoName}
-          // searchable
           creatable
           onChange={(val) => {
             handleChange('repoName')(dummyEvent(val.value));
@@ -214,7 +211,7 @@ const AppCompute = () => {
             }
           }}
           options={async () => [...repos]}
-          error={!!errors.repos || !!repoLoadingError}
+          error={!!errors.repoName || !!repoLoadingError}
           message={
             repoLoadingError ? 'Error fetching repositories.' : errors.app
           }
@@ -247,8 +244,8 @@ const AppCompute = () => {
             errors.repoImageTag
               ? errors.repoImageTag
               : digestError
-                ? 'Failed to load Image tags.'
-                : ''
+              ? 'Failed to load Image tags.'
+              : ''
           }
           loading={digestLoading}
         />
@@ -386,149 +383,27 @@ const AppCompute = () => {
         )}
       </div>
 
-      {/* <div className="flex flex-col border border-border-default rounded overflow-hidden">
-        <div className="p-2xl gap-2xl flex flex-row items-center border-b border-border-disabled bg-surface-basic-subdued">
-          <div className="flex-1 bodyMd-medium text-text-default">
-            Select plan
-          </div>
-          <ExtendedFilledTab
-            size="sm"
-            items={[
-              {
-                value: 'shared',
-                label: (
-                  <InfoLabel label="Shared" info="some usefull information" />
-                ),
-              },
-
-              {
-                value: 'dedicated',
-                label: (
-                  <InfoLabel
-                    label="Dedicated"
-                    info="some usefull information"
-                  />
-                ),
-              },
-            ]}
-            value={values.cpuMode}
-            onChange={(v) => {
-              handleChange('cpuMode')(dummyEvent(v));
-            }}
-          />
-        </div>
-
-        <div className="flex flex-row">
-          <div className="flex-1 flex flex-col border-r border-border-disabled">
-            <Radio.Root
-              withBounceEffect={false}
-              className="gap-y-0"
-              value={values.selectedPlan}
-              onChange={(v) => {
-                handleChange('selectedPlan')(dummyEvent(v));
-              }}
-            >
-              {[...(plans[values.cpuMode as IcpuMode] || [])].map(
-                ({ name, memoryPerCpu, description }) => {
-                  return (
-                    <Radio.Item
-                      key={`${memoryPerCpu}`}
-                      className="p-2xl"
-                      value={`${memoryPerCpu}`}
-                    >
-                      <div className="flex flex-col pl-xl">
-                        <div className="headingMd text-text-default">
-                          {name}
-                        </div>
-                        <div className="bodySm text-text-soft">
-                          {description}
-                        </div>
-                      </div>
-                    </Radio.Item>
-                  );
-                }
-              )}
-            </Radio.Root>
-          </div>
-          {getActivePlan() ? (
-            <div className="flex-1 py-2xl">
-              <div className="flex flex-row items-center gap-lg py-lg px-2xl">
-                <div className="bodyMd-medium text-text-strong flex-1">
-                  {getActivePlan()?.name}
-                </div>
-                <div className="bodyMd text-text-soft">{values.cpuMode}</div>
-              </div>
-              <div className="flex flex-row items-center gap-lg py-lg px-2xl">
-                <div className="bodyMd-medium text-text-strong flex-1">
-                  Compute
-                </div>
-                <div className="bodyMd text-text-soft">{1}vCPU</div>
-              </div>
-              <div className="flex flex-row items-center gap-lg py-lg px-2xl">
-                <div className="bodyMd-medium text-text-strong flex-1">
-                  Memory
-                </div>
-                <div className="bodyMd text-text-soft">
-                  {getActivePlan()?.memoryPerCpu}GB
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="flex-1 py-2xl">
-              <div className="flex flex-row items-center gap-lg py-lg px-2xl">
-                <div className="bodyMd-medium text-text-strong flex-1">
-                  Please Select any plan
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div> */}
-
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          content="App Info"
-          prefix={<ArrowLeft />}
-          variant="outline"
-          onClick={() => {
+      <BottomNavigation
+        primaryButton={{
+          loading: isLoading,
+          type: 'submit',
+          content: 'Save & Continue',
+          variant: 'primary',
+        }}
+        secondaryButton={{
+          content: 'App Info',
+          variant: 'outline',
+          onClick: () => {
             (async () => {
               const res = await submit();
               if (res) {
                 setPage(1);
               }
             })();
-          }}
-        />
-
-        <div className="text-surface-primary-subdued">|</div>
-
-        <Button
-          loading={isLoading}
-          type="submit"
-          content="Save & Continue"
-          suffix={<ArrowRight />}
-          variant="primary"
-        />
-      </div>
+          },
+        }}
+      />
     </FadeIn>
   );
 };
-
-// const ContainerRepoLayout = () => {
-//   const { promise } = useLoaderData<typeof Reposloader>();
-//   return (
-//       <LoadingComp data={promise}>
-//         {({ repository }) => {
-//           const repoList = parseNodes(repository);
-//           return <AppCompute services={repoList} />;
-//         }}
-//       </LoadingComp>
-//   );
-// };
-//
-// const NewContainerRepo = () => {
-//   return <ContainerRepoLayout />;
-// };
-
 export default AppCompute;
-//  export default NewContainerRepo
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 9b0ccc0b5..b69790386 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
@@ -8,6 +8,7 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
 import { NameIdView } from '~/console/components/name-id-view';
+import { BottomNavigation } from '~/console/components/commons';
 
 const AppDetail = () => {
   const { app, setApp, setPage, markPageAsCompleted } = useAppState();
@@ -80,15 +81,14 @@ const AppDetail = () => {
           onChange={handleChange('description')}
         />
       </div>
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          loading={isLoading}
-          type="submit"
-          content="Save & Continue"
-          suffix={<ArrowRight />}
-          variant="primary"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          loading: isLoading,
+          type: 'submit',
+          content: 'Save & Continue',
+          variant: 'primary',
+        }}
+      />
     </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 502627173..3b274e5d4 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
@@ -6,6 +6,7 @@ import {
   createAppEnvPage,
   useAppState,
 } from '~/console/page-components/app-states';
+import { BottomNavigation } from '~/console/components/commons';
 import { FadeIn } from '../../../../../../page-components/util';
 import { EnvironmentVariables } from './app-environment-variables';
 import { ConfigMounts } from './app-environment-mounts';
@@ -55,28 +56,24 @@ const AppEnvironment = () => {
         </motion.div>
       </AnimatePresence>
 
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          content="Compute"
-          prefix={<ArrowLeft />}
-          variant="outline"
-          onClick={() => {
-            setPage(2);
-          }}
-        />
-
-        <div className="text-surface-primary-subdued">|</div>
-
-        <Button
-          content="Save & Continue"
-          suffix={<ArrowRight />}
-          variant="primary"
-          onClick={() => {
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          content: 'Save & Continue',
+          variant: 'primary',
+          onClick: () => {
             setPage(4);
             markPageAsCompleted(3);
-          }}
-        />
-      </div>
+          },
+        }}
+        secondaryButton={{
+          content: 'Compute',
+          variant: 'outline',
+          onClick: () => {
+            setPage(2);
+          },
+        }}
+      />
     </FadeIn>
   );
 };
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 ef0ad5eed..f51f51505 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
@@ -1,11 +1,3 @@
-import {
-  ArrowLeft,
-  ArrowRight,
-  ChevronLeft,
-  ChevronRight,
-  SmileySad,
-  X,
-} from '@jengaicons/react';
 import { useEffect, useState } from 'react';
 import { Button, IconButton } from '~/components/atoms/button';
 import { NumberInput } from '~/components/atoms/input';
@@ -14,11 +6,16 @@ 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 { InfoLabel } from '~/console/components/commons';
+import { BottomNavigation, InfoLabel } from '~/console/components/commons';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { FadeIn, parseValue } from '../../../../../../page-components/util';
+import {
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight,
+  SmileySad,
+  X,
+} from '~/console/components/icons';
+import { FadeIn, parseValue } from '~/console/page-components/util';
 
 interface IExposedPorts {
   targetPort?: number;
@@ -87,7 +84,7 @@ const ExposedPortList = ({
                       <div className="flex flex-row gap-md items-center bodyMd text-text-soft">
                         <span>Service: </span>
                         {ep.port}
-                        <ArrowRight size={16} weight={1} />
+                        <ArrowRight size={16} />
                         <span>Container: </span>
                         {ep.targetPort}
                       </div>
@@ -198,8 +195,6 @@ export const ExposedPorts = () => {
             variant="basic"
             disabled={!port || !targetPort}
             onClick={() => {
-              console.log('here');
-
               if (services?.find((ep) => ep.port && ep.port === port)) {
                 setPortError('Port is already exposed.');
               } else {
@@ -241,29 +236,25 @@ const AppNetwork = () => {
       </div>
 
       <ExposedPorts />
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          content="Environments"
-          prefix={<ArrowLeft />}
-          variant="outline"
-          onClick={() => {
-            setPage(3);
-          }}
-        />
-
-        <div className="text-surface-primary-subdued">|</div>
-
-        <Button
-          content="Save & Continue"
-          suffix={<ArrowRight />}
-          variant="primary"
-          onClick={() => {
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          content: 'Save & Continue',
+          variant: 'primary',
+          onClick: () => {
             setPage(5);
             markPageAsCompleted(4);
             markPageAsCompleted(5);
-          }}
-        />
-      </div>
+          },
+        }}
+        secondaryButton={{
+          content: 'Environments',
+          variant: 'outline',
+          onClick: () => {
+            setPage(3);
+          },
+        }}
+      />
     </FadeIn>
   );
 };
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 1154f13cb..22ecd720e 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
@@ -1,7 +1,5 @@
-import { ArrowLeft, ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
 import { useEffect, useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { useAppState } from '~/console/page-components/app-states';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -11,7 +9,10 @@ import { handleError } from '~/root/lib/utils/common';
 import { validateType } from '~/root/src/generated/gql/validator';
 import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
-import { ReviewComponent } from '~/console/components/commons';
+import {
+  BottomNavigation,
+  ReviewComponent,
+} from '~/console/components/commons';
 
 const AppReview = () => {
   const { app, setPage, resetState } = useAppState();
@@ -54,10 +55,17 @@ const AppReview = () => {
   }, []);
 
   return (
-    <FadeIn onSubmit={handleSubmit} className="py-3xl">
-      <div>An assessment of the work, product, or performance.</div>
+    <FadeIn onSubmit={handleSubmit}>
+      <div className="bodyMd text-text-soft">
+        An assessment of the work, product, or performance.
+      </div>
       <div className="flex flex-col gap-3xl">
-        <ReviewComponent title="Application detail" onEdit={() => {}}>
+        <ReviewComponent
+          title="Application detail"
+          onEdit={() => {
+            setPage(1);
+          }}
+        >
           <div className="flex flex-col p-xl gap-md rounded border border-border-default">
             <div className="bodyMd-semibold text-text-default">
               {app.displayName}
@@ -66,7 +74,12 @@ const AppReview = () => {
           </div>
         </ReviewComponent>
 
-        <ReviewComponent title="Compute" onEdit={() => {}}>
+        <ReviewComponent
+          title="Compute"
+          onEdit={() => {
+            setPage(2);
+          }}
+        >
           <div className="flex flex-row gap-3xl">
             <div className="flex flex-col rounded border border-border-default flex-1 overflow-hidden">
               <div className="px-xl py-lg bg-surface-basic-subdued">
@@ -101,7 +114,12 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Environment" onEdit={() => {}}>
+        <ReviewComponent
+          title="Environment"
+          onEdit={() => {
+            setPage(3);
+          }}
+        >
           <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
             <div className="flex flex-row items-center gap-lg pb-xl border-b border-border-default">
               <div className="flex-1 bodyMd-medium text-text-default">
@@ -121,7 +139,12 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Network" onEdit={() => {}}>
+        <ReviewComponent
+          title="Network"
+          onEdit={() => {
+            setPage(4);
+          }}
+        >
           <div className="flex flex-row gap-xl p-xl rounded border border-border-default">
             <div className="text-text-default bodyMd flex-1">
               Ports exposed from the app
@@ -145,27 +168,23 @@ const AppReview = () => {
           })}
         </div>
       )}
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          content="Networks"
-          prefix={<ArrowLeft />}
-          variant="outline"
-          onClick={() => {
-            setPage(4);
-          }}
-        />
-
-        <div className="text-surface-primary-subdued">|</div>
 
-        <Button
-          disabled={errors.length !== 0}
-          content="Create App"
-          suffix={<ArrowRight />}
-          variant="primary"
-          type="submit"
-          loading={isLoading}
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          content: 'Create App',
+          variant: 'primary',
+          disabled: errors.length !== 0,
+          loading: isLoading,
+        }}
+        secondaryButton={{
+          content: 'Network',
+          variant: 'outline',
+          onClick: () => {
+            setPage(4);
+          },
+        }}
+      />
     </FadeIn>
   );
 };
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 12ce051a8..a958a6d3f 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
@@ -1,13 +1,11 @@
 /* eslint-disable guard-for-in */
 
-import { ArrowRight } from '@jengaicons/react';
 import {
   useLoaderData,
   useNavigate,
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import Select from '~/components/atoms/select';
 import { NameIdView } from '~/console/components/name-id-view';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -34,7 +32,10 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
-import { ReviewComponent } from '~/console/components/commons';
+import {
+  BottomNavigation,
+  ReviewComponent,
+} from '~/console/components/commons';
 import { IProjectContext } from '../../_layout';
 
 export const loader = (ctx: IRemixCtx) => {
@@ -281,16 +282,14 @@ const TemplateView = ({
         error={!!values.selectedService && !!errors.selectedResource}
         message={values.selectedService ? errors.selectedResource : null}
       />
-
-      <div className="flex flex-row justify-start">
-        <Button
-          loading={isLoading}
-          variant="primary"
-          content="Next"
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          loading: isLoading,
+          variant: 'primary',
+          content: 'Next',
+          type: 'submit',
+        }}
+      />
     </form>
   );
 };
@@ -349,14 +348,13 @@ const FieldView = ({
           />
         );
       })}
-      <div className="flex flex-row justify-start">
-        <Button
-          variant="primary"
-          content="Next"
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          variant: 'primary',
+          content: 'Next',
+          type: 'submit',
+        }}
+      />
     </form>
   );
 };
@@ -456,16 +454,14 @@ const ReviewView = ({
         )}
         {renderFieldView()}
       </div>
-
-      <div className="flex flex-row justify-start">
-        <Button
-          variant="primary"
-          content="Create"
-          loading={isLoading}
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          variant: 'primary',
+          content: 'Create',
+          loading: isLoading,
+          type: 'submit',
+        }}
+      />
     </form>
   );
 };
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 1c4085369..02bed60f8 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
@@ -39,7 +39,14 @@ const Root = (props: IDialog) => {
     isLoading: domainLoading,
     error: domainLoadingError,
   } = useCustomSwr('/domains', async () => {
-    return api.listDomains({});
+    return api.listDomains({
+      search: {
+        clusterName: {
+          matchType: 'exact',
+          exact: parseName(cluster),
+        },
+      },
+    });
   });
 
   const { values, errors, handleSubmit, handleChange, isLoading, resetValues } =
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 42a1f4862..776ec3e4c 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
@@ -1,8 +1,6 @@
 /* eslint-disable react/no-this-in-sfc */
 /* eslint-disable guard-for-in */
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate, useOutletContext, useParams } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import Select from '~/components/atoms/select';
 import { NameIdView } from '~/console/components/name-id-view';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -22,7 +20,10 @@ import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
 import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
-import { ReviewComponent } from '~/console/components/commons';
+import {
+  BottomNavigation,
+  ReviewComponent,
+} from '~/console/components/commons';
 import { IProjectContext } from '../_layout';
 
 const valueRender = ({ label, icon }: { label: string; icon: string }) => {
@@ -225,16 +226,13 @@ const TemplateView = ({
           }))
         }
       />
-
-      <div className="flex flex-row justify-start">
-        <Button
-          loading={isLoading}
-          variant="primary"
-          content="Next"
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          loading: isLoading,
+          content: 'Next',
+        }}
+      />
     </form>
   );
 };
@@ -297,14 +295,12 @@ const FieldView = ({
           />
         );
       })}
-      <div className="flex flex-row justify-start">
-        <Button
-          variant="primary"
-          content="Next"
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          content: 'Next',
+        }}
+      />
     </form>
   );
 };
@@ -421,16 +417,13 @@ const ReviewView = ({
           </ReviewComponent>
         )}
       </div>
-
-      <div className="flex flex-row justify-start">
-        <Button
-          variant="primary"
-          content="Create"
-          loading={isLoading}
-          suffix={<ArrowRight />}
-          type="submit"
-        />
-      </div>
+      <BottomNavigation
+        primaryButton={{
+          type: 'submit',
+          loading: isLoading,
+          content: 'Create',
+        }}
+      />
     </form>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
index 7ba4443ca..52cac5f59 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
@@ -1,8 +1,6 @@
-import { Plus } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
@@ -18,9 +16,23 @@ import Tools from './tools';
 export const loader = async (ctx: IRemixCtx) => {
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
+    const { cluster } = ctx.params;
+    console.log({
+      ...getSearch(ctx),
+      clusterName: {
+        matchType: 'exact',
+        exact: cluster,
+      },
+    });
     const { data, errors } = await GQLServerHandler(ctx.request).listDomains({
       pagination: getPagination(ctx),
-      search: getSearch(ctx),
+      search: {
+        ...getSearch(ctx),
+        clusterName: {
+          matchType: 'exact',
+          exact: cluster,
+        },
+      },
     });
     if (errors) {
       logger.error(errors[0]);
diff --git a/src/design-system/components/css/index.scss b/src/design-system/components/css/index.scss
index 2082507fb..784892054 100644
--- a/src/design-system/components/css/index.scss
+++ b/src/design-system/components/css/index.scss
@@ -1494,6 +1494,11 @@ video {
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
 }
 
+.border-text-default{
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+
 .border-transparent{
   border-color: transparent;
 }
@@ -1713,6 +1718,10 @@ video {
      object-fit: cover;
 }
 
+.p-2xl{
+  padding: 16px;
+}
+
 .p-3xl{
   padding: 20px;
 }