diff --git a/api/utils.ts b/api/utils.ts
index afe85be2..c0c5d843 100644
--- a/api/utils.ts
+++ b/api/utils.ts
@@ -1,15 +1,12 @@
 import axios from 'axios'
 
-function replaceUrl(obj) {
+function replaceUrl(obj: any) {
   for (let key in obj) {
     if (
       typeof obj[key] === 'string' &&
       obj[key].startsWith('https://i.pximg.net/')
     ) {
-      obj[key] = obj[key].replace(
-        'https://i.pximg.net/',
-        '/image/'
-      )
+      obj[key] = obj[key].replace('https://i.pximg.net/', '/image/')
     } else if (typeof obj[key] === 'object') {
       obj[key] = replaceUrl(obj[key])
     }
diff --git a/package.json b/package.json
index f6d91a94..799e9379 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pixiv-now",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "private": true,
   "main": "index.js",
   "repository": "https://github.com/Wjghj-Project/pixiv-now.git",
diff --git a/src/App.vue b/src/App.vue
index 2335981b..adecca71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,8 @@ export default defineComponent({
 </script>
 
 <style scoped>
-main {
-  /* min-height: 70vh; */
+main article {
+  /* min-height: 100vh; */
   padding: 1rem;
 }
 </style>
diff --git a/src/components/AuthorCard.vue b/src/components/AuthorCard.vue
index 8bfcf792..8a0009a3 100644
--- a/src/components/AuthorCard.vue
+++ b/src/components/AuthorCard.vue
@@ -29,9 +29,9 @@ export default defineComponent({
 .authorCard {
   box-shadow: 0 0 4px #888;
   border-radius: 4px;
+  padding: 1rem;
   display: flex;
   align-items: center;
-  padding: 1rem;
 }
 .left {
   margin-right: 1rem;
diff --git a/src/router.ts b/src/router.ts
index 80f2fe2b..f4adc626 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -5,12 +5,13 @@ import {
 } from 'vue-router'
 
 import index from './view/index.vue'
-import indexArtwork from './view/indexArtwork.vue'
-import viewArtwork from './view/viewArtwork.vue'
+import indexArtwork from './view/artwork/index.vue'
+import viewArtwork from './view/artwork/view.vue'
 import users from './view/users.vue'
+import error404 from './view/404.vue'
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes: [],
 })
 
@@ -20,11 +21,13 @@ router.addRoute({
 })
 router.addRoute({
   path: '/artworks',
+  alias: ['/illust'],
   name: '',
   component: indexArtwork,
 })
 router.addRoute({
   path: '/artworks/:id',
+  alias: ['/illust/:id'],
   name: 'Artworks',
   component: viewArtwork,
 })
@@ -33,5 +36,10 @@ router.addRoute({
   name: 'Users',
   component: users,
 })
+router.addRoute({
+  path: '/:pathMatch(.*)*',
+  name: 'NotFound',
+  component: error404,
+})
 
 export { router }
diff --git a/src/static/common.css b/src/static/common.css
index b2b9b12b..baf0d88e 100644
--- a/src/static/common.css
+++ b/src/static/common.css
@@ -1,3 +1,7 @@
+:root {
+  font-size: 16px;
+}
+
 html,
 body {
   margin: 0;
@@ -11,3 +15,20 @@ body {
   /* text-align: center; */
   color: #2c3e50;
 }
+
+h1 {
+  font-size: 2rem;
+  text-shadow: 2px 2px 0px #fff;
+  box-shadow: 0 -0.5em 0 rgb(93, 233, 243) inset;
+}
+h2 {
+  display: inline-block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  /* margin: 0.4rem auto; */
+  padding: 0 0.4rem;
+  font-size: 1.4rem;
+  text-shadow: 2px 2px 0px #fff;
+  box-shadow: 0 -0.5em 0 rgb(93, 188, 243) inset;
+}
diff --git a/src/view/404.vue b/src/view/404.vue
new file mode 100644
index 00000000..8fb4436f
--- /dev/null
+++ b/src/view/404.vue
@@ -0,0 +1,67 @@
+<template>
+  <section class="error-404">
+    <div class="title">404</div>
+    <div class="description">啊咧？啊咧咧——？！页面跑丢了！！！</div>
+    <div class="random" @click="random404">{{ msg }}</div>
+  </section>
+</template>
+
+<script lang="ts">
+function pick(list: any[]) {
+  return list[Math.floor(Math.random() * list.length)]
+}
+const errMsg = [
+  '就像装在游戏机盒子里的作业本一样没有人喜欢！',
+  // FF14骚话
+  '就像闪耀登场释放天辉的白魔法师一样没有人喜欢！',
+  '就像冰4火4一个慢动作的黑魔法师一样没有人喜欢！',
+  '就像耗尽了了以太超流的学者一样没有人喜欢！',
+  '就像忘记了每分钟背刺的忍者一样没有人喜欢！',
+  '就像进本后跳999接受LB需求退本一气呵成的龙骑一样没有人喜欢！',
+  '就像成天把拉拉菲尔族成为食材的人一样没有人喜欢！',
+  '就像死而不僵状态下的暗黑骑士一样没有人喜欢！',
+  '就像无论如何也触发不了诗心的诗人一样没有人喜欢！',
+]
+
+export default {
+  data() {
+    return {
+      msg: '',
+    }
+  },
+  methods: {
+    random404() {
+      this.msg = pick(errMsg)
+    },
+  },
+  mounted() {
+    this.random404()
+  },
+}
+</script>
+
+<style scoped>
+.error-404 {
+  margin: 10rem auto;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.error-404 > div {
+  width: 100%;
+}
+.title {
+  font-size: 6rem;
+  font-weight: bold;
+}
+.description {
+  font-size: 1.5rem;
+}
+.random {
+  color: #aaa;
+  user-select: none;
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/view/indexArtwork.vue b/src/view/artwork/index.vue
similarity index 92%
rename from src/view/indexArtwork.vue
rename to src/view/artwork/index.vue
index dab55a96..734f8729 100644
--- a/src/view/indexArtwork.vue
+++ b/src/view/artwork/index.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { router } from '../router'
+import { router } from '../../router'
 export default {
   data() {
     return {
diff --git a/src/view/viewArtwork.vue b/src/view/artwork/view.vue
similarity index 83%
rename from src/view/viewArtwork.vue
rename to src/view/artwork/view.vue
index 06b5e63a..4884bbcc 100644
--- a/src/view/viewArtwork.vue
+++ b/src/view/artwork/view.vue
@@ -11,7 +11,7 @@
     </div>
     <div class="description" v-if="illust.description">
       <h2>简介</h2>
-      <p v-html="illust.description"></p>
+      <p class="card" v-html="illust.description"></p>
     </div>
   </section>
   <section class="error" v-if="error">
@@ -24,8 +24,8 @@
 
 <script lang="ts">
 import axios from 'axios'
-import Gallery from '../components/Gallery.vue'
-import AuthorCard from '../components/AuthorCard.vue'
+import Gallery from '../../components/Gallery.vue'
+import AuthorCard from '../../components/AuthorCard.vue'
 
 export default {
   data() {
@@ -75,4 +75,14 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+h1,
+h2 {
+  text-align: center;
+}
+.card {
+  box-shadow: 0 0 4px #888;
+  border-radius: 4px;
+  padding: 1rem;
+}
+</style>
diff --git a/src/view/index.vue b/src/view/index.vue
index 9b9f640a..de6197d8 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <section style="text-align: center">
-    <h1>Home</h1>
+  <section class="home">
+    <div class="title">PixivNow</div>
     <p>Pixiv Service Proxy.</p>
     <p>
       →
@@ -23,4 +23,14 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+.home {
+  margin: 10rem auto;
+  height: 100%;
+  text-align: center;
+}
+.title {
+  font-size: 6rem;
+  font-weight: bold;
+}
+</style>