diff --git a/src/components/DeploymentInfo/DeploymentInfo.tsx b/src/components/DeploymentInfo/DeploymentInfo.tsx
index 44a8a5f6b..fcb0f3f34 100644
--- a/src/components/DeploymentInfo/DeploymentInfo.tsx
+++ b/src/components/DeploymentInfo/DeploymentInfo.tsx
@@ -8,6 +8,7 @@ import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
 import { ChatBoxTooltip, Spinner, Typography } from '@subql/components';
 import { ProjectType } from '@subql/contract-sdk/types';
 import { clsx } from 'clsx';
+import { toSvg } from 'jdenticon';
 
 import { useChatBoxStore } from 'src/stores/chatbox';
 
@@ -55,7 +56,10 @@ export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId, type, m
       chatBoxInstance={chatBoxStore.chatBoxRef}
     >
       <div className={styles.projectInfo}>
-        <IPFSImage src={project?.image || '/static/default.project.png'} className={styles.ipfsImage} />
+        <IPFSImage
+          src={project?.image || `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project?.name, 500))}`}
+          className={styles.ipfsImage}
+        />
 
         <div
           className={styles.projectTextInfo}
diff --git a/src/components/DoAllocate/DoAllocate.tsx b/src/components/DoAllocate/DoAllocate.tsx
index 193d7f810..092a5750c 100644
--- a/src/components/DoAllocate/DoAllocate.tsx
+++ b/src/components/DoAllocate/DoAllocate.tsx
@@ -21,6 +21,7 @@ import { parseError, TOKEN } from '@utils';
 import { Button, Form, Radio, Tooltip } from 'antd';
 import { useForm, useWatch } from 'antd/es/form/Form';
 import BigNumber from 'bignumber.js';
+import { toSvg } from 'jdenticon';
 
 import { PER_MILL } from 'src/const/const';
 import { useWeb3Store } from 'src/stores';
@@ -294,7 +295,10 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess,
 
         <div className="flex" style={{ marginTop: 24 }}>
           <IPFSImage
-            src={project.data?.metadata.image || '/static/default.project.png'}
+            src={
+              project.data?.metadata.image ||
+              `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project.data?.metadata.name, 500))}`
+            }
             style={{ width: 60, height: 60, borderRadius: 8 }}
           ></IPFSImage>
 
diff --git a/src/components/DoBooster/index.tsx b/src/components/DoBooster/index.tsx
index 9ec33514b..b07370fed 100644
--- a/src/components/DoBooster/index.tsx
+++ b/src/components/DoBooster/index.tsx
@@ -24,6 +24,7 @@ import { useForm, useWatch } from 'antd/es/form/Form';
 import BigNumberJs from 'bignumber.js';
 import clsx from 'clsx';
 import { ContractReceipt } from 'ethers';
+import { toSvg } from 'jdenticon';
 
 import { useWeb3Store } from 'src/stores';
 
