diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index 525729791..221c2ec92 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -202,8 +202,12 @@ export const useAppState = () => {
   const getRepoName = (imageUrl: string) => {
     const parts: string[] = imageUrl.split(':');
     const repoParts: string[] = parts[0].split('/');
-    console.log("repo name", repoParts[repoParts.length - 1])
-    return repoParts[repoParts.length - 1];
+    if (repoParts.length == 1) {
+      return repoParts[repoParts.length - 1];
+    } else {
+      const repoSlicePart: string[] = repoParts.slice(2)
+      return repoSlicePart.join("/")
+    }
   }
 
   const getImageTag = (imageUrl: string) => {
diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
index a28c07b1d..9f6dd1c9c 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -141,7 +141,7 @@ const ListView = ({ items, onDelete }: IResource) => {
         return (
           <List.Row
             key={id}
-            to={`/${account}/repo/${name}`}
+            to={`/${account}/repo/${btoa(name)}`}
             className="!p-3xl"
             columns={[
               {
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
index 7aaf4e78a..d6089ca91 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -13,6 +13,7 @@ import { IProjectContext } from '../../$project+/_layout';
 
 const LocalBreadcrum = () => {
   const { repo, account } = useParams();
+  const repoName = atob(repo ? repo : "")
   return (
     <div className="flex flex-row items-center">
       <Breadcrum.Button
@@ -29,9 +30,9 @@ const LocalBreadcrum = () => {
         }
       />
       <Breadcrum.Button
-        to={`/${account}/repo/${repo}`}
+        to={`/${account}/repo/${repoName}`}
         LinkComponent={Link}
-        content={<span>{repo}</span>}
+        content={<span>{repoName}</span>}
       />
     </div>
   );
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
index 00aa8897d..485930746 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
@@ -17,7 +17,7 @@ export const loader = async (ctx: IRemixCtx) => {
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
     const { data, errors } = await GQLServerHandler(ctx.request).listDigest({
-      repoName: repo,
+      repoName: atob(repo),
       pagination: getPagination(ctx),
       search: getSearch(ctx),
     });