diff --git a/routes/__pycache__/admin.cpython-313.pyc b/routes/__pycache__/admin.cpython-313.pyc
index 1c23c7e..6b9b3b4 100644
Binary files a/routes/__pycache__/admin.cpython-313.pyc and b/routes/__pycache__/admin.cpython-313.pyc differ
diff --git a/routes/admin.py b/routes/admin.py
index df1e99a..f885eb0 100644
--- a/routes/admin.py
+++ b/routes/admin.py
@@ -1,6 +1,6 @@
-from flask import Blueprint, jsonify
+from flask import Blueprint, jsonify, request
 from flask_login import login_required, current_user
-from models import db, Room, RoomFile, User, DocuPulseSettings
+from models import db, Room, RoomFile, User, DocuPulseSettings, HelpArticle
 import os
 from datetime import datetime
 
@@ -253,9 +253,9 @@ def get_usage_stats():
         stats = DocuPulseSettings.get_usage_stats()
         return jsonify(stats)
     except Exception as e:
-        return jsonify({'error': str(e)}), 500 
-    
-@admin.route('/help-articles/<int:article_id>', methods=['PUT'])
+        return jsonify({'error': str(e)}), 500
+
+@admin.route('/api/admin/help-articles/<int:article_id>', methods=['PUT'])
 @login_required
 def update_help_article(article_id):
     """Update a help article"""
@@ -307,7 +307,7 @@ def update_help_article(article_id):
         db.session.rollback()
         return jsonify({'error': str(e)}), 500
 
-@admin.route('/help-articles/<int:article_id>', methods=['DELETE'])
+@admin.route('/api/admin/help-articles/<int:article_id>', methods=['DELETE'])
 @login_required
 def delete_help_article(article_id):
     """Delete a help article"""
@@ -339,7 +339,7 @@ def delete_help_article(article_id):
         return jsonify({'error': str(e)}), 500
     
 # Help Articles API endpoints
-@admin.route('/help-articles', methods=['GET'])
+@admin.route('/api/admin/help-articles', methods=['GET'])
 @login_required
 def get_help_articles():
     """Get all help articles"""
@@ -364,7 +364,7 @@ def get_help_articles():
     
     return jsonify({'articles': articles_data})
 
-@admin.route('/help-articles', methods=['POST'])
+@admin.route('/api/admin/help-articles', methods=['POST'])
 @login_required
 def create_help_article():
     """Create a new help article"""
@@ -417,7 +417,7 @@ def create_help_article():
         db.session.rollback()
         return jsonify({'error': str(e)}), 500
 
-@admin.route('/help-articles/<int:article_id>', methods=['GET'])
+@admin.route('/api/admin/help-articles/<int:article_id>', methods=['GET'])
 @login_required
 def get_help_article(article_id):
     """Get a specific help article"""
diff --git a/templates/admin/support_articles.html b/templates/admin/support_articles.html
index 5f2df94..fb0e7fb 100644
--- a/templates/admin/support_articles.html
+++ b/templates/admin/support_articles.html
@@ -30,6 +30,37 @@
     .note-editor .note-editing-area {
         background-color: var(--white);
     }
+    .note-editor .note-toolbar {
+        background-color: var(--bg-color);
+        border-bottom: 1px solid var(--border-color);
+        border-radius: 0.375rem 0.375rem 0 0;
+    }
+    .note-editor .note-btn {
+        border: 1px solid var(--border-color);
+        background-color: var(--white);
+        color: var(--text-dark);
+    }
+    .note-editor .note-btn:hover {
+        background-color: var(--primary-color);
+        color: var(--white);
+        border-color: var(--primary-color);
+    }
+    .note-editor .note-btn.active {
+        background-color: var(--primary-color);
+        color: var(--white);
+        border-color: var(--primary-color);
+    }
+    .note-editor .note-editing-area .note-editable {
+        color: var(--text-dark);
+        font-family: inherit;
+        line-height: 1.6;
+        padding: 15px;
+    }
+    .note-editor .note-status-output {
+        background-color: var(--bg-color);
+        border-top: 1px solid var(--border-color);
+        color: var(--text-muted);
+    }
 </style>
 {% endblock %}
 
@@ -207,70 +238,83 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
 <script>
