diff --git a/ui/public/assets/upend.svg b/ui/public/assets/upend.svg
new file mode 100644
index 0000000..687fbde
--- /dev/null
+++ b/ui/public/assets/upend.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   style="fill:none"
+   width="255"
+   height="255"
+   id="svg8"
+   sodipodi:docname="upend.svg"
+   inkscape:version="1.1-alpha (bbbf1dd, 2021-03-06)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     objecttolerance="10.0"
+     gridtolerance="10.0"
+     guidetolerance="10.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="1.9309454"
+     inkscape:cx="142.67622"
+     inkscape:cy="78.976856"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     inkscape:window-x="-8"
+     inkscape:window-y="192"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     style="fill:none;stroke:#6a6a6a;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round"
+     d=""
+     id="path2" />
+  <path
+     style="fill:none;stroke:#4a4a4a;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round"
+     d=""
+     id="path4" />
+  <path
+     style="fill:none;stroke:#0a0a0a;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round"
+     d="m 7.5,7.5 v 0 h 240 m -120,0 v 0 l -120,120 m 240,0 v 0 l -120,-120 m 0,240 v 0 -240"
+     id="path6" />
+</svg>
diff --git a/ui/src/App.vue b/ui/src/App.vue
index d1bb10f..a75ea14 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,8 +1,6 @@
 <template>
   <div id="app" :class="{ 'sl-theme-dark': prefersDark }">
-    <header>
-      <h1><a href="/">UpEnd</a></h1>
-    </header>
+    <Header />
     <main>
       <router-view />
     </main>
@@ -15,18 +13,20 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import Jobs from "@/components/Jobs.vue";
+import Header from "@/components/Header.vue";
 
 export default defineComponent({
   name: "App",
+  components: { Header, Jobs },
   data() {
     return {
       prefersDark: false,
     };
   },
-  components: { Jobs },
   mounted() {
     this.prefersDark =
-      window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
   },
 });
 </script>
@@ -66,28 +66,8 @@ body,
 
   margin: 1rem;
 
