diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
index b1b966d7fb..26f39f2d2d 100644
--- a/web/src/components/Editor/JSONViewer.tsx
+++ b/web/src/components/Editor/JSONViewer.tsx
@@ -39,7 +39,7 @@ const JSONViewerStyle: any = {
     color: "#954121",
   },
   "hljs-number": {
-    color: "#b0caa4",
+    color: "#01A99D",
   },
   "hljs-string": {
     color: "#0451a5",
diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
index 2009d01ef3..f9655b5a34 100644
--- a/web/src/pages/app/database/CollectionListPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -103,8 +103,8 @@ export default function CollectionListPanel() {
                       store.setCurrentDB(db);
                     }}
                   >
-                    <div className="group flex w-full justify-between">
-                      <div className="font-semibold leading-loose">
+                    <div className="group flex w-full items-center justify-between">
+                      <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                         <FileTypeIcon type="db" />
                         <span className="ml-2 text-base">{db.name}</span>
                       </div>
diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
index d13e4beb5f..d1360d4808 100644
--- a/web/src/pages/app/database/PolicyListPanel/index.tsx
+++ b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -56,8 +56,8 @@ export default function PolicyListPanel() {
                     store.setCurrentPolicy(item);
                   }}
                 >
-                  <div className="group flex w-full justify-between">
-                    <div className="font-semibold leading-loose">
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                       <FileTypeIcon type="policy" />
                       <span className="ml-2 text-base">{item.name}</span>
                     </div>
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index def4eb943c..16a13d5160 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -190,14 +190,14 @@ export default function FunctionList() {
                     navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`);
                   }}
                 >
-                  <div className="font-semibold leading-loose">
+                  <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose">
                     <FileTypeIcon type={FileType.ts} />
                     <span className="ml-2 text-base">{func?.name}</span>
                   </div>
                   <HStack spacing={1}>
                     {functionCache.getCache(func?.id, func?.source?.code) !==
                       func?.source?.code && (
-                      <span className="inline-block h-1 w-1 flex-none rounded-full bg-warn-700"></span>
+                      <span className="mt-[1px] inline-block h-1 w-1 flex-none rounded-full bg-warn-700"></span>
                     )}
                     <MoreButton
                       isHidden={func.name !== currentFunction?.name}