diff --git a/src/App.vue b/src/App.vue
index 58338c3..670f6b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <template>
+  <NavBar />
   <swiper
     :virtual="true"
     :direction="'vertical'"
@@ -70,6 +71,7 @@ import SoftHardwareSummary from '@/views/SoftHardwareSummary'
 import CorporateCulture from '@/views/CorporateCulture'
 import SoftHardwarePictureList from '@/views/SoftHardwarePictureList'
 import SoftHardwareDetail from '@/views/SoftHardwareDetail'
+import NavBar from 'cpns/NavBar'
 
 // Import Swiper styles
 import 'swiper/css'
@@ -81,6 +83,7 @@ export default {
     SwiperSlide,
     ContactUs,
     VideoPlayer,
+    NavBar,
     CorporateCulture,
     CaseDetails,
     HeaderSwiper,
diff --git a/src/assets/scss/globalVar.scss b/src/assets/scss/globalVar.scss
index e69de29..9eef964 100644
--- a/src/assets/scss/globalVar.scss
+++ b/src/assets/scss/globalVar.scss
@@ -0,0 +1 @@
+$theme_color: rgb(255, 194, 0);
diff --git a/src/components/NavBar/index.vue b/src/components/NavBar/index.vue
index 923a5d9..ea60aea 100644
--- a/src/components/NavBar/index.vue
+++ b/src/components/NavBar/index.vue
@@ -1,5 +1,17 @@
-<template>header</template>
+<template>
+  <div class="header_container">header</div>
+</template>
 
 <script setup></script>
 
-<style></style>
+<style scoped lang="scss">
+.header_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 80px;
+  z-index: 999;
+}
+</style>
diff --git a/src/style.scss b/src/style.scss
index 0b103b1..6a24b35 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -64,8 +64,8 @@ body {
     }
 
     .swiper-pagination-bullet-active {
-      color: rgb(255, 194, 0);
-      border-top: solid 1px rgb(255, 194, 0);
+      color: $theme_color;
+      border-top: solid 1px $theme_color;
       background: none;
     }
   }