diff --git a/src/req/renderer/styles/colours.ts b/src/req/renderer/styles/colours.ts
index 6b83a2808..d93fc2cea 100644
--- a/src/req/renderer/styles/colours.ts
+++ b/src/req/renderer/styles/colours.ts
@@ -10,3 +10,8 @@ export const borderColour = color("#000000");
 export const white = style({
     color: "white"
 });
+
+export const blue = style({
+    color : "blue"
+});
+
diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
index 10e0794bb..63f79bc5e 100644
--- a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
+++ b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -13,7 +13,7 @@ import { SaveKeyEvent } from '../../../ipcEvents';
 import { CircularGenome } from './containers/circularGenome/circularGenome';
 import { DonutLargeOutlined } from '../../components/icons/donutLargeOutlined';
 import { WavesOutlined } from '../../components/icons/wavesOutlined';
-import { FigureSelectDrawer } from './containers/drawers/figureSelectDrawer';
+import { FigureSelectOverlay } from './containers/overlays/figureSelectOverlay';
 
 
 export interface CircularGenomeBuilderViewState {
@@ -83,7 +83,7 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
                         </IconButton>
                     </Toolbar>
                 </AppBar>
-                <FigureSelectDrawer builder={this} />
+                <FigureSelectOverlay builder={this} />
                 {
                     this.props.figures.map((x) => {
                         if (x.uuid == this.state.selectedFigure) {
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/drawers/figureSelectDrawer.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/figureSelectOverlay.tsx
similarity index 91%
rename from src/req/renderer/views/circularGenomeBuilderView/containers/drawers/figureSelectDrawer.tsx
rename to src/req/renderer/views/circularGenomeBuilderView/containers/overlays/figureSelectOverlay.tsx
index 99728d985..9130b6de6 100644
--- a/src/req/renderer/views/circularGenomeBuilderView/containers/drawers/figureSelectDrawer.tsx
+++ b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/figureSelectOverlay.tsx
@@ -1,27 +1,29 @@
 import * as React from "react";
 
 import { CircularGenomeBuilderView } from '../../circularGenomeBuilderView';
-import { Drawer } from '../../../../components/drawer';
 import { GridWrapper } from '../../../../containers/gridWrapper';
 import { Grid } from '../../../../components/grid';
 import { Typography } from '../../../../components/typography';
 import { IconButton } from '../../../../components/iconButton';
 import { AddBox } from '../../../../components/icons/addBox';
+import { Overlay } from './overlay';
 
-export interface FigureSelectDrawerProps {
+export interface FigureSelectOverlayProps {
     builder: CircularGenomeBuilderView;
 }
 
-export function FigureSelectDrawer(props: FigureSelectDrawerProps): JSX.Element {
+export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Element {
     return (
-        <Drawer
-            anchor="left"
-            open={props.builder.state.figureSelectDrawerOpen}
-            onClose={() => {
+        <Overlay
+        kind="drawerLeft"
+        passThrough={{
+            open : props.builder.state.figureSelectDrawerOpen,
+            onClose : () => {
                 props.builder.setState({
                     figureSelectDrawerOpen: false
                 });
-            }}
+            }
+        }}
         >
             <div>
                 <GridWrapper>
@@ -83,6 +85,6 @@ export function FigureSelectDrawer(props: FigureSelectDrawerProps): JSX.Element
                     })
                 }
             </div>
-        </Drawer>
+        </Overlay>
     );
 }
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx
new file mode 100644
index 000000000..51dcb48f6
--- /dev/null
+++ b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx
@@ -0,0 +1,144 @@
+import * as React from "react";
+
+import { Drawer } from '../../../../components/drawer';
+import { Grid } from '../../../../components/grid';
+import { BorderLeftOutlined } from '../../../../components/icons/borderLeftOutlined';
+import { IconButton } from '../../../../components/iconButton';
+import { blue } from '../../../../styles/colours';
+import { BorderTopOutlined } from '../../../../components/icons/borderTopOutlined';
+import { BorderBottomOutlined } from '../../../../components/icons/borderBottomOutlined';
+import { BorderRightOutlined } from '../../../../components/icons/borderRightOutlined';
+import { BorderHorizontalOutlined } from '../../../../components/icons/borderHorizontalOutlined';
+import { Dialog } from '../../../../components/dialog';
+
+export interface OverlayProps {
+    kind: "drawerLeft" | "drawerRight" | "drawerBottom" | "drawerTop" | "modal";
+    passThrough: {
+        open: boolean;
+        onClose: () => void;
+    }
+    children: JSX.Element;
+}
+
+function IconKindSelect(props: {
+    kind: OverlayProps["kind"],
+    setOverlayKind: (newKind: OverlayProps["kind"]) => void
+}): JSX.Element {
+    return (
+        <div
+            style={{ marginBottom: "3vh" }}>
+            <Grid container spacing={1} justify="flex-start">
+                <Grid item>
+                    <IconButton
+                        edge="start"
+                        color={props.kind == "drawerLeft" ? "primary" : "default"}
+                        classes={{ colorPrimary: blue }}
+                        onClick={() => props.setOverlayKind("drawerLeft")}
+                    >
+                        <BorderLeftOutlined />
+                    </IconButton>
+                    <IconButton
+                        edge="start"
+                        color={props.kind == "drawerTop" ? "primary" : "default"}
+                        classes={{ colorPrimary: blue }}
+                        onClick={() => props.setOverlayKind("drawerTop")}
+                    >
+                        <BorderTopOutlined />
+                    </IconButton>
+                    <IconButton
+                        edge="start"
+                        color={props.kind == "drawerBottom" ? "primary" : "default"}
+                        classes={{ colorPrimary: blue }}
+                        onClick={() => props.setOverlayKind("drawerBottom")}
+                    >
+                        <BorderBottomOutlined />
+                    </IconButton>
+                    <IconButton
+                        edge="start"
+                        color={props.kind == "drawerRight" ? "primary" : "default"}
+                        classes={{ colorPrimary: blue }}
+                        onClick={() => props.setOverlayKind("drawerRight")}
+                    >
+                        <BorderRightOutlined />
+                    </IconButton>
+                    <IconButton
+                        edge="start"
+                        color={props.kind == "modal" ? "primary" : "default"}
+                        classes={{ colorPrimary: blue }}
+                        onClick={() => props.setOverlayKind("modal")}
+                    >
+                        <BorderHorizontalOutlined />
+                    </IconButton>
+                </Grid>
+            </Grid>
+        </div>
+    );
+}
+
+export function Overlay(props: OverlayProps): JSX.Element | null {
+    let [kind, setKind] = React.useState(props.kind);
+
+    switch (kind) {
+        case "drawerLeft":
+            return (
+                <Drawer
+                    anchor="left"
+                    {...props.passThrough}
+                >
+                    <React.Fragment>
+                        <IconKindSelect kind={kind} setOverlayKind={setKind} />
+                        {props.children}
+                    </React.Fragment>
+                </Drawer>
+            );
+        case "drawerTop":
+            return (
+                <Drawer
+                    anchor="top"
+                    {...props.passThrough}
+                >
+                    <React.Fragment>
+                        <IconKindSelect kind={kind} setOverlayKind={setKind} />
+                        {props.children}
+                    </React.Fragment>
+                </Drawer>
+            );
+        case "drawerBottom":
+            return (
+                <Drawer
+                    anchor="bottom"
+                    {...props.passThrough}
+                >
+                    <React.Fragment>
+                        <IconKindSelect kind={kind} setOverlayKind={setKind} />
+                        {props.children}
+                    </React.Fragment>
+                </Drawer>
+            );
+        case "drawerRight":
+            return (
+                <Drawer
+                    anchor="right"
+                    {...props.passThrough}
+                >
+                    <React.Fragment>
+                        <IconKindSelect kind={kind} setOverlayKind={setKind} />
+                        {props.children}
+                    </React.Fragment>
+                </Drawer>
+            );
+        case "modal":
+            return (
+                <Dialog
+                    {...props.passThrough}
+                >
+                    <React.Fragment>
+                        <IconKindSelect kind={kind} setOverlayKind={setKind} />
+                        {props.children}
+                    </React.Fragment>
+                </Dialog>
+            );
+    }
+
+    return null;
+}