diff --git a/README.md b/README.md
index ab7109a62..1b2c88e5b 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,24 @@ npm install && npm run dev
- All articles are markdown and stored in `/src/content/docs/`.
- Navigation is JSON in `/src/config/sidebar.ts`
+## Tooling on Scroll
+
+If you'd like to add an entry to our [tooling list](http://docs.scroll.xyz/en/developers/scroll-contracts), create a PR to add a new `mdx` file in the [tooling content folder](src/content/tools), using the following template. You can also refer to other existing entries for reference.
+
+```
+---
+name: "Safe"
+category: ["Identity", "Wallet"]
+excerpt: "Safe allows you to create smart wallet on chain."
+logo: { src: "https://app.safe.global/images/safe-logo-green.png", alt: "Safe Logo" }
+website: "https://app.safe.global"
+network: ["Mainnet", "Testnet]
+noAdditionalInfo: false
+---
+
+Add additional info here about how to access this tool on Scroll (ex. contract addresses, tutorials, API URLs)
+```
+
## Credits
- Special thanks to the Chainlink team whose documentation we forked. Their repo is available [here](https://github.com/smartcontractkit/documentation) and viewable at [https://docs.chain.link/](https://docs.chain.link/).
diff --git a/astro.config.ts b/astro.config.ts
index dea16d477..438c0cc51 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -18,6 +18,8 @@ import sitemap from "@astrojs/sitemap"
import tailwind from "@astrojs/tailwind"
+import expressiveCode from "astro-expressive-code"
+
// https://astro.build/config
export default defineConfig({
site: "https://docs.scroll.io",
@@ -38,6 +40,21 @@ export default defineConfig({
}),
astroCallouts(),
solidityRemixCode(),
+ expressiveCode({
+ themes: ["dark-plus"],
+ defaultProps: {
+ frame: "code",
+ },
+ styleOverrides: {
+ borderRadius: "27px",
+ borderColor: "transparent",
+ frames: {
+ shadowColor: "transparent",
+ editorTabBorderRadius: "0.5rem",
+ editorBackground: "#2b2b2b",
+ },
+ },
+ }),
mdx(),
tailwind({
applyBaseStyles: false,
diff --git a/package.json b/package.json
index 83224f985..baa25c0eb 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"@astrojs/tailwind": "^5.1.0",
"@nanostores/preact": "^0.3.1",
"astro-auto-import": "^0.4.2",
+ "astro-expressive-code": "^0.35.3",
"astro-i18next": "^1.0.0-beta.21",
"clipboard": "^2.0.11",
"ethereum-rpc-table": "^0.0.1",
@@ -42,6 +43,7 @@
"query-string": "^7.1.1",
"react-instantsearch-hooks-web": "^6.38.1",
"react-mailchimp-subscribe": "^2.1.3",
+ "rehype-format": "^5.0.0",
"rehype-katex": "^7.0.0",
"rehype-mermaidjs": "^1.0.1",
"remark-gfm": "^4.0.0",
diff --git a/public/assets/github-white-800.svg b/public/assets/github-white-800.svg
new file mode 100644
index 000000000..8a300468d
--- /dev/null
+++ b/public/assets/github-white-800.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 5af7f0f46..0d2ff57bb 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -89,6 +89,7 @@
"erc1155TokenBridge": "ERC1155 Token Bridge",
"theScrollMessenger": "The Scroll Messenger",
"transactionFeesOnScroll": "Transaction Fees on Scroll",
+ "toolingDeployedOnScroll": "Tooling deployed On Scroll",
"l2Fee": "L2 Fee",
"l1Fee": "L1 Fee",
"gasOracle": "Gas Oracle",
diff --git a/public/scroll-docs-white-800.svg b/public/scroll-docs-white-800.svg
new file mode 100644
index 000000000..5d75ae3e7
--- /dev/null
+++ b/public/scroll-docs-white-800.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/assets/svgs/header/sun.svg b/src/assets/svgs/header/sun.svg
index 33f100310..4d73add7b 100644
--- a/src/assets/svgs/header/sun.svg
+++ b/src/assets/svgs/header/sun.svg
@@ -1,3 +1,3 @@
diff --git a/src/assets/svgs/home/Note.svg b/src/assets/svgs/home/Note.svg
new file mode 100644
index 000000000..9f6db1d02
--- /dev/null
+++ b/src/assets/svgs/home/Note.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
index 848d2ae64..dbbb3891b 100644
--- a/src/components/Aside.astro
+++ b/src/components/Aside.astro
@@ -21,7 +21,7 @@ const icons = {