diff --git a/src/App.vue b/src/App.vue
index 5028729..6ad1bca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,83 @@
 <template>
-  <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>
+    <div class="d-flex align-items-center vh-100" v-if="!loggedIn">
+      <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="avatarAbbr"
+              size="4em"
+              class="my-3"
+            ></b-avatar>
+            <b-form @submit.prevent="login">
+              <b-form-input class="my-3" v-model="nickname"> </b-form-input>
+              <b-button type="submit" class="my-3" variant="success"
+                >Login</b-button
+              >
+            </b-form>
+          </b-col>
+        </b-row>
+      </b-container>
+    </div>
+    <div class="vh-100 d-flex flex-column" v-if="loggedIn">
+      <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>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { ipcRenderer } from "electron";
 
 @Component
-export default class App extends Vue {}
+export default class App extends Vue {
+  private nickname = "";
+  private loggedIn = false;
+  private error = true;
+  get avatarAbbr(): string {
+    const chineseChar = new RegExp("[\u4E00-\u9FA5]");
+    let firstChar = this.nickname.charAt(0);
+    if (chineseChar.test(firstChar)) {
+      return firstChar;
+    } else {
+      return this.nickname.substring(0, 2);
+    }
+  }
+  public login(): void {
+    console.log(this.nickname);
+    ipcRenderer.send("login", this.nickname);
+    ipcRenderer.on("loginStatus", (_, success) => {
+      if (success) {
+        this.loggedIn = true;
+      }
+    });
+  }
+}
 </script>
diff --git a/src/background.ts b/src/background.ts
index 13ac1c2..3617a4f 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,6 +1,6 @@
 "use strict";
 
-import { app, protocol, BrowserWindow } from "electron";
+import { app, protocol, BrowserWindow, ipcMain } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
@@ -78,3 +78,8 @@ if (isDevelopment) {
     });
   }
 }
+
+ipcMain.on("login", (event, nickname) => {
+  event.reply("loginStatus", true);
+  console.log(nickname);
+});
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
deleted file mode 100644
index 20c9cca..0000000
--- a/src/components/Chat.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<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/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..cad8a5e
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true,
+    },
+  },
+};