diff --git a/packages/web-components/jest.config.js b/packages/web-components/jest.config.js
index 8c1c0c3f2a..8f6c0c83b9 100644
--- a/packages/web-components/jest.config.js
+++ b/packages/web-components/jest.config.js
@@ -10,12 +10,12 @@ module.exports = {
       },
     },
   },
-  setupFiles: ['<rootDir>/src/scripts/jest-setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/src/scripts'],
+  setupFiles: ['<rootDir>/scripts/jest-setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/scripts'],
   collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.svelte'],
-  coverageDirectory: './src/tests/coverage',
+  coverageDirectory: './tests/coverage',
   coveragePathIgnorePatterns: [
-    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts|src/tests|src/common/styles/__themes__)[/\\\\]',
+    '<rootDir>[/\\\\](node_modules|src/types|tests|scripts|tests|src/common/styles/__themes__)[/\\\\]',
     '__stubs__',
     '.d.ts',
   ],
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 446178ef92..d49296e09f 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -53,18 +53,18 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "build:prod": "node ./src/scripts/build-prod.js",
+    "build:prod": "node ./scripts/build-prod.js",
     "start:server": "serverless offline --out public/dist --stage local",
-    "start:dev": "node ./src/scripts/start-dev.js",
+    "start:dev": "node ./scripts/start-dev.js",
     "test:dev": "cross-env TZ=UTC jest --watch --color",
     "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js,svelte src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js,svelte src --fix",
     "fetch-config": "yarn config-manager fetchConfig web-components",
-    "build:serverless": "serverless webpack --out dist --stage dev",
-    "release:server:dev": "serverless deploy --stage dev",
+    "build:serverless": "node ./scripts/build-serverless.js",
+    "release:server:dev": "node ./scripts/release-serverless.js",
     "release:server:prod": "node ../../scripts/release/release-serverless.js web-components",
-    "release:npm:prod": "node ../../scripts/release/release-npm.js elements --skip-edit-release-note",
+    "release:npm:prod": "node ../../scripts/release/release-npm.js web-components --skip-edit-release-note",
     "release:client:dev": "node ../../scripts/release/release-dev.js web-components reapit-web-components",
     "release:client:prod": "node ../../scripts/release/release-prod.js web-components reapit-web-components",
     "release:dev": "yarn release:server:dev && yarn release:client:dev",
diff --git a/packages/web-components/src/scripts/README.md b/packages/web-components/scripts/README.md
similarity index 100%
rename from packages/web-components/src/scripts/README.md
rename to packages/web-components/scripts/README.md
diff --git a/packages/web-components/src/scripts/build-prod.js b/packages/web-components/scripts/build-prod.js
similarity index 92%
rename from packages/web-components/src/scripts/build-prod.js
rename to packages/web-components/scripts/build-prod.js
index 38d9bb69ed..5afd7459d4 100644
--- a/packages/web-components/src/scripts/build-prod.js
+++ b/packages/web-components/scripts/build-prod.js
@@ -10,15 +10,15 @@ const minifyCode = require('./minify-code')
 // have to create it first using mkdirp (mkdir with cursive)
 const mkdirp = require('mkdirp')
 
-const cjsIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/cjs')
+const cjsIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/cjs')
 const cjsIndexFilePath = path.resolve(cjsIndexFolderPath, './index.js')
 const cjsIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.cjs.ejs')
 
-const esmIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/esm')
+const esmIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/esm')
 const esmIndexFilePath = path.resolve(esmIndexFolderPath, './index.js')
 const esmIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.esm.ejs')
 
-const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/types')
+const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/types')
 const tsDeclarationIndexFilePath = path.resolve(tsDeclarationIndexFolderPath, './index.d.ts')
 const tsDeclarationIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.d.ts.ejs')
 
