diff --git a/webui-client/src/main.js b/webui-client/src/main.js
new file mode 100644
index 0000000..dfdfa22
--- /dev/null
+++ b/webui-client/src/main.js
@@ -0,0 +1,122 @@
+const express = require('express');
+const axios = require('axios');
+const app = express();
+const port = process.env.PORT || 3000;
+
+// Set up EJS as the view engine
+app.set('view engine', 'ejs');
+
+// Serve static files from the public directory
+app.use(express.static('public'));
+
+// Define the API endpoint constant
+const API_ENDPOINT = 'https://api.ss.mhasadi78.ir'; // Replace with your actual API endpoint
+
+// Define routes
+app.get('/', (req, res) => {
+	res.render('index');
+});
+
+// Handle API requests with API Key
+app.get('/get_last_record', async (req, res) => {
+	try {
+		const apiKey = req.query.apiKey; // Get API Key from query parameter
+		const response = await axios.get(
+			`${API_ENDPOINT}/get_last_record`,
+			{ headers: { Authorization: apiKey } }, // Set API Key in the request header
+		);
+		const record = response.data;
+		res.json(record);
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({
+			error: 'Error fetching data',
+		});
+	}
+});
+
+app.get('/get_all_records', async (req, res) => {
+	try {
+		const apiKey = req.query.apiKey; // Get API Key from query parameter
+		const response = await axios.get(
+			`${API_ENDPOINT}/get_all_records`,
+			{ headers: { Authorization: apiKey } }, // Set API Key in the request header
+		);
+		const records = response.data;
+		res.json(records);
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({
+			error: 'Error fetching data',
+		});
+	}
+});
+
+app.get(
+	'/get_records_since/:timestamp',
+	async (req, res) => {
+		const timestamp = parseInt(req.params.timestamp);
+		try {
+			const apiKey = req.query.apiKey; // Get API Key from query parameter
+			const response = await axios.get(
+				`${API_ENDPOINT}/get_records_since/${timestamp}`,
+				{ headers: { Authorization: apiKey } }, // Set API Key in the request header
+			);
+			const records = response.data;
+			res.json(records);
+		} catch (error) {
+			console.error(error);
+			res.status(500).json({
+				error: 'Error fetching data',
+			});
+		}
+	},
+);
+
+app.get(
+	'/get_records_between/:startTimestamp/:endTimestamp',
+	async (req, res) => {
+		const startTimestamp = parseInt(req.params.startTimestamp);
+		const endTimestamp = parseInt(req.params.endTimestamp);
+		try {
+			const apiKey = req.query.apiKey; // Get API Key from query parameter
+			const response = await axios.get(
+				`${API_ENDPOINT}/get_records_between/${startTimestamp}/${endTimestamp}`,
+				{ headers: { Authorization: apiKey } }, // Set API Key in the request header
+			);
+			const records = response.data;
+			res.json(records);
+		} catch (error) {
+			console.error(error);
+			res.status(500).json({
+				error: 'Error fetching data',
+			});
+		}
+	},
+);
+
+app.get(
+	'/get_records_until/:timestamp',
+	async (req, res) => {
+		const timestamp = parseInt(req.params.timestamp);
+		try {
+			const apiKey = req.query.apiKey; // Get API Key from query parameter
+			const response = await axios.get(
+				`${API_ENDPOINT}/get_records_until/${timestamp}`,
+				{ headers: { Authorization: apiKey } }, // Set API Key in the request header
+			);
+			const records = response.data;
+			res.json(records);
+		} catch (error) {
+			console.error(error);
+			res.status(500).json({
+				error: 'Error fetching data',
+			});
+		}
+	},
+);
+
+// Start the server
+app.listen(port, () => {
+	console.log(`Server is running on port ${port}`);
+});