-  --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata", monospace;
-}
-
-header {
-  box-shadow: var(--sl-shadow-large);
-  margin-bottom: 1rem;
-  padding: 1rem;
-  display: block;
-  background: var(--background);
-
-  h1,
-  h2 {
-    font-size: 14pt;
-    font-weight: normal;
-    margin: 0;
-  }
-
-  h1 a {
-    color: var(--foreground);
-    text-decoration: none;
-    font-weight: bold;
-  }
+  --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata",
+    monospace;
 }
 
 main {
diff --git a/ui/src/components/Address.vue b/ui/src/components/Address.vue
index 022b02e..ceaee34 100644
--- a/ui/src/components/Address.vue
+++ b/ui/src/components/Address.vue
@@ -3,7 +3,7 @@
     <hash-badge :address="address" class="hash-badge"/>
     <a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
     <template v-else>
-      <router-link v-if="link" :to="{ name: 'Inspect', params: { address } }">
+      <router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
         {{ inferredId || address }}
       </router-link>
       <template v-else>{{ inferredId || address }}</template>
diff --git a/ui/src/components/Header.vue b/ui/src/components/Header.vue
new file mode 100644
index 0000000..6ee18c6
--- /dev/null
+++ b/ui/src/components/Header.vue
@@ -0,0 +1,80 @@
+<template>
+  <header>
+    <h1>
+      <router-link :to="{ name: 'home' }">
+        <img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
+        UpEnd
+      </router-link>
+    </h1>
+    <sl-input placeholder="Search" v-sl-model:searchQuery>
+      <sl-icon name="search" slot="prefix"></sl-icon>
+    </sl-input>
+  </header>
+</template>
+
+<script lang="ts">
+import { ListingResult } from "@/types/base";
+import { fetcher } from "@/utils";
+import useSWRV from "swrv";
+import { computed, defineComponent } from "vue";
+import HashBadge from "./HashBadge.vue";
+
+export default defineComponent({
+  name: "Header",
+  data() {
+    return {
+      searchQuery: "",
+    };
+  },
+  watch: {
+    searchQuery() {
+      this.$router.replace({ name: "search", query: { q: this.searchQuery } });
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--foreground);
+  margin-bottom: 0.5rem;
+
+  background: var(--background);
+
+  h1 {
+    font-size: 14pt;
+    font-weight: normal;
+    margin: 0;
+
+    a {
+      display: flex;
+      align-items: center;
+
+      color: var(--foreground);
+      text-decoration: none;
+      font-weight: normal;
+
+      img {
+        margin-right: 0.5em;
+      }
+    }
+  }
+
+  .logo {
+    display: inline-block;
+    height: 1.5em;
+
+    @media (prefers-color-scheme: dark) {
+      filter: invert(1);
+    }
+  }
+
+  sl-input {
+    margin-left: 1em;
+    flex-grow: 1;
+  }
+}
+</style>
diff --git a/ui/src/components/SearchResult.vue b/ui/src/components/SearchResult.vue
index 4ef6ac5..bfc0541 100644
--- a/ui/src/components/SearchResult.vue
+++ b/ui/src/components/SearchResult.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-link :to="{name: 'Inspect', params: {'address': result.entity}}" class="search-result">
+  <router-link :to="{name: 'inspect', params: {'address': result.entity}}" class="search-result">
     <div class="search-result-container">
       <div class="search-result-attribute">{{ result.attribute }}</div>
       <div class="search-result-value">{{ result.value.c }}</div>
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index 7c2cf62..33e5457 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -1,22 +1,28 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from "../views/About.vue";
+import Search from '../views/Search.vue'
 import Inspect from "@/views/Inspect.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    name: 'Home',
+    name: 'home',
     component: Home
   },
+  {
+    path: '/search',
+    name: 'search',
+    component: Search,
+  },
   {
     path: "/inspect/:address",
-    name: "Inspect",
+    name: "inspect",
     component: Inspect,
     props: true
   },
   {
     path: '/about',
-    name: 'About',
+    name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
diff --git a/ui/src/views/Home.vue b/ui/src/views/Home.vue
deleted file mode 100644
index b30a509..0000000
--- a/ui/src/views/Home.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="home">
-    <sl-input placeholder="Search" v-sl-model:searchQuery>
-      <sl-icon name="search" slot="prefix"></sl-icon>
-    </sl-input>
-    <ul class="search-results">
-      <li v-for="[identity, result] in Object.entries(results)" :key="identity">
-        <SearchResult :result="result"/>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import {construct} from "@/utils";
-import SearchResult from "@/components/SearchResult.vue";
-import {IEntry} from "@/types/base";
-
-export default defineComponent({
-  name: "Home",
-  components: {SearchResult},
-  data: () => {
-    return {
-      searchQuery: "",
-      results: {} as { [key: string]: IEntry }
-    };
-  },
-  watch: {
-    async searchQuery() {
-      const query = construct("(matches ? ? (contains #))", [this.searchQuery]);
-      const response = await fetch(`/api/obj?${new URLSearchParams({query})}`);
-      this.results = await response.json();
-    }
-  },
-});
-</script>
-
-<style lang="scss">
-.search-results {
-  display: flex;
-  flex-wrap: wrap;
-
-  list-style: none;
-
-  li {
-    display: block;
-    width: calc(100% / 6);
-  }
-}
-</style>
diff --git a/ui/src/views/Search.vue b/ui/src/views/Search.vue
new file mode 100644
index 0000000..af3ea51
--- /dev/null
+++ b/ui/src/views/Search.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="search">
+    <ul class="search-results" v-if="results">
+      <li v-for="[identity, result] in Object.entries(results)" :key="identity">
+        <SearchResult :result="result" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { construct } from "@/utils";
+import SearchResult from "@/components/SearchResult.vue";
+import { ListingResult } from "@/types/base";
+import useSWRV from "swrv";
+import { fetcher } from "../utils";
+import { useRoute } from "vue-router";
+
+export default defineComponent({
+  name: "Search",
+  components: { SearchResult },
+  props: {
+    searchQuery: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const route = useRoute();
+    const { data } = useSWRV<ListingResult | unknown>(() => {
+      let query = route.query.q as string | undefined;
+      if (query && query !== "") {
+        const ueQuery = construct("(matches ? ? (contains #))", [query]);
+        return `/api/obj?query=${ueQuery}`;
+      }
+      return null;
+    }, fetcher);
+
+    return {
+      results: data,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.search-results {
+  display: flex;
+  flex-wrap: wrap;
+
+  list-style: none;
+
+  li {
+    display: block;
+    width: calc(100% / 6);
+  }
+}
+</style>