diff --git a/.gitignore b/.gitignore
index f74763e0..47f2ed3d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ yarn-error.log
 /.nova
 /.vscode
 /.zed
-sail
\ No newline at end of file
+sail
+/prod_backups
diff --git a/app/Http/Controllers/TagFrequencyController.php b/app/Http/Controllers/TagFrequencyController.php
index d1f098f1..11b37252 100644
--- a/app/Http/Controllers/TagFrequencyController.php
+++ b/app/Http/Controllers/TagFrequencyController.php
@@ -21,7 +21,7 @@ public function search(string $type, string $query = '')
         $prefixed_tags = TagFrequency::where('tag', 'like', $escaped.'%')
             ->where('type', $type)
             ->orderByDesc('count')
-            ->limit(30)
+            ->limit(50)
             ->get();
 
         return response()->json([
diff --git a/public/images/LogoTitleDark.svg b/public/images/LogoTitleDark.svg
new file mode 100644
index 00000000..6a4530e2
--- /dev/null
+++ b/public/images/LogoTitleDark.svg
@@ -0,0 +1,635 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="7200"
+   height="752"
+   viewBox="0 0 7200 752"
+   version="1.1"
+   id="svg90"
+   sodipodi:docname="LogoTitleDark.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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="namedview90"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.125"
+     inkscape:cx="3516"
+     inkscape:cy="2100"
+     inkscape:window-width="2400"
+     inkscape:window-height="1261"
+     inkscape:window-x="2391"
+     inkscape:window-y="-3"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg90" />
+  <path
+     fill="#2a2330"
+     d="M 99.605614,228.62421 C 92.715146,209.42572 87.417703,191.00689 84.55563,170.72532 79.010911,131.42858 83.012966,59.298649 99.999656,23.421014 103.16569,16.733783 107.78146,10.144852 115.00065,7.4968682 c 5.81791,-2.1340433 12.04041,-1.2047784 18.02373,-0.4361856 21.17292,2.9311883 41.7358,9.2535614 60.89847,18.7240574 22.84074,10.934878 44.10953,24.88639 63.23848,41.480829 61.951,-21.014664 128.5283,-23.092656 190.3023,-9.49e-4 31.32318,-24.369289 64.43114,-45.703506 103.09362,-56.230961 10.51903,-2.8640746 21.77346,-5.3826777 32.72657,-3.9736086 7.04956,0.9069289 12.80952,4.2158286 17.15768,9.8504196 7.37512,9.554466 11.05531,23.740929 13.86628,35.388349 9.01766,37.372887 12.52085,77.112131 7.30874,115.338431 -2.83415,20.78835 -7.88084,39.92362 -15.4456,59.46242 3.09544,9.08825 6.1361,17.99213 8.2791,27.36696 3.5527,0.3224 6.5786,0.77755 9.01134,3.71179 1.51611,1.82903 2.18303,4.26493 1.92806,6.61548 -0.28341,2.60974 -1.77424,5.01614 -3.84981,6.58914 -0.93664,0.70802 -2.00287,1.27274 -3.02801,1.83746 2.03342,15.95555 3.40309,39.21983 0.29922,54.9341 l -0.83234,3.99205 c -8.35495,41.43447 -30.86065,69.61164 -65.54268,92.71894 -13.67031,9.10827 -36.88402,20.37008 -52.4845,24.42639 22.30657,21.58171 47.14281,52.01039 47.68751,84.60631 0.14961,8.985 -1.57195,17.14399 -4.33762,25.63486 19.92441,12.05937 34.15207,24.38847 39.96156,48.07945 5.00981,20.43224 0.61213,43.00011 -10.2609,60.76572 -1.19899,1.95967 -2.52861,3.84349 -3.85192,5.71993 l 0.4404,0.11589 c 12.84113,3.27245 57.57123,8.09261 63.82533,18.96038 0.41933,0.72803 0.67746,1.48872 0.51204,2.33686 -0.48886,2.497 -3.74023,4.24596 -5.8137,5.33432 -16.76575,8.80273 -51.14961,13.1119 -70.44502,15.75746 -11.02475,1.51085 -21.98629,3.22188 -33.0595,4.41138 -38.68777,4.15746 -77.8349,5.9454 -116.71547,7.11172 -71.85789,2.40324 -143.79585,0.35611 -215.40088,-6.13188 -10.833,-0.98406 -21.65862,-1.88277 -32.45579,-3.2419 -8.40132,-1.05674 -16.77313,-2.5402 -25.15126,-3.77711 -15.49197,-2.28734 -31.13144,-4.53359 -46.096605,-9.32215 -4.354481,-1.3939 -13.631432,-4.35764 -15.879263,-8.74057 -0.482438,-0.9398 -0.568305,-1.64149 -0.261395,-2.6561 0.869,-2.86997 4.876218,-4.76011 7.436543,-5.87691 13.273528,-5.78736 29.01941,-7.6638 43.2123,-9.88477 4.11847,-0.64479 8.79325,-0.77123 12.75158,-1.89751 -10.76662,-15.23278 -15.84281,-33.42193 -17.06708,-51.84603 -12.13313,-4.55993 -22.083215,-8.81327 -32.37277,-17.09237 -23.070741,-18.56528 -37.530505,-49.03084 -40.673886,-78.2184 -2.296717,-21.32568 0.04372,-44.66899 14.063825,-61.85618 5.876706,-7.20443 14.2501,-12.8622 23.686985,-13.73668 6.875297,-0.63742 13.915375,1.13998 19.261286,5.61352 16.8237,14.07488 12.2311,40.56947 14.1813,59.97025 1.28853,12.82112 6.69344,25.00165 16.83318,33.21437 7.30137,5.91485 15.91445,8.64891 25.27874,7.70595 -1.11891,-4.07528 -2.31789,-8.15899 -2.95742,-12.34279 -1.35597,-8.88702 -0.46042,-17.59493 1.58144,-26.2923 7.42464,-31.64031 26.87493,-48.80853 45.04301,-73.59842 -5.07935,-1.28432 -10.15659,-3.38517 -15.04314,-5.26267 -27.83264,-10.69076 -53.72984,-27.52605 -72.49109,-50.94416 -11.33767,-14.2856 -19.66523,-30.71948 -24.480129,-48.31124 -1.92263,-6.77414 -3.040487,-14.25987 -3.313535,-15.44455 -3.672599,-17.42636 -3.420896,-37.17482 -0.947914,-54.75183 -2.722261,-2.39059 -5.186815,-4.67477 -5.342325,-8.57305 -0.106623,-2.67612 1.043474,-5.18155 2.912961,-7.06115 2.201157,-2.21148 4.612083,-3.14391 7.592685,-3.80978 2.197785,-8.49613 4.697951,-17.12818 7.810251,-25.33564 z"
+     id="path2"
+     sodipodi:nodetypes="cccccccccsccccccccccccccccccccccccccccccccccccscccccccccccccccccc"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 569.14993,674.09825 0.4404,0.11589 c 12.84113,3.27245 57.57123,8.09261 63.82533,18.96038 0.41933,0.72803 0.67746,1.48872 0.51204,2.33686 -0.48886,2.497 -3.74023,4.24596 -5.8137,5.33432 -16.76575,8.80273 -51.14961,13.1119 -70.44502,15.75746 -11.02475,1.51085 -21.98629,3.22188 -33.0595,4.41138 -38.68777,4.15746 -77.8349,5.9454 -116.71547,7.11172 -71.85789,2.40324 -143.79585,0.35611 -215.40088,-6.13188 -10.833,-0.98406 -21.65862,-1.88277 -32.45579,-3.2419 -8.40132,-1.05674 -16.77313,-2.5402 -25.15126,-3.77711 -15.49197,-2.28734 -31.13144,-4.53359 -46.096605,-9.32215 -4.354481,-1.3939 -13.631432,-4.35764 -15.879263,-8.74057 -0.482438,-0.9398 -0.568305,-1.64149 -0.261395,-2.6561 0.869,-2.86997 4.876218,-4.76011 7.436543,-5.87691 13.273528,-5.78736 29.01941,-7.6638 43.2123,-9.88477 4.11847,-0.64479 8.79325,-0.77123 12.75158,-1.89751 7.17915,8.60149 15.00731,15.83859 24.87206,21.30461 38.68882,21.43736 92.71367,5.3301 132.38865,-6.06972 5.17101,1.53929 10.22613,4.09424 15.22962,6.14242 5.1963,2.12825 11.03634,3.9067 15.89549,6.70503 3.0828,1.77425 5.10779,4.68426 8.46031,6.21723 12.51453,5.72625 28.66182,6.39528 40.9435,-0.30449 3.29668,-1.79847 5.52502,-4.98031 8.97657,-6.63444 4.09109,-1.96179 8.57621,-3.41679 12.81164,-5.07725 5.53766,-2.1725 11.00578,-4.51568 16.57189,-6.61442 7.02744,1.337 14.18446,3.54953 21.13709,5.31535 24.85415,6.31415 50.33519,12.56825 76.18076,10.1292 16.4402,-1.55194 33.64108,-8.21694 46.17036,-19.13527 5.00349,-4.35975 9.25366,-9.37589 13.46275,-14.47736 z"
+     id="path3"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 114.63084,27.454677 c 1.67836,-2.479725 3.13969,-4.818165 6.26885,-5.526282 3.27877,-0.742147 7.1781,0.02739 10.46319,0.454624 19.73687,2.566857 38.69724,9.232806 56.69043,17.56827 3.22925,1.502312 7.63125,3.764604 10.47161,5.404487 4.13639,2.102541 8.50878,4.415273 12.27747,7.131003 7.49944,4.079178 15.37607,9.425928 21.97891,14.826412 7.42042,5.280479 14.16128,11.321861 20.89792,17.432779 1.55615,-0.476854 3.15761,-0.901556 4.65792,-1.534236 19.17425,-7.333607 39.15134,-12.365229 59.51194,-14.989086 18.78126,-2.884935 50.88832,-3.688507 69.22708,0.265505 12.83481,1.518958 25.35776,3.675337 37.79959,7.220346 8.89334,2.533986 17.71925,5.855634 26.64841,8.153194 2.32948,-1.854842 4.65054,-3.86235 7.1191,-5.526493 1.72999,-2.336753 5.76207,-4.763483 8.1358,-6.510333 12.25218,-9.01661 32.18608,-23.378389 46.13559,-29.008976 0.41616,-0.276251 0.82285,-0.543336 1.26114,-0.784502 14.68808,-8.087661 54.06173,-24.011491 70.07627,-18.709202 3.22082,1.066548 5.21527,3.867197 6.72401,6.744547 5.73152,9.538451 9.01555,24.087243 11.18278,34.879465 7.0759,35.243481 8.72582,70.276351 3.34093,105.899221 -1.16421,7.70279 -2.37373,15.38872 -4.23437,22.96191 -1.15157,4.68531 -2.53493,9.40117 -4.11321,13.96005 -3.50845,-7.68909 -23.30537,-41.94441 -29.0369,-46.19985 -2.81097,-1.00513 -4.0679,-2.43063 -5.98754,-4.66108 -2.13562,-2.47909 -5.22896,-5.32378 -4.96661,-8.72898 -1.85011,-2.69297 -4.24597,-5.15415 -6.40793,-7.60269 -11.81389,-13.389 -25.37989,-25.39675 -39.50746,-36.27927 4.49567,-8.070484 10.57276,-15.928146 17.58755,-21.940343 5.33748,-4.575208 12.27958,-8.456943 19.54302,-7.766105 11.16487,1.061911 19.01411,13.828874 21.67758,23.652532 0.47727,1.758436 0.39931,6.095006 1.3075,7.237096 l 0.88712,-0.18437 c 0.21283,-1.84695 0.35295,-3.70126 0.42038,-5.559791 0.56367,-16.905353 -3.38834,-27.943482 -14.81661,-40.233169 6.41425,-3.643309 10.79717,-3.805562 17.18087,-5.919692 0.78808,-0.260869 0.46147,-0.04288 0.99353,-0.746573 l -0.33504,-0.634998 c -3.07859,-1.400008 -12.79583,-1.62674 -16.00401,-0.849403 -0.34663,0.929581 -0.53206,1.197298 -1.47502,1.577538 -5.18682,2.093902 -10.47267,3.505605 -15.51725,6.0732 -3.52952,1.796052 -6.77142,5.521962 -10.48005,6.721156 -0.34768,-0.329035 -0.69326,-0.623513 -0.97351,-1.013657 -4.15746,3.230407 -8.09788,6.731166 -11.79598,10.479517 -5.89272,5.990598 -21.72183,24.361703 -23.41495,32.028662 8.62995,7.2666 17.10817,14.50159 25.205,22.36874 1.78899,1.73842 4.40294,3.88458 5.75154,5.95804 4.82754,3.90671 9.15041,9.48651 13.28891,14.136 26.23435,29.46887 49.35429,66.32655 58.89138,104.91106 -7.49945,-0.65638 -14.7966,-0.72276 -22.31185,-0.33293 -2.52966,-9.87318 -6.45744,-19.33229 -11.66427,-28.09288 -14.01273,-23.63937 -36.9209,-40.67062 -63.59355,-47.28189 -23.84059,-5.78947 -49.0045,-1.84378 -69.92982,10.9647 -23.7974,14.42257 -37.81223,35.67977 -44.36239,62.40825 -5.51659,-3.12389 -10.9352,-5.66936 -17.08394,-7.33614 -17.26726,-4.68109 -35.55861,-1.08308 -50.86514,7.61534 -2.95953,-8.6036 -5.89588,-16.97963 -10.24299,-25.01008 -12.07728,-22.31606 -33.05001,-40.59687 -57.61442,-47.76548 -24.78883,-7.23394 -50.72186,-3.98362 -73.2539,8.43608 -25.98676,14.32353 -41.55247,38.48758 -49.68617,66.33392 -7.22867,-0.29184 -14.46261,-0.41406 -21.69655,-0.3677 10.14922,-35.24253 27.1594,-68.13451 50.05177,-96.78684 8.52985,-10.5696 17.99634,-20.38483 27.69779,-29.87661 7.77969,-7.61112 16.50762,-14.08753 24.35475,-21.59013 -0.43619,-0.98616 -0.93138,-1.94598 -1.48135,-2.87419 -10.69392,-18.354566 -39.58858,-48.162899 -60.44331,-53.484785 -7.08117,-1.806799 -13.95267,-0.856778 -20.24365,2.83036 7.63325,1.338057 14.1223,3.563868 21.00855,7.145963 -0.65638,0.506882 -1.26957,1.02767 -1.87538,1.594922 -11.56208,10.824146 -12.42497,31.020488 -12.90119,45.90242 -1.60251,1.54562 -1.58144,10.67075 -1.62674,13.34686 -0.22969,13.76619 2.85417,26.11635 5.73573,39.45478 -2.50438,4.45457 -6.26148,8.64891 -9.10511,12.95808 -7.14965,10.83195 -13.79147,22.27813 -19.23642,34.06357 -0.83865,-2.34107 -1.62463,-4.70111 -2.35898,-7.07695 -12.695742,-40.97616 -11.114306,-95.45933 -2.70035,-137.332617 2.3927,-11.907235 5.1826,-24.166263 10.892,-34.982296 z"
+     id="path4"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="cccccccccccscccccccccccccccccsccccccccccccccccccccccccccccccccccccccccccccccc" />
+  <path
+     fill="#FCF8E8"
+     d="m 511.24576,104.29551 c 4.49567,-8.070484 10.57276,-15.928146 17.58755,-21.940343 5.33748,-4.575208 12.27958,-8.456943 19.54302,-7.766105 11.16487,1.061911 19.01411,13.828874 21.67758,23.652532 0.47727,1.758436 0.39931,6.095006 1.3075,7.237096 l 0.88712,-0.18437 0.56999,0.34979 c 1.79216,14.27717 -0.98826,29.80601 -4.90129,43.56482 -0.76491,2.68981 -1.42867,5.83794 -2.74038,8.29912 0.98089,1.34016 2.03974,2.66452 2.93845,4.05948 -2.81097,-1.00513 -4.0679,-2.43063 -5.98754,-4.66108 -2.13562,-2.47909 -5.22896,-5.32378 -4.96661,-8.72898 -1.85011,-2.69297 -4.24597,-5.15415 -6.40793,-7.60269 -11.81389,-13.389 -25.37989,-25.39675 -39.50746,-36.27927 z"
+     id="path5"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 557.16115,148.17747 c 2.81308,2.95005 5.54398,6.08553 8.0157,9.33058 0.98089,1.34016 2.03974,2.66452 2.93845,4.05948 -2.81097,-1.00513 -4.0679,-2.43063 -5.98754,-4.66108 -2.13562,-2.47909 -5.22896,-5.32378 -4.96661,-8.72898 z"
+     id="path6"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#ab745e"
+     d="m 344.39083,65.943294 c 6.12069,-0.141517 14.44831,-0.271296 20.28912,0.07131 4.36397,18.541049 3.64444,41.727196 -0.74586,60.199766 -1.58776,4.4946 -3.18922,9.92164 -7.80077,12.22268 -0.55946,0.2792 -2.33994,0.9052 -3.08861,0.70459 -3.46314,-1.30645 -4.21171,-2.80545 -6.25672,-5.97675 -6.68792,-11.58382 -3.68326,-49.759378 -2.39716,-67.221593 z"
+     id="path7"
+     sodipodi:nodetypes="cccsccc"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#ab745e"
+     d="m 317.37627,68.34589 c 1.03462,1.127866 0.78361,3.836354 0.71619,5.318964 -0.63321,13.943926 -5.151,43.615086 -15.9113,52.808696 -1.25166,1.07045 -2.79095,1.88698 -4.48196,1.7753 -1.70998,-0.11379 -3.22609,-1.16843 -4.23859,-2.50333 -4.90445,-6.46587 -3.87299,-17.89941 -2.62765,-25.33459 1.54351,-9.474918 4.54282,-20.622579 8.95104,-29.151377 3.17134,-0.820145 13.51091,-2.635657 17.59227,-2.913663 z"
+     id="path8"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#ab745e"
+     d="m 387.02081,68.48993 c 5.19372,0.394918 14.60332,1.84304 20.22545,3.113126 0.13802,0.288051 1.41792,3.032153 1.55805,3.319045 0.4857,0.993639 0.97562,1.972001 1.39074,2.998723 4.36396,10.815296 9.5866,32.826866 4.80541,43.621936 -1.4982,3.38307 -3.57588,5.11727 -6.95895,6.45112 -6.31521,-3.07543 -9.04822,-9.58028 -11.34925,-15.82069 -1.79742,-4.87284 -10.98527,-40.865332 -9.67145,-43.68326 z"
+     id="path9"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <defs
+     id="defs10">
+    <rect
+       x="696"
+       y="92"
+       width="312"
+       height="608"
+       id="rect1" />
+    <linearGradient
+       id="gradient_0"
+       gradientUnits="userSpaceOnUse"
+       x1="553.79913"
+       y1="48.505932"
+       x2="554.09216"
+       y2="40.238293">
+      <stop
+         offset="0"
+         stop-color="#F1DBC5"
+         id="stop9" />
+      <stop
+         offset="1"
+         stop-color="#F7F7EF"
+         id="stop10" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient97"
+       gradientUnits="userSpaceOnUse"
+       x1="89.492165"
+       y1="339.19208"
+       x2="100.32093"
+       y2="330.00284">
+      <stop
+         offset="0"
+         stop-color="black"
+         id="stop89-7" />
+      <stop
+         offset="1"
+         stop-color="#0E0D1E"
+         id="stop90-5" />
+    </linearGradient>
+  </defs>
+  <defs
+     id="defs12">
+    <linearGradient
+       id="gradient_1"
+       gradientUnits="userSpaceOnUse"
+       x1="353.54031"
+       y1="87.919785"
+       x2="352.84128"
+       y2="80.373306">
+      <stop
+         offset="0"
+         stop-color="#EDDFDC"
+         id="stop11" />
+      <stop
+         offset="1"
+         stop-color="#F9F3E2"
+         id="stop12" />
+    </linearGradient>
+  </defs>
+  <defs
+     id="defs14">
+    <linearGradient
+       id="gradient_2"
+       gradientUnits="userSpaceOnUse"
+       x1="291.29373"
+       y1="92.597557"
+       x2="290.54016"
+       y2="88.867821">
+      <stop
+         offset="0"
+         stop-color="#F5D9AE"
+         id="stop13" />
+      <stop
+         offset="1"
+         stop-color="#EEE4D3"
+         id="stop14" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="#020105"
+     d="m 531.24182,64.708931 c 8.07575,-6.032215 18.14806,-12.444459 28.44583,-13.358237 -0.34663,0.929581 -0.53206,1.197298 -1.47502,1.577538 -5.18682,2.093902 -10.47267,3.505605 -15.51725,6.0732 -3.52952,1.796052 -6.77142,5.521962 -10.48005,6.721156 -0.34768,-0.329035 -0.69326,-0.623513 -0.97351,-1.013657 z"
+     id="path18"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 321.00141,271.61167 c 0.18438,-0.51836 0.16752,-0.56683 0.54365,-1.08309 2.93319,-4.02786 16.95013,-8.75005 21.95889,-9.64876 11.54523,-2.0703 23.01037,-0.68799 33.52203,4.57679 1.6889,0.84603 3.67913,1.69101 5.17206,2.84785 1.06413,0.82496 1.25166,1.17686 1.44342,2.4949 -1.0989,9.13882 0.49413,18.98882 1.93333,28.02756 1.81639,6.51855 3.65595,12.91383 6.3405,19.14475 7.83448,18.18494 21.82403,34.94647 39.13765,44.71008 12.57984,7.09275 26.80539,10.44317 41.04148,12.05832 18.22392,1.18002 34.31116,-2.31579 51.00527,-9.37905 18.3672,-9.04084 34.15523,-22.7417 44.2033,-40.7549 0.66692,-0.99564 1.04516,-1.94387 2.143,-2.45908 4.58311,0.67851 9.0145,2.06714 13.56389,2.9216 6.12873,1.15157 12.24586,2.36109 18.35035,3.62856 l 1.18529,0.37508 c 1.41918,3.67175 -5.34591,20.45436 -7.05693,24.31893 -2.21675,5.00981 -4.77487,11.22703 -8.24855,15.4298 l -0.74568,0.77755 c -0.94612,1.13366 -0.9664,2.30103 -2.06213,3.29457 -1.46344,3.75077 -5.17628,7.62376 -7.83449,10.72026 -16.25897,18.94984 -37.13266,33.16275 -59.9281,43.16235 -26.52831,11.63794 -55.28389,17.04812 -83.40944,23.32434 -2.4675,0.76491 -4.98031,1.43921 -7.27924,2.63819 2.43063,0.13275 4.8602,0.28763 7.28873,0.46463 4.38925,2.10823 18.59583,13.20673 21.42893,16.60034 l 0.10009,0.50256 c -34.95595,8.10947 -77.16797,27.41964 -102.20861,53.75092 -5.0509,-5.6683 -11.15013,-10.3494 -17.26937,-14.80502 -28.00859,-20.39537 -60.45069,-31.9585 -93.71352,-40.4873 1.27905,-1.52138 6.18983,-2.67717 8.26118,-3.53163 7.31928,-3.01747 15.93342,-6.70187 22.04529,-11.74435 1.28432,-0.15277 3.19658,-0.18753 4.15324,-1.13892 -0.79335,-1.60251 -5.76207,-2.07136 -7.5321,-2.74671 -0.12222,-0.0474 -0.24443,-0.0969 -0.36665,-0.14539 -12.73894,-2.88894 -25.47893,-5.59561 -38.12937,-8.87227 -32.42734,-8.40132 -62.82969,-20.24576 -88.03574,-42.92003 -8.30016,-7.46573 -15.63841,-15.55729 -21.32673,-25.22396 -0.61214,0.0843 0.30449,-0.39115 -0.16752,-0.74621 -0.46358,-1.03673 -1.30513,-1.42155 -1.16711,-2.59103 -6.21407,-5.52186 -15.30153,-32.1845 -16.1423,-40.73647 5.58929,-1.54351 11.42406,-2.58551 17.1324,-3.59695 5.02668,-0.81548 10.5696,-1.21163 15.42559,-2.67296 1.09679,0.46463 9.01661,12.54613 10.74028,14.69335 9.03768,11.26391 17.89626,18.14068 30.01779,25.80132 22.49938,10.73185 39.57383,13.39954 64.14984,11.30185 13.0824,-2.36531 25.33142,-6.10239 36.65434,-13.27838 23.11678,-14.6512 36.21605,-34.84954 42.15302,-61.41051 1.95335,-7.766 3.28087,-19.69262 1.52875,-27.59348 z"
+     id="path22"
+     sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccc"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 321.00141,271.61167 c 0.18438,-0.51836 0.16752,-0.56683 0.54365,-1.08309 2.93319,-4.02786 16.95013,-8.75005 21.95889,-9.64876 11.54523,-2.0703 23.01037,-0.68799 33.52203,4.57679 1.6889,0.84603 3.67913,1.69101 5.17206,2.84785 1.06413,0.82496 1.25166,1.17686 1.44342,2.4949 -1.0989,9.13882 0.49413,18.98882 1.93333,28.02756 l -0.33188,-0.079 c -4.45036,-1.08941 -8.75426,-2.64556 -13.24782,-3.64647 -11.52731,-2.56865 -24.99533,-2.67506 -36.53423,-0.31819 -5.37962,1.0989 -10.6739,3.49581 -15.9882,4.42191 1.95335,-7.766 3.28087,-19.69262 1.52875,-27.59348 z"
+     id="path23"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <defs
+     id="defs24">
+    <linearGradient
+       id="gradient_3"
+       gradientUnits="userSpaceOnUse"
+       x1="351.99222"
+       y1="276.70343"
+       x2="352.65662"
+       y2="265.86142">
+      <stop
+         offset="0"
+         stop-color="#F5D3B0"
+         id="stop23" />
+      <stop
+         offset="1"
+         stop-color="#F3E8DF"
+         id="stop24" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="#F8BE83"
+     d="m 120.67633,372.44114 c -0.47498,-0.82269 -1.76587,-3.1157 -1.64363,-3.47108 1.34985,-3.92448 8.12929,-5.16983 14.12813,-6.23133 2.75935,4.5673 7.99304,13.16344 11.34978,17.31458 14.4605,17.88572 37.94393,31.3432 59.12422,39.66445 5.4323,2.13457 11.09533,3.82874 16.63826,5.66619 14.04012,4.6537 27.69779,8.62152 39.95313,17.27885 2.59393,1.83219 6.13715,4.18275 7.94195,6.7946 -12.73894,-2.88894 -25.47893,-5.59561 -38.12937,-8.87227 -32.42734,-8.40132 -62.82969,-20.24576 -88.03574,-42.92003 -8.30016,-7.46573 -15.63841,-15.55729 -21.32673,-25.22396 z"
+     id="path25"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="csccccccccc" />
+  <path
+     fill="#F8BE83"
+     d="m 570.96842,367.60148 c 4.51252,2.00076 8.74795,3.81135 13.46381,5.29165 -1.46344,3.75077 -5.17628,7.62376 -7.83449,10.72026 -16.25897,18.94984 -37.13266,33.16275 -59.9281,43.16235 -26.52831,11.63794 -55.28389,17.04812 -83.40944,23.32434 5.1805,-4.35553 11.25549,-10.07968 17.33153,-13.0076 4.10373,-1.97758 8.57937,-3.13232 12.90646,-4.51252 35.02023,-11.16803 89.64562,-30.44501 107.47023,-64.97848 z"
+     id="path26"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="cccccscc" />
+  <path
+     fill="#F8BE83"
+     d="m 103.1994,328.36743 c 5.58929,-1.54351 11.42406,-2.58551 17.1324,-3.59695 1.77319,11.86867 4.39874,22.97981 10.22192,33.61473 0.73646,1.34438 1.62253,3.50108 2.82783,4.45352 -5.02983,1.84484 -9.76782,3.60749 -14.33618,6.46271 -6.21406,-5.52185 -15.0052,-32.38204 -15.84597,-40.93401 z"
+     id="path27"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 583.00988,325.06864 c 6.12873,1.15157 12.24586,2.36109 18.35035,3.62856 l 1.18529,0.37508 c 1.41918,3.67175 -5.34591,20.45436 -7.05693,24.31893 -2.21675,5.00981 -5.96015,14.55242 -12.13366,21.52086 -4.47564,-1.99129 -8.04809,-5.11254 -12.62383,-6.85939 1.83641,-2.66558 6.1016,-10.70841 7.31744,-13.69428 4.04367,-9.93218 5.11306,-18.68961 4.96134,-29.28976 z"
+     id="path28"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     fill="#F8BE83"
+     d="m 176.51546,362.59219 c 22.49938,10.73185 39.57383,13.39954 64.14984,11.30185 -0.0242,0.99985 -0.0284,1.88592 -0.56367,2.76883 -2.38849,3.94252 -7.68488,5.57875 -11.92662,6.57966 -13.30788,3.14074 -28.0813,1.84167 -39.79298,-5.55347 -5.5935,-3.53268 -10.39155,-8.4403 -11.86657,-15.09687 z"
+     id="path29"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 472.09442,374.74007 c 18.22392,1.18002 34.31116,-2.31579 51.00527,-9.37905 0.95982,1.81323 1.19477,3.19764 0.57526,5.18998 -1.29592,4.16062 -5.77999,6.99161 -9.51601,8.79114 -9.37905,4.51884 -23.72892,7.2213 -33.78964,3.59063 -3.19026,-1.15157 -6.3584,-3.33355 -7.75125,-6.53119 -0.236,-0.54366 -0.42038,-1.07677 -0.52363,-1.66151 z"
+     id="path30"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 133.38155,362.83873 c 4.06474,-1.44974 24.18512,-8.3676 26.96133,-7.4004 -0.13802,0.86605 -0.3951,0.91767 -1.09047,1.39706 l -23.5772,9.72146 c -4.9192,2.0998 -18.67169,8.44096 -26.50443,10.53974 -1.76255,0.47227 -27.339645,12.01221 -27.811653,11.65715 -0.463575,-1.03673 15.361751,-9.12022 25.999063,-15.26167 4.56836,-2.85522 20.99353,-8.8085 26.02336,-10.65334 z"
+     id="path32"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 576.00078,366.54095 c -4.06474,-1.44974 -24.18512,-8.3676 -26.96133,-7.40041 0.13802,0.86605 0.3951,0.91768 1.09047,1.39706 l 23.5772,9.72146 c 4.9192,2.0998 18.67169,8.44096 26.50443,10.53974 1.76256,0.47227 27.33965,12.01221 27.81166,11.65716 0.46357,-1.03674 -15.36176,-9.12022 -25.99907,-15.26167 -4.56836,-2.85523 -20.99353,-8.80851 -26.02336,-10.65334 z"
+     id="path32-5"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 545.84578,398.66263 c -3.76488,-2.10941 -22.44412,-12.29627 -25.34302,-11.80722 -0.008,0.87693 0.23598,0.97085 0.84134,1.55981 l 21.61825,13.52934 c 4.49851,2.89327 16.99614,11.44609 24.36728,14.82586 1.65869,0.76052 24.94436,16.41732 25.46912,16.14624 0.63051,-0.94455 -13.6192,-11.56196 -23.07898,-19.39667 -4.02622,-3.57934 -19.22374,-12.19694 -23.87399,-14.85736 z"
+     id="path32-5-2"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 154.25342,392.56667 c 3.83598,-1.97717 22.85831,-11.50803 25.73844,-10.91843 -0.0217,0.87671 -0.26961,0.96205 -0.8951,1.52959 l -22.07581,12.76909 c -4.59645,2.73503 -17.38406,10.84789 -24.86832,13.96918 -1.68414,0.70235 -25.5004,15.5396 -26.01541,15.25043 -0.59727,-0.96591 14.01319,-11.08117 23.73979,-18.58204 4.14831,-3.43711 19.63643,-11.5208 24.37641,-14.01782 z"
+     id="path32-8"
+     sodipodi:nodetypes="cccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#2a2330"
+     d="m 348.00172,308.4662 c 6.38053,-0.6448 12.82639,0.0284 18.9372,1.97653 3.78976,1.23691 10.62965,3.77184 12.3765,7.61744 0.53944,1.18634 0.5721,2.41588 0.0653,3.61697 -2.63819,6.25515 -15.51515,13.02657 -21.59435,15.38134 -3.63277,0.96298 -6.58809,0.80389 -10.1429,-0.39931 -7.93352,-2.6856 -18.10591,-9.06297 -21.95889,-16.751 0.24233,-0.36033 0.49203,-0.71434 0.7491,-1.06308 4.89498,-6.69134 13.80833,-9.09457 21.56801,-10.37889 z"
+     id="path33"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#2a2330"
+     d="m 352.6923,345.06996 c 1.13577,0.29817 1.94282,0.5563 2.8036,1.4234 3.26823,3.29247 3.88563,9.76677 9.50758,14.58799 3.86878,3.36305 8.9555,4.97715 14.05487,4.46194 9.48124,-0.96614 10.43052,-11.59895 14.42152,-16.10199 0.8218,-0.92716 1.51084,-1.12523 2.70983,-1.21268 0.93769,0.39826 1.64992,0.75016 2.16933,1.70787 0.93454,1.72367 -0.23811,5.9886 -0.8808,7.8703 -1.96599,5.75154 -6.05602,10.78664 -11.55259,13.47435 -5.36277,2.63081 -11.55576,3.00904 -17.19878,1.04832 -6.95263,-2.41694 -12.43972,-7.91351 -15.6068,-14.43943 -2.69087,2.90158 -4.58628,6.35314 -7.59743,9.07561 -4.92026,4.44825 -11.01,6.71557 -17.65182,6.30151 -5.91274,-0.36981 -11.36927,-2.81097 -15.2665,-7.32665 -2.98903,-3.46209 -5.98649,-9.44016 -5.52185,-14.1065 0.17068,-1.71419 0.86289,-2.83204 2.17039,-3.90144 0.54365,-0.11484 0.99564,-0.34031 1.53297,-0.11905 3.06173,1.26325 3.93726,7.24342 5.37962,9.99328 1.72051,3.28193 5.18892,6.51434 8.81854,7.49102 2.57707,0.69221 5.90536,0.38245 8.46874,-0.31924 13.18777,-3.60643 12.92964,-16.49182 19.23958,-19.90861 z"
+     id="path34"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#2a2330"
+     d="m 302.01786,451.89435 c 7.74598,1.48029 15.56571,1.92806 23.41705,2.45486 17.57386,1.31171 35.2162,1.43814 52.80691,0.37929 8.8238,-0.57315 17.68659,-2.07452 26.47667,-2.46013 l 0.23601,0.52363 c -1.23481,2.27049 -5.28269,3.76342 -7.56161,4.90972 -6.27728,3.2419 -12.76106,5.99703 -19.66628,7.59427 -21.65861,5.00981 -43.49739,3.5685 -63.83165,-5.64513 -3.12494,-1.41602 -6.41952,-2.81413 -9.3232,-4.64843 -1.4529,-0.91662 -2.17883,-1.40127 -2.5539,-3.10808 z"
+     id="path35"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 427.73097,214.3523 c 0.23706,-0.29921 0.46674,-0.60476 0.72592,-0.88501 11.4209,-12.39757 30.99236,-19.76532 47.52211,-20.74726 16.9122,-1.00618 39.13975,4.91077 51.98721,16.34115 29.12013,19.995 42.26891,56.31957 32.69496,90.32308 -9.57396,34.00352 -39.74346,58.12964 -75.01866,59.99238 -35.27519,1.86169 -67.81738,-18.95511 -80.91769,-51.76069 -13.10032,-32.80664 -3.84876,-70.31438 23.00615,-93.26365 z"
+     id="path36"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <defs
+     id="defs37">
+    <linearGradient
+       id="gradient_4"
+       gradientUnits="userSpaceOnUse"
+       x1="467.29279"
+       y1="215.53583"
+       x2="466.30695"
+       y2="202.03365">
+      <stop
+         offset="0"
+         stop-color="#F0C19E"
+         id="stop36" />
+      <stop
+         offset="1"
+         stop-color="#F6EDE0"
+         id="stop37" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="#2a2330"
+     d="m 453.23835,243.87807 c 6.3879,-1.79216 13.17196,-1.92386 19.47663,0.35927 2.66558,0.40668 5.89483,2.38427 8.13687,3.83401 10.58118,6.83779 17.40528,17.78878 19.99816,30.02095 3.10176,14.62696 0.68799,30.68154 -7.62166,43.20976 -5.60404,8.44662 -13.92739,14.93778 -23.97967,16.93117 -8.8965,1.76265 -17.88256,-0.003 -25.36514,-5.13941 -10.30305,-7.07168 -17.40529,-18.82341 -19.68314,-31.02923 -2.69614,-14.44996 -0.22336,-30.19795 8.16952,-42.40482 4.69584,-6.82936 12.40179,-14.23609 20.86843,-15.7817 z"
+     id="path38"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 453.23835,243.87807 c 6.3879,-1.79216 13.17196,-1.92386 19.47663,0.35927 -1.90173,1.26325 -15.23489,0.97352 -18.08063,0.66797 0.81232,-0.11168 2.50438,-0.15382 3.17341,-0.52995 -1.4097,-0.5858 -2.99114,-0.0147 -4.56941,-0.49729 z"
+     id="path39"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 469.34771,253.84185 c 7.2076,-1.61936 14.36357,2.91212 15.98189,10.12077 1.61831,7.20865 -2.91528,14.36357 -10.12393,15.97978 -7.20655,1.6162 -14.35831,-2.91528 -15.97557,-10.12077 -1.61725,-7.20655 2.91212,-14.36041 10.11761,-15.97978 z"
+     id="path40"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 180.35474,205.90779 c 32.39573,-20.34479 74.51398,-15.81963 101.85039,10.94047 25.17865,24.6487 31.97957,62.54311 16.94381,94.40994 -15.03576,31.86684 -48.60731,50.71132 -83.64017,46.9479 -35.03287,-3.76341 -63.83692,-29.30766 -71.76202,-63.64095 -7.92509,-34.33434 6.76826,-69.91929 36.60799,-88.65736 z"
+     id="path41"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#2a2330"
+     d="m 239.97204,242.6833 c 8.31597,-1.0694 16.78998,1.16737 23.74366,5.76734 9.50232,6.28571 15.57309,16.66566 17.81408,27.69462 3.08912,15.19802 0.84287,31.79414 -7.91034,44.77435 -5.79158,8.58991 -14.20764,14.83663 -24.46643,16.77734 -8.31914,1.24218 -16.42018,-0.78071 -23.40969,-5.39753 -10.19557,-6.73348 -17.2662,-18.61269 -19.54827,-30.50244 -2.69719,-14.05698 0.004,-30.11682 8.19797,-41.95494 6.3584,-9.18729 14.56164,-15.09266 25.57902,-17.15874 z"
+     id="path43"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 251.0895,253.51524 c 2.91633,-0.20545 5.57348,-0.11695 8.32862,1.04305 3.17235,1.30013 5.69148,3.81715 6.99477,6.98845 1.48872,3.65279 1.40127,8.12106 -0.18332,11.72855 -1.80902,4.11532 -5.03826,6.27096 -9.05665,7.86714 -2.6424,0.25813 -4.80226,0.18754 -7.29189,-0.84708 -3.54637,-1.50453 -6.3447,-4.36607 -7.7681,-7.94616 -1.39601,-3.45261 -1.39179,-7.19707 0.0727,-10.6286 1.78056,-4.17327 4.84966,-6.51856 8.90387,-8.20535 z"
+     id="path44"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#C0CACD"
+     d="m 225.65377,506.4323 c 6.14031,1.82165 12.22268,4.44298 18.24078,6.67869 17.49378,6.48484 34.74207,13.61658 51.70695,21.38047 8.24749,3.71179 16.32852,7.77127 24.62658,11.37349 l 0.85024,141.29674 c -7.69224,-2.6424 -15.37817,-6.60073 -22.91449,-9.74675 -21.55431,-9.02714 -42.76726,-18.88346 -64.45854,-27.58294 -0.70696,-5.94435 -0.75226,-12.05727 -1.05569,-18.03849 l -1.70998,-31.35057 c 3.32302,-1.20952 6.55543,-2.60026 9.65193,-4.31656 9.90689,-5.49341 17.70871,-13.23201 20.82944,-24.37055 2.71615,-9.69301 1.65624,-20.88634 -3.31354,-29.68696 -6.08447,-10.774 -19.26381,-19.05415 -30.92598,-22.34872 -0.21071,-4.42402 -0.91978,-8.90071 -1.5277,-13.28785 z"
+     id="path45"
+     style="fill:#82a1e4;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#C0CACD"
+     d="m 479.01544,506.05616 0.30027,0.0801 c 1.34122,2.38954 0.46042,8.69421 0.3814,11.5684 -5.88113,1.12418 -11.98773,3.58114 -17.01229,6.84938 -9.93112,6.45955 -18.07326,19.07627 -20.43013,30.63519 -1.91121,9.37904 -0.12327,18.65273 5.24687,26.57782 5.43125,8.0178 15.75536,16.28215 25.43046,18.08484 -0.88291,17.22933 -0.56999,34.60933 -1.23797,51.87132 -21.46581,7.884 -42.2826,17.6908 -63.48923,26.24278 -7.84291,3.03433 -15.55729,6.3721 -23.38229,9.44753 -0.3677,-8.43609 -0.0274,-17.0144 -0.0169,-25.4684 l -0.0464,-41.9149 c 0.10115,-24.31366 -0.43513,-48.75375 0.50151,-73.04739 8.14635,-5.16891 17.87202,-9.10406 26.66316,-13.13614 21.96627,-10.19558 44.34976,-19.46821 67.09146,-27.79051 z"
+     id="path46"
+     style="fill:#82a1e4;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 173.21141,686.61909 c -0.16858,-0.0516 -0.33821,-0.10114 -0.50678,-0.15382 -12.465,-3.95623 -24.45484,-16.59297 -30.40867,-27.87479 -8.19586,-15.52989 -11.43249,-34.43443 -6.08026,-51.4246 5.09305,-16.16626 17.48325,-24.97636 31.80046,-32.52427 3.07648,4.36923 7.00531,8.00516 10.77189,11.76753 1.13366,0.86815 1.86696,1.99549 2.69192,3.14391 0.28974,-0.0706 0.5721,-0.23706 0.87026,-0.21283 0.53839,0.0432 8.60782,4.83281 9.39169,5.38384 0.16015,0.11273 0.30027,0.25075 0.45094,0.37613 0.96298,-0.50151 1.27273,-0.83023 2.36846,-0.41722 0.8218,0.30975 1.77741,1.27168 2.33265,1.92069 5.51448,3.29352 13.43746,4.38609 19.72001,5.08672 1.42129,12.23322 1.54456,24.88049 1.96073,37.18957 0.0506,0.2223 0.10325,0.4425 0.15066,0.66481 1.12102,5.2553 -0.413,14.66068 1.64255,18.96038 0.53101,1.11153 1.62884,1.8343 2.62343,2.4949 4.43666,2.94899 10.31569,4.81911 15.21171,6.89046 11.43881,4.84019 22.99141,9.82682 34.71679,13.93793 -4.98452,1.6615 -10.19557,2.73932 -15.30653,3.94674 -22.56681,5.33326 -62.75067,12.10994 -84.05739,1.03884 -0.11695,-0.0611 -0.22968,-0.13065 -0.34452,-0.19492 z"
+     id="path47"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 173.21141,686.61909 c 7.73017,-1.90805 15.2823,-2.57708 22.65531,-6.03917 8.82696,-4.14481 16.52132,-12.53138 18.79707,-22.14326 1.06728,-4.50726 1.18002,-9.26631 1.41286,-13.87366 0.13907,-2.73722 0.13907,-8.55935 1.03462,-11.00157 1.05465,0.71539 0.23495,3.69599 1.46344,5.31852 0.0506,0.2223 0.10325,0.4425 0.15066,0.66481 1.12102,5.2553 -0.413,14.66068 1.64255,18.96038 0.53101,1.11153 1.62884,1.8343 2.62343,2.4949 4.43666,2.94899 10.31569,4.81911 15.21171,6.89046 11.43881,4.84019 22.99141,9.82682 34.71679,13.93793 -4.98452,1.6615 -10.19557,2.73932 -15.30653,3.94674 -22.56681,5.33326 -62.75067,12.10994 -84.05739,1.03884 -0.11695,-0.0611 -0.22968,-0.13065 -0.34452,-0.19492 z"
+     id="path48"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 178.78805,586.40914 c 1.13366,0.86815 1.86696,1.99549 2.69192,3.14391 0.28974,-0.0706 0.5721,-0.23706 0.87026,-0.21283 0.53839,0.0432 8.60782,4.83281 9.39169,5.38384 0.16015,0.11273 0.30027,0.25075 0.45094,0.37613 0.96298,-0.50151 1.27273,-0.83023 2.36846,-0.41722 0.8218,0.30975 1.77741,1.27168 2.33265,1.92069 -1.79953,2.90158 -3.78028,4.95924 -7.20444,5.80738 -2.71826,0.66903 -5.59139,0.19807 -7.95459,-1.30329 -2.44433,-1.54561 -4.35238,-4.13428 -4.88339,-6.99899 -0.54997,-2.9648 0.23601,-5.30587 1.9365,-7.69962 z"
+     id="path49"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#f2dac0"
+     d="m 181.47997,589.55305 c 0.28974,-0.0706 0.5721,-0.23706 0.87026,-0.21283 0.53839,0.0432 8.60782,4.83281 9.39169,5.38384 0.16015,0.11273 0.30027,0.25075 0.45094,0.37613 -0.38878,0.68062 -0.82813,1.33173 -1.38021,1.89224 -1.03251,1.04938 -2.60341,1.73842 -4.08581,1.63517 -1.57617,-0.10957 -2.84574,-1.02092 -3.83296,-2.20094 -1.87328,-2.23888 -1.67625,-4.16905 -1.41391,-6.87361 z"
+     id="path50"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 195.56645,613.72026 c 2.14826,-0.0158 4.00152,0.0506 5.95698,1.02514 2.78885,1.396 4.9013,3.84981 5.86849,6.81461 1.04305,3.15128 0.90503,6.85991 -0.73751,9.78783 -1.73526,3.09018 -4.12269,4.24913 -7.37301,5.14678 -2.56022,0.0906 -4.7106,-0.0348 -6.97897,-1.35386 -2.87524,-1.67099 -4.92869,-4.3608 -5.71045,-7.6048 -0.75437,-3.12916 -0.33293,-6.59862 1.50031,-9.28843 1.83008,-2.68349 4.35764,-3.95307 7.47416,-4.52727 z"
+     id="path51"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F2DAC0"
+     d="m 195.84986,617.90932 c 1.16527,-0.0295 2.34423,0.0611 3.42416,0.53839 1.74791,0.77122 2.9648,2.31895 3.62645,4.08265 0.806,2.14827 0.73857,4.61156 -0.354,6.64709 -0.99248,1.848 -2.15354,2.2884 -4.10478,2.83942 -1.15473,-0.0358 -2.45065,-0.0506 -3.52004,-0.52574 -1.84378,-0.81864 -3.48,-2.53915 -4.19434,-4.42296 -0.65954,-1.73421 -0.64901,-3.58642 0.12643,-5.28375 1.01882,-2.22939 2.81309,-3.04803 4.99612,-3.8751 z"
+     id="path52"
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 153.0668,623.69668 c 1.70997,0.0864 3.61486,0.37614 5.19103,1.0715 2.65083,1.18213 4.67793,3.42943 5.58296,6.18668 0.92927,2.78884 0.77966,5.97173 -0.62688,8.57831 -1.56142,2.8921 -3.91619,4.12691 -6.94947,5.04142 -2.1135,0.0474 -3.98678,-0.30975 -5.88113,-1.28432 -2.59394,-1.31804 -4.52306,-3.65701 -5.32484,-6.45428 -0.79967,-2.79201 -0.48254,-5.95489 1.03884,-8.45189 1.65729,-2.71931 3.98678,-3.88774 6.96949,-4.68742 z"
+     id="path53"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 152.39461,628.31562 c 0.69537,-0.04 1.39389,-0.0759 2.09137,-0.0558 1.67204,0.0443 3.24927,0.78281 4.35448,2.03764 0.98932,1.11785 1.46238,2.60131 1.30329,4.08581 -0.24233,2.36742 -1.66046,4.05842 -3.49054,5.43652 -0.7038,0.0611 -1.42656,0.13064 -2.13352,0.0917 -1.51611,-0.0832 -3.03538,-0.99564 -3.99731,-2.143 -1.03568,-1.23375 -1.48345,-2.83731 -1.34016,-4.43139 0.21071,-2.36531 1.42129,-3.62118 3.21239,-5.0214 z"
+     id="path54"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 157.92489,594.36689 c 5.40913,-0.50361 10.21349,3.44945 10.76241,8.85436 0.54786,5.40596 -3.36411,10.24298 -8.76375,10.83721 -5.46496,0.60054 -10.37258,-3.36832 -10.92782,-8.83855 -0.55524,-5.46918 3.45472,-10.34308 8.92916,-10.85302 z"
+     id="path55"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 157.89645,598.72769 c 2.94056,-0.41616 5.6683,1.61199 6.11608,4.54834 0.44883,2.9353 -1.54878,5.68517 -4.47881,6.16666 -1.9249,0.31607 -3.87194,-0.42671 -5.0962,-1.94493 -1.22533,-1.51822 -1.5393,-3.57798 -0.82391,-5.39226 0.71644,-1.81534 2.35161,-3.10493 4.28284,-3.37781 z"
+     id="path56"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 535.46671,572.04767 c 15.45825,8.64575 28.27304,20.07297 33.18382,37.64683 4.70743,16.84898 1.49293,33.77066 -7.0601,48.80116 -8.15688,14.33512 -22.30973,26.27438 -38.38855,30.57197 -2.00287,0.53628 -4.04367,0.97773 -6.07393,1.40233 -27.19417,6.09501 -56.32273,-1.97127 -82.82785,-8.02835 4.66423,-2.05028 9.36429,-4.01628 14.09806,-5.89693 6.64182,-2.57286 29.31399,-10.35151 33.65794,-13.96321 1.78794,-1.48556 2.82677,-3.38096 3.26928,-5.65145 0.84393,-4.33024 0.3066,-9.5866 0.40563,-14.03801 0.30449,-13.63132 -0.0116,-27.70832 1.35808,-41.26273 l 4.51041,-0.44883 c 6.83041,-1.84378 13.51859,-4.10584 19.19427,-8.45716 0.0558,-0.44672 0.25076,-0.80915 0.42671,-1.22111 3.58957,-2.69191 8.69948,-7.13174 13.21305,-7.86503 4.25228,-3.47263 7.58584,-7.36037 11.03318,-11.58948 z"
+     id="path57"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 487.08909,601.62928 4.51041,-0.44883 c -1.96283,15.90813 -3.2008,44.6574 0.59317,59.99554 1.42656,5.76102 3.8614,11.15434 7.49207,15.86704 2.81729,3.657 13.11717,12.65254 17.09236,13.40164 0.11484,0.0221 0.2339,0.0169 0.35085,0.0253 -27.19417,6.09501 -56.32273,-1.97127 -82.82785,-8.02835 4.66423,-2.05028 9.36429,-4.01628 14.09806,-5.89693 6.64182,-2.57286 29.31399,-10.35151 33.65794,-13.96321 1.78794,-1.48556 2.82677,-3.38096 3.26928,-5.65145 0.84393,-4.33024 0.3066,-9.5866 0.40563,-14.03801 0.30449,-13.63132 -0.0116,-27.70832 1.35808,-41.26273 z"
+     id="path58"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 510.79377,592.72329 c 0.0558,-0.44672 0.25076,-0.80915 0.42671,-1.22111 3.58957,-2.69191 8.69948,-7.13174 13.21305,-7.86503 2.62554,0.85762 4.71375,1.9091 6.02547,4.47037 1.16,2.26206 0.99248,5.03089 0.12222,7.36037 -1.16843,3.09334 -3.54006,5.58086 -6.57334,6.89679 -2.39691,1.03462 -5.33959,1.36334 -7.79129,0.32345 -2.21675,-0.9398 -3.76763,-2.96374 -4.60312,-5.17417 -0.56789,-1.50452 -0.70591,-3.19659 -0.8197,-4.79067 z"
+     id="path59"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 521.62045,588.13597 c 0.66481,0.0211 1.30539,0.0305 1.94703,0.22547 1.20004,0.36243 2.15564,1.06728 2.67295,2.24098 0.60371,1.37283 0.37192,2.86787 -0.21071,4.20487 -0.97563,2.24204 -2.39165,3.09018 -4.59154,3.95201 -1.05886,-0.14223 -2.16091,-0.25497 -3.10493,-0.79124 -1.10837,-0.629 -2.01446,-1.69523 -2.33686,-2.93952 -0.32766,-1.26536 -0.0485,-2.63607 0.60687,-3.74866 1.17264,-1.99023 2.89632,-2.56444 5.01719,-3.14391 z"
+     id="path60"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 508.95421,611.74162 c 2.2452,0.0126 4.23121,0.34557 6.20985,1.4687 1.92385,1.09152 3.11862,2.80044 3.63277,4.94133 0.85762,3.57799 -0.23706,7.34667 -2.17039,10.38311 -2.61817,4.11005 -6.71979,7.21498 -11.4957,8.25592 -2.31579,0.0126 -4.23332,-0.21072 -6.26991,-1.396 -1.85747,-1.08098 -3.12178,-2.78042 -3.6254,-4.8718 -0.87974,-3.65279 0.19492,-7.66696 2.17672,-10.77821 2.80886,-4.40821 6.56807,-6.80091 11.54206,-8.00305 z"
+     id="path61"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 508.47904,617.11386 c 0.79651,-0.009 1.48977,0.0295 2.26416,0.23706 1.34227,0.36033 2.57813,1.05991 3.16287,2.39059 0.67114,1.52665 0.17911,3.43681 -0.47095,4.88444 -1.54245,3.43259 -4.10583,5.67568 -7.60691,6.90943 -1.05464,-0.0148 -2.16512,-0.019 -3.15233,-0.44672 -1.11681,-0.48465 -2.0977,-1.34438 -2.52124,-2.50649 -0.6311,-1.72893 -0.0727,-3.75815 0.74699,-5.32799 1.70892,-3.27561 4.15536,-4.9761 7.57741,-6.14032 z"
+     id="path62"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 551.06824,624.49847 c 2.1999,-0.20124 4.25861,-0.0622 6.23409,1.03357 2.05976,1.14314 3.46946,3.07963 4.06053,5.34485 0.7354,2.89315 0.24232,5.9612 -1.36229,8.47823 -1.8501,2.85522 -4.24702,3.9636 -7.46468,4.68952 -2.03026,0.0179 -3.99942,-0.23179 -5.84109,-1.13472 -2.19357,-1.07676 -3.84244,-2.92054 -4.51463,-5.2869 -0.69747,-2.45381 -0.27077,-5.151 0.96509,-7.36353 1.84273,-3.3009 4.45773,-4.70428 7.92298,-5.76102 z"
+     id="path63"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 550.82908,629.47772 c 0.79124,-0.06 1.58986,-0.12959 2.38111,-0.02 1.08309,0.15066 1.99444,0.70379 2.62238,1.60356 0.83234,1.19266 0.95455,2.6129 0.60792,3.99626 -0.5289,2.10401 -1.70049,3.37886 -3.4958,4.49671 -0.90293,0.0284 -1.84273,0.0759 -2.72353,-0.15909 -1.19266,-0.31924 -2.24204,-1.1737 -2.83731,-2.25152 -0.69116,-1.2485 -0.75437,-2.67506 -0.27921,-4.00574 0.68694,-1.92701 1.95968,-2.78147 3.72444,-3.66017 z"
+     id="path64"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 546.52201,595.08017 c 1.7184,-0.06 3.31986,-0.0348 4.92869,0.64058 2.17987,0.91557 3.82558,2.61185 4.63157,4.83808 0.97246,2.68665 0.66482,5.84952 -0.6743,8.35706 -1.75843,3.29141 -4.2881,4.61156 -7.69646,5.64934 -2.09137,0.12327 -4.30075,-0.0179 -6.1677,-1.04516 -2.01236,-1.09362 -3.47052,-2.98587 -4.01418,-5.2121 -0.67324,-2.65925 -0.16225,-5.55768 1.23481,-7.90086 1.84273,-3.09123 4.38714,-4.43455 7.75757,-5.32694 z"
+     id="path65"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 547.09095,599.64958 c 0.71749,0.0369 1.49715,0.0537 2.17777,0.30238 1.10837,0.40353 1.94387,1.29065 2.36214,2.37584 0.57421,1.48978 0.31397,3.09334 -0.31186,4.52411 -0.94928,2.1704 -2.19147,2.99114 -4.35764,3.76869 -0.54365,-0.118 -1.06729,-0.24865 -1.58355,-0.46042 -1.41286,-0.57842 -2.52334,-1.47502 -3.09439,-2.92792 -0.46884,-1.19372 -0.32766,-2.49174 0.17385,-3.65385 0.90503,-2.09242 2.62238,-3.08385 4.63368,-3.92883 z"
+     id="path66"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 223.40436,450.78281 c 10.34308,1.62569 20.61135,2.32 31.07137,2.5107 5.80317,0.10536 11.64637,-0.14223 17.43795,0.19491 -6.11187,5.04248 -14.72601,8.72688 -22.04529,11.74435 -2.07135,0.85446 -6.98213,2.01025 -8.26118,3.53163 -5.00982,-0.60686 -11.03634,-1.64676 -15.296,1.83114 -2.34845,1.91753 -3.31775,4.91288 -3.53479,7.84713 -0.24865,3.36094 -0.39088,8.89544 1.22848,11.84233 l -0.44672,1.05148 c -2.91949,-0.8376 -5.9907,-1.91226 -8.90493,-0.43829 -1.63517,0.82707 -2.68033,2.30525 -3.22608,4.02787 -1.50769,4.75695 0.99353,23.34857 1.40443,29.56896 -1.90805,0.18859 -3.87194,0.24443 -5.6662,0.95981 l -0.40458,0.58369 c 2.64556,2.82046 30.3581,1.55194 39.84461,22.9598 0.98194,0.49729 0.88712,0.56051 1.25061,1.61726 -0.34558,1.23375 -0.2792,1.337 -1.31909,2.05344 1.55825,2.01446 1.79636,6.85886 1.53613,9.25367 -0.14224,1.29907 -0.36876,2.15564 -1.48346,2.93108 -0.25812,0.18017 -0.64795,0.36138 -0.93769,0.50362 0.95244,0.54365 0.97036,0.58895 1.40443,1.59935 -0.0748,1.07676 -0.31396,1.90804 -1.02198,2.74881 l 0.19281,0.6469 c -0.93664,3.421 -3.84244,6.95895 -6.38791,9.36535 -5.85689,5.5366 -14.19394,8.0157 -22.13167,7.73544 -13.17197,-0.46463 -25.90458,-7.08222 -34.79581,-16.66039 -8.69211,-9.19256 -13.25941,-21.53219 -12.64833,-34.16893 0.21177,-5.19735 0.91662,-10.38206 2.45802,-15.35921 5.78525,-18.68012 22.66268,-42.64293 35.93474,-56.82634 4.59364,-4.90972 9.83525,-9.08299 14.74813,-13.65556 z"
+     id="path67"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 245.65193,565.35739 c 0.95244,0.54365 0.97036,0.58895 1.40443,1.59935 -0.0748,1.07676 -0.31396,1.90804 -1.02198,2.74881 -9.07982,3.24189 -18.53578,4.49566 -28.06443,2.7467 8.35074,-3.42627 18.40197,-3.04171 27.68198,-7.09486 z"
+     id="path68"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 246.60543,548.99832 c 0.98194,0.49729 0.88712,0.56051 1.25061,1.61726 -0.34558,1.23375 -0.2792,1.337 -1.31909,2.05344 -1.36651,0.50783 -2.79096,0.88396 -4.1975,1.26958 -4.14166,1.13471 -15.27387,3.36094 -18.9804,1.24323 l -0.0232,-0.61424 c 2.48541,-1.86907 18.89821,-4.40505 23.26955,-5.56927 z"
+     id="path69"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 478.74678,450.54681 c 22.1675,18.35983 51.78913,49.41329 54.59063,79.48271 1.27168,13.65977 -2.33476,26.47773 -11.15961,37.05154 -8.47085,10.15027 -21.71446,18.82236 -35.1593,20.00554 -8.36128,0.7354 -18.54526,-2.80887 -24.90578,-8.22221 -3.65595,-3.11019 -5.27005,-6.5333 -6.23303,-11.16171 3.88985,2.91738 11.73066,7.62692 16.77629,6.76403 0.73962,-0.12643 0.89555,-0.35822 1.46238,-0.80494 0.1159,-0.49308 0.35717,-0.85235 0.0548,-1.31382 -1.04832,-1.59724 -8.09999,-4.75906 -10.15765,-6.19405 -3.58325,-2.49806 -6.63339,-5.47339 -9.09352,-9.08615 0.89766,-2.7035 1.79742,-5.37435 2.91949,-7.99357 0.60055,-2.20727 1.01566,-3.53795 2.82994,-5.0193 8.03783,-13.60498 22.29604,-9.09984 28.87149,-16.69832 5.70939,-6.59652 4.5083,-23.76263 3.98994,-32.10494 -0.34453,-0.54366 -0.69327,-1.06308 -1.10417,-1.55932 -2.86576,-3.44944 -5.50921,-3.62118 -9.71513,-3.94252 l -0.14856,-0.93664 c 0.76174,-1.36019 1.20636,-2.28208 1.0125,-3.85824 -0.17806,-1.50874 -0.38561,-3.01432 -0.62478,-4.51463 -0.64901,-3.90355 -1.76371,-8.39078 -5.24582,-10.72869 -5.741,-3.85403 -16.61614,-0.68799 -22.90817,0.59422 l -0.10009,-0.50256 c -2.8331,-3.39361 -17.03968,-14.49211 -21.42893,-16.60034 15.38555,0.0832 30.23904,-0.36032 45.47709,-2.65609 z"
+     id="path70"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 460.67141,544.05488 0.51521,0.33188 c 3.32407,2.12298 14.77447,6.99267 15.77222,10.36099 -0.3814,0.54892 -0.2771,0.62899 -0.99354,0.78387 -5.1963,1.12734 -13.92001,-3.6865 -18.12383,-6.45744 0.60055,-2.20727 1.01566,-3.53795 2.82994,-5.0193 z"
+     id="path71"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#C0CACD"
+     d="m 333.68451,553.93544 1.41075,0.59527 c 11.66112,4.8581 24.36634,4.7559 36.02325,-0.0632 0.3972,5.59561 0.19491,11.30816 0.20123,16.91747 l -0.14118,35.59759 -0.02,50.12447 c 0.0558,11.69694 0.46674,23.49607 0.10747,35.18353 -0.0442,1.44657 -0.16647,2.3948 -0.93348,3.63382 -4.47881,3.23136 -9.60451,5.01403 -15.11373,5.35645 -5.48076,0.34136 -13.9474,-0.29817 -18.15227,-4.25018 -1.05148,-0.98826 -1.66046,-1.8933 -1.86485,-3.34409 -0.6585,-4.68741 -0.32662,-9.89003 -0.40037,-14.64909 -0.14012,-11.2007 -0.21704,-22.40245 -0.23073,-33.6042 z"
+     id="path72"
+     style="fill:#82a1e4;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 229.02841,491.53245 c 0.11274,-0.20018 0.23285,-0.39826 0.34031,-0.60265 2.24731,-4.28389 -0.53101,-11.58315 2.35477,-15.15903 4.55677,-1.42235 12.16157,1.48239 16.71624,2.80781 20.53233,5.97595 39.81299,13.5955 58.7681,23.52663 13.37109,7.00531 34.8959,19.1142 43.8788,31.19148 -3.37675,0.33294 -6.90627,0.91557 -10.29251,0.91452 l -0.44777,-0.40774 c -0.50678,0.5289 -0.81232,0.8671 -1.47292,1.20425 l 0.12959,0.0706 0.11274,0.48676 -2.3042,2.71404 c 7.39198,4.04789 20.0108,4.40716 28.04336,2.25257 1.94493,-0.52152 3.8298,-1.24744 4.8423,-3.07437 -0.0527,-0.6764 0.0495,-0.84708 -0.41933,-1.38968 -2.42326,-2.8036 -10.88041,-2.88999 -14.3699,-2.99219 0.0906,-0.12538 0.17911,-0.25181 0.27078,-0.37719 3.32091,-4.5083 7.95143,-8.35495 12.28694,-11.88763 24.13139,-19.66102 54.57378,-32.43578 84.31026,-40.7507 4.83491,-1.35175 10.00276,-3.15865 14.96517,-3.82347 1.26957,-0.17068 2.81834,-0.42354 3.86561,0.50572 3.50424,3.10704 2.80149,12.31961 2.83205,16.74258 -10.38417,4.69795 -21.08968,8.72055 -31.61924,13.08346 -15.96082,6.50275 -31.72987,13.46697 -47.28821,20.88317 -5.55557,2.63081 -13.42272,5.56611 -18.49259,8.58148 -2.52861,1.50347 -3.75604,4.26703 -6.18351,5.88956 -9.5729,6.39739 -25.8972,2.9216 -36.38778,0.97457 l -0.0421,-4.46089 c -5.52291,-4.18591 -12.46185,-7.25396 -18.6443,-10.34203 -27.85056,-13.90947 -57.18351,-24.93422 -86.57547,-35.09503 z"
+     id="path73"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 338.87343,535.00772 c -5.74205,-2.78779 -11.16171,-6.70504 -16.69832,-9.91953 -9.49388,-5.51027 -19.57567,-10.54748 -29.62269,-14.96412 -13.40165,-5.89061 -27.05721,-11.07321 -40.72119,-16.31692 -4.67794,-1.79532 -12.70839,-4.20066 -16.77524,-6.30257 -0.99248,-0.51415 -1.39284,-0.86394 -1.77845,-1.89857 0.45725,-0.68904 0.88185,-0.75647 1.60777,-1.11575 3.50634,0.4404 7.0464,2.0387 10.45687,3.02064 28.01597,8.06733 57.55332,21.69549 82.08191,37.46982 4.3608,2.80465 8.867,5.58402 12.92226,8.82275 -0.50678,0.5289 -0.81232,0.8671 -1.47292,1.20425 z"
+     id="path74"
+     style="stroke-width:1.05359" />
+  <defs
+     id="defs75">
+    <linearGradient
+       id="gradient_5"
+       gradientUnits="userSpaceOnUse"
+       x1="410.57153"
+       y1="495.6243"
+       x2="417.55499"
+       y2="507.42554"
+       gradientTransform="matrix(1.0535884,0,0,1.0535884,-18.197159,-19.701306)">
+      <stop
+         offset="0"
+         stop-color="black"
+         id="stop74" />
+      <stop
+         offset="1"
+         stop-color="#06051A"
+         id="stop75" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="url(#gradient_5)"
+     d="m 465.62539,486.78182 1.09151,-0.0147 c 0.87764,0.47095 0.96088,0.41406 1.2896,1.33911 -0.38246,0.7491 -0.53628,1.05675 -1.3054,1.48661 -2.14089,1.19583 -5.14994,1.8343 -7.49312,2.61396 -6.07605,1.99971 -12.14155,4.03208 -18.19653,6.09606 -12.32066,4.1406 -24.35369,9.09457 -36.01797,14.83031 -11.52731,5.6957 -22.77121,12.22057 -34.69888,17.0439 -0.49097,0.18754 -1.06412,0.29606 -1.57406,0.42986 l -0.1612,-0.36559 c 3.90671,-4.51568 11.38508,-8.00938 16.5877,-10.92888 25.3114,-14.20237 51.98826,-26.38185 80.47835,-32.53059 z"
+     id="path75"
+     style="fill:url(#gradient_5);stroke-width:1.05359" />
+  <path
+     fill="#AB745E"
+     d="m 63.527375,543.90001 c 0.293003,-0.4678 0.191543,-0.35822 0.510464,-0.70696 10.664211,-11.63689 23.114992,-17.75718 38.937151,-18.72648 1.14209,6.98424 2.89737,13.57127 6.0181,19.95812 4.1996,7.51314 8.44029,13.84205 14.78395,19.75163 5.3143,3.95095 10.60331,7.24658 16.76154,9.76571 -10.73291,10.94889 -15.91446,20.7146 -20.16042,35.41742 -4.82122,-2.04712 -9.59292,-4.07212 -14.16233,-6.6513 -2.74881,-1.55088 -5.59666,-3.82031 -8.396049,-5.09305 -0.826013,0.38667 -1.193715,0.46148 -2.068194,0.10326 -5.632483,-2.30315 -18.505121,-17.55173 -20.83903,-23.2095 -0.429127,-1.0399 -0.472534,-1.42867 -0.05658,-2.46224 -1.107216,-3.2893 -3.478949,-6.80618 -4.984,-10.00909 -2.765037,-5.88429 -4.620406,-11.89501 -6.344604,-18.13752 z"
+     id="path76"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 63.527375,543.90001 c 0.293003,-0.4678 0.191543,-0.35822 0.510464,-0.70696 10.664211,-11.63689 23.114992,-17.75718 38.937151,-18.72648 1.14209,6.98424 2.89737,13.57127 6.0181,19.95812 -1.09995,1.27379 -4.24913,1.75001 -5.85479,2.32527 -13.614474,4.86969 -19.489493,12.82744 -26.436012,24.77303 -0.42565,0.73224 -0.492869,0.83128 -1.215525,1.26009 l -0.630784,-0.73646 c -1.107216,-3.2893 -3.478949,-6.80618 -4.984,-10.00909 -2.765037,-5.88429 -4.620406,-11.89501 -6.344604,-18.13752 z"
+     id="path77"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 96.64187,596.46248 c 0.458311,-2.01762 1.045159,-3.98783 1.683634,-5.95594 4.358696,-13.4343 13.391106,-20.13196 25.451536,-26.33022 5.3143,3.95095 10.60331,7.24658 16.76154,9.76571 -10.73291,10.94889 -15.91446,20.7146 -20.16042,35.41742 -4.82122,-2.04712 -9.59292,-4.07212 -14.16233,-6.6513 -2.74881,-1.55088 -5.59666,-3.82031 -8.396049,-5.09305 z"
+     id="path78"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#020105"
+     d="m 74.855979,572.04662 0.630784,0.73646 c 3.079849,6.75034 14.463767,20.49545 21.155107,23.6794 l 1.177911,1.15262 c -0.826013,0.38667 -1.193715,0.46148 -2.068194,0.10326 -5.632483,-2.30315 -18.505121,-17.55173 -20.83903,-23.2095 -0.429127,-1.0399 -0.472534,-1.42867 -0.05658,-2.46224 z"
+     id="path79"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#FCF8E8"
+     d="m 133.03071,107.02325 0.9103,-0.22125 c 1.34016,-2.88999 1.93228,-6.11397 3.04803,-9.107218 3.0238,-8.116845 8.73846,-18.827309 17.51064,-21.875761 4.64738,-1.614835 9.41065,-0.283837 13.62289,1.881392 10.64546,5.471812 18.51893,16.345792 25.17339,26.015627 -14.05697,11.76858 -28.35733,23.54138 -40.75174,37.09474 -5.50079,6.01704 -10.47794,12.52611 -15.40452,19.01411 -2.88156,-13.33843 -5.96542,-25.68859 -5.73573,-39.45478 0.0453,-2.67611 0.0242,-11.80124 1.62674,-13.34686 z"
+     id="path80"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#AB745E"
+     d="m 60.278425,509.41184 c 0.269192,-11.04792 4.38377,-24.56862 11.966868,-32.8414 3.623922,-3.95306 9.077401,-7.50892 14.591251,-7.56898 3.117146,-0.0337 5.955514,1.22322 8.165942,3.39782 7.078004,6.96633 7.104344,20.29738 7.102244,29.47941 -0.0316,7.6048 0.0664,15.02101 0.87026,22.58788 -15.822159,0.9693 -28.27294,7.08959 -38.937151,18.72648 -0.318921,0.34874 -0.217461,0.23916 -0.510464,0.70696 -2.409767,-10.64968 -4.812581,-23.55508 -3.24895,-34.48817 z"
+     id="path81"
+     style="fill:#d06b3b;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 60.278425,509.41184 c 0.269192,-11.04792 4.38377,-24.56862 11.966868,-32.8414 3.623922,-3.95306 9.077401,-7.50892 14.591251,-7.56898 3.117146,-0.0337 5.955514,1.22322 8.165942,3.39782 7.078004,6.96633 7.104344,20.29738 7.102244,29.47941 -9.634017,-3.17868 -20.773923,-2.48436 -29.871027,2.09242 -2.032161,1.02198 -4.099302,2.26627 -5.889032,3.67281 -1.750116,1.37599 -3.401616,4.2112 -5.427561,4.91183 l -0.488654,-0.40036 c -0.05974,-0.91346 -0.109784,-1.82798 -0.150031,-2.74355 z"
+     id="path82"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 579.01362,270.44746 c 7.65116,0.18859 15.86704,0.32872 23.41179,1.6141 4.82098,19.46957 3.09876,39.42307 0.39522,59.00883 -1.57761,5.849 -15.32239,-5.15897 -19.81075,-6.00175 -4.54939,-0.85446 -8.98078,-2.24309 -13.56389,-2.9216 -1.09784,0.51521 -1.47608,1.46344 -2.143,2.45908 l 4.6969,-9.6298 c 0.51731,-0.65744 0.80388,-1.67415 1.1305,-2.45276 5.0077,-16.24211 6.53014,-24.98795 5.88323,-42.0761 z"
+     id="path83"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     fill="#fcf8e8"
+     d="m 573.13039,312.52356 c 2.3653,1.38969 4.73877,3.87932 7.18758,7.22446 1.84431,2.78913 2.58303,4.94912 2.57211,5.47279 -0.0836,4.00826 -13.32363,-0.0278 -15.18383,-1.15044 0.43013,-1.70813 3.52373,-7.20866 4.29364,-9.09405 0.51731,-0.65744 0.80388,-1.67415 1.1305,-2.45276 z"
+     id="path85"
+     sodipodi:nodetypes="ccsccc"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#F8BE83"
+     d="m 101.45466,272.01941 c 8.33072,-0.0611 16.66145,-0.0232 24.99112,0.11379 -0.37508,15.55202 1.34754,29.62796 7.4731,44.10005 l -2.66545,1.93715 c 1.50768,0.04 1.71722,-1.53324 2.99944,-0.66297 0.80002,2.63761 1.10273,3.59971 1.50452,4.59009 -4.85599,1.46133 -10.39891,1.85748 -15.42559,2.67296 -5.70834,1.01144 -11.54311,2.05344 -17.1324,3.59695 -0.92684,-3.45902 -1.57929,-7.86425 -2.01762,-11.44408 -1.653078,-15.29178 -1.265358,-29.60794 0.27288,-44.90394 z"
+     id="path86"
+     style="fill:#f1b461;fill-opacity:1;stroke-width:1.05359"
+     sodipodi:nodetypes="cccccccccc" />
+  <path
+     fill="#020105"
+     d="m 123.76817,319.63012 c 2.81308,-0.32872 5.77659,-1.07623 8.59599,-1.41021 1.50769,0.04 2.65158,-2.07709 3.9338,-1.20683 0.48886,0.72171 0.58001,3.56738 0.48519,4.45872 -0.02,0.18648 -0.1001,0.36243 -0.15067,0.5447 -4.85599,1.46133 -10.39892,1.85748 -15.42559,2.67296 -5.70834,1.01144 -11.54311,2.05344 -17.1324,3.59695 l -36.545609,8.61036 c -0.160145,-1.06096 28.248193,-11.29153 35.841819,-13.32623 6.62601,-1.78372 13.65661,-2.59182 20.39747,-3.94042 z"
+     id="path87"
+     sodipodi:nodetypes="cccccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <path
+     fill="#fcf8e8"
+     d="m 122.89308,319.71114 c 0.38983,-0.67745 0.78176,-1.34543 1.40232,-1.83851 2.772,-2.20726 6.32891,-1.94914 9.62348,-1.63938 l 0.32135,1.23586 c -0.81759,0.82496 -1.81428,0.75226 -2.93741,0.94823 -2.8194,0.33399 -5.59666,0.96509 -8.40974,1.2938 z"
+     id="path88"
+     style="stroke-width:1.05359" />
+  <path
+     fill="#f2dac0"
+     d="m 224.0049,490.285 5.02351,1.24745 -0.82285,1.46659 -4.64738,-1.66256 z"
+     id="path89"
+     style="stroke-width:1.05359" />
+  <defs
+     id="defs90">
+    <linearGradient
+       id="gradient_6"
+       gradientUnits="userSpaceOnUse"
+       x1="89.492165"
+       y1="339.19208"
+       x2="100.32093"
+       y2="330.00284">
+      <stop
+         offset="0"
+         stop-color="black"
+         id="stop89" />
+      <stop
+         offset="1"
+         stop-color="#0E0D1E"
+         id="stop90" />
+    </linearGradient>
+  </defs>
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0450643"
+     d="m 153.85502,639.79797 c -1.0183,-0.22339 -2.01573,-0.77644 -2.852,-1.58136 -0.88838,-0.85506 -1.44317,-1.85791 -1.70268,-3.07774 -0.12884,-0.60565 -0.13905,-1.73674 -0.0215,-2.37642 0.15983,-0.86942 0.5196,-1.7074 1.03341,-2.40709 0.32467,-0.44211 1.06875,-1.18659 1.66575,-1.66662 l 0.44044,-0.35415 0.83839,-0.035 c 1.72491,-0.072 2.65945,0.0858 3.75603,0.63376 1.76066,0.87988 2.91914,2.52155 3.1111,4.4087 0.0539,0.52977 0.0318,0.89489 -0.0962,1.59531 -0.25537,1.39673 -0.97503,2.6483 -2.20956,3.84267 -0.62724,0.60682 -1.08384,0.96767 -1.28923,1.01885 -0.0932,0.0233 -0.64611,0.0516 -1.22856,0.063 -0.92108,0.0181 -1.10936,0.009 -1.44547,-0.0639 z"
+     id="path91" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0450643"
+     d="m 158.13123,609.46278 c -2.47064,-0.2772 -4.36909,-2.06658 -4.79701,-4.52143 -0.10542,-0.60481 -0.0647,-1.5722 0.0907,-2.15526 0.54168,-2.03236 2.12218,-3.54115 4.17387,-3.98447 0.52987,-0.11449 1.58814,-0.11449 2.11801,0 2.21305,0.4782 3.87752,2.20458 4.25743,4.41581 0.39234,2.28367 -0.79266,4.61527 -2.88971,5.68573 -0.87723,0.44778 -2.01998,0.66432 -2.95326,0.55962 z"
+     id="path92" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0450643"
+     d="m 186.21459,598.53648 c -1.01014,-0.20262 -1.90997,-0.71385 -2.77404,-1.5761 -1.2412,-1.23857 -1.87233,-2.46745 -2.05072,-3.99296 -0.0617,-0.52815 -0.0289,-2.07046 0.0617,-2.89949 l 0.0537,-0.49179 0.31297,-0.10536 c 0.17212,-0.058 0.37257,-0.10525 0.44542,-0.10525 0.29323,0 2.09823,0.98303 5.77594,3.14564 2.42165,1.42402 3.65339,2.18967 3.97708,2.47212 l 0.1466,0.12794 -0.24545,0.39428 c -0.70461,1.13184 -1.41549,1.85662 -2.34605,2.39189 -1.02688,0.59068 -2.34637,0.84185 -3.35729,0.63909 z"
+     id="path93" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0901287"
+     d="m 504.3857,631.42628 c -2.25275,-0.21754 -3.952,-1.58709 -4.35282,-3.50825 -0.44943,-2.15405 0.84115,-5.33708 3.07183,-7.57624 1.2101,-1.2147 2.53473,-2.05348 4.48388,-2.83928 0.65059,-0.26228 0.87798,-0.30977 1.48286,-0.30977 1.50191,0 3.11683,0.59753 3.99895,1.47965 1.43421,1.4342 1.46186,3.61171 0.0811,6.39035 -0.65958,1.3274 -1.35148,2.28487 -2.42332,3.35346 -1.32267,1.31866 -2.62352,2.16837 -4.39208,2.86886 -0.63078,0.24984 -0.74222,0.2579 -1.95046,0.14122 z"
+     id="path94" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0901287"
+     d="m 520.43642,598.5736 c -1.46122,-0.24528 -2.41527,-0.71948 -3.25599,-1.61837 -1.159,-1.23918 -1.51251,-2.60001 -1.09722,-4.22377 0.25554,-0.99914 0.66491,-1.70656 1.44425,-2.49576 0.82523,-0.83568 1.49961,-1.22273 2.98267,-1.71192 1.05297,-0.34731 1.15932,-0.36533 1.82307,-0.30883 1.27782,0.10875 2.2155,0.49325 2.99063,1.22634 1.43484,1.35701 1.59435,3.40758 0.44644,5.73942 -0.47096,0.95674 -1.20693,1.80907 -2.06616,2.39286 -0.58343,0.39639 -2.16855,1.14757 -2.39123,1.13318 -0.0744,-0.005 -0.46876,-0.0647 -0.87646,-0.13315 z"
+     id="path95" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0901287"
+     d="m 545.96088,610.31474 c -1.82987,-0.60674 -3.0645,-1.68474 -3.65939,-3.19518 -0.29167,-0.74058 -0.29327,-2.06861 -0.003,-2.95042 0.58678,-1.78588 1.83584,-3.07262 3.95899,-4.07837 l 0.85674,-0.40584 0.75336,0.0611 c 0.99251,0.0805 1.52328,0.24724 2.17705,0.68382 0.64897,0.43336 1.19987,1.12176 1.52166,1.90143 0.18901,0.45799 0.24641,0.77098 0.28009,1.52736 0.0509,1.14324 -0.13764,2.01914 -0.68277,3.17204 -0.71211,1.50601 -1.55885,2.34998 -3.07838,3.06832 -0.95028,0.44924 -1.30948,0.48573 -2.12381,0.21571 z"
+     id="path96" />
+  <path
+     style="fill:#f9b3b3;fill-opacity:1;stroke-width:0.0901287"
+     d="m 550.72029,639.44513 c -1.41052,-0.23525 -2.70709,-1.21219 -3.38657,-2.55171 -1.09938,-2.16731 -0.22213,-5.02047 1.99356,-6.48386 1.32002,-0.87183 1.44696,-0.91311 2.8096,-0.91372 0.94455,-4.3e-4 1.327,0.0366 1.70966,0.16546 1.0911,0.36748 2.00072,1.25211 2.4497,2.3824 0.17413,0.43833 0.20531,0.68547 0.20722,1.64257 0.002,1.03591 -0.0204,1.19018 -0.27907,1.91625 -0.15473,0.4343 -0.41782,1.02066 -0.58464,1.30302 -0.38212,0.64681 -1.48356,1.77326 -2.2136,2.26386 l -0.55836,0.37524 -0.83863,-0.0105 c -0.46125,-0.005 -1.05024,-0.0458 -1.30887,-0.0889 z"
+     id="path97" />
+  <path
+     fill="#020105"
+     d="m 577.42751,321.24321 c -2.81308,-0.32872 -5.77659,-1.07623 -8.596,-1.41022 -1.50768,0.04 -2.65157,-2.07708 -3.93379,-1.20682 -0.48887,0.72171 -0.58001,3.56738 -0.48519,4.45871 0.02,0.18649 0.10009,0.36244 0.15066,0.54471 4.85599,1.46132 10.39892,1.85747 15.42559,2.67295 5.70834,1.01145 11.54312,2.05344 17.1324,3.59695 l 36.54561,8.61037 c 0.16015,-1.06096 -28.24819,-11.29153 -35.84181,-13.32623 -6.62602,-1.78372 -13.65661,-2.59183 -20.39747,-3.94042 z"
+     id="path87-7"
+     sodipodi:nodetypes="cccccccccc"
+     style="fill:#2a2330;fill-opacity:1;stroke-width:1.05359" />
+  <text
+     xml:space="preserve"
+     id="text1"
+     style="font-size:666.667px;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#5e86dc"><tspan
+       x="696"
+       y="1308.2205"
+       id="tspan3"><tspan
+         style="font-size:192px"
+         id="tspan2">C</tspan></tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:462.172px;font-family:'Tw Cen MT';-inkscape-font-specification:'Tw Cen MT';fill:#2a2330;fill-opacity:1;stroke-width:1.73315"
+     x="922.69989"
+     y="492.09271"
+     id="text2"
+     transform="scale(0.98199106,1.0183392)"><tspan
+       sodipodi:role="line"
+       x="922.69989"
+       y="492.09271"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Tw Cen MT';-inkscape-font-specification:'Tw Cen MT Bold';fill:#ffffff;fill-opacity:1;stroke-width:1.73315"
+       id="tspan5">Computer Science Resources.com</tspan></text>
+</svg>
diff --git a/resources/css/app.css b/resources/css/app.css
index b8459b52..de566876 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,3 +8,11 @@
 [x-cloak] {
     display: none;
 }
+
+html.dark {
+  --surface-ground: #374151 !important;
+  --surface-card: #374151 !important;
+  --surface-overlay: #374151 !important;
+  --surface-border: #4b5563 !important; /* gray-600 for borders */
+}
+
diff --git a/resources/js/Components/ApplicationHeaderLogo.vue b/resources/js/Components/ApplicationHeaderLogo.vue
index f1547226..12705d91 100644
--- a/resources/js/Components/ApplicationHeaderLogo.vue
+++ b/resources/js/Components/ApplicationHeaderLogo.vue
@@ -1,3 +1,4 @@
 <template>
-    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="w-min sm:w-64 md:w-72 lg:w-80 xl:w-96" />
+    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto block dark:hidden" />
+    <img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto hidden dark:block" />
 </template>
diff --git a/resources/js/Components/ClickableHeading.vue b/resources/js/Components/ClickableHeading.vue
new file mode 100644
index 00000000..91e25bb8
--- /dev/null
+++ b/resources/js/Components/ClickableHeading.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Link } from "@inertiajs/vue3";
+
+const props = defineProps({
+  href: { type: String, required: true }
+});
+</script>
+
+<template>
+  <Link :href="href" class="group flex items-center gap-1">
+    <slot />
+    <Icon icon="mdi:chevron-right" class="text-primary group-hover:translate-x-1 transition-transform duration-200" width="22" height="22" />
+  </Link>
+</template>
diff --git a/resources/js/Components/Comments/CommentList.vue b/resources/js/Components/Comments/CommentList.vue
index c72a1c51..810f6227 100644
--- a/resources/js/Components/Comments/CommentList.vue
+++ b/resources/js/Components/Comments/CommentList.vue
@@ -35,6 +35,7 @@ const toggleCollapse = () => {
             class="absolute left-0 top-0 bottom-0 flex items-center"
         >
 
+
         <div
             v-if="!isCollapsed"
             class="relative h-full cursor-pointer"
@@ -49,17 +50,17 @@ const toggleCollapse = () => {
 
             <!-- Visible line -->
             <div
-                class="w-[1.2px] h-full bg-gray-300 transition-colors duration-200"
-                :class="{'bg-primary': isNearCollapsing}"
+                class="w-[1.2px] h-full bg-gray-300 dark:bg-gray-800 transition-colors duration-200"
+                :class="{'bg-primary': isNearCollapsing, 'dark:bg-primary': isNearCollapsing}"
             ></div>
         </div>
 
             <button
                 v-else
-                class="p-1 rounded-full border border-gray-300 bg-white hover:border-gray-500 hover:bg-gray-100 transition-colors duration-200"
+                class="p-1 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200"
                 @click="toggleCollapse"
             >
-                <Icon icon="mdi:chevron-right" width="20" height="20" class="text-gray-500 hover:text-blue-500" />
+                <Icon icon="mdi:chevron-right" width="20" height="20" class="text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" />
             </button>
         </div>
 
diff --git a/resources/js/Components/Comments/Commentable.vue b/resources/js/Components/Comments/Commentable.vue
index 6e7db598..c71fce8f 100644
--- a/resources/js/Components/Comments/Commentable.vue
+++ b/resources/js/Components/Comments/Commentable.vue
@@ -202,14 +202,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="comments-section bg-white rounded-lg p-1">
+    <div class="comments-section bg-white dark:bg-gray-900 rounded-lg p-1">
         <SortByDropdown
             v-if="props.hasSortByDropdown && hasOpenedComments"
             @change="handleSortChange"
         ></SortByDropdown>
 
         <!-- Error State -->
-        <div v-if="error" class="text-red-500 mb-4">{{ error }}</div>
+    <div v-if="error" class="text-red-500 dark:text-red-400 mb-4">{{ error }}</div>
 
         <!-- Comments List -->
         <CommentList :id-to-children="idToChildren" />
@@ -231,7 +231,7 @@ onMounted(() => {
             <button
                 v-if="canLoadMoreComments && !isLoading"
                 @click="loadComments"
-                class="w-full py-2 text-center text-primary hover:bg-background/50 transition-colors"
+                class="w-full py-2 text-center text-primary dark:text-primaryLight hover:bg-background/50 dark:hover:bg-gray-800/50 transition-colors"
             >
                 View {{ commentsLeft }} Comments
             </button>
diff --git a/resources/js/Components/Comments/SingleComment.vue b/resources/js/Components/Comments/SingleComment.vue
index ecc90adb..1af41266 100644
--- a/resources/js/Components/Comments/SingleComment.vue
+++ b/resources/js/Components/Comments/SingleComment.vue
@@ -22,7 +22,7 @@ const users = inject("users");
 
 <template>
     <div
-        class="py-4 border-b border-gray-300 flex flex-row gap-4 w-full"
+        class="py-4 border-b border-gray-300 dark:border-gray-800 flex flex-row gap-4 w-full"
         :key="comment.id"
         :id="'comment_' + comment.id"
     >
@@ -43,7 +43,7 @@ const users = inject("users");
             </div>
 
             <!-- Comment Content -->
-            <p class="mt-2 text-gray-700 break-words">{{ comment.content }}</p>
+            <p class="mt-2 text-gray-700 dark:text-gray-100 break-words">{{ comment.content }}</p>
 
             <!-- Actions Form -->
             <CommentActionsForm
diff --git a/resources/js/Components/Comments/SortUpvotesByDropdown.vue b/resources/js/Components/Comments/SortUpvotesByDropdown.vue
index a9ce3056..7ffb7132 100644
--- a/resources/js/Components/Comments/SortUpvotesByDropdown.vue
+++ b/resources/js/Components/Comments/SortUpvotesByDropdown.vue
@@ -27,7 +27,7 @@ const emit = defineEmits(['change'])
 
 <template>
     <div class="flex items-center gap-2 py-4">
-        <label class="font-semibold text-gray-700">Sort by:</label>
+        <label class="font-semibold text-gray-700 dark:text-gray-100">Sort by:</label>
         <Select
             v-model="selectedSort"
             :options="sortOptions"
diff --git a/resources/js/Components/EmptyState.vue b/resources/js/Components/EmptyState.vue
index c978556b..81d7a524 100644
--- a/resources/js/Components/EmptyState.vue
+++ b/resources/js/Components/EmptyState.vue
@@ -20,13 +20,13 @@ defineProps({
 
 <template>
     <div
-        class="text-center text-gray-500 py-8 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50"
+        class="text-center text-gray-500 dark:text-gray-400 py-8 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900/60"
     >
         <Icon
             :icon="icon"
-            class="w-12 h-12 mx-auto mb-4 text-gray-400"
+            class="w-12 h-12 mx-auto mb-4 text-gray-400 dark:text-gray-500"
         />
-        <h3 class="text-lg font-semibold text-gray-700">{{ title }}</h3>
-        <p class="mt-1 text-sm">{{ message }}</p>
+        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h3>
+        <p class="mt-1 text-sm dark:text-gray-400">{{ message }}</p>
     </div>
 </template>
diff --git a/resources/js/Components/Form/FormSaverChip.vue b/resources/js/Components/Form/FormSaverChip.vue
index 9a2b16d3..d35bc0b9 100644
--- a/resources/js/Components/Form/FormSaverChip.vue
+++ b/resources/js/Components/Form/FormSaverChip.vue
@@ -16,7 +16,7 @@ const props = defineProps({
 <template>
     <div
         v-if="isSaved && hasContent"
-        class="absolute top-4 right-4 bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1"
+        class="absolute top-4 right-4 bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1"
     >
         <Icon icon="mdi:content-save-outline" />
         <span>Saved locally</span>
diff --git a/resources/js/Components/Form/PrimeVueFormError.vue b/resources/js/Components/Form/PrimeVueFormError.vue
index 7b0a0a67..b676488e 100644
--- a/resources/js/Components/Form/PrimeVueFormError.vue
+++ b/resources/js/Components/Form/PrimeVueFormError.vue
@@ -26,9 +26,7 @@ function formatError(error) {
         variant="simple"
     >
         <template v-for="error in errors" :key="error">
-            <p>
-                {{ formatError(error.toString()) }}
-            </p>
+            <p><span class="text-red-600 dark:text-red-400">{{ formatError(error.toString()) }}</span></p>
         </template>
     </Message>
 </template>
diff --git a/resources/js/Components/Form/TagSelector.vue b/resources/js/Components/Form/TagSelector.vue
index f90fed58..de458733 100644
--- a/resources/js/Components/Form/TagSelector.vue
+++ b/resources/js/Components/Form/TagSelector.vue
@@ -69,7 +69,8 @@ onBeforeUnmount(() => {
 
 // computed properties
 const availableTags = computed(() => {
-    const query = searchQuery.value.trim().toLowerCase();
+    // Use a filtered/sanitized query for searching tags
+    const filteredQuery = sanitizeTag(searchQuery.value);
 
     return allTags.value
         .filter((tagName) => {
@@ -77,10 +78,10 @@ const availableTags = computed(() => {
             if (selectedTags.value.includes(tagName)) return false;
 
             // if no query, show all
-            if (!query) return true;
+            if (!filteredQuery) return true;
 
-            // filter by query
-            return tagName.toLowerCase().includes(query);
+            // filter by filtered query (sanitized)
+            return tagName.toLowerCase().includes(filteredQuery);
         })
         .map((tagName) => ({
             name: tagName,
@@ -249,11 +250,11 @@ onMounted(async () => {
             <span
                 v-for="tag in selectedTags"
                 :key="tag"
-                class="inline-flex items-center mr-2 my-1 bg-secondary text-primaryDark px-3 py-1 rounded-full text-sm font-medium transition-colors"
+                class="inline-flex items-center mr-2 my-1 bg-secondary text-primaryDark  dark:bg-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-medium transition-colors"
             >
                 <button
                     @click="removeTag(tag)"
-                    class="mr-2 text-primaryDark"
+                    class="mr-2 text-primaryDark dark:text-white"
                     type="button"
                 >
                     <Icon :icon="'mdi:close'" />
@@ -272,7 +273,7 @@ onMounted(async () => {
                 @focus="showDropdown = true"
                 @blur="onBlur"
                 placeholder="Add tags..."
-                class="w-full px-3 py-2 text-md border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all"
+                class="w-full px-3 py-2 text-md border border-gray-400 dark:border-gray-600 rounded-lg focus:outline-none placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary dark:bg-black transition-all"
                 :class="{
                     'rounded-b-none border-b-0':
                         showDropdown &&
@@ -287,7 +288,7 @@ onMounted(async () => {
                         showDropdown &&
                         (availableTags.length > 0 || canCreateNew || isLoading)
                     "
-                    class="z-[9999] bg-white border border-gray-300 border-t-0 rounded-b-lg shadow-lg max-h-60 overflow-y-auto"
+                    class="z-[9999] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 border-t-0 rounded-b-lg shadow-lg max-h-60 overflow-y-auto"
                     :style="dropdownStyles"
                 >
                     <!-- loading state -->
@@ -313,18 +314,16 @@ onMounted(async () => {
                             @mouseenter="highlightedIndex = index"
                             class="flex items-center justify-between px-3 py-1.5 cursor-pointer transition-colors"
                             :class="{
-                                'bg-secondary text-primaryDark':
-                                    highlightedIndex === index,
-                                'hover:bg-gray-50': highlightedIndex !== index,
+                                'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight': highlightedIndex === index,
+                                'hover:bg-gray-50 dark:hover:bg-gray-900': highlightedIndex !== index,
                             }"
                         >
                             <span class="text-sm">{{ tag.name }}</span>
                             <span
                                 v-if="tag.count"
-                                class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full"
+                                class="text-xs bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300 px-2 py-1 rounded-full"
                                 :class="{
-                                    'bg-secondary text-primaryDark':
-                                        highlightedIndex === index,
+                                    'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight': highlightedIndex === index,
                                 }"
                             >
                                 {{ tag.count }}
@@ -338,17 +337,15 @@ onMounted(async () => {
                             @mouseenter="highlightedIndex = availableTags.length"
                             class="flex items-center px-4 py-3 cursor-pointer transition-colors"
                             :class="{
-                                'bg-secondary text-primaryDark':
-                                    highlightedIndex === availableTags.length,
-                                'hover:bg-gray-50':
-                                    highlightedIndex !== availableTags.length,
+                                'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight': highlightedIndex === availableTags.length,
+                                'hover:bg-gray-50 dark:hover:bg-gray-900': highlightedIndex !== availableTags.length,
                             }"
                         >
                             <Icon
                                 class="w-4 h-4 text-green-500"
                                 :icon="'mdi:add'"
                             ></Icon>
-                            <span class="text-sm text-gray-700">
+                            <span class="text-sm text-gray-700 dark:text-gray-100">
                                 create "<strong>{{
                                     sanitizeTag(searchQuery.trim())
                                 }}</strong
diff --git a/resources/js/Components/ListInput.vue b/resources/js/Components/ListInput.vue
index 67a30968..c440ffe7 100644
--- a/resources/js/Components/ListInput.vue
+++ b/resources/js/Components/ListInput.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
-import InputText from "primevue/inputtext";
 import { Icon } from "@iconify/vue";
+import TextInput from "./TextInput.vue";
 
 const emit = defineEmits(["change"]);
 
@@ -23,8 +23,8 @@ watch(
     () => props.initialValues,
     (newInitialValues) => {
         // Only update if the content is actually different to avoid unnecessary updates
-        const currentFiltered = items.value.filter(item => item !== "");
-        const newFiltered = newInitialValues.filter(item => item !== "");
+        const currentFiltered = items.value.filter((item) => item !== "");
+        const newFiltered = newInitialValues.filter((item) => item !== "");
 
         if (JSON.stringify(currentFiltered) !== JSON.stringify(newFiltered)) {
             items.value = [...newInitialValues];
@@ -65,7 +65,7 @@ const updateItem = (index, value) => {
             :key="index"
             class="flex items-center gap-2"
         >
-            <InputText
+            <TextInput
                 :value="item"
                 @input="(event) => updateItem(index, event.target.value)"
                 placeholder="Enter an item"
@@ -82,10 +82,10 @@ const updateItem = (index, value) => {
         </div>
 
         <button
+            v-if="items.length < maxSize"
             type="button"
             @click="addItem"
             class="flex items-center gap-1 text-blue-500 focus:outline-none"
-            :disabled="items.length >= maxSize"
         >
             <Icon icon="mdi:plus" />
             <span>Add</span>
diff --git a/resources/js/Components/Navbar/UserDropdown.vue b/resources/js/Components/Navbar/UserDropdown.vue
index f740c85e..94511050 100644
--- a/resources/js/Components/Navbar/UserDropdown.vue
+++ b/resources/js/Components/Navbar/UserDropdown.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from 'vue';
 import { router } from "@inertiajs/vue3";
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
diff --git a/resources/js/Components/Navigation/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
index a7dc7c7f..7dd947ea 100644
--- a/resources/js/Components/Navigation/Navbar.vue
+++ b/resources/js/Components/Navigation/Navbar.vue
@@ -7,16 +7,19 @@ import NavLink from "@/Components/NavLink.vue";
 import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
 import ApplicationHeaderLogo from "@/Components/ApplicationHeaderLogo.vue";
+import { useDarkMode } from '@/Composables/useDarkMode.js';
 
 const showingNavigationDropdown = ref(false);
 
 const logout = () => {
     router.post(route("logout"));
 };
+
+const { isDark, toggleDark } = useDarkMode();
 </script>
 
 <template>
-    <nav class="bg-white dark:bg-secondaryDark border-accent dark:border-primaryDark">
+    <nav class="bg-white dark:bg-gray-900 border-accent dark:border-accent-dark">
         <!-- Primary Navigation Menu -->
         <div class="w-full max-w-screen-2xl mx-auto px-4 md:px-6 lg:px-8">
             <div class="flex justify-between h-16">
@@ -33,7 +36,7 @@ const logout = () => {
                         <NavLink
                             :href="route('about')"
                             :active="route().current('about')"
-                            class="text-primaryDark hover:text-primary"
+                            class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
                         >
                             About Us
                         </NavLink>
@@ -41,21 +44,33 @@ const logout = () => {
                         <NavLink
                             :href="route('resources.index')"
                             :active="route().current('resources.index')"
-                            class="text-primaryDark hover:text-primary"
+                            class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
                         >
                             Resources
                         </NavLink>
                     </div>
                 </div>
 
+
+
                 <!-- Authenticated -->
-                <template v-if="$page.props.auth.user">
-                    <div class="hidden md:flex md:items-center md:ms-6">
+                <div class="hidden md:flex md:items-center md:ms-6">
+                    <!-- Dark mode icon button -->
+                    <button
+                        @click="toggleDark"
+                        type="button"
+                        class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
+                    >
+                        <Icon v-if="!isDark" icon="mdi:weather-night" class="size-6" />
+                        <Icon v-else icon="mdi:white-balance-sunny" class="size-6" />
+                    </button>
+
+                    <template v-if="$page.props.auth.user">
                         <!-- Create Resource Button -->
                         <Link :href="route('resources.create')">
-                            <SecondaryButton>
+                            <SecondaryButton class="dark:bg-primary dark:text-white dark:hover:bg-primary">
                                 <Icon icon="mdi:plus" class="mr-2" />
-                                Create
+                                Post a Resource
                             </SecondaryButton>
                         </Link>
 
@@ -63,24 +78,25 @@ const logout = () => {
                         <div class="flex items-center justify-center">
                             <UserDropdown align="right" width="48" />
                         </div>
-                    </div>
-                </template>
-                <!-- Guest -->
-                <template v-else>
-                    <div class="hidden md:flex md:items-center md:ms-6">
-                        <Link :href="route('login')">
-                            <SecondaryButton>
-                                <Icon icon="mdi:login" class="mr-2" />
-                                Sign In
-                            </SecondaryButton>
-                        </Link>
-                    </div>
-                </template>
+                    </template>
+                    <!-- Guest -->
+                    <template v-else>
+                        <div class="hidden md:flex md:items-center md:ms-6">
+                            <Link :href="route('login')">
+                                <SecondaryButton class="dark:bg-primary dark:text-white dark:hover:bg-primary">
+                                    <Icon icon="mdi:login" class="mr-2" />
+                                    Sign In
+                                </SecondaryButton>
+                            </Link>
+                        </div>
+                    </template>
+                </div>
+
 
                 <!-- Hamburger -->
                 <div class="-me-2 flex items-center md:hidden">
                     <button
-                        class="inline-flex items-center justify-center p-2 rounded-md text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryDark hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none focus:bg-accent/30 dark:focus:bg-primaryDark/30 focus:text-primary dark:focus:text-primaryDark transition duration-150 ease-in-out"
+                        class="inline-flex items-center justify-center p-2 rounded-md text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none focus:bg-accent/30 dark:focus:bg-primaryDark/30 focus:text-primary dark:focus:text-primaryLight transition duration-150 ease-in-out"
                         @click="showingNavigationDropdown = !showingNavigationDropdown"
                     >
                         <svg
@@ -121,13 +137,23 @@ const logout = () => {
                 block: showingNavigationDropdown,
                 hidden: !showingNavigationDropdown,
             }"
-            class="md:hidden"
+            class="md:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
         >
             <div class="pt-2 pb-3 space-y-2">
+                <!-- Dark mode icon button -->
+                <button
+                    @click="toggleDark"
+                    type="button"
+                    class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
+                >
+                    <Icon v-if="!isDark" icon="mdi:weather-night" class="size-6" />
+                    <Icon v-else icon="mdi:white-balance-sunny" class="size-6" />
+                </button>
+
                 <ResponsiveNavLink
                     :href="route('about')"
                     :active="route().current('about')"
-                    class="text-primaryDark hover:text-primary"
+                    class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
                 >
                     About Us
                 </ResponsiveNavLink>
@@ -135,7 +161,7 @@ const logout = () => {
                 <ResponsiveNavLink
                     :href="route('resources.index')"
                     :active="route().current('resources.index')"
-                    class="text-primaryDark hover:text-primary"
+                    class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
                 >
                     Resources
                 </ResponsiveNavLink>
@@ -144,19 +170,19 @@ const logout = () => {
                 <template v-if="$page.props.auth.user">
                     <ResponsiveNavLink
                         :href="route('resources.create')"
-                        class="inline-flex items-center border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150"
+                        class="inline-flex items-center border border-primary dark:border-primaryLight rounded-md font-semibold text-xs text-primary dark:text-primaryLight uppercase tracking-widest hover:bg-primary hover:text-white dark:hover:bg-primaryLight dark:hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-accent dark:focus:ring-primaryLight focus:ring-offset-2 transition ease-in-out duration-150"
                     >
                         <Icon icon="mdi:plus" class="mr-2" />
-                        Create
+                        Post a Resource
                     </ResponsiveNavLink>
                 </template>
                 <!-- Guest -->
                 <template v-else>
                     <ResponsiveNavLink
                         :href="route('login')"
-                        class="ml-2 inline-flex items-center border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150"
+                        class="ml-2 inline-flex items-center border border-primary dark:border-primaryLight rounded-md font-semibold text-xs text-primary dark:text-primaryLight uppercase tracking-widest hover:bg-primary hover:text-white dark:hover:bg-primaryLight dark:hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-accent dark:focus:ring-primaryLight focus:ring-offset-2 transition ease-in-out duration-150"
                     >
-                        <span class="text-primary">
+                        <span class="text-primary dark:text-primaryLight">
                             <Icon icon="mdi:login" class="mr-2" />
                             Sign In
                         </span>
@@ -166,7 +192,7 @@ const logout = () => {
 
             <!-- Responsive Settings Options -->
             <template v-if="$page.props.auth.user">
-                <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+                <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-700">
                     <div class="flex items-center px-4">
                         <div
                             v-if="$page.props.jetstream.managesProfilePhotos"
@@ -184,7 +210,7 @@ const logout = () => {
                             <div class="font-medium text-base text-gray-800 dark:text-gray-200">
                                 {{ $page.props.auth.user.name }}
                             </div>
-                            <div class="font-medium text-sm text-gray-500">
+                            <div class="font-medium text-sm text-gray-500 dark:text-gray-400">
                                 {{ $page.props.auth.user.email }}
                             </div>
                         </div>
diff --git a/resources/js/Components/Profile/UserProfile.vue b/resources/js/Components/Profile/UserProfile.vue
index a4d3d3a6..6494c71d 100644
--- a/resources/js/Components/Profile/UserProfile.vue
+++ b/resources/js/Components/Profile/UserProfile.vue
@@ -30,12 +30,12 @@ const formatDate = (dateString) => {
             :alt="'User Avator'"
         />
         <div class="min-w-0">
-            <p class="text-sm text-gray-800 truncate">
+            <p class="text-sm text-gray-800 dark:text-gray-100 truncate">
                 {{ user?.name ?? "Deleted User" }}
             </p>
             <time
                 :datetime="date"
-                class="text-sm text-gray-500"
+                class="text-sm text-gray-500 dark:text-gray-300"
                 :title="date"
             >
                 {{ formatDate(date) }}
diff --git a/resources/js/Components/Resources/FilterBar.vue b/resources/js/Components/Resources/FilterBar.vue
index caa9cdc2..023bcfdd 100644
--- a/resources/js/Components/Resources/FilterBar.vue
+++ b/resources/js/Components/Resources/FilterBar.vue
@@ -212,14 +212,14 @@ function resetFilters() {
 <template>
     <form
         @submit.prevent="search"
-        class="bg-white rounded-xl shadow-sm border border-primary/10 mb-4 max-w-8xl mx-auto"
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-primary/10 dark:border-primary/20 mb-4 max-w-8xl mx-auto"
     >
         <!-- Primary Search Section -->
-        <div class="px-6 pt-6">
+    <div class="px-6 pt-6">
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <!-- Name Search -->
                 <div class="w-full">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:magnify" class="w-4 h-4" />
                         Resource Name
                     </label>
@@ -232,7 +232,7 @@ function resetFilters() {
 
                 <!-- Description Search -->
                 <div class="w-full">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:text" class="w-4 h-4" />
                         Description
                     </label>
@@ -246,17 +246,18 @@ function resetFilters() {
         </div>
 
         <!-- Quick Filters Section -->
-        <div class="px-6 py-6 border-b border-primary/10 bg-secondary/5">
+    <div class="px-6 py-6 border-b border-primary/10 dark:border-primary/20 bg-secondary/5 dark:bg-gray-800/60">
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-8 gap-4">
                 <!-- Platform Filter -->
                 <div class="w-full lg:col-span-2">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:devices" class="w-4 h-4" />
                         Platform
                     </label>
                     <MultiSelect
                         v-model="selectedPlatforms"
                         :options="platformsObject"
+                        filter
                         optionLabel="label"
                         optionValue="value"
                         placeholder="All Platforms"
@@ -266,7 +267,7 @@ function resetFilters() {
 
                 <!-- Difficulty Level -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:stairs" class="w-4 h-4" />
                         Difficulty
                     </label>
@@ -282,7 +283,7 @@ function resetFilters() {
 
                 <!-- Pricing -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:currency-usd" class="w-4 h-4" />
                         Pricing
                     </label>
@@ -298,7 +299,7 @@ function resetFilters() {
 
                 <!-- Overall Rating -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:star" class="w-4 h-4" />
                         Min Rating
                     </label>
@@ -314,7 +315,7 @@ function resetFilters() {
 
                 <!-- Topics Filter -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:tag-multiple" class="w-4 h-4" />
                         Topics
                     </label>
@@ -327,7 +328,7 @@ function resetFilters() {
 
                 <!-- Programming Languages Filter -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:language-javascript" class="w-4 h-4" />
                         Languages
                     </label>
@@ -340,7 +341,7 @@ function resetFilters() {
 
                 <!-- General Tags Filter -->
                 <div class="w-full lg:col-span-1">
-                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                    <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                         <Icon icon="mdi:tag" class="w-4 h-4" />
                         Tags
                     </label>
@@ -354,17 +355,17 @@ function resetFilters() {
         </div>
 
         <!-- Advanced Filters Section -->
-        <div v-show="advancedOpen" class="p-6 bg-secondary/5 space-y-6">
+    <div v-show="advancedOpen" class="p-6 bg-secondary/5 dark:bg-gray-800/60 space-y-6">
             <!-- Ratings Section -->
             <div class="space-y-3">
-                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600">
+                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-300">
                     <Icon icon="mdi:star-settings" class="w-4 h-4" />
                     Rating Filters
                 </h3>
                 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                     <!-- Community Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:account-group" class="w-4 h-4" />
                             Community
                         </label>
@@ -378,7 +379,7 @@ function resetFilters() {
 
                     <!-- Teaching Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:school" class="w-4 h-4" />
                             Teaching
                         </label>
@@ -392,7 +393,7 @@ function resetFilters() {
 
                     <!-- Engagement Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:thumb-up" class="w-4 h-4" />
                             Engagement
                         </label>
@@ -406,7 +407,7 @@ function resetFilters() {
 
                     <!-- Practicality Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:tools" class="w-4 h-4" />
                             Practicality
                         </label>
@@ -420,7 +421,7 @@ function resetFilters() {
 
                     <!-- User Friendly Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:account-heart" class="w-4 h-4" />
                             User Friendly
                         </label>
@@ -434,7 +435,7 @@ function resetFilters() {
 
                     <!-- Updates Rating -->
                     <div class="flex flex-col items-center">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 mb-2">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
                             <Icon icon="mdi:update" class="w-4 h-4" />
                             Updates
                         </label>
@@ -450,13 +451,13 @@ function resetFilters() {
 
             <!-- Date Filters -->
             <div class="space-y-3">
-                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600">
+                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-300">
                     <Icon icon="mdi:calendar" class="w-4 h-4" />
                     Date Filters
                 </h3>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     <div class="space-y-4">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
                             <Icon icon="mdi:calendar-plus" class="w-4 h-4" />
                             Created Date Range
                         </label>
@@ -480,7 +481,7 @@ function resetFilters() {
                         </div>
                     </div>
                     <div class="space-y-4">
-                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600">
+                        <label class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
                             <Icon icon="mdi:calendar-refresh" class="w-4 h-4" />
                             Updated Date Range
                         </label>
@@ -508,7 +509,7 @@ function resetFilters() {
 
             <!-- Sorting Section -->
             <div class="space-y-4">
-                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600">
+                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-300">
                     <Icon icon="mdi:sort" class="w-4 h-4" />
                     Sorting Options
                 </h3>
@@ -522,8 +523,8 @@ function resetFilters() {
                             :class="[
                                 'px-4 py-2 rounded-full text-sm font-medium focus:outline-none transition-colors duration-200',
                                 selectedSorting === opt.value
-                                    ? 'bg-primary text-white shadow-sm'
-                                    : 'bg-secondary text-primary hover:bg-secondaryDark',
+                                    ? 'bg-primary text-white shadow-sm dark:bg-primaryLight dark:text-gray-900'
+                                    : 'bg-secondary text-primary hover:bg-secondaryDark dark:bg-gray-700 dark:text-primaryLight dark:hover:bg-gray-600',
                             ]"
                         >
                             {{ opt.label }}
@@ -536,8 +537,8 @@ function resetFilters() {
                             :class="[
                                 'px-4 py-2 rounded-full text-sm font-medium focus:outline-none transition-colors duration-200',
                                 selectedReverse
-                                    ? 'bg-primary text-white shadow-sm'
-                                    : 'bg-secondary text-primary hover:bg-secondaryDark',
+                                    ? 'bg-primary text-white shadow-sm dark:bg-primaryLight dark:text-gray-900'
+                                    : 'bg-secondary text-primary hover:bg-secondaryDark dark:bg-gray-700 dark:text-primaryLight dark:hover:bg-gray-600',
                             ]"
                         >
                             Reverse Order
@@ -548,10 +549,10 @@ function resetFilters() {
         </div>
 
         <!-- Action Buttons -->
-        <div class="px-4 py-3 gap-2 bg-white rounded-b-xl flex items-center justify-between border-t border-primary/10">
+    <div class="px-4 py-3 gap-2 bg-white dark:bg-gray-900 rounded-b-xl flex items-center justify-between border-t border-primary/10 dark:border-primary/20">
             <button
                 type="button"
-                class="flex items-center text-sm text-primary hover:text-primaryDark focus:outline-none"
+                class="flex items-center text-sm text-primary hover:text-primaryDark dark:text-primaryLight dark:hover:text-primary focus:outline-none"
                 @click="advancedOpen = !advancedOpen"
             >
                 <Icon
diff --git a/resources/js/Components/Resources/ResourceDescription.vue b/resources/js/Components/Resources/ResourceDescription.vue
index 29d644fd..776ac6cf 100644
--- a/resources/js/Components/Resources/ResourceDescription.vue
+++ b/resources/js/Components/Resources/ResourceDescription.vue
@@ -23,14 +23,14 @@ const props = defineProps({
             class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4 gap-4"
         >
             <div class="flex items-center gap-3">
-                <h1 class="text-3xl font-bold">
+                <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
                     {{ props.resource.name }}
                 </h1>
                 <a
                     :href="props.resource.page_url"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-gray-400 hover:text-primary transition-colors duration-200"
+                    class="text-gray-400 hover:text-primary dark:hover:text-primaryLight transition-colors duration-200"
                 >
                     <Icon icon="mdi:external-link" width="24" height="24" />
                 </a>
@@ -60,7 +60,7 @@ const props = defineProps({
         </div>
 
         <p
-            class="text-gray-700 mb-6 text-base leading-relaxed whitespace-pre-line"
+            class="text-gray-700 dark:text-gray-200 mb-6 text-base leading-relaxed whitespace-pre-line"
         >
             {{ props.resource.description }}
         </p>
@@ -71,13 +71,13 @@ const props = defineProps({
             <div class="flex flex-wrap items-center gap-4 text-sm">
                 <!-- Difficulties -->
                 <div
-                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
+                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-900/70 px-3 py-1 rounded-md"
                 >
                     <span class="font-semibold text-gray-900 dark:text-gray-100"
                         >Difficulties:</span
                     >
                     <div
-                        class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-300"
+                        class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-200"
                     >
                         <span
                             v-for="level in props.resource.difficulties"
@@ -96,13 +96,13 @@ const props = defineProps({
 
                 <!-- Pricing -->
                 <div
-                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
+                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-900/70 px-3 py-1 rounded-md"
                 >
                     <span class="font-semibold text-gray-900 dark:text-gray-100"
                         >Pricing:</span
                     >
                     <span
-                        class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-300"
+                        class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-200"
                     >
                         <Icon
                             :icon="pricingIcons[props.resource.pricing]"
@@ -115,13 +115,13 @@ const props = defineProps({
 
                 <!-- Platforms -->
                 <div
-                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
+                    class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-900/70 px-3 py-1 rounded-md"
                 >
                     <span class="font-semibold text-gray-900 dark:text-gray-100"
                         >Platforms:</span
                     >
                     <div
-                        class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-300"
+                        class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-200"
                     >
                         <span
                             v-for="type in props.resource.platforms"
@@ -156,7 +156,7 @@ const props = defineProps({
                         <span
                             v-for="tag in props.resource.topic_tags"
                             :key="tag"
-                            class="inline-flex items-center gap-1 bg-blue-100/50 dark:bg-blue-800/30 px-2 py-0.5 rounded-full text-blue-700 dark:text-blue-200"
+                            class="inline-flex items-center gap-1 bg-blue-100/50 dark:bg-blue-900/60 px-2 py-0.5 rounded-full text-blue-700 dark:text-blue-100"
                         >
                             {{ tag }}
                         </span>
@@ -183,7 +183,7 @@ const props = defineProps({
                             v-for="tag in props.resource
                                 .programming_language_tags"
                             :key="tag"
-                            class="inline-flex items-center gap-1 bg-purple-100/50 dark:bg-purple-800/30 px-2 py-0.5 rounded-full text-purple-700 dark:text-purple-200"
+                            class="inline-flex items-center gap-1 bg-purple-100/50 dark:bg-purple-900/60 px-2 py-0.5 rounded-full text-purple-700 dark:text-purple-100"
                         >
                             {{ tag }}
                         </span>
@@ -205,7 +205,7 @@ const props = defineProps({
                         <span
                             v-for="tag in props.resource.general_tags"
                             :key="tag"
-                            class="inline-flex items-center gap-1 bg-yellow-100/50 dark:bg-yellow-800/30 px-2 py-0.5 rounded-full text-yellow-700 dark:text-yellow-200"
+                            class="inline-flex items-center gap-1 bg-yellow-100/50 dark:bg-yellow-900/60 px-2 py-0.5 rounded-full text-yellow-700 dark:text-yellow-100"
                         >
                             {{ tag }}
                         </span>
diff --git a/resources/js/Components/Resources/ResourceDetailedRatings.vue b/resources/js/Components/Resources/ResourceDetailedRatings.vue
index e51df96f..8aba5c30 100644
--- a/resources/js/Components/Resources/ResourceDetailedRatings.vue
+++ b/resources/js/Components/Resources/ResourceDetailedRatings.vue
@@ -53,7 +53,7 @@ const ratings = [
                 class="flex flex-col items-center"
             >
                 <label
-                    class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
+                    class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-100 mb-2"
                 >
                     <Icon :icon="rating.icon" class="w-4 h-4" />
                     {{ rating.label }}
diff --git a/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue b/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
index 2203051c..02aed052 100644
--- a/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
+++ b/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Link } from "@inertiajs/vue3";
+import ClickableHeading from "@/Components/ClickableHeading.vue";
 import Upvotable from "@/Components/Upvote/Upvotable.vue";
 import EmptyState from "@/Components/EmptyState.vue";
 import PaginateLinks from "@/Components/Pagination/PaginateLinks.vue";
@@ -23,7 +24,7 @@ const props = defineProps({
             <div
                 v-for="edit in props.resourceEdits.data"
                 :key="edit.id"
-                class="bg-white/70 backdrop-blur-md p-6 rounded-lg shadow-md"
+                class="bg-white/70 dark:bg-gray-900/90 backdrop-blur-md p-6 rounded-lg shadow-md border border-transparent dark:border-gray-800"
             >
                 <div class="flex flex-row gap-4 items-center">
                     <Upvotable
@@ -33,19 +34,13 @@ const props = defineProps({
                         :user-vote="edit.user_vote"
                     ></Upvotable>
                     <div class="flex-grow align-middle items-center">
-                        <Link
-                            :href="
-                                route('resource_edits.show', {
-                                    slug: edit.slug,
-                                })
-                                "
-                        >
+                        <ClickableHeading :href="route('resource_edits.show', { slug: edit.slug })">
                             <h2
-                                class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100 hover:text-primary transition-colors duration-200 font-sans"
-                                >
+                                class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100 group-hover:text-primary transition-colors duration-200 font-sans"
+                            >
                                 {{ edit.edit_title }}
                             </h2>
-                        </Link>
+                        </ClickableHeading>
 
                         <UserProfile
                             :user="edit.user"
@@ -53,7 +48,7 @@ const props = defineProps({
                             class="mt-2"
                         />
 
-                        <p class="text-gray-700 mt-2">
+                        <p class="text-gray-700 dark:text-gray-300 mt-2">
                             {{ edit.edit_description }}
                         </p>
                     </div>
diff --git a/resources/js/Components/Resources/ResourceEdit/ResourceEditsFAQ.vue b/resources/js/Components/Resources/ResourceEdit/ResourceEditsFAQ.vue
index 107fcd68..c85ddcc4 100644
--- a/resources/js/Components/Resources/ResourceEdit/ResourceEditsFAQ.vue
+++ b/resources/js/Components/Resources/ResourceEdit/ResourceEditsFAQ.vue
@@ -112,8 +112,8 @@ import FrequentlyAskedQuestion from "@/Components/FrequentlyAskedQuestion.vue";
                                     <td
                                         class="border border-gray-300 dark:border-gray-600 px-4 py-2"
                                     >
-                                        Since there are no existing votes (positive or negative), the entire community can merge any edits.<th></th>
-                                        The reasoning is that someone could've made a typo and needed a quick fix.<th></th>
+                                        Since there are no existing votes (positive or negative), the entire community can merge any edits.
+                                        The reasoning is that someone could've made a typo and needed a quick fix.
                                         Everyone automatically upvotes their own resources. So, you must unvote your newly created resource to reach 0 votes.
                                     </td>
                                 </tr>
diff --git a/resources/js/Components/Resources/ResourceItem.vue b/resources/js/Components/Resources/ResourceItem.vue
index ddb87f50..33dbdaa9 100644
--- a/resources/js/Components/Resources/ResourceItem.vue
+++ b/resources/js/Components/Resources/ResourceItem.vue
@@ -3,6 +3,7 @@ import { Icon } from "@iconify/vue";
 import Upvotable from "@/Components/Upvote/Upvotable.vue";
 import StarRating from "@/Components/StarRating/StarRating.vue";
 import { Link } from "@inertiajs/vue3";
+import ClickableHeading from "@/Components/ClickableHeading.vue";
 import { difficultyLabels, pricingLabels, platformLabels } from "@/Helpers/labels";
 import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons";
 import ResourceThumbnail from "./ResourceThumbnail.vue";
@@ -39,14 +40,11 @@ const emit = defineEmits(["upvote", "downvote"]);
         <div class="flex-1 flex flex-col justify-between py-3 px-2">
             <div class="flex flex-col lg:flex-row justify-between items-start mb-2 w-full gap-2">
                 <div class="flex items-center gap-3">
-                    <Link
-                        :href="route('resources.show', { slug: resource.slug })"
-                        class="group"
-                    >
+                    <ClickableHeading :href="route('resources.show', { slug: resource.slug })">
                         <h2 class="text-lg underline font-semibold tracking-tight text-gray-900 dark:text-gray-100 group-hover:text-primary transition-colors duration-200 font-sans">
                             {{ resource.name }}
                         </h2>
-                    </Link>
+                    </ClickableHeading>
                     <a
                         :href="resource.page_url"
                         target="_blank"
diff --git a/resources/js/Components/Resources/Reviews/CreateResourceReview.vue b/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
index b289c34c..5437bcb1 100644
--- a/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
+++ b/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
@@ -64,11 +64,7 @@ const formFields = [
     "cons",
 ];
 
-const {
-    isSavedToLocalStorage,
-    hasFormContent,
-    clearLocalStorage,
-} = useLocalStorageSaver(form, props.resourceId, formFields, "review-draft");
+const { isSavedToLocalStorage, hasFormContent, clearLocalStorage } = useLocalStorageSaver(form, props.resourceId, formFields, "review-draft");
 
 const isSubmitting = ref(false);
 const error = ref(null);
@@ -82,8 +78,12 @@ const submitReview = async () => {
         errors.value = {};
 
         const url = props.isEditingMode
-            ? route("reviews.update", { computerScienceResource: props.resourceId })
-            : route("reviews.store", { computerScienceResource: props.resourceId });
+            ? route("reviews.update", {
+                  computerScienceResource: props.resourceId,
+              })
+            : route("reviews.store", {
+                  computerScienceResource: props.resourceId,
+              });
 
         const method = props.isEditingMode ? "put" : "post";
 
@@ -97,7 +97,7 @@ const submitReview = async () => {
         } else {
             routeParams.sort_by = "latest";
         }
-        router.visit(route('resources.show', routeParams));
+        router.visit(route("resources.show", routeParams));
     } catch (e) {
         isSubmitting.value = false;
         if (e.inner) {
@@ -107,7 +107,8 @@ const submitReview = async () => {
             });
             errors.value = yupErrors;
         } else {
-            error.value = "Something went wrong with submitting your review, please refresh or try again.";
+            error.value =
+                "Something went wrong with submitting your review, please refresh or try again.";
             console.error(e);
         }
     }
@@ -116,14 +117,16 @@ const submitReview = async () => {
 
 <template>
     <div
-        class="mx-auto bg-white shadow-lg rounded-2xl p-6 relative"
+        class="mx-auto bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-6 relative border border-transparent dark:border-gray-800"
     >
         <FormSaverChip
             :is-saved="isSavedToLocalStorage"
             :has-content="hasFormContent"
         />
 
-        <h2 class="text-2xl font-semibold mb-6">
+        <h2
+            class="text-2xl font-semibold mb-6 text-gray-900 dark:text-gray-100"
+        >
             {{ isEditingMode ? "Update Review" : "Write a Review" }}
         </h2>
 
@@ -133,44 +136,37 @@ const submitReview = async () => {
             class="flex flex-col gap-6"
         >
             <!-- Title -->
-            <FormField v-slot="$field" name="title">
+            <FormField name="title">
                 <label class="font-semibold">Title</label>
                 <span class="text-red-500"> * </span>
 
                 <InputText
                     v-model="form.title"
                     placeholder="Review title"
-                    class="w-full rounded-md border-gray-300 mt-1"
-                />
-                <PrimeVueFormError
-                    v-if="$field.invalid"
-                    :errors="$field.errors"
+                    class="w-full rounded-md border-gray-300 dark:border-gray-800 mt-1 dark:bg-gray-900 dark:text-gray-100"
                 />
+                <PrimeVueFormError v-if="errors.title" :errors="errors.title" />
             </FormField>
 
             <!-- Description -->
-            <FormField v-slot="$field" name="description">
+            <FormField name="description">
                 <label class="font-semibold">Description</label>
                 <span class="text-red-500"> * </span>
                 <InputTextarea
                     v-model="form.description"
                     placeholder="Write your thoughts..."
                     rows="4"
-                    class="w-full rounded-md border-gray-300 mt-1"
+                    class="w-full rounded-md border-gray-300 dark:border-gray-800 mt-1 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
-                    v-if="$field.invalid"
-                    :errors="$field.errors"
+                    v-if="errors.description"
+                    :errors="errors.description"
                 />
             </FormField>
 
             <!-- Ratings (flex layout like your review page) -->
             <div class="flex flex-wrap gap-12 mt-4 mx-auto">
-                <FormField
-                    v-slot="$field"
-                    name="community"
-                    class="flex flex-col items-center"
-                >
+                <FormField name="community" class="flex flex-col items-center">
                     <span class="font-semibold mb-1">
                         Community
                         <span class="text-red-500"> * </span>
@@ -178,120 +174,116 @@ const submitReview = async () => {
 
                     <Rating v-model="form.community" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.community"
+                        :errors="errors.community"
                     />
                 </FormField>
 
                 <FormField
-                    v-slot="$field"
                     name="teaching_clarity"
                     class="flex flex-col items-center"
                 >
-                    <span class="font-semibold mb-1" >
+                    <span class="font-semibold mb-1">
                         Teaching Clarity
                         <span class="text-red-500"> * </span></span
                     >
 
                     <Rating v-model="form.teaching_clarity" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.teaching_clarity"
+                        :errors="errors.teaching_clarity"
                     />
                 </FormField>
 
-                <FormField
-                    v-slot="$field"
-                    name="engagement"
-                    class="flex flex-col items-center"
-                >
-                    <span class="font-semibold mb-1" >
+                <FormField name="engagement" class="flex flex-col items-center">
+                    <span class="font-semibold mb-1">
                         Engagement <span class="text-red-500"> * </span></span
                     >
-
                     <Rating v-model="form.engagement" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.engagement"
+                        :errors="errors.engagement"
                     />
                 </FormField>
 
                 <FormField
-                    v-slot="$field"
                     name="practicality"
                     class="flex flex-col items-center"
                 >
-                    <span class="font-semibold mb-1" >
+                    <span class="font-semibold mb-1">
                         Practicality
                         <span class="text-red-500"> * </span></span
                     >
 
                     <Rating v-model="form.practicality" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.practicality"
+                        :errors="errors.practicality"
                     />
                 </FormField>
 
                 <FormField
-                    v-slot="$field"
                     name="user_friendliness"
                     class="flex flex-col items-center"
                 >
-                    <span class="font-semibold mb-1" >
+                    <span class="font-semibold mb-1">
                         User Friendliness
                         <span class="text-red-500"> * </span></span
                     >
 
                     <Rating v-model="form.user_friendliness" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.user_friendliness"
+                        :errors="errors.user_friendliness"
                     />
                 </FormField>
 
-                <FormField
-                    v-slot="$field"
-                    name="updates"
-                    class="flex flex-col items-center"
-                >
-                    <span class="font-semibold mb-1" >
+                <FormField name="updates" class="flex flex-col items-center">
+                    <span class="font-semibold mb-1">
                         Updates <span class="text-red-500"> * </span></span
                     >
 
                     <Rating v-model="form.updates" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.updates"
+                        :errors="errors.updates"
                     />
                 </FormField>
             </div>
 
             <!-- Pros and Cons side by side -->
             <div class="flex flex-col md:flex-row gap-6 mt-6">
-                <FormField v-slot="$field" name="pros" class="flex-1">
-                    <label class="font-semibold">Pros</label>
+                <FormField name="pros" class="flex-1">
+                    <label
+                        class="font-semibold text-gray-900 dark:text-gray-100"
+                        >Pros</label
+                    >
                     <ListInput
                         :maxSize="10"
                         :initialValues="form.pros"
                         @change="(val) => (form.pros = val)"
+                        class="dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
                     />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.pros"
+                        :errors="errors.pros"
                     />
                 </FormField>
 
-                <FormField v-slot="$field" name="cons" class="flex-1">
-                    <label class="font-semibold">Cons</label>
+                <FormField name="cons" class="flex-1">
+                    <label
+                        class="font-semibold text-gray-900 dark:text-gray-100"
+                        >Cons</label
+                    >
                     <ListInput
                         :maxSize="10"
                         :initialValues="form.cons"
                         @change="(val) => (form.cons = val)"
+                        class="dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
                     />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.cons"
+                        :errors="errors.cons"
                     />
                 </FormField>
             </div>
@@ -299,7 +291,7 @@ const submitReview = async () => {
             <!-- Check if not auth since unauthed user will always fail (need to be logged in) -->
             <div
                 v-if="error && $page.props.auth.user"
-                class="text-red-500 bg-red-100 p-3 rounded-md"
+                class="text-red-500 bg-red-100 dark:bg-red-900 p-3 rounded-md"
             >
                 {{ error }}
             </div>
@@ -309,7 +301,7 @@ const submitReview = async () => {
                 <Button
                     type="submit"
                     :label="isEditingMode ? 'Update Review' : 'Submit Review'"
-                    class="bg-primaryDark text-white rounded-lg px-6 py-2 mt-4"
+                    class="bg-primaryDark text-white rounded-lg px-6 py-2 mt-4 hover:bg-primary focus:bg-primaryDark/90 dark:bg-primaryDark dark:text-white"
                     :disabled="isSubmitting"
                 />
             </div>
diff --git a/resources/js/Components/Resources/Reviews/ResourceReview.vue b/resources/js/Components/Resources/Reviews/ResourceReview.vue
index 1056c5bd..0ff82ba3 100644
--- a/resources/js/Components/Resources/Reviews/ResourceReview.vue
+++ b/resources/js/Components/Resources/Reviews/ResourceReview.vue
@@ -28,7 +28,7 @@ const ratingFeatures = Object.entries(ratingLabels).map(([key, label]) => ({
                 :user-vote="props.review.user_vote"
             />
 
-            <h3 class="text-xl font-semibold my-auto">
+            <h3 class="text-xl font-semibold my-auto text-gray-900 dark:text-gray-100">
                 {{ review.title }}
             </h3>
         </div>
@@ -36,7 +36,7 @@ const ratingFeatures = Object.entries(ratingLabels).map(([key, label]) => ({
         <div
             class="flex items-center gap-2 mt-2 sm:mt-0 w-full sm:w-auto justify-end"
         >
-            <span class="font-medium">Rating:</span>
+            <span class="font-medium text-gray-800 dark:text-gray-100">Rating:</span>
             <div class="flex flex-row">
                 <StarRating :model-value="review.average_score" :size="24" />
             </div>
@@ -45,23 +45,23 @@ const ratingFeatures = Object.entries(ratingLabels).map(([key, label]) => ({
 
     <UserProfile class="my-2" :user="review.user" :date="review.created_at" />
 
-    <p class="text-gray-700 mb-4 whitespace-pre-line mt-1">
+    <p class="text-gray-700 dark:text-gray-100 mb-4 whitespace-pre-line mt-1">
         {{ review.description }}
     </p>
 
     <div class="flex flex-col sm:flex-row justify-between">
         <div class="sm:w-1/2" v-if="review.pros.length > 0">
-            <h4 class="font-semibold mb-2">Pros</h4>
+            <h4 class="font-semibold mb-2 text-gray-800 dark:text-gray-100">Pros</h4>
             <ul class="list-disc pl-5">
-                <li v-for="pro in review.pros" :key="pro" class="text-gray-600">
+                <li v-for="pro in review.pros" :key="pro" class="text-gray-600 dark:text-gray-200">
                     {{ pro }}
                 </li>
             </ul>
         </div>
         <div class="sm:w-1/2" v-if="review.cons.length > 0">
-            <h4 class="font-semibold mb-2">Cons</h4>
+            <h4 class="font-semibold mb-2 text-gray-800 dark:text-gray-100">Cons</h4>
             <ul class="list-disc pl-5">
-                <li v-for="con in review.cons" :key="con" class="text-gray-600">
+                <li v-for="con in review.cons" :key="con" class="text-gray-600 dark:text-gray-200">
                     {{ con }}
                 </li>
             </ul>
@@ -75,7 +75,7 @@ const ratingFeatures = Object.entries(ratingLabels).map(([key, label]) => ({
             :key="feature.key"
             class="flex flex-col items-center"
         >
-            <span class="font-semibold mb-1">{{ feature.label }}</span>
+            <span class="font-semibold mb-1 text-gray-800 dark:text-gray-100">{{ feature.label }}</span>
             <StarRating :model-value="review[feature.key]" :size="20" />
         </div>
     </div>
diff --git a/resources/js/Components/Resources/Reviews/ResourceReviews.vue b/resources/js/Components/Resources/Reviews/ResourceReviews.vue
index 22551a6a..7c4170da 100644
--- a/resources/js/Components/Resources/Reviews/ResourceReviews.vue
+++ b/resources/js/Components/Resources/Reviews/ResourceReviews.vue
@@ -19,7 +19,7 @@ const props = defineProps({
             <div
                 v-for="review in reviews.data"
                 :key="review.id"
-                class="bg-white/70 backdrop-blur-md p-6 rounded-lg shadow-md"
+                class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md"
             >
                 <ResourceReview :review="review" />
             </div>
diff --git a/resources/js/Components/Resources/SubmissionGuidelines.vue b/resources/js/Components/Resources/SubmissionGuidelines.vue
index e8589af5..42d5aa5a 100644
--- a/resources/js/Components/Resources/SubmissionGuidelines.vue
+++ b/resources/js/Components/Resources/SubmissionGuidelines.vue
@@ -1,11 +1,13 @@
 <template>
-    <h3 class="text-lg font-semibold mb-4 text-gray-800">
+    <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
         Submission Guidelines
     </h3>
-    <div class="space-y-4 text-sm text-gray-700">
-        <div class="space-y-4 text-sm text-gray-700">
+    <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
+        <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">Resource Scope</h4>
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
+                    Resource Scope
+                </h4>
                 <p class="mb-2">
                     This site features comprehensive learning resources rather
                     than isolated materials. Resources should provide ongoing
@@ -20,7 +22,7 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
                     Types of Content Accepted
                 </h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">
@@ -42,6 +44,10 @@
                     <li>
                         Organizations that can provide software career advising
                     </li>
+                    <li>
+                        Discontinued resources, given they have a significant
+                        archive or ongoing educational value
+                    </li>
                 </ul>
                 <p class="mt-2 text-xs">
                     Anything to help people learn more about software: from
@@ -51,7 +57,9 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">Exceptions</h4>
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
+                    Exceptions
+                </h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">
                     <li>
                         An individual book may be included if it is
@@ -72,7 +80,7 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
                     What's Not Included
                 </h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">
@@ -92,9 +100,18 @@
                         Lifestyle or personal finance content (beyond reasonable
                         project management)
                     </li>
+                    <li>
+                        <span
+                            class="font-semibold text-red-700 dark:text-red-400"
+                            >Pirated or illegal resources are strictly
+                            prohibited.</span
+                        >
+                        Only submit resources that are legal to share and
+                        access.
+                    </li>
                 </ul>
                 <p class="mt-2 text-xs italic">
-                    In the end, we trust you to be reasonable.
+                    If the resource is useful, post it. In the end, we trust you to be reasonable.
                 </p>
             </div>
         </div>
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
index 419769fc..7f66f5c1 100644
--- a/resources/js/Components/SecondaryButton.vue
+++ b/resources/js/Components/SecondaryButton.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <button :type="type" class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150 mr-4">
+    <button :type="type" class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-primaryDark focus:ring-offset-2 transition ease-in-out duration-150 mr-4">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Components/StarRating/StarRating.vue b/resources/js/Components/StarRating/StarRating.vue
index 01fcc6f3..b19a0e37 100644
--- a/resources/js/Components/StarRating/StarRating.vue
+++ b/resources/js/Components/StarRating/StarRating.vue
@@ -21,13 +21,13 @@ const getStarClass = (type) =>
     ({
         full: "text-orange-500",
         half: "text-orange-500",
-        empty: "text-gray-400",
+        empty: "text-gray-400 dark:text-gray-500",
     }[type]);
 </script>
 
 <template>
     <div class="inline-flex items-center flex-wrap gap-1">
-        <span class="text-sm font-medium text-gray-600">
+        <span class="text-sm font-medium text-gray-600 dark:text-gray-200">
             {{ formattedRating }}
         </span>
         <div class="inline-flex items-center">
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index 1679d5cc..126b88a8 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -21,7 +21,13 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
     <input
         ref="input"
-        class="border-primary/30 dark:border-primaryDark dark:bg-secondary dark:text-primary focus:border-primary dark:focus:border-primaryDark focus:ring-primary dark:focus:ring-primaryDark rounded-md shadow-sm bg-white text-gray-900"
+        class="w-full border border-primary/30 rounded-md shadow-sm px-4 py-2
+               placeholder:text-gray-400
+               text-gray-800 dark:text-gray-200
+               focus:border-primary focus:ring focus:ring-primary/20
+               hover:border-primary/50
+               transition-colors duration-200
+               bg-white dark:bg-gray-900"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
     >
diff --git a/resources/js/Composables/useDarkMode.js b/resources/js/Composables/useDarkMode.js
new file mode 100644
index 00000000..70c0b923
--- /dev/null
+++ b/resources/js/Composables/useDarkMode.js
@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+const isDark = ref(false);
+
+
+function setTheme(theme) {
+    isDark.value = theme === 'dark';
+    document.documentElement.classList.toggle('dark', isDark.value);
+    document.documentElement.classList.toggle('my-app-dark', isDark.value);
+    localStorage.setItem('theme', theme);
+}
+
+function toggleDark() {
+    setTheme(isDark.value ? 'light' : 'dark');
+}
+
+// Immediately set theme on import
+const userTheme = localStorage.getItem('theme');
+if (userTheme === 'dark' || (!userTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    setTheme('dark');
+} else {
+    setTheme('light');
+}
+
+export function useDarkMode() {
+    return { isDark, toggleDark };
+}
diff --git a/resources/js/Composables/useLocalStorageSaver.js b/resources/js/Composables/useLocalStorageSaver.js
index 303b4abd..15014183 100644
--- a/resources/js/Composables/useLocalStorageSaver.js
+++ b/resources/js/Composables/useLocalStorageSaver.js
@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 
-export function useLocalStorageSaver(form, localStorageKeyId, formFields, keyPrefix = 'edit-draft') {
+export function useLocalStorageSaver(form, localStorageKeyId, formFields, keyPrefix = 'edit-draft', imageFields = ['image_file']) {
     const localStorageKey = computed(() => `${keyPrefix}-${localStorageKeyId}`);
     const isSavedToLocalStorage = ref(false);
 
@@ -20,12 +20,38 @@ export function useLocalStorageSaver(form, localStorageKeyId, formFields, keyPre
     const saveToLocalStorage = () => {
         if (hasFormContent.value) {
             const formData = {};
+            const promises = [];
             formFields.forEach(field => {
-                formData[field] = form[field];
+                if (imageFields.includes(field) && form[field] instanceof File) {
+                    // Convert image file to base64 string
+                    const file = form[field];
+                    const reader = new FileReader();
+                    const promise = new Promise((resolve) => {
+                        reader.onload = (e) => {
+                            formData[field] = {
+                                name: file.name,
+                                type: file.type,
+                                dataUrl: e.target.result
+                            };
+                            resolve();
+                        };
+                        reader.readAsDataURL(file);
+                    });
+                    promises.push(promise);
+                } else {
+                    formData[field] = form[field];
+                }
+            });
+            Promise.all(promises).then(() => {
+                formData.savedAt = new Date().toISOString();
+                localStorage.setItem(localStorageKey.value, JSON.stringify(formData));
+                isSavedToLocalStorage.value = true;
             });
-            formData.savedAt = new Date().toISOString();
-            localStorage.setItem(localStorageKey.value, JSON.stringify(formData));
-            isSavedToLocalStorage.value = true;
+            if (promises.length === 0) {
+                formData.savedAt = new Date().toISOString();
+                localStorage.setItem(localStorageKey.value, JSON.stringify(formData));
+                isSavedToLocalStorage.value = true;
+            }
         } else {
             localStorage.removeItem(localStorageKey.value);
             isSavedToLocalStorage.value = false;
@@ -39,13 +65,24 @@ export function useLocalStorageSaver(form, localStorageKeyId, formFields, keyPre
                 const parsedData = JSON.parse(savedData);
                 formFields.forEach(field => {
                     if (parsedData[field] !== undefined) {
-                        form[field] = parsedData[field];
+                        if (imageFields.includes(field) && parsedData[field] && parsedData[field].dataUrl) {
+                            // Restore as a File object if possible, otherwise as dataUrl
+                            try {
+                                const { name, type, dataUrl } = parsedData[field];
+                                // Convert dataUrl to Blob
+                                const arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+                                for (let i = 0; i < n; i++) {
+                                    u8arr[i] = bstr.charCodeAt(i);
+                                }
+                                form[field] = new File([u8arr], name, { type: mime });
+                            } catch (e) {
+                                form[field] = parsedData[field].dataUrl;
+                            }
+                        } else {
+                            form[field] = parsedData[field];
+                        }
                     }
                 });
-                // Always keep image_file as null after loading
-                if (formFields.includes('image_file')) {
-                    form['image_file'] = null;
-                }
                 isSavedToLocalStorage.value = true;
             } catch (error) {
                 console.error('Error loading saved data:', error);
diff --git a/resources/js/Helpers/labels.js b/resources/js/Helpers/labels.js
index a0d9ce71..0ae6e092 100644
--- a/resources/js/Helpers/labels.js
+++ b/resources/js/Helpers/labels.js
@@ -38,10 +38,10 @@ export const platformLabels = {
 };
 
 export const pricingsObject = [
-    { label: "Free", value: "free" },
-    { label: "Paid", value: "paid" },
-    { label: "Freemium", value: "freemium" },
-    { label: "Premium", value: "premium" },
+    { label: "Free - No cost ever!", value: "free" },
+    { label: "Paid - One time fee", value: "paid" },
+    { label: "Freemium - Some parts free, other parts require a subscription", value: "freemium" },
+    { label: "Premium - Requires a subscription", value: "premium" },
 ];
 
 export const pricingLabels = {
diff --git a/resources/js/Helpers/validation.js b/resources/js/Helpers/validation.js
index 2287f86f..4d56fe24 100644
--- a/resources/js/Helpers/validation.js
+++ b/resources/js/Helpers/validation.js
@@ -10,7 +10,7 @@ export const resourceMandatoryFields = object({
         .required("URL is required"),
     platforms: array().of(string()).min(1, "At least one platform is required"),
     description: string().required("Description is required").max(10000),
-    difficulty: array().of(string()).min(1, "Difficulty level is required"),
+    difficulties: array().of(string()).min(1, "Difficulty level is required"),
     pricing: string().required("Pricing information is required"),
 });
 
@@ -61,6 +61,8 @@ export const resourceReviewFields = object({
         .required("Updates rating is required.")
         .min(1, "Minimum is 1.")
         .max(5, "Maximum is 5."),
+
+    // TODO: THIS VALIDATION DOES NTO WORK CORRECTLY
     pros: array()
         .transform((_value, originalValue) => {
             // Handle case where PrimeVue might pass a string instead of array
@@ -102,7 +104,7 @@ export const nullableResourceFields = object({
     // No validation on image_file since it will be validated on backend
     platforms: array().of(string()),
     description: string().max(10000),
-    difficulty: array().of(string()),
+    difficulties: array().of(string()),
     pricing: string(),
     topic_tags: array()
         .of(string().max(50))
diff --git a/resources/js/Pages/AboutUs.vue b/resources/js/Pages/AboutUs.vue
index 2d537492..98d04e34 100644
--- a/resources/js/Pages/AboutUs.vue
+++ b/resources/js/Pages/AboutUs.vue
@@ -37,72 +37,40 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                             class="prose prose-lg max-w-none text-gray-700 dark:text-gray-300 space-y-6"
                         >
                             <p>
-                                Software is a unique industry — most people
-                                enter it as hobbyists, tinker with side
-                                projects, and are constantly learning.
+                                Hi, I'm Allan Kong, the creator of ComputerScienceResources.com.
                             </p>
-
                             <p>
-                                Computer science is a wide field. There is a lot
-                                to learn: from data science, algorithms,
-                                databases and infrastructure.
+                                Over the years, I've noticed that the best resources for learning computer science and software engineering are scattered all over the internet—hidden in newsletters, YouTube playlists, GitHub repositories, and outdated blog posts. I had enough people ask me, "What do you use to learn X in computer science?" that I realized there needed to be an entire web app dedicated to organizing and sharing these resources.
                             </p>
-
-                            <ApplicationLogo class="mx-auto" />
-
                             <p>
-                                On the plus side, there are a ton of resources
-                                that are out there. The problem? It is scattered
-                                all over the internet - buried in newsletters,
-                                YouTube playlists, GitHub repositories, and
-                                outdated blog posts.
+                                Software is a unique industry—most of us enter it as hobbyists, tinker with side projects, and are constantly learning. Computer science is a vast field, with so much to explore: data science, algorithms, databases, infrastructure, and more.
                             </p>
-
+                            <ApplicationLogo class="mx-auto" />
                             <p>
-                                It's often difficult to know what a resource
-                                actually teaches, who is the intended audience,
-                                or how well it's received by the community.
+                                My goal with ComputerScienceResources.com is to make learning easier by organizing and highlighting the best resources in computer science and software engineering. I want to help the developer community thrive by providing a central place to discover, review, and share valuable content.
                             </p>
-
                             <div
                                 class="bg-secondary dark:bg-gray-700 rounded-lg p-6"
                             >
                                 <p
                                     class="text-primary dark:text-accent font-semibold"
                                 >
-                                    Our Mission
+                                    My Mission
                                 </p>
                                 <p class="text-gray-800 dark:text-gray-200">
-                                    Our goal with ComputerScienceResources.com
-                                    is to make learning easier by organizing and
-                                    highlighting the best resources in computer
-                                    science and software engineering. We aim to
-                                    help the developer community thrive by
-                                    providing a central place to discover,
-                                    review, and share valuable content.
+                                    I built this site because I believe learning should be accessible and organized. I want to give back to the community by making it easier for everyone to find high-quality resources, no matter where they are in their journey.
                                 </p>
                             </div>
-
                             <p>
-                                In addition, we provide the community the
-                                opportunity to give back to the website.
-                                Everyone can post resources, review resources,
-                                and suggest edits to any existing resource
-                                description.
+                                Anyone can post resources, review them, and suggest edits to any existing resource description. I want this to be a community-driven project where everyone can contribute and benefit.
                             </p>
-
                             <p>
-                                On the more technical side, our github will be
-                                open to discussion and feedback soon! Don't be
-                                afraid to reach out there!
+                                On the technical side, the GitHub repository will be open to discussion and feedback soon! Don't hesitate to reach out there if you have ideas or want to help improve the site.
                             </p>
-
                             <p
                                 class="text-center text-lg font-medium text-primary dark:text-accent mt-8"
                             >
-                                ComputerScienceResources.com values the
-                                community, because in the end, we all love
-                                software!
+                                ComputerScienceResources.com values the community—because in the end, we all love software!
                             </p>
                         </div>
 
@@ -116,40 +84,25 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                                     Who is this site for?
                                 </template>
                                 <template #answer>
-                                    Everyone! Everyone can all learn computer
-                                    science. We include resources for seniors
-                                    and children. This site is for everyone.
+                                    Anyone who wants to learn computer science! I include resources for everyone—seniors, children, beginners, and experts. This site is for anyone who wants to grow their knowledge, no matter their background.
                                 </template>
                             </FrequentlyAskedQuestion>
 
                             <FrequentlyAskedQuestion>
                                 <template #question>
-                                    Why is Computer Science Resources not open
-                                    source if you love the community?
+                                    Why is Computer Science Resources not open source if you love the community?
                                 </template>
                                 <template #answer>
-                                    It will be :). We wanted to keep it closed
-                                    source in the early release to prevent
-                                    people from forking the codebase and
-                                    stealing the project's credit. Furthermore,
-                                    we need to do some refactoring to make it
-                                    more appealing to those who wish to
-                                    contribute to the codebase. We will be happy
-                                    to open source it in the near future with
-                                    ideally 200 users minimum.
+                                    It will be! I wanted to keep it closed source in the early release to prevent people from forking the codebase and taking credit for the project. I also need to do some refactoring to make it more appealing for contributors. I'll be happy to open source it in the near future—ideally once there are at least 200 users.
                                 </template>
                             </FrequentlyAskedQuestion>
 
                             <FrequentlyAskedQuestion>
                                 <template #question>
-                                    How does Computer Science Resources make
-                                    money?
+                                    How does Computer Science Resources make money?
                                 </template>
                                 <template #answer>
-                                    We don't plan to make anything locked behind
-                                    a paywall anytime in the future. The plans
-                                    for monetization will be from donations, or
-                                    non-intrusive ads in the future.
+                                    I don't plan to lock anything behind a paywall. If I ever monetize, it will be through donations or non-intrusive ads—never at the expense of accessibility.
                                 </template>
                             </FrequentlyAskedQuestion>
 
@@ -158,13 +111,7 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                                     What kind of resources are accepted?
                                 </template>
                                 <template #answer>
-                                    We focus on comprehensive, structured, and
-                                    high-quality resources — things that provide
-                                    long-term learning value. That includes
-                                    interactive platforms, educational YouTube
-                                    channels, curated book series, technical
-                                    newsletters, and more. The more focused or
-                                    specialized the resource is, the better.
+                                    I focus on comprehensive, structured, and high-quality resources—things that provide long-term learning value. That includes interactive platforms, educational YouTube channels, curated book series, technical newsletters, and more. The more focused or specialized the resource is, the better.
                                 </template>
                             </FrequentlyAskedQuestion>
 
@@ -173,12 +120,7 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                                     Can I post my own course?
                                 </template>
                                 <template #answer>
-                                    Only if it's well-received and genuinely
-                                    useful. This isn't a place to advertise
-                                    low-quality content, we will take those
-                                    down. We care more about substance than
-                                    self-promotion. If your course is loved by
-                                    the community, it's welcome.
+                                    Only if it's well-received and genuinely useful. This isn't a place to advertise low-quality content—I'll take those down. I care more about substance than self-promotion. If your course is loved by the community, it's welcome here.
                                 </template>
                             </FrequentlyAskedQuestion>
 
@@ -187,19 +129,7 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                                     Is the site finished?
                                 </template>
                                 <template #answer>
-                                    Of course not, we are still developing
-                                    things. There are a lot of features that
-                                    have not been implemented yet for the sake
-                                    of developing a release. If I were to make
-                                    the first release perfect, it wouldn't be
-                                    out here. So, we will be constantly
-                                    listening to community feedback and
-                                    improving the app. Feel free to point out
-                                    issues in the github repository tool and
-                                    github discussions tab! Some things that are
-                                    in the works are the ability to view
-                                    someone's profile, report malicious posts
-                                    and users, and favoriting a resource.
+                                    Of course not! I'm still developing new features and improving the site. If I waited for perfection, it would never launch. I'm always listening to community feedback and working to make things better. Feel free to point out issues in the GitHub repository or discussions tab! Some things in the works: user profiles, reporting malicious posts and users, and favoriting resources.
                                 </template>
                             </FrequentlyAskedQuestion>
 
@@ -208,9 +138,7 @@ import { canonicalFor, defaultOgImage, SITE_NAME } from "@/Helpers/seo";
                                     Why is the Logo a Cat?
                                 </template>
                                 <template #answer>
-                                    I love cats. What else can I say? I have two
-                                    cats and I simply love them. I think the
-                                    world is better with cats involved.
+                                    I love cats. What else can I say? I have two cats and I simply love them. I think the world is better with cats involved.
                                 </template>
                             </FrequentlyAskedQuestion>
                         </div>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 7501fa78..0e21e3be 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -38,7 +38,7 @@ const submit = () => {
             <AuthenticationCardLogo/>
         </template>
 
-        <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+    <div v-if="status" class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
             {{ status }}
         </div>
 
@@ -72,13 +72,13 @@ const submit = () => {
             <div class="block mt-4">
                 <label class="flex items-center">
                     <Checkbox v-model:checked="form.remember" name="remember"/>
-                    <span class="ml-2 text-sm text-gray-600">Remember me</span>
+                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</span>
                 </label>
             </div>
 
             <div class="flex items-center justify-between mt-4">
                 <Link v-if="canResetPassword" :href="route('password.request')"
-                    class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                    class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                     Forgot your password?
                 </Link>
 
@@ -94,7 +94,7 @@ const submit = () => {
 
         <div class="flex justify-center mt-8">
             <Link :href="route('register')"
-                class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                 Not registered yet? Make an account
             </Link>
         </div>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 9bae0a8e..62b915b1 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -92,9 +92,9 @@ const submit = () => {
                         <Checkbox id="terms" v-model:checked="form.terms" name="terms" required/>
 
                         <div class="ml-2">
-                            I agree to the <a :href="route('terms.show')" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800"
+                            I agree to the <a :href="route('terms.show')" class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800"
                                               target="_blank">Terms
-                            of Service</a> and <a :href="route('policy.show')" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800"
+                            of Service</a> and <a :href="route('policy.show')" class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800"
                                                   target="_blank">Privacy
                             Policy</a>
                         </div>
@@ -105,7 +105,7 @@ const submit = () => {
 
             <div class="flex items-center justify-end mt-4">
                 <Link :href="route('login')"
-                      class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800">
+                      class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800">
                     Already registered?
                 </Link>
 
@@ -121,7 +121,7 @@ const submit = () => {
 
         <div class="flex justify-center mt-8">
             <Link :href="route('login')"
-                class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                 Already have an Account? Sign in
             </Link>
         </div>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index 5092c241..40ef660b 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -18,12 +18,12 @@ defineProps({
 <template>
     <AppLayout title="Profile">
         <!-- Background and padding -->
-        <div class="bg-gradient-to-br from-background to-background/50 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+    <div class="bg-gradient-to-br from-background to-background/50 dark:from-gray-950 dark:to-gray-900 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
             <div class="max-w-5xl mx-auto space-y-8">
                 <!-- Profile Info -->
                 <div
                     v-if="$page.props.jetstream.canUpdateProfileInformation"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <UpdateProfileInformationForm :user="$page.props.auth.user" />
                 </div>
@@ -31,7 +31,7 @@ defineProps({
                 <!-- Update Password -->
                 <div
                     v-if="$page.props.jetstream.canUpdatePassword && $page.props.socialstream.hasPassword"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <UpdatePasswordForm />
                 </div>
@@ -39,7 +39,7 @@ defineProps({
                 <!-- Set Password -->
                 <div
                     v-else
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <SetPasswordForm />
                 </div>
@@ -47,7 +47,7 @@ defineProps({
                 <!-- Two-Factor Auth -->
                 <div
                     v-if="$page.props.jetstream.canManageTwoFactorAuthentication && $page.props.socialstream.hasPassword"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <TwoFactorAuthenticationForm :requires-confirmation="confirmsTwoFactorAuthentication" />
                 </div>
@@ -55,7 +55,7 @@ defineProps({
                 <!-- Connected Accounts -->
                 <div
                     v-if="$page.props.socialstream.show"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <ConnectedAccountsForm />
                 </div>
@@ -63,7 +63,7 @@ defineProps({
                 <!-- Logout Sessions -->
                 <div
                     v-if="$page.props.socialstream.hasPassword"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <LogoutOtherBrowserSessionsForm :sessions="sessions" />
                 </div>
@@ -71,7 +71,7 @@ defineProps({
                 <!-- Account Deletion -->
                 <div
                     v-if="$page.props.jetstream.hasAccountDeletionFeatures && $page.props.socialstream.hasPassword"
-                    class="bg-white shadow-md rounded-2xl p-6"
+                    class="bg-white dark:bg-gray-900 shadow-md rounded-2xl p-6 border border-transparent dark:border-gray-800"
                 >
                     <DeleteUserForm />
                 </div>
diff --git a/resources/js/Pages/ResourceEdits/Create.vue b/resources/js/Pages/ResourceEdits/Create.vue
index a4fb3a44..368726e8 100644
--- a/resources/js/Pages/ResourceEdits/Create.vue
+++ b/resources/js/Pages/ResourceEdits/Create.vue
@@ -56,7 +56,12 @@ const formData = useForm({
 const formFields = ["edit_title", "edit_description", "proposed_changes"];
 
 const { isSavedToLocalStorage, hasFormContent, clearLocalStorage } =
-    useLocalStorageSaver(formData, `edit-${props.resource.id}`, formFields);
+    useLocalStorageSaver(
+        formData,
+        `edit-${props.resource.id}`,
+        formFields,
+        'edit-draft',
+    );
 
 const pictureKey = ref(0);
 const changedPicture = ref(false);
@@ -139,7 +144,7 @@ const submit = async () => {
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                 <div
-                    class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6 relative"
+                    class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl sm:rounded-lg p-6 relative border border-primary/10 dark:border-primary/20"
                 >
                     <div class="flex-row flex my-2">
                         <BackButton
@@ -157,7 +162,7 @@ const submit = async () => {
                     </div>
                     <form @submit.prevent="submit">
                         <div class="mb-9 rounded-lg">
-                            <h2 class="text-xl font-semibold mb-2">
+                            <h2 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">
                                 Describe Your Change
                             </h2>
                             <div>
@@ -205,10 +210,10 @@ const submit = async () => {
                             </div>
                         </div>
 
-                        <h2 class="text-xl font-semibold mb-2">
+                        <h2 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">
                             New Edited Resource
                         </h2>
-                        <div class="p-4 border rounded">
+                        <div class="p-4 border rounded bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800">
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div>
                                     <InputLabel
@@ -261,10 +266,11 @@ const submit = async () => {
                                             @change="onImageChange"
                                         />
                                         <SecondaryButton
+                                            v-if="props.resource.image_url"
                                             @click="resetImage"
                                             type="button"
                                         >
-                                            Reset Image
+                                            Reset To Original Image
                                         </SecondaryButton>
                                     </div>
                                     <InputError
diff --git a/resources/js/Pages/ResourceEdits/Show.vue b/resources/js/Pages/ResourceEdits/Show.vue
index c03d1e34..0b2cb870 100644
--- a/resources/js/Pages/ResourceEdits/Show.vue
+++ b/resources/js/Pages/ResourceEdits/Show.vue
@@ -103,7 +103,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
     <AppLayout :title="`Compare Versions: ${originalResource.name}`">
         <Head :title="`Edit for ${originalResource.name}`" />
         <div class="max-w-[90vw] mx-auto sm:px-6 py-4 lg:px-8">
-            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+            <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl sm:rounded-lg border border-transparent dark:border-gray-800">
                 <div class="p-7 sm:p-8">
                     <!-- Header Section -->
                     <div class="my-2">
@@ -116,18 +116,18 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                             "
                         />
                     </div>
-                    <div class="border-b border-gray-200 pb-6 mb-6">
+                    <div class="border-b border-gray-200 dark:border-gray-800 pb-6 mb-6">
                         <div class="flex items-start justify-between">
                             <div class="flex-1">
                                 <div class="flex items-center gap-3 mb-3">
                                     <h1
-                                        class="text-3xl font-bold text-gray-900"
+                                        class="text-3xl font-bold text-gray-900 dark:text-gray-100"
                                     >
                                         {{ editedResource.edit_title }}
                                     </h1>
                                 </div>
                                 <p
-                                    class="text-gray-700 text-lg leading-relaxed mb-4"
+                                    class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4"
                                 >
                                     {{ editedResource.edit_description }}
                                 </p>
@@ -160,13 +160,13 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                 <!-- Proposed Changes Column -->
                                 <div
-                                    class="bg-gray-50 border border-gray-200 rounded-lg"
+                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
                                 >
                                     <div
-                                        class="bg-primary/5 border-b border-gray-200 px-4 py-3"
+                                        class="bg-primary/5 dark:bg-primary/10 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
                                     >
                                         <h2
-                                            class="text-lg font-semibold text-gray-900 flex items-center gap-2"
+                                            class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
                                         >
                                             <Icon
                                                 icon="mdi:plus-circle"
@@ -181,7 +181,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                             :key="field.key"
                                         >
                                             <h3
-                                                class="font-semibold text-gray-600 mb-2"
+                                                class="font-semibold text-gray-600 dark:text-gray-300 mb-2"
                                             >
                                                 {{ field.label }}:
                                             </h3>
@@ -210,7 +210,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                             </div>
                                             <div
                                                 v-else
-                                                class="text-gray-800 p-2 rounded"
+                                                class="text-gray-800 dark:text-gray-100 p-2 rounded"
                                             >
                                                 {{
                                                     field.formatter
@@ -223,7 +223,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                         </div>
                                         <p
                                             v-if="!hasChanges"
-                                            class="text-gray-500 italic"
+                                            class="text-gray-500 dark:text-gray-400 italic"
                                         >
                                             No changes were proposed.
                                         </p>
@@ -232,10 +232,10 @@ const hasChanges = computed(() => changedFields.value.length > 0);
 
                                 <!-- Current Version Column -->
                                 <div
-                                    class="bg-gray-50 border border-gray-200 rounded-lg"
+                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
                                 >
                                     <div
-                                        class="bg-gray-100 border-b border-gray-200 px-4 py-3"
+                                        class="bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
                                     >
                                         <Link
                                             :href="
@@ -246,11 +246,11 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                             class="group"
                                         >
                                             <h2
-                                                class="text-lg font-semibold text-gray-900 flex items-center gap-2 group-hover:text-primary duration-200"
+                                                class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 group-hover:text-primary duration-200"
                                             >
                                                 <Icon
                                                     icon="mdi:file-document"
-                                                    class="w-5 h-5 text-gray-600 group-hover:text-primary duration-200"
+                                                    class="w-5 h-5 text-gray-600 dark:text-gray-300 group-hover:text-primary duration-200"
                                                 />
                                                 Current Version
                                             </h2>
@@ -262,7 +262,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                             :key="field.key"
                                         >
                                             <h3
-                                                class="font-semibold text-gray-600 mb-2"
+                                                class="font-semibold text-gray-600 dark:text-gray-300 mb-2"
                                             >
                                                 {{ field.label }}:
                                             </h3>
@@ -291,7 +291,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                             </div>
                                             <div
                                                 v-else
-                                                class="text-gray-800 p-2 rounded"
+                                                class="text-gray-800 dark:text-gray-100 p-2 rounded"
                                             >
                                                 {{
                                                     field.formatter
@@ -304,7 +304,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                         </div>
                                         <p
                                             v-if="!hasChanges"
-                                            class="text-gray-500 italic"
+                                            class="text-gray-500 dark:text-gray-400 italic"
                                         >
                                             No changes to compare.
                                         </p>
@@ -322,13 +322,13 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                 <div
                                     v-for="field in changedFields"
                                     :key="field.key"
-                                    class="bg-gray-50 border border-gray-200 rounded-lg overflow-hidden"
+                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden"
                                 >
                                     <div
-                                        class="bg-gray-100 px-4 py-2 border-b border-gray-200"
+                                        class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-800"
                                     >
                                         <h3
-                                            class="font-semibold text-gray-900 flex items-center gap-2"
+                                            class="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
                                         >
                                             <Icon
                                                 icon="mdi:file-edit"
@@ -345,13 +345,13 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                     </div>
                                 </div>
                             </div>
-                            <p v-else class="text-gray-500 italic p-4">
+                            <p v-else class="text-gray-500 dark:text-gray-400 italic p-4">
                                 No changes to display in diff.
                             </p>
                         </TabPanel>
                     </TabView>
                     <!-- Approval Actions -->
-                    <div class="mt-8 border-t border-gray-200 pt-6">
+                    <div class="mt-8 border-t border-gray-200 dark:border-gray-800 pt-6">
                         <div class="flex justify-center">
                             <Upvotable
                                 :flexRow="true"
@@ -390,10 +390,10 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                 <template #votes="{ votes }">
                                     <div class="flex flex-col items-center">
                                         <span
-                                            class="text-2xl font-bold text-gray-900"
+                                            class="text-2xl font-bold text-gray-900 dark:text-gray-100"
                                             >{{ votes }}</span
                                         >
-                                        <span class="text-sm text-gray-600">
+                                        <span class="text-sm text-gray-600 dark:text-gray-300">
                                             Approval{{ votes === 1 ? "" : "s" }}
                                         </span>
                                     </div>
diff --git a/resources/js/Pages/Resources/Create.vue b/resources/js/Pages/Resources/Create.vue
index 2e5c0caa..edaa6f4f 100644
--- a/resources/js/Pages/Resources/Create.vue
+++ b/resources/js/Pages/Resources/Create.vue
@@ -120,14 +120,14 @@ const handleFormChange = (newFormData) => {
             >
                 <!-- Instructions Sidebar (Rules) -->
                 <div
-                    class="bg-gray-50 border border-gray-200 rounded-lg p-6 w-full md:w-[28vw] min-w-[20rem] h-fit sticky md:top-8 mt-0 md:mb-0"
+                    class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-6 w-full md:w-[28vw] min-w-[20rem] h-fit sticky md:top-8 mt-0 md:mb-0"
                 >
                     <SubmissionGuidelines />
                 </div>
                 <!-- Main Form Section -->
                 <div
                     ref="formRef"
-                    class="bg-white h-min shadow-lg rounded-lg p-5 relative overflow-auto w-full md:w-[46vw] max-w-4xl"
+                    class="bg-white dark:bg-gray-900 h-min shadow-lg rounded-lg p-5 relative overflow-auto w-full md:w-[46vw] max-w-4xl border border-transparent dark:border-gray-800"
                     id="create-resource-form"
                 >
                     <div class="flex justify-between mb-2">
diff --git a/resources/js/Pages/Resources/Form/MandatoryFields.vue b/resources/js/Pages/Resources/Form/MandatoryFields.vue
index b517248d..5e758007 100644
--- a/resources/js/Pages/Resources/Form/MandatoryFields.vue
+++ b/resources/js/Pages/Resources/Form/MandatoryFields.vue
@@ -6,6 +6,7 @@ import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
 import PictureInput from "vue-picture-input";
 import Select from "primevue/select";
 import { defineEmits, ref, watch } from "vue";
+import ConfirmationModal from '@/Components/ConfirmationModal.vue';
 import {
     platformsObject,
     pricingsObject,
@@ -25,12 +26,18 @@ const props = defineProps({
 const emit = defineEmits(["change", "next"]);
 
 const errors = ref({});
+const showDescriptionHelp = ref(false);
 
 function onImageChange(event) {
     const file = event.target.files[0];
     props.formData.image_file = file;
 }
 
+function onImageRemove(event) {
+    props.formData.image_file = null;
+}
+
+
 const validateAndNext = async () => {
     try {
         await resourceMandatoryFields.validate(props.formData, {
@@ -57,11 +64,11 @@ watch(
 </script>
 
 <template>
-    <div class="flex flex-col gap-4 w-full">
+    <div class="flex flex-col gap-4 w-full dark:bg-gray-900">
         <div class="space-y-4">
             <!-- Name Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Name
                     <span class="text-red-500"> * </span>
                 </label>
@@ -69,7 +76,7 @@ watch(
                 <InputText
                     v-model="props.formData.name"
                     placeholder="Enter the Name"
-                    class="mt-1 w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
                     v-if="errors.name"
@@ -79,14 +86,14 @@ watch(
 
             <!-- URL Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Resource Website URL
                     <span class="text-red-500"> * </span>
                 </label>
                 <InputText
                     v-model="props.formData.page_url"
                     placeholder="Enter resource URL"
-                    class="mt-1 w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
                     v-if="errors.page_url"
@@ -96,7 +103,7 @@ watch(
 
             <!-- Image URL Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Image Thumbnail</label
                 >
                 <PictureInput
@@ -109,8 +116,9 @@ watch(
                     remove-button-class="inline-flex items-center px-4 py-2 bg-primary border-0 rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-primary/90 focus:bg-primary/90 active:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150"
                     button-class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150 mr-4"
                     removable
-                    :prefill="props.formData.image_url"
+                    :prefill="props.formData.image_file"
                     @change="onImageChange"
+                    @remove="onImageRemove"
                 />
                 <PrimeVueFormError
                     v-if="errors.image_file"
@@ -120,17 +128,18 @@ watch(
 
             <div class="flex flex-col gap-1">
                 <!-- Resource Platforms Field -->
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Resource Platforms
                     <span class="text-red-500"> * </span>
                 </label>
                 <MultiSelect
                     v-model="props.formData.platforms"
                     :options="platformsObject"
+                    filter
                     option-label="label"
                     option-value="value"
                     placeholder="Select Resource Platform"
-                    class="w-full"
+                    class="w-full dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
                 />
                 <PrimeVueFormError
                     v-if="errors.platforms"
@@ -140,25 +149,60 @@ watch(
 
             <!-- Description Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
-                    >Description
-                    <span class="text-red-500"> * </span>
-                </label>
+                <div class="flex items-center gap-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
+                        Description
+                        <span class="text-red-500"> * </span>
+                    </label>
+                    <button type="button" @click="showDescriptionHelp = true" class="focus:outline-none" title="Help: What makes a good description?">
+                        <Icon icon="mdi:help-circle-outline" class="w-5 h-5 text-primary hover:text-primaryDark" />
+                    </button>
+                </div>
                 <Textarea
                     v-model="props.formData.description"
-                    placeholder="Describe the resource..."
-                    class="mt-1 w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+                    :placeholder="`${props.formData.name || 'Resource Name'} is a...`"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                     rows="8"
                 />
                 <PrimeVueFormError
                     v-if="errors.description"
                     :errors="errors.description"
                 />
+                <ConfirmationModal :show="showDescriptionHelp" @close="showDescriptionHelp = false">
+                    <template #title>
+                        What makes a good resource description?
+                    </template>
+                    <template #content>
+                        <div class="space-y-3">
+                            <p>
+                                <span class="font-semibold">We want details!</span> A good description should clearly explain what the resource is, who it's for, and what makes it valuable. Mention the format (podcast, platform, channel, etc.), the main topics covered, and any unique features or strengths. Imagine you're helping someone decide if this resource is right for them.
+                            </p>
+                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                                <div class="font-semibold mb-1">Example 1:</div>
+                                <div class="text-xs text-gray-700">
+                                    Soft Skills Engineering is a weekly advice podcast specifically designed for software developers who want to navigate the non-technical challenges of their careers. Hosted by experienced developers Dave Smith and Jamison Dance, the show addresses the interpersonal and professional situations that coding bootcamps and computer science programs typically don't cover.<br><br>
+                                    The podcast tackles practical workplace scenarios that software engineers encounter regularly, including salary negotiations, managing difficult colleagues, advancing into technical leadership roles, handling code review feedback diplomatically, and making strategic career decisions like when to change jobs or seek promotions. Episodes feature listener-submitted questions covering situations ranging from dealing with underperforming team members to managing the transition into management roles.
+                                </div>
+                            </div>
+                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                                <div class="font-semibold mb-1">Example 2:</div>
+                                <div class="text-xs text-gray-700">
+                                    NeetCode is an online platform designed for coding interview preparation, particularly for FAANG and big tech companies. The platform provides a structured approach to preparing for coding interviews with curated problem sets and comprehensive learning resources.<br><br>
+                                    The platform's flagship offering is the NeetCode 150, which expands on the popular Blind 75 problem set by adding 75 additional problems, creating a comprehensive list for developers familiar with basic algorithms and data structures. The site includes video explanations, coding solutions, and systematic approaches to tackling technical interview questions across various difficulty levels and problem categories.<br><br>
+                                    NeetCode also maintains a popular YouTube channel known for its concise and straightforward explanations of common interview questions, with clear problem-solving strategies that are accessible to both beginners and experienced coders.
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #footer>
+                        <button @click="showDescriptionHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
+                    </template>
+                </ConfirmationModal>
             </div>
 
             <!-- Difficulty Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Difficulty
                     <span class="text-red-500"> * </span>
                 </label>
@@ -168,7 +212,7 @@ watch(
                     option-label="label"
                     option-value="value"
                     placeholder="Select Difficulty Level"
-                    class="mt-1 w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
                     v-if="errors.difficulties"
@@ -178,7 +222,7 @@ watch(
 
             <!-- Pricing Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Pricing
                     <span class="text-red-500"> * </span>
                 </label>
@@ -188,7 +232,7 @@ watch(
                     option-label="label"
                     option-value="value"
                     placeholder="Select Pricing"
-                    class="mt-1 w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
                     v-if="errors.pricing"
diff --git a/resources/js/Pages/Resources/Form/TagsFields.vue b/resources/js/Pages/Resources/Form/TagsFields.vue
index f405e9f3..6e9eec0a 100644
--- a/resources/js/Pages/Resources/Form/TagsFields.vue
+++ b/resources/js/Pages/Resources/Form/TagsFields.vue
@@ -8,6 +8,7 @@ import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
 import { Icon } from "@iconify/vue";
+import ConfirmationModal from '@/Components/ConfirmationModal.vue';
 
 const props = defineProps({
     form: {
@@ -23,6 +24,7 @@ const props = defineProps({
 const emit = defineEmits(["change", "next", "back"]);
 
 const errors = ref([]);
+const showTagsHelp = ref(false);
 
 const schema = resourceMandatoryTags;
 // PrimeVue Resolver
@@ -56,16 +58,27 @@ const validateAndNext = async () => {
     <Form
         :resolver="resolver"
         :initialValues="props.form"
-        class="flex flex-col gap-4 w-full"
+        class="flex flex-col gap-4 w-full bg-white dark:bg-gray-800 border border-transparent dark:border-gray-800 rounded-lg p-4"
     >
-        <div class="flex flex-col gap-1 justify-center items-center">
+    <div class="flex flex-col gap-1 justify-center items-center">
+            <div class="self-end">
+                <button
+                    type="button"
+                    @click="showTagsHelp = true"
+                    class="inline-flex items-center gap-1 text-sm text-primary hover:text-primaryDark focus:outline-none"
+                    title="Help: What tags should I add?"
+                >
+                    <Icon icon="mdi:help-circle-outline" class="w-5 h-5" />
+                    Tagging help
+                </button>
+            </div>
             <!-- TODO: MAKE THIS A COMPONENT -->
             <!-- Tag Selector for topics -->
-            <h2 class="text-2xl font-bold text-center">
+            <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">
                 What's this resource about?
                 <span class="text-red-500"> * </span>
             </h2>
-            <p class="text-center italic mb-2">
+            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">
                 software-engineering, career-consulting, data-science
             </p>
             <TagSelector
@@ -75,26 +88,69 @@ const validateAndNext = async () => {
             <PrimeVueFormError :errors="errors" />
 
             <!-- Tag Selector for Programming Languages -->
-            <h2 class="text-2xl font-bold mt-5 mb-1 text-center">
-                Programming languages taught (if any)?
+            <h2 class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100">
+                Programming languages/frameworks taught (if any)?
             </h2>
-            <p class="text-center italic mb-2">python, c++, c#</p>
+            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">python, c++, c#, vue.js, pytorch</p>
             <TagSelector
                 :tag-type="'programming_languages_tags'"
                 v-model="props.form.programming_language_tags"
             />
 
             <!-- Tag Selector for Other tags -->
-            <h2 class="text-2xl font-bold mt-5 mb-1 text-center">
+            <h2 class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100">
                 Additional general tags
             </h2>
-            <p class="text-center italic mb-2">non-profit, open-source, funny</p>
+            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">non-profit, open-source, funny</p>
             <TagSelector
                 :tag-type="'general_tags'"
                 v-model="props.form.general_tags"
             />
         </div>
 
+        <ConfirmationModal :show="showTagsHelp" @close="showTagsHelp = false">
+            <template #title>
+                How to choose good tags
+            </template>
+            <template #content>
+                <div class="space-y-4 text-sm">
+                    <div>
+                        <div class="font-semibold mb-1">Topic tags (required)</div>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            Use broad, descriptive categories that capture what the resource is mainly about.
+                            Avoid super niche labels here.
+                        </p>
+                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
+                            <li>Examples: software-engineering, data-science, devops, algorithms, system-design, career</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <div class="font-semibold mb-1">Programming languages/frameworks</div>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            Be specific and only include languages or frameworks the resource actively teaches or uses.
+                            Please <b>don’t type "everything"</b> as a tag.
+                        </p>
+                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
+                            <li>Good: python, c++, c#, vue.js, pytorch</li>
+                            <li>Avoid: "all-languages" or adding many unrelated ones</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <div class="font-semibold mb-1">Other/general tags</div>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            Everything else that helps discovery: tone, format, credentials, audience, etc.
+                        </p>
+                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
+                            <li>Examples: humour, certifications, non-profit, open-source, interview-prep</li>
+                        </ul>
+                    </div>
+                </div>
+            </template>
+            <template #footer>
+                <button @click="showTagsHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
+            </template>
+        </ConfirmationModal>
+
         <!-- Prev/Next Button -->
         <div class="flex pt-6 justify-between">
             <SecondaryButton @click="() => emit('back')">
diff --git a/resources/js/Pages/Resources/MandatoryFields.vue b/resources/js/Pages/Resources/MandatoryFields.vue
new file mode 100644
index 00000000..324b7a66
--- /dev/null
+++ b/resources/js/Pages/Resources/MandatoryFields.vue
@@ -0,0 +1,255 @@
+<script setup>
+import InputText from "primevue/inputtext";
+import Textarea from "primevue/textarea";
+import MultiSelect from "primevue/multiselect";
+import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
+import PictureInput from "vue-picture-input";
+import Select from "primevue/select";
+import { defineEmits, ref, watch } from "vue";
+import ConfirmationModal from '@/Components/ConfirmationModal.vue';
+import {
+    platformsObject,
+    pricingsObject,
+    difficultiesObject,
+} from "@/Helpers/labels";
+import { resourceMandatoryFields } from "@/Helpers/validation";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import { Icon } from "@iconify/vue";
+
+const props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["change", "next"]);
+
+const errors = ref({});
+const showDescriptionHelp = ref(false);
+
+function onImageChange(event) {
+    const file = event.target.files[0];
+    props.formData.image_file = file;
+}
+
+function onImageRemove(event) {
+    props.formData.image_file = null;
+}
+
+
+const validateAndNext = async () => {
+    try {
+        await resourceMandatoryFields.validate(props.formData, {
+            abortEarly: false,
+        });
+        errors.value = {};
+        emit("next", props.formData);
+    } catch (e) {
+        const yupErrors = {};
+        e.inner.forEach((error) => {
+            yupErrors[error.path] = error.errors;
+        });
+        errors.value = yupErrors;
+    }
+};
+
+watch(
+    () => props.formData,
+    (newValue) => {
+        emit("change", newValue);
+    },
+    { deep: true }
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-full">
+        <div class="space-y-4">
+            <!-- Name Field -->
+            <div class="flex flex-col gap-1">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Name
+                    <span class="text-red-500"> * </span>
+                </label>
+
+                <InputText
+                    v-model="props.formData.name"
+                    placeholder="Enter the Name"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:text-gray-100"
+                />
+                <PrimeVueFormError
+                    v-if="errors.name"
+                    :errors="errors.name"
+                />
+            </div>
+
+            <!-- URL Field -->
+            <div class="flex flex-col gap-1">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Resource Website URL
+                    <span class="text-red-500"> * </span>
+                </label>
+                <InputText
+                    v-model="props.formData.page_url"
+                    placeholder="Enter resource URL"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
+                />
+                <PrimeVueFormError
+                    v-if="errors.page_url"
+                    :errors="errors.page_url"
+                />
+            </div>
+
+            <!-- Image URL Field -->
+            <div class="flex flex-col gap-1">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Image Thumbnail</label
+                >
+                <div class="mt-1 w-fit border border-gray-300 dark:border-gray-800 rounded-md bg-white dark:bg-gray-900 p-3 flex items-center justify-center">
+                    <PictureInput
+                        ref="pictureInput"
+                        width="220"
+                        height="220"
+                        margin="16"
+                        accept="image/jpeg,image/png"
+                        size="0.4"
+                        remove-button-class="inline-flex items-center px-4 py-2 bg-primary border-0 rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-primary/90 focus:bg-primary/90 active:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150"
+                        button-class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150 mr-4"
+                        removable
+                        :prefill="props.formData.image_file"
+                        @change="onImageChange"
+                        @remove="onImageRemove"
+                    />
+                </div>
+                <PrimeVueFormError
+                    v-if="errors.image_file"
+                    :errors="errors.image_file"
+                />
+            </div>
+
+            <div class="flex flex-col gap-1">
+                <!-- Resource Platforms Field -->
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Resource Platforms
+                    <span class="text-red-500"> * </span>
+                </label>
+                <MultiSelect
+                    v-model="props.formData.platforms"
+                    :options="platformsObject"
+                    filter
+                    option-label="label"
+                    option-value="value"
+                    placeholder="Select Resource Platform"
+                    class="w-full dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
+                />
+                <PrimeVueFormError
+                    v-if="errors.platforms"
+                    :errors="errors.platforms"
+                />
+            </div>
+
+            <!-- Description Field -->
+            <div class="flex flex-col gap-1">
+                <div class="flex items-center gap-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
+                        Description
+                        <span class="text-red-500"> * </span>
+                    </label>
+                    <button type="button" @click="showDescriptionHelp = true" class="focus:outline-none" title="Help: What makes a good description?">
+                        <Icon icon="mdi:help-circle-outline" class="w-5 h-5 text-primary hover:text-primaryDark" />
+                    </button>
+                </div>
+                <Textarea
+                    v-model="props.formData.description"
+                    :placeholder="`${props.formData.name || 'Resource Name'} is a...`"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
+                    rows="8"
+                />
+                <PrimeVueFormError
+                    v-if="errors.description"
+                    :errors="errors.description"
+                />
+                <ConfirmationModal :show="showDescriptionHelp" @close="showDescriptionHelp = false">
+                    <template #title>
+                        What makes a good resource description?
+                    </template>
+                    <template #content>
+                        <div class="space-y-3">
+                            <p>
+                                <span class="font-semibold">We want details!</span> A good description should clearly explain what the resource is, who it's for, and what makes it valuable. Mention the format (podcast, platform, channel, etc.), the main topics covered, and any unique features or strengths. Imagine you're helping someone decide if this resource is right for them.
+                            </p>
+                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                                <div class="font-semibold mb-1">Example 1:</div>
+                                <div class="text-xs text-gray-700">
+                                    Soft Skills Engineering is a weekly advice podcast specifically designed for software developers who want to navigate the non-technical challenges of their careers. Hosted by experienced developers Dave Smith and Jamison Dance, the show addresses the interpersonal and professional situations that coding bootcamps and computer science programs typically don't cover.<br><br>
+                                    The podcast tackles practical workplace scenarios that software engineers encounter regularly, including salary negotiations, managing difficult colleagues, advancing into technical leadership roles, handling code review feedback diplomatically, and making strategic career decisions like when to change jobs or seek promotions. Episodes feature listener-submitted questions covering situations ranging from dealing with underperforming team members to managing the transition into management roles.
+                                </div>
+                            </div>
+                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                                <div class="font-semibold mb-1">Example 2:</div>
+                                <div class="text-xs text-gray-700">
+                                    NeetCode is an online platform designed for coding interview preparation, particularly for FAANG and big tech companies. The platform provides a structured approach to preparing for coding interviews with curated problem sets and comprehensive learning resources.<br><br>
+                                    The platform's flagship offering is the NeetCode 150, which expands on the popular Blind 75 problem set by adding 75 additional problems, creating a comprehensive list for developers familiar with basic algorithms and data structures. The site includes video explanations, coding solutions, and systematic approaches to tackling technical interview questions across various difficulty levels and problem categories.<br><br>
+                                    NeetCode also maintains a popular YouTube channel known for its concise and straightforward explanations of common interview questions, with clear problem-solving strategies that are accessible to both beginners and experienced coders.
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #footer>
+                        <button @click="showDescriptionHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
+                    </template>
+                </ConfirmationModal>
+            </div>
+
+            <!-- Difficulty Field -->
+            <div class="flex flex-col gap-1 ">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Difficulty
+                    <span class="text-red-500"> * </span>
+                </label>
+                <MultiSelect
+                    v-model="props.formData.difficulties"
+                    :options="difficultiesObject"
+                    option-label="label"
+                    option-value="value"
+                    placeholder="Select Difficulty Level"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
+                />
+                <PrimeVueFormError
+                    v-if="errors.difficulties"
+                    :errors="errors.difficulties"
+                />
+            </div>
+
+            <!-- Pricing Field -->
+            <div class="flex flex-col gap-1">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >Pricing
+                    <span class="text-red-500"> * </span>
+                </label>
+                <Select
+                    v-model="props.formData.pricing"
+                    :options="pricingsObject"
+                    option-label="label"
+                    option-value="value"
+                    placeholder="Select Pricing"
+                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
+                />
+                <PrimeVueFormError
+                    v-if="errors.pricing"
+                    :errors="errors.pricing"
+                />
+            </div>
+        </div>
+        <!-- continue Button -->
+        <div class="flex pt-6 justify-end">
+            <PrimaryButton
+                @click="validateAndNext"
+            >
+                Next
+                <Icon class="ml-2" icon="mdi:arrow-right"/>
+            </PrimaryButton>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/Resources/Show.vue b/resources/js/Pages/Resources/Show.vue
index 9f83d29f..ff009667 100644
--- a/resources/js/Pages/Resources/Show.vue
+++ b/resources/js/Pages/Resources/Show.vue
@@ -72,7 +72,7 @@ const sortingType = urlParams.get("sort_by") || "top";
             <meta head-key="resource:og:site_name" property="og:site_name" content="Computer Science Resources" />
         </Head>
         <div class="max-w-[90vw] mx-auto sm:px-6 py-4 lg:px-8">
-            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+            <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl sm:rounded-lg border border-primary/10 dark:border-primary/20">
                 <div class="p-7 sm:p-8">
                     <div class="relative">
                         <div
@@ -103,7 +103,7 @@ const sortingType = urlParams.get("sort_by") || "top";
                         >
                             <ResourceDetailedRatings :review-summary="props.resource.review_summary || {}" />
                             <div
-                                class="text-xs m-6 text-gray-500 text-right min-w-[160px] shrink-0"
+                                class="text-xs m-6 text-gray-500 dark:text-gray-400 text-right min-w-[160px] shrink-0"
                             >
                                 <UserProfile
                                     :user="resource.user"
@@ -115,14 +115,14 @@ const sortingType = urlParams.get("sort_by") || "top";
                 </div>
 
                 <!-- Custom Tab Navigation -->
-                <div class="flex border-b mb-4 space-x-6 px-6">
+                <div class="flex border-b dark:border-primary/20 mb-4 space-x-6 px-6">
                     <div
                         v-for="tab in tabs"
                         :class="[
                             'py-2 border-b-2 font-medium transition-all duration-200',
                             props.tab === tab.value
-                                ? 'border-primary text-primary'
-                                : 'border-transparent text-gray-600',
+                                ? 'border-primary text-primary dark:text-primaryLight'
+                                : 'border-transparent text-gray-600 dark:text-gray-400',
                         ]"
                     >
                         <Link
diff --git a/resources/js/Pages/Resources/theming.config.js b/resources/js/Pages/Resources/theming.config.js
new file mode 100644
index 00000000..009963f8
--- /dev/null
+++ b/resources/js/Pages/Resources/theming.config.js
@@ -0,0 +1,25 @@
+import { definePreset } from "@primevue/themes";
+import Aura from "@primevue/themes/aura";
+
+const customTheme = definePreset(Aura, {
+    font: {
+        family: "Open Sans",
+    },
+    semantic: {
+        primary: {
+            50: "{orange.50}",
+            100: "{orange.100}",
+            200: "{orange.200}",
+            300: "{orange.300}",
+            400: "{orange.400}",
+            500: "{orange.500}",
+            600: "{orange.600}",
+            700: "{orange.700}",
+            800: "{orange.800}",
+            900: "{orange.900}",
+            950: "{orange.950}",
+        },
+    }
+});
+
+export default customTheme;
diff --git a/resources/js/app.js b/resources/js/app.js
index 9bc6158b..7d9374f9 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -26,7 +26,10 @@ createInertiaApp({
             .use(ZiggyVue)
             .use(PrimeVue, {
                 theme: {
-                    preset: customTheme
+                    preset: customTheme,
+                    options: {
+                        darkModeSelector: '.my-app-dark',
+                    }
                 },
             })
             .use(ToastService)
diff --git a/tailwind.config.js b/tailwind.config.js
index b253218a..e5ca4ef1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ import typography from '@tailwindcss/typography';
 
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: 'class',
     content: [
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './vendor/laravel/jetstream/**/*.blade.php',
@@ -20,6 +21,7 @@ export default {
             colors: {
                 primary: "#fa6600", // Orange
                 primaryDark: "#c2410c", // Darker orange
+                primaryLight: "#ffcf9e",
                 secondary: "#fff3e3", // Light peach
                 secondaryDark: "#fcdcbb", // Soft apricot
                 background: "#fef9c3", // Warm cream
diff --git a/theming.config.js b/theming.config.js
index 351d98fb..29eb66ee 100644
--- a/theming.config.js
+++ b/theming.config.js
@@ -19,7 +19,7 @@ const customTheme = definePreset(Aura, {
             900: '{orange.900}',
             950: '{orange.950}'
         }
-    }
+    },
 });
 
 export default customTheme;