diff --git a/tools/obscuroscan_v3/frontend/components/layouts/default-layout.tsx b/tools/obscuroscan_v3/frontend/components/layouts/default-layout.tsx
index 887f54656b..b30d99727b 100644
--- a/tools/obscuroscan_v3/frontend/components/layouts/default-layout.tsx
+++ b/tools/obscuroscan_v3/frontend/components/layouts/default-layout.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
-import Header from './header'
-import Footer from './footer'
+import React from "react";
+import Header from "./header";
+import Footer from "./footer";
 
 interface LayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <div className="hidden flex-col md:flex">
-      <div className="flex flex-col min-h-screen">
+    <div className="flex-col md:flex">
+      <div className="flex flex-col min-h-screen max-w-[1400px] mx-auto">
         <Header />
         <div className="flex-1 space-y-4 p-8 pt-6">{children}</div>
         <Footer />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/tools/obscuroscan_v3/frontend/components/layouts/header.tsx b/tools/obscuroscan_v3/frontend/components/layouts/header.tsx
index 4137245095..a6bef9cd31 100644
--- a/tools/obscuroscan_v3/frontend/components/layouts/header.tsx
+++ b/tools/obscuroscan_v3/frontend/components/layouts/header.tsx
@@ -19,7 +19,7 @@ export default function Header() {
         </Link>
         <MainNav className="mx-6" />
         <div className="ml-auto flex items-center space-x-4">
-          <Search />
+          {/* <Search /> */}
           <ModeToggle />
           <ConnectWalletButton />
         </div>
diff --git a/tools/obscuroscan_v3/frontend/components/modules/common/connect-wallet.tsx b/tools/obscuroscan_v3/frontend/components/modules/common/connect-wallet.tsx
index 96dda24a8d..3ccd176745 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/common/connect-wallet.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/common/connect-wallet.tsx
@@ -17,15 +17,14 @@ const ConnectWalletButton = ({ children }: { children?: React.ReactNode }) => {
         {walletConnected ? (
           <>
             <LinkBreak2Icon className="w-4 h-4 mr-2" />
-            Disconnect
+            <span className="sm:hidden">Disconnect Wallet</span>
           </>
         ) : (
           <>
             <Link2Icon className="w-4 h-4 mr-2" />
-            Connect
+            <span className="sm:hidden">Connect to Metamask</span>
           </>
-        )}{" "}
-        Wallet
+        )}
       </Button>
     </>
   );