@@ -248,7 +249,10 @@ const DoBooster: FC<IProps> = ({
             </div>
             <div className="flex" style={{ marginTop: 24 }}>
               <IPFSImage
-                src={project.data?.metadata.image || '/static/default.project.png'}
+                src={
+                  project.data?.metadata.image ||
+                  `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project.data?.metadata.name, 500))}`
+                }
                 style={{ width: 60, height: 60, borderRadius: 8 }}
               ></IPFSImage>
 
@@ -329,6 +333,7 @@ const DoBooster: FC<IProps> = ({
                     type="info"
                     variant="small"
                     style={{ transform: 'translateY(-10px)' }}
+                    target="_blank"
                   >
                     Get SQT
                   </Typography.Link>
diff --git a/src/components/GetEndpoint/index.tsx b/src/components/GetEndpoint/index.tsx
index 7fd398429..1107a30b7 100644
--- a/src/components/GetEndpoint/index.tsx
+++ b/src/components/GetEndpoint/index.tsx
@@ -86,7 +86,7 @@ const GetEndpoint: FC<IProps> = ({ deploymentId, project, initialOpen = false })
   const [userHostingPlan, setUserHostingPlan] = useState<IGetHostingPlans[]>([]);
   const [userApiKeys, setUserApiKeys] = useState<GetUserApiKeys[]>([]);
 
-  const { getHostingPlanApi, checkIfHasLogin, getUserApiKeysApi } = useConsumerHostServices({
+  const { getHostingPlanApi, checkIfHasLogin, getUserApiKeysApi, createNewApiKey } = useConsumerHostServices({
     alert: false,
     autoLogin: false,
   });
@@ -316,9 +316,18 @@ const GetEndpoint: FC<IProps> = ({ deploymentId, project, initialOpen = false })
       setNextBtnLoading(true);
       const hostingPlan = await fetchHostingPlan();
 
-      const apiKeys = await getUserApiKeysApi();
+      let apiKeys = await getUserApiKeysApi();
       if (!isConsumerHostError(apiKeys.data)) {
         setUserApiKeys(apiKeys.data);
+        if (!apiKeys.data.find((i) => i.name === specialApiKeyName)) {
+          await createNewApiKey({
+            name: specialApiKeyName,
+          });
+          apiKeys = await getUserApiKeysApi();
+          if (!isConsumerHostError(apiKeys.data)) {
+            setUserApiKeys(apiKeys.data);
+          }
+        }
       }
       return {
         hostingPlan,
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
index fcd029d03..ce666aac8 100644
--- a/src/components/ProjectCard/ProjectCard.tsx
+++ b/src/components/ProjectCard/ProjectCard.tsx
@@ -10,6 +10,7 @@ import { formatSQT } from '@subql/react-hooks';
 import { formatNumber, ROUTES, TOKEN } from '@utils';
 import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
+import { toSvg } from 'jdenticon';
 
 import { ProjectMetadata } from 'src/models';
 
@@ -32,7 +33,8 @@ const ProjectCard: React.FC<Props> = ({ project, href, onClick }) => {
       return '';
     }
 
-    if (!project.metadata.image) return '/static/default.project.png';
+    if (!project.metadata.image)
+      return `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project.metadata.name, 500))}`;
 
     return project.metadata.image;
   }, [project.metadata]);
diff --git a/src/components/ProjectHeader/ProjectHeader.tsx b/src/components/ProjectHeader/ProjectHeader.tsx
index 173dc6cf3..f92da5eee 100644
--- a/src/components/ProjectHeader/ProjectHeader.tsx
+++ b/src/components/ProjectHeader/ProjectHeader.tsx
@@ -19,6 +19,7 @@ import { Button, Tooltip } from 'antd';
 import { BigNumber } from 'bignumber.js';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
+import { toSvg } from 'jdenticon';
 
 import { ETH_TYPE_DICTION, NETWORK_TYPE_DICTION } from 'src/const/const';
 import { useProjectStore } from 'src/stores/project';
@@ -160,7 +161,13 @@ const ProjectHeader: React.FC<Props> = ({
   return (
     <div className={styles.container}>
       <div className={styles.left}>
-        <IPFSImage src={project.metadata.image || '/static/default.project.png'} className={styles.image} />
+        <IPFSImage
+          src={
+            project.metadata.image ||
+            `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project?.metadata.name, 500))}`
+          }
+          className={styles.image}
+        />
       </div>
       <div className={styles.inner}>
         <div className={styles.upper}>
diff --git a/src/hooks/useConsumerHostServices.tsx b/src/hooks/useConsumerHostServices.tsx
index 3f35a0e5d..85975bc29 100644
--- a/src/hooks/useConsumerHostServices.tsx
+++ b/src/hooks/useConsumerHostServices.tsx
@@ -175,6 +175,7 @@ export const useConsumerHostServices = (
       }
 
       const res = await requestConsumerHostToken(account);
+      console.warn(res);
 
       if (res.error) {
         return {
diff --git a/src/pages/dashboard/components/ActiveCard/ActiveCard.tsx b/src/pages/dashboard/components/ActiveCard/ActiveCard.tsx
index c6479a1e4..e932b1f82 100644
--- a/src/pages/dashboard/components/ActiveCard/ActiveCard.tsx
+++ b/src/pages/dashboard/components/ActiveCard/ActiveCard.tsx
@@ -12,6 +12,7 @@ import { filterSuccessPromoiseSettledResult, getMonthProgress, notEmpty } from '
 import { useInterval } from 'ahooks';
 import { Button, Carousel, Progress, Skeleton } from 'antd';
 import dayjs from 'dayjs';
+import { toSvg } from 'jdenticon';
 
 import { ProjectMetadata } from 'src/models';
 
@@ -134,7 +135,10 @@ export const ActiveCard = () => {
                       {projects.projects?.nodes.filter(notEmpty).map((project, index) => (
                         <IPFSImage
                           key={project.id}
-                          src={projectsMetadata[index]?.image || '/static/default.project.png'}
+                          src={
+                            projectsMetadata[index]?.image ||
+                            `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(projectsMetadata[index]?.name, 500))}`
+                          }
                           className={styles.image}
                           onClick={() => {
                             navigate(`/explorer/project/${project.id}`);
diff --git a/src/pages/indexer/IndexerProfile/IndexerProfile.tsx b/src/pages/indexer/IndexerProfile/IndexerProfile.tsx
index cfb4f2959..e3f9558ed 100644
--- a/src/pages/indexer/IndexerProfile/IndexerProfile.tsx
+++ b/src/pages/indexer/IndexerProfile/IndexerProfile.tsx
@@ -31,6 +31,7 @@ import clsx from 'clsx';
 import { toChecksumAddress } from 'ethereum-checksum-address';
 import { constants } from 'ethers';
 import { t } from 'i18next';
+import { toSvg } from 'jdenticon';
 import { isString } from 'lodash-es';
 
 import { OwnDelegator } from '../MyDelegators/OwnDelegator';
@@ -185,7 +186,10 @@ const ActiveCard = (props: { account: string }) => {
               .map((project) => (
                 <IPFSImage
                   key={project.projectId}
-                  src={project.projectMeta.image || '/static/default.project.png'}
+                  src={
+                    project.projectMeta.image ||
+                    `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project.projectMeta.name, 500))}`
+                  }
                   className={styles.image}
                   onClick={() => {
                     navigate(`/explorer/project/${project.projectId}`);
diff --git a/src/pages/projects/Project/Project.tsx b/src/pages/projects/Project/Project.tsx
index 21db54f63..9aebc29db 100644
--- a/src/pages/projects/Project/Project.tsx
+++ b/src/pages/projects/Project/Project.tsx
@@ -15,6 +15,7 @@ import { useUpdate } from 'ahooks';
 import { Breadcrumb, Button, Form, Input } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import clsx from 'clsx';
+import { toSvg } from 'jdenticon';
 
 import { ProjectDetails, ProjectType } from 'src/models';
 
@@ -246,7 +247,10 @@ const Project: React.FC = () => {
 
                 <div style={{ display: 'flex', gap: 24, marginTop: 24 }}>
                   <IPFSImage
-                    src={project.metadata.image || '/static/default.project.png'}
+                    src={
+                      project.metadata.image ||
+                      `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(project.metadata.name, 500))}`
+                    }
                     style={{ width: 160, height: 160 }}
                   />{' '}
                   <div className="col-flex" style={{ flex: 1 }}>