diff --git a/webui-client/src/views/index.ejs b/webui-client/src/views/index.ejs
new file mode 100644
index 0000000..b2f1591
--- /dev/null
+++ b/webui-client/src/views/index.ejs
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0" />
+		<title>SceneSense UI</title>
+		<!-- Include Bootstrap CSS -->
+		<link
+			rel="stylesheet"
+			href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+		<!-- Include jQuery (Note: Bootstrap relies on jQuery) -->
+		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+		<!-- Include Bootstrap JS -->
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+		<!-- Include Bootstrap-datepicker CSS and JS files -->
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+	</head>
+
+	<body>
+		<div class="container mt-5">
+			<h1>SceneSense Client App</h1>
+
+			<!-- Input for API Key -->
+			<div class="form-group">
+				<label for="apiKey">API Key:</label>
+				<input
+					type="text"
+					class="form-control"
+					id="apiKey"
+					placeholder="Enter your API Key" />
+			</div>
+			<div class="form-group">
+				<label for="startDateTime"
+					>Start Date and Time (YYYY-MM-DD HH:MM:SS):</label
+				>
+				<input
+					type="text"
+					class="form-control"
+					id="startDateTime" />
+			</div>
+			<div class="form-group">
+				<label for="endDateTime"
+					>End Date and Time (YYYY-MM-DD HH:MM:SS):</label
+				>
+				<input
+					type="text"
+					class="form-control"
+					id="endDateTime" />
+			</div>
+
+			<div class="my-4">
+				<!-- Buttons for API calls (arranged vertically on small screens) -->
+				<div class="d-flex flex-column">
+					<!-- First row with larger buttons -->
+					<div class="btn-group mb-2" role="group">
+						<button class="btn btn-outline-primary btn-lg" onclick="getLastRecord()">
+							Get Last Record
+						</button>
+						<button class="btn btn-outline-primary btn-lg" onclick="getAllRecords()">
+							Get All Records
+						</button>
+					</div>
+			
+					<!-- Second row with smaller buttons -->
+					<div class="btn-group" role="group">
+						<button class="btn btn-outline-primary mb-2" onclick="getRecordsSince()">
+							Get Records Since
+						</button>
+						<button class="btn btn-outline-primary mb-2" onclick="getRecordsBetween()">
+							Get Records Between
+						</button>
+						<button class="btn btn-outline-primary mb-2" onclick="getRecordsUntil()">
+							Get Records Until
+						</button>
+					</div>
+				</div>
+			</div>
+			
+			
+			<div class="table-responsive">
+				<table class="table table-bordered">
+					<thead>
+						<tr>
+							<th>ID</th>
+							<th>Timestamp</th>
+							<th>Description</th>
+						</tr>
+					</thead>
+					<tbody id="recordTableBody">
+						<!-- Table rows will be dynamically populated here -->
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<script>
+			// Function to convert user-inputted date and time to Unix timestamp
+			function convertToUnixTimestamp(dateTimeString) {
+				const unixTimestamp = Math.floor(
+					new Date(dateTimeString).getTime() / 1000
+				);
+				return unixTimestamp;
+			}
+
+			// Function to update the table with fetched data
+			function updateTable(data) {
+				const tableBody =
+					document.getElementById('recordTableBody');
+				tableBody.innerHTML = ''; // Clear existing rows
+
+				data.forEach((record) => {
+					const row = document.createElement('tr');
+					row.innerHTML = `
+                    <td>${record.id}</td>
+                    <td>${record.timestamp}</td>
+                    <td>${record.description}</td>
+                `;
+					tableBody.appendChild(row);
+				});
+			}
+
+			// Function to handle API errors
+			function handleApiError(error) {
+				console.error(error);
+				const tableBody =
+					document.getElementById('recordTableBody');
+				tableBody.innerHTML =
+					'<tr><td colspan="3">Error fetching data</td></tr>';
+			}
+
+			// JavaScript functions to make API calls
+			async function getLastRecord() {
+				const apiKey =
+					document.getElementById('apiKey').value;
+				if (!apiKey) {
+					alert('Please enter your API Key.');
+					return;
+				}
+
+				try {
+					const response = await fetch(
+						`/get_last_record?apiKey=${apiKey}`
+					);
+					const record = await response.json();
+					updateTable([record]);
+				} catch (error) {
+					handleApiError(error);
+				}
+			}
+
+			async function getAllRecords() {
+				const apiKey =
+					document.getElementById('apiKey').value;
+				if (!apiKey) {
+					alert('Please enter your API Key.');
+					return;
+				}
+
+				try {
+					const response = await fetch(
+						`/get_all_records?apiKey=${apiKey}`
+					);
+					const records = await response.json();
+					updateTable(records);
+				} catch (error) {
+					handleApiError(error);
+				}
+			}
+
+			async function getRecordsSince() {
+				const apiKey =
+					document.getElementById('apiKey').value;
+				if (!apiKey) {
+					alert('Please enter your API Key.');
+					return;
+				}
+
+				const startDateTime = $('#startDateTime').val();
+				if (!startDateTime) {
+					alert('Please enter a start date and time.');
+					return;
+				}
+
+				const unixTimestamp =
+					convertToUnixTimestamp(startDateTime);
+
+				try {
+					const response = await fetch(
+						`/get_records_since/${unixTimestamp}?apiKey=${apiKey}`
+					);
+					const records = await response.json();
+					updateTable(records);
+				} catch (error) {
+					handleApiError(error);
+				}
+			}
+
+			async function getRecordsBetween() {
+				const apiKey =
+					document.getElementById('apiKey').value;
+				if (!apiKey) {
+					alert('Please enter your API Key.');
+					return;
+				}
+
+				const startDateTime = $('#startDateTime').val();
+				const endDateTime = $('#endDateTime').val();
+				if (!startDateTime || !endDateTime) {
+					alert(
+						'Please enter both start and end dates and times.'
+					);
+					return;
+				}
+
+				const startUnixTimestamp =
+					convertToUnixTimestamp(startDateTime);
+				const endUnixTimestamp =
+					convertToUnixTimestamp(endDateTime);
+
+				if (startUnixTimestamp >= endUnixTimestamp) {
+					alert(
+						'Start time should be earlier than end time.'
+					);
+					return;
+				}
+
+				try {
+					const response = await fetch(
+						`/get_records_between/${startUnixTimestamp}/${endUnixTimestamp}?apiKey=${apiKey}`
+					);
+					const records = await response.json();
+					updateTable(records);
+				} catch (error) {
+					handleApiError(error);
+				}
+			}
+
+			async function getRecordsUntil() {
+				const apiKey =
+					document.getElementById('apiKey').value;
+				if (!apiKey) {
+					alert('Please enter your API Key.');
+					return;
+				}
+
+				const endDateTime = $('#endDateTime').val();
+				if (!endDateTime) {
+					alert('Please enter an end date and time.');
+					return;
+				}
+
+				const unixTimestamp =
+					convertToUnixTimestamp(endDateTime);
+
+				try {
+					const response = await fetch(
+						`/get_records_until/${unixTimestamp}?apiKey=${apiKey}`
+					);
+					const records = await response.json();
+					updateTable(records);
+				} catch (error) {
+					handleApiError(error);
+				}
+			}
+		</script>
+	</body>
+</html>
