diff --git a/backend/app/main.py b/backend/app/main.py
index e69de29..0507979 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -0,0 +1,128 @@
+from fastapi import FastAPI, Request, Depends, HTTPException
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+from sqlalchemy.orm import Session
+
+from app.database.connection import SessionLocal
+from app.database.models import Department, Employee, EmployeeRecord
+from app.schemas.employee import (
+    DepartmentCreate,
+    DepartmentSchema,
+    EmployeeCreate,
+    EmployeeSchema,
+    EmployeeRecordSchema,
+    EmployeeRecordCreate,
+)
+
+# ENDPOINTS IN MAIN.PY BUT USUALLY WHEN THE PROJECT IS BIGGER WE SEPARATE THEM IN ROUTER 
+
+app = FastAPI()
+templates = Jinja2Templates(directory="app/templates")
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    return templates.TemplateResponse(
+        request=request,
+        name="index.html",
+        context={"title": "ML App Home"},
+    )
+
+
+@app.get("/departments", response_class=HTMLResponse)
+def department_page(request: Request, db: Session = Depends(get_db)):
+    db_departments = db.query(Department).all()
+    return templates.TemplateResponse(
+        request=request,
+        name="departments.html",
+        context={"departments": db_departments},
+    )
+
+
+@app.get("/employees", response_class=HTMLResponse)
+def employee_page(request: Request, db: Session = Depends(get_db)):
+    db_departments = db.query(Department).all()
+    db_employees = db.query(Employee).all()
+    return templates.TemplateResponse(
+        request=request,
+        name="employees.html",
+        context={
+            "departments": db_departments,
+            "employees": db_employees,
+        },
+    )
+
+
+@app.get("/records", response_class=HTMLResponse)
+def records_page(request: Request, db: Session = Depends(get_db)):
+    db_employees = db.query(Employee).all()
+    db_records = db.query(EmployeeRecord).all()
+    return templates.TemplateResponse(
+        request=request,
+        name="records.html",
+        context={
+            "employees": db_employees,
+            "records": db_records,
+        },
+    )
+
+
+@app.post("/departments", response_model=DepartmentSchema)
+def create_department(department_in: DepartmentCreate, db: Session = Depends(get_db)):
+    department = Department(name=department_in.name)
+    db.add(department)
+    db.commit()
+    db.refresh(department)
+    return department
+
+
+@app.post("/employees", response_model=EmployeeSchema)
+def create_employee(employee_in: EmployeeCreate, db: Session = Depends(get_db)):
+    department = None
+    if employee_in.department_id is not None:
+        department = db.get(Department, employee_in.department_id)
+        if department is None:
+            raise HTTPException(status_code=400, detail="department_id does not exist")
+    else:
+        department = db.query(Department).filter_by(name="General").first()
+        if department is None:
+            department = Department(name="General")
+            db.add(department)
+            db.flush()
+
+    employee = Employee(
+        first_name=employee_in.first_name,
+        last_name=employee_in.last_name,
+        email=employee_in.email,
+        department_id=department.id,
+    )
+    db.add(employee)
+    db.commit()
+    db.refresh(employee)
+    return employee
+
+
+@app.post("/records", response_model=EmployeeRecordSchema)
+def create_record(record_in: EmployeeRecordCreate, db: Session = Depends(get_db)):
+    employee = db.get(Employee, record_in.employee_id)
+    if employee is None:
+        raise HTTPException(status_code=400, detail="employee_id does not exist")
+
+    db_record = EmployeeRecord(
+        employee_id=record_in.employee_id,
+        exam_score=record_in.exam_score,
+        years_exp=record_in.years_exp,
+        salary=record_in.salary,
+    )
+    db.add(db_record)
+    db.commit()
+    db.refresh(db_record)
+    return db_record
+    
\ No newline at end of file
diff --git a/backend/app/schemas/employee.py b/backend/app/schemas/employee.py
new file mode 100644
index 0000000..14bf9fc
--- /dev/null
+++ b/backend/app/schemas/employee.py
@@ -0,0 +1,49 @@
+from typing import Optional
+
+from pydantic import BaseModel, ConfigDict
+
+# GET SCHEMAS
+
+class DepartmentSchema(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: int
+    name: str
+
+
+class EmployeeSchema(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: int
+    first_name: str
+    last_name: str
+    email: Optional[str] = None
+    department_id: int
+
+
+class EmployeeRecordSchema(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+    
+    id: int
+    employee_id: int
+    exam_score: int
+    years_exp: int
+    salary: float
+
+# POST SCHEMAS - note that we don't have id fields here because they are created automatically
+
+class DepartmentCreate(BaseModel):
+    name: str
+
+class EmployeeCreate(BaseModel):
+    first_name: str
+    last_name: str
+    email: Optional[str] = None
+    department_id: Optional[int] = None
+
+class EmployeeRecordCreate(BaseModel):
+    employee_id: int
+    exam_score: int
+    years_exp: int
+    salary: float
+
diff --git a/backend/app/templates/departments.html b/backend/app/templates/departments.html
new file mode 100644
index 0000000..010acdd
--- /dev/null
+++ b/backend/app/templates/departments.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Departments</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 50px; background-color: #f7f9fc; }
+        section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+        a { color: #2c3e50; text-decoration: none; }
+    </style>
+</head>
+<body>
+    <header style="margin-bottom: 30px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
+        <nav style="display: flex; gap: 24px; align-items: center;">
+            <a href="/" style="font-weight: 700; color: #2c3e50;">Home</a>
+            <a href="/departments" style="color: #2c3e50;">Departments</a>
+            <a href="/employees" style="color: #2c3e50;">Employees</a>
+            <a href="/records" style="color: #2c3e50;">Records</a>
+        </nav>
+    </header>
+    <section>
+        <h1>Departments</h1>
+        <form id="department-form">
+            <label>Name<br><input type="text" name="name" required></label><br><br>
+            <button type="submit">Create department</button>
+            <span id="department-message" style="margin-left: 1rem;color:#2c3e50"></span>
+        </form>
+
+        <h2>Existing departments</h2>
+        <ul id="department-list">
+            {% for department in departments %}
+            <li>{{ department.id }} — {{ department.name }}</li>
+            {% else %}
+            <li>No departments yet.</li>
+            {% endfor %}
+        </ul>
+    </section>
+
+    <script>
+        const departmentForm = document.getElementById('department-form');
+        const departmentList = document.getElementById('department-list');
+        departmentForm.addEventListener('submit', async event => {
+            event.preventDefault();
+            const message = document.getElementById('department-message');
+            message.textContent = '';
+            const formData = new FormData(departmentForm);
+            const payload = { name: formData.get('name')?.toString().trim() };
+
+            try {
+                const response = await fetch('/departments', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                if (!response.ok) {
+                    const text = await response.text();
+                    throw new Error(text || 'Request failed');
+                }
+                const department = await response.json();
+                const item = document.createElement('li');
+                item.textContent = `${department.id} — ${department.name}`;
+                departmentList.appendChild(item);
+                message.textContent = 'Department created.';
+                departmentForm.reset();
+            } catch (error) {
+                message.textContent = 'Error: ' + error.message;
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/backend/app/templates/employees.html b/backend/app/templates/employees.html
new file mode 100644
index 0000000..a090d36
--- /dev/null
+++ b/backend/app/templates/employees.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Employees</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 50px; background-color: #f7f9fc; }
+        section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+        a { color: #2c3e50; text-decoration: none; }
+    </style>
+</head>
+<body>
+    <header style="margin-bottom: 30px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
+        <nav style="display: flex; gap: 24px; align-items: center;">
+            <a href="/" style="font-weight: 700; color: #2c3e50;">Home</a>
+            <a href="/departments" style="color: #2c3e50;">Departments</a>
+            <a href="/employees" style="color: #2c3e50;">Employees</a>
+            <a href="/records" style="color: #2c3e50;">Records</a>
+        </nav>
+    </header>
+    <section>
+        <h1>Employees</h1>
+        <form id="employee-form">
+            <label>First Name<br><input type="text" name="first_name" required></label><br><br>
+            <label>Last Name<br><input type="text" name="last_name" required></label><br><br>
+            <label>Email<br><input type="email" name="email"></label><br><br>
+            <label>Department<br>
+                <select name="department_id">
+                    <option value="">General</option>
+                    {% for department in departments %}
+                    <option value="{{ department.id }}">{{ department.name }}</option>
+                    {% endfor %}
+                </select>
+            </label><br><br>
+            <button type="submit">Create employee</button>
+            <span id="employee-message" style="margin-left: 1rem;color:#2c3e50"></span>
+        </form>
+
+        <h2>Existing employees</h2>
+        <ul id="employee-list">
+            {% for employee in employees %}
+            <li>{{ employee.id }} — {{ employee.first_name }} {{ employee.last_name }} (dept {{ employee.department_id }})</li>
+            {% else %}
+            <li>No employees yet.</li>
+            {% endfor %}
+        </ul>
+    </section>
+
+    <script>
+        const employeeForm = document.getElementById('employee-form');
+        const employeeList = document.getElementById('employee-list');
+        employeeForm.addEventListener('submit', async event => {
+            event.preventDefault();
+            const message = document.getElementById('employee-message');
+            message.textContent = '';
+            const formData = new FormData(employeeForm);
+            const payload = {
+                first_name: formData.get('first_name')?.toString().trim(),
+                last_name: formData.get('last_name')?.toString().trim(),
+                email: formData.get('email')?.toString().trim() || undefined,
+                department_id: formData.get('department_id') ? Number(formData.get('department_id')) : undefined,
+            };
+
+            try {
+                const response = await fetch('/employees', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                if (!response.ok) {
+                    const text = await response.text();
+                    throw new Error(text || 'Request failed');
+                }
+                const employee = await response.json();
+                const item = document.createElement('li');
+                item.textContent = `${employee.id} — ${employee.first_name} ${employee.last_name} (dept ${employee.department_id})`;
+                employeeList.appendChild(item);
+                message.textContent = 'Employee created.';
+                employeeForm.reset();
+            } catch (error) {
+                message.textContent = 'Error: ' + error.message;
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/backend/app/templates/index.html b/backend/app/templates/index.html
new file mode 100644
index 0000000..ee07a2e
--- /dev/null
+++ b/backend/app/templates/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ML Project Records</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 50px; background-color: #f7f9fc; }
+        table { border-collapse: collapse; width: 100%; margin-top: 20px; background: white; }
+        th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
+        th { background-color: #34495e; color: white; }
+    </style>
+</head>
+<body>
+</head>
+<body>
+    <header style="margin-bottom: 30px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
+        <nav style="display: flex; gap: 24px; align-items: center;">
+            <a href="/" style="font-weight: 700; color: #2c3e50;">Home</a>
+            <a href="/departments" style="color: #2c3e50;">Departments</a>
+            <a href="/employees" style="color: #2c3e50;">Employees</a>
+            <a href="/records" style="color: #2c3e50;">Records</a>
+        </nav>
+    </header>
+
+    <section style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
+        <h1>ML App Home</h1>
+        <p>Use the pages below to manage your data.</p>
+        <ul style="padding-left: 20px;">
+            <li><a href="/departments">Departments</a></li>
+            <li><a href="/employees">Employees</a></li>
+            <li><a href="/records">Records</a></li>
+        </ul>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/backend/app/templates/records.html b/backend/app/templates/records.html
new file mode 100644
index 0000000..cea096f
--- /dev/null
+++ b/backend/app/templates/records.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Records</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 50px; background-color: #f7f9fc; }
+        table { border-collapse: collapse; width: 100%; margin-top: 20px; background: white; }
+        th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
+        th { background-color: #34495e; color: white; }
+        section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+        a { color: #2c3e50; text-decoration: none; }
+    </style>
+</head>
+<body>
+    <header style="margin-bottom: 30px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
+        <nav style="display: flex; gap: 24px; align-items: center;">
+            <a href="/" style="font-weight: 700; color: #2c3e50;">Home</a>
+            <a href="/departments" style="color: #2c3e50;">Departments</a>
+            <a href="/employees" style="color: #2c3e50;">Employees</a>
+            <a href="/records" style="color: #2c3e50;">Records</a>
+        </nav>
+    </header>
+    <section>
+        <h1>Records</h1>
+        <form id="record-form">
+            <label>Employee<br>
+                <select name="employee_id" required>
+                    <option value="">Select employee</option>
+                    {% for employee in employees %}
+                    <option value="{{ employee.id }}">{{ employee.first_name }} {{ employee.last_name }}</option>
+                    {% endfor %}
+                </select>
+            </label><br><br>
+            <label>Exam Score<br><input type="number" name="exam_score" required></label><br><br>
+            <label>Years of Experience<br><input type="number" name="years_exp" required></label><br><br>
+            <label>Salary<br><input type="number" name="salary" step="0.01" required></label><br><br>
+            <button type="submit">Create record</button>
+            <span id="record-message" style="margin-left: 1rem;color:#2c3e50"></span>
+        </form>
+
+        <h2>Employee records</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Record ID</th>
+                    <th>Employee ID</th>
+                    <th>Exam Score</th>
+                    <th>Years of Experience</th>
+                    <th>Salary</th>
+                </tr>
+            </thead>
+            <tbody id="records-body">
+                {% for record in records %}
+                <tr>
+                    <td>{{ record.id }}</td>
+                    <td>{{ record.employee_id }}</td>
+                    <td>{{ record.exam_score }}</td>
+                    <td>{{ record.years_exp }}</td>
+                    <td>${{ "%.2f"|format(record.salary) }}</td>
+                </tr>
+                {% else %}
+                <tr id="no-records-row">
+                    <td colspan="5" style="text-align: center; color: #7f8c8d;">No records found in the database yet.</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </section>
+
+    <script>
+        const recordForm = document.getElementById('record-form');
+        const recordsBody = document.getElementById('records-body');
+        recordForm.addEventListener('submit', async event => {
+            event.preventDefault();
+            const message = document.getElementById('record-message');
+            message.textContent = '';
+            const formData = new FormData(recordForm);
+            const payload = {
+                employee_id: Number(formData.get('employee_id')),
+                exam_score: Number(formData.get('exam_score')),
+                years_exp: Number(formData.get('years_exp')),
+                salary: Number(formData.get('salary')),
+            };
+
+            try {
+                const response = await fetch('/records', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                if (!response.ok) {
+                    const text = await response.text();
+                    throw new Error(text || 'Request failed');
+                }
+                const record = await response.json();
+                const noRecordsRow = document.getElementById('no-records-row');
+                if (noRecordsRow) {
+                    noRecordsRow.remove();
+                }
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${record.id}</td>
+                    <td>${record.employee_id}</td>
+                    <td>${record.exam_score}</td>
+                    <td>${record.years_exp}</td>
+                    <td>$${record.salary.toFixed(2)}</td>
+                `;
+                recordsBody.appendChild(row);
+                message.textContent = 'Record created.';
+                recordForm.reset();
+            } catch (error) {
+                message.textContent = 'Error: ' + error.message;
+            }
+        });
+    </script>
+</body>
+</html>