diff --git a/src/App.vue b/src/App.vue
index 9b7e84d..5028729 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,22 @@
 <template>
-  <div class="vh-100 d-flex flex-column">
-    <div class="flex-fill overflow-auto pt-3 px-3">
-      <div class="d-flex my-2">
-        <b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
-        <div class="d-flex flex-column">
-          <p class="my-1">Zhao Zuohong</p>
-          <b-button variant="primary" class="mb-2 mr-5 text-left"
-            >Earth is the third planet from the Sun and the only astronomical
-            object known to harbor life.</b-button
-          >
-        </div>
-      </div>
-      <div class="d-flex flex-row-reverse my-2">
-        <b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
-        <div class="d-flex flex-column">
-          <p class="my-1 text-right">Zhao Zuohong</p>
-          <b-button variant="success" class="mb-2 ml-5 text-left"
-            >It is the densest planet in the Solar System and the largest and
-            most massive of the four rocky planets.</b-button
-          >
-        </div>
-      </div>
-    </div>
-    <b-form class="d-flex m-3">
-      <b-form-input class="flex-fill mr-2"> </b-form-input>
-      <b-button pill variant="success">Button</b-button>
-    </b-form>
+  <div class="d-flex align-items-center vh-100">
+    <b-container fluid>
+      <b-row class="justify-content-center">
+        <b-col class="col-8 col-sm-6 col-md-4 text-center">
+          <b-avatar
+            button
+            variant="primary"
+            text=""
+            size="4em"
+            class="my-3"
+          ></b-avatar>
+          <b-form>
+            <b-form-input class="my-3"> </b-form-input>
+            <b-button class="my-3" variant="success">Button</b-button>
+          </b-form>
+        </b-col>
+      </b-row>
+    </b-container>
   </div>
 </template>
 
diff --git a/src/background.ts b/src/background.ts
index c4ec0a2..13ac1c2 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -34,20 +34,20 @@ async function createWindow() {
   }
 }
 
-// Quit when all windows are closed.
-app.on("window-all-closed", () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
+// // Quit when all windows are closed.
+// app.on("window-all-closed", () => {
+//   // On macOS it is common for applications and their menu bar
+//   // to stay active until the user quits explicitly with Cmd + Q
+//   if (process.platform !== "darwin") {
+//     app.quit();
+//   }
+// });
 
-app.on("activate", () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) createWindow();
-});
+// app.on("activate", () => {
+//   // On macOS it's common to re-create a window in the app when the
+//   // dock icon is clicked and there are no other windows open.
+//   if (BrowserWindow.getAllWindows().length === 0) createWindow();
+// });
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
new file mode 100644
index 0000000..20c9cca
--- /dev/null
+++ b/src/components/Chat.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="vh-100 d-flex flex-column">
+    <div class="flex-fill overflow-auto pt-3 px-3">
+      <div class="d-flex my-2">
+        <b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
+        <div class="d-flex flex-column">
+          <p class="my-1">Zhao Zuohong</p>
+          <b-button variant="primary" class="mb-2 mr-5 text-left"
+            >Earth is the third planet from the Sun and the only astronomical
+            object known to harbor life.</b-button
+          >
+        </div>
+      </div>
+      <div class="d-flex flex-row-reverse my-2">
+        <b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
+        <div class="d-flex flex-column">
+          <p class="my-1 text-right">Zhao Zuohong</p>
+          <b-button variant="success" class="mb-2 ml-5 text-left"
+            >It is the densest planet in the Solar System and the largest and
+            most massive of the four rocky planets.</b-button
+          >
+        </div>
+      </div>
+    </div>
+    <b-form class="d-flex m-3">
+      <b-form-input class="flex-fill mr-2"> </b-form-input>
+      <b-button pill variant="success">Button</b-button>
+    </b-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class Chat extends Vue {}
+</script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 5b9de5e..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,122 +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-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</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 lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private 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>