diff --git a/src/components/App.tsx b/src/components/App.tsx
index 330a9a29..c1660450 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Editor from './Editor';
 import Toolbar from './Toolbar';
 import Terminal from './Terminal';
+import StatusBar from './Statusbar';
 import Container from 'react-bootstrap/Container';
 
 function App(): JSX.Element {
@@ -10,6 +11,7 @@ function App(): JSX.Element {
             <Toolbar />
             <Editor />
             <Terminal />
+            <StatusBar />
         </Container>
     );
 }
diff --git a/src/components/Statusbar.tsx b/src/components/Statusbar.tsx
new file mode 100644
index 00000000..768b2dd4
--- /dev/null
+++ b/src/components/Statusbar.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+import { BLEConnectionState } from '../services/BLEConnection';
+
+interface StatusBarState {
+    bleState: BLEConnectionState;
+}
+
+class StatusBar extends React.Component<{}, StatusBarState> {
+    constructor(props: {}) {
+        super(props);
+        this.state = { bleState: BLEConnectionState.Disconnected };
+        this.onAction = this.onAction.bind(this);
+    }
+
+    private onAction(action: string): void {
+        console.log(action);
+    }
+
+    setBLEState(state: BLEConnectionState): void {
+        this.setState({ bleState: state });
+    }
+
+    render(): JSX.Element {
+        return (
+            <Row className="bg-info p-2">
+                <Col className="col-2">
+                    <ProgressBar></ProgressBar>
+                </Col>
+            </Row>
+        );
+    }
+}
+
+export default StatusBar;