diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..fda1aab
Binary files /dev/null and b/.DS_Store differ
diff --git a/Cargo.lock b/Cargo.lock
index 2cd753f..0df78d8 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1027,6 +1027,7 @@ dependencies = [
  "reqwest",
  "serde_json",
  "stylist",
+ "uuid",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "wasm-logger",
diff --git a/Cargo.toml b/Cargo.toml
index e30d673..4093e97 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,6 +22,7 @@ js-sys = "0.3"
 
 #other libs
 reqwest = { version = "0.11.11", features = ["rustls-tls", "json", "blocking"], default-features = false }
+uuid = { version = "1.3.0", features = ["v4", "fast-rng", "macro-diagnostics", "serde", "js"] }
 log = "0.4"
 serde_json = "1.0.88"
 
diff --git a/css/.DS_Store b/css/.DS_Store
new file mode 100644
index 0000000..f18c50b
Binary files /dev/null and b/css/.DS_Store differ
diff --git a/css/landing.css b/css/landing.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/navbar.css b/css/navbar.css
new file mode 100644
index 0000000..799f274
--- /dev/null
+++ b/css/navbar.css
@@ -0,0 +1,46 @@
+body { 
+    margin: 0;   /* Remove body margins */
+}
+.navbar-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #252631;
+    padding: 15px;
+    padding-right: 40px;
+    margin: 0px;
+}
+.navbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-grow: 1;
+}
+.navbar-item {
+    color: white;
+    font-size: 14pt;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Source Sans Pro;
+}
+.navbar-item:hover {
+    background-color: #ffffff14;
+    font-size: 15pt;
+    font-weight: bold;
+    border-radius: 3px;
+    transition-duration: 0.3s;
+    cursor: pointer;
+}
+.navbar-title {
+    color: white;
+    font-size: 14pt;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Source Sans Pro;
+}
+/*}*/
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index 783609f..ebdfdbb 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html><html><head>
         <meta charset="utf-8">
         <title>Yew App</title>
+        <link rel="stylesheet" href="/navbar-b14cff87445aae60.css">
+        <link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
+        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
     
