diff --git a/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx b/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx
index bd6eabfee..0dff90b37 100644
--- a/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx
+++ b/src/app/Workflows/Pipelines/Pipeline/Pipeline.tsx
@@ -105,71 +105,6 @@ const Pipeline: React.FC<PipelineProps> = ({ groupId, pipelineId }) => {
       {pipeline && tasks && (
         <div id={`pipeline`} className={styles['grid']}>
           <DagView pipeline={pipeline} groupId={groupId} />
-          <div>
-            <Table dark bordered style={{ margin: 0 }}>
-              <thead>
-                <tr>
-                  <th className={styles['center']}>id</th>
-                  <th>uuid</th>
-                  <th>last run</th>
-                  <th>previous run</th>
-                  <th className={styles['center']}>runs</th>
-                </tr>
-              </thead>
-              <tbody>
-                <td className={styles['center']}>{pipeline.id}</td>
-                <td>{pipeline.uuid}</td>
-                <td>
-                  {pipeline.current_run && (
-                    <Link
-                      to={`/workflows/pipelines/${groupId}/${pipelineId}/runs/${pipeline.current_run}`}
-                    >
-                      view
-                    </Link>
-                  )}
-                </td>
-                <td>
-                  {pipeline.last_run && (
-                    <Link
-                      to={`/workflows/pipelines/${groupId}/${pipelineId}/runs/${pipeline.last_run}`}
-                    >
-                      view
-                    </Link>
-                  )}
-                </td>
-                <td className={styles['center']}>
-                  <Link
-                    to={`/workflows/pipelines/${groupId}/${pipelineId}/runs`}
-                  >
-                    view
-                  </Link>
-                </td>
-              </tbody>
-            </Table>
-            <QueryWrapper isLoading={isLoadingTasks} error={listTasksError}>
-              {tasks.length ? (
-                <div id={'default-task-view'}>
-                  {tasks.map((task) => {
-                    return (
-                      <div
-                        id="tasks"
-                        key={task.id}
-                        className={`${styles['tasks']}`}
-                      >
-                        <Task
-                          task={task}
-                          groupId={groupId}
-                          pipelineId={pipelineId}
-                        />
-                      </div>
-                    );
-                  })}
-                </div>
-              ) : (
-                <SectionMessage type="info">No tasks</SectionMessage>
-              )}
-            </QueryWrapper>
-          </div>
         </div>
       )}
     </QueryWrapper>
diff --git a/src/app/Workflows/Pipelines/Pipeline/_Layout/Layout.tsx b/src/app/Workflows/Pipelines/Pipeline/_Layout/Layout.tsx
index bc429bab8..c046c332b 100644
--- a/src/app/Workflows/Pipelines/Pipeline/_Layout/Layout.tsx
+++ b/src/app/Workflows/Pipelines/Pipeline/_Layout/Layout.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Router } from '../_Router';
 
 const Layout: React.FC = () => {
-  return <Router />;
+  return <Router />
 };
 
 export default Layout;
diff --git a/src/app/Workflows/Pipelines/Pipeline/_Router/Router.tsx b/src/app/Workflows/Pipelines/Pipeline/_Router/Router.tsx
index 94217ac82..4ae6718e6 100644
--- a/src/app/Workflows/Pipelines/Pipeline/_Router/Router.tsx
+++ b/src/app/Workflows/Pipelines/Pipeline/_Router/Router.tsx
@@ -1,21 +1,43 @@
 import React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-
+import { Redirect, Route, RouteComponentProps, Switch, useLocation, useRouteMatch } from 'react-router-dom';
 import { default as Pipeline } from '../Pipeline';
