diff --git a/ejs-views/partials/search_bar.ejs b/ejs-views/partials/search_bar.ejs
index 6e2f04c..57a3575 100644
--- a/ejs-views/partials/search_bar.ejs
+++ b/ejs-views/partials/search_bar.ejs
@@ -1,10 +1,68 @@
 <div class="text-center">
   <h1>Packages make Pulsar do amazing things.</h1>
-  <form class="my-12" action="/packages/search">
+  <form class="search" method="get" action="/packages/search">
     <input type="search" value="<% if (locals.search) { %><%- search %><% } %>" name="q" placeholder="Search Packages..." />
     <button type="submit">
       <i class="fas fa-magnifying-glass"></i>
       Search
     </button>
+
+    <h3 class="option-title">Method to sort the search results.</h3>
+    <ul class="radio-option-container">
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-sort-relevance" type="radio" name="sort" value="relevance"
+            <% if (locals.sortQuery === "relevance" || locals.sortQuery === "" || typeof locals.sortQuery === "undefined") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-sort-relevance" class="radio-option-label">Relevance</label>
+        </div>
+      </li>
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-sort-downloads" type="radio" name="sort" value="downloads"
+            <% if (locals.sortQuery === "downloads") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-sort-downloads" class="radio-option-label">Downloads</label>
+        </div>
+      </li>
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-sort-created_at" type="radio" name="sort" value="created_at"
+            <% if (locals.sortQuery === "created_at") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-sort-created_at" class="radio-option-label">Created At</label>
+        </div>
+      </li>
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-sort-updated_at" type="radio" name="sort" value="updated_at"
+            <% if (locals.sortQuery === "updated_at") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-sort-updated_at" class="radio-option-label">Updated At</label>
+        </div>
+      </li>
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-sort-stars" type="radio" name="sort" value="stars"
+            <% if (locals.sortQuery === "stars") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-sort-stars" class="radio-option-label">Stars</label>
+        </div>
+      </li>
+    </ul>
+
+    <h3 class="option-title">Direction to list search results.</h3>
+    <ul class="radio-option-container">
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-direction-desc" type="radio" name="direction" value="desc"
+            <% if (locals.directionQuery === "desc" || locals.directionQuery === "" || typeof locals.directionQuery === "undefined") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-direction-desc" class="radio-option-label">Descending</label>
+        </div>
+      </li>
+      <li class="radio-option-listing">
+        <div class="radio-option-inner">
+          <input id="horizontal-list-radio-direction-asc" type="radio" name="direction" value="asc"
+            <% if (locals.directionQuery === "asc") { %><%= 'checked' %><% } %> class="radio-option-input" />
+          <label for="horizontal-list-radio-direction-asc" class="radio-option-label">Ascending</label>
+        </div>
+      </li>
+    </ul>
+
   </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/handlers.js b/src/handlers.js
index 8f9b2f5..823c8df 100644
--- a/src/handlers.js
+++ b/src/handlers.js
@@ -117,12 +117,20 @@ async function searchHandler(req, res, timecop) {
     timecop.start("transcribe-json");
     let obj = await utils.prepareForListing(api.body);
     timecop.end("transcribe-json");
-    res.render("search", { dev: DEV, packages: obj, search: req.query.q, pagination, timecop: timecop.timetable, page: {
-      name: `Search ${req.query.q}`,
-      og_url: "https://web.pulsar-edit.dev/packages/search",
-      og_description: "The Pulsar Package Repository",
-      og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
-      og_image_type: "image/svg+xml"
+    res.render("search", {
+      dev: DEV,
+      packages: obj,
+      sortQuery: req.query.sort ?? "",
+      directionQuery: req.query.direction ?? "",
+      search: req.query.q,
+      pagination,
+      timecop: timecop.timetable,
+      page: {
+        name: `Search ${req.query.q}`,
+        og_url: "https://web.pulsar-edit.dev/packages/search",
+        og_description: "The Pulsar Package Repository",
+        og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+        og_image_type: "image/svg+xml"
     }});
   } catch(err) {
     console.log(err);
diff --git a/src/site.css b/src/site.css
index 564592d..c64769d 100644
--- a/src/site.css
+++ b/src/site.css
@@ -174,3 +174,35 @@ nav.active {
 #pagination a.disabled {
   @apply pointer-events-none text-secondary;
 }
+
+/**************************/
+/******** SEARCH **********/
+/**************************/
+
+.search {
+  @apply my-12;
+}
+
+.search .option-title {
+  @apply mb-4 mt-4;
+}
+
+.search .radio-option-container {
+  @apply items-center w-full text-sm font-medium text-gray-900 border border-secondary bg-transparent rounded-lg sm:flex;
+}
+
+.search .radio-option-container .radio-option-listing {
+  @apply w-full border-b border-secondary sm:border-b-0 sm:border-r;
+}
+
+.search .radio-option-container .radio-option-listing .radio-option-inner {
+  @apply flex items-center pl-3;
+}
+
+.search .radio-option-container .radio-option-listing .radio-option-inner .radio-option-input {
+  @apply w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-primary focus:ring-2;
+}
+
+.search .radio-option-container .radio-option-listing .radio-option-inner .radio-option-label {
+  @apply w-full py-3 ml-2 text-sm font-medium text-text opacity-70;
+}