diff --git a/public/fonts/FTPolarMono-Medium.woff2 b/public/fonts/FTPolarMono-Medium.woff2
new file mode 100644
index 000000000..b5616580b
Binary files /dev/null and b/public/fonts/FTPolarMono-Medium.woff2 differ
diff --git a/public/fonts/FTPolarMono-Regular.woff2 b/public/fonts/FTPolarMono-Regular.woff2
new file mode 100644
index 000000000..3063f3565
Binary files /dev/null and b/public/fonts/FTPolarMono-Regular.woff2 differ
diff --git a/public/fonts/TransSansPremium-Bold.woff2 b/public/fonts/TransSansPremium-Bold.woff2
new file mode 100644
index 000000000..a7617c982
Binary files /dev/null and b/public/fonts/TransSansPremium-Bold.woff2 differ
diff --git a/public/scroll-docs-white.svg b/public/scroll-docs-white.svg
new file mode 100644
index 000000000..2fa605bfc
--- /dev/null
+++ b/public/scroll-docs-white.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 183 34.8" style="enable-background:new 0 0 84.6 34.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M45.3,18.7c0,2.7-2.4,4.3-5.1,4.3c-3.4,0-5.2-1-5.8-3.1l3-0.8c0.3,1.2,1.6,2.3,2.9,2.3c1,0,2.4-0.5,2.4-1.6
+		c0-0.9-0.6-1.7-1.5-2l-2.1-0.5c-2.7-0.6-4.3-2.1-4.3-4.1c0-3,2.4-4.3,4.7-4.3c4.1,0,5,1.5,5.5,3.3l-3.1,0.5
+		c-0.3-1.9-1.8-2.2-2.3-2.2c-3.6,0.1-2.4,3.8,0.4,4.4l1.8,0.4C43.8,15.8,45.3,17.2,45.3,18.7z"/>
+</g>
+<g>
+	<path class="st0" d="M54.2,20.1l0.2,1.3c-0.5,0.8-1.6,1.6-3.5,1.6c-2.7,0-4.6-1.8-4.6-4.5c-0.2-5.6,7.8-6.8,8.2-2.4l-1.9,0.4
+		c0-0.8,0.1-1.8-1.5-1.8c-3.6,0.2-2.8,6.6,0.5,6.4C52.5,21,53.4,20.7,54.2,20.1z"/>
+</g>
+<g>
+	<path class="st0" d="M63,15.2C63,15.2,63,15.2,63,15.2l0,0.3l-2.2,1.3c-0.1-0.6-0.3-1.3-0.5-1.2c-0.6,0.6-0.9,1.4-0.9,2.5V23h-2.5
+		v-8.4l1.9-1.3l0.4,2.1c0.5-1.1,1.4-1.8,2.3-1.8C62.3,13.6,63,14.4,63,15.2z"/>
+</g>
+<g>
+	<path class="st0" d="M68.1,13.6c-6.3-0.1-6.5,9.7,0,9.5C74.6,23.2,74.4,13.5,68.1,13.6z M68.1,21.9c-1.3,0-1.9-1.2-1.9-3.6
+		c0-1.6,0.3-2.6,0.8-3.2c0.3-0.3,0.7-0.4,1.1-0.4c1.3,0,1.9,1.2,1.9,3.6C70,20.7,69.4,21.9,68.1,21.9z"/>
+</g>
+<g>
+	<polygon class="st0" points="77.6,8.3 77.5,23 75,23 75,10 	"/>
+</g>
+<g>
+	<polygon class="st0" points="83.3,8.3 83.2,23 80.7,23 80.7,10 	"/>
+</g>
+<g>
+	<path class="st0" d="M33.8,29.6c-0.3-1.2-1.4-2.4-3.3-2.4c0-7.6,0-15,0-22.7c0-1.1-0.4-2-1.2-2.8c-0.7-0.7-1.7-1.1-2.7-1.2
+		c-7.5,0-14.8,0-22.3,0C1.1,0-0.8,4.3,1.6,6.4l0,0c1.4,1.4,3.7,0.9,5.6,1c0,7.5,0,14.9,0,22.5c-0.1,2.9,2.3,4.5,5.1,4.1h19
+		C33.3,33.6,34.4,31.3,33.8,29.6z M1,2.8c1-2.6,4.5-2.4,5.6-0.2c-0.6,0-2,0-2.3,0v0c0,0-0.1,0-0.1,0l0,0l0,0c-0.6,0-1.1,0-1.6,0.4
+		C2.1,3.1,1.8,4,2.3,4.4c0.9,0.4,2,0.1,2.9,0.2C5,6.1,3.7,6.7,2.1,6.4C0.9,5.6,0.5,4.1,1,2.8z M7.1,6.4v0.7c-1.4-0.1-3,0.2-4.4-0.3
+		c1.5,0,2.7-0.8,2.9-2.3h0c0-0.1,0-0.2,0-0.4h0c0-0.6-0.4-1-0.7-1.3l1.8,0C7.4,3.9,7,5.3,7.1,6.4z M12.1,33.8L12.1,33.8
+		c-2.7,0.3-4.7-1.1-4.7-3.8c0-5.6,0-11.2,0-16.6c0-2.4,0-4.9,0-7.3c0-2.2,0.1-4.1-2.2-5.2c7.2-0.1,14.2,0,21.5,0
+		c0.9,0,1.8,0.4,2.5,1.1c0.7,0.7,1.1,1.6,1.1,2.6c-0.1,7.7,0,15.1,0,22.7c-6.8,0-12.6,0-18,0c-3-0.6-4.9,3.6-2.3,5.5
+		c0.7,0.8,1.8,0.7,2.8,0.7C12.5,33.4,12.3,33.5,12.1,33.8z M12.7,29.4c0,0-0.1-0.1-0.1-0.1l1.4,0c0.7,1.1,0.3,2.8-0.8,3.7
+		c-0.8-0.1-1.8,0.1-2.5-0.2C12.5,32.8,13.7,30.8,12.7,29.4z M13.4,29c-0.7,0-1,0-1.3,0c-1.7-0.4-2.7,1.6-1.2,1.5c0.6,0,1.2,0,1.8,0
+		c0,1.4-1.2,2.1-2.6,1.9c0,0-0.1-0.1-0.1-0.1l0,0c-2.3-1.8-0.8-5.5,2.2-5c0.1,0.4,0.5,0.4,0.8,0.6c0.3,0.3,0.6,0.6,0.9,1
+		C13.9,29,13.7,29,13.4,29z M32.1,33.4c-0.3,0.2-0.6,0.3-0.9,0.4H12.6c2.7-1,2.9-5.2,0.2-6.3c6,0,11.7,0,17.8,0
+		C34,27.5,34.8,31.6,32.1,33.4z"/>
+	<path class="st0" d="M27.9,16.2c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.6c-0.1-0.5,0.5-0.6,0.8-0.5c5.6,0,10.8,0,15.8,0
+		c0.4,0,0.9,0.1,0.8,0.6C28.1,15.9,28.1,16,27.9,16.2z"/>
+	<path class="st0" d="M11.4,21.3c5.3,0,10.7,0,15.9,0c0.7,0,0.8,0.2,0.8,0.6c0.1,0.5-0.5,0.6-0.8,0.5c-5.3,0-10.5,0-15.8,0
+		c-0.4,0-0.9-0.1-0.8-0.5C10.6,21.5,10.8,21.3,11.4,21.3z"/>
+	<path class="st0" d="M11.4,18.2c5.3,0,10.7,0,15.9,0c0.7,0,0.8,0.2,0.8,0.6c0.1,0.5-0.5,0.6-0.8,0.5c-5.3,0-10.5,0-15.8,0
+		c-0.4,0-0.9-0.1-0.8-0.5C10.6,18.4,10.8,18.2,11.4,18.2z"/>
+	<path class="st0" d="M27.9,25.4c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.5c0-0.4,0.1-0.6,0.8-0.6c5.3,0,10.6,0,15.9,0
+		C28.3,24.3,28.2,25.1,27.9,25.4z"/>
+	<path class="st0" d="M27.9,13.1c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.5c0-0.4,0.1-0.6,0.8-0.6c5.3,0,10.6,0,15.9,0
+		C28.3,12,28.2,12.8,27.9,13.1z"/>
+	<path class="st0" d="M27.9,10c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.5c0-0.4,0.1-0.6,0.8-0.6c5.3,0,10.6,0,15.9,0
+		C28.3,8.9,28.2,9.7,27.9,10z"/>
+	<path class="st0" d="M27.9,6.9c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.5c0-0.4,0.1-0.6,0.8-0.6c5.3,0,10.6,0,15.9,0
+		C28.3,5.9,28.2,6.7,27.9,6.9z"/>
+</g>
+
+<path d="m98.5 6c.3 0 .5.2.5.5v19c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-19c0-.3.2-.5.5-.5z" fill="#fff"/>
+<g fill="#fff">
+<path d="m116.2 20.4v-8.8h2.3c2.2 0 4 1.4 4 4.4s-1.8 4.4-4.1 4.4zm2.3 2c3.5 0 6.2-2.3 6.2-6.4s-2.7-6.4-6.2-6.4h-4.5v12.8z"/>
+<path d="m130.7 20.4c-1.3 0-2.4-1-2.4-2.8s1.2-2.8 2.4-2.8c1.3 0 2.4.9 2.4 2.8 0 1.8-1.1 2.8-2.4 2.8zm0-7.5c-2.6 0-4.5 2-4.5 4.6 0 2.7 1.9 4.7 4.5 4.7s4.6-2 4.6-4.7c0-2.6-2-4.6-4.6-4.6z"/>
+<path d="m141.1 14.8c1.3 0 1.9.9 2.1 1.6l1.9-.7c-.4-1.4-1.7-2.9-4-2.9-2.5 0-4.5 1.9-4.5 4.6s2 4.7 4.5 4.7c2.3 0 3.6-1.5 4-2.9l-1.8-.7c-.2.7-.8 1.6-2.2 1.6-1.3 0-2.4-1-2.4-2.8s1.1-2.5 2.4-2.5z"/>
+<path d="m146.2 20.0c.1 1 1.1 2.6 3.6 2.6 2.2 0 3.3-1.5 3.3-2.8s-.9-2.3-2.5-2.7l-1.3-.3c-.5-.1-.9-.5-.9-.9 0-.5.5-1 1.3-1 1.2 0 1.5.8 1.6 1.3l1.8-.5c-.1-.9-.9-2.4-3.4-2.4-1.8 0-3.2 1.3-3.2 2.8 0 1.2.8 2.2 2.4 2.6l1.3.3c.7.1 1 .5 1 1s-.5 1-1.3 1c-1.1 0-1.7-.7-1.8-1.5z"/>
+</g>
+</svg>
diff --git a/public/scroll-white.svg b/public/scroll-white.svg
index 2fa605bfc..4dbfc4c20 100644
--- a/public/scroll-white.svg
+++ b/public/scroll-white.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 183 34.8" style="enable-background:new 0 0 84.6 34.8;" xml:space="preserve">
+	 viewBox="0 0 84.6 34.8" style="enable-background:new 0 0 84.6 34.8;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>
@@ -55,12 +55,4 @@
 	<path class="st0" d="M27.9,6.9c-5.5,0.3-11,0-16.5,0.1c-0.4,0-0.9-0.1-0.8-0.5c0-0.4,0.1-0.6,0.8-0.6c5.3,0,10.6,0,15.9,0
 		C28.3,5.9,28.2,6.7,27.9,6.9z"/>
 </g>
