Index: src/app/globals.css
===================================================================
--- src/app/globals.css	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/globals.css	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -46,5 +46,5 @@
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --background: #F4FAFF;
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
Index: src/app/layout.tsx
===================================================================
--- src/app/layout.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/layout.tsx	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -8,4 +8,5 @@
 import { ThemeProvider } from '../components/theme-provider';
 import { ThemeToggle } from '../components/theme-toggle';
+import ContactBubble from '../components/contact-bubble';
 
 config.autoAddCss = false;
@@ -35,4 +36,5 @@
             </div>
             <div className="mx-auto max-w-6xl px-4">{children}</div>
+            <ContactBubble />
           </I18nextProvider>
         </ThemeProvider>
Index: src/app/page.tsx
===================================================================
--- src/app/page.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/page.tsx	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -58,9 +58,9 @@
                 <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
                   <div className="text-sm font-bold text-card-foreground mb-2">{t('login_student_title')}</div>
-                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
+                  <div className="text-xs text-card-foreground whitespace-pre-wrap">
                     {t('login_student_example')}
                   </div>
-                  <div className="mt-3 text-xs text-muted-foreground">
-                    {t('login_note_slow')}
+                  <div className="mt-3 text-xs text-blue-600 font-medium">
+                    {t('login_demo_note')}
                   </div>
                 </div>
@@ -68,6 +68,9 @@
                 <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
                   <div className="text-sm font-bold text-card-foreground mb-2">{t('login_professor_title')}</div>
-                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
+                  <div className="text-xs text-card-foreground whitespace-pre-wrap">
                     {t('login_professor_example')}
+                  </div>
+                  <div className="mt-3 text-xs text-blue-600 font-medium">
+                    {t('login_demo_note')}
                   </div>
                 </div>
