diff --git a/necchange/package-lock.json b/necchange/package-lock.json
index 3100c48..4898f84 100644
--- a/necchange/package-lock.json
+++ b/necchange/package-lock.json
@@ -1054,9 +1054,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.3.tgz",
-      "integrity": "sha512-X4te86vsbjsB7iO4usY9jLPtZ827Mbx+WcwNBGUOIuswuTAKQtzsuoxc/6KLxCMvogKG795MhrR1LDhYgDvasg=="
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.7.tgz",
+      "integrity": "sha512-OTx9y6I3xE/eih+qtthppwLytmpJVPM5PPoJxChFsbjIEFXIayG0h/xLzefHGJviAa3Q5+Fd+9uYojKkHDKxoQ=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.5.3",
@@ -1068,9 +1068,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.3.tgz",
-      "integrity": "sha512-6hiYNJxJmyYvvKGrVThzo4nTcqvqUTA/JvKim7Auaj33NexDqSNwN5YrrQu+QhZJCIpv2tULSHt+lf+rUflLSw==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.7.tgz",
+      "integrity": "sha512-UhZGcOyI9LE/tZL3h9rs/2wMZaaJKwnpAyegUVDGZqwsla6hMfeSj9ssBWQS9yA4UXun3pPhrFLVnw5KXZs3vw==",
       "cpu": [
         "arm64"
       ],
@@ -1083,9 +1083,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.3.tgz",
-      "integrity": "sha512-UpBKxu2ob9scbpJyEq/xPgpdrgBgN3aLYlxyGqlYX5/KnwpJpFuIHU2lx8upQQ7L+MEmz+fA1XSgesoK92ppwQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.7.tgz",
+      "integrity": "sha512-ys2cUgZYRc+CbyDeLAaAdZgS7N1Kpyy+wo0b/gAj+SeOeaj0Lw/q+G1hp+DuDiDAVyxLBCJXEY/AkhDmtihUTA==",
       "cpu": [
         "x64"
       ],
@@ -1098,9 +1098,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.3.tgz",
-      "integrity": "sha512-5AzM7Yx1Ky+oLY6pHs7tjONTF22JirDPd5Jw/3/NazJ73uGB05NqhGhB4SbeCchg7SlVYVBeRMrMSZwJwq/xoA==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.7.tgz",
+      "integrity": "sha512-2xoWtE13sUJ3qrC1lwE/HjbDPm+kBQYFkkiVECJWctRASAHQ+NwjMzgrfqqMYHfMxFb5Wws3w9PqzZJqKFdWcQ==",
       "cpu": [
         "arm64"
       ],
@@ -1113,9 +1113,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.3.tgz",
-      "integrity": "sha512-A/C1shbyUhj7wRtokmn73eBksjTM7fFQoY2v/0rTM5wehpkjQRLOXI8WJsag2uLhnZ4ii5OzR1rFPwoD9cvOgA==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.7.tgz",
+      "integrity": "sha512-+zJ1gJdl35BSAGpkCbfyiY6iRTaPrt3KTl4SF/B1NyELkqqnrNX6cp4IjjjxKpd64/7enI0kf6b9O1Uf3cL0pw==",
       "cpu": [
         "arm64"
       ],
@@ -1128,9 +1128,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.3.tgz",
-      "integrity": "sha512-FubPuw/Boz8tKkk+5eOuDHOpk36F80rbgxlx4+xty/U71e3wZZxVYHfZXmf0IRToBn1Crb8WvLM9OYj/Ur815g==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.7.tgz",
+      "integrity": "sha512-m6EBqrskeMUzykBrv0fDX/28lWIBGhMzOYaStp0ihkjzIYJiKUOzVYD1gULHc8XDf5EMSqoH/0/TRAgXqpQwmw==",
       "cpu": [
         "x64"
       ],
@@ -1143,9 +1143,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.3.tgz",
-      "integrity": "sha512-DPw8nFuM1uEpbX47tM3wiXIR0Qa+atSzs9Q3peY1urkhofx44o7E1svnq+a5Q0r8lAcssLrwiM+OyJJgV/oj7g==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.7.tgz",
+      "integrity": "sha512-gUu0viOMvMlzFRz1r1eQ7Ql4OE+hPOmA7smfZAhn8vC4+0swMZaZxa9CSIozTYavi+bJNDZ3tgiSdMjmMzRJlQ==",
       "cpu": [
         "x64"
       ],
