diff --git a/web/src/App.vue b/web/src/App.vue
index 3870c35..4a37923 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -107,4 +107,16 @@ body {
   height: 100%;
 }
 
+.textShadow {
+  position: absolute;
+  top: 0;
+  text-shadow: 0 2px 0 var(--el-color-primary);
+  color: transparent;
+  z-index: -1;
+}
+
+.relative {
+  position: relative;
+}
+
 </style>
diff --git a/web/src/components/sliderNav.vue b/web/src/components/sliderNav.vue
index 476b93c..7231100 100644
--- a/web/src/components/sliderNav.vue
+++ b/web/src/components/sliderNav.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="sliderNav flex column">
-    <b class="mar-v16" v-text="$sys.title"/>
+    <b class="systemTitle mar-v16" v-text="$sys.title"/>
     <div class="fill">
       <div class="item" v-for="menu in menus" :key="menu.id">
         <el-row class="pad-h8" align="middle" @click="menu.expand=!menu.expand">
@@ -77,10 +77,13 @@ export default {
   color: #fff;
   box-shadow: 2px 0 8px 4px rgba(15, 15, 21, 0.15);
 
-  & > b {
-    font-size: 18px;
+  .systemTitle {
     line-height: 32px;
+    font-size: 20px;
+    width: 100%;
+    color: #eee;
     text-align: center;
+    text-shadow: 1px 1px var(--el-color-primary);
   }
 
   .item {