diff --git a/package-lock.json b/package-lock.json
index ca474c4..8d3d710 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-markdown": "^9.0.1",
         "styled-components": "^6.1.11"
       },
       "devDependencies": {
@@ -5914,6 +5915,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/detect-port": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.5.tgz",
@@ -5953,8 +5962,15 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -6000,7 +6016,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
       "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "*"
       }
@@ -6023,6 +6038,14 @@
       "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==",
       "dev": true
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -6041,6 +6064,11 @@
       "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
       "dev": true
     },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
     "node_modules/@types/node": {
       "version": "18.19.39",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.39.tgz",
@@ -6065,8 +6093,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.15",
@@ -6084,7 +6111,6 @@
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -6140,8 +6166,7 @@
     "node_modules/@types/unist": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
-      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==",
-      "dev": true
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
     },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
@@ -6337,8 +6362,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@vitejs/plugin-react-swc": {
       "version": "3.7.0",
@@ -6758,6 +6782,15 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -7057,6 +7090,15 @@
         }
       ]
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
@@ -7091,6 +7133,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
@@ -7272,6 +7350,15 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -7503,7 +7590,6 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -7516,6 +7602,18 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
@@ -7624,7 +7722,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -7683,6 +7780,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/diff": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -8341,6 +8450,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -8460,6 +8578,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9259,6 +9382,32 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
+      "integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-string": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
@@ -9272,6 +9421,18 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -9290,6 +9451,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
+      "integrity": "sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -9407,6 +9577,11 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
+      "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9437,6 +9612,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -9498,6 +9695,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-deflate": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz",
@@ -9573,6 +9779,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@@ -9616,6 +9831,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -9989,6 +10215,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -10078,6 +10313,151 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
+      "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
+      "integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
+      "integrity": "sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-remove-position": "^5.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10126,30 +10506,451 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
+    "node_modules/micromark": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+      "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.1.tgz",
+      "integrity": "sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+      "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+      "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+      "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+      "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+      "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+      "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+      "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+      "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+      "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+      "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.1.tgz",
+      "integrity": "sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
     },
     "node_modules/mime-db": {
       "version": "1.52.0",
@@ -10287,8 +11088,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
@@ -10825,6 +11625,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -11183,6 +12007,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -11416,6 +12249,31 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
@@ -11785,6 +12643,37 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/requireindex": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
@@ -12154,7 +13043,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -12268,6 +13156,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -12338,6 +13239,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
+      "integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+      "dependencies": {
+        "inline-style-parser": "0.2.3"
+      }
+    },
     "node_modules/styled-components": {
       "version": "6.1.11",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz",
@@ -12671,6 +13580,24 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -12869,6 +13796,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unique-string": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-3.0.0.tgz",
@@ -12888,7 +13833,43 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
       "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
-      "dev": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
       "dependencies": {
         "@types/unist": "^3.0.0"
       },
@@ -12901,7 +13882,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
       "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0",
@@ -12916,7 +13896,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
       "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0"
@@ -13122,6 +14101,33 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.2.tgz",
+      "integrity": "sha512-zND7NlS8rJYb/sPqkb13ZvbbUoExdbi4w3SfRrMq6R3FvnLQmmfpajJNITuuYm6AZ5uao9vy4BAos3EXBPf2rg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.2.tgz",
@@ -13440,6 +14446,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 1678da0..e7514e2 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
@@ -39,4 +40,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index f0d07cb..1247853 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -3,24 +3,41 @@ import styled from "styled-components";
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
 }
