diff --git a/Cargo.lock b/Cargo.lock
index b534d4d..1bcb462 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -66,6 +66,12 @@ version = "1.0.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a4668cab20f66d8d020e1fbc0ebe47217433c1b6c8f2040faf858554e394ace6"
 
+[[package]]
+name = "ascii"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eab1c04a571841102f5345a8fc0f6bb3d31c315dec879b5c6e42e40ce7ffa34e"
+
 [[package]]
 name = "ascii_utils"
 version = "0.9.3"
@@ -349,6 +355,19 @@ dependencies = [
  "windows-targets",
 ]
 
+[[package]]
+name = "combine"
+version = "3.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da3da6baa321ec19e1cc41d31bf599f00c783d0517095cdaf0332e3fe8d20680"
+dependencies = [
+ "ascii",
+ "byteorder",
+ "either",
+ "memchr",
+ "unreachable",
+]
+
 [[package]]
 name = "console_error_panic_hook"
 version = "0.1.7"
@@ -1093,6 +1112,64 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "graphql-introspection-query"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f2a4732cf5140bd6c082434494f785a19cfb566ab07d1382c3671f5812fed6d"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "graphql-parser"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d2ebc8013b4426d5b81a4364c419a95ed0b404af2b82e2457de52d9348f0e474"
+dependencies = [
+ "combine",
+ "thiserror",
+]
+
+[[package]]
+name = "graphql_client"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09cdf7b487d864c2939b23902291a5041bc4a84418268f25fda1c8d4e15ad8fa"
+dependencies = [
+ "graphql_query_derive",
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "graphql_client_codegen"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a40f793251171991c4eb75bd84bc640afa8b68ff6907bc89d3b712a22f700506"
+dependencies = [
+ "graphql-introspection-query",
+ "graphql-parser",
+ "heck",
+ "lazy_static",
+ "proc-macro2 1.0.66",
+ "quote 1.0.33",
+ "serde",
+ "serde_json",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "graphql_query_derive"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00bda454f3d313f909298f626115092d348bc231025699f557b27e248475f48c"
+dependencies = [
+ "graphql_client_codegen",
+ "proc-macro2 1.0.66",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "h2"
 version = "0.3.21"
@@ -1460,6 +1537,7 @@ dependencies = [
  "console_error_panic_hook",
  "console_log",
  "css-inline",
+ "graphql_client",
  "itertools",
  "log 0.4.20",
  "notmuch",
@@ -3351,6 +3429,15 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f962df74c8c05a667b5ee8bcf162993134c104e96440b663c8daa176dc772d8c"
 
+[[package]]
+name = "unreachable"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "382810877fe448991dfc7f0dd6e3ae5d58088fd0ea5e35189655f84e6814fa56"
+dependencies = [
+ "void",
+]
+
 [[package]]
 name = "untrusted"
 version = "0.7.1"
@@ -3418,6 +3505,12 @@ version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
 
+[[package]]
+name = "void"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a02e4885ed3bc0f2de90ea6dd45ebcbb66dacffe03547fadbb0eeae2770887d"
+
 [[package]]
 name = "walkdir"
 version = "2.3.3"
diff --git a/web/Cargo.toml b/web/Cargo.toml
index fe350b7..3b6fcdc 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -28,6 +28,7 @@ serde_json = { version = "1.0.93", features = ["unbounded_depth"] }
 wasm-timer = "0.2.5"
 css-inline = "0.8.5"
 chrono = "0.4.31"
+graphql_client = "0.13.0"
 
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = ['-Os']
diff --git a/web/graphql/front_page.graphql b/web/graphql/front_page.graphql
new file mode 100644
index 0000000..ac583c4
--- /dev/null
+++ b/web/graphql/front_page.graphql
@@ -0,0 +1,23 @@
+query FrontPageQuery($query: [String!], $first: [Int], $after: [String]) {
+  count(query: $query)
+  search(query: $query, first: $first, after: $after) {
+    pageInfo {
+      hasPreviousPage
+      hasNextPage
+      startCursor
+      endCursor
+    }
+    nodes {
+      thread
+      timestamp
+      subject
+      authors
+      tags
+    }
+  }
+  tags {
+    name
+    bgColor
+    fgColor
+  }
+}
diff --git a/web/src/graphql.rs b/web/src/graphql.rs
new file mode 100644
index 0000000..f5d621b
--- /dev/null
+++ b/web/src/graphql.rs
@@ -0,0 +1,35 @@
+use graphql_client::GraphQLQuery;
+use seed::{
+    fetch,
+    fetch::{Header, Method, Request},
+};
+use serde::{de::DeserializeOwned, Deserialize, Serialize};
+
+// The paths are relative to the directory where your `Cargo.toml` is located.
+// Both json and the GraphQL schema language are supported as sources for the schema
+#[derive(GraphQLQuery)]
+#[graphql(
+    schema_path = "graphql/schema.json",
+    query_path = "graphql/front_page.graphql",
+    response_derives = "Debug"
+)]
+pub struct FrontPageQuery;
+
+async fn send_graphql<Body, Resp>(body: Body) -> fetch::Result<graphql_client::Response<Resp>>
+where
+    Body: Serialize,
+    Resp: DeserializeOwned + 'static,
+{
+    use web_sys::RequestMode;
+
+    Request::new("/graphql")
+        .method(Method::Post)
+        .header(Header::content_type("application/json"))
+        .mode(RequestMode::Cors)
+        .json(&body)?
+        .fetch()
+        .await?
+        .check_status()?
+        .json()
+        .await
+}
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 8f3646a..2daead0 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -7,7 +7,7 @@ use std::{
     hash::{Hash, Hasher},
 };
 
-use chrono::{DateTime, Datelike, Duration, Local, Utc};
+use chrono::{DateTime, Duration, Local, Utc};
 use itertools::Itertools;
 use log::{debug, error, info, Level};
 use notmuch::{Content, Part, Thread, ThreadNode, ThreadSet};
@@ -15,6 +15,8 @@ use seed::{prelude::*, *};
 use serde::de::Deserialize;
 use wasm_timer::Instant;
 
+mod graphql;
+
 const SEARCH_RESULTS_PER_PAGE: usize = 20;
 
 // ------ ------
@@ -760,6 +762,8 @@ fn view_footer(render_time_ms: u128) -> Node<Msg> {
 }
 
 fn view_desktop(model: &Model) -> Node<Msg> {
+    // TODO(wathiede): add sidebar showing tags, use https://bulma.io/documentation/components/menu/#docsNav
+    // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::Thread(thread_set) => view_thread(thread_set),