diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 970e51e..c86941a 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -42,47 +42,38 @@
         </div>
         
         <div class="hero-right">
-          <!-- Logo 区域 -->
-          <div class="logo-container">
-            <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="CrowdSight Logo" class="hero-logo" />
-          </div>
-          
-          <button class="scroll-down-btn" @click="scrollToBottom">
-            ↓
-          </button>
-        </div>
-      </section>
-
-      <!-- Use Cases Section -->
-      <section class="usecases-section">
-        <h2 class="usecases-title">{{ $t('home.useCases') }}</h2>
-        <div class="usecases-grid">
-          <div class="usecase-card">
-            <div class="usecase-icon">📰</div>
-            <div class="usecase-content">
-              <div class="usecase-name">{{ $t('home.useCase1Title') }}</div>
-              <div class="usecase-desc">{{ $t('home.useCase1Desc') }}</div>
-            </div>
-          </div>
-          <div class="usecase-card">
-            <div class="usecase-icon">📋</div>
-            <div class="usecase-content">
-              <div class="usecase-name">{{ $t('home.useCase2Title') }}</div>
-              <div class="usecase-desc">{{ $t('home.useCase2Desc') }}</div>
-            </div>
-          </div>
-          <div class="usecase-card">
-            <div class="usecase-icon">📢</div>
-            <div class="usecase-content">
-              <div class="usecase-name">{{ $t('home.useCase3Title') }}</div>
-              <div class="usecase-desc">{{ $t('home.useCase3Desc') }}</div>
-            </div>
-          </div>
-          <div class="usecase-card">
-            <div class="usecase-icon">📖</div>
-            <div class="usecase-content">
-              <div class="usecase-name">{{ $t('home.useCase4Title') }}</div>
-              <div class="usecase-desc">{{ $t('home.useCase4Desc') }}</div>
+          <!-- Use Cases -->
+          <div class="usecases-inline">
+            <h3 class="usecases-title">{{ $t('home.useCases') }}</h3>
+            <div class="usecases-grid">
+              <div class="usecase-card">
+                <div class="usecase-icon">📰</div>
+                <div class="usecase-content">
+                  <div class="usecase-name">{{ $t('home.useCase1Title') }}</div>
+                  <div class="usecase-desc">{{ $t('home.useCase1Desc') }}</div>
+                </div>
+              </div>
+              <div class="usecase-card">
+                <div class="usecase-icon">📋</div>
+                <div class="usecase-content">
+                  <div class="usecase-name">{{ $t('home.useCase2Title') }}</div>
+                  <div class="usecase-desc">{{ $t('home.useCase2Desc') }}</div>
+                </div>
+              </div>
+              <div class="usecase-card">
+                <div class="usecase-icon">📢</div>
+                <div class="usecase-content">
+                  <div class="usecase-name">{{ $t('home.useCase3Title') }}</div>
+                  <div class="usecase-desc">{{ $t('home.useCase3Desc') }}</div>
+                </div>
+              </div>
+              <div class="usecase-card">
+                <div class="usecase-icon">📖</div>
+                <div class="usecase-content">
+                  <div class="usecase-name">{{ $t('home.useCase4Title') }}</div>
+                  <div class="usecase-desc">{{ $t('home.useCase4Desc') }}</div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -622,55 +613,63 @@ const startSimulation = () => {
 }
 
 .hero-right {
-  flex: 0.8;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-
-.logo-container {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 40px;
-}
-
-.hero-logo {
-  max-width: 500px; /* 调整logo大小 */
-  width: 100%;
-}
-
-.scroll-down-btn {
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--border);
-  background: transparent;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  cursor: pointer;
-  color: var(--orange);
+  padding-left: 40px;
+}
+
+.usecases-inline {
+  width: 100%;
+}
+
+.usecases-inline .usecases-title {
   font-size: 1.2rem;
-  transition: all 0.2s;
-}
-
-.scroll-down-btn:hover {
-  border-color: var(--orange);
-}
-
-/* Use Cases Section */
-.usecases-section {
-  padding: 40px 60px;
-  background: #fff;
-}
-
-.usecases-title {
-  font-size: 1.5rem;
   font-weight: 700;
   color: #1a1a1a;
-  margin-bottom: 24px;
-  text-align: center;
+  margin-bottom: 16px;
+}
+
+.usecases-inline .usecases-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.usecases-inline .usecase-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: #F8F9FA;
+  border-radius: 12px;
+  border: 1px solid #E5E7EB;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.usecases-inline .usecase-card:hover {
+  border-color: #FF6B35;
+  box-shadow: 0 2px 12px rgba(255, 107, 53, 0.08);
+}
+
+.usecases-inline .usecase-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.usecases-inline .usecase-name {
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: #1a1a1a;
+  margin-bottom: 3px;
+}
+
+.usecases-inline .usecase-desc {
+  font-size: 0.78rem;
+  color: #666;
+  line-height: 1.4;
 }
 
 .usecases-grid {