diff --git a/tools/obscuroscan_v3/frontend/components/modules/dashboard/index.tsx b/tools/obscuroscan_v3/frontend/components/modules/dashboard/index.tsx
index b1b298df31..04fb050671 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/dashboard/index.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/dashboard/index.tsx
@@ -70,44 +70,43 @@ export default function Dashboard() {
   ];
 
   const RECENT_DATA = [
-    {
-      title: "Recent Batches",
-      data: batches,
-      component: <RecentBatches batches={batches} />,
-      goTo: "/batches",
-    },
     {
       title: "Recent Blocks",
       data: blocks,
       component: <RecentBlocks blocks={blocks} />,
       goTo: "/blocks",
+      className: "sm:col-span-1 md:col-span-6 lg:col-span-3",
+    },
+    {
+      title: "Recent Batches",
+      data: batches,
+      component: <RecentBatches batches={batches} />,
+      goTo: "/batches",
+      className: "sm:col-span-1 md:col-span-3 lg:col-span-3",
     },
     {
       title: "Recent Transactions",
       data: transactions,
       component: <RecentTransactions transactions={transactions} />,
       goTo: "/transactions",
+      className: "sm:col-span-1 md:col-span-3 lg:col-span-3",
     },
   ];
 
   return (
-    <div className="flex-1 space-y-4 p-8 pt-6">
+    <>
       <div className="flex items-center justify-between space-y-2">
         <h2 className="text-3xl font-bold tracking-tight">Obscuroscan</h2>
-        <div className="flex items-center space-x-2">
-          <CalendarDateRangePicker />
-          <Button>Download</Button>
-        </div>
       </div>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {DASHBOARD_DATA.map((item: any, index) => (
           <AnalyticsCard key={index} item={item} />
         ))}
       </div>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-9">
+      <div className="grid gap-4 md:grid-cols-6 lg:grid-cols-9">
         {RECENT_DATA.map((item: any, index) => (
-          <Card key={index} className="col-span-3">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <Card key={index} className={item.className}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3">
               <CardTitle>{item.title}</CardTitle>
               <Link
                 href={{
@@ -119,7 +118,7 @@ export default function Dashboard() {
                 </Button>
               </Link>
             </CardHeader>
-            <CardContent>
+            <CardContent className="p-3">
               {item.data ? (
                 item.component
               ) : (
@@ -129,6 +128,6 @@ export default function Dashboard() {
           </Card>
         ))}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-batches.tsx b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-batches.tsx
index 2a6944f3d5..ee9408aea8 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-batches.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-batches.tsx
@@ -15,17 +15,15 @@ export function RecentBatches({ batches }: { batches: any }) {
             <AvatarFallback>BN</AvatarFallback>
           </Avatar>
           <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">
-              Batch #{batch?.number}
-            </p>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-sm font-medium leading-none">#{batch?.number}</p>
+            <p className="text-sm text-muted-foreground word-break-all">
               {formatTimeAgo(batch?.timestamp)}
             </p>
           </div>
-          <div className="ml-auto font-medium">
+          <div className="ml-auto font-medium min-w-[140px]">
             <TruncatedAddress address={batch?.hash} />
           </div>
-          <div className="ml-auto font-medium">
+          <div className="ml-auto font-medium max-w-[100px]">
             <Link
               href={{
                 pathname: `/batches/${batch?.number}`,
diff --git a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-blocks.tsx b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-blocks.tsx
index 5a944823ff..e431ec254b 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-blocks.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-blocks.tsx
@@ -16,16 +16,16 @@ export function RecentBlocks({ blocks }: { blocks: any }) {
           </Avatar>
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">
-              Block #{block?.blockHeader?.number}
+              #{block?.blockHeader?.number}
             </p>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-sm text-muted-foreground word-break-all">
               {formatTimeAgo(block?.blockHeader?.timestamp)}
             </p>
           </div>
-          <div className="ml-auto font-medium">
+          <div className="ml-auto font-medium min-w-[140px]">
             <TruncatedAddress address={block?.blockHeader?.hash} />
           </div>
-          <div className="ml-auto font-medium">
+          <div className="ml-auto font-medium max-w-[50px]">
             <Link
               href={{
                 pathname: `/blocks/${block?.blockHeader?.number}`,
diff --git a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-transactions.tsx b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-transactions.tsx
index a995b2d3d1..03356aadb2 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-transactions.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/dashboard/recent-transactions.tsx
@@ -16,7 +16,7 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
             </Avatar>
             <div className="ml-4 space-y-1">
               <p className="text-sm font-medium leading-none">
-                Batch Height: #{transaction?.BatchHeight}
+                Height: #{transaction?.BatchHeight}
               </p>
             </div>
             <div className="ml-auto font-medium">
diff --git a/tools/obscuroscan_v3/frontend/components/modules/resources/decrypt.tsx b/tools/obscuroscan_v3/frontend/components/modules/resources/decrypt.tsx
index 4da0864b2a..523991ae2c 100644
--- a/tools/obscuroscan_v3/frontend/components/modules/resources/decrypt.tsx
+++ b/tools/obscuroscan_v3/frontend/components/modules/resources/decrypt.tsx
@@ -1,7 +1,24 @@
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Terminal } from "lucide-react";
+import React from "react";
+
 export default function Decrypt() {
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-4xl font-bold text-center text-primary">Decrypt</h1>
-    </div>
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">Static Keys</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Alert>
+          <Terminal className="h-4 w-4" />
+          <AlertTitle>Heads up!</AlertTitle>
+          <AlertDescription>
+            You can add components and dependencies to your app using the cli.
+          </AlertDescription>
+        </Alert>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/tools/obscuroscan_v3/frontend/components/ui/alert.tsx b/tools/obscuroscan_v3/frontend/components/ui/alert.tsx
new file mode 100644
index 0000000000..54697d2574
--- /dev/null
+++ b/tools/obscuroscan_v3/frontend/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/src/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }