diff --git a/resources/assets/img/avatars/user.png b/resources/assets/img/avatars/user.png
new file mode 100644
index 0000000..7ad21d4
Binary files /dev/null and b/resources/assets/img/avatars/user.png differ
diff --git a/resources/assets/img/customizer/border-dark.svg b/resources/assets/img/customizer/border-dark.svg
new file mode 100644
index 0000000..e9045d3
--- /dev/null
+++ b/resources/assets/img/customizer/border-dark.svg
@@ -0,0 +1,16 @@
+<svg width="107" height="69" viewBox="0 0 107 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.390625" y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="5.39062" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9.39062" y="6.34387" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5.39062" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5.39062" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5.39062" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="35.6621" y="5.59766" width="65" height="8.06667" rx="1.5" stroke="#434968"/>
+<rect x="38.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="82.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="88.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="93.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="60.5" y="20.9922" width="40" height="17.1333" rx="1.5" stroke="#434968"/>
+<rect x="35.5" y="20.5" width="18.4118" height="17.1333" rx="1.5" stroke="#434968"/>
+<rect x="35.6621" y="44.5254" width="65" height="17.1333" rx="1.5" stroke="#434968"/>
+</svg>
diff --git a/resources/assets/img/customizer/border.svg b/resources/assets/img/customizer/border.svg
new file mode 100644
index 0000000..5bc0ae6
--- /dev/null
+++ b/resources/assets/img/customizer/border.svg
@@ -0,0 +1,16 @@
+<svg width="107" height="69" viewBox="0 0 107 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.390625" y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="5.39062" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9.39062" y="6.34387" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5.39062" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5.39062" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5.39062" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="35.6621" y="5.59766" width="65" height="8.06667" rx="1.5" stroke="#DBDADE"/>
+<rect x="38.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="82.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="88.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="93.1426" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="60.5" y="20.9922" width="40" height="17.1333" rx="1.5" stroke="#DBDADE"/>
+<rect x="35.5" y="20.5" width="18.4118" height="17.1333" rx="1.5" stroke="#DBDADE"/>
+<rect x="35.6621" y="44.5254" width="65" height="17.1333" rx="1.5" stroke="#DBDADE"/>
+</svg>
diff --git a/resources/assets/img/customizer/collapsed-dark.svg b/resources/assets/img/customizer/collapsed-dark.svg
new file mode 100644
index 0000000..f77b79c
--- /dev/null
+++ b/resources/assets/img/customizer/collapsed-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H14V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="3" y="24.8921" width="8" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="3.5" y="6.34387" width="7" height="7" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="3" y="35.7661" width="8" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="3" y="46.64" width="8" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="3" y="57.514" width="8" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="21.8838" y="5.09766" width="76.8877" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="26.1094" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="51.4619" y="20.4922" width="47.7216" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="21.8838" y="20.4922" width="22.5942" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="21.8838" y="44.0254" width="77.2998" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/collapsed.svg b/resources/assets/img/customizer/collapsed.svg
new file mode 100644
index 0000000..9f260a6
--- /dev/null
+++ b/resources/assets/img/customizer/collapsed.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H14V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="3" y="24.8921" width="8" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="3.5" y="6.34387" width="7" height="7" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="3" y="35.7661" width="8" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="3" y="46.64" width="8" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="3" y="57.514" width="8" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="21.8838" y="5.09766" width="76.8877" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="26.1094" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="51.4619" y="20.4922" width="47.7216" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="21.8838" y="20.4922" width="22.5942" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="21.8838" y="44.0254" width="77.2998" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/compact-dark.svg b/resources/assets/img/customizer/compact-dark.svg
new file mode 100644
index 0000000..b1eec2d
--- /dev/null
+++ b/resources/assets/img/customizer/compact-dark.svg
@@ -0,0 +1,11 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="19.7939" y="4.81323" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="22.7744" y="7.07983" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="66.7744" y="7.07983" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="72.7744" y="7.07983" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="78.7744" y="7.07983" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="45.2061" y="20.2078" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="19.7939" y="20.2078" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="19.7939" y="43.741" width="66.4121" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/compact.svg b/resources/assets/img/customizer/compact.svg
new file mode 100644
index 0000000..e96965a
--- /dev/null
+++ b/resources/assets/img/customizer/compact.svg
@@ -0,0 +1,15 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="19.7939" y="5.0976" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="22.7744" y="7.3642" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="22.7744" y="7.3642" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="66.7744" y="7.3642" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="66.7744" y="7.3642" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="72.7744" y="7.3642" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="72.7744" y="7.3642" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="78.7744" y="7.3642" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="78.7744" y="7.3642" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="45.2061" y="20.4921" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="19.7939" y="20.4921" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="19.7939" y="44.0253" width="66.4121" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/dark-dark.svg b/resources/assets/img/customizer/dark-dark.svg
new file mode 100644
index 0000000..a2102d0
--- /dev/null
+++ b/resources/assets/img/customizer/dark-dark.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.5 19.5C51.4996 21.2501 51.9584 22.9696 52.8307 24.4868C53.703 26.004 54.9582 27.2657 56.4709 28.1459C57.9835 29.026 59.7007 29.4938 61.4507 29.5024C63.2008 29.511 64.9225 29.0602 66.4437 28.195C65.8425 34.5375 60.5 39.5 54 39.5C47.0963 39.5 41.5 33.9037 41.5 27C41.5 20.5 46.4625 15.1575 52.805 14.5563C51.9469 16.0624 51.4971 17.7666 51.5 19.5V19.5ZM44 27C44 29.6522 45.0536 32.1957 46.9289 34.0711C48.8043 35.9464 51.3478 37 54 37C55.7668 36.9999 57.5022 36.532 59.0296 35.6439C60.557 34.7558 61.8221 33.4792 62.6963 31.9437C62.3013 31.9812 61.9013 32 61.5 32C54.5963 32 49 26.4037 49 19.5C49 19.0987 49.0188 18.7 49.0563 18.3038C47.5208 19.1779 46.2442 20.443 45.3561 21.9704C44.468 23.4978 44.0001 25.2332 44 27V27ZM61.705 14.8637L62.75 15.125V16.375L61.705 16.6363C61.2655 16.7462 60.8641 16.9734 60.5438 17.2938C60.2234 17.6141 59.9962 18.0155 59.8862 18.455L59.625 19.5H58.375L58.1138 18.455C58.0038 18.0155 57.7766 17.6141 57.4562 17.2938C57.1359 16.9734 56.7345 16.7462 56.295 16.6363L55.25 16.375V15.125L56.295 14.8637C56.7343 14.7536 57.1354 14.5263 57.4555 14.2059C57.7756 13.8856 58.0027 13.4843 58.1125 13.045L58.375 12H59.625L59.8862 13.045C59.9962 13.4845 60.2234 13.8859 60.5438 14.2062C60.8641 14.5266 61.2655 14.7538 61.705 14.8637V14.8637ZM67.955 21.1137L69 21.375V22.625L67.955 22.8862C67.5155 22.9962 67.1141 23.2234 66.7938 23.5438C66.4734 23.8641 66.2462 24.2655 66.1362 24.705L65.875 25.75H64.625L64.3638 24.705C64.2538 24.2655 64.0266 23.8641 63.7062 23.5438C63.3859 23.2234 62.9845 22.9962 62.545 22.8862L61.5 22.625V21.375L62.545 21.1137C62.9845 21.0038 63.3859 20.7766 63.7062 20.4562C64.0266 20.1359 64.2538 19.7345 64.3638 19.295L64.625 18.25H65.875L66.1362 19.295C66.2462 19.7345 66.4734 20.1359 66.7938 20.4562C67.1141 20.7766 67.5155 21.0038 67.955 21.1137Z" fill="#EAEAFF" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/dark.svg b/resources/assets/img/customizer/dark.svg
new file mode 100644
index 0000000..ade1883
--- /dev/null
+++ b/resources/assets/img/customizer/dark.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.5 19.5C51.4996 21.2501 51.9584 22.9696 52.8307 24.4868C53.703 26.004 54.9582 27.2657 56.4709 28.1459C57.9835 29.026 59.7007 29.4938 61.4507 29.5024C63.2008 29.511 64.9225 29.0602 66.4437 28.195C65.8425 34.5375 60.5 39.5 54 39.5C47.0963 39.5 41.5 33.9037 41.5 27C41.5 20.5 46.4625 15.1575 52.805 14.5563C51.9469 16.0624 51.4971 17.7666 51.5 19.5V19.5ZM44 27C44 29.6522 45.0536 32.1957 46.9289 34.0711C48.8043 35.9464 51.3478 37 54 37C55.7668 36.9999 57.5022 36.532 59.0296 35.6439C60.557 34.7558 61.8221 33.4792 62.6963 31.9437C62.3013 31.9812 61.9013 32 61.5 32C54.5963 32 49 26.4037 49 19.5C49 19.0987 49.0188 18.7 49.0563 18.3038C47.5208 19.1779 46.2442 20.443 45.3561 21.9704C44.468 23.4978 44.0001 25.2332 44 27V27ZM61.705 14.8637L62.75 15.125V16.375L61.705 16.6363C61.2655 16.7462 60.8641 16.9734 60.5438 17.2938C60.2234 17.6141 59.9962 18.0155 59.8862 18.455L59.625 19.5H58.375L58.1138 18.455C58.0038 18.0155 57.7766 17.6141 57.4562 17.2938C57.1359 16.9734 56.7345 16.7462 56.295 16.6363L55.25 16.375V15.125L56.295 14.8637C56.7343 14.7536 57.1354 14.5263 57.4555 14.2059C57.7756 13.8856 58.0027 13.4843 58.1125 13.045L58.375 12H59.625L59.8862 13.045C59.9962 13.4845 60.2234 13.8859 60.5438 14.2062C60.8641 14.5266 61.2655 14.7538 61.705 14.8637V14.8637ZM67.955 21.1137L69 21.375V22.625L67.955 22.8862C67.5155 22.9962 67.1141 23.2234 66.7938 23.5438C66.4734 23.8641 66.2462 24.2655 66.1362 24.705L65.875 25.75H64.625L64.3638 24.705C64.2538 24.2655 64.0266 23.8641 63.7062 23.5438C63.3859 23.2234 62.9845 22.9962 62.545 22.8862L61.5 22.625V21.375L62.545 21.1137C62.9845 21.0038 63.3859 20.7766 63.7062 20.4562C64.0266 20.1359 64.2538 19.7345 64.3638 19.295L64.625 18.25H65.875L66.1362 19.295C66.2462 19.7345 66.4734 20.1359 66.7938 20.4562C67.1141 20.7766 67.5155 21.0038 67.955 21.1137Z" fill="#262B43" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/default-dark.svg b/resources/assets/img/customizer/default-dark.svg
new file mode 100644
index 0000000..07482aa
--- /dev/null
+++ b/resources/assets/img/customizer/default-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.217621" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.21762C0 2.00848 1.79086 0.217621 4 0.217621H28V68.2176H4C1.79086 68.2176 0 66.4268 0 64.2176V4.21762Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="24.8253" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.27713" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.4472" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="34.7715" y="5.03091" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="37.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="81.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="87.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="93.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="59.6094" y="20.4254" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="34.7715" y="20.4254" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="34.7715" y="43.9586" width="66" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/default.svg b/resources/assets/img/customizer/default.svg
new file mode 100644
index 0000000..81ebf39
--- /dev/null
+++ b/resources/assets/img/customizer/default.svg
@@ -0,0 +1,26 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.217621" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.21762C0 2.00848 1.79086 0.217621 4 0.217621H28V68.2176H4C1.79086 68.2176 0 66.4268 0 64.2176V4.21762Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="24.8253" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="24.8253" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="9" y="6.27713" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.27713" width="10" height="10" rx="2" stroke="#DBDADE"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="57.4472" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.4472" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="34.7715" y="5.03091" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="37.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="37.752" y="7.29752" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="81.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="81.752" y="7.29752" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="87.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="87.752" y="7.29752" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="93.752" y="7.29752" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="93.752" y="7.29752" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="59.6094" y="20.4254" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="34.7715" y="20.4254" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="34.7715" y="43.9586" width="66" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/expanded-dark.svg b/resources/assets/img/customizer/expanded-dark.svg
new file mode 100644
index 0000000..f918a86
--- /dev/null
+++ b/resources/assets/img/customizer/expanded-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H28V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="32.7715" y="5.09766" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="58.1836" y="20.4922" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.4922" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.0254" width="66.4121" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/expanded.svg b/resources/assets/img/customizer/expanded.svg
new file mode 100644
index 0000000..6359527
--- /dev/null
+++ b/resources/assets/img/customizer/expanded.svg
@@ -0,0 +1,26 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H28V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" stroke="#DBDADE"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="32.7715" y="5.09766" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="58.1836" y="20.4922" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.4922" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.0254" width="66.4121" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/hidden-dark.svg b/resources/assets/img/customizer/hidden-dark.svg
new file mode 100644
index 0000000..5a74bd6
--- /dev/null
+++ b/resources/assets/img/customizer/hidden-dark.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="58.1836" y="6.28436" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="6.28436" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="33" y="30.2844" width="66" height="32" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/hidden.svg b/resources/assets/img/customizer/hidden.svg
new file mode 100644
index 0000000..b25f266
--- /dev/null
+++ b/resources/assets/img/customizer/hidden.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="58.1836" y="6.28436" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="6.28436" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="33" y="30.2844" width="66" height="32" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/horizontal-fixed-dark.svg b/resources/assets/img/customizer/horizontal-fixed-dark.svg
new file mode 100644
index 0000000..fd7a613
--- /dev/null
+++ b/resources/assets/img/customizer/horizontal-fixed-dark.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="106" height="68" rx="6" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="45" y="14" width="48" height="15" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15" y="14" width="23" height="15" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15" y="34" width="78" height="34" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15" width="78" height="9" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="20.4111" y="1.70111" width="6.11872" height="5.54323" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="34.5303" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="49.2949" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="64.0596" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="78.8242" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/horizontal-fixed.svg b/resources/assets/img/customizer/horizontal-fixed.svg
new file mode 100644
index 0000000..83a5ae7
--- /dev/null
+++ b/resources/assets/img/customizer/horizontal-fixed.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="106" height="68" rx="6" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="45" y="14" width="48" height="15" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15" y="14" width="23" height="15" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15" y="34" width="78" height="34" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15" width="78" height="9" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="20.4111" y="1.70111" width="6.11872" height="5.54323" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="34.5303" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="49.2949" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="64.0596" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="78.8242" y="3.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/horizontal-static-dark.svg b/resources/assets/img/customizer/horizontal-static-dark.svg
new file mode 100644
index 0000000..5525b13
--- /dev/null
+++ b/resources/assets/img/customizer/horizontal-static-dark.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="106" height="68" rx="6" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="44.8525" y="20.2079" width="47.7216" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15.2744" y="20" width="22.5942" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15.2744" y="43.7411" width="77.2998" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="15" y="5" width="78" height="9" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="20.4111" y="6.70111" width="6.11872" height="5.54323" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="34.5303" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="49.2949" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="64.0596" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="78.8242" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#8692D0" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/horizontal-static.svg b/resources/assets/img/customizer/horizontal-static.svg
new file mode 100644
index 0000000..f776605
--- /dev/null
+++ b/resources/assets/img/customizer/horizontal-static.svg
@@ -0,0 +1,12 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="106" height="68" rx="6" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="44.8525" y="20.2079" width="47.7216" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15.2744" y="20" width="22.5942" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15.2744" y="43.7411" width="77.2998" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="15" y="5" width="78" height="9" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="20.4111" y="6.70111" width="6.11872" height="5.54323" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="34.5303" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="49.2949" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="64.0596" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="78.8242" y="8.20477" width="6.76484" height="2.53587" rx="1.26794" fill="#4B465C" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/light-dark.svg b/resources/assets/img/customizer/light-dark.svg
new file mode 100644
index 0000000..a903b79
--- /dev/null
+++ b/resources/assets/img/customizer/light-dark.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 34.5C52.0109 34.5 50.1032 33.7098 48.6967 32.3033C47.2902 30.8968 46.5 28.9891 46.5 27C46.5 25.0109 47.2902 23.1032 48.6967 21.6967C50.1032 20.2902 52.0109 19.5 54 19.5C55.9891 19.5 57.8968 20.2902 59.3033 21.6967C60.7098 23.1032 61.5 25.0109 61.5 27C61.5 28.9891 60.7098 30.8968 59.3033 32.3033C57.8968 33.7098 55.9891 34.5 54 34.5ZM54 32C55.3261 32 56.5979 31.4732 57.5355 30.5355C58.4732 29.5979 59 28.3261 59 27C59 25.6739 58.4732 24.4021 57.5355 23.4645C56.5979 22.5268 55.3261 22 54 22C52.6739 22 51.4021 22.5268 50.4645 23.4645C49.5268 24.4021 49 25.6739 49 27C49 28.3261 49.5268 29.5979 50.4645 30.5355C51.4021 31.4732 52.6739 32 54 32V32ZM52.75 13.25H55.25V17H52.75V13.25ZM52.75 37H55.25V40.75H52.75V37ZM43.3938 18.1612L45.1612 16.3938L47.8125 19.045L46.045 20.8125L43.3938 18.1625V18.1612ZM60.1875 34.955L61.955 33.1875L64.6063 35.8387L62.8387 37.6063L60.1875 34.955ZM62.8387 16.3925L64.6063 18.1612L61.955 20.8125L60.1875 19.045L62.8387 16.3938V16.3925ZM46.045 33.1875L47.8125 34.955L45.1612 37.6063L43.3938 35.8387L46.045 33.1875V33.1875ZM67.75 25.75V28.25H64V25.75H67.75ZM44 25.75V28.25H40.25V25.75H44Z" fill="#EAEAFF" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/light.svg b/resources/assets/img/customizer/light.svg
new file mode 100644
index 0000000..c25b2a4
--- /dev/null
+++ b/resources/assets/img/customizer/light.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 34.5C52.0109 34.5 50.1032 33.7098 48.6967 32.3033C47.2902 30.8968 46.5 28.9891 46.5 27C46.5 25.0109 47.2902 23.1032 48.6967 21.6967C50.1032 20.2902 52.0109 19.5 54 19.5C55.9891 19.5 57.8968 20.2902 59.3033 21.6967C60.7098 23.1032 61.5 25.0109 61.5 27C61.5 28.9891 60.7098 30.8968 59.3033 32.3033C57.8968 33.7098 55.9891 34.5 54 34.5ZM54 32C55.3261 32 56.5979 31.4732 57.5355 30.5355C58.4732 29.5979 59 28.3261 59 27C59 25.6739 58.4732 24.4021 57.5355 23.4645C56.5979 22.5268 55.3261 22 54 22C52.6739 22 51.4021 22.5268 50.4645 23.4645C49.5268 24.4021 49 25.6739 49 27C49 28.3261 49.5268 29.5979 50.4645 30.5355C51.4021 31.4732 52.6739 32 54 32V32ZM52.75 13.25H55.25V17H52.75V13.25ZM52.75 37H55.25V40.75H52.75V37ZM43.3938 18.1612L45.1612 16.3938L47.8125 19.045L46.045 20.8125L43.3938 18.1625V18.1612ZM60.1875 34.955L61.955 33.1875L64.6063 35.8387L62.8387 37.6063L60.1875 34.955ZM62.8387 16.3925L64.6063 18.1612L61.955 20.8125L60.1875 19.045L62.8387 16.3938V16.3925ZM46.045 33.1875L47.8125 34.955L45.1612 37.6063L43.3938 35.8387L46.045 33.1875V33.1875ZM67.75 25.75V28.25H64V25.75H67.75ZM44 25.75V28.25H40.25V25.75H44Z" fill="#262B43" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/ltr-dark.svg b/resources/assets/img/customizer/ltr-dark.svg
new file mode 100644
index 0000000..c7bb412
--- /dev/null
+++ b/resources/assets/img/customizer/ltr-dark.svg
@@ -0,0 +1,15 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="6.10352e-05" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="5.30176" y="4.2464" width="24.561" height="59.3336" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="10.5225" y="17.381" width="14.1209" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="10.5225" y="26.3365" width="10.0694" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="10.5225" y="35.2919" width="12.6207" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="10.5225" y="44.2475" width="6.20526" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="10.5225" y="53.2032" width="8.24653" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="36.1953" y="4.2464" width="63.5883" height="59.3336" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="44.5977" y="14.6132" width="14.1209" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="44.5977" y="23.5687" width="33.432" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="44.5977" y="32.5241" width="42" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="44.5977" y="41.4794" width="33.432" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="44.5977" y="50.4352" width="5.88587" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/ltr.svg b/resources/assets/img/customizer/ltr.svg
new file mode 100644
index 0000000..8cfc1d8
--- /dev/null
+++ b/resources/assets/img/customizer/ltr.svg
@@ -0,0 +1,25 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284424" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="5.30176" y="4.53076" width="24.561" height="59.3336" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="10.5225" y="17.6654" width="14.1209" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="10.5225" y="17.6654" width="14.1209" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="10.5225" y="26.6208" width="10.0694" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="10.5225" y="26.6208" width="10.0694" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="10.5225" y="35.5763" width="12.6207" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="10.5225" y="35.5763" width="12.6207" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="10.5225" y="44.5319" width="6.20526" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="10.5225" y="44.5319" width="6.20526" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="10.5225" y="53.4875" width="8.24653" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="10.5225" y="53.4875" width="8.24653" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="36.1953" y="4.53076" width="63.5883" height="59.3336" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="44.5977" y="14.8976" width="14.1209" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="44.5977" y="14.8976" width="14.1209" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="44.5977" y="23.853" width="33.432" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="44.5977" y="23.853" width="33.432" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="44.5977" y="32.8085" width="42" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="44.5977" y="32.8085" width="42" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="44.5977" y="41.7638" width="33.432" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="44.5977" y="41.7638" width="33.432" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+<rect x="44.5977" y="50.7196" width="5.88587" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="44.5977" y="50.7196" width="5.88587" height="2.15549" rx="1.07775" stroke="#DBDADE"/>
+</svg>
diff --git a/resources/assets/img/customizer/rtl-dark.svg b/resources/assets/img/customizer/rtl-dark.svg
new file mode 100644
index 0000000..962f3a8
--- /dev/null
+++ b/resources/assets/img/customizer/rtl-dark.svg
@@ -0,0 +1,15 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="6.10352e-05" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="74.8896" y="4.2464" width="24.561" height="59.3336" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="80.1104" y="17.381" width="14.1209" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="84.1611" y="26.3365" width="10.0694" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="81.6104" y="35.2919" width="12.6207" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="88.0254" y="44.2475" width="6.20526" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.9844" y="53.2032" width="8.24653" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5.30176" y="4.2464" width="63.5883" height="59.3336" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="46.5879" y="14.6132" width="14.1209" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="27.2773" y="23.5687" width="33.432" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="18.709" y="32.5241" width="42" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="27.2773" y="41.4794" width="33.432" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="54.8232" y="50.4352" width="5.88587" height="2.15549" rx="1.07775" fill="#8692D0" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/rtl.svg b/resources/assets/img/customizer/rtl.svg
new file mode 100644
index 0000000..643bebc
--- /dev/null
+++ b/resources/assets/img/customizer/rtl.svg
@@ -0,0 +1,15 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284424" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="74.8896" y="4.53076" width="24.561" height="59.3336" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="80.1104" y="17.6654" width="14.1209" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="84.1611" y="26.6208" width="10.0694" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="81.6104" y="35.5763" width="12.6207" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="88.0254" y="44.5319" width="6.20526" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.9844" y="53.4875" width="8.24653" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5.30176" y="4.53076" width="63.5883" height="59.3336" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="46.5879" y="14.8976" width="14.1209" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="27.2773" y="23.853" width="33.432" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="18.709" y="32.8085" width="42" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="27.2773" y="41.7638" width="33.432" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="54.8232" y="50.7196" width="5.88587" height="2.15549" rx="1.07775" fill="#4B465C" fill-opacity="0.16"/>
+</svg>
diff --git a/resources/assets/img/customizer/semi-dark-dark.svg b/resources/assets/img/customizer/semi-dark-dark.svg
new file mode 100644
index 0000000..39a907a
--- /dev/null
+++ b/resources/assets/img/customizer/semi-dark-dark.svg
@@ -0,0 +1,23 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.217651" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.21765C0 2.00851 1.79086 0.217651 4 0.217651H28V68.2177H4C1.79086 68.2177 0 66.4268 0 64.2177V4.21765Z" fill="#8692D0"/>
+<path d="M0 4.21765C0 2.00851 1.79086 0.217651 4 0.217651H28V68.2177H4C1.79086 68.2177 0 66.4268 0 64.2177V4.21765Z" fill="black" fill-opacity="0.45"/>
+<rect x="5" y="24.8254" width="18" height="2.87399" rx="1.43699" fill="#8692D0"/>
+<rect x="5" y="24.8254" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.3"/>
+<rect x="9" y="6.27716" width="10" height="10" rx="2" fill="#8692D0"/>
+<rect x="9" y="6.27716" width="10" height="10" rx="2" fill="white" fill-opacity="0.3"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="#8692D0"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.3"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="#8692D0"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.3"/>
+<rect x="5" y="57.4473" width="18" height="2.87399" rx="1.43699" fill="#8692D0"/>
+<rect x="5" y="57.4473" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.3"/>
+<rect x="34.7715" y="5.03094" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="37.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="81.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="87.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="93.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="59.6094" y="20.4255" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="34.7715" y="20.4255" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="34.7715" y="43.9587" width="66" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/semi-dark.svg b/resources/assets/img/customizer/semi-dark.svg
new file mode 100644
index 0000000..697a5ad
--- /dev/null
+++ b/resources/assets/img/customizer/semi-dark.svg
@@ -0,0 +1,23 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.217651" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.21765C0 2.00851 1.79086 0.217651 4 0.217651H28V68.2177H4C1.79086 68.2177 0 66.4268 0 64.2177V4.21765Z" fill="#4B465C"/>
+<path d="M0 4.21765C0 2.00851 1.79086 0.217651 4 0.217651H28V68.2177H4C1.79086 68.2177 0 66.4268 0 64.2177V4.21765Z" fill="white" fill-opacity="0.2"/>
+<rect x="5" y="24.8254" width="18" height="2.87399" rx="1.43699" fill="#4B465C"/>
+<rect x="5" y="24.8254" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.6"/>
+<rect x="9" y="6.27716" width="10" height="10" rx="2" fill="#4B465C"/>
+<rect x="9" y="6.27716" width="10" height="10" rx="2" fill="white" fill-opacity="0.6"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="#4B465C"/>
+<rect x="5" y="35.6993" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.6"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="#4B465C"/>
+<rect x="5" y="46.5733" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.6"/>
+<rect x="5" y="57.4473" width="18" height="2.87399" rx="1.43699" fill="#4B465C"/>
+<rect x="5" y="57.4473" width="18" height="2.87399" rx="1.43699" fill="white" fill-opacity="0.6"/>
+<rect x="34.7715" y="5.03094" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="37.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="81.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="87.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="93.752" y="7.29755" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="59.6094" y="20.4255" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="34.7715" y="20.4255" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="34.7715" y="43.9587" width="66" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/static-dark.svg b/resources/assets/img/customizer/static-dark.svg
new file mode 100644
index 0000000..a3f15f1
--- /dev/null
+++ b/resources/assets/img/customizer/static-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="32.7715" y="5.38202" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="35.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="79.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="91.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="58.1836" y="20.7766" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.7766" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.3098" width="66.4121" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/static.svg b/resources/assets/img/customizer/static.svg
new file mode 100644
index 0000000..d8b0963
--- /dev/null
+++ b/resources/assets/img/customizer/static.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="32.7715" y="5.38202" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="35.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="79.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="91.752" y="7.64862" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="58.1836" y="20.7766" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.7766" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.3098" width="66.4121" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/sticky-dark.svg b/resources/assets/img/customizer/sticky-dark.svg
new file mode 100644
index 0000000..2762308
--- /dev/null
+++ b/resources/assets/img/customizer/sticky-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<path d="M32.7715 0.284363H98.7715V7.35103C98.7715 8.4556 97.8761 9.35103 96.7715 9.35103H34.7715C33.6669 9.35103 32.7715 8.4556 32.7715 7.35103V0.284363Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="35.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="79.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="91.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="58.1836" y="13" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="13" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="33" y="36" width="66" height="28" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/sticky.svg b/resources/assets/img/customizer/sticky.svg
new file mode 100644
index 0000000..f75d5a4
--- /dev/null
+++ b/resources/assets/img/customizer/sticky.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.568726" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.56873C0 2.35959 1.79086 0.568726 4 0.568726H28V68.5687H4C1.79086 68.5687 0 66.7779 0 64.5687V4.56873Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="25.1765" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.62823" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="36.0504" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.9244" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.7983" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<path d="M32.7715 0.284363H98.7715V7.35103C98.7715 8.4556 97.8761 9.35103 96.7715 9.35103H34.7715C33.6669 9.35103 32.7715 8.4556 32.7715 7.35103V0.284363Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="35.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="79.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="91.752" y="2.55096" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="58.1836" y="13" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="13" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="33" y="36" width="66" height="28" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/system-dark.svg b/resources/assets/img/customizer/system-dark.svg
new file mode 100644
index 0000000..ad6b9ab
--- /dev/null
+++ b/resources/assets/img/customizer/system-dark.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.0001 32H64.0001V18.25H44.0001V32ZM55.2501 34.5V37H60.2501V39.5H47.7501V37H52.7501V34.5H42.7401C42.5759 34.499 42.4136 34.4657 42.2623 34.4018C42.1111 34.338 41.974 34.2449 41.8588 34.128C41.7436 34.0111 41.6526 33.8725 41.5911 33.7204C41.5295 33.5682 41.4986 33.4054 41.5001 33.2413V17.0087C41.5001 16.3137 42.0688 15.75 42.7401 15.75H65.2601C65.9451 15.75 66.5001 16.3112 66.5001 17.0087V33.2413C66.5001 33.9363 65.9313 34.5 65.2601 34.5H55.2501V34.5Z" fill="#EAEAFF" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/system.svg b/resources/assets/img/customizer/system.svg
new file mode 100644
index 0000000..c681837
--- /dev/null
+++ b/resources/assets/img/customizer/system.svg
@@ -0,0 +1,3 @@
+<svg width="108" height="54" viewBox="0 0 108 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.0001 32H64.0001V18.25H44.0001V32ZM55.2501 34.5V37H60.2501V39.5H47.7501V37H52.7501V34.5H42.7401C42.5759 34.499 42.4136 34.4657 42.2623 34.4018C42.1111 34.338 41.974 34.2449 41.8588 34.128C41.7436 34.0111 41.6526 33.8725 41.5911 33.7204C41.5295 33.5682 41.4986 33.4054 41.5001 33.2413V17.0087C41.5001 16.3137 42.0688 15.75 42.7401 15.75H65.2601C65.9451 15.75 66.5001 16.3112 66.5001 17.0087V33.2413C66.5001 33.9363 65.9313 34.5 65.2601 34.5H55.2501V34.5Z" fill="#262B43" fill-opacity="0.9"/>
+</svg>
diff --git a/resources/assets/img/customizer/vertical-dark.svg b/resources/assets/img/customizer/vertical-dark.svg
new file mode 100644
index 0000000..f918a86
--- /dev/null
+++ b/resources/assets/img/customizer/vertical-dark.svg
@@ -0,0 +1,17 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H28V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="32.7715" y="5.09766" width="66" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="58.1836" y="20.4922" width="41" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.4922" width="19.4118" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.0254" width="66.4121" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/vertical.svg b/resources/assets/img/customizer/vertical.svg
new file mode 100644
index 0000000..6359527
--- /dev/null
+++ b/resources/assets/img/customizer/vertical.svg
@@ -0,0 +1,26 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284363" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<path d="M0 4.28436C0 2.07522 1.79086 0.284363 4 0.284363H28V68.2844H4C1.79086 68.2844 0 66.4935 0 64.2844V4.28436Z" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="24.8921" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="9" y="6.34387" width="10" height="10" rx="2" stroke="#DBDADE"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="35.7661" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="46.64" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="5" y="57.514" width="18" height="2.87399" rx="1.43699" stroke="#DBDADE"/>
+<rect x="32.7715" y="5.09766" width="66" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="35.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="79.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="85.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="91.752" y="7.36426" width="4" height="4.53333" rx="1" stroke="#DBDADE"/>
+<rect x="58.1836" y="20.4922" width="41" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="20.4922" width="19.4118" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="32.7715" y="44.0254" width="66.4121" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/wide-dark.svg b/resources/assets/img/customizer/wide-dark.svg
new file mode 100644
index 0000000..2372991
--- /dev/null
+++ b/resources/assets/img/customizer/wide-dark.svg
@@ -0,0 +1,11 @@
+<svg width="106" height="68" viewBox="0 0 106 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="6.10352e-05" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="6.81641" y="4.81329" width="92.3672" height="9.06667" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="10.3604" y="7.0799" width="5" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="76.6455" y="7.0799" width="5" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="83.6455" y="7.0799" width="5" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="90.6455" y="7.0799" width="5" height="4.53333" rx="1" fill="#8692D0" fill-opacity="0.16"/>
+<rect x="42.1602" y="20.2078" width="57.0236" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="6.81641" y="20.2078" width="26.9982" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+<rect x="6.81641" y="43.741" width="92.3672" height="18.1333" rx="2" fill="#8692D0" fill-opacity="0.08"/>
+</svg>
diff --git a/resources/assets/img/customizer/wide.svg b/resources/assets/img/customizer/wide.svg
new file mode 100644
index 0000000..76d1e53
--- /dev/null
+++ b/resources/assets/img/customizer/wide.svg
@@ -0,0 +1,11 @@
+<svg width="106" height="69" viewBox="0 0 106 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.284424" width="106" height="68" rx="4" fill="#4B465C" fill-opacity="0.02"/>
+<rect x="6.81641" y="5.09766" width="92.3672" height="9.06667" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="10.3604" y="7.36426" width="5" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="76.6455" y="7.36426" width="5" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="83.6455" y="7.36426" width="5" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="90.6455" y="7.36426" width="5" height="4.53333" rx="1" fill="#4B465C" fill-opacity="0.16"/>
+<rect x="42.1602" y="20.4922" width="57.0236" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="6.81641" y="20.4922" width="26.9982" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+<rect x="6.81641" y="44.0254" width="92.3672" height="18.1333" rx="2" fill="#4B465C" fill-opacity="0.08"/>
+</svg>