diff --git a/.gitignore b/.gitignore
index 36bee74..14a7608 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,8 @@ __build-es
 
 **/index.js
 
+!__application/**/index.js
+
 CHANGELOG.md
+
+themePrepare_bck.js
diff --git a/__application/component/Button/Button.js b/__application/component/Button/Button.js
index d8953f6..875b8c1 100644
--- a/__application/component/Button/Button.js
+++ b/__application/component/Button/Button.js
@@ -1,55 +1,55 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import cx from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 const styles = {
-  size: { s: 'xs', m: 's', l: 's' },
-  padding: { s: [1, 2], m: [1.5, 2], l: [2, 2] },
+  "size": { "s": "xs", "m": "s", "l": "s" },
+  "padding": { "s": [1, 2], "m": [1.5, 2], "l": [2, 2] },
 
   pointerEvents(props) {
     if (props.disabled) {
-      return 'none';
+      return "none"
     }
-    return '';
+    return ""
   },
   opacity(props) {
     if (props.disabled) {
-      return '0.5';
+      return "0.5"
     }
-    return '';
+    return ""
   },
-  hover: {
+  "hover": {
     color(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color.white;
+      if (props.kind === "filled") {
+        return props.theme.color.white
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color.white;
+      if (props.kind === "outlined") {
+        return props.theme.color.white
       }
-      return '';
+      return ""
     },
     backgroundColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
+      return ""
     },
     borderColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
-    },
-  },
-};
+      return ""
+    }
+  }
+}
 
 const StyledButton = styled(
   ({
@@ -60,7 +60,7 @@ const StyledButton = styled(
     fluid,
     isLoading,
     ...props
-  }) => <button {...props} />,
+  }) => <button {...props} />
 )`
   display: inline-flex;
   align-items: center;
@@ -71,10 +71,10 @@ const StyledButton = styled(
   background-color: ${(props) => props.theme.Universal.Color[props.variant]};
   font-size: ${(props) => props.theme.Universal.FontSize[styles.size[props.size]]};
   padding: ${(props) => props.theme.Universal.PXL(styles.padding[props.size])};
-  width: ${(props) => props.fluid ? '100%' : ''};
+  width: ${(props) => props.fluid ? "100%" : ""};
   border-width: 1px;
   border-style: solid;
-  border-color: ${(props) => props.theme.Button[props.variant].borderColor};
+  border-color: ${(props) => props.theme.Universal.Color[props.variant]};
   border-radius: ${(props) => props.theme.Button.borderRadius};
   pointer-events: ${styles.pointerEvents};
   opacity: ${styles.opacity};
@@ -84,7 +84,7 @@ const StyledButton = styled(
     background-color: ${styles.hover.backgroundColor};
     border-color: ${styles.hover.borderColor};
   }
-`;
+`
 
 function Button({ label, disabled, className, onClick, spin, ...props }) {
   return (
@@ -108,31 +108,31 @@ function Button({ label, disabled, className, onClick, spin, ...props }) {
       }
       {label}
     </StyledButton>
-  );
+  )
 }
 
 Button.propTypes = {
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  fluid: PropTypes.bool,
-  disabled: PropTypes.bool,
-  spin: PropTypes.bool,
-  className: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'button']),
-  variant: PropTypes.string,
-  size: PropTypes.oneOf(['s', 'm', 'l']),
-};
+  "label": PropTypes.string,
+  "onClick": PropTypes.func,
+  "fluid": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "spin": PropTypes.bool,
+  "className": PropTypes.string,
+  "type": PropTypes.oneOf(["submit", "button"]),
+  "variant": PropTypes.string,
+  "size": PropTypes.oneOf(["s", "m", "l"])
+}
 
 Button.defaultProps = {
-  label: 'Button',
-  onClick: () => {},
-  fluid: false,
-  disabled: false,
-  spin: false,
-  className: '',
-  type: 'submit',
-  variant: 'secondary',
-  size: 'm',
-};
+  "label": "Button",
+  "onClick": () => {},
+  "fluid": false,
+  "disabled": false,
+  "spin": false,
+  "className": "",
+  "type": "submit",
+  "variant": "secondary",
+  "size": "m"
+}
 
-export default Button;
+export default Button
diff --git a/__application/component/ToggleSwitch/ToggleSwitch.js b/__application/component/ToggleSwitch/ToggleSwitch.js
new file mode 100644
index 0000000..2c117a4
--- /dev/null
+++ b/__application/component/ToggleSwitch/ToggleSwitch.js
@@ -0,0 +1,243 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+
+/*
+Toggle Switch Component
+Note: id, checked and onChange are required for ToggleSwitch component to function.
+The props name, small, disabled
+and optionLabels are optional.
+Usage: <ToggleSwitch id="id" checked={value} onChange={checked => setValue(checked)}} />
+*/
+
+const ToggleWrapper = styled.div`
+  position: relative;
+  margin-right: 10px;
+  width: ${(props) => props.small ? '40px' : '75px'};
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  text-align: left;
+
+  ${(props) => props.small && css`
+    
+      & .toggle-switch-inner:after {
+        content: "";
+        height: 20px;
+        line-height: 20px;
+      }
+  
+      & .toggle-switch-inner:before {
+        content: "";
+        height: 20px;
+        line-height: 20px;
+      }
+
+      & .toggle-switch-switch {
+          width: 16px;
+          right: 20px;
+          margin: 2px;
+      }
+  `}
+
+  // @media screen and (max-width: 991px) {
+  //   .toggle-switch {
+  //     transform: scale(0.9);
+  //  }
+  // }
+  // @media screen and (max-width: 767px) {
+  //   .toggle-switch {
+  //     transform: scale(0.825);
+  //  }
+  // }
+  // @media screen and (max-width: 575px) {
+  //   .toggle-switch {
+  //     transform: scale(0.75);
+  //  }
+  // }
+`;
+
+const StyledCheckBox = styled.input.attrs({ type: 'checkbox' })`
+  display: none;
+  &:checked {
+  + {
+    .toggle-switch-label {
+      .toggle-switch-inner {
+        margin-left: 0;
+      }
+      .toggle-switch-switch {
+        right: 0px;
+      }
+    }
+  }
+  }
+`;
+
+const StyledLabel = styled.label`
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  border: 0 solid #bbb;
+  border-radius: 20px;
+  margin: 0;
+
+  &:focus {
+    outline: none;
+    > span {
+      box-shadow: 0 0 2px 5px red;
+    }
+  }
+  > span {
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+
+const StyledSwitchInner = styled.span`
+  display: block;
+  width: 200%;
+  margin-left: -100%;
+  transition: margin 0.3s ease-in 0s;
+
+  &:before {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 34px;
+    padding: 0;
+    line-height: 34px;
+    font-size: 12px;
+    color: white;
+    font-weight: bold;
+    box-sizing: border-box;
+    content: attr(data-yes);
+    text-transform: uppercase;
+    padding-left: 10px;
+    background-color: #2f855a;
+    color: #fff;
+  }
+
+  &:after {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 34px;
+    padding: 0;
+    line-height: 34px;
+    font-size: 12px;
+    color: white;
+    font-weight: bold;
+    box-sizing: border-box;
+    content: attr(data-no);
+    text-transform: uppercase;
+    padding-right: 10px;
+    background-color: #bbb;
+    color: #fff;
+    text-align: right;
+  }
+  ${(props) => props.disabled && css`
+    background-color: #ddd;
+    cursor: not-allowed;
+    &:before {
+      background-color: #ddd;
+      cursor: not-allowed;
+    }
+  `}
+`;
+
+const StyledSwitchOuter = styled.span`
+  display: block;
+  width: 24px;
+  margin: 5px;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 40px;
+  border: 0 solid #bbb;
+  border-radius: 20px;
+  transition: all 0.3s ease-in 0s;
+  ${(props) => props.disabled && css`
+    background-color: #ddd;
+    cursor: not-allowed;
+    &:before {
+      background-color: #ddd;
+      cursor: not-allowed;
+    }
+  `}
+`;
+
+function ToggleSwitch({
+  id,
+  name,
+  checked,
+  onChange,
+  optionLabels,
+  small,
+  disabled,
+}) {
+  function handleKeyPress(e) {
+    if (e.keyCode !== 32) return;
+
+    e.preventDefault();
+    onChange(!checked);
+  }
+
+  return (
+    <ToggleWrapper small={small}>
+      <StyledCheckBox
+        name={name}
+        id={id}
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+      />
+      {id ? (
+        <StyledLabel
+          tabIndex={disabled ? -1 : 1}
+          onKeyDown={(e) => handleKeyPress(e)}
+          htmlFor={id}
+          className="toggle-switch-label"
+        >
+          <StyledSwitchInner
+            disabled={disabled}
+            data-yes={optionLabels[0]}
+            data-no={optionLabels[1]}
+            tabIndex={-1}
+            className="toggle-switch-inner"
+          />
+          <StyledSwitchOuter
+            tabIndex={-1}
+            disabled={disabled}
+            className="toggle-switch-switch"
+          />
+        </StyledLabel>
+      ) : null}
+    </ToggleWrapper>
+  );
+}
+
+// Set optionLabels for rendering.
+ToggleSwitch.defaultProps = {
+  optionLabels: ['Yes', 'No'],
+  name: 'switch',
+  small: false,
+  disabled: false,
+};
+
+ToggleSwitch.propTypes = {
+  id: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string,
+  optionLabels: PropTypes.array,
+  small: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default ToggleSwitch;
diff --git a/__application/component/ToggleSwitch/index.js b/__application/component/ToggleSwitch/index.js
new file mode 100644
index 0000000..3261a15
--- /dev/null
+++ b/__application/component/ToggleSwitch/index.js
@@ -0,0 +1,3 @@
+import ToggleSwitch from './ToggleSwitch/ToggleSwitch';
+
+export default ToggleSwitch;
diff --git a/__appset/configColor.js b/__appset/configColor.js
index e400d4f..0714ae6 100644
--- a/__appset/configColor.js
+++ b/__appset/configColor.js
@@ -1,15 +1,29 @@
-const color = {
-  "primary": "#00364e",
-  "secondary": "#03567b",
-
-  "white": "#ffffff",
-  "black": "#000000",
-
-  "info": "#1976d2",
-  "success": "#43a047",
-  "warning": "#ffa000",
-  "danger": "#d32f2f",
-  "orange": "#fc6027"
+const Color = {
+  "default": {
+    "bgColor": "#ffffff",
+    "color": "#000000",
+
+    "primary": "#00364e",
+    "secondary": "#03567b"
+  },
+  "dark": {
+    "bgColor": "#111111",
+    "color": "#ffffff",
+
+    "primary": "#111111",
+    "secondary": "#4d4d4d"
+  }
 }
 
-export default color
+export default window && Color[localStorage.getItem("themeType")] ? Color[localStorage.getItem("themeType")] : Color.default
+
+// "info": "#1976d2",
+// "success": "#43a047",
+// "warning": "#ffa000",
+// "danger": "#d32f2f",
+// "orange": "#fc6027"
+
+// #111
+// #1e1e1e
+// #3c3c3c
+// #4d4d4d
diff --git a/__appset/normalise.js b/__appset/normalise.js
new file mode 100644
index 0000000..5afd01b
--- /dev/null
+++ b/__appset/normalise.js
@@ -0,0 +1,25 @@
+import { createGlobalStyle } from "styled-components"
+
+const Normalise = createGlobalStyle`
+  html {
+    box-sizing: border-box;
+  }
+
+  body {
+    background: ${(props) => props.theme.Universal.Color.bgColor};
+    color: ${(props) => props.theme.Universal.Color.color};
+    font-size: ${(props) => props.theme.Universal.FontSize.s};
+    font-weight: ${(props) => props.theme.Universal.FontWeight.normal};
+    font-family: ${(props) => props.theme.Universal.FontFamily.roboto}, system-ui, sans-serif;
+    margin: 0;
+  }
+
+  *,
+  *::after,
+  *::before {
+    line-height: 1.2;
+    box-sizing: inherit;
+  }
+`
+
+export default Normalise
diff --git a/__appset/themePrepare.js b/__appset/themePrepare.js
index d1bce86..3c498fd 100644
--- a/__appset/themePrepare.js
+++ b/__appset/themePrepare.js
@@ -48,16 +48,19 @@ mkdirp(createDir).then(() => {
     let appDir
     let defaultDirData
     let componentFile
+    let exportSplit
     const replaceComponentName = component.replace("config", "").replace(".js", "")
 
     if (process.env.ENVI === "local") {
       defaultDir = path.resolve(`${__dirname}`)
-      defaultDirData = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")[0].split(/=(.*)/s)[1]
+      exportSplit = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")
+      defaultDirData = exportSplit[0].split(/=(.*)/s)[1]
       appDir = `${process.env.CURRENT_APP_DIR}/${process.env.COMPONENT_CONFIG_PATH}/fe-theme`
       componentFile = `${appDir}/${component}`
     } else {
       defaultDir = path.resolve(`${__dirname}`, "../../../node_modules/fe-theme/__appset")
-      defaultDirData = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")[0].split(/=(.*)/s)[1]
+      exportSplit = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")
+      defaultDirData = exportSplit[0].split(/=(.*)/s)[1]
       appDir = path.resolve(`${__dirname}`, `../../../${process.env.COMPONENT_CONFIG_PATH}/fe-theme`)
       componentFile = path.resolve(createDir, component)
     }
@@ -92,7 +95,7 @@ export default theme;\n`
     }
 
     fs.readFile(`${appDir}/${component}`, "utf8", (err, data) => {
-      if (component === "theme.js" || component === "configPXL.js") {
+      if (component === "theme.js" || component === "configPXL.js" || component === "normalise.js") {
         console.log(componentFile, defaultDir, component)
         fs.writeFile(componentFile, fs.readFileSync(`${defaultDir}/${component}`).toString(), () => {})
       } else {
@@ -102,10 +105,10 @@ export default theme;\n`
           const userAppConfig = data.split("export")[0].split(/=(.*)/s)[1]
           componentContent = `/* eslint-disable */
 const ${replaceComponentName} = ${JSON.stringify(mergeObj(JSON.parse(defaultDirData), JSON.parse(userAppConfig)), null, "\t")}
-\nexport default ${replaceComponentName};\n`
+\nexport${exportSplit[1]}\n`
         } else {
           componentContent = `/* eslint-disable */
-const ${replaceComponentName} =${defaultDirData}export default ${replaceComponentName};\n`
+const ${replaceComponentName} =${defaultDirData}export${exportSplit[1]}\n`
         }
 
         fs.writeFile(componentFile, componentContent, (writeFileErr) => {
diff --git a/package-lock.json b/package-lock.json
index 692f836..b6ea3f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
         "classnames": "^2.5.1",
         "lodash.merge": "^4.6.2",
         "mkdirp": "^3.0.1",
-        "scheduler": "^0.23.0",
         "stylis": "^4.3.1"
       },
       "devDependencies": {
@@ -22093,6 +22092,7 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
diff --git a/package.json b/package.json
index 4f65070..684b700 100644
--- a/package.json
+++ b/package.json
@@ -113,8 +113,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^6.1.6",
-    "scheduler": "^0.23.0"
+    "styled-components": "^6.1.6"
   },
   "files": [
     "__build-es/**",