+import { default as PipelineRunsLayout } from '../../PipelineRuns';
+import { default as TaskLayout } from '../../Task';
+import { Menu } from 'app/Workflows/Pipelines/Pipeline/_components';
 
 const Router: React.FC = () => {
+  const location = useLocation()
+  const { path } = useRouteMatch()
   return (
     <Switch>
       <Route
-        path={`/workflows/pipelines/:groupId/:pipelineId`}
+        path={`${path}`}
+        exact
+      >
+        <Redirect to={`${location.pathname}/tasks`}/>
+      </Route>
+      <Route path={`/workflows/pipelines/:groupId/:pipelineId/tasks/:taskId`} exact>
+        <TaskLayout />
+      </Route>
+      <Route path={`/workflows/pipelines/:groupId/:pipelineId/runs`}>
+        <PipelineRunsLayout />
+      </Route>
+      <Route
+        path={`/workflows/pipelines/:groupId/:pipelineId/:tab`}
         render={({
           match: {
-            params: { groupId, pipelineId },
+            params: { groupId, pipelineId, tab },
           },
         }: RouteComponentProps<{
           groupId: string;
           pipelineId: string;
-        }>) => <Pipeline groupId={groupId} pipelineId={pipelineId} />}
+          tab: string;
+        }>) => (
+          <>
+            <Menu tab={tab}/>
+            <Pipeline groupId={groupId} pipelineId={pipelineId}/>
+          </>
+        )}
       />
     </Switch>
   );
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.old.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.old.tsx
deleted file mode 100644
index 9870bee2f..000000000
--- a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.old.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-import { Workflows } from '@tapis/tapis-typescript';
-import { Workflows as Hooks } from '@tapis/tapisui-hooks';
-import { Icon } from '@tapis/tapisui-common';
-import { useExtension } from 'extensions';
-import styles from './DagView.module.scss';
-import { Button } from 'reactstrap';
-import Tooltip from '@mui/material/Tooltip';
-import { useCallback, useEffect, useReducer } from 'react';
-import { useQueryClient } from 'react-query';
-import { TaskEditor } from '../../../_components';
-import {
-  MenuList,
-  MenuItem,
-  ListItemText,
-  ListItemIcon,
-  Divider,
-  Paper,
-} from '@mui/material';
-import {
-  Delete,
-  Edit,
-  Hub,
-  Input,
-  Output,
-  Visibility,
-} from '@mui/icons-material';
-import { useLocation } from 'react-router-dom';
-
-type NodeTaskActionProps = {
-  onClickEdit?: () => void;
-  onClickDelete?: () => void;
-  task: Workflows.Task;
-};
-
-const NodeTaskActions: React.FC<NodeTaskActionProps> = ({
-  onClickEdit,
-  onClickDelete,
-  task,
-}) => {
-  const location = useLocation();
-  return (
-    <Paper
-      sx={{ width: 320, maxWidth: '100%' }}
-      className={styles['dag-task-action-menu']}
-    >
-      <MenuList dense>
-        <MenuItem
-          href={'#' + location.pathname + '/tasks/' + task.id}
-          component="a"
-        >
-          <ListItemIcon>
-            <Visibility fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>View</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={onClickEdit}>
-          <ListItemIcon>
-            <Edit fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Edit</ListItemText>
-        </MenuItem>
-        <Divider />
-        <MenuItem>
-          <ListItemIcon>
-            <Hub fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Dependencies</ListItemText>
-        </MenuItem>
-        <MenuItem>
-          <ListItemIcon>
-            <Input fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Input</ListItemText>
-        </MenuItem>
-        <MenuItem>
-          <ListItemIcon>
-            <Output fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Output</ListItemText>
-        </MenuItem>
-        <Divider />
-        <MenuItem onClick={onClickDelete}>
-          <ListItemIcon>
-            <Delete fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Delete</ListItemText>
-        </MenuItem>
-      </MenuList>
-    </Paper>
-  );
-};
-
-type DagViewProps = {
-  tasks: Array<Workflows.Task>;
-  pipelineId: string;
-  groupId: string;
-};
-
-type State = {
-  tasks: Array<Workflows.Task>;
-  selectedTask?: Workflows.Task | undefined;
-  editTask?: Workflows.Task | undefined;
-};
-
-enum EnumActionType {
-  ADD_TASK,
-  DELETE_TASK,
-  SELECT_TASK,
-  EDIT_TASK,
-}
-
-type Action = {
-  type: EnumActionType;
-  payload: Workflows.Task;
-};
-
-const reducer = (state: State, action: Action) => {
-  switch (action.type) {
-    case EnumActionType.ADD_TASK:
-      return {
-        ...state,
-        tasks: [...state.tasks, action.payload],
-      };
-
-    case EnumActionType.DELETE_TASK:
-      return {
-        ...state,
-        tasks: state.tasks.filter((task) => task.id !== action.payload.id),
-      };
-    case EnumActionType.SELECT_TASK:
-      let selectedTask: Workflows.Task | undefined = action.payload;
-      if (state.selectedTask && selectedTask.id === state.selectedTask.id) {
-        selectedTask = undefined;
-      }
-      return {
-        ...state,
-        selectedTask,
-      };
-    case EnumActionType.EDIT_TASK:
-      let editTask: Workflows.Task | undefined = action.payload;
-      if (state.editTask && editTask.id === state.editTask.id) {
-        editTask = undefined;
-      }
-      return {
-        ...state,
-        editTask,
-      };
-    default:
-      return state;
-  }
-};
-
-const initialReducerState = {
-  tasks: [],
-  selectedTask: undefined,
-};
-
-const DagView: React.FC<DagViewProps> = ({ groupId, pipelineId, tasks }) => {
-  // const [state, dispatch] = useReducer(reducer, initialReducerState);
-  // useEffect(() => {
-  //   const taskIdsInState = state.tasks.map((t) => t.id);
-  //   tasks.map((task) => {
-  //     if (!taskIdsInState.includes(task.id)) {
-  //       dispatch({ type: EnumActionType.ADD_TASK, payload: task });
-  //     }
-  //   });
-  // }, [tasks]);
-
-  const { extension } = useExtension();
-  const queryClient = useQueryClient();
-
-  const sidebarTasks =
-    extension?.serviceCustomizations?.workflows?.dagTasks || [];
-
-  // const {
-  //   create,
-  //   isLoading: createTaskIsLoading,
-  //   isError: createTaskIsError,
-  //   error: createTaskError,
-  //   reset: createTaskReset,
-  // } = Hooks.Tasks.useCreate();
-
-  // const onSuccessCreateTask = useCallback(() => {
-  //   queryClient.invalidateQueries(Hooks.Tasks.queryKeys.list);
-  //   createTaskReset();
-  // }, [queryClient, createTaskReset]);
-
-  // const {
-  //   removeAsync,
-  //   isLoading: deleteTaskIsLoading,
-  //   isError: deleteTaskIsError,
-  //   error: deleteTaskError,
-  //   isSuccess: deleteTaskIsSuccess,
-  //   reset: deleteTaskReset,
-  // } = Hooks.Tasks.useDelete();
-
-  // const onSuccessDeleteTask = useCallback(() => {
-  //   queryClient.invalidateQueries(Hooks.Tasks.queryKeys.list);
-  //   deleteTaskReset();
-  // }, [queryClient, deleteTaskReset]);
-
-  // const handleEditTask = (task: Workflows.Task) => {
-  //   // Unselect a task if selected
-  //   if (state.selectedTask) {
-  //     dispatch({
-  //       type: EnumActionType.SELECT_TASK,
-  //       payload: state.selectedTask,
-  //     });
-  //   }
-  //   dispatch({ type: EnumActionType.EDIT_TASK, payload: task });
-  // };
-
-  // const handleCreateTask = (task: Workflows.Task) => {
-  //   // Unselect a task if selected
-  //   if (state.selectedTask) {
-  //     dispatch({
-  //       type: EnumActionType.SELECT_TASK,
-  //       payload: state.selectedTask,
-  //     });
-  //   }
-
-  //   const taskIdsInState = state.tasks.map((t) => t.id);
-  //   let i = 1;
-  //   let taskId = task.id;
-  //   while (taskIdsInState.includes(task.id)) {
-  //     i++;
-  //     if (!taskIdsInState.includes(taskId + `${i}`)) {
-  //       break;
-  //     }
-  //   }
-  //   taskId = i == 1 ? taskId : taskId + `${i}`;
-  //   task = { ...task, id: taskId };
-  //   dispatch({ type: EnumActionType.ADD_TASK, payload: task });
-  //   switch (task.type) {
-  //     case Workflows.EnumTaskType.Function:
-  //       create(
-  //         {
-  //           groupId,
-  //           pipelineId,
-  //           reqTask: {
-  //             ...task,
-  //             id: task.id!,
-  //             runtime: task.runtime!,
-  //             installer: task.installer!,
-  //             code: task.code! || undefined,
-  //           },
-  //         },
-  //         {
-  //           onSuccess: onSuccessCreateTask,
-  //           onError: () => {
-  //             dispatch({ type: EnumActionType.DELETE_TASK, payload: task });
-  //           },
-  //         }
-  //       );
-  //   }
-  // };
-
-  // const handleDeleteTask = (task: Workflows.Task) => {
-  //   dispatch({ type: EnumActionType.DELETE_TASK, payload: task });
-  //   removeAsync(
-  //     { groupId, pipelineId, taskId: task.id! },
-  //     {
-  //       onSuccess: onSuccessDeleteTask,
-  //       onError: () => {
-  //         dispatch({ type: EnumActionType.ADD_TASK, payload: task });
-  //       },
-  //     }
-  //   );
-  // };
-
-  // const handleSelectTask = (task: Workflows.Task) => {
-  //   dispatch({ type: EnumActionType.SELECT_TASK, payload: task });
-  // };
-
-  return (
-    <></>
-    // <div id="dag-view" className={`${styles['dag-view-container']}`}>
-    //   {state.editTask ? (
-    //     <TaskEditor
-    //       task={state.editTask}
-    //       tasks={tasks}
-    //       groupId={groupId}
-    //       pipelineId={pipelineId}
-    //       toggle={() => {
-    //         handleEditTask(state.editTask!);
-    //       }}
-    //     />
-    //   ) : (
-    //     <div className={`${styles['dag-layout-container']}`}>
-    //       <div id="dag-sidebar" className={`${styles['sidebar']}`}>
-    //         {sidebarTasks.map((task) => {
-    //           return (
-    //             <Tooltip title={task.description || task.id} placement="left">
-    //               <div className={`${styles['sidebar-item']}`}>
-    //                 <div className={`${styles['task-info']}`}>
-    //                   <b className={`${styles['task-info-text']}`}>{task.id}</b>
-    //                 </div>
-    //                 <Button
-    //                   onClick={() => {
-    //                     handleCreateTask({ ...task, type: task.type! });
-    //                   }}
-    //                   className={`${styles['add-button']}`}
-    //                 >
-    //                   <Icon name={'add'}></Icon>
-    //                 </Button>
-    //               </div>
-    //             </Tooltip>
-    //           );
-    //         })}
-    //       </div>
-    //       <div className={`${styles['dag-container']}`}>
-    //         <div className={`${styles['dag']}`}>
-    //           {createTaskIsError && 'ERROR:' + createTaskError?.message}
-    //           {deleteTaskIsError && 'ERROR:' + deleteTaskError?.message}
-    //           {state.tasks.map((task) => {
-    //             let classNames = `${styles['dag-task']}`;
-    //             let isActive =
-    //               state.selectedTask && state.selectedTask.id == task.id;
-    //             if (isActive) {
-    //               classNames += ' ' + styles['dag-task-active'];
-    //             }
-    //             return (
-    //               <>
-    //                 <Tooltip
-    //                   title={task.description || task.id}
-    //                   placement="right"
-    //                 >
-    //                   <div
-    //                     className={classNames}
-    //                     onClick={() => {
-    //                       handleSelectTask(task);
-    //                     }}
-    //                   >
-    //                     {task.id}
-    //                   </div>
-    //                 </Tooltip>
-    //                 {isActive && (
-    //                   <NodeTaskActions
-    //                     task={task}
-    //                     onClickDelete={() => {
-    //                       handleDeleteTask(task);
-    //                     }}
-    //                     onClickEdit={() => {
-    //                       handleEditTask(task);
-    //                     }}
-    //                   />
-    //                 )}
-    //               </>
-    //             );
-    //           })}
-    //         </div>
-    //       </div>
-    //     </div>
-    //   )}
-    //   </div>
-  );
-};
-
-export default DagView;
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx
index e428ff2e4..9116b4150 100644
--- a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx
+++ b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx
@@ -4,20 +4,11 @@ import { Workflows } from '@tapis/tapis-typescript';
 import { Workflows as Hooks } from '@tapis/tapisui-hooks';
 import { useExtension } from 'extensions';
 import styles from './DagView.module.scss';
