diff --git a/.env b/.env
index e3664d5..e0168d9 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,6 @@
 NEXT_PUBLIC_OP_MAINNET_URL=optimism.superproof.wtf
 NEXT_PUBLIC_OP_SEPOLIA_URL=optimism-sepolia.superproof.wtf
 NEXT_PUBLIC_BASE_SEPOLIA_URL=base-sepolia.superproof.wtf
-NEXT_PUBLIC_API_DOC=/docs/swagger/index.html
\ No newline at end of file
+NEXT_PUBLIC_API_DOC=/docs/swagger/index.html
+NEXT_PUBLIC_API_URL=http://65.109.69.98:9001
+NEXT_PUBLIC_SEARCH_URL=http://65.109.69.98:7700
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index e242d3a..b3a9b16 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -6,7 +6,7 @@ const nextConfig = {
     return [
       {
         source: "/index/:path*",
-        destination: "http://65.109.69.98:7701/:path*", // Proxy to Backend, token required
+        destination: `${process.env.NEXT_PUBLIC_SEARCH_URL}/:path*`, // Proxy to Backend, token required
       },
       // {
       //   source: "/indexMain/:path*",
@@ -18,11 +18,11 @@ const nextConfig = {
       // },
       {
         source: "/api/:path*",
-        destination: "http://65.109.69.98:9002/:path*", // Proxy to Backend
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`, // Proxy to Backend
       },
       {
         source: "/docs/:path*",
-        destination: "http://65.109.69.98:9002/:path*", // Proxy to Backend, token required
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`, // Proxy to Backend, token required
       },
       // {
       //   source: "/apiMain/:path*",
diff --git a/src/components/Charts/ClaimChart/ChartBase.tsx b/src/components/Charts/ClaimChart/ChartBase.tsx
index 6c90ed6..547db8e 100644
--- a/src/components/Charts/ClaimChart/ChartBase.tsx
+++ b/src/components/Charts/ClaimChart/ChartBase.tsx
@@ -7,7 +7,7 @@ type ChartBaseProps = {
   options: EChartOption;
   compact?: boolean;
   depth?: number;
-  handleClick: (e: any) => void
+  handleClick: (e: any) => void;
 };
 
 const COMMON_OPTIONS: EChartOption = {
@@ -24,7 +24,7 @@ export const ChartBase: FC<ChartBaseProps> = function ({
   options,
   compact = false,
   depth = 0,
-  handleClick
+  handleClick,
 }) {
   const processedSeries = useMemo(
     () =>
@@ -42,14 +42,13 @@ export const ChartBase: FC<ChartBaseProps> = function ({
 
   // const len = options?.series ? options?.series[0]?.data?.length || 0 : 0;
   const height = depth * 200;
+  const width = depth * 100;
 
   return (
     <EChartsReact
-      onEvents={
-        {
-          "click": handleClick
-        }
-      }
+      onEvents={{
+        click: handleClick,
+      }}
       option={{
         ...COMMON_OPTIONS,
         ...options,
@@ -66,11 +65,11 @@ export const ChartBase: FC<ChartBaseProps> = function ({
           ...(options.xAxis || {}),
           ...(compact
             ? {
-              axisLine: { show: false },
-              axisLabel: {
-                interval: 4,
-              },
-            }
+                axisLine: { show: false },
+                axisLabel: {
+                  interval: 4,
+                },
+              }
             : {}),
         },
         yAxis: {
@@ -80,7 +79,7 @@ export const ChartBase: FC<ChartBaseProps> = function ({
         },
         series: processedSeries,
       }}
-      style={{ height: `${height}px`, width: "100%" }}
+      style={{ height: `${height}px`, width: `${width}px`, minWidth: "100%" }}
     />
   );
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0852878..15bfe37 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -43,13 +43,13 @@ const App = ({ Component, pageProps }: NextAppProps) => {
           gtag('config', 'G-3NB8M7WDPX');
         `}
       </Script>
-      <AppLayout>
-        <WalletProvider>
-          <NetworkConfigProvider>
+      <NetworkConfigProvider>
+        <AppLayout>
+          <WalletProvider>
             <Component {...pageProps} />
-          </NetworkConfigProvider>
-        </WalletProvider>
-      </AppLayout>
+          </WalletProvider>
+        </AppLayout>
+      </NetworkConfigProvider>
       {/* <FeedbackWidget />
           {env.NEXT_PUBLIC_VERCEL_ANALYTICS_ENABLED && <Analytics />} */}
     </SkeletonTheme>
diff --git a/src/pages/game/[game].tsx b/src/pages/game/[game].tsx
index 22c6341..602eb5b 100644
--- a/src/pages/game/[game].tsx
+++ b/src/pages/game/[game].tsx
@@ -133,14 +133,21 @@ const GameDetail = () => {
         ) : (
           <SlidableList
             maxItems={data?.data.length}
-            items={(data as ListResponse<ClaimData>).data?.map((g) => ({
-              id: g.id,
-              element: (
-                <div className="sm:h-28" key={g.id}>
-                  <ClaimCard claimData={g} />
-                </div>
-              ),
-            }))}
+            items={(data as ListResponse<ClaimData>).data?.map(
+              (g, index, arr) => {
+                if (index > 30) {
+                  g.output_block = arr[30].output_block;
+                }
+                return {
+                  id: g.id,
+                  element: (
+                    <div className="sm:h-28" key={g.id}>
+                      <ClaimCard claimData={g} />
+                    </div>
+                  ),
+                };
+              }
+            )}
           />
         )}
       </Card>