diff --git a/src/cljs/athens/views/athena.cljs b/src/cljs/athens/views/athena.cljs
index 16b83d1550..aa3af04ba7 100644
--- a/src/cljs/athens/views/athena.cljs
+++ b/src/cljs/athens/views/athena.cljs
@@ -189,6 +189,22 @@
       :else nil)))
 
 
+(defn drop-down-list
+  ([query title string key on-click-handler]
+   (drop-down-list query title string key on-click-handler nil))
+  ([query title string key on-click-handler class]
+   (let [component-attributes {:key      key
+                               :on-click on-click-handler}
+         component-attributes-with-class (if class
+                                           (assoc component-attributes :class class)
+                                           component-attributes)]
+     [:div (use-style result-style component-attributes-with-class)
+      [:h4.title (use-sub-style result-style :title) (highlight-match query title)]
+      (when string
+        [:span.preview (use-sub-style result-style :preview) (highlight-match query string)])
+      [:span.link-leader (use-sub-style result-style :link-leader) [(r/adapt-react-class mui-icons/ArrowForward)]]])))
+
+
 ;;; Components
 
 
@@ -201,30 +217,6 @@
                    :style {:font-size "11px"}}])
 
 
-(defn results-el
-  [state]
-  (let [query? (str/blank? (:query @state))
-        recent-items @(subscribe [:athena/get-recent])]
-    [:<> [:div (use-style results-heading-style)
-          [:h5 (if query? "Recent" "Results")]
-          [:span (use-style hint-style)
-           "Press "
-           [:kbd "shift + enter"]
-           " to open in right sidebar."]]
-     (when query?
-       [:div (use-style results-list-style)
-        (doall
-          (for [[i x] (map-indexed list recent-items)]
-            (when x
-              (let [{:keys [query :node/title :block/uid :block/string]} x]
-                [:div (use-style result-style {:key      i
-                                               :on-click #(navigate-uid uid)})
-                 [:h4.title (use-sub-style result-style :title) (highlight-match query title)]
-                 (when string
-                   [:span.preview (use-sub-style result-style :preview) (highlight-match query string)])
-                 [:span.link-leader (use-sub-style result-style :link-leader) [(r/adapt-react-class mui-icons/ArrowForward)]]]))))])]))
-
-
 (defn athena-component
   []
   (let [open? @(subscribe [:athena/open])
@@ -240,7 +232,23 @@
                            :placeholder "Find or Create Page"
                            :on-change   (fn [e] (search-handler (.. e -target -value)))
                            :on-key-down (fn [e] (key-down-handler e s))})]
-       [results-el s]
+       [(fn []
+          (let [query? (str/blank? (:query @s))
+                recent-items @(subscribe [:athena/get-recent])]
+            [:<> [:div (use-style results-heading-style)
+                  [:h5 (if query? "Recent" "Results")]
+                  [:span (use-style hint-style)
+                   "Press "
+                   [:kbd "shift + enter"]
+                   " to open in right sidebar."]]
+             (when query?
+               [:div (use-style results-list-style)
+                (doall
+                  (for [[i x] (map-indexed list recent-items)]
+                    (when x
+                      (let [{:keys [query :node/title :block/string]} x
+                            on-click-handler (fn [] (navigate-uid (:block/uid x)))]
+                        (drop-down-list query title string i on-click-handler)))))])]))]
        [(fn []
           (let [{:keys [results query index]} @s]
             [:div (use-style results-list-style)
@@ -262,16 +270,12 @@
                      [:b "Create Page: "]
                      query]
                     [:span.link-leader (use-sub-style result-style :link-leader) [(r/adapt-react-class mui-icons/Create)]]]
-                   [:div (use-style result-style {:key      i
-                                                  :on-click (fn []
-                                                              (let [selected-page {:node/title   title
-                                                                                   :block/uid    uid
-                                                                                   :block/string string
-                                                                                   :query        query}]
-                                                                (dispatch [:athena/update-recent-items selected-page])
-                                                                (navigate-uid uid)))
-                                                  :class    (when (= i index) "selected")})
-                    [:h4.title (use-sub-style result-style :title) (highlight-match query title)]
-                    (when string
-                      [:span.preview (use-sub-style result-style :preview) (highlight-match query string)])
-                    [:span.link-leader (use-sub-style result-style :link-leader) [(r/adapt-react-class mui-icons/ArrowForward)]]])))]))]])))
+                   (let [selected-page {:node/title   title
+                                        :block/uid    uid
+                                        :block/string string
+                                        :query        query
+                                        :class        (when (= i index) "selected")}
+                         on-click-handler (fn []
+                                            (dispatch [:athena/update-recent-items selected-page])
+                                            (navigate-uid uid))]
+                     (drop-down-list query title string i on-click-handler)))))]))]])))