diff --git a/jams-react-client/src/views/Blueprint/Blueprint.js b/jams-react-client/src/views/Blueprint/Blueprint.js
index 19d9045750b266442e757124a068036a7297778e..441a2f4331ae820d9cb11ffb503c0849b816c443 100644
--- a/jams-react-client/src/views/Blueprint/Blueprint.js
+++ b/jams-react-client/src/views/Blueprint/Blueprint.js
@@ -12,8 +12,6 @@ import EditBlueprintConfiguration from "./EditBlueprintConfiguration";
 import EditBlueprintUi from "./EditBlueprintUi";
 import { PolicyDataContextProvider } from "./PolicyDataContext";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
-
 import i18next from "i18next";
 
 function TabPanel(props) {
@@ -42,10 +40,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-const a11yProps = (index) => {
+const a11yProps = (value, index) => {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 };
 
@@ -58,23 +57,25 @@ export default function Blueprint({ blueprintName }) {
 
   return (
     <div>
-      <AppBar position="static" style={{ background: infoColor[0] }}>
+      <AppBar position="static" color="primary">
         <Tabs
           value={openedTab}
           onChange={handleChange}
-          aria-label="simple tabs example"
+          aria-label="blueprint tabs"
+          textColor="secondary"
+          indicatorColor="secondary"
         >
           <Tab
             label={i18next.t("permissions", "Permissions")}
-            {...a11yProps(0)}
+            {...a11yProps(openedTab, 0)}
           />
           <Tab
             label={i18next.t("configuration", "Configuration")}
-            {...a11yProps(1)}
+            {...a11yProps(openedTab, 1)}
           />
           <Tab
             label={i18next.t("customization", "Customization")}
-            {...a11yProps(2)}
+            {...a11yProps(openedTab, 2)}
           />
         </Tabs>
       </AppBar>
diff --git a/jams-react-client/src/views/Settings/Settings.js b/jams-react-client/src/views/Settings/Settings.js
index 5df963c012e85106503e4da80fd5fb5f79537b59..b762eaf0f0ddc58850144f0fb8a425a20205aafe 100644
--- a/jams-react-client/src/views/Settings/Settings.js
+++ b/jams-react-client/src/views/Settings/Settings.js
@@ -10,7 +10,6 @@ import Tab from "@mui/material/Tab";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
 import MuiAlert from "@mui/material/Alert";
 
 import auth from "auth.js";
@@ -43,10 +42,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-function a11yProps(index) {
+function a11yProps(value, index) {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 }
 
@@ -77,16 +77,21 @@ export default function Settings() {
   } else {
     return (
       <div>
-        <AppBar position="static" style={{ background: infoColor[0] }}>
+        <AppBar position="static" color="primary">
           <Tabs
             value={value}
             onChange={handleChange}
-            aria-label="simple tabs example"
+            aria-label="settings tabs"
+            textColor="secondary"
+            indicatorColor="secondary"
           >
-            <Tab label={i18next.t("general", "General")} {...a11yProps(0)} />
+            <Tab
+              label={i18next.t("general", "General")}
+              {...a11yProps(value, 0)}
+            />
             <Tab
               label={i18next.t("subscription", "Subscription")}
-              {...a11yProps(1)}
+              {...a11yProps(value, 1)}
             />
           </Tabs>
         </AppBar>
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index ae552028bc488f753a836169abb2b4951022b39b..454ad4598fae3e959f81c3245aa7396510b66958 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/jams-react-client/src/views/UserProfile/UserProfile.js
@@ -14,7 +14,6 @@ import EditCreateUserProfile from "./EditCreateUserProfile";
 
 import Contacts from "views/Contacts/Contacts";
 
-import { infoColor } from "assets/jss/material-dashboard-react.js";
 import DisplayUserProfile from "./DisplayUserProfile";
 
 import i18next from "i18next";
@@ -45,10 +44,11 @@ TabPanel.propTypes = {
   value: PropTypes.any.isRequired,
 };
 
-function a11yProps(index) {
+function a11yProps(value, index) {
   return {
     id: `simple-tab-${index}`,
     "aria-controls": `simple-tabpanel-${index}`,
+    style: { color: index === value ? "inherit" : "#ffffff80" },
   };
 }
 
@@ -70,15 +70,26 @@ export default function UserProfile(props) {
 
   return (
     <div>
-      <AppBar position="static" style={{ background: infoColor[0] }}>
+      <AppBar position="static" color="primary">
         <Tabs
           value={value}
           onChange={handleChange}
-          aria-label="simple tabs example"
+          aria-label="user profile tabs"
+          textColor="secondary"
+          indicatorColor="secondary"
         >
-          <Tab label={i18next.t("profile", "Profile")} {...a11yProps(0)} />
-          <Tab label={i18next.t("devices", "Devices")} {...a11yProps(1)} />
-          <Tab label={i18next.t("contacts", "Contacts")} {...a11yProps(2)} />
+          <Tab
+            label={i18next.t("profile", "Profile")}
+            {...a11yProps(value, 0)}
+          />
+          <Tab
+            label={i18next.t("devices", "Devices")}
+            {...a11yProps(value, 1)}
+          />
+          <Tab
+            label={i18next.t("contacts", "Contacts")}
+            {...a11yProps(value, 2)}
+          />
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>