diff --git a/packages/ui/components/shared/badge.tsx b/packages/ui/components/shared/badge.tsx
index d8a17f563b..46a22c2d58 100644
--- a/packages/ui/components/shared/badge.tsx
+++ b/packages/ui/components/shared/badge.tsx
@@ -1,21 +1,31 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary hover:bg-primary/80",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        outline: "text-foreground",
+          "border-transparent bg-success text-success-foreground hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        outline:
+          "text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "static-default":
+          "border-transparent bg-primary text-primary-foreground",
+        "static-secondary":
+          "border-transparent bg-secondary text-secondary-foreground",
+        "static-destructive":
+          "border-transparent bg-destructive text-destructive-foreground",
+        "static-success":
+          "border-transparent bg-success text-success-foreground",
+        "static-outline": "border-current text-foreground",
       },
     },
     defaultVariants: {
diff --git a/tools/bridge-frontend/src/lib/siteMetadata.ts b/tools/bridge-frontend/src/lib/siteMetadata.ts
index 34ec555cc6..d64ad7f883 100644
--- a/tools/bridge-frontend/src/lib/siteMetadata.ts
+++ b/tools/bridge-frontend/src/lib/siteMetadata.ts
@@ -7,7 +7,7 @@ export const siteMetadata = {
     "Bridge tokens between Layer 1 and Layer 2 networks effortlessly with TEN Bridge. Ensure secure and efficient cross-chain transactions",
   keywords:
     "token bridging, cross-chain transactions, Layer 1 to Layer 2 bridge, blockchain bridge, Ten Bridge, crypto bridging, TEN network, TEN blockchain, TEN ecosystem",
-  siteUrl: `https://${environment}-bridge.ten.xyz`,
+  siteUrl: `https://${environment && environment + "-"}bridge.ten.xyz`,
   siteLogo: `/assets/images/cover.png`,
   siteLogoSquare: `/assets/images/cover.png`,
   email: "team@ten.xyz",
diff --git a/tools/tenscan/frontend/Dockerfile b/tools/tenscan/frontend/Dockerfile
index 691489c28a..1144273b25 100644
--- a/tools/tenscan/frontend/Dockerfile
+++ b/tools/tenscan/frontend/Dockerfile
@@ -1,12 +1,17 @@
 FROM node:18-buster as runner
-# Install pnpm
+
 RUN npm install -g pnpm
-# setup container data structure
-RUN mkdir -p /home/obscuro/go-obscuro/tools/tenscan/
-COPY ./tools/tenscan/frontend /home/obscuro/go-obscuro/tools/tenscan/frontend
 
-WORKDIR /home/obscuro/go-obscuro/tools/tenscan/frontend
+COPY . /home/obscuro/go-obscuro/
+
+WORKDIR /home/obscuro/go-obscuro/
 
 RUN pnpm install
 
-EXPOSE 80
\ No newline at end of file
+WORKDIR /home/obscuro/go-obscuro/tools/tenscan/frontend
+
+RUN pnpm install --filter ./tools/tenscan/frontend...
+
+EXPOSE 80
+
+CMD ["pnpm", "run", "start"]
diff --git a/tools/tenscan/frontend/api/batches.ts b/tools/tenscan/frontend/api/batches.ts
index 10ff925eaf..ce21899900 100644
--- a/tools/tenscan/frontend/api/batches.ts
+++ b/tools/tenscan/frontend/api/batches.ts
@@ -1,13 +1,13 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
 import {
   Batch,
   BatchDetails,
   BatchResponse,
   LatestBatch,
 } from "@/src/types/interfaces/BatchInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchBatches = async (
   payload?: Record<string, any>
diff --git a/tools/tenscan/frontend/api/blocks.ts b/tools/tenscan/frontend/api/blocks.ts
index 0a4519c89e..5ccefdcf00 100644
--- a/tools/tenscan/frontend/api/blocks.ts
+++ b/tools/tenscan/frontend/api/blocks.ts
@@ -1,12 +1,13 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
+import { BlockResponse } from "@/src/types/interfaces/BlockInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchBlocks = async (
   payload?: Record<string, any>
-): Promise<ResponseDataInterface<any>> => {
-  return await httpRequest<ResponseDataInterface<any>>({
+): Promise<ResponseDataInterface<BlockResponse>> => {
+  return await httpRequest<ResponseDataInterface<BlockResponse>>({
     method: "get",
     url: pathToUrl(apiRoutes.getBlocks),
     searchParams: payload,
diff --git a/tools/tenscan/frontend/api/contracts.ts b/tools/tenscan/frontend/api/contracts.ts
index 0ece0fc929..79134ea44b 100644
--- a/tools/tenscan/frontend/api/contracts.ts
+++ b/tools/tenscan/frontend/api/contracts.ts
@@ -1,8 +1,8 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
 import { ContractCount } from "@/src/types/interfaces/ContractInterface";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchContractCount = async (
   payload?: Record<string, any>
diff --git a/tools/tenscan/frontend/api/general.ts b/tools/tenscan/frontend/api/general.ts
index a9e09941dc..5a1f5d0d84 100644
--- a/tools/tenscan/frontend/api/general.ts
+++ b/tools/tenscan/frontend/api/general.ts
@@ -1,4 +1,4 @@
-import { ResponseDataInterface } from "@/src/types/interfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 import { httpRequest } from ".";
 import { pathToUrl } from "@/src/routes/router";
 import { apiRoutes } from "@/src/routes";
diff --git a/tools/tenscan/frontend/api/rollups.ts b/tools/tenscan/frontend/api/rollups.ts
index eddfc0ed12..954ad2c50d 100644
--- a/tools/tenscan/frontend/api/rollups.ts
+++ b/tools/tenscan/frontend/api/rollups.ts
@@ -1,8 +1,8 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
-import { Batch, BatchResponse } from "@/src/types/interfaces/BatchInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
+import { BatchResponse } from "@/src/types/interfaces/BatchInterfaces";
 import {
   Rollup,
   RollupsResponse,
diff --git a/tools/tenscan/frontend/api/transactions.ts b/tools/tenscan/frontend/api/transactions.ts
index 051bf757ff..9e8cebf2b3 100644
--- a/tools/tenscan/frontend/api/transactions.ts
+++ b/tools/tenscan/frontend/api/transactions.ts
@@ -1,15 +1,16 @@
-import { jsonHexToObj } from "@/src/lib/utils";
+import { jsonHexToObj } from "@repo/ui/lib/utils";
 import { httpRequest } from ".";
 import { apiRoutes, ethMethods, tenCustomQueryMethods } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface, ToastType } from "@/src/types/interfaces";
 import {
   TransactionCount,
   Price,
   TransactionResponse,
   Transaction,
 } from "@/src/types/interfaces/TransactionInterfaces";
-import { showToast } from "@/src/components/ui/use-toast";
+import { showToast } from "@repo/ui/components/shared/use-toast";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
+import { ToastType } from "@repo/ui/lib/enums/toast";
 
 export const fetchTransactions = async (
   payload?: Record<string, any>
diff --git a/tools/tenscan/frontend/next.config.js b/tools/tenscan/frontend/next.config.js
index 50f8420725..841789e9ae 100644
--- a/tools/tenscan/frontend/next.config.js
+++ b/tools/tenscan/frontend/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@repo/ui"],
   images: {
     unoptimized: true,
   },
diff --git a/tools/tenscan/frontend/package.json b/tools/tenscan/frontend/package.json
index 87793b2534..252d566f6b 100644
--- a/tools/tenscan/frontend/package.json
+++ b/tools/tenscan/frontend/package.json
@@ -10,20 +10,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
     "@tanstack/react-table": "^8.10.7",
@@ -33,7 +19,6 @@
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "ethers": "^5.7.2",
-    "lucide-react": "^0.292.0",
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "path-to-regexp": "^6.2.1",
@@ -43,18 +28,18 @@
     "react-json-pretty": "^2.2.0",
     "recharts": "^2.9.3",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zustand": "^4.4.6"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@repo/ui": "workspace:*",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/tools/tenscan/frontend/pages/404.tsx b/tools/tenscan/frontend/pages/404.tsx
index 2b7a07c742..52c795cc44 100644
--- a/tools/tenscan/frontend/pages/404.tsx
+++ b/tools/tenscan/frontend/pages/404.tsx
@@ -1,38 +1,7 @@
-import { ErrorType } from "@/src/types/interfaces";
-import Error from "./_error";
+import Custom404Error from "@repo/ui/components/common/404";
 
-export function Custom404Error({
-  customPageTitle,
-  showRedirectText,
-  redirectText,
-  isFullWidth,
-  message,
-  showMessage = true,
-  redirectLink,
-  children,
-}: ErrorType) {
-  return (
-    <Error
-      heading={` ${customPageTitle || "Oops! Page"} Not Found`}
-      statusText={`We can't seem to find the ${
-        customPageTitle || "page"
-      } you're looking for.`}
-      statusCode={404}
-      showRedirectText={showRedirectText}
-      redirectText={redirectText || "Home Page"}
-      message={
-        message ||
-        `The ${
-          customPageTitle || "page"
-        } you are looking for might have been removed, had its name changed, or is temporarily unavailable.`
-      }
-      isFullWidth={isFullWidth}
-      showMessage={showMessage}
-      redirectLink={redirectLink}
-    >
-      {children}
-    </Error>
-  );
-}
+const Custom404 = () => {
+  return <Custom404Error />;
+};
 
-export default Custom404Error;
+export default Custom404;
diff --git a/tools/tenscan/frontend/pages/500.tsx b/tools/tenscan/frontend/pages/500.tsx
index 2f3826812c..62e6c09860 100644
--- a/tools/tenscan/frontend/pages/500.tsx
+++ b/tools/tenscan/frontend/pages/500.tsx
@@ -1,32 +1,7 @@
-import { ErrorType } from "@/src/types/interfaces";
-import Error from "./_error";
+import Custom500Error from "@repo/ui/components/common/500";
 
-function Custom500Error({
-  customPageTitle,
-  message,
-  showRedirectText,
-  redirectText,
-  err,
-  redirectLink,
-  children,
-}: ErrorType) {
-  return (
-    <Error
-      heading={"Oops! Something went wrong."}
-      message={
-        message ||
-        "We're experiencing technical difficulties. Please try again later."
-      }
-      statusText={customPageTitle || `An Error occured`}
-      statusCode={500}
-      showRedirectText={showRedirectText || true}
-      redirectText={redirectText || "Home Page"}
-      err={err}
-      redirectLink={redirectLink}
-    >
-      {children}
-    </Error>
-  );
-}
+const Custom404 = () => {
+  return <Custom500Error />;
+};
 
-export default Custom500Error;
+export default Custom404;
diff --git a/tools/tenscan/frontend/pages/_app.tsx b/tools/tenscan/frontend/pages/_app.tsx
index 9c63ee0a42..5074041570 100644
--- a/tools/tenscan/frontend/pages/_app.tsx
+++ b/tools/tenscan/frontend/pages/_app.tsx
@@ -8,15 +8,14 @@ import {
 } from "@tanstack/react-query";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { Toaster } from "@/src/components/ui/toaster";
-import { WalletConnectionProvider } from "@/src/components/providers/wallet-provider";
-import { NetworkStatus } from "@/src/components/modules/common/network-status";
+import { Toaster } from "@repo/ui/components/shared/toaster";
+import { NetworkStatus } from "@repo/ui/components/common/network-status";
 import HeadSeo from "@/src/components/head-seo";
 import { siteMetadata } from "@/src/lib/siteMetadata";
 import Script from "next/script";
 import { GOOGLE_ANALYTICS_ID } from "@/src/lib/constants";
-import { showToast } from "@/src/components/ui/use-toast";
-import { ToastType } from "@/src/types/interfaces";
+import { showToast } from "@repo/ui/components/shared/use-toast";
+import { ToastType } from "@repo/ui/lib/enums/toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   const mutationCache = new MutationCache({
@@ -76,12 +75,10 @@ export default function App({ Component, pageProps }: AppProps) {
           enableSystem
           disableTransitionOnChange
         >
-          <WalletConnectionProvider>
-            <Component {...pageProps} />
-            <Toaster />
-            <NetworkStatus />
-            <ReactQueryDevtools initialIsOpen={false} />
-          </WalletConnectionProvider>
+          <Component {...pageProps} />
+          <Toaster />
+          <NetworkStatus />
+          <ReactQueryDevtools initialIsOpen={false} />
         </ThemeProvider>
       </QueryClientProvider>
     </>
diff --git a/tools/tenscan/frontend/pages/_error.tsx b/tools/tenscan/frontend/pages/_error.tsx
index 54b7deca69..c0a556a211 100644
--- a/tools/tenscan/frontend/pages/_error.tsx
+++ b/tools/tenscan/frontend/pages/_error.tsx
@@ -1,91 +1,27 @@
+import CustomError from "@repo/ui/components/common/error";
 import React from "react";
-import NextErrorComponent from "next/error";
-import Link from "next/link";
-import Image from "next/image";
-import { ErrorType } from "@/src/types/interfaces";
 
-function ErrorMessage({
-  statusText,
-  message,
-  showMessage,
-  showStatusText,
-}: any) {
+export default function CustomErrorPage({ statusCode, err }: any) {
   return (
-    <div className="error-message">
-      {showStatusText && <h3>{statusText}</h3>}
-      {message && showMessage && (
-        <p className="text-muted-foreground">{message}</p>
-      )}
-    </div>
+    <CustomError
+      statusCode={statusCode}
+      err={err}
+      heading={
+        statusCode === 404 ? "Page Not Found" : "Oops! Something went wrong."
+      }
+      message={
+        statusCode === 404
+          ? "Sorry, the page you're looking for doesn't exist."
+          : "We're experiencing technical difficulties. Please try again later."
+      }
+      redirectLink="/"
+      redirectText="Back to Home"
+    />
   );
 }
 
-export function CustomError({
-  showRedirectText = true,
-  heading = "Oops! Something went wrong.",
-  statusText = "500",
-  message = "We're experiencing technical difficulties. Please try again later.",
-  redirectText = "Home Page",
-  isFullWidth,
-  err,
-  showMessage = true,
-  showStatusText,
-  statusCode,
-  isModal,
-  redirectLink = "/",
-  children,
-  ...props
-}: ErrorType) {
-  return (
-    <section
-      className="h-full flex flex-col justify-center items-center"
-      {...props}
-    >
-      <main className={isFullWidth ? "max-w-full" : ""}>
-        <div className="text-center">
-          <h1 className="text-4xl font-extrabold mb-6">{heading}</h1>
-          <div className={isFullWidth ? "w-full" : ""}>
-            <ErrorMessage
-              showStatusText={showStatusText}
-              showMessage={showMessage}
-              message={message}
-              statusText={statusText}
-            />
-          </div>
-          {showRedirectText && (
-            <div>
-              Go to{" "}
-              <Link
-                href={redirectLink}
-                passHref
-                className="text-primary pointer underline"
-              >
-                {redirectText}
-              </Link>{" "}
-              {/* <div>
-                Looks like you&apos;re on the wrong side of town, buddy.
-                Let&apos;s get you back on the <Link href="/">right side</Link>.
-              </div> */}
-            </div>
-          )}
-          {children}
-        </div>
-      </main>
-    </section>
-  );
-}
-
-CustomError.getInitialProps = async ({ res, err }: any) => {
+// custom server-side props
+CustomErrorPage.getInitialProps = async ({ res, err }: any) => {
   const statusCode = res ? res.statusCode : err?.statusCode || 404;
-  const errorInitialProps = await NextErrorComponent.getInitialProps({
-    res,
-    err,
-  } as any);
-  errorInitialProps.statusCode = statusCode;
-
-  return statusCode < 500
-    ? errorInitialProps
-    : { ...errorInitialProps, statusCode };
+  return { statusCode, err };
 };
-
-export default CustomError;
diff --git a/tools/tenscan/frontend/pages/address/[address].tsx b/tools/tenscan/frontend/pages/address/[address].tsx
index 32777aa68e..05c70e86eb 100644
--- a/tools/tenscan/frontend/pages/address/[address].tsx
+++ b/tools/tenscan/frontend/pages/address/[address].tsx
@@ -1,10 +1,8 @@
-import HeadSeo from "@/src/components/head-seo";
+import React from "react";
 import Layout from "@/src/components/layouts/default-layout";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { Button } from "@/src/components/ui/button";
-import { siteMetadata } from "@/src/lib/siteMetadata";
+import EmptyState from "@repo/ui/components/common/empty-state";
+import { Button } from "@repo/ui/components/shared/button";
 import { useRouter } from "next/router";
-import React from "react";
 
 const AddressDetails = () => {
   const { push } = useRouter();
diff --git a/tools/tenscan/frontend/pages/batch/[hash].tsx b/tools/tenscan/frontend/pages/batch/[hash].tsx
index cd55e6f65c..bb6bac900a 100644
--- a/tools/tenscan/frontend/pages/batch/[hash].tsx
+++ b/tools/tenscan/frontend/pages/batch/[hash].tsx
@@ -7,8 +7,8 @@ import {
   CardTitle,
   CardContent,
   CardDescription,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
+import LoadingState from "@repo/ui/components/common/loading-state";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
@@ -26,7 +26,7 @@ export default function Batch() {
   return (
     <Layout>
       {isLoading ? (
-        <Skeleton className="h-6 w-24" />
+        <LoadingState numberOfItems={10} />
       ) : batchDetails ? (
         <Card className="col-span-3">
           <CardHeader>
diff --git a/tools/tenscan/frontend/pages/batch/height/[height].tsx b/tools/tenscan/frontend/pages/batch/height/[height].tsx
index 7982d825cf..f0624fb889 100644
--- a/tools/tenscan/frontend/pages/batch/height/[height].tsx
+++ b/tools/tenscan/frontend/pages/batch/height/[height].tsx
@@ -1,14 +1,14 @@
 import { fetchBatchByHeight } from "@/api/batches";
 import Layout from "@/src/components/layouts/default-layout";
 import { BatchHeightDetailsComponent } from "@/src/components/modules/batches/batch-height-details";
+import LoadingState from "@repo/ui/components/common/loading-state";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
   CardDescription,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
@@ -26,7 +26,7 @@ export default function Batch() {
   return (
     <Layout>
       {isLoading ? (
-        <Skeleton className="h-6 w-24" />
+        <LoadingState numberOfItems={10} />
       ) : batchDetails ? (
         <Card className="col-span-3">
           <CardHeader>
diff --git a/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx b/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx
deleted file mode 100644
index 1d0748d532..0000000000
--- a/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { fetchBatchTransactions } from "@/api/batches";
-import Layout from "@/src/components/layouts/default-layout";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
-import { columns } from "@/src/components/modules/batches/transaction-columns";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardDescription,
-} from "@/src/components/ui/card";
-import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "next/router";
-import { getOptions } from "@/src/lib/constants";
-import TruncatedAddress from "@/src/components/modules/common/truncated-address";
-
-export default function BatchTransactions() {
-  const router = useRouter();
-  const { fullHash } = router.query;
-  const options = getOptions(router.query);
-
-  const { data, isLoading, refetch } = useQuery({
-    queryKey: ["batchTransactions", { fullHash, options }],
-    queryFn: () => fetchBatchTransactions(fullHash as string, options),
-  });
-
-  const { TransactionsData, Total } = data?.result || {
-    TransactionsData: [],
-    Total: 0,
-  };
-
-  return (
-    <Layout>
-      <Card className="col-span-3">
-        <CardHeader>
-          <CardTitle>Transactions</CardTitle>
-          <CardDescription className="flex items-center space-x-2">
-            <p>Overview of all transactions in this batch:</p>
-            <TruncatedAddress
-              address={fullHash as string}
-              showCopy={false}
-              link={"/batch/" + fullHash}
-            />
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <DataTable
-            columns={columns}
-            data={TransactionsData}
-            refetch={refetch}
-            total={+Total}
-            isLoading={isLoading}
-            noResultsMessage="No transactions found in this batch."
-            noPagination={true}
-          />
-        </CardContent>
-      </Card>
-    </Layout>
-  );
-}
-
-export async function getServerSideProps(context: any) {
-  return {
-    props: {},
-  };
-}
diff --git a/tools/tenscan/frontend/pages/batch/txs/[hash].tsx b/tools/tenscan/frontend/pages/batch/txs/[hash].tsx
new file mode 100644
index 0000000000..4de42bc959
--- /dev/null
+++ b/tools/tenscan/frontend/pages/batch/txs/[hash].tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { fetchBatchTransactions } from "../../../api/batches";
+import Layout from "../../../src/components/layouts/default-layout";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { columns } from "../../../src/components/modules/batches/transaction-columns";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@repo/ui/components/shared/card";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { getOptions } from "../../../src/lib/constants";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
+
+export default function BatchTransactions() {
+  const router = useRouter();
+  const { hash } = router.query;
+  const options = getOptions(router.query);
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["batchTransactions", { hash, options }],
+    queryFn: () => fetchBatchTransactions(hash as string, options),
+  });
+
+  const { TransactionsData, Total } = data?.result || {
+    TransactionsData: [],
+    Total: 0,
+  };
+
+  return (
+    <Layout>
+      <Card className="col-span-3">
+        <CardHeader>
+          <CardTitle>Transactions</CardTitle>
+          <div className="flex space-x-2 wrap">
+            <CardDescription className="flex items-center space-x-2">
+              <span>
+                Overview of all transactions in this batch:
+                <TruncatedAddress
+                  address={hash as string}
+                  showCopy={false}
+                  link={pathToUrl(pageLinks.batchByHash, {
+                    hash: hash as string,
+                  })}
+                />
+              </span>
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            columns={columns}
+            data={TransactionsData}
+            refetch={refetch}
+            total={+Total}
+            isLoading={isLoading}
+            noResultsMessage="No transactions found in this batch."
+            noPagination={true}
+          />
+        </CardContent>
+      </Card>
+    </Layout>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}
diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx
index 2517daac17..318460b4d6 100644
--- a/tools/tenscan/frontend/pages/batches/index.tsx
+++ b/tools/tenscan/frontend/pages/batches/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { columns } from "@/src/components/modules/batches/columns";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
-import { getItem } from "@/src/lib/utils";
-import { ItemPosition } from "@/src/types/interfaces";
+import { getItem } from "@repo/ui/lib/utils";
 import { siteMetadata } from "@/src/lib/siteMetadata";
 import HeadSeo from "@/src/components/head-seo";
+import { ItemPosition } from "@repo/ui/lib/enums/ui";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -15,22 +15,12 @@ export const metadata: Metadata = {
 };
 
 export default function Batches() {
-  const { batches, refetchBatches, isBatchesLoading, setNoPolling } =
-    useBatchesService();
+  const { batches, refetchBatches, isBatchesLoading } = useBatchesService();
   const { BatchesData, Total } = batches?.result || {
     BatchesData: [],
     Total: 0,
   };
 
-  React.useEffect(() => {
-    setNoPolling(true);
-
-    return () => {
-      setNoPolling(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const firstBatchHeight = Number(getItem(BatchesData, "height"));
   const lastBatchHeight = Number(
     getItem(BatchesData, "height", ItemPosition.LAST)
diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx
index 756add84b4..4383266fe3 100644
--- a/tools/tenscan/frontend/pages/blocks/index.tsx
+++ b/tools/tenscan/frontend/pages/blocks/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { columns } from "@/src/components/modules/blocks/columns";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
-import { getItem } from "@/src/lib/utils";
-import { ItemPosition } from "@/src/types/interfaces";
+import { getItem } from "@repo/ui/lib/utils";
 import HeadSeo from "@/src/components/head-seo";
 import { siteMetadata } from "@/src/lib/siteMetadata";
+import { ItemPosition } from "@repo/ui/lib/enums/ui";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -15,19 +15,12 @@ export const metadata: Metadata = {
 };
 
 export default function Blocks() {
-  const { blocks, setNoPolling, refetchBlocks, isBlocksLoading } =
-    useBlocksService();
+  const { blocks, refetchBlocks, isBlocksLoading } = useBlocksService();
   const { BlocksData, Total } = blocks?.result || {
     BlocksData: [],
     Total: 0,
   };
 
-  React.useEffect(() => {
-    setNoPolling(true);
-    return () => setNoPolling(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const firstBlockNumber = Number(getItem(BlocksData, "blockHeader.number"));
   const lastBlockNumber = Number(
     getItem(BlocksData, "blockHeader.number", ItemPosition.LAST)
diff --git a/tools/tenscan/frontend/pages/docs/[id].tsx b/tools/tenscan/frontend/pages/docs/[id].tsx
index 56ca02d6d0..a1b4da5f6a 100644
--- a/tools/tenscan/frontend/pages/docs/[id].tsx
+++ b/tools/tenscan/frontend/pages/docs/[id].tsx
@@ -1,11 +1,11 @@
 import Layout from "@/src/components/layouts/default-layout";
-import Spinner from "@/src/components/ui/spinner";
 import { siteMetadata } from "@/src/lib/siteMetadata";
 import { useRouter } from "next/router";
 import React from "react";
-import Custom404Error from "../404";
-import { showToast } from "@/src/components/ui/use-toast";
-import { ToastType } from "@/src/types/interfaces";
+import { showToast } from "@repo/ui/components/shared/use-toast";
+import { ToastType } from "@repo/ui/lib/enums/toast";
+import Custom404Error from "@repo/ui/components/common/404";
+import Spinner from "@repo/ui/components/shared/spinner";
 
 type Document = {
   title: string;
diff --git a/tools/tenscan/frontend/pages/personal/index.tsx b/tools/tenscan/frontend/pages/personal/index.tsx
index 28c4e74e70..d228f98e0d 100644
--- a/tools/tenscan/frontend/pages/personal/index.tsx
+++ b/tools/tenscan/frontend/pages/personal/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import Layout from "@/src/components/layouts/default-layout";
+import Layout from "../../src/components/layouts/default-layout";
 import { Metadata } from "next";
-import PersonalTransactions from "@/src/components/modules/personal";
-import { useWalletConnection } from "@/src/components/providers/wallet-provider";
-import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { ethereum } from "@/src/lib/utils";
-import HeadSeo from "@/src/components/head-seo";
-import { siteMetadata } from "@/src/lib/siteMetadata";
+import PersonalTransactions from "../../src/components/modules/personal";
+import useWalletStore from "@repo/ui/stores/wallet-store";
+import ConnectWalletButton from "@repo/ui/components/common/connect-wallet";
+import EmptyState from "@repo/ui/components/common/empty-state";
+import { ethereum } from "@repo/ui/lib/utils";
+import HeadSeo from "../../src/components/head-seo";
+import { siteMetadata } from "../../src/lib/siteMetadata";
 
 export const metadata: Metadata = {
   title: "Personal Transactions",
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 };
 
 export default function PersonalPage() {
-  const { walletConnected } = useWalletConnection();
+  const { walletConnected } = useWalletStore();
 
   return (
     <>
diff --git a/tools/tenscan/frontend/pages/tx/personal/[hash].tsx b/tools/tenscan/frontend/pages/personal/tx/[hash].tsx
similarity index 70%
rename from tools/tenscan/frontend/pages/tx/personal/[hash].tsx
rename to tools/tenscan/frontend/pages/personal/tx/[hash].tsx
index 65e0c9889c..00dfdfbf60 100644
--- a/tools/tenscan/frontend/pages/tx/personal/[hash].tsx
+++ b/tools/tenscan/frontend/pages/personal/tx/[hash].tsx
@@ -1,24 +1,25 @@
-import Layout from "@/src/components/layouts/default-layout";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { Button } from "@/src/components/ui/button";
+import React from "react";
+import Layout from "../../../src/components/layouts/default-layout";
+import EmptyState from "@repo/ui/components/common/empty-state";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
-import { fetchPersonalTxnByHash } from "@/api/transactions";
-import { useWalletConnection } from "@/src/components/providers/wallet-provider";
-import { PersonalTxnDetailsComponent } from "@/src/components/modules/personal/personal-txn-details";
-import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
-import { ethereum } from "@/src/lib/utils";
+import { fetchPersonalTxnByHash } from "../../../api/transactions";
+import { PersonalTxnDetailsComponent } from "../../../src/components/modules/personal/personal-txn-details";
+import { ethereum } from "@repo/ui/lib/utils";
+import useWalletStore from "@repo/ui/stores/wallet-store";
+import ConnectWalletButton from "@repo/ui/components/common/connect-wallet";
+import LoadingState from "@repo/ui/components/common/loading-state";
 
 export default function TransactionDetails() {
   const router = useRouter();
-  const { provider, walletConnected } = useWalletConnection();
+  const { provider, walletConnected } = useWalletStore();
   const { hash } = router.query;
 
   const { data: transactionDetails, isLoading } = useQuery({
@@ -31,7 +32,7 @@ export default function TransactionDetails() {
     <Layout>
       {walletConnected ? (
         isLoading ? (
-          <Skeleton className="h-full w-full" />
+          <LoadingState numberOfItems={10} />
         ) : transactionDetails ? (
           <Card className="col-span-3">
             <CardHeader>
diff --git a/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx b/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx
index 7df649aef2..e694ac4513 100644
--- a/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx
+++ b/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { columns } from "@/src/components/modules/batches/columns";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
-import { formatNumber } from "@/src/lib/utils";
+import { formatNumber } from "@repo/ui/lib/utils";
 import { useRollupsService } from "@/src/services/useRollupsService";
 
 export const metadata: Metadata = {
diff --git a/tools/tenscan/frontend/pages/rollup/[hash]/index.tsx b/tools/tenscan/frontend/pages/rollup/[hash]/index.tsx
index 889f780409..b121ef04c3 100644
--- a/tools/tenscan/frontend/pages/rollup/[hash]/index.tsx
+++ b/tools/tenscan/frontend/pages/rollup/[hash]/index.tsx
@@ -1,16 +1,16 @@
 import { fetchRollupByHash } from "@/api/rollups";
 import Layout from "@/src/components/layouts/default-layout";
 import { RollupDetailsComponent } from "@/src/components/modules/rollups/rollup-details";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { Button } from "@/src/components/ui/button";
+import EmptyState from "@repo/ui/components/common/empty-state";
+import LoadingState from "@repo/ui/components/common/loading-state";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
   CardDescription,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
@@ -28,7 +28,7 @@ export default function RollupDetails() {
   return (
     <Layout>
       {isLoading ? (
-        <Skeleton className="h-full w-full" />
+        <LoadingState numberOfItems={10} />
       ) : rollupDetails ? (
         <Card className="col-span-3">
           <CardHeader>
diff --git a/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx b/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx
index eb8b2716d8..c551d16515 100644
--- a/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx
+++ b/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx
@@ -1,18 +1,18 @@
 import { fetchRollupByBatchSequence } from "@/api/rollups";
 import Layout from "@/src/components/layouts/default-layout";
-import EmptyState from "@/src/components/modules/common/empty-state";
+import EmptyState from "@repo/ui/components/common/empty-state";
 import { RollupDetailsComponent } from "@/src/components/modules/rollups/rollup-details";
-import { Button } from "@/src/components/ui/button";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
   CardDescription,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
+import LoadingState from "@repo/ui/components/common/loading-state";
 
 export default function RollupBatchSequenceDetails() {
   const router = useRouter();
@@ -28,7 +28,7 @@ export default function RollupBatchSequenceDetails() {
   return (
     <Layout>
       {isLoading ? (
-        <Skeleton className="h-full w-full" />
+        <LoadingState numberOfItems={10} />
       ) : rollupDetails ? (
         <Card className="col-span-3">
           <CardHeader>
diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx
index f9932f73f8..7d8b6a19d1 100644
--- a/tools/tenscan/frontend/pages/rollups/index.tsx
+++ b/tools/tenscan/frontend/pages/rollups/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { Metadata } from "next";
 import { columns } from "@/src/components/modules/rollups/columns";
-import { getItem } from "@/src/lib/utils";
-import { ItemPosition } from "@/src/types/interfaces";
+import { getItem } from "@repo/ui/lib/utils";
 import HeadSeo from "@/src/components/head-seo";
 import { siteMetadata } from "@/src/lib/siteMetadata";
+import { ItemPosition } from "@repo/ui/lib/enums/ui";
 
 export const metadata: Metadata = {
   title: "Rollups",
@@ -15,22 +15,12 @@ export const metadata: Metadata = {
 };
 
 export default function Rollups() {
-  const { rollups, setNoPolling, isRollupsLoading, refetchRollups } =
-    useRollupsService();
+  const { rollups, isRollupsLoading, refetchRollups } = useRollupsService();
   const { RollupsData, Total } = rollups?.result || {
     RollupsData: [],
     Total: 0,
   };
 
-  React.useEffect(() => {
-    setNoPolling(true);
-
-    return () => {
-      setNoPolling(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const firstRollupID = Number(getItem(RollupsData, "ID"));
   const lastRollupID = Number(getItem(RollupsData, "ID", ItemPosition.LAST));
 
diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx
index a94c0e45d4..5225b70d3d 100644
--- a/tools/tenscan/frontend/pages/transactions/index.tsx
+++ b/tools/tenscan/frontend/pages/transactions/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { columns } from "@/src/components/modules/transactions/columns";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { Metadata } from "next";
-import { getItem } from "@/src/lib/utils";
-import { ItemPosition } from "@/src/types/interfaces";
+import { getItem } from "@repo/ui/lib/utils";
 import HeadSeo from "@/src/components/head-seo";
 import { siteMetadata } from "@/src/lib/siteMetadata";
+import { ItemPosition } from "@repo/ui/lib/enums/ui";
 
 export const metadata: Metadata = {
   title: "Transactions",
@@ -15,26 +15,13 @@ export const metadata: Metadata = {
 };
 
 export default function Transactions() {
-  const {
-    transactions,
-    refetchTransactions,
-    setNoPolling,
-    isTransactionsLoading,
-  } = useTransactionsService();
+  const { transactions, refetchTransactions, isTransactionsLoading } =
+    useTransactionsService();
   const { TransactionsData, Total } = transactions?.result || {
     TransactionsData: [],
     Total: 0,
   };
 
-  React.useEffect(() => {
-    setNoPolling(true);
-
-    return () => {
-      setNoPolling(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const firstBatchHeight = getItem(TransactionsData, "BatchHeight");
   const lastBatchHeight = getItem(
     TransactionsData,
diff --git a/tools/tenscan/frontend/pages/tx/[hash].tsx b/tools/tenscan/frontend/pages/tx/[hash].tsx
index c47d0fb2ff..dbd3077971 100644
--- a/tools/tenscan/frontend/pages/tx/[hash].tsx
+++ b/tools/tenscan/frontend/pages/tx/[hash].tsx
@@ -1,15 +1,15 @@
 import { fetchTransactionByHash } from "@/api/transactions";
 import Layout from "@/src/components/layouts/default-layout";
 import { TransactionDetailsComponent } from "@/src/components/modules/transactions/transaction-details";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { Button } from "@/src/components/ui/button";
+import EmptyState from "@repo/ui/components/common/empty-state";
+import LoadingState from "@repo/ui/components/common/loading-state";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
+} from "@repo/ui/components/shared/card";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
@@ -28,14 +28,7 @@ export default function TransactionDetails() {
     <Layout>
       <Card className="col-span-3">
         {isLoading ? (
-          <>
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-          </>
+          <LoadingState />
         ) : transactionDetails ? (
           <>
             <CardHeader>
diff --git a/tools/tenscan/frontend/src/components/date-range-picker.tsx b/tools/tenscan/frontend/src/components/date-range-picker.tsx
index 325a998b65..3c90d5c8a1 100644
--- a/tools/tenscan/frontend/src/components/date-range-picker.tsx
+++ b/tools/tenscan/frontend/src/components/date-range-picker.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import * as React from "react";
-import { CalendarIcon } from "@radix-ui/react-icons";
+import { CalendarIcon } from "@repo/ui/components/shared/react-icons";
 import { addDays, format } from "date-fns";
 import { DateRange } from "react-day-picker";
 
-import { cn } from "@/src/lib/utils";
-import { Button } from "@/src/components/ui/button";
-import { Calendar } from "@/src/components/ui/calendar";
+import { cn } from "@repo/ui/lib/utils";
+import { Button } from "@repo/ui/components/shared/button";
+import { Calendar } from "@repo/ui/components/shared/calendar";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/src/components/ui/popover";
+} from "@repo/ui/components/shared/popover";
 
 export function CalendarDateRangePicker({
   className,
diff --git a/tools/tenscan/frontend/src/components/head-seo.tsx b/tools/tenscan/frontend/src/components/head-seo.tsx
index 3cafb9c345..d6d588339f 100644
--- a/tools/tenscan/frontend/src/components/head-seo.tsx
+++ b/tools/tenscan/frontend/src/components/head-seo.tsx
@@ -1,6 +1,6 @@
 import Head from "next/head";
-import { SeoProps } from "../types/interfaces";
 import { siteMetadata } from "../lib/siteMetadata";
+import { SeoProps } from "@repo/ui/lib/interfaces/ui";
 
 const HeadSeo = ({
   title,
diff --git a/tools/tenscan/frontend/src/components/health-indicator.tsx b/tools/tenscan/frontend/src/components/health-indicator.tsx
index c5c0f296dd..c522ac2a5d 100644
--- a/tools/tenscan/frontend/src/components/health-indicator.tsx
+++ b/tools/tenscan/frontend/src/components/health-indicator.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { Badge, badgeVariants } from "./ui/badge";
+import { Badge, badgeVariants } from "@repo/ui/components/shared/badge";
 import { useGeneralService } from "../services/useGeneralService";
-import { BarChart } from "lucide-react";
+import { BarChart } from "@repo/ui/components/shared/react-icons";
 import {
   TooltipProvider,
   TooltipTrigger,
   TooltipContent,
   Tooltip,
-} from "./ui/tooltip";
+} from "@repo/ui/components/shared/tooltip";
 
 const HealthIndicator = () => {
   const [status, setStatus] = React.useState<boolean>(false);
diff --git a/tools/tenscan/frontend/src/components/layouts/footer.tsx b/tools/tenscan/frontend/src/components/layouts/footer.tsx
index 319c42835c..465fdd6b91 100644
--- a/tools/tenscan/frontend/src/components/layouts/footer.tsx
+++ b/tools/tenscan/frontend/src/components/layouts/footer.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link";
-import { socialLinks, version } from "../../lib/constants";
+import { socialLinks } from "@repo/ui/lib/constants";
 import {
   GitHubLogoIcon,
   TwitterLogoIcon,
   DiscordLogoIcon,
-} from "@radix-ui/react-icons";
+} from "@repo/ui/components/shared/react-icons";
+import { version } from "@/src/lib/constants";
 
 const SOCIAL_LINKS = [
   {
diff --git a/tools/tenscan/frontend/src/components/layouts/header.tsx b/tools/tenscan/frontend/src/components/layouts/header.tsx
index 9ba8f94c00..b473e027c5 100644
--- a/tools/tenscan/frontend/src/components/layouts/header.tsx
+++ b/tools/tenscan/frontend/src/components/layouts/header.tsx
@@ -1,13 +1,12 @@
-import { MainNav } from "../main-nav";
-import { ModeToggle } from "../mode-toggle";
-import ConnectWalletButton from "../modules/common/connect-wallet";
-import Link from "next/link";
-import { HamburgerMenuIcon } from "@radix-ui/react-icons";
-import { X } from "lucide-react";
 import { useState } from "react";
-import { Button } from "../ui/button";
-import HealthIndicator from "../health-indicator";
+import Link from "next/link";
 import Image from "next/image";
+import { MainNav } from "../main-nav";
+import { ModeToggle } from "@repo/ui/components/shared/mode-toggle";
+import ConnectWalletButton from "@repo/ui/components/common/connect-wallet";
+import { HamburgerMenuIcon, X } from "@repo/ui/components/shared/react-icons";
+import { Button } from "@repo/ui/components/shared/button";
+import HealthIndicator from "../health-indicator";
 
 export default function Header() {
   return (
diff --git a/tools/tenscan/frontend/src/components/main-nav.tsx b/tools/tenscan/frontend/src/components/main-nav.tsx
index 704af970cb..6f508f2e59 100644
--- a/tools/tenscan/frontend/src/components/main-nav.tsx
+++ b/tools/tenscan/frontend/src/components/main-nav.tsx
@@ -2,17 +2,17 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { cn } from "@/src/lib/utils";
-import { Button } from "./ui/button";
+import { cn } from "@repo/ui/lib/utils";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
-} from "./ui/dropdown-menu";
+} from "@repo/ui/components/shared/dropdown-menu";
 
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon } from "@repo/ui/components/shared/react-icons";
 import { NavLink } from "@/src/types/interfaces";
 import { NavLinks } from "../routes";
 
diff --git a/tools/tenscan/frontend/src/components/mode-toggle.tsx b/tools/tenscan/frontend/src/components/mode-toggle.tsx
deleted file mode 100644
index 7333cb883a..0000000000
--- a/tools/tenscan/frontend/src/components/mode-toggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-
-import { Button } from "@/src/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/src/components/ui/dropdown-menu";
-
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/batches/batch-hash-details.tsx b/tools/tenscan/frontend/src/components/modules/batches/batch-hash-details.tsx
index f48a609f0b..159d9b146d 100644
--- a/tools/tenscan/frontend/src/components/modules/batches/batch-hash-details.tsx
+++ b/tools/tenscan/frontend/src/components/modules/batches/batch-hash-details.tsx
@@ -1,22 +1,33 @@
-import { Separator } from "@/src/components/ui/separator";
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
-import { Badge } from "@/src/components/ui/badge";
-import { Batch, BatchDetails } from "@/src/types/interfaces/BatchInterfaces";
+import { useMemo, useState } from "react";
+import { Separator } from "@repo/ui/components/shared/separator";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import KeyValueItem, {
+  KeyValueList,
+} from "@repo/ui/components/shared/key-value";
+import {
+  formatNumber,
+  formatTimeAgo,
+  formatTimestampToDate,
+} from "@repo/ui/lib/utils";
+import { Badge } from "@repo/ui/components/shared/badge";
 import Link from "next/link";
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-import { Button } from "../../ui/button";
+import {
+  EyeClosedIcon,
+  EyeOpenIcon,
+} from "@repo/ui/components/shared/react-icons";
+import { Button } from "@repo/ui/components/shared/button";
+import Copy from "@repo/ui/components/common/copy";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import JSONPretty from "react-json-pretty";
-import { useState } from "react";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../../ui/tooltip";
-import Copy from "../common/copy";
+} from "@repo/ui/components/shared/tooltip";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
+import { BatchDetails } from "@/src/types/interfaces/BatchInterfaces";
 
 export function BatchHashDetailsComponent({
   batchDetails,
@@ -26,6 +37,31 @@ export function BatchHashDetailsComponent({
   const { decryptedRollup, decryptEncryptedData } = useRollupsService();
   const [showDecryptedData, setShowDecryptedData] = useState(false);
 
+  const transactionHashes = useMemo(
+    () =>
+      batchDetails?.TxHashes.length > 0 ? (
+        <ul>
+          {batchDetails.TxHashes.map((txHash, index) => (
+            <li key={index} className="text-sm">
+              <TruncatedAddress
+                address={txHash}
+                link={pathToUrl(pageLinks.txByHash, { hash: txHash })}
+                showFullLength
+              />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        "-"
+      ),
+    [batchDetails?.TxHashes]
+  );
+
+  const handleDecryptToggle = () => {
+    decryptEncryptedData({ StrData: batchDetails?.EncryptedTxBlob });
+    setShowDecryptedData(!showDecryptedData);
+  };
+
   return (
     <div className="space-y-8">
       <KeyValueList>
@@ -33,7 +69,9 @@ export function BatchHashDetailsComponent({
           label="Batch Height"
           value={
             <Link
-              href={`/batch/height/${Number(batchDetails?.Header?.number)}`}
+              href={pathToUrl(pageLinks.batchByHeight, {
+                height: +batchDetails?.Header?.number,
+              })}
               className="text-primary"
             >
               {"#" + Number(batchDetails?.Header?.number)}
@@ -42,47 +80,75 @@ export function BatchHashDetailsComponent({
         />
         <KeyValueItem
           label="Hash"
-          value={<TruncatedAddress address={batchDetails?.Header?.hash} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.Header?.hash}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Parent Hash"
           value={
-            <TruncatedAddress address={batchDetails?.Header?.parentHash} />
+            <TruncatedAddress
+              address={batchDetails?.Header?.parentHash}
+              showFullLength
+            />
           }
         />
         <KeyValueItem
           label="State Root"
-          value={<TruncatedAddress address={batchDetails?.Header?.stateRoot} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.Header?.stateRoot}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Transactions Root"
           value={
             <TruncatedAddress
               address={batchDetails?.Header?.transactionsRoot}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="Receipts Root"
           value={
-            <TruncatedAddress address={batchDetails?.Header?.receiptsRoot} />
+            <TruncatedAddress
+              address={batchDetails?.Header?.receiptsRoot}
+              showFullLength
+            />
           }
         />
         <KeyValueItem
           label="Timestamp"
           value={
-            <Badge variant={"secondary"}>
-              {formatTimeAgo(batchDetails?.Header?.timestamp)}
+            <Badge variant="secondary">
+              {formatTimeAgo(batchDetails?.Header?.timestamp) +
+                " - " +
+                formatTimestampToDate(batchDetails?.Header?.timestamp)}
             </Badge>
           }
         />
         <KeyValueItem
           label="L1 Proof"
-          value={<TruncatedAddress address={batchDetails?.Header?.l1Proof} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.Header?.l1Proof}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Gas Limit"
-          value={formatNumber(batchDetails?.Header?.gasLimit)}
+          value={
+            <Badge variant="secondary">
+              {formatNumber(batchDetails?.Header?.gasLimit)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Gas Used"
@@ -90,13 +156,18 @@ export function BatchHashDetailsComponent({
         />
         <KeyValueItem
           label="Base Fee Per Gas"
-          value={batchDetails?.Header?.baseFeePerGas || "-"}
+          value={
+            <Badge variant="secondary">
+              {formatNumber(batchDetails?.Header?.baseFeePerGas)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Inbound Cross Chain Hash"
           value={
             <TruncatedAddress
               address={batchDetails?.Header?.inboundCrossChainHash}
+              showFullLength
             />
           }
         />
@@ -106,73 +177,54 @@ export function BatchHashDetailsComponent({
         />
         <KeyValueItem
           label="Miner"
-          value={<TruncatedAddress address={batchDetails?.Header?.miner} />}
-        />
-        <KeyValueItem
-          label="Base Fee Per Gas"
-          value={formatNumber(batchDetails?.Header?.baseFeePerGas)}
-          isLastItem
+          value={
+            <TruncatedAddress
+              address={batchDetails?.Header?.miner}
+              showFullLength
+            />
+          }
         />
-      </KeyValueList>
-      <Separator />
-      <KeyValueList>
+
         <KeyValueItem
           label="Transaction Hashes"
-          value={
-            batchDetails?.TxHashes ? (
-              <ul>
-                {batchDetails?.TxHashes?.map((txHash, index) => (
-                  <li key={index} className="text-sm">
-                    <TruncatedAddress address={txHash} link={`/tx/${txHash}`} />
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              "-"
-            )
-          }
+          value={transactionHashes}
           isLastItem
         />
       </KeyValueList>
+
       <Separator />
+
       <KeyValueList>
         <KeyValueItem
           label="Encrypted Tx Blob"
           value={
             <>
               <div className="flex items-center space-x-2">
-                <TruncatedAddress address={batchDetails?.EncryptedTxBlob} />{" "}
+                <TruncatedAddress address={batchDetails?.EncryptedTxBlob} />
                 <Button
                   className="text-sm font-bold leading-none hover:text-primary hover:bg-transparent"
                   variant="ghost"
-                  onClick={() => {
-                    decryptEncryptedData({
-                      StrData: batchDetails?.EncryptedTxBlob,
-                    });
-                    setShowDecryptedData(!showDecryptedData);
-                  }}
+                  onClick={handleDecryptToggle}
                 >
-                  {showDecryptedData && decryptedRollup ? (
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        {showDecryptedData ? (
                           <EyeClosedIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer ml-2" />
-                        </TooltipTrigger>
-                        <TooltipContent>Hide Encrypted Data</TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  ) : (
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger>
+                        ) : (
                           <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer ml-2" />
-                        </TooltipTrigger>
-                        <TooltipContent>Show Encrypted Data</TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  )}
+                        )}
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {showDecryptedData
+                          ? "Hide Encrypted Data"
+                          : "Show Encrypted Data"}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 </Button>
-                {showDecryptedData && decryptedRollup ? (
+
+                {showDecryptedData && decryptedRollup && (
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger>
@@ -183,14 +235,14 @@ export function BatchHashDetailsComponent({
                       </TooltipContent>
                     </Tooltip>
                   </TooltipProvider>
-                ) : null}
+                )}
               </div>
-              {decryptedRollup && showDecryptedData ? (
+              {showDecryptedData && decryptedRollup && (
                 <>
                   <Separator className="my-4" />
                   <JSONPretty id="json-pretty" data={decryptedRollup} />
                 </>
-              ) : null}
+              )}
             </>
           }
           isLastItem
diff --git a/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx b/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx
index c19a2d07c5..4c58f4654f 100644
--- a/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx
+++ b/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx
@@ -1,21 +1,32 @@
-import { Separator } from "@/src/components/ui/separator";
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
-import { Badge } from "@/src/components/ui/badge";
-import { Batch, BatchDetails } from "@/src/types/interfaces/BatchInterfaces";
+import { Separator } from "@repo/ui/components/shared/separator";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import KeyValueItem, {
+  KeyValueList,
+} from "@repo/ui/components/shared/key-value";
+import {
+  formatNumber,
+  formatTimeAgo,
+  formatTimestampToDate,
+} from "@repo/ui/lib/utils";
+import { Badge } from "@repo/ui/components/shared/badge";
+import { Batch } from "@/src/types/interfaces/BatchInterfaces";
 import Link from "next/link";
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-import { Button } from "../../ui/button";
+import {
+  EyeClosedIcon,
+  EyeOpenIcon,
+} from "@repo/ui/components/shared/react-icons";
+import { Button } from "@repo/ui/components/shared/button";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import JSONPretty from "react-json-pretty";
-import { useState } from "react";
+import React, { useState } from "react";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../../ui/tooltip";
+} from "@repo/ui/components/shared/tooltip";
+import { pageLinks } from "@/src/routes";
+import { pathToUrl } from "@/src/routes/router";
 
 export function BatchHeightDetailsComponent({
   batchDetails,
@@ -41,45 +52,67 @@ export function BatchHeightDetailsComponent({
           value={
             <TruncatedAddress
               address={batchDetails?.header?.hash}
-              link={`/batch/${batchDetails?.header?.hash}`}
+              link={pathToUrl(pageLinks.batchByHash, {
+                hash: batchDetails?.header?.hash,
+              })}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="Parent Hash"
           value={
-            <TruncatedAddress address={batchDetails?.header?.parentHash} />
+            <TruncatedAddress
+              address={batchDetails?.header?.parentHash}
+              showFullLength
+            />
           }
         />
         <KeyValueItem
           label="State Root"
-          value={<TruncatedAddress address={batchDetails?.header?.stateRoot} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.header?.stateRoot}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Transactions Root"
           value={
             <TruncatedAddress
               address={batchDetails?.header?.transactionsRoot}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="Receipts Root"
           value={
-            <TruncatedAddress address={batchDetails?.header?.receiptsRoot} />
+            <TruncatedAddress
+              address={batchDetails?.header?.receiptsRoot}
+              showFullLength
+            />
           }
         />
         <KeyValueItem
           label="Timestamp"
           value={
             <Badge variant={"secondary"}>
-              {formatTimeAgo(batchDetails?.header?.timestamp)}
+              {formatTimeAgo(batchDetails?.header?.timestamp) +
+                " - " +
+                formatTimestampToDate(batchDetails?.header?.timestamp)}
             </Badge>
           }
         />
         <KeyValueItem
           label="L1 Proof"
-          value={<TruncatedAddress address={batchDetails?.header?.l1Proof} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.header?.l1Proof}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Gas Limit"
@@ -106,6 +139,7 @@ export function BatchHeightDetailsComponent({
           value={
             <TruncatedAddress
               address={batchDetails?.header?.inboundCrossChainHash}
+              showFullLength
             />
           }
         />
@@ -115,7 +149,12 @@ export function BatchHeightDetailsComponent({
         />
         <KeyValueItem
           label="Miner"
-          value={<TruncatedAddress address={batchDetails?.header?.miner} />}
+          value={
+            <TruncatedAddress
+              address={batchDetails?.header?.miner}
+              showFullLength
+            />
+          }
         />
         <KeyValueItem
           label="Base Fee Per Gas"
@@ -128,12 +167,21 @@ export function BatchHeightDetailsComponent({
         <KeyValueItem
           label="No. of Transactions"
           value={
-            <Link
-              href={`/batch/txs/${batchDetails?.header?.hash}`}
-              className="text-primary"
-            >
-              {batchDetails?.txCount || "-"}
-            </Link>
+            batchDetails?.txCount > 0 ? (
+              <span>
+                {batchDetails?.txCount}{" "}
+                <Link
+                  href={pathToUrl(pageLinks.batchTransactions, {
+                    hash: batchDetails?.header?.hash,
+                  })}
+                  className="underline text-primary"
+                >
+                  View
+                </Link>
+              </span>
+            ) : (
+              batchDetails?.txCount || "-"
+            )
           }
           isLastItem
         />
diff --git a/tools/tenscan/frontend/src/components/modules/batches/columns.tsx b/tools/tenscan/frontend/src/components/modules/batches/columns.tsx
index c53138b099..721d15b5b2 100644
--- a/tools/tenscan/frontend/src/components/modules/batches/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/batches/columns.tsx
@@ -2,12 +2,14 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
-import TruncatedAddress from "../common/truncated-address";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatNumber, formatTimeAgo } from "@repo/ui/lib/utils";
 import { Batch } from "@/src/types/interfaces/BatchInterfaces";
 import Link from "next/link";
-import { Badge } from "../../ui/badge";
+import { Badge } from "@repo/ui/components/shared/badge";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export const columns: ColumnDef<Batch>[] = [
   {
@@ -19,7 +21,9 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <div className="flex space-x-2">
           <Link
-            href={`/batch/height/${row.original.height}`}
+            href={pathToUrl(pageLinks.batchByHeight, {
+              height: row.original.height,
+            })}
             className="text-primary"
           >
             <span className="max-w-[500px] truncate">
@@ -98,7 +102,9 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <TruncatedAddress
           address={row.original.header.hash}
-          link={`/batch/${row.original.fullHash}`}
+          link={pathToUrl(pageLinks.batchByHash, {
+            hash: row.original.header.hash,
+          })}
         />
       );
     },
@@ -124,7 +130,9 @@ export const columns: ColumnDef<Batch>[] = [
     cell: ({ row }) => {
       return (
         <Link
-          href={`/rollup/batch/sequence/${row.original.sequence}`}
+          href={pathToUrl(pageLinks.rollupByBatchSequence, {
+            sequence: row.original.sequence,
+          })}
           className="text-primary"
         >
           {row.original.sequence}
@@ -140,13 +148,17 @@ export const columns: ColumnDef<Batch>[] = [
       <DataTableColumnHeader column={column} title="Tx Count" />
     ),
     cell: ({ row }) => {
-      return (
+      return row.original.txCount > 0 ? (
         <Link
-          href={`/batch/txs/${row.original.fullHash}`}
+          href={pathToUrl(pageLinks.batchTransactions, {
+            hash: row.original.fullHash,
+          })}
           className="text-primary"
         >
           {row.original.txCount}
         </Link>
+      ) : (
+        <span>{row.original.txCount}</span>
       );
     },
     enableSorting: false,
diff --git a/tools/tenscan/frontend/src/components/modules/batches/constants.tsx b/tools/tenscan/frontend/src/components/modules/batches/constants.tsx
index 395dc4771b..6f740be779 100644
--- a/tools/tenscan/frontend/src/components/modules/batches/constants.tsx
+++ b/tools/tenscan/frontend/src/components/modules/batches/constants.tsx
@@ -3,7 +3,7 @@ import {
   ArrowRightIcon,
   ArrowUpIcon,
   CheckCircledIcon,
-} from "@radix-ui/react-icons";
+} from "@repo/ui/components/shared/react-icons";
 
 export const labels = [
   {
diff --git a/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx b/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx
index 4e1e97ff75..5ce0aa849b 100644
--- a/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Badge } from "@/src/components/ui/badge";
-
+import { Badge } from "@repo/ui/components/shared/badge";
 import { statuses } from "../transactions/constants";
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
-import TruncatedAddress from "../common/truncated-address";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
 import Link from "next/link";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export const columns: ColumnDef<Transaction>[] = [
   {
@@ -39,7 +39,9 @@ export const columns: ColumnDef<Transaction>[] = [
       return (
         <TruncatedAddress
           address={row.getValue("TransactionHash")}
-          link={`/tx/${row.original.TransactionHash}`}
+          link={pathToUrl(pageLinks.txByHash, {
+            hash: row.original.TransactionHash,
+          })}
         />
       );
     },
diff --git a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx
index ee189d114b..b7b04e657a 100644
--- a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx
@@ -2,14 +2,15 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
 import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces";
-import TruncatedAddress from "../common/truncated-address";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
-import { Badge } from "../../ui/badge";
-import ExternalLink from "../../ui/external-link";
-import { externalLinks } from "@/src/routes";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatNumber, formatTimeAgo } from "@repo/ui/lib/utils";
+import { Badge } from "@repo/ui/components/shared/badge";
+import ExternalLink from "@repo/ui/components/shared/external-link";
+import { externalPageLinks, pageLinks } from "@/src/routes";
+import { EyeOpenIcon } from "@repo/ui/components/shared/react-icons";
+import { pathToUrl } from "@/src/routes/router";
 
 export const columns: ColumnDef<Block>[] = [
   {
@@ -62,7 +63,9 @@ export const columns: ColumnDef<Block>[] = [
       ) : (
         <TruncatedAddress
           address={row.original.rollupHash}
-          link={`/rollup/${row.original.rollupHash}`}
+          link={pathToUrl(pageLinks.rollupByHash, {
+            hash: row.original.rollupHash,
+          })}
         />
       );
     },
@@ -152,7 +155,9 @@ export const columns: ColumnDef<Block>[] = [
       const blockHeader = row.original.blockHeader as BlockHeader;
       return (
         <ExternalLink
-          href={`${externalLinks.etherscanBlock}${blockHeader?.hash}`}
+          href={pathToUrl(externalPageLinks.etherscanBlock, {
+            hash: blockHeader?.hash,
+          })}
         >
           <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer mr-2" />
         </ExternalLink>
diff --git a/tools/tenscan/frontend/src/components/modules/blocks/constants.tsx b/tools/tenscan/frontend/src/components/modules/blocks/constants.tsx
index eca2d7c2b5..b26313a56d 100644
--- a/tools/tenscan/frontend/src/components/modules/blocks/constants.tsx
+++ b/tools/tenscan/frontend/src/components/modules/blocks/constants.tsx
@@ -2,7 +2,7 @@ import {
   ArrowDownIcon,
   ArrowRightIcon,
   ArrowUpIcon,
-} from "@radix-ui/react-icons";
+} from "@repo/ui/components/shared/react-icons";
 
 export const priorities = [
   {
diff --git a/tools/tenscan/frontend/src/components/modules/common/connect-wallet.tsx b/tools/tenscan/frontend/src/components/modules/common/connect-wallet.tsx
deleted file mode 100644
index 0bdba6765e..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/connect-wallet.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useWalletConnection } from "@/src/components/providers/wallet-provider";
-import { Button } from "@/src/components/ui/button";
-import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons";
-import React from "react";
-import TruncatedAddress from "./truncated-address";
-import { downloadMetaMask, ethereum } from "@/src/lib/utils";
-const ConnectWalletButton = ({ text }: { text?: string }) => {
-  const { walletConnected, walletAddress, connectWallet, disconnectWallet } =
-    useWalletConnection();
-
-  return (
-    <Button
-      className="font-medium leading-none"
-      variant={"outline"}
-      onClick={
-        ethereum
-          ? walletConnected
-            ? disconnectWallet
-            : connectWallet
-          : downloadMetaMask
-      }
-      suppressHydrationWarning
-    >
-      {walletConnected ? (
-        <>
-          <LinkBreak2Icon className="h-4 w-4 mr-1" />
-          {walletAddress ? (
-            <TruncatedAddress address={walletAddress} showCopy={false} />
-          ) : (
-            "Wallet"
-          )}
-        </>
-      ) : (
-        <>
-          <Link2Icon className="h-4 w-4 mr-1" />
-          {ethereum ? "Connect" : text || "Install MetaMask"}
-        </>
-      )}
-    </Button>
-  );
-};
-
-export default ConnectWalletButton;
diff --git a/tools/tenscan/frontend/src/components/modules/common/copy.tsx b/tools/tenscan/frontend/src/components/modules/common/copy.tsx
deleted file mode 100644
index d24114ed0d..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/copy.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { CopyIcon, CheckIcon } from "@radix-ui/react-icons";
-import { useCopy } from "@/src/hooks/useCopy";
-import { Button } from "../../ui/button";
-
-const Copy = ({ value }: { value: string | number }) => {
-  const { copyToClipboard, copied } = useCopy();
-  return (
-    <Button
-      type="submit"
-      variant={"clear"}
-      size="sm"
-      className="text-muted-foreground"
-      onClick={() => copyToClipboard(value.toString())}
-    >
-      <span className="sr-only">Copy</span>
-      {copied ? <CheckIcon className="text-primary" /> : <CopyIcon />}
-    </Button>
-  );
-};
-
-export default Copy;
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-column-header.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-column-header.tsx
deleted file mode 100644
index 07fbb0cc3a..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-column-header.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from "@radix-ui/react-icons";
-import { Column } from "@tanstack/react-table";
-
-import { cn } from "@/src/lib/utils";
-import { Button } from "@/src/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/src/components/ui/dropdown-menu";
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>;
-  title: string;
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>;
-  }
-
-  return (
-    <div className={cn("flex items-center space-x-2", className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
-            ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
-            ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Desc
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Hide
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-faceted-filter.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-faceted-filter.tsx
deleted file mode 100644
index 641973c663..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-faceted-filter.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import * as React from "react";
-import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons";
-import { Column } from "@tanstack/react-table";
-
-import { cn } from "@/src/lib/utils";
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/src/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/src/components/ui/popover";
-import { Separator } from "@/src/components/ui/separator";
-
-interface DataTableFacetedFilterProps<TData, TValue> {
-  column?: Column<TData, TValue>;
-  title?: string;
-  options: {
-    label: string;
-    value: string;
-    icon?: React.ComponentType<{ className?: string }>;
-  }[];
-}
-
-export function DataTableFacetedFilter<TData, TValue>({
-  column,
-  title,
-  options,
-}: DataTableFacetedFilterProps<TData, TValue>) {
-  const facets = column?.getFacetedUniqueValues();
-  const selectedValues = new Set(column?.getFilterValue() as string[]);
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
-          {title}
-          {selectedValues?.size > 0 && (
-            <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
-              <Badge
-                variant="secondary"
-                className="rounded-sm px-1 font-normal lg:hidden"
-              >
-                {selectedValues.size}
-              </Badge>
-              <div className="hidden space-x-1 lg:flex">
-                {selectedValues.size > 2 ? (
-                  <Badge
-                    variant="secondary"
-                    className="rounded-sm px-1 font-normal"
-                  >
-                    {selectedValues.size} selected
-                  </Badge>
-                ) : (
-                  options
-                    .filter((option) => selectedValues.has(option.value))
-                    .map((option) => (
-                      <Badge
-                        variant="secondary"
-                        key={option.value}
-                        className="rounded-sm px-1 font-normal"
-                      >
-                        {option.label}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandInput placeholder={title} />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => {
-                const isSelected = selectedValues.has(option.value);
-                return (
-                  <CommandItem
-                    key={option.value}
-                    onSelect={() => {
-                      if (isSelected) {
-                        selectedValues.delete(option.value);
-                      } else {
-                        selectedValues.add(option.value);
-                      }
-                      const filterValues = Array.from(selectedValues);
-                      column?.setFilterValue(
-                        filterValues.length ? filterValues : undefined
-                      );
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible"
-                      )}
-                    >
-                      <CheckIcon className={cn("h-4 w-4")} />
-                    </div>
-                    {option.icon && (
-                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                    )}
-                    <span>{option.label}</span>
-                    {facets?.get(option.value) && (
-                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
-                        {facets.get(option.value)}
-                      </span>
-                    )}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {selectedValues.size > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => column?.setFilterValue(undefined)}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
deleted file mode 100644
index 0a61d0f786..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-} from "@radix-ui/react-icons";
-import { PaginationState, Table } from "@tanstack/react-table";
-import { Button } from "@/src/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/src/components/ui/select";
-import { Input } from "@/src/components/ui/input";
-import { useState } from "react";
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-  refetch?: () => void;
-  setPagination: (pagination: PaginationState) => void;
-}
-
-export function DataTablePagination<TData>({
-  table,
-  refetch,
-  setPagination,
-}: DataTablePaginationProps<TData>) {
-  const [page, setPage] = useState(table.getState().pagination.pageIndex);
-
-  const handlePageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPage(Number(e.target.value));
-  };
-
-  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (
-      e.key === "Enter" &&
-      page > 0 &&
-      page !== table.getState().pagination.pageIndex
-    ) {
-      table.setPageIndex(page);
-      refetch?.();
-    }
-  };
-
-  return (
-    <div className="flex items-center flex-wrap justify-between space-x-2">
-      <div className="flex-1 text-sm text-muted-foreground mb-2">
-        Showing {table?.getFilteredRowModel()?.rows?.length} row(s)
-      </div>
-      <div className="flex flex-2 gap-1 items-center justify-between flex-wrap space-x-6 lg:space-x-8">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value: string) => {
-              table.setPageSize(Number(value));
-              setPagination({ pageIndex: 1, pageSize: Number(value) });
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[5, 10, 20, 30, 40, 50, 100].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          <span>Page</span>
-          <Input
-            className="w-[70px] h-8 text-center mx-2 text-ellipsis"
-            type="number"
-            value={page}
-            onChange={handlePageChange}
-            onKeyDown={handleKey}
-            min={1}
-            onFocus={(e) => e.target.select()}
-            onBlur={() => setPage(table.getState().pagination.pageIndex)}
-          />
-          {/* uncomment the following line when total count feature is implemented */}
-          {/* of {formatNumber(table.getPageCount())} */}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => {
-              setPage(1);
-              table.setPageIndex(1);
-            }}
-            disabled={table.getState().pagination.pageIndex === 1}
-          >
-            <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => {
-              setPage(table.getState().pagination.pageIndex - 1);
-              table.previousPage();
-            }}
-            disabled={table.getState().pagination.pageIndex === 1}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => {
-              setPage(table.getState().pagination.pageIndex + 1);
-              table.nextPage();
-            }}
-            disabled={
-              table.getState().pagination.pageSize >
-              table?.getFilteredRowModel()?.rows?.length
-            }
-            // uncomment the following line when total count feature is implemented
-            // disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
-          </Button>
-          {/* uncomment the following line when total count feature is implemented */}
-          {/* <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            // disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
-          </Button> */}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx
deleted file mode 100644
index 0f8c652451..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { DotsHorizontalIcon } from "@radix-ui/react-icons";
-import { Row } from "@tanstack/react-table";
-import { Button } from "@/src/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/src/components/ui/dropdown-menu";
-
-interface DataTableRowActionsProps<TData> {
-  row: Row<TData>;
-  labels: { label: string; value: string }[] | null;
-}
-
-export function DataTableRowActions<TData>({
-  row,
-  labels,
-}: DataTableRowActionsProps<any>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-        >
-          <DotsHorizontalIcon className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[160px]">
-        <DropdownMenuItem>View</DropdownMenuItem>
-        {labels === null ? null : (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuRadioGroup value={row.original.label}>
-                  {labels?.map((label) => (
-                    <DropdownMenuRadioItem
-                      key={label.value}
-                      value={label.value}
-                    >
-                      {label.label}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          </>
-        )}
-        <DropdownMenuSeparator />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-toolbar.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-toolbar.tsx
deleted file mode 100644
index 93bee611c0..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-toolbar.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-
-import { Cross2Icon, ReloadIcon } from "@radix-ui/react-icons";
-import { Table } from "@tanstack/react-table";
-
-import { Button } from "@/src/components/ui/button";
-import { Input } from "@/src/components/ui/input";
-import { DataTableViewOptions } from "./data-table-view-options";
-
-import { DataTableFacetedFilter } from "./data-table-faceted-filter";
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>;
-  refetch?: () => void;
-  toolbar?: {
-    column: string;
-    title: string;
-    options: { label: string; value: string }[];
-  }[];
-}
-export function DataTableToolbar<TData>({
-  table,
-  toolbar,
-  refetch,
-}: DataTableToolbarProps<TData>) {
-  const isFiltered = table.getState().columnFilters.length > 0;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center space-x-2">
-        {toolbar?.map(
-          (item, index) =>
-            table.getColumn(item.column) && (
-              <DataTableFacetedFilter
-                key={index}
-                column={table.getColumn(item.column)}
-                title={item.title}
-                options={item.options}
-              />
-            )
-        )}
-        {isFiltered && (
-          <Button
-            variant="ghost"
-            onClick={() => table.resetColumnFilters()}
-            className="h-8 px-2 lg:px-3"
-          >
-            Reset
-            <Cross2Icon className="ml-2 h-4 w-4" />
-          </Button>
-        )}
-      </div>
-      <div className="flex items-center space-x-2">
-        {refetch && (
-          <Button
-            variant="ghost"
-            onClick={refetch}
-            className="h-8 px-2 lg:px-3"
-          >
-            <ReloadIcon className="mr-2 h-4 w-4" />
-            Refresh
-          </Button>
-        )}
-        <DataTableViewOptions table={table} />
-      </div>
-    </div>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-view-options.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-view-options.tsx
deleted file mode 100644
index b8975ff5cb..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-view-options.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import { MixerHorizontalIcon } from "@radix-ui/react-icons";
-import { Table } from "@tanstack/react-table";
-
-import { Button } from "@/src/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from "@/src/components/ui/dropdown-menu";
-
-interface DataTableViewOptionsProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTableViewOptions<TData>({
-  table,
-}: DataTableViewOptionsProps<TData>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
-          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
-          View
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[150px]">
-        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== "undefined" && column.getCanHide()
-          )
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className="capitalize"
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {column.id}
-              </DropdownMenuCheckboxItem>
-            );
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx
deleted file mode 100644
index 982835d6d4..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  OnChangeFn,
-  PaginationState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/src/components/ui/table";
-import { DataTablePagination } from "./data-table-pagination";
-import { DataTableToolbar } from "./data-table-toolbar";
-import { useRouter } from "next/router";
-import { Skeleton } from "@/src/components/ui/skeleton";
-import { Button } from "@/src/components/ui/button";
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  toolbar?: {
-    column: string;
-    title: string;
-    options: { label: string; value: string }[];
-  }[];
-  updateQueryParams?: (query: any) => void;
-  refetch?: () => void;
-  total: number;
-  isLoading?: boolean;
-  noPagination?: boolean;
-  noResultsText?: string;
-  noResultsMessage?: string;
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  toolbar,
-  refetch,
-  total,
-  isLoading,
-  noPagination,
-  noResultsText,
-  noResultsMessage,
-}: DataTableProps<TData, TValue>) {
-  const { query, push, pathname } = useRouter();
-  const [rowSelection, setRowSelection] = React.useState({});
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-
-  const pagination = React.useMemo(() => {
-    return {
-      pageIndex: Number(query.page) || 1,
-      pageSize: Number(query.size) || 20,
-    };
-  }, [query.page, query.size]);
-
-  const setPagination: OnChangeFn<PaginationState> = (func) => {
-    const { pageIndex, pageSize } =
-      typeof func === "function" ? func(pagination) : func;
-    const newPageIndex = pagination.pageSize !== pageSize ? 1 : pageIndex;
-    const params = {
-      ...query,
-      page: newPageIndex > 0 ? newPageIndex : 1,
-      size: pageSize <= 100 ? pageSize : 100,
-    };
-    push({ pathname, query: params });
-  };
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-      pagination,
-    },
-    onPaginationChange: setPagination,
-    manualPagination: true,
-    // pageCount: Math.ceil(total / pagination.pageSize),
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  });
-
-  return (
-    <div className="space-y-4">
-      {data && (
-        <DataTableToolbar table={table} toolbar={toolbar} refetch={refetch} />
-      )}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              <>
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    <Skeleton className="w-full h-full" />
-                  </TableCell>
-                </TableRow>
-              </>
-            ) : data && table?.getRowModel()?.rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  {pagination.pageIndex > 1 ? (
-                    <p>
-                      No {noResultsText || "results"} found for the selected
-                      filters.
-                      <Button
-                        variant={"link"}
-                        onClick={() => {
-                          setPagination({ pageIndex: 1, pageSize: 20 });
-                          refetch?.();
-                        }}
-                      >
-                        Clear Filters
-                      </Button>
-                    </p>
-                  ) : (
-                    <p>
-                      {noResultsMessage ||
-                        `No ${noResultsText || "results"} found.`}
-                    </p>
-                  )}
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      {data && !isLoading && !noPagination && (
-        <DataTablePagination
-          table={table}
-          refetch={refetch}
-          setPagination={setPagination}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/skeleton-loader.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/skeleton-loader.tsx
deleted file mode 100644
index 89c5627fda..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/skeleton-loader.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton } from "@/src/components/ui/skeleton";
-import { TableHeader, TableRow, TableBody } from "@/src/components/ui/table";
-import { Table } from "lucide-react";
-import React from "react";
-
-const DataTableSkeleton = ({ columns }: { columns: number }) => {
-  const renderSkeletonColumns = () => {
-    return Array.from({ length: columns }).map((_, index) => (
-      <Skeleton key={index} className="w-[100px] h-[20px] rounded-full" />
-    ));
-  };
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>{renderSkeletonColumns()}</TableRow>
-      </TableHeader>
-      <TableBody>{renderSkeletonColumns()}</TableBody>
-    </Table>
-  );
-};
-
-export default DataTableSkeleton;
diff --git a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
deleted file mode 100644
index 0372c45bd1..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { cn } from "@/src/lib/utils";
-import Image from "next/image";
-import React from "react";
-
-const EmptyState = ({
-  title,
-  description,
-  icon,
-  imageSrc,
-  imageAlt,
-  action,
-  className,
-}: {
-  title?: string;
-  description?: string;
-  icon?: React.ReactNode;
-  imageSrc?: string;
-  imageAlt?: string;
-  action?: React.ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center space-y-4",
-        className
-      )}
-    >
-      <div className="flex flex-col items-center justify-center space-y-4">
-        {icon && <div className="w-24 h-24">{icon}</div>}
-        {imageSrc && (
-          <Image
-            src={imageSrc}
-            alt={imageAlt || "Empty state"}
-            className="w-24 h-24 rounded-full"
-            width={96}
-            height={96}
-          />
-        )}
-        {title && (
-          <h3 className="text-2xl font-semibold leading-none tracking-tight">
-            {title}
-          </h3>
-        )}
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        )}
-        {action && <div className="flex items-center">{action}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default EmptyState;
diff --git a/tools/tenscan/frontend/src/components/modules/common/network-status.tsx b/tools/tenscan/frontend/src/components/modules/common/network-status.tsx
deleted file mode 100644
index 6f9be08af4..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/network-status.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { cn } from "@/src/lib/utils";
-import React from "react";
-
-const MessageContent = (
-  <p className="text-sm">
-    <b>You seem to be offline</b>
-    <br /> Please check your internet connection.
-  </p>
-);
-
-export const NetworkStatus = ({ message = MessageContent }) => {
-  const [isOnline, setIsOnline] = React.useState(true);
-
-  React.useEffect(() => {
-    const setOnlineStatus = () => {
-      setIsOnline(navigator.onLine);
-    };
-
-    window.addEventListener("online", setOnlineStatus);
-    window.addEventListener("offline", setOnlineStatus);
-
-    return () => {
-      window.removeEventListener("online", setOnlineStatus);
-      window.removeEventListener("offline", setOnlineStatus);
-    };
-  }, []);
-
-  return (
-    <div
-      className={cn(
-        "fixed z-50 right-0 bottom-0 p-4 transform transition-transform",
-        isOnline ? "translate-x-full" : "translate-x-0"
-      )}
-    >
-      <div className="bg-red-500 text-white p-4 rounded-md shadow-lg ring-1 ring-gray-800 backdrop-blur transition dark:bg-gray-800/90 dark:ring-white/10 dark:hover:ring-white/20 cursor-pointer">
-        {message}
-      </div>
-    </div>
-  );
-};
diff --git a/tools/tenscan/frontend/src/components/modules/common/truncated-address.tsx b/tools/tenscan/frontend/src/components/modules/common/truncated-address.tsx
deleted file mode 100644
index 789a21e8fd..0000000000
--- a/tools/tenscan/frontend/src/components/modules/common/truncated-address.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from "react";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/src/components/ui/tooltip";
-
-import Copy from "./copy";
-import Link from "next/link";
-
-const TruncatedAddress = ({
-  address,
-  prefixLength,
-  suffixLength,
-  showCopy = true,
-  link,
-}: {
-  address: string;
-  prefixLength?: number;
-  suffixLength?: number;
-  showCopy?: boolean;
-  link?:
-    | string
-    | {
-        pathname: string;
-        query: { [key: string]: string | number };
-      };
-}) => {
-  const truncatedAddress = `${address?.substring(
-    0,
-    prefixLength || 6
-  )}...${address?.substring(address.length - (suffixLength || 4))}`;
-
-  return (
-    <>
-      {address ? (
-        <div className="flex items-center">
-          {link ? (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Link href={link} className="text-primary hover:underline">
-                    {truncatedAddress}
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p className="text-primary">{address}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ) : (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>{truncatedAddress}</TooltipTrigger>
-                <TooltipContent>
-                  <p className="text-primary">{address}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
-          {showCopy && <Copy value={address} />}
-        </div>
-      ) : (
-        <div>N/A</div>
-      )}
-    </>
-  );
-};
-
-export default TruncatedAddress;
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
index 41c6b6448e..3f14c5247b 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
@@ -1,11 +1,11 @@
+import { DashboardAnalyticsData } from "@/src/types/interfaces";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
-import { DashboardAnalyticsData } from "@/src/types/interfaces";
+} from "@repo/ui/components/shared/card";
+import { Skeleton } from "@repo/ui/components/shared/skeleton";
 import React from "react";
 
 export default function AnalyticsCard({
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
index 18124148f6..47c4426ab5 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -4,31 +4,33 @@ import {
   CardTitle,
   CardContent,
   Card,
-} from "@/src/components/ui/card";
+} from "@repo/ui/components/shared/card";
 import {
   LayersIcon,
   FileTextIcon,
   ReaderIcon,
   CubeIcon,
   RocketIcon,
-} from "@radix-ui/react-icons";
+  BlocksIcon,
+} from "@repo/ui/components/shared/react-icons";
 
 import { RecentBatches } from "./recent-batches";
 import { RecentTransactions } from "./recent-transactions";
-import { Button } from "@/src/components/ui/button";
+import { Button } from "@repo/ui/components/shared/button";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { useBatchesService } from "@/src/services/useBatchesService";
-import TruncatedAddress from "../common/truncated-address";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
 import { useContractsService } from "@/src/services/useContractsService";
-import { Skeleton } from "@/src/components/ui/skeleton";
+import { Skeleton } from "@repo/ui/components/shared/skeleton";
 import AnalyticsCard from "./analytics-card";
 import Link from "next/link";
-import { cn, formatNumber } from "@/src/lib/utils";
-import { Badge } from "../../ui/badge";
-import { BlocksIcon } from "lucide-react";
+import { cn, formatNumber } from "@repo/ui/lib/utils";
+import { Badge } from "@repo/ui/components/shared/badge";
+
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { RecentRollups } from "./recent-rollups";
 import { DashboardAnalyticsData } from "@/src/types/interfaces";
+import { pageLinks } from "@/src/routes";
 
 interface RecentData {
   title: string;
@@ -45,10 +47,29 @@ export default function Dashboard() {
     transactions,
     transactionCount,
     isTransactionCountLoading,
+    setNoPolling: setNoPollingTransactions,
   } = useTransactionsService();
   const { contractCount, isContractCountLoading } = useContractsService();
-  const { batches, latestBatch, isLatestBatchLoading } = useBatchesService();
-  const { rollups } = useRollupsService();
+  const {
+    batches,
+    latestBatch,
+    isLatestBatchLoading,
+    setNoPolling: setNoPollingBatches,
+  } = useBatchesService();
+  const { rollups, setNoPolling: setNoPollingRollups } = useRollupsService();
+
+  React.useEffect(() => {
+    setNoPollingTransactions(false);
+    setNoPollingBatches(false);
+    setNoPollingRollups(false);
+
+    return () => {
+      setNoPollingTransactions(true);
+      setNoPollingBatches(true);
+      setNoPollingRollups(true);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const DASHBOARD_DATA = [
     {
@@ -107,7 +128,7 @@ export default function Dashboard() {
     },
     {
       title: "Nodes",
-      value: <Badge>Coming Soon</Badge>,
+      value: <Badge variant={"static-default"}>Coming Soon</Badge>,
       icon: BlocksIcon,
     },
   ];
@@ -117,21 +138,21 @@ export default function Dashboard() {
       title: "Recent Rollups",
       data: rollups,
       component: <RecentRollups rollups={rollups} />,
-      goTo: "/rollups",
+      goTo: pageLinks.rollups,
       className: "col-span-1 md:col-span-2 lg:col-span-3",
     },
     {
       title: "Recent Batches",
       data: batches,
       component: <RecentBatches batches={batches} />,
-      goTo: "/batches",
+      goTo: pageLinks.batches,
       className: "col-span-1 md:col-span-2 lg:col-span-3",
     },
     {
       title: "Recent Transactions",
       data: transactions,
       component: <RecentTransactions transactions={transactions} />,
-      goTo: "/transactions",
+      goTo: pageLinks.transactions,
       className: "col-span-1 md:col-span-2 lg:col-span-3",
     },
   ];
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx
index cf85c04a6b..510ba09cae 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx
@@ -1,8 +1,10 @@
-import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
 import { Batch } from "@/src/types/interfaces/BatchInterfaces";
-import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@repo/ui/components/shared/avatar";
 import Link from "next/link";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export function RecentBatches({ batches }: { batches: any }) {
   return (
@@ -15,7 +17,9 @@ export function RecentBatches({ batches }: { batches: any }) {
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">
               <Link
-                href={`/batch/height/${batch?.height}`}
+                href={pathToUrl(pageLinks.batchByHeight, {
+                  height: batch?.height.toString(),
+                })}
                 className="text-primary"
               >
                 #{Number(batch?.height)}
@@ -28,7 +32,9 @@ export function RecentBatches({ batches }: { batches: any }) {
           <div className="ml-auto font-medium min-w-[140px]">
             <TruncatedAddress
               address={batch?.header?.hash}
-              link={`/batch/${batch?.header?.hash}`}
+              link={pathToUrl(pageLinks.batchByHash, {
+                hash: batch?.header?.hash,
+              })}
             />
           </div>
         </div>
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-rollups.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-rollups.tsx
index 30353562a7..1c1dd93dec 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/recent-rollups.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/recent-rollups.tsx
@@ -1,11 +1,9 @@
-import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
-import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
-import {
-  Rollup,
-  RollupsResponse,
-} from "@/src/types/interfaces/RollupInterfaces";
-import Link from "next/link";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
+import { Avatar, AvatarFallback } from "@repo/ui/components/shared/avatar";
+import { Rollup } from "@/src/types/interfaces/RollupInterfaces";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export function RecentRollups({ rollups }: { rollups: any }) {
   return (
@@ -26,7 +24,7 @@ export function RecentRollups({ rollups }: { rollups: any }) {
           <div className="ml-auto font-medium min-w-[140px]">
             <TruncatedAddress
               address={rollup?.Hash}
-              link={`/rollup/${rollup?.Hash}`}
+              link={pathToUrl(pageLinks.rollupByHash, { hash: rollup?.Hash })}
             />
           </div>
         </div>
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx
index 79698a5788..97fad80705 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx
@@ -1,9 +1,11 @@
-import TruncatedAddress from "../common/truncated-address";
-import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { Avatar, AvatarFallback } from "@repo/ui/components/shared/avatar";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
-import { Badge } from "../../ui/badge";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { Badge } from "@repo/ui/components/shared/badge";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
 import Link from "next/link";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export function RecentTransactions({ transactions }: { transactions: any }) {
   return (
@@ -18,7 +20,9 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
               <p className="text-sm font-medium leading-none">
                 <span className="text-muted-foreground">Batch </span>
                 <Link
-                  href={`/batch/height/${transaction?.BatchHeight}`}
+                  href={pathToUrl(pageLinks.batchByHeight, {
+                    height: transaction?.BatchHeight,
+                  })}
                   className="text-primary"
                 >
                   #{Number(transaction?.BatchHeight)}
@@ -31,11 +35,13 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
             <div className="ml-auto font-medium">
               <TruncatedAddress
                 address={transaction?.TransactionHash}
-                link={`/tx/${transaction?.TransactionHash}`}
+                link={pathToUrl(pageLinks.txByHash, {
+                  hash: transaction?.TransactionHash,
+                })}
               />
             </div>
             <div className="ml-auto">
-              <Badge>{transaction?.Finality}</Badge>
+              <Badge variant={"static-default"}>{transaction?.Finality}</Badge>
             </div>
           </div>
         )
diff --git a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
index 3c1faa6ac9..9dda107e44 100644
--- a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
@@ -1,15 +1,16 @@
 "use client";
-
+import React from "react";
 import { ColumnDef } from "@tanstack/react-table";
-import { Badge, badgeVariants } from "@/src/components/ui/badge";
+import { Badge, badgeVariants } from "@repo/ui/components/shared/badge";
 
 import { statuses, types } from "./data";
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
-import { PersonalTransactions } from "@/src/types/interfaces/TransactionInterfaces";
-import TruncatedAddress from "../common/truncated-address";
-import { formatNumber } from "@/src/lib/utils";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
+import { PersonalTransactions } from "../../..//types/interfaces/TransactionInterfaces";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatNumber } from "@repo/ui/lib/utils";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 import Link from "next/link";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
 
 export const columns: ColumnDef<PersonalTransactions>[] = [
   {
@@ -19,11 +20,16 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
     ),
     cell: ({ row }) => {
       return (
-        <div className="flex space-x-2">
+        <Link
+          href={pathToUrl(pageLinks.batchByHeight, {
+            height: Number(row.getValue("blockNumber")),
+          })}
+          className="text-primary"
+        >
           <span className="max-w-[500px] truncate">
             #{Number(row.getValue("blockNumber"))}
           </span>
-        </div>
+        </Link>
       );
     },
     enableSorting: false,
@@ -35,7 +41,14 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
       <DataTableColumnHeader column={column} title="TEN Batch Hash" />
     ),
     cell: ({ row }) => {
-      return <TruncatedAddress address={row.getValue("blockHash")} />;
+      return (
+        <TruncatedAddress
+          address={row.getValue("blockHash")}
+          link={pathToUrl(pageLinks.batchByHash, {
+            hash: row.original.blockHash,
+          })}
+        />
+      );
     },
     enableSorting: false,
     enableHiding: false,
@@ -46,7 +59,14 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
       <DataTableColumnHeader column={column} title="Transaction Hash" />
     ),
     cell: ({ row }) => {
-      return <TruncatedAddress address={row.getValue("transactionHash")} />;
+      return (
+        <TruncatedAddress
+          address={row.getValue("transactionHash")}
+          link={pathToUrl(pageLinks.personalTxByHash, {
+            hash: row.original.transactionHash,
+          })}
+        />
+      );
     },
     enableSorting: false,
     enableHiding: false,
@@ -125,14 +145,4 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
       return value.includes(row.getValue(id));
     },
   },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      return (
-        <Link href={`/tx/personal/${row.original.transactionHash}`}>
-          <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
-        </Link>
-      );
-    },
-  },
 ];
diff --git a/tools/tenscan/frontend/src/components/modules/personal/data.tsx b/tools/tenscan/frontend/src/components/modules/personal/data.tsx
index a1797c82a9..c09678e777 100644
--- a/tools/tenscan/frontend/src/components/modules/personal/data.tsx
+++ b/tools/tenscan/frontend/src/components/modules/personal/data.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { CheckIcon, Cross2Icon } from "@repo/ui/components/shared/react-icons";
 
 export const statuses = [
   {
diff --git a/tools/tenscan/frontend/src/components/modules/personal/index.tsx b/tools/tenscan/frontend/src/components/modules/personal/index.tsx
index 03630d4c07..948c0e4722 100644
--- a/tools/tenscan/frontend/src/components/modules/personal/index.tsx
+++ b/tools/tenscan/frontend/src/components/modules/personal/index.tsx
@@ -1,25 +1,15 @@
 import React from "react";
 import { columns } from "@/src/components/modules/personal/columns";
-import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import { DataTable } from "@repo/ui/components/common/data-table/data-table";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 
 export default function PersonalTransactions() {
-  const { personalTxns, setNoPolling, personalTxnsLoading } =
-    useTransactionsService();
+  const { personalTxns, personalTxnsLoading } = useTransactionsService();
   const { Receipts, Total } = personalTxns || {
     Receipts: [],
     Total: 0,
   };
 
-  React.useEffect(() => {
-    setNoPolling(true);
-
-    return () => {
-      setNoPolling(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
       <div className="flex items-center justify-between space-y-2">
diff --git a/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx b/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx
index 00e174f8e6..0e33d3225e 100644
--- a/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx
+++ b/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx
@@ -1,19 +1,27 @@
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { Badge } from "@/src/components/ui/badge";
+import React, { useState } from "react";
+import KeyValueItem, {
+  KeyValueList,
+} from "@repo/ui/components/shared/key-value";
 import {
   PersonalTransactionType,
   TransactionReceipt,
   TransactionType,
-} from "@/src/types/interfaces/TransactionInterfaces";
-import { BadgeType } from "@/src/types/interfaces";
-import Link from "next/link";
+} from "../../../types/interfaces/TransactionInterfaces";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { Badge } from "@repo/ui/components/shared/badge";
+import { BadgeType } from "@repo/ui/lib/enums/badge";
+import { Button } from "@repo/ui/components/shared/button";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export function PersonalTxnDetailsComponent({
   transactionDetails,
 }: {
   transactionDetails: TransactionReceipt;
 }) {
+  const [logsExpanded, setLogsExpanded] = useState(false);
+  const toggleLogs = () => setLogsExpanded(!logsExpanded);
+
   const getTransactionType = (type: TransactionType) => {
     switch (type) {
       case PersonalTransactionType.Legacy:
@@ -30,14 +38,16 @@ export function PersonalTxnDetailsComponent({
   };
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-8 p-6">
       <KeyValueList>
         <KeyValueItem
           label="From"
           value={
             <TruncatedAddress
               address={transactionDetails?.from}
-              link={`/address/${transactionDetails?.from}`}
+              link={pathToUrl(pageLinks.address, {
+                address: transactionDetails?.from,
+              })}
             />
           }
         />
@@ -46,14 +56,16 @@ export function PersonalTxnDetailsComponent({
           value={
             <TruncatedAddress
               address={transactionDetails?.to}
-              link={`/address/${transactionDetails?.to}`}
+              link={pathToUrl(pageLinks.address, {
+                address: transactionDetails?.to,
+              })}
             />
           }
         />
         <KeyValueItem
           label="Transaction Index"
           value={
-            <Badge variant={"outline"}>
+            <Badge variant="outline">
               {Number(transactionDetails?.transactionIndex)}
             </Badge>
           }
@@ -61,13 +73,7 @@ export function PersonalTxnDetailsComponent({
         <KeyValueItem
           label="Transaction Type"
           value={
-            <Badge
-              variant={
-                transactionDetails?.type
-                  ? BadgeType.SUCCESS
-                  : BadgeType.DESTRUCTIVE
-              }
-            >
+            <Badge variant={BadgeType.SECONDARY}>
               {getTransactionType(transactionDetails?.type)}
             </Badge>
           }
@@ -86,27 +92,26 @@ export function PersonalTxnDetailsComponent({
             </Badge>
           }
         />
-
         <KeyValueItem
           label="Block Number"
           value={
-            <Link href={`/block/${transactionDetails?.blockNumber}`}>
+            <Badge variant="outline">
               {Number(transactionDetails?.blockNumber)}
-            </Link>
+            </Badge>
           }
         />
         <KeyValueItem
           label="Gas Used"
           value={
-            <Badge variant={"outline"}>
-              {Number(transactionDetails?.gasUsed)}{" "}
+            <Badge variant="outline">
+              {Number(transactionDetails?.gasUsed)}
             </Badge>
           }
         />
         <KeyValueItem
           label="Cumulative Gas Used"
           value={
-            <Badge variant={"outline"}>
+            <Badge variant="outline">
               {Number(transactionDetails?.cumulativeGasUsed)}
             </Badge>
           }
@@ -114,7 +119,7 @@ export function PersonalTxnDetailsComponent({
         <KeyValueItem
           label="Effective Gas Price"
           value={
-            <Badge variant={"outline"}>
+            <Badge variant="outline">
               {Number(transactionDetails?.effectiveGasPrice)}
             </Badge>
           }
@@ -130,10 +135,7 @@ export function PersonalTxnDetailsComponent({
         <KeyValueItem
           label="Contract Address"
           value={
-            <TruncatedAddress
-              address={transactionDetails?.contractAddress}
-              link={`/address/${transactionDetails?.contractAddress}`}
-            />
+            <TruncatedAddress address={transactionDetails?.contractAddress} />
           }
         />
         <KeyValueItem
@@ -141,88 +143,108 @@ export function PersonalTxnDetailsComponent({
           value={
             <TruncatedAddress
               address={transactionDetails?.transactionHash}
-              link={`/tx/${transactionDetails?.transactionHash}`}
+              link={pathToUrl(pageLinks.txByHash, {
+                hash: transactionDetails?.transactionHash,
+              })}
             />
           }
         />
-
         <KeyValueItem
           label="Logs"
           value={
             transactionDetails?.logs.length > 0 ? (
               <div className="space-y-4">
-                {transactionDetails?.logs.map((log, index) => (
-                  <div key={index}>
-                    <KeyValueList>
-                      <KeyValueItem
-                        label="Address"
-                        value={<TruncatedAddress address={log.address} />}
-                      />
-                      <KeyValueItem
-                        label="Block Hash"
-                        value={<TruncatedAddress address={log.blockHash} />}
-                      />
-                      <KeyValueItem
-                        label="Block Number"
-                        value={Number(log.blockNumber)}
-                      />
-                      <KeyValueItem
-                        label="Data"
-                        value={<TruncatedAddress address={log.data} />}
-                      />
-                      <KeyValueItem label="Log Index" value={log.logIndex} />
-                      <KeyValueItem
-                        label="Removed"
-                        value={
-                          <Badge
-                            variant={
-                              log.removed
-                                ? BadgeType.DESTRUCTIVE
-                                : BadgeType.SUCCESS
+                <Button
+                  variant={"link"}
+                  onClick={toggleLogs}
+                  className="underline"
+                >
+                  {logsExpanded
+                    ? `Hide Logs (${transactionDetails.logs.length})`
+                    : `Show Logs (${transactionDetails.logs.length})`}
+                </Button>
+                {logsExpanded && (
+                  <div className="space-y-4 p-4 rounded-md">
+                    {transactionDetails?.logs.map((log, index) => (
+                      <div
+                        key={index}
+                        className="p-4 border border-gray-700 rounded-lg space-y-2"
+                      >
+                        <KeyValueList>
+                          <KeyValueItem
+                            label="Address"
+                            value={<TruncatedAddress address={log.address} />}
+                          />
+                          <KeyValueItem
+                            label="Block Hash"
+                            value={<TruncatedAddress address={log.blockHash} />}
+                          />
+                          <KeyValueItem
+                            label="Block Number"
+                            value={Number(log.blockNumber)}
+                          />
+                          <KeyValueItem
+                            label="Data"
+                            value={<TruncatedAddress address={log.data} />}
+                          />
+                          <KeyValueItem
+                            label="Log Index"
+                            value={log.logIndex}
+                          />
+                          <KeyValueItem
+                            label="Removed"
+                            value={
+                              <Badge
+                                variant={
+                                  log.removed
+                                    ? BadgeType.DESTRUCTIVE
+                                    : BadgeType.SUCCESS
+                                }
+                              >
+                                {log.removed ? "Yes" : "No"}
+                              </Badge>
                             }
-                          >
-                            {log.removed ? "Yes" : "No"}
-                          </Badge>
-                        }
-                      />
-                      <KeyValueItem
-                        label="Topics"
-                        value={
-                          <div className="space-y-4">
-                            {log.topics.map((topic, index) => (
-                              <div key={index}>
-                                <KeyValueItem
-                                  value={<TruncatedAddress address={topic} />}
-                                />
+                          />
+                          <KeyValueItem
+                            label="Topics"
+                            value={
+                              <div className="space-y-2">
+                                {log.topics.map((topic, index) => (
+                                  <div key={index}>
+                                    <TruncatedAddress address={topic} />
+                                  </div>
+                                ))}
                               </div>
-                            ))}
-                          </div>
-                        }
-                      />
-                      <KeyValueItem
-                        label="Transaction Hash"
-                        value={
-                          <TruncatedAddress
-                            address={log.transactionHash}
-                            link={`/tx/${log.transactionHash}`}
+                            }
+                          />
+                          <KeyValueItem
+                            label="Transaction Hash"
+                            value={
+                              <TruncatedAddress
+                                address={log.transactionHash}
+                                link={pathToUrl(pageLinks.txByHash, {
+                                  hash: log.transactionHash,
+                                })}
+                              />
+                            }
+                          />
+                          <KeyValueItem
+                            label="Transaction Index"
+                            value={
+                              <Badge variant="outline">
+                                {Number(transactionDetails?.transactionIndex)}
+                              </Badge>
+                            }
+                            isLastItem
                           />
-                        }
-                      />
-                      <KeyValueItem
-                        label="Transaction Index"
-                        value={
-                          <Badge variant={"outline"}>
-                            {Number(transactionDetails?.transactionIndex)}
-                          </Badge>
-                        }
-                        isLastItem
-                      />
-                    </KeyValueList>
+                        </KeyValueList>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                )}
               </div>
             ) : (
-              "No logs found"
+              "No logs found."
             )
           }
           isLastItem
diff --git a/tools/tenscan/frontend/src/components/modules/resources/decrypt.tsx b/tools/tenscan/frontend/src/components/modules/resources/decrypt.tsx
index 98dfd9cbbc..a4379d7d08 100644
--- a/tools/tenscan/frontend/src/components/modules/resources/decrypt.tsx
+++ b/tools/tenscan/frontend/src/components/modules/resources/decrypt.tsx
@@ -1,26 +1,29 @@
 import React, { useEffect, useState } from "react";
-import { Alert, AlertTitle, AlertDescription } from "@/src/components/ui/alert";
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
+import {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+} from "@repo/ui/components/shared/alert";
+import { Badge } from "@repo/ui/components/shared/badge";
+import { Button } from "@repo/ui/components/shared/button";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Textarea } from "@/src/components/ui/textarea";
+} from "@repo/ui/components/shared/card";
+import { Textarea } from "@repo/ui/components/shared/textarea";
 import { currentEncryptedKey } from "@/src/lib/constants";
-import { CopyIcon } from "@radix-ui/react-icons";
-import { Terminal } from "lucide-react";
+import { CopyIcon, Terminal } from "@repo/ui/components/shared/react-icons";
 import { useRouter } from "next/router";
 import JSONPretty from "react-json-pretty";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import {
   Tooltip,
+  TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-  TooltipContent,
-} from "@radix-ui/react-tooltip";
+} from "@repo/ui/components/shared/tooltip";
 
 export default function Decrypt() {
   const router = useRouter();
diff --git a/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx b/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx
index 2554da9a02..220d54a4e7 100644
--- a/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx
+++ b/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx
@@ -5,18 +5,18 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@/src/components/ui/table";
-import { Table } from "@/src/components/ui/table";
+} from "@repo/ui/components/shared/table";
+import { Table } from "@repo/ui/components/shared/table";
 import { useContractsService } from "@/src/services/useContractsService";
-import TruncatedAddress from "../../common/truncated-address";
-import { Badge } from "@/src/components/ui/badge";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { Badge } from "@repo/ui/components/shared/badge";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Separator } from "@/src/components/ui/separator";
+} from "@repo/ui/components/shared/card";
+import { Separator } from "@repo/ui/components/shared/separator";
 
 export default function VerifiedContracts() {
   const { formattedContracts } = useContractsService();
diff --git a/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx b/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx
index 0cbdd962a3..4f5ae0adcf 100644
--- a/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx
+++ b/tools/tenscan/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx
@@ -5,18 +5,18 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@/src/components/ui/table";
-import { Table } from "@/src/components/ui/table";
+} from "@repo/ui/components/shared/table";
+import { Table } from "@repo/ui/components/shared/table";
 import { useContractsService } from "@/src/services/useContractsService";
-import TruncatedAddress from "../../common/truncated-address";
-import { Badge } from "@/src/components/ui/badge";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { Badge } from "@repo/ui/components/shared/badge";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-} from "@/src/components/ui/card";
-import { Separator } from "@/src/components/ui/separator";
+} from "@repo/ui/components/shared/card";
+import { Separator } from "@repo/ui/components/shared/separator";
 
 export default function VerifiedSequencerData() {
   const { sequencerData } = useContractsService();
diff --git a/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx b/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx
index fe76d6fa3c..429f4d6066 100644
--- a/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
-import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
 import Link from "next/link";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
+import { EyeOpenIcon } from "@repo/ui/components/shared/react-icons";
 import { Rollup } from "@/src/types/interfaces/RollupInterfaces";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export const columns: ColumnDef<Rollup>[] = [
   {
@@ -33,10 +35,9 @@ export const columns: ColumnDef<Rollup>[] = [
       return (
         <TruncatedAddress
           address={row.getValue("Hash")}
-          link={{
-            pathname: "/rollup/[hash]/batches",
-            query: { hash: row.getValue("Hash") },
-          }}
+          link={pathToUrl(pageLinks.rollupBatches, {
+            hash: row.getValue("Hash"),
+          })}
         />
       );
     },
@@ -80,7 +81,9 @@ export const columns: ColumnDef<Rollup>[] = [
       return (
         <div className="flex space-x-2">
           <Link
-            href={`/rollup/batch/sequence/${row.original.FirstSeq}`}
+            href={pathToUrl(pageLinks.rollupByBatchSequence, {
+              sequence: row.original.FirstSeq,
+            })}
             className="text-primary"
           >
             <span className="max-w-[500px] truncate">
@@ -102,7 +105,9 @@ export const columns: ColumnDef<Rollup>[] = [
       return (
         <div className="flex space-x-2">
           <Link
-            href={`/rollup/batch/sequence/${row.original.LastSeq}`}
+            href={pathToUrl(pageLinks.rollupByBatchSequence, {
+              sequence: row.original.LastSeq,
+            })}
             className="text-primary"
           >
             <span className="max-w-[500px] truncate">
@@ -119,7 +124,9 @@ export const columns: ColumnDef<Rollup>[] = [
     id: "actions",
     cell: ({ row }) => {
       return (
-        <Link href={`/rollup/${row.original.Hash}`}>
+        <Link
+          href={pathToUrl(pageLinks.rollupByHash, { hash: row.original.Hash })}
+        >
           <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
         </Link>
       );
diff --git a/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx b/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx
index 2ab030f09f..793b3242f3 100644
--- a/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx
+++ b/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx
@@ -4,7 +4,7 @@ import {
   ArrowUpIcon,
   CheckCircledIcon,
   ClockIcon,
-} from "@radix-ui/react-icons";
+} from "@repo/ui/components/shared/react-icons";
 
 export const labels = [
   {
diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx
index b53eb0e81e..239c6082c4 100644
--- a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx
+++ b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx
@@ -1,8 +1,13 @@
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { formatTimeAgo } from "@/src/lib/utils";
-import { Rollup } from "@/src/types/interfaces/RollupInterfaces";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import KeyValueItem, {
+  KeyValueList,
+} from "@repo/ui/components/shared/key-value";
+import { formatTimeAgo, formatTimestampToDate } from "@repo/ui/lib/utils";
 import Link from "next/link";
+import { Rollup } from "@/src/types/interfaces/RollupInterfaces";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
+import { Badge } from "@repo/ui/components/shared/badge";
 
 export function RollupDetailsComponent({
   rollupDetails,
@@ -15,14 +20,23 @@ export function RollupDetailsComponent({
         <KeyValueItem label="ID" value={"#" + Number(rollupDetails?.ID)} />
         <KeyValueItem
           label="Timestamp"
-          value={formatTimeAgo(rollupDetails?.Timestamp)}
+          value={
+            <Badge variant="outline">
+              {formatTimeAgo(rollupDetails?.Timestamp) +
+                " - " +
+                formatTimestampToDate(rollupDetails?.Timestamp)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Full Hash"
           value={
             <TruncatedAddress
               address={rollupDetails?.Hash}
-              link={`/rollup/${rollupDetails?.Hash}`}
+              link={pathToUrl(pageLinks.rollupByHash, {
+                hash: rollupDetails?.Hash,
+              })}
+              showFullLength
             />
           }
         />
@@ -31,19 +45,26 @@ export function RollupDetailsComponent({
           value={
             <TruncatedAddress
               address={rollupDetails?.Header?.hash}
-              link={`/rollup/${rollupDetails?.Header?.hash}`}
+              link={pathToUrl(pageLinks.rollupByHash, {
+                hash: rollupDetails?.Header?.hash,
+              })}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="L1 Hash"
-          value={<TruncatedAddress address={rollupDetails?.L1Hash} />}
+          value={
+            <TruncatedAddress address={rollupDetails?.L1Hash} showFullLength />
+          }
         />
         <KeyValueItem
           label="First Batch Seq No."
           value={
             <Link
-              href={`/rollup/batch/sequence/${rollupDetails?.FirstSeq}`}
+              href={pathToUrl(pageLinks.rollupByBatchSequence, {
+                sequence: rollupDetails?.FirstSeq,
+              })}
               className="text-primary"
             >
               {"#" + rollupDetails?.FirstSeq}
@@ -54,7 +75,9 @@ export function RollupDetailsComponent({
           label="Last Batch Seq No."
           value={
             <Link
-              href={`/rollup/batch/sequence/${rollupDetails?.LastSeq}`}
+              href={pathToUrl(pageLinks.rollupByBatchSequence, {
+                sequence: rollupDetails?.LastSeq,
+              })}
               className="text-primary"
             >
               {"#" + rollupDetails?.LastSeq}
@@ -66,13 +89,17 @@ export function RollupDetailsComponent({
           value={
             <TruncatedAddress
               address={rollupDetails?.Header?.CompressionL1Head}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="Payload Hash"
           value={
-            <TruncatedAddress address={rollupDetails?.Header?.PayloadHash} />
+            <TruncatedAddress
+              address={rollupDetails?.Header?.PayloadHash}
+              showFullLength
+            />
           }
         />
         <KeyValueItem
@@ -93,7 +120,9 @@ export function RollupDetailsComponent({
                         label="Sequence"
                         value={
                           <Link
-                            href={`/rollup/batch/sequence/${msg.Sequence}`}
+                            href={pathToUrl(pageLinks.rollupByBatchSequence, {
+                              sequence: msg?.Sequence,
+                            })}
                             className="text-primary"
                           >
                             {"#" + msg.Sequence}
diff --git a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx
index a615dad2cb..d09df4d386 100644
--- a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx
@@ -1,14 +1,16 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Badge } from "@/src/components/ui/badge";
+import { Badge } from "@repo/ui/components/shared/badge";
 
 import { statuses } from "./constants";
-import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
+import { DataTableColumnHeader } from "@repo/ui/components/common/data-table/data-table-column-header";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
-import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import { formatTimeAgo } from "@repo/ui/lib/utils";
 import Link from "next/link";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export const columns: ColumnDef<Transaction>[] = [
   {
@@ -60,7 +62,9 @@ export const columns: ColumnDef<Transaction>[] = [
       return (
         <TruncatedAddress
           address={row.getValue("TransactionHash")}
-          link={`/tx/${row.original.TransactionHash}`}
+          link={pathToUrl(pageLinks.txByHash, {
+            hash: row.original.TransactionHash,
+          })}
         />
       );
     },
diff --git a/tools/tenscan/frontend/src/components/modules/transactions/constants.tsx b/tools/tenscan/frontend/src/components/modules/transactions/constants.tsx
index 2ab030f09f..793b3242f3 100644
--- a/tools/tenscan/frontend/src/components/modules/transactions/constants.tsx
+++ b/tools/tenscan/frontend/src/components/modules/transactions/constants.tsx
@@ -4,7 +4,7 @@ import {
   ArrowUpIcon,
   CheckCircledIcon,
   ClockIcon,
-} from "@radix-ui/react-icons";
+} from "@repo/ui/components/shared/react-icons";
 
 export const labels = [
   {
diff --git a/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx
index 9b1ba535b8..dc9ab9aea8 100644
--- a/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx
+++ b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx
@@ -1,10 +1,14 @@
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { formatTimeAgo } from "@/src/lib/utils";
-import { Badge } from "@/src/components/ui/badge";
+import TruncatedAddress from "@repo/ui/components/common/truncated-address";
+import KeyValueItem, {
+  KeyValueList,
+} from "@repo/ui/components/shared/key-value";
+import { formatTimeAgo, formatTimestampToDate } from "@repo/ui/lib/utils";
+import { BadgeType } from "@repo/ui/lib/enums/badge";
+import { Badge } from "@repo/ui/components/shared/badge";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
-import { BadgeType } from "@/src/types/interfaces";
 import Link from "next/link";
+import { pathToUrl } from "@/src/routes/router";
+import { pageLinks } from "@/src/routes";
 
 export function TransactionDetailsComponent({
   transactionDetails,
@@ -18,7 +22,9 @@ export function TransactionDetailsComponent({
           label="Batch Height"
           value={
             <Link
-              href={`/batch/height/${transactionDetails?.BatchHeight}`}
+              href={pathToUrl(pageLinks.batchByHeight, {
+                height: transactionDetails?.BatchHeight,
+              })}
               className="text-primary"
             >
               {"#" + Number(transactionDetails?.BatchHeight)}
@@ -30,13 +36,19 @@ export function TransactionDetailsComponent({
           value={
             <TruncatedAddress
               address={transactionDetails?.TransactionHash}
-              link={`/tx/${transactionDetails?.TransactionHash}`}
+              showFullLength
             />
           }
         />
         <KeyValueItem
           label="Timestamp"
-          value={formatTimeAgo(transactionDetails?.BatchTimestamp)}
+          value={
+            <Badge variant="outline">
+              {formatTimeAgo(transactionDetails?.BatchTimestamp) +
+                " - " +
+                formatTimestampToDate(transactionDetails?.BatchTimestamp)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Finality"
diff --git a/tools/tenscan/frontend/src/components/providers/wallet-provider.tsx b/tools/tenscan/frontend/src/components/providers/wallet-provider.tsx
deleted file mode 100644
index 314194b489..0000000000
--- a/tools/tenscan/frontend/src/components/providers/wallet-provider.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-import { ethers } from "ethers";
-import {
-  WalletConnectionContextType,
-  WalletConnectionProviderProps,
-} from "@/src/types/interfaces/WalletInterfaces";
-import { showToast } from "../ui/use-toast";
-import { ToastType } from "@/src/types/interfaces";
-import { ethereum } from "@/src/lib/utils";
-
-const WalletConnectionContext =
-  createContext<WalletConnectionContextType | null>(null);
-
-export const useWalletConnection = (): WalletConnectionContextType => {
-  const context = useContext(WalletConnectionContext);
-  if (!context) {
-    throw new Error(
-      "useWalletConnection must be used within a WalletConnectionProvider"
-    );
-  }
-  return context;
-};
-
-export const WalletConnectionProvider = ({
-  children,
-}: WalletConnectionProviderProps) => {
-  const [walletConnected, setWalletConnected] = useState(false);
-  const [walletAddress, setWalletAddress] = useState<string | null>(null);
-  const [provider, setProvider] =
-    useState<ethers.providers.Web3Provider | null>(null);
-
-  const connectWallet = async () => {
-    if (ethereum) {
-      const ethProvider = new ethers.providers.Web3Provider(ethereum);
-      setProvider(ethProvider);
-
-      try {
-        await ethProvider.send("eth_requestAccounts", []);
-        const signer = ethProvider.getSigner();
-        const address = await signer.getAddress();
-        setWalletAddress(address);
-        setWalletConnected(true);
-      } catch (error: any) {
-        showToast(
-          ToastType.DESTRUCTIVE,
-          "Error connecting to wallet:" + error?.message
-        );
-      }
-    } else {
-      showToast(
-        ToastType.DESTRUCTIVE,
-        "No ethereum object found. Please install MetaMask!"
-      );
-    }
-  };
-
-  const disconnectWallet = () => {
-    if (provider) {
-      provider.removeAllListeners();
-      setWalletConnected(false);
-      setWalletAddress(null);
-      setProvider(null);
-    }
-  };
-
-  useEffect(() => {
-    if (!ethereum) {
-      return;
-    }
-
-    const handleAccountsChanged = (accounts: string[]) => {
-      if (accounts.length === 0) {
-        showToast(ToastType.DESTRUCTIVE, "Please connect to MetaMask.");
-      } else if (accounts[0] !== walletAddress) {
-        setWalletAddress(accounts[0]);
-      }
-    };
-
-    ethereum.on("accountsChanged", handleAccountsChanged);
-    return () => {
-      if (!ethereum) return;
-      ethereum.removeListener("accountsChanged", handleAccountsChanged);
-    };
-  });
-
-  const walletConnectionContextValue: WalletConnectionContextType = {
-    provider,
-    walletConnected,
-    walletAddress,
-    connectWallet,
-    disconnectWallet,
-  };
-
-  return (
-    <WalletConnectionContext.Provider value={walletConnectionContextValue}>
-      {children}
-    </WalletConnectionContext.Provider>
-  );
-};
diff --git a/tools/tenscan/frontend/src/components/search.tsx b/tools/tenscan/frontend/src/components/search.tsx
index 72c09e031c..aa4091d2b5 100644
--- a/tools/tenscan/frontend/src/components/search.tsx
+++ b/tools/tenscan/frontend/src/components/search.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@/src/components/ui/input";
+import { Input } from "@repo/ui/components/shared/input";
 
 export function Search() {
   return (
diff --git a/tools/tenscan/frontend/src/components/ui/alert.tsx b/tools/tenscan/frontend/src/components/ui/alert.tsx
deleted file mode 100644
index 85cfe674b7..0000000000
--- a/tools/tenscan/frontend/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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",
-        info: "border-info/50 text-info dark:border-info [&>svg]:text-info",
-        success:
-          "border-success/50 text-success dark:border-success [&>svg]:text-success",
-        warning:
-          "border-warning/50 text-warning dark:border-warning [&>svg]:text-warning",
-      },
-    },
-    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 };
diff --git a/tools/tenscan/frontend/src/components/ui/avatar.tsx b/tools/tenscan/frontend/src/components/ui/avatar.tsx
deleted file mode 100644
index dcc25adf49..0000000000
--- a/tools/tenscan/frontend/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/src/lib/utils";
-
-type AvatarImageProps = React.ComponentPropsWithoutRef<
-  typeof AvatarPrimitive.Image
-> & {
-  src?: string | React.ComponentType;
-};
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  AvatarImageProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/tools/tenscan/frontend/src/components/ui/badge.tsx b/tools/tenscan/frontend/src/components/ui/badge.tsx
deleted file mode 100644
index cac0bf960b..0000000000
--- a/tools/tenscan/frontend/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/src/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };
diff --git a/tools/tenscan/frontend/src/components/ui/button.tsx b/tools/tenscan/frontend/src/components/ui/button.tsx
deleted file mode 100644
index aa0d241a58..0000000000
--- a/tools/tenscan/frontend/src/components/ui/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/src/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        clear: "bg-transparent text-primary-foreground outline-none",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10 p-1",
-        wrap: "h-full w-full",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/tools/tenscan/frontend/src/components/ui/calendar.tsx b/tools/tenscan/frontend/src/components/ui/calendar.tsx
deleted file mode 100644
index 0b2f5e83e6..0000000000
--- a/tools/tenscan/frontend/src/components/ui/calendar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "@/src/lib/utils";
-import { buttonVariants } from "@/src/components/ui/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "text-muted-foreground opacity-50",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  );
-}
-Calendar.displayName = "Calendar";
-
-export { Calendar };
diff --git a/tools/tenscan/frontend/src/components/ui/card.tsx b/tools/tenscan/frontend/src/components/ui/card.tsx
deleted file mode 100644
index 3307589084..0000000000
--- a/tools/tenscan/frontend/src/components/ui/card.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/src/lib/utils'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  )
-)
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-)
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  )
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/tools/tenscan/frontend/src/components/ui/checkbox.tsx b/tools/tenscan/frontend/src/components/ui/checkbox.tsx
deleted file mode 100644
index e4f571b0ce..0000000000
--- a/tools/tenscan/frontend/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/src/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/tools/tenscan/frontend/src/components/ui/command.tsx b/tools/tenscan/frontend/src/components/ui/command.tsx
deleted file mode 100644
index fd81fd9b4c..0000000000
--- a/tools/tenscan/frontend/src/components/ui/command.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from "react";
-import { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "@/src/lib/utils";
-import { Dialog, DialogContent } from "@/src/components/ui/dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/tools/tenscan/frontend/src/components/ui/dialog.tsx b/tools/tenscan/frontend/src/components/ui/dialog.tsx
deleted file mode 100644
index 973b5c4088..0000000000
--- a/tools/tenscan/frontend/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-
-import { cn } from '@/src/lib/utils'
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-)
-DialogHeader.displayName = 'DialogHeader'
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-    {...props}
-  />
-)
-DialogFooter.displayName = 'DialogFooter'
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription
-}
diff --git a/tools/tenscan/frontend/src/components/ui/dropdown-menu.tsx b/tools/tenscan/frontend/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index f08b9a2d01..0000000000
--- a/tools/tenscan/frontend/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
-
-import { cn } from '@/src/lib/utils'
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup
-}
diff --git a/tools/tenscan/frontend/src/components/ui/external-link.tsx b/tools/tenscan/frontend/src/components/ui/external-link.tsx
deleted file mode 100644
index 13366137ea..0000000000
--- a/tools/tenscan/frontend/src/components/ui/external-link.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import React from "react";
-
-const ExternalLink = ({
-  href,
-  children,
-  className,
-}: {
-  href: string;
-  children: React.ReactNode;
-  className?: string;
-}) => {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={`flex items-center hover:underline ${className}`}
-    >
-      {children} <ExternalLinkIcon className="inline-block h-4 w-4" />
-    </a>
-  );
-};
-
-export default ExternalLink;
diff --git a/tools/tenscan/frontend/src/components/ui/input.tsx b/tools/tenscan/frontend/src/components/ui/input.tsx
deleted file mode 100644
index e23cdfa1a8..0000000000
--- a/tools/tenscan/frontend/src/components/ui/input.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/src/lib/utils'
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = 'Input'
-
-export { Input }
diff --git a/tools/tenscan/frontend/src/components/ui/key-value.tsx b/tools/tenscan/frontend/src/components/ui/key-value.tsx
deleted file mode 100644
index 540e3a7ce3..0000000000
--- a/tools/tenscan/frontend/src/components/ui/key-value.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Separator } from "./separator";
-
-export const KeyValueList = ({ children }: { children: React.ReactNode }) => (
-  <ul className="divide-y divide-gray-200">{children}</ul>
-);
-
-export const KeyValueItem = ({
-  label,
-  value,
-  isLastItem,
-}: {
-  label?: string;
-  value: string | number | React.ReactNode;
-  isLastItem?: boolean;
-}) => (
-  <li
-    className={`border-none
-   ${isLastItem ? "" : "mb-2"}`}
-  >
-    <div className="py-2 grid grid-cols-9">
-      {label && <span className="font-bold col-span-3">{label}</span>}
-      <span className="ml-2 col-span-6">{value}</span>
-    </div>
-    {!isLastItem && <Separator />}
-  </li>
-);
-
-export default KeyValueItem;
diff --git a/tools/tenscan/frontend/src/components/ui/label.tsx b/tools/tenscan/frontend/src/components/ui/label.tsx
deleted file mode 100644
index 27adca2cea..0000000000
--- a/tools/tenscan/frontend/src/components/ui/label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/src/lib/utils'
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/tools/tenscan/frontend/src/components/ui/navigation-menu.tsx b/tools/tenscan/frontend/src/components/ui/navigation-menu.tsx
deleted file mode 100644
index 1e7b75005f..0000000000
--- a/tools/tenscan/frontend/src/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as React from 'react'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
-
-import { cn } from '@/src/lib/utils'
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}
-  >
-    {children}{' '}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn('absolute left-0 top-full flex justify-center')}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport
-}
diff --git a/tools/tenscan/frontend/src/components/ui/popover.tsx b/tools/tenscan/frontend/src/components/ui/popover.tsx
deleted file mode 100644
index 18b61979cf..0000000000
--- a/tools/tenscan/frontend/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cn } from '@/src/lib/utils'
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/tools/tenscan/frontend/src/components/ui/select.tsx b/tools/tenscan/frontend/src/components/ui/select.tsx
deleted file mode 100644
index bb1703edc5..0000000000
--- a/tools/tenscan/frontend/src/components/ui/select.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown } from 'lucide-react'
-
-import { cn } from '@/src/lib/utils'
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator
-}
diff --git a/tools/tenscan/frontend/src/components/ui/separator.tsx b/tools/tenscan/frontend/src/components/ui/separator.tsx
deleted file mode 100644
index fd1ac8931b..0000000000
--- a/tools/tenscan/frontend/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
-import { cn } from "@/src/lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/tools/tenscan/frontend/src/components/ui/skeleton.tsx b/tools/tenscan/frontend/src/components/ui/skeleton.tsx
deleted file mode 100644
index 03e4c85986..0000000000
--- a/tools/tenscan/frontend/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/src/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/tools/tenscan/frontend/src/components/ui/spinner.tsx b/tools/tenscan/frontend/src/components/ui/spinner.tsx
deleted file mode 100644
index 2948ef451b..0000000000
--- a/tools/tenscan/frontend/src/components/ui/spinner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-
-const Spinner = () => {
-  return (
-    <div className="flex justify-center items-center h-64">
-      <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-primary"></div>
-    </div>
-  );
-};
-
-export default Spinner;
diff --git a/tools/tenscan/frontend/src/components/ui/table.tsx b/tools/tenscan/frontend/src/components/ui/table.tsx
deleted file mode 100644
index 0b8376b09f..0000000000
--- a/tools/tenscan/frontend/src/components/ui/table.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/src/lib/utils'
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  )
-)
-Table.displayName = 'Table'
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-))
-TableHeader.displayName = 'TableHeader'
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-))
-TableBody.displayName = 'TableBody'
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn('bg-primary font-medium text-primary-foreground', className)}
-    {...props}
-  />
-))
-TableFooter.displayName = 'TableFooter'
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-TableRow.displayName = 'TableRow'
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = 'TableHead'
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
-    {...props}
-  />
-))
-TableCell.displayName = 'TableCell'
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
-))
-TableCaption.displayName = 'TableCaption'
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/tools/tenscan/frontend/src/components/ui/tabs.tsx b/tools/tenscan/frontend/src/components/ui/tabs.tsx
deleted file mode 100644
index 47a3925903..0000000000
--- a/tools/tenscan/frontend/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cn } from '@/src/lib/utils'
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/tools/tenscan/frontend/src/components/ui/textarea.tsx b/tools/tenscan/frontend/src/components/ui/textarea.tsx
deleted file mode 100644
index db65d62a57..0000000000
--- a/tools/tenscan/frontend/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/src/lib/utils"
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }
diff --git a/tools/tenscan/frontend/src/components/ui/toast.tsx b/tools/tenscan/frontend/src/components/ui/toast.tsx
deleted file mode 100644
index 939d32b2cd..0000000000
--- a/tools/tenscan/frontend/src/components/ui/toast.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/src/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        info: "border-info bg-info text-info-foreground",
-        success: "border-success bg-success text-success-foreground",
-        warning: "border-warning bg-warning text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
diff --git a/tools/tenscan/frontend/src/components/ui/toaster.tsx b/tools/tenscan/frontend/src/components/ui/toaster.tsx
deleted file mode 100644
index 669500ff91..0000000000
--- a/tools/tenscan/frontend/src/components/ui/toaster.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/src/components/ui/toast";
-import { useToast } from "@/src/components/ui/use-toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/ui/tooltip.tsx b/tools/tenscan/frontend/src/components/ui/tooltip.tsx
deleted file mode 100644
index 33ef4c7d00..0000000000
--- a/tools/tenscan/frontend/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/src/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/tools/tenscan/frontend/src/components/ui/use-toast.ts b/tools/tenscan/frontend/src/components/ui/use-toast.ts
deleted file mode 100644
index 63d55fec10..0000000000
--- a/tools/tenscan/frontend/src/components/ui/use-toast.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "@/src/components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_VALUE;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-const showToast = (variant: ToastProps["variant"], description: string) => {
-  toast({
-    variant,
-    description,
-  });
-};
-
-export { useToast, toast, showToast };
diff --git a/tools/tenscan/frontend/src/hooks/useCopy.ts b/tools/tenscan/frontend/src/hooks/useCopy.ts
deleted file mode 100644
index d64850b444..0000000000
--- a/tools/tenscan/frontend/src/hooks/useCopy.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { showToast } from "../components/ui/use-toast";
-import { ToastType } from "../types/interfaces";
-import { RESET_COPIED_TIMEOUT } from "../lib/constants";
-
-export const useCopy = () => {
-  const [copied, setCopied] = React.useState(false);
-  const copyToClipboard = (text: string, name?: string): Promise<void> => {
-    return copyText(text)
-      .catch(() => fallbackCopyTextToClipboard(text))
-      .then(() => {
-        showToast(ToastType.SUCCESS, `${name ? name : "Copied!"}`);
-        setCopied(true);
-      })
-      .catch(() => {
-        showToast(
-          ToastType.DESTRUCTIVE,
-          `Couldn't copy ${name ? name : "Text"}!!!`
-        );
-      })
-      .finally(() => {
-        setTimeout(() => setCopied(false), RESET_COPIED_TIMEOUT);
-      });
-  };
-
-  return {
-    copyToClipboard,
-    copied,
-  };
-};
-
-const copyText = async (text: string) => {
-  return navigator.clipboard.writeText(text);
-};
-
-const fallbackCopyTextToClipboard = (text: string) => {
-  return new Promise((res, rej) => {
-    var textArea = document.createElement("textarea");
-    textArea.value = text;
-
-    // Avoid scrolling to bottom
-    textArea.style.top = "0";
-    textArea.style.left = "0";
-    textArea.style.position = "fixed";
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      document.execCommand("copy");
-    } catch (err) {
-      rej(err);
-    }
-
-    document.body.removeChild(textArea);
-    res(text);
-  });
-};
diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts
index 8c0808fdbd..f57cbe9a9a 100644
--- a/tools/tenscan/frontend/src/lib/constants.ts
+++ b/tools/tenscan/frontend/src/lib/constants.ts
@@ -1,10 +1,3 @@
-export const socialLinks = {
-  github: "https://github.com/ten-protocol",
-  discord: "https://discord.gg/tenprotocol",
-  twitter: "https://twitter.com/tenprotocol",
-  twitterHandle: "@tenprotocol",
-};
-
 export const pollingInterval = 5000;
 export const maxRetries = 3;
 export const pricePollingInterval = 60 * 1000;
diff --git a/tools/tenscan/frontend/src/lib/siteMetadata.ts b/tools/tenscan/frontend/src/lib/siteMetadata.ts
index 60be30ad23..92a04fd716 100644
--- a/tools/tenscan/frontend/src/lib/siteMetadata.ts
+++ b/tools/tenscan/frontend/src/lib/siteMetadata.ts
@@ -1,4 +1,4 @@
-import { socialLinks } from "./constants";
+import { socialLinks } from "@repo/ui/lib/constants";
 
 export const siteMetadata = {
   companyName: "Tenscan",
@@ -10,7 +10,7 @@ export const siteMetadata = {
   siteUrl: "https://tenscan.io",
   siteLogo: `/assets/images/cover.png`,
   siteLogoSquare: `/assets/images/cover.png`,
-  email: "team@ten.xyz",
+  email: socialLinks.email,
   twitter: socialLinks.twitter,
   twitterHandle: socialLinks.twitterHandle,
   github: socialLinks.github,
diff --git a/tools/tenscan/frontend/src/lib/utils.ts b/tools/tenscan/frontend/src/lib/utils.ts
deleted file mode 100644
index a07a957028..0000000000
--- a/tools/tenscan/frontend/src/lib/utils.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { formatDistanceToNow } from "date-fns";
-import { twMerge } from "tailwind-merge";
-import { ItemPosition } from "../types/interfaces";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function formatTimeAgo(unixTimestampSeconds: string | number) {
-  if (!unixTimestampSeconds) {
-    return "Unknown";
-  }
-  const date = new Date(Number(unixTimestampSeconds) * 1000);
-  return formatDistanceToNow(date, { addSuffix: true });
-}
-
-export const { ethereum } =
-  typeof window !== "undefined" ? window : ({} as any);
-
-export const downloadMetaMask = () => {
-  window ? window.open("https://metamask.io/download", "_blank") : null;
-};
-
-export const formatNumber = (number: string | number) => {
-  const num = Number(number);
-  return num.toLocaleString();
-};
-
-export const getItem = <T>(
-  arr: T[],
-  key: string,
-  position: ItemPosition = ItemPosition.FIRST
-) => {
-  if (!arr || !arr.length) {
-    return null;
-  }
-
-  const keys = key.split(".");
-  const item = position === ItemPosition.FIRST ? arr[0] : arr[arr.length - 1];
-  let value: any = item;
-
-  for (const k of keys) {
-    if (value[k] === undefined) {
-      return null;
-    }
-    value = value[k];
-  }
-
-  return value;
-};
-
-export function jsonHexToObj(hex: string) {
-  return JSON.parse(Buffer.from(hex.slice(2), "hex").toString());
-}
diff --git a/tools/tenscan/frontend/src/routes/index.ts b/tools/tenscan/frontend/src/routes/index.ts
index 64792fc3e2..6e08965830 100644
--- a/tools/tenscan/frontend/src/routes/index.ts
+++ b/tools/tenscan/frontend/src/routes/index.ts
@@ -39,21 +39,61 @@ export const ethMethods = {
   getStorageAt: "eth_getStorageAt",
   getTransactionReceipt: "eth_getTransactionReceipt",
 };
+
 // to send TEN Custom Queries (CQ) through the provider we call eth_getStorageAt and use these addresses to identify the TEN CQ method
 export const tenCustomQueryMethods = {
   getUserID: "0x0000000000000000000000000000000000000001",
   listPersonalTransactions: "0x0000000000000000000000000000000000000002",
 };
 
+export const externalPageLinks = {
+  // Dev and UAT environments don't have etherscan, hence, we're hardcoding this to just Sepolia
+  etherscanBlock: "https://sepolia.etherscan.io/block/:hash",
+};
+
+export const pageLinks = {
+  home: "/",
+  address: "/address/:address",
+
+  // **** TRANSACTIONS ****
+  personalTransactions: "/personal",
+  transactions: "/transactions",
+  txByHash: "/tx/:hash",
+  personalTxByHash: "/personal/tx/:hash",
+
+  // **** BATCHES ****
+  batches: "/batches",
+  batchByHash: "/batch/:hash",
+  batchByHeight: "/batch/height/:height",
+  batchTransactions: "/batch/txs/:hash",
+
+  // **** ROLLUPS ****
+  rollups: "/rollups",
+  rollupByHash: "/rollup/:hash",
+  rollupByBatchSequence: "/rollup/batch/sequence/:sequence",
+  rollupBatches: "/rollup/:hash/batches",
+
+  // **** BLOCKS ****
+  blocks: "/blocks",
+
+  // **** CONTRACTS ****
+  verifiedData: "/resources/verified-data",
+  decrypt: "/resources/decrypt",
+
+  // **** INFO ****
+  privacyPolicy: "/docs/privacy-policy",
+  termsOfService: "/docs/terms",
+};
+
 export const NavLinks: NavLink[] = [
   {
-    href: "/",
+    href: pageLinks.home,
     label: "Home",
     isExternal: false,
     isDropdown: false,
   },
   {
-    href: "/personal",
+    href: pageLinks.personalTransactions,
     label: "Personal",
     isExternal: false,
     isDropdown: false,
@@ -64,17 +104,17 @@ export const NavLinks: NavLink[] = [
     isDropdown: true,
     subNavLinks: [
       {
-        href: "/transactions",
+        href: pageLinks.transactions,
         label: "Transactions",
         isExternal: false,
       },
       {
-        href: "/batches",
+        href: pageLinks.batches,
         label: "Batches",
         isExternal: false,
       },
       {
-        href: "/rollups",
+        href: pageLinks.rollups,
         label: "Rollups",
         isExternal: false,
       },
@@ -86,15 +126,10 @@ export const NavLinks: NavLink[] = [
     isDropdown: true,
     subNavLinks: [
       {
-        href: "/resources/verified-data",
+        href: pageLinks.verifiedData,
         label: "Verified Data",
         isExternal: false,
       },
     ],
   },
 ];
-
-export const externalLinks = {
-  // Dev and UAT environments don't have etherscan, hence, we're hardcoding this to just Sepolia
-  etherscanBlock: "https://sepolia.etherscan.io/block/",
-};
diff --git a/tools/tenscan/frontend/src/services/useBatchesService.ts b/tools/tenscan/frontend/src/services/useBatchesService.ts
index 06ebc2982a..619dbef587 100644
--- a/tools/tenscan/frontend/src/services/useBatchesService.ts
+++ b/tools/tenscan/frontend/src/services/useBatchesService.ts
@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 export const useBatchesService = () => {
   const { query } = useRouter();
 
-  const [noPolling, setNoPolling] = useState(false);
+  const [noPolling, setNoPolling] = useState(true);
 
   const options = getOptions(query);
 
diff --git a/tools/tenscan/frontend/src/services/useBlocksService.ts b/tools/tenscan/frontend/src/services/useBlocksService.ts
index 1af7f9458d..97d318e313 100644
--- a/tools/tenscan/frontend/src/services/useBlocksService.ts
+++ b/tools/tenscan/frontend/src/services/useBlocksService.ts
@@ -7,7 +7,7 @@ import { useState } from "react";
 export const useBlocksService = () => {
   const { query } = useRouter();
 
-  const [noPolling, setNoPolling] = useState(false);
+  const [noPolling, setNoPolling] = useState(true);
 
   const options = getOptions(query);
 
diff --git a/tools/tenscan/frontend/src/services/useRollupsService.ts b/tools/tenscan/frontend/src/services/useRollupsService.ts
index 2853b44491..2f1440ac4d 100644
--- a/tools/tenscan/frontend/src/services/useRollupsService.ts
+++ b/tools/tenscan/frontend/src/services/useRollupsService.ts
@@ -4,7 +4,7 @@ import {
   fetchLatestRollups,
   fetchRollups,
 } from "@/api/rollups";
-import { toast } from "@/src/components/ui/use-toast";
+import { toast } from "@repo/ui/components/shared/use-toast";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { getOptions, pollingInterval } from "../lib/constants";
@@ -13,7 +13,7 @@ import { useRouter } from "next/router";
 export const useRollupsService = () => {
   const { query } = useRouter();
 
-  const [noPolling, setNoPolling] = useState(false);
+  const [noPolling, setNoPolling] = useState(true);
   const [decryptedRollup, setDecryptedRollup] = useState<any>();
 
   const options = getOptions(query);
diff --git a/tools/tenscan/frontend/src/services/useTransactionsService.ts b/tools/tenscan/frontend/src/services/useTransactionsService.ts
index 5284c073f3..c507e9b256 100644
--- a/tools/tenscan/frontend/src/services/useTransactionsService.ts
+++ b/tools/tenscan/frontend/src/services/useTransactionsService.ts
@@ -4,7 +4,6 @@ import {
   fetchTransactionCount,
   personalTransactionsData,
 } from "@/api/transactions";
-import { useWalletConnection } from "@/src/components/providers/wallet-provider";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import {
@@ -13,12 +12,13 @@ import {
   pricePollingInterval,
 } from "../lib/constants";
 import { useRouter } from "next/router";
+import useWalletStore from "@repo/ui/stores/wallet-store";
 
 export const useTransactionsService = () => {
   const { query } = useRouter();
-  const { walletAddress, provider } = useWalletConnection();
+  const { address, provider } = useWalletStore();
 
-  const [noPolling, setNoPolling] = useState(false);
+  const [noPolling, setNoPolling] = useState(true);
 
   const options = getOptions(query);
 
@@ -41,8 +41,8 @@ export const useTransactionsService = () => {
 
   const { data: personalTxns, isLoading: personalTxnsLoading } = useQuery({
     queryKey: ["personalTxns", options],
-    queryFn: () => personalTransactionsData(provider, walletAddress, options),
-    enabled: !!walletAddress && !!provider,
+    queryFn: () => personalTransactionsData(provider, address, options),
+    enabled: !!address && !!provider,
   });
 
   const { data: price, isLoading: isPriceLoading } = useQuery({
diff --git a/tools/tenscan/frontend/src/types/interfaces/BlockInterfaces.ts b/tools/tenscan/frontend/src/types/interfaces/BlockInterfaces.ts
index e6141ce39d..d3c060c88b 100644
--- a/tools/tenscan/frontend/src/types/interfaces/BlockInterfaces.ts
+++ b/tools/tenscan/frontend/src/types/interfaces/BlockInterfaces.ts
@@ -1,3 +1,8 @@
+export type BlockResponse = {
+  BlocksData: Block[];
+  Total: number;
+};
+
 export type Block = {
   blockHeader: BlockHeader;
   rollupHash: string;
diff --git a/tools/tenscan/frontend/src/types/interfaces/WalletInterfaces.ts b/tools/tenscan/frontend/src/types/interfaces/WalletInterfaces.ts
index c9cbb55c0b..836e99f289 100644
--- a/tools/tenscan/frontend/src/types/interfaces/WalletInterfaces.ts
+++ b/tools/tenscan/frontend/src/types/interfaces/WalletInterfaces.ts
@@ -2,10 +2,6 @@ import { ethers } from "ethers";
 
 export interface WalletConnectionContextType {
   provider: ethers.providers.Web3Provider | null;
-  walletConnected: boolean;
-  walletAddress: string | null;
-  connectWallet: () => Promise<void>;
-  disconnectWallet: () => void;
 }
 
 export interface Props {
diff --git a/tools/tenscan/frontend/src/types/interfaces/index.ts b/tools/tenscan/frontend/src/types/interfaces/index.ts
index bd25e0b37a..95c4f65953 100644
--- a/tools/tenscan/frontend/src/types/interfaces/index.ts
+++ b/tools/tenscan/frontend/src/types/interfaces/index.ts
@@ -1,70 +1,5 @@
 import React from "react";
 
-export interface SeoProps {
-  title: string;
-  description: string;
-  canonicalUrl: string;
-  ogTwitterImage: string;
-  ogImageUrl: string;
-  ogType: string;
-  includeDefaultKeywords?: boolean;
-  children?: React.ReactNode;
-}
-
-export interface ErrorType {
-  statusCode?: number;
-  showRedirectText?: boolean;
-  heading?: string;
-  statusText?: string;
-  message?: string;
-  redirectText?: string;
-  customPageTitle?: string;
-  isFullWidth?: boolean;
-  style?: React.CSSProperties;
-  hasGetInitialPropsRun?: boolean;
-  err?: Error;
-  showMessage?: boolean;
-  showStatusText?: boolean;
-  isModal?: boolean;
-  redirectLink?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export interface IconProps {
-  width?: string;
-  height?: string;
-  fill?: string;
-  stroke?: string;
-  strokeWidth?: string;
-  className?: string;
-  isActive?: boolean;
-  onClick?: () => void;
-}
-
-export interface GetInfinitePagesInterface<T> {
-  nextId?: number;
-  previousId?: number;
-  data: T;
-  count: number;
-}
-
-export interface PaginationInterface {
-  page: number;
-  perPage: number;
-  total: number;
-  totalPages: number;
-}
-
-export interface ResponseDataInterface<T> {
-  result: T;
-  errors?: string[] | string;
-  item: T;
-  message: string;
-  pagination?: PaginationInterface;
-  success: string;
-}
-
 export type NavLink = {
   label: string;
   href?: string;
@@ -73,22 +8,6 @@ export type NavLink = {
   subNavLinks?: NavLink[];
 };
 
-export enum ToastType {
-  INFO = "info",
-  SUCCESS = "success",
-  WARNING = "warning",
-  DESTRUCTIVE = "destructive",
-  DEFAULT = "default",
-}
-
-export enum BadgeType {
-  SUCCESS = "success",
-  SECONDARY = "secondary",
-  DESTRUCTIVE = "destructive",
-  DEFAULT = "default",
-  OUTLINE = "outline",
-}
-
 export interface DashboardAnalyticsData {
   title: string;
   value: string | number | JSX.Element;
@@ -96,8 +15,3 @@ export interface DashboardAnalyticsData {
   icon: any;
   loading?: boolean;
 }
-
-export enum ItemPosition {
-  FIRST = "first",
-  LAST = "last",
-}
diff --git a/tools/tenscan/frontend/tailwind.config.js b/tools/tenscan/frontend/tailwind.config.js
index fbdcb05125..3e2a982be4 100644
--- a/tools/tenscan/frontend/tailwind.config.js
+++ b/tools/tenscan/frontend/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
     "./src/components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
+    "../../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     container: {
@@ -38,6 +39,10 @@ module.exports = {
           DEFAULT: "hsl(var(--warning))",
           foreground: "hsl(var(--warning-foreground))",
         },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
diff --git a/tools/tenscan/frontend/tailwind.config.ts b/tools/tenscan/frontend/tailwind.config.ts
deleted file mode 100644
index a1ee900a91..0000000000
--- a/tools/tenscan/frontend/tailwind.config.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { Config } from "tailwindcss";
-const { fontFamily } = require("tailwindcss/defaultTheme");
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
-        },
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        xl: `calc(var(--radius) + 4px)`,
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontSize: {
-        8: "8px",
-        10: "10px",
-        12: "12px",
-        13: "13px",
-        14: "14px",
-        16: "16px",
-        18: "18px",
-        20: "20px",
-        22: "22px",
-        24: "24px",
-        30: "30px",
-        40: "40px",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};
-export default config;