diff --git a/assets/less/search/anchor.less b/assets/less/search/anchor.less
new file mode 100644
index 00000000..f12f980a
--- /dev/null
+++ b/assets/less/search/anchor.less
@@ -0,0 +1,4 @@
+.search__anchor {
+    position: absolute;
+    top: -100px;
+}
diff --git a/assets/less/search/categories.less b/assets/less/search/categories.less
new file mode 100644
index 00000000..020a1699
--- /dev/null
+++ b/assets/less/search/categories.less
@@ -0,0 +1,3 @@
+.search__categories {
+    display: flex;
+}
diff --git a/assets/less/search/category.less b/assets/less/search/category.less
new file mode 100644
index 00000000..4825e22e
--- /dev/null
+++ b/assets/less/search/category.less
@@ -0,0 +1,36 @@
+.search__category {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--accent-colour);
+    box-shadow: 0 1px 2px #000A;
+    text-shadow: 0 1px 4px #000;
+    overflow: hidden;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    font-size: 1.1em;
+    margin: 1px 1px 1px 0;
+
+    &__background {
+        background-color: var(--background-colour-translucent-9);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transition: background-color .2s;
+    }
+
+    &:hover &__background,
+    &:focus &__background {
+        background-color: var(--background-colour-translucent-8);
+    }
+
+    &:active &__background {
+        background-color: var(--background-colour-translucent-7);
+    }
+
+    &__content {
+        padding: 2px 5px;
+    }
+}
diff --git a/assets/less/search/container.less b/assets/less/search/container.less
new file mode 100644
index 00000000..b48464b0
--- /dev/null
+++ b/assets/less/search/container.less
@@ -0,0 +1,3 @@
+.search__container {
+    margin: 5px 0;
+}
diff --git a/assets/less/search/header.less b/assets/less/search/header.less
new file mode 100644
index 00000000..31a06a02
--- /dev/null
+++ b/assets/less/search/header.less
@@ -0,0 +1,7 @@
+.search__header {
+    padding: 1em;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: var(--background-colour);
+}
diff --git a/assets/less/search/input.less b/assets/less/search/input.less
index bf739aa6..3adb957d 100644
--- a/assets/less/search/input.less
+++ b/assets/less/search/input.less
@@ -6,7 +6,6 @@
     border: 1px solid transparent;
     border-radius: 5px;
     font-size: 1.5em;
