Index: src/app/applications/page.tsx
===================================================================
--- src/app/applications/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/applications/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,251 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faPenToSquare, 
+  faChevronDown,
+  faCalendarAlt,
+  faFileText,
+  faMoneyBillWave,
+  faUser,
+  faInfoCircle,
+  faCheckCircle,
+  faTimesCircle
+} from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import applicationsData from '@/data/applications.json';
+
+interface TableCellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TableCell = ({ children, className = "" }: TableCellProps) => (
+  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+    {children}
+  </td>
+);
+
+const CompletedBadge = ({ completed }: { completed: string }) => {
+  if (completed === "Да") {
+    return (
+      <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full">
+        <FontAwesomeIcon icon={faCheckCircle} className="w-4 h-4" />
+      </span>
+    );
+  } else {
+    return (
+      <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full">
+        <FontAwesomeIcon icon={faTimesCircle} className="w-4 h-4" />
+      </span>
+    );
+  }
+};
+
+const FeeBadge = ({ fee }: { fee: string }) => {
+  const feeValue = parseFloat(fee.replace(',', '.'));
+  
+  if (feeValue === 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-md text-xs font-medium">
+        <FontAwesomeIcon icon={faMoneyBillWave} className="w-3 h-3" />
+        {fee}
+      </span>
+    );
+  } else {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-md text-xs font-medium">
+        <FontAwesomeIcon icon={faMoneyBillWave} className="w-3 h-3" />
+        {fee}
+      </span>
+    );
+  }
+};
+
+export default function ApplicationsPage() {
+  const [selectedSession, setSelectedSession] = useState(applicationsData.currentSession.id);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  
+  const currentSessionData = applicationsData.examSessions.find(s => s.id === selectedSession) || applicationsData.currentSession;
+  const { applications } = applicationsData;
+
+  return (
+    <div className="min-h-screen pb-8">
+      {/* Header */}
+      <div className="bg-primary text-white rounded-xl p-8 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="bg-white bg-opacity-20 rounded-full p-4">
+            <FontAwesomeIcon icon={faPenToSquare} className="text-3xl text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Пријави</h1>
+            <p className="text-lg opacity-90">
+              Електронски пријави за испити
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Session Selection */}
+      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            <FontAwesomeIcon icon={faCalendarAlt} className="text-primary" />
+            Избери испитна сесија:
+          </h2>
+          
+          <div className="relative">
+            <button
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className="bg-white border border-gray-300 rounded-lg px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary min-w-80"
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-primary">
+                  {currentSessionData.name}
+                </span>
+                <FontAwesomeIcon 
+                  icon={faChevronDown} 
+                  className={`w-4 h-4 text-gray-400 transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
+                />
+              </div>
+            </button>
+            
+            {isDropdownOpen && (
+              <div className="absolute z-10 right-0 mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-lg">
+                {applicationsData.examSessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => {
+                      setSelectedSession(session.id);
+                      setIsDropdownOpen(false);
+                    }}
+                    className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
+                  >
+                    <div className="font-medium text-gray-900">{session.name}</div>
+                    <div className="text-xs text-gray-500">{session.year} - {session.semester} - {session.session}</div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Applications Section */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="bg-primary text-white px-6 py-4">
+          <h2 className="text-xl font-bold">Пријавени испити</h2>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сериски број</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Код</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Предмет</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Завршена</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Таксени</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Наставник</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Декада</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {applications.map((application) => (
+                <tr key={application.id} className="hover:bg-gray-50 transition-colors">
+                  <TableCell className="font-medium text-gray-900">{application.id}</TableCell>
+                  <TableCell>
+                    <span className="font-mono text-sm text-primary font-medium hover:underline cursor-pointer">
+                      {application.serviceNumber}
+                    </span>
+                  </TableCell>
+                  <TableCell className="font-mono text-sm font-medium">{application.code}</TableCell>
+                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faFileText} className="w-4 h-4 text-primary" />
+                      {application.subject}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <CompletedBadge completed={application.completed} />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <FeeBadge fee={application.fee} />
+                  </TableCell>
+                  <TableCell className="text-gray-600 font-medium">{application.date}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-gray-400" />
+                      <span className="font-medium text-gray-900">{application.instructor}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-center font-medium text-primary">{application.decade}</TableCell>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Important Note */}
+        <div className="bg-blue-50 border-t border-blue-100 p-6">
+          <div className="flex items-start gap-3">
+            <FontAwesomeIcon icon={faInfoCircle} className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
+            <div>
+              <h3 className="font-medium text-blue-900 mb-1">Важна забелешка</h3>
+              <p className="text-sm text-blue-800 leading-relaxed">
+                {applicationsData.note}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Statistics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faFileText} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Пријавени испити</h3>
+              <p className="text-2xl font-bold text-blue-600">
+                {applications.length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-green-100 text-green-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faCheckCircle} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Завршени</h3>
+              <p className="text-2xl font-bold text-green-600">
+                {applications.filter(app => app.completed === "Да").length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faMoneyBillWave} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Вкупна такса</h3>
+              <p className="text-2xl font-bold text-yellow-600">
+                {applications.reduce((sum, app) => sum + parseFloat(app.fee.replace(',', '.')), 0).toFixed(2)}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
Index: src/app/documents/page.tsx
===================================================================
--- src/app/documents/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/documents/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,354 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faFilePdf, 
+  faChevronDown,
+  faDownload,
+  faCheckCircle,
+  faMoneyBillWave,
+  faFileText,
+  faCalendarAlt,
+  faCommentDots,
+  faChevronLeft,
+  faChevronRight,
+  faAngleDoubleLeft,
+  faAngleDoubleRight
+} from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import documentsData from '@/data/documents.json';
+
+interface TableCellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TableCell = ({ children, className = "" }: TableCellProps) => (
+  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+    {children}
+  </td>
+);
+
+const StatusBadge = ({ status }: { status: string }) => {
+  if (status === "approved") {
+    return (
+      <span className="inline-flex items-center justify-center w-8 h-8 bg-green-100 text-green-600 rounded-full">
+        <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5" />
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 text-gray-600 rounded-full">
+      <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
+    </span>
+  );
+};
+
+const PriceBadge = ({ price }: { price: number }) => {
+  if (price === 0) {
+    return <span className="font-medium text-green-600">0,00</span>;
+  }
+  return <span className="font-medium text-blue-600">{price.toFixed(2)}</span>;
+};
+
+export default function DocumentsPage() {
+  const [selectedDocumentType, setSelectedDocumentType] = useState("select_document");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [comment, setComment] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [recordsPerPage, setRecordsPerPage] = useState(15);
+
+  const selectedDocument = documentsData.documentTypes.find(d => d.id === selectedDocumentType);
+  const { documents, pagination, paymentInfo } = documentsData;
+
+  const totalPages = Math.ceil(documents.length / recordsPerPage);
+  const startIndex = (currentPage - 1) * recordsPerPage;
+  const endIndex = startIndex + recordsPerPage;
+  const currentDocuments = documents.slice(startIndex, endIndex);
+
+  return (
+    <div className="min-h-screen pb-8">
+      {/* Header */}
+      <div className="bg-primary text-white rounded-xl p-8 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="bg-white bg-opacity-20 rounded-full p-4">
+            <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Документи</h1>
+            <p className="text-lg opacity-90">
+              Барање и преглед на документи
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Document Request Form */}
+      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
+        <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
+          <FontAwesomeIcon icon={faFileText} className="text-primary" />
+          Ново барање за документ
+        </h2>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Document Type Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Изберете документ:
+            </label>
+            <div className="relative">
+              <button
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-900 truncate">
+                    {selectedDocument?.name || "Изберете документ"}
+                  </span>
+                  <FontAwesomeIcon 
+                    icon={faChevronDown} 
+                    className={`w-4 h-4 text-gray-400 transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
+                  />
+                </div>
+              </button>
+              
+              {isDropdownOpen && (
+                <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-80 overflow-y-auto">
+                  {documentsData.documentTypes.map((docType) => (
+                    <button
+                      key={docType.id}
+                      onClick={() => {
+                        setSelectedDocumentType(docType.id);
+                        setIsDropdownOpen(false);
+                      }}
+                      className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 border-b border-gray-100 last:border-b-0"
+                    >
+                      <div className="font-medium text-gray-900">{docType.name}</div>
+                      {docType.price > 0 && (
+                        <div className="text-xs text-blue-600 mt-1">Цена: {docType.price} мкд</div>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Comment Section */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Коментар:
+            </label>
+            <textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              rows={4}
+              className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
+              placeholder="Додајте коментар..."
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-6">
+          <button
+            className="bg-primary hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-200 flex items-center gap-2"
+            disabled={selectedDocumentType === "select_document"}
+          >
+            <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
+            Внеси
+          </button>
+        </div>
+      </div>
+
+      {/* Documents Table */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="bg-primary text-white px-6 py-4">
+          <h2 className="text-xl font-bold">Мои документи</h2>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Архива</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Барање</th>
+                <th className="px-4 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Цена</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Платено</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Документ</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Плати онлајн</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Коментар</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {currentDocuments.map((document) => (
+                <tr key={document.id} className="hover:bg-gray-50 transition-colors">
+                  <TableCell className="font-medium text-gray-900">{document.id}</TableCell>
+                  <TableCell className="font-mono text-sm text-primary font-medium">{document.archive}</TableCell>
+                  <TableCell className="text-gray-600">{document.date}</TableCell>
+                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                    {document.request}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <PriceBadge price={document.price} />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <span className="text-sm font-medium text-green-600">
+                      {document.paid}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <button className="text-primary hover:text-blue-700 font-medium text-sm underline">
+                      {document.document}
+                    </button>
+                  </TableCell>
+                  <TableCell className="text-center">
+                    {document.payOnline ? (
+                      <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-green-600" />
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <StatusBadge status={document.status} />
+                  </TableCell>
+                  <TableCell>
+                    {document.comment || (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        <div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
+          <div className="flex items-center gap-4 text-sm text-gray-700">
+            <div className="flex items-center gap-2">
+              <span>Прикажи редови:</span>
+              <select
+                value={recordsPerPage}
+                onChange={(e) => setRecordsPerPage(Number(e.target.value))}
+                className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+              >
+                <option value={15}>15</option>
+                <option value={25}>25</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+            <div>
+              Страна <input
+                type="number"
+                min="1"
+                max={totalPages}
+                value={currentPage}
+                onChange={(e) => setCurrentPage(Number(e.target.value))}
+                className="w-12 border border-gray-300 rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
+              /> од {totalPages}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <FontAwesomeIcon icon={faAngleDoubleLeft} className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
+            </button>
+            <span className="px-4 py-2 bg-primary text-white rounded text-sm font-medium">
+              Прва
+            </span>
+            <button
+              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <FontAwesomeIcon icon={faChevronRight} className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <FontAwesomeIcon icon={faAngleDoubleRight} className="w-4 h-4" />
+            </button>
+            <span className="ml-4 text-sm text-gray-700">
+              Последна
+            </span>
+          </div>
+
+          <div className="text-sm text-gray-700">
+            Вкупно: {documents.length}
+          </div>
+        </div>
+
+        {/* Payment Info */}
+        <div className="bg-blue-50 border-t border-blue-100 p-4">
+          <div className="flex items-start gap-3">
+            <FontAwesomeIcon icon={faMoneyBillWave} className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
+            <p className="text-sm text-blue-800 leading-relaxed">
+              {paymentInfo}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Statistics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faFileText} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Вкупно документи</h3>
+              <p className="text-2xl font-bold text-blue-600">
+                {documents.length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-green-100 text-green-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faCheckCircle} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Одобрени</h3>
+              <p className="text-2xl font-bold text-green-600">
+                {documents.filter(doc => doc.status === "approved").length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faMoneyBillWave} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Вкупна цена</h3>
+              <p className="text-2xl font-bold text-yellow-600">
+                {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} мкд
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
Index: src/app/exams/page.tsx
===================================================================
--- src/app/exams/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/exams/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,7 @@
+import Exams from "@/components/exams";
+
+export default function ExamsPage() {
+  return (
+    <Exams></Exams>
+  );
+}
Index: src/app/layout.tsx
===================================================================
--- src/app/layout.tsx	(revision 875f7d6526d10ea486ceae45de8b59a66f11aaff)
+++ src/app/layout.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -2,6 +2,8 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import '@fortawesome/fontawesome-svg-core/styles.css';
-import { config } from '@fortawesome/fontawesome-svg-core';
+import "@fortawesome/fontawesome-svg-core/styles.css";
+import { config } from "@fortawesome/fontawesome-svg-core";
+import Header from "@/components/header";
+import Navbar from "@/components/navbar";
 
 // Prevent FontAwesome from adding CSS automatically
@@ -20,5 +22,6 @@
 export const metadata: Metadata = {
   title: "IKnow - UKIM",
-  description: "University Managment System used to provide students informations and manage their progress.",
+  description:
+    "University Managment System used to provide students informations and manage their progress.",
 };
 
@@ -30,8 +33,10 @@
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <div className="mx-auto max-w-6xl px-4">{children}</div>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <div className="mx-auto max-w-6xl px-4">
+          <Header />
+          <Navbar />
+          {children}
+        </div>
       </body>
     </html>
Index: src/app/login/layout.tsx
===================================================================
--- src/app/login/layout.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/login/layout.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,14 @@
+import Header from "@/components/header";
+
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+}
Index: src/app/login/page.tsx
===================================================================
--- src/app/login/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/login/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,170 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faUser, 
+  faLock, 
+  faEye, 
+  faEyeSlash,
+  faSignInAlt,
+  faGraduationCap
+} from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+
+export default function LoginPage() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    username: '',
+    password: ''
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle login logic here
+    console.log('Login attempt:', formData);
+  };
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+        {/* Login Form */}
+        <div className="flex items-center justify-center min-h-[calc(100vh-160px)] p-4">
+          <div className="w-full max-w-md">
+            {/* Login Card */}
+            <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+            {/* Header */}
+            <div className="bg-primary text-white px-8 py-6 text-center">
+              <div className="mb-4">
+                <div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full">
+                  <FontAwesomeIcon icon={faUser} className="text-2xl text-primary" />
+                </div>
+              </div>
+              <h1 className="text-2xl font-bold mb-2">Добредојде</h1>
+              <p className="text-blue-100 text-sm">
+                Најавете се во вашиот IKnow акаунт
+              </p>
+            </div>
+
+            {/* Form */}
+            <div className="p-8">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Username Field */}
+                <div>
+                  <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+                    Корисничко име
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-gray-400" />
+                    </div>
+                    <input
+                      id="username"
+                      name="username"
+                      type="text"
+                      required
+                      value={formData.username}
+                      onChange={handleInputChange}
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
+                      placeholder="Внесете корисничко име"
+                    />
+                  </div>
+                </div>
+
+                {/* Password Field */}
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Лозинка
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-gray-400" />
+                    </div>
+                    <input
+                      id="password"
+                      name="password"
+                      type={showPassword ? "text" : "password"}
+                      required
+                      value={formData.password}
+                      onChange={handleInputChange}
+                      className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
+                      placeholder="Внесете лозинка"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
+                    >
+                      <FontAwesomeIcon 
+                        icon={showPassword ? faEyeSlash : faEye} 
+                        className="h-4 w-4" 
+                      />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Remember Me & Forgot Password */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <input
+                      id="remember"
+                      name="remember"
+                      type="checkbox"
+                      className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+                    />
+                    <label htmlFor="remember" className="ml-2 block text-sm text-gray-700">
+                      Запомни ме
+                    </label>
+                  </div>
+                  <button
+                    type="button"
+                    className="text-sm text-primary hover:text-blue-700 font-medium transition-colors"
+                  >
+                    Заборавена лозинка?
+                  </button>
+                </div>
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  className="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
+                >
+                  <FontAwesomeIcon icon={faSignInAlt} className="h-4 w-4" />
+                  Најави се
+                </button>
+              </form>
+            </div>
+
+            {/* Footer */}
+            <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
+              <p className="text-center text-sm text-gray-600">
+                Немате акаунт?{' '}
+                <button className="text-primary hover:text-blue-700 font-medium transition-colors">
+                  Контактирајте ја администрацијата
+                </button>
+              </p>
+            </div>
+          </div>
+
+          {/* Additional Info */}
+          <div className="mt-6 text-center">
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white bg-opacity-80 rounded-lg shadow-sm">
+              <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
+              <span className="text-sm text-gray-600">
+                Студентски информационен систем
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  );
+}
Index: src/app/page.tsx
===================================================================
--- src/app/page.tsx	(revision 875f7d6526d10ea486ceae45de8b59a66f11aaff)
+++ src/app/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -1,13 +1,8 @@
 import Image from "next/image";
-import Navbar from "@/components/navbar";
-import Header from "@/components/header";
-import Exams from "@/components/exams";
 
 export default function Home() {
   return (
     <>
-      <Header></Header>
-      <Navbar></Navbar>
-      <Exams></Exams>
+      
     </>
   );
Index: src/app/profile/page.tsx
===================================================================
--- src/app/profile/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/profile/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,191 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faUser, 
+  faIdCard, 
+  faGraduationCap, 
+  faAddressCard, 
+  faSchool,
+  faCalendarAlt,
+  faFlag,
+  faVenus,
+  faMars,
+  faEnvelope,
+  faPhone,
+  faMapMarkerAlt,
+  faPassport
+} from '@fortawesome/free-solid-svg-icons';
+import studentData from '@/data/student-profile.json';
+
+interface InfoRowProps {
+  label: string;
+  value: string | number;
+  icon?: any;
+}
+
+const InfoRow = ({ label, value, icon }: InfoRowProps) => (
+  <div className="flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0">
+    <div className="flex items-center gap-2 text-gray-600 font-medium">
+      {icon && <FontAwesomeIcon icon={icon} className="w-4 h-4" />}
+      <span>{label}:</span>
+    </div>
+    <div className="text-gray-900 font-semibold text-right max-w-xs break-words">
+      {value || "N/A"}
+    </div>
+  </div>
+);
+
+interface SectionProps {
+  title: string;
+  icon: any;
+  children: React.ReactNode;
+}
+
+const Section = ({ title, icon, children }: SectionProps) => (
+  <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+    <div className="bg-primary text-white px-6 py-4">
+      <div className="flex items-center gap-3">
+        <FontAwesomeIcon icon={icon} className="text-xl" />
+        <h2 className="text-xl font-bold">{title}</h2>
+      </div>
+    </div>
+    <div className="p-6">
+      {children}
+    </div>
+  </div>
+);
+
+export default function ProfilePage() {
+  const { personalInfo, birthInfo, previousEducation, enrollmentInfo, contact } = studentData;
+
+  return (
+    <div className="min-h-screen pb-8">
+      {/* Header */}
+      <div className="bg-primary text-white rounded-xl p-8 mb-8">
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center border-2 border-white border-opacity-30">
+              <FontAwesomeIcon icon={faUser} className="text-3xl text-primary" />
+            </div>
+            <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold mb-2">
+              {personalInfo.firstName} {personalInfo.middleName} {personalInfo.lastName}
+            </h1>
+            <div className="text-lg opacity-90">
+              Индекс: {personalInfo.index} | ЕМБГ: {personalInfo.embg}
+            </div>
+            <div className="text-base opacity-80 mt-1">
+              {enrollmentInfo.program}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Profile Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        
+        {/* Personal Information */}
+        <Section title="Лични податоци" icon={faIdCard}>
+          <InfoRow label="Име" value={personalInfo.firstName} />
+          <InfoRow label="Средно име" value={personalInfo.middleName} />
+          <InfoRow label="Презиме" value={personalInfo.lastName} />
+          <InfoRow label="Моминско презиме" value={personalInfo.maidenName} />
+          <InfoRow 
+            label="Датум на раѓање" 
+            value={personalInfo.dateOfBirth} 
+            icon={faCalendarAlt} 
+          />
+          <InfoRow 
+            label="Пол" 
+            value={personalInfo.gender} 
+            icon={personalInfo.gender === 'машки' ? faMars : faVenus} 
+          />
+          <InfoRow 
+            label="Националност" 
+            value={personalInfo.nationality} 
+            icon={faFlag} 
+          />
+          <InfoRow label="Државјанство" value={personalInfo.citizenship} />
+          <InfoRow label="Стипендија" value={personalInfo.scholarship} />
+          <InfoRow label="Тековен план" value={personalInfo.currentPlan} />
+          <InfoRow label="Бр. во матична книга" value={personalInfo.registryNumber} />
+          <InfoRow label="Група на студирање" value={personalInfo.studyGroup} />
+          {personalInfo.notes && (
+            <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+              <div className="text-sm font-medium text-blue-800 mb-1">Забелешка:</div>
+              <div className="text-sm text-blue-700">{personalInfo.notes}</div>
+            </div>
+          )}
+        </Section>
+
+        {/* Birth Information */}
+        <Section title="Податоци за раѓање" icon={faMapMarkerAlt}>
+          <InfoRow label="Место на раѓање" value={birthInfo.placeOfBirth} />
+          <InfoRow label="Општина на раѓање" value={birthInfo.municipalityOfBirth} />
+          <InfoRow label="Земја" value={birthInfo.country} />
+        </Section>
+
+        {/* Previous Education */}
+        <Section title="Претходно образование" icon={faSchool}>
+          <InfoRow label="Тип" value={previousEducation.type} />
+          <InfoRow label="Професија" value={previousEducation.profession} />
+          <InfoRow label="Просек" value={previousEducation.average} />
+          <InfoRow label="Јазик" value={previousEducation.language} />
+          <InfoRow label="Земја" value={previousEducation.country} />
+          <InfoRow label="Претходен универзитет" value={previousEducation.previousUniversity} />
+          <InfoRow label="Претходен факултет" value={previousEducation.previousFaculty} />
+          <InfoRow label="Режим на претходни студии" value={previousEducation.previousStudyMode} />
+        </Section>
+
+        {/* Enrollment Information */}
+        <Section title="Податоци за упис" icon={faGraduationCap}>
+          <InfoRow label="Година на упис" value={enrollmentInfo.enrollmentYear} />
+          <InfoRow label="Статус" value={enrollmentInfo.status} />
+          <InfoRow label="Циклус" value={enrollmentInfo.cycle} />
+          <InfoRow label="Запишана програма" value={enrollmentInfo.program} />
+          <InfoRow label="Квота на прв упис" value={enrollmentInfo.quota} />
+          <InfoRow label="Бр. дипл. ср. образование" value={enrollmentInfo.secondaryEducationNumber} />
+          <InfoRow label="Кред. пр. образование" value={enrollmentInfo.previousEducationCredits} />
+        </Section>
+
+        {/* Contact Information */}
+        <div className="lg:col-span-2">
+          <Section title="Контакт" icon={faAddressCard}>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <InfoRow 
+                  label="Место на живеење" 
+                  value={contact.placeOfResidence} 
+                  icon={faMapMarkerAlt} 
+                />
+                <InfoRow label="Општина на живеење" value={contact.municipalityOfResidence} />
+                <InfoRow label="Држава" value={contact.country} />
+                <InfoRow label="Адреса" value={contact.address} />
+                <InfoRow label="Адреса на престој" value={contact.temporaryAddress} />
+              </div>
+              <div>
+                <InfoRow label="Телефон" value={contact.phone} icon={faPhone} />
+                <InfoRow label="Моб. телефон" value={contact.mobilePhone} icon={faPhone} />
+                <InfoRow label="Број на пасош" value={contact.passportNumber} icon={faPassport} />
+                <InfoRow label="Датум на истекување на пасошот" value={contact.passportExpiryDate} />
+                <InfoRow 
+                  label="Е-пошта" 
+                  value={contact.email} 
+                  icon={faEnvelope} 
+                />
+                <InfoRow 
+                  label="Microsoft email" 
+                  value={contact.microsoftEmail} 
+                  icon={faEnvelope} 
+                />
+              </div>
+            </div>
+          </Section>
+        </div>
+      </div>
+    </div>
+  );
+}
Index: src/app/semesters/page.tsx
===================================================================
--- src/app/semesters/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/semesters/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,281 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faCalendarAlt, 
+  faCheck, 
+  faTimes, 
+  faFileAlt, 
+  faMoneyBillWave,
+  faSignature,
+  faCheckCircle,
+  faTimesCircle,
+  faExclamationTriangle
+} from '@fortawesome/free-solid-svg-icons';
+import semestersData from '@/data/semesters.json';
+
+interface TableCellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TableCell = ({ children, className = "" }: TableCellProps) => (
+  <td className={`px-4 py-3 text-sm border-b border-gray-100 ${className}`}>
+    {children}
+  </td>
+);
+
+const StatusBadge = ({ status }: { status: string }) => {
+  const baseClasses = "px-2 py-1 rounded-full text-xs font-medium";
+  
+  if (status === "валиден") {
+    return (
+      <span className={`${baseClasses} bg-green-100 text-green-800 flex items-center gap-1`}>
+        <FontAwesomeIcon icon={faCheckCircle} className="w-3 h-3" />
+        {status}
+      </span>
+    );
+  }
+  
+  return (
+    <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+      {status}
+    </span>
+  );
+};
+
+const YesNoBadge = ({ value }: { value: string }) => {
+  if (value === "Да") {
+    return (
+      <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full">
+        <FontAwesomeIcon icon={faCheck} className="w-3 h-3" />
+      </span>
+    );
+  } else if (value === "Не") {
+    return (
+      <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full">
+        <FontAwesomeIcon icon={faTimes} className="w-3 h-3" />
+      </span>
+    );
+  }
+  return <span className="text-gray-400">—</span>;
+};
+
+const SignatureBadge = ({ signatures }: { signatures: string }) => {
+  const [completed, total] = signatures.split('/').map(Number);
+  const percentage = total > 0 ? (completed / total) * 100 : 0;
+  
+  let colorClass = "text-red-600 bg-red-100";
+  if (percentage === 100) {
+    colorClass = "text-green-600 bg-green-100";
+  } else if (percentage >= 50) {
+    colorClass = "text-yellow-600 bg-yellow-100";
+  }
+  
+  return (
+    <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${colorClass}`}>
+      <FontAwesomeIcon icon={faSignature} className="w-3 h-3" />
+      {signatures}
+    </span>
+  );
+};
+
+export default function SemestersPage() {
+  const { semesters } = semestersData;
+
+  return (
+    <div className="min-h-screen pb-8">
+      {/* Header */}
+      <div className="bg-primary text-white rounded-xl p-8 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="bg-white bg-opacity-20 rounded-full p-4">
+            <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Семестри</h1>
+            <p className="text-lg opacity-90">
+              Преглед на сите запишани семестри и нивниот статус
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Table Container */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="bg-primary text-white px-6 py-4">
+          <h2 className="text-xl font-bold">Листа на семестри</h2>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Семестар</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Насока</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Квота</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Забелешка</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Студ.Ком.</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сума</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Платено</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">УКИМ</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Креирано на</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Датум промена</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ц.Кр</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Док.</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Док1.</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Вериф.</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Таксени</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Потписи</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Зав.</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {semesters.map((semester, index) => (
+                <tr key={semester.id} className="hover:bg-gray-50 transition-colors">
+                  <TableCell className="font-medium text-gray-900">{semester.id}</TableCell>
+                  <TableCell className="font-medium text-primary">{semester.semester}</TableCell>
+                  <TableCell>{semester.direction}</TableCell>
+                  <TableCell className="max-w-xs">
+                    <div className="truncate" title={semester.quota}>
+                      {semester.quota}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {semester.note ? (
+                      <span className="text-yellow-600 font-medium" title={semester.note}>
+                        {semester.note.length > 10 ? `${semester.note.substring(0, 10)}...` : semester.note}
+                      </span>
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {semester.studentCom ? (
+                      <span className="text-blue-600 font-medium" title={semester.studentCom}>
+                        {semester.studentCom.length > 10 ? `${semester.studentCom.substring(0, 10)}...` : semester.studentCom}
+                      </span>
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {semester.sum ? (
+                      <span className="text-green-600 flex items-center gap-1">
+                        <FontAwesomeIcon icon={faMoneyBillWave} className="w-3 h-3" />
+                        {semester.sum}
+                      </span>
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {semester.paid ? (
+                      <span className="text-green-600 flex items-center gap-1">
+                        <FontAwesomeIcon icon={faMoneyBillWave} className="w-3 h-3" />
+                        {semester.paid}
+                      </span>
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {semester.ukim ? (
+                      <span className="text-blue-600">{semester.ukim}</span>
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-gray-600">{semester.createdOn}</TableCell>
+                  <TableCell className="text-gray-600">{semester.dateChanged}</TableCell>
+                  <TableCell className="font-medium text-primary">{semester.credits}</TableCell>
+                  <TableCell>
+                    <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
+                      {semester.type}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <YesNoBadge value={semester.doc} />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <YesNoBadge value={semester.doc1} />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <YesNoBadge value={semester.verified} />
+                  </TableCell>
+                  <TableCell className="font-medium text-green-600">{semester.taxes}</TableCell>
+                  <TableCell>
+                    <SignatureBadge signatures={semester.signatures} />
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge status={semester.status} />
+                  </TableCell>
+                  <TableCell>
+                    {semester.completed !== "Не" ? (
+                      <span className="text-green-600 font-medium flex items-center gap-1">
+                        <FontAwesomeIcon icon={faCheckCircle} className="w-3 h-3" />
+                        {semester.completed}
+                      </span>
+                    ) : (
+                      <span className="text-red-600 font-medium flex items-center gap-1">
+                        <FontAwesomeIcon icon={faTimesCircle} className="w-3 h-3" />
+                        {semester.completed}
+                      </span>
+                    )}
+                  </TableCell>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-green-100 text-green-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faCheckCircle} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Завршени семестри</h3>
+              <p className="text-2xl font-bold text-green-600">
+                {semesters.filter(s => s.completed !== "Не").length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
+              <FontAwesomeIcon icon={faFileAlt} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Верифицирани</h3>
+              <p className="text-2xl font-bold text-blue-600">
+                {semesters.filter(s => s.verified === "Да").length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-4">
+            <div className="bg-primary text-white rounded-full p-3">
+              <FontAwesomeIcon icon={faCalendarAlt} className="text-xl" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Вкупно семестри</h3>
+              <p className="text-2xl font-bold text-primary">
+                {semesters.length}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
Index: src/app/subjects/page.tsx
===================================================================
--- src/app/subjects/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
+++ src/app/subjects/page.tsx	(revision 636f86cc03abcdbac548ce77903447c882c466e9)
@@ -0,0 +1,285 @@
+"use client"
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faBook, 
+  faChevronDown,
+  faInfoCircle,
+  faMoneyBillWave,
+  faCreditCard,
+  faFileInvoice,
+  faGraduationCap
+} from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import subjectsData from '@/data/subjects.json';
+
+interface TableCellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TableCell = ({ children, className = "" }: TableCellProps) => (
+  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+    {children}
+  </td>
+);
+
+const StatusBadge = ({ status }: { status: string }) => {
+  const baseClasses = "px-3 py-1 rounded-md text-xs font-medium";
+  
+  if (status === "Зад.") {
+    return (
+      <span className={`${baseClasses} bg-blue-100 text-blue-800`}>
+        {status}
+      </span>
+    );
+  } else if (status === "Изб.") {
+    return (
+      <span className={`${baseClasses} bg-green-100 text-green-800`}>
+        {status}
+      </span>
+    );
+  }
+  
+  return (
+    <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+      {status}
+    </span>
+  );
+};
+
+export default function SubjectsPage() {
+  const [selectedSemester, setSelectedSemester] = useState(subjectsData.currentSemester.id);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  
+  const currentSemesterData = subjectsData.semesters.find(s => s.id === selectedSemester) || subjectsData.currentSemester;
+  const currentSubjects = (subjectsData.subjectsBySemester as any)[selectedSemester] || [];
+  const { currentSemester } = subjectsData;
+
+  return (
+    <div className="min-h-screen pb-8">
+      {/* Header */}
+      <div className="bg-primary text-white rounded-xl p-8 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="bg-white bg-opacity-20 rounded-full p-4">
+            <FontAwesomeIcon icon={faBook} className="text-3xl text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Предмети</h1>
+            <p className="text-lg opacity-90">
+              Преглед на запишани предмети по семестри
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Status and Selection Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+        
+        {/* Left Column - Status and Dropdown */}
+        <div className="lg:col-span-1 space-y-6">
+          
+          {/* Status Card */}
+          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+            <div className="text-sm text-gray-600 mb-2">
+              Статус: <span className="text-primary font-semibold">Запишан од студент</span>
+            </div>
+            <div className="text-sm text-gray-600">
+              Број на тикет: <span className="font-semibold">{currentSemester.ticketNumber}</span>
+            </div>
+          </div>
+
+          {/* Semester Selection */}
+          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+            <div className="text-sm text-gray-600 mb-2">
+              Долг од документи: <span className="font-semibold">{currentSemester.debt}</span>
+            </div>
+            
+            <div className="relative mt-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Избери семестар:
+              </label>
+              <div className="relative">
+                <button
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-primary">
+                      {currentSemesterData.name}
+                    </span>
+                    <FontAwesomeIcon 
+                      icon={faChevronDown} 
+                      className={`w-4 h-4 text-gray-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
+                    />
+                  </div>
+                </button>
+                
+                {isDropdownOpen && (
+                  <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg">
+                    {subjectsData.semesters.map((semester) => (
+                      <button
+                        key={semester.id}
+                        onClick={() => {
+                          setSelectedSemester(semester.id);
+                          setIsDropdownOpen(false);
+                        }}
+                        className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
+                      >
+                        <div className="font-medium text-gray-900">{semester.name}</div>
+                        <div className="text-xs text-gray-500">Статус: {semester.status}</div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="mt-4 text-sm">
+              <div className="text-primary font-medium">
+                Сериски број: {currentSemesterData.serviceNumber}
+              </div>
+            </div>
+          </div>
+
+          {/* Enrolled Subjects */}
+          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
+              <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
+              Запишани предмети
+            </h3>
+            <div className="text-3xl font-bold text-primary">
+              {currentSubjects.length}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Column - Financial Information */}
+        <div className="lg:col-span-2">
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div className="bg-primary text-white px-6 py-4">
+              <h2 className="text-xl font-bold flex items-center gap-2">
+                <FontAwesomeIcon icon={faFileInvoice} />
+                Финансиски информации
+              </h2>
+            </div>
+            
+            <div className="p-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                
+                {/* Left Financial Column */}
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Сума:</span>
+                    <span className="font-semibold text-primary">{currentSemester.financialInfo.sum}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Платено:</span>
+                    <span className="font-semibold text-green-600">{currentSemester.financialInfo.paid}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Должи:</span>
+                    <span className="font-semibold text-red-600">{currentSemester.financialInfo.due}</span>
+                  </div>
+                  <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+                    <div className="text-sm font-medium text-blue-800 mb-1">Материјални трошоци:</div>
+                    <div className="text-sm text-blue-700">{currentSemester.financialInfo.materialCosts}</div>
+                  </div>
+                </div>
+
+                {/* Right Financial Column */}
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Кредити:</span>
+                    <span className="font-semibold text-primary">{currentSemester.financialInfo.credits}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">МКСА:</span>
+                    <span className="font-semibold">{currentSemester.financialInfo.MKSA}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Електронско запишување:</span>
+                    <span className="font-semibold">{currentSemester.financialInfo.electronicRegistration}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Е-УКИМ:</span>
+                    <span className="font-semibold">{currentSemester.financialInfo.eUKIM}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                    <span className="text-gray-600">Банкарска провизија:</span>
+                    <span className="font-semibold">{currentSemester.financialInfo.bankProvision}</span>
+                  </div>
+                  <div className="flex justify-between items-center py-3 border-t-2 border-primary bg-primary bg-opacity-5 rounded-lg px-4">
+                    <span className="font-bold text-primary">Тотал:</span>
+                    <span className="font-bold text-xl text-primary">{currentSemester.financialInfo.total}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Subjects Table */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="bg-primary text-white px-6 py-4">
+          <h2 className="text-xl font-bold">Листа на предмети</h2>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Код</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Часови</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кој пат</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Предмет</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Семестар</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Потпис</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Група</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Професор</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {currentSubjects.map((subject: any) => (
+                <tr key={subject.id} className="hover:bg-gray-50 transition-colors">
+                  <TableCell className="font-medium text-gray-900">{subject.id}</TableCell>
+                  <TableCell className="font-mono text-sm text-primary font-medium">{subject.code}</TableCell>
+                  <TableCell className="font-medium">{subject.hours}</TableCell>
+                  <TableCell className="text-center font-medium">{subject.kojPat}</TableCell>
+                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
+                      {subject.name}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-center font-medium text-primary">{subject.semester}</TableCell>
+                  <TableCell>
+                    <StatusBadge status={subject.status} />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    {subject.signature || (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-center">
+                    {subject.group || (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {subject.professor || (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </TableCell>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
