diff --git a/components/categorical-variable-options.tsx b/components/categorical-variable-options.tsx
index 10df38ab..af894aa5 100644
--- a/components/categorical-variable-options.tsx
+++ b/components/categorical-variable-options.tsx
@@ -1,4 +1,5 @@
-import { Button, TextField } from '@material-ui/core';
+import { Button, Grid, IconButton, TextField } from '@material-ui/core';
+import AddIcon from "@material-ui/icons/Add";
 import { ChangeEvent, useState } from 'react';
 
 type CategoricalVariableOptionProps = {
@@ -18,17 +19,22 @@ export default function CategoricalVariableOptions(props: CategoricalVariableOpt
   }
 
   return (
-    <>
-      <TextField
-        name="option"
-        label=""
-        value={option}
-        onChange={(e: ChangeEvent) => updateOption((e.target as HTMLInputElement).value)}
-      />
-      <br />
-      <Button variant="outlined" onClick={() => {onOptionAdded()}} size="small">Add option</Button>
-      <br />
-    </>
+    <Grid container spacing={1}>
+      <Grid item xs={8}>
+        <TextField
+          fullWidth
+          name="option"
+          label=""
+          value={option}
+          onChange={(e: ChangeEvent) => updateOption((e.target as HTMLInputElement).value)}
+        />
+      </Grid>
+      <Grid item xs={4}>
+        <IconButton size="small" onClick={() => onOptionAdded()}>
+          <AddIcon />
+        </IconButton>
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/components/categorical-variable.tsx b/components/categorical-variable.tsx
index dcf0cb78..d438a54c 100644
--- a/components/categorical-variable.tsx
+++ b/components/categorical-variable.tsx
@@ -32,6 +32,7 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
       <>
         <form onSubmit={handleSubmit(onSubmit)}>
           <TextField 
+            fullWidth
             name="name" 
             label="Name"
             inputRef={register}
@@ -39,6 +40,7 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
             <br />
             <br />
           <TextField
+            fullWidth
             name="description"
             label="Description"
             inputRef={register}
@@ -50,7 +52,7 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
           {options.map((option, index) => (
             <div key={index}>
               <div className={classes.option}>
-                <Typography variant="body2">{option}</Typography>
+                <Typography variant="body1">{option}</Typography>
                 <IconButton onClick={() => deleteOption(index)} size="small" aria-label="delete" color="primary">
                   <DeleteIcon /> 
                 </IconButton>
diff --git a/components/data-points.tsx b/components/data-points.tsx
index 82fa89a3..1d6f2114 100644
--- a/components/data-points.tsx
+++ b/components/data-points.tsx
@@ -77,7 +77,7 @@ export default function DataPoints(props: DataPointProps) {
                 <TableRow>
                   {variableNames.map((name, index) => 
                     <TableCell key={index}>
-                      <TextField onChange={(e: ChangeEvent) => onNewPointChange(name, index, (e.target as HTMLInputElement).value)} />
+                      <TextField fullWidth onChange={(e: ChangeEvent) => onNewPointChange(name, index, (e.target as HTMLInputElement).value)} />
                     </TableCell>
                   )}
                   </TableRow>
diff --git a/components/layout.tsx b/components/layout.tsx
index b5df1dd1..e9a8e408 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,16 +1,33 @@
+import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'
 import Link from 'next/link'
+import useStyles from '../styles/layout.style'
+import Image from 'next/image'
+
+export default function Layout ( {children} ) {
+  const classes = useStyles()
 
-export default function Layout ( {children}) {
   return (
-    <div>
-      <Link href="/">
-        <a>Home</a>
-      </Link>
-      <span> | </span>
-      <Link href="/experiment/123">
-        <a>Experiment</a>
-      </Link>
-      {children}
-    </div>
+    <>
+      <AppBar>
+        <Toolbar variant="dense">
+          <div className={classes.logo}>
+            <Image src="/logo.png" alt="logo" width="32" height="32" />
+          </div>
+          <Typography variant="h6">
+            BrownieBee
+          </Typography>
+          <div className={classes.links}>
+            <Link href="/">
+              <Button className={classes.link}>
+                <a>Home</a>
+              </Button>
+            </Link>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <div className={classes.mainContent}>
+        {children}
+      </div>
+  </>
   )
 }
\ No newline at end of file
diff --git a/components/model-editor.tsx b/components/model-editor.tsx
index 17240edc..bfaac691 100644
--- a/components/model-editor.tsx
+++ b/components/model-editor.tsx
@@ -1,26 +1,22 @@
-import { Card, CardContent, Grid, Radio, TextField, Typography } from '@material-ui/core'
-import { ChangeEvent, useState } from 'react';
-import { CategoricalVariableType, Info, ValueVariableType } from '../types/common';
-import CategoricalVariable from './categorical-variable';
-import ValueVariable from './value-variable';
+import { Card, CardContent, TextField } from '@material-ui/core'
+import { ChangeEvent } from 'react';
+import { Info } from '../types/common';
 
 type ModelEditorProps = {
   info: Info
   updateName: (name: string) => void
   updateDescription: (description: string) => void
-  addValueVariable: (valueVariable: ValueVariableType) => void
-  addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
 }
 
 export default function ModelEditor(props: ModelEditorProps) {
   const { info } = props
-  const [radioIndex, setRadioIndex] = useState(0)
 
   return (
     <Card>
       <CardContent>
         <form>
           <TextField 
+            fullWidth
             name="name" 
             label="Name" 
             value={info.name}
@@ -30,6 +26,7 @@ export default function ModelEditor(props: ModelEditorProps) {
           <br/>
           <br/>
           <TextField
+            fullWidth
             name="info.description"
             label="Description"
             value={info.description}
@@ -39,39 +36,6 @@ export default function ModelEditor(props: ModelEditorProps) {
           <br />
           <br />
         </form>
-        <Card>
-          <CardContent>
-            <Typography variant="h6" gutterBottom>
-              Add new variable
-            </Typography>
-            <Grid container spacing={0}>
-              <Grid item xs={3}>
-                <Radio
-                  checked={radioIndex === 0}
-                  onChange={() => {setRadioIndex(0)}}
-                />
-                <Typography>Value</Typography>
-              </Grid>
-              <Grid item xs={9}>
-                <Radio
-                  checked={radioIndex === 1}
-                  onChange={() => {setRadioIndex(1)}}
-                />
-                <Typography>Categorical</Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <br/>
-                <br/>
-                {radioIndex === 0 &&
-                  <ValueVariable onAdded={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)} />
-                }
-                {radioIndex === 1 &&
-                  <CategoricalVariable onAdded={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)} />
-                }
-              </Grid>
-            </Grid>
-          </CardContent>
-        </Card>
       </CardContent>
     </Card>
   )
diff --git a/components/optimizer-model.tsx b/components/optimizer-model.tsx
index ed6b2ea2..3925f58e 100644
--- a/components/optimizer-model.tsx
+++ b/components/optimizer-model.tsx
@@ -1,17 +1,20 @@
-import { Button, Card, CardContent, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@material-ui/core'
+import { Button, Card, CardContent, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@material-ui/core'
 import { CategoricalVariableType, ExperimentType, ValueVariableType } from '../types/common'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
+import VariableEditor from './variable-editor'
 
 type OptimizerModelProps = {
   experiment: ExperimentType
   onDeleteValueVariable: (valueVariable: ValueVariableType) => void
   onDeleteCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
+  addValueVariable: (valueVariable: ValueVariableType) => void
+  addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
 }
 
 export default function OptimizerModel(props: OptimizerModelProps) {
-
   const { experiment: { valueVariables, categoricalVariables} } = props
+  const [isAddOpen, setAddOpen] = useState(false)
 
   function renderCategoricalVariableOptions(options: string[]): ReactNode[] {
     return options.map((option, optionIndex) => {
@@ -51,9 +54,9 @@ export default function OptimizerModel(props: OptimizerModelProps) {
                   <TableCell align="right">{valueVar.minVal}</TableCell>
                   <TableCell align="right">{valueVar.maxVal}</TableCell>
                   <TableCell align="right">
-                    <Button size="small" onClick={() => {props.onDeleteValueVariable(valueVar)}}>
-                      <DeleteIcon color="primary" fontSize="small"/>Delete
-                    </Button>
+                    <IconButton size="small" onClick={() => {props.onDeleteValueVariable(valueVar)}}>
+                      <DeleteIcon color="primary" fontSize="small"/>
+                    </IconButton>
                   </TableCell>
                 </TableRow>
               ))}
@@ -83,9 +86,9 @@ export default function OptimizerModel(props: OptimizerModelProps) {
                       {renderCategoricalVariableOptions(catVar.options)}
                     </TableCell>
                     <TableCell align="right">
-                      <Button size="small" onClick={() => {props.onDeleteCategoricalVariable(catVar)}}>
-                        <DeleteIcon color="primary" fontSize="small"/>Delete
-                      </Button>
+                      <IconButton size="small" onClick={() => {props.onDeleteCategoricalVariable(catVar)}}>
+                        <DeleteIcon color="primary" fontSize="small"/>
+                      </IconButton>
                     </TableCell>
                   </TableRow>
                 ))}
@@ -93,6 +96,17 @@ export default function OptimizerModel(props: OptimizerModelProps) {
             </Table>
           </>
         }
+        <br/>
+        <br/>
+        {!isAddOpen &&
+          <Button variant="outlined" size="small" onClick={() => setAddOpen(true)}>Add variable</Button>
+        }
+        {isAddOpen &&
+          <VariableEditor 
+            addCategoricalVariable={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)}
+            addValueVariable={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)}
+            close={() => setAddOpen(false)} />
+        }
       </CardContent>
     </Card>
   )
diff --git a/components/value-variable.tsx b/components/value-variable.tsx
index dce979df..675aa16e 100644
--- a/components/value-variable.tsx
+++ b/components/value-variable.tsx
@@ -18,6 +18,7 @@ export default function ValueVariable(props: ValueVariableProps) {
       <>
         <form onSubmit={handleSubmit(onSubmit)}>
           <TextField
+            fullWidth
             name="name" 
             label="Name" 
             inputRef={register}
@@ -25,6 +26,7 @@ export default function ValueVariable(props: ValueVariableProps) {
             <br />
             <br />
           <TextField
+            fullWidth
             name="description"
             label="Description"
             inputRef={register}
@@ -32,6 +34,7 @@ export default function ValueVariable(props: ValueVariableProps) {
           <br />
           <br />
           <TextField
+            fullWidth
             name="minVal"
             label="minVal"
             inputRef={register}
@@ -39,6 +42,7 @@ export default function ValueVariable(props: ValueVariableProps) {
           <br />
           <br />
           <TextField
+            fullWidth
             name="maxVal"
             label="maxVal"
             inputRef={register}
diff --git a/components/variable-editor.tsx b/components/variable-editor.tsx
new file mode 100644
index 00000000..4c37853d
--- /dev/null
+++ b/components/variable-editor.tsx
@@ -0,0 +1,68 @@
+import CategoricalVariable from './categorical-variable';
+import ValueVariable from './value-variable';
+import { Card, CardContent, Grid, IconButton, Radio, Typography } from "@material-ui/core"
+import CloseIcon from "@material-ui/icons/Close";
+import { useState } from "react"
+import { CategoricalVariableType, ValueVariableType } from '../types/common';
+import useStyles from '../styles/variable-editor.style';
+
+type VariableEditorProps = {
+  addValueVariable: (valueVariable: ValueVariableType) => void
+  addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
+  close: () => void
+}
+
+export default function VariableEditor(props: VariableEditorProps) {
+  const [radioIndex, setRadioIndex] = useState(0)
+  const classes = useStyles()
+
+  return (
+    <Grid container spacing={0}>
+      <Grid item xs={6}>
+        <Card className={classes.main}>
+          <CardContent>
+            <Grid container spacing={0}>
+
+              <Grid item xs={11}>
+                <Typography variant="h6" gutterBottom>
+                  Add variable
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1}>
+                <IconButton size="small" onClick={() => props.close()}>
+                  <CloseIcon/>
+                </IconButton>
+              </Grid>
+
+              <Grid item xs={3}>
+                <Radio
+                  checked={radioIndex === 0}
+                  onChange={() => {setRadioIndex(0)}}
+                />
+                <Typography>Value</Typography>
+              </Grid>
+              <Grid item xs={9}>
+                <Radio
+                  checked={radioIndex === 1}
+                  onChange={() => {setRadioIndex(1)}}
+                />
+                <Typography>Categorical</Typography>
+              </Grid>
+              <Grid item xs={12}>
+                <br/>
+                <br/>
+                {radioIndex === 0 &&
+                  <ValueVariable onAdded={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)} />
+                }
+                {radioIndex === 1 &&
+                  <CategoricalVariable onAdded={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)} />
+                }
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  )
+}
\ No newline at end of file
diff --git a/pages/experiment/[experimentid].tsx b/pages/experiment/[experimentid].tsx
index 1c1d9a82..5cc6113b 100644
--- a/pages/experiment/[experimentid].tsx
+++ b/pages/experiment/[experimentid].tsx
@@ -117,7 +117,8 @@ export default function Experiment() {
       <Card className={[classes.experimentContainer, isDirty ? classes.experimentContainerDirty : ''].join(' ')}>
         <CardContent>
           <Grid container spacing={3}>
-            <Grid item xs={12}>
+            
+            <Grid item xs={10}>
               <Typography variant="body2">
                 {state.experiment.id}
               </Typography>
@@ -126,19 +127,41 @@ export default function Experiment() {
                 {state.experiment.info.name} {isDirty && '(unsaved)'}
               </Typography>
             </Grid>
+            
+            <Grid item xs={2} className={classes.actionContainer}>
+              <Button variant="contained" className={isDirty ? classes.saveButtonDirty : ''} onClick={onSave} color="primary">Save</Button>
+              <Button variant="contained" className={classes.runButton} color="primary" onClick={onRun}>Run</Button>
+            </Grid>
+
             <Grid item xs={3}>
               <ModelEditor 
                 info={state.experiment.info}
                 updateName={(name: string) => updateName(name)}
-                updateDescription={(description: string) => updateDescription(description)}
-                addValueVariable={(valueVariable: ValueVariableType) => addValueVariable(valueVariable)}
-                addCategoricalVariable={(categoricalVariable: CategoricalVariableType) => addCategoricalVariable(categoricalVariable)}/>
+                updateDescription={(description: string) => updateDescription(description)} />
+              <br/>
+              <Card>
+                <CardContent>
+                  <Typography variant="h6">
+                    Next experiment
+                  </Typography>
+                  <Typography variant="body2">
+                    {state.experiment.results.next && state.experiment.results.next.join(',')}
+                  </Typography>
+                </CardContent>
+              </Card>
+              <br/>
+              <OptimizerConfigurator 
+                config={state.experiment.optimizerConfig} 
+                onConfigUpdated={(config: OptimizerConfig) => updateOptimizerConfiguration(config)}/>
             </Grid>
-            <Grid item xs={6}>
+
+            <Grid item xs={8} lg={7}>
               <OptimizerModel 
                 experiment={state.experiment}
                 onDeleteValueVariable={(valueVariable: ValueVariableType) => {deleteValueVariable(valueVariable)}} 
-                onDeleteCategoricalVariable={(categoricalVariable: CategoricalVariableType) => {deleteCategoricalVariable(categoricalVariable)}}/>
+                onDeleteCategoricalVariable={(categoricalVariable: CategoricalVariableType) => {deleteCategoricalVariable(categoricalVariable)}}
+                addValueVariable={(valueVariable: ValueVariableType) => addValueVariable(valueVariable)}
+                addCategoricalVariable={(categoricalVariable: CategoricalVariableType) => addCategoricalVariable(categoricalVariable)}/>
               <br/>
               <DataPoints 
                 experiment={state.experiment}
@@ -157,34 +180,18 @@ export default function Experiment() {
                 </Card>
               }
             </Grid>
-            <Grid item xs={3}>
-              <OptimizerConfigurator 
-                config={state.experiment.optimizerConfig} 
-                onConfigUpdated={(config: OptimizerConfig) => updateOptimizerConfiguration(config)}/>
-              <br/>
-              <Card>
-                <CardContent>
-                  <Typography variant="body2">
-                    Next experiment: {state.experiment.results.next && state.experiment.results.next.join(',')}
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
+            <Grid item xs={2}></Grid>
           </Grid>
           <br/>
-          <br/>
-          <Grid container spacing={3}>
-            <Grid item xs={1}>
-              <Button variant="contained" className={isDirty ? classes.saveButtonDirty : ''} onClick={onSave} color="secondary">Save</Button>
-            </Grid>
-            <Grid item xs={1}>
-              <Button variant="contained" color="secondary" onClick={onRun}>Run</Button>
-            </Grid>
-          </Grid>        
+          <br/>        
         </CardContent>
       </Card>
 
-      <Snackbar open={isSnackbarOpen} autoHideDuration={3000} onClose={handleCloseSnackbar}>
+      <Snackbar 
+        anchorOrigin={{vertical:'top', horizontal: 'center'}} 
+        open={isSnackbarOpen} 
+        autoHideDuration={3000} 
+        onClose={handleCloseSnackbar}>
         <Alert onClose={handleCloseSnackbar} severity="success">Experiment saved</Alert>
       </Snackbar>
 
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 00000000..bc6b93b5
Binary files /dev/null and b/public/logo.png differ
diff --git a/styles/experiment.style.tsx b/styles/experiment.style.tsx
index 02e121a3..e3320c4b 100644
--- a/styles/experiment.style.tsx
+++ b/styles/experiment.style.tsx
@@ -11,6 +11,12 @@ export const useStyles = makeStyles(theme => ({
   experimentContainerDirty: {
     border: '2px solid ' + theme.palette.warning.main,
   },
+  actionContainer: {
+    textAlign: "right",
+  },
+  runButton: {
+    marginLeft: theme.spacing(2),
+  },
   saveButtonDirty: {
     animationName: '$saveButton',
     animationDuration: '3s',
@@ -18,13 +24,13 @@ export const useStyles = makeStyles(theme => ({
   },
   '@keyframes saveButton': {
     '0%': {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette.primary.main,
     },
     '50%': {
       backgroundColor: theme.palette.warning.main,
     },
     '100%': {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette.primary.main,
     }
   }
 }));
diff --git a/styles/layout.style.tsx b/styles/layout.style.tsx
new file mode 100644
index 00000000..642c4188
--- /dev/null
+++ b/styles/layout.style.tsx
@@ -0,0 +1,18 @@
+import { makeStyles } from "@material-ui/core";
+
+export const useStyles = makeStyles(theme => ({
+  links: {
+    marginLeft: theme.spacing(5),
+  },
+  link: {
+    color: "white",
+  },
+  mainContent: {
+    marginTop: 56,
+  },
+  logo: {
+    marginRight: theme.spacing(1),
+  }
+}));
+
+export default useStyles
\ No newline at end of file
diff --git a/styles/variable-editor.style.tsx b/styles/variable-editor.style.tsx
new file mode 100644
index 00000000..cb67fc4a
--- /dev/null
+++ b/styles/variable-editor.style.tsx
@@ -0,0 +1,9 @@
+import { makeStyles } from "@material-ui/core";
+
+export const useStyles = makeStyles(theme => ({
+  main: {
+    background: theme.palette.grey[50],
+  }
+}));
+
+export default useStyles
\ No newline at end of file