diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8b7966f2..1e6a0fc3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -122,7 +122,7 @@ const App = (message, props) => {
 			<Route exact path="/home" render={props => <LandingPageNew isLoaded={isLoaded} {...props} />} />
 		</div> :
 		<div style={{ backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh" }}>
-			<Header removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} {...props} />
+			<Header removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
 			<Route exact path="/oauth2" render={props => <Oauth2 isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
 			<Route exact path="/contact" render={props => <Contact isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
 			<Route exact path="/login" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index cf3c4dfd..7495d06d 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -5,8 +5,6 @@ import {Link} from 'react-router-dom';
 
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-
-
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
@@ -15,13 +13,14 @@ import PolymerIcon from '@material-ui/icons/Polymer';
 import AppsIcon from '@material-ui/icons/Apps';
 import DescriptionIcon from '@material-ui/icons/Description';
 import Grid from '@material-ui/core/Grid';
+import { useTheme } from '@material-ui/core/styles';
 
 const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
-
-  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
+  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata } = props;
+	const theme = useTheme();
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
 	const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -206,14 +205,14 @@ const Header = props => {
 								}}
 								value={userdata.selected_org}
 								fullWidth
-								style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+								style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px"}}
 								onChange={(e) => {
 									console.log("SET ORG TO ", e.target.value)
 								}}
 								>
 								{userdata.orgs.map(data => {
 									return (
-										<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										<MenuItem key={data.id} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data}>
 											{data.name}
 										</MenuItem>
 									)
diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx
index 09db2c87..2707d140 100644
--- a/frontend/src/views/Admin.jsx
+++ b/frontend/src/views/Admin.jsx
@@ -21,8 +21,13 @@ import { useAlert } from "react-alert";
 import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 
-
 import CachedIcon from '@material-ui/icons/Cached';
+import AccessibilityNewIcon from '@material-ui/icons/AccessibilityNew';
+import LockIcon from '@material-ui/icons/Lock';
+import EcoIcon from '@material-ui/icons/Eco';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import CloudIcon from '@material-ui/icons/Cloud';
+import BusinessIcon from '@material-ui/icons/Business';
 
 const Admin = (props) => {
 	const { globalUrl } = props;
@@ -801,7 +806,7 @@ const Admin = (props) => {
 				<h2 style={{display: "inline",}}>Schedules</h2>
 				<span style={{marginLeft: 25}}>Schedules used in Workflows. Makes locating and control easier.</span>
 			</div>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
 					<ListItemText
@@ -850,7 +855,7 @@ const Admin = (props) => {
 				<h2 style={{display: "inline",}}>App Authentication</h2>
 				<span style={{marginLeft: 25}}>Control the authentication options for individual apps. <b>Actions can be destructive!</b></span>
 			</div>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
 					<ListItemText
@@ -951,7 +956,7 @@ const Admin = (props) => {
 			> 
 				<CachedIcon />
 			</Button>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
 					<ListItemText
@@ -1002,7 +1007,7 @@ const Admin = (props) => {
 			> 
 				Add organization 
 			</Button>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
 					<ListItemText
@@ -1042,7 +1047,7 @@ const Admin = (props) => {
 				<h2 style={{display: "inline",}}>Hybrid</h2>
 				<span style={{marginLeft: 25}}></span>
 			</div>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
 					<ListItemText
@@ -1130,4 +1135,4 @@ const Admin = (props) => {
 	)
 }
 
-export default Admin 
\ No newline at end of file
+export default Admin