diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2e1b6f7c0c8..fa29dad0e32 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -78,6 +78,7 @@ const config = {
     ],
   ],
   plugins: [
+    'docusaurus-plugin-sass',
     [
       "@docusaurus/plugin-content-docs",
       ({
@@ -137,7 +138,7 @@ const config = {
       },
     ],
     "./src/plugins/plugin-json-rpc.ts",
-    isProd ? 
+    isProd ?
       [
         "docusaurus-plugin-segment",
         {
diff --git a/package.json b/package.json
index d32c7d830ad..fe597005cd4 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@rjsf/utils": "^5.18.4",
     "@rjsf/validator-ajv8": "^5.18.4",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-plugin-segment": "^1.0.4",
     "dotenv": "^16.4.5",
     "launchdarkly-js-client-sdk": "^3.3.0",
@@ -54,7 +55,8 @@
     "react-player": "^2.13.0",
     "react-tippy": "^1.4.0",
     "remark-codesandbox": "^0.10.1",
-    "remark-docusaurus-tabs": "^0.2.0"
+    "remark-docusaurus-tabs": "^0.2.0",
+    "sass": "^1.77.6"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^3.0.0",
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
new file mode 100644
index 00000000000..a5b3251c585
--- /dev/null
+++ b/src/components/Button/button.module.scss
@@ -0,0 +1,45 @@
+:root[data-theme='dark'] {
+  --button-background-color: #1098FC;
+  --button-color: #141618;
+  --button-hover-background-color: #26A2FC;
+  --button-hover-shadow: 0px 2px 8px 0px var(--shadow-primary, rgba(16, 152, 252, 0.40));
+  --button-active-background-color: #3BAAFD;
+}
+
+:root[data-theme='light'] {
+  --button-background-color: #0376C9;
+  --button-color: #FFFFFF;
+  --button-hover-background-color: #036AB5;
+  --button-hover-shadow: 0px 2px 8px 0px var(--shadow-primary, rgba(3, 118, 201, 0.20));
+  --button-active-background-color: #025EA1;
+}
+
+.button {
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border: none;
+  padding: 0 16px;
+  height: 40px;
+  border-radius: 24px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 145px;
+
+  &:hover {
+    background-color: var(--button-hover-background-color);
+    box-shadow: var(--button-hover-shadow);
+  }
+
+  &:active {
+    background-color: var(--button-active-background-color);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 00000000000..7ebd174b98f
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./button.module.scss";
+
+interface IButton {
+    onClick: VoidFunction;
+    children: string | React.ReactElement
+}
+
+export default function Button({onClick, children}: IButton) {
+    return (
+        <button className={styles.button} onClick={onClick}>
+            {children}
+        </button>
+    );
+}
diff --git a/src/pages/developer-tools/faucet.module.scss b/src/pages/developer-tools/faucet.module.scss
new file mode 100644
index 00000000000..6fefc2f87ec
--- /dev/null
+++ b/src/pages/developer-tools/faucet.module.scss
@@ -0,0 +1,73 @@
+:root[data-theme='dark'] {
+  --faucet-bg-color-primary: #252526;
+  --faucet-box-shadow: none;
+}
+
+:root[data-theme='light'] {
+  --faucet-bg-color-primary: #FFFFFF;
+  --faucet-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+}
+
+:global(.navbar) {
+  box-shadow: none;
+}
+
+.authCont {
+  padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--faucet-bg-color-primary);
+  box-shadow: var(--ifm-navbar-shadow);
+
+  @media screen and (max-width: 996px) {
+    box-shadow: none;
+    height: 110px;
+    padding-bottom: 70px;
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+}
+
+.tabs {
+  :global(.tabs-container) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > *:last-child {
+      width: 100%;
+      position: relative;
+    }
+  }
+
+  .header {
+    font-weight: 400;
+    white-space: nowrap;
+    position: relative;
+    top: -60px;
+    display: inline-flex;
+
+    > li {
+      padding: 6px 8px;
+      border-bottom-width: 2px;
+
+      &:hover {
+        background: none;
+      }
+    }
+
+    @media screen and (max-width: 996px) {
+      // top: -10px;
+    }
+  }
+
+  .content {
+    width: 100%;
+    padding: 0 var(--ifm-navbar-padding-horizontal);
+  }
+}
\ No newline at end of file
diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx
index 237fdbe8288..47f66981a53 100644
--- a/src/pages/developer-tools/faucet.tsx
+++ b/src/pages/developer-tools/faucet.tsx
@@ -1,13 +1,26 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import styles from './faucet.module.scss'
+import Button from '@site/src/components/Button'
 
 export default function Faucet() {
     return (
         <Layout title="Faucet" description="Faucet">
-            <div>
-                <p>
-                    FAUCET PAGE
-                </p>
+            <div className={styles.authCont}>
+                <span className={styles.title}>MetaMask Faucet</span>
+                <Button>Sign in</Button>
+            </div>
+            <div className={styles.tabs}>
+                <Tabs className={styles.header}>
+                    <TabItem className={styles.content} value="apple" label="Ethereum Sepolia" default>
+                        <div>Ethereum Sepolia</div>
+                    </TabItem>
+                    <TabItem className={styles.content} value="orange" label="Linea Sepolia">
+                        <div>Linea Sepolia</div>
+                    </TabItem>
+                </Tabs>
             </div>
         </Layout>
     );
diff --git a/tsconfig.json b/tsconfig.json
index 60773147be6..43205187298 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,13 +4,18 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "launchdarkly": ["./node_modules/launchdarkly-js-client-sdk/dist/ldclient.es.js"]
-    }
+      "launchdarkly": [
+        "./node_modules/launchdarkly-js-client-sdk/dist/ldclient.es.js"
+      ]
+    },
+    "types": [
+      "docusaurus-plugin-sass"
+    ]
   },
   "include": [
     "./**/*"
   ],
   "exclude": [
     "node_modules"
-  ],
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index f22bd0a221c..e22d87e2299 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5994,7 +5994,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.3":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -7749,6 +7749,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"docusaurus-plugin-sass@npm:^0.2.5":
+  version: 0.2.5
+  resolution: "docusaurus-plugin-sass@npm:0.2.5"
+  dependencies:
+    sass-loader: ^10.1.1
+  peerDependencies:
+    "@docusaurus/core": ^2.0.0-beta || ^3.0.0-alpha
+    sass: ^1.30.0
+  checksum: db17a8c87a344330717962fe195c94089e32281dc7f79b66bf99587254ebad71353b8588c5b74feb1c2841c6183e59b20259f5fb1a5c74026903557cbb113a68
+  languageName: node
+  linkType: hard
+
 "docusaurus-plugin-segment@npm:^1.0.4":
   version: 1.0.4
   resolution: "docusaurus-plugin-segment@npm:1.0.4"
@@ -10366,6 +10378,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.6
+  resolution: "immutable@npm:4.3.6"
+  checksum: 3afd020be988ec9ba42c1e585b88858970beba91332ac04ac11446722c7e5da03d5956f5049806573d29dfee25f69262297cb7f3bd6b16fc83a175a0176c6c2a
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -11595,6 +11614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klona@npm:^2.0.4":
+  version: 2.0.6
+  resolution: "klona@npm:2.0.6"
+  checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
+  languageName: node
+  linkType: hard
+
 "known-css-properties@npm:^0.29.0":
   version: 0.29.0
   resolution: "known-css-properties@npm:0.29.0"
@@ -12609,6 +12635,7 @@ __metadata:
     "@tsconfig/docusaurus": ^1.0.5
     "@typescript-eslint/parser": ^7.12.0
     clsx: ^1.2.1
+    docusaurus-plugin-sass: ^0.2.5
     docusaurus-plugin-segment: ^1.0.4
     dotenv: ^16.4.5
     eslint-plugin-react: ^7.34.2
@@ -12624,6 +12651,7 @@ __metadata:
     react-tippy: ^1.4.0
     remark-codesandbox: ^0.10.1
     remark-docusaurus-tabs: ^0.2.0
+    sass: ^1.77.6
     stylelint: "^15.0.0 "
     stylelint-config-standard: ^34.0.0
     tsc-files: ^1.1.4
@@ -16835,6 +16863,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^10.1.1":
+  version: 10.5.2
+  resolution: "sass-loader@npm:10.5.2"
+  dependencies:
+    klona: ^2.0.4
+    loader-utils: ^2.0.0
+    neo-async: ^2.6.2
+    schema-utils: ^3.0.0
+    semver: ^7.3.2
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    sass: ^1.3.0
+    webpack: ^4.36.0 || ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+  checksum: 416909a9d685aafeb4342d91575439b293f4e1d6fdf7f8f970e4b3158af38e3e7379b87c0a82d7b7b32165b1f54bcd7eca3c132ad143405a5105ea4ba79cdac2
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.77.6":
+  version: 1.77.6
+  resolution: "sass@npm:1.77.6"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 9bd1cb9ec1f10b7df83ed6a4b3d8764fe9174ee422f1ea21c51bcd953f710deee57c649269f9cb1ad1e9dcc3b87efee62cd2b36aca9cc646d44fd9179300d5f3
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"
@@ -17355,7 +17421,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
   checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97