From 2ce1897212a48ae3d570048b9ba9def711dad1bd Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 29 Dec 2022 16:07:46 -0900
Subject: [PATCH] style updates

---
 frontend/components/App/HeaderDecor.vue       | 493 +++++++++++-------
 frontend/components/Base/Container.vue        |   2 +-
 .../components/global/DetailsSection/index.ts |   2 -
 .../global/{ => StatCard}/StatCard.vue        |   4 +-
 frontend/components/global/StatCard/types.ts  |   1 +
 frontend/pages/item/[id]/index.vue            |  50 +-
 frontend/pages/item/[id]/index/log.vue        |  81 ++-
 frontend/pages/items.vue                      |   2 +-
 8 files changed, 373 insertions(+), 262 deletions(-)
 delete mode 100644 frontend/components/global/DetailsSection/index.ts
 rename frontend/components/global/{ => StatCard}/StatCard.vue (90%)
 create mode 100644 frontend/components/global/StatCard/types.ts

diff --git a/frontend/components/App/HeaderDecor.vue b/frontend/components/App/HeaderDecor.vue
index a5293dd..e1b0484 100644
--- a/frontend/components/App/HeaderDecor.vue
+++ b/frontend/components/App/HeaderDecor.vue
@@ -27,6 +27,9 @@
   const primary = useCssVar("--p");
   const primaryHex = computed(() => hslToHex(...unstring(primary.value)));
 
+  const secondary = useCssVar("--s");
+  const secondaryHex = computed(() => hslToHex(...unstring(secondary.value)));
+
   const accent = useCssVar("--a");
   const accentHex = computed(() => hslToHex(...unstring(accent.value)));
 
@@ -37,322 +40,340 @@
   const base100Hex = computed(() => hslToHex(...unstring(base100.value)));
 </script>
 <template>