-import { Button } from 'reactstrap';
-import Tooltip from '@mui/material/Tooltip';
-import { useQueryClient } from 'react-query';
-import { TaskEditor } from '../../../_components';
 import {
-  MenuList,
-  MenuItem,
   ListItemText,
   ListItemIcon,
   Divider,
-  Paper,
   Chip,
-  SpeedDial,
-  SpeedDialAction,
   Drawer,
   Box,
   List,
@@ -131,6 +122,7 @@ const DagViewDrawer: React.FC<DagViewDrawerProps> = ({
               <ListItem key={`dag-task-${i}`} disablePadding>
                 <ListItemButton
                   onClick={() => {
+                    console.log({task})
                     handleCreateDagTask(task as Workflows.Task);
                   }}
                 >
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/Menu/Menu.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/Menu/Menu.tsx
index 71830ab62..dc9dea855 100644
--- a/src/app/Workflows/Pipelines/Pipeline/_components/Menu/Menu.tsx
+++ b/src/app/Workflows/Pipelines/Pipeline/_components/Menu/Menu.tsx
@@ -1,40 +1,30 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import Stack from '@mui/material/Stack';
-import { Button } from '@mui/material';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { Box, Tab } from '@mui/material';
+import { TabList, TabContext } from '@mui/lab';
 
-const Menu: React.FC = () => {
-  const history = useHistory();
+const Menu: React.FC<{tab: string}> = ({tab}) => {
+  const { url } = useRouteMatch()
+  const history = useHistory()
+  const handleChangeTab = (_: React.SyntheticEvent, value: string) => {
+    const parts = url.split("/")
+    parts.pop()
+    history.push(`${parts.join("/")}/${value}`)
+}
   return (
-    <Stack spacing={2} direction="row">
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows');
-        }}
-      >
-        Tasks
-      </Button>
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows/groups');
-        }}
-      >
-        Envrionment
-      </Button>
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows/pipelines');
-        }}
-      >
-        Parameters
-      </Button>
-    </Stack>
+    <Box sx={{ width: '100%', typography: 'body1' }}>
+      <TabContext value={tab}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <TabList onChange={handleChangeTab}>
+            <Tab label="Tasks" value="tasks" />
+            <Tab label="Exec. Profile" value="execprofile" />
+            <Tab label="Envrionment" value="env" />
+            <Tab label="Parameters" value="params" />
+            <Tab label="Runs" value="runs" />
+          </TabList>
+        </Box>
+      </TabContext>
+    </Box>
   );
 };
 
diff --git a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
index c499e887f..992668e53 100644
--- a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
+++ b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
@@ -99,13 +99,13 @@ const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
           )}
         </div>
       </QueryWrapper>
-      {showModal && groupId && pipelineId && (
+      {/* {showModal && groupId && pipelineId && (
         <RunPipelineModal
           groupId={groupId}
           pipelineId={pipelineId}
           toggle={toggle}
         />
-      )}
+      )} */}
     </div>
   );
 };
diff --git a/src/app/Workflows/Pipelines/_Router/Router.tsx b/src/app/Workflows/Pipelines/_Router/Router.tsx
index 6e6f32116..60a3e6c47 100644
--- a/src/app/Workflows/Pipelines/_Router/Router.tsx
+++ b/src/app/Workflows/Pipelines/_Router/Router.tsx
@@ -1,33 +1,22 @@
 import React from 'react';
 import { Route, useRouteMatch, Switch } from 'react-router-dom';
