diff --git a/src/app/employees/page.tsx b/src/app/employees/page.tsx
new file mode 100644
index 0000000..ae35e44
--- /dev/null
+++ b/src/app/employees/page.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Plus, Trash2, Edit2, Users } from 'lucide-react';
+
+interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+  points: number;
+}
+
+export default function EmployeesPage() {
+  const [employees, setEmployees] = useState<Employee[]>([
+    { id: "1", name: "Alice Johnson", email: "alice@company.com", department: "Sales", points: 250 },
+    { id: "2", name: "Bob Smith", email: "bob@company.com", department: "Engineering", points: 180 },
+    { id: "3", name: "Carol Davis", email: "carol@company.com", department: "Marketing", points: 320 }
+  ]);
+
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [formData, setFormData] = useState({ name: "", email: "", department: "", points: "0" });
+
+  const handleAddEmployee = () => {
+    setEditingId(null);
+    setFormData({ name: "", email: "", department: "", points: "0" });
+    setShowForm(true);
+  };
+
+  const handleEditEmployee = (employee: Employee) => {
+    setEditingId(employee.id);
+    setFormData({ name: employee.name, email: employee.email, department: employee.department, points: String(employee.points) });
+    setShowForm(true);
+  };
+
+  const handleSaveEmployee = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (editingId) {
+      setEmployees(employees.map(emp => emp.id === editingId ? { ...emp, name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) } : emp));
+    } else {
+      setEmployees([...employees, { id: String(Date.now()), name: formData.name, email: formData.email, department: formData.department, points: parseInt(formData.points) }]);
+    }
+    setShowForm(false);
+  };
+
+  const handleDeleteEmployee = (id: string) => {
+    setEmployees(employees.filter(emp => emp.id !== id));
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PointsHub"
+          navItems={[
+            { name: "Dashboard", id: "/points-dashboard" },
+            { name: "Employees", id: "/employees" },
+            { name: "Home", id: "/" }
+          ]}
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 pt-32 pb-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-3">
+              <Users className="w-8 h-8 text-blue-400" />
+              <h1 className="text-4xl font-bold text-white">Employee Directory</h1>
+            </div>
+            <button
+              onClick={handleAddEmployee}
+              className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors"
+            >
+              <Plus className="w-5 h-5" />
+              Add Employee
+            </button>
+          </div>
+
+          {showForm && (
+            <div className="bg-gray-700 rounded-lg p-6 mb-8 border border-gray-600">
+              <h2 className="text-2xl font-bold text-white mb-4">{editingId ? "Edit Employee" : "Add New Employee"}</h2>
+              <form onSubmit={handleSaveEmployee} className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <input
+                    type="text"
+                    placeholder="Full Name"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Department"
+                    value={formData.department}
+                    onChange={(e) => setFormData({ ...formData, department: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <input
+                    type="number"
+                    placeholder="Points"
+                    value={formData.points}
+                    onChange={(e) => setFormData({ ...formData, points: e.target.value })}
+                    required
+                    className="bg-gray-600 text-white px-4 py-2 rounded border border-gray-500 focus:outline-none focus:border-blue-500"
+                  />
+                </div>
+                <div className="flex gap-3">
+                  <button
+                    type="submit"
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded transition-colors"
+                  >
+                    Save
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowForm(false)}
+                    className="bg-gray-600 hover:bg-gray-500 text-white px-6 py-2 rounded transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+
+          <div className="bg-gray-700 rounded-lg overflow-hidden border border-gray-600">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-600 border-b border-gray-500">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Name</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Email</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Department</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Points</th>
+                    <th className="px-6 py-4 text-center text-white font-semibold">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {employees.map((employee, idx) => (
+                    <tr key={employee.id} className={idx % 2 === 0 ? "bg-gray-700" : "bg-gray-750"}>
+                      <td className="px-6 py-4 text-gray-100">{employee.name}</td>
+                      <td className="px-6 py-4 text-gray-300">{employee.email}</td>
+                      <td className="px-6 py-4 text-gray-300">{employee.department}</td>
+                      <td className="px-6 py-4 text-center">
+                        <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">{employee.points}</span>
+                      </td>
+                      <td className="px-6 py-4 text-center">
+                        <div className="flex gap-2 justify-center">
+                          <button
+                            onClick={() => handleEditEmployee(employee)}
+                            className="text-blue-400 hover:text-blue-300 transition-colors"
+                            title="Edit employee"
+                          >
+                            <Edit2 className="w-5 h-5" />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteEmployee(employee.id)}
+                            className="text-red-400 hover:text-red-300 transition-colors"
+                            title="Delete employee"
+                          >
+                            <Trash2 className="w-5 h-5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="mt-6 text-gray-300 text-sm">
+            <p>Total Employees: <span className="font-bold text-blue-400">{employees.length}</span></p>
+            <p>Total Points Distributed: <span className="font-bold text-blue-400">{employees.reduce((sum, emp) => sum + emp.points, 0)}</span></p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PointsHub"
+          columns={[
+            {
+              items: [
+                { label: "Dashboard", href: "/points-dashboard" },
+                { label: "Employees", href: "/employees" },
+                { label: "Home", href: "/" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Security", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Status Page", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file