-$(document).ready(function() {
+document.addEventListener('DOMContentLoaded', function() {
     // Initialize Summernote for rich text editing
     $('#articleBody, #editArticleBody').summernote({
-        height: 300,
+        height: 400,
         toolbar: [
             ['style', ['style']],
-            ['font', ['bold', 'underline', 'italic', 'clear']],
+            ['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
             ['fontname', ['fontname']],
+            ['fontsize', ['fontsize']],
             ['color', ['color']],
             ['para', ['ul', 'ol', 'paragraph']],
             ['height', ['height']],
             ['table', ['table']],
-            ['insert', ['link', 'picture']],
-            ['view', ['fullscreen', 'codeview', 'help']]
+            ['insert', ['link', 'picture', 'video', 'hr']],
+            ['view', ['fullscreen', 'codeview', 'help']],
+            ['undo', ['undo', 'redo']]
         ],
         styleTags: [
             'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
-        ]
+        ],
+        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
+        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
+        callbacks: {
+            onInit: function() {
+                // Ensure proper styling when modal opens
+                $('.note-editor').css('border-color', 'var(--border-color)');
+                $('.note-editing-area').css('background-color', 'var(--white)');
+            }
+        }
     });
 
     // Load articles on page load
     loadArticles();
 
     // Handle create article form submission
-    $('#createArticleForm').on('submit', function(e) {
+    document.getElementById('createArticleForm').addEventListener('submit', function(e) {
         e.preventDefault();
         createArticle();
     });
 
     // Handle edit article form submission
-    $('#editArticleForm').on('submit', function(e) {
+    document.getElementById('editArticleForm').addEventListener('submit', function(e) {
         e.preventDefault();
         updateArticle();
     });
 
     // Handle delete confirmation
-    $('#confirmDelete').on('click', function() {
+    document.getElementById('confirmDelete').addEventListener('click', function() {
         deleteArticle();
     });
 });
 
 function loadArticles() {
-    $.get('/api/admin/help-articles', function(data) {
-        const articlesList = $('#articlesList');
-        articlesList.empty();
-        
-        if (data.articles.length === 0) {
-            articlesList.html(`
-                <div class="col-12">
-                    <div class="card border-0 shadow-sm">
-                        <div class="card-body text-center py-5">
-                            <i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
-                            <h4 class="text-muted mt-3">No Articles Yet</h4>
-                            <p class="text-muted">Create your first help article to get started.</p>
+    fetch('/api/admin/help-articles')
+        .then(response => response.json())
+        .then(data => {
+            const articlesList = document.getElementById('articlesList');
+            articlesList.innerHTML = '';
+            
+            if (data.articles.length === 0) {
+                articlesList.innerHTML = `
+                    <div class="col-12">
+                        <div class="card border-0 shadow-sm">
+                            <div class="card-body text-center py-5">
+                                <i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
+                                <h4 class="text-muted mt-3">No Articles Yet</h4>
+                                <p class="text-muted">Create your first help article to get started.</p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            `);
-            return;
-        }
+                `;
+                return;
+            }
 
-        data.articles.forEach(article => {
             const categoryNames = {
                 'getting-started': 'Getting Started',
                 'user-management': 'User Management',
@@ -280,8 +324,10 @@ function loadArticles() {
                 'administration': 'Administration'
             };
 
-            const card = $(`
-                <div class="col-lg-6 col-xl-4 mb-4">
+            data.articles.forEach(article => {
+                const card = document.createElement('div');
+                card.className = 'col-lg-6 col-xl-4 mb-4';
+                card.innerHTML = `
                     <div class="card article-card border-0 shadow-sm h-100">
                         <div class="card-body">
                             <div class="d-flex justify-content-between align-items-start mb-2">
@@ -311,91 +357,120 @@ function loadArticles() {
                             </div>
                         </div>
                     </div>
-                </div>
-            `);
-            articlesList.append(card);
+                `;
+                articlesList.appendChild(card);
+            });
+        })
+        .catch(error => {
+            console.error('Error loading articles:', error);
+            showAlert('Error loading articles: ' + error.message, 'danger');
         });
-    });
 }
 
 function createArticle() {
-    const formData = new FormData($('#createArticleForm')[0]);
+    const form = document.getElementById('createArticleForm');
+    const formData = new FormData(form);
     formData.set('body', $('#articleBody').summernote('code'));
-    formData.set('is_published', $('#isPublished').is(':checked'));
+    formData.set('is_published', document.getElementById('isPublished').checked);
 
-    $.ajax({
-        url: '/api/admin/help-articles',
+    fetch('/api/admin/help-articles', {
         method: 'POST',
-        data: formData,
-        processData: false,
-        contentType: false,
-        success: function(response) {
-            $('#createArticleModal').modal('hide');
-            $('#createArticleForm')[0].reset();
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('createArticleModal'));
+            modal.hide();
+            form.reset();
             $('#articleBody').summernote('code', '');
             loadArticles();
             showAlert('Article created successfully!', 'success');
-        },
-        error: function(xhr) {
-            showAlert('Error creating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
+        } else {
+            throw new Error(data.error || 'Unknown error');
         }
+    })
+    .catch(error => {
+        console.error('Error creating article:', error);
+        showAlert('Error creating article: ' + error.message, 'danger');
     });
 }
 
 function editArticle(articleId) {
-    $.get(`/api/admin/help-articles/${articleId}`, function(data) {
-        $('#editArticleId').val(data.article.id);
-        $('#editArticleTitle').val(data.article.title);
-        $('#editArticleCategory').val(data.article.category);
-        $('#editArticleBody').summernote('code', data.article.body);
-        $('#editOrderIndex').val(data.article.order_index);
-        $('#editIsPublished').prop('checked', data.article.is_published);
-        $('#editArticleModal').modal('show');
-    });
+    fetch(`/api/admin/help-articles/${articleId}`)
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('editArticleId').value = data.article.id;
+            document.getElementById('editArticleTitle').value = data.article.title;
+            document.getElementById('editArticleCategory').value = data.article.category;
+            $('#editArticleBody').summernote('code', data.article.body);
+            document.getElementById('editOrderIndex').value = data.article.order_index;
+            document.getElementById('editIsPublished').checked = data.article.is_published;
+            
+            const modal = new bootstrap.Modal(document.getElementById('editArticleModal'));
+            modal.show();
+        })
+        .catch(error => {
+            console.error('Error loading article:', error);
+            showAlert('Error loading article: ' + error.message, 'danger');
+        });
 }
 
 function updateArticle() {
-    const formData = new FormData($('#editArticleForm')[0]);
+    const form = document.getElementById('editArticleForm');
+    const formData = new FormData(form);
     formData.set('body', $('#editArticleBody').summernote('code'));
-    formData.set('is_published', $('#editIsPublished').is(':checked'));
+    formData.set('is_published', document.getElementById('editIsPublished').checked);
 
-    $.ajax({
-        url: `/api/admin/help-articles/${$('#editArticleId').val()}`,
+    fetch(`/api/admin/help-articles/${document.getElementById('editArticleId').value}`, {
         method: 'PUT',
-        data: formData,
-        processData: false,
-        contentType: false,
-        success: function(response) {
-            $('#editArticleModal').modal('hide');
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('editArticleModal'));
+            modal.hide();
             loadArticles();
             showAlert('Article updated successfully!', 'success');
-        },
-        error: function(xhr) {
-            showAlert('Error updating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
+        } else {
+            throw new Error(data.error || 'Unknown error');
         }
+    })
+    .catch(error => {
+        console.error('Error updating article:', error);
+        showAlert('Error updating article: ' + error.message, 'danger');
     });
 }
 
 function confirmDelete(articleId, title) {
-    $('#deleteArticleId').val(articleId);
-    $('#deleteArticleTitle').text(title);
-    $('#deleteArticleModal').modal('show');
+    document.getElementById('deleteArticleId').value = articleId;
+    document.getElementById('deleteArticleTitle').textContent = title;
+    
+    const modal = new bootstrap.Modal(document.getElementById('deleteArticleModal'));
+    modal.show();
 }
 
 function deleteArticle() {
-    const articleId = $('#deleteArticleId').val();
+    const articleId = document.getElementById('deleteArticleId').value;
     
-    $.ajax({
-        url: `/api/admin/help-articles/${articleId}`,
-        method: 'DELETE',
-        success: function(response) {
-            $('#deleteArticleModal').modal('hide');
+    fetch(`/api/admin/help-articles/${articleId}`, {
+        method: 'DELETE'
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteArticleModal'));
+            modal.hide();
             loadArticles();
             showAlert('Article deleted successfully!', 'success');
-        },
-        error: function(xhr) {
-            showAlert('Error deleting article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
+        } else {
+            throw new Error(data.error || 'Unknown error');
         }
+    })
+    .catch(error => {
+        console.error('Error deleting article:', error);
+        showAlert('Error deleting article: ' + error.message, 'danger');
     });
 }
 
@@ -407,7 +482,8 @@ function showAlert(message, type) {
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     `;
-    $('.container-fluid').prepend(alertHtml);
+    const container = document.querySelector('.container-fluid');
+    container.insertAdjacentHTML('afterbegin', alertHtml);
 }
 </script>
 {% endblock %} 
\ No newline at end of file