diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c1c6460dd38cadb3c281b913edfa665f66830a4b..120400bb249270090e4f6575e50d6302995c3fce 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1112,6 +1112,11 @@
         "physical-cpu-count": "^2.0.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -1512,6 +1517,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
+      "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ff3266db50df27b2cfa7c1249cd9dd05a6972f00..9d7b32aa3c214d4e04bc30323d73f65efeb10b59 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,9 @@
   "author": "Matt Grau",
   "license": "ISC",
   "dependencies": {
+    "@popperjs/core": "^2.9.2",
     "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
     "parcel-bundler": "^1.12.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/frontend/src/device.jsx b/frontend/src/device.jsx
index b0e89bbe1dcf7905c9bd879cf72942304f342a07..d8d2a13b23a71bf1d871b0f211f027059a81237d 100644
--- a/frontend/src/device.jsx
+++ b/frontend/src/device.jsx
@@ -33,44 +33,51 @@ export default class Device extends React.Component {
 
   render() {
     return (
-      <div>
-        <div>
-          <h3>{this.props.name}</h3>
-        </div>
-        <div>
-          <div>
-            <label>Voltage</label>
-            <input
-              value={this.state.voltage}
-              onChange={(event) =>
-                this.setState({ voltage: event.target.value })
-              }
-              onBlur={async () => {
-                await axios.get(
-                  `http://localhost:8000/set_voltage/${this.state.voltage}`
-                );
-                await this.getValues();
-              }}
-            ></input>
-          </div>
-          <div>
-            <label>Current</label>
-            <input
-              value={this.state.current}
-              onChange={(event) =>
-                this.setState({ current: event.target.value })
-              }
-              onBlur={async () => {
-                await axios.get(
-                  `http://localhost:8000/set_current/${this.state.current}`
-                );
-                await this.getValues();
-              }}
-            ></input>
-          </div>
-          <div>
-            <label>Resistance</label>
-            <input value={this.state.resistance} readOnly></input>
+      <div class="container mt-5">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">{this.props.name}</h3>
+
+            <div class="input-group mb-3">
+              <label class="input-group-text">Voltage</label>
+              <input
+                value={this.state.voltage}
+                onChange={(event) =>
+                  this.setState({ voltage: event.target.value })
+                }
+                onBlur={async () => {
+                  await axios.get(
+                    `http://localhost:8000/set_voltage/${this.state.voltage}`
+                  );
+                  await this.getValues();
+                }}
+                class="form-control"
+              ></input>
+            </div>
+            <div class="input-group mb-3">
+              <label class="input-group-text">Current</label>
+              <input
+                value={this.state.current}
+                onChange={(event) =>
+                  this.setState({ current: event.target.value })
+                }
+                onBlur={async () => {
+                  await axios.get(
+                    `http://localhost:8000/set_current/${this.state.current}`
+                  );
+                  await this.getValues();
+                }}
+                class="form-control"
+              ></input>
+            </div>
+            <div class="input-group mb-3">
+              <label class="input-group-text">Resistance</label>
+              <input
+                value={this.state.resistance}
+                readOnly
+                class="form-control"
+              ></input>
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 28197254a7e7dca822c35e2d97c7bddf2b78abeb..fac23561fb391e152f7e589305b653388b1eb909 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,6 +1,7 @@
 import 'regenerator-runtime/runtime'
 import React from "react";
 import ReactDOM from "react-dom";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import Device from './device'