diff --git a/.eslintrc.json b/.eslintrc.json
index fc8a371c1..d2754ec1d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -95,9 +95,12 @@
             "version": "detect"
         },
         "import/resolver": {
-            "typescript": {},
+            "typescript": {
+                "alwaysTryTypes": true
+            },
             "node": {
-                "extensions": [".js", ".jsx", ".ts", ".tsx"]
+                "extensions": [".js", ".jsx", ".ts", ".tsx"],
+                "moduleDirectory": ["node_modules", "@types"]
             }
         }
     },
@@ -113,4 +116,4 @@
             }
         }
     ]
-  }
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9de266252..eb88cd612 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "next-react-svg": "^1.1.3",
         "next-seo": "^5.5.0",
         "next-sitemap": "^3.1.11",
+        "octokit": "^4.0.3",
         "react": "^18.3.1",
         "react-ace": "^11.0.1",
         "react-dom": "^18.3.1",
@@ -88,13 +89,13 @@
       }
     },
     "node_modules/@ai-sdk/azure": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/azure/-/azure-1.0.12.tgz",
-      "integrity": "sha512-1G2Imh1yoZFm4C/exic0hG/xV2DS39LWei2/DMOuzQ3Eby+eBtBCVRUdlXBbO2F4oef4XcAf56ajnPKfxYSUhA==",
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/azure/-/azure-1.0.16.tgz",
+      "integrity": "sha512-Yj9wqzoxzp11+OAwDsx8MWiEpp5rfkWYbkGk3+QzvbV431KrjK2JZ5KeP9rxPWg2R55W4bgXzky5dNYOJZr8FQ==",
       "dependencies": {
-        "@ai-sdk/openai": "1.0.10",
-        "@ai-sdk/provider": "1.0.2",
-        "@ai-sdk/provider-utils": "2.0.4"
+        "@ai-sdk/openai": "1.0.14",
+        "@ai-sdk/provider": "1.0.4",
+        "@ai-sdk/provider-utils": "2.0.6"
       },
       "engines": {
         "node": ">=18"
@@ -104,12 +105,12 @@
       }
     },
     "node_modules/@ai-sdk/openai": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.0.10.tgz",
-      "integrity": "sha512-ltZ1B/qSHvNiXngJBVY1GJD41/kvvi9QCQeuiEdf5utJnjRlR0MKNHzb3YRhJaLKFuGFrq1vAnxlSHGANY8R7A==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.0.14.tgz",
+      "integrity": "sha512-uyOkQNtYsHr4qyV7y0rmMAtdW4LTJoThYo1qXcvQa30RDh/MyvLEOjKYX181Siyp8LcTqYvwf6Tt+eckdVTTug==",
       "dependencies": {
-        "@ai-sdk/provider": "1.0.2",
-        "@ai-sdk/provider-utils": "2.0.4"
+        "@ai-sdk/provider": "1.0.4",
+        "@ai-sdk/provider-utils": "2.0.6"
       },
       "engines": {
         "node": ">=18"
@@ -119,9 +120,9 @@
       }
     },
     "node_modules/@ai-sdk/provider": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.0.2.tgz",
-      "integrity": "sha512-YYtP6xWQyaAf5LiWLJ+ycGTOeBLWrED7LUrvc+SQIWhGaneylqbaGsyQL7VouQUeQ4JZ1qKYZuhmi3W56HADPA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.0.4.tgz",
+      "integrity": "sha512-lJi5zwDosvvZER3e/pB8lj1MN3o3S7zJliQq56BRr4e9V3fcRyFtwP0JRxaRS5vHYX3OJ154VezVoQNrk0eaKw==",
       "dependencies": {
         "json-schema": "^0.4.0"
       },
@@ -130,11 +131,11 @@
       }
     },
     "node_modules/@ai-sdk/provider-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.0.4.tgz",
-      "integrity": "sha512-GMhcQCZbwM6RoZCri0MWeEWXRt/T+uCxsmHEsTwNvEH3GDjNzchfX25C8ftry2MeEOOn6KfqCLSKomcgK6RoOg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.0.6.tgz",
+      "integrity": "sha512-nB0rPwIBSCk0UkfdkprAxQ45ZjfKlk+Ts5zvIBQkJ5SnTCL9meg6bW65aomQrxhdvtqZML2jjaWTI8/l6AIVlQ==",
       "dependencies": {
-        "@ai-sdk/provider": "1.0.2",
+        "@ai-sdk/provider": "1.0.4",
         "eventsource-parser": "^3.0.0",
         "nanoid": "^3.3.8",
         "secure-json-parse": "^2.7.0"
@@ -1860,23 +1861,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -1964,20 +1948,20 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
-      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.8"
+        "@floating-ui/utils": "^0.2.9"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
       "dependencies": {
         "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.8"
+        "@floating-ui/utils": "^0.2.9"
       }
     },
     "node_modules/@floating-ui/react-dom": {
@@ -1993,9 +1977,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
     },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "4.1.3",
@@ -2923,23 +2907,23 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.1.tgz",
-      "integrity": "sha512-ldU8IpUqxa87LsWyMh8eIqAzejt8+ZuEsdtCV+fpDog++cBO5b/PWaI7wQQwun8LKJeFFpnY4kv/6r+/dCON6A=="
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.3.tgz",
+      "integrity": "sha512-Q1tXwQCGWyA3ehMph3VO+E6xFPHDKdHFYosadt0F78EObYxPio0S09H9UGYznDe6Wc8eLKLG89GqcFJJDiK5xw=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.1.1.tgz",
-      "integrity": "sha512-yACipsS2HI9ktcfz/1UsO0/sDbVjXWKDE/fzzMLnYES+K4KJyqHChyBQeaxiK7/NDnxrdk7Ow2i9LRm3ZTAWow==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.1.3.tgz",
+      "integrity": "sha512-oeP1vnc5Cq9UoOb8SYHAEPbCXMzOgG70l+Zfd+Ie00R25FOm+CCVNrcIubJvB1tvBgakXE37MmqSycksXVPRqg==",
       "dev": true,
       "dependencies": {
         "fast-glob": "3.3.1"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.1.tgz",
-      "integrity": "sha512-pq7Hzu0KaaH6UYcCQ22mOuj2mWCD6iqGvYprp/Ep1EcCxbdNOSS+8EJADFbPHsaXLkaonIJ8lTKBGWXaFxkeNQ==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.3.tgz",
+      "integrity": "sha512-aZtmIh8jU89DZahXQt1La0f2EMPt/i7W+rG1sLtYJERsP7GRnNFghsciFpQcKHcGh4dUiyTB5C1X3Dde/Gw8gg==",
       "cpu": [
         "arm64"
       ],
@@ -2952,9 +2936,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.1.tgz",
-      "integrity": "sha512-h567/b/AHAnMpaJ1D3l3jKLrzNOgN9bmDSRd+Gb0hXTkLZh8mE0Kd9MbIw39QeTZQJ3192uFRFWlDjWiifwVhQ==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.3.tgz",
+      "integrity": "sha512-aw8901rjkVBK5mbq5oV32IqkJg+CQa6aULNlN8zyCWSsePzEG3kpDkAFkkTOh3eJ0p95KbkLyWBzslQKamXsLA==",
       "cpu": [
         "x64"
       ],
@@ -2967,9 +2951,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.1.tgz",
-      "integrity": "sha512-I5Q6M3T9jzTUM2JlwTBy/VBSX+YCDvPLnSaJX5wE5GEPeaJkipMkvTA9+IiFK5PG5ljXTqVFVUj5BSHiYLCpoQ==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.3.tgz",
+      "integrity": "sha512-YbdaYjyHa4fPK4GR4k2XgXV0p8vbU1SZh7vv6El4bl9N+ZSiMfbmqCuCuNU1Z4ebJMumafaz6UCC2zaJCsdzjw==",
       "cpu": [
         "arm64"
       ],
@@ -2982,9 +2966,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.1.tgz",
-      "integrity": "sha512-4cPMSYmyXlOAk8U04ouEACEGnOwYM9uJOXZnm9GBXIKRbNEvBOH9OePhHiDWqOws6iaHvGayaKr+76LmM41yJA==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.3.tgz",
+      "integrity": "sha512-qgH/aRj2xcr4BouwKG3XdqNu33SDadqbkqB6KaZZkozar857upxKakbRllpqZgWl/NDeSCBYPmUAZPBHZpbA0w==",
       "cpu": [
         "arm64"
       ],
@@ -2997,9 +2981,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.1.tgz",
-      "integrity": "sha512-KgIiKDdV35KwL9TrTxPFGsPb3J5RuDpw828z3MwMQbWaOmpp/T4MeWQCwo+J2aOxsyAcfsNE334kaWXCb6YTTA==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.3.tgz",
+      "integrity": "sha512-uzafnTFwZCPN499fNVnS2xFME8WLC9y7PLRs/yqz5lz1X/ySoxfaK2Hbz74zYUdEg+iDZPd8KlsWaw9HKkLEVw==",
       "cpu": [
         "x64"
       ],
@@ -3012,9 +2996,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.1.tgz",
-      "integrity": "sha512-aHP/29x8loFhB3WuW2YaWaYFJN389t6/SBsug19aNwH+PRLzDEQfCvtuP6NxRCido9OAoExd+ZuYJKF9my1Kpg==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.3.tgz",
+      "integrity": "sha512-el6GUFi4SiDYnMTTlJJFMU+GHvw0UIFnffP1qhurrN1qJV3BqaSRUjkDUgVV44T6zpw1Lc6u+yn0puDKHs+Sbw==",
       "cpu": [
         "x64"
       ],
@@ -3027,9 +3011,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.1.tgz",
-      "integrity": "sha512-klbzXYwqHMwiucNFF0tWiWJyPb45MBX1q/ATmxrMjEYgA+V/0OXc9KmNVRIn6G/ab0ASUk4uWqxik5m6wvm1sg==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.3.tgz",
+      "integrity": "sha512-6RxKjvnvVMM89giYGI1qye9ODsBQpHSHVo8vqA8xGhmRPZHDQUE4jcDbhBwK0GnFMqBnu+XMg3nYukNkmLOLWw==",
       "cpu": [
         "arm64"
       ],
@@ -3042,9 +3026,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.1.tgz",
-      "integrity": "sha512-V5fm4aULqHSlMQt3U1rWAWuwJTFsb6Yh4P8p1kQFoayAF9jAQtjBvHku4zCdrtQuw9u9crPC0FNML00kN4WGhA==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.3.tgz",
+      "integrity": "sha512-VId/f5blObG7IodwC5Grf+aYP0O8Saz1/aeU3YcWqNdIUAmFQY3VEPKPaIzfv32F/clvanOb2K2BR5DtDs6XyQ==",
       "cpu": [
         "x64"
       ],
@@ -3097,6 +3081,85 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@octokit/app": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/app/-/app-15.1.1.tgz",
+      "integrity": "sha512-fk8xrCSPTJGpyBdBNI+DcZ224dm0aApv4vi6X7/zTmANXlegKV2Td+dJ+fd7APPaPN7R+xttUsj2Fm+AFDSfMQ==",
+      "dependencies": {
+        "@octokit/auth-app": "^7.0.0",
+        "@octokit/auth-unauthenticated": "^6.0.0",
+        "@octokit/core": "^6.1.2",
+        "@octokit/oauth-app": "^7.0.0",
+        "@octokit/plugin-paginate-rest": "^11.0.0",
+        "@octokit/types": "^13.0.0",
+        "@octokit/webhooks": "^13.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/auth-app": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-app/-/auth-app-7.1.3.tgz",
+      "integrity": "sha512-GZdkOp2kZTIy5dG9oXqvzUAZiPvDx4C/lMlN6yQjtG9d/+hYa7W8WXTJoOrXE8UdfL9A/sZMl206dmtkl9lwVQ==",
+      "dependencies": {
+        "@octokit/auth-oauth-app": "^8.1.0",
+        "@octokit/auth-oauth-user": "^5.1.0",
+        "@octokit/request": "^9.1.1",
+        "@octokit/request-error": "^6.1.1",
+        "@octokit/types": "^13.4.1",
+        "toad-cache": "^3.7.0",
+        "universal-github-app-jwt": "^2.2.0",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/auth-oauth-app": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-oauth-app/-/auth-oauth-app-8.1.2.tgz",
+      "integrity": "sha512-3woNZgq5/S6RS+9ZTq+JdymxVr7E0s4EYxF20ugQvgX3pomdPUL5r/XdTY9wALoBM2eHVy4ettr5fKpatyTyHw==",
+      "dependencies": {
+        "@octokit/auth-oauth-device": "^7.1.2",
+        "@octokit/auth-oauth-user": "^5.1.2",
+        "@octokit/request": "^9.1.4",
+        "@octokit/types": "^13.6.2",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/auth-oauth-device": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-oauth-device/-/auth-oauth-device-7.1.2.tgz",
+      "integrity": "sha512-gTOIzDeV36OhVfxCl69FmvJix7tJIiU6dlxuzLVAzle7fYfO8UDyddr9B+o4CFQVaMBLMGZ9ak2CWMYcGeZnPw==",
+      "dependencies": {
+        "@octokit/oauth-methods": "^5.1.3",
+        "@octokit/request": "^9.1.4",
+        "@octokit/types": "^13.6.2",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/auth-oauth-user": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-oauth-user/-/auth-oauth-user-5.1.2.tgz",
+      "integrity": "sha512-PgVDDPJgZYb3qSEXK4moksA23tfn68zwSAsQKZ1uH6IV9IaNEYx35OXXI80STQaLYnmEE86AgU0tC1YkM4WjsA==",
+      "dependencies": {
+        "@octokit/auth-oauth-device": "^7.1.2",
+        "@octokit/oauth-methods": "^5.1.2",
+        "@octokit/request": "^9.1.4",
+        "@octokit/types": "^13.6.2",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@octokit/auth-token": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.1.tgz",
@@ -3105,16 +3168,28 @@
         "node": ">= 18"
       }
     },
+    "node_modules/@octokit/auth-unauthenticated": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-unauthenticated/-/auth-unauthenticated-6.1.0.tgz",
+      "integrity": "sha512-zPSmfrUAcspZH/lOFQnVnvjQZsIvmfApQH6GzJrkIunDooU1Su2qt2FfMTSVPRp7WLTQyC20Kd55lF+mIYaohQ==",
+      "dependencies": {
+        "@octokit/request-error": "^6.0.1",
+        "@octokit/types": "^13.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@octokit/core": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz",
-      "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.3.tgz",
+      "integrity": "sha512-z+j7DixNnfpdToYsOutStDgeRzJSMnbj8T1C/oQjB6Aa+kRfNjs/Fn7W6c8bmlt6mfy3FkgeKBRnDjxQow5dow==",
       "dependencies": {
         "@octokit/auth-token": "^5.0.0",
-        "@octokit/graphql": "^8.0.0",
-        "@octokit/request": "^9.0.0",
-        "@octokit/request-error": "^6.0.1",
-        "@octokit/types": "^13.0.0",
+        "@octokit/graphql": "^8.1.2",
+        "@octokit/request": "^9.1.4",
+        "@octokit/request-error": "^6.1.6",
+        "@octokit/types": "^13.6.2",
         "before-after-hook": "^3.0.2",
         "universal-user-agent": "^7.0.0"
       },
@@ -3147,11 +3222,67 @@
         "node": ">= 18"
       }
     },
+    "node_modules/@octokit/oauth-app": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/@octokit/oauth-app/-/oauth-app-7.1.4.tgz",
+      "integrity": "sha512-Au4zSGsWOZtShLxVUXcZ9TZJVQjpEK/OW2L1SWLE030QVYaZ+69TP4vHBdXakZUifvOELD1VBYEY6eprPcY2Mg==",
+      "dependencies": {
+        "@octokit/auth-oauth-app": "^8.0.0",
+        "@octokit/auth-oauth-user": "^5.0.1",
+        "@octokit/auth-unauthenticated": "^6.0.0",
+        "@octokit/core": "^6.1.2",
+        "@octokit/oauth-authorization-url": "^7.0.0",
+        "@octokit/oauth-methods": "^5.0.0",
+        "@types/aws-lambda": "^8.10.83",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/oauth-authorization-url": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/oauth-authorization-url/-/oauth-authorization-url-7.1.1.tgz",
+      "integrity": "sha512-ooXV8GBSabSWyhLUowlMIVd9l1s2nsOGQdlP2SQ4LnkEsGXzeCvbSbCPdZThXhEFzleGPwbapT0Sb+YhXRyjCA==",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/oauth-methods": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@octokit/oauth-methods/-/oauth-methods-5.1.3.tgz",
+      "integrity": "sha512-M+bDBi5H8FnH0xhCTg0m9hvcnppdDnxUqbZyOkxlLblKpLAR+eT2nbDPvJDp0eLrvJWA1I8OX0KHf/sBMQARRA==",
+      "dependencies": {
+        "@octokit/oauth-authorization-url": "^7.0.0",
+        "@octokit/request": "^9.1.4",
+        "@octokit/request-error": "^6.1.6",
+        "@octokit/types": "^13.6.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@octokit/openapi-types": {
       "version": "22.2.0",
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
       "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg=="
     },
+    "node_modules/@octokit/openapi-webhooks-types": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-webhooks-types/-/openapi-webhooks-types-8.5.1.tgz",
+      "integrity": "sha512-i3h1b5zpGSB39ffBbYdSGuAd0NhBAwPyA3QV3LYi/lx4lsbZiu7u2UHgXVUR6EpvOI8REOuVh1DZTRfHoJDvuQ=="
+    },
+    "node_modules/@octokit/plugin-paginate-graphql": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-graphql/-/plugin-paginate-graphql-5.2.4.tgz",
+      "integrity": "sha512-pLZES1jWaOynXKHOqdnwZ5ULeVR6tVVCMm+AUbp0htdcyXDU95WbkYdU4R2ej1wKj5Tu94Mee2Ne0PjPO9cCyA==",
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=6"
+      }
+    },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "11.3.6",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.6.tgz",
@@ -3191,6 +3322,37 @@
         "@octokit/core": ">=6"
       }
     },
+    "node_modules/@octokit/plugin-retry": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-retry/-/plugin-retry-7.1.3.tgz",
+      "integrity": "sha512-8nKOXvYWnzv89gSyIvgFHmCBAxfQAOPRlkacUHL9r5oWtp5Whxl8Skb2n3ACZd+X6cYijD6uvmrQuPH/UCL5zQ==",
+      "dependencies": {
+        "@octokit/request-error": "^6.1.6",
+        "@octokit/types": "^13.6.2",
+        "bottleneck": "^2.15.3"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=6"
+      }
+    },
+    "node_modules/@octokit/plugin-throttling": {
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-throttling/-/plugin-throttling-9.3.3.tgz",
+      "integrity": "sha512-UlBQ8T7kGzW471PUi0vi3rtXnAfp6sg5Gb13Y9YjKfjcMS1EHr4fLebqGJQo9Iw1ZHSLywg5oC0Oyu2QbNTTHw==",
+      "dependencies": {
+        "@octokit/types": "^13.6.2",
+        "bottleneck": "^2.15.3"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "^6.0.0"
+      }
+    },
     "node_modules/@octokit/request": {
       "version": "9.1.4",
       "resolved": "https://registry.npmjs.org/@octokit/request/-/request-9.1.4.tgz",
@@ -3239,6 +3401,27 @@
         "@octokit/openapi-types": "^22.2.0"
       }
     },
+    "node_modules/@octokit/webhooks": {
+      "version": "13.4.1",
+      "resolved": "https://registry.npmjs.org/@octokit/webhooks/-/webhooks-13.4.1.tgz",
+      "integrity": "sha512-I5YPUtfWidh+OzyrlDahJsUpkpGK0kCTmDRbuqGmlCUzOtxdEkX3R4d6Cd08ijQYwkVXQJanPdbKuZBeV2NMaA==",
+      "dependencies": {
+        "@octokit/openapi-webhooks-types": "8.5.1",
+        "@octokit/request-error": "^6.0.1",
+        "@octokit/webhooks-methods": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/webhooks-methods": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/webhooks-methods/-/webhooks-methods-5.1.0.tgz",
+      "integrity": "sha512-yFZa3UH11VIxYnnoOYCVoJ3q4ChuSOk2IVBBQ0O3xtKX4x9bmKb/1t+Mxixv2iUhzMdOl1qeWJqEhouXXzB3rQ==",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@panva/hkdf": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
@@ -5159,9 +5342,9 @@
       "dev": true
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
-      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.5.tgz",
+      "integrity": "sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==",
       "dev": true
     },
     "node_modules/@sinclair/typebox": {
@@ -5478,9 +5661,9 @@
       }
     },
     "node_modules/@tailwindcss/typography": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
-      "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
       "dev": true,
       "dependencies": {
         "lodash.castarray": "^4.4.0",
@@ -5489,7 +5672,7 @@
         "postcss-selector-parser": "6.0.10"
       },
       "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
       }
     },
     "node_modules/@trysound/sax": {
@@ -5501,6 +5684,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/aws-lambda": {
+      "version": "8.10.147",
+      "resolved": "https://registry.npmjs.org/@types/aws-lambda/-/aws-lambda-8.10.147.tgz",
+      "integrity": "sha512-nD0Z9fNIZcxYX5Mai2CTmFD7wX7UldCkW2ezCF8D1T5hdiLsnTWDGRpfRYntU6VjTdLQjOvyszru7I1c1oCQew=="
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -5723,9 +5911,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "18.19.68",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.68.tgz",
-      "integrity": "sha512-QGtpFH1vB99ZmTa63K4/FU8twThj4fuVSBkGddTp7uIL/cuoLWIUSL2RcOaigBhfR+hg5pgGkBnkoOxrTVBMKw==",
+      "version": "18.19.70",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.70.tgz",
+      "integrity": "sha512-RE+K0+KZoEpDUbGGctnGdkrLFwi1eYKTlIHNl2Um98mUkGsm1u2Ff6Ltd0e8DktTtC98uy7rSj+hO8t/QuLoVQ==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -5747,9 +5935,9 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.3.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.17.tgz",
-      "integrity": "sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==",
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -6383,9 +6571,9 @@
       }
     },
     "node_modules/ace-builds": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.37.0.tgz",
-      "integrity": "sha512-OzYp9YXOIY25jar1y27qIalmvMAW5ePAJbywC47l/Whte+/eDpjcDAKCGowW72C7Q405doSjycm9jSeTGgLF9g=="
+      "version": "1.37.3",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.37.3.tgz",
+      "integrity": "sha512-LXMNR57LGyUaJZoAXqVuy6x/ipQvj62iKUHv0DlOb57DNRiV3ZIvYNTVeBHCkUeQAc3BBmyLWC2uvMixSbhj9Q=="
     },
     "node_modules/acorn": {
       "version": "8.14.0",
@@ -6626,12 +6814,12 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7206,6 +7394,11 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bottleneck": {
+      "version": "2.19.5",
+      "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz",
+      "integrity": "sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7387,9 +7580,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001689",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz",
-      "integrity": "sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==",
+      "version": "1.0.30001690",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
+      "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
       "funding": [
         {
           "type": "opencollective",
@@ -7992,13 +8185,13 @@
       }
     },
     "node_modules/data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8008,27 +8201,27 @@
       }
     },
     "node_modules/data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/inspect-js"
       }
     },
     "node_modules/data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
         "is-data-view": "^1.0.1"
       },
@@ -8361,9 +8554,9 @@
       }
     },
     "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
       "dev": true,
       "dependencies": {
         "dom-serializer": "^2.0.0",
@@ -8442,9 +8635,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.74",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz",
-      "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw=="
+      "version": "1.5.78",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.78.tgz",
+      "integrity": "sha512-UmwIt7HRKN1rsJfddG5UG7rCTCTAKoS9JeOy/R0zSenAyaZ8SU3RuXlwcratxhdxGRNpk03iq8O7BA3W7ibLVw=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -8480,9 +8673,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
+      "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -8512,26 +8705,27 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.6",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.6.tgz",
-      "integrity": "sha512-Ifco6n3yj2tMZDWNLyloZrytt9lqqlwvS83P3HtaETR0NUOYnIULGGHpktqYGObGy+8wc1okO25p8TjemhImvA==",
+      "version": "1.23.9",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
+      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
+        "array-buffer-byte-length": "^1.0.2",
         "arraybuffer.prototype.slice": "^1.0.4",
         "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.8",
         "call-bound": "^1.0.3",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.0.3",
+        "es-set-tostringtag": "^2.1.0",
         "es-to-primitive": "^1.3.0",
-        "function.prototype.name": "^1.1.7",
-        "get-intrinsic": "^1.2.6",
-        "get-symbol-description": "^1.0.2",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.0",
+        "get-symbol-description": "^1.1.0",
         "globalthis": "^1.0.4",
         "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
@@ -8539,31 +8733,33 @@
         "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
         "internal-slot": "^1.1.0",
-        "is-array-buffer": "^3.0.4",
+        "is-array-buffer": "^3.0.5",
         "is-callable": "^1.2.7",
         "is-data-view": "^1.0.2",
-        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.2.1",
-        "is-shared-array-buffer": "^1.0.3",
+        "is-shared-array-buffer": "^1.0.4",
         "is-string": "^1.1.1",
-        "is-typed-array": "^1.1.13",
+        "is-typed-array": "^1.1.15",
         "is-weakref": "^1.1.0",
-        "math-intrinsics": "^1.0.0",
+        "math-intrinsics": "^1.1.0",
         "object-inspect": "^1.13.3",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
         "regexp.prototype.flags": "^1.5.3",
         "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
         "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
         "string.prototype.trim": "^1.2.10",
         "string.prototype.trimend": "^1.0.9",
         "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.3",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
         "typed-array-length": "^1.0.7",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.16"
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.18"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8589,35 +8785,36 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz",
-      "integrity": "sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
+        "get-intrinsic": "^1.2.6",
         "globalthis": "^1.0.4",
-        "gopd": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.3",
-        "safe-array-concat": "^1.1.2"
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
+      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
       "peer": true
     },
     "node_modules/es-object-atoms": {
@@ -8632,13 +8829,14 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "dependencies": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8806,12 +9004,12 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.1.1.tgz",
-      "integrity": "sha512-St2CvkRaqwbEXot9XdivAqeznlZt5bACFyOy821k67SVJEgw4ansmrwhtlFUTRdYGmgmqapFKy4RN2yz/znHcg==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.1.3.tgz",
+      "integrity": "sha512-wGYlNuWnh4ujuKtZvH+7B2Z2vy9nONZE6ztd+DKF7hAsIabkrxmD4TzYHzASHENo42lmz2tnT2B+zN2sOHvpJg==",
       "dev": true,
       "dependencies": {
-        "@next/eslint-plugin-next": "15.1.1",
+        "@next/eslint-plugin-next": "15.1.3",
         "@rushstack/eslint-patch": "^1.10.3",
         "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
@@ -8880,16 +9078,16 @@
       }
     },
     "node_modules/eslint-config-next/node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
@@ -9090,28 +9288,28 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.37.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
-      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
+      "version": "7.37.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz",
+      "integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.3",
         "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.1.0",
+        "es-iterator-helpers": "^1.2.1",
         "estraverse": "^5.3.0",
         "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
         "object.entries": "^1.1.8",
         "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.0",
+        "object.values": "^1.2.1",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.matchall": "^4.0.12",
         "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
@@ -9471,9 +9669,19 @@
       ]
     },
     "node_modules/fast-content-type-parse": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fast-content-type-parse/-/fast-content-type-parse-2.0.0.tgz",
-      "integrity": "sha512-fCqg/6Sps8tqk8p+kqyKqYfOF0VjPNYrqpLiqNl0RBKmD80B080AJWVV6EkSkscjToNExcXg1+Mfzftrx6+iSA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-content-type-parse/-/fast-content-type-parse-2.0.1.tgz",
+      "integrity": "sha512-nGqtvLrj5w0naR6tDPfB4cUmYCqouzyQiz6C5y/LtcDllJdrcc6WaWW6iXyIIOErTa/XRybj28aasdn4LkVk6Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ]
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -9529,14 +9737,24 @@
       "dev": true
     },
     "node_modules/fast-uri": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
-      "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw=="
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.5.tgz",
+      "integrity": "sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ]
     },
     "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -9791,6 +10009,32 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.16.0.tgz",
+      "integrity": "sha512-oL2AWqLQuw0+CNEUa0sz3mWC/n3i147CckvpQn8bLRs30b+HxTxlRi0YR2FpHHhAbWV7DKjNdHU42KHLfBWh/g==",
+      "dependencies": {
+        "motion-dom": "^11.16.0",
+        "motion-utils": "^11.16.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -9848,11 +10092,12 @@
       }
     },
     "node_modules/function.prototype.name": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.7.tgz",
-      "integrity": "sha512-2g4x+HqTJKM9zcJqBSpjoRmdcPFtJM60J3xJisTQSXBWka5XqyBN/2tNUgma1mztTXyDuUsEtYe5qcs7xYzYQA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
       "dependencies": {
         "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "functions-have-names": "^1.2.3",
         "hasown": "^2.0.2",
@@ -9891,20 +10136,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
-      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
+      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
-        "dunder-proto": "^1.0.0",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
         "function-bind": "^1.1.2",
+        "get-proto": "^1.0.0",
         "gopd": "^1.2.0",
         "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "math-intrinsics": "^1.0.0"
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9935,6 +10180,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -10414,11 +10671,14 @@
       "dev": true
     },
     "node_modules/is-async-function": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
-      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.0.tgz",
+      "integrity": "sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10500,9 +10760,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.0.tgz",
-      "integrity": "sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -10596,11 +10856,14 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10636,17 +10899,6 @@
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
       "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
     },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -10971,16 +11223,16 @@
       }
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.4.tgz",
-      "integrity": "sha512-x4WH0BWmrMmg4oHHl+duwubhrvczGlyuGAZu3nvrf0UXOfPu8IhZObFEr7DE/iv01YgVZrsOiRcqw2srkKEDIA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
       "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-object-atoms": "^1.0.0",
         "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
         "has-symbols": "^1.1.0",
-        "reflect.getprototypeof": "^1.0.8",
         "set-function-name": "^2.0.2"
       },
       "engines": {
@@ -12201,9 +12453,9 @@
       }
     },
     "node_modules/math-intrinsics": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.0.0.tgz",
-      "integrity": "sha512-4MqMiKP90ybymYvsut0CH2g4XWbfLtmlCkXmtmdcDCxNB+mQcu1w/1+L/VD7vi/PSv7X2JYV7SCcR+jiPXnQtA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
       "engines": {
         "node": ">= 0.4"
       }
@@ -12349,17 +12601,17 @@
       }
     },
     "node_modules/motion": {
-      "version": "11.13.3",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-11.13.3.tgz",
-      "integrity": "sha512-7WCtns1245mdDRpm50PpIGrRySmIfXDFDmWJtVO+zoevwGTOR4gw3irsA7TIdJzbBKptDaZ26Fk2c4v4z/Da/g==",
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.16.0.tgz",
+      "integrity": "sha512-d7EhBRFFBm6Ee6Q81Od45KOr3feA7UL/eAL+OKNZmf6rQJEwiXfvc/nkM522Ahiuvole1/8rNQyOX8JHKr8QoQ==",
       "dependencies": {
-        "framer-motion": "^11.13.3",
+        "framer-motion": "^11.16.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
         "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@emotion/is-prop-valid": {
@@ -12374,41 +12626,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "11.13.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
-      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
-    },
-    "node_modules/motion-utils": {
-      "version": "11.13.0",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
-      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
-    },
-    "node_modules/motion/node_modules/framer-motion": {
-      "version": "11.13.3",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.3.tgz",
-      "integrity": "sha512-3ZSNuYpDFeNxqVKUyYipOm5A1fXSbMje1XIfEWxKTJ4ughl5FEjvkp6gKmFHLjzwijCVU/PjsMNlTMVCmi+Twg==",
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.0.tgz",
+      "integrity": "sha512-4bmEwajSdrljzDAYpu6ceEdtI4J5PH25fmN8YSx7Qxk6OMrC10CXM0D5y+VO/pFZjhmCvm2bGf7Rus482kwhzA==",
       "dependencies": {
-        "motion-dom": "^11.13.0",
-        "motion-utils": "^11.13.0",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
+        "motion-utils": "^11.16.0"
       }
     },
+    "node_modules/motion-utils": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
+      "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -12468,11 +12697,11 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.1.tgz",
-      "integrity": "sha512-SBZlcvdIxajw8//H3uOR1G3iu3jxsra/77m2ulRIxi3m89p+s3ACsoOXR49JEAbaun/DVoRJ9cPKq8eF/oNB5g==",
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.1.3.tgz",
+      "integrity": "sha512-5igmb8N8AEhWDYzogcJvtcRDU6n4cMGtBklxKD4biYv4LXN8+awc/bbQ2IM2NQHdVPgJ6XumYXfo3hBtErg1DA==",
       "dependencies": {
-        "@next/env": "15.1.1",
+        "@next/env": "15.1.3",
         "@swc/counter": "0.1.3",
         "@swc/helpers": "0.5.15",
         "busboy": "1.6.0",
@@ -12487,14 +12716,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.1.1",
-        "@next/swc-darwin-x64": "15.1.1",
-        "@next/swc-linux-arm64-gnu": "15.1.1",
-        "@next/swc-linux-arm64-musl": "15.1.1",
-        "@next/swc-linux-x64-gnu": "15.1.1",
-        "@next/swc-linux-x64-musl": "15.1.1",
-        "@next/swc-win32-arm64-msvc": "15.1.1",
-        "@next/swc-win32-x64-msvc": "15.1.1",
+        "@next/swc-darwin-arm64": "15.1.3",
+        "@next/swc-darwin-x64": "15.1.3",
+        "@next/swc-linux-arm64-gnu": "15.1.3",
+        "@next/swc-linux-arm64-musl": "15.1.3",
+        "@next/swc-linux-x64-gnu": "15.1.3",
+        "@next/swc-linux-x64-musl": "15.1.3",
+        "@next/swc-win32-arm64-msvc": "15.1.3",
+        "@next/swc-win32-x64-msvc": "15.1.3",
         "sharp": "^0.33.5"
       },
       "peerDependencies": {
@@ -12813,12 +13042,13 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
@@ -12829,6 +13059,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/octokit": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/octokit/-/octokit-4.0.3.tgz",
+      "integrity": "sha512-kfqH80Yuuux4fLbZ4SvObjCvVu89U0eCh5+fulh6tr/hJkDYS1inXDGnNJDOp312GANMEhWWMLYmjQR8MvSSMQ==",
+      "dependencies": {
+        "@octokit/app": "^15.1.1",
+        "@octokit/core": "^6.0.0",
+        "@octokit/oauth-app": "^7.0.0",
+        "@octokit/plugin-paginate-graphql": "^5.0.0",
+        "@octokit/plugin-paginate-rest": "^11.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "^13.0.0",
+        "@octokit/plugin-retry": "^7.0.0",
+        "@octokit/plugin-throttling": "^9.0.0",
+        "@octokit/request-error": "^6.0.0",
+        "@octokit/types": "^13.6.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/oidc-token-hash": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
@@ -12918,6 +13168,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -13383,9 +13649,9 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
-      "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -13448,9 +13714,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/preact": {
-      "version": "10.25.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.3.tgz",
-      "integrity": "sha512-dzQmIFtM970z+fP9ziQ3yG4e3ULIbwZzJ734vaMVUTaKQ2+Ru1Ou/gjshOYVHCcd1rpAelC6ngjvjDXph98unQ==",
+      "version": "10.25.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz",
+      "integrity": "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -13835,9 +14101,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.54.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.1.tgz",
-      "integrity": "sha512-PUNzFwQeQ5oHiiTUO7GO/EJXGEtuun2Y1A59rLnZBBj+vNEOWt/3ERTiG1/zt7dVeJEM+4vDX/7XQ/qanuvPMg==",
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
       "engines": {
         "node": ">=18.0.0"
       },
@@ -13961,17 +14227,17 @@
       }
     },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz",
-      "integrity": "sha512-r0Ay04Snci87djAsI4U+WNRcSw5S4pOH7qFjd/veA5gC7TbqESR3tcj28ia95L/fYUDw11JKP7uqUKUAfVvV5Q==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
       "dependencies": {
         "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "dunder-proto": "^1.0.1",
-        "es-abstract": "^1.23.6",
+        "es-abstract": "^1.23.9",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "gopd": "^1.2.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
         "which-builtin-type": "^1.2.1"
       },
       "engines": {
@@ -14011,13 +14277,15 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
-      "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
         "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "set-function-name": "^2.0.2"
       },
       "engines": {
@@ -14149,9 +14417,9 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.9",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.9.tgz",
-      "integrity": "sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==",
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
       "dependencies": {
         "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
@@ -14160,6 +14428,9 @@
       "bin": {
         "resolve": "bin/resolve"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -14385,6 +14656,21 @@
         }
       ]
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
@@ -14514,18 +14800,18 @@
       }
     },
     "node_modules/seroval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.1.1.tgz",
-      "integrity": "sha512-rqEO6FZk8mv7Hyv4UCj3FD3b6Waqft605TLfsCe/BiaylRpyyMC0b+uA5TJKawX3KzMrdi3wsLbCaLplrQmBvQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.2.0.tgz",
+      "integrity": "sha512-GURoU99ko2UiAgUC3qDCk59Jb3Ss4Po8VIMGkG8j5PFo2Q7y0YSMP8QG9NuL/fJCoTz9V1XZUbpNIMXPOfaGpA==",
       "peer": true,
       "engines": {
         "node": ">=10"
       }
     },
     "node_modules/seroval-plugins": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.1.1.tgz",
-      "integrity": "sha512-qNSy1+nUj7hsCOon7AO4wdAIo9P0jrzAMp18XhiOzA6/uO5TKtP7ScozVJ8T293oRIvi5wyCHSM4TrJo/c/GJA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.2.0.tgz",
+      "integrity": "sha512-hULTbfzSe81jGWLH8TAJjkEvw6JWMqOo9Uq+4V4vg+HNq53hyHldM9ZOfjdzokcFysiTp9aFdV2vJpZFqKeDjQ==",
       "peer": true,
       "engines": {
         "node": ">=10"
@@ -14578,6 +14864,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -15066,22 +15365,23 @@
       }
     },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
-      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "regexp.prototype.flags": "^1.5.2",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
         "set-function-name": "^2.0.2",
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -15531,9 +15831,9 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
-      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -15584,15 +15884,15 @@
       }
     },
     "node_modules/tailwindcss/node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
@@ -15903,6 +16203,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toad-cache": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/toad-cache/-/toad-cache-3.7.0.tgz",
+      "integrity": "sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -16153,17 +16461,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz",
-      "integrity": "sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13",
-        "reflect.getprototypeof": "^1.0.6"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16273,6 +16581,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/universal-github-app-jwt": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/universal-github-app-jwt/-/universal-github-app-jwt-2.2.0.tgz",
+      "integrity": "sha512-G5o6f95b5BggDGuUfKDApKaCgNYy2x7OdHY0zSMF081O0EJobw+1130VONhrA7ezGSV2FNOGyM+KQpQZAr9bIQ=="
+    },
     "node_modules/universal-user-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.2.tgz",
diff --git a/package.json b/package.json
index ab9172c98..ce357a49c 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "next-react-svg": "^1.1.3",
     "next-seo": "^5.5.0",
     "next-sitemap": "^3.1.11",
+    "octokit": "^4.0.3",
     "react": "^18.3.1",
     "react-ace": "^11.0.1",
     "react-dom": "^18.3.1",
diff --git a/src/assets/css/font-awesome-pro.min.css b/src/assets/css/font-awesome-pro.min.css
index 9d2202483..362800c74 100644
--- a/src/assets/css/font-awesome-pro.min.css
+++ b/src/assets/css/font-awesome-pro.min.css
@@ -6986,7 +6986,8 @@
     font-weight: normal;
     font-display: swap;
     src: url("/fonts/fontAwesomePro/fa-brands-400.woff2");
-    src: url("/fonts/fontAwesomePro/fa-brands-400.woff2") format("woff2"),
+    src:
+        url("/fonts/fontAwesomePro/fa-brands-400.woff2") format("woff2"),
         url("/fonts/fontAwesomePro/fa-brands-400.woff") format("woff");
 }
 .fab {
@@ -6998,7 +6999,8 @@
     font-weight: 900;
     font-display: swap;
     src: url("/fonts/fontAwesomePro/fa-duotone-900.woff2");
-    src: url("/fonts/fontAwesomePro/fa-duotone-900.woff2") format("woff2"),
+    src:
+        url("/fonts/fontAwesomePro/fa-duotone-900.woff2") format("woff2"),
         url("/fonts/fontAwesomePro/fa-duotone-900.woff") format("woff");
 }
 .fad {
@@ -12497,7 +12499,8 @@
     font-weight: 300;
     font-display: swap;
     src: url("/fonts/fontAwesomePro/fa-light-300.woff2");
-    src: url("/fonts/fontAwesomePro/fa-light-300.woff2") format("woff2"),
+    src:
+        url("/fonts/fontAwesomePro/fa-light-300.woff2") format("woff2"),
         url("/fonts/fontAwesomePro/fa-light-300.woff") format("woff");
 }
 .fal {
@@ -12509,7 +12512,8 @@
     font-weight: 400;
     font-display: swap;
     src: url("/fonts/fontAwesomePro/fa-regular-400.woff2");
-    src: url("/fonts/fontAwesomePro/fa-regular-400.woff2") format("woff2"),
+    src:
+        url("/fonts/fontAwesomePro/fa-regular-400.woff2") format("woff2"),
         url("/fonts/fontAwesomePro/fa-regular-400.woff") format("woff");
 }
 .fal,
@@ -12525,7 +12529,8 @@
     font-weight: 900;
     font-display: swap;
     src: url("/fonts/fontAwesomePro/fa-solid-900.woff2");
-    src: url("/fonts/fontAwesomePro/fa-solid-900.woff2") format("woff2"),
+    src:
+        url("/fonts/fontAwesomePro/fa-solid-900.woff2") format("woff2"),
         url("/fonts/fontAwesomePro/fa-solid-900.woff") format("woff");
 }
 .fa,
diff --git a/src/assets/css/font-linea.css b/src/assets/css/font-linea.css
index 93adee2c4..99a85fee0 100644
--- a/src/assets/css/font-linea.css
+++ b/src/assets/css/font-linea.css
@@ -3,7 +3,8 @@
 @font-face {
     font-family: "linea-weather-10";
     src: url("/fonts/linea/linea-weather-10.woff2");
-    src: url("/fonts/linea/linea-weather-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-weather-10.woff2") format("woff2"),
         url("/fonts/linea/linea-weather-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -13,7 +14,8 @@
 @font-face {
     font-family: "linea-software-10";
     src: url("/fonts/linea/linea-software-10.woff2");
-    src: url("/fonts/linea/linea-software-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-software-10.woff2") format("woff2"),
         url("/fonts/linea/linea-software-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -23,7 +25,8 @@
 @font-face {
     font-family: "linea-music-10";
     src: url("/fonts/linea/linea-music-10.woff2");
-    src: url("/fonts/linea/linea-music-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-music-10.woff2") format("woff2"),
         url("/fonts/linea/linea-music-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -33,7 +36,8 @@
 @font-face {
     font-family: "linea-ecommerce-10";
     src: url("/fonts/linea/linea-ecommerce-10.woff2");
-    src: url("/fonts/linea/linea-ecommerce-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-ecommerce-10.woff2") format("woff2"),
         url("/fonts/linea/linea-ecommerce-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -43,7 +47,8 @@
 @font-face {
     font-family: "linea-basic-10";
     src: url("/fonts/linea/linea-basic-10.woff2");
-    src: url("/fonts/linea/linea-basic-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-basic-10.woff2") format("woff2"),
         url("/fonts/linea/linea-basic-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -53,7 +58,8 @@
 @font-face {
     font-family: "linea-basic-elaboration-10";
     src: url("/fonts/linea/linea-basic-elaboration-10.woff2");
-    src: url("/fonts/linea/linea-basic-elaboration-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-basic-elaboration-10.woff2") format("woff2"),
         url("/fonts/linea/linea-basic-elaboration-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
@@ -63,7 +69,8 @@
 @font-face {
     font-family: "linea-arrows-10";
     src: url("/fonts/linea/linea-arrows-10.woff2");
-    src: url("/fonts/linea/linea-arrows-10.woff2") format("woff2"),
+    src:
+        url("/fonts/linea/linea-arrows-10.woff2") format("woff2"),
         url("/fonts/linea/linea-arrows-10.woff") format("woff");
     font-weight: normal;
     font-style: normal;
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css
index f06bfd5b4..f54b17205 100644
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -6,7 +6,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Regular.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Regular.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Regular.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Regular.woff") format("woff");
 }
 
@@ -16,7 +18,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Thin.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Thin.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Thin.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Thin.woff") format("woff");
 }
 
@@ -26,7 +30,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-UltraLight.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-UltraLight.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-UltraLight.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-UltraLight.woff") format("woff");
 }
 
@@ -36,7 +42,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Light.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Light.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Light.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Light.woff") format("woff");
 }
 
@@ -46,7 +54,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Medium.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Medium.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Medium.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Medium.woff") format("woff");
 }
 
@@ -56,7 +66,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Semibold.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Semibold.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Semibold.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Semibold.woff") format("woff");
 }
 
@@ -66,7 +78,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Bold.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Bold.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Bold.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Bold.woff") format("woff");
 }
 
@@ -76,7 +90,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Extrabold.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Extrabold.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Extrabold.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Extrabold.woff") format("woff");
 }
 
@@ -86,7 +102,9 @@
     font-style: normal;
     font-display: swap;
     src: url("/fonts/gilroy/Gilroy-Black.woff2");
-    src: local(""), url("/fonts/gilroy/Gilroy-Black.woff2") format("woff2"),
+    src:
+        local(""),
+        url("/fonts/gilroy/Gilroy-Black.woff2") format("woff2"),
         url("/fonts/gilroy/Gilroy-Black.woff") format("woff");
 }
 
@@ -98,7 +116,8 @@
     font-weight: 400;
     font-display: swap;
     src: url("/fonts/playfair-display/playfair-display-v28-latin-regular.woff2");
-    src: local(""),
+    src:
+        local(""),
         url("/fonts/playfair-display/playfair-display-v28-latin-regular.woff2") format("woff2"),
         url("/fonts/playfair-display/playfair-display-v28-latin-regular.woff") format("woff");
 }
@@ -109,7 +128,8 @@
     font-weight: 600;
     font-display: swap;
     src: url("/fonts/playfair-display/playfair-display-v28-latin-600.woff2");
-    src: local(""),
+    src:
+        local(""),
         url("/fonts/playfair-display/playfair-display-v28-latin-600.woff2") format("woff2"),
         url("/fonts/playfair-display/playfair-display-v28-latin-600.woff") format("woff");
 }
@@ -120,7 +140,8 @@
     font-weight: 500;
     font-display: swap;
     src: url("/fonts/playfair-display/playfair-display-v28-latin-500.woff2");
-    src: local(""),
+    src:
+        local(""),
         url("/fonts/playfair-display/playfair-display-v28-latin-500.woff2") format("woff2"),
         url("/fonts/playfair-display/playfair-display-v28-latin-500.woff") format("woff");
 }
@@ -131,7 +152,8 @@
     font-weight: 700;
     font-display: swap;
     src: url("/fonts/playfair-display/playfair-display-v28-latin-700.woff2");
-    src: local(""),
+    src:
+        local(""),
         url("/fonts/playfair-display/playfair-display-v28-latin-700.woff2") format("woff2"),
         url("/fonts/playfair-display/playfair-display-v28-latin-700.woff") format("woff");
 }
@@ -141,7 +163,9 @@
 @font-face {
     font-family: "Conv_Rossela-Demo-2";
     src: url("/fonts/rossela/Rossela-Demo-2.woff2");
-    src: local("☺"), url("/fonts/rossela/Rossela-Demo-2.woff") format("woff"),
+    src:
+        local("☺"),
+        url("/fonts/rossela/Rossela-Demo-2.woff") format("woff"),
         url("/fonts/rossela/Rossela-Demo-2.woff") format("woff" 2);
     font-weight: normal;
     font-style: normal;
diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css
index 25ef9bfc1..984876e29 100644
--- a/src/assets/css/globals.css
+++ b/src/assets/css/globals.css
@@ -1,7 +1,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-Light.eot");
-    src: url("/fonts/gotham/GothamPro-Light.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-Light.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-Light.woff") format("woff"),
         url("/fonts/gotham/GothamPro-Light.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-Light.svg#GothamPro-Light") format("svg"),
@@ -13,7 +14,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-LightItalic.eot");
-    src: url("/fonts/gotham/GothamPro-LightItalic.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-LightItalic.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-LightItalic.woff") format("woff"),
         url("/fonts/gotham/GothamPro-LightItalic.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-LightItalic.svg#GothamPro-LightItalic") format("svg"),
@@ -25,7 +27,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro.eot");
-    src: url("/fonts/gotham/GothamPro.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro.woff") format("woff"),
         url("/fonts/gotham/GothamPro.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro.svg#GothamPro") format("svg"),
@@ -37,7 +40,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-Italic.eot");
-    src: url("/fonts/gotham/GothamPro-Italic.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-Italic.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-Italic.woff") format("woff"),
         url("/fonts/gotham/GothamPro-Italic.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-Italic.svg#GothamPro-Italic") format("svg"),
@@ -49,7 +53,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-Medium.eot");
-    src: url("/fonts/gotham/GothamPro-Medium.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-Medium.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-Medium.woff") format("woff"),
         url("/fonts/gotham/GothamPro-Medium.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-Medium.svg#GothamPro-Medium") format("svg"),
@@ -61,7 +66,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-MediumItalic.eot");
-    src: url("/fonts/gotham/GothamPro-MediumItalic.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-MediumItalic.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-MediumItalic.woff") format("woff"),
         url("/fonts/gotham/GothamPro-MediumItalic.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-MediumItalic.svg#GothamPro-MediumItalic") format("svg"),
@@ -73,7 +79,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-Bold.eot");
-    src: url("/fonts/gotham/GothamPro-Bold.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-Bold.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-Bold.woff") format("woff"),
         url("/fonts/gotham/GothamPro-Bold.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-Bold.svg#GothamPro-Bold") format("svg"),
@@ -85,7 +92,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-BoldItalic.eot");
-    src: url("/fonts/gotham/GothamPro-BoldItalic.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-BoldItalic.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-BoldItalic.woff") format("woff"),
         url("/fonts/gotham/GothamPro-BoldItalic.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-BoldItalic.svg#GothamPro-BoldItalic") format("svg"),
@@ -97,7 +105,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-Black.eot");
-    src: url("/fonts/gotham/GothamPro-Black.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-Black.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-Black.woff") format("woff"),
         url("/fonts/gotham/GothamPro-Black.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-Black.svg#GothamPro-Black") format("svg"),
@@ -109,7 +118,8 @@
 @font-face {
     font-family: GothamPro;
     src: url("/fonts/gotham/GothamPro-BlackItalic.eot");
-    src: url("/fonts/gotham/GothamPro-BlackItalic.woff2") format("woff2"),
+    src:
+        url("/fonts/gotham/GothamPro-BlackItalic.woff2") format("woff2"),
         url("/fonts/gotham/GothamPro-BlackItalic.woff") format("woff"),
         url("/fonts/gotham/GothamPro-BlackItalic.ttf") format("truetype"),
         url("/fonts/gotham/GothamPro-BlackItalic.svg#GothamPro-BlackItalic") format("svg"),
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index f3314ab8b..d8c944cfa 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -4,7 +4,7 @@
 
 @layer base {
     body {
-        @apply tw-font-body tw-text-body tw-leading-body tw-text-base tw-font-normal tw-overflow-x-hidden;
+        @apply tw-overflow-x-hidden tw-font-body tw-text-base tw-font-normal tw-leading-body tw-text-body;
     }
     a {
         @apply tw-transition-colors hover:tw-text-primary;
@@ -30,7 +30,7 @@
     .h5,
     h6,
     .h6 {
-        @apply tw-font-heading tw-text-heading tw-leading-heading tw-font-bold tw-mb-2;
+        @apply tw-mb-2 tw-font-heading tw-font-bold tw-leading-heading tw-text-heading;
     }
     h1,
     .h1 {
@@ -65,7 +65,7 @@
         @apply tw-text-current hover:tw-text-primary;
     }
     .link-overlay {
-        @apply tw-absolute tw-inset-0 -tw-indent-[99999px] tw-z-10;
+        @apply tw-absolute tw-inset-0 tw-z-10 -tw-indent-[99999px];
     }
     .table-responsive {
         @apply tw-overflow-y-auto;
diff --git a/src/components/blog-card/blog-01.tsx b/src/components/blog-card/blog-01.tsx
index 79d65a651..73ea3f7d1 100644
--- a/src/components/blog-card/blog-01.tsx
+++ b/src/components/blog-card/blog-01.tsx
@@ -11,7 +11,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
     ({ title, path, category, postedAt, image, className }, ref) => (
         <div
             className={clsx(
-                "blog-card tw-relative tw-overflow-hidden tw-transition-all tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-group",
+                "blog-card tw-group tw-relative tw-overflow-hidden tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-transition-all",
                 className
             )}
             ref={ref}
@@ -19,7 +19,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
             {image?.src && (
                 <figure className="tw-relative tw-overflow-hidden">
                     <img
-                        className="tw-w-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110 tw-h-60 sm:tw-h-80 xl:tw-h-[200px] tw-object-cover"
+                        className="tw-h-60 tw-w-full tw-object-cover tw-transition-transform tw-duration-1500 group-hover:tw-scale-110 sm:tw-h-80 xl:tw-h-[200px]"
                         src={image.src}
                         alt={image?.alt || title}
                         width={image?.width || 270}
@@ -32,18 +32,18 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                 </figure>
             )}
 
-            <div className="tw-py-[25px] tw-px-[30px]">
+            <div className="tw-px-[30px] tw-py-[25px]">
                 <Anchor
                     path={category.path}
-                    className="tw-font-medium tw-block tw-mb-1 -tw-tracking-tightest tw-uppercase tw-text-secondary-light"
+                    className="tw-mb-1 tw-block tw-font-medium tw-uppercase -tw-tracking-tightest tw-text-secondary-light"
                 >
                     {category.title}
                 </Anchor>
-                <h3 className="tw-text-xl tw-mb-0 tw-leading-normal">
+                <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">
                     <Anchor path={path}>{title}</Anchor>
                 </h3>
                 <ul>
-                    <li className="tw-text-md tw-mt-3.8">
+                    <li className="tw-mt-3.8 tw-text-md">
                         <i className="far fa-calendar tw-mr-2.5" />
                         {postedAt}
                     </li>
diff --git a/src/components/blog-card/blog-02.tsx b/src/components/blog-card/blog-02.tsx
index a63d1abba..9c68bf8d8 100644
--- a/src/components/blog-card/blog-02.tsx
+++ b/src/components/blog-card/blog-02.tsx
@@ -11,15 +11,15 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
     ({ title, path, category, postedAt, image, className }, ref) => (
         <div
             className={clsx(
-                "blog-card tw-grid tw-relative tw-overflow-hidden tw-transition-all tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-group",
+                "blog-card tw-group tw-relative tw-grid tw-overflow-hidden tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-transition-all",
                 className
             )}
             ref={ref}
         >
             {image?.src ? (
-                <figure className="tw-relative tw-overflow-hidden tw-row-span-full tw-col-span-full after:tw-absolute after:tw-content-[''] after:tw-inset-0 after:tw-bg-darkGradient">
+                <figure className="tw-relative tw-col-span-full tw-row-span-full tw-overflow-hidden after:tw-absolute after:tw-inset-0 after:tw-bg-darkGradient after:tw-content-['']">
                     <img
-                        className="tw-w-full tw-transition-transform tw-duration-1500 tw-h-[680px] tw-object-cover group-hover:tw-scale-110"
+                        className="tw-h-[680px] tw-w-full tw-object-cover tw-transition-transform tw-duration-1500 group-hover:tw-scale-110"
                         src={image.src}
                         alt={image?.alt || title}
                         width={image?.width || 500}
@@ -31,23 +31,23 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </figure>
             ) : (
-                <div className="tw-bg-dark/40 tw-row-span-full" />
+                <div className="tw-row-span-full tw-bg-dark/40" />
             )}
 
-            <div className="tw-py-6.1 tw-px-7.5 lg:tw-pt-5 lg:tw-pb-[54px] lg:tw-px-[38px] tw-row-span-full tw-col-span-full tw-z-10 tw-flex tw-flex-col tw-justify-end">
+            <div className="tw-z-10 tw-col-span-full tw-row-span-full tw-flex tw-flex-col tw-justify-end tw-px-7.5 tw-py-6.1 lg:tw-px-[38px] lg:tw-pb-[54px] lg:tw-pt-5">
                 <Anchor
                     path={category.path}
-                    className="tw-font-medium tw-block tw-mb-1 -tw-tracking-tightest tw-uppercase tw-text-white hover:tw-text-white"
+                    className="tw-mb-1 tw-block tw-font-medium tw-uppercase -tw-tracking-tightest tw-text-white hover:tw-text-white"
                 >
                     {category.title}
                 </Anchor>
-                <h3 className="tw-text-xl tw-leading-normal lg:tw-text-[34px] lg:tw-leading-[1.42] tw-text-white tw-mb-0">
+                <h3 className="tw-mb-0 tw-text-xl tw-leading-normal tw-text-white lg:tw-text-[34px] lg:tw-leading-[1.42]">
                     <Anchor className="hover:tw-text-white" path={path}>
                         {title}
                     </Anchor>
                 </h3>
                 <ul>
-                    <li className="tw-text-md tw-mt-3.8 tw-text-white tw-mb-0">
+                    <li className="tw-mb-0 tw-mt-3.8 tw-text-md tw-text-white">
                         <i className="far fa-calendar tw-mr-2.5" />
                         {postedAt}
                     </li>
diff --git a/src/components/blog-card/blog-03.tsx b/src/components/blog-card/blog-03.tsx
index 51a8758f4..72cbb4731 100644
--- a/src/components/blog-card/blog-03.tsx
+++ b/src/components/blog-card/blog-03.tsx
@@ -11,11 +11,11 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
     ({ className, image, path, title, category, postedAt }, ref) => {
         return (
             <div className={clsx("blog-card tw-group", className)} ref={ref}>
-                <div className="tw-relative tw-overflow-hidden tw-rounded tw-h-[250px]">
+                <div className="tw-relative tw-h-[250px] tw-overflow-hidden tw-rounded">
                     {image?.src && (
-                        <figure className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                        <figure className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={image.src}
                                 alt={image?.alt || "Event"}
                                 width={image.width || 480}
@@ -30,7 +30,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                 </div>
 
                 <div className="info tw-pt-[26px]">
-                    <div className="tw-text-base tw-font-medium tw-uppercase -tw-tracking-tightest tw-leading-[1.4] tw-mb-1.5">
+                    <div className="tw-mb-1.5 tw-text-base tw-font-medium tw-uppercase tw-leading-[1.4] -tw-tracking-tightest">
                         <Anchor path={category.path} className="tw-text-inherit">
                             {category.title}
                         </Anchor>
@@ -40,8 +40,8 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
 
-                    <ul className="tw-text-gray-300 tw-text-md">
-                        <li className="tw-mt-3.8 tw-mb-0">
+                    <ul className="tw-text-md tw-text-gray-300">
+                        <li className="tw-mb-0 tw-mt-3.8">
                             <i className="far fa-calendar tw-mr-2.5" />
                             {postedAt}
                         </li>
diff --git a/src/components/blog-card/blog-04.tsx b/src/components/blog-card/blog-04.tsx
index ade1da21d..69b7282ff 100644
--- a/src/components/blog-card/blog-04.tsx
+++ b/src/components/blog-card/blog-04.tsx
@@ -13,16 +13,16 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "blog tw-h-full tw-relative tw-bg-white tw-group tw-rounded tw-shadow-xl tw-shadow-black/5",
+                    "blog tw-group tw-relative tw-h-full tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-overflow-hidden tw-rounded-t tw-h-[240px] sm:tw-h-64 md:tw-h-[225px] lg:tw-h-[185px] xl:tw-h-[250px]">
+                <div className="tw-relative tw-h-[240px] tw-overflow-hidden tw-rounded-t sm:tw-h-64 md:tw-h-[225px] lg:tw-h-[185px] xl:tw-h-[250px]">
                     {image?.src && (
-                        <div className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                        <div className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={image.src}
                                 alt={image?.alt || title}
                                 width={image.width || 370}
@@ -36,11 +36,11 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </div>
 
-                <div className="info tw-py-[26px] tw-px-5">
+                <div className="info tw-px-5 tw-py-[26px]">
                     {category && (
                         <Anchor
                             path={category.path}
-                            className="tw-block tw-text-body tw-font-medium tw-uppercase -tw-tracking-tightest tw-leading-[1.4] tw-mb-[17px]"
+                            className="tw-mb-[17px] tw-block tw-font-medium tw-uppercase tw-leading-[1.4] -tw-tracking-tightest tw-text-body"
                         >
                             {category.title}
                         </Anchor>
@@ -49,8 +49,8 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
 
-                    <ul className="tw-flex tw-text-gray-300 tw-text-md">
-                        <li className="tw-mt-3.8 tw-mb-0">
+                    <ul className="tw-flex tw-text-md tw-text-gray-300">
+                        <li className="tw-mb-0 tw-mt-3.8">
                             <i className="far fa-calendar tw-mr-2.5" />
                             {postedAt}
                         </li>
diff --git a/src/components/blog-card/blog-05.tsx b/src/components/blog-card/blog-05.tsx
index ed2a7aea6..c30d779b9 100644
--- a/src/components/blog-card/blog-05.tsx
+++ b/src/components/blog-card/blog-05.tsx
@@ -19,16 +19,16 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "blog tw-h-full tw-relative tw-border-b tw-border-b-gray-450",
+                    "blog tw-relative tw-h-full tw-border-b tw-border-b-gray-450",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-group tw-overflow-hidden tw-rounded tw-max-h-[300px] md:tw-max-h-[400px]">
+                <div className="tw-group tw-relative tw-max-h-[300px] tw-overflow-hidden tw-rounded md:tw-max-h-[400px]">
                     {image?.src && (
-                        <figure className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                        <figure className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={image.src}
                                 alt={image?.alt || title}
                                 width={image.width || 770}
@@ -42,18 +42,18 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </div>
 
-                <div className="tw-pt-8 tw-pb-[50px]">
+                <div className="tw-pb-[50px] tw-pt-8">
                     <Anchor
                         path={category.path}
-                        className="tw-block tw-text-body tw-font-medium tw-uppercase -tw-tracking-tightest tw-leading-[1.4] tw-mb-[17px]"
+                        className="tw-mb-[17px] tw-block tw-font-medium tw-uppercase tw-leading-[1.4] -tw-tracking-tightest tw-text-body"
                     >
                         {category.title}
                     </Anchor>
-                    <h3 className="tw-mb-0 tw-text-[26px] xl:tw-text-[34px] tw-leading-[1.42]">
+                    <h3 className="tw-mb-0 tw-text-[26px] tw-leading-[1.42] xl:tw-text-[34px]">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
 
-                    <div className="tw-text-md tw-mt-5 tw-text-gray-300 tw-flex tw-items-center tw-flex-wrap">
+                    <div className="tw-mt-5 tw-flex tw-flex-wrap tw-items-center tw-text-md tw-text-gray-300">
                         <AuthorMeta author={author} className="tw-pr-5 md:tw-pr-8" />
                         <BlogMetaItem
                             className="tw-pr-5 md:tw-pr-8"
@@ -62,7 +62,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                         />
                     </div>
                     <p className="tw-mt-4" dangerouslySetInnerHTML={{ __html: excerpt }} />
-                    <div className="tw-flex tw-items-center tw-justify-between tw-mt-7.5">
+                    <div className="tw-mt-7.5 tw-flex tw-items-center tw-justify-between">
                         <Button path={path}>
                             Read More
                             <span className="tw-sr-only">About this article</span>
diff --git a/src/components/blog-card/blog-06.tsx b/src/components/blog-card/blog-06.tsx
index cd35e124f..814abab44 100644
--- a/src/components/blog-card/blog-06.tsx
+++ b/src/components/blog-card/blog-06.tsx
@@ -16,16 +16,16 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "blog tw-flex tw-flex-wrap tw-h-full tw-relative tw-border-b tw-border-b-gray-450 tw-pb-[50px]",
+                    "blog tw-relative tw-flex tw-h-full tw-flex-wrap tw-border-b tw-border-b-gray-450 tw-pb-[50px]",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-group tw-overflow-hidden tw-rounded md:tw-w-[calc(50%_-_45px)] tw-min-h-[320px] tw-max-h-[340px]">
+                <div className="tw-group tw-relative tw-max-h-[340px] tw-min-h-[320px] tw-overflow-hidden tw-rounded md:tw-w-[calc(50%_-_45px)]">
                     {image?.src && (
-                        <figure className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                        <figure className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={image.src}
                                 alt={image?.alt || title}
                                 width={image.width || 770}
@@ -39,12 +39,12 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </div>
 
-                <div className="tw-pt-7.5 md:tw-pt-0 md:tw-w-[calc(50%_+_45px)] md:tw-pl-[45px]">
-                    <h3 className="tw-mb-0 tw-text-[26px] xl:tw-text-[34px] tw-leading-[1.42]">
+                <div className="tw-pt-7.5 md:tw-w-[calc(50%_+_45px)] md:tw-pl-[45px] md:tw-pt-0">
+                    <h3 className="tw-mb-0 tw-text-[26px] tw-leading-[1.42] xl:tw-text-[34px]">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
 
-                    <div className="tw-text-md tw-mt-5 tw-text-gray-300 tw-flex tw-items-center tw-flex-wrap">
+                    <div className="tw-mt-5 tw-flex tw-flex-wrap tw-items-center tw-text-md tw-text-gray-300">
                         <AuthorMeta author={author} className="tw-pr-5 md:tw-pr-8" />
                         <BlogMetaItem
                             className="tw-pr-5 md:tw-pr-8"
@@ -53,7 +53,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
                         />
                     </div>
                     <p className="tw-mt-4" dangerouslySetInnerHTML={{ __html: excerpt }} />
-                    <div className="tw-flex tw-items-center tw-justify-between tw-mt-7.5 md:tw-mt-9">
+                    <div className="tw-mt-7.5 tw-flex tw-items-center tw-justify-between md:tw-mt-9">
                         <Button path={path}>
                             Read More
                             <span className="tw-sr-only">About this article</span>
diff --git a/src/components/blog-meta/author.tsx b/src/components/blog-meta/author.tsx
index 79e7d5c4c..9481c722b 100644
--- a/src/components/blog-meta/author.tsx
+++ b/src/components/blog-meta/author.tsx
@@ -15,7 +15,7 @@ const AuthorMeta = ({ author, className }: TProps) => {
                     <img
                         alt={author.image?.alt || "Avatar"}
                         src={author.image.src}
-                        className="tw-w-8 tw-h-8 tw-rounded-full tw-mr-2"
+                        className="tw-mr-2 tw-h-8 tw-w-8 tw-rounded-full"
                         height="96"
                         width="96"
                     />
diff --git a/src/components/blog-meta/tags.tsx b/src/components/blog-meta/tags.tsx
index 751880073..53e0d76c0 100644
--- a/src/components/blog-meta/tags.tsx
+++ b/src/components/blog-meta/tags.tsx
@@ -10,12 +10,12 @@ type TProps = {
 const TagMeta = ({ className, tags }: TProps) => {
     return (
         <div className={clsx("tags tw-inline-flex", className)}>
-            <span className="tw-text-lg tw-mr-1 far fa-tags" />
+            <span className="far fa-tags tw-mr-1 tw-text-lg" />
             {tags.map((tag, i, arr) => (
                 <Anchor
                     key={tag.slug}
                     path={tag.path}
-                    className="tw-text-gray-400 tw-font-medium tw-inline-block tw-ml-1"
+                    className="tw-ml-1 tw-inline-block tw-font-medium tw-text-gray-400"
                 >
                     {tag.title}
                     {i !== arr.length - 1 && ", "}
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
index cd6315b41..198f2b719 100644
--- a/src/components/breadcrumb/index.tsx
+++ b/src/components/breadcrumb/index.tsx
@@ -18,14 +18,14 @@ const Breadcrumb = ({ className, pages, currentPage, showTitle, title }: TProps)
             className={clsx(
                 "page-title-area tw-relative",
                 showTitle &&
-                    "tw-pt-15 tw-pb-10 md:tw-pt-20 md:tw-pb-15 lg:tw-pt-[100px] lg:tw-pb-20",
+                    "tw-pb-10 tw-pt-15 md:tw-pb-15 md:tw-pt-20 lg:tw-pb-20 lg:tw-pt-[100px]",
                 !showTitle && "tw-pb-10 md:tw-pb-15 lg:tw-pb-20",
                 className
             )}
         >
             {showTitle && (
                 <div className="tw-container">
-                    <h1 className="title tw-capitalize tw-mt-5 tw-mb-0 tw-text-3xl md:tw-text-4xl lg:tw-text-5xl tw-text-center">
+                    <h1 className="title tw-mb-0 tw-mt-5 tw-text-center tw-text-3xl tw-capitalize md:tw-text-4xl lg:tw-text-5xl">
                         {title || currentPage}
                     </h1>
                 </div>
@@ -34,7 +34,7 @@ const Breadcrumb = ({ className, pages, currentPage, showTitle, title }: TProps)
 
             <div
                 className={clsx(
-                    "page-breadcrumb tw-top-0 tw-left-0 tw-w-full",
+                    "page-breadcrumb tw-left-0 tw-top-0 tw-w-full",
                     showTitle && "tw-absolute"
                 )}
             >
@@ -43,11 +43,11 @@ const Breadcrumb = ({ className, pages, currentPage, showTitle, title }: TProps)
                         {pages.map(({ path, label }) => (
                             <li
                                 key={label}
-                                className="tw-text-md first:before:tw-hidden before:tw-content-['/'] before:tw-mx-3.8 before:tw-color-body"
+                                className="before:tw-color-body tw-text-md before:tw-mx-3.8 before:tw-content-['/'] first:before:tw-hidden"
                             >
                                 <Anchor
                                     path={path}
-                                    className="tw-text-body tw-capitalize tw-relative before:tw-absolute before:tw-content-[''] before:-tw-bottom-1.5 before:tw-right-0 before:tw-w-0 before:tw-h-px before:tw-transition-all before:tw-bg-heading hover:tw-text-heading hover:before:tw-left-0 hover:before:tw-w-full"
+                                    className="tw-relative tw-capitalize tw-text-body before:tw-absolute before:-tw-bottom-1.5 before:tw-right-0 before:tw-h-px before:tw-w-0 before:tw-bg-heading before:tw-transition-all before:tw-content-[''] hover:tw-text-heading hover:before:tw-left-0 hover:before:tw-w-full"
                                 >
                                     {label}
                                 </Anchor>
@@ -55,7 +55,7 @@ const Breadcrumb = ({ className, pages, currentPage, showTitle, title }: TProps)
                         ))}
 
                         <li
-                            className="tw-text-md tw-capitalize tw-text-heading first:before:tw-hidden before:tw-content-['/'] before:tw-mx-3.8 before:tw-color-body"
+                            className="before:tw-color-body tw-text-md tw-capitalize tw-text-heading before:tw-mx-3.8 before:tw-content-['/'] first:before:tw-hidden"
                             aria-current="page"
                         >
                             {currentPage}
diff --git a/src/components/course-card/course-01.tsx b/src/components/course-card/course-01.tsx
index e8754b677..61dc76b78 100644
--- a/src/components/course-card/course-01.tsx
+++ b/src/components/course-card/course-01.tsx
@@ -14,7 +14,7 @@ const CourseCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "tw-overflow-hidden tw-transition-all tw-bg-gray-100 tw-rounded tw-h-full group hover:tw-bg-white hover:tw-shadow-4xl hover:tw-shadow-black/[0.12]",
+                    "group tw-h-full tw-overflow-hidden tw-rounded tw-bg-gray-100 tw-transition-all hover:tw-bg-white hover:tw-shadow-4xl hover:tw-shadow-black/[0.12]",
                     className
                 )}
                 ref={ref}
@@ -35,12 +35,12 @@ const CourseCard = forwardRef<HTMLDivElement, TProps>(
                         {title}
                     </Anchor>
                 </figure>
-                <div className="tw-relative tw-px-7.5 tw-pt-7.5 tw-pb-10">
-                    <span className="tw-capitalize tw-font-extrabold tw-bg-primary tw-text-white tw-leading-none tw-rounded-full tw-flex tw-justify-center tw-items-center tw-absolute tw-right-5 -tw-translate-y-1/2 tw-top-0 tw-w-[60px] tw-h-[60px] tw-text-lg md:tw-w-[70px] md:tw-h-[70px] md:tw-text-2xl" />
-                    <span className="tw-font-medium tw-block tw-uppercase tw-mb-1 tw-tracking-[2px] tw-text-secondary-light">
+                <div className="tw-relative tw-px-7.5 tw-pb-10 tw-pt-7.5">
+                    <span className="tw-absolute tw-right-5 tw-top-0 tw-flex tw-h-[60px] tw-w-[60px] -tw-translate-y-1/2 tw-items-center tw-justify-center tw-rounded-full tw-bg-primary tw-text-lg tw-font-extrabold tw-capitalize tw-leading-none tw-text-white md:tw-h-[70px] md:tw-w-[70px] md:tw-text-2xl" />
+                    <span className="tw-mb-1 tw-block tw-font-medium tw-uppercase tw-tracking-[2px] tw-text-secondary-light">
                         {dayjs(published_at).format("MMM DD, YYYY")}
                     </span>
-                    <h3 className="tw-leading-normal tw-text-secondary tw-m-0">
+                    <h3 className="tw-m-0 tw-leading-normal tw-text-secondary">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
                     {excerpt && <p className="tw-mt-2.5">{excerpt}</p>}
diff --git a/src/components/course-card/course-02.tsx b/src/components/course-card/course-02.tsx
index 19a26f0ef..2db64df98 100644
--- a/src/components/course-card/course-02.tsx
+++ b/src/components/course-card/course-02.tsx
@@ -14,8 +14,8 @@ const CourseCard02 = forwardRef<HTMLDivElement, TProps>(
         return (
             <motion.div
                 className={clsx(
-                    "course tw-h-full tw-rounded tw-bg-white tw-relative",
-                    "before:tw-absolute before:tw-content-[''] before:-tw-z-1 before:tw-inset-0 before:tw-shadow-4md before:tw-shadow-black/[0.12] before:tw-rounded-b before:tw-transition-opacity before:tw-opacity-0",
+                    "course tw-relative tw-h-full tw-rounded tw-bg-white",
+                    "before:tw-absolute before:tw-inset-0 before:-tw-z-1 before:tw-rounded-b before:tw-opacity-0 before:tw-shadow-4md before:tw-shadow-black/[0.12] before:tw-transition-opacity before:tw-content-['']",
                     "hover:before:tw-opacity-100",
                     className
                 )}
@@ -42,7 +42,7 @@ const CourseCard02 = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </figure>
                 <div className="info tw-p-[30px]">
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0">
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
                 </div>
diff --git a/src/components/course-card/course-03.tsx b/src/components/course-card/course-03.tsx
index 231100df1..715b127b7 100644
--- a/src/components/course-card/course-03.tsx
+++ b/src/components/course-card/course-03.tsx
@@ -12,17 +12,17 @@ const CourseCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "course-card tw-flex tw-flex-wrap sm:tw-flex-nowrap sm:tw-items-center tw-h-full tw-p-5 tw-rounded tw-bg-white tw-relative",
-                    "before:tw-absolute before:tw-content-[''] before:tw-inset-0 before:tw-shadow-4md before:tw-shadow-black/5 before:tw-rounded-b before:tw-transition-opacity before:tw-opacity-0",
+                    "course-card tw-relative tw-flex tw-h-full tw-flex-wrap tw-rounded tw-bg-white tw-p-5 sm:tw-flex-nowrap sm:tw-items-center",
+                    "before:tw-absolute before:tw-inset-0 before:tw-rounded-b before:tw-opacity-0 before:tw-shadow-4md before:tw-shadow-black/5 before:tw-transition-opacity before:tw-content-['']",
                     "hover:before:tw-opacity-100",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-z-1 tw-flex tw-overflow-hidden tw-rounded-full tw-w-[170px] tw-min-w-[170px] tw-h-[170px]">
+                <div className="tw-relative tw-z-1 tw-flex tw-h-[170px] tw-w-[170px] tw-min-w-[170px] tw-overflow-hidden tw-rounded-full">
                     {thumbnail?.src && (
                         <img
-                            className="tw-w-full tw-h-full tw-object-cover"
+                            className="tw-h-full tw-w-full tw-object-cover"
                             src={thumbnail.src}
                             alt={thumbnail?.alt || "Course"}
                             width={thumbnail?.width || 170}
@@ -35,7 +35,7 @@ const CourseCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </div>
                 <div className="info tw-z-1 tw-mt-5 sm:tw-mt-0 sm:tw-pl-7.5">
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0">
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
                 </div>
diff --git a/src/components/course-card/course-04.tsx b/src/components/course-card/course-04.tsx
index 994210262..9b927e408 100644
--- a/src/components/course-card/course-04.tsx
+++ b/src/components/course-card/course-04.tsx
@@ -12,9 +12,9 @@ const CourseCard02 = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "course tw-h-full tw-rounded tw-bg-gray-100 tw-relative tw-group",
-                    "before:tw-absolute before:tw-content-[''] before:tw-z-1 before:tw-inset-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-rounded-b before:tw-transition-opacity before:tw-duration-300 before:tw-opacity-0",
-                    "hover:before:tw-opacity-100 hover:tw-bg-white",
+                    "course tw-group tw-relative tw-h-full tw-rounded tw-bg-gray-100",
+                    "before:tw-absolute before:tw-inset-0 before:tw-z-1 before:tw-rounded-b before:tw-opacity-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-transition-opacity before:tw-duration-300 before:tw-content-['']",
+                    "hover:tw-bg-white hover:before:tw-opacity-100",
                     className
                 )}
                 ref={ref}
@@ -36,7 +36,7 @@ const CourseCard02 = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </figure>
                 <div className="info tw-p-[30px]">
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0">
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
                 </div>
diff --git a/src/components/event-card/event-01.tsx b/src/components/event-card/event-01.tsx
index 8efa6daad..b6acf6cf5 100644
--- a/src/components/event-card/event-01.tsx
+++ b/src/components/event-card/event-01.tsx
@@ -14,18 +14,18 @@ const Event01 = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "event tw-h-full tw-relative tw-bg-gray-100 tw-group tw-rounded",
-                    "before:tw-absolute before:tw-content-[''] before:tw-inset-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-opacity-0 before:tw-transition-opacity before:tw-duration-300",
+                    "event tw-group tw-relative tw-h-full tw-rounded tw-bg-gray-100",
+                    "before:tw-absolute before:tw-inset-0 before:tw-opacity-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-transition-opacity before:tw-duration-300 before:tw-content-['']",
                     "hover:before:tw-opacity-100",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-overflow-hidden tw-rounded-t max-w-full tw-h-[230px]">
+                <div className="max-w-full tw-relative tw-h-[230px] tw-overflow-hidden tw-rounded-t">
                     {thumbnail?.src && (
-                        <figure className="tw-transition-transform tw-duration-1500 group-hover:tw-scale-110 tw-h-full">
+                        <figure className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={thumbnail.src}
                                 alt={thumbnail?.alt || "Event"}
                                 width={thumbnail.width || 371}
@@ -34,20 +34,20 @@ const Event01 = forwardRef<HTMLDivElement, TProps>(
                             />
                         </figure>
                     )}
-                    <div className="tw-absolute tw-inset-0 tw-bg-secondary/60 tw-transition-opacity tw-duration-300 tw-flex tw-justify-center tw-items-center tw-invisible tw-opacity-0 group-hover:tw-visible group-hover:tw-opacity-100">
+                    <div className="tw-invisible tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-secondary/60 tw-opacity-0 tw-transition-opacity tw-duration-300 group-hover:tw-visible group-hover:tw-opacity-100">
                         <Button color="light" hover={false} className="tw-text-primary" path={path}>
                             Get ticket
                         </Button>
                     </div>
                 </div>
-                <div className="info tw-relative tw-z-1 tw-pt-7.5 tw-pb-10 tw-px-7.5 tw-text-center">
-                    <p className="tw-uppercase tw-font-semibold tw-mb-1 -tw-tracking-tightest tw-text-primary">
+                <div className="info tw-relative tw-z-1 tw-px-7.5 tw-pb-10 tw-pt-7.5 tw-text-center">
+                    <p className="tw-mb-1 tw-font-semibold tw-uppercase -tw-tracking-tightest tw-text-primary">
                         {dayjs(start_date).format("MMM DD, YYYY")}
                     </p>
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0 tw-text-secondary">
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal tw-text-secondary">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
-                    <p className="tw-text-[17px] tw-mt-6.1 tw-mb-0">
+                    <p className="tw-mb-0 tw-mt-6.1 tw-text-[17px]">
                         <i className="far fa-map-marker-alt tw-mr-2.5" />
                         {location.city}, {location.country}
                     </p>
diff --git a/src/components/event-card/event-02.tsx b/src/components/event-card/event-02.tsx
index d0632b72a..1a6b08704 100644
--- a/src/components/event-card/event-02.tsx
+++ b/src/components/event-card/event-02.tsx
@@ -13,27 +13,27 @@ const Event02 = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "event-card tw-relative tw-bg-light-100 tw-rounded tw-p-[31px] tw-flex tw-flex-wrap tw-z-10 md:tw-flex-nowrap",
-                    "before:tw-absolute before:tw-content-[''] before:-tw-z-1 before:tw-inset-0 before:tw-shadow-lg before:tw-shadow-heading/10 before:tw-opacity-0 before:tw-transition-opacity before:tw-duration-300",
-                    "after:tw-absolute after:tw-content-[''] after:tw-inset-0 after:tw-right-auto after:tw-w-[3px] after:tw-rounded-tl after:tw-rounded-bl after:tw-bg-primary after:tw-opacity-0 after:tw-transition-opacity after:tw-duration-300",
-                    "hover:before:tw-opacity-100 hover:after:tw-opacity-100 hover:tw-bg-white",
+                    "event-card tw-relative tw-z-10 tw-flex tw-flex-wrap tw-rounded tw-bg-light-100 tw-p-[31px] md:tw-flex-nowrap",
+                    "before:tw-absolute before:tw-inset-0 before:-tw-z-1 before:tw-opacity-0 before:tw-shadow-lg before:tw-shadow-heading/10 before:tw-transition-opacity before:tw-duration-300 before:tw-content-['']",
+                    "after:tw-absolute after:tw-inset-0 after:tw-right-auto after:tw-w-[3px] after:tw-rounded-bl after:tw-rounded-tl after:tw-bg-primary after:tw-opacity-0 after:tw-transition-opacity after:tw-duration-300 after:tw-content-['']",
+                    "hover:tw-bg-white hover:before:tw-opacity-100 hover:after:tw-opacity-100",
                     className
                 )}
                 ref={ref}
             >
                 <div className="tw-grow tw-pb-3.8 tw-pr-0 sm:tw-pb-0 sm:tw-pr-7.5">
-                    <div className="tw-text-base tw-text-gray-300 tw-mb-[7px]">
+                    <div className="tw-mb-[7px] tw-text-base tw-text-gray-300">
                         <i className="far fa-map-marker-alt tw-mr-[5px]" />
                         {location.city}, {location.country}
                     </div>
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0">{title}</h3>
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">{title}</h3>
                 </div>
                 <div className="tw-shrink-0">
-                    <div className="tw-text-left sm:tw-text-center tw-mb-2.5">
+                    <div className="tw-mb-2.5 tw-text-left sm:tw-text-center">
                         <div className="tw-text-5xl tw-font-normal tw-leading-none tw-text-primary">
                             {dayjs(start_date).format("DD")}
                         </div>
-                        <div className="tw-font-bold tw-leading-none tw-uppercase tw-tracking-wider tw-text-heading">
+                        <div className="tw-font-bold tw-uppercase tw-leading-none tw-tracking-wider tw-text-heading">
                             {dayjs(start_date).format("MMM")}
                         </div>
                     </div>
diff --git a/src/components/forms/apply-form.tsx b/src/components/forms/apply-form.tsx
index 08b55a3c0..bb3ce6a1f 100644
--- a/src/components/forms/apply-form.tsx
+++ b/src/components/forms/apply-form.tsx
@@ -67,7 +67,7 @@ const ApplyForm = () => {
             {message && <p>{message}</p>}
             <form onSubmit={handleSubmit(onSubmit)} noValidate>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="firstName" className="tw-text-heading tw-text-md">
+                    <label htmlFor="firstName" className="tw-text-md tw-text-heading">
                         First Name *
                     </label>
                     <Input
@@ -83,7 +83,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="lastName" className="tw-text-heading tw-text-md">
+                    <label htmlFor="lastName" className="tw-text-md tw-text-heading">
                         Last Name *
                     </label>
                     <Input
@@ -99,7 +99,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="email" className="tw-text-heading tw-text-md">
+                    <label htmlFor="email" className="tw-text-md tw-text-heading">
                         Email *
                     </label>
                     <Input
@@ -119,7 +119,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="city" className="tw-text-heading tw-text-md">
+                    <label htmlFor="city" className="tw-text-md tw-text-heading">
                         City *
                     </label>
                     <Input
@@ -135,7 +135,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="state" className="tw-text-heading tw-text-md">
+                    <label htmlFor="state" className="tw-text-md tw-text-heading">
                         State *
                     </label>
                     <Input
@@ -151,7 +151,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="zipCode" className="tw-text-heading tw-text-md">
+                    <label htmlFor="zipCode" className="tw-text-md tw-text-heading">
                         Zip Code *
                     </label>
                     <Input
@@ -167,7 +167,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="country" className="tw-text-heading tw-text-md">
+                    <label htmlFor="country" className="tw-text-md tw-text-heading">
                         Country *
                     </label>
                     <Input
@@ -183,7 +183,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="branchOfService" className="tw-text-heading tw-text-md">
+                    <label htmlFor="branchOfService" className="tw-text-md tw-text-heading">
                         Branch of Service *
                     </label>
                     <Input
@@ -199,7 +199,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="yearJoined" className="tw-text-heading tw-text-md">
+                    <label htmlFor="yearJoined" className="tw-text-md tw-text-heading">
                         Year Joined *
                     </label>
                     <Input
@@ -215,7 +215,7 @@ const ApplyForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="yearSeparated" className="tw-text-heading tw-text-md">
+                    <label htmlFor="yearSeparated" className="tw-text-md tw-text-heading">
                         Year Separated *
                     </label>
                     <Input
@@ -243,7 +243,7 @@ const ApplyForm = () => {
                         initial={{ opacity: 0, scale: 0.4 }}
                         animate={{ opacity: 1, scale: 1 }}
                     >
-                        <label htmlFor="previousCourses" className="tw-text-heading tw-text-md">
+                        <label htmlFor="previousCourses" className="tw-text-md tw-text-heading">
                             List previous courses *
                         </label>
                         <TextArea
@@ -274,7 +274,7 @@ const ApplyForm = () => {
                         initial={{ opacity: 0, scale: 0.4 }}
                         animate={{ opacity: 1, scale: 1 }}
                     >
-                        <label htmlFor="otherCourses" className="tw-text-heading tw-text-md">
+                        <label htmlFor="otherCourses" className="tw-text-md tw-text-heading">
                             List concurrent courses/programs *
                         </label>
                         <TextArea
@@ -291,7 +291,7 @@ const ApplyForm = () => {
                     </motion.div>
                 )}
                 <motion.div layout className="tw-mb-7.5">
-                    <label htmlFor="linkedInAccountName" className="tw-text-heading tw-text-md">
+                    <label htmlFor="linkedInAccountName" className="tw-text-md tw-text-heading">
                         LinkedIn Account Name *
                     </label>
                     <Input
@@ -312,7 +312,7 @@ const ApplyForm = () => {
                     />
                 </motion.div>
                 <motion.div layout className="tw-mb-7.5">
-                    <label htmlFor="githubAccountName" className="tw-text-heading tw-text-md">
+                    <label htmlFor="githubAccountName" className="tw-text-md tw-text-heading">
                         GitHub Account Name *
                     </label>
                     <Input
@@ -333,7 +333,7 @@ const ApplyForm = () => {
                     />
                 </motion.div>
                 <motion.div layout className="tw-mb-7.5">
-                    <label htmlFor="preworkLink" className="tw-text-heading tw-text-md">
+                    <label htmlFor="preworkLink" className="tw-text-md tw-text-heading">
                         Prework Link *
                     </label>
                     <Input
@@ -349,7 +349,7 @@ const ApplyForm = () => {
                     />
                 </motion.div>
                 <motion.div layout className="tw-mb-7.5">
-                    <label htmlFor="preworkRepo" className="tw-text-heading tw-text-md">
+                    <label htmlFor="preworkRepo" className="tw-text-md tw-text-heading">
                         Prework Repository *
                     </label>
                     <Input
@@ -369,7 +369,7 @@ const ApplyForm = () => {
                     <Button
                         type="submit"
                         fullwidth
-                        className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
+                        className="tw-mx-auto tw-mt-7.5 tw-w-full sm:tw-w-[200px]"
                     >
                         Apply
                     </Button>
diff --git a/src/components/forms/contact-form.tsx b/src/components/forms/contact-form.tsx
index be5781056..ec8dc1486 100644
--- a/src/components/forms/contact-form.tsx
+++ b/src/components/forms/contact-form.tsx
@@ -65,7 +65,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
                     <Input
                         id="name"
                         placeholder="Your Name *"
-                        className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
+                        className="tw-w-full tw-rounded-lg tw-border tw-border-[#091f40] tw-bg-white tw-px-4 tw-py-3 tw-text-[#091f40] tw-transition tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40]"
                         feedbackText={errors?.name?.message}
                         state={hasKey(errors, "name") ? "error" : "success"}
                         showState={!!hasKey(errors, "name")}
@@ -84,7 +84,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
                     <Input
                         id="phone"
                         placeholder="Your Phone *"
-                        className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
+                        className="tw-w-full tw-rounded-lg tw-border tw-border-[#091f40] tw-bg-white tw-px-4 tw-py-3 tw-text-[#091f40] tw-transition tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40]"
                         feedbackText={errors?.phone?.message}
                         state={hasKey(errors, "phone") ? "error" : "success"}
                         showState={!!hasKey(errors, "phone")}
@@ -104,7 +104,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
                         type="email"
                         id="email"
                         placeholder="Your Email *"
-                        className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
+                        className="tw-w-full tw-rounded-lg tw-border tw-border-[#091f40] tw-bg-white tw-px-4 tw-py-3 tw-text-[#091f40] tw-transition tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40]"
                         feedbackText={errors?.email?.message}
                         state={hasKey(errors, "email") ? "error" : "success"}
                         showState={!!hasKey(errors, "email")}
@@ -127,7 +127,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
                     <Input
                         id="subject"
                         placeholder="Subject *"
-                        className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
+                        className="tw-w-full tw-rounded-lg tw-border tw-border-[#091f40] tw-bg-white tw-px-4 tw-py-3 tw-text-[#091f40] tw-transition tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40]"
                         feedbackText={errors?.subject?.message}
                         state={hasKey(errors, "subject") ? "error" : "success"}
                         showState={!!hasKey(errors, "subject")}
@@ -147,7 +147,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
                 <Textarea
                     id="message"
                     placeholder="Message"
-                    className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200 tw-resize-none"
+                    className="tw-w-full tw-resize-none tw-rounded-lg tw-border tw-border-[#091f40] tw-bg-white tw-px-4 tw-py-3 tw-text-[#091f40] tw-transition tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40]"
                     feedbackText={errors?.message?.message}
                     state={hasKey(errors, "message") ? "error" : "success"}
                     showState={!!hasKey(errors, "message")}
@@ -159,7 +159,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref) =>
             <div className="tw-w-full">
                 <Button
                     type="submit"
-                    className="tw-w-full tw-bg-[#c5203e] hover:tw-bg-[#a91b35] tw-text-white tw-font-semibold tw-py-4 tw-px-6 tw-rounded-lg focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#c5203e] focus:tw-ring-offset-2 tw-transition tw-duration-200 tw-ease-in-out tw-transform"
+                    className="tw-w-full tw-transform tw-rounded-lg tw-bg-[#c5203e] tw-px-6 tw-py-4 tw-font-semibold tw-text-white tw-transition tw-duration-200 tw-ease-in-out hover:tw-bg-[#a91b35] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#c5203e] focus:tw-ring-offset-2"
                 >
                     Submit
                 </Button>
diff --git a/src/components/forms/donate-form.tsx b/src/components/forms/donate-form.tsx
index 610aed97b..25bc1f993 100644
--- a/src/components/forms/donate-form.tsx
+++ b/src/components/forms/donate-form.tsx
@@ -13,7 +13,7 @@ const DonateForm = forwardRef<HTMLDivElement, TProps>(({ className }, ref) => {
                 src="https://donorbox.org/embed/vetswhocode-donation?show_content=true"
                 name="vwc-donorbox"
                 seamless
-                className="tw-overflow-x-hidden tw-min-h-[900px] md:tw-min-h-[700px]"
+                className="tw-min-h-[900px] tw-overflow-x-hidden md:tw-min-h-[700px]"
             />
         </div>
     );
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx
index 7e984b74b..0671de915 100644
--- a/src/components/forms/login-form.tsx
+++ b/src/components/forms/login-form.tsx
@@ -43,11 +43,11 @@ const LoginForm = () => {
     };
 
     return (
-        <div className="tw-bg-white tw-shadow-2xs tw-shadow-heading/10 tw-max-w-[470px] tw-pt-7.5 tw-pb-[50px] tw-px-[50px]">
-            <h3 className="tw-text-h2 tw-mb-5">Login</h3>
+        <div className="tw-max-w-[470px] tw-bg-white tw-px-[50px] tw-pb-[50px] tw-pt-7.5 tw-shadow-2xs tw-shadow-heading/10">
+            <h3 className="tw-mb-5 tw-text-h2">Login</h3>
             <form onSubmit={handleSubmit(onSubmit)} noValidate>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="username" className="tw-text-heading tw-text-md">
+                    <label htmlFor="username" className="tw-text-md tw-text-heading">
                         Username *
                     </label>
                     <Input
@@ -64,7 +64,7 @@ const LoginForm = () => {
                     <small>Default Username: Admin</small>
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="password" className="tw-text-heading tw-text-md">
+                    <label htmlFor="password" className="tw-text-md tw-text-heading">
                         Password *
                     </label>
                     <Input
@@ -87,7 +87,7 @@ const LoginForm = () => {
                 <Button type="submit" fullwidth className="tw-mt-7.5">
                     Log In
                 </Button>
-                <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-5">
+                <div className="tw-mt-5 tw-flex tw-flex-col tw-items-center tw-justify-center">
                     <Anchor path="/forgot-password" className="tw-mb-2">
                         Forgot Password?
                     </Anchor>
diff --git a/src/components/forms/mentor-form.tsx b/src/components/forms/mentor-form.tsx
index 5a3436f75..eea6140cb 100644
--- a/src/components/forms/mentor-form.tsx
+++ b/src/components/forms/mentor-form.tsx
@@ -45,10 +45,10 @@ const MentorForm = () => {
 
     return (
         <div className="tw-px-4 md:tw-px-[250px]">
-            <h3 className="tw-text-h2 tw-mb-5">Register</h3>
+            <h3 className="tw-mb-5 tw-text-h2">Register</h3>
             <form onSubmit={handleSubmit(onSubmit)} noValidate>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="name" className="tw-text-heading tw-text-md">
+                    <label htmlFor="name" className="tw-text-md tw-text-heading">
                         Name *
                     </label>
                     <Input
@@ -64,7 +64,7 @@ const MentorForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="email" className="tw-text-heading tw-text-md">
+                    <label htmlFor="email" className="tw-text-md tw-text-heading">
                         Email *
                     </label>
                     <Input
@@ -84,7 +84,7 @@ const MentorForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="branch-of-service" className="tw-text-heading tw-text-md">
+                    <label htmlFor="branch-of-service" className="tw-text-md tw-text-heading">
                         Military Branch Affiliation *
                     </label>
                     <Input
@@ -100,7 +100,7 @@ const MentorForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="technical-expertise" className="tw-text-heading tw-text-md">
+                    <label htmlFor="technical-expertise" className="tw-text-md tw-text-heading">
                         Technical Expertise *
                     </label>
                     <Input
@@ -118,7 +118,7 @@ const MentorForm = () => {
                 <div className="tw-mb-7.5">
                     <label
                         htmlFor="github-portfolio-or-linkedin"
-                        className="tw-text-heading tw-text-md"
+                        className="tw-text-md tw-text-heading"
                     >
                         GitHub Portfolio or LinkedIn *
                     </label>
@@ -136,7 +136,7 @@ const MentorForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="location" className="tw-text-heading tw-text-md">
+                    <label htmlFor="location" className="tw-text-md tw-text-heading">
                         Location *
                     </label>
                     <Input
@@ -152,7 +152,7 @@ const MentorForm = () => {
                     />
                 </div>
                 <div className="tw-mb-7.5">
-                    <label htmlFor="employer-restrictions" className="tw-text-heading tw-text-md">
+                    <label htmlFor="employer-restrictions" className="tw-text-md tw-text-heading">
                         Employer Restrictions *
                     </label>
                     <Input
@@ -171,7 +171,7 @@ const MentorForm = () => {
                 <Button
                     type="submit"
                     fullwidth
-                    className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
+                    className="tw-mx-auto tw-mt-7.5 tw-w-full sm:tw-w-[200px]"
                 >
                     Register
                 </Button>
diff --git a/src/components/forms/newsletter-form.tsx b/src/components/forms/newsletter-form.tsx
index 1b3626289..d584950a9 100644
--- a/src/components/forms/newsletter-form.tsx
+++ b/src/components/forms/newsletter-form.tsx
@@ -54,7 +54,7 @@ const NewsletterForm = forwardRef<HTMLFormElement, TProps>(({ className }, ref)
 
     return (
         <form
-            className={clsx("tw-relative tw-max-w-[570px] tw-flex tw-flex-wrap", className)}
+            className={clsx("tw-relative tw-flex tw-max-w-[570px] tw-flex-wrap", className)}
             onSubmit={handleSubmit(onSubmit)}
             ref={ref}
         >
diff --git a/src/components/funfact/funfact-01.tsx b/src/components/funfact/funfact-01.tsx
index b9b82f8f7..46a75325f 100644
--- a/src/components/funfact/funfact-01.tsx
+++ b/src/components/funfact/funfact-01.tsx
@@ -35,13 +35,13 @@ const FunFact = forwardRef<HTMLDivElement, TProps>(({ counter, suffix, title },
     return (
         <div className="funfact tw-text-center" ref={continerRef}>
             <motion.div
-                className="tw-text-4xl md:tw-text-5xl tw-font-extrabold tw-leading-none tw-text-primary"
+                className="tw-text-4xl tw-font-extrabold tw-leading-none tw-text-primary md:tw-text-5xl"
                 onViewportEnter={viewPortHandler}
             >
                 <span ref={nodeRef} />
                 {suffix}
             </motion.div>
-            <h3 className="tw-text-md md:tw-text-base tw-font-bold tw-mt-2.5 md:tw-mt-[14px] tw-mb-0 tw-uppercase tw-text-secondary -tw-tracking-tightest">
+            <h3 className="tw-mb-0 tw-mt-2.5 tw-text-md tw-font-bold tw-uppercase -tw-tracking-tightest tw-text-secondary md:tw-mt-[14px] md:tw-text-base">
                 {title}
             </h3>
         </div>
diff --git a/src/components/funfact/funfact-02.tsx b/src/components/funfact/funfact-02.tsx
index 9bc719431..dc74112af 100644
--- a/src/components/funfact/funfact-02.tsx
+++ b/src/components/funfact/funfact-02.tsx
@@ -38,18 +38,18 @@ const FunFact = forwardRef<HTMLDivElement, TProps>(
 
         return (
             <div className={clsx("funfact tw-text-center", className)} ref={continerRef}>
-                <h3 className="tw-max-w-[180px] tw-text-h3 tw-leading-snug tw-text-secondary tw-mx-auto">
+                <h3 className="tw-mx-auto tw-max-w-[180px] tw-text-h3 tw-leading-snug tw-text-secondary">
                     {title}
                 </h3>
                 <motion.div
-                    className="tw-text-5xl md:tw-text-[64px] tw-font-extrabold tw-leading-none tw-text-primary"
+                    className="tw-text-5xl tw-font-extrabold tw-leading-none tw-text-primary md:tw-text-[64px]"
                     onViewportEnter={viewPortHandler}
                 >
                     <span ref={nodeRef} />
                     {suffix}
                 </motion.div>
                 {description && (
-                    <h4 className="tw-text-body tw-mt-3.5 tw-mb-0 -tw-tracking-tightest tw-up-leading-none tw-uppercase tw-text-h6">
+                    <h4 className="tw-up-leading-none tw-mb-0 tw-mt-3.5 tw-text-h6 tw-uppercase -tw-tracking-tightest tw-text-body">
                         {description}
                     </h4>
                 )}
diff --git a/src/components/gradation/index.tsx b/src/components/gradation/index.tsx
index c0c103225..8ed90f05b 100644
--- a/src/components/gradation/index.tsx
+++ b/src/components/gradation/index.tsx
@@ -17,24 +17,24 @@ const Gradation = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "tw-relative tw-flex tw-items-start lg:tw-block tw-group",
+                    "tw-group tw-relative tw-flex tw-items-start lg:tw-block",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-absolute tw-bg-gray-550 tw-left-[39px] tw-top-3.8 tw-h-full tw-w-px lg:tw-w-full lg:tw-h-px lg:tw-top-6 lg:tw-left-3.8 group-last:tw-hidden" />
-                <div className="tw-mb-14 tw-inline-block tw-relative">
-                    <div className="mask tw-opacity-0 tw-invisible group-hover:tw-opacity-100 group-hover:tw-visible">
+                <div className="tw-absolute tw-left-[39px] tw-top-3.8 tw-h-full tw-w-px tw-bg-gray-550 group-last:tw-hidden lg:tw-left-3.8 lg:tw-top-6 lg:tw-h-px lg:tw-w-full" />
+                <div className="tw-relative tw-mb-14 tw-inline-block">
+                    <div className="mask tw-invisible tw-opacity-0 group-hover:tw-visible group-hover:tw-opacity-100">
                         <div
                             className={clsx(
-                                "tw-w-px tw-h-0 tw-my-0 tw-x-auto",
+                                "tw-x-auto tw-my-0 tw-h-0 tw-w-px",
                                 beforeClass,
                                 afterClass
                             )}
                         />
                         <div
                             className={clsx(
-                                "tw-w-px tw-h-0 tw-my-0 tw-x-auto",
+                                "tw-x-auto tw-my-0 tw-h-0 tw-w-px",
                                 beforeClass,
                                 afterClass,
                                 "before:tw-animate-[gradationMask_3s_linear__infinite] after:tw-animate-[gradationMask_3s_linear_1.2s_infinite]"
@@ -42,7 +42,7 @@ const Gradation = forwardRef<HTMLDivElement, TProps>(
                         />
                         <div
                             className={clsx(
-                                "tw-w-px tw-h-0 tw-my-0 tw-x-auto",
+                                "tw-x-auto tw-my-0 tw-h-0 tw-w-px",
                                 beforeClass,
                                 afterClass,
                                 "before:tw-animate-[gradationMask_3s_linear_2.4s_infinite] after:tw-animate-[gradationMask_3s_linear_2.4s_infinite]"
@@ -50,14 +50,14 @@ const Gradation = forwardRef<HTMLDivElement, TProps>(
                         />
                     </div>
                     {number && (
-                        <h4 className="tw-relative tw-z-1 tw-w-12 tw-h-12 tw-leading-[44px] tw-text-center tw-border-2 tw-border-gray-600 tw-bg-white tw-rounded-full tw-text-lg tw-mb-0 tw-transition-all group-hover:tw-bg-primary group-hover:tw-border-primary group-hover:tw-text-white">
+                        <h4 className="tw-relative tw-z-1 tw-mb-0 tw-h-12 tw-w-12 tw-rounded-full tw-border-2 tw-border-gray-600 tw-bg-white tw-text-center tw-text-lg tw-leading-[44px] tw-transition-all group-hover:tw-border-primary group-hover:tw-bg-primary group-hover:tw-text-white">
                             {number}
                         </h4>
                     )}
                 </div>
-                <div className="tw-pt-2.5 tw-pb-[50px] tw-pr-0 tw-pl-7.5 group-last:tw-pb-0 lg:tw-p-0">
+                <div className="tw-pb-[50px] tw-pl-7.5 tw-pr-0 tw-pt-2.5 group-last:tw-pb-0 lg:tw-p-0">
                     {title && (
-                        <h3 className="tw-text-lg tw-font-bold tw-leading-relaxed tw-text-secondary tw-mb-[9px]">
+                        <h3 className="tw-mb-[9px] tw-text-lg tw-font-bold tw-leading-relaxed tw-text-secondary">
                             {title}
                         </h3>
                     )}
diff --git a/src/components/html-content/index.tsx b/src/components/html-content/index.tsx
index 452e79070..800bf396a 100644
--- a/src/components/html-content/index.tsx
+++ b/src/components/html-content/index.tsx
@@ -31,7 +31,7 @@ const HTMLContent = ({ body, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-prose prose-h2:tw-text-xl sm:prose-h2:tw-text-4xl sm:prose-h3:tw-text-3xl tw-max-w-none",
+                "tw-prose tw-max-w-none prose-h2:tw-text-xl sm:prose-h2:tw-text-4xl sm:prose-h3:tw-text-3xl",
                 className
             )}
         >
diff --git a/src/components/icon-box/icon-box-01.tsx b/src/components/icon-box/icon-box-01.tsx
index 912e42d9d..0bb1487e7 100644
--- a/src/components/icon-box/icon-box-01.tsx
+++ b/src/components/icon-box/icon-box-01.tsx
@@ -15,13 +15,13 @@ const IconBox = forwardRef<HTMLDivElement, IconBoxProps>(
         return (
             <div
                 ref={ref}
-                className="icon-box tw-text-center tw-relative tw-transition tw-pt-10 tw-pb-7.5 tw-px-[19px] tw-rounded group before:tw-absolute before:tw-content-['']  before:tw-inset-0 before:tw-shadow-lg before:tw-shadow-dark/10 before:tw-opacity-0 before:tw-transition hover:tw-bg-white hover:before:tw-opacity-100"
+                className="icon-box group tw-relative tw-rounded tw-px-[19px] tw-pb-7.5 tw-pt-10 tw-text-center tw-transition before:tw-absolute before:tw-inset-0 before:tw-opacity-0 before:tw-shadow-lg before:tw-shadow-dark/10 before:tw-transition before:tw-content-[''] hover:tw-bg-white hover:before:tw-opacity-100"
             >
-                <Icon name={icon} className="tw-w-[60px] tw-h-[60px] tw-mx-auto" />
-                <div className="content tw-mt-7 tw-relative tw-z-10">
-                    <h3 className="tw-text-secondary tw-m-0">{title}</h3>
-                    <p className="tw-leading-normal tw-px-2.5 tw-mt-3">{description}</p>
-                    <span className="tw-text-md tw-font-bold tw-leading-none tw-inline-flex tw-items-center tw-mt-5 tw-text-secondary-light tw-p-1.3 group-hover:tw-text-primary">
+                <Icon name={icon} className="tw-mx-auto tw-h-[60px] tw-w-[60px]" />
+                <div className="content tw-relative tw-z-10 tw-mt-7">
+                    <h3 className="tw-m-0 tw-text-secondary">{title}</h3>
+                    <p className="tw-mt-3 tw-px-2.5 tw-leading-normal">{description}</p>
+                    <span className="tw-mt-5 tw-inline-flex tw-items-center tw-p-1.3 tw-text-md tw-font-bold tw-leading-none tw-text-secondary-light group-hover:tw-text-primary">
                         {pathText}{" "}
                         <i className="far fa-long-arrow-right tw-ml-3.5 tw-text-[16px]" />
                     </span>
diff --git a/src/components/icon-box/icon-box-02.tsx b/src/components/icon-box/icon-box-02.tsx
index 5c845a362..e88318878 100644
--- a/src/components/icon-box/icon-box-02.tsx
+++ b/src/components/icon-box/icon-box-02.tsx
@@ -13,10 +13,10 @@ const IconBox = forwardRef<HTMLDivElement, IconBoxProps>(
     ({ icon, title, description, path }, ref) => {
         return (
             <div ref={ref} className="icon-box group tw-relative">
-                <Icon name={icon} className="tw-w-[60px] tw-h-[60px]" />
-                <div className="content tw-mt-6 tw-relative tw-z-10">
-                    <h3 className="tw-text-secondary tw-m-0">{title}</h3>
-                    <p className="tw-leading-normal tw-mt-3">{description}</p>
+                <Icon name={icon} className="tw-h-[60px] tw-w-[60px]" />
+                <div className="content tw-relative tw-z-10 tw-mt-6">
+                    <h3 className="tw-m-0 tw-text-secondary">{title}</h3>
+                    <p className="tw-mt-3 tw-leading-normal">{description}</p>
                 </div>
                 <Anchor className="link-overlay" path={path}>
                     {title}
diff --git a/src/components/image-box/image-box-01.tsx b/src/components/image-box/image-box-01.tsx
index fa2b67a08..10693c597 100644
--- a/src/components/image-box/image-box-01.tsx
+++ b/src/components/image-box/image-box-01.tsx
@@ -13,13 +13,13 @@ export type ImageBoxProps = {
 const ImageBox = forwardRef<HTMLDivElement, ImageBoxProps>(
     ({ image, title, description, path, pathText }, ref) => {
         return (
-            <div ref={ref} className="image-box tw-relative tw-group">
+            <div ref={ref} className="image-box tw-group tw-relative">
                 {image?.src && (
                     <img src={image.src} alt={image?.alt || title} className="tw-mb-6" />
                 )}
-                <h3 className="tw-text-secondary tw-leading-normal tw-m-0">{title}</h3>
-                <p className="tw-leading-relaxed tw-mt-2.5 tw-mb-[34px]">{description}</p>
-                <span className="tw-text-md tw-font-bold tw-leading-none tw-inline-flex tw-items-center tw-py-[5px] tw-text-secondary-light tw-transition-colors tw-duration-300 group-hover:tw-text-primary">
+                <h3 className="tw-m-0 tw-leading-normal tw-text-secondary">{title}</h3>
+                <p className="tw-mb-[34px] tw-mt-2.5 tw-leading-relaxed">{description}</p>
+                <span className="tw-inline-flex tw-items-center tw-py-[5px] tw-text-md tw-font-bold tw-leading-none tw-text-secondary-light tw-transition-colors tw-duration-300 group-hover:tw-text-primary">
                     {pathText} <i className="far fa-long-arrow-right tw-ml-3.5 tw-text-[16px]" />
                 </span>
                 <Anchor className="link-overlay" path={path}>
diff --git a/src/components/image-box/image-box-02.tsx b/src/components/image-box/image-box-02.tsx
index 5363a7a52..19411b4bb 100644
--- a/src/components/image-box/image-box-02.tsx
+++ b/src/components/image-box/image-box-02.tsx
@@ -18,18 +18,18 @@ const ImageBox = forwardRef<HTMLDivElement, ImageBoxProps>(
             <div
                 ref={ref}
                 className={clsx(
-                    "image-box tw-relative tw-text-center tw-group tw-bg-white tw-pt-10 tw-pb-7.5 tw-px-5 tw-rounded",
-                    "before:tw-absolute before:tw-content-[''] before:tw-z-1 before:tw-inset-0 before:tw-shadow-lg before:tw-shadow-heading/10 before:tw-rounded-b before:tw-transition-opacity before:tw-opacity-0",
+                    "image-box tw-group tw-relative tw-rounded tw-bg-white tw-px-5 tw-pb-7.5 tw-pt-10 tw-text-center",
+                    "before:tw-absolute before:tw-inset-0 before:tw-z-1 before:tw-rounded-b before:tw-opacity-0 before:tw-shadow-lg before:tw-shadow-heading/10 before:tw-transition-opacity before:tw-content-['']",
                     "hover:before:tw-opacity-100",
                     className
                 )}
             >
                 {image?.src && (
-                    <img src={image.src} alt={image?.alt || title} className="tw-mb-6 tw-mx-auto" />
+                    <img src={image.src} alt={image?.alt || title} className="tw-mx-auto tw-mb-6" />
                 )}
-                <h3 className="tw-text-secondary tw-leading-normal tw-text-xl tw-m-0">{title}</h3>
-                <p className="tw-leading-relaxed tw-mt-2.5 tw-mb-[34px]">{description}</p>
-                <span className="tw-text-md tw-font-bold tw-leading-none tw-inline-flex tw-items-center tw-py-[5px] tw-text-secondary-light tw-transition-colors tw-duration-300 group-hover:tw-text-primary">
+                <h3 className="tw-m-0 tw-text-xl tw-leading-normal tw-text-secondary">{title}</h3>
+                <p className="tw-mb-[34px] tw-mt-2.5 tw-leading-relaxed">{description}</p>
+                <span className="tw-inline-flex tw-items-center tw-py-[5px] tw-text-md tw-font-bold tw-leading-none tw-text-secondary-light tw-transition-colors tw-duration-300 group-hover:tw-text-primary">
                     {pathText} <i className="far fa-long-arrow-right tw-ml-3.5 tw-text-[16px]" />
                 </span>
                 <Anchor className="link-overlay" path={path}>
diff --git a/src/components/image-box/image-box-03.tsx b/src/components/image-box/image-box-03.tsx
index 3b92a81e6..8d621fcd7 100644
--- a/src/components/image-box/image-box-03.tsx
+++ b/src/components/image-box/image-box-03.tsx
@@ -13,13 +13,13 @@ export type ImageBoxProps = {
 const ImageBox = forwardRef<HTMLDivElement, ImageBoxProps>(
     ({ image, title, description, path, pathText }, ref) => {
         return (
-            <div ref={ref} className="image-box tw-relative tw-group tw-text-center">
+            <div ref={ref} className="image-box tw-group tw-relative tw-text-center">
                 {image?.src && (
-                    <img src={image.src} alt={image?.alt || title} className="tw-mb-6 tw-mx-auto" />
+                    <img src={image.src} alt={image?.alt || title} className="tw-mx-auto tw-mb-6" />
                 )}
-                <h3 className="tw-leading-normal tw-text-xl tw-m-0">{title}</h3>
-                <p className="tw-leading-relaxed tw-mt-2.5 tw-mb-[34px]">{description}</p>
-                <span className="tw-text-md tw-font-bold tw-leading-none tw-flex tw-items-center tw-justify-center tw-px-5 tw-min-h-[40px] tw-bg-transparent tw-rounded tw-text-secondary-light tw-transition group-hover:tw-bg-light-100 group-hover:tw-text-primary">
+                <h3 className="tw-m-0 tw-text-xl tw-leading-normal">{title}</h3>
+                <p className="tw-mb-[34px] tw-mt-2.5 tw-leading-relaxed">{description}</p>
+                <span className="tw-flex tw-min-h-[40px] tw-items-center tw-justify-center tw-rounded tw-bg-transparent tw-px-5 tw-text-md tw-font-bold tw-leading-none tw-text-secondary-light tw-transition group-hover:tw-bg-light-100 group-hover:tw-text-primary">
                     {pathText} <i className="far fa-long-arrow-right tw-ml-3.5 tw-text-[16px]" />
                 </span>
                 <Anchor className="link-overlay" path={path}>
diff --git a/src/components/image-box/image-box-04.tsx b/src/components/image-box/image-box-04.tsx
index 246a24ae1..ebcf23d4f 100644
--- a/src/components/image-box/image-box-04.tsx
+++ b/src/components/image-box/image-box-04.tsx
@@ -15,12 +15,12 @@ const ImageBox = forwardRef<HTMLDivElement, ImageBoxProps>(
             <div
                 ref={ref}
                 className={clsx(
-                    "image-box tw-relative tw-pt-[35px] tw-px-[24px] tw-bg-white tw-shadow-lg tw-shadow-heading/10 tw-bg-no-repeat",
+                    "image-box tw-relative tw-bg-white tw-bg-no-repeat tw-px-[24px] tw-pt-[35px] tw-shadow-lg tw-shadow-heading/10",
                     className
                 )}
                 style={{ backgroundImage: `url(${image?.src})` }}
             >
-                <h3 className="tw-text-lg md:tw-text-xl tw-leading-normal tw-text-secondary tw-mb-0">
+                <h3 className="tw-mb-0 tw-text-lg tw-leading-normal tw-text-secondary md:tw-text-xl">
                     {title}
                 </h3>
                 <p className="tw-mt-[5px]">{description}</p>
diff --git a/src/components/markdown-renderer/index.tsx b/src/components/markdown-renderer/index.tsx
index 2ae6aed7f..90ffc017b 100644
--- a/src/components/markdown-renderer/index.tsx
+++ b/src/components/markdown-renderer/index.tsx
@@ -17,7 +17,7 @@ const MarkdownRenderer = ({ content, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-prose tw-text-base tw-max-w-none prose-strong:tw-font-bold md:prose-h3:tw-text-3xl first:prose-img:tw-mt-0 prose-blockquote:tw-border-l-primary md:prose-blockquote:tw-mt-[50px] md:prose-blockquote:tw-mb-11 md:prose-blockquote:tw-ml-12 prose-blockquote:tw-text-lg prose-blockquote:tw-leading-relaxed prose-blockquote:tw-not-italic",
+                "tw-prose tw-max-w-none tw-text-base prose-blockquote:tw-border-l-primary prose-blockquote:tw-text-lg prose-blockquote:tw-not-italic prose-blockquote:tw-leading-relaxed prose-strong:tw-font-bold first:prose-img:tw-mt-0 md:prose-h3:tw-text-3xl md:prose-blockquote:tw-mb-11 md:prose-blockquote:tw-ml-12 md:prose-blockquote:tw-mt-[50px]",
                 className
             )}
             dangerouslySetInnerHTML={{
diff --git a/src/components/menu/main-menu/index.tsx b/src/components/menu/main-menu/index.tsx
index 28ea96fa1..0419cce14 100644
--- a/src/components/menu/main-menu/index.tsx
+++ b/src/components/menu/main-menu/index.tsx
@@ -41,7 +41,7 @@ const MainMenu = ({ className, hoverStyle, menu, color, align }: TProps) => {
                         <li
                             key={id}
                             className={clsx(
-                                "tw-inline-block tw-px-2.5 2xl:tw-px-[15px] tw-py-[29px] tw-group",
+                                "tw-group tw-inline-block tw-px-2.5 tw-py-[29px] 2xl:tw-px-[15px]",
                                 submenu && "tw-relative"
                             )}
                             role="none"
@@ -64,7 +64,7 @@ const MainMenu = ({ className, hoverStyle, menu, color, align }: TProps) => {
                             {submenu && (
                                 <Submenu
                                     menu={submenu}
-                                    className="group-hover:tw-visible group-hover:tw-opacity-100 group-hover:tw-mt-0 group-hover:tw-pointer-events-auto group-focus-within:tw-visible group-focus-within:tw-opacity-100 group-focus-within:tw-mt-0 group-focus-within:tw-pointer-events-auto"
+                                    className="group-focus-within:tw-pointer-events-auto group-focus-within:tw-visible group-focus-within:tw-mt-0 group-focus-within:tw-opacity-100 group-hover:tw-pointer-events-auto group-hover:tw-visible group-hover:tw-mt-0 group-hover:tw-opacity-100"
                                     role="menu"
                                 />
                             )}
@@ -72,7 +72,7 @@ const MainMenu = ({ className, hoverStyle, menu, color, align }: TProps) => {
                                 <Megamenu
                                     menu={megamenu}
                                     align={align}
-                                    className="group-hover:tw-visible group-hover:tw-opacity-100 group-hover:tw-mt-0 group-hover:tw-pointer-events-auto group-focus-within:tw-visible group-focus-within:tw-opacity-100 group-focus-within:tw-mt-0 group-focus-within:tw-pointer-events-auto"
+                                    className="group-focus-within:tw-pointer-events-auto group-focus-within:tw-visible group-focus-within:tw-mt-0 group-focus-within:tw-opacity-100 group-hover:tw-pointer-events-auto group-hover:tw-visible group-hover:tw-mt-0 group-hover:tw-opacity-100"
                                 />
                             )}
                         </li>
diff --git a/src/components/menu/main-menu/megamenu.tsx b/src/components/menu/main-menu/megamenu.tsx
index baf90df97..31b4eaf66 100644
--- a/src/components/menu/main-menu/megamenu.tsx
+++ b/src/components/menu/main-menu/megamenu.tsx
@@ -13,7 +13,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-w-[1170px] tw-flex tw-flex-wrap tw-absolute tw-z-20 tw-top-full tw-mt-5 tw-invisible tw-opacity-0 tw-pt-7.5 tw-pb-[34px] tw-px-3.8 tw-shadow-2md tw-shadow-black/5 tw-bg-white tw-border-b-4 tw-border-b-primary tw-transition-all tw-duration-300",
+                "tw-invisible tw-absolute tw-top-full tw-z-20 tw-mt-5 tw-flex tw-w-[1170px] tw-flex-wrap tw-border-b-4 tw-border-b-primary tw-bg-white tw-px-3.8 tw-pb-[34px] tw-pt-7.5 tw-opacity-0 tw-shadow-2md tw-shadow-black/5 tw-transition-all tw-duration-300",
                 align === "left" && "tw-left-0",
                 align === "center" && "tw-left-1/2 -tw-translate-x-1/2",
                 className
@@ -24,7 +24,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                 <div
                     key={id}
                     className={clsx(
-                        "tw-px-3.8 tw-shrink-0 tw-grow-0",
+                        "tw-shrink-0 tw-grow-0 tw-px-3.8",
                         submenu && "tw-w-1/4 tw-basis-1/4",
                         banner && "tw-w-1/2 tw-basis-1/2"
                     )}
@@ -37,7 +37,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                                     <Anchor
                                         path={nav.path}
                                         className={clsx(
-                                            "tw-leading-relaxed tw-block tw-font-medium tw-py-2 hover:tw-text-heading",
+                                            "tw-block tw-py-2 tw-font-medium tw-leading-relaxed hover:tw-text-heading",
                                             nav.status === "coming soon" && "tw-pointer-events-none"
                                         )}
                                     >
@@ -48,7 +48,7 @@ const Megamenu = ({ className, align, menu, ...rest }: TProps) => {
                                                     nav.status === "hot" ? "gradient" : "primary"
                                                 }
                                                 size="xs"
-                                                className="tw-ml-2.5 tw-font-bold tw-tracking-wide tw-uppercase"
+                                                className="tw-ml-2.5 tw-font-bold tw-uppercase tw-tracking-wide"
                                             >
                                                 {nav.status}
                                             </Badge>
diff --git a/src/components/menu/main-menu/nav-link.tsx b/src/components/menu/main-menu/nav-link.tsx
index c1c9c4150..e60697286 100644
--- a/src/components/menu/main-menu/nav-link.tsx
+++ b/src/components/menu/main-menu/nav-link.tsx
@@ -28,11 +28,11 @@ const NavLink = ({
             path={path}
             id={id}
             className={clsx(
-                "tw-font-medium 2xl:tw-text-[16px] tw-flex tw-items-center tw-leading-snug",
+                "tw-flex tw-items-center tw-font-medium tw-leading-snug 2xl:tw-text-[16px]",
                 color === "light" && "tw-text-white hover:tw-text-white",
                 color === "dark" && "tw-text-secondary",
                 hoverStyle === "B" &&
-                    "tw-relative before:tw-absolute before:tw-content-[''] before:tw-left-0 before:tw-bottom-0 before:tw-w-0 before:tw-h-px before:tw-transition-all before:tw-duration-300 hover:before:tw-w-full",
+                    "tw-relative before:tw-absolute before:tw-bottom-0 before:tw-left-0 before:tw-h-px before:tw-w-0 before:tw-transition-all before:tw-duration-300 before:tw-content-[''] hover:before:tw-w-full",
                 hoverStyle === "B" && color === "dark" && "before:tw-bg-primary",
                 hoverStyle === "B" && color === "light" && "before:tw-bg-white"
             )}
diff --git a/src/components/menu/main-menu/submenu.tsx b/src/components/menu/main-menu/submenu.tsx
index 595d59ec6..54c8c1b2d 100644
--- a/src/components/menu/main-menu/submenu.tsx
+++ b/src/components/menu/main-menu/submenu.tsx
@@ -11,7 +11,7 @@ const Submenu = ({ menu, className, onFocus, ...rest }: TProps) => {
     return (
         <ul
             className={clsx(
-                "tw-absolute tw-z-20 tw-top-full tw-left-0 tw-w-60 tw-mt-5 tw-py-4 tw-transition-all tw-duration-400 tw-bg-white tw-border-b-4 tw-border-b-primary tw-shadow-2md tw-shadow-black/5 tw-visible tw-opacity-0 tw-pointer-events-none",
+                "tw-pointer-events-none tw-visible tw-absolute tw-left-0 tw-top-full tw-z-20 tw-mt-5 tw-w-60 tw-border-b-4 tw-border-b-primary tw-bg-white tw-py-4 tw-opacity-0 tw-shadow-2md tw-shadow-black/5 tw-transition-all tw-duration-400",
                 className
             )}
             {...rest}
@@ -21,7 +21,7 @@ const Submenu = ({ menu, className, onFocus, ...rest }: TProps) => {
                     <Anchor
                         path={path}
                         role="menuitem"
-                        className="tw-flex tw-items-center tw-text-secondary tw-px-7.5 tw-py-2"
+                        className="tw-flex tw-items-center tw-px-7.5 tw-py-2 tw-text-secondary"
                     >
                         {label}
                     </Anchor>
diff --git a/src/components/menu/mobile-menu/expand-button.tsx b/src/components/menu/mobile-menu/expand-button.tsx
index 6b0285c9f..32fad4964 100644
--- a/src/components/menu/mobile-menu/expand-button.tsx
+++ b/src/components/menu/mobile-menu/expand-button.tsx
@@ -3,7 +3,7 @@ const ExpandButton = ({ onClick }: { onClick: () => void }) => {
         <button
             onClick={onClick}
             type="button"
-            className="tw-absolute tw-z-10 tw-top-[11px] tw-right-0 tw-flex tw-justify-center tw-items-center tw-w-10 tw-h-10 tw-text-white tw-rounded-full tw-transition-colors hover:tw-bg-white/20"
+            className="tw-absolute tw-right-0 tw-top-[11px] tw-z-10 tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-full tw-text-white tw-transition-colors hover:tw-bg-white/20"
         >
             <i className="fa fa-chevron-down tw-text-xs" />
         </button>
diff --git a/src/components/menu/mobile-menu/index.tsx b/src/components/menu/mobile-menu/index.tsx
index c5096a8d8..3d88bfdb7 100644
--- a/src/components/menu/mobile-menu/index.tsx
+++ b/src/components/menu/mobile-menu/index.tsx
@@ -30,7 +30,7 @@ const MobileMenu = ({ menu, onClose, isOpen }: TProps) => {
                         return (
                             <li
                                 key={id}
-                                className="tw-relative group tw-border-b tw-border-b-white/[.15] last:tw-border-b-0"
+                                className="group tw-relative tw-border-b tw-border-b-white/[.15] last:tw-border-b-0"
                             >
                                 <NavLink path={path}>{label}</NavLink>
                                 {(submenu || megamenu) && (
diff --git a/src/components/menu/mobile-menu/megamenu.tsx b/src/components/menu/mobile-menu/megamenu.tsx
index c33b259ec..b7f706a2c 100644
--- a/src/components/menu/mobile-menu/megamenu.tsx
+++ b/src/components/menu/mobile-menu/megamenu.tsx
@@ -11,7 +11,7 @@ type TProps = {
 
 const Megamenu = ({ menu, isExpand, className }: TProps) => {
     return (
-        <div className={clsx("tw-py-[14px] tw-border-t tw-border-t-white/[.15]", className)}>
+        <div className={clsx("tw-border-t tw-border-t-white/[.15] tw-py-[14px]", className)}>
             {menu.map(({ id, title, submenu, banner }) => (
                 <div key={id}>
                     <h2 className="tw-sr-only">{title}</h2>
@@ -22,7 +22,7 @@ const Megamenu = ({ menu, isExpand, className }: TProps) => {
                                     <Anchor
                                         path={nav.path}
                                         className={clsx(
-                                            "tw-inline-block tw-text-base tw-font-medium tw-leading-normal tw-py-2.5 tw-text-white/[0.7] hover:tw-text-white",
+                                            "tw-inline-block tw-py-2.5 tw-text-base tw-font-medium tw-leading-normal tw-text-white/[0.7] hover:tw-text-white",
                                             nav.status === "coming soon" &&
                                                 "tw-pointer-events-none",
                                             className
@@ -36,7 +36,7 @@ const Megamenu = ({ menu, isExpand, className }: TProps) => {
                                                     nav.status === "hot" ? "gradient" : "primary"
                                                 }
                                                 size="xs"
-                                                className="tw-ml-2.5 tw-font-bold tw-tracking-wide tw-uppercase"
+                                                className="tw-ml-2.5 tw-font-bold tw-uppercase tw-tracking-wide"
                                             >
                                                 {nav.status}
                                             </Badge>
diff --git a/src/components/menu/mobile-menu/nav-link.tsx b/src/components/menu/mobile-menu/nav-link.tsx
index 7ab2aac49..80c3cc5ba 100644
--- a/src/components/menu/mobile-menu/nav-link.tsx
+++ b/src/components/menu/mobile-menu/nav-link.tsx
@@ -9,7 +9,7 @@ const NavLink = ({ children, path }: TProps) => {
     return (
         <Anchor
             path={path}
-            className="tw-text-[16px] tw-font-medium tw-leading-normal tw-block tw-py-[19px] tw-text-white hover:tw-text-white"
+            className="tw-block tw-py-[19px] tw-text-[16px] tw-font-medium tw-leading-normal tw-text-white hover:tw-text-white"
         >
             {children}
         </Anchor>
diff --git a/src/components/menu/mobile-menu/submenu.tsx b/src/components/menu/mobile-menu/submenu.tsx
index 2caf91cb9..3a9d1f5bd 100644
--- a/src/components/menu/mobile-menu/submenu.tsx
+++ b/src/components/menu/mobile-menu/submenu.tsx
@@ -10,13 +10,13 @@ type TProps = {
 
 const Submenu = ({ menu, isExpand, className }: TProps) => {
     return (
-        <ul className={clsx("tw-py-[14px] tw-border-t tw-border-t-white/[.15]", className)}>
+        <ul className={clsx("tw-border-t tw-border-t-white/[.15] tw-py-[14px]", className)}>
             {menu.map(({ id, label, path }) => (
                 <li key={id} className="tw-relative">
                     <Anchor
                         path={path}
                         className={clsx(
-                            "tw-inline-block tw-text-base tw-font-medium tw-leading-normal tw-py-2.5 tw-text-white/[0.7] hover:tw-text-white",
+                            "tw-inline-block tw-py-2.5 tw-text-base tw-font-medium tw-leading-normal tw-text-white/[0.7] hover:tw-text-white",
                             className
                         )}
                         tabIndex={isExpand ? 0 : -1}
diff --git a/src/components/menu/sidebar-menu/nav-link.tsx b/src/components/menu/sidebar-menu/nav-link.tsx
index b88882767..587c9d651 100644
--- a/src/components/menu/sidebar-menu/nav-link.tsx
+++ b/src/components/menu/sidebar-menu/nav-link.tsx
@@ -13,12 +13,12 @@ const NavLink = ({ children, path }: TProps) => {
         <Anchor
             path={path}
             className={clsx(
-                "tw-relative tw-block tw-py-4 tw-px-10 tw-border hover:tw-text-white ",
-                "before:tw-absolute before:tw-content-[''] before:tw-left-4 before:tw-top-1/2 before:-tw-translate-y-1/2 before:tw-w-1.5 before:tw-h-1.5 before:tw-rounded-full before:tw-border",
+                "tw-relative tw-block tw-border tw-px-10 tw-py-4 hover:tw-text-white",
+                "before:tw-absolute before:tw-left-4 before:tw-top-1/2 before:tw-h-1.5 before:tw-w-1.5 before:-tw-translate-y-1/2 before:tw-rounded-full before:tw-border before:tw-content-['']",
                 router.pathname !== path &&
-                    "tw-border-gray-500 hover:tw-bg-primary hover:tw-border-primary before:tw-border-gray-400 hover:before:tw-border-white",
+                    "tw-border-gray-500 before:tw-border-gray-400 hover:tw-border-primary hover:tw-bg-primary hover:before:tw-border-white",
                 router.pathname === path &&
-                    "tw-bg-primary tw-border-primary tw-text-white before:tw-border-white"
+                    "tw-border-primary tw-bg-primary tw-text-white before:tw-border-white"
             )}
         >
             {children}
diff --git a/src/components/modals/enroll-modal.tsx b/src/components/modals/enroll-modal.tsx
index 58acb1c1c..b3145a966 100644
--- a/src/components/modals/enroll-modal.tsx
+++ b/src/components/modals/enroll-modal.tsx
@@ -16,7 +16,7 @@ const EnrollModal = ({ show, onClose }: TProps) => {
                 <ModalClose onClose={onClose}>x</ModalClose>
             </ModalHeader>
             <ModalBody className="tw-p-14 tw-text-center">
-                <i className="far fa-lock tw-text-8xl tw-text-primary tw-mb-7.5" />
+                <i className="far fa-lock tw-mb-7.5 tw-text-8xl tw-text-primary" />
                 <h5>You have enrolled in this course.</h5>
                 {!isLoggedIn && (
                     <p>
diff --git a/src/components/pagination/pagination-01-button.tsx b/src/components/pagination/pagination-01-button.tsx
index 6f26b2317..3d4285c3e 100644
--- a/src/components/pagination/pagination-01-button.tsx
+++ b/src/components/pagination/pagination-01-button.tsx
@@ -30,12 +30,12 @@ const Pagination = ({ numberOfPages, currentPage, className }: TProps) => {
 
     return (
         <nav aria-label="Page navigation">
-            <ul className={clsx("pagination tw-text-[16px] tw-text-center", className)}>
+            <ul className={clsx("pagination tw-text-center tw-text-[16px]", className)}>
                 <li className="tw-inline-block tw-px-[5px]">
                     <button
                         type="button"
                         className={clsx(
-                            "tw-font-extrabold tw-uppercase tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full tw-text-gray-400 -tw-tracking-tightest hover:tw-text-heading",
+                            "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-font-extrabold tw-uppercase tw-leading-[48px] -tw-tracking-tightest tw-text-gray-400 hover:tw-text-heading",
                             isFirst && "tw-pointer-events-none tw-opacity-50"
                         )}
                         onClick={() => pagiHandler(previousPage)}
@@ -48,7 +48,7 @@ const Pagination = ({ numberOfPages, currentPage, className }: TProps) => {
                         <button
                             type="button"
                             className={clsx(
-                                "tw-font-extrabold tw-uppercase tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full -tw-tracking-tightest hover:tw-text-heading",
+                                "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-font-extrabold tw-uppercase tw-leading-[48px] -tw-tracking-tightest hover:tw-text-heading",
                                 currentPage !== i + 1 && "tw-text-gray-400",
                                 currentPage === i + 1 &&
                                     "tw-pointer-events-none tw-bg-gray-500 tw-text-heading"
@@ -64,7 +64,7 @@ const Pagination = ({ numberOfPages, currentPage, className }: TProps) => {
                     <button
                         type="button"
                         className={clsx(
-                            "tw-font-extrabold tw-uppercase tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full tw-text-gray-400 -tw-tracking-tightest hover:tw-text-heading",
+                            "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-font-extrabold tw-uppercase tw-leading-[48px] -tw-tracking-tightest tw-text-gray-400 hover:tw-text-heading",
                             isLast && "tw-pointer-events-none tw-opacity-50"
                         )}
                         onClick={() => pagiHandler(nextPage)}
diff --git a/src/components/pagination/pagination-01.tsx b/src/components/pagination/pagination-01.tsx
index 64fcd7590..17b593f15 100644
--- a/src/components/pagination/pagination-01.tsx
+++ b/src/components/pagination/pagination-01.tsx
@@ -54,14 +54,14 @@ const Pagination = ({ currentPage, numberOfPages, rootPage = "blog", className }
         <nav aria-label="Page navigation">
             <ul
                 className={clsx(
-                    "pagination tw-font-extrabold tw-uppercase tw-text-[16px] tw-text-center",
+                    "pagination tw-text-center tw-text-[16px] tw-font-extrabold tw-uppercase",
                     className
                 )}
             >
                 {!isFirst && (
                     <li className="tw-inline-block tw-px-[5px]">
                         <Anchor
-                            className="tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full tw-text-gray-400 -tw-tracking-tightest hover:tw-text-heading"
+                            className="tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-leading-[48px] -tw-tracking-tightest tw-text-gray-400 hover:tw-text-heading"
                             path={previousPage}
                         >
                             Prev
@@ -75,7 +75,7 @@ const Pagination = ({ currentPage, numberOfPages, rootPage = "blog", className }
                         {pagi !== "dots" && (
                             <Anchor
                                 className={clsx(
-                                    "tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full -tw-tracking-tightest hover:tw-text-heading",
+                                    "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-leading-[48px] -tw-tracking-tightest hover:tw-text-heading",
                                     currentPage !== pagi && "tw-text-gray-400",
                                     currentPage === pagi &&
                                         "tw-pointer-events-none tw-bg-gray-500 tw-text-heading"
@@ -95,7 +95,7 @@ const Pagination = ({ currentPage, numberOfPages, rootPage = "blog", className }
                 {!isLast && (
                     <li className="tw-inline-block tw-px-[5px]">
                         <Anchor
-                            className="tw-block tw-text-center tw-w-12 tw-h-12 tw-leading-[48px] tw-rounded-full tw-text-gray-400 -tw-tracking-tightest hover:tw-text-heading"
+                            className="tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-leading-[48px] -tw-tracking-tightest tw-text-gray-400 hover:tw-text-heading"
                             path={nextPage}
                         >
                             Next
diff --git a/src/components/quote-item/index.tsx b/src/components/quote-item/index.tsx
index a79433c65..f71edb0b1 100644
--- a/src/components/quote-item/index.tsx
+++ b/src/components/quote-item/index.tsx
@@ -11,15 +11,15 @@ const Testimonial05 = ({ title, name, designation, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "testimonial tw-relative tw-z-10 md:tw-max-w-[770px] tw-mx-auto tw-text-center",
+                "testimonial tw-relative tw-z-10 tw-mx-auto tw-text-center md:tw-max-w-[770px]",
                 className
             )}
         >
-            <h3 className="tw-text-lg sm:tw-text-2xl tw-mb-5 md:tw-text-[34px] md:tw-leading-normal md:tw-mb-10">
+            <h3 className="tw-mb-5 tw-text-lg sm:tw-text-2xl md:tw-mb-10 md:tw-text-[34px] md:tw-leading-normal">
                 {title}
             </h3>
-            <h4 className="tw-mb-0 tw-tracking-wider tw-uppercase tw-text-h6">{name}</h4>
-            <span className="tw-block tw-mt-2.5 tw-text-md tw-text-300">/ {designation}</span>
+            <h4 className="tw-mb-0 tw-text-h6 tw-uppercase tw-tracking-wider">{name}</h4>
+            <span className="tw-text-300 tw-mt-2.5 tw-block tw-text-md">/ {designation}</span>
         </div>
     );
 };
diff --git a/src/components/review/index.tsx b/src/components/review/index.tsx
index 2c693ba55..d33782d7a 100644
--- a/src/components/review/index.tsx
+++ b/src/components/review/index.tsx
@@ -15,19 +15,19 @@ const Review = ({ user, rating, title, review }: TProps) => {
     return (
         <div className="review tw-flex tw-flex-wrap">
             {user?.avatar?.src && (
-                <figure className="tw-w-[80px] tw-h-[80px] child:tw-rounded-full">
+                <figure className="tw-h-[80px] tw-w-[80px] child:tw-rounded-full">
                     <img src={user.avatar.src} alt={user.avatar?.alt || user.name} />
                 </figure>
             )}
 
-            <div className="tw-w-full tw-pl-0 tw-pt-7.5 sm:tw-pt-0 sm:tw-w-[calc(100%_-_80px)] sm:tw-pl-8 md:tw-pl-[45px]">
+            <div className="tw-w-full tw-pl-0 tw-pt-7.5 sm:tw-w-[calc(100%_-_80px)] sm:tw-pl-8 sm:tw-pt-0 md:tw-pl-[45px]">
                 <div className="tw-flex tw-items-center tw-justify-between">
-                    <h4 className="tw-text-base tw-uppercase tw-tracking-wider tw-mb-0">
+                    <h4 className="tw-mb-0 tw-text-base tw-uppercase tw-tracking-wider">
                         {user.name}
                     </h4>
                     <StarRating rating={rating} space="xs" />
                 </div>
-                <h5 className="tw-text-base tw-mt-3.8 tw-mb-[5px]">{title}</h5>
+                <h5 className="tw-mb-[5px] tw-mt-3.8 tw-text-base">{title}</h5>
                 <p>{review}</p>
             </div>
         </div>
diff --git a/src/components/section-title/index.tsx b/src/components/section-title/index.tsx
index e4cd85a6b..e2151a504 100644
--- a/src/components/section-title/index.tsx
+++ b/src/components/section-title/index.tsx
@@ -42,7 +42,7 @@ const SectionTitle = forwardRef<HTMLDivElement, TProps>(
                 {subtitle && (
                     <span
                         className={clsx(
-                            "tw-font-medium tw-text-base tw-leading-none -tw-tracking-tightest tw-block tw-mb-2.5 tw-uppercase",
+                            "tw-mb-2.5 tw-block tw-text-base tw-font-medium tw-uppercase tw-leading-none -tw-tracking-tightest",
                             color === "A" && "tw-text-secondary-light",
                             color === "B" && "tw-text-secondary",
                             subtitleClass
@@ -53,11 +53,11 @@ const SectionTitle = forwardRef<HTMLDivElement, TProps>(
 
                 <h2
                     className={clsx(
-                        "title tw-m-0 child:tw-text-primary child:tw-font-normal",
+                        "title tw-m-0 child:tw-font-normal child:tw-text-primary",
                         color === "A" && "tw-text-secondary",
                         color === "C" && "tw-text-white",
                         titleSize === "large" &&
-                            "tw-text-4xl lg:tw-text-5xl tw-leading-heading lg:tw-leading-heading",
+                            "tw-text-4xl tw-leading-heading lg:tw-text-5xl lg:tw-leading-heading",
                         titleClass
                     )}
                     dangerouslySetInnerHTML={{ __html: title }}
diff --git a/src/components/social-share/layout-01/index.tsx b/src/components/social-share/layout-01/index.tsx
index e12a10e85..69dd8fadf 100644
--- a/src/components/social-share/layout-01/index.tsx
+++ b/src/components/social-share/layout-01/index.tsx
@@ -19,17 +19,17 @@ const SocialShare = () => {
     };
 
     return (
-        <div className="tw-inline-flex tw-items-center tw-relative tw-cursor-pointer tw-transition-colors tw-text-body tw-group hover:tw-text-primary">
-            <h6 className="tw-text-md tw-mb-0 tw-mr-3.8 tw-text-current">Share this course</h6>
+        <div className="tw-group tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-text-body tw-transition-colors hover:tw-text-primary">
+            <h6 className="tw-mb-0 tw-mr-3.8 tw-text-md tw-text-current">Share this course</h6>
             <i className="far fa-share-alt" />
 
             <div
                 className={clsx(
-                    "tw-absolute tw-bottom-full tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-2.5 tw-w-auto tw-whitespace-nowrap tw-px-1 tw-bg-white tw-rounded tw-shadow-3sm tw-shadow-black/[.06]",
-                    "tw-drop-shadow-[0_2px_20px_rgba(0,0,0,0.06)] tw-z-10 tw-select-none tw-transition-all tw-duration-300 tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] tw-invisible tw-opacity-0",
-                    "before:tw-absolute before:tw-content-[''] before:tw-top-full before:tw-left-1/2 before:-tw-translate-x-1/2 before:tw-border-t-8 before:tw-border-t-white before:tw-border-x-[9px] before:tw-border-x-transparent before:tw-invisible before:tw-opacity-0",
-                    "after:tw-absolute after:tw-content-[''] after:tw-left-0 after:-tw-bottom-6 after:tw-w-full after:tw-h-7",
-                    "group-hover:tw-visible group-hover:tw-opacity-100 group-hover:-tw-translate-x-1/2 group-hover:-tw-translate-y-5 group-hover:before:tw-visible group-hover:before:tw-opacity-100"
+                    "tw-absolute tw-bottom-full tw-left-1/2 tw-w-auto -tw-translate-x-1/2 -tw-translate-y-2.5 tw-whitespace-nowrap tw-rounded tw-bg-white tw-px-1 tw-shadow-3sm tw-shadow-black/[.06]",
+                    "tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] tw-invisible tw-z-10 tw-select-none tw-opacity-0 tw-drop-shadow-[0_2px_20px_rgba(0,0,0,0.06)] tw-transition-all tw-duration-300",
+                    "before:tw-invisible before:tw-absolute before:tw-left-1/2 before:tw-top-full before:-tw-translate-x-1/2 before:tw-border-x-[9px] before:tw-border-t-8 before:tw-border-x-transparent before:tw-border-t-white before:tw-opacity-0 before:tw-content-['']",
+                    "after:tw-absolute after:-tw-bottom-6 after:tw-left-0 after:tw-h-7 after:tw-w-full after:tw-content-['']",
+                    "group-hover:tw-visible group-hover:-tw-translate-x-1/2 group-hover:-tw-translate-y-5 group-hover:tw-opacity-100 group-hover:before:tw-visible group-hover:before:tw-opacity-100"
                 )}
             >
                 <SocialLink
diff --git a/src/components/social-share/layout-01/social-link.tsx b/src/components/social-share/layout-01/social-link.tsx
index d62425053..0f67e54a2 100644
--- a/src/components/social-share/layout-01/social-link.tsx
+++ b/src/components/social-share/layout-01/social-link.tsx
@@ -12,10 +12,10 @@ const SocialLink = ({ children, href, label, onClick }: TProps) => {
     return (
         <a
             className={clsx(
-                "tw-relative tw-inline-block tw-text-base tw-py-2.5 tw-px-3.8 tw-text-gray-400",
-                "before:tw-absolute before:tw-content-[''] before:tw-border-[7px] before:tw-border-transparent before:tw-border-t-primary before:tw-bottom-full before:left-[calc(50%_-_7px) before:tw-transition-all before:tw-duration-300 before:tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] before:tw-pointer-events-none before:tw-z-20 before:tw-mb-[-13px] before:tw-invisible before:tw-opacity-0",
-                "after:tw-absolute after:tw-content-[attr(aria-label)] after:tw-bg-primary after:tw-text-white after:tw-py-2 after:tw-px-2.5 after:tw-leading-none after:tw-whitespace-nowrap after:tw-rounded after:tw-shadow-xs after:tw-shadow-black/30 after:tw-bottom-full after:tw-left-1/2 after:-tw-translate-x-1/2 after:tw-transition-all after:tw-duration-300 after:tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] after:tw-pointer-events-none after:tw-z-10 after:tw-invisible after:tw-opacity-0",
-                "hover:before:tw-visible hover:before:tw-opacity-100 hover:before:tw-delay-100 hover:before:-tw-translate-y-2 hover:after:tw-visible hover:after:tw-opacity-100 hover:after:tw-delay-100 hover:after:-tw-translate-y-2"
+                "tw-relative tw-inline-block tw-px-3.8 tw-py-2.5 tw-text-base tw-text-gray-400",
+                "before:left-[calc(50%_-_7px) before:tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] before:tw-pointer-events-none before:tw-invisible before:tw-absolute before:tw-bottom-full before:tw-z-20 before:tw-mb-[-13px] before:tw-border-[7px] before:tw-border-transparent before:tw-border-t-primary before:tw-opacity-0 before:tw-transition-all before:tw-duration-300 before:tw-content-['']",
+                "after:tw-ease-[cubic-bezier(.71,1.7,.77,1.24)] after:tw-pointer-events-none after:tw-invisible after:tw-absolute after:tw-bottom-full after:tw-left-1/2 after:tw-z-10 after:-tw-translate-x-1/2 after:tw-whitespace-nowrap after:tw-rounded after:tw-bg-primary after:tw-px-2.5 after:tw-py-2 after:tw-leading-none after:tw-text-white after:tw-opacity-0 after:tw-shadow-xs after:tw-shadow-black/30 after:tw-transition-all after:tw-duration-300 after:tw-content-[attr(aria-label)]",
+                "hover:before:tw-visible hover:before:-tw-translate-y-2 hover:before:tw-opacity-100 hover:before:tw-delay-100 hover:after:tw-visible hover:after:-tw-translate-y-2 hover:after:tw-opacity-100 hover:after:tw-delay-100"
             )}
             href={href}
             target="_blank"
diff --git a/src/components/social-share/layout-03.tsx b/src/components/social-share/layout-03.tsx
index 386f633fa..8a169dbea 100644
--- a/src/components/social-share/layout-03.tsx
+++ b/src/components/social-share/layout-03.tsx
@@ -26,19 +26,19 @@ const SocialShare = ({ label, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-inline-flex tw-items-center tw-relative tw-cursor-pointer tw-group",
+                "tw-group tw-relative tw-inline-flex tw-cursor-pointer tw-items-center",
                 className
             )}
         >
-            <p className="tw-mb-0 tw-mr-3.8 tw-font-medium tw-hidden sm:tw-block">{label}</p>
+            <p className="tw-mb-0 tw-mr-3.8 tw-hidden tw-font-medium sm:tw-block">{label}</p>
 
-            <i className="fas fa-share-alt tw-w-14 tw-h-14 tw-leading-[52px] tw-text-lg tw-text-center tw-text-primary tw-border-2 tw-border-gray-550 tw-rounded-full tw-transition-colors tw-duration-300 group-hover:tw-bg-primary group-hover:tw-border-primary group-hover:tw-text-white" />
+            <i className="fas fa-share-alt tw-h-14 tw-w-14 tw-rounded-full tw-border-2 tw-border-gray-550 tw-text-center tw-text-lg tw-leading-[52px] tw-text-primary tw-transition-colors tw-duration-300 group-hover:tw-border-primary group-hover:tw-bg-primary group-hover:tw-text-white" />
             <Social color="light" tooltip flyout>
                 <SocialLink
                     label="Facebook"
                     href={`https://www.facebook.com/sharer/sharer.php?u=${href}`}
                     onClick={clickHandler}
-                    className="tw-py-2.5 tw-px-3"
+                    className="tw-px-3 tw-py-2.5"
                 >
                     <i className="fab fa-facebook-f" />
                 </SocialLink>
@@ -46,7 +46,7 @@ const SocialShare = ({ label, className }: TProps) => {
                     label="Twitter"
                     href={`https://twitter.com/intent/tweet?url=${href}`}
                     onClick={clickHandler}
-                    className="tw-py-2.5 tw-px-3"
+                    className="tw-px-3 tw-py-2.5"
                 >
                     <i className="fab fa-twitter" />
                 </SocialLink>
@@ -54,7 +54,7 @@ const SocialShare = ({ label, className }: TProps) => {
                     label="Linkedin"
                     href={`https://www.linkedin.com/shareArticle?url=${href}`}
                     onClick={clickHandler}
-                    className="tw-py-2.5 tw-px-3"
+                    className="tw-px-3 tw-py-2.5"
                 >
                     <i className="fab fa-linkedin" />
                 </SocialLink>
diff --git a/src/components/spearker-card/index.tsx b/src/components/spearker-card/index.tsx
index 209700643..6cec75030 100644
--- a/src/components/spearker-card/index.tsx
+++ b/src/components/spearker-card/index.tsx
@@ -8,13 +8,13 @@ type TProps = Omit<ISpeaker, "id"> & {
 const SpeakerCard = ({ className, name, designation, image }: TProps) => {
     return (
         <div className={clsx("speaker tw-text-center", className)}>
-            <div className="tw-mb-7 tw-w-[170px] tw-h-[170px] tw-mx-auto">
+            <div className="tw-mx-auto tw-mb-7 tw-h-[170px] tw-w-[170px]">
                 {image?.src && (
                     <img
                         src={image.src}
                         alt={image?.alt || name}
                         width="200"
-                        className="tw-object-cover tw-rounded-full tw-w-full"
+                        className="tw-w-full tw-rounded-full tw-object-cover"
                     />
                 )}
             </div>
diff --git a/src/components/team-card/index.tsx b/src/components/team-card/index.tsx
index a5fe31abc..705c5f908 100644
--- a/src/components/team-card/index.tsx
+++ b/src/components/team-card/index.tsx
@@ -29,7 +29,7 @@ const TeamCard = forwardRef<HTMLDivElement, TProps>(
                             color="dark"
                             size="lg"
                             tooltip
-                            className="tw-absolute tw-justify-center tw-bottom-5 tw-left-5 tw-right-5 tw-py-2.5 tw-opacity-0 tw-bg-white tw-transition-opacity tw-duration-300 group-hover:tw-opacity-100"
+                            className="tw-absolute tw-bottom-5 tw-left-5 tw-right-5 tw-justify-center tw-bg-white tw-py-2.5 tw-opacity-0 tw-transition-opacity tw-duration-300 group-hover:tw-opacity-100"
                         >
                             {socials.map((social) => (
                                 <SocialLink
diff --git a/src/components/testimonial/rating-box.tsx b/src/components/testimonial/rating-box.tsx
index e9d9b6043..8275768d4 100644
--- a/src/components/testimonial/rating-box.tsx
+++ b/src/components/testimonial/rating-box.tsx
@@ -10,12 +10,12 @@ const RatingBox = ({ className, heading, text }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-max-w-[210px] tw-pt-14 tw-px-[25px] tw-pb-9 tw-bg-white tw-rounded tw-shadow-lg tw-shadow-heading/10 tw-text-center",
+                "tw-max-w-[210px] tw-rounded tw-bg-white tw-px-[25px] tw-pb-9 tw-pt-14 tw-text-center tw-shadow-lg tw-shadow-heading/10",
                 className
             )}
         >
             <h3 className="tw-leading-none tw-text-secondary">{heading}</h3>
-            <div className="tw-text-lg tw-text-yellow-100 tw-mt-[5px] tw-mb-2.5">
+            <div className="tw-mb-2.5 tw-mt-[5px] tw-text-lg tw-text-yellow-100">
                 <span className="fa fa-star tw-mx-0.5" />
                 <span className="fa fa-star tw-mx-0.5" />
                 <span className="fa fa-star tw-mx-0.5" />
diff --git a/src/components/testimonial/testimonial-01.tsx b/src/components/testimonial/testimonial-01.tsx
index b6e2363dd..498d9b3a4 100644
--- a/src/components/testimonial/testimonial-01.tsx
+++ b/src/components/testimonial/testimonial-01.tsx
@@ -13,12 +13,12 @@ const Testimonial = ({ name, designation, review, image, className }: TProps) =>
     return (
         <div
             className={clsx(
-                "testimonial tw-flex tw-flex-wrap tw-h-full tw-py-8 tw-px-7 md:tw-py-10 tw-rounded tw-bg-white tw-shadow-md tw-shadow-dark/10",
+                "testimonial tw-flex tw-h-full tw-flex-wrap tw-rounded tw-bg-white tw-px-7 tw-py-8 tw-shadow-md tw-shadow-dark/10 md:tw-py-10",
                 className
             )}
         >
             {image?.src && (
-                <figure className="image tw-flex-auto0 tw-w-[70px]">
+                <figure className="image tw-w-[70px] tw-flex-auto0">
                     <img
                         src={image.src}
                         alt={image?.alt || name}
@@ -30,12 +30,12 @@ const Testimonial = ({ name, designation, review, image, className }: TProps) =>
                 </figure>
             )}
 
-            <div className="content tw-flex-auto0 tw-w-full tw-pt-5 md:tw-pt-0 md:tw-pl-[30px] md:tw-w-[calc(100%_-_70px)]">
-                <p className="tw-text-lg tw-font-medium tw-leading-relaxed tw-mb-6 md:tw-mb-[34px]">
+            <div className="content tw-w-full tw-flex-auto0 tw-pt-5 md:tw-w-[calc(100%_-_70px)] md:tw-pl-[30px] md:tw-pt-0">
+                <p className="tw-mb-6 tw-text-lg tw-font-medium tw-leading-relaxed md:tw-mb-[34px]">
                     {review}
                 </p>
-                <h3 className="tw-mb-0 tw-tracking-wider tw-uppercase tw-text-h6">{name}</h3>
-                <span className="tw-text-md tw-block tw-mt-2 md:tw-mt-[11px] tw-text-gray-300">
+                <h3 className="tw-mb-0 tw-text-h6 tw-uppercase tw-tracking-wider">{name}</h3>
+                <span className="tw-mt-2 tw-block tw-text-md tw-text-gray-300 md:tw-mt-[11px]">
                     {designation}
                 </span>
             </div>
diff --git a/src/components/testimonial/testimonial-02.tsx b/src/components/testimonial/testimonial-02.tsx
index c06d30377..b9a8ce450 100644
--- a/src/components/testimonial/testimonial-02.tsx
+++ b/src/components/testimonial/testimonial-02.tsx
@@ -10,21 +10,21 @@ const Testimonial = ({ title, description, name, designation, image, className }
     return (
         <div
             className={clsx(
-                "testimonial tw-py-7.5 tw-px-5 md:tw-pt-[41px] md:tw-pr-7.5 md:tw-pb-9 md:tw-pl-[50px] tw-bg-white tw-rounded tw-h-full",
+                "testimonial tw-h-full tw-rounded tw-bg-white tw-px-5 tw-py-7.5 md:tw-pb-9 md:tw-pl-[50px] md:tw-pr-7.5 md:tw-pt-[41px]",
                 className
             )}
         >
-            <h3 className="tw-text-xl tw-leading-relaxed tw-mb-3.5">{title}</h3>
+            <h3 className="tw-mb-3.5 tw-text-xl tw-leading-relaxed">{title}</h3>
             <p className="tw-text-lg tw-font-medium tw-leading-relaxed">{description}</p>
             <div className="tw-inline-flex tw-flex-wrap tw-items-center tw-pt-1 md:tw-pt-6">
                 {image?.src && (
-                    <div className="tw-shrink-0 tw-mr-5 tw-w-[70px]">
+                    <div className="tw-mr-5 tw-w-[70px] tw-shrink-0">
                         <img className="tw-rounded-full" src={image.src} alt={image?.alt || name} />
                     </div>
                 )}
 
                 <div className="cite">
-                    <h4 className="tw-leading-tight tw-text-h6 tw-mb-1 tw-tracking-wider tw-uppercase">
+                    <h4 className="tw-mb-1 tw-text-h6 tw-uppercase tw-leading-tight tw-tracking-wider">
                         {name}
                     </h4>
                     <span className="tw-mt-2.5 tw-text-md tw-text-gray-300">/ {designation}</span>
diff --git a/src/components/testimonial/testimonial-03.tsx b/src/components/testimonial/testimonial-03.tsx
index 15ea4b627..b835bfe92 100644
--- a/src/components/testimonial/testimonial-03.tsx
+++ b/src/components/testimonial/testimonial-03.tsx
@@ -10,7 +10,7 @@ const Testimonial03 = ({ description, name, designation, image, className }: TPr
     return (
         <div
             className={clsx(
-                "testimonial tw-py-11 tw-px-[26px] tw-bg-white tw-rounded tw-shadow-lg tw-shadow-heading/10 tw-text-center",
+                "testimonial tw-rounded tw-bg-white tw-px-[26px] tw-py-11 tw-text-center tw-shadow-lg tw-shadow-heading/10",
                 className
             )}
         >
@@ -26,7 +26,7 @@ const Testimonial03 = ({ description, name, designation, image, className }: TPr
             )}
 
             <p className="tw-mb-10 tw-text-lg tw-font-medium tw-text-secondary">{description}</p>
-            <h3 className="tw-tracking-wider tw-uppercase tw-text-h6 tw-mb-2.5">{name}</h3>
+            <h3 className="tw-mb-2.5 tw-text-h6 tw-uppercase tw-tracking-wider">{name}</h3>
             <span className="tw-text-gray-300">/ {designation}</span>
         </div>
     );
diff --git a/src/components/testimonial/testimonial-04.tsx b/src/components/testimonial/testimonial-04.tsx
index a305797d3..730a62ef3 100644
--- a/src/components/testimonial/testimonial-04.tsx
+++ b/src/components/testimonial/testimonial-04.tsx
@@ -9,11 +9,11 @@ const Testimonial04 = ({ title, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-max-w-[270px] tw-py-7.5 tw-px-[26px] tw-bg-white tw-rounded tw-shadow-lg tw-shadow-heading/10",
+                "tw-max-w-[270px] tw-rounded tw-bg-white tw-px-[26px] tw-py-7.5 tw-shadow-lg tw-shadow-heading/10",
                 className
             )}
         >
-            <h3 className="tw-text-secondary tw-text-xl">&quot;{title}&quot;</h3>
+            <h3 className="tw-text-xl tw-text-secondary">&quot;{title}&quot;</h3>
         </div>
     );
 };
diff --git a/src/components/testimonial/testimonial-05.tsx b/src/components/testimonial/testimonial-05.tsx
index 248484897..dec1a6e52 100644
--- a/src/components/testimonial/testimonial-05.tsx
+++ b/src/components/testimonial/testimonial-05.tsx
@@ -13,28 +13,28 @@ const Testimonial05 = ({ description, name, designation, image, className }: TPr
     return (
         <div
             className={clsx(
-                "testimonial lg:tw-max-w-[1000px] tw-mx-auto tw-px-3.8 tw-relative tw-flex tw-flex-wrap tw-items-center",
+                "testimonial tw-relative tw-mx-auto tw-flex tw-flex-wrap tw-items-center tw-px-3.8 lg:tw-max-w-[1000px]",
                 className
             )}
         >
-            <figure className="tw-w-[140px] tw-h-[140px] xl:tw-w-[200px] xl:tw-h-[200px]">
+            <figure className="tw-h-[140px] tw-w-[140px] xl:tw-h-[200px] xl:tw-w-[200px]">
                 {image?.src && (
                     <img
                         src={image.src}
                         alt={image?.alt || name}
-                        className="tw-w-full tw-h-full tw-rounded-full"
+                        className="tw-h-full tw-w-full tw-rounded-full"
                         width={200}
                         height={200}
                         loading="lazy"
                     />
                 )}
             </figure>
-            <div className="tw-w-full tw-mt-5 md:tw-w-[calc(100%_-_140px)] xl:tw-w-[calc(100%_-_200px)] md:tw-mt-0 md:tw-pl-[50px] xl:tw-pl-[100px]">
-                <h3 className="tw-text-2xl lg:tw-text-[34px] tw-font-medium tw-leading-[1.42] tw-mb-7 lg:tw-mb-10">
+            <div className="tw-mt-5 tw-w-full md:tw-mt-0 md:tw-w-[calc(100%_-_140px)] md:tw-pl-[50px] xl:tw-w-[calc(100%_-_200px)] xl:tw-pl-[100px]">
+                <h3 className="tw-mb-7 tw-text-2xl tw-font-medium tw-leading-[1.42] lg:tw-mb-10 lg:tw-text-[34px]">
                     {description}
                 </h3>
-                <h4 className="tw-mb-0 tw-tracking-wider tw-uppercase tw-text-h6">{name}</h4>
-                <span className="tw-block tw-mt-2.5 tw-text-md tw-text-300">/ {designation}</span>
+                <h4 className="tw-mb-0 tw-text-h6 tw-uppercase tw-tracking-wider">{name}</h4>
+                <span className="tw-text-300 tw-mt-2.5 tw-block tw-text-md">/ {designation}</span>
             </div>
         </div>
     );
diff --git a/src/components/testimonial/testimonial-06.tsx b/src/components/testimonial/testimonial-06.tsx
index fd334f0d6..9b8f55ff3 100644
--- a/src/components/testimonial/testimonial-06.tsx
+++ b/src/components/testimonial/testimonial-06.tsx
@@ -15,13 +15,13 @@ const Testimonial = ({ name, designation, review, image, rating, className }: TP
     return (
         <div
             className={clsx(
-                "testimonial tw-flex tw-flex-wrap tw-h-full tw-pt-[31px] tw-pb-[47px] tw-px-[50px] tw-rounded tw-bg-white tw-shadow-2sm tw-shadow-dark/10",
+                "testimonial tw-flex tw-h-full tw-flex-wrap tw-rounded tw-bg-white tw-px-[50px] tw-pb-[47px] tw-pt-[31px] tw-shadow-2sm tw-shadow-dark/10",
                 className
             )}
         >
-            <div className="tw-flex tw-items-center tw-mb-5">
+            <div className="tw-mb-5 tw-flex tw-items-center">
                 {image?.src && (
-                    <figure className="image tw-flex-auto0 tw-w-[90px]">
+                    <figure className="image tw-w-[90px] tw-flex-auto0">
                         <img
                             src={image.src}
                             alt={image?.alt || name}
@@ -34,16 +34,16 @@ const Testimonial = ({ name, designation, review, image, rating, className }: TP
                 )}
                 <div className="tw-pl-7.5">
                     <StarRating rating={rating} align="left" className="tw-mb-[11px]" />
-                    <h3 className="tw-mb-0 tw-tracking-wider tw-uppercase tw-inline-block tw-text-h6">
+                    <h3 className="tw-mb-0 tw-inline-block tw-text-h6 tw-uppercase tw-tracking-wider">
                         {name}
                     </h3>
-                    <span className="tw-text-md tw-inline-block tw-text-gray-300 tw-ml-3.5">
+                    <span className="tw-ml-3.5 tw-inline-block tw-text-md tw-text-gray-300">
                         / {designation}
                     </span>
                 </div>
             </div>
 
-            <p className="tw-text-lg tw-font-medium tw-leading-relaxed tw-mb-6 md:tw-mb-[34px]">
+            <p className="tw-mb-6 tw-text-lg tw-font-medium tw-leading-relaxed md:tw-mb-[34px]">
                 {review}
             </p>
         </div>
diff --git a/src/components/ui/accordion/item.tsx b/src/components/ui/accordion/item.tsx
index bb864f340..8c515b03b 100644
--- a/src/components/ui/accordion/item.tsx
+++ b/src/components/ui/accordion/item.tsx
@@ -13,12 +13,12 @@ type TProps = {
 const AccordionItem = ({ id, title, description, onClick, isOpen }: TProps) => {
     return (
         <div className="accordion-item tw-mb-7.5">
-            <h3 className="tw-mb-0 tw-relative" id={`faq-heading-${id}`}>
+            <h3 className="tw-relative tw-mb-0" id={`faq-heading-${id}`}>
                 <button
                     type="button"
                     onClick={onClick}
                     className={clsx(
-                        "tw-text-left tw-text-lg tw-leading-tight tw-font-semibold tw-py-5 tw-px-[26px] tw-w-full tw-rounded-t tw-shadow-2xl tw-shadow-heading/10",
+                        "tw-w-full tw-rounded-t tw-px-[26px] tw-py-5 tw-text-left tw-text-lg tw-font-semibold tw-leading-tight tw-shadow-2xl tw-shadow-heading/10",
                         !isOpen && "tw-bg-white tw-text-body",
                         isOpen && "tw-bg-primary tw-text-white"
                     )}
@@ -36,7 +36,7 @@ const AccordionItem = ({ id, title, description, onClick, isOpen }: TProps) => {
                 </span>
             </h3>
             <motion.div
-                className="tw-overflow-hidden tw-font-normal tw-leading-relaxed tw-shadow-3xl tw-shadow-heading/10 tw-rounded-b"
+                className="tw-overflow-hidden tw-rounded-b tw-font-normal tw-leading-relaxed tw-shadow-3xl tw-shadow-heading/10"
                 id={`faq-content-${id}`}
                 aria-labelledby={`faq-heading-${id}`}
                 hidden={!isOpen}
@@ -49,7 +49,7 @@ const AccordionItem = ({ id, title, description, onClick, isOpen }: TProps) => {
                     ease: [0.645, 0.045, 0.355, 1],
                 }}
             >
-                <p className="tw-pt-[27px] tw-pb-[39px] tw-px-[25px]">{description}</p>
+                <p className="tw-px-[25px] tw-pb-[39px] tw-pt-[27px]">{description}</p>
             </motion.div>
         </div>
     );
diff --git a/src/components/ui/alert/index.tsx b/src/components/ui/alert/index.tsx
index 9c56d2726..509f12f6f 100644
--- a/src/components/ui/alert/index.tsx
+++ b/src/components/ui/alert/index.tsx
@@ -10,7 +10,7 @@ const Alert = ({ className, children, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "alert tw-py-2.5 tw-pr-3 tw-pl-3 tw-rounded nextIcon:tw-mr-2",
+                "alert tw-rounded tw-py-2.5 tw-pl-3 tw-pr-3 nextIcon:tw-mr-2",
                 color === "light" && "tw-bg-gray-200 nextIcon:tw-text-azure",
                 color === "warning" && "tw-bg-warning-100 tw-text-heading",
                 color === "secondary" && "tw-bg-secondary tw-text-white",
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index 066ba4cb2..9a0624920 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -12,21 +12,21 @@ const Badge = ({ children, className, color, size, variant }: TProps) => {
     return (
         <span
             className={clsx(
-                "tw-inline-flex tw-justify-center tw-items-center tw-leading-none",
+                "tw-inline-flex tw-items-center tw-justify-center tw-leading-none",
                 variant === "contained" && [
-                    color === "teracotta" && "tw-text-teracotta tw-bg-teracotta-light",
-                    color === "scooter" && "tw-text-scooter tw-bg-scooter-light",
-                    color === "primary" && "tw-text-white tw-bg-primary",
-                    color === "gradient" && "tw-text-white tw-bg-strawGradient",
+                    color === "teracotta" && "tw-bg-teracotta-light tw-text-teracotta",
+                    color === "scooter" && "tw-bg-scooter-light tw-text-scooter",
+                    color === "primary" && "tw-bg-primary tw-text-white",
+                    color === "gradient" && "tw-bg-strawGradient tw-text-white",
                 ],
                 variant === "outlined" && [
                     "tw-border",
-                    color === "white" && "tw-text-white tw-border-white",
+                    color === "white" && "tw-border-white tw-text-white",
                 ],
 
-                size === "xs" && "tw-pt-1 tw-px-2 tw-pb-[3px] tw-text-[11px] tw-rounded-sm",
-                size === "sm" && "tw-p-2 tw-text-xs tw-rounded-[4px]",
-                size === "lg" && "tw-h-7.5 tw-px-3.8 tw-text-sm tw-font-medium tw-rounded",
+                size === "xs" && "tw-rounded-sm tw-px-2 tw-pb-[3px] tw-pt-1 tw-text-[11px]",
+                size === "sm" && "tw-rounded-[4px] tw-p-2 tw-text-xs",
+                size === "lg" && "tw-h-7.5 tw-rounded tw-px-3.8 tw-text-sm tw-font-medium",
                 className
             )}
         >
diff --git a/src/components/ui/bottom-shape/shape-01.tsx b/src/components/ui/bottom-shape/shape-01.tsx
index 350983202..8d6bb450d 100644
--- a/src/components/ui/bottom-shape/shape-01.tsx
+++ b/src/components/ui/bottom-shape/shape-01.tsx
@@ -10,11 +10,11 @@ const BottomShape = ({ className, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 tw-w-full tw-h-[70px] tw-z-1 tw-rotate-180",
+                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 tw-z-1 tw-h-[70px] tw-w-full tw-rotate-180",
                 className
             )}
         >
-            <BottomShapeSVG className={clsx("tw-w-full tw-h-full", color)} />
+            <BottomShapeSVG className={clsx("tw-h-full tw-w-full", color)} />
         </div>
     );
 };
diff --git a/src/components/ui/bottom-shape/shape-02.tsx b/src/components/ui/bottom-shape/shape-02.tsx
index 29b35814a..065529497 100644
--- a/src/components/ui/bottom-shape/shape-02.tsx
+++ b/src/components/ui/bottom-shape/shape-02.tsx
@@ -10,11 +10,11 @@ const BottomShape = ({ className, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 tw-w-full tw-h-[70px] tw-z-1",
+                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 tw-z-1 tw-h-[70px] tw-w-full",
                 className
             )}
         >
-            <BottomShapeSVG className={clsx("tw-w-full tw-h-full", color)} />
+            <BottomShapeSVG className={clsx("tw-h-full tw-w-full", color)} />
         </div>
     );
 };
diff --git a/src/components/ui/bottom-shape/shape-03.tsx b/src/components/ui/bottom-shape/shape-03.tsx
index 316b463a2..2285dadf5 100644
--- a/src/components/ui/bottom-shape/shape-03.tsx
+++ b/src/components/ui/bottom-shape/shape-03.tsx
@@ -10,11 +10,11 @@ const BottomShape = ({ className, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 tw-w-full tw-h-20 md:tw-h-[310px] -tw-z-1 tw-rotate-180",
+                "bottom-shape tw-absolute -tw-bottom-px tw-left-0 -tw-z-1 tw-h-20 tw-w-full tw-rotate-180 md:tw-h-[310px]",
                 className
             )}
         >
-            <BottomShapeSVG className={clsx("tw-w-full tw-h-full tw-rotate-y-180", color)} />
+            <BottomShapeSVG className={clsx("tw-rotate-y-180 tw-h-full tw-w-full", color)} />
         </div>
     );
 };
diff --git a/src/components/ui/bottom-shape/shape-04.tsx b/src/components/ui/bottom-shape/shape-04.tsx
index 53655b46c..bcd201141 100644
--- a/src/components/ui/bottom-shape/shape-04.tsx
+++ b/src/components/ui/bottom-shape/shape-04.tsx
@@ -10,13 +10,13 @@ const BottomShape = ({ className, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-absolute tw-z-1 -tw-bottom-px tw-left-0 tw-w-[calc(100%_+_1.3px)] tw-h-20 lg:tw-h-[440px] tw-rotate-180 tw-overflow-hidden",
+                "tw-absolute -tw-bottom-px tw-left-0 tw-z-1 tw-h-20 tw-w-[calc(100%_+_1.3px)] tw-rotate-180 tw-overflow-hidden lg:tw-h-[440px]",
                 className
             )}
         >
             <BottomShapeSVG
                 className={clsx(
-                    "tw-w-full tw-h-full tw-block tw-relative tw-left-1/2 tw-rotate-y-180-translate-x-half",
+                    "tw-rotate-y-180-translate-x-half tw-relative tw-left-1/2 tw-block tw-h-full tw-w-full",
                     color
                 )}
             />
diff --git a/src/components/ui/bottom-shape/shape-05.tsx b/src/components/ui/bottom-shape/shape-05.tsx
index bc6020415..c50812ddd 100644
--- a/src/components/ui/bottom-shape/shape-05.tsx
+++ b/src/components/ui/bottom-shape/shape-05.tsx
@@ -10,13 +10,13 @@ const BottomShape = ({ className, color }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-absolute tw-z-1 -tw-bottom-px tw-left-0 tw-w-[calc(100%_+_1.3px)] tw-h-20 md:tw-h-[600px] tw-rotate-180 tw-overflow-hidden",
+                "tw-absolute -tw-bottom-px tw-left-0 tw-z-1 tw-h-20 tw-w-[calc(100%_+_1.3px)] tw-rotate-180 tw-overflow-hidden md:tw-h-[600px]",
                 className
             )}
         >
             <BottomShapeSVG
                 className={clsx(
-                    "tw-w-full tw-h-full tw-block tw-relative tw-left-1/2 tw-rotate-y-180-translate-x-half",
+                    "tw-rotate-y-180-translate-x-half tw-relative tw-left-1/2 tw-block tw-h-full tw-w-full",
                     color
                 )}
             />
diff --git a/src/components/ui/close-button/index.tsx b/src/components/ui/close-button/index.tsx
index 16063625c..17984fff3 100644
--- a/src/components/ui/close-button/index.tsx
+++ b/src/components/ui/close-button/index.tsx
@@ -16,7 +16,7 @@ const CloseButton = ({ onClose }: { onClose: () => void }) => {
     return (
         <button
             type="button"
-            className="tw-w-10 tw-h-10 tw-relative tw-group close-btn"
+            className="close-btn tw-group tw-relative tw-h-10 tw-w-10"
             onClick={onClose}
         >
             <i
diff --git a/src/components/ui/countdown-timer/layout-01/date-time-display.tsx b/src/components/ui/countdown-timer/layout-01/date-time-display.tsx
index d7f744025..2a4dda9d3 100644
--- a/src/components/ui/countdown-timer/layout-01/date-time-display.tsx
+++ b/src/components/ui/countdown-timer/layout-01/date-time-display.tsx
@@ -5,8 +5,8 @@ type TProps = {
 
 const DateTimeDisplay = ({ value, type }: TProps) => {
     return (
-        <div className="tw-p-2.5 tw-min-w-max">
-            <p className="tw-text-[40px] sm:tw-text-5xl md:tw-text-[56px] tw-leading-none tw-text-white tw-mb-2.5">
+        <div className="tw-min-w-max tw-p-2.5">
+            <p className="tw-mb-2.5 tw-text-[40px] tw-leading-none tw-text-white sm:tw-text-5xl md:tw-text-[56px]">
                 {value}
             </p>
             <span className="tw-font-bold tw-uppercase tw-tracking-[3px] tw-text-white">
diff --git a/src/components/ui/countdown-timer/layout-02/date-time-display.tsx b/src/components/ui/countdown-timer/layout-02/date-time-display.tsx
index 2bf06e240..0883f8d9a 100644
--- a/src/components/ui/countdown-timer/layout-02/date-time-display.tsx
+++ b/src/components/ui/countdown-timer/layout-02/date-time-display.tsx
@@ -5,8 +5,8 @@ type TProps = {
 
 const DateTimeDisplay = ({ value, type }: TProps) => {
     return (
-        <div className="tw-text-center tw-pt-[13px] tw-px-[3px] tw-pb-[11px] tw-bg-white tw-rounded tw-shadow-2sm tw-shadow-heading/10 tw-text-[13px] tw-font-semibold tw-uppercase tw-tracking-wider">
-            <span className="tw-text-[28px] tw-leading-none tw-text-primary tw-font-semibold tw-mb-[3px] tw-block">
+        <div className="tw-rounded tw-bg-white tw-px-[3px] tw-pb-[11px] tw-pt-[13px] tw-text-center tw-text-[13px] tw-font-semibold tw-uppercase tw-tracking-wider tw-shadow-2sm tw-shadow-heading/10">
+            <span className="tw-mb-[3px] tw-block tw-text-[28px] tw-font-semibold tw-leading-none tw-text-primary">
                 {value}
             </span>
             <span>{type}</span>
diff --git a/src/components/ui/countdown-timer/layout-02/index.tsx b/src/components/ui/countdown-timer/layout-02/index.tsx
index 7e0ccfb39..428869cb6 100644
--- a/src/components/ui/countdown-timer/layout-02/index.tsx
+++ b/src/components/ui/countdown-timer/layout-02/index.tsx
@@ -18,7 +18,7 @@ const CountdownTimer = ({ targetDate, className, align }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-grid tw-grid-cols-2 sm:tw-grid-cols-4 tw-gap-2.5",
+                "tw-grid tw-grid-cols-2 tw-gap-2.5 sm:tw-grid-cols-4",
                 align === "center" && "tw-mx-auto",
                 className
             )}
diff --git a/src/components/ui/countdown-timer/layout-03/date-time-display.tsx b/src/components/ui/countdown-timer/layout-03/date-time-display.tsx
index 97fc847c8..627adb47c 100644
--- a/src/components/ui/countdown-timer/layout-03/date-time-display.tsx
+++ b/src/components/ui/countdown-timer/layout-03/date-time-display.tsx
@@ -4,8 +4,8 @@ type TProps = {
 
 const DateTimeDisplay = ({ value }: TProps) => {
     return (
-        <div className="tw-px-[5px] tw-mx-[5px] tw-min-w-max tw-relative tw-leading-none before:tw-absolute before:tw-content-[':'] before:-tw-top-px before:-tw-left-2 before:tw-text-lg before:tw-text-secondary before:tw-font-bold before:tw-leading-none first:before:tw-hidden">
-            <span className="tw-text-lg tw-text-secondary tw-font-bold tw-leading-none">
+        <div className="tw-relative tw-mx-[5px] tw-min-w-max tw-px-[5px] tw-leading-none before:tw-absolute before:-tw-left-2 before:-tw-top-px before:tw-text-lg before:tw-font-bold before:tw-leading-none before:tw-text-secondary before:tw-content-[':'] first:before:tw-hidden">
+            <span className="tw-text-lg tw-font-bold tw-leading-none tw-text-secondary">
                 {value}
             </span>
         </div>
diff --git a/src/components/ui/form-elements/checkbox.tsx b/src/components/ui/form-elements/checkbox.tsx
index ec2974319..8f37c0c87 100644
--- a/src/components/ui/form-elements/checkbox.tsx
+++ b/src/components/ui/form-elements/checkbox.tsx
@@ -41,7 +41,7 @@ const Checkbox = forwardRef<HTMLInputElement, IProps>(
             <div className="custom-checkbox">
                 <label
                     className={cn(
-                        "tw-relative tw-block tw-leading-snug tw-pl-7 tw-cursor-pointer tw-max-w-fit",
+                        "tw-relative tw-block tw-max-w-fit tw-cursor-pointer tw-pl-7 tw-leading-snug",
                         className
                     )}
                 >
@@ -57,16 +57,16 @@ const Checkbox = forwardRef<HTMLInputElement, IProps>(
                         onBlur={onBlur}
                         value={value}
                         ref={ref}
-                        className="tw-sr-only tw-peer"
+                        className="tw-peer tw-sr-only"
                         {...restProps}
                     />
                     <span
                         className={cn(
-                            "tw-leading-[18px] tw-w-[18px] tw-h-[18px] tw-absolute tw-left-0 tw-inline-block",
+                            "tw-absolute tw-left-0 tw-inline-block tw-h-[18px] tw-w-[18px] tw-leading-[18px]",
                             beforeClass,
                             disabledClass,
                             afterClass,
-                            "peer-checked:after:tw-scale-100 peer-checked:before:tw-border-primary peer-checked:before:tw-bg-white peer-hover:before:tw-border-primary"
+                            "peer-checked:before:tw-border-primary peer-checked:before:tw-bg-white peer-checked:after:tw-scale-100 peer-hover:before:tw-border-primary"
                         )}
                     />
                     {label}
diff --git a/src/components/ui/form-elements/feedback.tsx b/src/components/ui/form-elements/feedback.tsx
index f2fe3c366..79fc5740a 100644
--- a/src/components/ui/form-elements/feedback.tsx
+++ b/src/components/ui/form-elements/feedback.tsx
@@ -11,7 +11,7 @@ const Feedback: FC<IFeedback> = ({ state, showErrorOnly, children }) => {
     return (
         <span
             className={clsx(
-                "tw-w-full tw-block tw-mt-1 tw-text-md",
+                "tw-mt-1 tw-block tw-w-full tw-text-md",
                 state !== "error" && showErrorOnly && "tw-hidden",
                 state === "success" && !showErrorOnly && "tw-text-success",
                 state === "warning" && !showErrorOnly && "tw-text-warning",
diff --git a/src/components/ui/google-map/map.tsx b/src/components/ui/google-map/map.tsx
index ace41e822..3393d2124 100644
--- a/src/components/ui/google-map/map.tsx
+++ b/src/components/ui/google-map/map.tsx
@@ -42,7 +42,7 @@ const Map: React.FC<MapProps> = ({ children, onClick, ...options }) => {
 
     return (
         <>
-            <div ref={ref} className="tw-w-full tw-h-full" />
+            <div ref={ref} className="tw-h-full tw-w-full" />
             {Children.map(children, (child) => {
                 if (isValidElement(child)) {
                     // set the map prop on the child component
diff --git a/src/components/ui/list-with-check/index.tsx b/src/components/ui/list-with-check/index.tsx
index 6522bf253..04f3b1701 100644
--- a/src/components/ui/list-with-check/index.tsx
+++ b/src/components/ui/list-with-check/index.tsx
@@ -9,8 +9,8 @@ const ListWithCheck = forwardRef<HTMLUListElement, TProps>(({ className, list },
     return (
         <ul className={className} ref={ref}>
             {list.map((item) => (
-                <li className="tw-flex tw-items-center tw-mt-2.5 first:tw-mt-0" key={item}>
-                    <i className="fas fa-check tw-text-base tw-mr-[19px] tw-text-primary" />
+                <li className="tw-mt-2.5 tw-flex tw-items-center first:tw-mt-0" key={item}>
+                    <i className="fas fa-check tw-mr-[19px] tw-text-base tw-text-primary" />
                     {item}
                 </li>
             ))}
diff --git a/src/components/ui/modal/modal-close.tsx b/src/components/ui/modal/modal-close.tsx
index 0ec83eb3b..1c75e687f 100644
--- a/src/components/ui/modal/modal-close.tsx
+++ b/src/components/ui/modal/modal-close.tsx
@@ -15,7 +15,7 @@ const ModalClose = ({ className, children, onClose }: TProps) => {
             type="button"
             className={clsx(
                 className,
-                "close tw-font-light tw-text-3xl tw-leading-none tw-bg-transparent tw-border-0 tw-appearance-none tw-text-heading tw-cursor-pointer"
+                "close tw-cursor-pointer tw-appearance-none tw-border-0 tw-bg-transparent tw-text-3xl tw-font-light tw-leading-none tw-text-heading"
             )}
             onClick={onClose}
             data-dismiss="modal"
diff --git a/src/components/ui/modal/modal-header.tsx b/src/components/ui/modal/modal-header.tsx
index 85bd31aff..87265a410 100644
--- a/src/components/ui/modal/modal-header.tsx
+++ b/src/components/ui/modal/modal-header.tsx
@@ -13,7 +13,7 @@ const ModalHeader = ({ className, children }: TProps) => {
         <div
             className={clsx(
                 className,
-                "modal-header tw-flex tw-items-center tw-justify-between tw-p-4 tw-border-b tw-border-b-gray-400/30 tw-rounded-tl tw-rounded-tr"
+                "modal-header tw-flex tw-items-center tw-justify-between tw-rounded-tl tw-rounded-tr tw-border-b tw-border-b-gray-400/30 tw-p-4"
             )}
         >
             {children}
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 6a5a1a816..f6b2e1b45 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -42,7 +42,7 @@ const Modal = ({ className, show, size, centered, children, onClose }: TModal) =
                     <>
                         <motion.div
                             className={clsx(
-                                "backdrop tw-fixed tw-top-0 tw-left-0 tw-w-screen tw-h-screen tw-bg-black/60 tw-transition-opacity tw-z-50"
+                                "backdrop tw-fixed tw-left-0 tw-top-0 tw-z-50 tw-h-screen tw-w-screen tw-bg-black/60 tw-transition-opacity"
                             )}
                             tabIndex={-1}
                             initial={{ opacity: 0 }}
@@ -53,7 +53,7 @@ const Modal = ({ className, show, size, centered, children, onClose }: TModal) =
                             ref={modalRef}
                             className={clsx(
                                 className,
-                                "tw-fixed tw-inset-0 tw-overflow-hidden tw-outline-0 tw-transition-opacity tw-z-50"
+                                "tw-fixed tw-inset-0 tw-z-50 tw-overflow-hidden tw-outline-0 tw-transition-opacity"
                             )}
                             role="button"
                             tabIndex={-1}
@@ -66,17 +66,17 @@ const Modal = ({ className, show, size, centered, children, onClose }: TModal) =
                         >
                             <div
                                 className={clsx(
-                                    "modal-dialog tw-relative tw-w-auto tw-m-2 tw-pointer-events-none sm:tw-my-5 sm:tw-mx-auto",
+                                    "modal-dialog tw-pointer-events-none tw-relative tw-m-2 tw-w-auto sm:tw-mx-auto sm:tw-my-5",
                                     size === "sm" && "sm:tw-max-w-[300px]",
                                     size === "md" && "sm:tw-max-w-[470px]",
                                     size === "lg" && "sm:tw-max-w-[500px] lg:tw-max-w-[800px]",
                                     size === "xl" && "sm:tw-max-w-[500px] lg:tw-max-w-[800px]",
                                     centered &&
-                                        "tw-flex tw-items-center tw-min-h-[calc(100vh_-_1rem)] sm:tw-min-h-[calc(100vh_-_3.5rem)]"
+                                        "tw-flex tw-min-h-[calc(100vh_-_1rem)] tw-items-center sm:tw-min-h-[calc(100vh_-_3.5rem)]"
                                 )}
                             >
                                 <div
-                                    className="modal-content tw-relative tw-flex tw-flex-col tw-w-full tw-pointer-events-auto tw-bg-white tw-bg-clip-padding tw-rounded"
+                                    className="modal-content tw-pointer-events-auto tw-relative tw-flex tw-w-full tw-flex-col tw-rounded tw-bg-white tw-bg-clip-padding"
                                     onClick={(e) => e.stopPropagation()}
                                     onKeyPress={(e) => e.stopPropagation()}
                                     role="button"
diff --git a/src/components/ui/motto-text/index.tsx b/src/components/ui/motto-text/index.tsx
index 0b63efa6b..1dc0b95ae 100644
--- a/src/components/ui/motto-text/index.tsx
+++ b/src/components/ui/motto-text/index.tsx
@@ -14,7 +14,7 @@ const MottoText = forwardRef<HTMLParagraphElement, TProps>(
     ({ text, pathText, path, className, size }, ref) => (
         <p
             className={clsx(
-                "tw-font-medium tw-text-secondary-light tw-leading-relaxed",
+                "tw-font-medium tw-leading-relaxed tw-text-secondary-light",
                 size === "md" && "tw-text-base",
                 size === "lg" && "tw-text-lg",
                 className
@@ -25,10 +25,10 @@ const MottoText = forwardRef<HTMLParagraphElement, TProps>(
             <Anchor
                 path={path}
                 className={clsx(
-                    "tw-font-bold tw-leading-none tw-relative tw-py-[3px] tw-text-primary",
-                    "before:tw-absolute before:tw-content-[''] before:tw-w-full before:tw-scale-x-100 before:tw-origin-right before:tw-bg-gray-350 before:tw-transition-transform before:tw-duration-600 before:tw-delay-300 before:tw-ease-in-expo before:tw-bottom-0 before:tw-left-0 before:tw-h-px",
-                    "after:tw-absolute after:tw-content-[''] after:tw-w-full after:tw-scale-x-0 after:tw-origin-left after:tw-bg-primary after:tw-transition-transform after:tw-duration-600 after:tw-delay-75 after:tw-ease-in-expo after:tw-bottom-0 after:tw-left-0 after:tw-h-px",
-                    "hover:before:tw-scale-x-0 hover:after:tw-scale-x-100 hover:after:tw-delay-300 hover:before:tw-delay-75"
+                    "tw-relative tw-py-[3px] tw-font-bold tw-leading-none tw-text-primary",
+                    "before:tw-absolute before:tw-bottom-0 before:tw-left-0 before:tw-h-px before:tw-w-full before:tw-origin-right before:tw-scale-x-100 before:tw-bg-gray-350 before:tw-transition-transform before:tw-delay-300 before:tw-duration-600 before:tw-ease-in-expo before:tw-content-['']",
+                    "after:tw-absolute after:tw-bottom-0 after:tw-left-0 after:tw-h-px after:tw-w-full after:tw-origin-left after:tw-scale-x-0 after:tw-bg-primary after:tw-transition-transform after:tw-delay-75 after:tw-duration-600 after:tw-ease-in-expo after:tw-content-['']",
+                    "hover:before:tw-scale-x-0 hover:before:tw-delay-75 hover:after:tw-scale-x-100 hover:after:tw-delay-300"
                 )}
             >
                 {pathText} <i className="far fa-long-arrow-right" />
diff --git a/src/components/ui/nice-select/index.tsx b/src/components/ui/nice-select/index.tsx
index e4a86f4b2..8d2bd89c6 100644
--- a/src/components/ui/nice-select/index.tsx
+++ b/src/components/ui/nice-select/index.tsx
@@ -48,7 +48,7 @@ const NiceSelect = ({ className, options, setValue, prefix, defaultValue }: TPro
     return (
         <div
             className={clsx(
-                "nice-select tw-relative tw-transition-all tw-border tw-rounded-md",
+                "nice-select tw-relative tw-rounded-md tw-border tw-transition-all",
                 !open && "tw-border-gray-200 tw-bg-gray-200",
                 "hover:tw-border-primary hover:tw-bg-transparent",
                 className,
@@ -59,7 +59,7 @@ const NiceSelect = ({ className, options, setValue, prefix, defaultValue }: TPro
             <button
                 type="button"
                 onClick={() => setOpen((prev) => !prev)}
-                className="tw-flex tw-items-center tw-w-full tw-min-h-[52px] tw-py-[3px] tw-pr-10 tw-pl-5 "
+                className="tw-flex tw-min-h-[52px] tw-w-full tw-items-center tw-py-[3px] tw-pl-5 tw-pr-10"
             >
                 <span className="label tw-flex tw-items-center tw-text-body">
                     <i className="fa fa-align-left tw-mr-3.8" /> {prefix}
@@ -67,13 +67,13 @@ const NiceSelect = ({ className, options, setValue, prefix, defaultValue }: TPro
                         {selected?.label}
                     </span>
                 </span>
-                <span className="arrow tw-text-lg tw-absolute tw-top-0 tw-right-0 tw-flex tw-items-center tw-justify-center tw-w-10 tw-h-full tw-bg-transparent">
+                <span className="arrow tw-absolute tw-right-0 tw-top-0 tw-flex tw-h-full tw-w-10 tw-items-center tw-justify-center tw-bg-transparent tw-text-lg">
                     <i className="far fa-angle-down" />
                 </span>
             </button>
             <ul
                 className={clsx(
-                    "tw-w-full tw-absolute tw-top-full tw-left-0 tw-z-50 tw-font-medium tw-min-w-full tw-py-[5px] tw-rounded-md tw-bg-light-50 tw-shadow-4md tw-shadow-black/20",
+                    "tw-absolute tw-left-0 tw-top-full tw-z-50 tw-w-full tw-min-w-full tw-rounded-md tw-bg-light-50 tw-py-[5px] tw-font-medium tw-shadow-4md tw-shadow-black/20",
                     !open && "tw-hidden",
                     open && "tw-block"
                 )}
@@ -86,14 +86,14 @@ const NiceSelect = ({ className, options, setValue, prefix, defaultValue }: TPro
                     <li
                         key={item.value}
                         className={clsx(
-                            "tw-text-heading tw-group tw-py-[5px] tw-px-[30px] tw-cursor-pointer tw-transition-colors hover:tw-bg-primary hover:tw-text-white"
+                            "tw-group tw-cursor-pointer tw-px-[30px] tw-py-[5px] tw-text-heading tw-transition-colors hover:tw-bg-primary hover:tw-text-white"
                         )}
                         role="menuitem"
                         onClick={() => currentHandler(item)}
                         onKeyPress={(e) => e}
                     >
                         {item.value === selected?.value && (
-                            <i className="fa fa-check tw-transition-colors tw-text-primary tw-mr-2.5 group-hover:tw-text-white" />
+                            <i className="fa fa-check tw-mr-2.5 tw-text-primary tw-transition-colors group-hover:tw-text-white" />
                         )}
                         {item.label}
                     </li>
diff --git a/src/components/ui/offcanvas/body.tsx b/src/components/ui/offcanvas/body.tsx
index 4481bde14..369c9e315 100644
--- a/src/components/ui/offcanvas/body.tsx
+++ b/src/components/ui/offcanvas/body.tsx
@@ -8,7 +8,7 @@ type TProps = {
 const OffcanvasBody = ({ children, className }: TProps) => (
     <div
         className={clsx(
-            "tw-overflow-y-auto tw-h-[calc(100%_-_80px)] tw-pt-5 tw-pb-[100px] tw-px-7.5",
+            "tw-h-[calc(100%_-_80px)] tw-overflow-y-auto tw-px-7.5 tw-pb-[100px] tw-pt-5",
             className
         )}
     >
diff --git a/src/components/ui/offcanvas/header.tsx b/src/components/ui/offcanvas/header.tsx
index 9a4a15026..824a6eaca 100644
--- a/src/components/ui/offcanvas/header.tsx
+++ b/src/components/ui/offcanvas/header.tsx
@@ -10,7 +10,7 @@ type TProps = {
 const OffcanvasHeader = ({ children, onClose, className }: TProps) => (
     <div
         className={clsx(
-            "tw-flex tw-items-center tw-justify-between tw-h-20 tw-pl-7.5 tw-pr-3.8 tw-bg-white",
+            "tw-flex tw-h-20 tw-items-center tw-justify-between tw-bg-white tw-pl-7.5 tw-pr-3.8",
             className
         )}
     >
diff --git a/src/components/ui/offcanvas/index.tsx b/src/components/ui/offcanvas/index.tsx
index 0fa5fc88e..9d03c8b22 100644
--- a/src/components/ui/offcanvas/index.tsx
+++ b/src/components/ui/offcanvas/index.tsx
@@ -52,7 +52,7 @@ const Offcanvas = memo(({ className, onClose, isOpen, children }: TProps) => {
                 {isOpen && (
                     <motion.div
                         className={clsx(
-                            "tw-fixed tw-inset-0 tw-bg-black tw-z-50 tw-bg-black/70 tw-overflow-hidden"
+                            "tw-fixed tw-inset-0 tw-z-50 tw-overflow-hidden tw-bg-black tw-bg-black/70"
                         )}
                         onClick={onClose}
                         onKeyUp={onClose}
@@ -65,8 +65,8 @@ const Offcanvas = memo(({ className, onClose, isOpen, children }: TProps) => {
                     >
                         <motion.div
                             className={clsx(
-                                "tw-relative tw-z-30 tw-w-[300px] tw-ml-auto sm:tw-w-[360px] tw-h-full tw-bg-secondary tw-bg-[url('https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1698904153/mobile-image_ssvugk.png')] tw-bg-no-repeat tw-bg-top tw-bg-cover",
-                                "before:tw-absolute before:tw-content-[''] before:-tw-z-1 before:tw-inset-0 before:tw-bg-secondary/90",
+                                "tw-relative tw-z-30 tw-ml-auto tw-h-full tw-w-[300px] tw-bg-secondary tw-bg-[url('https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1698904153/mobile-image_ssvugk.png')] tw-bg-cover tw-bg-top tw-bg-no-repeat sm:tw-w-[360px]",
+                                "before:tw-absolute before:tw-inset-0 before:-tw-z-1 before:tw-bg-secondary/90 before:tw-content-['']",
                                 className
                             )}
                             onClick={(e) => e.stopPropagation()}
diff --git a/src/components/ui/progress-bar/index.tsx b/src/components/ui/progress-bar/index.tsx
index 7fa035f18..0166a6030 100644
--- a/src/components/ui/progress-bar/index.tsx
+++ b/src/components/ui/progress-bar/index.tsx
@@ -61,7 +61,7 @@ const ProgressBar: FC<ProgressProps> = ({
         size === "lg" && "tw-h-5",
     ];
     return (
-        <div className={clsx("progress tw-bg-gray-500 tw-rounded-sm", className)} {...restProps}>
+        <div className={clsx("progress tw-rounded-sm tw-bg-gray-500", className)} {...restProps}>
             <motion.div
                 role="progressbar"
                 aria-valuenow={now}
@@ -83,7 +83,7 @@ const ProgressBar: FC<ProgressProps> = ({
                     size && sizeClass
                 )}
             >
-                <span className={!isLabel ? "tw-sr-only" : "tw-text-white tw-text-[11px]"}>
+                <span className={!isLabel ? "tw-sr-only" : "tw-text-[11px] tw-text-white"}>
                     {now}%
                 </span>
             </motion.div>
diff --git a/src/components/ui/scroll-to-top/index.tsx b/src/components/ui/scroll-to-top/index.tsx
index 16d3f260d..0df3dc8c8 100644
--- a/src/components/ui/scroll-to-top/index.tsx
+++ b/src/components/ui/scroll-to-top/index.tsx
@@ -8,20 +8,20 @@ const ScrollToTop = () => {
             <button
                 aria-label="Scroll to top"
                 type="button"
-                className="tw-group tw-overflow-hidden tw-fixed tw-right-7.5 tw-bottom-15 tw-z-50 tw-shadow-3xl tw-shadow-black/30 tw-p-0 tw-w-15 tw-h-15 tw-rounded-full tw-text-center tw-text-h3 tw-inline-flex tw-justify-center tw-items-center tw-bg-primary tw-text-white"
+                className="tw-group tw-fixed tw-bottom-15 tw-right-7.5 tw-z-50 tw-inline-flex tw-h-15 tw-w-15 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-bg-primary tw-p-0 tw-text-center tw-text-h3 tw-text-white tw-shadow-3xl tw-shadow-black/30"
                 onClick={onClickHandler}
             >
                 <i
                     className={clsx(
                         "fal fa-long-arrow-up",
-                        "tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-text-white tw-transition-transorm tw-duration-300",
+                        "tw-transition-transorm tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-text-white tw-duration-300",
                         "group-hover:-tw-translate-y-20"
                     )}
                 />
                 <i
                     className={clsx(
                         "fal fa-long-arrow-up",
-                        "tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 tw-translate-y-20 tw-text-white tw-transition-transorm tw-duration-300",
+                        "tw-transition-transorm tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 tw-translate-y-20 tw-text-white tw-duration-300",
                         "group-hover:-tw-translate-y-1/2"
                     )}
                 />
diff --git a/src/components/ui/section/index.tsx b/src/components/ui/section/index.tsx
index aaaf08cb4..789e1475e 100644
--- a/src/components/ui/section/index.tsx
+++ b/src/components/ui/section/index.tsx
@@ -12,9 +12,9 @@ const Section = ({ space, bg, className, style, children }: TProps) => {
             className={clsx(
                 className,
                 space === "top-bottom" && "tw-py-15 md:tw-py-20 lg:tw-py-[100px]",
-                space === "top-bottom-2" && "tw-py-15 md:tw-py-20 lg:tw-pt-[100px] lg:tw-pb-40",
+                space === "top-bottom-2" && "tw-py-15 md:tw-py-20 lg:tw-pb-40 lg:tw-pt-[100px]",
                 space === "top-bottom-3" &&
-                    "tw-pt-[150px] tw-pb-15 md:tw-pt-[170px] md:tw-pb-20 lg:tw-pt-[190px] lg:tw-pb-[100px]",
+                    "tw-pb-15 tw-pt-[150px] md:tw-pb-20 md:tw-pt-[170px] lg:tw-pb-[100px] lg:tw-pt-[190px]",
                 space === "top" && "tw-pt-15 md:tw-pt-20 lg:tw-pt-[100px]",
                 space === "top-2" && "tw-pt-[150px] md:tw-pt-[170px] lg:tw-pt-[320px]",
                 space === "bottom" && "tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px]",
diff --git a/src/components/ui/social/social-link.tsx b/src/components/ui/social/social-link.tsx
index 7380e319c..69827ae9c 100644
--- a/src/components/ui/social/social-link.tsx
+++ b/src/components/ui/social/social-link.tsx
@@ -49,11 +49,11 @@ const SocialLink = ({
                 variant === "texted" && [textedWhite, textedLight, textedDark, textedXl, textedLg],
                 variant !== "texted" && [
                     "tw-text-center",
-                    size === "md" && "tw-w-10 tw-h-10 tw-leading-10",
+                    size === "md" && "tw-h-10 tw-w-10 tw-leading-10",
                     color === "light" &&
                         "tw-border-gray-550 hover:tw-border-primary hover:tw-bg-primary hover:tw-text-white",
                 ],
-                variant === "outlined" && "tw-bg-transparent tw-border",
+                variant === "outlined" && "tw-border tw-bg-transparent",
                 shape === "rounded" && "tw-rounded",
                 shape === "circle" && "tw-rounded-full",
                 tooltip && [tooltipBeforeClass, tooltipAfterClass, tooltipHoverClass],
diff --git a/src/components/ui/spinner/index.tsx b/src/components/ui/spinner/index.tsx
index e6857fe67..41009eb6b 100644
--- a/src/components/ui/spinner/index.tsx
+++ b/src/components/ui/spinner/index.tsx
@@ -1,10 +1,10 @@
 const Spinner = () => {
     return (
-        <div className="tw-bg-primary tw-w-10 tw-h-10 tw-my-10 tw-mx-auto tw-animate-[rotatePlane_1.2s_infinite_ease-in-out]">
+        <div className="tw-mx-auto tw-my-10 tw-h-10 tw-w-10 tw-animate-[rotatePlane_1.2s_infinite_ease-in-out] tw-bg-primary">
             <img
                 src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif"
                 alt="Loading"
-                className="tw-w-full tw-h-full"
+                className="tw-h-full tw-w-full"
             />
         </div>
     );
diff --git a/src/components/ui/tab/tab-nav.tsx b/src/components/ui/tab/tab-nav.tsx
index 1c76419da..e89dca242 100644
--- a/src/components/ui/tab/tab-nav.tsx
+++ b/src/components/ui/tab/tab-nav.tsx
@@ -8,7 +8,7 @@ const TabNav = ({ id, children, onClick, isActive, variant, className }: TabProp
             className={clsx(
                 "tab-nav",
                 variant === "underline" &&
-                    "tw-relative tw-text-base tw-font-semibold sm:tw-text-xl sm:tw-font-bold tw-leading-snug tw-py-[9px] tw-px-[14px] lg:tw-py-[9px] lg:tw-px-6.1",
+                    "tw-relative tw-px-[14px] tw-py-[9px] tw-text-base tw-font-semibold tw-leading-snug sm:tw-text-xl sm:tw-font-bold lg:tw-px-6.1 lg:tw-py-[9px]",
                 !isActive && "tw-text-gray-400",
                 isActive && "tw-text-heading",
                 className
@@ -23,7 +23,7 @@ const TabNav = ({ id, children, onClick, isActive, variant, className }: TabProp
             {children}
             {isActive && variant === "underline" ? (
                 <motion.span
-                    className="tw-absolute tw-block tw-w-full tw-h-0.5 -tw-bottom-1 tw-left-0 tw-bg-primary tw-z-1"
+                    className="tw-absolute -tw-bottom-1 tw-left-0 tw-z-1 tw-block tw-h-0.5 tw-w-full tw-bg-primary"
                     layoutId="underline"
                 />
             ) : null}
diff --git a/src/components/ui/video-button/index.tsx b/src/components/ui/video-button/index.tsx
index 267cb0610..d2136b74d 100644
--- a/src/components/ui/video-button/index.tsx
+++ b/src/components/ui/video-button/index.tsx
@@ -18,7 +18,7 @@ const VideoButton = ({ label, className, videoId }: TProps) => {
                 type="button"
                 aria-label={label}
                 className={clsx(
-                    "tw-absolute tw-z-30 tw-inset-0 tw-flex tw-justify-center tw-items-center",
+                    "tw-absolute tw-inset-0 tw-z-30 tw-flex tw-items-center tw-justify-center",
                     className
                 )}
                 onClick={() => setOpen(true)}
diff --git a/src/components/ui/video-modal/index.tsx b/src/components/ui/video-modal/index.tsx
index 311073e55..2e77dcd8c 100644
--- a/src/components/ui/video-modal/index.tsx
+++ b/src/components/ui/video-modal/index.tsx
@@ -43,7 +43,7 @@ const VideoModal = ({ videoId, show, onClose, className }: TModal) => {
                 {show && (
                     <>
                         <motion.div
-                            className="backdrop tw-fixed tw-top-0 tw-left-0 tw-w-screen tw-h-screen tw-bg-black/60 tw-transition-opacity tw-z-50 tw-flex tw-justify-center tw-items-center"
+                            className="backdrop tw-fixed tw-left-0 tw-top-0 tw-z-50 tw-flex tw-h-screen tw-w-screen tw-items-center tw-justify-center tw-bg-black/60 tw-transition-opacity"
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
@@ -56,7 +56,7 @@ const VideoModal = ({ videoId, show, onClose, className }: TModal) => {
 
                         <motion.div
                             className={clsx(
-                                "tw-fixed tw-inset-0 tw-overflow-hidden tw-outline-0 tw-transition-opacity tw-z-[999]",
+                                "tw-fixed tw-inset-0 tw-z-[999] tw-overflow-hidden tw-outline-0 tw-transition-opacity",
                                 className
                             )}
                             role="button"
@@ -69,23 +69,23 @@ const VideoModal = ({ videoId, show, onClose, className }: TModal) => {
                             exit="exit"
                             variants={fadeIn02}
                         >
-                            <div className="modal-dialog tw-relative tw-z-50 tw-w-auto tw-m-3 tw-pointer-events-none sm:tw-my-5 sm:tw-mx-auto tw-flex tw-items-center tw-min-h-[calc(100vh_-_1rem)] sm:tw-min-h-[calc(100vh_-_3.5rem)] sm:tw-max-w-[500px] lg:tw-max-w-[1000px]">
+                            <div className="modal-dialog tw-pointer-events-none tw-relative tw-z-50 tw-m-3 tw-flex tw-min-h-[calc(100vh_-_1rem)] tw-w-auto tw-items-center sm:tw-mx-auto sm:tw-my-5 sm:tw-min-h-[calc(100vh_-_3.5rem)] sm:tw-max-w-[500px] lg:tw-max-w-[1000px]">
                                 <div
-                                    className="modal-content tw-relative tw-flex tw-flex-col tw-w-full tw-pointer-events-auto tw-bg-white tw-bg-clip-padding tw-rounded"
+                                    className="modal-content tw-pointer-events-auto tw-relative tw-flex tw-w-full tw-flex-col tw-rounded tw-bg-white tw-bg-clip-padding"
                                     onClick={(e) => e.stopPropagation()}
                                     onKeyPress={(e) => e.stopPropagation()}
                                     role="button"
                                     tabIndex={-1}
                                 >
                                     {videoLoading && (
-                                        <div className="tw-absolute tw-inset-0 tw-flex tw-justify-center tw-items-center">
+                                        <div className="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center">
                                             <Spinner />
                                         </div>
                                     )}
                                     <button
                                         type="button"
                                         onClick={onClose}
-                                        className="tw-absolute tw-right-0 -tw-top-9 tw-w-9 tw-h-9 tw-text-white tw-bg-black tw-flex tw-items-center tw-justify-center"
+                                        className="tw-absolute -tw-top-9 tw-right-0 tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-bg-black tw-text-white"
                                     >
                                         <i className="linea-arrows-circle-remove" />
                                     </button>
diff --git a/src/components/ui/video-with-poster/video-01.tsx b/src/components/ui/video-with-poster/video-01.tsx
index 634d116be..1d9f185e8 100644
--- a/src/components/ui/video-with-poster/video-01.tsx
+++ b/src/components/ui/video-with-poster/video-01.tsx
@@ -12,7 +12,7 @@ const Video01 = ({ poster, video, className }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-relative tw-overflow-hidden tw-group tw-z-20 tw-border-[20px] tw-border-white tw-rounded-[20px] tw-shadow-3lg tw-shadow-black/[15%]",
+                "tw-group tw-relative tw-z-20 tw-overflow-hidden tw-rounded-[20px] tw-border-[20px] tw-border-white tw-shadow-3lg tw-shadow-black/[15%]",
                 className
             )}
         >
diff --git a/src/components/ui/video-with-poster/video-02.tsx b/src/components/ui/video-with-poster/video-02.tsx
index aa71d75f9..0d39f9209 100644
--- a/src/components/ui/video-with-poster/video-02.tsx
+++ b/src/components/ui/video-with-poster/video-02.tsx
@@ -13,7 +13,7 @@ const Video02 = forwardRef<HTMLDivElement, TProps>(({ poster, video, className }
     return (
         <div
             className={clsx(
-                "tw-relative tw-overflow-hidden tw-group tw-z-20 tw-rounded tw-shadow-xxl tw-shadow-black/[22%]",
+                "tw-group tw-relative tw-z-20 tw-overflow-hidden tw-rounded tw-shadow-xxl tw-shadow-black/[22%]",
                 className
             )}
             ref={ref}
diff --git a/src/components/ui/wrapper/wrapper-03.tsx b/src/components/ui/wrapper/wrapper-03.tsx
index e5dd28f96..44a8bf29d 100644
--- a/src/components/ui/wrapper/wrapper-03.tsx
+++ b/src/components/ui/wrapper/wrapper-03.tsx
@@ -8,7 +8,7 @@ type TProps = {
 const Wrapper = ({ children, className }: TProps) => {
     return (
         <div className={clsx("wrapper tw-relative tw-overflow-hidden", className)}>
-            <div className="tw-bg-[url('/images/bg/background-pattern-grid-line.png')] tw-bg-[top_center] tw-absolute tw-inset-0 tw-z-20" />
+            <div className="tw-absolute tw-inset-0 tw-z-20 tw-bg-[url('/images/bg/background-pattern-grid-line.png')] tw-bg-[top_center]" />
             {children}
         </div>
     );
diff --git a/src/components/ui/wrapper/wrapper-04.tsx b/src/components/ui/wrapper/wrapper-04.tsx
index 1b46f9161..e56196091 100644
--- a/src/components/ui/wrapper/wrapper-04.tsx
+++ b/src/components/ui/wrapper/wrapper-04.tsx
@@ -19,21 +19,21 @@ const Wrapper = ({ children, className, showBalls }: TProps) => {
             {showBalls && (
                 <>
                     <motion.div
-                        className="tw-w-[35px] tw-h-[35px] tw-bg-orange-100/70 tw-rounded-full tw-absolute tw-top-[164px] tw-left-[70px]"
+                        className="tw-absolute tw-left-[70px] tw-top-[164px] tw-h-[35px] tw-w-[35px] tw-rounded-full tw-bg-orange-100/70"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     />
                     <motion.div
-                        className="tw-w-9 tw-h-9 tw-bg-blue-100/70 tw-rounded-full tw-absolute tw-top-[70px] tw-right-32"
+                        className="tw-absolute tw-right-32 tw-top-[70px] tw-h-9 tw-w-9 tw-rounded-full tw-bg-blue-100/70"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     />
                     <motion.div
-                        className="tw-w-[46px] tw-h-[46px] tw-bg-jagged tw-rounded-full tw-absolute -tw-top-[120px] -tw-right-6"
+                        className="tw-absolute -tw-right-6 -tw-top-[120px] tw-h-[46px] tw-w-[46px] tw-rounded-full tw-bg-jagged"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
diff --git a/src/components/widgets/course-info/item.tsx b/src/components/widgets/course-info/item.tsx
index dae864369..41bac8835 100644
--- a/src/components/widgets/course-info/item.tsx
+++ b/src/components/widgets/course-info/item.tsx
@@ -8,9 +8,9 @@ type TProps = {
 
 const CourseInfo = ({ icon, label, value }: TProps) => {
     return (
-        <div className="tw-flex tw-items-center tw-justify-between tw-py-3.8 tw-border-t tw-border-t-gray-500 first:tw-border-0">
+        <div className="tw-flex tw-items-center tw-justify-between tw-border-t tw-border-t-gray-500 tw-py-3.8 first:tw-border-0">
             <h6 className="tw-mb-0">
-                <i className={clsx(icon, "tw-text-body tw-min-w-[28px] tw-text-center")} /> {label}
+                <i className={clsx(icon, "tw-min-w-[28px] tw-text-center tw-text-body")} /> {label}
             </h6>
             <span className="tw-text-right">{value}</span>
         </div>
diff --git a/src/components/widgets/info-item.tsx b/src/components/widgets/info-item.tsx
index 5a528839d..e05c586dc 100644
--- a/src/components/widgets/info-item.tsx
+++ b/src/components/widgets/info-item.tsx
@@ -8,13 +8,13 @@ type TProps = {
 
 const InfoItem = ({ icon, label, value }: TProps) => {
     return (
-        <div className="tw-flex tw-items-center tw-justify-between tw-py-3.8 tw-border-t tw-border-t-gray-500 first-of-type:tw-border-0">
+        <div className="tw-flex tw-items-center tw-justify-between tw-border-t tw-border-t-gray-500 tw-py-3.8 first-of-type:tw-border-0">
             <h3 className="tw-mb-0 tw-text-h6">
                 {icon && (
                     <i
                         className={clsx(
                             icon,
-                            "tw-text-body tw-min-w-[28px] tw-mr-0.5 tw-text-center"
+                            "tw-mr-0.5 tw-min-w-[28px] tw-text-center tw-text-body"
                         )}
                     />
                 )}
diff --git a/src/components/widgets/info-price.tsx b/src/components/widgets/info-price.tsx
index df9ff0d00..3e30e2678 100644
--- a/src/components/widgets/info-price.tsx
+++ b/src/components/widgets/info-price.tsx
@@ -6,13 +6,13 @@ type TProps = {
 
 const PriceInfo = ({ title, currency, price }: TProps) => {
     return (
-        <div className="course-price tw-flex tw-items-center tw-justify-between tw-mb-[7px]">
+        <div className="course-price tw-mb-[7px] tw-flex tw-items-center tw-justify-between">
             <h3 className="tw-mb-0 tw-text-h6">
-                <i className="far fa-money-bill-wave tw-text-body tw-min-w-[28px] tw-text-center" />{" "}
+                <i className="far fa-money-bill-wave tw-min-w-[28px] tw-text-center tw-text-body" />{" "}
                 {title}
             </h3>
             <span className="tw-text-right">
-                <span className="tw-text-2xl tw-text-primary tw-font-extrabold">
+                <span className="tw-text-2xl tw-font-extrabold tw-text-primary">
                     {price === 0 ? (
                         "Free"
                     ) : (
diff --git a/src/components/widgets/list-widget.tsx b/src/components/widgets/list-widget.tsx
index 78c11191c..d583baa63 100644
--- a/src/components/widgets/list-widget.tsx
+++ b/src/components/widgets/list-widget.tsx
@@ -14,13 +14,13 @@ const ListWidget = ({ className, mode }: TProps) => {
             <ul
                 className={clsx("tw-text-md tw-font-medium", mode === "dark" && "tw-text-gray-400")}
             >
-                <li className="tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-pr-5">
                     <Anchor path="/code-of-conduct">Code of Conduct</Anchor>
                 </li>
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/faq">FAQ</Anchor>
                 </li>
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/contact-us">Contact us</Anchor>
                 </li>
             </ul>
diff --git a/src/components/widgets/popular-tags-widget.tsx b/src/components/widgets/popular-tags-widget.tsx
index 2190eff09..db326bba0 100644
--- a/src/components/widgets/popular-tags-widget.tsx
+++ b/src/components/widgets/popular-tags-widget.tsx
@@ -14,7 +14,7 @@ const PopularTagsWidget = ({ tags }: TProps) => {
                     <Anchor
                         key={tag.slug}
                         path={`/blogs/tag/${tag.slug}`}
-                        className="tw-inline-block tw-text-[13px] tw-font-medium tw-leading-normal tw-pt-[7px] tw-pb-1.5 tw-px-3.8 tw-rounded-[3px] tw-bg-gray-200 tw-text-gray-400 tw-lowercase tw-m-[5px] hover:tw-bg-primary hover:tw-text-white"
+                        className="tw-m-[5px] tw-inline-block tw-rounded-[3px] tw-bg-gray-200 tw-px-3.8 tw-pb-1.5 tw-pt-[7px] tw-text-[13px] tw-font-medium tw-lowercase tw-leading-normal tw-text-gray-400 hover:tw-bg-primary hover:tw-text-white"
                     >
                         {tag.title}
                     </Anchor>
diff --git a/src/components/widgets/recent-courses-widget.tsx b/src/components/widgets/recent-courses-widget.tsx
index 1c0dd443f..2702b73f3 100644
--- a/src/components/widgets/recent-courses-widget.tsx
+++ b/src/components/widgets/recent-courses-widget.tsx
@@ -15,13 +15,13 @@ const RecentCoursesWidget = ({ recentCourses, className }: TProps) => {
             {recentCourses.map(({ title, path, thumbnail }) => (
                 <div
                     key={path}
-                    className="tw-flex tw-items-center tw-mb-5 tw-pb-5 tw-border-b tw-border-b-gray-500 last:tw-mb-0 last:tw-pb-0 last:tw-border-b-0"
+                    className="tw-mb-5 tw-flex tw-items-center tw-border-b tw-border-b-gray-500 tw-pb-5 last:tw-mb-0 last:tw-border-b-0 last:tw-pb-0"
                 >
-                    <div className="tw-max-w-[100px] tw-h-[100px] tw-rounded-full tw-overflow-hidden tw-relative">
+                    <div className="tw-relative tw-h-[100px] tw-max-w-[100px] tw-overflow-hidden tw-rounded-full">
                         {thumbnail?.src && (
                             <>
                                 <img
-                                    className="tw-w-full tw-h-full tw-object-cover"
+                                    className="tw-h-full tw-w-full tw-object-cover"
                                     src={thumbnail.src}
                                     alt={thumbnail?.alt || title}
                                     width={thumbnail?.width || 100}
@@ -34,8 +34,8 @@ const RecentCoursesWidget = ({ recentCourses, className }: TProps) => {
                             </>
                         )}
                     </div>
-                    <div className="tw-pl-5 tw-flex-1">
-                        <h3 className="tw-leading-normal tw-text-h6 tw-mb-0">
+                    <div className="tw-flex-1 tw-pl-5">
+                        <h3 className="tw-mb-0 tw-text-h6 tw-leading-normal">
                             <Anchor path={path}>{title}</Anchor>
                         </h3>
                     </div>
diff --git a/src/components/widgets/recent-posts-widget.tsx b/src/components/widgets/recent-posts-widget.tsx
index d96343be2..7c249bc0f 100644
--- a/src/components/widgets/recent-posts-widget.tsx
+++ b/src/components/widgets/recent-posts-widget.tsx
@@ -14,10 +14,10 @@ const RecentPostsWidget = ({ recentPosts }: TProps) => {
                 <Anchor
                     key={path}
                     path={path}
-                    className="tw-block tw-relative tw-text-lg tw-font-bold tw-leading-[1.78] tw-pt-4 tw-pl-7.5 tw-pb-3.8 tw-text-body tw-border-b tw-border-b-gray-500 last:tw-border-0 tw-group"
+                    className="tw-group tw-relative tw-block tw-border-b tw-border-b-gray-500 tw-pb-3.8 tw-pl-7.5 tw-pt-4 tw-text-lg tw-font-bold tw-leading-[1.78] tw-text-body last:tw-border-0"
                 >
-                    <i className="fa fa-long-arrow-alt-right tw-text-base tw-absolute tw-left-0 tw-top-6 tw-transition-all tw-duration-300 group-hover:tw-opacity-0 group-hover:tw-invisible group-hover:tw-translate-x-full" />
-                    <i className="fa fa-long-arrow-alt-right tw-text-base tw-text-primary tw-absolute tw-left-0 tw-top-6 tw-transition-all tw-duration-300 tw-opacity-0 tw-invisible -tw-translate-x-full group-hover:tw-opacity-100 group-hover:tw-visible group-hover:tw-translate-x-0" />
+                    <i className="fa fa-long-arrow-alt-right tw-absolute tw-left-0 tw-top-6 tw-text-base tw-transition-all tw-duration-300 group-hover:tw-invisible group-hover:tw-translate-x-full group-hover:tw-opacity-0" />
+                    <i className="fa fa-long-arrow-alt-right tw-invisible tw-absolute tw-left-0 tw-top-6 -tw-translate-x-full tw-text-base tw-text-primary tw-opacity-0 tw-transition-all tw-duration-300 group-hover:tw-visible group-hover:tw-translate-x-0 group-hover:tw-opacity-100" />
                     <span>{title}</span>
                 </Anchor>
             ))}
diff --git a/src/components/widgets/search-widget.tsx b/src/components/widgets/search-widget.tsx
index c0345362d..36ccd6c2f 100644
--- a/src/components/widgets/search-widget.tsx
+++ b/src/components/widgets/search-widget.tsx
@@ -42,7 +42,7 @@ const SearchWidget = ({ className }: TProps) => {
                 <button
                     aria-label="Search"
                     type="submit"
-                    className="tw-absolute tw-right-0 tw-top-0 tw-w-14 tw-h-14 tw-rounded-tr tw-rounded-br tw-transition-colors tw-text-primary tw-flex tw-justify-center tw-items-center hover:tw-bg-primary hover:tw-text-white"
+                    className="tw-absolute tw-right-0 tw-top-0 tw-flex tw-h-14 tw-w-14 tw-items-center tw-justify-center tw-rounded-br tw-rounded-tr tw-text-primary tw-transition-colors hover:tw-bg-primary hover:tw-text-white"
                 >
                     <i className="fas fa-search" />
                 </button>
diff --git a/src/components/widgets/text-widget.tsx b/src/components/widgets/text-widget.tsx
index f2bea6549..75b1df3dd 100644
--- a/src/components/widgets/text-widget.tsx
+++ b/src/components/widgets/text-widget.tsx
@@ -11,7 +11,7 @@ const TextWidget = ({ className, mode }: TProps) => {
     return (
         <div className={clsx(className)}>
             <WidgetTitle mode={mode}>Mailing Address</WidgetTitle>
-            <div className={clsx("content ", mode === "dark" && "tw-text-gray-400")}>
+            <div className={clsx("content", mode === "dark" && "tw-text-gray-400")}>
                 <p className="tw-mb-[11px]">31860 Sandy Plains Road, Ste 204 PMB 206</p>
                 <p className="tw-mb-[11px]">
                     <a
@@ -25,7 +25,7 @@ const TextWidget = ({ className, mode }: TProps) => {
                     </a>
                 </p>
             </div>
-            <Social color={mode === "dark" ? "white" : "light"} className="tw-gap-6.1 tw-mt-6.1">
+            <Social color={mode === "dark" ? "white" : "light"} className="tw-mt-6.1 tw-gap-6.1">
                 <SocialLink
                     href="https://www.facebook.com/TheOfficialVetsWhoCode/"
                     label="Facebook"
diff --git a/src/components/widgets/two-col-list-widget.tsx b/src/components/widgets/two-col-list-widget.tsx
index 631bececf..378341e8c 100644
--- a/src/components/widgets/two-col-list-widget.tsx
+++ b/src/components/widgets/two-col-list-widget.tsx
@@ -17,16 +17,16 @@ const TwoColumnListWidget = ({ className, mode }: TProps) => {
                     mode === "dark" && "tw-text-gray-400"
                 )}
             >
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/about-us">Start here</Anchor>
                 </li>
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/blogs/blog">Blog</Anchor>
                 </li>
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/subjects/all">Subjects</Anchor>
                 </li>
-                <li className="tw-w-1/2 tw-pr-5 tw-mb-[11px]">
+                <li className="tw-mb-[11px] tw-w-1/2 tw-pr-5">
                     <Anchor path="/about-us">About us</Anchor>
                 </li>
             </ul>
diff --git a/src/components/widgets/widget-box.tsx b/src/components/widgets/widget-box.tsx
index 9deef6e57..36bbb941c 100644
--- a/src/components/widgets/widget-box.tsx
+++ b/src/components/widgets/widget-box.tsx
@@ -1,6 +1,6 @@
 const WidgetBox = ({ children }: { children: React.ReactNode }) => {
     return (
-        <div className="course-info-widget tw-pt-7.5 tw-px-7.5 tw-pb-[33px] tw-bg-white tw-shadow-2sm tw-shadow-heading/10 tw-rounded">
+        <div className="course-info-widget tw-rounded tw-bg-white tw-px-7.5 tw-pb-[33px] tw-pt-7.5 tw-shadow-2sm tw-shadow-heading/10">
             {children}
         </div>
     );
diff --git a/src/components/widgets/widget-title.tsx b/src/components/widgets/widget-title.tsx
index d5fbc58d7..88f3a05ff 100644
--- a/src/components/widgets/widget-title.tsx
+++ b/src/components/widgets/widget-title.tsx
@@ -7,7 +7,7 @@ type TProps = {
 
 const WidgetTitle = ({ children, mode }: TProps) => {
     return (
-        <h3 className={clsx("tw-text-lg tw-mb-[17px]", mode === "dark" && "tw-text-white")}>
+        <h3 className={clsx("tw-mb-[17px] tw-text-lg", mode === "dark" && "tw-text-white")}>
             {children}
         </h3>
     );
diff --git a/src/components/zoom-card/index.tsx b/src/components/zoom-card/index.tsx
index e4a524ab5..e5499f63e 100644
--- a/src/components/zoom-card/index.tsx
+++ b/src/components/zoom-card/index.tsx
@@ -16,18 +16,18 @@ const ZoomCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "event tw-h-full tw-relative tw-bg-gray-100 tw-group tw-rounded",
-                    "before:tw-absolute before:tw-content-[''] before:tw-inset-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-opacity-0 before:tw-transition-opacity before:tw-duration-300",
+                    "event tw-group tw-relative tw-h-full tw-rounded tw-bg-gray-100",
+                    "before:tw-absolute before:tw-inset-0 before:tw-opacity-0 before:tw-shadow-4xl before:tw-shadow-black/[0.12] before:tw-transition-opacity before:tw-duration-300 before:tw-content-['']",
                     "hover:before:tw-opacity-100",
                     className
                 )}
                 ref={ref}
             >
-                <div className="tw-relative tw-overflow-hidden tw-rounded-t max-w-full tw-h-[230px]">
+                <div className="max-w-full tw-relative tw-h-[230px] tw-overflow-hidden tw-rounded-t">
                     {thumbnail?.src && (
-                        <figure className="tw-transition-transform tw-duration-1500 group-hover:tw-scale-110 tw-h-full">
+                        <figure className="tw-h-full tw-transition-transform tw-duration-1500 group-hover:tw-scale-110">
                             <img
-                                className="tw-w-full tw-h-full tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover"
                                 src={thumbnail.src}
                                 alt={thumbnail?.alt || "Event"}
                                 width={thumbnail.width || 480}
@@ -41,29 +41,29 @@ const ZoomCard = forwardRef<HTMLDivElement, TProps>(
                     </Anchor>
                 </div>
 
-                <div className="info tw-relative tw-z-1 tw-pt-[19px] tw-pb-[23px] tw-px-7.5">
-                    <h3 className="tw-text-xl tw-leading-normal tw-mb-0">
+                <div className="info tw-relative tw-z-1 tw-px-7.5 tw-pb-[23px] tw-pt-[19px]">
+                    <h3 className="tw-mb-0 tw-text-xl tw-leading-normal">
                         <Anchor path={path}>{title}</Anchor>
                     </h3>
 
-                    <div className="tw-flex tw-items-center tw-mt-[7px]">
+                    <div className="tw-mt-[7px] tw-flex tw-items-center">
                         <span className="tw-text-[13px] tw-font-medium tw-uppercase tw-tracking-[1.73px] tw-text-gray-700">
                             Meeting ID:{" "}
                         </span>
-                        <span className="tw-tracking-[2.13px] tw-font-semibold tw-text-[16px] tw-text-primary">
+                        <span className="tw-text-[16px] tw-font-semibold tw-tracking-[2.13px] tw-text-primary">
                             {meeting_id}
                         </span>
                     </div>
 
-                    <div className="tw-mt-[11px] tw-text-base tw-text-gray-300 tw-flex tw-flex-wrap tw-items-center">
-                        <div className="tw-py-[3px] tw-mr-5">
-                            <span className="tw-mr-1 tw-text-body far fa-calendar" />
+                    <div className="tw-mt-[11px] tw-flex tw-flex-wrap tw-items-center tw-text-base tw-text-gray-300">
+                        <div className="tw-mr-5 tw-py-[3px]">
+                            <span className="far fa-calendar tw-mr-1 tw-text-body" />
                             <span className="meta-value start-date">{date}</span>{" "}
                             <span className="tw-font-semibold">{time}</span>
                         </div>
 
                         <div className="zvc-meta zvc-loop-duration">
-                            <span className="tw-mr-1 tw-text-body far fa-clock" />
+                            <span className="far fa-clock tw-mr-1 tw-text-body" />
                             <span className="meta-value">{minutesToHours(duration)}</span>
                         </div>
                     </div>
diff --git a/src/containers/about/layout-01/index.tsx b/src/containers/about/layout-01/index.tsx
index 5c269d490..ff4319162 100644
--- a/src/containers/about/layout-01/index.tsx
+++ b/src/containers/about/layout-01/index.tsx
@@ -31,7 +31,7 @@ const QuoteArea = ({
                         viewport={{ once: true, amount: 0.4 }}
                         variants={scrollUpVariants}
                     >
-                        <figure className="tw-relative tw-flex-auto0 tw-w-[270px] -tw-ml-[135px] tw-translate-y-[50px] tw-hidden lg:tw-block">
+                        <figure className="tw-relative -tw-ml-[135px] tw-hidden tw-w-[270px] tw-flex-auto0 tw-translate-y-[50px] lg:tw-block">
                             {images?.[0]?.src && (
                                 <img
                                     src={images[0].src}
@@ -42,7 +42,7 @@ const QuoteArea = ({
                                 />
                             )}
                         </figure>
-                        <div className="tw-px-7.5 tw-pb-10  lg:tw-py-[70px] lg:tw-pl-[50px] lg:tw-pr-[30px]">
+                        <div className="tw-px-7.5 tw-pb-10 lg:tw-py-[70px] lg:tw-pl-[50px] lg:tw-pr-[30px]">
                             {section_title && (
                                 <SectionTitle
                                     {...section_title}
@@ -52,10 +52,10 @@ const QuoteArea = ({
                                 />
                             )}
 
-                            <div className="tw-flex tw-flex-col md:tw-flex-row tw-gap-[30px]">
+                            <div className="tw-flex tw-flex-col tw-gap-[30px] md:tw-flex-row">
                                 <div className="md:tw-w-[64.5%]">
                                     {texts?.[0]?.content && (
-                                        <p className="tw-text-xl xl:tw-text-2xl tw-font-medium tw-leading-normal">
+                                        <p className="tw-text-xl tw-font-medium tw-leading-normal xl:tw-text-2xl">
                                             {texts[0].content}
                                         </p>
                                     )}
@@ -63,21 +63,21 @@ const QuoteArea = ({
                                 <div className="md:tw-w-[35.406%]">
                                     {texts?.[1]?.content && (
                                         <p
-                                            className="tw-mb-0 tw-text-5xl tw-font-extrabold tw-leading-tight tw-text-primary child:tw-text-2xl child:tw-bottom-0 child:tw-ml-1.3"
+                                            className="tw-mb-0 tw-text-5xl tw-font-extrabold tw-leading-tight tw-text-primary child:tw-bottom-0 child:tw-ml-1.3 child:tw-text-2xl"
                                             dangerouslySetInnerHTML={{
                                                 __html: texts[1].content,
                                             }}
                                         />
                                     )}
                                     {texts?.[2]?.content && (
-                                        <p className="tw-text-base tw-leading-loose tw-mb-2.5 -tw-tracking-tightest tw-uppercase tw-font-bold tw-text-secondary">
+                                        <p className="tw-mb-2.5 tw-text-base tw-font-bold tw-uppercase tw-leading-loose -tw-tracking-tightest tw-text-secondary">
                                             {texts[2].content}
                                         </p>
                                     )}
                                     {anchors?.[0].content && (
                                         <Anchor
                                             path={anchors[0]?.path}
-                                            className="tw-text-secondary-light tw-text-md tw-font-bold"
+                                            className="tw-text-md tw-font-bold tw-text-secondary-light"
                                         >
                                             {anchors[0].content}{" "}
                                             <i className="far fa-long-arrow-right" />
diff --git a/src/containers/about/layout-02/index.tsx b/src/containers/about/layout-02/index.tsx
index 600029b85..278b191d0 100644
--- a/src/containers/about/layout-02/index.tsx
+++ b/src/containers/about/layout-02/index.tsx
@@ -18,9 +18,9 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz
     const { trans1 } = useUI();
     return (
         <Section className="about-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid lg:tw-grid-cols-2 tw-items-center tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-items-center tw-gap-[50px] lg:tw-grid-cols-2 lg:tw-gap-7.5">
                 <motion.div
-                    className="lg:tw-max-w-[420px] tw-order-2 lg:tw-order-1"
+                    className="tw-order-2 lg:tw-order-1 lg:tw-max-w-[420px]"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
@@ -51,7 +51,7 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz
                         </motion.div>
                     )}
                     {images?.[1]?.src && (
-                        <div className="tw-absolute tw-z-20 tw-top-[-90px] tw-right-0 3xl:tw-right-[-73px]">
+                        <div className="tw-absolute tw-right-0 tw-top-[-90px] tw-z-20 3xl:tw-right-[-73px]">
                             <img
                                 src={images[1].src}
                                 alt={images[1]?.alt || "About Two"}
@@ -64,18 +64,18 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz
                     )}
 
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-[-51px] tw-left-0 lg:tw-left-[-107px]"
+                        className="tw-absolute tw-left-0 tw-top-[-51px] tw-z-1 lg:tw-left-[-107px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[7px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] lg:tw-w-15 lg:tw-h-15">
+                        <span className="tw-block tw-h-[45px] tw-w-[45px] tw-rounded-full tw-border-[7px] tw-border-desert -tw-indent-[99999px] lg:tw-h-15 lg:tw-w-15">
                             shape 1
                         </span>
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-bottom-[-26px] tw-w-20 tw-left-0 lg:tw-w-auto lg:-tw-left-10"
+                        className="tw-absolute tw-bottom-[-26px] tw-left-0 tw-z-1 tw-w-20 lg:-tw-left-10 lg:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -84,7 +84,7 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz
                         <img src="/images/shape-animation/about-shape-1.png" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-right-2.5 -tw-bottom-10 tw-w-20 lg:tw-w-auto"
+                        className="tw-absolute -tw-bottom-10 tw-right-2.5 tw-z-1 tw-w-20 lg:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -93,7 +93,7 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz
                         <img src="/images/shape-animation/hashflag.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-[-27px] tw-left-[360px] tw-w-20 lg:tw-w-auto"
+                        className="tw-absolute tw-left-[360px] tw-top-[-27px] tw-z-1 tw-w-20 lg:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/app-download/index.tsx b/src/containers/app-download/index.tsx
index f255660c6..9ed51efc2 100644
--- a/src/containers/app-download/index.tsx
+++ b/src/containers/app-download/index.tsx
@@ -24,9 +24,9 @@ const AppDownloadArea = ({
     const { trans1, trans2 } = useUI();
     return (
         <Section className="app-download-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-items-center tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-items-center tw-gap-[50px] lg:tw-grid-cols-12 lg:tw-gap-7.5">
                 <motion.div
-                    className="lg:tw-col-span-7 tw-relative tw-z-10"
+                    className="tw-relative tw-z-10 lg:tw-col-span-7"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
@@ -43,16 +43,16 @@ const AppDownloadArea = ({
                         />
                     )}
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-left-5 tw-bottom-2.5 tw-w-[200px] tw-h-[200px] md:tw-bottom-0 md:tw-w-[476px] md:tw-h-[476px]"
+                        className="tw-absolute tw-bottom-2.5 tw-left-5 -tw-z-1 tw-h-[200px] tw-w-[200px] md:tw-bottom-0 md:tw-h-[476px] md:tw-w-[476px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-pampas tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-pampas" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-bottom-[40%] tw-left-0 md:tw-left-[-150px]"
+                        className="tw-absolute tw-bottom-[40%] tw-left-0 -tw-z-1 md:tw-left-[-150px]"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -61,18 +61,18 @@ const AppDownloadArea = ({
                         <img src="/images/shape-animation/cta-shape-01.png" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-20 tw-top-0 tw-right-5"
+                        className="tw-absolute tw-right-5 tw-top-0 tw-z-20"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-8 tw-border-desert tw-rounded-full tw-w-[62px] tw-h-[62px]">
+                        <span className="tw-block tw-h-[62px] tw-w-[62px] tw-rounded-full tw-border-8 tw-border-desert -tw-indent-[99999px]">
                             shape 1
                         </span>
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-20 tw-right-7.5 tw-bottom-5 md:tw-w-auto md:tw-bottom-0 md:tw-right-[15%]"
+                        className="tw-absolute tw-bottom-5 tw-right-7.5 -tw-z-1 tw-w-20 md:tw-bottom-0 md:tw-right-[15%] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/become-instructor/index.tsx b/src/containers/become-instructor/index.tsx
index 9a896f24a..49f0ec85a 100644
--- a/src/containers/become-instructor/index.tsx
+++ b/src/containers/become-instructor/index.tsx
@@ -10,7 +10,7 @@ interface BecomeInstructorProps {
 const BecomeInstructor: React.FC<BecomeInstructorProps> = ({ className }) => {
     return (
         <div
-            className={`tw-py-15 md:tw-py-20 lg:tw-py-[100px] tw-bg-[url('/images/bg/become-a-teache-bg.jpg')] tw-bg-cover tw-bg-fixed ${className}`}
+            className={`tw-bg-[url('/images/bg/become-a-teache-bg.jpg')] tw-bg-cover tw-bg-fixed tw-py-15 md:tw-py-20 lg:tw-py-[100px] ${className}`}
         >
             <div className="tw-container">
                 <div className="tw-flex tw-justify-center">
diff --git a/src/containers/blog-details/blog-author.tsx b/src/containers/blog-details/blog-author.tsx
index 165534064..9c2372e68 100644
--- a/src/containers/blog-details/blog-author.tsx
+++ b/src/containers/blog-details/blog-author.tsx
@@ -4,7 +4,7 @@ import { IInstructor } from "@utils/types";
 const BlogAuthor = ({ name, image, bio, socials }: IInstructor) => {
     return (
         <div className="blog-author tw-mt-10 tw-flex tw-flex-wrap tw-justify-center md:tw-justify-start">
-            <div className="tw-text-center tw-max-w-[140px] tw-min-w-[100px] tw-shrink-0">
+            <div className="tw-min-w-[100px] tw-max-w-[140px] tw-shrink-0 tw-text-center">
                 {image?.src && (
                     <img
                         alt={image?.alt || name}
@@ -15,13 +15,13 @@ const BlogAuthor = ({ name, image, bio, socials }: IInstructor) => {
                     />
                 )}
                 {socials?.length > 0 && (
-                    <Social color="dark" tooltip className="tw-mt-[13px] tw-mx-[-9px]">
+                    <Social color="dark" tooltip className="tw-mx-[-9px] tw-mt-[13px]">
                         {socials.map(({ icon, label, url }) => (
                             <SocialLink
                                 key={label}
                                 href={url}
                                 label={label}
-                                className="tw-py-1.5 tw-px-2.5"
+                                className="tw-px-2.5 tw-py-1.5"
                             >
                                 <i className={icon} />
                             </SocialLink>
@@ -29,7 +29,7 @@ const BlogAuthor = ({ name, image, bio, socials }: IInstructor) => {
                     </Social>
                 )}
             </div>
-            <div className="md:tw-w-[calc(100%_-_140px)] tw-text-center tw-pt-7.5 md:tw-text-left md:tw-pt-0 md:tw-pl-7.5">
+            <div className="tw-pt-7.5 tw-text-center md:tw-w-[calc(100%_-_140px)] md:tw-pl-7.5 md:tw-pt-0 md:tw-text-left">
                 <h3 className="tw-mb-[13px] tw-text-base tw-uppercase tw-tracking-wider">{name}</h3>
                 <p className="tw-mb-0">{bio}</p>
             </div>
diff --git a/src/containers/blog-details/index.tsx b/src/containers/blog-details/index.tsx
index 7b36e43a8..3fd4ddf9b 100644
--- a/src/containers/blog-details/index.tsx
+++ b/src/containers/blog-details/index.tsx
@@ -9,12 +9,12 @@ import { IBlog } from "@utils/types";
 
 const BlogDetails = ({ image, title, category, author, postedAt, content, tags }: IBlog) => {
     return (
-        <article className="blog-details tw-pb-7.5 tw-mb-10 tw-border-b tw-border-b-gray-500">
+        <article className="blog-details tw-mb-10 tw-border-b tw-border-b-gray-500 tw-pb-7.5">
             <div className="entry-header tw-mb-5">
                 {image?.src && (
                     <figure className="tw-mb-7">
                         <img
-                            className="tw-w-full tw-object-cover tw-rounded"
+                            className="tw-w-full tw-rounded tw-object-cover"
                             src={image.src}
                             alt={image?.alt || title}
                             width="770"
@@ -22,12 +22,12 @@ const BlogDetails = ({ image, title, category, author, postedAt, content, tags }
                     </figure>
                 )}
 
-                <div className="tw-font-medium tw-uppercase -tw-tracking-tightest tw-mb-4">
+                <div className="tw-mb-4 tw-font-medium tw-uppercase -tw-tracking-tightest">
                     <Anchor path={category.path}>{category.title}</Anchor>
                 </div>
 
                 <h2 className="tw-mb-5">{title}</h2>
-                <div className="tw-text-md tw-mt-5 tw-text-gray-300 tw-flex tw-items-center tw-flex-wrap">
+                <div className="tw-mt-5 tw-flex tw-flex-wrap tw-items-center tw-text-md tw-text-gray-300">
                     <AuthorMeta author={author} className="tw-pr-5 md:tw-pr-8" />
                     <BlogMetaItem
                         className="tw-pr-5 md:tw-pr-8"
@@ -37,7 +37,7 @@ const BlogDetails = ({ image, title, category, author, postedAt, content, tags }
                 </div>
             </div>
             <MarkdownRenderer className="entry-content tw-mb-[54px]" content={content} />
-            <div className="entry-footer tw-flex tw-items-center tw-justify-center sm:tw-justify-between tw-flex-wrap">
+            <div className="entry-footer tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-between">
                 <TagMeta tags={tags} />
                 <SocialShare label="Share this post" className="tw-mt-5 sm:tw-mt-0" />
             </div>
diff --git a/src/containers/blog-details/nav-links/index.tsx b/src/containers/blog-details/nav-links/index.tsx
index 612498749..546b6d6d7 100644
--- a/src/containers/blog-details/nav-links/index.tsx
+++ b/src/containers/blog-details/nav-links/index.tsx
@@ -8,7 +8,7 @@ type TProps = {
 
 const NavLinks = ({ prevPost, nextPost }: TProps) => {
     return (
-        <div className="tw-mt-[34px] tw-grid md:tw-grid-cols-2 tw-gap-7.5">
+        <div className="tw-mt-[34px] tw-grid tw-gap-7.5 md:tw-grid-cols-2">
             {prevPost && (
                 <NavItem
                     title={prevPost.title}
diff --git a/src/containers/blog-details/nav-links/nav-item.tsx b/src/containers/blog-details/nav-links/nav-item.tsx
index 0bc08aabb..0af3f8b99 100644
--- a/src/containers/blog-details/nav-links/nav-item.tsx
+++ b/src/containers/blog-details/nav-links/nav-item.tsx
@@ -12,18 +12,18 @@ const NavItem = ({ title, path, image, variant }: TProps) => {
             path={path}
             rel={variant}
             className={clsx(
-                "tw-relative tw-min-h-[120px] tw-z-1 tw-py-5 tw-px-7.5 tw-rounded tw-bg-white tw-shadow-2xl tw-shadow-heading/10 tw-flex tw-justify-start tw-items-center tw-group",
-                variant === "next" && "tw-text-right tw-flex-row-reverse"
+                "tw-group tw-relative tw-z-1 tw-flex tw-min-h-[120px] tw-items-center tw-justify-start tw-rounded tw-bg-white tw-px-7.5 tw-py-5 tw-shadow-2xl tw-shadow-heading/10",
+                variant === "next" && "tw-flex-row-reverse tw-text-right"
             )}
         >
             {image?.src && (
-                <div className="tw-absolute -tw-z-1 tw-inset-0 tw-opacity-0 tw-rounded tw-transition-opacity tw-duration-300 before:tw-absolute before:tw-content-[''] before:tw-inset-0 before:tw-rounded before:tw-bg-bodyGradient before:tw-opacity-50 group-hover:tw-opacity-100">
+                <div className="tw-absolute tw-inset-0 -tw-z-1 tw-rounded tw-opacity-0 tw-transition-opacity tw-duration-300 before:tw-absolute before:tw-inset-0 before:tw-rounded before:tw-bg-bodyGradient before:tw-opacity-50 before:tw-content-[''] group-hover:tw-opacity-100">
                     <img
                         src={image.src}
                         alt={
                             image?.alt || variant === "prev" ? "Prev Navigation" : "Next Navigation"
                         }
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                     />
                 </div>
             )}
@@ -35,7 +35,7 @@ const NavItem = ({ title, path, image, variant }: TProps) => {
                     variant === "next" && "tw-ml-4 tw-rotate-180"
                 )}
             />
-            <h3 className="tw-mb-0 tw-text-h6 md:tw-text-lg tw-leading-normal tw-transition-colors tw-duration-300 group-hover:tw-text-white">
+            <h3 className="tw-mb-0 tw-text-h6 tw-leading-normal tw-transition-colors tw-duration-300 group-hover:tw-text-white md:tw-text-lg">
                 {title}
             </h3>
         </Anchor>
diff --git a/src/containers/blog-full/layout-01/index.tsx b/src/containers/blog-full/layout-01/index.tsx
index 5966ed711..f9cdf8221 100644
--- a/src/containers/blog-full/layout-01/index.tsx
+++ b/src/containers/blog-full/layout-01/index.tsx
@@ -23,7 +23,7 @@ const BlogArea = ({ data: { blogs, pagiData } }: TProps) => {
             <h2 className="tw-sr-only">Blog Section</h2>
             <div className="tw-container">
                 {blogs.length > 0 && (
-                    <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                    <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                         {blogs.map((blog) => (
                             <AnimatedBlogCard
                                 key={blog.path}
diff --git a/src/containers/blog-full/layout-02/index.tsx b/src/containers/blog-full/layout-02/index.tsx
index 087d372b9..e0ff1932c 100644
--- a/src/containers/blog-full/layout-02/index.tsx
+++ b/src/containers/blog-full/layout-02/index.tsx
@@ -28,7 +28,7 @@ const BlogArea = ({ data: { blogs, recentPosts, tags, pagiData } }: TProps) => {
             <div className="tw-container tw-grid tw-grid-cols-3 tw-gap-10 xl:tw-gap-15">
                 <div className="tw-col-span-full lg:tw-col-[1/3]">
                     {blogs.length > 0 && (
-                        <div className="tw-grid md:tw-grid-cols-2 tw-gap-7.5">
+                        <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2">
                             {blogs.map((blog) => (
                                 <AnimatedBlogCard
                                     key={blog.path}
diff --git a/src/containers/blog-full/layout-03/index.tsx b/src/containers/blog-full/layout-03/index.tsx
index d468836b0..f22377e19 100644
--- a/src/containers/blog-full/layout-03/index.tsx
+++ b/src/containers/blog-full/layout-03/index.tsx
@@ -26,7 +26,7 @@ const BlogArea = ({ data: { blogs, recentPosts, tags, pagiData } }: TProps) => {
         <Section className="blog-area" space="bottom">
             <h2 className="tw-sr-only">Blog Section</h2>
             <div className="tw-container tw-grid tw-grid-cols-3 tw-gap-10 xl:tw-gap-15">
-                <div className="tw-col-span-full lg:tw-col-[2/-1] tw-h-fit">
+                <div className="tw-col-span-full tw-h-fit lg:tw-col-[2/-1]">
                     {blogs?.map((blog) => (
                         <AnimatedBlogCard
                             className="tw-mb-[50px]"
diff --git a/src/containers/blog-full/layout-05/index.tsx b/src/containers/blog-full/layout-05/index.tsx
index b0658791c..033ead06d 100644
--- a/src/containers/blog-full/layout-05/index.tsx
+++ b/src/containers/blog-full/layout-05/index.tsx
@@ -22,7 +22,7 @@ const BlogArea = ({ data: { blogs } }: TProps) => {
             <div className="tw-container">
                 {blogs.length > 0 ? (
                     <>
-                        <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-[30px]">
+                        <div className="tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-grid-cols-2 lg:tw-grid-cols-3">
                             {itemsToShow?.map((blog) => (
                                 <AnimatedBlogCard
                                     key={blog.path}
@@ -38,7 +38,7 @@ const BlogArea = ({ data: { blogs } }: TProps) => {
                                 />
                             ))}
                         </div>
-                        <div className="tw-text-center tw-mt-[50px]">
+                        <div className="tw-mt-[50px] tw-text-center">
                             {hasMore ? (
                                 <Button
                                     variant="outlined"
diff --git a/src/containers/blog/layout-01/index.tsx b/src/containers/blog/layout-01/index.tsx
index 426da849f..462673478 100644
--- a/src/containers/blog/layout-01/index.tsx
+++ b/src/containers/blog/layout-01/index.tsx
@@ -24,7 +24,7 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
 
     return (
         <Section className="blog-area tw-relative tw-overflow-hidden" space={space} bg={bg}>
-            <div className="tw-absolute tw-inset-0 tw-flex jtw-justify-center tw-items-center">
+            <div className="jtw-justify-center tw-absolute tw-inset-0 tw-flex tw-items-center">
                 <img
                     src="/images/bg/shape-03.png"
                     alt="shape"
@@ -46,7 +46,7 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                     />
                 )}
 
-                <div className="tw-grid tw-grid-cols-1 tw-grid-flow-row md:tw-grid-cols-2 lg:tw-grid-cols-[275px_minmax(275px,_500px)_275px] tw-gap-x-[30px] xl:tw-gap-x-[50px] tw-gap-y-[30px] xl:tw-grid-flow-col xl:tw-justify-between tw-relative tw-z-10">
+                <div className="tw-relative tw-z-10 tw-grid tw-grid-flow-row tw-grid-cols-1 tw-gap-x-[30px] tw-gap-y-[30px] md:tw-grid-cols-2 lg:tw-grid-cols-[275px_minmax(275px,_500px)_275px] xl:tw-grid-flow-col xl:tw-justify-between xl:tw-gap-x-[50px]">
                     <motion.div
                         className="lg:tw-mt-[150px] maxLg:tw-order-1"
                         initial="offscreen"
@@ -63,7 +63,7 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                         />
                     </motion.div>
                     <motion.div
-                        className="maxLg:tw-order-3 md:tw-col-span-full lg:tw-col-auto"
+                        className="md:tw-col-span-full lg:tw-col-auto maxLg:tw-order-3"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
@@ -96,12 +96,12 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                 {motto && (
                     <MottoText
                         {...motto}
-                        className="tw-text-center tw-mt-[100px] tw-relative tw-z-10"
+                        className="tw-relative tw-z-10 tw-mt-[100px] tw-text-center"
                     />
                 )}
 
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-top-[80px] tw-left-[60px] lg:tw-top-[140px]"
+                    className="tw-absolute tw-left-[60px] tw-top-[80px] tw-z-1 lg:tw-top-[140px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -116,7 +116,7 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-top-[220px] tw-left-[260px]"
+                    className="tw-absolute tw-left-[260px] tw-top-[220px] tw-z-1"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
@@ -131,13 +131,13 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-bottom-[50px] tw-left-[60%] tw-w-[120px] tw-h-[120px] md:tw-w-[226px] md:tw-h-[226px]"
+                    className="tw-absolute tw-bottom-[50px] tw-left-[60%] tw-z-1 tw-h-[120px] tw-w-[120px] md:tw-h-[226px] md:tw-w-[226px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <Shape2 className="tw-fill-primary-light tw-w-full tw-h-full" />
+                    <Shape2 className="tw-h-full tw-w-full tw-fill-primary-light" />
                 </motion.div>
             </div>
         </Section>
diff --git a/src/containers/blog/layout-02/index.tsx b/src/containers/blog/layout-02/index.tsx
index 857a73084..cf5bc6e16 100644
--- a/src/containers/blog/layout-02/index.tsx
+++ b/src/containers/blog/layout-02/index.tsx
@@ -24,7 +24,7 @@ const BlogArea = ({
 }: TProps) => {
     return (
         <Section className="blog-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+            <div className="tw-container tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                 <motion.div
                     initial="offscreen"
                     whileInView="onscreen"
@@ -43,10 +43,10 @@ const BlogArea = ({
                         <Anchor
                             key={path}
                             path={path}
-                            className="tw-block tw-relative tw-font-bold tw-leading-[1.78] tw-pl-7.5 tw-text-secondary tw-mt-5 first:tw-mt-0 tw-group"
+                            className="tw-group tw-relative tw-mt-5 tw-block tw-pl-7.5 tw-font-bold tw-leading-[1.78] tw-text-secondary first:tw-mt-0"
                         >
-                            <i className="fa fa-long-arrow-alt-right tw-text-base tw-absolute tw-left-0 tw-top-[5px] tw-transition-all tw-duration-300 group-hover:tw-opacity-0 group-hover:tw-invisible group-hover:tw-translate-x-full" />
-                            <i className="fa fa-long-arrow-alt-right tw-text-base tw-text-primary tw-absolute tw-left-0 tw-top-[5px] tw-transition-all tw-duration-300 tw-opacity-0 tw-invisible -tw-translate-x-full group-hover:tw-opacity-100 group-hover:tw-visible group-hover:tw-translate-x-0" />
+                            <i className="fa fa-long-arrow-alt-right tw-absolute tw-left-0 tw-top-[5px] tw-text-base tw-transition-all tw-duration-300 group-hover:tw-invisible group-hover:tw-translate-x-full group-hover:tw-opacity-0" />
+                            <i className="fa fa-long-arrow-alt-right tw-invisible tw-absolute tw-left-0 tw-top-[5px] -tw-translate-x-full tw-text-base tw-text-primary tw-opacity-0 tw-transition-all tw-duration-300 group-hover:tw-visible group-hover:tw-translate-x-0 group-hover:tw-opacity-100" />
                             <span>{title}</span>
                         </Anchor>
                     ))}
diff --git a/src/containers/blog/layout-03/index.tsx b/src/containers/blog/layout-03/index.tsx
index abde01055..10262f0e1 100644
--- a/src/containers/blog/layout-03/index.tsx
+++ b/src/containers/blog/layout-03/index.tsx
@@ -32,7 +32,7 @@ const BlogArea = ({ data: { section_title, blogs }, space, bg, titleSize }: TPro
                     />
                 )}
 
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                     {blogs?.map((blog) => (
                         <AnimatedBlogCard
                             key={blog.path}
diff --git a/src/containers/brand/layout-01/index.tsx b/src/containers/brand/layout-01/index.tsx
index c5d136f48..09430f7d8 100644
--- a/src/containers/brand/layout-01/index.tsx
+++ b/src/containers/brand/layout-01/index.tsx
@@ -37,7 +37,7 @@ const BrandArea = ({ data: { items }, space, bg }: TProps) => {
 
     return (
         <Section className="brand-area" space={space} bg={bg}>
-            <h2 className="tw-flex tw-justify-center tw-text-primary tw-m-20">
+            <h2 className="tw-m-20 tw-flex tw-justify-center tw-text-primary">
                 We Are Thankful for our Corporate Donors and Sponsors
             </h2>
             <div className="tw-container">
@@ -52,7 +52,7 @@ const BrandArea = ({ data: { items }, space, bg }: TProps) => {
                         {items.map((item) => (
                             <SwiperSlide
                                 key={item.id}
-                                className="tw-flex tw-justify-center tw-my-auto"
+                                className="tw-my-auto tw-flex tw-justify-center"
                             >
                                 <img
                                     className="tw-opacity-50 tw-transition-opacity hover:tw-opacity-100"
diff --git a/src/containers/brand/layout-02/index.tsx b/src/containers/brand/layout-02/index.tsx
index c2ac4c535..9415a7cbe 100644
--- a/src/containers/brand/layout-02/index.tsx
+++ b/src/containers/brand/layout-02/index.tsx
@@ -50,7 +50,7 @@ const BrandArea = ({ data: { items }, space, bg }: TProps) => {
                         {items.map((item) => (
                             <SwiperSlide
                                 key={item.id}
-                                className="tw-flex tw-justify-center tw-my-auto"
+                                className="tw-my-auto tw-flex tw-justify-center"
                             >
                                 <img
                                     className="tw-transition-all hover:tw-saturate-[1%]"
diff --git a/src/containers/contact-form/layout-01/index.tsx b/src/containers/contact-form/layout-01/index.tsx
index e2f3b7949..f812d6ed0 100644
--- a/src/containers/contact-form/layout-01/index.tsx
+++ b/src/containers/contact-form/layout-01/index.tsx
@@ -14,10 +14,10 @@ type TProps = TSection & {
 const ContactFormArea = ({ data: { section_title } }: TProps) => {
     return (
         <Section className="contact-form-area">
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-[33%,_minmax(63%,_1fr)] tw-gap-x-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-x-7.5 lg:tw-grid-cols-[33%,_minmax(63%,_1fr)]">
                 {section_title && (
                     <motion.h2
-                        className="tw-leading-none tw-mb-10"
+                        className="tw-mb-10 tw-leading-none"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/contact-form/layout-02/index.tsx b/src/containers/contact-form/layout-02/index.tsx
index 597458c00..62d60f831 100644
--- a/src/containers/contact-form/layout-02/index.tsx
+++ b/src/containers/contact-form/layout-02/index.tsx
@@ -14,11 +14,11 @@ type TProps = TSection & {
 
 const ContactFormArea = ({ data: { section_title } }: TProps) => {
     return (
-        <Section className="contact-form-area tw-min-h-screen tw-flex tw-items-center tw-justify-center tw-bg-white tw-p-4 sm:tw-p-6 lg:tw-p-8">
+        <Section className="contact-form-area tw-flex tw-min-h-screen tw-items-center tw-justify-center tw-bg-white tw-p-4 sm:tw-p-6 lg:tw-p-8">
             <div className="tw-container">
                 {section_title && (
                     <motion.h2
-                        className="tw-text-3xl sm:tw-text-4xl tw-font-bold tw-text-[#091f40] tw-mb-6 sm:tw-mb-8 tw-text-center"
+                        className="tw-mb-6 tw-text-center tw-text-3xl tw-font-bold tw-text-[#091f40] sm:tw-mb-8 sm:tw-text-4xl"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
@@ -28,7 +28,7 @@ const ContactFormArea = ({ data: { section_title } }: TProps) => {
                     </motion.h2>
                 )}
                 <AnimatedContactForm
-                    className="tw-w-full tw-max-w-4xl tw-mx-auto tw-bg-white tw-p-8 sm:tw-p-10"
+                    className="tw-mx-auto tw-w-full tw-max-w-4xl tw-bg-white tw-p-8 sm:tw-p-10"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/contact-info/layout-01/index.tsx b/src/containers/contact-info/layout-01/index.tsx
index dc57c43a8..fd7d701f7 100644
--- a/src/containers/contact-info/layout-01/index.tsx
+++ b/src/containers/contact-info/layout-01/index.tsx
@@ -17,7 +17,7 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <Section className="contact-info-area" space="none">
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-[33%,_minmax(63%,_1fr)] tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-7.5 lg:tw-grid-cols-[33%,_minmax(63%,_1fr)]">
                 <motion.div
                     initial="offscreen"
                     whileInView="onscreen"
@@ -26,24 +26,24 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                 >
                     {section_title && (
                         <>
-                            <span className="tw-text-lg tw-text-heading tw-leading-none tw-font-medium tw-mb-2.5">
+                            <span className="tw-mb-2.5 tw-text-lg tw-font-medium tw-leading-none tw-text-heading">
                                 {section_title?.subtitle}
                             </span>
-                            <h2 className="tw-leading-none tw-mb-10">{section_title.title}</h2>
+                            <h2 className="tw-mb-10 tw-leading-none">{section_title.title}</h2>
                         </>
                     )}
                     {items?.map((item) => (
                         <div
                             key={item.id}
-                            className="tw-relative tw-pl-12 tw-mb-[50px] last:tw-mb-0"
+                            className="tw-relative tw-mb-[50px] tw-pl-12 last:tw-mb-0"
                         >
                             <i
                                 className={clsx(
                                     item.icon,
-                                    "tw-text-[32px] tw-text-primary tw-absolute tw-left-0 tw-top-0"
+                                    "tw-absolute tw-left-0 tw-top-0 tw-text-[32px] tw-text-primary"
                                 )}
                             />
-                            <h3 className="tw-text-lg tw-mb-3.8">{item.title}</h3>
+                            <h3 className="tw-mb-3.8 tw-text-lg">{item.title}</h3>
                             {item.texts?.map((text) => (
                                 <p
                                     key={text.id}
@@ -69,12 +69,12 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             alt={images[0]?.alt || "Hero"}
                             width={570}
                             height={570}
-                            className="tw-rounded-full tw-mx-auto"
+                            className="tw-mx-auto tw-rounded-full"
                         />
                     )}
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-20 tw-h-20 tw-left-px tw-top-0 sm:tw-w-[100px] sm:tw-h-[100px] sm:tw-top-[124px] md:tw-w-auto md:tw-h-auto md:tw-left-px"
+                        className="tw-absolute tw-left-px tw-top-0 -tw-z-1 tw-h-20 tw-w-20 sm:tw-top-[124px] sm:tw-h-[100px] sm:tw-w-[100px] md:tw-left-px md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -86,7 +86,7 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                     </motion.div>
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-20 tw-h-20 tw-left-px tw-top-[70px] sm:tw-w-[100px] sm:tw-h-[100px] sm:tw-top-[262px] md:tw-w-auto md:tw-h-auto md:tw-left-px"
+                        className="tw-absolute tw-left-px tw-top-[70px] -tw-z-1 tw-h-20 tw-w-20 sm:tw-top-[262px] sm:tw-h-[100px] sm:tw-w-[100px] md:tw-left-px md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -95,7 +95,7 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                         <img src="/images/shape-animation/about-shape-1.png" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
+                        className="tw-absolute tw-left-2 tw-top-[255px] tw-z-20 sm:-tw-left-2 sm:tw-top-[355px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -110,7 +110,7 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
+                        className="tw-absolute tw-bottom-3.8 tw-right-5 -tw-z-1 tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] sm:tw-w-[100px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -119,7 +119,7 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                         <img src="/images/shape-animation/code.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-w-15 tw-bottom-[140px] tw-right-2.5 sm:tw-bottom-[314px] sm:tw-right-7.5 md:tw-w-auto md:tw-right-[70px]"
+                        className="tw-absolute tw-bottom-[140px] tw-right-2.5 tw-z-1 tw-w-15 sm:tw-bottom-[314px] sm:tw-right-7.5 md:tw-right-[70px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/contact-info/layout-02/index.tsx b/src/containers/contact-info/layout-02/index.tsx
index 7d594d749..c164f0bc4 100644
--- a/src/containers/contact-info/layout-02/index.tsx
+++ b/src/containers/contact-info/layout-02/index.tsx
@@ -28,7 +28,7 @@ const ContactInfo = ({ data: { section_title, items } }: TProps) => {
             <div className="tw-container">
                 {section_title && (
                     <motion.h2
-                        className="tw-max-w-[770px] tw-mx-auto tw-text-center tw-leading-none tw-mb-10 md:tw-mb-15"
+                        className="tw-mx-auto tw-mb-10 tw-max-w-[770px] tw-text-center tw-leading-none md:tw-mb-15"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
@@ -38,7 +38,7 @@ const ContactInfo = ({ data: { section_title, items } }: TProps) => {
                     </motion.h2>
                 )}
                 <motion.div
-                    className="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-x-7.5 tw-gap-y-10 tw-mb-10 md:tw-mb-15"
+                    className="tw-mb-10 tw-grid tw-grid-cols-1 tw-gap-x-7.5 tw-gap-y-10 md:tw-mb-15 md:tw-grid-cols-3"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
@@ -49,10 +49,10 @@ const ContactInfo = ({ data: { section_title, items } }: TProps) => {
                             <i
                                 className={clsx(
                                     item.icon,
-                                    "tw-text-[32px] tw-text-primary tw-absolute tw-left-0 tw-top-0"
+                                    "tw-absolute tw-left-0 tw-top-0 tw-text-[32px] tw-text-primary"
                                 )}
                             />
-                            <h3 className="tw-text-lg tw-mb-3.8">{item.title}</h3>
+                            <h3 className="tw-mb-3.8 tw-text-lg">{item.title}</h3>
                             {item.texts?.map((text) => (
                                 <p
                                     key={text.id}
diff --git a/src/containers/course-details/curriculam-panel.tsx b/src/containers/course-details/curriculam-panel.tsx
index 4c5ab5ca3..d8606aa5b 100644
--- a/src/containers/course-details/curriculam-panel.tsx
+++ b/src/containers/course-details/curriculam-panel.tsx
@@ -23,12 +23,12 @@ const CurriculumPanel = ({ curriculum, courseSlug }: TProps) => {
             {curriculum.map(({ id, title, description, lessons }) => (
                 <div
                     key={id}
-                    className="tw-border tw-border-alto tw-rounded tw-mt-[50px] first:tw-mt-0"
+                    className="tw-mt-[50px] tw-rounded tw-border tw-border-alto first:tw-mt-0"
                 >
-                    <div className="tw-py-5 tw-px-3.8 md:tw-py-[22px] md:tw-px-12">
-                        <h5 className="tw-text-xl tw-mb-0">{title}</h5>
+                    <div className="tw-px-3.8 tw-py-5 md:tw-px-12 md:tw-py-[22px]">
+                        <h5 className="tw-mb-0 tw-text-xl">{title}</h5>
                         {description && (
-                            <p className="tw-text-md tw-mb-0 tw-mt-[5px] tw-italic">
+                            <p className="tw-mb-0 tw-mt-[5px] tw-text-md tw-italic">
                                 {description}
                             </p>
                         )}
@@ -40,12 +40,12 @@ const CurriculumPanel = ({ curriculum, courseSlug }: TProps) => {
                                 return (
                                     <li
                                         key={item.slug}
-                                        className="tw-text-md even:tw-bg-light-100 odd:tw-bg-white even:last:tw-rounded-b"
+                                        className="tw-text-md odd:tw-bg-white even:tw-bg-light-100 even:last:tw-rounded-b"
                                     >
                                         <Anchor
                                             path={item.path}
                                             className={clsx(
-                                                "tw-px-3.8 md:tw-pl-12 md:tw-pr-7.5 tw-min-h-[56px] tw-flex tw-flex-wrap tw-items-center",
+                                                "tw-flex tw-min-h-[56px] tw-flex-wrap tw-items-center tw-px-3.8 md:tw-pl-12 md:tw-pr-7.5",
                                                 !hasAccess && "tw-pointer-events-none"
                                             )}
                                         >
@@ -59,7 +59,7 @@ const CurriculumPanel = ({ curriculum, courseSlug }: TProps) => {
                                                 />
                                                 {item.title}
                                             </span>
-                                            <div className="tw-text-right tw-flex tw-items-center tw-py-2.5">
+                                            <div className="tw-flex tw-items-center tw-py-2.5 tw-text-right">
                                                 <Badge className="tw-ml-2.5">{item.duration}</Badge>
                                                 {item.type === "lesson" &&
                                                     item.access === "free" && (
@@ -71,12 +71,12 @@ const CurriculumPanel = ({ curriculum, courseSlug }: TProps) => {
                                                         </Badge>
                                                     )}
                                                 {item?.video && (
-                                                    <span className="tw-ml-2.5 tw-font-medium tw-px-3.8">
+                                                    <span className="tw-ml-2.5 tw-px-3.8 tw-font-medium">
                                                         <i className="far fa-video" />
                                                     </span>
                                                 )}
                                                 {item.access === "paid" && (
-                                                    <span className="tw-ml-2.5 tw-font-medium tw-px-3.8">
+                                                    <span className="tw-ml-2.5 tw-px-3.8 tw-font-medium">
                                                         <i className="fas fa-lock-alt" />
                                                     </span>
                                                 )}
diff --git a/src/containers/course-details/index.tsx b/src/containers/course-details/index.tsx
index 16a99ae04..b78da6471 100644
--- a/src/containers/course-details/index.tsx
+++ b/src/containers/course-details/index.tsx
@@ -13,7 +13,7 @@ type TProps = {
 const CourseDetails = ({ data: { course } }: TProps) => {
     return (
         <section className="course-details">
-            <div className="tw-container tw-grid lg:tw-grid-cols-3 tw-gap-12">
+            <div className="tw-container tw-grid tw-gap-12 lg:tw-grid-cols-3">
                 <div className="lg:tw-col-[1/3]">
                     <TabContainer variant="underline">
                         <TabList>
diff --git a/src/containers/course-details/instructor-panel.tsx b/src/containers/course-details/instructor-panel.tsx
index 6b0de6161..489ff6475 100644
--- a/src/containers/course-details/instructor-panel.tsx
+++ b/src/containers/course-details/instructor-panel.tsx
@@ -22,10 +22,10 @@ const OverviewPanel = ({ name, image, designation, bio, socials }: TProps) => {
                 <h3>
                     <Anchor path="/profile">{name}</Anchor>
                 </h3>
-                <h6 className="tw-font-normal tw-text-body tw-leading-relaxed tw-mb-0">
+                <h6 className="tw-mb-0 tw-font-normal tw-leading-relaxed tw-text-body">
                     /{designation}
                 </h6>
-                <p className="tw-mt-3.8 tw-mb-0">{bio}</p>
+                <p className="tw-mb-0 tw-mt-3.8">{bio}</p>
 
                 <Social shape="circle" variant="outlined" color="light" className="tw-mt-7.5">
                     {socials.map((social) => (
diff --git a/src/containers/course-details/overview-panel.tsx b/src/containers/course-details/overview-panel.tsx
index a9632c9cd..5898510a2 100644
--- a/src/containers/course-details/overview-panel.tsx
+++ b/src/containers/course-details/overview-panel.tsx
@@ -8,7 +8,7 @@ type TProps = {
 
 const OverviewPanel = ({ description }: TProps) => {
     return (
-        <div className="course-overview tw-prose prose-h2:tw-text-xl sm:prose-h2:tw-text-3xl tw-max-w-none">
+        <div className="course-overview tw-prose tw-max-w-none prose-h2:tw-text-xl sm:prose-h2:tw-text-3xl">
             <h2 className="title tw-mb-5">Course Description</h2>
             <HTMLContent body={description} />
         </div>
diff --git a/src/containers/course-details/review-panel.tsx b/src/containers/course-details/review-panel.tsx
index 53018f89c..4b1cdd20e 100644
--- a/src/containers/course-details/review-panel.tsx
+++ b/src/containers/course-details/review-panel.tsx
@@ -6,12 +6,12 @@ import { ReviewType } from "@utils/types";
 const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
     return (
         <>
-            <h3 className="tw-mt-[13px] tw-mb-[26px]">Reviews</h3>
+            <h3 className="tw-mb-[26px] tw-mt-[13px]">Reviews</h3>
             <div className="tw-flex tw-flex-wrap">
-                <div className="tw-shrink-0 tw-w-full tw-mb-7.5 sm:tw-mb-0 sm:tw-w-[200px] sm:tw-mr-7.5 md:tw-mr-[70px]">
-                    <p className="tw-text-secondary tw-font-medium tw-mb-3.8">Average Rating</p>
-                    <div className="tw-bg-white tw-text-center tw-pt-[34px] tw-pb-[38px] tw-px-7.5 tw-shadow-2sm tw-shadow-heading/10">
-                        <div className="tw-text-[56px] tw-font-semibold tw-leading-none tw-mb-2 tw-text-primary">
+                <div className="tw-mb-7.5 tw-w-full tw-shrink-0 sm:tw-mb-0 sm:tw-mr-7.5 sm:tw-w-[200px] md:tw-mr-[70px]">
+                    <p className="tw-mb-3.8 tw-font-medium tw-text-secondary">Average Rating</p>
+                    <div className="tw-bg-white tw-px-7.5 tw-pb-[38px] tw-pt-[34px] tw-text-center tw-shadow-2sm tw-shadow-heading/10">
+                        <div className="tw-mb-2 tw-text-[56px] tw-font-semibold tw-leading-none tw-text-primary">
                             {average}
                         </div>
                         <StarRating rating={average} />
@@ -19,7 +19,7 @@ const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
                     </div>
                 </div>
                 <div className="tw-grow">
-                    <p className="tw-text-secondary tw-font-medium sm:tw-mb-[42px]">
+                    <p className="tw-font-medium tw-text-secondary sm:tw-mb-[42px]">
                         Detailed Rating
                     </p>
                     {Object.entries(rating_details).map(([key, value]) => (
@@ -28,7 +28,7 @@ const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
                                 rating={+key}
                                 size="sm"
                                 align="left"
-                                className="tw-shrink-0 tw-mr-5"
+                                className="tw-mr-5 tw-shrink-0"
                             />
                             <ProgressBar
                                 color="primary"
@@ -36,7 +36,7 @@ const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
                                 disableAnimation
                                 className="tw-grow"
                             />
-                            <span className="tw-shrink-0 tw-text-gray-400 tw-font-medium tw-min-w-[25px] tw-text-right tw-ml-1">
+                            <span className="tw-ml-1 tw-min-w-[25px] tw-shrink-0 tw-text-right tw-font-medium tw-text-gray-400">
                                 {value}
                             </span>
                         </div>
@@ -48,7 +48,7 @@ const ReviewPanel = ({ average, count, rating_details, items }: ReviewType) => {
                     {items.map((item) => (
                         <li
                             key={item.id}
-                            className="tw-mb-7.5 tw-pl-[5px] tw-pr-5 tw-pt-5 tw-pb-7 tw-border-b tw-border-b-gray-500 tw-mt-2.5 first:tw-mt-0 last:tw-mb-0"
+                            className="tw-mb-7.5 tw-mt-2.5 tw-border-b tw-border-b-gray-500 tw-pb-7 tw-pl-[5px] tw-pr-5 tw-pt-5 first:tw-mt-0 last:tw-mb-0"
                         >
                             <Review {...item} />
                         </li>
diff --git a/src/containers/course-full/layout-03/index.tsx b/src/containers/course-full/layout-03/index.tsx
index 242113a51..21025b2ff 100644
--- a/src/containers/course-full/layout-03/index.tsx
+++ b/src/containers/course-full/layout-03/index.tsx
@@ -22,12 +22,12 @@ const CourseArea = ({ data: { courses } }: TProps) => {
         <Section className="course-area" space="bottom">
             <h2 className="tw-sr-only">Module Section</h2>
             <div className="tw-container">
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-items-center tw-mb-5">
+                <div className="tw-mb-5 tw-grid tw-grid-cols-1 tw-items-center md:tw-grid-cols-2">
                     <p className="tw-mb-2.5">
                         We found {sortedItems.length} Modules available for you
                     </p>
                 </div>
-                <div className="tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 lg:tw-grid-cols-2">
                     {itemsToShow?.map((course) => (
                         <AnimatedCourseCard
                             key={course.path}
diff --git a/src/containers/course/layout-01/index.tsx b/src/containers/course/layout-01/index.tsx
index 6408a3a7b..308ac6af2 100644
--- a/src/containers/course/layout-01/index.tsx
+++ b/src/containers/course/layout-01/index.tsx
@@ -32,7 +32,7 @@ const CourseArea = ({ data: { section_title, motto, courses }, space, bg, titleS
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-[30px]">
+                <div className="tw-grid tw-gap-[30px] md:tw-grid-cols-2 lg:tw-grid-cols-3">
                     {courses?.map((course) => (
                         <AnimatedCourseCard
                             key={course.path}
@@ -48,7 +48,7 @@ const CourseArea = ({ data: { section_title, motto, courses }, space, bg, titleS
                     ))}
                 </div>
                 {motto && (
-                    <div className="lg:tw-w-7/12 tw-mx-auto tw-text-center tw-mt-[70px]">
+                    <div className="tw-mx-auto tw-mt-[70px] tw-text-center lg:tw-w-7/12">
                         <MottoText {...motto} />
                     </div>
                 )}
diff --git a/src/containers/course/layout-02/index.tsx b/src/containers/course/layout-02/index.tsx
index a9f37b94e..9d8a6f611 100644
--- a/src/containers/course/layout-02/index.tsx
+++ b/src/containers/course/layout-02/index.tsx
@@ -17,7 +17,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
     return (
         <Section className="cta-area" space={space} bg={bg}>
             <motion.div
-                className="tw-container tw-text-center tw-relative"
+                className="tw-container tw-relative tw-text-center"
                 initial="offscreen"
                 whileInView="onscreen"
                 viewport={{ once: true, amount: 0.4 }}
@@ -25,7 +25,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
             >
                 {section_title?.subtitle && (
                     <h3
-                        className="tw-leading-none tw-mb-2.5 tw-text-secondary child:tw-text-primary child:tw-font-normal"
+                        className="tw-mb-2.5 tw-leading-none tw-text-secondary child:tw-font-normal child:tw-text-primary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.subtitle,
                         }}
@@ -33,7 +33,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                 )}
                 {section_title?.title && (
                     <h2
-                        className="tw-text-[34px] tw-mb-7.5 tw-text-secondary"
+                        className="tw-mb-7.5 tw-text-[34px] tw-text-secondary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.title,
                         }}
@@ -46,18 +46,18 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                     </Button>
                 ))}
                 <motion.div
-                    className="tw-absolute tw-top-[-50px] tw-left-[50px] tw-z-20"
+                    className="tw-absolute tw-left-[50px] tw-top-[-50px] tw-z-20"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-[7px] tw-border-desert-100 tw-rounded-full tw-w-[52px] tw-h-[52px]">
+                    <span className="tw-block tw-h-[52px] tw-w-[52px] tw-rounded-full tw-border-[7px] tw-border-desert-100 -tw-indent-[99999px]">
                         shape 1
                     </span>
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-bottom-0 -tw-left-2.5 tw-w-15 md:tw-w-auto md:-tw-left-5"
+                    className="tw-absolute -tw-left-2.5 tw-bottom-0 tw-z-1 tw-w-15 md:-tw-left-5 md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -66,7 +66,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                     <img src="/images/shape-animation/cta-shape-01.png" alt="" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-w-15 tw-top-5 -tw-right-5 md:tw-w-auto md:tw-top-2.5 md:tw-right-0"
+                    className="tw-absolute -tw-right-5 tw-top-5 tw-z-1 tw-w-15 md:tw-right-0 md:tw-top-2.5 md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
diff --git a/src/containers/course/layout-05/index.tsx b/src/containers/course/layout-05/index.tsx
index 7f0e8a364..8e1bdaa1f 100644
--- a/src/containers/course/layout-05/index.tsx
+++ b/src/containers/course/layout-05/index.tsx
@@ -29,7 +29,7 @@ const CourseArea = ({ data: { section_title, courses }, space, bg, titleSize }:
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                     {courses.map((course) => (
                         <CourseCard
                             key={course.path}
diff --git a/src/containers/cta/layout-02/index.tsx b/src/containers/cta/layout-02/index.tsx
index a9f37b94e..9d8a6f611 100644
--- a/src/containers/cta/layout-02/index.tsx
+++ b/src/containers/cta/layout-02/index.tsx
@@ -17,7 +17,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
     return (
         <Section className="cta-area" space={space} bg={bg}>
             <motion.div
-                className="tw-container tw-text-center tw-relative"
+                className="tw-container tw-relative tw-text-center"
                 initial="offscreen"
                 whileInView="onscreen"
                 viewport={{ once: true, amount: 0.4 }}
@@ -25,7 +25,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
             >
                 {section_title?.subtitle && (
                     <h3
-                        className="tw-leading-none tw-mb-2.5 tw-text-secondary child:tw-text-primary child:tw-font-normal"
+                        className="tw-mb-2.5 tw-leading-none tw-text-secondary child:tw-font-normal child:tw-text-primary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.subtitle,
                         }}
@@ -33,7 +33,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                 )}
                 {section_title?.title && (
                     <h2
-                        className="tw-text-[34px] tw-mb-7.5 tw-text-secondary"
+                        className="tw-mb-7.5 tw-text-[34px] tw-text-secondary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.title,
                         }}
@@ -46,18 +46,18 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                     </Button>
                 ))}
                 <motion.div
-                    className="tw-absolute tw-top-[-50px] tw-left-[50px] tw-z-20"
+                    className="tw-absolute tw-left-[50px] tw-top-[-50px] tw-z-20"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-[7px] tw-border-desert-100 tw-rounded-full tw-w-[52px] tw-h-[52px]">
+                    <span className="tw-block tw-h-[52px] tw-w-[52px] tw-rounded-full tw-border-[7px] tw-border-desert-100 -tw-indent-[99999px]">
                         shape 1
                     </span>
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-bottom-0 -tw-left-2.5 tw-w-15 md:tw-w-auto md:-tw-left-5"
+                    className="tw-absolute -tw-left-2.5 tw-bottom-0 tw-z-1 tw-w-15 md:-tw-left-5 md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -66,7 +66,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => {
                     <img src="/images/shape-animation/cta-shape-01.png" alt="" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-w-15 tw-top-5 -tw-right-5 md:tw-w-auto md:tw-top-2.5 md:tw-right-0"
+                    className="tw-absolute -tw-right-5 tw-top-5 tw-z-1 tw-w-15 md:tw-right-0 md:tw-top-2.5 md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
diff --git a/src/containers/cta/layout-03/index.tsx b/src/containers/cta/layout-03/index.tsx
index bb19dc792..f6c4ab8d5 100644
--- a/src/containers/cta/layout-03/index.tsx
+++ b/src/containers/cta/layout-03/index.tsx
@@ -23,7 +23,7 @@ const CtaArea = ({ data: { section_title, buttons }, bg, space }: TProps) => {
             >
                 {section_title?.subtitle && (
                     <h3
-                        className="tw-leading-none tw-mb-2.5 tw-text-secondary child:tw-text-primary child:tw-font-normal"
+                        className="tw-mb-2.5 tw-leading-none tw-text-secondary child:tw-font-normal child:tw-text-primary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.subtitle,
                         }}
@@ -31,7 +31,7 @@ const CtaArea = ({ data: { section_title, buttons }, bg, space }: TProps) => {
                 )}
                 {section_title?.title && (
                     <h2
-                        className="tw-text-[34px] tw-mb-7.5 tw-text-secondary"
+                        className="tw-mb-7.5 tw-text-[34px] tw-text-secondary"
                         dangerouslySetInnerHTML={{
                             __html: section_title.title,
                         }}
diff --git a/src/containers/donate-form/layout-01/index.tsx b/src/containers/donate-form/layout-01/index.tsx
index 8fb8d2cc5..5dcf58f88 100644
--- a/src/containers/donate-form/layout-01/index.tsx
+++ b/src/containers/donate-form/layout-01/index.tsx
@@ -17,7 +17,7 @@ const DonateFormArea = ({ data: { section_title } }: TProps) => {
             <div className="tw-container">
                 {section_title && (
                     <motion.h2
-                        className="tw-leading-none tw-mb-10"
+                        className="tw-mb-10 tw-leading-none"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/event-details/hero.tsx b/src/containers/event-details/hero.tsx
index 41c6c0a49..f4e74b2ba 100644
--- a/src/containers/event-details/hero.tsx
+++ b/src/containers/event-details/hero.tsx
@@ -9,11 +9,11 @@ type TProps = Pick<IEvent, "thumbnail" | "title" | "start_date" | "start_time">;
 
 const HeroSection = ({ thumbnail, title, start_date, start_time }: TProps) => {
     return (
-        <div className="tw-relative tw-bg-heading tw-py-[100px] md:tw-pt-[232px] md:tw-pb-[184px] tw-max-h-[760px]">
-            <div className="tw-absolute tw-inset-0 after:tw-absolute after:tw-content-[''] after:tw-inset-0 after:tw-bg-black/40">
+        <div className="tw-relative tw-max-h-[760px] tw-bg-heading tw-py-[100px] md:tw-pb-[184px] md:tw-pt-[232px]">
+            <div className="tw-absolute tw-inset-0 after:tw-absolute after:tw-inset-0 after:tw-bg-black/40 after:tw-content-['']">
                 {thumbnail?.src && (
                     <img
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                         src={thumbnail.src}
                         alt={thumbnail?.alt || title}
                         width="1920"
@@ -21,16 +21,16 @@ const HeroSection = ({ thumbnail, title, start_date, start_time }: TProps) => {
                 )}
             </div>
 
-            <div className="tw-container tw-relative tw-z-1 tw-text-white tw-text-center">
-                <p className="tw-font-bold tw-uppercase tw-tracking-[4px] tw-mb-7">
+            <div className="tw-container tw-relative tw-z-1 tw-text-center tw-text-white">
+                <p className="tw-mb-7 tw-font-bold tw-uppercase tw-tracking-[4px]">
                     {dayjs(start_date).format("MMMM YY")}{" "}
                 </p>
 
-                <h1 className="tw-text-[40px] md:tw-text-5xl lg:tw-text-[56px] tw-leading-[1.15] tw-text-white tw-mb-0">
+                <h1 className="tw-mb-0 tw-text-[40px] tw-leading-[1.15] tw-text-white md:tw-text-5xl lg:tw-text-[56px]">
                     {title}
                 </h1>
                 <CountdownTimer
-                    className="tw-max-w-[470px] tw-mt-[54px]"
+                    className="tw-mt-[54px] tw-max-w-[470px]"
                     targetDate={`${start_date} ${start_time}`}
                 />
             </div>
diff --git a/src/containers/event-details/speakers.tsx b/src/containers/event-details/speakers.tsx
index 9b7c517b0..d089c5753 100644
--- a/src/containers/event-details/speakers.tsx
+++ b/src/containers/event-details/speakers.tsx
@@ -23,8 +23,8 @@ const sliderOptions = {
 
 const Speakers = ({ speakers }: { speakers: ISpeaker[] }) => {
     return (
-        <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] tw-border-b tw-border-b-gray-650">
-            <h2 className="tw-text-4xl lg:tw-text-5xl tw-text-center tw-mb-11">Our Speaker</h2>
+        <div className="tw-container tw-border-b tw-border-b-gray-650 tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px]">
+            <h2 className="tw-mb-11 tw-text-center tw-text-4xl lg:tw-text-5xl">Our Speaker</h2>
             {speakers.length > 0 && (
                 <Swiper options={sliderOptions}>
                     {speakers.map((item) => (
@@ -39,7 +39,7 @@ const Speakers = ({ speakers }: { speakers: ISpeaker[] }) => {
                 </Swiper>
             )}
 
-            <p className="tw-text-lg tw-max-w-[630px] tw-text-center tw-mx-auto tw-mt-[54px]">
+            <p className="tw-mx-auto tw-mt-[54px] tw-max-w-[630px] tw-text-center tw-text-lg">
                 Register online, get your ticket, meet up with our inspirational speakers and
                 specialists in the field to share your ideas.
             </p>
diff --git a/src/containers/event-details/summary.tsx b/src/containers/event-details/summary.tsx
index c0ba1c7e9..1eb40f85a 100644
--- a/src/containers/event-details/summary.tsx
+++ b/src/containers/event-details/summary.tsx
@@ -30,19 +30,19 @@ const Summary = ({
     return (
         <article className="tw-py-15 md:tw-py-20 lg:tw-py-[100px]">
             <div className="tw-container tw-border-b tw-border-b-gray-650 tw-pb-[50px] md:tw-pb-[70px] lg:tw-pb-[90px]">
-                <h2 className="tw-text-4xl md:tw-text-[42px] lg:tw-text-5xl tw-text-center tw-mb-5">
+                <h2 className="tw-mb-5 tw-text-center tw-text-4xl md:tw-text-[42px] lg:tw-text-5xl">
                     About The Event
                 </h2>
-                <div className="tw-flex tw-flex-wrap tw-justify-center tw-items-center tw-mb-10 lg:tw-mb-15">
+                <div className="tw-mb-10 tw-flex tw-flex-wrap tw-items-center tw-justify-center lg:tw-mb-15">
                     <div className="tw-mx-3 tw-mb-[5px]">
-                        <i className="fal fa-map-marker-alt tw-text-primary tw-mr-[5px]" />
+                        <i className="fal fa-map-marker-alt tw-mr-[5px] tw-text-primary" />
                         <span>
                             {location.city}, {location.country}
                         </span>
                     </div>
 
                     <div className="tw-mx-3 tw-mb-[5px]">
-                        <i className="fal fa-calendar tw-text-primary tw-mr-[5px]" />
+                        <i className="fal fa-calendar tw-mr-[5px] tw-text-primary" />
                         <span>
                             {dayjs(start_date).format("MMM DD, YYYY")} -{" "}
                             {dayjs(end_date).format("MMM DD, YYYY")}
@@ -50,14 +50,14 @@ const Summary = ({
                     </div>
 
                     <div className="tw-mx-3 tw-mb-[5px]">
-                        <i className="fal fa-clock tw-text-primary tw-mr-[5px]" />
+                        <i className="fal fa-clock tw-mr-[5px] tw-text-primary" />
                         <span>
                             {dayjs(`${start_date} ${start_time}`).format("h:mm a")} -{" "}
                             {dayjs(`${end_date} ${end_time}`).format("h:mm a")}
                         </span>
                     </div>
                 </div>
-                <div className="tw-grid tw-grid-cols-3 tw-gap-10 tw-mb-10 lg:tw-mb-[50px]">
+                <div className="tw-mb-10 tw-grid tw-grid-cols-3 tw-gap-10 lg:tw-mb-[50px]">
                     <div className="tw-col-span-full lg:tw-col-[1/3]">
                         <div className="tw-h-[400px] lg:tw-h-[390px]">
                             <GoogleMap
@@ -70,7 +70,7 @@ const Summary = ({
                         </div>
 
                         <p className="tw-mb-0 tw-mt-5 tw-text-center">
-                            <span className="fal fa-map-marker-alt tw-text-primary tw-mr-1.5" />
+                            <span className="fal fa-map-marker-alt tw-mr-1.5 tw-text-primary" />
                             {venue}
                         </p>
                     </div>
diff --git a/src/containers/event/layout-01/filter-items.tsx b/src/containers/event/layout-01/filter-items.tsx
index 4dc8b34cb..65cba23b4 100644
--- a/src/containers/event/layout-01/filter-items.tsx
+++ b/src/containers/event/layout-01/filter-items.tsx
@@ -17,7 +17,7 @@ const FilterItems = ({ events }: TProps) => {
     const numberOfPages = Math.ceil(events.length / POSTS_PER_PAGE);
     return (
         <>
-            <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+            <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                 {events.length > 0 ? (
                     events
                         .slice(skip, limit)
diff --git a/src/containers/event/layout-01/index.tsx b/src/containers/event/layout-01/index.tsx
index db31365aa..84fa994b5 100644
--- a/src/containers/event/layout-01/index.tsx
+++ b/src/containers/event/layout-01/index.tsx
@@ -32,10 +32,10 @@ const EventArea = ({ data: { events, allEvents, totalEvents, pagiData } }: TProp
         <Section className="events-area" space="bottom">
             <h2 className="tw-sr-only">Event Section</h2>
             <div className="tw-container">
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-items-center tw-mb-5">
+                <div className="tw-mb-5 tw-grid tw-grid-cols-1 tw-items-center md:tw-grid-cols-2">
                     <p className="tw-mb-2.5">We found {count} events available for you</p>
                     <NiceSelect
-                        className="tw-w-[270px] md:tw-ml-auto tw-mb-2.5"
+                        className="tw-mb-2.5 tw-w-[270px] md:tw-ml-auto"
                         options={[
                             {
                                 label: "All",
diff --git a/src/containers/event/layout-01/original-items.tsx b/src/containers/event/layout-01/original-items.tsx
index e92418df0..9fac9f00f 100644
--- a/src/containers/event/layout-01/original-items.tsx
+++ b/src/containers/event/layout-01/original-items.tsx
@@ -17,7 +17,7 @@ type TProps = {
 const OriginalItems = ({ events, pagiData }: TProps) => {
     return (
         <>
-            <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+            <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                 {events.map((event) => (
                     <AnimatedEventCard
                         key={event.path}
diff --git a/src/containers/event/layout-02/index.tsx b/src/containers/event/layout-02/index.tsx
index 54ba2a558..9f98b080a 100644
--- a/src/containers/event/layout-02/index.tsx
+++ b/src/containers/event/layout-02/index.tsx
@@ -77,7 +77,7 @@ const EventArea = ({ data: { section_title, motto, events }, space, bg, titleSiz
                 {motto && (
                     <AnimatedMottoText
                         {...motto}
-                        className="lg:tw-w-7/12 tw-mx-auto tw-text-center tw-mt-10"
+                        className="tw-mx-auto tw-mt-10 tw-text-center lg:tw-w-7/12"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/event/layout-03/index.tsx b/src/containers/event/layout-03/index.tsx
index 510f48392..b705b9ae7 100644
--- a/src/containers/event/layout-03/index.tsx
+++ b/src/containers/event/layout-03/index.tsx
@@ -34,7 +34,7 @@ const EventArea = ({ data: { section_title, motto, events }, space, bg, titleSiz
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 lg:tw-grid-cols-2">
                     {events.map((event) => (
                         <AnimatedEventCard
                             key={event.path}
@@ -52,7 +52,7 @@ const EventArea = ({ data: { section_title, motto, events }, space, bg, titleSiz
                 {motto && (
                     <AnimatedMottoText
                         {...motto}
-                        className="lg:tw-w-7/12 tw-mx-auto tw-text-center tw-mt-[50px] lg:tw-mt-[70px]"
+                        className="tw-mx-auto tw-mt-[50px] tw-text-center lg:tw-mt-[70px] lg:tw-w-7/12"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/faq/layout-01/index.tsx b/src/containers/faq/layout-01/index.tsx
index 7f06949b7..7e1342ced 100644
--- a/src/containers/faq/layout-01/index.tsx
+++ b/src/containers/faq/layout-01/index.tsx
@@ -20,9 +20,9 @@ const FaqArea = ({ data: { section_title, images, items }, space, bg, titleSize
 
     return (
         <Section className="faq-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-[50px] lg:tw-grid-cols-2 lg:tw-gap-7.5">
                 <motion.div
-                    className="tw-relative tw-pl-10 tw-z-10"
+                    className="tw-relative tw-z-10 tw-pl-10"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
@@ -39,13 +39,13 @@ const FaqArea = ({ data: { section_title, images, items }, space, bg, titleSize
                     )}
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-top-[50px] -tw-left-15 tw-w-[200px] tw-h-[200px] sm:tw-left-0 sm:tw-w-[392px] sm:tw-h-[392px] md:tw-w-[392px] md:tw-h-[392px]"
+                        className="tw-absolute -tw-left-15 tw-top-[50px] -tw-z-1 tw-h-[200px] tw-w-[200px] sm:tw-left-0 sm:tw-h-[392px] sm:tw-w-[392px] md:tw-h-[392px] md:tw-w-[392px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-gray-800 tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-gray-800" />
                     </motion.div>
                 </motion.div>
                 <motion.div
diff --git a/src/containers/faq/layout-03/index.tsx b/src/containers/faq/layout-03/index.tsx
index 0449463f4..7471be180 100644
--- a/src/containers/faq/layout-03/index.tsx
+++ b/src/containers/faq/layout-03/index.tsx
@@ -14,7 +14,7 @@ const FaqArea = ({ data: { images, items } }: TProps) => {
         <div className="faq-area tw-pt-15 md:tw-pt-20 lg:tw-pt-[100px]">
             <div className="tw-container">
                 <motion.div
-                    className="tw-grid md:tw-grid-cols-[66%_minmax(34%,_1fr)] tw-gap-7.5"
+                    className="tw-grid tw-gap-7.5 md:tw-grid-cols-[66%_minmax(34%,_1fr)]"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
@@ -24,35 +24,33 @@ const FaqArea = ({ data: { images, items } }: TProps) => {
                         <img
                             src={images[0].src}
                             alt={images[0]?.alt || "Faq"}
-                            className="tw-rounded tw-w-full tw-h-full tw-object-cover"
+                            className="tw-h-full tw-w-full tw-rounded tw-object-cover"
                         />
                     )}
                     {images?.[1]?.src && (
                         <img
                             src={images[1].src}
                             alt={images[1]?.alt || "Faq"}
-                            className="tw-rounded tw-w-full tw-h-full tw-object-cover"
+                            className="tw-h-full tw-w-full tw-rounded tw-object-cover"
                         />
                     )}
                 </motion.div>
                 {items?.map((item) => (
                     <motion.div
                         key={item.id}
-                        className="tw-pt-[47px] tw-pb-[50px] tw-border-b tw-border-b-gray-500 tw-grid md:tw-grid-cols-[40%_minmax(60%,_1fr)] tw-gap-7.5"
+                        className="tw-grid tw-gap-7.5 tw-border-b tw-border-b-gray-500 tw-pb-[50px] tw-pt-[47px] md:tw-grid-cols-[40%_minmax(60%,_1fr)]"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.1 }}
                         variants={scrollUpVariants}
                     >
-                        <h4 className="tw-text-lg tw-font-semibold md:tw-max-w-[310px] tw-relative tw-pl-8">
-                            <i className="far fa-long-arrow-right tw-text-primary tw-absolute tw-left-0 tw-top-2" />
+                        <h4 className="tw-relative tw-pl-8 tw-text-lg tw-font-semibold md:tw-max-w-[310px]">
+                            <i className="far fa-long-arrow-right tw-absolute tw-left-0 tw-top-2 tw-text-primary" />
                             {item.title}
                         </h4>
-                        <div className="tw-relative tw-pl-8 tw-mt-5 md:tw-mt-0">
-                            <i className="far fa-check tw-text-primary tw-absolute tw-left-0 tw-top-2" />
-                            {item.texts?.map((text) => (
-                                <p key={text.id}>{text.content}</p>
-                            ))}
+                        <div className="tw-relative tw-mt-5 tw-pl-8 md:tw-mt-0">
+                            <i className="far fa-check tw-absolute tw-left-0 tw-top-2 tw-text-primary" />
+                            {item.texts?.map((text) => <p key={text.id}>{text.content}</p>)}
                         </div>
                     </motion.div>
                 ))}
diff --git a/src/containers/faq/layout-04/index.tsx b/src/containers/faq/layout-04/index.tsx
index c13e1c40c..112e3327b 100644
--- a/src/containers/faq/layout-04/index.tsx
+++ b/src/containers/faq/layout-04/index.tsx
@@ -32,9 +32,9 @@ const FaqArea = ({ data: { section_title, images, items }, space, bg, titleSize
                 bg
             )}
         >
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-[50px] lg:tw-grid-cols-2 lg:tw-gap-7.5">
                 <motion.div
-                    className="tw-relative tw-pl-10 tw-z-10"
+                    className="tw-relative tw-z-10 tw-pl-10"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
@@ -51,13 +51,13 @@ const FaqArea = ({ data: { section_title, images, items }, space, bg, titleSize
                     )}
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-top-[50px] -tw-left-15 tw-w-[200px] tw-h-[200px] sm:tw-left-0 sm:tw-w-[392px] sm:tw-h-[392px] md:tw-w-[392px] md:tw-h-[392px]"
+                        className="tw-absolute -tw-left-15 tw-top-[50px] -tw-z-1 tw-h-[200px] tw-w-[200px] sm:tw-left-0 sm:tw-h-[392px] sm:tw-w-[392px] md:tw-h-[392px] md:tw-w-[392px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-gray-800 tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-gray-800" />
                     </motion.div>
                 </motion.div>
                 <motion.div
diff --git a/src/containers/funfact/layout-01/index.tsx b/src/containers/funfact/layout-01/index.tsx
index 8ce7e7968..7a4247be5 100644
--- a/src/containers/funfact/layout-01/index.tsx
+++ b/src/containers/funfact/layout-01/index.tsx
@@ -30,7 +30,7 @@ const FunfactArea = ({ data: { section_title, items }, space, bg, titleSize }: T
                 />
             )}
 
-            <div className="tw-grid md:tw-grid-cols-3 lg:tw-w-3/4 tw-mx-auto tw-gap-[30px]">
+            <div className="tw-mx-auto tw-grid tw-gap-[30px] md:tw-grid-cols-3 lg:tw-w-3/4">
                 {items?.map((item) => (
                     <AnimatedFunFact
                         key={item.id}
diff --git a/src/containers/funfact/layout-02/index.tsx b/src/containers/funfact/layout-02/index.tsx
index bf22fe734..e3d559183 100644
--- a/src/containers/funfact/layout-02/index.tsx
+++ b/src/containers/funfact/layout-02/index.tsx
@@ -14,7 +14,7 @@ type TProps = TSection & {
 
 const FunfactArea = ({ data: { items }, space, bg }: TProps) => (
     <Section className="funfact-area" space={space} bg={bg}>
-        <div className="tw-container tw-grid tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-grid-cols-4 tw-relative tw-z-20">
+        <div className="tw-container tw-relative tw-z-20 tw-grid tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-grid-cols-4">
             {items?.map((item) => (
                 <AnimatedFunFact
                     key={item.id}
diff --git a/src/containers/funfact/layout-03/index.tsx b/src/containers/funfact/layout-03/index.tsx
index 89fe72443..339328bd2 100644
--- a/src/containers/funfact/layout-03/index.tsx
+++ b/src/containers/funfact/layout-03/index.tsx
@@ -16,7 +16,7 @@ const FunfactArea = ({ data: { items }, space, bg }: TProps) => {
     return (
         <Section className="funfact-area" space={space} bg={bg}>
             <div
-                className="tw-container tw-pt-[99px] tw-pb-[52px] tw-grid sm:tw-grid-cols-2 lg:tw-grid-cols-4 tw-bg-[top_center] md:tw-bg-left"
+                className="tw-container tw-grid tw-bg-[top_center] tw-pb-[52px] tw-pt-[99px] sm:tw-grid-cols-2 md:tw-bg-left lg:tw-grid-cols-4"
                 style={{
                     backgroundImage: `url("/images/bg/background-pattern-grid-line-02.png")`,
                 }}
diff --git a/src/containers/funfact/layout-04/index.tsx b/src/containers/funfact/layout-04/index.tsx
index 68e7a197b..30eef2b75 100644
--- a/src/containers/funfact/layout-04/index.tsx
+++ b/src/containers/funfact/layout-04/index.tsx
@@ -19,7 +19,7 @@ type TProps = TSection & {
 const FunfactArea = ({ data: { section_title, motto, items }, space, bg, titleSize }: TProps) => {
     return (
         <Section className="funfact-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-[50px] lg:tw-grid-cols-2 lg:tw-gap-7.5">
                 <motion.div
                     className="md:tw-max-w-[470px]"
                     initial="offscreen"
@@ -32,7 +32,7 @@ const FunfactArea = ({ data: { section_title, motto, items }, space, bg, titleSi
                     )}
                     {motto && <MottoText {...motto} size="md" className="tw-mt-5" />}
                 </motion.div>
-                <div className="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-x-3.8 tw-gap-10 md:tw-gap-y-15 tw-h-min">
+                <div className="tw-grid tw-h-min tw-grid-cols-1 tw-gap-10 tw-gap-x-3.8 sm:tw-grid-cols-2 md:tw-gap-y-15">
                     {items?.map((item) => (
                         <AnimatedFunFact
                             key={item.id}
diff --git a/src/containers/gallery/index.tsx b/src/containers/gallery/index.tsx
index bb30ab8ed..77b7e73d4 100644
--- a/src/containers/gallery/index.tsx
+++ b/src/containers/gallery/index.tsx
@@ -13,7 +13,7 @@ type TProps = {
 
 const GalleryArea = ({ data: { items } }: TProps) => {
     return (
-        <div className="gallery-area tw-grid tw-gap-2.5 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] 2xl:tw-grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] md:grid-flow-dense">
+        <div className="gallery-area md:grid-flow-dense tw-grid tw-grid-cols-1 tw-gap-2.5 md:tw-grid-cols-2 lg:tw-grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] 2xl:tw-grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))]">
             <h2 className="tw-sr-only">Gallery Section</h2>
             {items?.map(({ id, images, name, designation }) => (
                 <AnimatedItem
diff --git a/src/containers/gallery/item.tsx b/src/containers/gallery/item.tsx
index 9454644a1..dd111c472 100644
--- a/src/containers/gallery/item.tsx
+++ b/src/containers/gallery/item.tsx
@@ -19,24 +19,24 @@ const Item = forwardRef<HTMLDivElement, TProps>(({ image, name, designation }, r
     return (
         <div
             className={clsx(
-                "tw-relative tw-group",
+                "tw-group tw-relative",
                 elWidth > 500 && elWidth < 600 && "lg:tw-col-span-1 xl:tw-col-span-2",
                 elWidth > 600 && "lg:tw-col-span-2 xl:tw-col-span-3"
             )}
             ref={ref}
         >
             {image?.src && (
-                <div className="tw-relative tw-w-full tw-h-full before:tw-absolute before:tw-content-[''] before:tw-z-1 before:tw-inset-0 before:tw-transition-all before:tw-duration-500 before:tw-bg-black/50 before:tw-opacity-0 group-hover:before:tw-opacity-100">
+                <div className="tw-relative tw-h-full tw-w-full before:tw-absolute before:tw-inset-0 before:tw-z-1 before:tw-bg-black/50 before:tw-opacity-0 before:tw-transition-all before:tw-duration-500 before:tw-content-[''] group-hover:before:tw-opacity-100">
                     <img
                         src={image.src}
                         alt=""
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                         ref={imgRef}
                     />
                 </div>
             )}
-            <div className="tw-absolute tw-z-10 tw-top-1/2 tw-left-0 tw-w-full tw-p-5 tw-transition-all tw-duration-500 tw-text-center tw-opacity-0 group-hover:tw-opacity-100 group-hover:-tw-translate-y-1/2">
-                <h3 className="tw-text-[34px] tw-text-white tw-mb-0">{name}</h3>
+            <div className="tw-absolute tw-left-0 tw-top-1/2 tw-z-10 tw-w-full tw-p-5 tw-text-center tw-opacity-0 tw-transition-all tw-duration-500 group-hover:-tw-translate-y-1/2 group-hover:tw-opacity-100">
+                <h3 className="tw-mb-0 tw-text-[34px] tw-text-white">{name}</h3>
                 <p className="tw-text-white">{designation}</p>
             </div>
         </div>
diff --git a/src/containers/gradation/index.tsx b/src/containers/gradation/index.tsx
index 9f23da020..30ac32df4 100644
--- a/src/containers/gradation/index.tsx
+++ b/src/containers/gradation/index.tsx
@@ -20,7 +20,7 @@ const GradationArea = ({ data: { section_title, items } }: TProps) => {
     return (
         <Section className="gradation-area">
             <div className="tw-container">
-                <div className="md:tw-flex md:tw-justify-between tw-mb-[50px]">
+                <div className="tw-mb-[50px] md:tw-flex md:tw-justify-between">
                     {section_title && (
                         <AnimatedSectionTitle
                             {...section_title}
@@ -33,21 +33,21 @@ const GradationArea = ({ data: { section_title, items } }: TProps) => {
                     )}
                     <motion.h3
                         className={clsx(
-                            "tw-relative tw-text-[13px] -tw-tracking-tightest tw-uppercase tw-inline-block tw-py-[45px] tw-pr-20 tw-pl-[42px] tw-z-1 tw-mb-0 tw-mt-7.5 lg:tw-mt-0",
-                            "before:tw-absolute before:tw-content-[''] before:tw-top-[52px] before:tw-left-0 before:tw-w-[34px] before:tw-h-px before:tw-bg-primary"
+                            "tw-relative tw-z-1 tw-mb-0 tw-mt-7.5 tw-inline-block tw-py-[45px] tw-pl-[42px] tw-pr-20 tw-text-[13px] tw-uppercase -tw-tracking-tightest lg:tw-mt-0",
+                            "before:tw-absolute before:tw-left-0 before:tw-top-[52px] before:tw-h-px before:tw-w-[34px] before:tw-bg-primary before:tw-content-['']"
                         )}
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
                         variants={scrollUpVariants}
                     >
-                        <mark className="tw-absolute tw-bg-transparent tw-top-1/2 tw-right-0 -tw-translate-y-1/2 tw-text-[120px] tw-leading-[0.8] tw-font-black tw-text-gray-550 -tw-z-1 tw-p-5">
+                        <mark className="tw-absolute tw-right-0 tw-top-1/2 -tw-z-1 -tw-translate-y-1/2 tw-bg-transparent tw-p-5 tw-text-[120px] tw-font-black tw-leading-[0.8] tw-text-gray-550">
                             {items?.length.toString().padStart(2, "0") || "00"}
                         </mark>
                         Steps
                     </motion.h3>
                 </div>
-                <div className="tw-grid lg:tw-grid-cols-4 -tw-mx-3.8">
+                <div className="-tw-mx-3.8 tw-grid lg:tw-grid-cols-4">
                     {items?.map((item, i) => (
                         <AnimatedGradation
                             className="tw-px-3.8"
diff --git a/src/containers/hero-image/index.tsx b/src/containers/hero-image/index.tsx
index 46cb90945..cc7e68ca2 100644
--- a/src/containers/hero-image/index.tsx
+++ b/src/containers/hero-image/index.tsx
@@ -9,7 +9,7 @@ type TProps = {
 const HeroImageArea = ({ data: { images } }: TProps) => (
     <div className="hero-image-section md:tw-mb-[240px]">
         {images?.[0]?.src && (
-            <div className="tw-relative tw-z-10 tw-max-w-[970px] tw-mx-auto tw-rounded child:tw-mx-auto md:-tw-mt-[240px] md:-tw-bottom-[240px]">
+            <div className="tw-relative tw-z-10 tw-mx-auto tw-max-w-[970px] tw-rounded child:tw-mx-auto md:-tw-bottom-[240px] md:-tw-mt-[240px]">
                 <img
                     className="image"
                     src={images[0].src}
diff --git a/src/containers/hero/layout-01/index.tsx b/src/containers/hero/layout-01/index.tsx
index 45039e53b..7845aec44 100644
--- a/src/containers/hero/layout-01/index.tsx
+++ b/src/containers/hero/layout-01/index.tsx
@@ -21,7 +21,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }:
     const { trans1 } = useUI();
 
     return (
-        <div className="tw-h-full md:tw-min-h-[750px] xl:tw-min-h-[820px] tw-py-[50px] tw-relative tw-flex tw-items-center tw-isolate tw-bg-pearl tw-overflow-hidden">
+        <div className="tw-relative tw-isolate tw-flex tw-h-full tw-items-center tw-overflow-hidden tw-bg-pearl tw-py-[50px] md:tw-min-h-[750px] xl:tw-min-h-[820px]">
             <h1 className="tw-sr-only">Home Page</h1>
             <div className="bgimg tw-absolute tw-inset-0 -tw-z-10 tw-hidden md:tw-block">
                 {images?.[0]?.src && (
@@ -29,27 +29,27 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }:
                         src={images[0].src}
                         alt={images[0]?.alt || "bg"}
                         loading="eager"
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                     />
                 )}
             </div>
             <div className="tw-container 3xl:tw-max-w-full 3xl:tw-px-37">
-                <div className="tw-grid md:tw-gap-7.5 md:tw-grid-cols-2">
+                <div className="tw-grid md:tw-grid-cols-2 md:tw-gap-7.5">
                     <motion.div
-                        className="content tw-text-center tw-mb-7.5 md:tw-text-left md:tw-self-center"
+                        className="content tw-mb-7.5 tw-text-center md:tw-self-center md:tw-text-left"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.1 }}
                         variants={scrollUpVariants}
                     >
                         {headings?.[0]?.content && (
-                            <span className="tw-text-sm tw-mb-2.5 -tw-tracking-tightest tw-font-bold tw-leading-loose tw-uppercase tw-text-secondary tw-block md:tw-mb-[18px] md:tw-tracking-[4px]">
+                            <span className="tw-mb-2.5 tw-block tw-text-sm tw-font-bold tw-uppercase tw-leading-loose -tw-tracking-tightest tw-text-secondary md:tw-mb-[18px] md:tw-tracking-[4px]">
                                 {headings[0].content}
                             </span>
                         )}
                         {headings?.[1]?.content && (
                             <h2
-                                className="tw-text-3xl sm:tw-text-[40px] lg:tw-text-[54px] xl:tw-text-[63px] tw-leading-[1.13] tw-text-secondary"
+                                className="tw-text-3xl tw-leading-[1.13] tw-text-secondary sm:tw-text-[40px] lg:tw-text-[54px] xl:tw-text-[63px]"
                                 dangerouslySetInnerHTML={{
                                     __html: headings[1].content,
                                 }}
@@ -58,7 +58,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }:
                         {texts?.map((text) => (
                             <p
                                 key={text.id}
-                                className="tw-text-md sm:tw-text-[16px] tw-font-medium tw-leading-relaxed tw-mt-3 sm:tw-mx-auto tw-max-w-[540px] md:tw-ml-0 md:tw-text-lg"
+                                className="tw-mt-3 tw-max-w-[540px] tw-text-md tw-font-medium tw-leading-relaxed sm:tw-mx-auto sm:tw-text-[16px] md:tw-ml-0 md:tw-text-lg"
                             >
                                 {text.content}
                             </p>
@@ -71,14 +71,14 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }:
                         ))}
                     </motion.div>
                     <motion.div
-                        className="course tw-flex tw-space-between tw-justify-center xl:tw-justify-end tw-relative tw-z-10"
+                        className="course tw-space-between tw-relative tw-z-10 tw-flex tw-justify-center xl:tw-justify-end"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.1 }}
                         variants={scrollUpVariants}
                     >
                         <img
-                            className="tw-absolute tw-left-0 -tw-top-7.5 tw-max-w-[100px] tw-z-1 sm:tw-relative sm:tw-left-auto sm:tw-top-auto sm:tw-z-20 sm:tw-self-end sm:tw-flex-auto sm:tw-ml-auto tw-mr-5 sm:tw-mb-[100px] sm:tw-max-w-[120px] md:-tw-mr-7.5 md:-tw-ml-[60px] lg:tw-max-w-[186px]"
+                            className="tw-absolute -tw-top-7.5 tw-left-0 tw-z-1 tw-mr-5 tw-max-w-[100px] sm:tw-relative sm:tw-left-auto sm:tw-top-auto sm:tw-z-20 sm:tw-mb-[100px] sm:tw-ml-auto sm:tw-max-w-[120px] sm:tw-flex-auto sm:tw-self-end md:-tw-ml-[60px] md:-tw-mr-7.5 lg:tw-max-w-[186px]"
                             src="/images/intro/intro1/intro-popular-course.png"
                             alt="popular"
                             width={186}
@@ -96,7 +96,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }:
                             }}
                         />
                         <motion.div
-                            className="intro1-scene tw-absolute -tw-z-1 -tw-right-11 -tw-bottom-11 tw-w-[136px]"
+                            className="intro1-scene tw-absolute -tw-bottom-11 -tw-right-11 -tw-z-1 tw-w-[136px]"
                             animate={{
                                 x: trans1().x,
                                 y: trans1().y,
diff --git a/src/containers/hero/layout-02/index.tsx b/src/containers/hero/layout-02/index.tsx
index 5d2221df8..3c049ab92 100644
--- a/src/containers/hero/layout-02/index.tsx
+++ b/src/containers/hero/layout-02/index.tsx
@@ -20,23 +20,23 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
     const { trans1, trans2 } = useUI();
     return (
         <div className="hero-area tw-pt-[65px]">
-            <div className="tw-container tw-grid lg:tw-grid-cols-2 tw-gap-7.5">
+            <div className="tw-container tw-grid tw-gap-7.5 lg:tw-grid-cols-2">
                 <motion.div
-                    className="md:tw-max-w-[460px] tw-text-center md:tw-text-left tw-self-center"
+                    className="tw-self-center tw-text-center md:tw-max-w-[460px] md:tw-text-left"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
                     variants={scrollUpVariants}
                 >
                     {headings?.[0]?.content && (
-                        <h1 className="tw-text-3xl sm:tw-text-4xl lg:tw-text-5xl tw-leading-[1.17] tw-text-secondary">
+                        <h1 className="tw-text-3xl tw-leading-[1.17] tw-text-secondary sm:tw-text-4xl lg:tw-text-5xl">
                             {headings[0].content}
                         </h1>
                     )}
                     {texts?.map((text) => (
                         <p
                             key={text.id}
-                            className="tw-text-md sm:tw-text-[16px] lg:tw-text-lg tw-font-medium tw-leading-relaxed tw-text-secondary-light tw-mt-3"
+                            className="tw-mt-3 tw-text-md tw-font-medium tw-leading-relaxed tw-text-secondary-light sm:tw-text-[16px] lg:tw-text-lg"
                         >
                             {text.content}
                         </p>
@@ -54,7 +54,7 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                 <div className="tw-relative tw-z-10">
                     {images?.[0]?.src && (
                         <motion.div
-                            className="tw-rounded-full tw-overflow-hidden"
+                            className="tw-overflow-hidden tw-rounded-full"
                             initial="offscreen"
                             whileInView="onscreen"
                             viewport={{ once: true, amount: 0.1 }}
@@ -65,13 +65,13 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                                 alt={images[0]?.alt || "Hero"}
                                 width={570}
                                 height={570}
-                                className="tw-object-cover tw-w-full tw-h-full tw-mx-auto"
+                                className="tw-mx-auto tw-h-full tw-w-full tw-object-cover"
                             />
                         </motion.div>
                     )}
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-20 tw-h-20 tw-left-px tw-top-0 sm:tw-w-[100px] sm:tw-h-[100px] sm:tw-top-[124px] md:tw-w-auto md:tw-h-auto md:tw-left-px"
+                        className="tw-absolute tw-left-px tw-top-0 -tw-z-1 tw-h-20 tw-w-20 sm:tw-top-[124px] sm:tw-h-[100px] sm:tw-w-[100px] md:tw-left-px md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -83,7 +83,7 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                     </motion.div>
 
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-20 tw-h-20 tw-left-px tw-top-[70px] sm:tw-w-[100px] sm:tw-h-[100px] sm:tw-top-[262px] md:tw-w-auto md:tw-h-auto md:tw-left-px"
+                        className="tw-absolute tw-left-px tw-top-[70px] -tw-z-1 tw-h-20 tw-w-20 sm:tw-top-[262px] sm:tw-h-[100px] sm:tw-w-[100px] md:tw-left-px md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -92,7 +92,7 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                         <img src="/images/shape-animation/about-shape-1.png" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
+                        className="tw-absolute tw-left-2 tw-top-[255px] tw-z-20 sm:-tw-left-2 sm:tw-top-[355px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -107,7 +107,7 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
+                        className="tw-absolute tw-bottom-3.8 tw-right-5 -tw-z-1 tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] sm:tw-w-[100px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -116,7 +116,7 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                         <img src="/images/shape-animation/code.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-w-15 tw-bottom-[140px] tw-right-2.5 sm:tw-bottom-[314px] sm:tw-right-7.5 md:tw-w-auto md:tw-right-[70px]"
+                        className="tw-absolute tw-bottom-[140px] tw-right-2.5 tw-z-1 tw-w-15 sm:tw-bottom-[314px] sm:tw-right-7.5 md:tw-right-[70px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/hero/layout-03/index.tsx b/src/containers/hero/layout-03/index.tsx
index c9ac77c65..8bef9455e 100644
--- a/src/containers/hero/layout-03/index.tsx
+++ b/src/containers/hero/layout-03/index.tsx
@@ -21,25 +21,25 @@ const HeroArea = ({ data: { headings, buttons, images } }: TProps) => {
                         src={images[0].src}
                         alt={images[0]?.alt || "bg"}
                         loading="eager"
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                     />
                 )}
             </div>
             <motion.div
-                className="tw-container tw-text-center tw-relative"
+                className="tw-container tw-relative tw-text-center"
                 initial="offscreen"
                 whileInView="onscreen"
                 viewport={{ once: true, amount: 0.1 }}
                 variants={scrollUpVariants}
             >
                 {headings?.[0]?.content && (
-                    <span className="tw-text-[26px] -tw-tracking-tightest sm:tw-tracking-[3px] lg:tw-tracking-normal lg:tw-text-[34px] tw-leading-none tw-font-bold tw-text-white tw-block tw-mb-2.5">
+                    <span className="tw-mb-2.5 tw-block tw-text-[26px] tw-font-bold tw-leading-none -tw-tracking-tightest tw-text-white sm:tw-tracking-[3px] lg:tw-text-[34px] lg:tw-tracking-normal">
                         {headings[0].content}
                     </span>
                 )}
                 {headings?.[1]?.content && (
                     <h1
-                        className="tw-text-[34px] sm:tw-text-[46px] lg:tw-text-[54px] xl:tw-text-[64px] tw-leading-none tw-font-normal tw-text-white"
+                        className="tw-text-[34px] tw-font-normal tw-leading-none tw-text-white sm:tw-text-[46px] lg:tw-text-[54px] xl:tw-text-[64px]"
                         dangerouslySetInnerHTML={{
                             __html: headings[1].content,
                         }}
diff --git a/src/containers/hero/layout-04/index.tsx b/src/containers/hero/layout-04/index.tsx
index f2093142c..77a99a130 100644
--- a/src/containers/hero/layout-04/index.tsx
+++ b/src/containers/hero/layout-04/index.tsx
@@ -31,14 +31,14 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps)
     });
     return (
         <>
-            <div className="hero-area tw-relative tw-pt-[100px] tw-pb-[130px] md:tw-py-[170px] xl:tw-pt-[270px] xl:tw-pb-[248px]">
+            <div className="hero-area tw-relative tw-pb-[130px] tw-pt-[100px] md:tw-py-[170px] xl:tw-pb-[248px] xl:tw-pt-[270px]">
                 {images?.[0]?.src && (
                     <div className="tw-absolute tw-inset-0 -tw-z-10">
                         <img
                             src={images[0].src}
                             alt={images[0]?.alt || "bg"}
                             loading="eager"
-                            className="tw-w-full tw-h-full tw-object-cover"
+                            className="tw-h-full tw-w-full tw-object-cover"
                         />
                         <div
                             style={{
@@ -60,9 +60,9 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps)
                     variants={scrollUpVariants}
                 >
                     {headings?.[0]?.content && (
-                        <h1 className="tw-text-[46px] lg:tw-text-[56px] tw-leading-tight tw-font-medium tw-text-white">
+                        <h1 className="tw-text-[46px] tw-font-medium tw-leading-tight tw-text-white lg:tw-text-[56px]">
                             {headings[0].content}{" "}
-                            <span className="tw-text-primary tw-inline-block">
+                            <span className="tw-inline-block tw-text-primary">
                                 {animatedText}
                                 <Cursor />
                             </span>
@@ -71,12 +71,12 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps)
                     {texts?.map((text) => (
                         <p
                             key={text.id}
-                            className="tw-text-lg tw-font-medium tw-leading-relaxed tw-text-white tw-mb-5 sm:tw-mb-8"
+                            className="tw-mb-5 tw-text-lg tw-font-medium tw-leading-relaxed tw-text-white sm:tw-mb-8"
                         >
                             {text.content}
                         </p>
                     ))}
-                    <div className="tw-flex tw-items-center tw-justify-center tw-flex-wrap">
+                    <div className="tw-flex tw-flex-wrap tw-items-center tw-justify-center">
                         {buttons?.[0] && (
                             <Button {...buttons[0]} className="tw-m-2.5">
                                 {buttons[0].content}
diff --git a/src/containers/hero/layout-05/index.tsx b/src/containers/hero/layout-05/index.tsx
index f99b0f83e..df773ab77 100644
--- a/src/containers/hero/layout-05/index.tsx
+++ b/src/containers/hero/layout-05/index.tsx
@@ -16,24 +16,24 @@ type TProps = {
 
 const HeroArea = ({ data: { headings, texts, buttons, images } }: TProps) => {
     return (
-        <div className="hero-area tw-bg-ebb tw-relative tw-flex tw-items-center">
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5 tw-relative tw-z-10">
+        <div className="hero-area tw-relative tw-flex tw-items-center tw-bg-ebb">
+            <div className="tw-container tw-relative tw-z-10 tw-grid tw-grid-cols-1 tw-gap-7.5 lg:tw-grid-cols-2">
                 <motion.div
-                    className="tw-self-center tw-text-center tw-pt-[140px] tw-pb-10 tw-px-3.8 md:p-0 md:tw-text-left md:tw-max-w-[460px]"
+                    className="md:p-0 tw-self-center tw-px-3.8 tw-pb-10 tw-pt-[140px] tw-text-center md:tw-max-w-[460px] md:tw-text-left"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
                     variants={scrollUpVariants}
                 >
                     {headings?.[0]?.content && (
-                        <h1 className="tw-text-3xl sm:tw-text-4xl lg:tw-text-5xl tw-text-secondary lg:tw-leading-[1.17]">
+                        <h1 className="tw-text-3xl tw-text-secondary sm:tw-text-4xl lg:tw-text-5xl lg:tw-leading-[1.17]">
                             {headings[0].content}
                         </h1>
                     )}
                     {texts?.map((text) => (
                         <p
                             key={text.id}
-                            className="tw-text-md sm:tw-text-[16px] md:tw-text-lg tw-font-medium tw-leading-relaxed tw-text-secondary-light"
+                            className="tw-text-md tw-font-medium tw-leading-relaxed tw-text-secondary-light sm:tw-text-[16px] md:tw-text-lg"
                         >
                             {text.content}
                         </p>
@@ -46,7 +46,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images } }: TProps) => {
                     ))}
                 </motion.div>
                 <motion.div
-                    className="lg:tw-pt-[137px] tw-px-3.8 tw-pb-[50px] lg:tw-pb-[55px]"
+                    className="tw-px-3.8 tw-pb-[50px] lg:tw-pb-[55px] lg:tw-pt-[137px]"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
diff --git a/src/containers/hero/layout-06/index.tsx b/src/containers/hero/layout-06/index.tsx
index 15caa34cb..c2e5d1187 100644
--- a/src/containers/hero/layout-06/index.tsx
+++ b/src/containers/hero/layout-06/index.tsx
@@ -24,21 +24,21 @@ const HeroArea = ({ data: { headings, texts, buttons, images, video } }: TProps)
         <div className="hero-area tw-relative tw-bg-gore tw-pt-[120px] md:tw-pt-44 xl:tw-pt-[176px]">
             <div className="tw-container">
                 <motion.div
-                    className="tw-text-center tw-relative tw-z-10 tw-mb-10 md:tw-mb-20"
+                    className="tw-relative tw-z-10 tw-mb-10 tw-text-center md:tw-mb-20"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.1 }}
                     variants={scrollUpVariants}
                 >
                     {headings?.[0]?.content && (
-                        <h1 className="tw-text-[34px] sm:tw-text-[42px] lg:tw-text-5xl tw-text-white lg:tw-leading-[1.17] tw-mb-0">
+                        <h1 className="tw-mb-0 tw-text-[34px] tw-text-white sm:tw-text-[42px] lg:tw-text-5xl lg:tw-leading-[1.17]">
                             {headings[0].content}
                         </h1>
                     )}
                     {texts?.map((text) => (
                         <p
                             key={text.id}
-                            className="tw-text-lg tw-font-medium tw-text-white/70 tw-mb-6"
+                            className="tw-mb-6 tw-text-lg tw-font-medium tw-text-white/70"
                         >
                             {text.content}
                         </p>
@@ -50,10 +50,10 @@ const HeroArea = ({ data: { headings, texts, buttons, images, video } }: TProps)
                         </Button>
                     ))}
                 </motion.div>
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-12 tw-gap-7.5 tw-items-end tw-relative -tw-bottom-[90px] -tw-mt-[90px] md:-tw-bottom-[50px] md:-tw-mt-[50px]  lg:-tw-bottom-[90px] lg:-tw-mt-[90px]">
+                <div className="tw-relative -tw-bottom-[90px] -tw-mt-[90px] tw-grid tw-grid-cols-1 tw-items-end tw-gap-7.5 md:-tw-bottom-[50px] md:-tw-mt-[50px] md:tw-grid-cols-12 lg:-tw-bottom-[90px] lg:-tw-mt-[90px]">
                     <motion.div
                         style={{ y: y1 }}
-                        className="tw-col-span-2 tw-relative tw-z-1 md:tw-left-0 md:tw-top-0 xl:tw-w-[410px] xl:tw-h-[504px] xl:tw-left-[-168px] xl:tw-bottom-32 tw-hidden md:tw-block"
+                        className="tw-relative tw-z-1 tw-col-span-2 tw-hidden md:tw-left-0 md:tw-top-0 md:tw-block xl:tw-bottom-32 xl:tw-left-[-168px] xl:tw-h-[504px] xl:tw-w-[410px]"
                     >
                         {images?.[0]?.src && (
                             <img
@@ -69,7 +69,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images, video } }: TProps)
                     )}
                     <motion.div
                         style={{ y: y1 }}
-                        className="tw-col-span-2 tw-relative tw-z-1 md:tw-right-0 md:tw-bottom-0 xl:tw-w-[230px] xl:tw-h-[353px] xl:tw-right-5 xl:-tw-bottom-8 tw-hidden md:tw-block"
+                        className="tw-relative tw-z-1 tw-col-span-2 tw-hidden md:tw-bottom-0 md:tw-right-0 md:tw-block xl:-tw-bottom-8 xl:tw-right-5 xl:tw-h-[353px] xl:tw-w-[230px]"
                     >
                         {images?.[2]?.src && (
                             <img
diff --git a/src/containers/hero/layout-07/index.tsx b/src/containers/hero/layout-07/index.tsx
index e34a485ad..96b82d7bf 100644
--- a/src/containers/hero/layout-07/index.tsx
+++ b/src/containers/hero/layout-07/index.tsx
@@ -46,13 +46,13 @@ const HeroArea = ({ data: { items } }: TProps) => {
         <SwiperSlider options={options} navClass="hero">
             {items.map(({ id, images, headings, texts }, idx) => (
                 <SwiperSlide key={id}>
-                    <div className="tw-relative tw-z-1 tw-w-full tw-h-[450px] md:tw-h-[500px] lg:tw-h-[600px] xl:tw-h-[700px] tw-flex tw-items-end">
+                    <div className="tw-relative tw-z-1 tw-flex tw-h-[450px] tw-w-full tw-items-end md:tw-h-[500px] lg:tw-h-[600px] xl:tw-h-[700px]">
                         {images?.[0]?.src && (
                             <div className="tw-absolute tw-inset-0 tw-object-cover">
                                 <img
                                     src={images[0].src}
                                     alt=""
-                                    className="tw-w-full tw-h-full tw-object-cover"
+                                    className="tw-h-full tw-w-full tw-object-cover"
                                 />
                                 <div
                                     className="tw-absolute tw-inset-0"
@@ -62,14 +62,14 @@ const HeroArea = ({ data: { items } }: TProps) => {
                                 />
                             </div>
                         )}
-                        <div className="tw-container tw-relative tw-z-1 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-7.5 tw-mb-[350px]">
+                        <div className="tw-container tw-relative tw-z-1 tw-mb-[350px] tw-grid tw-grid-cols-1 tw-gap-7.5 lg:tw-grid-cols-12">
                             {headings?.[0]?.content && (
                                 <motion.h2
                                     initial="hidden"
                                     animate={idx === activeIdx ? "visible" : "exit"}
                                     exit="exit"
                                     variants={fadeInUp}
-                                    className="tw-text-white tw-text-[32px] tw-uppercase tw-mb-0 tw-leading-[1.17] md:tw-text-4xl lg:tw-col-span-4 lg:tw-text-5xl lg:tw-text-right"
+                                    className="tw-mb-0 tw-text-[32px] tw-uppercase tw-leading-[1.17] tw-text-white md:tw-text-4xl lg:tw-col-span-4 lg:tw-text-right lg:tw-text-5xl"
                                     dangerouslySetInnerHTML={{
                                         __html: headings[0].content,
                                     }}
@@ -82,12 +82,12 @@ const HeroArea = ({ data: { items } }: TProps) => {
                                         animate={idx === activeIdx ? "visible" : "exit"}
                                         exit="exit"
                                         variants={fadeInUp}
-                                        className="tw-text-lg -tw-tracking-tightest tw-text-white tw-uppercase tw-mb-[25px]"
+                                        className="tw-mb-[25px] tw-text-lg tw-uppercase -tw-tracking-tightest tw-text-white"
                                     >
-                                        <span className="tw-text-[34px] tw-leading-none tw-align-middle">
+                                        <span className="tw-align-middle tw-text-[34px] tw-leading-none">
                                             {(idx + 1).toString().padStart(2, "0")}
                                         </span>
-                                        <span className="tw-hidden md:tw-inline-block tw-align-middle tw-w-15 tw-h-px tw-bg-white tw-mr-7.5 tw-ml-3.8" />{" "}
+                                        <span className="tw-ml-3.8 tw-mr-7.5 tw-hidden tw-h-px tw-w-15 tw-bg-white tw-align-middle md:tw-inline-block" />{" "}
                                         {headings[1].content}
                                     </motion.h3>
                                 )}
@@ -98,7 +98,7 @@ const HeroArea = ({ data: { items } }: TProps) => {
                                         animate={idx === activeIdx ? "visible" : "exit"}
                                         exit="exit"
                                         variants={fadeInUp}
-                                        className="tw-text-[16px] md:tw-text-lg lg:tw-text-2xl lg:tw-leading-normal tw-font-medium tw-text-white"
+                                        className="tw-text-[16px] tw-font-medium tw-text-white md:tw-text-lg lg:tw-text-2xl lg:tw-leading-normal"
                                     >
                                         {text.content}
                                     </motion.p>
diff --git a/src/containers/hero/layout-08/index.tsx b/src/containers/hero/layout-08/index.tsx
index ec704b703..d5b3629a6 100644
--- a/src/containers/hero/layout-08/index.tsx
+++ b/src/containers/hero/layout-08/index.tsx
@@ -19,7 +19,7 @@ const HeroArea = ({ data: { images, headings } }: TProps) => {
                         alt={images[0]?.alt || "Hero BG"}
                         width={1903}
                         height={496}
-                        className="tw-w-full tw-h-full tw-object-cover"
+                        className="tw-h-full tw-w-full tw-object-cover"
                     />
                 </div>
             )}
@@ -31,7 +31,7 @@ const HeroArea = ({ data: { images, headings } }: TProps) => {
                 variants={scrollUpVariants}
             >
                 {headings?.[0]?.content && (
-                    <h1 className="tw-max-w-[700px] lg:tw-max-w-[770px] tw-mx-auto tw-text-center tw-text-h3 tw-leading-normal md:tw-text-[32px] lg:tw-text-[34px] lg:tw-leading-[1.4] tw-text-white tw-mb-0">
+                    <h1 className="tw-mx-auto tw-mb-0 tw-max-w-[700px] tw-text-center tw-text-h3 tw-leading-normal tw-text-white md:tw-text-[32px] lg:tw-max-w-[770px] lg:tw-text-[34px] lg:tw-leading-[1.4]">
                         {headings?.[0]?.content}
                     </h1>
                 )}
diff --git a/src/containers/membership/heading.tsx b/src/containers/membership/heading.tsx
index 46462af68..c8b0fea8e 100644
--- a/src/containers/membership/heading.tsx
+++ b/src/containers/membership/heading.tsx
@@ -10,16 +10,16 @@ type TProps = {
 const Heading = ({ price, title, description }: TProps) => {
     return (
         <>
-            <div className="tw-text-4xl tw-font-bold tw-leading-none tw-mb-2.5">
+            <div className="tw-mb-2.5 tw-text-4xl tw-font-bold tw-leading-none">
                 <span className="amount tw-text-primary">
                     {price.currency}
                     {price.amount}
                 </span>
             </div>
-            <span className="tw-block tw-text-md tw-font-medium tw-uppercase tw-tracking-[1.38px] tw-mb-0">
+            <span className="tw-mb-0 tw-block tw-text-md tw-font-medium tw-uppercase tw-tracking-[1.38px]">
                 {title}
             </span>
-            <div className="tw-mt-2.5 tw-text-base tw-font-normal tw-capitalize tw-text-body ">
+            <div className="tw-mt-2.5 tw-text-base tw-font-normal tw-capitalize tw-text-body">
                 {description}
             </div>
         </>
diff --git a/src/containers/membership/index.tsx b/src/containers/membership/index.tsx
index 6b8f6885d..192e70b7a 100644
--- a/src/containers/membership/index.tsx
+++ b/src/containers/membership/index.tsx
@@ -62,7 +62,7 @@ const MembershipArea = ({ membershipLevels }: TProps) => {
                                 </td>
                                 <td
                                     className={clsx(
-                                        "tw-text-[16px] ",
+                                        "tw-text-[16px]",
                                         isSilver ? "tw-text-success-100" : "tw-text-danger-100"
                                     )}
                                 >
@@ -75,7 +75,7 @@ const MembershipArea = ({ membershipLevels }: TProps) => {
                                 </td>
                                 <td
                                     className={clsx(
-                                        "tw-text-[16px] ",
+                                        "tw-text-[16px]",
                                         isGold ? "tw-text-success-100" : "tw-text-danger-100"
                                     )}
                                 >
@@ -88,7 +88,7 @@ const MembershipArea = ({ membershipLevels }: TProps) => {
                                 </td>
                                 <td
                                     className={clsx(
-                                        "tw-text-[16px] ",
+                                        "tw-text-[16px]",
                                         isDiamond ? "tw-text-success-100" : "tw-text-danger-100"
                                     )}
                                 >
@@ -105,16 +105,16 @@ const MembershipArea = ({ membershipLevels }: TProps) => {
                 </tbody>
                 <tfoot>
                     <tr>
-                        <td className="tw-px-2.5 tw-pt-7.5 tw-pb-10">
+                        <td className="tw-px-2.5 tw-pb-10 tw-pt-7.5">
                             <span className="tw-sr-only">df</span>
                         </td>
-                        <td className="tw-px-2.5 tw-pt-7.5 tw-pb-10">
+                        <td className="tw-px-2.5 tw-pb-10 tw-pt-7.5">
                             <Button path="/curriculum/subjects">Get it now</Button>
                         </td>
-                        <td className="tw-px-2.5 tw-pt-7.5 tw-pb-10">
+                        <td className="tw-px-2.5 tw-pb-10 tw-pt-7.5">
                             <Button path="/curriculum/subjects">Get it now</Button>
                         </td>
-                        <td className="tw-px-2.5 tw-pt-7.5 tw-pb-10">
+                        <td className="tw-px-2.5 tw-pb-10 tw-pt-7.5">
                             <Button path="/curriculum/subjects">Get it now</Button>
                         </td>
                     </tr>
diff --git a/src/containers/newsletter/layout-01/index.tsx b/src/containers/newsletter/layout-01/index.tsx
index 49bfcc753..ee7412c94 100644
--- a/src/containers/newsletter/layout-01/index.tsx
+++ b/src/containers/newsletter/layout-01/index.tsx
@@ -27,19 +27,19 @@ const NewsletterArea = ({ data: { section_title }, space, bg }: TProps) => {
                 <NewsletterForm className="tw-mx-auto tw-mt-[50px]" />
 
                 <motion.div
-                    className="tw-absolute tw-bottom-[50px] tw-left-[-3px] md:tw-left-0 tw-z-20"
+                    className="tw-absolute tw-bottom-[50px] tw-left-[-3px] tw-z-20 md:tw-left-0"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-primary-light tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-[7px] md:tw-w-14 md:tw-h-14">
+                    <span className="tw-block tw-h-[45px] tw-w-[45px] tw-rounded-full tw-border-[6px] tw-border-primary-light -tw-indent-[99999px] md:tw-h-14 md:tw-w-14 md:tw-border-[7px]">
                         shape 1
                     </span>
                 </motion.div>
 
                 <motion.div
-                    className="tw-absolute -tw-z-1 -tw-bottom-[45px] tw-right-0 tw-top-7.5 tw-w-[100px] md:tw-w-auto md:tw-right-2.5"
+                    className="tw-absolute -tw-bottom-[45px] tw-right-0 tw-top-7.5 -tw-z-1 tw-w-[100px] md:tw-right-2.5 md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -54,7 +54,7 @@ const NewsletterArea = ({ data: { section_title }, space, bg }: TProps) => {
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute -tw-z-1 -tw-bottom-[-25px] tw-top-[25px] tw-right-[5px] tw-w-15 md:tw-w-auto md:tw-right-[-35px]"
+                    className="tw-absolute -tw-bottom-[-25px] tw-right-[5px] tw-top-[25px] -tw-z-1 tw-w-15 md:tw-right-[-35px] md:tw-w-auto"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
diff --git a/src/containers/newsletter/layout-02/index.tsx b/src/containers/newsletter/layout-02/index.tsx
index 1deb483c9..4f9d7f4a5 100644
--- a/src/containers/newsletter/layout-02/index.tsx
+++ b/src/containers/newsletter/layout-02/index.tsx
@@ -14,7 +14,7 @@ type TProps = TSection & {
 const NewsletterArea = ({ data: { section_title }, space, bg, titleSize }: TProps) => {
     return (
         <Section className="tw-relative" space={space} bg={bg}>
-            <div className="tw-absolute tw-inset-0 -tw-z-1 child:tw-w-full child:tw-h-full child:tw-object-cover">
+            <div className="tw-absolute tw-inset-0 -tw-z-1 child:tw-h-full child:tw-w-full child:tw-object-cover">
                 <img
                     src="https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1678670156/website-images/vetswhocode-newsletter-bg.jpg"
                     alt="newsletter BG"
diff --git a/src/containers/prework-button/index.tsx b/src/containers/prework-button/index.tsx
index b80cdaa35..55991005f 100644
--- a/src/containers/prework-button/index.tsx
+++ b/src/containers/prework-button/index.tsx
@@ -1,11 +1,11 @@
 import Link from "next/link";
 
 const PreworkButton = () => (
-    <div className="tw-flex tw-justify-center tw-items-center">
+    <div className="tw-flex tw-items-center tw-justify-center">
         <Link href="https://github.com/Vets-Who-Code/Prework" passHref>
             <button
                 type="button"
-                className="tw-font-bold tw-justify-center tw-items-center tw-border tw-border-solid tw-rounded-md tw-transition-colors tw-min-w-max tw-bg-primary tw-border-primary tw-text-white hover:tw-bg-secondary hover:tw-border-secondary hover:tw-text-white tw-text-md tw-px-4 tw-py-1 tw-min-h-[48px] md:tw-min-h-[52px] md:tw-px-6 tw-flex tw-mt-7.5"
+                className="tw-mt-7.5 tw-flex tw-min-h-[48px] tw-min-w-max tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-primary tw-bg-primary tw-px-4 tw-py-1 tw-text-md tw-font-bold tw-text-white tw-transition-colors hover:tw-border-secondary hover:tw-bg-secondary hover:tw-text-white md:tw-min-h-[52px] md:tw-px-6"
             >
                 Go to Vets Who Code Prework
             </button>
diff --git a/src/containers/profile/bio.tsx b/src/containers/profile/bio.tsx
index eaa2b9807..b7e21d3e2 100644
--- a/src/containers/profile/bio.tsx
+++ b/src/containers/profile/bio.tsx
@@ -4,7 +4,7 @@ import Social, { SocialLink } from "@components/ui/social";
 const ProfileBio = () => {
     return (
         <Section className="profile-area" space="bottom">
-            <div className="tw-container tw-grid tw-grid-cols-1 md:tw-grid-cols-12 tw-gap-7.5 tw-items-start lg:tw-items-center">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-items-start tw-gap-7.5 md:tw-grid-cols-12 lg:tw-items-center">
                 <figure className="tw-col-span-full md:tw-col-span-6 xl:tw-col-span-5">
                     <img
                         className="tw-w-full"
@@ -16,7 +16,7 @@ const ProfileBio = () => {
                 </figure>
                 <div className="tw-col-span-full md:tw-col-[7/-1]">
                     <h2 className="tw-mb-0 tw-leading-[1.42]">Jerome Hardaway</h2>
-                    <h3 className="tw-font-normal tw-text-body tw-text-h6 tw-leading-relaxed tw-mb-0">
+                    <h3 className="tw-mb-0 tw-text-h6 tw-font-normal tw-leading-relaxed tw-text-body">
                         Executive Director
                     </h3>
                     <p className="tw-mb-0 tw-mt-3.8">
@@ -40,7 +40,7 @@ const ProfileBio = () => {
                         make the tech industry more accessible, diverse, and innovative, and he is
                         always looking for new ways to achieve this goal.
                     </p>
-                    <h4 className="tw-text-h5 tw-mt-9 tw-mb-2.5">Contact</h4>
+                    <h4 className="tw-mb-2.5 tw-mt-9 tw-text-h5">Contact</h4>
                     <div className="contact-info-text">
                         <br />
                         <span className="email">
diff --git a/src/containers/quote/layout-01/index.tsx b/src/containers/quote/layout-01/index.tsx
index fca675ac6..742d06692 100644
--- a/src/containers/quote/layout-01/index.tsx
+++ b/src/containers/quote/layout-01/index.tsx
@@ -50,67 +50,67 @@ const QuoteArea = ({ data: { items }, space, bg }: TProps) => {
                     </AnimatedSwiperSlider>
                 )}
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[-100px] tw-left-1/2"
+                    className="tw-absolute tw-left-1/2 tw-top-[-100px] tw-z-20"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[35px] tw-h-[35px] tw-bg-primary-light tw-rounded-full" />
+                    <span className="tw-block tw-h-[35px] tw-w-[35px] tw-rounded-full tw-bg-primary-light" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[-35px] tw-left-0 lg:-tw-left-12"
+                    className="tw-absolute tw-left-0 tw-top-[-35px] tw-z-20 lg:-tw-left-12"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[52px] tw-h-[52px] tw-border-[6px] tw-border-primary/50 tw-rounded-full" />
+                    <span className="tw-block tw-h-[52px] tw-w-[52px] tw-rounded-full tw-border-[6px] tw-border-primary/50" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[100px] tw-left-[50px] lg:tw-top-[164px] lg:tw-left-[70px]"
+                    className="tw-absolute tw-left-[50px] tw-top-[100px] tw-z-20 lg:tw-left-[70px] lg:tw-top-[164px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[35px] tw-h-[35px] tw-bg-orange-200 tw-rounded-full" />
+                    <span className="tw-block tw-h-[35px] tw-w-[35px] tw-rounded-full tw-bg-orange-200" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[155px] tw-left-0 lg:tw-top-[300px] lg:tw-left-5"
+                    className="tw-absolute tw-left-0 tw-top-[155px] tw-z-20 lg:tw-left-5 lg:tw-top-[300px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[54px] tw-h-[54px] tw-bg-porsche tw-rounded-full" />
+                    <span className="tw-block tw-h-[54px] tw-w-[54px] tw-rounded-full tw-bg-porsche" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[-100px] tw-right-0 lg:-tw-right-5"
+                    className="tw-absolute tw-right-0 tw-top-[-100px] tw-z-20 lg:-tw-right-5"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[46px] tw-h-[46px] tw-bg-jagged tw-rounded-full" />
+                    <span className="tw-block tw-h-[46px] tw-w-[46px] tw-rounded-full tw-bg-jagged" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-0 tw-right-7.5"
+                    className="tw-absolute tw-right-7.5 tw-top-0 tw-z-20"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block tw-w-9 tw-h-9 tw-bg-blue-100/60 tw-rounded-full" />
+                    <span className="tw-block tw-h-9 tw-w-9 tw-rounded-full tw-bg-blue-100/60" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-20 tw-top-[155px] tw-right-0 lg:tw-top-[233px] lg:tw-right-12"
+                    className="tw-absolute tw-right-0 tw-top-[155px] tw-z-20 lg:tw-right-12 lg:tw-top-[233px]"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
                     }}
                 >
-                    <span className="tw-block tw-w-[38px] tw-h-[38px] tw-bg-mandy/70 tw-rounded-full" />
+                    <span className="tw-block tw-h-[38px] tw-w-[38px] tw-rounded-full tw-bg-mandy/70" />
                 </motion.div>
             </div>
         </Section>
diff --git a/src/containers/quote/layout-02/index.tsx b/src/containers/quote/layout-02/index.tsx
index efe9658a0..59a5cbc01 100644
--- a/src/containers/quote/layout-02/index.tsx
+++ b/src/containers/quote/layout-02/index.tsx
@@ -12,7 +12,7 @@ type TProps = {
 const QuoteArea = ({ data: { headings, texts } }: TProps) => {
     return (
         <div className="quote-area tw-pt-15 md:tw-pt-20 lg:tw-pt-[100px]">
-            <div className="tw-container tw-grid tw-grid-cols-1 md:tw-grid-cols-12 tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-7.5 md:tw-grid-cols-12">
                 <motion.div
                     className="md:tw-col-span-5"
                     initial="offscreen"
@@ -22,7 +22,7 @@ const QuoteArea = ({ data: { headings, texts } }: TProps) => {
                 >
                     {headings?.[0]?.content && (
                         <h3
-                            className="md:tw-max-w-[370px] tw-leading-normal child:tw-text-primary"
+                            className="tw-leading-normal child:tw-text-primary md:tw-max-w-[370px]"
                             dangerouslySetInnerHTML={{
                                 __html: headings[0].content,
                             }}
@@ -36,9 +36,7 @@ const QuoteArea = ({ data: { headings, texts } }: TProps) => {
                     viewport={{ once: true, amount: 0.1 }}
                     variants={scrollUpVariants}
                 >
-                    {texts?.map((text) => (
-                        <p key={text.id}>{text.content}</p>
-                    ))}
+                    {texts?.map((text) => <p key={text.id}>{text.content}</p>)}
                 </motion.div>
             </div>
         </div>
diff --git a/src/containers/register-guide/index.tsx b/src/containers/register-guide/index.tsx
index 9895c91a6..0949414bd 100644
--- a/src/containers/register-guide/index.tsx
+++ b/src/containers/register-guide/index.tsx
@@ -29,7 +29,7 @@ const RegisterGuideArea = ({
     const { trans1, trans2 } = useUI();
     return (
         <Section className="register-guide-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-items-center tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-items-center tw-gap-[50px] lg:tw-grid-cols-12 lg:tw-gap-7.5">
                 <div className="tw-order-2 lg:tw-order-1 lg:tw-col-span-4">
                     {section_title && (
                         <AnimatedSectionTitle
@@ -60,7 +60,7 @@ const RegisterGuideArea = ({
                     ))}
                 </div>
                 <motion.div
-                    className="tw-order-1 lg:tw-order-2 lg:tw-col-span-8 tw-relative tw-z-10"
+                    className="tw-relative tw-z-10 tw-order-1 lg:tw-order-2 lg:tw-col-span-8"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
@@ -76,16 +76,16 @@ const RegisterGuideArea = ({
                         />
                     )}
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-left-[14%] tw-top-20 tw-w-[200px] tw-h-[200px] md:tw-w-[446px] md:tw-h-[446px]"
+                        className="tw-absolute tw-left-[14%] tw-top-20 -tw-z-1 tw-h-[200px] tw-w-[200px] md:tw-h-[446px] md:tw-w-[446px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-pampas tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-pampas" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-right-[15%] tw-w-20 tw-bottom-5 md:tw-w-auto md:tw-bottom-0"
+                        className="tw-absolute tw-bottom-5 tw-right-[15%] -tw-z-1 tw-w-20 md:tw-bottom-0 md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
diff --git a/src/containers/service/layout-02/index.tsx b/src/containers/service/layout-02/index.tsx
index 2cf8ad3ad..411537eaf 100644
--- a/src/containers/service/layout-02/index.tsx
+++ b/src/containers/service/layout-02/index.tsx
@@ -31,7 +31,7 @@ const ServiceArea = ({ data: { section_title, items }, space, bg, titleSize }: T
                     />
                 )}
 
-                <div className="tw-grid sm:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-7.5">
+                <div className="tw-grid tw-gap-7.5 sm:tw-grid-cols-2 xl:tw-grid-cols-3">
                     {items?.map((item) => (
                         <AnimatedServiceCard
                             key={item.id}
diff --git a/src/containers/service/layout-03/index.tsx b/src/containers/service/layout-03/index.tsx
index fe9777185..28bb710d9 100644
--- a/src/containers/service/layout-03/index.tsx
+++ b/src/containers/service/layout-03/index.tsx
@@ -20,7 +20,7 @@ const ServiceArea = ({ data: { items, motto }, space, bg }: TProps) => {
         <Section className="service-area" space={space} bg={bg}>
             <div className="tw-container">
                 <h2 className="tw-sr-only">Service Section</h2>
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5 tw-relative tw-z-10 tw-top-[-90px] tw-mb-[-90px] xl:tw-top-[-125px] xl:tw-mb-[-125px]">
+                <div className="tw-relative tw-top-[-90px] tw-z-10 tw-mb-[-90px] tw-grid tw-grid-cols-1 tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3 xl:tw-top-[-125px] xl:tw-mb-[-125px]">
                     {items?.map((item) => (
                         <AnimatedServiceCard
                             key={item.id}
@@ -40,7 +40,7 @@ const ServiceArea = ({ data: { items, motto }, space, bg }: TProps) => {
                 {motto && (
                     <AnimatedMottoText
                         {...motto}
-                        className="lg:tw-w-7/12 tw-mx-auto tw-text-center tw-mt-10"
+                        className="tw-mx-auto tw-mt-10 tw-text-center lg:tw-w-7/12"
                         initial="offscreen"
                         whileInView="onscreen"
                         viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/service/layout-04/index.tsx b/src/containers/service/layout-04/index.tsx
index ccae28fbc..1af2a2ca6 100644
--- a/src/containers/service/layout-04/index.tsx
+++ b/src/containers/service/layout-04/index.tsx
@@ -30,7 +30,7 @@ const ServiceArea = ({ data: { section_title, items }, space, bg, titleSize }: T
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-grid-cols-4">
                     {items?.map((item) => (
                         <AnimatedServiceCard
                             key={item.id}
diff --git a/src/containers/service/layout-05/index.tsx b/src/containers/service/layout-05/index.tsx
index 4dd9f2506..55eba93ac 100644
--- a/src/containers/service/layout-05/index.tsx
+++ b/src/containers/service/layout-05/index.tsx
@@ -26,15 +26,15 @@ const ServiceArea = ({
 }: TProps) => {
     return (
         <Section className="service-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5 tw-items-center">
-                <div className="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-items-start tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-items-center tw-gap-7.5 lg:tw-grid-cols-2">
+                <div className="tw-grid tw-grid-cols-1 tw-items-start tw-gap-7.5 sm:tw-grid-cols-2">
                     {items && items.length > 0 && (
                         <>
                             <AnimatedServiceCard
                                 title={items?.[0]?.title}
                                 description={items?.[0]?.description}
                                 image={items?.[0]?.images?.[0]}
-                                className="tw-pb-[202px] tw-bg-[5px_bottom]"
+                                className="tw-bg-[5px_bottom] tw-pb-[202px]"
                                 initial="offscreen"
                                 whileInView="onscreen"
                                 viewport={{ once: true, amount: 0.1 }}
@@ -44,7 +44,7 @@ const ServiceArea = ({
                                 title={items?.[1]?.title}
                                 description={items?.[1]?.description}
                                 image={items?.[1]?.images?.[0]}
-                                className="tw-pb-[202px] tw-bg-[center_bottom] sm:tw-mt-[70px]"
+                                className="tw-bg-[center_bottom] tw-pb-[202px] sm:tw-mt-[70px]"
                                 initial="offscreen"
                                 whileInView="onscreen"
                                 viewport={{ once: true, amount: 0.1 }}
@@ -54,7 +54,7 @@ const ServiceArea = ({
                                 title={items?.[2]?.title}
                                 description={items?.[2]?.description}
                                 image={items?.[2]?.images?.[0]}
-                                className="tw-pt-[215px] tw-pb-[22px] tw-bg-[left_15px] xl:-tw-mt-[70px] lg:-tw-mt-[95px] sm:-tw-mt-[70px]"
+                                className="tw-bg-[left_15px] tw-pb-[22px] tw-pt-[215px] sm:-tw-mt-[70px] lg:-tw-mt-[95px] xl:-tw-mt-[70px]"
                                 initial="offscreen"
                                 whileInView="onscreen"
                                 viewport={{ once: true, amount: 0.1 }}
@@ -64,7 +64,7 @@ const ServiceArea = ({
                                 title={items?.[3]?.title}
                                 description={items?.[3]?.description}
                                 image={items?.[3]?.images?.[0]}
-                                className="tw-pt-[215px] tw-pb-[22px] tw-bg-[center_33px]"
+                                className="tw-bg-[center_33px] tw-pb-[22px] tw-pt-[215px]"
                                 initial="offscreen"
                                 whileInView="onscreen"
                                 viewport={{ once: true, amount: 0.1 }}
diff --git a/src/containers/service/layout-06/index.tsx b/src/containers/service/layout-06/index.tsx
index 7c8a6ac71..220033c91 100644
--- a/src/containers/service/layout-06/index.tsx
+++ b/src/containers/service/layout-06/index.tsx
@@ -34,7 +34,7 @@ const ServiceArea = ({ data: { section_title, items, images }, space, bg, titleS
                     />
                 )}
 
-                <div className="tw-grid sm:tw-grid-cols-2 xl:tw-grid-cols-4 tw-gap-7.5">
+                <div className="tw-grid tw-gap-7.5 sm:tw-grid-cols-2 xl:tw-grid-cols-4">
                     {items?.map((item) => (
                         <AnimatedServiceCard
                             key={item.id}
@@ -50,8 +50,8 @@ const ServiceArea = ({ data: { section_title, items, images }, space, bg, titleS
                     ))}
                 </div>
             </div>
-            <div className="tw-pt-15 md:tw-pt-20 lg:tw-pt-[100px] tw-bg-transparent tw-bg-lightGradient tw-mb-8">
-                <div className="tw-container tw-relative tw-z-1 -tw-bottom-8 -tw-mt-8">
+            <div className="tw-mb-8 tw-bg-transparent tw-bg-lightGradient tw-pt-15 md:tw-pt-20 lg:tw-pt-[100px]">
+                <div className="tw-container tw-relative -tw-bottom-8 tw-z-1 -tw-mt-8">
                     {images?.[0]?.src && (
                         <img
                             src={images[0].src}
@@ -62,58 +62,58 @@ const ServiceArea = ({ data: { section_title, items, images }, space, bg, titleS
                         />
                     )}
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-0 tw-left-0"
+                        className="tw-absolute tw-left-0 tw-top-0 tw-z-1"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
                         }}
                     >
-                        <span className="tw-block tw-w-[52px] tw-h-[52px] tw-border-[6px] tw-border-primary/50 tw-rounded-full" />
+                        <span className="tw-block tw-h-[52px] tw-w-[52px] tw-rounded-full tw-border-[6px] tw-border-primary/50" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-left-2.5 tw-bottom-20"
+                        className="tw-absolute tw-bottom-20 tw-left-2.5 tw-z-1"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block tw-w-[35px] tw-h-[35px] tw-bg-orange-300 tw-rounded-full" />
+                        <span className="tw-block tw-h-[35px] tw-w-[35px] tw-rounded-full tw-bg-orange-300" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 -tw-bottom-28 tw-left-0"
+                        className="tw-absolute -tw-bottom-28 tw-left-0 tw-z-1"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
                         }}
                     >
-                        <span className="tw-block tw-w-[54px] tw-h-[54px] tw-bg-porsche tw-rounded-full" />
+                        <span className="tw-block tw-h-[54px] tw-w-[54px] tw-rounded-full tw-bg-porsche" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-15 tw-right-0"
+                        className="tw-absolute tw-right-0 tw-top-15 tw-z-1"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
                         }}
                     >
-                        <span className="tw-block tw-w-[46px] tw-h-[46px] tw-bg-jagged tw-rounded-full" />
+                        <span className="tw-block tw-h-[46px] tw-w-[46px] tw-rounded-full tw-bg-jagged" />
                     </motion.div>{" "}
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-bottom-16 tw-right-10"
+                        className="tw-absolute tw-bottom-16 tw-right-10 tw-z-1"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
                         }}
                     >
-                        <span className="tw-block tw-w-[38px] tw-h-[38px] tw-bg-mandy/70 tw-rounded-full" />
+                        <span className="tw-block tw-h-[38px] tw-w-[38px] tw-rounded-full tw-bg-mandy/70" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 -tw-bottom-24 tw-right-0"
+                        className="tw-absolute -tw-bottom-24 tw-right-0 tw-z-1"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block tw-w-9 tw-h-9 tw-bg-blue-100/60 tw-rounded-full" />
+                        <span className="tw-block tw-h-9 tw-w-9 tw-rounded-full tw-bg-blue-100/60" />
                     </motion.div>
                 </div>
             </div>
diff --git a/src/containers/service/layout-07/index.tsx b/src/containers/service/layout-07/index.tsx
index 876949527..f9c585f5c 100644
--- a/src/containers/service/layout-07/index.tsx
+++ b/src/containers/service/layout-07/index.tsx
@@ -28,7 +28,7 @@ const ServiceArea = ({ data: { items, section_title } }: TProps) => {
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                     {items?.map((item) => (
                         <AnimatedServiceCard
                             key={item.id}
diff --git a/src/containers/service/layout-08/index.tsx b/src/containers/service/layout-08/index.tsx
index 2cabc6508..9227f8e46 100644
--- a/src/containers/service/layout-08/index.tsx
+++ b/src/containers/service/layout-08/index.tsx
@@ -43,8 +43,8 @@ const ServiceArea = ({ data: { section_title, items, images }, space, bg, titleS
                     />
                 )}
 
-                <div className="tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-7.5 tw-items-center">
-                    <div className="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-x-7.5 tw-gap-y-14">
+                <div className="tw-grid tw-grid-cols-1 tw-items-center tw-gap-7.5 lg:tw-grid-cols-2">
+                    <div className="tw-grid tw-grid-cols-1 tw-gap-x-7.5 tw-gap-y-14 sm:tw-grid-cols-2">
                         {items?.map((item) => (
                             <AnimatedServiceCard
                                 key={item.id}
diff --git a/src/containers/team/layout-01/index.tsx b/src/containers/team/layout-01/index.tsx
index c1b76b68d..dcb333b6c 100644
--- a/src/containers/team/layout-01/index.tsx
+++ b/src/containers/team/layout-01/index.tsx
@@ -18,7 +18,7 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
     const { trans1, trans2 } = useUI();
     return (
         <Section className="team-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-[58.33%_minmax(38%,_1fr)] tw-gap-[50px] lg:tw-gap-7.5 tw-items-center">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-items-center tw-gap-[50px] lg:tw-grid-cols-[58.33%_minmax(38%,_1fr)] lg:tw-gap-7.5">
                 <motion.div
                     className="image-wrap tw-relative"
                     initial="offscreen"
@@ -32,16 +32,16 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                         className="tw-mx-auto"
                     />
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-left-0 tw-top-[100px] tw-w-[120px] tw-h-[120px] lg:tw-top-[100px] lg:tw-w-[166px] lg:tw-h-[166px]"
+                        className="tw-absolute tw-left-0 tw-top-[100px] -tw-z-1 tw-h-[120px] tw-w-[120px] lg:tw-top-[100px] lg:tw-h-[166px] lg:tw-w-[166px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-primary-light tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-primary-light" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-top-[100px] tw-left-0 tw-w-[120px] lg:tw-w-auto"
+                        className="tw-absolute tw-left-0 tw-top-[100px] -tw-z-1 tw-w-[120px] lg:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -56,7 +56,7 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-10 tw-top-0 tw-right-0"
+                        className="tw-absolute tw-right-0 tw-top-0 tw-z-10"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -71,7 +71,7 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-left-1/2 -tw-bottom-5 tw-w-[120px] lg:-tw-bottom-[70px] lg:tw-w-auto"
+                        className="tw-absolute -tw-bottom-5 tw-left-1/2 -tw-z-1 tw-w-[120px] lg:-tw-bottom-[70px] lg:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -86,7 +86,7 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-bottom-15 tw-left-0 tw-w-[120px] lg:-tw-left-[214px] lg:tw-w-auto"
+                        className="tw-absolute tw-bottom-15 tw-left-0 -tw-z-1 tw-w-[120px] lg:-tw-left-[214px] lg:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/team/layout-02/index.tsx b/src/containers/team/layout-02/index.tsx
index 9327a67f8..53fdd6bef 100644
--- a/src/containers/team/layout-02/index.tsx
+++ b/src/containers/team/layout-02/index.tsx
@@ -36,7 +36,7 @@ const TeamArea = ({ data: { section_title, items }, titleSize }: TProps) => {
                         variants={scrollUpVariants}
                     />
                 )}
-                <div className="tw-grid tw-grid-cols-1 tw-mb-7.5 tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-grid-cols-3 xl:tw-gap-10 lg:tw-mb-[50px]">
+                <div className="tw-mb-7.5 tw-grid tw-grid-cols-1 tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-mb-[50px] lg:tw-grid-cols-3 xl:tw-gap-10">
                     {admins?.map((admin) => (
                         <AnimatedTeamCard
                             key={admin.id}
@@ -51,7 +51,7 @@ const TeamArea = ({ data: { section_title, items }, titleSize }: TProps) => {
                         />
                     ))}
                 </div>
-                <div className="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-7.5">
+                <div className="tw-grid tw-grid-cols-1 tw-gap-7.5 sm:tw-grid-cols-2 lg:tw-grid-cols-4">
                     {employees?.map((employee) => (
                         <AnimatedTeamCard
                             key={employee.id}
diff --git a/src/containers/testimonial/layout-03/index.tsx b/src/containers/testimonial/layout-03/index.tsx
index 64a734900..a92060446 100644
--- a/src/containers/testimonial/layout-03/index.tsx
+++ b/src/containers/testimonial/layout-03/index.tsx
@@ -41,7 +41,7 @@ const TestimonialArea = ({
     }, []);
     return (
         <Section className="testimonial-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 lg:tw-grid-cols-[41.67%_minmax(54%,_1fr)] tw-gap-[50px] lg:tw-gap-7.5">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-[50px] lg:tw-grid-cols-[41.67%_minmax(54%,_1fr)] lg:tw-gap-7.5">
                 <motion.div
                     className="lg:tw-max-w-[420px]"
                     initial="offscreen"
diff --git a/src/containers/testimonial/layout-04/index.tsx b/src/containers/testimonial/layout-04/index.tsx
index 53778328c..d1cf421b5 100644
--- a/src/containers/testimonial/layout-04/index.tsx
+++ b/src/containers/testimonial/layout-04/index.tsx
@@ -31,7 +31,7 @@ const TestimonialArea = ({
     const { trans1, trans2 } = useUI();
     return (
         <Section className="testimonial-area" space={space} bg={bg}>
-            <div className="tw-container tw-grid tw-grid-cols-1 md:tw-grid-cols-12 tw-gap-7.5 md:tw-gap-y-[50px]">
+            <div className="tw-container tw-grid tw-grid-cols-1 tw-gap-7.5 md:tw-grid-cols-12 md:tw-gap-y-[50px]">
                 <motion.div
                     className="tw-relative tw-z-1 md:tw-col-span-6 xl:tw-col-span-4"
                     initial="offscreen"
@@ -50,16 +50,16 @@ const TestimonialArea = ({
                     )}
                     {items?.[1] && <Testimonial04 title={items[1].title} className="tw-ml-auto" />}
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-left-[-110px] tw-bottom-[130px] tw-w-[166px] tw-h-[-110px]"
+                        className="tw-absolute tw-bottom-[130px] tw-left-[-110px] -tw-z-1 tw-h-[-110px] tw-w-[166px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-primary-light tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-primary-light" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 tw-bottom-20 tw-left-[-70px]"
+                        className="tw-absolute tw-bottom-20 tw-left-[-70px] -tw-z-1"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -75,7 +75,7 @@ const TestimonialArea = ({
                     </motion.div>
                 </motion.div>
                 <motion.div
-                    className="xl:tw-pr-[100px] tw-relative tw-z-1 md:tw-col-span-6 xl:tw-col-span-4"
+                    className="tw-relative tw-z-1 md:tw-col-span-6 xl:tw-col-span-4 xl:tw-pr-[100px]"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
@@ -96,7 +96,7 @@ const TestimonialArea = ({
                         />
                     )}
                     <motion.div
-                        className="tw-absolute tw-z-10 tw-top-[100px] tw-right-[50px]"
+                        className="tw-absolute tw-right-[50px] tw-top-[100px] tw-z-10"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -111,7 +111,7 @@ const TestimonialArea = ({
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute -tw-z-1 -tw-right-2.5 tw-bottom-15"
+                        className="tw-absolute -tw-right-2.5 tw-bottom-15 -tw-z-1"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/testimonial/layout-05/index.tsx b/src/containers/testimonial/layout-05/index.tsx
index 3527f2470..e9d5b188b 100644
--- a/src/containers/testimonial/layout-05/index.tsx
+++ b/src/containers/testimonial/layout-05/index.tsx
@@ -65,16 +65,16 @@ const TestimonialArea = ({ data: { section_title, items }, space, bg, titleSize
                     </AnimatedSwiperSlider>
                 )}
                 <motion.div
-                    className="tw-absolute -tw-z-1 tw-top-24 tw-left-[100] tw-w-[166px] tw-h-[166px]"
+                    className="tw-absolute tw-left-[100] tw-top-24 -tw-z-1 tw-h-[166px] tw-w-[166px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <Shape2 className="tw-fill-tan tw-w-full tw-h-full" />
+                    <Shape2 className="tw-h-full tw-w-full tw-fill-tan" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute -tw-z-1 tw-bottom-0 tw-left-44 tw-w-[124px]"
+                    className="tw-absolute tw-bottom-0 tw-left-44 -tw-z-1 tw-w-[124px]"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
diff --git a/src/containers/testimonial/layout-07/index.tsx b/src/containers/testimonial/layout-07/index.tsx
index 4376944f2..0fb64a947 100644
--- a/src/containers/testimonial/layout-07/index.tsx
+++ b/src/containers/testimonial/layout-07/index.tsx
@@ -49,7 +49,7 @@ const TestimonialArea = ({ data: { items, section_title }, titleSize }: TProps)
         };
     }, []);
     return (
-        <div className="tw-py-15 md:tw-py-20 lg:tw-py-[100px] tw-bg-light-100 tw-px-3.8">
+        <div className="tw-bg-light-100 tw-px-3.8 tw-py-15 md:tw-py-20 lg:tw-py-[100px]">
             {section_title && (
                 <AnimatedSectionTitle
                     {...section_title}
diff --git a/src/containers/timeline/index.tsx b/src/containers/timeline/index.tsx
index 281f4f29b..7f17d1682 100644
--- a/src/containers/timeline/index.tsx
+++ b/src/containers/timeline/index.tsx
@@ -30,8 +30,8 @@ const TimelineArea = ({ data: { section_title, items }, space, bg, titleSize }:
                     />
                 )}
                 {items && items.length > 0 && (
-                    <ul className="tw-relative tw-pt-8 tw-pb-[65px]">
-                        <li className="tw-absolute tw-top-0 tw-left-3.8 md:tw-left-1/2 -tw-ml-px tw-h-full tw-border-l-2 tw-border-l-mishcka" />
+                    <ul className="tw-relative tw-pb-[65px] tw-pt-8">
+                        <li className="tw-absolute tw-left-3.8 tw-top-0 -tw-ml-px tw-h-full tw-border-l-2 tw-border-l-mishcka md:tw-left-1/2" />
                         {items.map(({ id, headings, images, texts }, idx) => (
                             <TimelineItem
                                 key={id}
diff --git a/src/containers/timeline/item.tsx b/src/containers/timeline/item.tsx
index 6e79b977b..7df8c31b1 100644
--- a/src/containers/timeline/item.tsx
+++ b/src/containers/timeline/item.tsx
@@ -13,9 +13,9 @@ type TProps = {
 
 const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
     return (
-        <li className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-relative tw-mb-10 lg:tw-mb-[68px] tw-pl-[45px] tw-w-full md:tw-pl-0 last:tw-mb-0">
-            <div className="tw-absolute tw-top-0.5 tw-left-0 md:tw-left-1/2 md:-tw-translate-x-1/2 tw-w-7.5 tw-h-7.5 tw-text-primary before:tw-absolute before:tw-content-[''] before:tw-border before:tw-border-current before:tw-inset-0 before:tw-rounded-full before:tw-opacity-20">
-                <div className="tw-absolute tw-left-1/2 tw-right-1/2 -tw-translate-x-1/2 tw-translate-y-1/2 tw-w-[14px] tw-h-[14px] tw-border-[3px] tw-border-current tw-rounded-full tw-z-10 tw-bg-white" />
+        <li className="tw-relative tw-mb-10 tw-grid tw-w-full tw-grid-cols-1 tw-pl-[45px] last:tw-mb-0 md:tw-grid-cols-2 md:tw-pl-0 lg:tw-mb-[68px]">
+            <div className="tw-absolute tw-left-0 tw-top-0.5 tw-h-7.5 tw-w-7.5 tw-text-primary before:tw-absolute before:tw-inset-0 before:tw-rounded-full before:tw-border before:tw-border-current before:tw-opacity-20 before:tw-content-[''] md:tw-left-1/2 md:-tw-translate-x-1/2">
+                <div className="tw-absolute tw-left-1/2 tw-right-1/2 tw-z-10 tw-h-[14px] tw-w-[14px] -tw-translate-x-1/2 tw-translate-y-1/2 tw-rounded-full tw-border-[3px] tw-border-current tw-bg-white" />
             </div>
             <motion.div
                 className={clsx(
@@ -30,7 +30,7 @@ const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
             >
                 <div className="lg:tw-max-w-[500px]">
                     {title?.content && (
-                        <h3 className="tw-uppercase tw-tracking-[3px] tw-text-primary tw-mb-7.5 lg:tw-mb-14">
+                        <h3 className="tw-mb-7.5 tw-uppercase tw-tracking-[3px] tw-text-primary lg:tw-mb-14">
                             {title.content}
                         </h3>
                     )}
@@ -39,7 +39,7 @@ const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
                             <img
                                 src={image.src}
                                 alt={image?.alt || ""}
-                                className="tw-rounded tw-object-cover tw-h-full tw-w-full"
+                                className="tw-h-full tw-w-full tw-rounded tw-object-cover"
                             />
                         </figure>
                     )}
@@ -47,7 +47,7 @@ const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
             </motion.div>
             <motion.div
                 className={clsx(
-                    "tw-mt-7.5 md:tw-mt-0 md:tw-pt-15 lg:tw-pt-[130px] md:tw-mx-7.5",
+                    "tw-mt-7.5 md:tw-mx-7.5 md:tw-mt-0 md:tw-pt-15 lg:tw-pt-[130px]",
                     !isEven && "md:tw-order-first md:tw-text-right"
                 )}
                 initial="offscreen"
@@ -58,7 +58,7 @@ const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
                 <div className={clsx("lg:tw-max-w-[500px]", isEven && "md:tw-ml-auto")}>
                     {heading?.content && <h3 className="tw-mb-[22px]">{heading.content}</h3>}
                     {texts?.map((text) => (
-                        <p className="md:tw-text-lg tw-leading-loose" key={text.id}>
+                        <p className="tw-leading-loose md:tw-text-lg" key={text.id}>
                             {text.content}
                         </p>
                     ))}
diff --git a/src/containers/video/layout-01/index.tsx b/src/containers/video/layout-01/index.tsx
index 14d91451c..b20d7d954 100644
--- a/src/containers/video/layout-01/index.tsx
+++ b/src/containers/video/layout-01/index.tsx
@@ -53,7 +53,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         poster={{ ...images[0], width: 970, height: 569 }}
                         video={video}
                         className={clsx(
-                            "tw-max-w-[970px] tw-mx-auto -tw-bottom-[140px] -tw-mt-[140px]"
+                            "-tw-bottom-[140px] tw-mx-auto -tw-mt-[140px] tw-max-w-[970px]"
                         )}
                         initial="offscreen"
                         whileInView="onscreen"
@@ -62,16 +62,16 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 )}
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-left-0 -tw-top-[90px] tw-w-[120px] tw-h-[130px] md:-tw-top-[120px] md:tw-w-[226px] md:tw-h-[226px]"
+                    className="tw-absolute -tw-top-[90px] tw-left-0 tw-z-1 tw-h-[130px] tw-w-[120px] md:-tw-top-[120px] md:tw-h-[226px] md:tw-w-[226px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <Shape2 className="tw-fill-putty tw-w-full tw-h-full" />
+                    <Shape2 className="tw-h-full tw-w-full tw-fill-putty" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-top-0 tw-left-5 tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                    className="tw-absolute tw-left-5 tw-top-0 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
@@ -86,7 +86,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-10 tw-top-10 tw-right-0"
+                    className="tw-absolute tw-right-0 tw-top-10 tw-z-10"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -101,7 +101,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
+                    className="tw-absolute -tw-bottom-[45px] tw-right-5 tw-z-1 tw-w-[85px] md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
diff --git a/src/containers/video/layout-02/index.tsx b/src/containers/video/layout-02/index.tsx
index a88de4e51..8a719d036 100644
--- a/src/containers/video/layout-02/index.tsx
+++ b/src/containers/video/layout-02/index.tsx
@@ -32,8 +32,8 @@ const VideoArea = ({
 
     return (
         <Section className="video-area tw-relative" space={space} bg={bg}>
-            <div className="tw-container tw-grid lg:tw-grid-cols-12 tw-gap-7.5 tw-items-center">
-                <div className="lg:tw-col-span-7 tw-relative">
+            <div className="tw-container tw-grid tw-items-center tw-gap-7.5 lg:tw-grid-cols-12">
+                <div className="tw-relative lg:tw-col-span-7">
                     {video && images?.[0] && (
                         <AnimatedVideo
                             poster={{ ...images[0], width: 970, height: 569 }}
@@ -45,16 +45,16 @@ const VideoArea = ({
                         />
                     )}
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-w-[120px] tw-h-[130px] tw-top-[-99px] tw-left-[-99px] sm:tw-top-[-90px] md:tw-w-[166px] md:tw-h-[166px] md:tw-top-[-46px]"
+                        className="tw-absolute tw-left-[-99px] tw-top-[-99px] tw-z-1 tw-h-[130px] tw-w-[120px] sm:tw-top-[-90px] md:tw-top-[-46px] md:tw-h-[166px] md:tw-w-[166px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-gray-750 tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-gray-750" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-2 tw-left-[-65px] tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                        className="tw-absolute tw-left-[-65px] tw-top-2 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -63,7 +63,7 @@ const VideoArea = ({
                         <img src="/images/shape-animation/medal.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-20 tw-top-0 -tw-right-2.5 md:tw-right-7.5"
+                        className="tw-absolute -tw-right-2.5 tw-top-0 tw-z-20 md:tw-right-7.5"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -78,7 +78,7 @@ const VideoArea = ({
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
+                        className="tw-absolute -tw-bottom-15 tw-right-0 tw-z-1 tw-w-[85px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/video/layout-03/index.tsx b/src/containers/video/layout-03/index.tsx
index 6cd746817..ed34b1071 100644
--- a/src/containers/video/layout-03/index.tsx
+++ b/src/containers/video/layout-03/index.tsx
@@ -30,7 +30,7 @@ const VideoArea = ({
 
     return (
         <Section className="video-area tw-relative" space={space} bg={bg}>
-            <div className="tw-container tw-grid lg:tw-grid-cols-[64%_minmax(36%,_1fr)] tw-gap-[50px] lg:tw-gap-7.5 tw-items-center">
+            <div className="tw-container tw-grid tw-items-center tw-gap-[50px] lg:tw-grid-cols-[64%_minmax(36%,_1fr)] lg:tw-gap-7.5">
                 <div className="tw-relative">
                     {video && images?.[0] && (
                         <AnimatedVideo
@@ -44,16 +44,16 @@ const VideoArea = ({
                         />
                     )}
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-w-[120px] tw-h-[130px] tw-top-[-99px] tw-left-[-99px] sm:tw-top-[-90px] md:tw-w-[166px] md:tw-h-[166px] md:tw-top-[-46px]"
+                        className="tw-absolute tw-left-[-99px] tw-top-[-99px] tw-z-1 tw-h-[130px] tw-w-[120px] sm:tw-top-[-90px] md:tw-top-[-46px] md:tw-h-[166px] md:tw-w-[166px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-gray-750 tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-gray-750" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-2 tw-left-[-65px] tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                        className="tw-absolute tw-left-[-65px] tw-top-2 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -62,7 +62,7 @@ const VideoArea = ({
                         <img src="/images/shape-animation/medal.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-20 tw-top-0 -tw-right-2.5 md:tw-right-7.5"
+                        className="tw-absolute -tw-right-2.5 tw-top-0 tw-z-20 md:tw-right-7.5"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -77,7 +77,7 @@ const VideoArea = ({
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
+                        className="tw-absolute -tw-bottom-15 tw-right-0 tw-z-1 tw-w-[85px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/video/layout-04/index.tsx b/src/containers/video/layout-04/index.tsx
index df82a76e3..64b784739 100644
--- a/src/containers/video/layout-04/index.tsx
+++ b/src/containers/video/layout-04/index.tsx
@@ -24,7 +24,7 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                 {video && images?.[0] && (
                     <AnimatedVideo
                         poster={{ ...images[0], width: 970, height: 569 }}
-                        className="tw-max-w-[970px] tw-mx-auto"
+                        className="tw-mx-auto tw-max-w-[970px]"
                         video={video}
                         initial="offscreen"
                         whileInView="onscreen"
@@ -33,16 +33,16 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                     />
                 )}
                 <motion.div
-                    className="tw-absolute tw-z-1 -tw-left-10 tw-top-0 tw-w-[120px] tw-h-[130px] md:-tw-top-20 md:tw-left-16 md:tw-w-[226px] md:tw-h-[226px]"
+                    className="tw-absolute -tw-left-10 tw-top-0 tw-z-1 tw-h-[130px] tw-w-[120px] md:-tw-top-20 md:tw-left-16 md:tw-h-[226px] md:tw-w-[226px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <Shape2 className="tw-fill-putty tw-w-full tw-h-full" />
+                    <Shape2 className="tw-h-full tw-w-full tw-fill-putty" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-top-11 -tw-left-5 tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                    className="tw-absolute -tw-left-5 tw-top-11 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
@@ -57,7 +57,7 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-10 tw-top-15 lg:tw-top-10 tw-right-0"
+                    className="tw-absolute tw-right-0 tw-top-15 tw-z-10 lg:tw-top-10"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -72,7 +72,7 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
+                    className="tw-absolute -tw-bottom-[45px] tw-right-5 tw-z-1 tw-w-[85px] md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
diff --git a/src/containers/video/layout-05/index.tsx b/src/containers/video/layout-05/index.tsx
index 0c0bedf8d..d03f8242a 100644
--- a/src/containers/video/layout-05/index.tsx
+++ b/src/containers/video/layout-05/index.tsx
@@ -17,7 +17,7 @@ type TProps = {
 
 const VideoArea = ({ data: { images, video, section_title } }: TProps) => {
     return (
-        <div className="tw-relative tw-z-10 tw-bg-gray-200 tw-mb-15 md:tw-mb-[140px]">
+        <div className="tw-relative tw-z-10 tw-mb-15 tw-bg-gray-200 md:tw-mb-[140px]">
             <div className="tw-container">
                 {section_title && (
                     <AnimatedSectionTitle
@@ -30,7 +30,7 @@ const VideoArea = ({ data: { images, video, section_title } }: TProps) => {
                     />
                 )}
                 <motion.div
-                    className="tw-relative tw-z-10 -tw-bottom-15 -tw-mt-15 md:-tw-bottom-[140px] md:-tw-mt-[140px]"
+                    className="tw-relative -tw-bottom-15 tw-z-10 -tw-mt-15 md:-tw-bottom-[140px] md:-tw-mt-[140px]"
                     initial="offscreen"
                     whileInView="onscreen"
                     viewport={{ once: true, amount: 0.4 }}
diff --git a/src/containers/video/layout-06/index.tsx b/src/containers/video/layout-06/index.tsx
index 5734ce93f..fefcb1297 100644
--- a/src/containers/video/layout-06/index.tsx
+++ b/src/containers/video/layout-06/index.tsx
@@ -24,7 +24,7 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
 
     return (
         <div className="about-area tw-relative tw-pb-15 md:tw-pb-15 lg:tw-pb-[100px]">
-            <div className="tw-container tw-grid lg:tw-grid-cols-[62%_minmax(36%,_1fr)] tw-gap-[50px] lg:tw-gap-7.5 tw-items-center">
+            <div className="tw-container tw-grid tw-items-center tw-gap-[50px] lg:tw-grid-cols-[62%_minmax(36%,_1fr)] lg:tw-gap-7.5">
                 <div className="tw-relative">
                     {video && images?.[0] && (
                         <AnimatedVideo
@@ -38,16 +38,16 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                         />
                     )}
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-w-[120px] tw-h-[130px] tw-top-[-99px] tw-left-[-99px] sm:tw-top-[-90px] md:tw-w-[166px] md:tw-h-[166px] md:tw-top-[-46px]"
+                        className="tw-absolute tw-left-[-99px] tw-top-[-99px] tw-z-1 tw-h-[130px] tw-w-[120px] sm:tw-top-[-90px] md:tw-top-[-46px] md:tw-h-[166px] md:tw-w-[166px]"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
                         }}
                     >
-                        <Shape2 className="tw-fill-gray-750 tw-w-full tw-h-full" />
+                        <Shape2 className="tw-h-full tw-w-full tw-fill-gray-750" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-top-2 tw-left-[-65px] tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                        className="tw-absolute tw-left-[-65px] tw-top-2 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                         animate={{
                             x: trans2().x,
                             y: trans2().y,
@@ -56,7 +56,7 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                         <img src="/images/shape-animation/medal.svg" alt="" />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-20 tw-top-0 -tw-right-2.5 md:tw-right-7.5"
+                        className="tw-absolute -tw-right-2.5 tw-top-0 tw-z-20 md:tw-right-7.5"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
@@ -71,7 +71,7 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                         />
                     </motion.div>
                     <motion.div
-                        className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
+                        className="tw-absolute -tw-bottom-15 tw-right-0 tw-z-1 tw-w-[85px] md:tw-w-auto"
                         animate={{
                             x: trans1().x,
                             y: trans1().y,
diff --git a/src/containers/video/layout-07/index.tsx b/src/containers/video/layout-07/index.tsx
index cabd2f7e0..23a817f84 100644
--- a/src/containers/video/layout-07/index.tsx
+++ b/src/containers/video/layout-07/index.tsx
@@ -46,7 +46,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         poster={{ ...images[0], width: 970, height: 569 }}
                         video={video}
                         className={clsx(
-                            "tw-max-w-[970px] tw-mx-auto -tw-bottom-[140px] -tw-mt-[140px]"
+                            "-tw-bottom-[140px] tw-mx-auto -tw-mt-[140px] tw-max-w-[970px]"
                         )}
                         initial="offscreen"
                         whileInView="onscreen"
@@ -55,16 +55,16 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 )}
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-left-0 -tw-top-[90px] tw-w-[120px] tw-h-[130px] md:tw-top-[120px] md:tw-w-[226px] md:tw-h-[226px]"
+                    className="tw-absolute -tw-top-[90px] tw-left-0 tw-z-1 tw-h-[130px] tw-w-[120px] md:tw-top-[120px] md:tw-h-[226px] md:tw-w-[226px]"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
                     }}
                 >
-                    <Shape2 className="tw-fill-putty tw-w-full tw-h-full" />
+                    <Shape2 className="tw-h-full tw-w-full tw-fill-putty" />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 tw-top-0 tw-left-5 tw-w-[90px] tw-h-[90px] md:tw-w-auto md:tw-h-auto"
+                    className="tw-absolute tw-left-5 tw-top-0 tw-z-1 tw-h-[90px] tw-w-[90px] md:tw-h-auto md:tw-w-auto"
                     animate={{
                         x: trans2().x,
                         y: trans2().y,
@@ -79,7 +79,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-10 tw-top-10 tw-right-0"
+                    className="tw-absolute tw-right-0 tw-top-10 tw-z-10"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
@@ -94,7 +94,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                     />
                 </motion.div>
                 <motion.div
-                    className="tw-absolute tw-z-1 -tw-bottom-[120px] tw-right-5 tw-w-[85px] md:tw-w-auto"
+                    className="tw-absolute -tw-bottom-[120px] tw-right-5 tw-z-1 tw-w-[85px] md:tw-w-auto"
                     animate={{
                         x: trans1().x,
                         y: trans1().y,
diff --git a/src/containers/zoom-meeting-details/index.tsx b/src/containers/zoom-meeting-details/index.tsx
index 740bc76d7..4b42d509b 100644
--- a/src/containers/zoom-meeting-details/index.tsx
+++ b/src/containers/zoom-meeting-details/index.tsx
@@ -40,7 +40,7 @@ const ZoomMeetingDetails = ({
                                     src={thumbnail.src}
                                     alt={thumbnail?.alt || "zoom meeting"}
                                     width="770"
-                                    className="tw-w-full tw-h-full tw-object-cover tw-rounded"
+                                    className="tw-h-full tw-w-full tw-rounded tw-object-cover"
                                 />
                             </figure>
                         )}
diff --git a/src/containers/zoom-meetings/index.tsx b/src/containers/zoom-meetings/index.tsx
index 66393eb76..f06f121b1 100644
--- a/src/containers/zoom-meetings/index.tsx
+++ b/src/containers/zoom-meetings/index.tsx
@@ -22,7 +22,7 @@ const ZoomMeetingArea = ({ data: { zoomMeetings, pagiData } }: TProps) => {
         <Section className="zoom-meeting-area" space="bottom">
             <h2 className="tw-sr-only">Zoom Meetings Section</h2>
             <div className="tw-container">
-                <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                <div className="tw-grid tw-gap-7.5 md:tw-grid-cols-2 lg:tw-grid-cols-3">
                     {zoomMeetings?.map((zoomMeeting) => (
                         <AnimatedZoomCard
                             key={zoomMeeting.path}
diff --git a/src/data/blogs/celebrating-progress-on-veterans-day-2023.md b/src/data/blogs/celebrating-progress-on-veterans-day-2023.md
index 6531ca8bb..10e1f89ef 100644
--- a/src/data/blogs/celebrating-progress-on-veterans-day-2023.md
+++ b/src/data/blogs/celebrating-progress-on-veterans-day-2023.md
@@ -48,13 +48,13 @@ So, who's Jodie? Initially conceived as a modest bot for our Slack channels, Jod
 
 ### Jodie's Roles
 
--   **Administrative Support:** Managing calendars, scheduling meetings, and sending reminders.
--   **Communication:** Drafting newsletters, responding to routine emails, and flagging urgent messages.
--   **Resource Management:** Keeping educational materials, coding resources, and mentorship programs readily accessible.
--   **Data Handling:** Analyzing feedback, compiling success reports, and suggesting improvements.
--   **Technical Support:** Providing troubleshooting assistance for common software issues.
--   **Security and Compliance:** Adherence to strict data privacy regulations.
--   **Learning and Reporting:** Continuous improvement based on interactions and human feedback while providing regular activity updates.
+- **Administrative Support:** Managing calendars, scheduling meetings, and sending reminders.
+- **Communication:** Drafting newsletters, responding to routine emails, and flagging urgent messages.
+- **Resource Management:** Keeping educational materials, coding resources, and mentorship programs readily accessible.
+- **Data Handling:** Analyzing feedback, compiling success reports, and suggesting improvements.
+- **Technical Support:** Providing troubleshooting assistance for common software issues.
+- **Security and Compliance:** Adherence to strict data privacy regulations.
+- **Learning and Reporting:** Continuous improvement based on interactions and human feedback while providing regular activity updates.
 
 ### Jodie's Limitations
 
diff --git a/src/data/blogs/reflections-on-the-military-influencer-conference-a-step-toward-inclusion-and-innovation.md b/src/data/blogs/reflections-on-the-military-influencer-conference-a-step-toward-inclusion-and-innovation.md
index 4b43fcac7..46af9462a 100644
--- a/src/data/blogs/reflections-on-the-military-influencer-conference-a-step-toward-inclusion-and-innovation.md
+++ b/src/data/blogs/reflections-on-the-military-influencer-conference-a-step-toward-inclusion-and-innovation.md
@@ -12,7 +12,6 @@ tags:
     - Technology
     - Veterans
 is_featured: true
-
 ---
 
 The Military Influencer Conference (MIC) was a dynamic and exciting event that shattered my expectations of what military-focused gatherings could be. Known as the premier gathering for veteran entrepreneurs, creators, military spouses, and community leaders, MIC fosters collaboration, innovation, and professional development across a broad spectrum of industries. Far from the usual military event dominated by a homogeneous group of veterans fitting a predictable mold, MIC was a refreshing departure that set a new standard for inclusion and forward-thinking in military spaces.
@@ -37,4 +36,4 @@ The Military Influencer Conference wasn’t just an event—it was a wake-up cal
 
 If this story resonates with you, consider supporting Vets Who Code to help more veterans transition into successful tech careers. Your donations can make a significant impact. You can also sponsor us on GitHub to get technical updates and support our mission. Together, we can make a difference.
 
-[Donate to Vets Who Code](https://vetswhocode.io/donate) | [Sponsor us on GitHub](https://github.com/sponsors/Vets-Who-Code)
\ No newline at end of file
+[Donate to Vets Who Code](https://vetswhocode.io/donate) | [Sponsor us on GitHub](https://github.com/sponsors/Vets-Who-Code)
diff --git a/src/data/blogs/system-requirements-and-architecture-patterns-for-javascript-engineers.md b/src/data/blogs/system-requirements-and-architecture-patterns-for-javascript-engineers.md
index a62f15eeb..bd3cd9057 100644
--- a/src/data/blogs/system-requirements-and-architecture-patterns-for-javascript-engineers.md
+++ b/src/data/blogs/system-requirements-and-architecture-patterns-for-javascript-engineers.md
@@ -25,17 +25,17 @@ Software development, a complex craft that demands finesse, critical thinking, a
 
 Interactive web applications play a crucial role in user engagement. The Requirements Simulator Pattern, a robust tool, empowers developers and stakeholders to render UI components based on user interactions dynamically. This practical approach offers real-time visualization and adjustments to requirements, thereby crystallizing the final product vision. Let's explore some real-world examples across different technologies:
 
--   **JavaScript/TypeScript**: Express.js applications can simulate user interactions based on JSON-defined requirements.
-    _"Given a JSON object that outlines specific user interactions, such as logging in, submitting a form, or navigating through pages, translate these requirements into a sequence of Express.js routes and middleware functions. The JSON object specifies the type of request (GET, POST, etc.), the expected input, and the desired output for each interaction. Your task is to simulate these interactions within an Express.js application, ensuring that each interaction is captured accurately and the expected outcomes are achieved."_
+- **JavaScript/TypeScript**: Express.js applications can simulate user interactions based on JSON-defined requirements.
+  _"Given a JSON object that outlines specific user interactions, such as logging in, submitting a form, or navigating through pages, translate these requirements into a sequence of Express.js routes and middleware functions. The JSON object specifies the type of request (GET, POST, etc.), the expected input, and the desired output for each interaction. Your task is to simulate these interactions within an Express.js application, ensuring that each interaction is captured accurately and the expected outcomes are achieved."_
 
--   **Next.js**: You can use server-side rendering to simulate user scenarios based on specific requirements.
-    _"Design a Next.js application that leverages server-side rendering (SSR) to simulate different user scenarios per specific requirements outlined in a JSON document. These scenarios could range from user authentication states (logged-in vs. logged-out), user roles and permissions to personalized user experiences based on their profile data. Your prompt should guide the development of Next.js pages that use the getServerSideProps function to fetch and pass the relevant data based on the JSON-defined requirements to the React components, ensuring that each page accurately reflects the simulated user scenario. This task involves dynamically generating the page content, altering layout, or even redirecting users based on their scenario, directly from the server, to tailor the user experience as closely as possible to the defined requirements."_
+- **Next.js**: You can use server-side rendering to simulate user scenarios based on specific requirements.
+  _"Design a Next.js application that leverages server-side rendering (SSR) to simulate different user scenarios per specific requirements outlined in a JSON document. These scenarios could range from user authentication states (logged-in vs. logged-out), user roles and permissions to personalized user experiences based on their profile data. Your prompt should guide the development of Next.js pages that use the getServerSideProps function to fetch and pass the relevant data based on the JSON-defined requirements to the React components, ensuring that each page accurately reflects the simulated user scenario. This task involves dynamically generating the page content, altering layout, or even redirecting users based on their scenario, directly from the server, to tailor the user experience as closely as possible to the defined requirements."_
 
--   **Vue**: A dynamic form builder allows users to configure and simulate input situations. Vuex aids in managing state changes across the application in real-time
-    _"Develop a Vue application that includes a dynamic form builder, enabling users to configure and simulate various input scenarios as outlined in a JSON document. This JSON document details different types of form fields (e.g., text input, select dropdowns, checkboxes) and the logic for how these fields interact (e.g., conditional visibility, data validation rules). Utilize Vuex for state management to ensure real-time changes in form inputs or configurations are reflected across the application. Your task is to create Vue components that interpret the JSON requirements to generate the form fields and implement the specified interactions dynamically. Additionally, leverage Vuex to handle any state changes resulting from user input or form configuration adjustments, ensuring a seamless and interactive user experience."_
+- **Vue**: A dynamic form builder allows users to configure and simulate input situations. Vuex aids in managing state changes across the application in real-time
+  _"Develop a Vue application that includes a dynamic form builder, enabling users to configure and simulate various input scenarios as outlined in a JSON document. This JSON document details different types of form fields (e.g., text input, select dropdowns, checkboxes) and the logic for how these fields interact (e.g., conditional visibility, data validation rules). Utilize Vuex for state management to ensure real-time changes in form inputs or configurations are reflected across the application. Your task is to create Vue components that interpret the JSON requirements to generate the form fields and implement the specified interactions dynamically. Additionally, leverage Vuex to handle any state changes resulting from user input or form configuration adjustments, ensuring a seamless and interactive user experience."_
 
--   **Angular**: Services implemented with RxJS can simulate user interactions and data flows based loosely on requirements.
-    _"Construct an Angular application that uses services equipped with RxJS to simulate user interactions and data flows, adhering to guidelines provided in a JSON document. This document specifies user interaction scenarios, such as submitting forms, navigating between views, updating user profiles, and the expected data transformations and state changes. Your task involves creating Angular services that utilize RxJS observables and operators to manage and stream data according to these scenarios. Integrate these services within your Angular components to dynamically react to user actions and data changes, ensuring the application behavior aligns with the outlined requirements. Focus on leveraging RxJS to efficiently handle asynchronous operations and state management, facilitating a responsive and interactive user experience based on the simulated conditions."_
+- **Angular**: Services implemented with RxJS can simulate user interactions and data flows based loosely on requirements.
+  _"Construct an Angular application that uses services equipped with RxJS to simulate user interactions and data flows, adhering to guidelines provided in a JSON document. This document specifies user interaction scenarios, such as submitting forms, navigating between views, updating user profiles, and the expected data transformations and state changes. Your task involves creating Angular services that utilize RxJS observables and operators to manage and stream data according to these scenarios. Integrate these services within your Angular components to dynamically react to user actions and data changes, ensuring the application behavior aligns with the outlined requirements. Focus on leveraging RxJS to efficiently handle asynchronous operations and state management, facilitating a responsive and interactive user experience based on the simulated conditions."_
 
 ## 2. Specification Disambiguation Pattern
 
@@ -49,18 +49,18 @@ As we lean more into microservices and API-centric development, the API Generato
 
 Running simulations before diving into implementation is always a wise move. The API Simulator Pattern acts as a sandbox, enabling developers to interact with an API based on its spec. This method facilitates behavior validation, potential issue identification, and necessary adjustments well before development, saving valuable time and resources. Here's a step-by-step guide on how to use it:
 
--   **JavaScript/TypeScript**: Utilize an express.js application.
-    _"Construct a mock API using Express.js that simulates the behavior of a specified API based on a JSON document outlining its endpoints, request methods, and expected responses. This document is the API specification detailing endpoints for user management, data processing, and other functions. Your task is implementing routes in Express.js for each endpoint described, utilizing middleware to parse requests and generate the appropriate mock responses. This simulation allows for testing frontend applications or other services that depend on this API, facilitating development and integration testing before the actual API is implemented."_
+- **JavaScript/TypeScript**: Utilize an express.js application.
+  _"Construct a mock API using Express.js that simulates the behavior of a specified API based on a JSON document outlining its endpoints, request methods, and expected responses. This document is the API specification detailing endpoints for user management, data processing, and other functions. Your task is implementing routes in Express.js for each endpoint described, utilizing middleware to parse requests and generate the appropriate mock responses. This simulation allows for testing frontend applications or other services that depend on this API, facilitating development and integration testing before the actual API is implemented."_
 
--   **Next.js**: Use API routes to create mock endpoints simulating actual API behavior.
+- **Next.js**: Use API routes to create mock endpoints simulating actual API behavior.
 
     _"Design a Next.js application that leverages API routes to establish mock endpoints, replicating the functionality of a real API as defined in a JSON specification. This specification includes details on endpoint paths, HTTP methods, and mock responses for various scenarios, such as authentication, data retrieval, and user actions. Implement these API routes within your Next.js application to return JSON responses that mimic the expected behavior of the actual API, enabling frontend development and testing against these endpoints to proceed seamlessly in parallel with backend API development."_
 
--   **Vue**: Integrate with a mock server or service to simulate API calls.
-    _"Develop a Vue application that integrates with a mock server or employs a service to simulate API calls based on a predefined API specification in JSON format. This specification outlines the structure of the API, including endpoints, request payloads, and the structure of expected responses. Utilize libraries or tools such as Axios combined with JSON-server or MirageJS to set up the mock server, configuring it to handle API requests as described in the specification. This setup allows for the simulation of data fetching, posting, and other API interactions within your Vue application, facilitating development and testing by mimicking real API behavior."_
+- **Vue**: Integrate with a mock server or service to simulate API calls.
+  _"Develop a Vue application that integrates with a mock server or employs a service to simulate API calls based on a predefined API specification in JSON format. This specification outlines the structure of the API, including endpoints, request payloads, and the structure of expected responses. Utilize libraries or tools such as Axios combined with JSON-server or MirageJS to set up the mock server, configuring it to handle API requests as described in the specification. This setup allows for the simulation of data fetching, posting, and other API interactions within your Vue application, facilitating development and testing by mimicking real API behavior."_
 
--   **Angular**: Use HttpClient along with an in-memory-web-api to simulate API requests and responses.
-    _"Create an Angular application that uses the HttpClient module in conjunction with the Angular in-memory-web-api package to simulate API requests and responses per an API specification provided in a JSON document. This document defines the API's endpoints, the data models for requests and responses, and other relevant details. Implement an in-memory database with mock data and routes that reflect the API specification, using the in-memory-web-api to intercept HttpClient requests and return the simulated responses. This approach allows for the testing and developing components and services that rely on API data without the need for an actual backend, streamlining the frontend development process."_
+- **Angular**: Use HttpClient along with an in-memory-web-api to simulate API requests and responses.
+  _"Create an Angular application that uses the HttpClient module in conjunction with the Angular in-memory-web-api package to simulate API requests and responses per an API specification provided in a JSON document. This document defines the API's endpoints, the data models for requests and responses, and other relevant details. Implement an in-memory database with mock data and routes that reflect the API specification, using the in-memory-web-api to intercept HttpClient requests and return the simulated responses. This approach allows for the testing and developing components and services that rely on API data without the need for an actual backend, streamlining the frontend development process."_
 
 ## 5. Few-shot Code Example Generation Pattern
 
@@ -70,19 +70,19 @@ The Few-shot Code Example Generation pattern relies on learning from examples. W
 
 Creating a DSL for software development can streamline communication and implementation. This pattern uses functions and objects to abstract complex logic into simpler, domain-specific language constructs. For example:
 
--   **JavaScript/TypeScript**: Define DSL within the project.
-    _"Design a Domain-Specific Language (DSL) for a JavaScript/TypeScript project that focuses on simplifying complex animations within web applications. Your DSL should provide a concise syntax for defining animations, specifying parameters such as duration, easing functions, and animation sequences. Implement this DSL by creating a set of functions or classes in TypeScript that interpret the DSL commands and translate them into CSS animations or JavaScript animation libraries. Include examples of how developers can quickly integrate this DSL into their projects to create complex animations with minimal code."_
+- **JavaScript/TypeScript**: Define DSL within the project.
+  _"Design a Domain-Specific Language (DSL) for a JavaScript/TypeScript project that focuses on simplifying complex animations within web applications. Your DSL should provide a concise syntax for defining animations, specifying parameters such as duration, easing functions, and animation sequences. Implement this DSL by creating a set of functions or classes in TypeScript that interpret the DSL commands and translate them into CSS animations or JavaScript animation libraries. Include examples of how developers can quickly integrate this DSL into their projects to create complex animations with minimal code."_
 
--   **Next.js/Vue/Angular**: Use custom directives, components, or hooks to encapsulate domain-specific functionalities.
+- **Next.js/Vue/Angular**: Use custom directives, components, or hooks to encapsulate domain-specific functionalities.
 
-    -   **Next.js**:
-        _"Develop a set of custom hooks in Next.js that serve as a DSL for managing global state in a Next.js application, particularly for user authentication and theme management. This DSL should offer hooks like useAuth() for handling login, logout, and authentication status and useTheme() for switching themes and managing theme state. The implementation should utilize Next.js's API routes for authentication processes and Context API for theme management, ensuring seamless integration with Next.js features. Provide documentation on how developers can utilize these hooks in their components to simplify authentication and theme management."_
+    - **Next.js**:
+      _"Develop a set of custom hooks in Next.js that serve as a DSL for managing global state in a Next.js application, particularly for user authentication and theme management. This DSL should offer hooks like useAuth() for handling login, logout, and authentication status and useTheme() for switching themes and managing theme state. The implementation should utilize Next.js's API routes for authentication processes and Context API for theme management, ensuring seamless integration with Next.js features. Provide documentation on how developers can utilize these hooks in their components to simplify authentication and theme management."_
 
-    -   **Vue**:
-        _"Create a series of custom directives in Vue that act as a DSL for form validation and input masking to simplify how forms are handled in Vue applications. This DSL should include directives that can be applied directly to form elements, specifying validation rules (e.g., v-validate="email") and input masking (e.g., v-mask="date"). Implement these directives to work with Vue's reactivity system, providing immediate feedback to users and reducing the boilerplate code needed for form handling. Document how to apply these directives within Vue components to enhance form functionality with minimal effort."_
+    - **Vue**:
+      _"Create a series of custom directives in Vue that act as a DSL for form validation and input masking to simplify how forms are handled in Vue applications. This DSL should include directives that can be applied directly to form elements, specifying validation rules (e.g., v-validate="email") and input masking (e.g., v-mask="date"). Implement these directives to work with Vue's reactivity system, providing immediate feedback to users and reducing the boilerplate code needed for form handling. Document how to apply these directives within Vue components to enhance form functionality with minimal effort."_
 
-    -   **Angular**:
-        _"Design a collection of Angular components that embody a DSL for creating dynamic data dashboards, including widgets like charts, tables, and filters. These components should allow developers to define dashboards in a declarative manner, using attributes and bindings to specify data sources, configurations, and interactions (e.g., <dashboard-chart [data]="salesData" type="bar">). Ensure these components are modular and easily integrated into larger Angular applications, supporting AOT compilation and lazy loading. Illustrate how developers can use these components to rapidly construct data-driven dashboards, focusing on configurability and ease of use."_
+    - **Angular**:
+      _"Design a collection of Angular components that embody a DSL for creating dynamic data dashboards, including widgets like charts, tables, and filters. These components should allow developers to define dashboards in a declarative manner, using attributes and bindings to specify data sources, configurations, and interactions (e.g., <dashboard-chart [data]="salesData" type="bar">). Ensure these components are modular and easily integrated into larger Angular applications, supporting AOT compilation and lazy loading. Illustrate how developers can use these components to rapidly construct data-driven dashboards, focusing on configurability and ease of use."_
 
 ## 7. Architectural Possibilities Pattern
 
diff --git a/src/data/blogs/using-ai-to-create-a-login-feature.md b/src/data/blogs/using-ai-to-create-a-login-feature.md
index b6a51fa90..b4db0f331 100644
--- a/src/data/blogs/using-ai-to-create-a-login-feature.md
+++ b/src/data/blogs/using-ai-to-create-a-login-feature.md
@@ -26,10 +26,10 @@ In this post, we'll explore how to use AI tools like GitHub Copilot Workspaces a
 
 By leveraging prompt engineering and existing code bases, the core functionality of a login feature was implemented using Next.js. This feature includes:
 
--   **Login Form**: A simple and user-friendly interface for users to enter their credentials.
--   **Welcome Message**: A personalized greeting displayed upon successful login.
--   **Profile and Bio**: Sections to display user information and a brief biography.
--   **User Context Handling**: Logic to manage user sessions and authentication status.
+- **Login Form**: A simple and user-friendly interface for users to enter their credentials.
+- **Welcome Message**: A personalized greeting displayed upon successful login.
+- **Profile and Bio**: Sections to display user information and a brief biography.
+- **User Context Handling**: Logic to manage user sessions and authentication status.
 
 The implementation process, completed in just one hour and 28 minutes, demonstrates the power and efficiency of using AI in coding tasks.
 
diff --git a/src/data/blogs/why-devsecops-is-a-perfect-match-for-veterans.md b/src/data/blogs/why-devsecops-is-a-perfect-match-for-veterans.md
index ca37fe16b..233b0e58e 100644
--- a/src/data/blogs/why-devsecops-is-a-perfect-match-for-veterans.md
+++ b/src/data/blogs/why-devsecops-is-a-perfect-match-for-veterans.md
@@ -29,23 +29,23 @@ Think of DevSecOps as the tech equivalent of a Special Operations unit, where se
 
 ### Why DevSecOps Appeals to Veterans
 
--   **Structure and Discipline**: The methodical and disciplined approach vital in the military is equally essential in DevSecOps for maintaining robust software security.
--   **Rapid Problem-Solving**: Just as quick thinking is crucial in the field, DevSecOps demands swift and effective solutions to technological challenges.
--   **Team Collaboration**: In DevSecOps, harmonious collaboration among developers, operations, and security teams echoes the teamwork found in military units.
--   **Detail-Oriented**: The importance of attention to detail in both military operations and DevSecOps cannot be overstated, where small oversights can lead to significant risks.
--   **Continual Adaptation**: The tech world, much like military strategy, is ever-evolving, requiring a commitment to ongoing learning and adaptation.
--   **Security Focus**: Your experience in defending national assets translates well into protecting software systems, client data, and digital networks in DevSecOps.
+- **Structure and Discipline**: The methodical and disciplined approach vital in the military is equally essential in DevSecOps for maintaining robust software security.
+- **Rapid Problem-Solving**: Just as quick thinking is crucial in the field, DevSecOps demands swift and effective solutions to technological challenges.
+- **Team Collaboration**: In DevSecOps, harmonious collaboration among developers, operations, and security teams echoes the teamwork found in military units.
+- **Detail-Oriented**: The importance of attention to detail in both military operations and DevSecOps cannot be overstated, where small oversights can lead to significant risks.
+- **Continual Adaptation**: The tech world, much like military strategy, is ever-evolving, requiring a commitment to ongoing learning and adaptation.
+- **Security Focus**: Your experience in defending national assets translates well into protecting software systems, client data, and digital networks in DevSecOps.
 
 ## Starting Your DevSecOps Journey
 
 Wondering about the skills needed? Here's a beginner's guide:
 
--   **Python**: A versatile and accessible programming language, crucial for various coding tasks.
--   **Git**: Essential for collaborative work, much like coordinating a military operation.
--   **Linux Command Line**: Familiarity with Linux tools is key, akin to adapting to a new operational environment.
--   **Cloud Technologies**: Knowledge of cloud platforms like AWS or Azure is increasingly important.
--   **Docker**: Mastering Docker is like learning to efficiently pack and deploy resources.
--   **Cybersecurity Basics**: Extend your defense expertise to the digital realm by understanding core cybersecurity principles.
+- **Python**: A versatile and accessible programming language, crucial for various coding tasks.
+- **Git**: Essential for collaborative work, much like coordinating a military operation.
+- **Linux Command Line**: Familiarity with Linux tools is key, akin to adapting to a new operational environment.
+- **Cloud Technologies**: Knowledge of cloud platforms like AWS or Azure is increasingly important.
+- **Docker**: Mastering Docker is like learning to efficiently pack and deploy resources.
+- **Cybersecurity Basics**: Extend your defense expertise to the digital realm by understanding core cybersecurity principles.
 
 ## Mission Briefing
 
diff --git a/src/data/blogs/why-i-created-a-portfolio-checklist-for-javaScript-engineers.md b/src/data/blogs/why-i-created-a-portfolio-checklist-for-javaScript-engineers.md
index fdebf127f..70fcce444 100644
--- a/src/data/blogs/why-i-created-a-portfolio-checklist-for-javaScript-engineers.md
+++ b/src/data/blogs/why-i-created-a-portfolio-checklist-for-javaScript-engineers.md
@@ -31,11 +31,11 @@ In the tech industry, a portfolio is crucial for showcasing your skills and expe
 
 When creating the portfolio checklist, I focused on the most frequently asked questions that I have received from students. These questions include:
 
--   What should I include in my portfolio?
--   How do I showcase my skills?
--   How do I choose the right projects to showcase?
--   How do I make my portfolio stand out?
--   What do I need on my portfolio that I might not think of?
+- What should I include in my portfolio?
+- How do I showcase my skills?
+- How do I choose the right projects to showcase?
+- How do I make my portfolio stand out?
+- What do I need on my portfolio that I might not think of?
 
 I hope to help students create portfolios that accurately represent their skills and experience by addressing these questions and providing detailed answers.
 
diff --git a/src/data/curriculum/lessons/lesson-01.md b/src/data/curriculum/lessons/lesson-01.md
index cb7501b6c..b7556b7ca 100644
--- a/src/data/curriculum/lessons/lesson-01.md
+++ b/src/data/curriculum/lessons/lesson-01.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-02.md b/src/data/curriculum/lessons/lesson-02.md
index 8044fe4cf..d3e61a803 100644
--- a/src/data/curriculum/lessons/lesson-02.md
+++ b/src/data/curriculum/lessons/lesson-02.md
@@ -11,11 +11,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -27,9 +27,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -41,8 +41,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-03.md b/src/data/curriculum/lessons/lesson-03.md
index 6c6014ac0..7d3c73d12 100644
--- a/src/data/curriculum/lessons/lesson-03.md
+++ b/src/data/curriculum/lessons/lesson-03.md
@@ -11,11 +11,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -27,9 +27,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -41,8 +41,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-04.md b/src/data/curriculum/lessons/lesson-04.md
index c1efd7061..f951e6c65 100644
--- a/src/data/curriculum/lessons/lesson-04.md
+++ b/src/data/curriculum/lessons/lesson-04.md
@@ -11,11 +11,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -27,9 +27,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -41,8 +41,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-05.md b/src/data/curriculum/lessons/lesson-05.md
index 981ce0e45..11981db99 100644
--- a/src/data/curriculum/lessons/lesson-05.md
+++ b/src/data/curriculum/lessons/lesson-05.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-06.md b/src/data/curriculum/lessons/lesson-06.md
index 5ff16042f..8427e9025 100644
--- a/src/data/curriculum/lessons/lesson-06.md
+++ b/src/data/curriculum/lessons/lesson-06.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-07.md b/src/data/curriculum/lessons/lesson-07.md
index 87b7a9e87..c6bf52499 100644
--- a/src/data/curriculum/lessons/lesson-07.md
+++ b/src/data/curriculum/lessons/lesson-07.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-08.md b/src/data/curriculum/lessons/lesson-08.md
index f99cdcfc2..b6e50f5fe 100644
--- a/src/data/curriculum/lessons/lesson-08.md
+++ b/src/data/curriculum/lessons/lesson-08.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-09.md b/src/data/curriculum/lessons/lesson-09.md
index fabde7fa8..cafae39ea 100644
--- a/src/data/curriculum/lessons/lesson-09.md
+++ b/src/data/curriculum/lessons/lesson-09.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-10.md b/src/data/curriculum/lessons/lesson-10.md
index 5b38255a1..60e32f9b2 100644
--- a/src/data/curriculum/lessons/lesson-10.md
+++ b/src/data/curriculum/lessons/lesson-10.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-11.md b/src/data/curriculum/lessons/lesson-11.md
index 1f58811d6..4719d8df7 100644
--- a/src/data/curriculum/lessons/lesson-11.md
+++ b/src/data/curriculum/lessons/lesson-11.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-12.md b/src/data/curriculum/lessons/lesson-12.md
index db54f371f..42aca26f2 100644
--- a/src/data/curriculum/lessons/lesson-12.md
+++ b/src/data/curriculum/lessons/lesson-12.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-13.md b/src/data/curriculum/lessons/lesson-13.md
index e3126892b..fa86c03de 100644
--- a/src/data/curriculum/lessons/lesson-13.md
+++ b/src/data/curriculum/lessons/lesson-13.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-14.md b/src/data/curriculum/lessons/lesson-14.md
index 28895209f..10146f73d 100644
--- a/src/data/curriculum/lessons/lesson-14.md
+++ b/src/data/curriculum/lessons/lesson-14.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-15.md b/src/data/curriculum/lessons/lesson-15.md
index dfa77fb24..c1c52b3ae 100644
--- a/src/data/curriculum/lessons/lesson-15.md
+++ b/src/data/curriculum/lessons/lesson-15.md
@@ -11,11 +11,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -27,9 +27,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -41,8 +41,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-16.md b/src/data/curriculum/lessons/lesson-16.md
index 0f29826ba..a145555d9 100644
--- a/src/data/curriculum/lessons/lesson-16.md
+++ b/src/data/curriculum/lessons/lesson-16.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-17.md b/src/data/curriculum/lessons/lesson-17.md
index ce8d55aff..dedfe343b 100644
--- a/src/data/curriculum/lessons/lesson-17.md
+++ b/src/data/curriculum/lessons/lesson-17.md
@@ -11,11 +11,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -27,9 +27,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -41,8 +41,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-18.md b/src/data/curriculum/lessons/lesson-18.md
index f63717a76..4ae64643f 100644
--- a/src/data/curriculum/lessons/lesson-18.md
+++ b/src/data/curriculum/lessons/lesson-18.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-19.md b/src/data/curriculum/lessons/lesson-19.md
index 45a56129a..9d9ebd08b 100644
--- a/src/data/curriculum/lessons/lesson-19.md
+++ b/src/data/curriculum/lessons/lesson-19.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/curriculum/lessons/lesson-20.md b/src/data/curriculum/lessons/lesson-20.md
index cac12b31b..891fca292 100644
--- a/src/data/curriculum/lessons/lesson-20.md
+++ b/src/data/curriculum/lessons/lesson-20.md
@@ -12,11 +12,11 @@ This lesson will give instructions on how to set achievable goals.
 
 Your goal should be clear and specific, otherwise, you won’t be able to focus your efforts or feel truly motivated to achieve it. When drafting your goal, try to answer the five “W” questions:
 
--   **What** do I want to accomplish?
--   **Why** is this goal important?
--   **Who** is involved?
--   **Where** is it located?
--   **Which** resources or limits are involved?
+- **What** do I want to accomplish?
+- **Why** is this goal important?
+- **Who** is involved?
+- **Where** is it located?
+- **Which** resources or limits are involved?
 
 ### Example
 
@@ -28,9 +28,9 @@ It’s important to have measurable goals so that you can track your progress an
 
 A measurable goal should address questions such as:
 
--   How much?
--   How many?
--   How will I know when it is accomplished?
+- How much?
+- How many?
+- How will I know when it is accomplished?
 
 ### Example
 
@@ -42,8 +42,8 @@ Your goal also needs to be realistic and attainable to be successful. In other w
 
 An achievable goal will usually answer questions such as:
 
--   How can I accomplish this goal?
--   How realistic is the goal, based on other constraints,such as financial factors?
+- How can I accomplish this goal?
+- How realistic is the goal, based on other constraints,such as financial factors?
 
 ### Example
 
diff --git a/src/data/mdx-pages/code-of-conduct.md b/src/data/mdx-pages/code-of-conduct.md
index 2d06a01ab..f7e9952ae 100644
--- a/src/data/mdx-pages/code-of-conduct.md
+++ b/src/data/mdx-pages/code-of-conduct.md
@@ -8,25 +8,25 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
--   Using welcoming and inclusive language.
--   Being respectful of differing viewpoints and experiences.
--   Gracefully accepting constructive criticism.
--   Focusing on what is best for the community.
--   Showing empathy towards other community members.
+- Using welcoming and inclusive language.
+- Being respectful of differing viewpoints and experiences.
+- Gracefully accepting constructive criticism.
+- Focusing on what is best for the community.
+- Showing empathy towards other community members.
 
 Examples of unacceptable behavior by participants include:
 
--   The use of sexualized language or imagery and unwelcome sexual attention or advances.
--   Trolling, insulting/derogatory comments, and personal or political attacks.
--   Public or private harassment.
--   Deliberate intimidation, stalking, or following.
--   Harassing photography or recording.
--   Sustained disruption of talks or other events.
--   Inappropriate physical contact.
--   Unwelcome sexual attention or advances.
--   Advocating for, or encouraging, any of the above behaviors.
--   Publishing others' private information, such as a physical or electronic address, without explicit permission.
--   Other conduct that is inappropriate for a professional or shared professional environment.
+- The use of sexualized language or imagery and unwelcome sexual attention or advances.
+- Trolling, insulting/derogatory comments, and personal or political attacks.
+- Public or private harassment.
+- Deliberate intimidation, stalking, or following.
+- Harassing photography or recording.
+- Sustained disruption of talks or other events.
+- Inappropriate physical contact.
+- Unwelcome sexual attention or advances.
+- Advocating for, or encouraging, any of the above behaviors.
+- Publishing others' private information, such as a physical or electronic address, without explicit permission.
+- Other conduct that is inappropriate for a professional or shared professional environment.
 
 ### Our Responsibilities
 
diff --git a/src/data/projects/vscode-extension-pack.json b/src/data/projects/vscode-extension-pack.json
new file mode 100644
index 000000000..63340fc3b
--- /dev/null
+++ b/src/data/projects/vscode-extension-pack.json
@@ -0,0 +1,26 @@
+{
+  "index": 7,
+  "name": "VS Code Extension Pack",
+  "headline": "Curated VS Code Extensions for Veterans Learning JavaScript",
+  "long_description": [
+    "The Vets Who Code Extension Pack is a thoughtfully curated collection of Visual Studio Code extensions tailored to enhance the learning experience of veterans embarking on their JavaScript development journey. Recognizing the challenges that new developers face in setting up an efficient development environment, this extension pack simplifies the process by providing essential tools in a single, easy-to-install package.",
+    "Key features of the extension pack include:",
+    "- **Comprehensive Toolset**: Integrates a selection of extensions that cover code linting, debugging, version control, and more, ensuring that learners have access to the tools necessary for effective development.",
+    "- **Streamlined Setup**: Eliminates the need for learners to search for and install individual extensions, reducing setup time and allowing them to focus on coding.",
+    "- **Enhanced Learning Experience**: By providing a standardized set of tools, the extension pack fosters a consistent learning environment, enabling veterans to concentrate on mastering JavaScript without the distraction of configuring their development setup."
+  ],
+  "technologies": [
+    "Visual Studio Code",
+    "JavaScript",
+    "ESLint",
+    "Live Server",
+    "GitHub Copilot"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vetswhocode-extension-pack",
+  "live_url": "https://marketplace.visualstudio.com/items?itemName=VetsWhoCode.vetswhocode-extension-pack",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1736209366/projects/vscode-exension-pack_sops0a.png",
+    "alt": "Vets Who Code Extension Pack Thumbnail"
+  }
+}
diff --git a/src/data/projects/vscode-theme.json b/src/data/projects/vscode-theme.json
new file mode 100644
index 000000000..879186c1f
--- /dev/null
+++ b/src/data/projects/vscode-theme.json
@@ -0,0 +1,24 @@
+{
+  "index": 8,
+  "name": "Hashflag VS Code Theme",
+  "headline": "Military-Inspired VS Code Color Theme by Vets Who Code",
+  "long_description": [
+    "The Vets Who Code VS Code Theme, known as 'HashFlag,' is a color theme for Visual Studio Code inspired by military valor and spirit. Developed by Vets Who Code, a non-profit organization dedicated to helping veterans transition into technology careers, this theme offers a patriotic coding experience.",
+    "Key features of the theme include:",
+    "- **Patriotic Palette**: A color scheme featuring navy blues, army greens, and bold accents of red and gold, capturing the essence of military service and the American flag.",
+    "- **Optimized for Readability**: Contrasts designed to reduce eye strain, making it suitable for long coding sessions.",
+    "- **Universal Appeal**: Enhances workflow across various development activities, including debugging and coding."
+  ],
+  "technologies": [
+    "Visual Studio Code",
+    "JSON",
+    "Color Theme Development"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vetswhocode-vs-code-theme",
+  "live_url": "https://marketplace.visualstudio.com/items?itemName=OfficialVetsWhoCode.HashFlag",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1736209857/projects/vscode-theme_pkurqi.png",
+    "alt": "Vets Who Code VS Code Theme Thumbnail"
+  }
+}
\ No newline at end of file
diff --git a/src/data/projects/vwc-github-page.json b/src/data/projects/vwc-github-page.json
new file mode 100644
index 000000000..aa15a29b6
--- /dev/null
+++ b/src/data/projects/vwc-github-page.json
@@ -0,0 +1,26 @@
+{
+  "index": 9,
+  "name": "Engineering SOPs and Field Manual",
+  "headline": "Supplementary Guide for Vets Who Code Engineering Practices",
+  "long_description": [
+    "The Vets Who Code Engineering SOPs and Field Manual serves as a technical and operational guide for the Vets Who Code community. Hosted on GitHub Pages, this platform consolidates best practices, coding standards, and project workflows tailored to support veterans transitioning into software development.",
+    "Key features of the manual include:",
+    "- **Standard Operating Procedures (SOPs)**: Documents standardized workflows, coding practices, and tools to ensure consistency across projects.",
+    "- **Field Manual for Developers**: Provides practical advice, troubleshooting tips, and technical guidelines to navigate common challenges in software development.",
+    "- **Community Focused Content**: Encourages contributions and feedback from the Vets Who Code community, creating a living document that evolves with the organization's needs."
+  ],
+  "technologies": [
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Jekyll",
+    "GitHub Pages"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vets-who-code.github.io",
+  "live_url": "https://vets-who-code.github.io/",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/bo_1px_solid_black/v1736209366/projects/Vets_Who_Code_github_page_nrp3bu.png",
+    "alt": "Vets Who Code Engineering SOPs and Field Manual Thumbnail"
+  }
+}
\ No newline at end of file
diff --git a/src/layouts/footers/footer-01.tsx b/src/layouts/footers/footer-01.tsx
index ef93dd870..1b99440da 100644
--- a/src/layouts/footers/footer-01.tsx
+++ b/src/layouts/footers/footer-01.tsx
@@ -11,7 +11,7 @@ const Footer01 = ({ mode }: TProps) => {
     return (
         <footer
             className={clsx(
-                "tw-pt-[70px] tw-pb-[50px]",
+                "tw-pb-[50px] tw-pt-[70px]",
                 mode === "dark" && "tw-bg-dark-100",
                 mode === "light" && "tw-bg-light-100"
             )}
@@ -21,18 +21,18 @@ const Footer01 = ({ mode }: TProps) => {
                 <div className="tw-grid tw-grid-cols-12">
                     <TextWidget
                         mode={mode}
-                        className="tw-col-span-12 lg:tw-col-span-5 xl:tw-col-span-5 tw-mb-[43px]"
+                        className="tw-col-span-12 tw-mb-[43px] lg:tw-col-span-5 xl:tw-col-span-5"
                     />
                     <TwoColumnListWidget
                         mode={mode}
-                        className="tw-col-span-12 md:tw-col-span-7 lg:tw-col-span-4 xl:tw-col-span-3 tw-mb-[25px]"
+                        className="tw-col-span-12 tw-mb-[25px] md:tw-col-span-7 lg:tw-col-span-4 xl:tw-col-span-3"
                     />
 
                     <ListWidget
                         mode={mode}
-                        className="tw-col-span-12 md:tw-col-span-5 lg:tw-col-span-3 tw-mb-7.5"
+                        className="tw-col-span-12 tw-mb-7.5 md:tw-col-span-5 lg:tw-col-span-3"
                     />
-                    <div className="maxSm:tw-col-span-3 sm:tw-col-span-2 xl:tw-col-span-1">
+                    <div className="sm:tw-col-span-2 xl:tw-col-span-1 maxSm:tw-col-span-3">
                         <img
                             src="https://res.cloudinary.com/vetswhocode/image/upload/v1705549609/candid-seal-platinum-2024_wexkdk.png"
                             alt="Candid Seal Platinum Award"
@@ -40,13 +40,13 @@ const Footer01 = ({ mode }: TProps) => {
                         />
                     </div>
                 </div>
-                <p className="copyright tw-text-center tw-text-md tw-text-gray-400 tw-mt-5">
+                <p className="copyright tw-mt-5 tw-text-center tw-text-md tw-text-gray-400">
                     &copy; {new Date().getFullYear()} Vets Who Code{" "}
                     <a target="_blank" rel="noopener noreferrer" href="https://www.vetswhocode.io/">
                         All Rights Reserved
                     </a>
                 </p>
-                <p className="copyright tw-text-center tw-text-md tw-text-gray-400 mt-n5">
+                <p className="copyright mt-n5 tw-text-center tw-text-md tw-text-gray-400">
                     Vets Who Code is a registered 501(c)(3) nonprofit under EIN 86-2122804.
                     Donations are tax-deductible to the fullest extent allowable under the law.
                 </p>
diff --git a/src/layouts/headers/header-01.tsx b/src/layouts/headers/header-01.tsx
index 9c3708476..6b6f7d788 100644
--- a/src/layouts/headers/header-01.tsx
+++ b/src/layouts/headers/header-01.tsx
@@ -41,10 +41,10 @@ const Header = ({ shadow, fluid, transparent, mode }: TProps) => {
                 <div
                     ref={measuredRef}
                     className={clsx(
-                        "header-inner tw-py-[19px] xl:tw-py-0 tw-z-50 tw-transition-all tw-left-0 tw-top-0 tw-w-full tw-h-auto",
+                        "header-inner tw-left-0 tw-top-0 tw-z-50 tw-h-auto tw-w-full tw-py-[19px] tw-transition-all xl:tw-py-0",
                         !sticky && "tw-absolute",
                         sticky &&
-                            "tw-fixed tw-shadow-3md tw-shadow-black/10 tw-animate-headerSlideDown",
+                            "tw-fixed tw-animate-headerSlideDown tw-shadow-3md tw-shadow-black/10",
                         shadow && "tw-shadow-sm tw-shadow-black/5",
                         !transparent && "tw-bg-white",
                         transparent && !sticky && "tw-bg-transparent",
@@ -54,7 +54,7 @@ const Header = ({ shadow, fluid, transparent, mode }: TProps) => {
                 >
                     <div
                         className={clsx(
-                            "tw-container tw-grid tw-grid-flow-col xl:tw-grid-cols-[22%_minmax(56%,_1fr)_22%] tw-items-center",
+                            "tw-container tw-grid tw-grid-flow-col tw-items-center xl:tw-grid-cols-[22%_minmax(56%,_1fr)_22%]",
                             fluid && "tw-max-w-full tw-px-3.8 3xl:tw-px-37"
                         )}
                     >
@@ -66,7 +66,7 @@ const Header = ({ shadow, fluid, transparent, mode }: TProps) => {
                             menu={menu}
                             color={mode}
                         />
-                        <div className="md:tw-hidden tw-overflow-hidden">
+                        <div className="tw-overflow-hidden md:tw-hidden">
                             <BurgerButton
                                 className="tw-pl-5 xl:tw-hidden"
                                 onClick={() => setOffcanvas(true)}
diff --git a/src/layouts/headers/header-02.tsx b/src/layouts/headers/header-02.tsx
index 97d09469e..3da684a73 100644
--- a/src/layouts/headers/header-02.tsx
+++ b/src/layouts/headers/header-02.tsx
@@ -32,22 +32,22 @@ const Header = ({ shadow, fluid }: TProps) => {
                 <div
                     ref={measuredRef}
                     className={clsx(
-                        "header-inner tw-py-[19px] xl:tw-py-0 tw-z-50 tw-bg-white tw-transition-all tw-left-0 tw-top-0 tw-w-full tw-h-auto",
+                        "header-inner tw-left-0 tw-top-0 tw-z-50 tw-h-auto tw-w-full tw-bg-white tw-py-[19px] tw-transition-all xl:tw-py-0",
                         !sticky && "tw-absolute",
                         sticky &&
-                            "tw-fixed tw-shadow-3md tw-shadow-black/10 tw-animate-headerSlideDown",
+                            "tw-fixed tw-animate-headerSlideDown tw-shadow-3md tw-shadow-black/10",
                         shadow && "tw-shadow-sm tw-shadow-black/5"
                     )}
                 >
                     <div
                         className={clsx(
-                            "tw-container tw-grid tw-grid-flow-col xl:tw-grid-cols-[45%_minmax(10%,_1fr)_45%] tw-items-center",
+                            "tw-container tw-grid tw-grid-flow-col tw-items-center xl:tw-grid-cols-[45%_minmax(10%,_1fr)_45%]",
                             fluid && "tw-max-w-full tw-px-3.8 3xl:tw-px-37"
                         )}
                     >
                         <MainMenu menu={menu} hoverStyle="B" className="tw-hidden xl:tw-block" />
                         <Logo variant="dark" className="tw-max-w-[120px] sm:tw-max-w-[158px]" />
-                        <div className="tw-flex tw-justify-end tw-items-center">
+                        <div className="tw-flex tw-items-center tw-justify-end">
                             <BurgerButton
                                 className="tw-pl-5 xl:tw-hidden"
                                 color="dark"
diff --git a/src/layouts/headers/header.tsx b/src/layouts/headers/header.tsx
index e8dbbd065..f96fb81fc 100644
--- a/src/layouts/headers/header.tsx
+++ b/src/layouts/headers/header.tsx
@@ -32,13 +32,13 @@ const Header = ({ shadow, fluid }: TProps) => {
     return (
         <>
             <header className="header tw-relative">
-                <div className="header-top tw-py-2.5 tw-bg-gray-200">
-                    <div className="tw-container tw-flex tw-justify-center tw-items-center tw-flex-wrap">
-                        <p className="tw-text-center tw-flex-100 tw-mb-3.8 md:tw-flex-1 md:tw-text-left md:tw-mb-0 md:tw-mr-7.5">
+                <div className="header-top tw-bg-gray-200 tw-py-2.5">
+                    <div className="tw-container tw-flex tw-flex-wrap tw-items-center tw-justify-center">
+                        <p className="tw-mb-3.8 tw-flex-100 tw-text-center md:tw-mb-0 md:tw-mr-7.5 md:tw-flex-1 md:tw-text-left">
                             Our Next Cohort
                         </p>
                         <div className="tw-flex tw-items-center sm:tw-mr-[45px] md:tw-mr-5 lg:tw-mr-[45px]">
-                            <i className="far fa-clock tw-text-lg tw-text-secondary tw-mr-[5px]" />
+                            <i className="far fa-clock tw-mr-[5px] tw-text-lg tw-text-secondary" />
                             <CountdownTimer targetDate="2025/03/13" />
                         </div>
                         <Button size="xs" path="/donate">
@@ -50,16 +50,16 @@ const Header = ({ shadow, fluid }: TProps) => {
                     <div
                         ref={measuredRef}
                         className={clsx(
-                            "header-inner tw-py-[25px] xl:tw-py-0 tw-z-50 tw-bg-white tw-transition-all tw-left-0 tw-top-0 tw-w-full tw-h-auto",
+                            "header-inner tw-left-0 tw-top-0 tw-z-50 tw-h-auto tw-w-full tw-bg-white tw-py-[25px] tw-transition-all xl:tw-py-0",
                             !sticky && "tw-absolute",
                             sticky &&
-                                "tw-fixed tw-shadow-3md tw-shadow-black/10 tw-animate-headerSlideDown",
+                                "tw-fixed tw-animate-headerSlideDown tw-shadow-3md tw-shadow-black/10",
                             shadow && "tw-shadow-sm tw-shadow-black/5"
                         )}
                     >
                         <div
                             className={clsx(
-                                "tw-container tw-grid tw-grid-flow-col xl:tw-grid-cols-[22%_minmax(56%,_1fr)_22%] tw-items-center",
+                                "tw-container tw-grid tw-grid-flow-col tw-items-center xl:tw-grid-cols-[22%_minmax(56%,_1fr)_22%]",
                                 fluid && "tw-max-w-full tw-px-3.8 3xl:tw-px-37"
                             )}
                         >
@@ -70,7 +70,7 @@ const Header = ({ shadow, fluid }: TProps) => {
                                 menu={menu}
                                 hoverStyle="B"
                             />
-                            <div className="tw-flex tw-justify-end tw-items-center">
+                            <div className="tw-flex tw-items-center tw-justify-end">
                                 <Social01 className="tw-hidden md:tw-flex md:tw-items-center" />
                                 <BurgerButton
                                     className="tw-pl-2 xl:tw-hidden"
diff --git a/src/layouts/sidebar/header.tsx b/src/layouts/sidebar/header.tsx
index 8cf8f9cdf..200a09e8c 100644
--- a/src/layouts/sidebar/header.tsx
+++ b/src/layouts/sidebar/header.tsx
@@ -5,10 +5,10 @@ type TProps = {
 
 const Header = ({ title, description }: TProps) => {
     return (
-        <div className="tw-py-[22px] tw-px-5">
-            <h5 className="tw-text-h6 tw-font-medium tw-leading-snug tw-mb-1">{title}</h5>
+        <div className="tw-px-5 tw-py-[22px]">
+            <h5 className="tw-mb-1 tw-text-h6 tw-font-medium tw-leading-snug">{title}</h5>
             {description && (
-                <p className="tw-mt-[5px] tw-text-md tw-italic tw-mb-0">{description}</p>
+                <p className="tw-mb-0 tw-mt-[5px] tw-text-md tw-italic">{description}</p>
             )}
         </div>
     );
diff --git a/src/layouts/sidebar/index.tsx b/src/layouts/sidebar/index.tsx
index c288b485d..8e9f26448 100644
--- a/src/layouts/sidebar/index.tsx
+++ b/src/layouts/sidebar/index.tsx
@@ -13,7 +13,7 @@ const Sidebar = ({ open }: TProps) => {
     return (
         <div
             className={clsx(
-                "tw-fixed tw-inset-0 tw-right-auto tw-z-20 tw-bg-white tw-h-full tw-translate-x-0 tw-shadow-4md tw-shadow-black/10 tw-transition-all tw-duration-300",
+                "tw-fixed tw-inset-0 tw-right-auto tw-z-20 tw-h-full tw-translate-x-0 tw-bg-white tw-shadow-4md tw-shadow-black/10 tw-transition-all tw-duration-300",
                 open && "tw-w-0 md:tw-w-[340px]",
                 !open && "tw-w-[340px] md:tw-w-0"
             )}
@@ -21,11 +21,11 @@ const Sidebar = ({ open }: TProps) => {
             <SearchForm className="tw-h-[90px] md:tw-h-15" />
             <div
                 className={clsx(
-                    "tw-absolute tw-top-[90px] md:tw-top-15 tw-left-0 tw-bottom-0 tw-h-full tw-z-1 tw-overflow-y-auto tw-no-scroll tw-w-[340px] tw-transition-all tw-duration-300",
+                    "tw-no-scroll tw-absolute tw-bottom-0 tw-left-0 tw-top-[90px] tw-z-1 tw-h-full tw-w-[340px] tw-overflow-y-auto tw-transition-all tw-duration-300 md:tw-top-15",
                     !open &&
-                        "tw-delay-100 tw-visible tw-opacity-100 md:tw-invisible md:tw-opacity-0 md:tw-delay-0",
+                        "tw-visible tw-opacity-100 tw-delay-100 md:tw-invisible md:tw-opacity-0 md:tw-delay-0",
                     open &&
-                        "tw-invisible tw-opacity-0 md:tw-delay-100 md:tw-visible md:tw-opacity-100"
+                        "tw-invisible tw-opacity-0 md:tw-visible md:tw-opacity-100 md:tw-delay-100"
                 )}
             >
                 <ul>
@@ -36,7 +36,7 @@ const Sidebar = ({ open }: TProps) => {
                                 <ul className="section-content">
                                     {lessons.map((lsn) => (
                                         <li
-                                            className="tw-relative tw-text-md tw-bg-white tw-group"
+                                            className="tw-group tw-relative tw-bg-white tw-text-md"
                                             key={lsn.slug}
                                         >
                                             <Item
diff --git a/src/layouts/sidebar/item.tsx b/src/layouts/sidebar/item.tsx
index cd94a095d..97d166c01 100644
--- a/src/layouts/sidebar/item.tsx
+++ b/src/layouts/sidebar/item.tsx
@@ -13,16 +13,16 @@ const Item = ({ title, type, duration, video, access, path }: IProps) => {
     return (
         <Anchor
             className={clsx(
-                "tw-px-[22px] tw-min-h-[56px] tw-flex tw-flex-wrap tw-items-center",
+                "tw-flex tw-min-h-[56px] tw-flex-wrap tw-items-center tw-px-[22px]",
                 !active && "group-odd:tw-bg-light-100 group-even:tw-bg-white",
                 active && "tw-bg-primary tw-text-white hover:tw-text-white"
             )}
             path={path}
         >
-            <div className="tw-flex-1 tw-py-2.5 tw-relative tw-pl-7.5 tw-leading-normal">
+            <div className="tw-relative tw-flex-1 tw-py-2.5 tw-pl-7.5 tw-leading-normal">
                 <i
                     className={clsx(
-                        "far tw-w-5 tw-text-md tw-absolute tw-left-0 tw-top-1/2 -tw-translate-y-1/2",
+                        "far tw-absolute tw-left-0 tw-top-1/2 tw-w-5 -tw-translate-y-1/2 tw-text-md",
                         type === "lesson" && "fa-file-alt",
                         type === "quiz" && "fa-clock"
                     )}
@@ -30,7 +30,7 @@ const Item = ({ title, type, duration, video, access, path }: IProps) => {
                 <span>{title}</span>
             </div>
 
-            <div className="tw-flex tw-justify-end tw-items-center tw-py-2.5 tw-shrink-0">
+            <div className="tw-flex tw-shrink-0 tw-items-center tw-justify-end tw-py-2.5">
                 <Badge
                     className="tw-ml-2.5"
                     size="sm"
@@ -50,7 +50,7 @@ const Item = ({ title, type, duration, video, access, path }: IProps) => {
                     </Badge>
                 )}
                 {access === "paid" && video && (
-                    <span className="tw-ml-2.5 tw-font-medium tw-px-3.8">
+                    <span className="tw-ml-2.5 tw-px-3.8 tw-font-medium">
                         <i className="far fa-video" />
                     </span>
                 )}
diff --git a/src/layouts/sidebar/search-form.tsx b/src/layouts/sidebar/search-form.tsx
index abbacf11d..b35f6d384 100644
--- a/src/layouts/sidebar/search-form.tsx
+++ b/src/layouts/sidebar/search-form.tsx
@@ -14,7 +14,7 @@ const SearchForm02 = ({ className }: TProps) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [search]);
     return (
-        <form className={clsx("tw-relative tw-overflow-hidden tw-z-20", className)}>
+        <form className={clsx("tw-relative tw-z-20 tw-overflow-hidden", className)}>
             <label htmlFor="search" className="tw-sr-only">
                 Search For Lesson
             </label>
@@ -24,12 +24,12 @@ const SearchForm02 = ({ className }: TProps) => {
                 type="text"
                 placeholder="Search courses content"
                 onChange={(e) => setSearch(e.target.value)}
-                className="tw-bg-secondary tw-text-white placeholder:tw-text-white tw-w-full tw-text-md tw-pl-5 tw-pr-10 tw-py-1 tw-h-full focus-visible:tw-rounded-none focus-visible:tw-outline-none"
+                className="tw-h-full tw-w-full tw-bg-secondary tw-py-1 tw-pl-5 tw-pr-10 tw-text-md tw-text-white placeholder:tw-text-white focus-visible:tw-rounded-none focus-visible:tw-outline-none"
             />
             <button
                 type="submit"
                 aria-label="Search"
-                className="tw-text-white tw-absolute tw-right-2.5 tw-top-0 tw-h-full tw-w-4 tw-mx-2.5"
+                className="tw-absolute tw-right-2.5 tw-top-0 tw-mx-2.5 tw-h-full tw-w-4 tw-text-white"
             >
                 <i className="far fa-search" />
             </button>
diff --git a/src/lib/author.ts b/src/lib/author.ts
index 68585d9b1..3c892ad51 100644
--- a/src/lib/author.ts
+++ b/src/lib/author.ts
@@ -13,18 +13,21 @@ export function getAuthorBySlug(slug: string, fields: FieldType<IInstructor>): I
     if (fields === "all") {
         author = { ...fileContents, slug: realSlug };
     } else {
-        author = fields.reduce((acc: IInstructor, field: keyof IInstructor) => {
-            if (field === "slug") {
-                return { ...acc, [field]: realSlug };
-            }
-            if (typeof fileContents[field] !== "undefined") {
-                return {
-                    ...acc,
-                    [field]: fileContents[field],
-                };
-            }
-            return acc;
-        }, <IInstructor>{});
+        author = fields.reduce(
+            (acc: IInstructor, field: keyof IInstructor) => {
+                if (field === "slug") {
+                    return { ...acc, [field]: realSlug };
+                }
+                if (typeof fileContents[field] !== "undefined") {
+                    return {
+                        ...acc,
+                        [field]: fileContents[field],
+                    };
+                }
+                return acc;
+            },
+            <IInstructor>{}
+        );
     }
     return { ...author, path: `/blogs/author/${realSlug}` };
 }
diff --git a/src/lib/blog.ts b/src/lib/blog.ts
index eeb841f22..405baa9f4 100644
--- a/src/lib/blog.ts
+++ b/src/lib/blog.ts
@@ -53,45 +53,48 @@ export function getPostBySlug(slug: string, fields: Array<keyof IBlog> | "all" =
             author: getAuthorByID(blogData.author, "all"),
         };
     } else {
-        blog = fields.reduce((acc: IBlog, field: keyof IBlog) => {
-            if (field === "slug") {
-                return { ...acc, slug: realSlug };
-            }
-            if (field === "content") {
-                return { ...acc, [field]: content };
-            }
-            if (field === "excerpt") {
-                return { ...acc, excerpt: makeExcerpt(content, 150) };
-            }
-            if (field === "author") {
-                const author = getAuthorByID(blogData.author, "all");
-                return { ...acc, author };
-            }
-            if (field === "category") {
-                return {
-                    ...acc,
-                    category: {
-                        title: blogData.category,
-                        slug: slugify(blogData.category),
-                        path: `/blogs/category/${slugify(blogData.category)}`,
-                    },
-                };
-            }
-            if (field === "tags") {
-                return {
-                    ...acc,
-                    tags: blogData.tags.map((tag) => ({
-                        title: tag,
-                        slug: slugify(tag),
-                        path: `/blogs/tag/${slugify(tag)}`,
-                    })),
-                };
-            }
-            if (typeof data[field] !== "undefined") {
-                return { ...acc, [field]: blogData[field] };
-            }
-            return acc;
-        }, <IBlog>{});
+        blog = fields.reduce(
+            (acc: IBlog, field: keyof IBlog) => {
+                if (field === "slug") {
+                    return { ...acc, slug: realSlug };
+                }
+                if (field === "content") {
+                    return { ...acc, [field]: content };
+                }
+                if (field === "excerpt") {
+                    return { ...acc, excerpt: makeExcerpt(content, 150) };
+                }
+                if (field === "author") {
+                    const author = getAuthorByID(blogData.author, "all");
+                    return { ...acc, author };
+                }
+                if (field === "category") {
+                    return {
+                        ...acc,
+                        category: {
+                            title: blogData.category,
+                            slug: slugify(blogData.category),
+                            path: `/blogs/category/${slugify(blogData.category)}`,
+                        },
+                    };
+                }
+                if (field === "tags") {
+                    return {
+                        ...acc,
+                        tags: blogData.tags.map((tag) => ({
+                            title: tag,
+                            slug: slugify(tag),
+                            path: `/blogs/tag/${slugify(tag)}`,
+                        })),
+                    };
+                }
+                if (typeof data[field] !== "undefined") {
+                    return { ...acc, [field]: blogData[field] };
+                }
+                return acc;
+            },
+            <IBlog>{}
+        );
     }
 
     return {
diff --git a/src/lib/course.ts b/src/lib/course.ts
index 42718d937..0e5b9b020 100644
--- a/src/lib/course.ts
+++ b/src/lib/course.ts
@@ -13,18 +13,21 @@ export function getCourseBySlug(slug: string, fields: Array<keyof ICourse> | "al
     if (fields === "all") {
         course = { ...fileContents, slug: realSlug };
     } else {
-        course = fields.reduce((acc: ICourse, field: keyof ICourse) => {
-            if (field === "slug") {
-                return { ...acc, [field]: realSlug };
-            }
-            if (typeof fileContents[field] !== "undefined") {
-                return {
-                    ...acc,
-                    [field]: fileContents[field],
-                };
-            }
-            return acc;
-        }, <ICourse>{});
+        course = fields.reduce(
+            (acc: ICourse, field: keyof ICourse) => {
+                if (field === "slug") {
+                    return { ...acc, [field]: realSlug };
+                }
+                if (typeof fileContents[field] !== "undefined") {
+                    return {
+                        ...acc,
+                        [field]: fileContents[field],
+                    };
+                }
+                return acc;
+            },
+            <ICourse>{}
+        );
     }
     return {
         ...course,
diff --git a/src/lib/curriculum.ts b/src/lib/curriculum.ts
index 637613a51..528edbf28 100644
--- a/src/lib/curriculum.ts
+++ b/src/lib/curriculum.ts
@@ -24,15 +24,18 @@ export function getLessonBySlug(
     if (fields === "all") {
         lesson = { ...lessonData, content };
     } else {
-        lesson = fields.reduce((acc: ILesson, field: keyof ILesson) => {
-            if (field === "content") {
-                return { ...acc, [field]: content };
-            }
-            if (typeof data[field] !== "undefined") {
-                return { ...acc, [field]: lessonData[field] };
-            }
-            return acc;
-        }, <ILesson>{});
+        lesson = fields.reduce(
+            (acc: ILesson, field: keyof ILesson) => {
+                if (field === "content") {
+                    return { ...acc, [field]: content };
+                }
+                if (typeof data[field] !== "undefined") {
+                    return { ...acc, [field]: lessonData[field] };
+                }
+                return acc;
+            },
+            <ILesson>{}
+        );
     }
     return {
         ...lesson,
diff --git a/src/lib/event.ts b/src/lib/event.ts
index b1e5b4b79..a5f3eb74f 100644
--- a/src/lib/event.ts
+++ b/src/lib/event.ts
@@ -13,18 +13,21 @@ export function getEventeBySlug(slug: string, fields: Array<keyof IEvent> | "all
     if (fields === "all") {
         event = fileContents;
     } else {
-        event = fields.reduce((acc: IEvent, field: keyof IEvent) => {
-            if (field === "slug") {
-                return { ...acc, [field]: realSlug };
-            }
-            if (typeof fileContents[field] !== "undefined") {
-                return {
-                    ...acc,
-                    [field]: fileContents[field],
-                };
-            }
-            return acc;
-        }, <IEvent>{});
+        event = fields.reduce(
+            (acc: IEvent, field: keyof IEvent) => {
+                if (field === "slug") {
+                    return { ...acc, [field]: realSlug };
+                }
+                if (typeof fileContents[field] !== "undefined") {
+                    return {
+                        ...acc,
+                        [field]: fileContents[field],
+                    };
+                }
+                return acc;
+            },
+            <IEvent>{}
+        );
     }
 
     return { ...event, path: `/events/${realSlug}` };
diff --git a/src/lib/github.ts b/src/lib/github.ts
index 74267d94b..74b75cbe6 100644
--- a/src/lib/github.ts
+++ b/src/lib/github.ts
@@ -1,59 +1,116 @@
 import { Octokit } from "@octokit/rest";
 import { VWCContributor, GithubRepo, GithubContributor } from "@utils/types";
 
-const token = process.env.GITHUB_ACCESS_TOKEN || "";
-const octokit = new Octokit({ auth: token });
+const token = process.env.GITHUB_TOKEN;
+if (!token) {
+    throw new Error("GITHUB_TOKEN is required");
+}
 
-export const getProjectContributors = async (
+const octokit = new Octokit({
+    auth: token,
+    retry: { enabled: true },
+});
+
+async function rateLimit() {
+    const { data } = await octokit.rest.rateLimit.get();
+    if (data.rate.remaining < 10) {
+        throw new Error("GitHub API rate limit nearly exceeded");
+    }
+}
+
+export async function getProjectContributors(
     owner: string,
     repo: string,
-    top: number = 4
-): Promise<VWCContributor[]> => {
-    const topContributors = await getGithubRepoContributors(owner, repo, top);
-    const projectContributors = Promise.all(
-        topContributors.map(async (contributor) => {
-            const user = await octokit.rest.users.getByUsername({
-                username: contributor.login,
-            });
-            if (user.data.name) {
-                return {
-                    ...contributor,
-                    ...user.data,
-                    name: user.data.name!,
-                };
+    top = 4
+): Promise<VWCContributor[]> {
+    await rateLimit();
+
+    try {
+        const contributors = await getGithubRepoContributors(owner, repo, top);
+        const results: VWCContributor[] = [];
+
+        for (const contributor of contributors) {
+            try {
+                const { data: user } = await octokit.rest.users.getByUsername({
+                    username: contributor.login,
+                });
+
+                if (user.name) {
+                    results.push({
+                        ...contributor,
+                        name: user.name,
+                        bio: user.bio,
+                        location: user.location,
+                        blog: user.blog,
+                        twitter_username: user.twitter_username,
+                    });
+                }
+            } catch (error) {
+                console.error(`Failed to fetch user ${contributor.login}:`, error);
             }
-            return;
-        })
-    );
-    return (await projectContributors).filter((contributor) => contributor !== undefined);
-};
-
-export const getGithubRepo = async (owner: string, repo: string): Promise<GithubRepo> => {
-    const response = await octokit.rest.repos.get({
-        owner: owner,
-        repo: repo,
-    });
-    return response.data;
-};
-
-export const getGithubRepoContributors = async (
+        }
+
+        return results;
+    } catch (error) {
+        throw new Error(
+            `Failed to fetch project contributors: ${
+                error instanceof Error ? error.message : "Unknown error"
+            }`
+        );
+    }
+}
+
+export async function getGithubRepo(owner: string, repo: string): Promise<GithubRepo> {
+    await rateLimit();
+
+    try {
+        const { data } = await octokit.rest.repos.get({ owner, repo });
+        return {
+            id: data.id,
+            name: data.name,
+            full_name: data.full_name,
+            description: data.description,
+            html_url: data.html_url,
+            stargazers_count: data.stargazers_count,
+            watchers_count: data.watchers_count,
+            forks_count: data.forks_count,
+            open_issues_count: data.open_issues_count,
+            language: data.language,
+            topics: data.topics,
+        };
+    } catch (error) {
+        throw new Error(
+            `Failed to fetch repo: ${error instanceof Error ? error.message : "Unknown error"}`
+        );
+    }
+}
+
+export async function getGithubRepoContributors(
     owner: string,
     repo: string,
-    top: number = 4
-): Promise<GithubContributor[]> => {
-    const response = await octokit.rest.repos.listContributors({
-        owner: owner,
-        repo: repo,
-        per_page: top,
-    });
-    const contributors = response.data.map((contributor) => {
-        if (contributor.login) {
-            return {
-                ...contributor,
-                login: contributor.login!,
-            };
-        }
-        return;
-    });
-    return contributors.filter((contributor) => contributor !== undefined);
-};
+    top = 4
+): Promise<GithubContributor[]> {
+    await rateLimit();
+
+    try {
+        const { data } = await octokit.rest.repos.listContributors({
+            owner,
+            repo,
+            per_page: top,
+        });
+
+        return data.map((contributor) => ({
+            login: contributor.login,
+            id: contributor.id,
+            avatar_url: contributor.avatar_url,
+            html_url: contributor.html_url,
+            contributions: contributor.contributions,
+        }));
+    } catch (error) {
+        throw new Error(
+            `Failed to fetch contributors: ${
+                error instanceof Error ? error.message : "Unknown error"
+            }`
+        );
+    }
+}
diff --git a/src/lib/instructor.ts b/src/lib/instructor.ts
index 053fe8210..a5d245408 100644
--- a/src/lib/instructor.ts
+++ b/src/lib/instructor.ts
@@ -13,15 +13,18 @@ export function getInstructorBySlug(slug: string, fields: FieldType<IInstructor>
     if (fields === "all") {
         course = fileContents;
     } else {
-        course = fields.reduce((acc: IInstructor, field: keyof IInstructor) => {
-            if (typeof fileContents[field] !== "undefined") {
-                return {
-                    ...acc,
-                    [field]: fileContents[field],
-                };
-            }
-            return acc;
-        }, <IInstructor>{});
+        course = fields.reduce(
+            (acc: IInstructor, field: keyof IInstructor) => {
+                if (typeof fileContents[field] !== "undefined") {
+                    return {
+                        ...acc,
+                        [field]: fileContents[field],
+                    };
+                }
+                return acc;
+            },
+            <IInstructor>{}
+        );
     }
     return course;
 }
diff --git a/src/lib/project.ts b/src/lib/project.ts
index 95a1498a9..eb1fc6c84 100644
--- a/src/lib/project.ts
+++ b/src/lib/project.ts
@@ -1,37 +1,63 @@
 import path from "path";
+import fs from "fs/promises";
 import { VWCProject, VWCProjectDetails } from "@utils/types";
-import fs from "fs";
 import { getSlugs } from "./util";
 import { getGithubRepo, getProjectContributors } from "./github";
 
 const projectDirectory = path.join(process.cwd(), "src/data/projects");
 
-export function getProjectBySlug(slug: string): VWCProjectDetails {
-    const fullPath = path.join(projectDirectory, slug);
-    return JSON.parse(fs.readFileSync(fullPath, "utf8"));
+export async function getProjectBySlug(slug: string): Promise<VWCProjectDetails> {
+    try {
+        const fullPath = path.join(projectDirectory, slug);
+        const content = await fs.readFile(fullPath, "utf8");
+        return JSON.parse(content);
+    } catch (error) {
+        throw new Error(
+            `Failed to load project ${slug}: ${
+                error instanceof Error ? error.message : "Unknown error"
+            }`
+        );
+    }
 }
 
-export const getAllProjects = (): VWCProjectDetails[] => {
-    const slugs = getSlugs(projectDirectory);
-    return slugs.map((slug) => getProjectBySlug(slug));
-};
+export async function getAllProjects(): Promise<VWCProjectDetails[]> {
+    try {
+        const slugs = await getSlugs(projectDirectory);
+        return await Promise.all(slugs.map(getProjectBySlug));
+    } catch (error) {
+        throw new Error(
+            `Failed to load projects: ${error instanceof Error ? error.message : "Unknown error"}`
+        );
+    }
+}
+
+export async function getProjectData(): Promise<VWCProject[]> {
+    try {
+        const projects = await getAllProjects();
+
+        const projectsWithData = await Promise.all(
+            projects.map(async (project) => {
+                const [repo, contributors] = await Promise.all([
+                    getGithubRepo(project.owner, project.repo),
+                    getProjectContributors(project.owner, project.repo),
+                ]);
 
-export const getProjectData = async (): Promise<VWCProject[]> => {
-    const projects = getAllProjects();
-    const data = Promise.all(
-        projects.map(async (project) => {
-            const repo = await getGithubRepo(project.owner, project.repo);
-            const contributors = await getProjectContributors(project.owner, project.repo);
-            const data = {
-                details: project,
-                repo: {
-                    ...repo,
-                    contributors: contributors,
-                },
-            };
-            return data;
-        })
-    );
-    // Sort projects by index
-    return (await data).sort((a, b) => a.details.index - b.details.index);
-};
+                return {
+                    details: project,
+                    repo: {
+                        ...repo,
+                        contributors,
+                    },
+                };
+            })
+        );
+
+        return projectsWithData.sort((a, b) => a.details.index - b.details.index);
+    } catch (error) {
+        throw new Error(
+            `Failed to fetch project data: ${
+                error instanceof Error ? error.message : "Unknown error"
+            }`
+        );
+    }
+}
diff --git a/src/lib/zoom-meeting.ts b/src/lib/zoom-meeting.ts
index 0db144879..6899f82dd 100644
--- a/src/lib/zoom-meeting.ts
+++ b/src/lib/zoom-meeting.ts
@@ -19,30 +19,33 @@ export function getZoomMeetingBySlug(slug: string, fields: FieldType<IZoomMeetin
             time: dayjs(fileContents.date).format("h:mm a"),
         };
     } else {
-        event = fields.reduce((acc: IZoomMeeting, field: keyof IZoomMeeting) => {
-            if (field === "slug") {
-                return { ...acc, [field]: realSlug };
-            }
-            if (field === "date") {
-                return {
-                    ...acc,
-                    [field]: dayjs(fileContents[field]).format("MMMM D, YYYY"),
-                };
-            }
-            if (field === "time") {
-                return {
-                    ...acc,
-                    [field]: dayjs(fileContents[field]).format("h:mm a"),
-                };
-            }
-            if (typeof fileContents[field] !== "undefined") {
-                return {
-                    ...acc,
-                    [field]: fileContents[field],
-                };
-            }
-            return acc;
-        }, <IZoomMeeting>{});
+        event = fields.reduce(
+            (acc: IZoomMeeting, field: keyof IZoomMeeting) => {
+                if (field === "slug") {
+                    return { ...acc, [field]: realSlug };
+                }
+                if (field === "date") {
+                    return {
+                        ...acc,
+                        [field]: dayjs(fileContents[field]).format("MMMM D, YYYY"),
+                    };
+                }
+                if (field === "time") {
+                    return {
+                        ...acc,
+                        [field]: dayjs(fileContents[field]).format("h:mm a"),
+                    };
+                }
+                if (typeof fileContents[field] !== "undefined") {
+                    return {
+                        ...acc,
+                        [field]: fileContents[field],
+                    };
+                }
+                return acc;
+            },
+            <IZoomMeeting>{}
+        );
     }
 
     return { ...event, path: `/zoom-meetings/${realSlug}` };
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index b6aa2f994..14a04c3b1 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -8,9 +8,9 @@ const Error404Page = () => {
         <>
             <SEO title="Page Not Found" />
             <div className="error-area">
-                <div className="tw-container tw-h-screen tw-py-[100px] tw-flex tw-justify-center tw-items-center">
+                <div className="tw-container tw-flex tw-h-screen tw-items-center tw-justify-center tw-py-[100px]">
                     <div className="tw-text-center">
-                        <div className="child:tw-mx-auto tw-mb-10">
+                        <div className="tw-mb-10 child:tw-mx-auto">
                             <img
                                 src="/images/others/page-404-image.png"
                                 alt="Not Found"
@@ -18,10 +18,10 @@ const Error404Page = () => {
                                 height={141}
                             />
                         </div>
-                        <h3 className="tw-text-white tw-text-3xl md:tw-text-4xl lg:tw-text-[40px] tw-mb-[23px]">
+                        <h3 className="tw-mb-[23px] tw-text-3xl tw-text-white md:tw-text-4xl lg:tw-text-[40px]">
                             Looks like you are lost.{" "}
                         </h3>
-                        <p className="tw-text-white/50 tw-max-w-[560px] tw-mx-auto">
+                        <p className="tw-mx-auto tw-max-w-[560px] tw-text-white/50">
                             It looks like nothing was found at this location. You can either go back
                             to the last page or go to homepage{" "}
                         </p>
diff --git a/src/pages/api/auth/error.tsx b/src/pages/api/auth/error.tsx
index a6695158c..962a45ce6 100644
--- a/src/pages/api/auth/error.tsx
+++ b/src/pages/api/auth/error.tsx
@@ -15,8 +15,7 @@ type ErrorType = {
 const errorMessages: ErrorType = {
     default: {
         title: "Authentication Error",
-        message:
-            "An unexpected error occurred during the authentication process.",
+        message: "An unexpected error occurred during the authentication process.",
         action: "Please try signing in again.",
     },
     configuration: {
@@ -89,14 +88,14 @@ const AuthError: PageWithLayout = () => {
     }, [router]);
 
     return (
-        <div className="tw-min-h-screen tw-bg-gray-50 tw-flex tw-flex-col tw-justify-center tw-py-12 tw-sm:px-6 tw-lg:px-8">
+        <div className="tw-sm:px-6 tw-lg:px-8 tw-flex tw-min-h-screen tw-flex-col tw-justify-center tw-bg-gray-50 tw-py-12">
             <div className="tw-sm:mx-auto tw-sm:w-full tw-sm:max-w-md">
-                <div className="tw-bg-white tw-py-8 tw-px-4 tw-shadow tw-sm:rounded-lg tw-sm:px-10">
+                <div className="tw-sm:rounded-lg tw-sm:px-10 tw-bg-white tw-px-4 tw-py-8 tw-shadow">
                     <div className="tw-text-center">
-                        <h2 className="tw-text-2xl tw-font-bold tw-text-gray-900 tw-mb-4">
+                        <h2 className="tw-mb-4 tw-text-2xl tw-font-bold tw-text-gray-900">
                             {error.title}
                         </h2>
-                        <div className="tw-rounded-md tw-bg-red-50 tw-p-4 tw-mb-6">
+                        <div className="tw-mb-6 tw-rounded-md tw-bg-red-50 tw-p-4">
                             <div className="tw-flex">
                                 <div className="tw-flex-shrink-0">
                                     <svg
@@ -114,9 +113,7 @@ const AuthError: PageWithLayout = () => {
                                     </svg>
                                 </div>
                                 <div className="tw-ml-3">
-                                    <p className="tw-text-sm tw-text-red-700">
-                                        {error.message}
-                                    </p>
+                                    <p className="tw-text-sm tw-text-red-700">{error.message}</p>
                                     <p className="tw-mt-2 tw-text-sm tw-text-red-700">
                                         {error.action}
                                     </p>
@@ -127,7 +124,7 @@ const AuthError: PageWithLayout = () => {
                         <div className="tw-space-y-4">
                             <Link
                                 href="/"
-                                className="tw-inline-flex tw-items-center tw-px-4 tw-py-2 tw-border tw-border-transparent tw-text-sm tw-font-medium tw-rounded-md tw-shadow-sm tw-text-white tw-bg-primary tw-hover:tw-bg-opacity-90 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-offset-2 tw-focus:tw-ring-primary"
+                                className="tw-hover:tw-bg-opacity-90 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-offset-2 tw-focus:tw-ring-primary tw-inline-flex tw-items-center tw-rounded-md tw-border tw-border-transparent tw-bg-primary tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-shadow-sm"
                             >
                                 Return to Home Page
                             </Link>
@@ -140,7 +137,7 @@ const AuthError: PageWithLayout = () => {
                                 Need help?{" "}
                                 <a
                                     href="mailto:support@vetswhocode.io"
-                                    className="tw-font-medium tw-text-primary tw-hover:tw-text-opacity-90"
+                                    className="tw-hover:tw-text-opacity-90 tw-font-medium tw-text-primary"
                                 >
                                     Contact Support
                                 </a>
diff --git a/src/pages/blogs/[slug].tsx b/src/pages/blogs/[slug].tsx
index bf5259a63..e87b89509 100644
--- a/src/pages/blogs/[slug].tsx
+++ b/src/pages/blogs/[slug].tsx
@@ -53,7 +53,7 @@ const BlogDetails: PageProps = ({ data: { blog, prevAndNextPost, recentPosts, ta
                 currentPage={blog.title}
                 title="Blog"
             />
-            <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] tw-grid tw-grid-cols-3 tw-gap-7.5 lg:tw-gap-15">
+            <div className="tw-container tw-grid tw-grid-cols-3 tw-gap-7.5 tw-pb-15 md:tw-pb-20 lg:tw-gap-15 lg:tw-pb-[100px]">
                 <div className="tw-col-span-full lg:tw-col-[1/3]">
                     <BlogDetailsArea {...blog} />
                     <BlogAuthor {...blog.author} />
diff --git a/src/pages/blogs/search.tsx b/src/pages/blogs/search.tsx
index fa7ef0ea0..860366ca6 100644
--- a/src/pages/blogs/search.tsx
+++ b/src/pages/blogs/search.tsx
@@ -47,7 +47,7 @@ const BlogSearch: PageProps = ({ data }) => {
 
     if (loading) {
         return (
-            <div className="tw-w-full tw-h-screen tw-flex tw-justify-center tw-items-center">
+            <div className="tw-flex tw-h-screen tw-w-full tw-items-center tw-justify-center">
                 <Spinner />
             </div>
         );
diff --git a/src/pages/code-of-conduct.tsx b/src/pages/code-of-conduct.tsx
index c4d884f90..591b48f84 100644
--- a/src/pages/code-of-conduct.tsx
+++ b/src/pages/code-of-conduct.tsx
@@ -20,8 +20,8 @@ const CodeOfConduct: PageProps = ({ data }) => {
         <>
             <SEO title="Code Of Conduct" />
             <Breadcrumb pages={[{ path: "/", label: "home" }]} currentPage="Code Of Conduct" />
-            <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] w-full tw-gap-7.5 lg:tw-gap-15">
-                <div className="tw-col-span-full tw-order-1 lg:tw-order-2 lg:tw-col-[2/-1]">
+            <div className="w-full tw-container tw-gap-7.5 tw-pb-15 md:tw-pb-20 lg:tw-gap-15 lg:tw-pb-[100px]">
+                <div className="tw-order-1 tw-col-span-full lg:tw-order-2 lg:tw-col-[2/-1]">
                     <MarkdownRenderer content={data.page} />
                 </div>
             </div>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 1f23269fb..65563d055 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -54,7 +54,7 @@ const Login: PageWithLayout = () => {
 
     if (!mounted || status === "loading") {
         return (
-            <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
+            <div className="tw-fixed tw-top-0 tw-z-50 tw-flex tw-h-screen tw-w-screen tw-items-center tw-justify-center tw-bg-white">
                 <Spinner />
             </div>
         );
@@ -62,17 +62,17 @@ const Login: PageWithLayout = () => {
 
     if (status === "unauthenticated") {
         return (
-            <div className="tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-bg-secondary">
-                <div className="tw-bg-white tw-rounded-lg tw-shadow-lg tw-w-full tw-max-w-md tw-overflow-hidden">
-                    <div className="tw-p-8 tw-space-y-3">
-                        <h1 className="tw-text-2xl tw-font-bold tw-text-center tw-text-secondary">
+            <div className="tw-flex tw-min-h-screen tw-items-center tw-justify-center tw-bg-secondary">
+                <div className="tw-w-full tw-max-w-md tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-lg">
+                    <div className="tw-space-y-3 tw-p-8">
+                        <h1 className="tw-text-center tw-text-2xl tw-font-bold tw-text-secondary">
                             Retool. Retrain. Relaunch.
                         </h1>
                         <p className="tw-text-center tw-text-secondary">
                             Sign in to continue your journey with #VetsWhoCode
                         </p>
                         {errorMessage && (
-                            <div className="tw-p-3 tw-text-sm tw-text-red-600 tw-bg-red-50 tw-rounded">
+                            <div className="tw-rounded tw-bg-red-50 tw-p-3 tw-text-sm tw-text-red-600">
                                 {errorMessage}
                             </div>
                         )}
@@ -81,7 +81,7 @@ const Login: PageWithLayout = () => {
                         <button
                             type="button"
                             onClick={handleSignIn}
-                            className="tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-white tw-bg-primary tw-rounded-md tw-transition-colors hover:tw-opacity-90"
+                            className="tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-2 tw-rounded-md tw-bg-primary tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-white tw-transition-colors hover:tw-opacity-90"
                             disabled={isRedirecting}
                         >
                             <i className="fab fa-github" />
@@ -113,7 +113,7 @@ const Login: PageWithLayout = () => {
     }
 
     return (
-        <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-flex-col tw-gap-4 tw-justify-center tw-items-center">
+        <div className="tw-fixed tw-top-0 tw-z-50 tw-flex tw-h-screen tw-w-screen tw-flex-col tw-items-center tw-justify-center tw-gap-4 tw-bg-white">
             <span className="tw-text-secondary">{errorMessage || "Redirecting to profile..."}</span>
             <Spinner />
         </div>
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 6b4b250f1..285f60f4d 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -36,7 +36,7 @@ const Profile: PageWithLayout = () => {
 
     if (!mounted || status === "loading") {
         return (
-            <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
+            <div className="tw-fixed tw-top-0 tw-z-50 tw-flex tw-h-screen tw-w-screen tw-items-center tw-justify-center tw-bg-white">
                 <Spinner />
             </div>
         );
@@ -44,7 +44,7 @@ const Profile: PageWithLayout = () => {
 
     if (!session) {
         return (
-            <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
+            <div className="tw-fixed tw-top-0 tw-z-50 tw-flex tw-h-screen tw-w-screen tw-items-center tw-justify-center tw-bg-white">
                 <Spinner />
             </div>
         );
@@ -72,7 +72,7 @@ const Profile: PageWithLayout = () => {
                 <button
                     onClick={handleLogout}
                     type="button"
-                    className="tw-bg-red-500 tw-text-white tw-px-4 tw-py-2 tw-rounded"
+                    className="tw-rounded tw-bg-red-500 tw-px-4 tw-py-2 tw-text-white"
                 >
                     Logout
                 </button>
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index 10fa3d456..875e3ed04 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -310,11 +310,22 @@ type PageProps = NextPage<TProps> & {
 };
 
 const Projects: PageProps = ({ projects }: TProps) => {
+    const description = [
+        "Welcome to the Vets Who Code project showcase—a space dedicated to highlighting the exceptional work of our veteran developers.",
+        "Here, you'll find innovative applications, tools, and solutions created by our talented community, demonstrating their technical expertise and commitment to excellence. Each project reflects the dedication, creativity, and skills that veterans bring to the tech industry.",
+        "Explore their work and discover how they are making a meaningful impact through code.",
+    ];
+
     return (
         <>
             <SEO title="Projects" />
             <Breadcrumb pages={[{ path: "/", label: "home" }]} currentPage="Projects" />
             <VWCGrid title="Projects">
+                <div className="tw-col-span-full tw-items-center tw-justify-center tw-text-pretty tw-text-secondary">
+                    {description.map((text) => {
+                        return <p>{text}</p>;
+                    })}
+                </div>
                 {projects.map((project) => (
                     <ProjectCard key={project.details.name} project={project} />
                 ))}
diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx
new file mode 100644
index 000000000..4b26fd746
--- /dev/null
+++ b/src/pages/sponsors.tsx
@@ -0,0 +1,144 @@
+import type { NextPage } from "next";
+import SEO from "@components/seo/page-seo";
+import Layout from "@layout/layout-01";
+import React from "react";
+
+interface BenefitCardProps {
+    icon: string;
+    title: string;
+    description: string;
+}
+
+type PageWithLayout = NextPage & {
+    Layout: typeof Layout;
+};
+
+const BenefitCard: React.FC<BenefitCardProps> = ({ icon, title, description }) => (
+    <div className="tw-text-center">
+        <div className="tw-mb-4 tw-flex tw-justify-center">
+            <i className={`${icon} tw-text-6xl tw-text-red-700`} />
+        </div>
+        <h3 className="tw-mb-2 tw-text-xl tw-font-bold tw-text-blue-900">{title}</h3>
+        <p>{description}</p>
+    </div>
+);
+
+const benefits: BenefitCardProps[] = [
+    {
+        icon: "fab fa-handshake",
+        title: "INTERNSHIPS",
+        description:
+            "Test-drive the talent, increase productivity, enhance perspective with a diverse pool of candidates.",
+    },
+    {
+        icon: "fab fa-comments",
+        title: "GUARANTEED INTERVIEWS",
+        description:
+            "Veterans are at risk of unemployment and underemployment. By guaranteeing an interview for veterans who successfully complete our curriculum you will increase their chances of securing gainful employment.",
+    },
+    {
+        icon: "fab fa-money-bill-alt",
+        title: "DONATIONS",
+        description: "Donate to the VWC organization to enable the training of more veterans.",
+    },
+];
+
+const SponsorPage: PageWithLayout = () => {
+    return (
+        <>
+            <SEO title="Become a Sponsor" />
+            <div className="tw-min-h-screen tw-bg-white">
+                {/* Hero Section */}
+                <section className="tw-bg-blue-900 tw-py-16 tw-text-white">
+                    <div className="tw-container tw-mx-auto tw-px-4">
+                        <h1 className="tw-mb-4 tw-text-center tw-text-5xl tw-font-bold">
+                            WE WANT YOU
+                        </h1>
+                        <div className="tw-flex tw-justify-center">
+                            <div className="tw-relative tw--mb-20 tw-bg-red-700 tw-p-4">
+                                <div className="tw-text-2xl tw-font-semibold">#VetsWhoCode</div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Main Content */}
+                <main className="tw-container tw-mx-auto tw-px-4 tw-py-16">
+                    <div className="tw-mx-auto tw-mb-16 tw-max-w-4xl tw-text-center">
+                        <p className="tw-text-xl tw-text-blue-900">
+                            After completing the VWC curriculum, our pool of veterans are able,
+                            willing, and highly qualified to enter the civilian workforce. Become a
+                            VWC Sponsor today and honor our veterans by making a real investment in
+                            helping their career by providing:
+                        </p>
+                    </div>
+
+                    {/* Benefits Grid */}
+                    <div className="tw-mb-16 tw-grid tw-gap-8 md:tw-grid-cols-3">
+                        {benefits.map((benefit, index) => (
+                            <BenefitCard key={index} {...benefit} />
+                        ))}
+                    </div>
+
+                    {/* Benefits Section */}
+                    <section className="tw-mb-16 tw-rounded-lg tw-bg-blue-800 tw-p-8 tw-text-white">
+                        <h2 className="tw-mb-8 tw-text-center tw-text-3xl tw-font-bold">
+                            BENEFITS OF BECOMING A VWC SPONSOR
+                        </h2>
+                        <div className="tw-space-y-6">
+                            <p className="tw-text-lg">
+                                Add top-quality talent with a wealth of technical and soft skills to
+                                your organization today. Only 1/4 of the U.S. population meet the
+                                military's rigorous physical, behavioral and educational
+                                requirements.
+                            </p>
+                            <p className="tw-text-lg">
+                                Individuals who have served in the military are exceptionally
+                                well-trained, highly-disciplined, accustomed to working in teams,
+                                goal-orientated and possess strong leadership qualities. This
+                                combination of skills and attributes aligns exceptionally well with
+                                the tech industry; veterans are already prepared to work harder and
+                                move faster on day one. Because employers prioritize attitude first
+                                and foremost, military members can fill critical positions and
+                                become valuable members of any team immediately.
+                            </p>
+                            <p className="tw-text-lg">
+                                The Work Opportunity Tax Credit (WOTC) is a federal income tax
+                                credit available to employers who hire and retain veterans and
+                                individuals from targeted groups with significant barriers to
+                                employment. There is no limit on the number of individuals an
+                                employer can hire to qualify to claim the WOTC.
+                            </p>
+                        </div>
+                    </section>
+
+                    {/* Contact Section */}
+                    <section className="tw-rounded-lg tw-bg-red-700 tw-p-8 tw-text-center tw-text-white">
+                        <h2 className="tw-mb-4 tw-text-2xl tw-font-bold">
+                            Contact Ayumi Bennett, Technical Program Manager
+                        </h2>
+                        <p className="tw-mb-6 tw-text-xl">
+                            ayumi@vetswhocode.io to learn how you can support a veteran today.
+                        </p>
+                        <p className="tw-text-sm">
+                            Vets Who Code Inc. is an exempt organization as described in Section
+                            501(c)(3) of the Internal Revenue Code. EIN 86-2122804
+                        </p>
+                    </section>
+                </main>
+
+                {/* Footer */}
+                <footer className="tw-bg-blue-900 tw-py-4 tw-text-center tw-text-white">
+                    <p>
+                        VISIT HTTPS://VETSWHOCODE.IO/SYLLABUS TO LEARN MORE ABOUT OUR FLAGSHIP
+                        CURRICULUM.
+                    </p>
+                </footer>
+            </div>
+        </>
+    );
+};
+
+SponsorPage.Layout = Layout;
+
+export default SponsorPage;
diff --git a/src/utils/methods.ts b/src/utils/methods.ts
index ecaa45f59..c6185efe4 100644
--- a/src/utils/methods.ts
+++ b/src/utils/methods.ts
@@ -8,26 +8,32 @@ export const normalizedData = <T extends Record<string, unknown>>(
     data: T[],
     identifier: keyof T
 ): { [key: string]: SectionType } => {
-    return data.reduce((allContent, item) => {
-        // Remove null properties and create a new object
-        const cleanedObj = Object.entries(item).reduce((acc, [key, value]) => {
-            if (value !== null) {
-                acc[key] = value;
-            }
-            return acc;
-        }, {} as Record<string, unknown>);
-
-        // Get the identifier value and ensure it's a string
-        const key = String(item[identifier]);
-
-        // Return the accumulated object with the new entry
-        return {
-            ...allContent,
-            [key]: {
-                ...cleanedObj,
-            },
-        };
-    }, {} as { [key: string]: SectionType });
+    return data.reduce(
+        (allContent, item) => {
+            // Remove null properties and create a new object
+            const cleanedObj = Object.entries(item).reduce(
+                (acc, [key, value]) => {
+                    if (value !== null) {
+                        acc[key] = value;
+                    }
+                    return acc;
+                },
+                {} as Record<string, unknown>
+            );
+
+            // Get the identifier value and ensure it's a string
+            const key = String(item[identifier]);
+
+            // Return the accumulated object with the new entry
+            return {
+                ...allContent,
+                [key]: {
+                    ...cleanedObj,
+                },
+            };
+        },
+        {} as { [key: string]: SectionType }
+    );
 };
 
 export const slugify = (text: string): string => {
diff --git a/tsconfig.json b/tsconfig.json
index 0d43c0644..46b924962 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",