diff --git a/frontend/src/components/Billing.jsx b/frontend/src/components/Billing.jsx
index c3687489..d3a65927 100644
--- a/frontend/src/components/Billing.jsx
+++ b/frontend/src/components/Billing.jsx
@@ -970,7 +970,7 @@ const Billing = (props) => {
 
 	const isChildOrg = userdata.active_org.creator_org !== "" && userdata.active_org.creator_org !== undefined && userdata.active_org.creator_org !== null
 	return (
-		<div style={{}}>
+		<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
       		{addDealModal}
 			<Typography variant="h4" style={{ marginTop: 20, marginBottom: 10 }}>
 				Billing	& Licensing
diff --git a/frontend/src/components/Branding.jsx b/frontend/src/components/Branding.jsx
index 9dd40791..c3c32058 100644
--- a/frontend/src/components/Branding.jsx
+++ b/frontend/src/components/Branding.jsx
@@ -15,7 +15,7 @@ import {
 //import { useAlert 
 
 const Branding = (props) => {
-    const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
+    const { globalUrl, userdata, serverside, billingInfo,clickedFromOrgTab, stripeKey, selectedOrganization, handleGetOrg, } = props;
     //const alert = useAlert();
     const [publishingInfo, setPublishingInfo] = useState("");
 	const [publishRequirements, setPublishRequirements] = useState([])
@@ -103,7 +103,7 @@ const Branding = (props) => {
 	}
 
 	return (
-		<div>
+		<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
 			<h2>
 				Branding
 			</h2>
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 4d4d02fe..4e4f2fdd 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
 import theme from "../theme.jsx";
-import { toast } from 'react-toastify';
-import ReactJson from "react-json-view";
-
+import { toast } from 'react-toastify';
+import ReactJson from "react-json-view";
+
 import {
-	Typography,
+	Typography,
     Tooltip,
     Divider,
     TextField,
@@ -22,8 +22,8 @@ import {
 } from "@mui/material";
 
 import {
-	Link as LinkIcon,
-    AutoFixHigh as AutoFixHighIcon,
+	Link as LinkIcon,
+    AutoFixHigh as AutoFixHighIcon,
     Edit as EditIcon,
     FileCopy as FileCopyIcon,
     SelectAll as SelectAllIcon,
@@ -46,7 +46,7 @@ import {
     Visibility as VisibilityIcon,
     VisibilityOff as VisibilityOffIcon,
 } from "@mui/icons-material";
-import { validateJson, } from "../views/Workflows.jsx";
+import { validateJson, } from "../views/Workflows.jsx";
 
 const scrollStyle1 = {
     height: 100,
@@ -64,9 +64,9 @@ const scrollStyle2 = {
     overflow: "scroll",
 }
 
-
+
 const CacheView = (props) => {
-    const { globalUrl, userdata, serverside, orgId } = props;
+    const { globalUrl, userdata, serverside, orgId, isSelectedDataStore } = props;
     const [orgCache, setOrgCache] = React.useState("");
     const [listCache, setListCache] = React.useState([]);
     const [addCache, setAddCache] = React.useState("");
@@ -79,7 +79,7 @@ const CacheView = (props) => {
     const [dataValue, setDataValue] = React.useState({});
     const [editCache, setEditCache] = React.useState(false);
     const [show, setShow] = useState({});
-
+
     useEffect(() => {
         listOrgCache(orgId);
     }, []);
@@ -155,22 +155,22 @@ const CacheView = (props) => {
 
     const deleteCache = (orgId, key) => {
         toast("Attempting to delete Cache");
-
+
         // method: "DELETE",
-		const method = "POST"
-        //const url = `${globalUrl}/api/v1/orgs/${orgId}/cache/${key}`
-        const url = `${globalUrl}/api/v1/orgs/${orgId}/delete_cache`
-		const parsed = {
-			"org_id": orgId,
-			"key": key,
-		}
-
+		const method = "POST"
+        //const url = `${globalUrl}/api/v1/orgs/${orgId}/cache/${key}`
+        const url = `${globalUrl}/api/v1/orgs/${orgId}/delete_cache`
+		const parsed = {
+			"org_id": orgId,
+			"key": key,
+		}
+
         fetch(url, {
-			method: method,
+			method: method,
             headers: {
                 Accept: "application/json",
             },
-			body: JSON.stringify(parsed),
+			body: JSON.stringify(parsed),
             credentials: "include",
         })
             .then((response) => {
@@ -255,20 +255,20 @@ const CacheView = (props) => {
             });
     };
 
-    const isValidJson = validateJson(value)
-	const autoFixJson = (inputvalue) => {
-		console.log("inputvalue: ", inputvalue)
-		try {
-			var parsedjson = JSON.parse(inputvalue)
-
-			// setValue() with the parsed json as string
-			setValue(JSON.stringify(parsedjson, null, 2))
-		} catch (e) {
-			console.log("Error parsing JSON: ", e)
-			//return JSON.stringify(inputvalue);
-		}
-	}
-
+    const isValidJson = validateJson(value)
+	const autoFixJson = (inputvalue) => {
+		console.log("inputvalue: ", inputvalue)
+		try {
+			var parsedjson = JSON.parse(inputvalue)
+
+			// setValue() with the parsed json as string
+			setValue(JSON.stringify(parsedjson, null, 2))
+		} catch (e) {
+			console.log("Error parsing JSON: ", e)
+			//return JSON.stringify(inputvalue);
+		}
+	}
+
     const modalView = (
         // console.log("key:", dataValue.key),
         //console.log("value:",dataValue.value),
@@ -316,21 +316,21 @@ const CacheView = (props) => {
                 />
             </div>
             <div style={{ paddingLeft: 30, paddingRight: 30 }}>
-				<div style={{display: "flex", }}>
-					<Typography style={{marginTop: 25, marginBottom: 0, flex: 20, }}>
-						Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
-					</Typography>
-					<Tooltip title="Auto Fix JSON" placement="right">
-						<IconButton
-							style={{flex: 1, }}
-							onClick={() => {
-								autoFixJson(value)
-							}}
-						>
-							<AutoFixHighIcon /> 
-						</IconButton>
-					</Tooltip>
-				</div>
+				<div style={{display: "flex", }}>
+					<Typography style={{marginTop: 25, marginBottom: 0, flex: 20, }}>
+						Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
+					</Typography>
+					<Tooltip title="Auto Fix JSON" placement="right">
+						<IconButton
+							style={{flex: 1, }}
+							onClick={() => {
+								autoFixJson(value)
+							}}
+						>
+							<AutoFixHighIcon /> 
+						</IconButton>
+					</Tooltip>
+				</div>
                 <TextField
                     color="primary"
                     style={{ backgroundColor: theme.palette.inputColor, marginTop: 0, }}
@@ -347,22 +347,22 @@ const CacheView = (props) => {
                     id="Valuefield"
                     margin="normal"
                     variant="outlined"
-					multiline
-					minRows={4}
-					maxRows={12}
+					multiline
+					minRows={4}
+					maxRows={12}
                     //defaultValue={editCache ? dataValue.value : ""}
-					value={value}
+					value={value}
                     onChange={(e) => setValue(e.target.value)}
                 />
             </div>
             <DialogActions style={{ paddingLeft: "30px", paddingRight: '30px' }}>
                 <Button
                     style={{ borderRadius: "0px" }}
-                    onClick={() => {
-						setModalOpen(false)
-						setValue("")
-						setDataValue({})
-					}}
+                    onClick={() => {
+						setModalOpen(false)
+						setValue("")
+						setDataValue({})
+					}}
                     color="primary"
                 >
                     Cancel
@@ -372,9 +372,9 @@ const CacheView = (props) => {
                     style={{ borderRadius: "0px" }}
                     onClick={() => {
                         {editCache ? editOrgCache(orgId) : addOrgCache(orgId)}
-						
-						setValue("")
-						setDataValue({})
+						
+						setValue("")
+						setDataValue({})
                     }}
                     color="primary"
                 >
@@ -386,51 +386,51 @@ const CacheView = (props) => {
 
     return (
 
-        <div style={{paddingBottom: 250, }}>
+        <div style={{paddingBottom: isSelectedDataStore?null:250, width: isSelectedDataStore?1030:null, padding:isSelectedDataStore?27:null, height: isSelectedDataStore?1200:null, color: isSelectedDataStore?'#ffffff':null, backgroundColor: isSelectedDataStore?'#212121':null, borderRadius: isSelectedDataStore?'16px':null, }}>
             {modalView}
-            <div style={{ marginTop: 20, marginBottom: 20 }}>
-                <h2 style={{ display: "inline" }}>Shuffle Datastore</h2>
-                <span style={{ marginLeft: 25 }}>
-                    Datastore is a permanent key-value database for storing data that can be used cross-workflow. You can store anything from lists of IPs to complex configurations.&nbsp;
+            <div style={{ marginTop: isSelectedDataStore?null:20, marginBottom: 20 }}>
+                <h2 style={{ display: isSelectedDataStore?null: "inline" }}>Shuffle Datastore</h2>
+                <span style={{ marginLeft: isSelectedDataStore?null:25, color:isSelectedDataStore?"#9E9E9E":null}}>
+                    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: "none", color: "#f85a3e" }}
+                        style={{ textDecoration: isSelectedDataStore?null:"none", color: isSelectedDataStore?"#FF8444":"#f85a3e" }}
                     >
                         Learn more
                     </a>
                 </span>
             </div>
             <Button
-                style={{}}
+                style={{backgroundColor: isSelectedDataStore?'rgba(255, 132, 68, 0.2)':null, color:isSelectedDataStore?"#FF8444":null, borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
                 variant="contained"
                 color="primary"
                 onClick={() =>{ 
                     setEditCache(false)
                     setModalOpen(true)
-
-					setValue("")
-                }}
+
+					setValue("")
+                }}
             >
                 Add Cache
             </Button>
             <Button
-                style={{ marginLeft: 5, marginRight: 15 }}
+                style={{ marginLeft: 5, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null,borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null,  }}
                 variant="contained"
                 color="primary"
                 onClick={() => listOrgCache(orgId)}
             >
                 <CachedIcon />
             </Button>
-            <Divider
+            {isSelectedDataStore? null :<Divider
                 style={{
                     marginTop: 20,
                     marginBottom: 20,
                 }}
-            />
-            <List>
-                <ListItem>
+            />}
+            <List style={{borderRadius: isSelectedDataStore?8:null, border:isSelectedDataStore?"1px solid #494949":null, marginTop:isSelectedDataStore?24:null}}>
+                <ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore?"1px solid #494949":null}}>
                     <ListItemText
                         primary="Key"
                     	style={{ minWidth: 250, maxWidth: 250, }}
@@ -454,8 +454,8 @@ const CacheView = (props) => {
                         if (index % 2 === 0) {
                             bgColor = "#1f2023";
                         }
-
-              			const validate = validateJson(data.value);
+
+              			const validate = validateJson(data.value);
                         return (
                             <ListItem key={index} style={{ backgroundColor: bgColor, maxHeight: 300, overflow: "auto", }}>
                                 <ListItemText
@@ -467,35 +467,35 @@ const CacheView = (props) => {
                                     primary={data.key}
                                 />
                                 <ListItemText
-                                    style={{
-										minWidth: 400,
-										maxWidth: 400,
+                                    style={{
+										minWidth: 400,
+										maxWidth: 400,
 									}}
-                                    primary={validate.valid ? 
-                      					<ReactJson
-                      					  src={validate.result}
-                      					  theme={theme.palette.jsonTheme}
-                      					  style={theme.palette.reactJsonStyle}
-                      					  collapsed={true}
-                      					  enableClipboard={(copy) => {
-                      					    //handleReactJsonClipboard(copy);
-                      					  }}
-                      					  displayDataTypes={false}
-                      					  onSelect={(select) => {
-                      					    //HandleJsonCopy(showResult, select, data.action.label);
-                      					    //console.log("SELECTED!: ", select);
-                      					  }}
-                      					  name={"value"}
-                      					/>
-										:
-										data.value
+                                    primary={validate.valid ? 
+                      					<ReactJson
+                      					  src={validate.result}
+                      					  theme={theme.palette.jsonTheme}
+                      					  style={theme.palette.reactJsonStyle}
+                      					  collapsed={true}
+                      					  enableClipboard={(copy) => {
+                      					    //handleReactJsonClipboard(copy);
+                      					  }}
+                      					  displayDataTypes={false}
+                      					  onSelect={(select) => {
+                      					    //HandleJsonCopy(showResult, select, data.action.label);
+                      					    //console.log("SELECTED!: ", select);
+                      					  }}
+                      					  name={"value"}
+                      					/>
+										:
+										data.value
 									}
 								/>
                                 <ListItemText
                                     style={{
                                         maxWidth: 200,
                                         minWidth: 200,
-										marginLeft: 50,
+										marginLeft: 50,
                                     }}
                                     primary=<span style={{ display: "inline" }}>
                                         <Tooltip
@@ -508,11 +508,11 @@ const CacheView = (props) => {
                                                     style={{ padding: "6px" }}
                                                     onClick={() => {
                                                         setEditCache(true)
-                                                        setDataValue({
-															"key": data.key,
-															"value":data.value
-														})
-														setValue(data.value)
+                                                        setDataValue({
+															"key": data.key,
+															"value":data.value
+														})
+														setValue(data.value)
                                                         setModalOpen(true)
                                                     }}
                                                 >
@@ -525,18 +525,18 @@ const CacheView = (props) => {
                                         <Tooltip
                                             title={"Public URL (types: text, raw, json)"}
                                             style={{ marginLeft: 0, }}
-                                            aria-label={"Public URL"}
+                                            aria-label={"Public URL"}
                                         >
                                             <span>
                                                 <IconButton
                                                     style={{ padding: "6px" }}
-													disabled={data.public_authorization === undefined || data.public_authorization === null || data.public_authorization === "" ? true : false}
+													disabled={data.public_authorization === undefined || data.public_authorization === null || data.public_authorization === "" ? true : false}
                                                     onClick={() => {
-														window.open(`${globalUrl}/api/v1/orgs/${orgId}/cache/${data.key}?type=text&authorization=${data.public_authorization}`, "_blank");
-                                                    }}
+														window.open(`${globalUrl}/api/v1/orgs/${orgId}/cache/${data.key}?type=text&authorization=${data.public_authorization}`, "_blank");
+                                                    }}
                                                 >
-													<LinkIcon
-													/>
+													<LinkIcon
+													/>
                                                 </IconButton>
                                             </span>
                                         </Tooltip>
diff --git a/frontend/src/components/Files.jsx b/frontend/src/components/Files.jsx
index 106cd18d..c13bf067 100644
--- a/frontend/src/components/Files.jsx
+++ b/frontend/src/components/Files.jsx
@@ -41,7 +41,7 @@ import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
 import theme from "../theme.jsx";
 
 const Files = (props) => {
-  const { globalUrl, userdata, serverside, selectedOrganization, isCloud, } = props;
+  const { globalUrl, userdata, serverside, selectedOrganization, isCloud,isSelectedFiles } = props;
 
   const [files, setFiles] = React.useState([]);
   const [selectedNamespace, setSelectedNamespace] = React.useState("default");
@@ -617,16 +617,16 @@ const Files = (props) => {
 			style={{
 				maxWidth: window.innerWidth > 1366 ? 1366 : 1200,
 				margin: "auto",
-				padding: 20,
+				padding: isSelectedFiles ? null : 20,
 			}}
 			onDrop={uploadFile}
 		>
-			<div style={{position: "relative"}}>
+			<div style={{position: "relative", width: isSelectedFiles? 1030: null, padding:isSelectedFiles?27:null, height: isSelectedFiles?1200:null, color: isSelectedFiles?'#ffffff':null, backgroundColor: isSelectedFiles?'#212121':null, borderRadius: isSelectedFiles?'16px':null,}}>
 
         		<Tooltip color="primary" title={"Import files to Shuffle from Git"} placement="top">
 				  <IconButton
         		    color="secondary"
-        		    style={{position: "absolute", right: 0, top: 0, }}
+        		    style={{position: "absolute", right: 0, top: isSelectedFiles?null:0, left: isSelectedFiles? 990:null }}
         		    variant="text"
         		    onClick={() => setLoadFileModalOpen(true)}
         		  >
@@ -636,15 +636,15 @@ const Files = (props) => {
 
 				{fileDownloadModal} 
 
-				<div style={{ marginTop: 20, marginBottom: 20 }}>
-					<h2 style={{ display: "inline" }}>Files</h2>
-					<span style={{ marginLeft: 25 }}>
+				<div style={{ marginTop: isSelectedFiles ? 2: 20, marginBottom:20 }}>
+					<h2 style={{ display: isSelectedFiles ? null : "inline", marginTop: isSelectedFiles?0:null, marginBottom: isSelectedFiles?8:null }}>Files</h2>
+					<span style={{ marginLeft: isSelectedFiles ? null : 25, color:isSelectedFiles?"#9E9E9E":null}}>
 						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: "none", color: "#f85a3e" }}
+							style={{ textDecoration: isSelectedFiles ? null:"none", color: isSelectedFiles? "#FF8444": "#f85a3e" }}
 						>
 							Learn more
 						</a>
@@ -659,6 +659,7 @@ const Files = (props) => {
 					onClick={() => {
 						upload.click();
 					}}
+					style={{backgroundColor: isSelectedFiles?'rgba(255, 132, 68, 0.2)':null, color:isSelectedFiles?"#FF8444":null, borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?162:null, height:isSelectedFiles?40:null}}
 				>
 					<PublishIcon /> Upload files
 				</Button>
@@ -678,7 +679,7 @@ const Files = (props) => {
 					}}
 				/>
 				<Button
-					style={{ marginLeft: 5, marginRight: 15 }}
+					style={{ marginLeft: 5, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?81:null, height:isSelectedFiles?40:null,  }}
 					variant="contained"
 					color="primary"
 					onClick={() => getFiles()}
@@ -783,20 +784,20 @@ const Files = (props) => {
 					key = {fileContent} //https://reactjs.org/docs/reconciliation.html#recursing-on-children
 					runUpdateText = {runUpdateText}
 				/>
-
+				{isSelectedFiles?null:
 				<Divider
 					style={{
 						marginTop: 20,
 						marginBottom: 20,
 						backgroundColor: theme.palette.inputColor,
 					}}
-				/>
+				/>}
 
-				<List>
-					<ListItem>
+				<List style={{borderRadius: isSelectedFiles?8:null, border:isSelectedFiles?"1px solid #494949":null, marginTop:isSelectedFiles?24:null}}>
+					<ListItem style={{width:isSelectedFiles?"100%":null, borderBottom:isSelectedFiles?"1px solid #494949":null}}>
 						<ListItemText
 							primary="Updated"
-							style={{ maxWidth: 225, minWidth: 225 }}
+							style={{ maxWidth: 185, minWidth: 185 }}
 						/>
 						<ListItemText
 							primary="Name"
@@ -813,7 +814,7 @@ const Files = (props) => {
 						/>
 						<ListItemText
 							primary="Md5"
-							style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }}
+							style={{ minWidth: 250, maxWidth: 250, overflow: "hidden" }}
 						/>
 						<ListItemText
 							primary="Status"
diff --git a/frontend/src/components/NewHeader.jsx b/frontend/src/components/NewHeader.jsx
index 75184bab..f94dfb57 100644
--- a/frontend/src/components/NewHeader.jsx
+++ b/frontend/src/components/NewHeader.jsx
@@ -616,7 +616,7 @@ const Header = (props) => {
         <Divider style={{marginBottom: 10, }}/>
 
 	  	<Typography variant="body2" color="textSecondary" align="center" style={{marginTop: 5, marginBottom: 5,}}>
-	  		Version: 1.3.4
+	  		Version: 1.4.0
 	  	</Typography>
       </Menu>
     </span>
diff --git a/frontend/src/components/Priorities.jsx b/frontend/src/components/Priorities.jsx
index bd6e5fa8..1c0b27a2 100644
--- a/frontend/src/components/Priorities.jsx
+++ b/frontend/src/components/Priorities.jsx
@@ -20,7 +20,7 @@ import Priority from "../components/Priority.jsx";
 //import { useAlert 
 
 const Priorities = (props) => {
-  const { globalUrl, userdata, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
+  const { globalUrl, userdata,clickedFromOrgTab, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
   const [showDismissed, setShowDismissed] = React.useState(false);
   const [showRead, setShowRead] = React.useState(false);
   const [appFramework, setAppFramework] = React.useState({});
@@ -312,15 +312,15 @@ const Priorities = (props) => {
     }
 
 	return (
-		<div style={{maxWidth: 1000, }}>
-			<h2 style={{ display: "inline" }}>Suggestions</h2>
-			<span style={{ marginLeft: 25 }}>
-				Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. These range from simple configurations in Shuffle to Usecases you may have missed.&nbsp;
+		<div style={{maxWidth: clickedFromOrgTab ? 1030:1000, padding: clickedFromOrgTab ? 27:null, height: clickedFromOrgTab ? "auto":null, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
+			<h2 style={{ display: clickedFromOrgTab ?null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ?0:null, color: clickedFromOrgTab ?"#ffffff":null }}>Suggestions</h2>
+			<span style={{ color: clickedFromOrgTab ?"#9E9E9E":null,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: "none", color: "#f85a3e" }}
+					style={{ textDecoration: clickedFromOrgTab ?null:"none", color: clickedFromOrgTab ?"#FF8444":"#f85a3e" }}
 				>
 					Learn more
 				</a>
@@ -348,6 +348,7 @@ const Priorities = (props) => {
 							globalUrl={globalUrl}
 							priority={priority}
 							checkLogin={checkLogin}
+							clickedFromOrgTab={true}
 							setAdminTab={setAdminTab}
 							setCurTab={setCurTab}
   							appFramework={appFramework}
@@ -355,15 +356,15 @@ const Priorities = (props) => {
 					)
 				})
 			}
-			<Divider style={{marginTop: 50, marginBottom: 50, }} />
-			<h2 style={{ display: "inline" }}>Notifications</h2>
-			<span style={{ marginLeft: 25 }}>
+			{clickedFromOrgTab?null:<Divider style={{marginTop: 50, marginBottom: 50, }} />}
+			<h2 style={{ display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, marginTop: clickedFromOrgTab?40:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications</h2>
+			<span style={{ 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: "none", color: "#f85a3e" }}
+					style={{ textDecoration: clickedFromOrgTab?null:"none", color: clickedFromOrgTab?"#FF8444":"#f85a3e" }}
 				>
 					Learn more
 				</a>
diff --git a/frontend/src/components/Priority.jsx b/frontend/src/components/Priority.jsx
index 60e4bce2..c1ecb4d7 100644
--- a/frontend/src/components/Priority.jsx
+++ b/frontend/src/components/Priority.jsx
@@ -22,7 +22,7 @@ import {
 //import { useAlert 
 
 const Priority = (props) => {
-  	const { globalUrl, userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
+  	const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
 
   	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	let navigate = useNavigate();
@@ -114,7 +114,7 @@ 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" : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: 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 ?  "#1A1A1A": 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} 
@@ -147,7 +147,7 @@ const Priority = (props) => {
 				}
 			</div>
 			<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
-				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
+				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#FF8444": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"rgba(255, 132, 68, 0.2)":"rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
 
 					if (isCloud) {
 						ReactGA.event({
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 09f00336..76953e68 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -592,7 +592,27 @@ const AngularWorkflow = (defaultprops) => {
 				]
 			}*/
 			]
-		}]
+		},{
+			"name": "Communication",
+			"description": "Available actions for communication",
+			"label": "Communication",
+			"parameters": [{	
+				"name": "action",
+				"value": "list_messages",
+				"options": [
+					"list_messages", 
+					"send_message", 
+				],
+				"required": true,
+			},
+			{
+				"name": "fields",
+				"value": "",
+				"required": false,
+				"multiline": true,
+			}]
+		},
+		]
 	}] 
 
 	/*
@@ -17148,6 +17168,10 @@ const AngularWorkflow = (defaultprops) => {
 		  return "Run this workflow in a local environment to increase the timeout. Go to https://shuffler.io/admin?tab=environments to create an environment to connect to"
 	  }
 
+	  if (stringjson.toLowerCase().includes("invalid header")) {
+		  return "A header or authentication token in the app is invalid. Check the app's configuration"
+	  }
+
 
 	  return ""
   }
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index 354a60c3..209407ea 100755
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -1037,55 +1037,41 @@ const AppCreator = (defaultprops) => {
                     "schema"
                   ] !== null
                 ) {
-									try {
-										if (
-											methodvalue["requestBody"]["content"]["application/xml"][
-												"schema"
-											]["properties"] !== undefined
-										) {
-											var tmpobject = {};
-											for (let [prop, propvalue] of Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["properties"])) {
-											
-												tmpobject[prop] = `\$\{${prop}\}`;
-											}
+					try {
+						if (
+							methodvalue["requestBody"]["content"]["application/xml"][
+								"schema"
+							]["properties"] !== undefined
+						) {
+							var tmpobject = {};
+							for (let [prop, propvalue] of Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["properties"])) {
+							
+								tmpobject[prop] = `\$\{${prop}\}`;
+							}
 
-											for (let [subkey,subkeyval] in Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["required"])) {
-												const tmpitem =
-													methodvalue["requestBody"]["content"][
-														"application/xml"
-													]["schema"]["required"][subkey];
-												tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
-											}
+							for (let [subkey,subkeyval] in Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["required"])) {
+								const tmpitem =
+									methodvalue["requestBody"]["content"][
+										"application/xml"
+									]["schema"]["required"][subkey];
+								tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
+							}
 
-											//console.log("OBJ XML: ", tmpobject)
-											//newaction["body"] = XML.stringify(tmpobject, null, 2)
-										}
-									} catch (e) {
-										console.log("RequestBody xml error: ", e, path)
-									}
+							//console.log("OBJ XML: ", tmpobject)
+							//newaction["body"] = XML.stringify(tmpobject, null, 2)
+						}
+					} catch (e) {
+						console.log("RequestBody xml error: ", e, path)
+					}
                 }
               } else {
-                if (
-                  methodvalue["requestBody"]["content"]["example"] !== undefined
-                ) {
-                  if (
-                    methodvalue["requestBody"]["content"]["example"][
-                      "example"
-                    ] !== undefined
-                  ) {
-                    newaction["body"] =
-                      methodvalue["requestBody"]["content"]["example"][
-                        "example"
-                      ];
-                    //JSON.stringify(tmpobject, null, 2)
+                if (methodvalue["requestBody"]["content"]["example"] !== undefined) {
+                  if (methodvalue["requestBody"]["content"]["example"]["example"] !== undefined) {
+                      newaction["body"] = methodvalue["requestBody"]["content"]["example"]["example"]
                   }
                 } 
-							
-								if (
-                  methodvalue["requestBody"]["content"][
-                    "multipart/form-data"
-                  ] !== undefined
-                ) {
+		  
+				if (methodvalue["requestBody"]["content"]["multipart/form-data"] !== undefined) {
                   if (
                     methodvalue["requestBody"]["content"][
                       "multipart/form-data"
@@ -1553,8 +1539,10 @@ const AppCreator = (defaultprops) => {
             } else if (parameter.in === "body") {
               // FIXME: Add tracking for components
               // E.G: https://raw.githubusercontent.com/owentl/Shuffle/master/gosecure.yaml
-              if (parameter.example !== undefined) {
-                newaction.body = parameter.example;
+              if (parameter.example !== undefined && parameter.example !== null) {
+				  if (newaction.body === undefined || newaction.body === null || newaction.body.length < 5) {
+                	newaction.body = parameter.example
+				  }
               }
             } else if (parameter.in === "header") {
               newaction.headers += `${parameter.name}=${parameter.example}\n`;
@@ -1566,6 +1554,13 @@ const AppCreator = (defaultprops) => {
             }
           }
 
+		  // Check if body is valid JSON. 
+		  if (newaction.body !== undefined && newaction.body !== null && newaction.body.length > 0) {
+			  // Trim starting / ending newlines, spaces and tabs
+			  newaction.body = newaction.body.trim()
+		  }
+
+
           if (newaction.name === "" || newaction.name === undefined) {
             // Find a unique part of the string
             // FIXME: Looks for length between /, find the one where they differ
@@ -1920,11 +1915,11 @@ const AppCreator = (defaultprops) => {
 
     setProjectCategories(all_categories);
 
-		// Rearrange them by which has action_label
-		const firstActions = newActions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
-		console.log("First actions: ", firstActions)
-		const secondActions = newActions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
-		newActions = firstActions.concat(secondActions)
+	// Rearrange them by which has action_label
+	const firstActions = newActions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
+	console.log("First actions: ", firstActions)
+	const secondActions = newActions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
+	newActions = firstActions.concat(secondActions)
     setActions(newActions);
 		//data.paths[item.url][item.method.toLowerCase()]["x-label"] = item.action_label
 
@@ -3078,7 +3073,10 @@ const AppCreator = (defaultprops) => {
         		  Refresh-token URL for Oauth2 (Optional)
         		</Typography>
         		<TextField
-        		  style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
+        		  style={{ 
+					margin: 0, flex: "1", backgroundColor: inputColor,
+				  	border: !refreshUrl.startsWith("http") || refreshUrl.includes("//shuffler.") ? "2px solid red" : "inherit",
+				  }}
         		  fullWidth={true}
         		  placeholder="The URL to retrieve refresh-tokens at"
         		  type="name"
@@ -3086,8 +3084,9 @@ const AppCreator = (defaultprops) => {
         		  margin="normal"
         		  variant="outlined"
         		  value={refreshUrl}
+				  helperText={!refreshUrl.startsWith("http") || refreshUrl.includes("//shuffler.")? "Must start with http(s):// and can not contain shuffler.io" : ""}
         		  onChange={(e) => setRefreshUrl(e.target.value)}
-							onBlur={(event) => {
+				  onBlur={(event) => {
         		    var tmpstring = event.target.value.trim();
 
         		    if (
@@ -3153,7 +3152,7 @@ const AppCreator = (defaultprops) => {
         </Typography>
 				<div style={{display: "flex", marginTop: 10, }}>
 					<div style={{flex: 4,}}>
-        		Key	
+        				Key	
 						<TextField
 							required
 							style={{ marginTop: 0, backgroundColor: inputColor }}
@@ -3166,12 +3165,17 @@ const AppCreator = (defaultprops) => {
 							value={parameterName}
 							helperText={
 								<span style={{ color: "white", marginBottom: "2px" }}>
-									Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$
+									Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$:=
 								</span>
 							}
 							onChange={(e) => {
 								setParameterName(e.target.value);
 							}}
+							onBlur={(event) => {
+								var tmpstring = event.target.value.trim()
+
+								// Check if tmpstring has any of the illegal characters in it
+							}}
 							InputProps={{
 								classes: {
 									notchedOutline: classes.notchedOutline,