diff --git a/packages/demo-site/index.ejs b/packages/demo-site/index.ejs
index e1d2a81d53..8f0f165f11 100644
--- a/packages/demo-site/index.ejs
+++ b/packages/demo-site/index.ejs
@@ -28,121 +28,7 @@
     <script src="<%= CDN_URL %>/search-widget.js"></script>
     <script src="<%= CDN_URL %>/appointment-bookings.js"></script>
     <script src="<%= CDN_URL %>/viewing-booking.js"></script>
-    <script>
-      const variantDefault = {
-        // appointment-bookings's specific styles
-        dateCellHeaderBackgroundColor: '#ececec',
-        timeCellBackgroundColor: '#dfdfdf',
-        timeCellBackgroundColorHover: '#d3d3d3',
-        timeCellsContainerBackgroundColor: '#f9f9f9',
-        formLabelColor: '#737373',
-        formHrSeparatorFontColor: '#e6e6e6',
-        formButtonFontSize: '1.2rem',
-
-        // base
-        baseBackgroundColor: '#f9fbfd',
-        basefontSize: '16px',
-        basefontColor: '#12263f',
-        secondaryfontColor: '#1e2554',
-        primaryHeadingFontSize: '24px',
-        secondaryHeadingFontSize: '20px',
-        baseFontFamily: '"Roboto", sans-serif',
-        headingFontFamily: '"Open Sans", sans-serif',
-        primaryAccentColor: '#0061a8',
-        secondaryAccentColor: '#6c757d',
-        mapAccentColor: '#7bc9eb',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-      }
-
-      const variantA = {
-        baseBackgroundColor: '#fff',
-        basefontSize: '16px',
-        basefontColor: '#556986',
-        inverseFontColor: '#fff',
-        secondaryfontColor: '#95aac9',
-        primaryHeadingFontSize: '22px',
-        secondaryHeadingFontSize: '18px',
-        baseFontFamily: '"Open Sans", sans-serif',
-        headingFontFamily: '"Montserrat", sans-serif',
-        primaryAccentColor: '#887e96',
-        secondaryAccentColor: '#7d9d88',
-        mapAccentColor: '',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const variantB = {
-        baseBackgroundColor: '#f9fbfd',
-        basefontSize: '14px',
-        basefontColor: '#12263f',
-        inverseFontColor: '#f9fbfd',
-        secondaryfontColor: '#1e2554',
-        primaryHeadingFontSize: '24px',
-        secondaryHeadingFontSize: '20px',
-        baseFontFamily: '"Roboto", sans-serif',
-        headingFontFamily: '"Open Sans", sans-serif',
-        primaryAccentColor: '#0061a8',
-        secondaryAccentColor: '#1e2554',
-        mapAccentColor: '#7bc9eb',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const variantC = {
-        baseBackgroundColor: '#4C566A',
-        basefontSize: '14px',
-        basefontColor: '#fff',
-        inverseFontColor: '#4C566A',
-        secondaryfontColor: '#88C0D0',
-        primaryHeadingFontSize: '28px',
-        secondaryHeadingFontSize: '24px',
-        baseFontFamily: '"Open Sans", sans-serif',
-        headingFontFamily: '"Roboto Slab", serif',
-        primaryAccentColor: '#A3BE8C',
-        secondaryAccentColor: '##88C0D0',
-        mapAccentColor: '#8FBCBB',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const params = new URLSearchParams(window.location.search)
-
-      const variant = params.get('variant')
-
-      switch (variant) {
-        case 'A':
-          window.theme = variantA
-          break
-        case 'B':
-          window.theme = variantB
-          break
-        case 'C':
-          window.theme = variantC
-          break
-        default:
-          window.theme = variantDefault
-      }
-    </script>
+    <script src="<%= CDN_URL %>/search-widget-theme.js"></script>
     <script>
       ReapitSearchWidgetComponent &&
         new ReapitSearchWidgetComponent({
@@ -160,4 +46,4 @@
         })
     </script>
   </body>
-  </html>
+</html>
diff --git a/packages/web-components/src/scripts/build-prod.js b/packages/web-components/src/scripts/build-prod.js
index f5391dd23b..f3645e7093 100644
--- a/packages/web-components/src/scripts/build-prod.js
+++ b/packages/web-components/src/scripts/build-prod.js
@@ -1,4 +1,29 @@
 #!/usr/bin/env node
+const path = require('path')
+const { runCommand } = require('../../../../scripts/release/utils')
+
+const releaseDevThemes = () => {
+  try {
+    const packageName = 'web-components'
+    const bucketName = 'reapit-web-components'
+
+    const themesDistPath = path.resolve(__dirname, '../../', 'packages', packageName, 'public', 'themes')
+    // Copy new version to the bucket
+    runCommand('aws', [
+      's3',
+      'cp',
+      themesDistPath,
+      `s3://${bucketName}`,
+      '--grants',
+      'read=uri=http://acs.amazonaws.com/groups/global/AllUsers',
+      '--recursive',
+    ])
+  } catch (err) {
+    console.error(err)
+    throw new Error(err)
+  }
+}
+
 return (() => {
   const { execSync } = require('child_process')
   const { setEnv } = require('./get-env')
@@ -8,7 +33,7 @@ return (() => {
   }
   setEnv()
 
-  const clearPublic = 'rimraf ./public/dist'
+  const clearPublic = 'rimraf ./public/dist && rimraf ./public/themes'
   execSync(clearPublic, opts)
 
   packages.forEach(package => {
@@ -20,5 +45,8 @@ return (() => {
       process.exit(1)
     }
   })
+  // the pull request is WIP so temporary
+  // releaseDevThemes()
+
   process.exit(0)
 })()
diff --git a/packages/web-components/src/scripts/rollup.config.search-widget.js b/packages/web-components/src/scripts/rollup.config.search-widget.js
index 40e5777b56..e360405fe2 100644
--- a/packages/web-components/src/scripts/rollup.config.search-widget.js
+++ b/packages/web-components/src/scripts/rollup.config.search-widget.js
@@ -6,7 +6,7 @@ import path from 'path'
 const config = require(path.resolve(__dirname, '../..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
-export default {
+const widgetConfig = {
   ...baseConfig,
   input: 'src/search-widget/client/core/index.ts',
   output: {
@@ -33,3 +33,17 @@ export default {
     ...baseConfig.plugins,
   ],
 }
+
+const themeConfig = {
+  ...baseConfig,
+  input: 'src/common/styles/__themes__/search-widget.js',
+  output: {
+    sourcemap: !production,
+    format: 'iife',
+    name: 'theme',
+    file: './public/themes/search-widget-theme.js',
+  },
+  plugins: [...baseConfig.plugins],
+}
+
+export default [widgetConfig, themeConfig]