From a4ebf3e55839710924a97a4bdd8968e7f1724a0b Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Mon, 19 May 2025 00:04:37 +0200
Subject: [PATCH] Lightmode/Darkmode merge including many fixes since 2.0.2

---
 backend/go-app/go.mod                         |    2 +-
 frontend/public/images/icons/shuffleLogo.svg  |    5 +
 frontend/src/components/AdminNavBar.jsx       |  282 +++-
 frontend/src/components/ApiExplorer.jsx       |   82 +-
 frontend/src/components/AppAuthTab.jsx        |  120 +-
 frontend/src/components/AppCreationModal.jsx  |   38 +-
 frontend/src/components/AppModal.jsx          |   49 +-
 frontend/src/components/AppSearchButtons.jsx  |   19 +-
 frontend/src/components/AppStats.jsx          |   11 +-
 frontend/src/components/Appsearch.jsx         |   15 +-
 frontend/src/components/Billing.jsx           |  649 ++++++++-
 frontend/src/components/BillingStats.jsx      |   50 +-
 frontend/src/components/CacheView.jsx         |  101 +-
 frontend/src/components/ChatBot.jsx           |  846 ++++++++++++
 frontend/src/components/CloudSyncTab.jsx      |   49 +-
 frontend/src/components/ConfigureWorkflow.jsx |   10 +-
 frontend/src/components/EditOrgTab.jsx        |   18 +-
 frontend/src/components/EditWorkflow.jsx      |   49 +-
 frontend/src/components/EnvironmentTab.jsx    |  113 +-
 frontend/src/components/Files.jsx             |  154 ++-
 frontend/src/components/LeftSideBar.jsx       |  848 ++++++------
 frontend/src/components/LicencePopup.jsx      |   36 +-
 frontend/src/components/Navbar.jsx            |  166 ++-
 frontend/src/components/Oauth2Auth.jsx        |   13 +-
 frontend/src/components/OrgHeaderNew.jsx      |   28 +-
 .../src/components/OrgHeaderexpandedNew.jsx   |   96 +-
 frontend/src/components/OrganizationTab.jsx   |   72 +-
 frontend/src/components/ParsedAction.jsx      |  181 ++-
 frontend/src/components/Priorities.jsx        |  125 +-
 frontend/src/components/Priority.jsx          |   22 +-
 frontend/src/components/RecentWorkflow.jsx    |   13 +-
 frontend/src/components/RenderCytoscape.jsx   |   10 +-
 frontend/src/components/RuntimeDebugger.jsx   |   61 +-
 frontend/src/components/SchedulesTab.jsx      |  117 +-
 frontend/src/components/SearchData.jsx        |   50 +-
 frontend/src/components/Searchfield.jsx       |    7 +-
 .../src/components/ShuffleCodeEditor1.jsx     |   48 +-
 frontend/src/components/TenantsTab.jsx        |  131 +-
 frontend/src/components/UserManagmentTab.jsx  |  126 +-
 .../src/components/WorkflowTemplatePopup2.jsx |   24 +-
 frontend/src/components/ssoTab.jsx            |  141 +-
 frontend/src/context/ContextApi.jsx           |   74 +-
 frontend/src/defaultCytoscapeStyle.jsx        | 1181 +++++++++--------
 frontend/src/theme.jsx                        |  296 ++++-
 frontend/src/views/Admin2.jsx                 |   15 +-
 frontend/src/views/AngularWorkflow.jsx        | 1147 +++++++++-------
 frontend/src/views/ApiExplorerWrapper.jsx     |    9 +-
 frontend/src/views/AppCreator.jsx             |  312 +++--
 frontend/src/views/AppExplorer.jsx            |  156 ++-
 frontend/src/views/Apps2.jsx                  |  129 +-
 frontend/src/views/Docs.jsx                   |  116 +-
 frontend/src/views/LoginPage.jsx              |    2 +-
 frontend/src/views/RunWorkflow.jsx            |    8 +-
 frontend/src/views/SetAuthentication.jsx      |    7 +-
 frontend/src/views/SettingsPage.jsx           |   49 +-
 frontend/src/views/UpdateAuthentication.jsx   |    7 +-
 frontend/src/views/Usecases2.jsx              |   30 +-
 frontend/src/views/Workflows.jsx              |  110 ++
 frontend/src/views/Workflows2.jsx             |  267 ++--
 59 files changed, 5931 insertions(+), 2961 deletions(-)
 create mode 100755 frontend/public/images/icons/shuffleLogo.svg
 create mode 100644 frontend/src/components/ChatBot.jsx

diff --git a/backend/go-app/go.mod b/backend/go-app/go.mod
index ea02517b..6e354ef6 100644
--- a/backend/go-app/go.mod
+++ b/backend/go-app/go.mod
@@ -23,7 +23,7 @@ require (
 	github.com/h2non/filetype v1.1.3
 	github.com/satori/go.uuid v1.2.0
 	github.com/shuffle/shuffle-shared v0.8.50
-	golang.org/x/crypto v0.36.0
+	golang.org/x/crypto v0.37.0
 	google.golang.org/api v0.228.0
 	google.golang.org/grpc v1.71.1
 	gopkg.in/yaml.v3 v3.0.1
diff --git a/frontend/public/images/icons/shuffleLogo.svg b/frontend/public/images/icons/shuffleLogo.svg
new file mode 100755
index 00000000..1024dd6a
--- /dev/null
+++ b/frontend/public/images/icons/shuffleLogo.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L-1.48522e-08 13.3913L4.40052 13.3913L4.40052 4.46465L22 4.46465L22 2.44001e-08L0 0Z" fill="#FF8444"/>
+<path d="M17.5995 8.60864L17.5995 17.5353L-9.90052e-09 17.5353L-1.48522e-08 22L22 22L22 8.60864L17.5995 8.60864Z" fill="#FF8444"/>
+<path d="M13.3915 8.60864L8.60889 8.60864L8.60889 13.3913L13.3915 13.3913L13.3915 8.60864Z" fill="#FF8444"/>
+</svg>
diff --git a/frontend/src/components/AdminNavBar.jsx b/frontend/src/components/AdminNavBar.jsx
index e0faec6e..a37b8c15 100644
--- a/frontend/src/components/AdminNavBar.jsx
+++ b/frontend/src/components/AdminNavBar.jsx
@@ -19,17 +19,97 @@ import {
     FmdGoodOutlined as FmdGoodOutlinedIcon,
     GroupOutlined as GroupOutlinedIcon
 } from '@mui/icons-material';
-import theme from '../theme.jsx';
-import { Button, Tooltip } from '@mui/material';
+import theme, { getTheme } from '../theme.jsx';
+import { Button, Skeleton, Tooltip } from '@mui/material';
 import { Index } from 'react-instantsearch-dom';
 import { Context } from '../context/ContextApi.jsx';
+import { toast } from 'react-toastify';
 
 const AdminNavBar = (props) => {
     const location = useLocation();
-    const { globalUrl, userdata, isCloud, isLoaded,removeCookie,  handleStatusChange, selectedStatus, setSelectedStatus, handleEditOrg, serverside, notifications, handleGetOrg, orgId, checkLogin, setNotifications, stripeKey, setSelectedOrganization, selectedOrganization } = props;
+    const { globalUrl, userdata, isCloud,isOrgLoaded, isLoaded,removeCookie,  handleStatusChange, selectedStatus, setSelectedStatus, handleEditOrg, serverside, notifications, handleGetOrg, orgId, checkLogin, setNotifications, stripeKey, setSelectedOrganization, selectedOrganization } = props;
     const [selectedItem, setSelectedItem] = useState("Organization");
     const [isSelectedFiles, setIsSelectedFiles] = useState(true);
     const [isSelectedDataStore, setIsSelectedDataStore] = useState(true);
+    const [isIntegrationPartner, setIsIntegrationPartner] = useState(false);
+    const [isChildOrg, setIsChildOrg] = useState(false);
+    const [isGlobalUser, setIsGlobalUser] = useState(false);
+    const [visibleItems, setVisibleItems] = useState([]);
+    const [isUserDataLoaded, setIsUserDataLoaded] = useState(false);
+
+    const items = [
+        { iconSrc: <BusinessIcon />, alt: "Organization Icon", text: "Organization", component: OrganizationTab, props: { isIntegrationPartner, isChildOrg, isGlobalUser, globalUrl,removeCookie,  selectedStatus, isLoaded, setSelectedStatus, handleStatusChange, handleEditOrg, handleGetOrg, userdata, isCloud, serverside, notifications, checkLogin, setNotifications, stripeKey, setSelectedOrganization, selectedOrganization } },
+        { iconSrc: <PermIdentityIcon />, alt: "Users Icon", text: "Users", component: UserManagmentTab, props: { globalUrl, userdata, serverside, isCloud, selectedOrganization, setSelectedOrganization, handleEditOrg } },
+        { iconSrc: <HttpsOutlinedIcon />, alt: "App Auth Icon", text: "App_auth", component: AppAuthTab, props: { globalUrl, userdata, isCloud, selectedOrganization } },
+        { iconSrc: <StorageOutlinedIcon />, alt: "Datastore Icon", text: "Datastore", component: CacheView, props: { globalUrl, userdata, selectedOrganization, serverside, isSelectedDataStore, orgId , isCloud} },
+        { iconSrc: <InsertDriveFileOutlinedIcon />, alt: "Files Icon", text: "Files", component: Files, props: { isCloud, globalUrl, userdata, serverside, selectedOrganization, isSelectedFiles } },
+        { iconSrc: <AccessTimeOutlinedIcon />, alt: "Trigger Icon", text: "Triggers", component: SchedulesTab, props: { globalUrl, userdata, isCloud, serverside } },
+        { iconSrc: <FmdGoodOutlinedIcon />, alt: "Environments Icon", text: "Locations", component: EnvironmentTab, props: { globalUrl, userdata, isCloud, selectedOrganization } },
+        { iconSrc: <GroupOutlinedIcon />, alt: "Tenants Icon", text: "Tenants", component: TenantsTab, props: {isCloud, globalUrl, userdata, serverside, selectedOrganization, setSelectedOrganization, checkLogin } }
+    ];
+
+
+    useEffect(() => {
+        if (userdata && userdata?.active_org?.id?.length > 0) {
+            setIsUserDataLoaded(true);
+        }
+    }, [userdata]);
+
+
+    
+    const { themeMode, brandColor } = React.useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
+
+    const HandlePartnerChange = () => {
+        if (userdata?.id?.length > 0) {
+            const isIntegrationPartner = userdata?.org_status?.includes("integration_partner") || false;
+            setIsIntegrationPartner(isIntegrationPartner);
+            const isChildOrg = userdata?.org_status?.includes("sub_org") || false;
+            setIsChildOrg(isChildOrg);
+            const isGlobalUser = userdata?.active_org?.branding?.global_user || false;
+            setIsGlobalUser(isGlobalUser);
+        } else {
+            setIsIntegrationPartner(false);
+            setIsChildOrg(false);
+            setIsGlobalUser(false);
+        }
+    }
+
+    useEffect(() => {
+        if (userdata && userdata?.id?.length > 0) {
+            HandlePartnerChange();
+        }
+    }, [userdata]);
+
+    const HandleVisibleTabs = () => {
+        if (userdata?.id?.length > 0) {
+            if (userdata?.active_org?.role === "admin" || userdata?.support) {
+                setVisibleItems(items);
+            }else {
+                const filteredItems = items.filter(item => item.text !== "Users" && item.text !== "Files" && item.text !== "Datastore" && item.text !== "Triggers" && item.text !== "Locations");
+                setVisibleItems(filteredItems);
+            }
+        }
+    }
+
+    useEffect(() => {
+        if (isIntegrationPartner && isChildOrg && !isGlobalUser) {
+            // Filter out Users and Tenants tabs
+            if (userdata?.active_org?.role === "admin" || userdata?.support) {
+                const filteredItems = items.filter(item => 
+                    item.text !== "Users" && item.text !== "Tenants"
+                );
+                setVisibleItems(filteredItems);
+            }else {
+                const filteredItems = items.filter(item => 
+                    item.text !== "Users" && item.text !== "Tenants" && item.text !== "Files" && item.text !== "Datastore" && item.text !== "Triggers" && item.text !== "Locations"
+                );
+                setVisibleItems(filteredItems);
+            }
+        } else {
+            HandleVisibleTabs();
+        }
+    }, [isIntegrationPartner, isChildOrg, isGlobalUser, selectedOrganization, userdata]);
 
     const navigate = useNavigate();
 
@@ -52,18 +132,6 @@ const AdminNavBar = (props) => {
             setSelectedItem("Organization");
         }
     }, [location.search]);
-    
-
-    const items = [
-        { iconSrc: <BusinessIcon />, alt: "Organization Icon", text: "Organization", component: OrganizationTab, props: { globalUrl,removeCookie,  selectedStatus, isLoaded, setSelectedStatus, handleStatusChange, handleEditOrg, handleGetOrg, userdata, isCloud, serverside, notifications, checkLogin, setNotifications, stripeKey, setSelectedOrganization, selectedOrganization } },
-        { iconSrc: <PermIdentityIcon />, alt: "Users Icon", text: "Users", component: UserManagmentTab, props: { globalUrl, userdata, serverside, isCloud, selectedOrganization, setSelectedOrganization, handleEditOrg } },
-        { iconSrc: <HttpsOutlinedIcon />, alt: "App Auth Icon", text: "App_auth", component: AppAuthTab, props: { globalUrl, userdata, isCloud, selectedOrganization } },
-        { iconSrc: <StorageOutlinedIcon />, alt: "Datastore Icon", text: "Datastore", component: CacheView, props: { globalUrl, userdata, selectedOrganization, serverside, isSelectedDataStore, orgId , isCloud} },
-        { iconSrc: <InsertDriveFileOutlinedIcon />, alt: "Files Icon", text: "Files", component: Files, props: { isCloud, globalUrl, userdata, serverside, selectedOrganization, isSelectedFiles } },
-        { iconSrc: <AccessTimeOutlinedIcon />, alt: "Trigger Icon", text: "Triggers", component: SchedulesTab, props: { globalUrl, userdata, isCloud, serverside } },
-        { iconSrc: <FmdGoodOutlinedIcon />, alt: "Environments Icon", text: "Locations", component: EnvironmentTab, props: { globalUrl, userdata, isCloud, selectedOrganization } },
-        { iconSrc: <GroupOutlinedIcon />, alt: "Tenants Icon", text: "Tenants", component: TenantsTab, props: {isCloud, globalUrl, userdata, serverside, selectedOrganization, setSelectedOrganization, checkLogin } }
-    ];
 
     const setConfig = (newValue) => {
         setSelectedItem(newValue);
@@ -76,12 +144,65 @@ const AdminNavBar = (props) => {
         }
     };
 
+    useEffect(() => {
+        if (isIntegrationPartner && isChildOrg && !isGlobalUser && isOrgLoaded && isUserDataLoaded) {
+            const queryParams = new URLSearchParams(location.search);
+            const tabName = queryParams?.get('admin_tab')?.toLowerCase();
+            if (tabName === "sso" || tabName === "branding") {
+                toast.info("You are not allowed to access this tab. Please contact your admin for more information. Redirecting to Organization Configuration tab.");
+                setTimeout(() => {
+                    setSelectedItem("Organization");
+                    navigate(`?admin_tab=org_config`, { replace: true });
+                    window.location.reload();
+                }
+                , 3000);
+            }
+
+            const params = new URLSearchParams(location.search);
+            const tab = params?.get('tab')?.toLowerCase();
+            if (tab === "users" || tab === "tenants") {
+                toast.info("You are not allowed to access this tab. Please contact your admin for more information. Redirecting to Organization Configuration tab.");
+                setTimeout(() => {
+                    setSelectedItem("Organization");
+                    navigate(`?admin_tab=org_config`, { replace: true });
+                    window.location.reload();
+                }
+                , 3000);
+            }
+        } else if (userdata && isOrgLoaded && isUserDataLoaded && userdata?.active_org?.role !== "admin" && !userdata?.support) {
+            const queryParams = new URLSearchParams(location.search);
+            const tabName = queryParams?.get('admin_tab')?.toLowerCase();
+            if (tabName === "sso") {
+                toast.info("You are not allowed to access this tab. Please contact your admin for more information. Redirecting to Organization Configuration tab.");
+                setTimeout(() => {
+                    setSelectedItem("Organization");
+                    navigate(`?admin_tab=org_config`, { replace: true });
+                    window.location.reload();
+                }
+                , 3000);
+            }
+
+            const params = new URLSearchParams(location.search);
+            const tab = params?.get('tab')?.toLowerCase();
+            if (tab === "users" || tab === "locations" || tab === "environments" || tab === "files" || tab === "datastore" || tab === "triggers") {
+                toast.info("You are not allowed to access this tab. Please contact your admin for more information. Redirecting to Organization Configuration tab.");
+                setTimeout(() => {
+                    setSelectedItem("Organization");
+                    navigate(`?admin_tab=org_config`, { replace: true });
+                    window.location.reload();
+                }
+                , 3000);
+            }
+        }
+    }, [isIntegrationPartner, isChildOrg, isGlobalUser, location.search, userdata, isOrgLoaded, isUserDataLoaded]); 
+
+
     const renderComponent = () => {
-        const selectedItemData = items.find(item => item.text === selectedItem);
+        const selectedItemData = visibleItems.find(item => item.text === selectedItem);
         if (!selectedItemData) {
             setSelectedItem("Organization");
             // If no tab is specified, default to "Organization" tab
-            return <OrganizationTab globalUrl={globalUrl} removeCookie={removeCookie} selectedStatus={selectedStatus} isLoaded={isLoaded} setSelectedStatus={setSelectedStatus} handleStatusChange={handleStatusChange} handleEditOrg={handleEditOrg} handleGetOrg={handleGetOrg} userdata={userdata} isCloud={isCloud} serverside={serverside} notifications={notifications} checkLogin={checkLogin} setNotifications={setNotifications} stripeKey={stripeKey} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization}/>;
+            return <OrganizationTab isIntegrationPartner={isIntegrationPartner} isChildOrg={isChildOrg} isGlobalUser={isGlobalUser} globalUrl={globalUrl} removeCookie={removeCookie} selectedStatus={selectedStatus} isLoaded={isLoaded} setSelectedStatus={setSelectedStatus} handleStatusChange={handleStatusChange} handleEditOrg={handleEditOrg} handleGetOrg={handleGetOrg} userdata={userdata} isCloud={isCloud} serverside={serverside} notifications={notifications} checkLogin={checkLogin} setNotifications={setNotifications} stripeKey={stripeKey} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization}/>;
         };
 
         const ComponentToRender = selectedItemData.component;
@@ -97,15 +218,16 @@ const AdminNavBar = (props) => {
             : selectedOrganization?.image;
 
     return (
+        !isOrgLoaded && !isUserDataLoaded ? <Loader /> :
         <Wrapper>
             <div style={{ flexDirection: 'column', width: 220, }}>
-                <nav style={{ padding: '25px 25px 3px 25px', height: isCloud ? "calc(100% - 60px)" : "calc(100% - 30px)" , fontSize: '16px', borderTopLeftRadius: 8, borderBottomLeftRadius: 8, background: '#212121', color: '#9CA3AF' }}>
+                <nav style={{ padding: '25px 25px 3px 25px', height: isCloud ? "calc(100% - 60px)" : "calc(100% - 30px)" , fontSize: '16px', borderTopLeftRadius: 8, borderBottomLeftRadius: 8, background: theme.palette.platformColor, color: '#9CA3AF' }}>
                     <div style={{ display: 'flex', alignItems: 'center', }}>
                         <img loading="lazy" src={imageData} alt="Logo" style={{ width: '30px', borderRadius: 8, height: '30px', marginRight: '8px' }} />
                         <div style={{
                             fontFamily: theme?.typography?.fontFamily,
                             fontSize: '16px',
-                            color: "#FFFFFF",
+                            color: theme.palette.text.primary,
                             fontWeight: 400,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
@@ -114,8 +236,8 @@ const AdminNavBar = (props) => {
 							marginLeft: 5, 
                         }}>{selectedOrganization?.name}</div>
                     </div>
-                    <div style={{ borderTop: '1px solid #494949', marginTop: 23 }} />
-                    {items.map((item, index) => (
+                    <div style={{ borderTop: theme.palette.defaultBorder, marginTop: 23 }} />
+                    {visibleItems.map((item, index) => (
                         <Tooltip
                             key={index}
                             title={
@@ -132,11 +254,10 @@ const AdminNavBar = (props) => {
                                 color="primary"
                                 sx={{
                                 gap: 1,
-                                "&:hover": {
-                                    backgroundColor: "#323232 !important",
-                                },
                                 "&.MuiButton-root": {
-                                    color: selectedItem === item.text ? "#FFFFFF" : "#9E9E9E",
+                                    color: selectedItem === item.text 
+                                        ? theme.palette.text.primary 
+                                        : theme.palette.text.secondary,
                                     fontSize: 16,
                                     backgroundColor: "transparent",
                                     textTransform: "none",
@@ -149,13 +270,16 @@ const AdminNavBar = (props) => {
                                     justifyContent: "flex-start",
                                     borderLeft:
                                     selectedItem === item.text
-                                        ? "3px solid rgba(255, 132, 68, 1)"
+                                        ? `3px solid ${theme.palette.primary.main}`
                                         : "none",
                                     borderTopLeftRadius: selectedItem === item.text ? "2.5px" : null,
                                     borderBottomLeftRadius: selectedItem === item.text ? "2.5px" : null,
                                     paddingLeft: selectedItem === item.text ? "15px" : "10px",
                                     fontWeight: selectedItem === item.text ? 200 : "normal",
                                     flex: 1,
+                                    "&:hover": {
+                                    backgroundColor: theme.palette.hoverColor,
+                                },
                                 },
                                 "&.Mui-disabled": {
                                     color: "#6F6F6F",
@@ -183,6 +307,112 @@ const AdminNavBar = (props) => {
 
 export default AdminNavBar;
 
+const Loader = () => {
+  const dummyItems = Array.from({ length: 6 });
+  const dummyNavItems = Array.from({ length: 6 });
+  const dummyTabItems = ['Org Configuration', 'SSO', 'Notifications', 'Billing & Stats', 'Branding'];
+  const { leftSideBarOpenByClick, windowWidth, themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
+  return (
+    <div style={{ 
+      display: 'flex', 
+      width: '100%', 
+      height: '100%',
+      minHeight: '100vh',
+      maxWidth: '1200px',
+      fontFamily: 'Arial, sans-serif',
+      paddingLeft: leftSideBarOpenByClick ? windowWidth <= 1300 ? 220 : 200 : 80,
+        transition: "padding-left 0.3s ease",
+    }}>
+
+      <div style={{ 
+        width: '220px', 
+        backgroundColor: theme.palette.platformColor,
+        borderTopLeftRadius: '8px', 
+        borderBottomLeftRadius: '8px',
+        padding: '25px 25px 3px 25px',
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
+          <Skeleton 
+            width="30px" 
+            height="30px" 
+            sx={{ borderRadius: '8px', marginRight: '8px', }} 
+          />
+          <Skeleton width="120px" height="24px" />
+        </div>
+        
+        {/* Divider */}
+        <Skeleton 
+          width="100%" 
+          height="1px" 
+          sx={{ marginBottom: '15px' }} 
+        />
+        
+        {/* Nav Items */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }}>
+          {dummyNavItems.map((_, index) => (
+            <div key={index} style={{ display: 'flex', alignItems: 'center', padding: '5px 0' }}>
+              <Skeleton 
+                width="18px" 
+                height="18px" 
+                sx={{ marginRight: '10px' }} 
+              />
+              <Skeleton width={`${100 + Math.random() * 40}px`} height="36px" />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div style={{ 
+        flex: 1, 
+        backgroundColor: theme.palette.platformColor,
+        borderTopRightRadius: '8px', 
+        borderBottomRightRadius: '8px',
+        borderLeft: theme.palette.defaultBorder,
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
+        <div style={{ 
+          display: 'flex', 
+          borderBottom: theme.palette.defaultBorder,
+          padding: '0 16px'
+        }}>
+          {dummyTabItems.map((_, index) => (
+            <div 
+              key={index} 
+              style={{ 
+                flex: 1, 
+                display: 'flex', 
+                justifyContent: 'center', 
+                alignItems: 'center',
+                padding: '28px 0',
+                borderBottom: index === 0 ? '2px solid #FF8444' : 'none'
+              }}
+            >
+              <Skeleton width={`${80 + Math.random() * 30}px`} height="24px" />
+            </div>
+          ))}
+        </div>
+        <div style={{ flex: 1, padding: '24px' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', width: '100%', margin: '0 auto', alignItems: 'flex-start' }}>
+            <Skeleton variant='square' width="200px" height="200px" sx={{ marginBottom: '20px' }} />
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%', marginTop: '50px' }}>
+                {dummyItems.map((_, index) => (
+                    <div key={index} style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                    <Skeleton width={'400px'} height="36px" />
+                    </div>
+                ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+  
+
 const PaddingWrapper2 = memo(({ children }) => {
 
     return (
diff --git a/frontend/src/components/ApiExplorer.jsx b/frontend/src/components/ApiExplorer.jsx
index e6080301..45e6eab5 100644
--- a/frontend/src/components/ApiExplorer.jsx
+++ b/frontend/src/components/ApiExplorer.jsx
@@ -29,7 +29,7 @@ import {
   Tooltip,
 } from "@mui/material";
 import throttle from "lodash/throttle";
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import { validateJson, collapseField, } from "../views/Workflows.jsx";
 
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -37,6 +37,8 @@ import { Context } from "../context/ContextApi.jsx";
 
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
+  const {themeMode} = useContext(Context);
+  const theme = getTheme(themeMode)
 
   return (
     <div
@@ -47,7 +49,7 @@ function CustomTabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box sx={{ p: 3, padding: 0, backgroundColor: "#1a1a1a" }}>
+        <Box sx={{ p: 3, padding: 0, backgroundColor: theme.palette.backgroundColor}}>
           {children}
         </Box>
       )}
@@ -100,6 +102,8 @@ const ApiExplorer = memo(({ openapi, globalUrl, userdata, HandleApiExecution, se
   const [selectedActionIndex, setSelectedActionIndex] = useState(0);
   const [ExampleBody, setExampleBody] = useState({});
   const [filteredActions, setFilteredActions] = useState([]);
+  const {themeMode} = useContext(Context);
+  const theme = getTheme(themeMode)
 
   const [firstSendDone, setFirstSendDone] = useState(false)
 
@@ -1391,6 +1395,8 @@ const ActionsList = memo(({
 
   const [searchQuery, setSearchQuery] = useState("");
   const [visibleActions, setVisibleActions] = useState([]);
+  const {themeMode} = useContext(Context);
+  const theme = getTheme(themeMode);
   
 
   useEffect(() => {
@@ -1463,7 +1469,7 @@ const ActionsList = memo(({
 									alt="app logo"
 									style={{ marginLeft: 20, borderRadius: 8 }}
 								/>
-								<Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: '#F1F1F1'
+								<Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: theme.palette.textColor
 								}}> 
 									{info.title}
 								</Typography>
@@ -1471,7 +1477,7 @@ const ActionsList = memo(({
 						</Tooltip>
 					</a>
                 ) : (
-                  <Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: '#F1F1F1'
+                  <Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: theme.palette.textColor
                   }}> 
                       Api Explorer
                   </Typography>
@@ -1504,7 +1510,7 @@ const ActionsList = memo(({
         style={{
           marginLeft: 20,
           marginTop: 15,
-          backgroundColor: "#1a1a1a",
+          backgroundColor: theme.palette.backgroundColor,
           overflowY: "auto",
           height: (isLoaded && isLoggedIn) ? "calc(100vh - 190px)" : "calc(100vh - 260px)",
           paddingRight: 5,
@@ -1522,7 +1528,7 @@ const ActionsList = memo(({
                 textTransform: "none",
                 backgroundColor:
                   selectedActionIndex === actionIndex
-                    ? "#3f3f3f"
+                    ? theme.palette.hoverColor
                     : "transparent",
                 border: "none",
                 justifyContent: "flex-start",
@@ -1535,7 +1541,7 @@ const ActionsList = memo(({
                 textWrap: "nowrap",
                 textOverflow: "ellipsis",
                 "&:hover": {
-                  backgroundColor: "#2f2f2f",
+                  backgroundColor: theme.palette.hoverColor,
                 },
               }}
               onClick={() => handleActionClick(actionIndex, action)}
@@ -1554,7 +1560,7 @@ const ActionsList = memo(({
               </span>
               <span
                 style={{
-                  color: "white",
+                  color: theme.palette.textColor,
                   textOverflow: "ellipsis",
                   overflow: "hidden",
                 }}
@@ -1564,7 +1570,7 @@ const ActionsList = memo(({
             </Button>
           ))
         ) : (
-          <div style={{ padding: "15px", color: "white", textAlign: "center" }}>
+          <div style={{ padding: "15px", color: theme.palette.textColor, textAlign: "center" }}>
             No actions found
           </div>
         )}
@@ -1602,6 +1608,8 @@ const Action = memo((
         const [disableExecuteButton, setDisableExecuteButton] = useState(false);
         const [showResponseLoader, setShowResponseLoader] = useState(false);
         const [appAuthentication, setAppAuthentication] = useState([])
+        const {themeMode} = useContext(Context);
+        const theme = getTheme(themeMode);
         const parseHeaders = (headersString) => {
           if (headersString?.length > 0) {
             const headersArray = headersString.split("\n");
@@ -2082,7 +2090,7 @@ const Action = memo((
                       fontWeight: 700,
                       marginLeft: 40,
                       marginBottom: 5,
-                      color: "rgba(241, 241, 241, 1)",
+                      color: theme.palette.textColor
                     }}
                   >
                     {actionname}
@@ -2095,7 +2103,7 @@ const Action = memo((
                   borderRadius: 6,
                   marginLeft: "40px",
                   marginTop: 2,
-                  backgroundColor: "#212121",
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                   height: 51,
                   alignItems: 'center',
                 }}
@@ -2109,7 +2117,7 @@ const Action = memo((
                     backgroundColor: "transparent",
                     "& .MuiSelect-select": {
                       color: RequestMethods.find((method) => method.value === selectedMethod)
-                        ?.color || "#212121",
+                        ?.color || theme.palette.textFieldStyle.backgroundColor,
                     },
                   }}
                   MenuProps={{
@@ -2117,14 +2125,14 @@ const Action = memo((
                       sx: {
                         padding: 0,
                         margin: 0,
-                        backgroundColor: "#212121",
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                       },
                     },
                     MenuListProps: {
                       sx: {
                         padding: 0,
                         margin: 0,
-                        backgroundColor: "#212121",
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                       },
                     },
                   }}
@@ -2135,20 +2143,20 @@ const Action = memo((
                       value={method.value}
                       sx={{
                         color: method.color,
-                        backgroundColor: "#212121",
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                         border: "none",
                         marginBottom: 0.25,
                         "&:hover": {
                           backgroundColor: method.color,
-                          color: "#f9fcf5", 
+                          color: theme.palette.textFieldStyle.color, 
                         },
                         "&.Mui-selected": {
                           backgroundColor: method.color,
-                          color: "#f9fcf5",
+                          color: theme.palette.textFieldStyle.color,
                           border: "none",
                           "&:hover": {
                             backgroundColor: method.color,
-                            color: "#f9fcf5",
+                            color: theme.palette.textFieldStyle.color,
                           },
                         },
                         "&.Mui-focusVisible": {
@@ -2167,9 +2175,8 @@ const Action = memo((
                   inputProps={{
                     style: {
                       margin: "auto",
-                      backgroundColor: "transparent",
                       border: "none",
-                      color: "rgba(241, 241, 241, 1)",
+                      color: theme.palette.textFieldStyle.color,
                       display: 'flex',
                       height: '100%',
                       alignItems: 'center',
@@ -2331,7 +2338,7 @@ const Action = memo((
                   style={{
                     display: "flex",
                     justifyContent: "center",
-                    background: "rgba(26, 26, 26, 1)",
+                    background: theme.palette.backgroundColor,
                   }}
                 >
                   <Tabs
@@ -2386,7 +2393,7 @@ const Action = memo((
                   <TableContainer
                     style={{
                       minWidth: 696,
-                      backgroundColor: "#212121",
+                      backgroundColor: theme.palette.platformColor,
                       borderRadius: 6,
                       border: "1px solid rgba(73, 73, 73, 1)",
                     }}
@@ -2436,7 +2443,7 @@ const Action = memo((
                                 }
                                 inputProps={{
                                   style: {
-                                    backgroundColor: "rgba(33, 33, 33, 1)",
+                                    backgroundColor: theme.palette.platformColor,
                                     padding: "4px 8px",
                                   },
                                 }}
@@ -2494,7 +2501,7 @@ const Action = memo((
                                     </InputAdornment>
                                   ),
                                   style: {
-                                    backgroundColor: "rgba(33, 33, 33, 1)",
+                                    backgroundColor: theme.palette.platformColor,
                                     padding: "4px 8px",
                                   },
                                 }}
@@ -2600,7 +2607,7 @@ const Action = memo((
                   <TableContainer
                     style={{
                       minWidth: 696,
-                      backgroundColor: "#212121",
+                      backgroundColor: theme.palette.platformColor,
                       borderRadius: 6,
                       border: "1px solid rgba(73, 73, 73, 1)",
                     }}
@@ -2640,7 +2647,7 @@ const Action = memo((
                                 type="text"
                                 inputProps={{
                                   style: {
-                                    backgroundColor: "rgba(33, 33, 33, 1)",
+                                    backgroundColor: theme.palette.platformColor ,
                                     padding: "4px 8px",
                                   },
                                 }}
@@ -2694,7 +2701,7 @@ const Action = memo((
                                 value={row.value}
                                 inputProps={{
                                   style: {
-                                    backgroundColor: "rgba(33, 33, 33, 1)",
+                                    backgroundColor: theme.palette.platformColor,
                                     padding: "4px 8px",
                                   },
                                 }}
@@ -2794,10 +2801,10 @@ const Action = memo((
                   marginLeft: 10
                 }}
               >
-                  <span style={{ fontSize: 16, fontWeight: 600 }}>
+                  <span style={{ fontSize: 16, fontWeight: 600, color: theme.palette.textColor }}>
                     {action.name.replaceAll("_", " ")}
                   </span>
-                  <p >
+                  <p style={{color: theme.palette.textColor}}>
                     {action.description
                       ? action.description
                       : ""}
@@ -2813,6 +2820,8 @@ const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded })
   const [responseTabIndex, setResponseTabIndex] = useState(0)
   const [oldResponse, setOldResponse] = useState(apiResponse)
   const [highlight, setHighlight] = useState(false)
+  const {themeMode } = useContext(Context)
+  const theme = getTheme(themeMode)
 
   const MIN_HEIGHT = 50
 
@@ -2934,7 +2943,7 @@ const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded })
         style={{
           width: '100%',
           height: height,
-          backgroundColor: '#1a1a1a',
+          backgroundColor: theme.palette.backgroundColor,
           display: 'flex',
           flexDirection: 'column',
           borderTop: '1px solid rgba(255,255,255,0.2)',
@@ -2988,7 +2997,7 @@ const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded })
             <ReactJson
               src={formData(ExampleBody)}
               theme={theme.palette.jsonTheme}
-              style={{ backgroundColor: '#1a1a1a', padding: 5 }}
+              style={{...theme.palette.reactJsonStyle, border: "none"}}
               collapsed={false}
               iconStyle={theme.palette.jsonIconStyle}
               collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
@@ -3005,6 +3014,10 @@ const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded })
 });
 
 const ResponseTabWrapper = memo(({ apiResponse }) => {
+
+  const {themeMode } = useContext(Context)
+  const theme = getTheme(themeMode)
+
   const handleReactJsonClipboard = (copy) => {
     const elementName = "copy_element_shuffle";
     let copyText = document.getElementById(elementName);
@@ -3036,7 +3049,7 @@ const ResponseTabWrapper = memo(({ apiResponse }) => {
     <ReactJson
           src={apiResponse}
           theme={theme.palette.jsonTheme}
-          style={{ backgroundColor: "#1a1a1a", padding: 5 }}
+          style={{...theme.palette.reactJsonStyle, border: "none"}}
 		  shouldCollapse={(jsonField) => {
 			return collapseField(jsonField)
 		  }}
@@ -3049,7 +3062,8 @@ const ResponseTabWrapper = memo(({ apiResponse }) => {
   )})
 
 const PaddingWrapper = memo(({ isLoggedIn, isLoaded, children }) => {
-  const { leftSideBarOpenByClick, windowWidth } = useContext(Context);
+  const { leftSideBarOpenByClick, windowWidth, themeMode } = useContext(Context);
+  const theme = getTheme(themeMode)
   return (
     <div
       style={{
@@ -3058,7 +3072,7 @@ const PaddingWrapper = memo(({ isLoggedIn, isLoaded, children }) => {
             ? windowWidth >= 1920  ? "calc(100% - 630px)" : "calc(100% - 570px)"
             : windowWidth >= 1920 ? "calc(100vw - 460px)": "calc(100% - 410px)"
           : windowWidth >= 1920 ? "calc(100% - 370px)" : "calc(100% - 320px)",
-        backgroundColor: "#1a1a1a",
+        backgroundColor: theme.palette.backgroundColor,
         position: "fixed",
         bottom: 0,
         right: 0,
diff --git a/frontend/src/components/AppAuthTab.jsx b/frontend/src/components/AppAuthTab.jsx
index f5821a1f..643aa8dc 100644
--- a/frontend/src/components/AppAuthTab.jsx
+++ b/frontend/src/components/AppAuthTab.jsx
@@ -13,7 +13,7 @@ import {
 } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import Markdown from "react-markdown";
 import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
 import { isMobile } from "react-device-detect"
@@ -88,7 +88,9 @@ const AppAuthTab = memo((props) => {
     const [searchQuery, setSearchQuery] = React.useState("");
     const [showAppModal, setShowAppModal] = useState(false)
     const [showAuthenticationLoader, setShowAuthenticationLoader] = useState(true)
-    const [showAppAuthGroupLoader, setShowAppAuthGroupLoader] = useState(true)
+  const [showAppAuthGroupLoader, setShowAppAuthGroupLoader] = useState(true)
+  const { themeMode, supportEmail, brandColor } = useContext(Context)
+  const theme = getTheme(themeMode, brandColor)
     const changeDistribution = (data) => {
         //changeDistributed(data, !isDistributed)
         editAuthenticationConfig(data.id, "suborg_distribute")
@@ -277,7 +279,7 @@ const AppAuthTab = memo((props) => {
             }}
         >
             <DialogTitle>
-                <span style={{ color: "white" }}>
+                <span style={{ color: theme.palette.textColor }}>
                     Edit authentication for {selectedAuthentication.app.name.replaceAll("_", " ")} (
                     {selectedAuthentication.label})
                 </span>
@@ -297,7 +299,7 @@ const AppAuthTab = memo((props) => {
                     InputProps={{
                         style: {
                             height: 50,
-                            color: "white",
+                            color: theme.palette.textColor,
                         },
                     }}
                     color="primary"
@@ -349,7 +351,7 @@ const AppAuthTab = memo((props) => {
                                 InputProps={{
                                     style: {
                                         height: 50,
-                                        color: "white",
+                                        color: theme.palette.textColor,
                                     },
                                 }}
                                 color="primary"
@@ -568,7 +570,7 @@ const AppAuthTab = memo((props) => {
           })
           .then((responseJson) => {
             if (responseJson.success === false) {
-                toast("Failed to create. Please try again, or contact support@shuffler.io")
+                toast(`Failed to create. Please try again, or contact ${supportEmail}`)
             } else {
                 // Close the modal
                 setAppAuthenticationGroupModalOpen(false)
@@ -660,7 +662,7 @@ const AppAuthTab = memo((props) => {
               }}
             >
               <DialogTitle>
-                <span style={{ color: "white" }}>App Authentication Groups</span>
+                <span style={{ color: theme.palette.textColor }}>App Authentication Groups</span>
               </DialogTitle>
     
               <DialogContent style={{marginLeft: 0, paddingLeft: 0, }}>
@@ -677,7 +679,7 @@ const AppAuthTab = memo((props) => {
                         InputProps={{
                           style: {
                             height: "50px",
-                            color: "white",
+                            color: theme.palette.textColor,
                             fontSize: "1em",
                           },
                         }}
@@ -853,22 +855,22 @@ const AppAuthTab = memo((props) => {
     ) : null;    
     
     return (
-        <div style={{width: "100%", minHeight: 1100, maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin',boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
+        <div style={{width: "100%", minHeight: 1100, maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin',boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor,borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder, }}>
           {appModal}
-            <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
+            <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
             <div style={{ width: 'auto', display:'flex',}}>
                 <div style={{display: 'flex', flexDirection: 'column'}}>
-                  <h2 style={{ marginBottom: 8, marginTop: 0, color: "#FFFFFF" }}>App Authentication</h2>
-                   <div>
-                    <span style={{}}>
+                  <Typography variant='h5' style={{ marginBottom: 8, marginTop: 0, }}>App Authentication</Typography>
+              <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', }}>
+                    <Typography variant='body2' color="textSecondary">
                       Control the authentication options for individual apps.
-                      </span>
+                      </Typography>
                       &nbsp;
                       <a
                           target="_blank"
                           rel="noopener noreferrer"
                           href="/docs/organizations#app_authentication"
-                          style={{ color: "#FF8444" }}
+                          style={{ color: theme.palette.linkColor }}
                       >
                           Learn more about App Authentication
                       </a>
@@ -877,7 +879,7 @@ const AppAuthTab = memo((props) => {
 
 				{isCloud ? 
 					<Button
-						style={{ color: '#1a1a1a', textTransform: 'none', backgroundColor: "#FF8444", marginLeft:"auto", borderRadius: 4,fontSize: 16, minWidth: 162, height: 40, boxShadow:'none', }}
+						style={{ textTransform: 'none', marginLeft:"auto", borderRadius: 4,fontSize: 16, minWidth: 162, height: 40, boxShadow:'none', }}
 						variant="contained"
 						color="primary"
 						disabled={!isCloud}
@@ -899,7 +901,7 @@ const AppAuthTab = memo((props) => {
               style={{
               borderRadius: 4,
               marginTop: 24,
-              border: "1px solid #494949",
+              border: theme.palette.defaultBorder,
               width: "100%",
               overflowX: "auto", 
               paddingBottom: 0,
@@ -917,7 +919,7 @@ const AppAuthTab = memo((props) => {
             }}>
                 
                 
-                <ListItem style={{ width: "100%", paddingTop: 10, paddingBottom: 10, paddingRight: 10,  borderBottom: "1px solid #494949", display: 'table-row'}}>
+                <ListItem style={{ width: "100%", paddingTop: 10, paddingBottom: 10, paddingRight: 10,  borderBottom: theme.palette.defaultBorder, display: 'table-row'}}>
                     
                 {["Valid", "Label", "App Name", "Workflows", "Fields", "Edited", "Actions", "Distribution"].map((header, index) => (
                         <ListItemText
@@ -928,7 +930,7 @@ const AppAuthTab = memo((props) => {
                               padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
                               whiteSpace: "nowrap",
                               textOverflow: "ellipsis",
-                              borderBottom: "1px solid #494949",
+                              borderBottom: theme.palette.defaultBorder,
                               position: "sticky",
                             }}
                         />
@@ -942,7 +944,7 @@ const AppAuthTab = memo((props) => {
                           key={rowIndex}
                           style={{
                               display: "table-row",
-                              backgroundColor: "#212121",
+                              backgroundColor: theme.palette.platformColor,
                           }}
                       >
                           {Array(8)
@@ -959,7 +961,7 @@ const AppAuthTab = memo((props) => {
                                           variant="text"
                                           animation="wave"
                                           sx={{
-                                              backgroundColor: "#1a1a1a",
+                                              backgroundColor: theme.palette.loaderColor,
                                               height: "20px",
                                               borderRadius: "4px",
                                           }}
@@ -970,14 +972,14 @@ const AppAuthTab = memo((props) => {
                   ))
                     : authentication?.length === 0 ? (
                         <div style={{ textAlign: 'center'}}>
-                          <Typography style={{ color: "#FFFFFF", textAlign: 'center', padding: 20}}>
+                          <Typography color="textPrimary" style={{ textAlign: 'center', padding: 20}}>
                           No authentication found. 
                       </Typography>
                         </div>
                     ):authentication.map((data, index) => {
-                      var bgColor = "#212121";
+                      var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
                       if (index % 2 === 0) {
-                          bgColor = "#1A1A1A";
+                          bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
                       }
 
                       //console.log("Auth data: ", data)
@@ -1059,7 +1061,7 @@ const AppAuthTab = memo((props) => {
                               <ListItemText
                                   primary={
 									  <Tooltip title={"Try the app in our API explorer"} placement="top">
-										  <a href={`/apis/${data.app.id}`} style={{ color: "#FF8444", textDecoration: "none", cursor: "pointer", }} target="_blank" rel="noopener noreferrer">
+										  <a href={`/apis/${data.app.id}`} style={{ color: theme.palette.linkColor, textDecoration: "none", cursor: "pointer", }} target="_blank" rel="noopener noreferrer">
 											  {data?.app?.name?.replaceAll("_", " ")}
 										  </a>
 									  </Tooltip>
@@ -1112,14 +1114,14 @@ const AppAuthTab = memo((props) => {
                                   style={{
                                       overflow: "hidden",
                                       display: "table-cell",
-                                      verticalAlign: 'middle'
+                              verticalAlign: 'middle',
                                   }}
                                   primaryTypographyProps={{
                                     style: {
                                       padding: 8
                                     }
                                   }}
-                                  primary={new Date(data.edited * 1000).toISOString()}
+                            primary={new Date(data.edited * 1000).toISOString()}
                               />
                               <ListItemText
                                 style={{
@@ -1129,13 +1131,24 @@ const AppAuthTab = memo((props) => {
                                 primaryTypographyProps={{ style: { display: "flex", flexDirection: 'row', padding: 8 } }}
                               >
                                 <IconButton
-                                  onClick={() => {
-                                    updateAppAuthentication(data);
-                                  }}
-                                  disabled={data.org_id !== selectedOrganization.id}
-                                >
-                                  <img src="/icons/editIcon.svg" alt="Edit icon" color="secondary" />
-                                </IconButton>
+                                    onClick={() => updateAppAuthentication(data)}
+                                    disabled={data.org_id !== selectedOrganization.id}
+                                  >
+                                    <svg
+                                      width="24"
+                                      height="24"
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z"
+                                        stroke={themeMode=== "dark" ? "#F1F1F1" : "#333"}
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                      />
+                                    </svg>
+                                  </IconButton>
                                 {data.defined ? (
                                   <Tooltip
                                     color="primary"
@@ -1151,7 +1164,7 @@ const AppAuthTab = memo((props) => {
                                         editAuthenticationConfig(data.id);
                                       }}
                                     >
-                                      <SelectAllIcon color="secondary" />
+                                      <SelectAllIcon color="textSecondary" />
                                     </IconButton>
                                   </Tooltip>
                                 ) : (
@@ -1439,6 +1452,9 @@ const SearchBox = ({ currentRefinement, refine, isSearchStalled, searchQuery, se
     refine(searchQuery.trim());
   };
 
+  const { themeMode, supportEmail } = useContext(Context);
+  const theme = getTheme(themeMode);
+
   return (
     <form noValidate action="" role="search">
       <TextField
@@ -1452,7 +1468,7 @@ const SearchBox = ({ currentRefinement, refine, isSearchStalled, searchQuery, se
         }}
         InputProps={{
           style: {
-            color: "white",
+            color: theme.palette.textFieldStyle.color,
             fontSize: "1em",
             height: 50,
             borderRadius: 4,
@@ -1468,7 +1484,7 @@ const SearchBox = ({ currentRefinement, refine, isSearchStalled, searchQuery, se
               {searchQuery?.length > 0 && (
                 <ClearIcon
                   style={{
-                    color: "white",
+                    color: theme.palette.textColor,
                     cursor: "pointer",
                     marginRight: 10
                   }}
@@ -1485,7 +1501,7 @@ const SearchBox = ({ currentRefinement, refine, isSearchStalled, searchQuery, se
                 style={{
                   backgroundImage:
                     "linear-gradient(to right, rgb(248, 106, 62), rgb(243, 64, 121))",
-                  color: "white",
+                  color: theme.palette.textColor,
                   border: "none",
                   padding: "10px 20px",
                   width: 100,
@@ -1523,8 +1539,6 @@ const SearchBox = ({ currentRefinement, refine, isSearchStalled, searchQuery, se
 
 const Hits = ({
   hits,
-  insights,
-  setIsAnyAppActivated,
   searchQuery,
   isCloud,
   globalUrl,
@@ -1548,6 +1562,8 @@ const Hits = ({
     }
   )
   const navigate = useNavigate();
+  const { themeMode, supportEmail } = useContext(Context);
+  const theme = getTheme(themeMode);
 
   const normalizedString = (name) => {
     if (typeof name === 'string') {
@@ -1732,7 +1748,7 @@ const Hits = ({
     })
       .then((response) => {
         if (response.status !== 200) {
-          toast.error("Failed to get app data or App doesn't. Please contact support@shuffler.io");
+          toast.error(`Failed to get app data or App doesn't. Please contact ${supportEmail}`);
           return;
         }
         return response.json();
@@ -1950,7 +1966,7 @@ const Hits = ({
     return (
       <div>
         <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-          <div style={{ color: "white" }}>
+          <div style={{ color: theme.palette.textColor }}>
             Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
           </div>
         </DialogTitle>
@@ -2020,7 +2036,7 @@ const Hits = ({
                     }}
                     style={{
                       backgroundColor: theme.palette.surfaceColor,
-                      color: "white",
+                      color: theme.palette.textColor,
                       height: 50,
                     }}
                   >
@@ -2028,7 +2044,7 @@ const Hits = ({
                       key={"false"}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.textColor,
                       }}
                       value={"false"}
                     >
@@ -2038,7 +2054,7 @@ const Hits = ({
                       key={"true"}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.textColor,
                       }}
                       value={"true"}
                     >
@@ -2117,7 +2133,7 @@ const Hits = ({
       PaperProps={{
         style: {
           pointerEvents: "auto",
-          color: "white",
+          color: theme.palette.textColor,
           minWidth: 1100,
           minHeight: 700,
           maxHeight: 700,
@@ -2399,7 +2415,7 @@ const Hits = ({
                 href={selectedMeta.link}
                 style={{ textDecoration: "none", color: "#f85a3e" }}
               >
-                <Button style={{ color: "white", }} variant="outlined" color="secondary">
+                <Button style={{ color: theme.palette.textColor, }} variant="outlined" color="secondary">
                   <EditIcon /> &nbsp;&nbsp;Edit
                 </Button>
               </a>
@@ -2410,7 +2426,7 @@ const Hits = ({
               style={{
                 height: "100%",
                 width: 1,
-                backgroundColor: "white",
+                backgroundColor: theme.palette.textColor,
                 marginLeft: 50,
                 marginRight: 50,
               }}
@@ -2505,7 +2521,7 @@ const Hits = ({
               height: 480,
               overflowY: "auto",
               scrollbarWidth: "thin",
-              scrollbarColor: "#494949 #2f2f2f",
+              scrollbarColor: theme.palette.scrollbarColor,
               width: "100%",
             }}
           >
@@ -2536,7 +2552,7 @@ const Hits = ({
                         elevation={0}
                         style={{
                           ...paperStyle,
-                          backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "rgba(26, 26, 26, 1)",
+                          backgroundColor: mouseHoverIndex === index ? theme.palette.cardHoverColor : theme.palette.cardBackgroundColor,
                           width: "100%",
                         }}
                         onMouseEnter={() => setMouseHoverIndex(index)}
@@ -2595,7 +2611,7 @@ const Hits = ({
                                 gap: 8,
                                 textOverflow: "ellipsis",
                                 whiteSpace: "nowrap",
-                                color: "#F1F1F1",
+                                color: theme.palette.textColor,
                               }}
                             >
                               {normalizedString(data.name)}
@@ -2638,7 +2654,7 @@ const Hits = ({
                                     ))}
                                   </div>
                               </div>
-                              	<Button style={{position: 'relative', borderRadius: 6, bottom: 10, marginRight: 10, fontSize: 16, backgroundColor: '#ff8544', color: "#1a1a1a", textTransform:'none', marginLeft: 'auto'}} onClick={(e)=> {e.preventDefault();e.stopPropagation();handleAppAuthenticationNew(data)()}}>
+                              	<Button variant='contained' color='primary' style={{position: 'relative', borderRadius: 6, bottom: 10, marginRight: 10, fontSize: 16, textTransform:'none', marginLeft: 'auto'}} onClick={(e)=> {e.preventDefault();e.stopPropagation();handleAppAuthenticationNew(data)()}}>
 				  					Authenticate app
 				  				</Button>
                             </div>
diff --git a/frontend/src/components/AppCreationModal.jsx b/frontend/src/components/AppCreationModal.jsx
index a9f8f598..28dea461 100644
--- a/frontend/src/components/AppCreationModal.jsx
+++ b/frontend/src/components/AppCreationModal.jsx
@@ -42,9 +42,8 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
 
         const parsedStyle = {
             flex: 1,
-            padding: 20,
+            padding: "30px 20px 20px",
             margin: 12,
-            paddingTop: 30,
             backgroundColor: hover && !makeFancy ? theme.palette.surfaceColor : "transparent",
             cursor: hover ? "pointer" : "default",
             textAlign: "center",
@@ -346,23 +345,23 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
     // Common dialog styles
     const dialogStyle = {
         borderRadius: 2,
-        border: "1px solid #494949",
+        border: theme.palette.DialogStyle.border,
         minWidth: '500px',
         fontFamily: theme?.typography?.fontFamily,
-        backgroundColor: "#1A1A1A",
+        backgroundColor: theme.palette.DialogStyle.backgroundColor,
         zIndex: 1000,
         '& .MuiDialogContent-root': {
-            backgroundColor: "#1A1A1A",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
             padding: '24px',
             fontFamily: theme?.typography?.fontFamily,
         },
         '& .MuiDialogTitle-root': {
-            backgroundColor: "#1A1A1A",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
             padding: '24px',
             fontFamily: theme?.typography?.fontFamily,
         },
         '& .MuiDialogActions-root': {
-            backgroundColor: "#1A1A1A",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
             padding: '16px 24px',
             fontFamily: theme?.typography?.fontFamily,
         },
@@ -397,7 +396,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     pl: 4,
                     pr: 3,
                 }}>
-                    <Typography variant="h5" sx={{ fontWeight: 500, color: "#F1F1F1" }}>
+                    <Typography variant="h5"color="textPrimary" sx={{ fontWeight: 500, }}>
                         Create New App
                     </Typography>
                     <IconButton
@@ -409,8 +408,8 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                             onClose()
                         }}
                         sx={{
-                            color: 'rgba(255, 255, 255, 0.7)',
-                            '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
+                            color: theme.palette.text.primary,
+                            '&:hover': { bgcolor: theme.palette.hoverColor },
                         }}
                     >
                         <CloseIcon />
@@ -477,7 +476,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     px: 4,
                 }}>
                     <Typography variant="h6" sx={{
-                        color: '#F1F1F1',
+                        color: theme.palette.text.primary,
                         fontWeight: 500,
                         fontFamily: theme?.typography?.fontFamily
                     }}>
@@ -502,7 +501,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                 </DialogTitle>
                 <DialogContent sx={{ px: 4, py: 3 }}>
                     <div style={{ display: "flex", fontSize: '14px', gap: '5px', alignItems: 'center', marginBottom: '10px', fontFamily: theme?.typography?.fontFamily, marginTop: '15px' }}>
-                        <Typography sx={{ color: 'rgba(255,255,255,0.85)', fontSize: '16px' }}>
+                        <Typography sx={{ color: theme.palette.text.primary, fontSize: '16px' }}>
                             Paste in the URI for the OpenAPI or find out
                         </Typography>
                         <Link style={{
@@ -583,6 +582,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                             py: 1,
                             '&:hover': {
                                 borderColor: '#FF8544',
+                                color: '#FF8544',
                                 bgcolor: 'rgba(255,133,68,0.1)'
                             },
                             textTransform: 'none',
@@ -665,7 +665,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     px: 4,
                 }}>
                     <Typography variant="h6" sx={{
-                        color: '#F1F1F1',
+                        color: theme.palette.text.primary,
                         fontWeight: 500,
                         fontFamily: theme?.typography?.fontFamily,
                     }}>
@@ -681,8 +681,8 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                             setValidation(false)
                         }}
                         sx={{
-                            color: 'rgba(255,255,255,0.7)',
-                            '&:hover': { bgcolor: 'rgba(255,255,255,0.1)' }
+                            color: theme.palette.text.primary,
+                            '&:hover': { bgcolor: theme.palette.hoverColor }
                         }}
                     >
                         <CloseIcon />
@@ -690,7 +690,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                 </DialogTitle>
                 <DialogContent sx={{ px: 4, py: 3, pt: 0 }}>
                     <Typography sx={{
-                        color: 'rgba(255,255,255,0.85)',
+                        color: theme.palette.text.primary,
                         mb: 2,
                         fontSize: '14px',
                         mt: 2,
@@ -706,10 +706,10 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                             variant="outlined"
                             placeholder="API Documentation URL"
                             sx={{
-                                bgcolor: theme.palette.platformColor,
+                                bgcolor: theme.palette.textFieldStyle.backgroundColor,
                                 '& .MuiOutlinedInput-root': {
                                     height: '40px',
-                                    color: 'white',
+                                    color: theme.palette.text.primary,
                                     '& fieldset': {
                                         borderWidth: '1px',
                                         borderImage: "linear-gradient(to right, #ff8544 0%, #ec517c 50%, #9c5af2 100%) 1",
@@ -757,7 +757,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     {circularLoader}
                     {
                         !validation &&
-                        <Typography sx={{ color: '#c5c5c5', fontSize: '14px', fontFamily: theme?.typography?.fontFamily, }}>
+                        <Typography color="textSecondary" sx={{ fontSize: '14px', fontFamily: theme?.typography?.fontFamily, }}>
                             This may take multiple minutes based on the size of the documentation.
                         </Typography>
                     }
diff --git a/frontend/src/components/AppModal.jsx b/frontend/src/components/AppModal.jsx
index e9364913..4b3b9516 100644
--- a/frontend/src/components/AppModal.jsx
+++ b/frontend/src/components/AppModal.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState, useContext } from 'react';
 import { useNavigate } from 'react-router';
 
 import {
@@ -25,12 +25,13 @@ import LaunchIcon from '@mui/icons-material/Launch';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { CloudDownloadOutlined, Delete } from '@mui/icons-material';
 import { findSpecificApp } from '../components/AppFramework.jsx';
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import YAML from 'yaml';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
 import { InstantSearch, connectHits, connectSearchBox } from 'react-instantsearch-dom';
 import algoliasearch from "algoliasearch/lite";
+import { Context } from '../context/ContextApi.jsx';
 
 const searchClient = algoliasearch(
   "JNSS5CFDZZ",
@@ -51,6 +52,9 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
   const [deleteModalOpen, setDeleteModalOpen] = useState(false)
   const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
   const navigate = useNavigate();
+  const {themeMode} = useContext(Context);
+  const theme = getTheme(themeMode);
+
   const parseUsecase = (subcase) => {
     const srcdata = findSpecificApp(frameworkData, subcase.type)
     const dstdata = findSpecificApp(frameworkData, subcase.last)
@@ -516,12 +520,12 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
           border: "1px solid #494949",
           minWidth: '440px',
           fontFamily: theme?.typography?.fontFamily,
-          backgroundColor: "#212121",
+          backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
           '& .MuiDialogContent-root': {
-            backgroundColor: "#212121",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
           },
           '& .MuiDialogTitle-root': {
-            backgroundColor: "#212121",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
           },
           '& .MuiTypography-root': {
             fontFamily: theme?.typography?.fontFamily,
@@ -553,7 +557,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
         <IconButton
           onClick={onClose}
           sx={{
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: theme.palette.textColor,
             '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
           }}
 	  	  style={{
@@ -633,16 +637,14 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
               >
                 <Button
                   variant="contained"
+                  color="secondary"
                   sx={{
-                    bgcolor: '#494949',
-                    '&:hover': { bgcolor: '#494949' },
                     textTransform: 'none',
                     borderRadius: 1,
                     minWidth: '45px',
                     width: '45px',
                     height: '40px',
                     padding: 2,
-                    color: "#fff",
                     fontFamily: theme?.typography?.fontFamily
                   }}
                   onClick={(event) => {
@@ -658,19 +660,16 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
             {(userdata?.id === app?.owner)? (
               <Tooltip title={"Delete app (confirm box will show)"}> 
               <Button
-                variant="outlined"
+                variant="contained"
                 component="label"
-                color="primary"
+                color="secondary"
                 sx={{
-                  bgcolor: '#494949',
-                  '&:hover': { bgcolor: '#494949', border: 'none' },
                   textTransform: 'none',
                   borderRadius: 1,
                   minWidth: '45px',
                   width: '45px',
                   height: '40px',
                   padding: 2,
-                  color: "#fff",
                   fontFamily: theme?.typography?.fontFamily,
                   border: 'none'
                 }}
@@ -687,15 +686,13 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
             {(canEditApp && app?.generated) && (
             <Button
               variant="contained"
+              color="secondary"
               sx={{
-                bgcolor: "#494949",
-                '&:hover': { bgcolor: '#494949' },
                 textTransform: 'none',
                 borderRadius: 1,
                 py: 1,
                 px: 3,
                 height: '40px',
-                color: "#fff",
                 fontFamily: theme?.typography?.fontFamily
               }}
               startIcon={canEditApp ? <EditIcon /> : <ForkRightIcon />}
@@ -729,7 +726,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
             <Typography
               variant="body2"
               sx={{
-                color: 'rgba(255, 255, 255, 0.7)',
+                color: theme.palette.textColor,
                 fontFamily: theme?.typography?.fontFamily,
                 fontSize: '14px'
               }}
@@ -740,7 +737,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
           <div style={{
             flex: 1,
             textAlign: "start",
-            borderLeft: "1px solid rgba(255, 255, 255, 0.12)",
+            borderLeft: theme.palette.defaultBorder,
             paddingLeft: "10px",
             height: "100%",
           }}>
@@ -752,7 +749,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
               }}>
               {Array.isArray(app?.actions) ? app.actions.length : app?.actions}
             </Typography>
-            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
+            <Typography variant="body2" sx={{ color: theme.palette.textColor }}>
               Actions
             </Typography>
           </div>
@@ -762,14 +759,14 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
             paddingLeft: "10px",
             paddingTop: "5px"
           }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px", fontFamily: theme?.typography?.fontFamily, fontSize: "14px", fontWeight: 600, color: 'white' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px", fontFamily: theme?.typography?.fontFamily, fontSize: "14px", fontWeight: 600, color: theme.palette.text.primary }}>
               {
                 app?.collection ? (
                   <>
                     <CheckCircleIcon sx={{ color: '#4CAF50' }} />
                     <Typography variant="body1" sx={{
                       fontWeight: 500,
-                      color: '#fff',
+                      color: theme.palette.textColor,
                       marginTop: "1px",
                       fontFamily: theme?.typography?.fontFamily,
                       fontSize: "16px"
@@ -783,7 +780,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
                     fontSize: "16px",
                     fontWeight: 500,
                     marginTop: "1px",
-                    color: 'rgba(255, 255, 255, 0.7)',
+                    color: theme.palette.textColor,
                     fontFamily: theme?.typography?.fontFamily
                   }}>
                     No collection yet
@@ -832,7 +829,7 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
           )}
 
           <Box sx={{
-            bgcolor: '#2F2F2F',
+            bgcolor: themeMode === "dark" ? "#1E1E1E" : "#F5F5F5",
             p: 2,
             borderRadius: 2,
             display: 'flex',
@@ -895,16 +892,14 @@ const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {
         <div style={{ display: "flex", justifyContent: "center", fontFamily: theme?.typography?.fontFamily }}>
           <Button
             variant="contained"
+            color="primary"
             sx={{
-              bgcolor: '#FF8544',
-              '&:hover': { bgcolor: '#FF8544' },
               textTransform: 'none',
               borderRadius: "4px",
               py: 1,
               px: 7,
               fontSize: "14px",
               letterSpacing: "0.5px",
-              color: "black",
               fontFamily: theme?.typography?.fontFamily,
               minWidth: '200px'
             }}
diff --git a/frontend/src/components/AppSearchButtons.jsx b/frontend/src/components/AppSearchButtons.jsx
index cf9741cb..6cfd1404 100644
--- a/frontend/src/components/AppSearchButtons.jsx
+++ b/frontend/src/components/AppSearchButtons.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from "react";
-import theme from '../theme.jsx';
+import React, { useState, useEffect, useRef, useContext } from "react";
+import {getTheme} from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import { useNavigate, Link } from 'react-router-dom';
 import { isMobile } from 'react-device-detect';
@@ -36,9 +36,12 @@ import {
     IconButton,
 } from '@mui/material';
 
+import { Context } from "../context/ContextApi.jsx";
+
 const AppSearchButtons = (props) => {
     const { userdata, globalUrl, appFramework, moreButton, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, getAppFramework, } = props
-
+    const { themeMode } = useContext(Context);
+    const theme = getTheme(themeMode);
     const ref = useRef()
     let navigate = useNavigate();
 
@@ -195,13 +198,13 @@ const AppSearchButtons = (props) => {
                         zIndex: 100,
                         borderRadius: 6,
                         border: "1px solid var(--Container-Stroke, #494949)",
-                        background: "var(--Container, #212121)",
+                        background: theme.palette.platformColor,
                         boxShadow: "8px 8px 32px 24px rgba(0, 0, 0, 0.16)",
                     }}
                 >
                     <div style={{ display: "flex" }}>
                         <div style={{ display: "flex", textAlign: "center", textTransform: "capitalize" }}>
-                            <Typography style={{ padding: 16, color: "#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
+                            <Typography color="textPrimary" style={{ padding: 16, textTransform: "capitalize" }}> {discoveryData} </Typography>
                         </div>
                         <div style={{ display: "flex" }}>
                             <Tooltip
@@ -288,17 +291,17 @@ const AppSearchButtons = (props) => {
                 </div>
             ) : null}
             <div style={{
-                display: "flex", height: 70, border: isHover ? "1px solid #f85a3e" : "var(--Container, #212121)", borderRadius: 8, background: isHover ? "var(--Container, #212121)" : "var(--Container, #212121)",
+                display: "flex", height: 70, border: isHover ? "1px solid #f85a3e" : "var(--Container, #212121)", borderRadius: 4, background: isHover ? "var(--Container, #212121)" : "var(--Container, #212121)",
                 alignItems: "center", justifyContent: "center",
             }}
             >
                 <Button
                     fullWidth
-                    color="secondary"
                     style={{
                         height: "100%",
                         width: "100%",
-                        display: "grid"
+                        display: "grid",
+                        backgroundColor: themeMode === "dark" ? "#212121" : "#F5F5F5",
                     }}
                     onClick={(event) => {
                         if (onNodeSelect !== undefined) {
diff --git a/frontend/src/components/AppStats.jsx b/frontend/src/components/AppStats.jsx
index d23d0833..ec873283 100644
--- a/frontend/src/components/AppStats.jsx
+++ b/frontend/src/components/AppStats.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 
 import classNames from "classnames";
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 
 import {
 	Tooltip,
@@ -14,6 +14,7 @@ import {
 	Chip,
 	Checkbox,
 } from "@mui/material";
+import { Context } from '../context/ContextApi.jsx';
 
 import { 
 	BarChart,
@@ -73,6 +74,8 @@ const inputdata = {
 
 const LineChartWrapper = ({keys, inputname, height, width}) => {
   const [hovered, setHovered] = useState("");
+  const {themeMode} = useContext(Context);
+	const theme = getTheme(themeMode)
 
 	//console.log("Date: ", new Date("2019-11-14T08:00:00.000Z"))
 	//var inputdata = keys.data
@@ -166,6 +169,8 @@ const AppStats = (defaultprops) => {
   const [searches, setSearches] = useState([]);
   const [clickData, setClickData] = useState(undefined);
   const [conversionData, setConversionData] = useState(undefined);
+  const {themeMode} = useContext(Context);
+	const theme = getTheme(themeMode)
 
 	const handleDataSetting = (inputdata, grouping) => {
 		var newlist = [] 
@@ -292,7 +297,7 @@ const AppStats = (defaultprops) => {
 		textAlign: "center", 
 		padding: 40, 
 		margin: 5, 
-		backgroundColor: theme.palette.inputColor,
+		backgroundColor: theme.palette.surfaceColor,
 	}
 
 	console.log("Widget: ", widgetData)
diff --git a/frontend/src/components/Appsearch.jsx b/frontend/src/components/Appsearch.jsx
index 732a8a18..d13eb9a1 100644
--- a/frontend/src/components/Appsearch.jsx
+++ b/frontend/src/components/Appsearch.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import ReactGA from 'react-ga4';
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import {Link} from 'react-router-dom';
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 import { toast } from 'react-toastify';
-
+import { Context } from '../context/ContextApi.jsx';
 //import algoliasearch from 'algoliasearch/lite';
 import algoliasearch from 'algoliasearch';
 import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
@@ -23,7 +23,8 @@ import aa from 'search-insights'
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const Appsearch = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, userdata, cy, isCreatorPage, actionImageList, setActionImageList, setUserSpecialzedApp }  = props
-
+	const { themeMode } = useContext(Context)
+	const theme = getTheme(themeMode)
     const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
@@ -54,10 +55,10 @@ const Appsearch = props => {
 					autoComplete="off"
 					autocomplete="off"
 					fullWidth
-					style={{backgroundColor: "#2F2F2F", borderRadius: borderRadius, width: "100%",}} 
+					style={{backgroundColor: theme.palette.textFieldStyle.backgroundColor, borderRadius: borderRadius, width: "100%",}} 
 					InputProps={{
 						style:{
-							color: "white",
+							color: theme.palette.textFieldStyle.color,
 							fontSize: "1em",
 							height: 50,
 						},
@@ -93,7 +94,7 @@ const Appsearch = props => {
 			<Grid container spacing={0} style={{border: "1px solid rgba(255,255,255,0.2)", maxHeight: 250, minHeight: 250, overflowY: "auto", overflowX: "hidden", }}>
 				{hits.map((data, index) => {
 					const paperStyle = {
-						backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : "#2F2F2F",
+						backgroundColor: index === mouseHoverIndex ? theme.palette.hoverColor : theme.palette.textFieldStyle.backgroundColor,
 						color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)", 
 						// border: newSelectedApp.objectID !== data.objectID ? `1px solid rgba(255,255,255,0.2)` : "2px solid #f86a3e", 
 						textAlign: "left",
diff --git a/frontend/src/components/Billing.jsx b/frontend/src/components/Billing.jsx
index 8663fdc2..b0e85c8d 100644
--- a/frontend/src/components/Billing.jsx
+++ b/frontend/src/components/Billing.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useContext, memo, useMemo } from "react";
+import React, { useState, useEffect, memo, useMemo, useContext } from "react";
 import ReactGA from 'react-ga4';
-
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import countries from "../components/Countries.jsx";
+
 import {
 	Box,
 	Paper,
@@ -26,7 +26,10 @@ import {
 	DialogContentText,
 	DialogActions,
 	LinearProgress,
-	Slider
+	Slider,
+	Tabs,
+	Tab,
+	CircularProgress,
 } from "@mui/material";
 
 import { useNavigate, Link, json } from "react-router-dom";
@@ -43,6 +46,8 @@ import {
 	Cloud,
 	CheckCircle,
 	Padding,
+	Edit,
+	Search as SearchIcon
 } from "@mui/icons-material";
 
 //import { useAlert 
@@ -52,11 +57,14 @@ import { handlePayasyougo } from "../views/HandlePaymentNew.jsx"
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Context } from "../context/ContextApi.jsx";
 import LicencePopup from "./LicencePopup.jsx";
+import { DataGrid } from "@mui/x-data-grid";
 
 const Billing = memo((props) => {
 	const { globalUrl, userdata, serverside, billingInfo, stripeKey,isLoaded, selectedOrganization, handleGetOrg, clickedFromOrgTab, removeCookie} = props;
 	//const alert = useAlert();
 	let navigate = useNavigate();
+	const { themeMode, brandColor,supportEmail } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
 	const [isLoggedIn, setIsLoggedIn] = useState(false)
 	const [selectedDealModalOpen, setSelectedDealModalOpen] = React.useState(false);
 	const [dealList, setDealList] = React.useState([]);
@@ -78,6 +86,9 @@ const Billing = memo((props) => {
 	const [deleteAlertIndex, setDeleteAlertIndex] = useState(-1);
 	const [deleteAlertVerification, setDeleteAlertVerification] = useState(false);
 	const [isScale, setIsScale] = useState(false);
+	const [currentTab, setCurrentTab] = useState(0)
+	const [allChildOrgs, setAllChildOrgs] = useState([])
+	const [allChildOrgsStats, setAllChildOrgsStats] = useState([])
 
 	useEffect(() => {
 		if (userdata.app_execution_limit !== undefined && userdata.app_execution_usage !== undefined) {
@@ -85,6 +96,7 @@ const Billing = memo((props) => {
 			setCurrentAppRunsInPercentage(Math.round(percentage));
 			setCurrentAppRunsInNumber(userdata.app_execution_limit - userdata.app_execution_usage);
 		}
+
 		if (userdata?.id?.length > 0 && isLoggedIn === false){
 			setIsLoggedIn(true)
 		}
@@ -92,6 +104,17 @@ const Billing = memo((props) => {
 
 	const [BillingEmail, setBillingEmail] = useState(selectedOrganization?.Billing?.Email);
 
+	useEffect(() => {
+		const urlIncludesProfessionalServices = window.location.href.includes("professional-services");
+		if (props?.isCloud && urlIncludesProfessionalServices) {
+			const professionalServicesSection =
+			document.getElementById("professional-services");
+			if (professionalServicesSection) {
+				professionalServicesSection.scrollIntoView({ behavior: "smooth" });
+			}
+		}
+	}, []);
+
 	useEffect(() => {
 		if (BillingEmail !== selectedOrganization?.Billing?.Email) {
 			setBillingEmail(selectedOrganization?.Billing?.Email);
@@ -337,6 +360,7 @@ const Billing = memo((props) => {
 		const [tosChecked, setTosChecked] = React.useState(subscription.eula_signed)
 		const [hovered, setHovered] = React.useState(false)
 		const [newBillingEmail, setNewBillingEmail] = useState('');
+		const {supportEmail} = useContext(Context);
 
 		var top_text = "Base Cloud Access"
 		if (subscription.limit === undefined && subscription.level === undefined || subscription.level === null || subscription.level === 0) {
@@ -537,7 +561,7 @@ const Billing = memo((props) => {
 							Accept
 						</Typography>
 						<Typography variant="body2" style={{ display: "inline-block", marginLeft: 10, }} color="textSecondary">
-							By clicking the “accept” button, you are signing the document, electronically agreeing that it has the same legal validity and effects as a handwritten signature, and that you have the competent authority to represent and sign on behalf an entity. Need support or have questions? Contact us at support@shuffler.io.
+							By clicking the “accept” button, you are signing the document, electronically agreeing that it has the same legal validity and effects as a handwritten signature, and that you have the competent authority to represent and sign on behalf an entity. Need support or have questions? Contact us at {supportEmail}
 						</Typography>
 
 						<div style={{ display: "flex", marginTop: 25, }}>
@@ -1066,12 +1090,12 @@ const Billing = memo((props) => {
 				padding: 20,
 				// maxWidth: 400,
 				width: "100%",
-				height: 480,
-				backgroundColor: hovered ? "#2b2b2b" : "#1e1e1e",
+				height: 500,
+				backgroundColor: hovered ? theme.palette.cardHoverColor : theme.palette.cardBackgroundColor,
 				borderRadius: theme.palette?.borderRadius * 2,
 				border: "1px solid rgba(255,255,255,0.3)",
 				marginRight: 10,
-				marginTop: 15,
+					marginTop: 15,
 			}}
 				onMouseEnter={() => setHovered(true)}
 				onMouseLeave={() => setHovered(false)}>
@@ -1138,12 +1162,12 @@ const Billing = memo((props) => {
 						Features
 					</Typography>
 					<ul>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary" style={{}}>
 								Build custom apps, integrations, and worklows for your specific use cases or applications
 							</Typography>
 						</li>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary" style={{}}>
 								Help solve / debug / update / add features and capabilities of the platform
 							</Typography>
@@ -1154,15 +1178,13 @@ const Billing = memo((props) => {
 					<Button
 						fullWidth
 						disabled={false}
-						variant="outlined"
+						variant="contained"
 						color="primary"
 						style={{
-							marginTop: userdata.support ? 0 : 10,
+							marginTop: userdata.support ? 3 : 15,
 							borderRadius: 4,
 							height: 40,
 							fontSize: 16,
-							color: "#1A1A1A",
-							backgroundColor: "#FF8544",
 							textTransform: 'none',
 						}}
 						onClick={() => {
@@ -1228,7 +1250,7 @@ const Billing = memo((props) => {
 								variant="outlined"
 								color="primary"
 								style={{
-									marginTop: userdata.support ? 5 : 10,
+									marginTop: userdata.support ? 10 : 15,
 									borderRadius: 4,
 									height: 40,
 									fontSize: 16,
@@ -1354,7 +1376,7 @@ const Billing = memo((props) => {
 					toast.success("Your request for private training has been submitted successfully. We will get back to you soon.")
 					setOpenPrivateTraining(false)
 				} else {
-					toast.error("Failed sending request for private training. Please try again later or contact support@shuffler.io for help.")
+					toast.error(`Failed sending request for private training. Please try again later or contact support@shuffler.io for help.`)
 				}
 			})
 		}
@@ -1363,10 +1385,10 @@ const Billing = memo((props) => {
 			<div
 				style={{
 					padding: 20,
-					height: 480,
+					height: 500,
 					// maxWidth: 400,
 					width: "100%",
-					backgroundColor: hovered ? "#2b2b2b" : "#1e1e1e",
+					backgroundColor: hovered ? theme.palette.cardHoverColor : theme.palette.cardBackgroundColor,
 					borderRadius: theme.palette?.borderRadius * 2,
 					border: "1px solid rgba(255,255,255,0.3)",
 					marginRight: 10,
@@ -1387,12 +1409,12 @@ const Billing = memo((props) => {
 						Public Training
 					</Typography>
 					<ul>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary">
 								Public course on Automation for Security Professionals
 							</Typography>
 						</li>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary">
 								Covers Shuffle Platform, Apps, Workflows, Usecases, JSON, Liquid Formatting, and more.
 							</Typography>
@@ -1402,12 +1424,12 @@ const Billing = memo((props) => {
 						Private Training
 					</Typography>
 					<ul>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary">
 								Everything from Public Training
 							</Typography>
 						</li>
-						<li>
+						<li style={{color : theme.palette.text.primary}}>
 							<Typography variant="body2" color="textPrimary" >
 								Customized for your team’s usecases, date and time, location, and more.
 							</Typography>
@@ -1425,9 +1447,7 @@ const Billing = memo((props) => {
 							borderRadius: 4,
 							height: 40,
 							fontSize: 16,
-							color: "#1A1A1A",
 							textTransform: 'none',
-							backgroundColor: "#FF8544",
 							width: "100%",
 						}}
 						onClick={() => {
@@ -1971,16 +1991,18 @@ const Billing = memo((props) => {
 				<div style={{ width: "100%",}}>
 				{addDealModal}
 			{clickedFromOrgTab ?
-				<Typography style={{fontSize: 24, fontWeight: "bold", marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Billing & Licensing</Typography> :
+				<Typography variant="h5" style={{fontSize: 24, fontWeight: 500, marginBottom: 8, marginTop: 0, }}>Billing & Licensing</Typography> :
 				<Typography variant="h4" style={{ marginTop: 20, marginBottom: 10 }}>
 					Billing	& Licensing
 				</Typography>}
-			{clickedFromOrgTab ?
-				<span style={{ color: "#9E9E9E", fontSize: 16 }}>{isCloud ?
+			{userdata?.org_status?.includes("integration_partner") && userdata?.org_status?.includes("sub_org") ? null : 
+			<>
+				{clickedFromOrgTab ?
+				<Typography variant="body2" color="textSecondary" style={{ fontSize: 16 }}>{isCloud ?
 					"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
 					:
 					"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
-				}</span> :
+				}</Typography> :
 				<Typography variant="body1" color="textSecondary" style={{ marginTop: 0, marginBottom: 10, fontSize: 16 }}>
 					{isCloud ?
 						"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
@@ -1988,9 +2010,10 @@ const Billing = memo((props) => {
 						"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
 					}
 				</Typography>}
+			</>  }
 
 			{userdata.support === true ?
-				<div style={{ marginBottom: 10, marginTop: clickedFromOrgTab ? 16 : null, color: clickedFromOrgTab ? "#F1F1F1" : null }}>
+				<Typography style={{ marginBottom: 10, marginTop: clickedFromOrgTab ? 16 : null, color: clickedFromOrgTab ? theme.palette.text.primary : null }}>
 					For sales: Create&nbsp;
 					<a href={"https://docs.google.com/document/d/1N-ZJNn8lWaqiXITrqYcnTt53oXGLNYFEzc5PU-tdAps/copy"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#FF8444" }}>
 						EU contract
@@ -2007,7 +2030,7 @@ const Billing = memo((props) => {
 					<a href={"https://github.com/Shuffle/Shuffle-docs/tree/master/handbook/Sales"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#FF8444" }}>
 						Sales Process (old)
 					</a>
-				</div>
+				</Typography>
 				:
 				null
 			}
@@ -2015,11 +2038,11 @@ const Billing = memo((props) => {
 
 			{isChildOrg ?
 				<Typography variant="h6" style={{ marginBottom: 50, }}>
-					Licensing is handled by your parent organisation. Reach out to support@shuffler.io if you have questions about this.
+					Licensing is handled by your parent organisation. Reach out to {supportEmail} if you have questions about this.
 				</Typography>
 				: null}
 
-			<div style={{ display: "flex", width: clickedFromOrgTab ? "100%" : "auto", overflowX: 'auto', overflowY: 'hidden', scrollbarWidth: 'thin', scrollbarColor: '#494949 #2f2f2f', height: isChildOrg ? 0 : "100%", marginTop: 20}} >
+			<div style={{ display: "flex", width: clickedFromOrgTab ? "100%" : "auto", overflowX: 'auto', overflowY: 'hidden', scrollbarWidth: 'thin', scrollbarColor: theme.palette.scrollbarColor, height: isChildOrg ? 0 : "100%", marginTop: 20}} >
 				<div style={{ display: "flex", flexDirection: "column", width: "100%",  }}>
 				{/* {isCloud &&
 					selectedOrganization.subscriptions !== undefined &&
@@ -2354,13 +2377,13 @@ const Billing = memo((props) => {
 			  </div>
             ) : null*/}
 			{!isChildOrg && isCloud && (
-				<div style={{ display: 'flex', flexDirection: 'column', marginTop: 50, maxWidth: 860 }}>
-					<Typography style={{ marginBottom: 5, fontSize: 24, fontWeight: "bold" }}>
+				<div style={{ display: 'flex', flexDirection: 'column', marginTop: 50, maxWidth: 860 }} id="professional-services">
+					<Typography variant="h6" style={{ marginBottom: 5, fontSize: 24, fontWeight: 500 }}>
 						Professional Services
 					</Typography>
-					<Typography color="textSecondary" style={{fontSize: 16,}}>
-						We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at support@shuffler.io.
-					</Typography>
+					<Typography variant="body2" color="textSecondary" style={{fontSize: 16,}}>
+						We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at {supportEmail}.
+					</Typography>We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at
 					<div style={{ display: 'flex', flexDirection: 'row', marginTop: 5, }}>
 						{billingInfo.subscription !== undefined && billingInfo.subscription !== null ? (
 							isChildOrg ? null : (
@@ -2426,14 +2449,16 @@ const Billing = memo((props) => {
 							 <TextField
 								style={{
 								marginTop: 10,
-								backgroundColor: "#212121",
+								backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+										color: theme.palette.textFieldStyle.color,
+								borderRadius: theme.palette.textFieldStyle.borderRadius,
 								width: 250,
 								height: 50,
 								}}
 								InputProps={{
 								style: {
 									height: 50,
-									color: 'white',
+									color: theme.palette.textFieldStyle.color,
 								},
 								endAdornment: '%',
 								}}
@@ -2456,14 +2481,16 @@ const Billing = memo((props) => {
 									style={{
 									marginTop: 10,
 									height: 50,
-									backgroundColor: "#212121",
+										backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+									color: theme.palette.textFieldStyle.color,
 									width: 250,
-									marginLeft: 15,
+										marginLeft: 15,
+									borderRadius: theme.palette.textFieldStyle.borderRadius,
 									}}
 									InputProps={{
 									style: {
 										height: 50,
-										color: 'white',
+										color: theme.palette.textFieldStyle.color,
 									},
 									}}
 									InputLabelProps={{
@@ -2505,7 +2532,7 @@ const Billing = memo((props) => {
 								  setDeleteAlertIndex(index);
 								}}
 							  >
-								<DeleteIcon sx={{ color: theme.palette.secondary.main }} />
+								<DeleteIcon sx={{ color: themeMode === "dark" ? "rgba(255,255,255,0.7)" : "#666666" }} />
 							  </Button>
 							)}
 							<Dialog
@@ -2525,8 +2552,9 @@ const Billing = memo((props) => {
 								  Cancel
 								</Button>
 								<Button
-								  style={{ textTransform: 'none', fontSize: 16 }}
-								  color="secondary"
+								style={{ textTransform: 'none', fontSize: 16 }}
+								variant="outlined"
+								  color="primary"
 								  onClick={() => {
 									handleDeleteAlertThreshold(deleteAlertIndex);
 									setDeleteAlertVerification(false);
@@ -2569,13 +2597,64 @@ const Billing = memo((props) => {
 					Utilization & Stats
 				</Typography>
 			</div>
-			<BillingStats
-				isCloud={isCloud}
-				clickedFromOrgTab={clickedFromOrgTab}
-				globalUrl={globalUrl}
-				selectedOrganization={selectedOrganization}
-				userdata={userdata}
-			/>	
+			 {isChildOrg ? (
+				<BillingStats
+					isCloud={isCloud}
+					clickedFromOrgTab={clickedFromOrgTab}
+					globalUrl={globalUrl}
+					selectedOrganization={selectedOrganization}
+					userdata={userdata}
+				/>
+				): (
+					<>
+					<Tabs
+					value={currentTab}
+					onChange={(event, newValue) => setCurrentTab(newValue)}
+					style={{ marginTop: 20 }}
+					TabIndicatorProps={{
+						style: {
+						height: 3,
+						backgroundColor: theme.palette.primary.main,
+						marginLeft: 12,
+						marginRight: 12,
+						}
+					}}
+					>
+					<Tab
+						label="Parent Organization"
+						style={{ textTransform: 'none', fontSize: 16, minWidth: 'auto', paddingLeft: 12, paddingRight: 12 }}
+					/>
+					<Tab
+						label="Child Organization"
+						style={{ textTransform: 'none', fontSize: 16, minWidth: 'auto', paddingLeft: 12, paddingRight: 12 }}
+					/>
+					</Tabs>
+
+					{currentTab === 0 ? (
+						<div style={{ marginTop: 30,}}>
+							<BillingStats
+							isCloud={isCloud}
+							clickedFromOrgTab={clickedFromOrgTab}
+							globalUrl={globalUrl}
+							selectedOrganization={selectedOrganization}
+							userdata={userdata}
+						/>
+						</div>
+					): (
+						<BillingStatsChildOrg
+							isCloud={isCloud}
+							clickedFromOrgTab={clickedFromOrgTab}
+							globalUrl={globalUrl}
+							selectedOrganization={selectedOrganization}
+							userdata={userdata}
+							allChildOrgs={allChildOrgs}
+							setAllChildOrgs={setAllChildOrgs}
+							allChildOrgsStats={allChildOrgsStats}
+							setAllChildOrgsStats={setAllChildOrgsStats}
+						/>
+						)}
+					</>
+				)}
 			</div>
 		</Wrapper>
 	)
@@ -2583,19 +2662,473 @@ const Billing = memo((props) => {
 
 export default memo(Billing);
 
-const PaddingWrapper = memo(({ clickedFromOrgTab, children }) => {
+const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization, allChildOrgs, setAllChildOrgs, allChildOrgsStats, setAllChildOrgsStats }) => {
+	const [subOrgStats, setSubOrgStats] = useState([]);
+	const [subOrgs, setSubOrgs] = useState([]);
+	const [subOrgStatsRows, setSubOrgStatsRows] = useState([]);
+	const [subOrgStatsColumns, setSubOrgStatsColumns] = useState([]);
+	const [allOrgLoaded, setAllOrgLoaded] = useState(false);
+	const [allOrgStatsLoaded, setAllOrgStatsLoaded] = useState(false);
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const [open, setOpen] = useState(false);
+	const [editing, setEditing] = useState("")
+	const [editingOrgId, setEditingOrgId] = useState("")
+	const [limit, setLimit] = useState("")
+	const [tableCreated, setTableCreated] = useState(false)
+	const [searchQuery, setSearchQuery] = useState("");
+	const [filteredRows, setFilteredRows] = useState([]);
+	const { themeMode, brandColor, supportEmail } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
+
+	// Handle page change
+	const handleChangePage = (event, newPage) => {
+	  setPage(newPage);
+	};
   
+	const handleChangeRowsPerPage = (event) => {
+	  setRowsPerPage(parseInt(event.target.value, 10));
+	  setPage(0);
+	};
+  
+	const HanldeLoadStats = async () => {
+		const childOrgs = selectedOrganization.child_orgs;
+		if (allChildOrgsStats.length > 0){
+			setSubOrgStats(allChildOrgsStats)
+			setAllOrgStatsLoaded(true)
+			if (allChildOrgsStats.length > 0 && allChildOrgs.length > 0 && subOrgStatsRows.length === 0 && subOrgStatsColumns.length === 0) {
+				HandleCreateTable(allChildOrgsStats, allChildOrgs)
+			}
+			return
+		}
+		const promises = childOrgs.map((org) => {
+			// get org stats base on region url
+			const baseUrl = org?.region_url?.length > 0 && !window?.location?.origin?.includes("localhost") ? org?.region_url : globalUrl;
+			const url = `${baseUrl}/api/v1/orgs/${org.id}/stats`;
+			return fetch(url, {
+				method: "GET",
+				credentials: "include",
+				headers: {
+					"Content-Type": "application/json",
+				},
+			}).then((res) => res.json());
+		});
+	
+		try {
+			const responses = await Promise.all(promises);
+			setSubOrgStats(responses);
+			setAllChildOrgsStats(responses);
+			setAllOrgStatsLoaded(true);
+		} catch (error) {
+			console.error("Error loading stats:", error);
+		}
+	};
+	
+	
+
+	const HandleGetSuborg = async () => {
+		const childOrgs = selectedOrganization.child_orgs
+
+		if (allChildOrgs.length > 0){
+			setSubOrgs(allChildOrgs)
+			setAllOrgLoaded(true)
+			if (allChildOrgsStats.length > 0 && allChildOrgs.length > 0 && subOrgStatsRows.length === 0 && subOrgStatsColumns.length === 0) {
+				HandleCreateTable(allChildOrgsStats, allChildOrgs)
+			}
+			return
+		}
+
+		const promises = childOrgs.map((org) => {
+			const baseUrl = org?.region_url?.length > 0 && !window?.location?.origin?.includes("localhost") ? org?.region_url : globalUrl;
+			const url = `${baseUrl}/api/v1/orgs/${org.id}`;
+			return fetch(url, {
+				method: "GET",
+				credentials: "include",
+				headers: {
+					"Content-Type": "application/json",
+				},
+			}).then((res) => res.json());
+		});
+		try {
+			const responses = await Promise.all(promises);
+			setSubOrgs(responses);
+			setAllChildOrgs(responses);
+			setAllOrgLoaded(true);
+		} catch (error) {
+			console.error("Error loading suborgs:", error);
+		}
+	};
+
+	useEffect(() => {
+		if (subOrgStats.length === 0 && selectedOrganization && selectedOrganization?.child_orgs?.length > 0) {
+			HanldeLoadStats()
+		}
+		if (subOrgs.length === 0 && selectedOrganization && selectedOrganization?.child_orgs?.length > 0) {
+			HandleGetSuborg()
+		}
+
+	}, [selectedOrganization?.child_orgs]);
+
+
+	useEffect(() => {
+
+		if (allOrgLoaded && allOrgStatsLoaded && !tableCreated) {
+			HandleCreateTable(subOrgStats, subOrgs)
+		}
+	}
+	, [allOrgLoaded, allOrgStatsLoaded, tableCreated])
+
+	
+	const HandleCreateTable = (subOrgStats, subOrgs) => {
+		
+		if (subOrgStats.length === 0 || subOrgs.length === 0) return;
+
+		// check whether all of the suborg.success is false
+		const allSubOrgStatsSuccess = subOrgStats.every((stat) => stat.success === false);
+		const allSubOrgsSuccess = subOrgs.every((org) => org.success === false);
+
+		if (allSubOrgStatsSuccess || allSubOrgsSuccess) {
+			setSubOrgStats([])
+			setSubOrgs([])
+			setTableCreated(true)
+			return
+		}
+
+		const rows = subOrgStats.map((stat, index) => {
+			const subOrg = subOrgs[index]
+			if (!subOrg) return null;
+			return {
+				id: index,
+				name: subOrg.name,
+				orgId: subOrg.id,
+				limit: subOrg?.sync_features?.app_executions?.limit || "N/A",
+				usage: stat?.monthly_app_executions || "N/A",
+				workflows_usage: stat?.total_workflow_executions || "N/A",
+				workflow_usage_limit: subOrg?.sync_features?.workflow_executions?.limit || "N/A",
+			}
+		})
+
+		setSubOrgStatsRows(rows)
+
+		const columns = [
+			{ field: "id", headerName: "ID", width: 100 },
+			{ field: "name", headerName: "Name", width: 200 },
+			{ field: "usage", headerName: "App Execution Usage", width: 200 },
+			{ 
+				field: "limit", headerName: "App Execution Limit", width: 200, renderCell: (params) => {
+					return (
+						<>
+						<Typography style={{ fontSize: 16 }}>
+						{params.value}
+						<IconButton
+							style={{ color: theme.palette.primary.main }}
+							onClick={() => {
+								setOpen(true)
+								setEditingOrgId(params.row.orgId)
+								setEditing("app_executions")
+								if (params.value === "N/A") {
+									setLimit("")
+								} else {
+									setLimit(params.value)
+								}
+							}}
+						>
+							<Edit/>
+						</IconButton>
+						</Typography>
+						</>
+					)
+				}
+				},
+				{ field: "workflows_usage", headerName: "Workflow Execution Usage", width: 200 },
+				{ field: "workflow_usage_limit", headerName: "Workflow Execution Limit", width: 200, renderCell: (params) => {
+				return (
+					<>
+						<Typography style={{ fontSize: 16 }}>
+						{params.value}
+						</Typography>
+						<IconButton
+							style={{ color: theme.palette.primary.main }}
+							onClick={() => {
+								setOpen(true)
+								setEditingOrgId(params.row.orgId)
+								setEditing("workflow_executions")
+								if (params.value === "N/A") {
+									setLimit("")
+								} else {
+									setLimit(params.value)
+								}
+							}}
+						>
+							<Edit/>
+						</IconButton>
+					</>
+				)}
+			},
+		]
+
+		setSubOrgStatsColumns(columns)
+
+		if (allOrgLoaded && allOrgStatsLoaded && !tableCreated) {
+			setTableCreated(true)
+		}
+	}
+
+	
+
+	const HandleEditLimit = (orgId, editing, limit) => {
+
+
+		// change limit as number if string
+		if (typeof limit === "string") {
+			limit = parseInt(limit, 10)
+		}
+		if (isNaN(limit)) {
+			toast.error("Please enter a valid number")
+			return
+		}
+
+		if (selectedOrganization.sync_features.app_executions.limit <= 10000) {
+			toast.error("Insufficient app execution limit to increase child org limit")
+			return
+		}
+
+		// check whether limit is greater than than parent org limit
+		if (editing === "app_executions" && limit > selectedOrganization.sync_features.app_executions.limit && !userdata.support) {
+			toast.error("App execution limit cannot be greater than parent org limit")
+			return
+		}
+
+
+		if (editing === "workflow_executions" && limit > selectedOrganization.sync_features.workflow_executions.limit && !userdata.support) {
+			toast.error("Workflow execution limit cannot be greater than parent org limit")
+			return
+		}
+
+		// find the org in the subOrgs array
+		const orgIndex = subOrgs.findIndex((org) => org.id === orgId)
+		if (orgIndex === -1) {
+			toast.error("Organization not found")
+			return
+		}
+
+		const org = subOrgs[orgIndex]
+
+		org.sync_features[editing].limit = limit
+		org.sync_features.editing = true
+		const sync_features = org.sync_features
+		const data = {
+			org_id: orgId,
+            sync_features: sync_features,
+		}
+
+		const url = `${globalUrl}/api/v1/orgs/${orgId}`;
+		fetch(url, {
+			method: "POST",
+			credentials: "include",
+			crossDomain: true,
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(data),
+		}).then((response) =>
+				response.json().then((responseJson) => {
+					if (responseJson["success"] === false) {
+						toast("Failed updating org: ", responseJson.reason);
+					} else {
+						toast("Successfully change suborg limit!");
+						if (editing === "app_executions") {
+							setSubOrgStatsRows((prevRows) => {
+								const newRows = [...prevRows];
+								newRows[orgIndex].limit = limit;
+								return newRows;
+							});
+						}else if (editing === "workflow_executions") {
+							setSubOrgStatsRows((prevRows) => {
+								const newRows = [...prevRows];
+								newRows[orgIndex].workflow_usage_limit = limit;
+								return newRows;
+							});
+						}
+					}
+				})
+			)
+			.catch((error) => {
+				toast("Err: " + error.toString());
+		});
+
+	}
+
+	const HandleClosePopUP = () => {
+		setOpen(false)
+		setEditing("")
+		setEditingOrgId("")
+		setLimit("")
+	}
+
+	return (
+		<div style={{ display: "flex", flexDirection: "column", marginTop: 30, minHeight: 300, marginBottom: 200,  }}>
+			{open && (
+				<IncreaseLimitPopUp open={open} onClose={HandleClosePopUP} limit={limit} HandleEditLimit={HandleEditLimit} setLimit={setLimit} editing={editing} setEditing={setEditing} editingOrgId={editingOrgId} setEditingOrgId={setEditingOrgId}/>
+			)}
+			<Typography style={{ marginBottom: 5, fontSize: 24, fontWeight: "bold" }}>
+				Child Organizations
+			</Typography>
+			<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10}}>
+				<Typography color="textSecondary" style={{ marginTop: 10, fontSize: 16 }}>
+					View and configure execution limits for child organizations. Click the edit icon to modify app and workflow execution limits.
+				</Typography>      
+			</div>
+			{tableCreated ? (
+				subOrgStatsRows.length > 0 && subOrgStatsColumns.length > 0 ? (
+					<>
+						<TextField 
+							style={{ marginBottom: 10, width: 500, marginTop: 20 }} 
+							variant="outlined" 
+							placeholder="Search organizations by name or ID" 
+							value={searchQuery}
+							fullWidth
+							InputProps={{
+								style: {
+									fontSize: "1em",
+									height: 51,
+									width: 693,
+									borderRadius: 4,
+								},
+								startAdornment: (
+									<InputAdornment position="start">
+										<SearchIcon style={{ marginLeft: 5}} />
+									</InputAdornment>
+								),
+							}}
+							onChange={(e) => {
+								setSearchQuery(e.target.value.toLowerCase());
+								const filtered = subOrgStatsRows.filter((row) =>
+									row.name.toLowerCase().includes(e.target.value.toLowerCase().trim()) ||
+									row.orgId.toLowerCase().includes(e.target.value.toLowerCase().trim())
+								);
+								setFilteredRows(filtered);
+							}}
+						/>
+						<DataGrid
+							rows={searchQuery ? filteredRows : subOrgStatsRows}
+							columns={subOrgStatsColumns}
+							pageSize={rowsPerPage}
+							rowsPerPageOptions={[5, 10, 25, 50]}
+							onPageChange={handleChangePage}
+							onPageSizeChange={handleChangeRowsPerPage}
+							autoHeight
+							style={{ height: "300px", width: "100%", backgroundColor: theme.palette.platformColor, color: theme.palette.text.primary }}
+						/>
+					</>
+				) : (
+					<Typography variant="h6" color="secondary" style={{ margin: "auto",}}>
+						{selectedOrganization.child_orgs.length === 0 ? "No child organizations exist." : "Unable to load child organization stats. Statistics may not be initialized yet." }
+					</Typography>
+				)
+			) : (
+				<div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%", margin: 'auto'}}>
+					<CircularProgress style={{ color: "#FF8444" }} />
+				</div>
+			)}
+		</div>
+	);
+});
+
+const IncreaseLimitPopUp = memo(({ open, onClose, limit, setLimit, HandleEditLimit, editingOrgId, editing}) => {
+	const [currentLimit, setCurrentLimit] = useState(limit)
+
+	const { themeMode, brandColor } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
+
+	return(
+		<Dialog open={open} onClose={onClose}
+		 PaperProps={{
+			sx: {
+			borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+			border: theme?.palette?.DialogStyle?.border,
+			fontFamily: theme?.typography?.fontFamily,
+			backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+			zIndex: 1000,
+			'& .MuiDialogContent-root': {
+				backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+			},
+			'& .MuiDialogTitle-root': {
+				backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+			},
+			'& .MuiDialogActions-root': {
+				backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+			},
+			}
+		}}
+	>
+			<DialogTitle style={{ fontSize: 24, fontWeight: "bold" }}>
+				Increase {editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())} Limit
+			</DialogTitle>
+			<DialogContent>
+			<TextField 
+				value={currentLimit}
+				onChange={(e) => setCurrentLimit(e.target.value)}
+				label={`${editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())} Limit`}
+				type="string"
+				variant="outlined"
+				fullWidth
+				InputProps={{
+					style: {
+						color: theme.palette.text.primary,
+					},
+				}}
+				InputLabelProps={{
+					style: {
+						color: theme.palette.text.primary,
+					},
+				}}
+				margin="normal"
+				onKeyUp={(e) => {
+					if (e.key === "Enter") {
+						HandleEditLimit(editingOrgId, editing, currentLimit)
+						setLimit(currentLimit)
+						onClose()
+					}}
+				}
+			></TextField>
+			 </DialogContent>
+			<DialogActions>
+				<Button onClick={onClose} style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginRight: 5, color: theme.palette.primary.main  }}>
+					Cancel
+				</Button>
+				<Button variant="contained" color="primary" onClick={() => {
+					HandleEditLimit(editingOrgId, editing, currentLimit)
+					setLimit(currentLimit)
+					onClose()
+				}} style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginRight: 10 }}>
+					Save
+				</Button>
+			</DialogActions>
+		</Dialog>
+	)
+})
+
+
+const PaddingWrapper = memo(({ clickedFromOrgTab, children }) => {
+	
+	const { themeMode, brandColor } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
+
 	const wrapperStyle = useMemo(() => ({
 	  width: clickedFromOrgTab 
 		? "100%"
 		: "auto",
 	  padding: "27px 10px 19px 27px", 
-	  backgroundColor: '#212121', 
+	  backgroundColor: theme.palette.platformColor, 
 	  height: '100%',
 	  boxSizing: 'border-box',
 	  overflow: 'hidden',
-	  maxHeight: "1700px", overflowY: "auto",scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'
-	}), [clickedFromOrgTab]);
+		maxHeight: "1700px",
+		overflowY: "auto",
+		scrollbarColor: theme.palette.scrollbarColorTransparent,
+		scrollbarWidth: 'thin'
+	}), [clickedFromOrgTab, theme]);
   
 	return (
 	  <div style={wrapperStyle}>
@@ -2604,9 +3137,9 @@ const PaddingWrapper = memo(({ clickedFromOrgTab, children }) => {
 	);
   });
   
-  const Wrapper = memo(({ children, clickedFromOrgTab }) => {
+const Wrapper = memo(({ children, clickedFromOrgTab }) => {
 	return (
-	  <PaddingWrapper clickedFromOrgTab={clickedFromOrgTab}>
+	  <PaddingWrapper  clickedFromOrgTab={clickedFromOrgTab}>
 		{children}
 	  </PaddingWrapper>
 	);
diff --git a/frontend/src/components/BillingStats.jsx b/frontend/src/components/BillingStats.jsx
index 231b5686..7b94c67c 100644
--- a/frontend/src/components/BillingStats.jsx
+++ b/frontend/src/components/BillingStats.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, memo, useMemo } from 'react';
 
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import classNames from "classnames";
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'
@@ -28,6 +28,7 @@ import {
 	Paper,
 	Chip,
 	Checkbox,
+	Box,
 } from "@mui/material";
 
 import { 
@@ -42,6 +43,8 @@ import { Context } from '../context/ContextApi.jsx';
 const LineChartWrapper = ({keys, inputname, height, width}) => {
   const [hovered, setHovered] = useState("");
 	const inputdata = keys.data === undefined ? keys : keys.data
+	const {themeMode} = useContext(Context)
+	const theme = getTheme(themeMode)
 	
 	return (
 		<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, padding: 30, marginTop: 15, backgroundColor: theme.palette.platformColor, overflow: "hidden", }}>
@@ -83,6 +86,8 @@ const AppStats = (defaultprops) => {
   const [workflows, setWorkflows] = useState(inputWorkflows === undefined ? [] : inputWorkflows)
   const [resultRows, setResultRows] = useState([])
   const [resultLoading, setResultLoading] = useState(true)
+  const { themeMode, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor)
   
   const includedExecutions = selectedOrganization?.sync_features?.app_executions !== undefined ? selectedOrganization?.sync_features?.app_executions?.limit : 0 
 
@@ -529,11 +534,14 @@ const AppStats = (defaultprops) => {
 
 	const paperStyle = {
 		textAlign: "center", 
-		padding: 40, 
-		margin: 5, 
-		backgroundColor: theme.palette.platformColor,
-		border: "1px solid rgba(255,255,255,0.3)",
-		maxWidth: 300,
+		padding: "40px", 
+		margin: "5px", 
+		backgroundColor: theme.palette.cardBackgroundColor,
+		border: theme.palette.defaultBorder,
+		maxWidth: "300px",
+		"&:hover": {
+			backgroundColor: theme.palette.cardHoverColor,
+		},
 	}
 
 	const columns: GridColDef[] = [
@@ -646,9 +654,9 @@ const AppStats = (defaultprops) => {
     <div className="content" style={{width: "100%", margin: "auto", }}>
 		<Typography style={{margin: "auto", marginLeft: 10, marginBottom: 20, fontSize: 16}} color="textSecondary">
 			All shown statistics are gathered from <a 
-				href={`${globalUrl}/api/v1/orgs/${selectedOrganization.id}/stats`} 
+				href={`${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/stats`} 
 				target="_blank"
-				style={{ textDecoration: "none", color: "#FF8444",}}
+				style={{ textDecoration: "none", color: theme.palette.linkColor,}}
 			>Your Organisation Statistics. </a>
 			It exists to give you more insight into your workflows, and to understand your utilization of the Shuffle platform. <b>The billing tracker is in Beta, and is always calculated manually before being invoiced.</b>
 		</Typography>
@@ -662,9 +670,9 @@ const AppStats = (defaultprops) => {
 							The cost of app runs in the selected period based on {filteredStatistics.monthly_app_executions} App Runs. These numbers do not exclude your included 10.000/month or {includedExecutions} App Runs per month. App Run cost: ${invocationCost}. 
 						</Typography>
 					}>
-						<Paper style={paperStyle}>
+						<Box sx={paperStyle}>
 							<Typography variant="h4">
-								${selectedOrganization.lead_info.customer === false && selectedOrganization.lead_info.pov === false ?
+								${selectedOrganization?.lead_info?.customer === false && selectedOrganization?.lead_info?.pov === false ?
 									0 
 									: 
 									apprunCost
@@ -673,57 +681,49 @@ const AppStats = (defaultprops) => {
 							<Typography variant="h6">
 								Period Cost
 							</Typography>
-						</Paper>
+						</Box>
 					</Tooltip>
 					<Tooltip title={
 						<Typography variant="body1" style={{padding: 10, }}>
 							App runs in the selected period
 						</Typography>
 					}>
-					<Paper style={paperStyle}>
+					<Box sx={paperStyle}>
 						<Typography variant="h4">
 							{filteredStatistics.monthly_app_executions === null || filteredStatistics.monthly_app_executions === undefined ? 0 : filteredStatistics.monthly_app_executions}
 						</Typography>
 						<Typography variant="h6">
 							App Runs 
 						</Typography>
-					</Paper>
+					</Box>
 					</Tooltip> 
 					<Tooltip title={
 						<Typography variant="body1" style={{padding: 10, }}>
 							Workflow runs in the selected period 
 						</Typography>
 					}>
-						<Paper style={paperStyle}>
+						<Box sx={paperStyle}>
 							<Typography variant="h4">
 								{filteredStatistics.monthly_workflow_executions === null || filteredStatistics.monthly_workflow_executions === undefined ? 0 : filteredStatistics.monthly_workflow_executions}
 							</Typography>
 							<Typography variant="h6">
 								Workflow Runs 
 							</Typography>
-						</Paper>
+						</Box>
 					</Tooltip>
 					<Tooltip title={
 						<Typography variant="body1" style={{padding: 10, }}>
 							Estimated cost to be billed at the end of the current month. Subtracted contractually included app runs. Actual cost month to date: ${monthToDateCost}. App Run cost: ${invocationCost}.
 						</Typography>
 					}>
-						<Paper style={{
-							textAlign: "center", 
-							padding: 40, 
-							margin: 5, 
-							marginLeft: clickedFromOrgTab? null:90, 
-							backgroundColor: theme.palette.platformColor,
-							border: "1px solid rgba(255,255,255,0.3)",
-							maxWidth: 300,
-						}}>
+						<Box sx={paperStyle}>
 							<Typography variant="h4">
 								${monthTotalCost}
 							</Typography>
 							<Typography variant="h6">
 								Estimated cost 
 							</Typography>
-						</Paper>
+						</Box>
 					</Tooltip>
 				</div>
 			: null}
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index f4b8b9cb..e28b73f5 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useContext, memo } from "react";
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import { toast } from 'react-toastify';
 import ReactJson from "react-json-view-ssr";
-
 import {
 	Typography,
     Tooltip,
@@ -103,7 +102,10 @@ const CacheView = memo((props) => {
 	const [selectedFileId, setSelectedFileId] = React.useState("");
     const [updateToThisCategory, setUpdateToThisCategory] = useState("")
 	const [showFileCategoryPopup, setShowFileCategoryPopup] = React.useState(false);
-  	const [selectedFiles, setSelectedFiles] = useState([]);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    
+    const { themeMode, brandColor } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
 
     useEffect(() => {
         if (orgId?.length > 0) {
@@ -357,12 +359,12 @@ const CacheView = memo((props) => {
             }}
         >
             <DialogTitle>
-                <span style={{ color: "white" }}>
+                <span style={{ color: theme.palette.text.primary }}>
                     { editCache ? "Edit Key" : "Add Key"}{selectedCategory === "" || selectedCategory === "default" ? "" : ` in category '${selectedCategory}'`}
                 </span>
 
             </DialogTitle>
-            <div style={{ paddingLeft: "30px", paddingRight: '30px', backgroundColor: "#212121", }}>
+            <div style={{ paddingLeft: "30px", paddingRight: '30px', backgroundColor: theme.palette.DialogStyle.backgroundColor, }}>
                 Key
                 <TextField
                     color="primary"
@@ -372,7 +374,7 @@ const CacheView = memo((props) => {
                     InputProps={{
                         style: {
                             height: "50px",
-                            color: "white",
+                            color: theme.palette.textFieldStyle.color,
                             fontSize: "1em",
                         },
                     }}
@@ -387,7 +389,7 @@ const CacheView = memo((props) => {
                     onChange={(e) => setKey(e.target.value)}
                 />
             </div>
-            <div style={{ paddingLeft: 30, paddingRight: 30, backgroundColor: "#212121" }}>
+            <div style={{ paddingLeft: 30, paddingRight: 30, backgroundColor: theme.palette.DialogStyle.backgroundColor }}>
 				<div style={{display: "flex", }}>
 					<Typography style={{marginTop: 25, marginBottom: 0, flex: 20, }}>
 						Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
@@ -408,7 +410,7 @@ const CacheView = memo((props) => {
                     style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, marginTop: 0, }}
                     InputProps={{
                         style: {
-                            color: "white",
+                            color: theme.palette.textFieldStyle.color,
                             fontSize: "1em",
                         },
                     }}
@@ -429,20 +431,19 @@ const CacheView = memo((props) => {
             </div>
             <DialogActions style={{ paddingLeft: "30px", paddingRight: '30px' }}>
                 <Button
-                    style={{ borderRadius: "2px", fontSize: 16, color: "#ff8544", textTransform:"none" }}
+                    style={{ borderRadius: "2px", fontSize: 16, color: theme.palette.primary.main, textTransform:"none" }}
                     onClick={() => {
 						setModalOpen(false)
                         setKey("")
 						setValue("")
 						setDataValue({})
 					}}
-                    color="primary"
                 >
                     Cancel
                 </Button>
                 <Button
                     variant="contained"
-                    style={{ borderRadius: "2px", backgroundColor: "#ff8544",color: "#1a1a1a", textTransform:"none" }}
+                    style={{ borderRadius: "2px", textTransform:"none" }}
                     onClick={() => {
                         if (value === "") {
                             toast("Key or Value can not be empty");
@@ -563,9 +564,9 @@ const CacheView = memo((props) => {
 		}}
 	>
 		<DialogTitle>
-			<div style={{ color: "rgba(255,255,255,0.9)" }}>
+			<Typography variant="h5" color="textPrimary">
 				Select sub-org to distribute Datastore key
-			</div>
+			</Typography>
 		</DialogTitle>
 		<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
 			<MenuItem value="none" onClick={()=> {handleSelectSubOrg(null, "none")}}>None</MenuItem>
@@ -608,7 +609,7 @@ const CacheView = memo((props) => {
 
 			<div style={{ display: "flex", marginTop: 20 }}>
 				<Button
-					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544"  }}
+					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: theme.palette.primary.main  }}
 					onClick={() => setShowDistributionPopup(false)}
 					color="primary"
 				>
@@ -616,7 +617,7 @@ const CacheView = memo((props) => {
 				</Button>
 				<Button
 					variant="contained"
-					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544", marginLeft: 10 }}
+					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginLeft: 10 }}
 					onClick={() => {
 						changeDistribution(selectedCacheKey, selectedSubOrg);
 					}}
@@ -630,27 +631,27 @@ const CacheView = memo((props) => {
     ) : null;
 
     return (
-        <div style={{paddingBottom: isSelectedDataStore?null:250, minHeight: 1000, boxSizing: "border-box", width: isSelectedDataStore? "100%" :null, transition: "width 0.3s ease", padding:isSelectedDataStore?"27px 10px 27px 27px":null, height: isSelectedDataStore?"100%":null, color: isSelectedDataStore?'#ffffff':null, backgroundColor: isSelectedDataStore?'#212121':null, borderTopRightRadius: isSelectedDataStore?'8px':null, borderBottomRightRadius: isSelectedDataStore?'8px':null, borderLeft: "1px solid #494949" }}>
+        <div style={{paddingBottom: isSelectedDataStore?null:250, minHeight: 1000, boxSizing: "border-box", width: isSelectedDataStore? "100%" :null, transition: "width 0.3s ease", padding:isSelectedDataStore?"27px 10px 27px 27px":null, height: isSelectedDataStore?"100%":null, color: isSelectedDataStore?'#ffffff':null, backgroundColor: isSelectedDataStore? theme.palette.platformColor :null, borderTopRightRadius: isSelectedDataStore?'8px':null, borderBottomRightRadius: isSelectedDataStore?'8px':null, borderLeft: theme.palette.defaultBorder }}>
             {modalView}
             {cacheDistributionModal}
-            <div style={{height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
-              <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'  }}>
+            <div style={{height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
+              <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'  }}>
               <div style={{ marginTop: isSelectedDataStore?null:20, marginBottom: 20 }}>
-                <h2 style={{ display: isSelectedDataStore?null: "inline" }}>Shuffle Datastore {selectedCategory === "" || selectedCategory === "default" ? "" : `- Category '${selectedCategory}'`}</h2>
-                <span style={{ marginLeft: isSelectedDataStore?null:25, color:isSelectedDataStore?"#9E9E9E":null}}>
+                <Typography variant="h5" style={{ display: isSelectedDataStore?null: "inline", fontWeight: 500 }}>Shuffle Datastore {selectedCategory === "" || selectedCategory === "default" ? "" : `- Category '${selectedCategory}'`}</Typography>
+                <Typography variant="body2" color="textSecondary" style={{ marginLeft: isSelectedDataStore?null:25, marginTop: 10}}>
                     Datastore is a permanent key-value database for storing data that can be used cross-workflow. <br/>You can store anything from lists of IPs to complex configurations.&nbsp;
                     <a
                         target="_blank"
                         rel="noopener noreferrer"
                         href="/docs/organizations#datastore"
-                        style={{ textDecoration: isSelectedDataStore?null:"none", color: isSelectedDataStore?"#FF8444":"#f85a3e" }}
+                        style={{ textDecoration: isSelectedDataStore?null:"none", color: theme.palette.linkColor }}
                     >
                         Learn more
                     </a>
-                </span>
+                </Typography>
             </div>
             <Button
-                style={{backgroundColor: isSelectedDataStore? "#ff8544":null, fontSize: 16, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null, color:isSelectedDataStore?"#1a1a1a":null, borderRadius:isSelectedDataStore?4:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
+                style={{fontSize: 16, textTransform: isSelectedDataStore ? 'capitalize':null, borderRadius:isSelectedDataStore?4:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
                 variant="contained"
                 color="primary"
                 onClick={() =>{ 
@@ -663,9 +664,9 @@ const CacheView = memo((props) => {
                 Add Key 
             </Button>
             <Button
-                style={{ marginLeft: 16, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null,borderRadius:isSelectedDataStore?4:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null,  }}
+                style={{ marginLeft: 16, marginRight: 15, borderRadius:isSelectedDataStore?4:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null,  }}
                 variant="contained"
-                color="primary"
+                color="secondary"
                 onClick={() => listOrgCache(orgId,selectedCategory)}
             >
                 <CachedIcon />
@@ -767,7 +768,9 @@ const CacheView = memo((props) => {
 										//handleUpdateFileCategory(updateToThisCategory)
 										toast.error("Not implemented.")
 									}} 
-									style={{fontSize: 16, textTransform: 'none', color: "#1a1a1a", backgroundColor: "#ff8544"}}
+									style={{fontSize: 16, textTransform: 'none', }}
+                                    color="primary"
+                                    variant="contained"
 								>
 									Update
 								</Button>
@@ -780,8 +783,9 @@ const CacheView = memo((props) => {
 				{renderTextBox ? 
 					<Tooltip title={"Close"} style={{}} aria-label={""}>
 						<Button
-							style={{ marginLeft: 5, marginRight: 15, height: 35, borderRadius: 4, backgroundColor: "#494949", textTransform: 'none', fontSize: 16, color: "#f1f1f1" }}
-							color="primary"
+							style={{ marginLeft: 5, marginRight: 15, height: 35, borderRadius: 4,  textTransform: 'none', fontSize: 16,}}
+							color="secondary"
+                            variant="contained"
 							onClick={() => {
 								setRenderTextBox(false);
 								console.log(" close clicked")
@@ -793,9 +797,10 @@ const CacheView = memo((props) => {
 					:
 					<Tooltip title={"Add new file category"} style={{}} aria-label={""}>
 						<Button
-							style={{ marginLeft: 5, marginRight: 15, width: 169, height: 35, borderRadius: 4, backgroundColor: "#494949", textTransform: 'none', fontSize: 16, color: "#f1f1f1" }}
-							color="primary"
-							onClick={() => {
+							style={{ marginLeft: 5, whiteSpace: "nowrap", marginRight: 15, width: 169, height: 35, borderRadius: 4, textTransform: 'none', fontSize: 16, }}
+							 variant="contained"
+                             color="secondary"
+                            onClick={() => {
 								setRenderTextBox(true);
 								}}
 						>
@@ -845,7 +850,7 @@ const CacheView = memo((props) => {
                 style={{
                 borderRadius: 4,
                 marginTop: 24,
-                border: "1px solid #494949",
+                border: theme.palette.defaultBorder,
                 width: "100%",
                 overflowX: "auto", 
                 paddingBottom: 0,
@@ -861,7 +866,7 @@ const CacheView = memo((props) => {
                 minWidth: 800,
                 overflowX: "auto",
              }}>
-                <ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore?"1px solid #494949":null, display: "table-row"}}>
+                <ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore? theme.palette.defaultBorder :null, display: "table-row"}}>
                 {["Key", "Value", "Actions", "Updated", "Distribution"].map((header, index) => (
                         <ListItemText
                             key={index}
@@ -872,7 +877,7 @@ const CacheView = memo((props) => {
                                 whiteSpace: "nowrap",
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
-                                borderBottom: "1px solid #494949"
+                                borderBottom: theme.palette.defaultBorder,
                             }}
                         />
                     ))}
@@ -883,7 +888,7 @@ const CacheView = memo((props) => {
                             key={rowIndex}
                             style={{
                                 display: "table-row",
-                                backgroundColor: "#212121",
+                                backgroundColor: theme.palette.platformColor,
                             }}
                         >
                             {Array(5)
@@ -900,7 +905,7 @@ const CacheView = memo((props) => {
                                             variant="text"
                                             animation="wave"
                                             sx={{
-                                                backgroundColor: "#1a1a1a",
+                                                backgroundColor: theme.palette.loaderColor,
                                                 height: "20px",
                                                 borderRadius: "4px",
                                             }}
@@ -936,9 +941,9 @@ const CacheView = memo((props) => {
 							return null
 						}
 
-                        var bgColor = isSelectedDataStore? "#212121":"#27292d";
+                        var bgColor = isSelectedDataStore? themeMode === "dark" ? "#212121" : "#FFFFFF" :"#27292d";
                         if (index % 2 === 0) {
-                            bgColor = isSelectedDataStore? "#1A1A1A":"#1f2023";
+                            bgColor = isSelectedDataStore? themeMode === "dark" ?  "#1A1A1A" : "#EAEAEA" :"#1f2023";
                         }
 
               			const validate = validateJson(data.value);
@@ -972,11 +977,12 @@ const CacheView = memo((props) => {
                                                 src={validate.result}
                                                 theme={theme.palette.jsonTheme}
                                                 style={{
+                                                    ...theme.palette.reactJsonStyle,
+                                                    backgroundColor: theme.palette.platformColor,
+                                                    border: theme.palette.defaultBorder,
                                                     padding: 5,
                                                     maxHeight: 300,
                                                     overflowY: "auto",
-                                                    backgroundColor: "#151515",
-                                                    border: "1px solid rgba(255,255,255,0.7)",
                                                 }}
                                                 collapsed={true}
                                                 enableClipboard={(copy) => {
@@ -1022,7 +1028,20 @@ const CacheView = memo((props) => {
                                                         setModalOpen(true)
                                                     }}
                                                 >
-                                                    <img src="/icons/editIcon.svg" alt="edit" />
+                                                    <svg
+                                                        width="24"
+                                                        height="24"
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                        <path
+                                                            d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z"
+                                                            stroke={themeMode=== "dark" ? "#F1F1F1" : "#333"}
+                                                            strokeLinecap="round"
+                                                            strokeLinejoin="round"
+                                                        />
+                                                        </svg>
                                                 </IconButton>
                                             </span>
                                         </Tooltip>
diff --git a/frontend/src/components/ChatBot.jsx b/frontend/src/components/ChatBot.jsx
new file mode 100644
index 00000000..4e491ea4
--- /dev/null
+++ b/frontend/src/components/ChatBot.jsx
@@ -0,0 +1,846 @@
+import React, { useState, useEffect, useContext } from "react";
+
+import { useParams, useNavigate, Link } from "react-router-dom";
+import { v4 as uuidv4 } from "uuid";
+import theme from '../theme.jsx';
+import Markdown from 'react-markdown'
+import { isMobile } from "react-device-detect";
+import { Context } from '../context/ContextApi.jsx';
+
+import AppSearch from "../components/AppSearch1.jsx";
+
+import {
+	Divider,
+	ButtonGroup,
+  	TextField,
+	Button,
+	IconButton,
+	Typography,
+	CircularProgress,
+	Card, 
+	CardContent,
+} from "@mui/material";
+
+import {
+	Send as SendIcon,
+} from "@mui/icons-material";
+
+import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
+import AuthenticationWindow from "../components/AuthenticationWindow.jsx";
+
+const ChatBot = (props) => {
+	const { globalUrl } =  props 
+	const { supportEmail } = useContext(Context)
+	const [messages, setMessages] = useState([])
+	const [message, setMessage] = useState("");
+	const [loading, setLoading] = useState(false);
+    const [appAuthentication, setAppAuthentication] = React.useState([]);
+	const [inputAuth, setInputAuth] = useState([])
+	const [forceReauthentication, setForceReauthentication] = useState(false);
+	const [selectedType, setSelectedType] = useState("atomic");
+
+	const [appname, setAppname] = useState("");
+	const [threadId, setThreadId] = useState("");
+	const [runId, setRunId] = useState("");
+
+	const [showAppSearch, setShowAppSearch] = useState(false);
+
+
+	const waitingMsg = "Processing..."
+	const viewWidth = isMobile ? "92%" : 800 
+
+	useEffect(() => {
+		// Check if loading and remove Waiting... from messages
+		const newmessages = messages 
+		const foundmessages = messages.filter((msg) => msg.message !== waitingMsg)
+		if (foundmessages.length < newmessages.length) {
+			setMessages(foundmessages);
+		}
+
+		// Wait 0.5 second 
+		const objDiv = document.getElementById("messages-window");
+		if (objDiv !== undefined && objDiv !== null) {
+			setTimeout(() => {
+				objDiv.scrollTop = objDiv.scrollHeight;
+			}, 250);
+		}
+	}, [messages]);
+
+	useEffect(() => {
+		if (appname === undefined || appname === null || appname === "") {
+			return
+		}
+
+		// Find the last message that was sent by us and reuse the same message content
+		// with added app stuff only
+		for (var i = messages.length-1; i >= 0; i--) {
+			const msg = messages[i]
+			if (msg.status === "sent") {
+				handleSubmit(undefined, msg.message)
+				break
+			}
+		}
+	}, [appname])
+
+	window.title = "Shuffle - New Chat"
+	let navigate = useNavigate();
+
+	// Automatic submit handler based on a lot of stuff :)
+	const handleSubmit = (e, inputmsg) => {
+		if (e !== undefined) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+
+		setLoading(true)
+		setMessage("");
+
+		const sentId = uuidv4();
+		var parsedData = {
+			"query": inputmsg,
+			"thread_id": threadId,
+			"run_id": runId,
+		}
+
+		if (appname !== undefined && appname !== null && appname !== "") {
+			parsedData["app_name"] = appname
+		}
+
+		if (inputAuth !== undefined && inputAuth.length > 0) {
+			// Forcing first auth app to be used in request
+			try {
+				parsedData["app_name"] = inputAuth[0].name
+				parsedData["app_id"] = inputAuth[0].id
+				parsedData["category"] = inputAuth[0].category
+				parsedData["action_name"] = inputAuth[0].action_name
+			} catch (e) {
+			}
+
+			try {
+				parsedData["app_name"] = inputAuth.apps[0].name
+				parsedData["app_id"] = inputAuth.apps[0].id
+				parsedData["category"] = inputAuth.apps[0].category
+				parsedData["action_name"] = inputAuth.apps[0].action_name
+			} catch (e) {
+			}
+		}
+
+		if (selectedType !== "default") {
+			if (selectedType == "workflow") {
+				parsedData["output_format"] = "workflow_suggestion" 
+			} else {
+				parsedData["output_format"] = selectedType
+			}
+		}
+
+		console.log("INPUT: ", parsedData)
+
+		setInputAuth([])
+
+		var newmessages = messages;
+		newmessages.push({
+			"id": sentId,
+			"status": "sent",
+			"message": inputmsg,
+		})
+		newmessages.push({
+			"id": sentId,
+			"status": "received",
+			"message": waitingMsg,
+		})
+
+		setMessages(newmessages);
+
+		//fetch(`http://localhost:8080/api/v1/conversation`, {
+		fetch(`${globalUrl}/api/v1/conversation`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			credentials: "include",
+			body: JSON.stringify(parsedData),
+		})
+		.then((res) => res.text())
+		.then((resText) => {
+			setLoading(false)
+			var data = {}
+
+			// JSON parse
+			try {	
+				data = JSON.parse(resText);
+			} catch (e) {
+				console.log("Error parsing response as JSON: ", e);
+
+				newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
+				newmessages.push({
+					"status": "received",
+					"message": resText,
+					"id": uuidv4(),
+				});
+
+				setMessages(newmessages);
+
+				return;
+			}
+
+
+			if (data.run_id !== undefined && data.run_id !== null && data.run_id !== "") {
+				setRunId(data.run_id)
+			}
+
+			if (data.thread_id !== undefined && data.thread_id !== null && data.thread_id !== "") {
+				setThreadId(data.thread_id)
+			}
+
+			if (data.success === undefined) {
+				newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
+				newmessages.push({
+					"status": "received",
+					"message": resText,	
+					"id": uuidv4(),
+				});
+
+				setMessages(newmessages);
+
+				return;
+			}
+
+			// authentication for app
+			// app validation (choose one)
+			const defaultMessage = `Default output. The feature you're interacting with may not have been implemented yet. Contact ${supportEmail} with a screenshot of this and your input please.`
+				
+			var outputmessage = defaultMessage;
+			var status = "received";
+			var action = ""
+			if (data.success === false) {
+				if (data.reason !== undefined) {
+					outputmessage = data.reason
+				} 
+
+				status = "error"
+			} else {
+				if (data.reason !== undefined) {
+					outputmessage = data.reason
+				}
+			}
+
+			if (data.action !== undefined) {
+				//console.log("Action is defined: ", data.action);
+				action = data.action
+
+				if (data.action === "app_authentication") {
+					// If success & app auth -> say auth success and show available labels
+					// If !success & app auth -> do authentication
+					if (data.success === true) {
+						newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
+						// No action for this.
+						// "action": action,
+						var appname = ""
+						if (data.apps !== undefined && data.apps !== null && data.apps.length > 0) {
+							appname = data.apps[0].name.replaceAll("_", " ")
+						}
+
+						var outputmessage = `**Please specify which ${appname} action you want to use**: \n`
+						if (data.available_labels !== undefined && data.available_labels !== null && data.available_labels.length > 0) {
+							for (var i = 0; i < data.available_labels.length; i++) {
+								outputmessage += "* " + data.available_labels[i] + "\n"
+							}
+							outputmessage += "* Reauthenticate ([see auth](/admin?tab=app_auth))"
+						}
+						//Some opavailable actions: " + data.apps.map((app) => app.name).join(", ")
+						const parsedmessage = {
+							"status": status,
+							"message": outputmessage,
+							"id": uuidv4(),
+							"category": data.category,
+
+							"thread_id": data.thread_id,
+							"run_id": data.run_id,
+						}
+						newmessages.push(parsedmessage);
+						setMessages(newmessages);
+
+						return
+
+					} else {
+						if (data.apps !== undefined) {
+							setInputAuth(data.apps)
+
+							setMessage(inputmsg);
+
+							setForceReauthentication(true)
+						}
+					}
+				} else if (data.action === "select_category" || data.action === "select_app") {
+					console.log("[DEBUG] APP SELECTION! Should help them choose an app to use")
+					// Show a search field
+					setShowAppSearch(true)
+				}
+			}
+
+			newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
+			const parsedmessage = {
+				"status": status,
+				"message": outputmessage,
+				"id": uuidv4(),
+				"action": action,
+				"category": data.category,
+
+				"thread_id": data.thread_id,
+				"run_id": data.run_id,
+			}
+			newmessages.push(parsedmessage);
+			setMessages(newmessages);
+			console.log("New message: ", parsedmessage)
+		})
+		.catch((err) => {
+			setLoading(false)
+			console.log("Problem: ", err);
+
+			setMessage(message);
+			newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
+
+			// Find the message with the sentId and change the status to error
+			newmessages.push({
+				"status": "error",
+				"message": message,
+				"error_message": "Failed to send: "+err,
+				"id": sentId,
+			});
+			setMessages(newmessages);
+		});
+	};
+
+	// Used to verify if the user is logged in after auth is done
+	const getAppAuthentication = () => {
+		console.log("Continue chat from the previous stage!");
+
+		fetch(globalUrl + "/api/v1/apps/authentication", {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+			},
+			credentials: "include",
+		})
+		.then((response) => {
+			if (response.status !== 200) {
+				console.log("Status not 200 for app auth :O!");
+			}
+
+			return response.json();
+		})
+		.then((responseJson) => {
+			if (!responseJson.success) {
+				console.log("Failed to get app auth!");
+				return;
+			}
+
+			var newauth = [];
+			for (let authkey in responseJson.data) {
+				if (responseJson.data[authkey].defined === false) {
+					continue;
+				}
+
+				newauth.push(responseJson.data[authkey]);
+			}
+
+			if (newauth.length > appAuthentication.length) {
+				console.log("New auth is longer than old auth. Set new auth!");
+
+				setForceReauthentication(false)
+
+				// Check if last message contains "reauth"
+				if (messages.length > 0) {
+					const lastmessage = messages[messages.length-1];
+					if (lastmessage.message.toLowerCase().includes("re-auth")) {
+						console.log("Skipping resend due to reauth") 
+
+						var newmessages = messages 
+						newmessages.push({
+							"status": "received",
+							"message": "Authentication done. What do you want to do?",
+							"id": uuidv4(),
+						});
+						setMessages(newmessages);
+
+					} else {
+						handleSubmit(undefined, message)
+					}
+				} else {
+					handleSubmit(undefined, message)
+				}
+			}
+
+			setAppAuthentication(newauth)
+
+		})
+		.catch((err) => {
+			console.log("Error in getAppAuthentication: ", err);
+		})
+	}
+
+	const AuthWrapper = (props) => {
+		const { app } = props;
+  		const [authenticationModalOpen, setAuthenticationModalOpen] = React.useState(false);
+
+		console.log("AUTH: ", app)
+
+		return (
+			<div style={{position: "absolute", right: 250, bottom: 150, }}>
+				{app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
+					<AuthenticationOauth2
+						selectedApp={app}
+						selectedAction={{
+							"app_name": app.name,
+							"app_id": app.id,
+							"app_version": app.version,
+							"large_image": app.large_image,
+						}}
+						authenticationType={app.authentication}
+						isCloud={true}
+						authButtonOnly={true}
+						getAppAuthentication={getAppAuthentication}
+					/>
+				: 
+					<Button
+						fullWidth
+						variant="contained"
+						style={{
+							marginBottom: 20, 
+							marginTop: 20, 
+							flex: 1,
+							textTransform: "none",
+							textAlign: "left",
+							justifyContent: "flex-start",
+							backgroundColor: "#ffffff",
+							color: "#2f2f2f",
+							borderRadius: theme.palette?.borderRadius,
+							minWidth:  300, 
+							maxWidth: 300,
+							maxHeight: 50,
+							overflow: "hidden",
+							border: `1px solid ${theme.palette.inputColor}`,
+						}}
+						color="primary"
+						fullWidth
+						color="primary"
+						onClick={(e) => {
+							console.log("Click? ")
+							e.preventDefault();
+							setAuthenticationModalOpen(true);
+						}}
+					>
+						<span style={{display: "flex"}}>
+							<img
+								alt={app.name}
+								style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
+								src={app.large_image}
+							/>
+							<Typography style={{ margin: 0, marginLeft: 10, marginTop: 5,}} variant="body1">
+								Authenticate
+							</Typography>
+
+						</span>
+					</Button>
+				}
+
+				{app.authentication.type !== "oauth2" && authenticationModalOpen ?
+					<AuthenticationWindow
+						selectedApp={app}
+						globalUrl={globalUrl}
+						getAppAuthentication={getAppAuthentication}
+						appAuthentication={appAuthentication}
+						authenticationModalOpen={authenticationModalOpen}
+						setAuthenticationModalOpen={setAuthenticationModalOpen}
+					/>
+				: null}
+			</div>
+			)
+	}
+
+	var amountfinished = 0;
+	const showAuthentication = inputAuth.map((app, index) => {
+		const authexists = appAuthentication.find((auth) => auth.app.id === app.id);
+		if (authexists !== undefined && forceReauthentication === false) {
+			console.log("Auth exists: ", authexists);
+			amountfinished += 1 
+			return null
+		}
+
+		return (
+			<div key={index}>
+				<AuthWrapper app={app} />
+			</div>
+		)
+	})
+
+	if (amountfinished === inputAuth.length && amountfinished > 0) {
+
+		setInputAuth([])
+		setAppAuthentication([])
+	}
+
+	const showSamples = 
+		<div style={{marginLeft: 10, marginRight: 10, }}>
+			<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius,}}>
+				<CardContent>
+					<Typography variant="h6">
+						How many incidents did we get last week?
+					</Typography>
+				</CardContent>
+			</Card>
+			<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}>
+				<CardContent>
+					<Typography variant="h6">
+						Answer the last email from Jim about the new project, and say we're on it
+					</Typography>
+				</CardContent>
+			</Card>
+			<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}>
+				<CardContent>
+					<Typography variant="h6">
+						Is the IP 1.2.3.4 blocked? If not, block it.
+					</Typography>
+				</CardContent>
+			</Card>
+		</div>
+
+  function OuterLink(props) {
+      return (
+        <a
+		  target="_blank"
+		  rel="noopener noreferrer"
+          href={props.href}
+          style={{ color: "#f85a3e", textDecoration: "none" }}
+        >
+          {props.children}
+        </a>
+      );
+  }
+
+  function Img(props) {
+    return <img style={{ borderRadius: theme.palette?.borderRadius, width: 750, maxWidth: "100%", marginTop: 15, marginBottom: 15, }} alt={props.alt} src={props.src} />;
+  }
+
+  function CodeHandler(props) {
+    //console.log("Codehandler PROPS: ", props)
+
+    const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
+
+    return (
+      <div
+        style={{
+          minWidth: "50%",
+          maxWidth: "100%",
+          backgroundColor: theme.palette.inputColor,
+          overflowY: "auto",
+
+		  // Check if props.inline === true, then do it inline
+		  padding: props.inline ? 0 : 15,
+		  display: props.inline ? "inline" : "block",
+        }}
+      >
+        <code
+          style={{
+            // Wrap if larger than X
+            whiteSpace: "pre-wrap",
+            overflow: "auto",
+          }}
+        >{propvalue}</code>
+      </div>
+    );
+  }
+
+
+  const markdownStyle = {
+    color: "rgba(255, 255, 255, 0.65)",
+    overflow: "hidden",
+    paddingBottom: 100,
+    margin: "auto",
+    maxWidth: "100%",
+    minWidth: "100%",
+    overflow: "hidden",
+    fontSize: isMobile ? "1.3rem" : "1.0rem",
+  }
+
+  const Heading = (props) => {
+    const element = React.createElement(
+      `h${props.level}`,
+      { style: { marginTop: props.level === 1 ? 20 : 50 } },
+      props.children
+    );
+    const [hover, setHover] = useState(false);
+
+    var extraInfo = "";
+    return (
+      <Typography
+        onMouseOver={() => {
+          setHover(true);
+        }}
+      >
+        {props.level !== 1 ? (
+          <Divider
+            style={{
+              width: "90%",
+              marginTop: 40,
+              backgroundColor: theme.palette.inputColor,
+            }}
+          />
+        ) : null}
+        {element}
+        {/*hover ? <LinkIcon onMouseOver={() => {setHover(true)}} style={{cursor: "pointer", display: "inline", }} onClick={() => {
+					window.location.href += "#hello"
+					console.log(window.location)
+					//window.history.pushState('page2', 'Title', '/page2.php');
+					//window.history.replaceState('page2', 'Title', '/page2.php');
+				}} /> 
+				: ""
+				*/}
+        {extraInfo}
+      </Typography>
+    );
+  }
+
+	const OrderedList = (props) => {
+		var parsedchildren = []
+		for (var i = 0; i < props.children.length; i++) {
+			const child = props.children[i]
+			if (child === "\n") {
+				continue
+			}
+
+			if (child.props !== undefined && child.props.children !== undefined) {
+				// Remove <p> from the child wrapper
+				var parsedchild = []
+				for (var j = 0; j < child.props.children.length; j++) {
+					const childchild = child.props.children[j]
+					// print the raw childchild bytes, not string
+					if (childchild === "\n") {
+						continue
+					}
+
+					// If the childchild has <p> around it, remove it
+					parsedchild.push(childchild) 
+
+					/*
+					// Not doing this as it breaks links
+					if (childchild.props !== undefined && childchild.props.children !== undefined) {
+						parsedchild.push(childchild.props.children)
+					} else {
+						parsedchild.push(childchild) 
+					}
+					*/
+				}
+
+				parsedchildren.push(parsedchild)
+			}
+		}
+
+		return (
+			<ol style={{marginTop: 0, }}>
+				{parsedchildren.map((child, index) => {
+					return (
+						<li key={index} style={{minHeight: 0, display: "block", }}>
+							<p style={{marginTop: 0, marginBottom: 10, }}>
+								{index+1}. {child}
+							</p>
+						</li>
+					)
+				})}
+			</ol>
+		)
+	}
+
+	const Paragraph = (props) => {
+		return (
+			<p style={{marginTop: 15, marginBottom: 15, }}>
+				{props.children}
+			</p>
+		)
+	}
+
+    const markdownComponents = {
+		ol: OrderedList,
+		ul: OrderedList,
+    	img: Img,
+    	code: CodeHandler,
+    	h1: Heading,
+    	h2: Heading,
+    	h3: Heading,
+    	h4: Heading,
+    	h5: Heading,
+    	h6: Heading,
+    	a: OuterLink,
+		p: Paragraph,
+    }
+
+	const chatWindow = 
+		<div style={{minWidth: viewWidth, maxWidth: viewWidth, margin: "auto", textAlign: "left", minHeight: 1500, }}>
+			{messages.length === 0 ? 
+				<span>
+					<h1>Shuffle AI</h1>
+
+
+
+					{showSamples}
+				</span>
+			: null}
+			<div 
+				id="messages-window"
+				style={{
+					marginTop: 50, 
+					display: "flex", 
+					flexDirection: "column", 
+					minHeight: 1500,
+					maxHeight: isMobile ? "85%" : "85%", 
+					overflow: "auto", paddingBottom: 200, 
+				}}
+			>
+				{messages.map((message, index) => {
+					const float = message.status === "sent" ? "left" : "right";
+					const border = message.status === "error" ? "red" : "rgba(255,255,255,0.3)" 
+
+					const hasAction = message.action !== undefined && message.action !== null && message.action !== "" 
+
+					return (
+					// Make a chat bubble component
+						<div key={index} style={{position: "relative", width: "100%", marginTop: 15, marginLeft: isMobile ? 10 : 0, }}>
+							<Typography variant="body1" style={{display: "flex", backgroundColor: theme.palette.surfaceColor, color: "white", padding: "0px 10px 0px 10px", borderRadius: theme.palette?.borderRadius, float: float, border: `1px solid ${border}`, "cursor": hasAction ? "pointer" : "default", maxWidth: viewWidth-30, overflowWrap: "break-word", whiteSpace: "pre-line" }} onClick={() => {
+									if (!hasAction) {
+										return
+									}
+
+									if (message.action === "login") {
+										navigate("/login?view=/conversation&message=You must log in to use ShuffleGPT")
+									} else if (message.action === "app_authentication") {
+										console.log("App auth action!")
+										//setAuthenticationModalOpen(true)
+									} else {
+										console.log("\n\nUnknown click action: ", message.action)
+									}
+							}}>
+								{message.message === waitingMsg ? <CircularProgress style={{height: 20, width: 20, marginTop: 20, marginRight: 10,  }} /> : null} 
+								  <span>
+									  <Markdown
+										components={markdownComponents}
+										id="markdown_wrapper"
+										style={{
+											minHeight: 20, 
+											marginTop: 0, 
+											display: "flex",
+											flexDirection: "row",
+										}}
+									  >
+										{message.message}
+									  </Markdown>
+
+									{message.thread_id !== undefined && message.thread_id !== null && message.thread_id !== "" ?
+										<Typography variant="body2" style={{color: "rgba(255,255,255,0.5)", marginTop: 5, }}>
+											Thread: {message.thread_id}
+										</Typography>
+										: null
+									}
+								  </span>
+							</Typography>
+
+							{message.status === "error" && message.error_message ?
+								<Typography variant="body2" style={{color: "red", }}>
+									{message.error_message}
+								</Typography>
+							: null}
+
+							{(message.action === "select_category" || message.action === "select_app") && showAppSearch && index === messages.length-1 ?
+								<div style={{position: "absolute", right: 0, bottom: -100, }}>
+									<AppSearch 
+										placeholder={"Find your "+message.category+" app"}
+										setNewSelectedApp={setAppname}
+									/>
+								</div>
+							: null}
+						</div>
+						)
+				})}
+			</div>
+			{showAuthentication} 	
+
+		<div style={{position: "fixed", bottom: 0, left: 0, width: "100%", zIndex: 100, backgroundColor: theme.palette.platformColor, }}>
+			<div style={{width: viewWidth, margin: "auto", }}>
+				{messages.length === 0 ? 
+					<span>
+						<Typography variant="body2" color="textSecondary">
+							Query Type
+						</Typography>
+						<ButtonGroup 
+							fullWidth
+							color="secondary"
+							style={{display: "flex", marginTop: 10, }}
+						>
+							{/*
+							<Button
+								fullWidth
+								disabled
+								variant={selectedType === "default" ? "contained" : "outlined"}
+								onClick={() => setSelectedType("default")}
+							>
+								Auto	
+							</Button>
+							*/}
+							<Button
+								fullWidth
+								variant={selectedType === "atomic" ? "contained" : "outlined"}
+								onClick={() => setSelectedType("atomic")}
+							>
+								Auto-run action 
+							</Button>
+							<Button
+								fullWidth
+								variant={selectedType === "support" ? "contained" : "outlined"}
+								onClick={() => setSelectedType("support")}
+							>
+								Support		
+							</Button>
+						</ButtonGroup>
+					</span>
+				: null}
+
+				<form onSubmit={(e) => handleSubmit(e, message)} style={{bottom: 20, marginTop: 10, marginBottom: isMobile ? 0 : 10, maxWidth: viewWidth, minWidth: viewWidth, }}>
+					<TextField
+						id="message"
+						fullWidth
+						disabled={loading}
+						label="Send a message"
+						value={message}
+						onChange={(e) => setMessage(e.target.value)}
+						variant="outlined"
+						autoFocus
+						InputProps={{
+							endAdornment: (
+								<IconButton
+									aria-label="send message"
+									onClick={(e) => handleSubmit(e, message)}
+								>
+									<SendIcon color="primary" />
+								</IconButton>
+							)
+						}}
+					/>
+					
+				</form>
+				{isMobile ? null : 
+					<Typography variant="body2" color="textSecondary" align="center" style={{marginTop: 0,}} >
+						{`The Shuffle AI is a test system for automatic workflow generation and atomic functions for the future of Shuffle. Shuffle AI may use your organization info in the query, and attempts to auto-correct any failed behavior. If you have any questions, please contact us at ${supportEmail}`}
+					</Typography>
+				}
+			</div>
+		</div>
+	</div>
+
+return (
+	<div style={{width: isMobile ? "100%" : 1000, margin: "auto", paddingTop: 50, }}>
+		{chatWindow}
+	</div>
+)
+}
+
+export default ChatBot;
diff --git a/frontend/src/components/CloudSyncTab.jsx b/frontend/src/components/CloudSyncTab.jsx
index 08926570..24a043fa 100644
--- a/frontend/src/components/CloudSyncTab.jsx
+++ b/frontend/src/components/CloudSyncTab.jsx
@@ -26,7 +26,7 @@ import {
     Visibility as VisibilityIcon,
     VisibilityOff as VisibilityOffIcon,
 } from "@mui/icons-material";
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import { styled } from '@mui/styles';
 import { Context } from "../context/ContextApi.jsx";
 
@@ -48,6 +48,8 @@ const CloudSyncTab = (props) => {
     const [, forceUpdate] = React.useState();
     const itemColor = "white";
     const isCloud = window?.location?.host === "localhost:3002" || window?.location?.host === "shuffler.io";
+    const { themeMode, brandColor } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
     useEffect(() => { getSettings(); }, []);
     const GridItem = (props) => {
         const [expanded, setExpanded] = React.useState(false);
@@ -167,9 +169,9 @@ const CloudSyncTab = (props) => {
                 <div
                     style={{
                         margin: 4,
-                        backgroundColor: "#1a1a1a",
+                        backgroundColor: theme.palette.backgroundColor,
                         borderRadius: 8,
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minHeight: expanded ? 250 : "inherit",
                         maxHeight: expanded ? 300 : "inherit",
                         boxShadow: "none",
@@ -188,13 +190,13 @@ const CloudSyncTab = (props) => {
                             <Avatar>{primaryIcon}</Avatar>
                         </ListItemAvatar>
                         <ListItemText
-                            style={{ textTransform: "capitalize", color: "#F1F1F1", fontSize: 14, fontWeight: 400, }}
+                            style={{ textTransform: "capitalize", color: theme.palette.text.primary, fontSize: 14, fontWeight: 400, }}
                             primary={primary}
                         />
                         {isCloud && userdata.support === true ?
                             <Tooltip title="Edit features (support users only)">
                                 <EditIcon
-                                    color="secondary"
+                                    color="textPrimary"
                                     style={{ marginRight: 10, cursor: "pointer", }}
                                     onClick={(e) => {
                                         e.preventDefault();
@@ -527,20 +529,20 @@ const CloudSyncTab = (props) => {
     return (
             <div style={{padding: "27px 10px 19px 27px",}}>
             <div style={{ marginBottom: 20 }}>
-                <h2
-                    style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}
+                <Typography variant="h5"
+                    style={{ marginBottom: 8, marginTop: 0, fontWeight: 500}}
                 >
                     Cloud syncronization
-                </h2>
-                <span style={{ color: "#C8C8C8", fontSize: 16, fontWeight: 400, }}>
-                    What does <a href="/docs/organizations#cloud_sync" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255, 132, 68, 1)", fontSize: 16, textDecoration: 'none', }}>cloud sync</a> do? Cloud synchronization is a way of getting more out of Shuffle. Shuffle will ALWAYS make every option open source, but features relying on other users can't be done without a collaborative approach.
-                    </span>
+                </Typography>
+                <Typography variant="body2" style={{ color: theme.palette.text.secondary, fontSize: 16, fontWeight: 400, }}>
+                    What does <a href="/docs/organizations#cloud_sync" target="_blank" rel="noopener noreferrer" style={{ color: theme.palette.linkColor, fontSize: 16, textDecoration: 'none', }}>cloud sync</a> do? Cloud synchronization is a way of getting more out of Shuffle. Shuffle will ALWAYS make every option open source, but features relying on other users can't be done without a collaborative approach.
+                    </Typography>
             </div>
 
             {isCloud ? (
                 <div style={{ marginTop: 15, display: "flex" }}>
                     <div style={{ flex: 1 }}>
-                        <Typography style={{fontWeight: 400, fontSize: 16, color: "#F1F1F1"}}>
+                        <Typography style={{fontWeight: 400, fontSize: 16, color: theme.palette.text.secondary}}>
                             Currently syncronizing:{" "}
                             {selectedOrganization.cloud_sync_active === true
                                 ? <span style={{ color: "#4CFD72", fontSize: 16, marginLeft: 16}}>True</span>
@@ -561,28 +563,31 @@ const CloudSyncTab = (props) => {
                                 marginRight: 10,
                                 fontSize: 16, 
                                 fontWeight: 400,
+                                color: theme.palette.text.primary,
                                 fontFamily: theme.typography.fontFamily,
                             }}
                         >
                             Your Api key
                         </Typography>
                         {userSettings?.apikey === undefined || userSettings?.apikey === null || userSettings?.apikey?.length <=0 ? (
-                                <Skeleton variant="rectangular" animation="wave" sx={{backgroundColor: '#212121', border: '1px solid #646464', width: 500, height: 50, marginTop: 2 }}/>
+                                <Skeleton variant="rectangular" animation="wave" sx={{backgroundColor: theme.palette.loaderColor, border: '1px solid #646464', width: 500, height: 50, marginTop: 2 }}/>
                         ):
                         <div style={{ display: "flex" }}>
                             <TextField
-                                color="primary"
                                 style={{
-                                    backgroundColor: theme.palette.inputColor,
+                                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                    borderRadius: theme.palette.textFieldStyle.borderRadius,
+                                    color: theme.palette.textFieldStyle.color,
                                     maxWidth: 500,
                                     height: 35
                                 }}
                                 InputProps={{
                                     sx: {
                                         height: "35px",
-                                        color: "white",
+                                        color: theme.palette.textFieldStyle.color,
                                         fontSize: "1em",
-                                        backgroundColor: '#212121',
+                                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                        borderRadius: theme.palette.textFieldStyle.borderRadius,
                                     },
                                     endAdornment: (
                                         <InputAdornment position="end">
@@ -701,12 +706,12 @@ const CloudSyncTab = (props) => {
                 </div>
             )}
 
-            <h2 style={{ marginLeft: 5, marginTop: 40, marginBottom: 5 }}>
+            <Typography variant="h5" style={{ marginLeft: 5, marginTop: 40, marginBottom: 5 }}>
                 Features
-            </h2>
-            <Typography variant="body2" color="textSecondary" style={{ marginBottom: 24, fontSize: 16, fontWeight: 400, marginLeft: 5, color: "#C8C8C8" }}>
+            </Typography>
+            <Typography variant="body2" color="textSecondary" style={{ marginBottom: 24, fontSize: 16, fontWeight: 400, marginLeft: 5, color: theme.palette.text.secondary }}>
               Features and Limitations that are currently available to you in your Cloud or Hybrid Organization. App Executions (App Runs) reset monthly. If the organization is a customer or in a trial, these features limitations are not always enforced.            </Typography>
-            <Grid container style={{ width: "100%", marginBottom: 15,  }}>
+                <Grid container style={{ width: "100%", marginBottom: 15,  }}>
 
                 {selectedOrganization.sync_features === undefined ||
                     selectedOrganization.sync_features === null
@@ -728,7 +733,7 @@ const CloudSyncTab = (props) => {
                                     variant="rectangular"
                                     height={50}
                                     width={343}
-                                    sx={{ backgroundColor: '#1a1a1a', display: 'flex', borderRadius: 1 }}
+                                    sx={{ backgroundColor: theme.palette.loaderColor, display: 'flex', borderRadius: 1 }}
                                     animation="wave"
                                 />
                             </div>
diff --git a/frontend/src/components/ConfigureWorkflow.jsx b/frontend/src/components/ConfigureWorkflow.jsx
index a6ac8623..8dea326c 100755
--- a/frontend/src/components/ConfigureWorkflow.jsx
+++ b/frontend/src/components/ConfigureWorkflow.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useInterval } from "react-powerhooks";
 import { toast } from 'react-toastify';
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"
 
 import {
@@ -20,7 +20,7 @@ import {
   Collapse,
   IconButton,
 } from "@mui/material";
-
+import { Context } from "../context/ContextApi.jsx";
 import { 
 	FavoriteBorder as FavoriteBorderIcon,
 	Error as ErrorIcon,
@@ -76,6 +76,8 @@ const ConfigureWorkflow = (props) => {
   const [showFinalizeAnimation, setShowFinalizeAnimation] = React.useState(false);
   const [loopRunning, setLoopRunning] = useState(false)
   const [checkStarted, setCheckStarted] = React.useState(false);
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
 
   useEffect(() => { 
 	  if (requiredActions.length === 0) { 
@@ -799,7 +801,7 @@ const ConfigureWorkflow = (props) => {
 		>
 			<div 
 				style={{
-					border: filled ? `1px solid ${theme.palette.green}` : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: filled ? "default" : "pointer", 
+					border: filled ? `1px solid ${theme.palette.green}` : theme.palette.textFieldStyle.border, borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: filled ? "default" : "pointer", 
 				}}
 				id="app-config"
 			>
diff --git a/frontend/src/components/EditOrgTab.jsx b/frontend/src/components/EditOrgTab.jsx
index c1cd11fc..0e2b5176 100644
--- a/frontend/src/components/EditOrgTab.jsx
+++ b/frontend/src/components/EditOrgTab.jsx
@@ -3,6 +3,8 @@ import OrgHeaderexpanded from "../components/OrgHeaderexpandedNew.jsx";
 import OrgHeader from '../components/OrgHeaderNew.jsx';
 import { toast } from "react-toastify";
 import CloudSyncTab from '../components/CloudSyncTab.jsx';
+import { Context } from '../context/ContextApi.jsx';
+import { getTheme  } from '../theme.jsx';
 import {
     FileCopy as FileCopyIcon,
 } from "@mui/icons-material";
@@ -10,6 +12,7 @@ import {
     Button,
     Tooltip,
     IconButton,
+    Typography,
 } from "@mui/material";
 
 const EditOrgTab = (props) => {
@@ -33,6 +36,9 @@ const EditOrgTab = (props) => {
         }
     }, []);
 
+    const { themeMode, brandColor } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
+
     const handleStatusChange = (event) => {
         const { value } = event.target;
         setSelectedStatus(value);
@@ -283,23 +289,23 @@ If you're interested, please let me know a time that works for you, or set up a
 
 
     return (
-        <div style={{ width: "100%", boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121', borderRadius: '16px',  }}>
-            <div style={{ height: "100%", width: "100%", overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}} >
+        <div style={{ width: "100%", boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor, borderRadius: '16px',  }}>
+            <div style={{ height: "100%", width: "100%", overflowX: 'hidden', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}} >
             <div style={{ marginBottom: 20 }}>
                 <div style={{display:"flex"}}>
                     <div style={{width:'70%'}}>
-                <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Organization overview</h2>
-                <span style={{ color: "#9E9E9E" }}>
+                <Typography variant='h3' sx={{ marginBottom: "15px", marginTop: 0, }}>Organization overview</Typography>
+                <Typography variant="body2" style={{ color: theme.palette.text.secondary, fontSize: 16 }}>
                     On this page organization admins can configure organisations, and sub-orgs (MSSP).{" "}
                     <a
                         target="_blank"
                         rel="noopener noreferrer"
                         href="/docs/organizations#organization"
-                        style={{ color: "#FF8444" }}
+                        style={{ color: theme.palette.linkColor, }}
                     >
                         Learn more
                     </a>
-                </span>
+                </Typography>
                 </div>
                 <div style={{display:"flex", alignItems:"center", marginLeft:50}}>
                 <Tooltip
diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx
index dcfa3057..8265f079 100644
--- a/frontend/src/components/EditWorkflow.jsx
+++ b/frontend/src/components/EditWorkflow.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useContext } from "react";
-import theme from '../theme.jsx';
+import { getTheme } from '../theme.jsx';
 import { isMobile } from "react-device-detect"
 import { MuiChipsInput } from "mui-chips-input";
 import { toast } from "react-toastify"
@@ -46,7 +46,7 @@ import {
 	Slider,
 
 } from "@mui/material";
-
+import { Context } from "../context/ContextApi.jsx";
 import {
 	DatePicker,
 	LocalizationProvider,
@@ -69,7 +69,8 @@ const EditWorkflow = (props) => {
 	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, saveWorkflow, expanded, scrollTo, setRealtimeMarkdown, boxWidth, setBoxWidth, } = props
 
 	const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
-
+	const {themeMode, brandColor} = useContext(Context)
+	const theme = getTheme(themeMode, brandColor)
 	const [submitLoading, setSubmitLoading] = React.useState(false);
 	const [showMoreClicked, setShowMoreClicked] = React.useState(isEditing !== false ? true : false);
 
@@ -203,23 +204,27 @@ const EditWorkflow = (props) => {
 				setModalOpen(false);
 			}}
 			PaperProps={{
-				style: {
-					color: "white",
-					minWidth: isMobile ? "90%" : 650,
-					maxWidth: isMobile ? "90%" : 650,
-					minHeight: 400,
-					paddingTop: 25,
-					paddingLeft: 50,
+				sx: {
+					color: theme.palette.DialogStyle.color,
+					minWidth: isMobile ? "90%" : "650px",
+					maxWidth: isMobile ? "90%" : "650px",
+					minHeight: "400px",
 					//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
 					//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
-		    		borderRadius: theme.palette.borderRadius,
-		    		backgroundColor: "black",
+		    		borderRadius: theme.palette.DialogStyle.borderRadius,
+		    		backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+					'& .MuiDialogContent-root': {
+					  backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+					},
+					'& .MuiDialogTitle-root': {
+					  backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+					},
 				},
 			}}
 		>
-			<DialogTitle style={{ padding: 30, paddingBottom: 0, zIndex: 1000, }}>
+			<DialogTitle style={{ padding: 30, paddingBottom: 0, zIndex: 1000, paddingTop: "25px", paddingLeft: "50px"}}>
 				<div style={{ display: "flex" }}>
-					<div style={{ flex: 1, color: "rgba(255,255,255,0.9)" }}>
+					<div style={{ flex: 1, color: theme.palette.textColor }}>
 						<div style={{ display: "flex" }}>
 							<Typography variant="h4" style={{ flex: 9, }}>
 								{newWorkflow ? "New" : "Editing"} workflow
@@ -248,7 +253,7 @@ const EditWorkflow = (props) => {
 
 						</div>
 						<Typography variant="body2" color="textSecondary" style={{ marginTop: 20, maxWidth: 440, }}>
-							Workflows can be built from scratch, or from templates. <a href="/usecases2" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
+							Workflows can be built from scratch, or from templates. <a href="/usecases2" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color:theme.palette.linkColor }}>Learn more</a>
 						</Typography>
 
 						<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
@@ -288,16 +293,16 @@ const EditWorkflow = (props) => {
 			</DialogTitle>
 			<FormControl>
 				<div style={{ 
-					borderTop: "1px solid rgba(255,255,255,0.5)", 
+					borderTop: theme.palette.defaultBorder, 
 					width: 600, 
 					position: "fixed", 
 					right: 20, 
 					bottom: 0, 
 					zIndex: 1002, 
-					backgroundColor: theme.palette.backgroundColor,
+					backgroundColor: theme.palette.DialogStyle.backgroundColor,
 					height: 75, 
 					paddingTop: 20, 
-					paddingLeft: 75, 
+					paddingLeft: 30, 
 				}}>
 					<Button
 						variant="contained"
@@ -388,7 +393,7 @@ const EditWorkflow = (props) => {
 					</Button>
 				</div>
 
-				<DialogContent style={{ paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, paddingBottom: 200, }}>
+				<DialogContent style={{ paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, paddingBottom: 200, paddingLeft: "50px" }}>
 					<div style={{ minWidth: newWorkflow ? 500 : 550, maxWidth: newWorkflow ? 450 : 500, }}>
 						<TextField
 							onChange={(event) => {
@@ -396,7 +401,7 @@ const EditWorkflow = (props) => {
 							}}
 							InputProps={{
 								style: {
-									color: "white",
+									color: theme.palette.textFieldStyle.color,
 								},
 							}}
 							color="primary"
@@ -469,7 +474,7 @@ const EditWorkflow = (props) => {
 								style={{ flex: 1, maxHeight: 120, overflow: "auto", }}
 								InputProps={{
 									style: {
-										color: "white",
+										color: theme.palette.textFieldStyle.color,
 									},
 								}}
 								placeholder="Tags"
@@ -1287,7 +1292,7 @@ const EditWorkflow = (props) => {
 
 
 				{newWorkflow === true ?
-					<span style={{ marginTop: 30, }}>
+					<span style={{ paddingTop: 30, backgroundColor: theme.palette.DialogStyle.backgroundColor }}>
 						<Typography variant="h6" style={{ marginLeft: 30, paddingBottom: 0, }}>
 							Relevant Workflows
 						</Typography>
diff --git a/frontend/src/components/EnvironmentTab.jsx b/frontend/src/components/EnvironmentTab.jsx
index 15efd2fc..6aefcf89 100644
--- a/frontend/src/components/EnvironmentTab.jsx
+++ b/frontend/src/components/EnvironmentTab.jsx
@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect, useState } from 'react';
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import {
     Tooltip,
     Typography,
@@ -62,6 +62,9 @@ const EnvironmentTab = memo((props) => {
     const [selectedSubOrg, setSelectedSubOrg] = React.useState([]);
 	const [showLocationActionModal, setShowLocationActionModal] = React.useState(undefined)
 
+  const {  themeMode, supportEmail, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
+
 
     useEffect(() => {
         getEnvironments();
@@ -370,7 +373,7 @@ const EnvironmentTab = memo((props) => {
           })
           .catch((error) => {
             toast(
-              "Failed dismissing alert. Please contact support@shuffler.io if this persists.",
+              `Failed dismissing alert. Please contact ${supportEmail} if this persists.`,
             );
           });
       };
@@ -512,11 +515,11 @@ const EnvironmentTab = memo((props) => {
           }}
         >
             <DialogTitle>
-                <span style={{ color: "white" }}>Add Location</span>
+                <Typography variant='h5' color="textPrimary" >Add Location</Typography>
             </DialogTitle>
             <DialogContent>
                 <div>
-                    Location Name
+                    <Typography variant='body2' color="textPrimary">Location Name</Typography>
                     <TextField
                         color="primary"
                         style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor,}}
@@ -524,7 +527,7 @@ const EnvironmentTab = memo((props) => {
                         InputProps={{
                             style: {
                                 height: "50px",
-                                color: "white",
+                                color: theme.palette.textFieldStyle.color,
                                 fontSize: "1em",
                             },
                         }}
@@ -539,19 +542,18 @@ const EnvironmentTab = memo((props) => {
                         }
                     />
                 </div>
-                {loginInfo} {/* Assuming loginInfo is part of the relevant content */}
+                {loginInfo}
             </DialogContent>
             <DialogActions>
                 <Button
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "#ff8544" }}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: theme.palette.primary.main, }}
                     onClick={() => setModalOpen(false)}
-                    color="primary"
                 >
                     Cancel
                 </Button>
                 <Button
                     variant="contained"
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", backgroundColor: "#ff8544", color: "#1a1a1a" }}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", }}
                     onClick={() => {
                         submitEnvironment(modalUser); // Assuming modalUser is available
                     }}
@@ -733,9 +735,9 @@ const EnvironmentTab = memo((props) => {
           }}
       >
   <DialogTitle>
-    <div style={{ color: "rgba(255,255,255,0.9)" }}>
+    <Typography variant='h5' color="textPrimary" >
       Select sub-org to distribute Environments
-    </div>
+    </Typography>
   </DialogTitle>
   <DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
     <MenuItem value="none" onClick={()=> {handleSelectSubOrg(null, "none")}}>None</MenuItem>
@@ -778,7 +780,7 @@ const EnvironmentTab = memo((props) => {
 
     <div style={{ display: "flex", marginTop: 20 }}>
       <Button
-        style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544"  }}
+        style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: theme.palette.primary.main  }}
         onClick={() => setShowDistributionPopup(false)}
         color="primary"
       >
@@ -786,7 +788,7 @@ const EnvironmentTab = memo((props) => {
       </Button>
       <Button
         variant="contained"
-        style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544", marginLeft: 10 }}
+        style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,  marginLeft: 10 }}
         onClick={() => {
           changeDistribution(selectedEnvironment, selectedSubOrg);
         }}
@@ -800,27 +802,27 @@ const EnvironmentTab = memo((props) => {
   ) : null;
 
     return (
-        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
+        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor,borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder, }}>
             {modalView}
             {EnvironmentDistributionModal}
-            <div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
-              <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
+            <div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
+              <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
               <div style={{ marginBottom: 20 }}>
-                <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Runtime Locations</h2>
-                <span style={{ color: textColor }}>
-                    Decides which Orborus <b>runtime location</b> to run your workflows in. Previously called Environments. <br /> If you have scale problems, <a href="https://shuffler.io/docs/configuration#high-availability" target="_blank" rel="noopener noreferrer" style={{ color: "#FF8444" }}>check the docs</a> or talk to our team: support@shuffler.io.&nbsp;
+                <Typography variant='h5' color="textPrimary" style={{ marginBottom: 8, marginTop: 0,}}>Runtime Locations</Typography>
+                <Typography variant='body2' color="textSecondary">
+                    Decides which Orborus <b>runtime location</b> to run your workflows in. Previously called Environments. <br /> If you have scale problems, <a href="https://shuffler.io/docs/configuration#high-availability" target="_blank" rel="noopener noreferrer" style={{ color: theme.palette.linkColor }}>check the docs</a> or talk to our team: {supportEmail}.&nbsp;
                     <a
                         target="_blank"
                         rel="noopener noreferrer"
                         href="/docs/organizations#locations"
-                        style={{ color: "#FF8444" }}
+                        style={{ color: theme.palette.linkColor,  }}
                     >
                         Learn more
                     </a>
-                </span>
+                </Typography>
             </div>
             <Button
-                style={{ backgroundColor: '#ff8544', color: "#1a1a1a", borderRadius: 4, textTransform: "capitalize", fontSize: 16,  }}
+                style={{ borderRadius: 4, textTransform: "capitalize", fontSize: 16,  }}
                 variant="contained"
                 color="primary"
                 onClick={() => setModalOpen(true)}
@@ -828,9 +830,9 @@ const EnvironmentTab = memo((props) => {
                 Add Location
             </Button>
             <Button
-                style={{ backgroundColor: "#2F2F2F", borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
+                style={{ borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
                 variant="contained"
-                color="primary"
+                color="secondary"
                 onClick={getEnvironments}
             >
                 <CachedIcon />
@@ -851,7 +853,7 @@ const EnvironmentTab = memo((props) => {
                 style={{
                 borderRadius: 4,
                 marginTop: 24,
-                border: "1px solid #494949",
+                border: theme.palette.defaultBorder,
                 width: "100%",
                 overflowX: "auto", 
                 paddingBottom: 0,
@@ -873,7 +875,7 @@ const EnvironmentTab = memo((props) => {
                     width: "100%",
                     minWidth: 800,
                     paddingBottom: 0,
-                    borderBottom: "1px solid #494949",    
+                    borderBottom: theme.palette.defaultBorder,    
                   }}
               >
                     {["Type", "Status", "Scale", "Pipeline", "Name", "Type", "Queue", "Actions", "Distribution"].map((header, index) => {
@@ -901,7 +903,7 @@ const EnvironmentTab = memo((props) => {
         style={{
           display: "grid",
           gridTemplateColumns: "80px 80px 80px 120px 120px 120px 120px 350px 150px",
-          backgroundColor: "#212121",
+          backgroundColor: theme.palette.platformColor,
           height: 40,
           width: "100%",
           boxSizing: "border-box",
@@ -919,7 +921,7 @@ const EnvironmentTab = memo((props) => {
               variant="text"
               animation="wave"
               sx={{
-                backgroundColor: "#1a1a1a",
+                backgroundColor: theme.palette.loaderColor,
                 borderRadius: "4px",
               }}
             />
@@ -941,9 +943,9 @@ const EnvironmentTab = memo((props) => {
           return null;
         }
   
-        var bgColor = "#212121";
+        var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
         if (index % 2 === 0) {
-          bgColor = "#1A1A1A";
+            bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
         }
   
         // Check if there's a notification for it in userdata.priorities
@@ -1013,7 +1015,9 @@ const EnvironmentTab = memo((props) => {
               environment.name === "Cloud" ? (
               <Tooltip title="Cloud" placement="top">
                 <CloudIcon
-                style={{ color: "rgba(255,255,255,0.8)" }}
+                  style={{
+                    color: themeMode === "dark" ? "#CCCCCC" : "#333333",
+                  }}
                 />
               </Tooltip>
               ) : environment.run_type === "docker" ? (
@@ -1075,7 +1079,7 @@ const EnvironmentTab = memo((props) => {
 							: 
 							<span>IP / label: {environment?.running_ip?.split(":")[0]}. May stay running up to a minute after stopping Orborus.</span>
 						  : 
-							"Cloud is automatically configured. Reachout to support@shuffler.io if you have any questions."
+							`Cloud is automatically configured. Reachout to ${supportEmail} if you have any questions.`
 						}
 
 						<br />
@@ -1169,7 +1173,7 @@ const EnvironmentTab = memo((props) => {
               		<ListItemText
                     	primary={
                 			environment.Type === "cloud" ? 
-                              <Tooltip title={"Make a new environment to set up a Datalake node. Please contact support@shuffler.io if this is something you want to see on Cloud directly."} placement="top">
+                              <Tooltip title={`Make a new environment to set up a Datalake node. Please contact ${supportEmail} if this is something you want to see on Cloud directly.`} placement="top">
                                 <CancelIcon style={{ color: "rgba(255,255,255,0.3)" }} />
                               </Tooltip>
                 		:
@@ -1267,13 +1271,12 @@ const EnvironmentTab = memo((props) => {
                         />
                         <ListItemText
                             style={{
-                              minWidth: 300,
-                              overflow: "hidden",
+                              minWidth: 350,
                             }}
                           >
                             <div style={{ display: "flex", flexWrap: "nowrap" }}>
                               <ButtonGroup
-                                style={{ borderRadius: "5px 5px 5px 5px", flexWrap: "nowrap" }}
+                                style={{ borderRadius: "5px 5px 5px 5px", flexWrap: "nowrap", width: "100%" }}
                               >
                                 <Button
                                   variant="outlined"
@@ -1369,7 +1372,7 @@ const EnvironmentTab = memo((props) => {
                               </ButtonGroup>
 
                               <IconButton disabled={environment.Type === "cloud"} onClick={()=> {setIsExpanded(prev => !prev)}}>
-                                {listItemExpanded === index ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                                {listItemExpanded === index ? <ExpandLessIcon sx={{color: theme.palette.text.primary}} /> : <ExpandMoreIcon sx={{color: theme.palette.text.primary}}/>}
                               </IconButton>
                             </div>
                           </ListItemText>
@@ -1443,7 +1446,7 @@ const EnvironmentTab = memo((props) => {
                         >
                           <Tab
                             value={0}
-                          label=<span>
+                          label=<span style={{color: theme.palette.text.secondary, }}>
                             <img
                             src="/icons/docker.svg"
                             style={{ width: 20, height: 20, marginRight: 10, }}
@@ -1452,32 +1455,32 @@ const EnvironmentTab = memo((props) => {
                           />
                           <Tab
                             value={1}
-                          label=<span>
+                          label=<span style={{color: theme.palette.text.secondary, }}>
                             <img
                             src="/icons/docker.svg"
-                            style={{ width: 20, height: 20, marginRight: 10, }}
+                            style={{ width: 20, height: 20, marginRight: 10,}}
                             /> Scale
                           </span>
                           />
                           <Tab
                             value={2}
-                          label=<span>
+                          label=<span style={{color: theme.palette.text.secondary, }}>
                             <img
                             src="/icons/k8s.svg"
-                            style={{ width: 20, height: 20, marginRight: 10, }}
+                            style={{ width: 20, height: 20, marginRight: 10 }}
                             /> k8s 
                           </span>
                           />
                           </Tabs>
                           <Typography variant="body1" color="textSecondary" style={{marginTop: 15, }}>
                             {installationTab === 2 ?
-                            <span>
+                            <Typography variant='body2' color="textSecondary">
                                 Check our <a href="https://docs.docker.com/get-started/get-docker/" target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: "#f85a3e",}}>Kubernetes documentation</a> for more information on how to run Shuffle on Kubernetes. The status of the node will change when connected.
-                            </span>
+                            </Typography>
                             :
-                            <span>
+                            <Typography variant='body2' color="textSecondary">
                                 1. <a href="https://docs.docker.com/get-started/get-docker/" target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: "#f85a3e",}}>Ensure Docker is installed</a> and the target server can reach '{globalUrl}'
-                            </span>
+                            </Typography>
                           }
         
                           </Typography>
@@ -1501,13 +1504,19 @@ const EnvironmentTab = memo((props) => {
                           >
                             <div style={{ display: "flex", position: "relative", }}>
                               <code
-                                contenteditable="true"
+                                contentEditable="true"
                                 id="orborus_command"
                                 style={{
-                                  // Wrap if larger than X
                                   whiteSpace: "pre-wrap",
                                   overflow: "auto",
                                   marginRight: 30,
+                                  backgroundColor: themeMode === "dark" ? "#1e1e1e" : "#f5f5f5",
+                                  color: themeMode === "dark" ? "#f8f8f2" : "#333",
+                                  padding: "8px",
+                                  borderRadius: "4px",
+                                  fontFamily: "monospace",
+                                  fontSize: 18,
+                                  border: themeMode === "dark" ? "1px solid #555" : "1px solid #ddd",
                                 }}
                               >
                                 {getOrborusCommand(environment)}
@@ -1532,7 +1541,8 @@ const EnvironmentTab = memo((props) => {
                             </div>
         
                             <Divider style={{marginTop: 25, marginBottom: 10, }}/>
-                            Configure HTTP Proxies: <Checkbox 
+                            <div style={{display: 'flex', alignItems: 'center', }}>
+                            <Typography variant='body2' color="textSecondary">Configure HTTP Proxies:</Typography> <Checkbox 
                               id="shuffle_skip_proxies"
                               onClick={() => {
                                 if (commandController.proxies === undefined) { 
@@ -1545,8 +1555,10 @@ const EnvironmentTab = memo((props) => {
                                 setUpdate(Math.random())
                               }}
                             />
+                            </div>
                             <div />
-                            Disable Pipelines & Data Lake: <Checkbox 
+                            <div style={{display: 'flex', alignItems: 'center', }}>
+                            <Typography variant='body2' color="textSecondary">Disable Pipelines & Data Lake:</Typography> <Checkbox 
                               id="shuffle_skip_pipelines"
                               onClick={() => {
                                 if (commandController.pipelines === undefined) { 
@@ -1559,6 +1571,7 @@ const EnvironmentTab = memo((props) => {
                               }}
                             />
                             </div>
+                            </div>
                         }
         
                           <Typography variant="body1" color="textSecondary" style={{marginTop: 15, }}>
diff --git a/frontend/src/components/Files.jsx b/frontend/src/components/Files.jsx
index f825fb7f..71c3af28 100644
--- a/frontend/src/components/Files.jsx
+++ b/frontend/src/components/Files.jsx
@@ -43,7 +43,7 @@ import {
 
 import Dropzone from "../components/Dropzone.jsx";
 import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import { Context } from "../context/ContextApi.jsx";
 
 const Files = memo((props) => {
@@ -58,6 +58,8 @@ const Files = memo((props) => {
   const [openEditor, setOpenEditor] = React.useState(false);
   const [renderTextBox, setRenderTextBox] = React.useState(false);
   const [loadFileModalOpen, setLoadFileModalOpen] = React.useState(false);
+  const { themeMode, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
 
   const [field1, setField1] = React.useState("");
   const [field2, setField2] = React.useState("");
@@ -442,7 +444,7 @@ const Files = memo((props) => {
       </DialogContent>
       <DialogActions>
         <Button
-          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544"  }}
+          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: theme.palette.primary.main }}
           onClick={() => setLoadFileModalOpen(false)}
           color="primary"
         >
@@ -450,7 +452,7 @@ const Files = memo((props) => {
         </Button>
         <Button
 		  variant="contained"
-          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544" }}
+          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,  }}
           disabled={downloadUrl.length === 0 || !downloadUrl.includes("http")}
           onClick={() => {
             handleGithubValidation();
@@ -517,9 +519,9 @@ const Files = memo((props) => {
 		}}
 	>
 		<DialogTitle>
-			<div style={{ color: "rgba(255,255,255,0.9)" }}>
+			<Typography variant="h5" color="textPrimary" >
 				Select sub-org to distribute files
-			</div>
+			</Typography>
 		</DialogTitle>
 		<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
 			<MenuItem value="none" onClick={()=> {handleSelectSubOrg(null, "none")}}>None</MenuItem>
@@ -562,15 +564,14 @@ const Files = memo((props) => {
 
 			<div style={{ display: "flex", marginTop: 20 }}>
 				<Button
-					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544"  }}
+					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: theme.palette.primary.main }}
 					onClick={() => setShowDistributionPopup(false)}
-					color="primary"
 				>
 					Cancel
 				</Button>
 				<Button
 					variant="contained"
-					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544", marginLeft: 10 }}
+					style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginLeft: 10 }}
 					onClick={() => {
 						changeDistribution(fileIdSelectedForDistribution, selectedSubOrg);
 					}}
@@ -906,27 +907,27 @@ const Files = memo((props) => {
 			onDrop={uploadFile}
 		>
 			{fileDistributionModal}
-			<div style={{width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
+			<div style={{width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor,borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder, }}>
 
-        		<div style={{height: "100%", maxHeight: 1700,overflowY: 'auto', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
-					<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
+        		<div style={{height: "100%", maxHeight: 1700,overflowY: 'auto', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
+					<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
 					<DownloadFileIcon setLoadFileModalOpen={setLoadFileModalOpen} isSelectedFiles={isSelectedFiles} />
 
 				{fileDownloadModal} 
 
 				<div style={{ marginTop: isSelectedFiles ? 2: 20, marginBottom:20 }}>
-					<h2 style={{ display: isSelectedFiles ? null : "inline", marginTop: isSelectedFiles?0:null, marginBottom: isSelectedFiles?8:null, color: "#FFFFFF"}}>Files</h2>
-					<span style={{ marginLeft: isSelectedFiles ? null : 25, color:isSelectedFiles?"#9E9E9E":null}}>
+					<Typography variant="h5" color="textPrimary" style={{ display: isSelectedFiles ? null : "inline", marginTop: isSelectedFiles?0:null, marginBottom: isSelectedFiles?8:null, fontWeight: 500}}>Files</Typography>
+					<Typography variant="body2" color="textSecondary" style={{ marginLeft: isSelectedFiles ? null : 25,}}>
 						Files from Workflows are a way to store as well as edit files.{" "}
 						<a
 							target="_blank"
 							rel="noopener noreferrer"
 							href="https://shuffler.io/docs/organizations#files"
-							style={{ textDecoration: isSelectedFiles ? null:"none", color: isSelectedFiles? "#FF8444": "#f85a3e" }}
+							style={{ textDecoration: isSelectedFiles ? null:"none", color: theme.palette.linkColor }}
 						>
 							Learn more
 						</a>
-					</span>
+					</Typography>
 				</div>
 
 
@@ -937,7 +938,7 @@ const Files = memo((props) => {
 					onClick={() => {
 						upload.click();
 					}}
-					style={{backgroundColor: isSelectedFiles?'#ff8544':null, color:isSelectedFiles?"#212121":null, textTransform: 'none',fontSize: 16, borderRadius:isSelectedFiles?4:null, width:isSelectedFiles?143:null, height:isSelectedFiles?35:null, boxShadow: isSelectedFiles?'none':null,}}
+					style={{ textTransform: 'none',fontSize: 16, borderRadius:isSelectedFiles?4:null, width:isSelectedFiles?143:null, height:isSelectedFiles?35:null, boxShadow: isSelectedFiles?'none':null,}}
 				>
 			     Upload files
 				</Button>
@@ -958,9 +959,9 @@ const Files = memo((props) => {
 					}}
 				/>
 				<Button
-					style={{ marginLeft: 16, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?4:null, width:isSelectedFiles?81:null, height:isSelectedFiles?35:null, boxShadow: isSelectedFiles?'none':null, }}
+					style={{ marginLeft: 16, marginRight: 15, borderRadius:isSelectedFiles?4:null, width:isSelectedFiles?81:null, height:isSelectedFiles?35:null, boxShadow: isSelectedFiles?'none':null, }}
 					variant="contained"
-					color="primary"
+					color="secondary"
 					onClick={() => getFiles(selectedCategory)}
 				>
 					<CachedIcon />
@@ -976,7 +977,6 @@ const Files = memo((props) => {
 							labelId="input-namespace-select-label"
 							id="input-namespace-select-id"
 							style={{
-								color: "white",
 								minWidth: 122,
 								maxWidth: 122,
 								height: 35,
@@ -1013,7 +1013,6 @@ const Files = memo((props) => {
 									<MenuItem
 										key={index}
 										value={data}
-										style={{ color: "white" }}
 									>
 										{data.replaceAll("_", " ")}
 									</MenuItem>
@@ -1044,8 +1043,8 @@ const Files = memo((props) => {
 								Please note that your selected files ({selectedFileId?.length}) will be moved to the <kbd>{updateToThisCategory}</kbd> category.
 							</DialogContent>
 							<DialogActions>
-								<Button onClick={() => setShowFileCategoryPopup(false)} style={{fontSize: 16, textTransform: 'none'}}>Close</Button>
-								<Button onClick={() => handleUpdateFileCategory(updateToThisCategory)} style={{fontSize: 16, textTransform: 'none', color: "#1a1a1a", backgroundColor: "#ff8544"}}>Update</Button>
+								<Button onClick={() => setShowFileCategoryPopup(false)} style={{fontSize: 16, textTransform: 'none', color: theme.palette.primary.main }}>Close</Button>
+								<Button variant="contained" color="primary" onClick={() => handleUpdateFileCategory(updateToThisCategory)} style={{fontSize: 16, textTransform: 'none', }}>Update</Button>
 							</DialogActions>
 						</Dialog>
 					</FormControl>
@@ -1055,8 +1054,9 @@ const Files = memo((props) => {
 				{renderTextBox ? 
 					<Tooltip title={"Close"} style={{}} aria-label={""}>
 						<Button
-							style={{ marginLeft: 5, marginRight: 15, height: 35, borderRadius: 4, backgroundColor: "#494949", textTransform: 'none', fontSize: 16, color: "#f1f1f1" }}
-							color="primary"
+							style={{ marginLeft: 5, marginRight: 15, height: 35, borderRadius: 4, textTransform: 'none', fontSize: 16, }}
+							variant="contained"
+						color="secondary"
 							onClick={() => {
 								setRenderTextBox(false);
 								console.log(" close clicked")
@@ -1068,8 +1068,9 @@ const Files = memo((props) => {
 					:
 					<Tooltip title={"Add new file category"} style={{}} aria-label={""}>
 						<Button
-							style={{ marginLeft: 5, marginRight: 15, width: 169, height: 35, borderRadius: 4, backgroundColor: "#494949", textTransform: 'none', fontSize: 16, color: "#f1f1f1" }}
-							color="primary"
+							style={{whiteSpace: 'nowrap', textWrap: 'nowrap', marginLeft: 5, marginRight: 15, width: 169, height: 35, borderRadius: 4,  textTransform: 'none', fontSize: 16, }}
+							variant="contained"
+							color="secondary"
 							onClick={() => {
 								setRenderTextBox(true);
 								}}
@@ -1096,7 +1097,8 @@ const Files = memo((props) => {
 					}}
 					InputProps={{
 						style: {
-							color: "white",
+							color: theme.palette.textFieldStyle.color,
+							backgroundColor: theme.palette.textFieldStyle.backgroundColor,
 							height: 35,
 							fontSize: 16,
 							borderRadius: 4,
@@ -1133,7 +1135,7 @@ const Files = memo((props) => {
 					style={{
 					borderRadius: 4,
 					marginTop: 24,
-					border: "1px solid #494949",
+					border: theme.palette.defaultBorder,
 					width: "100%",
 					overflowX: "auto", 
 					paddingBottom: 0,
@@ -1151,7 +1153,7 @@ const Files = memo((props) => {
 					>
 					<ListItem
 						style={{
-							borderBottom: "1px solid #494949" ,
+							borderBottom: theme.palette.defaultBorder ,
 							display: "table-row"
 						}}
 						>
@@ -1198,7 +1200,7 @@ const Files = memo((props) => {
 								padding: index === 0 ? "0px 8px 8px 15px" : "0px 8px 8px 8px",
 								whiteSpace: "nowrap",
 								textOverflow: "ellipsis",
-								borderBottom: "1px solid #494949",
+								borderBottom: theme.palette.defaultBorder,
 								verticalAlign: "middle"
 								}}
 								primaryTypographyProps={{
@@ -1215,7 +1217,7 @@ const Files = memo((props) => {
                             key={rowIndex}
                             style={{
                                 display: "table-row",
-                                backgroundColor: "#212121",
+                                backgroundColor: theme.palette.platformColor,
                             }}
                         >
                             {Array(8)
@@ -1232,7 +1234,7 @@ const Files = memo((props) => {
                                             variant="text"
                                             animation="wave"
                                             sx={{
-                                                backgroundColor: "#1a1a1a",
+                                                backgroundColor: theme.palette.loaderColor,
                                                 height: "20px",
                                                 borderRadius: "4px",
                                             }}
@@ -1257,9 +1259,9 @@ const Files = memo((props) => {
 									return null;
 								}
 	
-								var bgColor = isSelectedFiles ? "#212121":"#27292d";
+								var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
 								if (index % 2 === 0) {
-									bgColor = isSelectedFiles ? "#1A1A1A":"#1f2023";
+									bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
 								}
 								const isDistributed = file?.suborg_distribution?.length > 0 ? true : false;
 								const filenamesplit = file.filename.split(".")
@@ -1425,9 +1427,20 @@ const Files = memo((props) => {
 																readFileData(file)
 															}}
 														>
-															<img src="/icons/editIcon.svg" alt="edit icon"
-																style={{color: iseditable ? "white" : "grey", width: 24, height: 24}}
-															/>
+															<svg
+																width="24"
+																height="24"
+																viewBox="0 0 24 24"
+																fill="none"
+																xmlns="http://www.w3.org/2000/svg"
+																>
+																<path
+																	d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z"
+																	stroke={themeMode=== "dark" ? "#F1F1F1" : "#333"}
+																	strokeLinecap="round"
+																	strokeLinejoin="round"
+																/>
+															</svg>
 														</IconButton>
 													</span>
 												</Tooltip>
@@ -1470,15 +1483,39 @@ const Files = memo((props) => {
 																downloadFile(file);
 															}}
 														>
-															<img src="/icons/downloadIcon.svg" alt="download icon"
-																style={{
-																	width: 24, height: 24,
-																	color:
-																		file.status === "active"
-																			? "white"
-																			: "grey",
-																}}
+															<svg
+															width="24"
+															height="24"
+															viewBox="0 0 24 24"
+															fill="none"
+															xmlns="http://www.w3.org/2000/svg"
+															>
+															<rect
+																width="24"
+																height="24"
+																fill={themeMode === "dark" ? "#212121" : "#EDEDED"}
+																fillOpacity="0.02"
 															/>
+															<path
+																d="M8.22595 16.4463L11.7792 19.9995L15.3324 16.4463"
+																stroke={file.status === "active" ? (themeMode === "dark" ? "#F1F1F1" : "black") : "grey"}
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															/>
+															<path
+																d="M11.7792 12.0049V19.9997"
+																stroke={file.status === "active" ? (themeMode === "dark" ? "#F1F1F1" : "black") : "grey"}
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															/>
+															<path
+																d="M19.6676 17.415C20.4399 16.8719 21.019 16.0968 21.321 15.2023C21.6229 14.3078 21.632 13.3403 21.3468 12.4403C21.0617 11.5402 20.4971 10.7545 19.7352 10.197C18.9732 9.6396 18.0534 9.33948 17.1092 9.34021H15.99C15.7228 8.299 15.2229 7.33196 14.5279 6.5119C13.8329 5.69184 12.961 5.04013 11.9777 4.60583C10.9944 4.17153 9.92534 3.96596 8.85109 4.00459C7.77684 4.04322 6.72535 4.32505 5.77578 4.82886C4.82621 5.33267 4.00331 6.04534 3.36902 6.9132C2.73474 7.78106 2.30559 8.78151 2.11391 9.83922C1.92222 10.8969 1.97297 11.9844 2.26236 13.0196C2.55174 14.0549 3.07221 15.011 3.78459 15.816"
+																stroke={file.status === "active" ? (themeMode === "dark" ? "#F1F1F1" : "black") : "grey"}
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															/>
+															</svg>
+
 														</IconButton>
 													</span>
 												</Tooltip>
@@ -1496,7 +1533,31 @@ const Files = memo((props) => {
 																toast(file.id + " copied to clipboard");
 														}}
 													>
-														<img src="/icons/copyIcon.svg" alt="copy icon" style={{ color: "white", width: 24, height: 24 }} />
+														<svg
+															width="24"
+															height="24"
+															viewBox="0 0 24 24"
+															fill="none"
+															xmlns="http://www.w3.org/2000/svg"
+															>
+															<rect
+																width="24"
+																height="24"
+																fillOpacity="1"
+															/>
+															<path
+																d="M14 4H7.6C7.17565 4 6.76869 4.16857 6.46863 4.46863C6.16857 4.76869 6 5.17565 6 5.6V18.4C6 18.8243 6.16857 19.2313 6.46863 19.5314C6.76869 19.8314 7.17565 20 7.6 20H17.2C17.6243 20 18.0313 19.8314 18.3314 19.5314C18.6314 19.2313 18.8 18.8243 18.8 18.4V8.8L14 4Z"
+																stroke={themeMode === "dark" ? "#F1F1F1" : "#333"}
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															/>
+															<path
+																d="M14 4V8.8H18.8"
+																stroke={themeMode === "dark" ? "#F1F1F1" : "#333"}
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															/>
+															</svg>
 													</IconButton>
 												</Tooltip>
 												<Tooltip
@@ -1570,7 +1631,6 @@ const Files = memo((props) => {
                                               disabled={userdata?.active_org?.role !== "admin" || (selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org !== "" ) ? true : false}
                                               checked={isDistributed}
                                               style={{ }}
-                                              color="secondary"
                                               onClick={() => {
 												setShowDistributionPopup(true)
 												if(file?.suborg_distribution?.length > 0){
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index c5a53f54..ea90e6b1 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -11,6 +11,11 @@ import {
   Toc as TocIcon,
   Settings as SettingsIcon 
 } from "@mui/icons-material";
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import MonitorIcon from '@mui/icons-material/Monitor';
+
+
 import SearchBox from "./SearchData.jsx";
 import {
   Button,
@@ -30,11 +35,13 @@ import {
   Portal,
   Collapse,
   Tooltip,
+  ToggleButtonGroup,
+  ToggleButton,
 } from "@mui/material";
-import theme from "../theme.jsx";
 import RecentWorkflow from "../components/RecentWorkflow.jsx";
 
 import { useNavigate } from "react-router";
+import { getTheme } from "../theme.jsx";
 
 import { Link } from "react-router-dom";
 import {
@@ -57,8 +64,7 @@ const ExpandMoreAndLessIcon = "/icons/expandMoreIcon.svg";
 const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
   const navigate = useNavigate();
-  const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen, isDocSearchModalOpen} = useContext(Context);
-
+  const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen, logoutUrl, themeMode, handleThemeChange,  isDocSearchModalOpen, setIsDocSearchModalOpen, supportEmail} = useContext(Context);
   const [expandLeftNav, setExpandLeftNav] = useState(false);
   const [activeOrgName, setActiveOrgName] = useState(
     userdata?.active_org?.name || "Select Organziation"
@@ -73,7 +79,10 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
   const [recentworkflows, setRecentworkflows] = useState(null);
   const [usersWorkFlows, setUsersWorkFlows] = useState([]);
   const [currentOpenTab, setCurrentOpenTab] = useState("");
-  const currentPath = window.location.pathname;
+  const params = new URLSearchParams(window.location.search);
+  const [currentSelectedTheme, setCurrentSelectedTheme] = useState(themeMode);
+  const tab = params.get("tab");
+  const currentPath = tab ? `${window.location.pathname}?tab=${tab}` : window.location.pathname;
   const [hoverOnAvatar, setHoverOnAvatar] = useState(false);
   const [orgOptions, setOrgOptions] = useState(
     userdata?.orgs?.map((org) => ({
@@ -87,6 +96,12 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
     return orgOptions.find((option) => option.name === selectedOrg);
   }, [selectedOrg, orgOptions]);
 
+  const theme = getTheme(themeMode);
+  const darkText = "#0F1419"
+  const lightText = "#CDCDCD"
+  const lightHoverColor = "#D6D6D6"
+  const darkHoverColor = "#2F2F2F"
+
 	//With this code it is opening search bar on google chrome search bar as well which is not required
 	useEffect(() => {
 	  const handleKeyDown = (event) => {
@@ -125,10 +140,12 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
           }}
           sx={{
             zIndex: 1000015,
-            backgroundColor: "#1f1f1f",
+            backgroundColor: theme.palette.backgroundColor,
+            color: theme.palette.text.primary,
             opacity: 1,
             "& .MuiAutocomplete-listbox": {
-              backgroundColor: "#1f1f1f",
+              backgroundColor: theme.palette.backgroundColor,
+              color: theme.palette.text.primary,
               padding: 0,
               margin: 0,
               borderRadius: "4px",
@@ -138,15 +155,16 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             outline: "1px solid #555555",
             borderRadius: 1,
             overflow: 'hidden'
-            
           }}
         >
           <Box
           sx={{
             scrollbarWidth: "thin",
-            scrollbarColor: "#494949 transparent",
+            scrollbarColor: theme.palette.scrollbarColorTransparent,
+            color: theme.palette.text.primary,
             "& .MuiAutocomplete-listbox": {
-              backgroundColor: "#1f1f1f",
+              backgroundColor:theme.palette.backgroundColor,
+              color: theme.palette.text.primary,
               padding: 0,
               margin: 0,
               borderRadius: "4px",
@@ -162,12 +180,12 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 				  width: "100%",
 				  padding: "12px 8px",
 				  textAlign: "center",
-				  color: "#fff",
+				  color: theme.palette.text.primary,
 				  fontSize: "16px",
 				  cursor: "pointer",
 				  borderTop: "1px solid #444444",
 				  "&:hover": {
-					backgroundColor: "#444444",
+					  backgroundColor: theme.palette.hoverColor,
 				  },
 				  textTransform: 'none'
 				}}
@@ -241,15 +259,24 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
       setOpenautomateTab(true);
       setOpenSecurityTab(false);
       setCurrentOpenTab("apps");
-        } else if ((lastTabOpenByUser === "detection" && currentPath.includes("/detections")) || currentPath.includes("/detections")) {
+        } else if ((lastTabOpenByUser === "forms" && currentPath.includes("/forms")) || currentPath.includes("/forms")) {
       setOpenautomateTab(false);
       setOpenSecurityTab(true);
-      setCurrentOpenTab("detection");
-        } else if ((lastTabOpenByUser === "response" && currentPath.includes("/response")) || currentPath.includes("/response")) {
+      setCurrentOpenTab("forms");
+        } else if ((lastTabOpenByUser === "datastore" && currentPath.includes("/admin?tab=datastore")) || currentPath.includes("/admin?tab=datastore")) {
       setOpenautomateTab(false);
       setOpenSecurityTab(true);
-      setCurrentOpenTab("response");
-        } else if ((lastTabOpenByUser === "docs" || currentPath.includes("/docs")) || currentPath.includes("/docs")) {
+      setCurrentOpenTab("datastore");
+    } else if ((lastTabOpenByUser === "files" && currentPath.includes("/admin?tab=files")) || currentPath.includes("/admin?tab=files")) {
+      setOpenautomateTab(false);
+      setOpenSecurityTab(true);
+      setCurrentOpenTab("files");
+    }
+    else if ((lastTabOpenByUser === "locations" && currentPath.includes("/admin?tab=locations")) || currentPath.includes("/admin?tab=locations")) {
+      setOpenautomateTab(false);
+      setOpenSecurityTab(true);
+      setCurrentOpenTab("locations");
+    } else if ((lastTabOpenByUser === "docs" || currentPath.includes("/docs")) || currentPath.includes("/docs")) {
       setOpenautomateTab(false);
       setOpenSecurityTab(false);
       setCurrentOpenTab("docs");
@@ -400,20 +427,22 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         // Clear localStorage
         localStorage.clear();
 
-        // Redirect to home immediately
-        window.location.href = "/";
+        if(userdata?.org_status?.includes("integration_partner") && logoutUrl?.length > 0){
+          window.location.href = logoutUrl
+        } else {
+          window.location.pathname = "/";
+        }
       })
       .catch((error) => {
         console.error("Logout error:", error);
       });
   };
-
   const avatarMenu = (
     <span>
       <IconButton
         style={{
           marginRight: 5,
-          color: theme.palette.primary.contrastText,
+          color: themeMode === "dark" ? lightText : darkText,
         }}
         aria-controls="simple-menu"
         aria-haspopup="true"
@@ -446,17 +475,17 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         sx={{
           zIndex: 1000015,
           "& .MuiPaper-root": {
-            backgroundColor: "#1F1F1F",
-            color: "#FFFFFF",
+            backgroundColor: theme.palette.backgroundColor,
+            color: theme.palette.text.primary,
             borderRadius: 1,
           },
           "& .MuiList-root": {
-            backgroundColor: "#1F1F1F",
+            backgroundColor: theme.palette.backgroundColor,
           },
           "& .MuiMenuItem-root": {
-            color: "#FFFFFF",
+            color: theme.palette.text.primary,
             "&:hover": {
-              backgroundColor: "#333333",
+              backgroundColor: theme.palette.hoverColor,
             },
           },
           "& .MuiDivider-root": {
@@ -464,6 +493,38 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
           },
         }}
       >
+        {userdata && userdata?.support && (
+          <>
+            <ToggleButtonGroup
+      value={currentSelectedTheme}
+      exclusive
+      onChange={(event, newTheme) => {
+        if (newTheme === null) {
+          return;
+        }
+        if (newTheme === currentSelectedTheme) {
+          return;
+        }
+        console.log("Selected theme:", newTheme);
+        setCurrentSelectedTheme(newTheme)
+        handleThemeChange(newTheme)
+      }}
+      aria-label="theme"
+      style={{display: 'flex', justifyContent: "center", marginBottom: 10,  }}
+      >
+      <ToggleButton value="light" aria-label="light theme" style={{ backgroundColor: currentSelectedTheme === "light" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
+        <LightModeIcon style={{ color: themeMode === "light" ? darkText : lightText }} />
+      </ToggleButton>
+      <ToggleButton value="dark" aria-label="dark theme" style={{ backgroundColor: currentSelectedTheme === "dark" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
+        <DarkModeIcon style={{ color: themeMode === "light" ? darkText : lightText }} />
+      </ToggleButton>
+      <ToggleButton value="system" aria-label="system theme" style={{ backgroundColor: currentSelectedTheme === "system" ? theme.palette.hoverColor : theme.palette.backgroundColor }}>
+        <MonitorIcon style={{ color: themeMode === "light" ? darkText : lightText }} />
+      </ToggleButton>
+      </ToggleButtonGroup>
+      <Divider style={{ marginTop: 10, marginBottom: 10, color: theme.palette.defaultBorder }} />
+          </>
+        )}
         <Link to="/admin" style={hrefStyle}>
           <MenuItem
             onClick={(event) => {
@@ -513,7 +574,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
           </MenuItem>
         </Link>
         <MenuItem
-          style={{ color: "white", fontSize: 18 }}
+          style={{ fontSize: 18 }}
           onClick={(event) => {
             handleClickLogout();
             event.preventDefault();
@@ -648,7 +709,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             toast(responseJson.reason);
           } else {
             toast(
-              "Failed changing org. Try again or contact support@shuffler.io if this persists."
+              `Failed changing org. Try again or contact ${supportEmail} if this persists.`
             );
           }
         }
@@ -743,7 +804,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
     width: expandLeftNav ? "100%" : 30,
     justifyContent: expandLeftNav ? "flex-start" : "center",
     height: 35,
-    color: openautomatetab ? "#F1F1F1" : "#C8C8C8",
+    color: openautomatetab ? "#F1F1F1" : themeMode === "dark" ? lightText : darkText,
     textTransform: "none",
     "& .MuiButton-root	": {
       width: expandLeftNav ? "100%" : 30,
@@ -775,7 +836,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   const showPartnerLogo = userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.image !== undefined && userdata?.active_org?.image !== null && userdata?.active_org?.image.length > 0 
-	  	
+
   return (
     <div
       style={{
@@ -875,14 +936,32 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             disableElevation
             disableRipple
           >
-            <img
-              src={ExpandMoreAndLessIcon}
+          <svg
               style={{
-                transform: expandLeftNav ? "rotate(-180deg)" : "",
-                transition: "transform 0.3s ease",
+                transform: expandLeftNav ? "" : "rotate(180deg)",
+                transition: "transform 0.3s ease"
               }}
-              alt="Expand/Collapse Icon"          
-            />
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="12"
+                transform="matrix(-1 0 0 1 24 0)"
+                fill={themeMode === "dark" ? "#2F2F2F" : "#D0D0D0"}
+              />
+              <path
+                d="M14 18L8 12L14 6"
+                stroke={themeMode === "dark" ? "#F1F1F1" : "#2F2F2F"}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
           </Button>
         </Box>
       </Box>
@@ -930,19 +1009,19 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                       "& input": {
                         padding: "8px 14px",
                         fontSize: "14px",
-                        color: "#C8C8C8",
+                        color: themeMode === "dark" ? lightText : darkText,
                       },
                       backgroundColor: "transparent",
                     }}
                     variant="outlined"
                     InputProps={{
                       startAdornment: (
-                        <SearchIcon style={{ color: "#CDCDCD", width: 24, height: 24, marginLeft: 16 }} />
+                        <SearchIcon style={{ color: themeMode === "dark" ? lightText : darkText, width: 24, height: 24, marginLeft: 16 }} />
                       ),
                       endAdornment: (
                         <span
                           style={{
-                            color: "#C8C8C8",
+                            color: themeMode === "dark" ? lightText : darkText,
                             fontSize: "12px",
                             marginRight: 16,
                             whiteSpace: "nowrap",
@@ -955,16 +1034,18 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                     }}
                     onClick={() => {
                       setSearchBarModalOpen(true);
+                      setIsDocSearchModalOpen(false);
                     }}
                     onChange={() => {
                       setSearchBarModalOpen(true);
+                      setIsDocSearchModalOpen(false);
                     }}
                   />
             </Fade>
             ):(
             <>
             <Fade in={!expandLeftNav} timeout={500}>
-              <Button style={{color: "#CDCDCD", backgroundColor: "transparent", marginBottom: 5, borderRadius: 8, marginTop: 5 }} onClick={()=>{setSearchBarModalOpen(true)}} onMouseOver={(event)=>{event.currentTarget.style.backgroundColor = "#2f2f2f"}} onMouseLeave={(event)=> {event.currentTarget.style.backgroundColor = "transparent"}} disableElevation disableRipple><SearchIcon style={{width: 24, height: 24}}/></Button>
+              <Button style={{color: themeMode === "dark" ? lightText : darkText, backgroundColor: "transparent", marginBottom: 5, borderRadius: 8, marginTop: 5 }} onClick={()=>{setSearchBarModalOpen(true)}} onMouseOver={(event)=>{event.currentTarget.style.backgroundColor = "#2f2f2f"}} onMouseLeave={(event)=> {event.currentTarget.style.backgroundColor = "transparent"}} disableElevation disableRipple><SearchIcon style={{width: 24, height: 24}}/></Button>
             </Fade>
             </>)}
             <span style={{display: expandLeftNav ? "none": "inline", border: "1px solid #494949", width: 48, marginLeft: 14, marginRight: 14}}></span>
@@ -977,7 +1058,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               height: "100%",
               overflowY: expandLeftNav ? "auto" : "hidden",
               scrollbarWidth: 'thin', 
-              scrollbarColor: "#494949 transparent",
+              scrollbarColor: theme.palette.scrollbarColorTransparent,
               overflowX: "hidden",
             }}
       >
@@ -990,55 +1071,73 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
           }}
         >
           <Box sx={{ display: "flex", flexDirection: "row", marginTop: 2.5, width: expandLeftNav ? "100%" : 48, padding: "0px", }}>
-	  		<Link to="/dashboards/automate" style={hrefStyle}>
             <Button
+              component={Link}
+              to="/usecases"
               onClick={(event) => {
                 setOpenautomateTab(true);
                 setOpenSecurityTab(false);
-                setCurrentOpenTab("automate");
-                localStorage.setItem("lastTabOpenByUser", "automate");
+                setCurrentOpenTab("usecases");
+                localStorage.setItem("lastTabOpenByUser", "usecases");
               }}
               variant="text"
               style={{
                 ...ButtonStyle,
-                backgroundColor: ((currentOpenTab === "automate" && currentPath.includes("/dashboards/automate"))|| (!expandLeftNav && (currentPath === "/workflows" || currentPath === "/usecases" || currentPath.includes("/search"))))? "#2f2f2f": "transparent",
+                backgroundColor: ((currentOpenTab === "automate") || (!expandLeftNav && (currentPath === "/workflows" || currentPath === "/usecases" || currentPath.includes("/search"))))? themeMode === "dark" ? darkHoverColor : lightHoverColor : "transparent",
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
-                event.currentTarget.style.backgroundColor = ((currentOpenTab === "automate" && currentPath.includes("/dashboards/automate"))|| (!expandLeftNav && (currentPath === "/workflows" || currentPath === "/usecases" || currentPath.includes("/search"))))? "#2f2f2f": "transparent";
+                event.currentTarget.style.backgroundColor = ((currentOpenTab === "automate")|| (!expandLeftNav && (currentPath === "/workflows" || currentPath === "/usecases" || currentPath.includes("/search"))))? themeMode === "dark" ? darkHoverColor : lightHoverColor : "transparent";
               }}
             >
-              <img
-                src={detectionIcon}
-                style={{ width: 18, height: 18, marginRight: expandLeftNav ? 10 : 0 }}
-                alt="Automate Icon"
-              />
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 16 11"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    style={{
+                      marginRight: expandLeftNav ? 10 : 0,
+                    }}
+                  >
+                    <path
+                      d="M7.99935 6.83317C8.73573 6.83317 9.33268 6.23622 9.33268 5.49984C9.33268 4.76346 8.73573 4.1665 7.99935 4.1665C7.26297 4.1665 6.66602 4.76346 6.66602 5.49984C6.66602 6.23622 7.26297 6.83317 7.99935 6.83317Z"
+                      stroke={themeMode === "dark" ? lightText : darkText}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M10.8269 2.67329C11.1988 3.04478 11.4938 3.48593 11.6951 3.97153C11.8964 4.45712 12 4.97763 12 5.50329C12 6.02895 11.8964 6.54946 11.6951 7.03505C11.4938 7.52064 11.1988 7.9618 10.8269 8.33329M5.17354 8.32662C4.80163 7.95513 4.5066 7.51398 4.3053 7.02838C4.104 6.54279 4.00039 6.02228 4.00039 5.49662C4.00039 4.97096 4.104 4.45045 4.3053 3.96486C4.5066 3.47927 4.80163 3.03811 5.17354 2.66662M12.7135 0.786621C13.9633 2.03681 14.6654 3.73219 14.6654 5.49995C14.6654 7.26772 13.9633 8.9631 12.7135 10.2133M3.28687 10.2133C2.03706 8.9631 1.33496 7.26772 1.33496 5.49995C1.33496 3.73219 2.03706 2.03681 3.28687 0.786621"
+                      stroke={themeMode === "dark" ? lightText : darkText}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
               <span
                 style={{
                   display: expandLeftNav ? "inline" : "none",
                   marginRight: "auto",
                   opacity: expandLeftNav ? 1 : 0,
                   transition: "opacity 0.3s ease",
-                  color: currentOpenTab === "automate" && currentPath.includes("/dashboards/automate") ? "#F1F1F1" : "#C8C8C8",
+                  color: themeMode === "dark" ? lightText : darkText
                 }}
               >
                 Automate
               </span>
             </Button>
-	  		</Link> 
             <IconButton
               onClick={() => {
                 setOpenautomateTab((prev) => !prev);
                 setOpenSecurityTab(false);
               }}
               style={{
-                  color: "#FFFFFF",
+                  color: themeMode === "dark" ? lightText : darkText,
                   marginLeft: 0.625,
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
                 event.currentTarget.style.backgroundColor = "transparent";
@@ -1074,8 +1173,9 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               gap: 10,
             }}
           >
-	  		<Link to="/usecases" style={hrefStyle}>
             <Button
+              component={Link}
+              to="/usecases"
               onClick={(event) => {
                 setCurrentOpenTab("usecases");
                 localStorage.setItem("lastTabOpenByUser", "usecases");
@@ -1083,18 +1183,18 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               style={{
                 width: "100%",
                 height: 35,
-                color: currentOpenTab === "usecases" && expandLeftNav && currentPath.includes("/usecases") ? "#FFFFFF" : "#C8C8C8",
+                color: themeMode === "dark" ? lightText : darkText,
                 justifyContent: "flex-start",
                 fontSize: 18,
                 textTransform: "none",
-                backgroundColor: currentOpenTab === "usecases" && expandLeftNav && currentPath.includes("/usecases")? "#2f2f2f": "transparent",
+                backgroundColor: currentOpenTab === "usecases" && expandLeftNav ? themeMode === "dark"? darkHoverColor : lightHoverColor : "transparent",
                 marginLeft: 16
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
-                event.currentTarget.style.backgroundColor = currentOpenTab === "usecases" && expandLeftNav && currentPath.includes("/usecases")? "#2f2f2f": "transparent";
+                event.currentTarget.style.backgroundColor = currentOpenTab === "usecases" && expandLeftNav ? themeMode === "dark"? darkHoverColor : lightHoverColor : "transparent";
               }}
               disableRipple={expandLeftNav ? false : true}
             >
@@ -1104,15 +1204,15 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   display: expandLeftNav ? "inline" : "none",
                   opacity: expandLeftNav ? 1 : 0,
                   transition: "opacity 0.3s ease",
-                  color: currentOpenTab === "usecases" && currentPath.includes("/usecases") ? "#FFFFFF" : "#C8C8C8",
+                  color: themeMode === "dark" ? currentOpenTab === "usecases" ? theme.palette.text.primary : lightText : darkText,
                 }}
               >
                 Usecases
               </span>
             </Button>
-	  		</Link>
-	  		<Link to="/workflows" style={hrefStyle}>
             <Button
+              component={Link}
+              to="/workflows"
               onClick={(event) => {
                 setCurrentOpenTab("workflows");
                 localStorage.setItem("lastTabOpenByUser", "workflows");
@@ -1120,19 +1220,19 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               style={{
                 width: "100%",
                 height: 35,
-                color: currentOpenTab === "workflows" && currentPath === "/workflows"  ? "#FFFFFF" : "#C8C8C8",
+                color: themeMode === "dark" ? lightText : darkText,
                 justifyContent: "flex-start",
                 textTransform: "none",
-                backgroundColor: currentOpenTab === "workflows" && currentPath === "/workflows" && expandLeftNav? "#2f2f2f": "transparent",
+                backgroundColor: currentOpenTab === "workflows" && expandLeftNav? themeMode === "dark"? darkHoverColor : lightHoverColor : "transparent",
                 marginLeft: 16,
                 fontSize: 18
               }}
               disableRipple={expandLeftNav ? false : true}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
-                event.currentTarget.style.backgroundColor = currentOpenTab === "workflows" && currentPath === "/workflows" && expandLeftNav? "#2f2f2f": "transparent";
+                event.currentTarget.style.backgroundColor = currentOpenTab === "workflows" && expandLeftNav? themeMode === "dark"? darkHoverColor : lightHoverColor : "transparent";
               }}
             >
               <span style={{display: expandLeftNav ? "inline" : "none", opacity: expandLeftNav ? 1 : 0, transition: "opacity 0.3s ease", position: 'relative', left: !expandLeftNav ? 10: 0, marginRight: 10, fontSize: 18 }}>•</span>{" "}
@@ -1141,15 +1241,15 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   display: expandLeftNav ? "inline" : "none",
                   opacity: expandLeftNav ? 1 : 0,
                   transition: "opacity 0.3s ease",
-                  color: currentOpenTab === "workflows" && currentPath === "/workflows"  ? "#FFFFFF" : "#C8C8C8",
+                  color: themeMode === "dark" ? currentOpenTab === "workflows" ? theme.palette.text.primary : lightText : darkText,
                 }}
               >
                 Workflows
               </span>
             </Button>
-	  		</Link> 
-	  		<Link to="/apps" style={hrefStyle}>
             <Button
+              component={Link}
+              to="/apps"
               onClick={(event) => {
                 setCurrentOpenTab("apps");
                 localStorage.setItem("lastTabOpenByUser", "apps");
@@ -1157,18 +1257,18 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               style={{
                 width: "100%",
                 height: 35,
-                color: currentOpenTab === "apps" && currentPath.includes("/apps") ? "#FFFFFF" : "#C8C8C8",
+                color: themeMode === "dark" ? lightText : darkText,
                 justifyContent: "flex-start",
                 textTransform: "none",
-                backgroundColor: currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent",
+                backgroundColor: currentOpenTab === "apps" && expandLeftNav  ? themeMode === "dark"? darkHoverColor : lightHoverColor : "transparent",
                 marginLeft: 16,
                 fontSize: 18
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
-                event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent";
+                event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav ? themeMode === "dark"? darkHoverColor : lightHoverColor  : "transparent";
               }}
               disableRipple={expandLeftNav ? false : true}
             >
@@ -1178,13 +1278,12 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   display: expandLeftNav ? "inline" : "none",
                   opacity: expandLeftNav ? 1 : 0,
                   transition: "opacity 0.3s ease",
-                  color: currentOpenTab === "apps" && currentPath.includes("/apps") ? "#FFFFFF" : "#C8C8C8",
+                  color: themeMode === "dark" ? currentOpenTab === "apps" ? theme.palette.text.primary : lightText : darkText,
                 }}
               >
                 Apps
               </span>
             </Button>
-	  		</Link> 
           </Box>
           </Collapse>
           <Box
@@ -1195,29 +1294,24 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             }}
           >
 	  		<span style={{ display: "inline-block", width: "100%" }}> 
-          <Link
-            to={"#"}
-            style={{
-              ...hrefStyle,
-              pointerEvents: "auto", 
-            }}
-          >
             <Button
+              component={Link}
+              to="/forms"
               onClick={(event) => {
                 setOpenSecurityTab(true);
                 setOpenautomateTab(false);
-                setCurrentOpenTab("security");
-                localStorage.setItem("lastTabOpenByUser", "security");
+                setCurrentOpenTab("forms");
+                localStorage.setItem("lastTabOpenByUser", "forms");
               }}
               style={{
                 ...ButtonStyle,
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
                 event.currentTarget.style.backgroundColor = currentOpenTab === "security"
-                  ? "#2f2f2f"
+                  ? themeMode === "dark"? darkHoverColor : lightHoverColor
                   : "transparent";
               }}
             >
@@ -1226,7 +1320,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   width: 18,
                   height: 18,
                   marginRight: expandLeftNav ? 10 : 0,
-                  color: "inherit", 
+                  color: themeMode === "dark" ? lightText : darkText 
                 }}
               />
               <span
@@ -1234,15 +1328,12 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   display: expandLeftNav ? "inline" : "none",
                   marginRight: "auto",
                   fontSize: 18,
-                  color: currentOpenTab === "security" 
-                      ? "#F1F1F1"
-                      : "#C8C8C8"
+                  color: themeMode === "dark" ? lightText : darkText
                 }}
               >
 	  			Content
               </span>
             </Button>
-          </Link>
         </span>
             <IconButton
               onClick={() => {
@@ -1251,10 +1342,10 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               }}
               style={{
                 marginLeft: 0.625,
-                color: "#FFFFFF",
+                color: themeMode === "dark" ? lightText : darkText,
               }}
               onMouseOver={(event)=>{
-                event.currentTarget.style.backgroundColor = "#2f2f2f";
+                event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
               }}
               onMouseOut={(event)=>{
                 event.currentTarget.style.backgroundColor = "transparent";
@@ -1275,257 +1366,241 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               )}
             </IconButton>
           </Box>
-          <Collapse in={openSecurityTab} timeout="auto" unmountOnExit>
+          <Collapse in={openSecurityTab} timeout="auto" unmountOnExit >
               <Box
                 style={{
-                  maxHeight: openSecurityTab && expandLeftNav ? 135 : 0,
+                  maxHeight: openSecurityTab && expandLeftNav ? 150 : 0,
                   overflow: "hidden",
                   transition: "max-height 0.3s ease, opacity 0.3s ease",
                   display: "flex",
                   flexDirection: "column",
                   paddingLeft: 16,
+                  gap: "2px",
                 }}
                 disableRipple={expandLeftNav ? false : true}
               >
                 <span style={{ display: "inline-block", width: "100%" }}>
-                  <Link
-                    to={"/forms"}
+                <Button
+                  component={Link}
+                  to="/forms"
+                  onClick={() => {
+                    setCurrentOpenTab("forms");
+                    localStorage.setItem("lastTabOpenByUser", "forms");
+                  }}
+                  sx={{
+                    width: "100%",
+                    height: 35,
+                    color: themeMode === "dark" ? lightText : darkText,
+                    justifyContent: "flex-start",
+                    textTransform: "none",
+                    backgroundColor:
+                      currentOpenTab === "forms" || currentPath.includes("/forms")
+                        ? themeMode === "dark" ? darkHoverColor : lightHoverColor
+                        : "transparent",
+                    "&:hover": {
+                      backgroundColor: themeMode === "dark" ? darkHoverColor : lightHoverColor,
+                    },
+                    cursor: "pointer",
+                  }}
+                >
+                  <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
+                    •
+                  </span>
+                  <span
                     style={{
-                      ...hrefStyle,
-                      pointerEvents: "auto", 
+                      display: expandLeftNav ? "inline" : "none",
+                      opacity: expandLeftNav ? 1 : 0,
+                      transition: "opacity 0.3s ease",
+                      fontSize: 18,
+                      color: themeMode === "dark" ? currentOpenTab === "forms" ? theme.palette.text.primary : lightText : darkText,
                     }}
                   >
-                    <Button
-                      onClick={(event) => {
-                        setCurrentOpenTab("detection");
-                        localStorage.setItem("lastTabOpenByUser", "detection");
-                      }}
-                      sx={{
-                        width: "100%",
-                        height: 35,
-                        color: "#C8C8C8", 
-                        justifyContent: "flex-start",
-                        textTransform: "none",
-                        backgroundColor:
-                          currentOpenTab === "detection" && currentPath.includes("/detection")
-                            ? "#2f2f2f"
-                            : "transparent",
-                        "&:hover": {
-                          backgroundColor: "#2f2f2f", 
-                        },
-                        cursor: "pointer", 
-                      }}
-                    >
-                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
-                        •
-                      </span>
-                      <span
-                        style={{
-                          display: expandLeftNav ? "inline" : "none",
-                          opacity: expandLeftNav ? 1 : 0,
-                          transition: "opacity 0.3s ease",
-                          fontSize: 18,
-                          color:
-                            currentOpenTab === "detection" && currentPath.includes("/detection")
-                              ? "#F1F1F1"
-                              : "#C8C8C8"
-                        }}
-                      >
-                       	Forms	
-                      </span>
-                    </Button>
-                  </Link>
-                </span>
-				<span style={{ display: "inline-block", width: "100%" }}>
-                  <Link
-                    to={"/admin?tab=datastore"}
-                    style={{
-                      ...hrefStyle,
-                      pointerEvents: "auto", 
-                    }}
-                  >
-                    <Button
-                      onClick={(event) => {
-                        setCurrentOpenTab("response");
-                        localStorage.setItem("lastTabOpenByUser", "response");
-                      }}
-                      sx={{
-                        width: "100%",
-                        height: 35,
-                        color: "#C8C8C8", 
-                        justifyContent: "flex-start",
-                        textTransform: "none",
-                        backgroundColor:
-                          currentOpenTab === "response" && currentPath.includes("/response")
-                            ? "#2f2f2f"
-                            : "transparent",
-                        "&:hover": {
-                          backgroundColor: "#2f2f2f", 
-                        },
-                        cursor: "pointer", 
-                      }}
-                    >
-                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
-                        •
-                      </span>
-                      <span
-                        style={{
-                          display: expandLeftNav ? "inline" : "none",
-                          opacity: expandLeftNav ? 1 : 0,
-                          transition: "opacity 0.3s ease",
-                          fontSize: 18,
-                          color:
-                            currentOpenTab === "response" && currentPath.includes("/response")
-                              ? "#F1F1F1"
-                              : "#C8C8C8"
-                        }}
-                      >
-                       	Datastore	
-                      </span>
-                    </Button>
-                  </Link>
+                    Forms
+                  </span>
+                </Button>
                 </span>
+				{userdata && (userdata?.support || userdata?.active_org?.role === "admin") ? (
+          <>
+            <span style={{ display: "inline-block", width: "100%" }}>
+          <Button
+          component={Link}
+          to="/admin?tab=datastore"
+            onClick={(event) => {
+              setCurrentOpenTab("datastore");
+              localStorage.setItem("lastTabOpenByUser", "datastore");
+            }}
+            sx={{
+              width: "100%",
+              height: 35,
+              justifyContent: "flex-start",
+              textTransform: "none",
+              backgroundColor:
+                currentOpenTab === "datastore"
+                  ? themeMode === "dark" ? darkHoverColor : lightHoverColor
+                  : "transparent",
+              "&:hover": {
+                backgroundColor: themeMode === "dark" ? darkHoverColor : lightHoverColor,
+              },
+              cursor: "pointer", 
+            }}
+          >
+            <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
+              •
+            </span>
+            <span
+              style={{
+                display: expandLeftNav ? "inline" : "none",
+                opacity: expandLeftNav ? 1 : 0,
+                transition: "opacity 0.3s ease",
+                fontSize: 18,
+                color: themeMode === "dark" ? currentOpenTab === "datastore" ? theme.palette.text.primary : lightText : darkText
+              }}
+            >
+               Datastore	
+            </span>
+          </Button>
+      </span>
 
-                <span style={{ display: "inline-block", width: "100%" }}>
-                  <Link
-                    to={"/admin?tab=files"}
-                    style={{
-                      ...hrefStyle,
-                      pointerEvents: "auto", 
-                    }}
-                  >
-                    <Button
-                      onClick={(event) => {
-                        setCurrentOpenTab("response");
-                        localStorage.setItem("lastTabOpenByUser", "response");
-                      }}
-                      sx={{
-                        width: "100%",
-                        height: 35,
-                        color: "#C8C8C8", 
-                        justifyContent: "flex-start",
-                        textTransform: "none",
-                        backgroundColor:
-                          currentOpenTab === "response" && currentPath.includes("/response")
-                            ? "#2f2f2f"
-                            : "transparent",
-                        "&:hover": {
-                          backgroundColor: "#2f2f2f", 
-                        },
-                        cursor: "pointer", 
-                      }}
-                    >
-                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
-                        •
-                      </span>
-                      <span
-                        style={{
-                          display: expandLeftNav ? "inline" : "none",
-                          opacity: expandLeftNav ? 1 : 0,
-                          transition: "opacity 0.3s ease",
-                          fontSize: 18,
-                          color:
-                            currentOpenTab === "response" && currentPath.includes("/response")
-                              ? "#F1F1F1"
-                              : "#C8C8C8"
-                        }}
-                      >
-                       	Files	
-                      </span>
-                    </Button>
-                  </Link>
-                </span>
+      <span style={{ display: "inline-block", width: "100%" }}>
+          <Button
+            component={Link}
+            to="/admin?tab=files"
+            onClick={(event) => {
+              setCurrentOpenTab("files");
+              localStorage.setItem("lastTabOpenByUser", "files");
+            }}
+            sx={{
+              width: "100%",
+              height: 35,
+              color: themeMode === "dark" ? lightText : darkText, 
+              justifyContent: "flex-start",
+              textTransform: "none",
+              backgroundColor:
+              currentOpenTab === "files"
+              ? themeMode === "dark" ? darkHoverColor : lightHoverColor
+              : "transparent",
+              "&:hover": {
+                backgroundColor: themeMode === "dark" ? darkHoverColor : lightHoverColor,
+              },
+              cursor: "pointer", 
+            }}
+          >
+            <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
+              •
+            </span>
+            <span
+              style={{
+                display: expandLeftNav ? "inline" : "none",
+                opacity: expandLeftNav ? 1 : 0,
+                transition: "opacity 0.3s ease",
+                fontSize: 18,
+                color: themeMode === "dark" ? currentOpenTab === "files" ? theme.palette.text.primary : lightText : darkText
+              }}
+            >
+               Files	
+            </span>
+          </Button>
+      </span>
 
-                <span style={{ display: "inline-block", width: "100%" }}>
-                  <Link
-                    to={"/admin?tab=locations"}
-                    style={{
-                      ...hrefStyle,
-                      pointerEvents: "auto", 
-                    }}
-                  >
-                    <Button
-                      onClick={(event) => {
-                        setCurrentOpenTab("response");
-                        localStorage.setItem("lastTabOpenByUser", "response");
-                      }}
-                      sx={{
-                        width: "100%",
-                        height: 35,
-                        color: "#C8C8C8", 
-                        justifyContent: "flex-start",
-                        textTransform: "none",
-                        backgroundColor:
-                          currentOpenTab === "response" && currentPath.includes("/response")
-                            ? "#2f2f2f"
-                            : "transparent",
-                        "&:hover": {
-                          backgroundColor: "#2f2f2f", 
-                        },
-                        cursor: "pointer", 
-                      }}
-                    >
-                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
-                        •
-                      </span>
-                      <span
-                        style={{
-                          display: expandLeftNav ? "inline" : "none",
-                          opacity: expandLeftNav ? 1 : 0,
-                          transition: "opacity 0.3s ease",
-                          fontSize: 18,
-                          color:
-                            currentOpenTab === "response" && currentPath.includes("/response")
-                              ? "#F1F1F1"
-                              : "#C8C8C8"
-                        }}
-                      >
-	  					Hybrid Locations
-                      </span>
-                    </Button>
-                  </Link>
-                </span>
+      <span style={{ display: "inline-block", width: "100%" }}>
+          <Button
+           component={Link}
+           to="/admin?tab=locations"
+            onClick={(event) => {
+              setCurrentOpenTab("locations");
+              localStorage.setItem("lastTabOpenByUser", "locations");
+            }}
+            variant="text"
+            sx={{
+              width: "100%",
+              height: 35,
+              color: themeMode === "dark" ? lightText : darkText, 
+              justifyContent: "flex-start",
+              textTransform: "none",
+              backgroundColor:
+                currentOpenTab === "locations"
+                  ? themeMode === "dark" ? darkHoverColor : lightHoverColor
+                  : "transparent",
+              "&:hover": {
+                backgroundColor: themeMode === "dark" ? darkHoverColor : lightHoverColor,
+              },
+              cursor: "pointer", 
+            }}
+          >
+            <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
+              •
+            </span>
+            <span
+              style={{
+                display: expandLeftNav ? "inline" : "none",
+                opacity: expandLeftNav ? 1 : 0,
+                transition: "opacity 0.3s ease",
+                fontSize: 18,
+                color: themeMode === "dark" ? currentOpenTab === "locations" ? theme.palette.text.primary : lightText : darkText,
+              }}
+            >
+    Hybrid Locations
+            </span>
+          </Button>
+          </span>
+          </>): null}
               </Box>
             </Collapse>
 
-	  	  <Link to="/docs" style={hrefStyle}>
           <Button
+            component={Link}
+            to="/docs"
             onClick={(event) => {
               setCurrentOpenTab("docs");
               localStorage.setItem("lastTabOpenByUser", "docs");
             }}
             style={{
               ...ButtonStyle,
-              marginTop: 8,
-              marginTop: 8,
-              backgroundColor: currentOpenTab === "docs" && currentPath.includes("/docs") ? "#2f2f2f": "transparent",
+              marginTop: 5,
+              backgroundColor: currentOpenTab === "docs" ? themeMode === 'dark' ? darkHoverColor : lightHoverColor : "transparent",
             }}
             onMouseOver={(event)=>{
-              event.currentTarget.style.backgroundColor = "#2f2f2f";
+              event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
             }}
             onMouseOut={(event)=>{
-              event.currentTarget.style.backgroundColor = currentOpenTab === "docs" && currentPath.includes("/docs") ? "#2f2f2f": "transparent";
+              event.currentTarget.style.backgroundColor = currentOpenTab === "docs" ? themeMode === 'dark' ? darkHoverColor : lightHoverColor : "transparent";
             }}
           >
-            <img
-              src={documentationIcon}
-              style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0 }}
-              alt="Documentation Icon"
-            />
+            <svg
+                width="18"
+                height="18"
+                viewBox="0 0 14 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ marginRight: expandLeftNav ? 10 : 0 }}
+              >
+                <path
+                  d="M7.75 1H2.5C2.10218 1 1.72064 1.15804 1.43934 1.43934C1.15804 1.72064 1 2.10218 1 2.5V14.5C1 14.8978 1.15804 15.2794 1.43934 15.5607C1.72064 15.842 2.10218 16 2.5 16H11.5C11.8978 16 12.2794 15.842 12.5607 15.5607C12.842 15.2794 13 14.8978 13 14.5V6.25L7.75 1Z"
+                  stroke={themeMode === "dark" ? lightText : darkText} 
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M7.75 1V6.25H13"
+                  stroke={themeMode === "dark" ? lightText : darkText} 
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
             <span
               style={{
                 display: expandLeftNav ? "inline" : "none",
-                color: currentOpenTab === "docs" && currentPath.includes("/docs") ? "#F1F1F1" : "#C8C8C8",
+                color: themeMode === "dark" ? currentOpenTab === "docs" ? theme.palette.text.primary : lightText : darkText
               }}
             >
               Documentation
             </span>
           </Button>
-	  	  </Link>
 
 
-	  	  <Link to={isCloud ? "/admin?admin_tab=billingstats" : "/admin?admin_tab=locations"} style={hrefStyle}>
           <Button
+            component={Link}
+            to={isCloud ? "/admin?admin_tab=billingstats" : "/admin?admin_tab=locations"}
             onClick={(event) => {
               setCurrentOpenTab("admin");
               localStorage.setItem("lastTabOpenByUser", "admin");
@@ -1533,27 +1608,25 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             style={{
               ...ButtonStyle,
               marginTop: 8,
-              marginTop: 8,
-              backgroundColor: currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent",
+              backgroundColor: currentOpenTab === "admin" ? themeMode === 'dark' ? darkHoverColor : lightHoverColor : "transparent",
             }}
             onMouseOver={(event)=>{
-              event.currentTarget.style.backgroundColor = "#2f2f2f";
+              event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
             }}
             onMouseOut={(event)=>{
-              event.currentTarget.style.backgroundColor = currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent";
+              event.currentTarget.style.backgroundColor = currentOpenTab === "admin" ? themeMode === "dark" ? darkHoverColor : lightHoverColor : "transparent";
             }}
           >
-			<BusinessIcon style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0, color: "rgba(255,255,255,0.5)", }} />
+			<BusinessIcon style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0, color: themeMode === 'dark' ? lightText : darkText }} />
             <span
               style={{
                 display: expandLeftNav ? "inline" : "none",
-                color: currentOpenTab === "admin" && currentPath.includes("/admin") ? "#F1F1F1" : "#C8C8C8",
+                color: themeMode === "dark" ? currentOpenTab === "admin" ? theme.palette.text.primary : lightText : darkText
               }}
             >
 	  		  Admin
             </span>
           </Button>
-	  	  </Link>
         </Box>
 
         {recentworkflows?.length > 0 ? 
@@ -1576,7 +1649,6 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         >
           <Typography
             style={{
-              color: "#CDCDCD",
               fontSize: 18,
               padding: "8px 8px",
               marginBottom: 10,
@@ -1614,7 +1686,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
       >
 	  	
 	  	{userdata?.licensed !== true && !userdata?.org_status?.includes("integration_partner") && expandLeftNav &&
-	  	<Button
+      <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", }}>
+      <Button
 	  		variant="outlined"
 	  		style={{marginBottom: 15, borderWidth: 2, }}
 	  		onClick={() => {
@@ -1622,7 +1695,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 			}}
 	  	>
 	  		Book a Demo
-	  	</Button>
+      </Button>
+      </div>
 		}
         <Box ref={autocompleteRef}>
           <Autocomplete
@@ -1654,10 +1728,10 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                   marginLeft: option.margin_left ? option.margin_left : 0,
                 }}
                 onMouseOver={(e) => {
-                  e.currentTarget.style.backgroundColor = "#444444";
+                  e.currentTarget.style.backgroundColor = theme.palette.hoverColor;
                 }}
                 onMouseOut={(e) => {
-                  e.currentTarget.style.backgroundColor = option.name === selectedOrg ? "#696969" : "transparent";
+                  e.currentTarget.style.backgroundColor = option.name === selectedOrg ? theme.palette.hoverColor : "transparent";
                 }}
                 onClick={(e) => {
                     if (option.id !== userdata?.active_org?.id) {
@@ -1673,7 +1747,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                       isCloud ? (
                           <span
                       style={{
-                        color: "#bbb",
+                        color: theme.palette.text.primary,
                         fontSize: "16px",
                         marginRight: 12,
                         display: "flex",
@@ -1698,7 +1772,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                     />
                     <span
                       style={{
-                        color: "#fff",
+                        color: theme.palette.text.primary,
                         fontSize: "16px",
                       }}
                     >
@@ -1772,7 +1846,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                       display: "flex",
                       width: 48,
                       height: 51,
-                      border: "1px solid #494949",
+                      border: theme.palette.defaultBorder,
                       borderRadius: 8,
                       justifyContent: "center",
                       alignItems: "center",
@@ -1787,6 +1861,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                         fontSize: "24px",
                         opacity: expandLeftNav ? 0 : 1,
                         transition: "opacity 0.3s ease",
+                        color: themeMode === "dark" ? lightText : darkText,
                       }}
                     />
                   </Box>
@@ -1802,112 +1877,106 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             width: "100%",
             marginTop: 16,
             gap: 10,
-            justifyContent: "center",
+            justifyContent: "space-between",
             alignItems: "center",
             marginBottom: expandLeftNav ? 0 : 10,
             height: 55,
             borderRadius: 8,
           }}
-          onMouseOver ={(event)=>{event.currentTarget.style.backgroundColor = "#2f2f2f";setHoverOnAvatar(true)}}
-          onMouseLeave ={(event)=>{event.currentTarget.style.backgroundColor = "transparent";setHoverOnAvatar(false)}}
+          onMouseOver={(event) => {
+            event.currentTarget.style.backgroundColor = themeMode === "dark" ? darkHoverColor : lightHoverColor;
+            setHoverOnAvatar(true);
+          }}
+          onMouseLeave={(event) => {
+            event.currentTarget.style.backgroundColor = "transparent";
+            setHoverOnAvatar(false);
+          }}
         >
           {expandLeftNav ? (
             <>
               <Button
-                style={{
-                  width: "100%",
-                  height: 24,
-                  display: "flex",
-                  cursor: "pointer",
-                  backgroundColor: "transparent",
-                  "&:hover": {
-                    backgroundColor: "transparent",
-                  },
-                  transition: "opacity 0.3s ease",
-                  textTransform: "none",
-                  fontSize: 18,
-                }}
-                disableElevation
-                disableRipple
                 onClick={(event) => {
                   if (anchorElAvatar) {
                     setAnchorElAvatar(null);
                   } else {
                     setAnchorElAvatar(event.currentTarget);
                   }
-                  setOpenAutocomplete(false)
+                  setOpenAutocomplete(false);
                 }}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  backgroundColor: "transparent",
+                  cursor: "pointer",
+                  padding: 0,
+                  minWidth: 0,
+                  gap: 10,
+                  marginLeft: 8,
+                }}
+                disableElevation
+                disableRipple
               >
                 <Avatar
                   sx={{
                     width: 48,
                     height: 48,
-                    backgroundColor: "#2F2F2F",
-                    color: "#FFFFFF",
+                    backgroundColor: themeMode === 'dark' ? darkHoverColor : lightHoverColor,
+                    color: themeMode === 'dark' ? lightText : darkText,
                     fontSize: 30,
                     fontStyle: "bold",
-                    border: hoverOnAvatar ? "1px solid #494949" : "none",
+                    border: hoverOnAvatar ? (themeMode === 'dark' ? "1px solid #494949" : '1px solid #5A5A5A') : "none",
                   }}
                 >
                   {userdata?.username?.substring(0, 1).toUpperCase()}
                 </Avatar>
                 <Typography
                   style={{
-                    color: "#CDCDCD",
-                    margin: "0 5px",
+                    color: themeMode === "dark" ? lightText : darkText,
                     fontSize: 18,
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     maxWidth: 150,
-                    textAlign: "center",
-                    marginLeft: 10,
-
                   }}
                 >
                   {userdata?.username}
                 </Typography>
-                {avatarMenu}
               </Button>
+              {avatarMenu}
             </>
           ) : (
-            <>
-              <Button
-                onClick={(event) => {
-                  if (anchorElAvatar) {
-                    setAnchorElAvatar(null);
-                  } else {
-                    setAnchorElAvatar(event.currentTarget);
-                  }
+            <Button
+              onClick={(event) => {
+                if (anchorElAvatar) {
+                  setAnchorElAvatar(null);
+                } else {
+                  setAnchorElAvatar(event.currentTarget);
+                }
+              }}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: 'column',
+                cursor: "pointer",
+                backgroundColor: "transparent",
+                padding: 5,
+                border: hoverOnAvatar ? theme.palette.defaultBorder: "none",
+              }}
+              disableElevation
+              disableRipple
+            >
+              <Avatar
+                sx={{
+                  width: 48,
+                  height: 48,
+                  backgroundColor: themeMode === "dark" ? darkHoverColor : lightHoverColor,
+                  color: theme.palette.text.primary,
+                  fontSize: 30,
                 }}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  flexDirection: 'column',
-                  cursor: "pointer",
-                  backgroundColor: "transparent",
-                  padding: 5,
-                  "&:hover": {
-                    backgroundColor: "transparent",
-                  },
-                  border: hoverOnAvatar ? "1px solid #494949" : "none",
-                }}
-                disableElevation
-                disableRipple
               >
-                <Avatar
-                  sx={{
-                    width: 48,
-                    height: 48,
-                    backgroundColor: "#2F2F2F",
-                    color: "#FFFFFF",
-                    fontSize: 30,
-                  }}
-                >
-                  {userdata?.username?.substring(0, 1).toUpperCase()}
-                </Avatar>
-              </Button>
-            </>
+                {userdata?.username?.substring(0, 1).toUpperCase()}
+              </Avatar>
+            </Button>
           )}
         </Box>
       </Box>
@@ -1918,6 +1987,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
 export default LeftSideBar;
 const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, serverside, userdata, isDocSearchModalOpen}) => {
+  const {themeMode}  = useContext(Context);
+  const theme = getTheme(themeMode);
   return (
     (
       <Dialog
@@ -1926,20 +1997,23 @@ const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, s
           setSearchBarModalOpen(false);
         }}
         PaperProps={{
-          style: {
-            color: "white",
-            minWidth: 750,
-            height: 785,
-            borderRadius: 16,
+          sx: {
+            color: theme.palette.text.primary,
+            minWidth: "750px",
+            height: "785px",
+            borderRadius: "16px",
             border: "1px solid var(--Container-Stroke, #494949)",
-            background: "var(--Container, #000000)",
+            background: theme?.palette?.DialogStyle?.backgroundColor,
             boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
             zIndex: 13000,
-                  paddingTop: 20,
+            paddingTop: "20px",
+            '& .MuiDialogContent-root': {
+              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            },
           },
         }}
       >
-        <DialogContent className='dialog-content' style={{}}>
+        <DialogContent className='dialog-content' style={{backgroundColor: theme.palette.DialogStyle.backgroundColor}}>
           <SearchBox globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
         </DialogContent>
         <Divider style={{overflow: "hidden"}}/>
diff --git a/frontend/src/components/LicencePopup.jsx b/frontend/src/components/LicencePopup.jsx
index 0e354966..eb7d719f 100644
--- a/frontend/src/components/LicencePopup.jsx
+++ b/frontend/src/components/LicencePopup.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import ReactGA from 'react-ga4';
 
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import countries from "../components/Countries.jsx";
 import {
     Box,
@@ -32,7 +32,7 @@ import {
 import { useNavigate, Link } from "react-router-dom";
 import { Autocomplete } from "@mui/material";
 import { toast } from "react-toastify"
-
+import { Context } from "../context/ContextApi.jsx";
 import {
     Cached as CachedIcon,
     ContentCopy as ContentCopyIcon,
@@ -74,6 +74,9 @@ const LicencePopup = (props) => {
     const [errorMessage, setErrorMessage] = useState("")
     const [highlight, setHighlight] = useState(false)
 
+    const { themeMode } = useContext(Context);
+    const theme = getTheme(themeMode);
+
     // Cloud
     const [calculatedApps, setCalculatedApps] = useState(600)
     const [calculatedCost, setCalculatedCost] = useState("$600")
@@ -145,11 +148,12 @@ const LicencePopup = (props) => {
         padding: 20,
         paddingBottom: 30,
         borderRadius: theme.palette?.borderRadius,
-        height: "100%"
+        height: "100%",
+        
     }
 
-    const userInScalePlan = userdata?.app_execution_limit > 10000
-    const appRuns = userInScalePlan ? (userdata?.app_execution_limit / 1000) + "K App Runs" : userdata?.app_execution_limit === 10000 ? "10,000 App Runs" : "2,000 App Runs"
+    const userInScalePlan = userdata?.app_execution_limit > 2000
+    const appRuns = (userdata?.app_execution_limit / 1000) + "K App Runs"
 
     // Add this function to format the limit value
     const formatLimit = (limit) => {
@@ -277,7 +281,7 @@ const LicencePopup = (props) => {
         }
     };
 
-    console.log("selectedOrganization: ", selectedOrganization)
+
     // Update the subscription features section
     billingInfo.subscription = {
         "active": true,
@@ -480,7 +484,6 @@ const LicencePopup = (props) => {
                 });
         }
 
-        console.log("OrgSyncFeatures: ", selectedOrganization?.sync_features)
 
         const extraFeatures = Object.entries(features || {})
             .filter(([_, featureData]) => {
@@ -503,9 +506,9 @@ const LicencePopup = (props) => {
                 style={{ borderRadius: theme.palette?.borderRadius, }}
                 placement="bottom"
             >
-                <div style={{ backgroundColor: "#1e1e1e", border: "1.2px solid #ff8544", borderRadius: theme.palette?.borderRadius}}>
-                    <Paper
-                        style={newPaperstyle}
+                <div style={{ backgroundColor: theme.palette.cardBackgroundColor, border: "1.2px solid #ff8544", borderRadius: theme.palette?.borderRadius}}>
+                    <div
+                        style={{ backgroundColor: theme.palette.cardBackgroundColor, ...newPaperstyle }}
                     // onMouseEnter={() => setHovered(true)}
                     // onMouseLeave={() => setHovered(false)}
                     >
@@ -591,9 +594,9 @@ const LicencePopup = (props) => {
                                 </div>
                             </DialogContent>
                         </Dialog>
-                        {subscription.active === true && !isScale &&  <Button style={{ backgroundColor: '#2f2f2f', color: "#ffffff", textTransform: "capitalize", borderRadius: 200, boxShadow: 'none', fontSize: 13 }}
+                        {subscription.active === true && !isScale &&  <Button style={{ textTransform: "capitalize", borderRadius: 200, boxShadow: 'none', fontSize: 13 }}
                             variant="contained"
-                            color="primary">
+                            color="secondary">
                             Current Plan
                         </Button>}
                         <div style={{ display: "flex" }}>
@@ -849,13 +852,12 @@ const LicencePopup = (props) => {
                             <Button
 							fullWidth
 							color="primary"
+                            variant="contained"
 							style={{
 								marginTop: !userdata.has_card_available ? 25 : 10,
 								borderRadius: 4,
 								height: 40,
 								fontSize: 16,
-								color: "#1a1a1a",
-								backgroundColor: "#ff8544",
 								// backgroundImage: userdata.has_card_available ? null : "linear-gradient(to right, #f86a3e, #f34079)",
 								textTransform: "none",
 
@@ -873,13 +875,13 @@ const LicencePopup = (props) => {
 						</Button> ) : null}
                             <Button
                             variant="outlined"
+                            color="primary"
                             style={{
                                 marginTop: isCloud? 10 : 30,
                                 borderRadius: 4,
                                 width: "100%",
                                 cursor: "pointer",
                                 textTransform: "capitalize",
-                                backgroundColor: "transparent",
                                 fontSize: 16,
                                 position: "relative", // Required for positioning tooltip
                             }}
@@ -922,7 +924,7 @@ const LicencePopup = (props) => {
                             </span>
                         </Button>
                         
-                    </Paper>
+                    </div>
                     {/*
 			<div style={{ paddingRight: 150, display: "flex", alignItems: "baseline" }}>
 				
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index fb36859a..4bf7ad17 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+
 import {
   AppBar,
   Box,
@@ -36,6 +37,7 @@ import AddIcon from '@mui/icons-material/Add';
 import Mousetrap from "mousetrap";
 import LicencePopup from "../components/LicencePopup.jsx";
 import { Context } from "../context/ContextApi.jsx";
+import { getTheme } from "../theme.jsx";
 
 const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
 ? window.location.pathname
@@ -118,18 +120,18 @@ const menuData = {
         label: "training_click"
       }
     },
-    {
-      title: "Security Consultation",
-      description:
-        "Automate your infrastructure with expert guidance and tailored solutions.",
-      icon: "/images/SecurityConsultation.svg",
-      path: "/contact?category=security_consultation",
-      gaData: {
-        category: "navbar",
-        action: "services_click",
-        label: "security_consultation_click"
-      }
-    },
+    // {
+    //   title: "Security Consultation",
+    //   description:
+    //     "Automate your infrastructure with expert guidance and tailored solutions.",
+    //   icon: "/images/SecurityConsultation.svg",
+    //   path: "/contact?category=security_consultation",
+    //   gaData: {
+    //     category: "navbar",
+    //     action: "services_click",
+    //     label: "security_consultation_click"
+    //   }
+    // },
   ],
   Resources: {
     columns: [
@@ -751,7 +753,9 @@ const Navbar = (props) => {
   const topbar_var = "topbar_closed10"
 
   const theme = useTheme();
-  const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen} = useContext(Context)
+  const {themeMode} = useContext(Context);
+  const  currentTheme = getTheme(themeMode);
+  const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen, setIsDocSearchModalOpen} = useContext(Context)
   const [pricingModalOpen, setPricingModalOpen] = useState(false);
   const isTabletOrMobile = useMediaQuery(theme.breakpoints.down("lg"));
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -772,7 +776,6 @@ const Navbar = (props) => {
     window.location.host === "shuffler.io" ||
     window.location.host === "localhost:5002";
 
-  
   const stripeKey = typeof window === 'undefined' || window.location === undefined ? "" : window.location.origin === "https://shuffler.io" ? "pk_live_51PXYYMEJjT17t98N20qEqItyt1fLQjrnn41lPeG2PjnSlZHTDNKHuisAbW00s4KAn86nGuqB9uSVU4ds8MutbnMU00DPXpZ8ZD" : "pk_test_51PXYYMEJjT17t98NbDkojZ3DRvsFUQBs35LGMx3i436BXwEBVFKB9nCvHt0Q3M4MG3dz4mHheuWvfoYvpaL3GmsG00k1Rb2ksO"
 
   useEffect(() => {
@@ -853,51 +856,54 @@ const Navbar = (props) => {
         setSearchBarModalOpen(false);
       }}
       PaperProps={{
-        style: {
+        sx: {
           color: "white",
-          minWidth: 750,
-          height: 785,
-          borderRadius: 16,
+          minWidth: "750px",
+          height: "785px",
+          borderRadius: "16px",
           border: "1px solid var(--Container-Stroke, #494949)",
-          background: "var(--Container, #000000)",
+          background: currentTheme.palette.DialogStyle.backgroundColor,
           boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
         },
+        '& .MuiDialogContent-root': {
+          backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor,
+        },
+        '& .MuiDialogTitle-root': {
+          backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor,
+        },
       }}
       sx={{
         zIndex: 50005,
-        '& .MuiBackdrop-root': {
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        },
       }}
     >
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pt: 2 }}>
-        <DialogTitle 
-          sx={{ 
-            color: "var(--Paragraph-text, #C8C8C8)",
-            p: 0,
-            m: 0,
-            fontFamily: theme.typography.fontFamily,
-          }}
-        >
-          Search for Docs, Apps, Workflows and more
-        </DialogTitle>
-        <IconButton 
-          onClick={() => setSearchBarModalOpen(false)}
-          sx={{ 
-            color: 'white',
-            '&:hover': {
-              backgroundColor: 'rgba(255, 255, 255, 0.1)'
-            }
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
-      </Box>
-      <DialogContent >
+        <Box sx={{ display: "flex", justifyContent: "space-between",backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor, alignItems: "center", px: 2, pt: 2 }}>
+          <DialogTitle 
+            sx={{ 
+              color: "var(--Paragraph-text, #C8C8C8)",
+              p: 0,
+              m: 0,
+              fontFamily: theme.typography.fontFamily,
+            }}
+          >
+            Search for Docs, Apps, Workflows and more
+          </DialogTitle>
+          <IconButton 
+            onClick={() => setSearchBarModalOpen(false)}
+            sx={{ 
+              color: 'white',
+              '&:hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.1)'
+              }
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      <DialogContent style={{backgroundColor: currentTheme?.palette?.DialogStyle?.backgroundColor}} >
         <Box sx={{ pt: 3 }}>
           <SearchBox globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
         </Box>
-      </DialogContent>
+      </DialogContent> 
       <Divider sx={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}/>
     </Dialog>
   );
@@ -974,6 +980,10 @@ const Navbar = (props) => {
         transform: "rotate(180deg)",
       },
     },
+    // Add this to hide the ripple effect's container
+    "& .MuiTouchRipple-root": {
+      display: "none",
+    },
   };
 
   // Render menu content based on type
@@ -1362,6 +1372,8 @@ const Navbar = (props) => {
         </Box>
       ))}
       <Button
+        component={Link}
+        to="/pricing"
         sx={buttonStyles}
         onClick={() => {
           if(isCloud) {
@@ -1380,6 +1392,8 @@ const Navbar = (props) => {
         Pricing
       </Button>
       <Button
+        component={Link}
+        to="/partners"
         sx={buttonStyles}
         onClick={() => {
           if(isCloud) {
@@ -1451,10 +1465,12 @@ const Navbar = (props) => {
   useEffect(() => {
 		Mousetrap.bind(['command+k', 'ctrl+k'], () => {
 			setSearchBarModalOpen(true);
+			setIsDocSearchModalOpen(false);
 			return false; // Prevent the default action
 		});
 		Mousetrap.bind(['esc'], () => {
 			setSearchBarModalOpen(false);
+			setIsDocSearchModalOpen(false);
 			return false; // Prevent the default action
 		});
 
@@ -1537,9 +1553,10 @@ const Navbar = (props) => {
   const topbar = !isCloud || !showTopbar ? null :
     curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/training" || curpath === "/professional-services" ?
       <span style={{ zIndex: 50001, marginTop: -4}}>
-        <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
+        {/* uncommit this to show topbar for release */}
+        {/* <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
           <Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
-            {/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
+            // Shuffle 1.4.0 is out! Read more about&nbsp; 
             Shuffle 2.0.0 is out now!&nbsp;
             <u>
               <span onClick={() => {
@@ -1564,7 +1581,37 @@ const Navbar = (props) => {
           }}>
             <CloseIcon />
           </IconButton>
-        </div>
+        </div> */}
+        {/* commit below div if we need to show release stuff */}
+        <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
+           <Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
+             {/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
+             New&nbsp;
+             <u>
+               <span onClick={() => {
+                 ReactGA.event({
+                   category: "landingpage",
+                   action: "click_header_training",
+                   label: "",
+                 })
+ 
+                 navigate("/training")
+ 
+               }} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>
+                 Public Training
+               </span>
+             </u>
+             &nbsp;Dates Released! 
+           </Typography>
+           <IconButton color="secondary" style={{ position: "absolute", top: 0, right: 20, }} onClick={(event) => {
+             setShowTopbar(false)
+ 
+             // Set storage that it's clicked
+             localStorage.setItem(topbar_var, "true")
+           }}>
+             <CloseIcon />
+           </IconButton>
+         </div>
       </span>
       :
       null
@@ -1784,7 +1831,10 @@ const Navbar = (props) => {
             <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
               <IconButton 
                 sx={{ color: "white" }}
-                onClick={() => setSearchBarModalOpen(true)}
+                onClick={() => {
+                  setSearchBarModalOpen(true);
+                  setIsDocSearchModalOpen(false);
+                }}
               >
                 <SearchIcon sx={{ fontSize: 22 }} />
               </IconButton>
@@ -1866,6 +1916,7 @@ const Navbar = (props) => {
                                })
                              }
                              setSearchBarModalOpen(true);
+                             setIsDocSearchModalOpen(false);
                            }}
                          >
                            <SearchIcon sx={{ fontSize: 24 }} />
@@ -1910,6 +1961,7 @@ const Navbar = (props) => {
                             padding: "8px 20px",
                             "&:hover": {
                               backgroundColor: "#494949",
+                              color: "white",
                               border: "1px solid white",
                             },
                           }}
@@ -2263,6 +2315,7 @@ const Navbar = (props) => {
                                 sx={{ width: 20, height: 20 }}
                               />
                               <Typography sx={{ 
+                                color: "inherit",
                                 fontSize: '14px',
                                 fontFamily: theme.typography.fontFamily 
                               }}>
@@ -2304,6 +2357,7 @@ const Navbar = (props) => {
                               />
                               <Typography sx={{ 
                                 fontSize: '14px',
+                                color: "inherit",
                                 fontFamily: theme.typography.fontFamily 
                               }}>
                                 Settings
@@ -2344,6 +2398,7 @@ const Navbar = (props) => {
                               />
                               <Typography sx={{ 
                                 fontSize: '14px',
+                                color: "inherit",
                                 fontFamily: theme.typography.fontFamily 
                               }}>
                                 Notifications ({notifications === undefined || notifications === null ? 0 : 
@@ -2388,6 +2443,7 @@ const Navbar = (props) => {
                               />
                               <Typography sx={{ 
                                 fontSize: '14px',
+                                color: "inherit",
                                 fontFamily: theme.typography.fontFamily 
                               }}>
                                 About
@@ -2427,6 +2483,7 @@ const Navbar = (props) => {
                               />
                               <Typography sx={{ 
                                 fontSize: '14px',
+                                color: "inherit",
                                 fontFamily: theme.typography.fontFamily 
                               }}>
                                 Logout
@@ -2457,7 +2514,7 @@ const Navbar = (props) => {
                                 margin: 0
                               }}
                             >
-                              Version 1.4.5
+                              Version 2.0.2
                             </Typography>
                           </Box>
                         </Menu>
@@ -2503,6 +2560,7 @@ const Navbar = (props) => {
                                })
                              }
                              setSearchBarModalOpen(true);
+                             setIsDocSearchModalOpen(false);
                            }}
                          >
                            <SearchIcon sx={{ fontSize: 24 }} />
@@ -2543,14 +2601,14 @@ const Navbar = (props) => {
 
 					{isCloud && 
 						<Button
-						  variant="outlined"
+						  variant="contained"
+              color="secondary"
 						  sx={{
 							...sharedButtonStyles,
 							display: {
 							  xs: "none",
 							  lg: "block"
 							},
-							color: "white",
 							backgroundColor: "#2F2F2F",
 							border: "1px solid #2F2F2F",
 							borderRadius: "8px",
diff --git a/frontend/src/components/Oauth2Auth.jsx b/frontend/src/components/Oauth2Auth.jsx
index a3abe710..24d04adf 100755
--- a/frontend/src/components/Oauth2Auth.jsx
+++ b/frontend/src/components/Oauth2Auth.jsx
@@ -1,7 +1,8 @@
-import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect, useContext } from "react";
+import { Context } from "../context/ContextApi.jsx";
 import { toast } from 'react-toastify';
 import { useParams, useNavigate, Link } from "react-router-dom";
-import theme from '../theme.jsx';
+import { getTheme } from '../theme.jsx';
 //import { useAlert 
 
 import { v4 as uuidv4 } from "uuid";
@@ -112,6 +113,8 @@ const AuthenticationOauth2 = (props) => {
       authenticationType.client_secret !== null &&
       authenticationType.client_secret.length > 0
   );	
+  const {themeMode, brandColor} = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
 
   const [clientId, setClientId] = React.useState(defaultConfigSet ? authenticationType.client_id : "");
   const [clientSecret, setClientSecret] = React.useState(defaultConfigSet ? authenticationType.client_secret : "");
@@ -724,7 +727,7 @@ const AuthenticationOauth2 = (props) => {
 							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
 							src={selectedAction.large_image}
 						/>
-						<Typography style={{ margin: 0, marginLeft: 10, marginTop: 5,}} variant="body1">
+						<Typography style={{ margin: 0, marginLeft: 10, marginTop: 5, color: "#2f2f2f",}} variant="body1">
 							One-click Login
 						</Typography>
 					</span>
@@ -738,7 +741,7 @@ const AuthenticationOauth2 = (props) => {
   return (
     <div>
       <DialogTitle>
-        <div style={{ color: "white" }}>
+        <div style={{ color: theme.palette.text.primary }}>
           Authenticate {selectedApp.name.replaceAll("_", " ")}
         </div>
       </DialogTitle>
@@ -749,7 +752,7 @@ const AuthenticationOauth2 = (props) => {
             target="_blank"
             rel="norefferer"
             href="/docs/apps#authentication"
-            style={{ textDecoration: "none", color: "#f85a3e" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor}}
           >
             {" "}
             Learn more about Oauth2 with Shuffle
diff --git a/frontend/src/components/OrgHeaderNew.jsx b/frontend/src/components/OrgHeaderNew.jsx
index b319f3f3..1d8cbe82 100644
--- a/frontend/src/components/OrgHeaderNew.jsx
+++ b/frontend/src/components/OrgHeaderNew.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
-import theme from "../theme.jsx";
+import React, { useEffect, useState, useContext } from "react";
+import {getTheme} from "../theme.jsx";
 import { makeStyles } from "@mui/styles";
 import { toast } from 'react-toastify';
-
+import { Context } from "../context/ContextApi.jsx";
 import {
   Tooltip,
   TextField,
@@ -69,6 +69,8 @@ const OrgHeader = (props) => {
     selectedOrganization.description
   );
 
+  const { themeMode } = useContext(Context)
+  const {theme} = getTheme(themeMode)
 
   const [file, setFile] = React.useState("");
   const [fileBase64, setFileBase64] = React.useState(
@@ -364,10 +366,10 @@ const OrgHeader = (props) => {
     >
       <FormControl>
         <DialogTitle>
-          <div style={{ color: "rgba(255, 255, 255, 0.9)" }}>Upload Organization Image</div>
+          <div style={{ color: theme?.palette?.textColor}}>Upload Organization Image</div>
         </DialogTitle>
         {errorText}
-        <DialogContent style={{ color: "rgba(255, 255, 255, 0.65)" }}>
+        <DialogContent style={{ color: theme?.palette?.textColor }}>
           <AvatarEditor
             ref={setEditorRef}
             image={croppedData}
@@ -389,7 +391,7 @@ const OrgHeader = (props) => {
                 style={appIconStyle}
                 onClick={() => { upload.click(); }}
               >
-                <AddAPhotoOutlinedIcon style={{ color: "rgba(255, 255, 255, 0.9)" }} />
+                <AddAPhotoOutlinedIcon style={{ color: theme?.palette?.textColor }} />
               </Button>
             </Tooltip>
             <Tooltip title="Zoom In">
@@ -399,7 +401,7 @@ const OrgHeader = (props) => {
                 style={appIconStyle}
                 onClick={zoomIn}
               >
-                <ZoomInOutlinedIcon style={{ color: "rgba(255, 255, 255, 0.9)" }} />
+                <ZoomInOutlinedIcon style={{ color: theme?.palette?.textColor }} />
               </Button>
             </Tooltip>
             <Tooltip title="Zoom Out">
@@ -409,7 +411,7 @@ const OrgHeader = (props) => {
                 style={appIconStyle}
                 onClick={zoomOut}
               >
-                <ZoomOutOutlinedIcon style={{ color: "rgba(255, 255, 255, 0.9)" }} />
+                <ZoomOutOutlinedIcon style={{ color: theme?.palette?.textColor }} />
               </Button>
             </Tooltip>
             <Tooltip title="Rotate">
@@ -419,7 +421,7 @@ const OrgHeader = (props) => {
                 style={appIconStyle}
                 onClick={rotation}
               >
-                <LoopIcon style={{ color: "rgba(255, 255, 255, 0.9)" }} />
+                <LoopIcon style={{ color: theme?.palette?.textColor }} />
               </Button>
             </Tooltip>
           </div>
@@ -427,7 +429,7 @@ const OrgHeader = (props) => {
         </DialogContent>
         <DialogActions>
           <Button
-            style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "rgba(255, 255, 255, 0.9)" }}
+            style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: theme?.palette?.textColor }}
             onClick={onCancelSaveAppIcon}
           >
             Cancel
@@ -491,7 +493,7 @@ const OrgHeader = (props) => {
         <div style={{ marginLeft: 16, alignContent: "center" }}>
           <div >
             <Button
-              style={{ backgroundColor: '#ff8544', fontSize: 16, textTransform: 'capitalize', color: "#212121", boxShadow: "none", borderRadius: 4, width: 128, height: 40 }}
+              style={{ fontSize: 16, textTransform: 'capitalize',  boxShadow: "none", borderRadius: 4, width: 128, height: 40 }}
               variant="contained"
               color="primary"
               onClick={() => {
@@ -503,9 +505,9 @@ const OrgHeader = (props) => {
           </div>
           <div>
             <Button
-              style={{ backgroundColor: '#494949', fontSize: 16, textTransform: 'capitalize', color: "#ffffff", boxShadow: "none", marginTop: 20, borderRadius: 4, width: 128, height: 40 }}
               variant="contained"
-              color="primary"
+              color="secondary"
+              style={{ fontSize: 16, textTransform: 'capitalize', boxShadow: "none", marginTop: 20, borderRadius: 4, width: 128, height: 40 }}
               onClick={() => removeImage()}
             >
               Remove
diff --git a/frontend/src/components/OrgHeaderexpandedNew.jsx b/frontend/src/components/OrgHeaderexpandedNew.jsx
index 8d95b046..4f708800 100644
--- a/frontend/src/components/OrgHeaderexpandedNew.jsx
+++ b/frontend/src/components/OrgHeaderexpandedNew.jsx
@@ -1,8 +1,9 @@
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useState, useContext } from "react";
 
 import { makeStyles } from "@mui/styles";
 import { toast } from "react-toastify"
-import theme from '../theme.jsx';
+import { getTheme } from '../theme.jsx';
+import { Context } from "../context/ContextApi.jsx";
 //import { useAlert 
 
 import {
@@ -89,6 +90,8 @@ const OrgHeaderexpandedNew = (props) => {
 	);
 
 	const [openNotification, setOpenNotification] = React.useState(false);
+	const { themeMode, supportEmail, brandColor } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
 
 	const handleStatusChange = (event) => {
 		const { value } = event.target;
@@ -178,7 +181,7 @@ const OrgHeaderexpandedNew = (props) => {
 	const [uploadRepo, setUploadRepo] = React.useState(selectedOrganization.defaults === undefined ? "" : selectedOrganization.defaults.workflow_upload_repo === undefined || selectedOrganization.defaults.workflow_upload_repo.length === 0 ? "" : selectedOrganization.defaults.workflow_upload_repo)
 	const [uploadBranch, setUploadBranch] = React.useState(selectedOrganization.defaults === undefined ? defaultBranch : selectedOrganization.defaults.workflow_upload_branch === undefined || selectedOrganization.defaults.workflow_upload_branch.length === 0 ? defaultBranch : selectedOrganization.defaults.workflow_upload_branch)
 	const [uploadUsername, setUploadUsername] = React.useState(selectedOrganization.defaults === undefined ? "" : selectedOrganization.defaults.workflow_upload_username === undefined || selectedOrganization.defaults.workflow_upload_username.length === 0 ? "" : selectedOrganization.defaults.workflow_upload_username)
-	const [uploadToken, setUploadToken] = React.useState(selectedOrganization.defaults === undefined ? "" : selectedOrganization.defaults.workflow_upload_token === undefined || selectedOrganization.defaults.workflow_upload_token.length === 0 ? "" : selectedOrganization.defaults.workflow_upload_token)
+	const [uploadToken, setUploadToken] = React.useState("")
 	const [regionStatus, setRegionStatus] = useState();
 
 	useEffect(() => {
@@ -199,9 +202,10 @@ const OrgHeaderexpandedNew = (props) => {
 			setUploadUsername(selectedOrganization?.defaults?.workflow_upload_username)
 		}
 
-		if (uploadToken !== selectedOrganization?.defaults?.workflow_upload_token) {
-			setUploadToken(selectedOrganization?.defaults?.workflow_upload_token)
-		}
+		// Not showing the token in the UI (cause it's in plain text)
+		// if (uploadToken !== selectedOrganization?.defaults?.workflow_upload_token) {
+		// 	setUploadToken(selectedOrganization?.defaults?.workflow_upload_token)
+		// }
 	}, [selectedOrganization])
 
 	useEffect(() => {
@@ -264,7 +268,7 @@ const OrgHeaderexpandedNew = (props) => {
 
 	const handleSendChangeRegionMail = (region) => {
 		if (selectedOrganization === undefined || selectedOrganization === null) {
-			toast.error("Failed to send request for changing region. Please contact support@shuffler.io.")
+			toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
 			return
 		}
 
@@ -294,13 +298,13 @@ const OrgHeaderexpandedNew = (props) => {
 			body: JSON.stringify(data),
 		}).then((response) => {
 			if (response.status !== 200) {
-				toast.error("Failed to send request for changing region. Please contact support@shuffler.io.")
+				toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
 			} else {
 				toast.success("Successfully sent request for region change. We will process the move and contact you shortly.")
 			}
 		}).catch((err) => {
 			console.log(err)
-			toast.error("Failed to send request for changing region. Please contact support@shuffler.io.")
+			toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
 		})
 	}
 
@@ -358,7 +362,7 @@ const OrgHeaderexpandedNew = (props) => {
 	const orgSaveButton = (
 		<Tooltip title="Save any unsaved data" placement="bottom">
 			<Button
-				style={{ width: 244, height: 51, display: 'flex', justifyContent: 'center', textTransform: 'capitalize', padding: "16px, 24px, 16px, 24px", borderRadius: 4, backgroundColor: "#ff8544", color: "#1a1a1a", fontSize: 16, }}
+				style={{ width: 244, height: 51, display: 'flex', justifyContent: 'center', textTransform: 'capitalize', padding: "16px, 24px, 16px, 24px", borderRadius: 4, fontSize: 16, }}
 				variant="contained"
 				color="primary"
 				disabled={
@@ -448,7 +452,7 @@ const OrgHeaderexpandedNew = (props) => {
 								<div style={{ marginTop: 8, display: "flex" }} />
 								<div style={{ display: "flex" }}>
 									<div style={{ width: "100%", maxWidth: 434, marginRight: 10 }}>
-										Name
+										<Typography variant="text" style={{color: theme.palette.text.primary}}>Name</Typography>
 										<TextField
 											required
 											style={{
@@ -459,7 +463,8 @@ const OrgHeaderexpandedNew = (props) => {
 												maxWidth: 434,
 												marginTop: "5px",
 												marginRight: "15px",
-												backgroundColor: isEditOrgTab ? "#212121" : theme.palette.inputColor,
+												color: theme.palette.textFieldStyle.color,
+												backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 											}}
 											fullWidth={true}
 											placeholder="Name"
@@ -513,10 +518,11 @@ const OrgHeaderexpandedNew = (props) => {
 											color="primary"
 											InputProps={{
 												style: {
-													color: "white",
+													color: theme.palette.textFieldStyle.color,
 													height: "35px",
 													fontSize: "1em",
 													borderRadius: 4,
+													backgroundColor: theme.palette.textFieldStyle.backgroundColor,
 												},
 												classes: {
 													notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
@@ -526,10 +532,10 @@ const OrgHeaderexpandedNew = (props) => {
 									</div>
 									{userdata?.support ? (
 										<div style={{ alignItems: 'center' }}>
-											<div style={{ marginRight: '12px', color: 'white' }}>Status</div>
+											<div style={{ marginRight: '12px', color: theme.palette.text.primary }}>Status</div>
 											<FormControl style={{ width: 220, height: 35 }}>
 												<Select
-													style={{ minWidth: 220, marginTop: 5, maxWidth: 220, height: 35, borderRadius: 4 }}
+													style={{ minWidth: 220, marginTop: 5, maxWidth: 220, height: 35, borderRadius: 4, color: theme.palette.textFieldStyle.color}}
 													id="multiselect-status"
 													multiple
 													value={selectedStatus}
@@ -552,13 +558,13 @@ const OrgHeaderexpandedNew = (props) => {
 
 									{isCloud ? (
 										<div style={{ marginLeft: 13, fontSize: 16, color: "#9E9E9E" }} >
-											Change Region
+											<Typography variant="text" style={{color: theme.palette.text.primary}}>Change Region</Typography>
 											<RegionChangeModal selectedOrganization={selectedOrganization} setSelectedRegion={setSelectedRegion} userdata={userdata} handleSendChangeRegionMail={handleSendChangeRegionMail} />
 										</div>
 									) : null}
 								</div>
 								<div style={{ marginTop: "10px" }} />
-								About
+								<Typography variant="text" style={{color: theme.palette.text.primary}}>Description</Typography>
 								<div style={{ display: "flex" }}>
 									<TextField
 										required
@@ -568,7 +574,8 @@ const OrgHeaderexpandedNew = (props) => {
 											flex: "1",
 											marginTop: "5px",
 											marginRight: "15px",
-											backgroundColor: isEditOrgTab ? "#212121" : theme.palette.inputColor,
+											color: theme.palette.textFieldStyle.color,
+											backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 											height: 89,
 											borderRadius: 4,
 										}}
@@ -621,7 +628,7 @@ const OrgHeaderexpandedNew = (props) => {
 												notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 											},
 											style: {
-												color: "white",
+												color: theme.palette.textFieldStyle.color,
 												height: 89,
 												borderRadius: 4,
 											},
@@ -632,7 +639,7 @@ const OrgHeaderexpandedNew = (props) => {
 
 								</div>
 							</div>
-							<Typography variant="h5" style={{ color: "rgba(241, 241, 241, 1)", fontSize: 24, fontWeight: 600, marginTop: 40, textAlign: "left" }}>
+							<Typography variant="h5" style={{ fontSize: 24, fontWeight: 500, marginTop: 40, textAlign: "left" }}>
 								Preferences
 							</Typography>
 
@@ -653,7 +660,7 @@ const OrgHeaderexpandedNew = (props) => {
 				</Grid>
 				<Grid item xs={12}>
 					<span>
-						<Typography style={{ fontWeight: 400, fontSize: 16 }}>Org Documentation reference</Typography>
+						<Typography style={{ fontWeight: 400, fontSize: 18, color: theme.palette.text.primary }}>Org Documentation reference</Typography>
 
 						<Typography variant="body2" color="textSecondary" style={{ fontWeight: 400, fontSize: 16, marginTop: 8 }}>
 							Add a URL that is added as a link, pointing to any external documentation page you want.
@@ -668,7 +675,8 @@ const OrgHeaderexpandedNew = (props) => {
 								height: 35,
 								fontSize: 16,
 								borderRadius: 4,
-								backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+								color: theme.palette.textFieldStyle.color,
+								backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 							}}
 							fullWidth={true}
 							type="name"
@@ -709,6 +717,13 @@ const OrgHeaderexpandedNew = (props) => {
 											auto_provision: selectedOrganization?.sso_config?.auto_provision,
 										}
 									)
+									
+									if (userdata.org_status.includes("integration_partner")) {
+										toast.info("Reloading page to update the changes everywhere")
+										setTimeout(() => {
+											window.location.reload()
+										}, 5000)
+									}
 								}
 							}}
 							onChange={(e) => {
@@ -719,8 +734,7 @@ const OrgHeaderexpandedNew = (props) => {
 									notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 								},
 								style: {
-									color: "white",
-
+									color: theme.palette.textFieldStyle.color,
 									fontWeight: 400,
 									fontSize: 16,
 									borderRadius: 4,
@@ -736,9 +750,9 @@ const OrgHeaderexpandedNew = (props) => {
 					serverside={false}
 				/>
 				<Grid item xs={12} style={{ marginTop: 20, }}>
-					<Typography variant="h4" style={{ textAlign: "left", color: "rgba(241, 241, 241, 1)", fontSize: 24, fontWeight: 600, }}>Workflow Backup Repository</Typography>
-					<Typography variant="body2" style={{ textAlign: "left", marginTop: 8, color: "#9E9E9E", fontSize: 16, fontWeight: 400 }}>
-						Decide where workflows are backed up in a Git repository. Will create logs and notifications if upload fails. The repository and branch must already have been initialized. Files will show up in the repo root in the /orgId/workflow-status/workflowId.json format. <b>MSSP:</b> If suborg exists, this will automatically be applied for them as well (not retroactive). <a href="/docs/configuration#environment-variables" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">Credentials are encrypted.</a>
+					<Typography variant="h5" style={{ textAlign: "left", fontWeight: 500, }}>Workflow Backup Repository</Typography>
+					<Typography variant="body2" style={{ textAlign: "left", marginTop: 8, color: theme.palette.text.secondary, fontSize: 16, fontWeight: 400 }}>
+						Decide where workflows are backed up in a Git repository. Will create logs and notifications if upload fails. The repository and branch must already have been initialized. Files will show up in the repo root in the /orgId/workflow-status/workflowId.json format. <b>MSSP:</b> If suborg exists, this will automatically be applied for them as well (not retroactive). <a href="/docs/configuration#environment-variables" style={{ textDecoration: "none", color: theme.palette.linkColor }} target="_blank">Credentials are encrypted.</a>
 					</Typography>
 					<Grid container style={{ marginTop: 10, }} spacing={2}>
 						<Grid item xs={6} style={{}}>
@@ -751,7 +765,7 @@ const OrgHeaderexpandedNew = (props) => {
 										marginTop: "8px",
 										marginRight: "16px",
 										height: 35,
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type="name"
@@ -770,7 +784,7 @@ const OrgHeaderexpandedNew = (props) => {
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 
 											fontWeight: 400,
 											fontSize: 16,
@@ -791,7 +805,7 @@ const OrgHeaderexpandedNew = (props) => {
 										marginTop: "8px",
 										marginRight: "16px",
 										height: 35,
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type="name"
@@ -810,7 +824,7 @@ const OrgHeaderexpandedNew = (props) => {
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 
 											fontWeight: 400,
 											fontSize: 16,
@@ -833,7 +847,7 @@ const OrgHeaderexpandedNew = (props) => {
 										marginTop: "8px",
 										marginRight: "16px",
 										height: 35,
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type="name"
@@ -852,8 +866,7 @@ const OrgHeaderexpandedNew = (props) => {
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
-
+											color: theme.palette.textFieldStyle.color,
 											fontWeight: 400,
 											fontSize: 16,
 											borderRadius: 4,
@@ -865,7 +878,7 @@ const OrgHeaderexpandedNew = (props) => {
 						</Grid>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ fontWeight: 400, fontSize: 16 }}>Git token/password</Typography>
+								<Typography style={{ fontWeight: 400, fontSize: 16 }}>New Git token/password</Typography>
 								<TextField
 									required
 									style={{
@@ -873,7 +886,7 @@ const OrgHeaderexpandedNew = (props) => {
 										marginTop: "8px",
 										marginRight: "16px",
 										height: 35,
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									id="outlined-with-placeholder"
@@ -891,7 +904,7 @@ const OrgHeaderexpandedNew = (props) => {
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 
 											fontWeight: 400,
 											fontSize: 16,
@@ -1116,7 +1129,7 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 		} else if (regiontag === "ca") {
 			regiontag = "CA";
 			regionCode = "ca";
-		} else if (regiontag === "austrailia") {
+		} else if (regiontag === "au") {
 			regiontag = "AUS";
 			regionCode = "au"
 		}
@@ -1146,9 +1159,6 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 						selectedOrganization.region = "europe-west2";
 					}
 
-					if (region === "AUS") {
-						region = "AUS (test)"
-					}
 
 					// Check if the current region matches the selected region
 					if (region === selectedOrganization.region) {
@@ -1157,7 +1167,7 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 							<MenuItem value={region} key={index} disabled>
 								{/* show region image through cdn */}
 								<img src={`https://flagcdn.com/48x36/${regionImageCode}.png`} alt={region} style={{ marginRight: 10 }} />
-								{region}
+								{region === "AUS" ? "AUS (test)" : region}
 							</MenuItem>
 						);
 					} else {
@@ -1167,7 +1177,7 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 								alt={region}
 								style={{ marginRight: 10, width: 20, height: 18, }}
 							/>
-							{region}
+							{region === "AUS" ? "AUS (test)" : region}
 						</MenuItem>;
 					}
 				})}
diff --git a/frontend/src/components/OrganizationTab.jsx b/frontend/src/components/OrganizationTab.jsx
index 56a1531d..d7f2acc3 100644
--- a/frontend/src/components/OrganizationTab.jsx
+++ b/frontend/src/components/OrganizationTab.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useContext } from 'react';
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import Billing from "../components/Billing.jsx";
 import Priorities from "../components/Priorities.jsx";
@@ -8,7 +8,8 @@ import CloudSyncTab from '../components/CloudSyncTab.jsx';
 import   SSOTab from "../components/ssoTab.jsx"
 import { ToastContainer, toast } from "react-toastify";
 import { Button, Tooltip } from '@mui/material';
-
+import { getTheme } from '../theme.jsx';
+import { Context } from '../context/ContextApi.jsx';
 const OrganizationTab = (props) => {
     const location = useLocation();
     const navigate = useNavigate();
@@ -25,7 +26,9 @@ const OrganizationTab = (props) => {
         selectedOrganization, handleGetOrg, 
         handleStatusChange, handleEditOrg,
         isLoaded,
-        removeCookie
+        removeCookie,
+        isIntegrationPartner, isChildOrg,
+        isGlobalUser
     } = props;
 
     const [selectedTab, setSelectedTab] = useState('org_config');
@@ -33,10 +36,28 @@ const OrganizationTab = (props) => {
     const [billingInfo, setBillingInfo] = useState({});
     const [orgRequest, setOrgRequest] = React.useState(true);
     const [curIndex, setCurIndex] = React.useState(0);
+    const items = ['Org Configuration', "SSO", "Notifications", 'Billing & Stats', 'Branding'];
+    const [visibleTabs, setVisibleTabs] = useState(items);
     const [unreadNotifications, setUnreadNotifications] = React.useState(
         notifications?.filter((notification) => notification.read === false)?.length
     );
 
+    const { themeMode, brandColor, brandName } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor); 
+
+
+    useEffect(() => {
+        if (isIntegrationPartner && isChildOrg && !isGlobalUser) {
+            setVisibleTabs(items.filter((item) => item !== 'Branding' && item !== 'SSO'));
+        }else {
+            if (userdata && userdata.active_org && userdata.active_org.role === 'admin') {
+                setVisibleTabs(items);
+            }else {
+                setVisibleTabs(items.filter((item) => item !== 'SSO'));
+            }
+        }
+    },[isIntegrationPartner, isChildOrg, isGlobalUser, userdata]);
+
     useEffect(() => {
         const queryParams = new URLSearchParams(location.search);
         const tabName = queryParams.get('admin_tab');
@@ -48,10 +69,26 @@ const OrganizationTab = (props) => {
             } else if(decodedTabName === 'sso'){
                 setCurIndex(1)
             }else if (decodedTabName === 'notifications' || decodedTabName === 'priorities') {
-                setCurIndex(2);
+                if (isIntegrationPartner && isChildOrg && !isGlobalUser) {
+                    setCurIndex(1);
+                }else {
+                    if (userdata && userdata.active_org && userdata.active_org.role === 'admin') {
+                        setCurIndex(2);
+                    }else {
+                        setCurIndex(1);
+                    }
+                }
             } else if (decodedTabName === 'billingstats' || decodedTabName === 'billing') {
-                setCurIndex(3);
-            } else if (decodedTabName === 'branding(beta)') {
+                if (isIntegrationPartner && isChildOrg && !isGlobalUser) {
+                    setCurIndex(2);
+                } else {
+                    if (userdata && userdata?.active_org && userdata?.active_org?.role === 'admin') {
+                        setCurIndex(3);
+                    } else {
+                        setCurIndex(2);
+                    }
+                }
+            } else if (decodedTabName === 'branding') {
                 setCurIndex(4);
             }
             //  else if (decodedTabName === 'analytics') {
@@ -64,7 +101,7 @@ const OrganizationTab = (props) => {
         const formattedTabName = tabName.toLowerCase().replace(/[\s&]+/g, '');
         const encodedTabName = encodeURIComponent(formattedTabName);
         setSelectedTab(formattedTabName);
-        document.title = `Shuffle - admin - ${formattedTabName}`;
+        document.title = brandName?.length > 0 ? `${brandName} - admin - ${formattedTabName}` : `Shuffle - admin - ${formattedTabName}`;
         navigate(`?admin_tab=${encodedTabName}`);
     };
 
@@ -136,11 +173,12 @@ const OrganizationTab = (props) => {
                 return <EditOrgTab isCloud={isCloud} selectedStatus={selectedStatus} setSelectedStatus={setSelectedStatus} handleStatusChange={handleStatusChange} handleEditOrg={handleEditOrg} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} />;
         }
     };
-   
+    
+
     return (
-        <div style={{ height: "100%", width: "100%", color: '#FFFFFF', backgroundColor: '#212121', borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", boxSizing: 'border-box' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-around', width: "100%", borderBottom: '1px solid #494949' ,boxSizing: 'border-box' }}>
-                {['Org Configuration', "sso", "Notifications", 'Billing & Stats', 'Branding'].map((tabName, index) => (
+        <div style={{ height: "100%", width: "100%", color: theme.palette.platformColor, backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder, boxSizing: 'border-box' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-around', width: "100%", borderBottom: theme.palette.defaultBorder ,boxSizing: 'border-box' }}>
+                {visibleTabs.map((tabName, index) => (
                     <Tooltip
                         key={index}
                         title={
@@ -161,10 +199,10 @@ const OrganizationTab = (props) => {
                                 sx={{
                                     "&.MuiButton-root": {
                                         padding: '28px 0',
-                                        borderBottom: index === curIndex ? '2px solid #FF8444' : 'none',
+                                        borderBottom: index === curIndex ? `2px solid ${theme.palette.primary.main}`: 'none',
                                         cursor: 'pointer',
                                         fontWeight: index === curIndex ? 'bold' : 'normal',
-                                        color: index === curIndex ? "#FF8444" : "#FFFFFF",
+                                        color: index === curIndex ? theme.palette.primary.main : theme.palette.text.primary,
                                         textTransform: 'none',
                                         fontSize: 16,
                                         width: "100%",
@@ -172,7 +210,7 @@ const OrganizationTab = (props) => {
                                         borderRadius: 0,
                                     },
                                     "&: hover": {
-                                        backgroundColor: "#323232"
+                                        backgroundColor: theme.palette.hoverColor
                                     },
                                     "&.Mui-disabled": {
                                         color: "#6F6F6F",
@@ -182,7 +220,7 @@ const OrganizationTab = (props) => {
                                     ((tabName === "sso")) && !(userdata?.support || userdata?.active_org?.role === "admin")
                                 }
                             >
-                                {index === 2 && unreadNotifications > 0 ? (
+                                {tabName.toLowerCase() === "notifications" && unreadNotifications > 0 ? (
                                     <div style={{ position: 'relative' }}>
                                         <div style={{
                                             position: 'absolute',
@@ -191,7 +229,7 @@ const OrganizationTab = (props) => {
                                             width: 20,
                                             height: 20,
                                             borderRadius: 10,
-                                            backgroundColor: '#FF8444',
+                                            backgroundColor: theme.palette.primary.main,
                                             color: '#FFFFFF',
                                             fontSize: 12,
                                             display: 'flex',
@@ -203,7 +241,7 @@ const OrganizationTab = (props) => {
                                         {tabName}
                                     </div>
                                 ) : (
-                                    <>{index === 1 ? "SSO" : tabName}</>
+                                    <>{tabName}</>
                                 )}
                             </Button>
                         </div>
diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index e97e6ac2..1dad55c4 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useLayoutEffect, useMemo } from "react";
+import React, { useState, useEffect, useContext, useMemo } from "react";
 import { toast } from 'react-toastify';
 import { makeStyles, createStyles } from "@mui/styles";
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
@@ -11,7 +11,7 @@ import { NestedMenuItem } from "mui-nested-menu";
 import { parsedDatatypeImages } from "../components/AppFramework.jsx";
 import { green, yellow, red } from "../views/AngularWorkflow.jsx"
 //import { useAlert 
-
+import { Context } from "../context/ContextApi.jsx";
 import {
 	Chip,
 	ButtonGroup,
@@ -215,6 +215,9 @@ const ParsedAction = (props) => {
 		}
 	}, [expansionModalOpen])
 
+	const {themeMode, supportEmail} = useContext(Context)
+	const theme = getTheme(themeMode)
+
 	/*
 	useEffect(() => {
 		// This will have the OLD selectedAction, not the new one huh?
@@ -1626,7 +1629,7 @@ const ParsedAction = (props) => {
 					padding: 8,
 					paddingLeft: 14,
 					paddingBottom: 4,
-					backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor,
+					backgroundColor: hover ? theme.palette.hoverColor : theme.palette.textFieldStyle.backgroundColor,
 				}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
 					onClick={(event) => {
 						// event.preventDefault()
@@ -1664,7 +1667,7 @@ const ParsedAction = (props) => {
 						<span style={{ marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
 					</div>
 					{extraDescription.length > 0 ?
-						<Typography variant="body2" color="textSecondary" style={{ marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block", }}>
+						<Typography variant="body2" style={{ marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block", color: theme.palette.textPrimary}}>
 							{extraDescription}
 						</Typography>
 						: null}
@@ -1738,14 +1741,14 @@ const ParsedAction = (props) => {
 								}}
 							>
 								<Tooltip title={"App: " + selectedAction.app_name + ". Click to open in new tab"} placement="top">
-									<a href={"/apps/" + selectedAction?.app_id} target="_blank" style={{ textDecoration: "none", color: "white", }}>
+									<a href={"/apps/" + selectedAction?.app_id} target="_blank" style={{ textDecoration: "none", color: theme.palette.textPrimary, }}>
 										<img src={selectedAppIcon} style={{
 											width: 30,
 											height: 30,
 											marginRight: 10,
 											borderRadius: 5,
 											marginTop: 13,
-											border: "2px solid rgba(255,255,255,0.3)",
+											border: themeMode === "dark" ? "2px solid rgba(255,255,255,0.3)" : "2px solid rgba(0, 0, 0, 0.1)",
 										}} />
 									</a>
 								</Tooltip>
@@ -1809,7 +1812,7 @@ const ParsedAction = (props) => {
 										title="See previous results for this action"
 										placement="top"
 									>
-										<ArrowLeftIcon style={{ color: "rgba(255,255,255,0.7)" }} />
+										<ArrowLeftIcon style={{ color: theme.palette.textPrimary }} />
 									</Tooltip>
 								</IconButton>
 								<IconButton
@@ -1829,7 +1832,7 @@ const ParsedAction = (props) => {
 										title="Find app documentation"
 										placement="top"
 									>
-										<DescriptionIcon style={{ color: "rgba(255,255,255,0.7)" }} />
+										<DescriptionIcon style={{ color: theme.palette.textPrimary }} />
 									</Tooltip>
 								</IconButton>
 
@@ -1863,7 +1866,7 @@ const ParsedAction = (props) => {
 										{autoCompleting ?
 											<CircularProgress style={{ height: 20, width: 20, }} />
 											:
-											<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
+											<AutoFixHighIcon style={{ color: theme.palette.textPrimary, height: 24, }} />
 										}
 									</Tooltip>
 								</IconButton>
@@ -1883,7 +1886,7 @@ const ParsedAction = (props) => {
 											marginTop: "auto",
 											marginBottom: "auto",
 											height: 30,
-											marginLeft: 115,
+											marginLeft: 98,
 											textTransform: "none",
 										}}
 										disabled={autoCompleting}
@@ -1891,7 +1894,7 @@ const ParsedAction = (props) => {
 											if (runFromHere !== undefined) {
 												runFromHere(selectedAction)
 											} else {
-												toast.error("Function not available. Please contact support@shuffler.io")
+												toast.error(`Function not available. Please contact ${supportEmail}`)
 											}
 										}}
 									>
@@ -1939,6 +1942,12 @@ const ParsedAction = (props) => {
 								<Select
 									MenuProps={{
 										disableScrollLock: true,
+										PaperProps: {
+											sx: {
+												"&. MuiList-root": {
+													backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+												}
+											}}
 									}}
 									value={selectedAction.app_version}
 									onChange={(event) => {
@@ -1963,9 +1972,8 @@ const ParsedAction = (props) => {
 									style={{
 										position: "absolute", 
 										top: 10, right: 10, 
-										backgroundColor: theme.palette.surfaceColor,
-										backgroundColor: theme.palette.inputColor,
-										color: "white",
+										backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+										color: theme.palette.textFieldStyle.color,
 										height: 35,
 										borderRadius: theme.palette?.borderRadius,
 									}}
@@ -1978,9 +1986,12 @@ const ParsedAction = (props) => {
 										return (
 											<MenuItem
 												key={index}
-												style={{
-													backgroundColor: theme.palette.inputColor,
-													color: "white",
+												sx={{
+													backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+													color: theme.palette.textFieldStyle.color,
+													"&:hover": {
+														backgroundColor: theme.palette.hoverColor,
+													},
 												}}
 												value={data.version}
 											>
@@ -1994,12 +2005,16 @@ const ParsedAction = (props) => {
 					</div>
 					<div style={{ display: "flex" }}>
 						<div style={{ flex: 5 }}>
-							<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Name</Typography>
+							<Typography style={{ color: theme.palette.textPrimary,}}>Name</Typography>
 							<TextField
 								style={theme.palette.textFieldStyle}
 								InputProps={{
-									style: theme.palette.innerTextfieldStyle,
 									disableUnderline: true,
+									style: {
+										backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+										color: theme.palette.textFieldStyle.color,
+										height: 40,
+									},
 								}}
 								fullWidth
 								color="primary"
@@ -2218,10 +2233,10 @@ const ParsedAction = (props) => {
 								placement="top"
 							>
 								<span>
-									<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Delay</Typography>
+									<Typography style={{ color: theme.palette.textPrimary }}>Delay</Typography>
 									<TextField
 										InputProps={{
-											style: theme.palette.innerTextfieldStyle,
+											style: theme.palette.textFieldStyle,
 											disableUnderline: true,
 										}}
 										disabled={selectedAction?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0}
@@ -2280,7 +2295,7 @@ const ParsedAction = (props) => {
 
 				<div style={{ marginTop: 15, position: "relative", }}>
 					<div style={{display: "flex", }}>
-						<Typography style={{ color: "rgba(255,255,255,0.7)", flex: 10, }}>
+						<Typography style={{ color: theme.palette.textPrimary, flex: 10, }}>
 							Authentication
 						</Typography>
 
@@ -2333,7 +2348,7 @@ const ParsedAction = (props) => {
 						title={
 						workflow?.suborg_distribution?.length > 0 && Object.getOwnPropertyNames(selectedAction?.selectedAuthentication).length !== 0 ? (
 							<React.Fragment>
-								<div style={{padding: 10, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0)"}}>
+								<div style={{padding: 10, backgroundColor: theme.palette.textFieldStyle.backgroundColor, borderRadius: theme.palette.borderRadius, border: theme.palette.defaultBorder}}>
 									<FormControlLabel
 										control={
 											<Checkbox
@@ -2351,10 +2366,18 @@ const ParsedAction = (props) => {
 							</React.Fragment>
 						) : null
 					} placement="left">
-						<div style={{ display: "flex" }}>
+						<div style={{ display: "flex", }}>
 							<Select
 								MenuProps={{
 									disableScrollLock: true,
+									PaperProps: {
+										sx: {
+											'& .MuiList-root': {
+											  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+											  color: theme.palette.textFieldStyle.color,
+											},
+										},
+									},
 								}}
 								labelId="select-app-auth"
 								value={
@@ -2436,17 +2459,20 @@ const ParsedAction = (props) => {
 									}
 								}}
 								style={{
-									backgroundColor: theme.palette.inputColor,
-									color: "white",
+									backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+									color: theme.palette.textFieldStyle.color,
 									height: 35,
 									maxWidth: rightsidebarStyle.maxWidth - 80,
 									borderRadius: theme.palette?.borderRadius,
 								}}
 							>
 								<MenuItem
-									style={{
-										backgroundColor: theme.palette.inputColor,
-										color: "white",
+									sx={{ 
+										backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+										color: theme.palette.textFieldStyle.color,
+										'&:hover': {
+											backgroundColor: theme.palette.textFieldStyle.hoverBackgroundColor, // you define this in your theme
+										  },
 									}}
 									value="No selection"
 								>
@@ -2460,11 +2486,14 @@ const ParsedAction = (props) => {
 									return (
 										<MenuItem
 											key={data.id}
-											style={{
-												backgroundColor: theme.palette.inputColor,
-												color: "white",
+											sx={{
+												backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+												color: theme.palette.textFieldStyle.color,
 												maxWidth: 500,
 												overflowX: "auto",
+												'&:hover': {
+													backgroundColor: theme.palette.hoverColor 
+												},
 											}}
 											value={data}
 										>
@@ -2472,7 +2501,7 @@ const ParsedAction = (props) => {
 											{data?.validation?.valid === true ?
 												<Tooltip title="Authentication has been validated" placement="top">
 													<Chip
-														style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", borderColor: green, maxHeight: 25, }}
+														style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", borderColor: green, maxHeight: 25, color: theme.palette.chipStyle.color, backgroundColor: theme.palette.chipStyle.backgroundColor }}
 														label={"Valid"}
 														variant="outlined"
 														color="secondary"
@@ -2481,7 +2510,7 @@ const ParsedAction = (props) => {
 												: null}
 											{data?.last_modified === true ?
 												<Chip
-													style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", maxHeight: 25, }}
+													style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", maxHeight: 25, color: theme.palette.chipStyle.color, backgroundColor: theme.palette.chipStyle.backgroundColor }}
 													label={"Latest"}
 													variant="outlined"
 													color="secondary"
@@ -2503,9 +2532,12 @@ const ParsedAction = (props) => {
 								<Divider style={{ marginTop: 10, marginBottom: 10, }} />
 
 								<MenuItem
-									style={{
-										backgroundColor: theme.palette.inputColor,
-										color: "white",
+									sx={{
+										backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+										color: theme.palette.textPrimary,
+										'&:hover': {
+											backgroundColor: theme.palette.hoverColor 
+										},
 									}}
 									value="authgroups"
 									disabled
@@ -2637,7 +2669,7 @@ const ParsedAction = (props) => {
 
 			{workflow.execution_variables !== undefined && workflow.execution_variables !== null && workflow.execution_variables.length > 0 ? (
 				<div style={{ marginTop: "20px" }}>
-					<Typography color="textSecondary">Runtime variable (optional)</Typography>
+					<Typography style={{color: theme.palette.textPrimary}}>Runtime variable (optional)</Typography>
 					<Select
 						MenuProps={{
 							disableScrollLock: true,
@@ -2742,8 +2774,8 @@ const ParsedAction = (props) => {
 						options={renderedActionOptions}
 						ListboxProps={{
 							style: {
-								backgroundColor: theme.palette.surfaceColor,
-								color: "white",
+								backgroundColor: theme.palette.platformColor,
+								color: theme.palette.textColor,
 							},
 						}}
 						filterOptions={(options, { inputValue }) => {
@@ -2774,7 +2806,7 @@ const ParsedAction = (props) => {
 						}}
 
 						style={{
-							backgroundColor: theme.palette.backgroundColor,
+							backgroundColor: theme.palette.cardBackgroundColor,
 							height: 35,
 							borderRadius: theme.palette?.borderRadius,
 						}}
@@ -2890,7 +2922,8 @@ const ParsedAction = (props) => {
 							const actionDescription = null
 
 							return (
-								<Tooltip title={actionDescription}
+								<Tooltip 
+									title={actionDescription}
 									placement="right"
 									open={!hiddenDescription}
 									PopperProps={{
@@ -2913,13 +2946,18 @@ const ParsedAction = (props) => {
 										dataLPIgnore="true"
 										autoComplete="off"
 
-										color="primary"
+										
 										id="checkbox-search"
-										variant="body1"
 										style={{
 											...theme.palette.textFieldStyle,
 											border: selectedAction?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0 ? `1px dotted ${theme.palette.distributionColor}` : "inherit",
 										}}
+										inputProps={{
+											...params.inputProps,
+											style: {
+												color: theme.palette.textFieldStyle.color,
+											},
+										}}
 										label={isIntegration ? "Choose a category" : "Find Actions"}
 										variant="outlined"
 										name={`disable_autocomplete_${Math.random()}`}
@@ -2933,12 +2971,12 @@ const ParsedAction = (props) => {
 
 				{selectedAction?.app_name === "Shuffle AI" && selectedAction?.name === "run_llm" ?
 					selectedAction?.environment === "Cloud" && isCloud ? (
-						<Typography color="textSecondary" variant="body2" style={{ paddingTop: 25, }}>
+						<Typography  variant="body2" style={{color: theme.palette.textPrimary, paddingTop: 25, }}>
 							Info: Cloud Inference processing runs with Shuffle's GPUs in EU, Netherlands, and may be unstable. Your data is NOT stored there.
 						</Typography> 
 					)
 					:
-					<Typography color="textSecondary" variant="body2" style={{ paddingTop: 25, color: red, }}>
+					<Typography variant="body2" style={{ paddingTop: 25, color: red, color: theme.palette.textPrimary}}>
 						This action is slow without GPU's. Use Shuffle's Cloud Runtime location for faster processing.
 					</Typography> 
 					:
@@ -2959,7 +2997,6 @@ const ParsedAction = (props) => {
 									apps !== undefined && apps !== null && apps.length > 0 ?
 										<div style={{ display: "flex", maxWidth: 335, overflowX: "auto", overflowY: "hidden", }}>
 											<div onClick={() => {
-
 												selectedAction.example = "noapp"
 												selectedAction.large_image = newimage
 												if (cy !== undefined && cy !== null) {
@@ -3029,7 +3066,13 @@ const ParsedAction = (props) => {
 
 												var found = false
 												for (var key in app.categories) {
-													if (app.categories[key].toLowerCase() !== newactionname) {
+
+													var localnewactionname = newactionname
+													if (newactionname == "comms") {
+														localnewactionname = "communication"
+													}
+
+													if (app.categories[key].toLowerCase() !== localnewactionname) {
 														continue
 													}
 
@@ -3042,6 +3085,9 @@ const ParsedAction = (props) => {
 												}
 
 												var isAppSelected = false
+
+												console.log("App found: ", app.name, app.categories, appIndex, newactionname)
+
 												const paramIndex = selectedAction.parameters.findIndex((param) => param.name === "app_name")
 												if (paramIndex > -1) {
 													// Check the actual value and if it's the same
@@ -3794,8 +3840,8 @@ const ParsedAction = (props) => {
 												id={clickedFieldId}
 												disabled={disabled}
 												style={{
-													backgroundColor: theme.palette.inputColor,
-													borderRadius: theme.palette?.borderRadius,
+													backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+													borderRadius: theme.palette?.textFieldStyle.borderRadius,
 													width: "100%",
 													maxHeight: multiline === true ? undefined : 40,
 													minHeight: 40,
@@ -3816,7 +3862,7 @@ const ParsedAction = (props) => {
 															<ButtonGroup color="secondary" orientation={multiline ? "vertical" : "horizontal"}>
 																<Tooltip title="Autocomplete text" placement="bottom">
 																	<AddCircleOutlineIcon
-																		style={{ color: "rgba(255,255,255,0.7)", cursor: "pointer", margin: multiline ? 5 : 0, }}
+																		style={{ color: theme.palette.textPrimary, cursor: "pointer", margin: multiline ? 5 : 0, }}
 																		onClick={(event) => {
 																			event.preventDefault()
 
@@ -4132,15 +4178,15 @@ const ParsedAction = (props) => {
 										datafield = (
 											<TextField
 												style={{
-													backgroundColor: theme.palette.inputColor,
-													borderRadius: theme.palette?.borderRadius,
+													backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+													borderRadius: theme.palette?.textFieldStyle.borderRadius,
 												}}
 												InputProps={{
 													endAdornment: hideExtraTypes ? null : (
 														<InputAdornment position="end">
 															<Tooltip title="Autocomplete text" placement="top">
 																<AddCircleOutlineIcon
-																	style={{ cursor: "pointer" }}
+																	style={{ cursor: "pointer", color: theme.palette.textPrimary }}
 																	onClick={(event) => {
 																		setMenuPosition({
 																			top: event.pageY + 10,
@@ -4199,6 +4245,14 @@ const ParsedAction = (props) => {
 											<Select
 												MenuProps={{
 													disableScrollLock: true,
+													PaperProps: {
+														sx: {
+															'& .MuiList-root': {
+																backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+																color: theme.palette.textFieldStyle.color,
+															},
+														},
+													},
 												}}
 												SelectDisplayProps={{
 													style: {
@@ -4237,9 +4291,12 @@ const ParsedAction = (props) => {
 														return (
 															<MenuItem
 																key={data}
-																style={{
+																sx={{
 																	backgroundColor: selected ? theme.palette.backgroundColor : theme.palette.inputColor,
-																	color: "white",
+																	color: theme.palette.textFieldStyle.color,
+																	"&:hover": {
+																		backgroundColor: theme.palette.hoverColor 
+																	},
 																}}
 																value={data}
 															>
@@ -4690,7 +4747,7 @@ const ParsedAction = (props) => {
 																width: 24,
 																height: 24,
 																marginRight: 10,
-																color: "rgba(255,255,255,0.6)",
+																color: theme.palette.textPrimary,
 															}}
 															onClick={() => {
 																setAuthenticationModalOpen(true);
@@ -4708,7 +4765,7 @@ const ParsedAction = (props) => {
 														>
 															<PriorityHighIcon
 																style={{
-																	color: "rgba(255,255,255,0.5)",
+																	color: theme.palette.textPrimary,
 																	marginRight: 0,
 																}} />
 														</Tooltip>
@@ -4720,7 +4777,7 @@ const ParsedAction = (props) => {
 															placement="top"
 														>
 															<AutoFixHighIcon style={{
-																color: "rgba(255,255,255,0.7)",
+																color: theme.palette.textPrimary,
 																marginRight: 10,
 															}} />
 														</Tooltip>
@@ -4747,7 +4804,7 @@ const ParsedAction = (props) => {
 														flex: "10",
 														marginTop: "auto",
 														marginBottom: "auto",
-														color: "#C5C5C5",
+														color: theme.palette.textPrimary,
 													}}
 												>
 													{tmpitem} <span style={{ color: theme.palette.main }}>{selectedActionParameters[count].required || selectedActionParameters[count].configuration ? "*" : ""}</span>
@@ -4776,7 +4833,7 @@ const ParsedAction = (props) => {
 												{((data.options !== undefined && data.options !== null && data.options.length > 0) || (selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0)) ? null : 
 												<Tooltip title="Expand editor window" placement="top">
 													<OpenInFullIcon
-														style={{ color: "rgba(255,255,255,0.7)", cursor: "pointer", margin: multiline ? 5 : 0, height: 20, width: 20, }}
+														style={{ color: theme.palette.textPrimary, cursor: "pointer", margin: multiline ? 5 : 0, height: 20, width: 20, }}
 														onMouseOver={(event) => {
 															const clickedField = document.getElementById(clickedFieldId)
 															if (clickedField !== null) {
diff --git a/frontend/src/components/Priorities.jsx b/frontend/src/components/Priorities.jsx
index 0362a59f..e8d83016 100644
--- a/frontend/src/components/Priorities.jsx
+++ b/frontend/src/components/Priorities.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useContext, memo } from "react";
-
 import { toast } from "react-toastify";
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import { v4 as uuidv4, v5 as uuidv5, validate as isUUID, } from "uuid";
 import {
 	Paper,
@@ -18,6 +17,7 @@ import {
 	TextField,
 	MenuItem,
 	IconButton,
+	Box,
 } from "@mui/material";
 
 import {
@@ -41,7 +41,8 @@ const useStyles = makeStyles({
 
 const Priorities = memo((props) => {
   const { globalUrl, userdata,clickedFromOrgTab,selectedOrganization, handleEditOrg, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
-  
+  const { themeMode, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
   const [showDismissed, setShowDismissed] = React.useState(false);
   const [showRead, setShowRead] = React.useState(false);
   const [appFramework, setAppFramework] = React.useState({});
@@ -62,7 +63,7 @@ const Priorities = memo((props) => {
 	);
   
   let navigate = useNavigate();
-  const classes = useStyles();
+	const classes = useStyles();
 
 	useEffect(() => {
 		getFramework()
@@ -353,13 +354,13 @@ const Priorities = memo((props) => {
 	}
 
 	return (
-		<div style={{width: "100%", height: "100%", boxSizing: 'border-box', transition: 'width 0.3s ease', padding: clickedFromOrgTab ? "27px 10px 19px 27px":null, height: clickedFromOrgTab ? "auto":null, minHeight: 843, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
-		  <div style={{ maxHeight: 1700,  overflowY: "auto", width: '100%', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
+		<div style={{width: "100%", height: "100%", boxSizing: 'border-box', transition: 'width 0.3s ease', padding: clickedFromOrgTab ? "27px 10px 19px 27px":null, height: clickedFromOrgTab ? "auto":null, minHeight: 843, backgroundColor: clickedFromOrgTab ? theme.palette.platformColor :null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
+		  <div style={{ maxHeight: 1700,  overflowY: "auto", width: '100%', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
 			<div style={{maxWidth: "calc(100% - 20px)"}}>
-		  	<Typography variant="h5" style={{ color: "rgba(241, 241, 241, 1)",  fontSize: 24, fontWeight: 600, textAlign: "left" }}>
+		  	<Typography variant="h5" style={{  fontSize: 24, fontWeight: 500, textAlign: "left" }}>
 			  Notification Workflow
 			</Typography>
-			<Typography style={{ color: "rgba(158, 158, 158, 1)", fontSize: 16, fontWeight: 400, marginTop: 5,  }}>
+			<Typography color="textSecondary" style={{ fontSize: 16, fontWeight: 400, marginTop: 5,  }}>
 				The notification workflow triggers when an error occurs in one of your workflows. Each individual one will only start a workflow once every 2 minutes. <b>You can point child org notifications into the parent org notification by choosing it in the list.</b>
 			</Typography>
 	
@@ -382,8 +383,9 @@ const Priorities = memo((props) => {
 					classes={{ inputRoot: classes.inputRoot }}
 					ListboxProps={{
 						style: {
-							backgroundColor: "#212121",
-							color: "white",
+							backgroundColor: theme.palette.surfaceColor,
+							color: theme.palette.text.primary,
+							borderRadius: theme.palette.borderRadius,
 						},
 					}}
 					getOptionLabel={(option) => {
@@ -404,8 +406,9 @@ const Priorities = memo((props) => {
 					options={workflows}
 					fullWidth
 					style={{
-						backgroundColor:  "#212121",
-						borderRadius: theme.palette?.borderRadius,
+						backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+						borderRadius: theme.palette.textFieldStyle.borderRadius,
+						color: theme.palette.textFieldStyle.color,
 						height: 35,
 						marginBottom: 40,
 					}}
@@ -449,8 +452,8 @@ const Priorities = memo((props) => {
 								<MenuItem
 									{...props}
 									style={{
-										// backgroundColor: theme.palette.inputColor,
-										color: data.id === workflow.id ? "red" : "white",
+										backgroundColor: theme.palette.surfaceColor,
+										color: data.id === workflow.id ? "red" : theme.palette.text.primary,
 										borderBottom: data.id === "parent" ? "2px solid rgba(255,255,255,0.5)" : null
 									}}
 									value={data}
@@ -470,8 +473,9 @@ const Priorities = memo((props) => {
 							<TextField
 								{...params}
 								style={{
-									backgroundColor: "rgba(33, 33, 33, 1)",
-									borderRadius: 4,
+									backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+									color: theme.palette.textFieldStyle.color,
+									borderRadius: theme.palette.textFieldStyle.borderRadius,
 									height: 35,
 									fontSize: 16,
 									marginTop: "16px"
@@ -523,7 +527,8 @@ const Priorities = memo((props) => {
 						}
 					}}
 					style={{
-						backgroundColor: "rgba(33, 33, 33, 1)",
+						backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+						color: theme.palette.textFieldStyle.color,
 						borderRadius: 4,
 						height: 35,
 						fontSize: 16,
@@ -548,7 +553,7 @@ const Priorities = memo((props) => {
 
 		{notificationWorkflow === undefined || notificationWorkflow === null || notificationWorkflow.length === 0 ? null :
 			<div>
-				<Button variant="outlined" color="secondary" style={{marginTop: 5, textTransform: "none", }} onClick={() => {
+				<Button disableElevation variant="outlined" color="secondary" style={{marginTop: 5, textTransform: "none", }} onClick={() => {
 					if (notificationWorkflow === "parent") {
 						toast.error("Can't send test notifications to the parent org's notification workflow.")
 						return
@@ -599,21 +604,21 @@ const Priorities = memo((props) => {
 			</div>
 		}
 
-		  <Typography style={{marginTop: 50, fontSize: 24, fontWeight: 'bold', display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications ({
+		  <Typography variant="h5" style={{marginTop: 50, fontSize: 24, display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, }}>Notifications ({
 				notifications?.filter((notification) => showRead === true || notification.read === false).length
 				})</Typography>
 
-			<span style={{ fontSize: 16,  marginLeft: clickedFromOrgTab?null:25, color: clickedFromOrgTab?"#9E9E9E":null, }}>
+			<Typography variant="body2" color="textSecondary" style={{ fontSize: 16,  marginLeft: clickedFromOrgTab?null:25, color: clickedFromOrgTab?"#9E9E9E":null, }}>
 				Notifications help you find potential problems with your workflows and apps.&nbsp;
 				<a
 					target="_blank"
 					rel="noopener noreferrer"
 					href="/docs/organizations#notifications"
-					style={{ textDecoration: clickedFromOrgTab?null:"none", color: clickedFromOrgTab?"#FF8444":"#f85a3e" }}
+					style={{ textDecoration: clickedFromOrgTab?null:"none", color: theme.palette.linkColor  }}
 				>
 					Learn more
 				</a>
-			</span>
+			</Typography>
 			<div/>
 			<div style={{display: "flex", marginTop: 10, marginBottom: 10, }}>
 				<Switch
@@ -621,7 +626,7 @@ const Priorities = memo((props) => {
 					onChange={() => {
 						setShowRead(!showRead);
 					}}
-				/><span style={{marginTop: 5, }}>&nbsp; Show read </span>
+				/><Typography style={{marginTop: 5, }}>&nbsp; Show read </Typography>
 				  {notifications !== undefined && notifications !== null && notifications.length > 1 ? (
 					<Button
 					  color="primary"
@@ -641,18 +646,18 @@ const Priorities = memo((props) => {
 
 			{clickedFromOrgTab? null : <Divider style={{marginTop: 50, marginBottom: 50, }} />}
 
-			<h2 style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 60 : null, color: clickedFromOrgTab ? "#ffffff" : null }}>Suggestions</h2>
-			<span style={{ fontSize: 16, color: clickedFromOrgTab ?"#9E9E9E":null,marginLeft: clickedFromOrgTab ?null:25,  }}>
+			<Typography variant="h5" style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 60 : null, }}>Suggestions</Typography>
+			<Typography variant="body2" color="texSecondary" style={{ fontSize: 16, marginLeft: clickedFromOrgTab ?null:25,  }}>
 				Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. <br/>These range from simple configurations in Shuffle to Usecases you may have missed.&nbsp;
 				<a
 					target="_blank"
 					rel="noopener noreferrer"
 					href="/docs/organizations#priorities"
-					style={{ textDecoration: clickedFromOrgTab ?null:"none", color: clickedFromOrgTab ?"#FF8444":"#f85a3e" }}
+					style={{ textDecoration: clickedFromOrgTab ?null:"none", color: clickedFromOrgTab ? theme.palette.linkColor :"#f85a3e" }}
 				>
 					Learn more
 				</a>
-			</span>
+			</Typography>
 			<div style={{marginTop: 10, }}/>
 			<Switch
 				checked={showDismissed}
@@ -699,7 +704,8 @@ const NotificationItem = memo((props) => {
 	var image = "";
 	var orgName = "";
 	var orgId = "";
-
+	const { themeMode, brandColor } = useContext(Context);
+  	const theme = getTheme(themeMode, brandColor);
 	
 	var highlighted = selectedExecutionId === "" && selectedWorkflow === "" ? false : data.reference_url === undefined || data.reference_url === null || data.reference_url.length === 0 ? false : data.reference_url.includes(selectedExecutionId) || data.reference_url.includes(selectedWorkflow) 
 
@@ -755,16 +761,21 @@ const NotificationItem = memo((props) => {
 	}
 
 	return (
-	  <Paper
-		style={{
-		  backgroundColor: theme.palette.inputColor.backgroundColor,
-		  width: clickedFromOrgTab ? null :notificationWidth,
-		  padding: 30,
-		  borderBottom: "1px solid rgba(255,255,255,0.4)",
-		  marginBottom: 20, 
-		  border: highlighted ? "2px solid #f85a3e" : null,
-		  borderRadius: theme.palette?.borderRadius,
-		}}
+		<Box
+			style={{
+				backgroundColor: theme.palette.cardBackgroundColor,
+				width: clickedFromOrgTab ? null : notificationWidth,
+				padding: 30,
+				borderBottom: theme.palette.defaultBorder,
+				marginBottom: 20,
+				border: highlighted ? "2px solid #f85a3e" : null,
+				borderRadius: theme.palette?.borderRadius,
+			}}
+			sx={{
+				"&:hover": {
+					backgroundColor: theme.palette.cardHoverColor,
+				},
+			}}
 	  >
 		<div style={{display: "flex", }}>
 			{data.amount === 1 && data.read === false ? 
@@ -786,8 +797,6 @@ const NotificationItem = memo((props) => {
 			{data.read === false ?
 				<Chip
 					label={"Unread"}
-					variant="contained"
-					color="secondary"
 					style={{marginRight: 15, height: 25, }}
 				  />
 			: 
@@ -813,23 +822,23 @@ const NotificationItem = memo((props) => {
 		</Typography >
 		<div style={{ display: "flex" }}>
 		<ButtonGroup style={{marginTop: 15, minHeight: 50, maxHeight: 50, }}>
-  <Button
-    style={{
-      textTransform: "none",
-      border: "1px solid #ff8544",
-      color: "#ff8544",
-      opacity: data.reference_url ? 1 : 0.5,
-      cursor: data.reference_url ? "pointer" : "not-allowed",
-    }}
-    disabled={
-      !data.reference_url || data.reference_url.length === 0
-    }
-    onClick={() => {
-      window.open(data.reference_url, "_blank");
-    }}
-  >
-    Explore
-  </Button>
+	<Button
+		variant="outlined"
+		color="primary"
+		style={{
+		textTransform: "none",
+		opacity: data.reference_url ? 1 : 0.5,
+		cursor: data.reference_url ? "pointer" : "not-allowed",
+		}}
+		disabled={
+		!data.reference_url || data.reference_url.length === 0
+		}
+		onClick={() => {
+		window.open(data.reference_url, "_blank");
+		}}
+	>
+		Explore
+	</Button>
 
   {data.read === false ? (
     <Button
@@ -922,7 +931,7 @@ const NotificationItem = memo((props) => {
   </Typography>
 </div>
 
-	  </Paper>
+	  </Box>
 	);
 })
 
diff --git a/frontend/src/components/Priority.jsx b/frontend/src/components/Priority.jsx
index 4bd3a6f2..7cc0f3da 100644
--- a/frontend/src/components/Priority.jsx
+++ b/frontend/src/components/Priority.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { toast } from 'react-toastify';
-
+import { getTheme } from "../theme.jsx";
 import ReactGA from 'react-ga4';
-import theme from "../theme.jsx";
 import { useNavigate, Link } from "react-router-dom";
 import { findSpecificApp } from "../components/AppFramework.jsx"
+import { Context } from "../context/ContextApi.jsx";
 import {
 	Paper,
   Typography,
@@ -23,7 +23,8 @@ import {
 
 const Priority = (props) => {
   	const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
-
+	const { themeMode, supportEmail } = useContext(Context);
+	const theme = getTheme(themeMode);
   	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
 	let navigate = useNavigate();
 
@@ -113,7 +114,7 @@ const Priority = (props) => {
     	    }
     	  })
     	  .catch((error) => {
-    	    toast("Failed dismissing alert. Please contact support@shuffler.io if this persists.");
+    	    toast(`Failed dismissing alert. Please contact ${supportEmail} if this persists.`);
     	  });
 	}
 
@@ -121,10 +122,10 @@ const Priority = (props) => {
 	const srcSize = realignedSrc ? 35 : 30 
 	const dstSize = realignedDst ? 35 : 30
 	return (
-		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  "#1A1A1A": theme.palette.surfaceColor, display: "flex", }}>
+		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  theme.palette.backgroundColor : theme.palette.surfaceColor, display: "flex", }}>
 			<div style={{flex: 2, overflow: "hidden",}}>
 				<span style={{display: "flex", }}>
-					{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, }}/> : null} 
+					{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, color: theme.palette.text.primary}}/> : null} 
 					<Typography variant="body1" >
 						{priority.name}
 					</Typography>
@@ -138,7 +139,7 @@ const Priority = (props) => {
 
 						{newdescription.split("&").length > 3 ?
 							<span style={{display: "flex", }}>
-								<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15, }}/>
+								<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15,  color: theme.palette.text.primary }}/>
 								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: dstSize, width: dstSize, marginRight: realignedDst ? -5 : 10,	borderRadius: theme.palette?.borderRadius-3, marginTop: realignedDst ? 5 : 0 }} />
 								<Typography variant="body2" color="textSecondary" style={{marginTop: 3}}>
 									{newdescription.split("&")[2]} 
@@ -154,7 +155,7 @@ const Priority = (props) => {
 				}
 			</div>
 			<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
-				<Button style={{height: 50, borderRadius: 4, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#ff8544": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"transparent":"rgba(255,255,255,0.8)", border: "1px solid #ff8544"}} variant="contained" color="secondary" onClick={() => {
+				<Button style={{height: 50, borderRadius: 4, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, marginTop: 8, width: 175, marginRight: 10, }} variant="outlined" color="primary" onClick={() => {
 
 					if (isCloud) {
 						ReactGA.event({
@@ -180,10 +181,9 @@ const Priority = (props) => {
 					Explore		
 				</Button>
 				{priority.active === true ?
-					<Button style={{borderRadius: 25, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
+					<Button style={{borderRadius: 4, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, width: 100, height: 50, marginTop: 8, }} variant="outlined" color="secondary" onClick={() => {
 						// dismiss -> get envs
 						changeRecommendation(priority, "dismiss")
-
 						// Check window location if it's /workflows
 						if (window.location.pathname === "/workflows") {
 							// Set local storage to hide priorities for now
diff --git a/frontend/src/components/RecentWorkflow.jsx b/frontend/src/components/RecentWorkflow.jsx
index f61492e2..1ffabd77 100644
--- a/frontend/src/components/RecentWorkflow.jsx
+++ b/frontend/src/components/RecentWorkflow.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, {useContext} from "react"
 
 import { Link } from "react-router-dom";
 import { 
@@ -10,14 +10,20 @@ import {
 } from "@mui/material"
 import { useNavigate } from "react-router";
 import theme from "../theme.jsx";
-
+import { getTheme } from "../theme.jsx";
 import {
 	Lock as LockIcon,
 } from '@mui/icons-material';
+import { Context } from "../context/ContextApi.jsx";
 
 // onclickHandler = function override from parent onclick
 const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflowId, }) => {
 
+	const { themeMode } = useContext(Context);
+	const theme = getTheme(themeMode);
+
+
+
     const navigate = useNavigate();
 
 	const [hovered, setHovered] = React.useState(false)
@@ -87,7 +93,7 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 				transition: "opacity 0.1s",
 
 				borderRadius: theme.palette?.borderRadius, 
-				backgroundColor: hovered || currentWorkflowId === workflow.id ? "#1f1f1f" : "transparent",
+				backgroundColor: hovered || currentWorkflowId === workflow.id ? theme.palette.hoverColor : "transparent",
 			  }}
 			  disableRipple
 			>
@@ -127,7 +133,6 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 				))}
 				<Typography
 				  style={{
-					color: "#CDCDCD",
 					fontSize: 16,
 					marginLeft: 8,
 					maxWidth: 180,
diff --git a/frontend/src/components/RenderCytoscape.jsx b/frontend/src/components/RenderCytoscape.jsx
index 7348fdb7..354e49ae 100644
--- a/frontend/src/components/RenderCytoscape.jsx
+++ b/frontend/src/components/RenderCytoscape.jsx
@@ -1,12 +1,16 @@
-import React, { useState, useEffect, useLayoutEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect, useContext, useMemo } from "react";
 import * as cytoscape from "cytoscape";
 import CytoscapeComponent from "react-cytoscapejs";
-import cystyle from "../defaultCytoscapeStyle.jsx";
+import defaultCytoscapeStyle from "../defaultCytoscapeStyle.jsx";
+import { Context } from "../context/ContextApi.jsx";
+import { getTheme } from "../theme.jsx";
 
 const surfaceColor = "#27292D";
 const CytoscapeWrapper = (props) => {
   const { globalUrl, inworkflow, height, width } = props;
-
+  const {themeMode} = useContext(Context)
+  const theme = getTheme(themeMode)
+  const cystyle = useMemo(() => defaultCytoscapeStyle(theme), [themeMode]);
   const [elements, setElements] = useState([]);
   const [workflow, setWorkflow] = useState(inworkflow);
   const [cy, setCy] = React.useState();
diff --git a/frontend/src/components/RuntimeDebugger.jsx b/frontend/src/components/RuntimeDebugger.jsx
index 62f8de0e..9ac474d5 100644
--- a/frontend/src/components/RuntimeDebugger.jsx
+++ b/frontend/src/components/RuntimeDebugger.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 
 import { 
 	TextField,
@@ -17,10 +17,11 @@ import {
 	IconButton,
 	Switch,
 } from '@mui/material';
+import { Context } from '../context/ContextApi.jsx';
 
 import { toast } from "react-toastify" 
 import { makeStyles } from "@mui/styles";
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import Pagination from '@mui/material/Pagination';
@@ -39,7 +40,8 @@ import {
 	EditNote as EditNoteIcon,
 	AccountTree as AccountTreeIcon,
 	Cached as CachedIcon,
-	FilterAltOff as FilterAltOffIcon 
+	FilterAltOff as FilterAltOffIcon,
+	Send as SendIcon, 
 } from '@mui/icons-material';
 
 import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'
@@ -69,6 +71,8 @@ const RuntimeDebugger = (props) => {
 	const [endTime, setEndTime] = useState("")
 	const [startTime, setStartTime] = useState("")
 	const [totalCount, setTotalCount] = useState(0)
+	const {themeMode, supportEmail} = useContext(Context)
+	const theme = getTheme(themeMode)
 
 	const [workflow, setWorkflow] = useState({})
 	const [ignoreOrg, setIgnoreOrg] = useState(false)
@@ -107,7 +111,7 @@ const RuntimeDebugger = (props) => {
 
 		var maxworkflows = 5
 
-		console.log("Looking for MAX this amount of workflows: ", maxworkflows)
+		//console.log("Looking for MAX this amount of workflows: ", maxworkflows)
 		for (let key in workflows) {
 			if (key > maxworkflows) {
 				break
@@ -347,6 +351,9 @@ const RuntimeDebugger = (props) => {
 					source = "rerun of a previous run"
 				} else if (source === "form") { 
 					foundSource = <EditNoteIcon style={{color: theme.palette.primary.secondary, height: imageSize, width: imageSize, }} />
+				} else if (source === "single_action" || source == "single_api" || source === "direct_api") { 
+					foundSource = <SendIcon color="secondary" style={{height: imageSize-5, }} />
+					source = "Single API call"
 				} else {
 					source = "manual"
 				}
@@ -354,12 +361,12 @@ const RuntimeDebugger = (props) => {
 				var imageSource = "";
 				if (params?.row?.org?.id?.length > 0) {
 					if (params?.row?.org?.image?.length > 0){
-						imageSource = params?.row.org?.image
+						imageSource = params?.row?.org?.image
 					}else {
 						imageSource = "/images/no_image.png"
 					}
-				}else {
-					if (userdata?.active_org.image?.length > 0){
+				} else {
+					if (userdata?.active_org?.image?.length > 0){
 						imageSource = userdata?.active_org?.image
 					}else {
 						imageSource = "/images/no_image.png"
@@ -629,7 +636,7 @@ const RuntimeDebugger = (props) => {
 						  </Link>
 						</span>
 						</Tooltip>
-						<Tooltip arrow title="Force continue workflow. Only workflows for workflows in EXECUTING state. This is NOT a rerun, but way for Shuffle to figure out the next steps automatically. If the execution doesn't finish even after trying this, please contact support@shuffler.io"> 
+						<Tooltip arrow title={`Force continue workflow. Only workflows for workflows in EXECUTING state. This is NOT a rerun, but way for Shuffle to figure out the next steps automatically. If the execution doesn't finish even after trying this, please contact ${supportEmail}`}> 
 						  <IconButton
 							style={{marginLeft: 5, }}
 							disabled={params.row.status !== "EXECUTING"}
@@ -812,7 +819,7 @@ const RuntimeDebugger = (props) => {
 			<div style={{display: "flex", paddingTop: 50, }}>
 				<div style={{display: 'flex', flexDirection: 'column'}}>
 					<div style={{display: "flex", width: "100%", }}>
-							<h1 style={{flex: 3, whiteSpace: "nowrap" }}>Workflow Run Debugger {totalCount !== 0 ? ` (~${totalCount})` : ""}</h1>
+							<Typography  variant="h3" style={{flex: 3, whiteSpace: "nowrap" }}>Workflow Run Debugger {totalCount !== 0 ? ` (~${totalCount})` : ""}</Typography>
 					{selectedWorkflowExecutions.length > 0 ?
 					<ButtonGroup>
 						<Tooltip title="Reruns ALL selected workflows. This will make a new execution for them, and not continue the existing.">
@@ -890,7 +897,8 @@ const RuntimeDebugger = (props) => {
 						fullWidth
 						value={searchQuery}
 						style={{
-							backgroundColor: "#1a1a1a",
+							backgroundColor: theme.palette.backgroundColor,
+						  color: theme.palette.textColor,
 							marginTop: 20,
 							marginLeft: 10,
 							marginRight: 12,
@@ -901,7 +909,8 @@ const RuntimeDebugger = (props) => {
 						}}
 						InputProps={{
 							style: {
-							backgroundColor: "#1a1a1a",
+							backgroundColor: theme.palette.backgroundColor,
+							color: theme.palette.textColor,
 							fontSize: "1em",
 							height: 51,
 							width: 693,
@@ -951,7 +960,7 @@ const RuntimeDebugger = (props) => {
 							}
 							color="secondary"
 						/>
-						<Typography variant="body2" style={{color: "white", }}>Show workflow runs from suborgs</Typography>
+						<Typography variant="body2">Show workflow runs from suborgs</Typography>
 					</div>
 					) : null}
 					</div>
@@ -999,8 +1008,8 @@ const RuntimeDebugger = (props) => {
 				  classes={{ inputRoot: classes.inputRoot }}
 				  ListboxProps={{
 					style: {
-					  backgroundColor: "#1a1a1a",
-					  color: "white",
+					  backgroundColor: theme.palette.backgroundColor,
+					  color: theme.palette.textColor,
 					},
 				  }}
 				  getOptionLabel={(option) => {
@@ -1018,7 +1027,7 @@ const RuntimeDebugger = (props) => {
 				  options={workflows}
 				  fullWidth
 				  style={{
-					backgroundColor: "#1a1a1a",
+					backgroundColor: theme.palette.backgroundColor,
 					height: 50,
 					borderRadius: 4,
 					marginLeft: 5,
@@ -1063,8 +1072,13 @@ const RuntimeDebugger = (props) => {
 					  }>
 						<MenuItem
 						  style={{
-							backgroundColor: "#1a1a1a",
-							color: data.id === workflow.id ? "red" : "white",
+							backgroundColor: theme.palette.backgroundColor,
+							color: data.id === workflow.id ? "red" : theme.palette.textColor,
+						  }}
+						  sx={{
+							"&:hover": {
+								backgroundColor: theme.palette.hoverColor,
+							},
 						  }}
 						  value={data}
 						  onClick={(e) => {
@@ -1082,9 +1096,16 @@ const RuntimeDebugger = (props) => {
 					return (
 					  <TextField
 						style={{
-						  backgroundColor: "#1a1a1a",
+						  backgroundColor: theme.palette.backgroundColor,
+						  color: theme.palette.textColor,
 						  borderRadius: 4,
 						}}
+						inputProps={{
+							style: {
+							backgroundColor: theme.palette.backgroundColor,
+							color: theme.palette.textColor,
+							},
+						}}
 						{...params}
 						label="Workflow"
 						variant="outlined"
@@ -1128,9 +1149,7 @@ const RuntimeDebugger = (props) => {
 
 				<Tooltip title="Clear all filters and search parameters">
 					<Button
-						style={{ marginLeft: 10, minHeight: 60, marginTop: 10, backgroundColor: "#1a1a1a", border: "1px solid #424242", boxShadow: 'none', borderRadius: 4, width: 81, height: 51, marginRight: 15 }}
-						variant="contained"
-						color="primary"
+						style={{ marginLeft: 10, minHeight: 60, marginTop: 10, backgroundColor: theme.palette.backgroundColor, border: "1px solid #424242", boxShadow: 'none', borderRadius: 4, width: 81, height: 51, marginRight: 15 }}
 						onClick={() => {
 							setWorkflowId("")
 							setWorkflow({"id": "", "name": "All Workflows"})
diff --git a/frontend/src/components/SchedulesTab.jsx b/frontend/src/components/SchedulesTab.jsx
index 7ca85f0d..cc91db50 100644
--- a/frontend/src/components/SchedulesTab.jsx
+++ b/frontend/src/components/SchedulesTab.jsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, memo, useContext, useEffect } from 'react';
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import { toast } from "react-toastify" ;
 import { 
 	Divider, 
@@ -33,6 +33,9 @@ const SchedulesTab = memo((props) => {
   const [pipelineModalOpen, setPipelineModalOpen] = React.useState(false);
   const [newPipelineValue, setNewPipelineValue] = React.useState("export | sigma /tmp/sigma_rules | to SHUFFLE_WEBHOOK");
 
+  const { themeMode, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
+
   useEffect(() => {
     if (allSchedules.length === 0 && webHooks.length === 0 && pipelines.length === 0) {
       handleGetAllTriggers()
@@ -142,11 +145,11 @@ const SchedulesTab = memo((props) => {
           }}
         >
             <DialogTitle>
-                <span style={{ color: "white" }}>
+                <Typography variant='h5' color="textPrimary" >
 					Run a Tenzir pipeline
-				</span>
+				</Typography>
 				<Typography variant="body2" color="textSecondary" style={{marginTop: 10, }}>
-					Alpha feature. Deploys to the first available Orborus location. <a href="https://docs.tenzir.com/pipelines" target="_blank" rel="noopener noreferrer" style={{ color: "#ff8544" }}>Explore Tenzir Pipelines</a>. The example below exports everything in the Tenzir database, runs Sigma rules on it, and forwards the results to a Shuffle webhook.
+					Alpha feature. Deploys to the first available Orborus location. <a href="https://docs.tenzir.com/pipelines" target="_blank" rel="noopener noreferrer" style={{ color: theme.palette.primary.main }}>Explore Tenzir Pipelines</a>. The example below exports everything in the Tenzir database, runs Sigma rules on it, and forwards the results to a Shuffle webhook.
 				</Typography>
             </DialogTitle>
             <DialogContent>
@@ -173,17 +176,16 @@ const SchedulesTab = memo((props) => {
             </DialogContent>
             <DialogActions>
                 <Button
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "#ff8544" }}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: theme.palette.primary.main }}
                     onClick={() => {
 						setPipelineModalOpen(false)
 					}}
-                    color="primary"
                 >
                     Cancel
                 </Button>
                 <Button
                     variant="contained"
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", backgroundColor: "#ff8544", color: "#1a1a1a" }}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none",  }}
                     onClick={() => {
                         submitPipelineWrapper(newPipelineValue)
                     }}
@@ -472,7 +474,7 @@ const SchedulesTab = memo((props) => {
       height: "100%",
       transition: 'width 0.3s ease',
       padding: '27px 10px 27px 27px',
-      backgroundColor: '#212121',
+      backgroundColor: theme.palette.platformColor,
       borderTopRightRadius: 8,
       borderBottomRightRadius: 8,
       borderLeft: '1px solid #494949',
@@ -480,36 +482,36 @@ const SchedulesTab = memo((props) => {
 
 	  {NewPipelineView} 
 
-      <div style={{height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
-      <h2 style={{ marginBottom: 8, marginTop: 0, color: "#FFFFFF"  }}>
+      <div style={{height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
+      <Typography variant='h5' color="textPrimary" style={{ marginBottom: 8, marginTop: 0, }}>
 	  	Triggers	
-	  </h2>
-      <Typography variant="body1" style={{ marginBottom: 50, marginTop: 0, }} color="textSecondary">
+	  </Typography>
+      <Typography variant="body2" style={{ marginBottom: 50, marginTop: 0, }} color="textSecondary">
 	  	Triggers are Automatic Workflow starters. <b>Status: Schedules ({allSchedules.length}), Webhooks ({webHooks.length}), Pipelines ({pipelines.length})</b>
 	  </Typography>
 
       <div>
-        <h4 style={{ marginBottom: 8, marginTop: 0, color: "#FFFFFF"  }}>
+        <Typography variant='h6' color="textPrimary" style={{ marginBottom: 8, marginTop: 0, fontWeight: 500}}>
 	  		Schedules
-	  	</h4>
-        <span style={{color:textColor}}>
+	  	</Typography>
+        <Typography variant='body2' color="textSecondary">
           Schedules used in Workflows. Makes locating and control easier.{" "}
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="/docs/organizations#schedules"
-            style={{ color:"#FF8444" }}
+            style={{ color: theme.palette.primary.main }}
           >
             Learn more
           </a>
-        </span>
+        </Typography>
       </div>
-      <div style={{height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
+      <div style={{height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
       <div
         style={{
           borderRadius: 4,
           marginTop: 24,
-          border: "1px solid #494949",
+          border: theme.palette.defaultBorder,
           width: "100%",
           overflowX: "auto", 
           paddingBottom: 0,
@@ -525,7 +527,7 @@ const SchedulesTab = memo((props) => {
                 overflowX: "auto",
                 paddingBottom: 0
         }}>
-          <ListItem style={{width: "100%", paddingTop: 10, paddingBottom: 10, paddingRight: 10,  borderBottom: "1px solid #494949", display: 'table-row'}}>
+          <ListItem style={{width: "100%", paddingTop: 10, paddingBottom: 10, paddingRight: 10,  borderBottom: theme.palette.defaultBorder, display: 'table-row'}}>
           {["Name", "Interval", "Environment", "Workflow", "Argument", "Action"].map((header, index) => (
                           <ListItemText
                               key={index}
@@ -535,7 +537,7 @@ const SchedulesTab = memo((props) => {
                                 padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
                                 whiteSpace: "nowrap",
                                 textOverflow: "ellipsis",
-                                borderBottom: "1px solid #494949",
+                                borderBottom: theme.palette.defaultBorder,
                               }}
                           />
                       ))}
@@ -546,7 +548,7 @@ const SchedulesTab = memo((props) => {
                   key={rowIndex}
                   style={{
                       display: "table-row",
-                      backgroundColor: "#212121",
+                      backgroundColor: theme.palette.platformColor,
                   }}
               >
                   {Array(6)
@@ -563,7 +565,7 @@ const SchedulesTab = memo((props) => {
                                   variant="text"
                                   animation="wave"
                                   sx={{
-                                      backgroundColor: "#1a1a1a",
+                                      backgroundColor: theme.palette.loaderColor,
                                       height: "20px",
                                       borderRadius: "4px",
                                   }}
@@ -575,13 +577,13 @@ const SchedulesTab = memo((props) => {
           ):(
             allSchedules?.length === 0 ? (
               <div style={{ textAlign: 'center'}}>
-                <Typography style={{color: "#FFFFFF", fontSize: 16, padding: 20, textAlign: 'center'}}>No schedules found</Typography>
+                <Typography style={{color: theme.palette.text.primary, fontSize: 16, padding: 20, textAlign: 'center'}}>No schedules found</Typography>
               </div>
             ):(
               allSchedules.map((schedule, index) => {
-                var bgColor = "#212121"
+                var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
                 if (index % 2 === 0) {
-                  bgColor = "#1a1a1a";
+                    bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
                 }
         
                 return (
@@ -645,7 +647,7 @@ const SchedulesTab = memo((props) => {
                                   rel="noopener noreferrer"
                                   style={{
                                     textDecoration: "none",
-                                    color: "#f85a3e",
+                                    color: theme.palette.primary.main,
                                   }}
                                   href={`/workflows/${schedule.workflow_id}`}
                                   target="_blank"
@@ -658,7 +660,7 @@ const SchedulesTab = memo((props) => {
                                       style={{
                                         color:
                                           schedule.workflow_id !== "global"
-                                            ? "#FF8444"
+                                            ? theme.palette.primary.main
                                             : "grey",
                                       }}
                                     />
@@ -698,8 +700,7 @@ const SchedulesTab = memo((props) => {
                           style={{
                             textTransform: 'none',
                             fontSize: 16,
-                            color: schedule.status === "running" ? '#1a1a1a' : null,
-                            backgroundColor: schedule.status === "running" ? '#ff8544' : null,
+                            width: 150,
                           }}
                           color={schedule.status === "running" ? "secondary" : "primary"}
                           variant={schedule.status === "running" ? "contained" : "outlined"}
@@ -725,23 +726,23 @@ const SchedulesTab = memo((props) => {
       </div>
 
         <div style={{ marginTop: 50, marginBottom: 20 }}>
-          <h4 style={{color: "#FFFFFF"}} >Webhooks</h4>
-          <span> Webhooks used in Shuffle workflows.&nbsp;
+          <Typography variant='h6' color="textPrimary">Webhooks</Typography>
+          <Typography variant='body2' color="textSecondary"> Webhooks used in Shuffle workflows.&nbsp;
             <a
               target="_blank"
               rel="noopener noreferrer"
               href="/docs/triggers#webhooks"
-              style={{ textDecoration: "none", color: "#f85a3e" }}
+              style={{ color: theme.palette.primary.main }}
             >
               Learn more
             </a>
-          </span>
+          </Typography>
         </div>
         <div
               style={{
               borderRadius: 4,
               marginTop: 24,
-              border: "1px solid #494949",
+              border: theme.palette.defaultBorder,
               width: "100%",
               overflowX: "auto", 
               paddingBottom: 0,
@@ -757,7 +758,7 @@ const SchedulesTab = memo((props) => {
                     paddingBottom: 0,
                     minWidth: 600,
             }}>
-        <ListItem style={{width:"100%", borderBottom:"1px solid #494949", display: "table-row"}}>
+        <ListItem style={{width:"100%", borderBottom:theme.palette.defaultBorder, display: "table-row"}}>
         {["Name", "Environment", "Workflow", "URL", "Action"].map((header, index) => (
                 <ListItemText
                     key={index}
@@ -767,7 +768,7 @@ const SchedulesTab = memo((props) => {
                       padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
                       whiteSpace: "nowrap",
                       textOverflow: "ellipsis",
-                      borderBottom: "1px solid #494949",
+                      borderBottom: theme.palette.defaultBorder,
                       position: "sticky",
                     }}
                 />
@@ -779,7 +780,7 @@ const SchedulesTab = memo((props) => {
                 key={rowIndex}
                 style={{
                     display: "table-row",
-                    backgroundColor: "#212121",
+                    backgroundColor: theme.palette.platformColor,
                 }}
             >
                 {Array(5)
@@ -796,7 +797,7 @@ const SchedulesTab = memo((props) => {
                                 variant="text"
                                 animation="wave"
                                 sx={{
-                                    backgroundColor: "#1a1a1a",
+                                    backgroundColor: theme.palette.loaderColor,
                                     height: "20px",
                                     borderRadius: "4px",
                                 }}
@@ -808,13 +809,13 @@ const SchedulesTab = memo((props) => {
         ):(
            webHooks?.length === 0 ? (
               <div style={{textAlign: "center"}}>
-                  <Typography style={{color: "#FFFFFF", padding: 20, fontSize: 16, textAlign: 'center'}}>No webhooks found</Typography>
+                  <Typography style={{color: theme.palette.text.primary, padding: 20, fontSize: 16, textAlign: 'center'}}>No webhooks found</Typography>
               </div>
           ):(
             webHooks.map((webhook, index) => {
-              var bgColor = "#212121"
+              var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
               if (index % 2 === 0) {
-                bgColor = "#1a1a1a";
+                  bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
               }
   
               return (
@@ -840,7 +841,7 @@ const SchedulesTab = memo((props) => {
 																rel="noopener noreferrer"
 																style={{
 																	textDecoration: "none",
-																	color: "#f85a3e",
+																	color: theme.palette.primary.main,
 																}}
 																href={`/workflows/${webhook.workflows[0]}`}
 																target="_blank"
@@ -853,7 +854,7 @@ const SchedulesTab = memo((props) => {
 																		style={{
 																			color:
                                       webhook.workflows[0].workflow_id !== "global"
-																					? "#FF8444"
+																					? theme.palette.primary.main
 																					: "grey",
 																		}}
 																	/>
@@ -904,6 +905,7 @@ const SchedulesTab = memo((props) => {
                           fontSize: 16,
                           color:webhook.status === "running" ? '#1a1a1a' : null,
                           backgroundColor: webhook.status === "running" ? '#ff8544' : null,
+                          width: 150,
                         }}
                         color={webhook.status === "running" ? "secondary" : "primary"}
                         variant={webhook.status === "running" ? "contained" : "outlined"}
@@ -928,24 +930,24 @@ const SchedulesTab = memo((props) => {
           </List>
         </div>
         <div style={{ marginTop: 50, marginBottom: 20 }}>
-          <h4 style={{color: "#FFFFFF"}}>Pipelines</h4>
+          <Typography variant='h6' color="textPrimary" >Pipelines</Typography>
 
-          <span>
+          <Typography variant='body2' color="textSecondary" >
             Controls Pipelines on your Orborus Runners, e.g. for Log Ingestion, MQ subscriptions or Sigma Detections.{" "}
             <a
               target="_blank"
               rel="noopener noreferrer"
               href="/docs/triggers#pipelines"
-              style={{ textDecoration: "none", color: "#f85a3e" }}
+              style={{ color: theme.palette.primary.main }}
             >
               Learn more
             </a>
-          </span>
+          </Typography>
 
 	  	  <div style={{marginBottom: 10, marginTop: 10,  }}/>
 
 		  <Button
-		  	style={{ backgroundColor: '#ff8544', color: "#1a1a1a", borderRadius: 4, textTransform: "capitalize", fontSize: 16,  }}
+		  	style={{ borderRadius: 4, textTransform: "capitalize", fontSize: 16,  }}
 		  	variant="contained"
 		  	color="primary"
 		  	onClick={() => setPipelineModalOpen(true)}
@@ -958,7 +960,7 @@ const SchedulesTab = memo((props) => {
               style={{
               borderRadius: 4,
               marginTop: 24,
-              border: "1px solid #494949",
+              border: theme.palette.defaultBorder,
               width: "100%",
               overflowX: pipelines?.length === 0 ? "hidden" : "auto", 
               paddingBottom: 0,
@@ -974,7 +976,7 @@ const SchedulesTab = memo((props) => {
                     overflowX: "auto",
                     paddingBottom: 0
             }}>
-            <ListItem style={{width:"100%", borderBottom:"1px solid #494949", display: "table-row"}}>
+            <ListItem style={{width:"100%", borderBottom:theme.palette.defaultBorder, display: "table-row"}}>
             {["Command", "Environment", "Total Runs", "Actions"].map((header, index) => (
                     <ListItemText
                         key={index}
@@ -984,7 +986,7 @@ const SchedulesTab = memo((props) => {
                           padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
                           whiteSpace: "nowrap",
                           textOverflow: "ellipsis",
-                          borderBottom: "1px solid #494949",
+                          borderBottom: theme.palette.defaultBorder,
                           position: "sticky",
                         }}
                     />
@@ -997,7 +999,7 @@ const SchedulesTab = memo((props) => {
 						key={rowIndex}
 						style={{
 							display: "table-row",
-							backgroundColor: "#212121",
+							backgroundColor: theme.palette.platformColor,
 						}}
 					>
 						{Array(5)
@@ -1015,7 +1017,7 @@ const SchedulesTab = memo((props) => {
 											variant="text"
 											animation="wave"
 											sx={{
-												backgroundColor: "#1a1a1a",
+												backgroundColor: theme.palette.loaderColor,
 												height: "20px",
 												borderRadius: "4px",
 											}}
@@ -1031,14 +1033,14 @@ const SchedulesTab = memo((props) => {
             ): (
               pipelines?.length === 0 ? ( 
                 <div style={{width: "100%", textAlign: "center", }}>
-                  <Typography style={{color: "#FFFFFF", padding: 20,width: "100%", fontSize: 16, textAlign: 'center'}}>No pipeline trigger found</Typography>
+                  <Typography style={{color: theme.palette.text.primary, padding: 20,width: "100%", fontSize: 16, textAlign: 'center'}}>No pipeline trigger found</Typography>
                 </div>
 
               ):(
                 pipelines.map((pipeline, index) => {
-                  var bgColor = "#212121"
+                  var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
                   if (index % 2 === 0) {
-                    bgColor = "#1a1a1a";
+                      bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
                   }
 
                   return (
@@ -1094,4 +1096,3 @@ const SchedulesTab = memo((props) => {
 });
 
 export default SchedulesTab;
-
diff --git a/frontend/src/components/SearchData.jsx b/frontend/src/components/SearchData.jsx
index ddb949f9..2248c318 100644
--- a/frontend/src/components/SearchData.jsx
+++ b/frontend/src/components/SearchData.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import { toast } from "react-toastify" 
 
@@ -58,6 +58,8 @@ const SearchData = props => {
     const [oldPath, setOldPath] = useState("")
     const [value, setValue] = useState("");
     const isDocSearchModal = isDocSearchModalOpen;
+    const {themeMode, supportEmail} = useContext(Context);
+    const theme = getTheme(themeMode)
 
     const handleLinkClick = () => {
         if (searchBarModalOpen) {
@@ -140,14 +142,13 @@ const SearchData = props => {
             >
                 <TextField
                     fullWidth
-                    style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 690, }}
+                    style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.textFieldStyle.backgroundColor, borderRadius: borderRadius, width: 690, }}
                     InputProps={{
                         style: {
-                            color: "white",
+                            color: theme.palette.textFieldStyle.color,
                             fontSize: "1em",
                             height: 50,
                             margin: 0,
-                            fontSize: "0.9em",
                             paddingLeft: 10,
                         },
                         disableUnderline: true,
@@ -217,12 +218,12 @@ const SearchData = props => {
         const baseImage = <CodeIcon />
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: theme.palette.text.primary, zIndex: 1002, backgroundColor: theme.palette.textFieldStyle.backgroundColor, width: "100%", left: 75, boxShadows: "none", }}>
                 <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 105 }}>
                     Workflows
                 </Typography>
 
-                <List style={{ backgroundColor: theme.palette.inputColor, }}>
+                <List style={{ backgroundColor: themeMode === "dark" ? "#2A2A2A" : "#F5F5F5", }}>
                     {hits.length === 0 ?
                         <ListItem style={outerlistitemStyle}>
                             <ListItemAvatar onClick={() => console.log(hits)}>
@@ -242,7 +243,7 @@ const SearchData = props => {
                                 overflowX: "hidden",
                                 overflowY: "hidden",
                                 borderBottom: "1px solid rgba(255,255,255,0.4)",
-                                backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
+                                backgroundColor: mouseHoverIndex === index ? theme.palette.hoverColor : "inherit",
                                 cursor: "pointer",
                                 marginLeft: 5,
                                 marginRight: 5,
@@ -396,14 +397,14 @@ const SearchData = props => {
       })
         .then((response) => {
           if (response.status !== 200) {
-			toast(`Failed to ${type} the app for your organization. Please try again or contact support@shuffler.io`)
+			toast(`Failed to ${type} the app for your organization. Please try again or contact ${supportEmail}`)
           }
 
           return response.json()
         })
         .then((responseJson) => {
           if (responseJson.success === false) {
-            toast(`Failed to ${type} the app for your organization. Please try again or contact support@shuffler.io for more info`) 
+            toast(`Failed to ${type} the app for your organization. Please try again or contact ${supportEmail} for more info`) 
 		  } else {
 			  toast(`App successfully ${type}d. It may now be used in your workflows.`)
 		  }
@@ -438,7 +439,7 @@ const SearchData = props => {
         const baseImage = <LibraryBooksIcon />
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 999, backgroundColor: theme.palette.inputColor, width: 685, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 999, backgroundColor: theme.palette.textFieldStyle.backgroundColor, width: 685, boxShadows: "none", }}>
                 {/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
                     setSearchOpen(false)
                 }}>
@@ -448,7 +449,7 @@ const SearchData = props => {
                     Apps
                 </Typography>
 
-                <List style={{ backgroundColor: theme.palette.inputColor, }}>
+                <List style={{ backgroundColor: themeMode === "dark" ? "#2A2A2A" : "#F5F5F5", }}>
                     {hits.length === 0 ?
                         <ListItem style={outerlistitemStyle}>
                             <ListItemAvatar onClick={() => console.log(hits)}>
@@ -468,7 +469,7 @@ const SearchData = props => {
                                 overflowX: "hidden",
                                 overflowY: "hidden",
                                 borderBottom: "1px solid rgba(255,255,255,0.4)",
-                                backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
+                                backgroundColor: mouseHoverIndex === index ? theme.palette.hoverColor : "inherit",
                                 cursor: "pointer",
                                 marginLeft: 5,
                                 marginRight: 5,
@@ -630,7 +631,7 @@ const SearchData = props => {
         //console.log(type, hits.length, hits)
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, marginTop: isDocSearchModal ? 0 : 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, marginTop: isDocSearchModal ? 0 : 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.textFieldStyle.backgroundColor, width: "100%", left: 470, boxShadows: "none", }}>
                 {/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
                     setSearchOpen(false)
                 }}>
@@ -650,7 +651,7 @@ const SearchData = props => {
 					<DeleteIcon />
 				</IconButton>
 				*/}
-                <List style={{ backgroundColor: theme.palette.inputColor, marginTop: isDocSearchModal ? 35 : 0, }}>
+                <List style={{ backgroundColor: themeMode === "dark" ? "#2A2A2A" : "#F5F5F5", marginTop: isDocSearchModal ? 35 : 0, }}>
                     {hits.length === 0 ?
                         <ListItem style={outerlistitemStyle}>
                             <ListItemAvatar onClick={() => console.log(hits)}>
@@ -670,7 +671,7 @@ const SearchData = props => {
                                 overflowX: "hidden",
                                 overflowY: "hidden",
                                 borderBottom: "1px solid rgba(255,255,255,0.4)",
-                                backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
+                                backgroundColor: mouseHoverIndex === index ? theme.palette.hoverColor : "inherit",
                                 cursor: "pointer",
                                 marginLeft: 5,
                                 marginRight: 5,
@@ -787,13 +788,20 @@ const SearchData = props => {
             window.open(modifiedUrl, '_blank');
         };
         return (
-            <Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.textFieldStyle.backgroundColor, width: "100%", left: 470, boxShadows: "none", }}>
                 <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
                     Discord Chat
                 </Typography>
-                <List style={{ backgroundColor: theme.palette.inputColor, }}>
+                <List style={{ backgroundColor: themeMode === "dark" ? "#2A2A2A" : "#F5F5F5", }}>
                 {hits.length === 0 ?
-                        <ListItem style={outerlistitemStyle}>
+                        <ListItem
+                        sx={{
+                          "&:hover": {
+                            backgroundColor: theme.palette.hoverColor
+                          }
+                        }}
+                        style={outerlistitemStyle}
+                      >                                            
                             <ListItemAvatar onClick={() => console.log(hits)}>
                                 <Avatar>
                                     <FolderIcon />
@@ -805,7 +813,11 @@ const SearchData = props => {
                             />
                         </ListItem>:
                         hits.map((chat, index) => (
-                    <ListItem onClick={() => handleHitClick(chat.url)} key={index} style={{ cursor: "pointer", borderBottom: "1px solid rgba(255,255,255,0.4)" }} onMouseOver={() => setMouseHoverIndex(index)}>
+                    <ListItem  sx={{
+                        "&:hover": {
+                          backgroundColor: theme.palette.hoverColor
+                        }
+                      }} onClick={() => handleHitClick(chat.url)} key={index} style={{ cursor: "pointer", borderBottom: "1px solid rgba(255,255,255,0.4)" }} onMouseOver={() => setMouseHoverIndex(index)}>
                         <ListItemAvatar>
                             <Avatar src="/discord-logo.png" />
                         </ListItemAvatar>
diff --git a/frontend/src/components/Searchfield.jsx b/frontend/src/components/Searchfield.jsx
index ec257cc6..4447c73b 100644
--- a/frontend/src/components/Searchfield.jsx
+++ b/frontend/src/components/Searchfield.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import SearchBox from "../components/SearchData.jsx";
 
@@ -46,7 +46,8 @@ const chipStyle = {
 
 const SearchField = props => {
 	const { serverside, userdata, isMobile, isLoaded, globalUrl, isHeader, isLoggedIn, small, rounded } = props
-
+	const {themeMode} = useContext(Context);
+	const theme = getTheme(themeMode);
 	const {searchBarModalOpen, setSearchBarModalOpen} = useContext(Context);
 
 	let navigate = useNavigate();
@@ -87,7 +88,7 @@ const SearchField = props => {
 					height: 785,
 					borderRadius: 16,
 					border: "1px solid var(--Container-Stroke, #494949)",
-					background: "var(--Container, #000000)",
+					background: theme.palette.DialogStyle.backgroundColor,
 					boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
 					zIndex: 13000,
 				},
diff --git a/frontend/src/components/ShuffleCodeEditor1.jsx b/frontend/src/components/ShuffleCodeEditor1.jsx
index dea674f5..33b37483 100644
--- a/frontend/src/components/ShuffleCodeEditor1.jsx
+++ b/frontend/src/components/ShuffleCodeEditor1.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useLayoutEffect, } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect, useContext } from 'react';
 import { toast } from 'react-toastify';
 import '../codeeditor-index.css';
 import {
@@ -17,8 +17,8 @@ import {
 	ButtonGroup,
 	Collapse,
 } from '@mui/material';
-
-import theme from '../theme.jsx';
+import { Context } from '../context/ContextApi.jsx';
+import {getTheme} from '../theme.jsx';
 import Checkbox from '@mui/material/Checkbox';
 import { isMobile } from "react-device-detect"
 import { NestedMenuItem } from "mui-nested-menu"
@@ -149,6 +149,8 @@ const CodeEditor = (props) => {
 	//	value: localcodedata,
 	//})
 	// const {codelang, setcodelang} = props
+	const {themeMode, supportEmail} = useContext(Context)
+	const theme = getTheme(themeMode)
 
 	const [validation, setValidation] = React.useState(false);
 	const [expOutput, setExpOutput] = React.useState(" ");
@@ -1396,7 +1398,7 @@ const CodeEditor = (props) => {
 
 					  const usedposition = e.offsetY
 					  if (usedposition  === undefined || usedposition === null) {
-						  toast.info("Error: LayerY is undefined or null. Please contact support@shuffler.io")
+						  toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`)
 						  return
 					  }
 
@@ -1523,17 +1525,17 @@ const CodeEditor = (props) => {
 						setActiveDialog("codeeditor")
 					}
 				},
-				style: {
+				sx: {
 					// zIndex: 12501,
 					pointerEvents: "auto",
-					color: "white",
-					minWidth: isMobile ? "100%" : isFileEditor ? 650 : "80%",
-					maxWidth: isMobile ? "100%" : isFileEditor ? 650 : 1100,
+					color: theme.palette.DialogStyle.color,
+					minWidth: isMobile ? "100%" : isFileEditor ? "650px" : "80%",
+					maxWidth: isMobile ? "100%" : isFileEditor ? "650px" : "1100px",
 					minHeight: isMobile ? "100%" : "auto",
-					maxHeight: isMobile ? "100%" : 700,
+					maxHeight: isMobile ? "100%" : "700px",
 					border: "3px solid rgba(255,255,255,0.3)",
-					padding: isMobile ? "25px 10px 25px 10px" : 25,
-					backgroundColor: "black",
+					padding: isMobile ? "25px 10px 25px 10px" : "25px",
+					backgroundColor: themeMode === "dark" ? "black" : theme.palette.DialogStyle.backgroundColor,
 				},
 			}}
 		>
@@ -1584,7 +1586,10 @@ const CodeEditor = (props) => {
 						color: "grey",
 					}}
 					onClick={() => {
-						navigate("")
+						if (isFileEditor !== true) {
+							navigate("")
+						}
+
 						setExpansionModalOpen(false)
 					}}
 				>
@@ -1728,6 +1733,7 @@ const CodeEditor = (props) => {
 													style={{
 														textTransform: "none",
 														width: 175,
+														textWrap: 'nowrap'
 													}}
 													onClick={(event) => {
 														setSourceDataOpen(!sourceDataOpen)
@@ -1747,6 +1753,7 @@ const CodeEditor = (props) => {
 												style={{
 													textTransform: "none",
 													width: 120,
+													textWrap: "nowrap"
 												}}
 												onClick={(event) => {
 													setAnchorEl(event.currentTarget);
@@ -1783,6 +1790,7 @@ const CodeEditor = (props) => {
 												style={{
 													textTransform: "none",
 													width: 145,
+													textWrap: "nowrap"
 												}}
 												onClick={(event) => {
 													setAnchorEl3(event.currentTarget);
@@ -1800,6 +1808,7 @@ const CodeEditor = (props) => {
 												style={{
 													textTransform: "none",
 													width: 130,
+													textWrap: "nowrap",
 												}}
 												onClick={(event) => {
 													setMenuPosition({
@@ -2266,7 +2275,9 @@ const CodeEditor = (props) => {
 										paddingLeft: 10,
 										paddingTop: 0,
 										display: "flex",
-										cursor: "move"
+										cursor: "move",
+										color: theme.palette.DialogStyle.color,
+										backgroundColor: "transparent",
 									}}
 								>
 									<div>
@@ -2294,7 +2305,7 @@ const CodeEditor = (props) => {
 													{
 														selectedEdge && Object.keys(selectedEdge).length > 0 ?
 														<ArrowForwardIcon style={{ 
-															color: "rgba(255,255,255,0.7)",
+															color: theme.palette.textPrimary,
 															fontSize: 18,
 															marginLeft: -5,
 															marginRight: -5,
@@ -2319,7 +2330,7 @@ const CodeEditor = (props) => {
 													}
 												</div>
 												: 
-												<span style={{ color: "white" }}>
+												<span style={{ color: theme.palette.text.primary }}>
 												{selectedAction.name === "execute_python" || selectedAction.name === "execute_bash" ? 
 													"Code to run" : 
 													triggerId ? 
@@ -2337,9 +2348,7 @@ const CodeEditor = (props) => {
 								<Tooltip title="Try it! This runs the Shuffle Tools 'repeat back to me' or 'execute python' action with what you see in the expected output window. Commonly used to test your Python scripts or Liquid filters, not requiring the full workflow to run again." placement="top">
 									<Button
 										id="try-it-button"
-										variant="outlined"
 										disabled={executing}
-										color="primary"
 										style={{
 											border: `1px solid rgba(255, 255, 255, 0.15)`,
 											position: "absolute",
@@ -2351,11 +2360,12 @@ const CodeEditor = (props) => {
 											fontWeight: 500,
 											fontSize: 14,
 											textTransform: "none",
-											backgroundColor: "rgba(33, 33, 33, 0.95)",
+											backgroundColor: theme.palette.platformColor,
 											backdropFilter: "blur(8px)",
 											boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)",
 											transition: "all 0.2s ease",
 											paddingRight: 20, 
+											color: "#FF8544",
 											borderRadius: theme.palette?.borderRadius,
 											"&:hover": {
 												backgroundColor: "rgba(45, 45, 45, 0.95)",
@@ -2376,7 +2386,7 @@ const CodeEditor = (props) => {
 											<span>
 
 												<PlayArrowIcon style={{ height: 18, width: 18, marginBottom: -4, marginLeft: 5, }} />
-											{selectedAction === undefined ? "Try it" : selectedAction.name === "execute_python" ? "Run Python Code" : selectedAction.name === "execute_bash" ? "Run Bash" : "Try it"} 
+											{selectedAction === undefined ? <Typography style={{color: "inherit"}}>Try it</Typography> : selectedAction.name === "execute_python" ? "Run Python Code" : selectedAction.name === "execute_bash" ? "Run Bash" : "Try it"} 
                         						<span
                         						  style={{
                         						    color: "#C8C8C8",
diff --git a/frontend/src/components/TenantsTab.jsx b/frontend/src/components/TenantsTab.jsx
index e5552e3e..998bce83 100644
--- a/frontend/src/components/TenantsTab.jsx
+++ b/frontend/src/components/TenantsTab.jsx
@@ -1,5 +1,6 @@
 import React, { memo, useContext, useEffect, useState } from 'react';
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
+import { Context } from '../context/ContextApi.jsx';
 import {
     FormControl,
     Card,
@@ -63,6 +64,8 @@ const TenantsTab = memo((props) => {
     const [suborglistOpen, setSuborglistOpen] = React.useState(false);
     const [allTenantsOpen, setAllTenantsOpen] = React.useState(false);
     const itemColor = "black";
+    const { themeMode, supportEmail, brandColor } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
 
     useEffect(() => {
         if(parentOrg !== null && parentOrgFlag === null) {
@@ -84,6 +87,9 @@ const TenantsTab = memo((props) => {
                     } else if (regiontag === "ca") {
 						regiontag = "CA";
 						regionCode = "ca";
+                    }else if (regiontag === "au") {
+                        regiontag = "AUS";
+                        regionCode = "au"
                     }
                 }
                 setParentOrgFlag(regionCode);
@@ -168,6 +174,9 @@ const TenantsTab = memo((props) => {
                         } else if (regiontag === "ca") {
 							regiontag = "CA";
 							regionCode = "ca";
+                        }else if (regiontag === "au") {
+                            regiontag = "AUS";
+                            regionCode = "au"
                         }
                     }
                         setParentOrgFlag(regionCode);
@@ -613,7 +622,7 @@ const TenantsTab = memo((props) => {
             }}
         >
             <DialogTitle>
-                <span style={{ color: "white" }}>Add Sub-Organization</span>
+                <Typography variant='h5' color="textPrimary">Add Sub-Organization</Typography>
             </DialogTitle>
             <DialogContent>
                 <div>
@@ -625,7 +634,7 @@ const TenantsTab = memo((props) => {
                         InputProps={{
                             style: {
                                 height: "50px",
-                                color: "white",
+                                color: theme.palette.textFieldStyle.color,
                                 fontSize: "1em",
                             },
                         }}
@@ -644,15 +653,14 @@ const TenantsTab = memo((props) => {
             </DialogContent>
             <DialogActions>
                 <Button
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "#ff8544"  }}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: theme.palette.primary.main }}
                     onClick={() => setModalOpen(false)}
-                    color="primary"
                 >
                     Cancel
                 </Button>
                 <Button
                     variant="contained"
-                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", backgroundColor: "#ff8544", color: "#1a1a1a"}}
+                    style={{ borderRadius: "2px", fontSize: 16, textTransform: "none",}}
                     onClick={() => {
                         createSubOrg(selectedOrganization.id, orgName);
                     }}
@@ -739,7 +747,7 @@ const TenantsTab = memo((props) => {
                         }
                         style={{ marginLeft: 15, height: 50, borderRadius: "2px", color: "#1a1a1a", backgroundColor: (!selectedOrganization.cloud_sync &&
                             cloudSyncApikey.length === 0) ||
-                        loading ? "rgba(200, 200, 200, 0.5)" : "#ff8544", fontSize: 16, textTransform: "none" }}
+                        loading ? "rgba(200, 200, 200, 0.5)" : theme.palette.primary.main, fontSize: 16, textTransform: "none" }}
                         onClick={() => {
                             setLoading(true);
                             enableCloudSync(
@@ -784,31 +792,31 @@ const TenantsTab = memo((props) => {
     const textColor = "#9E9E9E !important";
 
     return (
-        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949",}}>
+        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder,}}>
             {modalView}
             {cloudSyncModal}
-            <div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
-                <div style={{ height: "100%", width: "calc(100% - 20px)",  scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>   
+            <div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
+                <div style={{ height: "100%", width: "calc(100% - 20px)",  scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>   
                 <div style={{ marginBottom: 20 }}>
-                    <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Tenants</h2>
-                    <span style={{ color: textColor }}>
+                    <Typography variant='h5' color="textPrimary" style={{ marginBottom: 8, marginTop: 0 }}>Tenants</Typography>
+                    <Typography variant='body2' color="textSecondary">
                         Create, manage and change to sub-organizations (tenants)! {" "}
                         {isCloud
-                            ? "You can only make a sub organization if you are a customer of shuffle or running a POC of the platform. Please contact support@shuffler.io to try it out."
+                            ? `You can only make a sub organization if you are a customer of shuffle or running a POC of the platform. Please contact ${supportEmail} to try it out.`
                             : ''}&nbsp;
                         <a
                             href="/docs/organizations"
                             target="_blank"
                             rel="noopener noreferrer"
-                            style={{ color: "#FF8444" }}
+                            style={{ color: theme.palette.linkColor }}
                         >
                             Learn more
                         </a>
-                    </span>
+                    </Typography>
                 </div>
 
                 <Button
-                    style={{ backgroundColor: '#ff8544', textTransform: 'none', fontSize: 16, color: "#1a1a1a", borderRadius: 4, width: 212, height: 40 }}
+                    style={{ textTransform: 'none', fontSize: 16, borderRadius: 4, width: 212, height: 40 }}
                     variant="contained"
                     color="primary"
                     disabled={userdata.admin !== 'true'}
@@ -835,17 +843,15 @@ const TenantsTab = memo((props) => {
                         marginTop: 20,
                     }}
                 >
-                    <h3
+                    <Typography 
+                        variant='h6'
+                        color="textPrimary"
                         style={{
                             margin: 0,
-                            fontSize: '1.2rem',
-                            fontWeight: 'bold',
-                            letterSpacing: '1px',
-                            color: "#ffffff"
                         }}
                     >
                         Your Parent Organization
-                    </h3>
+                    </Typography>
                 </div>
                     <div>
                         
@@ -859,7 +865,7 @@ const TenantsTab = memo((props) => {
                         /> */}
 
 
-                    <div style={{ borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
+                    <div style={{ borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, width: "100%", overflowX: "auto", paddingBottom: 0 }}>
                     <List
                         style={{
                         width: "100%",
@@ -890,7 +896,7 @@ const TenantsTab = memo((props) => {
                                 display: "table-cell",
                                 padding: "0px 8px 8px 8px",
                                 textAlign: "center",
-                                borderBottom: "1px solid #494949",
+                                borderBottom: theme.palette.defaultBorder,
                                 verticalAlign: "middle",
                             }}
                         />
@@ -903,7 +909,7 @@ const TenantsTab = memo((props) => {
                             padding: "0px 8px 8px 8px",
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
-                            borderBottom: "1px solid #494949",
+                            borderBottom: theme.palette.defaultBorder,
                             verticalAlign: "middle",
                             textAlign: "center",
                             }}
@@ -915,7 +921,7 @@ const TenantsTab = memo((props) => {
                                 minWidth: 100,
                                 maxWidth: 100,
                                 display: "table-cell",
-                                borderBottom: "1px solid #494949",
+                                borderBottom: theme.palette.defaultBorder,
                                 padding: "0px 8px 8px 8px",
                             }}
                             />
@@ -929,7 +935,7 @@ const TenantsTab = memo((props) => {
                             padding: "0px 8px 8px 8px",
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
-                            borderBottom: "1px solid #494949",
+                            borderBottom: theme.palette.defaultBorder,
                             verticalAlign: "middle",
                             }}
                         />
@@ -942,7 +948,7 @@ const TenantsTab = memo((props) => {
                             padding: "0px 8px 8px 8px",
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
-                            borderBottom: "1px solid #494949",
+                            borderBottom: theme.palette.defaultBorder,
                             verticalAlign: "middle",
                             }}
                         />
@@ -954,7 +960,7 @@ const TenantsTab = memo((props) => {
                                 key={rowIndex}
                                 style={{
                                     display: "flex",
-                                    backgroundColor: "#212121",
+                                    backgroundColor: theme.palette.platformColor,
                                     height: 30,
                                 }}
                                 >
@@ -976,7 +982,7 @@ const TenantsTab = memo((props) => {
                                         variant="text"
                                         animation="wave"
                                         sx={{
-                                        backgroundColor: "#1a1a1a",
+                                        backgroundColor: theme.palette.loaderColor,
                                         borderRadius: "4px",
                                         }}
                                     />
@@ -987,7 +993,7 @@ const TenantsTab = memo((props) => {
                         ) : parentOrg?.id?.length > 0 ? (
                     <ListItem
                         style={{
-                            backgroundColor: "#1A1A1A",
+                            backgroundColor: theme.palette.platformColor,
                             display: "table-row",
                             padding: 8,
                             verticalAlign: "middle",
@@ -1095,7 +1101,7 @@ const TenantsTab = memo((props) => {
                                         padding: "10px",
                                         whiteSpace: "nowrap",
                                     }}
-                                    primary={index === 1 ? "Parent Organization not found or May be you are not part of parent org. Please contact support@shuffler.io." : null}
+                                    primary={index === 1 ? `Parent Organization not found or May be you are not part of parent org. Please contact ${supportEmail}` : null}
                                     colSpan={index === 0 ? 5 : undefined}
                                 />
                             ))}
@@ -1123,17 +1129,15 @@ const TenantsTab = memo((props) => {
                                 marginTop: 20,
                             }}
                         >
-                            <h3
+                            <Typography
+                                variant='h6'
+                                color="textPrimary"
                                 style={{
                                     margin: 0,
-                                    fontSize: '1.2rem',
-                                    fontWeight: 'bold',
-                                    letterSpacing: '1px',
-                                    color: "#ffffff"
                                 }}
                             >
                                 Sub Organizations of the Current Organization ({subOrgs.length})
-                            </h3>
+                            </Typography>
                         </div>
 
                         {/* <Divider
@@ -1144,7 +1148,7 @@ const TenantsTab = memo((props) => {
                             }}
                         /> */}
 
-                        <div style={{borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
+                        <div style={{borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, width: "100%", overflowX: "auto", paddingBottom: 0 }}>
                         <List 
                             style={{
                                 width: '100%', 
@@ -1188,7 +1192,7 @@ const TenantsTab = memo((props) => {
 											display: "table-cell",
 											padding: "0px 8px 8px 8px",
 											textAlign: "center",
-											borderBottom: "1px solid #494949",
+											borderBottom: theme.palette.defaultBorder,
 											verticalAlign: "middle",
 										}} 
 									/>
@@ -1214,7 +1218,7 @@ const TenantsTab = memo((props) => {
                             	            display: "table-cell",
                             	            padding: "0px 8px 8px 8px",
                             	            textAlign: "center",
-                            	            borderBottom: "1px solid #494949",
+                            	            borderBottom: theme.palette.defaultBorder,
                             	            verticalAlign: "middle",
                             	        }} />
                             	    <ListItemText 
@@ -1226,7 +1230,7 @@ const TenantsTab = memo((props) => {
                             	                padding: "0px 8px 8px 8px",
                             	                whiteSpace: "nowrap",
                             	                textOverflow: "ellipsis",
-                            	                borderBottom: "1px solid #494949",
+                            	                borderBottom: theme.palette.defaultBorder,
                             	                verticalAlign: "middle",
                             	                textAlign: "center",
                             	            }} />
@@ -1237,7 +1241,7 @@ const TenantsTab = memo((props) => {
                             	                minWidth: 100,
                             	                maxWidth: 100,
                             	                display: "table-cell",
-                            	                borderBottom: "1px solid #494949",
+                            	                borderBottom: theme.palette.defaultBorder,
                             	                padding: "0px 8px 8px 8px",
                             	            }}
                             	            />
@@ -1251,7 +1255,7 @@ const TenantsTab = memo((props) => {
                             	        padding: "0px 8px 8px 8px",
                             	        whiteSpace: "nowrap",
                             	        textOverflow: "ellipsis",
-                            	        borderBottom: "1px solid #494949",
+                            	        borderBottom: theme.palette.defaultBorder,
                             	        verticalAlign: "middle",
                             	        }}
                             	    />
@@ -1264,7 +1268,7 @@ const TenantsTab = memo((props) => {
                             	        padding: "0px 8px 8px 8px",
                             	        whiteSpace: "nowrap",
                             	        textOverflow: "ellipsis",
-                            	        borderBottom: "1px solid #494949",
+                            	        borderBottom: theme.palette.defaultBorder,
                             	        verticalAlign: "middle",
                             	        }}
                             	    />
@@ -1290,9 +1294,13 @@ const TenantsTab = memo((props) => {
 											}
 										}
 									}
+                                    var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
+                                    if (index % 2 === 0) {
+                                        bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
+                                    }
 
 									return (
-                            	    <ListItem key={index} style={{ backgroundColor: index % 2 === 0 ? '#1A1A1A' : '#212121', width: "100%", borderBottomLeftRadius: 8, display:'table-row', borderBottomRightRadius: 8 }}>
+                            	    <ListItem key={index} style={{ backgroundColor: bgColor, width: "100%", borderBottomLeftRadius: 8, display:'table-row', borderBottomRightRadius: 8 }}>
                             	        <ListItemText primary={<img alt={data?.name} src={data.image || theme.palette.defaultImage} style={imageStyle} />} style={{ width: 100,
                             	    minWidth: 100,
                             	    maxWidth: 100,
@@ -1374,17 +1382,15 @@ const TenantsTab = memo((props) => {
                 />
 
                 <div style={{ textAlign: 'left', width: '100%', padding: '10px', marginTop: 20 }}>
-                    <h3
+                    <Typography
+                        variant='h6'
+                        color="textPrimary"
                         style={{
                             margin: 0,
-                            fontSize: '1.2rem',
-                            fontWeight: 'bold',
-                            letterSpacing: '1px',
-                            color: "#ffffff"
                         }}
                     >
                         All Tenants
-                    </h3>
+                    </Typography>
                 </div>
 
                 {/* <Divider
@@ -1398,7 +1404,7 @@ const TenantsTab = memo((props) => {
                 style={{
                     borderRadius: 4,
                     marginTop: 24,
-                    border: "1px solid #494949",
+                    border: theme.palette.defaultBorder,
                     width: "100%",
                     overflowX: "auto",
                     paddingBottom: 0,
@@ -1448,7 +1454,7 @@ const TenantsTab = memo((props) => {
 									display: "table-cell",
 									padding: "0px 8px 8px 8px",
 									textAlign: "center",
-									borderBottom: "1px solid #494949",
+									borderBottom: theme.palette.defaultBorder,
 									verticalAlign: "middle",
 								}} 
 							/>
@@ -1475,7 +1481,7 @@ const TenantsTab = memo((props) => {
                     	    display: "table-cell",
                     	    padding: "0px 8px 8px 8px",
                     	    textAlign: "center",
-                    	    borderBottom: "1px solid #494949",
+                    	    borderBottom: theme.palette.defaultBorder,
                     	    verticalAlign: "middle",
                     	    }}
                     	/>
@@ -1488,7 +1494,7 @@ const TenantsTab = memo((props) => {
                     	    padding: "0px 8px 8px 8px",
                     	    whiteSpace: "nowrap",
                     	    textOverflow: "ellipsis",
-                    	    borderBottom: "1px solid #494949",
+                    	    borderBottom: theme.palette.defaultBorder,
                     	    verticalAlign: "middle",
                     	    textAlign: "center",
                     	    }}
@@ -1500,7 +1506,7 @@ const TenantsTab = memo((props) => {
                     	        minWidth: 100,
                     	        maxWidth: 100,
                     	        display: "table-cell",
-                    	        borderBottom: "1px solid #494949",
+                    	        borderBottom: theme.palette.defaultBorder,
                     	        padding: "0px 8px 8px 8px",
                     	    }}
                     	    />
@@ -1514,7 +1520,7 @@ const TenantsTab = memo((props) => {
                     	    padding: "0px 8px 8px 8px",
                     	    whiteSpace: "nowrap",
                     	    textOverflow: "ellipsis",
-                    	    borderBottom: "1px solid #494949",
+                    	    borderBottom: theme.palette.defaultBorder,
                     	    verticalAlign: "middle",
                     	    }}
                     	/>
@@ -1527,7 +1533,7 @@ const TenantsTab = memo((props) => {
                     	    padding: "0px 8px 8px 8px",
                     	    whiteSpace: "nowrap",
                     	    textOverflow: "ellipsis",
-                    	    borderBottom: "1px solid #494949",
+                    	    borderBottom: theme.palette.defaultBorder,
                     	    verticalAlign: "middle",
                     	    }}
                     	/>
@@ -1590,6 +1596,11 @@ const TenantsTab = memo((props) => {
 								}
                     	    }
 
+                            var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
+                            if (index % 2 === 0) {
+                                bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
+                            }
+
                     	    return (
                     	    <ListItem
                     	        key={index}
@@ -1597,7 +1608,7 @@ const TenantsTab = memo((props) => {
                     	        display: "table-row",
                     	        verticalAlign: "middle",
                     	        padding: 8,
-                    	        backgroundColor: index % 2 === 0 ? "#1A1A1A" : "#212121",
+                    	        backgroundColor: bgColor,
                     	        borderBottomLeftRadius:
                     	            userdata?.orgs?.length - 1 === index ? 8 : 0,
                     	        borderBottomRightRadius:
diff --git a/frontend/src/components/UserManagmentTab.jsx b/frontend/src/components/UserManagmentTab.jsx
index bb6870ff..ec7036cc 100644
--- a/frontend/src/components/UserManagmentTab.jsx
+++ b/frontend/src/components/UserManagmentTab.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, memo } from "react";
 import { toast } from 'react-toastify';
-
+import { Context } from "../context/ContextApi.jsx";
 import {
     FormControl,
     InputLabel,
@@ -35,7 +35,7 @@ import {
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
 
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
 const MenuProps = {
@@ -75,12 +75,17 @@ const UserManagmentTab = memo((props) => {
     const [logsViewModal, setLogsViewModal] = React.useState(false);
     const [ipSelected, setIpSelected] = React.useState("");
     const [userLogViewing, setUserLogViewing] = React.useState({});
+    const { themeMode, supportEmail, brandColor } = useContext(Context);
+    
+    const theme = getTheme(themeMode, brandColor);
+
 
     useEffect(() => {
         if (selectedOrganization?.mfa_required !== MFARequired) {
           setMFARequired(selectedOrganization?.mfa_required);
         }
       }, [selectedOrganization]);
+
     useEffect(() => { if(users?.length === 0){
         getUsers();
     } }, []);
@@ -363,7 +368,7 @@ const UserManagmentTab = memo((props) => {
                     toast("Failed to deactivate user: " + responseJson.reason);
                 } else if (responseJson.success === false) {
                     toast(
-                        "Failed to deactivate user. Please contact support@shuffler.io if this persists.",
+                        `Failed to deactivate user. Please contact ${supportEmail} if this persists.`,
                     );
                 } else {
                     toast("Changed activation for user " + data.id);
@@ -602,7 +607,7 @@ const UserManagmentTab = memo((props) => {
                   }}
             >
             <DialogTitle>
-                <Typography style={{ color: "white", textTransform: 'none', fontSize: 24 }}>
+                <Typography variant="h5" style={{ textTransform: 'none', fontSize: 24 }}>
                     Add user
                 </Typography>
             </DialogTitle>
@@ -619,7 +624,7 @@ const UserManagmentTab = memo((props) => {
                         InputProps={{
                             style: {
                                 height: "50px",
-                                color: "white",
+                                color: theme.palette.textFieldStyle.color,
                                 fontSize: "1em",
                             },
                         }}
@@ -682,17 +687,17 @@ const UserManagmentTab = memo((props) => {
                 </div>
                 {loginInfo}
             </DialogContent>
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2, backgroundColor: "#212121" }}>
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2, backgroundColor: theme.palette.platformColor }}>
                 <Button
-                    style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544", marginRight: 5 }}
+                    style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginRight: 5,  color: theme.palette.primary.main }}
                     onClick={() => setModalOpen(false)}
-                    color="primary"
                 >
                     Cancel
                 </Button>
                 <Button
                     variant="contained"
-                    style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544" }}
+                    color="primary"
+                    style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,}}
                     onClick={() => {
                         if (isCloud) {
                             inviteUser(modalUser);
@@ -700,7 +705,6 @@ const UserManagmentTab = memo((props) => {
                             submitUser(modalUser);
                         }
                     }}
-                    color="primary"
                 >
                     Submit
                 </Button>
@@ -751,7 +755,7 @@ const UserManagmentTab = memo((props) => {
               }}
         >
             <DialogTitle style={{ maxWidth: "800px", width: "100%", textAlign: "center", margin: "auto", backgroundColor: theme?.palette?.DialogStyle?.backgroundColor}}>
-                <span style={{ color: "white", backgroundColor: theme?.palette?.DialogStyle?.backgroundColor }}>
+                <span style={{ color: theme.palette.text.primary, backgroundColor: theme?.palette?.DialogStyle?.backgroundColor }}>
                     <EditIcon style={{ marginTop: 5 }} /> Editing {selectedUser.username}
                 </span>
             </DialogTitle>
@@ -845,9 +849,10 @@ const UserManagmentTab = memo((props) => {
                         backgroundColor: theme.palette.inputColor,
                     }}
                 />
-                <div style={{ margin: "auto", maxWidth: 450 }}>
-                    <Button
-                        style={{textTransform: 'none', fontSize: 16}}
+                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', margin: "auto", maxWidth: 450 }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+                        <Button
+                        style={{textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp'}}
                         variant="outlined"
                         color="primary"
                         disabled={selectedUser.username === userdata.username}
@@ -859,7 +864,7 @@ const UserManagmentTab = memo((props) => {
                         {selectedUser.active ? "Delete from org" : "Delete from org"}
                     </Button>
                     <Button
-                        style={{ textTransform: 'none', fontSize: 16 }}
+                        style={{ textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp',  }}
                         variant="outlined"
                         color="primary"
                         disabled={
@@ -880,7 +885,7 @@ const UserManagmentTab = memo((props) => {
                         }
                         variant="outlined"
                         color="primary"
-                        style={{textTransform: 'none', fontSize: 16}}
+                        style={{textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp', }}
                     >
                         {selectedUser.mfa_info !== undefined &&
                             selectedUser.mfa_info !== null &&
@@ -888,6 +893,7 @@ const UserManagmentTab = memo((props) => {
                             ? "Disable 2FA"
                             : "Enable 2FA"}
                     </Button>
+                    </div>
 
                     {isCloud && userdata.support && selectedUser.id !== userdata.id ? (
                         <Button
@@ -897,6 +903,8 @@ const UserManagmentTab = memo((props) => {
                                 marginTop: 50,
                                 border: "1px solid #d52b2b",
                                 textTransform: "none",
+                                whiteSpace: 'nowrap',
+                                textWrap: 'nowarp',
                                 color:
                                     showDeleteAccountTextbox === true &&
                                         deleteAccountText?.length > 0 &&
@@ -1269,23 +1277,23 @@ const UserManagmentTab = memo((props) => {
       ) : null
 
     return (
-        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
+        <div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
             {modalView}
             {editUserModal}
             {logview}
-            <div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
-            <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
+            <div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
+            <div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
                 <div style={{display: 'flex', justifyContent: 'space-between'}}>
             <div>
                 <div style={{ marginBottom: 20 }}>
-                    <h2 style={{ marginBottom: 8, marginTop: 0, color: "#FFFFFF" }}>User Management</h2>
-                    <span style={{ color: "#9E9E9E" }}>
+                    <Typography variant="h5" style={{ marginBottom: 8, marginTop: 0,  }}>User Management</Typography>
+                    <Typography variant="body2" color="textSecondary">
                         Add, edit, distribute or remove users from your organization.{" "}
 						<a
                             target="_blank"
                             rel="noopener noreferrer"
                             href="/admin?admin_tab=sso"
-                            style={{ color: "#FF8444" }}
+                            style={{ color: theme.palette.linkColor }}
                         >
 							Configure SSO
                         </a> 
@@ -1296,15 +1304,15 @@ const UserManagmentTab = memo((props) => {
                             target="_blank"
                             rel="noopener noreferrer"
                             href="/docs/organizations#user_management"
-                            style={{ color: "#FF8444" }}
+                            style={{ color: theme.palette.linkColor }}
                         >
                             learn more about users 
                         </a> 
-                    </span>
+                    </Typography>
                 </div>
                 <div />
                 <Button
-                    style={{ color: "#1a1a1a", backgroundColor: "#ff8544",fontSize: 16, textTransform: 'none', borderRadius: 4, width: 162, height: 40, boxShadow: 'none' }}
+                    style={{ fontSize: 16, textTransform: 'none', borderRadius: 4, width: 162, height: 40, boxShadow: 'none' }}
                     variant="contained"
                     color="primary"
                     onClick={() => setModalOpen(true)}
@@ -1312,9 +1320,9 @@ const UserManagmentTab = memo((props) => {
                     Add user
                 </Button>
                 <Button
-                    style={{ backgroundColor: "#2F2F2F", boxShadow: 'none', borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
+                    style={{ boxShadow: 'none', borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
                     variant="contained"
-                    color="primary"
+                    color="secondary"
                     onClick={() => getUsers()}
                 >
                     <CachedIcon />
@@ -1334,7 +1342,7 @@ const UserManagmentTab = memo((props) => {
                 style={{
                 borderRadius: 4,
                 marginTop: 24,
-                border: "1px solid #494949",
+                border: theme.palette.defaultBorder,
                 width: "100%",
                 overflowX: "auto", 
                 paddingBottom: 0,
@@ -1350,7 +1358,7 @@ const UserManagmentTab = memo((props) => {
                     paddingBottom: 0,
                 }}
             >
-                <ListItem style={{ width: "100%", padding: "10px 10px 10px 0px", verticalAlign: 'middle', borderBottom: "1px solid #494949", display: "table-row" }}>
+                <ListItem style={{ width: "100%", padding: "10px 10px 10px 0px", verticalAlign: 'middle', borderBottom: theme.palette.defaultBorder, display: "table-row" }}>
                     {["Username", /*"API Key",*/ "Role", /*"Active",*/ "Type", "MFA", ...(selectedOrganization?.child_orgs?.length > 0 ? ["Suborgs"]: []), "Actions", "Last Login"].map((header, index) => (
                         <ListItemText
                             key={index}
@@ -1360,7 +1368,7 @@ const UserManagmentTab = memo((props) => {
                                 padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
                                 whiteSpace: "nowrap",
                                 textOverflow: "ellipsis",
-                                borderBottom: "1px solid #494949",
+                                borderBottom: theme.palette.defaultBorder,
                                 position: "sticky",
                                 verticalAlign: "middle",
                              }}
@@ -1373,7 +1381,7 @@ const UserManagmentTab = memo((props) => {
                             key={rowIndex}
                             style={{
                                 display: "table-row",
-                                backgroundColor: "#212121",
+                                backgroundColor: theme.palette.platformColor,
                             }}
                         >
                             {Array(9)
@@ -1390,7 +1398,7 @@ const UserManagmentTab = memo((props) => {
                                             variant="text"
                                             animation="wave"
                                             sx={{
-                                                backgroundColor: "#1a1a1a",
+                                                backgroundColor: theme.palette.loaderColor,
                                                 height: "20px",
                                                 borderRadius: "4px",
                                             }}
@@ -1401,9 +1409,9 @@ const UserManagmentTab = memo((props) => {
                     ))
                 ): users === 0 ? null 
                     : users?.map((data, index) => {
-                        var bgColor = "#212121";
+                        var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
                         if (index % 2 === 0) {
-                            bgColor = "#1A1A1A";
+                            bgColor = themeMode === "dark" ? "#1A1A1A" :  "#EAEAEA";
                         }
 
                         const timeNow = new Date().getTime();
@@ -1434,8 +1442,7 @@ const UserManagmentTab = memo((props) => {
                                 style={{
                                 cursor: "pointer",
                                 textDecoration: "underline",
-                                textDecorationColor: "#F76742",
-                                color: "#F76742",
+                                color: theme.palette.linkColor,
                                 }}
                                 onClick={() => {
                                 setLogsViewModal(true);
@@ -1465,7 +1472,7 @@ const UserManagmentTab = memo((props) => {
                                     maxWidth: 150,
                                     minWidth: 100,
                                     width: 'auto',
-                                    color: "#FF8444",
+                                    color: theme.palette.primary.main,
                                     textOverflow: "ellipsis",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
@@ -1522,8 +1529,8 @@ const UserManagmentTab = memo((props) => {
                                                 setUser(data.id, "role", e.target.value);
                                             }}
                                             sx={{
-                                                backgroundColor: "#1A1A1A",
-                                                color: "white",
+                                                backgroundColor: theme.palette.backgroundColor,
+                                                color: theme.palette.textColor,
                                                 height: "50px",
                                                 borderRadius: "4px",
                                                 marginTop: "8px",
@@ -1542,27 +1549,35 @@ const UserManagmentTab = memo((props) => {
                                         >
                                             <MenuItem
                                                 sx={{
-                                                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
-                                                    color: "white",
-                                                    
+                                                    backgroundColor: theme.palette.backgroundColor,
+                                                    color: theme.palette.textColor,
+                                                    "&:hover": {
+                                                        backgroundColor: theme.palette.hoverColor,
+                                                    },
                                                 }}
                                                 value={"admin"}
                                             >
                                                 Org Admin
                                             </MenuItem>
                                             <MenuItem
-                                                style={{
-                                                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
-                                                    color: "white",
+                                                sx={{
+                                                    backgroundColor: theme.palette.backgroundColor,
+                                                    color: theme.palette.textColor,
+                                                    "&:hover": {
+                                                        backgroundColor: theme.palette.hoverColor,
+                                                    },
                                                 }}
                                                 value={"user"}
                                             >
                                                 Org User
                                             </MenuItem>
                                             <MenuItem
-                                                style={{
-                                                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
-                                                    color: "white",
+                                                sx={{
+                                                    backgroundColor: theme.palette.backgroundColor,
+                                                    color: theme.palette.textColor,
+                                                    "&:hover": {
+                                                        backgroundColor: theme.palette.hoverColor,
+                                                    },
                                                 }}
                                                 value={"org-reader"}
                                             >
@@ -1664,7 +1679,20 @@ const UserManagmentTab = memo((props) => {
                                             }
                                         }}
                                     >
-                                        <img src="/icons/editIcon.svg" alt="edit icon" style={{width: 24, height: 24}} />
+                                        <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                        <path
+                                            d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z"
+                                            stroke={themeMode=== "dark" ? "#F1F1F1" : "#333"}
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                        />
+                                        </svg>
                                     </IconButton>
                                     {/* <Button
                                         onClick={() => {
diff --git a/frontend/src/components/WorkflowTemplatePopup2.jsx b/frontend/src/components/WorkflowTemplatePopup2.jsx
index 13810251..2c94ec14 100644
--- a/frontend/src/components/WorkflowTemplatePopup2.jsx
+++ b/frontend/src/components/WorkflowTemplatePopup2.jsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 
 import { toast } from "react-toastify" 
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import AppSearchButtons from "../components/AppSearchButtons.jsx";
 import { isMobile } from "react-device-detect";
 import RenderCytoscape from "../components/RenderCytoscape.jsx";
+import { Context } from "../context/ContextApi.jsx";
 import {
 	Button,
 	Typography,
@@ -72,7 +73,8 @@ const WorkflowTemplatePopup = (props) => {
 	const [loadingWorkflow, setLoadingWorkflow] = React.useState(false)
 	const [workflow, setWorkflow] = useState(inputWorkflow !== undefined && inputWorkflow !== null && inputWorkflow.id !== undefined && inputWorkflow.id !== null && inputWorkflow.id !== "" ? inputWorkflow : {})
 	const [_, setUpdate] = useState(0)
-
+	const { themeMode } = useContext(Context);
+	const theme = getTheme(themeMode)
 	const fetchWorkflow = (id) => {
 		if (id === undefined || id === null || id === "") {
 			return
@@ -549,12 +551,10 @@ const WorkflowTemplatePopup = (props) => {
         	    open={modalOpen}
         	    onClose={handleClose}
         	    PaperProps={{
-        	        style: {
-						backgroundColor: "black",
-        	            color: "white",
-        	            minWidth: isHomePage ? null : isMobile ? 300 : 750,
-        	            maxWidth: isHomePage ? null : isMobile ? 300 : 750,
-						paddingTop: isMobile ? null : 75, 
+        	        sx: {
+						backgroundColor: theme.palette.drawer.backgroundColor,
+        	            minWidth: isHomePage ? null : isMobile ? "300px" : "750px",
+        	            maxWidth: isHomePage ? null : isMobile ? "300px" : "750px",
 						itemAlign: "center",
         	        },
         	    }}
@@ -571,7 +571,7 @@ const WorkflowTemplatePopup = (props) => {
 				>
 				  <CloseIcon />
 				</IconButton>
-				<DialogContent style={{marginTop: 0, marginLeft: isHomePage ? null : isMobile ? null :  75, maxWidth: 470, marginTop: 20 }}>
+				<DialogContent style={{paddingTop: isMobile ? null : "75px", backgroundColor: theme.palette.drawer.backgroundColor, marginTop: 0, paddingLeft: isHomePage ? null : isMobile ? null :  75, maxWidth: "100%",}}>
 					<Typography variant="h4" style={{ fontSize: isMobile ? 20 : null}}>
 						<b>Configure Workflow</b>
 					</Typography> 
@@ -790,7 +790,7 @@ const WorkflowTemplatePopup = (props) => {
 					width: isHomePage? isMobile ? null : "100%" : "99%",
 					borderRadius: 8,
 					textTransform: "none",
-					backgroundColor: isHomePage ? null : theme.palette.inputColor,
+					backgroundColor: isHomePage ? null : theme.palette.platformColor,
 					border: borderStyle,
 					cursor: isActive ? errorMessage !== "" ? "not-allowed" : "pointer" : "pointer",
 					position: "relative",
@@ -878,7 +878,7 @@ const WorkflowTemplatePopup = (props) => {
 
 						</div>
 						<div style={{ marginLeft: 20, overflow: "hidden", maxHeight: 30, marginTop: visualOnly ? 12 : showTryitOut && !isActive ? 8 : 23, }}>
-							<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16, fontWeight: isHomePage ? 600 : null, textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" : "rgba(241, 241, 241, 1)"}} >
+							<Typography variant="body1" color="textPrimary" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16, fontWeight: isHomePage ? 600 : null, textTransform: 'capitalize', }} >
 								<b>{parsedTitle}</b>
 							</Typography>
 						</div>
diff --git a/frontend/src/components/ssoTab.jsx b/frontend/src/components/ssoTab.jsx
index 5034f521..770304a2 100644
--- a/frontend/src/components/ssoTab.jsx
+++ b/frontend/src/components/ssoTab.jsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useContext } from "react";
 import React from "react";
 import { 
     Typography, 
@@ -13,6 +13,8 @@ import { makeStyles } from "@mui/styles";
 import { Link } from "react-router-dom";
 import theme from "../theme.jsx";
 import { toast } from "react-toastify";
+import { Context } from "../context/ContextApi.jsx";
+import { getTheme } from "../theme.jsx";
 
 const useStyles = makeStyles({
 	notchedOutline: {
@@ -26,6 +28,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
     const classes = useStyles();
     const [show2faSetup, setShow2faSetup] = React.useState(false);
 	const [autoPrivision, setAutoProvision] = React.useState(selectedOrganization?.sso_config?.auto_provision)
+	const [roleRequired, setRoleRequired] = React.useState(selectedOrganization?.sso_config?.role_required || false);
 	const [showOpenIdCred, setShowOpenIdCred] = React.useState(false);
 	const [showSamlCred, setShowSamlCred] = React.useState(false);
     const [ssoEntrypoint, setSsoEntrypoint] = React.useState(
@@ -84,6 +87,9 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 				: selectedOrganization.sso_config.openid_token
 	)
 
+	const { themeMode, supportEmail, brandColor } = useContext(Context);
+	const theme = getTheme(themeMode, brandColor);
+
     useEffect(()=>{
         
 		if (openidClientSecret !== selectedOrganization?.sso_config?.client_secret) {
@@ -116,12 +122,17 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 		if (autoPrivision !== selectedOrganization?.sso_config?.auto_provision) {
 			setAutoProvision(selectedOrganization?.sso_config?.auto_provision)
 		}
+
+		if (roleRequired !== selectedOrganization?.sso_config?.role_required) {
+			setRoleRequired(selectedOrganization?.sso_config?.role_required)
+		}
+
     },[selectedOrganization])
 
     const orgSaveButton = (
 		<Tooltip title="Save any unsaved data" placement="bottom">
 			<Button
-				style={{ width: 244, height: 51, flex: 1, textTransform: 'capitalize', padding: "16px, 24px, 16px, 24px", borderRadius: 4, backgroundColor: "#ff8544", color: "#1a1a1a",  fontSize: 16, }}
+				style={{ width: 244, height: 51, flex: 1, textTransform: 'capitalize', padding: "16px, 24px, 16px, 24px", borderRadius: 4,  fontSize: 16, }}
 				variant="contained"
 				color="primary"
 				disabled={
@@ -158,6 +169,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 							openid_token: openidToken,
 							SSORequired: SSORequired,
 							auto_provision: autoPrivision,
+							role_required: roleRequired,
 						}
 					)
 				}
@@ -205,6 +217,21 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 			toast.info("Toggled Auto Provisioning. Remember to save.");
 		}
 	};
+
+	const handleChangeRoleRequired = (event) => {
+		if (
+			openidAuthorization?.length === 0 &&
+			openidToken?.length === 0
+		) {
+			toast.error(
+				"Please fill in fields for OpenID connect before continuing. "
+			);
+			return;
+		} else {
+			setRoleRequired((prev)=> !prev);
+			toast.info("Toggled Role Required. Remember to save.");
+		}
+	}
 	
 	const HandleTestSSO = () => {
 		const url = `${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/change`;
@@ -227,7 +254,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 			.then((response) => {
 				if (response.status !== 200) {
 					toast.error(
-						"Failed to test SSO. Please try again later or contact support@shuffler.io if issue persists.",
+						`Failed to test SSO. Please try again later or contact ${supportEmail} if issue persists.`,
 						{ duration: 3000 }
 					);
 					return null;
@@ -264,10 +291,10 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 	};
 
     return (
-        <div style={{ width: "100%", height: "100%",boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121', borderRadius: '16px',  }}>
-			<div style={{ height: "100%", width: "100%", overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}} >
+        <div style={{ width: "100%", height: "100%",boxSizing: 'border-box', padding: "27px 10px 19px 27px",  backgroundColor: theme.palette.platformColor , borderRadius: '16px',  }}>
+			<div style={{ height: "100%", width: "100%", overflowX: 'hidden', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}} >
              <div style={{ width: "100%", overflowX: 'hidden', maxWidth: 883}}>
-			 <Typography style={{ width: "100%",  fontWeight: 'bold', fontSize: 24}}>
+			 <Typography variant="h5" style={{ width: "100%",  fontWeight: 500, fontSize: 24}}>
 					SSO Configuration
 				</Typography>
 				<div
@@ -282,7 +309,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 					<Typography
 						variant="body2"
 						color="textSecondary"
-						style={{ marginTop: 5, marginBottom: 5, color: "rgba(158, 158, 158, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400 }}
+						style={{ marginTop: 5, marginBottom: 5, fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400 }}
 					>
 						Make SAML SSO or OpenID Authentication Required or Optional for Your Organization.
 					</Typography>
@@ -312,7 +339,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 					<Typography
 						variant="body2"
 						color="textSecondary"
-						style={{ marginTop: 5, marginBottom: 5, color: "rgba(158, 158, 158, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400 }}
+						style={{ marginTop: 5, marginBottom: 5, fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400 }}
 					>
 						Auto-provisioning of users in SSO. By default, users are auto-provisioned in SSO when they login. If you enable this, no new user will be added in your organization when they login via SSO.
 					</Typography>
@@ -327,6 +354,36 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						/>
 					</div>
 					
+				</div>
+
+				<div
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						width: "100%",
+                        justifyContent: 'flex-start',
+						marginTop: 30
+					}}
+					>
+					<Typography
+						variant="body2"
+						color="textSecondary"
+						style={{ marginTop: 5, marginBottom: 5, color: "rgba(158, 158, 158, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400 }}
+					>
+						Restrict user login to SSO if no valid role is assigned by the SSO provider. When enabled, users will not be allowed to log in via SSO if their assigned role doesn't matches one of the following: shuffle-user, shuffle-admin, or shuffle-org-reader. Currently, available for OpenId Connect only. 
+						<a href="https://shuffler.io/docs/extensions#how-to-assign-a-role-to-a-new-user-from-an-sso-provider-(openid-connect)-in-shuffle" target="_blank" style={{ color: theme.palette.linkColor }}> Learn more</a>
+						 </Typography>
+					<div>
+						<Switch
+						checked={roleRequired}
+						onChange={handleChangeRoleRequired}
+                        sx={{marginBottom: 0.6, marginTop: 0.6}}
+						name="onOffSwitch"
+						color="primary"
+						title="Disable auto-provisioning of users in SSO"
+						/>
+					</div>
+					
 				</div>
 
 					<div
@@ -338,7 +395,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						paddingBottom: 10,
 					}}
 					>
-					<Typography style={{color: "rgba(158, 158, 158, 1)", margin: "5px 0px 5px 0px", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)" }}>
+					<Typography variant="body2" color="textSecondary" style={{ margin: "5px 0px 5px 0px", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)" }}>
 						You can test your SSO configuration by clicking the button below.
 						Before testing, ensure you have set Open ID Connect or SAML SSO
 						credentials.
@@ -359,7 +416,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						<Button
 							variant="outlined"
 							color="primary"
-							style={{ width: 100, textTransform: "none", margin: "10px 10px 10px 0px" }}
+							style={{ width: 100, textTransform: "none", margin: "10px 10px 10px 0px", whiteSpace: "nowrap" }}
 							disabled={
 							!(
 								ssoEntrypoint?.length > 0 ||
@@ -377,28 +434,28 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 					</div>
 				<Grid item xs={12} sx={{marginTop: 2}}>
 					<span style={{ display: "flex", flexDirection: "column" }}>
-						<Typography style={{ textAlign: "left", color: "rgba(241, 241, 241, 1)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 24, fontWeight: "bold", }}>OpenID connect</Typography>
-						<span style={{ marginTop: 8, color: "rgba(158, 158, 158, 1)", fontSize: 16,  fontWeight: 400 }}>
+						<Typography variant="h5" color="textPrimary" style={{ textAlign: "left", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 24, fontWeight: 500, }}>OpenID connect</Typography>
+						<span style={{ marginTop: 8, color: theme.palette.text.secondary, fontSize: 16,  fontWeight: 400 }}>
 							Configure and Authorize SAML / SSO or OpenID connect. {" "}
 							<a
 								target="_blank"
 								href="/docs/extensions#single-signon"
-								style={{ color: "rgba(255, 132, 68, 1)" }}
+								style={{ color: theme.palette.linkColor }}
 							>
 								Learn more
 							</a>
 						</span>
 					</span>
-					<Typography style={{ textAlign: "left", fontSize: 16, marginTop: 8, color: "rgba(158, 158, 158, 1)", fontWeight: 400 }}>
-						IdP URL for Shuffle OpenID: <Link to={`${globalUrl}/api/v1/login_openid`} target="_blank" style={{ color: "rgba(241, 241, 241, 1)", textDecoration: "none", fontSize: 16,}}>{`${globalUrl}/api/v1/login_openid`}</Link>
+					<Typography variant="body2" color="tehttp://localhost:5002/api/v1/login_openidxtSecondary" style={{ textAlign: "left", fontSize: 16, marginTop: 8,  fontWeight: 400 }}>
+						IdP URL for Shuffle OpenID: <Link to={`${globalUrl}/api/v1/login_openid`} target="_blank" style={{ color: theme.palette.text.secondary, textDecoration: "none", fontSize: 16,}}>{`${globalUrl}/api/v1/login_openid`}</Link>
 						</Typography>
 						<div style={{ display: 'flex', marginTop: 10, }}>
-						<Typography
+							<Typography
+								color="textSecondary"
 								style={{
 								textAlign: "left",
 								fontSize: 16,
 								marginTop: 8,
-								color: "rgba(158, 158, 158, 1)",
 								fontWeight: 400,
 								}}
 							>
@@ -409,20 +466,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 								onChange={(e) => setShowOpenIdCred(e.target.checked)}
 								name="showOpenIdCred"
 								color="primary"
-								style={{ color: "rgba(255, 255, 255, 1)", }}
 							/>
 							</div>
 					<Grid container style={{ marginTop: 8, }} spacing={2}>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>Client ID</Typography>
+								<Typography style={{ fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, }}>Client ID</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									multiline={true}
@@ -440,11 +496,11 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 										notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-										color: "white",
+										color: theme.palette.textFieldStyle.color,
 										fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 										fontWeight: 400,
 										fontSize: 16,
-										borderRadius: 4,
+										borderRadius: theme.palette.textFieldStyle.borderRadius,
 										},
 									}}
 									/>
@@ -452,14 +508,14 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						</Grid>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>Client Secret</Typography>
+								<Typography style={{ fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, }}>Client Secret</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type={showOpenIdCred ? "text" : "password"}
@@ -480,11 +536,11 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 											fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 											fontWeight: 400,
 											fontSize: 16,
-											borderRadius: 4,
+											borderRadius: theme.palette.textFieldStyle.borderRadius,
 										},
 									}}
 								/>
@@ -494,14 +550,14 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 					<Grid container style={{ marginTop: 10, }} spacing={2}>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>Authorization URL</Typography>
+								<Typography style={{ fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>Authorization URL</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type={showOpenIdCred ? "text" : "password"}
@@ -522,7 +578,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 											fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 											fontWeight: 400,
 											fontSize: 16,
@@ -534,14 +590,14 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						</Grid>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>Token URL</Typography>
+								<Typography style={{  fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, }}>Token URL</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type={showOpenIdCred ? "text" : "password"}
@@ -562,7 +618,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color:theme.palette.textFieldStyle.color,
 											fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 											fontWeight: 400,
 											fontSize: 16,
@@ -577,17 +633,17 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 				{/**/}
 				{/*isCloud ? null : */}
 				<Grid item xs={12} sx={{ marginTop: 3.5 }} >
-					<Typography variant="h4" style={{ textAlign: "left", color: "rgba(241, 241, 241, 1)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 24, fontWeight: 600, }}>SAML SSO (v1.1)</Typography>
-					<Typography variant="body2" style={{ textAlign: "left", marginTop: 8, color: "rgba(241, 241, 241, 1)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 16, fontWeight: 400, color: "rgba(158, 158, 158, 1)" }} color="textSecondary">
-						IdP URL for Shuffle SAML/SSO: <Link to={`${globalUrl}/api/v1/login_sso`} target="_blank" style={{ color: "rgba(241, 241, 241, 1)", textDecoration: "none" }}>{`${globalUrl}/api/v1/login_sso`}</Link>
+					<Typography variant="h5" color="textPrimary" style={{ textAlign: "left", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 24, fontWeight: 500, }}>SAML SSO (v1.1)</Typography>
+					<Typography variant="body2" color="textSecondary"  style={{  textAlign: "left", marginTop: 8, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 16, fontWeight: 400, }}>
+						IdP URL for Shuffle SAML/SSO: <Link to={`${globalUrl}/api/v1/login_sso`} target="_blank" style={{ color: theme.palette.text.secondary, textDecoration: "none" }}>{`${globalUrl}/api/v1/login_sso`}</Link>
 						</Typography>
 						<div style={{ display: 'flex', marginTop: 10, }}>
 							<Typography
+								color="textSecondary"
 								style={{
 									textAlign: "left",
 									fontSize: 16,
 									marginTop: 8,
-									color: "rgba(158, 158, 158, 1)",
 									fontWeight: 400,
 								}}
 							>
@@ -598,20 +654,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 								onChange={(e) => setShowSamlCred(e.target.checked)}
 								name="showSamlCred"
 								color="primary"
-								style={{ color: "rgba(255, 255, 255, 1)", }}
 							/>
 						</div>
 					<Grid container style={{ marginTop: 10, }} spacing={2}>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>SSO Entrypoint (IdP)</Typography>
+								<Typography style={{ fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, }}>SSO Entrypoint (IdP)</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type={showSamlCred ? "text" : "password"}
@@ -632,7 +687,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 											fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 											fontWeight: 400,
 											fontSize: 16,
@@ -644,14 +699,14 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 						</Grid>
 						<Grid item xs={6} style={{}}>
 							<span>
-								<Typography style={{ color: "rgba(255, 255, 255, 1)", fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>SSO Certificate (X509)</Typography>
+								<Typography style={{ fontSize: 16, fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontWeight: 400, fontSize: 16 }}>SSO Certificate (X509)</Typography>
 								<TextField
 									required
 									style={{
 										flex: "1",
 										marginTop: "5px",
 										marginRight: "15px",
-										backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
+										backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor: theme.palette.inputColor,
 									}}
 									fullWidth={true}
 									type={showSamlCred ? "text" : "password"}
@@ -672,7 +727,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
 											notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
 										},
 										style: {
-											color: "white",
+											color: theme.palette.textFieldStyle.color,
 											fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
 											fontWeight: 400,
 											fontSize: 16,
diff --git a/frontend/src/context/ContextApi.jsx b/frontend/src/context/ContextApi.jsx
index 00b8b764..d344e3ed 100644
--- a/frontend/src/context/ContextApi.jsx
+++ b/frontend/src/context/ContextApi.jsx
@@ -1,4 +1,6 @@
 import React, { createContext, useState, useEffect } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
 export const Context = createContext();
 
 export const AppContext = (props) => {
@@ -11,6 +13,14 @@ export const AppContext = (props) => {
     const [isDocSearchModalOpen, setIsDocSearchModalOpen] = useState(false);
     const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(currentLocation?.includes('/workflows/') ? false : true)
     const [windowWidth, setWindowWidth] = useState(serverside === true ? 100 : window.innerWidth);
+    const [brandColor, setBrandColor] = useState(() => localStorage.getItem("brandColor") || "#ff8544");
+    const [brandName, setBrandName] = useState(()=> localStorage.getItem("brandName") || "Shuffle");
+
+    const [themeMode, setThemeMode] = useState(
+      () => localStorage.getItem("theme") || "dark"
+    );
+    const [supportEmail, setSupportEmail] = useState("support@shuffler.io");
+    const [logoutUrl, setLogoutUrl] = useState("");
 
     useEffect(() => {
 		if (currentLocation?.includes('/workflows/') && leftSideBarOpenByClick === true) {
@@ -35,6 +45,57 @@ export const AppContext = (props) => {
         };
     }, []);
 
+    const handleThemeChange = (theme) => {
+      if (!theme || theme === "null" || theme === "undefined") {
+        localStorage.setItem("theme", "dark");
+        setThemeMode("dark");
+        return;
+      }
+    
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    
+      const applySystemTheme = () => {
+        const isDark = darkMediaQuery.matches;
+        setThemeMode(isDark ? "dark" : "light");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+      };
+    
+      if (theme === "system") {
+        applySystemTheme();
+        darkMediaQuery.addEventListener("change", applySystemTheme);
+        return () => {
+          darkMediaQuery.removeEventListener("change", applySystemTheme);
+        };
+      } else {
+        setThemeMode(theme);
+        localStorage.setItem("theme", theme);
+      }
+    };
+    
+    
+    useEffect(() => {
+      if (serverside === true) return;
+    
+      const theme = localStorage.getItem("theme");
+    
+      if (!theme || theme === "null" || theme === "undefined") {
+        localStorage.setItem("theme", "dark");
+        setThemeMode("dark");
+        return;
+      }
+    
+      let cleanup;
+      if (theme === "system") {
+        cleanup = handleThemeChange("system");
+      } else {
+        handleThemeChange(theme);
+      }
+    
+      return () => {
+        if (cleanup) cleanup();
+      };
+    }, []);
+       
 
     return (
         <Context.Provider value={{
@@ -42,9 +103,20 @@ export const AppContext = (props) => {
             setIsDocSearchModalOpen,
             searchBarModalOpen,
             setSearchBarModalOpen,
+            supportEmail,
+            setSupportEmail,
+            logoutUrl,
+            setLogoutUrl,
             leftSideBarOpenByClick,
             setLeftSideBarOpenByClick,
-            windowWidth
+            windowWidth,
+            themeMode,
+            setThemeMode,
+            handleThemeChange,
+            brandColor,
+            setBrandColor,
+            brandName,
+            setBrandName,
         }}>
             {props.children}
         </Context.Provider>
diff --git a/frontend/src/defaultCytoscapeStyle.jsx b/frontend/src/defaultCytoscapeStyle.jsx
index 8a2623f6..79d35e35 100644
--- a/frontend/src/defaultCytoscapeStyle.jsx
+++ b/frontend/src/defaultCytoscapeStyle.jsx
@@ -1,619 +1,626 @@
-const data = [
-  {
-    selector: "node",
-    css: {
-      label: function(element) {
-		  var elementname = element.data("label")
-		  if (elementname === null || elementname === undefined) {
-			  return ""
-		  } 
-
-		  elementname = elementname.replaceAll("_", " ", -1)
-		  elementname = elementname.charAt(0).toUpperCase() + elementname.slice(1)
-		  return elementname
-	  },
-      "text-valign": "center",
-	  "text-margin-x": function(element) {
-		  // Attempt at bottom-positioning
-		  // Required text-valign: bottom
-		  // FIXME: Disabled for now.
-		  return "15px"
-
-
-
-		  const name = element.data("label")
-		  console.log("Name: ", name)
-		  if (name === null || name === undefined || name == "" || document=== undefined || document === null) {
-			  return "0px"
-		  }
-
-		  const canvas = document.createElement('canvas');
-    	  const context = canvas.getContext('2d')
-
-		  context.font = '18px Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif'
-
-		  const textWidth = context.measureText(name).width
-		  return textWidth + "px"
-		  //return -1*(textWidth) + "px"
-	  },
-
-      "font-family": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif",
-      "font-weight": "lighter",
-      "font-size": "18px",
-      "margin-right": "10px",
-      width: "80px",
-      height: "80px",
-      color: "white",
-      padding: "10px",
-      margin: "5px",
-      "border-width": "1px",
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: "edge",
-    css: {
-      "target-arrow-shape": "triangle",
-      "target-arrow-color": "grey",
-      "curve-style": "unbundled-bezier",
-      label: "data(label)",
-      "text-margin-y": "-15px",
-      width: "2px",
-      color: "white",
-      "line-fill": "linear-gradient",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["grey", "grey"],
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: `node[buttonType="ACTIONSUGGESTION"]`,
-    css: {
-      label: "data(label)",
-      shape: "roundrectangle",
-	  "height": "18px",
-	  "width": "145px",
-      "background-color": "#212121",
-      "border-color": "#81c784",
-      "z-index": 10000,
-	  "border-radius": "10px",
-	  "text-margin-x": "0px",
-    },
-  },
-  {
-    selector: `node[type="ACTION"]`,
-    css: {
-      shape: "roundrectangle",
-      "background-color": "#213243",
-      "border-color": "#81c784",
-      "background-width": "100%",
-      "background-height": "100%",
-      "border-radius": "5px",
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: `node[type="COMMENT"]`,
-    css: {
-      label: function (element) {
-        return element.data("label")
+export default function defaultCytoscapeStyle(theme) {
+  return [
+    {
+      selector: "node",
+      css: {
+        label: function(element) {
+        var elementname = element.data("label")
+        if (elementname === null || elementname === undefined) {
+          return ""
+        } 
+  
+        elementname = elementname.replaceAll("_", " ", -1)
+        elementname = elementname.charAt(0).toUpperCase() + elementname.slice(1)
+        return elementname
+      },
+        "text-valign": "center",
+      "text-margin-x": function(element) {
+        // Attempt at bottom-positioning
+        // Required text-valign: bottom
+        // FIXME: Disabled for now.
+        return "15px"
+  
+  
+  
+        const name = element.data("label")
+        console.log("Name: ", name)
+        if (name === null || name === undefined || name == "" || document=== undefined || document === null) {
+          return "0px"
+        }
+  
+        const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d')
+  
+        context.font = '18px Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif'
+  
+        const textWidth = context.measureText(name).width
+        return textWidth + "px"
+        //return -1*(textWidth) + "px"
+      },
+  
+        "font-family": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif",
+        "font-weight": "lighter",
+        "font-size": "18px",
+        "margin-right": "10px",
+        width: "80px",
+        height: "80px",
+        color: theme.palette.text.primary || "white",
+        padding: "10px",
+        margin: "5px",
+        "border-width": "1px",
+        "z-index": 5001,
       },
-      shape: "roundrectangle",
-      color: "data(color)",
-      width: "data(width)",
-      height: "data(height)",
-      padding: "5px",
-      margin: "0px",
-      "background-color": "data(backgroundcolor)",
-      "background-image": "data(backgroundimage)",
-      "border-color": "#ffffff",
-      "text-margin-x": "data(textMarginX)",
-      "text-margin-y": "data(textMarginY)",
-      "z-index": 4999,
-      "border-radius": "5px",
-      "background-opacity": "0.5",
-      "text-wrap": "wrap",
-      "text-max-width": "data(width)",
-      "text-halign": function(element) {
-		  const align = element?.data("textHalign")
-		  if (align === null || align === undefined || align === "") {
-			  return "center"
-		  }
-
-		  return align
-	  },
-      "text-valign": function(element) {
-		  const align = element?.data("textValign")
-		  if (align === null || align === undefined || align === "") {
-			  return "center"
-		  }
-		  
-		  return align
-	  }
     },
-  },
-  {
-    selector: `node[type="RESIZE-HANDLE"]`,
-    css: {
-      shape: "ellipse",
-      width: "8px",
-      height: "8px",
-      "border-width": 1,
-      "border-color": "white",
-      "z-index": 5002, 
-      "overlay-opacity": 0, 
-      "cursor": "nwse-resize",
-      "opacity": 0, 
-      "pointer-events": "auto", 
+    {
+      selector: "edge",
+      css: {
+        "target-arrow-shape": "triangle",
+        "target-arrow-color": "grey",
+        "curve-style": "unbundled-bezier",
+        label: "data(label)",
+        "text-margin-y": "-15px",
+        width: "2px",
+        color: theme.palette.text.primary || "white",
+        "line-fill": "linear-gradient",
+        "line-gradient-stop-positions": ["0.0", "100"],
+        "line-gradient-stop-colors": ["grey", "grey"],
+        "z-index": 5001,
+      },
     },
-  },
-  {
-    selector: `node[app_name="Integration Framework"]`,
-    css: {
-      width: "60px",
-      height: "60px",
-      "z-index": 5000,
-
-	  //'border-width': 3,
-  	  //'border-color': 'transparent',
-	  //'border-style': 'solid',
-	  //'border-gradient': 'linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8A2BE2)' 
-    },
-  },
-  {
-    selector: `node[example="noapp"]`,
-    css: {
-	  // Make background image padding on the left side 20px
-      "background-width": "100%",
-      "background-height": "100%",
-
-      "background-color": "data(iconBackground)",
-      "background-fill": "data(fillstyle)",
-      "background-gradient-direction": "to-bottom-right",
-      "background-gradient-stop-colors": "data(fillGradient)",
-	  // Change transparency of background
-	  "background-opacity": "0.3",
-    },
-  },
-  {
-    selector: `node[app_name="Shuffle Tools"], node[app_name="email"], node[app_name="http"]`,
-    css: {
-      width: "35px",
-      height: "35px",
-      "z-index": 5000,
-      "font-size": "0px",
-      "background-width": "75%",
-      "background-height": "75%",
-      "background-color": "data(iconBackground)",
-      "background-fill": "data(fillstyle)",
-      "background-gradient-direction": "to-right",
-      "background-gradient-stop-colors": "data(fillGradient)",
-    },
-  },
-  {
-    selector: `node[app_id="shuffle_agent"]`,
-    css: {
-		"height": "74px",
-      	"width": "222px",
-	  	"background-image": "data(large_image)",
-      	"label": function(element) {
-		  var elementname = element.data("label")
-		  if (elementname === null || elementname === undefined) {
-			  return ""
-		  } 
-
-		  if (elementname.length > 15) {
-			  elementname = elementname.substring(0, 15) + ".."
-		  }
-
-		  return elementname
-		},
-		"background-width": "65px",
-		"background-height": "65px",
-		"background-position-x": "20px", 
-		//"background-position-x": "center",  // Crashes
-		"background-repeat": "no-repeat",
-
-		"font-size": "14px",
-		"text-halign": "center",
-		"text-valign": "center",
-      	"text-margin-x": "-140px",
-      	"text-margin-y": "0px",
-		
-    },
-  },
-  {
-    selector: `node[app_name="Testing"]`,
-    css: {
-      width: "30px",
-      height: "30px",
-      "z-index": 5000,
-      "font-size": "0px",
-    },
-  },
-  {
-    selector: `node[?small_image]`,
-    css: {
-      "background-image": "data(small_image)",
-      "text-halign": "right",
-    },
-  },
-  {
-    selector: `node[?large_image]`,
-    css: {
-      "background-image": "data(large_image)",
-      "text-halign": "right",
-    },
-  },
-  {
-    selector: `node[type="CONDITION"]`,
-    css: {
-      shape: "diamond",
-      "border-color": "##FFEB3B",
-      padding: "30px",
-    },
-  },
-  {
-    selector: `node[type="eventAction"]`,
-    css: {
-      "background-color": "#edbd21",
-    },
-  },
-  {
-    selector: `node[type="TRIGGER"]`,
-    css: {
-      shape: "round-octagon",
-      "border-radius": "5px",
-      "border-color": "orange",
-      "background-color": "#213243",
-      "background-width": "100px",
-      "background-height": "100px",
-    },
-  },
-  {
-    selector: `node[status="running"]`,
-    css: {
-      "border-color": "#81c784",
-    },
-  },
-  {
-    selector: `node[status="stopped"]`,
-    css: {
-      "border-color": "orange",
-    },
-  },
-  {
-    selector: 'node[type="mq"]',
-    css: {
-      "background-color": "#edbd21",
-    },
-  },
-  {
-    selector: "node[?isButton]",
-    css: {
-      shape: "ellipse",
-      width: "15px",
-      height: "15px",
-      "z-index": "5002",
-      "font-size": "0px",
-      border: "1px solid rgba(255,255,255,0.9)",
-      "background-image": "data(icon)",
-      "background-color": "data(iconBackground)",
-    },
-  },
-  {
-    selector: "node[?isSuggestion]",
-    css: {
-      shape: "roundrectangle",
-      width: "30px",
-      height: "30px",
-      "z-index": "5002",
-	  filter: "grayscale(100%)",
-      border: "1px solid rgba(255,255,255,0.9)",
-      "background-image": "data(large_image)",
-	  "background-fit": "cover",
-      "font-size": "20px",
-      label: "data(label_replaced)",
-    },
-  },
-  {
-    selector: "node[?canConnect]",
-    css: {
-      "border-color": "#f86a3e",
-      "border-width": "10px",
-      "z-index": "5002",
-      "background-color": "#f86a3e",
-    },
-  },
-  {
-    selector: "node[?isDescriptor]",
-    css: {
-      shape: "ellipse",
-      "border-color": "#80deea",
-      width: "5px",
-      height: "5px",
-      "z-index": "5002",
-      "font-size": "10px",
-      "text-valign": "center",
-      "text-halign": "center",
-      border: "1px solid black",
-      "margin-right": "0px",
+    {
+      selector: `node[buttonType="ACTIONSUGGESTION"]`,
+      css: {
+        label: "data(label)",
+        shape: "roundrectangle",
+      "height": "18px",
+      "width": "145px",
+        "background-color": "#212121",
+        "border-color": "#81c784",
+        "z-index": 10000,
+      "border-radius": "10px",
       "text-margin-x": "0px",
-      "background-color": "data(imageColor)",
-      "background-image": "data(image)",
-		label: "data(label)",
+      },
     },
-  },
-  {
-    selector: "node[?isStartNode]",
-    css: {
-      shape: function(element) {
-		  return "ellipse" 
-	  },
-      "border-color": "#80deea",
-      width: "80px",
-      height: "80px",
-      "font-size": "18px",
-      "background-width": "100%",
-      "background-height": "100%",
+    {
+      selector: `node[type="ACTION"]`,
+      css: {
+        shape: "roundrectangle",
+        "background-color": "#213243",
+        "border-color": "#81c784",
+        "background-width": "100%",
+        "background-height": "100%",
+        "border-radius": "5px",
+        "z-index": 5001,
+      },
     },
-  },
-  {
-    selector: "node[!is_valid]",
-    css: {
-      "border-color": "#f53434",
-      "border-width": "5px",
+    {
+      selector: `node[type="COMMENT"]`,
+      css: {
+        label: function (element) {
+          return element.data("label")
+        },
+        shape: "roundrectangle",
+        color: "data(color)",
+        width: "data(width)",
+        height: "data(height)",
+        padding: "5px",
+        margin: "0px",
+        "background-color": "data(backgroundcolor)",
+        "background-image": "data(backgroundimage)",
+        "border-color": "#ffffff",
+        "text-margin-x": "data(textMarginX)",
+        "text-margin-y": "data(textMarginY)",
+        "z-index": 4999,
+        "border-radius": "5px",
+        "background-opacity": "0.5",
+        "text-wrap": "wrap",
+        "text-max-width": "data(width)",
+        "text-halign": function(element) {
+        const align = element?.data("textHalign")
+        if (align === null || align === undefined || align === "") {
+          return "center"
+        }
+  
+        return align
+      },
+        "text-valign": function(element) {
+        const align = element?.data("textValign")
+        if (align === null || align === undefined || align === "") {
+          return "center"
+        }
+        
+        return align
+      }
+      },
     },
-  },
-  {
-    selector: ":selected",
-    css: {
-      "background-color": "#77b0d0",
-      "border-color": "#77b0d0",
-      "border-width": "20px",
+    {
+      selector: `node[type="RESIZE-HANDLE"]`,
+      css: {
+        shape: "ellipse",
+        width: "8px",
+        height: "8px",
+        "border-width": 1,
+        "border-color": theme.palette.text.primary || "white",
+        "z-index": 5002, 
+        "overlay-opacity": 0, 
+        "cursor": "nwse-resize",
+        "opacity": 0, 
+        "pointer-events": "auto", 
+      },
     },
-  },
-  {
-    selector: ".skipped-highlight",
-    css: {
-      "background-color": "grey",
-      "border-color": "grey",
-      "border-width": "8px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
+    {
+      selector: `node[app_name="Integration Framework"]`,
+      css: {
+        width: "60px",
+        height: "60px",
+        "z-index": 5000,
+  
+      //'border-width': 3,
+        //'border-color': 'transparent',
+      //'border-style': 'solid',
+      //'border-gradient': 'linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8A2BE2)' 
+      },
     },
-  },
-  {
-    selector: ".success-highlight",
-    css: {
-      "background-color": "#41dcab",
-      "border-color": "#41dcab",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
+    {
+      selector: `node[example="noapp"]`,
+      css: {
+      // Make background image padding on the left side 20px
+        "background-width": "100%",
+        "background-height": "100%",
+  
+        "background-color": "data(iconBackground)",
+        "background-fill": "data(fillstyle)",
+        "background-gradient-direction": "to-bottom-right",
+        "background-gradient-stop-colors": "data(fillGradient)",
+      // Change transparency of background
+      "background-opacity": "0.3",
+      },
     },
-  },
-  {
-    selector: ".hover-highlight",
-    css: {
-      "background-color": "#5f9265",
-      "border-color": "#5f9265",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
+    {
+      selector: `node[app_name="Shuffle Tools"], node[app_name="email"], node[app_name="http"]`,
+      css: {
+        width: "35px",
+        height: "35px",
+        "z-index": 5000,
+        "font-size": "0px",
+        "background-width": "75%",
+        "background-height": "75%",
+        "background-color": "data(iconBackground)",
+        "background-fill": "data(fillstyle)",
+        "background-gradient-direction": "to-right",
+        "background-gradient-stop-colors": "data(fillGradient)",
+      },
     },
-  },
-  {
-    selector: ".failure-highlight",
-    css: {
-      "background-color": "#8e3530",
-      "border-color": "#8e3530",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
+    {
+      selector: `node[app_name="Testing"]`,
+      css: {
+        width: "30px",
+        height: "30px",
+        "z-index": 5000,
+        "font-size": "0px",
+      },
     },
-  },
-  {
-    selector: ".not-executing-highlight",
-    css: {
-      "background-color": "grey",
-      "border-color": "grey",
-      "border-width": "5px",
-      "transition-property": "#ffef47",
-      "transition-duration": "0.25s",
+    {
+      selector: `node[?small_image]`,
+      css: {
+        "background-image": "data(small_image)",
+        "text-halign": "right",
+      },
     },
-  },
-  {
-    selector: ".executing-highlight",
-    css: {
-      "background-color": "#ffef47",
-      "border-color": "#ffef47",
-      "border-width": "8px",
-      "transition-property": "border-width",
-      "transition-duration": "0.25s",
+    {
+      selector: `node[?large_image]`,
+      css: {
+        "background-image": "data(large_image)",
+        "text-halign": "right",
+      },
     },
-  },
-  {
-    selector: ".awaiting-data-highlight",
-    css: {
-      "background-color": "#f4ad42",
-      "border-color": "#f4ad42",
-      "border-width": "5px",
-      "transition-property": "border-color",
-      "transition-duration": "0.5s",
+    {
+      selector: `node[type="CONDITION"]`,
+      css: {
+        shape: "diamond",
+        "border-color": "##FFEB3B",
+        padding: "30px",
+      },
     },
-  },
-  {
-    selector: ".shuffle-hover-highlight",
-    css: {
-      "background-color": "#f85a3e",
-      "border-color": "#f85a3e",
-      "border-width": "7px",
-      "transition-property": "border-width",
-      "transition-duration": "0.25s",
+    {
+      selector: `node[type="eventAction"]`,
+      css: {
+        "background-color": "#edbd21",
+      },
+    },
+    {
+      selector: `node[type="TRIGGER"]`,
+      css: {
+        shape: "round-octagon",
+        "border-radius": "5px",
+        "border-color": "orange",
+        "background-color": "#213243",
+        "background-width": "100px",
+        "background-height": "100px",
+      },
+    },
+    {
+      selector: `node[status="running"]`,
+      css: {
+        "border-color": "#81c784",
+      },
+    },
+    {
+      selector: `node[status="stopped"]`,
+      css: {
+        "border-color": "orange",
+      },
+    },
+    {
+      selector: 'node[type="mq"]',
+      css: {
+        "background-color": "#edbd21",
+      },
+    },
+    {
+      selector: "node[?isButton]",
+      css: {
+        shape: "ellipse",
+        width: "15px",
+        height: "15px",
+        "z-index": "5002",
+        "font-size": "0px",
+        border: "1px solid rgba(255,255,255,0.9)",
+        "background-image": "data(icon)",
+        "background-color": "data(iconBackground)",
+      },
+    },
+    {
+      selector: "node[?isSuggestion]",
+      css: {
+        shape: "roundrectangle",
+        width: "30px",
+        height: "30px",
+        "z-index": "5002",
+      filter: "grayscale(100%)",
+        border: "1px solid rgba(255,255,255,0.9)",
+        "background-image": "data(large_image)",
+      "background-fit": "cover",
+        "font-size": "20px",
+        label: "data(label_replaced)",
+      },
+    },
+    {
+      selector: "node[?canConnect]",
+      css: {
+        "border-color": "#f86a3e",
+        "border-width": "10px",
+        "z-index": "5002",
+        "background-color": "#f86a3e",
+      },
+    },
+    {
+      selector: "node[?isDescriptor]",
+      css: {
+        shape: "ellipse",
+        "border-color": "#80deea",
+        width: "5px",
+        height: "5px",
+        "z-index": "5002",
+        "font-size": "10px",
+        "text-valign": "center",
+        "text-halign": "center",
+        border: "1px solid black",
+        "margin-right": "0px",
+        "text-margin-x": "0px",
+        "background-color": "data(imageColor)",
+        "background-image": "data(image)",
       label: "data(label)",
-      "font-size": "18px",
-      color: "white",
+      },
     },
-  },
-  {
-    selector: "$node > node",
-    css: {
-      "padding-top": "10px",
-      "padding-left": "10px",
-      "padding-bottom": "10px",
-      "padding-right": "10px",
+    {
+      selector: "node[?isStartNode]",
+      css: {
+        shape: function(element) {
+        return "ellipse" 
+      },
+        "border-color": "#80deea",
+        width: "80px",
+        height: "80px",
+        "font-size": "18px",
+        "background-width": "100%",
+        "background-height": "100%",
+      },
     },
-  },
-  {
-    selector: "edge.executing-highlight",
-    css: {
-      width: "5px",
-      "target-arrow-color": "#ffef47",
-      "line-color": "#ffef47",
-      "transition-property": "line-color, width",
-      "transition-duration": "0.25s",
+    {
+      selector: `node[app_id="shuffle_agent"]`,
+      css: {
+      "shape": function(element) {
+            return "roundrectangle"
+      },
+      "height": "74px",
+          "width": "222px",
+        "background-image": "data(large_image)",
+          "label": function(element) {
+        var elementname = element.data("label")
+        if (elementname === null || elementname === undefined) {
+          return ""
+        } 
+  
+        elementname = elementname.replaceAll("_", " ", -1)
+  
+        if (elementname.length > 15) {
+          elementname = elementname.substring(0, 15) + ".."
+        }
+  
+        return elementname
+      },
+      "background-width": "65px",
+      "background-height": "65px",
+      "background-position-x": "20px", 
+      "background-repeat": "no-repeat",
+      "background-opacity": "0.5",
+  
+      "font-size": "14px",
+      "text-halign": "center",
+      "text-valign": "center",
+          "text-margin-x": "20px",
+          "text-margin-y": "0px",
+      
+      },
     },
-  },
-  {
-    selector: `edge[?decorator]`,
-    css: {
-      width: "1px",
-      "line-style": "dashed",
-      "line-fill": "linear-gradient",
-      "target-arrow-color": "#555555",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["#555555", "#555555"],
+    {
+      selector: "node[!is_valid]",
+      css: {
+        "border-color": "#f53434",
+        "border-width": "5px",
+      },
     },
-  },
-  {
-    selector: "edge.success-highlight",
-    css: {
-      width: "3px",
-      "target-arrow-color": "#41dcab",
-      "line-color": "#41dcab",
-      "transition-property": "line-color, width",
-      "transition-duration": "0.5s",
-      "line-fill": "linear-gradient",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["#41dcab", "#41dcab"],
+    {
+      selector: ":selected",
+      css: {
+        "background-color": "#77b0d0",
+        "border-color": "#77b0d0",
+        "border-width": "20px",
+      },
     },
-  },
-  {
-    selector: ".eh-handle",
-    style: {
-      "background-color": "#337ab7",
-      width: "1px",
-      height: "1px",
-      shape: "circle",
-      "border-width": "1px",
-      "border-color": "black",
+    {
+      selector: ".skipped-highlight",
+      css: {
+        "background-color": "grey",
+        "border-color": "grey",
+        "border-width": "8px",
+        "transition-property": "background-color",
+        "transition-duration": "0.5s",
+      },
     },
-  },
-  {
-    selector: ".eh-source",
-    style: {
-      "border-width": "3",
-      "border-color": "#337ab7",
+    {
+      selector: ".success-highlight",
+      css: {
+        "background-color": "#41dcab",
+        "border-color": "#41dcab",
+        "border-width": "5px",
+        "transition-property": "background-color",
+        "transition-duration": "0.5s",
+      },
     },
-  },
-  {
-    selector: ".eh-target",
-    style: {
-      "border-width": "3",
-      "border-color": "#337ab7",
+    {
+      selector: ".hover-highlight",
+      css: {
+        "background-color": "#5f9265",
+        "border-color": "#5f9265",
+        "border-width": "5px",
+        "transition-property": "background-color",
+        "transition-duration": "0.5s",
+      },
     },
-  },
-  {
-    selector: ".eh-preview, .eh-ghost-edge",
-    style: {
-      "background-color": "#337ab7",
-      "line-color": "#337ab7",
-      "target-arrow-color": "#337ab7",
-      "source-arrow-color": "#337ab7",
+    {
+      selector: ".failure-highlight",
+      css: {
+        "background-color": "#8e3530",
+        "border-color": "#8e3530",
+        "border-width": "5px",
+        "transition-property": "background-color",
+        "transition-duration": "0.5s",
+      },
     },
-  },
-  {
-    selector: "edge:selected",
-    css: {
-      "target-arrow-color": "#f85a3e",
+    {
+      selector: ".not-executing-highlight",
+      css: {
+        "background-color": "grey",
+        "border-color": "grey",
+        "border-width": "5px",
+        "transition-property": "#ffef47",
+        "transition-duration": "0.25s",
+      },
     },
-  },
-  {
-    selector: `edge[?source_workflow]`,
-    css: {
-      "background-opacity": "1",
-      "font-size": "0px",
+    {
+      selector: ".executing-highlight",
+      css: {
+        //"background-color": "#ffef47",
+        "border-color": "#ffef47",
+        "border-width": "8px",
+        "transition-property": "border-width",
+        "transition-duration": "0.25s",
+      },
     },
-  },
-  {
-    selector: `node[?source_workflow]`,
-    css: {
-      "background-opacity": "0",
-      "font-size": "0px",
+    {
+      selector: ".awaiting-data-highlight",
+      css: {
+        "background-color": "#f4ad42",
+        "border-color": "#f4ad42",
+        "border-width": "5px",
+        "transition-property": "border-color",
+        "transition-duration": "0.5s",
+      },
     },
-  },
-  {
-  	selector: "node:selected",
-  	css: {
-  		"border-color": "#f86a3e",
-  		"border-width": "7px",
-  	},
-  },
-  {
-    selector: `node[buttonType="condition-drag"]`,
-    css: {
-		"width": "5px",
-		"height": "5px",
-		"background-color": "#f85a3e",
+    {
+      selector: ".shuffle-hover-highlight",
+      css: {
+        "background-color": "#f85a3e",
+        "border-color": "#f85a3e",
+        "border-width": "7px",
+        "transition-property": "border-width",
+        "transition-duration": "0.25s",
+        label: "data(label)",
+        "font-size": "18px",
+        color: theme.palette.text.primary || "white",
+      },
     },
-  },
-  {
-    selector: `node[name="switch"]`,
-    css: {
-      label: function(element) {
-		  // Load from the actual element
-		  var nodeheight = 400 
-		  var conditions = [{
-			  "name": "Condition 1",
-			  "check": "X equals Y",
-		  },
-		  {
-			  "name": "Condition 2",
-			  "check": "X2 equals Y2",
-		  },
-		  {
-			  "name": "Condition 3",
-			  "check": "X3 equals Y3",
-		  }]
-
-		  conditions.push({
-			  "name": "Else",
-			  "check": "If all else fails",
-		  })
-
-		  const newlines = nodeheight / conditions.length
-		  console.log("Newlines: ", newlines)
-
-		  const label = conditions.map((condition) => {
-			  return `${condition.name}\n\n\n`
-		  }).join("\n")
-
-		  return label
-	  },
-      color: "white",
-      "border-color": "#f85a3e",
-	  "background-color": "#1f1f1f",
-      "font-size": "19px",
-      "text-margin-x": "-110px",
-	  "text-wrap": "wrap",
-      shape: "roundrectangle",
-      width: "100",
-      height: "300",
-
+    {
+      selector: "$node > node",
+      css: {
+        "padding-top": "10px",
+        "padding-left": "10px",
+        "padding-bottom": "10px",
+        "padding-right": "10px",
+      },
     },
-  },
-];
+    {
+      selector: "edge.executing-highlight",
+      css: {
+        width: "5px",
+        "target-arrow-color": "#ffef47",
+        "line-color": "#ffef47",
+        "transition-property": "line-color, width",
+        "transition-duration": "0.25s",
+      },
+    },
+    {
+      selector: `edge[?decorator]`,
+      css: {
+        width: "1px",
+        "line-style": "dashed",
+        "line-fill": "linear-gradient",
+        "target-arrow-color": "#555555",
+        "line-gradient-stop-positions": ["0.0", "100"],
+        "line-gradient-stop-colors": ["#555555", "#555555"],
+      },
+    },
+    {
+      selector: "edge.success-highlight",
+      css: {
+        width: "3px",
+        "target-arrow-color": "#41dcab",
+        "line-color": "#41dcab",
+        "transition-property": "line-color, width",
+        "transition-duration": "0.5s",
+        "line-fill": "linear-gradient",
+        "line-gradient-stop-positions": ["0.0", "100"],
+        "line-gradient-stop-colors": ["#41dcab", "#41dcab"],
+      },
+    },
+    {
+      selector: ".eh-handle",
+      style: {
+        "background-color": "#337ab7",
+        width: "1px",
+        height: "1px",
+        shape: "circle",
+        "border-width": "1px",
+        "border-color": "black",
+      },
+    },
+    {
+      selector: ".eh-source",
+      style: {
+        "border-width": "3",
+        "border-color": "#337ab7",
+      },
+    },
+    {
+      selector: ".eh-target",
+      style: {
+        "border-width": "3",
+        "border-color": "#337ab7",
+      },
+    },
+    {
+      selector: ".eh-preview, .eh-ghost-edge",
+      style: {
+        "background-color": "#337ab7",
+        "line-color": "#337ab7",
+        "target-arrow-color": "#337ab7",
+        "source-arrow-color": "#337ab7",
+      },
+    },
+    {
+      selector: "edge:selected",
+      css: {
+        "target-arrow-color": "#f85a3e",
+      },
+    },
+    {
+      selector: `edge[?source_workflow]`,
+      css: {
+        "background-opacity": "1",
+        "font-size": "0px",
+      },
+    },
+    {
+      selector: `node[?source_workflow]`,
+      css: {
+        "background-opacity": "0",
+        "font-size": "0px",
+      },
+    },
+    {
+      selector: "node:selected",
+      css: {
+        "border-color": "#f86a3e",
+        "border-width": "7px",
+      },
+    },
+    {
+      selector: `node[buttonType="condition-drag"]`,
+      css: {
+      "width": "5px",
+      "height": "5px",
+      "background-color": "#f85a3e",
+      },
+    },
+    {
+      selector: `node[name="switch"]`,
+      css: {
+        label: function(element) {
+        // Load from the actual element
+        var nodeheight = 400 
+        var conditions = [{
+          "name": "Condition 1",
+          "check": "X equals Y",
+        },
+        {
+          "name": "Condition 2",
+          "check": "X2 equals Y2",
+        },
+        {
+          "name": "Condition 3",
+          "check": "X3 equals Y3",
+        }]
+  
+        conditions.push({
+          "name": "Else",
+          "check": "If all else fails",
+        })
+  
+        const newlines = nodeheight / conditions.length
+        console.log("Newlines: ", newlines)
+  
+        const label = conditions.map((condition) => {
+          return `${condition.name}\n\n\n`
+        }).join("\n")
+  
+        return label
+      },
+        color: theme.palette.text.primary || "white",
+        "border-color": "#f85a3e",
+      "background-color": "#1f1f1f",
+        "font-size": "19px",
+        "text-margin-x": "-110px",
+      "text-wrap": "wrap",
+        shape: "roundrectangle",
+        width: "100",
+        height: "300",
+  
+      },
+    },
+  ];
+}
 
 //{
 //	selector: 'edge[?hasErrors]',
@@ -626,5 +633,3 @@ const data = [
 //		"line-gradient-stop-colors": ["#991818", "#991818"],
 //	},
 //},
-
-export default data;
diff --git a/frontend/src/theme.jsx b/frontend/src/theme.jsx
index 1621dc42..d7bb0e1e 100644
--- a/frontend/src/theme.jsx
+++ b/frontend/src/theme.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { createTheme, adaptV4Theme } from "@mui/material/styles";
 
 const theme = createTheme(adaptV4Theme({
@@ -153,3 +152,298 @@ const theme = createTheme(adaptV4Theme({
 }));
 
 export default theme;
+
+export const getTheme = (themeMode, brandColor) =>
+  createTheme({
+      palette: {
+        mode: themeMode,
+        main: brandColor || "#FF8544",
+        primary: {
+          main: brandColor || "#FF8544",
+          contrastText:  "#ffffff",
+        },
+        secondary: {
+          main: "rgba(255,255,255,0.7)",
+          contrastText:"#000000",
+        },
+        text: {
+          primary: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
+          secondary: themeMode === "dark" ? "#9E9E9E" : "#616161",
+        },
+        type: themeMode,
+        inputColor: themeMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)",
+        textColor: themeMode === "dark" ? "#F1F1F1" : "#1A1A1A",
+        textPrimary: themeMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)",
+        surfaceColor: themeMode === "dark" ? "#27292d" : "#EFEFEF",
+        platformColor: themeMode === "dark" ? "#212121" : "#ffffff",
+        backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#f1f1f1",
+        distributionColor: themeMode === "dark" ? "#40E0D0" : "#008080",
+        cardBackgroundColor: themeMode === "dark" ? "#1e1e1e" : "#eaeaea",
+        cardHoverColor: themeMode === "dark" ? "#323232" : "#F0F0F0", 
+        hoverColor: themeMode === "dark" ? "#323232" : "#D6D6D6",
+        green: themeMode === "dark" ? "#5cc879" : "#008000",
+        defaultBorder: themeMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC',
+        linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor,
+
+        borderRadius: 10,
+        loaderColor: themeMode === "dark" ? "#1a1a1a" : "#E0E0E0",
+        jsonIconStyle: "round",
+        jsonTheme: themeMode === "dark" ? "summerfruit" : {
+          base00: "#ffffff", // background
+          base01: "#f0f0f0", // very light grey
+          base02: "#f5f5f5", // light grey
+          base03: "#999999", // dim text
+          base04: "#444444", // bold keys
+          base05: "#333333", // normal text
+          base06: "#1a1a1a", // darker text
+          base07: "#000000", // black
+          base08: "#f14c4c", // red
+          base09: "#f58c1f", // orange
+          base0A: "#f2c032", // yellow
+          base0B: "#51975d", // green
+          base0C: "#2aa198", // teal
+          base0D: "#007acc", // blue (keys!)
+          base0E: "#c586c0", // purple
+          base0F: "#d16969", // brown
+        },
+        jsonCollapseStringsAfterLength: 100,
+        drawer: {
+          backgroundColor: themeMode === "dark" ? "#262626" : "#f9f9f9"
+        },
+        reactJsonStyle: {
+          padding: 5,
+          width: "98%",
+          borderRadius: 5,
+          border: themeMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)",
+          backgroundColor: themeMode === "dark"
+            ? "#1A1A1A"
+            : "#f1f1f1",
+          color: themeMode === "dark"
+            ? "#F1F1F1"
+            : "#1A1A1A",
+          overflowX: "auto",
+        },        
+        textFieldStyle: {
+          backgroundColor: themeMode === "dark" ? "#212121" : "#FFFFFF",
+          color: themeMode === "dark" ? "#ffffff" : "#000000",
+          borderRadius: "5px",
+          height: 40,
+          border: themeMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0",
+        },
+        DialogStyle: {
+          backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff",
+          borderRadius: 2,
+          boxShadow: themeMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)",
+          border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
+        },
+        innerTextfieldStyle: {
+          height: 40,
+          fontSize: 16,
+          backgroundColor: themeMode === "dark" ? "#212121" : "#f5f5f5",
+        },
+        tooltip: {
+          backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff",
+          color: themeMode === "dark" ? "#ffffff" : "#000000",
+          border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
+        },
+        chipStyle: {
+          backgroundColor: themeMode === "dark" ? "#333333" : "#F5F5F5",
+          borderColor: themeMode === "dark" ? "#444444" : "#E0E0E0",
+          color: themeMode === "dark" ? "#FFFFFF" : "#333333",
+        },        
+        defaultImage: "/images/no_image.png",
+        singulOrange: "/images/singul_orange.png",
+        singulGreen: "/images/singul_green.png",
+        singulBlackWhite: "/images/singul_black_white.png",
+        scrollbarColor: themeMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1",
+        scrollbarColorTransparent: themeMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent",
+      },
+      typography: {
+        fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
+        color: themeMode === "dark" ? "#ffffff" : "#000000",
+        useNextVariants: true,
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightSemiBold: 600,
+        fontWeightBold: 700,
+        allVariants: {
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
+        },      
+        h1: {
+          fontSize: 40,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        h2: {
+          fontSize: 36,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        h3: {
+          fontSize: 32,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        h4: {
+          fontSize: 30,
+          fontWeight: 500,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        h6: {
+          fontSize: 22,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        body1: {
+          fontSize: 16,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+        body2: {
+          fontSize: 14,
+          color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
+        },
+      },
+      components: {
+        MuiButton: {
+          styleOverrides: {
+            root: {
+              textTransform: 'none',
+              borderRadius: '4px',
+            },
+          },
+          variants: [
+            {
+              props: { variant: 'text', color: 'primary' },
+              style: {
+                color: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
+                whiteSpace: "nowrap",
+		            textWrap: "normal",
+              },
+            },
+            {
+              props: { variant: 'text', color: 'secondary' },
+              style: {
+                color: themeMode === "dark" ? "#9E9E9E" : "#616161",
+                whiteSpace: "nowrap",
+		            textWrap: "normal",
+              },
+            },
+            {
+              props: { variant: 'contained', color: 'primary' },
+              style: {
+                backgroundColor: themeMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35',
+                color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF',
+                borderRadius: '4px',
+                whiteSpace: "nowrap",
+		            textWrap: "normal",
+                '&:hover': {
+                  fontWeight: 600,
+                  backgroundColor: themeMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F',
+                  color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF',
+                },
+              },
+            },
+            {
+              props: { variant: 'contained', color: 'secondary' },
+              style: {
+                backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9',
+                color: themeMode === "dark" ? '#ffffff' : '#4C4C4C',
+                borderRadius: '4px',
+                boxShadow: 'none',
+                whiteSpace: "nowrap",
+		            textWrap: "normal",
+                '&:hover': {
+                  fontWeight: 600,
+                  border: themeMode === "dark" ? '1px solid #f1f1f1' : 'none',
+                  backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9',
+                  color: themeMode === "dark" ? '#ffffff' : '#4C4C4C',
+                },
+              },
+            },
+            {
+              props: { variant: 'outlined', color: 'primary' },
+              style: {
+                borderColor: themeMode === "dark" ?  brandColor || "#ff8544" : brandColor || "#cc5f1f",
+                color: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
+                whiteSpace: "nowrap",
+                fontWeight: 'normal',
+		            textWrap: "normal",
+                '&:hover': {
+                  backgroundColor: themeMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc",
+                  color: themeMode === "dark" ? "#1a1a1a" : "#8a3d00",
+                  fontWeight: 600,
+                },
+              },
+            },            
+            {
+              props: { variant: 'outlined', color: 'secondary' },
+              style: {
+                border: '1px solid #C5C5C5',
+                color: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D',
+                whiteSpace: "nowrap",
+		            textWrap: "normal",
+                '&:hover': {
+                  backgroundColor: themeMode === "dark" ? '#C5C5C5' : '#EFEFEF',
+                  borderColor: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D',
+                  fontWeight: 600,
+                  color: themeMode === "dark" ? '#1a1a1a' : '#1A1A1A',
+                },
+              },
+            },
+          ],
+        },
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              color: themeMode === "dark" ? "#C5C5C5" : "#1A1A1A",
+            },
+          },
+        },
+      },
+
+      overrides: {
+        MuiMenu: {
+          list: {
+            backgroundColor: themeMode === "dark" ? "#27292d" : "#ffffff",
+          },
+        },
+        MuiCssBaseline: {
+          MuiCssBaseline: {
+            styleOverrides: `
+              @font-face {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-display: swap;
+                font-weight: 300;
+                src: local('Roboto Light'), local('Roboto-Light');
+              }
+              @font-face {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-display: swap;
+                font-weight: 400;
+                src: local('Roboto'), local('Roboto-Regular');
+              }
+              @font-face {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-display: swap;
+                font-weight: 500;
+                src: local('Roboto Medium'), local('Roboto-Medium');
+              }
+              @font-face {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-display: swap;
+                font-weight: 600;
+                src: local('Roboto SemiBold'), local('Roboto-SemiBold');
+              }
+              @font-face {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-display: swap;
+                font-weight: 700;
+                src: local('Roboto Bold'), local('Roboto-Bold');
+              }
+            `,
+          },
+        },
+      },
+    });
diff --git a/frontend/src/views/Admin2.jsx b/frontend/src/views/Admin2.jsx
index 30a356e5..aaff1429 100644
--- a/frontend/src/views/Admin2.jsx
+++ b/frontend/src/views/Admin2.jsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import AdminNavBar from '../components/AdminNavBar.jsx';
 import { toast } from "react-toastify";
+import { Context } from '../context/ContextApi.jsx';
 
 const Admin2 = (props) => {
     // Destructure props if needed
@@ -10,13 +11,15 @@ const Admin2 = (props) => {
     const [selectedOrganization, setSelectedOrganization] = useState({});
     const [organizationFeatures, setOrganizationFeatures] = useState({});
     const [orgRequest, setOrgRequest] = React.useState(true);
+    const [isOrgLoaded, setIsOrgLoaded] = React.useState(false);
+    const {brandName}  = useContext(Context)
     const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 
 	if (document !== undefined) {
-		if (selectedOrganization?.name !== undefined) {
-			document.title = selectedOrganization?.name + " - Admin - Shuffle"
+        if (selectedOrganization?.name !== undefined) {
+			document.title = brandName?.length > 0 ? selectedOrganization?.name + ` - Admin - ${brandName}` : selectedOrganization?.name + ` - Admin - Shuffle`;
 		} else {
-  			document.title = "Admin - Shuffle"
+  			document.title = brandName?.length > 0 ? `Admin - ${brandName}` : `Admin - Shuffle`;
 		}
 	}
 
@@ -151,6 +154,8 @@ const Admin2 = (props) => {
             .catch((error) => {
                 console.log("Error getting org: ", error);
                 toast("Error getting current organization");
+            }).finally(() => {
+                setIsOrgLoaded(true)
             });
     };
 
@@ -330,7 +335,7 @@ const Admin2 = (props) => {
 
     return (
         <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 29, zoom: 0.9}}>
-            <AdminNavBar userdata={userdata} isLoaded={isLoaded} selectedStatus={selectedStatus} setSelectedStatus={setSelectedStatus} selectedTab={selectedTab} orgId={selectedOrganization.id} handleStatusChange={handleStatusChange} handleEditOrg={handleEditOrg} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} setNotifications={setNotifications} stripeKey={stripeKey} notifications={notifications} checkLogin={checkLogin} globalUrl={globalUrl} isCloud={isCloud}/>
+            <AdminNavBar userdata={userdata} isLoaded={isLoaded} isOrgLoaded={isOrgLoaded} selectedStatus={selectedStatus} setSelectedStatus={setSelectedStatus} selectedTab={selectedTab} orgId={selectedOrganization.id} handleStatusChange={handleStatusChange} handleEditOrg={handleEditOrg} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} setNotifications={setNotifications} stripeKey={stripeKey} notifications={notifications} checkLogin={checkLogin} globalUrl={globalUrl} isCloud={isCloud}/>
         </div>
     );
 };
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 64d594bf..fba1d24a 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useLayoutEffect, memo, useMemo, useRef, useContext } from "react";
 import ReactDOM from "react-dom"
 
-import theme from "../theme.jsx";
+import { getTheme } from "../theme.jsx";
 import { useInterval } from "react-powerhooks";
 import { makeStyles, } from "@mui/styles";
 
@@ -143,11 +143,11 @@ import edgehandles from "cytoscape-edgehandles";
 import CytoscapeComponent from "react-cytoscapejs";
 
 import Draggable from "react-draggable";
-import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
+import defaultCytoscapeStyle from "../defaultCytoscapeStyle.jsx";
 import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
 
 import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"
-import { validateJson, collapseField, GetIconInfo } from "../views/Workflows.jsx";
+import { validateJson, collapseField, GetIconInfo, handleReactJsonClipboard, HandleJsonCopy, } from "../views/Workflows.jsx";
 import { GetParsedPaths, internalIds, } from "../views/Apps.jsx";
 import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
 import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
@@ -164,6 +164,33 @@ export const triggers = [
   {
     name: "Webhook",
     type: "TRIGGER",
+    parameters : [
+      {
+          "name": "url",
+          "example": "",
+          "value": ""
+      },
+      {
+          "name": "tmp",
+          "example": "",
+          "value": "",
+      },
+      {
+        "name": "auth_headers",
+        "example": "",
+        "value": "",
+      },
+      {
+        "name": "custom_response_body",
+        "example": "",
+        "value": "",
+      },
+      {
+        "name": "await_response",
+        "example": "",
+        "value": "v1",
+      },
+    ],
     status: "uninitialized",
     trigger_type: "WEBHOOK",
     errors: null,
@@ -179,6 +206,18 @@ export const triggers = [
   {
     name: "Schedule",
     type: "TRIGGER",
+    parameters : [
+      {
+          "name": "cron",
+          "example": "",
+          "value": "*/25 * * * *"
+      },
+      {
+          "name": "execution_argument",
+          "example": "",
+          "value": "",
+      },
+    ],
     status: "uninitialized",
     trigger_type: "SCHEDULE",
     errors: null,
@@ -223,6 +262,38 @@ export const triggers = [
   {
     name: "User Input",
     type: "TRIGGER",
+    parameters: [
+      {
+          "name": "alertinfo",
+          "example": "",
+          "value": "Do you want to continue the workflow? Start parameters: $exec",
+      },
+      {
+          "name": "options",
+          "example": "",
+          "value": "boolean",
+      },
+      {
+          "name": "type",
+          "example": "",
+          "value": "subflow",
+      },
+      {
+          "name": "email",
+          "example": "",
+          "value": "test@test.com",
+      },
+      {
+          "name": "sms",
+          "example": "",
+          "value": "0000000",
+      },
+      {
+          "name": "subflow",
+          "example": "",
+          "value": "",
+      }
+    ],
     status: "running",
     large_image: "/images/workflows/UserInput2.svg",
     description: "Wait for user input trigger",
@@ -324,6 +395,7 @@ export function SetJsonDotnotation(jsonInput, inputKey) {
   return jsonInput;
 }
 
+
 //export const green = "#86c142";
 export const green = "#02CB70"
 export const yellow = "#FECC00";
@@ -359,31 +431,6 @@ export function removeParam(key, sourceURL) {
   return rtn;
 }
 
-const useStyles = makeStyles({
-  notchedOutline: {
-    borderColor: "#FF8544 !important",
-  },
-  root: {
-    "& .MuiAutocomplete-listbox": {
-      border: "2px solid #FF8544",
-      color: "white",
-      fontSize: 18,
-      "& li:nth-child(even)": {
-        backgroundColor: "#CCC",
-      },
-      "& li:nth-child(odd)": {
-        backgroundColor: "#FFF",
-      },
-    },
-  },
-  inputRoot: {
-    color: "white",
-    "&:hover .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#f86a3e",
-    },
-  },
-});
-
 const splitter = "|~|";
 const svgSize = 24;
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -394,6 +441,8 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const AngularWorkflow = (defaultprops) => {
   const { globalUrl, setCookie, isLoggedIn, isLoaded, userdata, data_id, ReactGA, } = defaultprops;
+  const {themeMode, supportEmail, brandColor} = useContext(Context)
+  const theme = getTheme(themeMode, brandColor)
   const referenceUrl = globalUrl + "/api/v1/hooks/";
   //const alert = useAlert()
   let navigate = useNavigate();
@@ -407,10 +456,36 @@ const AngularWorkflow = (defaultprops) => {
 
   var to_be_copied = "";
   const [firstrequest, setFirstrequest] = React.useState(true);
-  const [cystyle] = useState(cytoscapestyle);
+  const cystyle = useMemo(() => defaultCytoscapeStyle(theme), [themeMode]);
+  // const cystyle = useMemo(() => defaultCytoscapeStyle, [themeMode]);
 
   const [cy, setCy] = React.useState();
 
+  const useStyles = makeStyles({
+    notchedOutline: {
+      borderColor: "#FF8544 !important",
+    },
+    root: {
+      "& .MuiAutocomplete-listbox": {
+        border: "2px solid #FF8544",
+        color: theme.palette.text.primary,
+        fontSize: 18,
+        "& li:nth-child(even)": {
+          backgroundColor: "#CCC",
+        },
+        "& li:nth-child(odd)": {
+          backgroundColor: "#FFF",
+        },
+      },
+    },
+    inputRoot: {
+      color: theme.palette.text.primary,
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#f86a3e",
+      },
+    },
+  });
+
   const [toolsApp, setToolsApp] = React.useState({});
   const [currentView, setCurrentView] = React.useState(0);
   const [triggerAuthentication, setTriggerAuthentication] = React.useState({});
@@ -434,6 +509,7 @@ const AngularWorkflow = (defaultprops) => {
       "default",
     ]
   });
+
   const [appGroup, setAppGroup] = React.useState([]);
   const [triggerGroup, setTriggerGroup] = React.useState([]);
   const [executionText, setExecutionText] = React.useState("");
@@ -649,6 +725,7 @@ const AngularWorkflow = (defaultprops) => {
 						"Nothing",
 						"Create ticket",
 						"List tickets",
+						"Send Email",
 						"Get specific ticket",
 					],
 					"multiselect": true,
@@ -704,6 +781,10 @@ const AngularWorkflow = (defaultprops) => {
           "list_tickets",
           "get_ticket",
           "create_ticket",
+          "close_ticket",
+          "add_comment",
+          "update_ticket",
+          "search_tickets"
         ],
         "required": true,
       },
@@ -733,7 +814,13 @@ const AngularWorkflow = (defaultprops) => {
         "value": "list_messages",
         "options": [
           "list_messages",
+          "get_message", 
           "send_message",
+          "search_messages",
+          "list_attachments",
+          "get_attachment",
+          "create_contact",
+          "get_contact"
         ],
         "required": true,
       },
@@ -750,9 +837,38 @@ const AngularWorkflow = (defaultprops) => {
       "label": "IAM",
       "parameters": [{
         "name": "action",
-        "value": "get_kms_key",
+        "value": "get_asset",
+      "options": [
+        "reset_password",
+        "enable_user",
+        "disable_user",
+        "get_identity",
+        "get_asset",
+        "search_identity"
+      ],
+        "required": true,
+      },
+      {
+        "name": "fields",
+        "value": "",
+        "required": false,
+        "multiline": true,
+      }]
+    },
+    {
+      "name": "Assets",
+      "description": "Available actions for Assets",
+      "label": "Assets",
+      "parameters": [{
+        "name": "action",
+        "value": "search_vulnerabilities",
         "options": [
-          "get_kms_key",
+        "list_assets",
+          "get_asset",
+          "search_assets",
+          "search_users",
+          "search_endpoints",
+          "search_vulnerabilities"
         ],
         "required": true,
       },
@@ -763,6 +879,104 @@ const AngularWorkflow = (defaultprops) => {
         "multiline": true,
       }]
     },
+    {
+      "name": "Eradication",
+      "description": "Available actions for Eradication",
+      "label": "Eradication",
+      "parameters": [{
+        "name": "action",
+        "value": "list_alerts",
+        "options": [
+          "list_alerts",
+          "close_alert",
+          "get_alert",
+          "create_detection",
+          "block_hash",
+          "search_hosts",
+          "isolate_host",
+          "unisolate_host",
+          "trigger_host_scan"
+        ],
+        "required": true,
+      },
+      {
+        "name": "fields",
+        "value": "",
+        "required": false,
+        "multiline": true,
+      }]
+    },
+    {
+      "name": "Intel",
+      "description": "Available actions for Intel",
+      "label": "Intel",
+      "parameters": [{
+        "name": "action",
+        "value": "get_ioc",
+        "options": [
+          "get_ioc",
+          "search_ioc",
+          "create_ioc",
+          "update_ioc",
+          "delete_ioc"
+        ],
+        "required": true,
+      },
+      {
+        "name": "fields",
+        "value": "",
+        "required": false,
+        "multiline": true,
+      }]
+    },
+    {
+      "name": "Network",
+      "description": "Available actions for Network",
+      "label": "Network",
+      "parameters": [{
+        "name": "action",
+        "value": "get_rules",
+        "options": [
+          "get_rules",
+          "allow_ip",
+          "block_ip"
+        ],
+        "required": true,
+      },
+      {
+        "name": "fields",
+        "value": "",
+        "required": false,
+        "multiline": true,
+      }]
+    },
+    {
+      "name": "SIEM",
+      "description": "Available actions for SIEM",
+      "label": "SIEM",
+      "parameters": [{
+        "name": "action",
+        "value": "search",
+        "options": [
+          "search",
+          "list_alerts",
+          "close_alert",
+          "get_alert",
+          "create_detection",
+          "add_to_lookup_list",
+          "isolate_endpoint"
+        ],
+        "required": true,
+      },
+      {
+        "name": "fields",
+        "value": "",
+        "required": false,
+        "multiline": true,
+      }]
+    },
+
+    
     ]
   }]
 
@@ -818,6 +1032,14 @@ const AngularWorkflow = (defaultprops) => {
       return
     }
 
+	// Ensures reloads don't randomly happen
+	const appsearchValue = document.getElementById("appsearch")
+	if (appsearchValue !== undefined && appsearchValue !== null) {
+	  if (appsearchValue.value !== undefined && appsearchValue.value !== null && appsearchValue.value.length > 0) {
+		  return
+	  }
+	}
+
     if (loadedApps.includes(appId)) {
       //console.log("App already loaded: ", appId)
 
@@ -2136,7 +2358,6 @@ const AngularWorkflow = (defaultprops) => {
   }
 
   // Controls the colors and direction of execution results.
-  // Style is in defaultCytoscapeStyle.js
   const handleUpdateResults = (responseJson, executionRequest) => {
     if (responseJson === undefined || responseJson === null || responseJson.success === false) {
       stop()
@@ -2659,7 +2880,7 @@ const AngularWorkflow = (defaultprops) => {
           if (responseJson.reason !== undefined && responseJson.reason !== null) {
             toast("Failed to save: " + responseJson.reason);
           } else {
-            toast("Failed to save. Please contact your support@shuffler.io or your local admin if this is unexpected.")
+            toast(`Failed to save. Please contact your ${supportEmail} or your local admin if this is unexpected.`)
           }
         } else {
           setSavingState(1);
@@ -2845,7 +3066,7 @@ const AngularWorkflow = (defaultprops) => {
 
   const runFromHere = (curAction) => {
 	if (curAction.app_id === undefined || curAction.app_id === null || curAction.app_id.length === 0) {
-		toast.error("No app id found for action. Please contact support@shuffler.io if this persists")
+		toast.error(`No app id found for action. Please contact ${supportEmail} if this persists`)
 		return
 	}
 
@@ -2904,7 +3125,7 @@ const AngularWorkflow = (defaultprops) => {
 			if (responseJson?.reason !== undefined && responseJson?.reason !== null && responseJson?.reason.length > 0) {
 				toast.error(responseJson.reason)
 			} else {
-				toast.error("Failed to run the action. Please try again or contact support@shuffler.io")
+				toast.error(`Failed to run the action. Please try again or contact ${supportEmail}`)
 			}
 
 			return
@@ -3595,6 +3816,7 @@ const AngularWorkflow = (defaultprops) => {
       "border-opacity": ".7",
       "font-size": "25px",
       "border-color": color,
+      "color": theme.palette.text.primary
     }
 
     const animationDuration = 150
@@ -4352,11 +4574,11 @@ const AngularWorkflow = (defaultprops) => {
             if (execFound === null && sessionToken === null) {
 
 			  if (isCloud) {
-				  toast.error(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds. If you recently deleted this workflow, speak with support@shuffler.io to recover it from a revision.`, {
+				  toast.error(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds. If you recently deleted this workflow, speak with ${supportEmail} to recover it from a revision.`, {
 					  autoClose: 10000,
 				  })
 			  } else { 
-				  toast.error(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds. Contact support@shuffler.io if this is unexpected.`, {
+				  toast.error(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds. Contact ${supportEmail} if this is unexpected.`, {
 					  autoClose: 10000,
 				  })
 			  }
@@ -8642,9 +8864,9 @@ const AngularWorkflow = (defaultprops) => {
           }
 
           // Set the edge to be dashed
-          edge.style("target-arrow-color", "white")
+          edge.style("target-arrow-color", theme.palette.text.primary)
           edge.style("line-style", "solid")
-          edge.style("line-gradient-stop-colors", ["white", "white"])
+          edge.style("line-gradient-stop-colors", [theme.palette.text.primary, theme.palette.text.primary])
         }
       }
 
@@ -8788,7 +9010,7 @@ const AngularWorkflow = (defaultprops) => {
     }
 
     if (nodedata.type !== "COMMENT") {
-      parsedStyle.color = "white";
+      parsedStyle.color = theme.palette.text.primary;
     }
 
     if (event.target !== undefined && event.target !== null) {
@@ -8847,9 +9069,9 @@ const AngularWorkflow = (defaultprops) => {
     const edgeData = event.target.data();
     if (edgeData.decorator === true) {
       // Set color of it to white and not stripled
-      event.target.style("target-arrow-color", "white")
+      event.target.style("target-arrow-color", theme.palette.text.primary)
       event.target.style("line-style", "solid")
-      event.target.style("line-gradient-stop-colors", ["white", "white"])
+      event.target.style("line-gradient-stop-colors", [theme.palette.text.primary, theme.palette.text.primary])
 
       return;
     }
@@ -10200,7 +10422,7 @@ const AngularWorkflow = (defaultprops) => {
     minWidth: isMobile ? 50 : "100%",
     maxWidth: isMobile ? 50 : "100%",
     marginTop: "5px",
-    color: "white",
+    color: theme.palette.text.primary,
     backgroundColor: theme.palette.surfaceColor,
     cursor: "pointer",
     display: "flex",
@@ -10213,7 +10435,7 @@ const AngularWorkflow = (defaultprops) => {
     minWidth: "100%",
     maxWidth: "100%",
     marginTop: "5px",
-    color: "white",
+    color: theme.palette.text.primary,
     backgroundColor: theme.palette.surfaceColor,
     cursor: "pointer",
     display: "flex",
@@ -10305,7 +10527,7 @@ const AngularWorkflow = (defaultprops) => {
                 aria-controls="long-menu"
                 aria-haspopup="true"
                 onClick={menuClick}
-                style={{ color: "white" }}
+                style={{ color: theme.palette.text.primary }}
               >
                 <MoreVertIcon />
               </IconButton>
@@ -10327,7 +10549,7 @@ const AngularWorkflow = (defaultprops) => {
                 <MenuItem
                   style={{
                     backgroundColor: theme.palette.inputColor,
-                    color: "white",
+                    color: theme.palette.text.primary,
                   }}
                   onClick={() => {
                     setOpen(false);
@@ -10353,7 +10575,7 @@ const AngularWorkflow = (defaultprops) => {
                 <MenuItem
                   style={{
                     backgroundColor: theme.palette.inputColor,
-                    color: "white",
+                    color: theme.palette.text.primary,
                   }}
                   onClick={() => {
                     deleteVariable(type, index);
@@ -10389,7 +10611,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             href="https://shuffler.io/docs/workflows#workflow_variables"
             target="_blank"
-            style={{ textDecoration: "none", color: "#FF8544" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             Workflow variables?
           </a>
@@ -10439,7 +10661,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             href="https://shuffler.io/docs/workflows#execution_variables"
             target="_blank"
-            style={{ textDecoration: "none", color: "#FF8544" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             Runtime variables?
           </a>
@@ -10754,6 +10976,7 @@ const AngularWorkflow = (defaultprops) => {
           large_image: data.large_image,
           status: "uninitialized",
           name: data.name,
+          parameters: data?.parameters,
           isStartNode: false,
           position: newposition,
         }
@@ -10955,6 +11178,10 @@ const AngularWorkflow = (defaultprops) => {
   }
 
   const handleAppDrag = (e, app) => {
+	if (cy === undefined || cy === null) {
+		return
+	}
+
     const cycontainer = cy.container()
 
     // Handling drag of public apps
@@ -11482,11 +11709,11 @@ const AngularWorkflow = (defaultprops) => {
                     <Grid item style={{ flex: 1 }}>
                       <Typography
                         variant="body1"
-                        color="textSecondary"
                         style={{
                           marginBottom: 0,
                           marginLeft: 5,
                           marginTop: newAppname.length > 17 ? -3 : 8,
+                          color: theme.palette.textPrimary
                         }}
                       >
                         {newAppname}
@@ -11650,7 +11877,7 @@ const AngularWorkflow = (defaultprops) => {
       var type = "app"
       const baseImage = <LibraryBooksIcon />
       return (
-        <div style={{ position: "relative", marginTop: 15, marginLeft: 0, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, minWidth: leftBarSize+30, maxWidth: 340, boxShadows: "none", overflowX: "hidden", }}>
+        <div style={{ position: "relative", marginTop: 15, marginLeft: 0, marginRight: 10, position: "absolute", color: theme.palette.textColor, zIndex: 1001, backgroundColor: theme.palette.textFieldStyle.backgroundColor, minWidth: leftBarSize+30, maxWidth: 340, boxShadows: "none", overflowX: "hidden", }}>
           <List style={{ backgroundColor: theme.palette.inputColor, }}>
             {hits.length === 0 ?
               <ListItem style={outerlistitemStyle}>
@@ -11671,7 +11898,7 @@ const AngularWorkflow = (defaultprops) => {
                   overflowX: "hidden",
                   overflowY: "hidden",
                   borderBottom: "1px solid rgba(255,255,255,0.4)",
-                  backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
+                  backgroundColor: mouseHoverIndex === index ? theme.palette.hoverColor : "inherit",
                   cursor: "pointer",
                   marginLeft: 0,
                   marginRight: 0,
@@ -11744,7 +11971,7 @@ const AngularWorkflow = (defaultprops) => {
                     }}
                     defaultPosition={{ x: 0, y: 0 }}
                   >
-                    <div style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
+                    <div style={{ textDecoration: "none", color: theme.palette.text.primary, }} onClick={(event) => {
                       clickedApp(hit)
 
                     }}>
@@ -11791,8 +12018,7 @@ const AngularWorkflow = (defaultprops) => {
       <div style={{ marginBottom: 25 }}>
         <Typography
           variant="body1"
-          color="textSecondary"
-          style={{ marginTop: 20, marginLeft: 5 }}
+          style={{ marginTop: 20, marginLeft: 5, color: theme.palette.textPrimary }}
         >
           {title}
         </Typography>
@@ -11882,7 +12108,7 @@ const AngularWorkflow = (defaultprops) => {
           )}
 
           {visibleApps.length > extraApps.length ? 
-			  <Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginLeft: 5, }}>
+			  <Typography variant="body1" style={{ marginTop: 20, marginLeft: 5, color: theme.palette.textPrimary}}>
 				Your Apps
 			  </Typography>
 		  : null}
@@ -12049,7 +12275,7 @@ const AngularWorkflow = (defaultprops) => {
 
     const newaction = selectedApp.actions.find((a) => a.name === e.target.value)
     if (newaction === undefined || newaction === null) {
-      toast("Failed to find the action you selected. Please try again or contact support@shuffler.io if it persists.");
+      toast(`Failed to find the action you selected. Please try again or contact ${supportEmail} if it persists.`);
       return;
     }
 
@@ -12306,6 +12532,8 @@ const AngularWorkflow = (defaultprops) => {
   const selectedTriggerChange = (event) => {
     selectedTrigger.label = event.target.value;
     setSelectedTrigger(selectedTrigger);
+    workflow.triggers[selectedTriggerIndex].label = event.target.value;
+    setWorkflow(workflow);
   };
 
   // Starts on current node and climbs UP the tree to the root object.
@@ -12395,8 +12623,8 @@ const AngularWorkflow = (defaultprops) => {
   const appApiViewStyle = {
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "#1F2023",
-    color: "white",
+    backgroundColor: theme.palette.DialogStyle.backgroundColor,
+    color: theme.palette.text.primary,
     paddingRight: 15,
     paddingLeft: 15,
     minHeight: "100%",
@@ -12475,16 +12703,19 @@ const AngularWorkflow = (defaultprops) => {
   };
 
   const setTriggerCronWrapper = (value) => {
-    console.log("Cron Value: ", value)
     if (selectedTrigger.parameters === null) {
       selectedTrigger.parameters = [];
     }
-
+    selectedTrigger.parameters[0] = {
+      value: value,
+      name: "cron",
+    };
     workflow.triggers[selectedTriggerIndex].parameters[0] = {
       value: value,
       name: "cron",
     };
     setWorkflow(workflow);
+    setSelectedTrigger(selectedTrigger);
   };
 
   const setTriggerOptionsWrapper = (value) => {
@@ -12530,11 +12761,14 @@ const AngularWorkflow = (defaultprops) => {
     if (selectedTrigger.parameters === null) {
       selectedTrigger.parameters = [];
     }
-
+    selectedTrigger.parameters[0] = {
+      value : value
+    }
     workflow.triggers[selectedTriggerIndex].parameters[0] = {
       value: value,
       name: "alertinfo",
     };
+    setSelectedTrigger(selectedTrigger)
     setWorkflow(workflow);
   };
 
@@ -12798,7 +13032,7 @@ const AngularWorkflow = (defaultprops) => {
                   >
                     <Tooltip title="Expand editor" placement="top">
                       <OpenInFullIcon style={{ 
-                        color: "rgba(255,255,255,0.7)",
+                        color: theme.palette.textColor,
                         fontSize: 20,
                       }}/>
                     </Tooltip>
@@ -12815,7 +13049,7 @@ const AngularWorkflow = (defaultprops) => {
               data.value !== undefined &&
               data.value !== null &&
               data.value.includes(".#") ? (
-                <span style={{ color: "white", marginBottom: 5 }}>
+                <span style={{ color: theme.palette.text.primary, marginBottom: 5 }}>
                   Use "Shuffle Tools" app with "Filter List" action to handle loops
                 </span>
               ) : null
@@ -12966,7 +13200,7 @@ const AngularWorkflow = (defaultprops) => {
             startIcon={<AddCircleOutlineIcon/>}
             sx={{ 
               marginLeft: 10,
-              color: "white",
+              color: theme.palette.text.primary,
               fontSize: "15px",
               fontFamily: theme?.typography?.fontFamily,
               textTransform: "none",
@@ -12978,6 +13212,7 @@ const AngularWorkflow = (defaultprops) => {
               justifyContent: "flex-start",
               "&:hover": {
                 backgroundColor: "transparent",
+                color: theme.palette.text.primary,
                 border: "none"
               },
               // Disable ripple effect
@@ -12987,7 +13222,7 @@ const AngularWorkflow = (defaultprops) => {
             }}
             >
               <Tooltip title="Show available variables" placement="top">
-                <span>Auto Complete</span>
+                Auto Complete
               </Tooltip>
             </Button>
             <KeyboardArrowDownIcon
@@ -13005,8 +13240,8 @@ const AngularWorkflow = (defaultprops) => {
               onClose={handleMenuClose}
               PaperProps={{
                 style: {
-                  backgroundColor: "#82ccc3",
-                  color: "white",
+                  backgroundColor: theme.palette.backgroundColor,
+                  color: theme.palette.text.primary,
                   marginTop: 2,
                   maxHeight: 400,
                 },
@@ -13121,7 +13356,7 @@ const AngularWorkflow = (defaultprops) => {
                       }
                       parentMenuOpen={!!menuPosition}
                       style={{
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minWidth: 250,
                         maxWidth: 250,
                         maxHeight: 50,
@@ -13140,7 +13375,7 @@ const AngularWorkflow = (defaultprops) => {
                           style={{
                             // backgroundColor: theme.palette.inputColor,
                             marginLeft: 15,
-                            color: "white",
+                            color: theme.palette.text.primary,
                             minWidth: 250,
                             maxWidth: 250,
                             padding: 0,
@@ -13183,7 +13418,7 @@ const AngularWorkflow = (defaultprops) => {
                               key={pathdata.name}
                               style={{
                                 // backgroundColor: theme.palette.inputColor,
-                                color: "white",
+                                color: theme.palette.text.primary,
                                 minWidth: 250,
                                 maxWidth: 250,
                                 padding: boxPadding,
@@ -13224,7 +13459,7 @@ const AngularWorkflow = (defaultprops) => {
                     key={innerdata.name}
                     style={{
                       // backgroundColor: theme.palette.inputColor,
-                      color: "white",
+                      color: theme.palette.text.primary,
                       padding: "10px 12px", // Add padding here
                     }}
                     value={innerdata}
@@ -13257,7 +13492,7 @@ const AngularWorkflow = (defaultprops) => {
   };
 
   const menuItemStyle = {
-    color: "white",
+    color: theme.palette.text.primary,
     backgroundColor: theme.palette.inputColor,
   };
 
@@ -13321,7 +13556,7 @@ const AngularWorkflow = (defaultprops) => {
         style: {
           padding: 30,
           pointerEvents: "auto",
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: isMobile ? "90%" : 800,
           border: theme.palette.defaultBorder,
 
@@ -13344,11 +13579,11 @@ const AngularWorkflow = (defaultprops) => {
             setAuthgroupModalOpen(false)
           }}
         >
-          <CloseIcon style={{ color: "white" }} />
+          <CloseIcon style={{ color: theme.palette.text.primary }} />
         </IconButton>
       </Tooltip>
       <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-        <span style={{ color: "white" }}>Authgroup Selection</span>
+        <span style={{ color: theme.palette.text.primary }}>Authgroup Selection</span>
       </DialogTitle>
       <DialogContent>
         <Typography variant="body1" color="textSecondary">
@@ -13445,7 +13680,7 @@ const AngularWorkflow = (defaultprops) => {
         style: {
           padding: 30,
           pointerEvents: "auto",
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: isMobile ? "90%" : 650,
           border: theme.palette.defaultBorder,
 
@@ -13468,11 +13703,11 @@ const AngularWorkflow = (defaultprops) => {
             setExecutionArgumentModalOpen(false)
           }}
         >
-          <CloseIcon style={{ color: "white" }} />
+          <CloseIcon style={{ color: theme.palette.text.primary }} />
         </IconButton>
       </Tooltip>
       <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-        <span style={{ color: "white" }}>Provide an execution argument</span>
+        <span style={{ color: theme.palette.text.primary }}>Provide an execution argument</span>
       </DialogTitle>
       <DialogContent>
 
@@ -13491,7 +13726,7 @@ const AngularWorkflow = (defaultprops) => {
                     InputProps={{
                       style: {
                         height: "50px",
-                        color: "white",
+                        color: theme.palette.text.primary,
                         fontSize: "1em",
                       },
                     }}
@@ -13656,7 +13891,7 @@ const AngularWorkflow = (defaultprops) => {
       open={aiQueryModalOpen}
       PaperProps={{
         style: {
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: isMobile ? "90%" : 450,
           border: theme.palette.defaultBorder,
           padding: 50,
@@ -13686,7 +13921,7 @@ const AngularWorkflow = (defaultprops) => {
           onClick={(e) => {
           }}
         >
-          <DragIndicatorIcon style={{ color: "white" }} />
+          <DragIndicatorIcon style={{ color: theme.palette.text.primary }} />
         </IconButton>
       </Tooltip>
       <IconButton
@@ -13694,7 +13929,7 @@ const AngularWorkflow = (defaultprops) => {
           position: "absolute",
           top: 6,
           right: 6,
-          color: "white",
+          color: theme.palette.text.primary,
         }}
         onClick={() => {
           setAiQueryModalOpen(false)
@@ -13706,7 +13941,7 @@ const AngularWorkflow = (defaultprops) => {
         Shuffle AI
       </Typography>
       <Typography variant="body2" color="textSecondary">
-        What you write here will be fed to the Shuffle AI to generate a change for the selected action or field. Best used for when you are stuck with formatting. Uses your AI credits (resets monthly). <b>Beta feature.</b> Please give feedback to support@shuffler.io {"<"}3
+        What you write here will be fed to the Shuffle AI to generate a change for the selected action or field. Best used for when you are stuck with formatting. Uses your AI credits (resets monthly). <b>Beta feature.</b> Please give feedback to {supportEmail} {"<"}3
 
       </Typography>
       <TextField
@@ -13780,14 +14015,23 @@ const AngularWorkflow = (defaultprops) => {
       aria-labelledby="draggable-dialog-title"
       open={conditionsModalOpen}
       PaperProps={{
-        style: {
+        sx: {
           pointerEvents: "auto",
-          color: "white",
-          minWidth: isMobile ? "90%" : 800,
+          color: theme.palette.DialogStyle.color,
+          minWidth: isMobile ? "90%" : "800px",
           border: theme.palette.defaultBorder,
 
-          borderRadius: theme.palette.borderRadius,
-          backgroundColor: "black",
+          borderRadius: theme.palette.DialogStyle.borderRadius,
+          backgroundColor: theme.palette.DialogStyle.backgroundColor,
+          '& .MuiDialogContent-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
+          '& .MuiDialogTitle-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
+          '& .MuiDialogActions-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
         },
       }}
       onClose={() => {
@@ -13798,7 +14042,8 @@ const AngularWorkflow = (defaultprops) => {
           position: "absolute",
           bottom: 10,
           left: 10,
-          color: "rgba(255,255,255,0.6)",
+          color: theme.palette.textColor,
+          backgroundColor: 'inherit',
           zIndex: 10000,
         }}
       >
@@ -13809,7 +14054,7 @@ const AngularWorkflow = (defaultprops) => {
           href="/docs/workflows#conditions"
           style={{
             textDecoration: "none",
-            color: "#FF8544",
+            color: theme.palette.linkColor,
           }}
         >
           Learn more
@@ -13817,7 +14062,7 @@ const AngularWorkflow = (defaultprops) => {
       </span>
       <FormControl>
         <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-          <span style={{ color: "white" }}>Condition</span>
+          <span style={{ color: theme.palette.text.primary }}>Condition</span>
         </DialogTitle>
         <DialogContent style={{}}>
           <div style={{ display: "flex" }}>
@@ -14027,7 +14272,7 @@ const AngularWorkflow = (defaultprops) => {
             </div>
           </div>
         </DialogContent>
-        <DialogActions>
+        <DialogActions sx={{pr: 3, pb: 1}}>
           <Button
             style={{ borderRadius: "0px" }}
             variant="text"
@@ -14044,7 +14289,7 @@ const AngularWorkflow = (defaultprops) => {
             Cancel
           </Button>
           <Button
-            style={{ borderRadius: "0px" }}
+            sx={{ borderRadius: "4px", px: 3 }}
             variant="contained"
             onClick={() => {
               setSelectedEdge({});
@@ -14135,7 +14380,7 @@ const AngularWorkflow = (defaultprops) => {
         minWidth: "100%",
         maxWidth: "100%",
         marginTop: "5px",
-        color: "white",
+        color: theme.palette.text.primary,
         backgroundColor: theme.palette.surfaceColor,
         cursor: "pointer",
         display: "flex",
@@ -14236,7 +14481,7 @@ const AngularWorkflow = (defaultprops) => {
                 aria-controls="long-menu"
                 aria-haspopup="true"
                 onClick={menuClick}
-                style={{ color: "white" }}
+                style={{ color: theme.palette.text.primary }}
               >
                 <MoreVertIcon />
               </IconButton>
@@ -14256,7 +14501,7 @@ const AngularWorkflow = (defaultprops) => {
                 }}
               >
                 <MenuItem
-                  style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                  style={{ backgroundColor: theme.palette.inputColor, color: theme.palette.text.primary }}
                   onClick={() => {
                     duplicateCondition(index);
                   }}
@@ -14265,7 +14510,7 @@ const AngularWorkflow = (defaultprops) => {
                   {"Duplicate"}
                 </MenuItem>
                 <MenuItem
-                  style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                  style={{ backgroundColor: theme.palette.inputColor, color: theme.palette.text.primary }}
                   onClick={() => {
                     setOpen(false);
                     deleteCondition(index);
@@ -14329,7 +14574,7 @@ const AngularWorkflow = (defaultprops) => {
               {
                 selectedEdge && Object.keys(selectedEdge).length > 0 ?
                 <ArrowForwardIcon style={{ 
-                  color: "rgba(255,255,255,0.7)",
+                  color: theme.palette.textColor,
                   fontSize: 20,
                 }} />
                 : null
@@ -14354,7 +14599,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             target="_blank"
             href="https://shuffler.io/docs/workflows#conditions"
-            style={{ textDecoration: "none", color: "#FF8544" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             What are conditions?
           </a>
@@ -15008,7 +15253,7 @@ const AngularWorkflow = (defaultprops) => {
               marginTop: 10,
               flex: 1,
               backgroundColor: theme.palette.inputColor,
-              color: "white",
+              color: theme.palette.text.primary,
               height: 35,
               marginleft: 10,
               borderRadius: theme.palette?.borderRadius,
@@ -15025,7 +15270,7 @@ const AngularWorkflow = (defaultprops) => {
                   key={index}
                   style={{
                     backgroundColor: theme.palette.inputColor,
-                    color: "white",
+                    color: theme.palette.text.primary,
                   }}
                   value={data.name}
                 >
@@ -15040,7 +15285,7 @@ const AngularWorkflow = (defaultprops) => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://shuffler.io/docs/triggers#subflow"
-        style={{ textDecoration: "none", color: "#FF8544" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor }}
       >
         What are subflows?
       </a>
@@ -15064,7 +15309,7 @@ const AngularWorkflow = (defaultprops) => {
             }}
             InputProps={{
               style: {
-                color: "white"
+                color: theme.palette.text.primary
               }
             }}
             size="small"
@@ -15093,7 +15338,7 @@ const AngularWorkflow = (defaultprops) => {
                   }}
                   InputProps={{
                     style: {
-                      color: "white"
+                      color: theme.palette.text.primary
                     }
                   }}
                   size="small"
@@ -15144,7 +15389,7 @@ const AngularWorkflow = (defaultprops) => {
           />
         }
         style={{ marginTop: 10 }}
-        label={<div style={{ color: "white" }}>Wait for results</div>}
+        label={<div style={{ color: theme.palette.text.primary }}>Wait for results</div>}
       />
       <div style={{ flex: "6", marginTop: 10, }}>
         <div>
@@ -15176,7 +15421,7 @@ const AngularWorkflow = (defaultprops) => {
               ListboxProps={{
                 style: {
                   backgroundColor: theme.palette.inputColor,
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               sx={{
@@ -15251,7 +15496,7 @@ const AngularWorkflow = (defaultprops) => {
                     <MenuItem
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: data.id === workflow.id ? "red" : "white",
+                        color: data.id === workflow.id ? "red" : theme.palette.text.primary,
                       }}
                       value={data}
                       onClick={() => {
@@ -15333,7 +15578,7 @@ const AngularWorkflow = (defaultprops) => {
                 ListboxProps={{
                   style: {
                     backgroundColor: theme.palette.inputColor,
-                    color: "white",
+                    color: theme.palette.text.primary,
                   },
                 }}
                 sx={{
@@ -15397,7 +15642,7 @@ const AngularWorkflow = (defaultprops) => {
                       }}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: isParent ? "red" : "white",
+                        color: isParent ? "red" : theme.palette.text.primary,
                       }}
                       value={action}
                     >
@@ -15469,7 +15714,7 @@ const AngularWorkflow = (defaultprops) => {
                 >
                   <OpenInFullIcon
                     style={{
-                      color: "rgba(255,255,255,0.7)",
+                      color: theme.palette.textColor,
                       height: 20,
                       width: 20
                     }}
@@ -15480,9 +15725,14 @@ const AngularWorkflow = (defaultprops) => {
           </div>
           <TextField
             id="subflow_exec_field"
-            style={theme.palette.textFieldStyle}
+            style={{
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+              color: theme.palette.textFieldStyle.color,
+            }}
             InputProps={{
               style: {
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                color: theme.palette.textFieldStyle.color,
               },
               endAdornment: (
                 <InputAdornment position="end">
@@ -15527,7 +15777,7 @@ const AngularWorkflow = (defaultprops) => {
               open={!!menuPosition}
               style={{
                 border: `2px solid #FF8544`,
-                color: "white",
+                color: theme.palette.text.primary,
                 marginTop: 2,
               }}
             >
@@ -15643,7 +15893,7 @@ const AngularWorkflow = (defaultprops) => {
                       parentMenuOpen={!!menuPosition}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minWidth: 250,
                       }}
                       onClick={() => {
@@ -15666,7 +15916,7 @@ const AngularWorkflow = (defaultprops) => {
                             key={pathdata.name}
                             style={{
                               backgroundColor: theme.palette.inputColor,
-                              color: "white",
+                              color: theme.palette.text.primary,
                               minWidth: 250,
                             }}
                             value={pathdata}
@@ -15699,7 +15949,7 @@ const AngularWorkflow = (defaultprops) => {
                       }
                       parentMenuOpen={!!menuPosition}
                       style={{
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minWidth: 250,
                         maxWidth: 250,
                         maxHeight: 50,
@@ -15717,7 +15967,7 @@ const AngularWorkflow = (defaultprops) => {
                           style={{
                             // backgroundColor: theme.palette.inputColor,
                             marginLeft: 15,
-                            color: "white",
+                            color: theme.palette.text.primary,
                             minWidth: 250,
                             maxWidth: 250,
                             padding: 0,
@@ -15760,7 +16010,7 @@ const AngularWorkflow = (defaultprops) => {
                               key={pathdata.name}
                               style={{
                                 // backgroundColor: theme.palette.inputColor,
-                                color: "white",
+                                color: theme.palette.text.primary,
                                 minWidth: 250,
                                 maxWidth: 250,
                                 padding: boxPadding,
@@ -15801,7 +16051,7 @@ const AngularWorkflow = (defaultprops) => {
                     key={innerdata.name}
                     style={{
                       // backgroundColor: theme.palette.inputColor,
-                      color: "white",
+                      color: theme.palette.text.primary,
                     }}
                     value={innerdata}
                     onMouseOver={() => handleMouseover()}
@@ -15895,7 +16145,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             target="_blank"
             href="https://shuffler.io/docs/workflows#comments"
-            style={{ textDecoration: "none", color: "#FF8544" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             What are comments?
           </a>
@@ -15911,11 +16161,14 @@ const AngularWorkflow = (defaultprops) => {
           <div>Name</div>
           <TextField
             style={{
-              backgroundColor: theme.palette.inputColor,
-              borderRadius: theme.palette?.borderRadius,
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+              color: theme.palette.textFieldStyle.color,
+              borderRadius: theme.palette?.textFieldStyle.borderRadius,
             }}
             InputProps={{
               style: {
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                color: theme.palette.textFieldStyle.color,
               },
             }}
             multiline
@@ -16119,20 +16372,7 @@ const AngularWorkflow = (defaultprops) => {
   // Special SCHEDULE handler
   var trigger_header_auth = ""
   if (Object.getOwnPropertyNames(selectedTrigger)?.length > 0 && workflow?.triggers !== null && workflow?.triggers !== undefined && workflow?.triggers?.length >= selectedTriggerIndex && workflow?.triggers[selectedTriggerIndex] !== undefined) {
-    if (selectedTrigger.trigger_type === "SCHEDULE" && workflow.triggers[selectedTriggerIndex].parameters === undefined || workflow.triggers[selectedTriggerIndex].parameters === null) {
-      console.log("Autofixing schedule")
-
-      workflow.triggers[selectedTriggerIndex].parameters = [];
-      workflow.triggers[selectedTriggerIndex].parameters[0] = {
-        name: "cron",
-        value: isCloud ? "*/25 * * * *" : "60",
-      };
-      workflow.triggers[selectedTriggerIndex].parameters[1] = {
-        name: "execution_argument",
-        value: '{"name": "value"}',
-      };
-      setWorkflow(workflow);
-    } else if (selectedTrigger.trigger_type === "WEBHOOK") {
+    if (selectedTrigger.trigger_type === "WEBHOOK") {
       if (workflow.triggers[selectedTriggerIndex] === undefined) {
         return null;
       }
@@ -16181,52 +16421,11 @@ const AngularWorkflow = (defaultprops) => {
         workflow.triggers[selectedTriggerIndex].parameters.length > 2
           ? workflow.triggers[selectedTriggerIndex].parameters[2].value
           : "";
-    } else if (
-      selectedTrigger.trigger_type === "USERINPUT"
-    ) {
-      if (
-        workflow.triggers[selectedTriggerIndex].parameters === undefined ||
-        workflow.triggers[selectedTriggerIndex].parameters === null ||
-        workflow?.triggers[selectedTriggerIndex]?.parameters?.length === 0
-      ) {
-        workflow.triggers[selectedTriggerIndex].parameters = [];
-        workflow.triggers[selectedTriggerIndex].parameters[0] = {
-          name: "alertinfo",
-          value: "Do you want to continue the workflow? Start parameters: $exec",
-        };
-
-        // boolean,
-        workflow.triggers[selectedTriggerIndex].parameters[1] = {
-          name: "options",
-          value: "boolean",
-        };
-
-        // email,sms,app ...
-        workflow.triggers[selectedTriggerIndex].parameters[2] = {
-          name: "type",
-          value: "subflow",
-        };
-
-        workflow.triggers[selectedTriggerIndex].parameters[3] = {
-          name: "email",
-          value: "test@test.com",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[4] = {
-          name: "sms",
-          value: "0000000",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[5] = {
-          name: "subflow",
-          value: "",
-        };
-
-        setWorkflow(workflow);
-      }
     }
   }
 
   const WebhookSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || workflow?.triggers[selectedTriggerIndex] === undefined || selectedTrigger?.trigger_type !== "WEBHOOK" ? null :
-    <div style={appApiViewStyle}>
+    <div style={{...appApiViewStyle, overflow: 'hidden'}}>
       <h3 style={{ marginBottom: "5px" }}>
         {selectedTrigger.app_name}: {selectedTrigger.status}
       </h3>
@@ -16234,7 +16433,7 @@ const AngularWorkflow = (defaultprops) => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://shuffler.io/docs/triggers#webhook"
-        style={{ textDecoration: "none", color: "#FF8544" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor }}
       >
         What are webhooks?
       </a>
@@ -16256,6 +16455,7 @@ const AngularWorkflow = (defaultprops) => {
         fullWidth
         color="primary"
         placeholder={selectedTrigger.label}
+        defaultValue={selectedTrigger?.label}
         onChange={selectedTriggerChange}
 		disabled={selectedTrigger?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0}
       />
@@ -16269,7 +16469,7 @@ const AngularWorkflow = (defaultprops) => {
             ListboxProps={{
               style: {
                 backgroundColor: theme.palette.inputColor,
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             sx={{
@@ -16431,7 +16631,7 @@ const AngularWorkflow = (defaultprops) => {
             }}
             style={{
               backgroundColor: theme.palette.inputColor,
-              color: "white",
+              color: theme.palette.text.primary,
               height: 50,
             }}
           >
@@ -16443,7 +16643,7 @@ const AngularWorkflow = (defaultprops) => {
               return (
                 <MenuItem
                   key={data}
-                  style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                  style={{ backgroundColor: theme.palette.inputColor, color: theme.palette.text.primary }}
                   value={data}
                 >
                   {data}
@@ -16503,7 +16703,7 @@ const AngularWorkflow = (defaultprops) => {
                   ].parameters[0].value.includes("127.0.0.1")) ? (
 
                 <span
-                  style={{ color: "white", marginBottom: 5, marginleft: 5 }}
+                  style={{ color: theme.palette.text.primary, marginBottom: 5, marginleft: 5 }}
                 >
                   PS: This does NOT work with localhost. Use your local IP
                   instead.
@@ -16618,13 +16818,15 @@ const AngularWorkflow = (defaultprops) => {
           <div>
             <TextField
               style={{
-                backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette?.borderRadius,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                borderRadius: theme.palette?.textFieldStyle.borderRadius,
               }}
               id="webhook_uri_header"
               onClick={() => { }}
               InputProps={{
                 style: {
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
                 },
               }}
               fullWidth
@@ -16671,13 +16873,15 @@ const AngularWorkflow = (defaultprops) => {
           <div style={{ marginBottom: 20, }}>
             <TextField
               style={{
-                backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette?.borderRadius,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                borderRadius: theme.palette?.textFieldStyle.borderRadius,
               }}
               id="webhook_uri_header"
               onClick={() => { }}
               InputProps={{
                 style: {
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
                 },
               }}
               fullWidth
@@ -16733,7 +16937,7 @@ const AngularWorkflow = (defaultprops) => {
                     value="await_response"
                   />
                 }
-                label={<div style={{ color: "white" }}>Wait For Response</div>}
+                label={<div style={{ color: theme.palette.text.primary }}>Wait For Response</div>}
               />
             </FormGroup>
             : null}
@@ -16994,7 +17198,7 @@ const AngularWorkflow = (defaultprops) => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://shuffler.io/docs/triggers#user_input"
-        style={{ textDecoration: "none", color: "#FF8544" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor }}
       >
         What is the user input trigger?
       </a>
@@ -17010,16 +17214,19 @@ const AngularWorkflow = (defaultprops) => {
       <div>Name</div>
       <TextField
         style={{
-          backgroundColor: theme.palette.inputColor,
-          borderRadius: theme.palette?.borderRadius,
+          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+          borderRadius: theme.palette?.textFieldStyle.borderRadius,
         }}
         InputProps={{
           style: {
+            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+            color: theme.palette.textFieldStyle.color,
           },
         }}
         fullWidth
         color="primary"
         placeholder={selectedTrigger.label}
+        defaultValue={selectedTrigger?.label}
         onChange={selectedTriggerChange}
 		disabled={selectedTrigger?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0}
       />
@@ -17033,7 +17240,7 @@ const AngularWorkflow = (defaultprops) => {
               }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                   marginLeft: "5px",
                   maxWidth: "95%",
                   height: 50,
@@ -17072,7 +17279,7 @@ const AngularWorkflow = (defaultprops) => {
             >
               <OpenInFullIcon
                 style={{
-                  color: "rgba(255,255,255,0.7)",
+                  color: theme.palette.textColor,
                   height: 20,
                   width: 20
                 }}
@@ -17087,11 +17294,13 @@ const AngularWorkflow = (defaultprops) => {
         <TextField
           id="userinput_info_field"
           style={{
-            backgroundColor: theme.palette.inputColor,
-            borderRadius: theme.palette?.borderRadius,
+            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+            borderRadius: theme.palette?.textFieldStyle.borderRadius,
           }}
           InputProps={{
             style: {
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+              color: theme.palette.textFieldStyle.color,
             },
             endAdornment: (
               <InputAdornment position="end">
@@ -17114,14 +17323,11 @@ const AngularWorkflow = (defaultprops) => {
           fullWidth
           rows="4"
           multiline
-          value={selectedTriggerValue}
-          onChange={(e) => {  
-            setLastSaved(false)
-            setSelectedTriggerValue(e.target.value)
-          }}
+          defaultValue={selectedTrigger.parameters[0]?.value}
           color="primary"
           placeholder=""
           onBlur={(e) => {
+            setLastSaved(false)
             setTriggerTextInformationWrapper(e.target.value);
           }}
         />
@@ -17135,7 +17341,7 @@ const AngularWorkflow = (defaultprops) => {
               open={!!menuPosition}
               style={{
                 border: `2px solid #FF8544`,
-                color: "white",
+                color: theme.palette.text.primary,
                 marginTop: 2,
               }}
             >
@@ -17251,7 +17457,7 @@ const AngularWorkflow = (defaultprops) => {
                       parentMenuOpen={!!menuPosition}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minWidth: 250,
                       }}
                       onClick={() => {
@@ -17274,7 +17480,7 @@ const AngularWorkflow = (defaultprops) => {
                             key={pathdata.name}
                             style={{
                               backgroundColor: theme.palette.inputColor,
-                              color: "white",
+                              color: theme.palette.text.primary,
                               minWidth: 250,
                             }}
                             value={pathdata}
@@ -17307,7 +17513,7 @@ const AngularWorkflow = (defaultprops) => {
                       }
                       parentMenuOpen={!!menuPosition}
                       style={{
-                        color: "white",
+                        color: theme.palette.text.primary,
                         minWidth: 250,
                         maxWidth: 250,
                         maxHeight: 50,
@@ -17325,7 +17531,7 @@ const AngularWorkflow = (defaultprops) => {
                           style={{
                             // backgroundColor: theme.palette.inputColor,
                             marginLeft: 15,
-                            color: "white",
+                            color: theme.palette.text.primary,
                             minWidth: 250,
                             maxWidth: 250,
                             padding: 0,
@@ -17368,7 +17574,7 @@ const AngularWorkflow = (defaultprops) => {
                               key={pathdata.name}
                               style={{
                                 // backgroundColor: theme.palette.inputColor,
-                                color: "white",
+                                color: theme.palette.text.primary,
                                 minWidth: 250,
                                 maxWidth: 250,
                                 padding: boxPadding,
@@ -17409,7 +17615,7 @@ const AngularWorkflow = (defaultprops) => {
                     key={innerdata.name}
                     style={{
                       // backgroundColor: theme.palette.inputColor,
-                      color: "white",
+                      color: theme.palette.text.primary,
                     }}
                     value={innerdata}
                     onMouseOver={() => handleMouseover()}
@@ -17463,7 +17669,7 @@ const AngularWorkflow = (defaultprops) => {
                 value="subflow"
               />
             }
-            label={<div style={{ color: "white" }}>Subflow</div>}
+            label={<div style={{ color: theme.palette.text.primary }}>Subflow</div>}
           />
           <FormControlLabel
             control={
@@ -17479,7 +17685,7 @@ const AngularWorkflow = (defaultprops) => {
                 value="email"
               />
             }
-            label={<div style={{ color: "white" }}>Email</div>}
+            label={<div style={{ color: theme.palette.text.primary }}>Email</div>}
           />
           <FormControlLabel
             control={
@@ -17494,7 +17700,7 @@ const AngularWorkflow = (defaultprops) => {
                 disabled={true}
               />
             }
-            label={<div style={{ color: "white" }}>SMS</div>}
+            label={<div style={{ color: theme.palette.text.primary }}>SMS</div>}
           />
         </FormGroup>
         {workflow?.triggers &&
@@ -17516,7 +17722,7 @@ const AngularWorkflow = (defaultprops) => {
                   ListboxProps={{
                     style: {
                       backgroundColor: theme.palette.inputColor,
-                      color: "white",
+                      color: theme.palette.text.primary,
                     },
                   }}
 				  sx={{
@@ -17572,7 +17778,7 @@ const AngularWorkflow = (defaultprops) => {
                       }>
                         <MenuItem
                           style={{
-                            color: data.id === workflow.id ? "red" : "white",
+                            color: data.id === workflow.id ? "red" : theme.palette.text.primary,
                           }}
                           value={data}
                           onClick={() => {
@@ -17657,13 +17863,14 @@ const AngularWorkflow = (defaultprops) => {
           ? (
             <TextField
               style={{
-                backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette?.borderRadius,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                borderRadius: theme.palette?.textFieldStyle.borderRadius,
                 marginTop: 10,
               }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.textFieldStyle.color,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                   fontSize: "1em",
                 },
               }}
@@ -17798,7 +18005,7 @@ const AngularWorkflow = (defaultprops) => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://shuffler.io/docs/triggers#pipelines"
-        style={{ textDecoration: "none", color: "#FF8544" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor}}
       >
         What are pipelines?
       </a>
@@ -17845,7 +18052,7 @@ const AngularWorkflow = (defaultprops) => {
           }}
           style={{
             backgroundColor: theme.palette.inputColor,
-            color: "white",
+            color: theme.palette.text.primary,
             height: 50,
           }}
         >
@@ -17863,7 +18070,7 @@ const AngularWorkflow = (defaultprops) => {
                 key={data.id}
                 style={{
                   backgroundColor: theme.palette.inputColor,
-                  color: "white",
+                  color: theme.palette.text.primary,
                 }}
                 value={data.Name}
               >
@@ -18060,7 +18267,7 @@ const AngularWorkflow = (defaultprops) => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://shuffler.io/docs/triggers#schedule"
-        style={{ textDecoration: "none", color: "#FF8544" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor }}
       >
         What are schedules?
       </a>
@@ -18076,16 +18283,19 @@ const AngularWorkflow = (defaultprops) => {
       <div>Name</div>
       <TextField
         style={{
-          backgroundColor: theme.palette.inputColor,
-          borderRadius: theme.palette?.borderRadius,
+          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+          borderRadius: theme.palette?.textFieldStyle.borderRadius,
         }}
         InputProps={{
           style: {
+            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+            color: theme.palette.textFieldStyle.color,
           },
         }}
         fullWidth
         color="primary"
         placeholder={selectedTrigger.label}
+        defaultValue={selectedTrigger?.label}
         onChange={selectedTriggerChange}
 		disabled={selectedTrigger?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0}
       />
@@ -18104,9 +18314,9 @@ const AngularWorkflow = (defaultprops) => {
           fullWidth
           onChange={(e) => {
             selectedTrigger.environment = e.target.value;
-            setSelectedTrigger(selectedTrigger);
             if (e.target.value === "cloud") {
               console.log("Set cloud config");
+              selectedTrigger.parameters[0].value = "*/25 * * * *";
               workflow.triggers[selectedTriggerIndex].parameters[0].value =
                 "*/25 * * * *";
             } else {
@@ -18115,13 +18325,13 @@ const AngularWorkflow = (defaultprops) => {
               workflow.triggers[selectedTriggerIndex].parameters[0].value =
                 "60";
             }
-
+            setSelectedTrigger(selectedTrigger);
             setWorkflow(workflow);
             setUpdate(Math.random());
           }}
           style={{
-            backgroundColor: theme.palette.inputColor,
-            color: "white",
+            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+            color: theme.palette.textFieldStyle.color,
             height: 50,
           }}
         >
@@ -18133,7 +18343,7 @@ const AngularWorkflow = (defaultprops) => {
             return (
               <MenuItem
                 key={data}
-                style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.textFieldStyle.color}}
                 value={data}
               >
                 {data}
@@ -18170,16 +18380,18 @@ const AngularWorkflow = (defaultprops) => {
               }}
             />
             <div style={{ flex: "10" }}>
-              <b>When to start: {isCloud || selectedTrigger?.environment === "cloud" ? <a href="https://crontab.guru" target="_blank" style={{ color: "#FF8544", }}>Cron formatting</a> : "every X second"}</b>
+              <b>When to start: {isCloud || selectedTrigger?.environment === "cloud" ? <a href="https://crontab.guru" target="_blank" style={{ color: theme.palette.linkColor, }}>Cron formatting</a> : "every X second"}</b>
             </div>
           </div>
           <TextField
             style={{
-              backgroundColor: theme.palette.inputColor,
-              borderRadius: theme.palette?.borderRadius,
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+              borderRadius: theme.palette?.textFieldStyle.borderRadius,
             }}
             InputProps={{
               style: {
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                color: theme.palette.textFieldStyle.color,
               },
             }}
             fullWidth
@@ -18227,11 +18439,13 @@ const AngularWorkflow = (defaultprops) => {
           </div>
           <TextField
             style={{
-              backgroundColor: theme.palette.inputColor,
-              borderRadius: theme.palette?.borderRadius,
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+              borderRadius: theme.palette?.textFieldStyle.borderRadius,
             }}
             InputProps={{
               style: {
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                color: theme.palette.textFieldStyle.color,
               },
             }}
             disabled={
@@ -18441,7 +18655,7 @@ const AngularWorkflow = (defaultprops) => {
                           if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
                             toast(responseJson.reason);
                           } else {
-                            toast("Failed changing org. Try again or contact support@shuffler.io if this persists.");
+                            toast(`Failed changing org. Try again or contact ${supportEmail} if this persists.`);
                           }
                         }
                       })
@@ -18506,7 +18720,7 @@ const AngularWorkflow = (defaultprops) => {
 			:
 
 			<Tooltip title={lastSaved === false && originalWorkflow.id === workflow.id ? 
-				<Typography variant="body1" style={{margin: 10, color: "white", }}>
+				<Typography variant="body1" style={{margin: 10, color: theme.palette.text.primary, }}>
 					Save the workflow first 
 				</Typography>
 				: null} arrow placement="right">
@@ -18515,7 +18729,7 @@ const AngularWorkflow = (defaultprops) => {
 
             	  <InputLabel
             	    id="suborg-changer"
-            	    style={{ color: "rgba(255,255,255,0.7)", }}
+            	    style={{ color: theme.palette.textColor, }}
             	  >
             	    Select an Org ({originalWorkflow?.suborg_distribution?.length})
             	  </InputLabel>
@@ -18523,7 +18737,7 @@ const AngularWorkflow = (defaultprops) => {
             	    style={{
             	      pointerEvents: "auto",
             	      backgroundColor: theme.palette.inputColor,
-            	      color: "white",
+            	      color: theme.palette.text.primary,
             	      maxWidth: 300,
             	      minWidth: 300,
             	      borderRadius: theme.palette?.borderRadius,
@@ -18880,7 +19094,7 @@ const AngularWorkflow = (defaultprops) => {
 
           	  <InputLabel
           	    id="execution_location"
-          	    style={{ color: "rgba(255,255,255,0.7)", marginLeft: 40, }}
+          	    style={{ color: theme.palette.text.primary, marginLeft: 40, }}
           	  >
           	    Runtime Location
           	  </InputLabel>
@@ -18888,6 +19102,12 @@ const AngularWorkflow = (defaultprops) => {
           	    labelId="execution_location"
 				disabled={savingState !== 0}
           	    MenuProps={{
+                PaperProps: {
+                  sx: {
+                    '& .MuiList-root': {
+                      backgroundColor: "transparent",
+                    },
+                  }}
           	    }}
           	    value={
           	      selectedActionEnvironment === undefined || selectedActionEnvironment === null || selectedActionEnvironment.Name === undefined || selectedActionEnvironment.Name === null ? isCloud ? "Cloud" : "Shuffle" : selectedActionEnvironment.Name
@@ -18920,13 +19140,13 @@ const AngularWorkflow = (defaultprops) => {
           	    }}
           	    style={{
           	      pointerEvents: "auto",
-          	      color: "white",
+          	      color: theme.palette.text.primary,
           	      maxWidth: 250,
           	      minWidth: 250,
           	      borderRadius: theme.palette?.borderRadius,
           	      marginLeft: 35,
 
-          	      backgroundColor: theme.palette.inputColor,
+          	      backgroundColor: "transparent",
           	      height: 40,
           	    }}
           	  >
@@ -18940,9 +19160,9 @@ const AngularWorkflow = (defaultprops) => {
           	      return (
           	        <MenuItem
           	          key={data.Name}
-          	          style={{
-          	            backgroundColor: theme.palette.inputColor,
-          	            color: "white",
+          	          sx={{
+          	            backgroundColor:"transparent",
+          	            color: theme.palette.text.primary,
           	          }}
           	          value={data.Name}
           	        >
@@ -18987,7 +19207,7 @@ const AngularWorkflow = (defaultprops) => {
 
           	          {data.default === true ?
           	            <Chip
-          	              style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", }}
+          	              style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", color: theme.palette.text.primary, border: theme.palette.textFieldStyle.border}}
           	              label={"Default"}
           	              variant="outlined"
           	              color="secondary"
@@ -19059,20 +19279,20 @@ const AngularWorkflow = (defaultprops) => {
           }}
         >
           <div
-            style={{ margin: 15, color: "white", maxWidth: 250, minWidth: 250 }}
+            style={{ margin: 15, color: theme.palette.text.primary, maxWidth: 250, minWidth: 250 }}
           >
             <h4>This menu is used to control the workflow itself.</h4>
             <Divider
               style={{
-                backgroundColor: "white",
+                backgroundColor: theme.palette.text.primary,
                 marginTop: 10,
                 marginBottom: 10,
               }}
             />
 
             <FormControlLabel
-              style={{ marginBottom: 15, color: "white" }}
-              label={<div style={{ color: "white" }}>Skip Notifications</div>}
+              style={{ marginBottom: 15, color: theme.palette.text.primary }}
+              label={<div style={{ color: theme.palette.text.primary }}>Skip Notifications</div>}
               control={
                 <Switch
                   checked={workflow.configuration.skip_notifications}
@@ -19091,8 +19311,8 @@ const AngularWorkflow = (defaultprops) => {
               }
             />
             <FormControlLabel
-              style={{ marginBottom: 15, color: "white" }}
-              label={<div style={{ color: "white" }}>Exit on Error</div>}
+              style={{ marginBottom: 15, color: theme.palette.text.primary }}
+              label={<div style={{ color: theme.palette.text.primary }}>Exit on Error</div>}
               control={
                 <Switch
                   checked={workflow.configuration.exit_on_error}
@@ -19110,8 +19330,8 @@ const AngularWorkflow = (defaultprops) => {
               }
             />
             <FormControlLabel
-              style={{ marginBottom: 15, color: "white" }}
-              label={<div style={{ color: "white" }}>Start from top</div>}
+              style={{ marginBottom: 15, color: theme.palette.text.primary }}
+              label={<div style={{ color: theme.palette.text.primary }}>Start from top</div>}
               control={
                 <Switch
                   checked={workflow.configuration.start_from_top}
@@ -19314,12 +19534,12 @@ const AngularWorkflow = (defaultprops) => {
   const shownErrors = !isMobile && workflow.errors !== undefined && workflow.errors !== null && workflow.errors.length > 0 && showErrors && (!workflow.public || userdata.support === true) ?
     <div
       style={{
-        border: "1px solid rgba(255,255,255,0.1)",
+        border: theme.palette.DialogStyle.border,
         position: "absolute",
         bottom: 100,
         left: leftSideBarOpenByClick ? leftBarSize + 270 : leftBarSize + 115,
 
-        color: "white",
+        color: theme.palette.DialogStyle.color,
         padding: 10,
         borderRadius: theme.palette?.borderRadius,
         transition: "left 0.3s ease, top 0.3s ease",
@@ -19332,6 +19552,11 @@ const AngularWorkflow = (defaultprops) => {
       >
         <IconButton
           style={{ position: "absolute", top: 0, right: 0 }}
+          sx={{
+            "&:hover": {
+              backgroundColor: theme.palette.hoverColor,
+            },
+          }}
           onClick={(e) => {
             e.preventDefault();
 
@@ -19339,17 +19564,17 @@ const AngularWorkflow = (defaultprops) => {
             setShowErrors(false)
           }}
         >
-          <CloseIcon style={{ color: "white" }} />
+          <CloseIcon style={{ color: theme.palette.text.primary }} />
         </IconButton>
       </Tooltip>
 
-      <Typography variant="body2" color="textSecondary">
+      <Typography variant="body2" color={theme.palette.textColor}>
         {/*<WarningIcon style={{marginRight: 5, height: 15, width: 15, }} />*/}
         <b>{workflow.errors.length} Workflow Issue{workflow.errors.length > 1 ? "s" : ""}</b>
       </Typography>
       <Typography
         variant="body2"
-        color="textSecondary"
+        color={theme.palette.textColor}
       >
         {workflow.errors.slice(0, 3).map((error, index) => {
           // Loop through each word, and if it matches "Action <name> " then replace it with a link to the action
@@ -19706,6 +19931,7 @@ const AngularWorkflow = (defaultprops) => {
 			  height: boxSize, 
 			  width: boxSize + 5, 
 			  backgroundColor: green, 
+        color: theme.palette.text.primary,
 		  }}
           color="primary"
           variant="contained"
@@ -19801,7 +20027,7 @@ const AngularWorkflow = (defaultprops) => {
             style={{
               marginLeft: 25,
               marginTop: 2,
-              border: "1px solid rgba(255,255,255,0.3)",
+              border: theme.palette.DialogStyle.border,
               borderRadius: theme.palette?.borderRadius / 2,
 
               maxHeight: buttonHeights,
@@ -19816,6 +20042,10 @@ const AngularWorkflow = (defaultprops) => {
                   style={{
                     height: buttonHeights,
                     width: 64,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 0, 
                   }}
                   variant={
                     lastSaved && !workflow.public ? "text" : "contained"
@@ -19855,7 +20085,7 @@ const AngularWorkflow = (defaultprops) => {
                   }}
                 >
                   {savingState === 2 ? (
-                    <CircularProgress style={{ height: 35, width: 35 }} />
+                    <CircularProgress size={24} thickness={4} variant="indeterminate" />
                   ) : savingState === 1 ? (
                     <DoneIcon style={{ color: green }} />
                   ) : (
@@ -20359,7 +20589,7 @@ const AngularWorkflow = (defaultprops) => {
               return (
                 <Chip
                   key={index}
-                  style={{ backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white", }}
+                  style={{ backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: theme.palette.text.primary, }}
                   label={tag}
                   variant="outlined"
                   color="primary"
@@ -20379,7 +20609,7 @@ const AngularWorkflow = (defaultprops) => {
           <Typography variant="body1">
             <a
               href={workflow.blogpost}
-              style={{ textDecoration: "none", color: "#f86a3e" }}
+              style={{ textDecoration: "none", color: theme.palette.linkColor}}
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -20647,10 +20877,10 @@ const AngularWorkflow = (defaultprops) => {
     minWidth: "95%",
     maxWidth: "95%",
     marginTop: 5,
-    color: "white",
+    color: theme.palette.text.primary,
     marginBottom: 10,
     padding: 5,
-    backgroundColor: theme.palette.backgroundColor,
+    backgroundColor: theme.palette.platformColor,
     borderRadius: theme.palette.borderRadius,
     cursor: "pointer",
     display: "flex",
@@ -20682,6 +20912,7 @@ const AngularWorkflow = (defaultprops) => {
               height: 30,
               paddingLeft: 0,
               width: 30,
+              color: theme.palette.text.primary,
             }}
             onClick={() => {
               if (validate.valid) {
@@ -20715,7 +20946,7 @@ const AngularWorkflow = (defaultprops) => {
               placement="top"
               style={{ zIndex: 10011 }}
             >
-              <ArrowLeftIcon style={{ color: "white" }} />
+              <ArrowLeftIcon sx={{color: theme.palette.text.primary}} />
             </Tooltip>
           </IconButton>
           <ReactJson
@@ -20907,127 +21138,6 @@ const AngularWorkflow = (defaultprops) => {
     );
   };
 
-  const handleReactJsonClipboard = (copy) => {
-
-    const elementName = "copy_element_shuffle";
-    var copyText = document.getElementById(elementName);
-    if (copyText !== null && copyText !== undefined) {
-      if (
-        copy.namespace !== undefined &&
-        copy.name !== undefined &&
-        copy.src !== undefined
-      ) {
-        copy = copy.src;
-      }
-
-      const clipboard = navigator.clipboard;
-      if (clipboard === undefined) {
-        toast("Can only copy over HTTPS (port 3443)");
-        return;
-      }
-
-      var stringified = JSON.stringify(copy);
-      if (stringified.startsWith('"') && stringified.endsWith('"')) {
-        stringified = stringified.substring(1, stringified.length - 1);
-      }
-
-      navigator.clipboard.writeText(stringified);
-      copyText.select();
-      copyText.setSelectionRange(0, 99999); /* For mobile devices */
-
-      /* Copy the text inside the text field */
-      document.execCommand("copy");
-
-      console.log("COPYING!");
-      toast("Copied value to clipboard, NOT json path.")
-    } else {
-      console.log("Failed to copy from " + elementName + ": ", copyText);
-    }
-  };
-
-  const HandleJsonCopy = (base, copy, base_node_name) => {
-    if (typeof copy.name === "string") {
-      copy.name = copy.name.replaceAll(" ", "_");
-    }
-
-    //lol
-    if (typeof base === 'object' || typeof base === 'dict') {
-      base = JSON.stringify(base)
-    }
-
-    if (base_node_name === "execution_argument" || base_node_name === "Runtime Argument") {
-      base_node_name = "exec"
-    }
-
-    //console.log("COPY: ", base_node_name, copy);
-
-    //var newitem = JSON.parse(base);
-    var newitem = validateJson(base).result
-
-    // Check if base_node_name has changed
-    if (cy !== undefined && cy !== null) {
-      //console.log("Change name?")
-      //const allNodes = cy.nodes().jsons();
-      //for (var key in allNodes) {
-      //const currentNode = allNodes[key];
-
-      //if (currentNode.
-      //}
-
-      //const nodedata = cy.getElementById(data.action.id).data();
-      //base_node_name = 
-    }
-
-    to_be_copied = "$" + base_node_name.toLowerCase().replaceAll(" ", "_");
-    for (let copykey in copy.namespace) {
-      if (copy.namespace[copykey].includes("Results for")) {
-        continue;
-      }
-
-      if (newitem !== undefined && newitem !== null) {
-        newitem = newitem[copy.namespace[copykey]];
-        if (!isNaN(copy.namespace[copykey])) {
-          to_be_copied += ".#";
-        } else {
-          to_be_copied += "." + copy.namespace[copykey];
-        }
-      }
-    }
-
-    if (newitem !== undefined && newitem !== null) {
-      newitem = newitem[copy.name];
-      if (!isNaN(copy.name)) {
-        to_be_copied += ".#";
-      } else {
-        to_be_copied += "." + copy.name;
-      }
-    }
-
-    to_be_copied = to_be_copied.replaceAll(" ", "_");
-	console.log("COPY: ", to_be_copied);
-    const elementName = "copy_element_shuffle";
-    var copyText = document.getElementById(elementName);
-    if (copyText !== null && copyText !== undefined) {
-      //console.log("NAVIGATOR: ", navigator);
-      const clipboard = navigator.clipboard;
-      if (clipboard === undefined) {
-        toast("Can only copy over HTTPS (port 3443)");
-        return;
-      }
-
-      navigator.clipboard.writeText(to_be_copied);
-      copyText.select();
-      copyText.setSelectionRange(0, 99999); /* For mobile devices */
-
-      /* Copy the text inside the text field */
-      document.execCommand("copy");
-      //console.log("COPYING!");
-      toast("Copied JSON path to clipboard.")
-    } else {
-      console.log("Couldn't find element ", elementName);
-    }
-  }
-
   // Not used because of issue with state updates.
   const ShowReactJsonField = (props) => {
     const { validate, jsonValue, collapsed, label, autocomplete } = props
@@ -21245,12 +21355,12 @@ const AngularWorkflow = (defaultprops) => {
           overflow: "auto",
           minWidth: isMobile ? "100%" : 490,
           maxWidth: isMobile ? "100%" : 490,
-          color: "white",
+          color: theme.palette.text.primary,
           fontSize: 18,
           borderLeft: theme.palette.defaultBorder,
 
           borderRadius: theme.palette.borderRadius,
-          backgroundColor: "black",
+          backgroundColor: themeMode === "dark" ? "black" : theme.palette.drawer.backgroundColor,
         },
       }}
     >
@@ -21267,19 +21377,19 @@ const AngularWorkflow = (defaultprops) => {
               setExecutionModalOpen(false)
             }}
           >
-            <CloseIcon style={{ color: "white" }} />
+            <CloseIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
         : null}
       {executionModalView === 0 ? (
-        <div style={{ padding: isMobile ? "0px 0px 0px 10px" : 25, zIndex: 12502, }}>
+        <div style={{ padding: isMobile ? "0px 0px 0px 10px" : 25, zIndex: 12502,  backgroundColor: theme.palette.drawer.backgroundColor,  height: "100%", }}>
           <div style={{ display: "flex", }}>
             <Breadcrumbs
               aria-label="breadcrumb"
               separator="›"
-              style={{ color: "white", fontSize: 16 }}
+              style={{ color: theme.palette.text.primary, fontSize: 16, textWrap: "nowrap" }}
             >
-              <h2 style={{ color: "rgba(255,255,255,0.5)" }}>
+              <h2 style={{ color: theme.palette.text.primary}}>
                 <DirectionsRunIcon style={{ marginRight: 0, }} />
                 All Workflow Runs
               </h2>
@@ -21294,13 +21404,13 @@ const AngularWorkflow = (defaultprops) => {
                   color="secondary"
                   style={{ marginLeft: 125, maxHeight: 30, marginTop: 20, }}
                 >
-                  <QueryStatsIcon style={{ color: "white", }} />
+                  <QueryStatsIcon style={{ color: theme.palette.text.primary, }} />
                 </Button>
               </a>
             </Tooltip>
           </div>
 		  <Button
-		    style={{ borderRadius: theme.palette?.borderRadius, }}
+		    style={{ borderRadius: 8, }}
 		    variant="outlined"
 		    fullWidth
 		    onClick={() => {
@@ -21314,7 +21424,7 @@ const AngularWorkflow = (defaultprops) => {
           <ButtonGroup
             fullWidth
             style={{ marginTop: 5, maxHeight: 50, overflow: "hidden", }}>
-		>
+		
             <Button
               color="secondary"
               variant={executionFilter === "ALL" ? "contained" : "outlined"}
@@ -21517,7 +21627,7 @@ const AngularWorkflow = (defaultprops) => {
                                 style={{
                                   height: "100%",
                                   width: 40,
-                                  borderColor: "white",
+                                  borderColor: theme.palette.text.primary,
                                   marginRight: 15,
                                 }}
                               >
@@ -21530,7 +21640,7 @@ const AngularWorkflow = (defaultprops) => {
                                 marginBottom: "auto",
                                 marginRight: 15,
                                 fontSize: 13,
-                                color: "rgba(255,255,255,0.8)",
+                                color: theme.palette.text.primary,
                               }}
                             >
                               {timestamp}
@@ -21547,10 +21657,10 @@ const AngularWorkflow = (defaultprops) => {
                                     marginLeft: 10,
                                     marginTop: "auto",
                                     marginBottom: "auto",
-									color: "rgba(255,255,255,0.5)",
+									                  color: theme.palette.text.primary,
                                   }}
                                 >
-                                  {successActions} <span style={{ color: "rgba(255,255,255,0.4)" }}>+</span> {skippedActions > 0 ? skippedActions : <span style={{ color: "rgba(255,255,255,0.4)" }}>{skippedActions}</span>} <span style={{ color: "rgba(255,255,255,0.4)" }}>=</span> {calculatedResult}
+                                  {successActions} <span style={{ color: theme.palette.text.primary }}>+</span> {skippedActions > 0 ? skippedActions : <span style={{ color: theme.palette.text.primary}}>{skippedActions}</span>} <span style={{ color: theme.palette.text.primary }}>=</span> {calculatedResult}
                                 </div>
                               </Tooltip>
                             ) : null}
@@ -21559,7 +21669,7 @@ const AngularWorkflow = (defaultprops) => {
                           {foundnotifications > 0 ?
                             <Tooltip title={"This workflow created " + foundnotifications + " notification(s)"} placement="top">
                               <ErrorOutlineIcon
-                                style={{ color: "rgba(255,255,255,0.4)", marginTop: 10, marginRight: 10, }}
+                                style={{ color: theme.palette.text.primary, marginTop: 10, marginRight: 10, }}
                                 onClick={(e) => {
                                   e.preventDefault()
                                   e.stopPropagation()
@@ -21593,19 +21703,24 @@ const AngularWorkflow = (defaultprops) => {
             </div>
           ) : (
             <Fade in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>
-              <div style={{ marginTop: 100, }}>
-                <Typography variant="body1" color="textSecondary">
+              <div style={{ marginTop: 100, marginBottom: 0 }}>
+                <Typography variant="body1" color="textSecondary" style={{textAlign: "center", }}>
                   No executions found for the '{executionFilter}' filter.
                 </Typography>
 
                 <Button
                   fullWidth
                   variant="outlined"
-                  style={{
-                    marginTop: 20,
+                  sx={{
+                    marginTop: 1,
                     textTransform: "none",
                     border: `1px solid ${green}`,
                     color: green,
+                    "&:hover": {
+                      backgroundColor: `${green}20`,
+                      color: green,
+                      border: `1px solid ${green}`,
+                    },
                   }}
                   onClick={() => {
                     executeWorkflow(executionText, workflow.start, lastSaved);
@@ -21618,13 +21733,13 @@ const AngularWorkflow = (defaultprops) => {
           )}
         </div>
       ) : (
-        <div style={{ padding: isMobile ? "0px 10px 50px 10px" : "25px 15px 150px 15px", maxWidth: isMobile ? "100%" : "100%", overflowX: "hidden", }}>
+        <div style={{ backgroundColor: theme.palette.drawer.backgroundColor, padding: isMobile ? "0px 10px 50px 10px" : "25px 15px 150px 15px", maxWidth: isMobile ? "100%" : "100%", overflowX: "hidden", height: "100%"}}>
 
 
           <Breadcrumbs
             aria-label="breadcrumb"
             separator="›"
-            style={{ color: "white", fontSize: 16 }}
+            style={{ color: theme.palette.text.primary, fontSize: 16 }}
           >
             <span
               style={{ color: "rgba(255,255,255,0.5)", display: "flex" }}
@@ -21648,10 +21763,10 @@ const AngularWorkflow = (defaultprops) => {
                   stop()
                 }}
               >
-                <ArrowBackIcon style={{ color: "rgba(255,255,255,0.5)" }} />
+                <ArrowBackIcon style={{ color: theme.palette.text.primary }} />
               </IconButton>
                 <h2
-                  style={{ color: "rgba(255,255,255,0.5)", cursor: "pointer" }}
+                  style={{ color: theme.palette.text.primary, cursor: "pointer" }}
                   onClick={() => {
                     const newitem = removeParam("execution_id", cursearch);
                     navigate(curpath + newitem)
@@ -21665,12 +21780,12 @@ const AngularWorkflow = (defaultprops) => {
           </Breadcrumbs>
           <Divider
             style={{
-              backgroundColor: "rgba(255,255,255,0.6)",
+              backgroundColor: theme.palette.defaultBorder,
               marginTop: 10,
               marginBottom: 10,
             }}
           />
-          <div style={{ display: "flex", paddingLeft: 10, paddingRight: 10, position: "sticky", top: 0, zIndex: 12500, backgroundColor: theme.palette.platformColor, borderRadius: theme.palette.borderRadius, border: "2px solid rgba(255,255,255,0.3)", marginBottom: 10, }}>
+          <div style={{ display: "flex", paddingLeft: 10, paddingRight: 10, position: "sticky", top: 0, zIndex: 12500, backgroundColor: theme.palette.drawer.backgroundColor, borderRadius: theme.palette.borderRadius, border: "2px solid rgba(255,255,255,0.3)", marginBottom: 10, }}>
             <h2>Details</h2>
             <Tooltip
               color="primary"
@@ -21685,7 +21800,7 @@ const AngularWorkflow = (defaultprops) => {
               <span style={{}}>
                 <Button
                   color="primary"
-                  style={{ float: "right", marginTop: 20, marginLeft: 10 }}
+                  style={{ float: "right", marginTop: 20, marginLeft: 10, }}
                   onClick={() => {
                     const skip_popup = true
                     executeWorkflow(
@@ -21715,8 +21830,8 @@ const AngularWorkflow = (defaultprops) => {
             >
               <span style={{}}>
                 <Button
-                  color="primary"
-                  style={{ float: "right", marginTop: 20, marginLeft: 10 }}
+                color="primary"
+                  style={{ float: "right", marginTop: 20, }}
                   onClick={() => {
                     // Find current one in execution list
                     var nextindex = -1
@@ -21738,7 +21853,7 @@ const AngularWorkflow = (defaultprops) => {
                     changeExecution(data)
                   }}
                 >
-                  <ArrowBackIcon color="secondary" />
+                  <ArrowBackIcon />
                 </Button>
               </span>
             </Tooltip>
@@ -21752,7 +21867,7 @@ const AngularWorkflow = (defaultprops) => {
               <span style={{}}>
                 <Button
                   color="primary"
-                  style={{ float: "right", marginTop: 20, }}
+                  style={{ float: "right", marginTop: 20}}
                   onClick={() => {
                     // Find current one in execution list
                     var nextindex = -1
@@ -21774,7 +21889,7 @@ const AngularWorkflow = (defaultprops) => {
                     changeExecution(data)
                   }}
                 >
-                  <ArrowForwardIcon color="secondary" />
+                  <ArrowForwardIcon />
                 </Button>
               </span>
             </Tooltip>
@@ -21789,7 +21904,7 @@ const AngularWorkflow = (defaultprops) => {
                 <span style={{}}>
                   <Button
                     color="primary"
-                    style={{ float: "right", marginTop: 20, marginLeft: 10 }}
+                    style={{ float: "right", marginTop: 20, }}
                     onClick={() => {
                       abortExecution();
                     }}
@@ -21808,7 +21923,7 @@ const AngularWorkflow = (defaultprops) => {
                 <span style={{}}>
                   <Button
                     color={executionData.notifications_created === undefined || executionData.notifications_created === null || executionData.notifications_created === 0 ? "secondary" : "primary"}
-                    style={{ float: "right", marginTop: 20, marginLeft: 10 }}
+                    style={{ float: "right", marginTop: 20, }}
                     disabled={executionData.notifications_created === undefined || executionData.notifications_created === null || executionData.notifications_created === 0}
                   >
                     <ErrorOutlineIcon
@@ -21834,7 +21949,7 @@ const AngularWorkflow = (defaultprops) => {
                 <span style={{}}>
                   <Button
                     color="secondary"
-                    style={{ float: "right", marginTop: 20, marginLeft: 10 }}
+                    style={{ float: "right", marginTop: 20, }}
 
                     // Max 5 days in the past
                     disabled={userdata.region_url !== "https://shuffler.io" || executionData.started_at < (Math.floor(Date.now() / 1000) - 432000)}
@@ -21882,7 +21997,7 @@ const AngularWorkflow = (defaultprops) => {
                     rel="noopener noreferrer"
                     href={`/admin?tab=app_auth`}
                     target="_blank"
-                    style={{ textDecoration: "none", color: "#FF8544" }}
+                    style={{ textDecoration: "none", color: theme.palette.linkColor }}
                   >
                     Auth Group '{executionData.authgroup !== undefined && executionData.authgroup !== null && executionData.authgroup.length > 0 ? `${executionData.authgroup}` : null}'
                   </a>
@@ -21907,7 +22022,7 @@ const AngularWorkflow = (defaultprops) => {
                         rel="noopener noreferrer"
                         href={`/workflows/${executionData.execution_source}?view=executions&execution_id=${executionData.execution_parent}`}
                         target="_blank"
-                        style={{ textDecoration: "none", color: "#FF8544" }}
+                        style={{ textDecoration: "none", color: theme.palette.linkColor }}
                       >
                         Parent Workflow
                       </a>
@@ -21918,7 +22033,7 @@ const AngularWorkflow = (defaultprops) => {
                         rel="noopener noreferrer"
                         href={`/forms/${executionData.workflow.id}`}
                         target="_blank"
-                        style={{ textDecoration: "none", color: "#FF8544" }}
+                        style={{ textDecoration: "none", color: theme.palette.linkColor }}
                       >
                         Form
                       </a>
@@ -21955,6 +22070,7 @@ const AngularWorkflow = (defaultprops) => {
           ) : null}
 
           {executionData.workflow !== undefined && executionData.workflow !== null && executionData.workflow.actions !== undefined && executionData.workflow.actions !== null && executionData.workflow.actions.length > 0 ?
+
             <div style={{ display: "flex", marginLeft: 10, }}>
               <Typography variant="body1">
 
@@ -22004,7 +22120,7 @@ const AngularWorkflow = (defaultprops) => {
 
           <Divider
             style={{
-              backgroundColor: "rgba(255,255,255,0.6)",
+              backgroundColor: theme.palette.defaultBorder,
               marginTop: 15,
               marginBottom: 20,
             }}
@@ -22018,9 +22134,9 @@ const AngularWorkflow = (defaultprops) => {
                 result.status === "SKIPPED"
             ) ? (
             <FormControlLabel
-              style={{ color: "white", marginBottom: 10 }}
+              style={{ color: theme.palette.text.primary, marginBottom: 10 }}
               label={
-                <div style={{ color: "white" }}>
+                <div style={{ color: theme.palette.text.primary }}>
                   Show skipped actions
                 </div>
               }
@@ -22050,7 +22166,8 @@ const AngularWorkflow = (defaultprops) => {
 
                   {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
                     <Typography variant="body2" color="textSecondary" style={{}}>
-                      No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
+                      No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href={`mailto:${supportEmail}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>{supportEmail}</a>
+                      No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor}}>support@shuffler.io</a>
                     </Typography>
                     : null}
                 </div>
@@ -22067,7 +22184,7 @@ const AngularWorkflow = (defaultprops) => {
                 <CircularProgress style={{ marginLeft: 145, marginBottom: 10, }} />
                 {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
                   <Typography variant="body2" color="textSecondary" style={{}}>
-                    No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
+                    No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href={`mailto:${supportEmail}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>{supportEmail}</a>
                   </Typography>
                   :
                   null}
@@ -22303,7 +22420,7 @@ const AngularWorkflow = (defaultprops) => {
                           ? "1px solid rgba(255,255,255,0.3)"
                           : "1px solid rgba(255,255,255, 0.3)",
                       borderRadius: theme.palette?.borderRadius,
-                      backgroundColor: theme.palette.inputColor,
+                      backgroundColor: theme.palette.cardBackgroundColor,
                       padding: "15px 10px 10px 10px",
                       overflow: "hidden",
                     }}
@@ -22361,7 +22478,7 @@ const AngularWorkflow = (defaultprops) => {
                               setActiveDialog("result")
                               setCodeModalOpen(true);
                             } else {
-                              toast("Please wait until the workflow is loaded and try again")
+                              //toast("Please wait until the workflow is loaded and try again")
                               setCodeModalOpen(true)
                               setSelectedResult(data)
 
@@ -22379,7 +22496,7 @@ const AngularWorkflow = (defaultprops) => {
                             style={{ zIndex: 50000 }}
                           >
                             <ArrowLeftIcon style={{ 
-								color: relevant_errors.length > 0 ? yellow : "rgba(255,255,255,0.7)",
+								color: relevant_errors.length > 0 ? yellow : theme.palette.textColor,
 							}} />
                           </Tooltip>
                         </IconButton>
@@ -22402,6 +22519,28 @@ const AngularWorkflow = (defaultprops) => {
                           </div>
                         </div>
                       </div>
+
+					  {data.action.app_name === "AI Agent" || data.action.app_name === "Shuffle Agent" ? 
+                        <span
+                          style={{ flex: 10, float: "right", textAlign: "right" }}
+                        >
+						  <Tooltip title={"Explore Agent Timeline"}>
+							  <a
+								rel="noopener noreferrer"
+								href={`/agents?execution_id=${executionData.execution_id}&authorization=${executionData.authorization}&node_id=${data.action.id}`}
+								target="_blank"
+								style={{
+								  textDecoration: "none",
+								  color: theme.palette.linkColor,
+								}}
+								onClick={(event) => { }}
+							  >
+								<OpenInNewIcon />
+							  </a>
+						  </Tooltip>
+						</span>
+					  : null}
+
                       {data.action.app_name === "shuffle-subflow" &&
                         validate.result.success !== undefined &&
                         validate.result.success === true ? (
@@ -22432,7 +22571,7 @@ const AngularWorkflow = (defaultprops) => {
                                 target="_blank"
                                 style={{
                                   textDecoration: "none",
-                                  color: "#FF8544",
+                                  color: theme.palette.linkColor,
                                 }}
                                 onClick={(event) => { }}
                               >
@@ -22564,7 +22703,7 @@ const AngularWorkflow = (defaultprops) => {
 				<b>Action Logs</b>
 			  </Typography>
 			  <Typography variant="body2" style={{ whiteSpace: 'pre-line', }}>
-				More log details for this action are not available without <a style={{ color: "#FF8544", }} href="/admin?tab=locations" target="_blank" rel="noopener noreferrer">an onprem environment</a> with the <a style={{ color: "#FF8544", }} href="/docs/configuration#scaling-shuffle" target="_blank" rel="noopener noreferrer">SHUFFLE_LOGS_DISABLED</a> environment variable set to false: SHUFFLE_LOGS_DISABLED=false. Logs are enabled by default, except in scale mode.
+				More log details for this action are not available without <a style={{ color: theme.palette.linkColor, }} href="/admin?tab=locations" target="_blank" rel="noopener noreferrer">an onprem environment</a> with the <a style={{ color: theme.palette.linkColor, }} href="/docs/configuration#scaling-shuffle" target="_blank" rel="noopener noreferrer">SHUFFLE_LOGS_DISABLED</a> environment variable set to false: SHUFFLE_LOGS_DISABLED=false. Logs are enabled by default, except in scale mode.
 			  </Typography>
 			</div>
 		  )
@@ -22644,7 +22783,7 @@ const AngularWorkflow = (defaultprops) => {
               variant="body2"
               style={{
                 whiteSpace: 'pre-line',
-                color: showlink ? "#FF8544" : "white",
+                color: showlink ? "#FF8544" : theme.palette.text.primary,
                 cursor: showlink ? "pointer" : "default",
               }}
               onClick={(e) => {
@@ -22699,7 +22838,7 @@ const AngularWorkflow = (defaultprops) => {
     }
 
     if (result.status === 405) {
-      return "Method not allowed. Check the URL to ensure it has all the required parameters. If you keep getting a 405, please forward a screenshot of this to support@shuffler.io"
+      return `Method not allowed. Check the URL to ensure it has all the required parameters. If you keep getting a 405, please forward a screenshot of this to ${supportEmail}`
     }
 
     if (result.status === 415) {
@@ -22766,7 +22905,7 @@ const AngularWorkflow = (defaultprops) => {
     }
 
     if (stringjson.includes("kms/")) {
-      return "KMS authentication most likely failed. Check your notifications for more details on this page: /admin?admin_tab=notifications. If you need help with KMS, please contact support@shuffler.io"
+      return `KMS authentication most likely failed. Check your notifications for more details on this page: /admin?admin_tab=notifications. If you need help with KMS, please contact ${supportEmail}`
     }
 
     if (stringjson.includes("invalidurl")) {
@@ -22794,7 +22933,7 @@ const AngularWorkflow = (defaultprops) => {
 
     if (stringjson.includes("connectionerror")) {
       if (stringjson.includes("kms")) {
-        return "KMS authentication most likely failed (2). Check your notifications for more details on this page: /admin?admin_tab=notifications&kms=true. If you need help with KMS, please contact support@shuffler.io"
+        return `KMS authentication most likely failed (2). Check your notifications for more details on this page: /admin?admin_tab=notifications&kms=true. If you need help with KMS, please contact ${supportEmail}`
       }
 
       return "The URL is incorrect, or Shuffle can't reach it. Set up a Shuffle Environment in the same VLAN, or whitelist Shuffle's IPs."
@@ -22815,23 +22954,25 @@ const AngularWorkflow = (defaultprops) => {
       open={codeModalOpen}
       PaperProps={{
         onClick: () => setActiveDialog("result"),
-        style: {
+        sx: {
           pointerEvents: "auto",
-          color: "white",
-          minWidth: isMobile ? "90%" : 750,
-          padding: 30,
-          maxHeight: 550,
+          color: theme.palette.text.primary,
+          minWidth: isMobile ? "90%" : "750px",
+          maxHeight: "550px",
           overflowY: "auto",
           overflowX: "hidden",
           border: theme.palette.defaultBorder,
 
-          borderRadius: theme.palette.borderRadius,
-          backgroundColor: "black",
+          borderRadius: theme.palette.DialogStyle.borderRadius,
+          backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          '& .MuiDialogContent-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            padding: "30px 30px 30px 30px",
+          },
         },
       }}
     >
-      {/* Have a sticky top bar */}
-      <span id="top_bar" style={{ position: "sticky", top: -30, zIndex: 12000, }}>
+      <span id="top_bar" style={{ position: "sticky", top: -20, zIndex: 12000,}}>
         <Tooltip
           title="Suggest solution"
           placement="top"
@@ -22893,7 +23034,7 @@ const AngularWorkflow = (defaultprops) => {
               }
             }}
           >
-            <DoneIcon style={{ color: "white" }} />
+            <DoneIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
         <Tooltip
@@ -22936,7 +23077,7 @@ const AngularWorkflow = (defaultprops) => {
               }
             }}
           >
-            <ErrorIcon style={{ color: "white" }} />
+            <ErrorIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
         <Tooltip
@@ -22966,7 +23107,7 @@ const AngularWorkflow = (defaultprops) => {
               }
             }}
           >
-            <VisibilityIcon style={{ color: "white" }} />
+            <VisibilityIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
         <Tooltip
@@ -22986,7 +23127,7 @@ const AngularWorkflow = (defaultprops) => {
             onClick={(e) => {
             }}
           >
-            <DragIndicatorIcon style={{ color: "white" }} />
+            <DragIndicatorIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
         <Tooltip
@@ -23001,11 +23142,12 @@ const AngularWorkflow = (defaultprops) => {
               setCodeModalOpen(false);
             }}
           >
-            <CloseIcon style={{ color: "white" }} />
+            <CloseIcon style={{ color: theme.palette.text.primary }} />
           </IconButton>
         </Tooltip>
       </span>
 
+      <DialogContent>
       <div style={{ marginBottom: 40, }}>
         <div style={{ display: "flex", marginBottom: 15, position: "sticky", top: -31, zIndex: 10000, }}>
           {curapp === null ? null : (
@@ -23030,12 +23172,11 @@ const AngularWorkflow = (defaultprops) => {
                 fontSize: 24,
                 marginTop: "auto",
                 marginBottom: "auto",
-                cursor: "move",
               }}
             >
               <b>{selectedResult.action.label.replaceAll("_", " ")}</b>
             </div>
-            <div style={{ fontSize: 14, color: "rgba(255,255,255,0.6)", }}>{selectedResult.action.name}</div>
+            <div style={{ fontSize: 14, color: theme.palette.textColor, }}>{selectedResult.action.name}</div>
           </div>
         </div>
 
@@ -23154,11 +23295,12 @@ const AngularWorkflow = (defaultprops) => {
           ) : null}
         </div>
       </div>
+      </DialogContent>
     </Dialog>
   );
 
   const newView = (
-    <div style={{ color: "white", marginLeft: leftSideBarOpenByClick ? workflow?.public ? 210 : 250 : workflow?.public ? isLoggedIn ? 60 : 0 : isLoggedIn ? 100 : 0, transition: "margin-left 0.3s ease", overflow: 'hidden' }}>
+    <div style={{ color: theme.palette.text.primary, marginLeft: leftSideBarOpenByClick ? workflow?.public ? 210 : 250 : workflow?.public ? isLoggedIn ? 60 : 0 : isLoggedIn ? 100 : 0, transition: "margin-left 0.3s ease", overflow: 'hidden' }}>
       <div
         style={{ display: "flex", borderTop: "0px solid rgba(91, 96, 100, 1)" }}
       >
@@ -23399,7 +23541,7 @@ const AngularWorkflow = (defaultprops) => {
         PaperProps={{
           style: {
             pointerEvents: "auto",
-            color: "white",
+            color: theme.palette.text.primary,
             border: theme.palette.defaultBorder,
             maxWidth: isMobile ? bodyWidth - 100 : 800,
             minWidth: isMobile ? bodyWidth - 100 : 800,
@@ -23411,7 +23553,7 @@ const AngularWorkflow = (defaultprops) => {
       >
         <FormControl>
           <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-            <span style={{ color: "white" }}>Runtime Variable</span>
+            <span style={{ color: theme.palette.text.primary }}>Runtime Variable</span>
           </DialogTitle>
           <DialogContent>
             Runtime Variables are TEMPORARY variables that you can only be set
@@ -23420,7 +23562,7 @@ const AngularWorkflow = (defaultprops) => {
               rel="noopener noreferrer"
               href="https://shuffler.io/docs/workflows#execution_variables"
               target="_blank"
-              style={{ textDecoration: "none", color: "#FF8544" }}
+              style={{ textDecoration: "none", color: theme.palette.linkColor }}
             >
               here
             </a>
@@ -23431,7 +23573,7 @@ const AngularWorkflow = (defaultprops) => {
               style={{ marginTop: 25 }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               margin="dense"
@@ -23446,7 +23588,7 @@ const AngularWorkflow = (defaultprops) => {
               style={{ marginTop: 25 }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               margin="dense"
@@ -23514,7 +23656,7 @@ const AngularWorkflow = (defaultprops) => {
             <DialogContent>
               <Divider
                 style={{
-                  backgroundColor: "white",
+                  backgroundColor: theme.palette.text.primary,
                   marginTop: 15,
                   marginBottom: 15,
                 }}
@@ -23578,7 +23720,7 @@ const AngularWorkflow = (defaultprops) => {
         PaperProps={{
           style: {
             pointerEvents: "auto",
-            color: "white",
+            color: theme.palette.text.primary,
             border: theme.palette.defaultBorder,
             maxWidth: isMobile ? bodyWidth - 100 : "100%",
 
@@ -23589,7 +23731,7 @@ const AngularWorkflow = (defaultprops) => {
       >
         <FormControl>
           <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-            <span style={{ color: "white" }}>Workflow Variable</span>
+            <span style={{ color: theme.palette.text.primary }}>Workflow Variable</span>
           </DialogTitle>
           <DialogContent>
             <TextField
@@ -23598,7 +23740,7 @@ const AngularWorkflow = (defaultprops) => {
               placeholder="Name"
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               margin="dense"
@@ -23613,7 +23755,7 @@ const AngularWorkflow = (defaultprops) => {
               fullWidth
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               defaultValue={newVariableDescription}
@@ -23627,7 +23769,7 @@ const AngularWorkflow = (defaultprops) => {
               margin="dense"
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                 },
               }}
               fullWidth
@@ -23873,7 +24015,7 @@ const AngularWorkflow = (defaultprops) => {
     return (
       <div>
         <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
-          <div style={{ color: "white" }}>
+          <div style={{ color: theme.palette.text.primary }}>
             Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
           </div>
         </DialogTitle>
@@ -23882,7 +24024,7 @@ const AngularWorkflow = (defaultprops) => {
             target="_blank"
             rel="noopener noreferrer"
             href="https://shuffler.io/docs/apps#authentication"
-            style={{ textDecoration: "none", color: "#FF8544" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             What is app authentication?
           </a>
@@ -23965,7 +24107,7 @@ const AngularWorkflow = (defaultprops) => {
                     }}
                     style={{
                       backgroundColor: theme.palette.surfaceColor,
-                      color: "white",
+                      color: theme.palette.text.primary,
                       height: 50,
                     }}
                   >
@@ -23973,7 +24115,7 @@ const AngularWorkflow = (defaultprops) => {
                       key={"false"}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.text.primary,
                       }}
                       value={"false"}
                     >
@@ -23983,7 +24125,7 @@ const AngularWorkflow = (defaultprops) => {
                       key={"true"}
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        color: "white",
+                        color: theme.palette.text.primary,
                       }}
                       value={"true"}
                     >
@@ -24047,7 +24189,7 @@ const AngularWorkflow = (defaultprops) => {
         open={configureWorkflowModalOpen}
         PaperProps={{
           style: {
-            color: "white",
+            color: theme.palette.text.primary,
             minWidth: 650,
             border: theme.palette.defaultBorder,
 
@@ -24062,7 +24204,7 @@ const AngularWorkflow = (defaultprops) => {
             position: "absolute",
             top: 14,
             right: 14,
-            color: "white",
+            color: theme.palette.text.primary,
           }}
           onClick={() => {
             setConfigureWorkflowModalOpen(false);
@@ -24104,25 +24246,35 @@ const AngularWorkflow = (defaultprops) => {
       hideBackdrop={true}
       disableEnforceFocus={true}
       disableBackdropClick={true}
-      style={{ pointerEvents: "none" }}
+      style={{ 
+        pointerEvents: "none",
+     }}
       open={authenticationModalOpen}
       onClose={() => {
         setSelectedMeta(undefined)
       }}
       PaperProps={{
-        style: {
+        sx: {
           pointerEvents: "auto",
-          color: "white",
-          minWidth: 1100,
-          minHeight: 700,
-          maxHeight: 700,
-          padding: 15,
+          color: theme.palette.DialogStyle.color,
+          minWidth: "1100px",
+          minHeight: "700px",
+          maxHeight: "700px",
           overflow: "hidden",
           zIndex: 10012,
-          border: theme.palette.defaultBorder,
+          border: theme.palette.DialogStyle.border,
 
-          borderRadius: theme.palette.borderRadius,
-          backgroundColor: "black",
+          borderRadius: theme.palette.DialogStyle.borderRadius,
+          backgroundColor: theme.palette.DialogStyle.backgroundColor,
+          '& .MuiDialogContent-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
+          '& .MuiDialogTitle-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
+          '& .MuiDialogActions-root': {
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+          },
         },
       }}
     >
@@ -24134,6 +24286,7 @@ const AngularWorkflow = (defaultprops) => {
           right: 75,
           height: 50,
           width: 50,
+          backgroundColor: theme.palette.DialogStyle.backgroundColor,
         }}
       >
         {selectedApp.reference_info === undefined ||
@@ -24146,7 +24299,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             target="_blank"
             href={"https://github.com/shuffle/python-apps"}
-            style={{ textDecoration: "none", color: "#f86a3e" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             <img
               alt={`Documentation image for ${selectedApp.name}`}
@@ -24168,7 +24321,7 @@ const AngularWorkflow = (defaultprops) => {
             rel="noopener noreferrer"
             target="_blank"
             href={selectedApp.reference_info.github_url}
-            style={{ textDecoration: "none", color: "#f86a3e" }}
+            style={{ textDecoration: "none", color: theme.palette.linkColor }}
           >
             <img
               alt={`Documentation image for ${selectedApp.name}`}
@@ -24224,7 +24377,7 @@ const AngularWorkflow = (defaultprops) => {
       >
         <CloseIcon />
       </IconButton>
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div style={{ display: "flex", flexDirection: "row", backgroundColor: theme.palette.DialogStyle.backgroundColor }}>
         <div
           style={{
             flex: 
@@ -24232,11 +24385,14 @@ const AngularWorkflow = (defaultprops) => {
 			  selectedApp.authentication.parameters === null ||
 			  selectedApp.authentication.parameters === undefined ||
 			  selectedApp.authentication.parameters.length === 0 ? 0 : 2,
-            padding: 0,
+            paddingLeft: 15,
+            paddingTop: 15,
+            paddingBottom: 15,
             minHeight: isMobile ? "90%" : 700,
             maxHeight: isMobile ? "90%" : 700,
             overflowY: "auto",
             overflowX: isMobile ? "auto" : "hidden",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
           }}
         >
           {authenticationType.type === "oauth2" || authenticationType.type === "oauth2-app" ?
@@ -24266,6 +24422,7 @@ const AngularWorkflow = (defaultprops) => {
             minHeight: 630,
             overflowY: "auto",
             overflowX: "hidden",
+            backgroundColor: theme.palette.DialogStyle.backgroundColor,
           }}
           onLoad={() => {
             /*
@@ -24353,7 +24510,7 @@ const AngularWorkflow = (defaultprops) => {
                   rel="noopener noreferrer"
                   target="_blank"
                   href="https://discord.gg/B2CBzUm"
-                  style={{ textDecoration: "none", color: "#f86a3e" }}
+                  style={{ textDecoration: "none", color: theme.palette.linkColor }}
                 >
                   Join the community on Discord!
                 </a>
@@ -24373,7 +24530,7 @@ const AngularWorkflow = (defaultprops) => {
                       rel="noopener noreferrer"
                       target="_blank"
                       href={"https://github.com/shuffle/python-apps"}
-                      style={{ textDecoration: "none", color: "#f86a3e" }}
+                      style={{ textDecoration: "none", color: theme.palette.linkColor }}
                     >
                       Check it out on Github!
                     </a>
@@ -24415,7 +24572,7 @@ const AngularWorkflow = (defaultprops) => {
                           href={selectedMeta.link}
                           style={{ textDecoration: "none", color: "#FF8544" }}
                         >
-                          <Button style={{ color: "white", }} variant="outlined" color="secondary">
+                          <Button style={{ color: theme.palette.text.primary, }} variant="outlined" color="secondary">
                             <EditIcon /> &nbsp;&nbsp;Edit
                           </Button>
                         </a>
@@ -24426,13 +24583,13 @@ const AngularWorkflow = (defaultprops) => {
                         style={{
                           height: "100%",
                           width: 1,
-                          backgroundColor: "white",
+                          backgroundColor: theme.palette.text.primary,
                           marginLeft: 50,
                           marginRight: 50,
                         }}
                       />
                     )}
-                    <Typography style={{ display: "inline", marginTop: 11 }}>
+                    <Typography style={{ display: "inline", marginTop: 11, textWrap: "nowrap" }}>
                       {selectedMeta.read_time} minute
                       {selectedMeta.read_time === 1 ? "" : "s"} to read
                     </Typography>
@@ -24512,7 +24669,7 @@ const AngularWorkflow = (defaultprops) => {
       PaperProps={{
         style: {
           pointerEvents: "auto",
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: 600,
           minHeight: 250,
           maxHeight: 250,
@@ -24527,7 +24684,7 @@ const AngularWorkflow = (defaultprops) => {
       }}
     >
       <DialogTitle id="tenzir-config-modal" style={{ cursor: "move" }}>
-        <div style={{ color: "white" }}>Run a Tenzir Pipeline</div>
+        <div style={{ color: theme.palette.text.primary }}>Run a Tenzir Pipeline</div>
         <Typography variant="body2" color="textSecondary" style={{ marginTop: 10, }}>
           Runs a Tenzir pipeline. You can use the output of the pipeline in your workflow.
         </Typography>
@@ -24579,7 +24736,7 @@ const AngularWorkflow = (defaultprops) => {
     return (
       <div style={{ width: 350, padding: 15, position: "fixed", top: suggestionBox.position.top, left: suggestionBox.position.left, borderRadius: theme.palette?.borderRadius, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.3)", }}>
         {/*
-				<AutoFixHighIcon style={{height: 12, width: 12, color: "white", position: "absolute", top: 10, right: 24, }} />
+				<AutoFixHighIcon style={{height: 12, width: 12, color: theme.palette.text.primary, position: "absolute", top: 10, right: 24, }} />
 				*/}
         <Tooltip
           title="Close"
@@ -24601,7 +24758,7 @@ const AngularWorkflow = (defaultprops) => {
               });
             }}
           >
-            <CloseIcon style={{ color: "white", height: 12, width: 12, }} />
+            <CloseIcon style={{ color: theme.palette.text.primary, height: 12, width: 12, }} />
           </IconButton>
         </Tooltip>
         <form onSubmit={(e, value) => {
@@ -24950,7 +25107,7 @@ const AngularWorkflow = (defaultprops) => {
             minWidth: isMobile ? "100%" : 360,
             maxWidth: isMobile ? "100%" : 360,
             backgroundColor: theme.palette.platformColor,
-            color: "white",
+            color: theme.palette.text.primary,
             fontSize: 18,
             zIndex: 15001,
             borderRight: theme.palette.defaultBorder,
@@ -24980,7 +25137,7 @@ const AngularWorkflow = (defaultprops) => {
 						</Button>
 					: null*/}
         </div>
-        <div style={{ textAlign: "center", color: "white", flex: 2, paddingTop: 20, }}>
+        <div style={{ textAlign: "center", color: theme.palette.text.primary, flex: 2, paddingTop: 20, }}>
           <Typography variant="h6">
             {selectedVersion?.name}
           </Typography>
@@ -25350,7 +25507,7 @@ const AngularWorkflow = (defaultprops) => {
                 position: "absolute",
                 top: 6,
                 right: 6,
-                color: "white",
+                color: theme.palette.text.primary,
               }}
               onClick={() => {
                 setSelectionOpen(false)
@@ -25384,7 +25541,7 @@ const AngularWorkflow = (defaultprops) => {
                 position: "absolute",
                 top: 6,
                 right: 6,
-                color: "white",
+                color: theme.palette.text.primary,
               }}
               onClick={() => {
                 setShowVideo("")
diff --git a/frontend/src/views/ApiExplorerWrapper.jsx b/frontend/src/views/ApiExplorerWrapper.jsx
index 96298437..45f9d762 100644
--- a/frontend/src/views/ApiExplorerWrapper.jsx
+++ b/frontend/src/views/ApiExplorerWrapper.jsx
@@ -59,6 +59,7 @@ const ApiExplorer = React.lazy(() => import("../components/ApiExplorer.jsx"));
 
 const ApiExplorerWrapper = (props) => {
   const { globalUrl, serverside, userdata, isLoggedIn, isLoaded} = props;
+  const { supportEmail } = useContext(Context);
   const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io"
   const location = useLocation();
   const navigate = useNavigate();
@@ -165,7 +166,7 @@ const ApiExplorerWrapper = (props) => {
 			}
 
 			if (!found) {
-				toast.error(`Failed to get API data for '${appname}' (1). Contact support@shuffler.io if this persists.`, {
+				toast.error(`Failed to get API data for '${appname}' (1). Contact ${supportEmail} if this persists.`, {
 					"autoClose": 10000,
 				})
 
@@ -174,7 +175,7 @@ const ApiExplorerWrapper = (props) => {
 				},3000)
 			}
 		} else {
-			toast.error(`Failed to get API data for '${appname}' (2). Contact support@shuffler.io if this persists.`, {
+			toast.error(`Failed to get API data for '${appname}' (2). Contact ${supportEmail} if this persists.`, {
 				"autoClose": 10000,
 			})
 			setTimeout(()=>{
@@ -539,7 +540,7 @@ const ApiExplorerWrapper = (props) => {
     }else if (openapi?.id?.length > 0) {
       appid = openapi?.id;
     }else{
-      toast.error("App id is missing and we can't run the API. Please contact support@shuffler.io if this persists.");
+      toast.error(`App id is missing and we can't run the API. Please contact ${supportEmail} if this persists.`);
       return;
     }
 
@@ -673,7 +674,7 @@ const ApiExplorerWrapper = (props) => {
 
 				if (data.result.includes("custom_action doesn't exist")) {
 					// No timeout error
-					toast.info("This API is being rebuilt due to missing functionality. Please wait a minute or two, then try again. If this persists, please report to support@shuffler.io", {
+					toast.info(`This API is being rebuilt due to missing functionality. Please wait a minute or two, then try again. If this persists, please report to ${supportEmail}`, {
 						"autoClose": 90000,
 					})
 				} else if (data.result.includes("authentication") && data.result.includes("Oauth2")) {
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index ae234e9e..ad7aaf48 100755
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { makeStyles } from "@mui/styles";
 import { BrowserView, MobileView } from "react-device-detect";
-import theme from '../theme.jsx';
+import { getTheme } from '../theme.jsx';
 
 import {
   Paper,
@@ -57,6 +57,7 @@ import { ToastContainer, toast } from "react-toastify"
 import words from "shellwords";
 
 import AvatarEditor from "react-avatar-editor";
+import { Context } from "../context/ContextApi.jsx";
 
 const surfaceColor = "#27292D";
 const inputColor = "#383B40";
@@ -67,33 +68,7 @@ const bodyDivStyle = {
   zoom: 0.8,
 };
 
-const actionListStyle = {
-  paddingLeft: "10px",
-  paddingRight: "10px",
-  paddingBottom: "10px",
-  paddingTop: "10px",
-  marginTop: "5px",
-  display: "flex",
-  color: "white",
-  position: "relative",
 
-  backgroundColor: theme.palette.platformColor,
-};
-
-const boxStyle = {
-  color: "white",
-  flex: "1",
-  marginLeft: "10px",
-  marginRight: "10px",
-  paddingLeft: "30px",
-  paddingRight: "30px",
-  paddingBottom: "30px",
-  paddingTop: "30px",
-  display: "flex",
-  flexDirection: "column",
-
-  backgroundColor: theme.palette.backgroundColor,
-};
 
 const dividerStyle = {
   marginBottom: "10px",
@@ -427,9 +402,40 @@ const AppCreator = (defaultprops) => {
   const [actionAmount, setActionAmount] = useState(increaseAmount);
   const [newAppGroup, setNewAppGroup] = useState("")
 
+  const { themeMode, supportEmail, brandColor } = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
+
   const [oauth2Scopes, setOauth2Scopes] = useState([]);
   const [oauth2Type, setOauth2Type] = useState("delegated");
 
+  const actionListStyle = {
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    paddingBottom: "10px",
+    paddingTop: "10px",
+    marginTop: "5px",
+    display: "flex",
+    color: theme.palette.text.primary,
+    position: "relative",
+  
+    backgroundColor: theme.palette.platformColor,
+  };
+  
+  const boxStyle = {
+    color: theme.palette.text.primary,
+    flex: "1",
+    marginLeft: "10px",
+    marginRight: "10px",
+    paddingLeft: "30px",
+    paddingRight: "30px",
+    paddingBottom: "30px",
+    paddingTop: "30px",
+    display: "flex",
+    flexDirection: "column",
+  
+    backgroundColor: theme.palette.platformColor,
+  };
+
   //client_credentials
   const [oauth2GrantType, setOauth2GrantType] = useState("");
   const defaultAuth = {
@@ -2626,7 +2632,7 @@ const AppCreator = (defaultprops) => {
         if (response.status === 403) {
     		var urlParams = new URLSearchParams(window.location.search)
 			if (urlParams.has("id")) {
-				toast.error("Please log in to build this app. If this error persists, please contact support@shuffler.io")
+				toast.error(`Please log in to build this app. If this error persists, please contact ${supportEmail}`)
 			} else {
 				toast.error("Failed to save the app as you are not the owner. Redirecting you to the forking page. When there, save again.")
 				if (props.match.params.appid !== undefined && props.match.params.appid !== null && props.match.params.appid.length > 0) {
@@ -2678,12 +2684,12 @@ const AppCreator = (defaultprops) => {
 
   const bearerAuth =
     authenticationOption === "Bearer auth" ? (
-      <div style={{ color: "white" }}>
+      <div style={{ color: theme.palette.text.primary }}>
         <h4>
           <a
             target="_blank"
             href="https://swagger.io/docs/specification/authentication/bearer-authentication/"
-            style={{ textDecoriation: "none", color: "#f85a3e" }}
+            style={{ textDecoriation: "none", color: theme.palette.linkColor }}
           >
             Bearer auth
           </a>
@@ -2696,12 +2702,12 @@ const AppCreator = (defaultprops) => {
   // Basicauth
   const basicAuth =
     authenticationOption === "Basic auth" ? (
-      <div style={{ color: "white" }}>
+      <div style={{ color: theme.palette.text.primary }}>
         <h4>
           <a
             target="_blank"
             href="https://swagger.io/docs/specification/authentication/basic-authentication/"
-            style={{ textDecoriation: "none", color: "#f85a3e" }}
+            style={{ textDecoriation: "none", color: theme.palette.linkColor }}
           >
             Basic authentication
           </a>
@@ -2795,7 +2801,7 @@ const AppCreator = (defaultprops) => {
                 flex: 2,
                 marginTop: 0,
                 marginBottom: 0,
-                backgroundColor: inputColor,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                 marginRight: 5,
               }}
               fullWidth={true}
@@ -2813,7 +2819,8 @@ const AppCreator = (defaultprops) => {
                   notchedOutline: classes.notchedOutline,
                 },
                 style: {
-                  color: "white",
+                  color: theme.palette.textFieldStyle.color,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                   minHeight: 50,
                   marginLeft: 5,
                   maxWidth: "95%",
@@ -2828,7 +2835,7 @@ const AppCreator = (defaultprops) => {
                 marginTop: 0,
                 marginBottom: 0,
                 flex: 2,
-                backgroundColor: inputColor,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                 marginRight: 5,
               }}
               fullWidth={true}
@@ -2843,7 +2850,8 @@ const AppCreator = (defaultprops) => {
               }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.textFieldStyle.color,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                   minHeight: 50,
                   marginLeft: 5,
                   maxWidth: "95%",
@@ -2861,9 +2869,9 @@ const AppCreator = (defaultprops) => {
               value={extraAuth[index].type}
               style={{
                 flex: 1,
-                backgroundColor: inputColor,
+                backgroundColor: theme.palette.backgroundColor,
                 paddingLeft: "10px",
-                color: "white",
+                color: theme.palette.text.primary,
                 height: 50,
                 borderRadius: theme.shape.borderRadius,
               }}
@@ -2874,14 +2882,14 @@ const AppCreator = (defaultprops) => {
             >
               <MenuItem
                 key={index}
-                style={{ backgroundColor: inputColor, color: "white" }}
+                style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary }}
                 value={"header"}
               >
                 Header
               </MenuItem>
               <MenuItem
                 key={index}
-                style={{ backgroundColor: inputColor, color: "white" }}
+                style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary }}
                 value={"query"}
               >
                 Query
@@ -2929,7 +2937,7 @@ const AppCreator = (defaultprops) => {
 
   const jwtAuth =
     authenticationOption === "JWT" ? (
-      <div style={{ color: "white", marginTop: 20 }}>
+      <div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
         <Typography variant="body1">JWT authentication</Typography>
         <Typography
           variant="body2"
@@ -2948,7 +2956,7 @@ const AppCreator = (defaultprops) => {
           variant="outlined"
           defaultValue={parameterName}
           helperText={
-            <span style={{ color: "white", marginBottom: "2px" }}>
+            <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
               Must start with / and be a valid path
             </span>
           }
@@ -2958,7 +2966,7 @@ const AppCreator = (defaultprops) => {
               notchedOutline: classes.notchedOutline,
             },
             style: {
-              color: "white",
+              color: theme.palette.text.primary,
             },
           }}
         />
@@ -2979,7 +2987,7 @@ const AppCreator = (defaultprops) => {
           variant="outlined"
           defaultValue={parameterName}
           helperText={
-            <span style={{ color: "white", marginBottom: "2px" }}>
+            <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
 			  Must use 'key=value&key=value' format
             </span>
           }
@@ -2991,7 +2999,7 @@ const AppCreator = (defaultprops) => {
               notchedOutline: classes.notchedOutline,
             },
             style: {
-              color: "white",
+              color: theme.palette.text.primary,
             },
           }}
         />
@@ -3001,7 +3009,7 @@ const AppCreator = (defaultprops) => {
 
   const oauth2Auth =
     authenticationOption === "Oauth2" ? (
-      <div style={{ color: "white", marginTop: 20 }}>
+      <div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
         <Typography variant="body1">Oauth2 authentication</Typography>
         <Typography
           variant="body2"
@@ -3060,7 +3068,7 @@ const AppCreator = (defaultprops) => {
         		      notchedOutline: classes.notchedOutline,
         		    },
         		    style: {
-        		      color: "white",
+        		      color: theme.palette.text.primary,
         		    },
         		  }}
         		/>
@@ -3111,7 +3119,7 @@ const AppCreator = (defaultprops) => {
               notchedOutline: classes.notchedOutline,
             },
             style: {
-              color: "white",
+              color: theme.palette.text.primary,
             },
           }}
         />
@@ -3160,7 +3168,7 @@ const AppCreator = (defaultprops) => {
 							}}
         		  InputProps={{
         		    style: {
-        		      color: "white",
+        		      color: theme.palette.text.primary,
         		    },
         		  }}
         		/>
@@ -3177,7 +3185,7 @@ const AppCreator = (defaultprops) => {
 		  required
 		  InputProps={{
 			style: {
-			  color: "white",
+			  color: theme.palette.text.primary,
 			  maxHeight: 160,
 			},
 		  }}
@@ -3202,7 +3210,7 @@ const AppCreator = (defaultprops) => {
 
   const apiKey =
     authenticationOption === "API key" ? (
-      <div style={{ color: "white", marginTop: 20 }}>
+      <div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
         <Typography variant="body1">API key authentication</Typography>
         <Typography variant="body2" color="textSecondary">
           <b>Do NOT put your actual API-key.</b> Add the name of the field used for authentication, e.g. "X-APIKEY". 
@@ -3221,7 +3229,7 @@ const AppCreator = (defaultprops) => {
 							variant="outlined"
 							value={parameterName}
 							helperText={
-								<span style={{ color: "white", marginBottom: "2px" }}>
+								<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
 									Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$:=
 								</span>
 							}
@@ -3238,7 +3246,7 @@ const AppCreator = (defaultprops) => {
 									notchedOutline: classes.notchedOutline,
 								},
 								style: {
-									color: "white",
+									color: theme.palette.text.primary,
 								},
 							}}
 						/>
@@ -3255,7 +3263,7 @@ const AppCreator = (defaultprops) => {
         		    borderRadius: theme.shape.borderRadius,
         		    backgroundColor: inputColor,
         		    paddingLeft: 10,
-        		    color: "white",
+        		    color: theme.palette.text.primary,
         		    height: 57,
         		  }}
         		  inputProps={{
@@ -3271,7 +3279,7 @@ const AppCreator = (defaultprops) => {
         		    return (
         		      <MenuItem
         		        key={index}
-        		        style={{ backgroundColor: inputColor, color: "white" }}
+        		        style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
         		        value={data}
         		      >
         		        {data}
@@ -3463,15 +3471,14 @@ const AppCreator = (defaultprops) => {
     		  <Tooltip title={chipRequired ? "Make not required" : "Make required"}>
     		    <Chip
     		      style={{
-    		        backgroundColor: chipRequired ? "#f86a3e" : "#3d3f43",
+    		        backgroundColor: chipRequired ? "#f86a3e" : theme.palette.chipStyle.backgroundColor,
     		        height: 30,
     		        margin: 3,
     		        paddingLeft: 5,
     		        paddingRight: 5,
-    		        height: 28,
     		        cursor: "pointer",
-    		        borderColor: "#3d3f43",
-    		        color: "white",
+    		        borderColor: theme.palette.chipStyle.borderColor,
+    		        color: theme.palette.chipStyle.color,
     		      }}
     		      label={parsedChip}
     		      onClick={() => {
@@ -3557,7 +3564,7 @@ const AppCreator = (defaultprops) => {
 										placeholder={"Query name (key)"}
 										label={"Query Key"}
 										helperText={
-											<span style={{ color: "white", marginBottom: "2px" }}>
+											<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
 												Click required to flip 
 											</span>
 										}
@@ -3569,7 +3576,7 @@ const AppCreator = (defaultprops) => {
 										style={{flex: 3}}
 										InputProps={{
 											style: {
-												color: "white",
+												color: theme.palette.text.primary,
 											},
 										}}
 									/>
@@ -3589,7 +3596,7 @@ const AppCreator = (defaultprops) => {
 										style={{flex: 2}}
 										InputProps={{
 											style: {
-												color: "white",
+												color: theme.palette.text.primary,
 											},
 										}}
 									/>
@@ -3662,7 +3669,7 @@ const AppCreator = (defaultprops) => {
   	    )}
   	    <TextField
   	      required
-  	      style={{ flex: "1", marginRight: "15px", backgroundColor: inputColor }}
+  	      style={{ flex: "1", marginRight: "15px", backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
   	      fullWidth={true}
   	      placeholder={
   	        '{\n\t"example": "${example}",\n\t"apikey": "${apikey}",\n\t"search": "1.2.3.5"\n}'
@@ -3678,7 +3685,7 @@ const AppCreator = (defaultprops) => {
   	      }}
   	      key={currentAction}
   	      helperText={
-  	        <span style={{ color: "white", marginBottom: "2px" }}>
+  	        <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
   	          Shows an example body to the user. ${} creates variables.
   	        </span>
   	      }
@@ -3687,7 +3694,8 @@ const AppCreator = (defaultprops) => {
   	          notchedOutline: classes.notchedOutline,
   	        },
   	        style: {
-  	          color: "white",
+  	          color: theme.palette.textFieldStyle.color,
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
   	        },
   	      }}
   	    />
@@ -3700,7 +3708,7 @@ const AppCreator = (defaultprops) => {
   	    <b>Example success response</b>
   	    <TextField
   	      required
-  	      style={{ flex: "1", marginRight: "15px", backgroundColor: inputColor }}
+  	      style={{ flex: "1", marginRight: "15px", backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
   	      fullWidth={true}
   	      placeholder={
   	        '{\n\t"email": "testing@test.com",\n\t"firstname": "testing"\n}'
@@ -3712,14 +3720,15 @@ const AppCreator = (defaultprops) => {
   	      defaultValue={currentAction["example_response"]}
   	      onChange={(e) => setActionField("example_response", e.target.value)}
   	      helperText={
-  	        <span style={{ color: "white", marginBottom: "2px" }}>
+  	        <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
   	          Helps with autocompletion and understanding of the endpoint
   	        </span>
   	      }
   	      key={currentAction}
   	      InputProps={{
   	        style: {
-  	          color: "white",
+  	          color: theme.palette.textFieldStyle.color,
+  	          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
   	        },
   	      }}
   	    />
@@ -3794,8 +3803,8 @@ const AppCreator = (defaultprops) => {
     		  fullWidth
 			  PaperProps={{
     		    style: {
-    		      backgroundColor: surfaceColor,
-    		      color: "white",
+    		      backgroundColor: theme.palette.drawer.backgroundColor,
+    		      color: theme.palette.text.primary,
     		      minWidth: 700,
     		      maxWidth: 700,
     		    },
@@ -3812,15 +3821,15 @@ const AppCreator = (defaultprops) => {
 			    setFileUploadEnabled(false);
     		  }}
     		>
-    		  <FormControl style={{ backgroundColor: surfaceColor, color: "white" }}>
+    		  <FormControl style={{ backgroundColor: theme.palette.drawer.backgroundColor, color: theme.palette.text.primary }}>
     		    <DialogTitle style={{marginTop: 45, }}>
-    		      <div style={{ color: "white" }}>New action</div>
+    		      <div style={{ color: theme.palette.text.primary }}>New action</div>
     		    </DialogTitle>
     		    <DialogContent style={{paddingBottom: 100, }}>
     		      <a
     		        target="_blank"
     		        href="https://shuffler.io/docs/app_creation#actions"
-    		        style={{ textDecoration: "none", color: "#f85a3e" }}
+    		        style={{ textDecoration: "none", color: theme.palette.linkColor }}
     		      >
     		        Learn more about actions
     		      </a>
@@ -3832,7 +3841,8 @@ const AppCreator = (defaultprops) => {
     		          flex: "1",
     		          marginTop: 5,
     		          marginRight: 15,
-    		          backgroundColor: inputColor,
+    		          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
     		        }}
     		        fullWidth={true}
     		        placeholder="Name"
@@ -3871,7 +3881,8 @@ const AppCreator = (defaultprops) => {
     		            notchedOutline: classes.notchedOutline,
     		          },
     		          style: {
-    		            color: "white",
+    		            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    color: theme.palette.textFieldStyle.color,
     		          },
     		        }}
     		      />
@@ -3883,7 +3894,8 @@ const AppCreator = (defaultprops) => {
     		          flex: "1",
     		          marginTop: 5,
     		          marginRight: "15px",
-    		          backgroundColor: inputColor,
+    		          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
     		        }}
     		        fullWidth={true}
     		        placeholder="Description"
@@ -3895,7 +3907,8 @@ const AppCreator = (defaultprops) => {
     		        onChange={(e) => setActionField("description", e.target.value)}
     		        InputProps={{
     		          style: {
-    		            color: "white",
+    		            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    color: theme.palette.textFieldStyle.color,
     		          },
     		        }}
     		      />
@@ -3917,14 +3930,18 @@ const AppCreator = (defaultprops) => {
     		        }}
     		        value={currentActionMethod}
     		        style={{
-    		          backgroundColor: inputColor,
     		          paddingLeft: "10px",
-    		          color: "white",
+    		          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
     		          height: "50px",
     		        }}
     		        inputProps={{
     		          name: "Method",
     		          id: "method-option",
+                  style: {
+                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    color: theme.palette.textFieldStyle.color,
+                  },
     		        }}
     		      >
 
@@ -3939,7 +3956,7 @@ const AppCreator = (defaultprops) => {
     		            >
 						  <Chip
 						  	style={{
-						  		color: "white",
+						  		color: theme.palette.text.primary,
 						  		borderRadius: theme.shape.borderRadius,
 						  		minWidth: 80,
 						  		marginRight: 10,
@@ -3963,7 +3980,8 @@ const AppCreator = (defaultprops) => {
     		          flex: "1",
     		          marginRight: "15px",
     		          marginTop: "5px",
-    		          backgroundColor: inputColor,
+    		          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  color: theme.palette.textFieldStyle.color,
     		        }}
     		        fullWidth={true}
     		        placeholder="URL path"
@@ -3976,7 +3994,7 @@ const AppCreator = (defaultprops) => {
     		          setUrlPath(e.target.value);
     		        }}
     		        helperText={
-    		          <span style={{ color: "white", marginBottom: "2px" }}>
+    		          <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
     		            The path to use. Must start with /. Use {"{variablename}"} to
     		            have path variables
     		          </span>
@@ -3987,7 +4005,8 @@ const AppCreator = (defaultprops) => {
     		            input: classes.input,
     		          },
     		          style: {
-    		            color: "white",
+    		            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    color: theme.palette.textFieldStyle.color,
     		          },
     		        }}
     		        onBlur={(event) => {
@@ -4270,7 +4289,7 @@ const AppCreator = (defaultprops) => {
     		          defaultValue={currentAction["file_field"]}
     		          onChange={(e) => setActionField("file_field", e.target.value)}
     		          helperText={
-    		            <span style={{ color: "white", marginBottom: "2px" }}>
+    		            <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
     		              The File field to interact with
     		            </span>
     		          }
@@ -4279,7 +4298,7 @@ const AppCreator = (defaultprops) => {
     		              notchedOutline: classes.notchedOutline,
     		            },
     		            style: {
-    		              color: "white",
+    		              color: theme.palette.text.primary,
     		            },
     		          }}
     		        />
@@ -4294,7 +4313,8 @@ const AppCreator = (defaultprops) => {
 											flex: "1",
 											marginRight: "15px",
 											marginTop: "5px",
-											backgroundColor: inputColor,
+											backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                      color: theme.palette.textFieldStyle.color,
 										}}
 										fullWidth={true}
 										placeholder={
@@ -4308,13 +4328,14 @@ const AppCreator = (defaultprops) => {
 										minRows="2"
 										onChange={(e) => setActionField("headers", e.target.value)}
 										helperText={
-											<span style={{ color: "white", marginBottom: "2px" }}>
+											<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
 												Headers that are part of the request. Default: EMPTY
 											</span>
 										}
 										InputProps={{
 											style: {
-												color: "white",
+												backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                        color: theme.palette.textFieldStyle.color,
 											},
 										}}
 									/>
@@ -4323,14 +4344,14 @@ const AppCreator = (defaultprops) => {
     		      {bodyInfo}
     		      <Divider
     		        style={{
-    		          backgroundColor: "rgba(255,255,255,0.5)",
+    		          backgroundColor: theme.palette.defaultBorder,
     		          marginTop: 15,
     		          marginBottom: 15,
     		        }}
     		      />
     		      {exampleResponse}
     		    </DialogContent>
-    		    <div style={{position: "fixed", backgroundColor: theme.palette.surfaceColor, bottom: 0, width: "100%", padding: 25, borderTop: "1px solid rgba(255,255,255,0.3)", }}>
+    		    <div style={{position: "fixed", backgroundColor: theme.palette.drawer.backgroundColor, bottom: 0, width: "100%", padding: 25, borderTop: theme.palette.defaultBorder, }}>
     		      <Button
     		        color="primary"
     		        variant={urlPath.length > 0 ? "contained" : "outlined"}
@@ -4449,7 +4470,7 @@ const AppCreator = (defaultprops) => {
 							<Chip
 								style={{
 									backgroundColor: bgColor,
-									color: "white",
+									color: theme.palette.text.primary,
 									borderRadius: theme.shape.borderRadius,
 									minWidth: 80,
 									marginRight: 10,
@@ -4501,9 +4522,9 @@ const AppCreator = (defaultprops) => {
 							style={{
 								border: data.action_label === undefined || data.action_label === "No Label" ? "" : `2px solid ${bgColor}`,
 								borderRadius: theme.shape.borderRadius,
-								backgroundColor: inputColor,
+								backgroundColor: theme.palette.backgroundColor,
 								paddingLeft: 10,
-								color: "white",
+								color: theme.palette.text.primary,
 								height: 30,
 								maxWidth: 35, 
 								marginLeft: 10, 
@@ -4620,13 +4641,13 @@ const AppCreator = (defaultprops) => {
 
 
   const tagView = (
-    <div style={{ color: "white" }}>
+    <div style={{ color: theme.palette.text.primary }}>
       {/*
 			<ChipInput
 				style={{marginTop: 10}}
 				InputProps={{
 					style:{
-						color: "white",
+						color: theme.palette.text.primary,
 					},
 				}}
 				placeholder="Categories"
@@ -4661,7 +4682,7 @@ const AppCreator = (defaultprops) => {
 				}}
 				value={newWorkflowCategories.length === 0 ? "Select a category" : newWorkflowCategories[0]}
 				
-				style={{ backgroundColor: inputColor, color: "white", height: "50px" }}
+				style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, height: "50px" }}
 			  >
 				{categories.map((data, index) => {
 					if (data === undefined || data === null || data === "" || data === undefined || data === null || data === "") {
@@ -4671,7 +4692,7 @@ const AppCreator = (defaultprops) => {
 					return (
 						<MenuItem
 							key={index}
-							style={{ backgroundColor: inputColor, color: "white" }}
+							sx={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, "&:hover" : { backgroundColor:  theme.palette.hoverColor} }}
 							value={data.name}
 						>
 							{data.name}
@@ -4701,7 +4722,7 @@ const AppCreator = (defaultprops) => {
 	  			}}
 	  			InputProps={{
 	  				style: {
-	  					color: "white",
+	  					color: theme.palette.text.primary,
 	  				},
 	  			}}
 	  		/>
@@ -4713,7 +4734,7 @@ const AppCreator = (defaultprops) => {
         style={{ marginTop: 10 }}
         InputProps={{
           style: {
-            color: "white",
+            color: theme.palette.text.primary,
           },
         }}
         placeholder="Tags"
@@ -4786,7 +4807,7 @@ const AppCreator = (defaultprops) => {
             }}
             InputProps={{
               style: {
-                color: "white",
+                color: theme.palette.text.primary,
                 height: 50,
                 fontSize: "1em",
               },
@@ -5101,7 +5122,7 @@ const AppCreator = (defaultprops) => {
 
         /*
 					{selectedAction.authentication.map(data => (
-					<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
+					<MenuItem key={data.id} style={{backgroundColor: inputColor, color: theme.palette.text.primary}} value={data}>
 				*/
       };
 
@@ -5120,7 +5141,7 @@ const AppCreator = (defaultprops) => {
               target="_blank"
               rel="norefferer"
               href="https://shuffler.io/docs/app_creation#authentication"
-              style={{ textDecoration: "none", color: "#f85a3e" }}
+              style={{ textDecoration: "none", color: theme.palette.linkColor }}
             >
               What is this?
             </a>
@@ -5135,7 +5156,7 @@ const AppCreator = (defaultprops) => {
               }}
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.text.primary,
                   marginLeft: "5px",
                   maxWidth: "95%",
                   height: 50,
@@ -5175,7 +5196,7 @@ const AppCreator = (defaultprops) => {
                     }}
                     InputProps={{
                       style: {
-                        color: "white",
+                        color: theme.palette.text.primary,
                         marginLeft: "5px",
                         maxWidth: "95%",
                         height: 50,
@@ -5225,7 +5246,7 @@ const AppCreator = (defaultprops) => {
   };
 
   const actionView = (
-    <div style={{ color: "white", position: "relative" }}>
+    <div style={{ color: theme.palette.text.primary, position: "relative" }}>
       <div style={{ position: "absolute", right: 0, top: 0 }}>
         {actionAmount > 0 && actionAmount < filteredActions.length ? (
           <Button
@@ -5277,15 +5298,14 @@ const AppCreator = (defaultprops) => {
                 key={index}
                 style={{
                   backgroundColor:
-                    tag === selectedCategory ? "#f86a3e" : "#3d3f43",
+                    tag === selectedCategory ? "#f86a3e" : theme.palette.chipStyle.backgroundColor,
                   height: 30,
                   margin: 3,
                   paddingLeft: 5,
                   paddingRight: 5,
-                  height: 28,
                   cursor: "pointer",
-                  borderColor: "#3d3f43",
-                  color: "white",
+                  borderColor: theme.palette.chipStyle.borderColor,
+                  color: theme.palette.chipStyle.color,
                 }}
                 label={newname}
                 onClick={() => {
@@ -5411,13 +5431,13 @@ const AppCreator = (defaultprops) => {
   );
 
   const testView = (
-    <div style={{ color: "white" }}>
+    <div style={{ color: theme.palette.text.primary }}>
       <h2>Test</h2>
       Test an action to see whether it performs in an expected way.
       <a
         target="_blank"
         href="https://shuffler.io/docs/app_creation#testing"
-        style={{ textDecoration: "none", color: "#f85a3e" }}
+        style={{ textDecoration: "none", color: theme.palette.linkColor }}
       >
         &nbsp;TBD: Click here to learn more about testing
       </a>
@@ -5572,7 +5592,7 @@ const AppCreator = (defaultprops) => {
       PaperProps={{
         style: {
           backgroundColor: surfaceColor,
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: "300px",
           minHeight: "300px",
         },
@@ -5721,7 +5741,7 @@ const AppCreator = (defaultprops) => {
       PaperProps={{
         style: {
           backgroundColor: surfaceColor,
-          color: "white",
+          color: theme.palette.text.primary,
           minWidth: "800px",
           minHeight: "320px",
         },
@@ -5741,7 +5761,7 @@ const AppCreator = (defaultprops) => {
             margin="normal"
             InputProps={{
               style: {
-                color: "white",
+                color: theme.palette.text.primary,
                 height: "50px",
                 fontSize: "1em",
               },
@@ -5768,7 +5788,7 @@ const AppCreator = (defaultprops) => {
               setOpenApi(e.target.value);
             }}
             helperText={
-              <span style={{ color: "white", marginBottom: "2px" }}>
+              <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
                 Must point to a version 2 or 3 OpenAPI specification.
               </span>
             }
@@ -5832,14 +5852,14 @@ const AppCreator = (defaultprops) => {
 
   // Random names for type & autoComplete. Didn't research :^)
   const landingpageDataBrowser = (
-    <div style={{ paddingBottom: 100, color: "white" }}>
+    <div style={{ paddingBottom: 100, color: theme.palette.text.primary, }}>
       <Breadcrumbs
         aria-label="breadcrumb"
         separator="›"
-        style={{ color: "white" }}
+        style={{ color: theme.palette.text.primary }}
       >
         <Link to="/apps" style={{ textDecoration: "none", color: "inherit" }}>
-          <h2 style={{ color: "rgba(255,255,255,0.5)" }}>
+          <h2 style={{ color: theme.palette.textColor }}>
             <AppsIcon style={{ marginRight: 10 }} />
             Apps
           </h2>
@@ -5860,10 +5880,10 @@ const AppCreator = (defaultprops) => {
         ref={(ref) => (upload = ref)}
         onChange={editHeaderImage}
       />
-      <Paper style={boxStyle}>
+      <div style={boxStyle}>
 	  	<div style={{display: "flex", }}>
 			<div style={{flex: 1, }}>
-				<h2 style={{ marginBottom: "10px", color: "white" }}>
+				<h2 style={{ marginBottom: "10px", color: theme.palette.text.primary }}>
 				  General information
 				</h2>
 			</div>
@@ -5907,13 +5927,13 @@ const AppCreator = (defaultprops) => {
         <a
           target="_blank"
           href="https://shuffler.io/docs/app_creation#app-creator-instructions"
-          style={{ textDecoration: "none", color: "#f85a3e" }}
+          style={{ textDecoration: "none", color: theme.palette.linkColor }}
         >
           Click to learn more about app creation
         </a>
         <div
           style={{
-            color: "white",
+            color: theme.palette.text.primary,
             flex: "1",
             display: "flex",
             flexDirection: "row",
@@ -5944,7 +5964,7 @@ const AppCreator = (defaultprops) => {
               />
             </div>
           </Tooltip>
-          <div style={{ flex: "3", color: "white", marginLeft: 20, }}>
+          <div style={{ flex: "3", color: theme.palette.text.primary, marginLeft: 20, }}>
             <div style={{ marginTop: "10px" }} />
             Name
             <TextField
@@ -5953,7 +5973,7 @@ const AppCreator = (defaultprops) => {
                 flex: "1",
                 marginTop: "5px",
                 marginRight: "15px",
-                backgroundColor: inputColor,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
               }}
               fullWidth={true}
               placeholder="Name"
@@ -5989,7 +6009,8 @@ const AppCreator = (defaultprops) => {
               color="primary"
               InputProps={{
                 style: {
-                  color: "white",
+                  color: theme.palette.textFieldStyle.color,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                   height: "50px",
                   fontSize: "1em",
                 },
@@ -6005,13 +6026,19 @@ const AppCreator = (defaultprops) => {
               style={{
 				marginTop: 5, 
                 marginRight: 15,
-                backgroundColor: inputColor,
+                backgroundColor: theme.palette.textFieldStyle.backgroundColor,
 				maxHeight: 250,
 				overflowY: "auto"
               }}
               fullWidth={true}
               type="name"
               id="outlined-with-placeholder"
+              inputProps={{
+                style: {
+                  color: theme.palette.textFieldStyle.color,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                }
+              }}
               margin="normal"
 			  multiline
               variant="outlined"
@@ -6033,7 +6060,7 @@ const AppCreator = (defaultprops) => {
         />
         <Typography
           variant="h6"
-          style={{ marginTop: 10, marginBottom: 10, color: "white" }}
+          style={{ marginTop: 10, marginBottom: 10, color: theme.palette.text.primary }}
         >
           API information
         </Typography>
@@ -6042,14 +6069,15 @@ const AppCreator = (defaultprops) => {
         </Typography>
         <TextField
           color="primary"
-          style={{ backgroundColor: inputColor, marginTop: "5px" }}
+          style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, marginTop: "5px" }}
           InputProps={{
             classes: {
               notchedOutline: classes.notchedOutline,
             },
             style: {
               height: "50px",
-              color: "white",
+              color: theme.palette.textFieldStyle.color,
+              backgroundColor: theme.palette.textFieldStyle.backgroundColor,
               fontSize: "1em",
             },
           }}
@@ -6061,7 +6089,7 @@ const AppCreator = (defaultprops) => {
           variant="outlined"
           value={baseUrl}
           helperText={
-            <span style={{ color: "white", marginBottom: "2px" }}>
+            <span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
               Must start with http(s):// and CANT end with /.{" "}
             </span>
           }
@@ -6098,7 +6126,7 @@ const AppCreator = (defaultprops) => {
 						<a
 							target="_blank"
 							href="https://shuffler.io/docs/app_creation#authentication"
-							style={{ textDecoration: "none", color: "#f85a3e" }}
+							style={{ textDecoration: "none", color: theme.palette.linkColor }}
 						>
 							Learn more about app authentication
 						</a>
@@ -6122,15 +6150,15 @@ const AppCreator = (defaultprops) => {
 							}}
 							value={authenticationOption}
 							style={{
-								backgroundColor: inputColor,
-								color: "white",
+								backgroundColor: theme.palette.backgroundColor,
+								color: theme.palette.text.primary,
 								height: "50px",
 							}}
 						>
 							{authenticationOptions.map((data, index) => (
 								<MenuItem
 									key={index}
-									style={{ backgroundColor: inputColor, color: "white" }}
+									sx={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.backgroundColor} }}
 									value={data}
 								>
 									{data}
@@ -6165,14 +6193,14 @@ const AppCreator = (defaultprops) => {
 									value={oauth2Type}
 									style={{
 										backgroundColor: inputColor,
-										color: "white",
+										color: theme.palette.text.primary,
 										height: "50px",
 									}}
 								>
 									{["delegated", "application"].map((data, index) => (
 										<MenuItem
 											key={index}
-											style={{ backgroundColor: inputColor, color: "white" }}
+											style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
 											value={data}
 										>
 											{data}
@@ -6193,14 +6221,14 @@ const AppCreator = (defaultprops) => {
 										value={oauth2GrantType}
 										style={{
 											backgroundColor: inputColor,
-											color: "white",
+											color: theme.palette.text.primary,
 											height: "50px",
 										}}
 									>
 										{["client_credentials", "password"].map((data, index) => (
 											<MenuItem
 												key={index}
-												style={{ backgroundColor: inputColor, color: "white" }}
+												style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
 												value={data}
 											>
 												{data}
@@ -6225,8 +6253,8 @@ const AppCreator = (defaultprops) => {
 
         {/*authenticationOption === "No authentication" ? null :
 						<FormControlLabel
-							style={{color: "white", marginBottom: 0, marginTop: 20}}
-							label=<div style={{color: "white"}}>Authentication required (default true)</div>
+							style={{color: theme.palette.text.primary, marginBottom: 0, marginTop: 20}}
+							label=<div style={{color: theme.palette.text.primary}}>Authentication required (default true)</div>
 							control={<Switch checked={authenticationRequired} onChange={() => {
 								setAuthenticationRequired(!authenticationRequired)
 							}} />}
@@ -6321,7 +6349,7 @@ const AppCreator = (defaultprops) => {
 		  {errorCode.length > 0 ? `Upload Error: ${errorCode}` : null}
 		</Typography>
 
-      </Paper>
+      </div>
     </div>
   );
 
diff --git a/frontend/src/views/AppExplorer.jsx b/frontend/src/views/AppExplorer.jsx
index b19e5cdd..c2b138a9 100644
--- a/frontend/src/views/AppExplorer.jsx
+++ b/frontend/src/views/AppExplorer.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from "react";
 
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import ReactGA from "react-ga4";
 import Markdown from "react-markdown";
 import algoliasearch from "algoliasearch/lite";
@@ -86,53 +86,6 @@ import { sortByKey } from "../views/AngularWorkflow.jsx";
 import { v4 as uuidv4 } from "uuid";
 import aa from "search-insights";
 
-const surfaceColor = "#27292D";
-const inputColor = "#383B40";
-
-const chipStyle = {
-  marginTop: 5,
-  backgroundColor: "#3d3f43",
-  height: 30,
-  marginRight: 5,
-  paddingLeft: 5,
-  paddingRight: 5,
-  height: 28,
-  cursor: "pointer",
-  borderColor: "#3d3f43",
-  color: "white",
-};
-
-const actionListStyle = {
-  paddingLeft: 10,
-  paddingRight: 10,
-  paddingTop: 10,
-  marginTop: 5,
-  backgroundColor: inputColor,
-  display: "flex",
-  color: "white",
-  maxWidth: 350,
-  minWidth: 350,
-  maxHeight: 54,
-  overflow: "hidden",
-};
-
-const boxStyle = {
-  color: "white",
-  flex: "3",
-  margin: 10,
-  paddingLeft: 30,
-  paddingRight: 30,
-  paddingBottom: 30,
-  paddingTop: 30,
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-  maxHeight: 180,
-  overflow: "hidden",
-};
-
-const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
-
 
 // AppTypes:
 // 0 = OpenAPI (VALID)
@@ -162,7 +115,54 @@ const AppExplorer = (props) => {
   const classes = useStyles()
   let navigate = useNavigate()
 
-  const { leftSideBarOpenByClick, } = useContext(Context);
+  const { leftSideBarOpenByClick, themeMode, supportEmail } = useContext(Context);
+  const theme = getTheme(themeMode);
+
+  const surfaceColor = "#27292D";
+const inputColor = theme.palette.textFieldStyle.backgroundColor;
+
+const chipStyle = {
+  marginTop: 5,
+  backgroundColor: theme.palette.chipStyle.backgroundColor,
+  height: 30,
+  marginRight: 5,
+  paddingLeft: 5,
+  paddingRight: 5,
+  cursor: "pointer",
+  borderColor: theme.palette.chipStyle.borderColor,
+  color: theme.palette.chipStyle.color,
+};
+
+const actionListStyle = {
+  paddingLeft: 10,
+  paddingRight: 10,
+  paddingTop: 10,
+  marginTop: 5,
+  backgroundColor: inputColor,
+  display: "flex",
+  color: theme.palette.text.primary,
+  maxWidth: 350,
+  minWidth: 350,
+  maxHeight: 54,
+  overflow: "hidden",
+};
+
+const boxStyle = {
+  color: theme.palette.text.primary,
+  flex: "3",
+  margin: 10,
+  paddingLeft: 30,
+  paddingRight: 30,
+  paddingBottom: 30,
+  paddingTop: 30,
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  maxHeight: 180,
+  overflow: "hidden",
+};
+
+const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
 
   const params = useParams();
   //var props = JSON.parse(JSON.stringify(defaultprops))
@@ -385,9 +385,9 @@ const AppExplorer = (props) => {
       extraInfo = (
         <div
           style={{
-            backgroundColor: theme.palette.inputColor,
+            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
             padding: 15,
-            borderRadius: theme.palette?.borderRadius,
+            borderRadius: theme.palette?.textFieldStyle.borderRadius,
             marginBottom: 30,
             display: "flex",
           }}
@@ -555,7 +555,9 @@ const AppExplorer = (props) => {
 									}}
 									style={{
 										cursor: "pointer", 
-										color: "white",
+                    backgroundColor: theme.palette.chipStyle.backgroundColor,
+                    borderColor: theme.palette.chipStyle.borderColor,
+										color: theme.palette.chipStyle.color,
 										borderRadius: 40,
 										minWidth: 80,
 										marginRight: 10,
@@ -586,7 +588,9 @@ const AppExplorer = (props) => {
 									disabled={included === false}
 									style={{
 										cursor: included ? "pointer" : "default",
-										color: "white",
+										color: theme.palette.chipStyle.color,
+                    borderColor: theme.palette.chipStyle.borderColor,
+                    backgroundColor: theme.palette.chipStyle.backgroundColor,
 										borderRadius: 40,
 										minWidth: 80,
 										marginRight: 10,
@@ -776,7 +780,7 @@ const AppExplorer = (props) => {
 				if (responseJson.reason !== undefined) {
 					toast("Failed to perform action: "+responseJson.reason);
 				} else {
-					toast("Failed to perform action. Please try again or contact support@shuffler.io");
+					toast(`Failed to perform action. Please try again or contact ${supportEmail}`);
 				}
 			}
       } else {
@@ -3093,7 +3097,7 @@ const AppExplorer = (props) => {
               margin: 10,
               padding: 30,
               backgroundColor: boxStyle.backgroundColor,
-              color: "white",
+              color: theme.palette.text.primary,
               textAlign: "left",
               paddingBottom: 50,
               overflow: "hidden",
@@ -3117,12 +3121,12 @@ const AppExplorer = (props) => {
               style={{ marginBottom: 0, marginLeft: 0, marginRight: 0, minWidth: 800, maxWidth: 800, margin: "auto", }}
               aria-label="disabled tabs example"
             >
-              <Tab style={{marginLeft: 0, }} icon={<DescriptionIcon />} label="Docs" />
+              <Tab style={{marginLeft: 0, color: theme.palette.text.primary }} icon={<DescriptionIcon />} label="Docs" />
               <Tab icon={appType === 0 || appType === 2 ? <OpenInNewIcon /> : <AppsIcon />} label={appType === 0 || appType === 2 ? "Explore the API" : "Try it out"} />
 
-              <Tab icon={<ShowChartIcon />} label="Stats" />
-              <Tab icon={<PolylineIcon />} disabled label="Integrations" />
-              <Tab icon={<PersonIcon />} disabled={userdata.support !== true} label="Creator" value={4}  />
+              <Tab icon={<ShowChartIcon />} style={{color: theme.palette.text.primary}} label="Stats" />
+              <Tab icon={<PolylineIcon />} disabled style={{color: theme.palette.text.secondary}} label="Integrations" />
+              <Tab icon={<PersonIcon />} disabled={userdata.support !== true} style={{color: userdata.support !== true ? theme.palette.text.secondary: theme.palette.text.primary}} label="Creator" value={4}  />
             </Tabs>
             <div style={{ marginTop: 25 }}>
               {selectedTab === 1 && app.skipped_build == false ? (
@@ -3883,12 +3887,12 @@ const AppExplorer = (props) => {
         </div>
         <Button
           variant="contained"
-          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544" }}
+          color="primary"
+          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,  }}
           onClick={() => {
 			updateAppField(selectedApp.id, "sharing", true);
             setPublishModalOpen(false);
           }}
-          color="primary"
         >
           Yes
         </Button>
@@ -3919,13 +3923,13 @@ const AppExplorer = (props) => {
           <Breadcrumbs
             aria-label="breadcrumb"
             separator="›"
-            style={{ color: "white", marginLeft: 15, flex: 100 }}
+            style={{ color: theme.palette.text.primary, marginLeft: 15, flex: 100 }}
           >
             <Link
               to="/search"
               style={{ textDecoration: "none", color: "inherit" }}
             >
-              <h2 style={{ color: "rgba(255,255,255,0.5)" }}>
+              <h2 style={{ color: theme.palette.text.primary }}>
                 <AppsIcon style={{ marginRight: 10 }} />
                 Apps
               </h2>
@@ -3971,9 +3975,7 @@ const AppExplorer = (props) => {
           ) : null}
           {appType === 0 || appType === 2 ? (
             <IconButton
-              color="primary"
               style={{ marginRight: 20 }}
-              variant="contained"
               onClick={() => {
                 const data = openapi;
                 let exportFileDefaultName = name + ".json";
@@ -4020,7 +4022,7 @@ const AppExplorer = (props) => {
               }}
             >
               <Tooltip title="Download OpenAPI" placement="top">
-                <CloudDownloadIcon color="secondary" />
+                <CloudDownloadIcon color={theme.palette.text.primary} />
               </Tooltip>
             </IconButton>
           ) : null}
@@ -4036,7 +4038,7 @@ const AppExplorer = (props) => {
 				}}
 			>
 				<Tooltip title="Public Authentication link for the current Organization. Times out every 24 hours." placement="top">
-				  	<LockOpenIcon />
+				  	<LockOpenIcon color={theme.palette.text.primary}/>
 				</Tooltip>
 			</IconButton>
 		  : null}
@@ -4197,8 +4199,8 @@ const AppExplorer = (props) => {
                   }}
                   style={{
                     width: 150,
-                    backgroundColor: theme.palette.surfaceColor,
-                    color: "white",
+                    backgroundColor: theme.palette.backgroundColor,
+                    color: theme.palette.text.primary,
                     height: 40,
                     marginTop: 5
                   }}
@@ -4213,7 +4215,7 @@ const AppExplorer = (props) => {
                     return (
                       <MenuItem
                         key={data}
-                        style={{ backgroundColor: inputColor, color: "white", display: 'flex' }}
+                        sx={{ backgroundColor: inputColor, color: theme.palette.text.primary, display: 'flex', "&:hover": { backgroundColor: theme.palette.hoverColor } }}
                         value={data}
                       >
                         {data}
@@ -4373,8 +4375,8 @@ const AppExplorer = (props) => {
                       style={{
                         borderRadius: 25,
                         fontSize: 11,
-                        color: "white",
-                        backgroundColor: "rgba(255,255,255,0)",
+                        color: theme.palette.text.primary,
+                        backgroundColor: theme.palette.platformColor,
                         border: "1px solid #ddf4e1",
                         textTransform: "none",
                         marginLeft: 4,
@@ -4466,6 +4468,11 @@ const AppExplorer = (props) => {
             color: "white",
             textAlign: "center",
           }}
+          sx={{
+            "&:hover": {
+              backgroundColor: theme.palette.hoverColor,
+            },
+          }}
         >
           <CardActionArea
             component={Link}
@@ -4553,6 +4560,11 @@ const AppExplorer = (props) => {
               color: "white",
               textAlign: "center",
             }}
+            sx={{
+              "&:hover": {
+                backgroundColor: theme.palette.hoverColor,
+              },
+            }}
           >
             <CardActionArea
               component={Link}
diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx
index c5fb9d38..d4d1c822 100644
--- a/frontend/src/views/Apps2.jsx
+++ b/frontend/src/views/Apps2.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useCallback, memo, useMemo, useRef } from "react";
-import theme from "../theme.jsx";
+import {getTheme} from "../theme.jsx";
 import { isMobile } from "react-device-detect";
 
 import { useLocation, useNavigate } from "react-router-dom";
@@ -55,7 +55,9 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
   const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000";
   //const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`;
   const appUrl = `/apps/${data.id}` 
-
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
+  
   var canEditApp = userdata?.support || userdata?.id === data?.owner || 
         (userdata?.admin === "true" && userdata?.active_org?.id === data?.reference_org) || data?.contributors?.includes(userdata?.id)
 
@@ -104,7 +106,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
               display: "flex",
               fontFamily: theme?.typography?.fontFamily,
               width: '100%',
-              backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "#212121"
+              backgroundColor: mouseHoverIndex === index ? theme.palette.hoverColor :  theme.palette.platformColor,
             }}
             onClick={() => {
               handleAppClick(data);
@@ -150,7 +152,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
-                  color: '#F1F1F1'
+                  color: theme.palette.text.primary,
                 }}>
                   {data.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
                 </div>
@@ -161,7 +163,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
                 marginLeft: 8,
-                color: "rgba(158, 158, 158, 1)"
+                color: theme.palette.text.secondary,
               }}>
                 {data.categories ? data.categories.join(", ") : "NA"}
               </div>
@@ -172,7 +174,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                 whiteSpace: "nowrap",
                 width: "100%",
                 marginLeft: 8,
-                color: "rgba(158, 158, 158, 1)",
+                color: theme.palette.text.secondary,
                 display: "flex",
                 justifyContent: 'space-between',
                 paddingRight: 15,
@@ -202,7 +204,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                   }}>
                     {
                       canEditApp ? (
-                        <button style={{ backgroundColor: "rgba(73, 73, 73, 1)", border: "none", cursor: "pointer", color: "white", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", height: 35 }}
+                        <Button style={{  border: "none", cursor: "pointer", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", height: 35 }}
                           onClick={(event) => {
                             event.preventDefault();
                             event.stopPropagation();
@@ -211,11 +213,13 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                               navigate(editUrl)
                             }
                           }}
+                          variant="contained"
+                          color="secondary"
                         >
                           <EditIcon />
-                        </button>
+                        </Button>
                       ) : (
-                        <button style={{ backgroundColor: "rgba(73, 73, 73, 1)", border: "none", cursor: "pointer", color: "white", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", height: 35 }}
+                        <Button variant="contained" color="secondary" style={{ border: "none", cursor: "pointer", color: "white", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", height: 35 }}
                         onClick={(event) => {
                           event.preventDefault();
                           event.stopPropagation();
@@ -224,26 +228,23 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
                         }}
                         >
                         <ForkRightIcon />
-                        </button>
+                        </Button>
                       )
                     }
 
                     <Button
-					  disabled={data?.reference_org === userdata?.active_org?.id}
+					            disabled={data?.reference_org === userdata?.active_org?.id}
+                      variant="contained"
+                      color="secondary"
                       className="deactivate-button"
                       sx={{
                         width: 110,
                         height: 35,
                         borderRadius: 0.75,
-                        bgcolor: "rgba(73, 73, 73, 1)",
-                        color: "rgba(241, 241, 241, 1)",
                         textTransform: "none",
                         fontSize: 16,
                         fontFamily: theme?.typography?.fontFamily,
                         transition: "background-color 0.3s ease",
-                        "&:hover": {
-                          bgcolor: "rgba(93, 93, 93, 1)",
-                        },
                       }}
                       onMouseDown={(e) => e.stopPropagation()}
                       onMouseUp={(e) => e.stopPropagation()}
@@ -308,6 +309,8 @@ const Hits = ({
   const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
   const [deactivatedIndexes, setDeactivatedIndexes] = React.useState([]);
   const [isLoading, setIsLoading] = useState(false)
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
 
   useEffect(() => {
     var baseurl = globalUrl;
@@ -507,7 +510,7 @@ const Hits = ({
                             overflow: "hidden",
                             display: "flex",
                             width: '100%',
-                            backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121",
+                            backgroundColor: hoverEffect === index ? theme.palette.hoverColor :  theme.palette.platformColor,
                             fontFamily: theme?.typography?.fontFamily
                           }}
                             onClick={() => {
@@ -550,7 +553,7 @@ const Hits = ({
                                   maxWidth: "90%",
                                   textOverflow: "ellipsis",
                                   whiteSpace: "nowrap",
-                                  color: '#F1F1F1'
+                                  color: theme.palette.text.primary
                                 }}
                               >
                                 {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
@@ -558,7 +561,7 @@ const Hits = ({
                                   overflow: "hidden",
                                   textOverflow: "ellipsis",
                                   whiteSpace: "nowrap",
-                                  color: '#F1F1F1'
+                                  color: theme.palette.text.primary,
                                 }}>
                                   {normalizedString(data.name)}
                                 </div>
@@ -569,7 +572,7 @@ const Hits = ({
                                   overflow: "hidden",
                                   textOverflow: "ellipsis",
                                   whiteSpace: "nowrap",
-                                  color: "rgba(158, 158, 158, 1)",
+                                  color: theme.palette.text.secondary,
                                   marginTop: 5,
                                 }}
                               >
@@ -600,12 +603,12 @@ const Hits = ({
                                           componentsProps={{
                                             tooltip: {
                                               sx: {
-                                                backgroundColor: "rgba(33, 33, 33, 1)",
-                                                color: "rgba(241, 241, 241, 1)",
+                                                backgroundColor: theme.palette.tooltip.backgroundColor,
+                                                color: theme.palette.tooltip.color,
                                                 width: "auto",
                                                 height: "auto",
                                                 fontSize: 16,
-                                                border: "1px solid rgba(73, 73, 73, 1)",
+                                                border: theme.palette.tooltip.border,
                                               }
                                             }
                                           }}
@@ -650,15 +653,15 @@ const Hits = ({
                                     <div>
                                       {allActivatedAppIds && allActivatedAppIds?.includes(data.objectID) ? (
                                         <Button
-                                          style={{
-                                            width: 110,
-                                            height: 35,
-                                            borderRadius: 4,
-                                            backgroundColor: "rgba(73, 73, 73, 1)",
-                                            color: "rgba(241, 241, 241, 1)",
+                                         variant="contained"
+                                         color="secondary"
+                                          sx={{
+                                            width: "110px",
+                                            height: "35px",
+                                            borderRadius: "4px",
                                             textTransform: "none",
                                             fontFamily: theme?.typography?.fontFamily,
-                                            fontSize: 16,
+                                            fontSize: "16px",
                                           }}
                                           onMouseDown={(e) => e.stopPropagation()}
                                           onMouseUp={(e) => e.stopPropagation()}
@@ -671,9 +674,9 @@ const Hits = ({
                                       ) : (
 
                                         <Button
+                                          variant="contained"
+                                          color="primary"
                                           style={{
-                                            backgroundColor: "#FF8544",
-                                            color: "black",
                                             width: 102,
                                             height: 35,
                                             borderRadius: 4,
@@ -719,6 +722,8 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
   const inputRef = useRef(null);
   const [localQuery, setLocalQuery] = useState(searchQuery);
   const location = useLocation();
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
   // Initialize search when component mounts or when switching to Discover tab
   useEffect(() => {
     if (searchQuery) {
@@ -779,7 +784,8 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
       InputProps={{
         style: {
           borderRadius: 4,
-          height: 45
+          height: 45,
+          backgroundColor: theme.palette.textFieldStyle.backgroundColor,
         },
         endAdornment: (
           <InputAdornment position="end">
@@ -809,6 +815,8 @@ const CustomHits = connectHits(Hits);
 
 // Custom Category Dropdown Component
 const CategoryDropdown = ({ items, currentRefinement, refine }) => {
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
   const handleChange = (event) => {
     const value = event.target.value;
     refine(value);
@@ -823,7 +831,7 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
         onChange={handleChange}
         displayEmpty
         multiple
-        style={{ borderRadius: 4, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1 }}
+        style={{ borderRadius: 4, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColor, color:  theme.palette.textFieldStyle.color }}
         renderValue={(selected) => {
           if (selected.length === 0) return 'All Categories';
           return (
@@ -875,6 +883,9 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
     refine(value);
   };
 
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
+
   return (
     <div style={{ position: 'relative', width: '100%' }}>
       <Select
@@ -884,7 +895,7 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
         onChange={handleChange}
         displayEmpty
         multiple
-        style={{ borderRadius: 4, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1 }}
+        style={{ borderRadius: 4, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColor, color:  theme.palette.textFieldStyle.color }}
         renderValue={(selected) => {
           if (selected.length === 0) return 'All Labels';
           return (
@@ -930,6 +941,7 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
     </div>
   );
 };
+
 const CustomLabelDropdown = connectRefinementList(LabelDropdown);
 
 
@@ -970,6 +982,8 @@ const filterApps = (apps, searchQuery, selectedCategory, selectedLabel) => {
 
 const LoginPrompt = () => {
   const navigate = useNavigate();
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
   return (
     <div style={{
       display: "flex",
@@ -1006,9 +1020,11 @@ const LoginPrompt = () => {
 
 // Add this new component for the app skeleton
 const AppSkeleton = () => {
+  const { themeMode } = useContext(Context);
+  const theme = getTheme(themeMode);
   return (
     <Paper elevation={0} style={{
-      backgroundColor: "#212121",
+      backgroundColor: theme.palette.platformColor,
       width: "100%",
       height: 120,
       borderRadius: 4,
@@ -1025,7 +1041,7 @@ const AppSkeleton = () => {
           height={90}
           style={{
             borderRadius: 4,
-            backgroundColor: "rgba(255, 255, 255, 0.1)"
+            backgroundColor: theme.palette.loaderColor
           }}
         />
         <div style={{
@@ -1039,19 +1055,19 @@ const AppSkeleton = () => {
             variant="text"
             width="40%"
             height={24}
-            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+            style={{ backgroundColor: theme.palette.loaderColor }}
           />
           <Skeleton
             variant="text"
             width="60%"
             height={20}
-            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+            style={{ backgroundColor: theme.palette.loaderColor }}
           />
           <Skeleton
             variant="text"
             width="30%"
             height={20}
-            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+            style={{ backgroundColor: theme.palette.loaderColor }}
           />
         </div>
       </div>
@@ -1117,6 +1133,9 @@ const Apps2 = (props) => {
   const [validation, setValidation] = useState(null);
   const [createAppModalOpen, setCreateAppModalOpen] = useState(false);
 
+  const {themeMode, brandColor} = useContext(Context);
+  const theme = getTheme(themeMode, brandColor);
+
   const baseRepository = "https://github.com/frikky/shuffle-apps";
 
   const isCloud =
@@ -1373,7 +1392,6 @@ const Apps2 = (props) => {
           //   setSelectedAction({});
           // }
         }
-
         if (privateapps.length > 0 && storageApps.length === 0) {
           try {
             localStorage.setItem("apps", JSON.stringify(privateapps))
@@ -1869,13 +1887,13 @@ const Apps2 = (props) => {
   }
 
   const tabActive = {
-    borderBottom: "5px solid #FF8544",
+    borderBottom: `5px solid ${theme.palette.primary.main}`,
     borderRadius: "2px",
-    color: "#FF8544"
+    color: theme.palette.primary.main,
   }
 
   return (
-    <div style={{ paddingTop: 70, paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease", backgroundColor: "#1A1A1A", fontFamily: theme?.typography?.fontFamily, zoom: 0.7, }}>
+    <div style={{ paddingTop: 70, paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease", backgroundColor: theme.palette.backgroundColor, fontFamily: theme?.typography?.fontFamily, zoom: 0.7, }}>
       <InstantSearch searchClient={searchClient} indexName="appsearch">
         <AppModal
           open={openModal}
@@ -1984,7 +2002,7 @@ const Apps2 = (props) => {
               </span>
             )}
           </div>
-          <div style={{ borderBottom: '1px solid gray', marginBottom: 30 }}>
+          <div style={{ borderBottom: themeMode === "dark" ? "1px solid #808080" : theme.palette.defaultBorder, marginBottom: 30 }}>
             <Tabs
               value={currTab}
               onChange={(event, newTab) => handleTabChange(event, newTab)}
@@ -2034,6 +2052,10 @@ const Apps2 = (props) => {
                   value={searchQuery}
                   id="shuffle_search_field"
                   onChange={handleSearchChange}
+                  style={{
+                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    color: theme.palette.textFieldStyle.color,
+                  }}
                   onKeyDown={(event) => {
                     if (event.key === "Enter") {
                       event.preventDefault();
@@ -2043,7 +2065,10 @@ const Apps2 = (props) => {
                   InputProps={{
                     style: {
                       borderRadius: 4,
-                      height: 45
+                      height: 45,
+                      backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                      color: theme.palette.textFieldStyle.color,
+                      fontSize: 18,
                     },
                     endAdornment: (
                       <InputAdornment position="end">
@@ -2087,7 +2112,9 @@ const Apps2 = (props) => {
                     style={{
                       borderRadius: 4,
                       height: 45,
-                      fontFamily: theme?.typography?.fontFamily
+                      fontFamily: theme?.typography?.fontFamily,
+                      backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                      fontSize: 18,
                     }}
                     renderValue={(selected) => {
                       if (selected.length === 0) return 'All Categories';
@@ -2152,7 +2179,9 @@ const Apps2 = (props) => {
                     style={{
                       borderRadius: 4,
                       height: 45,
-                      fontFamily: theme?.typography?.fontFamily
+                      fontFamily: theme?.typography?.fontFamily,
+                      backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                      fontSize: 18,
                     }}
                     renderValue={(selected) => {
                       if (selected.length === 0) return 'All Labels';
@@ -2211,13 +2240,11 @@ const Apps2 = (props) => {
                   width: '100%',
                   borderRadius: '4px',
                   textTransform: 'none',
-                  backgroundColor: "#FF8544",
-                  color: "#1A1A1A",
                   fontFamily: theme?.typography?.fontFamily,
                   fontSize: 16,
                   fontWeight: 500
                 }}
-                startIcon={<AddIcon style={{ color: "#1A1A1A" }} />}
+                startIcon={<AddIcon />}
               >
                 Create an App
               </Button>
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index 3e2cfe1b..2456f63d 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useLayoutEffect, useRef, useState, useContext, memo } from "react"
+import React, { useEffect, useLayoutEffect, useRef, useState, useContext, memo,  } from "react"
 import { toast } from 'react-toastify';
 import Markdown from 'react-markdown'
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import ReactJson from "react-json-view-ssr";
 import { isMobile } from "react-device-detect";
 import { BrowserView, MobileView } from "react-device-detect";
@@ -28,7 +28,8 @@ import {
     DialogTitle,
     Box,
     DialogContent,
-    InputAdornment
+    InputAdornment,
+    CircularProgress
 } from "@mui/material";
 import {
     Link as LinkIcon,
@@ -171,6 +172,9 @@ export const Img = (props) => {
 	var height = "auto" 
 	var width = isArticlePage ? 1000 : isFormPage ? 400: 750
 
+    const { themeMode } = useContext(Context)
+    const theme = getTheme(themeMode)
+
     const docsImageStyle = {
 		border: isFormPage ? null : "1px solid rgba(255,255,255,0.3)", 
         borderRadius: theme.palette?.borderRadius, 
@@ -215,6 +219,8 @@ export const CodeHandler = (props) => {
     const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
 
     const validate = validateJson(propvalue)
+    const {themeMode } = useContext(Context)
+    const theme = getTheme(themeMode)
 
     var newprop = propvalue
     if (validate.valid === false) {
@@ -293,6 +299,7 @@ const Docs = (defaultprops) => {
 
     let navigate = useNavigate();
     const location = useLocation();
+    const pathname = location.pathname
     // Quickfix for react router 5 -> 6 
     const params = useParams();
     //var props = JSON.parse(JSON.stringify(defaultprops))
@@ -301,6 +308,8 @@ const Docs = (defaultprops) => {
     props.match.params = params
 
     //console.log("PARAMS: ", params)
+    const { themeMode } = useContext(Context)
+    const theme = getTheme(themeMode)
 
     const [mobile, setMobile] = useState(serverMobile === true || isMobile === true ? true : false);
     const [data, setData] = useState("");
@@ -326,9 +335,37 @@ const Docs = (defaultprops) => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [activeSubItem, setActiveSubItem] = useState(false);
     const headingElementsRef = useRef({})
+    const [hasRedirected, setHasRedirected] = useState(false)
     var isArticlePage = window.location.pathname.includes("/articles/") || window.location.pathname === "/articles" ? true : false;
     const searchFieldRef = useRef(null);
 
+    const handleDocRedirectForPartners = () => {
+        if (hasRedirected) return;
+
+        if (
+            userdata &&
+            userdata?.org_status?.includes("integration_partner") &&
+            userdata?.active_org?.branding?.documentation_link?.length > 0
+        ) {
+            const docLink = userdata?.active_org?.branding?.documentation_link;
+            if (docLink && docLink !== "") {
+                setHasRedirected(true);
+                if (docLink.startsWith('http')) {
+                    window.location.replace(docLink);
+                } else {
+                    navigate(docLink);
+                }
+            }
+        }
+    };
+
+
+    useEffect(() => {
+        if (isLoggedIn && isLoaded) {
+            handleDocRedirectForPartners()
+        }
+
+    }, [isLoggedIn, isLoaded]);
 
     useEffect(() => {
         fetchDocList();
@@ -353,6 +390,8 @@ const Docs = (defaultprops) => {
 				navigate('/docs/apps#app-creation-introduction')
 			}
 		}
+
+        
     }, [location]);
 
     useEffect(() => {
@@ -501,19 +540,25 @@ const Docs = (defaultprops) => {
             }
           }}
           PaperProps={{
-            style: {
-              color: "white",
-              minWidth: 750,
+            sx: {
+              color: theme.palette.DialogStyle.color,
+              minWidth: "750px",
               minHeight: "180px",
               maxHeight: "85vh",
-              borderRadius: 16,
+              borderRadius: theme.palette.DialogStyle.borderRadius,
               border: "1px solid var(--Container-Stroke, #494949)",
-              background: "var(--Container, #000000)",
+              background: theme.palette.DialogStyle.backgroundColor,
               boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
               position: "fixed",
               top: "70px",
               left: "50%",
               transform: "translateX(-50%)",
+              '& .MuiDialogContent-root': {
+                backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+                },
+                '& .MuiDialogTitle-root': {
+                backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+                },
             },
           }}
           sx={{
@@ -526,7 +571,7 @@ const Docs = (defaultprops) => {
           <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", px: 2, pr: 3, pt: 2 }}>
             <DialogTitle
               sx={{ 
-                color: "var(--Paragraph-text, #C8C8C8)",
+                color: theme.palette.DialogStyle.color,
                 p: 0,
                 m: 0,
                 ml: 1.5,
@@ -594,7 +639,7 @@ const Docs = (defaultprops) => {
     }
 
     const SidebarPaperStyle = {
-        backgroundColor: isArticlePage ? "transparent" : "rgb(26,26,26)",
+        backgroundColor: isArticlePage ? "transparent" : theme.palette.backgroundColor,
         border: isArticlePage ? "none" : undefined,
         borderRadius: isArticlePage ? "none" : undefined,
         boxShadow: isArticlePage ? "none" : undefined,
@@ -663,9 +708,9 @@ const Docs = (defaultprops) => {
             extraInfo = (
                 <div
                     style={{
-                        backgroundColor: theme.palette.inputColor,
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                         padding: 15,
-                        borderRadius: theme.palette?.borderRadius,
+                        borderRadius: theme.palette?.textFieldStyle.borderRadius,
                         marginBottom: isArticlePage ? 25 : 30,
                         display: "flex",
                     }}
@@ -679,7 +724,7 @@ const Docs = (defaultprops) => {
                                     href={selectedMeta.link}
                                     style={{ textDecoration: "none", color: "#f85a3e" }}
                                 >
-                                    <Button style={{ color: "white", }} variant="outlined" color="secondary">
+                                    <Button variant="outlined" color="secondary">
                                         <EditIcon /> &nbsp;&nbsp;Edit
                                     </Button>
                                 </a>
@@ -788,7 +833,7 @@ const Docs = (defaultprops) => {
                         paddingLeft: "0.3em", rotate: "-30deg",
                         paddingTop: "0.9em", display: props.level === 1 ? "none" : "block",
                     }}>
-                        <LinkIcon />
+                        <LinkIcon style={{color: theme.palette.textColor}} />
                     </Link>
                 </div>
                 {isArticlePage ? (userdata?.support ? extraInfo : "") : extraInfo}
@@ -1028,13 +1073,12 @@ const Docs = (defaultprops) => {
     }
 
     const markdownStyle = {
-        color: "rgba(255, 255, 255, 0.90)",
+        color: theme.palette.textColor,
         overflow: "hidden",
         paddingBottom: 100,
         margin: "auto",
         maxWidth: "100%",
         minWidth: "100%",
-        overflow: "hidden",
         fontSize: isMobile ? "1.3rem" : "1.1rem",
     };
 
@@ -1188,6 +1232,7 @@ const Docs = (defaultprops) => {
     const activeHrefStyleToc2 = {
         ...hrefStyleToc2,
         color: "#f86a3e",
+        fontFamily: theme.typography.fontFamily,
     };
 
     const activeListItemStyle = {
@@ -1228,9 +1273,10 @@ const Docs = (defaultprops) => {
                                             </InputAdornment>
                                         ),
                                         style: {
-                                            backgroundColor: "#212121",
+                                            backgroundColor: theme.palette.platformColor,
                                             borderRadius: 4,
-                                            color: "white",
+                                            fontSize: 18,
+                                            color: theme.palette.textColor,
                                         },
                                     }}
                                     style={{
@@ -1290,16 +1336,17 @@ const Docs = (defaultprops) => {
                                         >
                                             <ListItemText
                                                 style={{ 
-                                                    color: itemMatching ? "#f86a3e" : "inherit",
+                                                    color: itemMatching ? "#f86a3e" : theme.palette.textColor,
                                                     flex: 1,
                                                 }}
                                                 primary={
                                                     <Typography
-                                                        variant="body1"
                                                         style={{
                                                             whiteSpace: "nowrap",
                                                             overflow: "hidden",
+                                                            color : "inherit",
                                                             textOverflow: "ellipsis",
+                                                            fontSize: "18px",
                                                         }}
                                                     >
                                                         {newname}
@@ -1371,7 +1418,7 @@ const Docs = (defaultprops) => {
                     )}
                     {tocLines.length > 0 ?
                         (
-                            <h4 style={{ fontWeight: 600, margin: 0, fontSize: "16px", marginBottom: "8px" }}>Table Of Content</h4>
+                            <h4 style={{ fontWeight: 600, margin: 0, fontSize: "16px", marginBottom: "8px", color: theme.palette.text.primary, }}>Table Of Content</h4>
 
                         ) : null}
                     <div
@@ -1393,16 +1440,17 @@ const Docs = (defaultprops) => {
                                             paddingLeft: isArticlePage ? "0" : "8px",
                                             paddingRight: isArticlePage ? "0" : "8px",
                                             lineHeight: "20px",
-                                            color: activeId === data.id ? "#f86a3e" : "inherit", 
                                         }}
                                         onClick={(e) => {
                                             handleCollapse(index)
                                             setActiveId(data.id)
                                         }}
                                     >
-                                        {data.title}
+                                        <Typography style={{ fontSize: 14, fontWeight: 400, color: activeId === data.id ? "#f86a3e" : theme.palette.textColor, }}>
+                                            {data.title}
+                                        </Typography>
                                         {data.items.length > 0 ? (
-                                            <>{isopen == index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}</>
+                                            <>{isopen === index ? <ExpandMoreIcon style={{color: theme.palette.text.secondary}} /> : <KeyboardArrowRightIcon style={{color: theme.palette.text.secondary}} />}</>
                                         ) : null}
                                     </ListItemButton>
                                     {
@@ -1414,7 +1462,7 @@ const Docs = (defaultprops) => {
                                                     return (
                                                         <ListItemButton
                                                             key={i}
-                                                            style={activeSubItem === d.id ? activeHrefStyleToc2 : hrefStyleToc2}
+                                                            style={activeSubItem === d.id ? activeHrefStyleToc2 : {...hrefStyleToc2, color: theme.palette.text.secondary,  fontFamily: theme.typography.fontFamily,}}
                                                             href={`#${d.id}`}
                                                             onClick={(e) => {
                                                                 // e.preventDefault()
@@ -1577,7 +1625,7 @@ const Docs = (defaultprops) => {
 
     // Padding and zIndex etc set because of footer in cloud.
 const loadedCheck = (
-    <DocsWrapper isLoggedIn={isLoggedIn} isLoaded={isLoaded}>
+    <DocsWrapper isLoggedIn={isLoggedIn} isLoaded={isLoaded} userdata={userdata}>
         <DocsContent postDataBrowser={postDataBrowser} postDataMobile={postDataMobile}/>
     </DocsWrapper>
 );
@@ -1589,6 +1637,8 @@ return <div>{loadedCheck}</div>;
 export default Docs;
 
 const DocsContent = memo(({postDataBrowser, postDataMobile}) => {
+    const { themeMode } = useContext(Context);
+    const theme = getTheme(themeMode);
     return(
         <div style={{fontFamily: theme?.palette?.fontFamily}}>
             <BrowserView>{postDataBrowser}</BrowserView>
@@ -1596,10 +1646,22 @@ const DocsContent = memo(({postDataBrowser, postDataMobile}) => {
         </div>
 )})
 
-const DocsWrapper = memo(({isLoggedIn, isLoaded, children })=>{
+const DocsWrapper = memo(({isLoggedIn, isLoaded, children, userdata })=>{
     
     const { leftSideBarOpenByClick, windowWidth } = useContext(Context);
 
+    useEffect(() => {
+        if (isLoaded && isLoggedIn && userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.branding.documentation_link?.length > 0) {
+            window.location.href = userdata?.active_org?.branding.documentation_link;
+        }
+    }, [isLoaded, isLoggedIn, userdata]);
+
+    if (isLoaded && isLoggedIn && userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.branding.documentation_link?.length > 0) {
+        return <CircularProgress style={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)"}} />;
+    }
+
+    
+
     return (
         <div style={{
             marginTop: window.location.pathname.includes("/articles/") ? 50 : undefined, 
diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx
index 6291e6a3..ccba780d 100755
--- a/frontend/src/views/LoginPage.jsx
+++ b/frontend/src/views/LoginPage.jsx
@@ -297,7 +297,7 @@ const LoginPage = props => {
 	const [showPassword, setShowPassword] = useState(false)
 	const [ssoUrl, setSSOUrl] = useState("");
 
-    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io";
+    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io" || window.location.host === "sandbox.shuffler.io";
 	const parsedsearch = serverside === true ? "" : window.location.search
 
 	useEffect(() => {
diff --git a/frontend/src/views/RunWorkflow.jsx b/frontend/src/views/RunWorkflow.jsx
index e7c617b8..a9a6cf5c 100644
--- a/frontend/src/views/RunWorkflow.jsx
+++ b/frontend/src/views/RunWorkflow.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
 import ReactDOM from "react-dom"
 
 import ReactJson from "react-json-view-ssr";
@@ -48,6 +48,7 @@ import {
   Edit as EditIcon,
   Polyline as PolylineIcon,
 } from '@mui/icons-material';
+import { Context } from '../context/ContextApi.jsx';
 
 const hrefStyle = {
 	color: "white", 
@@ -58,6 +59,7 @@ const hrefStyle = {
 const RunWorkflow = (defaultprops) => {
   const { globalUrl, userdata, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops;
 
+  const { supportEmail } = useContext(Context);
   let navigate = useNavigate();
   const [_, setUpdate] = useState(""); // Used to force rendring, don't remove
   const [explorerUi, setExplorerUi] = useState(false)
@@ -471,7 +473,7 @@ const RunWorkflow = (defaultprops) => {
 			}
 
 			if (response.status === 401 || response.status === 403) {
-				toast("This Form is not available for you to run. If you this is an error, contact support@shuffler.io with a link to this form")
+				toast(`This Form is not available for you to run. If you this is an error, contact ${supportEmail} with a link to this form`)
 			}
 
 			return response.json()
@@ -627,7 +629,7 @@ const RunWorkflow = (defaultprops) => {
         }
 
 		if (response.status === 401 || response.status === 403) {
-			toast("This Form is not available to you. If you think this is an error, please contact support@shuffler.io with the URL.")
+			toast(`This Form is not available to you. If you think this is an error, please contact ${supportEmail} with the URL.`)
 		}
 
         return response.json()
diff --git a/frontend/src/views/SetAuthentication.jsx b/frontend/src/views/SetAuthentication.jsx
index 63aec23c..2ec3e780 100755
--- a/frontend/src/views/SetAuthentication.jsx
+++ b/frontend/src/views/SetAuthentication.jsx
@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 
 import { Typography, CircularProgress } from "@mui/material";
 import theme from '../theme.jsx';
 
 import { red,  } from "../views/AngularWorkflow.jsx"
+import { Context } from "../context/ContextApi.jsx";
 
 const SetAuthentication = (props) => {
   const { globalUrl } = props;
-
+  const { supportEmail } = useContext(Context);
 	var headers = {
 		"Content-Type": "application/json",
 		"Accept": "application/json",
@@ -328,7 +329,7 @@ const SetAuthentication = (props) => {
         <b>{failed ? "Failed auth. Error: " : ""}</b> {response}
 				<br/>
 				<br/>
-        {failed ? "If the error persists, try to use fewer scopes. Contact support@shuffler.io if you need further assistance, and include the current URL and a screenshot. You may now close this window." : ""}
+        {failed ? `If the error persists, try to use fewer scopes. Contact ${supportEmail} if you need further assistance, and include the current URL and a screenshot. You may now close this window.` : ""}
       </Typography>
     </div>
   );
diff --git a/frontend/src/views/SettingsPage.jsx b/frontend/src/views/SettingsPage.jsx
index c19cd987..f10dbfb7 100755
--- a/frontend/src/views/SettingsPage.jsx
+++ b/frontend/src/views/SettingsPage.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 
 import { useNavigate } from "react-router-dom";
-import theme from '../theme.jsx';
+import {getTheme} from '../theme.jsx';
 import {
   Grid,
   Typography,
@@ -15,6 +15,7 @@ import {
 //import { useAlert
 import { ToastContainer, toast } from "react-toastify";
 import "../codeeditor-index.css";
+import { Context } from "../context/ContextApi.jsx";
 
 import { FileCopy, Visibility, VisibilityOff } from "@mui/icons-material";
 import IconButton from "@mui/material/IconButton";
@@ -40,6 +41,8 @@ const Settings = (props) => {
   const [MFARequired, setMFARequired] = React.useState(false);
   const [image2FA, setImage2FA] = React.useState("");
   const [value2FA, setValue2FA] = React.useState("");
+  const {themeMode, supportEmail} = useContext(Context);
+  const theme = getTheme(themeMode);
 
   // const [file, setFile] = React.useState("");
   // const [fileBase64, setFileBase64] = React.useState(
@@ -83,7 +86,7 @@ const Settings = (props) => {
 
   const boxStyle = {
     flex: "1",
-    color: "white",
+    color: theme.palette.text.primary,
     position: "relative",
     marginLeft: "10px",
     marginRight: "10px",
@@ -213,8 +216,8 @@ const Settings = (props) => {
       left: "50%",
       transform: "translate(-50%, -50%)",
       zIndex: "9999",
-      backgroundColor: "#1a1a1a",
-      color: "white",
+      backgroundColor: theme.palette.backgroundColor,
+      color: theme.palette.text.primary,
       padding: 20,
       borderRadius: 5,
       boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
@@ -223,7 +226,7 @@ const Settings = (props) => {
     };
 
     const closeIconButtonStyling = {
-      color: "white",
+      color: theme.palette.text.primary,
       border: "none",
       backgroundColor: "transparent",
       marginLeft: "90%",
@@ -243,7 +246,7 @@ const Settings = (props) => {
       width: "100%",
       fontSize: 16,
       backgroundColor: disabled ? "gray" : "red",
-      color: "white",
+      color: theme.palette.text.primary,
       cursor: disabled === false && "pointer",
     };
     const checkboxStyle = {
@@ -381,7 +384,7 @@ const Settings = (props) => {
               className="ais-RefinementList-checkbox"
               onClick={handleCheckBoxEvent}
             />
-            <label style={{ fontSize: "16px", color: "white" }}>
+            <label style={{ fontSize: "16px", color: theme.palette.text.primary }}>
               I have read the above information and I agree to it completely
             </label>
           </div>
@@ -410,7 +413,7 @@ const Settings = (props) => {
                   endAdornment: (
                     <IconButton
                       onClick={handlePasswordVisibility}
-                      style={{color:"white"}}
+                      style={{color:theme.palette.text.primary}}
                     >
                       {showPassword ? <VisibilityOff /> : <Visibility />}
                     </IconButton>
@@ -704,7 +707,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -732,7 +735,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -757,7 +760,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -788,7 +791,7 @@ const Settings = (props) => {
           InputProps={{
             style: {
               height: "50px",
-              color: "white",
+              color: theme.palette.text.primary,
             },
           }}
           color="primary"
@@ -806,7 +809,7 @@ const Settings = (props) => {
         InputProps={{
           style: {
             height: "50px",
-            color: "white",
+            color: theme.palette.text.primary,
           },
           endAdornment: (
             <>
@@ -857,7 +860,7 @@ const Settings = (props) => {
 							InputProps={{
 								style:{
 									height: "50px", 
-									color: "white",
+									color: theme.palette.text.primary,
 								},
 							}}
 							color="primary"
@@ -877,7 +880,7 @@ const Settings = (props) => {
 							InputProps={{
 								style:{
 									height: "50px", 
-									color: "white",
+									color: theme.palette.text.primary,
 								},
 							}}
 							color="primary"
@@ -899,7 +902,7 @@ const Settings = (props) => {
 							InputProps={{
 								style:{
 									height: "50px", 
-									color: "white",
+									color: theme.palette.text.primary,
 								},
 							}}
 							color="primary"
@@ -919,7 +922,7 @@ const Settings = (props) => {
 							InputProps={{
 								style:{
 									height: "50px", 
-									color: "white",
+									color: theme.palette.text.primary,
 								},
 							}}
 							color="primary"
@@ -954,7 +957,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -979,7 +982,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -1002,7 +1005,7 @@ const Settings = (props) => {
             InputProps={{
               style: {
                 height: "50px",
-                color: "white",
+                color: theme.palette.text.primary,
               },
             }}
             color="primary"
@@ -1046,7 +1049,7 @@ const Settings = (props) => {
 			{isCloud ?
 					<span>
 						<Typography variant="body1" color="textSecondary">
-							By <a href="/creators" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>joining the Creator Incentive Program</a> and connecting your Github account, you agree to our <a href="/docs/terms_of_service" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Terms of Service</a>, and acknowledge that your non-sensitive data will be turned into a <a target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}} href="https://shuffler.io/creators">creator account</a>. This enables you to earn a passive income from Shuffle. This IS reversible. Support: support@shuffler.io
+							By <a href="/creators" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>joining the Creator Incentive Program</a> and connecting your Github account, you agree to our <a href="/docs/terms_of_service" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Terms of Service</a>, and acknowledge that your non-sensitive data will be turned into a <a target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}} href="https://shuffler.io/creators">creator account</a>. This enables you to earn a passive income from Shuffle. This IS reversible. Support: {supportEmail}
 						</Typography>
 						<Button
 							style={{ height: 40, marginTop: 10 }}
@@ -1133,7 +1136,7 @@ const Settings = (props) => {
             height: "60px",
             marginTop: "10px",
             backgroundColor: "#d52b2b",
-            color: "white",
+            color: theme.palette.text.primary,
           }}
           // variant="contained"
           // color="primary"
diff --git a/frontend/src/views/UpdateAuthentication.jsx b/frontend/src/views/UpdateAuthentication.jsx
index c3309cf4..2e258fec 100644
--- a/frontend/src/views/UpdateAuthentication.jsx
+++ b/frontend/src/views/UpdateAuthentication.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 
 import ReactGA from "react-ga4";
 import { 
@@ -15,10 +15,11 @@ import { ToastContainer, toast } from "react-toastify"
 import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
 import AuthenticationWindow from "../components/AuthenticationWindow.jsx";
 import { base64_decode, appCategories } from "../views/AppCreator.jsx";
+import { Context } from "../context/ContextApi.jsx";
 
 const SetAuthentication = (props) => {
   const { globalUrl, serverside } = props;
-
+  const { supportEmail } = useContext(Context);
   const [app, setApp] = useState({});
   const [isAppLoaded, setIsAppLoaded] = useState(false);
   const [loadFail, setLoadFail] = useState("");
@@ -114,7 +115,7 @@ const SetAuthentication = (props) => {
 			setLoadFail(
 				<span>
 					<Typography variant="h4">
-						Failed to load the app. Please contact your provider or support@shuffler.io if this persists
+						Failed to load the app. Please contact your provider or {supportEmail} if this persists
 					</Typography>
 					<Button 
 						variant="contained"
diff --git a/frontend/src/views/Usecases2.jsx b/frontend/src/views/Usecases2.jsx
index 886427b3..950da807 100644
--- a/frontend/src/views/Usecases2.jsx
+++ b/frontend/src/views/Usecases2.jsx
@@ -9,7 +9,7 @@ import { Context } from "../context/ContextApi.jsx"
 import { ToastContainer, toast } from "react-toastify" 
 import { makeStyles, } from "@mui/styles"
 import classNames from "classnames"
-import theme from '../theme.jsx'
+import {getTheme} from '../theme.jsx'
 
 import {
 	Autocomplete,
@@ -123,7 +123,8 @@ const ParseUsecaseDesc = (priority, appFramework) => {
 
 const UsecaseListComponent = (props) => {
 	const { keys, userdata, isCloud, globalUrl, frameworkData, isLoggedIn, workflows, setWorkflows, getFramework, setFrameworkData, } = props
-
+	const { themeMode, brandName } = useContext(Context)
+	const theme = getTheme(themeMode)
 
 	const [expandedIndex, setExpandedIndex] = useState(-1);
 	const [expandedItem, setExpandedItem] = useState(-1);
@@ -199,8 +200,8 @@ const UsecaseListComponent = (props) => {
 	const LoadingSkeleton = () => (
 		<div style={{paddingTop: 75, minHeight: 1000, textAlign: "left"}}>
 			{/* Header skeleton */}
-			<Skeleton variant="text" width={200} height={40} sx={{ bgcolor: 'grey.800' }} />
-			<Skeleton variant="text" width="60%" height={24} sx={{ marginTop: 3, bgcolor: 'grey.800' }} />
+			<Skeleton variant="text" width={200} height={40}  />
+			<Skeleton variant="text" width="60%" height={24} sx={{ marginTop: 3,  }} />
 
 			{/* Apps selection skeleton */}
 			<Skeleton variant="text" width={150} height={24} sx={{ marginTop: 5, marginBottom: 10 }} />
@@ -220,7 +221,7 @@ const UsecaseListComponent = (props) => {
 							variant="circular"
 							width={40}
 							height={40}
-							sx={{ bgcolor: 'grey.800' }}
+							sx={{ bgcolor: theme.palette.loaderColor}}
 						/>
 					))}
 				</div>
@@ -232,7 +233,7 @@ const UsecaseListComponent = (props) => {
 					sx={{ 
 						marginTop: "10px",
 						borderRadius: 20,
-						bgcolor: 'grey.800'
+						bgcolor: theme.palette.loaderColor
 					}} 
 				/>
 			</Paper>
@@ -275,13 +276,13 @@ const UsecaseListComponent = (props) => {
 											variant="circular" 
 											width={30} 
 											height={30} 
-											sx={{ bgcolor: 'grey.800' }} 
+											sx={{ bgcolor: theme.palette.loaderColor}} 
 										/>
 										<Skeleton 
 											variant="circular" 
 											width={30} 
 											height={30} 
-											sx={{ bgcolor: 'grey.800' }} 
+											sx={{ bgcolor: theme.palette.loaderColor }} 
 										/>
 									</div>
 									{/* Usecase title */}
@@ -289,7 +290,7 @@ const UsecaseListComponent = (props) => {
 										variant="text" 
 										width="70%" 
 										height={24} 
-										sx={{ bgcolor: 'grey.800' }} 
+										sx={{ bgcolor: theme.palette.loaderColor}} 
 									/>
 								</Paper>
 							</Grid>
@@ -596,10 +597,10 @@ const UsecaseListComponent = (props) => {
 
 	return (
 		<div style={{paddingTop: 75, minHeight: 1000, textAlign: "left",}}>
-			<Typography variant="h4" style={{color: "white", }}>
-				<b>Usecases</b>
+			<Typography variant="h4" color="textPrimary" style={{fontWeight: "bold"}}>
+				Usecases
 			</Typography>
-			<Typography variant="body1" style={{marginTop: 25, }}>
+			<Typography variant="body1" color="textPrimary" style={{marginTop: 25, }}>
 				Choose a template tailored to your automation requirements, ready for immediate use.
 			</Typography>
 
@@ -887,6 +888,9 @@ const Usecases2 = (props) => {
 	const [keys, setKeys] = useState([])
 	const [treeKeys, setTreeKeys] = useState([])
 
+ const { themeMode, brandName } = useContext(Context)
+ const theme = getTheme(themeMode)
+
   const [selectedUsecaseCategory, setSelectedUsecaseCategory] = useState("");
   const [selectedUsecases, setSelectedUsecases] = useState([]);
   const [usecases, setUsecases] = useState([])
@@ -987,7 +991,7 @@ const Usecases2 = (props) => {
 	}
 
 
-  document.title = "Shuffle - usecases";
+  document.title = brandName?.length > 0 ? `${brandName} - usecases` : "Shuffle - usecases";
   var dayGraphLabels = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
   var dayGraphData = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
 
diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx
index 100eed13..3fe551f4 100755
--- a/frontend/src/views/Workflows.jsx
+++ b/frontend/src/views/Workflows.jsx
@@ -440,6 +440,10 @@ export const collapseField = (field, inputdata) => {
     return true
   }
 
+  if (field.name === "result") {
+	  return false
+  }
+
   if (field.type === "array") {
     return true
   }
@@ -454,6 +458,112 @@ export const collapseField = (field, inputdata) => {
   return false
 }
 
+export const HandleJsonCopy = (base, copy, base_node_name) => {
+    if (typeof copy.name === "string") {
+      copy.name = copy.name.replaceAll(" ", "_");
+    }
+
+    //lol
+    if (typeof base === 'object' || typeof base === 'dict') {
+      base = JSON.stringify(base)
+    }
+
+    if (base_node_name === "execution_argument" || base_node_name === "Runtime Argument") {
+      base_node_name = "exec"
+    }
+
+    //console.log("COPY: ", base_node_name, copy);
+
+    //var newitem = JSON.parse(base);
+    var newitem = validateJson(base).result
+
+    var to_be_copied = "$" + base_node_name.toLowerCase().replaceAll(" ", "_");
+    for (let copykey in copy.namespace) {
+      if (copy.namespace[copykey].includes("Results for")) {
+        continue;
+      }
+
+      if (newitem !== undefined && newitem !== null) {
+        newitem = newitem[copy.namespace[copykey]];
+        if (!isNaN(copy.namespace[copykey])) {
+          to_be_copied += ".#";
+        } else {
+          to_be_copied += "." + copy.namespace[copykey];
+        }
+      }
+    }
+
+    if (newitem !== undefined && newitem !== null) {
+      newitem = newitem[copy.name];
+      if (!isNaN(copy.name)) {
+        to_be_copied += ".#";
+      } else {
+        to_be_copied += "." + copy.name;
+      }
+    }
+
+    to_be_copied = to_be_copied.replaceAll(" ", "_");
+	console.log("COPY: ", to_be_copied);
+    const elementName = "copy_element_shuffle";
+    var copyText = document.getElementById(elementName);
+    if (copyText !== null && copyText !== undefined) {
+      //console.log("NAVIGATOR: ", navigator);
+      const clipboard = navigator.clipboard;
+      if (clipboard === undefined) {
+        toast("Can only copy over HTTPS (port 3443)");
+        return;
+      }
+
+      navigator.clipboard.writeText(to_be_copied);
+      copyText.select();
+      copyText.setSelectionRange(0, 99999); /* For mobile devices */
+
+      /* Copy the text inside the text field */
+      document.execCommand("copy");
+      //console.log("COPYING!");
+      toast("Copied JSON path to clipboard.")
+    } else {
+      console.log("Couldn't find element ", elementName);
+    }
+}
+
+export const handleReactJsonClipboard = (copy) => {
+	const elementName = "copy_element_shuffle";
+	var copyText = document.getElementById(elementName);
+	if (copyText !== null && copyText !== undefined) {
+	  if (
+		copy.namespace !== undefined &&
+		copy.name !== undefined &&
+		copy.src !== undefined
+	  ) {
+		copy = copy.src;
+	  }
+
+	  const clipboard = navigator.clipboard;
+	  if (clipboard === undefined) {
+		toast("Can only copy over HTTPS (port 3443)");
+		return;
+	  }
+
+	  var stringified = JSON.stringify(copy);
+	  if (stringified.startsWith('"') && stringified.endsWith('"')) {
+		stringified = stringified.substring(1, stringified.length - 1);
+	  }
+
+	  navigator.clipboard.writeText(stringified);
+	  copyText.select();
+	  copyText.setSelectionRange(0, 99999); /* For mobile devices */
+
+	  /* Copy the text inside the text field */
+	  document.execCommand("copy");
+
+	  console.log("COPYING!");
+	  toast("Copied value to clipboard, NOT json path.")
+	} else {
+	  console.log("Failed to copy from " + elementName + ": ", copyText);
+	}
+}
+
 export const validateJson = (showResult) => {
 	if (showResult === undefined || showResult === null) {
 		return {
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index c4b80b46..1655c901 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useContext, memo, useState, useRef } from "react";
 import { useLocation, useNavigate, Link } from "react-router-dom";
 import ReactDOM from "react-dom"
-
+import { getTheme } from "../theme.jsx";
 // Material UI Icons
 import Add from '@mui/icons-material/Add';
 import Search from '@mui/icons-material/Search';
@@ -12,7 +12,6 @@ import GridOnIcon from '@mui/icons-material/GridOn';
 import ListIcon from '@mui/icons-material/List';
 import PublishIcon from '@mui/icons-material/Publish';
 import GetAppIcon from '@mui/icons-material/GetApp';
-
 // Material UI & Components
 import { makeStyles } from "@mui/styles";
 import { Navigate } from "react-router-dom";
@@ -103,7 +102,7 @@ import Dropzone from "../components/Dropzone.jsx";
 import { ToastContainer, toast } from "react-toastify"
 import { MuiChipsInput } from "mui-chips-input";
 import { v4 as uuidv4 } from "uuid";
-import theme from "../theme.jsx";
+// import theme from "./theme.jsx";
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinementList } from 'react-instantsearch-dom';
 import { debounce } from "lodash";
@@ -117,38 +116,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e52
 const svgSize = 24;
 const imagesize = 22;
 
-const useStyles = makeStyles(() => {
 
-    return {
-        datagrid: {
-            border: 0,
-            "& .MuiDataGrid-columnsContainer": {
-                backgroundColor:
-                    theme?.palette?.type === "light" ? "#fafafa" : theme?.palette?.inputColor,
-            },
-            "& .MuiDataGrid-iconSeparator": {
-                display: "none",
-            },
-            "& .MuiDataGrid-colCell, .MuiDataGrid-cell": {
-                borderRight: `1px solid ${theme?.palette?.type === "light" ? "white" : "#303030"
-                    }`,
-            },
-            "& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
-                borderBottom: `1px solid ${theme?.palette?.type === "light" ? "#f0f0f0" : "#303030"
-                    }`,
-            },
-            "& .MuiDataGrid-cell": {
-                color:
-                    theme?.palette?.type === "light" ? "white" : "rgba(255,255,255,0.65)",
-            },
-            "& .MuiPaginationItem-root, .MuiTablePagination-actions, .MuiTablePagination-caption":
-            {
-                borderRadius: 0,
-                color: "white",
-            },
-        },
-    }
-})
 
 
 
@@ -436,19 +404,7 @@ export const GetIconInfo = (action) => {
     return selectedItem;
 };
 
-const chipStyle = {
-    backgroundColor: "#2F2F2F",
-    marginRight: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-    height: 35,
-    cursor: "pointer",
-    borderColor: "#2F2F2F",
-    color: "#C8C8C8",
-    fontSize: "14px",
-    fontFamily: theme?.typography?.fontFamily,
-    borderRadius: "17.5px"
-};
+
 
 export const collapseField = (field) => {
     if (field === undefined || field === null) {
@@ -626,12 +582,14 @@ export const validateJson = (showResult) => {
 //Custom hook for handling styling of the dropzone
 const useDropzoneStyles = () => {
     const { leftSideBarOpenByClick } = useContext(Context);
+    const { themeMode, brandColor } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
 
     return {
         paddingTop: 70,
         // minHeight: 1000,
-        backgroundColor: "#1A1A1A",
-        fontFamily: theme?.typography?.fontFamily,
+        backgroundColor: theme.palette.backgroundColor,
+        fontFamily: theme.typography?.fontFamily,
         // maxWidth: window.innerWidth > 1366 ? 1366 : isMobile ? "100%" : 1200,
         paddingLeft: leftSideBarOpenByClick ? 200 : 0,
         transition: "padding-left 0.3s ease",
@@ -662,9 +620,59 @@ const Workflows2 = (props) => {
     const [isLoadingWorkflow, setIsLoadingWorkflow] = useState(false);
     const [isLoadingPublicWorkflow, setIsLoadingPublicWorkflow] = useState(false);
     const [view, setView] = useState(localStorage?.getItem("workflowView") || "grid");
-    const classes = useStyles(theme)
     const imgSize = 60;
 
+    const { themeMode, brandColor, brandName } = useContext(Context);
+    const theme = getTheme(themeMode, brandColor);
+    const chipStyle = {
+        backgroundColor: theme.palette.chipStyle.backgroundColor,
+        marginRight: 5,
+        paddingLeft: 5,
+        paddingRight: 5,
+        height: 35,
+        cursor: "pointer",
+        borderColor: theme.palette.chipStyle.borderColor,
+        color: theme.palette.chipStyle.color,
+        fontSize: "14px",
+        fontFamily: theme.typography?.fontFamily,
+        borderRadius: "17.5px"
+    };
+
+    const newStyles = makeStyles(() => {
+
+        return {
+            datagrid: {
+                border: 0,
+                "& .MuiDataGrid-columnsContainer": {
+                    backgroundColor:
+                        theme.palette?.type === "light" ? "#fafafa" : theme.palette?.inputColor,
+                },
+                "& .MuiDataGrid-iconSeparator": {
+                    display: "none",
+                },
+                "& .MuiDataGrid-colCell, .MuiDataGrid-cell": {
+                    borderRight: `1px solid ${theme.palette?.type === "light" ? "white" : "#303030"
+                        }`,
+                },
+                "& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
+                    borderBottom: `1px solid ${theme.palette?.type === "light" ? "#f0f0f0" : "#303030"
+                        }`,
+                },
+                "& .MuiDataGrid-cell": {
+                    color:
+                        theme.palette?.type === "light" ? "white" : "rgba(255,255,255,0.65)",
+                },
+                "& .MuiPaginationItem-root, .MuiTablePagination-actions, .MuiTablePagination-caption":
+                {
+                    borderRadius: 0,
+                    color: "white",
+                },
+            },
+        }
+    })
+
+    const classes = newStyles(theme);
+
     const referenceUrl = globalUrl + "/api/v1/hooks/";
 
     var upload = "";
@@ -726,7 +734,7 @@ const Workflows2 = (props) => {
 
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
-    document.title = "Shuffle - Workflows";
+    document.title = brandName?.length > 0 ? `${brandName} - Workflows` : "Shuffle - Workflows";
 
     useEffect(() => {
         const queryParams = new URLSearchParams(location.search);
@@ -1267,7 +1275,20 @@ const Workflows2 = (props) => {
     }
 
 
-
+    useEffect(() => {
+        const queryParams = new URLSearchParams(window.location.search);
+        const paramType = queryParams.get("type");
+    
+        if (paramType === "sso_login") {
+            localStorage.removeItem("workflows");
+            queryParams.delete("type");
+            const newUrl = window.location.pathname +  (queryParams.toString() ? `?${queryParams.toString()}` : '');
+    
+            window.history.replaceState({}, '', newUrl);
+         window.location.reload();
+        }
+    }, []);
+    
     const getAvailableWorkflows = (amount) => {
         var storageWorkflows = []
         setIsLoadingWorkflow(true)
@@ -1568,7 +1589,7 @@ const Workflows2 = (props) => {
         width: "100%",
         color: "white",
         display: "flex",
-        fontFamily: theme?.typography?.fontFamily,
+        fontFamily: theme.typography?.fontFamily,
         boxSizing: "border-box",
         position: "relative",
         borderRadius: "8px",
@@ -1589,7 +1610,7 @@ const Workflows2 = (props) => {
         width: 160,
         height: 44,
         justifyContent: "space-between",
-        fontFamily: theme?.typography?.fontFamily,
+        fontFamily: theme.typography?.fontFamily,
     };
 
     const exportAllWorkflows = (allWorkflows) => {
@@ -2124,7 +2145,7 @@ const Workflows2 = (props) => {
     const WorkflowSkeleton = () => {
         return (
             <Paper elevation={0} style={{
-                backgroundColor: "#212121",
+                backgroundColor: theme.palette.platformColor,
                 width: "100%",
                 height: 120,
                 borderRadius: 8,
@@ -2141,7 +2162,7 @@ const Workflows2 = (props) => {
                         height={90}
                         style={{
                             borderRadius: 6,
-                            backgroundColor: "rgba(255, 255, 255, 0.1)"
+                            backgroundColor: theme.palette.loaderColor,
                         }}
                     />
                     <div style={{
@@ -2155,19 +2176,19 @@ const Workflows2 = (props) => {
                             variant="text"
                             width="40%"
                             height={24}
-                            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+                            style={{ backgroundColor: theme.palette.loaderColor }}
                         />
                         <Skeleton
                             variant="text"
                             width="60%"
                             height={20}
-                            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+                            style={{ backgroundColor: theme.palette.loaderColor }}
                         />
                         <Skeleton
                             variant="text"
                             width="30%"
                             height={20}
-                            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
+                            style={{ backgroundColor: theme.palette.loaderColor }}
                         />
                     </div>
                 </div>
@@ -2240,6 +2261,11 @@ const Workflows2 = (props) => {
                     setOpen(false);
                     setAnchorEl(null);
                 }}
+                MenuListProps={{
+                    sx: {
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    }
+                }}
             >
                 {isDistributed ?
                     <MenuItem
@@ -2253,7 +2279,7 @@ const Workflows2 = (props) => {
                     </MenuItem>
                     : null}
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
                     disabled={isDistributed}
                     onClick={(event) => {
                         event.stopPropagation()
@@ -2274,7 +2300,7 @@ const Workflows2 = (props) => {
                 </MenuItem>
 
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
                     onClick={(event) => {
                         window.open(`/forms/${data.id}`, "_blank")
                     }}
@@ -2287,7 +2313,7 @@ const Workflows2 = (props) => {
                 <Divider />
 
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
                     disabled={isDistributed}
                     onClick={() => {
                         sideloadWorkflow(data.id, "publish")
@@ -2301,8 +2327,8 @@ const Workflows2 = (props) => {
                 </MenuItem>
 
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
-                    disabled={isDistributed}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
+                    //disabled={isDistributed}
                     onClick={() => {
                         sideloadWorkflow(data.id, "export", setOpen)
 
@@ -2317,7 +2343,7 @@ const Workflows2 = (props) => {
                 <Divider />
 
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
                     disabled={isDistributed}
                     onClick={() => {
                         duplicateWorkflow(data)
@@ -2330,7 +2356,7 @@ const Workflows2 = (props) => {
                 </MenuItem>
 
                 <MenuItem
-                    style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
+                    sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor}  }}
                     onClick={() => {
                         setDeleteModalOpen(true);
                         setSelectedWorkflowId(data.id);
@@ -2447,7 +2473,7 @@ const Workflows2 = (props) => {
 
 
         return (
-            <div style={{ width: "100%", minWidth: 320, position: "relative", border: highlightIds.includes(data.id) ? "2px solid #f85a3e" : isDistributed || hasSuborgs ? `2px solid ${theme.palette.distributionColor}` : "inherit", borderRadius: theme.palette?.borderRadius, backgroundColor: "#212121", fontFamily: theme?.typography?.fontFamily }}>
+            <div style={{ width: "100%", minWidth: 320, position: "relative", border: highlightIds.includes(data.id) ? "2px solid #f85a3e" : isDistributed || hasSuborgs ? `2px solid ${theme.palette.distributionColor}` : "inherit", borderRadius: theme.palette?.borderRadius, backgroundColor: "#212121", fontFamily: theme.typography?.fontFamily }}>
                 <Paper square style={paperAppStyle}>
                     {selectedCategory !== "" ?
                         <Tooltip title={`Usecase Category: ${selectedCategory}`} placement="bottom">
@@ -2461,7 +2487,7 @@ const Workflows2 = (props) => {
                                     width: 3,
                                     backgroundColor: boxColor,
                                     borderRadius: "0 100px 0 0",
-                                    fontFamily: theme?.typography?.fontFamily,
+                                    fontFamily: theme.typography?.fontFamily,
                                 }}
                                 onClick={() => {
                                     addFilter(selectedCategory)
@@ -2472,7 +2498,7 @@ const Workflows2 = (props) => {
 
                     <Grid
                         item
-                        style={{ display: "flex", flexDirection: "column", width: "100%", fontFamily: theme?.typography?.fontFamily }}
+                        style={{ display: "flex", flexDirection: "column", width: "100%", fontFamily: theme.typography?.fontFamily }}
                     >
                         <Grid item style={{ display: "flex", maxHeight: 34 }}>
 							{currTab === 2 ? null : 
@@ -2526,7 +2552,7 @@ const Workflows2 = (props) => {
                                         <Typography style={{
                                             color: "rgba(255,255,255,0.9)",
                                             fontSize: "16px",
-                                            fontFamily: theme?.typography?.fontFamily,
+                                            fontFamily: theme.typography?.fontFamily,
                                         }}>
                                             Edit: {data.name}
                                         </Typography>
@@ -2553,13 +2579,13 @@ const Workflows2 = (props) => {
                                 } placement="right">
 
                                 <Typography
-                                    variant="body1"
                                     style={{
                                         marginBottom: 0,
                                         paddingBottom: 0,
+                                        fontSize: 18,
                                         maxHeight: 30,
                                         flex: 10,
-                                        fontFamily: theme?.typography?.fontFamily,
+                                        fontFamily: theme.typography?.fontFamily,
                                         fontWeight: 500,
                                     }}
                                 >
@@ -2594,7 +2620,7 @@ const Workflows2 = (props) => {
                                                     style={{
                                                         height: 24,
                                                         width: 24,
-                                                        filter: "brightness(0.6)",
+                                                        filter: themeMode === "dark" ? "brightness(0.6)" : "brightness(0.9)",
                                                         cursor: "pointer",
                                                     }}
                                                     onClick={() => {
@@ -2751,7 +2777,7 @@ const Workflows2 = (props) => {
                                 overflow: "hidden",
                                 marginTop: 8,
                                 maxHeight: 35,
-                                fontFamily: theme?.typography?.fontFamily,
+                                fontFamily: theme.typography?.fontFamily,
                             }}
                         >
                             {data.tags !== undefined && data.tags !== null
@@ -3395,7 +3421,7 @@ const Workflows2 = (props) => {
             );
         }
         return (
-            <div style={{ ...gridContainer, backgroundColor: "#212121" }}>
+            <div style={{ ...gridContainer, backgroundColor: theme.palette.platformColor }}>
                 <Tooltip title={`New Workflow`} placement="bottom">
                     <IconButton
                         style={{ position: "absolute", top: 10, right: 50, zIndex: 1000 }}
@@ -3984,8 +4010,8 @@ const Workflows2 = (props) => {
 
 
     const iconButtonStyle = {
-        color: 'white',
-        backgroundColor: '#212121',
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.platformColor,
         borderRadius: '4px',
         padding: "12px 16px",
         cursor: 'pointer',
@@ -4085,20 +4111,20 @@ const Workflows2 = (props) => {
                     maxWidth: "25%",
                     minWidth: "25%",
                     height: 47,
-                    backgroundColor: "#212121",
+                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                 }}
                 InputProps={{
                     style: {
-                        color: "white",
+                        color: theme.palette.textFieldStyle.color,
                         height: "100%",
-                        backgroundColor: "#212121",
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                     },
                     placeholder: "Search Workflows",
                 }}
                 sx={{
                     '& .MuiOutlinedInput-root': {
                         borderRadius: '4px',
-                        backgroundColor: "#212121",
+                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                     },
                 }}
                 value={localQuery}
@@ -4140,9 +4166,9 @@ const Workflows2 = (props) => {
                     maxWidth: "25%",
                     height: 47,
                     borderRadius: 4,
-                    backgroundColor: "#212121",
-                    fontFamily: theme?.typography?.fontFamily,
-                    color: "#FFFFFF", 
+                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                    fontFamily: theme.typography?.fontFamily,
+                    color: theme.palette.textFieldStyle.color, 
                 }}
                 MenuProps={{
                     anchorOrigin: {
@@ -4155,9 +4181,9 @@ const Workflows2 = (props) => {
                     },
                     PaperProps: {
                         style: {
-                            backgroundColor: '#212121',
-                            color: '#FFFFFF',
-                            fontFamily: theme?.typography?.fontFamily,
+                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                            color: theme.palette.textFieldStyle.color,
+                            fontFamily: theme.typography?.fontFamily,
                         }
                     }
                 }}
@@ -4193,7 +4219,7 @@ const Workflows2 = (props) => {
                     )
                 }
             >
-                <MenuItem disabled value="" style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}>
+                <MenuItem disabled value="" style={{ fontFamily: theme.typography?.fontFamily, fontSize: 16 }}>
                     All Usecases
                 </MenuItem>
                 {items.map((usecase, index) => (
@@ -4206,13 +4232,13 @@ const Workflows2 = (props) => {
                             '&:hover': {
                                 backgroundColor: '#3A3A3A', // Darker background on hover
                             },
-                            fontFamily: theme?.typography?.fontFamily,
+                            fontFamily: theme.typography?.fontFamily,
                             fontSize: 16
                         }}
                     >
                         <Checkbox
                             checked={currentRefinement.includes(usecase.label)}
-                            style={{ marginRight: 8, color: '#FFFFFF', fontSize: 16 }}
+                            style={{ marginRight: 8, fontSize: 16 }}
                         />
                         {usecase.label} ({usecase.count})
                     </MenuItem>
@@ -4225,7 +4251,7 @@ const Workflows2 = (props) => {
     const tabStyle = {
         textTransform: 'none',
         marginRight: 20,
-        fontFamily: theme?.typography?.fontFamily,
+        fontFamily: theme.typography?.fontFamily,
         fontSize: 16,
         borderBottom: "5px solid transparent",
         minHeight: "48px",
@@ -4233,9 +4259,9 @@ const Workflows2 = (props) => {
     }
 
     const tabActive = {
-        borderBottom: "5px solid #FF8544",
+        borderBottom: `5px solid ${theme.palette.primary.main}`,
         borderRadius: "2px",
-        color: "#FF8544"
+        color: theme.palette.primary.main
     }
 
 
@@ -4258,16 +4284,16 @@ const Workflows2 = (props) => {
                         maxWidth: isSafari ? "100%" : "70%",
                         margin: "auto",
                     }}>
-                        <Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none', fontFamily: theme?.typography?.fontFamily }}>
+                        <Typography variant="h4" color="textPrimary" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none', fontFamily: theme.typography?.fontFamily }}>
 							{currTab === 0 ? "Org" : currTab === 1 ?  "Your" : "Discover"} Workflows
                         </Typography>
 
-                        <div style={{ borderBottom: '1px solid gray', marginBottom: 30 }}>
+                        <div style={{ borderBottom: themeMode === "dark" ? "1px solid #808080" : theme.palette.defaultBorder, marginBottom: 30 }}>
                             <Tabs
                                 value={currTab}
                                 onChange={(event, newTab) => handleTabChange(event, newTab)}
                                 style={{
-                                    fontFamily: theme?.typography?.fontFamily,
+                                    fontFamily: theme.typography?.fontFamily,
                                     fontSize: 16,
                                     marginBottom: "-2px"
                                 }}
@@ -4327,16 +4353,17 @@ const Workflows2 = (props) => {
                                         minWidth: "25%",
                                         height: 43,
                                         maxHeight: "fit-content",
-                                        backgroundColor: "#212121",
-                                        zIndex: 1000,
+                                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                            zIndex: 1000,
+                                        color: theme.palette.textFieldStyle.color
                                     }}
                                     disabled={currTab === 2}
                                     InputProps={{
                                         style: {
-                                            color: "white",
                                             height: "fit-content",
                                             maxHeight: "fit-content",
-                                            backgroundColor: "#212121",
+                                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                            color: theme.palette.textFieldStyle.color
                                         },
                                         placeholder: "Filter Workflows",
                                         // endAdornment: (
@@ -4359,7 +4386,8 @@ const Workflows2 = (props) => {
                                         '& .MuiOutlinedInput-root': {
                                             height: "fit-content",
                                             borderRadius: '4px',
-                                            backgroundColor: '#212121',
+                                            color: theme.palette.textFieldStyle.color,
+                                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                                             '& fieldset': {
                                                 borderColor: 'rgba(255, 255, 255, 0.23)',
                                             },
@@ -4373,10 +4401,12 @@ const Workflows2 = (props) => {
                                             display: 'flex',
                                             flexWrap: 'wrap',
                                             gap: '4px',
+                                            fontSize: 18,
                                             padding: '4px 8px',
                                             alignItems: 'center',
                                             height: "fit-content", // Match height
-                                            backgroundColor: "#212121",
+                                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                            color: theme.palette.textFieldStyle.color
                                         },
 
                                         // Rest of the styling remains the same...
@@ -4424,8 +4454,9 @@ const Workflows2 = (props) => {
                                             maxWidth: "25%",
                                             height: 47,
                                             borderRadius: 4,
-                                            backgroundColor: "#212121",
-                                            fontFamily: theme?.typography?.fontFamily
+                                            fontSize: 18,
+                                            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                                            fontFamily: theme.typography?.fontFamily,
                                         }}
                                         sx={{
                                             '& .MuiOutlinedInput-root': {
@@ -4460,12 +4491,12 @@ const Workflows2 = (props) => {
                                                             removeFilter(filters.indexOf(usecase?.name.toLowerCase()))
                                                         }
                                                     }}
-                                                    style={{
+                                                    sx={{
                                                         padding: "12px 16px",
                                                         borderBottom: index === usecases.length - 2 ? "none" : "1px solid rgba(255,255,255,0.05)",
                                                         "&:hover": {
                                                             backgroundColor: "rgba(255,255,255,0.1)"
-                                                        }
+                                                        },
                                                     }}
                                                 >
                                                     <div style={{
@@ -4479,7 +4510,7 @@ const Workflows2 = (props) => {
                                                             style={{
                                                                 padding: 0,
                                                                 marginRight: 8,
-                                                                color: "rgba(255,255,255,0.7)"
+                                                                color: theme.palette.textFieldStyle.color,
                                                             }}
                                                         />
                                                         <div style={{
@@ -4491,7 +4522,7 @@ const Workflows2 = (props) => {
                                                             <Typography
                                                                 variant="body1"
                                                                 style={{
-                                                                    color: "rgba(255,255,255,0.9)",
+                                                                    color: theme.palette.textFieldStyle.color,
                                                                     fontWeight: selectedCategory.includes(category) ? 500 : 400
                                                                 }}
                                                             >
@@ -4500,8 +4531,8 @@ const Workflows2 = (props) => {
                                                             <Typography
                                                                 variant="body2"
                                                                 style={{
-                                                                    color: "rgba(255,255,255,0.5)",
-                                                                    backgroundColor: "rgba(255,255,255,0.1)",
+                                                                    color: theme.palette.textFieldStyle.color,
+                                                                    backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                                                                     padding: "2px 8px",
                                                                     borderRadius: "12px",
                                                                     fontSize: "0.75rem"
@@ -4539,7 +4570,7 @@ const Workflows2 = (props) => {
                                             onClick={() => navigate("/workflows/debug")}
                                             disabled={currTab === 2}
                                         >
-                                            <QueryStatsIcon style={{ color: currTab === 2 ? "rgba(241, 241, 241, 0.5)" : "#F1F1F1" }} />
+                                            <QueryStatsIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} />
                                         </IconButton>
                                     </Tooltip>
 
@@ -4554,8 +4585,8 @@ const Workflows2 = (props) => {
                                             disabled={currTab === 2}
                                         >
                                             {view === "grid" ?
-                                                <ListIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} /> :
-                                                <GridOnIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} />
+                                                <ListIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} /> :
+                                                <GridOnIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} />
                                             }
                                         </IconButton>
                                     </Tooltip>
@@ -4568,7 +4599,7 @@ const Workflows2 = (props) => {
                                         >
                                             {submitLoading ?
                                                 <CircularProgress color="secondary" /> :
-                                                <PublishIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} />
+                                                <PublishIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1}} />
                                             }
                                         </IconButton>
                                     </Tooltip>
@@ -4587,7 +4618,7 @@ const Workflows2 = (props) => {
                                             disabled={isCloud || currTab === 2}
                                             onClick={() => exportAllWorkflows(workflows)}
                                         >
-                                            <GetAppIcon style={{ color: (isCloud || currTab === 2) ? "rgba(255, 255, 255, 0.5)" : "white" }} />
+                                            <GetAppIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1}} />
                                         </IconButton>
                                     </Tooltip>
                                 </div>
@@ -4600,13 +4631,11 @@ const Workflows2 = (props) => {
                                         borderRadius: 4,
                                         flex: 0.8,
                                         textTransform: 'none',
-                                        backgroundColor: "#FF8544",
-                                        color: "#1A1A1A",
-                                        fontFamily: theme?.typography?.fontFamily,
+                                        fontFamily: theme.typography?.fontFamily,
                                         fontSize: 16,
                                         fontWeight: 500
                                     }}
-                                    startIcon={<Add style={{ color: "#1A1A1A" }} />}
+                                    startIcon={<Add/>}
                                 >
                                     Create Workflow
                                 </Button>