diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index afddf33..649f8a4 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -8,8 +8,11 @@
 	01 - GENERAL
 	02 - HEADER
 	03 - DASHBOARD
+	04 - BUG ADD
+	05 - ARCHIVE
 	06 - API
 	07 - ABOUT
+	80 - FORM
 	99 - LIGHT MODE
 
 */
@@ -67,7 +70,8 @@ h1 {
 	line-height: 1.1;
 }
 
-button {
+button,
+.button {
 	border-radius: 8px;
 	border: 1px solid var(--color-bg0);
 	padding: 0.6em 1.2em;
@@ -79,12 +83,15 @@ button {
 	cursor: pointer;
 	transition: all 0.3s;
 }
-button:hover {
+button:hover,
+.button:hover {
 	border-color: var(--color-bg1);
 	background-color: var(--color-bg0);
 }
 button:focus,
-button:focus-visible {
+.button:focus,
+button:focus-visible,
+.button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
@@ -205,6 +212,26 @@ button:focus-visible {
 #dashboard:has(.dragging) .draggable-item:not(.dragging) .report {
 	opacity: 0.4;
 }
+
+/* ----------------------------------------------------
+   04 - BUG ADD
+   */
+#bug-add {
+	margin: 0 auto;
+	padding: 20px;
+}
+#bug-add .cols {
+	/* border: 1px red solid; */
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+/* ----------------------------------------------------
+   05 - ARCHIVE
+   */
+
+
 /* ----------------------------------------------------
    06 - API
    */
@@ -238,6 +265,34 @@ button:focus-visible {
 	filter: brightness(1.2);
 }
 
+/* ----------------------------------------------------
+   80 - FORM
+   */
+.form-group {
+	margin-bottom: 10px;
+}
+.form-group label {
+	display: block;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+.form-group input,
+.form-group textarea {
+	width: 99%;
+	padding: 5px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	background-color: var(--color-bg2);
+	color: var(--color-text0);
+}
+.form-actions {
+	margin-top: 10px;
+	text-align: right;
+}
+.form-actions button {
+	margin-left: 10px;
+}
+
 /* ----------------------------------------------------
    99 - LIGHT MODE
    */
diff --git a/webapp/src/backend.js b/webapp/src/backend.js
new file mode 100644
index 0000000..2f3912d
--- /dev/null
+++ b/webapp/src/backend.js
@@ -0,0 +1,76 @@
+export const backend = {
+	endpont: __IS_BUILD__
+		? window.location.origin + __SUBPATH__ + "api.php"
+		: "http://localhost/bugreport/api.php",
+
+	/* ----------------------------------------------------
+	 * Vsebecne API volanie
+	 */
+	call(method, data, callback) {
+		var xhttp = new XMLHttpRequest();
+		xhttp.withCredentials = true;
+		xhttp.onreadystatechange = function() {
+			if (this.readyState == 4) {
+				if (this.status == 200) {
+					if (callback != null) callback(JSON.parse(this.responseText));
+				} else {
+					if (callback != null) callback({'status': 'ERROR', 'message': 'HTTP STATUS ' + this.status});
+				}
+			}
+		}
+		var form_data  = new FormData();
+		Object.keys(data).forEach(key => {
+			form_data.append(key, data[key]);
+		});
+		xhttp.open('POST', this.endpont + '?action=' + method);
+		//xhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
+		xhttp.send(form_data);
+	},
+
+	callPromise(method, data) {
+		return new Promise((resolve, reject) => {
+			this.call(method, data, function(response) {
+				if (response.status == 'OK') {
+					resolve(response.data);
+				} else {
+					reject(response.msg);
+				}
+			});
+		})
+	},
+
+	/* ----------------------------------------------------
+	 * API akcie
+	 */
+	add(title, description, status, group, priority) {
+		return this.callPromise('add', {
+			title: title,
+			description: description,
+			status: status,
+			group: group,
+			priority: priority});
+	},
+
+	update(id, title, description, status, group, priority) {
+		return this.callPromise('update', {
+			id: id,
+			title: title,
+			description: description,
+			status: status,
+			group: group,
+			priority: priority});
+	},
+
+	delete(id) {
+		return this.callPromise('delete', {id: id});
+	},
+
+	get(id) {
+		return this.callPromise('get', {id: id});
+	},
+
+	getAll() {
+		return this.callPromise('getall', {});
+	},
+
+};
diff --git a/webapp/src/views/BugAdd.vue b/webapp/src/views/BugAdd.vue
index 27196bb..6941e06 100644
--- a/webapp/src/views/BugAdd.vue
+++ b/webapp/src/views/BugAdd.vue
@@ -1,6 +1,193 @@
 <template>
-	<div>
-		<h1>Pridať bug</h1>
-		<router-link to="/">Prejsť na Dashboard</router-link>
+	<div id="bug-add">
+		<h1>Pridať nový bug</h1>
+
+		<form @submit.prevent="submitForm" class="form">
+			<div class="form-group">
+				<label for="title">Názov:</label>
+				<input
+					type="text"
+					id="title"
+					v-model="bugReport.title"
+					required
+					class="form-control"
+					placeholder="Zadajte názov bug reportu"
+				/>
+			</div>
+
+			<div class="form-group">
+				<label for="description">Popis:</label>
+				<textarea
+					id="description"
+					v-model="bugReport.description"
+					rows="5"
+					class="form-control"
+					placeholder="Detailný popis problému"
+					required
+				></textarea>
+			</div>
+
+			<div class="cols">
+				<div class="form-group">
+					<label for="files">Prílohy:</label>
+					<input
+						type="file"
+						id="files"
+						@change="handleFileUpload"
+						multiple
+						class="form-control file-input"
+					/>
+					<div class="selected-files" v-if="selectedFiles.length > 0">
+						<p>Vybrané súbory:</p>
+
+						<p v-for="(file, index) in selectedFiles" :key="index">
+							<button
+								type="button"
+								class="remove-file"
+								@click="removeFile(index)"
+							>
+								<font-awesome-icon :icon="['fas', 'circle-xmark']" /> Odober
+								súbor
+							</button>
+							&nbsp;&nbsp;
+							{{ file.name }} ({{ formatFileSize(file.size) }})
+						</p>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label for="priority">Priorita:</label>
+					<select
+						id="priority"
+						v-model="bugReport.priority"
+						class="form-control"
+						required
+					>
+						<option value="" disabled>Vyberte prioritu</option>
+						<option value="0">Nízka</option>
+						<option value="1">Stredná</option>
+						<option value="2">Vysoká</option>
+						<option value="3">Kritická</option>
+					</select>
+				</div>
+
+				<div class="form-group">
+					<label for="group">Skupina:</label>
+					<select
+						id="group"
+						v-model="bugReport.group"
+						class="form-control"
+						required
+					>
+						<option value="" disabled>Vyberte skupinu</option>
+						<option value="cp">Control Panel</option>
+						<option value="task">Task.Platon.sk</option>
+						<option value="websiteip">WebsiteIP</option>
+						<option value="antispam">Antispam</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="form-actions">
+				<router-link to="/" class="button"
+					><font-awesome-icon :icon="['fas', 'circle-arrow-left']" />
+					Zrušiť</router-link
+				>
+				<button type="submit">
+					<font-awesome-icon :icon="['fas', 'circle-check']" /> Odoslať
+				</button>
+			</div>
+		</form>
 	</div>
 </template>
+
+<script>
+import { backend } from "../backend";
+
+export default {
+	name: "BugAdd",
+	data() {
+		return {
+			bugReport: {
+				title: "",
+				description: "",
+				priority: "1",
+				group: "cp",
+				files: [],
+			},
+			selectedFiles: [],
+		};
+	},
+	methods: {
+		handleFileUpload(event) {
+			const files = event.target.files;
+			if (files) {
+				for (let i = 0; i < files.length; i++) {
+					this.selectedFiles.push(files[i]);
+				}
+			}
+		},
+		removeFile(index) {
+			this.selectedFiles.splice(index, 1);
+		},
+		formatFileSize(size) {
+			if (size < 1024) {
+				return size + " B";
+			} else if (size < 1024 * 1024) {
+				return (size / 1024).toFixed(2) + " KB";
+			} else {
+				return (size / (1024 * 1024)).toFixed(2) + " MB";
+			}
+		},
+		submitForm() {
+			// Vytvorenie FormData objektu pre odoslanie súborov
+			const formData = new FormData();
+			formData.append("title", this.bugReport.title);
+			formData.append("description", this.bugReport.description);
+			formData.append("priority", this.bugReport.priority);
+
+			// Pridanie súborov do FormData
+			this.selectedFiles.forEach((file, index) => {
+				formData.append(`file${index}`, file);
+			});
+
+			// Tu by nasledovalo odoslanie dát na server
+			console.log("Odosielam bug report:", {
+				title: this.bugReport.title,
+				description: this.bugReport.description,
+				priority: this.bugReport.priority,
+				files: this.selectedFiles.map((f) => f.name),
+			});
+			backend
+				.add(
+					this.bugReport.title,
+					this.bugReport.description,
+					"0",
+					this.bugReport.group,
+					this.bugReport.priority
+				)
+				.then((result) => {
+					console.log(result);
+				})
+				.catch((error) => {
+					console.log(error);
+				});
+
+			// this.resetForm();
+			// this.$router.push("/");
+		},
+		resetForm() {
+			this.bugReport = {
+				title: "",
+				description: "",
+				priority: "",
+				files: [],
+			};
+			this.selectedFiles = [];
+			// Resetovanie file input
+			const fileInput = document.getElementById("files");
+			if (fileInput) fileInput.value = "";
+		},
+	},
+};
+</script>
diff --git a/webapp/vite.config.js b/webapp/vite.config.js
index 0e1e191..faa40db 100644
--- a/webapp/vite.config.js
+++ b/webapp/vite.config.js
@@ -21,6 +21,8 @@ export default defineConfig(({ command, mode }) => {
 			__APP_VERSION__: JSON.stringify(pkg.version),
 			__BUILD_DATE__: JSON.stringify(new Date().toISOString()),
 			__SUBPATH__: JSON.stringify(isBuild ? subpath : "/"),
+			__IS_BUILD__: JSON.stringify(isBuild),
+			__IS_DEV__: JSON.stringify(isDev),
 		},
 	};
 });