diff --git a/TODO.md b/TODO.md
index ce714ce..fff4912 100644
--- a/TODO.md
+++ b/TODO.md
@@ -15,4 +15,6 @@
 [ ] boleh print semua borang
 [ ] jana surat lepas lulus anggota
 
-## 
\ No newline at end of file
+## Present to Boss (2/7/2026)
+[ ] discuss logo baru MyKOPKB
+[ ] layout footer untuk surat rasmi
\ No newline at end of file
diff --git a/be/public/favicon.ico b/be/public/favicon.ico
index e69de29..4aea46d 100644
Binary files a/be/public/favicon.ico and b/be/public/favicon.ico differ
diff --git a/fe/.DS_Store b/fe/.DS_Store
index bea6f35..8dd9799 100644
Binary files a/fe/.DS_Store and b/fe/.DS_Store differ
diff --git a/fe/docker/Dockerfile b/fe/docker/Dockerfile
index b383b46..08dfbe8 100644
--- a/fe/docker/Dockerfile
+++ b/fe/docker/Dockerfile
@@ -7,10 +7,16 @@ RUN npm install -g pnpm && \
     pnpm install --frozen-lockfile --ignore-scripts && \
     pnpm rebuild esbuild
 COPY fe/ ./
+ARG VITE_APP_NAME="MyKOPKB"
+ARG VITE_APP_VERSION="1.0"
 ARG VITE_API_BASE_URL=https://api.koppkb.com
 ARG VITE_APP_URL=https://anggota.koppkb.com
+
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
 ENV VITE_APP_URL=$VITE_APP_URL
+ENV VITE_APP_NAME=$VITE_APP_NAME
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+
 # RUN pnpm run typecheck # uncomment this to run typecheck
 RUN pnpm exec vite build --mode=production
 
