diff --git a/frontend/package.json b/frontend/package.json
index e3b88353..d63bcd75 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.5.2",
+    "@material-ui/data-grid": "^4.0.0-alpha.22",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.5.2",
     "@use-it/interval": "^1.0.0",
diff --git a/frontend/src/views/MyView.jsx b/frontend/src/views/MyView.jsx
index 7b9c56bb..6ca5d0b0 100644
--- a/frontend/src/views/MyView.jsx
+++ b/frontend/src/views/MyView.jsx
@@ -46,6 +46,16 @@ import mobileImage from '../assets/img/mobile.svg';
 import bagImage from '../assets/img/bag.svg';
 import bookImage from '../assets/img/book.svg';
 
+import {
+	DataGrid,
+	GridToolbarContainer,
+	GridDensitySelector,
+	GridToolbar,
+  } from '@material-ui/data-grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+import ListIcon from '@material-ui/icons/List';
+import GridOnIcon from '@material-ui/icons/GridOn';
 
 const inputColor = "#383B40"
 const surfaceColor = "#27292D"
@@ -152,6 +162,7 @@ const MyView = (props) => {
 	const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
 	const [editingWorkflow, setEditingWorkflow] = React.useState({})
 	const [executionLoading, setExecutionLoading] = React.useState(false)
+	const [view, setView] = React.useState("grid")
 	const { start, stop } = useInterval({
 	  	duration: 5000,
 	  	startImmediate: false,
@@ -307,6 +318,22 @@ const MyView = (props) => {
 		boxSizing: "border-box",
 	}
 
+	const gridContainer = {
+		cursor: "pointer",
+		height: "auto",
+		color: "white",
+		margin: "10px",
+		backgroundColor: surfaceColor,
+	}
+
+	const workFlowActionStyle = {
+		flex: "1", 
+		display: "flex", 
+		width: "150px", 
+		justifyContent: "space-between", 
+		overflow: "hidden"
+	}
+
 	const getWorkflowExecution = (id) => {
 		setExecutionLoading(true)
 		fetch(globalUrl+"/api/v1/workflows/"+id+"/executions", {
@@ -508,6 +535,25 @@ const MyView = (props) => {
 		});
 	}
 
+	const getWorkFlowMeta = (data) => {
+		let schedules = 0
+		let webhooks = 0
+		let webhookImg = ""
+		let scheduleImg = "" 
+		if (data.triggers !== undefined && data.triggers !== null && data.triggers.length > 0) {
+			for (let key in data.triggers) {
+				if (data.triggers[key].app_name === "Webhook") {
+					webhooks += 1
+					webhookImg = data.triggers[key].large_image
+				} else if (data.triggers[key].app_name === "Schedule") {
+					schedules += 1
+					scheduleImg = data.triggers[key].large_image
+				}
+			}
+		}
+		return [schedules, webhooks, webhookImg, scheduleImg];
+	}
+
 	// dropdown with copy etc I guess
 	const WorkflowPaper = (props) => {
   	const { data } = props;
@@ -530,21 +576,8 @@ const MyView = (props) => {
 		}
 
 		const actions = data.actions !== null ? data.actions.length : 0
-		var schedules = 0
-		var webhooks = 0
-		var webhookImg = ""
-		var scheduleImg = "" 
-		if (data.triggers !== undefined && data.triggers !== null && data.triggers.length > 0) {
-			for (var key in data.triggers) {
-				if (data.triggers[key].app_name === "Webhook") {
-					webhooks += 1
-					webhookImg = data.triggers[key].large_image
-				} else if (data.triggers[key].app_name === "Schedule") {
-					schedules += 1
-					scheduleImg = data.triggers[key].large_image
-				}
-			}
-		}
+		
+		const [schedules, webhooks] = getWorkFlowMeta(data);
 
 		const imgSize = 25
 		return (
@@ -570,7 +603,7 @@ const MyView = (props) => {
 								</Typography>
 							</div>
 						</Grid>
-						<Grid item style={{flex: "1", display: "flex", width: "150px", justifyContent: "space-between", overflow: "hidden",}}>
+						<Grid item style={workFlowActionStyle}>
 							<Tooltip color="primary" title="Edit workflow" placement="bottom">
 								<BubbleChartIcon/>
 							</Tooltip>
@@ -1187,6 +1220,16 @@ borderRadius: "4px", color: "black", height: "30px", "width": "30px", fontSize:
 
 		const workflowButtons = 
 			<span>
+				{view === "grid" && (
+				<Tooltip color="primary" title={"List View"} placement="top">
+					<Button color="primary" variant="text" onClick={() => setView("list")}><ListIcon /></Button>
+				</Tooltip>
+				)}
+				{view === "list" && (
+				<Tooltip color="primary" title={"Grid View"} placement="top">
+					<Button color="primary" variant="text" onClick={() => setView("grid")}><GridOnIcon /></Button>
+				</Tooltip>
+				)}
 				{workflows.length > 0 ?
 					<Tooltip color="primary" title={"Create new workflow"} placement="top">
 						<Button color="primary" style={{}} variant="text" onClick={() => setModalOpen(true)}><AddIcon /></Button> 				
@@ -1214,6 +1257,120 @@ borderRadius: "4px", color: "black", height: "30px", "width": "30px", fontSize:
 				</Tooltip>
 			</span>
 
+		const useStyles = makeStyles((theme) => ({
+			root: {
+			  border: 0,
+			  '& .MuiDataGrid-columnsContainer': {
+				backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d',
+			  },
+			  '& .MuiDataGrid-iconSeparator': {
+				display: 'none',
+			  },
+			  '& .MuiDataGrid-colCell, .MuiDataGrid-cell': {
+				borderRight: `1px solid ${
+				  theme.palette.type === 'light' ? 'white' : '#303030'
+				}`,
+			  },
+			  '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
+				borderBottom: `1px solid ${
+				  theme.palette.type === 'light' ? '#f0f0f0' : '#303030'
+				}`,
+			  },
+			  '& .MuiDataGrid-cell': {
+				color:
+				  theme.palette.type === 'light'
+					? 'white'
+					: 'rgba(255,255,255,0.65)',
+			  },
+			  '& .MuiPaginationItem-root, .MuiTablePagination-actions, .MuiTablePagination-caption': {
+				borderRadius: 0,
+				color: "white",
+			  },
+			},
+		  }));
+		const classes = useStyles();
+
+		const WorkflowGridView = () => {
+			let workflowData = "";
+			if (workflows.length > 0) {
+				const columns = [
+					{ field: 'id', headerName: 'ID', width: 70, sortable: false, },
+					{ field: 'title', headerName: 'Title', width: 330, },
+					{ field: 'actions', headerName: 'Actions', width: 200, sortable: false, 
+						disableClickEventBubbling: true,
+						renderCell: (params) => {
+							const data = params.row.record;
+							let [schedules, webhooks] = getWorkFlowMeta(data);
+
+							return <Grid item>
+									<Link to={"/workflows/"+data.id}>
+											<EditIcon style={{background: "#F85A3E",
+	boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.1)",
+	borderRadius: "4px", color: "black", height: "20px", "width": "20px", fontSize: "small"}} />
+									</Link>
+									<Tooltip color="primary" title="Edit workflow" placement="bottom">
+										<BubbleChartIcon/>
+									</Tooltip>
+									<Tooltip color="primary" title="Execute workflow" placement="bottom">
+										<PlayArrowIcon color="secondary" disabled={!data.is_valid} onClick={() => executeWorkflow(data.id)} />
+									</Tooltip>
+									<Tooltip color="primary" title={`Actions: ${data.actions.length}`} placement="bottom">
+										<AppsIcon />
+									</Tooltip>
+									{webhooks > 0 ? 
+										<Tooltip color="primary" title={`Webhooks: ${webhooks}`} placement="bottom">
+											<RestoreIcon />
+										</Tooltip>
+									: null}
+									{schedules > 0 ? 
+										<Tooltip color="primary" title={`Schedules: ${schedules}`} placement="bottom">
+											<RestoreIcon />
+										</Tooltip>
+									: null}
+								</Grid>
+							}
+					},
+					{ field: 'tags', headerName: 'Tags', width: 390, sortable: false, 
+						disableClickEventBubbling: true,
+						renderCell: (params) => {
+							const data = params.row.record;
+							return <Grid item>
+										{data.tags !== undefined ?
+											data.tags.map((tag, index) => {
+												if (index >= 3) {
+													return null
+												}
+												return (
+													<Chip
+														key={index}
+														style={{height: 30, marginRight: 5, marginTop: 2, cursor: "pointer",}}
+														label={tag}
+														variant="outlined"
+														color="primary"
+													/>
+												)
+											})
+										: null}
+									</Grid>
+							}
+						},
+				];
+				let rows = [];
+				rows = workflows.map((data, index) => {
+					let obj = {"id":index+1, "title":data.name, "record":data,};
+					return obj;
+				});
+				workflowData = <DataGrid color="primary" className={classes.root} rows={rows} columns={columns} pageSize={5} checkboxSelection autoHeight density="standard" components={{
+					Toolbar: GridToolbar,
+				  }} />
+			}
+			return (
+				<div style={gridContainer}>
+					{workflowData}
+				</div>	
+			);
+		}	
+
 		const WorkflowView = () => {
 			if (workflows.length === 0) {
 				return (
@@ -1287,18 +1444,25 @@ borderRadius: "4px", color: "black", height: "30px", "width": "30px", fontSize:
 						</div>
 					</div>
 
-					<div style={paperAppContainer}>
-						{workflows.map((data, index) => {
-							return (
-								<WorkflowPaper key={index} data={data} />
-							)
-						})}
-					</div>
+					{view === "grid" && (
+						<div style={paperAppContainer}>
+							{workflows.map((data, index) => {
+								return (
+									<WorkflowPaper key={index} data={data} />
+								)
+							})}
+						</div>
+					)}
+					
+					{view === "list" && (
+						<WorkflowGridView />
+					)}
+
 				</div>
 			</div>
 		)
 	}
-
+	
 	const importWorkflowsFromUrl = (url) => {
 		console.log("IMPORT WORKFLOWS FROM ", downloadUrl)