-
-import { default as Pipelines } from '../Pipelines';
-import { default as Pipeline } from '../Pipeline';
-import { default as PipelineRuns } from '../PipelineRuns';
-import { default as Task } from '../Task';
+import { default as PipelinesLayout } from '../Pipelines';
+import { default as PipelineLayout } from '../Pipeline';
 
 const Router: React.FC = () => {
   const { path } = useRouteMatch();
   return (
     <Switch>
       <Route path={`${path}`} exact>
-        <Pipelines />
+        <PipelinesLayout />
       </Route>
 
       <Route path={`${path}/:groupId`} exact>
-        <Pipelines />
-      </Route>
-
-      <Route path={`${path}/:groupId/:pipelineId`} exact>
-        <Pipeline />
+        <PipelinesLayout />
       </Route>
-
-      <Route path={`${path}/:groupId/:pipelineId/tasks/:taskId`} exact>
-        <Task />
-      </Route>
-
-      <Route path={`${path}/:groupId/:pipelineId/runs`}>
-        <PipelineRuns />
+      
+      <Route path={`${path}/:groupId/:pipelineId`}>
+        <PipelineLayout />
       </Route>
     </Switch>
   );
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.module.scss
deleted file mode 100644
index fbecf0d98..000000000
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.module.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-}
-
-.stack {
-  padding-bottom: 8px;
-}
-
-.close {
-  padding: 2px;
-  border: 2px solid #cccccc;
-  border-radius: 3px;
-}
-
-.close:hover {
-  cursor: pointer;
-  border-color: #333333;
-  transition: 0.2s;
-}
-
-.body-with-sidebar {
-  width: 70%;
-}
-
-.body-wo-sidebar {
-  width: 100%;
-}
-
-.code-container {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #cccccc;
-  min-height: 320px;
-  max-height: 100%;
-}
-
-.code-runtime {
-  font-size: 14px;
-}
-
-.code-container-header {
-  padding: 4px;
-}
-
-.code-container-header-item {
-  cursor: pointer;
-}
-
-.code {
-}
-
-.form-group {
-  padding: 16px;
-  display: grid;
-}
-
-.form {
-  width: 100%;
-  padding: 16px;
-  display: grid;
-  gap: 16px;
-}
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.tsx
deleted file mode 100644
index 53b3604e9..000000000
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/FunctionTaskEditor.tsx
+++ /dev/null
@@ -1,731 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Workflows } from '@tapis/tapis-typescript';
-import { Workflows as Hooks } from '@tapis/tapisui-hooks';
-import CodeMirror from '@uiw/react-codemirror';
-import { python } from '@codemirror/lang-python';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import { decode, encode } from 'base-64';
-import styles from './FunctionTaskEditor.module.scss';
-import {
-  Delete,
-  ArrowBack,
-  Update,
-  Info,
-  Hub,
-  CompareArrows,
-  GitHub,
-  Tune,
-  Memory,
-  Fullscreen,
-  FullscreenExit,
-} from '@mui/icons-material';
-import { LoadingButton as Button, TabContext, TabList } from '@mui/lab';
-import {
-  // Button,
-  Box,
-  TextField,
-  Checkbox,
-  FormGroup,
-  FormControlLabel,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  FormHelperText,
-  Tab,
-  Chip,
-  Stack,
-  Snackbar,
-  Alert,
-  AlertTitle,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material';
-
-type SidebarProps = {
-  title: string;
-  toggle: () => void;
-};
-
-const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = ({
-  children,
-  title,
-  toggle,
-}) => {
-  return (
-    <div className={styles['sidebar']}>
-      <div className={styles['menu']}>
-        <h2>{title}</h2>
-        <ArrowBack onClick={toggle} className={styles['back']} />
-      </div>
-      {children}
-    </div>
-  );
-};
-
-type FunctionTaskEditorProps = {
-  groupId: string;
-  pipelineId: string;
-  task: Workflows.FunctionTask;
-  tasks: Array<Workflows.Task>;
-  defaultTab?: string;
-};
-
-const FunctionTaskEditor: React.FC<FunctionTaskEditorProps> = ({
-  groupId,
-  pipelineId,
-  task,
-  tasks,
-  defaultTab = 'code',
-}) => {
-  const initialTaskData = JSON.parse(JSON.stringify(task));
-  console.log({ initialTaskData });
-  const [modal, setModal] = useState<string | undefined>(undefined);
-  const [tab, setTab] = useState<string>(defaultTab);
-  const [patchData, setPatchData] =
-    useState<Partial<Workflows.FunctionTask>>(initialTaskData);
-  const { patch, isLoading, isSuccess, isError, error, reset } =
-    Hooks.Tasks.usePatch();
-
-  const patchTask = (
-    task: Workflows.FunctionTask,
-    data: Partial<Workflows.FunctionTask>
-  ) => {
-    setPatchData({
-      ...task,
-      ...data,
-    });
-  };
-
-  console.log({ patchData });
-
-  const packageConverter = (
-    packages: Array<string> | string,
-    reverse = false
-  ) => {
-    if (!reverse) {
-      let packageString = '';
-      (packages as Array<string>).map((name) => {
-        packageString += name + '\n';
-      });
-
-      return packageString;
-    }
-
-    const splitPackages = (packages as string)
-      .replace(/^\s+|\s+$/g, '')
-      .replace(/\s/g, ' ')
-      .split(' ');
-    return splitPackages;
-  };
-
-  const handlePatch = () => {
-    patch({
-      groupId,
-      pipelineId,
-      taskId: task.id!,
-      task: patchData as Workflows.Task,
-    });
-  };
-
-  const handleChangeTab = (_: React.SyntheticEvent, tab: string) => {
-    setTab(tab);
-  };
-
-  const dependentTasks = useMemo(() => {
-    return tasks.filter((t) => {
-      for (let dep of t.depends_on!) {
-        if (dep.id === task.id) {
-          return true;
-        }
-      }
-      return false;
-    });
-  }, [task, tasks, patchData]);
-
-  const handleUpdateDep = (taskId: string, action: 'add' | 'remove') => {
-    if (action === 'add') {
-      // TODO handle for can_fail and can_skip
-      patchTask(task, {
-        depends_on: [
-          ...patchData.depends_on!,
-          { id: taskId, can_fail: false, can_skip: false },
-        ],
-      });
-      return;
-    }
-
-    if (action === 'remove') {
-      patchTask(task, {
-        depends_on: [
-          ...patchData.depends_on!.filter((dep) => dep.id !== taskId),
-        ],
-      });
-      return;
-    }
-  };
-
-  return (
-    <div>
-      <Box sx={{ width: '100%', typography: 'body1' }}>
-        <TabContext value={tab}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <TabList onChange={handleChangeTab}>
-              <Tab label="General" value="general" />
-              <Tab label="I/O" value="io" />
-              <Tab label="Exec. Profile" value="execprofile" />
-              <Tab label="Dependencies" value="deps" />
-              <Tab label="Runtime" value="runtime" />
-              <Tab label="Repos" value="git" />
-              <Tab label="Code" value="code" />
-            </TabList>
-          </Box>
-        </TabContext>
-      </Box>
-      {isError && error && (
-        <Alert
-          severity="error"
-          style={{ marginTop: '8px' }}
-          onClose={() => {
-            reset();
-          }}
-        >
-          <AlertTitle>Error</AlertTitle>
-          {error.message}
-        </Alert>
-      )}
-      {isSuccess && (
-        <Snackbar
-          open={true}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        >
-          <Alert
-            severity="success"
-            style={{ marginTop: '8px' }}
-            onClose={() => {
-              reset();
-            }}
-          >
-            Task {task.id} updated successfully
-          </Alert>
-        </Snackbar>
-      )}
-      <Stack
-        direction="row"
-        spacing={'8px'}
-        alignItems="flex-start"
-        justifyContent={'flex-end'}
-      >
-        <Button
-          size="small"
-          variant="outlined"
-          onClick={handlePatch}
-          loading={isLoading}
-          disabled={isLoading}
-          style={{ marginBottom: '8px', marginTop: '8px' }}
-          startIcon={<Update />}
-        >
-          Update
-        </Button>
-        <Button
-          size="small"
-          variant="outlined"
-          color="error"
-          onClick={() => {
-            setModal('delete');
-          }}
-          disabled={isLoading}
-          style={{ marginBottom: '8px', marginTop: '8px' }}
-          startIcon={<Delete />}
-        >
-          Delete
-        </Button>
-      </Stack>
-      <div className={styles['container']}>
-        {tab === 'general' && (
-          <Sidebar
-            title={'General'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            <Box
-              component="form"
-              className={styles['form']}
-              noValidate
-              autoComplete="off"
-            >
-              <TextField
-                label="Id"
-                size="small"
-                variant="outlined"
-                disabled
-                value={task.id}
-              />
-              <TextField
-                label="Type"
-                disabled
-                size="small"
-                variant="outlined"
-                value={task.type}
-              />
-              <TextField
-                label="Description"
-                variant="outlined"
-                multiline
-                rows={4}
-                defaultValue={patchData.description}
-                onChange={(e) => {
-                  patchTask(task, { description: e.target.value });
-                }}
-              />
-            </Box>
-          </Sidebar>
-        )}
-        {tab === 'deps' && (
-          <Sidebar
-            title={'Dependencies'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            <FormGroup className={styles['form']}>
-              {tasks.map((dep) => {
-                if (dep.id === task.id) {
-                  return;
-                }
-                return (
-                  <FormControlLabel
-                    style={{ padding: 0 }}
-                    control={
-                      <Checkbox
-                        defaultChecked={
-                          patchData.depends_on!.filter((t) => t.id === dep.id)
-                            .length > 0
-                        }
-                        style={{ padding: 0 }}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            handleUpdateDep(e.target.value, 'add');
-                            return;
-                          }
-                          handleUpdateDep(e.target.value, 'remove');
-                        }}
-                        value={dep.id}
-                      />
-                    }
-                    label={dep.id}
-                  />
-                );
-              })}
-            </FormGroup>
-          </Sidebar>
-        )}
-        {tab === 'io' && (
-          <Sidebar
-            title={'Inputs & Outputs'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            {Object.entries(task.input || {}).map((k, v) => {
-              return `${k}:${v}`;
-            })}
-          </Sidebar>
-        )}
-        {tab === 'execprofile' && (
-          <Sidebar
-            title={'Execution Profile'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            <div className={styles['form']}>
-              <FormControl
-                fullWidth
-                margin="dense"
-                style={{ marginBottom: '-16px' }}
-              >
-                <InputLabel size="small" id="mode">
-                  Task invocation mode
-                </InputLabel>
-                <Select
-                  label="Task invocation mode"
-                  labelId="mode"
-                  size="small"
-                  defaultValue={(patchData as any).invocation_mode}
-                >
-                  {Object.values(Workflows.EnumInvocationMode).map((mode) => {
-                    return (
-                      <MenuItem
-                        selected={mode === (patchData as any).invocation_mode}
-                        value={mode}
-                      >
-                        {mode}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </FormControl>
-              <FormHelperText>
-                Excute tasks asynchronously or serially
-              </FormHelperText>
-              <FormControl
-                fullWidth
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-              >
-                <InputLabel size="small" id="retrypolicy">
-                  Retry policy
-                </InputLabel>
-                <Select
-                  label="Retry Policy"
-                  onChange={() => {}}
-                  labelId="retrypolicy"
-                  size="small"
-                  defaultValue={patchData.execution_profile?.retry_policy}
-                >
-                  {Object.values(Workflows.EnumRetryPolicy).map((policy) => {
-                    return (
-                      <MenuItem
-                        selected={
-                          policy === task.execution_profile?.retry_policy
-                        }
-                        value={policy}
-                      >
-                        {policy}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </FormControl>
-              <FormHelperText>
-                Controls how soon to retry a task once it enters a failed state
-              </FormHelperText>
-              <FormControl
-                fullWidth
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-              >
-                <InputLabel size="small" id="flavor">
-                  Flavor
-                </InputLabel>
-                <Select
-                  label="Flavor"
-                  labelId="flavor"
-                  size="small"
-                  defaultValue={patchData.execution_profile?.flavor}
-                >
-                  {Object.values(Workflows.EnumTaskFlavor).map((flavor) => {
-                    return (
-                      <MenuItem
-                        selected={flavor === task.execution_profile?.flavor}
-                        value={flavor}
-                      >
-                        {flavor}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </FormControl>
-              <FormHelperText>
-                How many cpus/gpus, and how much memory and disk available to
-                this task
-              </FormHelperText>
-              <TextField
-                defaultValue={patchData.execution_profile?.max_retries || 0}
-                size="small"
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-                label="Max retries"
-                variant="outlined"
-              />
-              <FormHelperText>
-                Maximum number of times this task will execute after failing
-                once
-              </FormHelperText>
-              <TextField
-                defaultValue={
-                  patchData.execution_profile?.max_exec_time || 86400
-                }
-                size="small"
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-                label="Max exec time (sec)"
-                variant="outlined"
-              />
-              <FormHelperText>
-                Max time in seconds this task is permitted to run
-              </FormHelperText>
-            </div>
-          </Sidebar>
-        )}
-        {tab === 'runtime' && (
-          <Sidebar
-            title={'Runtime'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            <div className={styles['form']}>
-              <FormControl
-                fullWidth
-                margin="dense"
-                style={{ marginBottom: '-16px' }}
-              >
-                <InputLabel size="small" id="environment">
-                  Runtime environment
-                </InputLabel>
-                <Select
-                  size="small"
-                  label="Runtime environment"
-                  labelId="environment"
-                  defaultValue={patchData.runtime}
-                  onChange={(e) => {
-                    patchTask(task, {
-                      runtime: e.target
-                        .value as Workflows.EnumRuntimeEnvironment,
-                    });
-                  }}
-                >
-                  {Object.values(Workflows.EnumRuntimeEnvironment).map(
-                    (runtimeEnv) => {
-                      return (
-                        <MenuItem
-                          value={runtimeEnv}
-                          selected={runtimeEnv === task.runtime}
-                        >
-                          {runtimeEnv}
-                        </MenuItem>
-                      );
-                    }
-                  )}
-                </Select>
-              </FormControl>
-              <FormHelperText>
-                The runtime envrionment in which the function code will be
-                executed
-              </FormHelperText>
-              <TextField
-                label="Packages"
-                variant="outlined"
-                multiline
-                rows={4}
-                defaultValue={packageConverter(patchData.packages || [])}
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-                onChange={(e) => {
-                  patchTask(task, {
-                    packages: packageConverter(
-                      e.target.value,
-                      true
-                    ) as Array<string>,
-                  });
-                }}
-              />
-              <FormHelperText>
-                Each package must be on a seperate line. May be just the package
-                name or the pacakge name followed by the version. Ex.
-                tapipy==^1.6.0
-              </FormHelperText>
-              <FormControl
-                fullWidth
-                margin="normal"
-                style={{ marginBottom: '-16px' }}
-              >
-                <InputLabel size="small" id="installer">
-                  Installer
-                </InputLabel>
-                <Select
-                  size="small"
-                  label="Installer"
-                  defaultValue={patchData.installer}
-                  onChange={(e) => {
-                    patchTask(task, {
-                      installer: e.target.value as Workflows.EnumInstaller,
-                    });
-                  }}
-                >
-                  {Object.values(Workflows.EnumInstaller).map((installer) => {
-                    return (
-                      <MenuItem
-                        selected={installer === task.installer}
-                        value={installer}
-                      >
-                        {installer}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </FormControl>
-              <FormHelperText>
-                Choose which installer to use to install the packages above
-              </FormHelperText>
-            </div>
-          </Sidebar>
-        )}
-        {tab === 'git' && (
-          <Sidebar
-            title={'Git Repositories'}
-            toggle={() => {
-              setTab('code');
-            }}
-          >
-            Test
-          </Sidebar>
-        )}
-        <div
-          className={`${styles['code-container']} ${
-            tab !== 'code'
-              ? styles['body-with-sidebar']
-              : styles['body-wo-sidebar']
-          }`}
-        >
-          <div className={`${styles['code-container-header']}`}>
-            <Stack direction="row" spacing={'8px'}>
-              <Chip
-                color="primary"
-                label={`runtime:${patchData.runtime}`}
-                size="small"
-                onClick={() => {
-                  setModal('runtime');
-                }}
-              />
-            </Stack>
-          </div>
-          <CodeMirror
-            value={(task.code !== undefined && decode(task.code)) || ''}
-            editable={!task.entrypoint}
-            extensions={[python()]}
-            theme={vscodeDark}
-            className={`${styles['code']} `}
-            onChange={(value) => {
-              patchTask(task, { code: encode(value) });
-            }}
-            style={{
-              fontSize: 12,
-              backgroundColor: '#1E1E1E',
-              height: '100%',
-              fontFamily:
-                'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
-            }}
-          />
-        </div>
-      </div>
-      <Dialog
-        open={modal === 'delete'}
-        onClose={() => {}}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">Delete task?</DialogTitle>
-        <DialogContent>
-          {dependentTasks.length > 0 && (
-            <Alert severity="warning" style={{ marginBottom: '8px' }}>
-              This task is required by {dependentTasks.length} other task
-              {dependentTasks.length > 1 ? 's' : ''} in this pipeline: [{' '}
-              {dependentTasks.map((d) => `${d.id} `)}].
-              <br />
-              Running this workflow after this task is deleted will result in an
-              immediate failure.
-            </Alert>
-          )}
-          <DialogContentText id="alert-dialog-description">
-            Deleting a task is an irrevocable action. Are you sure you want to
-            continue?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              setModal(undefined);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            color="error"
-            onClick={() => {
-              setModal(undefined);
-            }}
-            autoFocus
-          >
-            Delete
-          </Button>
-        </DialogActions>
-      </Dialog>
-      <Dialog
-        open={modal === 'runtime'}
-        onClose={() => {}}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">Update Runtime</DialogTitle>
-        <DialogContent>
-          <div className={styles['form']}>
-            <FormControl
-              fullWidth
-              margin="dense"
-              style={{ marginBottom: '-16px' }}
-            >
-              <InputLabel size="small" id="environment">
-                Runtime environment
-              </InputLabel>
-              <Select
-                size="small"
-                label="Runtime environment"
-                labelId="environment"
-                defaultValue={patchData.runtime}
-                onChange={(e) => {
-                  patchTask(task, {
-                    runtime: e.target.value as Workflows.EnumRuntimeEnvironment,
-                  });
-                }}
-              >
-                {Object.values(Workflows.EnumRuntimeEnvironment).map(
-                  (runtimeEnv) => {
-                    return (
-                      <MenuItem
-                        value={runtimeEnv}
-                        selected={runtimeEnv === task.runtime}
-                      >
-                        {runtimeEnv}
-                      </MenuItem>
-                    );
-                  }
-                )}
-              </Select>
-            </FormControl>
-            <FormHelperText>
-              The runtime envrionment in which the function code will be
-              executed
-            </FormHelperText>
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              setModal(undefined);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              handlePatch();
-              setModal(undefined);
-            }}
-            autoFocus
-          >
-            Update
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  );
-};
-
-export default FunctionTaskEditor;
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/index.ts b/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/index.ts
deleted file mode 100644
index 16592a408..000000000
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/FunctionTaskEditor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FunctionTaskEditor } from './FunctionTaskEditor';
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.module.scss
new file mode 100644
index 000000000..d0ae65f2c
--- /dev/null
+++ b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.module.scss
@@ -0,0 +1,7 @@
+.form {
+    width: 100%;
+    padding: 16px;
+    display: grid;
+    gap: 16px;
+  }
+  
\ No newline at end of file
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx
index c64323915..7da92ee90 100644
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx
+++ b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx
@@ -1,6 +1,12 @@
 import { usePatchTask } from 'app/Workflows/_hooks';
 import { Workflows } from '@tapis/tapis-typescript';
 import { Sidebar } from '../../../Sidebar';
+import { useEffect, useRef, useState } from 'react';
+import styles from "./GitTab.module.scss"
+import { FormControl, FormHelperText, InputLabel, Input, InputAdornment, Button, Select, MenuItem, Alert, AlertTitle, Box, Stepper, Step, StepLabel } from '@mui/material';
+import { Search } from '@mui/icons-material';
+import { listRepos, listBranches } from 'app/apis/Github';
+
 
 const GitTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
   const {
@@ -11,12 +17,178 @@ const GitTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
     isLoading,
     isError,
     isSuccess,
-    error,
+    // error,
     reset,
   } = usePatchTask<Workflows.FunctionTask>();
+
+  const [username, setUsername] = useState<string | undefined>(undefined)
+  const [repos, setRepos] = useState<Array<{[key: string | number]: any}>>([])
+  const [repo, setRepo] = useState<string | undefined>(undefined)
+  const [branches, setBranches] = useState<Array<{[key: string | number]: any}> | undefined>(undefined)
+  const [branch, setBranch] = useState<string | undefined>(undefined)
+  const [error, setError] = useState<Error | undefined>(undefined)
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (username) {
+      listRepos({username}, {
+        onSuccess: (response) => {setRepos(response.result!)},
+        onError: (response) => {setError(response.error), setUsername(undefined)}
+      })
+    }
+  }, [username])
+
+  useEffect(() => {
+    if (username && repo) {
+      listBranches({username, repo}, {
+        onSuccess: (response) => {setBranches(response.result!)},
+        onError: (response) => {setError(response.error), setBranches(undefined)}
+      })
+    }
+  }, [repo, branches])
+
   return (
     <Sidebar title={'Git Repositories'} toggle={toggle}>
-      Coming soon
+      {error && (
+        <Alert
+          severity="error"
+          style={{ marginTop: '8px' }}
+          onClose={() => {setError(undefined)}}
+        >
+          <AlertTitle>Error</AlertTitle>
+          {error.message}
+        </Alert>
+      )}
+      <div className={styles["form"]}>
+        <>
+          <FormControl variant="standard">
+            <InputLabel htmlFor="username">
+              Repository owner
+            </InputLabel>
+            <Input
+              id="username"
+              inputRef={searchRef}
+              startAdornment={
+                <InputAdornment position="start">
+                  <Search/>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+          <FormHelperText>
+            The owner of the git repository you want to clone
+          </FormHelperText>
+        </>
+        {
+          repos.length > 0 && (
+            <>
+              <FormControl variant="standard">
+                <InputLabel htmlFor="repo-search">
+                  Repository
+                </InputLabel>
+                <Select
+                  type="select"
+                  size="small"
+                  defaultValue=""
+                >
+                  <MenuItem disabled value="">
+                    -- Choose a repository --
+                  </MenuItem>
+                  {repos.map(
+                    (repo) => {
+                      return (
+                        <MenuItem
+                          value={repo.name}
+                          onClick={() => {setRepo(repo.name)}}
+                        >
+                          {repo.name}
+                        </MenuItem>
+                      );
+                    }
+                  )}
+                </Select>
+              </FormControl>
+              <FormHelperText>
+                The git repository to clone into the task's execution directory
+              </FormHelperText>
+            </>
+          )
+        }
+        {
+          repo && branches && (
+            <>
+              <FormControl variant="standard">
+                <InputLabel htmlFor="branch-search">
+                  Branch
+                </InputLabel>
+                <Select
+                  type="select"
+                  size="small"
+                  defaultValue=""
+                >
+                  <MenuItem disabled value="">
+                    -- Choose a branch --
+                  </MenuItem>
+                  {branches.map(
+                    (branch) => {
+                      return (
+                        <MenuItem
+                          value={branch.name}
+                          onClick={() => {setBranch(branch.name)}}
+                        >
+                          {branch.name}
+                        </MenuItem>
+                      );
+                    }
+                  )}
+                </Select>
+              </FormControl>
+              <FormHelperText>
+                The branch of the repoistory to clone
+              </FormHelperText>
+            </>
+          )
+        }
+        {
+          branch && (
+            <>
+              <FormControl variant="standard">
+                <InputLabel htmlFor="clone-directory">
+                  Clone directory
+                </InputLabel>
+                <Input
+                  id="clone-directory"
+                />
+              </FormControl>
+              <FormHelperText>
+                The repository will be cloned into this directory inside of the task's exection directory
+              </FormHelperText>
+            </>
+          )
+        }
+        <Button
+          onClick={() => {
+            if (searchRef.current) {
+              setUsername(searchRef.current.value)
+            }
+          }}
+        >
+          Search
+        </Button>
+      </div>
+      <div>
+        {
+          task.git_repositories!.map((repo) => {
+            return (
+              <div>
+                <p>{repo.url}</p>
+                <p>{repo.branch}</p>
+                <p>{repo.directory}</p>
+              </div>
+            )
+          })
+        }
+      </div>
     </Sidebar>
   );
 };
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss
index 544c93dd7..660aa0396 100644
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss
+++ b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss
@@ -32,8 +32,8 @@
 }
 
 .container {
-  width: 100%;
-  padding: 16px;
+  display: flex;
+  flex-direction: row;
 }
 
 .body-with-sidebar {
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.old.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.old.tsx
deleted file mode 100644
index 35c076362..000000000
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.old.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useCallback } from 'react';
-import { Workflows } from '@tapis/tapis-typescript';
-import styles from './TaskEditor.module.scss';
-import { Close, ArrowBack } from '@mui/icons-material';
-import { FunctionTaskEditor } from './FunctionTaskEditor';
-
-type TaskEditorProps = {
-  groupId: string;
-  pipelineId: string;
-  task: Workflows.Task;
-  tasks: Array<Workflows.Task>;
-  toggle?: () => void;
-};
-
-const TaskEditor: React.FC<TaskEditorProps> = ({
-  task,
-  tasks,
-  groupId,
-  pipelineId,
-  toggle,
-}) => {
-  const renderTaskEditor = useCallback(
-    (task: Workflows.Task) => {
-      switch (task.type) {
-        case Workflows.EnumTaskType.Function:
-          return (
-            <FunctionTaskEditor
-              groupId={groupId}
-              pipelineId={pipelineId}
-              task={task}
-              tasks={tasks}
-            />
-          );
-        case Workflows.EnumTaskType.Template:
-          return `${task.type} task editor unsupported`;
-        case Workflows.EnumTaskType.Request:
-          return `${task.type} task editor unsupported`;
-        case Workflows.EnumTaskType.ImageBuild:
-          return `${task.type} task editor unsupported`;
-        case Workflows.EnumTaskType.Application:
-          return `${task.type} task editor unsupported`;
-        case Workflows.EnumTaskType.TapisJob:
-          return `${task.type} task editor unsupported`;
-        case Workflows.EnumTaskType.TapisActor:
-          return `${task.type} task editor unsupported`;
-      }
-    },
-    [task]
-  );
-
-  return (
-    <div>
-      {toggle && (
-        <div className={styles['menu']}>
-          <ArrowBack onClick={toggle} className={styles['back']} />
-          <h2>Task Editor</h2>
-          <Close onClick={toggle} className={styles['close']} />
-        </div>
-      )}
-      <div className={styles['container']}>{renderTaskEditor(task)}</div>
-    </div>
-  );
-};
-
-export default TaskEditor;
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx
index ca545e897..e2a1e9c92 100644
--- a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx
+++ b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Workflows } from '@tapis/tapis-typescript';
-import styles from './FunctionTaskEditor/FunctionTaskEditor.module.scss';
+import styles from './TaskEditor.module.scss';
 import { Delete, Update } from '@mui/icons-material';
 import { LoadingButton as Button, TabContext, TabList } from '@mui/lab';
 import {
diff --git a/src/app/Workflows/_components/Menu/Menu.tsx b/src/app/Workflows/_components/Menu/Menu.tsx
index 3fdd83847..d61647c7e 100644
--- a/src/app/Workflows/_components/Menu/Menu.tsx
+++ b/src/app/Workflows/_components/Menu/Menu.tsx
@@ -1,49 +1,72 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { useHistory } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
-import { Button } from '@mui/material';
+import {
+  ListItemText,
+  Drawer,
+  Box,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon
+} from '@mui/material';
+import { Menu as MenuIcon, Groups, SpaceDashboard, AccountTree, Backup } from '@mui/icons-material';
 
 const Menu: React.FC = () => {
-  const history = useHistory();
+  const history = useHistory()
+  const [open, setOpen] = useState(false)
+  const toggle = () => {setOpen(!open)}
+  
   return (
-    <Stack spacing={2} direction="row">
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows');
-        }}
-      >
-        Dashboard
-      </Button>
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows/groups');
-        }}
-      >
-        Groups
-      </Button>
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows/pipelines');
-        }}
-      >
-        Pipelines
-      </Button>
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={() => {
-          history.push('/workflows/archives');
-        }}
-      >
-        Archives
-      </Button>
-    </Stack>
+    <div>
+      <MenuIcon onClick={() => {setOpen(!open)}} style={{cursor: "pointer"}}/>
+      <Drawer open={open} onClose={toggle}>
+        <Box sx={{ width: 250 }} role="presentation" onClick={toggle}>
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton onClick={() => {history.push("/workflows")}}>
+                <ListItemIcon>
+                  <SpaceDashboard />
+                </ListItemIcon>
+                <ListItemText
+                  primary={'Dashboard'}
+                />
+              </ListItemButton>
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemButton onClick={() => {history.push("/workflows/groups")}}>
+                <ListItemIcon>
+                  <Groups />
+                </ListItemIcon>
+                <ListItemText
+                  primary={'Groups'}
+                />
+              </ListItemButton>
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemButton onClick={() => {history.push("/workflows/pipelines")}}>
+                <ListItemIcon>
+                  <AccountTree />
+                </ListItemIcon>
+                <ListItemText
+                  primary={'Pipelines'}
+                />
+              </ListItemButton>
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemButton onClick={() => {history.push("/workflows/archives")}}>
+                <ListItemIcon>
+                  <Backup />
+                </ListItemIcon>
+                <ListItemText
+                  primary={'Archives'}
+                />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </Box>
+      </Drawer>
+    </div>
   );
 };
 
diff --git a/src/app/apis/Github/index.ts b/src/app/apis/Github/index.ts
new file mode 100644
index 000000000..c9bb7203b
--- /dev/null
+++ b/src/app/apis/Github/index.ts
@@ -0,0 +1,2 @@
+export { default as listRepos } from "./listRepos"
+export { default as listBranches } from "./listBranches"
\ No newline at end of file
diff --git a/src/app/apis/Github/listBranches.ts b/src/app/apis/Github/listBranches.ts
new file mode 100644
index 000000000..7bb5d51a6
--- /dev/null
+++ b/src/app/apis/Github/listBranches.ts
@@ -0,0 +1,11 @@
+import { type API } from "app/apis"
+import { decoder, request } from "../utils"
+
+type ListBranchesResponse = Array<{[key: string | number]: any}>
+type ListBranchesRequest = {username: string, repo: string}
+
+const listBranches: API<ListBranchesRequest, ListBranchesResponse> = ({username, repo}, callbacks) => {
+  decoder<ListBranchesResponse>(() => request(`https://api.github.com/repos/${username}/${repo}/branches`), callbacks)
+}
+
+export default listBranches
\ No newline at end of file
diff --git a/src/app/apis/Github/listRepos.ts b/src/app/apis/Github/listRepos.ts
new file mode 100644
index 000000000..36d71eaf2
--- /dev/null
+++ b/src/app/apis/Github/listRepos.ts
@@ -0,0 +1,11 @@
+import { type API } from "app/apis"
+import { decoder, request } from "../utils"
+
+type ListReposResponse = Array<{[key: string | number]: any}>
+type ListReposRequest = {username: string}
+
+const listRepos: API<ListReposRequest, ListReposResponse> = ({username}, callbacks) => {
+  decoder<ListReposResponse>(() => request(`https://api.github.com/users/${username}/repos`), callbacks)
+}
+
+export default listRepos
\ No newline at end of file
diff --git a/src/app/apis/index.ts b/src/app/apis/index.ts
new file mode 100644
index 000000000..3508d61a8
--- /dev/null
+++ b/src/app/apis/index.ts
@@ -0,0 +1,9 @@
+export * as Github from "./Github"
+
+export type APIResponse<Resp> = { result: Resp | undefined, error: Error | undefined}
+
+export type Callbacks<T> = {
+  onSuccess?: (response: APIResponse<T>) => void
+  onError?: (response: APIResponse<T>) => void
+} | undefined
+export type API<Req, Resp> = (params: Req, callbacks?: Callbacks<Resp>) => void
\ No newline at end of file
diff --git a/src/app/apis/utils/decoder.ts b/src/app/apis/utils/decoder.ts
new file mode 100644
index 000000000..9c552e837
--- /dev/null
+++ b/src/app/apis/utils/decoder.ts
@@ -0,0 +1,20 @@
+import { request } from "app/apis/utils"
+import { type Callbacks } from "app/apis"
+
+export const decoder = async <T extends any>(
+  fn: () => ReturnType<typeof request>,
+  callbacks: Callbacks<T>
+) => {
+    fn()
+      .then(res => res.json())
+      .then((res: T) => {
+        const success = res.status === undefined ? true : false
+        if (success && callbacks?.onSuccess) {
+          callbacks.onSuccess({result: res, error: undefined})
+        }
+
+        if (!success && callbacks?.onError) {
+          callbacks.onError({result: undefined, error: new Error(res.message)})
+        }
+      })
+}
\ No newline at end of file
diff --git a/src/app/apis/utils/index.ts b/src/app/apis/utils/index.ts
new file mode 100644
index 000000000..1a7911b86
--- /dev/null
+++ b/src/app/apis/utils/index.ts
@@ -0,0 +1,2 @@
+export { decoder } from "./decoder"
+export { request } from "./request"
\ No newline at end of file
diff --git a/src/app/apis/utils/request.ts b/src/app/apis/utils/request.ts
new file mode 100644
index 000000000..e5e8abe44
--- /dev/null
+++ b/src/app/apis/utils/request.ts
@@ -0,0 +1,3 @@
+export const request = (requestUrl: string) => {
+    return fetch(requestUrl)
+}
\ No newline at end of file