diff --git a/.github/workflows/bridge-ui-e2e-tests.yml b/.github/workflows/bridge-ui-e2e-tests.yml
index 16b61745a..7929f01c8 100644
--- a/.github/workflows/bridge-ui-e2e-tests.yml
+++ b/.github/workflows/bridge-ui-e2e-tests.yml
@@ -14,7 +14,7 @@ on:
 
 jobs:
   run-e2e-tests:
-    runs-on: ubuntu-22.04-16core
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
diff --git a/bridge-ui/.env.production b/bridge-ui/.env.production
index 85a6c4e04..49c3d1e2e 100644
--- a/bridge-ui/.env.production
+++ b/bridge-ui/.env.production
@@ -26,4 +26,4 @@ NEXT_PUBLIC_INFURA_ID=<GITHUB_SECRET>
 
 E2E_TEST_PRIVATE_KEY=<GITHUB_SECRET>
 
-NEXT_PUBLIC_STORAGE_MIN_VERSION="0.6.5"
+NEXT_PUBLIC_STORAGE_MIN_VERSION="1"
diff --git a/bridge-ui/README.md b/bridge-ui/README.md
index ea90a6622..9c5ad4316 100644
--- a/bridge-ui/README.md
+++ b/bridge-ui/README.md
@@ -154,21 +154,21 @@ The config variables are:
 | NEXT_PUBLIC_MAINNET_PROFIT_MARGIN             | Linea profit margin on mainnet                 | 2                                                                                                         |
 | NEXT_PUBLIC_MAINNET_TOKEN_LIST                | Linea Token list on mainnet                    | https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-mainnet-token-shortlist.json |
 |                                               |                                                |                                                                                                           |
-| NEXT_PUBLIC_SEPOLIA_L1_TOKEN_BRIDGE            | Linea Token Bridge on Ethereum Sepolia        | 0x5A0a48389BB0f12E5e017116c1105da97E129142                                                                |
-| NEXT_PUBLIC_SEPOLIA_LINEA_TOKEN_BRIDGE         | Linea Token Bridge on Linea Sepolia           | 0x93DcAdf238932e6e6a85852caC89cBd71798F463                                                                |
-| NEXT_PUBLIC_SEPOLIA_L1_MESSAGE_SERVICE         | Linea Message Service on Ethereum Sepolia     | 0xB218f8A4Bc926cF1cA7b3423c154a0D627Bdb7E5                                                                |
-| NEXT_PUBLIC_SEPOLIA_LINEA_MESSAGE_SERVICE      | Linea Message Service on Linea Sepolia        | 0x971e727e956690b9957be6d51Ec16E73AcAC83A7                                                                |
-| NEXT_PUBLIC_SEPOLIA_L1_USDC_BRIDGE             | Linea USDC Bridge on Ethereum Sepolia         | 0x32D123756d32d3eD6580935f8edF416e57b940f4                                                                |
-| NEXT_PUBLIC_SEPOLIA_LINEA_USDC_BRIDGE          | Linea USDC Bridge on Linea Sepolia            | 0xDFa112375c9be9D124932b1d104b73f888655329                                                                |
-| NEXT_PUBLIC_SEPOLIA_GAS_ESTIMATED              | Linea gas estimated on Sepolia                | 6100000000                                                                                                |
-| NEXT_PUBLIC_SEPOLIA_DEFAULT_GAS_LIMIT_SURPLUS  | Linea gas limit surplus on Sepolia            | 6000                                                                                                      |
-| NEXT_PUBLIC_SEPOLIA_PROFIT_MARGIN              | Linea profit margin on Sepolia                | 2                                                                                                         |
-| NEXT_PUBLIC_SEPOLIA_TOKEN_LIST                 | Linea Token list on Sepolia                   | https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json  |
+| NEXT_PUBLIC_SEPOLIA_L1_TOKEN_BRIDGE           | Linea Token Bridge on Ethereum Sepolia         | 0x5A0a48389BB0f12E5e017116c1105da97E129142                                                                |
+| NEXT_PUBLIC_SEPOLIA_LINEA_TOKEN_BRIDGE        | Linea Token Bridge on Linea Sepolia            | 0x93DcAdf238932e6e6a85852caC89cBd71798F463                                                                |
+| NEXT_PUBLIC_SEPOLIA_L1_MESSAGE_SERVICE        | Linea Message Service on Ethereum Sepolia      | 0xB218f8A4Bc926cF1cA7b3423c154a0D627Bdb7E5                                                                |
+| NEXT_PUBLIC_SEPOLIA_LINEA_MESSAGE_SERVICE     | Linea Message Service on Linea Sepolia         | 0x971e727e956690b9957be6d51Ec16E73AcAC83A7                                                                |
+| NEXT_PUBLIC_SEPOLIA_L1_USDC_BRIDGE            | Linea USDC Bridge on Ethereum Sepolia          | 0x32D123756d32d3eD6580935f8edF416e57b940f4                                                                |
+| NEXT_PUBLIC_SEPOLIA_LINEA_USDC_BRIDGE         | Linea USDC Bridge on Linea Sepolia             | 0xDFa112375c9be9D124932b1d104b73f888655329                                                                |
+| NEXT_PUBLIC_SEPOLIA_GAS_ESTIMATED             | Linea gas estimated on Sepolia                 | 6100000000                                                                                                |
+| NEXT_PUBLIC_SEPOLIA_DEFAULT_GAS_LIMIT_SURPLUS | Linea gas limit surplus on Sepolia             | 6000                                                                                                      |
+| NEXT_PUBLIC_SEPOLIA_PROFIT_MARGIN             | Linea profit margin on Sepolia                 | 2                                                                                                         |
+| NEXT_PUBLIC_SEPOLIA_TOKEN_LIST                | Linea Token list on Sepolia                    | https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json |
 |                                               |                                                |                                                                                                           |
 | NEXT_PUBLIC_WALLET_CONNECT_ID                 | Wallet Connect Api Key                         |                                                                                                           |
 | NEXT_PUBLIC_INFURA_ID                         | Infura API Key                                 |                                                                                                           |
 | E2E_TEST_PRIVATE_KEY                          | Private key to execute e2e on Sepolia          |                                                                                                           |
-| NEXT_PUBLIC_STORAGE_MIN_VERSION               | Local storage version for reseting the storage | 0.4.14                                                                                                    |
+| NEXT_PUBLIC_STORAGE_MIN_VERSION               | Local storage version for reseting the storage | 1                                                                                                         |
 
 ## About
 
diff --git a/bridge-ui/RELEASE-NOTES.md b/bridge-ui/RELEASE-NOTES.md
index 745cce7af..fc557171f 100644
--- a/bridge-ui/RELEASE-NOTES.md
+++ b/bridge-ui/RELEASE-NOTES.md
@@ -1,3 +1,15 @@
+<a name="v1.0.0"></a>
+
+# [v1.0.0] - 18 Sep 2024
+
+# Fix: New Bridge UI design
+
+Description:
+- New bridge UI design
+
+[Changes][v1.0.0]
+
+
 <a name="v0.6.5"></a>
 
 # [v0.6.5] - 30 May 2024
