diff --git a/dolphinscheduler-ui-next/src/App.tsx b/dolphinscheduler-ui-next/src/App.tsx
index 3b31730a77..685cf635a4 100644
--- a/dolphinscheduler-ui-next/src/App.tsx
+++ b/dolphinscheduler-ui-next/src/App.tsx
@@ -17,14 +17,12 @@
 
 import { defineComponent, computed } from 'vue'
 import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui'
-import { useAsyncRouteStore } from '@/store/route/route'
 import { useThemeStore } from '@/store/theme/theme'
 import themeList from '@/themes'
 
 const App = defineComponent({
   name: 'App',
   setup() {
-    const asyncRouteStore = useAsyncRouteStore()
     const themeStore = useThemeStore()
     const currentTheme = computed(() =>
       themeStore.darkTheme ? darkTheme : undefined
@@ -37,8 +35,6 @@ const App = defineComponent({
     const themeOverrides: GlobalThemeOverrides =
       themeList[this.currentTheme ? 'dark' : 'light']
 
-    console.log(themeOverrides)
-
     return (
       <NConfigProvider
         theme={this.currentTheme}
diff --git a/dolphinscheduler-ui-next/src/assets/images/nav-logo.svg b/dolphinscheduler-ui-next/src/assets/images/logo-dark.svg
old mode 100755
new mode 100644
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/nav-logo.svg
rename to dolphinscheduler-ui-next/src/assets/images/logo-dark.svg
diff --git a/dolphinscheduler-ui-next/src/assets/images/logo.svg b/dolphinscheduler-ui-next/src/assets/images/logo-light.svg
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/logo.svg
rename to dolphinscheduler-ui-next/src/assets/images/logo-light.svg
diff --git a/dolphinscheduler-ui-next/src/components/card/index.tsx b/dolphinscheduler-ui-next/src/components/card/index.tsx
new file mode 100644
index 0000000000..357f973188
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/card/index.tsx
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, defineProps } from 'vue'
+import { NCard } from 'naive-ui'
+import Props from '@/components/card/types'
+
+const headerStyle = {
+  borderBottom: '1px solid var(--border-color)',
+}
+
+const Card = defineComponent({
+  name: 'Card',
+  setup() {
+    const props = defineProps<Props>()
+
+    return { ...props }
+  },
+  render() {
+    const { title, $slots } = this
+    return (
+      <NCard title={title} size='small' headerStyle={headerStyle}>
+        {$slots}
+      </NCard>
+    )
+  },
+})
+
+export default Card
diff --git a/dolphinscheduler-ui-next/src/components/card/types.ts b/dolphinscheduler-ui-next/src/components/card/types.ts
new file mode 100644
index 0000000000..f6f526f909
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/card/types.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface Props {
+  title: string
+}
+
+export default Props
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
index 2254960345..a0b832c6d5 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
@@ -14,10 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
 .logo {
   width: 180px;
   height: 100%;
   margin-left: 12px;
-  background: url('../../../../assets/images/logo.svg') 100% no-repeat;
+}
+
+.logo-dark {
+  background: url('../../../../assets/images/logo-dark.svg') 100% no-repeat;
+}
+
+.logo-light {
+  background: url('../../../../assets/images/logo-light.svg') 100% no-repeat;
 }
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
index fd658dfaf9..3fe91e2dcc 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
@@ -16,13 +16,25 @@
  */
 
 import { defineComponent } from 'vue'
+import { useThemeStore } from '@/store/theme/theme'
 import styles from './index.module.scss'
 
 const logo = defineComponent({
   name: 'logo',
-  setup() {},
+  setup() {
+    const themeStore = useThemeStore()
+
+    return { themeStore }
+  },
   render() {
-    return <div class={styles.logo}></div>
+    return (
+      <div
+        class={[
+          styles.logo,
+          styles[`logo-${this.themeStore.darkTheme ? 'dark' : 'light'}`],
+        ]}
+      />
+    )
   },
 })
 
diff --git a/dolphinscheduler-ui-next/src/themes/modules/dark.ts b/dolphinscheduler-ui-next/src/themes/modules/dark.ts
index 0505b5cd3e..90b7bc9d5a 100644
--- a/dolphinscheduler-ui-next/src/themes/modules/dark.ts
+++ b/dolphinscheduler-ui-next/src/themes/modules/dark.ts
@@ -17,7 +17,7 @@
 
 const dark = {
   common: {
-    bodyColor: '#28292d',
+    // bodyColor: '#28292d',
   },
 }
 
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index aec7920f0c..35d63d1bd6 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -17,6 +17,7 @@
 
 import { defineComponent } from 'vue'
 import styles from './index.module.scss'
+import Card from '@/components/card'
 import PieChart from '@/components/chart/modules/Pie'
 import GaugeChart from '@/components/chart/modules/Gauge'
 import BarChart from '@/components/chart/modules/Bar'
@@ -27,10 +28,9 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.container}>
-        Home Test
-        <PieChart />
-        <GaugeChart />
-        <BarChart />
+        <Card title='test'>{{ default: () => <PieChart /> }}</Card>
+        <Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
+        <Card title='test'>{{ default: () => <BarChart /> }}</Card>
       </div>
     )
   },
diff --git a/dolphinscheduler-ui-next/src/views/login/index.module.scss b/dolphinscheduler-ui-next/src/views/login/index.module.scss
index 6a7c8c0b88..e4605586ad 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/login/index.module.scss
@@ -45,7 +45,7 @@
       .logo-img {
         width: 280px;
         height: 60px;
-        background: url('../../assets/images/logo.svg') 50% no-repeat;
+        background: url('../../assets/images/logo-light.svg') 50% no-repeat;
         margin: 0 auto;
       }
     }
@@ -54,4 +54,4 @@
       padding: 30px 20px;
     }
   }
-}
\ No newline at end of file
+}