diff --git a/examples/components/Layout.tsx b/examples/components/Layout.tsx
index 076aac56..1585573b 100644
--- a/examples/components/Layout.tsx
+++ b/examples/components/Layout.tsx
@@ -51,6 +51,7 @@ function Header(props: BoxProps) {
       sx={[
         {
           p: 2,
+          pr: 3,
           gap: 2,
           bgcolor: 'background.surface',
           display: 'flex',
diff --git a/examples/layouts/Header.tsx b/examples/layouts/Header.tsx
index 8c7e0844..2c10d56c 100644
--- a/examples/layouts/Header.tsx
+++ b/examples/layouts/Header.tsx
@@ -1,6 +1,7 @@
 // @ts-ignore
 import radixLogo from '../assets/radix-icon_128x128.png'
 import * as React from 'react'
+import '@radixdlt/dapps-dropdown'
 import Box from '@mui/joy/Box'
 import Typography from '@mui/joy/Typography'
 import IconButton from '@mui/joy/IconButton'
@@ -18,6 +19,10 @@ declare global {
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
       >
+      'radix-dapps-dropdown': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
     }
   }
 }
@@ -57,7 +62,14 @@ export const Header = ({
         </Typography>
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 1.5,
+        }}
+      >
         <Select
           value={networkId}
           onChange={(_, value) => {
@@ -74,6 +86,7 @@ export const Header = ({
         </Select>
 
         <radix-connect-button></radix-connect-button>
+        <radix-dapps-dropdown></radix-dapps-dropdown>
       </Box>
     </Layout.Header>
   )
diff --git a/package-lock.json b/package-lock.json
index 86b74b2a..0c4dd8ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@mui/icons-material": "^5.11.16",
         "@mui/joy": "^5.0.0-alpha.76",
         "@mui/material": "^5.12.1",
+        "@radixdlt/dapps-dropdown": "^0.2.0",
         "@radixdlt/radix-engine-toolkit": "0.4.0",
         "@radixdlt/rola": "^0.3.1-rcnet-v3.1.1",
         "@types/elliptic": "^6.4.14",
@@ -3299,6 +3300,18 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@radixdlt/dapps-dropdown": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@radixdlt/dapps-dropdown/-/dapps-dropdown-0.2.0.tgz",
+      "integrity": "sha512-6o+ftsaX2H8tppcBSoVHEMGHfelYenqVVMpEwzH5OOpO11O7UB2TojbSToztDXua6GJXJ0xBFIFIzfg5pzzRDw==",
+      "dev": true,
+      "dependencies": {
+        "lit": "^2.7.6"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/@radixdlt/radix-engine-toolkit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@radixdlt/radix-engine-toolkit/-/radix-engine-toolkit-0.4.0.tgz",
diff --git a/package.json b/package.json
index 12f31b4a..84e235a7 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@mui/joy": "^5.0.0-alpha.76",
     "@mui/material": "^5.12.1",
     "@radixdlt/radix-engine-toolkit": "0.4.0",
+    "@radixdlt/dapps-dropdown": "^0.2.0",
     "@radixdlt/rola": "^0.3.1-rcnet-v3.1.1",
     "@types/elliptic": "^6.4.14",
     "@types/jest": "^29.4.0",