A tons of minor fixes for the onboarding flow and search systems

frontend/src/components/AppFramework.jsx

@@ -64,7 +64,7 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  description: "",
 		  id: "",
 	  }
-  } else if (category === "communication") {
+  } else if (category === "communication" || category === "comms") {
 	  if (framework["Comms"] !== undefined && framework["Comms"].name !== undefined) {
 		  return framework["Comms"]	
 	  }

frontend/src/components/AppGrid.jsx

@@ -31,7 +31,7 @@ import {
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 //const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
 const AppGrid = props => {
-	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata }  = props
+	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, isHeader }  = props
 
   const isCloud =
     window.location.host === "localhost:3002" ||
@@ -167,7 +167,7 @@ const AppGrid = props => {
 						backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
 						color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)", 
 						border: `1px solid ${innerColor}`, 
-						padding: 15,
+						padding: isHeader ? null : 15,
 						cursor: "pointer",
 						position: "relative",
 						minHeight: 116,

frontend/src/components/AppSearchButtons.jsx

@@ -3,7 +3,7 @@ import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import { useNavigate, Link } from 'react-router-dom';
 
-import { Search as Searchicon, CloudQueue as CloudQueueicon, Code as Codeicon, Close as Closeicon, Folder as Foldericon, LibraryBooks as LibraryBooksicon } from '@mui/icons-material';
+import { Search as Searchicon, CloudQueue as CloudQueueicon, Code as Codeicon, Close as Closeicon, Folder as Foldericon, LibraryBooks as LibraryBooksicon, Delete as DeleteIcon, Close as CloseIcon, } from '@mui/icons-material';
 import aa from 'search-insights'
 import Deleteicon from '@mui/icons-material/Delete';
 import ShowCharticon from '@mui/icons-material/ShowChart';
@@ -33,16 +33,37 @@ import {
     ListItem,
     ListItemAvatar,
     ListItemText,
+	IconButton,
 } from '@mui/material';
 
 const AppSearchButtons = (props) => {
-    const { userdata, globalUrl, appFramework, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData } = props
+    const { userdata, globalUrl, appFramework, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, } = props
 
     const ref = useRef()
     let navigate = useNavigate();
 
     const [isHover, setIsHover] = useState(false);
     const [localSearchOpen, setLocalSearchOpen] = useState(false)
+	const [newSelectedApp, setNewSelectedApp] = useState(undefined)
+
+	useEffect(() => {
+		console.log("AppSearchButtons: newSelectedApp: " + JSON.stringify(newSelectedApp))
+
+		if (newSelectedApp !== undefined && setMissing != undefined) {
+			console.log("AppSearchButtons: setMissing is defined!")
+
+			const submitAppFramework = {
+				"description": newSelectedApp.description,
+            	"id": newSelectedApp.objectID,
+				"name": newSelectedApp.name,
+				"type": appType,
+            	"large_image": newSelectedApp.image_url,
+			}
+
+			setFrameworkItem(submitAppFramework)
+			setMissing(newSelectedApp)
+		}
+	}, [newSelectedApp])
 
 	if (appType === undefined) {
 		console.log("Apptype is required in AppSearchButtons")
@@ -63,10 +84,54 @@ const AppSearchButtons = (props) => {
 
 	const foundApp = findSpecificApp(appFramework, appType) 
 	if (foundApp === undefined || foundApp === null) {
-		console.log("AppSearchButtons: App not found in appFramework")
+		console.log("AppSearchButtons: App not found in appFramework: " + appType)
 		return null
 	}
 
+	const setFrameworkItem = (data) => {
+
+        fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+            },
+            body: JSON.stringify(data),
+            credentials: "include",
+        })
+		.then((response) => {
+			if (response.status !== 200) {
+				console.log("Status not 200 for framework!");
+			}
+
+			if (checkLogin !== undefined) {
+				checkLogin()
+			}
+
+			return response;
+		})
+		.then((responseJson) => {
+			if (responseJson.success === false) {
+				if (responseJson.reason !== undefined) {
+					toast("Failed updating: " + responseJson.reason)
+				} else {
+					toast("Failed to update framework for your org.")
+
+				}
+			}
+			//setFrameworkLoaded(true)
+			//setFrameworkData(responseJson)
+		})
+		.catch((error) => {
+			if (checkLogin !== undefined) {
+				checkLogin()
+			}
+
+			toast(error.toString());
+			//setFrameworkLoaded(true)
+		})
+    }
+
 	const icon = foundApp.large_image
     let xsValue = 12;
     if (index !== undefined && index !== 0) {
@@ -86,6 +151,94 @@ const AppSearchButtons = (props) => {
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
         >
+                {localSearchOpen ? (
+                    <div
+                        style={{
+                            width: 319,
+                            height: 395,
+                            flexShrink: 0,
+                            marginLeft: 70,
+                            marginTop: 68,
+                            position: "absolute",
+                            zIndex: 100,
+                            borderRadius: 6,
+                            border: "1px solid var(--Container-Stroke, #494949)",
+                            background: "var(--Container, #212121)",
+                            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>
+                            </div>
+                            <div style={{ display: "flex" }}>
+                                <Tooltip
+                                    title="Close"
+                                    placement="top"
+                                    style={{ zIndex: 10011 }}
+                                >
+                                    <IconButton
+                                        style={{
+                                            flex: 1,
+                                            // width: 224,
+                                            marginLeft: discoveryData === ("communication") ? 112 : 200,
+                                            width: "100%",
+                                            marginBottom: 23,
+                                            fontSize: 16,
+                                            background: "rgba(33, 33, 33, 1)",
+                                            borderColor: "rgba(33, 33, 33, 1)",
+                                            borderRadius: 8,
+                                        }}
+                                        onClick={() => {
+                                            setLocalSearchOpen(false)
+                                        }}
+                                    >
+                                        <Closeicon style={{ width: 16 }} />
+                                    </IconButton>
+                                </Tooltip>
+                                <Tooltip
+                                    title="Delete app"
+                                    placement="bottom"
+                                    style={{ zIndex: 10011 }}
+                                >
+                                    <IconButton
+                                        style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            setLocalSearchOpen(false)
+                                            setDefaultSearch("")
+                                            const submitDeletedApp = {
+                                                "description": "",
+                                                "id": "remove",
+                                                "name": "",
+                                                "type": discoveryData
+                                            }
+                                            setFrameworkItem(submitDeletedApp)
+                                            setNewSelectedApp({})
+                                            setTimeout(() => {
+                                                setDiscoveryData({})
+                                                setFrameworkItem(submitDeletedApp)
+                                                //setNewSelectedApp({})
+                                            }, 1000)
+                                            //setAppName(discoveryData.cases.name)
+                                        }}
+                                    >
+                                        <DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+                        </div>
+                        <div
+                            style={{ width: "100%", border: "1px #494949 solid" }}
+                        />
+                        <AppSearch
+                            defaultSearch={appType}
+                            userdata={userdata}
+                            newSelectedApp={newSelectedApp}
+                            setNewSelectedApp={setNewSelectedApp}
+                        />
+                    </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)",  
                         alignItems: "center", justifyContent: "center",}}
             >

frontend/src/components/AppSelection.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import { useNavigate, Link } from 'react-router-dom';
-
+import {isMobile} from "react-device-detect";
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
 import aa from 'search-insights'
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -60,6 +60,117 @@ const AppSelection = props => {
     let navigate = useNavigate();
     const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 
+	useEffect(() => {
+        if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
+            return
+        }
+
+        const submitNewApp = {
+            description: newSelectedApp.description,
+            id: newSelectedApp.objectID,
+            large_image: newSelectedApp.image_url,
+            name: newSelectedApp.name,
+            type: discoveryData
+        }
+
+        if (discoveryData === "CASES") {
+            appFramework.cases = submitNewApp
+        }
+        else if (discoveryData === "SIEM") {
+            appFramework.siem = submitNewApp
+        }
+        else if (discoveryData === "ERADICATION") {
+            appFramework.edr = submitNewApp
+        }
+        else if (discoveryData === "INTEL") {
+            appFramework.intel = submitNewApp
+        }
+        else if (discoveryData === "EMAIL") {
+            appFramework.communication = submitNewApp
+        }
+        else if (discoveryData === "NETWORK") {
+            appFramework.network = submitNewApp
+        }
+        else if (discoveryData === "ASSETS") {
+            appFramework.assets = submitNewApp
+        }
+        else if (discoveryData === "IAM") {
+            appFramework.iam = submitNewApp
+        }
+        setFrameworkItem(submitNewApp);
+        setSelectionOpen(false);
+        console.log("Selected app changed (effect)");
+    }, [newSelectedApp]);
+
+    useEffect(() => {
+        var tempApps = []
+        if (tempApps.length === 0) {
+            // Object.entries(appFramework).forEach(([key, value]) => {
+            //     value.type = key;
+            //     tempApps.push(value);
+            // });
+            
+            // // Define the custom sorting order
+            // const customSortingOrder = ["CASES", "SIEM", "ENDPOINT", "INTEL", "EMAIL"];
+
+            const lastApps = {}
+            let endTypes = ["network", "assets", "iam"]
+
+			if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
+				//window.location.href = "/welcome"
+				return 
+			}
+
+
+            Object.entries(appFramework).forEach(([key, value]) => {
+                if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
+                    return
+                }
+
+                value.type = key;
+
+                if (endTypes.includes(value.type.toLowerCase())) {                    
+                    lastApps[value.type] = value
+                    return
+                }
+
+                if (lastPosted.type === value.type) {
+                    value = lastPosted
+                }
+                
+                tempApps.push(JSON.parse(JSON.stringify(value)));
+            });
+
+            tempApps.sort((a, b) => {
+                if (a.type.length > b.type.length) {
+                    return -1;
+                } else if (a.type.length < b.type.length) {
+                    return 1;
+                }
+            });
+
+            let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
+
+            if (endTypes.includes(lastType)) {
+                lastApps[lastPosted.type] = lastPosted
+            }
+
+            if (moreButton) {
+                tempApps.push(JSON.parse(JSON.stringify(lastApps["network"])))
+				tempApps.push(JSON.parse(JSON.stringify(lastApps["assets"])))
+				tempApps.push(JSON.parse(JSON.stringify(lastApps["iam"])))
+            }
+
+            setAppButtons(tempApps)
+            console.log("Updated appButtons: ", appButtons)
+            GetApps()
+        }
+    }, [lastPosted, moreButton])
+
+	if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
+		//window.location.href = "/welcome"
+		return null
+	}
 
     const setFrameworkItem = (data) => {
         console.log("Setting framework item: ", data, isCloud)
@@ -157,9 +268,6 @@ const AppSelection = props => {
     }
 
     const onNodeSelect = (label) => {
-        // if (setDiscoveryWrapper !== undefined) {
-        //     setDiscoveryWrapper({ id: label });
-        // }
         if (isCloud) {
             ReactGA.event({
                 category: "welcome",
@@ -168,116 +276,16 @@ const AppSelection = props => {
             });
         }
 
+		console.log("NODESELECT: ", label)
+
         setDiscoveryData(label)
         setSelectionOpen(true)
-        setNewSelectedApp({})
         setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase())
+
+        setNewSelectedApp(undefined)
     };
 
-
-    useEffect(() => {
-        if (newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
-            return
-        }
-        const submitNewApp = {
-            description: newSelectedApp.description,
-            id: newSelectedApp.objectID,
-            large_image: newSelectedApp.image_url,
-            name: newSelectedApp.name,
-            type: discoveryData
-        }
-        if (discoveryData === "CASES") {
-            appFramework.cases = submitNewApp
-        }
-        else if (discoveryData === "SIEM") {
-            appFramework.siem = submitNewApp
-        }
-        else if (discoveryData === "ERADICATION") {
-            appFramework.edr = submitNewApp
-        }
-        else if (discoveryData === "INTEL") {
-            appFramework.intel = submitNewApp
-        }
-        else if (discoveryData === "EMAIL") {
-            appFramework.communication = submitNewApp
-        }
-        else if (discoveryData === "NETWORK") {
-            appFramework.network = submitNewApp
-        }
-        else if (discoveryData === "ASSETS") {
-            appFramework.assets = submitNewApp
-        }
-        else if (discoveryData === "IAM") {
-            appFramework.iam = submitNewApp
-        }
-        setFrameworkItem(submitNewApp);
-        setSelectionOpen(false);
-        console.log("Selected app changed (effect)");
-    }, [newSelectedApp]);
-
-    useEffect(() => {
-        var tempApps = []
-        if (tempApps.length === 0) {
-            // Object.entries(appFramework).forEach(([key, value]) => {
-            //     value.type = key;
-            //     tempApps.push(value);
-            // });
-            
-            // // Define the custom sorting order
-            // const customSortingOrder = ["CASES", "SIEM", "ENDPOINT", "INTEL", "EMAIL"];
-
-            const lastApps = {}
-            let endTypes = ["network", "assets", "iam"]
-
-            if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
-                window.location.href = "/welcome"
-                return
-            }
-
-            Object.entries(appFramework).forEach(([key, value]) => {
-                if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
-                    return
-                }
-
-                value.type = key;
-
-                if (endTypes.includes(value.type.toLowerCase())) {                    
-                    lastApps[value.type] = value
-                    return
-                }
-
-                if (lastPosted.type === value.type) {
-                    value = lastPosted
-                }
-                
-                tempApps.push(value);
-            });
-
-            tempApps.sort((a, b) => {
-                if (a.type.length > b.type.length) {
-                    return -1;
-                } else if (a.type.length < b.type.length) {
-                    return 1;
-                }
-            });
-
-            let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
-
-            if (endTypes.includes(lastType)) {
-                lastApps[lastPosted.type] = lastPosted
-            }
-
-            if (moreButton) {
-                tempApps.push(lastApps["network"])
-                tempApps.push(lastApps["assets"])
-                tempApps.push(lastApps["iam"])
-            }
-
-            setAppButtons(tempApps)
-            console.log("Updated appButtons: ", appButtons)
-            GetApps()
-        }
-    }, [lastPosted, moreButton])
+    
 
     // const sizing = moreButton ? 510 : 480;
     const buttonWidth = 450;