Index: src/app/students/applications/page.tsx
===================================================================
--- src/app/students/applications/page.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/students/applications/page.tsx	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -30,5 +30,5 @@
 const CompletedBadge = ({ completed }: { completed: string }) => {
   const { t } = useTranslation();
-  if (completed === t('yes', 'Да')) {
+  if (completed === 'Да') {
     return (
       <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full" title={t('completed')}> 
@@ -230,5 +230,5 @@
               <h3 className="text-lg font-bold text-card-foreground">{t('completed', 'Завршени')}</h3>
               <p className="text-2xl font-bold text-green-600">
-                {applications.filter(app => app.completed === t('yes', 'Да')).length}
+                {applications.filter(app => app.completed === 'Да').length}
               </p>
             </div>
Index: src/app/students/documents/page.tsx
===================================================================
--- src/app/students/documents/page.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/students/documents/page.tsx	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -6,4 +6,5 @@
   faChevronDown,
   faCheckCircle,
+  faClock,
   faMoneyBillWave,
   faFileText,
@@ -11,9 +12,12 @@
   faChevronRight,
   faAngleDoubleLeft,
-  faAngleDoubleRight
+  faAngleDoubleRight,
+  faSpinner
 } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
 import documentsData from '@/data/documents.json';
 import { useTranslation } from 'react-i18next';
+import { getAccessToken } from '@/lib/auth';
+import { downloadDocumentPDF } from '@/lib/pdf-generators';
 
 interface TableCellProps {
@@ -30,8 +34,16 @@
 const StatusBadge = ({ status }: { status: string }) => {
   const { t } = useTranslation();
-  if (status === t('approved', 'Одобрено')) {
+  if (status === 'approved' || status === t('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>
+    );
+  }
+  if (status === 'pending') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs font-medium text-yellow-700 bg-yellow-100 px-2 py-1 rounded-full">
+        <FontAwesomeIcon icon={faClock} className="w-3 h-3" />
+        {t('pending', 'Во обработка')}
       </span>
     );
@@ -52,4 +64,17 @@
 };
 
+interface DocumentRecord {
+  id: number;
+  archive: string;
+  date: string;
+  request: string;
+  price: number;
+  paid: string;
+  document: string;
+  payOnline: boolean;
+  status: string;
+  comment: string;
+}
+
 export default function DocumentsPage() {
   const [selectedDocumentType, setSelectedDocumentType] = useState("select_document");
@@ -58,8 +83,63 @@
   const [currentPage, setCurrentPage] = useState(1);
   const [recordsPerPage, setRecordsPerPage] = useState(15);
+  const [downloadingId, setDownloadingId] = useState<number | null>(null);
+  const [documents, setDocuments] = useState<DocumentRecord[]>(documentsData.documents as DocumentRecord[]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { t } = useTranslation();
 
+  const handleDownload = async (docId: number, request: string, archive: string, date: string) => {
+    const token = getAccessToken();
+    if (!token) {
+      alert(t('not_authenticated', 'Не сте најавени. Ве молиме најавете се повторно.'));
+      return;
+    }
+    setDownloadingId(docId);
+    try {
+      await downloadDocumentPDF(request, archive, date, token);
+    } catch (err) {
+      console.error('PDF generation error:', err);
+      alert(t('pdf_error', 'Грешка при генерирање на документот. Обидете се повторно.'));
+    } finally {
+      setDownloadingId(null);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (selectedDocumentType === "select_document") return;
+
+    const docType = documentsData.documentTypes.find(d => d.id === selectedDocumentType);
+    if (!docType) return;
+
+    setIsSubmitting(true);
+
+    // Generate archive number (random 5-digit)
+    const archiveNumber = String(90000 + Math.floor(Math.random() * 10000));
+
+    // Current date in DD.MM.YYYY format
+    const now = new Date();
+    const dateStr = `${String(now.getDate()).padStart(2, '0')}.${String(now.getMonth() + 1).padStart(2, '0')}.${now.getFullYear()}`;
+
+    const newDoc: DocumentRecord = {
+      id: documents.length > 0 ? Math.max(...documents.map(d => d.id)) + 1 : 1,
+      archive: archiveNumber,
+      date: dateStr,
+      request: docType.name,
+      price: docType.price,
+      paid: "Не",
+      document: "Преземи",
+      payOnline: docType.price > 0,
+      status: "pending",
+      comment: comment,
+    };
+
+    setDocuments(prev => [newDoc, ...prev]);
+    setSelectedDocumentType("select_document");
+    setComment("");
+    setIsSubmitting(false);
+    alert(t('document_submitted', 'Барањето за документ е успешно поднесено!'));
+  };
+
   const selectedDocument = documentsData.documentTypes.find(d => d.id === selectedDocumentType);
-  const { documents, paymentInfo } = documentsData;
+  const { paymentInfo } = documentsData;
 
   const totalPages = Math.ceil(documents.length / recordsPerPage);
@@ -153,9 +233,10 @@
         <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"}
+            onClick={handleSubmit}
+            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:opacity-50 disabled:cursor-not-allowed"
+            disabled={selectedDocumentType === "select_document" || isSubmitting}
           >
-            <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
-            {t('submit', 'Поднеси')}
+            <FontAwesomeIcon icon={isSubmitting ? faSpinner : faFileText} className={`w-4 h-4 ${isSubmitting ? 'animate-spin' : ''}`} />
+            {isSubmitting ? t('submitting', 'Се поднесува...') : t('submit', 'Поднеси')}
           </button>
         </div>
@@ -197,11 +278,22 @@
                   </TableCell>
                   <TableCell className="text-center">
-                    <span className="text-sm font-medium text-green-600">
+                    <span className={`text-sm font-medium ${document.paid === 'ДА' ? 'text-green-600' : 'text-red-500'}`}>
                       {document.paid}
                     </span>
                   </TableCell>
                   <TableCell className="text-center">
-                    <button className="text-primary hover:text-blue-700 font-medium text-sm underline">
-                      {document.document}
+                    <button 
+                      onClick={() => handleDownload(document.id, document.request, document.archive, document.date)}
+                      disabled={downloadingId === document.id}
+                      className="text-primary hover:text-blue-700 font-medium text-sm underline disabled:opacity-50 disabled:cursor-wait inline-flex items-center gap-1"
+                    >
+                      {downloadingId === document.id ? (
+                        <>
+                          <FontAwesomeIcon icon={faSpinner} className="w-3 h-3 animate-spin" />
+                          {t('generating', 'Генерира...')}
+                        </>
+                      ) : (
+                        t('download', document.document)
+                      )}
                     </button>
                   </TableCell>
Index: src/app/students/semesters/page.tsx
===================================================================
--- src/app/students/semesters/page.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/app/students/semesters/page.tsx	(revision 4fe4582e6255b2244fa2c6ce9ae837ab03e74a58)
@@ -57,9 +57,9 @@
   const { t } = useTranslation();
   const baseClasses = "px-2 py-1 rounded-full text-xs font-medium";
-  if (status === t('valid')) {
+  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" />
-        {t('valid')}
+        {t('Валидно', 'Валидно')}
       </span>
     );
@@ -67,5 +67,5 @@
   return (
     <span className={`${baseClasses} bg-accent text-gray-800`}>
-      {t(status) || status}
+      {t(status, status)}
     </span>
   );
@@ -74,5 +74,5 @@
 const YesNoBadge = ({ value }: { value: string }) => {
   const { t } = useTranslation();
-  if (value === t('yes')) {
+  if (value === 'Да') {
     return (
       <span className="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full">
@@ -80,5 +80,5 @@
       </span>
     );
-  } else if (value === t('no')) {
+  } else if (value === 'Не') {
     return (
       <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full">
@@ -313,10 +313,10 @@
                       <span className="text-green-600 font-medium flex items-center gap-1">
                         <FontAwesomeIcon icon={faCheckCircle} className="w-3 h-3" />
-                        {semester.completed}
+                        {t(semester.completed, 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}
+                        {t('Не', 'Не')}
                       </span>
                     )}