-
-<path d="m98.5 6c.3 0 .5.2.5.5v19c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-19c0-.3.2-.5.5-.5z" fill="#fff"/>
-<g fill="#fff">
-<path d="m116.2 20.4v-8.8h2.3c2.2 0 4 1.4 4 4.4s-1.8 4.4-4.1 4.4zm2.3 2c3.5 0 6.2-2.3 6.2-6.4s-2.7-6.4-6.2-6.4h-4.5v12.8z"/>
-<path d="m130.7 20.4c-1.3 0-2.4-1-2.4-2.8s1.2-2.8 2.4-2.8c1.3 0 2.4.9 2.4 2.8 0 1.8-1.1 2.8-2.4 2.8zm0-7.5c-2.6 0-4.5 2-4.5 4.6 0 2.7 1.9 4.7 4.5 4.7s4.6-2 4.6-4.7c0-2.6-2-4.6-4.6-4.6z"/>
-<path d="m141.1 14.8c1.3 0 1.9.9 2.1 1.6l1.9-.7c-.4-1.4-1.7-2.9-4-2.9-2.5 0-4.5 1.9-4.5 4.6s2 4.7 4.5 4.7c2.3 0 3.6-1.5 4-2.9l-1.8-.7c-.2.7-.8 1.6-2.2 1.6-1.3 0-2.4-1-2.4-2.8s1.1-2.5 2.4-2.5z"/>
-<path d="m146.2 20.0c.1 1 1.1 2.6 3.6 2.6 2.2 0 3.3-1.5 3.3-2.8s-.9-2.3-2.5-2.7l-1.3-.3c-.5-.1-.9-.5-.9-.9 0-.5.5-1 1.3-1 1.2 0 1.5.8 1.6 1.3l1.8-.5c-.1-.9-.9-2.4-3.4-2.4-1.8 0-3.2 1.3-3.2 2.8 0 1.2.8 2.2 2.4 2.6l1.3.3c.7.1 1 .5 1 1s-.5 1-1.3 1c-1.1 0-1.7-.7-1.8-1.5z"/>
-</g>
 </svg>
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
index a501e7fb0..9a385a2d7 100644
--- a/src/components/Aside.astro
+++ b/src/components/Aside.astro
@@ -40,7 +40,7 @@ const icons = {
     background-color: var(--aside-bg);
 
     /* display: flex; */
-    @apply p-[30px] gap-4 rounded-[27px] text-info;
+    @apply p-[30px] gap-4 rounded-[27px] text-info mb-[1rem];
   }
 
   aside p.title {
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 250211b08..7ff764ff3 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -35,7 +35,7 @@ const section = frontmatter?.section ?? ""
   <nav class="nav-wrapper" title="Top Navigation">
     <div class="logo flex items-center">
       <a href={localizePath("/")}>
-        <img src={dark ? "/scroll-white.svg" : "/scroll.svg"} alt={CONFIG.SITE.title ?? "Documentation"} />
+        <img src={dark ? "/scroll-docs-white.svg" : "/scroll.svg"} alt={CONFIG.SITE.title ?? "Documentation"} />
       </a>
     </div>
     <div class="right-box">
diff --git a/src/components/Header/Search/SearchModal.tsx b/src/components/Header/Search/SearchModal.tsx
index f2b9c9ab9..263c2321e 100644
--- a/src/components/Header/Search/SearchModal.tsx
+++ b/src/components/Header/Search/SearchModal.tsx
@@ -12,20 +12,20 @@ const searchClient = algoliasearch(CONFIG.ALGOLIA.appId, CONFIG.ALGOLIA.publicAp
 
 const recommendedArticles = [
   {
-    title: "Suggested Article A",
-    url: "/",
+    title: "User Guide",
+    url: "/en/user-guide",
   },
   {
-    title: "Suggested Article B",
-    url: "/",
+    title: "Developer Quickstart",
+    url: "/en/developers/developer-quickstart",
   },
   {
-    title: "Suggested Article C",
-    url: "/",
+    title: "Sepolia Testnet Contracts",
+    url: "/en/developers/alpha-testnet-contracts",
   },
   {
-    title: "Suggested Article D",
-    url: "/",
+    title: "Architecture Overview",
+    url: "/en/technology/architecture/scroll-architecture",
   },
 ]
 
diff --git a/src/components/MarkmapView/MarkmapaView.tsx b/src/components/MarkmapView/MarkmapaView.tsx
index 6c47eeb8f..a5016185d 100644
--- a/src/components/MarkmapView/MarkmapaView.tsx
+++ b/src/components/MarkmapView/MarkmapaView.tsx
@@ -4,7 +4,7 @@ import { Markmap } from 'markmap-view';
 
 const transformer = new Transformer();
 
-export default function MarkmapHooks({value}) {
+export default function MarkmapHooks({value, children}) {
   // Ref for SVG element
   const refSvg = useRef<SVGSVGElement>();
   // Ref for markmap object
@@ -21,7 +21,7 @@ export default function MarkmapHooks({value}) {
     // Update data for markmap once value is changed
     const mm = refMm.current;
     if (!mm) return;
-    const { root } = transformer.transform(value);
+    const { root } = transformer.transform(children?.props?.value || value);
     mm.setData(root);
     mm.fit();
   }, [refMm.current, value]);
diff --git a/src/components/MarkmapView/index.astro b/src/components/MarkmapView/index.astro
index c60f0d4d4..fac0216dd 100644
--- a/src/components/MarkmapView/index.astro
+++ b/src/components/MarkmapView/index.astro
@@ -16,4 +16,14 @@ const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8"
 const cleanSrc = src.replace(/^\/+/, "")
 ---
 
-<MarkmapaView client:idle value={data} />
+<MarkmapaView client:idle value={data}>
+  {
+    `
+  # markmap 
+  - beautiful1 
+  - useful 
+  - easy 
+  - interactive
+  `
+  }
+</MarkmapaView>
diff --git a/src/config/site.ts b/src/config/site.ts
index aba584b44..08e593ced 100644
--- a/src/config/site.ts
+++ b/src/config/site.ts
@@ -18,7 +18,8 @@ export const OPEN_GRAPH = {
 }
 
 // Uncomment this to add an "Edit this page" button to every page of documentation.
-export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/main/`
+// export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/main/`
+export const GITHUB_EDIT_URL = `https://github.com/scroll-tech/scroll-documentation/tree/ui-refactor/`
 
 // Uncomment this to add an "Join our Community" button to every page of documentation.
 export const COMMUNITY_INVITE_URL = `https://discord.gg/scroll`
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 3b38e5b56..e69da75ff 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -16,7 +16,7 @@ const { content = {}, frontmatter } = Astro.props
 const headings = Astro.props?.headings || Astro.props?.content?.astro.headings
 
 const currentPage = new URL(Astro.request.url).pathname
-const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.${frontmatter?.file.split(".").pop() || "md"}`
+const currentFile = `src/content/docs${currentPage.replace(/\/$/, "")}.${frontmatter?.file.split(".").pop() || "md"}`
 const githubEditUrl = CONFIG.GITHUB_EDIT_URL + currentFile
 const formattedContentTitle = content.title
   ? `${content.title} | ${CONFIG.SITE.title}`
@@ -46,6 +46,10 @@ changeLanguage(content.lang)
       href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
         width: 100%;
@@ -64,6 +68,10 @@ changeLanguage(content.lang)
         margin-right: 20px;
       }
 
+      .layout :global(*) {
+        font-family: var(--font-family-body-text);
+      }
+
       .layout :global(> *) {
         width: 100%;
         height: 100%;
diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
index dcab34786..c565a7014 100644
--- a/src/pages/en/home/index.astro
+++ b/src/pages/en/home/index.astro
@@ -11,13 +11,17 @@ changeLanguage("en")
 
 <HomeLayout dark>
   <div class="header">
-    <p class="header-title">Welcome to<br /> Scroll Documentation</p>
-    <Search client:visible />
+    <div class="inner">
+      <p class="header-title">Welcome to<br /> Scroll Documentation</p>
+      <Search client:visible />
+    </div>
   </div>
   <div class="content">
-    <QuickStart />
-    <Navigate />
-    <ConnectUs />
+    <div class="inner">
+      <QuickStart />
+      <Navigate />
+      <ConnectUs />
+    </div>
   </div>
 </HomeLayout>
 
@@ -27,6 +31,10 @@ changeLanguage("en")
     background-color: var(--color-text-primary);
     padding: 70px 60px 110px;
   }
+  .inner {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
   .header-title {
     color: var(--white);
     font-size: 55px;
diff --git a/src/styles/design-system/components/typography.css b/src/styles/design-system/components/typography.css
index 08be712c0..f57a336cc 100644
--- a/src/styles/design-system/components/typography.css
+++ b/src/styles/design-system/components/typography.css
@@ -2,7 +2,7 @@
 
 /* Heading styles */
 :where(h1, h2, h3, h4, h5, h6) {
-  @apply font-text leading-[1.3] font-medium tracking-[0.18px];
+  @apply leading-[1.3] font-medium tracking-[0.18px];
 }
 
 :where(h6) {
diff --git a/src/styles/design-system/fonts.css b/src/styles/design-system/fonts.css
index 8cd77fe2a..ff2c7b7b5 100644
--- a/src/styles/design-system/fonts.css
+++ b/src/styles/design-system/fonts.css
@@ -19,37 +19,45 @@
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "fira code";
-  src: url("https://fonts.googleapis.com/css2?family=Fira+Code");
+  font-family: "trans-sans";
+  src: url("/fonts/TransSansPremium-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "Fira Code";
-  font-style: normal;
+  font-family: "trans-sans";
+  src: url("/fonts/TransSansPremium-Medium.woff2") format("woff2");
   font-weight: 500;
-  src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVD7NuzlojwUKQ.woff2)
-    format("woff2");
+  font-style: normal;
+  font-display: swap;
 }
-
 @font-face {
   font-family: "trans-sans";
-  src: url("/fonts/TransSansPremium-Regular.woff2") format("woff2");
-  font-weight: 400;
+  src: url("/fonts/TransSansPremium-SemiBold.woff2") format("woff2");
+  font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "trans-sans";
-  src: url("/fonts/TransSansPremium-Medium.woff2") format("woff2");
+  src: url("/fonts/TransSansPremium-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "FTPolarMono";
+  src: url("/fonts/FTPolarMono-Regular.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: "trans-sans";
+  font-family: "FTPolarMono";
   src: url("/fonts/TransSansPremium-SemiBold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
diff --git a/src/styles/design-system/values/font.css b/src/styles/design-system/values/font.css
index f113707ac..4970a14de 100644
--- a/src/styles/design-system/values/font.css
+++ b/src/styles/design-system/values/font.css
@@ -1,6 +1,6 @@
 :root {
   --font-family-text: "trans-sans", "circular", Arial, "Helvetica Neue", Helvetica, sans-serif;
-  --font-family-code: "fira code", "Courier New", monospace, sans-serif;
+  --font-family-code: "FTPolarMono", "Fira Code", "Courier New", monospace, sans-serif;
   --font-family-body-text: "Roboto Flex", "trans-sans", "circular", Arial, "Helvetica Neue", Helvetica, sans-serif;
 
   /* Font weights */
diff --git a/src/styles/index.css b/src/styles/index.css
index 86f557aa1..6061d7f03 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -110,8 +110,8 @@ article > section iframe {
   position: relative;
 }
 
-.main-section :not(h1, h2, h3) {
-  font-family: var(--font-family-body-text);
+.main-section :is(h1, h2, h3) {
+  font-family: var(--font-family-text);
 }
 
 .main-section .remix-callout {
@@ -284,8 +284,8 @@ img {
 }
 
 h2.heading {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 18px;
+  font-weight: 700 !important;
   padding: 0.1rem 0rem;
   /* margin-top: 30px; */
   margin-bottom: 20px;
@@ -389,6 +389,7 @@ h2.heading {
     margin-left: 1rem;
   }
   h2.heading {
+    font-size: 16px;
     padding: 0.1rem 1rem;
   }
 }
diff --git a/src/styles/prism-darcula.css b/src/styles/prism-darcula.css
index 7c4cdf2ed..a89fb2aa8 100644
--- a/src/styles/prism-darcula.css
+++ b/src/styles/prism-darcula.css
@@ -11,7 +11,7 @@
 code[class*="language-"],
 pre[class*="language-"] {
   color: #a9b7c6;
-  font-family: Consolas, Monaco, "Andale Mono", monospace;
+  font-family: var(--font-family-code);
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -29,6 +29,13 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
+code,
+code[class*="language-"] *,
+pre[class*="language-"] * {
+  font-family: var(--font-family-code) !important;
+  font-size: 16px;
+}
+
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,