diff --git a/fe/src/assets/images/Logo-RAJD.png b/fe/src/assets/images/Logo-RAJD.png
deleted file mode 100644
index 37e434c..0000000
Binary files a/fe/src/assets/images/Logo-RAJD.png and /dev/null differ
diff --git a/fe/src/assets/images/logo.svg b/fe/src/assets/images/logo.svg
deleted file mode 100644
index 28c5228..0000000
--- a/fe/src/assets/images/logo.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="311.899" height="291.707" viewBox="0 0 311.899 291.707">
-  <g id="Icon_ionic-ios-apps" data-name="Icon ionic-ios-apps" transform="translate(-4.57 -4.492)">
-    <path id="Path_9" data-name="Path 9" d="M305.678,64.318,184.327,9a65.721,65.721,0,0,0-47.842,0L15.22,64.318c-14.293,6.5-14.293,17.117,0,23.639l120.221,54.826a69.059,69.059,0,0,0,50.033,0L305.687,87.956C319.971,81.46,319.971,70.822,305.678,64.318Z" transform="translate(0.07)" fill="#fff" opacity="0.999"/>
-    <g id="Group_1" data-name="Group 1" transform="translate(4.533 135.941)">
-      <path id="Path_10" data-name="Path 10" d="M108.2,53.266,44,24a10.438,10.438,0,0,0-8.553,0L12.99,34.227c-11.32,5.145-11.32,13.556,0,18.721l95.21,43.42a54.692,54.692,0,0,0,39.625,0l95.2-43.42c11.32-5.148,11.32-13.556,0-18.721L220.582,24a10.438,10.438,0,0,0-8.553,0l-64.2,29.268a54.692,54.692,0,0,1-39.625,0Z" transform="translate(28.02 60.176)" fill="#fff" opacity="0.5"/>
-      <path id="Path_11" data-name="Path 11" d="M274.692,27.406l-23.1-10.493a11.652,11.652,0,0,0-9.618,0l-78.68,35.625a64.317,64.317,0,0,1-37.812,0L46.815,16.914a11.652,11.652,0,0,0-9.618,0L14.108,27.407c-12.819,5.825-12.819,15.351,0,21.2L121.925,97.783a61.937,61.937,0,0,0,44.874,0L274.615,48.608C287.51,42.773,287.51,33.232,274.692,27.406Z" transform="translate(11.592 -15.875)" fill="#fff" opacity="0.75"/>
-    </g>
-  </g>
-</svg>
diff --git a/fe/src/assets/images/logonew-mykopkb.svg b/fe/src/assets/images/logonew-mykopkb.svg
new file mode 100644
index 0000000..ce2be41
--- /dev/null
+++ b/fe/src/assets/images/logonew-mykopkb.svg
@@ -0,0 +1,185 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="168.5569mm"
+   height="30.678844mm"
+   viewBox="0 0 168.5569 30.678844"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"
+   sodipodi:docname="inkscape-mykopkb.svg"
+   inkscape:export-filename="inkscape-mykopkb.svg"
+   inkscape:export-xdpi="21.893602"
+   inkscape:export-ydpi="21.893602"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     inkscape:zoom="1.4823793"
+     inkscape:cx="362.93004"
+     inkscape:cy="668.18254"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer3">
+    <inkscape:grid
+       id="grid1"
+       units="mm"
+       originx="-23.878601"
+       originy="-164.33376"
+       spacingx="0.99999998"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+    <inkscape:page
+       x="-4.1401693e-14"
+       y="0"
+       width="168.55692"
+       height="30.678844"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath9-3">
+      <rect
+         style="fill:none"
+         id="rect10-4"
+         width="146.82712"
+         height="34.46553"
+         x="80.884422"
+         y="158.7805"
+         ry="0" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-23.8786,-164.33376)">
+    <g
+       id="g1"
+       transform="matrix(1.0239856,0,0,1.0239856,25.236423,-2.3053017)">
+      <path
+         id="path8"
+         clip-path="url(#clipPath9-3)"
+         style="fill:#0e579b;fill-opacity:1;stroke:none"
+         transform="matrix(0.75872482,0,0,0.75872482,-6.2417586,42.265034)"
+         d="m 171.59179,16.034485 c -4.17834,-0.472876 -14.8401,-0.471299 -18.7207,0.002 -12.03474,1.46724 -21.34062,5.509366 -28.01758,12.169922 -3.21502,3.207126 -4.97173,5.696138 -6.91797,9.804687 -5.77271,12.186323 -4.46064,27.804323 3.73437,44.447266 3.0584,6.211178 5.37817,9.921601 10.57227,16.910156 2.17866,2.931354 3.98658,5.330084 4.01758,5.330084 0.031,0 -0.78086,-3.34745 -1.80469,-7.439459 -5.59408,-22.3582 -6.73335,-35.663612 -3.98437,-46.503906 3.55955,-14.036666 14.00586,-22.97643 32.32031,-27.65625 5.7111,-1.459335 10.67531,-2.289869 20.13672,-3.367187 3.85873,-0.439375 7.05817,-0.839395 7.10937,-0.890625 0.12727,-0.127267 -14.67664,-2.380128 -18.44531,-2.806641 z m 12.67187,29.482422 c -2.78138,0.0011 -5.59265,0.158488 -7.55078,0.472656 -10.08124,1.617466 -20.72194,6.025481 -30.7207,12.728516 -3.4044,2.282263 -10.93549,7.951231 -10.77539,8.111328 0.0738,0.07382 3.32421,-0.664996 7.22266,-1.642578 15.52693,-3.89356 23.17382,-5.073577 32.99218,-5.091797 7.44452,-0.01382 10.15476,0.329595 15.28711,1.935547 16.39995,5.131665 25.16351,20.468218 28.4043,49.708981 0.4584,4.136 0.91776,7.736 1.02148,8 v 0.002 l 0.002,0.002 c 10e-4,0.002 0.003,0.006 0.004,0.008 l 0.002,0.002 0.002,0.002 0.002,0.002 0.002,0.002 h 0.002 0.002 0.002 0.002 0.002 0.002 c 0.14501,-0.0729 0.60163,-2.19884 1.06055,-4.98046 3.17911,-19.269424 2.93431,-31.609899 -0.85156,-42.970708 -2.12908,-6.389049 -4.99514,-11.268144 -9.18164,-15.628906 -5.2125,-5.429457 -11.82805,-8.876404 -19.56641,-10.195312 -1.83442,-0.312631 -4.5858,-0.467913 -7.36719,-0.466797 z m -96.230465,3.927734 c -0.04907,-0.747126 -1.014709,4.89092 -2.037109,11.894531 -2.14145,14.669263 -1.566476,26.743403 1.746094,36.677735 4.85141,14.549273 14.76508,23.548583 28.65039,26.009763 5.68739,1.0081 14.42634,0.48233 21.19141,-1.27539 6.82702,-1.7738 16.37949,-6.09707 22.95507,-10.38867 3.16694,-2.06693 12.97266,-9.18409 12.97266,-9.41602 0,-0.0521 -3.05619,0.6899 -6.79297,1.64844 -14.87993,3.8169 -24.46403,5.32456 -34.00586,5.34766 -6.73824,0.0163 -10.01762,-0.37891 -14.7207,-1.77149 C 108.78323,105.44443 101.25519,98.664348 96.550773,88.858704 93.886693,83.305848 91.633079,75.754285 90.341789,68.057922 89.819059,64.942381 88.186785,51.783074 88.033195,49.444641 Z M 171.9121,65.485657 c 0,0.157723 0.63904,2.745005 1.41992,5.75 6.20158,23.864843 7.29537,38.866173 3.67774,50.423823 -1.69103,5.40253 -5.54992,11.29362 -9.65821,14.74415 -8.9523,7.51898 -20.28967,11.34058 -40.67968,13.70898 -4.55443,0.52902 -8.33033,1.01001 -8.39063,1.07031 -0.13982,0.13982 14.92357,2.45299 18.11133,2.78125 3.66118,0.37716 15.83537,0.37743 18.88867,0 11.79154,-1.45757 20.69935,-5.20987 27.31641,-11.5039 5.84645,-5.56105 9.18078,-11.91928 10.63476,-20.27735 0.70253,-4.03842 0.45967,-12.1587 -0.50976,-17.0039 C 191.18461,97.491954 187.58543,88.664163 182.61132,80.378235 180.34824,76.608363 171.9121,64.86607 171.9121,65.485657 Z m -18.63867,1.201172 c -2.29138,0.06897 -4.54484,0.478628 -6.35156,1.255859 -1.99256,0.857178 -3.4526,2.434605 -4.14453,4.478516 -0.53967,1.59413 -0.65827,1.714322 -2.18164,2.210937 -2.26165,0.737291 -3.70203,1.947354 -4.64844,3.904297 -2.6096,5.396005 -1.20825,13.477052 2.80273,16.162109 0.8677,0.580863 1.96669,1.041016 2.48828,1.041016 0.98712,0 1.00278,0.02107 1.55469,2.175781 0.6683,2.609086 3.84715,4.749066 7.83984,5.279296 3.7054,0.49207 8.79626,-0.071 11.0918,-1.22851 2.28255,-1.15093 3.30297,-2.543495 3.92383,-5.347661 0.14688,-0.663393 0.38596,-0.878906 0.96875,-0.878906 1.98535,0 4.17846,-1.678747 5.45312,-4.171875 2.27469,-4.449085 1.74986,-11.838229 -1.05468,-14.830078 -0.90926,-0.97 -3.67837,-2.430247 -4.61719,-2.435547 -0.34509,-0.0019 -0.62362,-0.33456 -0.73828,-0.882812 -0.35666,-1.705485 -1.40292,-3.547253 -2.48047,-4.369141 -2.16028,-1.647723 -6.08729,-2.478227 -9.90625,-2.363281 z m -0.45898,1.273437 c 0.81607,-0.03711 1.67576,-0.02928 2.58007,0.02539 5.35519,0.323775 7.93375,1.899138 8.97657,5.486328 0.43421,1.493602 0.65587,1.808614 1.38867,1.96875 4.471,0.977023 6.17147,3.270712 6.41406,8.652344 0.2748,6.096184 -1.94271,9.939658 -6.07617,10.535156 l -1.49414,0.214844 -0.21485,1.564453 c -0.39714,2.887526 -2.07779,4.403549 -5.87304,5.296879 -1.68337,0.39623 -6.22984,0.5164 -8.04297,0.21289 -4.27373,-0.7154 -6.7207,-2.901894 -6.7207,-6.007816 0,-0.958278 -0.11027,-1.131313 -0.72071,-1.132813 -4.84514,-0.01201 -8.00799,-5.53589 -6.97656,-12.183593 0.69298,-4.466367 2.2809,-6.223247 6.45898,-7.142578 0.6834,-0.150373 0.91154,-0.463489 1.2168,-1.675782 0.59779,-2.37405 1.20387,-3.248165 2.95117,-4.246093 1.63566,-0.934161 3.6846,-1.457029 6.13282,-1.568359 z M 85.511711,159.73956 v 14.70117 14.70313 l 2.984375,-3.10156 c 1.64151,-1.70648 3.604428,-3.78705 4.361328,-4.62305 0.745083,-0.82294 1.444042,-1.49862 1.570312,-1.51953 h 0.002 l 0.002,-0.002 h 0.002 c 0.10968,0 2.484817,2.66587 5.279297,5.92187 l 5.082027,5.91992 h 3.79883 c 2.0078,0 3.66463,-0.11182 3.79102,-0.25 l 0.002,-0.002 0.002,-0.002 v -0.002 l 0.002,-0.002 v -0.002 -0.002 l 0.002,-0.002 v -0.002 c 0,-0.28677 -1.00926,-1.4336 -8.72656,-9.91211 l -5.046877,-5.54492 0.726562,-0.89258 c 0.39973,-0.49063 3.524375,-4.11676 6.945315,-8.0586 l 6.2207,-7.16796 -3.33984,-0.0918 c -1.83694,-0.0513 -3.62847,-0.009 -3.98047,0.0957 -0.352,0.10449 -3.4168,3.42222 -6.810549,7.37305 -3.39375,3.95083 -6.308265,7.18359 -6.478515,7.18359 -0.19041,0 -0.310547,-2.83187 -0.310547,-7.35937 v -7.35938 h -3.039063 z m 61.121089,0 v 2.71875 2.72071 h 5.86915 c 6.33601,0 8.29921,0.3303 9.68359,1.63086 1.6948,1.59218 1.15493,4.50672 -1.03516,5.59375 -1.07797,0.53503 -2.10362,0.62905 -7.8789,0.71875 l -6.63868,0.10351 v 9.04297 c 0,4.97393 0.10094,9.14391 0.22461,9.26758 0.12368,0.12333 1.45466,0.18506 2.95899,0.13476 l 2.73633,-0.0918 0.0859,-6.43946 0.0859,-6.4375 4.23438,-0.16406 c 3.36773,-0.12996 4.65787,-0.31877 6.3125,-0.92187 4.16922,-1.51964 6.41216,-5.01318 5.96484,-9.29297 -0.36037,-3.44777 -1.90676,-5.74133 -4.78711,-7.10157 -2.50512,-1.18304 -4.85722,-1.48242 -11.63672,-1.48242 z m 24.31836,0 v 14.69922 14.70117 l 2.98047,-3.10156 c 1.63869,-1.70517 3.65628,-3.81922 4.48438,-4.69922 l 1.50586,-1.59961 0.60351,0.71485 c 0.33178,0.39398 2.65443,3.09398 5.16211,6 l 4.56055,5.28515 h 3.79101 c 2.23562,0 3.79297,-0.12762 3.79297,-0.31054 0,-0.17065 -0.75568,-1.13643 -1.67968,-2.14649 -0.924,-1.01005 -2.54361,-2.78371 -3.59961,-3.9414 -1.056,-1.15769 -3.21678,-3.52514 -4.80078,-5.25977 -1.584,-1.73464 -3.0461,-3.38996 -3.25,-3.67969 -0.31393,-0.44609 0.67705,-1.73971 6.47851,-8.4375 3.7679,-4.35004 6.85156,-7.9792 6.85156,-8.0664 0,-0.0872 -1.69176,-0.15073 -3.75976,-0.14063 l -3.75977,0.0176 -1.75976,2.08008 c -0.968,1.14395 -2.04839,2.41223 -2.40039,2.8164 -0.352,0.40418 -2.51279,2.87826 -4.80079,5.5 l -4.16015,4.76758 -0.0859,-7.59961 -0.0859,-7.59961 h -3.0332 z m 28.80079,0 v 9.43946 9.43945 h 6.89062 c 5.13164,0 7.15884,0.1128 7.94531,0.44141 2.28497,0.95472 3.11976,3.41293 1.75,5.15429 -1.10109,1.39981 -2.41021,1.76367 -6.33593,1.76367 h -3.5293 v 2.88086 2.87891 l 2.79883,-0.01 c 9.41605,-0.0375 14.25077,-3.48292 13.78125,-9.82031 -0.17383,-2.34619 -1.35063,-4.21094 -3.32032,-5.25586 -0.7809,-0.41426 -1.41992,-0.85659 -1.41992,-0.98437 0,-0.12778 0.39491,-0.43861 0.87891,-0.69141 2.02712,-1.05883 3.59961,-3.72419 3.59961,-6.09961 0,-3.20076 -1.97563,-6.27161 -4.93555,-7.67187 -2.42193,-1.14576 -4.98789,-1.45989 -11.94336,-1.46289 z m 9.27929,5.50391 c 5.21107,-0.16459 7.36133,0.99503 7.36133,3.97461 0,1.67852 -0.95392,2.79145 -2.84375,3.3164 -0.63611,0.17669 -2.63769,0.32128 -4.44727,0.32227 l -3.28906,0.002 0.0899,-3.75976 0.0898,-3.75977 z"
+         inkscape:label="KPKB" />
+      <g
+         id="g16"
+         transform="matrix(0.73676008,0,0,0.73676008,-9.1326026,91.603464)"
+         inkscape:label="bulat-kecil">
+        <g
+           inkscape:groupmode="layer"
+           inkscape:label="Bulat"
+           id="g2"
+           transform="matrix(0.19813799,0,0,0.19813799,153.41689,102.35442)">
+          <path
+             style="fill:#000000"
+             d="m -100.08554,139.94 c -3.01764,-0.28769 -10.68617,-1.38878 -17.44,-2.50413 -4.20378,-0.69422 -4.09045,-0.73739 4.32,-1.64559 18.70999,-2.02039 29.55189,-5.08358 38.27712,-10.81454 11.28857,-7.41462 16.23871,-18.38492 15.69521,-34.783032 -0.29953,-9.036902 -1.67266,-17.238835 -5.32687,-31.81822 -1.05901,-4.225149 -1.92546,-7.78123 -1.92546,-7.902403 0,-0.405008 7.04993,9.154107 9.42571,12.780474 16.40219,25.036139 17.22362,50.206561 2.10972,64.646291 -6.34698,6.06387 -14.04447,9.61279 -24.81543,11.44114 -4.43722,0.75321 -15.337148,1.07506 -20.32,0.60001 z m -38.7184,-8.52623 c -0.88105,-0.3226 -2.14304,-1.23131 -3.25691,-2.34517 -1.45011,-1.45011 -1.92837,-2.19644 -2.36084,-3.68409 -1.38117,-4.75106 0.62307,-9.46984 4.91803,-11.57898 2.60697,-1.28021 5.84446,-1.27272 8.47632,0.0196 6.93791,3.40676 6.99175,13.55605 0.0906,17.0805 -2.08788,1.0663 -5.70475,1.2999 -7.86721,0.50813 z m 103.00932,-2.51819 c -1.7869,-0.55045 -4.16372,-2.57885 -5.30621,-4.52835 -1.13965,-1.94467 -1.38955,-5.35139 -0.5729,-7.81008 0.82182,-2.47429 3.49176,-5.07218 6.02437,-5.86181 4.68776,-1.46157 9.57259,0.66921 11.71666,5.11086 1.08232,2.24214 1.07975,5.73563 -0.006,7.9865 -2.15552,4.46913 -7.06034,6.58018 -11.85605,5.10288 z m -84.93092,-18.82607 c -10.70833,-1.77759 -18.9303,-6.95662 -24.62567,-15.511723 -4.34764,-6.530671 -6.86801,-14.211872 -7.88528,-24.03159 -0.4156,-4.011875 -0.22027,-15.410376 0.33474,-19.533489 0.52817,-3.923685 2.68857,-17.594384 2.76779,-17.514134 0.0403,0.04077 0.52681,3.962133 1.08124,8.714134 1.09418,9.378085 2.13756,15.614237 3.3847,20.229981 2.80587,10.384706 6.83222,18.006547 12.35175,23.381737 2.83744,2.76324 4.68335,4.042558 8.48282,5.879062 6.09637,2.946732 12.29376,3.992581 21.86791,3.690352 8.878023,-0.280254 17.73192,-1.785606 32.16,-5.467887 3.696,-0.94328 6.7675,-1.673149 6.82555,-1.621931 0.15637,0.137957 -8.29886,6.454942 -11.62555,8.685568 -9.33372,6.25846 -18.984668,10.49256 -28.32,12.42464 -4.94421,1.02327 -12.80121,1.33908 -16.8,0.67528 z M -18.6211,101.7927 C -20.0008,88.772833 -21.39221,81.306105 -23.78391,74.087494 -29.0585,58.167773 -38.05056,49.511908 -52.3384,46.600615 c -4.32945,-0.882169 -16.85837,-0.781885 -23.10714,0.184956 -5.85945,0.906603 -14.72634,2.80478 -22.557046,4.828896 -3.342374,0.863951 -6.119074,1.528788 -6.170444,1.477415 -0.0879,-0.08786 7.466668,-5.763506 10.967487,-8.239759 2.517483,-1.780704 7.703133,-4.825809 11.200003,-6.576833 13.84802,-6.934275 27.4061,-9.066401 38.98612,-6.13091 6.0056,1.522397 11.16154,4.486594 15.77311,9.068119 7.50149,7.4526 11.47603,17.375066 12.63376,31.540209 0.35305,4.319695 0.19196,11.614974 -0.36036,16.32 -0.51781,4.411015 -2.70555,18.239992 -2.88556,18.239992 -0.0977,0 -0.44091,-2.484 -0.76263,-5.52 z m -87.03881,-16.218061 c -5.13731,-6.901304 -8.32825,-12.03155 -11.25916,-18.101931 -4.38736,-9.086913 -6.44142,-16.732828 -6.74845,-25.12 -0.29621,-8.091701 0.72564,-13.273988 3.88053,-19.680001 5.5543,-11.277996 16.49374,-18.307259 32.50145,-20.8841709 4.13387,-0.665468 17.4378,-0.7515434 22.08,-0.142856 5.47892,0.7184 18.22527,2.7484222 18.09226,2.8814298 -0.0715,0.071536 -3.77556,0.5479855 -8.23116,1.0587771 -9.8243,1.1262595 -14.47094,1.8962153 -19.9411,3.3042733 -20.01957,5.1531737 -30.56277,15.3394737 -32.97894,31.8625477 -0.661,4.520282 -0.48836,15.555045 0.3254,20.8 0.86571,5.579726 2.95339,15.442729 4.77521,22.56 0.94608,3.696 1.68356,6.762172 1.63885,6.813715 -0.0447,0.05154 -1.90541,-2.35676 -4.13489,-5.351784 z m 16.14212,2.98508 c -3.5243,-0.947068 -5.442008,-2.671054 -6.00951,-5.402461 -0.225686,-1.086233 -0.401833,-1.262211 -1.624888,-1.623337 -3.850162,-1.136819 -5.986372,-4.426321 -6.367902,-9.805788 -0.19475,-2.745971 0.29427,-5.850732 1.20167,-7.629382 0.82851,-1.624013 2.911588,-3.399331 4.532984,-3.863264 1.717925,-0.491554 2.179893,-0.833747 2.179893,-1.61471 0,-0.8571 1.071973,-2.855631 1.968859,-3.670638 3.855094,-3.503153 13.882744,-3.798973 18.580544,-0.548134 1.17172,0.810819 2.8106,3.50696 2.8106,4.62375 0,0.382679 0.52652,0.712999 1.74984,1.09778 3.36142,1.057296 5.1288,3.385169 5.92765,7.807474 0.69112,3.825963 -0.39763,8.798574 -2.45192,11.19855 -1.21528,1.419789 -3.21566,2.563531 -4.50557,2.576121 -0.50816,0.005 -0.72,0.198359 -0.72,0.657306 0,0.942897 -0.87934,2.901768 -1.69528,3.776497 -0.8998,0.964646 -2.82525,1.953442 -4.86472,2.498232 -2.14161,0.572074 -8.46447,0.526037 -10.71225,-0.078 z m 10.73235,-1.585594 c 3.24819,-0.89113 4.9384,-2.773664 4.9394,-5.501417 5e-4,-1.36 5e-4,-1.36 1.25966,-1.36 1.54816,0 2.82358,-0.4621 3.81251,-1.381316 2.0988,-1.950841 3.29581,-6.80571 2.62614,-10.651216 -0.72664,-4.172703 -2.07739,-5.734017 -5.77781,-6.678507 -1.36597,-0.348648 -1.45966,-0.446196 -1.82236,-1.897501 -0.71712,-2.869422 -1.84475,-4.025699 -4.89764,-5.02204 -2.6545,-0.866324 -7.63195,-0.957377 -10.26011,-0.187691 -3.28669,0.962548 -4.64321,2.355649 -5.431774,5.578271 -0.241086,0.985244 -0.494657,1.36 -0.92022,1.36 -1.168589,0 -3.407789,1.008809 -4.422748,1.992547 -1.649558,1.598817 -2.166088,3.380465 -2.159128,7.447453 0.005,2.97788 0.11863,3.766418 0.73716,5.12 1.290859,2.824901 3.234665,4.32 5.616511,4.32 1.085565,0 1.103234,0.02242 1.323803,1.68 0.248126,1.86467 1.036796,3.377396 2.100596,4.029107 2.88101,1.764976 9.08123,2.303134 13.27601,1.15231 z m -14.666775,-8.387747 c -2.793328,-2.806331 -2.793328,-2.806331 -2.793328,-6.973374 0,-4.167043 0,-4.167043 1.445447,-5.585642 1.445447,-1.418599 1.445447,-1.418599 3.919996,1.073533 2.47456,2.492131 2.47456,2.492131 1.37346,3.426279 -0.98408,0.83488 -1.15678,0.883745 -1.62519,0.459841 -0.83547,-0.756085 -0.95371,-0.585698 -0.95371,1.374275 0,1.848582 0,1.848582 2.17423,4.006156 2.17423,2.157573 2.17423,2.157573 3.09615,1.195299 0.81541,-0.851104 0.87638,-1.047355 0.52779,-1.698717 -0.22149,-0.413854 -0.35122,-1.53161 -0.29615,-2.551744 0.098,-1.815301 0.098,-1.815301 3.88041,1.581088 3.78242,3.396389 3.78242,3.396389 5.84,1.357107 1.95142,-1.934082 2.05757,-2.117197 2.05757,-3.549641 0,-1.670458 -0.4409,-2.204372 -1.19644,-1.448838 -0.44669,0.446692 -0.59989,0.411338 -1.56928,-0.362136 -0.59085,-0.471436 -1.07427,-0.984222 -1.07427,-1.139526 -1e-5,-0.155303 1.03729,-1.344526 2.3051,-2.642719 2.30512,-2.360349 2.30512,-2.360349 3.68,-1.011004 1.37489,1.349346 1.37489,1.349346 1.37489,5.529784 0,4.180439 0,4.180439 -2.7113,6.877654 -2.7113,2.697215 -2.7113,2.697215 -4.81392,2.8311 -2.10263,0.133885 -2.10263,0.133885 -3.37519,-1.244545 -1.27256,-1.378431 -1.27256,-1.378431 -2.63819,-0.03816 -1.34025,1.315355 -1.40716,1.340265 -3.60019,1.340265 -2.23456,0 -2.23456,0 -5.027885,-2.80633 z m 7.526675,-9.014301 c -3.212,-3.109086 -5.84,-5.74574 -5.84,-5.859231 0,-0.11349 1.22056,-1.437949 2.71235,-2.943242 2.71236,-2.736896 2.71236,-2.736896 5.84,-2.715084 3.12765,0.02181 3.12765,0.02181 5.36765,2.575887 1.232,1.404741 2.28853,2.692524 2.34785,2.861741 0.0593,0.169217 -1.12868,1.654749 -2.64,3.301183 -1.51132,1.646434 -2.74785,3.109497 -2.74785,3.25125 0,0.141753 0.2233,0.504479 0.49622,0.806057 0.35935,0.397076 0.46969,1.076 0.4,2.461324 -0.0962,1.913 -0.0962,1.913 -5.93622,-3.739885 z m 4.24626,-4.434962 c 1.21638,-1.375593 1.21638,-1.375593 -0.18157,-2.8 -0.76887,-0.783424 -1.48942,-1.424407 -1.60123,-1.424407 -0.1118,0 -0.83074,0.744132 -1.59764,1.653627 -1.39436,1.653627 -1.39436,1.653627 0.1773,3.036612 0.86441,0.760642 1.66505,1.27651 1.77921,1.146373 0.11415,-0.130137 0.75493,-0.855629 1.42393,-1.612205 z m -55.53838,-33.626211 c -6.93581,-1.442039 -10.11574,-9.749861 -5.86501,-15.32285 3.45715,-4.532556 10.31424,-4.959976 14.378,-0.896216 2.66083,2.660836 3.46764,6.341943 2.21596,10.11042 -1.35714,4.08594 -6.4663,6.994901 -10.72895,6.108646 z m 101.55851,-3.490216 c -4.43841,-1.588346 -6.77614,-5.188071 -6.43705,-9.911992 0.18111,-2.523049 1.0011,-4.329748 2.72797,-6.010599 2.11073,-2.054474 3.38219,-2.5408014 6.64269,-2.5408014 3.16183,0 4.48871,0.4792364 6.69828,2.4192634 2.76847,2.430755 3.7189,7.218141 2.13706,10.764553 -0.85412,1.914899 -3.22563,4.290925 -5.04227,5.051878 -1.95993,0.820977 -4.80019,0.917119 -6.72668,0.227698 z"
+             id="path1" />
+          <path
+             style="fill:#b3b3b3;fill-opacity:1;stroke-width:0.250226"
+             d="m -35.156751,28.055032 c -2.610849,-0.857534 -4.933863,-2.81256 -5.98182,-5.034241 -0.575988,-1.2211 -0.649168,-1.686529 -0.649168,-4.128729 0,-2.510044 0.06189,-2.878531 0.702714,-4.183497 0.905001,-1.842946 3.27063,-4.024132 4.980296,-4.591992 1.866073,-0.6198097 6.18347,-0.4140281 7.677064,0.365915 2.688467,1.403896 4.517053,3.958955 5.005954,6.994752 0.496102,3.08051 -0.394377,5.693278 -2.746194,8.05765 -1.99302,2.00366 -3.31986,2.581453 -6.111247,2.661239 -1.238619,0.0354 -2.533538,-0.02809 -2.877599,-0.141097 z"
+             id="path2" />
+          <path
+             style="fill:#b3b3b3;fill-opacity:1;stroke-width:0.250226"
+             d="m -137.92806,31.181712 c -2.60573,-0.854521 -4.8629,-2.860333 -6.03686,-5.36461 -0.58173,-1.24095 -0.6657,-1.735689 -0.6657,-3.922328 0,-2.169796 0.086,-2.685115 0.64718,-3.878503 3.33546,-7.093004 13.63032,-7.070966 16.99156,0.03637 2.25228,4.762445 0.32301,10.056719 -4.5365,12.449053 -1.96105,0.965421 -4.65612,1.251794 -6.39968,0.680016 z"
+             id="path3" />
+          <path
+             style="fill:#b3b3b3;fill-opacity:1;stroke-width:0.250226"
+             d="m -137.26886,131.61892 c -1.65503,-0.28393 -2.94622,-1.02311 -4.55803,-2.60938 -1.70214,-1.67516 -2.30265,-2.78108 -2.70973,-4.99037 -0.75627,-4.10446 1.43183,-8.34066 5.22686,-10.11926 1.27909,-0.59947 1.7211,-0.67149 4.06262,-0.66199 3.16093,0.0128 4.32855,0.44772 6.35989,2.36888 4.29258,4.05975 3.73679,11.23764 -1.12134,14.48178 -1.98024,1.32235 -4.8934,1.9364 -7.26027,1.53034 z"
+             id="path4" />
+          <path
+             style="fill:#b3b3b3;fill-opacity:1;stroke-width:0.250226"
+             d="m -35.732774,128.76932 c -2.324596,-0.86342 -4.834427,-3.3371 -5.689635,-5.60768 -0.772411,-2.05076 -0.621093,-5.62556 0.314954,-7.44062 1.239397,-2.40328 3.491445,-4.25549 6.094054,-5.01209 3.986986,-1.15905 8.871242,1.06837 10.789333,4.92036 1.166303,2.34223 1.210194,5.60455 0.108897,8.09422 -0.70571,1.59537 -2.648382,3.56383 -4.406525,4.465 -1.312575,0.67279 -1.809939,0.78205 -3.882569,0.8529 -1.612988,0.0551 -2.682972,-0.0323 -3.328509,-0.27209 z"
+             id="path5" />
+          <path
+             style="fill:#0e579b;fill-opacity:1;stroke-width:0.250226"
+             d="m -104.84469,86.392055 c -11.12823,-14.882281 -16.97508,-27.612603 -18.40445,-40.07198 -0.39545,-3.447015 -0.16961,-12.275586 0.37455,-14.641763 2.31614,-10.07131 8.15804,-18.164449 16.90755,-23.4230568 4.1365,-2.486111 10.006986,-4.5960367 16.355315,-5.8783056 4.214373,-0.851241 12.45961,-1.2313572 19.430658,-0.8957787 5.799635,0.2791879 22.571019,2.6905444 21.512113,3.0929689 -0.206436,0.078454 -3.75339,0.5495177 -7.882118,1.0468093 -8.878033,1.0693298 -13.425873,1.8243399 -18.140176,3.0115431 -7.964768,2.0057678 -13.60322,4.3600778 -18.793628,7.8471898 -7.901354,5.308433 -12.460794,12.229406 -14.529604,22.05512 -0.63654,3.023237 -0.90486,13.180378 -0.49001,18.54951 0.43378,5.614337 2.09162,14.25385 5.15255,26.851655 0.76711,3.157189 1.36437,5.829617 1.32725,5.938726 -0.0371,0.109111 -1.30613,-1.458077 -2.82,-3.482638 z"
+             id="path6" />
+          <path
+             style="fill:#0e579b;fill-opacity:1;stroke-width:0.250226"
+             d="m -17.96848,105.84559 c -0.08398,-0.34406 -0.44856,-3.2717 -0.810187,-6.505874 -2.509309,-22.441678 -7.029408,-35.188292 -15.45511,-43.583186 -4.355874,-4.339947 -9.712412,-7.255505 -16.250819,-8.845305 -3.766717,-0.915869 -9.755711,-1.233767 -16.775095,-0.890428 -8.702227,0.425651 -15.11195,1.5644 -30.54778,5.427109 -3.010749,0.753418 -5.512809,1.331125 -5.560139,1.283792 -0.13581,-0.13581 8.228752,-6.349681 11.409561,-8.475941 7.945949,-5.311591 16.939178,-9.440648 24.998411,-11.47751 5.354526,-1.353283 7.42895,-1.601023 13.411277,-1.601654 4.780175,-5.04e-4 5.850899,0.07402 8.132345,0.565999 7.586974,1.636094 13.019468,4.591072 18.351331,9.982118 8.32978,8.42224 12.427023,20.613542 12.425306,36.971362 -6.55e-4,6.243629 -0.237669,9.101652 -1.39032,16.765141 -1.305597,8.680367 -1.760283,11.115717 -1.938781,10.384377 z"
+             id="path7" />
+          <path
+             style="fill:#eb1e23;fill-opacity:1;stroke-width:0.250226"
+             d="m -119.35779,110.09476 c -0.96337,-0.10282 -2.96969,-0.4813 -4.45849,-0.84108 -16.29159,-3.93693 -26.52411,-16.931577 -29.0556,-36.89877 -0.45298,-3.572851 -0.52901,-13.923746 -0.13703,-18.655179 0.21629,-2.610705 2.62482,-18.878345 2.82466,-19.078179 0.0417,-0.04167 0.49918,3.383446 1.01669,7.61138 1.61013,13.15442 2.70674,18.723614 5.03652,25.57831 1.46655,4.314869 4.39503,10.221036 6.56521,13.240725 1.95878,2.725539 5.43192,6.295266 7.69877,7.912852 1.94796,1.390035 6.36095,3.597423 8.95173,4.477671 5.16997,1.756561 11.80154,2.411147 19.68938,1.94349 8.677723,-0.51449 16.066523,-1.791168 29.260999,-5.055883 3.908553,-0.967094 7.150678,-1.714136 7.204722,-1.660092 0.105318,0.105317 -6.997787,5.427879 -10.307566,7.723755 -9.543372,6.6199 -21.400207,11.70011 -30.777795,13.18713 -4.31297,0.68392 -9.92074,0.89719 -13.5122,0.51387 z"
+             id="path8-7" />
+          <path
+             style="fill:#eb1e23;fill-opacity:1;stroke-width:0.250226"
+             d="m -17.997406,104.56143 c -0.07183,-0.32589 -0.422547,-3.06977 -0.779367,-6.097505 -2.645832,-22.450831 -7.306613,-35.128198 -15.92016,-43.302996 -4.769392,-4.526453 -10.760373,-7.467065 -17.87962,-8.776032 -3.11163,-0.572114 -15.034886,-0.654219 -19.738756,-0.135923 -6.550174,0.72173 -14.303024,2.26455 -25.495442,5.073601 -2.186804,0.54884 -4.153499,0.963708 -4.370439,0.921929 -0.38325,-0.07381 6.01208,-4.961505 10.001994,-7.644129 9.084307,-6.107847 19.07344,-10.456366 28.713744,-12.499809 2.97588,-0.630794 3.556632,-0.670361 9.917091,-0.67566 l 6.756102,-0.0056 2.99758,0.815721 c 6.810861,1.853418 11.360785,4.482351 16.28596,9.409982 6.619151,6.622451 10.374745,14.692257 12.002793,25.790921 0.901647,6.146666 0.84755,17.357786 -0.117119,24.27192 -0.756883,5.42488 -2.000048,13.20244 -2.131247,13.33364 -0.06188,0.0619 -0.171282,-0.15413 -0.243114,-0.48003 z"
+             id="path9" />
+          <path
+             style="fill:#0e579b;fill-opacity:1;stroke-width:0.250226"
+             d="m -98.964377,139.86905 c -2.989163,-0.20699 -6.219093,-0.63528 -14.262883,-1.89125 -5.60432,-0.87507 -6.62307,-1.0704 -6.4557,-1.23777 0.0483,-0.0483 2.61851,-0.37879 5.7115,-0.73435 17.652585,-2.02925 26.776375,-4.25103 34.968871,-8.51547 3.738279,-1.94589 6.602871,-3.95318 9.255294,-6.48542 5.943367,-5.67406 9.004084,-12.01944 10.20883,-21.164622 0.571065,-4.334928 0.384644,-14.038852 -0.374949,-19.517627 -0.744135,-5.367266 -2.431456,-13.584264 -4.513123,-21.978214 -0.967029,-3.899372 -1.758236,-7.148307 -1.758236,-7.219856 0,-0.355427 6.039897,7.854223 8.756646,11.902353 6.850374,10.207502 11.48529,21.859364 12.749945,32.052487 0.444151,3.579868 0.330533,9.821489 -0.239479,13.155699 -1.982398,11.59578 -8.825781,20.72149 -19.639039,26.18884 -6.534031,3.30371 -13.605387,4.97311 -23.0534,5.44245 -5.656709,0.28101 -7.330045,0.28141 -11.354277,0.003 z"
+             id="path10" />
+          <path
+             style="fill:#0e579b;fill-opacity:1;stroke-width:0.0884682"
+             d="m -86.703808,88.909403 c -2.214,-0.174255 -3.88651,-0.604567 -5.327481,-1.370682 -2.043905,-1.086674 -2.919384,-2.269733 -3.563586,-4.815568 -0.156298,-0.617677 -0.509928,-0.894608 -1.631727,-1.277818 -1.984447,-0.677896 -3.240028,-1.604909 -4.313408,-3.184659 -1.95863,-2.882605 -2.54249,-8.327265 -1.34126,-12.507693 0.44488,-1.548219 1.06317,-2.565377 2.21098,-3.637302 0.889263,-0.830476 1.840916,-1.447816 2.679377,-1.738121 2.127475,-0.736608 2.329865,-0.88302 2.432941,-1.760034 0.162377,-1.381577 1.416752,-3.331415 2.705877,-4.206099 3.472795,-2.356324 10.106899,-2.925092 15.013426,-1.28716 1.71028,0.570937 2.921731,1.31195 3.689641,2.256855 0.939413,1.155938 1.708198,2.657465 1.869273,3.65091 0.07061,0.435508 0.40455,0.655328 1.696512,1.116753 1.185744,0.423489 1.756608,0.702541 2.462694,1.203824 1.548265,1.099185 2.597423,2.846763 3.223215,5.368899 0.370965,1.495103 0.444691,2.108194 0.444844,3.699215 2.99e-4,3.108876 -0.798281,6.0632 -2.19452,8.11857 -0.470221,0.692201 -1.516451,1.6662 -2.343404,2.181617 -0.788246,0.491293 -1.970749,0.932372 -2.504245,0.934097 -0.552732,0.0018 -0.731236,0.197241 -0.832006,0.911018 -0.15545,1.101098 -0.970642,2.815467 -1.705783,3.587306 -1.043203,1.095279 -3.765615,2.324356 -5.824654,2.629636 -1.092861,0.162031 -5.386945,0.241329 -6.846706,0.126436 z m 6.286173,-1.537721 c 2.555973,-0.467652 4.04538,-1.119413 5.174548,-2.264373 0.947924,-0.961183 1.412379,-2.140424 1.415029,-3.592737 7.19e-4,-0.394163 0.04461,-0.840885 0.09754,-0.992715 0.110904,-0.31814 0.177827,-0.335766 1.54043,-0.405706 1.47903,-0.07592 2.530084,-0.502732 3.478015,-1.412364 2.873809,-2.757699 3.668326,-9.787857 1.586003,-14.0335 -0.283058,-0.577125 -0.525665,-0.909332 -1.043356,-1.428688 -0.816279,-0.818906 -1.750294,-1.308376 -3.445619,-1.805679 -1.74025,-0.510481 -1.683851,-0.455085 -2.126021,-2.088216 -0.406097,-1.499899 -0.860334,-2.374794 -1.623721,-3.127413 -1.218981,-1.201786 -3.311709,-2.006141 -6.114467,-2.35014 -1.165859,-0.143093 -4.369636,-0.143508 -5.485031,-7.11e-4 -2.540959,0.325304 -4.532228,1.188772 -5.733415,2.486164 -0.799141,0.863147 -1.204651,1.732634 -1.782405,3.821808 -0.211554,0.764984 -0.429888,0.967821 -1.132862,1.052451 -1.357538,0.163431 -3.195087,1.083935 -4.223393,2.115668 -1.03954,1.043009 -1.50812,2.000054 -1.83744,3.752854 -0.2183,1.16189 -0.21798,6.246773 4.5e-4,7.197403 0.33409,1.453978 1.34354,3.231472 2.425499,4.270935 1.083799,1.041228 2.093766,1.485457 3.553612,1.563036 0.648905,0.03448 0.963489,0.08955 1.087295,0.190317 0.13478,0.1097 0.223403,0.427965 0.391558,1.406171 0.329346,1.915893 0.895126,3.157842 1.762291,3.868418 1.006614,0.824844 3.388569,1.580346 5.975385,1.895254 1.078938,0.131346 5.127722,0.05235 6.060075,-0.118237 z"
+             id="path11" />
+          <path
+             style="fill:#a8acaf;fill-opacity:1;stroke-width:0.176936"
+             d="m -81.225962,73.815509 c -0.884639,-0.643344 -10.338672,-9.921879 -10.338672,-10.146751 0,-0.355873 4.703766,-4.915754 5.346646,-5.183095 0.782164,-0.325262 4.945898,-0.387135 5.7446,-0.08537 0.273952,0.103506 0.727995,0.402087 1.008984,0.663512 0.723823,0.673426 3.824054,4.298269 3.824054,4.471149 0,0.17576 -1.132171,1.541311 -3.508493,4.231717 -0.988474,1.119123 -1.797761,2.14191 -1.798414,2.272861 -6.53e-4,0.13095 0.177961,0.489246 0.39692,0.796214 0.332251,0.465796 0.398107,0.78962 0.398107,1.957545 0,0.83462 -0.0763,1.425389 -0.18905,1.463763 -0.103977,0.03539 -0.502084,-0.163309 -0.884682,-0.44155 z m -1.206187,-7.685496 c 2.080526,-2.193614 2.104043,-2.40436 0.452592,-4.055811 -0.664427,-0.664427 -1.334196,-1.208049 -1.488375,-1.208049 -0.286745,0 -2.434122,2.422012 -2.633173,2.96994 -0.162213,0.446521 0.238935,1.106636 1.098312,1.807345 0.863374,0.703968 1.620316,1.235672 1.761569,1.23739 0.05272,6.41e-4 0.416808,-0.337226 0.809075,-0.750815 z"
+             id="path12" />
+          <path
+             style="fill:#a8acaf;fill-opacity:1;stroke-width:0.176936"
+             d="m -89.441396,81.275994 c -0.243288,-0.04001 -0.633214,-0.11463 -0.866502,-0.165823 -0.560771,-0.123056 -4.699734,-4.188081 -5.299079,-5.204417 -0.466929,-0.791791 -0.469537,-0.816361 -0.469537,-4.423412 0,-3.483448 0.01622,-3.653291 0.409373,-4.28559 0.48031,-0.772478 1.9173,-2.084124 2.283289,-2.084124 0.325399,0 4.252059,3.828255 4.397866,4.287652 0.119746,0.377285 -0.502539,1.150354 -1.246463,1.54849 -0.362733,0.19413 -0.491783,0.172265 -0.962793,-0.163123 -0.299152,-0.213016 -0.624078,-0.337756 -0.722057,-0.277202 -0.100136,0.06189 -0.178144,0.876298 -0.178144,1.859836 v 1.749737 l 0.862403,1.036282 c 1.205612,1.448691 3.073887,3.051629 3.556768,3.051629 0.234284,0 0.651043,-0.273772 1.010056,-0.663512 0.529564,-0.574888 0.596622,-0.746227 0.502055,-1.28279 -0.180886,-1.026316 -0.31297,-3.523628 -0.201703,-3.813586 0.155834,-0.406097 0.562986,-0.130885 3.043624,2.057318 4.421232,3.900027 4.344027,3.879908 6.569779,1.712034 0.824283,-0.802849 1.61077,-1.674731 1.747745,-1.937514 0.25048,-0.480536 0.333355,-2.197767 0.140728,-2.916 -0.152142,-0.567285 -0.598645,-0.654408 -1.173952,-0.229066 l -0.505382,0.373645 -0.8685,-0.662326 c -0.477674,-0.36428 -0.911977,-0.775629 -0.965118,-0.914109 -0.05314,-0.13848 0.135205,-0.542547 0.418544,-0.897926 0.938237,-1.17679 3.682604,-3.742532 4.003085,-3.742532 0.173311,0 0.732708,0.418012 1.243105,0.928917 1.254099,1.25535 1.359528,1.720975 1.287796,5.687514 -0.04987,2.757811 -0.10654,3.302018 -0.40729,3.91129 -0.458389,0.928624 -4.228663,4.645577 -5.135673,5.063041 -0.516643,0.237792 -1.133907,0.3268 -2.286009,0.329636 l -1.578263,0.0039 -1.191283,-1.150087 c -0.655206,-0.632548 -1.313919,-1.150087 -1.463806,-1.150087 -0.149888,0 -0.734885,0.425937 -1.299994,0.946527 -0.565108,0.52059 -1.186713,1.027814 -1.381343,1.127164 -0.400958,0.204671 -2.603108,0.398847 -3.273325,0.288628 z"
+             id="path13" />
+        </g>
+      </g>
+    </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer3"
+       inkscape:label="Layer 2">
+      <text
+         xml:space="preserve"
+         style="font-size:4.57363px;font-family:'.SF Camera';-inkscape-font-specification:'.SF Camera';text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;white-space:pre;inline-size:122.636;display:inline;fill:#a8acaf;stroke-width:0.264583"
+         x="59.317932"
+         y="197.89471"
+         id="text1"
+         transform="matrix(1.0548984,0,0,1,22.199151,-2.9513543)"><tspan
+           x="59.317932"
+           y="197.89471"
+           id="tspan5"><tspan
+             style="font-weight:bold;font-family:Sans;-inkscape-font-specification:'Sans, Bold';fill:#ff2a2a"
+             id="tspan1">SISTEM INFORMASI KOPERASI ONLINE</tspan></tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:44.7089px;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#eb1e23;fill-opacity:1;stroke-width:2.09574"
+         x="22.313797"
+         y="194.92793"
+         id="text2"><tspan
+           sodipodi:role="line"
+           id="tspan2"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:44.7089px;font-family:Phosphate;-inkscape-font-specification:'Phosphate, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#eb1e23;fill-opacity:1;stroke-width:2.09574"
+           x="22.313797"
+           y="194.92793">My</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/fe/src/assets/images/phone-illustration.svg b/fe/src/assets/images/phone-illustration.svg
deleted file mode 100644
index 279c65a..0000000
--- a/fe/src/assets/images/phone-illustration.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="280.056" height="304.433" viewBox="0 0 280.056 304.433">
-  <g id="Group_2" data-name="Group 2" transform="translate(-104.693 -1.265)">
-    <rect id="Rectangle_76" data-name="Rectangle 76" width="4.104" height="33.821" rx="0.751" transform="matrix(0.788, -0.616, 0.616, 0.788, 250.1, 52.551)" fill="#3f3d56"/>
-    <path id="Rectangle_80" data-name="Rectangle 80" d="M12.78,0H124.507a12.78,12.78,0,0,1,12.78,12.78V266.236a12.78,12.78,0,0,1-12.78,12.78H12.78A12.78,12.78,0,0,1,0,266.236V12.78A12.78,12.78,0,0,1,12.78,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 104.693, 85.834)" fill="#475569"/>
-    <path id="Path_176" data-name="Path 176" d="M109.443,0H93.695V1.894a8.976,8.976,0,0,1-8.981,8.976H34.63a8.976,8.976,0,0,1-8.981-8.976V0H10.9A10.9,10.9,0,0,0,0,10.9V253.6a10.9,10.9,0,0,0,10.9,10.9h98.54a10.9,10.9,0,0,0,10.9-10.9V10.922A10.9,10.9,0,0,0,109.443,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 116.052, 86.183)" fill="#f1f5f9"/>
-    <rect id="Rectangle_81" data-name="Rectangle 81" width="19.171" height="3.891" rx="1.269" transform="matrix(0.788, -0.616, 0.616, 0.788, 153.48, 58.292)" fill="#e6e8ec"/>
-    <circle id="Ellipse_5" data-name="Ellipse 5" cx="2.209" cy="2.209" r="2.209" transform="matrix(0.788, -0.616, 0.616, 0.788, 170.71, 44.496)" fill="#e6e8ec"/>
-    <circle id="Ellipse_11" data-name="Ellipse 11" cx="25.971" cy="25.971" r="25.971" transform="matrix(0.788, -0.616, 0.616, 0.788, 210.99, 151.214)" fill="#fff"/>
-    <path id="Path_222" data-name="Path 222" d="M69.422,34.712A34.711,34.711,0,1,1,34.711,0,34.711,34.711,0,0,1,69.422,34.712ZM30.7,53.085,56.448,27.337a2.237,2.237,0,0,0,0-3.168L53.28,21.024a2.233,2.233,0,0,0-3.164,0l-21,21L19.31,32.2a2.246,2.246,0,0,0-3.168,0l-3.168,3.187a2.247,2.247,0,0,0,0,3.168L27.532,53.1a2.237,2.237,0,0,0,3.168,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 196.054, 147.189)" fill="#94a3b8"/>
-  </g>
-</svg>
diff --git a/fe/src/assets/images/woman-illustration.svg b/fe/src/assets/images/woman-illustration.svg
deleted file mode 100644
index f023ddf..0000000
--- a/fe/src/assets/images/woman-illustration.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="251.014" height="317.588" viewBox="0 0 251.014 317.588">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.505" y1="1.007" x2="0.505" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="gray" stop-opacity="0.251"/>
-      <stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
-      <stop offset="1" stop-color="gray" stop-opacity="0.102"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_1" data-name="Group 1" transform="translate(-125.954 18.154)">
-    <rect id="Rectangle_77" data-name="Rectangle 77" width="3.785" height="18.307" rx="1.276" transform="translate(287.945 23.197) rotate(-11)" fill="#3f3d56"/>
-    <rect id="Rectangle_78" data-name="Rectangle 78" width="4.265" height="31.863" rx="1.276" transform="translate(294.207 56.13) rotate(-11)" fill="#3f3d56"/>
-    <rect id="Rectangle_79" data-name="Rectangle 79" width="4.059" height="32.137" rx="1.276" transform="translate(302.481 98.339) rotate(-11)" fill="#3f3d56"/>
-    <path id="Path_190" data-name="Path 190" d="M0,0A.7.7,0,0,0,.83.107,2.943,2.943,0,0,1,0,0Z" transform="translate(269.32 191.355) rotate(-11)" fill="url(#linear-gradient)"/>
-    <path id="Path_192" data-name="Path 192" d="M43.471,0l-.819,4.463L42.02,7.877l-1.15,6.245L29.721,21.927s-1-.86-2.663-2.216C22.489,15.948,12.885,8.288,5.834,4.175A23.753,23.753,0,0,0,0,1.487Z" transform="translate(259.796 205.712) rotate(-11)" fill="#f8d4d4"/>
-    <path id="Path_194" data-name="Path 194" d="M44.318,12.282s13,2.231,13.761-3.32S51.388.41,45.072.037.849,2.268.849,2.268s-6.686,8.918,17.462,10.41Z" transform="translate(249.226 198.636) rotate(-11)" fill="#1e293b"/>
-    <rect id="Rectangle_82" data-name="Rectangle 82" width="68.005" height="80.639" transform="translate(221.269 29.959) rotate(-11)" fill="#334155"/>
-    <path id="Path_198" data-name="Path 198" d="M25.9,6.7a10.913,10.913,0,0,0-4.142,2.932C14.9,16.42,5.088,32.343,5.088,32.343-7.462,17.39,6.426,5.582,12.345,1.523,13.785.541,14.751,0,14.751,0Z" transform="translate(142.668 179.037) rotate(-11)" fill="#f8d4d4"/>
-    <path id="Path_199" data-name="Path 199" d="M36.043,0s3.346,23.41,14.865,28.984S36.043,44.976,36.043,44.976L0,31.588S20.44,24.9,16.35,5.2Z" transform="translate(236.89 52.85) rotate(-11)" fill="#f8d4d4"/>
-    <path id="Path_200" data-name="Path 200" d="M43.508,0l-.815,4.448L42.03,7.875,40.88,14.12l-11.149,7.8s-1-.853-2.663-2.208C22.5,15.947,12.9,8.286,5.834,4.174A23.6,23.6,0,0,0,0,1.486Z" transform="translate(218.498 199.899) rotate(-11)" fill="#f8d4d4"/>
-    <path id="Path_202" data-name="Path 202" d="M43.03,14.445S54.7,14.527,55.4,8.96,49.041.408,43.03.035.5,2.439.5,2.439s-5.181,10.515,17.79,12Z" transform="translate(207.79 192.853) rotate(-11)" fill="#334155"/>
-    <path id="Path_204" data-name="Path 204" d="M89.962,101.836c-.51-.251-1.021-.51-1.523-.761l-1.371-1.729-17.98-22.8v.4c-.122,3.808-1.416,33.98-11.514,36.767-10.776,2.97-23.775,3.716-29.7-16.35S11.119,33.446,0,30.842L16.54,17.279s10.951,12.809,15.413,25.07c-.167-.761-7.73-36.1-1.523-42.349H84.694s8.377,23.859,14.119,35.678c4.47,9.177,11.179,30.873,15.5,45.555C118.588,95.728,103.563,108.53,89.962,101.836Z" transform="translate(242.03 186.268) rotate(-11)" fill="#475569"/>
-    <path id="Path_205" data-name="Path 205" d="M60.518,52.029C52.141,56.986,15.366,54.965,3.4,54.161L.14,53.925c-.35,0,.053-.2.053-.2l.335-3.374L9.449,27.69,57.2,0c-.968,2.917-1.287,7.38-1.211,12.489C56.208,28.908,60.518,52.029,60.518,52.029Z" transform="translate(260.759 136.409) rotate(-11)" opacity="0.1"/>
-    <path id="Path_206" data-name="Path 206" d="M60.916,52.005C52.539,56.963,15.764,54.941,3.8,54.138L.54,53.909,0,53.863l.594-.152L3.53,52.95,9.843,27.682,57.591,0C56.624,2.917,56.3,7.38,56.38,12.489,56.6,28.893,60.916,52.005,60.916,52.005Z" transform="translate(260.16 135.409) rotate(-11)" fill="#cbd5e1"/>
-    <path id="Path_208" data-name="Path 208" d="M2.406,0,13.555,6.686A10.914,10.914,0,0,0,9.413,9.618C8.484,6.907,2.653,3.122,0,1.508,1.439.541,2.406,0,2.406,0Z" transform="translate(154.789 176.698) rotate(-11)" opacity="0.1"/>
-    <path id="Path_209" data-name="Path 209" d="M.761.107A.662.662,0,0,1,0,0,2.642,2.642,0,0,0,.761.107Z" transform="translate(268.311 189.076) rotate(-11)" opacity="0.1"/>
-    <path id="Path_210" data-name="Path 210" d="M135.295,56.833s-10.037,1.112-17.1-6.321c0,0-29.7,8.552-39.76,27.872S0,135.614,0,135.614s11.9,6.686,10.776,10.029L55.744,119.63s15.992-11.514,20.432-14.119,28.992-18.581,34.193,24.895,0,38.275,0,38.275,7.433,2.6,18.208-18.208,44.215-25.641,44.215-25.641l1.858-21.917s6.633-14.53,1.523-20.561a12.946,12.946,0,0,1-2.978-6.29c-.845-5.567-.313-12.841,11.521-20.548,18.208-11.9,37.109-18.43,29.657-27.4s-55.228-42.823-55.228-42.823L148.124,2.658S192,26.711,191.085,30.723c-7.252,5.121-31.631,15.312-45.785,14.961C145.3,45.684,147.928,56.46,135.295,56.833Z" transform="translate(128.76 43.985) rotate(-11)" fill="#94a3b8"/>
-    <path id="Path_211" data-name="Path 211" d="M22.2,9.081A72.58,72.58,0,0,1,20.143,0L.449,5.2A21.591,21.591,0,0,1,0,16.565,21.179,21.179,0,0,0,22.2,9.078Z" transform="translate(252.344 50.975) rotate(-11)" opacity="0.1"/>
-    <circle id="Ellipse_10" data-name="Ellipse 10" cx="21.179" cy="21.179" r="21.179" transform="translate(232.292 28.197) rotate(-11)" fill="#f8d4d4"/>
-    <path id="Path_213" data-name="Path 213" d="M0,0S12.261,24.156,8.544,31.581" transform="translate(312.28 207.976) rotate(-11)" opacity="0.1"/>
-    <path id="Path_221" data-name="Path 221" d="M57.637.16C63.515.83,69.1,3.35,74.886,4.729a8.56,8.56,0,0,0,4.463.167c2.246-.693,4.074-3.046,6.4-2.978,1.434.046,2.7,1.021,3.884,1.957a47.776,47.776,0,0,1,5.331,4.752c3.99,4.333,6.465,10.167,10.1,14.881S119.433,31.9,124.6,29.733c-3.513,13.712-20.022,24.138-32.488,24.991-4.973.341-10.068-.693-14.881.761a12.894,12.894,0,0,1-3.755.914c-2.772,0-5-2.543-6.732-5.018C62.7,45.563,59.494,38.96,54.932,33.652c-1.523-1.759-3.282-3.427-5.414-3.746s-4.089.7-5.985,1.683c-3.13,1.622-6.328,3.3-8.757,6.092S30.815,44.6,31.82,48.343c.541,2.026,1.775,3.854,1.8,5.97.046,3.381-2.936,5.849-3.526,9.138a34.266,34.266,0,0,0-.145,4.158c-.259,4.506-3.209,8.193-6.282,11.034-1.2,1.1-2.526,2.285-2.879,3.983-.236,1.165,0,2.39-.152,3.572-.449,2.924-3.366,4.409-5.948,4.79A17.157,17.157,0,0,1,5.763,89.93c3.61-1.707,5.834-6.564,5-10.913-1.15-6.032-7.212-10.365-6.691-16.5a19.119,19.119,0,0,1,1.676-5.429A49.745,49.745,0,0,0,8.6,46.8a17.334,17.334,0,0,0-.175-8.2c-.761-2.361-2.353-4.241-3.7-6.237A35.466,35.466,0,0,1,.441,23.578a6.177,6.177,0,0,1-.41-2.909A6,6,0,0,1,1.9,17.661c3.313-3.482,6.854-7.1,11.294-8.1A25.42,25.42,0,0,1,19.6,9.322,75.68,75.68,0,0,0,30.741,8.85c3.046-.358,8.193-.312,10.776-2.285,2.406-1.844,3.762-4.158,6.724-5.331A19.8,19.8,0,0,1,57.641.16Z" transform="translate(202.236 5.622) rotate(-11)" fill="#475569"/>
-  </g>
-</svg>
diff --git a/fe/src/components/account-dropdown/AccountDropdown.vue b/fe/src/components/account-dropdown/AccountDropdown.vue
index 859874c..302a1dd 100644
--- a/fe/src/components/account-dropdown/AccountDropdown.vue
+++ b/fe/src/components/account-dropdown/AccountDropdown.vue
@@ -19,6 +19,7 @@ import { useRoleSwitcher } from '@/composables/useRoleSwitcher'
 interface Props {
   class?: string
   boxClass?: string
+  open?: boolean
 }
 
 const props = defineProps<Props>()
