diff --git a/public/index.html b/public/index.html
index c501684..9f99ab4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>ProLab Accounts Client</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Barlow:500" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:700&amp;subset=japanese" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 9dd118b..9e7ead2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@ export default {
 <style>
   html { height: 100%; }
   body {
-    font-family: 'Barlow', sans-serif;
+    font-family: 'Noto Sans JP', sans-serif;
     height: 100%;
   }
 
diff --git a/src/api/achievement/index.js b/src/api/achievement/index.js
new file mode 100644
index 0000000..4cb10fd
--- /dev/null
+++ b/src/api/achievement/index.js
@@ -0,0 +1,8 @@
+import api from '@/api';
+
+export default {
+  async getAchievements() {
+    const achievementData = (await api.client.get('/achievements')).data;
+    return achievementData;
+  },
+};
diff --git a/src/components/AchievementsList.vue b/src/components/AchievementsList.vue
new file mode 100644
index 0000000..df8da86
--- /dev/null
+++ b/src/components/AchievementsList.vue
@@ -0,0 +1,109 @@
+<template>
+  <ul>
+    <li v-for="item in achievements" :key="item.id">
+      <dl>
+        <dt>{{ item.title }}</dt>
+        <dd class="award">{{ item.award }}</dd>
+        <dd class="year">{{ item.happened_at.split('-')[0] }}</dd>
+        <dd>{{ item.description }}</dd>
+      </dl>
+      <img v-bind:src="item.image_url">
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'AchievementsList',
+  computed: mapState(
+    'achievement', ['achievements'],
+  ),
+  methods: {
+    ...mapActions(
+      'achievement', ['getAchievements'],
+    ),
+  },
+  async created() {
+    this.getAchievements();
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  margin-left: 60px;
+  margin-right: 20px;
+  padding: 0;
+  align-items: flex-start;
+}
+li {
+  margin-bottom: 40px;
+  margin-right: 1%;
+  border: 1px solid #666;
+  list-style: none;
+  width: 24%;
+  position: relative;
+}
+li:hover {
+  cursor: pointer;
+}
+li:hover {
+  background-color: black;
+  color: white;
+  transition-duration: 0.2s;
+}
+
+dl {
+  margin: 20px;
+}
+dt {
+  font-size: 1.4rem;
+}
+dd, dt {
+  width: 85%;
+}
+dd.award {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+dd.year {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  top: 6px;
+  color: #ccc;
+  font-size: 3.5rem;
+  transform: rotate(-90deg) translateY(-100%);
+  transform-origin: right top;
+  line-height: 1;
+  font-family: 'Barlow';
+}
+li:hover dd.year {
+  color: white;
+}
+p {
+  text-overflow: ellipsis;
+}
+img {
+  width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+  li {
+    width: 48%;
+    margin-right: 2%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  li {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 0a3f1eb..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/store/index.js b/src/store/index.js
index 6ea00e2..557a996 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,6 +6,7 @@ import oauthConsent from './modules/oauth/consent';
 import session from './modules/session';
 import user from './modules/user';
 import criticalError from './modules/criticalError';
+import achievement from './modules/achievement';
 import emailConfirmations from './modules/emailConfirmations';
 import memberIntroduction from './modules/memberIntroduction';
 import editUser from './modules/editUser';
@@ -20,6 +21,7 @@ export default new Vuex.Store({
     session,
     user,
     criticalError,
+    achievement,
     emailConfirmations,
     memberIntroduction,
     editUser,
diff --git a/src/store/modules/achievement/index.js b/src/store/modules/achievement/index.js
new file mode 100644
index 0000000..a589e00
--- /dev/null
+++ b/src/store/modules/achievement/index.js
@@ -0,0 +1,24 @@
+import achievementClient from '@/api/achievement';
+
+export default {
+  namespaced: true,
+  state: {
+    achievements: null,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setAchievements(state, achievements) {
+      state.achievements = achievements.achievements;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+  actions: {
+    async getAchievements({ commit }, sessionID) {
+      try {
+        commit('setAchievements', await achievementClient.getAchievements(sessionID));
+      } catch (e) {
+        commit('criticalError/createError', e, { root: true });
+      }
+    },
+  },
+};
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7d4b5e2..35cb2d2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,122 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1><img class="logo" src="@/assets/logo.svg" alt="ProLab"></h1>
+    <section>
+      <h2>部員募集中!</h2>
+      <p>
+        久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
+        興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
+      </p>
+    </section>
+
+    <section>
+      <h2>戦歴</h2>
+      <AchievementsList/>
+    </section>
+
+    <footer>
+      <div v-if="loggedIn">
+        <router-link to="/editprofile">プロフィール編集</router-link>
+        <router-link to="">ログアウト</router-link> <!-- TODO: ログアウトできるようにする -->
+      </div>
+      <div v-else>
+        <router-link to="/login">ログイン</router-link>
+      </div>
+      <small>&copy; Programming Laboratory, 2019</small>
+    </footer>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue';
+import { mapGetters } from 'vuex';
+import AchievementsList from '@/components/AchievementsList.vue';
 
 export default {
   name: 'home',
   components: {
-    HelloWorld,
+    AchievementsList,
+  },
+  computed: {
+    ...mapGetters('session', ['loggedIn']),
   },
 };
 </script>
+
+<style scoped>
+@keyframes slide {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+footer div {
+  text-align: center;
+}
+
+footer a {
+  display: inline-block;
+  padding: 12px;
+  border-bottom: 2px #333 solid;
+  color: black;
+  margin: 0 4px 24px;
+}
+
+footer small {
+  display: block;
+}
+
+.home {
+  max-width: 1500px;
+  margin: 40px auto;
+}
+
+h1 img {
+  max-width: 400px;
+  width: 80%;
+}
+
+section {
+  margin: 40px 0;
+}
+
+h2 {
+  background-color: black;
+  display: inline-block;
+  color: white;
+  font-weight: 200;
+  line-height: 1.1;
+  font-size: 3rem;
+  padding: 0 20px 0 60px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+h2::after {
+  display: block;
+  height: 100%;
+  content: "";
+  position: absolute;
+  background-color: white;
+  top: 0;
+  right: 0;
+  animation: slide 0.5s cubic-bezier(0, 0, 0.16, 0.96);
+}
+
+p {
+  margin-left: 60px;
+  margin-right: 20px;
+}
+
+small {
+  text-align: center;
+}
+
+@media screen and (max-width: 480px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+</style>
diff --git a/src/views/memberIntroduction/Profile.vue b/src/views/memberIntroduction/Profile.vue
index 3da1c78..e429efd 100644
--- a/src/views/memberIntroduction/Profile.vue
+++ b/src/views/memberIntroduction/Profile.vue
@@ -1,36 +1,76 @@
 <template>
   <div>
+    <img :src="memberProfile.icon_url" alt="User Avatar">
     <dl>
-      <dt>Name</dt> <!-- Display Name -->
+      <dt>名前</dt>
       <dd>{{ memberProfile.display_name || memberProfile.name }}</dd>
 
-      <dt>Icon</dt>
-      <dd><img :src="memberProfile.icon_url" alt="user avater"></dd>
+      <dt>学年</dt>
+      <dd>{{ memberProfile.left ? "卒業生" : memberProfile.grade + "年" }}</dd>
 
-      <dt>Department</dt>
-      <dd>{{ memberProfile.department }}</dd>
+      <dt>学科</dt>
+      <dd>{{ memberProfile.department.name }}</dd>
 
-      <dt>Grade</dt> <!-- Left -->
-      <dd>{{ memberProfile.left ? "卒業生" : memberProfile.grade }}</dd>
+      <dt>自己紹介</dt>
+      <dd class="small">{{ memberProfile.description }}</dd>
 
-      <dt>Description</dt>
-      <dd>{{ memberProfile.description }}</dd>
-
-      <dt>Role</dt>
+      <dt v-if="memberProfile.role">役職</dt>
       <dd>{{ memberProfile.role }}</dd>
 
       <dt>Twitter</dt>
-      <dd>{{ memberProfile.twitter_screen_name }}</dd>
+      <dd class="english">{{ memberProfile.twitter_screen_name }}</dd>
 
       <dt>GitHub</dt>
-      <dd>{{ memberProfile.github_user_name }}</dd>
+      <dd class="english">{{ memberProfile.github_user_name }}</dd>
 
       <dt>AtCoder</dt>
-      <dd>{{ memberProfile.atcoder_user_name }}</dd>
+      <dd class="english">{{ memberProfile.atcoder_user_name }}</dd>
     </dl>
   </div>
 </template>
 
+<style scoped>
+div {
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 0 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+div img {
+  width: 30%;
+  height: auto;
+  margin-right: 10%;
+}
+
+div dl {
+  width: 60%;
+}
+
+dd {
+  font-size: 3rem;
+}
+
+dd.small {
+  font-size: 1.5rem;
+}
+
+.english {
+  font-family: 'Noto Sans JP', sans-serif;
+}
+
+@media screen and (max-width: 480px) {
+  div img, div dl {
+    width: 100%;
+  }
+  dd {
+    font-size: 1.5rem;
+  }
+}
+</style>
+
 <script>
 import { mapMutations, mapActions, mapState } from 'vuex';
 
