From 81c4190b0062053a1b1dda32fd6e1dfe2f569eb5 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 10 Mar 2025 13:26:53 +0100
Subject: [PATCH] feat: migrate tailwind to v4

---
 apps/web/app/auth/forgot/forgot.tsx           |   4 +-
 apps/web/app/auth/login/login.tsx             |   6 +-
 apps/web/app/auth/reset/reset.tsx             |   4 +-
 apps/web/app/auth/signup/InviteOnlySignUp.tsx |   6 +-
 apps/web/app/auth/signup/OpenSignup.tsx       |   6 +-
 .../(withmenu)/collections/new/page.tsx       |  12 +-
 .../activity/[activityid]/activity.tsx        |  16 +-
 .../(withmenu)/course/[courseuuid]/course.tsx |   2 +-
 .../Subs/AssignmentTaskGeneralEdit.tsx        |   4 +-
 .../Subs/TaskTypes/TaskFileObject.tsx         |  20 +-
 .../Subs/TaskTypes/TaskQuizObject.tsx         |   6 +-
 .../_components/TaskEditor/TaskEditor.tsx     |   4 +-
 .../assignments/[assignmentuuid]/page.tsx     |   6 +-
 .../subpages/AssignmentEditorSubPage.tsx      |   2 +-
 .../course/[courseuuid]/[subpage]/page.tsx    |   2 +-
 apps/web/app/orgs/[orgslug]/dash/page.tsx     |  34 +-
 .../dash/users/settings/[subpage]/page.tsx    |   2 +-
 apps/web/components.json                      |   3 +-
 .../EditCourseAccess/EditCourseAccess.tsx     |   2 +-
 .../EditCourseGeneral/EditCourseGeneral.tsx   |   4 +-
 .../EditCourseGeneral/LearningItemsList.tsx   |   6 +-
 .../EditCourseGeneral/ThumbnailUpdate.tsx     |   8 +-
 .../EditCourseGeneral/UnsplashImagePicker.tsx |   2 +-
 .../Buttons/NewActivityButton.tsx             |   6 +-
 .../DraggableElements/ActivityElement.tsx     |   8 +-
 .../DraggableElements/ChapterElement.tsx      |   4 +-
 .../EditCourseStructure.tsx                   |   2 +-
 .../Pages/Org/OrgEditImages/OrgEditImages.tsx |  32 +-
 .../Org/OrgEditLanding/OrgEditLanding.tsx     |  14 +-
 .../Payments/PaymentsConfigurationPage.tsx    |   4 +-
 .../Pages/Payments/PaymentsProductPage.tsx    |   6 +-
 .../SubComponents/CreateProductForm.tsx       |   2 +-
 .../SubComponents/LinkCourseModal.tsx         |   6 +-
 .../Pages/Users/OrgAccess/OrgAccess.tsx       |   2 +-
 .../Users/OrgUserGroups/OrgUserGroups.tsx     |   2 +-
 .../Pages/Users/OrgUsers/OrgUsers.tsx         |   2 +-
 .../Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx   |   2 +-
 .../web/components/Landings/LandingCustom.tsx |   8 +-
 .../Objects/Activities/AI/AIActivityAsk.tsx   |   8 +-
 .../Activities/Assignment/AssignmentBoxUI.tsx |  12 +-
 .../Assignment/AssignmentStudentActivity.tsx  |  10 +-
 .../Objects/Activities/Video/Video.tsx        |   4 +-
 .../CourseActions/CourseActionsMobile.tsx     |   2 +-
 .../CourseActions/CoursePaidOptions.tsx       |   2 +-
 .../Objects/Editor/AI/AIEditorToolkit.tsx     |   8 +-
 apps/web/components/Objects/Editor/Editor.tsx |   6 +-
 .../Extensions/Badges/BadgesExtension.tsx     |   2 +-
 .../Extensions/Buttons/ButtonsExtension.tsx   |   2 +-
 .../Callout/Info/InfoCalloutComponent.tsx     |   4 +-
 .../Warning/WarningCalloutComponent.tsx       |   4 +-
 .../EmbedObjects/EmbedObjectsComponent.tsx    |  12 +-
 .../Extensions/Image/ImageBlockComponent.tsx  |   4 +-
 .../Extensions/PDF/PDFBlockComponent.tsx      |   2 +-
 .../Extensions/Quiz/QuizBlockComponent.tsx    |  12 +-
 .../Extensions/Video/VideoBlockComponent.tsx  |   2 +-
 apps/web/components/Objects/Menus/OrgMenu.tsx |   4 +-
 .../Modals/Activities/Create/NewActivity.tsx  |   2 +-
 .../Modals/Course/Create/CreateCourse.tsx     |   6 +-
 .../Dash/EditCourseAccess/LinkToUserGroup.tsx |   2 +-
 .../Objects/Onboarding/Onboarding.tsx         |   4 +-
 .../components/Objects/Search/SearchBar.tsx   |   2 +-
 .../ConfirmationModal/ConfirmationModal.tsx   |   2 +-
 .../Objects/StyledElements/Error/Error.tsx    |   2 +-
 .../Objects/StyledElements/Form/TagInput.tsx  |   2 +-
 .../Objects/StyledElements/Info/Info.tsx      |   2 +-
 .../Wrappers/GeneralWrapper.tsx               |   2 +-
 .../Thumbnails/CourseThumbnailLanding.tsx     |   2 +-
 .../Pages/CourseEdit/Draggables/Activity.tsx  |   4 +-
 .../Pages/CourseEdit/Draggables/Chapter.tsx   |   8 +-
 .../Pages/Trail/TrailCourseElement.tsx        |   4 +-
 .../components/Security/HeaderProfileBox.tsx  |   2 +-
 apps/web/components/ui/badge.tsx              |   6 +-
 apps/web/components/ui/button.tsx             |  10 +-
 apps/web/components/ui/dialog.tsx             |   7 +-
 apps/web/components/ui/dropdown-menu.tsx      |   8 +-
 apps/web/components/ui/input.tsx              |   2 +-
 apps/web/components/ui/select.tsx             |   4 +-
 apps/web/components/ui/switch.tsx             |   2 +-
 apps/web/components/ui/table.tsx              |   2 +-
 apps/web/components/ui/tabs.tsx               |   4 +-
 apps/web/components/ui/textarea.tsx           |   2 +-
 apps/web/components/ui/toggle.tsx             |   4 +-
 apps/web/package.json                         |   4 +-
 apps/web/pnpm-lock.yaml                       | 498 ++++++++++--------
 apps/web/postcss.config.js                    |   3 +-
 apps/web/styles/globals.css                   | 270 ++++++----
 apps/web/tailwind.config.js                   | 160 +++---
 87 files changed, 773 insertions(+), 620 deletions(-)

