diff --git a/index.html b/index.html
index 31ae3b4..68a4f3a 100644
--- a/index.html
+++ b/index.html
@@ -2,15 +2,16 @@
 <html lang="zh-Hant">
 <head>
   <meta charset="UTF-8">
-  <title>W5 PR 練習 Chatbot</title>
+  <title>D1257081 的 PR 練習 Chatbot</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
   <div class="container">
     <header>
-      <h1>🤖 PR 練習 Chatbot</h1>
-      <p class="subtitle">W5 Pull Request 練習</p>
+      <h1>💬 D1257081 的 Chatbot</h1>
+      <p class="subtitle">W5 Pull Request 練習 — by D1257081</p>
+      <input id="search-input" type="text" placeholder="搜尋訊息..." oninput="searchMessages(this.value)">
     </header>
 
     <div id="chat-box">
@@ -21,11 +22,24 @@ <h1>🤖 PR 練習 Chatbot</h1>
 
     <div class="input-area">
       <input id="user-input" type="text" placeholder="輸入訊息...">
-      <button onclick="sendMessage()">送出</button>
+      <button onclick="sendMessage()">發送訊息 💬</button>
     </div>
   </div>
 
   <script>
+    function searchMessages(keyword) {
+      const messages = document.querySelectorAll('#chat-box .message');
+      const query = keyword.trim().toLowerCase();
+      messages.forEach(msg => {
+        const text = msg.textContent.toLowerCase();
+        if (!query || text.includes(query)) {
+          msg.classList.remove('hidden');
+        } else {
+          msg.classList.add('hidden');
+        }
+      });
+    }
+
     function sendMessage() {
       const input = document.getElementById('user-input');
       const chatBox = document.getElementById('chat-box');
@@ -35,12 +49,20 @@ <h1>🤖 PR 練習 Chatbot</h1>
 
       const userDiv = document.createElement('div');
       userDiv.className = 'message user';
+      const timeUser = document.createElement('span');
+      timeUser.className = 'timestamp';
+      timeUser.textContent = new Date().toLocaleTimeString('zh-TW', {hour:'2-digit', minute:'2-digit'});
       userDiv.textContent = text;
+      userDiv.appendChild(timeUser);
       chatBox.appendChild(userDiv);
 
       const botDiv = document.createElement('div');
       botDiv.className = 'message bot';
+      const timeBot = document.createElement('span');
+      timeBot.className = 'timestamp';
+      timeBot.textContent = new Date().toLocaleTimeString('zh-TW', {hour:'2-digit', minute:'2-digit'});
       botDiv.textContent = `你說了「${text}」！`;
+      botDiv.appendChild(timeBot);
       chatBox.appendChild(botDiv);
 
       input.value = '';
diff --git a/style.css b/style.css
index 1401ed5..db8ec93 100644
--- a/style.css
+++ b/style.css
@@ -21,7 +21,7 @@ body {
 }
 
 header {
-  background: #4f8ef7;
+  background: linear-gradient(135deg, #00b894, #00cec9);
   color: white;
   padding: 20px 24px;
 }
@@ -53,7 +53,7 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
 }
 
 .message.user {
-  background: #4f8ef7;
+  background: #00b894;
   color: white;
   align-self: flex-end;
 }
@@ -74,10 +74,10 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
   outline: none;
 }
 
-.input-area input:focus { border-color: #4f8ef7; }
+.input-area input:focus { border-color: #00b894; }
 
 .input-area button {
-  background: #4f8ef7;
+  background: #00b894;
   color: white;
   border: none;
   padding: 10px 20px;
@@ -87,3 +87,26 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
 }
 
 .input-area button:hover { opacity: 0.85; }
+
+/* feature/add-search 新增 */
+header input {
+  margin-top: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  background: rgba(255,255,255,0.25);
+  color: white;
+}
+header input::placeholder { color: rgba(255,255,255,0.7); }
+.message.hidden { display: none; }
+
+/* feature/add-timestamp 新增 */
+.timestamp {
+  display: block;
+  font-size: 10px;
+  opacity: 0.6;
+  text-align: right;
+  margin-top: 4px;
+}
