diff --git a/babel.config.js b/babel.config.js
index 75a9d61d..b912d295 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -5,7 +5,8 @@ module.exports = {
       "@babel/preset-env",
       {
         targets: {
-          node: "current"
+          chrome: "78",
+          node: "12"
         }
       }
     ],
@@ -14,6 +15,7 @@ module.exports = {
   plugins: [
     ["@babel/plugin-proposal-class-properties", { loose: true }],
     ["@babel/plugin-transform-runtime", { loose: true }],
-    ["@babel/plugin-proposal-private-methods", { loose: true }]
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-transform-private-property-in-object", { loose: true }]
   ]
 };
diff --git a/package-lock.json b/package-lock.json
index 98372913..389c49a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "@mov-ai/mov-fe-lib-react",
-      "version": "1.1.2-24",
+      "version": "1.1.2-25",
       "license": "ISC",
       "dependencies": {
         "@babel/runtime": "7.22.15",
@@ -84,8 +84,8 @@
       },
       "peerDependencies": {
         "@material-ui/core": "^4.12.4",
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/package.json b/package.json
index 3ef3ad87..e256ce79 100644
--- a/package.json
+++ b/package.json
@@ -87,8 +87,8 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.4",
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "dependencies": {
     "@babel/runtime": "7.22.15",
diff --git a/src/Components/HOCs/withTheme.tsx b/src/Components/HOCs/withTheme.tsx
index b7573880..39bafb80 100644
--- a/src/Components/HOCs/withTheme.tsx
+++ b/src/Components/HOCs/withTheme.tsx
@@ -43,7 +43,7 @@ export default function withTheme(
   ApplicationTheme?: typeof DefaultApplicationTheme,
   getStyle?: typeof defaultGetStyle,
 ) {
-  let current = themeSub.current();
+  let current = themeSub.current(), changed = false;
 
   if (ApplicationTheme || getStyle) {
     current = {
@@ -51,14 +51,20 @@ export default function withTheme(
       ApplicationTheme: ApplicationTheme ?? current.ApplicationTheme,
       getStyle: getStyle ?? current.getStyle
     };
-    const NewApplicationTheme = createThemes(current);
+    changed = true;
+  }
+
+  if (!current.ApplicationTheme[current.themeName].breakpoints) {
     current = {
       ...current,
-      ApplicationTheme: NewApplicationTheme,
+      ApplicationTheme: createThemes(current),
     };
-    themeSub.update(current);
+    changed = true;
   }
 
+  if (changed)
+    themeSub.update(current);
+
   const StyledComponent = withStyles(getStyle ?? defaultGetStyle)(Component);
 
   return function (props: any) {
diff --git a/src/Components/VerticalBar/styles.js b/src/Components/VerticalBar/styles.js
index 865cee53..ccf5ea8e 100644
--- a/src/Components/VerticalBar/styles.js
+++ b/src/Components/VerticalBar/styles.js
@@ -6,7 +6,7 @@ export const verticalBarStyles = makeStyles(theme => ({
     height: "100%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: props => props.backgroundColor,
+    backgroundColor: theme.verticalBar?.background ?? theme.palette.background.primary,
     "& .MuiSvgIcon-root": {
       color: theme.palette.primary.main,
       fill: theme.palette.primary.main,
diff --git a/src/styles/Themes.js b/src/styles/Themes.js
index 23669b79..e7e6be26 100644
--- a/src/styles/Themes.js
+++ b/src/styles/Themes.js
@@ -7,7 +7,7 @@ const CONSTANTS = {
     textColor: "#fff",
     background: {
       primary: "#424242",
-      secondary: "#212121"
+      secondary: "#212121",
     },
     iconColor: "#fff"
   },
@@ -98,7 +98,8 @@ const Themes = {
       icon: { color: "#c6c6c6", hoverColor: "#fff" },
       table: { stripColor: "#505050" },
       verticalBar: {
-        iconColor: "#9e9e9e"
+        iconColor: "#9e9e9e",
+        background: "#2b2b2b"
       },
       overrides: {
         MuiTableCell: {
@@ -236,7 +237,8 @@ const Themes = {
         getContrastText: () => CONSTANTS.light.iconColor
       },
       verticalBar: {
-        iconColor: "#616161"
+        iconColor: "#616161",
+        background: "#cccccc"
       },
       overrides: {
         MuiTableCell: {