diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..8024bd9
Binary files /dev/null and b/.DS_Store differ
diff --git a/package-lock.json b/package-lock.json
index 414c5cd..8e5b83e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,14 @@
       "name": "tailwindcss4",
       "version": "0.0.0",
       "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
         "@tailwindcss/vite": "^4.0.6",
         "axios": "^1.7.9",
         "framer-motion": "^12.4.1",
         "prettier": "^3.4.2",
         "react": "^18.3.1",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.4.0",
         "react-router-dom": "^7.1.5",
@@ -255,6 +258,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.26.8",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.8.tgz",
@@ -310,12 +324,13 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
-      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
+      "integrity": "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==",
       "cpu": [
         "ppc64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "aix"
@@ -325,12 +340,13 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
-      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.1.tgz",
+      "integrity": "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -340,12 +356,13 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
-      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz",
+      "integrity": "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -355,12 +372,13 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
-      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.1.tgz",
+      "integrity": "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -370,12 +388,13 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
-      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz",
+      "integrity": "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -385,12 +404,13 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
-      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz",
+      "integrity": "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -400,12 +420,13 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -415,12 +436,13 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
-      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz",
+      "integrity": "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -430,12 +452,13 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
-      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz",
+      "integrity": "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -445,12 +468,13 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
-      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz",
+      "integrity": "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -460,12 +484,13 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
-      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz",
+      "integrity": "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -475,12 +500,13 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
-      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz",
+      "integrity": "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==",
       "cpu": [
         "loong64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -490,12 +516,13 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
-      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz",
+      "integrity": "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==",
       "cpu": [
         "mips64el"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -505,12 +532,13 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
-      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz",
+      "integrity": "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==",
       "cpu": [
         "ppc64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -520,12 +548,13 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
-      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz",
+      "integrity": "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==",
       "cpu": [
         "riscv64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -535,12 +564,13 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
-      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz",
+      "integrity": "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==",
       "cpu": [
         "s390x"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -550,12 +580,13 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
-      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz",
+      "integrity": "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -565,12 +596,13 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -580,12 +612,13 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
-      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz",
+      "integrity": "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -595,12 +628,13 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -610,12 +644,13 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
-      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz",
+      "integrity": "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -625,12 +660,13 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
-      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz",
+      "integrity": "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
@@ -640,12 +676,13 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
-      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz",
+      "integrity": "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -655,12 +692,13 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
-      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz",
+      "integrity": "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -670,12 +708,13 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
-      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz",
+      "integrity": "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -827,6 +866,52 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -971,6 +1056,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.6.tgz",
@@ -1476,13 +1576,13 @@
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1497,6 +1597,12 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.24.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.0.tgz",
@@ -1788,9 +1894,10 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.2.tgz",
+      "integrity": "sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -1977,11 +2084,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/debug": {
       "version": "4.4.0",
@@ -2025,6 +2141,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2098,10 +2224,11 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
-      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
+      "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
       "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -2109,31 +2236,31 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.24.2",
-        "@esbuild/android-arm": "0.24.2",
-        "@esbuild/android-arm64": "0.24.2",
-        "@esbuild/android-x64": "0.24.2",
-        "@esbuild/darwin-arm64": "0.24.2",
-        "@esbuild/darwin-x64": "0.24.2",
-        "@esbuild/freebsd-arm64": "0.24.2",
-        "@esbuild/freebsd-x64": "0.24.2",
-        "@esbuild/linux-arm": "0.24.2",
-        "@esbuild/linux-arm64": "0.24.2",
-        "@esbuild/linux-ia32": "0.24.2",
-        "@esbuild/linux-loong64": "0.24.2",
-        "@esbuild/linux-mips64el": "0.24.2",
-        "@esbuild/linux-ppc64": "0.24.2",
-        "@esbuild/linux-riscv64": "0.24.2",
-        "@esbuild/linux-s390x": "0.24.2",
-        "@esbuild/linux-x64": "0.24.2",
-        "@esbuild/netbsd-arm64": "0.24.2",
-        "@esbuild/netbsd-x64": "0.24.2",
-        "@esbuild/openbsd-arm64": "0.24.2",
-        "@esbuild/openbsd-x64": "0.24.2",
-        "@esbuild/sunos-x64": "0.24.2",
-        "@esbuild/win32-arm64": "0.24.2",
-        "@esbuild/win32-ia32": "0.24.2",
-        "@esbuild/win32-x64": "0.24.2"
+        "@esbuild/aix-ppc64": "0.25.1",
+        "@esbuild/android-arm": "0.25.1",
+        "@esbuild/android-arm64": "0.25.1",
+        "@esbuild/android-x64": "0.25.1",
+        "@esbuild/darwin-arm64": "0.25.1",
+        "@esbuild/darwin-x64": "0.25.1",
+        "@esbuild/freebsd-arm64": "0.25.1",
+        "@esbuild/freebsd-x64": "0.25.1",
+        "@esbuild/linux-arm": "0.25.1",
+        "@esbuild/linux-arm64": "0.25.1",
+        "@esbuild/linux-ia32": "0.25.1",
+        "@esbuild/linux-loong64": "0.25.1",
+        "@esbuild/linux-mips64el": "0.25.1",
+        "@esbuild/linux-ppc64": "0.25.1",
+        "@esbuild/linux-riscv64": "0.25.1",
+        "@esbuild/linux-s390x": "0.25.1",
+        "@esbuild/linux-x64": "0.25.1",
+        "@esbuild/netbsd-arm64": "0.25.1",
+        "@esbuild/netbsd-x64": "0.25.1",
+        "@esbuild/openbsd-arm64": "0.25.1",
+        "@esbuild/openbsd-x64": "0.25.1",
+        "@esbuild/sunos-x64": "0.25.1",
+        "@esbuild/win32-arm64": "0.25.1",
+        "@esbuild/win32-ia32": "0.25.1",
+        "@esbuild/win32-x64": "0.25.1"
       }
     },
     "node_modules/escalade": {
@@ -2327,8 +2454,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.3",
@@ -2653,6 +2779,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3151,15 +3285,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.9.tgz",
+      "integrity": "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3274,9 +3409,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.2",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz",
-      "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -3291,6 +3426,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -3357,6 +3493,12 @@
         }
       ]
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -3368,6 +3510,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -3388,6 +3567,11 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -3435,6 +3619,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3561,6 +3758,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3602,6 +3800,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3722,13 +3926,23 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz",
-      "integrity": "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.1.tgz",
+      "integrity": "sha512-n2GnqDb6XPhlt9B8olZPrgMD/es/Nd1RdChF6CBD/fHW6pUyUTt2sQW2fPRX5GiD9XEa6+8A6A4f2vT6pSsE7Q==",
+      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.24.2",
-        "postcss": "^8.5.1",
+        "esbuild": "^0.25.0",
+        "postcss": "^8.5.3",
         "rollup": "^4.30.1"
       },
       "bin": {
diff --git a/package.json b/package.json
index 890b721..1a8712b 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,14 @@
     "prettier:write": "prettier --write ."
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "@tailwindcss/vite": "^4.0.6",
     "axios": "^1.7.9",
     "framer-motion": "^12.4.1",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.5",
diff --git a/src/App.tsx b/src/App.tsx
index ceb4d25..5bd63e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,105 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Catalog from "./pages/Catalog";
 import Planner from "./pages/Planner";
 import DepartmentFilters from "./components/Department-Filters.tsx";
 import Toolbox from "./components/Toolbox/Toolbox";
+import { CourseEntry, CourseType } from "./types/interfaces/Course.interface.ts";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import { Filters } from "./types/Filters";
 
 function App() {
-  const [toolboxCourses, setToolboxCourses] = useState({});
+  // Original state from App.tsx
+  const [toolboxCourses, setToolboxCourses] = useState<CourseEntry[]>([]);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  
+  // Moved from Catalog.tsx
+  const [searchResults, setSearchResults] = useState<CourseType[]>([]);
+  
+  // Moved from SearchBar.tsx
+  const [searchPrompt, setSearchPrompt] = useState("");
+  const [showFilter, setShowFilter] = useState(false);
+  const [filters, setFilters] = useState<Filters>({
+    Subject: [],
+    Attributes: [],
+    Semesters: []
+  });
+
+  const reorder = (
+    list: CourseEntry[],
+    startIndex: number,
+    endIndex: number
+  ) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+
+    return result;
+  };
+
+  const deleteCourse = (list: CourseEntry[], startIndex: number) => {
+    const result = Array.from(list);
+    result.splice(startIndex, 1);
+
+    return result;
+  };
+  
+  const onDragEnd = (result: DropResult) => {
+    setIsDragging(false);
+    const { source, destination } = result;
+    if (!destination) return;
+
+    const sInd = source.droppableId;
+    const dInd = destination.droppableId;
+
+    if (sInd === dInd && sInd === "toolbox") {
+      const items = reorder(toolboxCourses, source.index, destination.index);
+      setToolboxCourses(items);
+    } else if (dInd === "garbage") {
+      const items = deleteCourse(toolboxCourses, source.index);
+      setToolboxCourses(items);
+    }
+  };
+
+  const onDragStart = () => {
+    setIsDragging(true);
+  };
+  
   return (
     <>
-      <div className="font-['Helvetica'] bg-carpipink min-h-screen">
-        <Router>
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <Catalog
-                  toolboxCourses={toolboxCourses}
-                  setToolboxCourses={setToolboxCourses}
-                />
-              }
-            ></Route>
-            <Route path="/filters" element={<DepartmentFilters />} />
-            <Route path="/planner" element={<Planner />}></Route>
-          </Routes>
-          <Toolbox courses={toolboxCourses} />
-        </Router>
+      <div className={`font-['Helvetica']  min-h-screen`}>
+        <div
+          className={`fixed top-0 left-0 w-full h-full z-0 bg-carpipink ${isDragging ? "brightness-50" : ""}`}
+        ></div>
+        <div className={`relative z-10`}>
+          <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
+            <Router>
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <Catalog
+                      isDragging={isDragging}
+                      toolboxCourses={toolboxCourses}
+                      setToolboxCourses={setToolboxCourses}
+                      searchResults={searchResults}
+                      setSearchResults={setSearchResults}
+                      searchPrompt={searchPrompt}
+                      setSearchPrompt={setSearchPrompt}
+                      showFilter={showFilter}
+                      setShowFilter={setShowFilter}
+                      filters={filters}
+                      setFilters={setFilters}
+                    />
+                  }
+                ></Route>
+                <Route path="/filters" element={<DepartmentFilters />} />
+                <Route path="/planner" element={<Planner />}></Route>
+              </Routes>
+              <Toolbox courses={toolboxCourses} isDragging={isDragging} />
+            </Router>
+          </DragDropContext>
+        </div>
       </div>
     </>
   );
diff --git a/src/components/Course/Course.tsx b/src/components/Course/Course.tsx
index a4a2051..2fa9b57 100644
--- a/src/components/Course/Course.tsx
+++ b/src/components/Course/Course.tsx
@@ -2,14 +2,15 @@ import React, { useState } from "react";
 import Tag from "./Tag";
 import AddButton from "./AddButton";
 import { motion } from "framer-motion";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import {
+  CourseType,
+  CourseEntry,
+} from "../../types/interfaces/Course.interface";
 
 interface CourseProps {
   course: CourseType;
-  toolboxCourses: { [key: string]: number };
-  setToolboxCourses: React.Dispatch<
-    React.SetStateAction<{ [key: string]: number }>
-  >;
+  toolboxCourses: CourseEntry[];
+  setToolboxCourses: React.Dispatch<React.SetStateAction<CourseEntry[]>>;
 }
 
 const Course: React.FC<CourseProps> = ({
@@ -29,18 +30,32 @@ const Course: React.FC<CourseProps> = ({
       .split(" ")
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
       .join(" ");
-  }
+  };
 
-  const courseDisplay = `${course.dept + course.code_num} ${toTitleCase(course.title)}`;
+  const courseDisplay: string = `${course.dept + course.code_num} ${toTitleCase(course.title)}`;
   const addCourse = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    setToolboxCourses((prevCourses) => ({
-      ...prevCourses,
-      [courseDisplay]: (prevCourses[courseDisplay] || 0) + 1,
-    }));
-  };
 
-  const courseCount = toolboxCourses[courseDisplay];
+    setToolboxCourses((prevCourses) => {
+      const existingIndex = prevCourses.findIndex(
+        (c) => c.name === courseDisplay
+      );
+
+      if (existingIndex !== -1) {
+        return prevCourses.map((c, i) =>
+          i === existingIndex ? { ...c, count: c.count + 1 } : c
+        );
+      } else {
+        return [
+          ...prevCourses,
+          { name: courseDisplay, count: 1, data: course },
+        ];
+      }
+    });
+  };
+  const toolboxCourse =
+    toolboxCourses[toolboxCourses.findIndex((c) => c.name === courseDisplay)];
+  const courseCount = toolboxCourse ? toolboxCourse.count : undefined;
   return (
     <>
       <div
diff --git a/src/components/GarbageBin.tsx b/src/components/GarbageBin.tsx
new file mode 100644
index 0000000..a4229d4
--- /dev/null
+++ b/src/components/GarbageBin.tsx
@@ -0,0 +1,34 @@
+import { Droppable } from "@hello-pangea/dnd";
+import React from "react";
+import { MdDelete } from "react-icons/md";
+
+interface GarbageBinProps {
+  isDragging: boolean;
+}
+
+const GarbageBin: React.FC<GarbageBinProps> = ({ isDragging }) => {
+  return (
+    <Droppable droppableId={`garbage`}>
+      {(provided, snapshot) => {
+        return (
+          <div
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+            className={`absolute bottom-35 ${isDragging ? "" : "invisible"} w-fit`}
+          >
+            {provided.placeholder}
+            <div
+              className={` rounded-full border-2 m-4 p-4 border-red-600 text-5xl
+                transition-transform ease-in-out w-fit 
+                ${snapshot.isDraggingOver ? "bg-red-500 scale-115" : "bg-red-400"}`}
+            >
+              <MdDelete />
+            </div>
+          </div>
+        );
+      }}
+    </Droppable>
+  );
+};
+
+export default GarbageBin;
diff --git a/src/components/PlannerComponents/PlannerCourse.tsx b/src/components/PlannerComponents/PlannerCourse.tsx
index ae5aeb3..aa9cb06 100644
--- a/src/components/PlannerComponents/PlannerCourse.tsx
+++ b/src/components/PlannerComponents/PlannerCourse.tsx
@@ -38,60 +38,73 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
       .split(" ")
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
       .join(" ");
-  }
+  };
 
   return (
-    <div className={`bg-[#283044] w-3/4 h-18 rounded-lg text-[#F5CECE] flex items-center relative`}>
-      <div className={`flex justify-between w-11/12 m-auto text-2xl`}>
-        <div className={`flex items-center`}>
-          <MdDragIndicator />
-          <div className={`text-sm ml-1`}>
-            <b>
-              {course.dept}
-              {course.code_num}
-            </b>
-            <p>{toTitleCase(course.title)}</p>
+    <>
+      <div className="flex flex-row">
+        <div
+          className={`bg-[#283044] w-full h-18 rounded-lg text-[#F5CECE] flex items-center`}
+        >
+          <div className={`flex justify-between w-11/12 m-auto text-2xl`}>
+            <div className={`flex items-center`}>
+              <MdDragIndicator />
+              <div className={`text-sm ml-1`}>
+                <b>
+                  {course.dept}
+                  {course.code_num}
+                </b>
+                <p>{toTitleCase(course.title)}</p>
+              </div>
+            </div>
+            <div className={`flex items-center`}>
+              <div
+                className={`rounded-full bg-[#F5CECE] text-[#283044] w-5 h-5 flex items-center justify-center text-sm mr-1 font-medium`}
+              >
+                <p>{course.credit_max}</p>
+              </div>
+              <MdOutlineMoreHoriz />
+            </div>
+          </div>
+          <div className={`flex items-center`}>
+            <div
+              className={`rounded-full bg-[#F5CECE] text-[#283044] w-5 h-5 flex items-center justify-center text-sm mr-1 font-medium`}
+            >
+              <p>{course.credit_max}</p>
+            </div>
+            <MdOutlineMoreHoriz
+              onClick={togglePopup}
+              className="cursor-pointer"
+            />
           </div>
         </div>
-        <div className={`flex items-center`}>
+
+        {/* Popup Menu */}
+        {openPopup && (
           <div
-            className={`rounded-full bg-[#F5CECE] text-[#283044] w-5 h-5 flex items-center justify-center text-sm mr-1 font-medium`}
+            ref={componentRef}
+            className="absolute bg-[#F5CECE] rounded-xl border border-slate-500 text-[#283044] text-xs p-2 right-0 top-8 shadow-lg"
           >
-            <p>{course.credit_max}</p>
+            <div className="flex flex-col items-start space-y-1">
+              <button className="hover:bg-gray-300 p-1 w-full text-left">
+                Duplicate
+              </button>
+              <button className="hover:bg-gray-300 p-1 w-full text-left">
+                Move to next sem
+              </button>
+              <hr className="w-full border-gray-400" />
+              <button className="hover:bg-gray-300 p-1 w-full text-left">
+                Back to toolbox
+              </button>
+              <button className="hover:bg-red-300 p-1 w-full text-left">
+                Delete
+              </button>
+            </div>
           </div>
-          <MdOutlineMoreHoriz
-            onClick={togglePopup}
-            className="cursor-pointer"
-          />
-        </div>
+        )}
       </div>
-      
-
-      {/* Popup Menu */}
-      {openPopup && (
-        <div
-          ref={componentRef}
-          className="absolute bg-[#F5CECE] rounded-xl border border-slate-500 text-[#283044] text-xs p-2 right-0 top-8 shadow-lg"
-        >
-          <div className="flex flex-col items-start space-y-1">
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
-              Duplicate
-            </button>
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
-              Move to next sem
-            </button>
-            <hr className="w-full border-gray-400" />
-            <button className="hover:bg-gray-300 p-1 w-full text-left">
-              Back to toolbox
-            </button>
-            <button className="hover:bg-red-300 p-1 w-full text-left">
-              Delete
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
+    </>
   );
 };
 
-export default PlannerCourse;
\ No newline at end of file
+export default PlannerCourse;
diff --git a/src/components/PlannerComponents/SemesterBlock.tsx b/src/components/PlannerComponents/SemesterBlock.tsx
new file mode 100644
index 0000000..25ade92
--- /dev/null
+++ b/src/components/PlannerComponents/SemesterBlock.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import PlannerCourse, { CourseType } from "../PlannerComponents/PlannerCourse";
+import { SemesterType } from "../../types/interfaces/Semester.interface";
+
+interface SemesterBlockProps {
+  semester: SemesterType;
+}
+
+const SemesterBlock: React.FC<SemesterBlockProps> = ({ semester }) => {
+  return (
+
+    <>
+    <div className="flex mt-4">
+    <div className="flex mb-4">
+    <div className="flex  space-x-2">
+       <div className="flex flex-col items-center justify-start">
+         <span className="text-lg">SEM</span>
+         <span className="text-2xl font-bold ">{semester.semesterNumber}</span>
+       </div>
+
+      
+
+     </div>
+     
+     
+   </div>
+
+   <div className="w-full items-end flex flex-col mt-2 *:pl-6">
+     <div className="flex justify-between w-full mb-2 items-center"> 
+       <button className="border-1 border-black rounded-full px-3 py-0 h-fit font-medium text-sm ">
+         {semester.semesterSeason}
+       </button>
+
+
+       <div className="text-lg ">
+       <span className="font-bold">credits:</span> {semester.creditsTotal}
+       </div>
+     </div>
+    
+     <div className="flex flex-col space-y-2 w-full">
+       {semester.courseList.map((course) => (
+         <PlannerCourse key={course.id} course={course} />
+       ))}
+     </div>
+
+     <hr className = "border-[calc(0.05px)] border-[#c3a9a9] w-full mt-4 text-[#c3a9a9] "/>
+   </div></div>
+    </>
+      
+     
+  );
+};
+
+export default SemesterBlock;
diff --git a/src/components/SearchBar/SeachBar.tsx b/src/components/SearchBar/SeachBar.tsx
index c830eab..3da0234 100644
--- a/src/components/SearchBar/SeachBar.tsx
+++ b/src/components/SearchBar/SeachBar.tsx
@@ -1,23 +1,31 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import { IoClose, IoSearchOutline } from "react-icons/io5";
 import api from "../../axios";
 import FilterPanel from "./FilterPanel";
 import ChosenTag from "./ChosenTag";
 import { Filters } from "../../types/Filters";
+import { CourseType } from "../../types/interfaces/Course.interface.ts";
 
 interface SearchBarProps {
-  updateSearchResults: (results: any) => void;
+  updateSearchResults: (results: CourseType[]) => void;
+  // New props for state lifted to App.tsx
+  searchPrompt: string;
+  setSearchPrompt: React.Dispatch<React.SetStateAction<string>>;
+  showFilter: boolean;
+  setShowFilter: React.Dispatch<React.SetStateAction<boolean>>;
+  filters: Filters;
+  setFilters: React.Dispatch<React.SetStateAction<Filters>>;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ updateSearchResults }) => {
-  const [searchPrompt, setSearchPrompt] = useState("");
-  const [showFilter, setShowFilter] = useState(false);
-  const [filters, setFilters] = useState<Filters>({
-    Subject: [],
-    Attributes: [],
-    Semesters: []
-  })
-
+const SearchBar: React.FC<SearchBarProps> = ({ 
+  updateSearchResults,
+  searchPrompt,
+  setSearchPrompt,
+  showFilter,
+  setShowFilter,
+  filters,
+  setFilters
+}) => {
   useEffect(() => {
     const deptFilters = filters.Subject.join(",");
     const attrFilters = filters.Attributes.join(",");
@@ -25,13 +33,13 @@ const SearchBar: React.FC<SearchBarProps> = ({ updateSearchResults }) => {
 
     const search = async() => {
       const response = await api.get("course/search?searchPrompt=" + searchPrompt + "&deptFilters=" + deptFilters + "&attrFilters=" + attrFilters + "&semFilters=" + semFilters);
-      const data = response.data;
+      const data = response.data as CourseType[];
       console.log(data);
       updateSearchResults(data);
     }
 
     search();
-  }, [filters, searchPrompt])
+  }, [filters, searchPrompt, updateSearchResults]);
 
   const handleSearch = (e: React.KeyboardEvent) => {
     (e.currentTarget as HTMLInputElement).blur();
diff --git a/src/components/Toolbox/NavButton.tsx b/src/components/Toolbox/NavButton.tsx
index 193b22d..2beda65 100644
--- a/src/components/Toolbox/NavButton.tsx
+++ b/src/components/Toolbox/NavButton.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Link, useLocation } from "react-router-dom";
 
 const NavButton = () => {
diff --git a/src/components/Toolbox/Toolbox.tsx b/src/components/Toolbox/Toolbox.tsx
index 0d64468..fd35239 100644
--- a/src/components/Toolbox/Toolbox.tsx
+++ b/src/components/Toolbox/Toolbox.tsx
@@ -2,14 +2,17 @@ import React, { useState } from "react";
 import ToolboxButton from "./ToolboxButton";
 import NavButton from "./NavButton";
 import ToolboxCourse from "./ToolboxCourse";
-
+import { Droppable } from "@hello-pangea/dnd";
 import { IoIosArrowDown } from "react-icons/io";
+import { CourseEntry } from "../../types/interfaces/Course.interface";
+import GarbageBin from "../GarbageBin";
 
 interface ToolboxProps {
-  courses: { [key: string]: number };
+  courses: CourseEntry[];
+  isDragging: boolean;
 }
 
-const Toolbox: React.FC<ToolboxProps> = ({ courses }) => {
+const Toolbox: React.FC<ToolboxProps> = ({ courses, isDragging }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleToolbox = () => {
@@ -18,17 +21,18 @@ const Toolbox: React.FC<ToolboxProps> = ({ courses }) => {
 
   const toolboxSum = () => {
     let sum = 0;
-    Object.values(courses).forEach((value) => (sum += value));
+    courses.forEach((course) => (sum += course.count));
     return sum;
   };
   return (
     <>
-      <div className={`fixed bottom-0 w-screen`}>
+      <div className={`transition-all fixed bottom-0 w-screen z-100`}>
         <ToolboxButton
           isOpen={isOpen}
           toggleToolbox={toggleToolbox}
           count={toolboxSum()}
         />
+        <GarbageBin isDragging={isDragging} />
         <div className={`flex justify-center`}>
           <div
             className={`${isOpen ? "" : "hidden"} bg-[#283044] h-36 w-screen rounded-t-xl`}
@@ -42,14 +46,31 @@ const Toolbox: React.FC<ToolboxProps> = ({ courses }) => {
                 <IoIosArrowDown className={`mx-2`} />
               </button>
             </div>
-            <div
-              className={`courses h-13 flex items-center px-2 w-screen overflow-x-auto whitespace-nowrap scrollbar-hide`}
-            >
-              {Object.entries(courses).map(([key, value]) => (
-                <ToolboxCourse key={key} name={key} count={value} />
-              ))}
-            </div>
+
+            <Droppable droppableId={`toolbox`} direction="horizontal">
+              {(provided, snapshot) => {
+                return (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}
+                    className={`courses h-15 flex items-center px-2 w-screen overflow-x-auto whitespace-nowrap scrollbar-hide ${snapshot.isDraggingOver ? "bg-[#7e8eb4]" : ""}`}
+                  >
+                    {courses.map((course, index) => (
+                      <ToolboxCourse
+                        key={course.name}
+                        name={course.name}
+                        count={course.count}
+                        index={index}
+                        isDragging={isDragging}
+                      />
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                );
+              }}
+            </Droppable>
           </div>
+
           <NavButton />
         </div>
       </div>
diff --git a/src/components/Toolbox/ToolboxCourse.tsx b/src/components/Toolbox/ToolboxCourse.tsx
index e010df5..d97e4f3 100644
--- a/src/components/Toolbox/ToolboxCourse.tsx
+++ b/src/components/Toolbox/ToolboxCourse.tsx
@@ -1,25 +1,50 @@
 import React from "react";
+import { Draggable } from "@hello-pangea/dnd";
+// import type {
+//   DraggableProvided,
+//   DraggableStateSnapshot,
+// } from "@hello-pangea/dnd";
 
 interface ToolboxCourseProps {
   name: string;
   count: number;
+  index: number;
+  isDragging: boolean;
+  // provided: DraggableProvided;
+  // snapshot: DraggableStateSnapshot;
 }
 
-const ToolboxCourse: React.FC<ToolboxCourseProps> = ({ name, count }) => {
+const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
+  name,
+  count,
+  index,
+  isDragging,
+}) => {
+  const courseId = name.slice(0, 8);
   return (
     <>
-      <div
-        className={`bg-[#D9D9D9] w-fit px-3 rounded-lg py-1 relative mx-2 whitespace-nowrap overflow-visible`}
-      >
-        <div
-          className={`${
-            count === 1 ? "hidden" : ""
-          } absolute -top-2 -right-2  rounded-full bg-[#78A1BB] w-6 h-6 flex justify-center items-center text-white text-sm`}
-        >
-          <p>{count}</p>
-        </div>
-        {name}
-      </div>
+      <Draggable key={courseId} draggableId={courseId} index={index}>
+        {(provided, snapshot) => {
+          return (
+            <div
+              ref={provided.innerRef}
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+              className={`bg-[#D9D9D9] w-fit px-3 rounded-lg py-1 relative mx-2 whitespace-nowrap overflow-visible transition-transform ease-in-out z-200 
+                ${isDragging ? (snapshot.isDragging ? "brightness-125 scale-105 shadow-sm shadow-carpipink" : "brightness-50") : ""}`}
+            >
+              <div
+                className={`${
+                  count === 1 ? "hidden" : ""
+                } absolute -top-2 -right-2  rounded-full bg-[#78A1BB] w-6 h-6 flex justify-center items-center text-white text-sm`}
+              >
+                <p>{count}</p>
+              </div>
+              {name}
+            </div>
+          );
+        }}
+      </Draggable>
     </>
   );
 };
diff --git a/src/pages/Catalog.tsx b/src/pages/Catalog.tsx
index 60a5ea9..a45d58b 100644
--- a/src/pages/Catalog.tsx
+++ b/src/pages/Catalog.tsx
@@ -1,26 +1,72 @@
-import React, { useState } from "react";
+import React from "react";
 import Course from "../components/Course/Course";
 import SearchBar from "../components/SearchBar/SeachBar";
+import {
+  CourseType,
+  CourseEntry,
+} from "../types/interfaces/Course.interface.ts";
+import { Filters } from "../types/Filters";
 
 interface CatalogProps {
-  toolboxCourses: { [key: string]: number };
-  setToolboxCourses: React.Dispatch<React.SetStateAction<{ [key: string]: number }>>;
+  toolboxCourses: CourseEntry[];
+  setToolboxCourses: React.Dispatch<React.SetStateAction<CourseEntry[]>>;
+  isDragging: boolean;
+  // New props added from the moved state
+  searchResults: CourseType[];
+  setSearchResults: React.Dispatch<React.SetStateAction<CourseType[]>>;
+  searchPrompt: string;
+  setSearchPrompt: React.Dispatch<React.SetStateAction<string>>;
+  showFilter: boolean;
+  setShowFilter: React.Dispatch<React.SetStateAction<boolean>>;
+  filters: Filters;
+  setFilters: React.Dispatch<React.SetStateAction<Filters>>;
 }
 
-const Catalog: React.FC<CatalogProps> = ({ toolboxCourses, setToolboxCourses }) => {
-  const [searchResults, updateSearchResults] = useState([]);
-
+const Catalog: React.FC<CatalogProps> = ({
+  toolboxCourses,
+  setToolboxCourses,
+  isDragging,
+  searchResults,
+  setSearchResults,
+  searchPrompt,
+  setSearchPrompt,
+  showFilter,
+  setShowFilter,
+  filters,
+  setFilters,
+}) => {
   return (
     <>
-      <img src="/carpi-black.png" alt="Carpi Logo" className="w-1/4 m-auto mt-5"/>
-      <SearchBar updateSearchResults={updateSearchResults}/>
-      <div className="flex flex-wrap justify-center pb-38">
-        {searchResults?.map((course: any, index: number) => (
-          <Course key={index} course={course} toolboxCourses={toolboxCourses} setToolboxCourses={setToolboxCourses} />
+      <img
+        src="/carpi-black.png"
+        alt="Carpi Logo"
+        className="w-1/4 m-auto pt-5"
+      />
+      <div className={`${isDragging ? "brightness-50" : ""}`}>
+        <SearchBar 
+          updateSearchResults={setSearchResults}
+          searchPrompt={searchPrompt}
+          setSearchPrompt={setSearchPrompt}
+          showFilter={showFilter}
+          setShowFilter={setShowFilter}
+          filters={filters}
+          setFilters={setFilters}
+        />
+      </div>
+      <div
+        className={`flex flex-wrap justify-center pb-38 z-0 relative ${isDragging ? "brightness-50" : ""}`}
+      >
+        {searchResults?.map((course: CourseType, index: number) => (
+          <Course
+            key={index}
+            course={course}
+            toolboxCourses={toolboxCourses}
+            setToolboxCourses={setToolboxCourses}
+          />
         ))}
       </div>
     </>
   );
 };
 
-export default Catalog;
+export default Catalog;
\ No newline at end of file
diff --git a/src/pages/Planner.tsx b/src/pages/Planner.tsx
index 6cbbf4a..8ca1704 100644
--- a/src/pages/Planner.tsx
+++ b/src/pages/Planner.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import PlannerCourse from "../components/PlannerComponents/PlannerCourse";
+import SemesterBlock from "../components/PlannerComponents/SemesterBlock";
 
 function Planner() {
   const exampleCourse = {
@@ -18,11 +19,31 @@ function Planner() {
     title_acronym: 0,
     title_abbrev: 1
   };
+
+
+
+  const exampleSemester = {
+    semesterNumber: 1,
+    semesterSeason: "FALL",
+    creditsTotal: 16,
+    courseList: [exampleCourse,exampleCourse,exampleCourse,exampleCourse]
+  };
+ 
+
+
   return (
     <>
-      <PlannerCourse course={exampleCourse} />
+    <div className="bg-[#F5CECE] p-4 flex min-h-screen h-fit flex-col"><SemesterBlock semester = {exampleSemester} /> <SemesterBlock semester = {exampleSemester}/> <SemesterBlock semester = {exampleSemester} /> </div>
+      
     </>
+
+    
   );
+
 }
 
 export default Planner;
+
+
+
+
diff --git a/src/types/interfaces/Course.interface.ts b/src/types/interfaces/Course.interface.ts
index a1b287c..999b245 100644
--- a/src/types/interfaces/Course.interface.ts
+++ b/src/types/interfaces/Course.interface.ts
@@ -14,3 +14,9 @@ export interface CourseType {
   title_match: number;
   title_start_match: number;
 }
+
+export type CourseEntry = {
+  name: string;
+  count: number;
+  data: CourseType;
+};
diff --git a/src/types/interfaces/Semester.interface.ts b/src/types/interfaces/Semester.interface.ts
new file mode 100644
index 0000000..74bde14
--- /dev/null
+++ b/src/types/interfaces/Semester.interface.ts
@@ -0,0 +1,10 @@
+import {CourseType} from "../../components/PlannerComponents/PlannerCourse";
+
+export interface SemesterType {
+    semesterNumber: number;
+    semesterSeason: string;
+    creditsTotal: number;
+    courseList: CourseType[];
+}
+  
+  
\ No newline at end of file