diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..fd2fa8ec
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+API_URL=
\ No newline at end of file
diff --git a/.gitmodules b/.gitmodules
index da64056a..59e28ea8 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,4 +4,10 @@
 [submodule "protobufs"]
 	path = protobufs
 	url = https://github.com/meshtastic/meshtastic-protobufs/
-s
\ No newline at end of file
+s
+[submodule "public/design"]
+	path = public/design
+	url = https://github.com/meshtastic/meshtastic-design/
+[submodule "static/design"]
+	path = static/design
+	url = https://github.com/meshtastic/meshtastic-design/
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5102a3f9..7555a13d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -8,7 +8,7 @@ const config = {
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/meshtastic-design/web/favicon.ico",
+  favicon: "design/web/favicon.ico",
   organizationName: "meshtastic",
   projectName: "meshtastic",
   themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ {
@@ -28,8 +28,8 @@ const config = {
       hideOnScroll: true,
       logo: {
         alt: "Meshtastic Logo",
-        src: "img/meshtastic-design/logo/svg/Mesh_Logo_Black.svg",
-        srcDark: "img/meshtastic-design/logo/svg/Mesh_Logo_White.svg",
+        src: "design/logo/svg/Mesh_Logo_Black.svg",
+        srcDark: "design/logo/svg/Mesh_Logo_White.svg",
       },
       items: [
         {
@@ -128,7 +128,7 @@ const config = {
       },
     ],
   ],
-  plugins: ["@docusaurus/plugin-ideal-image"],
+  plugins: ["@docusaurus/plugin-ideal-image", "docusaurus2-dotenv"],
 };
 
 module.exports = config;
diff --git a/package.json b/package.json
index 0a30b9be..22837513 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@docusaurus/plugin-ideal-image": "^2.0.0-beta.14",
     "@docusaurus/preset-classic": "^2.0.0-beta.14",
     "@mdx-js/react": "^1.6.22",
+    "docusaurus2-dotenv": "^1.4.0",
     "esp-web-flasher": "^4.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/protobufs b/protobufs
index 13fb87d4..c52c8ef9 160000
--- a/protobufs
+++ b/protobufs
@@ -1 +1 @@
-Subproject commit 13fb87d4e037ee8e77945b5b38881dfa4ca8d898
+Subproject commit c52c8ef99ead88a5edb73891b33247c54d37cb28
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c2814e4d..8aac78bc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -100,9 +100,7 @@ function Home() {
         <meta property="og:title" content="Meshtastic" />
         <meta
           property="og:image"
-          content={useBaseUrl(
-            "img/meshtastic-design/web/social-preview-1200x630.png"
-          )}
+          content={useBaseUrl("design/web/social-preview-1200x630.png")}
         />
         <meta
           property="og:description"
@@ -118,7 +116,7 @@ function Home() {
               style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
               alt="Meshtastic Logo"
               className="header__logo"
-              src={useBaseUrl("img/meshtastic-design/typelogo/typelogo.svg")}
+              src={useBaseUrl("design/typelogo/typelogo.svg")}
             />
           </h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
diff --git a/src/pages/showcase/_components/Filters.tsx b/src/pages/showcase/_components/Filters.tsx
index cad38051..e199dd12 100644
--- a/src/pages/showcase/_components/Filters.tsx
+++ b/src/pages/showcase/_components/Filters.tsx
@@ -11,7 +11,7 @@ import { TagSelect } from './TagSelect';
 
 export const Filters = (): JSX.Element => {
   const { data, error } = useSWR<ShowcaseTag[]>(
-    "http://localhost:4000/showcase/tags",
+    `${process.env.API_URL}/showcase/tags`,
     fetcher
   );
   return (
diff --git a/static/design b/static/design
new file mode 160000
index 00000000..b75f60a9
--- /dev/null
+++ b/static/design
@@ -0,0 +1 @@
+Subproject commit b75f60a91abc22367ec017ab0c9eea828784a6ac
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 5102a3f9..1cd5a029 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -8,7 +8,7 @@ const config = {
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/meshtastic-design/web/favicon.ico",
+  favicon: "design/web/favicon.ico",
   organizationName: "meshtastic",
   projectName: "meshtastic",
   themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ {
@@ -28,8 +28,8 @@ const config = {
       hideOnScroll: true,
       logo: {
         alt: "Meshtastic Logo",
-        src: "img/meshtastic-design/logo/svg/Mesh_Logo_Black.svg",
-        srcDark: "img/meshtastic-design/logo/svg/Mesh_Logo_White.svg",
+        src: "design/logo/svg/Mesh_Logo_Black.svg",
+        srcDark: "design/logo/svg/Mesh_Logo_White.svg",
       },
       items: [
         {
diff --git a/yarn.lock b/yarn.lock
index 908481e2..a0e0c132 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4073,6 +4073,13 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
+docusaurus2-dotenv@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/docusaurus2-dotenv/-/docusaurus2-dotenv-1.4.0.tgz#9ab900e29de9081f9f1f28f7224ff63760385641"
+  integrity sha512-iWqem5fnBAyeBBtX75Fxp71uUAnwFaXzOmade8zAhN4vL3RG9m27sLSRwjJGVVgIkEo3esjGyCcTGTiCjfi+sg==
+  dependencies:
+    dotenv-webpack "1.7.0"
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -4174,6 +4181,25 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv-defaults@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
+  integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==
+  dependencies:
+    dotenv "^6.2.0"
+
+dotenv-webpack@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
+  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
+  dependencies:
+    dotenv-defaults "^1.0.2"
+
+dotenv@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"