From e0308a11c938fcbc4c7e6e15d3ef72682963c6e5 Mon Sep 17 00:00:00 2001
From: Jai A <jai.a@tuta.io>
Date: Tue, 12 May 2020 22:27:31 -0700
Subject: [PATCH] Search filters

---
 .idea/inspectionProfiles/Project_Default.xml |  10 ++
 src/main.rs                                  |  20 ++--
 static/css/main.css                          |  18 ++-
 static/css/search.css                        | 115 +++++++++++++++++--
 static/images/icon/cursed.png                | Bin 0 -> 6460 bytes
 static/images/icon/decoration.svg            |  67 +++++++++++
 static/images/icon/download.svg              |   2 +-
 static/images/icon/library.svg               |   1 +
 static/images/icon/search.svg                |  18 +++
 static/images/icon/updated.svg               |   1 +
 static/images/icon/version.svg               |  51 ++++++++
 static/images/icon/world.svg                 |   1 +
 static/js/search.js                          |  87 +++++++++++---
 templates/search.hbs                         | 114 +++++++++---------
 templates/search_results.hbs                 |  84 ++++++++++++++
 15 files changed, 493 insertions(+), 96 deletions(-)
 create mode 100644 static/images/icon/cursed.png
 create mode 100644 static/images/icon/decoration.svg
 create mode 100644 static/images/icon/library.svg
 create mode 100644 static/images/icon/search.svg
 create mode 100644 static/images/icon/updated.svg
 create mode 100644 static/images/icon/version.svg
 create mode 100644 static/images/icon/world.svg
 create mode 100644 templates/search_results.hbs

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 72d2ffd09..5e27a2933 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,16 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="white" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
diff --git a/src/main.rs b/src/main.rs
index d04e1c96b..0633b74a9 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -13,7 +13,7 @@ struct ContainsHelper;
 impl HelperDef for ContainsHelper {
     fn call<'reg: 'rc, 'rc>(&self, h: &Helper<'reg, 'rc>, r: &'reg Handlebars<'_>, ctx: &'rc Context, rc: &mut RenderContext<'reg, 'rc>, out: &mut dyn Output) -> HelperResult {
         let array = h.param(0).map(|v| serde_json::from_value::<Vec<String>>(v.value().clone()).unwrap()).ok_or(RenderError::new("Parameter not found!"))?;
-        let mut value = h.param(1).map(|v| v.value().as_str().unwrap()).ok_or(RenderError::new("Parameter not found!"))?;
+        let value = h.param(1).map(|v| v.value().as_str().unwrap()).ok_or(RenderError::new("Parameter not found!"))?;
 
         let tmpl = if array.contains(&String::from(value)) { h.template() } else { h.inverse() };
 
@@ -48,14 +48,16 @@ pub struct SearchRequest {
 }
 
 #[post("search")]
-async fn search_post(web::Query(info): web::Query<SearchRequest>) -> HttpResponse {
+async fn search_post(web::Query(info): web::Query<SearchRequest>, hb: Data<Handlebars<'_>>) -> HttpResponse {
     let results = search(web::Query(info));
 
     let data = json!({
     "results": results,
     });
 
-    HttpResponse::Ok().body(data)
+    let body = hb.render("search_results", &data).unwrap();
+
+    HttpResponse::Ok().body(body)
 }
 
 #[get("search")]
@@ -126,25 +128,25 @@ async fn main() -> std::io::Result<()> {
             mod_id: 0,
             title: String::from("Magic Mod"),
             description: String::from("An illustrious magic mod for magical wizards"),
-            keywords: vec![String::from("Fabric"), String::from("Magic")],
+            keywords: vec![String::from("fabric"), String::from("magic"), String::from("library")],
         },
         Mod {
             mod_id: 1,
             title: String::from("Tech Mod"),
             description: String::from("An technological mod for complete NERDS"),
-            keywords: vec![String::from("Fabric"), String::from("Utility"), String::from("Technology")],
+            keywords: vec![String::from("fabric"), String::from("utility"), String::from("technology")],
         },
         Mod {
             mod_id: 2,
-            title: String::from("Hood Mod"),
-            description: String::from("A hood mod to roleplay as if you were a real street person. Some adventure stuff too"),
-            keywords: vec![String::from("Forge"), String::from("Adventure"), String::from("Technology")]
+            title: String::from("Gamer Mod"),
+            description: String::from("A gamer mod to roleplay as if you were an epic gamer person."),
+            keywords: vec![String::from("cursed"), String::from("adventure"), String::from("forge")]
         },
         Mod {
             mod_id: 3,
             title: String::from("Adventure Mod"),
             description: String::from("An epic gamer adventure mod for epic adventure gamers"),
-            keywords: vec![String::from("Forge"), String::from("Magic"), String::from("Adventure")]
+            keywords: vec![String::from("decoration"), String::from("utility"), String::from("worldgen")]
         },
     ], Some("mod_id")).unwrap();
 
