diff --git a/Taskfile.yaml b/Taskfile.yaml
index cd33c7618..0b8d8576c 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -41,6 +41,10 @@ tasks:
           "vision")
             URL_SUFFIX="-vision"
             ;;
+          
+          "piyush")
+            URL_SUFFIX="-piyush"
+            ;;
 
           *)
             URL_SUFFIX=""
diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index ddb844e49..e78443f2f 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -6,6 +6,8 @@ import {
   AppIn,
   Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppContainerIn as AppSpecContainersIn,
 } from '~/root/src/generated/gql/server';
+import {useMapper} from "~/components/utils";
+import {parseNodes} from "~/console/server/r-utils/common";
 
 const defaultApp: AppIn = {
   metadata: {
@@ -185,6 +187,18 @@ export const useAppState = () => {
     });
   };
 
+  type IparseNodes = {
+    edges: Array<{ node: any }>;
+  };
+
+  const getRepoMapper = (resources: IparseNodes | undefined) => {
+    return useMapper(parseNodes(resources), (val) => ({
+      label: val.name,
+      value: val.name,
+      accName: val.accountName
+    }))
+  }
+
   return {
     resetState,
     completePages,
@@ -203,6 +217,7 @@ export const useAppState = () => {
     activeContIndex: activeContIndex || 0,
     services: app.spec.services || [],
     setServices,
+    getRepoMapper,
   };
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 4811a8f4a..d70303d5e 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { NumberInput, TextInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
@@ -13,6 +13,9 @@ import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import Wrapper from '~/console/components/wrapper';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { Button } from '~/components/atoms/button';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { parseNodes } from '~/console/server/r-utils/common';
 import { plans } from '../../../../new-app/datas';
 
 const valueRender = ({
@@ -37,9 +40,22 @@ const valueRender = ({
 };
 
 const SettingCompute = () => {
-  const { app, setApp, getContainer, activeContIndex } = useAppState();
+  const { app, setApp, getContainer, activeContIndex, getRepoMapper } =
+    useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
 
+  const api = useConsoleApi();
+
+  const [accountName, setAccountName] = useState('');
+
+  const {
+    data,
+    isLoading: repoLoading,
+    error: repoLoadingError,
+  } = useCustomSwr('/repos', async () => {
+    return api.listRepo({});
+  });
+
   const { values, errors, handleChange, submit, resetValues } = useForm({
     initialValues: {
       imageUrl: getContainer(0)?.image || '',
@@ -47,6 +63,11 @@ const SettingCompute = () => {
       cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
       memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1,
 
+      repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
+      repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
+      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
+      image: app.metadata?.annotations?.[keyconstants.image] || '',
+
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
         250
@@ -88,6 +109,10 @@ const SettingCompute = () => {
             ...(s.metadata?.annotations || {}),
             [keyconstants.cpuMode]: val.cpuMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
+            [keyconstants.repoName]: val.repoName,
+            [keyconstants.imageTag]: val.repoImageTag,
+            [keyconstants.image]: val.image,
+            [keyconstants.repoImageUrl]: val.repoImageUrl,
           },
         },
         spec: {
@@ -95,7 +120,8 @@ const SettingCompute = () => {
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.imageUrl,
+              // image: val.imageUrl,
+              image: val.repoImageUrl == '' ? val.imageUrl : val.repoImageUrl,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -132,6 +158,25 @@ const SettingCompute = () => {
   //   );
   // }, [values.cpuMode, values.selectedPlan]);
 
+  // const repository = useMapper(parseNodes(data), (val) => ({
+  //   label: val.name,
+  //   value: val.name,
+  //   accName: val.accountName
+  // }));
+
+  const repos = getRepoMapper(data);
+
+  const {
+    data: digestData,
+    isLoading: digestLoading,
+    error: digestError,
+  } = useCustomSwr(
+    () => `/digests_${values.repoName}`,
+    async () => {
+      return api.listDigest({ repoName: values.repoName });
+    }
+  );
+
   useEffect(() => {
     submit();
   }, [values]);
@@ -166,16 +211,18 @@ const SettingCompute = () => {
         }}
       >
         <div className="flex flex-col gap-3xl">
-          <TextInput
-            label={
-              <InfoLabel info="some usefull information" label="Image Url" />
-            }
-            size="lg"
-            value={values.imageUrl}
-            onChange={handleChange('imageUrl')}
-            error={!!errors.imageUrl}
-            message={errors.imageUrl}
-          />
+          {!values.repoImageUrl && (
+              <TextInput
+                  label={
+                    <InfoLabel info="some usefull information" label="Image Url" />
+                  }
+                  size="lg"
+                  value={values.imageUrl}
+                  onChange={handleChange('imageUrl')}
+                  error={!!errors.imageUrl}
+                  message={errors.imageUrl}
+              />
+          )}
           {/* <PasswordInput
             label={
               <InfoLabel info="some usefull information" label="Pull Secret" />
@@ -186,6 +233,67 @@ const SettingCompute = () => {
             // message={errors.pullSecret}
             // onChange={handleChange('pullSecret')}
           /> */}
+
+          {values.repoImageUrl && (
+              <Select
+                  label="Repository Name"
+                  size="lg"
+                  placeholder="Select Repo"
+                  value={{ label: '', value: values.repoName }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoName')(dummyEvent(val.value));
+                    handleChange('image')(dummyEvent(''));
+                    setAccountName(val.accName);
+                  }}
+                  options={async () => [...repos]}
+                  error={!!errors.repos || !!repoLoadingError}
+                  message={
+                    repoLoadingError ? 'Error fetching repositories.' : errors.app
+                  }
+                  loading={repoLoading}
+              />
+          )}
+
+          {values.repoImageUrl && (
+              <Select
+                  label="Image Tag"
+                  size="lg"
+                  placeholder="Select Image Tag"
+                  value={{ label: '', value: values.repoImageTag }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoImageTag')(dummyEvent(val.value));
+                    handleChange('repoImageUrl')(
+                        dummyEvent(
+                            `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
+                        )
+                    );
+                  }}
+                  options={async () =>
+                      [
+                        ...new Set(
+                            parseNodes(digestData)
+                                .map((item) => item.tags)
+                                .flat()
+                        ),
+                      ].map((item) => ({
+                        label: item,
+                        value: item,
+                      }))
+                  }
+                  error={!!errors.repoImageTag || !!digestError}
+                  message={
+                    errors.repoImageTag
+                        ? errors.repoImageTag
+                        : digestError
+                            ? 'Failed to load Image tags.'
+                            : ''
+                  }
+                  loading={digestLoading}
+              />
+          )}
+
         </div>
         {/* <div className="flex flex-col border border-border-default bg-surface-basic-default rounded overflow-hidden">
         <div className="p-2xl gap-2xl flex flex-row items-center border-b border-border-disabled bg-surface-basic-subdued">
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 cf71f78d3..57d220cae 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
@@ -10,6 +10,11 @@ import { InfoLabel } from '~/console/components/commons';
 import { FadeIn, parseValue } from '~/console/page-components/util';
 import Select from '~/components/atoms/select';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
+import { parseNodes } from '~/console/server/r-utils/common';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useMapper } from '~/components/utils';
+import { useState } from 'react';
 import { plans } from './datas';
 
 const valueRender = ({
@@ -36,6 +41,18 @@ const valueRender = ({
 const AppCompute = () => {
   const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
     useAppState();
+  const api = useConsoleApi();
+
+  const [accountName, setAccountName] = useState('');
+  const [showImageUrl, setShowImageUrl] = useState(true);
+
+  const {
+    data,
+    isLoading: repoLoading,
+    error: repoLoadingError,
+  } = useCustomSwr('/repos', async () => {
+    return api.listRepo({});
+  });
 
   const { values, errors, handleChange, isLoading, submit } = useForm({
     initialValues: {
@@ -49,6 +66,11 @@ const AppCompute = () => {
         250
       ),
 
+      repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
+      repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
+      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
+      image: app.metadata?.annotations?.[keyconstants.image] || '',
+
       selectedPlan:
         app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
       selectionMode:
@@ -71,7 +93,7 @@ const AppCompute = () => {
       ),
     },
     validationSchema: Yup.object({
-      imageUrl: Yup.string().required(),
+      // imageUrl: Yup.string().required(),
       pullSecret: Yup.string(),
       cpuMode: Yup.string().required(),
       selectedPlan: Yup.string().required(),
@@ -88,6 +110,10 @@ const AppCompute = () => {
             [keyconstants.memPerCpu]: val.memPerCpu,
             [keyconstants.selectionModeKey]: val.selectionMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
+            [keyconstants.repoName]: val.repoName,
+            [keyconstants.imageTag]: val.repoImageTag,
+            [keyconstants.image]: val.image,
+            [keyconstants.repoImageUrl]: val.repoImageUrl,
           },
         },
         spec: {
@@ -95,7 +121,7 @@ const AppCompute = () => {
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.imageUrl,
+              image: val.image === '' ? val.repoImageUrl : val.imageUrl,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -126,6 +152,23 @@ const AppCompute = () => {
     },
   });
 
+  const repos = useMapper(parseNodes(data), (val) => ({
+    label: val.name,
+    value: val.name,
+    accName: val.accountName,
+  }));
+
+  const {
+    data: digestData,
+    isLoading: digestLoading,
+    error: digestError,
+  } = useCustomSwr(
+    () => `/digests_${values.repoName}`,
+    async () => {
+      return api.listDigest({ repoName: values.repoName });
+    }
+  );
+
   return (
     <FadeIn
       onSubmit={(e) => {
@@ -145,16 +188,95 @@ const AppCompute = () => {
         manipulation and calculations in a system.
       </div>
       <div className="flex flex-col gap-3xl">
-        <TextInput
-          label={
-            <InfoLabel info="some usefull information" label="Image Url" />
-          }
-          size="lg"
-          value={values.imageUrl}
-          onChange={handleChange('imageUrl')}
-          error={!!errors.imageUrl}
-          message={errors.imageUrl}
+        {showImageUrl && (
+          <TextInput
+            label={
+              <InfoLabel info="some usefull information" label="Image Url" />
+            }
+            size="lg"
+            value={values.image}
+            onChange={(e) => {
+              handleChange('imageUrl')(
+                dummyEvent(e.target.value.toLowerCase())
+              );
+              handleChange('image')(dummyEvent(e.target.value.toLowerCase()));
+              handleChange('repoName')(dummyEvent(''));
+              handleChange('repoImageTag')(dummyEvent(''));
+            }}
+            error={!!errors.imageUrl}
+            message={errors.imageUrl}
+          />
+        )}
+
+        <Button
+          onClick={() => {
+            setShowImageUrl(!showImageUrl);
+          }}
+          content={showImageUrl ? 'Advanced options' : 'Image option'}
+          variant="primary-plain"
+          size="sm"
         />
+
+        {!showImageUrl && (
+          <Select
+            label="Repo Name"
+            size="lg"
+            placeholder="Select Repo"
+            value={{ label: '', value: values.repoName }}
+            searchable
+            onChange={(val) => {
+              handleChange('repoName')(dummyEvent(val.value));
+              handleChange('image')(dummyEvent(''));
+              setAccountName(val.accName);
+            }}
+            options={async () => [...repos]}
+            error={!!errors.repos || !!repoLoadingError}
+            message={
+              repoLoadingError ? 'Error fetching repositories.' : errors.app
+            }
+            loading={repoLoading}
+          />
+        )}
+
+        {!showImageUrl && (
+          <Select
+            label="Image Tag"
+            size="lg"
+            placeholder="Select Image Tag"
+            value={{ label: '', value: values.repoImageTag }}
+            searchable
+            onChange={(val) => {
+              handleChange('repoImageTag')(dummyEvent(val.value));
+              handleChange('repoImageUrl')(
+                dummyEvent(
+                  `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
+                )
+              );
+            }}
+            options={async () =>
+              [
+                ...new Set(
+                  parseNodes(digestData)
+                    .map((item) => item.tags)
+                    .flat()
+                ),
+              ].map((item) => ({
+                label: item,
+                value: item,
+              }))
+            }
+            error={!!errors.repoImageTag || !!digestError}
+            message={
+              errors.repoImageTag
+                ? errors.repoImageTag
+                : digestError
+                ? 'Failed to load Image tags.'
+                : ''
+            }
+            loading={digestLoading}
+          />
+        )}
+
         {/* <PasswordInput
           label={
             <InfoLabel info="some usefull information" label="Pull Secret" />
@@ -424,4 +546,21 @@ const AppCompute = () => {
   );
 };
 
+// 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-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index be67e0a45..ffd257ccb 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
@@ -16,24 +16,28 @@ interface IReviewComponent {
   title: string;
   children: ReactNode;
   onEdit: () => void;
+  canEdit?: boolean;
 }
 export const ReviewComponent = ({
   title = '',
   children,
   onEdit,
+  canEdit = true,
 }: IReviewComponent) => {
   return (
     <div className="flex flex-col gap-2xl pb-3xl">
       <div className="flex flex-row items-center">
         <span className="text-text-soft bodyMd flex-1">{title}</span>
-        <button
-          type="button"
-          aria-label="edit"
-          className="text-icon-soft"
-          onClick={onEdit}
-        >
-          <PencilLine size={16} />
-        </button>
+        {canEdit && (
+          <button
+            type="button"
+            aria-label="edit"
+            className="text-icon-soft"
+            onClick={onEdit}
+          >
+            <PencilLine size={16} />
+          </button>
+        )}
       </div>
       {children}
     </div>
@@ -83,7 +87,7 @@ const AppReview = () => {
     <FadeIn onSubmit={handleSubmit} className="py-3xl">
       <div>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={() => { }}>
           <div className="flex flex-col p-xl gap-md rounded border border-border-default">
             <div className="bodyMd-semibold text-text-default">
               {app.displayName}
@@ -92,7 +96,7 @@ const AppReview = () => {
           </div>
         </ReviewComponent>
 
-        <ReviewComponent title="Compute" onEdit={() => {}}>
+        <ReviewComponent title="Compute" onEdit={() => { }}>
           <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">
@@ -127,7 +131,7 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Environment" onEdit={() => {}}>
+        <ReviewComponent title="Environment" onEdit={() => { }}>
           <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">
@@ -147,7 +151,7 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Network" onEdit={() => {}}>
+        <ReviewComponent title="Network" onEdit={() => { }}>
           <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
diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
index ebb602a1f..24506662f 100644
--- a/src/apps/console/server/r-utils/key-constants.js
+++ b/src/apps/console/server/r-utils/key-constants.js
@@ -8,4 +8,8 @@ export const keyconstants = {
   selectedPlan: 'kloudlite.io/ui-selected-plan',
   memPerCpu: 'kloudlite.io/ui-mem-per-cpu',
   nodeType: 'kloudlite.io/ui-node-type',
+  repoName: 'kloudlite.io/ui-repoName',
+  imageTag: 'kloudlite.io/ui-imageTag',
+  image: 'kloudlite.io/ui-image',
+  repoImageUrl: 'kloudlite.io/ui-repoImageUrl',
 };