-    margin: 2px 0;
 
     &__background {
         background-color: var(--background-colour-translucent-9);
@@ -34,13 +33,13 @@
     &__button {
         flex: 0 0 auto;
         border: 0;
-        background-color: transparent;
         color: #fff;
         border-radius: 4px;
         width: 40px;
         height: 40px;
         font-size: inherit;
         cursor: pointer;
+        background-color: transparent;
         transition: background-color .2s;
 
         &:hover,
diff --git a/assets/less/search/search.less b/assets/less/search/search.less
index 84e5ed89..bcd6ce96 100644
--- a/assets/less/search/search.less
+++ b/assets/less/search/search.less
@@ -1 +1,6 @@
+@import "anchor";
+@import "categories";
+@import "category";
+@import "container";
+@import "header";
 @import "input";
diff --git a/templates/home/search.twig b/templates/home/search.twig
index 5b6d111f..310e8025 100644
--- a/templates/home/search.twig
+++ b/templates/home/search.twig
@@ -7,24 +7,58 @@
 {% set canonical_url = url('search-query', {'query': search_query}) %}
 
 {% block content %}
-    <form class="search__input" method="get" action="{{ url('search-index') }}">
-        <div class="search__input__background"></div>
-        <div class="search__input__container">
-            {{ input_text('q', 'search__input__text', search_query, 'text', 'What are you looking for?', false, null, 1, true, true) }}
-            <button class="search__input__button" tabindex="2"><i class="fas fa-search fa-fw"></i></button>
-        </div>
-    </form>
+    <div class="search__header">
+        <form class="search__input" method="get" action="{{ url('search-index') }}">
+            <div class="search__input__background"></div>
+            <div class="search__input__container">
+                {{ input_text('q', 'search__input__text', search_query, 'text', 'What are you looking for?', false, null, 1, true, true) }}
+                <button class="search__input__button" tabindex="2"><i class="fas fa-search fa-fw"></i></button>
+            </div>
+        </form>
 
-    {% if forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0 %}
-        <div class="container container--lazy">
-            {{ container_title('<i class="fas fa-folder fa-fw"></i> Categories') }}
-            {% if forum_topics|length > 0 %}<a href="#topics" class="link">Topics ({{ forum_topics|length|number_format }})</a>{% endif %}
-            {% if forum_posts|length > 0 %}<a href="#posts" class="link">Posts ({{ forum_posts|length|number_format }})</a>{% endif %}
-            {% if users|length > 0 %}<a href="#users" class="link">Users ({{ users|length|number_format }})</a>{% endif %}
-            {% if news_posts|length > 0 %}<a href="#news" class="link">News ({{ news_posts|length|number_format }})</a>{% endif %}
-        </div>
-    {% elseif search_query|length > 0 %}
-        <div class="container container--lazy">
+        {% if forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0 %}
+            <div class="search__categories">
+                {% if forum_topics|length > 0 %}
+                    <a href="#topics" class="search__category">
+                        <div class="search__category__background"></div>
+                        <div class="search__category__content">
+                            Topics ({{ forum_topics|length|number_format }})
+                        </div>
+                    </a>
+                {% endif %}
+
+                {% if forum_posts|length > 0 %}
+                    <a href="#posts" class="search__category">
+                        <div class="search__category__background"></div>
+                        <div class="search__category__content">
+                            Posts ({{ forum_posts|length|number_format }})
+                        </div>
+                    </a>
+                {% endif %}
+
+                {% if users|length > 0 %}
+                    <a href="#users" class="search__category">
+                        <div class="search__category__background"></div>
+                        <div class="search__category__content">
+                            Users ({{ users|length|number_format }})
+                        </div>
+                    </a>
+                {% endif %}
+
+                {% if news_posts|length > 0 %}
+                    <a href="#news" class="search__category">
+                        <div class="search__category__background"></div>
+                        <div class="search__category__content">
+                            News ({{ news_posts|length|number_format }})
+                        </div>
+                    </a>
+                {% endif %}
+            </div>
+        {% endif %}
+    </div>
+
+    {% if not (forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0) %}
+        <div class="container search__container">
             {{ container_title('<i class="fas fa-search-minus fa-fw"></i> Nothing found!') }}
 
             <div class="container__content">
@@ -34,7 +68,8 @@
     {% endif %}
 
     {% if forum_topics|length > 0 %}
-        <div id="topics" class="container container--lazy">
+        <div class="container search__container">
+            <div class="search__anchor" id="topics"></div>
             {{ container_title('<i class="fas fa-comments fa-fw"></i> Topics (%s)'|format(forum_topics|length|number_format)) }}
             {% for topic in forum_topics %}
                 <a href="{{ url('forum-topic', {'topic': topic.topic_id}) }}" class="link">
@@ -45,7 +80,8 @@
     {% endif %}
 
     {% if forum_posts|length > 0 %}
-        <div id="posts" class="container container--lazy">
+        <div class="container search__container">
+            <div class="search__anchor" id="posts"></div>
             {{ container_title('<i class="fas fa-comment fa-fw"></i> Posts (%s)'|format(forum_posts|length|number_format)) }}
 
             {% for post in forum_posts %}
@@ -57,7 +93,8 @@
     {% endif %}
 
     {% if users|length > 0 %}
-        <div id="users" class="container container--lazy">
+        <div class="container search__container">
+            <div class="search__anchor" id="users"></div>
             {{ container_title('<i class="fas fa-users fa-fw"></i> Users (%s)'|format(users|length|number_format)) }}
 
             <div class="userlist">
@@ -71,7 +108,8 @@
     {% endif %}
 
     {% if news_posts|length > 0 %}
-        <div id="news" class="container container--lazy">
+        <div class="container search__container">
+            <div class="search__anchor" id="news"></div>
             {{ container_title('<i class="fas fa-newspaper fa-fw"></i> News (%s)'|format(news_posts|length|number_format)) }}
             {% for post in news_posts %}
                 <a href="{{ url('news-post', {'post': post.post_id}) }}" class="link">