diff --git a/package.json b/package.json
index 591cf5c..9cfe8ca 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.4.3",
     "@unocss/reset": "^0.61.9",
+    "@vicons/ionicons5": "^0.13.0",
+    "@vicons/utils": "^0.1.4",
     "axios": "^1.7.3",
     "cnjm-postcss-px-to-viewport": "^1.0.1",
     "gsap": "^3.12.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a469e2e..8080635 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
       '@unocss/reset':
         specifier: ^0.61.9
         version: 0.61.9
+      '@vicons/ionicons5':
+        specifier: ^0.13.0
+        version: 0.13.0
+      '@vicons/utils':
+        specifier: ^0.1.4
+        version: 0.1.4(vue@3.4.35)
       axios:
         specifier: ^1.7.3
         version: 1.7.3
@@ -1338,6 +1344,9 @@ packages:
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
+  '@types/node@14.14.45':
+    resolution: {integrity: sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==}
+
   '@types/node@22.13.10':
     resolution: {integrity: sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==}
 
@@ -1447,6 +1456,14 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@vicons/ionicons5@0.13.0':
+    resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
+
+  '@vicons/utils@0.1.4':
+    resolution: {integrity: sha512-OHI19qVNN6i+uPQ+Y3f2s0dUxwsYnOCcKBW7XOU4yXXO1aU3ZoKpblCc3+4N0qmgoJs5rWKRAaMisipqEXJwAg==}
+    peerDependencies:
+      vue: ^3.0.6
+
   '@vitejs/plugin-legacy@5.4.1':
     resolution: {integrity: sha512-kee0l7dVevCNs1l3u2PnihVunvQ0WTJL2UJ/siQGD3Iht546mR9NO16tCv32uCP6lcGO1QDLqlPqInJtV1FE7A==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1502,6 +1519,9 @@ packages:
   '@vueuse/shared@10.11.0':
     resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
 
+  '@xicons/utils@0.1.4':
+    resolution: {integrity: sha512-uXxKDLz9abr80yJC05XSTq6wlyFcdW+N/1IYJkeHjzzXVc4VQ0sEYMoMMTjAH7HQBOyOkzOB4pf5NGF72lwa8Q==}
+
   acorn@8.12.1:
     resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
@@ -1816,6 +1836,9 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  css-render@0.13.9:
+    resolution: {integrity: sha512-n3C4ZH59rveBrUlAD7n0Ze9/gUMKa4dlH1C9CWKpGcIHR/xRcIVXzBGy1iw8WWq2ySmn2/ZqOpySQNAK5Pb6sw==}
+
   css-render@0.15.14:
     resolution: {integrity: sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==}
 
@@ -5135,6 +5158,8 @@ snapshots:
 
   '@types/minimatch@5.1.2': {}
 
+  '@types/node@14.14.45': {}
+
   '@types/node@22.13.10':
     dependencies:
       undici-types: 6.20.0
@@ -5317,6 +5342,13 @@ snapshots:
     dependencies:
       vue: 3.4.35
 
+  '@vicons/ionicons5@0.13.0': {}
+
+  '@vicons/utils@0.1.4(vue@3.4.35)':
+    dependencies:
+      '@xicons/utils': 0.1.4
+      vue: 3.4.35
+
   '@vitejs/plugin-legacy@5.4.1(terser@5.31.3)(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@babel/core': 7.25.2
@@ -5412,6 +5444,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@xicons/utils@0.1.4':
+    dependencies:
+      css-render: 0.13.9
+
   acorn@8.12.1: {}
 
   agent-base@7.1.1:
@@ -5770,6 +5806,12 @@ snapshots:
     dependencies:
       postcss: 8.4.40
 
+  css-render@0.13.9:
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@types/node': 14.14.45
+      csstype: 3.0.11
+
   css-render@0.15.14:
     dependencies:
       '@emotion/hash': 0.8.0
diff --git a/src/App.vue b/src/App.vue
index ac9336a..1713d08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-import { useI18n } from "vue-i18n";
-import { NConfigProvider, NDropdown } from "naive-ui";
-const { locale } = useI18n();
-const primaryColor = ref("#2B69A1");
+import { useI18n } from 'vue-i18n'
+import { NConfigProvider, NDropdown } from 'naive-ui'
+const { locale } = useI18n()
+const primaryColor = ref('#8B59F7')
 const themeOverrides = ref({
   common: {
     primaryColorPressed: primaryColor,
@@ -15,10 +15,7 @@ const themeOverrides = ref({
     primaryColor: primaryColor,
     primaryColorHover: primaryColor,
   },
-});
-
-
-
+})
 </script>
 
 <template>
diff --git a/src/assets/images/header/logo.png b/src/assets/images/header/logo.png
new file mode 100644
index 0000000..61c89ed
Binary files /dev/null and b/src/assets/images/header/logo.png differ
diff --git a/src/components/customDefaultPage/index.vue b/src/components/customDefaultPage/index.vue
new file mode 100644
index 0000000..9b18e12
--- /dev/null
+++ b/src/components/customDefaultPage/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customDefaultPage/size375/index.vue'
+import size1920 from '@/components/customDefaultPage/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/customDefaultPage/size1920/index.vue b/src/components/customDefaultPage/size1920/index.vue
new file mode 100644
index 0000000..e086d8b
--- /dev/null
+++ b/src/components/customDefaultPage/size1920/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <!-- 通用缺省页 -->
+    <div class="custom-default-page">
+      <div class="search-area">
+        <customSelectSearch></customSelectSearch>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+  </script>
+  <style scoped lang="scss">
+  .search-area {
+      width: 300px;
+      margin: 100px 300px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/customDefaultPage/size375/index.vue b/src/components/customDefaultPage/size375/index.vue
new file mode 100644
index 0000000..b5d46ad
--- /dev/null
+++ b/src/components/customDefaultPage/size375/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <!-- 通用缺省页 -->
+    <div class="custom-default-page">
+      <div class="search-area">
+        <customSelectSearch></customSelectSearch>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+  </script>
+  <style scoped lang="scss">
+  .search-area {
+      width: 1500px;
+      margin: 500px 200px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/customFooter/index.vue b/src/components/customFooter/index.vue
new file mode 100644
index 0000000..ed6fd6a
--- /dev/null
+++ b/src/components/customFooter/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customFooter/size375/index.vue'
+import size1920 from '@/components/customFooter/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/customFooter/size1920/index.vue b/src/components/customFooter/size1920/index.vue
new file mode 100644
index 0000000..4e81dea
--- /dev/null
+++ b/src/components/customFooter/size1920/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>Copyright &copy; 2024-2027 FiEE</span>
+    </div>
+  </template>
+  
+  <script setup></script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 24px 0;
+    color: #888;
+    font-size: 15px;
+    background: #f7f8fa;
+    letter-spacing: 1px;
+    border-top: 1px solid #ececec;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/customFooter/size375/index.vue b/src/components/customFooter/size375/index.vue
new file mode 100644
index 0000000..6236c16
--- /dev/null
+++ b/src/components/customFooter/size375/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>Copyright &copy; 2024-2027 FiEE</span>
+    </div>
+  </template>
+  
+  <script setup></script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 120px 0;
+    color: #888;
+    font-size: 75px;
+    background: #f7f8fa;
+    letter-spacing: 5px;
+    border-top: 5px solid #ececec;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/customHeader/index.vue b/src/components/customHeader/index.vue
new file mode 100644
index 0000000..5886eab
--- /dev/null
+++ b/src/components/customHeader/index.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customHeader/size375/index.vue'
+import size1920 from '@/components/customHeader/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/customHeader/size1920/index.vue b/src/components/customHeader/size1920/index.vue
new file mode 100644
index 0000000..e787029
--- /dev/null
+++ b/src/components/customHeader/size1920/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo">
+        <NImage width="108" height="33" :src="FiEELogo" preview-disabled />
+      </div>
+      <div class="header-menu">
+        <NMenu
+          mode="horizontal"
+          :options="menuOptions"
+          :inverted="isScrolled"
+          @update:value="handleMenuSelect"
+        />
+      </div>
+    </div>
+  </NLayoutHeader>
+</template>
+
+<script setup>
+import FiEELogo from '@/assets/images/header/logo.png'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const { t } = useI18n()
+const router = useRouter()
+
+const isScrolled = ref(false)
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key)
+  if (option && option.href) {
+    router.push(option.href)
+  }
+}
+
+// 菜单配置
+const menuOptions = [
+  {
+    label: t('header_menu.corporate_information.title'),
+    key: 'corporate_information',
+    children: [
+      {
+        label: t('header_menu.corporate_information.company_overview'),
+        key: 'company_overview',
+      },
+      {
+        label: t('header_menu.corporate_information.business_introduction'),
+        key: 'business_introduction',
+      },
+      {
+        label: t('header_menu.corporate_information.management'),
+        key: 'management',
+      },
+      {
+        label: t('header_menu.corporate_information.board_of_directors'),
+        key: 'board_of_directors',
+      },
+      {
+        label: t('header_menu.corporate_information.committee_appointments'),
+        key: 'committee_appointments',
+      },
+      {
+        label: t('header_menu.corporate_information.governance'),
+        key: 'governance',
+      },
+      {
+        label: t('header_menu.corporate_information.corporate_video'),
+        key: 'corporate_video',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.financial_information.title'),
+    key: 'financial_information',
+    children: [
+      {
+        label: t('header_menu.financial_information.sec_filings'),
+        key: 'sec_filings',
+      },
+      {
+        label: t('header_menu.financial_information.quarterly_results'),
+        key: 'quarterly_results',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.stock_information.title'),
+    key: 'stock_information',
+    children: [
+      {
+        label: t('header_menu.stock_information.stock_quote'),
+        key: 'stock_quote',
+      },
+      {
+        label: t('header_menu.stock_information.historic_stock_price'),
+        key: 'historic_stock_price',
+      },
+      {
+        label: t('header_menu.stock_information.investment_calculator'),
+        key: 'investment_calculator',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.news_releases.title'),
+    key: 'news_releases',
+    children: [
+      {
+        label: t('header_menu.news_releases.press_releases'),
+        key: 'press_releases',
+        href: '/new-releases',
+      },
+      {
+        label: t('header_menu.news_releases.events_calendar'),
+        key: 'events_calendar',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.investor_resources.title'),
+    key: 'investor_resources',
+    children: [
+      {
+        label: t('header_menu.investor_resources.ir_contacts'),
+        key: 'ir_contacts',
+      },
+      {
+        label: t('header_menu.investor_resources.email_alerts'),
+        key: 'email_alerts',
+      },
+    ],
+  },
+]
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  --header-height: 80px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  background: transparent;
+  height: var(--header-height);
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+}
+
+.header-menu {
+  display: block;
+}
+</style>
diff --git a/src/components/customHeader/size375/index.vue b/src/components/customHeader/size375/index.vue
new file mode 100644
index 0000000..7b911b7
--- /dev/null
+++ b/src/components/customHeader/size375/index.vue
@@ -0,0 +1,271 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo">
+        <NImage
+          style="width: 108px; height: 33px; max-width: 100%;"
+          :src="FiEELogo"
+          preview-disabled
+        />
+      </div>
+      <div class="menu-btn" @click="toggleMenu">
+        <n-icon size="28">
+          <menu-outline />
+        </n-icon>
+      </div>
+    </div>
+  </NLayoutHeader>
+  <transition name="fade-slide">
+    <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
+      <NMenu
+        mode="vertical"
+        :options="menuOptions"
+        :inverted="isScrolled"
+        class="mobile-menu"
+        accordion
+        @update:value="handleMenuSelect"
+      />
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import FiEELogo from '@/assets/images/header/logo.png'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui'
+import { MenuOutline } from '@vicons/ionicons5'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const { t } = useI18n()
+const router = useRouter()
+
+const isScrolled = ref(false)
+const showMenu = ref(false)
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value
+}
+const closeMenu = () => {
+  showMenu.value = false
+}
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key)
+  if (option && option.href) {
+    router.push(option.href)
+    showMenu.value = false // 跳转后收起菜单
+  }
+}
+
+// 菜单配置
+const menuOptions = [
+  {
+    label: t('header_menu.corporate_information.title'),
+    key: 'corporate_information',
+    children: [
+      {
+        label: t('header_menu.corporate_information.company_overview'),
+        key: 'company_overview',
+      },
+      {
+        label: t('header_menu.corporate_information.business_introduction'),
+        key: 'business_introduction',
+      },
+      {
+        label: t('header_menu.corporate_information.management'),
+        key: 'management',
+      },
+      {
+        label: t('header_menu.corporate_information.board_of_directors'),
+        key: 'board_of_directors',
+      },
+      {
+        label: t('header_menu.corporate_information.committee_appointments'),
+        key: 'committee_appointments',
+      },
+      {
+        label: t('header_menu.corporate_information.governance'),
+        key: 'governance',
+      },
+      {
+        label: t('header_menu.corporate_information.corporate_video'),
+        key: 'corporate_video',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.financial_information.title'),
+    key: 'financial_information',
+    children: [
+      {
+        label: t('header_menu.financial_information.sec_filings'),
+        key: 'sec_filings',
+      },
+      {
+        label: t('header_menu.financial_information.quarterly_results'),
+        key: 'quarterly_results',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.stock_information.title'),
+    key: 'stock_information',
+    children: [
+      {
+        label: t('header_menu.stock_information.stock_quote'),
+        key: 'stock_quote',
+      },
+      {
+        label: t('header_menu.stock_information.historic_stock_price'),
+        key: 'historic_stock_price',
+      },
+      {
+        label: t('header_menu.stock_information.investment_calculator'),
+        key: 'investment_calculator',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.news_releases.title'),
+    key: 'news_releases',
+    children: [
+      {
+        label: t('header_menu.news_releases.press_releases'),
+        key: 'press_releases',
+        href: '/new-releases',
+      },
+      {
+        label: t('header_menu.news_releases.events_calendar'),
+        key: 'events_calendar',
+      },
+    ],
+  },
+  {
+    label: t('header_menu.investor_resources.title'),
+    key: 'investor_resources',
+    children: [
+      {
+        label: t('header_menu.investor_resources.ir_contacts'),
+        key: 'ir_contacts',
+      },
+      {
+        label: t('header_menu.investor_resources.email_alerts'),
+        key: 'email_alerts',
+      },
+    ],
+  },
+]
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  background: transparent;
+  height: 320px;
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0 80px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.logo :deep(.n-image) {
+  max-width: 100px;
+  height: auto;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #465564;
+  font-size: 75px;
+  padding: 40px 70px;
+  border-radius: 30px;
+  background: #f7f8fa;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
+  user-select: none;
+  transition: background 0.2s;
+}
+.menu-btn:active {
+  background: #ececec;
+}
+
+.mobile-menu-wrapper {
+  position: fixed;
+  top: 320px;
+  left: 0;
+  width: 100vw;
+  background: #fff;
+  z-index: 1100;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  padding: 40px 0 80px 0;
+  max-height: 1500px;
+  overflow-y: auto;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+</style>
diff --git a/src/components/customSelectSearch/index.vue b/src/components/customSelectSearch/index.vue
new file mode 100644
index 0000000..4543fd2
--- /dev/null
+++ b/src/components/customSelectSearch/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="custom-select-search">
+    <n-select
+      :options="state.selectOptions"
+      v-model:value="state.selectedValue"
+    />
+    <n-input
+      v-model:value="state.inputValue"
+      type="text"
+      placeholder="Search"
+    />
+    <n-button type="primary">Go</n-button>
+  </div>
+</template>
+<script setup>
+import { reactive } from 'vue'
+import { NSelect, NInput, NButton } from 'naive-ui'
+
+const state = reactive({
+  selectedValue: 'all_years', //选中值
+  selectOptions: [
+    {
+      label: 'All Years',
+      value: 'all_years',
+    },
+  ], //下拉选项
+  inputValue: '', //输入值
+})
+</script>
+<style scoped lang="scss">
+.custom-select-search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+</style>
diff --git a/src/locales/en.js b/src/locales/en.js
index 8177a40..664947f 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -463,5 +463,38 @@ export default {
       ],
       note: 'Minim representatives (other than authorized speakers) who receive inquiries from the media, market professionals, or shareholders should not respond to such inquiries but should refer the inquirer to an authorized speaker. However, Minim representatives assigned to the Investor Relations and Marketing teams may respond to routine inquiries about public information in accordance with guidelines established by authorized speakers from time to time.'
     }
+  },
+  header_menu: {
+    corporate_information: {
+      title: 'Corporate Information',
+      company_overview: 'Company Overview',
+      business_introduction: 'Business Introduction',
+      management: 'Management',
+      board_of_directors: 'Board of Directors',
+      committee_appointments: 'Committee Appointments',
+      governance: 'Governance',
+      corporate_video: 'Corporate Video'
+    },
+    financial_information: {
+      title: 'Financial Information',
+      sec_filings: 'SEC Filings',
+      quarterly_results: 'Quarterly Results',
+    },
+    stock_information: {
+      title: 'Stock Information',
+      stock_quote: 'Stock Quote',
+      historic_stock_price: 'Historic Stock Price',
+      investment_calculator: 'Investment Calculator'
+    },
+    news_releases: {
+      title: 'News Releases',
+      press_releases: 'Press Releases',
+      events_calendar: 'Events Calendar'
+    },
+    investor_resources: {
+      title: 'Investor Resources',
+      ir_contacts: 'IR Contacts',
+      email_alerts: 'Email Alerts'
+    }
   }
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8cb90a9..32140c7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,43 +5,16 @@ import { setupRouterGuards } from './router-guards';
 const routes = [
     {
         path: '/',
-        redirect: 'home'
-    },
-    {
-        path: '/home',
         name: 'home',
-        component: () => import('@/views/home/index.vue'),
-        // beforeEnter: (to, from, next) => {
-
-        //     localStorage.clear()
-        //     next()
-        // }
-    },
-    // {
-    //     path: '/companyprofil',
-    //     name: 'Companyprofil',
-    //     component: () => import('@/views/companyprofil/index.vue'),
-    // },
-    // {
-    //     path: '/companyprofildetail',
-    //     name: 'Companyprofildetail',
-    //     component: () => import('@/views/companyprofildetail/index.vue'),
-    // },
-    // {
-    //     path: '/businessintroduction',
-    //     name: 'Businessintroduction',
-    //     component: () => import('@/views/businessintroduction/index.vue'),
-    // },
-    // {
-    //     path: '/investor',
-    //     name: 'Investor',
-    //     component: () => import('@/views/investor/index.vue'),
-    // },
-    // {
-    //     path: '/investorhandbook',
-    //     name: 'Investorhandbook',
-    //     component: () => import('@/views/investorhandbook/index.vue'),
-    // },
+        component: () => import('@/views/home/index.vue'), // MainLayout
+        children: [
+            {
+                path: 'new-releases',
+                name: 'new-releases',
+                component: () => import('@/views/new-releases/index.vue')
+            },
+        ]
+    }
 ];
 
 const router = createRouter({
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0952934..642d65e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,34 +1,12 @@
 <script setup>
-import { computed } from "vue";
-import { useWindowSize } from "@vueuse/core";
-
-import size375 from "@/views/home/size375/index.vue";
-import size768 from "@/views/home/size768/index.vue";
-import size1440 from "@/views/home/size1440/index.vue";
-import size1920 from "@/views/home/size1920/index.vue";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-
-const router = useRouter();
-const { width } = useWindowSize();
-const { t } = useI18n();
-
-const viewComponent = computed(() => {
-  const viewWidth = width.value;
-  if (viewWidth <= 450) {
-    return size375;
-  } else if (viewWidth <= 1100) {
-    return size768;
-  } else if (viewWidth <= 1500) {
-    return size1440;
-  } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920;
-  }
-});
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
-  <component :is="viewComponent" />
+  <customHeader />
+  <router-view />
+  <customFooter />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/views/home/size1920/index.vue b/src/views/home/size1920/index.vue
index 23d9860..15a1a09 100644
--- a/src/views/home/size1920/index.vue
+++ b/src/views/home/size1920/index.vue
@@ -1,22 +1,17 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 </script>
 
 <template>
-  <header className="header">
+  <!-- <header className="header">
   1920
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  </header> -->
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
-
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
 </style>
-
diff --git a/src/views/home/size375/index.vue b/src/views/home/size375/index.vue
index f3e7467..9802b79 100644
--- a/src/views/home/size375/index.vue
+++ b/src/views/home/size375/index.vue
@@ -1,22 +1,17 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 </script>
 
 <template>
-  <header className="header">
+  <!-- <header className="header">
   375
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  </header> -->
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
-
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
 </style>
-
diff --git a/src/views/new-releases/index.vue b/src/views/new-releases/index.vue
new file mode 100644
index 0000000..4baeaa6
--- /dev/null
+++ b/src/views/new-releases/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="new-releases-page">
+    <component :is="viewComponent" />
+  </div>
+</template>
+<script setup>
+import size1920 from '@/views/new-releases/size1920/index.vue'
+import size375 from '@/views/new-releases/size375/index.vue'
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/new-releases/size1920/index.vue b/src/views/new-releases/size1920/index.vue
new file mode 100644
index 0000000..11f6624
--- /dev/null
+++ b/src/views/new-releases/size1920/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="new-releases-page">
+    <customDefaultPage></customDefaultPage>
+  </div>
+</template>
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/new-releases/size375/index.vue b/src/views/new-releases/size375/index.vue
new file mode 100644
index 0000000..11f6624
--- /dev/null
+++ b/src/views/new-releases/size375/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="new-releases-page">
+    <customDefaultPage></customDefaultPage>
+  </div>
+</template>
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+</script>
+
+<style scoped lang="scss"></style>