@@ -1158,9 +1158,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.3.tgz",
-      "integrity": "sha512-zBPSP8cHL51Gub/YV8UUePW7AVGukp2D8JU93IHbVDu2qmhFAn9LWXiOOLKplZQKxnIPUkJTQAJDCWBWU4UWUA==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.7.tgz",
+      "integrity": "sha512-PGbONHIVIuzWlYmLvuFKcj+8jXnLbx4WrlESYlVnEzDsa3+Q2hI1YHoXaSmbq0k4ZwZ7J6sWNV4UZfx1OeOlbQ==",
       "cpu": [
         "arm64"
       ],
@@ -1173,9 +1173,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.3.tgz",
-      "integrity": "sha512-ONcL/lYyGUj4W37D4I2I450SZtSenmFAvapkJQNIJhrPMhzDU/AdfLkW98NvH1D2+7FXwe7yclf3+B7v28uzBQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.7.tgz",
+      "integrity": "sha512-BiSY5umlx9ed5RQDoHcdbuKTUkuFORDqzYKPHlLeS+STUWQKWziVOn3Ic41LuTBvqE0TRJPKpio9GSIblNR+0w==",
       "cpu": [
         "ia32"
       ],
@@ -1188,9 +1188,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.3.tgz",
-      "integrity": "sha512-2Vz2tYWaLqJvLcWbbTlJ5k9AN6JD7a5CN2pAeIzpbecK8ZF/yobA39cXtv6e+Z8c5UJuVOmaTldEAIxvsIux/Q==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.7.tgz",
+      "integrity": "sha512-pxsI23gKWRt/SPHFkDEsP+w+Nd7gK37Hpv0ngc5HpWy2e7cKx9zR/+Q2ptAUqICNTecAaGWvmhway7pj/JLEWA==",
       "cpu": [
         "x64"
       ],
@@ -2569,11 +2569,17 @@
       "integrity": "sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==",
       "dev": true
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -3094,11 +3100,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -3161,12 +3167,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -3257,9 +3263,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001539",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz",
-      "integrity": "sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==",
+      "version": "1.0.30001655",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz",
+      "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4306,9 +4312,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -4359,9 +4365,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -4560,11 +4566,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-    },
     "node_modules/globals": {
       "version": "13.22.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz",
@@ -5175,9 +5176,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "4.14.6",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.14.6.tgz",
-      "integrity": "sha512-EqJPEUlZD0/CSUMubKtMaYUOtWe91tZXTWMJZoKSbLk+KtdhNdcvppH8lA9XwVu2V4Ailvsj0GBZJ2ZwDjfesQ==",
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -5383,12 +5384,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -5461,9 +5462,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -5484,38 +5485,38 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "13.5.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.3.tgz",
-      "integrity": "sha512-4Nt4HRLYDW/yRpJ/QR2t1v63UOMS55A38dnWv3UDOWGezuY0ZyFO1ABNbD7mulVzs9qVhgy2+ppjdsANpKP1mg==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.7.tgz",
+      "integrity": "sha512-4Qy2aK0LwH4eQiSvQWyKuC7JXE13bIopEQesWE0c/P3uuNRnZCQanI0vsrMLmUQJLAto+A+/8+sve2hd+BQuOQ==",
       "dependencies": {
-        "@next/env": "13.5.3",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.7",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.14",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0",
-        "zod": "3.21.4"
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.14.0"
+        "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.3",
-        "@next/swc-darwin-x64": "13.5.3",
-        "@next/swc-linux-arm64-gnu": "13.5.3",
-        "@next/swc-linux-arm64-musl": "13.5.3",
-        "@next/swc-linux-x64-gnu": "13.5.3",
-        "@next/swc-linux-x64-musl": "13.5.3",
-        "@next/swc-win32-arm64-msvc": "13.5.3",
-        "@next/swc-win32-ia32-msvc": "13.5.3",
-        "@next/swc-win32-x64-msvc": "13.5.3"
+        "@next/swc-darwin-arm64": "14.2.7",
+        "@next/swc-darwin-x64": "14.2.7",
+        "@next/swc-linux-arm64-gnu": "14.2.7",
+        "@next/swc-linux-arm64-musl": "14.2.7",
+        "@next/swc-linux-x64-gnu": "14.2.7",
+        "@next/swc-linux-x64-musl": "14.2.7",
+        "@next/swc-win32-arm64-msvc": "14.2.7",
+        "@next/swc-win32-ia32-msvc": "14.2.7",
+        "@next/swc-win32-x64-msvc": "14.2.7"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -5524,20 +5525,23 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
       }
     },
     "node_modules/next-auth": {
-      "version": "4.23.1",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.23.1.tgz",
-      "integrity": "sha512-mL083z8KgRtlrIV6CDca2H1kduWJuK/3pTS0Fe2og15KOm4v2kkLGdSDfc2g+019aEBrJUT0pPW2Xx42ImN1WA==",
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.7.tgz",
+      "integrity": "sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@panva/hkdf": "^1.0.2",
         "cookie": "^0.5.0",
-        "jose": "^4.11.4",
+        "jose": "^4.15.5",
         "oauth": "^0.9.15",
         "openid-client": "^5.4.0",
         "preact": "^10.6.3",
@@ -5545,7 +5549,7 @@
         "uuid": "^8.3.2"
       },
       "peerDependencies": {
-        "next": "^12.2.5 || ^13",
+        "next": "^12.2.5 || ^13 || ^14",
         "nodemailer": "^6.6.5",
         "react": "^17.0.2 || ^18",
         "react-dom": "^17.0.2 || ^18"
@@ -5557,9 +5561,9 @@
       }
     },
     "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5568,10 +5572,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -5586,9 +5594,9 @@
       "dev": true
     },
     "node_modules/nodemailer": {
-      "version": "6.9.5",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.5.tgz",
-      "integrity": "sha512-/dmdWo62XjumuLc5+AYQZeiRj+PRR8y8qKtFCOyuOl1k/hckZd8durUUHs/ucKx6/8kN+wFxqKJlQ/LK/qR5FA==",
+      "version": "6.9.14",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.14.tgz",
+      "integrity": "sha512-Dobp/ebDKBvz91sbtRKhcznLThrKxKt97GI2FAlAyy+fk19j73Uz3sBXolVtmcXjaorivqsbbbjDY+Jkt4/bQA==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -5903,9 +5911,9 @@
       "optional": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -5938,9 +5946,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.43",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.43.tgz",
+      "integrity": "sha512-gJAQVYbh5R3gYm33FijzCZj7CHyQ3hWMgJMprLUlIYqCwTeZhBQ19wp0e9mA25BUbEvY5+EXuuaAjqQsrBxQBQ==",
       "dev": true,
       "funding": [
         {
@@ -5957,9 +5965,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -6576,9 +6584,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7166,18 +7174,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7300,14 +7296,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
     }
   }
 }
