Refactor project and contract forms for improved UI and functionality

- Updated NewProjectPage to use PageContainer and PageHeader for better layout.
- Enhanced ProjectListPage to display project data in a responsive table format.
- Refactored ContractForm to use Card components and improved loading state handling.
- Refactored ProjectForm to use Card components, added loading state, and improved form structure and styling.

src/app/contracts/[id]/page.js

@@ -3,6 +3,12 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
+import PageContainer from "@/components/ui/PageContainer";
+import PageHeader from "@/components/ui/PageHeader";
+import { LoadingState } from "@/components/ui/States";
 
 export default function ContractDetailsPage() {
 	const params = useParams();
@@ -41,166 +47,352 @@ export default function ContractDetailsPage() {
 			fetchContractDetails();
 		}
 	}, [contractId]);
-
 	if (loading) {
 		return (
-			<div className="p-4 max-w-4xl mx-auto">
-				<div className="text-center">Ładowanie szczegółów umowy...</div>
-			</div>
+			<PageContainer>
+				<LoadingState message="Loading contract details..." />
+			</PageContainer>
 		);
 	}
 
 	if (!contract) {
 		return (
-			<div className="p-4 max-w-4xl mx-auto">
-				<div className="text-center text-red-600">Nie znaleziono umowy.</div>
-				<div className="text-center mt-4">
-					<Link href="/contracts" className="text-blue-600 hover:underline">
-						← Powrót do listy umów
+			<PageContainer>
+				<Card>
+					<CardContent className="text-center py-12">
+						<p className="text-red-600 text-lg mb-4">Contract not found.</p>
+						<Link href="/contracts">
+							<Button variant="primary">Back to Contracts</Button>
 						</Link>
-				</div>
-			</div>
+					</CardContent>
+				</Card>
+			</PageContainer>
 		);
 	}
-
 	return (
-		<div className="p-4 max-w-4xl mx-auto">
-			{/* Header */}
-			<div className="flex justify-between items-center mb-6">
-				<h1 className="text-2xl font-bold">Umowa {contract.contract_number}</h1>
-				<Link href="/contracts" className="text-blue-600 hover:underline">
-					← Powrót do listy umów
+		<PageContainer>
+			<PageHeader
+				title={`Contract ${contract.contract_number}`}
+				description={contract.contract_name || "Contract Details"}
+				action={
+					<div className="flex items-center gap-3">
+						<Link href="/contracts">
+							<Button variant="outline" size="sm">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M15 19l-7-7 7-7"
+									/>
+								</svg>
+								Back to Contracts
+							</Button>
+						</Link>
+						<Link href={`/projects/new?contract_id=${contractId}`}>
+							<Button variant="primary" size="sm">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Add Project
+							</Button>
 						</Link>
 					</div>
+				}
+			/>
 
 			{/* Contract Details */}
-			<div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
-				<h2 className="text-xl font-semibold mb-4">Szczegóły umowy</h2>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+				<div className="lg:col-span-2">
+					<Card>
+						<CardHeader>
+							<h2 className="text-xl font-semibold text-gray-900">
+								Contract Information
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-6">
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 								<div>
-						<label className="block text-sm font-medium text-gray-600">
-							Numer umowy
-						</label>
-						<p className="text-lg">{contract.contract_number}</p>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Contract Number
+									</span>
+									<p className="text-gray-900 font-medium">
+										{contract.contract_number}
+									</p>
 								</div>
 
 								{contract.contract_name && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Nazwa umowy
-							</label>
-							<p className="text-lg">{contract.contract_name}</p>
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Contract Name
+										</span>
+										<p className="text-gray-900 font-medium">
+											{contract.contract_name}
+										</p>
 									</div>
 								)}
 
 								{contract.customer_contract_number && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Numer umowy (Klienta)
-							</label>
-							<p>{contract.customer_contract_number}</p>
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Customer Contract Number
+										</span>
+										<p className="text-gray-900 font-medium">
+											{contract.customer_contract_number}
+										</p>
 									</div>
 								)}
 
 								{contract.customer && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Zleceniodawca
-							</label>
-							<p>{contract.customer}</p>
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Customer
+										</span>
+										<p className="text-gray-900 font-medium">
+											{contract.customer}
+										</p>
 									</div>
 								)}
 
 								{contract.investor && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Inwestor
-							</label>
-							<p>{contract.investor}</p>
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Investor
+										</span>
+										<p className="text-gray-900 font-medium">
+											{contract.investor}
+										</p>
 									</div>
 								)}
 
 								{contract.date_signed && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Data zawarcia
-							</label>
-							<p>
-								{new Date(contract.date_signed).toLocaleDateString("pl-PL")}
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Date Signed
+										</span>
+										<p className="text-gray-900 font-medium">
+											{new Date(contract.date_signed).toLocaleDateString(
+												"en-US"
+											)}
 										</p>
 									</div>
 								)}
 
 								{contract.finish_date && (
 									<div>
-							<label className="block text-sm font-medium text-gray-600">
-								Data zakończenia
-							</label>
-							<p>
-								{new Date(contract.finish_date).toLocaleDateString("pl-PL")}
+										<span className="text-sm font-medium text-gray-500 block mb-1">
+											Finish Date
+										</span>
+										<p className="text-gray-900 font-medium">
+											{new Date(contract.finish_date).toLocaleDateString(
+												"en-US"
+											)}
 										</p>
 									</div>
 								)}
 							</div>
+						</CardContent>
+					</Card>
 				</div>
 