-<link rel="preload" href="/remax-template-frontend-c4b1b5101bad59f_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/remax-template-frontend-c4b1b5101bad59f.js"></head>
-<body><script type="module">import init from '/remax-template-frontend-c4b1b5101bad59f.js';init('/remax-template-frontend-c4b1b5101bad59f_bg.wasm');</script><script>(function () {
+<link rel="preload" href="/remax-template-frontend-abf7cea69d31badc_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/remax-template-frontend-abf7cea69d31badc.js"></head>
+<body><script type="module">import init from '/remax-template-frontend-abf7cea69d31badc.js';init('/remax-template-frontend-abf7cea69d31badc_bg.wasm');</script><script>(function () {
     var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     var url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;
diff --git a/dist/landing-c920ca43256fdcb9.css b/dist/landing-c920ca43256fdcb9.css
new file mode 100644
index 0000000..e69de29
diff --git a/dist/navbar-b14cff87445aae60.css b/dist/navbar-b14cff87445aae60.css
new file mode 100644
index 0000000..799f274
--- /dev/null
+++ b/dist/navbar-b14cff87445aae60.css
@@ -0,0 +1,46 @@
+body { 
+    margin: 0;   /* Remove body margins */
+}
+.navbar-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #252631;
+    padding: 15px;
+    padding-right: 40px;
+    margin: 0px;
+}
+.navbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-grow: 1;
+}
+.navbar-item {
+    color: white;
+    font-size: 14pt;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Source Sans Pro;
+}
+.navbar-item:hover {
+    background-color: #ffffff14;
+    font-size: 15pt;
+    font-weight: bold;
+    border-radius: 3px;
+    transition-duration: 0.3s;
+    cursor: pointer;
+}
+.navbar-title {
+    color: white;
+    font-size: 14pt;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Source Sans Pro;
+}
+/*}*/
\ No newline at end of file
diff --git a/dist/remax-template-frontend-c4b1b5101bad59f.js b/dist/remax-template-frontend-abf7cea69d31badc.js
similarity index 70%
rename from dist/remax-template-frontend-c4b1b5101bad59f.js
rename to dist/remax-template-frontend-abf7cea69d31badc.js
index 357e0de..a314bd2 100644
--- a/dist/remax-template-frontend-c4b1b5101bad59f.js
+++ b/dist/remax-template-frontend-abf7cea69d31badc.js
@@ -1,5 +1,22 @@
 let wasm;
 
+const heap = new Array(128).fill(undefined);
+
+heap.push(undefined, null, true, false);
+
+function getObject(idx) { return heap[idx]; }
+
+let heap_next = heap.length;
+
+function addHeapObject(obj) {
+    if (heap_next === heap.length) heap.push(heap.length + 1);
+    const idx = heap_next;
+    heap_next = heap[idx];
+
+    heap[idx] = obj;
+    return idx;
+}
+
 const cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
 
 cachedTextDecoder.decode();
@@ -17,23 +34,6 @@ function getStringFromWasm0(ptr, len) {
     return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
 }
 
-const heap = new Array(128).fill(undefined);
-
-heap.push(undefined, null, true, false);
-
-let heap_next = heap.length;
-
-function addHeapObject(obj) {
-    if (heap_next === heap.length) heap.push(heap.length + 1);
-    const idx = heap_next;
-    heap_next = heap[idx];
-
-    heap[idx] = obj;
-    return idx;
-}
-
-function getObject(idx) { return heap[idx]; }
-
 function dropObject(idx) {
     if (idx < 132) return;
     heap[idx] = heap_next;
@@ -46,6 +46,83 @@ function takeObject(idx) {
     return ret;
 }
 
+let WASM_VECTOR_LEN = 0;
+
+const cachedTextEncoder = new TextEncoder('utf-8');
+
+const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+    ? function (arg, view) {
+    return cachedTextEncoder.encodeInto(arg, view);
+}
+    : function (arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+        read: arg.length,
+        written: buf.length
+    };
+});
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length);
+        getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len);
+
+    const mem = getUint8Memory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3);
+        const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
+        const ret = encodeString(arg, view);
+
+        offset += ret.written;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+let cachedInt32Memory0 = null;
+
+function getInt32Memory0() {
+    if (cachedInt32Memory0 === null || cachedInt32Memory0.byteLength === 0) {
+        cachedInt32Memory0 = new Int32Array(wasm.memory.buffer);
+    }
+    return cachedInt32Memory0;
+}
+
+let cachedFloat64Memory0 = null;
+
+function getFloat64Memory0() {
+    if (cachedFloat64Memory0 === null || cachedFloat64Memory0.byteLength === 0) {
+        cachedFloat64Memory0 = new Float64Array(wasm.memory.buffer);
+    }
+    return cachedFloat64Memory0;
+}
+
 function debugString(val) {
     // primitive types
     const type = typeof val;
@@ -111,70 +188,6 @@ function debugString(val) {
     return className;
 }
 
-let WASM_VECTOR_LEN = 0;
-
-const cachedTextEncoder = new TextEncoder('utf-8');
-
-const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
-    ? function (arg, view) {
-    return cachedTextEncoder.encodeInto(arg, view);
-}
-    : function (arg, view) {
-    const buf = cachedTextEncoder.encode(arg);
-    view.set(buf);
-    return {
-        read: arg.length,
-        written: buf.length
-    };
-});
-
-function passStringToWasm0(arg, malloc, realloc) {
-
-    if (realloc === undefined) {
-        const buf = cachedTextEncoder.encode(arg);
-        const ptr = malloc(buf.length);
-        getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
-        WASM_VECTOR_LEN = buf.length;
-        return ptr;
-    }
-
-    let len = arg.length;
-    let ptr = malloc(len);
-
-    const mem = getUint8Memory0();
-
-    let offset = 0;
-
-    for (; offset < len; offset++) {
-        const code = arg.charCodeAt(offset);
-        if (code > 0x7F) break;
-        mem[ptr + offset] = code;
-    }
-
-    if (offset !== len) {
-        if (offset !== 0) {
-            arg = arg.slice(offset);
-        }
-        ptr = realloc(ptr, len, len = offset + arg.length * 3);
-        const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
-        const ret = encodeString(arg, view);
-
-        offset += ret.written;
-    }
-
-    WASM_VECTOR_LEN = offset;
-    return ptr;
-}
-
-let cachedInt32Memory0 = null;
-
-function getInt32Memory0() {
-    if (cachedInt32Memory0 === null || cachedInt32Memory0.byteLength === 0) {
-        cachedInt32Memory0 = new Int32Array(wasm.memory.buffer);
-    }
-    return cachedInt32Memory0;
-}
-
 function makeMutClosure(arg0, arg1, dtor, f) {
     const state = { a: arg0, b: arg1, cnt: 1, dtor };
     const real = (...args) => {
@@ -199,7 +212,7 @@ function makeMutClosure(arg0, arg1, dtor, f) {
 
     return real;
 }
-function __wbg_adapter_16(arg0, arg1, arg2) {
+function __wbg_adapter_36(arg0, arg1, arg2) {
     wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb3b661a8f85c308e(arg0, arg1, addHeapObject(arg2));
 }
 
@@ -210,7 +223,7 @@ function addBorrowedObject(obj) {
     heap[--stack_pointer] = obj;
     return stack_pointer;
 }
-function __wbg_adapter_19(arg0, arg1, arg2) {
+function __wbg_adapter_39(arg0, arg1, arg2) {
     try {
         wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h49044f9d1b909bfb(arg0, arg1, addBorrowedObject(arg2));
     } finally {
@@ -218,10 +231,6 @@ function __wbg_adapter_19(arg0, arg1, arg2) {
     }
 }
 
-function isLikeNone(x) {
-    return x === undefined || x === null;
-}
-
 let cachedUint32Memory0 = null;
 
 function getUint32Memory0() {
@@ -283,13 +292,22 @@ async function load(module, imports) {
 function getImports() {
     const imports = {};
     imports.wbg = {};
+    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
+        const ret = getObject(arg0);
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
         const ret = getStringFromWasm0(arg0, arg1);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
-        const ret = getObject(arg0);
-        return addHeapObject(ret);
+    imports.wbg.__wbindgen_is_object = function(arg0) {
+        const val = getObject(arg0);
+        const ret = typeof(val) === 'object' && val !== null;
+        return ret;
+    };
+    imports.wbg.__wbindgen_is_string = function(arg0) {
+        const ret = typeof(getObject(arg0)) === 'string';
+        return ret;
     };
     imports.wbg.__wbg_listenerid_12315eee21527820 = function(arg0, arg1) {
         const ret = getObject(arg1).__yew_listener_id;
@@ -345,10 +363,52 @@ function getImports() {
         const ret = false;
         return ret;
     };
+    imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
+        const obj = getObject(arg1);
+        const ret = typeof(obj) === 'string' ? obj : undefined;
+        var ptr0 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
     imports.wbg.__wbindgen_is_undefined = function(arg0) {
         const ret = getObject(arg0) === undefined;
         return ret;
     };
+    imports.wbg.__wbindgen_in = function(arg0, arg1) {
+        const ret = getObject(arg0) in getObject(arg1);
+        return ret;
+    };
+    imports.wbg.__wbg_getwithrefkey_15c62c2b8546208d = function(arg0, arg1) {
+        const ret = getObject(arg0)[getObject(arg1)];
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_set_20cbc34131e76824 = function(arg0, arg1, arg2) {
+        getObject(arg0)[takeObject(arg1)] = takeObject(arg2);
+    };
+    imports.wbg.__wbindgen_error_new = function(arg0, arg1) {
+        const ret = new Error(getStringFromWasm0(arg0, arg1));
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_number_get = function(arg0, arg1) {
+        const obj = getObject(arg1);
+        const ret = typeof(obj) === 'number' ? obj : undefined;
+        getFloat64Memory0()[arg0 / 8 + 1] = isLikeNone(ret) ? 0 : ret;
+        getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
+    };
+    imports.wbg.__wbindgen_boolean_get = function(arg0) {
+        const v = getObject(arg0);
+        const ret = typeof(v) === 'boolean' ? (v ? 1 : 0) : 2;
+        return ret;
+    };
+    imports.wbg.__wbindgen_number_new = function(arg0) {
+        const ret = arg0;
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) {
+        const ret = getObject(arg0) == getObject(arg1);
+        return ret;
+    };
     imports.wbg.__wbg_error_71d6845bf00a930f = function(arg0, arg1) {
         var v0 = getArrayJsValueFromWasm0(arg0, arg1).slice();
         wasm.__wbindgen_free(arg0, arg1 * 4);
@@ -368,6 +428,14 @@ function getImports() {
         const ret = getObject(arg0).document;
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
     };
+    imports.wbg.__wbg_location_797a1856892cc2de = function(arg0) {
+        const ret = getObject(arg0).location;
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_history_6ee959556f01f7ea = function() { return handleError(function (arg0) {
+        const ret = getObject(arg0).history;
+        return addHeapObject(ret);
+    }, arguments) };
     imports.wbg.__wbg_body_be46234bb33edd63 = function(arg0) {
         const ret = getObject(arg0).body;
         return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -384,6 +452,45 @@ function getImports() {
         const ret = getObject(arg0).createTextNode(getStringFromWasm0(arg1, arg2));
         return addHeapObject(ret);
     };
+    imports.wbg.__wbg_querySelector_32b9d7ebb2df951d = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = getObject(arg0).querySelector(getStringFromWasm0(arg1, arg2));
+        return isLikeNone(ret) ? 0 : addHeapObject(ret);
+    }, arguments) };
+    imports.wbg.__wbg_state_4fd10484b354a97d = function() { return handleError(function (arg0) {
+        const ret = getObject(arg0).state;
+        return addHeapObject(ret);
+    }, arguments) };
+    imports.wbg.__wbg_pushState_429f091d389407b4 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5) {
+        getObject(arg0).pushState(getObject(arg1), getStringFromWasm0(arg2, arg3), arg4 === 0 ? undefined : getStringFromWasm0(arg4, arg5));
+    }, arguments) };
+    imports.wbg.__wbg_href_bb86bb94d1c6861b = function() { return handleError(function (arg0, arg1) {
+        const ret = getObject(arg1).href;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    }, arguments) };
+    imports.wbg.__wbg_pathname_7b2f7ba43a0fdd6e = function() { return handleError(function (arg0, arg1) {
+        const ret = getObject(arg1).pathname;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    }, arguments) };
+    imports.wbg.__wbg_search_23418f9752ba7ba6 = function() { return handleError(function (arg0, arg1) {
+        const ret = getObject(arg1).search;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    }, arguments) };
+    imports.wbg.__wbg_hash_03f283be75af7a56 = function() { return handleError(function (arg0, arg1) {
+        const ret = getObject(arg1).hash;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    }, arguments) };
     imports.wbg.__wbg_instanceof_ShadowRoot_7088dfa874f5499c = function(arg0) {
         let result;
         try {
@@ -398,6 +505,45 @@ function getImports() {
         const ret = getObject(arg0).host;
         return addHeapObject(ret);
     };
+    imports.wbg.__wbg_href_337141180d3d9dc0 = function(arg0, arg1) {
+        const ret = getObject(arg1).href;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
+    imports.wbg.__wbg_pathname_188be9b0ca3ddf22 = function(arg0, arg1) {
+        const ret = getObject(arg1).pathname;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
+    imports.wbg.__wbg_search_8b081e18a33be3ec = function(arg0, arg1) {
+        const ret = getObject(arg1).search;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
+    imports.wbg.__wbg_hash_5f41a2c79884b4e0 = function(arg0, arg1) {
+        const ret = getObject(arg1).hash;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
+    imports.wbg.__wbg_sethash_d8da8491cb9e7af4 = function(arg0, arg1, arg2) {
+        getObject(arg0).hash = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_new_2f2799a1c9c648e4 = function() { return handleError(function (arg0, arg1) {
+        const ret = new URL(getStringFromWasm0(arg0, arg1));
+        return addHeapObject(ret);
+    }, arguments) };
+    imports.wbg.__wbg_newwithbase_5541ad423d71a320 = function() { return handleError(function (arg0, arg1, arg2, arg3) {
+        const ret = new URL(getStringFromWasm0(arg0, arg1), getStringFromWasm0(arg2, arg3));
+        return addHeapObject(ret);
+    }, arguments) };
     imports.wbg.__wbg_value_00fb0fdc46959169 = function(arg0, arg1) {
         const ret = getObject(arg1).value;
         const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -445,6 +591,13 @@ function getImports() {
     imports.wbg.__wbg_setAttribute_79c9562d32d05e66 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
         getObject(arg0).setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
     }, arguments) };
+    imports.wbg.__wbg_href_e7e4e286ccd6b390 = function(arg0, arg1) {
+        const ret = getObject(arg1).href;
+        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
     imports.wbg.__wbg_setchecked_cbd6f423c4deba69 = function(arg0, arg1) {
         getObject(arg0).checked = arg1 !== 0;
     };
@@ -526,6 +679,16 @@ function getImports() {
         const ret = getObject(arg0).length;
         return ret;
     };
+    imports.wbg.__wbg_instanceof_ArrayBuffer_a69f02ee4c4f5065 = function(arg0) {
+        let result;
+        try {
+            result = getObject(arg0) instanceof ArrayBuffer;
+        } catch {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
     imports.wbg.__wbg_newnoargs_2b8b6bd7753c76ba = function(arg0, arg1) {
         const ret = new Function(getStringFromWasm0(arg0, arg1));
         return addHeapObject(ret);
@@ -534,6 +697,14 @@ function getImports() {
         const ret = getObject(arg0).call(getObject(arg1));
         return addHeapObject(ret);
     }, arguments) };
+    imports.wbg.__wbg_isSafeInteger_8c4789029e885159 = function(arg0) {
+        const ret = Number.isSafeInteger(getObject(arg0));
+        return ret;
+    };
+    imports.wbg.__wbg_entries_4e1315b774245952 = function(arg0) {
+        const ret = Object.entries(getObject(arg0));
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbg_is_8f1618fe9a4fd388 = function(arg0, arg1) {
         const ret = Object.is(getObject(arg0), getObject(arg1));
         return ret;
@@ -566,10 +737,35 @@ function getImports() {
         const ret = global.global;
         return addHeapObject(ret);
     }, arguments) };
+    imports.wbg.__wbg_instanceof_Uint8Array_01cebe79ca606cca = function(arg0) {
+        let result;
+        try {
+            result = getObject(arg0) instanceof Uint8Array;
+        } catch {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_new_537b7341ce90bb31 = function(arg0) {
+        const ret = new Uint8Array(getObject(arg0));
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_length_27a2afe8ab42b09f = function(arg0) {
+        const ret = getObject(arg0).length;
+        return ret;
+    };
+    imports.wbg.__wbg_set_17499e8aa4003ebd = function(arg0, arg1, arg2) {
+        getObject(arg0).set(getObject(arg1), arg2 >>> 0);
+    };
     imports.wbg.__wbg_set_6aa458a4ebdb65cb = function() { return handleError(function (arg0, arg1, arg2) {
         const ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2));
         return ret;
     }, arguments) };
+    imports.wbg.__wbg_buffer_cf65c07de34b9a08 = function(arg0) {
+        const ret = getObject(arg0).buffer;
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
         const ret = debugString(getObject(arg1));
         const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -580,12 +776,16 @@ function getImports() {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm0(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper3649 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 232, __wbg_adapter_16);
+    imports.wbg.__wbindgen_memory = function() {
+        const ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper3768 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 253, __wbg_adapter_19);
+    imports.wbg.__wbindgen_closure_wrapper7108 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 604, __wbg_adapter_36);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_closure_wrapper7412 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 639, __wbg_adapter_39);
         return addHeapObject(ret);
     };
 
@@ -599,6 +799,7 @@ function initMemory(imports, maybe_memory) {
 function finalizeInit(instance, module) {
     wasm = instance.exports;
     init.__wbindgen_wasm_module = module;
+    cachedFloat64Memory0 = null;
     cachedInt32Memory0 = null;
     cachedUint32Memory0 = null;
     cachedUint8Memory0 = null;
@@ -623,7 +824,7 @@ function initSync(module) {
 
 async function init(input) {
     if (typeof input === 'undefined') {
-        input = new URL('remax-template-frontend-c4b1b5101bad59f_bg.wasm', import.meta.url);
+        input = new URL('remax-template-frontend-abf7cea69d31badc_bg.wasm', import.meta.url);
     }
     const imports = getImports();
 
diff --git a/dist/remax-template-frontend-abf7cea69d31badc_bg.wasm b/dist/remax-template-frontend-abf7cea69d31badc_bg.wasm
new file mode 100644
index 0000000..1ae81a3
Binary files /dev/null and b/dist/remax-template-frontend-abf7cea69d31badc_bg.wasm differ
diff --git a/dist/remax-template-frontend-c4b1b5101bad59f_bg.wasm b/dist/remax-template-frontend-c4b1b5101bad59f_bg.wasm
deleted file mode 100644
index 2535c0c..0000000
Binary files a/dist/remax-template-frontend-c4b1b5101bad59f_bg.wasm and /dev/null differ
diff --git a/index.html b/index.html
index ed6bdc3..7b596c2 100644
--- a/index.html
+++ b/index.html
@@ -3,5 +3,8 @@
     <head>
         <meta charset="utf-8" />
         <title>Yew App</title>
+        <link data-trunk  type="text/css" href="css/navbar.css" rel="css" />
+        <link data-trunk  type="text/css" href="css/landing.css" rel="css" />
+        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
     </head>
 </html>
\ No newline at end of file
diff --git a/src/components/mod.rs b/src/components/mod.rs
index e69de29..55e2ab3 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -0,0 +1 @@
+pub mod nav_bar;
\ No newline at end of file
diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs
new file mode 100644
index 0000000..271aa93
--- /dev/null
+++ b/src/components/nav_bar.rs
@@ -0,0 +1,38 @@
+use yew::prelude::*;
+use yew_router::prelude::use_navigator;
+
+use crate::{routes::main_router::{Route}, constants::{NAVBAR_TITLE, NAVBAR_COL_LANDING, NAVBAR_COL_PROYECTOS_ACABADOS, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}, pages::search::PropertyState};
+//use yew_router::prelude::use_navigator;
+
+
+#[function_component(NavigationBar)]
+pub fn navigation_bar() -> Html {
+    let navigator = use_navigator().unwrap();
+    let cloned_navigator_1 = navigator.clone();
+    let cloned_navigator_2 = navigator.clone();
+    let cloned_navigator_3 = navigator.clone();
+    let cloned_navigator_4 = navigator.clone();
+
+    html! {
+        <div class={"navbar-container"}>
+            <div class={"navbar-title"}>{NAVBAR_TITLE}</div>
+            <div class={"navbar"}>
+                <div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={"navbar-item"}>
+                    {NAVBAR_COL_LANDING}
+                </div>
+
+                <div onclick={move |_| cloned_navigator_2.push(&Route::Search { property_state: PropertyState::Finished })} class={"navbar-item"}>
+                    {NAVBAR_COL_PROYECTOS_ACABADOS}
+                </div>
+                
+                <div onclick={move |_| cloned_navigator_3.push(&Route::Search { property_state: PropertyState::InConstruction })} class={"navbar-item"}>
+                    {NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}
+                </div>
+
+                <div onclick={move |_| cloned_navigator_4.push(&Route::Contact)} class={"navbar-item"}>
+                    {NAVBAR_COL_CONTACTO}
+                </div>
+            </div>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/constants/mod.rs b/src/constants/mod.rs
new file mode 100644
index 0000000..4f2f129
--- /dev/null
+++ b/src/constants/mod.rs
@@ -0,0 +1,5 @@
+pub const NAVBAR_TITLE: &str = "Jorge Ledesma Properties";
+pub const NAVBAR_COL_LANDING: &str = "Inicio";
+pub const NAVBAR_COL_PROYECTOS_ACABADOS: &str = "Listos para entrega";
+pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción";
+pub const NAVBAR_COL_CONTACTO: &str = "Contacto";
diff --git a/src/main.rs b/src/main.rs
index 6600b04..093fdfa 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -2,29 +2,21 @@ pub mod api;
 pub mod components;
 pub mod routes;
 pub mod pages;
+pub mod constants;
 
 use yew::prelude::*;
+use yew_router::{BrowserRouter, Switch};
+
+use crate::routes::main_router::{Route, switch};
 
 #[function_component]
 fn App() -> Html {
-    let counter = use_state(|| 0);
-    let onclick = {
-        let counter = counter.clone();
-        move |_| {
-            let value = *counter + 1;
-            counter.set(value);
-        }
-    };
-    
-
     html! {
-        <div>
-            <button {onclick}>{ "+1" }</button>
-            <p>{ *counter }</p>
-        </div>
+        <BrowserRouter>
+            <Switch<Route> render={switch} /> // <- must be child of <BrowserRouter>
+        </BrowserRouter>
     }
 }
-
 fn main() {
     yew::Renderer::<App>::new().render();
 }
\ No newline at end of file
diff --git a/src/pages/contact.rs b/src/pages/contact.rs
new file mode 100644
index 0000000..4e687ca
--- /dev/null
+++ b/src/pages/contact.rs
@@ -0,0 +1,16 @@
+use yew::prelude::*;
+
+use crate::components::nav_bar::NavigationBar;
+
+
+#[function_component(ContactPage)]
+pub fn contact_page() -> Html {
+    html!{
+        <>
+            <NavigationBar/>
+            <div>
+                {"Contact Page"}
+            </div>
+        </>
+    }
+}
\ No newline at end of file
diff --git a/src/pages/details.rs b/src/pages/details.rs
new file mode 100644
index 0000000..dfd83c7
--- /dev/null
+++ b/src/pages/details.rs
@@ -0,0 +1,8 @@
+use yew::prelude::*;
+
+#[function_component(DetailsPage)]
+pub fn details_page() -> Html {
+    html!{
+        <div>{"Details Page"}</div>
+    }
+}
\ No newline at end of file
diff --git a/src/pages/landing.rs b/src/pages/landing.rs
new file mode 100644
index 0000000..5e8154e
--- /dev/null
+++ b/src/pages/landing.rs
@@ -0,0 +1,16 @@
+use yew::prelude::*;
+
+use crate::components::nav_bar::NavigationBar;
+
+
+#[function_component(LandingPage)]
+pub fn landing_page() -> Html {
+    html!{
+        <>
+        <NavigationBar/>
+        <div>
+            {"Landing Page"}
+        </div>
+        </>
+    }
+}
\ No newline at end of file
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index e69de29..de4016d 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -0,0 +1,5 @@
+pub mod landing;
+pub mod search;
+pub mod details;
+pub mod not_found;
+pub mod contact;
\ No newline at end of file
diff --git a/src/pages/not_found.rs b/src/pages/not_found.rs
new file mode 100644
index 0000000..b5bdcb6
--- /dev/null
+++ b/src/pages/not_found.rs
@@ -0,0 +1,15 @@
+use yew::prelude::*;
+
+use crate::components::nav_bar::NavigationBar;
+
+#[function_component(NotFoundPage)]
+pub fn not_found_page() -> Html {
+    html! {
+        <>
+            <NavigationBar/>
+            <div>
+                {"Not found page"}
+            </div>
+        </>
+    }
+}
\ No newline at end of file
diff --git a/src/pages/search.rs b/src/pages/search.rs
new file mode 100644
index 0000000..476faac
--- /dev/null
+++ b/src/pages/search.rs
@@ -0,0 +1,45 @@
+use std::{fmt::Display, str::FromStr};
+
+use yew::prelude::*;
+
+use crate::components::nav_bar::NavigationBar;
+
+#[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)]
+pub enum PropertyState {
+    Finished,
+    #[default]
+    InConstruction,
+}
+
+impl Display for PropertyState {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            PropertyState::Finished => write!(f, "Finished"),
+            PropertyState::InConstruction => write!(f, "InConstruction"),
+        }
+    }
+}
+
+impl FromStr for PropertyState {
+    type Err = ();
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        match s {
+            "Finished" => Ok(Self::Finished),
+            "InConstruction" => Ok(Self::InConstruction),
+            _ => Err(())
+        }
+    }
+}
+
+#[function_component(SearchPage)]
+pub fn search_page() -> Html {
+    html!{
+        <>
+            <NavigationBar/>
+            <div>
+                {"Search page"}
+            </div>
+        </>
+    }
+}
\ No newline at end of file
diff --git a/src/routes/main_router.rs b/src/routes/main_router.rs
new file mode 100644
index 0000000..b8a7ccf
--- /dev/null
+++ b/src/routes/main_router.rs
@@ -0,0 +1,32 @@
+use yew_router::prelude::*;
+use yew::prelude::*;
+
+use uuid::Uuid;
+
+use crate::{pages::{landing::LandingPage, search::{SearchPage, PropertyState}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage}};
+
+#[derive(Clone, Routable, PartialEq)]
+pub enum Route {
+    #[at("/")]
+    LandingPage,
+    #[at("/search/:property_state")]
+    Search { property_state: PropertyState },
+    #[at("/details/:property_id")]
+    Details { property_id: Uuid },
+    #[at("/contact")]
+    Contact,
+
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
+
+pub fn switch(routes: Route) -> Html {
+    match routes {
+        Route::LandingPage => html! { <LandingPage/> },
+        Route::Search { property_state: _ } => html! { <SearchPage/> },
+        Route::Details { property_id: _ } => html! { <DetailsPage/> },
+        Route::NotFound => html! { <NotFoundPage/> },
+        Route::Contact => html! { <ContactPage/> }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/mod.rs b/src/routes/mod.rs
index e69de29..17723fe 100644
--- a/src/routes/mod.rs
+++ b/src/routes/mod.rs
@@ -0,0 +1 @@
+pub mod main_router;
\ No newline at end of file