diff --git a/apps/web/app/auth/forgot/forgot.tsx b/apps/web/app/auth/forgot/forgot.tsx
index c37af352..48d651a0 100644
--- a/apps/web/app/auth/forgot/forgot.tsx
+++ b/apps/web/app/auth/forgot/forgot.tsx
@@ -113,13 +113,13 @@ function ForgotPasswordClient() {
                     </p>
 
                     {error && (
-                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
                             <AlertTriangle size={18} />
                             <div className="font-bold text-sm">{error}</div>
                         </div>
                     )}
                     {message && (
-                        <div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                        <div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
                             <Info size={18} />
                             <div className="font-bold text-sm">{message}</div>
                         </div>
diff --git a/apps/web/app/auth/login/login.tsx b/apps/web/app/auth/login/login.tsx
index 24fec8ea..df428d71 100644
--- a/apps/web/app/auth/login/login.tsx
+++ b/apps/web/app/auth/login/login.tsx
@@ -132,7 +132,7 @@ const LoginClient = (props: LoginClientProps) => {
       <div className="left-login-part bg-white flex flex-row">
         <div className="login-form m-auto w-72">
           {error && (
-            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
               <AlertTriangle size={18} />
               <div className="font-bold text-sm">{error}</div>
             </div>
@@ -188,11 +188,11 @@ const LoginClient = (props: LoginClientProps) => {
           <div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5  mx-10'></div>
           <div className='flex justify-center py-5 mx-auto'>OR </div>
           <div className='flex flex-col space-y-4'>
-            <Link href={{ pathname: getUriWithoutOrg('/signup'), query: props.org.slug ? { orgslug: props.org.slug } : null }}  className="flex justify-center items-center py-3 text-md w-full bg-gray-800 text-gray-300 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
+            <Link href={{ pathname: getUriWithoutOrg('/signup'), query: props.org.slug ? { orgslug: props.org.slug } : null }}  className="flex justify-center items-center py-3 text-md w-full bg-gray-800 text-gray-300 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
               <UserRoundPlus size={17} />
               <span>Sign up</span>
             </Link>
-            <button onClick={() => signIn('google', { callbackUrl: '/redirect_from_auth' })} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
+            <button onClick={() => signIn('google', { callbackUrl: '/redirect_from_auth' })} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
               <img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
               <span>Sign in with Google</span>
             </button>
diff --git a/apps/web/app/auth/reset/reset.tsx b/apps/web/app/auth/reset/reset.tsx
index 7451d140..25f77280 100644
--- a/apps/web/app/auth/reset/reset.tsx
+++ b/apps/web/app/auth/reset/reset.tsx
@@ -133,14 +133,14 @@ function ResetPasswordClient() {
                     </p>
 
                     {error && (
-                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
                             <AlertTriangle size={18} />
                             <div className="font-bold text-sm">{error}</div>
                         </div>
                     )}
                     {message && (
                         <div className="flex flex-col gap-2">
-                            <div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                            <div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
                                 <Info size={18} />
                                 <div className="font-bold text-sm">{message}</div>
                             </div>
diff --git a/apps/web/app/auth/signup/InviteOnlySignUp.tsx b/apps/web/app/auth/signup/InviteOnlySignUp.tsx
index 41a21618..69e49653 100644
--- a/apps/web/app/auth/signup/InviteOnlySignUp.tsx
+++ b/apps/web/app/auth/signup/InviteOnlySignUp.tsx
@@ -98,13 +98,13 @@ function InviteOnlySignUpComponent(props: InviteOnlySignUpProps) {
   return (
     <div className="login-form m-auto w-72">
       {error && (
-        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
           <AlertTriangle size={18} />
           <div className="font-bold text-sm">{error}</div>
         </div>
       )}
       {message && (
-        <div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
+        <div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
           <div className="flex space-x-2">
             <Check size={18} />
             <div className="font-bold text-sm">{message}</div>
@@ -185,7 +185,7 @@ function InviteOnlySignUpComponent(props: InviteOnlySignUpProps) {
       </FormLayout>
       <div>
         <div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5 mb-5 mx-10'></div>
-        <button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
+        <button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
           <img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
           <span>Sign in with Google</span>
         </button>
diff --git a/apps/web/app/auth/signup/OpenSignup.tsx b/apps/web/app/auth/signup/OpenSignup.tsx
index 20fe9c91..ee44ed4e 100644
--- a/apps/web/app/auth/signup/OpenSignup.tsx
+++ b/apps/web/app/auth/signup/OpenSignup.tsx
@@ -94,13 +94,13 @@ function OpenSignUpComponent() {
   return (
     <div className="login-form m-auto w-72">
       {error && (
-        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
           <AlertTriangle size={18} />
           <div className="font-bold text-sm">{error}</div>
         </div>
       )}
       {message && (
-        <div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
+        <div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
           <div className="flex space-x-2">
             <Check size={18} />
             <div className="font-bold text-sm">{message}</div>
@@ -179,7 +179,7 @@ function OpenSignUpComponent() {
       </FormLayout>
       <div>
         <div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5 mb-5 mx-10'></div>
-        <button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
+        <button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
           <img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
           <span>Sign in with Google</span>
         </button>
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx
index 621ce2fa..817ee69e 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx
@@ -107,7 +107,7 @@ function NewCollection(params: any) {
                 placeholder="Enter collection name"
                 value={name}
                 onChange={handleNameChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                 maxLength={100}
               />
             </label>
@@ -116,7 +116,7 @@ function NewCollection(params: any) {
               <span className="text-sm font-medium text-gray-700">Visibility</span>
               <select
                 onChange={handleVisibilityChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                 defaultValue={isPublic}
               >
                 <option value="true">Public Collection - Visible to everyone</option>
@@ -131,7 +131,7 @@ function NewCollection(params: any) {
                 value={description}
                 onChange={handleDescriptionChange}
                 rows={4}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                 maxLength={500}
               />
             </label>
@@ -168,7 +168,7 @@ function NewCollection(params: any) {
                           }}
                           className="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500"
                         />
-                        <div className="relative w-24 h-16 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
+                        <div className="relative w-24 h-16 rounded-md overflow-hidden bg-gray-100 shrink-0">
                           {course.thumbnail_image ? (
                             <img
                               src={getCourseThumbnailMediaDirectory(org.org_uuid, course.course_uuid, course.thumbnail_image)}
@@ -204,14 +204,14 @@ function NewCollection(params: any) {
             <button
               type="button"
               onClick={() => router.back()}
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={isSubmitting}
-              className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+              className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
             >
               {isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
               <span>{isSubmitting ? 'Creating...' : 'Create Collection'}</span>
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index 42e59470..b3e2d077 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -171,7 +171,7 @@ function ActivityClient(props: ActivityClientProps) {
                 </div>
               </div>
               {activity && activity.published == false && (
-                <div className="p-7 drop-shadow-sm rounded-lg bg-gray-800">
+                <div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
                   <div className="text-white">
                     <h1 className="font-bold text-2xl">
                       This activity is not published yet
@@ -185,7 +185,7 @@ function ActivityClient(props: ActivityClientProps) {
                   {activity.content.paid_access == false ? (
                     <PaidCourseActivityDisclaimer course={course} />
                   ) : (
-                    <div className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}>
+                    <div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
                       {/* Activity Types */}
                       <div>
                         {activity.activity_type == 'TYPE_DYNAMIC' && (
@@ -519,7 +519,7 @@ function ActivityChapterDropdown(props: {
                           )?.steps?.find(
                             (step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
                           ) && (
-                            <span className="ml-2 text-gray-400 flex-shrink-0">
+                            <span className="ml-2 text-gray-400 shrink-0">
                               <Check size={14} />
                             </span>
                           )}
@@ -638,7 +638,7 @@ function ActivityNavigation(props: {
             disabled={!prevActivity}
             title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
           >
-            <ChevronLeft size={20} className="text-gray-800 flex-shrink-0" />
+            <ChevronLeft size={20} className="text-gray-800 shrink-0" />
             <div className="flex flex-col items-start">
               <span className="text-xs text-gray-500">Previous</span>
               <span className="text-sm capitalize font-semibold text-left">
@@ -663,7 +663,7 @@ function ActivityNavigation(props: {
                 {nextActivity ? nextActivity.name : 'No next activity'}
               </span>
             </div>
-            <ChevronRight size={20} className="text-gray-800 flex-shrink-0" />
+            <ChevronRight size={20} className="text-gray-800 shrink-0" />
           </button>
         </>
       ) : (
@@ -680,7 +680,7 @@ function ActivityNavigation(props: {
               disabled={!prevActivity}
               title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
             >
-              <ChevronLeft size={16} className="flex-shrink-0" />
+              <ChevronLeft size={16} className="shrink-0" />
               <div className="flex flex-col items-start">
                 <span className="text-xs text-gray-500">Previous</span>
                 <span className="text-sm capitalize font-semibold text-left">
@@ -711,7 +711,7 @@ function ActivityNavigation(props: {
                   {nextActivity ? nextActivity.name : 'No next activity'}
                 </span>
               </div>
-              <ChevronRight size={16} className="flex-shrink-0" />
+              <ChevronRight size={16} className="shrink-0" />
             </button>
           </div>
         </>
@@ -730,7 +730,7 @@ function ActivityNavigation(props: {
       {!isBottomNavVisible && (
         <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
           <div 
-            className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-sm animate-in fade-in slide-in-from-bottom duration-300"
+            className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
           >
             <NavigationButtons isFloating={true} />
           </div>
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index adec92ed..6bcba6dd 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -166,7 +166,7 @@ const CourseClient = (props: any) => {
                       <div key={chapter} className="">
                         <div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
                           <h3 className="grow mr-3 break-words">{chapter.name}</h3>
-                          <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
+                          <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0">
                             {chapter.activities.length} Activities
                           </p>
                         </div>
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
index f346e469..0680e2a7 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
@@ -209,12 +209,12 @@ function UpdateTaskRef() {
 
 
     return (
-        <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
+        <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow-sm">
             <div className="flex flex-col justify-center items-center h-full">
                 <div className="flex flex-col justify-center items-center">
                     <div className="flex flex-col justify-center items-center">
                         {error && (
-                            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-sm">
+                            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-xs">
                                 <div className="text-sm font-semibold">{error}</div>
                             </div>
                         )}
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskFileObject.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskFileObject.tsx
index 33bf798b..1d60652b 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskFileObject.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskFileObject.tsx
@@ -224,8 +224,8 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
                         <Link
                             href={getTaskFileSubmissionDir(org?.org_uuid, assignment.course_object.course_uuid, assignment.activity_object.activity_uuid, assignment.assignment_object.assignment_uuid, assignmentTaskUUID, userSubmissions.fileUUID)}
                             target='_blank'
-                            className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm hover:shadow-md transition-shadow border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mx-auto'>
-                            <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
+                            className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs hover:shadow-md transition-shadow border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mx-auto'>
+                            <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
                                 <Cloud size={14} />
                             </div>
 
@@ -241,19 +241,19 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
             )}
             {view === 'student' && (
                 <>
-                    <div className="w-full bg-white rounded-lg border border-gray-100 min-h-[200px] shadow-sm px-4 sm:px-6 py-5 sm:py-6">
+                    <div className="w-full bg-white rounded-lg border border-gray-100 min-h-[200px] shadow-xs px-4 sm:px-6 py-5 sm:py-6">
                         <div className="flex flex-col justify-center items-center h-full w-full">
                             <div className="flex flex-col justify-center items-center w-full max-w-full">
                                 <div className="flex flex-col justify-center items-center w-full">
                                     {error && (
-                                        <div className="flex justify-center bg-red-50 border border-red-100 rounded-md text-red-600 space-x-2 items-center p-3 transition-all shadow-sm w-full sm:w-auto mb-4">
+                                        <div className="flex justify-center bg-red-50 border border-red-100 rounded-md text-red-600 space-x-2 items-center p-3 transition-all shadow-xs w-full sm:w-auto mb-4">
                                             <div className="text-xs sm:text-sm font-medium">{error}</div>
                                         </div>
                                     )}
                                 </div>
                                 {localUploadFile && !isLoading && (
-                                    <div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
-                                        <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
+                                    <div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
+                                        <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
                                             <Cloud size={14} />
                                         </div>
 
@@ -268,8 +268,8 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
                                     </div>
                                 )}
                                 {userSubmissions.fileUUID && !isLoading && !localUploadFile && (
-                                    <div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
-                                        <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
+                                    <div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
+                                        <div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
                                             <Cloud size={14} />
                                         </div>
 
@@ -287,7 +287,7 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
                                 </div>
                                 {!access_token ? (
                                     <div className="flex justify-center items-center w-full mt-5">
-                                        <div className="flex justify-center bg-amber-50 border border-amber-100 rounded-md text-amber-600 space-x-2 items-center p-3 transition-all shadow-sm w-full sm:w-auto">
+                                        <div className="flex justify-center bg-amber-50 border border-amber-100 rounded-md text-amber-600 space-x-2 items-center p-3 transition-all shadow-xs w-full sm:w-auto">
                                             <Info size={15} className="text-amber-500" />
                                             <div className="text-xs sm:text-sm font-medium">Please sign in to upload files</div>
                                         </div>
@@ -314,7 +314,7 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
                                             onChange={handleFileChange}
                                         />
                                         <button
-                                            className="font-medium antialiased items-center text-white text-xs sm:text-sm rounded-md px-4 sm:px-5 py-2.5 flex bg-emerald-500 hover:bg-emerald-600 transition-colors shadow-sm"
+                                            className="font-medium antialiased items-center text-white text-xs sm:text-sm rounded-md px-4 sm:px-5 py-2.5 flex bg-emerald-500 hover:bg-emerald-600 transition-colors shadow-xs"
                                             onClick={() => document.getElementById("fileInput_" + assignmentTaskUUID)?.click()}
                                         >
                                             <UploadCloud size={15} className="mr-2" />
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskQuizObject.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskQuizObject.tsx
index 7c4849ee..ea901cb0 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskQuizObject.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskQuizObject.tsx
@@ -346,7 +346,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
                                     <div className="flex" key={oIndex}>
                                         <div
                                             onClick={() => view === 'student' && chooseOption(qIndex, oIndex)}
-                                            className={"answer outline outline-3 outline-white pr-2 shadow w-full flex items-center space-x-2 h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear nice-shadow " + (view == 'student' ? 'active:scale-110' : '')}
+                                            className={"answer outline outline-3 outline-white pr-2 shadow-sm w-full flex items-center space-x-2 h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear nice-shadow " + (view == 'student' ? 'active:scale-110' : '')}
                                         >
                                             <div className="font-bold text-base flex items-center h-full w-[40px] rounded-l-md text-slate-800 bg-slate-100/80">
                                                 <p className="mx-auto font-bold text-sm">{String.fromCharCode(65 + oIndex)}</p>
@@ -459,7 +459,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
                                         {view === 'teacher' && oIndex === question.options.length - 1 && questions[qIndex].options.length <= 4 && (
                                             <div className="flex justify-center mx-auto px-2">
                                                 <div
-                                                    className="outline text-xs outline-3 outline-white px-2 shadow w-full flex items-center h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white duration-150 cursor-pointer ease-linear nice-shadow"
+                                                    className="outline text-xs outline-3 outline-white px-2 shadow-sm w-full flex items-center h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white duration-150 cursor-pointer ease-linear nice-shadow"
                                                     onClick={() => addOption(qIndex)}
                                                 >
                                                     <Plus size={14} className="inline-block" />
@@ -476,7 +476,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
                 {view === 'teacher' && questions.length <= 5 && (
                     <div className="flex justify-center mx-auto px-2">
                         <div
-                            className="flex w-full my-2 py-2 px-4 bg-white text-slate text-xs rounded-md nice-shadow hover:shadow-sm cursor-pointer space-x-3 items-center transition duration-150 ease-linear"
+                            className="flex w-full my-2 py-2 px-4 bg-white text-slate text-xs rounded-md nice-shadow hover:shadow-xs cursor-pointer space-x-3 items-center transition duration-150 ease-linear"
                             onClick={addQuestion}
                         >
                             <PlusCircle size={14} className="inline-block" />
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/TaskEditor.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/TaskEditor.tsx
index e5f910c5..21716757 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/TaskEditor.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/TaskEditor.tsx
@@ -58,7 +58,7 @@ function AssignmentTaskEditor({ page }: any) {
                             <div>
                                 <div
                                     onClick={() => deleteTaskUI()}
-                                    className='flex px-2 py-1.5 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-red-800  bg-rose-100  border border-rose-600/10 shadow-rose-900/10 shadow-lg'>
+                                    className='flex px-2 py-1.5 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-red-800  bg-rose-100  border border-rose-600/10 shadow-rose-900/10 shadow-lg'>
                                     <Trash size={18} />
                                     <p className='text-xs font-semibold'>Delete Task</p>
                                 </div>
@@ -91,7 +91,7 @@ function AssignmentTaskEditor({ page }: any) {
                             </div>
                         </div>
                     </div>
-                    <div className='ml-10 mr-10 mt-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 nice-shadow'>
+                    <div className='ml-10 mr-10 mt-10 mx-auto bg-white rounded-xl shadow-xs px-6 py-5 nice-shadow'>
                         {selectedSubPage === 'general' && <AssignmentTaskGeneralEdit />}
                         {selectedSubPage === 'content' && <AssignmentTaskContentEdit />}
                     </div>
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
index fe6f4bdf..861af9fc 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
@@ -139,7 +139,7 @@ function PublishingState() {
                 <Link
                     target='_blank'
                     href={`/course/${assignment?.course_object?.course_uuid.replace('course_', '')}/activity/${assignment?.activity_object?.activity_uuid.replace('activity_', '')}`}
-                    className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-cyan-800 font-medium from-sky-400/50 to-cyan-200/80  border border-cyan-600/10 shadow-cyan-900/10 shadow-lg'>
+                    className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-cyan-800 font-medium from-sky-400/50 to-cyan-200/80  border border-cyan-600/10 shadow-cyan-900/10 shadow-lg'>
                     <Eye size={18} />
                     <p className=' text-sm font-bold'>Preview</p>
                 </Link>
@@ -151,7 +151,7 @@ function PublishingState() {
                 content="Make your Assignment unavailable for students" >
                 <div
                     onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
-                    className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
+                    className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
                     <BookX size={18} />
                     <p className='text-sm font-bold'>Unpublish</p>
                 </div>
@@ -164,7 +164,7 @@ function PublishingState() {
                     content="Make your Assignment public and available for students" >
                     <div
                         onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
-                        className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80  border border-green-600/10 shadow-green-900/10 shadow-lg'>
+                        className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80  border border-green-600/10 shadow-green-900/10 shadow-lg'>
                         <BookOpen size={18} />
                         <p className=' text-sm font-bold'>Publish</p>
                     </div>
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentEditorSubPage.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentEditorSubPage.tsx
index 70756060..26ae61db 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentEditorSubPage.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentEditorSubPage.tsx
@@ -17,7 +17,7 @@ function AssignmentEditorSubPage({ assignmentuuid }: { assignmentuuid: string })
                 </div>
                 <AssignmentTasks assignment_uuid={'assignment_' + assignmentuuid} />
             </div>
-            <div className='flex flex-grow bg-[#fefcfe] nice-shadow h-full w-full'>
+            <div className='flex grow bg-[#fefcfe] nice-shadow h-full w-full'>
                 <AssignmentProvider assignment_uuid={'assignment_' + assignmentuuid}>
                     <AssignmentTaskEditor page='general' />
                 </AssignmentProvider>
diff --git a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
index 0c37a366..8dd99687 100644
--- a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
@@ -23,7 +23,7 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
   }
 
   return (
-    <div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]">
+    <div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto_1fr]">
       <CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
         <div className="pl-10 pr-10 text-sm tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
           <CourseOverviewTop params={params} />
diff --git a/apps/web/app/orgs/[orgslug]/dash/page.tsx b/apps/web/app/orgs/[orgslug]/dash/page.tsx
index a356a5fb..e6a31416 100644
--- a/apps/web/app/orgs/[orgslug]/dash/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/page.tsx
@@ -17,55 +17,55 @@ function DashboardHome() {
         />
       </div>
       <AdminAuthorization authorizationMode="component">
-        <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 lg:space-x-10">
+        <div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
           {/* Card components */}
           <DashboardCard
             href="/dash/courses"
-            icon={<BookCopy className="mx-auto text-gray-500" size={50} />}
+            icon={<BookCopy className="mx-auto text-gray-500/100" size={50} />}
             title="Courses"
             description="Create and manage courses, chapters and activities"
           />
           <DashboardCard
             href="/dash/org/settings/general"
-            icon={<School className="mx-auto text-gray-500" size={50} />}
+            icon={<School className="mx-auto text-gray-500/100" size={50} />}
             title="Organization"
             description="Configure your Organization general settings"
           />
           <DashboardCard
             href="/dash/users/settings/users"
-            icon={<Users className="mx-auto text-gray-500" size={50} />}
+            icon={<Users className="mx-auto text-gray-500/100" size={50} />}
             title="Users"
             description="Manage your Organization's users, roles"
           />
         </div>
       </AdminAuthorization>
-      <div className="flex flex-col space-y-6 sm:space-y-10 mt-6 sm:mt-10">
+      <div className="flex flex-col gap-6 sm:gap-10 mt-6 sm:mt-10">
         <AdminAuthorization authorizationMode="component">
-          <div className="h-1 w-[100px] bg-neutral-200 rounded-full mx-auto"></div>
+          <div className="h-1 w-[100px] bg-neutral-200/100 rounded-full mx-auto"></div>
           <div className="flex justify-center items-center">
             <Link
               href={'https://university.learnhouse.io/'}
               target='_blank'
-              className="flex mt-4 sm:mt-[40px] bg-black space-x-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
+              className="flex mt-4 sm:mt-[40px] bg-black gap-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
             >
-              <University className="text-gray-100" size={20} />
-              <div className="text-sm font-bold text-gray-100">
+              <University className="text-gray-100/100" size={20} />
+              <div className="text-sm font-bold text-gray-100/100">
                 LearnHouse University
               </div>
             </Link>
           </div>
-          <div className="mx-auto mt-4 sm:mt-[40px] w-28 h-1 bg-neutral-200 rounded-full"></div>
+          <div className="mx-auto mt-4 sm:mt-[40px] w-28 h-1 bg-neutral-200/100 rounded-full"></div>
         </AdminAuthorization>
 
         <Link
           href={'/dash/user-account/settings/general'}
           className="flex bg-white shadow-lg p-4 items-center rounded-lg mx-auto hover:scale-105 transition-all ease-linear cursor-pointer max-w-md"
         >
-          <div className="flex flex-col sm:flex-row mx-auto space-y-2 sm:space-y-0 sm:space-x-3 items-center text-center sm:text-left">
-            <Settings className="text-gray-500" size={20} />
+          <div className="flex flex-col sm:flex-row mx-auto gap-2 sm:gap-3 items-center text-center sm:text-left">
+            <Settings className="text-gray-500/100" size={20} />
             <div>
-              <div className="font-bold text-gray-500">Account Settings</div>
-              <p className="text-sm text-gray-400">
+              <div className="font-bold text-gray-500/100">Account Settings</div>
+              <p className="text-sm text-gray-400/100">
                 Configure your personal settings, passwords, email
               </p>
             </div>
@@ -83,10 +83,10 @@ function DashboardCard({ href, icon, title, description }: { href: string, icon:
       href={href}
       className="flex bg-white shadow-lg p-6 w-full sm:w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
     >
-      <div className="flex flex-col mx-auto space-y-2">
+      <div className="flex flex-col mx-auto gap-2">
         {icon}
-        <div className="text-center font-bold text-gray-500">{title}</div>
-        <p className="text-center text-sm text-gray-400">{description}</p>
+        <div className="text-center font-bold text-gray-500/100">{title}</div>
+        <p className="text-center text-sm text-gray-400/100">{description}</p>
       </div>
     </Link>
   )
diff --git a/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
index 30e74c0a..492d5b71 100644
--- a/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
@@ -63,7 +63,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
   }
 
   return (
-    <div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]">
+    <div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto_1fr]">
       <div className="pl-10 pr-10  tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
         <BreadCrumbs type="orgusers"></BreadCrumbs>
         <div className="my-2  py-3">
diff --git a/apps/web/components.json b/apps/web/components.json
index 7a2c084c..d9a58966 100644
--- a/apps/web/components.json
+++ b/apps/web/components.json
@@ -16,5 +16,6 @@
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
-  }
+  },
+  "iconLibrary": "lucide"
 }
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
index 1770b180..9accd9f5 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
@@ -50,7 +50,7 @@ function EditCourseAccess(props: EditCourseAccessProps) {
             {courseStructure && (
                 <div>
                     <div className="h-6"></div>
-                    <div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-sm px-4 py-4">
+                    <div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-xs px-4 py-4">
                         <div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
                             <h1 className="font-bold text-lg sm:text-xl text-gray-800">Access to the course</h1>
                             <h2 className="text-gray-500 text-xs sm:text-sm">
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
index 87a93686..bc65b49a 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
@@ -145,11 +145,11 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
   return (
     <div>
       <div className="h-6"></div>
-      <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
+      <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-6 py-5">
         {courseStructure && (
           <div className="editcourse-form">
             {error && (
-              <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+              <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
                 <AlertTriangle size={18} />
                 <div className="font-bold text-sm">{error}</div>
               </div>
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/LearningItemsList.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/LearningItemsList.tsx
index 7ecb2ecd..a8998010 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/LearningItemsList.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/LearningItemsList.tsx
@@ -249,7 +249,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
                   setShowEmojiPicker(showEmojiPicker === item.id ? null : item.id);
                   setShowLinkInput(null);
                 }}
-                className="text-lg flex-shrink-0"
+                className="text-lg shrink-0"
               >
                 <span>{item.emoji}</span>
               </button>
@@ -261,7 +261,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
                 onFocus={() => handleInputFocus(item.id)}
                 onBlur={handleInputBlur}
                 placeholder="Enter learning item..."
-                className="flex-grow border-0 bg-transparent focus-visible:ring-0 px-0 h-8 text-sm learning-item-input"
+                className="grow border-0 bg-transparent focus-visible:ring-0 px-0 h-8 text-sm learning-item-input"
               />
               
               {item.link && (
@@ -318,7 +318,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
             )}
             
             {showLinkInput === item.id && (
-              <div ref={linkInputRef} className="mt-1 p-2 bg-white border border-gray-200 rounded-lg shadow-sm">
+              <div ref={linkInputRef} className="mt-1 p-2 bg-white border border-gray-200 rounded-lg shadow-xs">
                 <Input
                   ref={setLinkInputRef(item.id)}
                   value={items.find(i => i.id === item.id)?.link || ''}
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
index ba264bd2..3b7a77ef 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
@@ -52,19 +52,19 @@ function ThumbnailUpdate() {
   }
 
   return (
-    <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
+    <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow-sm">
       <div className="flex flex-col justify-center items-center h-full">
         <div className="flex flex-col justify-center items-center">
           <div className="flex flex-col justify-center items-center">
             {error && (
-              <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-sm">
+              <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-xs">
                 <div className="text-sm font-semibold">{error}</div>
               </div>
             )}
             {localThumbnail ? (
               <img
                 src={URL.createObjectURL(localThumbnail)}
-                className={`${isLoading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
+                className={`${isLoading ? 'animate-pulse' : ''} shadow-sm w-[200px] h-[100px] rounded-md`}
               />
             ) : (
               <img
@@ -73,7 +73,7 @@ function ThumbnailUpdate() {
                   course.courseStructure.course_uuid,
                   course.courseStructure.thumbnail_image
                 ) : '/empty_thumbnail.png'}`}
-                className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
+                className="shadow-sm w-[200px] h-[100px] rounded-md bg-gray-200"
               />
             )}
           </div>
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
index 68abb289..708a8a32 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
@@ -106,7 +106,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
             value={query}
             onChange={handleSearch}
             placeholder="Search for images..."
-            className="w-full p-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full p-2 pl-10 border rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500"
           />
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
         </div>
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
index 63e8f0f5..e955c0cc 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
@@ -117,10 +117,10 @@ function NewActivityButton(props: NewActivityButtonProps) {
         onClick={() => {
           openNewActivityModal(props.chapterId)
         }}
-        className="flex w-44 h-10 space-x-2 items-center py-2 my-3 rounded-xl justify-center text-white  bg-black  hover:cursor-pointer"
+        className="flex w-44 h-10 items-center justify-center py-2 my-3 rounded-xl text-white bg-black hover:cursor-pointer"
       >
-        <Layers className="" size={17} />
-        <div className="text-sm mx-auto my-auto  items-center font-bold">
+        <Layers size={17} />
+        <div className="text-sm font-bold ml-2">
           Add Activity
         </div>
       </div>
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
index 294fc2fb..a27ec2a8 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
@@ -129,7 +129,7 @@ function ActivityElement(props: ActivitiyElementProps) {
               <div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
                 <input
                   type="text"
-                  className="bg-transparent outline-none text-xs text-gray-500"
+                  className="bg-transparent outline-hidden text-xs text-gray-500"
                   placeholder="Activity name"
                   value={
                     modifiedActivity
@@ -166,8 +166,8 @@ function ActivityElement(props: ActivitiyElementProps) {
             <button
               className={`p-1 px-2 sm:px-3 border shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 ${
                 !props.activity.published
-                  ? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
-                  : 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
+                  ? 'bg-linear-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
+                  : 'bg-linear-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
               }`}
               onClick={() => changePublicStatus()}
             >
@@ -192,7 +192,7 @@ function ActivityElement(props: ActivitiyElementProps) {
                   )}`
                 }
                 prefetch
-                className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
+                className="p-1 px-2 sm:px-3 bg-linear-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
                 rel="noopener noreferrer"
               >
                 <Eye strokeWidth={2} size={14} className="text-sky-600" />
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
index f035b937..2ca954a8 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
@@ -92,7 +92,7 @@ function ChapterElement(props: ChapterElementProps) {
                   <div className="chapter-modification-zone bg-neutral-100 py-1 px-2 sm:px-4 rounded-lg flex items-center space-x-2">
                     <input
                       type="text"
-                      className="bg-transparent outline-none text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
+                      className="bg-transparent outline-hidden text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
                       placeholder="Chapter name"
                       value={
                         modifiedChapter
@@ -133,7 +133,7 @@ function ChapterElement(props: ChapterElementProps) {
                 dialogTitle={'Delete ' + props.chapter.name + ' ?'}
                 dialogTrigger={
                   <button
-                    className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow flex items-center text-rose-100 text-sm"
+                    className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow-sm flex items-center text-rose-100 text-sm"
                     rel="noopener noreferrer"
                   >
                     <Trash2 size={15} className="text-rose-200" />
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
index 834a0d1f..ac1508e0 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
@@ -164,7 +164,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
             dialogTitle="Create chapter"
             dialogDescription="Add a new chapter to the course"
             dialogTrigger={
-              <div className="w-44 my-16 py-5 max-w-screen-2xl mx-auto bg-cyan-800 text-white rounded-xl shadow-sm px-6 items-center flex flex-row h-10">
+              <div className="w-44 my-16 py-5 max-w-(--breakpoint-2xl) mx-auto bg-cyan-800 text-white rounded-xl shadow-xs px-6 items-center flex flex-row h-10">
                 <div className="mx-auto flex space-x-2 items-center hover:cursor-pointer">
                   <Hexagon
                     strokeWidth={3}
diff --git a/apps/web/components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages.tsx b/apps/web/components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages.tsx
index 25604775..1c055df4 100644
--- a/apps/web/components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages.tsx
+++ b/apps/web/components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages.tsx
@@ -367,21 +367,21 @@ export default function OrgEditImages() {
         <TabsList className="grid w-full grid-cols-3 p-1 bg-gray-100 rounded-lg">
           <TabsTrigger 
             value="logo" 
-            className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
+            className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
           >
             <StarIcon size={16} />
             <span>Logo</span>
           </TabsTrigger>
           <TabsTrigger 
             value="thumbnail"
-            className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
+            className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
           >
             <ImageIcon size={16} />
             <span>Thumbnail</span>
           </TabsTrigger>
           <TabsTrigger 
             value="previews"
-            className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
+            className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
           >
             <Images size={16} />
             <span>Previews</span>
@@ -390,7 +390,7 @@ export default function OrgEditImages() {
 
         <TabsContent value="logo" className="mt-2">
           <div className="flex flex-col space-y-5 w-full">
-            <div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl  transition-all duration-300 py-8">
+            <div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl  transition-all duration-300 py-8">
               <div className="flex flex-col justify-center items-center space-y-8">
                 <div className="relative group">
                   <div
@@ -416,9 +416,9 @@ export default function OrgEditImages() {
                     disabled={isLogoUploading}
                     className={cn(
                       "font-medium text-sm px-6 py-2.5 rounded-full",
-                      "bg-gradient-to-r from-blue-500 to-blue-600 text-white",
+                      "bg-linear-to-r from-blue-500 to-blue-600 text-white",
                       "hover:from-blue-600 hover:to-blue-700",
-                      "shadow-sm hover:shadow transition-all duration-300",
+                      "shadow-xs hover:shadow-sm transition-all duration-300",
                       "flex items-center space-x-2",
                       isLogoUploading && "opacity-75 cursor-not-allowed"
                     )}
@@ -443,7 +443,7 @@ export default function OrgEditImages() {
 
         <TabsContent value="thumbnail" className="mt-2">
           <div className="flex flex-col space-y-5 w-full">
-            <div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl  transition-all duration-300 py-8">
+            <div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl  transition-all duration-300 py-8">
               <div className="flex flex-col justify-center items-center space-y-8">
                 <div className="relative group">
                   <div
@@ -469,9 +469,9 @@ export default function OrgEditImages() {
                     disabled={isThumbnailUploading}
                     className={cn(
                       "font-medium text-sm px-6 py-2.5 rounded-full",
-                      "bg-gradient-to-r from-purple-500 to-purple-600 text-white",
+                      "bg-linear-to-r from-purple-500 to-purple-600 text-white",
                       "hover:from-purple-600 hover:to-purple-700",
-                      "shadow-sm hover:shadow transition-all duration-300",
+                      "shadow-xs hover:shadow-sm transition-all duration-300",
                       "flex items-center space-x-2",
                       isThumbnailUploading && "opacity-75 cursor-not-allowed"
                     )}
@@ -496,7 +496,7 @@ export default function OrgEditImages() {
 
         <TabsContent value="previews" className="mt-4">
           <div className="flex flex-col space-y-5 w-full">
-            <div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
+            <div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
               <div className="flex flex-col justify-center items-center space-y-6">
                 <DragDropContext onDragEnd={handleDragEnd}>
                   <Droppable droppableId="previews" direction="horizontal">
@@ -520,7 +520,7 @@ export default function OrgEditImages() {
                                 ref={provided.innerRef}
                                 {...provided.draggableProps}
                                 className={cn(
-                                  "relative group flex-shrink-0",
+                                  "relative group shrink-0",
                                   "w-48",
                                   snapshot.isDragging ? "scale-105 z-50" : "hover:scale-102",
                                 )}
@@ -529,7 +529,7 @@ export default function OrgEditImages() {
                                   onClick={() => removePreview(preview.id)}
                                   className={cn(
                                     "absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5",
-                                    "opacity-0 group-hover:opacity-100 z-10 shadow-sm",
+                                    "opacity-0 group-hover:opacity-100 z-10 shadow-xs",
                                     "transition-opacity duration-200"
                                   )}
                                 >
@@ -539,7 +539,7 @@ export default function OrgEditImages() {
                                   {...provided.dragHandleProps}
                                   className={cn(
                                     "absolute -top-2 -left-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full p-1.5",
-                                    "opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-sm",
+                                    "opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-xs",
                                     "transition-opacity duration-200"
                                   )}
                                 >
@@ -551,7 +551,7 @@ export default function OrgEditImages() {
                                       `w-full ${PREVIEW_HEIGHT} bg-contain bg-no-repeat bg-center rounded-xl bg-white`,
                                       "border border-gray-200 hover:border-gray-300",
                                       "transition-colors duration-200",
-                                      snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
+                                      snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
                                     )}
                                     style={{ 
                                       backgroundImage: `url(${getOrgPreviewMediaDirectory(org?.org_uuid, preview.id)})`,
@@ -561,7 +561,7 @@ export default function OrgEditImages() {
                                   <div className={cn(
                                     `w-full ${PREVIEW_HEIGHT} relative rounded-xl overflow-hidden`,
                                     "border border-gray-200 hover:border-gray-300 transition-colors duration-200",
-                                    snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
+                                    snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
                                   )}>
                                     <div
                                       className="absolute inset-0 bg-cover bg-center"
@@ -583,7 +583,7 @@ export default function OrgEditImages() {
                         {provided.placeholder}
                         {previews.length < 4 && (
                           <div className={cn(
-                            "flex-shrink-0 w-48",
+                            "shrink-0 w-48",
                             previews.length === 0 && "m-0"
                           )}>
                             <Dialog open={videoDialogOpen} onOpenChange={(open) => {
diff --git a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
index 8e9d6b53..ddd69c2a 100644
--- a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
+++ b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
@@ -288,7 +288,7 @@ const OrgEditLanding = () => {
                 onChange={() => setIsLandingEnabled(!isLandingEnabled)}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
             </label>
             <Button 
               variant="default" 
@@ -328,10 +328,10 @@ const OrgEditLanding = () => {
                                 ref={provided.innerRef}
                                 {...provided.draggableProps}
                                 onClick={() => setSelectedSection(index)}
-                                className={`p-4 bg-white/80 backdrop-blur-sm rounded-lg cursor-pointer border  ${
+                                className={`p-4 bg-white/80 backdrop-blur-xs rounded-lg cursor-pointer border  ${
                                   selectedSection === index 
-                                    ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-sm' 
-                                    : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-sm'
+                                    ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-xs' 
+                                    : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-xs'
                                 } ${snapshot.isDragging ? 'shadow-lg ring-2 ring-blue-500/20 rotate-2' : ''}`}
                               >
                                 <div className="flex items-center justify-between group">
@@ -888,7 +888,7 @@ const HeroSectionEditor: React.FC<{
           <TabsContent value="buttons" className="space-y-4 mt-4">
             <div className="space-y-3">
               {section.buttons.map((button, index) => (
-                <div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2 p-4 border rounded-lg">
+                <div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2 p-4 border rounded-lg">
                   <div className="space-y-2">
                     <Label>Button Text & Colors</Label>
                     <Input
@@ -1297,7 +1297,7 @@ const LogosSectionEditor: React.FC<{
           </div>
 
           {section.logos.map((logo, index) => (
-            <div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2">
+            <div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2">
               <div className="space-y-2">
                 <Input
                   value={logo.url}
@@ -1400,7 +1400,7 @@ const PeopleSectionEditor: React.FC<{
           <Label>People</Label>
           <div className="space-y-4 mt-2">
             {section.people.map((person, index) => (
-              <div key={index} className="grid grid-cols-[1fr,1fr,1fr,auto] gap-4 p-4 border rounded-lg">
+              <div key={index} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 border rounded-lg">
                 <div className="space-y-2">
                   <Label>Name</Label>
                   <Input
diff --git a/apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx b/apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx
index dcfc74ad..e1474bd3 100644
--- a/apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx
+++ b/apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx
@@ -127,7 +127,7 @@ const PaymentsConfigurationPage: React.FC = () => {
 
                 <div className="flex flex-col rounded-lg light-shadow">
                     {stripeConfig ? (
-                        <div className="flex items-center justify-between bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
+                        <div className="flex items-center justify-between bg-linear-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
                             <div className="flex items-center space-x-3">
                                 <SiStripe className="text-white" size={32} />
                                 <div className="flex flex-col">
@@ -187,7 +187,7 @@ const PaymentsConfigurationPage: React.FC = () => {
                     ) : (
                         <Button 
                             onClick={enableStripe} 
-                            className="flex items-center justify-center space-x-2 bg-gradient-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="flex items-center justify-center space-x-2 bg-linear-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
                             disabled={isOnboarding}
                         >
                             {isOnboarding ? (
diff --git a/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx b/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
index 7ccf8c97..41e9216a 100644
--- a/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
+++ b/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
@@ -139,7 +139,7 @@ function PaymentsProductPage() {
                                             />
                                         </div>
                                     </div>
-                                    <div className="flex-grow overflow-hidden">
+                                    <div className="grow overflow-hidden">
                                         <div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'} overflow-hidden`}>
                                             <p className="text-gray-600">
                                                 {product.description}
@@ -194,7 +194,7 @@ function PaymentsProductPage() {
                 <div className="flex justify-center items-center py-10">
                     <button
                         onClick={() => setIsCreateModalOpen(true)}
-                        className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
+                        className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-linear-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
                             }`}
                         disabled={!isStripeEnabled}
                     >
@@ -264,7 +264,7 @@ const EditProductForm = ({ product, onSuccess, onCancel }: { product: any, onSuc
                         </div>
 
                         <div className="flex space-x-2">
-                            <div className="flex-grow">
+                            <div className="grow">
                                 <Label htmlFor="amount">Price</Label>
                                 <Field name="amount" as={Input} type="number" placeholder="Price" />
                                 <ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
diff --git a/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx b/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
index 25efeb62..d068d300 100644
--- a/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
+++ b/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
@@ -135,7 +135,7 @@ const CreateProductForm: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) =
             </div>
 
             <div className="flex space-x-2">
-              <div className="flex-grow">
+              <div className="grow">
                 <Label htmlFor="amount">
                   {values.price_type === 'fixed_price' ? 'Price' : 'Minimum Amount'}
                 </Label>
diff --git a/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx b/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
index 9052f239..5c66e188 100644
--- a/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
+++ b/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
@@ -43,12 +43,12 @@ const CoursePreview = ({ course, orgslug, onLink, isLinked }: CoursePreviewProps
     <div className="flex gap-4 p-4 bg-white rounded-lg border border-gray-100 hover:border-gray-200 transition-colors">
       {/* Thumbnail */}
       <div 
-        className="flex-shrink-0 w-[120px] h-[68px] rounded-md bg-cover bg-center ring-1 ring-inset ring-black/10"
+        className="shrink-0 w-[120px] h-[68px] rounded-md bg-cover bg-center ring-1 ring-inset ring-black/10"
         style={{ backgroundImage: `url(${thumbnailImage})` }}
       />
       
       {/* Content */}
-      <div className="flex-grow space-y-1">
+      <div className="grow space-y-1">
         <h3 className="font-medium text-gray-900 line-clamp-1">
           {course.name}
         </h3>
@@ -58,7 +58,7 @@ const CoursePreview = ({ course, orgslug, onLink, isLinked }: CoursePreviewProps
       </div>
 
       {/* Action Button */}
-      <div className="flex-shrink-0 flex items-center">
+      <div className="shrink-0 flex items-center">
         {isLinked ? (
           <Button
             variant="outline"
diff --git a/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx b/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
index 8fa6ed25..0d24ab14 100644
--- a/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
@@ -76,7 +76,7 @@ function OrgAccess() {
       {!isLoading ? (
         <>
           <div className="h-6"></div>
-          <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
+          <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4 anit ">
             <div className="flex flex-col bg-gray-50 -space-y-1  px-5 py-3 rounded-md mb-3 ">
               <h1 className="font-bold text-xl text-gray-800">Join method</h1>
               <h2 className="text-gray-500  text-md">
diff --git a/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
index 8d134f9a..c4f5602e 100644
--- a/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
@@ -49,7 +49,7 @@ function OrgUserGroups() {
     return (
         <>
             <div className="h-6"></div>
-            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
+            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4">
                 <div className="flex flex-col bg-gray-50 -space-y-1  px-5 py-3 rounded-md mb-3 ">
                     <h1 className="font-bold text-xl text-gray-800">Manage UserGroups & Users</h1>
                     <h2 className="text-gray-500 text-sm">
diff --git a/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
index 32fb37f7..0caea7bc 100644
--- a/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
@@ -57,7 +57,7 @@ function OrgUsers() {
         <>
           <Toast></Toast>
           <div className="h-6"></div>
-          <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4  ">
+          <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4  ">
             <div className="flex flex-col bg-gray-50 -space-y-1  px-5 py-3 rounded-md mb-3 ">
               <h1 className="font-bold text-xl text-gray-800">Active users</h1>
               <h2 className="text-gray-500  text-md">
diff --git a/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
index f18543df..521f9935 100644
--- a/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
@@ -56,7 +56,7 @@ function OrgUsersAdd() {
             {!isLoading ? (
                 <>
                     <div className="h-6"></div>
-                    <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
+                    <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4 anit ">
                         <div className="flex flex-col bg-gray-50 -space-y-1  px-5 py-3 rounded-md mb-3 ">
                             <h1 className="font-bold text-xl text-gray-800">Invite users to your Organization</h1>
                             <h2 className="text-gray-500  text-md">
diff --git a/apps/web/components/Landings/LandingCustom.tsx b/apps/web/components/Landings/LandingCustom.tsx
index 5544fa7b..d83bb9b3 100644
--- a/apps/web/components/Landings/LandingCustom.tsx
+++ b/apps/web/components/Landings/LandingCustom.tsx
@@ -87,7 +87,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
                       <a
                         key={index}
                         href={button.link}
-                        className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
+                        className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow-sm transition-transform hover:scale-105"
                         style={{
                           backgroundColor: button.background,
                           color: button.color
@@ -123,7 +123,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
                     <a
                       key={index}
                       href={button.link}
-                      className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
+                      className="px-6 py-3 rounded-xl font-medium shadow-xs transition-all duration-200 hover:scale-105"
                       style={{
                         backgroundColor: button.background,
                         color: button.color
@@ -136,7 +136,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
               </div>
               <div className="flex-1 w-full md:w-auto">
                 <div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
-                  <div className="relative w-full aspect-[4/3]">
+                  <div className="relative w-full aspect-4/3">
                     <img
                       src={section.image.url}
                       alt={section.image.alt}
@@ -242,7 +242,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
   }
 
   return (
-    <div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
+    <div className="flex flex-col items-center justify-between w-full max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-16 h-full">
       {landing.sections.map((section) => renderSection(section))}
     </div>
   )
diff --git a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
index 69a344b8..2ac8e8c6 100644
--- a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
+++ b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
@@ -81,8 +81,8 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
 
   // TODO : come up with a better way to handle this
   const inputClass = aiChatBotState.isWaitingForResponse
-    ? 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
-    : 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30'
+    ? 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
+    : 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30'
 
   useEffect(() => {
     if (aiChatBotState.isModalOpen) {
@@ -211,7 +211,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
                 background:
                   'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)',
               }}
-              className="bg-black z-50 rounded-2xl max-w-screen-2xl w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md"
+              className="bg-black z-50 rounded-2xl max-w-(--breakpoint-2xl) w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md"
             >
               <div className="flex flex-row-reverse pb-3 justify-between items-center">
                 <div className="flex space-x-2 items-center">
@@ -348,7 +348,7 @@ function AIMessage(props: AIMessageProps) {
       </div>
       <div className="w-full">
         <p
-          className="w-full rounded-lg outline-none px-2 py-1 text-white text-md placeholder:text-white/30"
+          className="w-full rounded-lg outline-hidden px-2 py-1 text-white text-md placeholder:text-white/30"
           id=""
         >
           <AnimatePresence>
diff --git a/apps/web/components/Objects/Activities/Assignment/AssignmentBoxUI.tsx b/apps/web/components/Objects/Activities/Assignment/AssignmentBoxUI.tsx
index b7aab009..088185e4 100644
--- a/apps/web/components/Objects/Activities/Assignment/AssignmentBoxUI.tsx
+++ b/apps/web/components/Objects/Activities/Assignment/AssignmentBoxUI.tsx
@@ -76,7 +76,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
                     {view === 'teacher' &&
                         <div
                             onClick={() => saveFC && saveFC()}
-                            className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
+                            className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
                             <Save size={14} />
                             <p className='text-xs font-semibold'>Save</p>
                         </div>
@@ -86,7 +86,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
                     {view === 'student' && isAuthenticated && submission && submission.length <= 0 &&
                         <div
                             onClick={() => submitFC && submitFC()}
-                            className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center justify-center mx-auto w-full sm:w-auto bg-gradient-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
+                            className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center justify-center mx-auto w-full sm:w-auto bg-linear-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
                             <Forward size={14} />
                             <p className='text-xs font-semibold'>Save your progress</p>
                         </div>
@@ -95,11 +95,11 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
                     {/* Grading button */}
                     {view === 'grading' &&
                         <div
-                            className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-gradient-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
+                            className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-linear-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
                             <p className='font-semibold px-2 text-xs text-orange-700'>Current points: {currentPoints}</p>
                             <div
                                 onClick={() => gradeFC && gradeFC()}
-                                className='bg-gradient-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 ml-auto'>
+                                className='bg-linear-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 ml-auto'>
                                 <BookPlus size={14} />
                                 <p className='text-xs font-semibold'>Grade</p>
                             </div>
@@ -109,7 +109,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
                     {/* CustomGrading button */}
                     {view === 'custom-grading' && maxPoints &&
                         <div
-                            className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-gradient-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
+                            className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-linear-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
                             <p className='font-semibold px-2 text-xs text-orange-700 w-full sm:w-auto'>Current points: {currentPoints}</p>
                             <div className='flex items-center gap-2 w-full sm:w-auto'>
                                 <input
@@ -120,7 +120,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
                                 />
                                 <div
                                     onClick={() => gradeCustomFC && gradeCustomFC(customGrade)}
-                                    className='bg-gradient-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 whitespace-nowrap'>
+                                    className='bg-linear-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 whitespace-nowrap'>
                                     <BookPlus size={14} />
                                     <p className='text-xs font-semibold'>Grade</p>
                                 </div>
diff --git a/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx b/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx
index 5f22f415..30f5bfd8 100644
--- a/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx
+++ b/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx
@@ -21,16 +21,16 @@ function AssignmentStudentActivity() {
     <div className='flex flex-col space-y-4 md:space-y-6'>
       <div className='flex flex-col md:flex-row justify-center md:space-x-3 space-y-3 md:space-y-0 items-center'>
         <div className='text-xs h-fit flex space-x-3 items-center'>
-          <div className='flex space-x-2 py-2 px-4 md:px-5 h-fit text-sm text-slate-700 bg-slate-100/5 rounded-full nice-shadow'>
-            <Backpack size={16} className="md:size-18" />
+          <div className='flex gap-2 py-2 px-4 md:px-5 h-fit text-sm text-slate-700 bg-slate-100/5 rounded-full nice-shadow items-center'>
+            <Backpack size={14} className="md:size-[14px]" />
             <p className='font-semibold'>Assignment</p>
           </div>
         </div>
         <div>
-          <div className='flex space-x-2 items-center'>
+          <div className='flex gap-2 items-center'>
             <EllipsisVertical className='text-slate-400 hidden md:block' size={18} />
-            <div className='flex space-x-2 items-center'>
-              <div className='flex space-x-1 md:space-x-2 text-xs items-center text-slate-400'>
+            <div className='flex gap-2 items-center'>
+              <div className='flex gap-1 md:space-x-2 text-xs items-center text-slate-400'>
                 <Calendar size={14} />
                 <p className='font-semibold'>Due Date</p>
                 <p className='font-semibold'>{assignments?.assignment_object?.due_date}</p>
diff --git a/apps/web/components/Objects/Activities/Video/Video.tsx b/apps/web/components/Objects/Activities/Video/Video.tsx
index 2f8a707b..2ba6b15c 100644
--- a/apps/web/components/Objects/Activities/Video/Video.tsx
+++ b/apps/web/components/Objects/Activities/Video/Video.tsx
@@ -20,7 +20,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
         <>
           {activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
             <div className="my-3 md:my-5 w-full">
-              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
+              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-xs sm:shadow-none">
                 <video
                   className="w-full h-full object-cover"
                   controls
@@ -37,7 +37,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
           )}
           {activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
             <div className="my-3 md:my-5 w-full">
-              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
+              <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-xs sm:shadow-none">
                 <YouTube
                   className="w-full h-full"
                   opts={{
diff --git a/apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx b/apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx
index cf589478..702b0ec4 100644
--- a/apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx
+++ b/apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx
@@ -155,7 +155,7 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
         </div>
       </div>
 
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         {linkedProducts.length > 0 ? (
           hasAccess ? (
             <button
diff --git a/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx b/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
index c2537497..3ac056c8 100644
--- a/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
+++ b/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
@@ -85,7 +85,7 @@ function CoursePaidOptions({ course }: CoursePaidOptionsProps) {
             </div>
           </div>
 
-          <div className="flex-grow overflow-hidden">
+          <div className="grow overflow-hidden">
             <div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'
               } overflow-hidden`}>
               <p className="text-gray-600">
diff --git a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
index e8dd3953..5bf99b3d 100644
--- a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
+++ b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
@@ -86,7 +86,7 @@ function AIEditorToolkit(props: AIEditorToolkitProps) {
                       background:
                         'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)',
                     }}
-                    className="z-50 rounded-2xl max-w-screen-2xl my-10 mx-auto w-fit fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse backdrop-blur-md"
+                    className="z-50 rounded-2xl max-w-(--breakpoint-2xl) my-10 mx-auto w-fit fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse backdrop-blur-md"
                   >
                     <div className="flex space-x-2">
                       <div className="pr-1">
@@ -447,7 +447,7 @@ const UserFeedbackModal = (props: AIEditorToolkitProps) => {
           background:
             'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 95%)',
         }}
-        className="backdrop-blur-md	z-50 rounded-2xl max-w-screen-2xl my-10 mx-auto w-[500px] h-[200px] fixed bottom-16 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse"
+        className="backdrop-blur-md	z-50 rounded-2xl max-w-(--breakpoint-2xl) my-10 mx-auto w-[500px] h-[200px] fixed bottom-16 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse"
       >
         <div className="flex space-x-2 justify-center">
           <Image
@@ -469,7 +469,7 @@ const UserFeedbackModal = (props: AIEditorToolkitProps) => {
               value={aiEditorState.chatInputValue}
               onChange={handleChange}
               placeholder="Ask AI"
-              className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30"
+              className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30"
             ></input>
             <div
               onClick={() =>
@@ -620,7 +620,7 @@ const AiEditorActionScreen = ({
                 value={aiEditorState.chatInputValue}
                 onChange={handleChange}
                 placeholder="Japanese, Arabic, German, etc. "
-                className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-none px-4 py- text-white text-sm placeholder:text-white/30"
+                className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-hidden px-4 py- text-white text-sm placeholder:text-white/30"
               ></input>
             </div>
             <div
diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx
index 8b07ca46..56a8e0de 100644
--- a/apps/web/components/Objects/Editor/Editor.tsx
+++ b/apps/web/components/Objects/Editor/Editor.tsx
@@ -182,7 +182,7 @@ function Editor(props: Editor) {
           }}
           exit={{ opacity: 0 }}
         >
-          <EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
+          <EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur-sm backdrop-brightness-125">
             <EditorDocSection>
               <EditorInfoWrapper>
                 <Link href="/">
@@ -254,7 +254,7 @@ function Editor(props: Editor) {
               />
               <EditorLeftOptionsSection className="space-x-2 ">
                 <div
-                  className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer"
+                  className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow-sm text-teal-100 rounded-lg hover:cursor-pointer"
                   onClick={() => props.setContent(editor.getJSON())}
                 >
                   {' '}
@@ -265,7 +265,7 @@ function Editor(props: Editor) {
                     target="_blank"
                     href={`/course/${course_uuid}/activity/${activity_uuid}`}
                   >
-                    <div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
+                    <div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow-sm text-neutral-100 rounded-lg hover:cursor-pointer">
                       <Eye className="mx-auto items-center" size={15} />
                     </div>
                   </Link>
diff --git a/apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx b/apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx
index 41e1a2fc..8ac76efc 100644
--- a/apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx
@@ -164,7 +164,7 @@ const BadgesExtension: React.FC = (props: any) => {
                     {colors.map((c) => (
                       <button
                         key={c}
-                        className={`w-8 h-8 rounded-full ${getBadgeColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-none focus:ring-2 focus:ring-opacity-50`}
+                        className={`w-8 h-8 rounded-full ${getBadgeColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-hidden focus:ring-2 focus:ring-opacity-50`}
                         onClick={() => handleColorSelect(c)}
                       />
                     ))}
diff --git a/apps/web/components/Objects/Editor/Extensions/Buttons/ButtonsExtension.tsx b/apps/web/components/Objects/Editor/Extensions/Buttons/ButtonsExtension.tsx
index 63c2e65a..a43777f4 100644
--- a/apps/web/components/Objects/Editor/Extensions/Buttons/ButtonsExtension.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Buttons/ButtonsExtension.tsx
@@ -154,7 +154,7 @@ const ButtonsExtension: React.FC = (props: any) => {
             {colors.map((c) => (
               <button
                 key={c}
-                className={`w-6 h-6 rounded-full ${getButtonColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-none focus:ring-2 focus:ring-opacity-50`}
+                className={`w-6 h-6 rounded-full ${getButtonColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-hidden focus:ring-2 focus:ring-opacity-50`}
                 onClick={() => handleColorSelect(c)}
               />
             ))}
diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
index 85db7c9f..12317e3a 100644
--- a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
@@ -14,7 +14,7 @@ const IconWrapper = styled.div<{ size?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  shrink: 0;
   margin-right: 0.5rem;
   padding-left: 0.5rem;
   
@@ -126,7 +126,7 @@ function InfoCalloutComponent(props: any) {
         <IconWrapper size={options.size}>
           <AlertCircle />
         </IconWrapper>
-        <ContentWrapper className="flex-grow">
+        <ContentWrapper className="grow">
           <NodeViewContent contentEditable={isEditable} className="content" />
         </ContentWrapper>
         {options.dismissible && !isEditable && (
diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
index f5ed7f81..55b96f38 100644
--- a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
@@ -14,7 +14,7 @@ const IconWrapper = styled.div<{ size?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  shrink: 0;
   margin-right: 0.5rem;
   padding-left: 0.5rem;
   
@@ -126,7 +126,7 @@ function WarningCalloutComponent(props: any) {
         <IconWrapper size={options.size}>
           <AlertTriangle />
         </IconWrapper>
-        <ContentWrapper className="flex-grow">
+        <ContentWrapper className="grow">
           <NodeViewContent contentEditable={isEditable} className="content" />
         </ContentWrapper>
         {options.dismissible && !isEditable && (
diff --git a/apps/web/components/Objects/Editor/Extensions/EmbedObjects/EmbedObjectsComponent.tsx b/apps/web/components/Objects/Editor/Extensions/EmbedObjects/EmbedObjectsComponent.tsx
index 2335a166..bb85c10a 100644
--- a/apps/web/components/Objects/Editor/Extensions/EmbedObjects/EmbedObjectsComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/EmbedObjects/EmbedObjectsComponent.tsx
@@ -417,7 +417,7 @@ function EmbedObjectsComponent(props: any) {
             
             {/* Minimal toolbar for existing embeds */}
             {isEditable && (
-              <div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-sm rounded-lg p-1 shadow-sm transition-opacity opacity-70 hover:opacity-100">
+              <div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-xs rounded-lg p-1 shadow-xs transition-opacity opacity-70 hover:opacity-100">
                 <button
                   onClick={() => setActiveInput(embedType)}
                   className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600"
@@ -487,7 +487,7 @@ function EmbedObjectsComponent(props: any) {
                     setEmbedType('url');
                     setActiveInput('url');
                   }}
-                  className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all text-sm text-gray-700"
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-xs hover:shadow-md transition-all text-sm text-gray-700"
                 >
                   <LinkIcon size={14} />
                   <span>URL</span>
@@ -497,7 +497,7 @@ function EmbedObjectsComponent(props: any) {
                     setEmbedType('code');
                     setActiveInput('code');
                   }}
-                  className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all text-sm text-gray-700"
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-xs hover:shadow-md transition-all text-sm text-gray-700"
                 >
                   <Code size={14} />
                   <span>Code</span>
@@ -509,7 +509,7 @@ function EmbedObjectsComponent(props: any) {
         
         {/* Inline input UI - appears in place without covering content */}
         {isEditable && activeInput !== 'none' && (
-          <div className="absolute inset-0 bg-gray-100 bg-opacity-95 backdrop-blur-sm flex items-center justify-center p-4 z-10">
+          <div className="absolute inset-0 bg-gray-100 bg-opacity-95 backdrop-blur-xs flex items-center justify-center p-4 z-10">
             <form 
               onSubmit={handleInputSubmit}
               className="w-full max-w-lg bg-white rounded-xl shadow-lg p-4"
@@ -554,7 +554,7 @@ function EmbedObjectsComponent(props: any) {
                       type="text"
                       value={embedUrl}
                       onChange={handleUrlChange}
-                      className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-all"
+                      className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden transition-all"
                       placeholder={selectedProduct ? `Paste ${selectedProduct.name} embed URL` : "Paste embed URL (YouTube, Spotify, etc.)"}
                       autoFocus
                     />
@@ -586,7 +586,7 @@ function EmbedObjectsComponent(props: any) {
                       ref={codeInputRef}
                       value={embedCode}
                       onChange={handleCodeChange}
-                      className="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-all font-mono text-sm"
+                      className="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden transition-all font-mono text-sm"
                       placeholder="Paste embed code (iframe, embed script, etc.)"
                       autoFocus
                     />
diff --git a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
index 50219349..ef2f4e5a 100644
--- a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
@@ -110,7 +110,7 @@ function ImageBlockComponent(props: any) {
                 'imageBlock'
               )}`}
               alt=""
-              className="rounded-lg shadow max-w-full h-auto"
+              className="rounded-lg shadow-sm max-w-full h-auto"
               style={{ width: '100%' }}
             />
           </Resizable>
@@ -129,7 +129,7 @@ function ImageBlockComponent(props: any) {
               'imageBlock'
             )}`}
             alt=""
-            className="rounded-lg shadow max-w-full h-auto"
+            className="rounded-lg shadow-sm max-w-full h-auto"
             style={{ width: imageSize.width, maxWidth: '100%' }}
           />
         </div>
diff --git a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
index 5738b68a..23a8d025 100644
--- a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
@@ -59,7 +59,7 @@ function PDFBlockComponent(props: any) {
       {blockObject && (
         <BlockPDF>
           <iframe
-            className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
+            className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
             src={`${getActivityBlockMediaDirectory(
               org?.org_uuid,
               course?.courseStructure.course_uuid,
diff --git a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
index a7905ba4..1ea307ff 100644
--- a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
@@ -275,7 +275,7 @@ function QuizBlockComponent(props: any) {
           <div key={question.question_id} className="pt-3 space-y-2">
             <div className="question">
               <div className="flex space-x-2 items-center">
-                <div className="flex-grow">
+                <div className="grow">
                   {isEditable ? (
                     <input
                       value={question.question}
@@ -310,7 +310,7 @@ function QuizBlockComponent(props: any) {
                   <div
                     key={answer.answer_id}
                     className={twMerge(
-                      'outline outline-2 pr-2 shadow w-full flex items-stretch space-x-2 min-h-[36px] bg-opacity-50 hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear',
+                      'outline outline-2 pr-2 shadow-sm w-full flex items-stretch space-x-2 min-h-[36px] bg-opacity-50 hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear',
                       answer.correct && isEditable ? 'outline-lime-300' : 'outline-white',
                       userAnswers.some(
                         (userAnswer: any) =>
@@ -335,16 +335,16 @@ function QuizBlockComponent(props: any) {
                       className={twMerge(
                         'font-bold text-base flex items-center justify-center self-stretch w-[40px] rounded-l-md text-slate-800 bg-white',
                         answer.correct && isEditable
-                          ? 'bg-lime-300 text-lime-800 outline-none'
+                          ? 'bg-lime-300 text-lime-800 outline-hidden'
                           : 'bg-white',
                         userAnswers.some(
                           (userAnswer: any) =>
                             userAnswer.question_id === question.question_id &&
                             userAnswer.answer_id === answer.answer_id &&
                             !isEditable && !submitted
-                        ) ? 'bg-blue-400 text-white outline-none' : '',
+                        ) ? 'bg-blue-400 text-white outline-hidden' : '',
                         submitted && answer.correct
-                          ? 'bg-lime-300 text-lime-800 outline-none'
+                          ? 'bg-lime-300 text-lime-800 outline-hidden'
                           : '',
                         submitted &&
                           !answer.correct &&
@@ -353,7 +353,7 @@ function QuizBlockComponent(props: any) {
                               userAnswer.question_id === question.question_id &&
                               userAnswer.answer_id === answer.answer_id
                           )
-                          ? 'bg-red-400 text-red-800 outline-none'
+                          ? 'bg-red-400 text-red-800 outline-hidden'
                           : ''
                       )}
                     >
diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index e7e4ca7b..7e1d9a91 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -62,7 +62,7 @@ function VideoBlockComponents(props: any) {
         <BlockVideo>
           <video
             controls
-            className="rounded-lg shadow h-96 w-full object-scale-down bg-black"
+            className="rounded-lg shadow-sm h-96 w-full object-scale-down bg-black"
             src={`${getActivityBlockMediaDirectory(
               org?.org_uuid,
               course?.courseStructure.course_uuid,
diff --git a/apps/web/components/Objects/Menus/OrgMenu.tsx b/apps/web/components/Objects/Menus/OrgMenu.tsx
index 45ef6ad8..6ecf1c18 100644
--- a/apps/web/components/Objects/Menus/OrgMenu.tsx
+++ b/apps/web/components/Objects/Menus/OrgMenu.tsx
@@ -30,7 +30,7 @@ export const OrgMenu = (props: any) => {
     <>
       <div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>
       <div className="backdrop-blur-lg bg-white/90 fixed top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
-        <div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
+        <div className="flex items-center justify-between w-full max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-16 h-full">
           <div className="flex items-center space-x-5 md:w-auto w-full">
             <div className="logo flex md:w-auto w-full justify-center">
               <Link href={getUriWithOrg(orgslug, '/')}>
@@ -63,7 +63,7 @@ export const OrgMenu = (props: any) => {
               <HeaderProfileBox />
             </div>
             <button
-              className="md:hidden text-gray-600 focus:outline-none"
+              className="md:hidden text-gray-600 focus:outline-hidden"
               onClick={toggleMenu}
             >
               {isMenuOpen ? (
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
index 6fc09612..ff851a06 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
@@ -23,7 +23,7 @@ function NewActivityModal({
   return (
     <>
       {selectedView === 'home' && (
-        <div className="flex flex-row space-x-2 justify-start mt-2.5 w-full">
+        <div className="grid grid-cols-4 gap-2 mt-2.5 w-full">
           <ActivityOption
             onClick={() => {
               setSelectedView('dynamic')
diff --git a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
index 0e7676c2..1aa4382d 100644
--- a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
+++ b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
@@ -158,18 +158,18 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
           label="Course Thumbnail"
           message={formik.errors.thumbnail}
         />
-        <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
+        <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow-sm">
           <div className="flex flex-col justify-center items-center h-full">
             <div className="flex flex-col justify-center items-center">
               {formik.values.thumbnail ? (
                 <img
                   src={URL.createObjectURL(formik.values.thumbnail)}
-                  className={`${isUploading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
+                  className={`${isUploading ? 'animate-pulse' : ''} shadow-sm w-[200px] h-[100px] rounded-md`}
                 />
               ) : (
                 <img
                   src="/empty_thumbnail.png"
-                  className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
+                  className="shadow-sm w-[200px] h-[100px] rounded-md bg-gray-200"
                 />
               )}
               <div className="flex justify-center items-center space-x-2">
diff --git a/apps/web/components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup.tsx b/apps/web/components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup.tsx
index 867b03eb..71252cf5 100644
--- a/apps/web/components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup.tsx
+++ b/apps/web/components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup.tsx
@@ -77,7 +77,7 @@ function LinkToUserGroup(props: LinkToUserGroupProps) {
                         <Link className='px-3 text-blue-700 font-bold rounded-full py-1 bg-blue-100 mx-1' target='_blank' href={getUriWithOrg(org.slug, '/dash/users/settings/usergroups')}>Create a UserGroup</Link>
                     </div>}
                 <div className='py-3'>
-                    <button onClick={() => { handleLink() }} className='bg-green-700 text-white font-bold px-4 py-2 rounded-md shadow'>Link</button>
+                    <button onClick={() => { handleLink() }} className='bg-green-700 text-white font-bold px-4 py-2 rounded-md shadow-sm'>Link</button>
                 </div>
             </div>
         </div>
diff --git a/apps/web/components/Objects/Onboarding/Onboarding.tsx b/apps/web/components/Objects/Onboarding/Onboarding.tsx
index 2824b11e..61d9a18b 100644
--- a/apps/web/components/Objects/Onboarding/Onboarding.tsx
+++ b/apps/web/components/Objects/Onboarding/Onboarding.tsx
@@ -253,7 +253,7 @@ const Onboarding: React.FC = () => {
           />
         }
         dialogTrigger={
-          <div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
+          <div className='fixed pb-10 w-full bottom-0 bg-linear-to-t from-1% from-gray-950/25 to-transparent'>
             <div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
               <Sprout size={20} />
               <p>Onboarding</p>
@@ -299,7 +299,7 @@ const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   return (
     <div className='flex flex-col'>
       <div className='onboarding_screens flex-col px-4 py-4'>
-        <div className='flex-grow rounded-xl'>
+        <div className='grow rounded-xl'>
           <Image 
             unoptimized 
             className='mx-auto shadow-md shadow-gray-200 rounded-lg w-[730px] h-[330px] object-cover' 
diff --git a/apps/web/components/Objects/Search/SearchBar.tsx b/apps/web/components/Objects/Search/SearchBar.tsx
index a76c0c1e..f5f28ca1 100644
--- a/apps/web/components/Objects/Search/SearchBar.tsx
+++ b/apps/web/components/Objects/Search/SearchBar.tsx
@@ -93,7 +93,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ orgslug, className = '', i
           }}
           onFocus={handleSearchFocus}
           placeholder="Search courses..."
-          className="w-full h-9 pl-10 pr-4 rounded-lg border border-gray-200 bg-white/50 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent text-sm placeholder:text-gray-400"
+          className="w-full h-9 pl-10 pr-4 rounded-lg border border-gray-200 bg-white/50 focus:outline-hidden focus:ring-2 focus:ring-gray-200 focus:border-transparent text-sm placeholder:text-gray-400"
         />
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
       </div>
diff --git a/apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx b/apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
index 9f697e9c..9a6ea208 100644
--- a/apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
+++ b/apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
@@ -50,7 +50,7 @@ const ConfirmationModal = (params: ModalParams) => {
                 <Info size={35} />
               )}
             </div>
-            <div className="text pt-1 space-x-0 w-auto flex-grow">
+            <div className="text pt-1 space-x-0 w-auto grow">
               <div className="text-xl font-bold text-black ">
                 {params.dialogTitle}
               </div>
diff --git a/apps/web/components/Objects/StyledElements/Error/Error.tsx b/apps/web/components/Objects/StyledElements/Error/Error.tsx
index ee1b0812..8024110e 100644
--- a/apps/web/components/Objects/StyledElements/Error/Error.tsx
+++ b/apps/web/components/Objects/StyledElements/Error/Error.tsx
@@ -14,7 +14,7 @@ function ErrorUI(params: { message?: string, submessage?: string }) {
   }
 
   return (
-    <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
+    <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-linear-to-b from-rose-100 to-rose-100/5 ">
       <div className="flex flex-row  items-center space-x-5  rounded-xl ">
         <AlertTriangle className="text-rose-700" size={45} />
         <div className='flex flex-col'>
diff --git a/apps/web/components/Objects/StyledElements/Form/TagInput.tsx b/apps/web/components/Objects/StyledElements/Form/TagInput.tsx
index 6a720ded..291419a0 100644
--- a/apps/web/components/Objects/StyledElements/Form/TagInput.tsx
+++ b/apps/web/components/Objects/StyledElements/Form/TagInput.tsx
@@ -62,7 +62,7 @@ const FormTagInput = ({
 					placeholder={placeholder}
 					styleClasses={{
 						inlineTagsContainer:
-							'border-input rounded-lg bg-background shadow-xs transition-shadow focus-within:border-ring/40 focus-within:outline-hidden focus-within:ring-[3px] ring-ring/8 dark:ring-ring/12 p-1 gap-1',
+							'border-input rounded-lg bg-background shadow-2xs transition-shadow focus-within:border-ring/40 focus-within:outline-hidden focus-within:ring-[3px] ring-ring/8 dark:ring-ring/12 p-1 gap-1',
 						input:
 							'w-full min-w-[80px] focus-visible:outline-hidden shadow-none px-2 h-7',
 						tag: {
diff --git a/apps/web/components/Objects/StyledElements/Info/Info.tsx b/apps/web/components/Objects/StyledElements/Info/Info.tsx
index a117783a..054c32d1 100644
--- a/apps/web/components/Objects/StyledElements/Info/Info.tsx
+++ b/apps/web/components/Objects/StyledElements/Info/Info.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 
 function InfoUI(params: { message?: string, submessage?: string, cta?: string, href: string }) {
     return (
-        <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-yellow-100 to-yellow-100/5 ">
+        <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-linear-to-b from-yellow-100 to-yellow-100/5 ">
             <div className="flex flex-row  items-center space-x-5  rounded-xl ">
                 <Diamond className="text-yellow-700" size={45} />
                 <div className='flex flex-col'>
diff --git a/apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx b/apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
index 6e078b9b..e3a1f12e 100644
--- a/apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
+++ b/apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
@@ -1,6 +1,6 @@
 function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
   return (
-    <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
+    <div className="max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
       {children}
     </div>
   )
diff --git a/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx b/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
index cadebaf1..fbfd2403 100644
--- a/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
+++ b/apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
@@ -113,7 +113,7 @@ const CourseThumbnailLanding: React.FC<PropsType> = ({ course, orgslug, customLi
     : '../empty_thumbnail.png'
 
   return (
-    <div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
+    <div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm shrink-0 m-2">
       <AdminEditOptions
         course={course}
         orgslug={orgslug}
diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
index 95eef6ad..4600a3f2 100644
--- a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
+++ b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
@@ -67,7 +67,7 @@ function Activity(props: any) {
     >
       {(provided) => (
         <div
-          className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear"
+          className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow-sm space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-xs transition-all delay-100 duration-75 ease-linear"
           key={props.activity.id}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
@@ -113,7 +113,7 @@ function Activity(props: any) {
               <div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
                 <input
                   type="text"
-                  className="bg-transparent outline-none text-xs text-gray-500"
+                  className="bg-transparent outline-hidden text-xs text-gray-500"
                   placeholder="Activity name"
                   value={
                     modifiedActivity
diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
index fa8b6cea..4e22a439 100644
--- a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
+++ b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
@@ -51,7 +51,7 @@ function Chapter(props: any) {
           {...provided.draggableProps}
           ref={provided.innerRef}
           //  isDragging={snapshot.isDragging}
-          className="max-w-screen-2xl mx-auto bg-white px-5"
+          className="max-w-(--breakpoint-2xl) mx-auto bg-white px-5"
           key={props.info.list.chapter.id}
         >
           <div className="flex pt-3 pr-3 font-bold text-md items-center space-x-2">
@@ -69,7 +69,7 @@ function Chapter(props: any) {
                   <div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
                     <input
                       type="text"
-                      className="bg-transparent outline-none text-sm text-neutral-700"
+                      className="bg-transparent outline-hidden text-sm text-neutral-700"
                       placeholder="Chapter name"
                       value={
                         modifiedChapter
@@ -116,7 +116,7 @@ function Chapter(props: any) {
               dialogTitle={'Delete ' + props.info.list.chapter.name + ' ?'}
               dialogTrigger={
                 <div
-                  className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
+                  className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow-sm flex space-x-1 items-center text-rose-100 text-sm"
                   rel="noopener noreferrer"
                 >
                   <X size={15} className="text-rose-200 font-bold" />
@@ -157,7 +157,7 @@ function Chapter(props: any) {
                     onClick={() => {
                       props.openNewActivityModal(props.info.list.chapter.id)
                     }}
-                    className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white  bg-black  hover:cursor-pointer"
+                    className="flex space-x-2 items-center py-5 my-3 rounded-md justify-center text-white  bg-black  hover:cursor-pointer"
                   >
                     <Sparkles className="" size={17} />
                     <div className="text-sm mx-auto my-auto  items-center font-bold">
diff --git a/apps/web/components/Pages/Trail/TrailCourseElement.tsx b/apps/web/components/Pages/Trail/TrailCourseElement.tsx
index dfbcd456..fe6ab206 100644
--- a/apps/web/components/Pages/Trail/TrailCourseElement.tsx
+++ b/apps/web/components/Pages/Trail/TrailCourseElement.tsx
@@ -61,7 +61,7 @@ function TrailCourseElement(props: TrailCourseElementProps) {
           }}
         ></div>
       </Link>
-      <div className="course_meta pl-5 flex-grow space-y-1">
+      <div className="course_meta pl-5 grow space-y-1">
         <div className="course_top">
           <div className="course_info flex">
             <div className="course_basic flex flex-col flex-end -space-y-2">
@@ -72,7 +72,7 @@ function TrailCourseElement(props: TrailCourseElementProps) {
                 <h2>{course_progress}%</h2>
               </div>
             </div>
-            <div className="course_actions flex-grow flex flex-row-reverse">
+            <div className="course_actions grow flex flex-row-reverse">
               <button
                 onClick={() => quitCourse(course.course_uuid)}
                 className="bg-red-200 text-red-700 hover:bg-red-300  rounded-full text-xs h-5 px-2 font-bold"
diff --git a/apps/web/components/Security/HeaderProfileBox.tsx b/apps/web/components/Security/HeaderProfileBox.tsx
index 6fbddd2b..6eaa7dde 100644
--- a/apps/web/components/Security/HeaderProfileBox.tsx
+++ b/apps/web/components/Security/HeaderProfileBox.tsx
@@ -89,5 +89,5 @@ const ProfileArea = styled.div`
 const UnidentifiedArea = styled.div`
   display: flex;
   place-items: stretch;
-  flex-grow: 1;
+  grow: 1;
 `
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
index e87d62bf..3afe1e31 100644
--- a/apps/web/components/ui/badge.tsx
+++ b/apps/web/components/ui/badge.tsx
@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
         outline: "text-foreground",
       },
     },
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index ed0f6279..eede633e 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index fe42372d..46c7c09e 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px]  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,13 +38,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-5 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-2xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-2xl",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx
index 76ad9152..a506f267 100644
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/apps/web/components/ui/dropdown-menu.tsx
@@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className
     )}
@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
index 5af26b2c..202b25be 100644
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
index ac2a8f2b..dea4bc65 100644
--- a/apps/web/components/ui/select.tsx
+++ b/apps/web/components/ui/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/components/ui/switch.tsx b/apps/web/components/ui/switch.tsx
index 5f4117f0..b062f9b7 100644
--- a/apps/web/components/ui/switch.tsx
+++ b/apps/web/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index c0df655c..2afad95c 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
       className
     )}
     {...props}
diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx
index 0f4caebb..e3da247f 100644
--- a/apps/web/components/ui/tabs.tsx
+++ b/apps/web/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}
diff --git a/apps/web/components/ui/textarea.tsx b/apps/web/components/ui/textarea.tsx
index d1258e47..d8f241c4 100644
--- a/apps/web/components/ui/textarea.tsx
+++ b/apps/web/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/apps/web/components/ui/toggle.tsx b/apps/web/components/ui/toggle.tsx
index c50c2733..f614da12 100644
--- a/apps/web/components/ui/toggle.tsx
+++ b/apps/web/components/ui/toggle.tsx
@@ -7,13 +7,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
       },
       size: {
         default: "h-9 px-3",
diff --git a/apps/web/package.json b/apps/web/package.json
index ce8a9b70..c8019d87 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -85,6 +85,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.12",
     "@types/node": "20.12.2",
     "@types/react": "18.2.74",
     "@types/react-beautiful-dnd": "^13.1.8",
@@ -93,12 +94,11 @@
     "@types/react-transition-group": "^4.4.11",
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^9.0.8",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-next": "^14.2.16",
     "eslint-plugin-unused-imports": "^3.2.0",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.0.12",
     "typescript": "5.4.4"
   }
 }
\ No newline at end of file
diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml
index e7f0a105..a4a6c6fd 100644
--- a/apps/web/pnpm-lock.yaml
+++ b/apps/web/pnpm-lock.yaml
@@ -208,10 +208,10 @@ importers:
         version: 2.5.4
       tailwind-scrollbar:
         specifier: ^3.1.0
-        version: 3.1.0(tailwindcss@3.4.14)
+        version: 3.1.0(tailwindcss@4.0.12)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        version: 1.0.7(tailwindcss@4.0.12)
       unsplash-js:
         specifier: ^7.0.19
         version: 7.0.19
@@ -225,6 +225,9 @@ importers:
         specifier: ^1.4.0
         version: 1.4.0
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.12
+        version: 4.0.12
       '@types/node':
         specifier: 20.12.2
         version: 20.12.2
@@ -249,9 +252,6 @@ importers:
       '@types/uuid':
         specifier: ^9.0.8
         version: 9.0.8
-      autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.47)
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -265,8 +265,8 @@ importers:
         specifier: ^8.4.47
         version: 8.4.47
       tailwindcss:
-        specifier: ^3.4.14
-        version: 3.4.14
+        specifier: ^4.0.12
+        version: 4.0.12
       typescript:
         specifier: 5.4.4
         version: 5.4.4
@@ -1971,6 +1971,82 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/node@4.0.12':
+    resolution: {integrity: sha512-a6J11K1Ztdln9OrGfoM75/hChYPcHYGNYimqciMrvKXRmmPaS8XZTHhdvb5a3glz4Kd4ZxE1MnuFE2c0fGGmtg==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.12':
+    resolution: {integrity: sha512-dAXCaemu3mHLXcA5GwGlQynX8n7tTdvn5i1zAxRvZ5iC9fWLl5bGnjZnzrQqT7ttxCvRwdVf3IHUnMVdDBO/kQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.12':
+    resolution: {integrity: sha512-vPNI+TpJQ7sizselDXIJdYkx9Cu6JBdtmRWujw9pVIxW8uz3O2PjgGGzL/7A0sXI8XDjSyRChrUnEW9rQygmJQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.12':
+    resolution: {integrity: sha512-RL/9jM41Fdq4Efr35C5wgLx98BirnrfwuD+zgMFK6Ir68HeOSqBhW9jsEeC7Y/JcGyPd3MEoJVIU4fAb7YLg7A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.12':
+    resolution: {integrity: sha512-7WzWiax+LguJcMEimY0Q4sBLlFXu1tYxVka3+G2M9KmU/3m84J3jAIV4KZWnockbHsbb2XgrEjtlJKVwHQCoRA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
+    resolution: {integrity: sha512-X9LRC7jjE1QlfIaBbXjY0PGeQP87lz5mEfLSVs2J1yRc9PSg1tEPS9NBqY4BU9v5toZgJgzKeaNltORyTs22TQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
+    resolution: {integrity: sha512-i24IFNq2402zfDdoWKypXz0ZNS2G4NKaA82tgBlE2OhHIE+4mg2JDb5wVfyP6R+MCm5grgXvurcIcKWvo44QiQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.12':
+    resolution: {integrity: sha512-LmOdshJBfAGIBG0DdBWhI0n5LTMurnGGJCHcsm9F//ISfsHtCnnYIKgYQui5oOz1SUCkqsMGfkAzWyNKZqbGNw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.12':
+    resolution: {integrity: sha512-OSK667qZRH30ep8RiHbZDQfqkXjnzKxdn0oRwWzgCO8CoTxV+MvIkd0BWdQbYtYuM1wrakARV/Hwp0eA/qzdbw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.12':
+    resolution: {integrity: sha512-uylhWq6OWQ8krV8Jk+v0H/3AZKJW6xYMgNMyNnUbbYXWi7hIVdxRKNUB5UvrlC3RxtgsK5EAV2i1CWTRsNcAnA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
+    resolution: {integrity: sha512-XDLnhMoXZEEOir1LK43/gHHwK84V1GlV8+pAncUAIN2wloeD+nNciI9WRIY/BeFTqES22DhTIGoilSO39xDb2g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.12':
+    resolution: {integrity: sha512-I/BbjCLpKDQucvtn6rFuYLst1nfFwSMYyPzkx/095RE+tuzk5+fwXuzQh7T3fIBTcbn82qH/sFka7yPGA50tLw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.12':
+    resolution: {integrity: sha512-DWb+myvJB9xJwelwT9GHaMc1qJj6MDXRDR0CS+T8IdkejAtu8ctJAgV4r1drQJLPeS7mNwq2UHW2GWrudTf63A==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.12':
+    resolution: {integrity: sha512-r59Sdr8djCW4dL3kvc4aWU8PHdUAVM3O3te2nbYzXsWwKLlHPCuUoZAc9FafXb/YyNDZOMI7sTbKTKFmwOrMjw==}
+
   '@tanstack/react-table@8.20.5':
     resolution: {integrity: sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==}
     engines: {node: '>=12'}
@@ -2421,9 +2497,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -2478,13 +2551,6 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -2520,11 +2586,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.24.2:
-    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.24.4:
     resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2555,10 +2616,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
@@ -2669,11 +2726,6 @@ packages:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -2761,16 +2813,10 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -2792,9 +2838,6 @@ packages:
   electron-to-chromium@1.5.102:
     resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==}
 
-  electron-to-chromium@1.5.49:
-    resolution: {integrity: sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==}
-
   emblor@1.4.7:
     resolution: {integrity: sha512-sFrZ96ALdRwsoiWM/fZ2liM6z4CF4iOqPMwi72wDlFm9nIP4wUN01f7dSajrT+L4FAbUf3+e73UWtWXzAOj8zQ==}
     peerDependencies:
@@ -3078,9 +3121,6 @@ packages:
   forwarded-parse@2.1.2:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
   framer-motion@10.18.0:
     resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
     peerDependencies:
@@ -3415,8 +3455,8 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   jose@4.15.9:
@@ -3484,14 +3524,74 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
-    engines: {node: '>=14'}
-
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -3683,9 +3783,6 @@ packages:
       encoding:
         optional: true
 
-  node-releases@2.0.18:
-    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
-
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
@@ -3693,10 +3790,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -3718,10 +3811,6 @@ packages:
     resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
     engines: {node: '>= 6'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.2:
     resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
     engines: {node: '>= 0.4'}
@@ -3831,10 +3920,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -3843,18 +3928,6 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
   postcss-load-config@3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -3867,28 +3940,6 @@ packages:
       ts-node:
         optional: true
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -4187,9 +4238,6 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -4481,10 +4529,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.12:
+    resolution: {integrity: sha512-bT0hJo91FtncsAMSsMzUkoo/iEU0Xs5xgFgVC9XmdM9bw5MhZuQFjPNl6wxAE0SiQF/YTZJa+PndGWYSDtuxAg==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -4643,12 +4689,6 @@ packages:
     resolution: {integrity: sha512-j6qT2floy5Q2g2d939FJpwey1yw/GpQecFiSouyJtsHQPj3oqmqq3K4rI+GF8vU1zwGCT7ZwIGQd2dtCQLjYJw==}
     engines: {node: '>=10'}
 
-  update-browserslist-db@1.1.1:
-    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   update-browserslist-db@1.1.2:
     resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
     hasBin: true
@@ -4714,9 +4754,6 @@ packages:
     peerDependencies:
       react: ^16.8.0  || ^17 || ^18
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -4810,11 +4847,6 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yaml@2.6.0:
-    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -6589,6 +6621,68 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.0
 
+  '@tailwindcss/node@4.0.12':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.12
+
+  '@tailwindcss/oxide-android-arm64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.12':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.12
+      '@tailwindcss/oxide-darwin-arm64': 4.0.12
+      '@tailwindcss/oxide-darwin-x64': 4.0.12
+      '@tailwindcss/oxide-freebsd-x64': 4.0.12
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.12
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.12
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.12
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.12
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.12
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.12
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.12
+
+  '@tailwindcss/postcss@4.0.12':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.12
+      '@tailwindcss/oxide': 4.0.12
+      lightningcss: 1.29.2
+      postcss: 8.4.47
+      tailwindcss: 4.0.12
+
   '@tanstack/react-table@8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/table-core': 8.20.5
@@ -7113,8 +7207,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arg@5.0.2: {}
-
   argparse@2.0.1: {}
 
   aria-hidden@1.2.4:
@@ -7194,16 +7286,6 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
-  autoprefixer@10.4.20(postcss@8.4.47):
-    dependencies:
-      browserslist: 4.24.2
-      caniuse-lite: 1.0.30001675
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-value-parser: 4.2.0
-
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
@@ -7237,13 +7319,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.24.2:
-    dependencies:
-      caniuse-lite: 1.0.30001675
-      electron-to-chromium: 1.5.49
-      node-releases: 2.0.18
-      update-browserslist-db: 1.1.1(browserslist@4.24.2)
-
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001700
@@ -7274,8 +7349,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelize@1.0.1: {}
 
   caniuse-lite@1.0.30001675: {}
@@ -7382,8 +7455,6 @@ snapshots:
 
   css-what@6.1.0: {}
 
-  cssesc@3.0.0: {}
-
   csstype@3.1.3: {}
 
   currency-codes@2.2.0:
@@ -7455,14 +7526,10 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -7481,8 +7548,6 @@ snapshots:
 
   electron-to-chromium@1.5.102: {}
 
-  electron-to-chromium@1.5.49: {}
-
   emblor@1.4.7(@types/react-dom@18.2.23)(@types/react@18.2.74)(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.4.4):
     dependencies:
       '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -7948,8 +8013,6 @@ snapshots:
 
   forwarded-parse@2.1.2: {}
 
-  fraction.js@4.3.7: {}
-
   framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       tslib: 2.8.0
@@ -8289,7 +8352,7 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.6: {}
+  jiti@2.4.2: {}
 
   jose@4.15.9: {}
 
@@ -8345,9 +8408,52 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lilconfig@2.1.0: {}
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
 
-  lilconfig@3.1.2: {}
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
+
+  lilconfig@2.1.0: {}
 
   lines-and-columns@1.2.4: {}
 
@@ -8526,14 +8632,10 @@ snapshots:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-releases@2.0.18: {}
-
   node-releases@2.0.19: {}
 
   normalize-path@3.0.0: {}
 
-  normalize-range@0.1.2: {}
-
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -8548,8 +8650,6 @@ snapshots:
 
   object-hash@2.2.0: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.2: {}
 
   object-keys@1.1.1: {}
@@ -8661,24 +8761,10 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pify@2.3.0: {}
-
   pirates@4.0.6: {}
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@4.0.1(postcss@8.4.47):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.47
-
   postcss-load-config@3.1.4(postcss@8.4.47):
     dependencies:
       lilconfig: 2.1.0
@@ -8686,23 +8772,6 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.47
 
-  postcss-load-config@4.0.2(postcss@8.4.47):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.0
-    optionalDependencies:
-      postcss: 8.4.47
-
-  postcss-nested@6.2.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -9037,10 +9106,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -9374,40 +9439,15 @@ snapshots:
 
   tailwind-merge@3.0.2: {}
 
-  tailwind-scrollbar@3.1.0(tailwindcss@3.4.14):
+  tailwind-scrollbar@3.1.0(tailwindcss@4.0.12):
     dependencies:
-      tailwindcss: 3.4.14
+      tailwindcss: 4.0.12
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  tailwindcss-animate@1.0.7(tailwindcss@4.0.12):
     dependencies:
-      tailwindcss: 3.4.14
+      tailwindcss: 4.0.12
 
-  tailwindcss@3.4.14:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
-      postcss-nested: 6.2.0(postcss@8.4.47)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.12: {}
 
   tapable@2.2.1: {}
 
@@ -9571,12 +9611,6 @@ snapshots:
 
   unsplash-js@7.0.19: {}
 
-  update-browserslist-db@1.1.1(browserslist@4.24.2):
-    dependencies:
-      browserslist: 4.24.2
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
   update-browserslist-db@1.1.2(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
@@ -9630,8 +9664,6 @@ snapshots:
       lodash.debounce: 4.0.8
       react: 18.3.1
 
-  util-deprecate@1.0.2: {}
-
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}
@@ -9758,8 +9790,6 @@ snapshots:
 
   yaml@1.10.2: {}
 
-  yaml@2.6.0: {}
-
   yocto-queue@0.1.0: {}
 
   youtube-player@5.5.2:
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
index 33ad091d..52b9b4ba 100644
--- a/apps/web/postcss.config.js
+++ b/apps/web/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 77b4a6e0..e48ae9b2 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,112 +1,192 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap')
+layer(base);
+/*
+  ---break---
+*/
+@plugin 'tailwindcss-animate';
 
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
+@import 'tailwindcss';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@custom-variant dark (&:is(.dark *));
 
-.nice-shadow {
-  @apply shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40
+@theme {
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
 }
 
-.light-shadow {
-  @apply shadow-lg shadow-gray-300/15 outline outline-1 outline-neutral-200/30
-}
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-
-.custom-dots-bg {
-  @apply bg-fixed;
-  background-image: radial-gradient(#4744446b 1px, transparent 1px),
-    radial-gradient(#4744446b 1px, transparent 1px);
-  background-position: 0 0, 25px 25px;
-  background-size: 50px 50px;
-  background-repeat: repeat;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  transition: all 0.2s ease;
-  font-family: 'DM Sans' , -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  
-  body {
-    color: black;
-    background: #FBFBFB;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
   }
 }
 
-/* Basic editor styles */
-.ProseMirror > * + * {
-  margin-top: 0.75em;
-}
-/* Placeholder (at the top) */
-.ProseMirror p.is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-/* Give a remote user a caret */
-.collaboration-cursor__caret {
-  border-left: 1px solid #0d0d0d;
-  border-right: 1px solid #0d0d0d;
-  margin-left: -1px;
-  margin-right: -1px;
-  pointer-events: none;
-  position: relative;
-  word-break: normal;
-}
-/* Render the username above the caret */
-.collaboration-cursor__label {
-  border-radius: 3px 3px 3px 0;
-  color: #0d0d0d;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  left: -1px;
-  line-height: normal;
-  padding: 0.1rem 0.3rem;
-  position: absolute;
-  top: -1.4em;
-  user-select: none;
-  white-space: nowrap;
-}
+@layer utilities {
+  .nice-shadow {
+    @apply shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40;
+  }
 
+  .light-shadow {
+    @apply shadow-lg shadow-gray-300/15 outline outline-1 outline-neutral-200/30;
+  }
 
-.fade-enter {
-  opacity: 0;
-  transform: translateY(-20px);
-}
+  .custom-dots-bg {
+    @apply bg-fixed;
+    background-image:
+      radial-gradient(#4744446b 1px, transparent 1px),
+      radial-gradient(#4744446b 1px, transparent 1px);
+    background-position:
+      0 0,
+      25px 25px;
+    background-size: 50px 50px;
+    background-repeat: repeat;
+  }
 
-.fade-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition: opacity 300ms, transform 300ms;
-}
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    transition: all 0.2s ease;
+    font-family:
+      'DM Sans',
+      -apple-system,
+      BlinkMacSystemFont,
+      Segoe UI,
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      Fira Sans,
+      Droid Sans,
+      Helvetica Neue,
+      sans-serif;
+  }
 
-.fade-exit {
-  opacity: 1;
-  transform: translateY(0);
-}
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 
-.fade-exit-active {
-  opacity: 0;
-  transform: translateY(-20px);
-  transition: opacity 300ms, transform 300ms;
+  * {
+    box-sizing: border-box;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    body {
+      color: black;
+      background: #fbfbfb;
+    }
+  }
+
+  /* Basic editor styles */
+  .ProseMirror > * + * {
+    margin-top: 0.75em;
+  }
+  /* Placeholder (at the top) */
+  .ProseMirror p.is-editor-empty:first-child::before {
+    color: #adb5bd;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+  /* Give a remote user a caret */
+  .collaboration-cursor__caret {
+    border-left: 1px solid #0d0d0d;
+    border-right: 1px solid #0d0d0d;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+  }
+  /* Render the username above the caret */
+  .collaboration-cursor__label {
+    border-radius: 3px 3px 3px 0;
+    color: #0d0d0d;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    left: -1px;
+    line-height: normal;
+    padding: 0.1rem 0.3rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .fade-enter {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  .fade-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+      opacity 300ms,
+      transform 300ms;
+  }
+
+  .fade-exit {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .fade-exit-active {
+    opacity: 0;
+    transform: translateY(-20px);
+    transition:
+      opacity 300ms,
+      transform 300ms;
+  }
 }
 
 @layer base {
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 49516b96..3052f582 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -1,64 +1,106 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ['class'],
-    content: [
-    './app/**/*.{js,jsx,ts,tsx}',
-    './components/**/*.{js,jsx,ts,tsx}',
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
   theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		}
-  	}
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        "fade-out": {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        "zoom-in": {
+          from: { transform: "scale(0.95)" },
+          to: { transform: "scale(1)" },
+        },
+        "zoom-out": {
+          from: { transform: "scale(1)" },
+          to: { transform: "scale(0.95)" },
+        },
+        "slide-in-from-top": {
+          from: { transform: "translateY(-100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "slide-in-from-bottom": {
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.2s ease-out",
+        "fade-out": "fade-out 0.2s ease-out",
+        "zoom-in": "zoom-in 0.2s ease-out",
+        "zoom-out": "zoom-out 0.2s ease-out",
+        "slide-in-from-top": "slide-in-from-top 0.2s ease-out",
+        "slide-in-from-bottom": "slide-in-from-bottom 0.2s ease-out",
+      },
+    },
   },
-  plugins: [
-    require('tailwind-scrollbar')({ nocompatible: true }),
-      require("tailwindcss-animate")
-],
-}
-
+  plugins: [require("tailwindcss-animate")],
+} 
\ No newline at end of file