diff --git a/open-isle-cli/src/assets/global.css b/open-isle-cli/src/assets/global.css
index 2f180ae08..c23f7d07d 100644
--- a/open-isle-cli/src/assets/global.css
+++ b/open-isle-cli/src/assets/global.css
@@ -1,4 +1,5 @@
 :root {
+  --primary-color: rgb(9, 95, 105);;
   --header-height: 60px;
   --header-background-color: white;
   --header-border-color: lightgray;
diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index fb9642996..dec4fd912 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -1,6 +1,298 @@
 <template>
   <div class="home-page">
-    hello?
+    <div class="search-container">
+      <div class="search-title">Where possible begins</div>
+      <div class="search-subtitle">希望你喜欢这里。有问题，请提问，或搜索现有帖子</div>
+      <div class="search-input">
+        <i class="search-input-icon fas fa-search"></i>
+        <input type="text" placeholder="Search">
+      </div>
+    </div>
+
+
+    <div class="topic-container">
+      <div class="topic-item-container">
+        <div class="topic-item selected">最新</div>
+        <div class="topic-item">排行榜</div>
+        <div class="topic-item">热门</div>
+        <div class="topic-item">类别</div> 
+      </div>
+    </div>
+
+
+    <div class="article-container">
+      <div class="article-item">
+        <div class="article-main-container">
+          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <div class="article-info-container">
+            <div class="article-info-item">
+              <i class="fas fa-user"></i>
+              <div class="article-info-item-text">开发调优</div>
+            </div>
+
+            <div class="article-tags-container">
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">AI</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Python</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Java</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="article-member-avatars-container">
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div> 
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+        </div>
+        <div class="article-comments">
+          139
+        </div>
+        <div class="article-views">
+          2.4k
+        </div>
+        <div class="article-time">
+          23小时前
+        </div>
+      </div>
+
+      <div class="article-item">
+        <div class="article-main-container">
+          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <div class="article-info-container">
+            <div class="article-info-item">
+              <i class="fas fa-user"></i>
+              <div class="article-info-item-text">开发调优</div>
+            </div>
+
+            <div class="article-tags-container">
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">AI</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Python</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Java</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="article-member-avatars-container">
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div> 
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+        </div>
+        <div class="article-comments">
+          139
+        </div>
+        <div class="article-views">
+          2.4k
+        </div>
+        <div class="article-time">
+          23小时前
+        </div>
+      </div>
+      <div class="article-item">
+        <div class="article-main-container">
+          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <div class="article-info-container">
+            <div class="article-info-item">
+              <i class="fas fa-user"></i>
+              <div class="article-info-item-text">开发调优</div>
+            </div>
+
+            <div class="article-tags-container">
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">AI</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Python</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Java</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="article-member-avatars-container">
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div> 
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+        </div>
+        <div class="article-comments">
+          139
+        </div>
+        <div class="article-views">
+          2.4k
+        </div>
+        <div class="article-time">
+          23小时前
+        </div>
+      </div>
+      <div class="article-item">
+        <div class="article-main-container">
+          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <div class="article-info-container">
+            <div class="article-info-item">
+              <i class="fas fa-user"></i>
+              <div class="article-info-item-text">开发调优</div>
+            </div>
+
+            <div class="article-tags-container">
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">AI</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Python</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Java</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="article-member-avatars-container">
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div> 
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+        </div>
+        <div class="article-comments">
+          139
+        </div>
+        <div class="article-views">
+          2.4k
+        </div>
+        <div class="article-time">
+          23小时前
+        </div>
+      </div>
+      <div class="article-item">
+        <div class="article-main-container">
+          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <div class="article-info-container">
+            <div class="article-info-item">
+              <i class="fas fa-user"></i>
+              <div class="article-info-item-text">开发调优</div>
+            </div>
+
+            <div class="article-tags-container">
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">AI</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Python</div>
+              </div>
+              <div class="article-tag-item">
+                <i class="fas fa-tag"></i>
+                <div class="article-tag-item-text">Java</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="article-member-avatars-container">
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div> 
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+          <div class="article-member-avatar-item">
+            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          </div>
+        </div>
+        <div class="article-comments">
+          139
+        </div>
+        <div class="article-views">
+          2.4k
+        </div>
+        <div class="article-time">
+          23小时前
+        </div>
+      </div>
+    </div> 
   </div>
 </template>
 
@@ -14,6 +306,172 @@ export default {
 .home-page {
   background-color: white;
   color: black;
-  height: 100%;
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
 }
+
+.search-container {
+  margin-top: 100px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
+.search-title {
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.search-subtitle {
+  font-size: 16px;
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+
+  border: 1px solid lightgray;
+  border-radius: 10px;
+  padding: 10px;
+
+  width: 100%;
+  max-width: 600px;
+  margin-top: 20px;
+}
+
+.search-input input {
+  border: none;
+  outline: none;
+  font-size: 16px;
+  width: 100%;
+  margin-left: 10px;
+}
+
+.topic-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 20px 0;
+}
+
+.topic-item-container {
+  margin-left: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.topic-item {
+  padding: 2px 10px;
+}
+
+.topic-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.article-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.article-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  border-bottom: 1px solid lightgray;
+}
+
+.article-main-container {
+  margin-left: 20px;
+  padding: 10px 0;
+  width: 60%;
+}
+
+.article-item-title {
+  font-size: 20px;
+}
+
+.article-item-description {
+  margin-top: 10px;
+  font-size: 14px;
+  color: gray;
+}
+
+.article-info-container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.article-info-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.article-tags-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.article-tag-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.article-member-avatars-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
+}
+
+.article-member-avatar-item {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.article-member-avatar-item-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.article-comments {
+  margin-left: 20px;
+}
+
+.article-views {
+  margin-left: 20px;
+}
+
+.article-time {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+
 </style>