diff --git a/client/craco.config.js b/client/craco.config.js
index 26baf618b..f7164acd5 100644
--- a/client/craco.config.js
+++ b/client/craco.config.js
@@ -10,6 +10,7 @@ const {defaultAlgorithm, defaultSeed} = theme;
 const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
 
+// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
 
 module.exports = {
     plugins: [
@@ -33,29 +34,7 @@ module.exports = {
             options: {
                 lessLoaderOptions: {
                     lessOptions: {
-                        modifyVars: {
-                            ...v4Token,
-                            // TODO: This will no longer work in AntD 5.0
-                            ...(process.env.NODE_ENV === "development"
-                                ? {"colorPrimary": "#a51d1d"}
-                                : {
-                                    //"@primary-color": "#1DA57A"
-                                }),
-                            // "@primary-color": " #1890ff", // primary color for all components
-                            // "@link-color": "#1890ff", // link color
-                            // "@success-color": "#52c41a", // success state color
-                            // "@warning-color": "#faad14", // warning state color
-                            // "@error-color": "#f5222d", // error state color
-                            // "@font-size-base": "14px", // major text font size
-                            // " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
-                            // "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
-                            // "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
-                            // "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
-                            // "@border-radius-base": "2px", // major border radius
-                            // "@border-color-base": "#d9d9d9", // major border color
-                            // "@box-shadow-base":
-                            //   "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
-                        },
+                        modifyVars: {...v4Token},
                         javascriptEnabled: true,
                     },
                 },
diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx
index 31d86fd5f..2b756f2a9 100644
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -1,45 +1,50 @@
-import { ApolloProvider } from "@apollo/client";
-import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
-import { ConfigProvider } from "antd";
+import {ApolloProvider} from "@apollo/client";
+import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
+import {ConfigProvider} from "antd";
 import enLocale from "antd/es/locale/en_US";
 import dayjs from "../utils/day";
 import 'dayjs/locale/en';
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 
+import themeProvider from "./themeProvider";
+
 dayjs.locale("en");
 
-export const factory = SplitSdk({
-  core: {
-    authorizationKey: process.env.REACT_APP_SPLIT_API,
-    key: "anon",
-  },
-});
+const config = {
+    core: {
+        authorizationKey: process.env.REACT_APP_SPLIT_API,
+        key: "anon",
+    },
+};
+export const factory = SplitSdk(config);
+
 
 export default function AppContainer() {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
-  return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        //componentSize="small"
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" }),
-          },
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactory factory={factory}>
-          <App />
-        </SplitFactory>
-      </ConfigProvider>
-    </ApolloProvider>
-  );
+    return (
+        <ApolloProvider client={client}>
+            <ConfigProvider
+                //componentSize="small"
+                input={{autoComplete: "new-password"}}
+                locale={enLocale}
+                theme={themeProvider}
+                form={{
+                    validateMessages: {
+                        // eslint-disable-next-line no-template-curly-in-string
+                        required: t("general.validation.required", {label: "${label}"}),
+                    },
+                }}
+            >
+                <GlobalLoadingBar/>
+                <SplitFactoryProvider factory={factory}>
+                    <App/>
+                </SplitFactoryProvider>
+            </ConfigProvider>
+        </ApolloProvider>
+    );
 }
diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss
index 63358885a..8eab784c9 100644
--- a/client/src/App/App.styles.scss
+++ b/client/src/App/App.styles.scss
@@ -5,10 +5,6 @@
   border-bottom: 1px solid #74695c !important;
 }
 
-.ant-menu-dark .ant-menu-item:hover {
-  background-color: #1890ff !important;
-}
-
 .imex-table-header {
   display: flex;
   flex-wrap: wrap;
diff --git a/client/src/App/themeProvider.js b/client/src/App/themeProvider.js
new file mode 100644
index 000000000..9bf301d61
--- /dev/null
+++ b/client/src/App/themeProvider.js
@@ -0,0 +1,46 @@
+import {defaultsDeep} from "lodash";
+
+/**
+ * Default theme
+ * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
+ */
+const defaultTheme = {
+    components: {
+        Menu: {
+            darkItemHoverBg: '#1677ff',
+            itemHoverBg: '#1677ff',
+            horizontalItemHoverBg: '#1677ff',
+        }
+    },
+    token: {
+        colorPrimary: '#1677ff'
+    }
+};
+
+/**
+ * Development theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const devTheme = {
+    components: {
+        Menu: {
+            darkItemHoverBg: '#a51d1d',
+            itemHoverBg: '#a51d1d',
+            horizontalItemHoverBg: '#a51d1d',
+        }
+    },
+    token: {
+        colorPrimary: '#a51d1d'
+    }
+};
+
+/**
+ * Production theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const prodTheme = {};
+
+const theme = process.env.NODE_ENV === "development" ? devTheme
+    : prodTheme;
+
+export default defaultsDeep(theme, defaultTheme);
\ No newline at end of file