-export function ColumnComponent({ title, children }: ColumnProps) {
+export function ColumnComponent({ title, children, ...rest }: ColumnProps) {
   return (
-    <Container>
+    <Container {...rest}>
       <Header>{title}</Header>
-      {children}
+      <InnerContainer>{children}</InnerContainer>
     </Container>
   );
 }
 
-const Container = styled.div`
-  position: relative;
-  background-color: #f5f6f7;
+const InnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+
+  @media screen and (max-width: 960px) {
+    flex-direction: row;
+    flex-flow: wrap;
+    gap: 1rem;
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+  height: fit-content;
+  background-color: #f5f6f7;
   padding: 1rem;
   border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+
+  @media screen and (max-width: 960px) {
+    width: 100%;
+  }
 `;
 
 const Header = styled.div`
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index fec65fc..c84a20b 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,37 +1,56 @@
 import styled from "styled-components";
 import { Circle } from "./Progress/Circle";
+import { useMedia } from "../utils/useMedia";
+import { useMemo } from "react";
+import { useCssRemSize } from "../utils/useCssRemSize";
 
 export function Profile() {
+  const rem = useCssRemSize();
+  const bold = useMedia("(max-width: 960px)");
+  const thin = useMedia("(max-width: 768px)");
+  const narrow = useMedia("(max-width: 572px)");
+  const ringSize = useMemo(() => {
+    if (narrow) return 4 * rem;
+    if (thin) return 6 * rem;
+    if (bold) return 8 * rem;
+    return 4 * rem;
+  }, [bold, narrow, rem, thin]);
   return (
     <Wrapper>
-      <Icon
-        src="https://avatars.githubusercontent.com/u/16500109?v=4&size=128"
-        alt="Icon"
-      />
-      <Text>
-        Ziyu "Rion" Tao
-        <br />
-        <Sub>Software Engineer</Sub>
-        <br />
-        <Third>Undergraduate: ANU</Third>
-      </Text>
-      <SkillContainer>
-        <Circle progress={0.6} label="JSX" />
-        <Circle progress={0.9} label="TS" />
-        <Circle progress={0.2} label="Python" />
-      </SkillContainer>
-      <SkillContainer>
-        <Circle progress={0.5} label="Agile" />
-        <Circle progress={0.8} label="Steam" />
-        <Circle progress={1} label="Sincere" />
-      </SkillContainer>
+      <SubContainer>
+        <Icon
+          src="https://avatars.githubusercontent.com/u/16500109?v=4&size=128"
+          alt="Icon"
+        />
+        <Text>
+          Ziyu "Rion" Tao
+          <br />
+          <Sub>Software Engineer</Sub>
+          <br />
+          <Third>Undergraduate: ANU</Third>
+        </Text>
+      </SubContainer>
+      <SubContainer>
+        <SkillContainer style={{ marginBottom: "0.4rem" }}>
+          <Circle size={ringSize} progress={0.6} label="JSX" />
+          <Circle size={ringSize} progress={0.9} label="TS" />
+          <Circle size={ringSize} progress={0.2} label="Python" />
+        </SkillContainer>
+        <SkillContainer>
+          <Circle size={ringSize} progress={0.5} label="Agile" />
+          <Circle size={ringSize} progress={0.8} label="Steam" />
+          <Circle size={ringSize} progress={1} label="Sincere" />
+        </SkillContainer>
+      </SubContainer>
     </Wrapper>
   );
 }
 
+const SubContainer = styled.div``;
+
 const SkillContainer = styled.div`
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   font-size: 0.8rem;
   padding: 0.3rem;
 `;
@@ -73,8 +92,21 @@ const Wrapper = styled.div`
   padding: 1rem;
   background-color: rgb(39, 33, 46);
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
+    position: relative;
+    width: fit-content;
+    flex-direction: row;
+    padding-bottom: 1rem;
+    gap: 2rem;
+    height: fit-content;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 1rem;
+    justify-content: space-around;
+  }
+
+  @media screen and (max-width: 572px) {
     position: relative;
+    flex-direction: column;
     width: 16rem;
     padding-bottom: 2rem;
     height: fit-content;
diff --git a/src/components/Progress/Circle.tsx b/src/components/Progress/Circle.tsx
index e95e1ea..1b48ceb 100644
--- a/src/components/Progress/Circle.tsx
+++ b/src/components/Progress/Circle.tsx
@@ -4,35 +4,48 @@ interface Props {
   style?: React.CSSProperties;
   progress: number;
   label?: React.ReactNode;
+  /** @unit px */
+  size?: number;
 }
-export function Circle({ style, progress, label }: Props) {
-  const angle = 360 - progress * 208;
+// reference: https://nikitahl.github.io/svg-circle-progress-generator/
+export function Circle({ style, progress, label, size = 50 }: Props) {
+  const realSize = size + 2;
+  const y = size * Math.PI;
+  const prog = y * (1 - progress);
   return (
-    <Wrapper style={style}>
-      <svg width="4rem" height="4rem" style={{ position: "absolute" }}>
+    <Wrapper $size={realSize} style={style}>
+      <svg
+        width={size + 20}
+        height={size + 20}
+        style={{ position: "absolute", transition: "all 0.3s ease-out" }}
+      >
         <circle
-          cx="2rem"
-          cy="2rem"
-          r="1.8rem"
+          cx={size / 2 + 10}
+          cy={size / 2 + 10}
+          r={size / 2}
           fill="transparent"
           stroke="white"
+          style={{
+            transition: "all 0.3s ease-out",
+          }}
           opacity={0.6}
-          strokeWidth="4"
+          strokeWidth="3"
         />
         <circle
-          cx="2rem"
-          cy="2rem"
-          r="1.8rem"
+          cx={size / 2 + 10}
+          cy={size / 2 + 10}
+          r={size / 2}
           fill="transparent"
           stroke="white"
-          strokeWidth="5"
+          strokeWidth="4"
           strokeLinecap="round"
           style={{
             transformOrigin: "center",
             transform: `rotate(${-90}deg)`,
+            transition: "all 0.3s ease-out",
           }}
-          strokeDasharray={100 * Math.PI}
-          strokeDashoffset={((100 * Math.PI) / 360) * angle}
+          strokeDasharray={`${y}px`}
+          strokeDashoffset={`${prog}px`}
         />
       </svg>
       {label ?? `${(progress * 100).toFixed(0)}%`}
@@ -40,11 +53,12 @@ export function Circle({ style, progress, label }: Props) {
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $size?: number }>`
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 4rem;
-  height: 4rem;
+  width: ${({ $size: size = 4 }) => `${size}`}px;
+  height: ${({ $size: size = 4 }) => `${size}`}px;
+  transition: all 0.3s ease-out;
 `;
diff --git a/src/components/StoryCard/StoryCard.tsx b/src/components/StoryCard/StoryCard.tsx
index 5a9932c..31b6c7a 100644
--- a/src/components/StoryCard/StoryCard.tsx
+++ b/src/components/StoryCard/StoryCard.tsx
@@ -8,28 +8,40 @@ export function StoryCardComponent({
   title,
   description,
   ...props
-}: StoryCardProps) {
+}: StoryCardProps & { $cardSize?: number }) {
+  const color = hex2rgba(colors[status as StatusType], 1);
   return (
     <Container
       {...props}
       style={{
-        backgroundColor: hex2rgba(colors[status as StatusType], 1),
+        backgroundColor: color,
         ...(!description ? { height: "auto" } : {}),
         ...props.style,
       }}
     >
       <Title>{title}</Title>
       {!!description && <Desc>{description}</Desc>}
+      <Gradient $color={color} />
       <SideBar style={{ backgroundColor: colors[type as CardType] }} />
     </Container>
   );
 }
 
+const Gradient = styled.div<{ $color?: string }>`
+  position: absolute;
+  bottom: 0.4rem;
+  left: 0;
+  width: 100%;
+  height: 3rem;
+  background: ${({ $color }) =>
+    `linear-gradient(0deg, ${$color || "#ffffff"} 0%, #00000000 100%)`};
+`;
+
 const CARD_SIZE = 200;
-const Container = styled.div`
+const Container = styled.div<{ $cardSize?: number }>`
   position: relative;
-  width: ${CARD_SIZE}px;
-  height: ${CARD_SIZE * 0.618}px;
+  width: ${({ $cardSize = CARD_SIZE }) => $cardSize}px;
+  height: ${({ $cardSize = CARD_SIZE }) => $cardSize * 0.6}px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -42,9 +54,11 @@ const Container = styled.div`
   overflow: hidden;
   cursor: pointer;
   opacity: 0.6;
+  flex-shrink: 0;
   transition:
-    opacity,
-    0.15s ease-out;
+    opacity 0.15s ease-out,
+    width 0.3s ease-out,
+    height 0.3s ease-out;
 
   &:hover {
     opacity: 1;
diff --git a/src/components/StoryCard/StoryCardDialog.tsx b/src/components/StoryCard/StoryCardDialog.tsx
index 4ed2434..1776104 100644
--- a/src/components/StoryCard/StoryCardDialog.tsx
+++ b/src/components/StoryCard/StoryCardDialog.tsx
@@ -1,19 +1,78 @@
 import styled from "styled-components";
-import { StoryCardProps } from "./common";
+import { CardType, colors, StoryCardProps } from "./common";
 import cross from "../../assets/cross.svg";
 import back from "../../assets/back.svg";
+import Markdown from "react-markdown";
 
-export function StoryCardDialog(
-  props: StoryCardProps & { onClose: () => void }
-) {
+export function StoryCardDialog({
+  title,
+  description,
+  onClose,
+  type,
+  ...rest
+}: StoryCardProps & { onClose: () => void }) {
   return (
-    <Wrapper>
-      <Cross onClick={props.onClose} />
-      <Back onClick={props.onClose} />
+    <Wrapper
+      onWheel={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      {...rest}
+    >
+      <ContentWrapper>
+        <Title>{title}</Title>
+        <Summary>
+          <Markdown>{description}</Markdown>
+        </Summary>
+      </ContentWrapper>
+      <SideBar style={{ backgroundColor: colors[type as CardType] }} />
+      <Cross onClick={onClose} />
+      <Back onClick={onClose} />
     </Wrapper>
   );
 }
 
+const SideBar = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1rem;
+  height: 100%;
+  opacity: 0.4;
+`;
+
+const ContentWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 70%;
+
+  @media screen and (max-width: 960px) {
+    width: 95%;
+  }
+`;
+
+const Summary = styled.div`
+  opacity: 0.8;
+  height: 0;
+  flex: 1;
+  overflow-y: scroll;
+`;
+
+const Title = styled.h2`
+  padding: 0;
+  margin: 0;
+  font-size: 1.2rem;
+  line-height: 1.8;
+  font-weight: 600;
+  border-bottom: 1px solid #ccc;
+
+  @media screen and (max-width: 960px) {
+    margin-left: 2rem;
+  }
+`;
+
 const Cross = styled.img.attrs({ src: cross })`
   width: 24px;
   height: 24px;
@@ -22,7 +81,7 @@ const Cross = styled.img.attrs({ src: cross })`
   right: 2rem;
   cursor: pointer;
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
     display: none;
   }
 `;
@@ -33,10 +92,10 @@ const Back = styled.img.attrs({ src: back })`
   height: 2rem;
   position: absolute;
   top: 1rem;
-  left: 1rem;
+  left: 1.5rem;
   cursor: pointer;
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
     display: block;
   }
 `;
@@ -44,16 +103,26 @@ const Back = styled.img.attrs({ src: back })`
 const Wrapper = styled.div`
   position: relative;
   display: flex;
-  width: 80%;
-  height: 80%;
+  width: 80vw;
+  max-width: 80vw;
+  min-height: 60vh;
   min-width: 320px;
   min-height: 500px;
+  max-height: 95%;
   background: white;
-  border-radius: 2rem;
+  border-radius: 1rem;
+  padding: 2rem;
+  filter: drop-shadow(0px 0px 2px #ededed);
+  overflow: hidden;
+  color: #333;
 
-  @media screen and (max-width: 768px) {
+  @media (max-width: 960px) or (max-height: 500px) {
     width: 100%;
+    max-width: unset;
     height: 100%;
+    padding: 0;
+    padding-left: 2rem;
+    padding-top: 1rem;
     border-radius: 0;
   }
 `;
diff --git a/src/components/StoryCard/common.ts b/src/components/StoryCard/common.ts
index fd2227b..05dd269 100644
--- a/src/components/StoryCard/common.ts
+++ b/src/components/StoryCard/common.ts
@@ -1,8 +1,8 @@
 export interface StoryCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description: string;
-  status: StatusType | ({} & string);
-  type: CardType | ({} & string);
+  status: StatusType | NonNullable<string>;
+  type: CardType | NonNullable<string>;
 }
 
 export type CardType = "legendary" | "epic" | "story" | "task";
diff --git a/src/documents/my-board.json b/src/documents/my-board.json
index 9ea8207..24e935a 100644
--- a/src/documents/my-board.json
+++ b/src/documents/my-board.json
@@ -21,7 +21,7 @@
       "type": "epic",
       "key": "sr-survivor",
       "title": "星铁幸存者-银河棒球侠传奇",
-      "description": "根据吸血鬼幸存者和星铁活动资料复刻一个基于pixi的小游戏。\n\n进度：\n [x] 基础的怪物数据\n [x] 怪物基础逻辑\n - [x] 被击退\n - [x] 伤害玩家\n - [x] 向玩家移动的行为\n - [x] 受到伤害，死亡掉落经验球\n - [x] 经验球可拾取\n - [x] 拾取时的加速度效果\n - [ ] 固定移动行为\n - [ ] 特殊个体\n - [ ] 不同的怪物种类与数据设计\n [x]玩家\n - [x] 方向键移动\n - [x] 受伤\n - [ ] 升级\n - [ ] 特殊技能\n - [ ] 多个角色的设计，和他们不同的特殊能力\n [x] 武器\n - [x] 基础武器循环\n - [x]可升级\n - [x]可在怪物间弹跳的雷电荆棘\n - [x] 闪电特效绘制\n - [ ] 投射物\n - [ ] 风暴之弓\n - [ ] 还原其他活动内设定武器\n - [ ] 武器进化\n - [ ] 被动装备\n [x] UI\n - [x] 升级界面复刻\n - [ ] 游戏开始菜单\n - [ ] 金币升级机制和菜单\n - [ ] 暂停菜单\n - [ ] UI状态控制\n - [ ] 结算画面与元素\n - [ ] 游戏内反馈\n - [ ] 过关界面\n - [ ] 其他可能的地方\n\n suspend: lack of motivation"
+      "description": "根据吸血鬼幸存者和星铁活动资料复刻一个基于pixi的小游戏。\n\n进度：\n\n [x] 基础的怪物数据\n\n [x] 怪物基础逻辑\n - [x] 被击退\n - [x] 伤害玩家\n - [x] 向玩家移动的行为\n - [x] 受到伤害，死亡掉落经验球\n - [x] 经验球可拾取\n - [x] 拾取时的加速度效果\n - [ ] 固定移动行为\n - [ ] 特殊个体\n - [ ] 不同的怪物种类与数据设计\n\n [x] 玩家\n - [x] 方向键移动\n - [x] 受伤\n - [ ] 升级\n - [ ] 特殊技能\n - [ ] 多个角色的设计，和他们不同的特殊能力\n [x] 武器\n - [x] 基础武器循环\n - [x]可升级\n - [x]可在怪物间弹跳的雷电荆棘\n - [x] 闪电特效绘制\n - [ ] 投射物\n - [ ] 风暴之弓\n - [ ] 还原其他活动内设定武器\n - [ ] 武器进化\n - [ ] 被动装备\n\n [x] UI\n - [x] 升级界面复刻\n - [ ] 游戏开始菜单\n - [ ] 金币升级机制和菜单\n - [ ] 暂停菜单\n - [ ] UI状态控制\n - [ ] 结算画面与元素\n - [ ] 游戏内反馈\n - [ ] 过关界面\n - [ ] 其他可能的地方\n\n suspend: lack of motivation"
     },
     {
       "status": "suspend",
diff --git a/src/documents/my-skill.json b/src/documents/my-skill.json
index e321166..42b292e 100644
--- a/src/documents/my-skill.json
+++ b/src/documents/my-skill.json
@@ -27,13 +27,6 @@
       "key": "styled-components",
       "title": "✨ styled-components@^6, css-modules",
       "description": " - pro inline styles, separated files for reuse only\n - style - function separation\n - static style > dynamic style\n - quick dose of dopamine"
-    },
-    {
-      "status": "done",
-      "type": "task",
-      "key": "sibling-portal",
-      "title": "React Portal",
-      "description": " - I'm Loving It\n - for many sibling components"
     }
   ],
   "experienced": [
@@ -58,6 +51,13 @@
       "title": "LLM Prompting, workflow building",
       "description": " - Prompt structrual building for expert task\n - project base on openai-api\n - standalone base on ollama and dify\n - knowledge compression, embedding and retrieval\n - learning fine-tuning"
     },
+    {
+      "status": "done",
+      "type": "task",
+      "key": "sibling-portal",
+      "title": "React Portal",
+      "description": " - I'm Loving It\n - for many sibling components"
+    },
     {
       "status": "suspend",
       "type": "task",
@@ -70,7 +70,7 @@
       "type": "story",
       "key": "python",
       "title": "✨ Python as Data Sciencist, FastApi@latest",
-      "description": " - used as a micro-web-service handler \n - restful & websocket\n - seeking for modern engineering architecture\n - \n - data processing, pre & post"
+      "description": " - used as a micro-web-service handler \n - restful & websocket\n - seeking for modern engineering architecture\n - data processing, pre & post"
     }
   ],
   "used": [
diff --git a/src/pages/Board/idea.tsx b/src/pages/Board/idea.tsx
index 232eb1c..367ce9f 100644
--- a/src/pages/Board/idea.tsx
+++ b/src/pages/Board/idea.tsx
@@ -1,31 +1,67 @@
+import { useState } from "react";
 import { ColumnComponent } from "../../components/Column";
+import { DialogWrapper } from "../../components/DialogWrapper";
 import { StoryCardComponent } from "../../components/StoryCard";
+import { StoryCardProps } from "../../components/StoryCard/common";
+import { StoryCardDialog } from "../../components/StoryCard/StoryCardDialog";
 import docs from "../../documents/my-board.json";
 import { BoardComponent } from "./styles";
+import styled from "styled-components";
 
-export function Idea() {
+interface Props {
+  done?: boolean;
+  working?: boolean;
+  todo?: boolean;
+  suspend?: boolean;
+}
+export function Idea({
+  done = true,
+  working = true,
+  todo = false,
+  suspend = false,
+}: Props) {
+  const [dialog, setDialog] = useState<StoryCardProps>();
   return (
     <BoardComponent>
-      <ColumnComponent title="✒️先写着">
-        {docs.todo.map((e) => (
-          <StoryCardComponent {...e} />
-        ))}
-      </ColumnComponent>
-      <ColumnComponent title="😎在做了">
-        {docs.working.map((e) => (
-          <StoryCardComponent {...e} />
-        ))}
-      </ColumnComponent>
-      <ColumnComponent title="⏳卡住了">
-        {docs.suspend.map((e) => (
-          <StoryCardComponent {...e} />
-        ))}
-      </ColumnComponent>
-      <ColumnComponent title="🎉做完了">
-        {docs.done.map((e) => (
-          <StoryCardComponent {...e} />
-        ))}
-      </ColumnComponent>
+      {done && (
+        <Column title="🎉做完了">
+          {docs.done.map((e) => (
+            <Story {...e} onClick={() => setDialog(e)} />
+          ))}
+        </Column>
+      )}
+      {working && (
+        <Column title="😎在做了">
+          {docs.working.map((e) => (
+            <Story {...e} onClick={() => setDialog(e)} />
+          ))}
+        </Column>
+      )}
+      {todo && (
+        <Column title="✒️先写着">
+          {docs.todo.map((e) => (
+            <Story {...e} onClick={() => setDialog(e)} />
+          ))}
+        </Column>
+      )}
+      {suspend && (
+        <Column title="⏳卡住了">
+          {docs.suspend.map((e) => (
+            <Story {...e} onClick={() => setDialog(e)} />
+          ))}
+        </Column>
+      )}
+      {dialog && (
+        <DialogWrapper>
+          <StoryCardDialog {...dialog} onClose={() => setDialog(undefined)} />
+        </DialogWrapper>
+      )}
     </BoardComponent>
   );
 }
+
+const Column = styled(ColumnComponent)`
+  color: black;
+`;
+
+const Story = StoryCardComponent;
diff --git a/src/pages/Board/skill.tsx b/src/pages/Board/skill.tsx
index 3571f91..328a43b 100644
--- a/src/pages/Board/skill.tsx
+++ b/src/pages/Board/skill.tsx
@@ -1,29 +1,48 @@
-import { ColumnComponent } from "../../components/Column";
-import { BoardComponent } from "./styles";
-import docs from "../../documents/my-skill.json";
-import { StoryCardComponent } from "../../components/StoryCard";
 import { useState } from "react";
-import { StoryCardDialog } from "../../components/StoryCard/StoryCardDialog";
+import { ColumnComponent } from "../../components/Column";
 import { DialogWrapper } from "../../components/DialogWrapper";
+import { StoryCardComponent } from "../../components/StoryCard";
 import { StoryCardProps } from "../../components/StoryCard/common";
+import { StoryCardDialog } from "../../components/StoryCard/StoryCardDialog";
+import docs from "../../documents/my-skill.json";
+import { useMedia } from "../../utils/useMedia";
+import { BoardComponent } from "./styles";
 
+const Large = 300 as const;
+const Small = 240 as const;
 export function Skill() {
   const [dialog, setDialog] = useState<StoryCardProps>();
+  const media = useMedia("(max-width: 960px)");
   return (
     <BoardComponent style={{ color: "#2e343f" }}>
       <ColumnComponent title="💼 Competent At...">
         {docs.competent.map((e) => (
-          <StoryCardComponent {...e} onClick={() => setDialog(e)} />
+          <StoryCardComponent
+            {...e}
+            key={e.key}
+            $cardSize={media ? Small : Large}
+            onClick={() => setDialog(e)}
+          />
         ))}
       </ColumnComponent>
       <ColumnComponent title="📚 Experienced At...">
         {docs.experienced.map((e) => (
-          <StoryCardComponent {...e} onClick={() => setDialog(e)} />
+          <StoryCardComponent
+            {...e}
+            key={e.key}
+            $cardSize={media ? Small : Large}
+            onClick={() => setDialog(e)}
+          />
         ))}
       </ColumnComponent>
       <ColumnComponent title="🛠️ Used...">
         {docs.used.map((e) => (
-          <StoryCardComponent {...e} onClick={() => setDialog(e)} />
+          <StoryCardComponent
+            {...e}
+            key={e.key}
+            $cardSize={media ? Small : Large}
+            onClick={() => setDialog(e)}
+          />
         ))}
       </ColumnComponent>
       {dialog && (
diff --git a/src/pages/Board/styles.ts b/src/pages/Board/styles.ts
index 340c730..0806af2 100644
--- a/src/pages/Board/styles.ts
+++ b/src/pages/Board/styles.ts
@@ -8,4 +8,11 @@ export const BoardComponent = styled.div`
   border-radius: 2rem;
   background-color: #fafaf9;
   width: fit-content;
+
+  @media screen and (max-width: 960px) {
+    flex-direction: column;
+    width: 100%;
+    min-width: 560px;
+    margin: 2rem 2rem;
+  }
 `;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 97dda7a..cac8748 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,13 +2,17 @@ import styled from "styled-components";
 import github from "../assets/github.svg";
 import { Profile } from "../components/Profile";
 import { Skill } from "./Board/skill";
+import { Idea } from "./Board";
+import { useMedia } from "../utils/useMedia";
 
 export function Home() {
+  const isLargeScreen = useMedia("(min-width: 1440px)");
   return (
     <Container>
       <Title>Ri0n72Y's Profile</Title>
       <Profile />
       <Skill />
+      <Idea todo={isLargeScreen} suspend={isLargeScreen} />
       <SideTools />
     </Container>
   );
@@ -22,11 +26,12 @@ const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  gap: 2rem;
   min-height: 100%;
   padding: 2rem;
   margin-left: 16rem;
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
     align-items: center;
     width: 100vw;
     margin-left: 0;
@@ -67,12 +72,13 @@ const SideToolsContainer = styled.div`
   background-color: #f5f6f7;
   border-radius: 2rem 0 0 2rem;
   transition: right 0.3s cubic-bezier(0, 0, 0.2, 1.2);
+  filter: drop-shadow(0px 0px 2px #cfcfcf);
 
   &:hover {
     right: -1rem;
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 960px) {
     top: 4rem;
     right: -1rem;
   }
diff --git a/src/utils/useCssRemSize.ts b/src/utils/useCssRemSize.ts
new file mode 100644
index 0000000..12ca4e4
--- /dev/null
+++ b/src/utils/useCssRemSize.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export const useCssRemSize = () => {
+  const [px, setPx] = useState(
+    parseFloat(getComputedStyle(document.documentElement).fontSize)
+  );
+  useEffect(() => {
+    setPx(parseFloat(getComputedStyle(document.documentElement).fontSize));
+  }, []);
+
+  return px;
+};
diff --git a/src/utils/useMedia.ts b/src/utils/useMedia.ts
new file mode 100644
index 0000000..05e8d93
--- /dev/null
+++ b/src/utils/useMedia.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export const useMedia = (query: string) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+
+  return matches;
+};