diff --git a/static/css/main.css b/static/css/main.css
index 58f4ad02d..d28821866 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3,6 +3,16 @@
 body {
     margin: 0;
     font-family: 'Montserrat', sans-serif;
+    background-color: #f3f2f0;
+}
+
+.main-flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.muted {
+    color: gray;
 }
 
 .temp-circle-logo {
@@ -15,8 +25,10 @@ body {
 }
 
 .site-header {
+    z-index: 2;
     position: sticky;
     background-color: black;
+    top: 0;
     width: 100%;
     height: 75px;
     margin-bottom: 10px;
@@ -45,5 +57,9 @@ body {
 }
 
 .gray-border {
-    border: 1px solid darkgray;
+    border: 1px solid #a9a9a9;
+}
+
+.green {
+    color: #69E781;
 }
\ No newline at end of file
diff --git a/static/css/search.css b/static/css/search.css
index 498608039..21a69c0d8 100644
--- a/static/css/search.css
+++ b/static/css/search.css
@@ -1,31 +1,102 @@
-.search-container {
-    width: 100%;
+.column {
     display: flex;
-    align-content: center;
+    flex-direction: column;
+    width: 50%;
+}
+
+.categories-flex {
+    position: sticky;
+    width: 25%;
+}
+
+.categories {
+    position: relative;
+    top: 100px;
+    padding: 5px;
+}
+
+.categories-label {
+    color: white;
+    background-color: black;
+    padding-left: 10px;
+}
+
+.category-badge {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 25px;
+    padding: 2px 5px;
+    cursor: pointer;
+    width: 165px;
+    margin-left: auto;
+    margin-right: 20px;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.category-badge img {
+    height: 23px;
+}
+
+.category-badge p {
+    margin: 0 auto;
+    font-weight: bolder;
+    text-transform: capitalize;
+}
+
+.category-ghost {
+    margin-left: 10px;
 }
 
 .search-bar {
-    margin: 0 auto;
-    width: 56.25%;
+    position: -webkit-sticky !important;
+    position: sticky !important;
     height: 2em;
+    margin-top: 30px;
+    margin-bottom: 15px;
+    top: 80px;
+    width: 100%;
+}
+
+.mod-info {
+    padding-top: 5px !important;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mod-info img {
+    height: 12px;
+    padding: 0;
+}
+
+.mod-info p {
+    font-size: 12px;
+    padding: 0 15px 0 5px !important;
 }
 
 .results {
-    width: 75%;
+    width: 100%;
     margin: auto;
 }
 
 .result {
     display: flex;
     height: 100px;
-    margin: 30px auto;
+    margin: 15px auto;
     padding: 5px;
-    width: 75%;
+    width: 100%;
     flex-direction: row;
     align-items: center;
+    background-color: white;
 }
 
-.result img {
+.result-image {
     padding: 0 10px 0 5px;
 }
 
@@ -39,6 +110,12 @@
     margin: 0;
 }
 
+.result-title {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+}
+
 .result-badges {
     margin: 0 1em 20px auto;
     align-self: center;
@@ -64,6 +141,7 @@
 .result-badge p {
     margin: 0 auto;
     font-weight: bolder;
+    text-transform: capitalize;
 }
 
 .download-badge {
@@ -99,4 +177,23 @@
 .utility-badge {
     color: white;
     background-color: orangered;
+}
+
+.decoration-badge {
+    color: white;
+    background-color: #2f92d8;
+}
+
+.world-badge {
+    background-color: yellow;
+}
+
+.library-badge {
+    color: white;
+    background-color: orange;
+}
+
+.cursed-badge {
+    color: white;
+    background-color: palevioletred;
 }
\ No newline at end of file
diff --git a/static/images/icon/cursed.png b/static/images/icon/cursed.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f2ef8a18285bb3c0304872a17f55e90246fb347
GIT binary patch
literal 6460
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
WK--?TRTH`Z0000<MNUMnLSTZnXah9>

literal 0
HcmV?d00001

diff --git a/static/images/icon/decoration.svg b/static/images/icon/decoration.svg
new file mode 100644
index 000000000..8206744d1
--- /dev/null
+++ b/static/images/icon/decoration.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#80C56E;" d="M408.906,45.536c2.263,6.186,27.401,79.804-24.155,166.617
+	c-31.315,52.729-78.861,56.218-83.517,56.434c-2.727-3.781-29.57-43.179-7.763-100.497
+	C329.376,73.721,402.655,47.612,408.906,45.536z"/>
+<path style="fill:#66AD66;" d="M408.906,45.536L301.234,268.587l0,0c4.657-0.217,52.202-3.705,83.517-56.434
+	C436.308,125.34,411.169,51.722,408.906,45.536z"/>
+<path style="fill:#FFFFFF;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+	M297.907,275.479l3.327-6.892c-0.07-0.098-0.16-0.225-0.262-0.369C298.914,273.026,297.907,275.479,297.907,275.479z"/>
+<path style="fill:#80C56E;" d="M103.094,45.536c-2.263,6.186-27.401,79.804,24.155,166.617
+	c31.315,52.729,78.861,56.218,83.517,56.434c2.727-3.781,29.57-43.179,7.762-100.497C182.624,73.721,109.345,47.612,103.094,45.536z
+	"/>
+<path style="fill:#66AD66;" d="M218.528,168.09C182.624,73.721,109.345,47.612,103.094,45.536
+	c63.67,121.61,98.013,199.506,107.934,222.682C214.849,262.756,239.774,223.93,218.528,168.09z"/>
+<path style="fill:#80C56E;" d="M256,0c-7.676,7.449-96.408,97.362-82.296,260.712c8.571,99.218,75.639,137.883,82.296,141.487
+	c6.657-3.604,73.725-42.27,82.296-141.487C352.408,97.362,263.676,7.449,256,0z"/>
+<path style="fill:#66AD66;" d="M256,0v402.199c6.657-3.604,73.725-42.27,82.296-141.487C352.408,97.362,263.676,7.449,256,0z"/>
+<path style="fill:#80C56E;" d="M445.966,250.043c16.695-57.379,11.044-110.709,11.044-110.709s-32.151,14.322-112.949,66.535
+	C281.256,246.454,261.824,317.612,256,336.79h73.813C383.468,336.79,430.976,301.562,445.966,250.043z"/>
+<path style="fill:#66AD66;" d="M457.011,139.333c0,0-83.039,164.043-201.011,197.457h73.813c53.656,0,101.163-35.228,116.154-86.747
+	C462.661,192.664,457.011,139.333,457.011,139.333z"/>
+<path style="fill:#80C56E;" d="M66.034,250.043C49.339,192.664,54.99,139.334,54.99,139.334s32.151,14.322,112.949,66.535
+	C230.744,246.454,250.176,317.612,256,336.79h-73.813C128.532,336.79,81.024,301.562,66.034,250.043z"/>
+<path style="fill:#66AD66;" d="M256,336.79c-5.824-19.178-25.256-90.336-88.061-130.922c-80.799-52.213-112.95-66.535-112.95-66.535
+	S138.028,303.377,256,336.79z"/>
+<path style="fill:#FEC37D;" d="M309.376,512H202.624c-28.315,0-52.604-20.189-57.781-48.027l-22.887-123.072h268.089
+	l-22.887,123.072C361.98,491.811,337.691,512,309.376,512z"/>
+<path style="fill:#F9AE5D;" d="M338.192,340.902l-22.887,123.072C310.128,491.811,285.838,512,257.523,512h51.853
+	c28.315,0,52.604-20.189,57.781-48.027l22.887-123.072h-51.852V340.902z"/>
+<path style="fill:#F2A559;" d="M394.718,368.559H117.282c-11.242,0-20.356-9.114-20.356-20.356l0,0
+	c0-11.242,9.114-20.356,20.356-20.356h277.437c11.242,0,20.356,9.114,20.356,20.356l0,0
+	C415.074,359.445,405.961,368.559,394.718,368.559z"/>
+<path style="fill:#EA8F3D;" d="M394.718,327.846h-32.614v40.712h32.614c11.242,0,20.356-9.114,20.356-20.356l0,0
+	C415.075,336.96,405.961,327.846,394.718,327.846z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/static/images/icon/download.svg b/static/images/icon/download.svg
index 05d7c9bbf..a210e95c0 100644
--- a/static/images/icon/download.svg
+++ b/static/images/icon/download.svg
@@ -1,2 +1,2 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512 512" width="512px"><g><path d="m256 362.667969c-8.832031 0-16-7.167969-16-16v-330.667969c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v330.667969c0 8.832031-7.167969 16-16 16zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/><path d="m256 362.667969c-4.097656 0-8.191406-1.558594-11.308594-4.695313l-85.332031-85.332031c-6.25-6.25-6.25-16.382813 0-22.636719 6.25-6.25 16.382813-6.25 22.636719 0l74.023437 74.027344 74.027344-74.027344c6.25-6.25 16.386719-6.25 22.636719 0 6.25 6.253906 6.25 16.386719 0 22.636719l-85.335938 85.332031c-3.15625 3.136719-7.25 4.695313-11.347656 4.695313zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/><path d="m453.332031 512h-394.664062c-32.363281 0-58.667969-26.304688-58.667969-58.667969v-96c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v96c0 14.699219 11.96875 26.667969 26.667969 26.667969h394.664062c14.699219 0 26.667969-11.96875 26.667969-26.667969v-96c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v96c0 32.363281-26.304688 58.667969-58.667969 58.667969zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/></g> </svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512 512" width="512px"><g><path d="m256 362.667969c-8.832031 0-16-7.167969-16-16v-330.667969c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v330.667969c0 8.832031-7.167969 16-16 16zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#69E781"/><path d="m256 362.667969c-4.097656 0-8.191406-1.558594-11.308594-4.695313l-85.332031-85.332031c-6.25-6.25-6.25-16.382813 0-22.636719 6.25-6.25 16.382813-6.25 22.636719 0l74.023437 74.027344 74.027344-74.027344c6.25-6.25 16.386719-6.25 22.636719 0 6.25 6.253906 6.25 16.386719 0 22.636719l-85.335938 85.332031c-3.15625 3.136719-7.25 4.695313-11.347656 4.695313zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#69E781"/><path d="m453.332031 512h-394.664062c-32.363281 0-58.667969-26.304688-58.667969-58.667969v-96c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v96c0 14.699219 11.96875 26.667969 26.667969 26.667969h394.664062c14.699219 0 26.667969-11.96875 26.667969-26.667969v-96c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v96c0 32.363281-26.304688 58.667969-58.667969 58.667969zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#69E781"/></g> </svg>
diff --git a/static/images/icon/library.svg b/static/images/icon/library.svg
new file mode 100644
index 000000000..83f0ce728
--- /dev/null
+++ b/static/images/icon/library.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 58 58" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="030---Messy-Books" fill-rule="nonzero"><path id="Shape" d="m5.72 52.21-5.55-31.51c-.05359011-.3041252-.08699643-.6114633-.1-.92-.08248096-3.5724087 2.48267266-6.6582757 6.01-7.23l10.71-1.89-.29 41.55z" fill="#35495e"/><path id="Shape" d="m46.94 50.83c-.1857191.771023-.8094746 1.3594717-1.59 1.5l-31.52 5.56c-1.9867206.3468301-4.02657856-.1786842-5.59841615-1.4422808-1.57183758-1.2635966-2.52340318-3.1428808-2.61158385-5.1577192-.07876599-3.4155632 2.27277316-6.4084312 5.61-7.14l8.83 2.48h-.01l-7.95 1.41c-.8866555.1558432-1.656734.7009972-2.0983662 1.4854753-.44163213.7844782-.50828985 1.7256321-.1816338 2.5645247.5656214 1.3511449 2.0021594 2.1195258 3.44 1.84l24.09-4.25z" fill="#2c3e50"/><path id="Shape" d="m20.05 46.63-7.95 1.41c-.8866555.1558432-1.656734.7009972-2.0983662 1.4854753-.44163213.7844782-.50828985 1.7256321-.1816338 2.5645247.5656214 1.3511449 2.0021594 2.1195258 3.44 1.84l24.09-4.25z" fill="#f9eab0"/><path id="Shape" d="m12.826 33.171 5.557-31.514c.1989194-1.08324679 1.2310871-1.80580869 2.317-1.622l31.277 5.515c3.5298611.57216709 6.0970156 3.66000793 6.015 7.235-.0136036.3071659-.0470063.6131344-.1.916l-5.557 31.514z" fill="#e64c3c"/><path id="Shape" d="m45.438 10.474c-.0586532-.0000276-.1171977-.0050457-.175-.015l-22.651-3.994c-.5111685-.12606546-.837041-.62687769-.7452297-1.14529488.0918113-.5184172.5698565-.87685619 1.0932297-.81970512l22.65 3.989c.5108329.08948831.8684834.55465053.8237134 1.07132656-.0447699.51667604-.4771014.91338644-.9957134.91367344z" fill="#3f5c6c"/><path id="Shape" d="m40.63 14.7c-.0587024.0000849-.1172863-.0052713-.175-.016l-14.772-2.601c-.5314773-.1077828-.8801906-.6195404-.7860712-1.1536068.0941194-.5340663.5967671-.8957872 1.1330712-.8153932l14.773 2.6c.5138125.0868279.8748237.55367.8296023 1.0728015-.0452214.5191314-.4815156.9165204-1.0026023.9131985z" fill="#3f5c6c"/><rect id="Rectangle-path" fill="#ecf0f1" height="12" rx="1" transform="matrix(.985 .174 -.174 .985 4.511 -5.088)" width="23" x="19.833" y="17.234"/><path id="Shape" d="m57.99 12.78c-.0119064.3086184-.0453208.6160308-.1.92l-5.56 31.51-7.71-2.35 4.47-25.34 1.06-5.98 1.08-6.12.75.13c3.5257169.57454224 6.0894162 3.6586597 6.01 7.23z" fill="#c03a2b"/><path id="Shape" d="m46.42 37.06-31.28-5.51c-.1156046-.0199087-.2326936-.0299449-.35-.03-1.0364668.0026285-1.8991916.7966438-1.9876335 1.8293337-.088442 1.0326898.6267071 1.9618379 1.6476335 2.1406663l31.51 5.55c.8858791.1604248 1.6536061.708589 2.0929592 1.4943923.439353.7858033.5042941 1.7269044.1770408 2.5656077-.5625614 1.3481553-1.9969395 2.1134358-3.43 1.83l-31.39-5.53c-.1156046-.0199087-.2326936-.0299449-.35-.03-1.0383851-.0025575-1.9060067.7899765-1.9971986 1.8243528-.0911918 1.0343762.624383 1.9664868 1.6471986 2.1456472l31.52 5.55c1.9852737.3480364 4.0242759-.1756778 5.5960992-1.4373484 1.5718232-1.2616705 2.5242277-3.1390976 2.6139008-5.1526516.0784876-3.576507-2.4892143-6.6645738-6.02-7.24z" fill="#802f34"/><path id="Shape" d="m48.23 45.1c-.5625614 1.3481553-1.9969395 2.1134358-3.43 1.83l-31.39-5.53 1.04-5.91 31.51 5.55c.8858791.1604248 1.6536061.708589 2.0929592 1.4943923.439353.7858033.5042941 1.7269044.1770408 2.5656077z" fill="#f9eab0"/></g></g></svg>
\ No newline at end of file
diff --git a/static/images/icon/search.svg b/static/images/icon/search.svg
new file mode 100644
index 000000000..2abe89b6f
--- /dev/null
+++ b/static/images/icon/search.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px"><g><g>
+	<g>
+		<path d="M310,190c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S315.52,190,310,190z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#E3E9ED"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M500.281,443.719l-133.48-133.48C388.546,277.485,400,239.555,400,200C400,89.72,310.28,0,200,0S0,89.72,0,200    s89.72,200,200,200c39.556,0,77.486-11.455,110.239-33.198l36.895,36.895c0.005,0.005,0.01,0.01,0.016,0.016l96.568,96.568    C451.276,507.838,461.319,512,472,512c10.681,0,20.724-4.162,28.278-11.716C507.837,492.731,512,482.687,512,472    S507.837,451.269,500.281,443.719z M305.536,345.727c0,0.001-0.001,0.001-0.002,0.002C274.667,368.149,238.175,380,200,380    c-99.252,0-180-80.748-180-180S100.748,20,200,20s180,80.748,180,180c0,38.175-11.851,74.667-34.272,105.535    C334.511,320.988,320.989,334.511,305.536,345.727z M326.516,354.793c10.35-8.467,19.811-17.928,28.277-28.277l28.371,28.371    c-8.628,10.183-18.094,19.65-28.277,28.277L326.516,354.793z M486.139,486.139c-3.78,3.78-8.801,5.861-14.139,5.861    s-10.359-2.081-14.139-5.861l-88.795-88.795c10.127-8.691,19.587-18.15,28.277-28.277l88.798,88.798    C489.919,461.639,492,466.658,492,472C492,477.342,489.919,482.361,486.139,486.139z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#E3E9ED"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M200,40c-88.225,0-160,71.775-160,160s71.775,160,160,160s160-71.775,160-160S288.225,40,200,40z M200,340    c-77.196,0-140-62.804-140-140S122.804,60,200,60s140,62.804,140,140S277.196,340,200,340z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#E3E9ED"/>
+	</g>
+</g><g>
+	<g>
+		<path d="M312.065,157.073c-8.611-22.412-23.604-41.574-43.36-55.413C248.479,87.49,224.721,80,200,80c-5.522,0-10,4.478-10,10    c0,5.522,4.478,10,10,10c41.099,0,78.631,25.818,93.396,64.247c1.528,3.976,5.317,6.416,9.337,6.416    c1.192,0,2.405-0.215,3.584-0.668C311.472,168.014,314.046,162.229,312.065,157.073z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#E3E9ED"/>
+	</g>
+</g></g> </svg>
diff --git a/static/images/icon/updated.svg b/static/images/icon/updated.svg
new file mode 100644
index 000000000..d84e01263
--- /dev/null
+++ b/static/images/icon/updated.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><circle cx="256" cy="256" fill="#fe8205" r="256"/><path d="m512 256c0-140.61-115.39-256-256-256v512c140.61 0 256-115.39 256-256z" fill="#fa5d0f"/><path d="m256 61c-107.52 0-195 87.48-195 195s87.48 196 195 196 195-88.48 195-196-87.48-195-195-195z" fill="#f0f7ff"/><path d="m451 256c0-107.52-87.48-195-195-195v391c107.52 0 195-88.48 195-196z" fill="#dfe7f4"/><path d="m256 121c-8.291 0-15 6.709-15 15v150c0 8.291 6.709 15 15 15s15-6.709 15-15v-150c0-8.291-6.709-15-15-15z" fill="#575f64"/><path d="m271 286v-150c0-8.291-6.709-15-15-15v180c8.291 0 15-6.709 15-15z" fill="#474f54"/><path d="m346 241h-90-30c-8.291 0-15 6.709-15 15s6.709 15 15 15h30 90c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#575f64"/><path d="m361 256c0-8.291-6.709-15-15-15h-90v30h90c8.291 0 15-6.709 15-15z" fill="#474f54"/></g></svg>
\ No newline at end of file
diff --git a/static/images/icon/version.svg b/static/images/icon/version.svg
new file mode 100644
index 000000000..e8ace91f6
--- /dev/null
+++ b/static/images/icon/version.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 408.425 408.425" style="enable-background:new 0 0 408.425 408.425;" xml:space="preserve">
+<path style="fill:#ED664C;" d="M55.737,55.725c3.7-3.7,8.7-6,14.3-6.1l131.1-3.4c8.6-0.2,16.9,3.1,23,9.2l165.2,165.2
+	c12.3,12.3,12.3,32.2,0,44.5l-124.2,124.2c-12.3,12.3-32.2,12.3-44.5,0l-165.2-165.2c-6.1-6.1-9.4-14.4-9.2-23l3.4-131.1
+	C49.737,64.425,52.038,59.325,55.737,55.725z M236.938,339.525l102.7-102.7l-89-89l-102.7,102.7L236.938,339.525z M170.538,135.225
+	c0-19.5-15.8-35.4-35.4-35.4s-35.4,15.9-35.4,35.4s15.9,35.4,35.4,35.4S170.538,154.725,170.538,135.225z"/>
+<polygon style="fill:#FDC75B;" points="339.537,236.925 236.938,339.525 147.938,250.525 250.537,147.925 "/>
+<path d="M231.137,48.325c-8-8-19-12.4-30.3-12.1l-131,3.4c-4.6,0.1-8.9,1.2-12.9,3.1l-39.9-39.8c-3.9-3.9-10.2-3.9-14.1,0
+	s-3.9,10.2,0,14.1l39.8,39.8c-1.9,4-3,8.4-3.1,12.9l-3.4,131.1c-0.3,11.3,4.1,22.3,12.1,30.3l165.2,165.2
+	c8.1,8.1,18.7,12.1,29.3,12.1c10.6,0,21.2-4,29.3-12.1l124.2-124.2l0,0c16.1-16.2,16.1-42.5,0-58.6L231.137,48.325z
+	 M382.237,258.025l-124.2,124.2c-8.4,8.4-22,8.4-30.3,0l-165.2-165.2c-4.1-4.1-6.4-9.8-6.2-15.7l3.3-127.7l37.3,37.3
+	c-4.4,7-7,15.3-7,24.2c0,25,20.4,45.4,45.4,45.4s45.4-20.3,45.4-45.4c0-25-20.3-45.4-45.4-45.4c-8.9,0-17.2,2.6-24.2,7l-37.3-37.3
+	l127.7-3.3c0.2,0,0.3,0,0.5,0c5.7,0,11.2,2.3,15.2,6.2l165,165.4C390.537,236.025,390.537,249.625,382.237,258.025z
+	 M109.838,135.225c0-14,11.4-25.4,25.4-25.4s25.4,11.4,25.4,25.4s-11.4,25.4-25.4,25.4
+	C121.238,160.525,109.838,149.225,109.838,135.225z"/>
+<path d="M257.637,140.825c-3.9-3.9-10.2-3.9-14.1,0l-102.7,102.6c-3.9,3.9-3.9,10.2,0,14.1l89,88.9c1.9,1.9,4.4,2.8,7.1,2.8l0,0
+	c2.7,0,5.2-0.9,7.1-2.8l102.7-102.6c1.9-1.9,2.9-4.4,2.9-7s-1.1-5.2-2.9-7L257.637,140.825z M236.938,325.425l-74.8-74.9l88.5-88.5
+	l74.9,74.8L236.938,325.425z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/static/images/icon/world.svg b/static/images/icon/world.svg
new file mode 100644
index 000000000..9d9bf7e16
--- /dev/null
+++ b/static/images/icon/world.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><g><g><g><g><g><path d="m369.89 391.833c3.647 7.222 1.999 16.061-3.997 21.49l-13.011 11.775c-4.595 4.162-10.91 5.666-16.895 4.018l-24.879-6.84c-.979-.268-2.019.051-2.668.824l-18.049 21.469c-.165.299-.206.659-.082.989l20.717 57.989c-62.893 19.81-134.378 4.78-184.218-45.071-48.738-48.728-64.191-118.142-46.348-179.995l23.169 27.032c.546.649 1.38.979 2.215.896l67.385-6.882c1.339-.134 2.338-1.257 2.318-2.606l-.495-45.071c-.072-6.14 2.946-11.847 8.087-15.237l39.734-26.29c4.131-2.73 9.055-3.636 13.887-2.555 4.832 1.082 8.911 4.008 11.486 8.252l11.064 18.255c2.699 4.44 3.338 9.838 1.772 14.794-1.576 4.966-5.213 9.004-9.982 11.075l-12.486 5.481c-.979.422-1.597 1.391-1.556 2.452l.381 11.507c.031.958.577 1.813 1.422 2.236l23.035 11.507c.69.34 1.494.361 2.194.052l47.1-20.697c.443-.185.804-.484 1.061-.865l18.533-26.568c3.698-5.326 10.024-8.262 16.493-7.654l70.537 6.727c11.6 22.067 18.368 46.008 20.315 70.269l-83.651 15.34c-.515.093-.989.34-1.36.711l-15.35 15.35c-.711.711-.783 1.535-.763 1.957.031.433.175 1.246.948 1.875l15.35 12.548c1.968 1.617 3.544 3.575 4.687 5.851z" fill="#31a7fb"/><path d="m306.039 489.608 4.986 13.949c-23.942 7.531-49.119 10.024-73.875 7.479 23.849-2.462 47.306-9.601 68.889-21.428z" fill="#1c96f9"/><path d="m438.13 314.589-37.282 6.84c-1.195-27.98-8.798-55.743-22.788-80.901l39.755 3.791c11.599 22.068 18.367 46.009 20.315 70.27z" fill="#1c96f9"/><path d="m126.802 200.081c71.358-71.358 187.049-71.351 258.4 0 15.63 15.63 27.835 33.39 36.619 52.338l-75.266-7.13c-3.704-.35-7.312 1.32-9.434 4.374l-18.51 26.544c-1.079 1.56-2.574 2.792-4.309 3.55l-47.103 20.697c-2.807 1.232-6.022 1.152-8.763-.219l-23.03-11.511c-3.383-1.691-5.563-5.096-5.687-8.88l-.386-11.512c-.138-4.221 2.304-8.092 6.175-9.791l12.503-5.475c5.716-2.493 7.925-9.456 4.688-14.792l-11.06-18.248c-3.04-5.008-9.623-6.488-14.5-3.259l-39.747 26.289c-2.923 1.932-4.659 5.212-4.615 8.712l.496 45.069c.058 5.337-3.959 9.835-9.266 10.374l-67.377 6.882c-3.361.343-6.671-.984-8.872-3.55l-19.678-22.97c7.495-32.063 23.73-62.501 48.722-87.492z" fill="#27e19d"/><path d="m347.491 200.079c-30.867-30.867-70.049-48.382-110.322-52.544 52.822-5.44 107.561 12.075 148.03 52.544 15.629 15.629 27.838 33.391 36.626 52.338l-39.511-3.74c-8.613-17.545-20.224-33.999-34.823-48.598z" fill="#26d192"/><path d="m332.301 340.531 15.356-15.356c1.479-1.479 3.373-2.473 5.43-2.851l84.251-15.455c6.631 53.916-10.747 110.22-52.138 151.612-23.428 23.428-51.628 39.16-81.466 47.203l-20.696-57.514c-1.003-2.787-.556-5.89 1.192-8.28l18.3-21.763c2.592-3.083 6.743-4.374 10.627-3.305l24.884 6.848c3.399.936 7.041.069 9.655-2.297l13.013-11.78c3.439-3.113 4.375-8.141 2.288-12.283l-11.9-23.612c-.65-1.289-1.563-2.427-2.68-3.341l-15.351-12.553c-4.724-3.863-5.079-10.959-.765-15.273z" fill="#27e19d"/><path d="m385.199 458.483c-23.429 23.428-51.627 39.161-81.464 47.197l-4.513-12.528c17.432-8.603 33.773-20.162 48.269-34.669 39.655-39.655 57.273-93.003 52.843-144.826l37.007-6.789c6.625 53.914-10.745 110.219-52.142 151.615z" fill="#26d192"/></g></g></g></g></g></g><g><path d="m258.493 102.326c-1.248-.864-2.048-2.255-2.165-3.769-2.786-36.006 12.467-70.31 42.684-87.669 30.217-17.358 67.534-13.254 97.243 7.285 1.249.864 2.049 2.257 2.166 3.771 2.777 36.011-12.476 70.315-42.693 87.673-30.217 17.359-67.535 13.254-97.235-7.291z" fill="#23f1a8"/><g fill="#26d192"><path d="m256.326 98.556c-.308-3.978-.392-7.93-.269-11.848 27.761 14.988 60.25 16.518 87.128 1.078s41.923-44.277 42.969-75.814c3.446 1.867 6.818 3.931 10.099 6.2 1.249.864 2.049 2.258 2.166 3.772 2.778 36.012-12.477 70.312-42.694 87.671s-67.532 13.258-97.233-7.288c-1.249-.864-2.049-2.257-2.166-3.771z"/><path d="m387.805 76.049c-2.431 4.626-5.264 9.014-8.468 13.104-4.79 6.088-10.415 11.528-16.854 16.122-2.163 1.545-4.409 2.988-6.758 4.337-3.276 1.885-6.635 3.513-10.065 4.893-28.155 11.384-60.688 6.14-87.164-12.177-1.257-.865-2.05-2.256-2.174-3.771-.299-3.976-.392-7.932-.268-11.847 17.173 9.272 36.159 13.392 54.507 11.528 8.097-.814 16.071-2.802 23.715-6.037 3.029-1.277 6.006-2.751 8.911-4.42 4.718-2.709 9.076-5.831 13.053-9.333 4.121-3.585 7.84-7.562 11.126-11.868 11.662-15.195 18.111-34.346 18.791-54.61 3.441 1.864 6.82 3.935 10.096 6.202 1.246.865 2.05 2.256 2.163 3.77 1.493 19.307-2.205 38.129-10.611 54.107z"/></g></g><g><path d="m253.512 102.326c1.248-.864 2.048-2.255 2.165-3.769 2.786-36.006-12.467-70.31-42.684-87.669-30.217-17.358-67.534-13.254-97.243 7.285-1.249.864-2.049 2.257-2.166 3.771-2.777 36.011 12.476 70.315 42.693 87.673 30.217 17.359 67.534 13.254 97.235-7.291z" fill="#23f1a8"/><path d="m113.582 21.945c.118-1.511.916-2.9 2.163-3.762 29.708-20.539 67.032-24.653 97.244-7.294 30.221 17.358 45.47 51.66 42.689 87.67-.117 1.514-.917 2.907-2.166 3.772-4.869 3.37-9.945 6.303-15.157 8.764 1.041-34.133-14.166-66.062-42.963-82.608-25.262-14.516-55.491-14.022-82.082-1.473.048-1.685.14-3.375.272-5.069z" fill="#26d192"/><path d="m398.715 28.176c-.041-2.071-.134-4.152-.299-6.233-.113-1.514-.917-2.905-2.163-3.77-1.721-1.185-3.462-2.328-5.233-3.4l-51.002 29.299 4.149-43.99c-5.223-.227-10.436.01-15.587.721l-4.971 52.695-23.05 13.242 5.603-59.507c-2.421 1.092-4.811 2.308-7.149 3.657-3.276 1.885-6.387 3.966-9.303 6.233l-5.568 59.049-28.14 16.165-28.14-16.165-5.568-59.049h-.01c-2.916-2.267-6.016-4.348-9.292-6.233-2.339-1.35-4.729-2.565-7.149-3.657l5.603 59.507-23.049-13.241-4.971-52.695c-5.151-.711-10.364-.948-15.587-.721l4.149 43.99-51.002-29.299c-1.772 1.082-3.513 2.215-5.233 3.4-1.246.865-2.05 2.256-2.163 3.77-.165 2.091-.258 4.172-.299 6.243l50.997 29.291-40.088 18.571c2.431 4.626 5.264 9.014 8.468 13.104l48.027-22.251 23.051 13.24-54.224 25.133c2.163 1.545 4.409 2.988 6.758 4.337 3.276 1.885 6.634 3.513 10.065 4.893l53.813-24.938 28.118 16.15v66.787c0 4.265 3.461 7.726 7.726 7.726s7.726-3.461 7.726-7.726v-66.787l28.116-16.151 53.815 24.939c3.43-1.38 6.789-3.008 10.065-4.893 2.349-1.349 4.595-2.792 6.758-4.337l-54.227-25.135 23.05-13.24 48.032 22.253c3.204-4.09 6.037-8.478 8.468-13.104l-40.093-18.574z" fill="#26d192"/><g><path d="m362.483 105.275c-2.163 1.545-4.409 2.988-6.758 4.337-3.276 1.885-6.635 3.513-10.065 4.893l-35.099-16.267c8.097-.814 16.071-2.802 23.715-6.037z" fill="#1ec186"/></g><g><path d="m387.805 76.049c-2.431 4.626-5.264 9.014-8.468 13.104l-23.097-10.704c4.121-3.585 7.84-7.562 11.126-11.868z" fill="#1ec186"/></g><g fill="#1ec186"><path d="m120.986 14.774 10.096 5.8c-6.037 1.556-11.991 3.709-17.771 6.439.052-1.679.144-3.369.268-5.068.124-1.514.917-2.895 2.163-3.76 1.721-1.197 3.472-2.33 5.244-3.411z"/><g><path d="m238.108 99.877 10.168 5.841v.021c1.772-1.082 3.513-2.215 5.233-3.41 1.246-.865 2.05-2.256 2.163-3.771.165-2.081.258-4.162.299-6.243l-21.345-12.259c1.803 6.377 2.967 13.022 3.482 19.821z"/><path d="m261.236 89.328-5.213 2.998c.041 2.071.144 4.152.299 6.233.123 1.514.917 2.905 2.174 3.771 1.721 1.185 3.462 2.318 5.233 3.4v-.01l16.73-9.612c-6.531-1.567-12.97-3.844-19.223-6.78z"/></g><path d="m398.715 28.176-16.751 9.622c1.937-6.439 3.224-13.156 3.832-20.027l5.233-2.998c1.762 1.082 3.513 2.215 5.223 3.4 1.246.865 2.05 2.256 2.163 3.77.166 2.082.258 4.163.3 6.233z"/></g><g><path d="m226.333 59.968c-4.605-8.221-10.487-15.628-17.585-21.912h-.01l-2.895-30.823c2.421 1.092 4.811 2.308 7.149 3.657 3.276 1.885 6.377 3.966 9.292 6.233h.01z" fill="#1ec186"/></g><g><path d="m185.579 23.695c-5.192-2.122-10.529-3.678-15.958-4.677l-1.782-18.935c5.223-.227 10.436.01 15.587.721z" fill="#1ec186"/></g></g><path d="m308.192 192.227c-10.439-9.944-29.894-16.632-52.189-16.632s-41.751 6.688-52.189 16.632z" fill="#27e19d"/><g><path d="m308.191 199.953c-1.915 0-3.832-.707-5.328-2.132-9.389-8.944-27.344-14.5-46.861-14.5s-37.471 5.556-46.861 14.5c-3.09 2.943-7.979 2.825-10.924-.266-2.943-3.09-2.824-7.98.266-10.924 12.333-11.748 33.837-18.763 57.519-18.763 23.682 0 45.184 7.014 57.519 18.763 3.09 2.943 3.208 7.834.266 10.924-1.519 1.595-3.556 2.398-5.596 2.398z" fill="#26d192"/></g><path d="m142.153 363.965 16.84-7.415c3.487-1.535 7.538-1.021 10.53 1.338l12.829 10.114c1.817 1.433 4.064 2.212 6.379 2.212h38.033c4.348 0 8.228 2.73 9.697 6.822l5.581 15.548c.896 2.496.795 5.242-.282 7.665l-16.093 36.209c-2.145 4.826-7.591 7.248-12.611 5.61l-48.174-15.72c-4.165-1.359-7.015-5.204-7.105-9.584l-.365-17.865c-.094-4.619-3.252-8.611-7.726-9.766l-5.824-1.503c-4.434-1.144-7.58-5.077-7.723-9.654l-.133-4.262c-.13-4.197 2.302-8.055 6.147-9.749z" fill="#27e19d"/></g></svg>
\ No newline at end of file
diff --git a/static/js/search.js b/static/js/search.js
index 49e65bfa2..023011c0b 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -1,32 +1,81 @@
 let input = document.getElementById("search-input");
+
+let category_inputs = {
+    "technology": false,
+    "adventure": false,
+    "magic": false,
+    "utility": false,
+    "decoration": false,
+    "library": false,
+    "worldgen": false,
+    "cursed": false,
+    "forge": false,
+    "fabric": false,
+}
+
 let resultContainer = document.getElementById("results");
 
+window.onload = function () {
+    let categories = document.getElementsByClassName("category-badge");
+
+    for (let category of categories) {
+        let ghost = document.createElement('div');
+        ghost.className = "category-ghost";
+        ghost.id = category.id + "-ghost";
+
+        category.appendChild(ghost);
+    }
+}
+
+function activateCategory(element) {
+    category_inputs[element.id] = !category_inputs[element.id]
+
+    if (category_inputs[element.id]) {
+        element.style.width = "155px";
+        element.style.boxShadow = "10px 0 " + element.style.color;
+
+        document.getElementById(element.id + "-ghost").className = "";
+    } else {
+        element.style.width = "165px";
+        element.style.boxShadow = "0 0";
+
+        document.getElementById(element.id + "-ghost").className = "category-ghost";
+    }
+
+    handleSearch();
+}
+
 function handleSearch() {
     let safeName = encodeURIComponent(input.value).replace(/%20/g,'+');
 
-    let xmlHttp = new XMLHttpRequest();
-    xmlHttp.onreadystatechange = function() {
-        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
-            let parsedResponse = JSON.parse(xmlHttp.responseText);
-            let contentToSet = "";
+    let queryString = "search?q=" + safeName;
+    let filterString = "";
 
-            for (let result of parsedResponse.results) {
-                contentToSet += `
-                        <div class="result gray-border rounded-border">
-                            <img src="..." width="75px" height="75px">
-                            <div class="result-info">
-                                <h2>${result.title}</h2>
-                                <p>${result.description}</p>
-                            </div>
-                        </div>
-                    `
-            }
+    for (let key in category_inputs) {
+        if (category_inputs.hasOwnProperty(key)) {
 
-            resultContainer.innerHTML = contentToSet;
+            if(category_inputs[key])
+                filterString += key + " AND keywords=";
         }
     }
-    xmlHttp.open("POST", "search?q=" + safeName, true);
+
+    let takeOffLength = " AND keywords=".length;
+
+    if(filterString.length > takeOffLength) {
+        filterString = filterString.substring(0, filterString.length - takeOffLength)
+        queryString += "&f=" + encodeURIComponent( "keywords=" + filterString).replace(/%20/g,'+');
+    }
+
+    let xmlHttp = new XMLHttpRequest();
+
+    xmlHttp.onreadystatechange = function() {
+        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+            resultContainer.innerHTML = xmlHttp.responseText;
+        }
+    }
+
+    xmlHttp.open("POST", queryString, true);
     xmlHttp.send(null);
 
-    window.history.pushState('Search', 'Search', '/search?q=' + safeName);
+    window.history.pushState('Search', 'Search', queryString);
 }
\ No newline at end of file
diff --git a/templates/search.hbs b/templates/search.hbs
index a65ba2551..ae51231a2 100644
--- a/templates/search.hbs
+++ b/templates/search.hbs
@@ -1,5 +1,5 @@
+<!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -25,68 +25,68 @@
     </div>
 </header>
 
-<div class="search-container">
-    <div class="filters">
-        <label>
-            <input type="checkbox">
-        </label>
+<div class="main-flex">
+    <div class="categories-flex">
+        <div class="categories">
+            <a class="categories-label category-badge category-active">
+                <p>CATEGORIES</p>
+            </a>
+            <a class="tech-badge category-badge category-active" id="technology" onclick="activateCategory(this)">
+                <img alt="tech" src="static/images/icon/tech.svg" class="result-image"/>
+                <p>TECH</p>
+            </a>
+            <a class="adventure-badge category-badge" id="adventure" onclick="activateCategory(this)">
+                <img alt="adventure" src="static/images/icon/adventure.svg" class="result-image"/>
+                <p>ADVENTURE</p>
+            </a>
+            <a class="magic-badge category-badge" id="magic" onclick="activateCategory(this)">
+                <img alt="magic" src="static/images/icon/magic.svg" class="result-image"/>
+                <p>MAGIC</p>
+            </a>
+            <a class="utility-badge category-badge" id="utility" onclick="activateCategory(this)">
+                <img alt="util" src="static/images/icon/util.svg" class="result-image"/>
+                <p>UTILITY</p>
+            </a>
+            <a class="decoration-badge category-badge" id="decoration" onclick="activateCategory(this)">
+                <img alt="decoration" src="static/images/icon/decoration.svg" class="result-image"/>
+                <p>DECORATION</p>
+            </a>
+            <a class="library-badge category-badge" id="library" onclick="activateCategory(this)">
+                <img alt="library" src="static/images/icon/library.svg" class="result-image"/>
+                <p>LIBRARY</p>
+            </a>
+            <a class="world-badge category-badge" id="world" onclick="activateCategory(this)">
+                <img alt="world" src="static/images/icon/world.svg" class="result-image"/>
+                <p>WORLDGEN</p>
+            </a>
+            <a class="cursed-badge category-badge" id="cursed" onclick="activateCategory(this)">
+                <img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/>
+                <p>CURSED</p>
+            </a>
+            <a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)">
+                <img alt="forge" src="static/images/icon/forge.jpg" class="result-image"/>
+                <p>FORGE</p>
+            </a>
+            <a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)">
+                <img alt="fabric" src="static/images/icon/fabric.png" class="result-image"/>
+                <p>FABRIC</p>
+            </a>
+        </div>
     </div>
 
-    <input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
+    <div class="column">
+        <div class="search-div">
+            <input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
+        </div>
+
+        <div id="results" class="results">
+            {{> search_results}}
+        </div>
+    </div>
 </div>
 
-<div id="results" class="results">
-    {{#each results}}
-        <div class="result gray-border rounded-border">
-            <img src="..." width="75px" height="75px">
-            <div class="result-info">
-                <h2>{{this.title}}</h2>
-                <p>{{this.description}}</p>
-            </div>
-            <div class="result-badges">
-                {{#contains this.keywords "Technology"}}
-                    <div class="tech-badge result-badge">
-                        <img alt="tech" src="static/images/icon/tech.svg">
-                        <p>TECH</p>
-                    </div>
-                {{/contains}}
-                {{#contains this.keywords "Adventure"}}
-                    <div class="adventure-badge result-badge">
-                        <img alt="adventure" src="static/images/icon/adventure.svg">
-                        <p>ADVENTURE</p>
-                    </div>
-                {{/contains}}
-                {{#contains this.keywords "Magic"}}
-                    <div class="magic-badge result-badge">
-                        <img alt="magic" src="static/images/icon/magic.svg">
-                        <p>MAGIC</p>
-                    </div>
-                {{/contains}}
-                {{#contains this.keywords "Utility"}}
-                    <div class="utility-badge result-badge">
-                        <img alt="util" src="static/images/icon/util.svg">
-                        <p>UTILITY</p>
-                    </div>
-                {{/contains}}
-                {{#contains this.keywords "Forge"}}
-                    <div class="forge-badge result-badge">
-                        <img alt="forge" src="static/images/icon/forge.jpg">
-                        <p>FORGE</p>
-                    </div>
-                {{/contains}}
-                {{#contains this.keywords "Fabric"}}
-                    <div class="fabric-badge result-badge">
-                        <img alt="fabric" src="static/images/icon/fabric.png">
-                        <p>FABRIC</p>
-                    </div>
-                {{/contains}}
-            </div>
-        </div>
-    {{/each}}
-</div>
 
 <script src="static/js/search.js"></script>
 
 </body>
-
 </html>
\ No newline at end of file
diff --git a/templates/search_results.hbs b/templates/search_results.hbs
new file mode 100644
index 000000000..e361fe273
--- /dev/null
+++ b/templates/search_results.hbs
@@ -0,0 +1,84 @@
+{{#each results}}
+    <div class="result gray-border rounded-border">
+        <img src="..." width="75px" height="75px" class="result-image"/>
+        <div class="result-info">
+            <div class="result-title">
+                <h2>{{this.title}}</h2>
+                <p class="muted"> by {{this.author}}</p>
+            </div>
+            <p>{{this.description}}</p>
+            <div class="mod-info">
+                <img src="static/images/icon/download.svg" alt="download" title="Downloads"/>
+                <p title="Downloads">1.1M</p>
+
+                <img src="static/images/icon/updated.svg" alt="updated" title="Last Updated"/>
+                <p title="Last Updated">5/13/20</p>
+
+                <img src="static/images/icon/version.svg" alt="version" title="Version"/>
+                <p title="Version">1.2.3</p>
+            </div>
+        </div>
+        <div class="result-badges">
+            {{#contains this.keywords "technology"}}
+                <div class="tech-badge result-badge">
+                    <img alt="tech" src="static/images/icon/tech.svg" class="result-image"/>
+                    <p>TECH</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "adventure"}}
+                <div class="adventure-badge result-badge">
+                    <img alt="adventure" src="static/images/icon/adventure.svg" class="result-image"/>
+                    <p>ADVENTURE</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "magic"}}
+                <div class="magic-badge result-badge">
+                    <img alt="magic" src="static/images/icon/magic.svg" class="result-image"/>
+                    <p>MAGIC</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "utility"}}
+                <div class="utility-badge result-badge">
+                    <img alt="util" src="static/images/icon/util.svg" class="result-image"/>
+                    <p>UTILITY</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "decoration"}}
+                <div class="decoration-badge result-badge">
+                    <img alt="decoration" src="static/images/icon/decoration.svg" class="result-image"/>
+                    <p>DECORATION</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "library"}}
+                <div class="library-badge result-badge">
+                    <img alt="library" src="static/images/icon/library.svg" class="result-image"/>
+                    <p>LIBRARY</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "worldgen"}}
+                <div class="world-badge result-badge">
+                    <img alt="world" src="static/images/icon/world.svg" class="result-image"/>
+                    <p>WORLDGEN</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "cursed"}}
+                <div class="cursed-badge result-badge">
+                    <img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/>
+                    <p>CURSED</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "forge"}}
+                <div class="forge-badge result-badge">
+                    <img alt="forge" src="static/images/icon/forge.jpg" class="result-image"/>
+                    <p>FORGE</p>
+                </div>
+            {{/contains}}
+            {{#contains this.keywords "fabric"}}
+                <div class="fabric-badge result-badge">
+                    <img alt="fabric" src="static/images/icon/fabric.png" class="result-image"/>
+                    <p>FABRIC</p>
+                </div>
+            {{/contains}}
+        </div>
+    </div>
+{{/each}}