diff --git a/main.py b/main.py
index 2e67dc1..5496032 100644
--- a/main.py
+++ b/main.py
@@ -5,9 +5,12 @@ from flask_socketio import SocketIO
 from tfluna import TFLuna
 from bmp180 import BMP180
 from mpu6050 import mpu6050
+from picamera2 import Picamera2
+import io
+import base64
 import random
 
-# Here, we create the neccesary base app. You don't need to worry about this.
+# App initalization
 app = Flask(__name__)
 socketio = SocketIO(app)
 
@@ -17,6 +20,10 @@ mpu = mpu6050(0x68)
 tfluna = TFLuna()
 tfluna.open()
 tfluna.set_samp_rate(10)
+picam2 = Picamera2
+camera_config = picam2.create_preview_configuration(main={"size": (640,480)})
+picam2.configure(camera_config)
+picam2.start()
 
 # tfl Class to format the getters like the other sensors.
 class tfl:
@@ -70,6 +77,15 @@ def handle_connect():
     print('Client connected')
     socketio.start_background_task(target=background_thread)
 
+@socketio.on('request_image')
+def handle_image_request():
+    stream = io.BytesIO()
+    picam2.capture_file(stream, format='jpeg')
+    stream.seek(0)
+    b64_image = base64.b64encode(stream.read()).decode('utf-8')
+    socketio.emit('new_image', {'image_data': b64_image})
+    print("Image sent")
+
 # This function is called
 def main():
     # These specific arguments are required to make sure the webserver is hosted in a consistent spot, so don't change them unless you know what you're doing.
diff --git a/templates/index.html b/templates/index.html
index f283daa..5d60cac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,25 +5,24 @@
     <title>Team 2B2T Drone</title>
     <!-- The below script tag is used to load socket.io from the server. -->
     <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
-</head>
-<body>
     <h1>Team 2B2T Drone</h1>
     <!-- Notice how the span that contains the placeholder value has an ID. We reference this ID later in the script, and it lets us pick this element in specific. -->
-    <p>Random Number (lost connection if stopped):  <span id="randNum">Loading...</span></p>
-    <br><br>
+    <p>Connection Status:  <span id="status">Loading...</span></p>
     <p><b>Barometric Sensor Values</b></p>
     <p>Temperature:  <span id="bmpTemp">Loading...</span></p>
     <p>Pressure:  <span id="pressure">Loading...</span></p>
     <p>Altitude:  <span id="altitude">Loading...</span></p>
-    <br><br>
     <p><b>Accelerometer Sensor Values</b></p>
     <p>Acceleration:  <span id="accel">Loading...</span></p>
     <p>Gyroscope:  <span id="gyro">Loading...</span></p>
-    <br><br>
     <p><b>Lidar Sensor Values</b></p>
     <p>Distance:  <span id="distance">Loading...</span></p>
     <p>Strength:  <span id="strength">Loading...</span></p>
     <p>Temperature:  <span id="lidarTemp">Loading...</span></p>
+    <h2>Camera</h2>
+    <button id="takePictureButton">Take Picture</button>
+    <br>
+    <img id="cameraImage" src="" alt="Live from Pi!" style="width: 640px; height: 480px; border: 1px solid black;">
     <script>
         // This function wrapper (addEventListener) makes the inner contents run only when the DOM (Document Object Model) content is loaded.
         // In simpler terms, this runs once the page has finished loading.
@@ -51,6 +50,17 @@
                 distanceSpan.textContent = msg.tflDistance;
                 strengthSpan.textContent = msg.tflStrength;
                 lidarTempSpan.textContent = msg.tflTemp;
+
+                var pictureButton = document.getElementById('picButton');
+                var image = document.getElementById('cameraImage');
+                pictureButton.addEventListener('click', function() {
+                    console.log('Requesting image from server...');
+                    socket.emit('request_image');
+                });
+                socket.on('new_image', function(msg) {
+                    console.log('Recieved image');
+                cameraImage.src = 'data:image/jpeg;base64,' + msg.image_data;
+                });
             });
         });
     </script>
