diff --git a/src/App.vue b/src/App.vue
index 57791b0..207880b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,29 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Welcome to Your Vue.js App" />
+  <header>
+    <nav-bar></nav-bar>
+  </header>
+  <main>
+    <image-form @detect-responsed="onDetectResponsed"></image-form>
+    <news-album></news-album>
+  </main>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import ImageForm from "./components/ImageForm.vue";
+import NavBar from "./components/NavBar.vue";
+import NewsAlbum from "./components/NewsAlbum.vue";
 
 export default {
   name: "App",
   components: {
-    HelloWorld,
+    ImageForm,
+    NavBar,
+    NewsAlbum,
+  },
+  methods: {
+    onDetectResponsed(res) {
+      console.log(res);
+    },
   },
 };
 </script>
@@ -19,8 +33,8 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  /* text-align: center;
+  color: #2c3e50; */
+  /* margin-top: 60px; */
 }
 </style>
diff --git a/src/components/DetectResult.vue b/src/components/DetectResult.vue
new file mode 100644
index 0000000..4eda17b
--- /dev/null
+++ b/src/components/DetectResult.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="col" :hidden="!visible">
+    <h1 class="mb-3 text-center">Detect Result</h1>
+    <img :src="imageUrl" :alt="'Disease ' + diseaseName" />
+    <p>Trustworthiness: {{ trustworthiness }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: { tyep: Boolean, default: false },
+    diseaseName: { type: String },
+    trustworthiness: { type: Number },
+    imageUrl: { type: String },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 11ce0ac..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-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</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/components/ImageForm.vue b/src/components/ImageForm.vue
new file mode 100644
index 0000000..a7c1e72
--- /dev/null
+++ b/src/components/ImageForm.vue
@@ -0,0 +1,39 @@
+<template>
+  <section class="py-5 text-center container">
+    <div class="row py-lg-5">
+      <div class="col-lg-6 col-md-8 mx-auto">
+        <h1 class="fw-light">Skin Disease Detection</h1>
+        <p class="lead text-muted">
+          Know more about your skin, before it's too late!
+        </p>
+        <p>
+          <button
+            type="button"
+            class="btn btn-primary my-2"
+            @click.prevent="onUploadClicked"
+          >
+            Upload a Image
+          </button>
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  methods: {
+    onUploadClicked() {
+      const detectData = {
+        diseaseName: "Test",
+        trustworthiness: 0.12,
+        detectImageUrl: "https://www.baidu.com",
+      };
+
+      this.$emit("detect-responsed", detectData);
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..0798944
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="collapse bg-dark" id="navbarHeader">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-8 col-md-7 py-4">
+          <h4 class="text-white">About</h4>
+          <p class="text-muted">
+            We are building a platform for detecting common skin disease easily,
+            and provide information for you.
+          </p>
+        </div>
+        <div class="col-sm-4 offset-md-1 py-4">
+          <h4 class="text-white">Contact</h4>
+          <ul class="list-unstyled">
+            <li>
+              <a href="https://github.com/" class="text-white">Source Code</a>
+            </li>
+            <li><a href="#" class="text-white">Like on Facebook</a></li>
+            <li>
+              <a href="mailto:dhao2001@outlook.com" class="text-white"
+                >Email me</a
+              >
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="navbar navbar-dark bg-dark shadow-sm">
+    <div class="container">
+      <a href="#" class="navbar-brand d-flex align-items-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          aria-hidden="true"
+          class="me-2"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+          />
+          <circle cx="12" cy="13" r="4" />
+        </svg>
+        <strong>EasySkin</strong>
+      </a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarHeader"
+        aria-controls="navbarHeader"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/components/NewsAlbum.vue b/src/components/NewsAlbum.vue
new file mode 100644
index 0000000..0f76ca3
--- /dev/null
+++ b/src/components/NewsAlbum.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="album py-5 bg-light">
+    <div class="container">
+      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+        <news-album-item></news-album-item>
+        <news-album-item></news-album-item>
+        <news-album-item></news-album-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NewsAlbumItem from "./NewsAlbumItem.vue";
+
+export default {
+  components: {
+    NewsAlbumItem,
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/NewsAlbumItem.vue b/src/components/NewsAlbumItem.vue
new file mode 100644
index 0000000..e118b25
--- /dev/null
+++ b/src/components/NewsAlbumItem.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="col">
+    <div class="card shadow-sm">
+      <svg
+        class="bd-placeholder-img card-img-top"
+        width="100%"
+        height="225"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label="Placeholder: Thumbnail"
+        preserveAspectRatio="xMidYMid slice"
+        focusable="false"
+      >
+        <title>Placeholder</title>
+        <rect width="100%" height="100%" fill="#55595c" />
+        <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
+      </svg>
+
+      <div class="card-body">
+        <h5 class="card-text">My Title</h5>
+        <p class="card-text">
+          This is a wider card with supporting text below as a natural lead-in
+          to additional content. This content is a little bit longer.
+        </p>
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="btn-group">
+            <button type="button" class="btn btn-sm btn-outline-secondary">
+              Read More...
+            </button>
+          </div>
+          <small class="text-muted">9 mins</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>