diff --git a/index.html b/index.html
index 8388c4b..537edad 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-tw">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>Practicum of Attacking and Defense of Network Security</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 6a6cd2d..99f3df8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,25 @@
 <script setup>
+import { ref, KeepAlive } from 'vue';
 import { RouterView } from 'vue-router';
+
+import router from './router';
+
+import Navbar from './components/Navbar.vue';
+import Footer from './components/Footer.vue';
+
+const visitCount = ref(1);
+router.afterEach(() => {
+  visitCount.value++;
+});
 </script>
 
 <template>
-  <RouterView />
+  <Navbar />
+  <RouterView v-slot="{ Component }">
+    <KeepAlive>
+      <component :is="Component" v-if="$route.meta.keepAlive" />
+    </KeepAlive>
+    <component :is="Component" v-if="!$route.meta.keepAlive" />
+  </RouterView>
+  <Footer :visitCount="visitCount" />
 </template>
\ No newline at end of file
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000..678e54e
Binary files /dev/null and b/src/assets/avatar.png differ
diff --git a/src/assets/user.png b/src/assets/user.png
new file mode 100644
index 0000000..e836fb3
Binary files /dev/null and b/src/assets/user.png differ
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
deleted file mode 100644
index 770e9d3..0000000
--- a/src/assets/vue.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Board/BoardForm.vue b/src/components/Board/BoardForm.vue
new file mode 100644
index 0000000..b7d072e
--- /dev/null
+++ b/src/components/Board/BoardForm.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['new-message']);
+
+const name = ref('');
+const message = ref('');
+
+function submit() {
+  if (!name || !message) {
+    return;
+  }
+
+  emit('new-message', { name: name.value, message: message.value });
+  name.value = '';
+  message.value = '';
+}
+</script>
+
+<template>
+  <form @submit.prevent="submit">
+    <fieldset class="ts-fieldset">
+      <legend class="ts-legend">New Message</legend>
+      <div class="ts-wrap is-vertical">
+        <div class="ts-control">
+          <div class="label">Name</div>
+          <div class="content is-fluid">
+            <div class="ts-input">
+              <input name="name" type="text" placeholder="Name" v-model="name" />
+            </div>
+          </div>
+        </div>
+        <div class="ts-control">
+          <div class="label">Message</div>
+          <div class="content is-fluid">
+            <div class="ts-input">
+              <textarea name="message" placeholder="Message" v-model="message"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ts-wrap has-top-spaced is-end-aligned">
+        <button class="ts-button" type="submit" :class="{'is-disabled': name === '' || message === '' }">Submit</button>
+      </div>
+    </fieldset>
+  </form>
+</template>
\ No newline at end of file
diff --git a/src/components/Board/BoardMessage.vue b/src/components/Board/BoardMessage.vue
new file mode 100644
index 0000000..52f074b
--- /dev/null
+++ b/src/components/Board/BoardMessage.vue
@@ -0,0 +1,23 @@
+<script setup>
+defineProps(['message']);
+</script>
+
+<template>
+  <div class="ts-conversation">
+    <div class="avatar">
+      <img src="../../assets/user.png" alt="Avatar" />
+    </div>
+    <div class="content">
+      <div class="bubble">
+        <div class="author">{{ message.name }}</div>
+        <div class="text">{{ message.message }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ts-conversation > .content {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..341411b
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,11 @@
+<script setup>
+defineProps(['visitCount']);
+</script>
+
+<template>
+  <div class="ts-content is-center-aligned is-vertically-very-padded">
+    <div class="ts-container">
+      <div class="ts-text is-secondary">Total Visitor: {{ visitCount }}</div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/src/components/Home/BlankSlate.vue b/src/components/Home/BlankSlate.vue
new file mode 100644
index 0000000..45db685
--- /dev/null
+++ b/src/components/Home/BlankSlate.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="ts-blankslate is-large">
+    <div class="ts-image is-circular">
+      <img src="../../assets/avatar.png" alt="Avatar" width="200">
+    </div>
+    <div class="header has-top-spaced">
+      R13922074
+    </div>
+    <div class="description">
+      楊東翰
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..ec208dd
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,38 @@
+<script>
+import { RouterLink } from 'vue-router';
+
+</script>
+
+<template>
+  <nav>
+    <div class="ts-container navbar-container">
+      <div class="ts-wrap">
+        <RouterLink class="ts-header is-brand" to="/">網路攻防實習</RouterLink>
+        <div class="ts-tab is-tall">
+          <RouterLink class="item" to="/" :class="{'is-active': $route.path == '/'}">關於</RouterLink>
+          <RouterLink class="item" to="/board" :class="{'is-active': $route.path == '/board'}">留言板</RouterLink>
+        </div>
+      </div>
+      <div class="actions">
+        <button class="ts-button is-disabled" disabled>登入</button>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  background-color: var(--ts-gray-100);
+  color: var(--ts-white-100);
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ts-header.is-brand {
+  text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 27ea86d..d5aa0d2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
+import BoardView from '../views/BoardView.vue';
 
 const routes = [
   {
     path: '/',
     name: 'Home',
     component: HomeView
+  },
+  {
+    path: '/board',
+    name: 'Board',
+    component: BoardView,
+    meta: {
+      keepAlive: true
+    }
   }
 ];
 
diff --git a/src/style.css b/src/style.css
index f691315..e69de29 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/views/BoardView.vue b/src/views/BoardView.vue
index e69de29..73b1ddd 100644
--- a/src/views/BoardView.vue
+++ b/src/views/BoardView.vue
@@ -0,0 +1,22 @@
+<script setup>
+import BoardForm from '../components/Board/BoardForm.vue';
+import BoardMessage from '../components/Board/BoardMessage.vue';
+import { ref } from 'vue';
+
+const messages = ref([]);
+
+const onSubmit = (message) => {
+  messages.value.push(message);
+};
+</script>
+
+<template>
+  <div class="ts-container">
+    <BoardForm @new-message="onSubmit" />
+    <div class="ts-content is-horizontally-fitted is-vertically-padded">
+      <div class="ts-wrap is-vertical">
+        <BoardMessage :message="message" v-for="message in messages" :key="message.id" />
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 379810b..d78cb44 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,30 +1,19 @@
 <script setup>
-import HelloWorld from '../components/HelloWorld.vue';
+import BlankSlate from '../components/Home/BlankSlate.vue';
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div class="ts-container">
+    <BlankSlate />
+    <div class="ts-content is-center-aligned">
+      <p>
+        我是楊東翰，目前就讀於國立臺灣大學資訊工程學系，這是我的個人網站，歡迎來到我的小天地！
+      </p>
+      <span class="ts-icon is-envelope-icon"></span>&nbsp;&nbsp;<a href="mailto:r13922074@csie.ntu.edu.tw" class="ts-link">r13922074@csie.ntu.edu.tw</a>
+    </div>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
+
 </style>
