diff --git a/js/packages/web/next.config.js b/js/packages/web/next.config.js
index 4d6630f..6588f22 100644
--- a/js/packages/web/next.config.js
+++ b/js/packages/web/next.config.js
@@ -5,6 +5,9 @@ const dotenvLoad = require('dotenv-load');
 
 dotenvLoad();
 
+const debug = process.env.NODE_ENV !== 'production';
+const assetPrefix = !debug ? '/metaplex/' : '';
+
 const plugins = [
   nextEnv({
     publicPrefix: 'REACT_APP_',
@@ -17,6 +20,7 @@ const plugins = [
           modifyVars: {
             '@primary-color': '#768BF9',
             '@text-color': 'rgba(255, 255, 255)',
+            '@assetPrefix': assetPrefix || "''",
           },
           javascriptEnabled: true,
         },
@@ -26,6 +30,7 @@ const plugins = [
 ];
 
 module.exports = withPlugins(plugins, {
+  assetPrefix,
   reactStrictMode: true,
   eslint: {
     ignoreDuringBuilds: true,
diff --git a/js/packages/web/package.json b/js/packages/web/package.json
index 4580d61..8d8a588 100644
--- a/js/packages/web/package.json
+++ b/js/packages/web/package.json
@@ -45,12 +45,12 @@
   "scripts": {
     "prestart": "npm-link-shared ../common/node_modules/ . react",
     "start": "next dev",
-    "build": "next build  & yarn export",
-    "export": "next export -o ../../build/web",
+    "build": "next build && yarn export",
+    "export": "next export -o ../../build/web && touch ../../build/web/.nojekyll",
     "start:prod": "next start",
     "test": "jest",
     "deploy:ar": "arweave deploy-dir  ../../build/web --key-file ",
-    "deploy": "gh-pages -d ../../build/web --repo https://github.com/metaplex-foundation/metaplex",
+    "deploy": "gh-pages -d ../../build/web --repo https://github.com/metaplex-foundation/metaplex -t true",
     "format:fix": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|md)\""
   },
   "eslintConfig": {
diff --git a/js/packages/web/src/fonts.less b/js/packages/web/src/fonts.less
index 51e3e9d..88a43c4 100644
--- a/js/packages/web/src/fonts.less
+++ b/js/packages/web/src/fonts.less
@@ -10,10 +10,12 @@
         License: 2105-CXPNNW
 */
 
+@assetPrefix: '';
+
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-SuperItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-SuperItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-SuperItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-SuperItalic-Web.woff") format('woff');
   font-weight: 900;
   font-style: italic;
   font-stretch: normal;
@@ -28,8 +30,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Super-Web.woff2') format('woff2'),
-    url('/font/Graphik-Super-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Super-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Super-Web.woff") format('woff');
   font-weight: 900;
   font-style: normal;
   font-stretch: normal;
@@ -44,8 +46,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-BlackItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-BlackItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-BlackItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-BlackItalic-Web.woff") format('woff');
   font-weight: 800;
   font-style: italic;
   font-stretch: normal;
@@ -60,8 +62,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Black-Web.woff2') format('woff2'),
-    url('/font/Graphik-Black-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Black-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Black-Web.woff") format('woff');
   font-weight: 800;
   font-style: normal;
   font-stretch: normal;
@@ -76,8 +78,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-BoldItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-BoldItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-BoldItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-BoldItalic-Web.woff") format('woff');
   font-weight: 700;
   font-style: italic;
   font-stretch: normal;
@@ -92,8 +94,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Bold-Web.woff2') format('woff2'),
-    url('/font/Graphik-Bold-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Bold-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Bold-Web.woff") format('woff');
   font-weight: 700;
   font-style: normal;
   font-stretch: normal;
@@ -108,8 +110,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-SemiboldItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-SemiboldItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-SemiboldItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-SemiboldItalic-Web.woff") format('woff');
   font-weight: 600;
   font-style: italic;
   font-stretch: normal;
@@ -124,8 +126,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Semibold-Web.woff2') format('woff2'),
-    url('/font/Graphik-Semibold-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Semibold-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Semibold-Web.woff") format('woff');
   font-weight: 600;
   font-style: normal;
   font-stretch: normal;
@@ -140,8 +142,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-MediumItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-MediumItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-MediumItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-MediumItalic-Web.woff") format('woff');
   font-weight: 500;
   font-style: italic;
   font-stretch: normal;
@@ -156,8 +158,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Medium-Web.woff2') format('woff2'),
-    url('/font/Graphik-Medium-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Medium-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Medium-Web.woff") format('woff');
   font-weight: 500;
   font-style: normal;
   font-stretch: normal;
@@ -172,8 +174,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-RegularItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-RegularItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-RegularItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-RegularItalic-Web.woff") format('woff');
   font-weight: 400;
   font-style: italic;
   font-stretch: normal;
@@ -188,8 +190,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Regular-Web.woff2') format('woff2'),
-    url('/font/Graphik-Regular-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Regular-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Regular-Web.woff") format('woff');
   font-weight: 400;
   font-style: normal;
   font-stretch: normal;
@@ -204,8 +206,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-LightItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-LightItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-LightItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-LightItalic-Web.woff") format('woff');
   font-weight: 300;
   font-style: italic;
   font-stretch: normal;
@@ -220,8 +222,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Light-Web.woff2') format('woff2'),
-    url('/font/Graphik-Light-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Light-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Light-Web.woff") format('woff');
   font-weight: 300;
   font-style: normal;
   font-stretch: normal;
@@ -236,8 +238,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-ExtralightItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-ExtralightItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-ExtralightItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-ExtralightItalic-Web.woff") format('woff');
   font-weight: 200;
   font-style: italic;
   font-stretch: normal;
@@ -252,8 +254,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Extralight-Web.woff2') format('woff2'),
-    url('/font/Graphik-Extralight-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Extralight-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Extralight-Web.woff") format('woff');
   font-weight: 200;
   font-style: normal;
   font-stretch: normal;
@@ -268,8 +270,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-ThinItalic-Web.woff2') format('woff2'),
-    url('/font/Graphik-ThinItalic-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-ThinItalic-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-ThinItalic-Web.woff") format('woff');
   font-weight: 100;
   font-style: italic;
   font-stretch: normal;
@@ -284,8 +286,8 @@
 
 @font-face {
   font-family: 'GraphikWeb';
-  src: url('/font/Graphik-Thin-Web.woff2') format('woff2'),
-    url('/font/Graphik-Thin-Web.woff') format('woff');
+  src: url("@{assetPrefix}/font/Graphik-Thin-Web.woff2") format('woff2'),
+    url("@{assetPrefix}/font/Graphik-Thin-Web.woff") format('woff');
   font-weight: 100;
   font-style: normal;
   font-stretch: normal;