diff --git a/[core]/esx_menu_default/fxmanifest.lua b/[core]/esx_menu_default/fxmanifest.lua
index 851fbcd6..2dc064e6 100644
--- a/[core]/esx_menu_default/fxmanifest.lua
+++ b/[core]/esx_menu_default/fxmanifest.lua
@@ -3,7 +3,7 @@ fx_version 'adamant'
 game 'gta5'
 description 'A basic menu system for ESX Legacy.'
 lua54 'yes'
-version '1.12.2'
+version '1.12.4'
 
 client_scripts { '@es_extended/imports.lua', 'client/main.lua' }
 
diff --git a/[core]/esx_menu_default/html/css/app.css b/[core]/esx_menu_default/html/css/app.css
index a02d2a1d..617fd4a3 100644
--- a/[core]/esx_menu_default/html/css/app.css
+++ b/[core]/esx_menu_default/html/css/app.css
@@ -1,109 +1,198 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 ::-webkit-scrollbar {
     display: none;
 }
 
-.menu {
-    font-family: "Poppins", sans-serif;
-    min-width: 350px;
-    color: #fff;
+.menu-container {
     position: absolute;
-    background: rgba(15, 15, 15, 0.0);
-    text-align: center;
-    border-radius: 5px;
+    min-width: 20.8333vw;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 0.9259vh;
+    transform-origin: center center;
+}
+
+.menu-container.align-left { 
+    left: 0; 
+    top: 50%; 
+    transform: translateY(-50%) scale(var(--scale, 1));
+    transform-origin: left center;
+}
+
+.menu-container.align-top-left { 
+    left: 4rem; 
+    top: 0.8rem; 
+    transform: scale(var(--scale, 1));
+    transform-origin: left top;
+}
+
+.menu-container.align-top { 
+    left: 50%; 
+    top: 0.8rem; 
+    transform: translateX(-50%) scale(var(--scale, 1));
+    transform-origin: center top;
+}
+
+.menu-container.align-top-right { 
+    right: 3rem; 
+    top: 0.8rem; 
+    transform: scale(var(--scale, 1));
+    transform-origin: right top;
+}
+
+.menu-container.align-right { 
+    right: 0; 
+    top: 50%; 
+    transform: translateY(-50%) scale(var(--scale, 1));
+    transform-origin: right center;
+}
+
+.menu-container.align-bottom-right { 
+    right: 3rem; 
+    bottom: 0.8rem; 
+    transform: scale(var(--scale, 1));
+    transform-origin: right bottom;
+}
+
+.menu-container.align-bottom { 
+    left: 50%; 
+    bottom: 0.8rem; 
+    transform: translateX(-50%) scale(var(--scale, 1));
+    transform-origin: center bottom;
+}
+
+.menu-container.align-bottom-left { 
+    left: 4rem; 
+    bottom: 0.8rem; 
+    transform: scale(var(--scale, 1));
+    transform-origin: left bottom;
+}
+
+.menu-container.align-center { 
+    left: 50%; 
+    top: 50%; 
+    transform: translate(-50%, -50%) scale(var(--scale, 1));
+    transform-origin: center center;
+}
+
+.menu-buttons {
+    display: flex;
+    justify-content: center;
+    gap: .5208vw;
+    color: #FFF;
+    font-family: Poppins;
+    font-size: .8333vw;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .4167vw;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.backspace-btn, .close-btn {
+    width: 10.6771vw;
+    height: 6.0185vh;
+    border-radius: .2604vw;
+    background: #161616;
+}
+
+.menu-button:hover {
+    background-color: #252525;
+    transform: scale(1.02);
+}
+
+.menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9259vh;
+    font-family: "Poppins", sans-serif;
+    color: #fff;
+    padding: 8px;
+    background-color: #161616;
+    border-radius: 4px;
 }
 
 .head {
     display: block;
     overflow: hidden;
-    padding-bottom: 3px;
+    min-width: 20.4688vw;
+    min-height: 6.0185vh;
+    padding-bottom: 0.2778vh;
     text-align: center;
     white-space: nowrap;
-    background: rgba(10, 10, 10, 1);
-    border-bottom: 2px solid #fb9b04;
+    border-radius: .2604vw;
+    background: #FB9B04;
 }
 
 .menu .head {
-    text-align: center;
-    height: 28px;
-    color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #252525;
+    font-family: Poppins;
+    font-size: 1.25vw;
+    font-style: normal;
     font-weight: 700;
-    font-size: 20px;
+    line-height: normal;
+    height: 100%;
 }
 
 .menu .menu-items {
-    max-height: 450px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.9259vh;
+    max-height: 41.6667vh;
     overflow-y: auto;
     font-weight: 550;
-}
-
-.menu-items {
-    margin-bottom: 2px;
+    margin-bottom: 0.1852vh;
 }
 
 .menu .menu-items .menu-item {
-    display: block;
-    padding: 7px;
-    font-size: 13px;
-    height: 16px;
-    text-indent: 5px;
-    background: rgba(30, 30, 30, 0.9);
-    color: rgb(243, 243, 243);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1.0833vw;
+    min-width: 20.4688vw;
+    min-height: 6.0185vh;
+    border-radius: .2604vw;
+    background: #252525;
+    color: #FFF;
+    font-family: Poppins;
+    font-size: .8333vw;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
 }
 
-
 .menu .menu-items .menu-item.selected {
-    border: 1px solid #fb9c04ec;
-    background: rgba(15, 15, 15, 0.9);
-    color: rgba(243, 243, 243);
-    letter-spacing: 0.2px;
-    font-weight: 500;
+    border: 2px solid #FB9B04;
+    background: #252525;
 }
 
-.menu.align-left {
-    left: 0;
-    top: 50%;
+.menu-item {
+    display: flex;
+    align-items: center;
+    padding: .4167vw 0.9259vh;
 }
 
-.menu.align-top-left {
-    left: 4rem;
-    top: 0;
+.menu-item-icon {
+    font-size: 1vw;
+    text-align: center;
 }
 
-.menu.align-top {
-    left: 50%;
-    top: 0;
+.menu-item.selected {
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
-.menu.align-top-right {
-    right: 3rem;
-    top: 0;
-}
-
-.menu.align-right {
-    right: 0;
-    top: 50%;
-}
-
-.menu.align-bottom-right {
-    right: 3rem;
-    bottom: 0;
-}
-
-.menu.align-bottom {
-    left: 50%;
-    bottom: 0;
-    transform: translate(0, -50%);
-}
-
-.menu.align-bottom-left {
-    left: 4rem;
-    bottom: 0;
-}
-
-.menu.align-center {
-    left: 50%;
-    top: 35%;
-    transform: translate(-50%, 50%);
+.fas {
+    color: white;
 }
diff --git a/[core]/esx_menu_default/html/js/app.js b/[core]/esx_menu_default/html/js/app.js
index da6a906a..852140ea 100644
--- a/[core]/esx_menu_default/html/js/app.js
+++ b/[core]/esx_menu_default/html/js/app.js
@@ -1,21 +1,31 @@
 (function () {
     let MenuTpl =
-        '<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
+        '<div id="menu_{{_namespace}}_{{_name}}" class="menu-container{{#align}} align-{{align}}{{/align}}" style="transform: scale({{scale}});">' +
+        '<div class="menu">' +
         '<div class="head"><span>{{{title}}}</span></div>' +
         '<div class="menu-items">' +
         "{{#elements}}" +
         '<div class="menu-item {{#selected}}selected{{/selected}}">' +
-        "{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}" +
+        '{{#icon}}<div class="menu-item-icon"><i class="fas fa-{{icon}}"></i></div>{{/icon}}' +
+        '<div class="menu-item-label">{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}</div>' +
         "</div>" +
         "{{/elements}}" +
         "</div>" +
-        "</div>" +
+        '</div>' +
+        '<div class="menu-buttons">' +
+        '<div class="menu-button backspace-btn"><i class="fa-solid fa-delete-left"></i> {{locales.backspace}}</div>' +
+        '<div class="menu-button close-btn"><i class="fa-solid fa-right-to-bracket"></i> {{locales.select}}</div>' +
+        '</div>' +
         "</div>";
     window.ESX_MENU = {};
     ESX_MENU.ResourceName = "esx_menu_default";
     ESX_MENU.opened = {};
     ESX_MENU.focus = [];
     ESX_MENU.pos = {};
+    ESX_MENU.locales = {
+        backspace: "BACK",
+        select: "SELECT"
+    };
 
     ESX_MENU.open = function (namespace, name, data) {
         if (typeof ESX_MENU.opened[namespace] === "undefined") {
@@ -30,6 +40,12 @@
             ESX_MENU.pos[namespace] = {};
         }
 
+        if (data.locales) {
+            ESX_MENU.locales = data.locales;
+        }
+
+        data.scale = data.scale || 1;
+
         for (let i = 0; i < data.elements.length; i++) {
             if (typeof data.elements[i].type === "undefined") {
                 data.elements[i].type = "default";
@@ -39,6 +55,7 @@
         data._index = ESX_MENU.focus.length;
         data._namespace = namespace;
         data._name = name;
+        data.locales = ESX_MENU.locales;
 
         for (let i = 0; i < data.elements.length; i++) {
             data.elements[i]._namespace = namespace;
@@ -362,5 +379,21 @@
         window.addEventListener("message", (event) => {
             onData(event.data);
         });
+
+        document.addEventListener('click', function(event) {
+            if (event.target.closest('.backspace-btn')) {
+                let focused = ESX_MENU.getFocused();
+                if (typeof focused != "undefined") {
+                    ESX_MENU.cancel(focused.namespace, focused.name);
+                }
+            }
+            
+            if (event.target.closest('.close-btn')) {
+                let focused = ESX_MENU.getFocused();
+                if (typeof focused != "undefined") {
+                    ESX_MENU.close(focused.namespace, focused.name);
+                }
+            }
+        });
     };
 })();
diff --git a/[core]/esx_menu_default/html/ui.html b/[core]/esx_menu_default/html/ui.html
index 2cb88e7c..8f3ea43e 100644
--- a/[core]/esx_menu_default/html/ui.html
+++ b/[core]/esx_menu_default/html/ui.html
@@ -1,16 +1,21 @@
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
-    </head>
 
-    <body>
-        <div id="menus"></div>
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
 
-        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-        <script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
-        <script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
-    </body>
-</html>
+<body>
+    <div id="menus"></div>
+
+    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+    <script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
+    <script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file