diff --git a/assets/css/custom.css b/assets/css/custom.css
index 4d02b73..f5b6641 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,93 +1,58 @@
-
+/* Base styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f0f2f5;
-}
-
-.navbar-brand {
-    font-weight: 700;
-    font-size: 1.5rem;
+    background-color: #f0f2f5; /* Lighter gray background */
 }
 
+/* Glassmorphism card style */
 .glass-card {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
-    padding: 2rem;
+    transition: all 0.3s ease;
 }
 
+.glass-card-header {
+    background: rgba(249, 250, 251, 0.7); /* Light header */
+    border-bottom: 1px solid #e5e7eb;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+
+/* Gradient button */
 .btn-gradient {
     background-image: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
     background-size: 200% auto;
     color: white;
     transition: 0.5s;
     border: none;
-    padding: 0.75rem 1.5rem;
-    font-weight: 600;
 }
+
 .btn-gradient:hover:not(:disabled) {
-    background-position: right center;
-    box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.6);
-    transform: translateY(-2px);
+    background-position: right center; /* change the direction of the change here */
+    box-shadow: 0 4px 15px 0 rgba(124, 77, 255, 0.4);
 }
 
-.fir-preview-container {
-    margin-top: 3rem;
+/* For webkit scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-.fir-preview {
-    font-family: 'Times New Roman', Times, serif;
-    color: #000;
-    background: #fff;
-    padding: 2.5cm 2cm;
-    margin-top: 2rem;
-    border: 1px solid #dee2e6;
-    line-height: 1.5;
-    font-size: 12pt;
-    white-space: pre-wrap;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-.fir-preview h2 {
-    font-family: 'Arial', sans-serif;
-    font-weight: bold;
-    text-align: center;
-    border: 2px solid #000;
-    padding: 0.5rem;
-    margin-bottom: 1.5rem;
-    font-size: 16pt;
-    text-transform: uppercase;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-.fir-preview strong {
-    font-weight: bold;
-}
-
-.fir-preview .section {
-    margin-bottom: 1rem;
-}
-
-.fir-preview .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.fir-preview .full-width {
-    grid-column: 1 / -1;
-}
-
-.form-label {
-    font-weight: 500;
-}
-
-.form-section-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #e5e7eb;
-}
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index def73b0..88c2f9e 100644
--- a/index.php
+++ b/index.php
@@ -1,195 +1,193 @@
-<?php
-// --- Form Submission Logic ---
-$is_submitted = false;
-$data = [];
-$fields = [
-    'DISTRICT', 'POLICE_STATION', 'FIR_NO', 'DATE_OF_FIR',
-    'SECTIONS_OF_LAW', 'DATE_OF_OCCURRENCE', 'TIME_OF_OCCURRENCE',
-    'PLACE_OF_OCCURRENCE', 'DATE_OF_INFO', 'TIME_OF_INFO',
-    'COMPLAINANT_NAME', 'COMPLAINANT_FATHER_NAME', 'COMPLAINANT_ADDRESS',
-    'ACCUSED_DETAILS', 'BRIEF_FACTS_OF_THE_CASE', 'INVESTIGATING_OFFICER_NAME',
-    'IO_RANK', 'OFFICER_IN_CHARGE_NAME', 'OFFICER_IN_CHARGE_RANK'
-];
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $is_submitted = true;
-    foreach ($fields as $field) {
-        $data[$field] = isset($_POST[$field]) ? htmlspecialchars($_POST[$field], ENT_QUOTES, 'UTF-8') : '';
-    }
-}
-?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MAKDOC - AI Legal Assistant</title>
-
-    <!-- SEO and Meta Tags -->
-    <meta name="description" content="Built with Flatlogic. Generate official Indian legal documents like First Information Reports (FIR) with an easy-to-use form.">
-    <meta name="keywords" content="AI legal assistant, legal document generation, FIR generator, Indian law, police report, legal tech, document automation, CrPC section 154, criminal procedure code, legal forms, Built with Flatlogic Generator">
-    <meta property="og:title" content="MAKDOC - AI Legal Assistant">
-    <meta property="og:description" content="Built with Flatlogic. Generate official Indian legal documents like First Information Reports (FIR) with an easy-to-use form.">
-    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
-
-    <!-- Styles and Fonts -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+    <script>pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
+    <link href="assets/css/custom.css" rel="stylesheet">
 </head>
-<body class="bg-light">
+<body class="bg-gray-100">
+    <div id="root"></div>
 
-    <!-- Header -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
-        <div class="container">
-            <a class="navbar-brand" href="#">
-                <i class="fas fa-robot text-primary"></i> MAKDOC
-            </a>
-        </div>
-    </nav>
+    <script type="text/babel">
+        const { useState, useEffect } = React;
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <div class="glass-card">
-            <div class="text-center mb-4">
-                <h1 class="h2">First Information Report (FIR) Generator</h1>
-                <p class="text-muted">Fill in the details below to generate a draft FIR under Section 154 Cr.P.C.</p>
-            </div>
+        // Main App Component
+        function App() {
+            const [file, setFile] = useState(null);
+            const [fileContent, setFileContent] = useState('');
+            const [isLoading, setIsLoading] = useState(false);
+            const [reportContent, setReportContent] = useState('AI-generated report will appear here.');
 
-            <form action="index.php" method="POST">
-                <!-- Section 1 & 2 -->
-                <h3 class="form-section-title">1. Case Details</h3>
-                <div class="row g-3 mb-4">
-                    <div class="col-md-6"><label class="form-label">District</label><input type="text" class="form-control" name="DISTRICT" required></div>
-                    <div class="col-md-6"><label class="form-label">Police Station</label><input type="text" class="form-control" name="POLICE_STATION" required></div>
-                    <div class="col-md-6"><label class="form-label">FIR No.</label><input type="text" class="form-control" name="FIR_NO" required></div>
-                    <div class="col-md-6"><label class="form-label">Date of FIR</label><input type="date" class="form-control" name="DATE_OF_FIR" required></div>
-                    <div class="col-12"><label class="form-label">Act(s) and Section(s)</label><input type="text" class="form-control" name="SECTIONS_OF_LAW" placeholder="e.g., IPC Section 302" required></div>
-                </div>
+            const handleFileChange = (e) => {
+                const selectedFile = e.target.files[0];
+                if (selectedFile) {
+                    setFile(selectedFile);
+                    extractText(selectedFile);
+                }
+            };
 
-                <!-- Section 3 -->
-                <h3 class="form-section-title">2. Occurrence of Offence</h3>
-                <div class="row g-3 mb-4">
-                    <div class="col-md-6"><label class="form-label">Date of Occurrence</label><input type="date" class="form-control" name="DATE_OF_OCCURRENCE" required></div>
-                    <div class="col-md-6"><label class="form-label">Time of Occurrence</label><input type="time" class="form-control" name="TIME_OF_OCCURRENCE"></div>
-                    <div class="col-12"><label class="form-label">Place of Occurrence</label><input type="text" class="form-control" name="PLACE_OF_OCCURRENCE" required></div>
-                    <div class="col-md-6"><label class="form-label">Date Information Received at P.S.</label><input type="date" class="form-control" name="DATE_OF_INFO" required></div>
-                    <div class="col-md-6"><label class="form-label">Time Information Received at P.S.</label><input type="time" class="form-control" name="TIME_OF_INFO" required></div>
-                </div>
+            const extractText = (fileToProcess) => {
+                setIsLoading(true);
+                setFileContent('');
+                const reader = new FileReader();
+                const fileType = fileToProcess.type;
 
-                <!-- Section 4 -->
-                <h3 class="form-section-title">3. Informant / Complainant</h3>
-                <div class="row g-3 mb-4">
-                    <div class="col-md-6"><label class="form-label">Name</label><input type="text" class="form-control" name="COMPLAINANT_NAME" required></div>
-                    <div class="col-md-6"><label class="form-label">Father's/Husband's Name</label><input type="text" class="form-control" name="COMPLAINANT_FATHER_NAME"></div>
-                    <div class="col-12"><label class="form-label">Address</label><textarea class="form-control" name="COMPLAINANT_ADDRESS" rows="2" required></textarea></div>
-                </div>
+                if (fileType === 'application/pdf') {
+                    reader.onload = (e) => {
+                        const typedarray = new Uint8Array(e.target.result);
+                        pdfjsLib.getDocument(typedarray).promise.then(pdf => {
+                            let text = '';
+                            const numPages = pdf.numPages;
+                            const promises = [];
+                            for (let i = 1; i <= numPages; i++) {
+                                promises.push(pdf.getPage(i).then(page => {
+                                    return page.getTextContent().then(content => {
+                                        return content.items.map(item => item.str).join(' ');
+                                    });
+                                }));
+                            }
+                            Promise.all(promises).then(pagesText => {
+                                setFileContent(pagesText.join('\n\n'));
+                                setIsLoading(false);
+                            });
+                        });
+                    };
+                    reader.readAsArrayBuffer(fileToProcess);
+                } else if (fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+                    reader.onload = (e) => {
+                        mammoth.extractRawText({ arrayBuffer: e.target.result })
+                            .then(result => {
+                                setFileContent(result.value);
+                                setIsLoading(false);
+                            })
+                            .catch(err => {
+                                console.error("Mammoth error:", err);
+                                setFileContent("Error extracting text from DOCX file.");
+                                setIsLoading(false);
+                            });
+                    };
+                    reader.readAsArrayBuffer(fileToProcess);
+                } else {
+                    setFileContent('Unsupported file type. Please upload a PDF or DOCX file.');
+                    setIsLoading(false);
+                }
+            };
+            
+            const generateReport = () => {
+                // Placeholder for AI report generation
+                setReportContent("Generating report... (This is a placeholder, AI integration is not yet implemented). Based on the document, the key points are...");
+            };
 
-                <!-- Section 5, 6, 7 -->
-                <h3 class="form-section-title">4. Case Summary & Investigation</h3>
-                <div class="row g-3 mb-4">
-                    <div class="col-12"><label class="form-label">Details of known/suspected/unknown accused</label><textarea class="form-control" name="ACCUSED_DETAILS" rows="3" required></textarea></div>
-                    <div class="col-12"><label class="form-label">Brief facts of the case (Gist of information)</label><textarea class="form-control" name="BRIEF_FACTS_OF_THE_CASE" rows="5" required></textarea></div>
-                    <div class="col-md-6"><label class="form-label">Investigating Officer (IO) Name</label><input type="text" class="form-control" name="INVESTIGATING_OFFICER_NAME" required></div>
-                    <div class="col-md-6"><label class="form-label">IO Rank</label><input type="text" class="form-control" name="IO_RANK" required></div>
-                    <div class="col-md-6"><label class="form-label">Officer-in-Charge Name</label><input type="text" class="form-control" name="OFFICER_IN_CHARGE_NAME" required></div>
-                    <div class="col-md-6"><label class="form-label">Officer-in-Charge Rank</label><input type="text" class="form-control" name="OFFICER_IN_CHARGE_RANK" required></div>
-                </div>
+            const exportToPdf = () => {
+                const element = document.getElementById('report-content-wrapper');
+                 if (!element) {
+                    alert("No content to export.");
+                    return;
+                }
+                const opt = {
+                  margin:       0.5,
+                  filename:     'MAKDOC_Report.pdf',
+                  image:        { type: 'jpeg', quality: 0.98 },
+                  html2canvas:  { scale: 2 },
+                  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
+                };
+                html2pdf().from(element).set(opt).save();
+            }
 
-                <div class="text-center">
-                    <button type="submit" class="btn btn-gradient">Generate FIR Preview</button>
-                </div>
-            </form>
-        </div>
-
-        <?php if ($is_submitted): ?>
-        <div class="fir-preview-container" id="fir-preview">
-            <div class="d-flex justify-content-between align-items-center mb-3">
-                 <h2 class="m-0">Generated FIR Preview</h2>
-                 <button class="btn btn-outline-secondary" onclick="window.print()"><i class="fas fa-print me-2"></i>Print</button>
-            </div>
-            <div class="fir-preview">
-                <h2>First Information Report (Under Section 154 Cr.P.C.)</h2>
-                
-                <div class="section">
-                    <div class="grid">
-                        <div><strong>1. District:</strong> <?php echo $data['DISTRICT']; ?></div>
-                        <div><strong>Police Station:</strong> <?php echo $data['POLICE_STATION']; ?></div>
-                        <div><strong>FIR No.:</strong> <?php echo $data['FIR_NO']; ?></div>
-                        <div><strong>Date:</strong> <?php echo $data['DATE_OF_FIR']; ?></div>
-                    </div>
-                </div>
-
-                <div class="section">
-                    <strong>2. Act(s) and Section(s):</strong>
-                    <p><?php echo $data['SECTIONS_OF_LAW']; ?></p>
-                </div>
-
-                <div class="section">
-                    <strong>3. Occurrence of Offence:</strong>
-                    <div class="grid">
-                        <div>a) <strong>Date/Time:</strong> From <?php echo $data['DATE_OF_OCCURRENCE']; ?> <?php echo $data['TIME_OF_OCCURRENCE']; ?></div>
-                        <div class="full-width">b) <strong>Place of Occurrence:</strong> <?php echo $data['PLACE_OF_OCCURRENCE']; ?></div>
-                        <div class="full-width">c) <strong>Information received at P.S.:</strong> Date: <?php echo $data['DATE_OF_INFO']; ?>, Time: <?php echo $data['TIME_OF_INFO']; ?></div>
-                    </div>
-                </div>
-
-                <div class="section">
-                    <strong>4. Informant / Complainant:</strong>
-                    <div class="grid">
-                        <div>a) <strong>Name:</strong> <?php echo $data['COMPLAINANT_NAME']; ?></div>
-                        <div>b) <strong>Father's/Husband's Name:</strong> <?php echo $data['COMPLAINANT_FATHER_NAME']; ?></div>
-                        <div class="full-width">c) <strong>Address:</strong> <?php echo $data['COMPLAINANT_ADDRESS']; ?></div>
-                    </div>
-                </div>
-
-                <div class="section">
-                    <strong>5. Details of known / suspected / unknown accused with full particulars:</strong>
-                    <p><?php echo $data['ACCUSED_DETAILS']; ?></p>
-                </div>
-
-                <div class="section">
-                    <strong>6. Brief facts of the case (Gist of information):</strong>
-                    <p><?php echo $data['BRIEF_FACTS_OF_THE_CASE']; ?></p>
-                </div>
-
-                <div class="section">
-                    <strong>7. Action Taken:</strong>
-                    <p>Since the above report reveals commission of offence(s) u/s as mentioned at Item No. 2. Registered the case and took up the investigation.</p>
-                    <div class="grid">
-                        <div><strong>Investigating Officer (IO):</strong> <?php echo $data['INVESTIGATING_OFFICER_NAME']; ?></div>
-                        <div><strong>Rank:</strong> <?php echo $data['IO_RANK']; ?></div>
-                    </div>
-                </div>
-
-                <div class="section" style="margin-top: 4rem;">
-                    <div class="grid">
-                        <div style="text-align: center;">
-                            _______________________<br>
-                            <strong>Signature / Thumb impression of Complainant / Informant</strong>
+            return (
+                <div className="flex h-screen bg-gray-100 font-sans">
+                    {/* Sidebar */}
+                    <aside className="w-64 bg-white shadow-md">
+                        <div className="p-6">
+                            <h1 className="text-2xl font-bold text-indigo-600">MAKDOC.AI</h1>
                         </div>