-  <svg viewBox="0 0 1440 237" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#a)" filter="url(#b)">
-      <path fill="#fff" d="M0-103h1440v310H0z" />
-      <path :fill="neutralHex" d="M0-103h1440v310H0z" />
-      <g clip-path="url(#c)">
+  <svg viewBox="0 0 1440 237" role="img" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_5_1510)" filter="url(#filter0_d_5_1510)">
+      <rect width="1440" height="310" transform="translate(0 -103)" fill="white" />
+      <rect y="-103" width="1440" height="310" :fill="neutralHex" />
+      <g clip-path="url(#clip1_5_1510)">
         <path
-          d="M1344.93 230.569h-75.81v-45.486h30.32c5.98 0 11.89 1.177 17.41 3.463s10.53 5.636 14.76 9.86c8.53 8.53 13.32 20.099 13.32 32.163Z"
+          d="M1344.93 230.569H1269.12V185.083H1299.44C1305.42 185.083 1311.33 186.26 1316.85 188.546C1322.37 190.832 1327.38 194.182 1331.61 198.406C1340.14 206.936 1344.93 218.505 1344.93 230.569V230.569Z"
           :fill="primaryHex"
         />
         <path
-          d="M1297.89 170.07c0-3.395-2.75-6.147-6.14-6.147-3.4 0-6.15 2.752-6.15 6.147 0 3.395 2.75 6.148 6.15 6.148 3.39 0 6.14-2.753 6.14-6.148ZM1328.45 170.07c0-3.395-2.75-6.147-6.15-6.147-3.39 0-6.15 2.752-6.15 6.147 0 3.395 2.76 6.148 6.15 6.148 3.4 0 6.15-2.753 6.15-6.148Z"
+          d="M1297.89 170.07C1297.89 166.675 1295.14 163.923 1291.75 163.923C1288.35 163.923 1285.6 166.675 1285.6 170.07C1285.6 173.465 1288.35 176.218 1291.75 176.218C1295.14 176.218 1297.89 173.465 1297.89 170.07Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M1328.45 170.07C1328.45 166.675 1325.7 163.923 1322.3 163.923C1318.91 163.923 1316.15 166.675 1316.15 170.07C1316.15 173.465 1318.91 176.218 1322.3 176.218C1325.7 176.218 1328.45 173.465 1328.45 170.07Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#d)">
+      <g clip-path="url(#clip2_5_1510)">
         <path
-          d="M1401.78 60c7.5 0 14.83 2.2231 21.06 6.388 6.24 4.165 11.09 10.0848 13.96 17.0109 2.87 6.9261 3.62 14.5474 2.16 21.9001-1.46 7.353-5.07 14.107-10.37 19.408-5.3 5.301-12.06 8.911-19.41 10.373-7.35 1.463-14.98.712-21.9-2.157-6.93-2.869-12.85-7.727-17.01-13.96-4.17-6.234-6.39-13.562-6.39-21.0587V60h37.9Z"
+          d="M1401.78 60C1409.28 60 1416.61 62.2231 1422.84 66.388C1429.08 70.553 1433.93 76.4728 1436.8 83.3989C1439.67 90.325 1440.42 97.9463 1438.96 105.299C1437.5 112.652 1433.89 119.406 1428.59 124.707C1423.29 130.008 1416.53 133.618 1409.18 135.08C1401.83 136.543 1394.2 135.792 1387.28 132.923C1380.35 130.054 1374.43 125.196 1370.27 118.963C1366.1 112.729 1363.88 105.401 1363.88 97.9043V60H1401.78Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#e)">
-        <path d="M1269.12 135.809h75.81V60h-75.81v75.809Z" :fill="accentHex" />
+      <g clip-path="url(#clip3_5_1510)">
+        <path d="M1269.12 135.809H1344.93V60H1269.12V135.809Z" :fill="accentHex" />
       </g>
-      <g clip-path="url(#f)">
+      <g clip-path="url(#clip4_5_1510)">
         <path
-          d="M1250.17 97.9043c0 7.4967-2.22 14.8247-6.39 21.0587-4.16 6.233-10.08 11.091-17.01 13.96-6.93 2.869-14.55 3.62-21.9 2.157-7.35-1.462-14.11-5.072-19.41-10.373-5.3-5.301-8.91-12.055-10.37-19.408-1.46-7.3527-.71-14.974 2.16-21.9001 2.86-6.9261 7.72-12.8459 13.96-17.0109 6.23-4.1649 13.56-6.388 21.05-6.388h37.91v37.9043Z"
-          fill="#B4D9AE"
+          d="M1250.17 97.9043C1250.17 105.401 1247.95 112.729 1243.78 118.963C1239.62 125.196 1233.7 130.054 1226.77 132.923C1219.84 135.792 1212.22 136.543 1204.87 135.08C1197.52 133.618 1190.76 130.008 1185.46 124.707C1180.16 119.406 1176.55 112.652 1175.09 105.299C1173.63 97.9463 1174.38 90.325 1177.25 83.3989C1180.11 76.4728 1184.97 70.553 1191.21 66.388C1197.44 62.2231 1204.77 60 1212.26 60H1250.17V97.9043Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#g)">
-        <path d="M1079.6 135.809h75.81V60h-75.81v75.809Z" :fill="accentHex" />
+      <g clip-path="url(#clip5_5_1510)">
+        <path d="M1079.6 135.809H1155.41V60H1079.6V135.809Z" :fill="accentHex" />
       </g>
-      <g clip-path="url(#h)">
+      <g clip-path="url(#clip6_5_1510)">
         <path
-          d="M890.08 60h75.808v45.485h-30.323c-5.973 0-11.888-1.176-17.406-3.462-5.519-2.2861-10.533-5.6365-14.757-9.8602C894.872 83.6327 890.08 72.0634 890.08 60Z"
+          d="M890.08 60L965.888 60V105.485H935.565C929.592 105.485 923.677 104.309 918.159 102.023C912.64 99.7369 907.626 96.3865 903.402 92.1628C894.872 83.6327 890.08 72.0634 890.08 60V60Z"
           :fill="primaryHex"
         />
         <path
-          d="M937.114 120.498c0 3.395 2.752 6.148 6.147 6.148 3.395 0 6.147-2.753 6.147-6.148 0-3.395-2.752-6.147-6.147-6.147-3.395 0-6.147 2.752-6.147 6.147ZM906.56 120.498c0 3.395 2.752 6.148 6.147 6.148 3.395 0 6.148-2.753 6.148-6.148 0-3.395-2.753-6.147-6.148-6.147-3.395 0-6.147 2.752-6.147 6.147Z"
+          d="M937.114 120.498C937.114 123.893 939.866 126.646 943.261 126.646C946.656 126.646 949.408 123.893 949.408 120.498C949.408 117.103 946.656 114.351 943.261 114.351C939.866 114.351 937.114 117.103 937.114 120.498Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M906.56 120.498C906.56 123.893 909.312 126.646 912.707 126.646C916.102 126.646 918.855 123.893 918.855 120.498C918.855 117.103 916.102 114.351 912.707 114.351C909.312 114.351 906.56 117.103 906.56 120.498Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#i)">
-        <path d="M795.32 154.76v75.809h75.808V154.76H795.32Z" :fill="accentHex" />
+      <g clip-path="url(#clip7_5_1510)">
+        <path d="M795.32 154.76V230.569H871.128V154.76H795.32Z" :fill="accentHex" />
       </g>
-      <g clip-path="url(#j)">
+      <g clip-path="url(#clip8_5_1510)">
         <path
-          d="M776.368 154.76v75.809h-45.485v-30.324c0-5.973 1.177-11.888 3.463-17.406 2.286-5.519 5.636-10.533 9.86-14.757 8.53-8.53 20.099-13.322 32.162-13.322Z"
+          d="M776.368 154.76V230.569H730.883V200.245C730.883 194.272 732.06 188.357 734.346 182.839C736.632 177.32 739.982 172.306 744.206 168.082C752.736 159.552 764.305 154.76 776.368 154.76V154.76Z"
           :fill="primaryHex"
         />
         <path
-          d="M715.87 201.794c-3.395 0-6.147 2.752-6.147 6.147 0 3.395 2.752 6.148 6.147 6.148 3.395 0 6.148-2.753 6.148-6.148 0-3.395-2.753-6.147-6.148-6.147ZM715.87 171.24c-3.395 0-6.147 2.752-6.147 6.147 0 3.395 2.752 6.148 6.147 6.148 3.395 0 6.148-2.753 6.148-6.148 0-3.395-2.753-6.147-6.148-6.147Z"
+          d="M715.87 201.794C712.475 201.794 709.723 204.546 709.723 207.941C709.723 211.336 712.475 214.089 715.87 214.089C719.265 214.089 722.018 211.336 722.018 207.941C722.018 204.546 719.265 201.794 715.87 201.794Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M715.87 171.24C712.475 171.24 709.723 173.992 709.723 177.387C709.723 180.782 712.475 183.535 715.87 183.535C719.265 183.535 722.018 180.782 722.018 177.387C722.018 173.992 719.265 171.24 715.87 171.24Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#k)">
+      <g clip-path="url(#clip9_5_1510)">
         <path
-          d="M871.128 97.9043c0 7.4967-2.223 14.8247-6.388 21.0587-4.165 6.233-10.084 11.091-17.01 13.96-6.927 2.869-14.548 3.62-21.901 2.157-7.352-1.462-14.106-5.072-19.407-10.373-5.301-5.301-8.911-12.055-10.374-19.408-1.462-7.3527-.712-14.974 2.157-21.9001 2.869-6.9261 7.727-12.8459 13.961-17.0109C818.399 62.2231 825.727 60 833.224 60h37.904v37.9043Z"
+          d="M871.128 97.9043C871.128 105.401 868.905 112.729 864.74 118.963C860.575 125.196 854.656 130.054 847.73 132.923C840.803 135.792 833.182 136.543 825.829 135.08C818.477 133.618 811.723 130.008 806.422 124.707C801.121 119.406 797.511 112.652 796.048 105.299C794.586 97.9463 795.336 90.325 798.205 83.3989C801.074 76.4728 805.932 70.553 812.166 66.388C818.399 62.2231 825.727 60 833.224 60H871.128V97.9043Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#l)">
+      <g clip-path="url(#clip10_5_1510)">
         <path
-          d="M679.334 184.193c-8.907 0-8.907 16.943-17.815 16.943-8.908 0-8.904-16.943-17.807-16.943-8.904 0-8.91 16.943-17.82 16.943s-8.908-16.943-17.818-16.943"
+          d="M679.334 184.193C670.427 184.193 670.427 201.136 661.519 201.136C652.611 201.136 652.615 184.193 643.712 184.193C634.808 184.193 634.802 201.136 625.892 201.136C616.982 201.136 616.984 184.193 608.074 184.193"
           stroke="#F6FAFB"
           stroke-width="4.54851"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
       </g>
-      <g clip-path="url(#m)">
+      <g clip-path="url(#clip11_5_1510)">
         <path
-          d="M605.8 97.9043c0-7.4968 2.223-14.8252 6.388-21.0585 4.165-6.2333 10.085-11.0916 17.011-13.9605 6.926-2.8689 14.547-3.6195 21.9-2.157 7.353 1.4626 14.107 5.0726 19.408 10.3736 5.301 5.301 8.911 12.0549 10.373 19.4076 1.463 7.3527.712 14.9735-2.157 21.9005-2.869 6.926-7.727 12.846-13.96 17.01-6.234 4.165-13.562 6.389-21.059 6.389H605.8V97.9043Z"
+          d="M605.8 97.9043C605.8 90.4075 608.023 83.0791 612.188 76.8458C616.353 70.6125 622.273 65.7542 629.199 62.8853C636.125 60.0164 643.746 59.2658 651.099 60.7283C658.452 62.1909 665.206 65.8009 670.507 71.1019C675.808 76.4029 679.418 83.1568 680.88 90.5095C682.343 97.8622 681.592 105.483 678.723 112.41C675.854 119.336 670.996 125.256 664.763 129.42C658.529 133.585 651.201 135.809 643.704 135.809H605.8V97.9043Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#n)">
+      <g clip-path="url(#clip12_5_1510)">
         <path
-          d="M511.04 135.809V60h45.485v30.3234c0 5.9732-1.176 11.8876-3.462 17.4066-2.286 5.518-5.637 10.533-9.86 14.756-8.53 8.53-20.1 13.323-32.163 13.323Z"
+          d="M511.04 135.809V60L556.525 60V90.3234C556.525 96.2966 555.349 102.211 553.063 107.73C550.777 113.248 547.426 118.263 543.203 122.486C534.673 131.016 523.103 135.809 511.04 135.809V135.809Z"
           :fill="primaryHex"
         />
         <path
-          d="M571.538 88.7746c3.395 0 6.147-2.7522 6.147-6.1473 0-3.395-2.752-6.1473-6.147-6.1473-3.395 0-6.147 2.7523-6.147 6.1473 0 3.3951 2.752 6.1473 6.147 6.1473ZM571.538 119.328c3.395 0 6.147-2.752 6.147-6.147 0-3.395-2.752-6.147-6.147-6.147-3.395 0-6.147 2.752-6.147 6.147 0 3.395 2.752 6.147 6.147 6.147Z"
+          d="M571.538 88.7746C574.933 88.7746 577.685 86.0224 577.685 82.6273C577.685 79.2323 574.933 76.48 571.538 76.48C568.143 76.48 565.391 79.2323 565.391 82.6273C565.391 86.0224 568.143 88.7746 571.538 88.7746Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M571.538 119.328C574.933 119.328 577.685 116.576 577.685 113.181C577.685 109.786 574.933 107.034 571.538 107.034C568.143 107.034 565.391 109.786 565.391 113.181C565.391 116.576 568.143 119.328 571.538 119.328Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#o)">
+      <g clip-path="url(#clip13_5_1510)">
         <path
-          d="M489.814 184.193c-8.907 0-8.907 16.943-17.815 16.943-8.908 0-8.904-16.943-17.807-16.943-8.904 0-8.91 16.943-17.82 16.943s-8.908-16.943-17.818-16.943"
+          d="M489.814 184.193C480.907 184.193 480.907 201.136 471.999 201.136C463.091 201.136 463.095 184.193 454.192 184.193C445.288 184.193 445.282 201.136 436.372 201.136C427.462 201.136 427.464 184.193 418.554 184.193"
           stroke="#F6FAFB"
           stroke-width="4.54851"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
       </g>
-      <g clip-path="url(#p)">
+      <g clip-path="url(#clip14_5_1510)">
         <path
-          d="M454.184 135.809c-7.497 0-14.825-2.224-21.058-6.389-6.234-4.164-11.092-10.084-13.961-17.01-2.869-6.927-3.619-14.5478-2.157-21.9005 1.463-7.3527 5.073-14.1066 10.374-19.4076 5.301-5.301 12.055-8.911 19.407-10.3736 7.353-1.4625 14.974-.7119 21.9 2.157 6.927 2.8689 12.846 7.7272 17.011 13.9605 4.165 6.2333 6.388 13.5617 6.388 21.0585v37.9047h-37.904Z"
-          fill="#B4D9AE"
+          d="M454.184 135.809C446.687 135.809 439.359 133.585 433.126 129.42C426.892 125.256 422.034 119.336 419.165 112.41C416.296 105.483 415.546 97.8622 417.008 90.5095C418.471 83.1568 422.081 76.4029 427.382 71.1019C432.683 65.8009 439.437 62.1909 446.789 60.7283C454.142 59.2658 461.763 60.0164 468.689 62.8853C475.616 65.7542 481.535 70.6125 485.7 76.8458C489.865 83.0791 492.088 90.4075 492.088 97.9043V135.809H454.184Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#q)">
+      <g clip-path="url(#clip15_5_1510)">
         <path
-          d="M132 230.569V154.76h45.485v30.323c0 5.974-1.176 11.888-3.462 17.407-2.286 5.518-5.636 10.533-9.86 14.756-8.53 8.53-20.1 13.323-32.163 13.323Z"
+          d="M132 230.569V154.76H177.485V185.083C177.485 191.057 176.309 196.971 174.023 202.49C171.737 208.008 168.387 213.023 164.163 217.246C155.633 225.776 144.063 230.569 132 230.569V230.569Z"
           :fill="primaryHex"
         />
         <path
-          d="M192.498 183.535c3.395 0 6.148-2.753 6.148-6.148 0-3.395-2.753-6.147-6.148-6.147-3.395 0-6.147 2.752-6.147 6.147 0 3.395 2.752 6.148 6.147 6.148ZM192.498 214.089c3.395 0 6.148-2.753 6.148-6.148 0-3.395-2.753-6.147-6.148-6.147-3.395 0-6.147 2.752-6.147 6.147 0 3.395 2.752 6.148 6.147 6.148Z"
+          d="M192.498 183.535C195.893 183.535 198.646 180.782 198.646 177.387C198.646 173.992 195.893 171.24 192.498 171.24C189.103 171.24 186.351 173.992 186.351 177.387C186.351 180.782 189.103 183.535 192.498 183.535Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M192.498 214.089C195.893 214.089 198.646 211.336 198.646 207.941C198.646 204.546 195.893 201.794 192.498 201.794C189.103 201.794 186.351 204.546 186.351 207.941C186.351 211.336 189.103 214.089 192.498 214.089Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#r)">
+      <g clip-path="url(#clip16_5_1510)">
         <path
-          d="M302.569 135.809H226.76V90.3234h30.323c5.974 0 11.888 1.1765 17.407 3.4624 5.518 2.2858 10.533 5.6362 14.756 9.8602 8.53 8.53 13.323 20.099 13.323 32.163Z"
+          d="M302.569 135.809H226.76V90.3234H257.083C263.057 90.3234 268.971 91.4999 274.49 93.7858C280.008 96.0716 285.023 99.422 289.246 103.646C297.776 112.176 302.569 123.745 302.569 135.809V135.809Z"
           :fill="primaryHex"
         />
         <path
-          d="M255.535 75.3103c0-3.3951-2.753-6.1473-6.148-6.1473-3.395 0-6.147 2.7522-6.147 6.1473 0 3.3951 2.752 6.1473 6.147 6.1473 3.395 0 6.148-2.7522 6.148-6.1473ZM286.089 75.3103c0-3.3951-2.753-6.1473-6.148-6.1473-3.395 0-6.147 2.7522-6.147 6.1473 0 3.3951 2.752 6.1473 6.147 6.1473 3.395 0 6.148-2.7522 6.148-6.1473Z"
+          d="M255.535 75.3103C255.535 71.9152 252.782 69.163 249.387 69.163C245.992 69.163 243.24 71.9152 243.24 75.3103C243.24 78.7054 245.992 81.4576 249.387 81.4576C252.782 81.4576 255.535 78.7054 255.535 75.3103Z"
+          :fill="base100Hex"
+        />
+        <path
+          d="M286.089 75.3103C286.089 71.9152 283.336 69.163 279.941 69.163C276.546 69.163 273.794 71.9152 273.794 75.3103C273.794 78.7054 276.546 81.4576 279.941 81.4576C283.336 81.4576 286.089 78.7054 286.089 75.3103Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#s)">
-        <path d="M207.809 60H132v75.809h75.809V60Z" :fill="accentHex" />
+      <g clip-path="url(#clip17_5_1510)">
+        <path d="M207.809 60L132 60V135.809H207.809V60Z" :fill="accentHex" />
       </g>
-      <g clip-path="url(#t)">
-        <path d="M502-31v75.8085h75.809V-31H502Z" :fill="accentHex" />
+      <g clip-path="url(#clip18_5_1510)">
+        <path d="M502 -31V44.8085L577.809 44.8085V-31L502 -31Z" :fill="accentHex" />
       </g>
-      <g clip-path="url(#u)">
+      <g clip-path="url(#clip19_5_1510)">
         <path
-          d="M65.9043-31.24c7.4967 0 14.8251 2.223 21.0584 6.388 6.2334 4.165 11.0916 10.0848 13.9603 17.01092 2.869 6.926094 3.62 14.54738 2.157 21.90008-1.462 7.3527-5.0724 14.1066-10.3734 19.4076-5.301 5.301-12.0549 8.911-19.4076 10.3736-7.3527 1.4625-14.974.7119-21.9001-2.157-6.9261-2.8689-12.8459-7.7272-17.0109-13.9605C30.2231 21.4894 28 14.161 28 6.66425V-31.24h37.9043Z"
-          fill="#B4D9AE"
+          d="M65.9043 -31.24C73.401 -31.24 80.7294 -29.017 86.9627 -24.852C93.1961 -20.687 98.0543 -14.7672 100.923 -7.84108C103.792 -0.914986 104.543 6.7063 103.08 14.059C101.618 21.4117 98.0076 28.1656 92.7066 33.4666C87.4056 38.7676 80.6517 42.3776 73.299 43.8402C65.9463 45.3027 58.325 44.5521 51.3989 41.6832C44.4728 38.8143 38.553 33.956 34.388 27.7227C30.2231 21.4894 28 14.161 28 6.66425L28 -31.24L65.9043 -31.24Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#v)">
+      <g clip-path="url(#clip20_5_1510)">
         <path
-          d="M160.664 44.5685c-7.496 0-14.825-2.223-21.058-6.388-6.234-4.165-11.092-10.0848-13.961-17.0109-2.869-6.9261-3.619-14.54737-2.157-21.900078 1.463-7.352702 5.073-14.106622 10.374-19.407622s12.055-8.911 19.408-10.3736c7.352-1.4625 14.974-.7119 21.9 2.157 6.926 2.8689 12.846 7.7272 17.011 13.9605 4.164 6.23332 6.388 13.561722 6.388 21.05848V44.5685h-37.905Z"
-          fill="#B4D9AE"
+          d="M160.664 44.5685C153.168 44.5685 145.839 42.3455 139.606 38.1805C133.372 34.0155 128.514 28.0957 125.645 21.1696C122.776 14.2435 122.026 6.62223 123.488 -0.730478C124.951 -8.08318 128.561 -14.8371 133.862 -20.1381C139.163 -25.4391 145.917 -29.0491 153.27 -30.5117C160.622 -31.9742 168.244 -31.2236 175.17 -28.3547C182.096 -25.4858 188.016 -20.6275 192.181 -14.3942C196.345 -8.16088 198.569 -0.832478 198.569 6.66428V44.5685H160.664Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#w)">
+      <g clip-path="url(#clip21_5_1510)">
         <path
-          d="M388.089 6.66425c0 7.49675-2.224 14.82515-6.388 21.05845-4.165 6.2333-10.085 11.0916-17.011 13.9605-6.926 2.8689-14.548 3.6195-21.9 2.157-7.353-1.4626-14.107-5.0726-19.408-10.3736-5.301-5.301-8.911-12.0549-10.374-19.4076-1.462-7.3527-.712-14.973986 2.157-21.90008 2.869-6.92612 7.728-12.84592 13.961-17.01092 6.233-4.165 13.562-6.388 21.058-6.388h37.905V6.66425Z"
+          d="M388.089 6.66425C388.089 14.161 385.865 21.4894 381.701 27.7227C377.536 33.956 371.616 38.8143 364.69 41.6832C357.764 44.5521 350.142 45.3027 342.79 43.8402C335.437 42.3776 328.683 38.7676 323.382 33.4666C318.081 28.1656 314.471 21.4117 313.008 14.059C311.546 6.7063 312.296 -0.914986 315.165 -7.84108C318.034 -14.7672 322.893 -20.687 329.126 -24.852C335.359 -29.017 342.688 -31.24 350.184 -31.24L388.089 -31.24V6.66425Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#x)">
+      <g clip-path="url(#clip22_5_1510)">
         <path
-          d="M444.944-31.24c7.497 0 14.825 2.223 21.059 6.388 6.233 4.165 11.091 10.0848 13.96 17.01092 2.869 6.926094 3.62 14.54738 2.157 21.90008-1.462 7.3527-5.072 14.1066-10.373 19.4076-5.301 5.301-12.055 8.911-19.408 10.3736-7.353 1.4625-14.974.7119-21.9-2.157-6.926-2.8689-12.846-7.7272-17.011-13.9605-4.165-6.2333-6.388-13.5617-6.388-21.05845V-31.24h37.904Z"
-          fill="#B4D9AE"
+          d="M444.944 -31.24C452.441 -31.24 459.769 -29.017 466.003 -24.852C472.236 -20.687 477.094 -14.7672 479.963 -7.84108C482.832 -0.914986 483.583 6.7063 482.12 14.059C480.658 21.4117 477.048 28.1656 471.747 33.4666C466.446 38.7676 459.692 42.3776 452.339 43.8402C444.986 45.3027 437.365 44.5521 430.439 41.6832C423.513 38.8143 417.593 33.956 413.428 27.7227C409.263 21.4894 407.04 14.161 407.04 6.66425V-31.24L444.944 -31.24Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#y)">
+      <g clip-path="url(#clip23_5_1510)">
         <path
-          d="M634.464 44.5685c-7.496 0-14.825-2.223-21.058-6.388-6.234-4.165-11.092-10.0848-13.961-17.0109-2.869-6.9261-3.619-14.54737-2.157-21.900078 1.463-7.352702 5.073-14.106622 10.374-19.407622s12.055-8.911 19.408-10.3736c7.352-1.4625 14.973-.7119 21.9 2.157 6.926 2.8689 12.846 7.7272 17.01 13.9605 4.165 6.23332 6.389 13.561722 6.389 21.05848V44.5685h-37.905Z"
-          fill="#B4D9AE"
+          d="M634.464 44.5685C626.968 44.5685 619.639 42.3455 613.406 38.1805C607.172 34.0155 602.314 28.0957 599.445 21.1696C596.576 14.2435 595.826 6.62223 597.288 -0.730478C598.751 -8.08318 602.361 -14.8371 607.662 -20.1381C612.963 -25.4391 619.717 -29.0491 627.07 -30.5117C634.422 -31.9742 642.043 -31.2236 648.97 -28.3547C655.896 -25.4858 661.816 -20.6275 665.98 -14.3942C670.145 -8.16088 672.369 -0.832478 672.369 6.66428V44.5685H634.464Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#z)">
+      <g clip-path="url(#clip24_5_1510)">
         <path
-          d="M823.984-31.24c7.497 0 14.825 2.223 21.059 6.388 6.233 4.165 11.091 10.0848 13.96 17.01092 2.869 6.926094 3.62 14.54738 2.157 21.90008-1.462 7.3527-5.072 14.1066-10.373 19.4076-5.301 5.301-12.055 8.911-19.408 10.3736-7.353 1.4625-14.974.7119-21.9-2.157-6.926-2.8689-12.846-7.7272-17.011-13.9605-4.165-6.2333-6.388-13.5617-6.388-21.05845V-31.24h37.904Z"
-          fill="#B4D9AE"
+          d="M823.984 -31.24C831.481 -31.24 838.809 -29.017 845.043 -24.852C851.276 -20.687 856.134 -14.7672 859.003 -7.84108C861.872 -0.914986 862.623 6.7063 861.16 14.059C859.698 21.4117 856.088 28.1656 850.787 33.4666C845.486 38.7676 838.732 42.3776 831.379 43.8402C824.026 45.3027 816.405 44.5521 809.479 41.6832C802.553 38.8143 796.633 33.956 792.468 27.7227C788.303 21.4894 786.08 14.161 786.08 6.66425V-31.24L823.984 -31.24Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#A)">
+      <g clip-path="url(#clip25_5_1510)">
         <path
-          d="M956.648-31.24v75.8085h-45.485V14.2451c0-5.97318 1.177-11.88788 3.463-17.40639 2.286-5.5185 5.636-10.53271 9.86-14.75641 8.53-8.5301 20.099-13.3223 32.162-13.3223Z"
+          d="M956.648 -31.24V44.5685L911.163 44.5685V14.2451C911.163 8.27192 912.34 2.35722 914.626 -3.16129C916.912 -8.67979 920.262 -13.694 924.486 -17.9177C933.016 -26.4478 944.585 -31.24 956.648 -31.24V-31.24Z"
           :fill="primaryHex"
         />
         <path
-          d="M896.15 15.7939c-3.395 0-6.147 2.7522-6.147 6.1473 0 3.3951 2.752 6.1473 6.147 6.1473 3.395 0 6.148-2.7522 6.148-6.1473 0-3.3951-2.753-6.1473-6.148-6.1473Z"
-          fill="#B4D9AE"
+          d="M896.15 15.7939C892.755 15.7939 890.003 18.5461 890.003 21.9412C890.003 25.3363 892.755 28.0885 896.15 28.0885C899.545 28.0885 902.298 25.3363 902.298 21.9412C902.298 18.5461 899.545 15.7939 896.15 15.7939Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#B)">
+      <g clip-path="url(#clip26_5_1510)">
         <path
-          d="M1013.5-31.24c7.5 0 14.83 2.223 21.06 6.388 6.24 4.165 11.09 10.0848 13.96 17.01092 2.87 6.926094 3.62 14.54738 2.16 21.90008-1.46 7.3527-5.07 14.1066-10.37 19.4076-5.3 5.301-12.06 8.911-19.41 10.3736-7.35 1.4625-14.97.7119-21.901-2.157-6.926-2.8689-12.846-7.7272-17.011-13.9605-4.165-6.2333-6.388-13.5617-6.388-21.05845V-31.24h37.9Z"
-          fill="#B4D9AE"
+          d="M1013.5 -31.24C1021 -31.24 1028.33 -29.017 1034.56 -24.852C1040.8 -20.687 1045.65 -14.7672 1048.52 -7.84108C1051.39 -0.914986 1052.14 6.7063 1050.68 14.059C1049.22 21.4117 1045.61 28.1656 1040.31 33.4666C1035.01 38.7676 1028.25 42.3776 1020.9 43.8402C1013.55 45.3027 1005.93 44.5521 998.999 41.6832C992.073 38.8143 986.153 33.956 981.988 27.7227C977.823 21.4894 975.6 14.161 975.6 6.66425V-31.24L1013.5 -31.24Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#C)">
+      <g clip-path="url(#clip27_5_1510)">
         <path
-          d="M1070.36 44.5685V-31.24h45.49V-.916588c0 5.973188-1.18 11.887888-3.47 17.406388-2.28 5.5185-5.63 10.5328-9.86 14.7564-8.53 8.5302-20.1 13.3223-32.16 13.3223Z"
+          d="M1070.36 44.5685V-31.24H1115.85V-0.916588C1115.85 5.0566 1114.67 10.9713 1112.38 16.4898C1110.1 22.0083 1106.75 27.0226 1102.52 31.2462C1093.99 39.7764 1082.42 44.5685 1070.36 44.5685V44.5685Z"
           :fill="primaryHex"
         />
         <path
-          d="M1130.86 28.0885c3.39 0 6.15-2.7522 6.15-6.1473 0-3.3951-2.76-6.1473-6.15-6.1473-3.4 0-6.15 2.7522-6.15 6.1473 0 3.3951 2.75 6.1473 6.15 6.1473Z"
-          fill="#B4D9AE"
+          d="M1130.86 28.0885C1134.25 28.0885 1137.01 25.3363 1137.01 21.9412C1137.01 18.5461 1134.25 15.7939 1130.86 15.7939C1127.46 15.7939 1124.71 18.5461 1124.71 21.9412C1124.71 25.3363 1127.46 28.0885 1130.86 28.0885Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#D)">
+      <g clip-path="url(#clip28_5_1510)">
         <path
-          d="M1203.02 44.5685c-7.49 0-14.82-2.223-21.05-6.388-6.24-4.165-11.1-10.0848-13.96-17.0109-2.87-6.9261-3.62-14.54737-2.16-21.900078 1.46-7.352702 5.07-14.106622 10.37-19.407622 5.3-5.301 12.06-8.911 19.41-10.3736 7.35-1.4625 14.97-.7119 21.9 2.157 6.93 2.8689 12.85 7.7272 17.01 13.9605 4.17 6.23332 6.39 13.561722 6.39 21.05848V44.5685h-37.91Z"
+          d="M1203.02 44.5685C1195.53 44.5685 1188.2 42.3455 1181.97 38.1805C1175.73 34.0155 1170.87 28.0957 1168.01 21.1696C1165.14 14.2435 1164.39 6.62223 1165.85 -0.730478C1167.31 -8.08318 1170.92 -14.8371 1176.22 -20.1381C1181.52 -25.4391 1188.28 -29.0491 1195.63 -30.5117C1202.98 -31.9742 1210.6 -31.2236 1217.53 -28.3547C1224.46 -25.4858 1230.38 -20.6275 1234.54 -14.3942C1238.71 -8.16088 1240.93 -0.832478 1240.93 6.66428V44.5685H1203.02Z"
           :fill="base100Hex"
         />
       </g>
-      <g clip-path="url(#E)">
+      <g clip-path="url(#clip29_5_1510)">
         <path
-          d="M1335.69-31.24v75.8085h-45.49V14.2451c0-5.97318 1.18-11.88788 3.47-17.40639 2.28-5.5185 5.63-10.53271 9.86-14.75641 8.53-8.5301 20.1-13.3223 32.16-13.3223Z"
+          d="M1335.69 -31.24V44.5685L1290.2 44.5685V14.2451C1290.2 8.27192 1291.38 2.35722 1293.67 -3.16129C1295.95 -8.67979 1299.3 -13.694 1303.53 -17.9177C1312.06 -26.4478 1323.63 -31.24 1335.69 -31.24V-31.24Z"
           :fill="primaryHex"
         />
         <path
-          d="M1275.19 15.7939c-3.39 0-6.15 2.7522-6.15 6.1473 0 3.3951 2.76 6.1473 6.15 6.1473 3.4 0 6.15-2.7522 6.15-6.1473 0-3.3951-2.75-6.1473-6.15-6.1473Z"
-          fill="#B4D9AE"
+          d="M1275.19 15.7939C1271.8 15.7939 1269.04 18.5461 1269.04 21.9412C1269.04 25.3363 1271.8 28.0885 1275.19 28.0885C1278.59 28.0885 1281.34 25.3363 1281.34 21.9412C1281.34 18.5461 1278.59 15.7939 1275.19 15.7939Z"
+          :fill="secondaryHex"
         />
       </g>
-      <g clip-path="url(#F)">
+      <g clip-path="url(#clip30_5_1510)">
         <path
-          d="M292.808-31v75.8085h-45.485V14.4851c0-5.97316 1.177-11.88786 3.463-17.40636 2.286-5.51851 5.636-10.53274 9.86-14.75644C269.176-26.2078 280.745-31 292.808-31Z"
+          d="M292.808 -31V44.8085L247.323 44.8085V14.4851C247.323 8.51194 248.5 2.59724 250.786 -2.92126C253.072 -8.43977 256.422 -13.454 260.646 -17.6777C269.176 -26.2078 280.745 -31 292.808 -31V-31Z"
           :fill="primaryHex"
         />
         <path
-          d="M232.31 16.0339c-3.395 0-6.147 2.7522-6.147 6.1473 0 3.3951 2.752 6.1473 6.147 6.1473 3.395 0 6.148-2.7522 6.148-6.1473 0-3.3951-2.753-6.1473-6.148-6.1473Z"
-          fill="#B4D9AE"
+          d="M232.31 16.0339C228.915 16.0339 226.163 18.7861 226.163 22.1812C226.163 25.5763 228.915 28.3285 232.31 28.3285C235.705 28.3285 238.458 25.5763 238.458 22.1812C238.458 18.7861 235.705 16.0339 232.31 16.0339Z"
+          :fill="secondaryHex"
         />
       </g>
       <path
-        d="M937.07 193v-40.557h9.802v16.278h15.982v-16.278h9.782V193h-9.782v-16.298h-15.982V193h-9.802Zm55.914.574c-3.195 0-5.941-.653-8.238-1.96-2.284-1.32-4.046-3.156-5.287-5.506-1.228-2.363-1.842-5.102-1.842-8.218 0-3.129.614-5.868 1.842-8.218 1.241-2.364 3.003-4.199 5.287-5.506 2.297-1.32 5.043-1.98 8.238-1.98 3.195 0 5.935.66 8.216 1.98 2.3 1.307 4.06 3.142 5.29 5.506 1.24 2.35 1.86 5.089 1.86 8.218 0 3.116-.62 5.855-1.86 8.218-1.23 2.35-2.99 4.186-5.29 5.506-2.281 1.307-5.021 1.96-8.216 1.96Zm.06-7.307c1.162 0 2.145-.357 2.95-1.07.806-.712 1.42-1.703 1.842-2.97.436-1.267.654-2.733.654-4.396 0-1.69-.218-3.169-.654-4.436-.422-1.268-1.036-2.258-1.842-2.971-.805-.713-1.788-1.069-2.95-1.069-1.202 0-2.218.356-3.05 1.069-.819.713-1.446 1.703-1.881 2.971-.423 1.267-.634 2.746-.634 4.436 0 1.663.211 3.129.634 4.396.435 1.267 1.062 2.258 1.881 2.97.832.713 1.848 1.07 3.05 1.07ZM1013.31 193v-30.418h9.21v5.585h.34c.63-1.849 1.7-3.308 3.21-4.377 1.5-1.069 3.3-1.604 5.38-1.604 2.11 0 3.92.541 5.43 1.624 1.5 1.082 2.46 2.535 2.87 4.357h.32c.56-1.809 1.67-3.255 3.32-4.337 1.65-1.096 3.6-1.644 5.85-1.644 2.87 0 5.21.924 7.01 2.772 1.79 1.836 2.69 4.357 2.69 7.565V193h-9.68v-18.259c0-1.518-.39-2.673-1.17-3.465-.78-.806-1.79-1.208-3.03-1.208-1.34 0-2.39.435-3.15 1.307-.75.858-1.13 2.013-1.13 3.465V193h-9.31v-18.358c0-1.412-.38-2.528-1.15-3.346-.76-.819-1.77-1.228-3.03-1.228-.84 0-1.59.204-2.23.614-.65.396-1.16.963-1.53 1.703-.36.739-.53 1.61-.53 2.614V193h-9.69Zm65.85.574c-3.18 0-5.93-.627-8.24-1.881-2.3-1.267-4.07-3.07-5.31-5.406-1.22-2.35-1.84-5.143-1.84-8.377 0-3.142.62-5.888 1.86-8.238 1.24-2.364 2.99-4.199 5.25-5.506 2.26-1.32 4.92-1.98 7.98-1.98 2.17 0 4.15.337 5.94 1.01 1.8.673 3.35 1.67 4.66 2.99 1.3 1.32 2.32 2.951 3.05 4.892.72 1.927 1.09 4.139 1.09 6.634v2.416h-26.44v-5.624h17.42c-.01-1.03-.25-1.948-.73-2.753-.47-.805-1.13-1.432-1.96-1.881-.82-.462-1.76-.693-2.83-.693-1.08 0-2.05.244-2.91.732-.86.476-1.54 1.129-2.04 1.961-.5.818-.77 1.749-.79 2.792v5.723c0 1.241.24 2.33.73 3.268.49.924 1.18 1.643 2.08 2.158.9.515 1.97.773 3.21.773.86 0 1.63-.119 2.33-.357.7-.237 1.3-.587 1.81-1.049.5-.462.87-1.03 1.12-1.703l8.9.257c-.37 1.994-1.19 3.73-2.44 5.208-1.24 1.466-2.87 2.608-4.89 3.426-2.02.806-4.36 1.208-7.01 1.208Zm19.38-.574v-40.557h16.91c3.04 0 5.58.429 7.63 1.287 2.06.858 3.6 2.059 4.63 3.604 1.04 1.545 1.57 3.334 1.57 5.367 0 1.545-.33 2.924-.97 4.139-.65 1.201-1.54 2.198-2.68 2.99-1.13.792-2.45 1.347-3.94 1.664v.396c1.64.079 3.15.521 4.54 1.326 1.4.806 2.52 1.928 3.36 3.367.85 1.426 1.27 3.116 1.27 5.07 0 2.178-.55 4.125-1.66 5.842-1.11 1.703-2.72 3.049-4.82 4.04-2.09.977-4.64 1.465-7.64 1.465h-18.2Zm9.8-7.902h6.06c2.13 0 3.69-.402 4.7-1.208 1.01-.805 1.52-1.927 1.52-3.366 0-1.043-.24-1.941-.73-2.693-.49-.766-1.18-1.354-2.08-1.763-.9-.422-1.97-.634-3.23-.634h-6.24v9.664Zm0-15.981h5.43c1.07 0 2.02-.178 2.85-.535.83-.356 1.48-.871 1.94-1.544.48-.674.72-1.485.72-2.436 0-1.36-.49-2.429-1.45-3.208-.96-.779-2.26-1.169-3.9-1.169h-5.59v8.892Zm71.41-6.535 5.02 10.021 5.18-10.021h9.77l-8.5 15.209 8.81 15.209h-9.68l-5.58-10.1-5.45 10.1h-9.82l8.83-15.209-8.4-15.209h9.82Z"
-        fill="#fff"
+        d="M937.07 193V152.443H946.872V168.721H962.854V152.443H972.636V193H962.854V176.702H946.872V193H937.07ZM992.984 193.574C989.789 193.574 987.043 192.921 984.746 191.614C982.462 190.294 980.7 188.458 979.459 186.108C978.231 183.745 977.617 181.006 977.617 177.89C977.617 174.761 978.231 172.022 979.459 169.672C980.7 167.308 982.462 165.473 984.746 164.166C987.043 162.846 989.789 162.186 992.984 162.186C996.179 162.186 998.919 162.846 1001.2 164.166C1003.5 165.473 1005.26 167.308 1006.49 169.672C1007.73 172.022 1008.35 174.761 1008.35 177.89C1008.35 181.006 1007.73 183.745 1006.49 186.108C1005.26 188.458 1003.5 190.294 1001.2 191.614C998.919 192.921 996.179 193.574 992.984 193.574ZM993.044 186.267C994.206 186.267 995.189 185.91 995.994 185.197C996.8 184.485 997.414 183.494 997.836 182.227C998.272 180.96 998.49 179.494 998.49 177.831C998.49 176.141 998.272 174.662 997.836 173.395C997.414 172.127 996.8 171.137 995.994 170.424C995.189 169.711 994.206 169.355 993.044 169.355C991.842 169.355 990.826 169.711 989.994 170.424C989.175 171.137 988.548 172.127 988.113 173.395C987.69 174.662 987.479 176.141 987.479 177.831C987.479 179.494 987.69 180.96 988.113 182.227C988.548 183.494 989.175 184.485 989.994 185.197C990.826 185.91 991.842 186.267 993.044 186.267ZM1013.31 193V162.582H1022.52V168.167H1022.86C1023.49 166.318 1024.56 164.859 1026.07 163.79C1027.57 162.721 1029.37 162.186 1031.45 162.186C1033.56 162.186 1035.37 162.727 1036.88 163.81C1038.38 164.892 1039.34 166.345 1039.75 168.167H1040.07C1040.63 166.358 1041.74 164.912 1043.39 163.83C1045.04 162.734 1046.99 162.186 1049.24 162.186C1052.11 162.186 1054.45 163.11 1056.25 164.958C1058.04 166.794 1058.94 169.315 1058.94 172.523V193H1049.26V174.741C1049.26 173.223 1048.87 172.068 1048.09 171.276C1047.31 170.47 1046.3 170.068 1045.06 170.068C1043.72 170.068 1042.67 170.503 1041.91 171.375C1041.16 172.233 1040.78 173.388 1040.78 174.84V193H1031.47V174.642C1031.47 173.23 1031.09 172.114 1030.32 171.296C1029.56 170.477 1028.55 170.068 1027.29 170.068C1026.45 170.068 1025.7 170.272 1025.06 170.682C1024.41 171.078 1023.9 171.645 1023.53 172.385C1023.17 173.124 1023 173.995 1023 174.999V193H1013.31ZM1079.16 193.574C1075.98 193.574 1073.23 192.947 1070.92 191.693C1068.62 190.426 1066.85 188.623 1065.61 186.287C1064.39 183.937 1063.77 181.144 1063.77 177.91C1063.77 174.768 1064.39 172.022 1065.63 169.672C1066.87 167.308 1068.62 165.473 1070.88 164.166C1073.14 162.846 1075.8 162.186 1078.86 162.186C1081.03 162.186 1083.01 162.523 1084.8 163.196C1086.6 163.869 1088.15 164.866 1089.46 166.186C1090.76 167.506 1091.78 169.137 1092.51 171.078C1093.23 173.005 1093.6 175.217 1093.6 177.712V180.128H1067.16V174.504H1084.58C1084.57 173.474 1084.33 172.556 1083.85 171.751C1083.38 170.946 1082.72 170.319 1081.89 169.87C1081.07 169.408 1080.13 169.177 1079.06 169.177C1077.98 169.177 1077.01 169.421 1076.15 169.909C1075.29 170.385 1074.61 171.038 1074.11 171.87C1073.61 172.688 1073.34 173.619 1073.32 174.662V180.385C1073.32 181.626 1073.56 182.715 1074.05 183.653C1074.54 184.577 1075.23 185.296 1076.13 185.811C1077.03 186.326 1078.1 186.584 1079.34 186.584C1080.2 186.584 1080.97 186.465 1081.67 186.227C1082.37 185.99 1082.97 185.64 1083.48 185.178C1083.98 184.716 1084.35 184.148 1084.6 183.475L1093.5 183.732C1093.13 185.726 1092.31 187.462 1091.06 188.94C1089.82 190.406 1088.19 191.548 1086.17 192.366C1084.15 193.172 1081.81 193.574 1079.16 193.574ZM1098.54 193V152.443H1115.45C1118.49 152.443 1121.03 152.872 1123.08 153.73C1125.14 154.588 1126.68 155.789 1127.71 157.334C1128.75 158.879 1129.28 160.668 1129.28 162.701C1129.28 164.246 1128.95 165.625 1128.31 166.84C1127.66 168.041 1126.77 169.038 1125.63 169.83C1124.5 170.622 1123.18 171.177 1121.69 171.494V171.89C1123.33 171.969 1124.84 172.411 1126.23 173.216C1127.63 174.022 1128.75 175.144 1129.59 176.583C1130.44 178.009 1130.86 179.699 1130.86 181.653C1130.86 183.831 1130.31 185.778 1129.2 187.495C1128.09 189.198 1126.48 190.544 1124.38 191.535C1122.29 192.512 1119.74 193 1116.74 193H1098.54ZM1108.34 185.098H1114.4C1116.53 185.098 1118.09 184.696 1119.1 183.89C1120.11 183.085 1120.62 181.963 1120.62 180.524C1120.62 179.481 1120.38 178.583 1119.89 177.831C1119.4 177.065 1118.71 176.477 1117.81 176.068C1116.91 175.646 1115.84 175.434 1114.58 175.434H1108.34V185.098ZM1108.34 169.117H1113.77C1114.84 169.117 1115.79 168.939 1116.62 168.582C1117.45 168.226 1118.1 167.711 1118.56 167.038C1119.04 166.364 1119.28 165.553 1119.28 164.602C1119.28 163.242 1118.79 162.173 1117.83 161.394C1116.87 160.615 1115.57 160.225 1113.93 160.225H1108.34V169.117ZM1179.75 162.582L1184.77 172.603L1189.95 162.582H1199.72L1191.22 177.791L1200.03 193H1190.35L1184.77 182.9L1179.32 193H1169.5L1178.33 177.791L1169.93 162.582H1179.75Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1169.06 166.844C1170.19 168 1171 169.341 1171.67 170.753C1171.89 171.21 1171.84 171.75 1171.54 172.159C1171.24 172.569 1170.75 172.782 1170.24 172.715C1170.24 172.716 1170.24 172.716 1170.24 172.716"
+        fill="#808080"
+      />
+      <path
+        d="M1169.06 166.844C1170.19 168 1171 169.341 1171.67 170.753C1171.89 171.21 1171.84 171.75 1171.54 172.159C1171.24 172.569 1170.75 172.782 1170.24 172.715C1170.24 172.716 1170.24 172.716 1170.24 172.716"
+        stroke="black"
+        stroke-width="0.95462"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1150.98 157.253C1150.39 157.281 1149.8 157.441 1149.27 157.732C1145.73 159.648 1138.18 163.733 1134.5 165.725C1133.86 166.07 1133.34 166.574 1132.98 167.173L1151.31 176.989C1151.31 176.989 1150.15 178.915 1149.13 180.628C1148.25 182.092 1146.39 182.616 1144.88 181.822L1132.39 175.258V185.505C1132.39 186.552 1132.99 187.518 1133.96 188.042C1137.49 189.956 1146.08 194.603 1149.61 196.517C1150.58 197.04 1151.77 197.04 1152.74 196.517C1156.28 194.603 1164.86 189.956 1168.4 188.042C1169.36 187.518 1169.96 186.552 1169.96 185.505V169.256C1169.96 167.782 1169.15 166.427 1167.86 165.725C1164.18 163.733 1156.63 159.648 1153.09 157.732C1152.43 157.377 1151.7 157.217 1150.98 157.253"
+        fill="#DADADA"
+      />
+      <path
+        d="M1150.98 157.253C1150.39 157.281 1149.8 157.441 1149.27 157.732C1145.73 159.648 1138.18 163.733 1134.5 165.725C1133.86 166.07 1133.34 166.574 1132.98 167.173L1151.31 176.989C1151.31 176.989 1150.15 178.915 1149.13 180.628C1148.25 182.092 1146.39 182.616 1144.88 181.822L1132.39 175.258V185.505C1132.39 186.552 1132.99 187.518 1133.96 188.042C1137.49 189.956 1146.08 194.603 1149.61 196.517C1150.58 197.04 1151.77 197.04 1152.74 196.517C1156.28 194.603 1164.86 189.956 1168.4 188.042C1169.36 187.518 1169.96 186.552 1169.96 185.505V169.256C1169.96 167.782 1169.15 166.427 1167.86 165.725C1164.18 163.733 1156.63 159.648 1153.09 157.732C1152.43 157.377 1151.7 157.217 1150.98 157.253"
+        stroke="black"
+        stroke-width="0.954666"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1151.31 176.989V157.334C1150.71 157.363 1149.8 157.441 1149.27 157.732C1145.73 159.648 1138.18 163.733 1134.5 165.725C1133.86 166.07 1133.34 166.574 1132.98 167.173L1151.31 176.989L1151.31 176.989Z"
+        fill="#808080"
+        stroke="black"
+        stroke-width="0.954666"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1132.75 167.607L1131.02 170.917C1130.2 172.486 1130.81 174.423 1132.37 175.247L1132.39 175.258M1132.39 175.258L1144.88 181.822C1146.39 182.616 1148.25 182.092 1149.13 180.628C1150.15 178.915 1151.31 176.989 1151.31 176.989L1132.98 167.173L1132.97 167.189L1132.75 167.607"
+        fill="#DADADA"
+      />
+      <path
+        d="M1132.75 167.607L1131.02 170.917C1130.2 172.486 1130.81 174.423 1132.37 175.247L1132.39 175.258M1132.39 175.258L1144.88 181.822C1146.39 182.616 1148.25 182.092 1149.13 180.628C1150.15 178.915 1151.31 176.989 1151.31 176.989L1132.98 167.173L1132.97 167.189L1132.75 167.607"
+        stroke="black"
+        stroke-width="0.954666"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M1151.18 157.409V176.601"
+        stroke="black"
+        stroke-width="0.709918"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1167.4 173.975C1167.4 173.782 1167.3 173.604 1167.13 173.508C1166.96 173.411 1166.76 173.411 1166.59 173.508L1155.31 180.023C1155.14 180.119 1155.04 180.297 1155.04 180.49V187.642C1155.04 187.835 1155.14 188.013 1155.31 188.109C1155.47 188.206 1155.68 188.206 1155.85 188.109L1167.13 181.594C1167.3 181.498 1167.4 181.32 1167.4 181.127V173.975V173.975Z"
+        :fill="primaryHex"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1167.4 173.975C1167.4 173.782 1167.3 173.604 1167.13 173.508C1166.96 173.411 1166.76 173.411 1166.59 173.508L1155.31 180.023C1155.14 180.119 1155.04 180.297 1155.04 180.49V187.642C1155.04 187.835 1155.14 188.013 1155.31 188.109C1155.47 188.206 1155.68 188.206 1155.85 188.109L1167.13 181.594C1167.3 181.498 1167.4 181.32 1167.4 181.127V173.975V173.975ZM1155.9 180.674V187.089L1166.54 180.943V174.528L1155.9 180.674Z"
+        fill="black"
+      />
+      <path
+        d="M1151.18 196.817V177.03"
+        stroke="black"
+        stroke-width="0.954758"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
+      />
+      <path
+        d="M1151.31 177.078L1169.02 166.958"
+        stroke="black"
+        stroke-width="0.954712"
+        stroke-miterlimit="5.42683"
+        stroke-linecap="round"
       />
     </g>
     <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0-103h1440v310H0z" />
-      </clipPath>
-      <clipPath id="c">
-        <path fill="#fff" d="M1269.12 230.569v-75.8085h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="d">
-        <path fill="#fff" d="M1439.69 135.809h-75.8085V60.0005h75.8085z" />
-      </clipPath>
-      <clipPath id="e">
-        <path fill="#fff" d="M1344.93 135.809h-75.8085V60.0005h75.8085z" />
-      </clipPath>
-      <clipPath id="f">
-        <path fill="#fff" d="M1174.36 135.809V60.0005h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="g">
-        <path fill="#fff" d="M1155.41 135.809h-75.8085V60.0005h75.8085z" />
-      </clipPath>
-      <clipPath id="h">
-        <path fill="#fff" d="M965.888 60v75.8085h-75.8085V60z" />
-      </clipPath>
-      <clipPath id="i">
-        <path fill="#fff" d="M795.32 230.569v-75.8085h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="j">
-        <path fill="#fff" d="M776.368 230.569h-75.8085v-75.8085h75.8085z" />
-      </clipPath>
-      <clipPath id="k">
-        <path fill="#fff" d="M795.32 135.809V60.0005h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="l">
-        <path fill="#fff" d="M681.608 154.76v75.8085h-75.8085V154.76z" />
-      </clipPath>
-      <clipPath id="m">
-        <path fill="#fff" d="M681.608 60v75.8085h-75.8085V60z" />
-      </clipPath>
-      <clipPath id="n">
-        <path fill="#fff" d="M511.04 60h75.8085v75.8085H511.04z" />
-      </clipPath>
-      <clipPath id="o">
-        <path fill="#fff" d="M492.088 154.76v75.8085h-75.8085V154.76z" />
-      </clipPath>
-      <clipPath id="p">
-        <path fill="#fff" d="M416.28 60h75.8085v75.8085H416.28z" />
-      </clipPath>
-      <clipPath id="q">
-        <path fill="#fff" d="M132 154.76h75.8085v75.8085H132z" />
-      </clipPath>
-      <clipPath id="r">
-        <path fill="#fff" d="M226.76 135.809V60.0005h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="s">
-        <path fill="#fff" d="M132 60h75.8085v75.8085H132z" />
-      </clipPath>
-      <clipPath id="t">
-        <path fill="#fff" d="M502 44.8085V-31h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="u">
-        <path fill="#fff" d="M103.809 44.5685H28.0005V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="v">
-        <path fill="#fff" d="M122.76-31.24h75.8085v75.8085H122.76z" />
-      </clipPath>
-      <clipPath id="w">
-        <path fill="#fff" d="M312.28 44.5685V-31.24h75.8085v75.8085z" />
-      </clipPath>
-      <clipPath id="x">
-        <path fill="#fff" d="M482.849 44.5685h-75.8085V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="y">
-        <path fill="#fff" d="M596.56-31.24h75.8085v75.8085H596.56z" />
-      </clipPath>
-      <clipPath id="z">
-        <path fill="#fff" d="M861.889 44.5685h-75.8085V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="A">
-        <path fill="#fff" d="M956.648 44.5685h-75.8085V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="B">
-        <path fill="#fff" d="M1051.41 44.5685h-75.8085V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="C">
-        <path fill="#fff" d="M1070.36-31.24h75.8085v75.8085H1070.36z" />
-      </clipPath>
-      <clipPath id="D">
-        <path fill="#fff" d="M1165.12-31.24h75.8085v75.8085H1165.12z" />
-      </clipPath>
-      <clipPath id="E">
-        <path fill="#fff" d="M1335.69 44.5685h-75.8085V-31.24h75.8085z" />
-      </clipPath>
-      <clipPath id="F">
-        <path fill="#fff" d="M292.808 44.8085h-75.8085V-31h75.8085z" />
-      </clipPath>
       <filter
-        id="b"
+        id="filter0_d_5_1510"
         x="-22"
         y="-117"
         width="1484"
@@ -361,15 +382,113 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-        <feMorphology radius="4" in="SourceAlpha" result="effect1_dropShadow_5_1510" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_5_1510" />
         <feOffset dy="8" />
         <feGaussianBlur stdDeviation="13" />
         <feComposite in2="hardAlpha" operator="out" />
-        <feColorMatrix values="0 0 0 0 0.146667 0 0 0 0 0.183333 0 0 0 0 0.157752 0 0 0 0.25 0" />
-        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5_1510" />
-        <feBlend in="SourceGraphic" in2="effect1_dropShadow_5_1510" result="shape" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.146667 0 0 0 0 0.183333 0 0 0 0 0.157752 0 0 0 0.25 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5_1510" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5_1510" result="shape" />
       </filter>
+      <clipPath id="clip0_5_1510">
+        <rect width="1440" height="310" fill="white" transform="translate(0 -103)" />
+      </clipPath>
+      <clipPath id="clip1_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1269.12 230.569) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip2_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1439.69 135.809) rotate(-180)" />
+      </clipPath>
+      <clipPath id="clip3_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1344.93 135.809) rotate(-180)" />
+      </clipPath>
+      <clipPath id="clip4_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1174.36 135.809) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip5_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1155.41 135.809) rotate(-180)" />
+      </clipPath>
+      <clipPath id="clip6_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(965.888 60) rotate(90)" />
+      </clipPath>
+      <clipPath id="clip7_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(795.32 230.569) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip8_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(776.368 230.569) rotate(-180)" />
+      </clipPath>
+      <clipPath id="clip9_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(795.32 135.809) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip10_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(681.608 154.76) rotate(90)" />
+      </clipPath>
+      <clipPath id="clip11_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(681.608 60) rotate(90)" />
+      </clipPath>
+      <clipPath id="clip12_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(511.04 60)" />
+      </clipPath>
+      <clipPath id="clip13_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(492.088 154.76) rotate(90)" />
+      </clipPath>
+      <clipPath id="clip14_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(416.28 60)" />
+      </clipPath>
+      <clipPath id="clip15_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(132 154.76)" />
+      </clipPath>
+      <clipPath id="clip16_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(226.76 135.809) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip17_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(132 60)" />
+      </clipPath>
+      <clipPath id="clip18_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(502 44.8085) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip19_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(103.809 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip20_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(122.76 -31.24)" />
+      </clipPath>
+      <clipPath id="clip21_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(312.28 44.5685) rotate(-90)" />
+      </clipPath>
+      <clipPath id="clip22_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(482.849 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip23_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(596.56 -31.24)" />
+      </clipPath>
+      <clipPath id="clip24_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(861.889 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip25_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(956.648 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip26_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1051.41 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip27_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1070.36 -31.24)" />
+      </clipPath>
+      <clipPath id="clip28_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1165.12 -31.24)" />
+      </clipPath>
+      <clipPath id="clip29_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(1335.69 44.5685) rotate(180)" />
+      </clipPath>
+      <clipPath id="clip30_5_1510">
+        <rect width="75.8085" height="75.8085" fill="white" transform="translate(292.808 44.8085) rotate(180)" />
+      </clipPath>
     </defs>
   </svg>
 </template>
diff --git a/frontend/components/Base/Container.vue b/frontend/components/Base/Container.vue
index 98ffe07..a67bee8 100644
--- a/frontend/components/Base/Container.vue
+++ b/frontend/components/Base/Container.vue
@@ -8,7 +8,7 @@
 </script>
 
 <template>
-  <component :is="cmp" class="container max-w-6xl mx-auto px-4">
+  <component :is="cmp" class="container max-w-6xl mx-auto px-3">
     <slot />
   </component>
 </template>
diff --git a/frontend/components/global/DetailsSection/index.ts b/frontend/components/global/DetailsSection/index.ts
deleted file mode 100644
index 82f0782..0000000
--- a/frontend/components/global/DetailsSection/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import DetailsSection from "./DetailsSection.vue";
-export default DetailsSection;
diff --git a/frontend/components/global/StatCard.vue b/frontend/components/global/StatCard/StatCard.vue
similarity index 90%
rename from frontend/components/global/StatCard.vue
rename to frontend/components/global/StatCard/StatCard.vue
index 6ce2429..37a386f 100644
--- a/frontend/components/global/StatCard.vue
+++ b/frontend/components/global/StatCard/StatCard.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script setup lang="ts">
-  type format = "currency" | "number" | "percent";
+  import { StatsFormat } from "./types";
 
   type Props = {
     title: string;
     value: number;
     subtitle?: string;
-    type?: format;
+    type?: StatsFormat;
   };
 
   withDefaults(defineProps<Props>(), {
diff --git a/frontend/components/global/StatCard/types.ts b/frontend/components/global/StatCard/types.ts
new file mode 100644
index 0000000..7b8be67
--- /dev/null
+++ b/frontend/components/global/StatCard/types.ts
@@ -0,0 +1 @@
+export type StatsFormat = "currency" | "number" | "percent";
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 5a6fdeb..4bcef2c 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -343,7 +343,7 @@
         <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
       </div>
     </dialog>
-    <section class="px-3">
+    <section>
       <div class="space-y-6">
         <BaseCard>
           <template #title>
@@ -374,35 +374,31 @@
             </BaseSectionHeader>
           </template>
           <template #title-actions>
-            <div class="modal-action mt-0">
-              <label v-if="!hasNested" class="label cursor-pointer mr-auto">
+            <div class="flex flex-wrap justify-between items-center mt-2 gap-4">
+              <label v-if="!hasNested" class="label cursor-pointer">
                 <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
                 <span class="label-text ml-4"> Show Empty </span>
               </label>
-              <BaseButton v-else class="mr-auto" size="sm" @click="$router.go(-1)">
-                <template #icon>
-                  <Icon name="mdi-arrow-left" class="h-5 w-5" />
-                </template>
-                Back
-              </BaseButton>
-              <BaseButton size="sm" :to="`/item/${itemId}/edit`">
-                <template #icon>
-                  <Icon name="mdi-pencil" />
-                </template>
-                Edit
-              </BaseButton>
-              <BaseButton size="sm" @click="deleteItem">
-                <template #icon>
-                  <Icon name="mdi-delete" />
-                </template>
-                Delete
-              </BaseButton>
-              <BaseButton size="sm" :to="`/item/${itemId}/log`">
-                <template #icon>
-                  <Icon name="mdi-post" />
-                </template>
-                Log
-              </BaseButton>
+              <div class="flex flex-wrap justify-end gap-2 ml-auto">
+                <BaseButton size="sm" :to="`/item/${itemId}/edit`">
+                  <template #icon>
+                    <Icon name="mdi-pencil" />
+                  </template>
+                  Edit
+                </BaseButton>
+                <BaseButton size="sm" @click="deleteItem">
+                  <template #icon>
+                    <Icon name="mdi-delete" />
+                  </template>
+                  Delete
+                </BaseButton>
+                <BaseButton size="sm" :to="`/item/${itemId}/log`">
+                  <template #icon>
+                    <Icon name="mdi-post" />
+                  </template>
+                  Log
+                </BaseButton>
+              </div>
             </div>
           </template>
 
diff --git a/frontend/pages/item/[id]/index/log.vue b/frontend/pages/item/[id]/index/log.vue
index ff590d8..b0f06b2 100644
--- a/frontend/pages/item/[id]/index/log.vue
+++ b/frontend/pages/item/[id]/index/log.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import DatePicker from "~~/components/Form/DatePicker.vue";
+  import { StatsFormat } from "~~/components/global/StatCard/types";
   import { ItemOut } from "~~/lib/api/types/data-contracts";
 
   const props = defineProps<{
@@ -14,19 +15,31 @@
     return data;
   });
 
+  const count = computed(() => {
+    if (!log.value) return 0;
+    return log.value.entries.length;
+  });
   const stats = computed(() => {
     if (!log.value) return [];
 
     return [
+      {
+        id: "count",
+        title: "Total Entries",
+        value: count.value || 0,
+        type: "number" as StatsFormat,
+      },
       {
         id: "total",
         title: "Total Cost",
         value: log.value.costTotal || 0,
+        type: "currency" as StatsFormat,
       },
       {
         id: "average",
         title: "Monthly Average",
         value: log.value.costAverage || 0,
+        type: "currency" as StatsFormat,
       },
     ];
   });
@@ -99,16 +112,32 @@
       </form>
     </BaseModal>
 
-    <div class="flex">
-      <BaseButton class="ml-auto" size="sm" @click="newEntry()">
-        <template #icon>
-          <Icon name="mdi-post" />
-        </template>
-        Log Maintenance
-      </BaseButton>
-    </div>
-    <section class="page-layout my-6">
-      <div class="main-slot container space-y-6">
+    <section class="space-y-6">
+      <div class="flex">
+        <BaseButton size="sm" @click="$router.go(-1)">
+          <template #icon>
+            <Icon name="mdi-arrow-left" class="h-5 w-5" />
+          </template>
+          Back
+        </BaseButton>
+        <BaseButton class="ml-auto" size="sm" @click="newEntry()">
+          <template #icon>
+            <Icon name="mdi-post" />
+          </template>
+          Log Maintenance
+        </BaseButton>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <StatCard
+          v-for="stat in stats"
+          :key="stat.id"
+          class="stats block shadow-xl border-l-primary"
+          :title="stat.title"
+          :value="stat.value"
+          :type="stat.type"
+        />
+      </div>
+      <div class="container space-y-6">
         <BaseCard v-for="e in log.entries" :key="e.id">
           <BaseSectionHeader class="p-6 border-b border-b-gray-300">
             <span class="text-base-content">
@@ -141,38 +170,6 @@
           </div>
         </BaseCard>
       </div>
-      <div class="side-slot space-y-6">
-        <StatCard
-          v-for="stat in stats"
-          :key="stat.id"
-          class="stats block shadow-xl border-l-primary"
-          :title="stat.title"
-          :value="stat.value"
-          type="currency"
-        />
-      </div>
     </section>
   </div>
 </template>
-
-<style scoped>
-  .page-layout {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto;
-    grid-template-areas: "side main";
-    gap: 1rem;
-  }
-
-  .side-slot {
-    grid-area: side;
-  }
-
-  .main-slot {
-    grid-area: main;
-  }
-
-  .grid {
-    display: grid;
-  }
-</style>
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index 317a0f0..34d453d 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -135,7 +135,7 @@
     <div class="flex mt-1">
       <label class="ml-auto label cursor-pointer">
         <input v-model="advanced" type="checkbox" class="toggle toggle-primary" />
-        <span class="label-text text-neutral-content ml-2"> Filters </span>
+        <span class="label-text text-base-content ml-2"> Filters </span>
       </label>
     </div>
     <BaseCard v-if="advanced" class="my-1 overflow-visible">