@@ -286,7 +294,7 @@ const AppSelection = props => {
         borderRadius: 200,
         marginTop: moreButton ? 44 : "",
         height: 51,
-        width: 500,
+        width: isMobile ? 250 : 500,
         fontSize: 16,
         background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
         padding: "16px 24px",
@@ -301,14 +309,15 @@ const AppSelection = props => {
                     // minHeight: sizing,
                     // maxHeight: sizing,
                     marginTop: 10,
-                    width: 500,
-                    marginBottom: 25
+                    width: isMobile ? 380 : 500,
+                    marginBottom: 25,
+                    textAlign: isMobile ? "center" : null,
                 }}
             >
                 {selectionOpen ? (
                     <div
                         style={{
-                            width: 319,
+                            width: isMobile ? 225 : 319,
                             height: 395,
                             flexShrink: 0,
                             marginLeft: 70,
@@ -398,7 +407,7 @@ const AppSelection = props => {
                     variant="h4"
                     style={{
                         marginLeft: 8,
-                        marginTop: 40,
+                        marginTop: isMobile ? null : 40,
                         marginRight: 30,
                         marginBottom: 0,
                     }}
@@ -419,42 +428,59 @@ const AppSelection = props => {
                     Select the apps you work with and we will connect the for you.
                 </Typography>
                 <Grid rowSpacing={1} columnSpacing={2} container >
-                {appButtons.map((appData, index) => {
+					{appButtons.map((appData, index) => {
+						// This is here due to a memory issue with setting apps properly
+						if (appData.id === "remove") {
+							console.log("Removed as appdata is overridden: ", appData)
 
-                    const appName = appData.name
-                    const AppImage = appData.large_image
-                    const appType = appData.type
+							appData = {
+								"count": 0,
+								"description": "",
+								"id": "",
+								"large_image": "",
+								"name": "",
+								"type": appData.type,
+							}
+						}
 
-                    return (
-                        <AppSearchButtons
-                            appFramework={appFramework}
-                            index={index}
-                            totalApps={appButtons.length}
-                            appName={appName}
-                            appType={appType}
-                            AppImage={AppImage}
-                            defaultSearch={defaultSearch}
-                            finishedApps={finishedApps}
-                            onNodeSelect={onNodeSelect}
-                            discoveryData={discoveryData}
-                            setDiscoveryData={setDiscoveryData}
-                            setDefaultSearch={setDefaultSearch}
-                            apps={apps}
-                            setMoreButton={setMoreButton}
-                            moreButton={moreButton}
-                        />
-                    )
-                })}
+						const appName = appData.name
+						const AppImage = appData.large_image
+						const appType = appData.type
+
+						return (
+							<AppSearchButtons
+								appFramework={appFramework}
+								index={index}
+								totalApps={appButtons.length}
+								appName={appName}
+								appType={appType}
+								AppImage={AppImage}
+								defaultSearch={defaultSearch}
+								finishedApps={finishedApps}
+								onNodeSelect={onNodeSelect}
+								discoveryData={discoveryData}
+								setDiscoveryData={setDiscoveryData}
+								setDefaultSearch={setDefaultSearch}
+								apps={apps}
+								setMoreButton={setMoreButton}
+								moreButton={moreButton}
+							/>
+						)
+					})}
                 </Grid>
             </div>
             {!moreButton ? (
-            <div style={{width: "100%", marginLeft: 200, marginBottom: 20}}>
+            <div style={{width: "100%", marginLeft: isMobile ? 100 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null}}>
                 <Link style={{color:"#FF8444"}} onClick={()=>{
                     setMoreButton(true)
+
+					setTimeout(() => {
+                    	navigate("/welcome?tab=2")
+					}, 250)
                 }}
                 >See More Apps</Link>
             </div>): ""}
-            <div style={{ flexDirection: "row", }}>
+            <div style={{ flexDirection: "row", width: isMobile ? 380 : null, textAlign: isMobile ? "center" : null}}>
                 <Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
                     navigate("/welcome?tab=3")
                     setActiveStep(2)

frontend/src/components/Appsearch.jsx

@@ -24,7 +24,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e52
 const Appsearch = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, userdata, cy, isCreatorPage, actionImageList, setActionImageList, setUserSpecialzedApp }  = props
 
-  const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
+    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
 	//const theme = useTheme();
@@ -112,31 +112,11 @@ const Appsearch = props => {
 
 					counted += 1
 					var parsedname = data.name.valueOf()
-					//for (var key = 0; key < data.name.length; key++) {
-					//	var character = data.name.charAt(key)
-					//	if (character === character.toUpperCase()) {
-					//		//console.log(data.name[key], data.name[key+1])
-					//		if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
-					//		} else {
-					//			parsedname += " "
-					//		}
-					//	}
-
-					//	parsedname += character
-					//}
-					
 					parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
 
 					return (
 						<Paper key={index} elevation={0} style={paperStyle} onMouseOver={() => {
 							setMouseHoverIndex(index)
-							/*
-							ReactGA.event({
-								category: "app_grid_view",
-								action: `search_bar_click`,
-								label: "",
-							})
-							*/
 						}} onMouseOut={() => {
 							setMouseHoverIndex(-1)
 						}} onClick={() => {
@@ -201,13 +181,8 @@ const Appsearch = props => {
 	const CustomHits = connectHits(InputHits)
 
 	return (
-		<div style={{width: 287, height: 295, padding: "16px 16px 267px 16px", alignItems: "center", gap: 138,}}>
+		<div style={{width: isMobile ? null : 287, height: 295, padding: "16px 16px 267px 16px", alignItems: "center", gap: 138,}}>
 			<InstantSearch searchClient={searchClient} indexName="appsearch">
-				{/* showSearch === false ? null : 
-					<div style={{maxWidth: 450, margin: "auto", }}>
-						<CustomSearchBox />
-					</div>
-				*/}
 				<div style={{maxWidth: 450, margin: "auto", }}>
 					<CustomSearchBox />
 				</div>

frontend/src/components/Billing.jsx

@@ -7,7 +7,7 @@ import countries from "../components/Countries.jsx";
 import {
 	Box,
 	Paper,
-  Typography,
+    Typography,
 	Divider,
 	Button,
 	Grid,
@@ -19,6 +19,10 @@ import {
 	DialogTitle,
 	DialogContent,
 	TextField,
+  	InputAdornment,
+	IconButton,
+	Checkbox,
+	Tooltip, 
 } from "@mui/material";
 
 import { useNavigate, Link } from "react-router-dom";
@@ -27,6 +31,9 @@ import { toast } from "react-toastify"
 
 import {
   Cached as CachedIcon,
+  ContentCopy as ContentCopyIcon,
+  Draw as DrawIcon, 
+  Close as CloseIcon,
 } from "@mui/icons-material";
 
 //import { useAlert 
@@ -228,10 +235,44 @@ const Billing = (props) => {
       });
   };
 
-	const SubscriptionObject = (props) => {
-  		const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, subscription, highlight, } = props;
+	const sendSignatureRequest = (subscription) => {
+		const url = `${globalUrl}/api/v1/orgs/${selectedOrganization.id}`;
 
-		var top_text = "Base Access"
+		fetch(url, {
+			body: JSON.stringify({
+				org_id: selectedOrganization.id,
+				subscription: subscription,
+			}),
+		    mode: "cors",
+		    method: "POST",
+		    credentials: "include",
+		    crossDomain: true,
+		    withCredentials: true,
+		    headers: {
+		      "Content-Type": "application/json; charset=utf-8",
+		    },
+		})
+		.then((response) => {
+			if (response.status !== 200) {
+				console.log("Error in response");
+			}
+			return response.json();
+		})
+		.then((responseJson) => {
+			console.log("Response from signature request: ", responseJson);
+		})
+		.catch((error) => {
+			console.log("Error: ", error);
+		})
+	}
+
+	const SubscriptionObject = (props) => {
+  		const { globalUrl, index, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, subscription, highlight, } = props;
+
+  		const [signatureOpen, setSignatureOpen] = React.useState(false);
+  		const [tosChecked, setTosChecked] = React.useState(subscription.eula_signed)
+
+		var top_text = "Base Cloud Access"
 		if (subscription.limit === undefined && subscription.level === undefined || subscription.level === null || subscription.level === 0) {
 			subscription.name = "Enterprise"
 			subscription.currency_text = "$"
@@ -280,10 +321,109 @@ const Billing = (props) => {
 
 		return (
 			<Paper style={newPaperstyle}>
+				<Dialog
+					open={signatureOpen}
+					PaperProps={{
+					  style: {
+						pointerEvents: "auto",
+						color: "white",
+						minWidth: 650,
+						padding: 30,
+						maxHeight: 600,
+						overflowY: "auto",
+						overflowX: "hidden",
+						zIndex: 10012,
+						border: theme.palette.defaultBorder,
+					  },
+					}}
+				>
+					<Tooltip
+					  title="Close window"
+					  placement="top"
+					  style={{ zIndex: 10011 }}
+					>
+					  <IconButton
+						style={{ zIndex: 5000, position: "absolute", top: 34, right: 34 }}
+						onClick={(e) => {
+						  e.preventDefault();
+						  setSignatureOpen(false);
+						  setTosChecked(false)
+						}}
+					  >
+						<CloseIcon style={{ color: "white" }} />
+					  </IconButton>
+					</Tooltip>
+					<DialogTitle id="form-dialog-title">Sign EULA</DialogTitle>
+					<DialogContent>
+						<TextField
+							rows={13}
+							multiline
+							fullWidth
+						    InputProps={{
+						      readOnly: true,
+							  style: {
+								fontSize: 14, 
+							    color: "rgba(255, 255, 255, 0.6)",
+							  }
+						    }}
+							value={subscription.eula}
+						/>
+						<Checkbox
+							disabled={subscription.eula_signed}
+							checked={tosChecked}
+							onChange={(e) => {
+								setTosChecked(e.target.checked)
+							}}
+							inputProps={{ 'aria-label': 'primary checkbox' }}
+						/>
+						<Typography variant="body1" style={{display: "inline-block", marginLeft: 10, marginTop: 25, cursor: "pointer", }} onClick={() => {
+							setTosChecked(!tosChecked)
+						}}>
+							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.
+						</Typography>
+
+						<div style={{display: "flex", marginTop: 25, }}>
+							<Button
+								variant="contained"
+								color="primary"
+								style={{ marginLeft: "auto", }}
+								disabled={!tosChecked || subscription.eula_signed}
+								onClick={() => {
+									setSignatureOpen(false)		
+									subscription.eula_signed = true
+									sendSignatureRequest(subscription)
+								}}
+
+							>
+								Submit	
+							</Button>
+						</div>
+					</DialogContent>
+				</Dialog>
 				<div style={{display: "flex"}}>
-					<Typography variant="h6" style={{ marginTop: 10, marginBottom: 10 }}>
+					<Typography variant="h6" style={{ marginTop: 10, marginBottom: 10, flex: 5, }}>
 						{top_text}
 					</Typography>
+					{isCloud && highlight === true ?
+						<Tooltip
+						  title="Sign EULA"
+						  placement="top"
+						  style={{ zIndex: 10011 }}
+						>
+							<IconButton 
+								disabled={subscription.eula_signed}
+								style={{ marginLeft: "auto", marginTop: 10, marginBottom: 10, flex: 1, }} 
+								onClick={() => {
+									setSignatureOpen(true)
+								}}
+							>
+								<DrawIcon /> 
+							</IconButton>
+						</Tooltip>
+					: null}
 				</div>
 				<Divider />	
 					<div>
@@ -320,15 +460,61 @@ const Billing = (props) => {
 										</a>
 								}
 
-								if (feature.includes("Licensed Worker: ")) {
+								if (feature.includes("Worker License: ")) {
+									const fieldId = "webhook_uri_field_"+index
 									parsedFeature =
-										<a
-											href={feature.split("Licensed Worker: ")[1]}
-											target="_blank"
-											style={{ textDecoration: "none", color: "#f85a3e",}}
-										>
-											Download the licensed worker
-										</a>
+										<span style={{marginTop: 10, }}>
+											<Typography
+												variant="body2"
+											>
+												Use the {feature.split("Worker License: ")[0]} Worker
+											</Typography>
+											<TextField
+												value={feature.split("Worker License: ")[1]}
+                								style={{
+                								  backgroundColor: theme.palette.inputColor,
+                								  borderRadius: theme.palette.borderRadius,
+                								}}
+                								id={fieldId}
+                								onClick={() => {}}
+                								InputProps={{
+                								  endAdornment:
+                								    <InputAdornment position="end">
+                								      <IconButton
+                								        aria-label="Copy webhook"
+                								        onClick={() => {
+                								          var copyText = document.getElementById(fieldId);
+                								          if (copyText !== undefined && copyText !== null) {
+                								            console.log("NAVIGATOR: ", navigator);
+                								            const clipboard = navigator.clipboard;
+                								            if (clipboard === undefined) {
+                								              toast("Can only copy over HTTPS (port 3443)");
+                								              return;
+                								            }
+
+                								            navigator.clipboard.writeText(copyText.value);
+                								            copyText.select();
+                								            copyText.setSelectionRange(
+                								              0,
+                								              99999
+                								            ); /* For mobile devices */
+
+                								            /* Copy the text inside the text field */
+                								            document.execCommand("copy");
+                								            toast("Copied Webhook URL");
+                								          } else {
+                								            console.log("Couldn't find webhook URI field: ", copyText);
+                								          }
+                								        }}
+                								        edge="end"
+                								      >
+                								        <ContentCopyIcon />
+                								      </IconButton>
+                								    </InputAdornment>
+                								}}
+												fullWidth
+											/>
+										</span>
 								}
 
 								return (
@@ -342,7 +528,7 @@ const Billing = (props) => {
 							: null}
 						</ul>
 					</div>
-					{(highlight === true && subscription.name === "Pay as you go" && subscription.limit <= 10000) || subscription.name.includes("Scale") ?
+					{(highlight === true && (subscription.name === "Pay as you go" && subscription.limit <= 10000) || subscription.name === "Open Source") ?
 						<span>
 							<Typography variant="body2" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>
 								{subscription.name.includes("Scale") ? 
@@ -351,6 +537,18 @@ const Billing = (props) => {
 									"You are not subscribed to any plan and are using the free plan with max 10,000 app runs per month. Upgrade to deactivate this limit."
 								}
 							</Typography>
+							{/*isCloud ? 
+								<Button 
+									variant="contained" 
+									color="primary" 
+									style={{ marginTop: 20, marginBottom: 10, }}
+									onClick={() => {
+										window.open("https://checkout.stripe.com/c/pay/ppage_1O8UttDzMUgUjxHSBh3krC6Y#fidkdWxOYHwnPyd1blpxYHZxWkBhfWJOY3RoVEJdXDBPSW9hR3RxcG1GcjU1R01nbE5PQUcnKSdobGF2Jz9%2BJ2JwbGEnPydjY2M3MjA0NyhnYzcyKDFkMTQoPWFmPSgwYDI9MTA0NGAyZDNhPWZhNmcnKSdocGxhJz8nNWYwMjNnZGMoZGdgPCgxPDxhKD1kNjUoMjZmPTcxYzw9NjBjYzZmMGRnJykndmxhJz8nZGYxYWZhY2MoZ2FjNygxPDA2KDxhZ2MoZjY1PWM8NGcxYzUxMjJkYTRmJ3gpJ2dgcWR2Jz9eWCknaWR8anBxUXx1YCc%2FJ3Zsa2JpYFpscWBoJyknd2BjYHd3YHdKd2xibGsnPydtcXF1PyoqaWpmZGltanZxPzY1NTcnKSdpamZkaWAnP2twaWl4JSUl")
+									}}
+								>
+									Add Payment Method
+								</Button>
+							: null*/}
 							<Button 
 								variant="contained" 
 								color="primary" 
@@ -363,7 +561,7 @@ const Billing = (props) => {
 									}
 								}}
 							>
-								Upgrade Now	
+								Upgrade now	
 							</Button>
 						</span>
 					: null}
@@ -692,6 +890,7 @@ const Billing = (props) => {
 			<div style={{display: "flex", maxWidth: 768, minWidth: 768, }}>
 				{isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null  ?
 					<SubscriptionObject
+						index={0}
 						globalUrl={globalUrl}
 						userdata={userdata}
 						serverside={serverside}
@@ -704,6 +903,7 @@ const Billing = (props) => {
 				: !isCloud ? 
 					<span style={{display: "flex", }}>
 						<SubscriptionObject
+							index={0}
 							globalUrl={globalUrl}
 							userdata={userdata}
 							serverside={false}
@@ -722,6 +922,7 @@ const Billing = (props) => {
 							highlight={true}
 						/>
 						<SubscriptionObject
+							index={1}
 							globalUrl={globalUrl}
 							userdata={userdata}
 							serverside={false}
@@ -751,6 +952,7 @@ const Billing = (props) => {
 							.map((sub, index) => {
 								return (
 									<SubscriptionObject
+										index={index+1}
 										globalUrl={globalUrl}
 										userdata={userdata}
 										serverside={serverside}
@@ -758,6 +960,7 @@ const Billing = (props) => {
 										stripeKey={stripeKey}
 										selectedOrganization={selectedOrganization}
 										subscription={sub}
+										highlight={true}
 									/>
 								)
 							})

frontend/src/components/CreatorGrid.jsx

@@ -39,7 +39,7 @@ import {
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const CreatorGrid = props => {
-	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs }  = props
+	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, isHeader }  = props
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	//const [apps, setApps] = React.useState([]);
@@ -165,7 +165,7 @@ const CreatorGrid = props => {
 
 					return (
 						<Zoom key={index} in={true} style={{}}>
-							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px", }}>
+							<Grid item xs={xs} style={{ padding: isHeader ? null : "12px 10px 12px 10px", }}>
 								<Card style={{border: "1px solid rgba(255,255,255,0.3)", minHeight: 177, maxHeight: 177,}}>
 									<a href={creatorUrl} rel="noopener noreferrer" target={isCloud ? "" : "_blank"} style={{textDecoration: "none", color: "inherit",}}>
 						  			<CardActionArea style={{padding: "5px 10px 5px 10px", minHeight: 177, maxHeight: 177,}}>

frontend/src/components/ExploreWorkflow.jsx

@@ -4,6 +4,7 @@ import ReactGA from 'react-ga4';
 import 'react-alice-carousel/lib/alice-carousel.css';
 import TrendingFlatIcon from '@mui/icons-material/TrendingFlat';
 import theme from '../theme.jsx';
+import {isMobile} from "react-device-detect";
 import CheckBoxSharpIcon from '@mui/icons-material/CheckBoxSharp';
 import { findSpecificApp } from "../components/AppFramework.jsx"
 import {
@@ -40,7 +41,7 @@ import { useNavigate, Link } from "react-router-dom";
 import WorkflowTemplatePopup from "../components/WorkflowTemplatePopup.jsx";
 
 const ExploreWorkflow = (props) => {
-    const { userdata, globalUrl, appFramework } = props
+    const { userdata, globalUrl, appFramework, isLoggedIn, } = props
 	const [activeUsecases, setActiveUsecases] = useState(0);
     const [modalOpen, setModalOpen] = React.useState(false);
 	const [suggestedUsecases, setSuggestedUsecases] = useState([])
@@ -291,7 +292,7 @@ const ExploreWorkflow = (props) => {
     return (
         <div style={{ marginTop: 0, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
             {modalView}
-            <Typography variant="h4" style={{ marginLeft: 8, marginTop: 40, marginRight: 30, marginBottom: 0, }} color="rgba(241, 241, 241, 1)">
+            <Typography variant="h4" style={{ marginLeft: 8, marginTop: isMobile ? null : 40, marginRight: 30, marginBottom: 0, }} color="rgba(241, 241, 241, 1)">
                 Start using workflows
             </Typography>
             <Typography variant="body2" style={{ marginLeft: 8, marginTop: 10, marginRight: 30, marginBottom: 40, }} color="rgba(158, 158, 158, 1)">
@@ -300,7 +301,7 @@ const ExploreWorkflow = (props) => {
 
             <div style={{ marginTop: 0, }}>
                 <div className="thumbs" style={{ display: "flex" }}>
-                    <div style={{ minWidth: 554, maxWidth: 554, borderRadius: theme.palette.borderRadius, }}>
+                    <div style={{ minWidth: isMobile ? 300 : 554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette.borderRadius, }}>
                         <Grid item xs={11} style={{}}>
 							{suggestedUsecases.length === 0 && usecasesSet ? 
 								<Typography variant="h6" style={{ marginTop: 30, marginBottom: 50, }} color="rgba(158, 158, 158, 1)">
@@ -330,7 +331,10 @@ const ExploreWorkflow = (props) => {
 
 								return (
 									<WorkflowTemplatePopup
+										isLoggedIn={isLoggedIn}
 										userdata={userdata}
+										appFramework={appFramework}
+
 										globalUrl={globalUrl}
 										img1={image1}
 										srcapp={srcapp}
@@ -351,7 +355,7 @@ const ExploreWorkflow = (props) => {
 										fullWidth style={{
 											borderRadius: 200,
 											height: 51,
-											width: 464,
+											width: isMobile? null : 464,
 											fontSize: 16,
 											padding: "16px 24px",
 											margin: "auto",
@@ -368,7 +372,7 @@ const ExploreWorkflow = (props) => {
 								</Typography>
 							</div>
                             <Typography variant="body2" style={{ fontSize: 16, marginTop: 24 }} color="rgba(158, 158, 158, 1)">
-                                <Link style={{ color: "#f86a3e", marginLeft: 145 }} to="/usecases" className="btn btn-primary">
+                                <Link style={{ color: "#f86a3e", marginLeft: isMobile ? null : 145 }} to="/usecases" className="btn btn-primary">
 									Explore usecases 
                                 </Link>
                             </Typography>

frontend/src/components/Priorities.jsx

@@ -18,11 +18,49 @@ const Priorities = (props) => {
   const { globalUrl, userdata, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, } = props;
   const [showDismissed, setShowDismissed] = React.useState(false);
   const [showRead, setShowRead] = React.useState(false);
+  const [appFramework, setAppFramework] = React.useState({});
+
+	useEffect(() => {
+		getFramework()
+	}, [])
 
 	if (userdata === undefined || userdata === null) {
 		return 
 	}
 
+	const getFramework = () => {
+		fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+			},
+			credentials: "include",
+		})
+		.then((response) => {
+			if (response.status !== 200) {
+				console.log("Status not 200 for framework!");
+			}
+
+			return response.json();
+		})
+		.then((responseJson) => {
+			if (responseJson.success === false) {
+				setAppFramework({})
+				if (responseJson.reason !== undefined) {
+					//toast("Failed loading: " + responseJson.reason)
+				} else {
+					//toast("Failed to load framework for your org.")
+				}
+			} else {
+				setAppFramework(responseJson)
+			}
+		})
+		.catch((error) => {
+			console.log("err in framework: ", error.toString());
+		})
+	}
+
 	return (
 		<div style={{maxWidth: 1000, }}>
 			<h2 style={{ display: "inline" }}>Suggestions</h2>
@@ -62,6 +100,7 @@ const Priorities = (props) => {
 							checkLogin={checkLogin}
 							setAdminTab={setAdminTab}
 							setCurTab={setCurTab}
+  							appFramework={appFramework}
 						/>
 					)
 				})

frontend/src/components/Priority.jsx

@@ -27,31 +27,42 @@ const Priority = (props) => {
   	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	let navigate = useNavigate();
 
-	var realigned = false
+	var realignedSrc = false
+	var realignedDst = false
 	let newdescription = priority.description
 	const descsplit = priority.description.split("&")
 	if (appFramework !== undefined && descsplit.length === 5 && priority.description.includes(":default")) {
-		//console.log("descsplit: ", descsplit)
+		console.log("descsplit: ", descsplit)
 		if (descsplit[1] === "") {
 			const item = findSpecificApp(appFramework, descsplit[0])
-			//console.log("item: ", item)
+
 			if (item !== null) {
 				descsplit[1] = item.large_image
+
+				console.log("DESCSPLIT name: ", descsplit[0])
+
+				if (descsplit[0].includes(":default")) {
+					realignedSrc = true 
+				}
+
 				descsplit[0] = descsplit[0].split(":")[0]
 			}
-
-			realigned = true 
 		}
 
 		if (descsplit[3] === "") {
 			const item = findSpecificApp(appFramework, descsplit[2])
 			//console.log("item: ", item)
+			realignedDst = true 
 			if (item !== null) {
 				descsplit[3] = item.large_image
+
+				if (descsplit[2].includes(":default")) {
+					realignedDst = true 
+				}
+
 				descsplit[2] = descsplit[2].split(":")[0]
 			}
-		
-			realigned = true 
+
 		}
 
 		newdescription = descsplit.join("&")
@@ -101,6 +112,8 @@ 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={{flex: 2, overflow: "hidden",}}>
@@ -112,7 +125,7 @@ const Priority = (props) => {
 				</span>
 				{priority.type === "usecase" && priority.description.includes("&") ?
 					<span style={{display: "flex", marginTop: 10,  }}>
-						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: "auto", width: 30, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
+						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: srcSize, width: srcSize, marginRight: realignedSrc ? isCloud ? 0 : -10 : 10, borderRadius: theme.palette.borderRadius-3, marginTop: realignedSrc ?  5 : 0 }} />
 						<Typography variant="body2" color="textSecondary" style={{marginTop: 3, }}>
 							{newdescription.split("&")[0]} 
 						</Typography>
@@ -120,7 +133,7 @@ const Priority = (props) => {
 						{newdescription.split("&").length > 3 ?
 							<span style={{display: "flex", }}>
 								<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15, }}/>
-								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: "auto", width: 30, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
+								<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]} 
 								</Typography>

frontend/src/components/WelcomeForm2.jsx

@@ -4,7 +4,7 @@ import Checkbox from "@mui/material/Checkbox";
 
 import AliceCarousel from "react-alice-carousel";
 import "react-alice-carousel/lib/alice-carousel.css";
-
+import {isMobile} from "react-device-detect";
 import SearchIcon from "@mui/icons-material/Search";
 import EmailIcon from "@mui/icons-material/Email";
 import NewReleasesIcon from "@mui/icons-material/NewReleases";
@@ -79,6 +79,7 @@ const WelcomeForm = (props) => {
     selectionOpen,
     setSelectionOpen,
     checkLogin,
+    isLoggedIn,
   } = props;
   const [moreButton, setMoreButton] = useState(false);
   const ref = useRef()
@@ -449,19 +450,6 @@ const WelcomeForm = (props) => {
     }
   };
 
-  const handleSkip = () => {
-    setclickdiff(240);
-    if (!isStepOptional(activeStep)) {
-      throw new Error("You can't skip a step that isn't optional.");
-    }
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setSkipped((prevSkipped) => {
-      const newSkipped = new Set(prevSkipped.values());
-      newSkipped.add(activeStep);
-      return newSkipped;
-    });
-  };
-
   const handleReset = () => {
     setActiveStep(0);
   };
@@ -652,6 +640,7 @@ const WelcomeForm = (props) => {
         );
       case 1:
         return (
+		  appFramework === undefined || appFramework === null ? null :
           <AppSelection
             globalUrl={globalUrl}
             userdata={userdata}
@@ -667,13 +656,14 @@ const WelcomeForm = (props) => {
       case 2:
         return (
           <Collapse in={true}>
-            <div style={{ marginTop: 0, maxWidth: 700, minWidth: 700, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
+            <div style={{ marginTop: 0, maxWidth: isMobile ? 300 : 700, minWidth: isMobile ? 300 : 700, textAlign: isMobile ? "center" : null, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
 
               <div style={{ marginTop: 0, }}>
                 <div className="thumbs" style={{ display: "flex" }}>
-                  <div style={{ minWidth: 554, maxWidth: 554, borderRadius: theme.palette.borderRadius, }}>
+                  <div style={{ minWidth: isMobile ? 300 :  554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette.borderRadius, }}>
                     <ExploreWorkflow
                       globalUrl={globalUrl}
+					  isLoggedIn={isLoggedIn}
                       userdata={userdata}
 					  appFramework={appFramework}	
                     />
@@ -692,13 +682,6 @@ const WelcomeForm = (props) => {
   const extraHeight = isCloud ? -7 : 0;
   return (
     <div style={{}}>
-      {/*selectionOpen ?
-							<WorkflowSearch
-									defaultSearch={defaultSearch}
-									newSelectedApp={newSelectedApp}
-									setNewSelectedApp={setNewSelectedApp}
-							/>
-            : null*/}
       <div>
         {activeStep === steps.length ? (
           <div paddingTop="20px">

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify"
 import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import AppSearchButtons from "../components/AppSearchButtons.jsx";
+import { isMobile } from "react-device-detect";
 import {
 	Button,
 	Typography,
@@ -27,7 +28,7 @@ import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup.jsx";
 import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
 
 const WorkflowTemplatePopup = (props) => {
-	const { userdata, appFramework, globalUrl, img1, srcapp, img2, dstapp, title, description, visualOnly, apps, isLoggedIn } = props;
+	const { userdata, appFramework, globalUrl, img1, srcapp, img2, dstapp, title, description, visualOnly, apps, isLoggedIn, isHomePage } = props;
 
 	const [isActive, setIsActive] = useState(false);
 	const [isHovered, setIsHovered] = useState(false);
@@ -40,14 +41,18 @@ const WorkflowTemplatePopup = (props) => {
   	const [missingSource, setMissingSource] = React.useState(undefined)
   	const [missingDestination, setMissingDestination] = React.useState(undefined);
 
+	useEffect(() => {
+		console.log("Source & Dest check:", missingSource, missingDestination)
+	}, [missingSource, missingDestination])
+
   	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	let navigate = useNavigate();
 
-    const imagestyleWrapper = {
+	const imagestyleWrapper = {
         height: 40,
 		width: 40,
         borderRadius: 40,
-		border: "1px solid rgba(255,255,255,0.3)",
+		border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
 		overflow: "hidden",
 		display: "flex",
     }
@@ -56,7 +61,7 @@ const WorkflowTemplatePopup = (props) => {
         height: 40,
 		width: 40,
         borderRadius: 40,
-		border: "1px solid rgba(255,255,255,0.3)",
+		border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
 		overflow: "hidden",
 		display: "flex",
 	}
@@ -65,13 +70,13 @@ const WorkflowTemplatePopup = (props) => {
         height: 40,
 		width: 40,
         borderRadius: 40,
-		border: "1px solid rgba(255,255,255,0.3)",
+		border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
 		overflow: "hidden",
     }
 
 	const imagestyleDefault = {
 		display: "block",
-		marginLeft: 11,
+		marginLeft: 12,
 		marginTop: 11,
 		height: 35,
 		width: "auto",
@@ -168,6 +173,7 @@ const WorkflowTemplatePopup = (props) => {
 		  });
 	}
 
+
 	const getGeneratedWorkflow = () => {
 		// POST
 		// https://shuffler.io/api/v1/workflows/merge
@@ -183,15 +189,13 @@ const WorkflowTemplatePopup = (props) => {
 
 			if (srcapp.includes(":default")) {
 				setMissingSource({
-					"img": "https://shuffler.io/images/apps/" + srcapp + ".png",
 					"type": srcapp.split(":")[0],
 				})
 			}
 
 			if (dstapp.includes(":default")) {
 				setMissingDestination({
-					"name": dstapp,
-					"img": "https://shuffler.io/images/apps/" + dstapp + ".png",
+					"type": dstapp.split(":")[0],
 				})
 			}
 
@@ -200,7 +204,6 @@ const WorkflowTemplatePopup = (props) => {
 		
 		setWorkflowLoading(true)
 
-		// FIXME: Remove hardcoding here after testing, and user srcapp/dstapp
 		const newsrcapp = srcapp
 		const newdstapp = dstapp
 
@@ -228,15 +231,21 @@ const WorkflowTemplatePopup = (props) => {
 		})
 		.then((response) => {
 			if (response.status !== 200) {
-				console.log("Status not 200 for framework!");
+				//console.log("Status not 200 for framework!");
 			}
 
 			setWorkflowLoading(false)
 			return response.json();
 		})
 		.then((responseJson) => {
+			if (responseJson.id !== undefined && responseJson.id !== null && responseJson.id !== "" && responseJson.name !== undefined && responseJson.name !== null && responseJson.name !== "") {
+				console.log("Success in workflow template (prebuilt): ", responseJson);
+				setWorkflow(responseJson)
+				return
+			}
+
 			if (responseJson.success === false) {
-				console.log("Error in workflow template: ", responseJson.error);
+				//console.log("Error in workflow template: ", responseJson.error);
 
 				setErrorMessage("Failed to generate workflow for these tools - the Shuffle team has been notified. Click out of this window to continue. Contact support@shuffler.io for further assistance.")
 
@@ -290,9 +299,9 @@ const WorkflowTemplatePopup = (props) => {
         	        style: {
 						backgroundColor: "black",
         	            color: "white",
-        	            minWidth: 700,
-        	            maxWidth: 700,
-						paddingTop: 75, 
+        	            minWidth: isHomePage ? null : isMobile ? 300 : 700,
+        	            maxWidth: isHomePage ? null : isMobile ? 300 : 700,
+						paddingTop: isMobile ? null : 75, 
 						itemAlign: "center",
         	        },
         	    }}
@@ -311,8 +320,8 @@ const WorkflowTemplatePopup = (props) => {
 				>
 				  <CloseIcon />
 				</IconButton>
-				<DialogContent style={{marginTop: 0, marginLeft: 75, maxWidth: 470, }}>
-					<Typography variant="h4">
+				<DialogContent style={{marginTop: 0, marginLeft: isHomePage ? null : isMobile ? null :  75, maxWidth: 470, }}>
+					<Typography variant="h4" style={{ fontSize: isMobile ? 20 : null}}>
 						<b>Configure Workflow</b>
 					</Typography> 
 					<Typography variant="body2" color="textSecondary" style={{marginTop: 25, }}>
@@ -343,16 +352,41 @@ const WorkflowTemplatePopup = (props) => {
 							</Typography> 
 						</div>
 					}
-					{!isLoggedIn || missingSource === undefined ? null :
-						<div style={{marginTop: 75, }}>
+
+					{isLoggedIn && (missingSource !== undefined || missingDestination !== undefined) ? 
+						<Typography variant="body1" style={{marginTop: 75, }}>
+							{"The following app category is required generate this workflow: "}
+						</Typography>
+					: null}
+
+					{(missingSource !== undefined) ? 
+						<div style={{}}>
 							<AppSearchButtons
+								globalUrl={globalUrl}
 								appFramework={appFramework}
 
 								appType={missingSource.type}
 								appImage={missingSource.image}
+
+								setMissing={setMissingSource}
 							/>
 						</div>
-					}
+					: null}
+
+					{(missingDestination !== undefined) ? 
+						<div style={{}}>
+							<AppSearchButtons
+								globalUrl={globalUrl}
+								appFramework={appFramework}
+
+								appType={missingDestination.type}
+								appImage={missingDestination.image}
+
+								setMissing={setMissingDestination}
+							/>
+						</div>
+					: null}
+
 					<ConfigureWorkflow
 					  userdata={userdata}
 					  theme={theme}
@@ -383,26 +417,26 @@ const WorkflowTemplatePopup = (props) => {
 	if (title.length > maxlength) {
 		parsedTitle = title.substring(0, maxlength) + "..."
 	}
-
+	console.log("isHomePage", isHomePage)
 	parsedTitle = parsedTitle.replaceAll("_", " ")
 
 	const parsedDescription = description !== undefined && description !== null ? description.replaceAll("_", " ") : ""
 
 
 	return (
-		<div style={{ display: "flex", maxWidth: isCloud ? 470 : 450, minWidth: isCloud ? 470 : 450, height: 78, borderRadius: 8 }}>
+		<div style={{ display: "flex", maxWidth: isCloud ? 470 : isMobile? null: 450, minWidth: isCloud ? 470 : isMobile? null: 450, height: 78, borderRadius: 8, }}>
 			<ModalView />
 			<div
 				// variant={isActive === 1 ? "contained" : "outlined"} 
 				color="secondary"
 				disabled={visualOnly === true}
 				style={{
-					margin: 4, 
+					margin: isHomePage ? isMobile ? null : 4 : 4 , 
 					width: "100%",
 					borderRadius: 8,
 					textTransform: "none",
-					backgroundColor: theme.palette.inputColor,
-					border:  isActive ? errorMessage !== "" ? "1px solid red" : `2px solid ${theme.palette.green}` : isHovered ? "1px solid #f85a3e" : "1px solid rgba(33, 33, 33, 1)",
+					backgroundColor: isHomePage ? null : theme.palette.inputColor,
+					border:  isHomePage ? null : isActive ? errorMessage !== "" ? "1px solid red" : `2px solid ${theme.palette.green}` : isHovered ? "1px solid #f85a3e" : "1px solid rgba(33, 33, 33, 1)",
 					cursor: isActive ? errorMessage !== "" ? "not-allowed" : "pointer" : "pointer",
 					padding: "10px 20px 10px 20px", 
 					position: "relative",
@@ -465,10 +499,10 @@ const WorkflowTemplatePopup = (props) => {
 						}	
 					</div>
 					<div style={{ flex: 3, marginLeft: 20, }}>
-						<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, }} color="rgba(241, 241, 241, 1)">
+						<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)"}} >
 							{parsedTitle}
 						</Typography>
-						<Typography variant="body2" color="textSecondary" style={{ marginTop: 0, marginRight: 0, maxHeight: 16, overflow: "hidden",}} color="rgba(158, 158, 158, 1)">
+						<Typography variant="body2" color="textSecondary" style={{ fontSize: isMobile ? 10: 16, fontWeight: isHomePage ? 400 : null, textTransform: 'capitalize', marginTop: 0, overflow: "hidden",}} color="rgba(158, 158, 158, 1)">
 							{parsedDescription}
 						</Typography>
 					</div>

frontend/src/views/Admin.jsx

@@ -980,6 +980,22 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							leads.push("customer")
 						}
 
+						if (responseJson.lead_info.old_customer) {
+							leads.push("old customer")
+						}
+
+						if (responseJson.lead_info.tech_partner) {
+							leads.push("tech partner")
+						}
+
+						if (responseJson.lead_info.creator) {
+							leads.push("creator")
+						}
+
+						if (responseJson.lead_info.opensource) {
+							leads.push("open source")
+						}
+
 						if (responseJson.lead_info.demo_done) {
 							leads.push("demo done")
 						}
@@ -2412,7 +2428,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 										renderValue={(selected) => selected.join(', ')}
 										MenuProps={MenuProps}
 									>
-										{["contacted", "lead", "pov", "demo done", "customer", "student", "internal"].map((name) => (
+										{["contacted", "lead", "pov", "demo done", "customer", "open source", "student", "internal", "old customer", "creator", "tech partner"].map((name) => (
 											<MenuItem key={name} value={name}>
 												<Checkbox checked={selectedStatus.indexOf(name) > -1} />
 												<ListItemText primary={name} />
@@ -3000,7 +3016,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
     curTab === 1 ? (
       <div>
         <div style={{ marginTop: 20, marginBottom: 20 }}>
-          <h2 style={{ display: "inline" }}>User management</h2>
+          <h2 style={{ display: "inline" }}>User Management</h2>
           <span style={{ marginLeft: 25 }}>
             Add, edit, block or change passwords.{" "}
             <a
@@ -3080,7 +3096,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
             ) : null}
             <ListItemText
               primary="Actions"
-              style={{ minWidth: 180, maxWidth: 180 }}
+              style={{ minWidth: 100, maxWidth: 100, }}
+            />
+            <ListItemText
+              primary="Last Login"
+              style={{ minWidth: 150, maxWidth: 150, }}
             />
           </ListItem>
           {users === undefined || users === null
@@ -3091,6 +3111,24 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                   bgColor = "#1f2023";
                 }
 
+				const timeNow = new Date().getTime();
+				
+				// Get the highest timestamp in data.login_info
+				var lastLogin = "N/A" 
+				if (data.login_info !== undefined && data.login_info !== null) {
+					var loginInfo = 0
+					for (var i = 0; i < data.login_info.length; i++) {
+						if (data.login_info[i].timestamp > loginInfo) {
+							loginInfo = data.login_info[i].timestamp
+						}
+					}
+
+					if (loginInfo > 0) {
+						console.log("SETTING LAST LOGIN: " + loginInfo)
+						lastLogin = new Date(loginInfo * 1000).toISOString().slice(0, 10) + " (" + data.login_info.length + ")"
+					}
+				}
+
                 return (
                   <ListItem key={index} style={{ backgroundColor: bgColor }}>
                     <ListItemText
@@ -3242,7 +3280,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                         }
                       />
                     ) : null}
-                    <ListItemText style={{ display: "flex" }}>
+                    <ListItemText style={{ display: "flex", minWidth: 100, maxWidth: 100,  }}>
                       <IconButton
                         onClick={() => {
                           setSelectedUserModalOpen(true);
@@ -3300,6 +3338,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 						New apikey 
 					</Button>*/}
                     </ListItemText>
+				    <ListItemText 
+				      style={{ minWidth: 150, maxWidth: 150,  }}
+				      primary={lastLogin}
+				    ><span/>
+				    </ListItemText>
                   </ListItem>
                 );
               })}

frontend/src/views/AngularWorkflow.jsx

@@ -977,14 +977,17 @@ const AngularWorkflow = (defaultprops) => {
             tmpView = execution_id;
           }
 
+		  console.log("TMPVIEW: ", tmpView);
+
 		  // Compare with currently selected item
           if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
 			// Don't clean up if it's already open
 		    if (executionModalOpen === true) {
+				console.log("Execution modal already open, not cleaning up")
 		        return
 		    }
 
-            const execution = responseJson.find((data) => data.execution_id === tmpView);
+            const execution = responseJson.executions.find((data) => data.execution_id === tmpView);
 
 		    setExecutionModalOpen(true) 
             if (execution !== null && execution !== undefined) {

frontend/src/views/Dashboard.jsx

@@ -170,9 +170,6 @@ const UsecaseListComponent = (props) => {
 	  //console.log("parseUsecase: ", subcase)
 	  const srcdata = findSpecificApp(frameworkData, subcase.type)
 	  const dstdata = findSpecificApp(frameworkData, subcase.last)
-
-	  //console.log("srcdata: ", srcdata)
-	  //console.log("dstdata: ", dstdata)
 	
 	  if (srcdata !== undefined && srcdata !== null) { 
 		subcase.srcimg = srcdata.large_image 
@@ -192,9 +189,9 @@ const UsecaseListComponent = (props) => {
 	subcase = parseUsecase(subcase)
 
 	// Timeout 50ms to delay it slightly 
-	setTimeout(() => {
-		setInputUsecase(subcase)
-	}, 50)
+	//setTimeout(() => {
+	//	setInputUsecase(subcase)
+	//}, 50)
 
     fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
       method: "GET",
@@ -212,12 +209,13 @@ const UsecaseListComponent = (props) => {
 		return response.json();
 	})
 	.then((responseJson) => {
-		//console.log("In responseJson for usecase: ", responseJson)
 		var parsedUsecase = responseJson
 
 		if (responseJson.success === false) {
 			parsedUsecase = subcase
 		} else {
+			console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
+
 			parsedUsecase = responseJson
 
 			parsedUsecase.srcimg = subcase.srcimg
@@ -417,7 +415,7 @@ const UsecaseListComponent = (props) => {
 								const fixedName = subcase.name.toLowerCase().replace("_", " ")
 
 								return (
-      						<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
+      								<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
 
 										//setSelectedWorkflows([])
 										if (selectedItem) {
@@ -887,21 +885,23 @@ const UsecaseListComponent = (props) => {
 																>
 																	Try it out:
 																</Typography>
-																<WorkflowTemplatePopup 
-																	isLoggedIn={isLoggedIn}
-																	appFramework={frameworkData}
-																	userdata={userdata}
+																{frameworkData !== undefined && frameworkData !== null && Object.keys(frameworkData).length > 0 ?
+																	<WorkflowTemplatePopup 
+																		isLoggedIn={isLoggedIn}
+																		appFramework={frameworkData}
+																		userdata={userdata}
 
-																	globalUrl={globalUrl}
-																	img1={inputUsecase.srcimg}
-																	srcapp={inputUsecase.srcapp}
-																	img2={inputUsecase.dstimg}
-																	dstapp={inputUsecase.dstapp}
-																	title={inputUsecase.name}
-																	description={inputUsecase.description}
+																		globalUrl={globalUrl}
+																		img1={inputUsecase.srcimg}
+																		srcapp={inputUsecase.srcapp}
+																		img2={inputUsecase.dstimg}
+																		dstapp={inputUsecase.dstapp}
+																		title={inputUsecase.name}
+																		description={inputUsecase.description}
 
-																	apps={apps}
-																/>
+																		apps={apps}
+																	/>
+																: null}
 															</span>
 															{/*
 

frontend/src/views/Search.jsx

@@ -21,20 +21,13 @@ import {
 } from "@mui/icons-material";
 
 
-const bodyDivStyle = {
-	margin: "auto",
-	maxWidth: 1024,
-	scrollX: "hidden",
-	overflowX: "hidden",
-}
-
 // Should be different if logged in :|
 const Search = (props) => {
-  const { globalUrl, isLoaded, serverside, userdata, hidemargins, } = props;
+  const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader} = props;
 	let navigate = useNavigate();
 
   const [curTab, setCurTab] = useState(0);
-  const iconStyle = { marginRight: 10 };
+  const iconStyle = { marginRight: isHeader ? null : 10 };
 
 	useEffect(() => {
 		if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
@@ -58,15 +51,23 @@ const Search = (props) => {
 		return null
 	}
 
+	const bodyDivStyle = {
+		margin: "auto",
+		maxWidth: 1024,
+		scrollX: "hidden",
+		overflowX: "hidden",
+		justifyContent: isHeader ? "center" : null, 
+	}
+
 	const boxStyle = {
 		color: "white",
 		flex: "1",
-		marginLeft: 10,
-		marginRight: 10,
-		paddingLeft: 30,
-		paddingRight: 30,
-		paddingBottom: 30,
-		paddingTop: hidemargins === true ? 0 : 30,
+		marginLeft: isHeader ? null : 10,
+		marginRight: isHeader ? null : 10,
+		paddingLeft: isHeader ? null : 30,
+		paddingRight: isHeader ? null : 30,
+		paddingBottom: isHeader ? null : 30,
+		paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
 		display: "flex", 
 		flexDirection: "column",
 		overflowX: "hidden",
@@ -121,7 +122,7 @@ const Search = (props) => {
 		<div style={{paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
 			<div style={boxStyle}>
 				<Tabs
-					style={{width: 610, margin: "auto", marginTop: hidemargins === true ? 0 : 25, }}
+					style={{width: isHeader ? 765 : 610, margin: isHeader? null :"auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, }}
 					value={curTab}
 					indicatorColor="primary"
 					textColor="secondary"
@@ -152,7 +153,7 @@ const Search = (props) => {
 					/>
 				</Tabs>
 				{curTab === 0 ? 
-					<AppGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
+					<AppGrid maxRows={3} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
 				: 
 				curTab === 1 ?
     			window.location.pathname === "/search" ? 
@@ -164,7 +165,7 @@ const Search = (props) => {
 					<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				curTab === 3 ?
-					<CreatorGrid parsedXs={4} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
+					<CreatorGrid parsedXs={4} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				null}
 			</div>

frontend/src/views/Welcome.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import ReactGA from 'react-ga4';
 import WelcomeForm2 from "../components/WelcomeForm2.jsx";
 import AppFramework from "../components/AppFramework.jsx";
-
+import {isMobile} from "react-device-detect";
 import {
 	ArrorForwardIos as ArrowForwardIosIcon,
 } from '@mui/icons-material';
@@ -269,22 +269,22 @@ const Welcome = (props) => {
 			getApps()
 			getAvailableWorkflows() 
 
-			if (
-				window.location.search !== undefined &&
-				window.location.search !== null
-			) {
+			if (window.location.search !== undefined && window.location.search !== null) {
 				const urlSearchParams = new URLSearchParams(window.location.search);
 				const params = Object.fromEntries(urlSearchParams.entries());
 				const foundTab = params["tab"];
+
+				// Make foundtab into a number
+				console.log("foundTab: ", foundTab, activeStep+1)
 				if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab) && foundTab >= 1 && foundTab <= 3) {
+					console.log("SETTING TAB TO: ", foundTab)
+
 					setShowWelcome(true)
 					if (foundTab === 3 || foundTab === "3") {
 						handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
 					}
 
 					setActiveStep(foundTab-1)
-				} else { 
-					navigate(`/welcome?tab=2`)
 				}
 			}
 		}, [])
@@ -297,8 +297,8 @@ const Welcome = (props) => {
 			flex: 1, 
 			padding: 0, 
 			textAlign: "center",
-			maxWidth: 275,
-			minWidth: 275,
+			maxWidth: isMobile ? null : 275,
+			minWidth: isMobile ? null : 275, 
 			backgroundColor: theme.palette.surfaceColor,
 			color: "white",
 			borderRadius: theme.palette.borderRadius,
@@ -323,7 +323,7 @@ const Welcome = (props) => {
 		const buttonStyle = { 
 			borderRadius: 200, 
 			height: 51, 
-			width: 464, 
+			width: isMobile ? 300 : 464, 
 			fontSize: 16, 
 			// background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)", 
 			background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
@@ -331,7 +331,7 @@ const Welcome = (props) => {
 			top: 105, 
 			margin: "auto",
 			itemAlign: "center",
-			marginLeft: "65px",
+			marginLeft: isMobile? null : "65px",
 		}
 
 		const defaultImage = "/images/experienced.png"
@@ -379,7 +379,7 @@ const Welcome = (props) => {
 										})}
 								</Stepper>
 							</div> */}
-        			<Grid container spacing={1} style={{ padding: 0, maxWidth: 500, minWidth: 500, marginRight : "auto" , marginLeft: "auto" }}>
+        			<Grid container spacing={1} style={{ padding: isMobile ? 10 : 0, maxWidth: isMobile ? null : 500, minWidth: isMobile ? null : 500, marginRight : "auto" , marginLeft: "auto" }}>
           		  <Grid item xs={window.location.href.includes("tab=2") ? 6 : 12}>
 									<div>
 											{/*
@@ -391,6 +391,7 @@ const Welcome = (props) => {
 											/>
 											*/}
 											<WelcomeForm2
+												isLoggedIn={isLoggedIn}
 												checkLogin={checkLogin}
 												userdata={userdata}
 												globalUrl={globalUrl}
@@ -414,49 +415,11 @@ const Welcome = (props) => {
 											/>
 									</div>
           		  </Grid>
-								{/* {frameworkData === undefined || window.location.href.includes("tab=1") || window.location.href.includes("tab=3") ? null :
-									<div style={{marginTop: 25, }}>
-										<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
-											App Framework
-										</Typography>
-										<Fade>
-												<AppFramework
-													inputUsecase={inputUsecase}
-													frameworkData={frameworkData}
-													setFrameworkData={setFrameworkData}
-													selectedOption={"Draw"}
-													showOptions={false}
-													isLoaded={true}
-													isLoggedIn={true}
-													globalUrl={globalUrl}
-													size={0.78}
-													color={theme.palette.backgroundColor}
-													discoveryWrapper={discoveryWrapper}
-													setDiscoveryWrapper={setDiscoveryWrapper}
-													apps={apps}
-													inputUsecases={usecases}
-													setInputUsecases={setUsecases}
-												/>
-										</Fade>
-									</div>
-								} */}
 							</Grid>
 						</div>
 						: 
 						<Fade in={true}>
-							<div style={{maxWidth: 590, margin: "auto", marginTop: 50, }}>
-								
-							{/* <div style={{display:"flex"}}>
-								<ArrowBackIosIcon style={{color: "#9E9E9E", width: "16px",}} onClick={() => {
-										navigate("/workflows")
-									}}/>
-								<Typography variant="h8" style={{color: "#9E9E9E",textAlign: "center", marginBottom: 20, paddingRight: "366px"}} onClick={() => {
-										navigate("/workflows")
-									}}>
-								Back
-								</Typography>
-							</div> */}
-								
+							<div style={{maxWidth: isMobile ? null : 590, margin: "auto", marginTop: 50, }}>
 								<Typography variant="h4" style={{color: "#F1F1F1", marginTop: 50, fontSize: 32}}>
 									Help us get to know you
 								</Typography>
@@ -466,7 +429,7 @@ const Welcome = (props) => {
 								{/* <Typography variant="body1" style={{color: "#9E9E9E", marginTop: 12 ,marginBottom: 50, fontSize: 16}}>
 									We will use this information to personalize your automation
 								</Typography> */}
-								<div style={{display: "flex", marginTop: 70, width: 700, margin: "auto",}}>
+								<div style={{display: isMobile ? null : "flex", marginTop: 70, width: isMobile ? 280 : 700, margin: "auto",}}>
 									<div style={{border: "2px solid #806BFF", borderRadius: theme.palette.borderRadius, }}>
 										<Card style={paperObject} onClick={() => {
 											if (isCloud) {
@@ -479,6 +442,7 @@ const Welcome = (props) => {
 												//setActiveStep(1)
 											}
 
+											navigate("/welcome?tab=2")
 											setShowWelcome(true)
 										}}>
 											<CardActionArea style={actionObject}>
@@ -487,12 +451,13 @@ const Welcome = (props) => {
 													New to Shuffle 
 												</Typography>
 												<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
-														Let us guide you for an easier experience
+													Let us guide you for an easier experience
 												</Typography>
 											</CardActionArea>
 										</Card>
 									</div>
-									<div style={{marginLeft: 25, marginRight: 25, }}>
+									<div style={{marginLeft: 25, marginRight: 25, 
+			marginTop: isMobile ? 30 : null, }}>
 										{/* <Typography style={{marginTop: 200, }}>
 											OR
 										</Typography> */}
@@ -521,10 +486,11 @@ const Welcome = (props) => {
 								</div>
 
 								
-								<div style={{ flexDirection: "row", }}>
+								<div style={{ flexDirection: "row", textAlign: isMobile ? "center" : null, margin: isMobile ? "auto" : null }}>
 									<Button variant="contained" type="submit" fullWidth style={buttonStyle} onClick={() => {
 										navigate(`/welcome?tab=2`)
 										setActiveStep(1)
+										setShowWelcome(true)
 										ReactGA.event({
 											category: "welcome",
 											action: "click_welcome_continue",
@@ -534,20 +500,6 @@ const Welcome = (props) => {
 										Continue
 									</Button>
 								</div>
-								
-
-								
-								{/* <div style={{margin: "auto", borderRadius: theme.palette.borderRadius, marginTop: 50, width: 200, overflow: "wrap", padding: 25, cursor: "pointer", }} onClick={() => {
-									if (window.drift !== undefined) {
-										window.drift.api.startInteraction({ interactionId: 340045 })
-									} else {
-										console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
-									}
-								}}>
-									<Typography variant="body1" style={{margin: "auto", textAlign: "center"}}>
-										Want a demo instead?
-									</Typography>
-								</div> */}
 							</div>
 						</Fade>
 					}

functions/onprem/orborus/orborus.go

@@ -1410,6 +1410,7 @@ func main() {
 			continue
 		}
 
+		//defer newresp.Body.Close()
 		if newresp.StatusCode == 405 {
 			log.Printf("[WARNING] Received 405 from %s. This is likely due to a misconfigured base URL. Automatically swapping to GET request (backwards compatibility)", fullUrl)
 
@@ -1619,6 +1620,7 @@ func main() {
 				continue
 			}
 
+			defer resultResp.Body.Close()
 			body, err := ioutil.ReadAll(resultResp.Body)
 			if err != nil {
 				log.Printf("[ERROR] Failed reading confirm body: %s", err)
@@ -1913,6 +1915,7 @@ func sendWorkerRequest(workflowExecution shuffle.ExecutionRequest) error {
 		return err
 	}
 
+	defer newresp.Body.Close()
 	body, err := ioutil.ReadAll(newresp.Body)
 	if err != nil {
 		log.Printf("[ERROR] Failed reading body in worker request body to worker on %s: %s", streamUrl, err)