diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 140ba599..10a1a362 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,14 +1,16 @@
 <template>
-  <h1>{{ title }}</h1>
+  <div class="home">
+    <div class="inner">
+      <h1>HI <br/> ChatGPT-PLUS</h1>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {ref} from "vue"
 import {useRouter} from "vue-router";
 import {checkSession} from "@/action/session";
 import {isMobile} from "@/utils/libs";
 
-const title = ref("HI, ChatGPT PLUS!");
 const router = useRouter();
 checkSession().then(() => {
   if (isMobile()) {
@@ -21,3 +23,29 @@ checkSession().then(() => {
 })
 
 </script>
+
+<style lang="stylus" scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  background-color: #282c34;
+  height 100vh
+
+  .inner {
+    text-align center
+    display flex
+    justify-content center
+    max-width 400px
+    align-items center
+
+    h1 {
+      color: #202020;
+      font-size: 55px;
+      line-height 1.5
+      font-weight: bold;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+  }
+
+}
+</style>