@@ -68,7 +68,7 @@ return (async () => {
     const buildPackageFn = () =>
       new Promise((resolve, reject) => {
         {
-          const clientBuildScriptPath = `./src/scripts/rollup.config.${rollUpPackageName}.js`
+          const clientBuildScriptPath = `./scripts/rollup.config.${rollUpPackageName}.js`
           const spawnObject = spawn('rollup', ['-c', clientBuildScriptPath], {
             stdio: 'inherit',
           })
diff --git a/packages/web-components/scripts/build-serverless.js b/packages/web-components/scripts/build-serverless.js
new file mode 100644
index 0000000000..c5b2b5a5f6
--- /dev/null
+++ b/packages/web-components/scripts/build-serverless.js
@@ -0,0 +1,31 @@
+const yargs = require('yargs')
+const { spawn } = require('child_process')
+
+const stage = yargs.argv.stage
+
+// relative to the root of web-components package
+const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml']
+
+const buildServerlessList = () => {
+  listServerlessYmlFiles.forEach(file => {
+    const build = spawn('serverless', ['webpack', '--config', file, '--out', 'dist', '--stage', stage])
+    build.stdout.on('data', function(data) {
+      console.info('stdout: ' + data.toString())
+    })
+
+    build.stderr.on('data', function(data) {
+      console.error('stderr: ' + data.toString())
+    })
+
+    build.on('exit', function(code) {
+      console.info(`Building ${file} exited with code ${code.toString()}`)
+    })
+
+    build.on('error', function(err) {
+      console.error(`An error happened \n${err}`)
+      process.exit(1)
+    })
+  })
+}
+
+buildServerlessList()
diff --git a/packages/web-components/src/scripts/format-code.js b/packages/web-components/scripts/format-code.js
similarity index 76%
rename from packages/web-components/src/scripts/format-code.js
rename to packages/web-components/scripts/format-code.js
index b4ac057182..547e857f4f 100644
--- a/packages/web-components/src/scripts/format-code.js
+++ b/packages/web-components/scripts/format-code.js
@@ -1,5 +1,5 @@
 const prettier = require('prettier')
-const prettierBaseConfig = require('../../../../.prettierrc')
+const prettierBaseConfig = require('../../../.prettierrc')
 
 module.exports = content => {
   const formatContent = prettier.format(content, {
diff --git a/packages/web-components/src/scripts/generate-css-output.js b/packages/web-components/scripts/generate-css-output.js
similarity index 50%
rename from packages/web-components/src/scripts/generate-css-output.js
rename to packages/web-components/scripts/generate-css-output.js
index 21d278b136..d67924625b 100644
--- a/packages/web-components/src/scripts/generate-css-output.js
+++ b/packages/web-components/scripts/generate-css-output.js
@@ -1,9 +1,9 @@
 const path = require('path')
 
 const generateCssOutput = ({ css, fileName, production }) => {
-  css.write(path.resolve(__dirname, `../../public/dist/${fileName}`))
+  css.write(path.resolve(__dirname, `../public/dist/${fileName}`))
   if (production) {
-    css.write(path.resolve(__dirname, `../../public/dist-npm/css/${fileName}`))
+    css.write(path.resolve(__dirname, `../public/dist-npm/css/${fileName}`))
   }
 }
 
diff --git a/packages/web-components/src/scripts/generate-rollup-output.js b/packages/web-components/scripts/generate-rollup-output.js
similarity index 100%
rename from packages/web-components/src/scripts/generate-rollup-output.js
rename to packages/web-components/scripts/generate-rollup-output.js
diff --git a/packages/web-components/src/scripts/get-env.js b/packages/web-components/scripts/get-env.js
similarity index 74%
rename from packages/web-components/src/scripts/get-env.js
rename to packages/web-components/scripts/get-env.js
index fc3c37bf6c..d78528088f 100644
--- a/packages/web-components/src/scripts/get-env.js
+++ b/packages/web-components/scripts/get-env.js
@@ -1,6 +1,6 @@
 const path = require('path')
 
-const reapitConfig = require(path.resolve(__dirname, '../..', 'config.json'))
+const reapitConfig = require(path.resolve(__dirname, '..', 'config.json'))
 
 const setEnv = () => {
   const configs = reapitConfig[process.env.APP_ENV]
diff --git a/packages/web-components/src/scripts/jest-setup.js b/packages/web-components/scripts/jest-setup.js
similarity index 100%
rename from packages/web-components/src/scripts/jest-setup.js
rename to packages/web-components/scripts/jest-setup.js
diff --git a/packages/web-components/src/scripts/minify-code.js b/packages/web-components/scripts/minify-code.js
similarity index 100%
rename from packages/web-components/src/scripts/minify-code.js
rename to packages/web-components/scripts/minify-code.js
diff --git a/packages/web-components/scripts/release-serverless.js b/packages/web-components/scripts/release-serverless.js
new file mode 100644
index 0000000000..1d096d5631
--- /dev/null
+++ b/packages/web-components/scripts/release-serverless.js
@@ -0,0 +1,31 @@
+const yargs = require('yargs')
+const { spawn } = require('child_process')
+
+const stage = yargs.argv.stage
+
+// relative to the root of web-components package
+const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml']
+
+const deployServerlessList = () => {
+  listServerlessYmlFiles.forEach(file => {
+    const deploy = spawn('serverless', ['deploy', '--config', file, '--stage', stage])
+    deploy.stdout.on('data', function(data) {
+      console.info('stdout: ' + data.toString())
+    })
+
+    deploy.stderr.on('data', function(data) {
+      console.error('stderr: ' + data.toString())
+    })
+
+    deploy.on('exit', function(code) {
+      console.info(`Deploying ${file} exited with code ${code.toString()}`)
+    })
+
+    deploy.on('error', function(err) {
+      console.error(`An error happened \n${err}`)
+      process.exit(1)
+    })
+  })
+}
+
+deployServerlessList()
diff --git a/packages/web-components/src/scripts/rollup.config.appointment-bookings.js b/packages/web-components/scripts/rollup.config.appointment-bookings.js
similarity index 93%
rename from packages/web-components/src/scripts/rollup.config.appointment-bookings.js
rename to packages/web-components/scripts/rollup.config.appointment-bookings.js
index 1f75efbe32..3b0f605ffa 100644
--- a/packages/web-components/src/scripts/rollup.config.appointment-bookings.js
+++ b/packages/web-components/scripts/rollup.config.appointment-bookings.js
@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 
 const production = !process.env.ROLLUP_WATCH
 
diff --git a/packages/web-components/src/scripts/rollup.config.base.js b/packages/web-components/scripts/rollup.config.base.js
similarity index 85%
rename from packages/web-components/src/scripts/rollup.config.base.js
rename to packages/web-components/scripts/rollup.config.base.js
index 8edb642784..3c85f064cc 100644
--- a/packages/web-components/src/scripts/rollup.config.base.js
+++ b/packages/web-components/scripts/rollup.config.base.js
@@ -20,12 +20,7 @@ export default {
     babel({
       extensions: ['.js', '.ts', '.mjs', '.html', '.svelte'],
       runtimeHelpers: true,
-      exclude: [
-        'node_modules/@babel/**',
-        '../../node_modules/@babel/**',
-        'node_modules/core-js/**',
-        '../../node_modules/core-js/**',
-      ],
+      include: ['src/**', 'node_modules/svelte/**'],
       presets: [
         [
           '@babel/preset-env',
diff --git a/packages/web-components/src/scripts/rollup.config.demo-site.js b/packages/web-components/scripts/rollup.config.demo-site.js
similarity index 100%
rename from packages/web-components/src/scripts/rollup.config.demo-site.js
rename to packages/web-components/scripts/rollup.config.demo-site.js
diff --git a/packages/web-components/src/scripts/rollup.config.property-detail.js b/packages/web-components/scripts/rollup.config.property-detail.js
similarity index 94%
rename from packages/web-components/src/scripts/rollup.config.property-detail.js
rename to packages/web-components/scripts/rollup.config.property-detail.js
index 0e6631b082..46b463356b 100644
--- a/packages/web-components/src/scripts/rollup.config.property-detail.js
+++ b/packages/web-components/scripts/rollup.config.property-detail.js
@@ -7,7 +7,7 @@ import generateCssOutput from './generate-css-output'
 import themesConfiguration from './rollup.config.themes.js'
 import { baseConfigurationWithoutTheme as viewBookinConfiguration } from './rollup.config.viewing-booking.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {
diff --git a/packages/web-components/src/scripts/rollup.config.search-widget.js b/packages/web-components/scripts/rollup.config.search-widget.js
similarity index 95%
rename from packages/web-components/src/scripts/rollup.config.search-widget.js
rename to packages/web-components/scripts/rollup.config.search-widget.js
index adedfd6587..89a30f5ac9 100644
--- a/packages/web-components/src/scripts/rollup.config.search-widget.js
+++ b/packages/web-components/scripts/rollup.config.search-widget.js
@@ -6,7 +6,7 @@ import path from 'path'
 import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 // search-widget is depend on property detail
diff --git a/packages/web-components/src/scripts/rollup.config.themes.js b/packages/web-components/scripts/rollup.config.themes.js
similarity index 100%
rename from packages/web-components/src/scripts/rollup.config.themes.js
rename to packages/web-components/scripts/rollup.config.themes.js
diff --git a/packages/web-components/src/scripts/rollup.config.viewing-booking.js b/packages/web-components/scripts/rollup.config.viewing-booking.js
similarity index 93%
rename from packages/web-components/src/scripts/rollup.config.viewing-booking.js
rename to packages/web-components/scripts/rollup.config.viewing-booking.js
index ac379d3c55..846e90761d 100644
--- a/packages/web-components/src/scripts/rollup.config.viewing-booking.js
+++ b/packages/web-components/scripts/rollup.config.viewing-booking.js
@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {
diff --git a/packages/web-components/src/scripts/start-dev.js b/packages/web-components/scripts/start-dev.js
similarity index 78%
rename from packages/web-components/src/scripts/start-dev.js
rename to packages/web-components/scripts/start-dev.js
index 67202e3231..7660bfaa20 100644
--- a/packages/web-components/src/scripts/start-dev.js
+++ b/packages/web-components/scripts/start-dev.js
@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+const fs = require('fs')
+
 const getMoveHtmlScript = packageName => {
   switch (packageName) {
     case 'property-detail':
@@ -37,8 +39,13 @@ return (() => {
         moveHtml += ' &&'
       }
       // eslint-disable-next-line max-len
-      const clientScript = `rollup -w -c './src/scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
-      const serverScript = 'serverless offline --out public/dist --stage local'
+      const clientScript = `rollup -w -c './scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
+      const serverConfigFile = `src/${packageName}/server/serverless.yml`
+      const hasServer = fs.existsSync(serverConfigFile)
+      // eslint-disable-next-line max-len
+      const serverScript = hasServer
+        ? `serverless offline --config ${serverConfigFile} --out public/dist --stage local`
+        : null
       const startClientServer = getStartClientServer(packageName)
 
       const startDev = `
diff --git a/packages/web-components/src/scripts/tpls/index.cjs.ejs b/packages/web-components/scripts/tpls/index.cjs.ejs
similarity index 100%
rename from packages/web-components/src/scripts/tpls/index.cjs.ejs
rename to packages/web-components/scripts/tpls/index.cjs.ejs
diff --git a/packages/web-components/src/scripts/tpls/index.d.ts.ejs b/packages/web-components/scripts/tpls/index.d.ts.ejs
similarity index 100%
rename from packages/web-components/src/scripts/tpls/index.d.ts.ejs
rename to packages/web-components/scripts/tpls/index.d.ts.ejs
diff --git a/packages/web-components/src/scripts/tpls/index.esm.ejs b/packages/web-components/scripts/tpls/index.esm.ejs
similarity index 100%
rename from packages/web-components/src/scripts/tpls/index.esm.ejs
rename to packages/web-components/scripts/tpls/index.esm.ejs
diff --git a/packages/web-components/serverless.yml b/packages/web-components/serverless.example.yml
similarity index 100%
rename from packages/web-components/serverless.yml
rename to packages/web-components/serverless.example.yml
diff --git a/packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte b/packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte
index 61774b3908..59e93f4142 100644
--- a/packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte
+++ b/packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte
@@ -5,8 +5,9 @@
   import { resetCSS, generateThemeClasses } from '../../../common/styles'
   import { generateAppointmentBookingThemeClasses } from '../core/theme'
   import FormStep1 from './form-step1.svelte'
-  import PlannerStep2 from './planner-step2.svelte'
+  import PlannerStep2 from '../../../appointment-planner/client/components/appointment-planner.svelte'
   import BookingConfirmationStep3 from './booking-confirmation-step3.svelte'
+  import { handleSubmitFormStep2 } from '../handlers/submit-form-step2.ts'
 
   export let theme
   export let parentSelector
@@ -34,6 +35,10 @@
     e.stopPropagation()
   }
 
+  const onDateCellClick = ({ appointmentDate, appointmentTime }) => {
+    handleSubmitFormStep2(appointmentDate.format('dddd, DD MMMM'), appointmentTime, handleNextStep)
+  }
+
   const themeClasses = {
     ...generateThemeClasses(theme, parentSelector),
     ...generateAppointmentBookingThemeClasses(theme, parentSelector),
@@ -81,7 +86,7 @@
         {/if}
 
         {#if currentStep === 2}
-          <PlannerStep2 {themeClasses} {handleNextStep} />
+          <PlannerStep2 {themeClasses} {handleNextStep} handleOnClickCell={onDateCellClick} />
         {/if}
 
         {#if currentStep === 3}
diff --git a/packages/web-components/src/appointment-bookings/client/components/time-cell.svelte b/packages/web-components/src/appointment-bookings/client/components/time-cell.svelte
deleted file mode 100644
index dc88d279bf..0000000000
--- a/packages/web-components/src/appointment-bookings/client/components/time-cell.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-  import { themeStore  } from '../core/store/theme-store'
-  import { handleSubmitFormStep2 } from '../handlers/submit-form-step2.ts'
-
-  export let date
-  export let startTime = ''
-  export let handleNextStep
-
-  const onDateCellClick = () => {
-    handleSubmitFormStep2(handleNextStep, date.format('dddd, DD MMMM'), startTime)
-  }
-</script>
-
-<style>
-  .time-cell-container {
-    padding: 1em;
-    margin-bottom: 2px;
-    cursor: pointer;
-    min-height: 50px
-  }
-
-  .time-cell-container-visible {
-    visibility: visible
-  }
-
-  .time-cell-container-not-visible {
-    visibility: hidden;
-    pointer-events: none;
-  }
-</style>
-
-<div on:click={onDateCellClick} class="time-cell-container {startTime ? 'time-cell-container-visible' : 'time-cell-container-not-visible'} {$themeStore.timeCell}">
-  <div>{startTime || ''}</div>
-</div>
diff --git a/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap b/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap
index e52a13165c..91a5bed62f 100644
--- a/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/web-components/src/appointment-bookings/client/core/__tests__/__snapshots__/index.test.ts.snap
@@ -1,3 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReapitAppointmentBookingComponent should match a snapshot 1`] = `undefined`;
+exports[`ReapitAppointmentBookingComponent should match a snapshot 1`] = `
+Appointment_bookings {
+  "$$": Object {
+    "after_update": Array [],
+    "before_update": Array [],
+    "bound": Object {},
+    "callbacks": Object {},
+    "context": Map {},
+    "ctx": Array [
+      false,
+      1,
+      [Function],
+      [Function],
+      [Function],
+      [Function],
+      Object {
+        "bodyText": "css-kj8hgc",
+        "button": "css-1dv0ljc",
+        "dateCellHeader": "css-emo7go",
+        "formBlock": "css-ebxsuw",
+        "formButtonPrimary": "css-1lxnn63",
+        "formButtonSecondary": "css-rjv3cy",
+        "formError": "css-91pmmi",
+        "formHeader": "css-xk00h3",
+        "formInput": "css-l0zla6",
+        "formLabel": "css-1hy6hob",
+        "formSeparator": "css-yulbtv",
+        "globalStyles": "css-11c02ub",
+        "input": "css-90jyro",
+        "offerBanner": "css-1u7x4xu",
+        "pagination": "css-1ml0awe",
+        "paginationActive": "css-1ml0awe",
+        "primaryHeading": "css-1vpwbmy",
+        "primaryStrapline": "css-1k1azsg",
+        "resultItem": "css-hxgn9z",
+        "searchBox": "css-1kkxuu3",
+        "secondaryHeading": "css-x83nk",
+        "secondaryStrapline": "css-1ts0wow",
+        "selectedItem": "css-1uqw7mn",
+        "svgNavigation": "css-1r1r46p",
+        "timeCell": "css-5hl7fz",
+        "timeCellsContainer": "css-1fswrvx",
+      },
+      Object {
+        "baseBackgroundColor": "#f9fbfd",
+        "baseFontFamily": "\\"Roboto\\", sans-serif",
+        "basefontColor": "#12263f",
+        "basefontSize": "14px",
+        "breakPoints": Object {
+          "desktop": "",
+          "laptop": "",
+          "mobile": "",
+          "tablet": "",
+        },
+        "dateCellHeaderBackgroundColor": "#ececec",
+        "formButtonFontSize": "1.2rem",
+        "formHrSeparatorFontColor": "#e6e6e6",
+        "formLabelColor": "#737373",
+        "headingFontFamily": "\\"Open Sans\\", sans-serif",
+        "inverseFontColor": "#f9fbfd",
+        "mapAccentColor": "#7bc9eb",
+        "navigateButtonColor": "red",
+        "primaryAccentColor": "#0061a8",
+        "primaryHeadingFontSize": "24px",
+        "searchPlaceholder": "e.g. London or EC1N",
+        "secondaryAccentColor": "#1e2554",
+        "secondaryHeadingFontSize": "20px",
+        "secondaryfontColor": "#1e2554",
+        "timeCellBackgroundColor": "#dfdfdf",
+        "timeCellBackgroundColorHover": "#d3d3d3",
+        "timeCellsContainerBackgroundColor": "#f9f9f9",
+      },
+      "body",
+    ],
+    "dirty": Array [
+      -1,
+    ],
+    "fragment": Object {
+      "c": [Function],
+      "d": [Function],
+      "i": [Function],
+      "l": [Function],
+      "m": [Function],
+      "o": [Function],
+      "p": [Function],
+    },
+    "not_equal": [Function],
+    "on_destroy": Array [],
+    "on_mount": Array [],
+    "props": Object {
+      "parentSelector": 8,
+      "theme": 7,
+    },
+    "update": [Function],
+  },
+  "$capture_state": [Function],
+  "$inject_state": [Function],
+  "$set": [Function],
+}
+`;
diff --git a/packages/web-components/src/appointment-bookings/client/core/index.ts b/packages/web-components/src/appointment-bookings/client/core/index.ts
index 2b027d81fe..2bb4117a4c 100644
--- a/packages/web-components/src/appointment-bookings/client/core/index.ts
+++ b/packages/web-components/src/appointment-bookings/client/core/index.ts
@@ -15,7 +15,7 @@ export const ReapitAppointmentBookingComponent = ({
   variant,
 }: // apiKey,
 // variant,
-AppointmentBookingInitializers) => {
+AppointmentBookingInitializers) =>
   new AppointmentBooking({
     target: document.querySelector(parentSelector) || document.body,
     props: {
@@ -27,7 +27,7 @@ AppointmentBookingInitializers) => {
       parentSelector,
     },
   })
-}
+
 Object.defineProperty(window, 'ReapitAppointmentBookingComponent', {
   value: ReapitAppointmentBookingComponent,
 })
diff --git a/packages/web-components/src/appointment-bookings/client/handlers/__tests__/submit-form-step2.test.ts b/packages/web-components/src/appointment-bookings/client/handlers/__tests__/submit-form-step2.test.ts
index 798090a682..32b515271f 100644
--- a/packages/web-components/src/appointment-bookings/client/handlers/__tests__/submit-form-step2.test.ts
+++ b/packages/web-components/src/appointment-bookings/client/handlers/__tests__/submit-form-step2.test.ts
@@ -13,7 +13,7 @@ jest.mock('svelte/store', () => ({
 describe('handleSubmitFormStep2', () => {
   it('should run correctly', () => {
     const handleNextStep = jest.fn()
-    handleSubmitFormStep2(handleNextStep, mockFormValues.appointmentDate.value, mockFormValues.appointmentTime.value)
+    handleSubmitFormStep2(mockFormValues.appointmentDate.value, mockFormValues.appointmentTime.value, handleNextStep)
     expect(handleNextStep).toHaveBeenCalled()
   })
 })
diff --git a/packages/web-components/src/appointment-bookings/client/handlers/submit-form-step2.ts b/packages/web-components/src/appointment-bookings/client/handlers/submit-form-step2.ts
index 9b6f9434e2..d331f5fba9 100644
--- a/packages/web-components/src/appointment-bookings/client/handlers/submit-form-step2.ts
+++ b/packages/web-components/src/appointment-bookings/client/handlers/submit-form-step2.ts
@@ -1,6 +1,6 @@
 import { form2Store as formStore } from '../core/store/form-store'
 
-export const handleSubmitFormStep2 = (handleNextStep: () => void, date: string, time: string) => {
+export const handleSubmitFormStep2 = (date: string, time: string, handleNextStep: () => void) => {
   formStore.update(() => {
     return {
       appointmentDate: {
diff --git a/packages/web-components/src/appointment-bookings/server/index.ts b/packages/web-components/src/appointment-bookings/server/index.ts
new file mode 100644
index 0000000000..a1adc8f1d0
--- /dev/null
+++ b/packages/web-components/src/appointment-bookings/server/index.ts
@@ -0,0 +1 @@
+// appointment-bookings server goes here
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap
similarity index 98%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap
rename to packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap
index c6a4fcdf7e..4c0dcf5a42 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/planner-step2.test.ts.snap
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/appointment-planner.test.ts.snap
@@ -77,7 +77,7 @@ exports[`appointment bookings it matches a snapshot 1`] = `
     </div>
      
     <div
-      class="date-time-picker-container svelte-114k6yq"
+      class="date-time-picker-container svelte-vy6ksi"
     >
       <div>
         <div
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/date-cell.test.ts.snap b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/date-cell.test.ts.snap
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/date-cell.test.ts.snap
rename to packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/date-cell.test.ts.snap
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap
similarity index 97%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap
rename to packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap
index 1ae140e4fe..0ca04a4300 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/date-time-picker.test.ts.snap
@@ -4,7 +4,7 @@ exports[`DateTimePicker it matches a snapshot 1`] = `
 <body>
   <div>
     <div
-      class="date-time-picker-container svelte-114k6yq"
+      class="date-time-picker-container svelte-vy6ksi"
     >
       <div>
         <div
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/time-cell.test.ts.snap b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/time-cell.test.ts.snap
similarity index 69%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/time-cell.test.ts.snap
rename to packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/time-cell.test.ts.snap
index 1893b30caa..e72ec3d9b6 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/__snapshots__/time-cell.test.ts.snap
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/__snapshots__/time-cell.test.ts.snap
@@ -4,7 +4,8 @@ exports[`DateTimePicker it matches a snapshot 1`] = `
 <body>
   <div>
     <div
-      class="time-cell-container time-cell-container-visible  svelte-117k25"
+      class="time-cell-container time-cell-container-visible
+  undefined svelte-1jl2x7t"
     >
       <div>
         1570747191389
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/planner-step2.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/appointment-planner.test.ts
similarity index 86%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/planner-step2.test.ts
rename to packages/web-components/src/appointment-planner/client/components/__tests__/appointment-planner.test.ts
index 1cc13b07d8..913e8e09bd 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/planner-step2.test.ts
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/appointment-planner.test.ts
@@ -1,4 +1,4 @@
-import AppointmentBooking from '../planner-step2.svelte'
+import AppointmentBooking from '../appointment-planner.svelte'
 import '@testing-library/jest-dom/extend-expect'
 import { render } from '@testing-library/svelte'
 import MockDate from 'mockdate'
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/date-cell.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts
similarity index 84%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/date-cell.test.ts
rename to packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts
index 37a0014be7..8a2abb9c59 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/date-cell.test.ts
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/date-cell.test.ts
@@ -12,7 +12,7 @@ afterEach(() => {
 
 describe('data-cell', () => {
   it('it matches a snapshot', () => {
-    const wrapper = render(DataCell, { date: dayjs() })
+    const wrapper = render(DataCell, { date: dayjs(), themeClasses: {} })
     const { container } = wrapper
 
     expect(container).toMatchSnapshot()
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/date-time-picker.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts
similarity index 85%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/date-time-picker.test.ts
rename to packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts
index 807e40bc85..bc451e5f97 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/date-time-picker.test.ts
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/date-time-picker.test.ts
@@ -11,7 +11,7 @@ afterEach(() => {
 
 describe('DateTimePicker', () => {
   it('it matches a snapshot', () => {
-    const wrapper = render(DateTimePicker)
+    const wrapper = render(DateTimePicker, { themeClasses: {} })
     const { container } = wrapper
 
     expect(container).toMatchSnapshot()
diff --git a/packages/web-components/src/appointment-bookings/client/components/__tests__/time-cell.test.ts b/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts
similarity index 83%
rename from packages/web-components/src/appointment-bookings/client/components/__tests__/time-cell.test.ts
rename to packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts
index 832829e8bd..cc2a10bcef 100644
--- a/packages/web-components/src/appointment-bookings/client/components/__tests__/time-cell.test.ts
+++ b/packages/web-components/src/appointment-planner/client/components/__tests__/time-cell.test.ts
@@ -12,7 +12,7 @@ afterEach(() => {
 
 describe('DateTimePicker', () => {
   it('it matches a snapshot', () => {
-    const wrapper = render(TimeCell, { startTime: dayjs() })
+    const wrapper = render(TimeCell, { startTime: dayjs(), themeClasses: {} })
     const { container } = wrapper
 
     expect(container).toMatchSnapshot()
diff --git a/packages/web-components/src/appointment-bookings/client/components/planner-step2.svelte b/packages/web-components/src/appointment-planner/client/components/appointment-planner.svelte
similarity index 81%
rename from packages/web-components/src/appointment-bookings/client/components/planner-step2.svelte
rename to packages/web-components/src/appointment-planner/client/components/appointment-planner.svelte
index b653587205..18381d7466 100644
--- a/packages/web-components/src/appointment-bookings/client/components/planner-step2.svelte
+++ b/packages/web-components/src/appointment-planner/client/components/appointment-planner.svelte
@@ -6,7 +6,7 @@
 
   export let themeClasses
   export let handleNextStep
-  const { svgNavigation } = themeClasses
+  export let handleOnClickCell
 </script>
 
 <style>
@@ -31,12 +31,12 @@
 
 <div data-testid="appointment-bookings-modal-header-container" class="appointment-bookings-modal-header-container">
   <button data-testid="prev-week" on:click={weekStore.decrement}>
-    <Fa class=" {svgNavigation}" icon={faChevronLeft} />
+    <Fa class=" {themeClasses.svgNavigation}" icon={faChevronLeft} />
   </button>
   <h1 class={themeClasses.primaryHeading}>Choose an Appointment</h1>
   <button data-testid="next-week" on:click={weekStore.increment}>
-    <Fa class=" {svgNavigation}" icon={faChevronRight} />
+    <Fa class=" {themeClasses.svgNavigation}" icon={faChevronRight} />
   </button>
   <div />
 </div>
-<DateTimePicker {handleNextStep} />
+<DateTimePicker {handleNextStep} {themeClasses} {handleOnClickCell} />
diff --git a/packages/web-components/src/appointment-bookings/client/components/date-cell.svelte b/packages/web-components/src/appointment-planner/client/components/date-cell.svelte
similarity index 75%
rename from packages/web-components/src/appointment-bookings/client/components/date-cell.svelte
rename to packages/web-components/src/appointment-planner/client/components/date-cell.svelte
index 9d102817e5..75a27e0bde 100644
--- a/packages/web-components/src/appointment-bookings/client/components/date-cell.svelte
+++ b/packages/web-components/src/appointment-planner/client/components/date-cell.svelte
@@ -1,9 +1,10 @@
 <script>
   import TimeCell from './time-cell.svelte'
-  import { themeStore } from '../core/store/theme-store'
 
   export let date
   export let handleNextStep
+  export let handleOnClickCell
+  export let themeClasses
 
   // generate dummy meeting slots between 00-00 -> 10-00 - duration - on hours
   export const mockedTimes = []
@@ -35,10 +36,10 @@
 </style>
 
 <div class="date-cell-container" title="Click on the cell for more detail">
-  <div class={$themeStore.dateCellHeader}>{formatHeader(date)}</div>
-  <div class={$themeStore.timeCellsContainer}>
+  <div class={themeClasses.dateCellHeader}>{formatHeader(date)}</div>
+  <div class={themeClasses.timeCellsContainer}>
     {#each mockedTimes as startTime}
-      <TimeCell {date} {startTime} {handleNextStep} />
+      <TimeCell {themeClasses} {date} {startTime} {handleNextStep} {handleOnClickCell} />
     {/each}
   </div>
 </div>
diff --git a/packages/web-components/src/appointment-bookings/client/components/date-time-picker.svelte b/packages/web-components/src/appointment-planner/client/components/date-time-picker.svelte
similarity index 52%
rename from packages/web-components/src/appointment-bookings/client/components/date-time-picker.svelte
rename to packages/web-components/src/appointment-planner/client/components/date-time-picker.svelte
index 748cce1bf3..332ee0f96f 100644
--- a/packages/web-components/src/appointment-bookings/client/components/date-time-picker.svelte
+++ b/packages/web-components/src/appointment-planner/client/components/date-time-picker.svelte
@@ -1,19 +1,22 @@
 <script>
   import { derrivedDayOfWeek } from '../core/store/week-store'
   import DateCell from './date-cell.svelte'
+
   export let handleNextStep
+  export let themeClasses
+  export let handleOnClickCell
 </script>
 
 <style>
-.date-time-picker-container {
-  display: flex;
-}
+  .date-time-picker-container {
+    display: flex;
+  }
 </style>
 
 <div class="date-time-picker-container">
-  {#each $derrivedDayOfWeek as date }
+  {#each $derrivedDayOfWeek as date}
     <div>
-      <DateCell {date} {handleNextStep}/>
+      <DateCell {themeClasses} {date} {handleNextStep} {handleOnClickCell} />
     </div>
   {/each}
 </div>
diff --git a/packages/web-components/src/appointment-planner/client/components/time-cell.svelte b/packages/web-components/src/appointment-planner/client/components/time-cell.svelte
new file mode 100644
index 0000000000..14bfc1e8a2
--- /dev/null
+++ b/packages/web-components/src/appointment-planner/client/components/time-cell.svelte
@@ -0,0 +1,35 @@
+<script>
+  export let date
+  export let startTime = ''
+  export let handleOnClickCell
+  export let themeClasses
+
+  const handleTimeCellClick = () => {
+    handleOnClickCell && handleOnClickCell({ appointmentDate: date, appointmentTime: startTime })
+  }
+</script>
+
+<style>
+  .time-cell-container {
+    padding: 1em;
+    margin-bottom: 2px;
+    cursor: pointer;
+    min-height: 50px;
+  }
+
+  .time-cell-container-visible {
+    visibility: visible;
+  }
+
+  .time-cell-container-not-visible {
+    visibility: hidden;
+    pointer-events: none;
+  }
+</style>
+
+<div
+  on:click={handleTimeCellClick}
+  class="time-cell-container {startTime ? 'time-cell-container-visible' : 'time-cell-container-not-visible'}
+  {themeClasses.timeCell}">
+  <div>{startTime || ''}</div>
+</div>
diff --git a/packages/web-components/src/appointment-bookings/client/core/store/week-store/__tests__/derrived.test.ts b/packages/web-components/src/appointment-planner/client/core/store/week-store/__tests__/derrived.test.ts
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/core/store/week-store/__tests__/derrived.test.ts
rename to packages/web-components/src/appointment-planner/client/core/store/week-store/__tests__/derrived.test.ts
diff --git a/packages/web-components/src/appointment-bookings/client/core/store/week-store/__tests__/store.test.ts b/packages/web-components/src/appointment-planner/client/core/store/week-store/__tests__/store.test.ts
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/core/store/week-store/__tests__/store.test.ts
rename to packages/web-components/src/appointment-planner/client/core/store/week-store/__tests__/store.test.ts
diff --git a/packages/web-components/src/appointment-bookings/client/core/store/week-store/derrived.ts b/packages/web-components/src/appointment-planner/client/core/store/week-store/derrived.ts
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/core/store/week-store/derrived.ts
rename to packages/web-components/src/appointment-planner/client/core/store/week-store/derrived.ts
diff --git a/packages/web-components/src/appointment-bookings/client/core/store/week-store/index.ts b/packages/web-components/src/appointment-planner/client/core/store/week-store/index.ts
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/core/store/week-store/index.ts
rename to packages/web-components/src/appointment-planner/client/core/store/week-store/index.ts
diff --git a/packages/web-components/src/appointment-bookings/client/core/store/week-store/store.ts b/packages/web-components/src/appointment-planner/client/core/store/week-store/store.ts
similarity index 100%
rename from packages/web-components/src/appointment-bookings/client/core/store/week-store/store.ts
rename to packages/web-components/src/appointment-planner/client/core/store/week-store/store.ts
diff --git a/packages/web-components/src/appointment-planner/server/index.ts b/packages/web-components/src/appointment-planner/server/index.ts
new file mode 100644
index 0000000000..5e0bdd335b
--- /dev/null
+++ b/packages/web-components/src/appointment-planner/server/index.ts
@@ -0,0 +1 @@
+// appointment-planner server goes here
diff --git a/packages/web-components/src/property-detail/server/index.ts b/packages/web-components/src/property-detail/server/index.ts
new file mode 100644
index 0000000000..1b55865bfb
--- /dev/null
+++ b/packages/web-components/src/property-detail/server/index.ts
@@ -0,0 +1 @@
+// property-detail server goes here
diff --git a/packages/web-components/src/search-widget/server/serverless.yml b/packages/web-components/src/search-widget/server/serverless.yml
new file mode 100644
index 0000000000..3b428b44e9
--- /dev/null
+++ b/packages/web-components/src/search-widget/server/serverless.yml
@@ -0,0 +1,106 @@
+service: web-components.search-widget
+plugins:
+  - serverless-webpack
+  - serverless-offline
+  - serverless-plugin-ifelse
+
+custom:
+  # relative to web-components package root
+  env: ${file(./config.json)}
+  webpack:
+    webpackConfig: 'webpack.config.js'
+    includeModules: true
+    packager: 'yarn'
+    packagerOptions:
+      noFrozenLockFile: false
+    excludeFiles: src/**/*.test.ts
+    keepOutputDirectory: true
+  allowedHeaders:
+    - Content-Type
+    - X-Amz-Date
+    - Authorization
+    - X-Api-Key
+    - X-Amz-Security-Token
+    - X-Amz-User-Agent
+    - reapit-customer
+
+provider:
+  name: aws
+  runtime: nodejs10.x
+  stage: ${opt:stage, 'dev'}
+  region: eu-west-2
+  apiGateway:
+    restApiId: ${self:custom.env.GATEWAY_REST_API_ID}
+    restApiRootResourceId: ${self:custom.env.GATEWAY_REST_API_ROOT_RESOURCE_ID}
+  deploymentBucket:
+    name: web-components.search-widget.${self:provider.stage}
+    blockPublicAccess: false
+  environment:
+    NODE_ENV: ${self:custom.env.NODE_ENV}
+    APP_ENV: ${self:custom.env.APP_ENV}
+    PLATFORM_API_BASE_URL: ${self:custom.env.PLATFORM_API_BASE_URL}
+    COGNITO_CLIENT_SECRET_SEARCH_WIDGET: ${self:custom.env.COGNITO_CLIENT_SECRET_SEARCH_WIDGET}
+    COGNITO_CLIENT_ID_SEARCH_WIDGET: ${self:custom.env.COGNITO_CLIENT_ID_SEARCH_WIDGET}
+    COGNITO_OAUTH_URL: ${self:custom.env.COGNITO_OAUTH_URL}
+package:
+  individually: true
+  include:
+    - dist/**
+  exclude:
+    - package.json
+    - node_modules/**
+    - error.log
+    - info.log
+    - jest.config.js
+    - serverless.yml
+    - src/**
+    - tsconfig.json
+    - yml-helpers.js
+    - public/**
+
+functions:
+  searchWidgetHandler:
+    handler: src/search-widget/server/core/index.searchWidgetHandler
+    events:
+      - http:
+          path: properties
+          method: get
+          cors:
+            origin: '*'
+            headers: ${self:custom.allowedHeaders}
+            allowCredentials: false
+          private: true
+          request:
+            parameters:
+              headers:
+                api-version: false
+                Authorization: false
+                reapit-customer: false
+      - http:
+          path: properties/{id}
+          method: get
+          cors:
+            origin: '*'
+            headers: ${self:custom.allowedHeaders}
+            allowCredentials: false
+          private: true
+          request:
+            parameters:
+              headers:
+                api-version: false
+                Authorization: false
+                reapit-customer: false
+      - http:
+          path: propertyImages
+          method: get
+          cors:
+            origin: '*'
+            headers: ${self:custom.allowedHeaders}
+            allowCredentials: false
+          private: true
+          request:
+            parameters:
+              headers:
+                api-version: false
+                Authorization: false
+                reapit-customer: false
diff --git a/packages/web-components/src/viewing-booking/server/index.ts b/packages/web-components/src/viewing-booking/server/index.ts
new file mode 100644
index 0000000000..24f62d05f1
--- /dev/null
+++ b/packages/web-components/src/viewing-booking/server/index.ts
@@ -0,0 +1 @@
+// viewing-bookings server goes here