diff --git a/main.py b/main.py
index 51d8381..a277960 100644
--- a/main.py
+++ b/main.py
@@ -72,7 +72,7 @@ response = openai.ChatCompletion.create(
                 + test_description
                 + "Finally write the Dockerfile that defines the environment with all necessary dependencies which the executor uses. "
                   "It is important to make sure that all libs are installed that are required by the python packages. "
-                  "The base image of the Dockerfile is jinaai/jina:3.14.2-dev18-py310-standard. "
+                  "The base image of the Dockerfile is FROM jinaai/jina:3.14.2-dev18-py310-standard. "
                   "The Dockerfile runs the test during the build process (wrap the code in the string $$$start_dockerfile$$$ ... $$$end_dockerfile$$$)"
         },
 
@@ -96,7 +96,7 @@ def clean_content(content):
 
 executor_name = find_between(plain_text, f'$$$start_executor_name$$$', f'$$$end_executor_name$$$').strip()
 
-for tag, file_name in [['executor', f'{executor_name}py'], ['requirements', 'requirements.txt'], ['test_executor', 'test_executor.py'], ['ockerfile', 'Dockerfile']]:
+for tag, file_name in [['executor', f'{executor_name}.py'], ['requirements', 'requirements.txt'], ['test_executor', 'test_OCRDetectorExecutor.py'], ['dockerfile', 'Dockerfile']]:
     content = find_between(plain_text, f'$$$start_{tag}$$$', f'$$$end_{tag}$$$')
     clean = clean_content(content)
     folder = 'executor'
@@ -108,7 +108,7 @@ for tag, file_name in [['executor', f'{executor_name}py'], ['requirements', 'req
 config_content = f'''
 jtype: {executor_name}
 py_modules:
-  - executor.py
+  - {executor_name}.py
 metas:
   name: {executor_name}
 '''
diff --git a/microchain-frontend/src/Graph.js b/microchain-frontend/src/Graph.js
new file mode 100644
index 0000000..40dae55
--- /dev/null
+++ b/microchain-frontend/src/Graph.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import Microservice from './Microservice';
+import MicroserviceModal from './MicroserviceModal';
+import { Button, Grid } from '@material-ui/core';
+
+const Graph = ({ onExport }) => {
+  const [microservices, setMicroservices] = useState([]);
+  const [selectedMicroservice, setSelectedMicroservice] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const handleSave = (microservice) => {
+    if (selectedMicroservice) {
+      setMicroservices(
+        microservices.map((ms) =>
+          ms.id === selectedMicroservice.id ? microservice : ms
+        )
+      );
+    } else {
+      setMicroservices([...microservices, { ...microservice, id: Date.now() }]);
+    }
+    setSelectedMicroservice(null);
+  };
+
+  const handleEdit = (microservice) => {
+    setSelectedMicroservice(microservice);
+    setShowModal(true);
+  };
+
+  return (
+    <div>
+      <Button onClick={() => setShowModal(true)}>Add Microservice</Button>
+      <Button onClick={() => onExport(microservices)}>Export Graph</Button>
+      <Grid container spacing={2}>
+        {microservices.map((microservice) => (
+          <Grid key={microservice.id} item xs={12} sm={6} md={4}>
+            <div onClick={() => handleEdit(microservice)}>
+              <Microservice microservice={microservice} />
+            </div>
+          </Grid>
+        ))}
+      </Grid>
+      <MicroserviceModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        onSave={handleSave}
+        microservice={selectedMicroservice}
+      />
+    </div>
+  );
+};
+
+export default Graph;
diff --git a/microchain-frontend/src/Microservice.js b/microchain-frontend/src/Microservice.js
new file mode 100644
index 0000000..29d5dd3
--- /dev/null
+++ b/microchain-frontend/src/Microservice.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card, CardContent, Typography } from '@material-ui/core';
+
+const Microservice = ({ microservice }) => {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6">{microservice.name}</Typography>
+        <Typography>
+          Input: {microservice.input} | Output: {microservice.output}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Microservice;
\ No newline at end of file
diff --git a/microchain-frontend/src/MicroserviceModal.js b/microchain-frontend/src/MicroserviceModal.js
new file mode 100644
index 0000000..10ba255
--- /dev/null
+++ b/microchain-frontend/src/MicroserviceModal.js
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem
+} from '@material-ui/core';
+
+const modalities = ['image', 'audio', 'text', 'video', '3d'];
+
+const MicroserviceModal = ({ open, onClose, onSave, microservice }) => {
+  const [name, setName] = useState(microservice ? microservice.name : '');
+  const [input, setInput] = useState(microservice ? microservice.input : '');
+  const [output, setOutput] = useState(microservice ? microservice.output : '');
+
+  const handleSubmit = () => {
+    onSave({ name, input, output });
+    setName('');
+    setInput('');
+    setOutput('');
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{microservice ? 'Edit' : 'Add'} Microservice</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="Name"
+          fullWidth
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <FormControl fullWidth margin="dense">
+          <InputLabel id="input-label">Input</InputLabel>
+          <Select
+            labelId="input-label"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          >
+            {modalities.map((modality) => (
+              <MenuItem key={modality} value={modality}>
+                {modality}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl fullWidth margin="dense">
+          <InputLabel id="output-label">Output</InputLabel>
+          <Select
+            labelId="output-label"
+            value={output}
+            onChange={(e) => setOutput(e.target.value)}
+          >
+            {modalities.map((modality) => (
+              <MenuItem key={modality} value={modality}>
+                {modality}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} color="primary">
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default MicroserviceModal;