diff --git a/.github/workflows/github_action.yml b/.github/workflows/github_action.yml
deleted file mode 100644
index f1f8ef00..00000000
--- a/.github/workflows/github_action.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Develop CI/CD
-on:
-  push:
-    branches:
-      - dev
-jobs:
-  develop-ci:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [14.x]
-    steps:
-      - name: checkout
-        uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Remove dependencies
-        run: rm -rf package-lock.json node_modules
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build Dapp
-        run: npm run build:xdai
diff --git a/.github/workflows/preview-deploy-cleanup.yml b/.github/workflows/preview-deploy-cleanup.yml
new file mode 100644
index 00000000..0a67cf51
--- /dev/null
+++ b/.github/workflows/preview-deploy-cleanup.yml
@@ -0,0 +1,20 @@
+name: IPFS Preview Deploy - Cleanup
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  cleanup:
+    name: Remove test environment deployment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Inject slug variables
+        uses: rlespinasse/github-slug-action@3.5.1
+
+      - name: Mark deployment as deactivated
+        uses: bobheadxi/deployments@v0.6.0
+        with:
+          step: deactivate-env
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: ${{ env.GITHUB_HEAD_REF_SLUG_URL }}
diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml
new file mode 100644
index 00000000..4edf4244
--- /dev/null
+++ b/.github/workflows/preview-deploy.yml
@@ -0,0 +1,61 @@
+name: IPFS Preview Deploy
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  develop-ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - name: Inject slug variables
+        uses: rlespinasse/github-slug-action@3.5.1
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Start Deployment
+        uses: bobheadxi/deployments@v0.6.0
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: ${{ env.GITHUB_HEAD_REF_SLUG_URL || env.GITHUB_REF_SLUG_URL }}
+          ref: ${{ github.head_ref }}
+
+      - name: Remove dependencies
+        run: rm -rf package-lock.json node_modules
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Dapp
+        run: npm run build:xdai
+
+      - name: Deploy to IPFS
+        uses: web3-storage/add-to-web3@v1
+        id: web3
+        with:
+          web3_token: ${{ secrets.WEB3_STORAGE_TOKEN }}
+          path_to_add: 'build'
+
+      - name: Update Deployment Status
+        uses: bobheadxi/deployments@v0.6.0
+        if: always()
+        with:
+          step: finish
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          env_url: 'https://${{ steps.web3.outputs.cid }}.ipfs.dweb.link'
diff --git a/src/App.tsx b/src/App.tsx
index 3fdb2871..58e75fec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'
 import React, { Suspense, useEffect, useState, useCallback } from 'react'
 import styled, { ThemeProvider } from 'styled-components'
 import { ToastContainer } from 'react-toastify'
-import { BrowserRouter } from 'react-router-dom'
+import { HashRouter } from 'react-router-dom'
 import { useWeb3React } from '@web3-react/core'
 import { CookiesProvider } from 'react-cookie'
 import Axios from 'axios'
@@ -84,7 +84,7 @@ export const App = () => {
               <ThemeProvider theme={theme}>
                 <GlobalStyle />
                 <Suspense fallback={<Center minHeight="100vh">LOADING</Center>}>
-                  <BrowserRouter>
+                  <HashRouter>
                     <Container>
                       <Header />
                       <AppRouter />
@@ -109,7 +109,7 @@ export const App = () => {
                       />
                       {!isMobile && <FeedbackOverlay />}
                     </Container>
-                  </BrowserRouter>
+                  </HashRouter>
                 </Suspense>
               </ThemeProvider>
             </SanctionContext.Provider>