diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 173e499bd..eb588796a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,16 +24,15 @@
         "@types/react": "18.2.38",
         "@types/react-dom": "18.2.17",
         "@types/react-router": "5.1.20",
-        "@types/react-syntax-highlighter": "15.5.10",
         "@vitejs/plugin-react": "^4.2.0",
         "graphql": "16.8.1",
         "react": "18.2.0",
         "react-avatar": "5.0.3",
+        "react-code-blocks": "^0.1.5",
         "react-dom": "18.2.0",
         "react-icons": "4.12.0",
         "react-markdown": "9.0.1",
         "react-router-dom": "6.20.0",
-        "react-syntax-highlighter": "15.5.0",
         "typescript": "5.3.2",
         "typography": "0.16.24",
         "vite": "^5.0.2",
@@ -1932,6 +1931,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz",
+      "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ=="
+    },
     "node_modules/@types/unist": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@@ -2165,6 +2169,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001564",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
@@ -2344,6 +2356,24 @@
         "node": "*"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -4249,6 +4279,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
     "node_modules/prettier": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
@@ -4351,6 +4386,23 @@
         "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-code-blocks": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/react-code-blocks/-/react-code-blocks-0.1.5.tgz",
+      "integrity": "sha512-p57YPvry1OY0fS/oDVfK7BBgy89jHJguyyzNbjZvMUR2/90oB0iv3D6aS/PBjuQp7JyjlRoaZ/2WRxvOyyAAEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "react-syntax-highlighter": "^15.5.0",
+        "styled-components": "^6.1.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4662,6 +4714,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -4757,6 +4814,38 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz",
+      "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.31",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d4d0f8d3d..4868773d7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "graphql": "16.8.1",
     "react": "18.2.0",
     "react-avatar": "5.0.3",
+    "react-code-blocks": "^0.1.5",
     "react-dom": "18.2.0",
     "react-icons": "4.12.0",
     "react-markdown": "9.0.1",
diff --git a/frontend/src/component/JavaCodeBlock.tsx b/frontend/src/component/JavaCodeBlock.tsx
index 29f5c4e98..0fecc4e06 100644
--- a/frontend/src/component/JavaCodeBlock.tsx
+++ b/frontend/src/component/JavaCodeBlock.tsx
@@ -1,18 +1,12 @@
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { CodeBlock, atomOneDark } from 'react-code-blocks';
 import React from 'react';
 export default function javaCodeBlock(props: { code: string }) {
   return (
-    <div>
-      <SyntaxHighlighter
-        language="java"
-        style={dracula}
-        sx={{ width: '300' }}
-        wrapLongLines
-        showInlineLineNumbers
-      >
-        {props.code}
-      </SyntaxHighlighter>
-    </div>
+    <CodeBlock
+      text={props.code}
+      language={'java'}
+      showLineNumbers={false}
+      theme={atomOneDark}
+    />
   );
 }