-			{/* Linked Projects */}
-			<div className="bg-white border border-gray-200 rounded-lg p-6">
-				<div className="flex justify-between items-center mb-4">
-					<h2 className="text-xl font-semibold">
-						Projekty w ramach umowy ({projects.length})
-					</h2>
-					<Link
-						href={`/projects/new?contract_id=${contractId}`}
-						className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
+				{/* Contract Summary Sidebar */}
+				<div>
+					<Card>
+						<CardHeader>
+							<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<span className="text-sm font-medium text-gray-500 block mb-2">
+									Projects Count
+								</span>
+								<Badge variant="primary" size="lg">
+									{projects.length} Projects
+								</Badge>
+							</div>
+
+							{contract.finish_date && (
+								<div className="border-t pt-4">
+									<span className="text-sm font-medium text-gray-500 block mb-2">
+										Contract Status
+									</span>
+									<Badge
+										variant={
+											new Date(contract.finish_date) > new Date()
+												? "success"
+												: "warning"
+										}
+										size="md"
 									>
-						➕ Dodaj projekt
+										{new Date(contract.finish_date) > new Date()
+											? "Active"
+											: "Expired"}
+									</Badge>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+
+			{/* Associated Projects */}
+			<Card>
+				<CardHeader>
+					<div className="flex justify-between items-center">
+						<h2 className="text-xl font-semibold text-gray-900">
+							Associated Projects ({projects.length})
+						</h2>
+						<Link href={`/projects/new?contract_id=${contractId}`}>
+							<Button variant="outline" size="sm">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Add Project
+							</Button>
 						</Link>
 					</div>
-
+				</CardHeader>
+				<CardContent>
 					{projects.length === 0 ? (
-					<p className="text-gray-500 text-center py-8">
-						Brak projektów przypisanych do tej umowy.
+						<div className="text-center py-12">
+							<div className="text-gray-400 mb-4">
+								<svg
+									className="w-16 h-16 mx-auto"
+									fill="currentColor"
+									viewBox="0 0 20 20"
+								>
+									<path
+										fillRule="evenodd"
+										d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</div>
+							<h3 className="text-lg font-medium text-gray-900 mb-2">
+								No projects yet
+							</h3>
+							<p className="text-gray-500 mb-6">
+								Get started by creating your first project for this contract
 							</p>
+							<Link href={`/projects/new?contract_id=${contractId}`}>
+								<Button variant="primary">Create First Project</Button>
+							</Link>
+						</div>
 					) : (
-					<div className="space-y-3">
+						<div className="grid grid-cols-1 gap-4">
 							{projects.map((project) => (
 								<div
 									key={project.project_id}
-								className="border border-gray-100 rounded p-4 hover:bg-gray-50"
+									className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
 								>
 									<div className="flex justify-between items-start">
-									<div>
-										<h3 className="font-medium">{project.project_name}</h3>
-										<p className="text-sm text-gray-600">
+										<div className="flex-1">
+											<div className="flex items-center gap-3 mb-2">
+												<h3 className="font-medium text-gray-900">
+													{project.project_name}
+												</h3>
+												<Badge variant="secondary" size="sm">
 													{project.project_number}
-										</p>
+												</Badge>
+											</div>
+
+											<div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
 												{project.address && (
-											<p className="text-sm text-gray-500">
-												📍 {project.address}
-											</p>
+													<div className="flex items-center">
+														<svg
+															className="w-4 h-4 mr-1"
+															fill="currentColor"
+															viewBox="0 0 20 20"
+														>
+															<path
+																fillRule="evenodd"
+																d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+																clipRule="evenodd"
+															/>
+														</svg>
+														{project.address}
+													</div>
 												)}
 												{project.finish_date && (
-											<p className="text-sm text-gray-500">
-												⏰ Termin:{" "}
+													<div className="flex items-center">
+														<svg
+															className="w-4 h-4 mr-1"
+															fill="currentColor"
+															viewBox="0 0 20 20"
+														>
+															<path
+																fillRule="evenodd"
+																d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+																clipRule="evenodd"
+															/>
+														</svg>
 														{new Date(project.finish_date).toLocaleDateString(
-													"pl-PL"
-												)}
-											</p>
+															"en-US"
 														)}
 													</div>
-									<Link
-										href={`/projects/${project.project_id}`}
-										className="text-blue-600 hover:underline text-sm"
+												)}
+												<div className="flex items-center">
+													<Badge
+														variant={
+															project.project_status === "fulfilled"
+																? "success"
+																: project.project_status === "registered"
+																? "secondary"
+																: "primary"
+														}
+														size="sm"
 													>
-										Szczegóły →
+														{project.project_status === "registered"
+															? "Registered"
+															: project.project_status === "in_progress_design"
+															? "In Progress (Design)"
+															: project.project_status ===
+															  "in_progress_construction"
+															? "In Progress (Construction)"
+															: project.project_status === "fulfilled"
+															? "Completed"
+															: "Unknown"}
+													</Badge>
+												</div>
+											</div>
+										</div>
+										<Link href={`/projects/${project.project_id}`}>
+											<Button variant="outline" size="sm">
+												View Details
+											</Button>
 										</Link>
 									</div>
 								</div>
 							))}
 						</div>
 					)}
-			</div>
-		</div>
+				</CardContent>
+			</Card>
+		</PageContainer>
 	);
 }

src/app/contracts/new/page.js

@@ -1,10 +1,39 @@
 import ContractForm from "@/components/ContractForm";