-                        <div style="text-align: center;">
-                            _______________________<br>
-                            <strong>Signature of Officer-in-Charge, Police Station</strong><br>
-                            <strong>Name:</strong> <?php echo $data['OFFICER_IN_CHARGE_NAME']; ?><br>
-                            <strong>Rank:</strong> <?php echo $data['OFFICER_IN_CHARGE_RANK']; ?><br>
-                            <strong>PS:</strong> <?php echo $data['POLICE_STATION']; ?>
+                        <nav className="mt-6">
+                            <a href="#" className="flex items-center px-6 py-3 text-gray-700 bg-gray-200">
+                                <i className="fas fa-file-upload mr-3"></i>
+                                Document Analysis
+                            </a>
+                            <a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
+                                <i className="fas fa-history mr-3"></i>
+                                History
+                            </a>
+                            <a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
+                                <i className="fas fa-cog mr-3"></i>
+                                Settings
+                            </a>
+                        </nav>
+                    </aside>
+
+                    {/* Main Content */}
+                    <main className="flex-1 p-8">
+                        <div className="glass-card p-6 h-full flex flex-col">
+                            <div className="glass-card-header -m-6 mb-6 p-4">
+                                <h2 className="text-xl font-semibold text-gray-800">AI Document Analysis</h2>
+                            </div>
+                            
+                            {/* Upload Area */}
+                            <div className="mb-6">
+                                <label htmlFor="file-upload" className="cursor-pointer btn-gradient text-white font-bold py-3 px-6 rounded-lg inline-block">
+                                    <i className="fas fa-upload mr-2"></i>
+                                    {file ? 'Change Document' : 'Upload Document (PDF/DOCX)'}
+                                </label>
+                                <input id="file-upload" type="file" className="hidden" onChange={handleFileChange} accept=".pdf,.docx" />
+                                {file && <span className="ml-4 text-gray-600">{file.name}</span>}
+                            </div>
+
+                            {/* Content & Report Area */}
+                            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6 min-h-0">
+                                {/* Extracted Text */}
+                                <div className="bg-white rounded-lg shadow p-4 flex flex-col">
+                                    <h3 className="text-lg font-semibold text-gray-700 mb-2">Extracted Content</h3>
+                                    <div className="flex-1 overflow-y-auto p-2 border rounded">
+                                        {isLoading ? (
+                                            <div className="flex justify-center items-center h-full">
+                                                <i className="fas fa-spinner fa-spin text-3xl text-indigo-500"></i>
+                                            </div>
+                                        ) : (
+                                            <pre className="whitespace-pre-wrap text-sm text-gray-600">{fileContent || "Upload a document to see its content here."}</pre>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* AI Generated Report */}
+                                <div className="bg-white rounded-lg shadow p-4 flex flex-col">
+                                    <h3 className="text-lg font-semibold text-gray-700 mb-2">Generated Report</h3>
+                                    <div id="report-content-wrapper" className="flex-1 overflow-y-auto p-2 border rounded">
+                                        <p className="text-sm text-gray-600">{reportContent}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            {/* Action Buttons */}
+                            <div className="mt-6 flex justify-end space-x-4">
+                                <button onClick={generateReport} disabled={!fileContent} className="btn-gradient font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
+                                    <i className="fas fa-magic mr-2"></i>
+                                    Generate Report
+                                </button>
+                                <button onClick={exportToPdf} disabled={!fileContent} className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
+                                    <i className="fas fa-file-pdf mr-2"></i>
+                                    Export as PDF
+                                </button>
+                            </div>
                         </div>
-                    </div>
+                    </main>
                 </div>
-            </div>
-        </div>
-        <?php endif; ?>
-    </main>
+            );
+        }
 
-    <!-- Footer -->
-    <footer class="text-center py-4 text-muted border-top">
-        <p>Built with <a href="https://flatlogic.com" target="_blank">Flatlogic</a></p>
-    </footer>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+        ReactDOM.render(<App />, document.getElementById('root'));
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
