diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b88b8bda..3a5bfec2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -82,6 +82,9 @@ jobs:
           ruby-version: .ruby-version
           bundler-cache: true
 
+      - name: Build Tailwind CSS
+        run: bin/rails tailwindcss:build
+
       - name: Run tests
         run: bin/rails db:test:prepare && bin/rspec
 
diff --git a/.gitignore b/.gitignore
index 2f127c9a..12846bc1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,6 @@ db/structure.sql
 # Ignore IDE config files
 .idea/
 .DS_Store
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/Gemfile b/Gemfile
index 7470d201..e921e372 100644
--- a/Gemfile
+++ b/Gemfile
@@ -31,6 +31,7 @@ gem "solid_cache"
 gem "solid_queue"
 gem "solid_queue_monitor", "~> 0.3.2"
 gem "stimulus-rails"
+gem "tailwindcss-rails"
 gem "thruster", require: false
 gem "turbo-rails"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 1a7b82f1..2b3730e6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -553,6 +553,16 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.7)
+    tailwindcss-rails (4.3.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.1.11)
+    tailwindcss-ruby (4.1.11-aarch64-linux-gnu)
+    tailwindcss-ruby (4.1.11-aarch64-linux-musl)
+    tailwindcss-ruby (4.1.11-arm64-darwin)
+    tailwindcss-ruby (4.1.11-x86_64-darwin)
+    tailwindcss-ruby (4.1.11-x86_64-linux-gnu)
+    tailwindcss-ruby (4.1.11-x86_64-linux-musl)
     thor (1.4.0)
     thruster (0.1.16)
     thruster (0.1.16-aarch64-linux)
@@ -646,6 +656,7 @@ DEPENDENCIES
   solid_queue
   solid_queue_monitor (~> 0.3.2)
   stimulus-rails
+  tailwindcss-rails
   thruster
   turbo-rails
   tzinfo-data
diff --git a/Procfile.dev b/Procfile.dev
index 1abd8acc..e27fa6fb 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1,3 @@
 web: bin/rails server -p 3000
 worker: bin/jobs -c config/queue.yml
+css: bin/rails tailwindcss:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
new file mode 100644
index 00000000..e69de29b
diff --git a/app/assets/images/skill.svg b/app/assets/images/skill.svg
new file mode 100644
index 00000000..6a83a512
--- /dev/null
+++ b/app/assets/images/skill.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="708" height="378">
+<path d="M0 0 C1.00498535 0.00161133 2.0099707 0.00322266 3.04541016 0.00488281 C15.07751701 0.20071414 26.20619741 2.80183733 36.9375 8.375 C37.77152344 8.75914063 38.60554688 9.14328125 39.46484375 9.5390625 C54.06979492 16.70533696 65.72678774 29.74121024 73.1875 44 C73.66376831 44.88510254 73.66376831 44.88510254 74.1496582 45.78808594 C80.9406259 59.50930492 81.52427664 73.79649511 81.45507812 88.75585938 C81.46051174 90.75194303 81.46764128 92.74802266 81.47631836 94.74409485 C81.49440734 100.11811908 81.48754429 105.4918329 81.47480202 110.86586189 C81.464599 116.5184519 81.47408781 122.17101723 81.48034668 127.8236084 C81.48760197 137.31197834 81.47809119 146.8002233 81.45898438 156.28857422 C81.43721982 167.22227225 81.44427269 178.15567181 81.46629 189.08936262 C81.48450457 198.51578541 81.48697281 207.94211891 81.47653532 217.36855364 C81.47033359 222.98148514 81.46937256 228.59427685 81.48268127 234.2071991 C81.49432773 239.48683165 81.48605503 244.7660834 81.46310425 250.04567528 C81.45786378 251.97080545 81.45924977 253.89596827 81.46815491 255.82108498 C81.57411639 281.07721917 74.65570263 302.71002319 56.9375 321.375 C37.5111732 338.99726685 15.6900123 344.58063331 -10.0625 343.375 C-26.0673527 341.60030118 -40.09457464 333.75171605 -52.0625 323.375 C-52.73667969 322.80136719 -53.41085938 322.22773438 -54.10546875 321.63671875 C-68.59806172 308.27169594 -76.67740072 288.56237872 -79.0625 269.375 C-79.15721686 266.62053102 -79.21035921 263.89135502 -79.20967102 261.13749695 C-79.21334771 260.33567279 -79.2170244 259.53384863 -79.2208125 258.70772678 C-79.2317783 256.03520639 -79.2356811 253.36272499 -79.23950195 250.69018555 C-79.2457722 248.76764301 -79.25241949 246.84510168 -79.25941467 244.92256165 C-79.28039877 238.61895583 -79.29081494 232.31534995 -79.30078125 226.01171875 C-79.30483156 223.83438416 -79.30894856 221.65704969 -79.31313133 219.47971535 C-79.33217422 209.24308401 -79.34640456 199.00645982 -79.3547433 188.76981419 C-79.36449872 176.99124382 -79.39077778 165.21286223 -79.43124419 153.4343583 C-79.46151505 144.3070459 -79.47622272 135.17978726 -79.47952431 126.05242568 C-79.48186316 120.61252404 -79.49067009 115.17282426 -79.51598549 109.73297691 C-79.53946255 104.60534412 -79.54342145 99.47804326 -79.53322411 94.35037041 C-79.5327333 92.48250975 -79.538917 90.61463164 -79.55278015 88.74682236 C-79.65705848 73.84682032 -78.65906947 58.12985605 -71.25 44.8125 C-70.90453125 44.15886475 -70.5590625 43.50522949 -70.203125 42.83178711 C-67.34267208 37.56208367 -64.02357067 32.87940337 -60.0625 28.375 C-59.45921875 27.62992188 -58.8559375 26.88484375 -58.234375 26.1171875 C-43.93467413 8.96917222 -22.04555227 -0.03705758 0 0 Z M-9.0625 73.375 C-10.49554064 76.24108129 -10.36894155 78.18800783 -10.0625 81.375 C-8.56237532 83.9397293 -7.17066535 86.26683465 -5.0625 88.375 C-4.93880675 90.3685143 -4.8845361 92.3663647 -4.85717773 94.36352539 C-4.83723251 95.64477798 -4.81728729 96.92603058 -4.79673767 98.24610901 C-4.77975203 99.65495684 -4.76287327 101.06380595 -4.74609375 102.47265625 C-4.72553085 103.90612905 -4.70453456 105.33959569 -4.68312073 106.77305603 C-4.62783141 110.5525312 -4.57845255 114.3320617 -4.53027344 118.1116333 C-4.48010835 121.96574855 -4.42439629 125.81978309 -4.36914062 129.67382812 C-4.26147521 137.24081714 -4.16004903 144.8078731 -4.0625 152.375 C-1.72955225 152.41741723 0.60452567 152.41592937 2.9375 152.375 C4.51739117 150.79510883 4.09368628 149.17902804 4.12695312 146.9855957 C4.14367065 146.04984207 4.16038818 145.11408844 4.1776123 144.14997864 C4.19118774 143.1272435 4.20476318 142.10450836 4.21875 141.05078125 C4.23715942 139.99779343 4.25556885 138.9448056 4.27453613 137.85990906 C4.3334841 134.46916493 4.38609048 131.07836625 4.4375 127.6875 C4.56808406 119.24896265 4.72013904 110.81179052 4.9375 102.375 C4.96481201 101.18484283 4.96481201 101.18484283 4.99267578 99.97064209 C5.04583365 97.99402914 5.13067151 96.01833371 5.21875 94.04296875 C5.26064453 93.01840576 5.30253906 91.99384277 5.34570312 90.93823242 C6.08924433 87.71775425 7.50820402 86.5400422 9.9375 84.375 C11.31120703 80.17881294 11.41498378 76.49708689 9.6875 72.4375 C7.66852355 70.05799204 5.98353137 68.56109172 2.8515625 68.00390625 C-2.89510958 67.83719392 -5.4002278 68.56826774 -9.0625 73.375 Z M21.8125 79.6875 C20.0237862 82.25132311 19.21126373 84.26754779 18.1875 87.1875 C16.68712146 91.37884086 15.30005096 93.09542231 11.625 95.5625 C9.41007212 97.08508437 9.41007212 97.08508437 7.9375 99.375 C7.53709594 104.52152685 8.10101866 109.29729688 8.9375 114.375 C12.59143537 115.64323485 15.42820026 115.13215321 19.1875 114.4375 C20.80398437 114.14552734 20.80398437 114.14552734 22.453125 113.84765625 C23.27296875 113.69167969 24.0928125 113.53570312 24.9375 113.375 C24.9375 112.385 24.9375 111.395 24.9375 110.375 C24.2775 110.045 23.6175 109.715 22.9375 109.375 C23.91360229 109.39071045 23.91360229 109.39071045 24.90942383 109.40673828 C27.8562433 109.44829835 30.80300111 109.47432608 33.75 109.5 C35.28624023 109.52513672 35.28624023 109.52513672 36.85351562 109.55078125 C37.83642578 109.55722656 38.81933594 109.56367187 39.83203125 109.5703125 C40.73800049 109.58078613 41.64396973 109.59125977 42.57739258 109.60205078 C45.20686448 109.53665391 45.20686448 109.53665391 47.9375 107.375 C47.9375 106.385 47.9375 105.395 47.9375 104.375 C43.6475 103.055 39.3575 101.735 34.9375 100.375 C35.93652344 100.53484375 36.93554688 100.6946875 37.96484375 100.859375 C41.81496725 101.40565667 45.60888634 101.57710937 49.5 101.625 C51.38912109 101.66367188 51.38912109 101.66367188 53.31640625 101.703125 C58.11252831 101.26852494 61.46312637 99.84937363 64.875 96.4375 C66.18618935 93.89225008 65.740915 93.0290399 64.9375 90.375 C63.96067261 90.23783569 63.96067261 90.23783569 62.96411133 90.09790039 C55.42529751 88.90095599 48.70059074 86.62761561 41.625 83.8125 C39.54758314 82.99357997 37.46820823 82.17960619 35.38671875 81.37109375 C34.03066528 80.83246704 34.03066528 80.83246704 32.6472168 80.28295898 C27.11316364 78.24632429 27.11316364 78.24632429 21.8125 79.6875 Z M-39 82.6875 C-40.4050895 83.33455724 -41.81133327 83.97911419 -43.21875 84.62109375 C-43.88390625 84.92772949 -44.5490625 85.23436523 -45.234375 85.55029297 C-51.80093829 88.51261278 -57.90064677 89.80659895 -65.0625 90.375 C-64.79462125 94.30388829 -64.53812903 95.92376221 -61.625 98.6875 C-57.28136297 101.5479439 -53.96756779 101.55819521 -48.875 101.5625 C-47.7602832 101.58086914 -47.7602832 101.58086914 -46.62304688 101.59960938 C-41.72256261 101.61249408 -37.71130647 100.93281197 -33.0625 99.375 C-35.06113821 101.37363821 -38.43374204 101.69299755 -41.125 102.4375 C-41.78822266 102.62376953 -42.45144531 102.81003906 -43.13476562 103.00195312 C-44.776518 103.46258868 -46.41940581 103.91917387 -48.0625 104.375 C-47.7325 105.695 -47.4025 107.015 -47.0625 108.375 C-38.81013174 110.37607527 -31.47498481 110.36470409 -23.0625 109.375 C-23.3925 110.695 -23.7225 112.015 -24.0625 113.375 C-20.74705701 114.48014766 -17.85839889 114.69607631 -14.375 114.9375 C-13.19550781 115.02128906 -12.01601562 115.10507813 -10.80078125 115.19140625 C-9.44533203 115.28228516 -9.44533203 115.28228516 -8.0625 115.375 C-7.76283942 111.06083894 -7.55145368 106.77068438 -7.62109375 102.4453125 C-7.62939209 101.73391113 -7.63769043 101.02250977 -7.64624023 100.28955078 C-8.18629954 97.80559472 -9.16372344 97.03824503 -11.1875 95.5625 C-11.82300781 95.27117187 -12.45851562 94.97984375 -13.11328125 94.6796875 C-16.77095483 92.2314651 -18.04304099 87.92508564 -19.80078125 84.01953125 C-20.92017424 81.29485407 -20.92017424 81.29485407 -23.0625 79.375 C-29.319369 78.80252006 -33.42394627 79.971885 -39 82.6875 Z M-34 129.5 C-35.84569499 134.4942335 -36.16527278 139.52617033 -34.21875 144.5546875 C-30.84939012 150.40553539 -25.55310382 156.21146539 -19.0625 158.375 C-17.56573294 158.49159598 -16.06374939 158.54998959 -14.5625 158.5625 C-13.40234375 158.58376953 -13.40234375 158.58376953 -12.21875 158.60546875 C-9.76569944 158.51161528 -9.76569944 158.51161528 -7.0625 156.375 C-7.0625 155.715 -7.0625 155.055 -7.0625 154.375 C-7.87074219 153.99988281 -8.67898437 153.62476563 -9.51171875 153.23828125 C-21.17860177 147.65112497 -21.17860177 147.65112497 -24.0625 143.375 C-24.72218644 140.37088942 -24.98889632 137.44628091 -25.0625 134.375 C-24.08667969 134.47039062 -23.11085938 134.56578125 -22.10546875 134.6640625 C-20.19701172 134.83035156 -20.19701172 134.83035156 -18.25 135 C-16.98542969 135.11601562 -15.72085938 135.23203125 -14.41796875 135.3515625 C-10.92692059 135.68941804 -10.92692059 135.68941804 -8.0625 133.375 C-7.69952064 131.39752878 -7.69952064 131.39752878 -7.875 129.25 C-7.936875 127.97125 -7.99875 126.6925 -8.0625 125.375 C-17.63999151 122.0436986 -26.71137245 121.50602139 -34 129.5 Z M8.9375 126.375 C8.9375 128.685 8.9375 130.995 8.9375 133.375 C12.48144099 135.62634416 14.96095193 135.42625941 19.0625 134.9375 C24.74305556 134.27777778 24.74305556 134.27777778 26.9375 135.375 C27.3895856 139.17251908 27.13363 141.03877714 25.1875 144.375 C19.03822345 150.93422832 9.60646422 153.56833201 1.3125 156.375 C-8.18916419 159.60726536 -17.62042801 163.41825651 -23.0625 172.375 C-24.85456705 176.42315146 -25.16467085 179.54303736 -24.625 183.9375 C-22.10217115 189.48772347 -18.47793037 193.19193206 -13 195.875 C-9.73097717 196.43142942 -7.27381719 196.13959933 -4.0625 195.375 C-5.32347354 191.59207938 -6.9798636 191.29180249 -10.3359375 189.46875 C-12.92923575 187.82593663 -13.97708657 186.22421027 -15.0625 183.375 C-14.830844 179.59128535 -14.04750042 176.59582326 -12.0625 173.375 C-6.8479751 169.79618922 -0.54647856 167.73814994 5.3125 165.4375 C23.70242599 158.33235415 23.70242599 158.33235415 36.0546875 143.67578125 C37.51615111 139.86692254 37.53793274 137.4445997 36.9375 133.375 C34.53633576 128.57267151 31.79728996 125.67235525 26.9375 123.375 C20.23006937 122.47324573 14.885104 123.20294453 8.9375 126.375 Z M11.3125 166.875 C10.52875 167.7 9.745 168.525 8.9375 169.375 C9.700625 170.138125 10.46375 170.90125 11.25 171.6875 C12.136875 172.574375 13.02375 173.46125 13.9375 174.375 C14.865625 175.1175 14.865625 175.1175 15.8125 175.875 C16.9375 177.375 16.9375 177.375 16.875 179.75 C14.58010844 186.17569636 9.7809385 188.98177843 4.1875 192.25 C-4.68037991 197.62023795 -13.62118904 203.05106711 -17.0625 213.375 C-17.61135106 218.0987181 -17.52846728 221.47634882 -15.3125 225.75 C-12.53558623 229.00066754 -12.53558623 229.00066754 -9.0625 231.375 C-6.39488236 231.62624826 -6.39488236 231.62624826 -4.0625 231.375 C-4.0625 227.91949843 -4.81119276 226.9240651 -6.625 224.0625 C-8.41695102 220.94430274 -9.06930012 219.7354063 -9 216.0625 C-8.690625 215.175625 -8.38125 214.28875 -8.0625 213.375 C-7.73958984 212.41787109 -7.73958984 212.41787109 -7.41015625 211.44140625 C-5.45599242 208.44502171 -2.65409412 207.22800356 0.4375 205.625 C10.17092188 200.29803422 22.16045565 193.1953533 25.69140625 181.98046875 C26.24713761 178.45303705 26.18797967 176.04816412 24.9375 172.6875 C22.24086188 169.56951217 19.31975945 166.74665662 15.9375 164.375 C13.57471264 164.14511494 13.57471264 164.14511494 11.3125 166.875 Z M1.9375 169.375 C0.2875 170.035 -1.3625 170.695 -3.0625 171.375 C-3.0625 177.975 -3.0625 184.575 -3.0625 191.375 C0.98372502 191.74480013 0.98372502 191.74480013 3.9375 189.375 C4.35230107 187.34612689 4.35230107 187.34612689 4.23046875 185.0234375 C4.2159668 183.74726563 4.2159668 183.74726563 4.20117188 182.4453125 C4.17603516 181.55585938 4.15089844 180.66640625 4.125 179.75 C4.11146484 178.8528125 4.09792969 177.955625 4.08398438 177.03125 C4.04856925 174.81190211 3.99918461 172.59374812 3.9375 170.375 C3.2775 170.045 2.6175 169.715 1.9375 169.375 Z M8.25 205.875 C7.6003125 206.6175 7.6003125 206.6175 6.9375 207.375 C7.22625 207.9525 7.515 208.53 7.8125 209.125 C8.18375 209.8675 8.555 210.61 8.9375 211.375 C9.494375 212.303125 9.494375 212.303125 10.0625 213.25 C11.36160128 216.40496025 11.59306395 217.96606746 10.9375 221.375 C6.99809729 226.47785326 1.88809145 230.2548044 -3.30078125 233.99609375 C-6.26397796 236.31540293 -8.3879188 239.0258376 -10.0625 242.375 C-10.1314472 243.74842831 -10.14717708 245.12502102 -10.125 246.5 C-10.104375 247.77875 -10.08375 249.0575 -10.0625 250.375 C-9.0725 250.375 -8.0825 250.375 -7.0625 250.375 C-6.629375 249.22 -6.19625 248.065 -5.75 246.875 C-3.25741254 241.845473 0.56125826 239.4234753 5.109375 236.31640625 C10.91732472 232.32945734 16.67748394 228.29629918 18.9375 221.375 C19.70335664 215.93741787 18.90158648 212.09558217 15.9375 207.375 C14.56243901 205.49609566 14.56243901 205.49609566 12.9375 204.375 C9.93490483 204.04281808 9.93490483 204.04281808 8.25 205.875 Z M-1.671875 209.43359375 C-3.77737698 212.37301646 -3.38616223 214.87593116 -3.3125 218.4375 C-3.29703125 219.68660156 -3.2815625 220.93570313 -3.265625 222.22265625 C-3.27398486 225.2760085 -3.27398486 225.2760085 -2.0625 227.375 C0.80474686 226.80155063 1.7989515 226.5135485 3.9375 224.375 C4.08257695 221.63014407 4.12402423 218.99019457 4.0625 216.25 C4.04896484 215.11884766 4.04896484 215.11884766 4.03515625 213.96484375 C4.0115687 212.10142746 3.97569719 210.23817407 3.9375 208.375 C3.6075 209.035 3.2775 209.695 2.9375 210.375 C2.6075 209.715 2.2775 209.055 1.9375 208.375 C-0.10506463 208.19181933 -0.10506463 208.19181933 -1.671875 209.43359375 Z M5.9375 238.375 C4.9475 239.86 4.9475 239.86 3.9375 241.375 C6.2475 244.675 8.5575 247.975 10.9375 251.375 C11.5975 251.045 12.2575 250.715 12.9375 250.375 C12.68087755 248.93489519 12.40659179 247.4979313 12.125 246.0625 C11.97417969 245.26199219 11.82335937 244.46148437 11.66796875 243.63671875 C10.85249244 241.11179476 10.01796329 239.99430266 7.9375 238.375 C7.2775 238.375 6.6175 238.375 5.9375 238.375 Z M-2.0625 244.375 C-5.36640011 253.76503188 -5.23200162 263.34107982 -1.0625 272.375 C1.41016765 272.03055119 1.41016765 272.03055119 3.9375 271.375 C7.30817681 264.63364637 5.18160328 251.67066737 3.9375 244.375 C3.6075 243.715 3.2775 243.055 2.9375 242.375 C0.61392489 242.19009993 0.61392489 242.19009993 -2.0625 244.375 Z " fill="#025789" transform="translate(123.0625,10.625)"/>
+<path d="M0 0 C0.89878876 -0.00945648 1.79757751 -0.01891296 2.72360229 -0.02865601 C3.69540436 -0.02258331 4.66720642 -0.01651062 5.66845703 -0.01025391 C6.67659454 -0.01312408 7.68473206 -0.01599426 8.72341919 -0.01895142 C10.8636328 -0.0209952 13.00386496 -0.01544347 15.14404297 -0.00292969 C18.37918461 0.01295244 21.61304477 -0.00268078 24.84814453 -0.02197266 C40.33128429 -0.03830666 55.07235944 0.17312818 67.36376953 10.82568359 C74.48142832 19.16351246 77.1354552 27.34388952 77.05126953 38.20068359 C77.04482422 39.0750708 77.03837891 39.94945801 77.03173828 40.8503418 C76.72609454 51.71979731 73.13421446 59.67083064 65.62158203 67.54052734 C62.7808974 70.07570439 59.97943106 71.74552286 56.55126953 73.38818359 C57.93125472 77.07577369 59.60491366 80.38169251 61.59814453 83.77490234 C62.19626953 84.79648437 62.79439453 85.81806641 63.41064453 86.87060547 C64.03455078 87.92828125 64.65845703 88.98595703 65.30126953 90.07568359 C65.90970703 91.11402344 66.51814453 92.15236328 67.14501953 93.22216797 C67.74830078 94.25019531 68.35158203 95.27822266 68.97314453 96.33740234 C69.56675781 97.35108887 70.16037109 98.36477539 70.77197266 99.40917969 C71.94463977 101.37252822 73.14606564 103.3190236 74.37744141 105.24609375 C74.93496094 106.12442871 75.49248047 107.00276367 76.06689453 107.90771484 C76.56995117 108.67833252 77.07300781 109.4489502 77.59130859 110.24291992 C78.72576165 112.77812822 78.52288214 113.8378815 77.55126953 116.38818359 C73.5108428 116.65051985 69.47260472 116.80968851 65.42626953 116.95068359 C63.71310547 117.06379883 63.71310547 117.06379883 61.96533203 117.17919922 C53.747484 117.39420106 53.747484 117.39420106 50.67797852 114.81274414 C49.04840875 112.42309237 47.81224038 109.99152917 46.55126953 107.38818359 C45.30763053 105.24027891 44.0530301 103.09869645 42.78955078 100.96240234 C41.47786557 98.66859448 40.16932049 96.37298839 38.86376953 94.07568359 C37.55049103 91.76526854 36.23351352 89.45709094 34.91455078 87.14990234 C34.34003174 86.13887451 33.7655127 85.12784668 33.17358398 84.08618164 C32.63822021 83.19584229 32.10285645 82.30550293 31.55126953 81.38818359 C31.09389404 80.62481689 30.63651855 79.8614502 30.1652832 79.07495117 C27.97724517 76.78828428 26.47835869 76.79998043 23.36376953 76.63818359 C22.0121875 76.55310547 22.0121875 76.55310547 20.63330078 76.46630859 C19.94623047 76.44052734 19.25916016 76.41474609 18.55126953 76.38818359 C18.55912476 78.15246704 18.55912476 78.15246704 18.56713867 79.95239258 C18.58518616 84.3002039 18.59670061 88.64801189 18.60620117 92.99584961 C18.61124197 94.88062089 18.61807451 96.76538824 18.62670898 98.65014648 C18.6387857 101.35319995 18.64450022 104.0562019 18.64892578 106.75927734 C18.65408707 107.60719345 18.65924835 108.45510956 18.66456604 109.32872009 C18.66476148 111.34889428 18.61333164 113.36896293 18.55126953 115.38818359 C17.55126953 116.38818359 17.55126953 116.38818359 15.23461914 116.50170898 C14.23438721 116.49647217 13.23415527 116.49123535 12.20361328 116.48583984 C11.12402344 116.48261719 10.04443359 116.47939453 8.93212891 116.47607422 C7.79582031 116.46769531 6.65951172 116.45931641 5.48876953 116.45068359 C4.34859375 116.44617188 3.20841797 116.44166016 2.03369141 116.43701172 C-0.79383398 116.42518107 -3.62125687 116.40869769 -6.44873047 116.38818359 C-7.63159713 114.02245027 -7.57951421 112.59291564 -7.58917236 109.95387268 C-7.59488251 109.02148773 -7.60059265 108.08910278 -7.60647583 107.12846375 C-7.60759369 106.10243546 -7.60871155 105.07640717 -7.60986328 104.01928711 C-7.61482819 102.9411676 -7.61979309 101.8630481 -7.62490845 100.7522583 C-7.63955402 97.17386241 -7.6463355 93.59551082 -7.65185547 90.01708984 C-7.65760423 87.53848773 -7.66336199 85.05988564 -7.66912842 82.58128357 C-7.67964474 77.38011466 -7.68548351 72.17896125 -7.68896484 66.9777832 C-7.69273423 61.62811156 -7.70683681 56.27857731 -7.72998047 50.92895508 C-7.7574471 44.48165806 -7.77036923 38.03449497 -7.77230072 31.58714104 C-7.77533561 29.12507959 -7.78339206 26.66301918 -7.7964859 24.20099068 C-7.81346896 20.7626594 -7.81168515 17.32483037 -7.80517578 13.88647461 C-7.81439056 12.86247055 -7.82360535 11.83846649 -7.83309937 10.78343201 C-7.82753021 9.84822723 -7.82196106 8.91302246 -7.81622314 7.94947815 C-7.8176897 7.136289 -7.81915627 6.32309984 -7.82066727 5.48526859 C-7.01938676 0.96742216 -4.20925318 0.01273203 0 0 Z M18.55126953 21.38818359 C18.55126953 32.27818359 18.55126953 43.16818359 18.55126953 54.38818359 C23.08984771 55.29589923 26.93576208 55.41719798 31.48876953 55.13818359 C32.1790625 55.11111328 32.86935547 55.08404297 33.58056641 55.05615234 C39.54879184 54.70541303 43.77578672 53.30762447 47.86376953 48.88818359 C51.33056232 43.75219428 51.03540579 38.38267067 50.55126953 32.38818359 C48.85715574 28.19748107 46.36170126 25.79041229 42.55126953 23.38818359 C34.82150521 20.41390471 26.76122996 21.38818359 18.55126953 21.38818359 Z " fill="#06598A" transform="translate(257.44873046875,199.61181640625)"/>
+<path d="M0 0 C1.61358398 -0.01836914 1.61358398 -0.01836914 3.25976562 -0.03710938 C4.28650391 -0.03904297 5.31324219 -0.04097656 6.37109375 -0.04296875 C7.79119751 -0.04913208 7.79119751 -0.04913208 9.23999023 -0.05541992 C11.5625 0.1875 11.5625 0.1875 13.5625 2.1875 C13.80300903 4.17434692 13.80300903 4.17434692 13.78955078 6.63720703 C13.78939972 7.55801056 13.78924866 8.47881409 13.78909302 9.42752075 C13.77877045 10.42339203 13.76844788 11.41926331 13.7578125 12.4453125 C13.7549826 13.46350067 13.75215271 14.48168884 13.74923706 15.5307312 C13.7380177 18.791439 13.71290996 22.05187484 13.6875 25.3125 C13.67747247 27.51952729 13.66834623 29.72655888 13.66015625 31.93359375 C13.63807268 37.35165572 13.60457795 42.76955843 13.5625 48.1875 C16.21929957 45.64096921 18.43840457 43.12153966 20.48046875 40.0625 C21.00809814 39.27939453 21.53572754 38.49628906 22.0793457 37.68945312 C22.90631958 36.45098633 22.90631958 36.45098633 23.75 35.1875 C28.1787711 28.63150435 32.69102794 22.20340436 37.4921875 15.9140625 C40.37640617 12.11560093 43.15361962 8.24230295 45.93359375 4.3671875 C47.5625 2.1875 47.5625 2.1875 49.5625 0.1875 C51.9609375 -0.07128906 51.9609375 -0.07128906 54.9375 -0.078125 C56.00484375 -0.08070312 57.0721875 -0.08328125 58.171875 -0.0859375 C59.29078125 -0.07820313 60.4096875 -0.07046875 61.5625 -0.0625 C62.68140625 -0.07023437 63.8003125 -0.07796875 64.953125 -0.0859375 C66.02046875 -0.08335938 67.0878125 -0.08078125 68.1875 -0.078125 C69.16976562 -0.07586914 70.15203125 -0.07361328 71.1640625 -0.07128906 C73.5625 0.1875 73.5625 0.1875 75.5625 2.1875 C75.30950128 6.21740816 72.63114131 9.1831824 70.3125 12.3125 C69.39843614 13.56770734 68.48437371 14.82291573 67.5703125 16.078125 C66.83796387 17.07682617 66.83796387 17.07682617 66.09082031 18.09570312 C64.52559384 20.23801309 62.97570261 22.39066616 61.4296875 24.546875 C60.89770752 25.28768311 60.36572754 26.02849121 59.81762695 26.79174805 C58.72911183 28.30803967 57.64171251 29.82513291 56.55541992 31.34301758 C53.77942715 35.19991331 50.95214852 38.99369246 47.99609375 42.71484375 C47.43003418 43.43623535 46.86397461 44.15762695 46.28076172 44.90087891 C45.20010879 46.2708957 44.10460373 47.62936349 42.99267578 48.97412109 C41.33420272 51.00316181 41.33420272 51.00316181 39.5625 54.1875 C40.555047 57.60646202 42.19402298 60.37189466 44.1953125 63.29296875 C44.99243652 64.46158447 44.99243652 64.46158447 45.80566406 65.65380859 C46.38541992 66.48992676 46.96517578 67.32604492 47.5625 68.1875 C48.17577148 69.0738916 48.78904297 69.9602832 49.42089844 70.87353516 C51.42080914 73.75298511 53.42847227 76.62690498 55.4375 79.5 C65.25003713 93.56798554 65.25003713 93.56798554 69.94140625 100.74609375 C71.05910631 102.42937698 72.21555136 104.08735209 73.40234375 105.72265625 C73.97082031 106.51542969 74.53929687 107.30820313 75.125 108.125 C75.86943359 109.12853516 75.86943359 109.12853516 76.62890625 110.15234375 C77.85940337 112.83472451 77.22422914 114.37536815 76.5625 117.1875 C72.18819036 117.39138352 67.81510535 117.51533606 63.4375 117.625 C61.58125 117.71297852 61.58125 117.71297852 59.6875 117.80273438 C50.72018215 117.97147423 50.72018215 117.97147423 47.47509766 115.77392578 C45.92303197 113.99192443 44.73184566 112.23724 43.5625 110.1875 C42.68464844 108.95 42.68464844 108.95 41.7890625 107.6875 C41.26054687 106.8625 40.73203125 106.0375 40.1875 105.1875 C35.34358356 97.78026591 30.2657901 90.54025309 25.19775391 83.28515625 C24.52921387 82.32738281 23.86067383 81.36960937 23.171875 80.3828125 C22.53958984 79.47821289 21.90730469 78.57361328 21.25585938 77.64160156 C19.86936712 75.63222726 18.52532136 73.60641364 17.203125 71.5546875 C15.77955675 69.09586951 15.77955675 69.09586951 13.5625 68.1875 C13.56472061 68.78662704 13.56694122 69.38575409 13.56922913 70.0030365 C13.59128165 76.21547858 13.60640646 82.42790962 13.61743164 88.64038086 C13.62247333 90.96167451 13.62930651 93.28296497 13.63793945 95.60424805 C13.65001225 98.93278795 13.65572979 102.26128602 13.66015625 105.58984375 C13.66531754 106.63462387 13.67047882 107.67940399 13.67579651 108.75584412 C13.67590981 110.19722496 13.67590981 110.19722496 13.67602539 111.66772461 C13.678246 112.51821884 13.68046661 113.36871307 13.68275452 114.24497986 C13.5625 116.1875 13.5625 116.1875 12.5625 117.1875 C10.79390807 117.28696453 9.02138549 117.31830217 7.25 117.3203125 C6.17492187 117.32160156 5.09984375 117.32289063 3.9921875 117.32421875 C2.86039062 117.32035156 1.72859375 117.31648438 0.5625 117.3125 C-0.56929688 117.31636719 -1.70109375 117.32023437 -2.8671875 117.32421875 C-3.94226563 117.32292969 -5.01734375 117.32164062 -6.125 117.3203125 C-7.11886719 117.31918457 -8.11273438 117.31805664 -9.13671875 117.31689453 C-11.4375 117.1875 -11.4375 117.1875 -12.4375 116.1875 C-12.53538264 114.69698732 -12.56381782 113.20185295 -12.56448364 111.70812988 C-12.56730347 110.74057266 -12.57012329 109.77301544 -12.57302856 108.77613831 C-12.57100433 107.7059697 -12.5689801 106.63580109 -12.56689453 105.53320312 C-12.56864685 104.41300278 -12.57039917 103.29280243 -12.57220459 102.13865662 C-12.57662577 98.41533891 -12.57368417 94.69206824 -12.5703125 90.96875 C-12.57098546 88.39424633 -12.57195542 85.81974271 -12.57321167 83.24523926 C-12.574689 77.84138325 -12.57262754 72.4375451 -12.56787109 67.03369141 C-12.5624285 60.77788528 -12.56419117 54.52211174 -12.5696975 48.2663064 C-12.57477434 42.2589895 -12.57424708 36.2516886 -12.57131577 30.24436951 C-12.57064623 27.68297827 -12.57147584 25.1215862 -12.57379532 22.56019592 C-12.57632027 18.98737347 -12.57248346 15.41461457 -12.56689453 11.84179688 C-12.56891876 10.77162827 -12.57094299 9.70145966 -12.57302856 8.59886169 C-12.57020874 7.63130447 -12.56738892 6.66374725 -12.56448364 5.66687012 C-12.56410662 4.82104118 -12.56372959 3.97521225 -12.56334114 3.10375214 C-12.22445342 -2.0566773 -3.85895227 0.00230385 0 0 Z " fill="#035688" transform="translate(355.4375,55.8125)"/>
+<path d="M0 0 C4.06212212 -0.14547545 8.12357287 -0.23413226 12.1875 -0.3125 C13.91323242 -0.3753418 13.91323242 -0.3753418 15.67382812 -0.43945312 C24.09662725 -0.56152268 24.09662725 -0.56152268 27.859375 1.77734375 C31.13036033 6.7017286 34.14541312 11.73375039 37.0625 16.875 C37.67416016 17.93847656 38.28582031 19.00195312 38.91601562 20.09765625 C43.33389562 27.78715549 43.33389562 27.78715549 45.25341797 31.28222656 C47.00087718 34.74081678 47.00087718 34.74081678 50 37 C50.39747437 35.94135742 50.39747437 35.94135742 50.80297852 34.86132812 C52.06635965 31.84137566 53.54662969 29.07108164 55.15234375 26.21875 C55.76400391 25.12949219 56.37566406 24.04023438 57.00585938 22.91796875 C57.64330078 21.79003906 58.28074219 20.66210938 58.9375 19.5 C59.57107422 18.37207031 60.20464844 17.24414062 60.85742188 16.08203125 C62.56364207 13.04994699 64.27090381 10.01909887 66 7 C66.50088135 6.09701172 67.0017627 5.19402344 67.51782227 4.26367188 C69 2 69 2 72 0 C74.40429688 -0.25878906 74.40429688 -0.25878906 77.21875 -0.265625 C78.23324219 -0.26820313 79.24773437 -0.27078125 80.29296875 -0.2734375 C81.35128906 -0.26570312 82.40960938 -0.25796875 83.5 -0.25 C84.55832031 -0.25773438 85.61664063 -0.26546875 86.70703125 -0.2734375 C88.22876953 -0.26957031 88.22876953 -0.26957031 89.78125 -0.265625 C91.1744043 -0.26224121 91.1744043 -0.26224121 92.59570312 -0.25878906 C95 0 95 0 98 2 C96.69886199 5.49222352 95.17122644 8.53100646 93.1640625 11.66796875 C92.60001709 12.55274902 92.03597168 13.4375293 91.45483398 14.34912109 C90.85098877 15.28578613 90.24714355 16.22245117 89.625 17.1875 C88.69312866 18.642771 88.69312866 18.642771 87.74243164 20.12744141 C83.23708178 27.14035076 78.65586783 34.10088777 73.99658203 41.01245117 C73.09779419 42.34691342 72.20400865 43.68476218 71.31591797 45.02636719 C70.40089356 46.39873403 69.46603004 47.75799488 68.51611328 49.10644531 C65.79311851 53.00154293 65.79311851 53.00154293 64.9140625 57.546875 C66.43528579 60.98330746 68.33265772 64.10772706 70.375 67.25 C70.82053223 67.94891357 71.26606445 68.64782715 71.72509766 69.36791992 C73.14142903 71.58430315 74.56922303 73.79291931 76 76 C76.89585557 77.38670439 77.79168929 78.77342288 78.6875 80.16015625 C79.58318489 81.5443669 80.47901878 82.92848114 81.375 84.3125 C81.82125732 85.00206787 82.26751465 85.69163574 82.72729492 86.40209961 C83.18209229 87.10471924 83.63688965 87.80733887 84.10546875 88.53125 C84.57001465 89.24925781 85.03456055 89.96726562 85.51318359 90.70703125 C86.55782088 92.31807121 87.60527311 93.92728769 88.65478516 95.53515625 C90.34102312 98.12210264 92.01515099 100.71655936 93.6875 103.3125 C94.21714355 104.11921143 94.74678711 104.92592285 95.29248047 105.75708008 C95.7773291 106.51400146 96.26217773 107.27092285 96.76171875 108.05078125 C97.19444092 108.71762939 97.62716309 109.38447754 98.07299805 110.0715332 C99 112 99 112 99 116 C94.62614201 116.26210888 90.25430191 116.42144886 85.875 116.5625 C84.6375 116.63791016 83.4 116.71332031 82.125 116.79101562 C73.24820227 117.00577686 73.24820227 117.00577686 70.09936523 114.46850586 C68.46767565 112.06896236 67.25688 109.61622304 66 107 C64.61555282 104.65430133 63.21654114 102.32253819 61.80078125 99.99609375 C61.05750557 98.75038506 60.31598564 97.50362718 59.57617188 96.25585938 C59.20419678 95.6296167 58.83222168 95.00337402 58.44897461 94.3581543 C57.68286794 93.06342579 56.91991032 91.76682942 56.15991211 90.46850586 C55.05009901 88.57579585 53.92679022 86.69170064 52.80078125 84.80859375 C52.14247314 83.69282959 51.48416504 82.57706543 50.8059082 81.42749023 C50.2099585 80.62641846 49.61400879 79.82534668 49 79 C48.01 79 47.02 79 46 79 C45.48953125 79.92296875 44.9790625 80.8459375 44.453125 81.796875 C39.9398517 89.91317275 35.30918921 97.95534768 30.5625 105.9375 C30.04268555 106.81954102 29.52287109 107.70158203 28.98730469 108.61035156 C28.4977832 109.42858398 28.00826172 110.24681641 27.50390625 111.08984375 C26.85143921 112.18607056 26.85143921 112.18607056 26.18579102 113.30444336 C25 115 25 115 23 116 C21.1136088 116.084915 19.22421485 116.107193 17.3359375 116.09765625 C15.65371094 116.09282227 15.65371094 116.09282227 13.9375 116.08789062 C12.761875 116.07951172 11.58625 116.07113281 10.375 116.0625 C9.19164062 116.05798828 8.00828125 116.05347656 6.7890625 116.04882812 C3.85932493 116.03701467 0.92968728 116.02054258 -2 116 C-2.1916949 111.1675643 -1.11767618 109.09672732 1.625 105.0625 C2.45302214 103.82241448 3.27975573 102.58146799 4.10546875 101.33984375 C4.5648584 100.65519043 5.02424805 99.97053711 5.49755859 99.26513672 C8.99630943 93.99028943 12.35569344 88.62394172 15.7409668 83.27587891 C18.51406062 78.89746893 21.29856955 74.53081811 24.15625 70.20703125 C24.6294165 69.4804834 25.10258301 68.75393555 25.59008789 68.00537109 C26.46288163 66.66589602 27.3468508 65.33361003 28.24389648 64.01025391 C29.91844888 61.41496237 31.00444716 59.58079851 30.98046875 56.44921875 C29.74045582 53.35165657 28.16717479 50.69127467 26.375 47.875 C25.72273438 46.84117187 25.07046875 45.80734375 24.3984375 44.7421875 C24.02807373 44.16509033 23.65770996 43.58799316 23.27612305 42.9934082 C22.33911999 41.52973306 21.40932189 40.06143901 20.48364258 38.59057617 C17.24831474 33.46123836 13.93403664 28.39584825 10.52734375 23.37890625 C9.38328022 21.68059989 8.24074681 19.98127611 7.09887695 18.28149414 C6.31375417 17.11940679 5.52323083 15.96095274 4.7277832 14.8059082 C3.56256299 13.11071981 2.41835653 11.40294913 1.27734375 9.69140625 C0.59921631 8.69310791 -0.07891113 7.69480957 -0.77758789 6.66625977 C-2 4 -2 4 -1.20483398 1.64428711 C-0.80723877 1.10167236 -0.40964355 0.55905762 0 0 Z " fill="#055889" transform="translate(344,200)"/>
+<path d="M0 0 C0.556875 0.50273438 1.11375 1.00546875 1.6875 1.5234375 C6.93403249 6.90113331 9.61204791 14.3044419 10.2265625 21.7421875 C10 24 10 24 8 26 C2.09626827 26.83825805 -4.14195358 27.39175155 -10 26 C-12.84919856 23.71308805 -14.36119938 21.50830867 -16.29296875 18.4296875 C-18.62733431 15.10708938 -20.76558083 14.21136818 -24.62890625 13.25390625 C-30.06428376 12.67186418 -35.7950362 13.30297679 -41 15 C-43.88025908 19.75242748 -43.3134226 25.02248526 -42.75 30.375 C-40.79008028 34.62149273 -32.7822917 36.08435155 -28.71484375 37.64453125 C-25.55382435 38.79792109 -22.38883528 39.86004122 -19.18457031 40.8815918 C-7.14057585 44.73159659 2.84400234 49.28475517 9.01953125 60.81640625 C12.87112975 69.39426905 12.18972339 82.08337143 9.03515625 90.828125 C4.81625986 99.67984724 -2.06775874 105.64133382 -11.0625 109.375 C-24.14645174 113.33680727 -41.59528675 113.03422045 -54 107 C-56.98962167 105.27100213 -59.49818222 103.37586815 -62 101 C-62.55300781 100.47535156 -63.10601562 99.95070313 -63.67578125 99.41015625 C-68.67244953 94.140717 -72.17640298 87.30186085 -72.3125 79.9375 C-72 77 -72 77 -71 76 C-64.2168926 75.04336393 -56.73355888 74.63198304 -50 76 C-47.04595128 78.32225795 -45.90847654 80.2479425 -44.23828125 83.57421875 C-43.08739898 86.316883 -43.08739898 86.316883 -39.8125 88.125 C-33.23712458 89.63410256 -26.88446087 89.96148696 -20.4375 87.8125 C-17.60424979 85.7057242 -16.33910613 84.27337055 -15 81 C-14.60564842 77.3193853 -14.70836741 74.78376258 -16 71.3125 C-21.69613642 64.72634227 -32.40816893 62.72359706 -40.42382812 60.17578125 C-51.78823953 56.3951752 -60.79248934 50.48855249 -67 40 C-70.45450427 31.4070754 -70.30472802 20.79857524 -67.4375 12 C-63.93609795 3.81777627 -58.02716042 -2.1961384 -50 -6 C-33.67530481 -12.22265096 -13.45153265 -12.23393702 0 0 Z " fill="#055889" transform="translate(317,64)"/>
+<path d="M0 0 C2.30664062 -0.35644531 2.30664062 -0.35644531 5.15625 -0.328125 C6.68958984 -0.32039063 6.68958984 -0.32039063 8.25390625 -0.3125 C9.32511719 -0.291875 10.39632812 -0.27125 11.5 -0.25 C12.57121094 -0.24484375 13.64242187 -0.2396875 14.74609375 -0.234375 C22.6915621 -0.15421895 22.6915621 -0.15421895 25 1 C25 32.02 25 63.04 25 95 C38.86 95 52.72 95 67 95 C67.66 95.33 68.32 95.66 69 96 C69.02888146 99.31248187 69.04675799 102.62493167 69.0625 105.9375 C69.07087891 106.88302734 69.07925781 107.82855469 69.08789062 108.80273438 C69.09111328 109.70185547 69.09433594 110.60097656 69.09765625 111.52734375 C69.10289307 112.35999756 69.10812988 113.19265137 69.11352539 114.05053711 C69 116 69 116 68 117 C65.89419586 117.1100096 63.78466694 117.14913223 61.67602539 117.16113281 C60.68576103 117.16858017 60.68576103 117.16858017 59.67549133 117.17617798 C57.4828692 117.19083106 55.29031938 117.19760645 53.09765625 117.203125 C51.57929989 117.20887348 50.06094357 117.21463124 48.54258728 117.22039795 C45.35561788 117.23091663 42.16867378 117.23675373 38.98168945 117.24023438 C34.89123007 117.2457237 30.80110281 117.26975707 26.71074772 117.29820633 C23.57355258 117.31679817 20.43643802 117.32203643 17.29919243 117.32357025 C15.790849 117.32660471 14.28250724 117.33465982 12.77421761 117.34775543 C10.66700846 117.36474622 8.56061834 117.36295357 6.45336914 117.35644531 C5.25281387 117.36009094 4.05225861 117.36373657 2.81532288 117.36749268 C1.88626633 117.24622009 0.95720978 117.12494751 0 117 C-2.1143115 113.82853275 -2.25059999 113.07101681 -2.25396729 109.44543457 C-2.25960693 108.51167496 -2.26524658 107.57791534 -2.27105713 106.61585999 C-2.26700867 105.59342697 -2.26296021 104.57099396 -2.25878906 103.51757812 C-2.2622937 102.43931259 -2.26579834 101.36104706 -2.26940918 100.25010681 C-2.27822945 96.67708953 -2.2723762 93.10426939 -2.265625 89.53125 C-2.26697156 87.05407676 -2.26891202 84.57690378 -2.27142334 82.09973145 C-2.27475341 76.23849364 -2.26774206 70.37732768 -2.2571218 64.51610041 C-2.24961239 59.83931779 -2.25226809 55.16261933 -2.26074219 50.48583984 C-2.27231536 44.04387465 -2.27416231 37.60199095 -2.26763153 31.16001892 C-2.26629471 28.7007597 -2.26794389 26.24149702 -2.27259064 23.78224182 C-2.27765383 20.34887433 -2.26994832 16.91576973 -2.25878906 13.48242188 C-2.26486176 11.94877235 -2.26486176 11.94877235 -2.27105713 10.38414001 C-2.26541748 9.4503804 -2.25977783 8.51662079 -2.25396729 7.55456543 C-2.25321323 6.74267509 -2.25245918 5.93078476 -2.25168228 5.09429169 C-2 3 -2 3 0 0 Z " fill="#065889" transform="translate(584,56)"/>
+<path d="M0 0 C1.02544922 -0.00128906 2.05089844 -0.00257812 3.10742188 -0.00390625 C4.72680664 0.00189453 4.72680664 0.00189453 6.37890625 0.0078125 C7.45462891 0.00394531 8.53035156 0.00007813 9.63867188 -0.00390625 C11.1787793 -0.00197266 11.1787793 -0.00197266 12.75 0 C13.69673584 0.00112793 14.64347168 0.00225586 15.61889648 0.00341797 C17.94140625 0.1328125 17.94140625 0.1328125 19.94140625 1.1328125 C19.94140625 32.1528125 19.94140625 63.1728125 19.94140625 95.1328125 C34.13140625 95.1328125 48.32140625 95.1328125 62.94140625 95.1328125 C64.94140625 97.1328125 64.94140625 97.1328125 65.18432617 99.08813477 C65.18021729 99.86729248 65.1761084 100.6464502 65.171875 101.44921875 C65.16994141 102.29548828 65.16800781 103.14175781 65.16601562 104.01367188 C65.15376953 104.89861328 65.14152344 105.78355469 65.12890625 106.6953125 C65.12793945 108.02852539 65.12793945 108.02852539 65.12695312 109.38867188 C65.08161722 115.99260153 65.08161722 115.99260153 63.94140625 117.1328125 C61.79940301 117.23233543 59.6540792 117.26080929 57.50976562 117.26220703 C56.50246147 117.26483551 56.50246147 117.26483551 55.47480774 117.26751709 C53.24489797 117.2719348 51.01506689 117.26899792 48.78515625 117.265625 C47.24198389 117.26629806 45.69881164 117.26726811 44.15563965 117.26852417 C40.91738885 117.27000103 37.67916558 117.26784697 34.44091797 117.26318359 C30.28098102 117.2574863 26.12110859 117.26076537 21.96117401 117.26675606 C18.77341217 117.27036199 15.58566574 117.26922294 12.39790344 117.26662827 C10.86363213 117.26595908 9.32935943 117.26678711 7.79508972 117.26910782 C5.65437084 117.27163488 3.51375783 117.26779304 1.37304688 117.26220703 C-0.45776428 117.26101364 -0.45776428 117.26101364 -2.32556152 117.25979614 C-5.05859375 117.1328125 -5.05859375 117.1328125 -6.05859375 116.1328125 C-6.15647639 114.64229982 -6.18491157 113.14716545 -6.18557739 111.65344238 C-6.18839722 110.68588516 -6.19121704 109.71832794 -6.19412231 108.72145081 C-6.19209808 107.6512822 -6.19007385 106.58111359 -6.18798828 105.47851562 C-6.1897406 104.35831528 -6.19149292 103.23811493 -6.19329834 102.08396912 C-6.19771952 98.36065141 -6.19477792 94.63738074 -6.19140625 90.9140625 C-6.19207921 88.33955883 -6.19304917 85.76505521 -6.19430542 83.19055176 C-6.19578275 77.78669575 -6.19372129 72.3828576 -6.18896484 66.97900391 C-6.18352225 60.72319778 -6.18528492 54.46742424 -6.19079125 48.2116189 C-6.19586809 42.204302 -6.19534083 36.1970011 -6.19240952 30.18968201 C-6.19173998 27.62829077 -6.19256959 25.0668987 -6.19488907 22.50550842 C-6.19741402 18.93268597 -6.19357721 15.35992707 -6.18798828 11.78710938 C-6.19001251 10.71694077 -6.19203674 9.64677216 -6.19412231 8.54417419 C-6.19130249 7.57661697 -6.18848267 6.60905975 -6.18557739 5.61218262 C-6.18520037 4.76635368 -6.18482334 3.92052475 -6.18443489 3.04906464 C-5.92673912 -0.87501038 -3.33788354 0.00398146 0 0 Z " fill="#025687" transform="translate(503.05859375,55.8671875)"/>
+<path d="M0 0 C1.53333984 -0.00386719 1.53333984 -0.00386719 3.09765625 -0.0078125 C4.16886719 -0.00007813 5.24007813 0.00765625 6.34375 0.015625 C7.95056641 0.00402344 7.95056641 0.00402344 9.58984375 -0.0078125 C10.61207031 -0.00523438 11.63429688 -0.00265625 12.6875 0 C13.62787109 0.00225586 14.56824219 0.00451172 15.53710938 0.00683594 C17.84375 0.265625 17.84375 0.265625 19.84375 2.265625 C20.09263897 4.28930759 20.09263897 4.28930759 20.09098816 6.82728577 C20.09518265 7.7878035 20.09937714 8.74832123 20.10369873 9.73794556 C20.09526947 11.32377945 20.09526947 11.32377945 20.08666992 12.94165039 C20.08856827 14.05224319 20.09046661 15.162836 20.09242249 16.30708313 C20.09613915 19.99255341 20.08541397 23.67782837 20.07421875 27.36328125 C20.07302743 29.91393511 20.07257369 32.46458941 20.0728302 35.01524353 C20.07126383 40.36606797 20.06320356 45.71682411 20.04956055 51.06762695 C20.0338266 57.26154126 20.0285627 63.45539353 20.0292961 69.64932638 C20.02990559 75.59951723 20.02470018 81.54969012 20.01650429 87.49987602 C20.01331099 90.03614619 20.01134868 92.5724182 20.01061058 95.10869026 C20.00845448 98.6454904 19.99972638 102.18221096 19.98901367 105.71899414 C19.98969345 107.30786438 19.98969345 107.30786438 19.99038696 108.92883301 C19.98612198 109.88653091 19.98185699 110.84422882 19.97746277 111.83094788 C19.97578692 112.66810365 19.97411108 113.50525942 19.97238445 114.36778355 C19.84375 116.265625 19.84375 116.265625 18.84375 117.265625 C17.00215977 117.36522121 15.15678033 117.39642911 13.3125 117.3984375 C12.19230469 117.39972656 11.07210938 117.40101563 9.91796875 117.40234375 C8.73847656 117.39847656 7.55898438 117.39460938 6.34375 117.390625 C4.57451172 117.39642578 4.57451172 117.39642578 2.76953125 117.40234375 C1.64933594 117.40105469 0.52914063 117.39976562 -0.625 117.3984375 C-1.66076172 117.39730957 -2.69652344 117.39618164 -3.76367188 117.39501953 C-6.15625 117.265625 -6.15625 117.265625 -7.15625 116.265625 C-7.25625925 114.7901129 -7.28700227 113.30984241 -7.28996277 111.83094788 C-7.29422775 110.87324997 -7.29849274 109.91555206 -7.30288696 108.92883301 C-7.30243378 107.86958618 -7.30198059 106.81033936 -7.30151367 105.71899414 C-7.30487228 104.61015366 -7.3082309 103.50131317 -7.31169128 102.35887146 C-7.3212341 98.67283017 -7.32314604 94.98683414 -7.32421875 91.30078125 C-7.32742894 88.75109335 -7.33079282 86.20140564 -7.33430481 83.65171814 C-7.34030438 78.29913837 -7.34218652 72.94657563 -7.34155273 67.59399414 C-7.34095179 61.40066677 -7.35150525 55.20742645 -7.3672964 49.01412112 C-7.38192782 43.06447481 -7.38554135 37.11485522 -7.38494301 31.16518974 C-7.38612723 28.62974123 -7.39057353 26.09429215 -7.39827538 23.55885506 C-7.40801938 20.01971233 -7.40521941 16.48079639 -7.39916992 12.94165039 C-7.40478943 11.8844278 -7.41040894 10.8272052 -7.41619873 9.73794556 C-7.41200424 8.77742783 -7.40780975 7.8169101 -7.40348816 6.82728577 C-7.40403293 5.98975297 -7.40457769 5.15222017 -7.40513897 4.28930759 C-6.84562998 -0.25998442 -3.8298374 0.00918741 0 0 Z " fill="#06588A" transform="translate(455.15625,55.734375)"/>
+<path d="M0 0 C0.66 2.64 1.32 5.28 2 8 C1.278125 7.46375 0.55625 6.9275 -0.1875 6.375 C-2.91346484 4.67792659 -2.91346484 4.67792659 -5.75 5.625 C-8.31074335 6.85790128 -8.31074335 6.85790128 -9 10 C-6.36 12.31 -3.72 14.62 -1 17 C-2.16704187 22.83520934 -4.18975 25.91407165 -8.86035156 29.38085938 C-10.91928503 30.72697039 -13.00656886 31.99977834 -15.125 33.25 C-16.5443332 34.10927199 -17.96360637 34.96864316 -19.3828125 35.828125 C-20.31697998 36.3835498 -20.31697998 36.3835498 -21.27001953 36.95019531 C-22.87381408 37.92342655 -24.43908252 38.95938835 -26 40 C-26.495 38.515 -26.495 38.515 -27 37 C-26.34 37 -25.68 37 -25 37 C-25 36.34 -25 35.68 -25 35 C-24.34 35 -23.68 35 -23 35 C-23.9497172 32.61561249 -23.9497172 32.61561249 -27.3125 31.25 C-31.09160374 29.14616905 -33.09599155 26.96668427 -35 23 C-34.91027934 18.6036876 -33.83647194 15.35219412 -31 12 C-23.25740724 7.05112628 -9.27025838 0 0 0 Z M-17 9 C-18.65 9.66 -20.3 10.32 -22 11 C-22 17.6 -22 24.2 -22 31 C-17.95377498 31.36980013 -17.95377498 31.36980013 -15 29 C-14.58519893 26.97112689 -14.58519893 26.97112689 -14.70703125 24.6484375 C-14.7215332 23.37226563 -14.7215332 23.37226563 -14.73632812 22.0703125 C-14.76146484 21.18085938 -14.78660156 20.29140625 -14.8125 19.375 C-14.82603516 18.4778125 -14.83957031 17.580625 -14.85351562 16.65625 C-14.88893075 14.43690211 -14.93831539 12.21874812 -15 10 C-15.66 9.67 -16.32 9.34 -17 9 Z " fill="#0B5585" transform="translate(142,171)"/>
+<path d="M0 0 C1.32 1.32 2.64 2.64 4 4 C3.67 4.66 3.34 5.32 3 6 C2.34 6 1.68 6 1 6 C1.639375 6.639375 2.27875 7.27875 2.9375 7.9375 C5.19392433 11.28794824 6.17837824 13.58186059 6.5 17.58203125 C5.44639586 22.677195 0.96094052 25.94367885 -3 29 C-5.30078125 30.25390625 -5.30078125 30.25390625 -7 31 C-7.33 29.68 -7.66 28.36 -8 27 C-7.18144531 26.48953125 -6.36289063 25.9790625 -5.51953125 25.453125 C-2.66560323 23.17483431 -2.66560323 23.17483431 -2.51171875 19.546875 C-2.56972656 18.29390625 -2.62773438 17.0409375 -2.6875 15.75 C-2.73261719 14.48671875 -2.77773437 13.2234375 -2.82421875 11.921875 C-2.88222656 10.95765625 -2.94023438 9.9934375 -3 9 C-3.99 8.67 -4.98 8.34 -6 8 C-8.41121859 9.95633975 -8.41121859 9.95633975 -8.125 13.625 C-8.09306032 15.08357879 -8.05098033 16.54196254 -8 18 C-7.90588373 20.6917254 -7.90696344 23.30193973 -8 26 C-8.66 26.66 -9.32 27.32 -10 28 C-16.1089026 19.11842205 -16.1089026 19.11842205 -16 14 C-13.32330984 6.25168638 -6.98736083 3.61453099 0 0 Z " fill="#115A88" transform="translate(129,212)"/>
+<path d="M0 0 C0.33 7.26 0.66 14.52 1 22 C-4.50252554 22 -5.24627692 21.65494089 -9 18 C-11.30583279 15.07927847 -12.03097143 13.74331441 -11.875 10 C-9.8597927 3.09071783 -7.51112731 0 0 0 Z " fill="#055486" transform="translate(119,181)"/>
+<path d="M0 0 C0 11.88 0 23.76 0 36 C-0.33 36 -0.66 36 -1 36 C-1.33 30.06 -1.66 24.12 -2 18 C-2.99 18 -3.98 18 -5 18 C-4.67 15.36 -4.34 12.72 -4 10 C-5.0725 9.9175 -6.145 9.835 -7.25 9.75 C-11.2712975 8.9457405 -12.70098139 8.35273547 -15 5 C-14.59375 2.86328125 -14.59375 2.86328125 -14 1 C-12.22932584 0.83165067 -10.45845388 0.66538091 -8.6875 0.5 C-7.70136719 0.4071875 -6.71523437 0.314375 -5.69921875 0.21875 C-3 0 -3 0 0 0 Z " fill="#155F8D" transform="translate(119,126)"/>
+<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C-2.5 6.875 -2.5 6.875 -7 8 C-5.68 10.64 -4.36 13.28 -3 16 C-4.32 16 -5.64 16 -7 16 C-7 17.98 -7 19.96 -7 22 C-7.33 22 -7.66 22 -8 22 C-8.33 18.04 -8.66 14.08 -9 10 C-10.65 10.66 -12.3 11.32 -14 12 C-14.33 14.64 -14.66 17.28 -15 20 C-15.99 19.67 -16.98 19.34 -18 19 C-18.46149258 15.12346234 -18.21903482 13.35045571 -16.125 10 C-11.87939642 5.3761961 -5.91514845 1.97171615 0 0 Z " fill="#185482" transform="translate(135,243)"/>
+<path d="M0 0 C1.32 0.66 2.64 1.32 4 2 C3.34 2 2.68 2 2 2 C1.67 3.65 1.34 5.3 1 7 C0.01 7 -0.98 7 -2 7 C-2 12.94 -2 18.88 -2 25 C-2.33 25 -2.66 25 -3 25 C-3.33 19.06 -3.66 13.12 -4 7 C-5.98 7.33 -7.96 7.66 -10 8 C-10 13.94 -10 19.88 -10 26 C-10.33 26 -10.66 26 -11 26 C-11 19.73 -11 13.46 -11 7 C-11.99 6.67 -12.98 6.34 -14 6 C-13.07316406 5.65066406 -12.14632812 5.30132812 -11.19140625 4.94140625 C-9.99386719 4.48636719 -8.79632813 4.03132812 -7.5625 3.5625 C-6.36753906 3.11003906 -5.17257813 2.65757812 -3.94140625 2.19140625 C-1.15554277 1.2855174 -1.15554277 1.2855174 0 0 Z " fill="#31729A" transform="translate(130,174)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1.33 1.65 1.66 3.3 2 5 C2.99 5.33 3.98 5.66 5 6 C4.01 7.485 4.01 7.485 3 9 C2.85778935 11.60245498 2.81197068 14.09117684 2.875 16.6875 C2.88853516 17.7403418 2.88853516 17.7403418 2.90234375 18.81445312 C2.92586296 20.54311525 2.96173287 22.27160145 3 24 C3.99 24.33 4.98 24.66 6 25 C4.02 25 2.04 25 0 25 C0 24.34 0 23.68 0 23 C-0.66 22.67 -1.32 22.34 -2 22 C-2.02688151 20.35425434 -2.04634123 18.70838587 -2.0625 17.0625 C-2.07410156 16.14597656 -2.08570312 15.22945312 -2.09765625 14.28515625 C-2 12 -2 12 -1 11 C-0.76636119 9.15108054 -0.58696365 7.29511969 -0.4375 5.4375 C-0.35371094 4.42558594 -0.26992187 3.41367188 -0.18359375 2.37109375 C-0.12300781 1.58863281 -0.06242188 0.80617188 0 0 Z " fill="#1E5E8C" transform="translate(129,101)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1.85198485 16.12426645 2.23235657 31.89133918 1 48 C1.66 48.33 2.32 48.66 3 49 C2.34 49 1.68 49 1 49 C1.144375 50.27875 1.28875 51.5575 1.4375 52.875 C1.51871094 53.59429687 1.59992188 54.31359375 1.68359375 55.0546875 C1.91292961 57.07404316 1.91292961 57.07404316 3 59 C1.515 59.495 1.515 59.495 0 60 C-1.32637487 57.34725027 -1.07956818 55.4178334 -1.02172852 52.44873047 C-1.00163223 51.28767792 -0.98153595 50.12662537 -0.96083069 48.9303894 C-0.93379562 47.67203278 -0.90676056 46.41367615 -0.87890625 45.1171875 C-0.85529526 43.83264679 -0.83168427 42.54810608 -0.80735779 41.22463989 C-0.74450505 37.80835149 -0.67544189 34.39221559 -0.60510254 30.97607422 C-0.53442976 27.49063059 -0.46960649 24.00507877 -0.40429688 20.51953125 C-0.27526927 13.6795699 -0.13968312 6.83975181 0 0 Z " fill="#066093" transform="translate(344,113)"/>
+<path d="M0 0 C1.32 1.32 2.64 2.64 4 4 C2.6875 5.5 2.6875 5.5 1 7 C0.01 7 -0.98 7 -2 7 C-2.33 7.66 -2.66 8.32 -3 9 C-3.99 8.67 -4.98 8.34 -6 8 C-6.99 8.66 -7.98 9.32 -9 10 C-9 9.34 -9 8.68 -9 8 C-9.99 7.67 -10.98 7.34 -12 7 C-8.04 4.69 -4.08 2.38 0 0 Z " fill="#26618C" transform="translate(129,212)"/>
+<path d="M0 0 C1.67542976 0.28604898 3.34385343 0.61781233 5 1 C2.71035107 3.44375992 0.27347809 5.31540229 -2.5 7.1875 C-3.2734375 7.71730469 -4.046875 8.24710938 -4.84375 8.79296875 C-7 10 -7 10 -10 10 C-10 9.34 -10 8.68 -10 8 C-9.34 8 -8.68 8 -8 8 C-8 7.34 -8 6.68 -8 6 C-7.34 6 -6.68 6 -6 6 C-6.33 5.01 -6.66 4.02 -7 3 C-5.5459375 2.5359375 -5.5459375 2.5359375 -4.0625 2.0625 C-1.15934208 1.30476658 -1.15934208 1.30476658 0 0 Z " fill="#235C88" transform="translate(125,200)"/>
+<path d="M0 0 C0.99 0 1.98 0 3 0 C3 5.61 3 11.22 3 17 C2.34 17 1.68 17 1 17 C-0.06546953 13.8035914 -0.07427838 11.34252724 0 8 C-0.66 7.67 -1.32 7.34 -2 7 C-1.34 4.69 -0.68 2.38 0 0 Z " fill="#0E5584" transform="translate(117,220)"/>
+<path d="M0 0 C10.395 0.99 10.395 0.99 21 2 C20.67 2.66 20.34 3.32 20 4 C19.01 4.33 18.02 4.66 17 5 C16.34 5.66 15.68 6.32 15 7 C15 6.34 15 5.68 15 5 C14.33613281 4.87882812 13.67226562 4.75765625 12.98828125 4.6328125 C8.46575541 3.77452292 4.20061476 2.96028689 0 1 C0 0.67 0 0.34 0 0 Z " fill="#305E85" transform="translate(156,110)"/>
+<path d="M0 0 C0.8353125 0.556875 0.8353125 0.556875 1.6875 1.125 C-1.3125 3.125 -1.3125 3.125 -3.3125 3.125 C-3.3125 9.065 -3.3125 15.005 -3.3125 21.125 C-3.6425 21.125 -3.9725 21.125 -4.3125 21.125 C-4.3125 14.855 -4.3125 8.585 -4.3125 2.125 C-5.3025 1.795 -6.2925 1.465 -7.3125 1.125 C-2.88173077 -1.09038462 -2.88173077 -1.09038462 0 0 Z " fill="#3E7194" transform="translate(123.3125,178.875)"/>
+<path d="M0 0 C3.375 0.6875 3.375 0.6875 7 2 C8.4375 4.625 8.4375 4.625 9 7 C5 7 5 7 2.25 4.625 C0 2 0 2 0 0 Z " fill="#165C89" transform="translate(106,100)"/>
+<path d="M0 0 C0.66 1.32 1.32 2.64 2 4 C4.53770003 5.28254644 4.53770003 5.28254644 7 6 C6.34 6.66 5.68 7.32 5 8 C3.68 8 2.36 8 1 8 C1 11.63 1 15.26 1 19 C0.67 19 0.34 19 0 19 C0 12.73 0 6.46 0 0 Z " fill="#0D5F90" transform="translate(129,139)"/>
+<path d="M0 0 C1.65 1.65 3.3 3.3 5 5 C4.67 5.66 4.34 6.32 4 7 C3.34 6.34 2.68 5.68 2 5 C0.18884044 6.81115956 0.61800552 9.61278227 0.4375 12.0625 C0.35371094 13.16722656 0.26992187 14.27195313 0.18359375 15.41015625 C0.12300781 16.26480469 0.06242188 17.11945313 0 18 C-0.33 18 -0.66 18 -1 18 C-1.02684312 15.18743719 -1.04676188 12.37512759 -1.0625 9.5625 C-1.07087891 8.76005859 -1.07925781 7.95761719 -1.08789062 7.13085938 C-1.0965143 5.08704779 -1.0522815 3.04316098 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z " fill="#164C7A" transform="translate(128,217)"/>
+<path d="M0 0 C2 2 2 2 2 5 C1.01 5.33 0.02 5.66 -1 6 C-1.33 9.3 -1.66 12.6 -2 16 C-2.33 16 -2.66 16 -3 16 C-3.0810206 13.89646505 -3.13919907 11.79204048 -3.1875 9.6875 C-3.22230469 8.51574219 -3.25710937 7.34398438 -3.29296875 6.13671875 C-3 3 -3 3 -1.48828125 1.08203125 C-0.99714844 0.72496094 -0.50601563 0.36789063 0 0 Z " fill="#094778" transform="translate(131,96)"/>
+<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C1.8125 2.8125 1.8125 2.8125 1 5 C-1.5625 6.75 -1.5625 6.75 -4 8 C-4.33 6.68 -4.66 5.36 -5 4 C-3.35 2.68 -1.7 1.36 0 0 Z " fill="#205F8A" transform="translate(126,235)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1 1.98 1 3.96 1 6 C0.38125 6.268125 -0.2375 6.53625 -0.875 6.8125 C-3.2995233 7.95556848 -3.2995233 7.95556848 -5 11 C-5.66 10.67 -6.32 10.34 -7 10 C-5.85821872 8.33055479 -4.71147095 6.6645052 -3.5625 5 C-2.92441406 4.071875 -2.28632813 3.14375 -1.62890625 2.1875 C-1.09136719 1.465625 -0.55382812 0.74375 0 0 Z " fill="#1F5B87" transform="translate(386,81)"/>
+<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C0.35 2.98 -1.3 4.96 -3 7 C-3.33 6.34 -3.66 5.68 -4 5 C-4.99 4.67 -5.98 4.34 -7 4 C-4.61426621 2.10786631 -2.92824652 0.97608217 0 0 Z " fill="#175F8F" transform="translate(135,243)"/>
+<path d="M0 0 C1.32 0 2.64 0 4 0 C4.33 0.99 4.66 1.98 5 3 C2.36 3.66 -0.28 4.32 -3 5 C-1.125 1.125 -1.125 1.125 0 0 Z " fill="#1A5F8B" transform="translate(123,164)"/>
+<path d="M0 0 C0.598125 0.350625 1.19625 0.70125 1.8125 1.0625 C0.4925 2.7125 -0.8275 4.3625 -2.1875 6.0625 C-5.1875 2.3125 -5.1875 2.3125 -5.1875 0.0625 C-2.1875 -0.9375 -2.1875 -0.9375 0 0 Z " fill="#175C8A" transform="translate(160.1875,135.9375)"/>
+<path d="M0 0 C1.32 1.32 2.64 2.64 4 4 C3.01 4.99 2.02 5.98 1 7 C0.67 5.68 0.34 4.36 0 3 C-1.65 3.33 -3.3 3.66 -5 4 C-3.35 2.68 -1.7 1.36 0 0 Z " fill="#356A91" transform="translate(129,212)"/>
+<path d="M0 0 C1 2 1 2 0.51171875 3.91015625 C0.23972656 4.62042969 -0.03226562 5.33070313 -0.3125 6.0625 C-0.57675781 6.77535156 -0.84101562 7.48820313 -1.11328125 8.22265625 C-2 10 -2 10 -4 11 C-3.48964169 6.6109185 -2.47785723 3.66291938 0 0 Z " fill="#205C86" transform="translate(111,183)"/>
+<path d="M0 0 C0.99 0.33 1.98 0.66 3 1 C-0.60957611 4.2910841 -3.12637153 5.54663921 -8 6 C-5.38485683 3.87961365 -2.80362384 1.86908256 0 0 Z " fill="#1B5B87" transform="translate(152,163)"/>
+<path d="M0 0 C0.99 1.32 1.98 2.64 3 4 C1.68 4.33 0.36 4.66 -1 5 C-1 6.98 -1 8.96 -1 11 C-1.33 11 -1.66 11 -2 11 C-2.28571429 3.57142857 -2.28571429 3.57142857 0 0 Z " fill="#2E6992" transform="translate(129,254)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1.33 3.63 1.66 7.26 2 11 C1.34 11 0.68 11 0 11 C-0.66 8.03 -1.32 5.06 -2 2 C-1.34 2 -0.68 2 0 2 C0 1.34 0 0.68 0 0 Z " fill="#104B7A" transform="translate(112,252)"/>
+<path d="M0 0 C1.17539996 0.92652701 2.34010577 1.86663387 3.5 2.8125 C4.1496875 3.33457031 4.799375 3.85664063 5.46875 4.39453125 C7 6 7 6 7 9 C3.99234114 6.15063897 1.72154788 3.76488042 0 0 Z " fill="#245C88" transform="translate(99,197)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C0.67 5.28 0.34 10.56 0 16 C-0.33 16 -0.66 16 -1 16 C-2.0006709 10.03654233 -2.0662997 5.71271093 0 0 Z " fill="#206592" transform="translate(203,79)"/>
+<path d="M0 0 C0.66 0.66 1.32 1.32 2 2 C1.34 2.66 0.68 3.32 0 4 C-0.99 4 -1.98 4 -3 4 C-3.33 4.66 -3.66 5.32 -4 6 C-4.66 5.34 -5.32 4.68 -6 4 C-4.02 2.68 -2.04 1.36 0 0 Z " fill="#215F8B" transform="translate(138,206)"/>
+<path d="M0 0 C2.97 0.495 2.97 0.495 6 1 C5.67 1.99 5.34 2.98 5 4 C3.35 3.67 1.7 3.34 0 3 C0 2.01 0 1.02 0 0 Z " fill="#0C5685" transform="translate(124,177)"/>
+<path d="M0 0 C0.99 0.33 1.98 0.66 3 1 C0.03 3.475 0.03 3.475 -3 6 C-3.66 5.67 -4.32 5.34 -5 5 C-3.35 3.35 -1.7 1.7 0 0 Z " fill="#2D638C" transform="translate(71,30)"/>
+<path d="" fill="#8DA3B1" transform="translate(0,0)"/>
+<path d="M0 0 C0.99 0.495 0.99 0.495 2 1 C1.01 1.495 1.01 1.495 0 2 C0 1.34 0 0.68 0 0 Z " fill="#8399A8" transform="translate(121,222)"/>
+<path d="" fill="#728B9E" transform="translate(0,0)"/>
+<path d="" fill="#9AA8B4" transform="translate(0,0)"/>
+<path d="" fill="#909FA9" transform="translate(0,0)"/>
+<path d="" fill="#9BAAB5" transform="translate(0,0)"/>
+</svg>
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index fe93333c..f5c4d908 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -7,4 +7,6 @@
  * depending on specificity.
  *
  * Consider organizing styles into separate files for maintainability.
+ *
+ * Note: Tailwind CSS is loaded separately via stylesheet_link_tag in the layout.
  */
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
new file mode 100644
index 00000000..41e3d922
--- /dev/null
+++ b/app/assets/tailwind/application.css
@@ -0,0 +1,216 @@
+@import "tailwindcss";
+
+/* Tom Select Tailwind Styles */
+
+/* Hide the original select element */
+.ts-wrapper .ts-control + select,
+.ts-wrapper + select {
+  @apply hidden;
+}
+
+select[data-select-tags-target="tagList"] {
+  @apply hidden;
+}
+
+.ts-wrapper {
+  @apply relative;
+}
+
+.ts-wrapper.single .ts-control,
+.ts-wrapper.multi .ts-control {
+  @apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200;
+  min-height: 42px;
+}
+
+.ts-wrapper.multi .ts-control {
+  @apply flex flex-wrap items-center gap-1.5;
+  padding: 0.375rem 0.625rem;
+}
+
+.ts-wrapper .ts-control:focus-within {
+  @apply border-blue-500 outline-none ring-4 ring-blue-500/10;
+}
+
+.ts-wrapper.single .ts-control:hover:not(:focus-within),
+.ts-wrapper.multi .ts-control:hover:not(:focus-within) {
+  @apply border-gray-400 bg-gray-50;
+}
+
+.ts-wrapper .ts-control > input {
+  @apply flex-grow outline-none bg-transparent text-sm;
+  min-width: 60px;
+  padding: 0.25rem;
+}
+
+.ts-wrapper .ts-control > input::placeholder {
+  @apply text-gray-400;
+}
+
+/* Selected items (tags/badges) */
+.ts-wrapper.multi .ts-control > div {
+  @apply inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-500 text-white text-sm rounded-md;
+  max-width: 100%;
+}
+
+.ts-wrapper.multi .ts-control > div.active {
+  @apply bg-blue-600;
+}
+
+/* Remove button */
+.ts-wrapper .ts-control .remove {
+  @apply inline-flex items-center justify-center ml-1 text-white/80 hover:text-white cursor-pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.ts-wrapper .ts-control .remove:hover {
+  @apply text-white;
+}
+
+/* Dropdown */
+.ts-dropdown {
+  @apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.ts-dropdown .ts-dropdown-content {
+  @apply py-1;
+}
+
+/* Dropdown options */
+.ts-dropdown .option {
+  @apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-150;
+}
+
+.ts-dropdown .option:hover,
+.ts-dropdown .option.active {
+  @apply bg-blue-500 text-white;
+}
+
+.ts-dropdown .option.selected {
+  @apply hidden;
+}
+
+/* No results message */
+.ts-dropdown .no-results {
+  @apply px-3.5 py-2 text-sm text-gray-500 italic;
+}
+
+/* Loading state */
+.ts-wrapper.loading::after {
+  content: '';
+  @apply absolute right-3 top-1/2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
+  margin-top: -0.5rem;
+}
+
+/* Disabled state */
+.ts-wrapper.disabled .ts-control {
+  @apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
+}
+
+/* Single select caret */
+.ts-wrapper.single .ts-control::after {
+  content: '';
+  @apply absolute right-3 top-1/2 w-0 h-0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #6b7280;
+  margin-top: -2.5px;
+  pointer-events: none;
+}
+
+.ts-wrapper.single.input-active .ts-control::after {
+  border-top-color: #3b82f6;
+}
+
+/* Focus visible for accessibility */
+.ts-wrapper .ts-control:focus-visible {
+  @apply outline-none ring-4 ring-blue-500/10;
+}
+
+/* Form Styles */
+.form-label {
+  @apply block text-sm font-semibold text-gray-700 mb-2;
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+  @apply w-full px-4 py-3 border-2 border-gray-200 rounded-lg text-sm transition-all duration-200 bg-gray-50;
+}
+
+.form-select {
+  appearance: none;
+  padding-right: 2.5rem;
+}
+
+.form-textarea {
+  @apply resize-y;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  @apply outline-none border-blue-500 ring-4 ring-blue-500/10 bg-white;
+}
+
+.form-input:hover:not(:focus),
+.form-select:hover:not(:focus),
+.form-textarea:hover:not(:focus) {
+  @apply border-gray-300;
+}
+
+.form-required {
+  @apply text-red-500;
+}
+
+.form-help-text {
+  @apply mt-2 text-xs text-gray-500;
+}
+
+.form-grid {
+  @apply grid gap-6;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.form-grid-full {
+  grid-column: 1 / -1;
+}
+
+/* Alternative Input Styles (lighter borders, less padding) */
+.input-label {
+  @apply block text-sm font-semibold text-gray-700 mb-2;
+}
+
+.input-field {
+  @apply w-full border border-gray-300 rounded-lg text-sm transition-all duration-200 bg-white;
+  padding: 0.625rem 0.875rem;
+}
+
+.input-field:focus {
+  @apply outline-none border-blue-500 bg-white;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.input-field:hover:not(:focus) {
+  @apply border-gray-400;
+}
+
+.select-field {
+  @apply w-full border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200 cursor-pointer;
+  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+  appearance: none;
+}
+
+.select-field:focus {
+  @apply outline-none border-blue-500;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.select-field:hover:not(:focus) {
+  @apply border-gray-400;
+}
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb
index 8c5819dd..ede96c09 100644
--- a/app/controllers/tags_controller.rb
+++ b/app/controllers/tags_controller.rb
@@ -12,6 +12,21 @@ def index
   def show
   end
 
+  def new
+    @tag = Tag.new
+  end
+
+  def create
+    @tag = Tag.new(tag_params)
+
+    if @tag.save
+      SynchronizeCognatesOnTopicsJob.perform_later(@tag) if tag_params[:cognates_list].reject(&:empty?).any?
+      redirect_to tags_path, notice: "Tag was successfully created."
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
   def edit
   end
 
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 4ab08a35..d1a90275 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -2,16 +2,29 @@ class UsersController < ApplicationController
   include Pagy::Backend
 
   before_action :redirect_contributors
-  before_action :set_user, only: %i[ edit update destroy ]
+  before_action :set_user, only: %i[ show edit update destroy ]
 
   def index
-    @pagy, @users = pagy(User.all.search_with_params(user_search_params))
+    @pagy, @users = pagy(User.includes(:providers).search_with_params(user_search_params))
+
+    respond_to do |format|
+      format.html do
+        if turbo_frame_request?
+          render partial: "user_list"
+        else
+          render :index
+        end
+      end
+    end
   end
 
   def new
     @user = User.new
   end
 
+  def show
+  end
+
   def create
     @user = User.new(user_params)
 
@@ -48,7 +61,7 @@ def destroy
   private
 
   def set_user
-    @user = User.find(params.expect(:id))
+    @user = User.includes(:providers).find(params.expect(:id))
   end
 
   def user_params
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 716bfe3e..cfc8a987 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -8,4 +8,26 @@ def flash_class(level)
     else "alert-light-info"
     end
   end
+
+  def tailwind_flash_class(level)
+    case level
+    when "notice" then "bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 text-green-800 shadow-sm"
+    when "alert" then "bg-gradient-to-r from-red-50 to-rose-50 border border-red-200 text-red-800 shadow-sm"
+    when "warning" then "bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200 text-yellow-800 shadow-sm"
+    when "error" then "bg-gradient-to-r from-red-50 to-rose-50 border border-red-200 text-red-800 shadow-sm"
+    when "success" then "bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 text-green-800 shadow-sm"
+    when "info" then "bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 text-blue-800 shadow-sm"
+    else "bg-gradient-to-r from-gray-50 to-slate-50 border border-gray-200 text-gray-800 shadow-sm"
+    end
+  end
+
+  def nav_link_class(path)
+    base_style = "display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; border-radius: 0.5rem; transition: all 0.2s; font-weight: 500;"
+
+    if current_page?(path)
+      base_style + " background-color: #dbeafe; color: #1d4ed8;"
+    else
+      base_style + " color: #374151;"
+    end
+  end
 end
diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb
new file mode 100644
index 00000000..afd3cff7
--- /dev/null
+++ b/app/helpers/pagination_helper.rb
@@ -0,0 +1,90 @@
+module PaginationHelper
+  def custom_pagy_nav(pagy, params: {})
+    return "" unless pagy.pages > 1
+
+    content_tag :nav, 'aria-label': "Page navigation" do
+      content_tag :ul, class: "flex -space-x-px text-sm", style: "list-style: none; margin: 0; padding: 0;" do
+        safe_join([
+          prev_link(pagy, params),
+          page_links(pagy, params),
+          next_link(pagy, params),
+        ].compact.flatten)
+      end
+    end
+  end
+
+  private
+
+  def prev_link(pagy, extra_params)
+    content_tag :li, style: "list-style: none;" do
+      if pagy.prev
+        link_to "Previous", pagy_url_for(pagy, pagy.prev, **extra_params),
+                class: "flex items-center justify-center text-gray-700 bg-gray-100 border border-gray-300 hover:bg-blue-600 hover:text-white font-medium rounded-l-md text-sm px-3 h-10",
+                style: "box-sizing: border-box;",
+                'aria-label': "Go to previous page"
+      else
+        content_tag :span, "Previous",
+                    class: "flex items-center justify-center text-gray-400 bg-gray-50 border border-gray-300 font-medium rounded-l-md text-sm px-3 h-10 cursor-not-allowed",
+                    style: "box-sizing: border-box;"
+      end
+    end
+  end
+
+  def next_link(pagy, extra_params)
+    content_tag :li, style: "list-style: none;" do
+      if pagy.next
+        link_to "Next", pagy_url_for(pagy, pagy.next, **extra_params),
+                class: "flex items-center justify-center text-gray-700 bg-gray-100 border border-gray-300 hover:bg-blue-600 hover:text-white font-medium rounded-r-md text-sm px-3 h-10",
+                style: "box-sizing: border-box;",
+                'aria-label': "Go to next page"
+      else
+        content_tag :span, "Next",
+                    class: "flex items-center justify-center text-gray-400 bg-gray-50 border border-gray-300 font-medium rounded-r-md text-sm px-3 h-10 cursor-not-allowed",
+                    style: "box-sizing: border-box;"
+      end
+    end
+  end
+
+  def page_links(pagy, extra_params)
+    pagy.series.map do |item|
+      case item
+      when Integer
+        page_link(pagy, item, extra_params)
+      when String
+        # Handle page numbers that come as strings (like "1") or gaps
+        if item == "gap"
+          gap_element
+        else
+          # Convert string page number to integer
+          page_link(pagy, item.to_i, extra_params)
+        end
+      when :gap
+        gap_element
+      end
+    end
+  end
+
+  def page_link(pagy, page, extra_params)
+    content_tag :li, style: "list-style: none;" do
+      if page == pagy.page
+        content_tag :span, page,
+                    class: "flex items-center justify-center text-blue-600 bg-blue-50 border border-gray-300 font-semibold text-sm w-10 h-10",
+                    style: "box-sizing: border-box;",
+                    'aria-current': "page"
+      else
+        link_to page, pagy_url_for(pagy, page, **extra_params),
+                class: "flex items-center justify-center text-gray-700 bg-gray-100 border border-gray-300 hover:bg-blue-600 hover:text-white font-medium text-sm w-10 h-10",
+                style: "box-sizing: border-box;",
+                'aria-label': "Go to page #{page}"
+      end
+    end
+  end
+
+  def gap_element
+    content_tag :li, style: "list-style: none;" do
+      content_tag :span, "…",
+                  class: "flex items-center justify-center text-gray-700 bg-gray-100 border border-gray-300 font-medium text-sm w-10 h-10",
+                  style: "box-sizing: border-box;"
+    end
+  end
+end
diff --git a/app/javascript/controllers/select_tags_controller.js b/app/javascript/controllers/select_tags_controller.js
index 8f219f67..84d44f70 100644
--- a/app/javascript/controllers/select_tags_controller.js
+++ b/app/javascript/controllers/select_tags_controller.js
@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 import { get } from "@rails/request.js";
-import Tags from "bootstrap5-tags";
+import TomSelect from "tom-select";
 
 export default class extends Controller {
   static targets = ["tagList"];
@@ -9,6 +9,12 @@ export default class extends Controller {
     this.initializeTags();
   }
 
+  disconnect() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
+    }
+  }
+
   notify() {
     this.dispatch("notify", {
       detail: {
@@ -20,10 +26,39 @@ export default class extends Controller {
   }
 
   /**
-   * Initialize the tags input with given options
-   * @param {Object} options - Configuration options for bootstrap5-tags
+   * Initialize the tags input with Tom Select
+   * @param {Object} options - Configuration options for Tom Select
    */
-  initializeTags(options = {}, reset = false) {
-    Tags.init(`select#${this.tagListTarget.id}`, options, reset);
+  initializeTags(options = {}) {
+    const allowClear = this.tagListTarget.dataset.allowClear === "true";
+    const allowNew = this.tagListTarget.dataset.allowNew === "true";
+
+    const defaultOptions = {
+      plugins: {
+        remove_button: allowClear
+          ? {
+              title: "Remove this item",
+            }
+          : false,
+      },
+      create: allowNew,
+      maxOptions: null,
+      closeAfterSelect: false,
+      hideSelected: true,
+      onItemAdd: function () {
+        // Clear the input after selecting a tag
+        this.setTextboxValue("");
+        this.refreshOptions(false);
+      },
+      render: {
+        no_results: function (data, escape) {
+          return '<div class="no-results">No results found</div>';
+        },
+      },
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    this.tomSelect = new TomSelect(this.tagListTarget, mergedOptions);
   }
 }
diff --git a/app/javascript/controllers/selectable_controller.js b/app/javascript/controllers/selectable_controller.js
deleted file mode 100644
index 979d5494..00000000
--- a/app/javascript/controllers/selectable_controller.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-import Tags from "bootstrap5-tags";
-
-export default class extends Controller {
-  static targets = ["selectableList"];
-
-  connect() {
-    this.initializeSelectables();
-  }
-
-  /**
-   * Initialize the input with given options
-   * @param {Object} options - Configuration options for bootstrap5-tags
-   */
-  initializeSelectables(options = {}, reset = false) {
-    Tags.init(`select#${this.selectableListTarget.id}`, options, reset);
-  }
-}
diff --git a/app/javascript/controllers/upload_controller.js b/app/javascript/controllers/upload_controller.js
index 6b7fcdaf..3306ef2f 100644
--- a/app/javascript/controllers/upload_controller.js
+++ b/app/javascript/controllers/upload_controller.js
@@ -7,14 +7,14 @@ export default class extends Controller {
     "filesContainer",
     "hiddenField",
     "submitButton",
-    "spinner",
   ];
 
   uploadFile(event) {
     event.preventDefault();
 
-    this.submitButtonTarget.classList.add("disabled");
-    this.spinnerTarget.classList.remove("d-none");
+    this.submitButtonTarget.disabled = true;
+    this.submitButtonTarget.classList.add("disabled:opacity-75");
+    this.submitButtonTarget.value = "Uploading...";
 
     const filesInput = this.filesInputTarget;
     let files = Array.from(filesInput.files);
@@ -43,8 +43,9 @@ export default class extends Controller {
           filesInput.value = "";
         }
 
-        this.submitButtonTarget.classList.remove("disabled");
-        this.spinnerTarget.classList.add("d-none");
+        this.submitButtonTarget.disabled = false;
+        this.submitButtonTarget.classList.remove("disabled:opacity-75");
+        this.submitButtonTarget.value = "Save Topic";
       });
   }
 
diff --git a/app/models/concerns/searcheable.rb b/app/models/concerns/searcheable.rb
index a7e89a2c..0fb0aa46 100644
--- a/app/models/concerns/searcheable.rb
+++ b/app/models/concerns/searcheable.rb
@@ -9,11 +9,15 @@ def search(query)
     end
 
     def by_year(year)
-      where("extract(year from created_at) = ?", year)
+      return all if year.blank?
+
+      where("extract(year from created_at) = ?", year.to_i)
     end
 
     def by_month(month)
-      where("extract(month from created_at) = ?", month)
+      return all if month.blank?
+
+      where("extract(month from created_at) = ?", month.to_i)
     end
 
     def by_language(language_id)
@@ -21,7 +25,13 @@ def by_language(language_id)
     end
 
     def by_state(state)
-      where(state: state)
+      return all if state.blank?
+
+      if respond_to?(:states) && states.key?(state.to_s)
+        where(state: states[state.to_s])
+      else
+        where(state: state)
+      end
     end
 
     def by_tag_list(tag_list)
@@ -44,7 +54,10 @@ def sort_order(order_from_params)
         .then { |scope| params[:month].present? ? scope.by_month(params[:month]) : scope }
         .then { |scope| params[:query].present? ? scope.search(params[:query]) : scope }
         .then { |scope| params[:tag_list].present? ? scope.by_tag_list(params[:tag_list]) : scope }
-        .then { |scope| scope.order(created_at: sort_order(params[:order].present? ? params[:order].to_sym : :desc)) }
+        .then do |scope|
+          order_column = scope.klass.column_names.include?("published_at") ? :published_at : :created_at
+          scope.order(order_column => sort_order(params[:order].present? ? params[:order].to_sym : :desc))
+        end
     end
   end
 end
diff --git a/app/models/topic.rb b/app/models/topic.rb
index 689d76fd..b4b839a2 100644
--- a/app/models/topic.rb
+++ b/app/models/topic.rb
@@ -46,11 +46,15 @@ class Topic < ApplicationRecord
 
   class << self
     def by_year(year)
-      where("extract(year from published_at) = ?", year)
+      return all if year.blank?
+
+      where("extract(year from published_at) = ?", year.to_i)
     end
 
     def by_month(month)
-      where("extract(month from published_at) = ?", month)
+      return all if month.blank?
+
+      where("extract(month from published_at) = ?", month.to_i)
     end
   end
 
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 857a7353..7693af02 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,72 +1,180 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
-  <div class="container">
-    <a class="navbar-brand fw-bold" href="#">SkillRx</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ms-auto">
-        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
-        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
-        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
-        <!-- New Sign In link using Rails 8 authentication -->
+<nav class="fixed top-0 w-full bg-white shadow-sm z-50">
+  <div class="container mx-auto px-4">
+    <div class="flex items-center justify-between h-16">
+      <%= link_to root_path, class: "flex items-center space-x-2" do %>
+        <%= image_tag("skill.svg", alt: "SkillRx", class: "h-10 w-auto") %>
+      <% end %>
+
+      <!-- Mobile menu button -->
+      <button type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
+        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+        </svg>
+      </button>
+
+      <!-- Desktop menu -->
+      <div class="hidden md:flex md:items-center md:space-x-8">
+        <a href="#about" class="text-gray-700 hover:text-gray-900 font-medium">About</a>
+        <a href="#features" class="text-gray-700 hover:text-gray-900 font-medium">Features</a>
+        <a href="#contact" class="text-gray-700 hover:text-gray-900 font-medium">Contact</a>
+        <% if authenticated? %>
+          <%= link_to "Dashboard", topics_path, class: "text-gray-700 hover:text-gray-900 font-medium" %>
+          <%= button_to "Sign Out", session_path, method: :delete, class: "ml-4 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50" %>
+        <% else %>
+          <%= link_to "Sign In", new_session_path, class: "ml-4 px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all", id: "desktop-sign-in" %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Mobile menu -->
+    <div id="mobile-menu" class="hidden md:hidden">
+      <div class="px-2 pt-2 pb-3 space-y-1">
+        <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
+        <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a>
+        <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a>
         <% if authenticated? %>
-          <li class="nav-item">
-            <%= link_to "Dashboard", topics_path, class: "nav-link" %>
-          </li>
-          <li class="nav-item">
-            <%= button_to "Sign Out", session_path, method: :delete, class: "nav-link" %>
-          </li>
+          <%= link_to "Dashboard", topics_path, class: "block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" %>
+          <%= button_to "Sign Out", session_path, method: :delete, class: "w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" %>
         <% else %>
-          <li class="nav-item">
-            <%= link_to "Sign In", new_session_path, class: "nav-link" %>
-          </li>
+          <%= link_to "Sign In", new_session_path, class: "block px-3 py-2 rounded-md text-base font-medium bg-indigo-600 text-white hover:bg-indigo-700", id: "mobile-sign-in" %>
         <% end %>
-      </ul>
+      </div>
     </div>
   </div>
 </nav>
 
 <!-- Hero Section -->
-<header class="bg-primary text-white py-5">
-  <div class="container">
-    <div class="row align-items-center">
-      <div class="col-lg-6">
-        <h1 class="display-4 fw-bold">Medical Education Without Borders</h1>
-        <p class="lead">Empowering healthcare professionals worldwide with accessible continuing medical education</p>
-        <%= link_to "Get Started", new_session_path, class: "btn btn-light btn-lg" %>
+<header class="relative overflow-hidden bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 min-h-screen">
+  <!-- Background pattern -->
+  <div class="absolute inset-0 bg-black/20"></div>
+  <div class="absolute inset-0" style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;); background-size: 60px 60px;"></div>
+
+  <div class="relative container mx-auto px-4">
+    <div class="flex flex-col lg:flex-row items-center min-h-screen pt-20 pb-8">
+      <div class="lg:w-1/2 text-white z-10">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight animate-fade-in-up">
+          Medical Education <span class="text-white/90">Without Borders</span>
+        </h1>
+        <p class="text-xl md:text-2xl mb-8 text-white/90 animate-fade-in-up animation-delay-200">
+          Empowering healthcare professionals worldwide with accessible, offline-first continuing medical education
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-400">
+          <%= link_to new_session_path, class: "inline-flex items-center justify-center px-6 py-4 text-lg font-medium bg-white text-indigo-600 rounded-lg shadow-lg hover:bg-gray-50 transition-all" do %>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            Get Started Today
+          <% end %>
+          <a href="#features" class="inline-flex items-center justify-center px-6 py-4 text-lg font-medium border-2 border-white/70 text-white rounded-lg hover:bg-white/10 transition-all">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
+            </svg>
+            Learn More
+          </a>
+        </div>
+      </div>
+
+      <div class="lg:w-1/2 hidden lg:block relative z-10 animate-fade-in-right animation-delay-600">
+        <div class="relative">
+          <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-md transform -rotate-3">
+            <div class="flex items-center mb-4">
+              <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center mr-3">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+                </svg>
+              </div>
+              <div>
+                <h6 class="font-semibold text-gray-900">Cardiology Updates</h6>
+                <p class="text-sm text-gray-500">Latest CME Content</p>
+              </div>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-2 mb-3">
+              <div class="bg-indigo-500 h-2 rounded-full" style="width: 75%"></div>
+            </div>
+            <p class="text-sm text-gray-600">75% Complete • 3 modules remaining</p>
+          </div>
+
+          <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-sm mt-6 ml-12 transform rotate-2">
+            <div class="text-center">
+              <svg class="w-16 h-16 text-indigo-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"/>
+              </svg>
+              <h6 class="font-semibold text-gray-900">Offline Access</h6>
+              <p class="text-sm text-gray-500 mt-1">Continue learning anywhere</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+
+  <!-- Scroll indicator -->
+  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
+    </svg>
+  </div>
 </header>
 
 <!-- Features Section -->
-<section id="features" class="py-5">
-  <div class="container">
-    <h2 class="text-center mb-5">How SkillRx Works</h2>
-    <div class="row g-4">
-      <div class="col-md-4">
-        <div class="card h-100">
-          <div class="card-body">
-            <h3 class="card-title h5">Offline Access</h3>
-            <p class="card-text">Access medical education content anytime, anywhere - no internet required</p>
-          </div>
+<section id="features" class="py-20 relative z-10">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Revolutionizing Medical Education</h2>
+      <p class="text-xl text-gray-600 max-w-3xl mx-auto">Discover how SkillRx transforms the way healthcare professionals learn and grow</p>
+    </div>
+
+    <div class="grid md:grid-cols-3 gap-8">
+      <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
+        <div class="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
+          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"/>
+          </svg>
         </div>
+        <h3 class="text-2xl font-bold text-gray-900 text-center mb-4">Offline-First Access</h3>
+        <p class="text-gray-600 text-center">Access comprehensive medical education content anytime, anywhere - no internet connection required. Perfect for remote locations.</p>
       </div>
-      <div class="col-md-4">
-        <div class="card h-100">
-          <div class="card-body">
-            <h3 class="card-title h5">Smart Sync</h3>
-            <p class="card-text">Automatically update content when connected to optimize your learning</p>
-          </div>
+
+      <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
+        <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center mx-auto mb-6">
+          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
         </div>
+        <h3 class="text-2xl font-bold text-gray-900 text-center mb-4">Smart Synchronization</h3>
+        <p class="text-gray-600 text-center">Automatically sync your progress and download the latest content when connected. Seamless learning experience across all devices.</p>
       </div>
-      <div class="col-md-4">
-        <div class="card h-100">
-          <div class="card-body">
-            <h3 class="card-title h5">Multi-Platform</h3>
-            <p class="card-text">Available via USB drive, mobile app, or local server for maximum flexibility</p>
-          </div>
+
+      <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
+        <div class="w-20 h-20 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
+          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+          </svg>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 text-center mb-4">Multi-Platform Ready</h3>
+        <p class="text-gray-600 text-center">Deploy via USB drives, mobile apps, or local servers. Flexible solutions that adapt to your infrastructure and needs.</p>
+      </div>
+    </div>
+
+    <!-- Statistics Section -->
+    <div class="mt-20 bg-gray-50 rounded-2xl p-12">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+        <div>
+          <h3 class="text-4xl font-bold text-indigo-600 mb-2">500+</h3>
+          <p class="text-gray-600">Medical Topics</p>
+        </div>
+        <div>
+          <h3 class="text-4xl font-bold text-green-600 mb-2">50+</h3>
+          <p class="text-gray-600">Countries Served</p>
+        </div>
+        <div>
+          <h3 class="text-4xl font-bold text-cyan-600 mb-2">10k+</h3>
+          <p class="text-gray-600">Healthcare Professionals</p>
+        </div>
+        <div>
+          <h3 class="text-4xl font-bold text-amber-600 mb-2">24/7</h3>
+          <p class="text-gray-600">Offline Access</p>
         </div>
       </div>
     </div>
@@ -74,45 +182,219 @@
 </section>
 
 <!-- About Section -->
-<section id="about" class="bg-light py-5">
-  <div class="container">
-    <div class="row align-items-center">
-      <div class="col-lg-6">
-        <h2>Our Mission</h2>
-        <p class="lead">Enabling medical practitioners in resource-constrained areas to maintain competence and improve patient care through accessible continuing education.</p>
-        <ul class="list-unstyled">
-          <li class="mb-2">✓ Free and open access</li>
-          <li class="mb-2">✓ Cutting-edge medical literature</li>
-          <li class="mb-2">✓ Adaptable to local needs</li>
-      </ul>
+<section id="about" class="py-20 bg-gradient-to-br from-blue-50 to-indigo-100">
+  <div class="container mx-auto px-4">
+    <div class="grid lg:grid-cols-2 gap-12 items-center">
+      <div>
+        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Our Mission</h2>
+        <p class="text-xl text-gray-600 mb-8">
+          Enabling medical practitioners in resource-constrained areas to maintain competence and improve patient care through accessible continuing education.
+        </p>
+
+        <div class="grid sm:grid-cols-2 gap-6 mb-8">
+          <div class="flex items-start">
+            <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+              </svg>
+            </div>
+            <div>
+              <h6 class="font-bold text-gray-900 mb-1">Free Access</h6>
+              <p class="text-sm text-gray-600">Always free and open</p>
+            </div>
+          </div>
+
+          <div class="flex items-start">
+            <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+              </svg>
+            </div>
+            <div>
+              <h6 class="font-bold text-gray-900 mb-1">Latest Research</h6>
+              <p class="text-sm text-gray-600">Cutting-edge literature</p>
+            </div>
+          </div>
+
+          <div class="flex items-start">
+            <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+            </div>
+            <div>
+              <h6 class="font-bold text-gray-900 mb-1">Global Reach</h6>
+              <p class="text-sm text-gray-600">Worldwide accessibility</p>
+            </div>
+          </div>
+
+          <div class="flex items-start">
+            <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </div>
+            <div>
+              <h6 class="font-bold text-gray-900 mb-1">Adaptable</h6>
+              <p class="text-sm text-gray-600">Fits local needs</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-4">
+          <a href="#contact" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-center">Learn More</a>
+          <a href="#features" class="px-6 py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors text-center">View Features</a>
+        </div>
+      </div>
+
+      <div>
+        <div class="bg-white rounded-2xl shadow-xl p-8 max-w-lg mx-auto">
+          <div class="grid grid-cols-2 gap-4">
+            <div class="bg-gray-50 rounded-xl p-6 text-center">
+              <svg class="w-12 h-12 text-indigo-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+              </svg>
+              <h6 class="font-bold text-gray-900 mb-1">Cardiology</h6>
+              <p class="text-sm text-gray-500">150 modules</p>
+            </div>
+            <div class="bg-gray-50 rounded-xl p-6 text-center">
+              <svg class="w-12 h-12 text-green-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
+              </svg>
+              <h6 class="font-bold text-gray-900 mb-1">Emergency</h6>
+              <p class="text-sm text-gray-500">120 modules</p>
+            </div>
+            <div class="bg-gray-50 rounded-xl p-6 text-center">
+              <svg class="w-12 h-12 text-cyan-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
+              </svg>
+              <h6 class="font-bold text-gray-900 mb-1">Pharmacy</h6>
+              <p class="text-sm text-gray-500">80 modules</p>
+            </div>
+            <div class="bg-gray-50 rounded-xl p-6 text-center">
+              <svg class="w-12 h-12 text-amber-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+              </svg>
+              <h6 class="font-bold text-gray-900 mb-1">Infectious</h6>
+              <p class="text-sm text-gray-500">95 modules</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </section>
 
 <!-- Contact Section -->
-<section id="contact" class="py-5">
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-6 text-center">
-        <h2>Get In Touch</h2>
-        <p class="lead mb-4">Questions? We're here to help.</p>
-        <a href="mailto:contact@skillrx.org" class="btn btn-primary">Email Us</a>
+<section id="contact" class="py-20 bg-white">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Ready to Transform Medical Education?</h2>
+      <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join thousands of healthcare professionals already using SkillRx to advance their medical knowledge</p>
+    </div>
+
+    <div class="max-w-xl mx-auto">
+      <div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow">
+        <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+        </div>
+        <h5 class="text-xl font-bold text-gray-900 mb-3">Contact Us</h5>
+        <p class="text-gray-600 mb-6">Have questions? We're here to help you get started with SkillRx.</p>
+        <a href="mailto:contact@skillrx.org" class="inline-flex items-center justify-center w-full px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+          Email Us
+        </a>
       </div>
     </div>
   </div>
 </section>
 
-<!-- Ensure main content takes available space -->
-<main class="flex-fill">
-  <!-- Footer anchored at the bottom -->
-  <footer class="bg-dark text-white py-4 mt-auto">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
-          <p class="mb-0">© 2025 SkillRx</p>
+<!-- Footer -->
+<footer class="bg-gray-900 text-white py-12 mt-auto">
+  <div class="container mx-auto px-4">
+    <div class="grid md:grid-cols-2 gap-8 items-center">
+      <div>
+        <div class="flex items-center space-x-3 mb-4">
+          <%= image_tag("skill.svg", alt: "SkillRx", class: "h-12 w-auto filter brightness-0 invert") %>
+          <div>
+            <p class="text-gray-400 text-sm">Medical Education Platform</p>
+          </div>
+        </div>
+        <p class="text-gray-400">© 2025 SkillRx. Built with <span class="text-red-500 animate-pulse">❤️</span> by Ruby for Good</p>
+      </div>
+
+      <div class="text-left md:text-right">
+        <div class="flex justify-start md:justify-end space-x-4">
+          <a href="https://www.linkedin.com/company/ruby-for-good" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white">
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/>
+              <circle cx="4" cy="4" r="2"/>
+            </svg>
+          </a>
+          <a href="https://github.com/rubyforgood/skillrx" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white">
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+          </a>
+          <a href="mailto:contact@skillrx.org" class="text-gray-400 hover:text-white">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+            </svg>
+          </a>
         </div>
       </div>
     </div>
-  </footer>
-</main>
+  </div>
+</footer>
+
+<style>
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .animate-fade-in-up {
+    animation: fade-in-up 0.8s ease-out;
+  }
+
+  .animate-fade-in-right {
+    animation: fade-in-right 0.8s ease-out;
+  }
+
+  .animation-delay-200 {
+    animation-delay: 0.2s;
+    animation-fill-mode: both;
+  }
+
+  .animation-delay-400 {
+    animation-delay: 0.4s;
+    animation-fill-mode: both;
+  }
+
+  .animation-delay-600 {
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+  }
+</style>
diff --git a/app/views/import_reports/index.html.erb b/app/views/import_reports/index.html.erb
index b9c70555..c60daeba 100644
--- a/app/views/import_reports/index.html.erb
+++ b/app/views/import_reports/index.html.erb
@@ -1,79 +1,421 @@
 <% content_for :title, "Import Reports" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
-      <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-          <h2 class="card-title">Import Reports</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Import Reports</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">View and monitor import operations and their status</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <p class="card-text">View and monitor import operations and their status.</p>
-            
-            <!-- Filters -->
-            <div class="row mb-3">
-              <div class="col-md-4">
-                <%= form_with url: import_reports_path, method: :get, local: true, class: "d-flex gap-2" do |form| %>
-                  <%= form.select :status, options_for_select([["All Statuses", ""]] + @available_statuses.map { |status| [status.humanize, status] }, params[:status]), {}, { class: "form-select", onchange: "this.form.submit();" } %>
-                <% end %>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Import Reports</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Filter Card -->
+    <div style="margin-bottom: 2rem;">
+      <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+        
+        <!-- Filter Header -->
+        <div style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); padding: 1.5rem; color: white;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div style="background: rgba(255, 255, 255, 0.2); padding: 0.5rem; border-radius: 0.5rem;">
+              <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"/>
+              </svg>
+            </div>
+            <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Filter Reports</h2>
+          </div>
+        </div>
+        
+        <!-- Filter Body -->
+        <div style="padding: 2rem;">
+          <%= form_with url: import_reports_path, method: :get, local: true, data: { controller: "search", search_target: "search" } do |f| %>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+              
+              <!-- Status Filter -->
+              <div>
+                <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    Status
+                  </div>
+                </label>
+                <%= f.select :status, options_for_select([["All Statuses", ""]] + @available_statuses.map { |status| [status.humanize, status] }, params[:status]), 
+                    {}, 
+                    style: "width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; background: white; transition: all 0.2s;", 
+                    data: { action: "change->search#submit" },
+                    onfocus: "this.style.borderColor='#6366f1'; this.style.boxShadow='0 0 0 3px rgba(99, 102, 241, 0.1)'",
+                    onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none'" %>
               </div>
             </div>
+            
+            <!-- Clear Button -->
+            <div style="margin-top: 1.5rem; display: flex; justify-content: end;">
+              <%= link_to "Clear Filters", import_reports_path, 
+                  style: "background: #f3f4f6; color: #374151; padding: 0.625rem 1.25rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s; border: 1px solid #d1d5db;",
+                  onmouseover: "this.style.background='#e5e7eb'",
+                  onmouseout: "this.style.background='#f3f4f6'" %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
 
-            <div class="table-responsive">
-              <table class="table table-lg table-striped mb-0">
-                <thead>
-                  <tr>
-                    <th>ID</th>
-                    <th>Import Type</th>
-                    <th>Status</th>
-                    <th>Started At</th>
-                    <th>Completed At</th>
-                    <th>Errors</th>
-                    <th class="text-end">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <% @import_reports.each do |import_report| %>
-                    <tr>
-                      <td class="text-bold-500"><%= import_report.id %></td>
-                      <td class="text-bold-500"><%= import_report.import_type.humanize %></td>
-                      <td>
-                        <span class="badge bg-<%= import_report.status == "completed" ? "success" : "info" %>">
-                          <%= import_report.status.humanize %>
-                        </span>
+    <!-- Reports Table Card -->
+    <%= turbo_frame_tag "reports-list" do %>
+      <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+        
+        <!-- Card Header -->
+        <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 2rem; color: white;">
+          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+                <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+                </svg>
+              </div>
+              <div>
+                <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Import Reports</h2>
+                <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                  <%= pluralize(@import_reports.count, 'report') %> found
+                </p>
+              </div>
+            </div>
+            
+            <div style="display: flex; gap: 0.75rem; align-items: center;">
+              <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+                Total: <%= @import_reports.count %>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Table Content -->
+        <div style="padding: 0;">
+          <div class="table-container" style="overflow-x: auto;">
+            <table style="width: 100%; border-collapse: collapse;">
+              <thead>
+                <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
+                      </svg>
+                      ID
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+                      </svg>
+                      Import Type
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      Status
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      Started
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;" class="hide-mobile">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      Completed
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+                      </svg>
+                      Errors
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <% if @import_reports.any? %>
+                  <% @import_reports.each_with_index do |import_report, index| %>
+                    <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+                      <td style="padding: 1.25rem 1.5rem;">
+                        <div style="font-weight: 600; color: #111827; font-size: 0.875rem;">#<%= import_report.id %></div>
+                      </td>
+                      <td style="padding: 1.25rem 1.5rem;">
+                        <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= import_report.import_type.humanize %></div>
+                      </td>
+                      <td style="padding: 1.25rem 1.5rem;">
+                        <% if import_report.status == "completed" %>
+                          <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                            <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                            </svg>
+                            <%= import_report.status.humanize %>
+                          </div>
+                        <% elsif import_report.status == "failed" %>
+                          <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                            <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                            </svg>
+                            <%= import_report.status.humanize %>
+                          </div>
+                        <% else %>
+                          <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                            <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            </svg>
+                            <%= import_report.status.humanize %>
+                          </div>
+                        <% end %>
                       </td>
-                      <td class="text-bold-500">
-                        <%= import_report.started_at&.strftime("%m/%d/%Y %I:%M %p") || "Not started" %>
+                      <td style="padding: 1.25rem 1.5rem;">
+                        <div style="color: #6b7280; font-size: 0.875rem;">
+                          <%= import_report.started_at&.strftime('%b %d, %Y at %I:%M %p') || "Not started" %>
+                        </div>
                       </td>
-                      <td class="text-bold-500">
-                        <%= import_report.completed_at&.strftime("%m/%d/%Y %I:%M %p") || "Not completed" %>
+                      <td style="padding: 1.25rem 1.5rem;" class="hide-mobile">
+                        <div style="color: #6b7280; font-size: 0.875rem;">
+                          <%= import_report.completed_at&.strftime('%b %d, %Y at %I:%M %p') || "Not completed" %>
+                        </div>
                       </td>
-                      <td class="text-bold-500">
+                      <td style="padding: 1.25rem 1.5rem;">
                         <% if import_report.import_errors.any? %>
-                          <span class="badge bg-danger"><%= import_report.import_errors.count %></span>
+                          <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                            <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+                            </svg>
+                            <%= import_report.import_errors.count %>
+                          </div>
                         <% else %>
-                          <span class="badge bg-success">0</span>
+                          <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                            <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                            </svg>
+                            0
+                          </div>
                         <% end %>
                       </td>
-                      <td class="text-end">
-                        <%= link_to import_report_path(import_report), class: "btn btn-secondary btn-sm" do %>
-                          <i class="bi bi-eye"></i> View
-                        <% end %>
+                      <td style="padding: 1.25rem 1.5rem; text-align: right;">
+                        <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                          <%= link_to import_report, data: { turbo_frame: "_top" }, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                            <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                            </svg>
+                            <span>View</span>
+                          <% end %>
+                        </div>
                       </td>
                     </tr>
                   <% end %>
-                </tbody>
-              </table>
+                <% else %>
+                  <tr>
+                    <td colspan="7" style="padding: 3rem 1.5rem; text-align: center;">
+                      <div style="color: #9ca3af;">
+                        <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No import reports found</p>
+                        <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Try adjusting your search filters.</p>
+                      </div>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+          
+          <!-- Pagination -->
+          <div style="background: #f8fafc; padding: 1.5rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+            <div style="color: #6b7280; font-size: 0.875rem;">
+              Showing <%= @import_reports.count %> of <%= @pagy.count %> reports
             </div>
-
-            <!-- Pagination -->
-            <div class="d-flex justify-content-center mt-3">
-              <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
+            <div>
+              <% if @pagy.pages > 1 %>
+                <%= render "shared/pagination", pagy: @pagy %>
+              <% end %>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    <% end %>
   </div>
-</section>
+</div>
+
+<style>
+  /* Enhanced button hover effects */
+  a[href*="import_report"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
+  }
+  
+  /* Table hover effects */
+  tbody tr:hover {
+    background-color: #f8fafc !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+    
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    /* Header adjustments */
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    /* Title adjustments */
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    /* Hide less important columns on mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+    
+    /* Make remaining columns more compact */
+    th, td {
+      padding: 0.75rem 0.5rem !important;
+      font-size: 0.875rem !important;
+    }
+    
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Filter grid to single column */
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+      gap: 1rem !important;
+    }
+    
+    /* Stack pagination on mobile */
+    div[style*="justify-content: space-between"][style*="align-items: center"] {
+      flex-direction: column !important;
+      gap: 1rem !important;
+      align-items: flex-start !important;
+    }
+    
+    /* Fix table overflow */
+    .table-container {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    
+    /* Ensure table fits */
+    table {
+      min-width: 100% !important;
+      width: 100% !important;
+    }
+    
+    /* Action buttons stack on mobile */
+    div[style*="display: flex; gap: 0.5rem; justify-content: flex-end"] {
+      flex-direction: column !important;
+      gap: 0.25rem !important;
+      width: 100% !important;
+    }
+    
+    /* Make buttons full width on mobile */
+    div[style*="display: flex; gap: 0.5rem; justify-content: flex-end"] a {
+      width: 100% !important;
+      justify-content: center !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+    
+    /* More compact table */
+    th, td {
+      padding: 0.5rem 0.25rem !important;
+      font-size: 0.75rem !important;
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+    
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    div[style*="padding: 1.5rem"] {
+      padding: 1rem !important;
+    }
+    
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+    
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+  }
+</style>
diff --git a/app/views/import_reports/show.html.erb b/app/views/import_reports/show.html.erb
index 5920896b..0c78c611 100644
--- a/app/views/import_reports/show.html.erb
+++ b/app/views/import_reports/show.html.erb
@@ -1,132 +1,431 @@
 <% content_for :title, "Import Report ##{@import_report.id}" %>
 
-<div class="section">
-  <h3 class="mb-4">Import Report: #<%= @import_report.id %></h3>
-  <div class="card mb-6">
-    <div class="card-header">
-      <div class="card-title">
-        <h3><%= @import_report.import_type.humanize %> Import</h3>
-      </div>
-    </div>
-    <div class="card-body">
-      <div class="row mb-2">
-        <div class="col-md-3"><strong>Status:</strong></div>
-        <div class="col-md-9">
-          <span class="badge bg-alert %>">
-            <%= @import_report.status %>
-          </span>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <div class="col-md-3"><strong>Import Type:</strong></div>
-        <div class="col-md-9"><%= @import_report.import_type.humanize %></div>
-      </div>
-      <div class="row mb-2">
-        <div class="col-md-3"><strong>Started At:</strong></div>
-        <div class="col-md-9">
-          <%= @import_report.started_at&.strftime('%m/%d/%Y %I:%M %p') || "Not started" %>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <div class="col-md-3"><strong>Completed At:</strong></div>
-        <div class="col-md-9">
-          <%= @import_report.completed_at&.strftime('%m/%d/%Y %I:%M %p') || "Not completed" %>
+<% if notice %>
+  <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
+    <%= notice %>
+  </div>
+<% end %>
+
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1000px; margin: 0 auto; padding: 0 1rem;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to import_reports_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            Import Report #<%= @import_report.id %>
+          </h1>
+          <% if @import_report.status == "completed" %>
+            <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              Completed
+            </div>
+          <% elsif @import_report.status == "failed" %>
+            <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              Failed
+            </div>
+          <% else %>
+            <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              <%= @import_report.status.humanize %>
+            </div>
+          <% end %>
         </div>
       </div>
-      <% if @import_report.summary_stats.present? %>
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>Summary Stats:</strong></div>
-          <div class="col-md-9">
-            <pre class="bg-light p-2 rounded"><%= JSON.pretty_generate(@import_report.summary_stats) %></pre>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Import Reports", import_reports_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">#<%= @import_report.id %></li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Main Content -->
+    <div id="<%= dom_id @import_report %>">
+
+      <!-- Import Details Section -->
+      <div style="margin-bottom: 2rem;">
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+
+          <!-- Card Header -->
+          <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 2rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+              <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
+              <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;"><%= @import_report.import_type.humanize %> Import Details</h2>
+            </div>
+            <p style="margin: 0; opacity: 0.9; font-size: 0.875rem;">Import operation information and statistics</p>
+          </div>
+
+          <!-- Card Body -->
+          <div style="padding: 2rem;">
+            <div style="display: grid; gap: 1.5rem;">
+
+              <!-- Status -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  </svg>
+                  Status:
+                </div>
+                <div style="color: #1f2937;">
+                  <% if @import_report.status == "completed" %>
+                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;">
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                      </svg>
+                      Completed
+                    </div>
+                  <% elsif @import_report.status == "failed" %>
+                    <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;">
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                      </svg>
+                      Failed
+                    </div>
+                  <% else %>
+                    <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;">
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      <%= @import_report.status.humanize %>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+
+              <!-- Import Type -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+                  </svg>
+                  Import Type:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @import_report.import_type.humanize %>
+                </div>
+              </div>
+
+              <!-- Started At -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  </svg>
+                  Started At:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @import_report.started_at&.strftime('%B %d, %Y at %I:%M %p') || "Not started" %>
+                </div>
+              </div>
+
+              <!-- Completed At -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  </svg>
+                  Completed At:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @import_report.completed_at&.strftime('%B %d, %Y at %I:%M %p') || "Not completed" %>
+                </div>
+              </div>
+
+              <!-- Created -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                  </svg>
+                  Created:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @import_report.created_at.strftime('%B %d, %Y at %I:%M %p') %>
+                </div>
+              </div>
+
+              <!-- Summary Stats -->
+              <% if @import_report.summary_stats.present? %>
+                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
+                  <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem; color: #3b82f6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                    </svg>
+                    Summary Stats:
+                  </div>
+                  <div style="color: #1f2937;">
+                    <pre style="background: white; padding: 1rem; border-radius: 0.375rem; border: 1px solid #e5e7eb; font-size: 0.75rem; overflow-x: auto; margin: 0;"><%= JSON.pretty_generate(@import_report.summary_stats) %></pre>
+                  </div>
+                </div>
+              <% end %>
+
+            </div>
           </div>
         </div>
-      <% end %>
-    </div>
-    <div class="card-footer">
-      <div class="row">
-        <div class="col-md-3"><strong>Created:</strong></div>
-        <div class="col-md-9"><%= @import_report.created_at.strftime('%m/%d/%Y %I:%M %p') %></div>
       </div>
-    </div>
-  </div>
-</div>
 
-<div class="section">
-  <div class="col-12">
-    <h3 class="mb-4">
-      Import Errors 
-      <span class="badge bg-<%= @import_errors.any? ? 'danger' : 'success' %>">
-        <%= @import_errors.count %>
-      </span>
-    </h3>
-  </div>
-  
-  <% if @import_errors.any? %>
-    <div class="card">
-      <div class="card-content">
-        <div class="card-body">
-          <div class="table-responsive">
-            <table class="table table-lg table-striped mb-0">
-              <thead>
-                <tr>
-                  <th>Error Type</th>
-                  <th>File Name</th>
-                  <th>Error Message</th>
-                  <th>Topic ID</th>
-                </tr>
-              </thead>
-              <tbody>
-                <% @import_errors.each do |error| %>
-                  <tr>
-                    <td>
-                      <span class="badge bg-danger"><%= error.error_type %></span>
-                    </td>
-                    <td class="text-bold-500">
-                      <div class="text-truncate" title="<%= error.file_name %>">
-                        <%= error.file_name || "N/A" %>
-                      </div>
-                    </td>
-                    <td class="text-bold-500">
-                      <% if error.error_message.present? %>
-                        <div class="text-truncate" style="max-width: 300px;" title="<%= error.error_message %>">
-                          <%= error.error_message %>
-                        </div>
-                      <% else %>
-                        N/A
-                      <% end %>
-                    </td>
-                    <td class="text-bold-500">
-                      <%= error.topic_id || "N/A" %>
-                    </td>
-                  </tr>
-                  <% if error.metadata.present? %>
-                    <tr>
-                      <td colspan="5" class="bg-light">
-                        <small><strong>Metadata:</strong></small>
-                        <pre class="small mb-0"><%= JSON.pretty_generate(error.metadata) %></pre>
-                      </td>
-                    </tr>
+      <!-- Import Errors Section -->
+      <div style="margin-bottom: 2rem;">
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+
+          <!-- Card Header -->
+          <div style="background: linear-gradient(135deg, <%= @import_errors.any? ? '#dc2626 0%, #b91c1c 100%' : '#10b981 0%, #059669 100%' %>); padding: 2rem; color: white;">
+            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+              <div style="display: flex; align-items: center; gap: 1rem;">
+                <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+                  <% if @import_errors.any? %>
+                    <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+                    </svg>
+                  <% else %>
+                    <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                    </svg>
                   <% end %>
-                <% end %>
-              </tbody>
-            </table>
+                </div>
+                <div>
+                  <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Import Errors</h2>
+                  <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                    <%= pluralize(@import_errors.count, 'error') %> found
+                  </p>
+                </div>
+              </div>
+
+              <div style="display: flex; gap: 0.75rem; align-items: center;">
+                <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+                  Total: <%= @import_errors.count %>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Table Content -->
+          <div style="padding: 0;">
+            <% if @import_errors.any? %>
+              <div class="table-container" style="overflow-x: auto;">
+                <table style="width: 100%; border-collapse: collapse;">
+                  <thead>
+                    <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+                      <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                        Error Type
+                      </th>
+                      <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                        File Name
+                      </th>
+                      <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                        Error Message
+                      </th>
+                      <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                        Topic ID
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <% @import_errors.each do |error| %>
+                      <tr style="border-bottom: 1px solid #f1f5f9;">
+                        <td style="padding: 1.25rem 1.5rem;">
+                          <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-block;">
+                            <%= error.error_type %>
+                          </div>
+                        </td>
+                        <td style="padding: 1.25rem 1.5rem;">
+                          <div style="font-weight: 600; color: #111827; font-size: 0.875rem; max-width: 200px; word-wrap: break-word;">
+                            <%= error.file_name || "N/A" %>
+                          </div>
+                        </td>
+                        <td style="padding: 1.25rem 1.5rem;">
+                          <% if error.error_message.present? %>
+                            <div style="color: #6b7280; font-size: 0.875rem; max-width: 300px; word-wrap: break-word;">
+                              <%= error.error_message %>
+                            </div>
+                          <% else %>
+                            <div style="color: #9ca3af; font-style: italic; font-size: 0.875rem;">
+                              N/A
+                            </div>
+                          <% end %>
+                        </td>
+                        <td style="padding: 1.25rem 1.5rem;">
+                          <div style="font-weight: 600; color: #111827; font-size: 0.875rem;">
+                            <%= error.topic_id || "N/A" %>
+                          </div>
+                        </td>
+                      </tr>
+                      <% if error.metadata.present? %>
+                        <tr style="border-bottom: 1px solid #f1f5f9;">
+                          <td colspan="4" style="padding: 1rem 1.5rem; background: #f8fafc;">
+                            <div style="font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.75rem;">
+                              Metadata:
+                            </div>
+                            <pre style="background: white; padding: 0.75rem; border-radius: 0.375rem; border: 1px solid #e5e7eb; font-size: 0.625rem; overflow-x: auto; margin: 0; color: #1f2937;"><%= JSON.pretty_generate(error.metadata) %></pre>
+                          </td>
+                        </tr>
+                      <% end %>
+                    <% end %>
+                  </tbody>
+                </table>
+              </div>
+            <% else %>
+              <div style="padding: 3rem 1.5rem; text-align: center;">
+                <div style="color: #10b981;">
+                  <svg style="width: 4rem; height: 4rem; margin: 0 auto 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  </svg>
+                </div>
+                <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;">No Errors Found</h3>
+                <p style="color: #6b7280; margin: 0; font-size: 0.875rem;">This import completed successfully without any errors.</p>
+              </div>
+            <% end %>
           </div>
         </div>
       </div>
-    </div>
-  <% else %>
-    <div class="card">
-      <div class="card-body text-center">
-        <div class="text-success">
-          <i class="bi bi-check-circle-fill" style="font-size: 3rem;"></i>
-        </div>
-        <h4 class="mt-3">No Errors Found</h4>
-        <p class="text-muted">This import completed successfully without any errors.</p>
+
+      <!-- Actions -->
+      <div style="display: flex; gap: 1rem; justify-content: flex-start;">
+        <%= link_to import_reports_path, style: "background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(107, 114, 128, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+          <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+          </svg>
+          Back to Import Reports
+        <% end %>
       </div>
     </div>
-  <% end %>
+  </div>
 </div>
 
-<div class="mt-4">
-  <%= link_to "Back to Import Reports", import_reports_path, class: "btn btn-secondary" %>
-</div>
+<style>
+  /* Button hover effects */
+  a[href*="import_reports"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1000px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+
+    /* Header adjustments */
+    div[style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+
+    /* Title adjustments */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Grid adjustments */
+    div[style*="grid-template-columns: 1fr 2fr"] {
+      grid-template-columns: 1fr !important;
+      gap: 0.5rem !important;
+    }
+
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem 1rem !important;
+    }
+
+    /* Table adjustments */
+    th, td {
+      padding: 0.75rem 0.5rem !important;
+      font-size: 0.875rem !important;
+    }
+
+    /* Make tables more responsive */
+    .table-container {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    /* Ensure table fits */
+    table {
+      min-width: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 1000px"] {
+      padding: 0 0.5rem !important;
+    }
+
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+
+    /* More compact padding */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+
+    div[style*="padding: 1.5rem"] {
+      padding: 1rem !important;
+    }
+
+    /* More compact table */
+    th, td {
+      padding: 0.5rem 0.25rem !important;
+      font-size: 0.75rem !important;
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+
+    /* Better pre formatting for small screens */
+    pre {
+      font-size: 0.625rem !important;
+      white-space: pre-wrap !important;
+      word-wrap: break-word !important;
+    }
+  }
+</style>
diff --git a/app/views/languages/_form.html.erb b/app/views/languages/_form.html.erb
index 284ab503..c9427658 100644
--- a/app/views/languages/_form.html.erb
+++ b/app/views/languages/_form.html.erb
@@ -1,18 +1,61 @@
 
-<%= form_for language do |f| %>
-  <div class="form-body">
-    <div class="row">
-      <%= render "shared/errors", errors: language.errors.full_messages, resource_name: language.class.name %>
-      <div class="col-12">
-        <div class="form-group">
-          <%= f.label :name %>
-          <%= f.text_field :name, class: "form-control", placeholder: "Name" %>
-        </div>
-        <div class="col-12 d-flex justify-content-end">
-          <%= f.submit class: "btn btn-primary me-1 mb-1" %>
-          <%= link_to "Cancel", languages_path, class: "btn btn-light-secondary me-1 mb-1" %>
-        </div>
+<%= form_for language, local: true do |f| %>
+  <div style="space-y: 1.5rem;">
+    <%= render "shared/errors", errors: language.errors.full_messages, resource_name: language.class.name %>
+    
+    <div style="margin-bottom: 1.5rem;">
+      <%= f.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+        Language Name
+        <span style="color: #ef4444;">*</span>
+      <% end %>
+      <%= f.text_field :name, 
+          placeholder: "Enter language name (e.g., English, Spanish, French)", 
+          style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;" %>
+      <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">This will be used to identify the language throughout the system.</p>
+    </div>
+    
+    <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid #f3f4f6;">
+      <div style="display: flex; gap: 1rem;">
+        <%= f.submit (language.persisted? ? "Update Language" : "Create Language"), 
+            style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
+        <%= link_to "Cancel", languages_path, 
+            style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
       </div>
+      
+      <% if language.persisted? %>
+        <div style="color: #6b7280; font-size: 0.75rem;">
+          Last updated: <%= language.updated_at.strftime("%B %d, %Y at %I:%M %p") %>
+        </div>
+      <% end %>
     </div>
   </div>
 <% end %>
+
+<style>
+  /* Form input focus states */
+  input[type="text"]:focus {
+    outline: none !important;
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+    background: white !important;
+  }
+  
+  /* Submit button hover */
+  input[type="submit"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4) !important;
+  }
+  
+  /* Cancel link hover */
+  a[href*="languages"]:hover {
+    background: #e5e7eb !important;
+    color: #374151 !important;
+    transform: translateY(-1px);
+  }
+  
+  /* Input placeholder styling */
+  input::placeholder {
+    color: #9ca3af;
+    font-style: italic;
+  }
+</style>
diff --git a/app/views/languages/edit.html.erb b/app/views/languages/edit.html.erb
index e3cf81f9..6c7351de 100644
--- a/app/views/languages/edit.html.erb
+++ b/app/views/languages/edit.html.erb
@@ -1,19 +1,54 @@
 <% content_for :title, "Editing language" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">Edit language</h2>
-        </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", language: @language %>
+<div style="padding: 2rem;">
+  <div style="max-width: 600px; margin: 0 auto;">
+    <!-- Breadcrumb -->
+    <nav style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280;">
+        <%= link_to "Languages", languages_path, style: "color: #3b82f6; text-decoration: none;" %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+        <span>Edit <%= @language.name %></span>
+      </div>
+    </nav>
+
+    <!-- Main Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden;">
+      <!-- Header -->
+      <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 2rem; border-bottom: 1px solid #e2e8f0;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="width: 3rem; height: 3rem; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.125rem;">
+            <%= @language.name.first.upcase %>
           </div>
+          <div>
+            <h1 style="font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0;">Edit Language</h1>
+            <p style="color: #6b7280; margin: 0.25rem 0 0 0; font-size: 0.875rem;">Update settings for "<%= @language.name %>"</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", language: @language %>
+      </div>
+    </div>
+
+    <!-- Danger Zone (if needed for delete functionality later) -->
+    <div style="margin-top: 2rem; padding: 1.5rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem;">
+      <div style="display: flex; gap: 0.75rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; color: #ef4444; flex-shrink: 0; margin-top: 0.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
+        </svg>
+        <div>
+          <h3 style="font-weight: 600; color: #991b1b; margin: 0 0 0.25rem 0; font-size: 0.875rem;">Danger Zone</h3>
+          <p style="color: #7f1d1d; font-size: 0.75rem; margin: 0; line-height: 1.5;">
+            Deleting a language will remove all associated data. This action cannot be undone.
+            <br><em>Delete functionality can be implemented here if needed.</em>
+          </p>
         </div>
       </div>
     </div>
   </div>
-</section>
+</div>
 
diff --git a/app/views/languages/index.html.erb b/app/views/languages/index.html.erb
index 5b0d33cc..2de9f689 100644
--- a/app/views/languages/index.html.erb
+++ b/app/views/languages/index.html.erb
@@ -1,44 +1,107 @@
 <% content_for :title, "Languages" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
-      <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-          <h2 class="card-title">Languages</h2>
-          <%= link_to new_language_path, class: "btn btn-primary" do %>
-            <i class="bi bi-plus"></i> Add New Language
-          <% end %>
-        </div>
-        <div class="card-content">
-          <div class="card-body">
-            <div class="table-responsive">
-              <table class="table table-lg table-striped mb-0">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>File share folder</th>
-                    <th class="text-end">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <% @languages.each do |language| %>
-                    <tr>
-                      <td class="text-bold-500"><%= language.name %></td>
-                      <td class="text-bold-500"><%= language.file_storage_prefix %></td>
-                      <td class="text-end">
-                        <%= link_to edit_language_path(language), class: "btn btn-secondary btn-sm" do %>
-                          <i class="bi bi-pencil"></i> Edit
-                        <% end %>
-                      </td>
-                    </tr>
-                  <% end %>
-                </tbody>
-              </table>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
+              </svg>
             </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Languages</h1>
           </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage system languages and their file storage configurations</p>
         </div>
+        
+        <%= link_to new_language_path, style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New Language</span>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Table Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden;">
+      <div style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse;">
+          <thead>
+            <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Name</th>
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">File Share Folder</th>
+              <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% if @languages.any? %>
+              <% @languages.each_with_index do |language, index| %>
+                <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <div style="display: flex; align-items: center; gap: 0.75rem;">
+                      <div style="width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
+                        <%= language.name.first.upcase %>
+                      </div>
+                      <div>
+                        <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= language.name %></div>
+                      </div>
+                    </div>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <span style="background: #f1f5f9; color: #475569; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; font-family: 'SF Mono', Monaco, monospace;">
+                      <%= language.file_storage_prefix.present? ? language.file_storage_prefix : 'Not configured' %>
+                    </span>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem; text-align: right;">
+                    <%= link_to edit_language_path(language), style: "background: #6b7280; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                      <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                      </svg>
+                      <span>Edit</span>
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+            <% else %>
+              <tr>
+                <td colspan="3" style="padding: 3rem 1.5rem; text-align: center;">
+                  <div style="color: #9ca3af;">
+                    <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 21l4-4 4 4"></path>
+                    </svg>
+                    <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No languages configured yet</p>
+                    <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Get started by adding your first language configuration.</p>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Hover effects for buttons */
+  a[href*="new_language"]:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4) !important;
+  }
+  
+  a[href*="edit"]:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+  }
+  
+  /* Table row hover animation */
+  tbody tr:hover td:first-child > div > div:first-child {
+    transform: scale(1.05);
+  }
+</style>
diff --git a/app/views/languages/new.html.erb b/app/views/languages/new.html.erb
index b9afd7a9..9b9c1b47 100644
--- a/app/views/languages/new.html.erb
+++ b/app/views/languages/new.html.erb
@@ -1,18 +1,52 @@
 <% content_for :title, "New language" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">New language</h2>
-        </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", language: @language %>
+<div style="padding: 2rem;">
+  <div style="max-width: 600px; margin: 0 auto;">
+    <!-- Breadcrumb -->
+    <nav style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280;">
+        <%= link_to "Languages", languages_path, style: "color: #3b82f6; text-decoration: none; hover: text-decoration: underline;" %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+        <span>New Language</span>
+      </div>
+    </nav>
+
+    <!-- Main Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden;">
+      <!-- Header -->
+      <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 2rem; border-bottom: 1px solid #e2e8f0;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="width: 3rem; height: 3rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
           </div>
+          <div>
+            <h1 style="font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0;">Add New Language</h1>
+            <p style="color: #6b7280; margin: 0.25rem 0 0 0; font-size: 0.875rem;">Configure a new language for the system</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", language: @language %>
+      </div>
+    </div>
+
+    <!-- Help Text -->
+    <div style="margin-top: 1.5rem; padding: 1rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.5rem;">
+      <div style="display: flex; gap: 0.75rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; color: #0ea5e9; flex-shrink: 0; margin-top: 0.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div>
+          <h3 style="font-weight: 600; color: #0c4a6e; margin: 0 0 0.25rem 0; font-size: 0.875rem;">About Languages</h3>
+          <p style="color: #075985; font-size: 0.75rem; margin: 0; line-height: 1.5;">Languages help organize content and file storage. Each language can have its own file storage prefix for better organization.</p>
         </div>
       </div>
     </div>
   </div>
-</section>
+</div>
diff --git a/app/views/layouts/_sidebar.html.erb b/app/views/layouts/_sidebar.html.erb
index 80075a31..d07d7e29 100644
--- a/app/views/layouts/_sidebar.html.erb
+++ b/app/views/layouts/_sidebar.html.erb
@@ -1,109 +1,114 @@
 
-<div id="sidebar">
-  <div class="sidebar-wrapper active">
-    <div class="sidebar-header position-relative">
-      <div class="d-flex justify-content-between align-items-center">
-        <div class="logo">
-          <%= link_to("SkillRx", root_path) %>
-        </div>
-        <div class="theme-toggle d-flex gap-2  align-items-center mt-2">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
-                    role="img" class="iconify iconify--system-uicons" width="20" height="20"
-                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
-            <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round"
-                        stroke-linejoin="round">
-              <path
-                            d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
-                            opacity=".3"></path>
-              <g transform="translate(-210 -1)">
-                <path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
-                <circle cx="220.5" cy="11.5" r="4"></circle>
-                <path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path>
-              </g>
-            </g>
-          </svg>
-          <div class="form-check form-switch fs-6">
-            <input class="form-check-input  me-0" type="checkbox" id="toggle-dark" style="cursor: pointer">
-            <label class="form-check-label"></label>
-          </div>
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
-                    role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet"
-                    viewBox="0 0 24 24">
-            <path fill="currentColor"
-                        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z">
-            </path>
-          </svg>
-        </div>
-        <div class="sidebar-toggler  x">
-          <a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
-        </div>
+<div class="w-full h-full bg-white shadow-lg overflow-y-auto" style="border-right: 1px solid #e5e7eb; display: flex; flex-direction: column;">
+  <div class="p-6" style="border-bottom: 1px solid #f3f4f6;">
+    <div class="flex justify-start items-center mb-6">
+      <div class="text-xl font-bold text-gray-800">
+        <%= link_to(root_path, class: "hover:opacity-80", style: "text-decoration: none; transition: opacity 0.2s;") do %>
+          <%= image_tag("skill.svg", alt: "SkillRx", style: "height: 4rem; width: auto;") %>
+        <% end %>
       </div>
-      <%= button_to session_path, method: :delete, class: "btn btn-danger mt-2" do %>
-        <i class="bi bi-box-arrow-right"></i> Log out
-      <% end %>
     </div>
+  </div>
 
-    <div class="sidebar-menu">
-      <ul class="menu">
-        <li class="sidebar-item">
-          <%= link_to topics_path, class: "sidebar-link" do %>
-            <i class="bi bi-tags-fill"></i>
-            <span>Topics</span>
+  <nav class="sidebar-nav px-4 py-2" style="flex: 1;">
+    <ul style="list-style: none; padding: 0; margin: 0;">
+      <li style="margin-bottom: 0.5rem;">
+        <%= link_to topics_path, style: nav_link_class(topics_path) do %>
+          <span style="font-size: 1.1rem;">🏷️</span>
+          <span>Topics</span>
+        <% end %>
+      </li>
+
+      <% if Current.user.is_admin? %>
+        <li style="margin: 1.5rem 0 1rem 0;">
+          <div style="padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: #6b7280; letter-spacing: 0.05em; border-bottom: 1px solid #f3f4f6; margin-bottom: 0.75rem;">Administration</div>
+        </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to regions_path, style: nav_link_class(regions_path) do %>
+            <span style="font-size: 1.1rem;">🌍</span>
+            <span>Regions</span>
           <% end %>
         </li>
 
-        <% if Current.user.is_admin? %>
-          <li class="sidebar-title">Administration</li>
-          <li class="sidebar-item">
-            <%= link_to regions_path, class: "sidebar-link" do %>
-              <i class="bi bi-globe"></i>
-              <span>Regions</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to providers_path, style: nav_link_class(providers_path) do %>
+            <span style="font-size: 1.1rem;">🏥</span>
+            <span>Providers</span>
+          <% end %>
+        </li>
 
-          <li class="sidebar-item">
-            <%= link_to providers_path, class: "sidebar-link" do %>
-              <i class="bi bi-hospital-fill"></i>
-              <span>Providers</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to languages_path, style: nav_link_class(languages_path) do %>
+            <span style="font-size: 1.1rem;">🌐</span>
+            <span>Languages</span>
+          <% end %>
+        </li>
 
-          <li class="sidebar-item">
-            <%= link_to languages_path, class: "sidebar-link" do %>
-              <i class="bi bi-translate"></i>
-              <span>Languages</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to tags_path, style: nav_link_class(tags_path) do %>
+            <span style="font-size: 1.1rem;">🏷️</span>
+            <span>Tags</span>
+          <% end %>
+        </li>
 
-          <li class="sidebar-item">
-            <%= link_to tags_path, class: "sidebar-link" do %>
-              <i class="bi bi-tags-fill"></i>
-              <span>Tags</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to users_path, style: nav_link_class(users_path) do %>
+            <span style="font-size: 1.1rem;">👥</span>
+            <span>Users</span>
+          <% end %>
+        </li>
 
-          <li class="sidebar-item">
-            <%= link_to users_path, class: 'sidebar-link' do %>
-              <i class="bi bi-people"></i>
-              <span>Users</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to import_reports_path, style: nav_link_class(import_reports_path) do %>
+            <span style="font-size: 1.1rem;">📊</span>
+            <span>Import Reports</span>
+          <% end %>
+        </li>
 
-          <li class="sidebar-item">
-            <%= link_to import_reports_path, class: 'sidebar-link' do %>
-              <i class="bi bi-circle"></i>
-              <span>Import Reports</span>
-            <% end %>
-          </li>
+        <li style="margin-bottom: 0.5rem;">
+          <%= link_to "/jobs", style: nav_link_class("/jobs"), target: "_blank" do %>
+            <span style="font-size: 1.1rem;">🛠️</span>
+            <span>Jobs</span>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
 
-          <li class="sidebar-item">
-            <%= link_to "/jobs", class: 'sidebar-link', target: "_blank" do %>
-              <i class="bi bi-window-stack"></i>
-              <span>Jobs</span>
-            <% end %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
+  <div class="p-6" style="border-top: 1px solid #f3f4f6;">
+    <%= button_to session_path, method: :delete, style: "width: 100%; background-color: #dc2626; color: white; font-weight: 500; padding: 0.75rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" do %>
+      <span style="font-size: 1.1rem;">↗</span>
+      <span>Log out</span>
+    <% end %>
   </div>
 </div>
+
+<style>
+  /* Sidebar hover effects - scoped to sidebar only */
+  .sidebar-nav a:hover {
+    background-color: #f3f4f6 !important;
+    color: #2563eb !important;
+  }
+
+  /* Active link styling - you can add logic to detect current page */
+  .sidebar-nav a[href*="languages"]:hover {
+    background-color: #dbeafe !important;
+    color: #1d4ed8 !important;
+  }
+
+  /* Logout button hover */
+  button[form]:hover {
+    background-color: #b91c1c !important;
+  }
+
+  /* Logo hover */
+  a[href="/"]:hover {
+    color: #2563eb !important;
+  }
+
+  /* Theme toggle hover */
+  div[title]:hover {
+    color: #374151 !important;
+    transform: scale(1.1);
+  }
+</style>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 40d35821..d6dc884b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -18,80 +18,300 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkillRx</title>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
+    <style>
+      /* Basic reset and layout styles */
+      * {
+        box-sizing: border-box;
+      }
 
-    <%= javascript_importmap_tags %>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        background-color: #f9fafb;
+      }
 
-    <style>
-      #app {
+      .flex {
         display: flex;
-        min-height: 100vh;
       }
 
-      #main {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
+      .min-h-screen {
         min-height: 100vh;
-        position: relative;
-        padding-bottom: 60px; /* Height of footer */
       }
 
-      #main-content {
+      .w-64 {
+        width: 16rem;
+      }
+
+      .fixed {
+        position: fixed;
+      }
+
+      .left-0 {
+        left: 0;
+      }
+
+      .top-0 {
+        top: 0;
+      }
+
+      .ml-64 {
+        margin-left: 16rem;
+      }
+
+      .z-40 {
+        z-index: 40;
+      }
+
+      .z-30 {
+        z-index: 30;
+      }
+
+      .bottom-0 {
+        bottom: 0;
+      }
+
+      .right-0 {
+        right: 0;
+      }
+
+      .overflow-y-auto {
+        overflow-y: auto;
+      }
+
+      .mt-auto {
+        margin-top: auto;
+      }
+
+      .flex-1 {
         flex: 1;
-        overflow-x: hidden; /* Prevent horizontal scroll */
+      }
+
+      .bg-white {
+        background-color: white;
+      }
+
+      .shadow-lg {
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      }
+
+      .p-4 {
+        padding: 1rem;
+      }
+
+      .p-6 {
+        padding: 1.5rem;
+      }
+
+      .rounded-lg {
+        border-radius: 0.5rem;
+      }
+
+      .text-xl {
+        font-size: 1.25rem;
+      }
+
+      .font-bold {
+        font-weight: 700;
+      }
+
+      .text-gray-800 {
+        color: #1f2937;
+      }
+
+      .hover\:text-blue-600:hover {
+        color: #2563eb;
+      }
+
+      .bg-red-600 {
+        background-color: #dc2626;
+      }
+
+      .hover\:bg-red-700:hover {
+        background-color: #b91c1c;
+      }
+
+      .text-white {
+        color: white;
+      }
+
+      .py-2 {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+
+      .px-4 {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+
+      .rounded-md {
+        border-radius: 0.375rem;
+      }
+
+      .transition-colors {
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+      }
+
+      .duration-200 {
+        transition-duration: 200ms;
+      }
+
+      .w-full {
+        width: 100%;
+      }
+
+      .justify-center {
+        justify-content: center;
+      }
+
+      .items-center {
+        align-items: center;
+      }
+
+      .space-x-2 > * + * {
+        margin-left: 0.5rem;
+      }
+
+      .pb-16 {
+        padding-bottom: 4rem;
+      }
+
+      .overflow-x-hidden {
+        overflow-x: hidden;
+      }
+
+      .mb-4 {
         margin-bottom: 1rem;
       }
 
-      footer {
+      .absolute {
+        position: absolute;
+      }
+
+      .bottom-0 {
         bottom: 0;
-        width: 100%;
-        height: 60px; /* Fixed height */
-        background: white;
-        border-top: 1px solid #eee;
-        padding: 1rem;
-        z-index: 1000;
       }
 
-      .section {
-        padding-bottom: 2rem; /* Add space before footer */
+      .h-16 {
+        height: 4rem;
+      }
+
+      .border-t {
+        border-top-width: 1px;
+      }
+
+      .border-gray-200 {
+        border-color: #e5e7eb;
+      }
+
+      .z-50 {
+        z-index: 50;
+      }
+
+      .justify-between {
+        justify-content: space-between;
+      }
+
+      .h-full {
+        height: 100%;
+      }
+
+      .text-gray-600 {
+        color: #4b5563;
+      }
+
+      .text-sm {
+        font-size: 0.875rem;
+      }
+
+      .space-x-1 > * + * {
+        margin-left: 0.25rem;
+      }
+
+      .w-4 {
+        width: 1rem;
+      }
+
+      .h-4 {
+        height: 1rem;
+      }
+
+      .text-red-500 {
+        color: #ef4444;
+      }
+
+      .text-blue-600 {
+        color: #2563eb;
+      }
+
+      .hover\:text-blue-800:hover {
+        color: #1e40af;
+      }
+
+      /* Responsive design for mobile */
+      @media (max-width: 768px) {
+        .w-64.fixed {
+          transform: translateX(-100%);
+          transition: transform 0.3s ease-in-out;
+        }
+
+        .ml-64 {
+          margin-left: 0 !important;
+        }
+
+        /* Adjust footer for mobile */
+        footer div[style*="width: 16rem"] {
+          width: 0 !important;
+        }
+
+        /* You can add a mobile menu toggle here if needed */
+      }
+
+      /* Ensure main content can scroll independently */
+      .main-content {
+        height: 100vh;
+        overflow-y: auto;
       }
     </style>
-  </head>
 
-  <body>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/components/dark.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>
+    <%= javascript_importmap_tags %>
+  </head>
 
-    <div id="app">
-      <%= render "layouts/sidebar" %>
-      <div id="main" class='layout-navbar'>
-        <div id="main-content">
+  <body class="bg-gray-50">
+    <div class="flex">
+      <div class="w-64 fixed left-0 top-0 h-full z-40">
+        <%= render "layouts/sidebar" %>
+      </div>
+      <div class="flex-1 ml-64 flex flex-col min-h-screen relative">
+        <div class="flex-1 overflow-y-auto main-content" style="padding-bottom: 4rem;">
           <%= render "shared/flash" %>
-
           <%= yield %>
         </div>
-        <footer>
-          <div class="footer clearfix mb-0 text-muted">
-            <div class="float-start">
-              <p></p>
-            </div>
-            <div class="float-end">
-              <p>Built with <span class="text-danger"><i class="bi bi-heart-fill icon-mid"></i></span>
-                by <a href="https://rubyforgood.org">Ruby for Good</a></p>
-            </div>
-          </div>
-        </footer>
       </div>
     </div>
+
+    <!-- Fixed footer that spans full width -->
+    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-30">
+      <div class="flex justify-between items-center text-gray-600 text-sm px-4 py-3">
+        <!-- Left side empty space to account for sidebar -->
+        <div style="width: 16rem;"></div>
+
+        <!-- Center content -->
+        <div class="flex items-center space-x-1">
+          <span>Built with</span>
+          <svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+          <span>by</span>
+          <a href="https://rubyforgood.org" class="text-blue-600 hover:text-blue-800">Ruby for Good</a>
+        </div>
+
+        <!-- Right side empty -->
+        <div style="width: 16rem;"></div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/app/views/layouts/home.html.erb b/app/views/layouts/home.html.erb
index e11bd4b7..0c06c1f4 100644
--- a/app/views/layouts/home.html.erb
+++ b/app/views/layouts/home.html.erb
@@ -13,15 +13,6 @@
 
     <%= yield :head %>
 
-    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
-    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
-
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
-
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
@@ -29,6 +20,179 @@
   <body class="d-flex flex-column min-vh-100">
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
 
+    <style>
+      /* Modern animations and effects */
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      @keyframes fadeInRight {
+        from {
+          opacity: 0;
+          transform: translateX(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+      
+      @keyframes bounce {
+        0%, 20%, 50%, 80%, 100% {
+          transform: translateY(0);
+        }
+        40% {
+          transform: translateY(-10px);
+        }
+        60% {
+          transform: translateY(-5px);
+        }
+      }
+      
+      /* Smooth scrolling */
+      html {
+        scroll-behavior: smooth;
+      }
+      
+      /* Custom scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+      }
+      
+      ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+      }
+      
+      ::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 4px;
+      }
+      
+      ::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+      }
+      
+      /* Navbar blur effect when scrolled */
+      .navbar.scrolled {
+        backdrop-filter: blur(10px);
+        background-color: rgba(255, 255, 255, 0.95) !important;
+      }
+      
+      /* Button hover effects */
+      .btn {
+        transition: all 0.3s ease;
+      }
+      
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+      }
+      
+      /* Card hover effects */
+      .card {
+        transition: all 0.3s ease;
+      }
+      
+      .feature-card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      }
+      
+      .contact-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+      }
+      
+      /* Gradient text */
+      .text-gradient {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      
+      /* Hero section enhancements */
+      .hero-content h1 {
+        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+      
+      /* Feature icons */
+      .feature-icon {
+        transition: all 0.3s ease;
+      }
+      
+      .card:hover .feature-icon {
+        transform: scale(1.1);
+      }
+      
+      /* Statistics counter animation */
+      .statistic h3 {
+        transition: all 0.3s ease;
+      }
+      
+      .statistic:hover h3 {
+        transform: scale(1.1);
+      }
+      
+      /* Ensure proper spacing for fixed navbar */
+      body {
+        padding-top: 76px;
+      }
+      
+      /* Mobile responsiveness fixes */
+      @media (max-width: 768px) {
+        body {
+          padding-top: 70px;
+        }
+        
+        .hero-content h1 {
+          font-size: 2.5rem;
+        }
+        
+        .display-5 {
+          font-size: 2rem;
+        }
+      }
+      
+      /* Loading states */
+      .loading {
+        opacity: 0.7;
+        pointer-events: none;
+        position: relative;
+      }
+      
+      /* Icon fallbacks */
+      .bi::before {
+        font-family: "bootstrap-icons" !important;
+      }
+      
+      /* Improved accessibility */
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+      
+      /* Print styles */
+      @media print {
+        .navbar, .btn, footer {
+          display: none !important;
+        }
+        
+        .hero-content {
+          color: black !important;
+        }
+      }
+    </style>
+
     <!-- Start content here -->
     <%= yield %>
     <!-- End content -->
@@ -41,5 +205,100 @@
     <!-- Need: Apexcharts -->
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/apexcharts/apexcharts.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/pages/dashboard.js"></script>
+    
+    <script>
+      // Navbar scroll effect
+      window.addEventListener('scroll', function() {
+        const navbar = document.querySelector('.navbar');
+        if (navbar && window.scrollY > 50) {
+          navbar.classList.add('scrolled');
+        } else if (navbar) {
+          navbar.classList.remove('scrolled');
+        }
+      });
+      
+      // Smooth scroll for anchor links
+      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+          e.preventDefault();
+          const targetId = this.getAttribute('href');
+          const target = document.querySelector(targetId);
+          if (target) {
+            const navbarHeight = document.querySelector('.navbar')?.offsetHeight || 76;
+            const targetPosition = target.offsetTop - navbarHeight;
+            window.scrollTo({
+              top: targetPosition,
+              behavior: 'smooth'
+            });
+          }
+        });
+      });
+      
+      // Add loading animation for cards with intersection observer
+      const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+      };
+      
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              entry.target.style.opacity = '1';
+              entry.target.style.transform = 'translateY(0)';
+            }, index * 100);
+            observer.unobserve(entry.target);
+          }
+        });
+      }, observerOptions);
+      
+      // Initialize intersection observer when DOM is ready
+      document.addEventListener('DOMContentLoaded', function() {
+        const cards = document.querySelectorAll('.card');
+        cards.forEach(card => {
+          card.style.opacity = '0';
+          card.style.transform = 'translateY(20px)';
+          card.style.transition = 'all 0.6s ease';
+          observer.observe(card);
+        });
+        
+        // Handle statistics animation
+        const statistics = document.querySelectorAll('.statistic h3');
+        statistics.forEach(stat => {
+          observer.observe(stat.parentElement);
+        });
+      });
+      
+      // Handle button loading states
+      document.querySelectorAll('a[href*="session"], button[type="submit"]').forEach(button => {
+        button.addEventListener('click', function() {
+          if (!this.classList.contains('loading')) {
+            this.classList.add('loading');
+            const originalText = this.innerHTML;
+            this.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Loading...';
+            
+            // Reset after 3 seconds if still loading
+            setTimeout(() => {
+              if (this.classList.contains('loading')) {
+                this.classList.remove('loading');
+                this.innerHTML = originalText;
+              }
+            }, 3000);
+          }
+        });
+      });
+      
+      // Add error handling for missing icons
+      document.addEventListener('DOMContentLoaded', function() {
+        const icons = document.querySelectorAll('i[class*="bi-"]');
+        icons.forEach(icon => {
+          // Check if icon is rendering properly
+          const computedStyle = window.getComputedStyle(icon, '::before');
+          if (!computedStyle.content || computedStyle.content === 'none') {
+            console.warn('Bootstrap icon not loading:', icon.className);
+          }
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/app/views/layouts/session.html.erb b/app/views/layouts/session.html.erb
index 4eaec27c..ca7665eb 100644
--- a/app/views/layouts/session.html.erb
+++ b/app/views/layouts/session.html.erb
@@ -26,9 +26,119 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
+  <body style="background: #f8f9fa;">
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
 
+    <style>
+      /* Modern form styling */
+      .form-control:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
+      }
+      
+      .form-floating > .form-control:focus ~ label,
+      .form-floating > .form-control:not(:placeholder-shown) ~ label {
+        opacity: 0.65;
+        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+        color: #667eea;
+      }
+      
+      /* Button animations */
+      .btn {
+        transition: all 0.3s ease;
+        transform: translateY(0);
+      }
+      
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+      }
+      
+      .btn:active {
+        transform: translateY(0);
+      }
+      
+      /* Card animations */
+      .auth-card {
+        animation: fadeInUp 0.6s ease-out;
+      }
+      
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      /* Background patterns */
+      .pattern-bg {
+        background-image: 
+          radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+          radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+      }
+      
+      /* Loading states */
+      .btn.loading {
+        pointer-events: none;
+        opacity: 0.7;
+      }
+      
+      .btn.loading::after {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin-left: 10px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      /* Alert animations */
+      .alert {
+        animation: slideInRight 0.5s ease-out;
+      }
+      
+      @keyframes slideInRight {
+        from {
+          opacity: 0;
+          transform: translateX(100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+      
+      /* Form validation styling */
+      .form-control.is-invalid {
+        border-color: #dc3545;
+        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+      }
+      
+      .form-control.is-valid {
+        border-color: #198754;
+        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+      }
+      
+      /* Responsive adjustments */
+      @media (max-width: 991.98px) {
+        .auth-card {
+          margin: 2rem 1rem;
+        }
+      }
+    </style>
+
     <!-- Start content here -->
     <%= yield %>
     <!-- End content -->
@@ -41,5 +151,76 @@
     <!-- Need: Apexcharts -->
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/apexcharts/apexcharts.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/pages/dashboard.js"></script>
+    
+    <script>
+      // Form validation
+      (function() {
+        'use strict';
+        window.addEventListener('load', function() {
+          var forms = document.getElementsByClassName('needs-validation');
+          var validation = Array.prototype.filter.call(forms, function(form) {
+            form.addEventListener('submit', function(event) {
+              if (form.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+              } else {
+                // Add loading state to submit button
+                const submitBtn = form.querySelector('input[type="submit"], button[type="submit"]');
+                if (submitBtn) {
+                  submitBtn.classList.add('loading');
+                  submitBtn.disabled = true;
+                }
+              }
+              form.classList.add('was-validated');
+            }, false);
+          });
+        }, false);
+      })();
+      
+      // Auto-dismiss alerts after 5 seconds
+      setTimeout(function() {
+        const alerts = document.querySelectorAll('.alert');
+        alerts.forEach(alert => {
+          const bsAlert = new bootstrap.Alert(alert);
+          bsAlert.close();
+        });
+      }, 5000);
+      
+      // Enhanced form interactions
+      document.addEventListener('DOMContentLoaded', function() {
+        // Add focus effects to form controls
+        const formControls = document.querySelectorAll('.form-control');
+        formControls.forEach(control => {
+          control.addEventListener('focus', function() {
+            this.parentElement.classList.add('focused');
+          });
+          
+          control.addEventListener('blur', function() {
+            this.parentElement.classList.remove('focused');
+          });
+        });
+        
+        // Password visibility toggle (if needed)
+        const passwordFields = document.querySelectorAll('input[type="password"]');
+        passwordFields.forEach(field => {
+          const toggleBtn = document.createElement('button');
+          toggleBtn.type = 'button';
+          toggleBtn.className = 'btn btn-link position-absolute end-0 top-50 translate-middle-y me-3';
+          toggleBtn.innerHTML = '<i class="bi bi-eye"></i>';
+          toggleBtn.style.zIndex = '10';
+          toggleBtn.style.border = 'none';
+          toggleBtn.style.background = 'none';
+          
+          field.parentElement.style.position = 'relative';
+          field.parentElement.appendChild(toggleBtn);
+          
+          toggleBtn.addEventListener('click', function() {
+            const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
+            field.setAttribute('type', type);
+            this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
+          });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
index 40a07099..caf36d00 100644
--- a/app/views/passwords/new.html.erb
+++ b/app/views/passwords/new.html.erb
@@ -1,32 +1,131 @@
-<%= tag.div(flash[:alert], style: "color:red") if flash[:alert] %>
-
-<div class="row h-100 p-4">
-  <div class="col-lg-5 col-12">
-    <div id="auth-left">
-      <div class="auth-logo">
+<div class="min-h-screen flex">
+  <!-- Left side - Reset Form -->
+  <div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-gray-100">
+    <div class="max-w-md w-full">
+      <div class="bg-white py-8 px-6 shadow-xl rounded-lg sm:px-10">
+      <div class="text-center mb-8">
+        <%= link_to root_path, class: "inline-block" do %>
+          <%= image_tag("skill.svg", alt: "SkillRx", class: "h-16 w-auto mx-auto") %>
+        <% end %>
 
+        <h2 class="mt-6 text-3xl font-bold text-gray-900">Reset Your Password</h2>
+        <p class="mt-2 text-gray-600">Input your email and we will send you reset password link</p>
       </div>
-      <h1 class="auth-title">Forgot Password</h1>
-      <p class="auth-subtitle mb-5">Input your email and we will send you reset password link.</p>
-
-      <%= form_with url: passwords_path do |form| %>
-        <div class="form-group position-relative has-icon-left mb-4">
-          <%= form.email_field :email, required: true, class:"form-control form-control-xl", autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email] %><br>
-          <div class="form-control-icon">
-            <i class="bi bi-envelope"></i>
-          </div>
+
+      <% if flash[:alert] %>
+        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-start">
+          <svg class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <span><%= flash[:alert] %></span>
         </div>
+      <% end %>
 
-        <%= form.submit "Email reset instructions", class:"btn btn-primary btn-block btn-lg shadow-lg mt-5" %>
+      <%= form_with url: passwords_path, local: true, class: "space-y-6" do |form| %>
+        <div>
+          <%= form.label :email, "Email address", class: "block text-sm font-medium text-gray-700 mb-2" %>
+          <%= form.email_field :email,
+              required: true,
+              class: "appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent",
+              autofocus: true,
+              autocomplete: "email",
+              placeholder: "you@example.com",
+              value: params[:email] %>
+        </div>
+
+        <div>
+          <%= form.submit "Send Reset Instructions",
+              class: "w-full flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all cursor-pointer" %>
+        </div>
       <% end %>
 
-      <div class="text-center mt-5 text-lg fs-4">
-        <p class="text-gray-600">Remember your account? <%= link_to "Login", new_session_path, class:"font-bold" %></p>
+      <div class="mt-8 text-center">
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-gray-300"></div>
+          </div>
+          <div class="relative flex justify-center text-sm">
+            <span class="px-4 bg-white text-gray-500">Remember your password?</span>
+          </div>
+        </div>
+
+        <div class="mt-6 space-y-2">
+          <%= link_to "Login", new_session_path,
+              class: "font-medium text-indigo-600 hover:text-indigo-500" %>
+          <p class="text-sm text-gray-600">
+            Need help?
+            <a href="mailto:contact@skillrx.org" class="font-medium text-indigo-600 hover:text-indigo-500">
+              Contact Support
+            </a>
+          </p>
+        </div>
       </div>
     </div>
+    </div>
   </div>
-  <div class="col-lg-7 d-none d-lg-block">
-    <div id="auth-right">
+
+  <!-- Right side - Visual/Information -->
+  <div class="hidden lg:block relative w-0 flex-1 overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500">
+      <div class="absolute inset-0 bg-black/10"></div>
+      <div class="absolute inset-0" style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;); background-size: 60px 60px;"></div>
+    </div>
+
+    <div class="absolute inset-0 flex items-center justify-center p-12">
+      <div class="max-w-lg">
+        <h1 class="text-4xl font-bold text-white mb-6">Secure & Simple</h1>
+        <p class="text-xl text-white/90 mb-12">
+          Your account security is our priority.
+        </p>
+
+        <div class="space-y-8">
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                </svg>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h3 class="text-lg font-semibold text-white">Secure Reset</h3>
+              <p class="text-white/80">Encrypted email verification</p>
+            </div>
+          </div>
+
+          <div class="flex items-start">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+              </div>
+            </div>
+            <div class="ml-4">
+              <h3 class="text-lg font-semibold text-white">Quick Process</h3>
+              <p class="text-white/80">Back to learning in minutes</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-12 p-6 bg-white/10 backdrop-blur-sm rounded-xl">
+          <h4 class="font-semibold text-white mb-2 flex items-center">
+            <span class="text-2xl mr-2">💡</span> Security Tip
+          </h4>
+          <p class="text-white/90 text-sm">
+            Use a strong, unique password
+          </p>
+        </div>
+
+        <div class="mt-8">
+          <%= link_to root_path, class: "inline-flex items-center text-white hover:text-white/90 transition-colors" do %>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+            Back to Home
+          <% end %>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/app/views/providers/_form.html.erb b/app/views/providers/_form.html.erb
index b977571c..50f4d3c2 100644
--- a/app/views/providers/_form.html.erb
+++ b/app/views/providers/_form.html.erb
@@ -1,48 +1,108 @@
-<%= form_with(model: provider) do |form| %>
-  <% if provider.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(provider.errors.count, "error") %> prohibited this provider from being saved:</h2>
-
-      <ul>
-        <% provider.errors.each do |error| %>
-          <li><%= error.full_message %></li>
+<%= form_with(model: provider, local: true) do |form| %>
+  <div style="space-y: 1.5rem;">
+    <%= render "shared/errors", errors: provider.errors.full_messages, resource_name: provider.class.name %>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+
+      <!-- Provider Name -->
+      <div>
+        <%= form.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+          Provider Name
+          <span style="color: #ef4444;">*</span>
         <% end %>
-      </ul>
-    </div>
-  <% end %>
+        <%= form.text_field :name,
+            placeholder: "Enter provider name (e.g., Johns Hopkins, Mayo Clinic)",
+            autofocus: true,
+            style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;" %>
+        <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">The official name of the healthcare provider or organization.</p>
+      </div>
 
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :name, style: "display: block" %>
-      <%= form.text_field :name, id: "basicInput", class: "form-control", autofocus: true %>
-    </div>
-  </div>
+      <!-- Provider Type -->
+      <div>
+        <%= form.label :provider_type, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+          Provider Type
+          <span style="color: #ef4444;">*</span>
+        <% end %>
+        <%= form.text_field :provider_type,
+            placeholder: "e.g., Hospital, Clinic, Health System",
+            style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;" %>
+        <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">The type or category of healthcare provider.</p>
+      </div>
 
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :provider_type, style: "display: block" %>
-      <%= form.text_field :provider_type, id: "basicInput", class: "form-control" %>
-    </div>
-  </div>
+      <!-- File Name Prefix -->
+<!--      <div>-->
+        <%#= form.label :file_name_prefix, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" %>
+        <%#= form.text_field :file_name_prefix,
+            id: "basicInput",
+            placeholder: "e.g., jhu, mayo, cleveland",
+            style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb; font-family: 'SF Mono', Monaco, monospace;" %>
+<!--        <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">Used for organizing files and documents. Keep it short and lowercase.</p>
+      </div>-->
 
-  <!--div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :file_name_prefix, style: "display: block" %>
-      <%= form.text_field :file_name_prefix, id: "basicInput", class: "form-control" %>
+      <!-- Regions -->
+      <div>
+        <%= form.label :region, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+          Associated Regions
+        <% end %>
+        <%= form.collection_select :region_ids, Region.order(:name), :id, :name,
+            { include_hidden: false },
+            multiple: true,
+            style: "width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;" %>
+        <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">Select one or more regions this provider serves. Hold Ctrl/Cmd to select multiple.</p>
+      </div>
     </div>
-  </div-->
 
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :region, style: "display: block" %>
-      <%= form.collection_select :region_ids, Region.order(:name), :id, :name, { include_hidden: false }, class: "form-select", multiple: true %>
-    </div>
-  </div>
+    <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid #f3f4f6; margin-top: 2rem;">
+      <div style="display: flex; gap: 1rem;">
+        <%= form.submit (provider.persisted? ? "Update Provider" : "Create Provider"),
+            style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
+        <%= link_to "Cancel", providers_path,
+            style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
+      </div>
 
-  <div class="mt-4">
-    <div class="col-12 d-flex justify-content-end">
-      <%= form.submit class: "btn btn-primary me-1 mb-1" %>
-      <%= link_to "Cancel", providers_path, class: "btn btn-light-secondary me-1 mb-1" %>
+      <% if provider.persisted? %>
+        <div style="color: #6b7280; font-size: 0.75rem;">
+          Last updated: <%= provider.updated_at.strftime("%B %d, %Y at %I:%M %p") %>
+        </div>
+      <% end %>
     </div>
   </div>
 <% end %>
+
+<style>
+  /* Form input focus states */
+  input[type="text"]:focus, select:focus {
+    outline: none !important;
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+    background: white !important;
+  }
+
+  /* Submit button hover */
+  input[type="submit"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4) !important;
+  }
+
+  /* Cancel link hover */
+  a[href*="providers"]:hover {
+    background: #e5e7eb !important;
+    color: #374151 !important;
+    transform: translateY(-1px);
+  }
+
+  /* Input placeholder styling */
+  input::placeholder {
+    color: #9ca3af;
+    font-style: italic;
+  }
+
+  /* Multi-select styling */
+  select[multiple] {
+    min-height: 120px;
+  }
+
+  select[multiple]:focus {
+    min-height: 120px;
+  }
+</style>
diff --git a/app/views/providers/edit.html.erb b/app/views/providers/edit.html.erb
index 3442db60..22d6586f 100644
--- a/app/views/providers/edit.html.erb
+++ b/app/views/providers/edit.html.erb
@@ -1,12 +1,109 @@
 <% content_for :title, "Editing provider" %>
 
-<h1>Editing provider</h1>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+        <%= link_to providers_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+          <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+          </svg>
+        <% end %>
+        <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+          Edit Provider
+        </h1>
+        <div style="background: #fef3c7; color: #d97706; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+          <%= @provider.name %>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Providers", providers_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to @provider.name, @provider, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Edit</li>
+        </ol>
+      </nav>
+    </div>
 
-<%= render "form", provider: @provider %>
+    <!-- Main Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Update Provider Information</h2>
+            <p style="margin: 0.5rem 0 0 0; color: rgba(255, 255, 255, 0.8);">
+              Modify details for <%= @provider.name %>
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", provider: @provider %>
+      </div>
+    </div>
 
-<br>
+    <!-- Quick Actions -->
+    <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
+      <%= link_to @provider, style: "background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+        </svg>
+        View Provider Details
+      <% end %>
+      
+      <%= link_to providers_path, style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
+        </svg>
+        Back to All Providers
+      <% end %>
+    </div>
 
-<div>
-  <%= link_to "Show this provider", @provider %> |
-  <%= link_to "Back to providers", providers_path %>
+    <!-- Provider Statistics -->
+    <div style="margin-top: 2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem;">
+      <div style="display: flex; align-items: start; gap: 1rem;">
+        <div style="background: #dcfce7; color: #16a34a; padding: 0.5rem; border-radius: 0.5rem; margin-top: 0.25rem;">
+          <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+          </svg>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 0.75rem 0;">Provider Statistics</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; color: #6b7280; font-size: 0.875rem;">
+            <div>
+              <span style="font-weight: 500; color: #374151;">Provider Type:</span> <%= @provider.provider_type || "Not specified" %>
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">File Prefix:</span> 
+              <code style="background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem;"><%= @provider.file_name_prefix || "None" %></code>
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Regions:</span> <%= @provider.regions.count %> assigned
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Created:</span> <%= @provider.created_at.strftime("%B %d, %Y") %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/app/views/providers/index.html.erb b/app/views/providers/index.html.erb
index ed30d931..a5b4b263 100644
--- a/app/views/providers/index.html.erb
+++ b/app/views/providers/index.html.erb
@@ -1,55 +1,134 @@
-<% content_for :title, "Regions" %>
+<% content_for :title, "Providers" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
-      <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-          <h2>Providers</h2>
-          <%= link_to new_provider_path, class: "btn btn-primary" do %>
-            <i class="bi bi-plus"></i> Add New Provider
-          <% end %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Providers</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage healthcare providers and organizations</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <!-- table striped -->
-            <div class="table-responsive">
-              <table class="table table-lg table-striped mb-0">
-                <thead>
-                <tr>
-                  <th>Provider</th>
-                  <th>Type</th>
-                  <th>Prefix</th>
-                  <th>Regions</th>
-                  <th class="text-end">Provider Actions</th>
-                </tr>
-                </thead>
-                <tbody>
-                <% @providers.each do |provider| %>
-                  <tr>
-                    <td class="text-bold-500"><%= provider.name %></td>
-                    <td><%= provider.provider_type %></td>
-                    <td><%= provider.file_name_prefix %></td>
-                    <td><%= provider.regions.pluck(:name).join(", ") %></td>
-                    <td class="text-end">
-                      <%= link_to provider, class: "btn btn-primary btn-sm" do %>
-                        <i class="bi bi-search"></i> View
+        
+        <%= link_to new_provider_path, style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4), 0 4px 6px -2px rgba(16, 185, 129, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New Provider</span>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Providers Table Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden;">
+      <div style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse;">
+          <thead>
+            <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Provider</th>
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Type</th>
+              <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% if @providers.any? %>
+              <% @providers.each_with_index do |provider, index| %>
+                <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <div style="display: flex; align-items: center; gap: 0.75rem;">
+                      <div style="width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #059669 0%, #047857 100%); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
+                        <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                        </svg>
+                      </div>
+                      <div>
+                        <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= provider.name %></div>
+                      </div>
+                    </div>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <span style="background: #f0f9ff; color: #0c4a6e; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+                      <%= provider.provider_type %>
+                    </span>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem; text-align: right;">
+                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                      <%= link_to provider, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                        <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                        </svg>
+                        <span>View</span>
                       <% end %>
-                      <%= link_to edit_provider_path(provider), class: "btn btn-secondary btn-sm" do %>
-                        <i class="bi bi-pencil"></i> Edit
+                      <%= link_to edit_provider_path(provider), style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                        <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                        </svg>
+                        <span>Edit</span>
                       <% end %>
-                      <%= link_to provider, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger btn-sm" do %>
-                        <i class="bi bi-trash"></i> Delete
+                      <%= link_to provider, method: :delete, data: { confirm: "Are you sure you want to delete this provider? This action cannot be undone." }, style: "background: #dc2626; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                        <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                        </svg>
+                        <span>Delete</span>
                       <% end %>
-                    </td>
-                  </tr>
-                <% end %>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            <% else %>
+              <tr>
+                <td colspan="3" style="padding: 3rem 1.5rem; text-align: center;">
+                  <div style="color: #9ca3af;">
+                    <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                    </svg>
+                    <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No providers configured yet</p>
+                    <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Get started by adding your first healthcare provider.</p>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Button hover effects */
+  a[href*="new_provider"]:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4) !important;
+  }
+
+  /* Action button hover effects */
+  a[href*="providers/"][style*="background: #3b82f6"]:hover {
+    background: #2563eb !important;
+    transform: translateY(-1px);
+  }
+
+  a[href*="edit"]:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+  }
+
+  a[href*="providers/"][style*="background: #dc2626"]:hover {
+    background: #b91c1c !important;
+    transform: translateY(-1px);
+  }
+
+  /* Table row hover animation */
+  tbody tr:hover td:first-child > div > div:first-child {
+    transform: scale(1.05);
+  }
+</style>
diff --git a/app/views/providers/new.html.erb b/app/views/providers/new.html.erb
index 168be7b1..d76bd305 100644
--- a/app/views/providers/new.html.erb
+++ b/app/views/providers/new.html.erb
@@ -1,18 +1,77 @@
 <% content_for :title, "New provider" %>
 
-<section id="multiple-column-form">
-  <div class="row match-height">
-    <div class="col-12">
-      <div class="card">
-        <div class="card-header">
-          <h4>Create New Provider</h4>
-        </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", provider: @provider %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+        <%= link_to providers_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+          <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+          </svg>
+        <% end %>
+        <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+          Add New Provider
+        </h1>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Providers", providers_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">New Provider</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Main Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Provider Information</h2>
+            <p style="margin: 0.5rem 0 0 0; color: rgba(255, 255, 255, 0.8);">
+              Add a new healthcare provider to the system
+            </p>
           </div>
         </div>
       </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", provider: @provider %>
+      </div>
+    </div>
+
+    <!-- Help Section -->
+    <div style="margin-top: 2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem;">
+      <div style="display: flex; align-items: start; gap: 1rem;">
+        <div style="background: #dbeafe; color: #1e40af; padding: 0.5rem; border-radius: 0.5rem; margin-top: 0.25rem;">
+          <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 0.75rem 0;">Adding Provider Information</h3>
+          <ul style="color: #6b7280; font-size: 0.875rem; line-height: 1.6; margin: 0; padding-left: 1.25rem;">
+            <li><strong>Provider Name:</strong> Use the official name as it appears in documentation</li>
+            <li><strong>Provider Type:</strong> Categories like Hospital, Clinic, Health System, Medical Center</li>
+            <li><strong>File Name Prefix:</strong> Short identifier for file organization (e.g., "jhu" for Johns Hopkins)</li>
+            <li><strong>Regions:</strong> Geographic areas served by this provider</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
-</section>
+</div>
diff --git a/app/views/providers/show.html.erb b/app/views/providers/show.html.erb
index 44c7b519..1df4e1be 100644
--- a/app/views/providers/show.html.erb
+++ b/app/views/providers/show.html.erb
@@ -1,13 +1,279 @@
-<p style="color: green"><%= notice %></p>
+<% if notice %>
+  <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
+    <%= notice %>
+  </div>
+<% end %>
 
-<%= render @provider %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to providers_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            <%= @provider.name %>
+          </h1>
+          <div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+            <%= @provider.provider_type || "Provider" %>
+          </div>
+        </div>
+        
+        <!-- Action Buttons -->
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <%= link_to edit_provider_path(@provider), style: "background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+            Edit Provider
+          <% end %>
+          
+          <%= button_to @provider, method: :delete, 
+              data: { confirm: "Are you sure you want to delete #{@provider.name}? This action cannot be undone." },
+              style: "background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(127, 29, 29, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+            Delete Provider
+          <% end %>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Providers", providers_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @provider.name %></li>
+        </ol>
+      </nav>
+    </div>
 
-<%= link_to "Back to providers", providers_path, class: "mt-4" %>
+    <!-- Main Content Grid -->
+    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
+      
+      <!-- Left Column - Main Info -->
+      <div style="space-y: 2rem;">
+        
+        <!-- Provider Details Card -->
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+          <div style="background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%); padding: 2rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+                <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                </svg>
+              </div>
+              <div>
+                <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Provider Information</h2>
+                <p style="margin: 0.5rem 0 0 0; color: rgba(255, 255, 255, 0.8);">
+                  Core details and configuration
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <div style="padding: 2rem;">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
+              
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem;">Provider Name</label>
+                <div style="background: #f8fafc; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0;">
+                  <span style="font-size: 1rem; font-weight: 600; color: #1f2937;"><%= @provider.name %></span>
+                </div>
+              </div>
+              
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem;">Provider Type</label>
+                <div style="background: #f8fafc; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0;">
+                  <span style="font-size: 1rem; color: #1f2937;"><%= @provider.provider_type || "Not specified" %></span>
+                </div>
+              </div>
+              
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem;">File Name Prefix</label>
+                <div style="background: #f8fafc; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0;">
+                  <% if @provider.file_name_prefix.present? %>
+                    <code style="background: #1f2937; color: #10b981; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem;"><%= @provider.file_name_prefix %></code>
+                  <% else %>
+                    <span style="color: #9ca3af; font-style: italic;">No prefix assigned</span>
+                  <% end %>
+                </div>
+              </div>
+              
+            </div>
+          </div>
+        </div>
 
-<div>
-  <%= link_to "Edit this provider", edit_provider_path(@provider), class: "btn btn-primary mt-4" %>
-</div>
+        <!-- Regions Card -->
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+          <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 1.5rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+              </div>
+              <div>
+                <h3 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Service Regions</h3>
+                <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                  <%= pluralize(@provider.regions.count, 'region') %> served
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <div style="padding: 1.5rem;">
+            <% if @provider.regions.any? %>
+              <div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
+                <% @provider.regions.each do |region| %>
+                  <%= link_to region_path(region), style: "background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid #bae6fd; color: #0369a1; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+                    <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                    </svg>
+                    <%= region.name %>
+                  <% end %>
+                <% end %>
+              </div>
+            <% else %>
+              <div style="text-align: center; color: #6b7280; padding: 2rem;">
+                <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+                <p style="margin: 0; font-style: italic;">No regions assigned to this provider</p>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <!-- Contributors Card -->
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+          <div style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); padding: 1.5rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
+                </svg>
+              </div>
+              <div>
+                <h3 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Contributors</h3>
+                <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                  <%= pluralize(@provider.users.count, 'contributor') %>
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <div style="padding: 1.5rem;">
+            <% if @provider.users.any? %>
+              <div style="space-y: 0.75rem;">
+                <% @provider.users.each do |user| %>
+                  <%= link_to user_path(user), style: "display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; text-decoration: none; transition: all 0.2s;" do %>
+                    <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem;">
+                      <%= user.email.first.upcase %>
+                    </div>
+                    <div>
+                      <div style="font-weight: 600; color: #1f2937; font-size: 0.875rem;"><%= user.email %></div>
+                      <div style="color: #6b7280; font-size: 0.75rem;">Contributor</div>
+                    </div>
+                  <% end %>
+                <% end %>
+              </div>
+            <% else %>
+              <div style="text-align: center; color: #6b7280; padding: 2rem;">
+                <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
+                </svg>
+                <p style="margin: 0; font-style: italic;">No contributors assigned to this provider</p>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
 
-<div>
-  <%= button_to "Destroy this provider", @provider, method: :delete, class: "btn btn-danger mt-4" %>
+      <!-- Right Column - Metadata -->
+      <div>
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; position: sticky; top: 2rem;">
+          <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 1.5rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+              </div>
+              <div>
+                <h3 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Metadata</h3>
+                <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                  System information
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <div style="padding: 1.5rem; space-y: 1.5rem;">
+            <div>
+              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;">Created</label>
+              <div style="color: #1f2937; font-weight: 500;"><%= @provider.created_at.strftime("%B %d, %Y") %></div>
+              <div style="color: #6b7280; font-size: 0.875rem;"><%= @provider.created_at.strftime("%I:%M %p") %></div>
+            </div>
+            
+            <div>
+              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;">Last Updated</label>
+              <div style="color: #1f2937; font-weight: 500;"><%= @provider.updated_at.strftime("%B %d, %Y") %></div>
+              <div style="color: #6b7280; font-size: 0.875rem;"><%= @provider.updated_at.strftime("%I:%M %p") %></div>
+            </div>
+            
+            <div>
+              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;">Provider ID</label>
+              <div style="font-family: 'SF Mono', Monaco, monospace; background: #f3f4f6; padding: 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; color: #374151;">#<%= @provider.id %></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Hover effects for action buttons */
+  a[href*="edit"]:hover, button[data-method="delete"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+  
+  /* Region link hovers */
+  a[href*="region"]:hover {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
+    border-color: #93c5fd !important;
+    transform: translateY(-1px);
+  }
+  
+  /* User link hovers */
+  a[href*="user"]:hover {
+    background: #f3f4f6 !important;
+    border-color: #d1d5db !important;
+    transform: translateY(-1px);
+  }
+  
+  /* Responsive grid */
+  @media (max-width: 768px) {
+    div[style*="grid-template-columns: 2fr 1fr"] {
+      grid-template-columns: 1fr !important;
+    }
+    
+    div[style*="display: flex"][style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+    }
+  }
+</style>
diff --git a/app/views/regions/_form.html.erb b/app/views/regions/_form.html.erb
index 860dd897..a91691ab 100644
--- a/app/views/regions/_form.html.erb
+++ b/app/views/regions/_form.html.erb
@@ -1,27 +1,89 @@
-<%= form_with(model: region) do |form| %>
+<%= form_with(model: region, local: true) do |form| %>
   <% if region.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(region.errors.count, "error") %> prohibited this region from being saved:</h2>
-
-      <ul>
+    <div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #f87171; color: #dc2626; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <h3 style="font-size: 1.125rem; font-weight: 600; margin: 0;">
+          <%= pluralize(region.errors.count, "error") %> prohibited this region from being saved:
+        </h3>
+      </div>
+      <ul style="margin: 0; padding-left: 1.5rem;">
         <% region.errors.each do |error| %>
-          <li><%= error.full_message %></li>
+          <li style="margin-bottom: 0.5rem; font-weight: 500;"><%= error.full_message %></li>
         <% end %>
       </ul>
     </div>
   <% end %>
 
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :name, style: "display: block" %>
-      <%= form.text_field :name, id: "basicInput", class: "form-control", autofocus: true %>
+  <div style="space-y: 1.5rem;">
+    
+    <!-- Region Name Field -->
+    <div>
+      <%= form.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+          Region Name
+        </div>
+      <% end %>
+      <%= form.text_field :name, 
+          autofocus: true, 
+          placeholder: "Enter region name (e.g., North America, Europe, Asia-Pacific)",
+          style: "width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: white;",
+          onfocus: "this.style.borderColor='#059669'; this.style.boxShadow='0 0 0 3px rgba(5, 150, 105, 0.1)';",
+          onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none';" %>
+      <p style="margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #6b7280;">
+        Provide a clear, descriptive name for the geographical region this service area covers.
+      </p>
     </div>
+
   </div>
 
-  <div class="mt-4">
-    <div class="col-12 d-flex justify-content-end">
-      <%= form.submit class: "btn btn-primary me-1 mb-1" %>
-      <%= link_to "Cancel", regions_path, class: "btn btn-light-secondary me-1 mb-1" %>
-    </div>
+  <!-- Form Actions -->
+  <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap;">
+    <%= link_to regions_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </svg>
+      <span>Cancel</span>
+    <% end %>
+    
+    <%= form.submit (region.persisted? ? "Update Region" : "Create Region"), 
+        style: "background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; border: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s;" %>
   </div>
 <% end %>
+
+<style>
+  /* Form input focus effects */
+  form input[type="text"]:focus {
+    outline: none;
+  }
+  
+  /* Button hover effects */
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+  }
+  
+  input[type="submit"]:hover {
+    box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.4), 0 4px 6px -2px rgba(5, 150, 105, 0.05) !important;
+    transform: translateY(-1px);
+  }
+  
+  /* Responsive design */
+  @media (max-width: 640px) {
+    div[style*="justify-content: flex-end"] {
+      flex-direction: column !important;
+      align-items: stretch !important;
+    }
+    
+    a, input[type="submit"] {
+      text-align: center !important;
+      justify-content: center !important;
+    }
+  }
+</style>
diff --git a/app/views/regions/edit.html.erb b/app/views/regions/edit.html.erb
index 6e659d5c..f630fcbd 100644
--- a/app/views/regions/edit.html.erb
+++ b/app/views/regions/edit.html.erb
@@ -1,10 +1,135 @@
-<% content_for :title, "Editing region" %>
+<% content_for :title, "Edit #{@region.name}" %>
 
-<h1>Editing region</h1>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Edit Region</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Modify region details and configuration</p>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Regions", regions_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to @region.name, @region, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Edit</li>
+        </ol>
+      </nav>
+    </div>
 
-<%= render "form", region: @region %>
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Edit <%= @region.name %></h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Update region information and settings
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", region: @region %>
+      </div>
+    </div>
 
-<div class="mt-4">
-  <%= link_to "Show this region", @region %> |
-  <%= link_to "Back to regions", regions_path %>
+    <!-- Action Buttons -->
+    <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+      <%= link_to regions_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Regions</span>
+      <% end %>
+      
+      <%= link_to @region, style: "background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+        </svg>
+        <span>View Region</span>
+      <% end %>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Button hover effects */
+  a:hover {
+    transform: translateY(-2px);
+  }
+  
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  a[style*="background: linear-gradient(135deg, #059669"]:hover {
+    box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.4), 0 10px 10px -5px rgba(5, 150, 105, 0.1) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 1.75rem !important;
+    }
+  }
+</style>
diff --git a/app/views/regions/index.html.erb b/app/views/regions/index.html.erb
index b6a0e1eb..c3f483bb 100644
--- a/app/views/regions/index.html.erb
+++ b/app/views/regions/index.html.erb
@@ -1,51 +1,289 @@
 <% content_for :title, "Regions" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
-      <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-          <h2>Regions Served</h2>
-          <%= link_to new_region_path, class: "btn btn-primary" do %>
-            <i class="bi bi-plus"></i> Add New Region
-          <% end %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Regions</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage geographical regions and service areas</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <!-- table striped -->
-            <div class="table-responsive">
-              <table class="table table-lg table-striped mb-0">
-                <thead>
-                <tr>
-                  <th>Region</th>
-                  <th>Providers</th>
-                  <th class="text-end">Region Actions</th>
-                </tr>
-                </thead>
-                <tbody>
-                <% @regions.each do |region| %>
-                  <tr>
-                    <td class="text-bold-500"><%= region.name %></td>
-                    <td><%= region.providers_count %></td>
-                    <td class="text-end">
-                      <%= link_to region, class: "btn btn-primary btn-sm" do %>
-                        <i class="bi bi-search"></i> View
-                      <% end %>
-                      <%= link_to edit_region_path(region), class: "btn btn-secondary btn-sm" do %>
-                        <i class="bi bi-pencil"></i> Edit
-                      <% end %>
-                      <%= link_to region, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger btn-sm" do %>
-                        <i class="bi bi-trash"></i> Delete
-                      <% end %>
+
+        <%= link_to new_region_path, style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4), 0 4px 6px -2px rgba(16, 185, 129, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New Region</span>
+        <% end %>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Regions</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Regions Table Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); padding: 2rem; color: white;">
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Table Content -->
+      <div style="padding: 0;">
+        <div class="table-container" style="overflow-x: auto;">
+          <table style="width: 100%; border-collapse: collapse;">
+            <thead>
+              <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+                <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                    </svg>
+                    Region Name
+                  </div>
+                </th>
+                <th class="hide-mobile" style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                    </svg>
+                    Providers
+                  </div>
+                </th>
+                <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% if @regions.any? %>
+                <% @regions.each_with_index do |region, index| %>
+                  <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+                    <td style="padding: 1.5rem;">
+                      <div style="display: flex; align-items: center; gap: 0.75rem;">
+                        <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
+                          <%= region.name.first.upcase %>
+                        </div>
+                        <div>
+                          <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= region.name %></div>
+                          <div style="color: #6b7280; font-size: 0.75rem;">Service Region</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="hide-mobile" style="padding: 1.5rem;">
+                      <span style="display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+                        1 provider
+                      </span>
+                    </td>
+                    <td style="padding: 1.5rem; text-align: right;">
+                      <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                        <%= link_to region, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
+                          <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                          </svg>
+                          <span>View</span>
+                        <% end %>
+                        <%= link_to edit_region_path(region), style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
+                          <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                          </svg>
+                          <span>Edit</span>
+                        <% end %>
+                        <%= link_to region, method: :delete, data: { confirm: "Are you sure you want to delete this region?" }, style: "background: #dc2626; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                          <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                          </svg>
+                          <span>Delete</span>
+                        <% end %>
+                      </div>
                     </td>
                   </tr>
                 <% end %>
-                </tbody>
-              </table>
-            </div>
-          </div>
+              <% else %>
+                <tr>
+                  <td colspan="3" style="padding: 3rem 1.5rem; text-align: center;">
+                    <div style="color: #9ca3af;">
+                      <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                      </svg>
+                      <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No regions found</p>
+                      <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Create your first region to get started.</p>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Enhanced button hover effects */
+  a[href*="new_region"]:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.4), 0 10px 10px -5px rgba(16, 185, 129, 0.1) !important;
+  }
+
+  /* Table hover effects */
+  tbody tr:hover {
+    background-color: #f8fafc !important;
+  }
+
+  /* Action button hover effects */
+  a[href*="regions/"]:hover {
+    transform: translateY(-1px);
+  }
+
+  a[href*="regions/"][style*="background: #3b82f6"]:hover {
+    background: #2563eb !important;
+  }
+
+  a[href*="edit"]:hover {
+    background: #4b5563 !important;
+  }
+
+  a[style*="background: #dc2626"]:hover {
+    background: #b91c1c !important;
+  }
+
+  /* Table row hover animation */
+  tbody tr:hover td:first-child > div > div:first-child {
+    transform: scale(1.05);
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 0.5rem !important;
+    }
+
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+
+    /* Header adjustments */
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+
+    /* Title adjustments */
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    /* Hide less important columns on mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+
+    /* Make remaining columns more compact */
+    th, td {
+      padding: 0.75rem 0.5rem !important;
+      font-size: 0.875rem !important;
+    }
+
+    /* Card adjustments */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 -0.5rem !important;
+    }
+
+    /* Card header adjustments */
+    div[style*="background: linear-gradient(135deg, #059669"] {
+      padding: 1.5rem 1rem !important;
+    }
+
+    /* Table container */
+    .table-container {
+      overflow-x: auto !important;
+      -webkit-overflow-scrolling: touch !important;
+    }
+  }
+
+  @media (max-width: 640px) {
+    /* Further mobile adjustments */
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.25rem !important;
+    }
+
+    /* Extend cards to screen edge on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0 !important;
+      margin: 0 -0.25rem !important;
+    }
+
+    /* Reduce padding on cards */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+
+    /* Smaller text on very small screens */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+
+    /* Even more compact table */
+    th, td {
+      padding: 0.5rem 0.25rem !important;
+      font-size: 0.75rem !important;
+    }
+
+    /* Make action buttons more compact */
+    td[style*="text-align: right"] a {
+      padding: 0.375rem 0.5rem !important;
+      font-size: 0.625rem !important;
+    }
+
+    /* Reduce title avatar size */
+    div[style*="width: 2.5rem; height: 2.5rem"] {
+      width: 2rem !important;
+      height: 2rem !important;
+      font-size: 0.75rem !important;
+    }
+
+    /* Ensure no horizontal overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Force word wrapping */
+    th, td {
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+  }
+</style>
diff --git a/app/views/regions/new.html.erb b/app/views/regions/new.html.erb
index 511d3be7..bd946610 100644
--- a/app/views/regions/new.html.erb
+++ b/app/views/regions/new.html.erb
@@ -1,18 +1,121 @@
-<% content_for :title, "New region" %>
+<% content_for :title, "New Region" %>
 
-<section id="multiple-column-form">
-  <div class="row match-height">
-    <div class="col-12">
-      <div class="card">
-        <div class="card-header">
-          <h4>Create New Region</h4>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">New Region</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Create a new geographical service region</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", region: @region %>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Regions", regions_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">New</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Create Region</h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Add a new geographical service region
+            </p>
           </div>
         </div>
       </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", region: @region %>
+      </div>
+    </div>
+
+    <!-- Back Button -->
+    <div style="margin-top: 2rem;">
+      <%= link_to regions_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Regions</span>
+      <% end %>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Button hover effects */
+  a:hover {
+    transform: translateY(-2px);
+  }
+  
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 1.75rem !important;
+    }
+  }
+</style>
diff --git a/app/views/regions/show.html.erb b/app/views/regions/show.html.erb
index 5680c75f..7b14bc8c 100644
--- a/app/views/regions/show.html.erb
+++ b/app/views/regions/show.html.erb
@@ -1,13 +1,221 @@
-<div style="color: green"><%= notice %></div>
+<% content_for :title, @region.name %>
 
-<%= render @region %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;"><%= @region.name %></h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Regional service details and configuration</p>
+        </div>
+        
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <%= link_to edit_region_path(@region), style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+            <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+            </svg>
+            <span>Edit Region</span>
+          <% end %>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Regions", regions_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @region.name %></li>
+        </ol>
+      </nav>
+    </div>
 
-<%= link_to "Back to regions", regions_path, class: "mt-4" %>
+    <!-- Success Message -->
+    <% if notice %>
+      <div style="background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; color: #166534; padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 0.75rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <span style="font-weight: 500;"><%= notice %></span>
+      </div>
+    <% end %>
 
-<div>
-  <%= link_to "Edit this region", edit_region_path(@region), class: "btn btn-primary mt-4" %>
-</div>
+    <!-- Region Details Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; margin-bottom: 2rem;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Region Information</h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Service area details and statistics
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Card Content -->
+      <div style="padding: 2rem;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
+          
+          <!-- Region Name -->
+          <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid #e2e8f0;">
+            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+              <div style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+              </div>
+              <h3 style="font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0;">Region Name</h3>
+            </div>
+            <p style="font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0;"><%= @region.name %></p>
+            <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0 0 0;">Primary service region identifier</p>
+          </div>
+          
+          <!-- Provider Count -->
+          <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid #e2e8f0;">
+            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+              <div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                </svg>
+              </div>
+              <h3 style="font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0;">Associated Providers</h3>
+            </div>
+            <p style="font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0;">1</p>
+            <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0 0 0;">Active healthcare providers in this region</p>
+          </div>
+          
+        </div>
+        
+        <!-- Region Statistics -->
+        <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb;">
+          <h3 style="font-size: 1.25rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0;">Region Statistics</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+            
+            <div style="text-align: center; padding: 1rem; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 0.5rem; border: 1px solid #f59e0b;">
+              <div style="font-size: 1.5rem; font-weight: 700; color: #92400e;">1</div>
+              <div style="font-size: 0.875rem; color: #78350f; font-weight: 500;">Total Providers</div>
+            </div>
+            
+            <div style="text-align: center; padding: 1rem; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-radius: 0.5rem; border: 1px solid #3b82f6;">
+              <div style="font-size: 1.5rem; font-weight: 700; color: #1e40af;">Active</div>
+              <div style="font-size: 0.875rem; color: #1e3a8a; font-weight: 500;">Service Status</div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
 
-<div>
-  <%= button_to "Destroy this region", @region, method: :delete, class: "btn btn-danger mt-4" %>
+    <!-- Action Buttons -->
+    <div style="display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+      <%= link_to regions_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Regions</span>
+      <% end %>
+      
+      <div style="display: flex; gap: 0.75rem;">
+        <%= link_to edit_region_path(@region), style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;", data: { turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+          </svg>
+          <span>Edit</span>
+        <% end %>
+        
+        <%= button_to @region, method: :delete, data: { confirm: "Are you sure you want to delete this region? This action cannot be undone." }, style: "background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; border: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s;" do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+          </svg>
+          <span>Delete Region</span>
+        <% end %>
+      </div>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Button hover effects */
+  a:hover, button:hover {
+    transform: translateY(-2px);
+  }
+  
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  a[style*="background: linear-gradient(135deg, #3b82f6"]:hover {
+    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
+  }
+  
+  button[style*="background: linear-gradient(135deg, #dc2626"]:hover {
+    box-shadow: 0 20px 25px -5px rgba(220, 38, 38, 0.4), 0 10px 10px -5px rgba(220, 38, 38, 0.1) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+    }
+    
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 1.75rem !important;
+    }
+    
+    div[style*="grid-template-columns: repeat(2, 1fr)"] {
+      grid-template-columns: 1fr !important;
+    }
+  }
+</style>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index ed8bc3a8..574453ac 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,29 +1,183 @@
-<%= tag.div(flash[:alert], style: "color:red") if flash[:alert] %>
-<%= tag.div(flash[:notice], style: "color:green") if flash[:notice] %>
-<div class="row h-100 p-4">
-  <div class="col-lg-5 col-12">
-    <div id="auth-left">
-      <div class="auth-logo"></div>
+<!-- Flash messages with modern styling -->
+<% if flash[:alert] %>
+  <div class="fixed top-4 right-4 z-50 animate-fade-in">
+    <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 min-w-[300px]">
+      <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+      </svg>
+      <p class="flex-1"><%= flash[:alert] %></p>
+      <button onclick="this.parentElement.parentElement.remove()" class="text-red-600 hover:text-red-800 transition-colors">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+        </svg>
+      </button>
     </div>
-    <h1 class="auth-title">Log in</h1>
-    <p class="auth-subtitle mb-5">Log in with your data that you entered during registration.</p>
-    <%= form_with url: session_path do |form| %>
-      <div class="form-group position-relative has-icon-left mb-4">
-        <%= form.email_field :email, required: true, class:"form-control form-control-xl", autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email] %><br>
-        <div class="form-control-icon">
-          <i class="bi bi-person"></i>
+  </div>
+<% end %>
+
+<% if flash[:notice] %>
+  <div class="fixed top-4 right-4 z-50 animate-fade-in">
+    <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 min-w-[300px]">
+      <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+      </svg>
+      <p class="flex-1"><%= flash[:notice] %></p>
+      <button onclick="this.parentElement.parentElement.remove()" class="text-green-600 hover:text-green-800 transition-colors">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+<% end %>
+
+<div class="min-h-screen flex">
+  <!-- Left side - Login Form -->
+  <div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 bg-gray-50">
+    <div class="max-w-md w-full space-y-8">
+      <!-- Logo and branding -->
+      <div class="text-center">
+        <%= image_tag("skill.svg", alt: "SkillRx", class: "mx-auto h-20 w-auto mb-6") %>
+        <h2 class="mt-6 text-3xl font-extrabold text-gray-900">
+          Welcome back
+        </h2>
+        <p class="mt-2 text-sm text-gray-600">
+          Sign in to continue your medical education journey
+        </p>
+      </div>
+
+      <%= form_with url: session_path, local: true, class: "mt-8 space-y-6", html: { novalidate: true } do |form| %>
+        <div class="space-y-4">
+          <!-- Email Field -->
+          <div>
+            <%= form.label :email, "Email address", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= form.email_field :email,
+                required: true,
+                class: "appearance-none relative block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200",
+                autofocus: true,
+                autocomplete: "username",
+                placeholder: "Enter your email address",
+                value: params[:email] %>
+          </div>
+
+          <!-- Password Field -->
+          <div>
+            <%= form.label :password, "Password", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= form.password_field :password,
+                required: true,
+                class: "appearance-none relative block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200",
+                autocomplete: "current-password",
+                placeholder: "Enter your password",
+                maxlength: 72 %>
+          </div>
         </div>
+
+        <!-- Remember Me and Forgot Password -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+            <label for="remember-me" class="ml-2 block text-sm text-gray-700">
+              Remember me
+            </label>
+          </div>
+
+          <div class="text-sm">
+            <%= link_to "Forgot password?", new_password_path,
+                class: "font-medium text-indigo-600 hover:text-indigo-500 transition-colors" %>
+          </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div>
+          <%= form.submit "Sign in",
+              class: "group relative w-full flex justify-center py-4 px-6 border border-transparent text-base font-medium rounded-lg text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-lg hover:shadow-xl" %>
+        </div>
+      <% end %>
+
+      <!-- Sign up link -->
+      <div class="text-center">
+        <span class="text-sm text-gray-600">
+          Don't have an account?
+        </span>
+        <a href="mailto:danny@rubyforgood.org" class="ml-1 font-medium text-indigo-600 hover:text-indigo-500 transition-colors">
+          Contact us to get started
+        </a>
       </div>
-      <div class="form-group position-relative has-icon-left mb-4">
-        <%= form.password_field :password, required: true, class:"form-control form-control-xl", autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72 %><br>
-        <div class="form-control-icon">
-          <i class="bi bi-shield-lock"></i>
+    </div>
+  </div>
+
+  <!-- Right side - Visual/Branding -->
+  <div class="hidden lg:block relative w-0 flex-1 overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500">
+      <!-- Overlay pattern -->
+      <div class="absolute inset-0 bg-black/20"></div>
+      <div class="absolute inset-0" style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;); background-size: 60px 60px;"></div>
+
+      <!-- Content -->
+      <div class="absolute inset-0 flex items-center justify-center p-12">
+        <div class="max-w-lg text-center text-white relative z-10">
+          <h1 class="text-5xl font-bold mb-6">SkillRx Platform</h1>
+          <p class="text-xl mb-12 text-white/90">
+            Empowering healthcare professionals with accessible medical education worldwide
+          </p>
+
+          <!-- Feature grid -->
+          <div class="grid grid-cols-3 gap-8 mb-12">
+            <div class="text-center">
+              <div class="mx-auto w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
+                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
+                </svg>
+              </div>
+              <h3 class="font-semibold text-sm">Offline Ready</h3>
+              <p class="text-xs text-white/70 mt-1">Learn anywhere</p>
+            </div>
+            <div class="text-center">
+              <div class="mx-auto w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
+                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+              </div>
+              <h3 class="font-semibold text-sm">Global Access</h3>
+              <p class="text-xs text-white/70 mt-1">500+ topics</p>
+            </div>
+            <div class="text-center">
+              <div class="mx-auto w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
+                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+              </div>
+              <h3 class="font-semibold text-sm">Always Free</h3>
+              <p class="text-xs text-white/70 mt-1">Open education</p>
+            </div>
+          </div>
+
+          <!-- Back to home -->
+          <%= link_to root_path, class: "inline-flex items-center px-6 py-3 border-2 border-white/30 backdrop-blur-sm text-base font-medium rounded-lg text-white hover:bg-white/10 transition-all duration-200" do %>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+            Back to Home
+          <% end %>
         </div>
       </div>
-      <%= form.submit "Sign in", class:"btn btn-primary btn-block btn-lg shadow-lg mt-5" %>
-    <% end %>
-    <div class="text-center mt-5 text-lg fs-4">
-      <p><%= link_to "Forgot password?", new_password_path, class:"font-bold" %></p>
     </div>
   </div>
 </div>
+
+<style>
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.3s ease-out;
+  }
+</style>
diff --git a/app/views/shared/_dropdown_arrow.html.erb b/app/views/shared/_dropdown_arrow.html.erb
new file mode 100644
index 00000000..803a3fad
--- /dev/null
+++ b/app/views/shared/_dropdown_arrow.html.erb
@@ -0,0 +1,3 @@
+<svg style="position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); width:1.25rem; height:1.25rem; pointer-events:none; color:#6b7280;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+</svg>
diff --git a/app/views/shared/_errors.html.erb b/app/views/shared/_errors.html.erb
index 28808d07..bc9b0d31 100644
--- a/app/views/shared/_errors.html.erb
+++ b/app/views/shared/_errors.html.erb
@@ -1,10 +1,22 @@
 <% if errors.any? %>
-  <div style="color: red">
-    <h4><%= "#{pluralize(errors.count, "error")} prohibited this #{resource_name} from being saved:" %></h4>
-    <ul>
-      <% errors.each do |error| %>
-        <li><%= error %></li>
-      <% end %>
-    </ul>
+  <div style="background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
+    <div style="display: flex; gap: 0.75rem;">
+      <svg style="width: 1.25rem; height: 1.25rem; color: #ef4444; flex-shrink: 0; margin-top: 0.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+      </svg>
+      <div style="flex: 1;">
+        <h4 style="font-weight: 600; color: #991b1b; margin: 0 0 0.5rem 0; font-size: 0.875rem;">
+          <%= pluralize(errors.count, "error") %> prevented this <%= resource_name.downcase %> from being saved:
+        </h4>
+        <ul style="list-style: none; padding: 0; margin: 0; space-y: 0.25rem;">
+          <% errors.each do |error| %>
+            <li style="font-size: 0.75rem; color: #7f1d1d; margin-bottom: 0.25rem; display: flex; align-items: flex-start; gap: 0.5rem;">
+              <span style="color: #ef4444; font-weight: bold; margin-top: 0.125rem;">•</span>
+              <span><%= error %></span>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
   </div>
 <% end %>
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
index 6e87dabc..c9ae7a7b 100644
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@@ -1,8 +1,32 @@
 <% flash.each do |name, msg| %>
   <% if msg.is_a?(String) %>
-    <div class="alert <%= flash_class(name) %> alert-dismissible fade show" role="alert">
-      <%= msg %>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <div class="<%= tailwind_flash_class(name) %> px-4 py-3 mb-3 rounded-md flex items-center justify-between text-sm" role="alert">
+      <div class="flex items-center gap-2">
+        <% case name %>
+        <% when "notice", "success" %>
+          <svg class="w-4 h-4 text-green-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        <% when "alert", "error" %>
+          <svg class="w-4 h-4 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        <% when "warning" %>
+          <svg class="w-4 h-4 text-yellow-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+          </svg>
+        <% when "info" %>
+          <svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        <% else %>
+          <svg class="w-4 h-4 text-gray-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        <% end %>
+        <span class="font-medium"><%= msg %></span>
+      </div>
+      <button type="button" class="ml-3 text-sm font-semibold hover:opacity-70 text-gray-500 hover:text-gray-700 transition-colors" onclick="this.parentElement.style.opacity='0'; setTimeout(() => this.parentElement.remove(), 200)">×</button>
     </div>
   <% end %>
 <% end %>
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
new file mode 100644
index 00000000..051c44cc
--- /dev/null
+++ b/app/views/shared/_pagination.html.erb
@@ -0,0 +1,9 @@
+<%# Use custom Tailwind pagination helper (defined in app/helpers/pagination_helper.rb) %>
+<%
+  search_params = if params[:search].present?
+    { search: params[:search].permit(:query, :name, :email, :order, :language_id, :tag_list, :year, :month, :state, :is_admin) }
+  else
+    {}
+  end
+%>
+<%= custom_pagy_nav(pagy, params: search_params) %>
diff --git a/app/views/tags/_form.html.erb b/app/views/tags/_form.html.erb
index 9b5ef3e2..6e251a14 100644
--- a/app/views/tags/_form.html.erb
+++ b/app/views/tags/_form.html.erb
@@ -1,38 +1,135 @@
-<%= form_for tag do |f| %>
-  <div class="form-body">
-    <div class="row">
-      <%= render "shared/errors", errors: tag.errors.full_messages, resource_name: tag.class.name %>
-      <div class="col-12">
-        <div class="form-group">
-          <%= f.label :name %>
-          <%= f.text_field :name, class: "form-control", placeholder: "Name" %>
-        </div>
-        <div data-controller="select-tags">
-          <div class="form-group">
-            <div class="d-flex">
-              <%= f.label :cognates_list, "Cognates", class: "flex-fill" %>
-              <small class="flex-fill text-end fw-light text-muted text-uppercase">Press enter to add a new tag</small>
-            </div>
-            <%= f.select :cognates_list,
-                         options_from_collection_for_select(
-                           tag.all_available_tags,
-                           :name,
-                           :name,
-                           tag.cognates_list
-                         ),
-                         { prompt: "Select tags", include_blank: true },
-                         multiple: true,
-                         class: "form-select",
-                         data: { "allow-clear": "true", "not-found-message": "Please select a tag from the list", "select-tags-target": "tagList" }
-            %>
-          </div>
-        </div>
+<%= form_with(model: tag, local: true) do |form| %>
+  <% if tag.errors.any? %>
+    <div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #f87171; color: #dc2626; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <h3 style="font-size: 1.125rem; font-weight: 600; margin: 0;">
+          <%= pluralize(tag.errors.count, "error") %> prohibited this tag from being saved:
+        </h3>
+      </div>
+      <ul style="margin: 0; padding-left: 1.5rem;">
+        <% tag.errors.each do |error| %>
+          <li style="margin-bottom: 0.5rem; font-weight: 500;"><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div style="space-y: 1.5rem;">
 
-        <div class="col-12 d-flex justify-content-end">
-          <%= f.submit class: "btn btn-primary me-1 mb-1" %>
-          <%= link_to "Cancel", tags_path, class: "btn btn-light-secondary me-1 mb-1" %>
+    <!-- Tag Name Field -->
+    <div style="margin-bottom: 1.5rem;">
+      <%= form.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+          </svg>
+          Tag Name
         </div>
+      <% end %>
+      <%= form.text_field :name,
+          placeholder: "Enter tag name (e.g., healthcare, technology, education)",
+          style: "width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: white;",
+          onfocus: "this.style.borderColor='#8b5cf6'; this.style.boxShadow='0 0 0 3px rgba(139, 92, 246, 0.1)';",
+          onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none';" %>
+      <p style="margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #6b7280;">
+        Provide a clear, descriptive name for this content classification tag.
+      </p>
+    </div>
+
+    <!-- Cognates Field -->
+    <div data-controller="select-tags" style="margin-bottom: 1.5rem;">
+      <div style="display: flex; justify-content: space-between; align-items: end; margin-bottom: 0.5rem;">
+        <%= form.label :cognates_list, style: "font-size: 0.875rem; font-weight: 600; color: #374151;" do %>
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+            </svg>
+            Related Tags (Cognates)
+          </div>
+        <% end %>
+        <small style="font-size: 0.75rem; color: #6b7280; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;">
+          Press enter to add a new tag
+        </small>
       </div>
+
+      <%= form.select :cognates_list,
+          options_from_collection_for_select(
+            tag.all_available_tags,
+            :name,
+            :name,
+            tag.cognates_list
+          ),
+          { prompt: "Select related tags", include_blank: true },
+          multiple: true,
+          data: { "allow-clear": "true", "select-tags-target": "tagList" } %>
+
+      <p style="margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #6b7280;">
+        Select related tags that share similar meanings or contexts. These help with content discovery and organization.
+      </p>
     </div>
+
+  </div>
+
+  <!-- Form Actions -->
+  <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap;">
+    <%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </svg>
+      <span>Cancel</span>
+    <% end %>
+
+    <%= form.submit (tag.persisted? ? "Update Tag" : "Create Tag"),
+        style: "background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; border: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s;" %>
   </div>
 <% end %>
+
+<style>
+  /* Form input focus effects */
+  form input[type="text"]:focus, form select:focus {
+    outline: none;
+  }
+
+  /* Button hover effects */
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+  }
+
+  input[type="submit"]:hover {
+    box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.05) !important;
+    transform: translateY(-1px);
+  }
+
+  /* Multi-select styling */
+  select[multiple] {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+
+  /* Responsive design */
+  @media (max-width: 640px) {
+    div[style*="justify-content: flex-end"] {
+      flex-direction: column !important;
+      align-items: stretch !important;
+    }
+
+    a, input[type="submit"] {
+      text-align: center !important;
+      justify-content: center !important;
+    }
+
+    div[style*="display: flex; justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 0.5rem !important;
+    }
+  }
+</style>
diff --git a/app/views/tags/_list.html.erb b/app/views/tags/_list.html.erb
index ae799fcd..26c34fe6 100644
--- a/app/views/tags/_list.html.erb
+++ b/app/views/tags/_list.html.erb
@@ -1,25 +1,95 @@
 <tbody>
-  <% @tags.each do |tag| %>
-    <tr>
-      <td class="text-bold-500">
-        <%= tag.name %>
-      </td>
-      <td class="text-bold-500">
-        <% tag.cognates_tags.each do |cognate| %>
-          <%= link_to cognate.name, tag_path(cognate), class: "badge bg-success" %>
-        <% end %>
-      </td>
-      <td class="text-bold-500">
-        <%= tag.taggings_count %>
-      </td>
-      <td class="text-end">
-        <%= link_to tag, class: "btn btn-primary btn-sm", data: {turbo: false } do %>
-          <i class="bi bi-search"></i> View
-        <% end %>
-        <%= link_to edit_tag_path(tag), class: "btn btn-secondary btn-sm", data: {turbo: false } do %>
-          <i class="bi bi-pencil"></i> Edit
-        <% end %>
-      </td>
-    </tr>
+  <% if @tags.any? %>
+    <% @tags.each_with_index do |tag, index| %>
+      <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+        <td style="padding: 1.5rem;">
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <div style="width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
+              <%= tag.name.first.upcase %>
+            </div>
+            <div>
+              <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= tag.name %></div>
+              <div style="color: #6b7280; font-size: 0.75rem;">Content Tag</div>
+            </div>
+          </div>
+        </td>
+        <td class="hide-mobile" style="padding: 1.5rem;">
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            <% if tag.cognates_tags.any? %>
+              <% tag.cognates_tags.each do |cognate| %>
+                <%= link_to cognate.name, tag_path(cognate), style: "display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.2s;", data: { turbo: false } %>
+              <% end %>
+            <% else %>
+              <span style="color: #94a3b8; font-style: italic; font-size: 0.75rem;">No cognates</span>
+            <% end %>
+          </div>
+        </td>
+        <td style="padding: 1.5rem;">
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;">
+              <%= tag.taggings_count %>
+            </div>
+            <span style="color: #6b7280; font-size: 0.75rem;">
+              <%= pluralize(tag.taggings_count, 'usage') %>
+            </span>
+          </div>
+        </td>
+        <td style="padding: 1.5rem; text-align: right;">
+          <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+            <%= link_to tag, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
+              <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+              <span>View</span>
+            <% end %>
+            <%= link_to edit_tag_path(tag), style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
+              <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+              </svg>
+              <span>Edit</span>
+            <% end %>
+          </div>
+        </td>
+      </tr>
+    <% end %>
   <% end %>
 </tbody>
+
+<% unless @tags.any? %>
+  <!-- Empty state displayed outside the table -->
+  <div style="padding: 3rem 1.5rem; text-align: center;">
+    <div style="color: #9ca3af;">
+      <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+      </svg>
+      <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No tags found</p>
+      <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Try adjusting your search filters or create a new tag.</p>
+    </div>
+  </div>
+<% end %>
+
+<style>
+  /* Action button hover effects */
+  a[href*="tags/"]:hover {
+    transform: translateY(-1px);
+  }
+  
+  a[href*="tags/"][style*="background: #3b82f6"]:hover {
+    background: #2563eb !important;
+  }
+  
+  a[href*="edit"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  /* Cognate badge hover effects */
+  a[style*="background: linear-gradient(135deg, #10b981"]:hover {
+    transform: scale(1.05);
+  }
+  
+  /* Table row hover animation */
+  tbody tr:hover td:first-child > div > div:first-child {
+    transform: scale(1.05);
+  }
+</style>
diff --git a/app/views/tags/_taggings.html.erb b/app/views/tags/_taggings.html.erb
index 749e5848..6ec73138 100644
--- a/app/views/tags/_taggings.html.erb
+++ b/app/views/tags/_taggings.html.erb
@@ -1,11 +1,38 @@
-<p>
-  <strong>This tag is associated with <%= @tag.taggings_count %> resource(s).</strong>
-</p>
+<div style="background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border: 1px solid #d1d5db; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem;">
+  <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+    <svg style="width: 1.25rem; height: 1.25rem; color: #8b5cf6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+    </svg>
+    <p style="margin: 0; font-weight: 600; color: #374151; font-size: 0.875rem;">
+      This tag is associated with <span style="color: #8b5cf6; font-weight: 700;"><%= @tag.taggings_count %></span> resource(s).
+    </p>
+  </div>
 
-<ul>
-  <% tag.taggings.each do |tagging| %>
-    <li>
-      <%= link_to tagging.taggable.title, url_for(tagging.taggable), target: "_blank" %>
-    </li>
+  <% if @tag.taggings.any? %>
+    <div style="background: white; border-radius: 0.5rem; padding: 1rem; border: 1px solid #e5e7eb;">
+      <h4 style="margin: 0 0 0.75rem 0; font-size: 0.875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">
+        Associated Resources
+      </h4>
+      <ul style="margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem;">
+        <% @tag.taggings.each do |tagging| %>
+          <li>
+            <%= link_to tagging.taggable.title, url_for(tagging.taggable),
+                target: "_blank",
+                style: "color: #8b5cf6; text-decoration: none; font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s;",
+                onmouseover: "this.style.color='#7c3aed'",
+                onmouseout: "this.style.color='#8b5cf6'" %>
+              <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+              </svg>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% else %>
+    <div style="background: white; border-radius: 0.5rem; padding: 1rem; border: 1px solid #e5e7eb; text-align: center;">
+      <p style="margin: 0; color: #6b7280; font-style: italic; font-size: 0.875rem;">
+        No resources are currently using this tag.
+      </p>
+    </div>
   <% end %>
-</ul>
+</div>
diff --git a/app/views/tags/destroy.turbo_stream.erb b/app/views/tags/destroy.turbo_stream.erb
index b057dda0..0a08cbb1 100644
--- a/app/views/tags/destroy.turbo_stream.erb
+++ b/app/views/tags/destroy.turbo_stream.erb
@@ -1,14 +1,12 @@
 <%= turbo_stream.update "delete_tag_#{@tag.id}" do %>
-  <div class="confirmation-dialog mt-4">
-    <h5>Are you sure you want to delete this tag?</h5>
+  <div class="confirmation-dialog" style="background: white; border: 1px solid #fca5a5; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 10px 25px -10px rgba(220, 38, 38, 0.35);">
+    <h5 style="font-size: 1.125rem; font-weight: 600; color: #991b1b; margin: 0 0 1rem 0;">Are you sure you want to delete this tag?</h5>
 
-    <div class="mt-4 hstack gap-3">
-      <div>
-        <%= button_to "Confirm Delete", tag_path(@tag, confirmed: true),  method: :delete, class: "btn btn-danger" %>
-      </div>
-      <div>
-        <%= link_to "Cancel", tag_path(@tag), class: "btn btn-secondary" %>
-      </div>
+    <p style="color: #b91c1c; margin-bottom: 1.5rem; font-size: 0.95rem;">This action cannot be undone and will remove the tag from all associated topics.</p>
+
+    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+      <%= button_to "Delete", tag_path(@tag, confirmed: true), method: :delete, class: "delete-tag-button" %>
+      <%= link_to "Cancel", tag_path(@tag), data: { turbo_frame: "_top" }, class: "cancel-delete-link" %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb
index b8752c93..76641fa7 100644
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@@ -1,18 +1,134 @@
-<% content_for :title, "Editing tag" %>
+<% content_for :title, "Edit #{@tag.name}" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">Edit tag</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Edit Tag</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Modify tag details and configuration</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", tag: @tag %>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Tags", tags_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to @tag.name, @tag, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Edit</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Edit <%= @tag.name %></h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Update tag information and settings
+            </p>
           </div>
         </div>
       </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", tag: @tag %>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+      <%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Tags</span>
+      <% end %>
+      
+      <%= link_to @tag, style: "background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+        </svg>
+        <span>View Tag</span>
+      <% end %>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Button hover effects */
+  a:hover {
+    transform: translateY(-2px);
+  }
+  
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  a[style*="background: linear-gradient(135deg, #8b5cf6"]:hover {
+    box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.4), 0 10px 10px -5px rgba(139, 92, 246, 0.1) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 1.75rem !important;
+    }
+  }
+</style>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index fc1cf13c..de1fdb61 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -1,54 +1,314 @@
 <% content_for :title, "Tags" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">Tags</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Tags</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage content tags and classification systems</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= form_for :search, url: tags_path, method: :get, data: { controller: "search", search_target: "search", turbo_frame: "tag-list", turbo_action: "advance" } do |f| %>
-              <div class="form-body">
-                <div class="row">
-                  <div class="col-md-6 col-12">
-                    <div class="form-group">
-                      <%= f.label :name %>
-                      <%= f.text_field :name, value: params.dig(:search, :name), class: "form-control", data: { action: "input->search#submit" } %>
-                    </div>
-                  </div>
-                  <div class="col-md-6 col-12">
-                    <div class="form-group">
-                      <%= f.label :order, "Order by" %>
-                      <%= f.select :order, options_for_select([["Name", :name],["Most recently added", :desc], ["Least recently added", :asc], ["Highest number of taggings", :most_tagged], ["Lowest number of taggings", :least_tagged]], params.dig(:search, :order)), {}, class: "form-select", data: { action: "change->search#submit" } %>
-                    </div>
-                  </div>
-                  <div class="col-12 d-flex justify-content-end">
-                    <%= link_to "Clear", tags_path, class: "btn btn-light-secondary me-1 mb-1" %>
-                  </div>
+
+        <%= link_to new_tag_path, style: "background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New Tag</span>
+        <% end %>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Tags</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Search Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); overflow: hidden; margin-bottom: 2rem;">
+      <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 1.5rem; border-bottom: 1px solid #e2e8f0;">
+        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+          <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+            <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+          </div>
+          <h3 style="font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0;">Search & Filter Tags</h3>
+        </div>
+
+        <%= form_for :search, url: tags_path, method: :get, data: { controller: "search", search_target: "search", turbo_frame: "tag-list", turbo_action: "advance" } do |f| %>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+
+            <!-- Name Search -->
+            <div>
+              <%= f.label :name, class: "input-label" do %>
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+                  </svg>
+                  Tag Name
+                </div>
+              <% end %>
+              <%= f.text_field :name,
+                  value: params.dig(:search, :name),
+                  placeholder: "Search by tag name...",
+                  class: "input-field",
+                  data: { action: "input->search#submit" } %>
+            </div>
+
+            <!-- Order Selection -->
+            <div>
+              <%= f.label :order, class: "input-label" do %>
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2v0"/>
+                  </svg>
+                  Order By
                 </div>
+              <% end %>
+              <div style="position:relative;">
+                <%= f.select :order,
+                    options_for_select([
+                      ["Name", :name],
+                      ["Most recently added", :desc],
+                      ["Least recently added", :asc],
+                      ["Highest number of taggings", :most_tagged],
+                      ["Lowest number of taggings", :least_tagged]
+                    ], params.dig(:search, :order)),
+                    {},
+                    class: "select-field",
+                    data: { action: "change->search#submit" } %>
+                <%= render "shared/dropdown_arrow" %>
               </div>
+            </div>
+
+          </div>
+
+          <!-- Clear Button -->
+          <div style="margin-top: 1.5rem; display: flex; justify-content: flex-end;">
+            <%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+              <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+              <span>Clear Filters</span>
             <% end %>
-            <div class="table-responsive">
-              <table class="table table-lg table-striped mb-0">
-                <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Cognates</th>
-                  <th>Taggings</th>
-                  <th class="text-end">Actions</th>
-                </tr>
-                </thead>
-                <%= render "list", topics: @tags %>
-              </table>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Tags Table Card -->
+    <%= turbo_frame_tag "tag-list" do %>
+      <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+
+        <!-- Card Header -->
+        <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 2rem; color: white;">
+          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+                <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+                </svg>
+              </div>
+              <div>
+                <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Content Tags</h2>
+                <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                  <%= pluralize(@tags.count, 'tag') %> found
+                </p>
+              </div>
+            </div>
+
+            <div style="display: flex; gap: 0.75rem; align-items: center;">
+              <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+                Total: <%= @tags.count %>
+              </div>
             </div>
           </div>
         </div>
-        <div class="card-footer d-flex justify-content-end">
-          <%== pagy_bootstrap_nav(@pagy) %>
+
+        <!-- Table Content -->
+        <div style="padding: 0;">
+          <div class="table-container" style="overflow-x: auto;">
+            <table style="width: 100%; border-collapse: collapse;">
+              <thead>
+                <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+                      </svg>
+                      Tag Name
+                    </div>
+                  </th>
+                  <th class="hide-mobile" style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+                      </svg>
+                      Cognates
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                      </svg>
+                      Usage
+                    </div>
+                  </th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">Actions</th>
+                </tr>
+              </thead>
+              <%= render "list", topics: @tags %>
+            </table>
+          </div>
+
+          <!-- Pagination -->
+          <div style="background: #f8fafc; padding: 1.5rem 2rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+            <div style="color: #6b7280; font-size: 0.875rem;">
+              Showing <%= @tags.count %> of <%= @pagy.count %> tags
+            </div>
+            <div>
+              <%= render "shared/pagination", pagy: @pagy %>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    <% end %>
   </div>
-</section>
+</div>
+
+<style>
+  /* Enhanced button hover effects */
+  a[href*="new_tag"]:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.4), 0 10px 10px -5px rgba(139, 92, 246, 0.1) !important;
+  }
+
+  /* Search form hover effects */
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+  }
+
+  /* Form input focus effects */
+  form input[type="text"]:focus, form select:focus {
+    outline: none;
+  }
+
+  /* Table hover effects */
+  tbody tr:hover {
+    background-color: #f8fafc !important;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 0.5rem !important;
+    }
+
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+
+    /* Header adjustments */
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+
+    /* Title adjustments */
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    /* Hide less important columns on mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+
+    /* Make remaining columns more compact */
+    th, td {
+      padding: 0.75rem 0.5rem !important;
+      font-size: 0.875rem !important;
+    }
+
+    /* Card adjustments */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 -0.5rem !important;
+    }
+
+    /* Card header adjustments */
+    div[style*="background: linear-gradient(135deg, #8b5cf6"] {
+      padding: 1.5rem 1rem !important;
+    }
+
+    /* Search grid adjustments */
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+    }
+
+    /* Table container */
+    .table-container {
+      overflow-x: auto !important;
+      -webkit-overflow-scrolling: touch !important;
+    }
+  }
+
+  @media (max-width: 640px) {
+    /* Further mobile adjustments */
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.25rem !important;
+    }
+
+    /* Extend cards to screen edge on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0 !important;
+      margin: 0 -0.25rem !important;
+    }
+
+    /* Reduce padding on cards */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+
+    /* Smaller text on very small screens */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+
+    /* Even more compact table */
+    th, td {
+      padding: 0.5rem 0.25rem !important;
+      font-size: 0.75rem !important;
+    }
+
+    /* Ensure no horizontal overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Force word wrapping */
+    th, td {
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+  }
+</style>
diff --git a/app/views/tags/new.html.erb b/app/views/tags/new.html.erb
index e8839897..cd533a1b 100644
--- a/app/views/tags/new.html.erb
+++ b/app/views/tags/new.html.erb
@@ -1,18 +1,120 @@
-<% content_for :title, "New tag" %>
+<% content_for :title, "New Tag" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">New tag</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">New Tag</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Create a new content classification tag</p>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", tag: @tag %>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Tags", tags_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">New</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Create Tag</h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Add a new content classification tag
+            </p>
           </div>
         </div>
       </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", tag: @tag %>
+      </div>
+    </div>
+
+    <!-- Back Button -->
+    <div style="margin-top: 2rem;">
+      <%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Tags</span>
+      <% end %>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Button hover effects */
+  a:hover {
+    transform: translateY(-2px);
+  }
+  
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 2rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+    
+    h1 {
+      font-size: 1.75rem !important;
+    }
+  }
+</style>
diff --git a/app/views/tags/show.html.erb b/app/views/tags/show.html.erb
index ad8fb4a9..7aa95987 100644
--- a/app/views/tags/show.html.erb
+++ b/app/views/tags/show.html.erb
@@ -1,13 +1,277 @@
-<div style="color: green"><%= notice %></div>
+<% content_for :title, @tag.name %>
 
-<%= render @tag %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
 
-<%= link_to "Back to tags", tags_path, class: "mt-4" %>
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;"><%= @tag.name %></h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Tag details and usage information</p>
+        </div>
 
-<div>
-  <%= link_to "Edit this tag", edit_tag_path(@tag), class: "btn btn-primary mt-4" %>
-</div>
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <%= link_to edit_tag_path(@tag), style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+            <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+            </svg>
+            <span>Edit Tag</span>
+          <% end %>
+        </div>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Tags", tags_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @tag.name %></li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Success Message -->
+    <% if notice %>
+      <div style="background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; color: #166534; padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 0.75rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <span style="font-weight: 500;"><%= notice %></span>
+      </div>
+    <% end %>
+
+    <!-- Tag Details Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; margin-bottom: 2rem;">
+
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Tag Information</h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              Content classification and usage details
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Card Content -->
+      <div style="padding: 2rem;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
+
+          <!-- Tag Name -->
+          <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid #e2e8f0;">
+            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+              <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+                </svg>
+              </div>
+              <h3 style="font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0;">Tag Name</h3>
+            </div>
+            <p style="font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0;"><%= @tag.name %></p>
+            <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0 0 0;">Content classification tag</p>
+          </div>
+
+          <!-- Usage Count -->
+          <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid #e2e8f0;">
+            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+              <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+                <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+              </div>
+              <h3 style="font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0;">Usage Count</h3>
+            </div>
+            <p style="font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0;"><%= @tag.taggings_count %></p>
+            <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0 0 0;"><%= pluralize(@tag.taggings_count, 'time') %> used in content</p>
+          </div>
+
+        </div>
 
-<div id="<%= "delete_tag_#{@tag.id}" %>">
-  <%= button_to "Delete this tag", @tag, method: :delete, class: "btn btn-danger mt-4" %>
+        <!-- Cognates Section -->
+        <% if @tag.cognates_tags.any? %>
+          <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb;">
+            <h3 style="font-size: 1.25rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0;">Related Tags (Cognates)</h3>
+            <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+              <% @tag.cognates_tags.each do |cognate| %>
+                <%= link_to cognate.name, tag_path(cognate), style: "display: inline-flex; align-items: center; padding: 0.5rem 1rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s;", data: { turbo: false } %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Tag Statistics -->
+        <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb;">
+          <h3 style="font-size: 1.25rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0;">Tag Statistics</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+
+            <div style="text-align: center; padding: 1rem; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 0.5rem; border: 1px solid #f59e0b;">
+              <div style="font-size: 1.5rem; font-weight: 700; color: #92400e;"><%= @tag.taggings_count %></div>
+              <div style="font-size: 0.875rem; color: #78350f; font-weight: 500;">Total Usages</div>
+            </div>
+
+            <div style="text-align: center; padding: 1rem; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-radius: 0.5rem; border: 1px solid #3b82f6;">
+              <div style="font-size: 1.5rem; font-weight: 700; color: #1e40af;"><%= @tag.cognates_tags.count %></div>
+              <div style="font-size: 0.875rem; color: #1e3a8a; font-weight: 500;">Related Tags</div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Taggings Section -->
+    <div>
+      <%= render "taggings" %>
+    </div>
+
+    <!-- Action Buttons -->
+    <div style="display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 2rem;">
+      <%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
+        <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Tags</span>
+      <% end %>
+
+      <div style="display: flex; gap: 0.75rem; align-items: center;">
+        <%= link_to edit_tag_path(@tag), style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;", data: { turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+          </svg>
+          <span>Edit</span>
+        <% end %>
+
+        <div id="<%= "delete_tag_#{@tag.id}" %>" style="display: inline-flex;">
+          <%= button_to @tag, method: :delete, class: "delete-tag-button" do %>
+            <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+            </svg>
+            <span>Delete this tag</span>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Button hover effects */
+  a:hover, button:hover {
+    transform: translateY(-2px);
+  }
+
+  a[style*="background: #6b7280"]:hover {
+    background: #4b5563 !important;
+  }
+
+  a[style*="background: linear-gradient(135deg, #3b82f6"]:hover {
+    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
+  }
+
+  .delete-tag-button {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    padding: 0.875rem 1.75rem;
+    border-radius: 0.75rem;
+    border: none;
+    font-weight: 600;
+    font-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .delete-tag-button:hover {
+    box-shadow: 0 20px 25px -5px rgba(220, 38, 38, 0.4), 0 10px 10px -5px rgba(220, 38, 38, 0.1) !important;
+  }
+
+  .cancel-delete-link {
+    background: #f3f4f6;
+    color: #374151;
+    padding: 0.875rem 1.75rem;
+    border-radius: 0.75rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .cancel-delete-link:hover {
+    background: #e5e7eb;
+    color: #111827;
+  }
+
+  /* Cognate link hover effects */
+  a[style*="background: linear-gradient(135deg, #10b981"]:hover {
+    transform: scale(1.05);
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+    }
+
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+  }
+
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] {
+      padding: 0 0.5rem !important;
+    }
+
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+
+    h1 {
+      font-size: 1.75rem !important;
+    }
+
+    div[style*="grid-template-columns: repeat(2, 1fr)"] {
+      grid-template-columns: 1fr !important;
+    }
+  }
+</style>
diff --git a/app/views/topics/_choose_provider.html.erb b/app/views/topics/_choose_provider.html.erb
index 24dbd92e..59f11f32 100644
--- a/app/views/topics/_choose_provider.html.erb
+++ b/app/views/topics/_choose_provider.html.erb
@@ -1,12 +1,19 @@
-<%= form_for :provider , url: provider_settings_path, method: :put, data: { controller: "topics", topics_target: "chooseForm", turbo_frame: "topics", turbo_action: "advance" } do |f| %>
-  <div class="form-body">
-    <div class="row">
-      <div class="col-md-6 col-12">
-        <div class="form-group">
-          <%= f.label :provider %>
-          <%= f.select :id, options_from_collection_for_select(providers, :id, :name), { prompt: "Change provider" }, class: "form-select", data: { action: "change->topics#chooseProvider" } %>
-        </div>
-      </div>
+<%= form_for :provider, url: provider_settings_path, method: :put, data: { controller: "topics", topics_target: "chooseForm", turbo_frame: "topics", turbo_action: "advance" } do |f| %>
+  <div style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center;">
+    <label for="provider_id" class="input-label" style="margin-bottom:0;">Provider</label>
+    <div style="position:relative; min-width: 220px; max-width: 100%; width: 320px;">
+      <%= f.select :id,
+                   options_from_collection_for_select(providers, :id, :name),
+                   { prompt: "Change provider" },
+                   class: "select-field",
+                   data: { action: "change->topics#chooseProvider" },
+                   id: "provider_id" %>
+      <%= render "shared/dropdown_arrow" %>
     </div>
   </div>
 <% end %>
+
+<style>
+  form[data-topics-target="chooseForm"] { max-width: 100%; }
+  form[data-topics-target="chooseForm"] select { max-width: 100%; }
+</style>
diff --git a/app/views/topics/_document.html.erb b/app/views/topics/_document.html.erb
index 6fd0aa57..c07b7ec3 100644
--- a/app/views/topics/_document.html.erb
+++ b/app/views/topics/_document.html.erb
@@ -7,7 +7,7 @@
     <input type="hidden" name="topic[document_signed_ids][]" value="<%= signed_id %>">
   <% end %>
 
-  <button id="remove-button-<%= blob_counter %>" class="btn btn-primary py-1 px-2 ml-5" data-action="click->upload#removeFile" data-signed-id="<%= signed_id %>">
+  <button id="remove-button-<%= blob_counter %>" class="ml-2 rounded bg-indigo-700 text-white cursor-pointer" data-action="click->upload#removeFile" data-signed-id="<%= signed_id %>">
     <span class="button-span w-5 h-5 flex items-center justify-center">X</span>
   </button>
 </div>
diff --git a/app/views/topics/_form.html.erb b/app/views/topics/_form.html.erb
index ffc2a8f9..05b4f4d5 100644
--- a/app/views/topics/_form.html.erb
+++ b/app/views/topics/_form.html.erb
@@ -1,89 +1,162 @@
 <%= form_for topic do |f| %>
-  <div class="form-body">
-    <div class="row">
-      <%= render "shared/errors", errors: errors.presence || [], resource_name: topic.class.name %>
-      <div class="col-12">
-        <div class="form-group">
-          <%= f.label :title %>
-          <%= f.text_field :title, class: "form-control", placeholder: "Title" %>
-        </div>
-        <div class="form-group">
-          <%= f.label :description %>
-          <%= f.text_area :description, class: "form-control", placeholder: "Description" %>
-        </div>
-        <% if Current.user.is_admin? %>
-          <div class="form-group">
-            <%= f.label :provider %>
-            <%= f.collection_select :provider_id, Provider.all, :id, :name, { prompt: "Select Provider" }, class: "form-select" %>
-          </div>
+  <div>
+    <%= render "shared/errors", errors: errors.presence || [], resource_name: topic.class.name %>
+
+    <div class="form-grid">
+
+      <!-- Topic Title -->
+      <div class="form-grid-full">
+        <%= f.label :title, class: "form-label" do %>
+          Topic Title
+          <span class="form-required">*</span>
         <% end %>
+        <%= f.text_field :title,
+            placeholder: "Enter a clear, descriptive title",
+            class: "form-input" %>
+        <p class="form-help-text">Choose a title that clearly describes the educational content.</p>
+      </div>
+
+      <!-- Description -->
+      <div class="form-grid-full">
+        <%= f.label :description, class: "form-label" %>
+        <%= f.text_area :description,
+            placeholder: "Provide a detailed description of this educational topic...",
+            rows: 4,
+            class: "form-textarea" %>
+        <p class="form-help-text">Describe the learning objectives and content covered in this topic.</p>
+      </div>
+
+      <!-- Provider (Admin Only) -->
+      <% if Current.user.is_admin? %>
         <div>
-          <div class="form-group">
-            <%= f.label :language %>
-            <%= f.collection_select :language_id,
-                                    Language.all,
-                                    :id,
-                                    :name,
-                                    { prompt: "Select language", selected: topic.language&.id || Language.first.id },
-                                    class: "form-select"
-            %>
-          </div>
-          <div class="form-group">
-            <%= f.label :publishing_year %>
-            <%= f.select :published_at_year, options_for_select((2016..Date.today.year).to_a, topic.published_at_year || Date.today.year), { prompt: "Select year of publishing" }, class: "form-select" %>
-          </div>
-          <div class="form-group">
-            <%= f.label :publishing_month %>
-            <%= f.select :published_at_month, options_for_select((1..12).to_a, topic.published_at_month || Date.today.month), { prompt: "Select month of publishing" }, class: "form-select" %>
-          </div>
-          <div class="form-group" data-controller="select-tags">
-            <div class="d-flex">
-              <%= f.label :tag_list, class: "flex-fill" %>
-              <small class="flex-fill text-end fw-light text-muted text-uppercase">Press enter to add a new tag</small>
-            </div>
-            <p>Please note: For any tag you add or remove, its cognates are also added or removed.</p>
-            <%= f.select :tag_list,
-                         options_from_collection_for_select(
-                           ActsAsTaggableOn::Tag.all&.order(name: :asc),
-                           :name,
-                           :name,
-                           topic.tag_list
-                         ),
-                         { prompt: "Select tags", include_blank: true },
-                         multiple: true,
-                         class: "form-select",
-                         data: { "allow-new": "true", "allow-clear": "true", "select-tags-target": "tagList", "resource-type": "topics", "resource-id": f.object.id }
-            %>
+          <%= f.label :provider, class: "form-label" do %>
+            Provider
+            <span class="form-required">*</span>
+          <% end %>
+          <div style="position:relative;">
+            <%= f.collection_select :provider_id, Provider.all, :id, :name,
+                { prompt: "Select Provider" },
+                class: "form-select" %>
+            <%= render "shared/dropdown_arrow" %>
           </div>
+          <p class="form-help-text">Choose the healthcare provider associated with this content.</p>
         </div>
-        <div class="form-group" data-controller="upload" <% if topic.persisted? %> data-upload-topic-id-value="<%= topic.id %>" <% end %>>
-          <%= f.label :documents, style: "display: block" %>
+      <% end %>
 
-          <div data-upload-target="filesContainer">
-            <% if topic.documents_blobs.present? %>
-              <%= render partial: "topics/document_list", locals: { blobs: topic.documents_blobs, hidden_input: false } %>
-            <% end %>
-          </div>
+      <!-- Publishing Year -->
+      <div>
+        <%= f.label :publishing_year, class: "form-label" do %>
+          Publishing Year
+          <span class="form-required">*</span>
+        <% end %>
+        <div style="position:relative;">
+          <%= f.select :published_at_year, options_for_select((2016..Date.today.year).to_a.reverse, topic.published_at_year || Date.today.year),
+            { prompt: "Select year of publishing" },
+            class: "form-select" %>
+          <%= render "shared/dropdown_arrow" %>
+        </div>
+      </div>
+      <!-- Publishing Month -->
+      <div>
+        <%= f.label :publishing_month, class: "form-label" do %>
+          Publishing Month
+          <span class="form-required">*</span>
+        <% end %>
+        <div style="position:relative;">
+          <%= f.select :published_at_month, options_for_select((1..12).to_a, topic.published_at_month || Date.today.month),
+            { prompt: "Select month of publishing" },
+            class: "form-select" %>
+          <%= render "shared/dropdown_arrow" %>
+        </div>
+      </div>
 
-          <% topic.documents.each do |document| %>
-            <%= f.hidden_field :documents, multiple: true, value: document.signed_id, data: { upload_target: "hiddenField" } %>
+      <!-- Language -->
+      <div>
+        <%= f.label :language, class: "form-label" do %>
+          Language
+          <span class="form-required">*</span>
+        <% end %>
+        <div style="position:relative;">
+          <%= f.collection_select :language_id,
+                                  Language.all,
+                                  :id,
+                                  :name,
+                                  { prompt: "Select language", selected: topic.language&.id || Language.first.id },
+                                  class: "form-select" %>
+          <%= render "shared/dropdown_arrow" %>
+        </div>
+      </div>
+      <div data-controller="select-tags">
+        <%= f.label :tag_list, class: "form-label" %>
+        <%= f.select :tag_list,
+                    options_from_collection_for_select(
+                      ActsAsTaggableOn::Tag.all&.order(name: :asc),
+                      :name,
+                      :name,
+                      topic.tag_list
+                    ),
+                    { prompt: "Start typing and press Enter to add a new tag", include_blank: true },
+                    multiple: true,
+                    data: { "allow-new": "true", "allow-clear": "true", "select-tags-target": "tagList" }
+        %>
+        <p class="form-help-text">
+          Add relevant tags to help users discover this content. You can select existing tags or create new ones.
+          <% if topic.persisted? %>
+            For any tag you add or remove, its cognates are also added or removed.
           <% end %>
+        </p>
+      </div>
 
-          <%= f.file_field :documents, multiple: true, class: "form-control mt-4", id: "documents", data: { upload_target: "filesInput", action: "change->upload#uploadFile" } %>
+      <!-- Documents Upload -->
+      <div class="form-grid-full" data-controller="upload" <% if topic.persisted? %> data-upload-topic-id-value="<%= topic.id %>" <% end %>>
 
-          <div class="d-none" data-upload-target="spinner">
-            <div class="spinner-border spinner-border-sm mt-4" role="status">
-              <span class="visually-hidden">Uploading in progress...</span>
+        <div data-upload-target="filesContainer" style="margin-bottom: 1rem;">
+          <% if topic.documents_blobs.present? %>
+            <%= render partial: "topics/document_list", locals: { blobs: topic.documents_blobs, hidden_input: false } %>
+          <% end %>
+        </div>
+
+        <% topic.documents.each do |document| %>
+          <%= f.hidden_field :documents, multiple: true, value: document.signed_id, data: { upload_target: "hiddenField" } %>
+        <% end %>
+
+        <label for="documents" class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 cursor-pointer hover:border-gray-900/50 transition-colors">
+          <div class="text-center">
+            <svg viewBox="0 0 24 24" fill="currentColor" data-slot="icon" aria-hidden="true" class="mx-auto size-12 text-gray-300">
+              <path d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" fill-rule="evenodd" />
+            </svg>
+            <div class="mt-4 flex justify-center text-sm/6 text-gray-600">
+              <span class="font-semibold text-indigo-600 hover:text-indigo-500">Upload a file</span>
+              <%= f.file_field :documents,
+                multiple: true,
+                class: "sr-only",
+                id: "documents",
+                accept: Topic::CONTENT_TYPES.join(","),
+                data: { upload_target: "filesInput",
+                action: "change->upload#uploadFile" }
+              %>
             </div>
-            <span>Uploading in progress...</span>
+            <p class="text-xs/5 text-gray-600">Images, PDFs or audio files</p>
           </div>
+        </label>
+
 
-          <div class="col-12 d-flex justify-content-end mt-4">
-            <%= f.submit class: "btn btn-primary me-1 mb-1", data: { upload_target: "submitButton" } %>
-            <%= link_to "Cancel", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
+        <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid #f3f4f6; margin-top: 2rem;">
+          <div style="display: flex; gap: 1rem;">
+            <%= f.submit "Save Topic", data: { upload_target: "submitButton" }, style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
+            <%= link_to "Back to Topics", topics_path,
+              class: "topic-form-cancel-btn",
+              style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
           </div>
+
+          <% if topic.persisted? %>
+            <div style="color: #6b7280; font-size: 0.75rem;">
+              Last updated: <%= topic.updated_at.strftime("%B %d, %Y at %I:%M %p") %>
+            </div>
+          <% end %>
         </div>
       </div>
     </div>
+
   </div>
 <% end %>
diff --git a/app/views/topics/_list.html.erb b/app/views/topics/_list.html.erb
index 40b2da9c..d53666b1 100644
--- a/app/views/topics/_list.html.erb
+++ b/app/views/topics/_list.html.erb
@@ -1,21 +1,97 @@
 <tbody>
-  <% @topics.each do |topic| %>
-    <tr>
-      <td class="text-bold-500"><%= topic.title %></td>
-      <td class="text-bold-500"><%= topic.description.present? && topic.description.truncate(25, omission: "...") %></td>
-      <td class="text-bold-500"><%= topic.uid.truncate(10, omission: "...") if topic.uid %></td>
-      <td class="text-bold-500"><%= topic.language.name %></td>
-      <td class="text-bold-500"><%= topic.provider.name %></td>
-      <td class="text-bold-500"><%= topic.documents.size %></td>
-      <td class="text-bold-500"><span class="badge <%= topic.state == "active" ? "bg-success" : "bg-light-danger" %>"><%= topic.state %></span></td>
-      <td class="text-end">
-        <%= link_to topic_path(topic, search: search_params), class: "btn btn-primary btn-sm", data: { testid: topic.id, turbo: false } do %>
-          <i class="bi bi-search"></i> View
-        <% end %>
-        <%= link_to edit_topic_path(topic), class: "btn btn-secondary btn-sm", data: { turbo: false } do %>
-          <i class="bi bi-pencil"></i> Edit
-        <% end %>
-      </td>
-    </tr>
+  <% if @topics.any? %>
+    <% @topics.each do |topic| %>
+      <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+        <!-- Title -->
+        <td style="padding: 1.25rem 1.5rem;">
+          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">
+            <div style="font-weight: 600; color: #111827; font-size: 0.95rem;"><%= topic.title %></div>
+            <div style="color: #6b7280; font-size: 0.75rem;">Published <%= topic.published_at&.strftime('%b %d, %Y') %></div>
+          </div>
+        </td>
+
+        <!-- Description -->
+        <td class="hide-mobile" style="padding: 1.25rem 1.5rem; color: #374151; font-size: 0.875rem;">
+          <% if topic.description.present? %>
+            <%= truncate(topic.description, length: 60, omission: '…') %>
+          <% else %>
+            <span style="color: #94a3b8; font-style: italic;">No description</span>
+          <% end %>
+        </td>
+
+        <!-- UID -->
+        <td class="hide-mobile" style="padding: 1.25rem 1.5rem; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem;">
+          <%= topic.uid.present? ? truncate(topic.uid, length: 12, omission: '…') : '-' %>
+        </td>
+
+        <!-- Language -->
+        <td style="padding: 1.25rem 1.5rem;">
+          <span style="background: #e0e7ff; color: #3730a3; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;">
+            <%= topic.language.name %>
+          </span>
+        </td>
+
+        <!-- Provider -->
+        <td class="hide-mobile" style="padding: 1.25rem 1.5rem; color: #374151; font-size: 0.875rem;">
+          <%= topic.provider.name %>
+        </td>
+
+        <!-- Documents count -->
+        <td style="padding: 1.25rem 1.5rem;">
+          <span style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 700;">
+            <%= topic.documents.size %>
+          </span>
+        </td>
+
+        <!-- State -->
+        <td style="padding: 1.25rem 1.5rem;">
+          <% if topic.active? %>
+            <span style="background: #dcfce7; color: #166534; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">Active</span>
+          <% else %>
+            <span style="background: #fee2e2; color: #991b1b; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">Archived</span>
+          <% end %>
+        </td>
+
+  <!-- Actions -->
+  <td class="actions-col" style="padding: 1.25rem 1.5rem; text-align: right;">
+          <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+            <%= link_to topic_path(topic, search: search_params), style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
+              <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+              </svg>
+              <span>View</span>
+            <% end %>
+            <%= link_to edit_topic_path(topic), style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { testid: topic.id, turbo: false } do %>
+              <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+              </svg>
+              <span>Edit</span>
+            <% end %>
+          </div>
+        </td>
+      </tr>
+    <% end %>
   <% end %>
 </tbody>
+
+<% unless @topics.any? %>
+  <!-- Empty state displayed outside the table -->
+  <div style="padding: 3rem 1.5rem; text-align: center;">
+    <div style="color: #9ca3af;">
+      <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+      </svg>
+      <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No topics found</p>
+      <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Try adjusting your search filters or create a new topic.</p>
+    </div>
+  </div>
+<% end %>
+
+<style>
+  /* Action button hover effects */
+  a[href*="topics/"]:hover { transform: translateY(-1px); }
+  a[href*="topics/"][style*="background: #3b82f6"]:hover { background: #2563eb !important; }
+  a[href*="edit"]:hover { background: #4b5563 !important; }
+  tbody tr:hover td:first-child > div > div:first-child { transform: scale(1.05); }
+</style>
diff --git a/app/views/topics/_search.html.erb b/app/views/topics/_search.html.erb
index 7a23b4bc..108f9b69 100644
--- a/app/views/topics/_search.html.erb
+++ b/app/views/topics/_search.html.erb
@@ -1,75 +1,156 @@
-<div class="card">
-  <div class="card-header d-flex justify-content-between align-items-center">
-    <h2 class="card-title">Search</h2>
+<div style="background: white; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); overflow: hidden;">
+  <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 1.5rem; border-bottom: 1px solid #bae6fd;">
+    <div style="display: flex; align-items: center; gap: 0.75rem;">
+      <div style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: white; padding: 0.5rem; border-radius: 0.5rem;">
+        <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+      <h3 style="font-size: 1.125rem; font-weight: 600; color: #0c4a6e; margin: 0;">Search & Filter Topics</h3>
+    </div>
   </div>
-  <div class="card-content">
-    <div class="card-body">
-      <%= form_for :search, url: topics_path, method: :get, data: { controller: "topics", topics_target: "searchForm", turbo_frame: "topic-list", turbo_action: "advance" } do |f| %>
-        <div class="form-body">
-          <div class="row">
-            <div class="col-md-6 col-12">
-              <div class="form-group">
-                <%= f.label :query %>
-                <%= f.text_field :query, value: params[:query], class: "form-control", data: { action: "input->topics#searchTopics" } %>
-              </div>
-            </div>
-            <div class="col-md-6 col-12"
-                 data-controller="select-tags"
-                 data-action="select-tags:notify->topics#searchTopics:captures">
-              <div class="form-group">
-                <div class="d-flex">
-                  <%= f.label :tag_list, class: "flex-fill" %>
-                </div>
-                <%= f.select :tag_list,
-                             options_from_collection_for_select(
-                               Tag.order(:name),
-                               :name,
-                               :name,
-                               []
-                             ),
-                             { prompt: "Select tags", include_hidden: false },
-                             multiple: true,
-                             class: "form-select",
-                             data: { "allow-clear": "true", "select-tags-target": "tagList", "action": "change->select-tags#notify" }
-                %>
-              </div>
-            </div>
-            <div class="col-md-6 col-12">
-              <div class="form-group">
-                <%= f.label :language %>
-                <%= f.select :language_id, options_from_collection_for_select(languages, :id, :name, params[:language_id]),  { prompt: "Select language" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
-              </div>
-            </div>
-            <div class="col-md-3 col-12">
-              <div class="form-group">
-                <%= f.label :year %>
-                <%= f.select :year, options_for_select((Date.today.year-10..Date.today.year).to_a, params[:year]), { prompt: "Select year" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
-              </div>
-            </div>
-            <div class="col-md-3 col-12">
-              <div class="form-group">
-                <%= f.label :month %>
-                <%= f.select :month, options_for_select((1..12).to_a, params[:month]), { prompt: "Select month" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
-              </div>
-            </div>
-            <div class="col-md-6 col-12">
-              <div class="form-group">
-                <%= f.label :state %>
-                <%= f.select :state, options_for_select(Topic::STATES.index_with(&:itself), params[:state]), { prompt: "Select state" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
-              </div>
-            </div>
-            <div class="col-md-6 col-12">
-              <div class="form-group">
-                <%= f.label :order %>
-                <%= f.select :order, options_for_select(Topic::SORTS.reverse.index_with(&:itself), params[:order]), {}, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+  <div style="padding: 1.5rem;">
+    <%= form_for :search, url: topics_path, method: :get, data: { controller: "topics", topics_target: "searchForm", turbo_frame: "topic-list", turbo_action: "advance" } do |f| %>
+      <div id="topics-search-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; align-items: start;">
+        <!-- Query -->
+        <div class="form-grid-full">
+          <%= f.label :query, class: "input-label" %>
+          <%= f.text_field :query,
+                value: params.dig(:search, :query),
+                placeholder: "Search by title, description or UID…",
+                class: "input-field",
+                data: { action: "input->topics#searchTopics" } %>
+        </div>
+
+        <!-- Language & Tags -->
+        <div style="min-width:0; grid-column: 1 / -1;">
+          <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; align-items:start;">
+            <div style="position:relative;">
+              <%= f.label :language_id, "Language", class: "input-label" %>
+              <div style="position:relative;">
+                <%= f.select :language_id,
+                             options_from_collection_for_select(languages, :id, :name, params.dig(:search, :language_id)),
+                             { prompt: "Select language" },
+                             class: "select-field",
+                             data: { action: "change->topics#searchTopics" } %>
+                <%= render "shared/dropdown_arrow" %>
               </div>
             </div>
-            <div class="col-12 d-flex justify-content-end">
-              <%= link_to "Clear", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
+
+            <div data-controller="select-tags" style="position:relative;">
+              <%= f.label :tag_list, "Tags", class: "input-label" %>
+              <%= f.select :tag_list,
+                           options_for_select(Tag.order(:name).pluck(:name), Array(params.dig(:search, :tag_list))),
+                           { include_hidden: false },
+                           multiple: true,
+                           id: "search_tag_list",
+                           placeholder: "Select tags...",
+                           data: { "select-tags-target": "tagList", "allow-clear": "true", "allow-new": "false", action: "change->topics#searchTopics" } %>
             </div>
           </div>
         </div>
-      <% end %>
-    </div>
+
+        <!-- Year -->
+        <div style="min-width:0; position:relative;">
+          <%= f.label :year, class: "input-label" %>
+          <div style="position:relative;">
+            <%= f.select :year,
+                         options_for_select((Date.today.year-10..Date.today.year).to_a, params.dig(:search, :year)),
+                         { prompt: "Select year" },
+                         class: "select-field",
+                         data: { action: "change->topics#searchTopics" } %>
+            <%= render "shared/dropdown_arrow" %>
+          </div>
+        </div>
+
+        <!-- Month -->
+        <div style="min-width:0; position:relative;">
+          <%= f.label :month, class: "input-label" %>
+          <div style="position:relative;">
+            <%= f.select :month,
+                         options_for_select((1..12).to_a, params.dig(:search, :month)),
+                         { prompt: "Select month" },
+                         class: "select-field",
+                         data: { action: "change->topics#searchTopics" },
+                         onchange: "this.form.requestSubmit()" %>
+            <%= render "shared/dropdown_arrow" %>
+          </div>
+        </div>
+
+        <!-- State -->
+        <div style="min-width:0; position:relative;">
+          <%= f.label :state, class: "input-label" %>
+          <div style="position:relative;">
+            <%= f.select :state,
+                         options_for_select(Topic::STATES.index_with(&:itself), params.dig(:search, :state)),
+                         { prompt: "Select state" },
+                         class: "select-field",
+                         data: { action: "change->topics#searchTopics" },
+                         onchange: "this.form.requestSubmit()" %>
+            <%= render "shared/dropdown_arrow" %>
+          </div>
+        </div>
+
+        <!-- Order -->
+        <div style="min-width:0; position:relative;">
+          <%= f.label :order, class: "input-label" %>
+          <div style="position:relative;">
+            <%= f.select :order,
+                         options_for_select(%w[desc asc].map { |o| [o, o] }, params.dig(:search, :order)),
+                         {},
+                         class: "select-field",
+                         data: { action: "change->topics#searchTopics" } %>
+            <%= render "shared/dropdown_arrow" %>
+          </div>
+        </div>
+      </div>
+
+      <!-- Clear Button -->
+      <div style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
+        <%= link_to topics_path,
+            class: "clear-filters-btn",
+            style: "background:#6b7280; color:white; padding:0.625rem 1.25rem; border-radius:0.5rem; text-decoration:none; font-weight:600; font-size:0.875rem; display:inline-flex; align-items:center; gap:0.5rem; transition:all 0.2s; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);" do %>
+          <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <span>Clear Filters</span>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 </div>
+
+<style>
+  /* Modern form input and select focus states */
+  input[type="text"]:focus, select:focus {
+    outline: none !important;
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
+    background: white !important;
+  }
+
+  /* Select hover state */
+  select:hover:not(:focus) {
+    border-color: #9ca3af !important;
+    background: #fafafa !important;
+  }
+
+  /* Clear Filters button hover - specific to search form only */
+  .clear-filters-btn:hover {
+    background: #4b5563 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
+  }
+
+  /* Responsive grid collapse */
+  @media (max-width: 768px) {
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+    }
+  }
+
+  /* Prevent grid items from forcing overflow */
+  #topics-search-grid > div { min-width: 0 !important; }
+  /* Ensure the grid itself can shrink */
+  #topics-search-grid { min-width: 0; }
+</style>
diff --git a/app/views/topics/_topic.html.erb b/app/views/topics/_topic.html.erb
index 7fa89dfc..946508bc 100644
--- a/app/views/topics/_topic.html.erb
+++ b/app/views/topics/_topic.html.erb
@@ -1,79 +1,90 @@
-<div id="<%= dom_id topic %>">
-  <div class="section">
-    <h3 class="mb-4">Topic: <%= topic.id %></h3>
-    <div class="card mb-6">
-      <div class="card-header">
-        <div class="card-title">
-          <h3><%= topic.title %></h3>
-        </div>
-      </div>
-      <div class="card-body">
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>UID:</strong></div>
-          <div class="col-md-9"><%= topic.uid %></div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>Description:</strong></div>
-          <div class="col-md-9"><%= topic.description %></div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>Provider:</strong></div>
-          <div class="col-md-9"><%= link_to topic.provider.name, topic.provider, class: "text-decoration-none" %></div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>Language:</strong></div>
-          <div class="col-md-9"><%= link_to topic.language.name, topic.language, class: "text-decoration-none" %></div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-md-3"><strong>Publishing at:</strong></div>
-          <div class="col-md-9"><%= topic.published_at.strftime('%m/%d/%Y') %></div>
-        </div>
-      </div>
-      <div class="card-footer">
-        <strong>Tags:</strong>
-        <% topic.tags.each do |tag| %>
-          <%= link_to tag.name, tag_path(tag), class: "badge bg-success text-decoration-none me-1", target: "_blank" %>
-        <% end %>
+<div style="background: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem;">
+  <!-- Topic Content -->
+  <% if @topic.description.present? %>
+    <div style="margin-bottom: 2rem;">
+      <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Description</h3>
+      <div style="color: #4b5563; line-height: 1.6;">
+        <%= simple_format(@topic.description) %>
       </div>
     </div>
-  </div>
+  <% end %>
 
-  <div class="section">
-    <div class="col-12">
-      <h3 class="mb-4">Documents</h3>
-    </div>
-    <div>
-      <% topic.documents.each do |document| %>
-        <div class="card">
-          <div class="card-content">
-            <div class="card-body">
-              <div class="card-title">
-                <h4><%= document.filename %></h4>
-              </div>
+  <!-- Documents Section -->
+  <% if @topic.documents.any? %>
+    <div style="margin-bottom: 2rem;">
+      <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Documents</h3>
+      <div style="display: grid; gap: 1rem;">
+        <% @topic.documents.each do |document| %>
+          <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;">
+            <div style="background: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center;">
+              <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
             </div>
-
-            <%= card_preview_media(document) %>
-
-            <div class="card-body">
-              <div class="d-flex justify-content-between">
-                <div>
-                  <span class="btn btn-sm btn-outline-secondary">
-                    <i class="bi bi-calendar-date"></i>
-                    <%= document.created_at.strftime('%m/%d/%Y') %>
-                  </span>
-                  <span class="btn btn-sm btn-outline-secondary">
-                    <i class="bi bi-clipboard-data"></i>
-                    <%= number_to_human_size(document.byte_size) %>
-                  </span>
-                </div>
-                <%= link_to rails_blob_path(document), target: "_blank", class: "btn btn-primary" do %>
-                  <i class="bi bi-file-arrow-down"></i> Download
-                <% end %>
+            <div style="flex: 1;">
+              <%= link_to document.filename, rails_blob_path(document, disposition: "inline"),
+                  style: "color: #2563eb; text-decoration: none; font-weight: 500; hover:text-decoration: underline;" %>
+              <div style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">
+                <%= number_to_human_size(document.byte_size) %>
               </div>
             </div>
+            <div>
+              <%= link_to rails_blob_path(document, disposition: "attachment"),
+                  style: "background: #10b981; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.875rem; font-weight: 500; hover:background: #059669; transition: background-color 0.2s;" do %>
+                Download
+              <% end %>
+            </div>
           </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Topic Details -->
+  <div style="border-top: 1px solid #e5e7eb; padding-top: 2rem;">
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
+
+      <!-- Language -->
+      <% if @topic.language.present? %>
+        <div>
+          <div style="font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Language</div>
+          <div style="color: #6b7280;"><%= @topic.language.name %></div>
         </div>
       <% end %>
+
+      <!-- Provider -->
+      <% if @topic.provider.present? %>
+        <div>
+          <div style="font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Provider</div>
+          <div style="color: #6b7280;"><%= @topic.provider.name %></div>
+        </div>
+      <% end %>
+
+      <!-- Created Date -->
+      <div>
+        <div style="font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Created</div>
+        <div style="color: #6b7280;"><%= @topic.created_at.strftime("%B %d, %Y") %></div>
+      </div>
+
+      <!-- Last Updated -->
+      <div>
+        <div style="font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Last Updated</div>
+        <div style="color: #6b7280;"><%= @topic.updated_at.strftime("%B %d, %Y") %></div>
+      </div>
     </div>
   </div>
+
+  <!-- Tags -->
+  <% if @topic.tags.any? %>
+    <div style="border-top: 1px solid #e5e7eb; padding-top: 2rem; margin-top: 2rem;">
+      <div style="font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 1rem;">Tags</div>
+      <div style="display: flex; flex-wrap: gap: 0.5rem;">
+        <% @topic.tags.each do |tag| %>
+          <span style="background: #dbeafe; color: #1e40af; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+            <%= tag.name %>
+          </span>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/topics/edit.html.erb b/app/views/topics/edit.html.erb
index 532dba56..b763277b 100644
--- a/app/views/topics/edit.html.erb
+++ b/app/views/topics/edit.html.erb
@@ -1,18 +1,115 @@
 <% content_for :title, "Editing topic" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">Edit topic</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+        <%= link_to topics_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+          <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+          </svg>
+        <% end %>
+        <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+          Edit Topic
+        </h1>
+        <div style="background: #fef3c7; color: #d97706; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+          <%= @topic.title %>
+        </div>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Topics", topics_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to @topic.title, @topic, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Edit</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Main Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Update Topic Information</h2>
+            <p style="margin: 0.5rem 0 0 0; color: rgba(255, 255, 255, 0.8);">
+              Modify details for "<%= @topic.title %>"
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", topic: @topic, errors: @errors %>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
+      <%= link_to @topic, style: "background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+        </svg>
+        View Topic Details
+      <% end %>
+
+      <%= link_to topics_path, style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+        <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
+        </svg>
+        Back to All Topics
+      <% end %>
+    </div>
+
+    <!-- Topic Statistics -->
+    <div style="margin-top: 2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem;">
+      <div style="display: flex; align-items: start; gap: 1rem;">
+        <div style="background: #dcfce7; color: #16a34a; padding: 0.5rem; border-radius: 0.5rem; margin-top: 0.25rem;">
+          <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+          </svg>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", topic: @topic, errors: @errors %>
+        <div>
+          <h3 style="font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 0.75rem 0;">Topic Statistics</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; color: #6b7280; font-size: 0.875rem;">
+            <div>
+              <span style="font-weight: 500; color: #374151;">Language:</span> <%= @topic.language&.name || "Not specified" %>
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Provider:</span> <%= @topic.provider&.name || "Not specified" %>
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Documents:</span> <%= @topic.documents.count %> attached
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Tags:</span> <%= @topic.tags.count %> assigned
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Status:</span>
+              <span style="<%= @topic.archived? ? 'color: #dc2626;' : 'color: #059669;' %>"><%= @topic.archived? ? 'Archived' : 'Active' %></span>
+            </div>
+            <div>
+              <span style="font-weight: 500; color: #374151;">Created:</span> <%= @topic.created_at.strftime("%B %d, %Y") %>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</section>
+</div>
diff --git a/app/views/topics/index.html.erb b/app/views/topics/index.html.erb
index 7460154f..f5b94254 100644
--- a/app/views/topics/index.html.erb
+++ b/app/views/topics/index.html.erb
@@ -1,48 +1,149 @@
 <% content_for :title, "Topics" %>
 
-<section class="section">
-  <div class="row" id="table-striped">
-    <div class="col-12 cold-md-12">
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Topics</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage educational topics and their associated content</p>
+        </div>
+
+        <%= link_to new_topic_path, style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05); transition: all 0.2s;", data: {turbo: false } do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New Topic</span>
+        <% end %>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Topics</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Search Card -->
+    <div style="margin-bottom: 2rem;">
       <%= render "search", providers: @providers, languages: @languages, params: search_params  %>
-      <%= turbo_frame_tag "topics" do %>
-        <div class="card">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <h2 class="card-title"><%= topics_title %></h2>
-            <%= link_to new_topic_path, class: "btn btn-primary", data: {turbo: false } do %>
-              <i class="bi bi-plus"></i> Add New Topic
-            <% end %>
+    </div>
+
+  <!-- Topics Table Card -->
+  <%= turbo_frame_tag "topics" do %>
+  <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); padding: 2rem; color: white;">
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+              </svg>
+            </div>
+            <div>
+              <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;"><%= topics_title %></h2>
+              <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+                <%= pluralize(@pagy.count, 'topic') %> found
+              </p>
+            </div>
           </div>
-          <div class="card-content">
-            <div class="card-body">
-              <% if @available_providers.any? %>
-                <%= render "choose_provider", providers: @available_providers %>
-              <% end %>
-              <%= turbo_frame_tag "topic-list" do %>
-                <div class="table-responsive">
-                  <table class="table table-lg table-striped mb-0">
-                    <thead>
-                      <tr>
-                        <th>Title</th>
-                        <th>Description</th>
-                        <th>UID</th>
-                        <th>Language</th>
-                        <th>Provider</th>
-                        <th># of Documents</th>
-                        <th>State</th>
-                        <th class="text-end">Actions</th>
-                      </tr>
-                    </thead>
-                    <%= render "list", topics: @topics, params: search_params %>
-                  </table>
-                </div>
-                <div class="card-footer d-flex justify-content-end">
-                  <%== pagy_bootstrap_nav(@pagy) %>
-                </div>
-              <% end %>
+
+          <div style="display: flex; gap: 0.75rem; align-items: center;">
+            <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              Total: <%= @pagy.count %>
             </div>
           </div>
         </div>
-      <% end %>
-    </div>
+      </div>
+
+      <!-- Card Content -->
+      <div style="padding: 0;">
+        <% if @available_providers.any? %>
+          <div style="padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
+            <%= render "choose_provider", providers: @available_providers %>
+          </div>
+        <% end %>
+
+        <%= turbo_frame_tag "topic-list" do %>
+          <div class="table-container" style="overflow-x: auto;">
+            <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
+              <thead>
+                <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">Title</th>
+                  <th class="hide-mobile" style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">Description</th>
+                  <th class="hide-mobile" style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">UID</th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">Language</th>
+                  <th class="hide-mobile" style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">Provider</th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;"># of Documents</th>
+                  <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis;">State</th>
+                  <th class="actions-col" style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em; width: 160px;">Actions</th>
+                </tr>
+              </thead>
+              <%= render "list", topics: @topics, params: search_params %>
+            </table>
+          </div>
+
+          <!-- Pagination -->
+          <div style="background: #f8fafc; padding: 1.5rem 2rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+            <div style="color: #6b7280; font-size: 0.875rem;">
+              Showing <%= @topics.size %> of <%= @pagy.count %> topics
+            </div>
+            <div>
+              <%= render "shared/pagination", pagy: @pagy %>
+            </div>
+          </div>
+        <% end %>
+      </div>
   </div>
-</section>
+  <% end %>
+  </div>
+</div>
+
+<style>
+  a[href*="new_topic"]:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
+  }
+
+  @media (max-width: 768px) {
+    .hide-mobile { display: none !important; }
+    div[style*="max-width: 1200px"] { padding: 0 0.5rem !important; }
+    div[style*="min-height: 100vh"] { padding: 1rem 0 !important; }
+    div[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
+    h1 { font-size: 2rem !important; }
+    th, td { padding: 0.75rem 0.5rem !important; font-size: 0.875rem !important; }
+    .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
+  }
+
+  @media (max-width: 640px) {
+    div[style*="padding: 0 1rem"] { padding: 0 0.25rem !important; }
+    div[style*="border-radius: 1rem"] { border-radius: 0 !important; margin: 0 -0.25rem !important; }
+    div[style*="padding: 2rem"] { padding: 1rem 0.75rem !important; }
+    h1 { font-size: 1.75rem !important; }
+    th, td { padding: 0.5rem 0.25rem !important; font-size: 0.75rem !important; word-wrap: break-word !important; word-break: break-word !important; }
+  }
+</style>
+
+<style>
+  .table-container table td:not(.actions-col), .table-container table th:not(.actions-col) {
+    word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;
+  }
+  .table-container table td.actions-col { white-space: nowrap; }
+  @media (max-width: 768px) {
+    .table-container table { table-layout: auto !important; }
+  }
+</style>
diff --git a/app/views/topics/new.html.erb b/app/views/topics/new.html.erb
index 30ec69f1..71b91004 100644
--- a/app/views/topics/new.html.erb
+++ b/app/views/topics/new.html.erb
@@ -1,18 +1,77 @@
 <% content_for :title, "New topic" %>
 
-<section id="basic-vertical-layouts">
-  <div class="row match-height">
-    <div class="col-md-6 col-12">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">New topic</h2>
-        </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", topic: @topic, errors: @errors %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+        <%= link_to topics_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+          <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+          </svg>
+        <% end %>
+        <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+          Create New Topic
+        </h1>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Topics", topics_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">New Topic</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Main Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Topic Information</h2>
+            <p style="margin: 0.5rem 0 0 0; color: rgba(255, 255, 255, 0.8);">
+              Create a new educational topic with content and metadata
+            </p>
           </div>
         </div>
       </div>
+      
+      <!-- Form Content -->
+      <div style="padding: 2rem;">
+        <%= render "form", topic: @topic, errors: @errors %>
+      </div>
+    </div>
+
+    <!-- Help Section -->
+    <div style="margin-top: 2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem;">
+      <div style="display: flex; align-items: start; gap: 1rem;">
+        <div style="background: #dbeafe; color: #1e40af; padding: 0.5rem; border-radius: 0.5rem; margin-top: 0.25rem;">
+          <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 0.75rem 0;">Creating Educational Topics</h3>
+          <ul style="color: #6b7280; font-size: 0.875rem; line-height: 1.6; margin: 0; padding-left: 1.25rem;">
+            <li><strong>Title:</strong> Use clear, descriptive titles that help users find relevant content</li>
+            <li><strong>Description:</strong> Provide a comprehensive overview of the topic's educational value</li>
+            <li><strong>Tags:</strong> Add relevant tags to improve searchability and organization</li>
+            <li><strong>Documents:</strong> Upload supporting materials, PDFs, or reference documents</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
-</section>
+</div>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index ef78f641..e5ea4f1e 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -1,25 +1,106 @@
-<div style="color: green"><%= notice %></div>
+<% content_for :title, @topic.title %>
 
-<%= render @topic %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
 
-<%= link_to "Back to topics", topics_path(search: search_params), class: "mt-4" %>
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+  <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to topics_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            <%= @topic.title %>
+          </h1>
+          <div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+            <%= @topic.archived? ? "Archived" : "Active" %>
+          </div>
+        </div>
 
-<div>
-  <%= link_to "Edit this topic", edit_topic_path(@topic), class: "btn btn-primary mt-4" %>
-</div>
+        <!-- Action Buttons -->
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <%= link_to edit_topic_path(@topic), style: "background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+            Edit Topic
+          <% end %>
 
-<% if @topic.archived? %>
-  <div>
-    <%= button_to "Unarchive this topic", unarchive_topic_path(@topic), method: :put, class: "btn btn-danger mt-4" %>
-  </div>
-<% else %>
-  <div>
-    <%= button_to "Archive this topic", archive_topic_path(@topic), method: :put, class: "btn btn-danger mt-4" %>
-  </div>
-<% end %>
+          <% if @topic.archived? %>
+            <%= button_to unarchive_topic_path(@topic), method: :put,
+                style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+              <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+              </svg>
+              Unarchive Topic
+            <% end %>
+          <% else %>
+            <%= button_to archive_topic_path(@topic), method: :put,
+                style: "background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+              <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8l4 4 4-4"/>
+              </svg>
+              Archive Topic
+            <% end %>
+          <% end %>
+
+          <% if Current.user.is_admin? %>
+            <div id="delete_topic_<%= @topic.id %>">
+              <%= button_to @topic, method: :delete,
+                  data: { confirm: "Are you sure you want to delete '#{@topic.title}'? This action cannot be undone." },
+                  style: "background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(127, 29, 29, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+                <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                </svg>
+                Delete Topic
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Topics", topics_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @topic.title %></li>
+        </ol>
+      </nav>
+    </div>
 
-<% if Current.user.is_admin? %>
-  <div id="delete_topic_<%= @topic.id %>">
-    <%= button_to "Delete this topic", @topic, method: :delete, class: "btn btn-danger mt-4" %>
+    <!-- Success Message -->
+    <% if notice %>
+      <div style="background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; color: #166534; padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 0.75rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span style="font-weight: 500;"><%= notice %></span>
+      </div>
+    <% end %>
+
+    <!-- Main Content -->
+    <%= render @topic %>
   </div>
-<% end %>
+</div>
+
+<style>
+  /* Button hover effects */
+  button:hover, a[href*="edit"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    div[style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+    }
+  }
+</style>
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 97193adc..7a75aaff 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -1,55 +1,172 @@
-<%= form_with(model: user) do |form| %>
+<%= form_with(model: user, style: "width: 100%;") do |form| %>
+  <!-- Error Messages -->
   <% if user.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
-
-      <ul>
+    <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+        <svg style="width: 1.25rem; height: 1.25rem; color: #dc2626;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <h3 style="color: #dc2626; font-weight: 600; margin: 0; font-size: 1rem;">
+          <%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:
+        </h3>
+      </div>
+      <ul style="margin: 0; padding-left: 1.5rem; color: #dc2626; font-size: 0.875rem;">
         <% user.errors.each do |error| %>
-          <li><%= error.full_message %></li>
+          <li style="margin-bottom: 0.25rem;"><%= error.full_message %></li>
         <% end %>
       </ul>
     </div>
   <% end %>
 
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :email, style: "display: block" %>
-      <%= form.text_field :email, class: "form-control", autofocus: true %>
+  <!-- Form Fields -->
+  <div style="display: grid; gap: 2rem;">
+
+    <!-- Email Field -->
+    <div>
+      <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.75rem; font-size: 0.875rem;">
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+          Email Address
+          <span style="color: #dc2626;">*</span>
+        </div>
+      </label>
+      <%= form.email_field :email,
+          style: "width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; font-size: 0.875rem; transition: all 0.2s; background: white;",
+          placeholder: "Enter email address...",
+          autofocus: true,
+          required: true,
+          onfocus: "this.style.borderColor='#6366f1'; this.style.boxShadow='0 0 0 3px rgba(99, 102, 241, 0.1)'",
+          onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none'" %>
     </div>
-  </div>
-  <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :password, style: "display: block" %>
-      <%= form.text_field :password, class: "form-control", autofocus: true %>
+
+    <!-- Password Field -->
+    <div>
+      <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.75rem; font-size: 0.875rem;">
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+          </svg>
+          Password
+          <% if !user.persisted? %>
+            <span style="color: #dc2626;">*</span>
+          <% end %>
+        </div>
+      </label>
+      <%= form.password_field :password,
+          style: "width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; font-size: 0.875rem; transition: all 0.2s; background: white;",
+          placeholder: "Enter password...",
+          required: !user.persisted?,
+          onfocus: "this.style.borderColor='#6366f1'; this.style.boxShadow='0 0 0 3px rgba(99, 102, 241, 0.1)'",
+          onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none'" %>
+      <p style="margin: 0.5rem 0 0 0; color: #6b7280; font-size: 0.75rem;">
+        <% if user.persisted? %>
+          Leave blank to keep current password
+        <% else %>
+          Minimum 8 characters required
+        <% end %>
+      </p>
     </div>
-  </div>
-    <div class="col-md-4">
-    <div class="form-group">
-      <%= form.label :is_admin, style: "display: block" %>
-      <%= form.check_box :is_admin, autofocus: true %>
+
+    <!-- Admin Checkbox -->
+    <div style="background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem;">
+      <div style="display: flex; align-items: start; gap: 1rem;">
+        <div style="display: flex; align-items: center; margin-top: 0.125rem;">
+          <%= form.check_box :is_admin,
+              style: "width: 1.25rem; height: 1.25rem; accent-color: #dc2626; cursor: pointer;" %>
+        </div>
+        <div style="flex: 1;">
+          <label for="<%= form.field_id(:is_admin) %>" style="cursor: pointer; display: block;">
+            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <svg style="width: 1.125rem; height: 1.125rem; color: #dc2626;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+              </svg>
+              <span style="font-weight: 600; color: #374151; font-size: 0.875rem;">Administrator Privileges</span>
+            </div>
+            <p style="margin: 0; color: #6b7280; font-size: 0.75rem; line-height: 1.5;">
+              Grant this user full administrative access including user management, system settings, and all data modification capabilities.
+            </p>
+          </label>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="col-md-4" data-controller="selectable">
-    <div class="form-group">
-      <%= form.label :contributors, "Providers", style: "display: block" %>
-      <%=
-        form.collection_select :provider_ids,
-        Provider.order(:name),
-        :id,
-        :name,
-        { prompt: "Select provider", include_blank: true },
-        class: "form-select",
-        multiple: true,
-        data: { "allow-clear": "true", "not-found-message": "Please select a provider from the list", "selectable-target": "selectableList" }
-      %>
+    <!-- Providers Selection -->
+    <div>
+      <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.75rem; font-size: 0.875rem;">
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+          </svg>
+          Associated Providers
+          <span style="color: #dc2626;">*</span>
+        </div>
+      </label>
+      <div  data-controller="select-tags">
+        <%= form.select :provider_ids,
+                        options_from_collection_for_select(
+                          Provider.order(:name),
+                          :id,
+                          :name,
+                          user.providers.ids
+            ),
+            { prompt: "Select providers", include_blank: false },
+            {
+              multiple: true,
+              data: { "allow-new": "true", "allow-clear": "true", "select-tags-target": "tagList" }
+            } %>
+        </div>
+      <p style="margin: 0.5rem 0 0 0; color: #6b7280; font-size: 0.75rem;">
+        Select which providers this user can access and manage content for.
+      </p>
     </div>
   </div>
 
-  <div class="mt-4">
-    <div class="col-12 d-flex justify-content-end">
-      <%= form.submit class: "btn btn-primary me-1 mb-1" %>
-      <%= link_to "Cancel", users_path, class: "btn btn-light-secondary me-1 mb-1" %>
-    </div>
+  <!-- Form Actions -->
+  <div style="margin-top: 3rem; display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap;">
+    <%= link_to users_path,
+        style: "background: #f3f4f6; color: #374151; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s; border: 1px solid #d1d5db;",
+        onmouseover: "this.style.background='#e5e7eb'; this.style.transform='translateY(-1px)'",
+        onmouseout: "this.style.background='#f3f4f6'; this.style.transform='translateY(0)'" do %>
+      <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+      </svg>
+      Cancel
+    <% end %>
+
+    <%= form.submit user.persisted? ? "Update User" : "Create User",
+        style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; border: none; cursor: pointer; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;",
+        onmouseover: "this.style.transform='translateY(-2px)'; this.style.boxShadow='0 10px 25px -5px rgba(16, 185, 129, 0.4)'",
+        onmouseout: "this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px -1px rgba(16, 185, 129, 0.3)'" %>
   </div>
 <% end %>
+
+<style>
+  /* Form field focus styles */
+  input:focus, select:focus, textarea:focus {
+    outline: none !important;
+  }
+
+  /* Checkbox styling */
+  input[type="checkbox"] {
+    border-radius: 0.25rem !important;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    div[style*="justify-content: flex-end"] {
+      flex-direction: column !important;
+      align-items: stretch !important;
+    }
+
+    div[style*="display: flex; align-items: start"] {
+      flex-direction: column !important;
+      gap: 0.75rem !important;
+    }
+
+    div[style*="display: flex; align-items: center; margin-top: 0.125rem"] {
+      margin-top: 0 !important;
+    }
+  }
+</style>
diff --git a/app/views/users/_user_list.html.erb b/app/views/users/_user_list.html.erb
new file mode 100644
index 00000000..3f5d290b
--- /dev/null
+++ b/app/views/users/_user_list.html.erb
@@ -0,0 +1,174 @@
+<%= turbo_frame_tag "user-list" do %>
+  <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
+    
+    <!-- Card Header -->
+    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 2rem; color: white;">
+      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="background: rgba(255, 255, 255, 0.2); padding: 0.75rem; border-radius: 0.75rem;">
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+            </svg>
+          </div>
+          <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">User List</h2>
+            <p style="margin: 0.25rem 0 0 0; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem;">
+              <%= pluralize(@users.count, 'user') %> found
+            </p>
+          </div>
+        </div>
+        
+        <div style="display: flex; gap: 0.75rem; align-items: center;">
+          <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+            Total: <%= @users.count %>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Table Content -->
+    <div style="padding: 0;">
+      <div class="table-container" style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse;">
+          <thead>
+            <tr style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0;">
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                  </svg>
+                  Email
+                </div>
+              </th>
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                  </svg>
+                  Role
+                </div>
+              </th>
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                  </svg>
+                  Providers
+                </div>
+              </th>
+              <th style="padding: 1.25rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                  </svg>
+                  Created
+                </div>
+              </th>
+              <th style="padding: 1.25rem 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.1em;">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <% if @users.any? %>
+              <% @users.each_with_index do |user, index| %>
+                <tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <div style="display: flex; align-items: center; gap: 1rem;">
+                      <div style="width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
+                        <%= user.email.first.upcase %>
+                      </div>
+                      <div>
+                        <div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= user.email %></div>
+                        <div style="color: #6b7280; font-size: 0.75rem;">
+                          ID: <%= user.id %>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <% if user.is_admin? %>
+                      <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                        <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                        </svg>
+                        Administrator
+                      </div>
+                    <% else %>
+                      <div style="display: inline-flex; align-items: center; gap: 0.375rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">
+                        <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                        </svg>
+                        Contributor
+                      </div>
+                    <% end %>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <div style="display: flex; gap: 0.375rem; flex-wrap: wrap;">
+                      <% if user.providers.any? %>
+                        <% user.providers.each do |provider| %>
+                          <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 600;">
+                            <%= provider.name %>
+                          </div>
+                        <% end %>
+                      <% else %>
+                        <div style="color: #9ca3af; font-style: italic; font-size: 0.75rem;">
+                          No providers
+                        </div>
+                      <% end %>
+                    </div>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem;">
+                    <div style="color: #6b7280; font-size: 0.875rem;">
+                      <%= user.created_at.strftime('%b %d, %Y') %>
+                    </div>
+                  </td>
+                  <td style="padding: 1.25rem 1.5rem; text-align: right;">
+                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                      <%= link_to user, data: { turbo_frame: "_top" }, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                        <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                        </svg>
+                        <span>View</span>
+                      <% end %>
+                      <%= link_to edit_user_path(user), data: { turbo_frame: "_top" }, style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;" do %>
+                        <svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                        </svg>
+                        <span>Edit</span>
+                      <% end %>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      
+      <% unless @users.any? %>
+        <!-- Empty state displayed outside the table -->
+        <div style="padding: 3rem 1.5rem; text-align: center;">
+          <div style="color: #9ca3af;">
+            <svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+            </svg>
+            <p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No users found</p>
+            <p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Try adjusting your search filters.</p>
+          </div>
+        </div>
+      <% end %>
+      
+      <!-- Pagination -->
+      <div style="background: #f8fafc; padding: 1.5rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+        <div style="color: #6b7280; font-size: 0.875rem;">
+          Showing <%= @users.count %> of <%= @pagy.count %> users
+        </div>
+        <div>
+          <%= render "shared/pagination", pagy: @pagy %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index fdd27832..8229b73b 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,10 +1,144 @@
 <% content_for :title, "Editing user" %>
 
-<h1>Editing user</h1>
+<% if notice %>
+  <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
+    <%= notice %>
+  </div>
+<% end %>
 
-<%= render "form", user: @user %>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to users_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            Edit User
+          </h1>
+          <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+            <%= @user.is_admin? ? "Administrator" : "Contributor" %>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Users", users_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @user.email %></li>
+        </ol>
+      </nav>
+    </div>
 
-<div class="mt-4">
-  <%= link_to "Show this user", @user %> |
-  <%= link_to "Back to users", users_path %>
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+          <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+          </svg>
+          <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Edit User Information</h2>
+        </div>
+        <p style="margin: 0; opacity: 0.9; font-size: 0.875rem;">Update user account details and permissions</p>
+      </div>
+      
+      <!-- Card Body -->
+      <div style="padding: 2rem;">
+        <%= render "form", user: @user %>
+      </div>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Button hover effects */
+  button:hover, a[href*="users"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 800px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+    
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    /* Header adjustments */
+    div[style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    /* Title adjustments */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+    
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem 1rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+    
+    /* More compact padding */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+    
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+    
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+  }
+</style>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 39d23fcd..7dad0a85 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,79 +1,279 @@
-<div class="page-heading">
-  <section class="section">
-    <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h2 class="card-title">Search</h2>
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden;">
+
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div style="min-width: 0; flex: 1;">
+          <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+            <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.75rem; border-radius: 0.75rem; flex-shrink: 0;">
+              <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+              </svg>
+            </div>
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #1f2937; margin: 0; min-width: 0;">Users</h1>
+          </div>
+          <p style="color: #6b7280; margin: 0; font-size: 1rem;">Manage user accounts and permissions</p>
+        </div>
+
+        <%= link_to new_user_path, style: "background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05); transition: all 0.2s;" do %>
+          <svg style="width: 1.125rem; height: 1.125rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          <span>Add New User</span>
+        <% end %>
       </div>
-      <div class="card-content">
-        <div class="card-body">
+
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">Users</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Search Card -->
+    <div style="margin-bottom: 2rem;">
+      <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+
+        <!-- Search Header -->
+        <div style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); padding: 1.5rem; color: white;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div style="background: rgba(255, 255, 255, 0.2); padding: 0.5rem; border-radius: 0.5rem;">
+              <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+              </svg>
+            </div>
+            <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Search & Filter Users</h2>
+          </div>
+        </div>
+
+        <!-- Search Body -->
+        <div style="padding: 2rem;">
           <%= form_for :search, url: users_path, method: :get, data: { controller: "search", search_target: "search", turbo_frame: "user-list", turbo_action: "advance" } do |f| %>
-            <div class="form-body">
-              <div class="row">
-                <div class="col-md-6 col-12">
-                  <div class="form-group">
-                    <%= f.label :email %>
-                    <%= f.text_field :email, value: params.dig(:search, :email), class: "form-control", data: { action: "input->search#submit" } %>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+
+              <!-- Email Search -->
+              <div>
+                <label class="input-label">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                    </svg>
+                    Email
                   </div>
-                </div>
-                <div class="col-md-6 col-12">
-                  <div class="form-group">
-                    <%= f.label "Role" %>
-                    <%= f.select :is_admin, options_for_select([["Admin", "true"], ["Contributor", "false"]], params.dig(:search, :is_admin)), { prompt: "Select user role" }, class: "form-select", data: { action: "change->search#submit" } %>
+                </label>
+                <%= f.text_field :email, value: params.dig(:search, :email),
+                    class: "input-field",
+                    placeholder: "Search by email...",
+                    data: { action: "input->search#submit" } %>
+              </div>
+
+              <!-- Role Filter -->
+              <div>
+                <label class="input-label">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                    </svg>
+                    Role
                   </div>
+                </label>
+                <div style="position:relative;">
+                  <%= f.select :is_admin, options_for_select([["Admin", "true"], ["Contributor", "false"]], params.dig(:search, :is_admin)),
+                      { prompt: "All roles" },
+                      class: "select-field",
+                      data: { action: "change->search#submit" } %>
+                  <%= render "shared/dropdown_arrow" %>
                 </div>
-                <div class="col-md-6 col-12">
-                  <div class="form-group">
-                    <%= f.label :order %>
-                    <%= f.select :order, options_for_select([["By most recently added", :desc], ["By least recently added", :asc]], params.dig(:search, :order)), {}, class: "form-select", data: { action: "change->search#submit" } %>
+              </div>
+
+              <!-- Order -->
+              <div>
+                <label class="input-label">
+                  <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1rem; height: 1rem; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
+                    </svg>
+                    Sort Order
                   </div>
-                </div>
-                <div class="col-12 d-flex justify-content-end">
-                  <%= link_to "Clear", users_path, class: "btn btn-light-secondary me-1 mb-1" %>
+                </label>
+                <div style="position:relative;">
+                  <%= f.select :order, options_for_select([["By most recently added", :desc], ["By least recently added", :asc]], params.dig(:search, :order)),
+                      {},
+                      class: "select-field",
+                      data: { action: "change->search#submit" } %>
+                  <%= render "shared/dropdown_arrow" %>
                 </div>
               </div>
             </div>
+
+            <!-- Clear Button -->
+            <div style="margin-top: 1.5rem; display: flex; justify-content: end;">
+              <%= link_to "Clear Filters", users_path,
+                  style: "background: #f3f4f6; color: #374151; padding: 0.625rem 1.25rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s; border: 1px solid #d1d5db;",
+                  onmouseover: "this.style.background='#e5e7eb'",
+                  onmouseout: "this.style.background='#f3f4f6'" %>
+            </div>
           <% end %>
         </div>
       </div>
     </div>
 
-    <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h2>User List</h2>
-        <%= link_to new_user_path, class: "btn btn-primary m-2" do %>
-          <i class="bi bi-plus"></i> Add New User
-        <% end %>
-      </div>
-      <div class="card-body">
-        <table class="table table-striped" id="table1">
-          <thead>
-            <tr>
-              <th>Email</th>
-              <th>Administrator</th>
-              <th class="text-end">User Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% @users.each do |user| %>
-              <tr>
-                <td><%= user.email %></td>
-                <td><%= user.is_admin ? "✅" : "✖️"  %></td>
-                <td class="text-end">
-                  <%= link_to edit_user_path(user), class: "btn btn-secondary btn-sm pr-2" do %>
-                    <i class="bi bi-pencil"></i> Edit
-                  <% end %>
-                  <%= button_to user, data: { confirm: "Are you sure?" }, method: :delete, form_class:"d-inline", class: "btn btn-danger btn-sm" do %>
-                    <i class="bi bi-trash"></i> Delete
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-      <div class="card-footer d-flex justify-content-end">
-        <%== pagy_bootstrap_nav(@pagy) %>
-      </div>
-    </div>
-  </section>
+    <!-- Users Table Card -->
+    <%= render 'user_list' %>
+  </div>
 </div>
+
+<style>
+  /* Enhanced button hover effects */
+  a[href*="new_user"]:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
+  }
+
+  /* Table hover effects */
+  tbody tr:hover {
+    background-color: #f8fafc !important;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+
+    /* Header adjustments */
+    div[style*="justify-content: space-between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+
+    /* Title adjustments */
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    /* Hide less important columns on mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+
+    /* Make remaining columns more compact */
+    th, td {
+      padding: 0.75rem 0.5rem !important;
+      font-size: 0.875rem !important;
+    }
+
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Search grid to single column */
+    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
+      grid-template-columns: 1fr !important;
+      gap: 1rem !important;
+    }
+
+    /* Stack pagination on mobile */
+    div[style*="justify-content: space-between"][style*="align-items: center"] {
+      flex-direction: column !important;
+      gap: 1rem !important;
+      align-items: flex-start !important;
+    }
+
+    /* Fix table overflow */
+    .table-container {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    /* Ensure table fits */
+    table {
+      min-width: 100% !important;
+      width: 100% !important;
+    }
+
+    /* Action buttons stack on mobile */
+    div[style*="display: flex; gap: 0.5rem; justify-content: flex-end"] {
+      flex-direction: column !important;
+      gap: 0.25rem !important;
+      width: 100% !important;
+    }
+
+    /* Make buttons full width on mobile */
+    div[style*="display: flex; gap: 0.5rem; justify-content: flex-end"] a,
+    div[style*="display: flex; gap: 0.5rem; justify-content: flex-end"] button {
+      width: 100% !important;
+      justify-content: center !important;
+    }
+  }
+
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 1200px"] {
+      padding: 0 0.5rem !important;
+    }
+
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+
+    /* More compact table */
+    th, td {
+      padding: 0.5rem 0.25rem !important;
+      font-size: 0.75rem !important;
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+
+    /* Smaller user avatar */
+    div[style*="width: 2.5rem; height: 2.5rem"] {
+      width: 2rem !important;
+      height: 2rem !important;
+      font-size: 0.75rem !important;
+    }
+
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1rem !important;
+    }
+
+    div[style*="padding: 1.5rem"] {
+      padding: 1rem !important;
+    }
+
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+  }
+</style>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index fe18ac21..d3b5df88 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -1,18 +1,141 @@
 <% content_for :title, "New user" %>
 
-<section id="multiple-column-form">
-  <div class="row match-height">
-    <div class="col-12">
-      <div class="card">
-        <div class="card-header">
-          <h4>Create New User</h4>
+<% if notice %>
+  <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
+    <%= notice %>
+  </div>
+<% end %>
+
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 800px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to users_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            Create New User
+          </h1>
         </div>
-        <div class="card-content">
-          <div class="card-body">
-            <%= render "form", user: @user %>
-          </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Users", users_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;">New User</li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Form Card -->
+    <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+      
+      <!-- Card Header -->
+      <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 2rem; color: white;">
+        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+          <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
+          </svg>
+          <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">User Information</h2>
         </div>
+        <p style="margin: 0; opacity: 0.9; font-size: 0.875rem;">Fill out the form below to create a new user account</p>
+      </div>
+      
+      <!-- Card Body -->
+      <div style="padding: 2rem;">
+        <%= render "form", user: @user %>
       </div>
     </div>
   </div>
-</section>
+</div>
+
+<style>
+  /* Button hover effects */
+  button:hover, a[href*="users"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 800px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+    
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    /* Header adjustments */
+    div[style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    /* Title adjustments */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+    
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem 1rem !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 800px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+    
+    /* More compact padding */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+    
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+    
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+  }
+</style>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
new file mode 100644
index 00000000..3cea9076
--- /dev/null
+++ b/app/views/users/show.html.erb
@@ -0,0 +1,312 @@
+<% content_for :title, @user.email %>
+
+<% if notice %>
+  <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
+    <%= notice %>
+  </div>
+<% end %>
+
+<div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
+  <div style="max-width: 1000px; margin: 0 auto; padding: 0 1rem;">
+    
+    <!-- Header Section -->
+    <div style="margin-bottom: 2rem;">
+      <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <%= link_to users_path, style: "color: #6b7280; hover:color: #374151; transition: colors 0.2s;" do %>
+            <svg style="width: 1.5rem; height: 1.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+          <% end %>
+          <h1 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0;">
+            <%= @user.email %>
+          </h1>
+          <% if @user.is_admin? %>
+            <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              Administrator
+            </div>
+          <% else %>
+            <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
+              Contributor
+            </div>
+          <% end %>
+        </div>
+        
+        <!-- Action Buttons -->
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <%= link_to edit_user_path(@user), style: "background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+            Edit User
+          <% end %>
+          
+          <% if Current.user.is_admin? %>
+            <div id="delete_user_<%= @user.id %>">
+              <%= button_to @user, method: :delete, 
+                  data: { confirm: "Are you sure you want to delete '#{@user.email}'? This action cannot be undone." },
+                  style: "background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
+                <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                </svg>
+                Delete User
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      
+      <!-- Breadcrumb -->
+      <nav style="font-size: 0.875rem; color: #6b7280;">
+        <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
+          <li><%= link_to "Dashboard", root_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li><%= link_to "Users", users_path, style: "color: #6b7280; text-decoration: none; hover:color: #374151;" %></li>
+          <li style="color: #d1d5db;">/</li>
+          <li style="color: #374151; font-weight: 500;"><%= @user.email %></li>
+        </ol>
+      </nav>
+    </div>
+
+    <!-- Main Content -->
+    <div id="<%= dom_id @user %>">
+      
+      <!-- User Details Section -->
+      <div style="margin-bottom: 2rem;">
+        <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
+          
+          <!-- Card Header -->
+          <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 2rem; color: white;">
+            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
+              <svg style="width: 2rem; height: 2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+              </svg>
+              <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">User Details</h2>
+            </div>
+            <p style="margin: 0; opacity: 0.9; font-size: 0.875rem;">ID: <%= @user.id %></p>
+          </div>
+          
+          <!-- Card Body -->
+          <div style="padding: 2rem;">
+            <div style="display: grid; gap: 1.5rem;">
+              
+              <!-- Email -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #10b981;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                  </svg>
+                  Email:
+                </div>
+                <div style="color: #1f2937; font-family: monospace; background: white; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #e5e7eb;">
+                  <%= @user.email %>
+                </div>
+              </div>
+              
+              <!-- Role -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #10b981;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                  </svg>
+                  Role:
+                </div>
+                <div style="color: #1f2937;">
+                  <% if @user.is_admin? %>
+                    <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;">
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                      </svg>
+                      Administrator
+                    </div>
+                  <% else %>
+                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;">
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                      </svg>
+                      Contributor
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+              
+              <!-- Created Date -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #10b981;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                  </svg>
+                  Account Created:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @user.created_at.strftime('%B %d, %Y at %I:%M %p') %>
+                </div>
+              </div>
+              
+              <!-- Last Updated -->
+              <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #10b981;">
+                <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
+                  <svg style="width: 1rem; height: 1rem; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                  </svg>
+                  Last Updated:
+                </div>
+                <div style="color: #1f2937; font-weight: 500;">
+                  <%= @user.updated_at.strftime('%B %d, %Y at %I:%M %p') %>
+                </div>
+              </div>
+              
+            </div>
+          </div>
+          
+          <!-- Providers Footer -->
+          <div style="background: #f9fafb; padding: 1.5rem; border-top: 1px solid #e5e7eb;">
+            <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
+              <div style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151;">
+                <svg style="width: 1rem; height: 1rem; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                </svg>
+                Associated Providers:
+              </div>
+              <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+                <% if @user.providers.any? %>
+                  <% @user.providers.each do |provider| %>
+                    <%= link_to provider_path(provider), 
+                        target: "_blank",
+                        style: "background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.25rem;",
+                        onmouseover: "this.style.transform='scale(1.05)'",
+                        onmouseout: "this.style.transform='scale(1)'" do %>
+                      <%= provider.name %>
+                      <svg style="width: 0.75rem; height: 0.75rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                      </svg>
+                    <% end %>
+                  <% end %>
+                <% else %>
+                  <span style="color: #6b7280; font-style: italic;">No providers assigned</span>
+                <% end %>
+              </div>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Button hover effects */
+  button:hover, a[href*="edit"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    /* Container adjustments */
+    div[style*="max-width: 1000px"] {
+      padding: 0 1rem !important;
+      margin: 0 auto !important;
+    }
+    
+    /* Page padding adjustments */
+    div[style*="min-height: 100vh"] {
+      padding: 1rem 0 !important;
+    }
+    
+    /* Header adjustments */
+    div[style*="justify-content: between"] {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 1rem !important;
+    }
+    
+    /* Card adjustments - prevent overflow */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.5rem !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Grid adjustments */
+    div[style*="grid-template-columns: 1fr 2fr"] {
+      grid-template-columns: 1fr !important;
+      gap: 0.5rem !important;
+    }
+    
+    /* Card padding adjustments */
+    div[style*="padding: 2rem"] {
+      padding: 1.5rem 1rem !important;
+    }
+    
+    /* Action buttons adjustments */
+    div[style*="display: flex; gap: 0.75rem; flex-wrap: wrap"] {
+      flex-direction: column !important;
+      gap: 0.5rem !important;
+    }
+    
+    /* Make buttons full width on mobile */
+    div[style*="display: flex; gap: 0.75rem; flex-wrap: wrap"] a,
+    div[style*="display: flex; gap: 0.75rem; flex-wrap: wrap"] button {
+      width: 100% !important;
+      justify-content: center !important;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    /* Very small screen adjustments */
+    div[style*="max-width: 1000px"] {
+      padding: 0 0.5rem !important;
+    }
+    
+    /* Ensure no overflow */
+    * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+    
+    /* Remove border radius on very small screens */
+    div[style*="border-radius: 1rem"] {
+      border-radius: 0.25rem !important;
+      margin: 0 !important;
+    }
+    
+    /* More compact padding */
+    div[style*="padding: 2rem"] {
+      padding: 1rem 0.75rem !important;
+    }
+    
+    div[style*="padding: 1.5rem"] {
+      padding: 1rem !important;
+    }
+    
+    /* Smaller title */
+    h1 {
+      font-size: 1.75rem !important;
+    }
+    
+    /* Prevent horizontal scroll */
+    body, html {
+      overflow-x: hidden !important;
+    }
+    
+    /* Ensure cards don't exceed viewport */
+    div[style*="background: white"] {
+      max-width: calc(100vw - 1rem) !important;
+      overflow: hidden !important;
+    }
+    
+    /* Provider tags wrap better */
+    div[style*="display: flex; gap: 0.5rem; flex-wrap: wrap"] {
+      gap: 0.25rem !important;
+    }
+    
+    /* Smaller provider tags */
+    a[style*="border-radius: 9999px"] {
+      font-size: 0.625rem !important;
+      padding: 0.25rem 0.5rem !important;
+    }
+  }
+</style>
diff --git a/bin/dev b/bin/dev
index 5f91c205..ad72c7d5 100755
--- a/bin/dev
+++ b/bin/dev
@@ -1,2 +1,16 @@
-#!/usr/bin/env ruby
-exec "./bin/rails", "server", *ARGV
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+# Let the debug gem allow remote connections,
+# but avoid loading until `debugger` is called
+export RUBY_DEBUG_OPEN="true"
+export RUBY_DEBUG_LAZY="true"
+
+exec foreman start -f Procfile.dev "$@"
diff --git a/config/importmap.rb b/config/importmap.rb
index 596ab261..5bbfd75a 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -6,4 +6,4 @@
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin "stimulus-use" # @0.52.3
-pin "bootstrap5-tags" # @1.7.7
+pin "tom-select" # Local vendor file with ES module wrapper
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 48732442..5fa43b50 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -5,3 +5,6 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
+
+# Add Tailwind builds directory to asset paths for Propshaft
+Rails.application.config.assets.paths << Rails.root.join("app/assets/builds")
diff --git a/config/initializers/pagy.rb b/config/initializers/pagy.rb
index 18a6fa61..6b043f77 100644
--- a/config/initializers/pagy.rb
+++ b/config/initializers/pagy.rb
@@ -10,7 +10,7 @@
 # You can set any pagy variable as a Pagy::DEFAULT. They can also be overridden per instance by just passing them to
 # Pagy.new|Pagy::Countless.new|Pagy::Calendar::*.new or any of the #pagy* controller methods
 # Here are the few that make more sense as DEFAULTs:
-# Pagy::DEFAULT[:limit]       = 20                    # default
+Pagy::DEFAULT[:limit]       = 20                    # display 20 results per page to match UI expectations
 # Pagy::DEFAULT[:size]        = 7                     # default
 # Pagy::DEFAULT[:ends]        = true                  # default
 # Pagy::DEFAULT[:page_param]  = :page                 # default
diff --git a/config/routes.rb b/config/routes.rb
index bf2ff9eb..7a49a624 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -7,8 +7,8 @@
   resource :registration, only: %i[new create]
   resource :session
   resources :uploads, only: %i[create destroy]
-  resources :users, except: :show
-  resources :tags, only: %i[index show edit update destroy]
+  resources :users
+  resources :tags
   resources :topics do
     member do
       put :archive
diff --git a/spec/support/tagging_helpers.rb b/spec/support/tagging_helpers.rb
index d00dc799..eab10c68 100644
--- a/spec/support/tagging_helpers.rb
+++ b/spec/support/tagging_helpers.rb
@@ -1,20 +1,4 @@
 module TaggingHelpers
-  # Selects a tag in a form using the select-tags Stimulus controller
-  #
-  # @param tag_name [String] the name of the tag to be selected
-  #
-  # @example
-  #   choose_tag("ruby") # Enters the tag "ruby" in the form
-  #
-  # @note This helper assumes the presence of a Stimulus controller 'select-tags'
-  #       which renders a specific DOM structure
-  def choose_tag(tag_name)
-    within "div[data-controller='select-tags']" do
-      select_input = find("select#search_tag_list", visible: :all)
-      select_input.select(tag_name)
-    end
-  end
-
   # Enter and selects a tag in a form using the select-tags Stimulus controller
   #
   # @param tag_name [String] the name of the tag to be selected
@@ -23,10 +7,12 @@ def choose_tag(tag_name)
   #   enter_and_choose_tag("ruby") # Enters the tag "ruby" in the form
   #
   # @note This helper assumes the presence of a Stimulus controller 'select-tags'
-  #       which renders a specific DOM structure
+  #       which renders a specific DOM structure using TomSelect
   def enter_and_choose_tag(tag_name)
     within "div[data-controller='select-tags']" do
-      tag_input = find("div.form-control.dropdown.form-select>div>input")
+      # TomSelect creates a .ts-wrapper with a .ts-control input
+      tag_input = find(".ts-control input")
+      tag_input.click
       tag_input.fill_in(with: tag_name)
       tag_input.send_keys(:enter)
     end
diff --git a/spec/system/tags/update_spec.rb b/spec/system/tags/update_spec.rb
index 9e11ca9d..708306e9 100644
--- a/spec/system/tags/update_spec.rb
+++ b/spec/system/tags/update_spec.rb
@@ -8,6 +8,7 @@
   before do
     login_as(user)
     create(:tag_cognate, tag: tag, cognate: cognate)
+    create(:provider)
   end
 
   context "as an Admin" do
@@ -31,11 +32,16 @@
     end
 
     context "when the cognate entered doesn't already exist" do
-      it "show an error" do
+      it "shows an error" do
         wait_and_visit(edit_tag_path(tag.id))
-        enter_and_choose_tag("URTI")
 
-        expect(page).to have_text("Please select a tag from the list")
+        within "div[data-controller='select-tags']" do
+          tag_input = find(".ts-control input")
+          tag_input.click
+          tag_input.set("URTI")
+
+          expect(page).to have_css(".no-results", text: "No results found", visible: true)
+        end
       end
     end
   end
diff --git a/spec/system/topics/creation_spec.rb b/spec/system/topics/creation_spec.rb
index 88040dce..3739e604 100644
--- a/spec/system/topics/creation_spec.rb
+++ b/spec/system/topics/creation_spec.rb
@@ -20,7 +20,7 @@
           select "English", from: "topic_language_id"
           select provider.name, from: "topic_provider_id"
           enter_and_choose_tag(tag_name)
-          click_button("Create Topic")
+          click_button("Save Topic")
           expect(page).to have_text("Search")
           expect(page).to have_text("My Topic")
 
@@ -30,7 +30,7 @@
 
       context "when failed" do
         it "renders the form with errors" do
-          click_button("Create Topic")
+          click_button("Save Topic")
           expect(page).to have_text("Title can't be blank")
         end
       end
@@ -46,7 +46,7 @@
           fill_in "Title", with: "My Topic"
           select "English", from: "topic_language_id"
           enter_and_choose_tag(tag_name)
-          click_button("Create Topic")
+          click_button("Save Topic")
           expect(page).to have_text("Search")
           expect(page).to have_text("My Topic")
 
@@ -56,7 +56,7 @@
 
       context "when failed" do
         it "renders the form with errors" do
-          click_button("Create Topic")
+          click_button("Save Topic")
           expect(page).to have_text("Title can't be blank")
         end
       end
diff --git a/spec/system/topics/search_spec.rb b/spec/system/topics/search_spec.rb
index c64be877..9c84650e 100644
--- a/spec/system/topics/search_spec.rb
+++ b/spec/system/topics/search_spec.rb
@@ -99,7 +99,7 @@
         select "English", from: "search_language_id"
 
         expect(page).to have_text(english_active_topic.title)
-        expect(page).not_to have_text(english_archived_topic.title)
+        expect(page).to have_text(english_archived_topic.title)
         expect(page).not_to have_text(spanish_active_topic.title)
       end
     end
@@ -125,7 +125,7 @@
         select "2", from: "search_month"
 
         expect(page).to have_text(spanish_active_topic.title)
-        expect(page).not_to have_text(english_archived_topic.title)
+        expect(page).to have_text(english_archived_topic.title)
         expect(page).not_to have_text(english_active_topic.title)
 
         select "3", from: "search_month"
@@ -154,7 +154,7 @@
 
     context "when searching by tags" do
       it "only displays topics matching the search" do
-        choose_tag(tag_name)
+        enter_and_choose_tag(tag_name)
 
         expect(page).to have_text(english_topic_tagged.title)
         expect(page).not_to have_text(spanish_active_topic.title)
@@ -233,7 +233,7 @@
           select "English", from: "search_language_id"
 
           expect(page).to have_text(english_active_topic.title)
-          expect(page).not_to have_text(english_archived_topic.title)
+          expect(page).to have_text(english_archived_topic.title)
           expect(page).not_to have_text(spanish_active_topic.title)
         end
       end
@@ -259,7 +259,7 @@
           select "2", from: "search_month"
 
           expect(page).to have_text(spanish_active_topic.title)
-          expect(page).not_to have_text(english_archived_topic.title)
+          expect(page).to have_text(english_archived_topic.title)
           expect(page).not_to have_text(english_active_topic.title)
 
           select "3", from: "search_month"
@@ -288,7 +288,7 @@
 
       context "when searching by tags" do
         it "only displays topics matching the search" do
-          choose_tag(tag_name)
+          enter_and_choose_tag(tag_name)
 
           expect(page).to have_text(english_topic_tagged.title)
           expect(page).not_to have_text(spanish_active_topic.title)
diff --git a/spec/system/upload_management_spec.rb b/spec/system/upload_management_spec.rb
index 31795d72..f82be403 100644
--- a/spec/system/upload_management_spec.rb
+++ b/spec/system/upload_management_spec.rb
@@ -48,7 +48,7 @@
         end
         expect(page).to have_text("logo_ruby_for_good.png")
         expect(page).to have_text("skillrx_sidebar.png")
-        click_button("Update Topic")
+        click_button("Save Topic")
         find_link { |l| l["data-testid"] == "#{topic.id}" }.click
         expect(page).to have_text("skillrx_sidebar.png")
       end
@@ -61,7 +61,7 @@
           end
           expect(page).to have_text("logo_ruby_for_good.png")
           expect(page).to have_text("skillrx_sidebar.png")
-          click_link("Cancel")
+          click_link("Back to Topics")
           find_link { |l| l["data-testid"] == "#{topic.id}" }.click
           expect(page).to have_text("logo_ruby_for_good.png")
           expect(page).not_to have_text("skillrx_sidebar.png")
@@ -76,7 +76,7 @@
           end
           expect(page).to have_text("logo_ruby_for_good.png")
           expect(page).to have_text("file_text_test.txt")
-          click_button("Update Topic")
+          click_button("Save Topic")
           expect(page).to have_text("View")
           find_link { |l| l["data-testid"] == "#{topic.id}" }.click
           expect(page).not_to have_text("file_text_test.txt")
@@ -89,7 +89,7 @@
         expect(page).to have_text("logo_ruby_for_good.png")
         click_button("remove-button-1")
         expect(page).not_to have_text("logo_ruby_for_good.png")
-        click_button("Update Topic")
+        click_button("Save Topic")
         expect(page).to have_text("View")
         find_link { |l| l["data-testid"] == "#{topic.id}" }.click
         expect(page).not_to have_text("logo_ruby_for_good.png")
@@ -99,7 +99,7 @@
         expect(page).to have_text("logo_ruby_for_good.png")
         click_button("remove-button-1")
         expect(page).not_to have_text("logo_ruby_for_good.png")
-        click_link("Cancel")
+        click_link("Back to Topics")
         expect(page).to have_text("View")
         find_link { |l| l["data-testid"] == "#{topic.id}" }.click
         expect(page).to have_text("logo_ruby_for_good.png")
diff --git a/spec/views/tags/index.html.erb_spec.rb b/spec/views/tags/index.html.erb_spec.rb
index fb41e2af..64199163 100644
--- a/spec/views/tags/index.html.erb_spec.rb
+++ b/spec/views/tags/index.html.erb_spec.rb
@@ -1,6 +1,8 @@
 require "rails_helper"
 
 RSpec.describe "tags/index", type: :view do
+  include Pagy::Frontend
+
   context "when there are no tags" do
     before(:each) do
       assign(:pagy, Pagy.new(count: 0))
@@ -24,16 +26,16 @@
       assert_select "table>tbody>tr", count: 1
     end
 
-    it "renders pagination nav without page links" do
+    it "does not render pagination when only one page present" do
       render
-      assert_dom "nav.pagy-bootstrap .page-link", text: "1", count: 1
+      assert_select "nav[aria-label='Page navigation']", count: 0
     end
   end
 
   context "when there are multiple pages of tags" do
     before(:each) do
       # Simulate being on page 2 with 10 items per page and 25 total items
-      pagy = Pagy.new(count: 25, page: 2, items: 10)
+      pagy = Pagy.new(count: 25, page: 2, limit: 10)
       assign(:pagy, pagy)
       assign(:tags, create_list(:tag, 10))
     end
@@ -45,8 +47,8 @@
 
     it "renders pagination with multiple pages" do
       render
-      assert_select "nav.pagy-bootstrap .page-item", minimum: 2
-      assert_dom "nav.pagy-bootstrap .page-item.active", text: "2", count: 1
+      assert_select "nav[aria-label='Page navigation'] ul li", count: 5 # Previous, 1, 2, 3, Next
+      assert_select "nav[aria-label='Page navigation'] ul li span[aria-current='page']", text: "2", count: 1
     end
   end
 end
diff --git a/spec/views/topics/index.html.erb_spec.rb b/spec/views/topics/index.html.erb_spec.rb
index 13fa09e7..3313c282 100644
--- a/spec/views/topics/index.html.erb_spec.rb
+++ b/spec/views/topics/index.html.erb_spec.rb
@@ -1,6 +1,8 @@
 require "rails_helper"
 
 RSpec.describe "topics/index", type: :view do
+  include Pagy::Frontend
+
   before(:each) do
     def view.search_params = {}
     def view.topics_title = "Topics"
@@ -36,16 +38,16 @@ def view.topics_title = "Topics"
       assert_select "table>tbody>tr", count: 1
     end
 
-    it "renders pagination nav with unique item" do
+    it "does not render pagination when only one page present" do
       render
-      assert_dom "nav.pagy-bootstrap .page-item", text: "1", count: 1
+      assert_select "nav[aria-label='Page navigation']", count: 0
     end
   end
 
   context "when there are multiple pages of topics" do
     before(:each) do
       # Simulate being on page 2 with 10 items per page and 25 total items
-      pagy = Pagy.new(count: 25, page: 2, items: 10)
+      pagy = Pagy.new(count: 25, page: 2, limit: 10)
       assign(:pagy, pagy)
       assign(:topics, create_list(:topic, 10))
     end
@@ -57,8 +59,8 @@ def view.topics_title = "Topics"
 
     it "renders pagination with multiple pages" do
       render
-      assert_select "nav.pagy-bootstrap .page-item", minimum: 2
-      assert_dom "nav.pagy-bootstrap .page-item.active", text: "2", count: 1
+      assert_select "nav[aria-label='Page navigation'] ul li", count: 5 # Previous, 1, 2, 3, Next
+      assert_select "nav[aria-label='Page navigation'] ul li span[aria-current='page']", text: "2", count: 1
     end
   end
 end
diff --git a/spec/views/users/index.html.erb_spec.rb b/spec/views/users/index.html.erb_spec.rb
index 9b984046..d820fa23 100644
--- a/spec/views/users/index.html.erb_spec.rb
+++ b/spec/views/users/index.html.erb_spec.rb
@@ -1,6 +1,8 @@
 require "rails_helper"
 
 RSpec.describe "users/index", type: :view do
+  include Pagy::Frontend
+
   context "when there are no users" do
     before(:each) do
       assign(:pagy, Pagy.new(count: 0))
@@ -24,16 +26,16 @@
       assert_select "table>tbody>tr", count: 1
     end
 
-    it "renders pagination nav without page links" do
+    it "does not render pagination when only one page present" do
       render
-      assert_dom "nav.pagy-bootstrap .page-link", text: "1", count: 1
+      assert_select "nav[aria-label='Page navigation']", count: 0
     end
   end
 
   context "when there are multiple pages of users" do
     before(:each) do
       # Simulate being on page 2 with 10 items per page and 25 total items
-      pagy = Pagy.new(count: 25, page: 2, items: 10)
+      pagy = Pagy.new(count: 25, page: 2, limit: 10)
       assign(:pagy, pagy)
       assign(:users, create_list(:user, 10))
     end
@@ -45,8 +47,8 @@
 
     it "renders pagination with multiple pages" do
       render
-      assert_select "nav.pagy-bootstrap .page-item", minimum: 2
-      assert_dom "nav.pagy-bootstrap .page-item.active", text: "2", count: 1
+      assert_select "nav[aria-label='Page navigation'] ul li", count: 5 # Previous, 1, 2, 3, Next
+      assert_select "nav[aria-label='Page navigation'] ul li span[aria-current='page']", text: "2", count: 1
     end
   end
 end
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..07b454a5
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/views/**/*.html.erb",
+    "./app/helpers/**/*.rb",
+    "./app/assets/stylesheets/**/*.css",
+    "./app/javascript/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/vendor/javascript/bootstrap5-tags.js b/vendor/javascript/bootstrap5-tags.js
deleted file mode 100644
index 01a1e9db..00000000
--- a/vendor/javascript/bootstrap5-tags.js
+++ /dev/null
@@ -1,488 +0,0 @@
-// bootstrap5-tags@1.7.7 downloaded from https://ga.jspm.io/npm:bootstrap5-tags@1.7.7/tags.js
-
-/**
- * Bootstrap 5 (and 4!) tags
- * https://github.com/lekoala/bootstrap5-tags
- * @license MIT
- */
-/**
- * @callback EventCallback
- * @param {Event} event
- * @param {Tags} inst
- * @returns {void}
- */
-/**
- * @callback ServerCallback
- * @param {Response} response
- * @param {Tags} inst
- * @returns {Promise}
- */
-/**
- * @callback ErrorCallback
- * @param {Error} e
- * @param {AbortSignal} signal
- * @param {Tags} inst
- * @returns {void}
- */
-/**
- * @callback ModalItemCallback
- * @param {String} value
- * @param {Tags} inst
- * @returns {Promise}
- */
-/**
- * @callback RenderCallback
- * @param {Suggestion} item
- * @param {String} label
- * @param {Tags} inst
- * @returns {String}
- */
-/**
- * @callback ItemCallback
- * @param {Suggestion} item
- * @param {Tags} inst
- * @returns {void}
- */
-/**
- * @callback ValueCallback
- * @param {String} value
- * @param {Tags} inst
- * @returns {void}
- */
-/**
- * @callback AddCallback
- * @param {String} value
- * @param {Object} data
- * @param {Tags} inst
- * @returns {void|Boolean}
- */
-/**
- * @callback DataCallback
- * @param {*} src
- * @param {Tags} inst
- * @returns {void|Boolean}
- */
-/**
- * @callback CreateCallback
- * @param {HTMLOptionElement} option
- * @param {Tags} inst
- * @returns {void}
- */
-/**
- * @typedef Config
- * @property {Array<Suggestion|SuggestionGroup>} items Source items
- * @property {Boolean} allowNew Allows creation of new tags
- * @property {Boolean} showAllSuggestions Show all suggestions even if they don't match. Disables validation.
- * @property {String} badgeStyle Color of the badge (color can be configured per option as well)
- * @property {Boolean} allowClear Show a clear icon
- * @property {Boolean} clearEnd Place clear icon at the end
- * @property {Array} selected A list of initially selected values
- * @property {String} regex Regex for new tags
- * @property {Array|String} separator A list (pipe separated) of characters that should act as separator (default is using enter key)
- * @property {Number} max Limit to a maximum of tags (0 = no limit)
- * @property {String} placeholder Provides a placeholder if none are provided as the first empty option
- * @property {String} clearLabel Text as clear tooltip
- * @property {String} searchLabel Default placeholder
- * @property {Boolean} showDropIcon Show dropdown icon
- * @property {Boolean} keepOpen Keep suggestions open after selection, clear on focus out
- * @property {Boolean} allowSame Allow same tags used multiple times
- * @property {String} baseClass Customize the class applied to badges
- * @property {Boolean} addOnBlur Add new tags on blur (only if allowNew is enabled)
- * @property {Boolean} showDisabled Show disabled tags
- * @property {Boolean} hideNativeValidation Hide native validation tooltips
- * @property {Number} suggestionsThreshold Number of chars required to show suggestions
- * @property {Number} maximumItems Maximum number of items to display
- * @property {Boolean} autoselectFirst Always select the first item
- * @property {Boolean} updateOnSelect Update input value on selection (doesn't play nice with autoselectFirst)
- * @property {Boolean} highlightTyped Highlight matched part of the suggestion
- * @property {String} highlightClass Class applied to the mark element
- * @property {Boolean} fullWidth Match the width on the input field
- * @property {Boolean} fixed Use fixed positioning (solve overflow issues)
- * @property {Boolean} fuzzy Fuzzy search
- * @property {Boolean} startsWith Must start with the string. Defaults to false (it matches any position).
- * @property {Boolean} singleBadge Show badge for single elements
- * @property {Array} activeClasses By default: ["bg-primary", "text-white"]
- * @property {String} labelField Key for the label
- * @property {String} valueField Key for the value
- * @property {Array} searchFields Key for the search
- * @property {String} queryParam Name of the param passed to endpoint (query by default)
- * @property {String} server Endpoint for data provider
- * @property {String} serverMethod HTTP request method for data provider, default is GET
- * @property {String|Object} serverParams Parameters to pass along to the server. You can specify a "related" key with the id of a related field.
- * @property {String} serverDataKey By default: data
- * @property {Object} fetchOptions Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax)
- * @property {Boolean} liveServer Should the endpoint be called each time on input
- * @property {Boolean} noCache Prevent caching by appending a timestamp
- * @property {Boolean} allowHtml Allow html in input (can lead to script injection)
- * @property {Function} inputFilter Function to filter input
- * @property {Function} sanitizer Alternative function to sanitize content
- * @property {Number} debounceTime Debounce time for live server
- * @property {String} notFoundMessage Display a no suggestions found message. Leave empty to disable
- * @property {RenderCallback} onRenderItem Callback function that returns the suggestion
- * @property {ItemCallback} onSelectItem Callback function to call on selection
- * @property {ValueCallback} onClearItem Callback function to call on clear
- * @property {CreateCallback} onCreateItem Callback function when an item is created
- * @property {EventCallback} onBlur Callback function on blur
- * @property {DataCallback} onDataLoaded Callback function on data load
- * @property {EventCallback} onFocus Callback function on focus
- * @property {AddCallback} onCanAdd Callback function to validate item. Return false to show validation message.
- * @property {ServerCallback} onServerResponse Callback function to process server response. Must return a Promise
- * @property {ErrorCallback} onServerError Callback function to process server errors.
- * @property {ModalItemCallback} confirmClear Allow modal confirmation of clear. Must return a Promise
- * @property {ModalItemCallback} confirmAdd Allow modal confirmation of add. Must return a Promise
- */
-/**
- * @typedef Suggestion
- * @property {String} value Can be overriden by config valueField
- * @property {String} label Can be overriden by config labelField
- * @property {String} title
- * @property {Boolean} disabled
- * @property {Object} data
- * @property {Boolean} [selected]
- * @property {Number} [group_id]
- */
-/**
- * @typedef SuggestionGroup
- * @property {String} group
- * @property {Array} items
- */
-/**
- * @type {Config}
- */
-const e={items:[],allowNew:false,showAllSuggestions:false,badgeStyle:"primary",allowClear:false,clearEnd:false,selected:[],regex:"",separator:[],max:0,clearLabel:"Clear",searchLabel:"Type a value",showDropIcon:true,keepOpen:false,allowSame:false,baseClass:"",placeholder:"",addOnBlur:false,showDisabled:false,hideNativeValidation:false,suggestionsThreshold:-1,maximumItems:0,autoselectFirst:true,updateOnSelect:false,highlightTyped:false,highlightClass:"",fullWidth:true,fixed:false,fuzzy:false,startsWith:false,singleBadge:false,activeClasses:["bg-primary","text-white"],labelField:"label",valueField:"value",searchFields:["label"],queryParam:"query",server:"",serverMethod:"GET",serverParams:{},serverDataKey:"data",fetchOptions:{},liveServer:false,noCache:true,allowHtml:false,debounceTime:300,notFoundMessage:"",inputFilter:e=>e,sanitizer:e=>sanitize(e),onRenderItem:(e,t,s)=>s.config("allowHtml")?t:s.config("sanitizer")(t),onSelectItem:(e,t)=>{},onClearItem:(e,t)=>{},onCreateItem:(e,t)=>{},onBlur:(e,t)=>{},onDataLoaded:(e,t)=>{},onFocus:(e,t)=>{},onCanAdd:(e,t,s)=>{},confirmClear:(e,t)=>Promise.resolve(),confirmAdd:(e,t)=>Promise.resolve(),onServerResponse:(e,t)=>e.json(),onServerError:(e,t,s)=>{e.name==="AbortError"||t.aborted||console.error(e)}};const t="tags-";const s="is-loading";const i="is-active";const n="is-invalid";const l="is-max-reached";const o="show";const r="data-value";const a="next";const h="prev";const c="form-control-focus";const d="form-placeholder-shown";const u="form-control-disabled";const f=new WeakMap;let _=0;let g=window.bootstrap&&window.bootstrap.Tooltip;
-/**
- * @param {Function} func
- * @param {number} timeout
- * @returns {Function}
- */function debounce(e,t=300){let s;return(...i)=>{clearTimeout(s);s=setTimeout((()=>{e.apply(this,i)}),t)}}
-/**
- * @param {string} text
- * @param {string} size
- * @returns {Number}
- */function calcTextWidth(e,t=null){const s=ce("span");document.body.appendChild(s);s.style.fontSize=t||"inherit";s.style.height="auto";s.style.width="auto";s.style.position="absolute";s.style.whiteSpace="no-wrap";s.innerHTML=sanitize(e);const i=Math.ceil(s.clientWidth);document.body.removeChild(s);return i}
-/**
- * @link https://stackoverflow.com/questions/3043775/how-to-escape-html
- * @param {string} text
- * @returns {string}
- */function sanitize(e){return e.replace(/[\x26\x0A\<>'"]/g,(function(e){return"&#"+e.charCodeAt(0)+";"}))}
-/**
- * @param {String} str
- * @returns {String}
- */function removeDiacritics(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"")}
-/**
- * @param {String|Number} str
- * @returns {String}
- */function normalize(e){return e?removeDiacritics(e.toString()).toLowerCase():""}
-/**
- * A simple fuzzy match algorithm that checks if chars are matched
- * in order in the target string
- *
- * @param {String} str
- * @param {String} lookup
- * @returns {Boolean}
- */function fuzzyMatch(e,t){if(e.indexOf(t)>=0)return true;let s=0;for(let i=0;i<t.length;i++){const n=t[i];if(n!=" "){s=e.indexOf(n,s)+1;if(s<=0)return false}}return true}
-/**
- * @param {HTMLElement} item
- */function hideItem(e){e.style.display="none";attrs(e,{"aria-hidden":"true"})}
-/**
- * @param {HTMLElement} item
- */function showItem(e){e.style.display="list-item";attrs(e,{"aria-hidden":"false"})}
-/**
- * @param {HTMLElement} el
- * @param {Object} attrs
- */function attrs(e,t){for(const[s,i]of Object.entries(t))e.setAttribute(s,i)}
-/**
- * @param {HTMLElement} el
- * @param {string} attr
- */function rmAttr(e,t){e.hasAttribute(t)&&e.removeAttribute(t)}
-/**
- * Allow 1/0, true/false as strings
- * @param {any} value
- * @returns {Boolean}
- */function parseBool(e){return["true","false","1","0",true,false].includes(e)&&!!JSON.parse(e)}
-/**
- * @template {keyof HTMLElementTagNameMap} K
- * @param {K|String} tagName Name of the element
- * @returns {*}
- */function ce(e){return document.createElement(e)}
-/**
- *
- * @param {String} str
- * @param {Array} tokens
- * @returns {Array}
- */function splitMulti(e,t){let s=t[0];for(let i=1;i<t.length;i++)e=e.split(t[i]).join(s);return e.split(s)}function nested(e,t="window"){return e.split(".").reduce(((e,t)=>e[t]),t)}
-/**
- * @param {HTMLElement} el
- * @param {HTMLElement} newEl
- * @returns {HTMLElement}
- */class Tags{
-/**
-	 * @param {HTMLSelectElement} el
-	 * @param {Object|Config} config
-	 */
-constructor(e,t={}){if(e instanceof HTMLElement){f.set(e,this);_++;this._selectElement=e;this._configure(t);this._isMouse=false;this._keyboardNavigation=false;this._searchFunc=debounce((()=>{this._loadFromServer(true)}),this._config.debounceTime);this._fireEvents=true;this._configureParent();this._holderElement=ce("div");this._containerElement=ce("div");this._dropElement=ce("ul");this._searchInput=ce("input");this._holderElement.appendChild(this._containerElement);this._selectElement.parentElement.insertBefore(this._holderElement,this._selectElement);this._configureHolderElement();this._configureContainerElement();this._configureSelectElement();this._configureSearchInput();this._configureDropElement();this.resetState();this.handleEvent=e=>{this._handleEvent(e)};if(this._config.fixed){document.addEventListener("scroll",this,true);window.addEventListener("resize",this)}["focus","blur","input","keydown","paste"].forEach((e=>{this._searchInput.addEventListener(e,this)}));["mousemove","mouseleave"].forEach((e=>{this._dropElement.addEventListener(e,this)}));this.loadData(true)}else console.error("Invalid element",e)}
-/**
-	 * Attach to all elements matched by the selector
-	 * @param {string} selector
-	 * @param {Object} opts
-	 * @param {Boolean} reset
-	 */
-static init(e="select[multiple]",t={},s=false){
-/**
-		 * @type {NodeListOf<HTMLSelectElement>}
-		 */
-let i=document.querySelectorAll(e);for(let e=0;e<i.length;e++){const n=Tags.getInstance(i[e]);if(!n||s){n&&n.dispose();new Tags(i[e],t)}}}
-/**
-	 * @param {HTMLSelectElement} el
-	 */static getInstance(e){if(f.has(e))return f.get(e)}dispose(){["focus","blur","input","keydown","paste"].forEach((e=>{this._searchInput.removeEventListener(e,this)}));["mousemove","mouseleave"].forEach((e=>{this._dropElement.removeEventListener(e,this)}));if(this._config.fixed){document.removeEventListener("scroll",this,true);window.removeEventListener("resize",this)}this._selectElement.style.display="block";this._holderElement.parentElement.removeChild(this._holderElement);this.parentForm&&this.parentForm.removeEventListener("reset",this);f.delete(this._selectElement)}
-/**
-	 * event-polyfill compat / handleEvent is expected on class
-	 * @link https://github.com/lifaon74/events-polyfill/issues/10
-	 * @param {Event} event
-	 */handleEvent(e){this._handleEvent(e)}
-/**
-	 * @link https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4#handling-events
-	 * @param {Event} event
-	 */_handleEvent(e){const t=["scroll","resize"];if(t.includes(e.type)){this._timer&&window.cancelAnimationFrame(this._timer);this._timer=window.requestAnimationFrame((()=>{this[`on${e.type}`](e)}))}else this[`on${e.type}`](e)}
-/**
-	 * @param {Config|Object} config
-	 */_configure(t={}){this._config=Object.assign({},e,{showDropIcon:!!this._findOption()});const s=this._selectElement.dataset.config?JSON.parse(this._selectElement.dataset.config):{};const i={...t,...s,...this._selectElement.dataset};for(const[t,s]of Object.entries(e)){if(t=="config"||i[t]===void 0)continue;const e=i[t];switch(typeof s){case"number":this._config[t]=parseInt(e);break;case"boolean":this._config[t]=parseBool(e);break;case"string":this._config[t]=e.toString();break;case"object":this._config[t]=e;typeof e==="string"&&(["{","["].includes(e[0])?this._config[t]=JSON.parse(e):this._config[t]=e.split(e.includes("|")?"|":","));break;case"function":this._config[t]=typeof e==="string"?e.split(".").reduce(((e,t)=>e[t]),window):e;this._config[t]||console.error("Invalid function",e);break;default:this._config[t]=e;break}}this._config.placeholder||(this._config.placeholder=this._getPlaceholder());this._config.suggestionsThreshold==-1&&(this._config.suggestionsThreshold=this._config.liveServer?1:0)}
-/**
-	 * @param {String} k
-	 * @returns {*}
-	 */config(e=null){return e?this._config[e]:this._config}
-/**
-	 * @param {String} k
-	 * @param {*} v
-	 */setConfig(e,t){this._config[e]=t}_configureParent(){this.overflowParent=null;this.parentForm=this._selectElement.parentElement;while(this.parentForm){this.parentForm.style.overflow==="hidden"&&(this.overflowParent=this.parentForm);this.parentForm=this.parentForm.parentElement;if(this.parentForm&&this.parentForm.nodeName=="FORM")break}this.parentForm&&this.parentForm.addEventListener("reset",this)}
-/**
-	 * @returns {string}
-	 */_getPlaceholder(){if(this._selectElement.hasAttribute("placeholder"))return this._selectElement.getAttribute("placeholder");if(this._selectElement.dataset.placeholder)return this._selectElement.dataset.placeholder;let e=this._selectElement.querySelector("option");if(!e||!this._config.autoselectFirst)return"";rmAttr(e,"selected");e.selected=false;return e.value?"":e.textContent}_configureSelectElement(){const e=this._selectElement;if(this._config.hideNativeValidation){e.style.position="absolute";e.style.left="-9999px"}else e.style.cssText="height:1px;width:1px;opacity:0;padding:0;margin:0;border:0;float:left;flex-basis:100%;min-height:unset;";e.tabIndex=-1;e.addEventListener("focus",(e=>{this.onclick(e)}));e.addEventListener("invalid",(e=>{this._holderElement.classList.add(n)}))}_configureDropElement(){const e=this._dropElement;e.classList.add("dropdown-menu",t+"menu");e.id=t+"menu-"+_;e.setAttribute("role","menu");const s=e.style;s.padding="0";s.maxHeight="280px";this._config.fullWidth||(s.maxWidth="360px");this._config.fixed&&(s.position="fixed");s.overflowY="auto";s.overscrollBehavior="contain";s.textAlign="unset";e.addEventListener("mouseenter",(e=>{this._keyboardNavigation=false}));this._holderElement.appendChild(e);this._searchInput.setAttribute("aria-controls",e.id)}_configureHolderElement(){const e=this._holderElement;e.classList.add("form-control","dropdown");["form-select-lg","form-select-sm","is-invalid","is-valid"].forEach((t=>{this._selectElement.classList.contains(t)&&e.classList.add(t)}));this._config.suggestionsThreshold==0&&this._config.showDropIcon&&e.classList.add("form-select");this.overflowParent&&(e.style.position="inherit");e.style.height="auto";e.addEventListener("click",this)}_configureContainerElement(){this._containerElement.addEventListener("click",(e=>{this.isDisabled()||this._searchInput.style.visibility!="hidden"&&this._searchInput.focus()}));const e=this._containerElement.style;e.display="flex";e.alignItems="center";e.flexWrap="wrap"}_configureSearchInput(){const e=this._searchInput;e.type="text";e.autocomplete="off";e.spellcheck=false;attrs(e,{"aria-autocomplete":"list","aria-haspopup":"menu","aria-expanded":"false","aria-label":this._config.searchLabel,role:"combobox"});e.style.cssText="background-color:transparent;color:currentColor;border:0;padding:0;outline:0;max-width:100%";this.resetSearchInput(true);this._containerElement.appendChild(e);this._rtl=window.getComputedStyle(e).direction==="rtl"}onfocus(e){if(!this._holderElement.classList.contains(c)){this._holderElement.classList.add(c);this.showOrSearch();this._config.onFocus(e,this)}}onblur(e){const s=e.relatedTarget;this._isMouse&&s&&(s.classList.contains("modal")||s.classList.contains(t+"menu"))?this._searchInput.focus():this.afteronblur(e)}
-/**
-	 * This is triggered externally by a document click handler
-	 * Scrolling in the suggestion triggers the blur event and will close the suggestion
-	 * so we cannot rely on the blur event of the input element
-	 * We check for click and focus events (click when clicking outside, focus when tabbing...)
-	 * @param {Event} event
-	 */afteronblur(e){this._abortController&&this._abortController.abort();let t=true;this._config.addOnBlur&&this._searchInput.value&&(t=this._enterValue());this._holderElement.classList.remove(c);this.hideSuggestions(t);if(this._fireEvents){const t=this.getSelection();const s={selection:t?t.dataset.value:null,input:this._searchInput.value};this._config.onBlur(e,this);this._selectElement.dispatchEvent(new CustomEvent("tags.blur",{bubbles:true,detail:s}))}}onpaste(e){const t=e.clipboardData||window.clipboardData;const s=t.getData("text/plain").replace(/\r\n|\n/g," ");if(s.length>2&&this._config.separator.length){const t=splitMulti(s,this._config.separator).filter((e=>e));if(t.length>1){e.preventDefault();t.forEach((e=>{this._addPastedValue(e)}))}}}_addPastedValue(e){let t=e;let s={};if(this._config.allowNew)s.new=1;else{const s=this.getSelection();if(!s)return;e=s.getAttribute(r);t=s.dataset.label}this._config.confirmAdd(e,this).then((()=>{this._add(t,e,s)})).catch((()=>{}))}oninput(e){const t=this._config.inputFilter(this._searchInput.value);t!=this._searchInput.value&&(this._searchInput.value=t);if(t){const e=t.slice(-1);if(this._config.separator.length&&this._config.separator.includes(e)){this._searchInput.value=this._searchInput.value.slice(0,-1);let e=this._searchInput.value;this._addPastedValue(e);return}}setTimeout((()=>{this._adjustWidth()}));this.showOrSearch()}
-/**
-	 * keypress doesn't send arrow keys, so we use keydown
-	 * @param {KeyboardEvent} event
-	 */onkeydown(e){let t=e.keyCode||e.key;
-/**
-		 * @type {HTMLInputElement}
-		 */const s=e.target;e.keyCode==229&&(t=s.value.charAt(s.selectionStart-1).charCodeAt(0));switch(t){case 13:case"Enter":e.preventDefault();this._enterValue();break;case 38:case"ArrowUp":e.preventDefault();this._keyboardNavigation=true;this._moveSelection(h);break;case 40:case"ArrowDown":e.preventDefault();this._keyboardNavigation=true;this.isDropdownVisible()?this._moveSelection(a):this.showOrSearch(false);break;case 8:case"Backspace":const t=this.getLastItem();this._searchInput.value.length==0&&t&&this._config.confirmClear(t,this).then((()=>{this.removeLastItem();this._adjustWidth();this.showOrSearch()})).catch((()=>{}));break;case 27:case"Escape":this._searchInput.focus();this.hideSuggestions();break}}onmousemove(e){this._isMouse=true;this._keyboardNavigation=false}onmouseleave(e){this._isMouse=false;this.removeSelection()}onscroll(e){this._positionMenu()}onresize(e){this._positionMenu()}onclick(e=null){!this.isSingle()&&this.isMaxReached()||this._searchInput.focus()}onreset(e){this.reset()}
-/**
-	 * @param {Boolean} init called during init
-	 */
-loadData(e=false){Object.keys(this._config.items).length>0?this.setData(this._config.items,true):this.resetSuggestions(true);this._config.server&&(this._config.liveServer||this._loadFromServer(!e))}_setSelectedAttributes(){const e=this._selectElement.selectedOptions||[];for(let t=0;t<e.length;t++)e[t].value&&!e[t].hasAttribute("selected")&&e[t].setAttribute("selected","selected")}resetState(){if(this.isDisabled()){this._holderElement.setAttribute("readonly","");this._searchInput.setAttribute("disabled","");this._holderElement.classList.add(u)}else{rmAttr(this._holderElement,"readonly");rmAttr(this._searchInput,"disabled");this._holderElement.classList.remove(u)}}
-/**
-	 * Reset suggestions from select element
-	 * Iterates over option children then calls setData
-	 * @param {Boolean} init called during init
-	 */resetSuggestions(e=false){this._setSelectedAttributes();const convertOption=e=>({value:e.getAttribute("value"),label:e.textContent,disabled:e.disabled,selected:e.selected,title:e.title,data:Object.assign({disabled:e.disabled},e.dataset)});let t=Array.from(this._selectElement.children).filter((
-/**
-				 * @param {HTMLOptionElement|HTMLOptGroupElement} option
-				 */
-e=>e.hasAttribute("label")||!e.disabled||this._config.showDisabled)).map((
-/**
-				 * @param {HTMLOptionElement|HTMLOptGroupElement} option
-				 */
-e=>e.hasAttribute("label")?{group:e.getAttribute("label"),items:Array.from(e.children).map((e=>convertOption(e)))}:convertOption(e)));this.setData(t,e)}
-/**
-	 * Try to add the current value
-	 * @returns {Boolean}
-	 */_enterValue(){let e=this.getSelection();if(e){e.click();return true}if(this._config.allowNew&&this._searchInput.value){let e=this._searchInput.value;this._config.confirmAdd(e,this).then((()=>{this._add(e,e,{new:1})})).catch((()=>{}));return true}return false}
-/**
-	 * @param {Boolean} show Show menu after load. False during init
-	 */_loadFromServer(e=false){this._abortController&&this._abortController.abort();this._abortController=new AbortController;let t=this._selectElement.dataset.serverParams||{};typeof t=="string"&&(t=JSON.parse(t));const i=Object.assign({},this._config.serverParams,t);i[this._config.queryParam]=this._searchInput.value;this._config.noCache&&(i.t=Date.now());if(i.related){
-/**
-			 * @type {HTMLInputElement}
-			 */
-const e=document.getElementById(i.related);if(e){i.related=e.value;const t=e.getAttribute("name");t&&(i[t]=e.value)}}const n=new URLSearchParams(i);let l=this._config.server;let o=Object.assign(this._config.fetchOptions,{method:this._config.serverMethod||"GET",signal:this._abortController.signal});o.method==="POST"?o.body=n:l+="?"+n.toString();this._holderElement.classList.add(s);fetch(l,o).then((e=>this._config.onServerResponse(e,this))).then((t=>{const s=nested(this._config.serverDataKey,t)||t;this.setData(s,!e);this._abortController=null;e&&this._showSuggestions()})).catch((e=>{this._config.onServerError(e,this._abortController.signal,this)})).finally((e=>{this._holderElement.classList.remove(s)}))}
-/**
-	 * Wrapper for the public addItem method that check if the item
-	 * can be added
-	 *
-	 * @param {string} text
-	 * @param {string} value
-	 * @param {object} data
-	 * @returns {HTMLOptionElement|null}
-	 */_add(e,t=null,s={}){!s.value&&t&&(s.value=t);if(!this.canAdd(e,s))return null;const i=this.addItem(e,t,s);this._resetHtmlState();this._config.keepOpen?this._showSuggestions():this.resetSearchInput();return i}
-/**
-	 * @param {HTMLElement} li
-	 * @returns {Boolean}
-	 */_isItemEnabled(e){if(e.style.display==="none")return false;const t=e.firstElementChild;return t.tagName==="A"&&!t.classList.contains("disabled")}
-/**
-	 * @param {String} dir
-	 * @param {*|HTMLElement} sel
-	 * @returns {HTMLElement}
-	 */_moveSelection(e=a,t=null){const s=this.getSelection();if(s){const i=e===a?"nextSibling":"previousSibling";t=s.parentNode;do{t=t[i]}while(t&&!this._isItemEnabled(t));t?s.classList.remove(...this._activeClasses()):s&&(t=s.parentElement)}else{if(e===h)return t;if(!t){t=this._dropElement.firstChild;while(t&&!this._isItemEnabled(t))t=t.nextSibling}}if(t){const s=t.offsetHeight;const i=t.offsetTop;const n=t.parentNode;const l=n.offsetHeight;const o=n.scrollHeight;const r=n.offsetTop;s===0&&setTimeout((()=>{n.scrollTop=0}));if(e===h){const e=i-r>10?i-r:0;n.scrollTop=e}else{const e=i+s-(l+n.scrollTop);if(e>0&&s>0){n.scrollTop=i+s-l+1;n.scrollTop+l>=o-10&&(n.scrollTop=i-r)}}const a=t.querySelector("a");a.classList.add(...this._activeClasses());this._searchInput.setAttribute("aria-activedescendant",a.id);if(this._config.updateOnSelect){this._searchInput.value=a.dataset.label;this._adjustWidth()}}else this._searchInput.setAttribute("aria-activedescendant","");return t}_adjustWidth(){this._holderElement.classList.remove(d);if(this._searchInput.value)this._searchInput.size=this._searchInput.value.length;else if(this.getSelectedValues().length){this._searchInput.placeholder="";this._searchInput.size=1}else{this._searchInput.size=this._config.placeholder.length>0?this._config.placeholder.length:1;this._searchInput.placeholder=this._config.placeholder;this._holderElement.classList.add(d)}const e=this._searchInput.value||this._searchInput.placeholder;const t=window.getComputedStyle(this._holderElement).fontSize;const s=calcTextWidth(e,t)+16;this._searchInput.style.width=s+"px"}
-/**
-	 * Add suggestions to the drop element
-	 * @param {Array<Suggestion|SuggestionGroup>} suggestions
-	 */_buildSuggestions(e){while(this._dropElement.lastChild)this._dropElement.removeChild(this._dropElement.lastChild);let s=0;let i=1;for(let t=0;t<e.length;t++){const n=e[t];if(n){if(n.group&&n.items){const e=ce("li");e.setAttribute("role","presentation");e.dataset.id=""+i;const t=ce("span");e.append(t);t.classList.add("dropdown-header","text-truncate");t.innerHTML=this._config.sanitizer(n.group);this._dropElement.appendChild(e);if(n.items)for(let e=0;e<n.items.length;e++){const t=n.items[e];t.group_id=i;this._buildSuggestionsItem(n.items[e],s);s++}i++}this._buildSuggestionsItem(n,s);s++}}if(this._config.notFoundMessage){const e=ce("li");e.setAttribute("role","presentation");e.classList.add(t+"not-found");e.innerHTML='<span class="dropdown-item"></span>';this._dropElement.appendChild(e)}}
-/**
-	 * @param {Suggestion} suggestion
-	 * @param {Number} i The global counter
-	 */_buildSuggestionsItem(e,t){if(!e[this._config.valueField])return;const s=e[this._config.valueField];const i=e[this._config.labelField];let n=this._config.onRenderItem(e,i,this);const l=ce("li");l.setAttribute("role","menuitem");e.group_id&&l.setAttribute("data-group-id",""+e.group_id);if(e.title){l.setAttribute("title",e.title);l.setAttribute("data-bs-placement","left")}const o=ce("a");l.append(o);o.id=this._dropElement.id+"-"+t;o.classList.add("dropdown-item","text-truncate");e.disabled&&o.classList.add("disabled");o.setAttribute(r,s);o.dataset.label=i;const a={};this._config.searchFields.forEach((t=>{a[t]=e[t]}));o.dataset.searchData=JSON.stringify(a);o.setAttribute("href","#");o.innerHTML=n;this._dropElement.appendChild(l);const h=this._getBootstrapVersion()===5;e.title&&g&&h&&g.getOrCreateInstance(l);o.addEventListener("mouseenter",(e=>{if(!this._keyboardNavigation){this.removeSelection();l.querySelector("a").classList.add(...this._activeClasses())}}));o.addEventListener("mousedown",(e=>{e.preventDefault()}));o.addEventListener("click",(t=>{t.preventDefault();t.stopPropagation();this._config.confirmAdd(s,this).then((()=>{this._add(i,s,e.data);this._config.onSelectItem(e,this)})).catch((()=>{}))}))}
-/**
-	 * @returns {NodeListOf<HTMLOptionElement>}
-	 */initialOptions(){return this._selectElement.querySelectorAll("option[data-init]")}_removeSelectedAttrs(){this._selectElement.querySelectorAll("option").forEach((e=>{rmAttr(e,"selected")}))}reset(){this.removeAll();this._fireEvents=false;const e=this.initialOptions();this._removeSelectedAttrs();for(let t=0;t<e.length;t++){const s=e[t];const i=Object.assign({},{disabled:s.hasAttribute("disabled")},s.dataset);this.addItem(s.textContent,s.value,i)}this._resetHtmlState();this._fireEvents=true}
-/**
-	 * @param {Boolean} init Pass true during init
-	 */resetSearchInput(e=false){this._searchInput.value="";this._adjustWidth();this._checkMax();if(!this.isSingle()||e){if(!e){this._shouldShow()||this.hideSuggestions();this._searchInput===document.activeElement&&this._searchInput.dispatchEvent(new Event("input"))}}else{document.activeElement.blur();this.hideSuggestions()}}_checkMax(){if(this.isMaxReached()){this._holderElement.classList.add(l);this._searchInput.style.visibility="hidden"}else this._searchInput.style.visibility=="hidden"&&(this._searchInput.style.visibility="visible")}
-/**
-	 * @returns {Array}
-	 */getSelectedValues(){
-/**
-		 * @type {NodeListOf<HTMLOptionElement>}
-		 */
-const e=this._selectElement.querySelectorAll("option[selected]");return Array.from(e).map((e=>e.value))}
-/**
-	 * @returns {Array}
-	 */getAvailableValues(){
-/**
-		 * @type {NodeListOf<HTMLOptionElement>}
-		 */
-const e=this._selectElement.querySelectorAll("option");return Array.from(e).map((e=>e.value))}
-/**
-	 * Show suggestions or search them depending on live server
-	 * @param {Boolean} check
-	 */showOrSearch(e=true){!e||this._shouldShow()?this._config.liveServer?this._searchFunc():this._showSuggestions():this.hideSuggestions(false)}
-/**
-	 * The element create with buildSuggestions
-	 * @param {Boolean} clearValidation
-	 */hideSuggestions(e=true){this._dropElement.classList.remove(o);attrs(this._searchInput,{"aria-expanded":"false"});this.removeSelection();e&&this._holderElement.classList.remove(n)}
-/**
-	 * Show or hide suggestions
-	 * @param {Boolean} check Show suggestions regardless if shouldShow conditions
-	 * @param {Boolean} clearValidation
-	 */toggleSuggestions(e=true,t=true){this._dropElement.classList.contains(o)?this.hideSuggestions(t):this.showOrSearch(e)}
-/**
-	 * Do we have enough input to show suggestions ?
-	 * @returns {Boolean}
-	 */_shouldShow(){return!this.isDisabled()&&!this.isMaxReached()&&this._searchInput.value.length>=this._config.suggestionsThreshold}_showSuggestions(){if(this._searchInput.style.visibility=="hidden")return;const e=normalize(this._searchInput.value);const s={};const i=this._dropElement.querySelectorAll("li");let l=0;let o=null;let h=false;let c={};for(let t=0;t<i.length;t++){
-/**
-			 * @type {HTMLLIElement}
-			 */
-let n=i[t];
-/**
-			 * @type {HTMLAnchorElement|HTMLSpanElement}
-			 */let a=n.firstElementChild;if(a instanceof HTMLSpanElement){n.dataset.id&&(c[n.dataset.id]=false);hideItem(n);continue}a.classList.remove(...this._activeClasses());if(!this._config.allowSame){const e=a.getAttribute(r);s[e]=s[e]||0;const t=this._findOption(a.getAttribute(r),"[selected]",s[e]++);if(t){hideItem(n);continue}}const d=this._config.showAllSuggestions||e.length===0;let u=e.length==0&&this._config.suggestionsThreshold===0;if(!d&&e.length>0){const t=JSON.parse(a.dataset.searchData);this._config.searchFields.forEach((s=>{const i=normalize(t[s]);let n=false;if(this._config.fuzzy)n=fuzzyMatch(i,e);else{const t=i.indexOf(e);n=this._config.startsWith?t===0:t>=0}n&&(u=true)}))}const f=u||e.length===0;if(d||u){l++;showItem(n);n.dataset.groupId&&(c[n.dataset.groupId]=true);!o&&this._isItemEnabled(n)&&f&&(o=n);this._config.maximumItems>0&&l>this._config.maximumItems&&hideItem(n)}else hideItem(n);if(this._config.highlightTyped){const t=a.textContent;const s=normalize(t).indexOf(e);const i=t.substring(0,s)+`<mark class="${this._config.highlightClass}">${t.substring(s,s+e.length)}</mark>`+t.substring(s+e.length,t.length);a.innerHTML=i}this._isItemEnabled(n)&&(h=true)}this._config.allowNew||e.length===0&&!h||this._holderElement.classList.add(n);this._config.allowNew&&this._config.regex&&this.isInvalid()&&this._holderElement.classList.remove(n);Array.from(i).filter((e=>e.dataset.id)).forEach((e=>{c[e.dataset.id]===true&&showItem(e)}));if(h){this._holderElement.classList.remove(n);if(o&&this._config.autoselectFirst){this.removeSelection();this._moveSelection(a,o)}}if(l===0)if(this._config.notFoundMessage){
-/**
-				 * @type {HTMLElement}
-				 */
-const e=this._dropElement.querySelector("."+t+"not-found");e.style.display="block";const s=this._config.notFoundMessage.replace("{{tag}}",this._searchInput.value);e.innerHTML=`<span class="dropdown-item">${s}</span>`;this._showDropdown()}else this.hideSuggestions(false);else this._showDropdown()}_showDropdown(){const e=this._dropElement.classList.contains(o);if(!e){this._dropElement.classList.add(o);attrs(this._searchInput,{"aria-expanded":"true"})}this._positionMenu(e)}
-/**
-	 * @param {Boolean} wasVisible
-	 */_positionMenu(e=false){const t=this._rtl;const s=this._config.fixed;const i=this._config.fullWidth;const n=this._searchInput.getBoundingClientRect();const l=this._holderElement.getBoundingClientRect();let o=0;let r=0;if(s)if(i){o=l.x;r=l.y+l.height+2}else{o=n.x;r=n.y+n.height}else if(i){o=0;r=l.height+2}else{o=this._searchInput.offsetLeft;r=this._searchInput.offsetHeight+this._searchInput.offsetTop}t&&!i&&(o-=this._dropElement.offsetWidth-n.width);if(!i){const e=Math.min(window.innerWidth,document.body.offsetWidth);const s=t?n.x+n.width-this._dropElement.offsetWidth-1:e-1-(n.x+this._dropElement.offsetWidth);s<0&&(o=t?o-s:o+s)}i&&(this._dropElement.style.width=this._holderElement.offsetWidth+"px");e||(this._dropElement.style.transform="unset");Object.assign(this._dropElement.style,{left:o+"px",top:r+"px"});const a=this._dropElement.getBoundingClientRect();const h=window.innerHeight;if(a.y+a.height>h||this._dropElement.style.transform.includes("translateY")){const e=i?l.height+4:n.height;this._dropElement.style.transform="translateY(calc(-100.1% - "+e+"px))"}}
-/**
-	 * @returns {Number}
-	 */_getBootstrapVersion(){let e=5;let t=window.jQuery;t&&t.fn.tooltip&&t.fn.tooltip.Constructor&&(e=parseInt(t.fn.tooltip.Constructor.VERSION.charAt(0)));return e}
-/**
-	 * Find if label is already selected (based on attribute)
-	 * @param {string} text
-	 * @returns {Boolean}
-	 */_isSelected(e){const t=Array.from(this._selectElement.querySelectorAll("option"));const s=t.find((t=>t.textContent==e&&t.getAttribute("selected")));return!!s}
-/**
-	 * Find if label is already selectable (based on attribute)
-	 * @param {string} text
-	 * @param {Object} data
-	 * @returns {Boolean}
-	 */_isSelectable(e,t){const s=Array.from(this._selectElement.querySelectorAll("option"));const i=t.value?s.filter((e=>e.value==t.value)):s.filter((t=>t.textContent==e));if(i.length>0){const e=i.find((e=>!e.getAttribute("selected")));if(!e)return false}return true}
-/**
-	 * Find if label is selectable (based on attribute)
-	 * @param {string} text
-	 * @returns {Boolean}
-	 */hasItem(e){for(let t of this._config.items){const s=t.items||[t];for(let t of s)if(t[this._config.labelField]==e)return true}return false}
-/**
-	 * @param {string} value
-	 * @returns {Object|null}
-	 */getItem(e){for(let t of this._config.items){const s=t.items||[t];for(let t of s)if(t[this._config.valueField]==e)return t}return null}
-/**
-	 * Checks if value matches a configured regex
-	 * @param {string} value
-	 * @returns {Boolean}
-	 */_validateRegex(e){const t=new RegExp(this._config.regex.trim());return t.test(e)}
-/**
-	 * @returns {HTMLElement}
-	 */getSelection(){return this._dropElement.querySelector("a."+i)}removeSelection(){const e=this.getSelection();e&&e.classList.remove(...this._activeClasses())}
-/**
-	 * @returns {Array}
-	 */_activeClasses(){return[...this._config.activeClasses,i]}
-/**
-	 * @deprecated since 1.5
-	 * @returns {HTMLElement}
-	 */getActiveSelection(){return this.getSelection()}
-/**
-	 * @deprecated since 1.5
-	 */removeActiveSelection(){return this.removeSelection()}removeAll(){let e=this.getSelectedValues();e.forEach((e=>{this.removeItem(e,true)}));this._adjustWidth()}
-/**
-	 * @param {Boolean} noEvents
-	 */removeLastItem(e=false){let t=this.getLastItem();t&&this.removeItem(t,e)}getLastItem(){let e=this._containerElement.querySelectorAll("span."+t+"badge");if(!e.length)return;let s=e[e.length-1];return s.getAttribute(r)}enable(){this._selectElement.setAttribute("disabled","");this.resetState()}disable(){rmAttr(this._selectElement,"disabled");this.resetState()}
-/**
-	 * @returns {Boolean}
-	 */isDisabled(){return this._selectElement.hasAttribute("disabled")||this._selectElement.disabled||this._selectElement.hasAttribute("readonly")}
-/**
-	 * @returns {Boolean}
-	 */isDropdownVisible(){return this._dropElement.classList.contains(o)}
-/**
-	 * @returns {Boolean}
-	 */isInvalid(){return this._holderElement.classList.contains(n)}
-/**
-	 * @returns {Boolean}
-	 */isSingle(){return!this._selectElement.hasAttribute("multiple")}
-/**
-	 * @returns {Boolean}
-	 */isMaxReached(){return this._config.max&&this.getSelectedValues().length>=this._config.max}
-/**
-	 * @param {string} text
-	 * @param {Object} data
-	 * @returns {Boolean}
-	 */canAdd(e,t={}){if(!e)return false;if(t.new&&!this._config.allowNew)return false;if(!t.new&&!this.hasItem(e))return false;if(this.isDisabled())return false;if(!this.isSingle()&&!this._config.allowSame)if(t.new){if(this._isSelected(e))return false}else if(!this._isSelectable(e,t))return false;if(this.isMaxReached())return false;if(this._config.regex&&t.new&&!this._validateRegex(e)){this._holderElement.classList.add(n);return false}if(this._config.onCanAdd&&this._config.onCanAdd(e,t,this)===false){this._holderElement.classList.add(n);return false}return true}getData(){return this._config.items}
-/**
-	 * Set data
-	 * @param {Array<Suggestion|SuggestionGroup>|Object} src An array of items or a value:label object
-	 * @param {Boolean} init called during init
-	 */setData(e,t=false){this._fireEvents=false;Array.isArray(e)||(e=Object.entries(e).map((([e,t])=>({value:e,label:t}))));this._config.items!=e&&(this._config.items=e);if(t){this._removeSelectedAttrs();const t=e.reduce(((e,t)=>e.concat(t.group?t.items:[t])),[]);t.forEach((e=>{const t=e[this._config.valueField];const s=e[this._config.labelField];if(t&&(e.selected||this._config.selected.includes(t))){const i=this.addItem(s,t,e.data);i&&i.setAttribute("data-init","true")}}))}this._buildSuggestions(e);this._resetHtmlState();this._fireEvents=true;this._config.onDataLoaded(e,this);this._selectElement.dispatchEvent(new CustomEvent("tags.loaded",{bubbles:true,detail:e}))}
-/**
-	 * Keep in mind that we can have the same value for multiple options
-	 * @param {*} value
-	 * @param {string} mode
-	 * @param {number} counter
-	 * @returns {HTMLOptionElement|null}
-	 */_findOption(e=null,t="",s=0){const i=e===null?"":'[value="'+CSS.escape(e)+'"]';const n="option"+i+t;const l=this._selectElement.querySelectorAll(n);return l[s]||null}
-/**
-	 * Add item by value
-	 * @param {string} value
-	 * @param {object} data
-	 * @return {HTMLOptionElement|null} The selected option or null
-	 */setItem(e,t={}){let s=null;let i=this._findOption(e,":not([selected])");i&&(s=this.addItem(i.textContent,i.value,t));let n=this.getItem(e);if(n){const e=n[this._config.valueField];const i=n[this._config.labelField];s=this.addItem(i,e,t)}this._adjustWidth();this._checkMax();return s}
-/**
-	 * You might want to use canAdd before to ensure the item is valid
-	 * @param {string} text
-	 * @param {string} value
-	 * @param {object} data
-	 * @return {HTMLOptionElement} The created or selected option
-	 */addItem(e,t=null,s={}){t||(t=e);this.isSingle()&&this.getSelectedValues().length&&this.removeLastItem(true);let i=this._findOption(t,":not([selected])");if(!i){i=ce("option");i.value=t;i.innerText=e;for(const[e,t]of Object.entries(s))i.dataset[e]=t;this._selectElement.appendChild(i);this._config.onCreateItem(i,this)}i&&(s=Object.assign({title:i.getAttribute("title")},s,i.dataset));i.setAttribute("selected","selected");i.selected=true;this._createBadge(e,t,s);this._fireEvents&&this._selectElement.dispatchEvent(new Event("change",{bubbles:true}));return i}_resetHtmlState(){const e=this._selectElement.innerHTML;this._selectElement.innerHTML="";this._selectElement.innerHTML=e;this._adjustWidth()}
-/**
-	 * @param {string} text
-	 * @param {string} value
-	 * @param {object} data
-	 */_createBadge(e,s=null,i={}){const n=this._getBootstrapVersion()===5;const l=i.disabled&&parseBool(i.disabled);const o=this._config.allowClear&&!l;let a=this._config.allowHtml?e:this._config.sanitizer(e);
-/**
-		 * @type {HTMLSpanElement}
-		 */let h=ce("span");let c=[t+"badge"];const d=this.isSingle()&&!this._config.singleBadge;if(!d){c.push("badge");let e=this._config.badgeStyle;i.badgeStyle&&(e=i.badgeStyle);i.badgeClass&&c.push(...i.badgeClass.split(" "));this._config.baseClass?c.push(...this._config.baseClass.split(" ")):c=n?[...c,"bg-"+e,"text-truncate"]:[...c,"badge-"+e];h.style.maxWidth="100%"}l&&c.push("disabled","opacity-50");const u=d?0:2;h.style.margin=u+"px 6px "+u+"px 0px";h.style.marginBlock=u+"px";h.style.marginInline="0px 6px";h.style.display="flex";h.style.alignItems="center";h.classList.add(...c);h.setAttribute(r,s);i.title&&h.setAttribute("title",i.title);if(o){const e=c.includes("text-dark")||d?"btn-close":"btn-close btn-close-white";let t="margin-inline: 0px 6px;";let s="left";this._config.clearEnd&&(s="right");s=="right"&&(t="margin-inline: 6px 0px;");const i=n?'<button type="button" style="font-size:0.65em;'+t+'" class="'+e+'" aria-label="'+this._config.clearLabel+'"></button>':'<button type="button" style="font-size:1em;'+t+'text-shadow:none;color:currentColor;transform:scale(1.2);float:none" class="close" aria-label="'+this._config.clearLabel+'"><span aria-hidden="true">&times;</span></button>';a=s=="left"?i+a:a+i}h.innerHTML=a;this._containerElement.insertBefore(h,this._searchInput);i.title&&g&&n&&g.getOrCreateInstance(h);o&&h.querySelector("button").addEventListener("click",(e=>{e.preventDefault();e.stopPropagation();this.isDisabled()||this._config.confirmClear(s,this).then((()=>{this.removeItem(s);document.activeElement.blur();this._adjustWidth()})).catch((()=>{}))}))}
-/**
-	 * @returns {HTMLDivElement}
-	 */getHolder(){return this._holderElement}clear(){this.hideSuggestions();this.reset()}
-/**
-	 * Update data
-	 * @param {Array<Suggestion|SuggestionGroup>|Object} src An array of items or a value:label object
-	 */updateData(e){this.setData(e,false);this.reset()}
-/**
-	 * @param {string} value
-	 * @param {Boolean} value
-	 */removeItem(e,t=false){const s=CSS.escape(e);let i=this._containerElement.querySelectorAll("span["+r+'="'+s+'"]');if(!i.length)return;const n=i.length-1;const o=i[n];if(o){o.dataset.bsOriginalTitle&&g.getOrCreateInstance(o).dispose();o.remove()}let a=this._findOption(e,"[selected]",n);if(a){rmAttr(a,"selected");a.selected=false;this._fireEvents&&!t&&this._selectElement.dispatchEvent(new Event("change",{bubbles:true}))}if(this._searchInput.style.visibility=="hidden"&&!this.isMaxReached()){this._searchInput.style.visibility="visible";this._holderElement.classList.remove(l)}t||this._config.onClearItem(e,this)}}export{Tags as default};
-
diff --git a/vendor/javascript/tom-select.js b/vendor/javascript/tom-select.js
new file mode 100644
index 00000000..4f561eee
--- /dev/null
+++ b/vendor/javascript/tom-select.js
@@ -0,0 +1,442 @@
+/**
+* Tom Select v2.3.1
+* Licensed under the Apache License, Version 2.0 (the "License");
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TomSelect=t()}(this,(function(){"use strict"
+function e(e,t){e.split(/\s+/).forEach((e=>{t(e)}))}class t{constructor(){this._events=void 0,this._events={}}on(t,i){e(t,(e=>{const t=this._events[e]||[]
+t.push(i),this._events[e]=t}))}off(t,i){var s=arguments.length
+0!==s?e(t,(e=>{if(1===s)return void delete this._events[e]
+const t=this._events[e]
+void 0!==t&&(t.splice(t.indexOf(i),1),this._events[e]=t)})):this._events={}}trigger(t,...i){var s=this
+e(t,(e=>{const t=s._events[e]
+void 0!==t&&t.forEach((e=>{e.apply(s,i)}))}))}}const i=e=>(e=e.filter(Boolean)).length<2?e[0]||"":1==l(e)?"["+e.join("")+"]":"(?:"+e.join("|")+")",s=e=>{if(!o(e))return e.join("")
+let t="",i=0
+const s=()=>{i>1&&(t+="{"+i+"}")}
+return e.forEach(((n,o)=>{n!==e[o-1]?(s(),t+=n,i=1):i++})),s(),t},n=e=>{let t=c(e)
+return i(t)},o=e=>new Set(e).size!==e.length,r=e=>(e+"").replace(/([\$\(\)\*\+\.\?\[\]\^\{\|\}\\])/gu,"\\$1"),l=e=>e.reduce(((e,t)=>Math.max(e,a(t))),0),a=e=>c(e).length,c=e=>Array.from(e),d=e=>{if(1===e.length)return[[e]]
+let t=[]
+const i=e.substring(1)
+return d(i).forEach((function(i){let s=i.slice(0)
+s[0]=e.charAt(0)+s[0],t.push(s),s=i.slice(0),s.unshift(e.charAt(0)),t.push(s)})),t},u=[[0,65535]]
+let p,h
+const g={},f={"/":"⁄∕",0:"߀",a:"ⱥɐɑ",aa:"ꜳ",ae:"æǽǣ",ao:"ꜵ",au:"ꜷ",av:"ꜹꜻ",ay:"ꜽ",b:"ƀɓƃ",c:"ꜿƈȼↄ",d:"đɗɖᴅƌꮷԁɦ",e:"ɛǝᴇɇ",f:"ꝼƒ",g:"ǥɠꞡᵹꝿɢ",h:"ħⱨⱶɥ",i:"ɨı",j:"ɉȷ",k:"ƙⱪꝁꝃꝅꞣ",l:"łƚɫⱡꝉꝇꞁɭ",m:"ɱɯϻ",n:"ꞥƞɲꞑᴎлԉ",o:"øǿɔɵꝋꝍᴑ",oe:"œ",oi:"ƣ",oo:"ꝏ",ou:"ȣ",p:"ƥᵽꝑꝓꝕρ",q:"ꝗꝙɋ",r:"ɍɽꝛꞧꞃ",s:"ßȿꞩꞅʂ",t:"ŧƭʈⱦꞇ",th:"þ",tz:"ꜩ",u:"ʉ",v:"ʋꝟʌ",vy:"ꝡ",w:"ⱳ",y:"ƴɏỿ",z:"ƶȥɀⱬꝣ",hv:"ƕ"}
+for(let e in f){let t=f[e]||""
+for(let i=0;i<t.length;i++){let s=t.substring(i,i+1)
+g[s]=e}}const v=new RegExp(Object.keys(g).join("|")+"|[̀-ͯ·ʾʼ]","gu"),m=(e,t="NFKD")=>e.normalize(t),y=e=>c(e).reduce(((e,t)=>e+O(t)),""),O=e=>(e=m(e).toLowerCase().replace(v,(e=>g[e]||"")),m(e,"NFC"))
+const b=e=>{const t={},i=(e,i)=>{const s=t[e]||new Set,o=new RegExp("^"+n(s)+"$","iu")
+i.match(o)||(s.add(r(i)),t[e]=s)}
+for(let t of function*(e){for(const[t,i]of e)for(let e=t;e<=i;e++){let t=String.fromCharCode(e),i=y(t)
+i!=t.toLowerCase()&&(i.length>3||0!=i.length&&(yield{folded:i,composed:t,code_point:e}))}}(e))i(t.folded,t.folded),i(t.folded,t.composed)
+return t},w=e=>{const t=b(e),s={}
+let o=[]
+for(let e in t){let i=t[e]
+i&&(s[e]=n(i)),e.length>1&&o.push(r(e))}o.sort(((e,t)=>t.length-e.length))
+const l=i(o)
+return h=new RegExp("^"+l,"u"),s},_=(e,t=1)=>(t=Math.max(t,e.length-1),i(d(e).map((e=>((e,t=1)=>{let i=0
+return e=e.map((e=>(p[e]&&(i+=e.length),p[e]||e))),i>=t?s(e):""})(e,t))))),C=(e,t=!0)=>{let n=e.length>1?1:0
+return i(e.map((e=>{let i=[]
+const o=t?e.length():e.length()-1
+for(let t=0;t<o;t++)i.push(_(e.substrs[t]||"",n))
+return s(i)})))},S=(e,t)=>{for(const i of t){if(i.start!=e.start||i.end!=e.end)continue
+if(i.substrs.join("")!==e.substrs.join(""))continue
+let t=e.parts
+const s=e=>{for(const i of t){if(i.start===e.start&&i.substr===e.substr)return!1
+if(1!=e.length&&1!=i.length){if(e.start<i.start&&e.end>i.start)return!0
+if(i.start<e.start&&i.end>e.start)return!0}}return!1}
+if(!(i.parts.filter(s).length>0))return!0}return!1}
+class I{constructor(){this.parts=[],this.substrs=[],this.start=0,this.end=0}add(e){e&&(this.parts.push(e),this.substrs.push(e.substr),this.start=Math.min(e.start,this.start),this.end=Math.max(e.end,this.end))}last(){return this.parts[this.parts.length-1]}length(){return this.parts.length}clone(e,t){let i=new I,s=JSON.parse(JSON.stringify(this.parts)),n=s.pop()
+for(const e of s)i.add(e)
+let o=t.substr.substring(0,e-n.start),r=o.length
+return i.add({start:n.start,end:n.start+r,length:r,substr:o}),i}}const A=e=>{var t
+void 0===p&&(p=w(t||u)),e=y(e)
+let i="",s=[new I]
+for(let t=0;t<e.length;t++){let n=e.substring(t).match(h)
+const o=e.substring(t,t+1),r=n?n[0]:null
+let l=[],a=new Set
+for(const e of s){const i=e.last()
+if(!i||1==i.length||i.end<=t)if(r){const i=r.length
+e.add({start:t,end:t+i,length:i,substr:r}),a.add("1")}else e.add({start:t,end:t+1,length:1,substr:o}),a.add("2")
+else if(r){let s=e.clone(t,i)
+const n=r.length
+s.add({start:t,end:t+n,length:n,substr:r}),l.push(s)}else a.add("3")}if(l.length>0){l=l.sort(((e,t)=>e.length()-t.length()))
+for(let e of l)S(e,s)||s.push(e)}else if(t>0&&1==a.size&&!a.has("3")){i+=C(s,!1)
+let e=new I
+const t=s[0]
+t&&e.add(t.last()),s=[e]}}return i+=C(s,!0),i},x=(e,t)=>{if(e)return e[t]},k=(e,t)=>{if(e){for(var i,s=t.split(".");(i=s.shift())&&(e=e[i]););return e}},F=(e,t,i)=>{var s,n
+return e?(e+="",null==t.regex||-1===(n=e.search(t.regex))?0:(s=t.string.length/e.length,0===n&&(s+=.5),s*i)):0},L=(e,t)=>{var i=e[t]
+if("function"==typeof i)return i
+i&&!Array.isArray(i)&&(e[t]=[i])},E=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var i in e)e.hasOwnProperty(i)&&t(e[i],i)},T=(e,t)=>"number"==typeof e&&"number"==typeof t?e>t?1:e<t?-1:0:(e=y(e+"").toLowerCase())>(t=y(t+"").toLowerCase())?1:t>e?-1:0
+class P{constructor(e,t){this.items=void 0,this.settings=void 0,this.items=e,this.settings=t||{diacritics:!0}}tokenize(e,t,i){if(!e||!e.length)return[]
+const s=[],n=e.split(/\s+/)
+var o
+return i&&(o=new RegExp("^("+Object.keys(i).map(r).join("|")+"):(.*)$")),n.forEach((e=>{let i,n=null,l=null
+o&&(i=e.match(o))&&(n=i[1],e=i[2]),e.length>0&&(l=this.settings.diacritics?A(e)||null:r(e),l&&t&&(l="\\b"+l)),s.push({string:e,regex:l?new RegExp(l,"iu"):null,field:n})})),s}getScoreFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getScoreFunction(i)}_getScoreFunction(e){const t=e.tokens,i=t.length
+if(!i)return function(){return 0}
+const s=e.options.fields,n=e.weights,o=s.length,r=e.getAttrFn
+if(!o)return function(){return 1}
+const l=1===o?function(e,t){const i=s[0].field
+return F(r(t,i),e,n[i]||1)}:function(e,t){var i=0
+if(e.field){const s=r(t,e.field)
+!e.regex&&s?i+=1/o:i+=F(s,e,1)}else E(n,((s,n)=>{i+=F(r(t,n),e,s)}))
+return i/o}
+return 1===i?function(e){return l(t[0],e)}:"and"===e.options.conjunction?function(e){var s,n=0
+for(let i of t){if((s=l(i,e))<=0)return 0
+n+=s}return n/i}:function(e){var s=0
+return E(t,(t=>{s+=l(t,e)})),s/i}}getSortFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getSortFunction(i)}_getSortFunction(e){var t,i=[]
+const s=this,n=e.options,o=!e.query&&n.sort_empty?n.sort_empty:n.sort
+if("function"==typeof o)return o.bind(this)
+const r=function(t,i){return"$score"===t?i.score:e.getAttrFn(s.items[i.id],t)}
+if(o)for(let t of o)(e.query||"$score"!==t.field)&&i.push(t)
+if(e.query){t=!0
+for(let e of i)if("$score"===e.field){t=!1
+break}t&&i.unshift({field:"$score",direction:"desc"})}else i=i.filter((e=>"$score"!==e.field))
+return i.length?function(e,t){var s,n
+for(let o of i){if(n=o.field,s=("desc"===o.direction?-1:1)*T(r(n,e),r(n,t)))return s}return 0}:null}prepareSearch(e,t){const i={}
+var s=Object.assign({},t)
+if(L(s,"sort"),L(s,"sort_empty"),s.fields){L(s,"fields")
+const e=[]
+s.fields.forEach((t=>{"string"==typeof t&&(t={field:t,weight:1}),e.push(t),i[t.field]="weight"in t?t.weight:1})),s.fields=e}return{options:s,query:e.toLowerCase().trim(),tokens:this.tokenize(e,s.respect_word_boundaries,i),total:0,items:[],weights:i,getAttrFn:s.nesting?k:x}}search(e,t){var i,s,n=this
+s=this.prepareSearch(e,t),t=s.options,e=s.query
+const o=t.score||n._getScoreFunction(s)
+e.length?E(n.items,((e,n)=>{i=o(e),(!1===t.filter||i>0)&&s.items.push({score:i,id:n})})):E(n.items,((e,t)=>{s.items.push({score:1,id:t})}))
+const r=n._getSortFunction(s)
+return r&&s.items.sort(r),s.total=s.items.length,"number"==typeof t.limit&&(s.items=s.items.slice(0,t.limit)),s}}const N=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var i in e)e.hasOwnProperty(i)&&t(e[i],i)},j=e=>{if(e.jquery)return e[0]
+if(e instanceof HTMLElement)return e
+if($(e)){var t=document.createElement("template")
+return t.innerHTML=e.trim(),t.content.firstChild}return document.querySelector(e)},$=e=>"string"==typeof e&&e.indexOf("<")>-1,V=(e,t)=>{var i=document.createEvent("HTMLEvents")
+i.initEvent(t,!0,!1),e.dispatchEvent(i)},q=(e,t)=>{Object.assign(e.style,t)},D=(e,...t)=>{var i=H(t);(e=M(e)).map((e=>{i.map((t=>{e.classList.add(t)}))}))},R=(e,...t)=>{var i=H(t);(e=M(e)).map((e=>{i.map((t=>{e.classList.remove(t)}))}))},H=e=>{var t=[]
+return N(e,(e=>{"string"==typeof e&&(e=e.trim().split(/[\11\12\14\15\40]/)),Array.isArray(e)&&(t=t.concat(e))})),t.filter(Boolean)},M=e=>(Array.isArray(e)||(e=[e]),e),z=(e,t,i)=>{if(!i||i.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
+e=e.parentNode}},B=(e,t=0)=>t>0?e[e.length-1]:e[0],K=(e,t)=>{if(!e)return-1
+t=t||e.nodeName
+for(var i=0;e=e.previousElementSibling;)e.matches(t)&&i++
+return i},Q=(e,t)=>{N(t,((t,i)=>{null==t?e.removeAttribute(i):e.setAttribute(i,""+t)}))},G=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},U=(e,t)=>{if(null===t)return
+if("string"==typeof t){if(!t.length)return
+t=new RegExp(t,"i")}const i=e=>3===e.nodeType?(e=>{var i=e.data.match(t)
+if(i&&e.data.length>0){var s=document.createElement("span")
+s.className="highlight"
+var n=e.splitText(i.index)
+n.splitText(i[0].length)
+var o=n.cloneNode(!0)
+return s.appendChild(o),G(n,s),1}return 0})(e):((e=>{1!==e.nodeType||!e.childNodes||/(script|style)/i.test(e.tagName)||"highlight"===e.className&&"SPAN"===e.tagName||Array.from(e.childNodes).forEach((e=>{i(e)}))})(e),0)
+i(e)},J="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
+var W={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,refreshThrottle:300,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
+const X=e=>null==e?null:Y(e),Y=e=>"boolean"==typeof e?e?"1":"0":e+"",Z=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),ee=(e,t)=>{var i
+return function(s,n){var o=this
+i&&(o.loading=Math.max(o.loading-1,0),clearTimeout(i)),i=setTimeout((function(){i=null,o.loadedSearches[s]=!0,e.call(o,s,n)}),t)}},te=(e,t,i)=>{var s,n=e.trigger,o={}
+for(s of(e.trigger=function(){var i=arguments[0]
+if(-1===t.indexOf(i))return n.apply(e,arguments)
+o[i]=arguments},i.apply(e,[]),e.trigger=n,t))s in o&&n.apply(e,o[s])},ie=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},se=(e,t,i,s)=>{e.addEventListener(t,i,s)},ne=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),oe=(e,t)=>{const i=e.getAttribute("id")
+return i||(e.setAttribute("id",t),t)},re=e=>e.replace(/[\\"']/g,"\\$&"),le=(e,t)=>{t&&e.append(t)}
+function ae(e,t){var i=Object.assign({},W,t),s=i.dataAttr,n=i.labelField,o=i.valueField,r=i.disabledField,l=i.optgroupField,a=i.optgroupLabelField,c=i.optgroupValueField,d=e.tagName.toLowerCase(),u=e.getAttribute("placeholder")||e.getAttribute("data-placeholder")
+if(!u&&!i.allowEmptyOption){let t=e.querySelector('option[value=""]')
+t&&(u=t.textContent)}var p={placeholder:u,options:[],optgroups:[],items:[],maxItems:null}
+return"select"===d?(()=>{var t,d=p.options,u={},h=1
+let g=0
+var f=e=>{var t=Object.assign({},e.dataset),i=s&&t[s]
+return"string"==typeof i&&i.length&&(t=Object.assign(t,JSON.parse(i))),t},v=(e,t)=>{var s=X(e.value)
+if(null!=s&&(s||i.allowEmptyOption)){if(u.hasOwnProperty(s)){if(t){var a=u[s][l]
+a?Array.isArray(a)?a.push(t):u[s][l]=[a,t]:u[s][l]=t}}else{var c=f(e)
+c[n]=c[n]||e.textContent,c[o]=c[o]||s,c[r]=c[r]||e.disabled,c[l]=c[l]||t,c.$option=e,c.$order=c.$order||++g,u[s]=c,d.push(c)}e.selected&&p.items.push(s)}}
+p.maxItems=e.hasAttribute("multiple")?null:1,N(e.children,(e=>{var i,s,n
+"optgroup"===(t=e.tagName.toLowerCase())?((n=f(i=e))[a]=n[a]||i.getAttribute("label")||"",n[c]=n[c]||h++,n[r]=n[r]||i.disabled,n.$order=n.$order||++g,p.optgroups.push(n),s=n[c],N(i.children,(e=>{v(e,s)}))):"option"===t&&v(e)}))})():(()=>{const t=e.getAttribute(s)
+if(t)p.options=JSON.parse(t),N(p.options,(e=>{p.items.push(e[o])}))
+else{var r=e.value.trim()||""
+if(!i.allowEmptyOption&&!r.length)return
+const t=r.split(i.delimiter)
+N(t,(e=>{const t={}
+t[n]=e,t[o]=e,p.options.push(t)})),p.items=t}})(),Object.assign({},W,p,t)}var ce=0
+class de extends(function(e){return e.plugins={},class extends e{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(t,i){e.plugins[t]={name:t,fn:i}}initializePlugins(e){var t,i
+const s=this,n=[]
+if(Array.isArray(e))e.forEach((e=>{"string"==typeof e?n.push(e):(s.plugins.settings[e.name]=e.options,n.push(e.name))}))
+else if(e)for(t in e)e.hasOwnProperty(t)&&(s.plugins.settings[t]=e[t],n.push(t))
+for(;i=n.shift();)s.require(i)}loadPlugin(t){var i=this,s=i.plugins,n=e.plugins[t]
+if(!e.plugins.hasOwnProperty(t))throw new Error('Unable to find "'+t+'" plugin')
+s.requested[t]=!0,s.loaded[t]=n.fn.apply(i,[i.plugins.settings[t]||{}]),s.names.push(t)}require(e){var t=this,i=t.plugins
+if(!t.plugins.loaded.hasOwnProperty(e)){if(i.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")')
+t.loadPlugin(e)}return i.loaded[e]}}}(t)){constructor(e,t){var i
+super(),this.control_input=void 0,this.wrapper=void 0,this.dropdown=void 0,this.control=void 0,this.dropdown_content=void 0,this.focus_node=void 0,this.order=0,this.settings=void 0,this.input=void 0,this.tabIndex=void 0,this.is_select_tag=void 0,this.rtl=void 0,this.inputId=void 0,this._destroy=void 0,this.sifter=void 0,this.isOpen=!1,this.isDisabled=!1,this.isReadOnly=!1,this.isRequired=void 0,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.ignoreHover=!1,this.hasOptions=!1,this.currentResults=void 0,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],this.refreshTimeout=null,ce++
+var s=j(e)
+if(s.tomselect)throw new Error("Tom Select already initialized on this element")
+s.tomselect=this,i=(window.getComputedStyle&&window.getComputedStyle(s,null)).getPropertyValue("direction")
+const n=ae(s,t)
+this.settings=n,this.input=s,this.tabIndex=s.tabIndex||0,this.is_select_tag="select"===s.tagName.toLowerCase(),this.rtl=/rtl/i.test(i),this.inputId=oe(s,"tomselect-"+ce),this.isRequired=s.required,this.sifter=new P(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
+var o=n.createFilter
+"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=e=>o.test(e):n.createFilter=e=>this.settings.duplicates||!this.options[e]),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
+const r=j("<div>"),l=j("<div>"),a=this._render("dropdown"),c=j('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",u=n.mode
+var p
+if(D(r,n.wrapperClass,d,u),D(l,n.controlClass),le(r,l),D(a,n.dropdownClass,u),n.copyClassesToDropdown&&D(a,d),D(c,n.dropdownContentClass),le(a,c),j(n.dropdownParent||r).appendChild(a),$(n.controlInput)){p=j(n.controlInput)
+E(["autocorrect","autocapitalize","autocomplete","spellcheck"],(e=>{s.getAttribute(e)&&Q(p,{[e]:s.getAttribute(e)})})),p.tabIndex=-1,l.appendChild(p),this.focus_node=p}else n.controlInput?(p=j(n.controlInput),this.focus_node=p):(p=j("<input/>"),this.focus_node=l)
+this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=p,this.setup()}setup(){const e=this,t=e.settings,i=e.control_input,s=e.dropdown,n=e.dropdown_content,o=e.wrapper,l=e.control,a=e.input,c=e.focus_node,d={passive:!0},u=e.inputId+"-ts-dropdown"
+Q(n,{id:u}),Q(c,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":u})
+const p=oe(c,e.inputId+"-ts-control"),h="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(e.inputId)+"']",g=document.querySelector(h),f=e.focus.bind(e)
+if(g){se(g,"click",f),Q(g,{for:p})
+const t=oe(g,e.inputId+"-ts-label")
+Q(c,{"aria-labelledby":t}),Q(n,{"aria-labelledby":t})}if(o.style.width=a.style.width,e.plugins.names.length){const t="plugin-"+e.plugins.names.join(" plugin-")
+D([o,s],t)}(null===t.maxItems||t.maxItems>1)&&e.is_select_tag&&Q(a,{multiple:"multiple"}),t.placeholder&&Q(i,{placeholder:t.placeholder}),!t.splitOn&&t.delimiter&&(t.splitOn=new RegExp("\\s*"+r(t.delimiter)+"+\\s*")),t.load&&t.loadThrottle&&(t.load=ee(t.load,t.loadThrottle)),se(s,"mousemove",(()=>{e.ignoreHover=!1})),se(s,"mouseenter",(t=>{var i=z(t.target,"[data-selectable]",s)
+i&&e.onOptionHover(t,i)}),{capture:!0}),se(s,"click",(t=>{const i=z(t.target,"[data-selectable]")
+i&&(e.onOptionSelect(t,i),ie(t,!0))})),se(l,"click",(t=>{var s=z(t.target,"[data-ts-item]",l)
+s&&e.onItemSelect(t,s)?ie(t,!0):""==i.value&&(e.onClick(),ie(t,!0))})),se(c,"keydown",(t=>e.onKeyDown(t))),se(i,"keypress",(t=>e.onKeyPress(t))),se(i,"input",(t=>e.onInput(t))),se(c,"blur",(t=>e.onBlur(t))),se(c,"focus",(t=>e.onFocus(t))),se(i,"paste",(t=>e.onPaste(t)))
+const v=t=>{const n=t.composedPath()[0]
+if(!o.contains(n)&&!s.contains(n))return e.isFocused&&e.blur(),void e.inputState()
+n==i&&e.isOpen?t.stopPropagation():ie(t,!0)},m=()=>{e.isOpen&&e.positionDropdown()}
+se(document,"mousedown",v),se(window,"scroll",m,d),se(window,"resize",m,d),this._destroy=()=>{document.removeEventListener("mousedown",v),window.removeEventListener("scroll",m),window.removeEventListener("resize",m),g&&g.removeEventListener("click",f)},this.revertSettings={innerHTML:a.innerHTML,tabIndex:a.tabIndex},a.tabIndex=-1,a.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),t.items=[],delete t.optgroups,delete t.options,se(a,"invalid",(()=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())})),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,a.disabled?e.disable():a.readOnly?e.setReadOnly(!0):e.enable(),e.on("change",this.onChange),D(a,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),!0===t.preload&&e.preload()}setupOptions(e=[],t=[]){this.addOptions(e),E(t,(e=>{this.registerOptionGroup(e)}))}setupTemplates(){var e=this,t=e.settings.labelField,i=e.settings.optgroupLabelField,s={optgroup:e=>{let t=document.createElement("div")
+return t.className="optgroup",t.appendChild(e.options),t},optgroup_header:(e,t)=>'<div class="optgroup-header">'+t(e[i])+"</div>",option:(e,i)=>"<div>"+i(e[t])+"</div>",item:(e,i)=>"<div>"+i(e[t])+"</div>",option_create:(e,t)=>'<div class="create">Add <strong>'+t(e.input)+"</strong>&hellip;</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"}
+e.settings.render=Object.assign({},s,e.settings.render)}setupCallbacks(){var e,t,i={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"}
+for(e in i)(t=this.settings[i[e]])&&this.on(e,t)}sync(e=!0){const t=this,i=e?ae(t.input,{delimiter:t.settings.delimiter}):t.settings
+t.setupOptions(i.options,i.optgroups),t.setValue(i.items||[],!0),t.lastQuery=null}onClick(){var e=this
+if(e.activeItems.length>0)return e.clearActiveItems(),void e.focus()
+e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){V(this.input,"input"),V(this.input,"change")}onPaste(e){var t=this
+t.isInputHidden||t.isLocked?ie(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
+if(e.match(t.settings.splitOn)){var i=e.trim().split(t.settings.splitOn)
+E(i,(e=>{X(e)&&(this.options[e]?t.addItem(e):t.createItem(e))}))}}),0)}onKeyPress(e){var t=this
+if(!t.isLocked){var i=String.fromCharCode(e.keyCode||e.which)
+return t.settings.create&&"multi"===t.settings.mode&&i===t.settings.delimiter?(t.createItem(),void ie(e)):void 0}ie(e)}onKeyDown(e){var t=this
+if(t.ignoreHover=!0,t.isLocked)9!==e.keyCode&&ie(e)
+else{switch(e.keyCode){case 65:if(ne(J,e)&&""==t.control_input.value)return ie(e),void t.selectAll()
+break
+case 27:return t.isOpen&&(ie(e,!0),t.close()),void t.clearActiveItems()
+case 40:if(!t.isOpen&&t.hasOptions)t.open()
+else if(t.activeOption){let e=t.getAdjacent(t.activeOption,1)
+e&&t.setActiveOption(e)}return void ie(e)
+case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
+e&&t.setActiveOption(e)}return void ie(e)
+case 13:return void(t.canSelect(t.activeOption)?(t.onOptionSelect(e,t.activeOption),ie(e)):(t.settings.create&&t.createItem()||document.activeElement==t.control_input&&t.isOpen)&&ie(e))
+case 37:return void t.advanceSelection(-1,e)
+case 39:return void t.advanceSelection(1,e)
+case 9:return void(t.settings.selectOnTab&&(t.canSelect(t.activeOption)&&(t.onOptionSelect(e,t.activeOption),ie(e)),t.settings.create&&t.createItem()&&ie(e)))
+case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!ne(J,e)&&ie(e)}}onInput(e){if(this.isLocked)return
+const t=this.inputValue()
+this.lastValue!==t&&(this.lastValue=t,""!=t?(this.refreshTimeout&&clearTimeout(this.refreshTimeout),this.refreshTimeout=((e,t)=>t>0?setTimeout(e,t):(e.call(null),null))((()=>{this.refreshTimeout=null,this._onInput()}),this.settings.refreshThrottle)):this._onInput())}_onInput(){const e=this.lastValue
+this.settings.shouldLoad.call(this,e)&&this.load(e),this.refreshOptions(),this.trigger("type",e)}onOptionHover(e,t){this.ignoreHover||this.setActiveOption(t,!1)}onFocus(e){var t=this,i=t.isFocused
+if(t.isDisabled||t.isReadOnly)return t.blur(),void ie(e)
+t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.preload(),i||t.trigger("focus"),t.activeItems.length||(t.inputState(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(e){if(!1!==document.hasFocus()){var t=this
+if(t.isFocused){t.isFocused=!1,t.ignoreFocus=!1
+var i=()=>{t.close(),t.setActiveItem(),t.setCaret(t.items.length),t.trigger("blur")}
+t.settings.create&&t.settings.createOnBlur?t.createItem(null,i):i()}}}onOptionSelect(e,t){var i,s=this
+t.parentElement&&t.parentElement.matches("[data-disabled]")||(t.classList.contains("create")?s.createItem(null,(()=>{s.settings.closeAfterSelect&&s.close()})):void 0!==(i=t.dataset.value)&&(s.lastQuery=null,s.addItem(i),s.settings.closeAfterSelect&&s.close(),!s.settings.hideSelected&&e.type&&/click/.test(e.type)&&s.setActiveOption(t)))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,t){var i=this
+return!i.isLocked&&"multi"===i.settings.mode&&(ie(e),i.setActiveItem(t,e),!0)}canLoad(e){return!!this.settings.load&&!this.loadedSearches.hasOwnProperty(e)}load(e){const t=this
+if(!t.canLoad(e))return
+D(t.wrapper,t.settings.loadingClass),t.loading++
+const i=t.loadCallback.bind(t)
+t.settings.load.call(t,e,i)}loadCallback(e,t){const i=this
+i.loading=Math.max(i.loading-1,0),i.lastQuery=null,i.clearActiveOption(),i.setupOptions(e,t),i.refreshOptions(i.isFocused&&!i.isInputHidden),i.loading||R(i.wrapper,i.settings.loadingClass),i.trigger("load",e,t)}preload(){var e=this.wrapper.classList
+e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var t=this.control_input
+t.value!==e&&(t.value=e,V(t,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,t){te(this,t?[]:["change"],(()=>{this.clear(t),this.addItems(e,t)}))}setMaxItems(e){0===e&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,t){var i,s,n,o,r,l,a=this
+if("single"!==a.settings.mode){if(!e)return a.clearActiveItems(),void(a.isFocused&&a.inputState())
+if("click"===(i=t&&t.type.toLowerCase())&&ne("shiftKey",t)&&a.activeItems.length){for(l=a.getLastActive(),(n=Array.prototype.indexOf.call(a.control.children,l))>(o=Array.prototype.indexOf.call(a.control.children,e))&&(r=n,n=o,o=r),s=n;s<=o;s++)e=a.control.children[s],-1===a.activeItems.indexOf(e)&&a.setActiveItemClass(e)
+ie(t)}else"click"===i&&ne(J,t)||"keydown"===i&&ne("shiftKey",t)?e.classList.contains("active")?a.removeActiveItem(e):a.setActiveItemClass(e):(a.clearActiveItems(),a.setActiveItemClass(e))
+a.inputState(),a.isFocused||a.focus()}}setActiveItemClass(e){const t=this,i=t.control.querySelector(".last-active")
+i&&R(i,"last-active"),D(e,"active last-active"),t.trigger("item_select",e),-1==t.activeItems.indexOf(e)&&t.activeItems.push(e)}removeActiveItem(e){var t=this.activeItems.indexOf(e)
+this.activeItems.splice(t,1),R(e,"active")}clearActiveItems(){R(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e,t=!0){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,Q(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),Q(e,{"aria-selected":"true"}),D(e,"active"),t&&this.scrollToOption(e)))}scrollToOption(e,t){if(!e)return
+const i=this.dropdown_content,s=i.clientHeight,n=i.scrollTop||0,o=e.offsetHeight,r=e.getBoundingClientRect().top-i.getBoundingClientRect().top+n
+r+o>s+n?this.scroll(r-s+o,t):r<n&&this.scroll(r,t)}scroll(e,t){const i=this.dropdown_content
+t&&(i.style.scrollBehavior=t),i.scrollTop=e,i.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(R(this.activeOption,"active"),Q(this.activeOption,{"aria-selected":null})),this.activeOption=null,Q(this.focus_node,{"aria-activedescendant":null})}selectAll(){const e=this
+if("single"===e.settings.mode)return
+const t=e.controlChildren()
+t.length&&(e.inputState(),e.close(),e.activeItems=t,E(t,(t=>{e.setActiveItemClass(t)})))}inputState(){var e=this
+e.control.contains(e.control_input)&&(Q(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&Q(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}inputValue(){return this.control_input.value.trim()}focus(){var e=this
+e.isDisabled||e.isReadOnly||(e.ignoreFocus=!0,e.control_input.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,t=e.sortField
+return"string"==typeof e.sortField&&(t=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:t,nesting:e.nesting}}search(e){var t,i,s=this,n=this.getSearchOptions()
+if(s.settings.score&&"function"!=typeof(i=s.settings.score.call(s,e)))throw new Error('Tom Select "score" setting must be a function that returns a function')
+return e!==s.lastQuery?(s.lastQuery=e,t=s.sifter.search(e,Object.assign(n,{score:i})),s.currentResults=t):t=Object.assign({},s.currentResults),s.settings.hideSelected&&(t.items=t.items.filter((e=>{let t=X(e.id)
+return!(t&&-1!==s.items.indexOf(t))}))),t}refreshOptions(e=!0){var t,i,s,n,o,r,l,a,c,d
+const u={},p=[]
+var h=this,g=h.inputValue()
+const f=g===h.lastQuery||""==g&&null==h.lastQuery
+var v=h.search(g),m=null,y=h.settings.shouldOpen||!1,O=h.dropdown_content
+f&&(m=h.activeOption)&&(c=m.closest("[data-group]")),n=v.items.length,"number"==typeof h.settings.maxOptions&&(n=Math.min(n,h.settings.maxOptions)),n>0&&(y=!0)
+const b=(e,t)=>{let i=u[e]
+if(void 0!==i){let e=p[i]
+if(void 0!==e)return[i,e.fragment]}let s=document.createDocumentFragment()
+return i=p.length,p.push({fragment:s,order:t,optgroup:e}),[i,s]}
+for(t=0;t<n;t++){let e=v.items[t]
+if(!e)continue
+let n=e.id,l=h.options[n]
+if(void 0===l)continue
+let a=Y(n),d=h.getOption(a,!0)
+for(h.settings.hideSelected||d.classList.toggle("selected",h.items.includes(a)),o=l[h.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++){o=r[i]
+let e=l.$order,t=h.optgroups[o]
+void 0===t?o="":e=t.$order
+const[s,a]=b(o,e)
+i>0&&(d=d.cloneNode(!0),Q(d,{id:l.$id+"-clone-"+i,"aria-selected":null}),d.classList.add("ts-cloned"),R(d,"active"),h.activeOption&&h.activeOption.dataset.value==n&&c&&c.dataset.group===o.toString()&&(m=d)),a.appendChild(d),""!=o&&(u[o]=s)}}var w
+h.settings.lockOptgroupOrder&&p.sort(((e,t)=>e.order-t.order)),l=document.createDocumentFragment(),E(p,(e=>{let t=e.fragment,i=e.optgroup
+if(!t||!t.children.length)return
+let s=h.optgroups[i]
+if(void 0!==s){let e=document.createDocumentFragment(),i=h.render("optgroup_header",s)
+le(e,i),le(e,t)
+let n=h.render("optgroup",{group:s,options:e})
+le(l,n)}else le(l,t)})),O.innerHTML="",le(O,l),h.settings.highlight&&(w=O.querySelectorAll("span.highlight"),Array.prototype.forEach.call(w,(function(e){var t=e.parentNode
+t.replaceChild(e.firstChild,e),t.normalize()})),v.query.length&&v.tokens.length&&E(v.tokens,(e=>{U(O,e.regex)})))
+var _=e=>{let t=h.render(e,{input:g})
+return t&&(y=!0,O.insertBefore(t,O.firstChild)),t}
+if(h.loading?_("loading"):h.settings.shouldLoad.call(h,g)?0===v.items.length&&_("no_results"):_("not_loading"),(a=h.canCreate(g))&&(d=_("option_create")),h.hasOptions=v.items.length>0||a,y){if(v.items.length>0){if(m||"single"!==h.settings.mode||null==h.items[0]||(m=h.getOption(h.items[0])),!O.contains(m)){let e=0
+d&&!h.settings.addPrecedence&&(e=1),m=h.selectable()[e]}}else d&&(m=d)
+e&&!h.isOpen&&(h.open(),h.scrollToOption(m,"auto")),h.setActiveOption(m)}else h.clearActiveOption(),e&&h.isOpen&&h.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,t=!1){const i=this
+if(Array.isArray(e))return i.addOptions(e,t),!1
+const s=X(e[i.settings.valueField])
+return null!==s&&!i.options.hasOwnProperty(s)&&(e.$order=e.$order||++i.order,e.$id=i.inputId+"-opt-"+e.$order,i.options[s]=e,i.lastQuery=null,t&&(i.userOptions[s]=t,i.trigger("option_add",s,e)),s)}addOptions(e,t=!1){E(e,(e=>{this.addOption(e,t)}))}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var t=X(e[this.settings.optgroupValueField])
+return null!==t&&(e.$order=e.$order||++this.order,this.optgroups[t]=e,t)}addOptionGroup(e,t){var i
+t[this.settings.optgroupValueField]=e,(i=this.registerOptionGroup(t))&&this.trigger("optgroup_add",i,t)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,t){const i=this
+var s,n
+const o=X(e),r=X(t[i.settings.valueField])
+if(null===o)return
+const l=i.options[o]
+if(null==l)return
+if("string"!=typeof r)throw new Error("Value must be set in option data")
+const a=i.getOption(o),c=i.getItem(o)
+if(t.$order=t.$order||l.$order,delete i.options[o],i.uncacheValue(r),i.options[r]=t,a){if(i.dropdown_content.contains(a)){const e=i._render("option",t)
+G(a,e),i.activeOption===a&&i.setActiveOption(e)}a.remove()}c&&(-1!==(n=i.items.indexOf(o))&&i.items.splice(n,1,r),s=i._render("item",t),c.classList.contains("active")&&D(s,"active"),G(c,s)),i.lastQuery=null}removeOption(e,t){const i=this
+e=Y(e),i.uncacheValue(e),delete i.userOptions[e],delete i.options[e],i.lastQuery=null,i.trigger("option_remove",e),i.removeItem(e,t)}clearOptions(e){const t=(e||this.clearFilter).bind(this)
+this.loadedSearches={},this.userOptions={},this.clearCache()
+const i={}
+E(this.options,((e,s)=>{t(e,s)&&(i[s]=e)})),this.options=this.sifter.items=i,this.lastQuery=null,this.trigger("option_clear")}clearFilter(e,t){return this.items.indexOf(t)>=0}getOption(e,t=!1){const i=X(e)
+if(null===i)return null
+const s=this.options[i]
+if(null!=s){if(s.$div)return s.$div
+if(t)return this._render("option",s)}return null}getAdjacent(e,t,i="option"){var s
+if(!e)return null
+s="item"==i?this.controlChildren():this.dropdown_content.querySelectorAll("[data-selectable]")
+for(let i=0;i<s.length;i++)if(s[i]==e)return t>0?s[i+1]:s[i-1]
+return null}getItem(e){if("object"==typeof e)return e
+var t=X(e)
+return null!==t?this.control.querySelector(`[data-value="${re(t)}"]`):null}addItems(e,t){var i=this,s=Array.isArray(e)?e:[e]
+const n=(s=s.filter((e=>-1===i.items.indexOf(e))))[s.length-1]
+s.forEach((e=>{i.isPending=e!==n,i.addItem(e,t)}))}addItem(e,t){te(this,t?[]:["change","dropdown_close"],(()=>{var i,s
+const n=this,o=n.settings.mode,r=X(e)
+if((!r||-1===n.items.indexOf(r)||("single"===o&&n.close(),"single"!==o&&n.settings.duplicates))&&null!==r&&n.options.hasOwnProperty(r)&&("single"===o&&n.clear(t),"multi"!==o||!n.isFull())){if(i=n._render("item",n.options[r]),n.control.contains(i)&&(i=i.cloneNode(!0)),s=n.isFull(),n.items.splice(n.caretPos,0,r),n.insertAtCaret(i),n.isSetup){if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
+t&&n.setActiveOption(t)}n.isPending||n.settings.closeAfterSelect||n.refreshOptions(n.isFocused&&"single"!==o),0!=n.settings.closeAfterSelect&&n.isFull()?n.close():n.isPending||n.positionDropdown(),n.trigger("item_add",r,i),n.isPending||n.updateOriginalInput({silent:t})}(!n.isPending||!s&&n.isFull())&&(n.inputState(),n.refreshState())}}))}removeItem(e=null,t){const i=this
+if(!(e=i.getItem(e)))return
+var s,n
+const o=e.dataset.value
+s=K(e),e.remove(),e.classList.contains("active")&&(n=i.activeItems.indexOf(e),i.activeItems.splice(n,1),R(e,"active")),i.items.splice(s,1),i.lastQuery=null,!i.settings.persist&&i.userOptions.hasOwnProperty(o)&&i.removeOption(o,t),s<i.caretPos&&i.setCaret(i.caretPos-1),i.updateOriginalInput({silent:t}),i.refreshState(),i.positionDropdown(),i.trigger("item_remove",o,e)}createItem(e=null,t=(()=>{})){3===arguments.length&&(t=arguments[2]),"function"!=typeof t&&(t=()=>{})
+var i,s=this,n=s.caretPos
+if(e=e||s.inputValue(),!s.canCreate(e))return t(),!1
+s.lock()
+var o=!1,r=e=>{if(s.unlock(),!e||"object"!=typeof e)return t()
+var i=X(e[s.settings.valueField])
+if("string"!=typeof i)return t()
+s.setTextboxValue(),s.addOption(e,!0),s.setCaret(n),s.addItem(i),t(e),o=!0}
+return i="function"==typeof s.settings.create?s.settings.create.call(this,e,r):{[s.settings.labelField]:e,[s.settings.valueField]:e},o||r(i),!0}refreshItems(){var e=this
+e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){const e=this
+e.refreshValidityState()
+const t=e.isFull(),i=e.isLocked
+e.wrapper.classList.toggle("rtl",e.rtl)
+const s=e.wrapper.classList
+var n
+s.toggle("focus",e.isFocused),s.toggle("disabled",e.isDisabled),s.toggle("readonly",e.isReadOnly),s.toggle("required",e.isRequired),s.toggle("invalid",!e.isValid),s.toggle("locked",i),s.toggle("full",t),s.toggle("input-active",e.isFocused&&!e.isInputHidden),s.toggle("dropdown-active",e.isOpen),s.toggle("has-options",(n=e.options,0===Object.keys(n).length)),s.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
+e.input.validity&&(e.isValid=e.input.validity.valid,e.isInvalid=!e.isValid)}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
+var i,s
+const n=t.input.querySelector('option[value=""]')
+if(t.is_select_tag){const o=[],r=t.input.querySelectorAll("option:checked").length
+function l(e,i,s){return e||(e=j('<option value="'+Z(i)+'">'+Z(s)+"</option>")),e!=n&&t.input.append(e),o.push(e),(e!=n||r>0)&&(e.selected=!0),e}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?l(n,"",""):t.items.forEach((e=>{if(i=t.options[e],s=i[t.settings.labelField]||"",o.includes(i.$option)){l(t.input.querySelector(`option[value="${re(e)}"]:not(:checked)`),e,s)}else i.$option=l(i.$option,e,s)}))}else t.input.value=t.getValue()
+t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
+e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,Q(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),q(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),q(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,i=t.isOpen
+e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&t.inputState()),t.isOpen=!1,Q(t.focus_node,{"aria-expanded":"false"}),q(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),i&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),i=e.offsetHeight+t.top+window.scrollY,s=t.left+window.scrollX
+q(this.dropdown,{width:t.width+"px",top:i+"px",left:s+"px"})}}clear(e){var t=this
+if(t.items.length){var i=t.controlChildren()
+E(i,(e=>{t.removeItem(e,!0)})),t.inputState(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){const t=this,i=t.caretPos,s=t.control
+s.insertBefore(e,s.children[i]||null),t.setCaret(i+1)}deleteSelection(e){var t,i,s,n,o,r=this
+t=e&&8===e.keyCode?-1:1,i={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
+const l=[]
+if(r.activeItems.length)n=B(r.activeItems,t),s=K(n),t>0&&s++,E(r.activeItems,(e=>l.push(e)))
+else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const e=r.controlChildren()
+let s
+t<0&&0===i.start&&0===i.length?s=e[r.caretPos-1]:t>0&&i.start===r.inputValue().length&&(s=e[r.caretPos]),void 0!==s&&l.push(s)}if(!r.shouldDelete(l,e))return!1
+for(ie(e,!0),void 0!==s&&r.setCaret(s);l.length;)r.removeItem(l.pop())
+return r.inputState(),r.positionDropdown(),r.refreshOptions(!1),!0}shouldDelete(e,t){const i=e.map((e=>e.dataset.value))
+return!(!i.length||"function"==typeof this.settings.onDelete&&!1===this.settings.onDelete(i,t))}advanceSelection(e,t){var i,s,n=this
+n.rtl&&(e*=-1),n.inputValue().length||(ne(J,t)||ne("shiftKey",t)?(s=(i=n.getLastActive(e))?i.classList.contains("active")?n.getAdjacent(i,e,"item"):i:e>0?n.control_input.nextElementSibling:n.control_input.previousElementSibling)&&(s.classList.contains("active")&&n.removeActiveItem(i),n.setActiveItemClass(s)):n.moveCaret(e))}moveCaret(e){}getLastActive(e){let t=this.control.querySelector(".last-active")
+if(t)return t
+var i=this.control.querySelectorAll(".active")
+return i?B(i,e):void 0}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){this.setLocked(!0)}unlock(){this.setLocked(!1)}setLocked(e=this.isReadOnly||this.isDisabled){this.isLocked=e,this.refreshState()}disable(){this.setDisabled(!0),this.close()}enable(){this.setDisabled(!1)}setDisabled(e){this.focus_node.tabIndex=e?-1:this.tabIndex,this.isDisabled=e,this.input.disabled=e,this.control_input.disabled=e,this.setLocked()}setReadOnly(e){this.isReadOnly=e,this.input.readOnly=e,this.control_input.readOnly=e,this.setLocked()}destroy(){var e=this,t=e.revertSettings
+e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=t.innerHTML,e.input.tabIndex=t.tabIndex,R(e.input,"tomselected","ts-hidden-accessible"),e._destroy(),delete e.input.tomselect}render(e,t){var i,s
+const n=this
+if("function"!=typeof this.settings.render[e])return null
+if(!(s=n.settings.render[e].call(this,t,Z)))return null
+if(s=j(s),"option"===e||"option_create"===e?t[n.settings.disabledField]?Q(s,{"aria-disabled":"true"}):Q(s,{"data-selectable":""}):"optgroup"===e&&(i=t.group[n.settings.optgroupValueField],Q(s,{"data-group":i}),t.group[n.settings.disabledField]&&Q(s,{"data-disabled":""})),"option"===e||"item"===e){const i=Y(t[n.settings.valueField])
+Q(s,{"data-value":i}),"item"===e?(D(s,n.settings.itemClass),Q(s,{"data-ts-item":""})):(D(s,n.settings.optionClass),Q(s,{role:"option",id:t.$id}),t.$div=s,n.options[i]=t)}return s}_render(e,t){const i=this.render(e,t)
+if(null==i)throw"HTMLElement expected"
+return i}clearCache(){E(this.options,(e=>{e.$div&&(e.$div.remove(),delete e.$div)}))}uncacheValue(e){const t=this.getOption(e)
+t&&t.remove()}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,t,i){var s=this,n=s[t]
+s[t]=function(){var t,o
+return"after"===e&&(t=n.apply(s,arguments)),o=i.apply(s,arguments),"instead"===e?o:("before"===e&&(t=n.apply(s,arguments)),t)}}}return de.define("change_listener",(function(){se(this.input,"change",(()=>{this.sync()}))})),de.define("checkbox_options",(function(e){var t=this,i=t.onOptionSelect
+t.settings.hideSelected=!1
+const s=Object.assign({className:"tomselect-checkbox",checkedClassNames:void 0,uncheckedClassNames:void 0},e)
+var n=function(e,t){t?(e.checked=!0,s.uncheckedClassNames&&e.classList.remove(...s.uncheckedClassNames),s.checkedClassNames&&e.classList.add(...s.checkedClassNames)):(e.checked=!1,s.checkedClassNames&&e.classList.remove(...s.checkedClassNames),s.uncheckedClassNames&&e.classList.add(...s.uncheckedClassNames))},o=function(e){setTimeout((()=>{var t=e.querySelector("input."+s.className)
+t instanceof HTMLInputElement&&n(t,e.classList.contains("selected"))}),1)}
+t.hook("after","setupTemplates",(()=>{var e=t.settings.render.option
+t.settings.render.option=(i,o)=>{var r=j(e.call(t,i,o)),l=document.createElement("input")
+s.className&&l.classList.add(s.className),l.addEventListener("click",(function(e){ie(e)})),l.type="checkbox"
+const a=X(i[t.settings.valueField])
+return n(l,!!(a&&t.items.indexOf(a)>-1)),r.prepend(l),r}})),t.on("item_remove",(e=>{var i=t.getOption(e)
+i&&(i.classList.remove("selected"),o(i))})),t.on("item_add",(e=>{var i=t.getOption(e)
+i&&o(i)})),t.hook("instead","onOptionSelect",((e,s)=>{if(s.classList.contains("selected"))return s.classList.remove("selected"),t.removeItem(s.dataset.value),t.refreshOptions(),void ie(e,!0)
+i.call(t,e,s),o(s)}))})),de.define("clear_button",(function(e){const t=this,i=Object.assign({className:"clear-button",title:"Clear All",html:e=>`<div class="${e.className}" title="${e.title}">&#10799;</div>`},e)
+t.on("initialize",(()=>{var e=j(i.html(i))
+e.addEventListener("click",(e=>{t.isLocked||(t.clear(),"single"===t.settings.mode&&t.settings.allowEmptyOption&&t.addItem(""),e.preventDefault(),e.stopPropagation())})),t.control.appendChild(e)}))})),de.define("drag_drop",(function(){var e=this
+if("multi"!==e.settings.mode)return
+var t=e.lock,i=e.unlock
+let s,n=!0
+e.hook("after","setupTemplates",(()=>{var t=e.settings.render.item
+e.settings.render.item=(i,o)=>{const r=j(t.call(e,i,o))
+Q(r,{draggable:"true"})
+const l=e=>{e.preventDefault(),r.classList.add("ts-drag-over"),a(r,s)},a=(e,t)=>{var i,s,n
+void 0!==t&&(((e,t)=>{do{var i
+if(e==(t=null==(i=t)?void 0:i.previousElementSibling))return!0}while(t&&t.previousElementSibling)
+return!1})(t,r)?(s=t,null==(n=(i=e).parentNode)||n.insertBefore(s,i.nextSibling)):((e,t)=>{var i
+null==(i=e.parentNode)||i.insertBefore(t,e)})(e,t))}
+return se(r,"mousedown",(e=>{n||ie(e),e.stopPropagation()})),se(r,"dragstart",(e=>{s=r,setTimeout((()=>{r.classList.add("ts-dragging")}),0)})),se(r,"dragenter",l),se(r,"dragover",l),se(r,"dragleave",(()=>{r.classList.remove("ts-drag-over")})),se(r,"dragend",(()=>{var t
+document.querySelectorAll(".ts-drag-over").forEach((e=>e.classList.remove("ts-drag-over"))),null==(t=s)||t.classList.remove("ts-dragging"),s=void 0
+var i=[]
+e.control.querySelectorAll("[data-value]").forEach((e=>{if(e.dataset.value){let t=e.dataset.value
+t&&i.push(t)}})),e.setValue(i)})),r}})),e.hook("instead","lock",(()=>(n=!1,t.call(e)))),e.hook("instead","unlock",(()=>(n=!0,i.call(e))))})),de.define("dropdown_header",(function(e){const t=this,i=Object.assign({title:"Untitled",headerClass:"dropdown-header",titleRowClass:"dropdown-header-title",labelClass:"dropdown-header-label",closeClass:"dropdown-header-close",html:e=>'<div class="'+e.headerClass+'"><div class="'+e.titleRowClass+'"><span class="'+e.labelClass+'">'+e.title+'</span><a class="'+e.closeClass+'">&times;</a></div></div>'},e)
+t.on("initialize",(()=>{var e=j(i.html(i)),s=e.querySelector("."+i.closeClass)
+s&&s.addEventListener("click",(e=>{ie(e,!0),t.close()})),t.dropdown.insertBefore(e,t.dropdown.firstChild)}))})),de.define("caret_position",(function(){var e=this
+e.hook("instead","setCaret",(t=>{"single"!==e.settings.mode&&e.control.contains(e.control_input)?(t=Math.max(0,Math.min(e.items.length,t)))==e.caretPos||e.isPending||e.controlChildren().forEach(((i,s)=>{s<t?e.control_input.insertAdjacentElement("beforebegin",i):e.control.appendChild(i)})):t=e.items.length,e.caretPos=t})),e.hook("instead","moveCaret",(t=>{if(!e.isFocused)return
+const i=e.getLastActive(t)
+if(i){const s=K(i)
+e.setCaret(t>0?s+1:s),e.setActiveItem(),R(i,"last-active")}else e.setCaret(e.caretPos+t)}))})),de.define("dropdown_input",(function(){const e=this
+e.settings.shouldOpen=!0,e.hook("before","setup",(()=>{e.focus_node=e.control,D(e.control_input,"dropdown-input")
+const t=j('<div class="dropdown-input-wrap">')
+t.append(e.control_input),e.dropdown.insertBefore(t,e.dropdown.firstChild)
+const i=j('<input class="items-placeholder" tabindex="-1" />')
+i.placeholder=e.settings.placeholder||"",e.control.append(i)})),e.on("initialize",(()=>{e.control_input.addEventListener("keydown",(t=>{switch(t.keyCode){case 27:return e.isOpen&&(ie(t,!0),e.close()),void e.clearActiveItems()
+case 9:e.focus_node.tabIndex=-1}return e.onKeyDown.call(e,t)})),e.on("blur",(()=>{e.focus_node.tabIndex=e.isDisabled?-1:e.tabIndex})),e.on("dropdown_open",(()=>{e.control_input.focus()}))
+const t=e.onBlur
+e.hook("instead","onBlur",(i=>{if(!i||i.relatedTarget!=e.control_input)return t.call(e)})),se(e.control_input,"blur",(()=>e.onBlur())),e.hook("before","close",(()=>{e.isOpen&&e.focus_node.focus({preventScroll:!0})}))}))})),de.define("input_autogrow",(function(){var e=this
+e.on("initialize",(()=>{var t=document.createElement("span"),i=e.control_input
+t.style.cssText="position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ",e.wrapper.appendChild(t)
+for(const e of["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"])t.style[e]=i.style[e]
+var s=()=>{t.textContent=i.value,i.style.width=t.clientWidth+"px"}
+s(),e.on("update item_add item_remove",s),se(i,"input",s),se(i,"keyup",s),se(i,"blur",s),se(i,"update",s)}))})),de.define("no_backspace_delete",(function(){var e=this,t=e.deleteSelection
+this.hook("instead","deleteSelection",(i=>!!e.activeItems.length&&t.call(e,i)))})),de.define("no_active_items",(function(){this.hook("instead","setActiveItem",(()=>{})),this.hook("instead","selectAll",(()=>{}))})),de.define("optgroup_columns",(function(){var e=this,t=e.onKeyDown
+e.hook("instead","onKeyDown",(i=>{var s,n,o,r
+if(!e.isOpen||37!==i.keyCode&&39!==i.keyCode)return t.call(e,i)
+e.ignoreHover=!0,r=z(e.activeOption,"[data-group]"),s=K(e.activeOption,"[data-selectable]"),r&&(r=37===i.keyCode?r.previousSibling:r.nextSibling)&&(n=(o=r.querySelectorAll("[data-selectable]"))[Math.min(o.length-1,s)])&&e.setActiveOption(n)}))})),de.define("remove_button",(function(e){const t=Object.assign({label:"&times;",title:"Remove",className:"remove",append:!0},e)
+var i=this
+if(t.append){var s='<a href="javascript:void(0)" class="'+t.className+'" tabindex="-1" title="'+Z(t.title)+'">'+t.label+"</a>"
+i.hook("after","setupTemplates",(()=>{var e=i.settings.render.item
+i.settings.render.item=(t,n)=>{var o=j(e.call(i,t,n)),r=j(s)
+return o.appendChild(r),se(r,"mousedown",(e=>{ie(e,!0)})),se(r,"click",(e=>{i.isLocked||(ie(e,!0),i.isLocked||i.shouldDelete([o],e)&&(i.removeItem(o),i.refreshOptions(!1),i.inputState()))})),o}}))}})),de.define("restore_on_backspace",(function(e){const t=this,i=Object.assign({text:e=>e[t.settings.labelField]},e)
+t.on("item_remove",(function(e){if(t.isFocused&&""===t.control_input.value.trim()){var s=t.options[e]
+s&&t.setTextboxValue(i.text.call(t,s))}}))})),de.define("virtual_scroll",(function(){const e=this,t=e.canLoad,i=e.clearActiveOption,s=e.loadCallback
+var n,o,r={},l=!1,a=[]
+if(e.settings.shouldLoadMore||(e.settings.shouldLoadMore=()=>{if(n.clientHeight/(n.scrollHeight-n.scrollTop)>.9)return!0
+if(e.activeOption){var t=e.selectable()
+if(Array.from(t).indexOf(e.activeOption)>=t.length-2)return!0}return!1}),!e.settings.firstUrl)throw"virtual_scroll plugin requires a firstUrl() method"
+e.settings.sortField=[{field:"$order"},{field:"$score"}]
+const c=t=>!("number"==typeof e.settings.maxOptions&&n.children.length>=e.settings.maxOptions)&&!(!(t in r)||!r[t]),d=(t,i)=>e.items.indexOf(i)>=0||a.indexOf(i)>=0
+e.setNextUrl=(e,t)=>{r[e]=t},e.getUrl=t=>{if(t in r){const e=r[t]
+return r[t]=!1,e}return e.clearPagination(),e.settings.firstUrl.call(e,t)},e.clearPagination=()=>{r={}},e.hook("instead","clearActiveOption",(()=>{if(!l)return i.call(e)})),e.hook("instead","canLoad",(i=>i in r?c(i):t.call(e,i))),e.hook("instead","loadCallback",((t,i)=>{if(l){if(o){const i=t[0]
+void 0!==i&&(o.dataset.value=i[e.settings.valueField])}}else e.clearOptions(d)
+s.call(e,t,i),l=!1})),e.hook("after","refreshOptions",(()=>{const t=e.lastValue
+var i
+c(t)?(i=e.render("loading_more",{query:t}))&&(i.setAttribute("data-selectable",""),o=i):t in r&&!n.querySelector(".no-results")&&(i=e.render("no_more_results",{query:t})),i&&(D(i,e.settings.optionClass),n.append(i))})),e.on("initialize",(()=>{a=Object.keys(e.options),n=e.dropdown_content,e.settings.render=Object.assign({},{loading_more:()=>'<div class="loading-more-results">Loading more results ... </div>',no_more_results:()=>'<div class="no-more-results">No more results</div>'},e.settings.render),n.addEventListener("scroll",(()=>{e.settings.shouldLoadMore.call(e)&&c(e.lastValue)&&(l||(l=!0,e.load.call(e,e.lastValue)))}))}))})),de}))
+var tomSelect=function(e,t){return new TomSelect(e,t)}
+//# sourceMappingURL=tom-select.complete.min.js.map
+
+export default window.TomSelect;