+import PageContainer from "@/components/ui/PageContainer";
+import PageHeader from "@/components/ui/PageHeader";
+import Button from "@/components/ui/Button";
+import Link from "next/link";
 
 export default function NewContractPage() {
 	return (
-		<div className="p-4 max-w-2xl mx-auto">
-			<h1 className="text-xl font-bold mb-4">Nowa umowa</h1>
+		<PageContainer>
+			<PageHeader
+				title="Create New Contract"
+				description="Add a new contract to your portfolio"
+				action={
+					<Link href="/contracts">
+						<Button variant="outline" size="sm">
+							<svg
+								className="w-4 h-4 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M15 19l-7-7 7-7"
+								/>
+							</svg>
+							Back to Contracts
+						</Button>
+					</Link>
+				}
+			/>
+			<div className="max-w-2xl">
 				<ContractForm />
 			</div>
+		</PageContainer>
 	);
 }

src/app/projects/[id]/edit/page.js

@@ -1,4 +1,8 @@
 import ProjectForm from "@/components/ProjectForm";
+import PageContainer from "@/components/ui/PageContainer";
+import PageHeader from "@/components/ui/PageHeader";
+import Button from "@/components/ui/Button";
+import Link from "next/link";
 
 export default async function EditProjectPage({ params }) {
 	const { id } = await params;
@@ -7,10 +11,68 @@ export default async function EditProjectPage({ params }) {
 	});
 	const project = await res.json();
 
+	if (!project) {
 		return (
-		<div className="p-4 max-w-2xl mx-auto">
-			<h1 className="text-xl font-bold mb-4">Edit Project</h1>
+			<PageContainer>
+				<div className="text-center py-12">
+					<p className="text-red-600 text-lg mb-4">Project not found.</p>
+					<Link href="/projects">
+						<Button variant="primary">Back to Projects</Button>
+					</Link>
+				</div>
+			</PageContainer>
+		);
+	}
+
+	return (
+		<PageContainer>
+			<PageHeader
+				title="Edit Project"
+				description={`Editing: ${project.project_name || "Untitled Project"}`}
+				action={
+					<div className="flex items-center gap-3">
+						<Link href={`/projects/${id}`}>
+							<Button variant="outline" size="sm">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Cancel
+							</Button>
+						</Link>
+						<Link href="/projects">
+							<Button variant="outline" size="sm">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M15 19l-7-7 7-7"
+									/>
+								</svg>
+								Back to Projects
+							</Button>
+						</Link>
+					</div>
+				}
+			/>
+			<div className="max-w-2xl">
 				<ProjectForm initialData={project} />
 			</div>
+		</PageContainer>
 	);
 }

src/app/projects/[id]/page.js

