diff --git a/components/contract-viewer/index.tsx b/components/contract-viewer/index.tsx
index a34d856..2634558 100644
--- a/components/contract-viewer/index.tsx
+++ b/components/contract-viewer/index.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useWallet } from "@/data/wallet";
 import { ContractView } from "aelf-smartcontract-viewer";
@@ -13,13 +12,6 @@ const ContractViewer = ({ name }: { name: string }) => {
   const wallet = useWallet();
   const { resolvedTheme } = useTheme();
   const contractViewerAddress = searchParams.get("contract-viewer-address");
-  const [key, setKey] = useState("0");
-
-  useEffect(() => {
-    setTimeout(() => {
-      setKey(prev => parseInt(prev) + 1 + "");
-    }, 1000);
-  }, [contractViewerAddress]);
 
   if (!contractViewerAddress || !wallet?.wallet) {
     return;
@@ -27,7 +19,6 @@ const ContractViewer = ({ name }: { name: string }) => {
 
   return (
     <ContractView
-      key={key}
       wallet={wallet.wallet}
       address={contractViewerAddress}
       headerTitle={"Contract View"}
diff --git a/components/left-side.tsx b/components/left-side.tsx
index a0f7f85..75efcea 100644
--- a/components/left-side.tsx
+++ b/components/left-side.tsx
@@ -24,6 +24,7 @@ const LeftSide = ({ name }: { name: string }) => {
           bottom={<ContractViewer name={name} />}
           topDefaultSize={30}
           bottomDefaultSize={70}
+          bottomClassName="contract-viewer-container"
         />
       ) : (
         <TopSections />
diff --git a/components/top-bottom.tsx b/components/top-bottom.tsx
index 7cd1ca6..14f6583 100644
--- a/components/top-bottom.tsx
+++ b/components/top-bottom.tsx
@@ -10,23 +10,27 @@ export default function TopBottom({
   bottom,
   topDefaultSize = 70,
   bottomDefaultSize = 30,
+  topClassName = "",
+  bottomClassName = "",
 }: {
   top: ReactNode;
   bottom: ReactNode;
   topDefaultSize?: number;
   bottomDefaultSize?: number;
+  topClassName?: string;
+  bottomClassName?: string
 }) {
   return (
     <div className="h-[calc(100vh-40px)]">
       <ResizablePanelGroup direction="vertical">
         <ResizablePanel
           defaultSize={topDefaultSize}
-          className="overflow-y-auto"
+          className={`overflow-y-auto ${topClassName}`}
         >
           {top}
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={bottomDefaultSize}>
+        <ResizablePanel defaultSize={bottomDefaultSize} className={bottomClassName}>
           {bottom}
         </ResizablePanel>
       </ResizablePanelGroup>
diff --git a/package.json b/package.json
index 425f960..24ed8df 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "aelf-sdk": "^3.4.15",
-    "aelf-smartcontract-viewer": "^1.0.6",
+    "aelf-smartcontract-viewer": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
diff --git a/src/routes/workspace.scss b/src/routes/workspace.scss
new file mode 100644
index 0000000..695e35c
--- /dev/null
+++ b/src/routes/workspace.scss
@@ -0,0 +1,3 @@
+.contract-viewer-container {
+  overflow-y: auto !important;
+}
diff --git a/src/routes/workspace.tsx b/src/routes/workspace.tsx
index 4135ded..f56c210 100644
--- a/src/routes/workspace.tsx
+++ b/src/routes/workspace.tsx
@@ -7,6 +7,7 @@ import {
 import Cli from "@/components/workspace/cli";
 import LeftSide from "@/components/left-side";
 import { Outlet, useParams } from "react-router-dom";
+import './workspace.scss';
 
 export function Component() {
   let { id } = useParams();