diff --git a/bridge-ui/package.json b/bridge-ui/package.json
index 99fe8b2d3..9d00c38da 100644
--- a/bridge-ui/package.json
+++ b/bridge-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bridge-ui",
-  "version": "0.6.5",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/bridge-ui/public/fonts/AtypDisplay-Bold-subset.woff2 b/bridge-ui/public/fonts/AtypDisplay-Bold-subset.woff2
new file mode 100644
index 000000000..4e874e126
Binary files /dev/null and b/bridge-ui/public/fonts/AtypDisplay-Bold-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Bold.woff2 b/bridge-ui/public/fonts/AtypDisplay-Bold.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Bold.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Bold.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-BoldItalic.woff2 b/bridge-ui/public/fonts/AtypDisplay-BoldItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-BoldItalic.woff2
rename to bridge-ui/public/fonts/AtypDisplay-BoldItalic.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Italic.woff2 b/bridge-ui/public/fonts/AtypDisplay-Italic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Italic.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Italic.woff2
diff --git a/bridge-ui/public/fonts/AtypDisplay-Light-subset.woff2 b/bridge-ui/public/fonts/AtypDisplay-Light-subset.woff2
new file mode 100644
index 000000000..50622476a
Binary files /dev/null and b/bridge-ui/public/fonts/AtypDisplay-Light-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Light.woff2 b/bridge-ui/public/fonts/AtypDisplay-Light.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Light.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Light.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-LightItalic.woff2 b/bridge-ui/public/fonts/AtypDisplay-LightItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-LightItalic.woff2
rename to bridge-ui/public/fonts/AtypDisplay-LightItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypDisplay-Medium-subset.woff2 b/bridge-ui/public/fonts/AtypDisplay-Medium-subset.woff2
new file mode 100644
index 000000000..de9908cf1
Binary files /dev/null and b/bridge-ui/public/fonts/AtypDisplay-Medium-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Medium.woff2 b/bridge-ui/public/fonts/AtypDisplay-Medium.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Medium.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Medium.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-MediumItalic.woff2 b/bridge-ui/public/fonts/AtypDisplay-MediumItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-MediumItalic.woff2
rename to bridge-ui/public/fonts/AtypDisplay-MediumItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypDisplay-Regular-subset.woff2 b/bridge-ui/public/fonts/AtypDisplay-Regular-subset.woff2
new file mode 100644
index 000000000..e441d17ab
Binary files /dev/null and b/bridge-ui/public/fonts/AtypDisplay-Regular-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Regular.woff2 b/bridge-ui/public/fonts/AtypDisplay-Regular.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Regular.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Regular.woff2
diff --git a/bridge-ui/public/fonts/AtypDisplay-Semibold-subset.woff2 b/bridge-ui/public/fonts/AtypDisplay-Semibold-subset.woff2
new file mode 100644
index 000000000..85289a991
Binary files /dev/null and b/bridge-ui/public/fonts/AtypDisplay-Semibold-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-Semibold.woff2 b/bridge-ui/public/fonts/AtypDisplay-Semibold.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-Semibold.woff2
rename to bridge-ui/public/fonts/AtypDisplay-Semibold.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypDisplay-SemiboldItalic.woff2 b/bridge-ui/public/fonts/AtypDisplay-SemiboldItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypDisplay-SemiboldItalic.woff2
rename to bridge-ui/public/fonts/AtypDisplay-SemiboldItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Bold-subset.woff2 b/bridge-ui/public/fonts/AtypText-Bold-subset.woff2
new file mode 100644
index 000000000..978b9641b
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Bold-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Bold.woff2 b/bridge-ui/public/fonts/AtypText-Bold.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Bold.woff2
rename to bridge-ui/public/fonts/AtypText-Bold.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-BoldItalic.woff2 b/bridge-ui/public/fonts/AtypText-BoldItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-BoldItalic.woff2
rename to bridge-ui/public/fonts/AtypText-BoldItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Italic-subset.woff2 b/bridge-ui/public/fonts/AtypText-Italic-subset.woff2
new file mode 100644
index 000000000..710d4863b
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Italic-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Italic.woff2 b/bridge-ui/public/fonts/AtypText-Italic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Italic.woff2
rename to bridge-ui/public/fonts/AtypText-Italic.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Light-subset.woff2 b/bridge-ui/public/fonts/AtypText-Light-subset.woff2
new file mode 100644
index 000000000..9fc09ac21
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Light-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Light.woff2 b/bridge-ui/public/fonts/AtypText-Light.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Light.woff2
rename to bridge-ui/public/fonts/AtypText-Light.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-LightItalic.woff2 b/bridge-ui/public/fonts/AtypText-LightItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-LightItalic.woff2
rename to bridge-ui/public/fonts/AtypText-LightItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Medium-subset.woff2 b/bridge-ui/public/fonts/AtypText-Medium-subset.woff2
new file mode 100644
index 000000000..de6c694df
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Medium-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Medium.woff2 b/bridge-ui/public/fonts/AtypText-Medium.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Medium.woff2
rename to bridge-ui/public/fonts/AtypText-Medium.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-MediumItalic.woff2 b/bridge-ui/public/fonts/AtypText-MediumItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-MediumItalic.woff2
rename to bridge-ui/public/fonts/AtypText-MediumItalic.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Regular-subset.woff2 b/bridge-ui/public/fonts/AtypText-Regular-subset.woff2
new file mode 100644
index 000000000..607bbbee4
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Regular-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Regular.woff2 b/bridge-ui/public/fonts/AtypText-Regular.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Regular.woff2
rename to bridge-ui/public/fonts/AtypText-Regular.woff2
diff --git a/bridge-ui/public/fonts/AtypText-Semibold-subset.woff2 b/bridge-ui/public/fonts/AtypText-Semibold-subset.woff2
new file mode 100644
index 000000000..40408302a
Binary files /dev/null and b/bridge-ui/public/fonts/AtypText-Semibold-subset.woff2 differ
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-Semibold.woff2 b/bridge-ui/public/fonts/AtypText-Semibold.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-Semibold.woff2
rename to bridge-ui/public/fonts/AtypText-Semibold.woff2
diff --git a/bridge-ui/src/app/assets/fonts/AtypText-SemiboldItalic.woff2 b/bridge-ui/public/fonts/AtypText-SemiboldItalic.woff2
similarity index 100%
rename from bridge-ui/src/app/assets/fonts/AtypText-SemiboldItalic.woff2
rename to bridge-ui/public/fonts/AtypText-SemiboldItalic.woff2
diff --git a/bridge-ui/src/app/faq/page.tsx b/bridge-ui/src/app/faq/page.tsx
index 8cfa5dab2..45838a965 100644
--- a/bridge-ui/src/app/faq/page.tsx
+++ b/bridge-ui/src/app/faq/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Collapse } from "@/components/Collapse";
+import { Collapse } from "@/components/ui";
 
 export default function FaqPage() {
   return (
diff --git a/bridge-ui/src/app/font/atyp.ts b/bridge-ui/src/app/font/atyp.ts
deleted file mode 100644
index 140170cda..000000000
--- a/bridge-ui/src/app/font/atyp.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import localFont from "next/font/local";
-
-const atypFont = localFont({
-  src: [
-    {
-      path: "../assets/fonts/AtypDisplay-Light.woff2",
-      weight: "300",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-LightItalic.woff2",
-      weight: "300",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-Regular.woff2",
-      weight: "400",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-Italic.woff2",
-      weight: "400",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-Medium.woff2",
-      weight: "500",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-MediumItalic.woff2",
-      weight: "500",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-Semibold.woff2",
-      weight: "600",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-SemiboldItalic.woff2",
-      weight: "600",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-Bold.woff2",
-      weight: "700",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypDisplay-BoldItalic.woff2",
-      weight: "700",
-      style: "italic",
-    },
-  ],
-  variable: "--font-atyp",
-});
-
-export default atypFont;
diff --git a/bridge-ui/src/app/font/atypText.ts b/bridge-ui/src/app/font/atypText.ts
deleted file mode 100644
index 0a20eb758..000000000
--- a/bridge-ui/src/app/font/atypText.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import localFont from "next/font/local";
-
-const atypTextFont = localFont({
-  src: [
-    {
-      path: "../assets/fonts/AtypText-Light.woff2",
-      weight: "300",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypText-LightItalic.woff2",
-      weight: "300",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypText-Regular.woff2",
-      weight: "400",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypText-Italic.woff2",
-      weight: "400",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypText-Medium.woff2",
-      weight: "500",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypText-MediumItalic.woff2",
-      weight: "500",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypText-Semibold.woff2",
-      weight: "600",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypText-SemiboldItalic.woff2",
-      weight: "600",
-      style: "italic",
-    },
-    {
-      path: "../assets/fonts/AtypText-Bold.woff2",
-      weight: "700",
-      style: "normal",
-    },
-    {
-      path: "../assets/fonts/AtypText-BoldItalic.woff2",
-      weight: "700",
-      style: "italic",
-    },
-  ],
-  variable: "--font-atyp-text",
-});
-
-export default atypTextFont;
diff --git a/bridge-ui/src/app/layout.tsx b/bridge-ui/src/app/layout.tsx
index 0a4a9455a..6226772ed 100644
--- a/bridge-ui/src/app/layout.tsx
+++ b/bridge-ui/src/app/layout.tsx
@@ -2,17 +2,17 @@ import { Metadata } from "next";
 import { headers } from "next/headers";
 import Script from "next/script";
 import { cookieToInitialState } from "wagmi";
-import { Inter } from "next/font/google";
 import { wagmiConfig } from "@/config";
 import usabillaBeScript from "@/scripts/usabilla";
 import { gtmScript, gtmNoScript } from "@/scripts/gtm";
 import { Providers } from "@/components/layouts/Providers";
 import { Layout } from "@/components/layouts/Layout";
+import { cn } from "@/utils/cn";
+import atypFont from "@/assets/fonts/atyp";
+import atypTextFont from "@/assets/fonts/atypText";
 import "react-toastify/dist/ReactToastify.css";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-
 const metadata: Metadata = {
   title: "Linea Bridge",
   description: `Linea Bridge is a bridge solution, providing secure and efficient cross-chain transactions between Layer 1 and Linea networks.
@@ -30,7 +30,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <title>{metadata.title?.toString()}</title>
       <meta name="description" content={metadata.description?.toString()} key="desc" />
 
-      <body className={inter.className}>
+      <body className={cn(atypFont.variable, atypTextFont.variable, atypFont.className, atypTextFont.className)}>
         <noscript dangerouslySetInnerHTML={{ __html: gtmNoScript }} />
 
         <Providers initialState={initialState}>
diff --git a/bridge-ui/src/assets/fonts/atyp.ts b/bridge-ui/src/assets/fonts/atyp.ts
new file mode 100644
index 000000000..c4982e01a
--- /dev/null
+++ b/bridge-ui/src/assets/fonts/atyp.ts
@@ -0,0 +1,85 @@
+import localFont from "next/font/local";
+
+const atypFont = localFont({
+  display: "swap",
+  src: [
+    {
+      path: "../../../public/fonts/AtypDisplay-Light-subset.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Light.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-LightItalic.woff2",
+      weight: "300",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Regular-subset.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Medium-subset.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-MediumItalic.woff2",
+      weight: "500",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Semibold-subset.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Semibold.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-SemiboldItalic.woff2",
+      weight: "600",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Bold-subset.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-Bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypDisplay-BoldItalic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  ],
+  variable: "--font-atyp",
+});
+
+export default atypFont;
diff --git a/bridge-ui/src/assets/fonts/atypText.ts b/bridge-ui/src/assets/fonts/atypText.ts
new file mode 100644
index 000000000..5a2846ce8
--- /dev/null
+++ b/bridge-ui/src/assets/fonts/atypText.ts
@@ -0,0 +1,90 @@
+import localFont from "next/font/local";
+
+const atypTextFont = localFont({
+  display: "swap",
+  src: [
+    {
+      path: "../../../public/fonts/AtypText-Light-subset.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-LightItalic.woff2",
+      weight: "300",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Light.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Regular-subset.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Italic-subset.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Medium-subset.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-MediumItalic.woff2",
+      weight: "500",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Semibold-subset.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Semibold.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-SemiboldItalic.woff2",
+      weight: "600",
+      style: "italic",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Bold-subset.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-Bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../../public/fonts/AtypText-BoldItalic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  ],
+  variable: "--font-atyp-text",
+});
+
+export default atypTextFont;
diff --git a/bridge-ui/src/assets/icons/swap.svg b/bridge-ui/src/assets/icons/swap.svg
index f5a5136a0..0f1cf7c55 100644
--- a/bridge-ui/src/assets/icons/swap.svg
+++ b/bridge-ui/src/assets/icons/swap.svg
@@ -1,4 +1,4 @@
-<svg width="100" height="100" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="0.5" y="1.45947" width="39" height="39" rx="19.5" fill="#1D1D1D" />
             <rect x="0.5" y="1.45947" width="39" height="39" rx="19.5" stroke="#505050" />
             <path
diff --git a/bridge-ui/src/components/ConnectButton.tsx b/bridge-ui/src/components/ConnectButton.tsx
index d0ec35c15..cf046d622 100644
--- a/bridge-ui/src/components/ConnectButton.tsx
+++ b/bridge-ui/src/components/ConnectButton.tsx
@@ -1,6 +1,6 @@
 import { useWeb3Modal } from "@web3modal/wagmi/react";
 import { cn } from "@/utils/cn";
-import Button from "./bridge/Button";
+import { Button } from "./ui";
 
 type ConnectButtonProps = {
   fullWidth?: boolean;
@@ -13,7 +13,7 @@ export default function ConnectButton({ fullWidth }: ConnectButtonProps) {
       id="wallet-connect-btn"
       variant="primary"
       size="md"
-      className={cn({
+      className={cn("text-lg font-normal", {
         "w-full": fullWidth,
       })}
       onClick={() => open()}
diff --git a/bridge-ui/src/components/Dropdown.tsx b/bridge-ui/src/components/Dropdown.tsx
deleted file mode 100644
index 3ac19f9a3..000000000
--- a/bridge-ui/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
-import { MdCallMade } from "react-icons/md";
-import { cn } from "@/utils/cn";
-
-export type DropdownItem = {
-  title: string;
-  iconPath: string;
-  onClick?: () => Promise<void>;
-  externalLink?: string;
-};
-
-type DropdownProps = {
-  initialValue?: DropdownItem;
-  outline?: boolean;
-  showDropdownToggle?: boolean;
-  items: DropdownItem[];
-};
-
-export default function Dropdown({ items, initialValue, outline = false, showDropdownToggle = true }: DropdownProps) {
-  const ref = useRef<HTMLDetailsElement>(null);
-  const [selectedItem, setSelectedItem] = useState<DropdownItem | null>(null);
-
-  useEffect(() => {
-    setSelectedItem(initialValue || null);
-  }, [initialValue]);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        ref.current.removeAttribute("open");
-      }
-    };
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
-
-  const handleItemClick = async (item: DropdownItem) => {
-    setSelectedItem(item);
-    if (item.onClick) {
-      await item.onClick();
-    }
-    ref.current?.removeAttribute("open");
-  };
-
-  return (
-    <details className="dropdown relative" ref={ref}>
-      <summary
-        className={cn("flex cursor-pointer items-center gap-2 rounded-full p-2 px-3", {
-          "border-2 border-card": outline,
-          "bg-[#2D2D2D] text-white": !outline,
-        })}
-      >
-        {selectedItem ? (
-          <>
-            {selectedItem.iconPath && (
-              <Image
-                src={selectedItem.iconPath}
-                alt="MetaMask"
-                width={0}
-                height={0}
-                style={{ width: "18px", height: "auto" }}
-              />
-            )}
-            <span>{selectedItem.title}</span>
-          </>
-        ) : (
-          <span>Select an option</span>
-        )}
-        {showDropdownToggle && (
-          <svg
-            className="ml-1 size-4 text-card transition-transform"
-            fill="none"
-            stroke={"white"}
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M19 9l-7 7-7-7"></path>
-          </svg>
-        )}
-      </summary>
-      <ul className="menu dropdown-content absolute right-0 z-10 mt-2 min-w-max border-2 border-card bg-cardBg p-0 shadow">
-        {items.map((item, index) => (
-          <li key={`dropdown-${item}-${index}`} className="w-full">
-            {item.externalLink ? (
-              <Link
-                href={item.externalLink}
-                passHref
-                target="_blank"
-                rel="noopener noreferrer"
-                className="btn btn-md flex justify-start rounded-none border-none bg-cardBg text-white"
-              >
-                {item.iconPath && (
-                  <Image
-                    src={item.iconPath}
-                    alt="MetaMask"
-                    width={0}
-                    height={0}
-                    style={{ width: "18px", height: "auto" }}
-                  />
-                )}
-                {item.title}
-                <MdCallMade />
-              </Link>
-            ) : (
-              <button
-                className={cn("btn btn-md flex justify-start border-none bg-cardBg rounded-none", {
-                  "text-white": !outline,
-                })}
-                onClick={() => handleItemClick(item)}
-              >
-                {item.iconPath && (
-                  <Image
-                    src={item.iconPath}
-                    alt="MetaMask"
-                    width={0}
-                    height={0}
-                    style={{ width: "18px", height: "auto" }}
-                  />
-                )}
-                {item.title}
-              </button>
-            )}
-          </li>
-        ))}
-      </ul>
-      <style>{`
-        details[open] summary svg {
-          transform: rotate(180deg);
-        }
-      `}</style>
-    </details>
-  );
-}
diff --git a/bridge-ui/src/components/DropdownItem.tsx b/bridge-ui/src/components/DropdownItem.tsx
index 5b3392763..d0a5116b1 100644
--- a/bridge-ui/src/components/DropdownItem.tsx
+++ b/bridge-ui/src/components/DropdownItem.tsx
@@ -20,7 +20,7 @@ export default function DropdownItem({ title, iconPath, onClick, externalLink, c
           passHref
           target="_blank"
           rel="noopener noreferrer"
-          className={cn("btn btn-md flex justify-start rounded-none border-none bg-cardBg ", className)}
+          className={cn("btn btn-md flex justify-start font-normal rounded-none border-none bg-cardBg", className)}
         >
           {iconPath && (
             <Image src={iconPath} alt={title} width={18} height={18} style={{ width: "18px", height: "auto" }} />
@@ -35,7 +35,7 @@ export default function DropdownItem({ title, iconPath, onClick, externalLink, c
   return (
     <li key={`dropdown-item-${title}`} className="w-full">
       <button
-        className={cn("btn btn-md flex justify-start border-none bg-cardBg rounded-none", className)}
+        className={cn("btn btn-md flex justify-start font-normal border-none bg-cardBg rounded-none", className)}
         onClick={onClick}
       >
         {iconPath && (
diff --git a/bridge-ui/src/components/bridge/Bridge.tsx b/bridge-ui/src/components/bridge/Bridge.tsx
index 56a25f2e7..3d41431d7 100644
--- a/bridge-ui/src/components/bridge/Bridge.tsx
+++ b/bridge-ui/src/components/bridge/Bridge.tsx
@@ -5,20 +5,19 @@ import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { BridgeExternal } from "./BridgeExternal";
 import { FromChain } from "./FromChain";
 import { Balance } from "./Balance";
-import { Amount } from "./Amount";
+import { Amount } from "./form/Amount";
 import SwapIcon from "@/assets/icons/swap.svg";
 import { ToChain } from "./ToChain";
 import { ReceivedAmount } from "./ReceivedAmount";
-import { Recipient } from "./Recipient";
+import { Recipient } from "./form/Recipient";
 import { ClaimingType } from "./form/ClaimingType";
 import { Fees } from "./fees";
-import { Submit } from "./Submit";
+import { Submit } from "./form/Submit";
 import { useFormContext } from "react-hook-form";
 import { BridgeForm, Transaction } from "@/models";
 import { useChainStore } from "@/stores/chainStore";
 import { NetworkLayer, TokenType } from "@/config";
 import { useBridge, useSwitchNetwork, useFetchHistory } from "@/hooks";
-import { parseEther } from "viem";
 import TokenList from "./TokenList";
 import { toast } from "react-toastify";
 import { ERC20Stepper } from "./ERC20Stepper";
@@ -31,13 +30,19 @@ import TransactionConfirmationModal from "./modals/TransactionConfirmationModal"
 const Bridge = () => {
   const [waitingTransaction, setWaitingTransaction] = useState<Transaction | undefined>();
   const { handleShow, handleClose } = useContext(ModalContext);
-  const { fromChain, token, networkLayer } = useChainStore((state) => ({
+  const {
+    fromChain,
+    token,
+    networkLayer,
+    switchChain: switchChainInStore,
+  } = useChainStore((state) => ({
     fromChain: state.fromChain,
     token: state.token,
     networkLayer: state.networkLayer,
+    switchChain: state.switchChain,
   }));
 
-  const { handleSubmit, watch, reset } = useFormContext<BridgeForm>();
+  const { handleSubmit, watch, reset, setValue } = useFormContext<BridgeForm>();
 
   const [amount, bridgingAllowed, claim] = watch(["amount", "bridgingAllowed", "claim"]);
 
@@ -76,6 +81,10 @@ const Bridge = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hash]);
 
+  useEffect(() => {
+    setValue("gasFees", fees.transactionFeeInWei);
+  }, [fees.transactionFeeInWei, setValue]);
+
   // Clear tx waiting when changing account
   useEffect(() => {
     setWaitingTransaction(undefined);
@@ -123,7 +132,7 @@ const Bridge = () => {
   const onSubmit = async (data: BridgeForm) => {
     if (isLoading || isWaitingLoading) return;
     await switchChain();
-    bridge(data.amount, parseEther(data.minFees), data.recipient);
+    bridge(data.amount, data.minFees, data.recipient);
   };
 
   return (
@@ -150,7 +159,17 @@ const Bridge = () => {
             </div>
 
             <div className="divider my-6 flex justify-center">
-              <SwapIcon />
+              <button
+                className="btn btn-circle w-fit transition-transform duration-200"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.currentTarget.classList.toggle("rotate-180");
+                  switchChainInStore();
+                  reset();
+                }}
+              >
+                <SwapIcon />
+              </button>
             </div>
 
             <ToChain />
diff --git a/bridge-ui/src/components/bridge/BridgeLayout.tsx b/bridge-ui/src/components/bridge/BridgeLayout.tsx
index fcb3e5cf0..dc1d19f35 100644
--- a/bridge-ui/src/components/bridge/BridgeLayout.tsx
+++ b/bridge-ui/src/components/bridge/BridgeLayout.tsx
@@ -20,7 +20,10 @@ export default function BridgeLayout() {
       token: configContextValue?.UNKNOWN[0],
       claim: token?.type === TokenType.ETH ? "auto" : "manual",
       amount: "",
-      minFees: "0",
+      minFees: 0n,
+      gasFees: 0n,
+      bridgingAllowed: false,
+      balance: "0",
     },
   });
 
diff --git a/bridge-ui/src/components/bridge/ERC20Stepper.tsx b/bridge-ui/src/components/bridge/ERC20Stepper.tsx
index c6129068b..a73c523b1 100644
--- a/bridge-ui/src/components/bridge/ERC20Stepper.tsx
+++ b/bridge-ui/src/components/bridge/ERC20Stepper.tsx
@@ -1,6 +1,7 @@
 import { useChainStore } from "@/stores/chainStore";
 import { useFormContext } from "react-hook-form";
-import { Stepper } from "./Stepper";
+import { Stepper } from "../ui";
+import { parseUnits } from "viem";
 
 const STEPS = ["Approve", "Bridge"];
 
@@ -14,7 +15,12 @@ export function ERC20Stepper() {
 
   const isETHTransfer = token && token.symbol === "ETH";
   const isApproved =
-    !isETHTransfer && watchAmount && watchAmount > 0 && (watchAllowance || watchAllowance >= watchAmount);
+    !isETHTransfer &&
+    watchAmount &&
+    watchAmount > 0 &&
+    watchAllowance &&
+    token?.decimals &&
+    watchAllowance >= parseUnits(watchAmount, token?.decimals);
 
   return <Stepper steps={STEPS} activeStep={isApproved ? 1 : 0} />;
 }
diff --git a/bridge-ui/src/components/bridge/FromChain.tsx b/bridge-ui/src/components/bridge/FromChain.tsx
index 018c5ed2b..1ee74d46b 100644
--- a/bridge-ui/src/components/bridge/FromChain.tsx
+++ b/bridge-ui/src/components/bridge/FromChain.tsx
@@ -1,4 +1,4 @@
-import FromChainDropdown from "./FromChainDropdown";
+import FromChainDropdown from "./dropdowns/FromChainDropdown";
 
 export function FromChain() {
   return (
diff --git a/bridge-ui/src/components/bridge/ReceivedAmount.tsx b/bridge-ui/src/components/bridge/ReceivedAmount.tsx
index 8de290019..0bd39c324 100644
--- a/bridge-ui/src/components/bridge/ReceivedAmount.tsx
+++ b/bridge-ui/src/components/bridge/ReceivedAmount.tsx
@@ -25,18 +25,19 @@ export function ReceivedAmount({ receivedAmount }: ReceivedAmountProps) {
     <div className="flex min-h-20 flex-col gap-2 rounded-lg bg-[#2D2D2D] p-3">
       {isConnected && (
         <>
-          <span className="text-2xl font-bold text-white">
+          <span className="text-2xl font-semibold text-white">
             {formatBalance(receivedAmount) || 0} {token?.symbol}
           </span>
           {networkType === NetworkType.MAINNET && (
             <span className="label-text flex items-center">
-              <PiApproximateEqualsBold /> $
+              <PiApproximateEqualsBold />
               {tokenPrices?.[tokenAddress]?.usd
                 ? (Number(receivedAmount) * tokenPrices?.[tokenAddress]?.usd).toLocaleString("en-US", {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 10,
+                    style: "currency",
+                    currency: "USD",
+                    maximumFractionDigits: 4,
                   })
-                : "0.00"}
+                : "$0.00"}
             </span>
           )}
         </>
diff --git a/bridge-ui/src/components/bridge/ToChain.tsx b/bridge-ui/src/components/bridge/ToChain.tsx
index ef9106da7..ae895943a 100644
--- a/bridge-ui/src/components/bridge/ToChain.tsx
+++ b/bridge-ui/src/components/bridge/ToChain.tsx
@@ -1,4 +1,4 @@
-import ToChainDropdown from "./ToChainDropdown";
+import ToChainDropdown from "./dropdowns/ToChainDropdown";
 
 export function ToChain() {
   return (
diff --git a/bridge-ui/src/components/bridge/TokenList.tsx b/bridge-ui/src/components/bridge/TokenList.tsx
index b8ccd98d3..30de9e947 100644
--- a/bridge-ui/src/components/bridge/TokenList.tsx
+++ b/bridge-ui/src/components/bridge/TokenList.tsx
@@ -4,9 +4,9 @@ import { ModalContext } from "@/contexts/modal.context";
 import { useChainStore } from "@/stores/chainStore";
 import { useContext } from "react";
 import { useAccount } from "wagmi";
-import TokenModal from "./TokenModal";
+import TokenModal from "./modals/TokenModal";
 import { useFormContext } from "react-hook-form";
-import Button from "./Button";
+import { Button } from "../ui";
 
 export default function TokenList() {
   const token = useChainStore((state) => state.token);
@@ -22,7 +22,7 @@ export default function TokenList() {
           id="token-select-btn"
           type="button"
           variant="outline"
-          className="px-2 py-1"
+          className="px-2 py-1 font-normal"
           disabled={!isConnected}
           onClick={() =>
             handleShow(<TokenModal setValue={setValue} clearErrors={clearErrors} />, {
diff --git a/bridge-ui/src/components/bridge/FromChainDropdown.tsx b/bridge-ui/src/components/bridge/dropdowns/FromChainDropdown.tsx
similarity index 89%
rename from bridge-ui/src/components/bridge/FromChainDropdown.tsx
rename to bridge-ui/src/components/bridge/dropdowns/FromChainDropdown.tsx
index a6aebb516..8149de7e8 100644
--- a/bridge-ui/src/components/bridge/FromChainDropdown.tsx
+++ b/bridge-ui/src/components/bridge/dropdowns/FromChainDropdown.tsx
@@ -49,7 +49,9 @@ export default function FromChainDropdown() {
               style={{ width: "18px", height: "auto" }}
             />
           )}
-          <span className="hidden md:block">{fromChain?.name}</span>
+          <span className="hidden md:block">
+            {fromChain?.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : fromChain?.name}
+          </span>
           <svg
             className="size-4 text-card transition-transform"
             fill="none"
@@ -62,7 +64,7 @@ export default function FromChainDropdown() {
         </summary>
         <ul className="menu dropdown-content absolute right-0 z-10 mt-2 min-w-max border-2 border-card bg-cardBg p-0 shadow">
           <DropdownItem
-            title={toChain?.name || ""}
+            title={toChain?.name ? (toChain?.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : toChain?.name) : ""}
             iconPath={toChain && getChainLogoPath(toChain.id)}
             onClick={switchNetworkHandler}
           />
diff --git a/bridge-ui/src/components/bridge/ToChainDropdown.tsx b/bridge-ui/src/components/bridge/dropdowns/ToChainDropdown.tsx
similarity index 88%
rename from bridge-ui/src/components/bridge/ToChainDropdown.tsx
rename to bridge-ui/src/components/bridge/dropdowns/ToChainDropdown.tsx
index 68ef19349..acefd5434 100644
--- a/bridge-ui/src/components/bridge/ToChainDropdown.tsx
+++ b/bridge-ui/src/components/bridge/dropdowns/ToChainDropdown.tsx
@@ -50,7 +50,9 @@ export default function ToChainDropdown() {
               style={{ width: "18px", height: "auto" }}
             />
           )}
-          <span className="hidden md:block">{toChain?.name}</span>
+          <span className="hidden md:block">
+            {toChain?.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : toChain?.name}
+          </span>
           <svg
             className="size-4 text-card transition-transform"
             fill="none"
@@ -63,7 +65,9 @@ export default function ToChainDropdown() {
         </summary>
         <ul className="menu dropdown-content absolute right-0 z-10 mt-2 min-w-max border-2 border-card bg-cardBg p-0 shadow">
           <DropdownItem
-            title={fromChain?.name || ""}
+            title={
+              fromChain?.name ? (fromChain?.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : fromChain?.name) : ""
+            }
             iconPath={fromChain && getChainLogoPath(fromChain.id)}
             onClick={switchNetworkHandler}
           />
diff --git a/bridge-ui/src/components/bridge/fees/FeeLine.tsx b/bridge-ui/src/components/bridge/fees/FeeLine.tsx
index da174c221..cb03c90f8 100644
--- a/bridge-ui/src/components/bridge/fees/FeeLine.tsx
+++ b/bridge-ui/src/components/bridge/fees/FeeLine.tsx
@@ -1,6 +1,6 @@
 import { BsDashLg } from "react-icons/bs";
 import { MdInfo } from "react-icons/md";
-import { Tooltip } from "@/components/tooltip";
+import { Tooltip } from "@/components/ui";
 
 interface FeeLineProps {
   label: string;
diff --git a/bridge-ui/src/components/bridge/fees/Fees.tsx b/bridge-ui/src/components/bridge/fees/Fees.tsx
index 945b4f59c..53d26c532 100644
--- a/bridge-ui/src/components/bridge/fees/Fees.tsx
+++ b/bridge-ui/src/components/bridge/fees/Fees.tsx
@@ -12,12 +12,12 @@ type FeesProps = {
   totalReceived: string;
   fees: {
     total: bigint;
-    executionFeeInWei: bigint;
     bridgingFeeInWei: bigint;
+    transactionFeeInWei: bigint;
   };
 };
 
-export function Fees({ totalReceived, fees: { total, executionFeeInWei, bridgingFeeInWei } }: FeesProps) {
+export function Fees({ totalReceived, fees: { total, bridgingFeeInWei, transactionFeeInWei } }: FeesProps) {
   // Context
   const { token, networkLayer, fromChain, networkType } = useChainStore((state) => ({
     token: state.token,
@@ -27,8 +27,14 @@ export function Fees({ totalReceived, fees: { total, executionFeeInWei, bridging
   }));
 
   // Form
-  const { watch, setError, clearErrors } = useFormContext();
-  const amount = watch("amount");
+  const {
+    watch,
+    setError,
+    clearErrors,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
+  const [amount, claim] = watch(["amount", "claim"]);
 
   // Wagmi
   const { address, isConnected } = useAccount();
@@ -51,34 +57,52 @@ export function Fees({ totalReceived, fees: { total, executionFeeInWei, bridging
     }
   }, [setError, clearErrors, ethBalance, total]);
 
+  useEffect(() => {
+    setValue("minFees", bridgingFeeInWei);
+  }, [bridgingFeeInWei, setValue]);
+
   const estimatedTime = networkLayer === NetworkLayer.L1 ? "20 mins" : "8 hrs to 32 hrs";
 
   return (
     <div className="flex flex-col gap-2 text-sm">
       <FeeLine
         label="Estimated Time"
-        value={amount && estimatedTime}
-        tooltip="Linea has a minimum 8 hour delay on withdrawals as a security measure. 
-Withdrawals can take up to 32 hours to complete"
+        value={amount && !errors.amount?.message && estimatedTime}
+        tooltipClassName="z-[100]"
+        tooltip={
+          networkLayer === NetworkLayer.L1
+            ? "Linea has a 20 minutes delay on deposits as a security measure."
+            : "Linea has a minimum 8 hour delay on withdrawals as a security measure. Withdrawals can take up to 32 hours to complete"
+        }
       />
       <FeeLine
         label="Estimated Total Fee"
         value={
           isConnected &&
           amount &&
+          !errors.amount?.message &&
           (networkType === NetworkType.MAINNET && ethPrice && ethPrice?.[zeroAddress]
-            ? `$${(Number(formatEther(total)) * ethPrice[zeroAddress].usd).toLocaleString("en-US", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 10,
+            ? `${(Number(formatEther(total)) * ethPrice[zeroAddress].usd).toLocaleString("en-US", {
+                style: "currency",
+                currency: "USD",
+                maximumFractionDigits: 4,
               })}`
-            : `${formatBalance(formatEther(total))} ETH`)
+            : `${formatBalance(formatEther(total), 8)} ETH`)
+        }
+        tooltipClassName="before:whitespace-pre-wrap before:content-[attr(data-tip)] text-left z-[100]"
+        tooltip={
+          claim === "auto"
+            ? `Bridging transaction fee: ${formatBalance(formatEther(transactionFeeInWei), 8)} ETH\nAutomatic claiming Fee: ${formatBalance(formatEther(bridgingFeeInWei), 8)} ETH`
+            : `Bridging transaction fee: ${formatBalance(formatEther(transactionFeeInWei), 8)} ETH`
         }
-        tooltipClassName="before:whitespace-pre-wrap before:content-[attr(data-tip)] text-left"
-        tooltip={`Execution Fee: ${formatEther(executionFeeInWei)} ETH\nBridging fee: ${formatEther(bridgingFeeInWei)} ETH`}
       />
       <FeeLine
         label="Total Received"
-        value={totalReceived && totalReceived !== "0" ? `${formatBalance(totalReceived)} ${token?.symbol}` : undefined}
+        value={
+          !errors.amount?.message && totalReceived && totalReceived !== "0"
+            ? `${formatBalance(totalReceived)} ${token?.symbol}`
+            : undefined
+        }
       />
     </div>
   );
diff --git a/bridge-ui/src/components/bridge/Amount.tsx b/bridge-ui/src/components/bridge/form/Amount.tsx
similarity index 87%
rename from bridge-ui/src/components/bridge/Amount.tsx
rename to bridge-ui/src/components/bridge/form/Amount.tsx
index eb2853c80..f0147601d 100644
--- a/bridge-ui/src/components/bridge/Amount.tsx
+++ b/bridge-ui/src/components/bridge/form/Amount.tsx
@@ -21,10 +21,8 @@ export function Amount() {
   const { address } = useAccount();
 
   const { setValue, getValues, setError, clearErrors, trigger, watch } = useFormContext();
-  const watchBalance = watch("balance") || "0";
-  const amount = getValues("amount");
-  const gasFees = getValues("gasFees") || BigInt(0);
-  const minFees = getValues("minFees") || BigInt(0);
+  const watchBalance = watch("balance");
+  const [amount, gasFees, minFees] = getValues(["amount", "gasFees", "minFees"]);
 
   const { data: tokenPrices } = useTokenPrices([tokenAddress], fromChain?.id);
 
@@ -35,7 +33,7 @@ export function Amount() {
       }
       const amountToCompare =
         token.type === TokenType.ETH
-          ? parseUnits(_amount, token.decimals) + gasFees + parseUnits(minFees.toString(), 18)
+          ? parseUnits(_amount, token.decimals) + gasFees + minFees
           : parseUnits(_amount, token.decimals);
 
       const balanceToCompare = parseUnits(watchBalance, token.decimals);
@@ -120,17 +118,18 @@ export function Amount() {
         onChange={checkAmountHandler}
         pattern={AMOUNT_REGEX}
         placeholder="Enter amount"
-        className="input input-md w-full border-0 bg-inherit p-0 text-right text-lg font-bold placeholder:text-right focus:border-0 focus:outline-none md:text-2xl"
+        className="input input-md w-full border-0 bg-inherit p-0 text-right text-lg font-medium placeholder:text-right focus:border-0 focus:outline-none md:text-3xl"
       />
       {networkType === NetworkType.MAINNET && (
         <span className="label-text flex items-center justify-end">
-          <PiApproximateEqualsBold /> $
+          <PiApproximateEqualsBold />
           {amount && tokenPrices?.[tokenAddress]?.usd
             ? `${(Number(amount) * tokenPrices?.[tokenAddress]?.usd).toLocaleString("en-US", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 10,
+                style: "currency",
+                currency: "USD",
+                maximumFractionDigits: 4,
               })}`
-            : "0.00"}
+            : "$0.00"}
         </span>
       )}
     </>
diff --git a/bridge-ui/src/components/bridge/ApproveERC20.tsx b/bridge-ui/src/components/bridge/form/ApproveERC20.tsx
similarity index 99%
rename from bridge-ui/src/components/bridge/ApproveERC20.tsx
rename to bridge-ui/src/components/bridge/form/ApproveERC20.tsx
index 63aead42e..911a9b04a 100644
--- a/bridge-ui/src/components/bridge/ApproveERC20.tsx
+++ b/bridge-ui/src/components/bridge/form/ApproveERC20.tsx
@@ -114,7 +114,7 @@ export default function Approve() {
   return (
     <button
       id="approve-btn"
-      className={cn("btn btn-primary w-full uppercase rounded-full", {
+      className={cn("btn btn-primary w-full uppercase rounded-full text-lg font-normal", {
         "btn-disabled":
           token &&
           (isApprovalLoading ||
diff --git a/bridge-ui/src/components/bridge/form/ClaimingTypeOption.tsx b/bridge-ui/src/components/bridge/form/ClaimingTypeOption.tsx
index 3e8db14f5..9373fe120 100644
--- a/bridge-ui/src/components/bridge/form/ClaimingTypeOption.tsx
+++ b/bridge-ui/src/components/bridge/form/ClaimingTypeOption.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { UseFormRegisterReturn } from "react-hook-form";
 import { MdInfo } from "react-icons/md";
-import { Tooltip } from "../../tooltip";
+import { Tooltip } from "@/components/ui";
 import { cn } from "@/utils/cn";
 
 interface ClaimOptionProps {
@@ -47,7 +47,7 @@ const ClaimingTypeOption: React.FC<ClaimOptionProps> = ({
       })}
     >
       {label}
-      <Tooltip text={tooltip}>
+      <Tooltip text={tooltip} className="z-[100]">
         <MdInfo />
       </Tooltip>
     </label>
diff --git a/bridge-ui/src/components/bridge/Recipient.tsx b/bridge-ui/src/components/bridge/form/Recipient.tsx
similarity index 78%
rename from bridge-ui/src/components/bridge/Recipient.tsx
rename to bridge-ui/src/components/bridge/form/Recipient.tsx
index da55b7112..09c8a8106 100644
--- a/bridge-ui/src/components/bridge/Recipient.tsx
+++ b/bridge-ui/src/components/bridge/form/Recipient.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { isAddress } from "viem";
 import { useFormContext } from "react-hook-form";
 import { MdInfo, MdAdd } from "react-icons/md";
-import { Tooltip } from "../tooltip";
+import { Tooltip } from "@/components/ui/";
 
 export function Recipient() {
   const [isChecked, setIsChecked] = useState(false);
@@ -31,20 +31,24 @@ export function Recipient() {
   return (
     <div className="collapse rounded-none">
       <input type="checkbox" className="min-h-0" onChange={toggleCheckbox} />
-      <div className="align-items collapse-title flex h-6 min-h-0 flex-row items-center gap-2 p-0 text-sm">
+      <div className="collapse-title flex h-6 min-h-1 flex-row items-center gap-2 p-0 text-sm">
         <MdAdd className="size-6 text-primary" />
         <span className="">To different address</span>
-        <Tooltip text="Input the address you want to bridge assets to on the recipient chain">
+        <Tooltip
+          text="Input the address you want to bridge assets to on the recipient chain"
+          className="z-[99]"
+          position="bottom"
+        >
           <MdInfo />
         </Tooltip>
       </div>
 
-      <div className="collapse-content p-1 !pb-1">
+      <div className="collapse-content p-0 !pb-1 pt-2">
         <div className="form-control w-full">
           <div className="flex flex-row">
             <input
               type="text"
-              className="input w-full bg-[#2D2D2D]"
+              className="input w-full bg-[#2D2D2D] focus:border-none focus:outline-none"
               placeholder="0x..."
               {...register("recipient", {
                 validate: (value) => !value || isAddress(value) || "Invalid address",
diff --git a/bridge-ui/src/components/bridge/Submit.tsx b/bridge-ui/src/components/bridge/form/Submit.tsx
similarity index 86%
rename from bridge-ui/src/components/bridge/Submit.tsx
rename to bridge-ui/src/components/bridge/form/Submit.tsx
index 7f0c0d31f..a6bf3ed3d 100644
--- a/bridge-ui/src/components/bridge/Submit.tsx
+++ b/bridge-ui/src/components/bridge/form/Submit.tsx
@@ -3,9 +3,10 @@ import { useBridge } from "@/hooks";
 import { useChainStore } from "@/stores/chainStore";
 import { useFormContext } from "react-hook-form";
 import ApproveERC20 from "./ApproveERC20";
-import Button from "./Button";
+import { Button } from "../../ui";
 import { useAccount, useBalance } from "wagmi";
 import { cn } from "@/utils/cn";
+import { parseUnits } from "viem";
 
 type SubmitProps = {
   isLoading: boolean;
@@ -40,7 +41,9 @@ export function Submit({ isLoading = false, isWaitingLoading = false }: SubmitPr
   const isERC20Token = token && networkLayer !== NetworkLayer.UNKNOWN && token[networkLayer];
   const isButtonDisabled = !bridgeEnabled(watchAmount, watchAllowance || BigInt(0), errors);
   const isETHTransfer = token && token.symbol === "ETH";
-  const showApproveERC20 = !isETHTransfer && (!watchAllowance || watchAllowance < watchAmount);
+  const showApproveERC20 =
+    !isETHTransfer &&
+    (!watchAllowance || (token?.decimals && watchAllowance < parseUnits(watchAmount, token.decimals)));
 
   // TODO: refactor this
   const destinationBalanceTooLow =
@@ -55,7 +58,7 @@ export function Submit({ isLoading = false, isWaitingLoading = false }: SubmitPr
   return isETHTransfer ? (
     <Button
       type="submit"
-      className={cn("w-full", {
+      className={cn("w-full text-lg font-normal", {
         "btn-secondary": destinationBalanceTooLow,
       })}
       disabled={isButtonDisabled}
@@ -68,7 +71,7 @@ export function Submit({ isLoading = false, isWaitingLoading = false }: SubmitPr
   ) : (
     <Button
       id="submit-erc-btn"
-      className="w-full"
+      className="w-full text-lg font-normal"
       disabled={isButtonDisabled}
       loading={isLoading || isWaitingLoading}
       type="submit"
diff --git a/bridge-ui/src/components/bridge/modals/ManualClaimModal.tsx b/bridge-ui/src/components/bridge/modals/ManualClaimModal.tsx
index 6cdfe4bae..9c07b422c 100644
--- a/bridge-ui/src/components/bridge/modals/ManualClaimModal.tsx
+++ b/bridge-ui/src/components/bridge/modals/ManualClaimModal.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import Button from "../Button";
+import { Button } from "../../ui";
 import { MdCallMade } from "react-icons/md";
 
 type ManualClaimModalProps = {
@@ -10,7 +10,7 @@ type ManualClaimModalProps = {
 const ManualClaimModal: React.FC<ManualClaimModalProps> = ({ handleNoClose, handleYesClose }) => {
   return (
     <div className="flex flex-col items-center justify-center gap-8 px-8">
-      <h2 className="text-xl">Manual claim on destination</h2>
+      <h2 className="text-2xl text-[#E5E5E5]">Manual claim on destination</h2>
       <div className="space-y-5 text-center">
         <div className="text-sm">
           Activating Manual claim means you will need to claim the message on the destination chain with ETH with a
@@ -23,7 +23,7 @@ const ManualClaimModal: React.FC<ManualClaimModalProps> = ({ handleNoClose, hand
             No
           </Button>
           <Link
-            href="#"
+            href="https://docs.linea.build/developers/guides/bridge/how-to-bridge-eth"
             rel="noopener noreferrer"
             target="_blank"
             className="hover:border-b-1 border-b-1 btn btn-ghost btn-sm rounded-none border-b-primary p-0 font-normal text-[#E5E5E5] hover:border-b-primary hover:bg-transparent"
diff --git a/bridge-ui/src/components/bridge/TokenDetails.tsx b/bridge-ui/src/components/bridge/modals/TokenDetails.tsx
similarity index 93%
rename from bridge-ui/src/components/bridge/TokenDetails.tsx
rename to bridge-ui/src/components/bridge/modals/TokenDetails.tsx
index a1a83d3a5..f959cfdb3 100644
--- a/bridge-ui/src/components/bridge/TokenDetails.tsx
+++ b/bridge-ui/src/components/bridge/modals/TokenDetails.tsx
@@ -66,21 +66,21 @@ export default function TokenDetails({ token, onTokenClick, setValue, clearError
       <div className="flex gap-5">
         <Image src={token.image} alt={token.name} width={40} height={40} className="rounded-full" />
         <div className="text-left">
-          <p className="font-normal text-white">{token.symbol}</p>
+          <p className="font-semibold text-white">{token.symbol}</p>
           <p className="text-sm font-normal text-[#C0C0C0]">{token.name}</p>
         </div>
       </div>
       {!tokenNotFromCurrentLayer && (
         <div className="text-right">
-          <p className="text-md text-white">
+          <p className="font-semibold text-white">
             {formatBalance(balance)} {token.symbol}
           </p>
           {tokenPrice ? (
             <p className="text-[#C0C0C0]">
-              $
               {(tokenPrice * Number(balance)).toLocaleString("en-US", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
+                style: "currency",
+                currency: "USD",
+                maximumFractionDigits: 4,
               })}
             </p>
           ) : null}
diff --git a/bridge-ui/src/components/bridge/TokenModal.tsx b/bridge-ui/src/components/bridge/modals/TokenModal.tsx
similarity index 100%
rename from bridge-ui/src/components/bridge/TokenModal.tsx
rename to bridge-ui/src/components/bridge/modals/TokenModal.tsx
diff --git a/bridge-ui/src/components/bridge/modals/TransactionConfirmationModal.tsx b/bridge-ui/src/components/bridge/modals/TransactionConfirmationModal.tsx
index 1986ed1bc..011ec672a 100644
--- a/bridge-ui/src/components/bridge/modals/TransactionConfirmationModal.tsx
+++ b/bridge-ui/src/components/bridge/modals/TransactionConfirmationModal.tsx
@@ -7,7 +7,7 @@ type TransactionConfirmationModalProps = {
 const TransactionConfirmationModal: React.FC<TransactionConfirmationModalProps> = ({ handleClose }) => {
   return (
     <div className="flex flex-col items-center justify-center gap-8 px-8 py-4">
-      <h2 className="text-xl">Trandaction confirmed!</h2>
+      <h2 className="text-xl">Transaction confirmed!</h2>
       <div className="flex items-center justify-center gap-4">
         <Link href="/" className="btn btn-primary rounded-full uppercase" onClick={handleClose}>
           Start a new transaction
diff --git a/bridge-ui/src/components/layouts/Layout.tsx b/bridge-ui/src/components/layouts/Layout.tsx
index b3c1c95a8..e69c3c37d 100644
--- a/bridge-ui/src/components/layouts/Layout.tsx
+++ b/bridge-ui/src/components/layouts/Layout.tsx
@@ -1,20 +1,24 @@
 "use client";
 
 import { ToastContainer } from "react-toastify";
-import atypTextFont from "@/app/font/atypText";
-import atypFont from "@/app/font/atyp";
 import { Header } from "./header";
 import { useInitialiseChain, useInitialiseToken } from "@/hooks";
 import Sidebar from "./Sidebar";
+import { useAccount } from "wagmi";
+import { linea, lineaSepolia, mainnet, sepolia } from "viem/chains";
+import WrongNetwork from "./WrongNetwork";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   useInitialiseChain();
   useInitialiseToken();
 
-  return (
-    <div
-      className={`${atypFont.variable} ${atypTextFont.variable} ${atypFont.className} flex min-h-screen flex-col bg-cover bg-no-repeat`}
-    >
+  const { chainId } = useAccount();
+
+  return chainId &&
+    ![mainnet.id, sepolia.id, linea.id, lineaSepolia.id].includes(chainId as 1 | 11155111 | 59144 | 59141) ? (
+    <WrongNetwork />
+  ) : (
+    <div className="flex min-h-screen flex-col bg-cover bg-no-repeat">
       <ToastContainer
         position="top-center"
         autoClose={2000}
diff --git a/bridge-ui/src/components/layouts/MobileMenu.tsx b/bridge-ui/src/components/layouts/MobileMenu.tsx
index fba821a5e..33020d792 100644
--- a/bridge-ui/src/components/layouts/MobileMenu.tsx
+++ b/bridge-ui/src/components/layouts/MobileMenu.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { MdOutlineClose } from "react-icons/md";
-import Button from "../bridge/Button";
+import { Button } from "../ui";
 import { SocialLinks, FooterLinks } from "./footer";
 import { Menu } from "./menu";
 
@@ -10,7 +10,7 @@ type MobileMenuProps = {
 
 export default function MobileMenu({ toggleMenu }: MobileMenuProps) {
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-[#121212] px-8 py-4 md:hidden">
+    <div className="fixed inset-0 z-[200] flex flex-col bg-[#121212] px-8 py-4 md:hidden">
       <div className="flex items-center justify-between">
         <Image
           src={"/images/logo/linea.svg"}
diff --git a/bridge-ui/src/components/layouts/WrongNetwork.tsx b/bridge-ui/src/components/layouts/WrongNetwork.tsx
new file mode 100644
index 000000000..56adb4d32
--- /dev/null
+++ b/bridge-ui/src/components/layouts/WrongNetwork.tsx
@@ -0,0 +1,55 @@
+import { switchChain } from "@wagmi/core";
+import Image from "next/image";
+import { linea, lineaSepolia, mainnet, sepolia } from "viem/chains";
+import { wagmiConfig } from "@/config";
+import { Button } from "../ui";
+
+const supportedChains = [
+  {
+    title: "Ethereum",
+    iconPath: "/images/logo/ethereum-rounded.svg",
+    chainId: mainnet.id,
+  },
+  {
+    title: "Linea Mainnet",
+    iconPath: "/images/logo/linea-mainnet.svg",
+    chainId: linea.id,
+  },
+  {
+    title: "Sepolia",
+    iconPath: "/images/logo/ethereum-rounded.svg",
+    chainId: sepolia.id,
+  },
+  {
+    title: "Linea Sepolia",
+    iconPath: "/images/logo/linea-sepolia.svg",
+    chainId: lineaSepolia.id,
+  },
+];
+
+export default function WrongNetwork() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-cover bg-no-repeat p-8">
+      <div className="flex min-w-fit flex-col items-center gap-8 rounded-lg border-2 border-card bg-cardBg p-8">
+        <span className="text-center">
+          This app doesn&apos;t support your current network. Switch to an available option to continue.
+        </span>
+        <div className="flex flex-col gap-4">
+          {supportedChains.map(({ title, iconPath, chainId }) => (
+            <div key={`dropdown-item-${title}`}>
+              <Button
+                className={"w-full justify-start"}
+                size="sm"
+                variant="outline"
+                onClick={() => switchChain(wagmiConfig, { chainId })}
+              >
+                <Image src={iconPath} alt={title} width={18} height={18} style={{ width: "18px", height: "auto" }} />
+                {title}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/bridge-ui/src/components/layouts/footer/FooterLinks.tsx b/bridge-ui/src/components/layouts/footer/FooterLinks.tsx
index e4563d076..7003cbf86 100644
--- a/bridge-ui/src/components/layouts/footer/FooterLinks.tsx
+++ b/bridge-ui/src/components/layouts/footer/FooterLinks.tsx
@@ -5,7 +5,7 @@ type FooterLinksProps = {
 };
 
 export const FooterLinks = ({ toggleMenu }: FooterLinksProps) => (
-  <div className="space-y-2 py-4 font-medium">
+  <div className="space-y-2 py-4">
     <Link
       className="flex items-center hover:text-primary"
       href="https://support.linea.build/"
diff --git a/bridge-ui/src/components/layouts/header/Header.tsx b/bridge-ui/src/components/layouts/header/Header.tsx
index fe296933a..028d20f19 100644
--- a/bridge-ui/src/components/layouts/header/Header.tsx
+++ b/bridge-ui/src/components/layouts/header/Header.tsx
@@ -3,7 +3,7 @@ import { usePathname } from "next/navigation";
 import { useAccount } from "wagmi";
 import { MdMenu } from "react-icons/md";
 import MobileMenu from "../MobileMenu";
-import Button from "@/components/bridge/Button";
+import { Button } from "@/components/ui";
 import { HeaderLogo } from "./HeaderLogo";
 import { NavMenu } from "./NavMenu";
 
diff --git a/bridge-ui/src/components/layouts/header/dropdowns/Chains.tsx b/bridge-ui/src/components/layouts/header/dropdowns/Chains.tsx
index 3bb0c0c3e..4e49d56f2 100644
--- a/bridge-ui/src/components/layouts/header/dropdowns/Chains.tsx
+++ b/bridge-ui/src/components/layouts/header/dropdowns/Chains.tsx
@@ -7,8 +7,8 @@ import log from "loglevel";
 import { config, NetworkLayer, NetworkType, wagmiConfig } from "@/config";
 import { useChainStore } from "@/stores/chainStore";
 import DropdownItem from "@/components/DropdownItem";
-
-const networks = config.networks;
+import { useAccount } from "wagmi";
+import { getChainLogoPath } from "@/utils/chainsUtil";
 
 export function Chains() {
   const { networkType, networkLayer, resetToken } = useChainStore((state) => ({
@@ -17,6 +17,8 @@ export function Chains() {
     resetToken: state.resetToken,
   }));
 
+  const { chain } = useAccount();
+
   const detailsRef = useRef<HTMLDetailsElement>(null);
 
   useEffect(() => {
@@ -51,27 +53,37 @@ export function Chains() {
       <details className="dropdown relative" ref={detailsRef}>
         <summary className="flex cursor-pointer items-center gap-2 rounded-full border-2 border-card p-2 px-3">
           <Image
-            src={
-              networkType === NetworkType.SEPOLIA ? "/images/logo/linea-sepolia.svg" : "/images/logo/linea-mainnet.svg"
-            }
-            alt="MetaMask"
+            src={chain?.id ? getChainLogoPath(chain.id) : ""}
+            alt="Network Icon"
             width={0}
             height={0}
             style={{ width: "18px", height: "auto" }}
           />
 
-          <span className="hidden md:block">{networkType === NetworkType.SEPOLIA ? "Linea Sepolia" : "Linea"}</span>
+          <span className="hidden font-normal md:block">
+            {chain?.name ? (chain.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : chain.name) : ""}
+          </span>
         </summary>
         <ul className="menu dropdown-content absolute right-0 z-10 mt-2 min-w-max border-2 border-card bg-cardBg p-0 shadow">
+          <DropdownItem
+            title={config.networks.MAINNET.L1.name}
+            iconPath={config.networks.MAINNET.L1.iconPath}
+            onClick={() => switchNetworkHandler(config.networks.MAINNET.L1.chainId)}
+          />
           <DropdownItem
             title={config.networks.MAINNET.L2.name}
-            iconPath="/images/logo/linea-mainnet.svg"
-            onClick={() => switchNetworkHandler(networks.MAINNET.L1.chainId)}
+            iconPath={config.networks.MAINNET.L2.iconPath}
+            onClick={() => switchNetworkHandler(config.networks.MAINNET.L2.chainId)}
+          />
+          <DropdownItem
+            title={config.networks.SEPOLIA.L1.name}
+            iconPath={config.networks.SEPOLIA.L1.iconPath}
+            onClick={() => switchNetworkHandler(config.networks.SEPOLIA.L1.chainId)}
           />
           <DropdownItem
             title={config.networks.SEPOLIA.L2.name}
-            iconPath="/images/logo/linea-sepolia.svg"
-            onClick={() => switchNetworkHandler(networks.SEPOLIA.L1.chainId)}
+            iconPath={config.networks.SEPOLIA.L2.iconPath}
+            onClick={() => switchNetworkHandler(config.networks.SEPOLIA.L2.chainId)}
           />
         </ul>
       </details>
diff --git a/bridge-ui/src/components/layouts/menu/MenuItem.tsx b/bridge-ui/src/components/layouts/menu/MenuItem.tsx
index e0dbea100..1789aba86 100644
--- a/bridge-ui/src/components/layouts/menu/MenuItem.tsx
+++ b/bridge-ui/src/components/layouts/menu/MenuItem.tsx
@@ -20,7 +20,7 @@ export const MenuItem = ({ title, href, external, Icon, toggleMenu, border }: Me
         passHref={external}
         target={external ? "_blank" : undefined}
         rel={external ? "noopener noreferrer" : undefined}
-        className={cn("flex items-center gap-2 py-3", {
+        className={cn("flex items-center gap-2 py-3 font-normal text-lg", {
           "text-primary": pathname === href,
           "border-r-2 border-primary": pathname === href && border,
         })}
diff --git a/bridge-ui/src/components/terms/TermsModal.tsx b/bridge-ui/src/components/terms/TermsModal.tsx
index e90c0149f..d4b2b812e 100644
--- a/bridge-ui/src/components/terms/TermsModal.tsx
+++ b/bridge-ui/src/components/terms/TermsModal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { useConfigStore } from "@/stores/configStore";
 import { cn } from "@/utils/cn";
-import Button from "../bridge/Button";
+import { Button } from "../ui";
 
 export default function TermsModal() {
   const termsModalRef = useRef<HTMLDivElement>(null);
diff --git a/bridge-ui/src/components/tooltip/index.tsx b/bridge-ui/src/components/tooltip/index.tsx
deleted file mode 100644
index 103073817..000000000
--- a/bridge-ui/src/components/tooltip/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Tooltip } from "./TooltipComponent";
diff --git a/bridge-ui/src/components/transactions/TransactionItem.tsx b/bridge-ui/src/components/transactions/TransactionItem.tsx
index 84b5f8b9c..6866c55c5 100644
--- a/bridge-ui/src/components/transactions/TransactionItem.tsx
+++ b/bridge-ui/src/components/transactions/TransactionItem.tsx
@@ -45,7 +45,7 @@ function TransactionAmountSection({ amount, decimals, symbol }: { amount: bigint
   return (
     <div className="px-6 md:px-0">
       <div className="text-xs uppercase">Amount</div>
-      <span className="font-bold text-white">
+      <span className="font-semibold text-white">
         {formatUnits(amount, decimals)} {symbol}
       </span>
     </div>
diff --git a/bridge-ui/src/components/transactions/Transactions.tsx b/bridge-ui/src/components/transactions/Transactions.tsx
index cf790d643..36a42740e 100644
--- a/bridge-ui/src/components/transactions/Transactions.tsx
+++ b/bridge-ui/src/components/transactions/Transactions.tsx
@@ -7,7 +7,7 @@ import { TransactionHistory } from "@/models/history";
 import { formatDate, fromUnixTime } from "date-fns";
 import { NoTransactions } from "./NoTransaction";
 import { useFetchHistory } from "@/hooks";
-import Button from "../bridge/Button";
+import { Button } from "../ui";
 
 const groupByDay = (transactions: TransactionHistory[]): Record<string, TransactionHistory[]> => {
   return transactions.reduce(
diff --git a/bridge-ui/src/components/transactions/modals/TransactionClaimButton.tsx b/bridge-ui/src/components/transactions/modals/TransactionClaimButton.tsx
index 53216c657..b1a797637 100644
--- a/bridge-ui/src/components/transactions/modals/TransactionClaimButton.tsx
+++ b/bridge-ui/src/components/transactions/modals/TransactionClaimButton.tsx
@@ -5,8 +5,8 @@ import { Transaction } from "@/models";
 import { TransactionHistory } from "@/models/history";
 import { useWaitForTransactionReceipt } from "wagmi";
 import { useChainStore } from "@/stores/chainStore";
-import Button from "@/components/bridge/Button";
-import useTransactionManagement, { MessageWithStatus } from "@/hooks/useTransactionManagement";
+import { Button } from "@/components/ui";
+import useClaimTransaction, { MessageWithStatus } from "@/hooks/useClaimTransaction";
 import { ModalContext } from "@/contexts/modal.context";
 import TransactionConfirmationModal from "@/components/bridge/modals/TransactionConfirmationModal";
 
@@ -26,7 +26,7 @@ export default function TransactionClaimButton({ message, transaction, handleClo
     useContext(ModalContext);
   // Hooks
   const { switchChainById } = useSwitchNetwork(toChain?.id);
-  const { writeClaimMessage, isLoading: isTxLoading, transaction: claimTx } = useTransactionManagement();
+  const { writeClaimMessage, isLoading: isTxLoading, transaction: claimTx } = useClaimTransaction();
 
   // Wagmi
   const {
diff --git a/bridge-ui/src/components/transactions/modals/TransactionDetailsModal.tsx b/bridge-ui/src/components/transactions/modals/TransactionDetailsModal.tsx
index c4daaf3c0..7f4612290 100644
--- a/bridge-ui/src/components/transactions/modals/TransactionDetailsModal.tsx
+++ b/bridge-ui/src/components/transactions/modals/TransactionDetailsModal.tsx
@@ -1,6 +1,5 @@
 import { OnChainMessageStatus } from "@consensys/linea-sdk";
-import { PiApproximateEqualsBold } from "react-icons/pi";
-import { formatTimestamp } from "@/utils/format";
+import { formatBalance, formatTimestamp } from "@/utils/format";
 import { NETWORK_ID_TO_NAME } from "@/utils/constants";
 import { MessageWithStatus } from "@/hooks";
 import { TransactionHistory } from "@/models/history";
@@ -40,18 +39,14 @@ const TransactionDetailsModal: React.FC<TransactionDetailsModalProps> = ({ trans
       ? initialTransactionReceipt.gasUsed * initialTransactionReceipt.effectiveGasPrice
       : 0n;
 
-  console.log(formatEther(initialTransactionFee || 0n));
   const claimingTransactionFee =
     claimingTransactionReceipt?.gasUsed && claimingTransactionReceipt?.effectiveGasPrice
       ? claimingTransactionReceipt.gasUsed * claimingTransactionReceipt.effectiveGasPrice
       : 0n;
 
-  const totalFee =
-    initialTransactionFee && claimingTransactionFee ? initialTransactionFee + claimingTransactionFee : 0n;
-
   return (
     <div className="flex flex-col gap-8 px-4">
-      <h2 className="text-xl">Transaction details</h2>
+      <h2 className="text-xl text-[#E5E5E5]">Transaction details</h2>
       <div className="space-y-2">
         <TransactionDetailRow
           label="Date & Time"
@@ -78,22 +73,62 @@ const TransactionDetailsModal: React.FC<TransactionDetailsModalProps> = ({ trans
           }
         />
         {message.status === OnChainMessageStatus.CLAIMED && (
-          <TransactionDetailRow
-            label="Fee"
-            value={
-              <div>
-                {transaction.fromChain.id === 1 || transaction.toChain.id === 1
-                  ? `${formatEther(totalFee)} ETH ${(<PiApproximateEqualsBold />)}
-                  $${
-                    tokenPrices?.[zeroAddress]?.usd.toLocaleString("en-US", {
-                      style: "currency",
-                      currency: "USD",
-                    }) || ""
-                  }`
-                  : `${formatEther(totalFee)} ETH`}
-              </div>
-            }
-          />
+          <>
+            <TransactionDetailRow
+              label={`${NETWORK_ID_TO_NAME[transaction.fromChain.id]} fees`}
+              value={
+                <div>
+                  {transaction.toChain.id === 1 ? (
+                    <>
+                      {tokenPrices[zeroAddress]?.usd ? (
+                        <span>
+                          {(tokenPrices[zeroAddress].usd * Number(formatEther(initialTransactionFee))).toLocaleString(
+                            "en-US",
+                            {
+                              style: "currency",
+                              currency: "USD",
+                              maximumFractionDigits: 4,
+                            },
+                          )}
+                        </span>
+                      ) : (
+                        `${formatBalance(formatEther(initialTransactionFee), 8)} ETH`
+                      )}
+                    </>
+                  ) : (
+                    `${formatBalance(formatEther(initialTransactionFee), 8)} ETH`
+                  )}
+                </div>
+              }
+            />
+            <TransactionDetailRow
+              label={`${NETWORK_ID_TO_NAME[transaction.toChain.id]} fees`}
+              value={
+                <div>
+                  {transaction.toChain.id === 1 ? (
+                    <>
+                      {tokenPrices[zeroAddress]?.usd ? (
+                        <span>
+                          {(tokenPrices[zeroAddress].usd * Number(formatEther(claimingTransactionFee))).toLocaleString(
+                            "en-US",
+                            {
+                              style: "currency",
+                              currency: "USD",
+                              maximumFractionDigits: 4,
+                            },
+                          )}
+                        </span>
+                      ) : (
+                        `${formatBalance(formatEther(claimingTransactionFee), 8)} ETH`
+                      )}
+                    </>
+                  ) : (
+                    `${formatBalance(formatEther(claimingTransactionFee), 8)} ETH`
+                  )}
+                </div>
+              }
+            />
+          </>
         )}
       </div>
       {message.status === OnChainMessageStatus.CLAIMABLE && (
diff --git a/bridge-ui/src/components/transactions/modals/TransactionDetailsRow.tsx b/bridge-ui/src/components/transactions/modals/TransactionDetailsRow.tsx
index 22a8be65f..4bb684388 100644
--- a/bridge-ui/src/components/transactions/modals/TransactionDetailsRow.tsx
+++ b/bridge-ui/src/components/transactions/modals/TransactionDetailsRow.tsx
@@ -6,7 +6,7 @@ type TransactionDetailRowProps = {
 const TransactionDetailRow: React.FC<TransactionDetailRowProps> = ({ label, value }) => (
   <div className="flex items-center">
     <label className="w-44 text-[#C0C0C0]">{label}</label>
-    <span className="text-[#C0C0C0]">{value}</span>
+    <span className="text-[#E5E5E5]">{value}</span>
   </div>
 );
 
diff --git a/bridge-ui/src/components/bridge/Button.tsx b/bridge-ui/src/components/ui/Button.tsx
similarity index 95%
rename from bridge-ui/src/components/bridge/Button.tsx
rename to bridge-ui/src/components/ui/Button.tsx
index d8e99c421..5bf9224c8 100644
--- a/bridge-ui/src/components/bridge/Button.tsx
+++ b/bridge-ui/src/components/ui/Button.tsx
@@ -24,7 +24,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref,
   ) => {
     const computedClassName = useMemo(() => {
-      const baseClasses = "btn rounded-full font-semibold uppercase";
+      const baseClasses = "btn rounded-full uppercase";
       const variantClasses = {
         primary: "btn-primary",
         secondary: "btn-secondary",
diff --git a/bridge-ui/src/components/Collapse.tsx b/bridge-ui/src/components/ui/Collapse.tsx
similarity index 81%
rename from bridge-ui/src/components/Collapse.tsx
rename to bridge-ui/src/components/ui/Collapse.tsx
index d69005776..dbe426994 100644
--- a/bridge-ui/src/components/Collapse.tsx
+++ b/bridge-ui/src/components/ui/Collapse.tsx
@@ -3,7 +3,7 @@ type CollapseProps = {
   children: React.ReactNode;
 };
 
-export const Collapse: React.FC<CollapseProps> = ({ title, children }) => {
+const Collapse: React.FC<CollapseProps> = ({ title, children }) => {
   return (
     <details className="collapse collapse-arrow rounded-none border-2 border-card bg-cardBg hover:border-primary">
       <summary className="collapse-title px-8 text-xl font-medium text-white">{title}</summary>
@@ -11,3 +11,5 @@ export const Collapse: React.FC<CollapseProps> = ({ title, children }) => {
     </details>
   );
 };
+
+export default Collapse;
diff --git a/bridge-ui/src/components/bridge/Stepper.tsx b/bridge-ui/src/components/ui/Stepper.tsx
similarity index 94%
rename from bridge-ui/src/components/bridge/Stepper.tsx
rename to bridge-ui/src/components/ui/Stepper.tsx
index da9e14e6b..50c1dc060 100644
--- a/bridge-ui/src/components/bridge/Stepper.tsx
+++ b/bridge-ui/src/components/ui/Stepper.tsx
@@ -5,7 +5,7 @@ type StepperProps = {
   activeStep: number;
 };
 
-export function Stepper({ steps, activeStep }: StepperProps) {
+export default function Stepper({ steps, activeStep }: StepperProps) {
   return (
     <div className="flex items-end">
       {steps.map((step, index) => (
diff --git a/bridge-ui/src/components/tooltip/TooltipComponent.tsx b/bridge-ui/src/components/ui/TooltipComponent.tsx
similarity index 81%
rename from bridge-ui/src/components/tooltip/TooltipComponent.tsx
rename to bridge-ui/src/components/ui/TooltipComponent.tsx
index 301b509ed..64fef7206 100644
--- a/bridge-ui/src/components/tooltip/TooltipComponent.tsx
+++ b/bridge-ui/src/components/ui/TooltipComponent.tsx
@@ -8,7 +8,7 @@ interface TooltipProps {
   className?: string;
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ text, position = "top", children, className }) => (
+const Tooltip: React.FC<TooltipProps> = ({ text, position = "top", children, className }) => (
   <div
     className={cn(
       "tooltip",
@@ -25,3 +25,5 @@ export const Tooltip: React.FC<TooltipProps> = ({ text, position = "top", childr
     {children}
   </div>
 );
+
+export default Tooltip;
diff --git a/bridge-ui/src/components/ui/index.tsx b/bridge-ui/src/components/ui/index.tsx
new file mode 100644
index 000000000..3e4c23671
--- /dev/null
+++ b/bridge-ui/src/components/ui/index.tsx
@@ -0,0 +1,4 @@
+export { default as Button } from "./Button";
+export { default as Collapse } from "./Collapse";
+export { default as Tooltip } from "./TooltipComponent";
+export { default as Stepper } from "./Stepper";
diff --git a/bridge-ui/src/config/config.ts b/bridge-ui/src/config/config.ts
index 31a6f8ba2..2d8b453e6 100644
--- a/bridge-ui/src/config/config.ts
+++ b/bridge-ui/src/config/config.ts
@@ -87,7 +87,7 @@ export const config: Config = {
   networks: {
     MAINNET: {
       L1: {
-        name: "Ethereum Mainnet",
+        name: "Ethereum",
         iconPath: "/images/logo/ethereum-rounded.svg",
         chainId: 1,
         messageServiceAddress: process.env.NEXT_PUBLIC_MAINNET_L1_MESSAGE_SERVICE
@@ -170,7 +170,7 @@ export const config: Config = {
 
   storage: {
     // The storage will be cleared if its version is smaller than the one configured
-    minVersion: process.env.NEXT_PUBLIC_STORAGE_MIN_VERSION || "0.0.1",
+    minVersion: process.env.NEXT_PUBLIC_STORAGE_MIN_VERSION || "1",
   },
 };
 
diff --git a/bridge-ui/src/hooks/index.ts b/bridge-ui/src/hooks/index.ts
index d0185cc79..8c4794520 100644
--- a/bridge-ui/src/hooks/index.ts
+++ b/bridge-ui/src/hooks/index.ts
@@ -14,6 +14,5 @@ export { default as useMessageStatus } from "./useMessageStatus";
 export { default as useMinimumFee } from "./useMinimumFee";
 export { default as useSwitchNetwork } from "./useSwitchNetwork";
 export { default as useTokenFetch } from "./useTokenFetch";
-export { default as useTransactionManagement } from "./useTransactionManagement";
-
-export type { MessageWithStatus } from "./useTransactionManagement";
+export { default as useClaimTransaction } from "./useClaimTransaction";
+export type { MessageWithStatus } from "./useClaimTransaction";
diff --git a/bridge-ui/src/hooks/useTransactionManagement.ts b/bridge-ui/src/hooks/useClaimTransaction.ts
similarity index 97%
rename from bridge-ui/src/hooks/useTransactionManagement.ts
rename to bridge-ui/src/hooks/useClaimTransaction.ts
index b0e2c43bf..e889c1aca 100644
--- a/bridge-ui/src/hooks/useTransactionManagement.ts
+++ b/bridge-ui/src/hooks/useClaimTransaction.ts
@@ -37,7 +37,7 @@ interface ClaimMessageWithProofParams {
   data: string;
 }
 
-const useTransactionManagement = () => {
+const useClaimTransaction = () => {
   const { address } = useAccount();
   const [transaction, setTransaction] = useState<Transaction | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -115,4 +115,4 @@ const useTransactionManagement = () => {
   return { transaction, isLoading, isError: error !== null, error, writeClaimMessage };
 };
 
-export default useTransactionManagement;
+export default useClaimTransaction;
diff --git a/bridge-ui/src/hooks/useMessageStatus.ts b/bridge-ui/src/hooks/useMessageStatus.ts
index 28981b9a1..dcb02c1d4 100644
--- a/bridge-ui/src/hooks/useMessageStatus.ts
+++ b/bridge-ui/src/hooks/useMessageStatus.ts
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { OnChainMessageStatus } from "@consensys/linea-sdk";
 import useLineaSDK from "./useLineaSDK";
 import { config, NetworkLayer } from "@/config";
-import { MessageWithStatus } from "./useTransactionManagement";
+import { MessageWithStatus } from "./useClaimTransaction";
 import { useChainStore } from "@/stores/chainStore";
 
 const useMessageStatus = () => {
diff --git a/bridge-ui/src/hooks/useReceivedAmount.tsx b/bridge-ui/src/hooks/useReceivedAmount.tsx
index 9b775d13b..cd22a665c 100644
--- a/bridge-ui/src/hooks/useReceivedAmount.tsx
+++ b/bridge-ui/src/hooks/useReceivedAmount.tsx
@@ -34,13 +34,16 @@ export function useReceivedAmount({ amount, enoughAllowance, claim }: UseReceive
 
   useEffect(() => {
     const estimate = async () => {
-      if (!amount || minimumFee === null || !token?.decimals) return;
+      if (!amount || minimumFee === null || !token?.decimals) {
+        setEstimatedGasFee(0n);
+        return;
+      }
 
-      let calculatedGasFee = BigInt(0);
+      let calculatedGasFee = 0n;
       if (enoughAllowance) {
-        calculatedGasFee = (await estimateGasBridge(amount, minimumFee)) || BigInt(0);
+        calculatedGasFee = (await estimateGasBridge(amount, minimumFee)) || 0n;
       } else {
-        calculatedGasFee = (await estimateApprove(parseUnits(amount, token.decimals), tokenBridgeAddress)) || BigInt(0);
+        calculatedGasFee = (await estimateApprove(parseUnits(amount, token.decimals), tokenBridgeAddress)) || 0n;
       }
 
       setEstimatedGasFee(calculatedGasFee);
@@ -68,8 +71,8 @@ export function useReceivedAmount({ amount, enoughAllowance, claim }: UseReceive
     totalReceived,
     fees: {
       total: executionFee + estimatedGasFee,
-      executionFeeInWei: executionFee,
-      bridgingFeeInWei: estimatedGasFee,
+      bridgingFeeInWei: executionFee,
+      transactionFeeInWei: estimatedGasFee,
     },
   };
 }
diff --git a/bridge-ui/src/models/bridge.ts b/bridge-ui/src/models/bridge.ts
index b010ea960..67760e1b8 100644
--- a/bridge-ui/src/models/bridge.ts
+++ b/bridge-ui/src/models/bridge.ts
@@ -6,10 +6,11 @@ export type BridgeForm = {
   balance: string;
   submit: string;
   claim: string;
-  minFees: string;
+  minFees: bigint;
   token: TokenInfo;
   recipient: Address | undefined;
   bridgingAllowed: boolean;
+  gasFees: bigint;
 };
 
 export type BridgeError = {
diff --git a/bridge-ui/tailwind.config.ts b/bridge-ui/tailwind.config.ts
index 939f5766e..dfb6704da 100644
--- a/bridge-ui/tailwind.config.ts
+++ b/bridge-ui/tailwind.config.ts
@@ -19,6 +19,7 @@ const config: Config = {
         success: "#C1FF14",
       },
       fontFamily: {
+        atyp: ["var(--font-atyp)"],
         atypText: ["var(--font-atyp-text)"],
       },
     },
diff --git a/bridge-ui/test/e2e/bridge-l1-l2.spec.ts b/bridge-ui/test/e2e/bridge-l1-l2.spec.ts
index 3591bd89e..46e52ad9b 100644
--- a/bridge-ui/test/e2e/bridge-l1-l2.spec.ts
+++ b/bridge-ui/test/e2e/bridge-l1-l2.spec.ts
@@ -7,7 +7,7 @@ const test = testWithSynpress(advancedFixtures);
 const { expect, describe } = test;
 
 describe("Bridge L1 > L2", () => {
-  test("should set up the UI and metamask correctly", async ({ page, metamask, initUI }) => {
+  test.skip("should set up the UI and metamask correctly", async ({ page, metamask, initUI }) => {
     await initUI(true);
 
     await page.locator("#wallet-connect-btn").click();
@@ -23,14 +23,14 @@ describe("Bridge L1 > L2", () => {
     expect(pageUrl).toEqual(TEST_URL);
   });
 
-  test("should successfully display the correct heading", async ({ page, initUI }) => {
+  test.skip("should successfully display the correct heading", async ({ page, initUI }) => {
     await initUI(true);
 
     const header = "Bridge";
     await page.locator("h2", { hasText: header }).waitFor({ state: "visible" });
   });
 
-  test("metamask should be connected to the right network", async ({ page, metamask, initUI }) => {
+  test.skip("metamask should be connected to the right network", async ({ page, metamask, initUI }) => {
     await initUI(true);
 
     await page.locator("#wallet-connect-btn").click();
@@ -62,7 +62,7 @@ describe("Bridge L1 > L2", () => {
     await page.locator("#transactions-list").locator("ul").nth(1).waitFor({ timeout: 10_000 });
   });
 
-  test("should be able to switch network", async ({ page, metamask, initUI }) => {
+  test.skip("should be able to switch network", async ({ page, metamask, initUI }) => {
     await initUI(true);
     await page.locator("#wallet-connect-btn").click();
     await page.locator("wui-list-wallet", { hasText: "MetaMask" }).nth(1).click();
diff --git a/coordinator/app/src/main/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfig.kt b/coordinator/app/src/main/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfig.kt
index 4400e1fd8..f727ea077 100644
--- a/coordinator/app/src/main/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfig.kt
+++ b/coordinator/app/src/main/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfig.kt
@@ -4,6 +4,7 @@ import com.sksamuel.hoplite.ConfigAlias
 import com.sksamuel.hoplite.Masked
 import net.consensys.assertIs32Bytes
 import net.consensys.decodeHex
+import net.consensys.linea.BlockParameter
 import net.consensys.linea.assertIsValidAddress
 import net.consensys.linea.ethereum.gaspricing.dynamiccap.MAX_FEE_HISTORIES_STORAGE_PERIOD
 import net.consensys.linea.ethereum.gaspricing.dynamiccap.MAX_FEE_HISTORY_BLOCK_COUNT
@@ -18,7 +19,6 @@ import net.consensys.linea.traces.TracingModuleV1
 import net.consensys.linea.traces.TracingModuleV2
 import net.consensys.linea.web3j.SmartContractErrors
 import net.consensys.zkevm.coordinator.clients.prover.ProversConfig
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import java.math.BigInteger
 import java.net.URL
 import java.nio.file.Path
diff --git a/coordinator/app/src/test/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfigTest.kt b/coordinator/app/src/test/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfigTest.kt
index ca65a06d1..9549ae6d1 100644
--- a/coordinator/app/src/test/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfigTest.kt
+++ b/coordinator/app/src/test/kotlin/net/consensys/zkevm/coordinator/app/config/CoordinatorConfigTest.kt
@@ -5,6 +5,7 @@ import com.github.michaelbull.result.getError
 import com.github.michaelbull.result.onFailure
 import com.github.michaelbull.result.onSuccess
 import com.sksamuel.hoplite.Masked
+import net.consensys.linea.BlockParameter
 import net.consensys.linea.traces.TracesCountersV1
 import net.consensys.linea.traces.TracesCountersV2
 import net.consensys.linea.traces.TracingModuleV1
@@ -14,7 +15,6 @@ import net.consensys.zkevm.coordinator.app.CoordinatorAppCli
 import net.consensys.zkevm.coordinator.clients.prover.FileBasedProverConfig
 import net.consensys.zkevm.coordinator.clients.prover.ProverConfig
 import net.consensys.zkevm.coordinator.clients.prover.ProversConfig
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import org.assertj.core.api.Assertions.assertThat
 import org.junit.jupiter.api.Assertions.assertEquals
 import org.junit.jupiter.api.Assertions.fail
diff --git a/coordinator/clients/smart-contract-client/src/main/kotlin/net/consensys/linea/contract/l1/Web3JLineaRollupSmartContractClientReadOnly.kt b/coordinator/clients/smart-contract-client/src/main/kotlin/net/consensys/linea/contract/l1/Web3JLineaRollupSmartContractClientReadOnly.kt
index 125751c9a..b13734da4 100644
--- a/coordinator/clients/smart-contract-client/src/main/kotlin/net/consensys/linea/contract/l1/Web3JLineaRollupSmartContractClientReadOnly.kt
+++ b/coordinator/clients/smart-contract-client/src/main/kotlin/net/consensys/linea/contract/l1/Web3JLineaRollupSmartContractClientReadOnly.kt
@@ -1,11 +1,11 @@
 package net.consensys.linea.contract.l1
 
 import net.consensys.encodeHex
+import net.consensys.linea.BlockParameter
 import net.consensys.linea.async.toSafeFuture
 import net.consensys.linea.contract.LineaRollup
 import net.consensys.toBigInteger
 import net.consensys.toULong
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaContractVersion
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaRollupSmartContractClientReadOnly
 import org.apache.logging.log4j.LogManager
diff --git a/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/LineaRollupSmartContractClient.kt b/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/LineaRollupSmartContractClient.kt
index e4813f661..638029329 100644
--- a/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/LineaRollupSmartContractClient.kt
+++ b/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/LineaRollupSmartContractClient.kt
@@ -1,5 +1,6 @@
 package net.consensys.zkevm.coordinator.clients.smartcontract
 
+import net.consensys.linea.BlockParameter
 import net.consensys.zkevm.domain.BlobRecord
 import net.consensys.zkevm.domain.ProofToFinalize
 import net.consensys.zkevm.ethereum.gaspricing.GasPriceCaps
diff --git a/coordinator/ethereum/finalization-monitor/src/main/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImpl.kt b/coordinator/ethereum/finalization-monitor/src/main/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImpl.kt
index e3d6f28e4..5cd0d7840 100644
--- a/coordinator/ethereum/finalization-monitor/src/main/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImpl.kt
+++ b/coordinator/ethereum/finalization-monitor/src/main/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImpl.kt
@@ -1,9 +1,9 @@
 package net.consensys.zkevm.ethereum.finalization
 
 import io.vertx.core.Vertx
+import net.consensys.linea.BlockParameter
 import net.consensys.toBigInteger
 import net.consensys.zkevm.PeriodicPollingService
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaRollupSmartContractClientReadOnly
 import org.apache.logging.log4j.LogManager
 import org.apache.logging.log4j.Logger
diff --git a/coordinator/ethereum/finalization-monitor/src/test/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImplTest.kt b/coordinator/ethereum/finalization-monitor/src/test/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImplTest.kt
index 5148fc150..7b5ec28fe 100644
--- a/coordinator/ethereum/finalization-monitor/src/test/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImplTest.kt
+++ b/coordinator/ethereum/finalization-monitor/src/test/kotlin/net/consensys/zkevm/ethereum/finalization/FinalizationMonitorImplTest.kt
@@ -3,7 +3,7 @@ package net.consensys.zkevm.ethereum.finalization
 import io.vertx.core.Vertx
 import io.vertx.junit5.VertxExtension
 import io.vertx.junit5.VertxTestContext
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
+import net.consensys.linea.BlockParameter
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaRollupSmartContractClientReadOnly
 import org.apache.tuweni.bytes.Bytes
 import org.apache.tuweni.bytes.Bytes32
diff --git a/coordinator/ethereum/message-anchoring/src/integrationTest/kotlin/net.consensys.zkevm.ethereum.coordination.messageanchoring/L2MessageAnchorerIntegrationTest.kt b/coordinator/ethereum/message-anchoring/src/integrationTest/kotlin/net.consensys.zkevm.ethereum.coordination.messageanchoring/L2MessageAnchorerIntegrationTest.kt
index f60c2e06a..4c49913f6 100644
--- a/coordinator/ethereum/message-anchoring/src/integrationTest/kotlin/net.consensys.zkevm.ethereum.coordination.messageanchoring/L2MessageAnchorerIntegrationTest.kt
+++ b/coordinator/ethereum/message-anchoring/src/integrationTest/kotlin/net.consensys.zkevm.ethereum.coordination.messageanchoring/L2MessageAnchorerIntegrationTest.kt
@@ -4,13 +4,13 @@ import io.vertx.core.Vertx
 import io.vertx.junit5.Timeout
 import io.vertx.junit5.VertxExtension
 import io.vertx.junit5.VertxTestContext
+import net.consensys.linea.BlockParameter
 import net.consensys.linea.async.toSafeFuture
 import net.consensys.linea.contract.AsyncFriendlyTransactionManager
 import net.consensys.linea.contract.EIP1559GasProvider
 import net.consensys.linea.contract.L2MessageService
 import net.consensys.linea.contract.LineaRollupAsyncFriendly
 import net.consensys.toBigInteger
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaRollupSmartContractClient
 import net.consensys.zkevm.ethereum.ContractsManager
 import net.consensys.zkevm.ethereum.L1AccountManager
diff --git a/coordinator/ethereum/message-anchoring/src/main/kotlin/net/consensys/zkevm/ethereum/coordination/messageanchoring/MessageAnchoringService.kt b/coordinator/ethereum/message-anchoring/src/main/kotlin/net/consensys/zkevm/ethereum/coordination/messageanchoring/MessageAnchoringService.kt
index d5e03612c..077dc88fb 100644
--- a/coordinator/ethereum/message-anchoring/src/main/kotlin/net/consensys/zkevm/ethereum/coordination/messageanchoring/MessageAnchoringService.kt
+++ b/coordinator/ethereum/message-anchoring/src/main/kotlin/net/consensys/zkevm/ethereum/coordination/messageanchoring/MessageAnchoringService.kt
@@ -1,10 +1,10 @@
 package net.consensys.zkevm.ethereum.coordination.messageanchoring
 
 import io.vertx.core.Vertx
+import net.consensys.linea.BlockParameter
 import net.consensys.linea.contract.AsyncFriendlyTransactionManager
 import net.consensys.linea.contract.L2MessageService
 import net.consensys.zkevm.PeriodicPollingService
-import net.consensys.zkevm.coordinator.clients.smartcontract.BlockParameter
 import net.consensys.zkevm.coordinator.clients.smartcontract.LineaRollupSmartContractClientReadOnly
 import org.apache.logging.log4j.LogManager
 import org.apache.logging.log4j.Logger
diff --git a/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/BlockParameter.kt b/jvm-libs/core/domain-models/src/main/kotlin/net/consensys/linea/BlockParameter.kt
similarity index 96%
rename from coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/BlockParameter.kt
rename to jvm-libs/core/domain-models/src/main/kotlin/net/consensys/linea/BlockParameter.kt
index 50e4f2956..899558f8b 100644
--- a/coordinator/core/src/main/kotlin/net/consensys/zkevm/coordinator/clients/smartcontract/BlockParameter.kt
+++ b/jvm-libs/core/domain-models/src/main/kotlin/net/consensys/linea/BlockParameter.kt
@@ -1,4 +1,4 @@
-package net.consensys.zkevm.coordinator.clients.smartcontract
+package net.consensys.linea
 
 sealed interface BlockParameter {
   fun getTag(): String