diff --git a/necchange/src/app/api/feed/feed_post/[...scroll]/route.js b/necchange/src/app/api/feed/feed_post/[...scroll]/route.js
index 73abe5a..7712038 100644
--- a/necchange/src/app/api/feed/feed_post/[...scroll]/route.js
+++ b/necchange/src/app/api/feed/feed_post/[...scroll]/route.js
@@ -54,7 +54,6 @@ export async function GET(req, context) {
     lesson_ids = query_lesson_ids.map((lesson_id) => lesson_id.id);
   }
 
-  console.log("status", status);
   const trades = await prisma.trade.findMany({
     where: {
       status: status,
@@ -72,10 +71,7 @@ export async function GET(req, context) {
     cursor: cursor,
     take: limit,
     skip: skip,
-    orderBy: {
-      id: "asc",
-    },
-
+    
     include: {
       from_student: {
         select: {
diff --git a/necchange/src/app/feed/page.jsx b/necchange/src/app/feed/page.jsx
index 2271858..3e86dee 100644
--- a/necchange/src/app/feed/page.jsx
+++ b/necchange/src/app/feed/page.jsx
@@ -6,33 +6,20 @@ import axios from "axios";
 import FeedPost from "@/components/Feed/Feed-Posts/FeedPost";
 import Loader from "@/components/globals/Loader";
 
-import { FaPlus } from "react-icons/fa6";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 import UCFilter from "@/components/Feed/Sidebar/Filters/UCFilter";
 import NewTradeButton from "@/components/Feed/Sidebar/NewTradeButton";
+import TimeFilter from "@/components/Feed/Sidebar/Filters/TimeFilter";
 
-const Posts = ({ filteredPosts, toggleLoader, getMorePosts }) => {
+const Posts = ({ filteredPosts, toggleLoader }) => {
   return (
-    <div>
-      <div className="w-full grid gap-6 mb-8">
-        {filteredPosts.map((feedPost, i) => {
+    <div className="w-full grid lg:grid-cols-2 gap-10">
+      {filteredPosts.map((feedPost, i) => {
         //  console.log("feedPost", feedPost);
-          return (
-            <FeedPost key={i} post={feedPost} toggleLoader={toggleLoader} />
-          );
-        })}
-      </div>
-
-      <div className="flex justify-center">
-        <button
-          className="flex items-center gap-2 rounded-full bg-blue-500 py-2 px-4 text-base capitalize font-semibold text-white"
-          onClick={getMorePosts}
-        >
-          <FaPlus /> carregar mais
-        </button>
-      </div>
+        return <FeedPost key={i} post={feedPost} toggleLoader={toggleLoader} />;
+      })}
     </div>
   );
 };
@@ -60,6 +47,8 @@ export default function Feed() {
   const [filteredPosts, setFilteredPosts] = useState([]);
   const [myTrades, setMyTrades] = useState(false);
 
+  const [timeFilter, setTimeFilter] = useState(false);
+
   const toggleLoader = (value) => {
     setLoader(value);
   };
@@ -78,75 +67,79 @@ export default function Feed() {
     checkTradePeriod();
   }, []);
 
-  
   // This effect is responsible to get the first posts that show on feed
   useEffect(() => {
     const startingFeed = async () => {
       try {
-        toggleLoader(true)
+        toggleLoader(true);
         axios
           .get(
-            `/api/feed/feed_post/${5}/landing/${
+            `/api/feed/feed_post/${6}/landing/${
               myTrades ? `/ ${session?.user?.number}` : "/undefined"
             }`
           )
           .then((res) => {
             setDbCursor(res.data.cursor);
             setFeedData(res.data.response);
-            toggleLoader(false)
+            toggleLoader(false);
           });
       } catch (error) {
         console.error("Error fetching data:", error);
-        toggleLoader(false)
+        toggleLoader(false);
       }
     };
 
     if (tradesOpen) startingFeed();
   }, [session, tradesOpen]);
 
-
   // This effect filters the posts already taken
   useEffect(() => {
-    let posts = []
+    let posts = [];
     // No filters, choose between personal or everything
-    if (ucsFilter.length == 0) { 
-      posts = feedPosts.filter((feedPost) =>
-        myTrades
-          ? feedPost.from_student.number == session.user.number
-          : true
-      );
-    
+    if (ucsFilter.length == 0) {
+      posts = feedPosts
+        .filter((feedPost) =>
+          myTrades ? feedPost.from_student.number === session.user.number : true
+        )
+        .sort((a, b) =>
+          timeFilter
+            ? new Date(a.publish_time) - new Date(b.publish_time)
+            : new Date(b.publish_time) - new Date(a.publish_time)
+        );
+    }
+
     // With filters (this body can be optimized)
-    } else {
-      posts = feedPosts.filter((feedPost) =>
-        ucsFilter.every((uc) =>
-          feedPost.trade_id
-            .map((trade) => trade.lessonFrom.course.name)
-            .includes(uc)
-        ) && (myTrades
-          ? feedPost.from_student.number == session.user.number
-          : feedPost.from_student.number != session.user.number )
+    else {
+      posts = feedPosts.filter(
+        (feedPost) =>
+          ucsFilter.every((uc) =>
+            feedPost.trade_id
+              .map((trade) => trade.lessonFrom.course.name)
+              .includes(uc)
+          ) &&
+          (myTrades
+            ? feedPost.from_student.number == session.user.number
+            : feedPost.from_student.number != session.user.number)
       );
     }
 
-    let new_cursor = 0
-    const post_ids = posts.map(post => post.id)
-    new_cursor = post_ids.length == 0 ? 1 : Math.max(...post_ids)
-    setDbCursor(new_cursor)
+    let new_cursor = 0;
+    const post_ids = posts.map((post) => post.id);
+    new_cursor = post_ids.length == 0 ? 1 : Math.max(...post_ids);
+    setDbCursor(new_cursor);
     setFilteredPosts(posts);
-
-  }, [myTrades, ucsFilter, feedPosts]);
+  }, [myTrades, ucsFilter, feedPosts, timeFilter]);
 
   // This function gets more posts from the database
   const getMorePosts = async () => {
-    toggleLoader(true)
+    toggleLoader(true);
     try {
       let query_filtered_ucs = ucsFilter.join("&");
       query_filtered_ucs = encodeURIComponent(query_filtered_ucs);
       //console.log(dbCursor);
       axios
         .get(
-          `/api/feed/feed_post/${5}/${dbCursor}${
+          `/api/feed/feed_post/${6}/${dbCursor}${
             myTrades ? `/${session?.user?.number}` : "/undefined"
           }/${query_filtered_ucs}`
         )
@@ -155,20 +148,40 @@ export default function Feed() {
             setDbCursor(res.data.cursor);
             setFeedData([...feedPosts, ...res.data.response]);
           } else {
-            toast.warning('Não há mais posts, de momento.');
+            toast.warning("Não há mais posts, de momento.");
           }
-          toggleLoader(false)
+          toggleLoader(false);
         });
     } catch (error) {
-      toggleLoader(false)
+      toggleLoader(false);
       console.error("Error fetching data:", error);
     }
   };
+  console.log(feedPosts, "feedPosts");
+
+  useEffect(() => {
+    const handleScroll = (e) => {
+      const scrollHeight = e.target.documentElement.scrollHeight;
+      const currentHeight =
+        e.target.documentElement.scrollTop + window.innerHeight;
+
+      if (currentHeight + 1 >= scrollHeight) {
+        getMorePosts();
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [getMorePosts]);
+
+  console.log(timeFilter, "timeFilter");
 
   return (
-    <div className="min-h-screen pt-40 pb-20 flex justify-center bg-white text-gray-900">
-      <div className="flex flex-col items-center mx-5 w-full max-w-4xl">
-        <div className="w-full flex flex-col sm:flex-row justify-between items-center gap-2 text-base font-semibold text-gray-900 mb-8">
+    <div className="min-h-screen pt-40 pb-20 flex flex-col gap-4 items-center bg-white text-gray-900">
+      <div className="flex flex-col items-center mx-5 w-[90%] max-w-6xl gap-8">
+        <p className="text-2xl font-bold text-start w-full ">TROCAS DE TURNO</p>
+        <div className="w-full flex flex-col gap-8 text-base font-semibold text-gray-900 mb-8">
           <div className="border-b w-full sm:w-auto grid grid-cols-2">
             <button
               className={`w-full sm:w-auto py-2 px-3 text-center transition duration-200 border-b-2 ${
@@ -192,29 +205,27 @@ export default function Feed() {
             </button>
           </div>
 
-          <div className="w-full sm:w-auto flex flex-col sm:flex-row gap-2">
-            <UCFilter
-              session={session}
-              setUcsFilter={setUcsFilter}
-              setUcsArray={setUcsArray}
-              ucsArray={ucsArray}
-              ucsFilter={ucsFilter}
-            />
-            {tradesOpen ? (
-              <div className="flex-grow">
+          <div className="w-full sm:w-auto flex flex-col justify-between items-center sm:flex-row gap-2">
+            <TimeFilter setTimeFilter={setTimeFilter} />
+            <div className="flex sm:flex-row flex-col gap-4  w-full sm:w-auto">
+              <UCFilter
+                session={session}
+                setUcsFilter={setUcsFilter}
+                setUcsArray={setUcsArray}
+                ucsArray={ucsArray}
+                ucsFilter={ucsFilter}
+              />
+              {tradesOpen ? (
                 <NewTradeButton toggleLoader={toggleLoader} />
-              </div>
-            ) : (
-              <></>
-            )}
+              ) : (
+                <></>
+              )}
+            </div>
           </div>
         </div>
+
         {tradesOpen ? (
-          <Posts
-            filteredPosts={filteredPosts}
-            toggleLoader={toggleLoader}
-            getMorePosts={getMorePosts}
-          />
+          <Posts filteredPosts={filteredPosts} toggleLoader={toggleLoader} />
         ) : tradesOpen == false ? (
           <TradesClosed />
         ) : (
diff --git a/necchange/src/components/Feed/Feed-Posts/FeedPost.jsx b/necchange/src/components/Feed/Feed-Posts/FeedPost.jsx
index fd79139..d4c426b 100644
--- a/necchange/src/components/Feed/Feed-Posts/FeedPost.jsx
+++ b/necchange/src/components/Feed/Feed-Posts/FeedPost.jsx
@@ -8,13 +8,12 @@ import Badge from "../../globals/Badge";
 // há x tempo atrás
 import moment from "moment";
 import "moment/locale/pt";
-import Status from '@prisma/client'
 
 const statusMap = {
   ACCEPTED: ["Aceite", "green"],
   PENDING: ["Pendente", "yellow"],
   REMOVED: ["Removido", "red"],
-  ERROR: ["Não é possível", "red"]
+  ERROR: ["Não é possível", "red"],
 };
 
 const type_class = {
@@ -23,16 +22,15 @@ const type_class = {
   3: "PL",
 };
 
-
 export default function FeedPost({ post, toggleLoader }) {
   const { data: session } = useSession();
-  const isWatchingOwnPost = session.user.number === post.from_student.number;
+  const isWatchingOwnPost = session.user.number === post.from_student.number; 
   const fromStudentNr = post.from_student.number;
   const tradeId = post.id;
 
   /* variable status is an array */
-  const [status, setStatus] = useState(statusMap[post.status])
-  const [clicked, setClicked] = useState(false)
+  const [status, setStatus] = useState(statusMap[post.status]);
+  const [clicked, setClicked] = useState(false);
 
   const acceptTrade = () => {
     toggleLoader(true);
@@ -40,22 +38,21 @@ export default function FeedPost({ post, toggleLoader }) {
       .post(`/api/feed/feed_post/accept_trade`, {
         params: {
           fromStudentNr: fromStudentNr,
-          studentAcceptedNr: session?.user.number ,
+          studentAcceptedNr: session?.user.number,
           tradeId: tradeId,
         },
       })
       .then((res) => {
         if (res.data.response == true) {
           toast.success("Troca realizada com sucesso!");
-          post.status = "ACCEPTED"
-          setStatus(statusMap["ACCEPTED"])
-
+          post.status = "ACCEPTED";
+          setStatus(statusMap["ACCEPTED"]);
         } else {
           toast.error("Não é possível realizar a troca! Turnos incompatíveis.");
-          post.status = "ERROR"
-          setStatus(statusMap["ERROR"])
+          post.status = "ERROR";
+          setStatus(statusMap["ERROR"]);
         }
-        setClicked(!clicked)
+        setClicked(!clicked);
         toggleLoader(false);
       })
       .catch((err) => {
@@ -72,8 +69,8 @@ export default function FeedPost({ post, toggleLoader }) {
       .then((res) => {
         toggleLoader(false);
         toast.success("Pedido de troca removido!");
-        post.status = "ACCEPTED"
-        setStatus(statusMap["ACCEPTED"])
+        post.status = "ACCEPTED";
+        setStatus(statusMap["ACCEPTED"]);
       })
       .catch((err) => {
         toggleLoader(false);
@@ -81,32 +78,17 @@ export default function FeedPost({ post, toggleLoader }) {
         console.log(err);
       });
 
-      setClicked(!clicked)
+    setClicked(!clicked);
   };
-/*
-  useEffect(() => {
-    const cena = () => {
-      console.log("own post:", isWatchingOwnPost);
-      console.log("post_id: ", post.id);
-      console.log("status", status);
-    }
-
-    cena()
-  }, [])
-*/
   return (
-    <div className="rounded-md text-base bg-white p-6 border shadow w-full grid gap-8">
-      <div className="flex items-center justify-between gap-2">
-        <p className="">
-          Solicitado por{" "}
-          <strong className="text-lg font-semibold">{fromStudentNr}</strong> há{" "}
-          {moment(post.publish_time).fromNow(true)} atrás
-        </p>
-
-        { (isWatchingOwnPost || clicked) && <Badge variant={status[1]}>{status[0]}</Badge>}
+    <div className="rounded-[20px] text-base bg-white border shadow flex flex-col overflow-hidden">
+      <div className="flex items-center justify-between gap-2 p-6">
+        <p className="text-lg font-semibold">{fromStudentNr}</p> há{" "}
+        {moment(post.publish_time).fromNow(true)} atrás
+        {/*  { (isWatchingOwnPost || clicked) && <Badge variant={status[1]}>{status[0]}</Badge>} */}
       </div>
 
-      <div className="grid">
+      <div className="grid p-6">
         {post.trade_id.map((lesson_trade, i) => {
           const { year, name } = lesson_trade.lessonFrom.course;
           const type = type_class[lesson_trade.lessonFrom.type];
@@ -121,7 +103,7 @@ export default function FeedPost({ post, toggleLoader }) {
 
           return (
             <div
-              className="grid grid-cols-2 items-center py-1 w-full border-b last:border-none"
+              className="grid grid-cols-2 py-1"
               key={i}
             >
               <p className="font-semibold">
@@ -129,16 +111,18 @@ export default function FeedPost({ post, toggleLoader }) {
                 {name}
               </p>
               <div className="flex justify-end">
-                <div className="ml-2 flex items-baseline gap-3">
-                  <p className="">
-                    {fromStudentNr}{" "}
-                    <span className="font-semibold">{from}</span>
-                  </p>
+                <div className="ml-2 flex items-center gap-3">
+                  <div className="flex flex-col items-center justify-center">
+                    <p className="font-semibold">{from}</p>
+                    <p>{fromStudentNr} </p>
+                  </div>
+
                   <FaArrowRightArrowLeft className="text-[11px] text-blue-900" />
-                  <p className="">
-                    <span className="font-semibold">{to}</span>{" "}
-                    {isWatchingOwnPost ? "Axxxxx" : session?.user.number}
-                  </p>
+
+                  <div className="flex flex-col items-center justify-center">
+                    <p className="font-semibold">{to}</p>
+                    <p>{isWatchingOwnPost ? "Axxxxx" : session?.user.number}</p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -146,11 +130,11 @@ export default function FeedPost({ post, toggleLoader }) {
         })}
       </div>
 
-      <div className={`${clicked ? 'hidden': ''} flex justify-end`}>
+      <div className={`${clicked ? "hidden" : ""} h-full flex items-end `}>
         {isWatchingOwnPost ? (
           status[0] == "Pendente" && (
             <button
-              className={`py-2 px-4 bg-red-600 hover:bg-red-500 font-bold text-white rounded-lg`}
+              className={`py-2 w-full h-auto bg-red-100 hover:bg-red-200 font-bold text-red-700 `}
               onClick={removeTrade}
             >
               Remover Troca
@@ -158,7 +142,7 @@ export default function FeedPost({ post, toggleLoader }) {
           )
         ) : (
           <button
-            className={`py-2 px-4 bg-blue-500 hover:bg-blue-600 font-bold text-white rounded-lg`}
+            className={`py-2 w-full h-auto bg-indigo-100 hover:bg-indigo-200 font-bold text-indigo-700`}
             onClick={acceptTrade}
           >
             Trocar
diff --git a/necchange/src/components/Feed/Sidebar/Filters/TimeFilter.jsx b/necchange/src/components/Feed/Sidebar/Filters/TimeFilter.jsx
new file mode 100644
index 0000000..4a1fd2d
--- /dev/null
+++ b/necchange/src/components/Feed/Sidebar/Filters/TimeFilter.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { FiChevronDown } from "react-icons/fi";
+
+export default function TimeFilter(props) {
+  const { setTimeFilter } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+
+  // function to change the filter state
+  const handleFilter = (e) => {
+    setTimeFilter(e.target.checked);
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-30 bg-transparent"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+      <div className="flex flex-col w-full sm:w-40 text-base cursor-pointer">
+        <div
+          className="flex items-center justify-between bg-gray-50 border px-2 py-1 rounded font-semibold text-gray-500"
+          onClick={toggleIsOpen}
+        >
+          <p className="font-semibold">Mais Recente</p>
+          <FiChevronDown
+            className={`w-6 h-6 transition-all duration-300 ${
+              isOpen ? "rotate-180" : "rotate-0"
+            }`}
+          />
+        </div>
+
+        <div className={`relative z-40 ${!isOpen && "hidden"}`}>
+          <form className="w-full sm:w-40 absolute shadow-sm border border-gray-300 rounded py-1 bg-white accent-blue-500 flex flex-col">
+            <label className="cursor-pointer hover:bg-gray-100 p-1">
+              <input type="checkbox" onChange={handleFilter} className="mr-1" />
+              Mais Antigo
+            </label>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/necchange/src/components/Feed/Sidebar/Filters/UCFilter.jsx b/necchange/src/components/Feed/Sidebar/Filters/UCFilter.jsx
index a610a06..5bb292c 100644
--- a/necchange/src/components/Feed/Sidebar/Filters/UCFilter.jsx
+++ b/necchange/src/components/Feed/Sidebar/Filters/UCFilter.jsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
 import { FiChevronDown } from "react-icons/fi";
 import axios from "axios";
-
+import { FaFilter } from "react-icons/fa";
 
 export default function UCFilter(props) {
-  const { session, ucsArray, ucsFilter, setUcsFilter, setUcsArray} = props;
+  const { session, ucsArray, ucsFilter, setUcsFilter, setUcsArray } = props;
 
   const [isOpen, setIsOpen] = useState(false);
   const toggleIsOpen = () => setIsOpen(!isOpen);
@@ -24,15 +24,16 @@ export default function UCFilter(props) {
   useEffect(() => {
     const uc_names = async () => {
       try {
-        axios.get(`/api/users/user_ucs/${session?.user?.number}`).then((res) => {
-          setUcsArray(res.data.student_classes);
-        });
+        axios
+          .get(`/api/users/user_ucs/${session?.user?.number}`)
+          .then((res) => {
+            setUcsArray(res.data.student_classes);
+          });
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     };
     uc_names();
-    
   }, [session]);
 
   return (
@@ -45,20 +46,16 @@ export default function UCFilter(props) {
       )}
       <div className="flex flex-col w-full sm:w-72 text-base cursor-pointer">
         <div
-          className="flex items-center justify-between bg-gray-50 border px-2 py-1 rounded"
+          className="flex items-center justify-center gap-2 bg-gray-50 border-2 px-3 py-3 font-semibold text-gray-500 rounded-lg"
           onClick={toggleIsOpen}
         >
-          <strong className="font-semibold">Unidade Curricular</strong>
-          <FiChevronDown
-            className={`w-6 h-6 transition-all duration-300 ${
-              isOpen ? "rotate-180" : "rotate-0"
-            }`}
-          />
+          <FaFilter color="gray" size={20} />
+          <p clas>Filtrar</p>
         </div>
 
         {/* escolhida esta approach porque não é guardado o estado das checkboxes */}
         <div className={`relative z-40 ${!isOpen && "hidden"}`}>
-          <form className="w-full sm:w-72 absolute shadow-sm border border-gray-300 rounded py-1 bg-white accent-blue-500 flex flex-col">
+          <form className="w-full sm:w-72 absolute shadow-sm border border-gray-300 rounded-lg py-1 bg-white accent-blue-500 flex flex-col">
             {ucsArray.map((uc, index) => (
               <label
                 key={index}
diff --git a/necchange/src/components/Feed/Sidebar/NewTradeButton.jsx b/necchange/src/components/Feed/Sidebar/NewTradeButton.jsx
index 85d795d..94d8907 100644
--- a/necchange/src/components/Feed/Sidebar/NewTradeButton.jsx
+++ b/necchange/src/components/Feed/Sidebar/NewTradeButton.jsx
@@ -6,6 +6,7 @@ import { toast } from "react-toastify";
 import Modal from "@/components/globals/Modal";
 import TradeEntry from "./NewTrade/popUp/TradeEntry";
 import { useSession } from "next-auth/react";
+import { CiCirclePlus } from "react-icons/ci";
 
 const emptyTrade = {
   id: 0,
@@ -44,13 +45,12 @@ export default function NewTrade({ toggleLoader }) {
   const [enrolledClasses, setEnrolledClasses] = useState({});
   const [availableClasses, setAvailableClasses] = useState({});
   const { data: session } = useSession();
-  
+
   useEffect(() => {
     axios
       .get(`/api/users/user_courses/${session?.user.number}`)
       .then((response) => {
         const data = response.data.student_ucs;
-        console.log(data);
         const parsed = data.reduce((acc, { lesson }) => {
           if (!acc[lesson.course.name]) {
             acc[lesson.course.name] = {
@@ -112,7 +112,7 @@ export default function NewTrade({ toggleLoader }) {
   };
 
   const removeTrade = (id) => {
-  //  console.log("Removing trade", id);
+    //  console.log("Removing trade", id);
     const newTrades = trades.filter((trade) => trade.id != id);
     setTrades(newTrades);
   };
@@ -139,10 +139,10 @@ export default function NewTrade({ toggleLoader }) {
     if (format_validator(trades) == true) {
       axios
         .post("/api/feed/feed_post/add_trade", {
-          params: { trades: trades, student_nr: session?.user.number},
+          params: { trades: trades, student_nr: session?.user.number },
         })
         .then((response) => {
-        //  console.log(response);
+          //  console.log(response);
           toggleLoader(false);
           toast.success("Pedido de troca realizado!");
         })
@@ -158,13 +158,23 @@ export default function NewTrade({ toggleLoader }) {
 
   return (
     <>
-      <button
-        className="w-full sm:w-auto py-1 px-3 rounded-md text-blue-600 font-semibold border hover:bg-gray-100"
+      <div
+        className="flex flex-row items-center justify-center bg-blue-600 hover:bg-blue-500 border py-3 px-3 gap-2 cursor-pointer text-white font-semibold rounded-lg"
         onClick={() => setShowModal(true)}
       >
-        Nova Troca
-      </button>
+        <div className="bg-white rounded-full">
+          <CiCirclePlus size={20} color="blue" />
+        </div>
+        <p>Nova Troca</p>
+      </div>
 
+      {/*    div
+          className="flex items-center justify-center gap-2 bg-gray-50 border-2 px-3 py-3 "
+          onClick={toggleIsOpen}
+        >
+          <FaFilter color="gray" size={20} />
+          <p className="font-semibold text-gray">Filtrar</p>
+ */}
       <Modal
         showModal={showModal}
         setShowModal={setShowModal}