@@ -61,7 +62,9 @@ const handleLogout = async (event: MouseEvent) => {
 
 <template>
   <div v-bind="$attrs" :class="[
-    'invisible opacity-0 scale-95 transition-all duration-200 delay-0 group-hover/profile:visible group-hover/profile:opacity-100 group-hover/profile:scale-100 group-hover/profile:delay-200',
+    'invisible opacity-0 scale-95 transition-all duration-200 delay-0',
+    'xl:group-hover/profile:visible xl:group-hover/profile:opacity-100 xl:group-hover/profile:scale-100 xl:group-hover/profile:delay-200',
+    props.open && 'max-xl:visible max-xl:opacity-100 max-xl:scale-100',
     props.class,
   ]">
     <Box
diff --git a/fe/src/components/account-dropdown/AccountTrigger.vue b/fe/src/components/account-dropdown/AccountTrigger.vue
index c9532f2..2091312 100644
--- a/fe/src/components/account-dropdown/AccountTrigger.vue
+++ b/fe/src/components/account-dropdown/AccountTrigger.vue
@@ -10,12 +10,19 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const open = defineModel<boolean>('open', { default: false })
 const authStore = useAuthStore()
+
+function handleClick(event: MouseEvent) {
+  if (!window.matchMedia('(max-width: 1279px)').matches) return
+  event.stopPropagation()
+  open.value = !open.value
+}
 </script>
 
 <template>
   <div :class="['side-menu__account group/profile transition-[width]', props.class]">
