diff --git a/web/package-lock.json b/web/package-lock.json
index f1a5af47bd..50c5415dec 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -46,6 +46,7 @@
         "react-markdown": "^8.0.7",
         "react-router-dom": "^6.11.2",
         "react-syntax-highlighter": "^15.5.0",
+        "react-window": "^1.8.10",
         "recharts": "^2.7.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
@@ -62,6 +63,7 @@
         "@types/react-datepicker": "^4.11.2",
         "@types/react-dom": "^18.2.4",
         "@types/react-syntax-highlighter": "^15.5.6",
+        "@types/react-window": "^1.8.8",
         "@types/uuid": "^9.0.1",
         "@vitejs/plugin-react-swc": "^3.3.1",
         "autoprefixer": "^10.4.14",
@@ -4166,6 +4168,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -8751,6 +8762,22 @@
         "react-dom": ">=15.0.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
@@ -13865,6 +13892,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -17316,6 +17352,15 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 04d731240a..3c5167a112 100644
--- a/web/package.json
+++ b/web/package.json
@@ -50,6 +50,7 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.11.2",
     "react-syntax-highlighter": "^15.5.0",
+    "react-window": "^1.8.10",
     "recharts": "^2.7.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
@@ -66,6 +67,7 @@
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/react-window": "^1.8.8",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react-swc": "^3.3.1",
     "autoprefixer": "^10.4.14",
@@ -81,7 +83,6 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js}": "eslint --fix",
-    "*.css": "stylelint --fix",
-    "*.scss": "stylelint --syntax=scss --fix"
+    "*.{css,scss}": "stylelint --fix"
   }
 }
diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
index f004a79039..e475f752fe 100644
--- a/web/src/components/Editor/JSONViewer.tsx
+++ b/web/src/components/Editor/JSONViewer.tsx
@@ -1,8 +1,11 @@
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter, { Prism } from "react-syntax-highlighter";
+import { FixedSizeList as List } from "react-window";
 import SimpleBar from "simplebar-react";
 
 import { COLOR_MODE } from "@/constants";
 
+import "./index.scss";
+
 type JSONViewerProps = {
   code: string;
   language?: string;
@@ -238,28 +241,60 @@ const JSONViewerDarkStyle: any = {
     fontWeight: "bold",
   },
 };
+
 export default function JSONViewer(props: JSONViewerProps) {
   const { code, language = "json", colorMode = COLOR_MODE.light, ...rest } = props;
-  const lightTheme = { background: "#fdfdfe" };
+  const lightTheme = { background: "#fdfdfe", padding: 0 };
   const darkTheme = {
     background: "#202631",
     color: "#f0f0f0",
   };
 
-  return (
-    <SimpleBar
-      style={{
-        maxHeight: 390,
-      }}
-      {...rest}
-    >
-      <SyntaxHighlighter
+  const rowHeight = 22;
+
+  const renderRow = ({ index, style }: { index: number; style: any }) => (
+    <div style={style} className="code">
+      <Prism
         language={language}
         style={colorMode === COLOR_MODE.dark ? JSONViewerDarkStyle : JSONViewerStyle}
         customStyle={colorMode === COLOR_MODE.dark ? darkTheme : lightTheme}
       >
-        {code}
-      </SyntaxHighlighter>
-    </SimpleBar>
+        {code.split(`\n`)[index]}
+      </Prism>
+    </div>
   );
+
+  if (code.split(`\n`).length <= 100) {
+    return (
+      <SimpleBar
+        style={{
+          maxHeight: 390,
+        }}
+        {...rest}
+      >
+        <SyntaxHighlighter
+          language={language}
+          style={colorMode === COLOR_MODE.dark ? JSONViewerDarkStyle : JSONViewerStyle}
+          customStyle={colorMode === COLOR_MODE.dark ? darkTheme : lightTheme}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </SimpleBar>
+    );
+  } else {
+    return (
+      <List
+        height={390}
+        itemCount={code.split(`\n`).length}
+        itemSize={rowHeight}
+        width="100%"
+        style={{
+          paddingTop: 0,
+        }}
+        {...rest}
+      >
+        {renderRow}
+      </List>
+    );
+  }
 }
diff --git a/web/src/components/Editor/index.scss b/web/src/components/Editor/index.scss
new file mode 100644
index 0000000000..56e9f0f7a4
--- /dev/null
+++ b/web/src/components/Editor/index.scss
@@ -0,0 +1,23 @@
+.code .property {
+  color: #A31515
+}
+
+.code .number {
+  color: #01a99d
+}
+
+.code .string {
+  color: #0451a5
+}
+
+[data-theme="dark"] .code .property {
+  color: #9BDCFE
+}
+
+[data-theme="dark"] .code .number {
+  color: #B0CAA4
+}
+
+[data-theme="dark"] .code .string {
+  color: #CE9178
+}
\ No newline at end of file
diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
index 7dd408c0d3..6774f54b3b 100644
--- a/web/src/components/Pagination/index.tsx
+++ b/web/src/components/Pagination/index.tsx
@@ -55,8 +55,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={page === 1 || maxPage === -1}
@@ -74,8 +76,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={page === 1 || maxPage === -1}
@@ -97,8 +101,10 @@ export default function Pagination(props: {
             variant="link"
             isDisabled={maxPage === page || maxPage === -1}
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             onClick={() => {
@@ -115,8 +121,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={maxPage === page || maxPage === -1}
diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.css b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.scss
similarity index 63%
rename from web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.css
rename to web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.scss
index b028c52f60..b4545a2396 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.css
+++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.scss
@@ -1,4 +1,4 @@
-.dataList .simplebar-scrollbar::before {
+.simplebar-scrollbar::before {
   background: #7b838b;
   width: 4px;
   transform: translateX(100%);
diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
index 9d5f972548..2bea9c7a7f 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -30,7 +30,7 @@ import RightPanelList from "../../../RightComponent/List";
 import { useDeleteDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service";
 import useDBMStore from "../../../store";
 
-import "./index.css";
+import "./index.scss";
 
 import useGlobalStore from "@/pages/globalStore";
 
@@ -62,6 +62,7 @@ export default function DataPanel() {
   };
 
   const [queryData, setQueryData] = useState<QueryData>();
+  const darkMode = colorMode === COLOR_MODE.dark;
 
   useEffect(() => {
     if (store.currentDB !== undefined) {
@@ -300,7 +301,7 @@ export default function DataPanel() {
                     hideToolTip
                     text={text}
                     tip={String(t("Copied"))}
-                    className="ml-2 hover:bg-gray-200"
+                    className={darkMode ? "ml-2 hover:bg-gray-600" : "ml-2 hover:bg-gray-200"}
                   >
                     <IconWrap
                       showBg
@@ -308,7 +309,7 @@ export default function DataPanel() {
                       size={32}
                       className="group/icon"
                     >
-                      <OutlineCopyIcon size="14" color="#24282C" />
+                      <OutlineCopyIcon size="14" color={darkMode ? "#ffffff" : "#24282C"} />
                     </IconWrap>
                   </CopyText>
                 );
diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
index 870a753e7b..f2a3d35ad6 100644
--- a/web/src/pages/app/database/PolicyDataList/index.tsx
+++ b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -157,7 +157,7 @@ export default function PolicyDataList() {
                       size={32}
                       className="group/icon"
                     >
-                      <OutlineCopyIcon size="14" color="#24282C" />
+                      <OutlineCopyIcon size="14" color={darkMode ? "#ffffff" : "#24282C"} />
                     </IconWrap>
                   </CopyText>
                 );