diff --git a/src/pages/model-hub/create.tsx b/src/pages/model-hub/create.tsx
index 1fde4b8e49..bdc6836edb 100644
--- a/src/pages/model-hub/create.tsx
+++ b/src/pages/model-hub/create.tsx
@@ -11,6 +11,7 @@ import {
 } from "@instill-ai/toolkit";
 
 import { PageTitle, PageHead, Topbar, Sidebar, PageBase } from "@/components";
+import { Logo } from "@instill-ai/design-system";
 
 export const getServerSideProps: GetServerSideProps = async () => {
   if (env("NEXT_PUBLIC_DISABLE_CREATE_UPDATE_DELETE_RESOURCE")) {
@@ -89,7 +90,7 @@ const CreateModelPage: FC & {
 CreateModelPage.getLayout = (page) => {
   return (
     <PageBase>
-      <Topbar />
+      <Topbar logo={<Logo variant="ColourLogomarkWhiteType" width={180} />} />
       <PageBase.Container>
         <Sidebar />
         <PageBase.Content>{page}</PageBase.Content>
diff --git a/src/pages/onboarding.tsx b/src/pages/onboarding.tsx
index b127be2d81..71215fee00 100644
--- a/src/pages/onboarding.tsx
+++ b/src/pages/onboarding.tsx
@@ -8,6 +8,7 @@ import {
   Sidebar,
   PageBase,
 } from "@/components";
+import { Logo } from "@instill-ai/design-system";
 
 type GetLayOutProps = {
   page: ReactElement;
@@ -35,7 +36,7 @@ const OnBoardingPage: FC & {
 OnBoardingPage.getLayout = (page) => {
   return (
     <PageBase>
-      <Topbar />
+      <Topbar logo={<Logo variant="ColourLogomarkWhiteType" width={180} />} />
       <PageBase.Container>
         <Sidebar />
         <PageBase.Content>{page}</PageBase.Content>