-    <div :class="['flex cursor-pointer items-center transition', props.innerClass]">
+    <div :class="['flex cursor-pointer items-center transition', props.innerClass]" @click="handleClick">
       <div :class="[
         'relative flex-none overflow-hidden rounded-full border-4',
         props.avatarClass ?? 'h-10 w-10 border-background/20 dark:border-foreground/20',
diff --git a/fe/src/components/notification-dropdown/NotificationDropdown.vue b/fe/src/components/notification-dropdown/NotificationDropdown.vue
index 6f77938..2ec7241 100644
--- a/fe/src/components/notification-dropdown/NotificationDropdown.vue
+++ b/fe/src/components/notification-dropdown/NotificationDropdown.vue
@@ -11,6 +11,7 @@ import {
 interface Props {
   class?: string
   boxClass?: string
+  open?: boolean
 }
 
 const props = defineProps<Props>()
@@ -74,7 +75,9 @@ async function handleMarkAllAsRead(event: MouseEvent) {
   <div
     v-bind="$attrs"
     :class="[
-      'invisible opacity-0 scale-95 transition-all duration-200 delay-0 group-hover/notifications:visible group-hover/notifications:opacity-100 group-hover/notifications:scale-100 group-hover/notifications:delay-200',
+      'invisible opacity-0 scale-95 transition-all duration-200 delay-0',
+      'xl:group-hover/notifications:visible xl:group-hover/notifications:opacity-100 xl:group-hover/notifications:scale-100 xl:group-hover/notifications:delay-200',
+      props.open && 'max-xl:visible max-xl:opacity-100 max-xl:scale-100',
       props.class,
     ]"
   >
diff --git a/fe/src/docs/pages/map.vue b/fe/src/docs/pages/map.vue
index ffaeab2..f6d5c6c 100644
--- a/fe/src/docs/pages/map.vue
+++ b/fe/src/docs/pages/map.vue
@@ -118,7 +118,7 @@ const markersData = {
     </SectionContent>
     <PreviewCode title="components/ui/map/Map.vue">
       {{`
-      <script setup lang="ts">
+      <${""}script setup lang="ts">
 import "maplibre-gl/dist/maplibre-gl.css";
 import maplibregl, { type MapOptions } from "maplibre-gl";
 import { ref, onMounted } from "vue";
@@ -318,7 +318,7 @@ const toggleFullscreen = () => {
   }
   isFullscreen.value = !isFullscreen.value;
 };
-</script>
+</${""}script>
 
       <template>
         <div data-scope="map" data-part="root" ref="mapRef" :class="cn(map, className)">
diff --git a/fe/src/main/side-menu.ts b/fe/src/main/side-menu.ts
index a7916e0..3fd1bab 100644
--- a/fe/src/main/side-menu.ts
+++ b/fe/src/main/side-menu.ts
@@ -141,11 +141,6 @@ const mainMenu: (string | Menu)[] = [
         route_name: 'crud-data-list',
         title: 'Data List',
       },
-      {
-        icon: 'CircleGauge',
-        route_name: 'crud-form',
-        title: 'Form',
-      },
     ],
   },
   {
@@ -268,12 +263,6 @@ const mainMenu: (string | Menu)[] = [
           },
         ],
       },
-      ...authMenu,
-      {
-        icon: 'CircleGauge',
-        route_name: 'error-page',
-        title: 'Error Page',
-      },
     ],
   },
   'UI COMPONENTS',
diff --git a/fe/src/modules/membership-application/pages/MembershipApplication.vue b/fe/src/modules/membership-application/pages/MembershipApplication.vue
index f6f76cc..e6f3aac 100644
--- a/fe/src/modules/membership-application/pages/MembershipApplication.vue
+++ b/fe/src/modules/membership-application/pages/MembershipApplication.vue
@@ -513,7 +513,7 @@ function stepLabelClass(stepId: number) {
         <div
           class="before:bg-foreground/10 relative flex flex-col justify-center px-5 before:absolute before:bottom-0 before:top-0 before:mt-6 before:hidden before:h-0.5 before:w-[69%] sm:px-10 lg:flex-row before:lg:block">
           <div v-for="step in steps" :key="step.id" class="z-10 flex flex-1 items-center lg:block lg:text-center">
-            <Button :class="stepButtonClass(step.id)" :variant="step.id === currentStep ? 'default' : 'ghost'">
+            <Button :class="stepButtonClass(step.id)" :variant="step.id === currentStep ? 'primary' : 'ghost'">
               {{ step.id }}
             </Button>
             <div :class="stepLabelClass(step.id)">
@@ -810,7 +810,7 @@ function stepLabelClass(stepId: number) {
                 <Input id="employer_letter" type="file" accept=".pdf,.jpg,.jpeg,.png"
                   @change="handleFileChange('employer_letter', $event)" />
                 <FieldError v-if="fieldErrors['documents.employer_letter']">{{ fieldErrors['documents.employer_letter']
-                  }}</FieldError>
+                }}</FieldError>
               </Field>
 
               <div class="col-span-12 mt-2 rounded-lg border border-foreground/10 bg-foreground/5 p-4">
diff --git a/fe/src/modules/membership-application/pages/MembershipApplicationDetail.vue b/fe/src/modules/membership-application/pages/MembershipApplicationDetail.vue
index 67ea0ea..b3cddfe 100644
--- a/fe/src/modules/membership-application/pages/MembershipApplicationDetail.vue
+++ b/fe/src/modules/membership-application/pages/MembershipApplicationDetail.vue
@@ -27,6 +27,12 @@ import {
   submitBoardReview,
   submitManagementReview,
 } from '../services/membership-application.service'
+import {
+  reviewDecisionBadgeLook,
+  reviewDecisionBadgeVariant,
+  statusBadgeLook,
+  statusBadgeVariant,
+} from '../utils/membership-application-badge.utils'
 import type {
   BoardReviewDecision,
   ManagementReviewDecision,
@@ -90,13 +96,6 @@ function statusLabel(status: MembershipApplicationStatus): string {
   return labels[status] ?? status
 }
 
-function statusBadgeVariant(status: MembershipApplicationStatus) {
-  if (status === 'COMPLETED') return 'success'
-  if (status === 'MANAGEMENT_REJECTED') return 'danger'
-  if (status === 'PENDING_BOARD' || status === 'PENDING_NOTIFICATION') return 'pending'
-  return 'outline'
-}
-
 function getWorkflowProgress(status: MembershipApplicationStatus) {
   switch (status) {
     case 'SUBMITTED':
@@ -307,20 +306,6 @@ function reviewDecisionLabel(decision: string | null, stage: string): string {
   return decision
 }
 
-function reviewDecisionBadgeVariant(decision: string | null, stage: string) {
-  if (stage === 'MANAGEMENT') {
-    if (decision === 'APPROVED') return 'success'
-    if (decision === 'REJECTED') return 'danger'
-  }
-
-  if (stage === 'BOARD') {
-    if (decision === 'PASS') return 'success'
-    if (decision === 'FAIL') return 'danger'
-  }
-
-  return 'outline'
-}
-
 function reviewTimelineDotClass(review: MembershipApplicationReviewDetail): string {
   const variant = reviewDecisionBadgeVariant(review.decision, review.stage)
 
@@ -500,7 +485,8 @@ onUnmounted(() => {
             <div class="text-xl font-semibold">{{ application.application_number }}</div>
           </div>
           <div class="flex flex-wrap items-center gap-2">
-            <Badge :variant="statusBadgeVariant(application.status)" class="whitespace-nowrap">
+            <Badge :variant="statusBadgeVariant(application.status)" :look="statusBadgeLook(application.status)"
+              class="whitespace-nowrap">
               {{ statusLabel(application.status) }}
             </Badge>
             <Badge v-if="application.board_result"
@@ -539,7 +525,7 @@ onUnmounted(() => {
           <div v-for="step in WORKFLOW_STEPS" :key="step.id"
             class="z-10 flex flex-1 items-center lg:block lg:text-center">
             <Button type="button" :class="workflowStepButtonClass(step.id)"
-              :variant="step.id === workflowProgress?.currentStep && application.status !== 'COMPLETED' && !workflowProgress?.failed ? 'default' : 'ghost'"
+              :variant="step.id === workflowProgress?.currentStep && application.status !== 'COMPLETED' && !workflowProgress?.failed ? 'primary' : 'ghost'"
               disabled>
               {{ step.id }}
             </Button>
@@ -840,7 +826,11 @@ onUnmounted(() => {
                       {{ formatDateTime(review.reviewed_at) }}
                     </div>
                   </div>
-                  <Badge :variant="reviewDecisionBadgeVariant(review.decision, review.stage)" class="whitespace-nowrap">
+                  <Badge
+                    :variant="reviewDecisionBadgeVariant(review.decision, review.stage)"
+                    :look="reviewDecisionBadgeLook(review.decision, review.stage)"
+                    class="whitespace-nowrap"
+                  >
                     {{ reviewDecisionLabel(review.decision, review.stage) }}
                   </Badge>
                 </div>
diff --git a/fe/src/modules/membership-application/pages/MembershipApplicationEdit.vue b/fe/src/modules/membership-application/pages/MembershipApplicationEdit.vue
index 75a4e39..40700be 100644
--- a/fe/src/modules/membership-application/pages/MembershipApplicationEdit.vue
+++ b/fe/src/modules/membership-application/pages/MembershipApplicationEdit.vue
@@ -37,6 +37,12 @@ import {
   updateMembershipApplication,
   uploadMembershipApplicationDocument,
 } from '../services/membership-application.service'
+import {
+  reviewDecisionBadgeLook,
+  reviewDecisionBadgeVariant,
+  statusBadgeLook,
+  statusBadgeVariant,
+} from '../utils/membership-application-badge.utils'
 import type {
   DocumentUploadType,
   MembershipApplicationDetail,
@@ -166,13 +172,6 @@ function statusLabel(status: MembershipApplicationStatus): string {
   return labels[status] ?? status
 }
 
-function statusBadgeVariant(status: MembershipApplicationStatus) {
-  if (status === 'COMPLETED') return 'success'
-  if (status === 'MANAGEMENT_REJECTED') return 'danger'
-  if (status === 'PENDING_BOARD' || status === 'PENDING_NOTIFICATION') return 'pending'
-  return 'outline'
-}
-
 function workflowStepButtonClass(stepId: number) {
   const progress = workflowProgress.value
   if (!progress) return 'mx-2 size-12 rounded-full shadow-none bg-background border border-foreground/15'
@@ -268,20 +267,6 @@ function reviewDecisionLabel(decision: string | null, stage: string): string {
   return decision
 }
 
-function reviewDecisionBadgeVariant(decision: string | null, stage: string) {
-  if (stage === 'MANAGEMENT') {
-    if (decision === 'APPROVED') return 'success'
-    if (decision === 'REJECTED') return 'danger'
-  }
-
-  if (stage === 'BOARD') {
-    if (decision === 'PASS') return 'success'
-    if (decision === 'FAIL') return 'danger'
-  }
-
-  return 'outline'
-}
-
 function reviewTimelineDotClass(review: MembershipApplicationReviewDetail): string {
   const variant = reviewDecisionBadgeVariant(review.decision, review.stage)
 
@@ -543,12 +528,8 @@ onUnmounted(() => {
           {{ application.application_number }} · {{ application.applicant?.name ?? '-' }}
         </p>
       </div>
-      <Button
-        look="outline"
-        variant="secondary"
-        type="button"
-        @click="router.push({ name: 'view-membership-application', params: { id: applicationId } })"
-      >
+      <Button look="outline" variant="secondary" type="button"
+        @click="router.push({ name: 'view-membership-application', params: { id: applicationId } })">
         Lihat
       </Button>
       <Button look="outline" variant="secondary" type="button"
@@ -581,7 +562,8 @@ onUnmounted(() => {
             <div class="text-xl font-semibold">{{ application.application_number }}</div>
           </div>
           <div class="flex flex-wrap items-center gap-2">
-            <Badge :variant="statusBadgeVariant(application.status)" class="whitespace-nowrap">
+            <Badge :variant="statusBadgeVariant(application.status)" :look="statusBadgeLook(application.status)"
+              class="whitespace-nowrap">
               {{ statusLabel(application.status) }}
             </Badge>
             <Badge v-if="application.board_result"
@@ -620,7 +602,7 @@ onUnmounted(() => {
           <div v-for="step in WORKFLOW_STEPS" :key="step.id"
             class="z-10 flex flex-1 items-center lg:block lg:text-center">
             <Button type="button" :class="workflowStepButtonClass(step.id)"
-              :variant="step.id === workflowProgress?.currentStep && application.status !== 'COMPLETED' && !workflowProgress?.failed ? 'default' : 'ghost'"
+              :variant="step.id === workflowProgress?.currentStep && application.status !== 'COMPLETED' && !workflowProgress?.failed ? 'primary' : 'ghost'"
               disabled>
               {{ step.id }}
             </Button>
@@ -635,29 +617,39 @@ onUnmounted(() => {
         <Box raised="single" class="w-full p-0">
           <div class="w-full px-5 py-4">
             <TabsList class="mb-0 flex w-full">
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="personal">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="personal">
                 Maklumat Peribadi
               </TabsTrigger>
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="contact">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="contact">
                 Hubungan & Alamat
               </TabsTrigger>
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="employment">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="employment">
                 Pekerjaan & Caruman
               </TabsTrigger>
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="heirs">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="heirs">
                 Waris
               </TabsTrigger>
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="references">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="references">
                 Pencadang & Penyokong
               </TabsTrigger>
-              <TabsTrigger class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm" value="documents">
+              <TabsTrigger
+                class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
+                value="documents">
                 Dokumen
               </TabsTrigger>
-              <TabsTrigger
-                v-if="application.reviews.length"
+              <TabsTrigger v-if="application.reviews.length"
                 class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 text-xs sm:px-3 sm:text-sm"
-                value="reviews"
-              >
+                value="reviews">
                 Sejarah Semakan
               </TabsTrigger>
             </TabsList>
@@ -679,28 +671,25 @@ onUnmounted(() => {
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="ic_number">No. Kad Pengenalan</FieldLabel>
               <Input id="ic_number" v-model="form.applicant.ic_number" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.ic_number']">{{ fieldErrors['applicant.ic_number'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.ic_number']">{{ fieldErrors['applicant.ic_number'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="birth_date">Tarikh Lahir</FieldLabel>
               <Input id="birth_date" v-model="form.applicant.birth_date" type="date" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.birth_date']">{{ fieldErrors['applicant.birth_date'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.birth_date']">{{ fieldErrors['applicant.birth_date'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="birth_place">Tempat Lahir</FieldLabel>
               <Input id="birth_place" v-model="form.applicant.birth_place" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.birth_place']">{{ fieldErrors['applicant.birth_place'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.birth_place']">{{ fieldErrors['applicant.birth_place'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel>Jantina</FieldLabel>
-              <SelectRoot
-                :key="`gender-${form.applicant.gender}`"
-                class="w-full"
-                :collection="genderCollection"
-                :default-value="genderInitial"
-                :disabled="!canEdit"
-                @value-change="setGenderValue"
-              >
+              <SelectRoot :key="`gender-${form.applicant.gender}`" class="w-full" :collection="genderCollection"
+                :default-value="genderInitial" :disabled="!canEdit" @value-change="setGenderValue">
                 <SelectControl>
                   <SelectTrigger :aria-invalid="!!fieldErrors['applicant.gender']">
                     <SelectValueText placeholder="Pilih jantina" />
@@ -719,14 +708,9 @@ onUnmounted(() => {
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel>Status Perkahwinan</FieldLabel>
-              <SelectRoot
-                :key="`marriage-${form.applicant.marriage_status}`"
-                class="w-full"
-                :collection="marriageStatusCollection"
-                :default-value="marriageStatusInitial"
-                :disabled="!canEdit"
-                @value-change="setMarriageStatusValue"
-              >
+              <SelectRoot :key="`marriage-${form.applicant.marriage_status}`" class="w-full"
+                :collection="marriageStatusCollection" :default-value="marriageStatusInitial" :disabled="!canEdit"
+                @value-change="setMarriageStatusValue">
                 <SelectControl>
                   <SelectTrigger :aria-invalid="!!fieldErrors['applicant.marriage_status']">
                     <SelectValueText placeholder="Pilih status" />
@@ -741,7 +725,8 @@ onUnmounted(() => {
                   </SelectItemGroup>
                 </SelectContent>
               </SelectRoot>
-              <FieldError v-if="fieldErrors['applicant.marriage_status']">{{ fieldErrors['applicant.marriage_status'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.marriage_status']">{{ fieldErrors['applicant.marriage_status'] }}
+              </FieldError>
             </Field>
           </div>
         </TabsContent>
@@ -756,12 +741,14 @@ onUnmounted(() => {
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="phone_number">No. Telefon</FieldLabel>
               <Input id="phone_number" v-model="form.applicant.phone_number" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.phone_number']">{{ fieldErrors['applicant.phone_number'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.phone_number']">{{ fieldErrors['applicant.phone_number'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="office_number">No. Pejabat</FieldLabel>
               <Input id="office_number" v-model="form.applicant.office_number" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.office_number']">{{ fieldErrors['applicant.office_number'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.office_number']">{{ fieldErrors['applicant.office_number'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="postcode">Poskod</FieldLabel>
@@ -776,51 +763,51 @@ onUnmounted(() => {
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="employer_name">Nama Majikan</FieldLabel>
               <Input id="employer_name" v-model="form.applicant.employer_name" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.employer_name']">{{ fieldErrors['applicant.employer_name'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.employer_name']">{{ fieldErrors['applicant.employer_name'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="current_position">Jawatan Semasa</FieldLabel>
               <Input id="current_position" v-model="form.applicant.current_position" type="text" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.current_position']">{{ fieldErrors['applicant.current_position'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.current_position']">{{ fieldErrors['applicant.current_position']
+              }}</FieldError>
             </Field>
             <Field class="col-span-12">
               <FieldLabel for="employer_address">Alamat Majikan</FieldLabel>
               <Textarea id="employer_address" v-model="form.applicant.employer_address" rows="3" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.employer_address']">{{ fieldErrors['applicant.employer_address'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.employer_address']">{{ fieldErrors['applicant.employer_address']
+              }}</FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="start_work_date">Tarikh Mula Berkhidmat</FieldLabel>
               <Input id="start_work_date" v-model="form.applicant.start_work_date" type="date" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.start_work_date']">{{ fieldErrors['applicant.start_work_date'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.start_work_date']">{{ fieldErrors['applicant.start_work_date'] }}
+              </FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="stock_monthly_contribution">Caruman Saham (RM)</FieldLabel>
               <Input id="stock_monthly_contribution" v-model="form.applicant.stock_monthly_contribution" type="number"
                 min="0" step="0.01" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.stock_monthly_contribution']">{{ fieldErrors['applicant.stock_monthly_contribution'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.stock_monthly_contribution']">{{
+                fieldErrors['applicant.stock_monthly_contribution'] }}</FieldError>
             </Field>
             <Field class="col-span-12 sm:col-span-4">
               <FieldLabel for="fee_monthly_contribution">Caruman Yuran (RM)</FieldLabel>
               <Input id="fee_monthly_contribution" v-model="form.applicant.fee_monthly_contribution" type="number"
                 min="0" step="0.01" :disabled="!canEdit" />
-              <FieldError v-if="fieldErrors['applicant.fee_monthly_contribution']">{{ fieldErrors['applicant.fee_monthly_contribution'] }}</FieldError>
+              <FieldError v-if="fieldErrors['applicant.fee_monthly_contribution']">{{
+                fieldErrors['applicant.fee_monthly_contribution'] }}</FieldError>
             </Field>
           </div>
         </TabsContent>
 
         <TabsContent value="heirs" class="mt-6">
           <div class="space-y-4">
-            <div v-for="(heir, index) in form.heirs" :key="index"
-              class="rounded-lg border border-foreground/10 p-4">
+            <div v-for="(heir, index) in form.heirs" :key="index" class="rounded-lg border border-foreground/10 p-4">
               <div class="mb-4 flex items-center justify-between">
                 <div class="font-medium">Waris {{ index + 1 }}</div>
-                <Button
-                  v-if="canEdit && form.heirs.length > 1"
-                  type="button"
-                  look="outline"
-                  size="sm"
-                  @click="removeHeir(index)"
-                >
+                <Button v-if="canEdit && form.heirs.length > 1" type="button" look="outline" size="sm"
+                  @click="removeHeir(index)">
                   Buang
                 </Button>
               </div>
@@ -828,23 +815,21 @@ onUnmounted(() => {
                 <Field class="col-span-12 sm:col-span-6">
                   <FieldLabel :for="`heir-name-${index}`">Nama</FieldLabel>
                   <Input :id="`heir-name-${index}`" v-model="heir.name" type="text" :disabled="!canEdit" />
-                  <FieldError v-if="fieldErrors[`heirs.${index}.name`]">{{ fieldErrors[`heirs.${index}.name`] }}</FieldError>
+                  <FieldError v-if="fieldErrors[`heirs.${index}.name`]">{{ fieldErrors[`heirs.${index}.name`] }}
+                  </FieldError>
                 </Field>
                 <Field class="col-span-12 sm:col-span-6">
                   <FieldLabel :for="`heir-ic-${index}`">No. Kad Pengenalan</FieldLabel>
                   <Input :id="`heir-ic-${index}`" v-model="heir.ic_number" type="text" :disabled="!canEdit" />
-                  <FieldError v-if="fieldErrors[`heirs.${index}.ic_number`]">{{ fieldErrors[`heirs.${index}.ic_number`] }}</FieldError>
+                  <FieldError v-if="fieldErrors[`heirs.${index}.ic_number`]">{{ fieldErrors[`heirs.${index}.ic_number`]
+                  }}</FieldError>
                 </Field>
                 <Field class="col-span-12 sm:col-span-6">
                   <FieldLabel>Hubungan</FieldLabel>
-                  <SelectRoot
-                    :key="`heir-relationship-${index}-${heir.relationship}`"
-                    class="w-full"
+                  <SelectRoot :key="`heir-relationship-${index}-${heir.relationship}`" class="w-full"
                     :collection="relationshipCollection"
-                    :default-value="apiValueToLabel(RELATIONSHIP_OPTIONS, heir.relationship)"
-                    :disabled="!canEdit"
-                    @value-change="(details) => setHeirRelationshipValue(index, details)"
-                  >
+                    :default-value="apiValueToLabel(RELATIONSHIP_OPTIONS, heir.relationship)" :disabled="!canEdit"
+                    @value-change="(details) => setHeirRelationshipValue(index, details)">
                     <SelectControl>
                       <SelectTrigger :aria-invalid="!!fieldErrors[`heirs.${index}.relationship`]">
                         <SelectValueText placeholder="Pilih hubungan" />
@@ -859,12 +844,14 @@ onUnmounted(() => {
                       </SelectItemGroup>
                     </SelectContent>
                   </SelectRoot>
-                  <FieldError v-if="fieldErrors[`heirs.${index}.relationship`]">{{ fieldErrors[`heirs.${index}.relationship`] }}</FieldError>
+                  <FieldError v-if="fieldErrors[`heirs.${index}.relationship`]">{{
+                    fieldErrors[`heirs.${index}.relationship`] }}</FieldError>
                 </Field>
                 <Field class="col-span-12 sm:col-span-6">
                   <FieldLabel :for="`heir-phone-${index}`">No. Telefon</FieldLabel>
                   <Input :id="`heir-phone-${index}`" v-model="heir.phone_number" type="text" :disabled="!canEdit" />
-                  <FieldError v-if="fieldErrors[`heirs.${index}.phone_number`]">{{ fieldErrors[`heirs.${index}.phone_number`] }}</FieldError>
+                  <FieldError v-if="fieldErrors[`heirs.${index}.phone_number`]">{{
+                    fieldErrors[`heirs.${index}.phone_number`] }}</FieldError>
                 </Field>
               </div>
             </div>
@@ -882,15 +869,9 @@ onUnmounted(() => {
           <div class="grid grid-cols-12 gap-4 gap-y-5">
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="proposer_ic_number">No. KP Pencadang</FieldLabel>
-              <Input
-                id="proposer_ic_number"
-                v-model="form.references.proposer.ic_number"
-                type="text"
-                placeholder="Contoh: 900101011234"
-                :disabled="!canEdit || referenceLookupLoading.proposer"
-                @input="handleReferenceIcInput('proposer')"
-                @blur="lookupReference('proposer')"
-              />
+              <Input id="proposer_ic_number" v-model="form.references.proposer.ic_number" type="text"
+                placeholder="Contoh: 900101011234" :disabled="!canEdit || referenceLookupLoading.proposer"
+                @input="handleReferenceIcInput('proposer')" @blur="lookupReference('proposer')" />
               <p v-if="form.references.proposer.name" class="mt-1 text-sm text-success">
                 {{ form.references.proposer.name }}
               </p>
@@ -900,15 +881,9 @@ onUnmounted(() => {
             </Field>
             <Field class="col-span-12 sm:col-span-6">
               <FieldLabel for="supporter_ic_number">No. KP Penyokong</FieldLabel>
-              <Input
-                id="supporter_ic_number"
-                v-model="form.references.supporter.ic_number"
-                type="text"
-                placeholder="Contoh: 850505055678"
-                :disabled="!canEdit || referenceLookupLoading.supporter"
-                @input="handleReferenceIcInput('supporter')"
-                @blur="lookupReference('supporter')"
-              />
+              <Input id="supporter_ic_number" v-model="form.references.supporter.ic_number" type="text"
+                placeholder="Contoh: 850505055678" :disabled="!canEdit || referenceLookupLoading.supporter"
+                @input="handleReferenceIcInput('supporter')" @blur="lookupReference('supporter')" />
               <p v-if="form.references.supporter.name" class="mt-1 text-sm text-success">
                 {{ form.references.supporter.name }}
               </p>
@@ -925,11 +900,7 @@ onUnmounted(() => {
             Muat naik fail baharu untuk menggantikan dokumen sedia ada.
           </div>
           <div class="space-y-4">
-            <div
-              v-for="type in DOCUMENT_UPLOAD_TYPES"
-              :key="type"
-              class="rounded-lg border border-foreground/10 p-4"
-            >
+            <div v-for="type in DOCUMENT_UPLOAD_TYPES" :key="type" class="rounded-lg border border-foreground/10 p-4">
               <div class="flex flex-wrap items-start justify-between gap-3">
                 <div>
                   <div class="font-medium">{{ DOCUMENT_TYPE_LABELS[type] }}</div>
@@ -939,23 +910,15 @@ onUnmounted(() => {
                   <div v-else class="mt-1 text-sm opacity-70">Tiada dokumen dimuat naik.</div>
                 </div>
                 <div v-if="documentsByType[type]" class="flex flex-wrap items-center gap-2">
-                  <Button
-                    type="button"
-                    look="outline"
-                    size="sm"
+                  <Button type="button" look="outline" size="sm"
                     :disabled="previewLoading && previewDocument?.id === documentsByType[type]?.id"
-                    @click="documentsByType[type] && handleViewDocument(documentsByType[type]!)"
-                  >
+                    @click="documentsByType[type] && handleViewDocument(documentsByType[type]!)">
                     <Eye class="mr-2 size-4" />
                     Lihat
                   </Button>
-                  <Button
-                    type="button"
-                    look="outline"
-                    size="sm"
+                  <Button type="button" look="outline" size="sm"
                     :disabled="downloadingDocumentId === documentsByType[type]?.id"
-                    @click="documentsByType[type] && handleDownloadDocument(documentsByType[type]!)"
-                  >
+                    @click="documentsByType[type] && handleDownloadDocument(documentsByType[type]!)">
                     <Download class="mr-2 size-4" />
                     Muat Turun
                   </Button>
@@ -965,13 +928,8 @@ onUnmounted(() => {
                 <FieldLabel :for="`document-${type}`">
                   {{ documentsByType[type] ? 'Ganti Dokumen' : 'Muat Naik Dokumen' }}
                 </FieldLabel>
-                <Input
-                  :id="`document-${type}`"
-                  type="file"
-                  :accept="documentAccept(type)"
-                  :disabled="uploadingDocumentType === type"
-                  @change="handleDocumentUpload(type, $event)"
-                />
+                <Input :id="`document-${type}`" type="file" :accept="documentAccept(type)"
+                  :disabled="uploadingDocumentType === type" @change="handleDocumentUpload(type, $event)" />
                 <FieldError v-if="fieldErrors[`documents.${type}`]">{{ fieldErrors[`documents.${type}`] }}</FieldError>
                 <p v-if="uploadingDocumentType === type" class="mt-1 text-sm opacity-70">Memuat naik...</p>
               </Field>
@@ -981,19 +939,11 @@ onUnmounted(() => {
 
         <TabsContent v-if="application.reviews.length" value="reviews" class="mt-6">
           <div class="relative ms-3 ps-8">
-            <div
-              v-for="(review, index) in sortedReviews"
-              :key="review.id"
-              class="relative pb-8 last:pb-0"
-            >
-              <span
-                class="absolute -start-8 top-1.5 flex size-3.5 rounded-full border-2 ring-4 ring-background"
-                :class="reviewTimelineDotClass(review)"
-              />
-              <span
-                v-if="index < sortedReviews.length - 1"
-                class="absolute -start-[1.375rem] top-5 h-[calc(100%-0.25rem)] w-px bg-foreground/15"
-              />
+            <div v-for="(review, index) in sortedReviews" :key="review.id" class="relative pb-8 last:pb-0">
+              <span class="absolute -inset-s-8 top-1.5 flex size-3.5 rounded-full border-2 ring-4 ring-background"
+                :class="reviewTimelineDotClass(review)" />
+              <span v-if="index < sortedReviews.length - 1"
+                class="absolute -inset-s-5.5 top-5 h-[calc(100%-0.25rem)] w-px bg-foreground/15" />
 
               <div class="rounded-lg border border-foreground/10 p-4">
                 <div class="flex flex-wrap items-start justify-between gap-2">
@@ -1003,10 +953,8 @@ onUnmounted(() => {
                       {{ formatDateTime(review.reviewed_at) }}
                     </div>
                   </div>
-                  <Badge
-                    :variant="reviewDecisionBadgeVariant(review.decision, review.stage)"
-                    class="whitespace-nowrap"
-                  >
+                  <Badge :variant="reviewDecisionBadgeVariant(review.decision, review.stage)"
+                    :look="reviewDecisionBadgeLook(review.decision, review.stage)" class="whitespace-nowrap">
                     {{ reviewDecisionLabel(review.decision, review.stage) }}
                   </Badge>
                 </div>
diff --git a/fe/src/modules/membership-application/pages/MembershipApplicationList.vue b/fe/src/modules/membership-application/pages/MembershipApplicationList.vue
index bb3a89d..d547b04 100644
--- a/fe/src/modules/membership-application/pages/MembershipApplicationList.vue
+++ b/fe/src/modules/membership-application/pages/MembershipApplicationList.vue
@@ -33,6 +33,11 @@ import axios from 'axios'
 import { useMembershipApplicationList } from '../composables/useMembershipApplicationList'
 import { usePermissions } from '@/composables/usePermissions'
 import { batchCompleteMembershipApplications } from '../services/membership-application.service'
+import {
+  boardResultBadgeVariant,
+  statusBadgeLook,
+  statusBadgeVariant,
+} from '../utils/membership-application-badge.utils'
 import type {
   BatchCompleteFailedItem,
   BatchCompleteResponse,
@@ -203,25 +208,12 @@ function statusLabel(status: MembershipApplicationStatus): string {
   return labels[status] ?? status
 }
 
-function statusBadgeVariant(status: MembershipApplicationStatus) {
-  if (status === 'COMPLETED') return 'success'
-  if (status === 'MANAGEMENT_REJECTED') return 'danger'
-  if (status === 'PENDING_BOARD' || status === 'PENDING_NOTIFICATION') return 'pending'
-  return 'outline'
-}
-
 function boardResultLabel(result: MembershipApplicationBoardResult | null): string {
   if (result === 'PASS') return 'Lulus'
   if (result === 'FAIL') return 'Gagal'
   return '-'
 }
 
-function boardResultBadgeVariant(result: MembershipApplicationBoardResult | null) {
-  if (result === 'PASS') return 'success'
-  if (result === 'FAIL') return 'danger'
-  return 'outline'
-}
-
 function formatSubmittedAt(value: string | null): string {
   if (!value) return '-'
   return dayjs(value).format('DD/MM/YYYY HH:mm')
@@ -238,44 +230,44 @@ function goToApplicationEdit(id: string) {
 const headers = computed<TableHeader[]>(() => {
   const base: TableHeader[] = [
     { title: 'Bil.', key: '#', sortable: false },
-  { title: 'No. Permohonan', key: 'application_number', sortable: true },
-  {
-    title: 'Nama Pemohon',
-    key: 'applicant_name',
-    sortable: false,
-    exportValue: (item) => item.applicant?.name ?? '',
-  },
-  {
-    title: 'Emel',
-    key: 'applicant_email',
-    sortable: false,
-    exportValue: (item) => item.applicant?.email ?? '',
-  },
-  {
-    title: 'No. IC',
-    key: 'applicant_ic_number',
-    sortable: false,
-    exportValue: (item) => item.applicant?.ic_number ?? '',
-  },
-  {
-    title: 'Status',
-    key: 'status',
-    sortable: true,
-    exportValue: (item) => statusLabel(item.status),
-  },
-  {
-    title: 'Keputusan Lembaga',
-    key: 'board_result',
-    sortable: false,
-    exportValue: (item) => boardResultLabel(item.board_result),
-  },
-  {
-    title: 'Tarikh Hantar',
-    key: 'submitted_at',
-    sortable: true,
-    exportValue: (item) => formatSubmittedAt(item.submitted_at),
-  },
-  { title: 'Tindakan', key: 'actions', sortable: false },
+    { title: 'No. Permohonan', key: 'application_number', sortable: true },
+    {
+      title: 'Nama Pemohon',
+      key: 'applicant_name',
+      sortable: false,
+      exportValue: (item) => item.applicant?.name ?? '',
+    },
+    {
+      title: 'Emel',
+      key: 'applicant_email',
+      sortable: false,
+      exportValue: (item) => item.applicant?.email ?? '',
+    },
+    {
+      title: 'No. IC',
+      key: 'applicant_ic_number',
+      sortable: false,
+      exportValue: (item) => item.applicant?.ic_number ?? '',
+    },
+    {
+      title: 'Status',
+      key: 'status',
+      sortable: true,
+      exportValue: (item) => statusLabel(item.status),
+    },
+    {
+      title: 'Keputusan Lembaga',
+      key: 'board_result',
+      sortable: false,
+      exportValue: (item) => boardResultLabel(item.board_result),
+    },
+    {
+      title: 'Tarikh Hantar',
+      key: 'submitted_at',
+      sortable: true,
+      exportValue: (item) => formatSubmittedAt(item.submitted_at),
+    },
+    { title: 'Tindakan', key: 'actions', sortable: false },
   ]
 
   if (canBatchComplete.value) {
@@ -321,41 +313,20 @@ const headers = computed<TableHeader[]>(() => {
       <AlertCloseTrigger @click="error = null" />
     </AlertRoot>
 
-    <DataTable
-      :headers="headers"
-      :items="applications"
-      :loading="loading"
-      :pagination="pagination"
-      :current-sort="sortBy"
-      show-pagination
-      exportable
-      export-file-name="permohonan-keahlian"
-      v-model:page="page"
-      v-model:items-per-page="itemsPerPage"
-      @update:sort-by="handleSortUpdate"
-    >
+    <DataTable :headers="headers" :items="applications" :loading="loading" :pagination="pagination"
+      :current-sort="sortBy" show-pagination exportable export-file-name="permohonan-keahlian" v-model:page="page"
+      v-model:items-per-page="itemsPerPage" @update:sort-by="handleSortUpdate">
       <template #toolbar>
         <div class="flex w-full flex-wrap items-center gap-3">
           <div class="relative w-full max-w-md flex-1">
-            <Search
-              class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
-              aria-hidden="true"
-            />
-            <Input
-              v-model="search"
-              type="search"
-              placeholder="Cari no. permohonan, nama, emel, IC..."
-              class="w-full pl-9"
-              aria-label="Cari permohonan keahlian"
-            />
+            <Search class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
+              aria-hidden="true" />
+            <Input v-model="search" type="search" placeholder="Cari no. permohonan, nama, emel, IC..."
+              class="w-full pl-9" aria-label="Cari permohonan keahlian" />
           </div>
 
-          <SelectRoot
-            class="w-full sm:w-56"
-            :collection="statusFilterCollection"
-            :default-value="statusFilterInitial"
-            @value-change="setStatusFilterValue"
-          >
+          <SelectRoot class="w-full sm:w-56" :collection="statusFilterCollection" :default-value="statusFilterInitial"
+            @value-change="setStatusFilterValue">
             <SelectControl>
               <SelectTrigger aria-label="Tapis status">
                 <SelectValueText placeholder="Semua Status" />
@@ -364,11 +335,7 @@ const headers = computed<TableHeader[]>(() => {
             <SelectContent>
               <SelectItemGroup>
                 <SelectItemGroupLabel>Status</SelectItemGroupLabel>
-                <SelectItem
-                  v-for="item in statusFilterCollection.items"
-                  :key="item.label"
-                  :item="item"
-                >
+                <SelectItem v-for="item in statusFilterCollection.items" :key="item.label" :item="item">
                   <SelectItemText>{{ item.label }}</SelectItemText>
                 </SelectItem>
               </SelectItemGroup>
@@ -376,21 +343,13 @@ const headers = computed<TableHeader[]>(() => {
           </SelectRoot>
 
           <template v-if="canBatchComplete">
-            <Button
-              type="button"
-              look="outline"
-              variant="secondary"
+            <Button type="button" look="outline" variant="secondary"
               :disabled="!selectableApplications.length || loading"
-              @click="toggleSelectAllOnPage(!allSelectableSelected)"
-            >
+              @click="toggleSelectAllOnPage(!allSelectableSelected)">
               {{ allSelectableSelected ? 'Nyahpilih Halaman' : 'Pilih Halaman' }}
             </Button>
-            <Button
-              type="button"
-              variant="primary"
-              :disabled="!selectedIds.length || loading || batchSubmitting"
-              @click="openBatchConfirm"
-            >
+            <Button type="button" variant="primary" :disabled="!selectedIds.length || loading || batchSubmitting"
+              @click="openBatchConfirm">
               Selesaikan Terpilih ({{ selectedIds.length }})
             </Button>
           </template>
@@ -398,11 +357,9 @@ const headers = computed<TableHeader[]>(() => {
       </template>
 
       <template v-if="canBatchComplete" #item.select="{ item }">
-        <CheckboxRoot
-          v-if="isSelectable(item as MembershipApplicationListItem)"
+        <CheckboxRoot v-if="isSelectable(item as MembershipApplicationListItem)"
           :checked="isSelected((item as MembershipApplicationListItem).id)"
-          @checked-change="({ checked }) => toggleSelection((item as MembershipApplicationListItem).id)"
-        >
+          @checked-change="({ checked }) => toggleSelection((item as MembershipApplicationListItem).id)">
           <CheckboxControl />
         </CheckboxRoot>
       </template>
@@ -422,6 +379,7 @@ const headers = computed<TableHeader[]>(() => {
       <template #item.status="{ item }">
         <Badge
           :variant="statusBadgeVariant((item as MembershipApplicationListItem).status)"
+          :look="statusBadgeLook((item as MembershipApplicationListItem).status)"
           class="whitespace-nowrap"
         >
           {{ statusLabel((item as MembershipApplicationListItem).status) }}
@@ -429,11 +387,9 @@ const headers = computed<TableHeader[]>(() => {
       </template>
 
       <template #item.board_result="{ item }">
-        <Badge
-          v-if="(item as MembershipApplicationListItem).board_result"
+        <Badge v-if="(item as MembershipApplicationListItem).board_result"
           :variant="boardResultBadgeVariant((item as MembershipApplicationListItem).board_result)"
-          class="whitespace-nowrap"
-        >
+          class="whitespace-nowrap">
           {{ boardResultLabel((item as MembershipApplicationListItem).board_result) }}
         </Badge>
         <span v-else class="opacity-50">-</span>
@@ -445,36 +401,21 @@ const headers = computed<TableHeader[]>(() => {
 
       <template #item.actions="{ item }">
         <div class="flex items-center gap-2">
-          <Button
-            v-if="hasPermission('lihat permohonan keahlian')"
-            type="button"
-            variant="outline"
-            size="sm"
-            class="bg-green-600 text-white"
-            title="Lihat butiran permohonan"
-            @click="goToApplicationDetail((item as MembershipApplicationListItem).id)"
-          >
+          <Button v-if="hasPermission('lihat permohonan keahlian')" type="button" variant="ghost" size="sm"
+            class="bg-green-600 text-white" title="Lihat butiran permohonan"
+            @click="goToApplicationDetail((item as MembershipApplicationListItem).id)">
             <Eye class="size-4" aria-hidden="true" />
           </Button>
-          <Button
-            v-if="hasPermission('kemaskini permohonan keahlian')"
-            type="button"
-            variant="outline"
-            size="sm"
-            class="bg-blue-600 text-white"
-            title="Kemaskini permohonan"
-            @click="goToApplicationEdit((item as MembershipApplicationListItem).id)"
-          >
+          <Button v-if="hasPermission('kemaskini permohonan keahlian')" type="button" variant="ghost" size="sm"
+            class="bg-blue-600 text-white" title="Kemaskini permohonan"
+            @click="goToApplicationEdit((item as MembershipApplicationListItem).id)">
             <Pencil class="size-4" aria-hidden="true" />
           </Button>
         </div>
       </template>
     </DataTable>
 
-    <DialogRoot
-      :open="batchConfirmOpen"
-      @openChange="(details) => { batchConfirmOpen = details.open }"
-    >
+    <DialogRoot :open="batchConfirmOpen" @openChange="(details) => { batchConfirmOpen = details.open }">
       <DialogContent>
         <div class="p-5 text-center">
           <div class="mt-2 text-2xl font-medium">Selesaikan Permohonan Terpilih?</div>
@@ -486,13 +427,8 @@ const headers = computed<TableHeader[]>(() => {
           <DialogCloseTrigger class="mr-2 w-32" :disabled="batchSubmitting">
             Batal
           </DialogCloseTrigger>
-          <Button
-            class="w-32"
-            type="button"
-            variant="primary"
-            :disabled="batchSubmitting"
-            @click="confirmBatchComplete"
-          >
+          <Button class="w-32" type="button" variant="primary" :disabled="batchSubmitting"
+            @click="confirmBatchComplete">
             {{ batchSubmitting ? 'Memproses...' : 'Sahkan' }}
           </Button>
         </div>
diff --git a/fe/src/modules/membership-application/utils/membership-application-badge.utils.ts b/fe/src/modules/membership-application/utils/membership-application-badge.utils.ts
new file mode 100644
index 0000000..7030be9
--- /dev/null
+++ b/fe/src/modules/membership-application/utils/membership-application-badge.utils.ts
@@ -0,0 +1,68 @@
+import type { BadgeVariants } from '@/components/ui/styles/badge.styles'
+import type {
+  MembershipApplicationBoardResult,
+  MembershipApplicationStatus,
+} from '../types/membership-application.types'
+
+export function statusBadgeVariant(
+  status: MembershipApplicationStatus,
+): NonNullable<BadgeVariants['variant']> {
+  if (status === 'COMPLETED') return 'success'
+  if (status === 'MANAGEMENT_REJECTED') return 'danger'
+  if (status === 'PENDING_BOARD' || status === 'PENDING_NOTIFICATION') return 'pending'
+  return 'ghost'
+}
+
+export function statusBadgeLook(
+  status: MembershipApplicationStatus,
+): BadgeVariants['look'] {
+  if (
+    status === 'COMPLETED' ||
+    status === 'MANAGEMENT_REJECTED' ||
+    status === 'PENDING_BOARD' ||
+    status === 'PENDING_NOTIFICATION'
+  ) {
+    return undefined
+  }
+
+  return 'outline'
+}
+
+export function boardResultBadgeVariant(
+  result: MembershipApplicationBoardResult | null,
+): NonNullable<BadgeVariants['variant']> {
+  if (result === 'PASS') return 'success'
+  if (result === 'FAIL') return 'danger'
+  return 'ghost'
+}
+
+export function reviewDecisionBadgeVariant(
+  decision: string | null,
+  stage: string,
+): NonNullable<BadgeVariants['variant']> {
+  if (stage === 'MANAGEMENT') {
+    if (decision === 'APPROVED') return 'success'
+    if (decision === 'REJECTED') return 'danger'
+  }
+
+  if (stage === 'BOARD') {
+    if (decision === 'PASS') return 'success'
+    if (decision === 'FAIL') return 'danger'
+  }
+
+  return 'ghost'
+}
+
+export function reviewDecisionBadgeLook(
+  decision: string | null,
+  stage: string,
+): BadgeVariants['look'] {
+  if (
+    (stage === 'MANAGEMENT' && (decision === 'APPROVED' || decision === 'REJECTED')) ||
+    (stage === 'BOARD' && (decision === 'PASS' || decision === 'FAIL'))
+  ) {
+    return undefined
+  }
+
+  return 'outline'
+}
diff --git a/fe/src/modules/profile/pages/ProfileOverview2.vue b/fe/src/modules/profile/pages/ProfileOverview2.vue
index 6c55ebf..af0410b 100644
--- a/fe/src/modules/profile/pages/ProfileOverview2.vue
+++ b/fe/src/modules/profile/pages/ProfileOverview2.vue
@@ -156,9 +156,8 @@ onMounted(async () => {
           <div
             class="mt-6 flex flex-1 items-center justify-center border-t border-foreground/15 px-5 pt-5 lg:mt-0 lg:border-0 lg:pt-0">
             <div
-              class="relative aspect-[1.75/1] w-full max-w-[17rem] overflow-hidden rounded-2xl bg-gradient-to-br from-primary via-primary/95 to-primary/75 p-4 text-primary-foreground shadow-lg ring-1 ring-white/20 sm:max-w-xs sm:p-5"
-              role="img"
-              aria-label="Kad digital anggota">
+              class="relative aspect-1.75/1 w-full max-w-68 overflow-hidden rounded-2xl bg-linear-to-br from-primary via-primary/95 to-primary/75 p-4 text-primary-foreground shadow-lg ring-1 ring-white/20 sm:max-w-xs sm:p-5"
+              role="img" aria-label="Kad digital anggota">
               <div class="pointer-events-none absolute inset-0 bg-noise opacity-30" />
               <div class="pointer-events-none absolute -right-10 -top-10 size-36 rounded-full bg-white/10" />
               <div class="pointer-events-none absolute -bottom-12 -left-8 size-40 rounded-full bg-white/5" />
@@ -212,9 +211,6 @@ onMounted(async () => {
             <TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="2">
               <Lucide class="mr-2 size-4" icon="Lock" /> Kata Laluan
             </TabsTrigger>
-            <TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="4">
-              <Lucide class="mr-2 size-4" icon="MoreHorizontal" /> Lain-lain
-            </TabsTrigger>
           </TabsList>
         </div>
       </Box>
@@ -238,357 +234,6 @@ onMounted(async () => {
       <TabsContent value="6" class="mt-8">
         <HeirTab embedded />
       </TabsContent>
-      <!-- Perkhidmatan -->
-      <TabsContent value="4" class="mt-8">
-        <div class="grid grid-cols-12 gap-x-6 gap-y-8">
-          <!-- BEGIN: Latest Uploads -->
-          <Box raised="single" class="col-span-12 p-0 lg:col-span-6">
-            <div class="flex items-center border-b border-foreground/15 px-5 py-5 sm:py-3">
-              <h2 class="mr-auto text-base font-medium">Latest Uploads</h2>
-              <MenuRoot class="w-auto ml-auto sm:hidden">
-                <MenuTrigger as-child>
-                  <a class="block size-5" href="#">
-                    <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                  </a>
-                </MenuTrigger>
-                <MenuPositioner>
-                  <MenuContent class="w-40">
-                    <MenuItem value="all">All Files</MenuItem>
-                  </MenuContent>
-                </MenuPositioner>
-              </MenuRoot>
-              <Button variant="ghost" class="shadow-none border border-foreground/15 hidden sm:flex">All Files</Button>
-            </div>
-            <div class="p-5">
-              <div class="flex items-center">
-                <FileIcon class="w-12" variant="directory" />
-                <div class="ml-4">
-                  <a class="font-medium" href="">Documentation</a>
-                  <div class="mt-0.5 text-xs opacity-70">40 KB</div>
-                </div>
-                <MenuRoot class="w-auto ml-auto">
-                  <MenuTrigger as-child>
-                    <a class="block size-5" href="#">
-                      <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                    </a>
-                  </MenuTrigger>
-                  <MenuPositioner>
-                    <MenuContent class="w-40">
-                      <MenuItem value="share">
-                        <Lucide class="mr-2 size-4" icon="Users" /> Share File
-                      </MenuItem>
-                      <MenuItem value="delete">
-                        <Lucide class="mr-2 size-4" icon="Trash" /> Delete
-                      </MenuItem>
-                    </MenuContent>
-                  </MenuPositioner>
-                </MenuRoot>
-              </div>
-              <div class="mt-5 flex items-center">
-                <FileIcon class="w-12 text-xs" variant="file" type="MP3" />
-                <div class="ml-4">
-                  <a class="font-medium" href="">Celine Dion - Ashes</a>
-                  <div class="mt-0.5 text-xs opacity-70">40 KB</div>
-                </div>
-                <MenuRoot class="w-auto ml-auto">
-                  <MenuTrigger as-child>
-                    <a class="block size-5" href="#">
-                      <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                    </a>
-                  </MenuTrigger>
-                  <MenuPositioner>
-                    <MenuContent class="w-40">
-                      <MenuItem value="share">
-                        <Lucide class="mr-2 size-4" icon="Users" /> Share File
-                      </MenuItem>
-                      <MenuItem value="delete">
-                        <Lucide class="mr-2 size-4" icon="Trash" /> Delete
-                      </MenuItem>
-                    </MenuContent>
-                  </MenuPositioner>
-                </MenuRoot>
-              </div>
-              <div class="mt-5 flex items-center">
-                <FileIcon class="w-12" variant="empty-directory" />
-                <div class="ml-4">
-                  <a class="font-medium" href="">Resources</a>
-                  <div class="mt-0.5 text-xs opacity-70">0 KB</div>
-                </div>
-                <MenuRoot class="w-auto ml-auto">
-                  <MenuTrigger as-child>
-                    <a class="block size-5" href="#">
-                      <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                    </a>
-                  </MenuTrigger>
-                  <MenuPositioner>
-                    <MenuContent class="w-40">
-                      <MenuItem value="share">
-                        <Lucide class="mr-2 size-4" icon="Users" /> Share File
-                      </MenuItem>
-                      <MenuItem value="delete">
-                        <Lucide class="mr-2 size-4" icon="Trash" /> Delete
-                      </MenuItem>
-                    </MenuContent>
-                  </MenuPositioner>
-                </MenuRoot>
-              </div>
-            </div>
-          </Box>
-          <!-- END: Latest Uploads -->
-          <!-- BEGIN: Work In Progress -->
-          <Box raised="single" class="col-span-12 p-0 lg:col-span-6">
-            <TabsRoot defaultValue="wip-0">
-              <div class="relative flex items-center border-b border-foreground/15 p-5">
-                <h2 class="mr-auto text-base font-medium">Work In Progress</h2>
-                <MenuRoot class="w-auto ml-auto sm:hidden">
-                  <MenuTrigger as-child>
-                    <a class="block size-5" href="#">
-                      <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                    </a>
-                  </MenuTrigger>
-                  <MenuPositioner>
-                    <MenuContent class="w-40">
-                      <MenuItem value="new">New</MenuItem>
-                      <MenuItem value="last-week">Last Week</MenuItem>
-                    </MenuContent>
-                  </MenuPositioner>
-                </MenuRoot>
-                <TabsList class="absolute inset-y-0 h-[2.8rem] right-5 my-auto hidden w-auto sm:flex">
-                  <TabsTrigger value="wip-0">New</TabsTrigger>
-                  <TabsTrigger value="wip-1">Last Week</TabsTrigger>
-                </TabsList>
-              </div>
-              <TabsContent value="wip-0" class="p-5">
-                <div>
-                  <div class="flex">
-                    <div class="mr-auto">Pending Tasks</div>
-                    <div>20%</div>
-                  </div>
-                  <ProgressRoot :defaultValue="50" class="mt-2">
-                    <ProgressTrack>
-                      <ProgressRange />
-                    </ProgressTrack>
-                  </ProgressRoot>
-                </div>
-                <div class="mt-5">
-                  <div class="flex">
-                    <div class="mr-auto">Completed Tasks</div>
-                    <div>2 / 20</div>
-                  </div>
-                  <ProgressRoot :defaultValue="25" class="mt-2">
-                    <ProgressTrack>
-                      <ProgressRange />
-                    </ProgressTrack>
-                  </ProgressRoot>
-                </div>
-                <div class="mt-5">
-                  <div class="flex">
-                    <div class="mr-auto">Tasks In Progress</div>
-                    <div>42</div>
-                  </div>
-                  <ProgressRoot :defaultValue="75" class="mt-2">
-                    <ProgressTrack>
-                      <ProgressRange />
-                    </ProgressTrack>
-                  </ProgressRoot>
-                </div>
-                <div class="text-center">
-                  <Button variant="ghost" class="border border-foreground/15 shadow-none mx-auto mt-5 inline-block"
-                    as="a" href="">
-                    View More Details
-                  </Button>
-                </div>
-              </TabsContent>
-            </TabsRoot>
-          </Box>
-          <!-- END: Work In Progress -->
-          <!-- BEGIN: Daily Sales -->
-          <Box raised="single" class="col-span-12 p-0 lg:col-span-6">
-            <div class="flex items-center border-b border-foreground/15 px-5 py-5 sm:py-3">
-              <h2 class="mr-auto text-base font-medium">Daily Sales</h2>
-              <MenuRoot class="w-auto ml-auto sm:hidden">
-                <MenuTrigger as-child>
-                  <a class="block size-5" href="#">
-                    <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                  </a>
-                </MenuTrigger>
-                <MenuPositioner>
-                  <MenuContent class="w-40">
-                    <MenuItem value="download">
-                      <Lucide class="mr-2 size-4" icon="File" /> Download Excel
-                    </MenuItem>
-                  </MenuContent>
-                </MenuPositioner>
-              </MenuRoot>
-              <Button variant="ghost" class="shadow-none border border-foreground/15 hidden sm:flex">
-                <Lucide class="mr-2 size-4" icon="File" /> Download Excel
-              </Button>
-            </div>
-            <div class="p-5">
-              <div v-for="(faker, index) in fakers.slice(0, 3)" :key="index" :class="{ 'mt-5': index > 0 }"
-                class="relative flex items-center">
-                <AvatarRoot class="size-12 bg-background rounded-full">
-                  <AvatarFallback>IM</AvatarFallback>
-                  <AvatarImage :src="faker['photos'][0]" />
-                </AvatarRoot>
-                <div class="ml-4 mr-auto">
-                  <a class="font-medium" href="">{{ faker['users'][0]!['name'] }}</a>
-                  <div class="mr-5 opacity-70 sm:mr-5">
-                    {{
-                      index === 0
-                        ? 'Bootstrap 4 HTML Admin Template'
-                        : index === 1
-                          ? 'Tailwind Admin Dashboard Template'
-                          : 'Vuejs HTML Admin Template'
-                    }}
-                  </div>
-                </div>
-                <div class="font-medium">
-                  {{ index === 0 ? '+$19' : index === 1 ? '+$25' : '+$21' }}
-                </div>
-              </div>
-            </div>
-          </Box>
-          <!-- END: Daily Sales -->
-          <!-- BEGIN: Latest Tasks -->
-          <Box raised="single" class="col-span-12 p-0 lg:col-span-6">
-            <TabsRoot defaultValue="lt-0">
-              <div class="relative flex items-center border-b border-foreground/15 p-5">
-                <h2 class="mr-auto text-base font-medium">Latest Tasks</h2>
-                <MenuRoot class="w-auto ml-auto sm:hidden">
-                  <MenuTrigger as-child>
-                    <a class="block size-5" href="#">
-                      <Lucide class="size-5 opacity-70" icon="MoreHorizontal" />
-                    </a>
-                  </MenuTrigger>
-                  <MenuPositioner>
-                    <MenuContent class="w-40">
-                      <MenuItem value="new">New</MenuItem>
-                      <MenuItem value="last-week">Last Week</MenuItem>
-                    </MenuContent>
-                  </MenuPositioner>
-                </MenuRoot>
-                <TabsList class="absolute inset-y-0 h-[2.8rem] right-5 my-auto hidden w-auto sm:flex">
-                  <TabsTrigger value="lt-0">New</TabsTrigger>
-                  <TabsTrigger value="lt-1">Last Week</TabsTrigger>
-                </TabsList>
-              </div>
-              <div class="p-5">
-                <TabsContent value="lt-0">
-                  <div class="flex items-center">
-                    <div class="border-l-4 border-primary/20 pl-4">
-                      <a class="font-medium" href="">Create New Campaign</a>
-                      <div class="opacity-70">10:00 AM</div>
-                    </div>
-                    <div class="ml-auto">
-                      <SwitchRoot>
-                        <SwitchControl />
-                      </SwitchRoot>
-                    </div>
-                  </div>
-                  <div class="mt-5 flex items-center">
-                    <div class="border-l-4 border-primary/20 pl-4">
-                      <a class="font-medium" href="">Meeting With Client</a>
-                      <div class="opacity-70">02:00 PM</div>
-                    </div>
-                    <div class="ml-auto">
-                      <SwitchRoot>
-                        <SwitchControl />
-                      </SwitchRoot>
-                    </div>
-                  </div>
-                  <div class="mt-5 flex items-center">
-                    <div class="border-l-4 border-primary/20 pl-4">
-                      <a class="font-medium" href="">Create New Repository</a>
-                      <div class="opacity-70">04:00 PM</div>
-                    </div>
-                    <div class="ml-auto">
-                      <SwitchRoot>
-                        <SwitchControl />
-                      </SwitchRoot>
-                    </div>
-                  </div>
-                </TabsContent>
-              </div>
-            </TabsRoot>
-          </Box>
-          <!-- END: Latest Tasks -->
-          <Box raised="single" class="col-span-12 p-0">
-            <CarouselRoot :default-page="0" :slide-count="fakers.slice(0, 5).length">
-              <div class="flex items-center border-b border-foreground/15 px-5 py-3">
-                <h2 class="mr-auto text-base font-medium">New Products</h2>
-                <CarouselPrevTrigger as-child>
-                  <Button variant="ghost" class="shadow-none border border-foreground/15 mr-2">
-                    <Lucide class="size-4" icon="ChevronLeft" />
-                  </Button>
-                </CarouselPrevTrigger>
-                <CarouselNextTrigger as-child>
-                  <Button variant="ghost" class="shadow-none border border-foreground/15">
-                    <Lucide class="size-4" icon="ChevronRight" />
-                  </Button>
-                </CarouselNextTrigger>
-              </div>
-              <div class="px-5">
-                <CarouselItemGroup class="py-5">
-                  <CarouselItem v-for="(faker, index) in fakers.slice(0, 5)" :key="index" :index="index" class="px-5"
-                    as-child>
-                    <div>
-                      <div class="flex flex-col items-center pb-5 lg:flex-row">
-                        <div class="flex flex-col items-center pr-5 sm:flex-row lg:border-r border-foreground/15">
-                          <div class="sm:mr-5">
-                            <AvatarRoot class="size-20 bg-background rounded-full">
-                              <AvatarFallback>IM</AvatarFallback>
-                              <AvatarImage :src="faker['images'][0]" />
-                            </AvatarRoot>
-                          </div>
-                          <div class="mr-auto mt-3 text-center sm:mt-0 sm:text-left">
-                            <a class="text-lg font-medium" href="">
-                              {{ faker['products'][0]!['name'] }}
-                            </a>
-                            <div class="mt-1 opacity-70 sm:mt-0">
-                              {{ faker['news'][0]!['shortContent'] }}
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="mt-6 flex w-full flex-1 items-center justify-center border-t border-foreground/15 px-5 pt-4 lg:mt-0 lg:w-auto lg:border-t-0 lg:pt-0">
-                          <div class="w-20 rounded-md py-3 text-center">
-                            <div class="text-xl font-medium">{{ faker['totals'][0] }}</div>
-                            <div class="opacity-70">Orders</div>
-                          </div>
-                          <div class="w-20 rounded-md py-3 text-center">
-                            <div class="text-xl font-medium">{{ faker['totals'][1] }}k</div>
-                            <div class="opacity-70">Purchases</div>
-                          </div>
-                          <div class="w-20 rounded-md py-3 text-center">
-                            <div class="text-xl font-medium">{{ faker['totals'][0] }}</div>
-                            <div class="opacity-70">Reviews</div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="flex flex-col items-center border-t border-foreground/15 pt-5 sm:flex-row">
-                        <div
-                          class="flex w-full items-center justify-center border-b border-foreground/15 pb-5 sm:w-auto sm:justify-start sm:border-b-0 sm:pb-0">
-                          <Badge look="outline" class="mr-3 px-3 py-2">{{
-                            faker['dates'][0]
-                            }}</Badge>
-                          <div class="opacity-70">Date of Release</div>
-                        </div>
-                        <div class="mt-5 flex sm:ml-auto sm:mt-0">
-                          <Button variant="ghost"
-                            class="border border-foreground/15 shadow-none ml-auto">Preview</Button>
-                          <Button variant="ghost" class="border border-foreground/15 shadow-none ml-2">Details</Button>
-                        </div>
-                      </div>
-                    </div>
-                  </CarouselItem>
-                </CarouselItemGroup>
-              </div>
-            </CarouselRoot>
-          </Box>
-          <!-- END: New Products -->
-        </div>
-      </TabsContent>
     </TabsRoot>
   </div>
 </template>
diff --git a/fe/src/router/index.ts b/fe/src/router/index.ts
index 3b1143e..c251694 100644
--- a/fe/src/router/index.ts
+++ b/fe/src/router/index.ts
@@ -95,11 +95,6 @@ const router = createRouter({
           name: 'post',
           component: () => import('../views/Post.vue'),
         },
-        {
-          path: 'crud-data-list',
-          name: 'crud-data-list',
-          component: () => import('../views/CrudDataList.vue'),
-        },
         {
           path: 'crud-form',
           name: 'crud-form',
diff --git a/fe/src/themes/Enigma/SideMenu/SideMenu.vue b/fe/src/themes/Enigma/SideMenu/SideMenu.vue
index bc6599d..03f3495 100644
--- a/fe/src/themes/Enigma/SideMenu/SideMenu.vue
+++ b/fe/src/themes/Enigma/SideMenu/SideMenu.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useBreadcrumb } from '@/composables/useBreadcrumb'
 import { useNotifications } from '@/modules/notification'
 import '@/assets/css/themes/enigma/side-menu.css'
-import logo from '@/assets/images/logo-kopkb.svg'
+import logo from '@/assets/images/logonew-mykopkb.svg'
 import { useSideMenu } from '@/composables/useSideMenu'
 import { useAuthStore } from '@/stores/auth'
 import { Lucide } from '@/components/ui/lucide'
@@ -40,9 +40,59 @@ const { unreadCount, fetchNotifications } = useNotifications()
 const appName = import.meta.env.VITE_APP_NAME
 const appVersion = import.meta.env.VITE_APP_VERSION
 
+const notificationsOpen = ref(false)
+const profileOpen = ref(false)
+const sidebarProfileOpen = ref(false)
+const notificationsRef = ref<HTMLElement | null>(null)
+const profileRef = ref<HTMLElement | null>(null)
+const sidebarProfileRef = ref<HTMLElement | null>(null)
+
+function toggleNotifications() {
+  profileOpen.value = false
+  sidebarProfileOpen.value = false
+  notificationsOpen.value = !notificationsOpen.value
+}
+
+function toggleProfile() {
+  notificationsOpen.value = false
+  sidebarProfileOpen.value = false
+  profileOpen.value = !profileOpen.value
+}
+
+function closeDropdowns() {
+  notificationsOpen.value = false
+  profileOpen.value = false
+  sidebarProfileOpen.value = false
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  const target = event.target as Node
+
+  if (
+    notificationsRef.value?.contains(target) ||
+    profileRef.value?.contains(target) ||
+    sidebarProfileRef.value?.contains(target)
+  ) {
+    return
+  }
+
+  closeDropdowns()
+}
+
+watch(sidebarProfileOpen, (isOpen) => {
+  if (!isOpen) return
+  notificationsOpen.value = false
+  profileOpen.value = false
+})
+
 onMounted(() => {
   authStore.fetchSession()
   fetchNotifications()
+  document.addEventListener('click', handleDocumentClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleDocumentClick)
 })
 </script>
 
@@ -76,6 +126,7 @@ onMounted(() => {
         'z-20 relative w-[320px] duration-100 transition-[width] group-[.side-menu--collapsed]:xl:w-[165px] group-[.side-menu--collapsed]:group-hover:xl:w-[320px] h-screen flex flex-col-reverse xl:flex-col',
         'before:absolute before:inset-y-0 before:w-px before:mt-23 before:bg-foreground/11 dark:before:bg-foreground/10 before:right-0 before:mr-8 before:hidden xl:before:block',
       ]">
+        <!-- Logo  -->
         <div
           class="relative z-10 mt-3 hidden h-[90px] w-[320px] flex-none items-center overflow-hidden pl-8 pr-14 duration-100 xl:flex group-[.side-menu--collapsed]:group-hover:xl:w-[320px] group-[.side-menu--collapsed]:xl:w-[165px]">
           <a class="relative flex items-center transition-[margin] duration-100 xl:ml-1.5 group-[.side-menu--collapsed]:group-hover:xl:ml-1.5 group-[.side-menu--collapsed]:xl:ml-8"
@@ -91,13 +142,15 @@ onMounted(() => {
             <Lucide icon="ChevronLeft" />
           </button>
         </div>
-        <AccountTrigger class="relative transition-[width] xl:mb-2 xl:mr-8"
-          innerClass="border-foreground/[.11] dark:border-foreground/[.11] border-t py-3 pl-6 pr-5 opacity-90 hover:opacity-100 xl:border-b xl:border-t-0 xl:pb-6 xl:pl-8 xl:pt-2.5"
-          avatarClass="h-11 w-11 border-background/70 dark:border-foreground/20 shadow-sm"
-          textClass="text-primary dark:text-foreground w-full">
-          <AccountDropdown class="absolute top-0 left-full origin-bottom-left"
-            boxClass="absolute bottom-0 left-[100%] ml-2 xl:bottom-auto xl:top-0" />
-        </AccountTrigger>
+        <div ref="sidebarProfileRef">
+          <AccountTrigger v-model:open="sidebarProfileOpen" class="relative transition-[width] xl:mb-2 xl:mr-8"
+            innerClass="border-foreground/[.11] dark:border-foreground/[.11] border-t py-3 pl-6 pr-5 opacity-90 hover:opacity-100 xl:border-b xl:border-t-0 xl:pb-6 xl:pl-8 xl:pt-2.5"
+            avatarClass="h-11 w-11 border-background/70 dark:border-foreground/20 shadow-sm"
+            textClass="text-primary dark:text-foreground w-full">
+            <AccountDropdown :open="sidebarProfileOpen" class="absolute top-0 left-full origin-bottom-left"
+              boxClass="absolute bottom-0 left-[100%] ml-2 xl:bottom-auto xl:top-0" />
+          </AccountTrigger>
+        </div>
 
         <ScrollAreaRoot class="flex-1 min-h-0">
           <ScrollAreaViewport :class="[
@@ -145,29 +198,26 @@ onMounted(() => {
                 <Breadcrumb v-if="breadcrumbItems.length"
                   class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
                   :items="breadcrumbItems" />
-                <div
+                <div ref="notificationsRef"
                   class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
-                >
-                  <Lucide
-                    class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]"
-                    icon="Bell"
-                  />
-                  <span
-                    v-if="unreadCount > 0"
-                    class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2"
-                  >
+                  @click.stop="toggleNotifications">
+                  <Lucide class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]" icon="Bell" />
+                  <span v-if="unreadCount > 0"
+                    class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2">
                     {{ unreadCount > 9 ? '9+' : unreadCount }}
                   </span>
-                  <NotificationDropdown class="absolute right-0 top-full mt-2 origin-top-right"
+                  <NotificationDropdown :open="notificationsOpen"
+                    class="absolute right-0 top-full mt-2 origin-top-right"
                     boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
                 </div>
-                <div class="group/profile relative size-9 flex-none">
+                <div ref="profileRef" class="group/profile relative size-9 flex-none cursor-pointer"
+                  @click.stop="toggleProfile">
                   <AvatarRoot class="ring-(--color)/40 size-full [--color:var(--color-nav-foreground)] rounded-full">
                     <AvatarFallback>{{ authStore.userName }}</AvatarFallback>
                     <AvatarImage v-if="authStore.userImageUrl" :src="authStore.userImageUrl"
                       :alt="authStore.userName" />
                   </AvatarRoot>
-                  <AccountDropdown class="absolute right-0 top-full mt-2 origin-top-right"
+                  <AccountDropdown :open="profileOpen" class="absolute right-0 top-full mt-2 origin-top-right"
                     boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
                 </div>
               </div>
diff --git a/fe/src/views/CrudDataList.vue b/fe/src/views/CrudDataList.vue
deleted file mode 100644
index 404017e..0000000
--- a/fe/src/views/CrudDataList.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import fakers from '@/utils/faker'
-import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Box } from '@/components/ui/box'
-import { Button } from '@/components/ui/button'
-import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Lucide } from '@/components/ui/lucide'
-import { MenuRoot, MenuTrigger, MenuPositioner, MenuContent, MenuItem } from '@/components/ui/menu'
-
-import {
-  PaginationContext,
-  PaginationRoot,
-  PaginationItem,
-  PaginationPrevTrigger,
-  PaginationNextTrigger,
-  PaginationEllipsis,
-} from '@/components/ui/pagination'
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableRow,
-  TableCell,
-} from '@/components/ui/table'
-
-const deleteConfirmationOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <h2 class="text-lg font-medium">Data List Layout</h2>
-    <div class="mt-5 grid grid-cols-12 gap-6">
-      <div class="col-span-12 mt-2 flex flex-wrap items-center sm:flex-nowrap">
-        <Button class="mr-2" look="outline" variant="primary"> Add New Product </Button>
-        <MenuRoot class="w-auto">
-          <MenuTrigger as-child>
-            <Box class="px-2" as-child>
-              <Button variant="ghost" class="box flex items-center">
-                <span class="flex h-5 w-5 items-center justify-center">
-                  <Lucide class="h-4 w-4" icon="Plus" />
-                </span>
-              </Button>
-            </Box>
-          </MenuTrigger>
-          <MenuPositioner>
-            <MenuContent class="w-40">
-              <MenuItem value="print">
-                <Lucide class="mr-2 h-4 w-4" icon="Printer" /> Print
-              </MenuItem>
-              <MenuItem value="excel">
-                <Lucide class="mr-2 h-4 w-4" icon="FileText" /> Export to Excel
-              </MenuItem>
-              <MenuItem value="pdf">
-                <Lucide class="mr-2 h-4 w-4" icon="FileText" /> Export to PDF
-              </MenuItem>
-            </MenuContent>
-          </MenuPositioner>
-        </MenuRoot>
-        <div class="mx-auto hidden opacity-70 md:block">Showing 1 to 10 of 150 entries</div>
-        <div class="mt-3 w-full sm:ml-auto sm:mt-0 sm:w-auto md:ml-0">
-          <div class="relative w-56">
-            <Input class="w-56 pr-10" type="text" placeholder="Search..." />
-            <Lucide class="absolute inset-y-0 right-0 my-auto mr-3 h-4 w-4" icon="Search" />
-          </div>
-        </div>
-      </div>
-      <!-- BEGIN: Data List -->
-      <div class="col-span-12 overflow-auto lg:overflow-visible">
-        <Table class="-mt-2" variant="boxed">
-          <TableHeader>
-            <TableRow>
-              <TableHead> IMAGES </TableHead>
-              <TableHead> PRODUCT NAME </TableHead>
-              <TableHead class="text-center"> STOCK </TableHead>
-              <TableHead class="text-center"> STATUS </TableHead>
-              <TableHead class="text-center"> ACTIONS </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow v-for="(faker, index) in fakers.slice(0, 9)" :key="index">
-              <TableCell>
-                <div class="flex">
-                  <AvatarRoot class="size-11 bg-background rounded-full">
-                    <AvatarFallback>IM</AvatarFallback>
-                    <AvatarImage :src="faker['images'][0]" :alt="'Uploaded at ' + faker['dates'][0]" />
-                  </AvatarRoot>
-                  <AvatarRoot class="size-11 bg-background rounded-full -ms-5">
-                    <AvatarFallback>IM</AvatarFallback>
-                    <AvatarImage :src="faker['images'][1]" :alt="'Uploaded at ' + faker['dates'][1]" />
-                  </AvatarRoot>
-                  <AvatarRoot class="size-11 bg-background rounded-full -ms-5">
-                    <AvatarFallback>IM</AvatarFallback>
-                    <AvatarImage :src="faker['images'][2]" :alt="'Uploaded at ' + faker['dates'][2]" />
-                  </AvatarRoot>
-                </div>
-              </TableCell>
-              <TableCell>
-                <a class="whitespace-nowrap font-medium" href="">
-                  {{ faker['products'][0]!['name'] }}
-                </a>
-                <div class="mt-0.5 whitespace-nowrap text-xs opacity-70">
-                  {{ faker['products'][0]!['category'] }}
-                </div>
-              </TableCell>
-              <TableCell class="text-center">
-                {{ faker['stocks'][0] }}
-              </TableCell>
-              <TableCell>
-                <div class="flex items-center justify-center"
-                  :class="faker['trueFalse'][0] ? 'text-success' : 'text-danger'">
-                  <Lucide class="mr-2 h-4 w-4" icon="CheckSquare" />
-                  {{ faker['trueFalse'][0] ? 'Active' : 'Inactive' }}
-                </div>
-              </TableCell>
-              <TableCell>
-                <div class="flex items-center justify-center">
-                  <a class="mr-3 flex items-center" href="">
-                    <Lucide class="mr-1 h-4 w-4" icon="CheckSquare" />
-                    Edit
-                  </a>
-                  <a class="text-danger flex items-center" href="#" @click.prevent="deleteConfirmationOpen = true">
-                    <Lucide class="mr-1 h-4 w-4" icon="Trash" />
-                    Delete
-                  </a>
-                </div>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-      <!-- END: Data List -->
-      <!-- BEGIN: Pagination -->
-      <div class="col-span-12 flex flex-wrap items-center sm:flex-row sm:flex-nowrap">
-        <PaginationRoot :count="150" :pageSize="10" :siblingCount="1" class="w-full sm:mr-auto sm:w-auto">
-          <PaginationPrevTrigger>Previous</PaginationPrevTrigger>
-          <PaginationContext v-slot="{ pagination }">
-            <template v-for="(page, index) in pagination?.pages" :key="index">
-              <PaginationItem v-if="page.type === 'page'" v-bind="{ ...page }">
-                {{ page.value }}
-              </PaginationItem>
-              <PaginationEllipsis v-else :index="index" />
-            </template>
-          </PaginationContext>
-          <PaginationNextTrigger>Next</PaginationNextTrigger>
-        </PaginationRoot>
-        <NativeSelect class="mt-3 w-20 sm:mt-0">
-          <NativeSelectOption value="10">10</NativeSelectOption>
-          <NativeSelectOption value="25">25</NativeSelectOption>
-          <NativeSelectOption value="35">35</NativeSelectOption>
-          <NativeSelectOption value="50">50</NativeSelectOption>
-        </NativeSelect>
-      </div>
-      <!-- END: Pagination -->
-    </div>
-    <!-- BEGIN: Delete Confirmation Modal -->
-    <DialogRoot :open="deleteConfirmationOpen" @openChange="(details) => (deleteConfirmationOpen = details.open)">
-      <DialogContent>
-        <div class="p-5 text-center">
-          <Lucide class="text-danger mx-auto mt-3 size-16 stroke-1" icon="CircleX" />
-          <div class="mt-5 text-2xl font-medium">Are you sure?</div>
-          <div class="mt-2 opacity-70">
-            Do you really want to delete these records? <br />
-            This process cannot be undone.
-          </div>
-        </div>
-        <div class="px-5 pb-8 text-center">
-          <DialogCloseTrigger class="mr-2 w-24"> Cancel </DialogCloseTrigger>
-          <Button class="w-24" type="button" variant="danger" look="outline"> Delete </Button>
-        </div>
-      </DialogContent>
-    </DialogRoot>
-    <!-- END: Delete Confirmation Modal -->
-  </div>
-</template>