diff --git a/frontend/list.js b/frontend/list.js
index ce75a1f..e9c7b28 100644
--- a/frontend/list.js
+++ b/frontend/list.js
@@ -1,10 +1,13 @@
-import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
 
 export default (items = [{}]) => {
-    items.map((i) => (
-        <ListItem>
-            <ListItemText primary={i.subject} />
-        </ListItem>
-    ))
-    return <List></List>
-}
\ No newline at end of file
+  items.map((i) => (
+    <ListItem key={i.thread_id}>
+      <ListItemText
+        primary={i.subject}
+        secondary={<React.Fragment>Hi There</React.Fragment>}
+      />
+    </ListItem>
+  ));
+  return <List></List>;
+};
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 6a95eb8..9adf8f9 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -12,9 +12,10 @@ export default function Index() {
 
   const [threads, setThreads] = useState({
     count: 0,
-    threads: [{}],
+    threads: [],
   });
   useEffect(() => {
+    console.log(query);
     fetch(`/search/${query}/0/30`)
       .then((response) => response.json())
       .then(
@@ -29,6 +30,7 @@ export default function Index() {
     if (thread == "") {
       return;
     }
+    console.log(threads);
     fetch(`/thread/${thread}`)
       .then((response) => response.json())
       .then(
diff --git a/frontend/src/component/List.js b/frontend/src/component/List.js
index 5d8448b..2304796 100644
--- a/frontend/src/component/List.js
+++ b/frontend/src/component/List.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { List, ListItem, ListItemText } from "@material-ui/core";
+import { Chip, List, ListItem, ListItemText } from "@material-ui/core";
 
 export default ({ items = [{}], setThread }) => {
   const handleThreadChange = (e, thread) => {
@@ -12,6 +12,9 @@ export default ({ items = [{}], setThread }) => {
     <ListItem button dense key={i.thread_id}>
       <ListItemText
         primary={i.subject}
+        secondary={i.tags.map((tag) => (
+          <Chip size="small" label={tag} />
+        ))}
         onClick={(e) => handleThreadChange(e, i)}
       />
     </ListItem>
diff --git a/frontend/src/component/Search.js b/frontend/src/component/Search.js
index d09d0c6..1ea2321 100644
--- a/frontend/src/component/Search.js
+++ b/frontend/src/component/Search.js
@@ -7,16 +7,17 @@ import { Autocomplete } from "@material-ui/lab";
 export default ({ setQuery }) => {
   const [search, setSearch] = useState(["tag:inbox"]);
 
-  function handleSearchChange(event, value) {
-    console.log(event);
-    console.log(value);
+  function handleSearchChange(_event, value) {
     setSearch(value);
     setQuery(value.join(" "));
   }
 
   const [options, setOptions] = useState([]);
-  const handleSubSearchChange = (event, value, reason) => {
+  const handleSubSearchChange = (_event, value, _reason) => {
     const [kind, ...q] = value.split(":");
+    if (q.length == 0) {
+      return;
+    }
     const qq = q.join(":");
     fetch(`/autocomplete/${kind}/${qq}`)
       .then((response) => response.json())
@@ -36,6 +37,8 @@ export default ({ setQuery }) => {
       <Autocomplete
         multiple
         id="search"
+        autoselect="true"
+        freeSolo="true"
         value={search}
         onChange={handleSearchChange}
         onInputChange={handleSubSearchChange}
@@ -46,7 +49,7 @@ export default ({ setQuery }) => {
         size="small"
       />
     );
-  }, [options]);
+  }, [options, search]);
 
   return autocomplete;
 };
diff --git a/src/main.rs b/src/main.rs
index 6c3a982..d50525a 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -94,7 +94,7 @@ async fn autocomplete(data: web::Data<Data>, req: HttpRequest) -> impl Responder
             .take(1000)
             .for_each(|msg| {
                 msg.tags().for_each(|tag| {
-                    results.insert(format!("tag:{}", tag));
+                    results.insert(tag);
                 })
             }),
         Autocomplete::From => db