diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 86c25a82..775b0402 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -1,182 +1,324 @@
-$(document).ready(function() {
-    var show_allocate_form = $("#allocateModal").data('show-action-form');
-    var show_datawipe_form = $("#datawipeModal").data('show-action-form');
-    var show_trade_form = $("#tradeLotModal").data('show-action-form');
-    if (show_allocate_form != "None") {
-        $("#allocateModal .btn-primary").show();
-        newAllocate(show_allocate_form);
-    } else if (show_datawipe_form != "None") {
-        $("#datawipeModal .btn-primary").show();
-        newDataWipe(show_datawipe_form);
-    } else if (show_trade_form != "None") {
-        $("#tradeLotModal .btn-primary").show();
-        newTrade(show_trade_form);
-    } else {
-        $(".deviceSelect").on("change", deviceSelect);
-    }
-    // $('#selectLot').selectpicker();
-})
-
-function deviceSelect() {
-    var devices_count = $(".deviceSelect").filter(':checked').length;
-    get_device_list();
-    if (devices_count == 0) {
-        $("#addingLotModal .pol").show();
-        $("#addingLotModal .btn-primary").hide();
-
-        $("#removeLotModal .pol").show();
-        $("#removeLotModal .btn-primary").hide();
-
-        $("#addingTagModal .pol").show();
-        $("#addingTagModal .btn-primary").hide();
-
-        $("#actionModal .pol").show();
-        $("#actionModal .btn-primary").hide();
-
-        $("#allocateModal .pol").show();
-        $("#allocateModal .btn-primary").hide();
-
-        $("#datawipeModal .pol").show();
-        $("#datawipeModal .btn-primary").hide();
-    } else {
-        $("#addingLotModal .pol").hide();
-        $("#addingLotModal .btn-primary").show();
-
-        $("#removeLotModal .pol").hide();
-        $("#removeLotModal .btn-primary").show();
-
-        $("#actionModal .pol").hide();
-        $("#actionModal .btn-primary").show();
-
-        $("#allocateModal .pol").hide();
-        $("#allocateModal .btn-primary").show();
-
-        $("#datawipeModal .pol").hide();
-        $("#datawipeModal .btn-primary").show();
-
-        $("#addingTagModal .pol").hide();
-        $("#addingTagModal .btn-primary").show();
-    }
-}
-
-function removeLot() {
-    var devices = $(".deviceSelect");
-    if (devices.length > 0) {
-        $("#btnRemoveLots .text-danger").show();
-    } else {
-        $("#btnRemoveLots .text-danger").hide();
-    }
-    $("#activeRemoveLotModal").click();
-}
-
-function removeTag() {
-    var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
-    if (devices_id.length == 1) {
-        var url = "/inventory/tag/devices/"+devices_id[0]+"/del/";
-        window.location.href = url;
-    } else {
-        $("#unlinkTagAlertModal").click();
-    }
-}
-
-function addTag() {
-    var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
-    if (devices_id.length == 1) {
-        $("#addingTagModal .pol").hide();
-        $("#addingTagModal .btn-primary").show();
-    } else {
-        $("#addingTagModal .pol").show();
-        $("#addingTagModal .btn-primary").hide();
-    }
-
-    $("#addTagAlertModal").click();
-}
-
-function newTrade(action) {
-    var title = "Trade "
-    var user_to = $("#user_to").data("email");
-    var user_from = $("#user_from").data("email");
-    if (action == 'user_from') {
-        title = 'Trade Incoming';
-        $("#user_to").attr('readonly', 'readonly');
-        $("#user_from").prop('readonly', false);
-        $("#user_from").val('');
-        $("#user_to").val(user_to);
-    } else if (action == 'user_to') {
-        title = 'Trade Outgoing';
-        $("#user_from").attr('readonly', 'readonly');
-        $("#user_to").prop('readonly', false);
-        $("#user_to").val('');
-        $("#user_from").val(user_from);
-    }
-    $("#tradeLotModal #title-action").html(title);
-    $("#activeTradeModal").click();
-}
-
-function newAction(action) {
-    $("#actionModal #type").val(action);
-    $("#actionModal #title-action").html(action);
-    deviceSelect();
-    $("#activeActionModal").click();
-}
-
-function newAllocate(action) {
-    $("#allocateModal #type").val(action);
-    $("#allocateModal #title-action").html(action);
-    deviceSelect();
-    $("#activeAllocateModal").click();
-}
-
-function newDataWipe(action) {
-    $("#datawipeModal #type").val(action);
-    $("#datawipeModal #title-action").html(action);
-    deviceSelect();
-    $("#activeDatawipeModal").click();
-}
-
-function get_device_list() {
-    var devices = $(".deviceSelect").filter(':checked');
-
-    /* Insert the correct count of devices in actions form */
-    var devices_count = devices.length;
-    $("#datawipeModal .devices-count").html(devices_count);
-    $("#allocateModal .devices-count").html(devices_count);
-    $("#actionModal .devices-count").html(devices_count);
-
-    /* Insert the correct value in the input devicesList */
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')}).join(",");
-    $.map($(".devicesList"), function(x) {
-        $(x).val(devices_id);
-    });
-
-    /* Create a list of devices for human representation */
-    var computer = {
-        "Desktop": "<i class='bi bi-building'></i>",
-        "Laptop": "<i class='bi bi-laptop'></i>",
-    };
-    list_devices = devices.map(function (x) {
-        var typ = $(devices[x]).data("device-type");
-        var manuf = $(devices[x]).data("device-manufacturer");
-        var dhid = $(devices[x]).data("device-dhid");
-        if (computer[typ]) {
-            typ = computer[typ];
-        };
-        return typ + " " + manuf + " " + dhid;
-    });
-
-    description = $.map(list_devices, function(x) { return x }).join(", ");
-    $(".enumeration-devices").html(description);
-}
-
-function export_file(type_file) {
-    var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data-device-dhid')}).join(",");
-    if (devices_id){
-        var url = "/inventory/export/"+type_file+"/?ids="+devices_id;
-        window.location.href = url;
-    } else {
-        $("#exportAlertModal").click();
-    }
-}
+$(document).ready(function () {
+    var show_allocate_form = $("#allocateModal").data('show-action-form');
+    var show_datawipe_form = $("#datawipeModal").data('show-action-form');
+    var show_trade_form = $("#tradeLotModal").data('show-action-form');
+    if (show_allocate_form != "None") {
+        $("#allocateModal .btn-primary").show();
+        newAllocate(show_allocate_form);
+    } else if (show_datawipe_form != "None") {
+        $("#datawipeModal .btn-primary").show();
+        newDataWipe(show_datawipe_form);
+    } else if (show_trade_form != "None") {
+        $("#tradeLotModal .btn-primary").show();
+        newTrade(show_trade_form);
+    } else {
+        $(".deviceSelect").on("change", deviceSelect);
+    }
+    // $('#selectLot').selectpicker();
+})
+
+function deviceSelect() {
+    var devices_count = $(".deviceSelect").filter(':checked').length;
+    get_device_list();
+    if (devices_count == 0) {
+        $("#addingLotModal .pol").show();
+        $("#addingLotModal .btn-primary").hide();
+
+        $("#removeLotModal .pol").show();
+        $("#removeLotModal .btn-primary").hide();
+
+        $("#addingTagModal .pol").show();
+        $("#addingTagModal .btn-primary").hide();
+
+        $("#actionModal .pol").show();
+        $("#actionModal .btn-primary").hide();
+
+        $("#allocateModal .pol").show();
+        $("#allocateModal .btn-primary").hide();
+
+        $("#datawipeModal .pol").show();
+        $("#datawipeModal .btn-primary").hide();
+    } else {
+        $("#addingLotModal .pol").hide();
+        $("#addingLotModal .btn-primary").show();
+
+        $("#removeLotModal .pol").hide();
+        $("#removeLotModal .btn-primary").show();
+
+        $("#actionModal .pol").hide();
+        $("#actionModal .btn-primary").show();
+
+        $("#allocateModal .pol").hide();
+        $("#allocateModal .btn-primary").show();
+
+        $("#datawipeModal .pol").hide();
+        $("#datawipeModal .btn-primary").show();
+
+        $("#addingTagModal .pol").hide();
+        $("#addingTagModal .btn-primary").show();
+    }
+}
+
+function removeLot() {
+    var devices = $(".deviceSelect");
+    if (devices.length > 0) {
+        $("#btnRemoveLots .text-danger").show();
+    } else {
+        $("#btnRemoveLots .text-danger").hide();
+    }
+    $("#activeRemoveLotModal").click();
+}
+
+function removeTag() {
+    var devices = $(".deviceSelect").filter(':checked');
+    var devices_id = $.map(devices, function (x) { return $(x).attr('data') });
+    if (devices_id.length == 1) {
+        var url = "/inventory/tag/devices/" + devices_id[0] + "/del/";
+        window.location.href = url;
+    } else {
+        $("#unlinkTagAlertModal").click();
+    }
+}
+
+function addTag() {
+    var devices = $(".deviceSelect").filter(':checked');
+    var devices_id = $.map(devices, function (x) { return $(x).attr('data') });
+    if (devices_id.length == 1) {
+        $("#addingTagModal .pol").hide();
+        $("#addingTagModal .btn-primary").show();
+    } else {
+        $("#addingTagModal .pol").show();
+        $("#addingTagModal .btn-primary").hide();
+    }
+
+    $("#addTagAlertModal").click();
+}
+
+function newTrade(action) {
+    var title = "Trade "
+    var user_to = $("#user_to").data("email");
+    var user_from = $("#user_from").data("email");
+    if (action == 'user_from') {
+        title = 'Trade Incoming';
+        $("#user_to").attr('readonly', 'readonly');
+        $("#user_from").prop('readonly', false);
+        $("#user_from").val('');
+        $("#user_to").val(user_to);
+    } else if (action == 'user_to') {
+        title = 'Trade Outgoing';
+        $("#user_from").attr('readonly', 'readonly');
+        $("#user_to").prop('readonly', false);
+        $("#user_to").val('');
+        $("#user_from").val(user_from);
+    }
+    $("#tradeLotModal #title-action").html(title);
+    $("#activeTradeModal").click();
+}
+
+function newAction(action) {
+    $("#actionModal #type").val(action);
+    $("#actionModal #title-action").html(action);
+    deviceSelect();
+    $("#activeActionModal").click();
+}
+
+function newAllocate(action) {
+    $("#allocateModal #type").val(action);
+    $("#allocateModal #title-action").html(action);
+    deviceSelect();
+    $("#activeAllocateModal").click();
+}
+
+function newDataWipe(action) {
+    $("#datawipeModal #type").val(action);
+    $("#datawipeModal #title-action").html(action);
+    deviceSelect();
+    $("#activeDatawipeModal").click();
+}
+
+function get_device_list() {
+    var devices = $(".deviceSelect").filter(':checked');
+
+    /* Insert the correct count of devices in actions form */
+    var devices_count = devices.length;
+    $("#datawipeModal .devices-count").html(devices_count);
+    $("#allocateModal .devices-count").html(devices_count);
+    $("#actionModal .devices-count").html(devices_count);
+
+    /* Insert the correct value in the input devicesList */
+    var devices_id = $.map(devices, function (x) { return $(x).attr('data') }).join(",");
+    $.map($(".devicesList"), function (x) {
+        $(x).val(devices_id);
+    });
+
+    /* Create a list of devices for human representation */
+    var computer = {
+        "Desktop": "<i class='bi bi-building'></i>",
+        "Laptop": "<i class='bi bi-laptop'></i>",
+    };
+    list_devices = devices.map(function (x) {
+        var typ = $(devices[x]).data("device-type");
+        var manuf = $(devices[x]).data("device-manufacturer");
+        var dhid = $(devices[x]).data("device-dhid");
+        if (computer[typ]) {
+            typ = computer[typ];
+        };
+        return typ + " " + manuf + " " + dhid;
+    });
+
+    description = $.map(list_devices, function (x) { return x }).join(", ");
+    $(".enumeration-devices").html(description);
+}
+
+function export_file(type_file) {
+    var devices = $(".deviceSelect").filter(':checked');
+    var devices_id = $.map(devices, function (x) { return $(x).attr('data-device-dhid') }).join(",");
+    if (devices_id) {
+        var url = "/inventory/export/" + type_file + "/?ids=" + devices_id;
+        window.location.href = url;
+    } else {
+        $("#exportAlertModal").click();
+    }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    var searchForm = document.getElementById("SearchForm")
+    var inputSearch = document.querySelector("#SearchForm > input")
+    var doSearch = true
+
+    const Api = {
+        /**
+         * get lots id
+         * @returns get lots
+         */
+        async get_lots() {
+            var request = await this.doRequest(API_URLS.lots, "GET", null)
+            if (request != undefined) return request.items
+            throw request
+        },
+
+        /**
+         * Get filtered devices info
+         * @param {number[]} ids devices ids
+         * @returns full detailed device list
+         */
+        async get_devices(id) {
+            var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null)
+            if (request != undefined) return request.items
+            throw request
+        },
+
+        /**
+         * 
+         * @param {string} url URL to be requested
+         * @param {String} type Action type
+         * @param {String | Object} body body content
+         * @returns {Object[]}
+         */
+        async doRequest(url, type, body) {
+            var result;
+            try {
+                result = await $.ajax({
+                    url: url,
+                    type: type,
+                    headers: {
+                        "Authorization": API_URLS.Auth_Token
+                    },
+                    body: body
+                });
+                return result
+            } catch (error) {
+                console.error(error)
+                throw error
+            }
+        }
+    }
+
+
+
+    searchForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+    })
+
+    var timeoutHandler = setTimeout(() => { }, 1000)
+    var dropdownList = document.getElementById("dropdown-search-list")
+
+
+    inputSearch.addEventListener("input", (e) => {
+        console.log("Timeout restart")
+        clearTimeout(timeoutHandler)
+        timeoutHandler = setTimeout(async () => {
+            console.log("timeout start")
+            dropdownList.innerHTML = `
+                <li id="deviceSearchLoader" class="dropdown-item">
+                    <i class="bi bi-laptop"></i>
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </li>
+                <li id="lotSearchLoader" class="dropdown-item">
+                    <i class="bi bi-folder2"></i>
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </li>
+                `
+            var searchText = e.target.value
+
+            try {
+                Api.get_devices(searchText.toUpperCase()).then(devices => {
+                    dropdownList.querySelector("#deviceSearchLoader").style = "display: none"
+
+                    for (let i = 0; i < devices.length; i++) {
+                        const device = devices[i];
+
+                        // See: ereuse_devicehub/resources/device/models.py
+                        var verboseName = `${device.type} ${device.manufacturer} ${device.model}`
+
+                        const templateString = `
+                        <li>
+                            <a class="dropdown-item" href="${API_URLS.devices_detail.replace("ReplaceTEXT", device.devicehubID)}" style="display: flex; align-items: center;" href="#">
+                                <i class="bi bi-laptop"></i>
+                                <span style="margin-right: 10px">${verboseName}</span>
+                                <span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span>
+                            </a>
+                        </li>`
+                        dropdownList.innerHTML += templateString
+                        if (i == 4) { // Limit to 4 resullts
+                            break;
+                        }
+                    }
+                })
+            } catch (error) {
+                console.log(error)
+            }
+
+            try {
+                Api.get_lots().then(lots => {
+                    dropdownList.querySelector("#lotSearchLoader").style = "display: none"
+                    for (let i = 0; i < lots.length; i++) {
+                        const lot = lots[i];
+                        if (lot.name.toUpperCase().includes(searchText.toUpperCase())) {
+                            const templateString = `
+                            <li>
+                                <a class="dropdown-item" href="${API_URLS.lots_detail.replace("ReplaceTEXT", lot.id)}" style="display: flex; align-items: center;" href="#">
+                                    <i class="bi bi-folder2"></i>
+                                    <span style="margin-right: 10px">${lot.name}</span>
+                                </a>
+                            </li>`
+                            dropdownList.innerHTML += templateString
+                            if (i == 4) {
+                                break;
+                            }
+                        }
+                    }
+                })
+
+            } catch (error) {
+                console.log(error)
+            }
+        }, 1000)
+    })
+
+
+})
\ No newline at end of file
diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
index 1ffddfa0..e809dcc9 100644
--- a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
+++ b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
@@ -1,227 +1,250 @@
-{% extends "ereuse_devicehub/base.html" %}
-{% block page_title %}{{ page_title }}{% endblock %}
-{% block body %}
-<!-- ======= Header ======= -->
-<header id="header" class="header fixed-top d-flex align-items-center">
-
-  <div class="d-flex align-items-center justify-content-between">
-    <a href="{{ url_for('inventory.devicelist')}}" class="logo d-flex align-items-center">
-      <img src="{{ url_for('static', filename='img/usody-logo-black.svg') }}" alt="">
-    </a>
-    <i class="bi bi-list toggle-sidebar-btn"></i>
-  </div><!-- End Logo -->
-
-  <div class="search-bar">
-    <form class="search-form d-flex align-items-center" method="POST" action="#">
-      <input type="text" name="query" placeholder="Search" title="Enter search keyword">
-      <button type="submit" title="Search"><i class="bi bi-search"></i></button>
-    </form>
-  </div><!-- End Search Bar -->
-
-  <nav class="header-nav ms-auto">
-    <ul class="d-flex align-items-center">
-
-      <li class="nav-item d-block d-lg-none">
-        <a class="nav-link nav-icon search-bar-toggle " href="#">
-          <i class="bi bi-search"></i>
-        </a>
-      </li><!-- End Search Icon-->
-
-      <li class="nav-item dropdown pe-3">
-
-        <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
-          <i class="bi bi-person-circle" style="font-size: 36px;"></i>
-          <span class="d-none d-md-block dropdown-toggle ps-2">{{ current_user.email }}</span>
-        </a><!-- End Profile Iamge Icon -->
-
-        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
-          <li class="dropdown-header">
-            <h6>{{ current_user.get_full_name }}</h6>
-          </li>
-          <li>
-            <hr class="dropdown-divider">
-          </li>
-
-          <li>
-            <a class="dropdown-item d-flex align-items-center" href="{{ url_for('core.user-profile') }}">
-              <i class="bi bi-person"></i>
-              <span>My Profile</span>
-            </a>
-          </li>
-          <li>
-            <hr class="dropdown-divider">
-          </li>
-
-          <li>
-            <a class="dropdown-item d-flex align-items-center" href="https://help.usody.com/" target="_blank">
-              <i class="bi bi-question-circle"></i>
-              <span>Need Help?</span>
-            </a>
-          </li>
-          <li>
-            <hr class="dropdown-divider">
-          </li>
-
-          <li>
-            <a class="dropdown-item d-flex align-items-center" href="{{ url_for('core.logout') }}">
-              <i class="bi bi-box-arrow-right"></i>
-              <span>Sign Out</span>
-            </a>
-          </li>
-
-        </ul><!-- End Profile Dropdown Items -->
-      </li><!-- End Profile Nav -->
-
-    </ul>
-  </nav><!-- End Icons Navigation -->
-
-</header><!-- End Header -->
-
-<!-- ======= Sidebar ======= -->
-<aside id="sidebar" class="sidebar">
-
-  <ul class="sidebar-nav" id="sidebar-nav">
-    <!-- We need defined before the Dashboard
-    <li class="nav-item">
-      <a class="nav-link collapsed" href="index.html">
-        <i class="bi bi-grid"></i>
-        <span>Dashboard</span>
-      </a>
-    </li><!-- End Dashboard Nav -->
-
-    <li class="nav-item">
-      <a class="nav-link collapsed" href="{{ url_for('inventory.devicelist') }}">
-        <i class="bi-menu-button-wide"></i>
-        <span>Unassigned devices</span>
-      </a>
-    </li>
-
-    <li class="nav-heading">Lots</li>
-
-    <li class="nav-item">
-      {% if lot and lot.is_incoming %}
-      <a class="nav-link" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
-      <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
-        <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
-      {% if lot and lot.is_incoming %}
-      <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
-      <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
-      {% endif %}
-        {% for lot in lots %}
-        {% if lot.is_incoming %}
-        <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
-        </li>
-        {% endif %}
-        {% endfor %}
-      </ul>
-    </li><!-- End Incoming Lots Nav -->
-
-    <li class="nav-item">
-      {% if lot and lot.is_outgoing %}
-      <a class="nav-link" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
-      <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
-        <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
-      {% if lot and lot.is_outgoing %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-      {% endif %}
-        {% for lot in lots %}
-        {% if lot.is_outgoing %}
-        <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
-        </li>
-        {% endif %}
-        {% endfor %}
-      </ul>
-    </li><!-- End Outgoing Lots Nav -->
-
-    <li class="nav-item">
-      {% if lot and lot.is_temporary %}
-      <a class="nav-link" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
-      <a class="nav-link collapsed"  data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
-        <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
-      {% if lot and lot.is_temporary %}
-      <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
-      <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-      {% endif %}
-        <li>
-          <a href="{{ url_for('inventory.lot_add')}}">
-            <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
-          </a>
-        </li>
-        {% for lot in lots %}
-        {% if lot.is_temporary %}
-        <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
-        </li>
-        {% endif %}
-        {% endfor %}
-      </ul>
-    </li><!-- End Temporal Lots Nav -->
-
-    <li class="nav-heading">Utils</li>
-
-    <li class="nav-item">
-      <a class="nav-link collapsed" href="{{ url_for('labels.label_list')}}">
-        <i class="bi bi-tags"></i>
-        <span>Tags</span>
-      </a>
-    </li><!-- End Tags Page Nav -->
-
-  </ul>
-
-</aside><!-- End Sidebar-->
-
-<main id="main" class="main">
-  {% block messages %}
-    {% for level, message in get_flashed_messages(with_categories=true) %}
-      <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
-        {% if '_message_icon' in session %}
-          <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
-        {% else %}<!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
-          <i class="bi bi-info-circle me-1"></i>
-        {% endif %}
-        {{ message }}
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-      </div>
-    {% endfor %}
-  {% endblock %}
-  {% block main %}
-
-  {% endblock main %}
-</main><!-- End #main -->
-
-<!-- ======= Footer ======= -->
-<footer id="footer" class="footer">
-  <div class="copyright">
-    &copy; Copyright <strong><span>USOdy</span></strong>. All Rights Reserved
-  </div>
-  <div class="credits">
-    <!-- All the links in the footer should remain intact. -->
-    <!-- You can delete the links only if you purchased the pro version. -->
-    <!-- Licensing information: https://bootstrapmade.com/license/ -->
-    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
-    Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> // DeviceHub {{ version }}
-  </div>
-</footer><!-- End Footer -->
-
-{% endblock body %}
+{% extends "ereuse_devicehub/base.html" %}
+{% block page_title %}{{ page_title }}{% endblock %}
+{% block body %}
+<!-- ======= Header ======= -->
+<header id="header" class="header fixed-top d-flex align-items-center">
+
+  <div class="d-flex align-items-center justify-content-between">
+    <a href="{{ url_for('inventory.devicelist')}}" class="logo d-flex align-items-center">
+      <img src="{{ url_for('static', filename='img/usody-logo-black.svg') }}" alt="">
+    </a>
+    <i class="bi bi-list toggle-sidebar-btn"></i>
+  </div><!-- End Logo -->
+
+  <div class="search-bar">
+    <form class="search-form d-flex align-items-center" method="POST" id="SearchForm" action="#">
+      <input class="dropdown-toggle" type="text" name="query" placeholder="Search" title="Enter search keyword" autocomplete="off" id="dropdownSearch" data-bs-toggle="dropdown" aria-expanded="false">
+      <button type="submit" title="Search"><i class="bi bi-search"></i></button>
+
+      <ul class="dropdown-menu" autoClose="outside" aria-labelledby="dropdownSearch" id="dropdown-search-list" style="min-width: 100px;">
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-laptop"></i><span style="margin-right: 10px">This is a extra large device name to test long titles</span> <span class="badge bg-secondary" style="margin-left: auto;">{DHID ID}</span></a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-laptop"></i> <span>Device Name 2</span> <span class="badge bg-secondary" style="margin-left: auto;">{DHID ID}</span></a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-laptop"></i> <span>Device Name 3</span> <span class="badge bg-secondary" style="margin-left: auto;">{DHID ID}</span></a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-laptop"></i> <span>Device Name 4</span> <span class="badge bg-secondary" style="margin-left: auto;">{DHID ID}</span></a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-folder2"></i> lot 1</a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-folder2"></i> lot 2</a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-folder2"></i> lot 3</a></li>
+        <li><a class="dropdown-item" style="display: flex; align-items: center;" href="#"><i class="bi bi-folder2"></i> lot 4</a></li>
+      </ul>
+    </form>
+  </div><!-- End Search Bar -->
+
+  <nav class="header-nav ms-auto">
+    <ul class="d-flex align-items-center">
+
+      <li class="nav-item d-block d-lg-none">
+        <a class="nav-link nav-icon search-bar-toggle " href="#">
+          <i class="bi bi-search"></i>
+        </a>
+      </li><!-- End Search Icon-->
+
+      <li class="nav-item dropdown pe-3">
+
+        <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
+          <i class="bi bi-person-circle" style="font-size: 36px;"></i>
+          <span class="d-none d-md-block dropdown-toggle ps-2">{{ current_user.email }}</span>
+        </a><!-- End Profile Iamge Icon -->
+
+        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
+          <li class="dropdown-header">
+            <h6>{{ current_user.get_full_name }}</h6>
+          </li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+
+          <li>
+            <a class="dropdown-item d-flex align-items-center" href="{{ url_for('core.user-profile') }}">
+              <i class="bi bi-person"></i>
+              <span>My Profile</span>
+            </a>
+          </li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+
+          <li>
+            <a class="dropdown-item d-flex align-items-center" href="https://help.usody.com/" target="_blank">
+              <i class="bi bi-question-circle"></i>
+              <span>Need Help?</span>
+            </a>
+          </li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+
+          <li>
+            <a class="dropdown-item d-flex align-items-center" href="{{ url_for('core.logout') }}">
+              <i class="bi bi-box-arrow-right"></i>
+              <span>Sign Out</span>
+            </a>
+          </li>
+
+        </ul><!-- End Profile Dropdown Items -->
+      </li><!-- End Profile Nav -->
+
+    </ul>
+  </nav><!-- End Icons Navigation -->
+
+</header><!-- End Header -->
+
+<!-- ======= Sidebar ======= -->
+<aside id="sidebar" class="sidebar">
+
+  <ul class="sidebar-nav" id="sidebar-nav">
+    <!-- We need defined before the Dashboard
+    <li class="nav-item">
+      <a class="nav-link collapsed" href="index.html">
+        <i class="bi bi-grid"></i>
+        <span>Dashboard</span>
+      </a>
+    </li><!-- End Dashboard Nav -->
+
+    <li class="nav-item">
+      <a class="nav-link collapsed" href="{{ url_for('inventory.devicelist') }}">
+        <i class="bi-menu-button-wide"></i>
+        <span>Unassigned devices</span>
+      </a>
+    </li>
+
+    <li class="nav-heading">Lots</li>
+
+    <li class="nav-item">
+      {% if lot and lot.is_incoming %}
+      <a class="nav-link" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
+      {% else %}
+      <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
+      {% endif %}
+        <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+      </a>
+      {% if lot and lot.is_incoming %}
+      <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+      {% else %}
+      <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
+      {% endif %}
+        {% for lot in lots %}
+        {% if lot.is_incoming %}
+        <li>
+          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+          </a>
+        </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </li><!-- End Incoming Lots Nav -->
+
+    <li class="nav-item">
+      {% if lot and lot.is_outgoing %}
+      <a class="nav-link" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
+      {% else %}
+      <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
+      {% endif %}
+        <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+      </a>
+      {% if lot and lot.is_outgoing %}
+      <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+      {% else %}
+      <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+      {% endif %}
+        {% for lot in lots %}
+        {% if lot.is_outgoing %}
+        <li>
+          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+          </a>
+        </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </li><!-- End Outgoing Lots Nav -->
+
+    <li class="nav-item">
+      {% if lot and lot.is_temporary %}
+      <a class="nav-link" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
+      {% else %}
+      <a class="nav-link collapsed"  data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
+      {% endif %}
+        <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+      </a>
+      {% if lot and lot.is_temporary %}
+      <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+      {% else %}
+      <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+      {% endif %}
+        <li>
+          <a href="{{ url_for('inventory.lot_add')}}">
+            <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
+          </a>
+        </li>
+        {% for lot in lots %}
+        {% if lot.is_temporary %}
+        <li>
+          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+          </a>
+        </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </li><!-- End Temporal Lots Nav -->
+
+    <li class="nav-heading">Utils</li>
+
+    <li class="nav-item">
+      <a class="nav-link collapsed" href="{{ url_for('labels.label_list')}}">
+        <i class="bi bi-tags"></i>
+        <span>Tags</span>
+      </a>
+    </li><!-- End Tags Page Nav -->
+
+  </ul>
+
+</aside><!-- End Sidebar-->
+
+<main id="main" class="main">
+  {% block messages %}
+    {% for level, message in get_flashed_messages(with_categories=true) %}
+      <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
+        {% if '_message_icon' in session %}
+          <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
+        {% else %}<!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
+          <i class="bi bi-info-circle me-1"></i>
+        {% endif %}
+        {{ message }}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    {% endfor %}
+  {% endblock %}
+  {% block main %}
+
+  {% endblock main %}
+</main><!-- End #main -->
+
+<!-- ======= Footer ======= -->
+<footer id="footer" class="footer">
+  <div class="copyright">
+    &copy; Copyright <strong><span>USOdy</span></strong>. All Rights Reserved
+  </div>
+  <div class="credits">
+    <!-- All the links in the footer should remain intact. -->
+    <!-- You can delete the links only if you purchased the pro version. -->
+    <!-- Licensing information: https://bootstrapmade.com/license/ -->
+    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
+    Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> // DeviceHub {{ version }}
+  </div>
+</footer><!-- End Footer -->
+
+<!-- API_CALLS -->
+<script>
+  const API_URLS = {
+    Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
+    currentUserID: "{{ current_user.id }}",
+    lots: "{{ url_for('Lot.main') }}",
+    lots_detail: "{{ url_for('inventory.lotdevicelist', lot_id='ReplaceTEXT') }}",
+    devices: "{{ url_for('Device.main') }}",
+    devices_detail: "{{ url_for('inventory.device_details', id='ReplaceTEXT')}}"
+  }
+</script>
+
+{% endblock body %}