@@ -50,13 +50,16 @@ export default async function ProjectViewPage({ params }) {
 				description={`${project.city} • ${project.address}`}
 				action={
 					<div className="flex items-center gap-3">
+						{daysRemaining !== null && (
 							<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
 								{daysRemaining === 0
 									? "Due Today"
 									: daysRemaining > 0
 									? `${daysRemaining} days left`
 									: `${Math.abs(daysRemaining)} days overdue`}
-						</Badge>						<Link href="/projects">
+							</Badge>
+						)}
+						<Link href="/projects">
 							<Button variant="outline" size="sm">
 								<svg
 									className="w-4 h-4 mr-2"
@@ -75,113 +78,157 @@ export default async function ProjectViewPage({ params }) {
 							</Button>
 						</Link>
 						<Link href={`/projects/${id}/edit`}>
-							<Button variant="secondary">Edit Project</Button>
+							<Button variant="primary">
+								<svg
+									className="w-4 h-4 mr-2"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+									/>
+								</svg>
+								Edit Project
+							</Button>
 						</Link>
 					</div>
 				}
-			/>
-
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+			/>{" "}
+			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+				{/* Main Project Information */}
+				<div className="lg:col-span-2 space-y-6">
 					<Card>
 						<CardHeader>
+							<div className="flex items-center justify-between">
 								<h2 className="text-xl font-semibold text-gray-900">
 									Project Information
 								</h2>
+								<Badge
+									variant={
+										project.project_type === "design"
+											? "secondary"
+											: project.project_type === "construction"
+											? "primary"
+											: project.project_type === "design+construction"
+											? "success"
+											: "default"
+									}
+									size="sm"
+								>
+									{project.project_type === "design"
+										? "Design (P)"
+										: project.project_type === "construction"
+										? "Construction (R)"
+										: project.project_type === "design+construction"
+										? "Design + Construction (P+R)"
+										: "Unknown"}
+								</Badge>
+							</div>
 						</CardHeader>
-					<CardContent className="space-y-4">
+						<CardContent className="space-y-6">
 							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 								<div>
-								<span className="text-sm font-medium text-gray-500">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
 										Location
 									</span>
-								<p className="text-gray-900">{project.city}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">
-									Address
-								</span>
-								<p className="text-gray-900">{project.address}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">Plot</span>
-								<p className="text-gray-900">{project.plot}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">
-									District
-								</span>
-								<p className="text-gray-900">{project.district}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">Unit</span>
-								<p className="text-gray-900">{project.unit}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">
-									Deadline
-								</span>
-								<p className="text-gray-900">{project.finish_date}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">WP</span>
-								<p className="text-gray-900">{project.wp}</p>
-							</div>
-							<div>
-								<span className="text-sm font-medium text-gray-500">
-									Investment Number
-								</span>
-								<p className="text-gray-900">{project.investment_number}</p>
-							</div>
-						</div>						<div>
-							<span className="text-sm font-medium text-gray-500">Contact</span>
-							<p className="text-gray-900">{project.contact}</p>
-						</div>						{project.coordinates && (
-							<div>
-								<span className="text-sm font-medium text-gray-500">Coordinates</span>
-								<p className="text-gray-900">{project.coordinates}</p>
-							</div>
-						)}
-						{project.notes && (
-							<div>
-								<span className="text-sm font-medium text-gray-500">Notes</span>
-								<p className="text-gray-900">{project.notes}</p>
-							</div>
-						)}
-						<div>
-							<span className="text-sm font-medium text-gray-500">
-								Typ projektu
-							</span>
-							<p className="text-gray-900">
-								{project.project_type === "design"
-									? "Projektowanie"
-									: project.project_type === "construction"
-									? "Realizacja"
-									: project.project_type === "design+construction"
-									? "Projektowanie + Realizacja"
-									: "-"}
+									<p className="text-gray-900 font-medium">
+										{project.city || "N/A"}
 									</p>
 								</div>
 								<div>
-							<span className="text-sm font-medium text-gray-500">
-								Status projektu
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Address
 									</span>
-							<div className="flex items-center gap-2 mt-1">
-								<span className="text-gray-900">
-									{project.project_status === "registered"
-										? "Zarejestrowany"
-										: project.project_status === "in_progress_design"
-										? "W realizacji (projektowanie)"
-										: project.project_status === "in_progress_construction"
-										? "W realizacji (realizacja)"
-										: project.project_status === "fulfilled"
-										? "Zakończony"
-										: "-"}
+									<p className="text-gray-900 font-medium">
+										{project.address || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Plot
 									</span>
-								<ProjectStatusDropdown project={project} />
+									<p className="text-gray-900 font-medium">
+										{project.plot || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										District
+									</span>
+									<p className="text-gray-900 font-medium">
+										{project.district || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Unit
+									</span>
+									<p className="text-gray-900 font-medium">
+										{project.unit || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Deadline
+									</span>
+									<p className="text-gray-900 font-medium">
+										{project.finish_date || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										WP
+									</span>
+									<p className="text-gray-900 font-medium">
+										{project.wp || "N/A"}
+									</p>
+								</div>
+								<div>
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Investment Number
+									</span>
+									<p className="text-gray-900 font-medium">
+										{project.investment_number || "N/A"}
+									</p>
 								</div>
 							</div>
+
+							{project.contact && (
+								<div className="border-t pt-4">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Contact
+									</span>
+									<p className="text-gray-900 font-medium">{project.contact}</p>
+								</div>
+							)}
+
+							{project.coordinates && (
+								<div className="border-t pt-4">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Coordinates
+									</span>
+									<p className="text-gray-900 font-medium font-mono text-sm">
+										{project.coordinates}
+									</p>
+								</div>
+							)}
+
+							{project.notes && (
+								<div className="border-t pt-4">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
+										Notes
+									</span>
+									<p className="text-gray-900">{project.notes}</p>
+								</div>
+							)}
 						</CardContent>
 					</Card>
+
+					{/* Contract Details */}
 					<Card>
 						<CardHeader>
 							<h2 className="text-xl font-semibold text-gray-900">
@@ -189,33 +236,165 @@ export default async function ProjectViewPage({ params }) {
 							</h2>
 						</CardHeader>
 						<CardContent className="space-y-4">
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 								<div>
-							<span className="text-sm font-medium text-gray-500">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
 										Contract Number
 									</span>
-							<p className="text-gray-900">{project.contract_number}</p>
+									<p className="text-gray-900 font-medium">
+										{project.contract_number || "N/A"}
+									</p>
 								</div>
 								<div>
-							<span className="text-sm font-medium text-gray-500">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
 										Contract Name
 									</span>
-							<p className="text-gray-900">{project.contract_name}</p>
+									<p className="text-gray-900 font-medium">
+										{project.contract_name || "N/A"}
+									</p>
 								</div>
 								<div>
-							<span className="text-sm font-medium text-gray-500">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
 										Customer
 									</span>
-							<p className="text-gray-900">{project.customer}</p>
+									<p className="text-gray-900 font-medium">
+										{project.customer || "N/A"}
+									</p>
 								</div>
 								<div>
-							<span className="text-sm font-medium text-gray-500">
+									<span className="text-sm font-medium text-gray-500 block mb-1">
 										Investor
 									</span>
-							<p className="text-gray-900">{project.investor}</p>
+									<p className="text-gray-900 font-medium">
+										{project.investor || "N/A"}
+									</p>
 								</div>
-					</CardContent>				</Card>{" "}
-			</div>			{/* Project Location Map */}
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+
+				{/* Status Sidebar */}
+				<div className="space-y-6">
+					<Card>
+						<CardHeader>
+							<h2 className="text-lg font-semibold text-gray-900">
+								Project Status
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<span className="text-sm font-medium text-gray-500 block mb-2">
+									Current Status
+								</span>
+								<div className="flex items-center gap-2">
+									<Badge
+										variant={
+											project.project_status === "fulfilled"
+												? "success"
+												: project.project_status === "registered"
+												? "secondary"
+												: "primary"
+										}
+										size="md"
+									>
+										{project.project_status === "registered"
+											? "Registered"
+											: project.project_status === "in_progress_design"
+											? "In Progress (Design)"
+											: project.project_status === "in_progress_construction"
+											? "In Progress (Construction)"
+											: project.project_status === "fulfilled"
+											? "Completed"
+											: "Unknown"}
+									</Badge>
+								</div>
+								<div className="mt-3">
+									<ProjectStatusDropdown project={project} />
+								</div>
+							</div>
+
+							{daysRemaining !== null && (
+								<div className="border-t pt-4">
+									<span className="text-sm font-medium text-gray-500 block mb-2">
+										Timeline
+									</span>
+									<div className="text-center">
+										<Badge
+											variant={getDeadlineVariant(daysRemaining)}
+											size="lg"
+										>
+											{daysRemaining === 0
+												? "Due Today"
+												: daysRemaining > 0
+												? `${daysRemaining} days remaining`
+												: `${Math.abs(daysRemaining)} days overdue`}
+										</Badge>
+									</div>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					{/* Quick Actions */}
+					<Card>
+						<CardHeader>
+							<h2 className="text-lg font-semibold text-gray-900">
+								Quick Actions
+							</h2>
+						</CardHeader>
+						<CardContent className="space-y-3">
+							<Link href={`/projects/${id}/edit`} className="block">
+								<Button
+									variant="outline"
+									size="sm"
+									className="w-full justify-start"
+								>
+									<svg
+										className="w-4 h-4 mr-2"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+										/>
+									</svg>
+									Edit Project
+								</Button>
+							</Link>
+							<Link href="/projects" className="block">
+								<Button
+									variant="outline"
+									size="sm"
+									className="w-full justify-start"
+								>
+									<svg
+										className="w-4 h-4 mr-2"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M15 19l-7-7 7-7"
+										/>
+									</svg>
+									Back to Projects
+								</Button>
+							</Link>
+						</CardContent>
+					</Card>
+				</div>
+			</div>{" "}
+			{/* Project Location Map */}
 			{project.coordinates && (
+				<div className="mb-8">
 					<Card>
 						<CardHeader>
 							<h2 className="text-xl font-semibold text-gray-900">
@@ -232,10 +411,13 @@ export default async function ProjectViewPage({ params }) {
 							/>
 						</CardContent>
 					</Card>
+				</div>
 			)}
-
+			{/* Project Tasks Section */}
+			<div className="mb-8">
 				<ProjectTasksSection projectId={id} />
-
+			</div>
+			{/* Notes Section */}
 			<Card>
 				<CardHeader>
 					<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
@@ -245,8 +427,8 @@ export default async function ProjectViewPage({ params }) {
 						<NoteForm projectId={id} />
 					</div>
 					{notes.length === 0 ? (
-						<div className="text-center py-8">
-							<div className="text-gray-400 mb-2">
+						<div className="text-center py-12">
+							<div className="text-gray-400 mb-4">
 								<svg
 									className="w-12 h-12 mx-auto"
 									fill="currentColor"
@@ -258,17 +440,26 @@ export default async function ProjectViewPage({ params }) {
 									/>
 								</svg>
 							</div>
-							<p className="text-gray-500">No notes yet.</p>
+							<h3 className="text-lg font-medium text-gray-900 mb-2">
+								No notes yet
+							</h3>
+							<p className="text-gray-500">
+								Add your first note using the form above.
+							</p>
 						</div>
 					) : (
-						<div className="space-y-3">
+						<div className="space-y-4">
 							{notes.map((n) => (
 								<div
 									key={n.note_id}
-									className="border border-gray-200 p-4 rounded-lg bg-gray-50"
+									className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
 								>
-									<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
-									<p className="text-gray-900">{n.note}</p>
+									<div className="flex items-center justify-between mb-2">
+										<span className="text-sm font-medium text-gray-500">
+											{n.note_date}
+										</span>
+									</div>
+									<p className="text-gray-900 leading-relaxed">{n.note}</p>
 								</div>
 							))}
 						</div>

src/app/projects/new/page.js

@@ -1,10 +1,39 @@
 import ProjectForm from "@/components/ProjectForm";
+import PageContainer from "@/components/ui/PageContainer";
+import PageHeader from "@/components/ui/PageHeader";
+import Button from "@/components/ui/Button";
+import Link from "next/link";
 
 export default function NewProjectPage() {
 	return (
-		<div className="p-4 max-w-2xl mx-auto">
-			<h1 className="text-xl font-bold mb-4">New Project</h1>
+		<PageContainer>
+			<PageHeader
+				title="Create New Project"
+				description="Add a new project to your portfolio"
+				action={
+					<Link href="/projects">
+						<Button variant="outline" size="sm">
+							<svg
+								className="w-4 h-4 mr-2"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M15 19l-7-7 7-7"
+								/>
+							</svg>
+							Back to Projects
+						</Button>
+					</Link>
+				}
+			/>
+			<div className="max-w-2xl">
 				<ProjectForm />
 			</div>
+		</PageContainer>
 	);
 }

src/app/projects/page.js

@@ -145,83 +145,128 @@ export default function ProjectListPage() {
 				</Card>
 			) : (
 				<div className="bg-white rounded-lg shadow overflow-hidden">
-					{/* Header Row */}
-					<div className="grid grid-cols-12 gap-4 p-4 bg-gray-100 border-b font-semibold text-sm text-gray-700">
-						{" "}
-						<div className="col-span-1">Number</div>
-						<div className="col-span-3">Project Name</div>
-						<div className="col-span-2">WP</div>
-						<div className="col-span-1">City</div>
-						<div className="col-span-2">Address</div>
-						<div className="col-span-1">Plot</div>{" "}
-						<div className="col-span-1">Finish Date</div>
-						<div className="col-span-1">Actions</div>
-					</div>{" "}
-					{/* Data Rows */}
+					<table className="w-full table-fixed">
+						<thead>
+							<tr className="bg-gray-100 border-b">
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16">
+									No.
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700">
+									Project Name
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
+									WP
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
+									City
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-32">
+									Address
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
+									Plot
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
+									Finish
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
+									Type
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
+									Status
+								</th>
+								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
+									Actions
+								</th>
+							</tr>
+						</thead>{" "}
+						<tbody>
 							{filteredProjects.map((project, index) => (
-						<div
+								<tr
 									key={project.project_id}
-							className={`grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors items-center ${
+									className={`border-b hover:bg-gray-50 transition-colors ${
 										index % 2 === 0 ? "bg-white" : "bg-gray-25"
 									}`}
 								>
-							<div className="col-span-1">
-								<Badge variant="primary" size="sm">
+									<td className="px-2 py-3">
+										<Badge variant="primary" size="sm" className="text-xs">
 											{project.project_number}
 										</Badge>
-							</div>{" "}
-							<div className="col-span-3">
+									</td>
+									<td className="px-2 py-3">
 										<Link
 											href={`/projects/${project.project_id}`}
-									className="font-medium text-blue-600 hover:text-blue-800 transition-colors truncate block"
+											className="font-medium text-blue-600 hover:text-blue-800 transition-colors text-sm truncate block"
+											title={project.project_name}
 										>
 											{project.project_name}
 										</Link>
-							</div>
-							<div className="col-span-2 text-sm text-gray-600 truncate">
+									</td>
+									<td
+										className="px-2 py-3 text-xs text-gray-600 truncate"
+										title={project.wp}
+									>
 										{project.wp || "N/A"}
-							</div>
-							<div className="col-span-1 text-sm text-gray-600 truncate">
+									</td>
+									<td
+										className="px-2 py-3 text-xs text-gray-600 truncate"
+										title={project.city}
+									>
 										{project.city || "N/A"}
-							</div>
-							<div className="col-span-2 text-sm text-gray-600 truncate">
+									</td>
+									<td
+										className="px-2 py-3 text-xs text-gray-600 truncate"
+										title={project.address}
+									>
 										{project.address || "N/A"}
-							</div>
-							<div className="col-span-1 text-sm text-gray-600 truncate">
+									</td>
+									<td
+										className="px-2 py-3 text-xs text-gray-600 truncate"
+										title={project.plot}
+									>
 										{project.plot || "N/A"}
-							</div>{" "}
-							<div className="col-span-1 text-sm text-gray-600 truncate">
+									</td>
+									<td
+										className="px-2 py-3 text-xs text-gray-600 truncate"
+										title={project.finish_date}
+									>
 										{project.finish_date || "N/A"}
-							</div>
-							<div className="col-span-1 text-sm text-gray-600 truncate">
+									</td>
+									<td className="px-2 py-3 text-xs text-gray-600 text-center font-semibold">
 										{project.project_type === "design"
-									? "Projektowanie"
+											? "P"
 											: project.project_type === "construction"
-									? "Realizacja"
+											? "R"
 											: project.project_type === "design+construction"
-									? "Projektowanie + Realizacja"
+											? "P+R"
 											: "-"}
-							</div>
-							<div className="col-span-1 text-sm text-gray-600 truncate">
+									</td>
+									<td className="px-2 py-3 text-xs text-gray-600 truncate">
 										{project.project_status === "registered"
-									? "Zarejestrowany"
+											? "Zarejestr."
 											: project.project_status === "in_progress_design"
-									? "W realizacji (projektowanie)"
+											? "W real. (P)"
 											: project.project_status === "in_progress_construction"
-									? "W realizacji (realizacja)"
+											? "W real. (R)"
 											: project.project_status === "fulfilled"
 											? "Zakończony"
 											: "-"}
-							</div>
-							<div className="col-span-1">
+									</td>
+									<td className="px-2 py-3">
 										<Link href={`/projects/${project.project_id}`}>
-									<Button variant="outline" size="sm">
+											<Button
+												variant="outline"
+												size="sm"
+												className="text-xs px-2 py-1"
+											>
 												View
 											</Button>
 										</Link>
-							</div>{" "}
-						</div>
+									</td>
+								</tr>
 							))}
+						</tbody>
+					</table>
 				</div>
 			)}
 		</PageContainer>

src/components/ContractForm.js

@@ -2,6 +2,9 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
 
 export default function ContractForm() {
 	const [form, setForm] = useState({
@@ -14,6 +17,7 @@ export default function ContractForm() {
 		finish_date: "",
 	});
 
+	const [loading, setLoading] = useState(false);
 	const router = useRouter();
 
 	function handleChange(e) {
@@ -22,7 +26,9 @@ export default function ContractForm() {
 
 	async function handleSubmit(e) {
 		e.preventDefault();
+		setLoading(true);
 
+		try {
 			console.log("Submitting form:", form);
 
 			const res = await fetch("/api/contracts", {
@@ -32,43 +38,180 @@ export default function ContractForm() {
 			});
 
 			if (res.ok) {
-			router.push("/projects"); // or /contracts if you plan a listing
+				const contract = await res.json();
+				router.push(`/contracts/${contract.contract_id}`);
 			} else {
 				alert(
-				"Wystąpił błąd podczas dodawania umowy. Sprawdź dane i spróbuj ponownie."
+					"Failed to create contract. Please check the data and try again."
 				);
 			}
+		} catch (error) {
+			console.error("Error creating contract:", error);
+			alert("Failed to create contract. Please try again.");
+		} finally {
+			setLoading(false);
+		}
 	}
 
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
-			{[
-				["contract_number", "Numer Umowy"],
-				["contract_name", "Nazwa Umowy"],
-				["customer_contract_number", "Numer Umowy (Klienta)"],
-				["customer", "Zleceniodawca"],
-				["investor", "Inwestor"],
-				["date_signed", "Data zawarcia"],
-				["finish_date", "Data zakończenia"],
-			].map(([name, label]) => (
-				<div key={name}>
-					<label className="block font-medium">{label}</label>
-					<input
-						type={name.includes("date") ? "date" : "text"}
-						name={name}
-						value={form[name] || ""}
+		<Card>
+			<CardHeader>
+				<h2 className="text-xl font-semibold text-gray-900">
+					Contract Details
+				</h2>
+			</CardHeader>
+			<CardContent>
+				<form onSubmit={handleSubmit} className="space-y-6">
+					{/* Basic Information Section */}
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Contract Number <span className="text-red-500">*</span>
+							</label>
+							<Input
+								type="text"
+								name="contract_number"
+								value={form.contract_number || ""}
 								onChange={handleChange}
-						className="border p-2 w-full"
+								placeholder="Enter contract number"
+								required
 							/>
 						</div>
-			))}
 
-			<button
-				type="submit"
-				className="bg-blue-600 text-white px-4 py-2 rounded"
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Contract Name
+							</label>
+							<Input
+								type="text"
+								name="contract_name"
+								value={form.contract_name || ""}
+								onChange={handleChange}
+								placeholder="Enter contract name"
+							/>
+						</div>
+
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Customer Contract Number
+							</label>
+							<Input
+								type="text"
+								name="customer_contract_number"
+								value={form.customer_contract_number || ""}
+								onChange={handleChange}
+								placeholder="Enter customer contract number"
+							/>
+						</div>
+
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Customer
+							</label>
+							<Input
+								type="text"
+								name="customer"
+								value={form.customer || ""}
+								onChange={handleChange}
+								placeholder="Enter customer name"
+							/>
+						</div>
+
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Investor
+							</label>
+							<Input
+								type="text"
+								name="investor"
+								value={form.investor || ""}
+								onChange={handleChange}
+								placeholder="Enter investor name"
+							/>
+						</div>
+
+						<div>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Date Signed
+							</label>
+							<Input
+								type="date"
+								name="date_signed"
+								value={form.date_signed || ""}
+								onChange={handleChange}
+							/>
+						</div>
+
+						<div className="md:col-span-2">
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Finish Date
+							</label>
+							<Input
+								type="date"
+								name="finish_date"
+								value={form.finish_date || ""}
+								onChange={handleChange}
+							/>
+						</div>
+					</div>
+
+					{/* Form Actions */}
+					<div className="border-t pt-6 flex items-center justify-end gap-4">
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => router.back()}
+							disabled={loading}
 						>
-				Dodaj umowę
-			</button>
+							Cancel
+						</Button>
+						<Button type="submit" variant="primary" disabled={loading}>
+							{loading ? (
+								<>
+									<svg
+										className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<circle
+											className="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											strokeWidth="4"
+										></circle>
+										<path
+											className="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
+									</svg>
+									Creating...
+								</>
+							) : (
+								<>
+									<svg
+										className="w-4 h-4 mr-2"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M12 4v16m8-8H4"
+										/>
+									</svg>
+									Create Contract
+								</>
+							)}
+						</Button>
+					</div>
 				</form>
+			</CardContent>
+		</Card>
 	);
 }

src/components/ProjectForm.js

@@ -2,6 +2,9 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
 
 export default function ProjectForm({ initialData = null }) {
 	const [form, setForm] = useState({
@@ -15,7 +18,8 @@ export default function ProjectForm({ initialData = null }) {
 		investment_number: "",
 		finish_date: "",
 		wp: "",
-		contact: "",		notes: "",
+		contact: "",
+		notes: "",
 		coordinates: "",
 		project_type: initialData?.project_type || "design",
 		// project_status is not included in the form for creation or editing
@@ -23,6 +27,7 @@ export default function ProjectForm({ initialData = null }) {
 	});
 
 	const [contracts, setContracts] = useState([]);
+	const [loading, setLoading] = useState(false);
 	const router = useRouter();
 	const isEdit = !!initialData;
 
@@ -38,7 +43,9 @@ export default function ProjectForm({ initialData = null }) {
 
 	async function handleSubmit(e) {
 		e.preventDefault();
+		setLoading(true);
 
+		try {
 			const res = await fetch(
 				isEdit ? `/api/projects/${initialData.project_id}` : "/api/projects",
 				{
@@ -49,83 +56,327 @@ export default function ProjectForm({ initialData = null }) {
 			);
 
 			if (res.ok) {
+				const project = await res.json();
+				if (isEdit) {
+					router.push(`/projects/${project.project_id}`);
+				} else {
 					router.push("/projects");
+				}
 			} else {
 				alert("Failed to save project.");
 			}
+		} catch (error) {
+			console.error("Error saving project:", error);
+			alert("Failed to save project.");
+		} finally {
+			setLoading(false);
+		}
 	}
-
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
-			{/* Contract Dropdown */}
+		<Card>
+			<CardHeader>
+				<h2 className="text-xl font-semibold text-gray-900">
+					{isEdit ? "Edit Project Details" : "Project Details"}
+				</h2>
+			</CardHeader>
+			<CardContent>
+				<form onSubmit={handleSubmit} className="space-y-6">
+					{/* Contract and Project Type Section */}
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 						<div>
-				<label className="block font-medium">Umowa</label>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Contract <span className="text-red-500">*</span>
+							</label>
 							<select
 								name="contract_id"
 								value={form.contract_id || ""}
 								onChange={handleChange}
-					className="border p-2 w-full"
+								className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
 								required
 							>
-					<option value="">Wybierz umowę</option>
+								<option value="">Select Contract</option>
 								{contracts.map((contract) => (
-						<option key={contract.contract_id} value={contract.contract_id}>
+									<option
+										key={contract.contract_id}
+										value={contract.contract_id}
+									>
 										{contract.contract_number} – {contract.contract_name}
 									</option>
 								))}
 							</select>
 						</div>
 
-			{/* Project Type Dropdown */}
 						<div>
-				<label className="block font-medium">Typ projektu</label>
+							<label className="block text-sm font-medium text-gray-700 mb-2">
+								Project Type <span className="text-red-500">*</span>
+							</label>
 							<select
 								name="project_type"
 								value={form.project_type}
 								onChange={handleChange}
-					className="border p-2 w-full"
+								className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
 								required
 							>
-					<option value="design">Projektowanie</option>
-					<option value="construction">Realizacja</option>
+								<option value="design">Design (Projektowanie)</option>
+								<option value="construction">Construction (Realizacja)</option>
 								<option value="design+construction">
-						Projektowanie + Realizacja
+									Design + Construction (Projektowanie + Realizacja)
 								</option>
 							</select>
 						</div>
+					</div>
 
-			{/* Other fields */}			{[
-				["project_name", "Nazwa projektu"],
-				["address", "Lokalizacja"],
-				["plot", "Działka"],
-				["district", "Obręb ewidencyjny"],
-				["unit", "Jednostka ewidencyjna"],
-				["city", "Miejscowość"],
-				["investment_number", "Numer inwestycjny"],
-				["finish_date", "Termin realizacji"],
-				["wp", "WP"],				["contact", "Dane kontaktowe"],
-				["coordinates", "Coordinates"],
-				["notes", "Notatki"],
-			].map(([name, label]) => (
-				<div key={name}>
-					<label className="block font-medium">{label}</label>
-					<input
-						type={name === "finish_date" ? "date" : "text"}
-						name={name}
-						value={form[name] || ""}
+					{/* Basic Information Section */}
+					<div className="border-t pt-6">
+						<h3 className="text-lg font-medium text-gray-900 mb-4">
+							Basic Information
+						</h3>
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+							<div className="md:col-span-2">
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Project Name <span className="text-red-500">*</span>
+								</label>
+								<Input
+									type="text"
+									name="project_name"
+									value={form.project_name || ""}
 									onChange={handleChange}
-						className="border p-2 w-full"
-						placeholder={name === "coordinates" ? "e.g., 49.622958,20.629562" : ""}
+									placeholder="Enter project name"
+									required
 								/>
 							</div>
-			))}
 
-			<button
-				type="submit"
-				className="bg-blue-600 text-white px-4 py-2 rounded"
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									City
+								</label>
+								<Input
+									type="text"
+									name="city"
+									value={form.city || ""}
+									onChange={handleChange}
+									placeholder="Enter city"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Address
+								</label>
+								<Input
+									type="text"
+									name="address"
+									value={form.address || ""}
+									onChange={handleChange}
+									placeholder="Enter address"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Plot
+								</label>
+								<Input
+									type="text"
+									name="plot"
+									value={form.plot || ""}
+									onChange={handleChange}
+									placeholder="Enter plot number"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									District
+								</label>
+								<Input
+									type="text"
+									name="district"
+									value={form.district || ""}
+									onChange={handleChange}
+									placeholder="Enter district"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Unit
+								</label>
+								<Input
+									type="text"
+									name="unit"
+									value={form.unit || ""}
+									onChange={handleChange}
+									placeholder="Enter unit"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Finish Date
+								</label>
+								<Input
+									type="date"
+									name="finish_date"
+									value={form.finish_date || ""}
+									onChange={handleChange}
+								/>
+							</div>
+						</div>
+					</div>
+
+					{/* Additional Information Section */}
+					<div className="border-t pt-6">
+						<h3 className="text-lg font-medium text-gray-900 mb-4">
+							Additional Information
+						</h3>
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Investment Number
+								</label>
+								<Input
+									type="text"
+									name="investment_number"
+									value={form.investment_number || ""}
+									onChange={handleChange}
+									placeholder="Enter investment number"
+								/>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									WP
+								</label>
+								<Input
+									type="text"
+									name="wp"
+									value={form.wp || ""}
+									onChange={handleChange}
+									placeholder="Enter WP"
+								/>
+							</div>
+
+							<div className="md:col-span-2">
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Contact Information
+								</label>
+								<Input
+									type="text"
+									name="contact"
+									value={form.contact || ""}
+									onChange={handleChange}
+									placeholder="Enter contact details"
+								/>
+							</div>
+
+							<div className="md:col-span-2">
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Coordinates
+								</label>
+								<Input
+									type="text"
+									name="coordinates"
+									value={form.coordinates || ""}
+									onChange={handleChange}
+									placeholder="e.g., 49.622958,20.629562"
+								/>
+							</div>
+
+							<div className="md:col-span-2">
+								<label className="block text-sm font-medium text-gray-700 mb-2">
+									Notes
+								</label>
+								<textarea
+									name="notes"
+									value={form.notes || ""}
+									onChange={handleChange}
+									rows={4}
+									className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+									placeholder="Enter any additional notes"
+								/>
+							</div>
+						</div>
+					</div>
+
+					{/* Form Actions */}
+					<div className="border-t pt-6 flex items-center justify-end gap-4">
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => router.back()}
+							disabled={loading}
 						>
-				{isEdit ? "Update" : "Create"} Project
-			</button>
+							Cancel
+						</Button>
+						<Button type="submit" variant="primary" disabled={loading}>
+							{loading ? (
+								<>
+									<svg
+										className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<circle
+											className="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											strokeWidth="4"
+										></circle>
+										<path
+											className="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
+									</svg>
+									{isEdit ? "Updating..." : "Creating..."}
+								</>
+							) : (
+								<>
+									{isEdit ? (
+										<>
+											<svg
+												className="w-4 h-4 mr-2"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M5 13l4 4L19 7"
+												/>
+											</svg>
+											Update Project
+										</>
+									) : (
+										<>
+											<svg
+												className="w-4 h-4 mr-2"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 4v16m8-8H4"
+												/>
+											</svg>
+											Create Project
+										</>
+									)}
+								</>
+							)}
+						</Button>
+					</div>
 				</form>
+			</CardContent>
+		</Card>
 	);
 }