diff --git a/EditorLogicFlow.md b/EditorLogicFlow.md
new file mode 100644
index 0000000..08ac09c
--- /dev/null
+++ b/EditorLogicFlow.md
@@ -0,0 +1,443 @@
+# Quiz Editor Logic Flow Documentation
+
+This document outlines how key properties affect routing and editor behavior in the quiz system.
+
+## Key Properties
+
+### 1. `status` Property
+
+#### Routing Effects
+- Determines which editor view to show
+- New items start as `'draft'`
+- Existing items preserve their status
+- Controls access to edit functionality
+
+#### Editor Behavior
+- Controls save/submit button visibility
+- Determines validation requirements
+- Affects UI feedback and messaging
+
+### 2. `beta` Property
+
+#### Routing Effects
+- Affects quiz set visibility
+- Controls access to beta features
+- May restrict certain routes or views
+
+#### Editor Behavior
+- Shows additional UI elements for beta testing
+- May enable experimental features
+- Provides beta-specific feedback
+
+### 3. `inProgress` Property
+
+#### Routing Effects
+- Determines quiz set visibility
+- Separates published from proposed sets
+- Affects navigation between views
+
+#### Editor Behavior
+- Shows special UI components for in-progress items
+- Displays progress indicators
+- Affects tab navigation and organization
+
+### 4. `revisionNumber` and `version` Properties
+
+#### Routing Effects
+- Determines which version to load
+- Controls version history access
+- Affects navigation between versions
+
+#### Editor Behavior
+- Controls version history display
+- Manages save behavior and versioning
+- Tracks changes and maintains history
+
+### 5. `isPermanent` Property
+
+#### Routing Effects
+- Determines if item can be edited directly
+- Controls creation of draft copies
+- Affects navigation between original and copies
+
+#### Editor Behavior
+- Controls edit permissions
+- Affects save behavior
+- Manages relationship between original and modified versions
+
+## Key Interactions
+
+### 1. Version Control Flow
+- `version` and `revisionNumber` work together to track changes
+- `isPermanent` determines if changes create new versions or modify existing ones
+- Version history is maintained for all changes
+
+### 2. Quiz Set Organization
+- `inProgress` and `beta` work together to organize quiz sets
+- `status` determines visibility and editability
+- Sets can be filtered based on these properties
+
+### 3. Editor Access Control
+- `isPermanent` and `status` combine to control edit permissions
+- `version` tracks changes and maintains history
+- Access control is enforced at multiple levels
+
+## Implementation Notes
+
+1. New items always start with:
+   ```javascript
+   {
+     status: 'draft',
+     version: 1,
+     isPermanent: false
+   }
+   ```
+
+2. Version tracking:
+   ```javascript
+   if (existingVersion) {
+     newVersion = existingVersion + 1;
+   } else {
+     newVersion = 1;
+   }
+   ```
+
+3. Quiz set filtering:
+   ```javascript
+   const publishedQuizSets = quizSets.filter(set => !set.inProgress);
+   const proposedQuizSets = quizSets.filter(set => set.inProgress);
+   ```
+
+4. Edit permissions:
+   ```javascript
+   if (item.isPermanent) {
+     // Create a copy for editing
+     const itemCopy = {
+       ...item,
+       originalId: itemId,
+       isDraft: true
+     };
+   }
+   ```
+
+## State Transitions
+
+1. **New Item Creation**:
+   - `status`: 'draft'
+   - `version`: 1
+   - `isPermanent`: false
+
+2. **Submitting for Review**:
+   - `status`: 'pending'
+   - `version`: preserved
+   - `isPermanent`: false
+
+3. **Approval**:
+   - `status`: 'approved'
+   - `version`: preserved
+   - `isPermanent`: true
+
+4. **Rejection**:
+   - `status`: 'rejected'
+   - `version`: preserved
+   - `isPermanent`: false
+
+5. **Deletion**:
+   - `status`: 'deleted'
+   - `version`: preserved
+   - `isPermanent`: preserved
+
+## Control Flow Diagrams
+
+### 1. Quiz Item Lifecycle
+
+```mermaid
+stateDiagram-v2
+    [*] --> Draft
+    Draft --> Pending: Submit for Review
+    Pending --> Approved: Admin Approval
+    Pending --> Rejected: Admin Rejection
+    Approved --> Draft: Create New Version
+    Rejected --> Draft: Edit and Resubmit
+    Draft --> [*]: Delete
+    Pending --> [*]: Delete
+    Approved --> [*]: Delete
+    Rejected --> [*]: Delete
+```
+
+### 2. Version Control Flow
+
+```mermaid
+flowchart TD
+    A[New Item] -->|Create| B[Version 1]
+    B -->|Edit| C{Is Permanent?}
+    C -->|Yes| D[Create Copy]
+    C -->|No| E[Edit Directly]
+    D -->|Save| F[New Version]
+    E -->|Save| F
+    F -->|Submit| G[Pending Review]
+    G -->|Approve| H[Approved Version]
+    G -->|Reject| I[Rejected Version]
+    H -->|Edit| D
+    I -->|Edit| D
+```
+
+### 3. Quiz Set Organization
+
+```mermaid
+flowchart LR
+    A[Quiz Sets] --> B{In Progress?}
+    B -->|Yes| C[Proposed Sets]
+    B -->|No| D[Published Sets]
+    C --> E{Beta?}
+    D --> F[Available to All]
+    E -->|Yes| G[Beta Features]
+    E -->|No| H[Standard Features]
+```
+
+### 4. Editor Access Control
+
+```mermaid
+flowchart TD
+    A[Access Request] --> B{Is Permanent?}
+    B -->|Yes| C{Has Edit Rights?}
+    B -->|No| D[Direct Edit]
+    C -->|Yes| E[Create Copy]
+    C -->|No| F[View Only]
+    D --> G[Save Changes]
+    E --> G
+    G --> H{Valid?}
+    H -->|Yes| I[Update Version]
+    H -->|No| J[Show Errors]
+```
+
+### 5. State Transition Matrix
+
+```mermaid
+stateDiagram-v2
+    [*] --> Draft: Create
+    Draft --> Pending: Submit
+    Pending --> Approved: Admin OK
+    Pending --> Rejected: Admin No
+    Approved --> Draft: New Version
+    Rejected --> Draft: Edit
+    state Draft {
+        [*] --> Editing
+        Editing --> Saving
+        Saving --> [*]
+    }
+    state Pending {
+        [*] --> Review
+        Review --> Decision
+        Decision --> [*]
+    }
+    state Approved {
+        [*] --> Published
+        Published --> Archived
+        Archived --> [*]
+    }
+```
+
+### 6. Forking Mechanism
+
+```mermaid
+flowchart TD
+    A[Original Item] --> B{Is Permanent?}
+    B -->|Yes| C[Create Fork]
+    B -->|No| D[Direct Edit]
+    C --> E[New Draft]
+    E --> F[Edit Fork]
+    F --> G[Save Changes]
+    G --> H[Submit Fork]
+    H --> I[Review Fork]
+    I -->|Approve| J[Merge Changes]
+    I -->|Reject| K[Discard Fork]
+    J --> L[Update Original]
+    K --> M[Return to Original]
+```
+
+The forking mechanism allows users to:
+1. Create a copy of a permanent item
+2. Make changes without affecting the original
+3. Submit changes for review
+4. Merge approved changes back to the original
+
+This is particularly important for:
+- Collaborative editing
+- Version control
+- Change tracking
+- Quality assurance
+
+These diagrams illustrate:
+1. The complete lifecycle of a quiz item
+2. How version control works with permanent items
+3. How quiz sets are organized and filtered
+4. The access control flow for editing
+5. Detailed state transitions for each major state
+
+The diagrams use standard flowchart and state diagram notation to show:
+- Decision points (diamonds)
+- Processes (rectangles)
+- States (rounded rectangles)
+- Transitions (arrows)
+- Start/End points (circles)
+
+## Security Concerns and Recommendations
+
+### Identified Security Issues
+
+1. **Version Control Race Conditions**
+   - Multiple users could create conflicting versions
+   - No explicit handling of concurrent edits
+   - Potential for version number conflicts
+
+2. **Access Control Gaps**
+   - Direct edit path lacks explicit permission checks
+   - No validation of user roles for certain operations
+   - Potential for unauthorized modifications
+
+3. **State Transition Vulnerabilities**
+   - No validation of state transitions
+   - Could allow skipping of required states
+   - Potential for unauthorized state changes
+
+4. **Missing Validation Points**
+   - Incomplete validation checks
+   - No explicit security validation
+   - Could miss critical security checks
+
+5. **Quiz Set Organization Risks**
+   - No explicit handling of set ownership
+   - Missing permission checks for set modifications
+   - Potential for unauthorized set changes
+
+6. **Version History Vulnerabilities**
+   - No protection against version history tampering
+   - Missing version number validation
+   - Could allow version manipulation
+
+7. **Missing Error States**
+   - No explicit error handling
+   - Missing rollback mechanisms
+   - Could leave system in inconsistent state
+
+8. **Data Integrity Concerns**
+   - Incomplete data validation
+   - No corruption checks
+   - Could allow invalid data entry
+
+9. **Audit Trail Gaps**
+   - Missing state change logging
+   - No user action tracking
+   - Difficult to track malicious activity
+
+10. **Resource Management**
+    - No resource limit handling
+    - Missing rate limiting
+    - Potential for resource exhaustion
+
+### Recommended Solutions
+
+#### 1. Enhanced Validation Layer
+
+```mermaid
+flowchart TD
+    A[Access Request] --> B{Is Permanent?}
+    B -->|Yes| C{Has Edit Rights?}
+    B -->|No| D{Has User Permissions?}
+    D -->|Yes| E[Direct Edit]
+    D -->|No| F[Access Denied]
+```
+
+#### 2. State Transition Guards
+
+```mermaid
+stateDiagram-v2
+    [*] --> Draft: Create
+    Draft --> Pending: Submit + Validate
+    Pending --> Approved: Admin OK + Validate
+    Pending --> Rejected: Admin No + Validate
+```
+
+#### 3. Version Control Safeguards
+
+```mermaid
+flowchart TD
+    A[Edit Request] --> B{Check Version}
+    B -->|Current| C[Proceed]
+    B -->|Outdated| D[Fetch Latest]
+    D --> E{Has Conflicts?}
+    E -->|Yes| F[Resolve Conflicts]
+    E -->|No| C
+```
+
+#### 4. Error Handling
+
+```mermaid
+flowchart TD
+    A[Operation] --> B{Validate}
+    B -->|Success| C[Proceed]
+    B -->|Failure| D[Log Error]
+    D --> E[Rollback]
+    E --> F[Notify User]
+```
+
+#### 5. Audit Trail
+
+```mermaid
+flowchart TD
+    A[State Change] --> B[Log Change]
+    B --> C[Validate Log]
+    C --> D[Store Log]
+    D --> E[Notify Admin]
+```
+
+### Implementation Recommendations
+
+1. **Add Validation Checks**
+   - Implement comprehensive input validation
+   - Add role-based access control
+   - Validate all state transitions
+
+2. **Enhance Error Handling**
+   - Implement proper error logging
+   - Add rollback mechanisms
+   - Create error recovery procedures
+
+3. **Improve Version Control**
+   - Add version conflict detection
+   - Implement version locking
+   - Add version history validation
+
+4. **Strengthen Access Control**
+   - Implement proper permission checks
+   - Add role validation
+   - Create access control lists
+
+5. **Add Monitoring**
+   - Implement audit logging
+   - Add activity monitoring
+   - Create alert systems
+
+6. **Resource Protection**
+   - Implement rate limiting
+   - Add resource quotas
+   - Create usage monitoring
+
+7. **Data Protection**
+   - Add data validation
+   - Implement corruption checks
+   - Create backup systems
+
+8. **State Management**
+   - Add state transition validation
+   - Implement state recovery
+   - Create state monitoring
+
+These recommendations should be implemented to ensure:
+- System security
+- Data integrity
+- Proper access control
+- Audit capability
+- Error recovery
+- Resource protection 
\ No newline at end of file
diff --git a/data/quiz-items copy.js b/data/quiz-items copy.js
deleted file mode 100644
index 28c6f67..0000000
--- a/data/quiz-items copy.js	
+++ /dev/null
@@ -1,89 +0,0 @@
-export const quizItems = [{
-    title: "'Advanced Phonemic Awareness' 1",
-    subtitle: "When Should T's Use this Practice?",
-    id: 0,
-    nestlevel: "0",
-    has_subitems: false,
-    subitems: [],
-    has_XPs: false,
-    XPs: [],
-    Question: "Teaching 'Advanced Phonemic Awareness' involves:",
-    answer_type: "mc",
-    option1: "Rhyming",
-    option2: "Blending and segmenting onset-rimes",
-    option3: "Phoneme addition and deletion",
-    option4: "Phoneme Manipulation",
-    correctAnswer: 3,
-    explanation: "This video illustrates: Phoneme Addition",
-    caution: "The practice has not yet been studied.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "'Advanced Phonemic Awareness' 2",
-    subtitle: "",
-    id: 1,
-    nestlevel: "1",
-    has_subitems: false,
-    subitems: [],
-    has_XPs: false,
-    XPs: [],
-    Question: "The practice of teaching 'Advanced Phonemic Awareness' was first suggested by:",
-    answer_type: "mc",
-    option1: "Marie Clay",
-    option2: "David Kilpatrick",
-    option3: "Heggerty",
-    option4: "Fontas & Pinnell",
-    correctAnswer: 2,
-    explanation: "Kilpatrick discovered a pattern of how some struggling children were succeeding, and hypothesized that this additional skill-building practice might help others.",
-    caution: "The practice has not yet been studied, and Kilpatrick regrets the choice of name.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Benchmark BAS",
-    subtitle: "",
-    id: 2,
-    nestlevel: "1",
-    has_subitems: false,
-    subitems: [],
-    has_XPs: false,
-    XPs: [],
-    Question: "The Fontas & Pinnell Benchmark assessment (BAS) is a reasonably good indicator of which children are having difficulties with reading. :",
-    answer_type: "tf",
-    option1: "",
-    option2: "",
-    option3: "",
-    option4: "",
-    correctAnswer: false,
-    explanation: "Three independent studies show that F&P Benchmark/BAS is about as reliable as flipping a coin./n And far more expensive in time and purchase/training cost.",
-    cautionLevel: "f",
-    caution: "Studies indicate that this assessment should be set aside. Use more reliable measures.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "MTSS and Universal screeners",
-    subtitle: "",
-    id: 3,
-    nestlevel: "1",
-    has_subitems: false,
-    subitems: [],
-    has_XPs: false,
-    XPs: [],
-    Question: "Typically, an SOR-based school will use a universal screener to assign students to:",
-    answer_type: "mc",
-    option1: "Tier One",
-    option2: "Tier Two",
-    option3: "Tier Three",
-    option4: "Tiers two and three",
-    option5: "None of the Above",
-    correctAnswer: 4,
-    explanation: "In an MTSS school, Tiers are not a class of student. Tiers represent a system for giving each student exactly the instruction and practice they need.",
-    explanation2: "In fact, the most common use of a universal screener may be to change what's taught in Tier one.",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}]
\ No newline at end of file
diff --git a/data/quiz-items.js b/data/quiz-items.js
deleted file mode 100644
index 99b3fed..0000000
--- a/data/quiz-items.js
+++ /dev/null
@@ -1,288 +0,0 @@
-export const quizEntries = [{
-    title: "What Does Reading Intervention Look & Sound Like?",
-    subtitle: "",
-    id: 0,
-    Question: "When you're leading reading interventions, should you: ",
-    answer_type: "mc",
-    option1: "Teach a comprehensive approach",
-    option2: "Teach to the students' assessed weaknesses",
-    option3: "",
-    option4: "",
-    option5: "",
-    correctAnswer: 2,
-    explanation: "A 2018 meta-analysis by Mathew Hall and Mathew Burns, of 26 experimental or quasi-experimental studies on reading interventions found: 'Interventions were more effective if they were targeted to a specific skill (g = 0.65), then as part of a comprehensive intervention program that addressed multiple skills (g = 0.35).'",
-    explanation2: "Interventions that targeted student deficits were twice as effective!",
-    cautionLevel: "",
-    caution: "[Citations needed]",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "'Advanced Phonemic Awareness' 1",
-    subtitle: "When Should T's Use this Practice?",
-    id: 1,
-    nestlevel: "0",
-    has_subitems: false,
-    subitems: [],
-    has_XPs: false,
-    XPs: [],
-    Question: "Teaching 'Advanced Phonemic Awareness' involves:",
-    answer_type: "mc",
-    option1: "Rhyming",
-    option2: "Blending and segmenting onset-rimes",
-    option3: "Phoneme addition and deletion",
-    option4: "Phoneme Manipulation",
-    correctAnswer: 3,
-    explanation: "This video illustrates: Phoneme Addition",
-    caution: "The practice has not yet been studied.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "'Advanced Phonemic Awareness' 2",
-    subtitle: "",
-    id: 2,
-    Question: "The practice of teaching 'Advanced Phonemic Awareness' was first suggested by:",
-    answer_type: "mc",
-    option1: "Marie Clay",
-    option2: "David Kilpatrick",
-    option3: "Heggerty",
-    option4: "Fontas & Pinnell",
-    correctAnswer: 2,
-    explanation: "Kilpatrick discovered a pattern of how some struggling children were succeeding, and hypothesized that this additional skill-building practice might help others.",
-    caution: "The practice has not yet been studied, and Kilpatrick regrets the choice of name.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "MTSS and Universal screeners",
-    subtitle: "",
-    id: 3,
-    Question: "Typically, an SOR-based school will use a universal screener to assign students to:",
-    answer_type: "mc",
-    option1: "Tier One",
-    option2: "Tier Two",
-    option3: "Tier Three",
-    option4: "Tiers two and three",
-    option5: "None of the Above",
-    correctAnswer: 5,
-    explanation: "In an MTSS school, Tiers are not a class of student. Tiers represent a system for giving each student exactly the instruction and practice they need.",
-    explanation2: "In fact, the most common use of a universal screener may be to change what's taught in Tier one.",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Developmental Language Disorder",
-    subtitle: "",
-    id: 4,
-    Question: "Developmental Language Disorder is best described by:",
-    answer_type: "mc",
-    option1: "a brain-based developmental disorder that is a subset (type of) dyslexia",
-    option2: "a brain-based developmental disorder that contributes to reading difficulties, but occurs in children who do not have dyslexia ",
-    option3: "a brain-based developmental disorder that includes dyslexia as one of its instances",
-    option4: "a brain-based developmental disorder that contributes to reading difficulties, and may be accompanied by dyslexia in some children.",
-    option5: "",
-    correctAnswer: 4,
-    explanation: "Children with DLD have issues with languge comprehension--not word recognition, but with understanding language.",
-    explanation2: "DLD is more common than dyslexia (1 in 14 kids). A child may have DLD, Dyslexia, or both.",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Structured Linguistic Literacy",
-    subtitle: "",
-    id: 5,
-    Question: "Structured Linguistic Literacy is:",
-    answer_type: "mc",
-    option1: "an alternative approach to more traditional phonics instruction that initially emphasizes activities like: segment sounds first, write sounds next, and blend sounds back into a word",
-    option2: "an approach to teaching language development (word meaning, phrases, sentence structure, etc.) at the k-5 level.",
-    option3: "an innovative, but not-yet-significantly-used commercial program for developing word recognition in children.",
-    option4: "a made-up term designed to poke fun at the many buzzwords which have come to surround the teaching of reading.",
-    option5: "",
-    correctAnswer: 1,
-    explanation: "Structured Linguistic Literacy is a new name for a speech-to-print approach to phonics.",
-    explanation2: "",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Components of Instruction",
-    subtitle: "",
-    id: 6,
-    Question: "According to the renowned literacy leader Timothy Shanahan, the general breakdown of an early literacy day is: ",
-    answer_type: "mc",
-    option1: "~1/5 Phonemic Awareness, 1/5 Phonics, 1/5 Oral Fluency, 1/5 Vocabulary Development, and 1/5 Comprehension",
-    option2: "~1/4 words, 1/4 text fluency, 1/4 comprehension, and 1/4 writing",
-    option3: "~1/3 spelling & vocabulary, 1/3 sentence meaning, and 1/3 text comprehension",
-    option4: "~1/3 reading fluency and 2/3 comprehension strategies and meaningful writing",
-    option5: "",
-    correctAnswer: 2,
-    explanation: "This is a rule of thumb, and all such rules are meant to be only rough approximations.",
-    explanation2: "Yet the general idea is: begin the lesson by expanding either the decoding abilities of younger children, or the morphemic, vocabulary and spelling abilities of older children; then focus on a text each day, allowing students to analyse, discuss, and writie about it in various ways.",
-    cautionLevel: "a",
-    caution: "While no exact research base can validate this as science, it reflects both the needs science has identified, and the practical realities of the classroom.",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Orthographic Mapping",
-    subtitle: "",
-    id: 7,
-    Question: "Is there an age window for mastering orthographic mapping?",
-    answer_type: "mc",
-    option1: "Yes.",
-    option2: "No.",
-    option3: "",
-    option4: "",
-    option5: "",
-    correctAnswer: 1,
-    explanation: "Much like speaking a foreign language without an accent, the window for effortless decoding begins to close around age 9.",
-    explanation2: "While even adult dyslexics can benefit from learning basic phonics, many children who don't get this learning by ~age 9 will always suffer from that lack.",
-    cautionLevel: "a",
-    caution: "[Citations needed]",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Progress Monitoring",
-    subtitle: "",
-    id: 8,
-    Question: "Which of these is NOT a reason that the ORF (DIBELS/Acadience) has become the go-to progress monitoring tool for SOR professionals?",
-    answer_type: "mc",
-    option1: "They are quick, and simple to administer and score, taking just a few minutes per student.",
-    option2: "They show students' progress toward a rate of approximately 90-100 wcpm at the end of second grade, and 180 wcpm as adult readers.",
-    option3: "They do not require a great deal of training to administer.",
-    option4: "They measure students' oral language development.",
-    option5: "They are a good measure of reading comprehension in lower grades.",
-    correctAnswer: 4,
-    explanation: "Oral language development should usually be more advanced than the skills being measured by ORF/DIBELS.",
-    explanation2: "Children who are not advancing well in oral language development may need more Tier I, II, or III instruction.",
-    cautionLevel: "",
-    caution: "[Citations needed]",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Age of the Science of Reading",
-    subtitle: "",
-    id: 9,
-    Question: "A convenient marker for dating the science of reading is:",
-    answer_type: "mc",
-    option1: "~The founding of the Harvard Reading Lab",
-    option2: "Dehaene & others' use fMRI to demonstrate location of Visual Word Form Area",
-    option3: "Seidenberg & McClelland's simulations supporting a model with phonological, orthographic, and semantic processors",
-    option4: "Linnea Ehri coining the term 'Orthographic Mapping'",
-    option5: "",
-    correctAnswer: 1,
-    explanation: "Jeanne Chall founded the Harvard Reading Lab in 1966.",
-    explanation2: "While much psychological research around reading proceeds this, and Chall's 1967 book, 'Learning to Read: The Great Debate' surveyed research from 1912 through 1965; the coordinated research from this point forward signals SOR as an integrated area of study.",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "About Comprehension",
-    subtitle: "",
-    id: 10,
-    Question: "Comprehension is best described as:",
-    answer_type: "mc",
-    option1: "A 'Pillar' of literacy",
-    option2: "A skill, like decoding words",
-    option3: "A condition created when the reader has sufficient word recognition skills, language comprehension knowledge, and background knowledge about the topic of the text",
-    option4: "",
-    option5: "",
-    correctAnswer: 3,
-    explanation: "To comprehend text, the reader must have all three.",
-    explanation2: "",
-    cautionLevel: "",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Assessing Student Weaknesses",
-    subtitle: "",
-    id: 11,
-    Question: "When we say 'assessed student weaknesses' with respect to reading skills, a Structured Literacy (SOR) approach often starts with a screener called Oral Reading Fluency. (Or DIBELS, or Acadience, or other brand name.)",
-    questionP2: "What does ORF tell us that other assessments might not?",
-    answer_type: "mc",
-    option1: "A student’s ability to read words in connected text",
-    option2: "A student's speed and accuracy of reading, compared to peers.",
-    option3: "It is an accurate indicator of reading comprehension.",
-    option4: "a and b",
-    option5: "a, b, and c",
-    correctAnswer: 5,
-    explanation: "For K-3, for most (9 of 10) students, ORF has been shown over the years to be a reliable predictor of student reading success, and an indicator of their ability to comprehend.",
-    explanation2: "Dr. Stephanie Stollar's Reading Science Academy YouTube channel has an excellent explanation of this. https://www.youtube.com/watch?v=PgExOz1YMIw",
-    cautionLevel: "",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Speech to Print",
-    subtitle: "",
-    id: 12,
-    Question: "Speech to Print is:",
-    answer_type: "mc",
-    option1: "an alternative approach to more traditional phonics instruction that initially emphasizes activities like: segment sounds first, write sounds next, and blend sounds back into a word",
-    option2: "an approach to teaching language development (word meaning, phrases, sentence structure, etc.) at the k-5 level.",
-    option3: "an innovative, but not-yet-significantly-used commercial program for developing word recognition in children.",
-    option4: "",
-    option5: "",
-    correctAnswer: 1,
-    explanation: "Speech to Print can come in differnt forms, but is generally just a reordinging of the scope and sequence of the earliest phonics instruction.",
-    explanation2: "It's also called 'Structured Linguistic Literacy'",
-    cautionLevel: "a",
-    caution: "",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Orthographic Mapping",
-    subtitle: "(Creating 'sight words')",
-    id: 13,
-    Question: "When children convert a word they see from an unknown word, to one they can decode, then to one they recognize instantly, we call this process 'orthographic mapping.",
-    questionP2: "Is there an age window for mastering orthographic mapping?",
-    answer_type: "mc",
-    option1: "Yes.",
-    option2: "No.",
-    option3: "",
-    option4: "",
-    option5: "",
-    correctAnswer: 1,
-    explanation: "Much like speaking a foreign language without an accent, the window for effortless decoding begins to close around age 9.",
-    explanation2: "While even adult dyslexics can benefit from learning basic phonics, many children who don't get this learning by ~age 9 will always suffer from that lack.",
-    cautionLevel: "a",
-    caution: "[Citations needed]",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}, {
-    title: "Age of the Science of Reading",
-    subtitle: "",
-    id: 14,
-    Question: "The science of reading has essentially been around as a field for:",
-    questionP2: "",
-    answer_type: "mc",
-    option1: "20 years",
-    option2: "30 years",
-    option3: "40 years",
-    option4: "50 years",
-    option5: "60 years",
-    correctAnswer: 5,
-    explanation: "While reading science has roots going back 100 years or more, a convenient marker for the birth of the field is the founding of the Harvard Reading lab in 1966.",
-    explanation2: "The following year she published 'Learning to Read: the Great Debate', a compilation of research to date.",
-    cautionLevel: "",
-    caution: "[Citations needed]",
-    closingText: "",
-    closingText2: "",
-    modal: ""
-}]
\ No newline at end of file
diff --git a/data/quizSets.js b/data/quizSets.js
deleted file mode 100644
index 75c493b..0000000
--- a/data/quizSets.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const quizSets = [{
-    setName: "expert",
-    items: [2, 1, 5, 4, 6]
-},
-{
-    setName: "Basic",
-    items: [0, 11, 9, 11, 5, 4, 6]
-}
-];
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 72e91d7..ecfe721 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,9 +17,11 @@
         "@vercel/analytics": "^1.4.1",
         "@vitejs/plugin-vue": "^5.2.1",
         "amqplib": "^0.10.5",
+        "dompurify": "^3.2.4",
         "firebase": "^11.2.0",
-        "pinia": "^2.3.1",
-        "vercel": "^39.3.0",
+        "pinia": "^3.0.1",
+        "tailwindcss": "^3.4.17",
+        "vercel": "^41.4.1",
         "vue": "^3.5.13",
         "vue-json-pretty": "^2.4.0",
         "vue-lite-youtube-embed": "^1.2.4",
@@ -50,7 +52,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -78,12 +79,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
-      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.10.tgz",
+      "integrity": "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.7"
+        "@babel/types": "^7.26.10"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -93,9 +94,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
-      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
+      "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -117,6 +118,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@edge-runtime/format": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@edge-runtime/format/-/format-2.2.1.tgz",
@@ -166,9 +177,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
-      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
+      "integrity": "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==",
       "cpu": [
         "ppc64"
       ],
@@ -182,9 +193,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
-      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.1.tgz",
+      "integrity": "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==",
       "cpu": [
         "arm"
       ],
@@ -198,9 +209,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
-      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz",
+      "integrity": "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==",
       "cpu": [
         "arm64"
       ],
@@ -214,9 +225,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
-      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.1.tgz",
+      "integrity": "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==",
       "cpu": [
         "x64"
       ],
@@ -230,9 +241,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
-      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz",
+      "integrity": "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==",
       "cpu": [
         "arm64"
       ],
@@ -246,9 +257,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
-      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz",
+      "integrity": "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==",
       "cpu": [
         "x64"
       ],
@@ -262,9 +273,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==",
       "cpu": [
         "arm64"
       ],
@@ -278,9 +289,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
-      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz",
+      "integrity": "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==",
       "cpu": [
         "x64"
       ],
@@ -294,9 +305,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
-      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz",
+      "integrity": "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==",
       "cpu": [
         "arm"
       ],
@@ -310,9 +321,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
-      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz",
+      "integrity": "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==",
       "cpu": [
         "arm64"
       ],
@@ -326,9 +337,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
-      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz",
+      "integrity": "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==",
       "cpu": [
         "ia32"
       ],
@@ -342,9 +353,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
-      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz",
+      "integrity": "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==",
       "cpu": [
         "loong64"
       ],
@@ -358,9 +369,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
-      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz",
+      "integrity": "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==",
       "cpu": [
         "mips64el"
       ],
@@ -374,9 +385,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
-      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz",
+      "integrity": "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==",
       "cpu": [
         "ppc64"
       ],
@@ -390,9 +401,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
-      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz",
+      "integrity": "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==",
       "cpu": [
         "riscv64"
       ],
@@ -406,9 +417,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
-      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz",
+      "integrity": "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==",
       "cpu": [
         "s390x"
       ],
@@ -422,9 +433,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
-      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz",
+      "integrity": "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==",
       "cpu": [
         "x64"
       ],
@@ -438,9 +449,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==",
       "cpu": [
         "arm64"
       ],
@@ -454,9 +465,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
-      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz",
+      "integrity": "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==",
       "cpu": [
         "x64"
       ],
@@ -470,9 +481,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
-      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz",
+      "integrity": "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==",
       "cpu": [
         "arm64"
       ],
@@ -486,9 +497,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
-      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz",
+      "integrity": "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==",
       "cpu": [
         "x64"
       ],
@@ -502,9 +513,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
-      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz",
+      "integrity": "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==",
       "cpu": [
         "x64"
       ],
@@ -518,9 +529,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
-      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz",
+      "integrity": "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==",
       "cpu": [
         "arm64"
       ],
@@ -534,9 +545,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
-      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz",
+      "integrity": "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==",
       "cpu": [
         "ia32"
       ],
@@ -550,9 +561,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
-      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz",
+      "integrity": "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==",
       "cpu": [
         "x64"
       ],
@@ -575,15 +586,15 @@
       }
     },
     "node_modules/@firebase/analytics": {
-      "version": "0.10.11",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.11.tgz",
-      "integrity": "sha512-zwuPiRE0+hgcS95JZbJ6DFQN4xYFO8IyGxpeePTV51YJMwCf3lkBa6FnZ/iXIqDKcBPMgMuuEZozI0BJWaLEYg==",
+      "version": "0.10.12",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.12.tgz",
+      "integrity": "sha512-iDCGnw6qdFqwI5ywkgece99WADJNoymu+nLIQI4fZM/vCZ3bEo4wlpEetW71s1HqGpI0hQStiPhqVjFxDb2yyw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/installations": "0.6.12",
+        "@firebase/component": "0.6.13",
+        "@firebase/installations": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -591,15 +602,15 @@
       }
     },
     "node_modules/@firebase/analytics-compat": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.17.tgz",
-      "integrity": "sha512-SJNVOeTvzdqZQvXFzj7yAirXnYcLDxh57wBFROfeowq/kRN1AqOw1tG6U4OiFOEhqi7s3xLze/LMkZatk2IEww==",
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.18.tgz",
+      "integrity": "sha512-Hw9mzsSMZaQu6wrTbi3kYYwGw9nBqOHr47pVLxfr5v8CalsdrG5gfs9XUlPOZjHRVISp3oQrh1j7d3E+ulHPjQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/analytics": "0.10.11",
+        "@firebase/analytics": "0.10.12",
         "@firebase/analytics-types": "0.8.3",
-        "@firebase/component": "0.6.12",
-        "@firebase/util": "1.10.3",
+        "@firebase/component": "0.6.13",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -613,14 +624,14 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/app": {
-      "version": "0.10.18",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.18.tgz",
-      "integrity": "sha512-VuqEwD/QRisKd/zsFsqgvSAx34mZ3WEF47i97FD6Vw4GWAhdjepYf0Hmi6K0b4QMSgWcv/x0C30Slm5NjjERXg==",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.11.2.tgz",
+      "integrity": "sha512-bFee0hPJZBzNtiizRxdgsu8C9DW3mn1y0OJJ4zHQsccjDYzGOfvN0G3CMGyBIiwNctsFpQa8orbp2IKywoUeqA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "idb": "7.1.1",
         "tslib": "^2.1.0"
       },
@@ -629,14 +640,14 @@
       }
     },
     "node_modules/@firebase/app-check": {
-      "version": "0.8.11",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.11.tgz",
-      "integrity": "sha512-42zIfRI08/7bQqczAy7sY2JqZYEv3a1eNa4fLFdtJ54vNevbBIRSEA3fZgRqWFNHalh5ohsBXdrYgFqaRIuCcQ==",
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.12.tgz",
+      "integrity": "sha512-LxjcoIFOU4sgK07ZWb8XDHxuVB+UKs41vPK+Sg9PeZMvEoz84fndFAx8Nz2nipiya2EmyxBgVhff8Hi6GBt+XA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -647,16 +658,16 @@
       }
     },
     "node_modules/@firebase/app-check-compat": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.18.tgz",
-      "integrity": "sha512-qjozwnwYmAIdrsVGrJk+hnF1WBois54IhZR6gO0wtZQoTvWL/GtiA2F31TIgAhF0ayUiZhztOv1RfC7YyrZGDQ==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.19.tgz",
+      "integrity": "sha512-G8FMiqhrKc4gEEujrBDBBrbRav8MGqoLObWj1hy/riCSg4XlRYhpnq3ev8E9HTirqU1tAGH6oJl7vr+jfM7YNA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/app-check": "0.8.11",
+        "@firebase/app-check": "0.8.12",
         "@firebase/app-check-types": "0.5.3",
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -679,15 +690,15 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/app-compat": {
-      "version": "0.2.48",
-      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.48.tgz",
-      "integrity": "sha512-wVNU1foBIaJncUmiALyRxhHHHC3ZPMLIETTAk+2PG87eP9B/IDBsYUiTpHyboDPEI8CgBPat/zN2v+Snkz6lBw==",
+      "version": "0.2.51",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.51.tgz",
+      "integrity": "sha512-pxF1+coABt+ugqNI0YXDlmkKv4kh3pjI5BqIJJ1VXBo42OZbKMsQbFeos14YBrWwiqqSjUvQ70FBNsv5E2wuxg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/app": "0.10.18",
-        "@firebase/component": "0.6.12",
+        "@firebase/app": "0.11.2",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -701,14 +712,14 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/auth": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.8.2.tgz",
-      "integrity": "sha512-q+071y2LWe0bVnjqaX3BscqZwzdP0GKN2YBKapLq4bV88MPfCtWwGKmDhNDEDUmioOjudGXkUY5cvvKqk3mlUg==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.9.1.tgz",
+      "integrity": "sha512-9KKo5SNVkyJzftsW+daS+PGDbeJ+MFJWXQFHDqqPPH3acWHtiNnGHH5HGpIJErEELrsm9xMPie5zfZ0XpGU8+w==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -725,15 +736,15 @@
       }
     },
     "node_modules/@firebase/auth-compat": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.17.tgz",
-      "integrity": "sha512-Shi6rqLqzU9KLXnUCmlLvVByq1kiG3oe7Wpbf5m1CgS7NiRx2pSSn0HLaRRozdkaizNzMGGj+3oHmNYQ7kU6xA==",
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.19.tgz",
+      "integrity": "sha512-v898POphOIBJliKF76SiGOXh4EdhO5fM6S9a2ZKf/8wHdBea/qwxwZoVVya4DW6Mi7vWyp1lIzHbFgwRz8G9TA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/auth": "1.8.2",
-        "@firebase/auth-types": "0.12.3",
-        "@firebase/component": "0.6.12",
-        "@firebase/util": "1.10.3",
+        "@firebase/auth": "1.9.1",
+        "@firebase/auth-types": "0.13.0",
+        "@firebase/component": "0.6.13",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -750,9 +761,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/auth-types": {
-      "version": "0.12.3",
-      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.3.tgz",
-      "integrity": "sha512-Zq9zI0o5hqXDtKg6yDkSnvMCMuLU6qAVS51PANQx+ZZX5xnzyNLEBO3GZgBUPsV5qIMFhjhqmLDxUqCbnAYy2A==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz",
+      "integrity": "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@firebase/app-types": "0.x",
@@ -760,12 +771,12 @@
       }
     },
     "node_modules/@firebase/component": {
-      "version": "0.6.12",
-      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.12.tgz",
-      "integrity": "sha512-YnxqjtohLbnb7raXt2YuA44cC1wA9GiehM/cmxrsoxKlFxBLy2V0OkRSj9gpngAE0UoJ421Wlav9ycO7lTPAUw==",
+      "version": "0.6.13",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.13.tgz",
+      "integrity": "sha512-I/Eg1NpAtZ8AAfq8mpdfXnuUpcLxIDdCDtTzWSh+FXnp/9eCKJ3SNbOCKrUCyhLzNa2SiPJYruei0sxVjaOTeg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -773,15 +784,15 @@
       }
     },
     "node_modules/@firebase/data-connect": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.2.0.tgz",
-      "integrity": "sha512-7OrZtQoLSk2fiGijhIdUnTSqEFti3h1EMhw9nNiSZ6jJGduw4Pz6jrVvxjpZJtGH/JiljbMkBnPBS2h8CTRKEw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.1.tgz",
+      "integrity": "sha512-PNlfAJ2mcbyRlWfm41nfk8EksTuvMFTFIX+puNzeUa6OTIDtyp1IX1NJVc7n6WpfbErN7tNqcOEMe6BMtpcjVA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/auth-interop-types": "0.2.4",
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -789,16 +800,16 @@
       }
     },
     "node_modules/@firebase/database": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.11.tgz",
-      "integrity": "sha512-gLrw/XeioswWUXgpVKCPAzzoOuvYNqK5fRUeiJTzO7Mlp9P6ylFEyPJlRBl1djqYye641r3MX6AmIeMXwjgwuQ==",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.13.tgz",
+      "integrity": "sha512-cdc+LuseKdJXzlrCx8ePMXyctSWtYS9SsP3y7EeA85GzNh/IL0b7HOq0eShridL935iQ0KScZCj5qJtKkGE53g==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/app-check-interop-types": "0.3.3",
         "@firebase/auth-interop-types": "0.2.4",
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "faye-websocket": "0.11.4",
         "tslib": "^2.1.0"
       },
@@ -807,16 +818,16 @@
       }
     },
     "node_modules/@firebase/database-compat": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.2.tgz",
-      "integrity": "sha512-5zvdnMsfDHvrQAVM6jBS7CkBpu+z3YbpFdhxRsrK1FP45IEfxlzpeuEUb17D/tpM10vfq4Ok0x5akIBaCv7gfA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.4.tgz",
+      "integrity": "sha512-4qsptwZ3DTGNBje56ETItZQyA/HMalOelnLmkC3eR0M6+zkzOHjNHyWUWodW2mqxRKAM0sGkn+aIwYHKZFJXug==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/database": "1.0.11",
-        "@firebase/database-types": "1.0.8",
+        "@firebase/component": "0.6.13",
+        "@firebase/database": "1.0.13",
+        "@firebase/database-types": "1.0.9",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -824,24 +835,24 @@
       }
     },
     "node_modules/@firebase/database-types": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.8.tgz",
-      "integrity": "sha512-6lPWIGeufhUq1heofZULyVvWFhD01TUrkkB9vyhmksjZ4XF7NaivQp9rICMk7QNhqwa+uDCaj4j+Q8qqcSVZ9g==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.9.tgz",
+      "integrity": "sha512-uCntrxPbJHhZsNRpMhxNCm7GzhYWX+7J2e57wq1ZZ4NJrQw5DORgkAzJMByYZcVAjgADnCxxhK/GkoypH+XpvQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/app-types": "0.9.3",
-        "@firebase/util": "1.10.3"
+        "@firebase/util": "1.11.0"
       }
     },
     "node_modules/@firebase/firestore": {
-      "version": "4.7.6",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.7.6.tgz",
-      "integrity": "sha512-aVDboR+upR/44qZDLR4tnZ9pepSOFBbDJnwk7eWzmTyQq2nZAVG+HIhrqpQawmUVcDRkuJv2K2UT2+oqR8F8TA==",
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.7.9.tgz",
+      "integrity": "sha512-uq/bUtHDqJ5ZqPHAJIlNzHpXUtcVYcASz2V6y7UmP1WLlRKEt1yf1OcQW5u8pY2yq7162OnCl5J5mkOdMTMLZw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "@firebase/webchannel-wrapper": "1.0.3",
         "@grpc/grpc-js": "~1.9.0",
         "@grpc/proto-loader": "^0.7.8",
@@ -855,15 +866,15 @@
       }
     },
     "node_modules/@firebase/firestore-compat": {
-      "version": "0.3.41",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.41.tgz",
-      "integrity": "sha512-J/PgWKEt0yugETOE7lOabT16hsV21cLzSxERD7ZhaiwBQkBTSf0Mx9RhjZRT0Ttqe4weM90HGZFyUBqYA73fVA==",
+      "version": "0.3.44",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.44.tgz",
+      "integrity": "sha512-4Lv2TyHEW+FugXPgmQ0ZylSbh9uFuKDP0lCL1hX9cbxXaafhC/Nww+DWokUQ2zZcynjc8fxFunw6Xbd3QHAlgA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/firestore": "4.7.6",
+        "@firebase/component": "0.6.13",
+        "@firebase/firestore": "4.7.9",
         "@firebase/firestore-types": "3.0.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -884,16 +895,16 @@
       }
     },
     "node_modules/@firebase/functions": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.1.tgz",
-      "integrity": "sha512-QucRiFrvMMmIGTRhL7ZK2IeBnAWP7lAmfFREMpEtX47GjVqDqGxdFs+Mg7XBzxSc9UjDO4Rxf+aE9xJHU6bGwg==",
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.3.tgz",
+      "integrity": "sha512-Wv7JZMUkKLb1goOWRtsu3t7m97uK6XQvjQLPvn8rncY91+VgdU72crqnaYCDI/ophNuBEmuK8mn0/pAnjUeA6A==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/app-check-interop-types": "0.3.3",
         "@firebase/auth-interop-types": "0.2.4",
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/messaging-interop-types": "0.2.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -904,15 +915,15 @@
       }
     },
     "node_modules/@firebase/functions-compat": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.18.tgz",
-      "integrity": "sha512-N7+RN5GVus2ORB8cqfSNhfSn4iaYws6F8uCCfn4mtjC7zYS/KH6muzNAhZUdUqlv5YazbVmvxlAoYYF39i8Qzg==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.20.tgz",
+      "integrity": "sha512-iIudmYDAML6n3c7uXO2YTlzra2/J6lnMzmJTXNthvrKVMgNMaseNoQP1wKfchK84hMuSF8EkM4AvufwbJ+Juew==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/functions": "0.12.1",
+        "@firebase/component": "0.6.13",
+        "@firebase/functions": "0.12.3",
         "@firebase/functions-types": "0.6.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -929,13 +940,13 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/installations": {
-      "version": "0.6.12",
-      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.12.tgz",
-      "integrity": "sha512-ES/WpuAV2k2YtBTvdaknEo7IY8vaGjIjS3zhnHSAIvY9KwTR8XZFXOJoZ3nSkjN1A5R4MtEh+07drnzPDg9vaw==",
+      "version": "0.6.13",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.13.tgz",
+      "integrity": "sha512-6ZpkUiaygPFwgVneYxuuOuHnSPnTA4KefLEaw/sKk/rNYgC7X6twaGfYb0sYLpbi9xV4i5jXsqZ3WO+yaguNgg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/util": "1.10.3",
+        "@firebase/component": "0.6.13",
+        "@firebase/util": "1.11.0",
         "idb": "7.1.1",
         "tslib": "^2.1.0"
       },
@@ -944,15 +955,15 @@
       }
     },
     "node_modules/@firebase/installations-compat": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.12.tgz",
-      "integrity": "sha512-RhcGknkxmFu92F6Jb3rXxv6a4sytPjJGifRZj8MSURPuv2Xu+/AispCXEfY1ZraobhEHTG5HLGsP6R4l9qB5aA==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.13.tgz",
+      "integrity": "sha512-f/o6MqCI7LD/ulY9gvgkv6w5k6diaReD8BFHd/y/fEdpsXmFWYS/g28GXCB72bRVBOgPpkOUNl+VsMvDwlRKmw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/installations": "0.6.12",
+        "@firebase/component": "0.6.13",
+        "@firebase/installations": "0.6.13",
         "@firebase/installations-types": "0.5.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -981,15 +992,15 @@
       }
     },
     "node_modules/@firebase/messaging": {
-      "version": "0.12.16",
-      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.16.tgz",
-      "integrity": "sha512-VJ8sCEIeP3+XkfbJA7410WhYGHdloYFZXoHe/vt+vNVDGw8JQPTQSVTRvjrUprEf5I4Tbcnpr2H34lS6zhCHSA==",
+      "version": "0.12.17",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.17.tgz",
+      "integrity": "sha512-W3CnGhTm6Nx8XGb6E5/+jZTuxX/EK8Vur4QXvO1DwZta/t0xqWMRgO9vNsZFMYBqFV4o3j4F9qK/iddGYwWS6g==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/installations": "0.6.12",
+        "@firebase/component": "0.6.13",
+        "@firebase/installations": "0.6.13",
         "@firebase/messaging-interop-types": "0.2.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "idb": "7.1.1",
         "tslib": "^2.1.0"
       },
@@ -998,14 +1009,14 @@
       }
     },
     "node_modules/@firebase/messaging-compat": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.16.tgz",
-      "integrity": "sha512-9HZZ88Ig3zQ0ok/Pwt4gQcNsOhoEy8hDHoGsV1am6ulgMuGuDVD2gl11Lere2ksL+msM12Lddi2x/7TCqmODZw==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.17.tgz",
+      "integrity": "sha512-5Q+9IG7FuedusdWHVQRjpA3OVD9KUWp/IPegcv0s5qSqRLBjib7FlAeWxN+VL0Ew43tuPJBY2HKhEecuizmO1Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/messaging": "0.12.16",
-        "@firebase/util": "1.10.3",
+        "@firebase/component": "0.6.13",
+        "@firebase/messaging": "0.12.17",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -1019,32 +1030,33 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/performance": {
-      "version": "0.6.12",
-      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.12.tgz",
-      "integrity": "sha512-8mYL4z2jRlKXAi2hjk4G7o2sQLnJCCuTbyvti/xmHf5ZvOIGB01BZec0aDuBIXO+H1MLF62dbye/k91Fr+yc8g==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.1.tgz",
+      "integrity": "sha512-SkEUurawojCjav2V2AXo6BQLDtv02NxgXPLCiAvrkn95IAKI4W/UbLKYQvMbEez/nqvmnucLyklcMlB0Q5a1iw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/installations": "0.6.12",
+        "@firebase/component": "0.6.13",
+        "@firebase/installations": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
-        "tslib": "^2.1.0"
+        "@firebase/util": "1.11.0",
+        "tslib": "^2.1.0",
+        "web-vitals": "^4.2.4"
       },
       "peerDependencies": {
         "@firebase/app": "0.x"
       }
     },
     "node_modules/@firebase/performance-compat": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.12.tgz",
-      "integrity": "sha512-DyCbDTIwtBTGsEiQxTz/TD23a0na2nrDozceQ5kVkszyFYvliB0YK/9el0wAGIG91SqgTG9pxHtYErzfZc0VWw==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.14.tgz",
+      "integrity": "sha512-/crPg0fDqHIx+FjFoEqWxNp+lJSF40ZG7x43AAJGRaUaWLJDncQm3UJB5/mABaRZb7obs1CQAcRtd4phZFkmZg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/performance": "0.6.12",
+        "@firebase/performance": "0.7.1",
         "@firebase/performance-types": "0.2.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -1058,15 +1070,15 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/remote-config": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.5.0.tgz",
-      "integrity": "sha512-weiEbpBp5PBJTHUWR4GwI7ZacaAg68BKha5QnZ8Go65W4oQjEWqCW/rfskABI/OkrGijlL3CUmCB/SA6mVo0qA==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.6.0.tgz",
+      "integrity": "sha512-Yrk4l5+6FJLPHC6irNHMzgTtJ3NfHXlAXVChCBdNFtgmzyGmufNs/sr8oA0auEfIJ5VpXCaThRh3P4OdQxiAlQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/installations": "0.6.12",
+        "@firebase/component": "0.6.13",
+        "@firebase/installations": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -1074,16 +1086,16 @@
       }
     },
     "node_modules/@firebase/remote-config-compat": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.12.tgz",
-      "integrity": "sha512-91jLWPtubIuPBngg9SzwvNCWzhMLcyBccmt7TNZP+y1cuYFNOWWHKUXQ3IrxCLB7WwLqQaEu7fTDAjHsTyBsSw==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.13.tgz",
+      "integrity": "sha512-UmHoO7TxAEJPIZf8e1Hy6CeFGMeyjqSCpgoBkQZYXFI2JHhzxIyDpr8jVKJJN1dmAePKZ5EX7dC13CmcdTOl7Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/remote-config": "0.5.0",
+        "@firebase/remote-config": "0.6.0",
         "@firebase/remote-config-types": "0.4.0",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -1097,13 +1109,13 @@
       "license": "Apache-2.0"
     },
     "node_modules/@firebase/storage": {
-      "version": "0.13.5",
-      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.5.tgz",
-      "integrity": "sha512-sB/7HNuW0N9tITyD0RxVLNCROuCXkml5i/iPqjwOGKC0xiUfpCOjBE+bb0ABMoN1qYZfqk0y9IuI2TdomjmkNw==",
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.7.tgz",
+      "integrity": "sha512-FkRyc24rK+Y6EaQ1tYFm3TevBnnfSNA0VyTfew2hrYyL/aYfatBg7HOgktUdB4kWMHNA9VoTotzZTGoLuK92wg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/util": "1.10.3",
+        "@firebase/component": "0.6.13",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -1114,15 +1126,15 @@
       }
     },
     "node_modules/@firebase/storage-compat": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.15.tgz",
-      "integrity": "sha512-Z9afjrK2O9o1ZHWCpprCGZ1BTc3BbvpZvi6tkSteC8H3W/fMM6x+RoSunlzD3hEVV5bkbwdJIqNClLMchvyoPA==",
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.17.tgz",
+      "integrity": "sha512-CBlODWEZ5b6MJWVh21VZioxwxNwVfPA9CAdsk+ZgVocJQQbE2oDW1XJoRcgthRY1HOitgbn4cVrM+NlQtuUYhw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/component": "0.6.12",
-        "@firebase/storage": "0.13.5",
+        "@firebase/component": "0.6.13",
+        "@firebase/storage": "0.13.7",
         "@firebase/storage-types": "0.8.3",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -1143,9 +1155,10 @@
       }
     },
     "node_modules/@firebase/util": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.10.3.tgz",
-      "integrity": "sha512-wfoF5LTy0m2ufUapV0ZnpcGQvuavTbJ5Qr1Ze9OJGL70cSMvhDyjS4w2121XdA3lGZSTOsDOyGhpoDtYwck85A==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.11.0.tgz",
+      "integrity": "sha512-PzSrhIr++KI6y4P6C/IdgBNMkEx0Ex6554/cYd0Hm+ovyFSJtJXqb/3OSIdnBoa2cpwZT1/GW56EmRc5qEc5fQ==",
+      "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1155,15 +1168,15 @@
       }
     },
     "node_modules/@firebase/vertexai": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@firebase/vertexai/-/vertexai-1.0.3.tgz",
-      "integrity": "sha512-SQHg/RPb3LwQs/xiLcvAZYz9NXyDSZUIIwvgsKh6e4wdULAfyPCZIu6Y2ZYIhZLfk9Q44cKZ+++7RPTaqQJdYA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/vertexai/-/vertexai-1.1.0.tgz",
+      "integrity": "sha512-K8CgIFKJrfrf5lYhKnDXOu08FEmIzVExK+ApUZx4Bw2GAmLEA3wDVrsjuupuvpXZSp8QlzvEiXwqshqqc4v0pA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/app-check-interop-types": "0.3.3",
-        "@firebase/component": "0.6.12",
+        "@firebase/component": "0.6.13",
         "@firebase/logger": "0.4.4",
-        "@firebase/util": "1.10.3",
+        "@firebase/util": "1.11.0",
         "tslib": "^2.1.0"
       },
       "engines": {
@@ -1295,85 +1308,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT"
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -1386,20 +1320,10 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@isaacs/fs-minipass/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1410,17 +1334,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1434,7 +1347,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1447,13 +1359,13 @@
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
@@ -1514,15 +1426,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp/node_modules/minizlib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
@@ -1551,18 +1454,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp/node_modules/tar": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
@@ -1720,10 +1611,22 @@
         }
       }
     },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.0.tgz",
-      "integrity": "sha512-G2fUQQANtBPsNwiVFg4zKiPQyjVKZCUdQUol53R8E71J7AsheRMV/Yv/nB8giOcOVqP7//eB5xPqieBYZe9bGg==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
+      "integrity": "sha512-uYQ2WfPaqz5QtVgMxfN6NpLD+no0MYHDBywl7itPYd3K5TjjSghNKmX8ic9S8NU8w81NVhJv/XojcHptRly7qQ==",
       "cpu": [
         "arm"
       ],
@@ -1734,9 +1637,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.0.tgz",
-      "integrity": "sha512-qhFwQ+ljoymC+j5lXRv8DlaJYY/+8vyvYmVx074zrLsu5ZGWYsJNLjPPVJJjhZQpyAKUGPydOq9hRLLNvh1s3A==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.35.0.tgz",
+      "integrity": "sha512-FtKddj9XZudurLhdJnBl9fl6BwCJ3ky8riCXjEw3/UIbjmIY58ppWwPEvU3fNu+W7FUsAsB1CdH+7EQE6CXAPA==",
       "cpu": [
         "arm64"
       ],
@@ -1747,9 +1650,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.0.tgz",
-      "integrity": "sha512-44n/X3lAlWsEY6vF8CzgCx+LQaoqWGN7TzUfbJDiTIOjJm4+L2Yq+r5a8ytQRGyPqgJDs3Rgyo8eVL7n9iW6AQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.35.0.tgz",
+      "integrity": "sha512-Uk+GjOJR6CY844/q6r5DR/6lkPFOw0hjfOIzVx22THJXMxktXG6CbejseJFznU8vHcEBLpiXKY3/6xc+cBm65Q==",
       "cpu": [
         "arm64"
       ],
@@ -1760,9 +1663,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.0.tgz",
-      "integrity": "sha512-F9ct0+ZX5Np6+ZDztxiGCIvlCaW87HBdHcozUfsHnj1WCUTBUubAoanhHUfnUHZABlElyRikI0mgcw/qdEm2VQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.35.0.tgz",
+      "integrity": "sha512-3IrHjfAS6Vkp+5bISNQnPogRAW5GAV1n+bNCrDwXmfMHbPl5EhTmWtfmwlJxFRUCBZ+tZ/OxDyU08aF6NI/N5Q==",
       "cpu": [
         "x64"
       ],
@@ -1773,9 +1676,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.0.tgz",
-      "integrity": "sha512-JpsGxLBB2EFXBsTLHfkZDsXSpSmKD3VxXCgBQtlPcuAqB8TlqtLcbeMhxXQkCDv1avgwNjF8uEIbq5p+Cee0PA==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.35.0.tgz",
+      "integrity": "sha512-sxjoD/6F9cDLSELuLNnY0fOrM9WA0KrM0vWm57XhrIMf5FGiN8D0l7fn+bpUeBSU7dCgPV2oX4zHAsAXyHFGcQ==",
       "cpu": [
         "arm64"
       ],
@@ -1786,9 +1689,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.0.tgz",
-      "integrity": "sha512-wegiyBT6rawdpvnD9lmbOpx5Sph+yVZKHbhnSP9MqUEDX08G4UzMU+D87jrazGE7lRSyTRs6NEYHtzfkJ3FjjQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.35.0.tgz",
+      "integrity": "sha512-2mpHCeRuD1u/2kruUiHSsnjWtHjqVbzhBkNVQ1aVD63CcexKVcQGwJ2g5VphOd84GvxfSvnnlEyBtQCE5hxVVw==",
       "cpu": [
         "x64"
       ],
@@ -1799,9 +1702,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.0.tgz",
-      "integrity": "sha512-3pA7xecItbgOs1A5H58dDvOUEboG5UfpTq3WzAdF54acBbUM+olDJAPkgj1GRJ4ZqE12DZ9/hNS2QZk166v92A==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.35.0.tgz",
+      "integrity": "sha512-mrA0v3QMy6ZSvEuLs0dMxcO2LnaCONs1Z73GUDBHWbY8tFFocM6yl7YyMu7rz4zS81NDSqhrUuolyZXGi8TEqg==",
       "cpu": [
         "arm"
       ],
@@ -1812,9 +1715,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.0.tgz",
-      "integrity": "sha512-Y7XUZEVISGyge51QbYyYAEHwpGgmRrAxQXO3siyYo2kmaj72USSG8LtlQQgAtlGfxYiOwu+2BdbPjzEpcOpRmQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.35.0.tgz",
+      "integrity": "sha512-DnYhhzcvTAKNexIql8pFajr0PiDGrIsBYPRvCKlA5ixSS3uwo/CWNZxB09jhIapEIg945KOzcYEAGGSmTSpk7A==",
       "cpu": [
         "arm"
       ],
@@ -1825,9 +1728,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.0.tgz",
-      "integrity": "sha512-r7/OTF5MqeBrZo5omPXcTnjvv1GsrdH8a8RerARvDFiDwFpDVDnJyByYM/nX+mvks8XXsgPUxkwe/ltaX2VH7w==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.35.0.tgz",
+      "integrity": "sha512-uagpnH2M2g2b5iLsCTZ35CL1FgyuzzJQ8L9VtlJ+FckBXroTwNOaD0z0/UF+k5K3aNQjbm8LIVpxykUOQt1m/A==",
       "cpu": [
         "arm64"
       ],
@@ -1838,9 +1741,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.0.tgz",
-      "integrity": "sha512-HJbifC9vex9NqnlodV2BHVFNuzKL5OnsV2dvTw6e1dpZKkNjPG6WUq+nhEYV6Hv2Bv++BXkwcyoGlXnPrjAKXw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.35.0.tgz",
+      "integrity": "sha512-XQxVOCd6VJeHQA/7YcqyV0/88N6ysSVzRjJ9I9UA/xXpEsjvAgDTgH3wQYz5bmr7SPtVK2TsP2fQ2N9L4ukoUg==",
       "cpu": [
         "arm64"
       ],
@@ -1851,9 +1754,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.0.tgz",
-      "integrity": "sha512-VAEzZTD63YglFlWwRj3taofmkV1V3xhebDXffon7msNz4b14xKsz7utO6F8F4cqt8K/ktTl9rm88yryvDpsfOw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.35.0.tgz",
+      "integrity": "sha512-5pMT5PzfgwcXEwOaSrqVsz/LvjDZt+vQ8RT/70yhPU06PTuq8WaHhfT1LW+cdD7mW6i/J5/XIkX/1tCAkh1W6g==",
       "cpu": [
         "loong64"
       ],
@@ -1864,9 +1767,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.0.tgz",
-      "integrity": "sha512-Sts5DST1jXAc9YH/iik1C9QRsLcCoOScf3dfbY5i4kH9RJpKxiTBXqm7qU5O6zTXBTEZry69bGszr3SMgYmMcQ==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.35.0.tgz",
+      "integrity": "sha512-c+zkcvbhbXF98f4CtEIP1EBA/lCic5xB0lToneZYvMeKu5Kamq3O8gqrxiYYLzlZH6E3Aq+TSW86E4ay8iD8EA==",
       "cpu": [
         "ppc64"
       ],
@@ -1877,9 +1780,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.0.tgz",
-      "integrity": "sha512-qhlXeV9AqxIyY9/R1h1hBD6eMvQCO34ZmdYvry/K+/MBs6d1nRFLm6BOiITLVI+nFAAB9kUB6sdJRKyVHXnqZw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.35.0.tgz",
+      "integrity": "sha512-s91fuAHdOwH/Tad2tzTtPX7UZyytHIRR6V4+2IGlV0Cej5rkG0R61SX4l4y9sh0JBibMiploZx3oHKPnQBKe4g==",
       "cpu": [
         "riscv64"
       ],
@@ -1890,9 +1793,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.0.tgz",
-      "integrity": "sha512-8ZGN7ExnV0qjXa155Rsfi6H8M4iBBwNLBM9lcVS+4NcSzOFaNqmt7djlox8pN1lWrRPMRRQ8NeDlozIGx3Omsw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.35.0.tgz",
+      "integrity": "sha512-hQRkPQPLYJZYGP+Hj4fR9dDBMIM7zrzJDWFEMPdTnTy95Ljnv0/4w/ixFw3pTBMEuuEuoqtBINYND4M7ujcuQw==",
       "cpu": [
         "s390x"
       ],
@@ -1903,9 +1806,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.0.tgz",
-      "integrity": "sha512-VDzNHtLLI5s7xd/VubyS10mq6TxvZBp+4NRWoW+Hi3tgV05RtVm4qK99+dClwTN1McA6PHwob6DEJ6PlXbY83A==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.35.0.tgz",
+      "integrity": "sha512-Pim1T8rXOri+0HmV4CdKSGrqcBWX0d1HoPnQ0uw0bdp1aP5SdQVNBy8LjYncvnLgu3fnnCt17xjWGd4cqh8/hA==",
       "cpu": [
         "x64"
       ],
@@ -1916,9 +1819,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.0.tgz",
-      "integrity": "sha512-qcb9qYDlkxz9DxJo7SDhWxTWV1gFuwznjbTiov289pASxlfGbaOD54mgbs9+z94VwrXtKTu+2RqwlSTbiOqxGg==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.35.0.tgz",
+      "integrity": "sha512-QysqXzYiDvQWfUiTm8XmJNO2zm9yC9P/2Gkrwg2dH9cxotQzunBHYr6jk4SujCTqnfGxduOmQcI7c2ryuW8XVg==",
       "cpu": [
         "x64"
       ],
@@ -1929,9 +1832,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.0.tgz",
-      "integrity": "sha512-pFDdotFDMXW2AXVbfdUEfidPAk/OtwE/Hd4eYMTNVVaCQ6Yl8et0meDaKNL63L44Haxv4UExpv9ydSf3aSayDg==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.35.0.tgz",
+      "integrity": "sha512-OUOlGqPkVJCdJETKOCEf1mw848ZyJ5w50/rZ/3IBQVdLfR5jk/6Sr5m3iO2tdPgwo0x7VcncYuOvMhBWZq8ayg==",
       "cpu": [
         "arm64"
       ],
@@ -1942,9 +1845,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.0.tgz",
-      "integrity": "sha512-/TG7WfrCAjeRNDvI4+0AAMoHxea/USWhAzf9PVDFHbcqrQ7hMMKp4jZIy4VEjk72AAfN5k4TiSMRXRKf/0akSw==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.35.0.tgz",
+      "integrity": "sha512-2/lsgejMrtwQe44glq7AFFHLfJBPafpsTa6JvP2NGef/ifOa4KBoglVf7AKN7EV9o32evBPRqfg96fEHzWo5kw==",
       "cpu": [
         "ia32"
       ],
@@ -1955,9 +1858,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.0.tgz",
-      "integrity": "sha512-5hqO5S3PTEO2E5VjCePxv40gIgyS2KvO7E7/vvC/NbIW4SIRamkMr1hqj+5Y67fbBWv/bQLB6KelBQmXlyCjWA==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.35.0.tgz",
+      "integrity": "sha512-PIQeY5XDkrOysbQblSW7v3l1MDZzkTEzAfTPkj5VAu3FW8fS4ynyLg2sINp0fp3SjZ8xkRYpLqoKcYqAkhU1dw==",
       "cpu": [
         "x64"
       ],
@@ -1994,16 +1897,26 @@
         "path-browserify": "^1.0.1"
       }
     },
-    "node_modules/@ts-morph/common/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "license": "MIT",
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=10"
+        "node": "*"
       }
     },
     "node_modules/@tsconfig/node10": {
@@ -2043,9 +1956,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.10.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
-      "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
+      "version": "22.13.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz",
+      "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
@@ -2064,9 +1977,9 @@
       "license": "MIT"
     },
     "node_modules/@vercel/analytics": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.4.1.tgz",
-      "integrity": "sha512-ekpL4ReX2TH3LnrRZTUKjHHNpNy9S1I7QmS+g/RQXoSUQ8ienzosuX7T9djZ/s8zPhBx1mpHP/Rw5875N+zQIQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz",
+      "integrity": "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==",
       "license": "MPL-2.0",
       "peerDependencies": {
         "@remix-run/react": "^2",
@@ -2102,9 +2015,9 @@
       }
     },
     "node_modules/@vercel/build-utils": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-9.0.1.tgz",
-      "integrity": "sha512-pG/izEqA0AGyqQj6QBfGoTOKU9FPG18sYw9qpncEq00uA+J4Ly4e8ssNbENsXtnXqkMjeoS3c5ncR3jT0bOyiA==",
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-10.5.1.tgz",
+      "integrity": "sha512-BtqwEmU1AoITpd0KxYrdQOwyKZL8RKba+bWxI8mr3gXPQZWRAE9ok1zF0AXfvMGCstYPHBPNolZGDSfWmY2jqg==",
       "license": "Apache-2.0"
     },
     "node_modules/@vercel/error-utils": {
@@ -2114,16 +2027,14 @@
       "license": "Apache-2.0"
     },
     "node_modules/@vercel/fun": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@vercel/fun/-/fun-1.1.2.tgz",
-      "integrity": "sha512-n13RO1BUy8u6+kzDQ2++BRj4Y5EAiQPt+aV+Tb2HNTmToNr4Mu3dE1kFlaTVTxQzAT3hvIRlVEU/OMvF8LCFJw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@vercel/fun/-/fun-1.1.5.tgz",
+      "integrity": "sha512-vRuR7qlsl8CgdeQIhfgLDtbMEuxqltx6JWFahB7Q5VOKMo/sFZV1rCxIHsHsJP4yYY2hoZqlT/EUkfG1tfPicg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@tootallnate/once": "2.0.0",
         "async-listen": "1.2.0",
         "debug": "4.3.4",
-        "execa": "3.2.0",
-        "fs-extra": "8.1.0",
         "generic-pool": "3.4.2",
         "micro": "9.3.5-canary.3",
         "ms": "2.1.1",
@@ -2133,7 +2044,8 @@
         "semver": "7.5.4",
         "stat-mode": "0.3.0",
         "stream-to-promise": "2.2.0",
-        "tar": "4.4.18",
+        "tar": "6.2.1",
+        "tinyexec": "0.3.2",
         "tree-kill": "1.2.2",
         "uid-promise": "1.0.0",
         "uuid": "3.3.2",
@@ -2141,7 +2053,7 @@
         "yauzl-promise": "2.1.3"
       },
       "engines": {
-        "node": ">= 16"
+        "node": ">= 18"
       }
     },
     "node_modules/@vercel/fun/node_modules/debug": {
@@ -2173,21 +2085,6 @@
       "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
       "license": "MIT"
     },
-    "node_modules/@vercel/fun/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "license": "ISC",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@vercel/gatsby-plugin-vercel-analytics": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@vercel/gatsby-plugin-vercel-analytics/-/gatsby-plugin-vercel-analytics-1.0.11.tgz",
@@ -2197,54 +2094,24 @@
         "web-vitals": "0.2.4"
       }
     },
+    "node_modules/@vercel/gatsby-plugin-vercel-analytics/node_modules/web-vitals": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-0.2.4.tgz",
+      "integrity": "sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@vercel/gatsby-plugin-vercel-builder": {
-      "version": "2.0.63",
-      "resolved": "https://registry.npmjs.org/@vercel/gatsby-plugin-vercel-builder/-/gatsby-plugin-vercel-builder-2.0.63.tgz",
-      "integrity": "sha512-xZmZ6XOBycOR+Peq/WFBc8UkdrvSPXseCPhPLBK2MTz6y/EdD4KbpnHckYo0H85JUMsJLlAspAbRNKnJeVkvsQ==",
+      "version": "2.0.80",
+      "resolved": "https://registry.npmjs.org/@vercel/gatsby-plugin-vercel-builder/-/gatsby-plugin-vercel-builder-2.0.80.tgz",
+      "integrity": "sha512-MC1Gx6eRfmqaARL1DczldYzA3NdMlnC5vY/AXBSZuiHCoENS4++duEjhDjMtRSiidwSCrjuaz5Y9yxKTocRmzA==",
       "dependencies": {
         "@sinclair/typebox": "0.25.24",
-        "@vercel/build-utils": "9.0.1",
-        "@vercel/routing-utils": "5.0.0",
+        "@vercel/build-utils": "10.5.1",
         "esbuild": "0.14.47",
         "etag": "1.8.1",
         "fs-extra": "11.1.0"
       }
     },
-    "node_modules/@vercel/gatsby-plugin-vercel-builder/node_modules/fs-extra": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
-      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/@vercel/gatsby-plugin-vercel-builder/node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/@vercel/gatsby-plugin-vercel-builder/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@vercel/go": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@vercel/go/-/go-3.2.1.tgz",
@@ -2252,9 +2119,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@vercel/hydrogen": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@vercel/hydrogen/-/hydrogen-1.0.11.tgz",
-      "integrity": "sha512-nkSQ0LC7rFRdfkTUGm9pIbAfRb2Aat05u8ouN0FoUl7/I/YVgd0G6iRBN9bOMFUIiBiaKB4KqaZEFzVfUHpwYw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@vercel/hydrogen/-/hydrogen-1.2.0.tgz",
+      "integrity": "sha512-kdZp8cTVLoNmnu24wtoQPu9ZO+uB00zvDMTOXlQmNdq/V3k0mQa/Q5k2B8nliBQ3BMiBasoXxMKv59+F8rYvDw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@vercel/static-config": "3.0.0",
@@ -2262,9 +2129,9 @@
       }
     },
     "node_modules/@vercel/next": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@vercel/next/-/next-4.4.2.tgz",
-      "integrity": "sha512-bW/huCPGE2lRK7oUkqmwHiWpNcaWkyxJbLrsMlCF9JK6+iz5tj7EzUYng9KJzQMRMsVI7aieeA35VZqMwpYmHw==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/@vercel/next/-/next-4.7.4.tgz",
+      "integrity": "sha512-8CzSxN4rOjABoF+6KBEpxlWnTaXpBNDiuNGRfJ3LWBMj/mtlnsucHpd/8Y7ReS9QheICWf9McC7gqA2Alrpmwg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@vercel/nft": "0.27.10"
@@ -2296,31 +2163,87 @@
         "node": ">=16"
       }
     },
-    "node_modules/@vercel/node": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@vercel/node/-/node-5.0.2.tgz",
-      "integrity": "sha512-UcUVBC6i4j3WPxLA5GYnSvRd/E1fpqJ5dnMZMLromGCTzIXaw+Uzj7bsSSQ2Y9yPtwnWWrcEDmF3IumSTcdr/w==",
-      "license": "Apache-2.0",
+    "node_modules/@vercel/nft/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "license": "MIT",
       "dependencies": {
-        "@edge-runtime/node-utils": "2.3.0",
-        "@edge-runtime/primitives": "4.1.0",
-        "@edge-runtime/vm": "3.2.0",
-        "@types/node": "16.18.11",
-        "@vercel/build-utils": "9.0.1",
-        "@vercel/error-utils": "2.0.3",
-        "@vercel/nft": "0.27.10",
-        "@vercel/static-config": "3.0.0",
-        "async-listen": "3.0.0",
-        "cjs-module-lexer": "1.2.3",
-        "edge-runtime": "2.5.9",
-        "es-module-lexer": "1.4.1",
-        "esbuild": "0.14.47",
-        "etag": "1.8.1",
-        "node-fetch": "2.6.9",
-        "path-to-regexp": "6.2.1",
-        "ts-morph": "12.0.0",
-        "ts-node": "10.9.1",
-        "typescript": "4.9.5",
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@vercel/nft/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@vercel/nft/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@vercel/nft/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@vercel/node": {
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/@vercel/node/-/node-5.1.14.tgz",
+      "integrity": "sha512-kLXAR4ZtNSXJw5ffIzKPDAVHD4/Dwxw/287ZCnQlqtOQzY3IH1E5QM3nxn0LGfTkYxXpQFFOOcXL7fZW7MjC6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@edge-runtime/node-utils": "2.3.0",
+        "@edge-runtime/primitives": "4.1.0",
+        "@edge-runtime/vm": "3.2.0",
+        "@types/node": "16.18.11",
+        "@vercel/build-utils": "10.5.1",
+        "@vercel/error-utils": "2.0.3",
+        "@vercel/nft": "0.27.10",
+        "@vercel/static-config": "3.0.0",
+        "async-listen": "3.0.0",
+        "cjs-module-lexer": "1.2.3",
+        "edge-runtime": "2.5.9",
+        "es-module-lexer": "1.4.1",
+        "esbuild": "0.14.47",
+        "etag": "1.8.1",
+        "node-fetch": "2.6.9",
+        "path-to-regexp": "6.1.0",
+        "path-to-regexp-updated": "npm:path-to-regexp@6.3.0",
+        "ts-morph": "12.0.0",
+        "ts-node": "10.9.1",
+        "typescript": "4.9.5",
         "undici": "5.28.4"
       }
     },
@@ -2359,32 +2282,19 @@
         }
       }
     },
-    "node_modules/@vercel/node/node_modules/undici": {
-      "version": "5.28.4",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
-      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
-      "license": "MIT",
-      "dependencies": {
-        "@fastify/busboy": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.0"
-      }
-    },
     "node_modules/@vercel/python": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vercel/python/-/python-4.7.0.tgz",
-      "integrity": "sha512-mkHmzYYZBLFLdvSdgrnBl1Qc1+LI5YIafSNJOj8oW4YU8vvALLMbwgZp42pZnyXW0e/3uHcesiRp4P0jSB0wyg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@vercel/python/-/python-4.7.1.tgz",
+      "integrity": "sha512-H4g/5e8unII4oQ+KN5IUvTZSzHmj+lLYDkAK15QGYgAxBtE/mHUvEZpPPo7DPUDIyfq8ybWB1bmk7H5kEahubQ==",
       "license": "Apache-2.0"
     },
     "node_modules/@vercel/redwood": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/@vercel/redwood/-/redwood-2.1.12.tgz",
-      "integrity": "sha512-9CLwF8QKmxWlt1CMxoVD5gxTfwnojo1UlFONRSoUfjpNC+nTHEMCADVyawmDkANXs7Olx4QQSwJqsaWT8A9Jgg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@vercel/redwood/-/redwood-2.3.0.tgz",
+      "integrity": "sha512-MybbGdMZY0/CrpgEGafJZ+8HlqubWnEpl/KX3WClCZPrT2qcyZyJEh9AVN7/KIpQUdB2MQLIRVMQFQ+kKcRdsA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@vercel/nft": "0.27.10",
-        "@vercel/routing-utils": "5.0.0",
         "@vercel/static-config": "3.0.0",
         "semver": "6.3.1",
         "ts-morph": "12.0.0"
@@ -2400,49 +2310,33 @@
       }
     },
     "node_modules/@vercel/remix-builder": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@vercel/remix-builder/-/remix-builder-5.0.2.tgz",
-      "integrity": "sha512-VkdTOGdE/iiG476xQLmqzIrwlXe3oabiZzNCronJe8wgtWfF4+0jBExhLkv1KS92v1kOfAXPWXqPqs2MktE8ZQ==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@vercel/remix-builder/-/remix-builder-5.4.3.tgz",
+      "integrity": "sha512-i+uPSIOBygkXLc6unOkfrJ0jNdqzRRZ8Esu+8kt/OPm4VCOHro3hyiMxFDtdvPWDQfulVOeDNkXnqlgLRDVdlw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@vercel/error-utils": "2.0.3",
         "@vercel/nft": "0.27.10",
         "@vercel/static-config": "3.0.0",
+        "path-to-regexp": "6.1.0",
+        "path-to-regexp-updated": "npm:path-to-regexp@6.3.0",
         "ts-morph": "12.0.0"
       }
     },
-    "node_modules/@vercel/routing-utils": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@vercel/routing-utils/-/routing-utils-5.0.0.tgz",
-      "integrity": "sha512-llvozDbkGDSelbgigAt9IwCQS8boP4rNHfy3rpJf0DqSn6UDlkFX270NwIQruyXN9KHktHC9qOof6Ik2+bT88A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "path-to-regexp": "6.1.0"
-      },
-      "optionalDependencies": {
-        "ajv": "^6.0.0"
-      }
-    },
-    "node_modules/@vercel/routing-utils/node_modules/path-to-regexp": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
-      "integrity": "sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw==",
-      "license": "MIT"
-    },
     "node_modules/@vercel/ruby": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@vercel/ruby/-/ruby-2.1.0.tgz",
-      "integrity": "sha512-UZYwlSEEfVnfzTmgkD+kxex9/gkZGt7unOWNyWFN7V/ZnZSsGBUgv6hXLnwejdRi3EztgRQEBd1kUKlXdIeC0Q==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@vercel/ruby/-/ruby-2.2.0.tgz",
+      "integrity": "sha512-FJF9gKVNHAljGOgV6zS5ou2N7ZgjOqMMtcPA5lsJEUI5/AZzVDWCmtcowTP80wEtHuupkd7d7M399FA082kXYQ==",
       "license": "Apache-2.0"
     },
     "node_modules/@vercel/static-build": {
-      "version": "2.5.41",
-      "resolved": "https://registry.npmjs.org/@vercel/static-build/-/static-build-2.5.41.tgz",
-      "integrity": "sha512-cnKgFE6+xS00OCGLuURBLvWe2yIW9MU0ILKhFx3m3mpx8HfGYO2LN3b8Li8xYrJtr+rRUdGU3ITtXXveTClkug==",
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/@vercel/static-build/-/static-build-2.7.6.tgz",
+      "integrity": "sha512-ezyZScIZgZIfzhNBBZroHIkcI6kP7WvBWKeLP1a8Vh2vipI+uuH6F52fDcjSH+uDpUxhfeml7HTMx2LVNTIXWw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@vercel/gatsby-plugin-vercel-analytics": "1.0.11",
-        "@vercel/gatsby-plugin-vercel-builder": "2.0.63",
+        "@vercel/gatsby-plugin-vercel-builder": "2.0.80",
         "@vercel/static-config": "3.0.0",
         "ts-morph": "12.0.0"
       }
@@ -2458,28 +2352,6 @@
         "ts-morph": "12.0.0"
       }
     },
-    "node_modules/@vercel/static-config/node_modules/ajv": {
-      "version": "8.6.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz",
-      "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@vercel/static-config/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -2549,6 +2421,30 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.2.tgz",
+      "integrity": "sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.2",
+        "birpc": "^0.2.19",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.2.tgz",
+      "integrity": "sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
@@ -2609,9 +2505,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -2651,15 +2547,14 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.6.3",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz",
+      "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -2682,24 +2577,24 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
     "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
       "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
@@ -2715,7 +2610,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -2725,23 +2619,10 @@
         "node": ">= 8"
       }
     },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/arg": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
-      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "license": "MIT"
     },
     "node_modules/async-listen": {
@@ -2757,9 +2638,9 @@
       "license": "MIT"
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
         {
@@ -2777,11 +2658,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -2804,7 +2685,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2822,14 +2702,22 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "node_modules/birpc": {
+      "version": "0.2.19",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz",
+      "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
       }
     },
     "node_modules/braces": {
@@ -2892,20 +2780,28 @@
       "integrity": "sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg==",
       "license": "MIT"
     },
+    "node_modules/bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001696",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
-      "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
+      "version": "1.0.30001704",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001704.tgz",
+      "integrity": "sha512-+L2IgBbV6gXB4ETf0keSvLr7JUrRVbIaB/lrQ1+z8mRcQiisG5k+lG6O4n6Y5q6f5EuNfaYXKgymucphlEXQew==",
       "dev": true,
       "funding": [
         {
@@ -2924,25 +2820,49 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chokidar": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz",
-      "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "license": "MIT",
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 8.10.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "license": "ISC"
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/cjs-module-lexer": {
       "version": "1.2.3",
@@ -2964,36 +2884,108 @@
         "node": ">=12"
       }
     },
-    "node_modules/code-block-writer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
-      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
-      "license": "MIT"
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "color-convert": "^2.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
@@ -3031,6 +3023,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -3055,7 +3062,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -3109,7 +3115,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
@@ -3125,9 +3130,17 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3172,26 +3185,38 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "license": "ISC"
     },
+    "node_modules/edge-runtime/node_modules/signal-exit": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz",
+      "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.90",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz",
-      "integrity": "sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==",
+      "version": "1.5.119",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.119.tgz",
+      "integrity": "sha512-Ku4NMzUjz3e3Vweh7PhApPrZSS4fyiCIbcIrG9eKrriYVLmbMepETR/v6SU7xPm98QTqMSYiCwfO89QNjXLkbQ==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
     "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
+      "integrity": "sha512-EoulkdKF/1xa92q25PbjuDcgJ9RDHYU2Rs3SCIvs2/dSQ3BpmxneNHmA/M7fe60M3PrV7nNGTTNbkK62l6vXiQ==",
       "license": "MIT",
       "dependencies": {
-        "once": "^1.4.0"
+        "once": "~1.3.0"
       }
     },
     "node_modules/entities": {
@@ -3597,33 +3622,6 @@
       "integrity": "sha512-blk1va0zol9QOrdZt0rFXo5KMkNPVSp92Eju/Qz8THwKWKRKeE0T8Br/1aW6+Edkyq9xHYgYxn2QtOnUKPUp+Q==",
       "license": "MIT"
     },
-    "node_modules/execa": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-3.2.0.tgz",
-      "integrity": "sha512-kJJfVbI/lZE1PZYDI5VPxp8zXPO9rtxOkhpZ0jMKha56AI9y2gGVC6bkukStQf0ka5Rh15BA5m7cCCH4jmHqkw==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "p-finally": "^2.0.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": "^8.12.0 || >=9.7.0"
-      }
-    },
-    "node_modules/execa/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "license": "ISC"
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3646,17 +3644,22 @@
         "node": ">=8.6.0"
       }
     },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "license": "MIT",
-      "optional": true
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     },
     "node_modules/fastq": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -3702,48 +3705,48 @@
       }
     },
     "node_modules/firebase": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-11.2.0.tgz",
-      "integrity": "sha512-ztwPhBLAZMVNZjBeQzzTM4rk2rsRXmdFYcnvjAXh+StbiFVshHKaPO9VRGMUzF48du4Mkz6jN1wkmYCuUJPxLA==",
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-11.4.0.tgz",
+      "integrity": "sha512-Z6kwhWIPDgIm0+NUEQxwjH14hMP7t42WSFnf/78R0Vh59VovLYTOCTM3MIdY3jlSZ9uKz56FhXrvsNXNhAn/Xg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/analytics": "0.10.11",
-        "@firebase/analytics-compat": "0.2.17",
-        "@firebase/app": "0.10.18",
-        "@firebase/app-check": "0.8.11",
-        "@firebase/app-check-compat": "0.3.18",
-        "@firebase/app-compat": "0.2.48",
+        "@firebase/analytics": "0.10.12",
+        "@firebase/analytics-compat": "0.2.18",
+        "@firebase/app": "0.11.2",
+        "@firebase/app-check": "0.8.12",
+        "@firebase/app-check-compat": "0.3.19",
+        "@firebase/app-compat": "0.2.51",
         "@firebase/app-types": "0.9.3",
-        "@firebase/auth": "1.8.2",
-        "@firebase/auth-compat": "0.5.17",
-        "@firebase/data-connect": "0.2.0",
-        "@firebase/database": "1.0.11",
-        "@firebase/database-compat": "2.0.2",
-        "@firebase/firestore": "4.7.6",
-        "@firebase/firestore-compat": "0.3.41",
-        "@firebase/functions": "0.12.1",
-        "@firebase/functions-compat": "0.3.18",
-        "@firebase/installations": "0.6.12",
-        "@firebase/installations-compat": "0.2.12",
-        "@firebase/messaging": "0.12.16",
-        "@firebase/messaging-compat": "0.2.16",
-        "@firebase/performance": "0.6.12",
-        "@firebase/performance-compat": "0.2.12",
-        "@firebase/remote-config": "0.5.0",
-        "@firebase/remote-config-compat": "0.2.12",
-        "@firebase/storage": "0.13.5",
-        "@firebase/storage-compat": "0.3.15",
-        "@firebase/util": "1.10.3",
-        "@firebase/vertexai": "1.0.3"
+        "@firebase/auth": "1.9.1",
+        "@firebase/auth-compat": "0.5.19",
+        "@firebase/data-connect": "0.3.1",
+        "@firebase/database": "1.0.13",
+        "@firebase/database-compat": "2.0.4",
+        "@firebase/firestore": "4.7.9",
+        "@firebase/firestore-compat": "0.3.44",
+        "@firebase/functions": "0.12.3",
+        "@firebase/functions-compat": "0.3.20",
+        "@firebase/installations": "0.6.13",
+        "@firebase/installations-compat": "0.2.13",
+        "@firebase/messaging": "0.12.17",
+        "@firebase/messaging-compat": "0.2.17",
+        "@firebase/performance": "0.7.1",
+        "@firebase/performance-compat": "0.2.14",
+        "@firebase/remote-config": "0.6.0",
+        "@firebase/remote-config-compat": "0.2.13",
+        "@firebase/storage": "0.13.7",
+        "@firebase/storage-compat": "0.3.17",
+        "@firebase/util": "1.11.0",
+        "@firebase/vertexai": "1.1.0"
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -3768,26 +3771,41 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
+      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=6 <7 || >=8"
+        "node": ">=14.14"
       }
     },
     "node_modules/fs-minipass": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
-      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "license": "ISC",
       "dependencies": {
-        "minipass": "^2.6.0"
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/fs.realpath": {
@@ -3814,7 +3832,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3838,52 +3855,36 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "license": "MIT",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "license": "ISC",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
-      "engines": {
-        "node": "*"
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "license": "ISC",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/graceful-fs": {
@@ -3896,7 +3897,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3905,6 +3905,25 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/http-errors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
+      "integrity": "sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "2.0.1",
+        "statuses": ">= 1.2.1 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.9.tgz",
@@ -3924,13 +3943,16 @@
         "node": ">= 14"
       }
     },
-    "node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "license": "Apache-2.0",
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
       "engines": {
-        "node": ">=8.12.0"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/idb": {
@@ -3951,16 +3973,15 @@
       }
     },
     "node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+      "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==",
       "license": "ISC"
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -3973,7 +3994,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -4024,18 +4044,24 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
       "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=12.13"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4061,12 +4087,20 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.9.6.tgz",
+      "integrity": "sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/json-schema-to-ts": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-1.6.4.tgz",
@@ -4078,17 +4112,19 @@
       }
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "license": "MIT",
-      "optional": true
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
     },
     "node_modules/jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -4106,7 +4142,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -4119,7 +4154,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lit": {
@@ -4160,9 +4194,9 @@
       "license": "MIT"
     },
     "node_modules/long": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/long/-/long-5.2.4.tgz",
-      "integrity": "sha512-qtzLbJE8hq7VabR3mISmVGtoXP8KGc2Z/AT8OuqlYD7JTR3oqrgwdjnk07wpj1twXxYmgDXgoKVWUG/fReSzHg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.1.tgz",
+      "integrity": "sha512-ka87Jz3gcx/I7Hal94xaN2tZEOPoUOEVftkQqZx2EeQRN7LGdfLlI3FvZ+7WDplm+vK2Urx9ULrvSowtdCieng==",
       "license": "Apache-2.0"
     },
     "node_modules/lottie-web": {
@@ -4172,21 +4206,9 @@
       "license": "MIT"
     },
     "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/lru-cache/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
     "node_modules/magic-string": {
@@ -4204,12 +4226,6 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "license": "ISC"
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT"
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4236,78 +4252,11 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/micro/node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/micro/node_modules/http-errors": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/micro/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/micro/node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/micro/node_modules/raw-body": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
-      "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.3",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/micro/node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "license": "ISC"
-    },
-    "node_modules/micro/node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
+    "node_modules/micro/node_modules/arg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+      "license": "MIT"
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -4322,77 +4271,71 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "license": "MIT",
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "license": "MIT",
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
       "engines": {
-        "node": ">=6"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "license": "ISC",
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 8"
       }
     },
-    "node_modules/minipass": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
-      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "license": "ISC",
       "dependencies": {
-        "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.0"
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/minizlib": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
-      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^2.9.0"
-      }
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
     },
     "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "license": "MIT",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
       "bin": {
         "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/mri": {
@@ -4414,7 +4357,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -4423,9 +4365,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.9.tgz",
+      "integrity": "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==",
       "funding": [
         {
           "type": "github",
@@ -4497,7 +4439,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4513,23 +4454,10 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4539,34 +4467,18 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+      "integrity": "sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==",
       "license": "ISC",
       "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "wrappy": "1"
       }
     },
     "node_modules/os-paths": {
@@ -4578,15 +4490,6 @@
         "node": ">= 6.0"
       }
     },
-    "node_modules/p-finally": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-      "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -4642,31 +4545,6 @@
         "path-to-regexp": "^1.0.0"
       }
     },
-    "node_modules/path-match/node_modules/http-errors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
-      "integrity": "sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "2.0.1",
-        "statuses": ">= 1.2.1 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/path-match/node_modules/inherits": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-      "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==",
-      "license": "ISC"
-    },
-    "node_modules/path-match/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
-      "license": "MIT"
-    },
     "node_modules/path-match/node_modules/path-to-regexp": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
@@ -4680,7 +4558,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -4699,25 +4576,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "license": "ISC"
-    },
-    "node_modules/path-scurry/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
+      "integrity": "sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw==",
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp-updated": {
+      "name": "path-to-regexp",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
       "license": "MIT"
     },
     "node_modules/pend": {
@@ -4726,6 +4595,12 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "license": "MIT"
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4733,12 +4608,12 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=8.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -4748,20 +4623,18 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/pinia": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
-      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.1.tgz",
+      "integrity": "sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.6.3",
-        "vue-demi": "^0.14.10"
+        "@vue/devtools-api": "^7.7.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -4776,20 +4649,28 @@
         }
       }
     },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.2.tgz",
+      "integrity": "sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.2"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
-      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -4818,7 +4699,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -4836,7 +4716,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -4856,7 +4735,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4892,7 +4770,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4918,7 +4795,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -4932,7 +4808,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pretty-ms": {
@@ -4980,16 +4855,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/pump": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
-      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
-      "license": "MIT",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5025,27 +4890,62 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raw-body": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
+      "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.3",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/http-errors": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body/node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
       }
     },
     "node_modules/readdirp": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",
-      "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
+      "dependencies": {
+        "picomatch": "^2.2.1"
       },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+      "engines": {
+        "node": ">=8.10.0"
       }
     },
     "node_modules/require-directory": {
@@ -5082,7 +4982,6 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -5109,15 +5008,21 @@
       }
     },
     "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rimraf": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
@@ -5133,63 +5038,10 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/rollup": {
-      "version": "4.32.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
-      "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.35.0.tgz",
+      "integrity": "sha512-kg6oI4g+vc41vePJyO6dHt/yl0Rz3Thv0kJeVQ3D1kS3E5XSuKbPc29G4IpT/Kv1KQwgHVcN+HtyS+HYLNSvQg==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.6"
@@ -5202,25 +5054,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.32.0",
-        "@rollup/rollup-android-arm64": "4.32.0",
-        "@rollup/rollup-darwin-arm64": "4.32.0",
-        "@rollup/rollup-darwin-x64": "4.32.0",
-        "@rollup/rollup-freebsd-arm64": "4.32.0",
-        "@rollup/rollup-freebsd-x64": "4.32.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.32.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.32.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.32.0",
-        "@rollup/rollup-linux-arm64-musl": "4.32.0",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.32.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.32.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.32.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.32.0",
-        "@rollup/rollup-linux-x64-gnu": "4.32.0",
-        "@rollup/rollup-linux-x64-musl": "4.32.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.32.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.32.0",
-        "@rollup/rollup-win32-x64-msvc": "4.32.0",
+        "@rollup/rollup-android-arm-eabi": "4.35.0",
+        "@rollup/rollup-android-arm64": "4.35.0",
+        "@rollup/rollup-darwin-arm64": "4.35.0",
+        "@rollup/rollup-darwin-x64": "4.35.0",
+        "@rollup/rollup-freebsd-arm64": "4.35.0",
+        "@rollup/rollup-freebsd-x64": "4.35.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.35.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.35.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.35.0",
+        "@rollup/rollup-linux-arm64-musl": "4.35.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.35.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.35.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.35.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.35.0",
+        "@rollup/rollup-linux-x64-gnu": "4.35.0",
+        "@rollup/rollup-linux-x64-musl": "4.35.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.35.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.35.0",
+        "@rollup/rollup-win32-x64-msvc": "4.35.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -5259,6 +5111,39 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+      "license": "ISC"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5281,9 +5166,9 @@
       }
     },
     "node_modules/signal-exit": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz",
-      "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -5307,6 +5192,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/stat-mode": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-0.3.0.tgz",
@@ -5314,9 +5208,9 @@
       "license": "MIT"
     },
     "node_modules/statuses": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -5342,36 +5236,21 @@
         "stream-to-array": "~2.3.0"
       }
     },
-    "node_modules/stream-to-promise/node_modules/end-of-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-      "integrity": "sha512-EoulkdKF/1xa92q25PbjuDcgJ9RDHYU2Rs3SCIvs2/dSQ3BpmxneNHmA/M7fe60M3PrV7nNGTTNbkK62l6vXiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "once": "~1.3.0"
-      }
-    },
-    "node_modules/stream-to-promise/node_modules/once": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-      "integrity": "sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/string-width-cjs": {
@@ -5389,7 +5268,22 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi": {
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
@@ -5401,6 +5295,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
@@ -5414,59 +5323,128 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
+      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
-
     "node_modules/tar": {
-      "version": "4.4.18",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.18.tgz",
-      "integrity": "sha512-ZuOtqqmkV9RE1+4odd+MhBpibmCxNP6PJhH/h2OqNuotTX7/XHPZQJv2pKvWMplFH9SIZZhitehh6vBH6LO8Pg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "license": "ISC",
       "dependencies": {
-        "chownr": "^1.1.4",
-        "fs-minipass": "^1.2.7",
-        "minipass": "^2.9.0",
-        "minizlib": "^1.3.3",
-        "mkdirp": "^0.5.5",
-        "safe-buffer": "^5.2.1",
-        "yallist": "^3.1.1"
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=4.5"
+        "node": ">=10"
       }
     },
-    "node_modules/tar/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
+    "node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -5476,7 +5454,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -5500,6 +5477,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5540,7 +5523,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/ts-morph": {
@@ -5596,6 +5578,12 @@
         }
       }
     },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "license": "MIT"
+    },
     "node_modules/ts-toolbelt": {
       "version": "6.15.5",
       "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
@@ -5627,6 +5615,18 @@
       "integrity": "sha512-R8375j0qwXyIu/7R0tjdF06/sElHqbmdmWC9M2qQHpEVbvE4I5+38KJI7LUUmQMp7NVq4tKHiBMkT0NFM453Ig==",
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
@@ -5634,12 +5634,12 @@
       "license": "MIT"
     },
     "node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "license": "MIT",
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">= 10.0.0"
       }
     },
     "node_modules/unpipe": {
@@ -5652,9 +5652,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
-      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
       "dev": true,
       "funding": [
         {
@@ -5705,7 +5705,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/uuid": {
@@ -5725,41 +5724,70 @@
       "license": "MIT"
     },
     "node_modules/vercel": {
-      "version": "39.3.0",
-      "resolved": "https://registry.npmjs.org/vercel/-/vercel-39.3.0.tgz",
-      "integrity": "sha512-VyGaH5tnVVsgACcbU4PCRyQBDg/SST7/HQBaIXNnmOW7Ngjcn04wamjPgYAdFUGroiTm+ZpmNbCO1DQXzNeTjQ==",
+      "version": "41.4.1",
+      "resolved": "https://registry.npmjs.org/vercel/-/vercel-41.4.1.tgz",
+      "integrity": "sha512-o7zsdAuFls+gMotvzoXFIe6pdsxsWmkdeQx7sAw4qbNgmDe80e0/C8hLEUs3wLO8NRI5E1AlwS2MM8vYs+ljOg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@vercel/build-utils": "9.0.1",
-        "@vercel/fun": "1.1.2",
+        "@vercel/build-utils": "10.5.1",
+        "@vercel/fun": "1.1.5",
         "@vercel/go": "3.2.1",
-        "@vercel/hydrogen": "1.0.11",
-        "@vercel/next": "4.4.2",
-        "@vercel/node": "5.0.2",
-        "@vercel/python": "4.7.0",
-        "@vercel/redwood": "2.1.12",
-        "@vercel/remix-builder": "5.0.2",
-        "@vercel/ruby": "2.1.0",
-        "@vercel/static-build": "2.5.41",
-        "chokidar": "4.0.0"
+        "@vercel/hydrogen": "1.2.0",
+        "@vercel/next": "4.7.4",
+        "@vercel/node": "5.1.14",
+        "@vercel/python": "4.7.1",
+        "@vercel/redwood": "2.3.0",
+        "@vercel/remix-builder": "5.4.3",
+        "@vercel/ruby": "2.2.0",
+        "@vercel/static-build": "2.7.6",
+        "chokidar": "4.0.0",
+        "jose": "5.9.6"
       },
       "bin": {
         "vc": "dist/vc.js",
         "vercel": "dist/vc.js"
       },
       "engines": {
-        "node": ">= 16"
+        "node": ">= 18"
+      }
+    },
+    "node_modules/vercel/node_modules/chokidar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz",
+      "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/vercel/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/vite": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
-      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
+      "integrity": "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==",
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.24.2",
-        "postcss": "^8.4.49",
-        "rollup": "^4.23.0"
+        "esbuild": "^0.25.0",
+        "postcss": "^8.5.3",
+        "rollup": "^4.30.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -5823,9 +5851,9 @@
       }
     },
     "node_modules/vite/node_modules/esbuild": {
-      "version": "0.24.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
-      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
+      "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5835,31 +5863,31 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.24.2",
-        "@esbuild/android-arm": "0.24.2",
-        "@esbuild/android-arm64": "0.24.2",
-        "@esbuild/android-x64": "0.24.2",
-        "@esbuild/darwin-arm64": "0.24.2",
-        "@esbuild/darwin-x64": "0.24.2",
-        "@esbuild/freebsd-arm64": "0.24.2",
-        "@esbuild/freebsd-x64": "0.24.2",
-        "@esbuild/linux-arm": "0.24.2",
-        "@esbuild/linux-arm64": "0.24.2",
-        "@esbuild/linux-ia32": "0.24.2",
-        "@esbuild/linux-loong64": "0.24.2",
-        "@esbuild/linux-mips64el": "0.24.2",
-        "@esbuild/linux-ppc64": "0.24.2",
-        "@esbuild/linux-riscv64": "0.24.2",
-        "@esbuild/linux-s390x": "0.24.2",
-        "@esbuild/linux-x64": "0.24.2",
-        "@esbuild/netbsd-arm64": "0.24.2",
-        "@esbuild/netbsd-x64": "0.24.2",
-        "@esbuild/openbsd-arm64": "0.24.2",
-        "@esbuild/openbsd-x64": "0.24.2",
-        "@esbuild/sunos-x64": "0.24.2",
-        "@esbuild/win32-arm64": "0.24.2",
-        "@esbuild/win32-ia32": "0.24.2",
-        "@esbuild/win32-x64": "0.24.2"
+        "@esbuild/aix-ppc64": "0.25.1",
+        "@esbuild/android-arm": "0.25.1",
+        "@esbuild/android-arm64": "0.25.1",
+        "@esbuild/android-x64": "0.25.1",
+        "@esbuild/darwin-arm64": "0.25.1",
+        "@esbuild/darwin-x64": "0.25.1",
+        "@esbuild/freebsd-arm64": "0.25.1",
+        "@esbuild/freebsd-x64": "0.25.1",
+        "@esbuild/linux-arm": "0.25.1",
+        "@esbuild/linux-arm64": "0.25.1",
+        "@esbuild/linux-ia32": "0.25.1",
+        "@esbuild/linux-loong64": "0.25.1",
+        "@esbuild/linux-mips64el": "0.25.1",
+        "@esbuild/linux-ppc64": "0.25.1",
+        "@esbuild/linux-riscv64": "0.25.1",
+        "@esbuild/linux-s390x": "0.25.1",
+        "@esbuild/linux-x64": "0.25.1",
+        "@esbuild/netbsd-arm64": "0.25.1",
+        "@esbuild/netbsd-x64": "0.25.1",
+        "@esbuild/openbsd-arm64": "0.25.1",
+        "@esbuild/openbsd-x64": "0.25.1",
+        "@esbuild/sunos-x64": "0.25.1",
+        "@esbuild/win32-arm64": "0.25.1",
+        "@esbuild/win32-ia32": "0.25.1",
+        "@esbuild/win32-x64": "0.25.1"
       }
     },
     "node_modules/vue": {
@@ -5985,9 +6013,9 @@
       }
     },
     "node_modules/web-vitals": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-0.2.4.tgz",
-      "integrity": "sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg==",
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
       "license": "Apache-2.0"
     },
     "node_modules/webidl-conversions": {
@@ -6045,17 +6073,17 @@
       }
     },
     "node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@@ -6079,6 +6107,62 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -6119,16 +6203,15 @@
       }
     },
     "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "license": "ISC"
     },
     "node_modules/yaml": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
       "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-      "devOptional": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
@@ -6164,6 +6247,47 @@
         "node": ">=12"
       }
     },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index 2d41cc2..c3f46d8 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,11 @@
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "amqplib": "^0.10.5",
+    "dompurify": "^3.2.4",
     "firebase": "^11.2.0",
-    "pinia": "^2.3.1",
-    "tailwindcss": "^3.4.11",
-    "vercel": "^39.3.0",
+    "pinia": "^3.0.1",
+    "tailwindcss": "^3.4.17",
+    "vercel": "^41.4.1",
     "vue": "^3.5.13",
     "vue-json-pretty": "^2.4.0",
     "vue-lite-youtube-embed": "^1.2.4",
@@ -30,7 +31,6 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-
     "autoprefixer": "^10.4.20",
     "vite": "^6.0.11"
   }
diff --git a/public/images/ed_on_superbus.jpg b/public/images/ed_on_superbus.jpg
new file mode 100755
index 0000000..bf00ee1
Binary files /dev/null and b/public/images/ed_on_superbus.jpg differ
diff --git a/src/App.vue b/src/App.vue
index dac7c4b..029bca3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,40 @@
 <template>
-  <div class="app-container">
-    <header class="flex justify-between items-center py-2 px-4">
+  <div :class="[
+    'app-container min-h-screen',
+    !isHomePath ? 'bg-gray-900 text-white' : ''
+  ]">
+    <header :class="[
+      'flex justify-between items-center py-2 px-4',
+      !isHomePath ? 'bg-gray-800' : ''
+    ]">
       <div class="flex items-center gap-3">
         <router-link to="/" class="flex items-center">
           <img :src="logo" alt="SOR Quizzes" class="h-7 md:h-8" />
         </router-link>
-        <h1 class="text-xxl font-semibold  text-gray-500 dark:text-gray-200 hidden md:block">
+        <h1 class="text-xxl font-semibold text-gray-200 block">
           Science of Reading Quizzes
         </h1>
       </div>
-      <UserStatus />
+      <div class="flex items-center gap-4">
+        <TopScores />
+        <UserStatus />
+      </div>
     </header>
 
     <!-- Help Modal -->
     <div v-if="showHelp" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
       @click.self="showHelp = false">
-      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-lg w-full shadow-xl">
+      <div class="bg-gray-800 rounded-lg p-6 max-w-lg w-full shadow-xl">
         <div class="flex justify-between items-start mb-4">
-          <h2 class="text-xl font-bold">About SOR Quizzes</h2>
-          <button @click="showHelp = false" class="text-gray-500 hover:text-gray-700 p-2">
+          <h2 class="text-xl font-bold text-white">About SOR Quizzes</h2>
+          <button @click="showHelp = false" class="text-gray-400 hover:text-gray-300 p-2">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
               stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
-        <div class="space-y-4 text-gray-600 dark:text-gray-300">
+        <div class="space-y-4 text-gray-300">
           <p>
             SOR Quizzes is a community-driven effort to create and share quiz content
             related to Science of Reading concepts.
@@ -37,11 +46,11 @@
             <li>Take quizzes to test your knowledge</li>
             <li>Create and submit new quiz questions</li>
             <li>Sign in with Google or GitHub to track your progress</li>
-            <li>Contribute to the <a href="https://github.com/EdJones/sor-quizzes" class="text-blue-500 hover:underline"
+            <li>Contribute to the <a href="https://github.com/EdJones/sor-quizzes" class="text-blue-400 hover:underline"
                 target="_blank">open source project</a></li>
           </ul>
           <p>
-            Created by <a href="https://skunkworks-edu.com" class="text-blue-500 hover:underline"
+            Created by <a href="https://skunkworks-edu.com" class="text-blue-400 hover:underline"
               target="_blank">Skunkworks\edu</a>
           </p>
         </div>
@@ -55,15 +64,22 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import UserStatus from './components/UserStatus.vue';
+import TopScores from './components/TopScores.vue';
 import logo from './assets/sor-quizzes-logo.png';
 import { useAuthStore } from './stores/authStore';
 import { useProgressStore } from './stores/progressStore';
+import { useRoute } from 'vue-router';
 
 const showHelp = ref(false);
 const authStore = useAuthStore();
 const progressStore = useProgressStore();
+const route = useRoute();
+
+const isHomePath = computed(() => {
+  return route.path === '/' || route.path === '/home';
+});
 
 // Watch for auth changes
 watch(() => authStore.user, async (newUser) => {
@@ -93,4 +109,18 @@ onMounted(async () => {
   max-width: 1200px;
   margin: 0 auto;
 }
+
+header {
+  flex-wrap: wrap;
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: 1.25rem;
+  }
+
+  img {
+    height: 1.5rem;
+  }
+}
 </style>
diff --git a/src/assets/ed_on_superbus.jpg b/src/assets/ed_on_superbus.jpg
new file mode 100755
index 0000000..bf00ee1
Binary files /dev/null and b/src/assets/ed_on_superbus.jpg differ
diff --git a/src/assets/partners.png b/src/assets/partners.png
new file mode 100644
index 0000000..a3fd298
Binary files /dev/null and b/src/assets/partners.png differ
diff --git a/src/assets/snipd-logo-negative.png b/src/assets/snipd-logo-negative.png
new file mode 100644
index 0000000..ab1f839
Binary files /dev/null and b/src/assets/snipd-logo-negative.png differ
diff --git a/src/assets/snipd-logo.png b/src/assets/snipd-logo.png
new file mode 100644
index 0000000..44d7375
Binary files /dev/null and b/src/assets/snipd-logo.png differ
diff --git a/src/components/AdminTools.vue b/src/components/AdminTools.vue
new file mode 100644
index 0000000..48b0f8b
--- /dev/null
+++ b/src/components/AdminTools.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="admin-tools p-4">
+        <button @click="updateMostRecentAttempts"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" :disabled="isUpdating">
+            {{ isUpdating ? 'Updating...' : 'Update Most Recent Attempts' }}
+        </button>
+        <div v-if="updateStatus" :class="['mt-2', updateStatus.success ? 'text-green-600' : 'text-red-600']">
+            {{ updateStatus.message }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useScoreStore } from '../stores/scoreStore';
+
+const scoreStore = useScoreStore();
+const isUpdating = ref(false);
+const updateStatus = ref(null);
+
+const updateMostRecentAttempts = async () => {
+    try {
+        isUpdating.value = true;
+        await scoreStore.collectAndUpdateMostRecentAttempts();
+        updateStatus.value = {
+            success: true,
+            message: 'Successfully updated most recent attempts'
+        };
+    } catch (error) {
+        console.error('Error updating most recent attempts:', error);
+        updateStatus.value = {
+            success: false,
+            message: 'Failed to update most recent attempts: ' + error.message
+        };
+    } finally {
+        isUpdating.value = false;
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/ContributionsModal.vue b/src/components/ContributionsModal.vue
new file mode 100644
index 0000000..3959337
--- /dev/null
+++ b/src/components/ContributionsModal.vue
@@ -0,0 +1,429 @@
+<template>
+    <div v-if="show" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-2xl w-full shadow-xl">
+            <!-- Header -->
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                    <svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                    </svg>
+                    Your Quiz Items
+                </h2>
+                <button @click="$emit('close')" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Stats Section -->
+            <div class="grid grid-cols-3 gap-4 mb-6">
+                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">Total Items</div>
+                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ userQuizItems.length }}</div>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">Published</div>
+                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ publishedCount }}</div>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">Drafts</div>
+                    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ draftCount }}</div>
+                </div>
+            </div>
+
+            <!-- Toggle for Published Items -->
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-2">
+                    <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Show Published Items</span>
+                </div>
+                <button @click="showPublishedItems = !showPublishedItems"
+                    class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                    :class="showPublishedItems ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-600'">
+                    <span class="sr-only">Toggle published items</span>
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+                        :class="showPublishedItems ? 'translate-x-6' : 'translate-x-1'"></span>
+                </button>
+            </div>
+
+            <!-- Quiz Items List -->
+            <div class="space-y-4 max-h-[60vh] overflow-y-auto">
+                <!-- Loading State -->
+                <div v-if="isLoading" class="text-center py-8">
+                    <svg class="animate-spin h-8 w-8 mx-auto text-purple-500" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+                        </circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                    <div class="mt-2 text-gray-500 dark:text-gray-400">Loading your quiz items...</div>
+                </div>
+
+                <!-- Empty State -->
+                <div v-else-if="userQuizItems.length === 0" class="text-center py-8">
+                    <div class="text-gray-500 dark:text-gray-400">No quiz items yet</div>
+                    <button @click="handleNewContribution"
+                        class="mt-4 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
+                        Create Your First Quiz Item
+                    </button>
+                </div>
+
+                <!-- Draft Items -->
+                <div v-else>
+                    <div v-if="draftItems.length > 0" class="mb-6">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                            <svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                            </svg>
+                            Draft Items
+                        </h3>
+                        <div class="space-y-4">
+                            <div v-for="item in draftItems" :key="item.id"
+                                class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <!-- biome-ignore format: off -->
+                                        <h3 class="font-medium text-gray-900 dark:text-white">{{ item.title || 'UntitledQuestion' }}
+                                        </h3>
+                                        <!-- biome-ignore format: off -->
+                                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ item.Question }}</p>
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        <span
+                                            class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+                                            Draft
+                                        </span>
+                                        <button @click="showVersionHistory(item.id)"
+                                            class="p-1 text-gray-500 hover:text-purple-500 dark:text-gray-400 dark:hover:text-purple-400"
+                                            title="View Version History">
+                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                            </svg>
+                                        </button>
+                                        <button @click="handleEditItem(item.id)"
+                                            class="p-1 text-gray-500 hover:text-purple-500 dark:text-gray-400 dark:hover:text-purple-400">
+                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                                    Created {{ item?.timestamp?.toDate?.()?.toLocaleString() || 'Unknown date' }}
+                                    <span class="ml-2">v{{ item.version || 1 }}</span>
+                                    <span class="ml-2 text-gray-400">ID: {{ item.id }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Published Items -->
+                    <div v-if="showPublishedItems && publishedItems.length > 0">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                            <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M5 13l4 4L19 7" />
+                            </svg>
+                            Published Items
+                        </h3>
+                        <div class="space-y-4">
+                            <div v-for="item in publishedItems" :key="item.id"
+                                class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium text-gray-900 dark:text-white"> {{ item.title ||
+                                            'Untitled Question' }}</h3>
+                                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ item.Question }}</p>
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        <span
+                                            class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                            Published
+                                        </span>
+                                        <button @click="showVersionHistory(item.id)"
+                                            class="p-1 text-gray-500 hover:text-purple-500 dark:text-gray-400 dark:hover:text-purple-400"
+                                            title="View Version History">
+                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                            </svg>
+                                        </button>
+                                        <button @click="handleEditItem(item.id)"
+                                            class="p-1 text-gray-500 hover:text-purple-500 dark:text-gray-400 dark:hover:text-purple-400">
+                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                                    Created {{ item?.timestamp?.toDate?.()?.toLocaleString() || 'Unknown date' }}
+                                    <span class="ml-2">v{{ item.version || 1 }}</span>
+                                    <span class="ml-2 text-gray-400">ID: {{ item.id }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="mt-6 flex justify-between items-center">
+                <button @click="handleNewContribution"
+                    class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center gap-2">
+                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                    </svg>
+                    New Quiz Item
+                </button>
+                <button @click="$emit('close')"
+                    class="px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Version History Modal -->
+    <VersionHistoryModal v-if="selectedQuizItemId" :show="showVersionHistoryModal" :quizItemId="selectedQuizItemId"
+        @close="showVersionHistoryModal = false" />
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { collection, query, where, getDocs, or } from 'firebase/firestore';
+import { db } from '../firebase';
+import { useAuthStore } from '../stores/authStore';
+import { quizEntries } from '../data/quiz-items';
+import VersionHistoryModal from './VersionHistoryModal.vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    }
+});
+
+const emit = defineEmits(['close']);
+
+const router = useRouter();
+const authStore = useAuthStore();
+const userQuizItems = ref([]);
+const isLoading = ref(false);
+
+// Add this computed property to find published items by email
+const publishedItemTitles = computed(() => {
+    if (!authStore.user?.email) return new Set();
+
+    // Create a Set of published item titles for O(1) lookup
+    return new Set(
+        quizEntries
+            .filter(qi => qi.userEmail === authStore.user.email)
+            .map(qi => qi.title)
+    );
+});
+
+// Computed stats using the cached published items
+const publishedCount = computed(() =>
+    userQuizItems.value.filter(item => publishedItemTitles.value.has(item.title)).length
+);
+
+const draftCount = computed(() =>
+    userQuizItems.value.filter(item => !publishedItemTitles.value.has(item.title)).length
+);
+
+// Modify getItemStatus to use the cached set
+const getItemStatus = (item) => {
+    return publishedItemTitles.value.has(item.title) ? 'published' : 'draft';
+};
+
+// Fetch user's quiz items
+const fetchUserQuizItems = async () => {
+    if (!authStore.user || authStore.user.isAnonymous) {
+        console.log('User not logged in or anonymous:', authStore.user);
+        return;
+    }
+
+    isLoading.value = true;
+    try {
+        const userInfo = {
+            email: authStore.user.email,
+            uid: authStore.user.uid,
+            isAnonymous: authStore.user.isAnonymous,
+            provider: authStore.user.providerData?.[0]?.providerId
+        };
+        console.log('Current user info:', userInfo);
+
+        let allDocs = [];
+
+        // Try all possible field combinations
+        const queries = [
+            // Email-based queries
+            query(collection(db, 'quizEntries'), where('userEmail', '==', authStore.user.email)),
+            query(collection(db, 'quizEntries'), where('email', '==', authStore.user.email)),
+            query(collection(db, 'quizEntries'), where('createdBy', '==', authStore.user.email)),
+
+            // UID-based queries
+            query(collection(db, 'quizEntries'), where('userId', '==', authStore.user.uid)),
+            query(collection(db, 'quizEntries'), where('uid', '==', authStore.user.uid)),
+            query(collection(db, 'quizEntries'), where('createdBy', '==', authStore.user.uid))
+        ];
+
+        console.log('Running queries on quizEntries collection for fields: userEmail, email, createdBy, userId, uid');
+
+        // Execute all queries
+        for (const [index, q] of queries.entries()) {
+            try {
+                const snapshot = await getDocs(q);
+                if (snapshot.docs.length > 0) {
+                    console.log(`Query ${index} found ${snapshot.docs.length} documents`);
+                    allDocs = [...allDocs, ...snapshot.docs];
+                }
+            } catch (error) {
+                console.error(`Error in query ${index}:`, error);
+            }
+        }
+
+        // Remove duplicates and create final items array
+        const combinedItems = new Map();
+        for (const doc of allDocs) {
+            if (!combinedItems.has(doc.id)) {
+                const data = doc.data();
+                combinedItems.set(doc.id, {
+                    id: doc.id,
+                    ...data,
+                    status: data.isDraft ? 'draft' : 'published'
+                });
+            }
+        }
+
+        userQuizItems.value = Array.from(combinedItems.values());
+        console.log('Final combined items:', userQuizItems.value);
+
+    } catch (error) {
+        console.error('Error fetching user quiz items:', error);
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+// Navigation handlers
+const handleEditItem = async (itemId) => {
+    try {
+        console.log('Handling edit for item:', itemId);
+
+        // Wait for auth state to be initialized
+        if (authStore.loading) {
+            console.log('Waiting for auth initialization...');
+            await authStore.init();
+        }
+
+        console.log('Auth state:', {
+            isAuthenticated: authStore.isAuthenticated,
+            canEdit: authStore.canEdit,
+            isAnonymous: authStore.isAnonymous,
+            user: authStore.user?.email,
+            currentRoute: router.currentRoute.value.path
+        });
+
+        // Check if user can edit
+        if (!authStore.canEdit) {
+            console.log('User cannot edit, redirecting to login');
+            // Redirect to login with return URL
+            await router.push({
+                path: '/login',
+                query: { redirect: `/quiz-item-editor/${itemId}` }
+            });
+            emit('close');
+            return;
+        }
+
+        // User can edit, proceed with navigation
+        console.log('User can edit, proceeding with navigation');
+
+        // First close the modal
+        emit('close');
+
+        // Then navigate using name and wait for it to complete
+        try {
+            await router.push({
+                name: 'quizItemEditor',
+                params: { id: itemId },
+                // Force navigation even if we're already on a similar path
+                replace: false,
+                // Add a timestamp to force a new navigation
+                query: { _t: Date.now() }
+            });
+
+            // Double check that we ended up where we expected
+            const expectedPath = `/quiz-item-editor/${itemId}`;
+            if (router.currentRoute.value.path !== expectedPath) {
+                console.warn('Navigation may have been intercepted, retrying with path...');
+                await router.push(expectedPath);
+            }
+
+            console.log('Navigation completed to:', router.currentRoute.value.path);
+        } catch (navError) {
+            console.error('Navigation error:', navError);
+            throw navError;
+        }
+    } catch (error) {
+        console.error('Error in handleEditItem:', error);
+    }
+};
+
+const handleNewContribution = () => {
+    // Close the modal first
+    emit('close');
+    // Then navigate
+    router.push({
+        name: 'quizItemEditor',
+        query: { new: 'true' }
+    });
+};
+
+const showVersionHistoryModal = ref(false);
+const selectedQuizItemId = ref('');
+
+const showVersionHistory = (itemId) => {
+    if (itemId) {
+        selectedQuizItemId.value = itemId;
+        showVersionHistoryModal.value = true;
+    }
+};
+
+const showPublishedItems = ref(false);
+
+// Add computed properties for draft and published items
+const draftItems = computed(() =>
+    userQuizItems.value.filter(item => !publishedItemTitles.value.has(item.title))
+);
+
+const publishedItems = computed(() =>
+    userQuizItems.value.filter(item => publishedItemTitles.value.has(item.title))
+);
+
+onMounted(() => {
+    if (props.show) {
+        fetchUserQuizItems();
+    }
+});
+
+// Watch for show prop changes to refresh data when modal opens
+watch(() => props.show, (newValue) => {
+    if (newValue) {
+        fetchUserQuizItems();
+    }
+});
+</script>
\ No newline at end of file
diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
new file mode 100644
index 0000000..bdf549f
--- /dev/null
+++ b/src/components/CustomDropdown.vue
@@ -0,0 +1,331 @@
+<template>
+    <div class="custom-dropdown relative" @keydown.esc="isOpen = false">
+        <button type="button" @click="toggleDropdown" class="w-full px-4 py-2 rounded-lg border border-gray-300/50 
+                bg-white/50 dark:bg-gray-500/50 
+                dark:border-gray-600/50 text-white
+                focus:ring-2 focus:ring-amber-400 focus:border-transparent
+                backdrop-blur-sm
+                transition-colors duration-200 ease-in-out
+                appearance-none cursor-pointer
+                hover:bg-white/40 dark:hover:bg-gray-500/40
+                flex justify-between items-center">
+            <span>{{ selectedLabel || 'Start from scratch' }}</span>
+            <svg class="w-5 h-5 ml-2" :class="{ 'transform rotate-180': isOpen }" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+        </button>
+
+        <div v-if="isOpen"
+            class="absolute z-50 w-full mt-1 bg-gray-800 border border-gray-700 rounded-lg shadow-xl max-h-96 overflow-y-auto">
+            <!-- Start from scratch option -->
+            <div @click="selectOption('')" class="px-4 py-2 cursor-pointer hover:bg-gray-700 border-b border-gray-700">
+                Start from scratch
+            </div>
+
+            <!-- Loading state -->
+            <div v-if="isLoading" class="px-4 py-2 text-gray-400">
+                Loading draft items...
+            </div>
+
+            <!-- Error state -->
+            <div v-else-if="error" class="px-4 py-2 text-red-400">
+                Error loading drafts: {{ error }}
+            </div>
+
+            <!-- Content -->
+            <template v-else>
+                <!-- My Draft Quiz Items -->
+                <div v-if="userDrafts.length" class="border-b border-gray-700">
+                    <div class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-800">My Draft Quiz Items</div>
+                    <div v-for="item in userDrafts" :key="item.id" @click="selectOption(item.id)"
+                        class="px-4 py-2 cursor-pointer hover:bg-gray-700">
+                        <div class="flex justify-between items-center">
+                            <span class="text-white">{{ item.title || 'Untitled Draft' }}</span>
+                            <div class="flex items-center gap-2">
+                                <span v-if="item.version" class="text-xs text-gray-400">v{{ item.version }}</span>
+                                <span class="text-xs text-gray-400">{{ formatDate(item.timestamp) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pending Review -->
+                <div v-if="pendingItems.length" class="border-b border-gray-700">
+                    <div class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-800">Pending Review</div>
+                    <div v-for="item in pendingItems" :key="item.id" @click="selectOption(item.id)"
+                        class="px-4 py-2 cursor-pointer hover:bg-gray-700">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <span class="text-white">{{ item.title || 'Untitled Pending' }}</span>
+                                <span class="text-sm text-gray-400">({{ item.userEmail || 'Anonymous' }})</span>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <span v-if="item.version" class="text-xs text-gray-400">v{{ item.version }}</span>
+                                <span class="text-xs text-gray-400">{{ formatDate(item.timestamp) }}</span>
+                                <button v-if="item.userId !== auth.user?.uid" @click="handleFork(item, $event)"
+                                    :disabled="isForking"
+                                    class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1">
+                                    <span v-if="isForking">Forking...</span>
+                                    <span v-else>Fork</span>
+                                    <svg v-if="isForking" class="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Other Draft Items -->
+                <div v-if="otherDrafts.length" class="border-b border-gray-700">
+                    <div class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-800">Other Draft Items</div>
+                    <div v-for="item in otherDrafts" :key="item.id" @click="selectOption(item.id)"
+                        class="px-4 py-2 cursor-pointer hover:bg-gray-700">
+                        <div class="flex justify-between items-center">
+                            <span class="text-white">{{ item.title || 'Untitled Draft' }}</span>
+                            <div class="flex items-center gap-2">
+                                <span v-if="item.version" class="text-xs text-gray-400">v{{ item.version }}</span>
+                                <span class="text-xs text-gray-400">{{ formatDate(item.timestamp) }}</span>
+                                <button v-if="item.userId !== auth.user?.uid" @click="handleFork(item, $event)"
+                                    :disabled="isForking"
+                                    class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1">
+                                    <span v-if="isForking">Forking...</span>
+                                    <span v-else>Fork</span>
+                                    <svg v-if="isForking" class="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Permanent Quiz Items -->
+                <div v-if="permanentItems.length">
+                    <div class="px-4 py-2 text-sm font-medium text-blue-400 bg-gray-800">Permanent Quiz Items</div>
+                    <div v-for="item in permanentItems" :key="item.id" @click="selectOption(item.id)"
+                        class="px-4 py-2 cursor-pointer hover:bg-gray-700">
+                        <div class="flex justify-between items-center">
+                            <span class="text-blue-400">{{ String(item.id).padStart(3, '0') }}. {{ item.title }}</span>
+                            <div class="flex items-center gap-2">
+                                <span class="text-xs text-blue-300">{{ formatDate(item.timestamp) }}</span>
+                                <button v-if="item.userId !== auth.user?.uid" @click="handleFork(item, $event)"
+                                    :disabled="isForking"
+                                    class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1">
+                                    <span v-if="isForking">Forking...</span>
+                                    <span v-else>Fork</span>
+                                    <svg v-if="isForking" class="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Fork Success Message -->
+                <div v-if="forkSuccess" class="px-4 py-2 text-green-400 bg-gray-800 border-t border-gray-700">
+                    Successfully forked quiz item!
+                </div>
+
+                <!-- Fork Error Message -->
+                <div v-if="forkError" class="px-4 py-2 text-red-400 bg-gray-800 border-t border-gray-700">
+                    {{ forkError }}
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { quizStore } from '../stores/quizStore';
+import { useAuthStore } from '../stores/authStore';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    userDrafts: {
+        type: Array,
+        default: () => []
+    },
+    pendingItems: {
+        type: Array,
+        default: () => []
+    },
+    otherDrafts: {
+        type: Array,
+        default: () => []
+    },
+    acceptedItems: {
+        type: Array,
+        default: () => []
+    },
+    permanentItems: {
+        type: Array,
+        default: () => []
+    },
+    isLoading: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const store = quizStore();
+const auth = useAuthStore();
+const isOpen = ref(false);
+const selectedValue = ref(props.modelValue);
+const isForking = ref(false);
+const forkSuccess = ref(false);
+const forkError = ref(null);
+
+const selectedLabel = computed(() => {
+    const allItems = [...props.userDrafts, ...props.pendingItems, ...props.otherDrafts, ...props.permanentItems];
+    const selected = allItems.find(item => item.id === props.modelValue);
+    if (!selected) return '';
+    return selected.title || 'Untitled';
+});
+
+const toggleDropdown = () => {
+    isOpen.value = !isOpen.value;
+    // Reset fork states when opening dropdown
+    if (isOpen.value) {
+        forkSuccess.value = false;
+        forkError.value = null;
+    }
+};
+
+const selectOption = async (value) => {
+    selectedValue.value = value;
+    emit('update:modelValue', value);
+    emit('change', value);
+    isOpen.value = false;
+};
+
+const handleFork = async (item, event) => {
+    event.stopPropagation(); // Prevent dropdown from closing
+    isForking.value = true;
+    forkError.value = null;
+    
+    try {
+        // Log the item being forked
+        console.log('Forking quiz entry:', {
+            id: item.id,
+            title: item.title,
+            isPermanent: item.isPermanent,
+            originalId: item.originalId || item.id // Use originalId if available, otherwise use id
+        });
+
+        // Ensure we have a valid ID
+        if (!item.id && !item.originalId) {
+            throw new Error('Invalid quiz entry ID');
+        }
+
+        // Fork the quiz entry using the appropriate ID
+        const idToFork = item.originalId || item.id;
+        const newId = await store.forkQuizEntry(idToFork);
+        
+        // Log the result
+        console.log('Successfully forked quiz entry:', {
+            originalId: idToFork,
+            newId: newId
+        });
+
+        forkSuccess.value = true;
+        // Close dropdown after successful fork
+        setTimeout(() => {
+            isOpen.value = false;
+            isForking.value = false;
+            forkSuccess.value = false;
+        }, 1500);
+    } catch (error) {
+        console.error('Error forking quiz entry:', error);
+        forkError.value = error.message || 'Failed to fork quiz entry';
+        isForking.value = false;
+    }
+};
+
+const formatDate = (timestamp) => {
+    if (!timestamp) return '';
+    const date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp);
+    return date.toLocaleDateString();
+};
+
+// Close dropdown when clicking outside
+const handleClickOutside = (event) => {
+    if (!event.target.closest('.custom-dropdown')) {
+        isOpen.value = false;
+    }
+};
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+});
+
+// Log props for debugging
+console.log('CustomDropdown props:', {
+    userDrafts: props.userDrafts.map(item => ({
+        id: item.id,
+        title: item.title,
+        version: item.version
+    })),
+    pendingItems: props.pendingItems.map(item => ({
+        id: item.id,
+        title: item.title,
+        version: item.version
+    })),
+    otherDrafts: props.otherDrafts.map(item => ({
+        id: item.id,
+        title: item.title,
+        version: item.version
+    }))
+});
+</script>
+
+<style scoped>
+.custom-dropdown {
+    position: relative;
+    width: 100%;
+}
+
+.custom-dropdown button {
+    transition: all 0.2s ease;
+}
+
+.custom-dropdown button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.max-h-96 {
+    max-height: 24rem;
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Discuss.vue b/src/components/Discuss.vue
new file mode 100644
index 0000000..b24a8d7
--- /dev/null
+++ b/src/components/Discuss.vue
@@ -0,0 +1,294 @@
+<template>
+    <div class="discuss-container">
+        <!-- Discussion Button -->
+        <button @click="handleShowDiscussion"
+            class="flex items-center gap-1 px-3 py-1 text-sm border-green-400 bg-gray-700 hover:bg-gray-600 text-green-400 rounded-lg transition-colors duration-200">
+            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            </svg>
+            <span class="hidden md:inline">Discuss</span>
+            <span v-if="discussStore.totalUnreadCount > 0"
+                class="ml-1 px-1.5 py-0.5 text-xs bg-green-500 text-white rounded-full">
+                {{ discussStore.totalUnreadCount }}
+            </span>
+        </button>
+
+        <!-- Discussion Modal -->
+        <div v-if="showDiscussion"
+            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-0 sm:p-4 z-50">
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-4xl sm:w-full">
+                <!-- Modal Header -->
+                <div class="flex justify-between items-center p-3 sm:p-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">Discussions</h3>
+                    <button @click="handleCloseDiscussion"
+                        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2">
+                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="flex flex-col sm:flex-row h-[calc(100vh-4rem)] sm:h-[28rem]">
+                    <!-- Quiz Sets List -->
+                    <div
+                        class="w-full sm:w-64 border-b sm:border-b-0 sm:border-r border-gray-200 dark:border-gray-700 overflow-y-auto h-[40vh] sm:h-full">
+                        <div class="p-2 sm:p-4">
+                            <!-- App Title and General Discussion in same row on mobile -->
+                            <div class="flex items-center justify-between sm:block mb-2 sm:mb-3">
+                                <h2 class="text-base sm:text-xl font-bold text-gray-900 dark:text-white">SorQuizzes</h2>
+                                <div @click="selectQuizSet(null)"
+                                    class="flex-shrink-0 px-2 py-1 sm:px-3 sm:py-2 rounded-lg cursor-pointer transition-colors"
+                                    :class="[
+                                        !selectedQuizSet
+                                            ? 'bg-blue-500 text-white'
+                                            : 'text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                    ]">
+                                    <div class="text-sm sm:text-base font-medium">General</div>
+                                    <div v-if="discussStore.unreadCount['_general']" class="text-xs">
+                                        <span class="px-1.5 py-0.5 bg-green-500 text-white rounded-full">
+                                            {{ discussStore.unreadCount['_general'] }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Compact divider on mobile -->
+                            <div class="border-t border-gray-200 dark:border-gray-700 my-2 sm:my-4"></div>
+
+                            <!-- Quiz Sets Section with compact spacing on mobile -->
+                            <h3 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-white mb-1 sm:mb-3">Quiz
+                                Sets</h3>
+                            <div class="grid grid-cols-2 sm:grid-cols-1 gap-1 sm:gap-2">
+                                <div v-for="quizSet in filteredQuizSets" :key="quizSet.setName"
+                                    @click="selectQuizSet(quizSet)"
+                                    class="p-1.5 sm:p-2 rounded-lg cursor-pointer transition-colors" :class="[
+                                        selectedQuizSet?.setName === quizSet.setName
+                                            ? 'bg-blue-500 text-white'
+                                            : 'text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                    ]">
+                                    <div class="text-sm sm:text-base font-medium truncate">{{ quizSet.setName }}</div>
+                                    <div class="text-xs flex items-center justify-between" :class="[
+                                        selectedQuizSet?.setName === quizSet.setName
+                                            ? 'text-white opacity-75'
+                                            : 'text-gray-600 dark:text-gray-400'
+                                    ]">
+                                        <span>{{ quizSet.items.length }} items</span>
+                                        <span v-if="discussStore.unreadCount[quizSet.setName]"
+                                            class="px-1.5 py-0.5 bg-green-500 text-white rounded-full">
+                                            {{ discussStore.unreadCount[quizSet.setName] }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Messages Area -->
+                    <div class="flex-1 flex flex-col bg-gray-50 dark:bg-gray-900 min-h-0 h-[calc(60vh-4rem)] sm:h-full">
+                        <!-- Messages Container -->
+                        <div class="flex-1 p-2 sm:p-3 overflow-y-auto" ref="messagesContainer">
+                            <div v-if="discussStore.isLoading[selectedQuizSet?.setName || '_general']"
+                                class="flex justify-center items-center h-full">
+                                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                            </div>
+                            <div v-else-if="discussStore.error" class="text-red-500 text-center">
+                                Error loading messages. Please try again.
+                            </div>
+                            <template v-else>
+                                <!-- Welcome message when no messages -->
+                                <div v-if="!discussStore.messages[selectedQuizSet?.setName || '_general']?.length"
+                                    class="text-center text-gray-500 dark:text-gray-400 mt-4">
+                                    {{ selectedQuizSet ?
+                                        `Start the discussion about ${selectedQuizSet.setName}` :
+                                        'Welcome to General Discussion! Feel free to start a conversation.' }}
+                                </div>
+                                <!-- Messages -->
+                                <div v-else
+                                    v-for="message in discussStore.messages[selectedQuizSet?.setName || '_general']"
+                                    :key="message.id" class="mb-4"
+                                    :class="{ 'ml-auto': message.userId === authStore.user?.uid }">
+                                    <div class="flex items-start gap-2"
+                                        :class="{ 'flex-row-reverse': message.userId === authStore.user?.uid }">
+                                        <div
+                                            class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0 flex items-center justify-center text-gray-700 dark:text-gray-200">
+                                            {{ message.userName?.charAt(0).toUpperCase() }}
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div class="flex items-center gap-2"
+                                                :class="{ 'flex-row-reverse': message.userId === authStore.user?.uid }">
+                                                <span class="text-sm font-medium text-gray-900 dark:text-white">
+                                                    {{ message.userName }}
+                                                </span>
+                                                <span class="text-xs text-gray-500 dark:text-gray-400">
+                                                    {{ formatTime(message.timestamp) }}
+                                                </span>
+                                            </div>
+                                            <div class="mt-1 p-3 rounded-lg" :class="[
+                                                message.userId === authStore.user?.uid
+                                                    ? 'bg-blue-500 text-white'
+                                                    : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
+                                            ]">
+                                                {{ message.content }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+
+                        <!-- Message Input -->
+                        <div class="p-3 sm:p-4 border-t border-gray-200 dark:border-gray-700">
+                            <form @submit.prevent="handleSendMessage" class="flex gap-2">
+                                <input v-model="newMessage" type="text" :placeholder="selectedQuizSet ?
+                                    `Message about ${selectedQuizSet.setName}...` :
+                                    'Type your message...'"
+                                    class="flex-1 px-3 sm:px-4 py-2 text-sm sm:text-base rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <button type="submit" :disabled="isSending || !newMessage.trim()"
+                                    class="px-3 sm:px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 text-sm sm:text-base">
+                                    Send
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue';
+import { useAuthStore } from '../stores/authStore';
+import { useDiscussStore } from '../stores/discussStore';
+
+export default {
+    name: 'Discuss',
+    props: {
+        quizSets: {
+            type: Array,
+            required: true
+        }
+    },
+    setup(props) {
+        const showDiscussion = ref(false);
+        const selectedQuizSet = ref(null);
+        const newMessage = ref('');
+        const isSending = ref(false);
+        const messagesContainer = ref(null);
+        const authStore = useAuthStore();
+        const discussStore = useDiscussStore();
+        const filteredQuizSets = computed(() => {
+            return props.quizSets.filter(quizSet =>
+                quizSet.setName.toLowerCase() !== 'test-expert' &&
+                !quizSet.debug
+            );
+        });
+
+        // Subscribe to messages for all quiz sets and general discussion
+        onMounted(() => {
+            // Subscribe to general discussion
+            discussStore.subscribeToMessages('_general');
+
+            // Subscribe to quiz set discussions
+            filteredQuizSets.value.forEach(quizSet => {
+                discussStore.subscribeToMessages(quizSet.setName);
+            });
+        });
+
+        // Cleanup on unmount
+        onUnmounted(() => {
+            discussStore.cleanup();
+        });
+
+        // Scroll to bottom when new messages arrive
+        watch([
+            () => showDiscussion.value,
+            () => selectedQuizSet.value,
+            () => {
+                const topicId = selectedQuizSet.value?.setName || 'general';
+                return discussStore.messages[topicId];
+            }
+        ], async () => {
+            if (showDiscussion.value) {
+                await nextTick();
+                if (messagesContainer.value) {
+                    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+                }
+            }
+        }, { deep: true });
+
+        const selectQuizSet = (quizSet) => {
+            selectedQuizSet.value = quizSet;
+            const topicId = quizSet?.setName || '_general';
+            discussStore.markAsRead(topicId);
+        };
+
+        const handleShowDiscussion = () => {
+            showDiscussion.value = true;
+            const topicId = selectedQuizSet.value?.setName || '_general';
+            discussStore.markAsRead(topicId);
+        };
+
+        const handleCloseDiscussion = () => {
+            showDiscussion.value = false;
+            const topicId = selectedQuizSet.value?.setName || '_general';
+            discussStore.markAsRead(topicId);
+        };
+
+        const handleSendMessage = async () => {
+            if (!newMessage.value.trim() || isSending.value) return;
+
+            isSending.value = true;
+            const topicId = selectedQuizSet.value?.setName || '_general';
+
+            try {
+                await discussStore.sendMessage({
+                    content: newMessage.value.trim(),
+                    quizSetId: topicId,
+                    userId: authStore.user.uid,
+                    userName: authStore.user.displayName || 'Anonymous',
+                    timestamp: new Date()
+                });
+                newMessage.value = '';
+            } catch (error) {
+                console.error('Error sending message:', error);
+            } finally {
+                isSending.value = false;
+            }
+        };
+
+        const formatTime = (timestamp) => {
+            if (!timestamp) return '';
+            return new Intl.DateTimeFormat('default', {
+                hour: 'numeric',
+                minute: 'numeric',
+                hour12: true
+            }).format(timestamp);
+        };
+
+        return {
+            showDiscussion,
+            selectedQuizSet,
+            newMessage,
+            isSending,
+            messagesContainer,
+            authStore,
+            discussStore,
+            filteredQuizSets,
+            selectQuizSet,
+            handleShowDiscussion,
+            handleCloseDiscussion,
+            handleSendMessage,
+            formatTime
+        };
+    }
+};
+</script>
+
+<style scoped>
+.discuss-container {
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Explanation.vue b/src/components/Explanation.vue
index ce74740..db3f94d 100644
--- a/src/components/Explanation.vue
+++ b/src/components/Explanation.vue
@@ -16,6 +16,15 @@
                     <p v-if="quizItem.ref1" class="mt-2 text-sm">{{ quizItem.ref1 }}</p>
                     <p v-if="quizItem.ref2" class="text-sm">{{ quizItem.ref2 }}</p>
                     <p v-if="quizItem.ref3" class="mb- text-sm">{{ quizItem.ref3 }}</p>
+
+                    <!-- Modal button - only show if modal content exists -->
+                    <div v-if="quizItem.modal && quizItem.modal.trim() !== '' && quizItem.modal !== 'Enter modal content here'"
+                        class="mt-4">
+                        <button @click="showModal = true" class="modal-button">
+                            Learn More
+                        </button>
+                    </div>
+
                     <div v-if="quizItem.resources && quizItem.resources.length > 0 && quizItem.resources[0].title != ''"
                         class="resources-wrapper">
                         <Resource v-for="(resource, index) in quizItem.resources" :key="index" :resource="resource" />
@@ -42,6 +51,21 @@
             </div>
             <Caution :message="quizItem.caution" />
         </div>
+
+        <!-- Modal Dialog -->
+        <div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-4"
+            @click.self="showModal = false">
+            <div
+                class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-3xl max-h-[90vh] overflow-y-auto border border-gray-200 dark:border-gray-700">
+                <button @click="showModal = false"
+                    class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white text-xl transition-colors"
+                    aria-label="Close">
+                    ×
+                </button>
+                <div class="modal-content prose dark:prose-invert max-w-none text-left" v-html="formattedModalContent">
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -80,12 +104,68 @@ export default {
     setup(props) {
         console.log('Explanation setup, quizItem:', props.quizItem);
         const showFeedback = ref(false);
+        const showModal = ref(false);
 
         const isCorrect = computed(() => {
             if (props.quizItem.answer_type === 'sortable') {
                 return props.userAnswer.every((id, index) => id === props.quizItem.correctOrder[index]);
             }
-            // ... handle other question types ...
+            if (props.quizItem.answer_type === 'ms') {
+                const correctAnswers = props.quizItem.correctAnswers || [];
+                return Array.isArray(props.userAnswer) &&
+                    props.userAnswer.length === correctAnswers.length &&
+                    props.userAnswer.every(answer => correctAnswers.includes(answer));
+            }
+            // For multiple choice questions
+            return String(props.userAnswer) === String(props.quizItem.correctAnswer);
+        });
+
+        // Format modal content to handle line breaks
+        const formattedModalContent = computed(() => {
+            if (!props.quizItem.modal) return '';
+
+            // Process the content with Markdown-like formatting
+            let content = props.quizItem.modal
+                // Handle headings with improved styling
+                .replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mb-4 text-left">$1</h1>')
+                .replace(/^## (.+)$/gm, '<h2 class="text-xl font-bold mb-3 mt-4 text-left">$1</h2>')
+                .replace(/^### (.+)$/gm, '<h3 class="text-lg font-bold mb-2 mt-3 text-left">$1</h3>')
+
+                // Handle lists with better spacing
+                .replace(/^- (.+)$/gm, '<li class="ml-4 mb-2 text-left">$1</li>')
+
+                // Handle bold text
+                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+
+                // Handle italics
+                .replace(/\*([^\*]+)\*/g, '<em>$1</em>')
+
+                // Handle quotes
+                .replace(/^> (.+)$/gm, '<blockquote class="pl-4 border-l-4 border-gray-300 dark:border-gray-600 italic text-gray-700 dark:text-gray-300 my-4">$1</blockquote>')
+
+                // Handle paragraphs and line breaks with better spacing
+                .replace(/\n\n/g, '</p><p class="mb-4 text-left">')
+                .replace(/\n/g, '<br>');
+
+            // Wrap in paragraph tags if not already wrapped
+            if (!content.startsWith('<h1') && !content.startsWith('<h2') && !content.startsWith('<h3') && !content.startsWith('<blockquote')) {
+                content = '<p class="mb-4 text-left">' + content;
+            }
+
+            // Close any unclosed paragraphs
+            if (!content.endsWith('</p>') && !content.endsWith('</h1>') && !content.endsWith('</h2>') && !content.endsWith('</h3>') && !content.endsWith('</blockquote>')) {
+                content += '</p>';
+            }
+
+            // Wrap lists in ul tags with better styling
+            content = content.replace(/<li class="ml-4 mb-2 text-left">(.+?)<\/li>/g, function (match) {
+                return '<ul class="list-disc ml-6 mb-4 pl-0">' + match + '</ul>';
+            });
+
+            // Fix nested ul tags
+            content = content.replace(/<\/ul><ul class="list-disc ml-6 mb-4 pl-0">/g, '');
+
+            return content;
         });
 
         // Function to be called when an answer is submitted
@@ -95,9 +175,26 @@ export default {
 
         return {
             showFeedback,
+            showModal,
             isCorrect,
-            checkAnswer
+            checkAnswer,
+            formattedModalContent
         };
+    },
+    mounted() {
+        // Add event listener for escape key to close modal
+        document.addEventListener('keydown', this.handleKeyDown);
+    },
+    beforeUnmount() {
+        // Remove event listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    },
+    methods: {
+        handleKeyDown(e) {
+            if (e.key === 'Escape' && this.showModal) {
+                this.showModal = false;
+            }
+        }
     }
 }
 </script>
@@ -144,6 +241,16 @@ export default {
     margin-top: .7rem;
 }
 
+.explanation {
+    color: #333 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    .explanation {
+        color: #f7fafc !important;
+    }
+}
+
 @media (max-width: 768px) {
     .content-wrapper {
         flex-direction: column;
@@ -169,4 +276,157 @@ export default {
     margin-right: -1rem;
     padding-right: 0%;
 }
+
+/* Modal styles */
+.modal-button {
+    background-image: linear-gradient(90deg, #4a7ff3 40%, #702afa);
+    color: white;
+    padding: 0.1rem 0.2rem;
+    border-radius: 0.375rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.modal-button:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Add a subtle gradient background to the modal */
+.relative {
+    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+}
+
+:root[class~="dark"] .relative {
+    background: linear-gradient(to bottom, #1f2937, #111827);
+}
+
+.modal-content {
+    color: #333;
+    text-align: left !important;
+    line-height: 1.6;
+    font-size: 1.05rem;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    letter-spacing: 0.01em;
+    padding: 0.5rem 0.25rem;
+}
+
+:root[class~="dark"] .modal-content {
+    color: #f7fafc;
+}
+
+/* Add specific styling for modal content elements */
+:deep(.modal-content h1),
+:deep(.modal-content h2),
+:deep(.modal-content h3),
+:deep(.modal-content p),
+:deep(.modal-content ul),
+:deep(.modal-content ol) {
+    text-align: left !important;
+    margin-bottom: 1rem;
+}
+
+:deep(.modal-content h1) {
+    font-size: 1.0rem;
+    color: #4a7ff3;
+    border-bottom: 2px solid rgba(74, 127, 243, 0.3);
+    padding-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+:deep(.modal-content h2) {
+    font-size: 1.5rem;
+    color: #702afa;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+}
+
+:deep(.modal-content h3) {
+    font-size: 1.25rem;
+    color: #4a7ff3;
+    margin-top: 1.25rem;
+    font-weight: 600;
+}
+
+:deep(.modal-content p) {
+    margin-bottom: 1.0rem;
+    line-height: 1.3;
+    color: rgba(51, 51, 51, 0.9);
+}
+
+:root[class~="dark"] :deep(.modal-content p) {
+    color: rgba(247, 250, 252, 0.9);
+}
+
+:deep(.modal-content strong) {
+    color: #702afa;
+    font-weight: 600;
+}
+
+:deep(.modal-content ul),
+:deep(.modal-content ol) {
+    padding-left: 1.2rem;
+    margin-bottom: 1.0rem;
+}
+
+:deep(.modal-content li) {
+    margin-bottom: 0.5rem;
+    text-align: left !important;
+    line-height: 1.2;
+    color: rgba(51, 51, 51, 0.9);
+}
+
+:root[class~="dark"] :deep(.modal-content li) {
+    color: rgba(247, 250, 252, 0.9);
+}
+
+/* Ensure proper contrast */
+.modal-content {
+    background-color: white;
+    color: #333 !important;
+}
+
+:root[class~="dark"] .modal-content {
+    background-color: #1f2937;
+    color: #f7fafc !important;
+}
+
+:deep(.modal-content a) {
+    color: #4a7ff3;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition: color 0.2s, text-decoration-thickness 0.2s;
+}
+
+:deep(.modal-content a:hover) {
+    color: #702afa;
+    text-decoration-thickness: 2px;
+}
+
+/* Animation for modal */
+.fixed {
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index fec9536..a2199f9 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -3,46 +3,58 @@
         <div v-if="showQuizzes">
 
             <div class="sm:w-full md:w-9/12 lg:w-5/6 lg:px-4 quizzes-container text-center">
-                <div class="mt-16 grid quiz-item w-full border-4 place-self-center place-content-center text-center">
-                    <p class="h2 mt-8">We're just getting started, but for now...</p>
+                <div
+                    class="mt-4 sm:mt-8 md:mt-16 grid quiz-item w-full border-4 place-self-center place-content-center text-center">
+                    <p class="h2 mt-4 sm:mt-8">We're just getting started, but for now...</p>
                     <p class="font-bold text-sky-900 h2">Choose a role / level of difficulty:</p>
-                    <div class="mt-4 mb-2 gap-8 columns-1">
-                        <div><button @click="showQuiz(5)" class="lg:text-3xl sm:text-2xl px-4 py-1">Why Care?</button>
+                    <div class="mt-2 sm:mt-4 mb-1 sm:mb-2 gap-4 sm:gap-8 columns-1">
+                        <div><button @click="showQuiz(6)" class="lg:text-3xl sm:text-2xl px-4 py-1">Why Care?</button>
                         </div>
                     </div>
-                    <div class="mt-2 mb-2 gap-8 columns-2">
-                        <div><button @click="showQuiz(0)" class="lg:text-3xl sm:text-2xl px-4 py-1">Expert</button>
+                    <div class="mt-1 sm:mt-2 mb-1 sm:mb-2 gap-4 sm:gap-8 columns-2">
+                        <div><button @click="showQuiz(1)" class="lg:text-3xl sm:text-2xl px-4 py-1">Expert</button>
                         </div>
-                        <div><button @click="showQuiz(1)" class="lg:text-3xl sm:text-2xl px-4 py-1">Basic</button></div>
+                        <div><button @click="showQuiz(0)" class="lg:text-3xl sm:text-2xl px-4 py-1">Basic</button></div>
                     </div>
-                    <div class="mt-2 mb-2 gap-8 columns-2">
-                        <div><button @click="showQuiz(2)"
+                    <div class="mt-1 sm:mt-2 mb-1 sm:mb-2 gap-4 sm:gap-8 columns-2">
+                        <div><button @click="showQuiz(3)"
                                 class="place-self-center place-content-center lg:text-3xl sm:text-2xl px-4 py-1">Kinder-First</button>
                         </div>
-                        <div><button @click="showQuiz(3)"
+                        <div><button @click="showQuiz(4)"
                                 class="place-self-center place-content-center lg:text-3xl sm:text-2xl px-4 py-1">Admin,
                                 Board
                                 Members</button></div>
                     </div>
-                    <div v-if="debug" class="mt-2 mb-8">
-                        <button @click="showQuiz(4)"
+                    <div v-if="debug" class="mt-1 sm:mt-2 mb-4 sm:mb-8">
+                        <button @click="showQuiz(5)"
                             class="place-self-center place-content-center lg:text-3xl sm:text-2xl">Test
                             Expert</button>
                     </div>
-                    <div class="mt-2 mb-8">
-                        <button @click="showQuiz(6)"
+                    <div class="mt-1 sm:mt-2 mb-1 sm:mb-2">
+                        <button @click="showQuiz(7)"
                             class="place-self-center place-content-center lg:text-2xl sm:text-xl  px-4 py-1">Learning
                             Science</button>
                     </div>
+                    <div class="mt-1 sm:mt-2 mb-4 sm:mb-8">
+                        <button @click="showQuiz(2)"
+                            class="place-self-center place-content-center lg:text-2xl sm:text-xl  px-4 py-1">New Quiz
+                            Items</button>
+                    </div>
                 </div>
             </div>
-            <div class="mt-24 w-full place-content-center">
-                <p class="h3">SOR Quizzes is a <a href="https://github.com/EdJones/sor-quizzes">community
-                        driven
-                        effort</a>, created by <a href="https://skunkworks-edu.com">Skunkworks\edu</a>.</p>
+            <div class="mt-4 sm:mt-8 w-full place-content-center">
                 <div class="router-link-container">
-                    <router-link to="/new-item" class="button-75">Suggest a New Quiz Entry</router-link>
+                    <router-link to="/QuizSetView" class="button-75">Contribute to these quizzes</router-link>
+                </div>
+                <div class="router-link-container mt-2 sm:mt-4 mb-4 sm:mb-8">
+                    <p class="h3 mt-2 sm:mt-4">SOR Quizzes is a <router-link to="/about"
+                            class=" hover:text-sky-700">community
+                            driven
+                            effort</router-link>.</p>
+                    <img src="../assets/partners.png" alt="Partners" class="w-10 h-10 ml-2" />
                 </div>
+
+
             </div>
         </div>
         <div v-else-if="showInProgress">
@@ -188,6 +200,7 @@ export default {
 .router-link-container {
     display: flex;
     justify-content: center;
+    align-items: center;
     margin-top: 10px;
 }
 </style>
diff --git a/src/components/InProgress.vue b/src/components/InProgress.vue
index cdd88da..b24d81a 100644
--- a/src/components/InProgress.vue
+++ b/src/components/InProgress.vue
@@ -25,7 +25,8 @@
                 </div>
 
                 <div class="router-link-container">
-                    <router-link to="/new-item" class="button-77">Add/Edit a New Quiz Entry</router-link>
+                    <router-link :to="{ name: 'quizItemEditor', query: { new: 'true' } }" class="button-77">Add/Edit a
+                        New Quiz Entry</router-link>
                 </div>
                 <div class="feedback-section">
                     <p class="mt-4 mb-4">OR </p>
@@ -67,7 +68,13 @@ export default {
     props: {
         selectedQuiz: {
             type: Number,
-            required: true
+            required: false,
+            default: null
+        },
+        quizSet: {
+            type: Object,
+            required: false,
+            default: null
         }
     },
     data() {
@@ -78,21 +85,37 @@ export default {
             podcastEpisodes: null
         }
     },
+    computed: {
+        currentQuiz() {
+            // If quizSet is provided directly, use it
+            if (this.quizSet) {
+                return this.quizSet;
+            }
+            // Otherwise, look up the quiz set by index
+            else if (this.selectedQuiz !== null) {
+                return quizSets[this.selectedQuiz];
+            }
+            // Fallback
+            return null;
+        }
+    },
     created() {
-        console.log('Selected Quiz Index:', this.selectedQuiz);
-        console.log('Quiz Name:', quizSets[this.selectedQuiz]?.setName);
-        console.log('Full Quiz Data:', quizSets[this.selectedQuiz]);
+        if (!this.currentQuiz) {
+            console.error('No quiz data available - either selectedQuiz or quizSet must be provided');
+            return;
+        }
 
-        this.quizTitle = quizSets[this.selectedQuiz]?.setName || 'New';
+        console.log('Quiz Name:', this.currentQuiz?.setName);
+        console.log('Full Quiz Data:', this.currentQuiz);
+        this.quizTitle = this.currentQuiz?.setName || 'New';
 
         // Ensure we get the episodes array
-        const currentQuiz = quizSets[this.selectedQuiz];
-        if (currentQuiz?.podcastEpisodes) {
-            console.log('Found podcastEpisodes:', currentQuiz.podcastEpisodes);
-            this.podcastEpisodes = [...currentQuiz.podcastEpisodes];
-        } else if (currentQuiz?.podcastEpisode) {
+        if (this.currentQuiz?.podcastEpisodes) {
+            console.log('Found podcastEpisodes:', this.currentQuiz.podcastEpisodes);
+            this.podcastEpisodes = [...this.currentQuiz.podcastEpisodes];
+        } else if (this.currentQuiz?.podcastEpisode) {
             console.log('Found single podcastEpisode');
-            this.podcastEpisode = currentQuiz.podcastEpisode;
+            this.podcastEpisode = this.currentQuiz.podcastEpisode;
         } else {
             console.log('No podcast data found');
         }
@@ -107,7 +130,16 @@ export default {
             if (this.feedback.trim()) {
                 try {
                     const progressStore = useProgressStore();
-                    await progressStore.saveQuizProgress(this.selectedQuiz, {
+                    // Use selectedQuiz if available, otherwise try to find the index
+                    const quizId = this.selectedQuiz !== null ?
+                        this.selectedQuiz :
+                        quizSets.findIndex(set => set.setName === this.currentQuiz?.setName);
+
+                    if (quizId === -1) {
+                        throw new Error('Could not determine quiz ID for feedback');
+                    }
+
+                    await progressStore.saveQuizProgress(quizId, {
                         inProgressFeedback: this.feedback,
                         timestamp: new Date()
                     });
diff --git a/src/components/MultipleChoice.vue b/src/components/MultipleChoice.vue
index 1008278..20bd655 100644
--- a/src/components/MultipleChoice.vue
+++ b/src/components/MultipleChoice.vue
@@ -14,7 +14,7 @@
                 </div>
                 <div v-if="greenOutline[0]" class="p-0 m-0">
                     <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                        class="m-0 p-0">
+                        class="m-0 p-0" @error="handleLottieError">
                     </Vue3Lottie>
                 </div>
             </li>
@@ -27,7 +27,7 @@
                 <div class="list-item-right"> {{ quizItem.option2 }}</div>
                 <div v-if="greenOutline[1] && highlighted[2]" class="p-0">
                     <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                        class="m-0 p-0">
+                        class="m-0 p-0" @error="handleLottieError">
                     </Vue3Lottie>
                 </div>
             </li>
@@ -42,7 +42,7 @@
                 <div v-if="greenOutline[2] && highlighted[3]" class="">
                     <div class="bg-stone-400/25 ">
                         <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                            class="m-0 p-0 bg-white">
+                            class="m-0 p-0 bg-white" @error="handleLottieError">
                         </Vue3Lottie>
                     </div>
                 </div>
@@ -58,7 +58,7 @@
                 </div>
                 <div v-if="greenOutline[3] && highlighted[4]" class="p-0">
                     <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                        class="m-0 p-0">
+                        class="m-0 p-0" @error="handleLottieError">
                     </Vue3Lottie>
                 </div>
             </li>
@@ -71,7 +71,7 @@
                 <div class="list-item-right">{{ quizItem.option5 }}</div>
                 <div v-if="greenOutline[4] && highlighted[5]" class="p-0">
                     <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                        class="m-0 p-0">
+                        class="m-0 p-0" @error="handleLottieError">
                     </Vue3Lottie>
                 </div>
             </li>
@@ -84,7 +84,7 @@
                 <div class="list-item-right">{{ quizItem.option6 }}</div>
                 <div v-if="greenOutline[5] && highlighted[6]" class="p-0">
                     <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
-                        class="m-0 p-0">
+                        class="m-0 p-0" @error="handleLottieError">
                     </Vue3Lottie>
                 </div>
             </li>
@@ -209,6 +209,9 @@ export default {
             // Logic to update the component's internal state based on quizItem
             console.log("Updated Quiz Item:", this.quizItem);
             // Reset selections or update displayed question based on quizItem
+        },
+        handleLottieError(error) {
+            console.error('Error with Lottie animation:', error);
         }
     }
 }
@@ -224,7 +227,6 @@ ul {
     list-style-type: none;
 }
 
-
 a {
     color: #42b983;
 }
@@ -233,13 +235,14 @@ a {
     border-style: solid;
     border-top-right-radius: 2dvw;
     border-radius: 2dvw;
-
+    color: #333;
 }
 
 .question-text {
     margin: 2;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-weight: 400;
+    color: #333;
 }
 
 .answer {
@@ -248,16 +251,28 @@ a {
     border-style: solid;
     border-width: 2pt;
     text-align: left;
+    color: #333;
 }
 
+@media (prefers-color-scheme: dark) {
+    .quiz-item {
+        color: #f7fafc;
+    }
 
-.list-asking {
+    .question-text {
+        color: #f7fafc;
+    }
 
+    .answer {
+        color: #f7fafc;
+    }
+}
+
+.list-asking {
     margin-top: auto;
     margin-bottom: auto;
     margin-right: 10px;
     margin-left: 10px;
-
     color: red;
 }
 
@@ -271,10 +286,16 @@ a {
 .list-item-right {
     margin-top: auto;
     margin-bottom: auto;
-    min-width: 60px;
+    min-width: 100px;
+    flex-grow: 1;
     padding-right: 8px;
 }
 
+@media (min-width: 768px) {
+    .list-item-right {
+        min-width: 200px;
+    }
+}
 
 .hidden {
     visibility: hidden;
diff --git a/src/components/MultipleSelect.vue b/src/components/MultipleSelect.vue
new file mode 100644
index 0000000..053987f
--- /dev/null
+++ b/src/components/MultipleSelect.vue
@@ -0,0 +1,267 @@
+<template>
+    <div class="grid quiz-item w-full border-4 place-self-center place-content-center text-center">
+        <h5 class="text-stone-400 lg:pt-2">{{ quizItem.title }}</h5>
+        <p class="question-text mb-2">Q: {{ quizItem.Question }}</p>
+        <p class="question-text mb-2">{{ quizItem.questionP2 }}</p>
+
+        <ul class="lg:w-2/3 place-self-center mb-4">
+            <li v-for="(option, index) in options" :key="index" :class="{
+                'bg-stone-400 border-amber-500': selectedOptions.includes(index + 1),
+                'border-green-400': greenOutline[index]
+            }" class="flex flex-row min-h-14 answer" @click="toggleOption(index + 1)">
+                <div class="list-asking">
+                    <OptionIcon :status="getOptionStatus(index)"></OptionIcon>
+                </div>
+                <div class="list-item-right">{{ option }}</div>
+                <div v-if="greenOutline[index] && selectedOptions.includes(index + 1)" class="p-0 m-0">
+                    <Vue3Lottie autoplay loop mode="normal" :animationData="fireworksJSON" style="width: 70px"
+                        class="m-0 p-0" @error="handleLottieError">
+                    </Vue3Lottie>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import OptionIcon from "./OptionIcon.vue";
+import fireworksJSON from '../lottie/fireworks.json'
+import { quizStore } from '../stores/quizStore';
+
+export default {
+    name: 'MultipleSelect',
+    setup() {
+        const store = quizStore();
+        return { store };
+    },
+    props: {
+        quizItem: {
+            type: Object,
+            required: true
+        },
+        userAnswer: {
+            type: Array,
+            default: () => []
+        },
+        reviewMode: {
+            type: Boolean,
+            default: false
+        },
+        itemNum: {
+            type: Number,
+            required: true
+        },
+        basicMode: {
+            type: Boolean,
+            required: true
+        }
+    },
+    components: {
+        OptionIcon,
+    },
+    computed: {
+        options() {
+            return [
+                this.quizItem.option1,
+                this.quizItem.option2,
+                this.quizItem.option3,
+                this.quizItem.option4,
+                this.quizItem.option5,
+                this.quizItem.option6
+            ].filter(option => option && option !== 'Third option' && option !== 'Fourth option' && option !== 'Fifth option');
+        }
+    },
+    watch: {
+        itemNum(newItemNum, oldItemNum) {
+            console.log("In MultipleSelect watcher itemNum, item changed from", oldItemNum, " to ", newItemNum);
+            this.selectedOptions = [];
+            this.greenOutline = Array(6).fill(false);
+
+            if (!this.basicMode) {
+                if (!this.reviewMode) {
+                    this.optionsStatus = Array(6).fill(1);
+                } else {
+                    const userAnswer = this.store.simpleAnswers[this.itemNum];
+                    if (userAnswer) {
+                        this.selectedOptions = Array.isArray(userAnswer) ? userAnswer : [userAnswer];
+                        this.optionsStatus = Array(6).fill(2);
+                        this.selectedOptions.forEach(answer => {
+                            this.optionsStatus[answer - 1] = 5;
+                        });
+                        this.quizItem.correctAnswers.forEach(answer => {
+                            this.optionsStatus[answer - 1] = 4;
+                            this.greenOutline[answer - 1] = true;
+                        });
+                    }
+                }
+            }
+        },
+        reviewMode(oldStatus, newStatus) {
+            console.log("reviewMode changed from ", oldStatus, " to ", newStatus);
+            this.selectedOptions = [];
+            if (this.reviewMode) {
+                const userAnswer = this.store.simpleAnswers[this.itemNum];
+                if (userAnswer) {
+                    this.selectedOptions = Array.isArray(userAnswer) ? userAnswer : [userAnswer];
+                    this.optionsStatus = Array(6).fill(2);
+                    this.selectedOptions.forEach(answer => {
+                        this.optionsStatus[answer - 1] = 5;
+                    });
+                    this.quizItem.correctAnswers.forEach(answer => {
+                        this.optionsStatus[answer - 1] = 4;
+                        this.greenOutline[answer - 1] = true;
+                    });
+                }
+            }
+            else {
+                this.optionsStatus = Array(6).fill(1);
+            }
+        },
+    },
+    data() {
+        return {
+            selectedOptions: [],
+            greenOutline: Array(6).fill(false),
+            optionsStatus: Array(6).fill(1),
+            fireworksJSON
+        }
+    },
+    mounted() {
+        if (this.reviewMode) {
+            const userAnswer = this.store.simpleAnswers[this.itemNum];
+            if (userAnswer) {
+                this.selectedOptions = Array.isArray(userAnswer) ? userAnswer : [userAnswer];
+                this.optionsStatus = Array(6).fill(2);
+                this.selectedOptions.forEach(answer => {
+                    this.optionsStatus[answer - 1] = 5;
+                });
+                this.quizItem.correctAnswers.forEach(answer => {
+                    this.optionsStatus[answer - 1] = 4;
+                    this.greenOutline[answer - 1] = true;
+                });
+            }
+        }
+    },
+    methods: {
+        toggleOption(option) {
+            const index = this.selectedOptions.indexOf(option);
+            if (index === -1) {
+                this.selectedOptions.push(option);
+            } else {
+                this.selectedOptions.splice(index, 1);
+            }
+            this.optionsStatus[option - 1] = this.selectedOptions.includes(option) ? 3 : 1;
+
+            this.$emit('answer-selected', this.selectedOptions);
+            this.$emit('update:selectedOption', this.selectedOptions);
+            this.$emit('selected', this.selectedOptions);
+        },
+        getOptionStatus(index) {
+            return this.optionsStatus[index];
+        },
+        handleAnswerSelected(selectedOptions) {
+            console.log("Answer selected:", selectedOptions);
+            this.$emit('selected');
+        },
+        handleLottieError(error) {
+            console.error('Error with Lottie animation:', error);
+        }
+    }
+}
+</script>
+
+<style scoped>
+h3 {
+    margin: 40px 0 0;
+}
+
+ul {
+    list-style-type: none;
+}
+
+a {
+    color: #42b983;
+}
+
+.quiz-item {
+    border-style: solid;
+    border-top-right-radius: 2dvw;
+    border-radius: 2dvw;
+    color: #333;
+}
+
+.question-text {
+    margin: 2;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-weight: 400;
+    color: #333;
+}
+
+.answer {
+    margin: 5px;
+    border-radius: 5pt;
+    border-style: solid;
+    border-width: 2pt;
+    text-align: left;
+    color: #333;
+    cursor: pointer;
+}
+
+@media (prefers-color-scheme: dark) {
+    .quiz-item {
+        color: #f7fafc;
+    }
+
+    .question-text {
+        color: #f7fafc;
+    }
+
+    .answer {
+        color: #f7fafc;
+    }
+}
+
+.list-asking {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.list-item-right {
+    margin-top: auto;
+    margin-bottom: auto;
+    min-width: 100px;
+    flex-grow: 1;
+    padding-right: 8px;
+}
+
+@media (min-width: 768px) {
+    .list-item-right {
+        min-width: 200px;
+    }
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.test-border {
+    border: #42b983;
+    border-style: solid;
+}
+
+.correct-choice {
+    color: green;
+}
+
+.caution-icon {
+    height: 20;
+    width: 20;
+    color: #FFBF00;
+}
+
+.caution-message {
+    padding-left: 4;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NewItem.vue b/src/components/NewItem.vue
index 12ef079..6c73438 100644
--- a/src/components/NewItem.vue
+++ b/src/components/NewItem.vue
@@ -14,8 +14,8 @@
 
       <div v-if="submitStatus.type === 'success' && submittedEntry" class="submitted-preview mt-4">
         <h3>Your submitted quiz item:</h3>
-        <QuizItem :currentQuizItem="submittedEntry" :itemNum="0" :reviewMode="true" :basicMode="false"
-          :userAnswer="submittedEntry.correctAnswer" />
+        <QuizItem :currentQuizItem="submittedEntry" :itemNum="0" :reviewMode="true" :basicMode="false" :debug="false"
+          :userAnswer="submittedEntry.answer_type === 'ms' ? submittedEntry.correctAnswers : submittedEntry.correctAnswer" />
       </div>
     </div>
 
@@ -28,7 +28,7 @@
               :class="['return-button smaller-button', { active: returnButton.active }]">
               Return to Quizzes
             </button>
-            <button type="button" @click="$router.push('/quiz-set')"
+            <button type="button" @click="$router.push('/quizSetView')"
               class="return-button smaller-button bg-indigo-600 hover:bg-indigo-700 text-white">
               View Quiz Sets
             </button>
@@ -69,21 +69,21 @@
           <span v-else>Copied!</span>
         </button>
       </div>
-      <VueJsonPretty :data="newEntry" :deep="2" :showLength="true" :showDoubleQuotes="true" :showLine="true"
+      <VueJsonPretty :data="newEntry" :deep="2" :showLength="true" :showDoubleQuotes="false" :showLine="true"
         :selectableType="'single'" />
     </div>
 
     <div v-if="previewMode" class="preview-section">
       <QuizItem :currentQuizItem="newEntry" :itemNum="0" :reviewMode="true" :basicMode="false" :previewMode="true"
-        :userAnswer="newEntry.correctAnswer" />
+        :debug="false" :userAnswer="newEntry.correctAnswer" />
     </div>
 
     <div v-else>
       <QuizItem :currentQuizItem="newEntry" :itemNum="0" :reviewMode="true" :basicMode="false" :previewMode="true"
-        :userAnswer="newEntry.correctAnswer" />
+        :debug="false" :userAnswer="newEntry.correctAnswer" />
     </div>
 
-    <form v-else @submit.prevent="submitForm">
+    <form @submit.prevent="submitForm">
       <!-- Add this at the top of the form, before other sections -->
       <div class="template-selector">
         <div class="form1-section bg-indigo-950/10 dark:bg-indigo-950/30 ">
@@ -546,15 +546,24 @@
       </div>
 
       <div class="mt-4 flex justify-between items-center">
-        <button @click="saveDraft"
-          class="px-6 py-2 bg-black hover:bg-gray-900 text-[#02b87d] rounded-lg flex items-center transition-colors border-2 border-[#02b87d]">
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M4 4v16a2 2 0 002 2h12a2 2 0 002-2V8.342a2 2 0 00-.602-1.43l-4.44-4.342A2 2 0 0013.56 2H6a2 2 0 00-2 2z" />
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6" />
-          </svg>
-          Save Draft
-        </button>
+        <div class="flex gap-2">
+          <button type="button" @click="saveDraft"
+            class="px-6 py-2 bg-black hover:bg-gray-900 text-[#02b87d] rounded-lg flex items-center transition-colors border-2 border-[#02b87d]">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 4v16a2 2 0 002 2h12a2 2 0 002-2V8.342a2 2 0 00-.602-1.43l-4.44-4.342A2 2 0 0013.56 2H6a2 2 0 00-2 2z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6" />
+            </svg>
+            Save Draft
+          </button>
+          <button type="button" @click="showVersionInfoModal = true"
+            class="px-6 py-2 bg-violet-500 hover:bg-violet-600 text-white rounded-lg flex items-center transition-colors border-2 border-violet-400">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            Test Modal
+          </button>
+        </div>
         <button type="submit" :class="[
           'submit-btn',
           {
@@ -567,12 +576,16 @@
       </div>
     </form>
 
-    <!-- Add save status indicator -->
+    <!-- Move these outside the form -->
     <div v-if="saveStatus.show" :class="['save-status-indicator', saveStatus.type]" role="status" aria-live="polite">
       {{ saveStatus.message }}
     </div>
 
     <ProgressSteps :currentStep="currentStep" />
+
+    <!-- Keep VersionInfoModal here, outside of any v-if conditions -->
+    <VersionInfoModal :show="showVersionInfoModal" @close="showVersionInfoModal = false"
+      @save="handleSaveDraftWithVersion" />
   </div>
 </template>
 
@@ -585,12 +598,14 @@ import 'vue-json-pretty/lib/styles.css'
 import { quizEntries } from '../data/quiz-items';
 import { ref, watch, onMounted, computed } from 'vue';
 import ProgressSteps from './ProgressSteps.vue';
+import VersionInfoModal from './VersionInfoModal.vue';
 
 export default {
   components: {
     QuizItem,
     VueJsonPretty,
-    ProgressSteps
+    ProgressSteps,
+    VersionInfoModal
   },
   setup() {
     const store = quizStore();
@@ -614,11 +629,17 @@ export default {
         .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
     });
 
+    const acceptedQuizItems = computed(() => {
+      return store.draftQuizItems
+        .filter(item => item.status === 'accepted')
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+    });
+
     onMounted(async () => {
       await store.fetchDraftQuizItems();
     });
 
-    return { store, auth, userDraftQuizItems, otherDraftQuizItems, pendingQuizItems };
+    return { store, auth, userDraftQuizItems, otherDraftQuizItems, pendingQuizItems, acceptedQuizItems };
   },
   computed: {
     newEntry: {
@@ -693,6 +714,7 @@ export default {
       previewMode: false,
       jsonPreviewMode: false,
       showExplanationSection: false,
+      showVersionInfoModal: false, // Initialize modal visibility state
       returnButton: {
         active: false
       },
@@ -773,12 +795,29 @@ export default {
         // Submit for review
         await this.store.submitForReview(this.store.draftQuizEntry.id);
 
-        this.submittedEntry = { ...this.newEntry };
+        // Make a deep copy of the current entry
+        this.submittedEntry = JSON.parse(JSON.stringify(this.newEntry));
+
+        // Initialize store state for the submitted preview
+        if (this.submittedEntry.answer_type === 'ms') {
+          this.store.simpleAnswers = {
+            0: this.submittedEntry.correctAnswers // For multiple select questions
+          };
+        } else {
+          this.store.simpleAnswers = {
+            0: this.submittedEntry.correctAnswer // For multiple choice questions
+          };
+        }
+
+        // Show success message and preview
         this.submitStatus = {
           show: true,
           type: 'success',
           message: 'Quiz entry submitted successfully!'
         };
+
+        // Force a re-render of the QuizItem component
+        await this.$nextTick();
       } catch (e) {
         this.submitStatus = {
           show: true,
@@ -787,29 +826,44 @@ export default {
         };
       }
     },
-    async saveDraft() {
+    async saveDraft(event) {
+      // Prevent any default form submission
+      if (event) {
+        event.preventDefault();
+      }
+
+      // Simply show the modal
+      this.showVersionInfoModal = true;
+      console.log('Modal should be visible now:', this.showVersionInfoModal);
+    },
+    async handleSaveDraftWithVersion(versionMessage) {
       try {
-        await this.store.recordQuizEdit();
+        console.log('Saving draft with version message:', versionMessage);
         const draftId = await this.store.saveDraftQuizEntry();
+        console.log('Draft saved with ID:', draftId);
 
         if (!draftId) {
           throw new Error('Failed to save draft');
         }
 
-        // Run validation check after successful save
-        await this.checkValidation();
+        await this.store.recordQuizEdit(versionMessage);
+        console.log('Quiz edit recorded successfully');
 
         this.submitStatus = {
           show: true,
           type: 'success',
           message: 'Draft saved successfully!'
         };
-      } catch (e) {
+      } catch (error) {
+        console.error('Error saving draft:', error);
         this.submitStatus = {
           show: true,
           type: 'error',
-          message: e.message || 'Error saving draft'
+          message: error.message || 'Error saving draft'
         };
+      } finally {
+        // Close the modal
+        this.showVersionInfoModal = false;
       }
     },
     returnToQuizzes() {
@@ -876,7 +930,9 @@ export default {
     },
     async copyToClipboard() {
       try {
-        const jsonString = JSON.stringify(this.newEntry, null, 2);
+        // Convert to string with custom replacer to remove property quotes
+        const jsonString = JSON.stringify(this.newEntry, null, 2)
+          .replace(/"(\w+)":/g, '$1:'); // Remove quotes around property names
         await navigator.clipboard.writeText(jsonString);
         this.copySuccess = true;
         console.log('Copied to clipboard:', jsonString); // Debug log
diff --git a/src/components/OpenSourceModal.vue b/src/components/OpenSourceModal.vue
new file mode 100644
index 0000000..0499243
--- /dev/null
+++ b/src/components/OpenSourceModal.vue
@@ -0,0 +1,173 @@
+<template>
+    <div v-show="isVisible" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999] p-4"
+        @click.self="handleClose">
+        <div
+            class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+            <button @click="handleClose"
+                class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white text-xl transition-colors"
+                aria-label="Close">
+                ×
+            </button>
+
+            <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Culture of Open Source</h3>
+
+            <div class="space-y-6 text-gray-700 dark:text-gray-300">
+                <section>
+                    <h4 class="text-md font-semibold mb-2">Overview</h4>
+                    <p>
+                        An open source community is a group of individuals who collaborate to develop software, with
+                        contributions made voluntarily based on their interests and needs, rather than being assigned
+                        tasks by
+                        executives.
+                    </p>
+                    <p>
+                        Open source communities are characterized by collaboration, transparency, and a meritocratic
+                        approach
+                        where contributions are valued based on their merit, fostering a spirit of innovation and shared
+                        learning.
+                    </p>
+                </section>
+
+                <section>
+                    <h4 class="text-md font-semibold mb-2">Key Principles and Values</h4>
+                    <ul class="list-disc pl-5 space-y-2">
+                        <li><strong>Collaboration and Transparency:</strong> Open source projects are built through the
+                            collective efforts of individuals, with source code and development processes being openly
+                            accessible.</li>
+                        <li><strong>Meritocracy:</strong> Contributions are evaluated based on their quality and impact,
+                            rather
+                            than factors like title or position.</li>
+                        <li><strong>Openness and Inclusivity:</strong> Open source communities generally welcome
+                            contributions
+                            from anyone, regardless of their background or experience.</li>
+                        <li><strong>Respect and Reciprocity:</strong> Open source communities value respectful
+                            communication and
+                            mutual support among members.</li>
+                        <li><strong>Self-Organization:</strong> Open source projects often have a decentralized
+                            structure,
+                            allowing for flexibility and adaptability.</li>
+                        <li><strong>Freedom to Share:</strong> Open source encourages the free distribution and
+                            modification of
+                            software, fostering innovation and experimentation.</li>
+                        <li><strong>Volunteerism:</strong> Many open source projects are driven by volunteers who
+                            contribute
+                            their time and expertise.</li>
+                        <li><strong>Community-Driven Development:</strong> Open source communities are dynamic
+                            ecosystems driven
+                            by shared goals, mutual support, and evolving motivations.</li>
+                        <li><strong>Learning and Innovation:</strong> Open source communities are spaces where people
+                            can learn
+                            from each other, share knowledge, and contribute to the advancement of technology.</li>
+                    </ul>
+                </section>
+
+                <section>
+                    <h4 class="text-md font-semibold mb-2">How Open Source Communities Work</h4>
+                    <ul class="list-disc pl-5 space-y-2">
+                        <li><strong>Voluntary Contributions:</strong> Individuals contribute to open source projects
+                            based on
+                            their interests and expertise, rather than being paid employees.</li>
+                        <li><strong>Open Communication:</strong> Open source communities rely on open communication and
+                            collaboration to share ideas, discuss issues, and coordinate development efforts.</li>
+                        <li><strong>Version Control Systems:</strong> Tools like Git are used to track changes to the
+                            source
+                            code and facilitate collaboration among developers.</li>
+                        <li><strong>Community Forums and Mailing Lists:</strong> Open source communities often use
+                            forums,
+                            mailing lists, and other online platforms to facilitate communication and discussion among
+                            members.</li>
+                        <li><strong>Code Reviews:</strong> Open source projects often have a process of code review,
+                            where
+                            developers review each other's code to ensure quality and identify potential issues.</li>
+                    </ul>
+                </section>
+                <section class="content-section">
+                    <h2>References</h2>
+                    <ol>
+                        <li><a href="https://www.sciencedirect.com/topics/computer-science/open-source-community"
+                                target="_blank">ScienceDirect - Open Source Community</a></li>
+                        <li><a href="https://mdubravski.medium.com/common-types-of-open-source-communities-93c9fdd0e84c"
+                                target="_blank">Common Types of Open Source Communities</a></li>
+                        <li><a href="https://opensource.com/business/13/6/four-types-organizational-structures-within-open-source-communities"
+                                target="_blank">Four Types of Organizational Structures Within Open Source
+                                Communities</a></li>
+                        <li><a href="https://www.quora.com/What-are-the-largest-open-source-communities"
+                                target="_blank">What
+                                are the largest open source communities?</a></li>
+                        <li><a href="https://www.blackduck.com/glossary/what-is-open-source-software.html"
+                                target="_blank">What
+                                is Open Source Software?</a></li>
+                        <li><a href="https://www.investopedia.com/terms/o/open-source.asp" target="_blank">Open Source
+                                Definition</a></li>
+                        <li><a href="https://www.openlogic.com/blog/top-5-benefits-open-source-software"
+                                target="_blank">Top 5
+                                Benefits of Open Source Software</a></li>
+                        <li><a href="https://skill-mine.com/5-benefits-of-open-source-software-for-your-organization/"
+                                target="_blank">5 Benefits of Open Source Software for Your Organization</a></li>
+                        <li><a href="https://www.znetlive.com/blog/8-advantages-of-using-open-source-software/"
+                                target="_blank">8 Advantages of Using Open Source Software</a></li>
+                        <li><a href="https://dl.acm.org/doi/10.1007/s10257-010-0149-x" target="_blank">Open Source
+                                Software
+                                Development</a></li>
+                        <li><a href="https://cyberpanel.net/blog/what-is-apache-server-how-it-works"
+                                target="_blank">What is
+                                Apache Server & How it Works</a></li>
+                        <li><a href="https://opensource.com/resources/organizations" target="_blank">Open Source
+                                Organizations</a></li>
+                        <li><a href="https://wiki.osgeo.org/wiki/British_Columbia_Chapter" target="_blank">OSGeo British
+                                Columbia Chapter</a></li>
+                        <li><a href="https://opensource.com/resources/what-open-source" target="_blank">What is Open
+                                Source?</a>
+                        </li>
+                        <li><a href="https://en.wikiversity.org/wiki/Open_community_approach" target="_blank">Open
+                                Community
+                                Approach</a></li>
+                        <li><a href="https://github.blog/open-source/maintainers/four-steps-toward-building-an-open-source-community/"
+                                target="_blank">Four Steps Toward Building an Open Source Community</a></li>
+                    </ol>
+                </section>
+
+                <div class="ai-note">
+                    <p>
+                        <strong>Note:</strong> Generated by Google AI on 3/20/25.
+                    </p>
+                    <p>
+                        Generative AI is experimental.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isVisible = ref(false);
+
+const handleClose = () => {
+    isVisible.value = false;
+};
+
+const show = () => {
+    isVisible.value = true;
+};
+
+defineExpose({
+    show
+});
+</script>
+
+<style scoped>
+.fixed {
+    z-index: 9999 !important;
+}
+
+.fixed {
+    transition: opacity 0.2s ease-in-out;
+}
+
+.relative {
+    z-index: 10000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PodcastReference.vue b/src/components/PodcastReference.vue
index 517f584..da1a989 100644
--- a/src/components/PodcastReference.vue
+++ b/src/components/PodcastReference.vue
@@ -12,13 +12,43 @@
                 <font-awesome-icon icon="external-link-alt" /> &nbsp; {{ podcastEpisode.audioUrl ? 'Episode Page' :
                 'Listen to Episode' }}
             </a>
+
+            <!-- Add Snipd section -->
+            <div v-if="podcastEpisode.snipdUrl" class="snipd-section">
+                <div class="snipd-header">
+                </div>
+                <div class="snipd-content">
+                    <img :src="snipdLogo" alt="Snipd Logo" class="snipd-logo" />
+                    <a :href="podcastEpisode.snipdUrl" target="_blank" rel="noopener noreferrer" class="snipd-link">
+                        <font-awesome-icon icon="external-link-alt" /> &nbsp; {{ podcastEpisode.snipdTitle || 'View Snip' }}
+                    </a>
+                    <p v-if="podcastEpisode.snipdDescription" class="snipd-description">
+                        {{ podcastEpisode.snipdDescription }}
+                    </p>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPodcast, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import snipdLogo from '../assets/snipd-logo.png'
+
+library.add(faPodcast, faExternalLinkAlt)
+
 export default {
     name: 'PodcastReference',
+    components: {
+        FontAwesomeIcon
+    },
+    data() {
+        return {
+            snipdLogo
+        }
+    },
     props: {
         podcastEpisode: {
             type: Object,
@@ -116,9 +146,64 @@ export default {
     font-size: 0.8rem;
 }
 
+.snipd-section {
+
+
+}
+
+.snipd-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.snipd-logo {
+    width: 24px;
+    height: 24px;
+    margin-right: 0.5rem;
+}
+
+.snipd-title {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #2d3748;
+}
+
+.snipd-content {
+    padding-left: .1rem;
+}
+
+.snipd-link {
+    display: inline-flex;
+    align-items: center;
+    color: #7f8386;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.7rem;
+    transition: color 0.2s ease;
+    margin-bottom: 0.5rem;
+}
+
+.snipd-link:hover {
+    color: #2c5282;
+    text-decoration: underline;
+}
+
+.snipd-description {
+    font-size: 0.8rem;
+    color: #4a5568;
+    line-height: 1.5;
+    text-align: left;
+    margin-top: 0.5rem;
+}
+
 @media (max-width: 768px) {
     .podcast-reference {
         max-width: 100%;
     }
+    .snipd-content {
+        padding-left: 1rem;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ProgressDetailsPopup.vue b/src/components/ProgressDetailsPopup.vue
index 4109ee8..8c14a18 100644
--- a/src/components/ProgressDetailsPopup.vue
+++ b/src/components/ProgressDetailsPopup.vue
@@ -117,7 +117,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { useProgressStore } from '../stores/progressStore';
 import { quizSets } from '../data/quizSets';
 import { computed, ref, watch } from 'vue';
@@ -125,220 +125,161 @@ import { db, auth } from '../firebase';
 import { doc, getDoc } from 'firebase/firestore';
 import { useAuthStore } from '../stores/authStore';
 
-export default {
-    name: 'ProgressDetailsPopup',
-    props: {
-        show: Boolean
-    },
-    emits: ['close'],
-    setup(props, { emit }) {
-        const authStore = useAuthStore();
-        const progressStore = useProgressStore();
-        const selectedQuizSet = ref(null);
-        const missedItems = ref([]);
-        const quizSetProgress = ref(new Map());
-
-        // Single watcher for show prop
-        watch(() => props.show, async (newVal) => {
-            if (newVal) {
-                console.log('Popup shown, fetching progress');
-                // Pre-fetch all quiz set progress at once
-                for (const set of quizSets.filter(s => !s.inProgress)) {
-                    try {
-                        let quizId;
-                        switch (set.setName.toLowerCase()) {
-                            case 'expert': quizId = 1; break;
-                            case 'general': quizId = 2; break;
-                            case 'kinder-first': quizId = 3; break;
-                            case 'admin': quizId = 4; break;
-                            case 'why care?': quizId = 5; break;
-                            default: continue;
-                        }
-
-                        const progressRef = doc(db, 'userProgress', `${auth.currentUser.uid}_${quizId}`);
-                        const progressDoc = await getDoc(progressRef);
-
-                        if (progressDoc.exists()) {
-                            const data = progressDoc.data();
-                            const correctAnswers = data.totalCorrect || 0;
-                            const totalQuestions = set.items.length;
-                            const percentage = totalQuestions > 0
-                                ? (correctAnswers / totalQuestions) * 100
-                                : 0;
-
-                            quizSetProgress.value.set(set.setName, {
-                                correct: correctAnswers,
-                                total: totalQuestions,
-                                percentage: Math.round(percentage)
-                            });
-                        } else {
-                            quizSetProgress.value.set(set.setName, {
-                                correct: 0,
-                                total: set.items.length,
-                                percentage: 0
-                            });
-                        }
-                    } catch (error) {
-                        console.error('Error fetching progress for quiz:', set.setName, error);
-                    }
-                }
-            }
-        });
-
-        const getProgress = (quizSet) => {
-            return quizSetProgress.value.get(quizSet.setName) || {
-                correct: 0,
-                total: quizSet.items.length,
-                percentage: 0
-            };
-        };
-
-        const showMissedItems = async (quizSet, index) => {
-            console.log('Showing missed items for quiz:', {
-                quizSet,
-                index,
-                setName: quizSet.setName,
-                items: quizSet.items
-            });
-
-            if (selectedQuizSet.value === index) {
-                // If clicking the same quiz set, collapse it
-                selectedQuizSet.value = null;
-                missedItems.value = [];
-                return;
-            }
-
-            selectedQuizSet.value = index;
-            missedItems.value = [];
-
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    }
+});
+
+const emit = defineEmits(['close']);
+
+const progressStore = useProgressStore();
+const authStore = useAuthStore();
+const quizSetProgress = ref(new Map());
+const selectedQuizSet = ref(null);
+const missedItems = ref([]);
+const currentQuizId = ref(null);
+
+// Add computed properties for published quiz sets
+const publishedQuizSets = computed(() => {
+    return quizSets.filter(set => !set.inProgress);
+});
+
+// Watch for changes to the show prop
+watch(() => props.show, async (newVal) => {
+    if (newVal) {
+        // Fetch progress for each quiz set
+        for (const set of quizSets) {
             try {
-                // Get the quiz ID based on the quiz set name
-                let quizId;
-                switch (quizSet.setName.toLowerCase()) {
-                    case 'expert': quizId = 1; break;
-                    case 'general': quizId = 2; break;
-                    case 'kinder-first': quizId = 3; break;
-                    case 'admin': quizId = 4; break;
-                    case 'why care?': quizId = 5; break;
-                    default:
-                        console.log('Unknown quiz set:', quizSet.setName);
-                        return;
-                }
+                // Get the quiz ID from the array index
+                const quizId = quizSets.findIndex(s => s.setName === set.setName);
+
+                console.log('Fetching progress for quiz:', {
+                    setName: set.setName,
+                    quizId,
+                    userId: authStore.user?.uid
+                });
 
                 // Get the user's progress for this quiz
-                const progressRef = doc(db, 'userProgress', `${auth.currentUser.uid}_${quizId}`);
+                const progressRef = doc(db, 'userProgress', `${authStore.user?.uid}_${quizId}`);
                 const progressDoc = await getDoc(progressRef);
 
-                console.log('Progress doc:', progressDoc.data());
+                console.log('Progress doc for quiz:', {
+                    setName: set.setName,
+                    exists: progressDoc.exists(),
+                    data: progressDoc.data()
+                });
 
                 if (progressDoc.exists()) {
                     const data = progressDoc.data();
-
-                    // Update to handle both userAnswers and incorrectQuestions
-                    if (data.userAnswers) {
-                        missedItems.value = data.userAnswers
-                            .filter(answer => !answer.correct)
-                            .map(answer => ({
-                                id: answer.questionId,
-                                title: answer.questionTitle || 'Untitled Question'
-                            }));
-                    } else if (data.incorrectQuestions) {
-                        missedItems.value = data.incorrectQuestions.map(q => ({
-                            id: q.id,
-                            title: q.title || 'Untitled Question'
-                        }));
-                    }
-
-                    console.log('Found missed items:', missedItems.value);
+                    const correctAnswers = data.totalCorrect || 0;
+                    const totalQuestions = set.items.length;
+                    const percentage = totalQuestions > 0
+                        ? (correctAnswers / totalQuestions) * 100
+                        : 0;
+
+                    console.log('Calculated progress:', {
+                        setName: set.setName,
+                        correctAnswers,
+                        totalQuestions,
+                        percentage: Math.round(percentage)
+                    });
+
+                    quizSetProgress.value.set(set.setName, {
+                        correct: correctAnswers,
+                        total: totalQuestions,
+                        percentage: Math.round(percentage)
+                    });
+                } else {
+                    console.log('No progress found for quiz:', set.setName);
+                    quizSetProgress.value.set(set.setName, {
+                        correct: 0,
+                        total: set.items.length,
+                        percentage: 0
+                    });
                 }
             } catch (error) {
-                console.error('Error fetching missed items:', error);
+                console.error('Error fetching progress for quiz:', set.setName, error);
             }
-        };
-
-        const lastUpdatedText = computed(() => {
-            if (!progressStore.lastUpdated) return 'Never';
-            return new Date(progressStore.lastUpdated).toLocaleString();
-        });
-
-        const quizScore = computed(() => {
-            const score = progressStore.getQuizScore(currentQuizId.value);
-            return `${score.score}/${score.total} questions`;
-        });
-
-        const handleClose = () => {
-            emit('close');
-        };
-
-        return {
-            authStore,
-            progressStore,
-            selectedQuizSet,
-            missedItems,
-            getProgress,
-            showMissedItems,
-            lastUpdatedText,
-            quizScore,
-            handleClose
-        };
-    },
-    computed: {
-        publishedQuizSets() {
-            return quizSets.filter(set => !set.inProgress);
-        },
-        totalQuizSets() {
-            return this.publishedQuizSets.length;
         }
-    },
-    data() {
-        return {
-            completedCount: 0
-        }
-    },
-    async created() {
-        this.completedCount = await this.getTotalCompletedQuizzes();
-    },
-    methods: {
-        async getTotalCompletedQuizzes() {
-            if (!auth.currentUser) return 0;
-
-            try {
-                // Get the user's overall progress document
-                const progressRef = doc(db, 'userProgress', `${auth.currentUser.uid}_overall`);
-                const progressDoc = await getDoc(progressRef);
-
-                console.log('Overall progress data:', progressDoc.data());
+    }
+});
+
+const getProgress = (quizSet) => {
+    return quizSetProgress.value.get(quizSet.setName) || {
+        correct: 0,
+        total: quizSet.items.length,
+        percentage: 0
+    };
+};
 
-                if (progressDoc.exists()) {
-                    const data = progressDoc.data();
-                    // Get the completed quizzes array
-                    const completedQuizzes = data.completedQuizzes || [];
-                    console.log('Completed quizzes:', completedQuizzes);
-                    return completedQuizzes.length;
-                }
+const showMissedItems = async (quizSet, index) => {
+    console.log('Showing missed items for quiz:', {
+        quizSet,
+        index,
+        setName: quizSet.setName,
+        items: quizSet.items
+    });
+
+    if (selectedQuizSet.value === index) {
+        // If clicking the same quiz set, collapse it
+        selectedQuizSet.value = null;
+        missedItems.value = [];
+        return;
+    }
 
-                // If no progress document exists yet
-                console.log('No overall progress document found');
-                return 0;
-            } catch (error) {
-                console.error('Error checking completed quizzes:', error);
-                return 0;
-            }
-        },
-        getQuizId(setName) {
-            switch (setName.toLowerCase()) {
-                case 'expert': return 1;
-                case 'general': return 2;
-                case 'kinder-first': return 3;
-                case 'admin': return 4;
-                case 'why care?': return 5;
-                default:
-                    console.log('Unknown quiz set:', setName);
-                    return null;
+    selectedQuizSet.value = index;
+    missedItems.value = [];
+
+    try {
+        // Get the quiz ID from the array index
+        const quizId = quizSets.findIndex(s => s.setName === quizSet.setName);
+
+        // Get the user's progress for this quiz
+        const progressRef = doc(db, 'userProgress', `${authStore.user?.uid}_${quizId}`);
+        const progressDoc = await getDoc(progressRef);
+
+        console.log('Progress doc:', progressDoc.data());
+
+        if (progressDoc.exists()) {
+            const data = progressDoc.data();
+
+            // Update to handle both userAnswers and incorrectQuestions
+            if (data.userAnswers) {
+                missedItems.value = data.userAnswers
+                    .filter(answer => !answer.correct)
+                    .map(answer => ({
+                        id: answer.questionId,
+                        title: answer.questionTitle || 'Untitled Question'
+                    }));
+            } else if (data.incorrectQuestions) {
+                missedItems.value = data.incorrectQuestions.map(q => ({
+                    id: q.id,
+                    title: q.title || 'Untitled Question'
+                }));
             }
+
+            console.log('Found missed items:', missedItems.value);
         }
+    } catch (error) {
+        console.error('Error fetching missed items:', error);
     }
 };
+
+const lastUpdatedText = computed(() => {
+    if (!progressStore.lastUpdated) return 'Never';
+    return new Date(progressStore.lastUpdated).toLocaleString();
+});
+
+const quizScore = computed(() => {
+    const score = progressStore.getQuizScore(currentQuizId.value);
+    return `${score.score}/${score.total} questions`;
+});
+
+const handleClose = () => {
+    emit('close');
+};
 </script>
 
 <style scoped>
diff --git a/src/components/ProgressSteps.vue b/src/components/ProgressSteps.vue
index c016981..eb6760a 100644
--- a/src/components/ProgressSteps.vue
+++ b/src/components/ProgressSteps.vue
@@ -1,18 +1,36 @@
 <template>
     <div class="progress-steps">
-        <div class="step" :class="{ active: currentStep >= 1, complete: currentStep > 1 }">
-            <div class="step-number">1</div>
-            <div class="step-label">Question</div>
-            <div class="step-line"></div>
+        <div class="step" :class="{
+            'active': currentStep >= 1,
+            'complete': currentStep > 1,
+            'current': currentStep === 1
+        }">
+            <div class="step-content">
+                <div class="step-number">1</div>
+                <div class="step-label">Question</div>
+            </div>
+            <div class="step-line" :class="{ 'active': currentStep > 1 }"></div>
         </div>
-        <div class="step" :class="{ active: currentStep >= 2, complete: currentStep > 2 }">
-            <div class="step-number">2</div>
-            <div class="step-label">Answers</div>
-            <div class="step-line"></div>
+        <div class="step" :class="{
+            'active': currentStep >= 2,
+            'complete': currentStep > 2,
+            'current': currentStep === 2
+        }">
+            <div class="step-content">
+                <div class="step-number">2</div>
+                <div class="step-label">Answers</div>
+            </div>
+            <div class="step-line" :class="{ 'active': currentStep > 2 }"></div>
         </div>
-        <div class="step" :class="{ active: currentStep >= 3, complete: currentStep > 3 }">
-            <div class="step-number">3</div>
-            <div class="step-label">Explanation</div>
+        <div class="step" :class="{
+            'active': currentStep >= 3,
+            'complete': currentStep > 3,
+            'current': currentStep === 3
+        }">
+            <div class="step-content">
+                <div class="step-number">3</div>
+                <div class="step-label">Explanation</div>
+            </div>
         </div>
     </div>
 </template>
@@ -24,7 +42,7 @@ export default {
         currentStep: {
             type: Number,
             default: 1,
-            validator: (value) => value >= 1 && value <= 3
+            validator: (value) => value >= 0 && value <= 3
         }
     }
 }
@@ -38,6 +56,7 @@ export default {
     margin: 2rem auto;
     position: relative;
     max-width: 600px;
+    padding: 0 1rem;
 }
 
 .step {
@@ -47,36 +66,50 @@ export default {
     flex: 1;
 }
 
+.step-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
 .step-number {
-    width: 32px;
-    height: 32px;
+    width: 2.5rem;
+    height: 2.5rem;
     border-radius: 50%;
-    background-color: #e5e7eb;
+    background-color: #1f2937;
+    border: 2px solid #4b5563;
     color: #9ca3af;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     transition: all 0.3s ease;
+    margin-bottom: 0.5rem;
+    position: relative;
 }
 
 .step-label {
-    margin-left: 0.5rem;
+    font-size: 0.875rem;
     color: #9ca3af;
     transition: color 0.3s ease;
+    white-space: nowrap;
 }
 
 .step-line {
-    flex: 1;
+    position: absolute;
+    left: 50%;
+    right: -50%;
     height: 2px;
-    background-color: #e5e7eb;
-    margin: 0 0.5rem;
+    background-color: #4b5563;
     transition: background-color 0.3s ease;
+    top: 1.25rem;
 }
 
 .step.active .step-number {
-    background-color: #3b82f6;
-    color: white;
+    background-color: #1f2937;
+    border-color: #3b82f6;
+    color: #3b82f6;
 }
 
 .step.active .step-label {
@@ -84,15 +117,36 @@ export default {
 }
 
 .step.complete .step-number {
-    background-color: #10b981;
+    background-color: #3b82f6;
+    border-color: #3b82f6;
     color: white;
 }
 
-.step.complete .step-line {
-    background-color: #10b981;
+.step.current .step-number {
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
 }
 
-.step:last-child .step-line {
-    display: none;
+.step-line.active {
+    background-color: #3b82f6;
+}
+
+/* Dark mode enhancements */
+@media (prefers-color-scheme: dark) {
+    .progress-steps {
+        --bg-color: #111827;
+    }
+
+    .step-number {
+        background-color: #111827;
+        border-color: #374151;
+    }
+
+    .step-line {
+        background-color: #374151;
+    }
+
+    .step.active .step-number {
+        background-color: #111827;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Quiz.vue b/src/components/Quiz.vue
index 10a339c..4afbdcd 100644
--- a/src/components/Quiz.vue
+++ b/src/components/Quiz.vue
@@ -98,7 +98,8 @@
     <button class="bg-stone-400 h-10 mt-4 text-amber-400" @click="showOriginalView">Submit thoughts & return to
       Quizzes</button>
     <div class="router-link-container">
-      <router-link to="/new-item" class="button-75">Suggest a New Quiz Entry</router-link>
+      <router-link :to="{ name: 'quizItemEditor', query: { new: 'true' } }" class="button-75">Suggest a New Quiz
+        Entry</router-link>
     </div>
   </div>
   <div v-else>
@@ -106,13 +107,10 @@
   </div>
   <span v-show="false">{{ reviewModeTracker }}</span>
 
-  <div class="text-xs text-gray-500 mt-8">
-    <a href="https://www.flaticon.com/free-icons/collaboration" title="collaboration icons"
-      class="text-gray-500">Collaboration icons created by small.smiles - Flaticon</a>
-  </div>
+
 
   <!-- Add the progress popup component -->
-  <ProgressDetailsPopup ref="progressPopup" />
+  <ProgressDetailsPopup ref="progressPopup" :show="showProgressPopup" @close="showProgressPopup = false" />
 </template>
 <script>
 import QuizItem from './QuizItem.vue';
@@ -121,7 +119,9 @@ import { quizSets } from '../data/quizSets.js'
 import { quizStore } from '../stores/quizStore'; // Import the store
 import { ref, onMounted, watch } from 'vue'
 import { useProgressStore } from '../stores/progressStore';
+import { useScoreStore } from '../stores/scoreStore'; // Import the score store
 import ProgressDetailsPopup from './ProgressDetailsPopup.vue';
+import { auth } from '../firebase';  // Add this import
 
 export default {
   name: 'Quiz',
@@ -143,7 +143,9 @@ export default {
   setup(props) {
     const store = quizStore();
     const progressStore = useProgressStore();
+    const scoreStore = useScoreStore(); // Initialize the score store
     const progressPopup = ref(null);
+    const showProgressPopup = ref(false);
 
     onMounted(() => {
       store.setCurrentQuiz(props.selectedQuiz);
@@ -152,14 +154,16 @@ export default {
     // Add method to show progress
     const showProgress = () => {
       console.log('Showing progress popup for quiz:', props.selectedQuiz);
-      progressPopup.value?.togglePopup(props.selectedQuiz);
+      showProgressPopup.value = true;
     };
 
     return {
       store,
       progressStore,
+      scoreStore,
       progressPopup,
-      showProgress
+      showProgress,
+      showProgressPopup
     }
   },
   data() {
@@ -239,25 +243,67 @@ export default {
       }
 
       for (let i = 0; i < this.quizItems.length; i++) {
-        if (!this.quizItems[i] || !this.quizItems[i].correctAnswer) {
-          console.warn(`Missing quiz item or correct answer at index ${i}`);
+        if (!this.quizItems[i]) {
+          console.warn(`Missing quiz item at index ${i}`);
           continue;
         }
 
         const userAnswer = this.userAnswers[i];
-        // Convert both to numbers for comparison
-        const correctAnswer = Number(this.quizItems[i].correctAnswer);
+        const quizItem = this.quizItems[i];
+
+        // Skip if no answer provided
+        if (userAnswer === undefined) {
+          console.warn(`No user answer for question ${i + 1}`);
+          continue;
+        }
 
         console.log("Question", i + 1, ":");
         console.log("User answer:", userAnswer);
+
+        // Handle multiple select questions
+        if (quizItem.answer_type === 'ms') {
+          const correctAnswers = quizItem.correctAnswers || [];
+          console.log("Multiple Select - Correct answers:", correctAnswers);
+
+          if (Array.isArray(userAnswer) && Array.isArray(correctAnswers)) {
+            const isCorrect = userAnswer.length === correctAnswers.length &&
+              userAnswer.every(answer => correctAnswers.includes(answer));
+
+            if (isCorrect) {
+              correct++;
+              console.log("✓ Multiple Select Correct!");
+            } else {
+              console.log("✗ Multiple Select Incorrect");
+            }
+          } else {
+            console.warn("Invalid answer format for multiple select question");
+          }
+          continue;
+        }
+
+        // Handle short answer questions
+        if (quizItem.answer_type === 'short_answer') {
+          // Get the correctness from the store
+          const storedAnswer = this.store.userAnswers[i];
+          if (storedAnswer && storedAnswer.correct) {
+            correct++;
+            console.log("✓ Short Answer Correct!");
+          } else {
+            console.log("✗ Short Answer Incorrect");
+          }
+          continue;
+        }
+
+        // Handle multiple choice questions
+        const correctAnswer = Number(quizItem.correctAnswer);
         console.log("Correct answer:", correctAnswer);
 
-        // Compare the numeric values
+        // Compare the numeric values for MC questions
         if (!isNaN(correctAnswer) && userAnswer === correctAnswer) {
           correct++;
-          console.log("✓ Correct!");
+          console.log("✓ Multiple Choice Correct!");
         } else {
-          console.log("✗ Incorrect");
+          console.log("✗ Multiple Choice Incorrect");
           console.log("Types - User answer:", typeof userAnswer, "Correct answer:", typeof correctAnswer);
         }
       }
@@ -354,7 +400,7 @@ export default {
         console.log('Current question:', currentQuestion);
 
         if (!this.userAnswers[this.itemNum]) {
-          console.error('No valid answer for multiple choice question:', this.itemNum);
+          console.error('No valid answer for question:', this.itemNum);
           return;
         }
 
@@ -370,8 +416,16 @@ export default {
           // For sortable lists, just use the items array
           selectedAnswer = currentQuestion.items || [];
           console.log('Using sortable items:', selectedAnswer);
+        } else if (currentQuestion.answer_type === 'ms') {
+          // For multiple select questions
+          selectedAnswer = this.userAnswers[this.itemNum];
+          if (!Array.isArray(selectedAnswer)) {
+            console.error('Invalid answer format for multiple select question:', selectedAnswer);
+            return;
+          }
+          console.log('Using multiple select answers:', selectedAnswer);
         } else {
-          // Only for multiple choice
+          // For multiple choice
           selectedAnswer = this.userAnswers[this.itemNum];
           if (selectedAnswer === undefined) {
             console.error('No valid answer for multiple choice question:', this.itemNum);
@@ -381,7 +435,7 @@ export default {
 
         const questionData = {
           selectedAnswer,
-          correctAnswer: currentQuestion.correctAnswer || '',
+          correctAnswer: currentQuestion.answer_type === 'ms' ? currentQuestion.correctAnswers : currentQuestion.correctAnswer,
           questionId: currentQuestion.id || '',
           questionTitle: currentQuestion.title || '',
           quizEntry: currentQuestion
@@ -410,33 +464,41 @@ export default {
         console.log("In checkIt, itemNum: ", this.itemNum, "quizItems.length: ", this.quizItems.length);
         if (this.itemNum === this.quizItems.length - 1) {
           this.complete = true;
-
-
         } else {
           this.complete = false;
-          // this.itemNum++;
-          this.chosen = false
-
+          this.chosen = false;
         }
 
       } catch (error) {
         console.error("Error in checkIt method:", error);
       }
     },
-    async answerSelected(option) {
-      console.log("In answerSelected with answer:", option);
+    async answerSelected(option, isCorrect) {
+      console.log("In answerSelected with answer:", option, "isCorrect:", isCorrect);
       this.selectError = false;
       this.chosen = true;
       this.userAnswers[this.itemNum] = option;
 
       // Check if answer is correct
-      const isCorrect = option === this.currentQuizItem.correctAnswer;
-      if (isCorrect) {
+      let answerIsCorrect = false;
+      if (this.currentQuizItem.answer_type === 'ms') {
+        const correctAnswers = this.currentQuizItem.correctAnswers || [];
+        answerIsCorrect = Array.isArray(option) &&
+          option.length === correctAnswers.length &&
+          option.every(answer => correctAnswers.includes(answer));
+      } else if (this.currentQuizItem.answer_type === 'short_answer') {
+        // For short answer questions, use the isCorrect parameter from the radio buttons
+        answerIsCorrect = isCorrect;
+      } else {
+        answerIsCorrect = option === this.currentQuizItem.correctAnswer;
+      }
+
+      if (answerIsCorrect) {
         // Pass both quizId and questionId
         await this.progressStore.markQuizItemCorrect(
           this.selectedQuiz,
           this.currentQuizItem.id,
-          isCorrect
+          answerIsCorrect
         );
       }
 
@@ -444,7 +506,8 @@ export default {
       this.store.setUserAnswer(
         this.itemNum,
         option,
-        this.currentQuizItem.correctAnswer,
+        this.currentQuizItem.answer_type === 'short_answer' ? isCorrect :
+          this.currentQuizItem.answer_type === 'ms' ? this.currentQuizItem.correctAnswers : this.currentQuizItem.correctAnswer,
         this.currentQuizItem.id,
         this.currentQuizItem.title,
         this.currentQuizItem
@@ -491,6 +554,13 @@ export default {
         const score = this.numCorrect();
         const total = this.quizItems.length;
 
+        console.log('Starting quizDone:', {
+          score,
+          total,
+          quizId: this.selectedQuiz,
+          userId: auth.currentUser?.uid
+        });
+
         // Validate the values before sending
         if (typeof score !== 'number' || typeof total !== 'number') {
           console.error('Invalid score or total:', { score, total });
@@ -505,6 +575,36 @@ export default {
         });
         console.log('Quiz attempt recorded successfully');
 
+
+
+        // Save final progress using the progress store
+        const progressData = {
+          complete: true,
+          userAnswers: this.store.userAnswers,
+          incorrectQuestions: this.store.incorrectQuestions,
+          totalCorrect: score,
+          totalQuestions: total,
+          timestamp: new Date()
+        };
+
+        console.log('Saving progress data:', progressData);
+        await this.progressStore.saveQuizProgress(this.selectedQuiz, progressData);
+        console.log('Progress saved successfully');
+
+        // Check and update top scores
+        if (auth.currentUser) {
+          console.log('Updating top scores for user:', auth.currentUser.uid);
+          await this.scoreStore.checkAndUpdateTopScores(
+            auth.currentUser.uid,
+            this.selectedQuiz,
+            score,
+            auth.currentUser.email || 'Anonymous'
+          );
+          console.log('Top scores updated successfully');
+        } else {
+          console.log('User not logged in, skipping top scores update');
+        }
+
         // Update the quiz state
         this.quizState = 'end';
         this.complete = true;
@@ -529,7 +629,7 @@ export default {
         });
 
         // Show the progress popup
-        this.showProgress();
+        // this.showProgress();
 
       } catch (error) {
         console.error('Error in quizDone:', error);
@@ -556,10 +656,6 @@ export default {
       console.log("Emitting change-view event");
       this.$emit('change-view', { showQuizzes: true }); // Emit an event with the new state
       console.log("Event emitted");
-    },
-    showProgress() {
-      console.log('Showing progress popup for quiz:', this.selectedQuiz);
-      this.progressPopup.value?.togglePopup(this.selectedQuiz);
     }
   },
   created() {
diff --git a/src/components/QuizItem.vue b/src/components/QuizItem.vue
index 3ee3e73..0310791 100644
--- a/src/components/QuizItem.vue
+++ b/src/components/QuizItem.vue
@@ -10,18 +10,24 @@
   <div v-if="currentQuizItem" class="w-full place-content-center mx-auto">
     <!-- Display the question for all question types -->
     <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">{{ quizItem.subtitle }}</h2>
-    <!-- Existing question types -->
+    <!-- Question types -->
     <div v-if="quizItem.answer_type == 'mc'" class="text-gray-900 dark:text-white">
       <MultipleChoice v-model:userAnswer="userAnswer" @answer-selected="handleAnswerSelected" :quizItem="quizItem"
         :reviewMode="reviewMode" :itemNum="itemNum" :basicMode="basicMode" />
     </div>
 
+    <div v-else-if="quizItem.answer_type == 'ms'" class="text-gray-900 dark:text-white">
+      <MultipleSelect v-model:userAnswer="userAnswer" @answer-selected="handleAnswerSelected" :quizItem="quizItem"
+        :reviewMode="reviewMode" :itemNum="itemNum" :basicMode="basicMode" />
+    </div>
+
     <div v-else-if="quizItem.answer_type == 'true_false'">
       <!-- ... true/false content ... -->
     </div>
 
-    <div v-else-if="quizItem.answer_type == 'short_answer'">
-      <!-- ... short answer content ... -->
+    <div v-else-if="quizItem.answer_type == 'short_answer'" class="text-gray-900 dark:text-white">
+      <ShortAnswer v-model:userAnswer="userAnswer" @answer-selected="handleAnswerSelected"
+        @correctness-change="handleShortAnswerCorrectness" :quizItem="quizItem" :reviewMode="reviewMode" />
     </div>
 
     <!-- Sortable list -->
@@ -47,18 +53,22 @@
 
 <script>
 import MultipleChoice from './MultipleChoice.vue';
+import MultipleSelect from './MultipleSelect.vue';
 import LiteYouTubeEmbed from 'vue-lite-youtube-embed';
 import Explanation from './Explanation.vue';
 import SortableList from './SortableList.vue';
+import ShortAnswer from './ShortAnswer.vue';
 import { ref } from 'vue';
 
 export default {
   name: 'QuizItem',
   components: {
     MultipleChoice,
+    MultipleSelect,
     Explanation,
     LiteYouTubeEmbed,
     SortableList,
+    ShortAnswer,
   },
   props: {
     currentQuizItem: {
@@ -151,6 +161,10 @@ export default {
     handleAnswerSelected(selectedOption) {
       console.log("Answer selected in QuizItem:", selectedOption);
       this.$emit('selected', selectedOption);
+    },
+    handleShortAnswerCorrectness(isCorrect) {
+      console.log("Short answer correctness:", isCorrect);
+      this.$emit('selected', this.userAnswer, isCorrect);
     }
   },
   setup(props, { emit }) {
diff --git a/src/components/QuizItemEditorLite.vue b/src/components/QuizItemEditorLite.vue
new file mode 100644
index 0000000..0222618
--- /dev/null
+++ b/src/components/QuizItemEditorLite.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="editor-container p-4">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <div class="mb-6 flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ isNewProposal ? 'Propose Changes' : 'Edit Quiz Item' }}
+                </h2>
+                <div class="text-sm text-gray-500 dark:text-gray-400" v-if="originalId">
+                    Based on Quiz Item #{{ originalId }}
+                </div>
+            </div>
+
+            <!-- Preview Toggle -->
+            <div class="mb-4">
+                <button type="button" @click="previewMode = !previewMode"
+                    class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+                    {{ previewMode ? 'Edit Mode' : 'Preview Mode' }}
+                </button>
+            </div>
+
+            <!-- Preview Section -->
+            <div v-if="previewMode" class="mb-6">
+                <QuizItem :currentQuizItem="editedItem" :itemNum="0" :reviewMode="true" :basicMode="false"
+                    :debug="false" :userAnswer="editedItem.correctAnswer" />
+            </div>
+
+            <!-- Edit Form -->
+            <form v-else @submit.prevent="saveQuizItem"
+                class="space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+                <!-- Title -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Title
+                    </label>
+                    <input v-model="editedItem.title" type="text"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                        required />
+                </div>
+
+                <!-- Question -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Question
+                    </label>
+                    <textarea v-model="editedItem.Question" rows="3"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                        required></textarea>
+                </div>
+
+                <!-- Options -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Answer Options
+                    </label>
+                    <div v-for="n in 6" :key="n" class="mb-2">
+                        <div class="flex items-center gap-2">
+                            <input :id="'option' + n" v-model="editedItem['option' + n]" type="text"
+                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                                :placeholder="'Option ' + n" />
+                            <input type="radio" :value="n" v-model="editedItem.correctAnswer" :name="'correct-answer'"
+                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 dark:bg-gray-700" />
+                            <label :for="'option' + n" class="text-sm text-gray-600 dark:text-gray-400">
+                                Correct
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Explanation -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Explanation
+                    </label>
+                    <textarea v-model="editedItem.explanation" rows="4"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="flex justify-end gap-4">
+                    <button type="button" @click="$router.back()"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        {{ isNewProposal ? 'Submit Proposal' : 'Save Changes' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+import { useAuth } from '../composables/useAuth';
+import QuizItem from './QuizItem.vue';
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuth();
+const previewMode = ref(false);
+
+const editedItem = ref({
+    title: '',
+    Question: '',
+    option1: '',
+    option2: '',
+    option3: '',
+    option4: '',
+    option5: '',
+    option6: '',
+    correctAnswer: null,
+    explanation: '',
+    answer_type: 'mc'
+});
+
+const originalId = ref(null);
+const isNewProposal = ref(false);
+
+onMounted(async () => {
+    const itemId = route.params.id;
+    if (itemId) {
+        const docRef = doc(db, 'proposedQuizItems', itemId);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+            editedItem.value = { ...docSnap.data() };
+            originalId.value = editedItem.value.originalId;
+            isNewProposal.value = true;
+        }
+    }
+});
+
+const saveQuizItem = async () => {
+    try {
+        const itemId = route.params.id;
+        const docRef = doc(db, 'proposedQuizItems', itemId);
+
+        await setDoc(docRef, {
+            ...editedItem.value,
+            lastModified: new Date().toISOString(),
+            modifiedBy: auth.user.value?.uid || 'anonymous'
+        });
+
+        router.push('/quizSetView');
+    } catch (error) {
+        console.error('Error saving quiz item:', error);
+        alert('Failed to save changes. Please try again.');
+    }
+};
+</script>
+
+<style scoped>
+.editor-container {
+    min-height: 100vh;
+    background-color: #f3f4f6;
+}
+
+@media (prefers-color-scheme: dark) {
+    .editor-container {
+        background-color: #111827;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/QuizSelector.vue b/src/components/QuizSelector.vue
new file mode 100644
index 0000000..582bf00
--- /dev/null
+++ b/src/components/QuizSelector.vue
@@ -0,0 +1,128 @@
+<template>
+    <!-- Display mode for editing existing item -->
+    <div v-if="existingItem?.title || existingItem?.originalId" class="w-full px-4 py-2 rounded-lg border border-gray-300/50 
+                bg-white/50 dark:bg-gray-500/50 
+                dark:border-gray-600/50 color:#ffffff
+                backdrop-blur-sm
+                transition-colors duration-200 ease-in-out">
+        <div class="text-lg text-white text-left">{{ existingItem.title || 'Untitled Quiz Item' }}</div>
+        <div v-if="existingItem.subtitle" class="text-sm text-stone-300">{{ existingItem.subtitle }}</div>
+        <!--div class="text-xs text-stone-400 mt-1">Quiz Item #{{ existingItem.id || existingItem.originalId }}</div-->
+    </div>
+
+    <!-- Selection mode for new items -->
+    <template v-else>
+        <div class="flex flex-col gap-2">
+            <label for="template-select" class="text-stone-400">Choose a starting point:</label>
+            <CustomDropdown v-model="selectedTemplate" @change="useTemplate" :userDrafts="userDraftQuizItems"
+                :pendingItems="pendingQuizItems" :otherDrafts="otherDraftQuizItems" :acceptedItems="acceptedQuizItems"
+                :permanentItems="permanentQuizItems" :isLoading="isLoadingDrafts" :error="draftLoadError" />
+        </div>
+    </template>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { quizStore } from '../stores/quizStore';
+import { useAuthStore } from '../stores/authStore';
+import { quizEntries } from '../data/quiz-items';
+import CustomDropdown from './CustomDropdown.vue';
+
+const store = quizStore();
+const auth = useAuthStore();
+
+// Add prop for existing item
+const props = defineProps({
+    existingItem: {
+        type: Object,
+        default: null
+    }
+});
+
+const selectedTemplate = ref('');
+
+onMounted(async () => {
+    // Fetch draft items when component mounts
+    console.log('QuizSelector mounted, fetching draft items...');
+    await store.fetchDraftQuizItems();
+});
+
+const userDraftQuizItems = computed(() => {
+    const items = store.draftQuizItems
+        .filter(item => item.userId === auth.user?.uid)
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+
+    console.log('User draft items:', items);
+    return items;
+});
+
+const otherDraftQuizItems = computed(() => {
+    const items = store.draftQuizItems
+        .filter(item => item.userId !== auth.user?.uid && item.status === 'draft')
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+
+    console.log('Other draft items:', items);
+    return items;
+});
+
+const pendingQuizItems = computed(() => {
+    const items = store.draftQuizItems
+        .filter(item => item.status === 'pending')
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+
+    console.log('Pending items:', items);
+    return items;
+});
+
+const acceptedQuizItems = computed(() => {
+    return store.draftQuizItems
+        .filter(item => item.status === 'accepted')
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+});
+
+const permanentQuizItems = computed(() => {
+    return [...quizEntries].sort((a, b) => {
+        const aId = typeof a.id === 'string' ? parseInt(a.id, 10) : a.id;
+        const bId = typeof b.id === 'string' ? parseInt(b.id, 10) : b.id;
+        return aId - bId;
+    });
+});
+
+const isLoadingDrafts = computed(() => store.draftQuizItemsLoading);
+const draftLoadError = computed(() => store.draftQuizItemsError);
+
+const useTemplate = () => {
+    console.log('Using template:', selectedTemplate.value);
+
+    if (!selectedTemplate.value) {
+        console.log('No template selected, resetting draft entry');
+        store.resetDraftQuizEntry();
+        return;
+    }
+
+    // First check if it's a permanent quiz item
+    const permanentItem = quizEntries[selectedTemplate.value];
+    if (permanentItem) {
+        console.log('Using permanent item as template:', permanentItem);
+        const copyItem = { ...permanentItem };
+        copyItem.originalId = copyItem.id;
+        copyItem.id = null;
+        copyItem.modelValue = selectedTemplate.value;
+        store.updateDraftQuizEntry(copyItem);
+        return;
+    }
+
+    // If not permanent, check drafts
+    const draftItem = [...userDraftQuizItems.value, ...otherDraftQuizItems.value, ...pendingQuizItems.value]
+        .find(item => item.id === selectedTemplate.value);
+
+    if (draftItem) {
+        console.log('Using draft item as template:', draftItem);
+        const copyItem = { ...draftItem };
+        copyItem.originalId = copyItem.id;
+        copyItem.id = null;
+        copyItem.modelValue = selectedTemplate.value;
+        store.updateDraftQuizEntry(copyItem);
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/QuizSetTree.vue b/src/components/QuizSetTree.vue
new file mode 100644
index 0000000..d0436a3
--- /dev/null
+++ b/src/components/QuizSetTree.vue
@@ -0,0 +1,585 @@
+<template>
+    <div class="quiz-tree-container">
+        <canvas ref="canvas" class="quiz-tree-canvas" @click="handleCanvasClick"></canvas>
+    </div>
+</template>
+
+<script>
+export default {
+    // No changes to component options
+};
+</script>
+
+<style scoped>
+.quiz-tree-container {
+    width: 100%;
+    min-height: 200px;
+    height: auto;
+
+    /* Adjust height for mobile */
+    @media (max-width: 768px) {
+        min-height: 300px;
+    }
+
+    background: rgb(31, 41, 55);
+    border-radius: 8px;
+    padding: 10px;
+    overflow: visible;
+    /* Changed from hidden to allow content to determine height */
+}
+
+.quiz-tree-canvas {
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+}
+
+.preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: rgb(31, 41, 55);
+    padding: 2rem;
+    border-radius: 8px;
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+    color: white;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.close-button {
+    font-size: 1.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+.quiz-item-container {
+    position: relative;
+    padding-bottom: 3rem;
+    border-bottom: 1px solid rgba(156, 163, 175, 0.2);
+}
+
+.edit-button-container {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+}
+
+.edit-button {
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .quiz-tree-container {
+        background: #1F2937;
+    }
+
+    .modal-content {
+        background: #1F2937;
+        color: white;
+    }
+
+    .quiz-item-container {
+        border-bottom-color: rgba(156, 163, 175, 0.1);
+    }
+}
+</style>
+
+<script setup>
+import { ref, onMounted, watch, computed } from 'vue';
+import QuizItem from './QuizItem.vue';
+import InProgress from './InProgress.vue';
+import { quizEntries } from '../data/quiz-items';
+import { useRouter } from 'vue-router';
+import { db } from '../firebase';
+import { collection, addDoc } from 'firebase/firestore';
+import { useAuth } from '../composables/useAuth';
+
+const router = useRouter();
+const auth = useAuth();
+
+const props = defineProps({
+    publishedQuizSets: {
+        type: Array,
+        required: true
+    },
+    proposedQuizSets: {
+        type: Array,
+        required: true
+    }
+});
+
+const emit = defineEmits(['select-quiz-set']);
+
+const canvas = ref(null);
+let ctx = null;
+let nodePositions = []; // Store clickable areas
+
+// Node styling
+const styles = {
+    rootNode: {
+        color: '#4B5563',
+        height: 40,
+        padding: 12,
+        borderRadius: 12,
+        font: 'bold 20px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    publishedNode: {
+        color: '#3B82F6',
+        height: window.innerWidth <= 768 ? 50 : 60,
+        padding: window.innerWidth <= 768 ? 10 : 12,
+        borderRadius: 12,
+        font: window.innerWidth <= 768 ? '16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+            : '18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        borderStyle: 'solid',
+        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        iconSize: window.innerWidth <= 768 ? 20 : 24
+    },
+    proposedNode: {
+        color: '#F59E0B',
+        height: window.innerWidth <= 768 ? 50 : 60,
+        padding: window.innerWidth <= 768 ? 10 : 12,
+        borderRadius: 12,
+        font: window.innerWidth <= 768 ? '16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+            : '18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        borderStyle: 'dashed',
+        backgroundColor: 'rgba(245, 158, 11, 0.1)',
+        iconSize: window.innerWidth <= 768 ? 20 : 24
+    },
+    line: {
+        color: '#E5E7EB',
+        width: 2
+    }
+};
+
+// Update resize handler with new dimensions
+window.addEventListener('resize', () => {
+    styles.publishedNode.height = window.innerWidth <= 768 ? 50 : 60;
+    styles.publishedNode.padding = window.innerWidth <= 768 ? 10 : 12;
+    styles.publishedNode.font = window.innerWidth <= 768
+        ? '16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        : '18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    styles.publishedNode.iconSize = window.innerWidth <= 768 ? 20 : 24;
+
+    styles.proposedNode.height = window.innerWidth <= 768 ? 50 : 60;
+    styles.proposedNode.padding = window.innerWidth <= 768 ? 10 : 12;
+    styles.proposedNode.font = window.innerWidth <= 768
+        ? '16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        : '18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    styles.proposedNode.iconSize = window.innerWidth <= 768 ? 20 : 24;
+
+    if (canvas.value) {
+        drawTree();
+    }
+});
+
+// Helper function to draw a rounded rectangle
+const drawRoundedRect = (x, y, width, height, radius, style) => {
+    if (!ctx) return;
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+};
+
+// Get quiz item by ID
+const getQuizItem = (id) => {
+    return quizEntries.find(item => item.id === id);
+};
+
+// Handle canvas clicks
+const handleCanvasClick = (event) => {
+    const rect = canvas.value.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // Check if click is within any node
+    for (const node of nodePositions) {
+        if (x >= node.x && x <= node.x + node.width &&
+            y >= node.y && y <= node.y + node.height) {
+            emit('select-quiz-set', node.set);
+            break;
+        }
+    }
+};
+
+// Add new function to draw quiz set icon
+const drawQuizIcon = (x, y, size, color) => {
+    if (!ctx) return;
+
+    // Save current context state
+    ctx.save();
+
+    // Set icon styles
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.fillStyle = color;
+
+    // Draw a simplified quiz/document icon
+    const iconX = x - size / 2;
+    const iconY = y - size / 2;
+
+    // Draw main rectangle (document body)
+    ctx.beginPath();
+    ctx.rect(iconX, iconY, size * 0.8, size);
+    ctx.stroke();
+
+    // Draw lines representing text
+    const lineSpacing = size * 0.2;
+    const lineWidth = size * 0.5;
+    for (let i = 0; i < 3; i++) {
+        ctx.beginPath();
+        ctx.moveTo(iconX + size * 0.15, iconY + size * 0.25 + (i * lineSpacing));
+        ctx.lineTo(iconX + size * 0.15 + lineWidth, iconY + size * 0.25 + (i * lineSpacing));
+        ctx.stroke();
+    }
+
+    // Restore context state
+    ctx.restore();
+};
+
+// Update drawNode function to move content closer to top
+const drawNode = (x, y, text, style, set = null) => {
+    if (!ctx) return;
+
+    // Calculate text dimensions
+    ctx.font = style.font;
+    const textMetrics = ctx.measureText(text);
+    const textWidth = textMetrics.width;
+    const nodeWidth = textWidth + (style.padding * 2.5) + style.iconSize; // Further reduced padding
+    const nodeHeight = style.height;
+
+    // Calculate node position (centered on x)
+    const nodeX = x - (nodeWidth / 2);
+    const nodeY = y - (nodeHeight / 2);
+
+    // Store clickable area if this is a quiz set node
+    if (set) {
+        nodePositions.push({
+            x: nodeX,
+            y: nodeY,
+            width: nodeWidth,
+            height: nodeHeight,
+            set
+        });
+    }
+
+    // Draw background with shadow
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
+    ctx.shadowBlur = 5;
+    ctx.shadowOffsetY = 2;
+    ctx.fillStyle = style.backgroundColor || 'rgba(255, 255, 255, 0.1)';
+    drawRoundedRect(nodeX, nodeY, nodeWidth, nodeHeight, style.borderRadius, style);
+    ctx.fill();
+
+    // Reset shadow
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
+
+    // Draw border
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = style.color;
+    ctx.lineWidth = 2;
+    if (style.borderStyle === 'dashed') {
+        ctx.setLineDash([5, 3]);
+    } else {
+        ctx.setLineDash([]);
+    }
+    drawRoundedRect(nodeX, nodeY, nodeWidth, nodeHeight, style.borderRadius, style);
+    ctx.stroke();
+    ctx.setLineDash([]); // Reset dash pattern
+
+    // Calculate vertical offset for top alignment (about 30% from top)
+    const verticalOffset = nodeHeight * 0.3;
+
+    // Draw icon (moved closer to top)
+    const iconSize = style.iconSize;
+    drawQuizIcon(nodeX + style.padding + iconSize / 2, nodeY + verticalOffset, iconSize, style.color);
+
+    // Draw text (closer to top, aligned with icon)
+    ctx.fillStyle = style.color;
+    ctx.font = style.font;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, nodeX + style.padding * 1.2 + iconSize, nodeY + verticalOffset);
+
+    // Draw item count if available (adjusted position)
+    if (set && set.items) {
+        const itemCount = `${set.items.length} items`;
+        const itemCountFont = window.innerWidth <= 768
+            ? '14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+            : '16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+        ctx.font = itemCountFont;
+        ctx.fillStyle = style.color;
+        ctx.globalAlpha = 0.7;
+        ctx.fillText(itemCount, nodeX + style.padding * 1.2 + iconSize, nodeY + nodeHeight * 0.7);
+        ctx.globalAlpha = 1;
+    }
+};
+
+// Draw a line between two points
+const drawLine = (x1, y1, x2, y2, isDashed = false) => {
+    if (!ctx) return;
+
+    ctx.beginPath();
+    ctx.strokeStyle = styles.line.color;
+    ctx.lineWidth = styles.line.width;
+    if (isDashed) {
+        ctx.setLineDash([5, 3]);
+    } else {
+        ctx.setLineDash([]);
+    }
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+    ctx.setLineDash([]); // Reset dash pattern
+};
+
+// Modified drawTree function
+const drawTree = () => {
+    if (!canvas.value || !ctx) return;
+
+    // Clear node positions and canvas
+    nodePositions = [];
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+
+    // Calculate dimensions
+    const width = canvas.value.width;
+    const isMobile = window.innerWidth <= 768;
+    const columnWidth = width / 3; // Keep three columns
+    const minNodeSpacing = isMobile ? 12 : 12;
+    const startY = isMobile ? 35 : 40;
+
+    // Group and filter sets
+    const levelGroups = new Map();
+    [...props.publishedQuizSets, ...props.proposedQuizSets]
+        .filter(set => set.display !== "debug")
+        .forEach(set => {
+            const level = set.displayLevel || 0;
+            if (!levelGroups.has(level)) {
+                levelGroups.set(level, []);
+            }
+            levelGroups.get(level).push(set);
+        });
+
+    const sortedLevels = Array.from(levelGroups.keys()).sort((a, b) => a - b);
+
+    // Calculate total height needed
+    let maxHeight = startY * 1.5;
+    const levelHeights = new Map();
+
+    // First pass: calculate height needed for each level
+    sortedLevels.forEach(level => {
+        const setsInLevel = levelGroups.get(level);
+        const columnHeights = [0, 0, 0];
+
+        // Calculate height needed for each column in this level
+        setsInLevel.forEach(set => {
+            const column = (set.displayColumn || 1) - 1;
+            columnHeights[column] += styles.publishedNode.height + minNodeSpacing;
+        });
+
+        // Use the tallest column height for this level
+        const levelHeight = Math.max(...columnHeights);
+        levelHeights.set(level, levelHeight);
+        maxHeight += levelHeight;
+    });
+
+    // Add padding to maxHeight
+    maxHeight += minNodeSpacing;
+
+    // Update canvas height if needed
+    if (canvas.value.height < maxHeight) {
+        canvas.value.height = maxHeight;
+        canvas.value.parentElement.style.height = `${maxHeight}px`;
+    }
+
+    // Draw sets level by level
+    let currentY = startY;
+    const nodesByName = new Map();
+
+    sortedLevels.forEach(level => {
+        const setsInLevel = levelGroups.get(level);
+        const levelHeight = levelHeights.get(level);
+
+        // Group sets by column
+        const itemsInColumns = {
+            1: setsInLevel.filter(set => (set.displayColumn || 1) === 1),
+            2: setsInLevel.filter(set => set.displayColumn === 2),
+            3: setsInLevel.filter(set => set.displayColumn === 3)
+        };
+
+        // Draw items in each column
+        Object.entries(itemsInColumns).forEach(([column, sets]) => {
+            if (sets.length === 0) return;
+
+            const columnX = columnWidth * (parseInt(column) - 0.5);
+            let nodeY = currentY;
+
+            sets.forEach(set => {
+                // Calculate node dimensions
+                ctx.font = isMobile ? '14px system-ui' : styles.publishedNode.font;
+                const textMetrics = ctx.measureText(set.setName);
+                const textWidth = textMetrics.width;
+                const iconPadding = styles.publishedNode.padding + styles.publishedNode.iconSize;
+                const nodeWidth = Math.min(
+                    textWidth + (iconPadding * 2),
+                    columnWidth - (isMobile ? 10 : 20)
+                );
+
+                // Draw node
+                const isProposed = props.proposedQuizSets.includes(set);
+                drawNode(columnX, nodeY, set.setName, isProposed ? styles.proposedNode : styles.publishedNode, set);
+
+                // Store node position for connections
+                nodesByName.set(set.setName, {
+                    x: columnX,
+                    y: nodeY,
+                    isProposed: isProposed,
+                    set: set
+                });
+
+                // Update Y position for next node
+                nodeY += styles.publishedNode.height + minNodeSpacing;
+            });
+        });
+
+        // Move to next level
+        currentY += levelHeight;
+    });
+
+    // Draw connections
+    nodesByName.forEach((node, setName) => {
+        const set = node.set;
+        if (set.children && Array.isArray(set.children)) {
+            set.children.forEach(childName => {
+                const childNode = nodesByName.get(childName);
+                if (childNode) {
+                    drawLine(
+                        node.x,
+                        node.y + (styles.publishedNode.height / 2),
+                        childNode.x,
+                        childNode.y - (styles.publishedNode.height / 2),
+                        childNode.isProposed
+                    );
+                }
+            });
+        }
+    });
+};
+
+// Update resizeCanvas function to ensure minimum height
+const resizeCanvas = () => {
+    if (!canvas.value) return;
+
+    const container = canvas.value.parentElement;
+    canvas.value.width = container.clientWidth;
+
+    // Set initial height to accommodate top nodes
+    canvas.value.height = Math.max(300, container.clientHeight); // Increased minimum height
+
+    // Update context and redraw
+    ctx = canvas.value.getContext('2d');
+    drawTree();
+};
+
+// Initialize canvas
+onMounted(() => {
+    window.addEventListener('resize', resizeCanvas);
+    if (canvas.value) {
+        canvas.value.parentElement.style.minHeight = '300px'; // Ensure minimum container height
+    }
+    resizeCanvas();
+});
+
+// Watch for changes in quiz sets
+watch([() => props.publishedQuizSets, () => props.proposedQuizSets], () => {
+    drawTree();
+}, { deep: true });
+
+// Function to check if an item is a draft owned by the current user
+const isUserOwnedDraft = (itemId) => {
+    const item = getQuizItem(itemId);
+    return item?.isDraft && item?.createdBy === auth.user?.uid;
+};
+
+// Function to get the appropriate button label
+const getEditButtonLabel = (itemId) => {
+    if (isUserOwnedDraft(itemId)) {
+        return 'Edit';
+    }
+    return 'Propose Changes';
+};
+
+// Handle edit button click
+const handleEditClick = async (itemId) => {
+    const item = getQuizItem(itemId);
+
+    if (isUserOwnedDraft(itemId)) {
+        // Navigate directly to edit the draft
+        router.push({
+            name: 'quizItemEditor',
+            params: { id: itemId }
+        });
+    } else {
+        try {
+            // Create a copy of the item for proposing changes
+            const itemCopy = {
+                ...item,
+                originalId: itemId,
+                isDraft: true,
+                createdBy: auth.user?.uid || 'anonymous',
+                createdAt: new Date().toISOString(),
+                status: 'proposed'
+            };
+
+            // Save to Firebase
+            const docRef = await addDoc(collection(db, 'proposedQuizItems'), itemCopy);
+
+            // Navigate to edit the new copy
+            router.push({
+                name: 'quizItemEditor',
+                params: { id: docRef.id }
+            });
+        } catch (error) {
+            console.error('Error creating proposal:', error);
+            alert('Failed to create proposal. Please try again.');
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Resource.vue b/src/components/Resource.vue
index 4ddebfe..15c76ac 100644
--- a/src/components/Resource.vue
+++ b/src/components/Resource.vue
@@ -12,6 +12,9 @@
                         {{ truncatedUrl }}
                     </a>
                 </p>
+                <p class="resource-text">
+                    {{ resource.description }}
+                </p>
             </div>
         </div>
         <div v-if="resource.imageUrl" class="resource-image-wrapper">
diff --git a/src/components/ResponsiveVideo.vue b/src/components/ResponsiveVideo.vue
index e79cd16..31f58ec 100644
--- a/src/components/ResponsiveVideo.vue
+++ b/src/components/ResponsiveVideo.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="video-container">
     <iframe :src="youtubeEmbedUrl" frameborder="0" allowfullscreen
+      sandbox="allow-scripts allow-same-origin allow-presentation" referrerpolicy="no-referrer" loading="lazy"
+      title="YouTube video player"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
   </div>
 </template>
@@ -16,7 +18,12 @@ export default {
   },
   computed: {
     youtubeEmbedUrl() {
-      return `https://www.youtube.com/embed/${this.videoId}`
+      try {
+        return `https://www.youtube.com/embed/${this.videoId}`;
+      } catch (error) {
+        console.error('Error creating YouTube embed URL:', error);
+        return '';
+      }
     }
   }
 }
diff --git a/src/components/ShortAnswer.vue b/src/components/ShortAnswer.vue
new file mode 100644
index 0000000..5a47e3f
--- /dev/null
+++ b/src/components/ShortAnswer.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="short-answer-container">
+        <div class="question-text mb-4">{{ quizItem.Question }}</div>
+        <div v-if="quizItem.questionP2" class="question-text mb-4">{{ quizItem.questionP2 }}</div>
+
+        <div class="answer-input-container">
+            <input v-if="!reviewMode" type="text" v-model="localAnswer" @input="handleInput"
+                class="answer w-full px-4 py-2 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+                :placeholder="'Enter your answer...'" />
+            <div v-else class="answer-display">
+                <div class="answer mb-4">
+                    <div class="font-medium mb-2">Your answer:</div>
+                    <div class="p-2 rounded-md">{{ userAnswer || 'No answer provided' }}</div>
+                    <div class="mt-4 flex items-center justify-center space-x-6">
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="correctness" :value="true" v-model="isAnswerCorrect"
+                                class="form-radio h-4 w-4 text-blue-600" @change="handleCorrectnessChange">
+                            <span class="ml-2">Yes</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="correctness" :value="false" v-model="isAnswerCorrect"
+                                class="form-radio h-4 w-4 text-blue-600" @change="handleCorrectnessChange">
+                            <span class="ml-2">No</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, watch } from 'vue';
+
+export default {
+    name: 'ShortAnswer',
+    props: {
+        quizItem: {
+            type: Object,
+            required: true
+        },
+        reviewMode: {
+            type: Boolean,
+            required: true
+        },
+        userAnswer: {
+            type: String,
+            default: null
+        }
+    },
+    emits: ['update:userAnswer', 'answer-selected', 'correctness-change'],
+    setup(props, { emit }) {
+        const localAnswer = ref(props.userAnswer || '');
+        const isAnswerCorrect = ref(null);
+
+        watch(() => props.userAnswer, (newVal) => {
+            localAnswer.value = newVal || '';
+        });
+
+        const handleInput = () => {
+            emit('update:userAnswer', localAnswer.value);
+            emit('answer-selected', localAnswer.value);
+        };
+
+        const handleCorrectnessChange = () => {
+            emit('correctness-change', isAnswerCorrect.value);
+        };
+
+        return {
+            localAnswer,
+            handleInput,
+            isAnswerCorrect,
+            handleCorrectnessChange
+        };
+    }
+};
+</script>
+
+<style scoped>
+.short-answer-container {
+    @apply w-full;
+}
+
+.question-text {
+    @apply text-gray-900 dark:text-white text-lg;
+}
+
+.answer-input-container {
+    @apply mt-4;
+}
+
+.answer {
+    @apply border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
+}
+
+.answer-display {
+    @apply space-y-4;
+}
+
+.answer-display .answer {
+    @apply border-gray-300 dark:border-gray-600;
+}
+
+/* Radio button styles */
+.form-radio {
+    @apply border-gray-300 dark:border-gray-600;
+}
+
+.form-radio:checked {
+    @apply bg-blue-600 border-transparent;
+}
+
+/* Dark mode styles for radio text */
+@media (prefers-color-scheme: dark) {
+    .inline-flex span {
+        @apply text-white;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TopScores.vue b/src/components/TopScores.vue
new file mode 100644
index 0000000..70f0909
--- /dev/null
+++ b/src/components/TopScores.vue
@@ -0,0 +1,115 @@
+<template>
+    <div v-if="shouldShowTopScores" class="top-scores bg-gray-800/50 dark:bg-gray-900/50 rounded-lg p-2 text-sm">
+        <div class="flex items-center gap-2 mb-0.5">
+            <svg class="h-4 w-4 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+            </svg>
+            <span class="text-gray-300 dark:text-gray-400 text-xs">Top Scores</span>
+        </div>
+        <div v-if="scoreStore.isLoading" class="text-gray-400 text-xs">Loading...</div>
+        <div v-else-if="scoreStore.error" class="text-red-400 text-xs">{{ scoreStore.error }}</div>
+        <div v-else class="space-y-0">
+            <!-- Top 5 scores -->
+            <div v-for="(score, index) in scoreStore.topScores" :key="index"
+                class="flex items-center justify-between text-gray-300 dark:text-gray-400" style="gap: 0.5rem;">
+                <div class="flex items-center gap-1">
+                    <span class="w-3">{{ index + 1 }}</span>
+                    <span class="text-xs truncate max-w-[120px]">{{ displayName(score) }}</span>
+                </div>
+                <span class="text-xs">{{ score.totalScore }}/{{ scoreStore.totalAvailableQuestions }}</span>
+            </div>
+
+            <!-- Next user with email (not in top 5) -->
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, watch, computed } from 'vue';
+import { useAuthStore } from '../stores/authStore';
+import { useScoreStore } from '../stores/scoreStore';
+import { useRoute } from 'vue-router';
+
+const authStore = useAuthStore();
+const scoreStore = useScoreStore();
+const route = useRoute();
+
+// Compute whether to show top scores based on current route
+const shouldShowTopScores = computed(() => {
+    const hiddenRoutes = ['/edit-item', '/quizsetview', '/issues'];
+    const currentPath = route.path.toLowerCase();
+    return !hiddenRoutes.some(path => currentPath.startsWith(path));
+});
+
+// Helper function to check if a score has a valid email
+const hasValidEmail = (score) => {
+    try {
+        if (!score) return false;
+        return score.email &&
+            score.email !== 'Anonymous' &&
+            !score.email?.includes('undefined') &&
+            score.email.includes('@');
+    } catch (error) {
+        console.error('Error in hasValidEmail:', error, { score });
+        return false;
+    }
+};
+
+// Helper function to display the name or email
+const displayName = (score) => {
+    try {
+        if (!score) return 'Anon_user';
+        console.log('Score data for display name:', {
+            score,
+            hasUsername: !!score.username,
+            username: score.username,
+            email: score.email,
+            userId: score.userId
+        });
+        if (score.username) {
+            return score.username;
+        }
+        if (score.email && score.email !== 'Anonymous' && !score.email.includes('undefined') && score.email.includes('@')) {
+            return score.email.split('@')[0];
+        }
+        // Always generate Anon_ format for anonymous users, ignore stored displayName
+        return `Anon_${score.userId?.substring(0, 6) || 'user'}`;
+    } catch (error) {
+        console.error('Error in displayName:', error, { score });
+        return 'Anon_user';
+    }
+};
+
+// Fetch scores on mount
+onMounted(() => {
+    try {
+        scoreStore.fetchTopScores().catch(error => {
+            console.error('Error fetching top scores:', error);
+            // Handle specific cross-origin errors
+            if (error.name === 'SecurityError') {
+                console.warn('Cross-origin security error detected. This may be due to iframe interactions.');
+            }
+        });
+    } catch (error) {
+        console.error('Error in TopScores component:', error);
+    }
+});
+
+// Re-fetch when auth state changes
+watch(() => authStore.user, () => {
+    try {
+        scoreStore.fetchTopScores().catch(error => {
+            console.error('Error fetching top scores on auth change:', error);
+        });
+    } catch (error) {
+        console.error('Error in TopScores auth watch:', error);
+    }
+}, { deep: true });
+</script>
+
+<style scoped>
+.top-scores {
+    backdrop-filter: blur(8px);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/UserProfileModal.vue b/src/components/UserProfileModal.vue
new file mode 100644
index 0000000..bc79837
--- /dev/null
+++ b/src/components/UserProfileModal.vue
@@ -0,0 +1,139 @@
+<template>
+    <div v-if="show" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full shadow-xl">
+            <!-- Header -->
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold text-gray-900 dark:text-white">User Profile</h2>
+                <button @click="$emit('close')" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- User Information -->
+            <div class="space-y-4">
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm text-gray-500 dark:text-gray-400">Username</label>
+                    <div class="flex items-center gap-2">
+                        <template v-if="isEditing">
+                            <input v-model="editedUsername" type="text"
+                                class="flex-1 px-3 py-2 border rounded-md text-gray-900 dark:text-white bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
+                                placeholder="Enter username" />
+                            <button @click="saveUsername"
+                                class="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+                                :disabled="isSaving">
+                                <span v-if="isSaving">Saving...</span>
+                                <span v-else>Save</span>
+                            </button>
+                            <button @click="cancelEdit"
+                                class="px-3 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors"
+                                :disabled="isSaving">
+                                Cancel
+                            </button>
+                        </template>
+                        <template v-else>
+                            <div class="text-lg font-medium text-gray-900 dark:text-white flex-1">
+                                {{ username }}
+                            </div>
+                            <button @click="startEdit" class="text-blue-500 hover:text-blue-600 transition-colors"
+                                title="Edit username">
+                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                </svg>
+                            </button>
+                        </template>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm text-gray-500 dark:text-gray-400">Email</label>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">
+                        {{ authStore.user?.email || 'Not available' }}
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm text-gray-500 dark:text-gray-400">Account Type</label>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">
+                        {{ authStore.user?.isAnonymous ? 'Anonymous' : 'Registered User' }}
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm text-gray-500 dark:text-gray-400">Login Provider</label>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">
+                        {{ authStore.user?.providerData[0]?.providerId || 'Email/Password' }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useAuthStore } from '../stores/authStore';
+import { doc, getDoc, setDoc, updateDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    }
+});
+
+const emit = defineEmits(['close']);
+const authStore = useAuthStore();
+const username = ref('');
+const editedUsername = ref('');
+const isEditing = ref(false);
+const isSaving = ref(false);
+
+const startEdit = () => {
+    editedUsername.value = username.value;
+    isEditing.value = true;
+};
+
+const cancelEdit = () => {
+    editedUsername.value = username.value;
+    isEditing.value = false;
+};
+
+const saveUsername = async () => {
+    if (!authStore.user?.uid || !editedUsername.value.trim()) return;
+
+    isSaving.value = true;
+    try {
+        await authStore.updateUsername(editedUsername.value.trim());
+        username.value = editedUsername.value.trim();
+        isEditing.value = false;
+    } catch (error) {
+        console.error('Error updating username:', error);
+        // Show error message to the user
+        alert('Failed to update username. Please try again.');
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+// Fetch the username from Firestore when the component is mounted
+onMounted(async () => {
+    if (authStore.user?.uid) {
+        try {
+            const userDoc = await getDoc(doc(db, 'users', authStore.user.uid));
+            if (userDoc.exists()) {
+                username.value = userDoc.data().username || 'Not set';
+            } else {
+                username.value = 'Not set';
+            }
+        } catch (error) {
+            console.error('Error fetching user profile:', error);
+            username.value = 'Error loading username';
+        }
+    }
+});
+</script>
\ No newline at end of file
diff --git a/src/components/UserStatus.vue b/src/components/UserStatus.vue
index 56d86fb..ae5a47b 100644
--- a/src/components/UserStatus.vue
+++ b/src/components/UserStatus.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="user-status flex items-center gap-2 p-1 text-sm">
         <template v-if="authStore.user">
-            <div class="flex flex-col gap-0.5 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5">
+            <div class="flex flex-col gap-0.5 bg-gray-100 dark:bg-gray-700 rounded-lg px-2 py-1 max-w-fit">
                 <!-- User Status with Provider Icon -->
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1 min-w-0 max-w-full">
                     <!-- Google Icon -->
-                    <svg v-if="provider === 'google.com'" class="h-4 w-4" viewBox="0 0 24 24">
+                    <svg v-if="provider === 'google.com'" class="h-3.5 w-3.5 flex-shrink-0" viewBox="0 0 24 24">
                         <path fill="#4285F4"
                             d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
                         <path fill="#34A853"
@@ -16,31 +16,60 @@
                             d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
                     </svg>
                     <!-- GitHub Icon -->
-                    <svg v-else-if="provider === 'github.com'" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                    <svg v-else-if="provider === 'github.com'" class="h-3.5 w-3.5 flex-shrink-0" fill="currentColor"
+                        viewBox="0 0 24 24">
                         <path
                             d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
                     </svg>
                     <!-- Email Icon -->
-                    <svg v-else-if="provider === 'password'" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
+                    <svg v-else-if="provider === 'password'" class="h-3.5 w-3.5 flex-shrink-0" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                     </svg>
-                    <span class="text-gray-600">
+                    <span class="text-gray-600 truncate">
                         {{ displayName }}
                     </span>
+                    <!-- Settings Gear Icon -->
+                    <button @click="showUserProfile = true"
+                        class="gear-icon ml-1 text-gray-400 hover:text-gray-300 transition-colors flex-shrink-0">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                    </button>
+                    <!-- Contributor Badge -->
+                    <button v-if="hasContributed" @click="showContributions = true"
+                        class="ml-2 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 rounded-full flex items-center gap-1 hover:bg-amber-200 dark:hover:bg-amber-800 transition-colors">
+                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                        </svg>
+                        Contributor
+                    </button>
+                    <!-- Contributor Mode Badge -->
+                    <span v-if="contributorMode"
+                        class="ml-2 px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 rounded-full flex items-center gap-1">
+                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                        </svg>
+                        Editing
+                    </span>
                 </div>
 
                 <!-- Progress Indicator with Info Icon -->
                 <div @click="showProgressDetails = true"
-                    class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded px-2 py-1 transition-colors group">
-                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded px-2 py-1 transition-colors group max-w-full">
+                    <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                     </svg>
-                    <div class="flex items-center gap-2">
-                        <span>{{ progressText }}</span>
-                        <div class="w-24 h-1.5 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+                    <div class="flex items-center gap-2 min-w-0">
+                        <span class="truncate">{{ progressText }}</span>
+                        <div class="w-16 flex-shrink-0 h-1.5 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                             <div class="h-full bg-green-500 rounded-full"
                                 :style="{ width: `${progressStore.progressPercentage}%` }">
                             </div>
@@ -53,22 +82,57 @@
                         </svg>
                     </div>
                 </div>
+                <!-- Contributions Info -->
+                <div class="text-xs text-gray-600 dark:text-gray-300 max-w-full" @click="showContributions = true">
+                    <div
+                        class="flex items-center gap-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded px-2 py-1 transition-colors min-w-0">
+                        <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                        </svg>
+                        <span v-if="contributionStats.total > 0" class="truncate">
+                            {{ contributionStats.total }} quiz {{ contributionStats.total === 1 ? 'entry' : 'entries' }}
+                            ({{ contributionStats.published }} published)
+                        </span>
+
+                        <span v-else>No quiz entries yet</span>
+                        <svg class="h-4 w-4 ml-1 text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300 transition-colors"
+                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                </div>
 
                 <!-- Login/Sign Out Buttons -->
                 <router-link v-if="authStore.user.isAnonymous" to="/login"
                     class="text-blue-500 hover:text-blue-600 text-xs transition-colors">
                     Sign In
                 </router-link>
-                <button v-else @click="handleSignOut"
-                    class="text-gray-500 hover:text-red-500 text-xs transition-colors flex items-center gap-1"
-                    title="Sign Out">
-                    <span>Sign Out</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                    </svg>
-                </button>
+                <div v-else class="flex items-center gap-2">
+                    <router-link v-if="authStore.isAdmin" to="/admin"
+                        class="text-gray-500 hover:text-gray-600 text-xs transition-colors flex items-center gap-1 ml-4"
+                        title="Admin Panel">
+                        <span>Admin</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                    </router-link>
+                    <button @click="handleSignOut"
+                        class="text-gray-500 hover:text-red-500 text-xs transition-colors flex items-center gap-1"
+                        title="Sign Out">
+                        <span>Sign Out</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                        </svg>
+                    </button>
+                </div>
             </div>
         </template>
         <template v-else>
@@ -80,6 +144,12 @@
 
         <!-- Progress Details Popup -->
         <ProgressDetailsPopup :show="showProgressDetails" @close="showProgressDetails = false" />
+
+        <!-- Contributions Modal -->
+        <ContributionsModal :show="showContributions" @close="showContributions = false" />
+
+        <!-- User Profile Modal -->
+        <UserProfileModal :show="showUserProfile" @close="showUserProfile = false" />
     </div>
 </template>
 
@@ -89,17 +159,88 @@ import { useProgressStore } from '../stores/progressStore';
 import { onMounted, computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import ProgressDetailsPopup from './ProgressDetailsPopup.vue';
+import ContributionsModal from './ContributionsModal.vue';
+import { doc, getDoc, query, collection, getDocs, where } from 'firebase/firestore';
+import { db } from '../firebase';
+import { quizEntries } from '../data/quiz-items';
+import UserProfileModal from './UserProfileModal.vue';
 
 export default {
     name: 'UserStatus',
     components: {
-        ProgressDetailsPopup
+        ProgressDetailsPopup,
+        ContributionsModal,
+        UserProfileModal
     },
     setup() {
         const authStore = useAuthStore();
         const progressStore = useProgressStore();
         const showProgressDetails = ref(false);
+        const showContributions = ref(false);
         const router = useRouter();
+        const contributorMode = ref(false);
+        const hasContributed = ref(false);
+        const userQuizItems = ref([]);
+        const contributionStats = ref({
+            total: 0,
+            published: 0,
+            draft: 0
+        });
+        const showUserProfile = ref(false);
+
+        const fetchContributorStatus = async () => {
+            if (!authStore.user || authStore.user.isAnonymous) return;
+
+            try {
+                // Create queries for both email and userId
+                const emailQuery = query(
+                    collection(db, 'quizEntries'),
+                    where('userEmail', '==', authStore.user.email)
+                );
+                const userIdQuery = query(
+                    collection(db, 'quizEntries'),
+                    where('userId', '==', authStore.user.uid)
+                );
+
+                // Execute both queries
+                const [emailSnapshot, userIdSnapshot] = await Promise.all([
+                    getDocs(emailQuery),
+                    getDocs(userIdQuery)
+                ]);
+
+                // Combine results and remove duplicates
+                const uniqueEntries = new Map();
+                [...emailSnapshot.docs, ...userIdSnapshot.docs].forEach(doc => {
+                    if (!uniqueEntries.has(doc.id)) {
+                        uniqueEntries.set(doc.id, doc.data());
+                    }
+                });
+
+                // Calculate stats
+                const entries = Array.from(uniqueEntries.values());
+                userQuizItems.value = entries;
+
+                // Update contribution stats
+                contributionStats.value = {
+                    total: entries.length,
+                    published: entries.filter(entry => !entry.isDraft).length,
+                    draft: entries.filter(entry => entry.isDraft).length
+                };
+
+                // User has contributed if they have any entries
+                hasContributed.value = contributionStats.value.total > 0;
+
+                console.log('Contributor status:', {
+                    email: authStore.user.email,
+                    uid: authStore.user.uid,
+                    stats: contributionStats.value,
+                    hasContributed: hasContributed.value,
+                    entries: entries.length
+                });
+            } catch (error) {
+                console.error('Error fetching contributor status:', error);
+            }
+        };
 
         onMounted(async () => {
             console.log('UserStatus mounted');
@@ -107,6 +248,12 @@ export default {
                 await progressStore.initialize();
                 await progressStore.fetchProgress();
             }
+            // Load contributor mode from localStorage
+            const savedMode = localStorage.getItem('contributorMode');
+            if (savedMode) {
+                contributorMode.value = JSON.parse(savedMode);
+            }
+            await fetchContributorStatus();
         });
 
         // Watch for changes in progress, but don't re-fetch if already initialized
@@ -114,6 +261,59 @@ export default {
             console.log('Progress updated in store');
         }, { deep: true });
 
+        // Watch for changes in contributor mode and save to localStorage
+        watch(contributorMode, (newValue) => {
+            localStorage.setItem('contributorMode', JSON.stringify(newValue));
+        });
+
+        // Watch for auth changes to update contributor status
+        watch(() => authStore.user, async (newUser) => {
+            if (newUser && !newUser.isAnonymous) {
+                await fetchContributorStatus();
+            } else {
+                hasContributed.value = false;
+            }
+        });
+
+        // Watch for changes in userQuizItems and update stats
+        watch([userQuizItems, () => authStore.user?.email], () => {
+            if (!authStore.user?.email) return;
+
+            // Get published items by matching the full email
+            const publishedItems = quizEntries.filter(item =>
+                item.userEmail === authStore.user.email
+            );
+            const published = publishedItems.length;
+
+            console.log('Published items found:', {
+                email: authStore.user.email,
+                count: published,
+                items: publishedItems.map(item => item.title)
+            });
+
+            // Get draft items by checking if they're not in the published list
+            const draftItems = userQuizItems.value.filter(item =>
+                !quizEntries.some(qi =>
+                    qi.userEmail === authStore.user.email &&
+                    qi.title === item.title
+                )
+            );
+            const draft = draftItems.length;
+
+            console.log('Draft items found:', {
+                count: draft,
+                items: draftItems.map(item => item.title)
+            });
+
+            contributionStats.value = {
+                total: published + draft,
+                published,
+                draft
+            };
+
+            console.log('Updated contribution stats:', contributionStats.value);
+        });
+
         const displayName = computed(() => {
             if (authStore.user.isAnonymous) return 'Anonymous User';
             if (!authStore.user.email) return 'Signed In';
@@ -128,10 +328,14 @@ export default {
             return `${progressStore.quizCompletionCount}/${progressStore.totalQuizzes} quizzes`;
         });
 
+        const toggleContributorMode = () => {
+            contributorMode.value = !contributorMode.value;
+        };
+
         const handleSignOut = async () => {
             try {
                 await authStore.signOut();
-                router.push('/login');
+                router.push('/');
             } catch (error) {
                 console.error('Sign out error:', error);
             }
@@ -141,11 +345,27 @@ export default {
             authStore,
             progressStore,
             showProgressDetails,
+            showContributions,
             displayName,
             provider,
             progressText,
-            handleSignOut
+            handleSignOut,
+            contributorMode,
+            toggleContributorMode,
+            hasContributed,
+            contributionStats,
+            userQuizItems,
+            showUserProfile
         };
     }
 };
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+.gear-icon {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    background-color: transparent;
+}
+</style>
diff --git a/src/components/VersionHistoryModal.vue b/src/components/VersionHistoryModal.vue
new file mode 100644
index 0000000..ed0fab8
--- /dev/null
+++ b/src/components/VersionHistoryModal.vue
@@ -0,0 +1,275 @@
+<template>
+    <div v-if="show" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999] p-4"
+        @click.self="handleClose">
+        <div
+            class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-4 max-w-2xl w-full max-h-[80vh] border border-gray-200 dark:border-gray-700">
+            <button @click="handleClose"
+                class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white text-xl transition-colors"
+                aria-label="Close">
+                ×
+            </button>
+
+            <h3 class="text-lg font-semibold mb-3 text-gray-900 dark:text-white">Version History</h3>
+
+            <!-- Loading State -->
+            <div v-if="isLoading" class="text-center py-2">
+                <div
+                    class="animate-spin h-5 w-5 border-2 border-gray-500 border-t-transparent rounded-full mx-auto mb-1">
+                </div>
+                <p class="text-gray-600 dark:text-gray-400 text-sm">Loading version history...</p>
+            </div>
+
+            <!-- Version List -->
+            <div v-else-if="versions.length > 0" class="space-y-2 max-h-[calc(80vh-8rem)] overflow-y-auto pr-2">
+                <div v-for="(version, index) in versions" :key="index"
+                    class="border border-gray-200 dark:border-gray-700 rounded-lg p-2 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                    <div class="flex justify-between items-start">
+                        <div class="flex-1">
+                            <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                {{ version.timestamp.toLocaleString(undefined, { 
+                                    year: 'numeric', 
+                                    month: 'short', 
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                }) }}
+                            </p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-0.5">
+                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                </svg>
+                                {{ version.userEmail }}
+                            </p>
+                        </div>
+                    </div>
+                    <div v-if="version.versionMessage"
+                        class="mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-900 dark:text-white">
+                        <p class="flex items-left gap-1 text-xs font-medium mb-0.5 text-gray-500 dark:text-gray-400">
+                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            Version commit message:
+                        </p>
+                        <p class="flex items-left gap-1 text-sm whitespace-pre-wrap">{{ version.versionMessage }}</p>
+                    </div>
+                    <div class="mt-2 flex flex-wrap gap-1">
+                        <span
+                            class="px-1.5 py-0.5 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                            Version {{ version.versionNumber }}
+                        </span>
+                        <!-- Add status badge -->
+                        <span v-if="version.status" :class="[
+                            'px-1.5 py-0.5 text-xs rounded-full',
+                            {
+                                'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200': version.status === 'draft',
+                                'bg-yellow-200 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': version.status === 'pending',
+                                'bg-green-200 text-green-800 dark:bg-green-900 dark:text-green-200': version.status === 'approved',
+                                'bg-red-200 text-red-800 dark:bg-red-900 dark:text-red-200': version.status === 'rejected'
+                            }
+                        ]">
+                            {{ version.status.charAt(0).toUpperCase() + version.status.slice(1) }}
+                        </span>
+                        <!-- Show status change if it occurred -->
+                        <span v-if="version.statusChange"
+                            class="px-1.5 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                            Status changed: {{ version.statusChange.from }} → {{ version.statusChange.to }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- No Versions -->
+            <div v-else class="text-center py-4">
+                <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No version history</h3>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    This quiz item doesn't have any recorded changes yet.
+                </p>
+            </div>
+
+            <!-- Error State -->
+            <div v-if="error" class="mt-2 p-2 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-4 w-4 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd"
+                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                                clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-2">
+                        <h3 class="text-xs font-medium text-red-800 dark:text-red-200">
+                            Error loading version history
+                        </h3>
+                        <div class="mt-0.5 text-xs text-red-700 dark:text-red-300">
+                            {{ error }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { collection, query, where, orderBy, getDocs, doc, getDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        required: true
+    },
+    quizItemId: {
+        type: String,
+        required: false,
+        default: null
+    },
+    originalId: {
+        type: String,
+        required: false,
+        default: null
+    }
+});
+
+const emit = defineEmits(['close']);
+
+const versions = ref([]);
+const isLoading = ref(false);
+const error = ref(null);
+
+const fetchVersions = async () => {
+    const targetId = props.quizItemId || props.originalId;
+    if (!targetId) {
+        error.value = 'No quiz item ID provided';
+        return;
+    }
+
+    isLoading.value = true;
+    error.value = null;
+
+    try {
+        // First get the current quiz item to get its current status
+        const quizItemRef = doc(db, 'quizEntries', targetId);
+        const quizItemDoc = await getDoc(quizItemRef);
+        const currentStatus = quizItemDoc.data()?.status || 'draft';
+        const currentVersion = quizItemDoc.data()?.version || 1;
+
+        const versionsRef = collection(db, 'quizEditHistory');
+        const q = query(
+            versionsRef,
+            where('quizItemId', '==', targetId),
+            orderBy('timestamp', 'desc')
+        );
+
+        const querySnapshot = await getDocs(q);
+        console.log('Found versions:', querySnapshot.size);
+
+        let previousStatus = currentStatus;
+        versions.value = querySnapshot.docs.map((doc, index) => {
+            const data = doc.data();
+            console.log('Version data:', data);
+
+            // Handle timestamp conversion properly
+            let timestamp;
+            if (data.timestamp?.toDate) {
+                timestamp = data.timestamp.toDate();
+            } else if (data.timestamp instanceof Date) {
+                timestamp = data.timestamp;
+            } else {
+                timestamp = new Date();
+            }
+
+            // Check if status changed in this version
+            const statusChange = data.status && data.status !== previousStatus ? {
+                from: previousStatus,
+                to: data.status
+            } : null;
+
+            // Update previous status for next iteration
+            previousStatus = data.status || previousStatus;
+
+            // Use version from history or fall back to revisionNumber
+            const versionNumber = data.version || data.revisionNumber || (currentVersion - index);
+
+            return {
+                id: doc.id,
+                versionNumber: versionNumber,
+                timestamp: timestamp,
+                userEmail: data.userEmail || 'Unknown',
+                versionMessage: data.versionMessage || 'No message provided',
+                changes: data.changes || {},
+                status: data.status || previousStatus,
+                statusChange
+            };
+        });
+
+        // Log the versions for debugging
+        console.log('Processed versions:', versions.value.map(v => ({
+            version: v.versionNumber,
+            timestamp: v.timestamp,
+            message: v.versionMessage
+        })));
+    } catch (error) {
+        console.error('Error fetching versions:', error);
+        error.value = 'Failed to load version history';
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const handleClose = () => {
+    emit('close');
+};
+
+onMounted(() => {
+    if (props.show && props.quizItemId) {
+        fetchVersions();
+    }
+});
+
+// Add watch for quizItemId changes
+watch(() => props.quizItemId, (newId, oldId) => {
+    console.log('Quiz item ID changed:', { oldId, newId });
+    if (props.show && newId) {
+        console.log('Fetching new versions for ID:', newId);
+        fetchVersions();
+    }
+});
+
+// Add watch for show prop
+watch(() => props.show, async (newVal) => {
+    console.log('Show prop changed:', { oldValue: !newVal, newValue: newVal });
+    if (newVal) {
+        console.log('Modal shown, fetching versions for ID:', props.quizItemId || props.originalId);
+        await fetchVersions();
+    }
+});
+</script>
+
+<style scoped>
+/* Ensure modal is above everything */
+.fixed {
+    z-index: 9999 !important;
+}
+
+/* Add transition for smooth show/hide */
+.fixed {
+    transition: opacity 0.2s ease-in-out;
+}
+
+/* Ensure the modal content is above the overlay */
+.relative {
+    z-index: 10000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VersionInfoModal.vue b/src/components/VersionInfoModal.vue
new file mode 100644
index 0000000..d5e672f
--- /dev/null
+++ b/src/components/VersionInfoModal.vue
@@ -0,0 +1,118 @@
+<template>
+    <div v-show="isVisible" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999] p-4"
+        @click.self="handleClose">
+        <div
+            class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-lg w-full border border-gray-200 dark:border-gray-700">
+            <button @click="handleClose"
+                class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white text-xl transition-colors"
+                aria-label="Close">
+                ×
+            </button>
+
+            <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Version Info</h3>
+
+            <!-- Add status indicator -->
+            <div v-if="quizItemStatus" class="mb-4 flex items-center">
+                <span class="text-sm font-medium mr-2">Status:</span>
+                <span :class="[
+                    'px-2 py-1 rounded-full text-xs font-semibold',
+                    {
+                        'bg-gray-200 text-gray-800': quizItemStatus === 'draft',
+                        'bg-yellow-200 text-yellow-800': quizItemStatus === 'pending',
+                        'bg-blue-200 text-blue-800': quizItemStatus === 'accepted',
+                        'bg-green-200 text-green-800': quizItemStatus === 'approved',
+                        'bg-red-200 text-red-800': quizItemStatus === 'rejected'
+                    }
+                ]">
+                    {{ quizItemStatus.charAt(0).toUpperCase() + quizItemStatus.slice(1) }}
+                </span>
+            </div>
+
+            <div class="mb-4">
+                <label for="versionMessage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    What changes did you make in this version?
+                </label>
+                <textarea id="versionMessage" v-model="message"
+                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white text-gray-900 placeholder-gray-500"
+                    rows="4" placeholder="Describe your changes..."></textarea>
+            </div>
+
+            <div class="flex justify-end gap-4">
+                <button @click="showVersionHistory = true"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                    View History
+                </button>
+                <button @click="handleClose"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                    Cancel
+                </button>
+                <button @click="handleSave"
+                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    :disabled="!message.trim()">
+                    Save Draft
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Version History Modal -->
+    <VersionHistoryModal v-if="quizItemId" :show="showVersionHistory" :quizItemId="quizItemId"
+        @close="showVersionHistory = false" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import VersionHistoryModal from './VersionHistoryModal.vue';
+import { quizStore } from '../stores/quizStore';
+
+const store = quizStore();
+const emit = defineEmits(['close', 'save']);
+
+const message = ref('');
+const isVisible = ref(false);
+const showVersionHistory = ref(false);
+const quizItemId = ref('');
+const quizItemStatus = ref('');
+
+const handleClose = () => {
+    isVisible.value = false;
+    message.value = '';
+    emit('close');
+};
+
+const handleSave = () => {
+    if (message.value.trim()) {
+        emit('save', message.value.trim());
+        message.value = '';
+        isVisible.value = false;
+    }
+};
+
+const show = (id) => {
+    isVisible.value = true;
+    quizItemId.value = id;
+    // Get the status from the store's draftQuizEntry
+    quizItemStatus.value = store.draftQuizEntry?.status || 'draft';
+};
+
+defineExpose({
+    show
+});
+</script>
+
+<style scoped>
+/* Ensure modal is above everything */
+.fixed {
+    z-index: 9999 !important;
+}
+
+/* Add transition for smooth show/hide */
+.fixed {
+    transition: opacity 0.2s ease-in-out;
+}
+
+/* Ensure the modal content is above the overlay */
+.relative {
+    z-index: 10000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/YouTubeEmbed.vue b/src/components/YouTubeEmbed.vue
index 1b5b874..bd0f375 100644
--- a/src/components/YouTubeEmbed.vue
+++ b/src/components/YouTubeEmbed.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="youtube-embed">
     <div class="video-container">
-      <iframe :src="embedUrl" frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen></iframe>
+      <iframe :src="embedUrl" frameborder="0" sandbox="allow-scripts allow-same-origin allow-presentation"
+        referrerpolicy="no-referrer" loading="lazy"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+        @load="onIframeLoad" title="YouTube video player"></iframe>
     </div>
   </div>
 </template>
@@ -23,22 +24,39 @@ export default {
   },
   computed: {
     embedUrl() {
-      return `https://www.youtube.com/embed/${this.videoId}?rel=0&showinfo=0&autoplay=0&start=${this.startTime}`;
+      try {
+        return `https://www.youtube.com/embed/${this.videoId}?rel=0&showinfo=0&autoplay=0&start=${this.startTime}`;
+      } catch (error) {
+        console.error('Error creating YouTube embed URL:', error);
+        return '';
+      }
     }
   },
   methods: {
     onIframeLoad(event) {
-      console.log('Iframe loaded, dimensions:', {
-        width: event.target.offsetWidth,
-        height: event.target.offsetHeight
-      });
+      try {
+        console.log('Iframe loaded, dimensions:', {
+          width: event.target.offsetWidth,
+          height: event.target.offsetHeight
+        });
+      } catch (error) {
+        console.error('Error in iframe load handler:', error);
+      }
     }
   },
   mounted() {
-    console.log('YouTube component mounted, videoId:', this.videoId);
+    try {
+      console.log('YouTube component mounted, videoId:', this.videoId);
+    } catch (error) {
+      console.error('Error in YouTube component mount:', error);
+    }
   },
   updated() {
-    console.log('YouTube component updated, videoId:', this.videoId);
+    try {
+      console.log('YouTube component updated, videoId:', this.videoId);
+    } catch (error) {
+      console.error('Error in YouTube component update:', error);
+    }
   }
 }
 </script>
diff --git a/src/components/auth/LoginForm.vue b/src/components/auth/LoginForm.vue
index 186832f..aa06521 100644
--- a/src/components/auth/LoginForm.vue
+++ b/src/components/auth/LoginForm.vue
@@ -1,18 +1,24 @@
 <template>
   <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
-    <h2 class="text-2xl font-bold mb-6 text-center">{{ isRegister ? 'Register' : 'Login' }}</h2>
+    <h2 class="text-2xl font-bold mb-6 text-center text-gray-900">{{ isRegister ? 'Register' : 'Login' }}</h2>
 
     <form @submit.prevent="handleSubmit" class="space-y-4">
       <div>
         <label class="block text-sm font-medium text-gray-700">Email</label>
         <input type="email" v-model="email" required
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />
+          class="mt-1 block w-full rounded-md border-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" />
       </div>
 
+
       <div>
         <label class="block text-sm font-medium text-gray-700">Password</label>
         <input type="password" v-model="password" required
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />
+          class="mt-1 block w-full rounded-md border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" />
+      </div>
+      <div v-if="isRegister">
+        <label class="block text-sm font-medium text-gray-700">Username</label>
+        <input type="text" v-model="username" required
+          class="mt-1 block w-full rounded-md border-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" />
       </div>
 
       <div v-if="error" class="text-red-500 text-sm">{{ error }}</div>
@@ -53,6 +59,7 @@
 import { ref } from 'vue';
 import { useAuthStore } from '../../stores/authStore';
 import { useRouter } from 'vue-router';
+import { names } from '../../data/names';
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -62,11 +69,19 @@ const password = ref('');
 const error = ref('');
 const isRegister = ref(false);
 
+const generateUniqueUsername = () => {
+  const randomName = names[Math.floor(Math.random() * names.length)];
+  const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999
+  return `${randomName}${randomNumber}`;
+};
+
+const username = ref(generateUniqueUsername());
+
 const handleSubmit = async () => {
   try {
     error.value = '';
     if (isRegister.value) {
-      await authStore.registerWithEmail(email.value, password.value);
+      await authStore.registerWithEmail(email.value, password.value, username.value);
     } else {
       await authStore.loginWithEmail(email.value, password.value);
     }
diff --git a/src/composables/useAuth.js b/src/composables/useAuth.js
new file mode 100644
index 0000000..bf64a7e
--- /dev/null
+++ b/src/composables/useAuth.js
@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import { auth } from '../firebase';
+import { onAuthStateChanged } from 'firebase/auth';
+
+const user = ref(null);
+
+// Create a single instance of the auth state
+export function useAuth() {
+    // Set up auth state listener
+    onAuthStateChanged(auth, (newUser) => {
+        user.value = newUser;
+    });
+
+    return {
+        user,
+        isAuthenticated: () => !!user.value,
+        getUserId: () => user.value?.uid,
+    };
+} 
\ No newline at end of file
diff --git a/src/data/names.js b/src/data/names.js
new file mode 100644
index 0000000..3b41f69
--- /dev/null
+++ b/src/data/names.js
@@ -0,0 +1,149 @@
+export const names = [
+    "Homer",
+    "Virgil",
+    "Dante",
+    "Shakespeare",
+    "Milton",
+    "Goethe",
+    "Hawthorne",
+    "Dickens",
+    "Austen",
+    "Tolstoy",
+    "Flaubert",
+    "Hemingway",
+    "Faulkner",
+    "Kafka",
+    "Proust",
+    "Joyce",
+    "Borges",
+    "Whitman",
+    "Frost",
+    "Eliot",
+    "Chekhov",
+    "Ibsen",
+    "Molière",
+    "Cervantes",
+    "Kant",
+    "Huxley",
+    "Orwell",
+    "Steinbeck",
+    "Wilde",
+    "Plath",
+    "Morrison",
+    "Beckett",
+    "Ellison",
+    "Marquez",
+    "Dostoevsky",
+    "Huxley",
+    "Kafka",
+    "Tennyson",
+    "Keats",
+    "Byron",
+    "Shelley",
+    "Browning",
+    "Sartre",
+    "Beckett",
+    "Fitzgerald",
+    "Thoreau",
+    "Emerson",
+    "Aldous",
+    "Zola",
+    "Cather",
+    "Chaucer",
+    "Huxley",
+    "Larkin",
+    "Euripides",
+    "Sophocles",
+    "Aristophanes",
+    "Rimbaud",
+    "Verlaine",
+    "Poe",
+    "Dickinson",
+    "Browning",
+    "Hemingway",
+    "Zola",
+    "Hugo",
+    "Mann",
+    "Hesse",
+    "Marx",
+    "Nietzsche",
+    "Flaubert",
+    "Verne",
+    "Melville",
+    "Dumas",
+    "Gogol",
+    "Turgenev",
+    "Chekhov",
+    "Mann",
+    "Kipling",
+    "Lawrence",
+    "Salinger",
+    "Huxley",
+    "Baldwin",
+    "Woolf",
+    "Rushdie",
+    "Bellow",
+    "O'Connor",
+    "Lessing",
+    "Sexton",
+    "Neruda",
+    "Cummings",
+    "Hughes",
+    "Bishop",
+    "Ginsberg",
+    "Levertov",
+    "Dylan",
+    "Barth",
+    "Heller",
+    "Capote",
+    "Borges",
+    "Sartre",
+    "Camus",
+    "Austen",
+    "Beaumont",
+    "Bunyan",
+    "Cather",
+    "Chopin",
+    "Clemens",
+    "Coates",
+    "Conrad",
+    "Cortázar",
+    "Crane",
+    "Dahl",
+    "Defoe",
+    "Dickens",
+    "Dumas",
+    "Eliot",
+    "Emerson",
+    "Faulkner",
+    "Fitzgerald",
+    "Forster",
+    "Gandhi",
+    "Ginsberg",
+    "Golding",
+    "Hemingway",
+    "Huxley",
+    "Ibsen",
+    "Kipling",
+    "Larkin",
+    "Leacock",
+    "Lewis",
+    "Mann",
+    "Morrison",
+    "Neruda",
+    "Ovid",
+    "Poe",
+    "Rilke",
+    "Rolland",
+    "Salinger",
+    "Sand",
+    "Shaw",
+    "Stein",
+    "Swift",
+    "Thackeray",
+    "Tolstoy",
+    "Vidal",
+    "Waugh",
+    "Wilde",
+    "Woolf"
+]
\ No newline at end of file
diff --git a/src/data/open-source-community.md b/src/data/open-source-community.md
new file mode 100644
index 0000000..69b8e88
--- /dev/null
+++ b/src/data/open-source-community.md
@@ -0,0 +1,56 @@
+# Open Source Communities
+
+An open source community is a group of individuals who collaborate to develop software, with contributions made voluntarily based on their interests and needs, rather than being assigned tasks by executives. [1, 2]  
+
+Here's a more detailed look at open source communities: [2, 3]  
+
+## Key Characteristics: [2, 3]  
+
+• Decentralized and Collaborative: Open source projects are typically managed by developers or programmers who may use the project for various reasons, or by software companies that have an interest in the project's success. [2, 3]  
+
+• Open Source Software: Open source software is characterized by its source code being freely available for anyone to use, study, modify, and distribute. [4, 5]  
+
+• Community Driven: Open source communities are built around a shared goal of developing and improving software, with contributions coming from a diverse group of individuals. [1, 2]  
+
+• Examples of Open Source Software: Popular examples include Linux, Mozilla Firefox, WordPress, and Android. [6]  
+
+• Benefits of Open Source: Open source software offers benefits such as freedom and flexibility, high quality, lower costs, security, and innovation through community collaboration. [7, 8]  
+
+• Types of Open Source Communities: There are various types of open source communities, including developer communities, open source competence centers, and single-vendor commercial open source projects. [2, 3, 9, 10]  
+
+• Open Source Organizations: Organizations like the Apache Software Foundation and the Open Source Geospatial Foundation provide organizational, legal, and financial support for open source projects. [11, 12, 13]  
+
+• Open Source Licenses: Open source licenses grant users permission to use, study, modify, and distribute the software, with some licenses requiring that any modifications also be released as open source. [14]  
+
+## How Open Source Communities Work: [1, 2]  
+
+• Voluntary Contributions: Individuals contribute to open source projects based on their interests and expertise, rather than being paid employees. [1, 2]  
+
+• Open Communication: Open source communities rely on open communication and collaboration to share ideas, discuss issues, and coordinate development efforts. [15, 16]  
+
+• Version Control Systems: Tools like Git are used to track changes to the source code and facilitate collaboration among developers. [16]  
+
+• Community Forums and Mailing Lists: Open source communities often use forums, mailing lists, and other online platforms to facilitate communication and discussion among members. [16]  
+
+• Code Reviews: Open source projects often have a process of code review, where developers review each other's code to ensure quality and identify potential issues. [16]  
+
+Generative AI is experimental.
+
+## References
+
+[1] https://www.sciencedirect.com/topics/computer-science/open-source-community  
+[2] https://mdubravski.medium.com/common-types-of-open-source-communities-93c9fdd0e84c  
+[3] https://opensource.com/business/13/6/four-types-organizational-structures-within-open-source-communities  
+[4] https://www.quora.com/What-are-the-largest-open-source-communities  
+[5] https://www.blackduck.com/glossary/what-is-open-source-software.html  
+[6] https://www.investopedia.com/terms/o/open-source.asp  
+[7] https://www.openlogic.com/blog/top-5-benefits-open-source-software  
+[8] https://skill-mine.com/5-benefits-of-open-source-software-for-your-organization/  
+[9] https://www.znetlive.com/blog/8-advantages-of-using-open-source-software/  
+[10] https://dl.acm.org/doi/10.1007/s10257-010-0149-x  
+[11] https://cyberpanel.net/blog/what-is-apache-server-how-it-works  
+[12] https://opensource.com/resources/organizations  
+[13] https://wiki.osgeo.org/wiki/British_Columbia_Chapter  
+[14] https://opensource.com/resources/what-open-source  
+[15] https://en.wikiversity.org/wiki/Open_community_approach  
+[16] https://github.blog/open-source/maintainers/four-steps-toward-building-an-open-source-community/ 
\ No newline at end of file
diff --git a/src/data/quiz-items.js b/src/data/quiz-items.js
index 0edb924..566b3fd 100644
--- a/src/data/quiz-items.js
+++ b/src/data/quiz-items.js
@@ -803,7 +803,7 @@ export const quizEntries = [{
     modal: ""
 },
 {
-    title: "",
+    title: "Systems Change",
     subtitle: "",
     id: 28,
     Question: "To move a school to a SOR/Structured Literacy approach, six systems must be addressed.",
@@ -1024,7 +1024,6 @@ export const quizEntries = [{
     correctAnswer: "3",
     explanation: "Developmental Language Disorder is the most common.",
     explanation2: "Autism occurrs less than 1/10th as often.",
-    explanation2: "",
     videoUrl: "",
     videoId: "4gcvjHOa968",
     image: "",
@@ -1336,13 +1335,6 @@ export const quizEntries = [{
     },
     cautionLevel: "",
     caution: "",
-    citations: [{
-        title: "",
-        author: "",
-        url: "",
-        year: "",
-        imageUrl: "",
-    }],
     ref1: "",
     ref2: "",
     resources: [{
@@ -1498,7 +1490,7 @@ export const quizEntries = [{
     closingText2: "",
     modal: "",
     status: "draft",
-    id: "K9G4hnDT4RyVxwE9c7T8"
+    stringId: "K9G4hnDT4RyVxwE9c7T8"
 },
 {
     title: "Pace of Phonics Instruction",
@@ -1541,6 +1533,1197 @@ export const quizEntries = [{
     closingText: "",
     closingText2: "",
     modal: ""
+}, {
+    id: 43,
+    title: "Teaching Syllabification",
+    subtitle: "",
+    userEmail: "ed.jones@gmail.com", // Add the email of the author
+    Question: "T/F: Teaching syllabification (breaking words into syllables) should be a regular and ongoing component of early literacy instruction.",
+    questionP2: "",
+    answer_type: "mc",
+    option1: "True",
+    option2: "False",
+    option3: "",
+    option4: "",
+    option5: "",
+    correctAnswer: 2,
+    explanation: "Not as ongoing as many teachers and leaders seem to think. \n\nCurrent research shows 2-9 hours of instruction being useful. Probably leaning closer to 3-6 for general classroom instruction. ",
+    explanation2: "While some students may benefit from more explicit syllable instruction in intervention settings, it's common to see teachers worrying excessively over exactly how to break up specific words. \n\nSuch time can generally be better spent in other ways. ",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        title: "On Eating Elephants and Teaching Syllabication",
+        EpisodeUrl: "https://podcasts.apple.com/us/podcast/shanahan-on-literacy/id1691952694?i=1000695048216",
+        audioUrl: "",
+        description: "",
+        podcastStartTime: 0
+    },
+    podcastEpisode2: {
+        title: "",
+        EpisodeUrl: "",
+        audioUrl: "",
+        description: "",
+        podcastStartTime: 0
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [
+        {
+            title: "Does English Have Useful Syllable Division Patterns?",
+            author: "Devin M. Kearns",
+            url: "https://doi.org/10.1002/rrq.342",
+            year: "2020",
+            imageUrl: ""
+        },
+        {
+            title: "Graphosyllabic analysis helps adolescent struggling readers read and spell words",
+            author: "Alpana Bhattacharya, Linnea C Ehri",
+            url: "https://doi.org/10.1177/00222194040370040501",
+            year: "2004",
+            imageUrl: ""
+        }
+    ],
+    ref1: "",
+    ref2: "",
+    resources: [
+        {
+            title: "On Eating Elephants and Teaching Syllabication",
+            author: "Tim Shanahan",
+            url: "https://www.shanahanonliteracy.com/blog/on-eating-elephants-and-teaching-syllabication-2",
+            description: ""
+        }
+    ],
+    closingText: "",
+    closingText2: "",
+    modal: "# Lyn Stone on Syllabification\n\nFebruary 26 at 8:41 PM\n\n\"Syllabification\" - another hangover from weird phonics practices that can't see beyond grapheme-phoneme correspondences.\n\nI received a text the other day from a lovely friend and colleague. She asked, \"How do you syllabify 'ordinary'?\"\n\nWell I don't.\n\nHere is my response:\n\n\"How would you syllabify X word? This person says you should do it this way and this person says you should do it that way and this person...\"\n\nIs that not a red flag to you? If adults can't even give you a straight answer, what hope do kids have?\n\nWhat is the end goal here? Pronunciation in a single unit of time or placement in LTM?\n\nMaybe ask better questions such as:\n\n- What are the significant elements in this word?\n- What other words share those elements?\n\nI'll do your example word for you, but only if you promise to ask better questions next time and start using the Online Etymology Dictionary.\n\n## Ordinary:\n\nThe ordin- part denotes \"customary, regular, usual, orderly\"\n\nThe -ary part is an adjective and noun-forming suffix\n\nSo where else do you see these parts?\n\n**ordin:**\n\nordinal, ordinance, coordinate, inordinate, ordination, subordinate, extraordinary\n\n**-ary:**\n\nprimary, secondary, binary, dietary, honorary, literary, salivary, customary, imaginary etc.\n\nWho cares where you \"syllabify\" these parts? What's that got to do with anything?\n\nYou might say that we need to teach kids to pronounce those words when reading. Sure. But a significant number of those words are already in their oral lexicon. They already know how to pronounce them, they need to now orthographically map them.\n\nAnd the words they don't know how to pronounce, well they need to understand their meaning, regardless. We all have words we can understand in print that we don't have the 100% accurate pronunciation for. Why apply dodgy \"syllabification\" rules to these and use up the cognitive real estate we could use for meaning and schema-building instead?\n\nBesides, there's this concept of 'set for variability' that takes care of alternative pronunciations. Look it up, you'll love it."
+},
+{
+    title: "Reading First",
+    subtitle: "",
+    id: 44,
+    beta: true,
+    Question: "In the middle stages of the Reading First program, two programs were considered to have met the strict evidence based requirements of the program.",
+    questionP2: "They were:",
+    answer_type: "ms",
+    option1: "Success for All",
+    option2: "Reading Recovery",
+    option3: "Direct Instruction",
+    option4: "SRA Reading Mastery",
+    option5: "Voyager Passport",
+    correctAnswer: 1,
+    explanation: "Success for All was essentially built on Direct Instruction. DI was the only one to also have been proven in the 1960's Project Follow Through. ",
+    explanation2: "Both continue to work strongly for at-risk children today.",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        podcastStartTime: 0,
+        description: "",
+        EpisodeUrl: "",
+        audioUrl: "",
+        title: "Episode Title"
+    },
+    podcastEpisode2: {
+        podcastStartTime: 0,
+        description: "",
+        title: "",
+        EpisodeUrl: "",
+        audioUrl: ""
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [],
+    ref1: "",
+    ref2: "",
+    resources: [],
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "pending",
+    timestamp: {
+        seconds: 1741094726,
+        nanoseconds: 725000000
+    },
+    originalId: "3kjWPhc3tXh0v5pLVZm4",
+    userEmail: "ed.jones@gmail.com",
+    isAnonymous: false,
+    submittedAt: {
+        seconds: 1741094726,
+        nanoseconds: 725000000
+    },
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    correctAnswers: [
+        1,
+        3
+    ]
+},
+{
+    title: "Nonsense Word Fluency",
+    subtitle: "",
+    id: 45,
+    Question: "Kids should receive how much instruction in nonsense word fluency?",
+    questionP2: "",
+    answer_type: "mc",
+    option1: "0-1 hour",
+    option2: "1-5 hours",
+    option3: "5-10 hours",
+    option4: "> 10 hours",
+    option5: "",
+    correctAnswer: 1,
+    explanation: "Teachers should not teach nonsense word fluency.",
+    explanation2: "While NWF assessments are a crucial part of diagnosing students' word-level skills, instruction in nonsense words is an improper use of time. Plenty of unfamiliar real words can be used to build students' orthographic mapping skills and memories. Use them instead.",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        description: "",
+        audioUrl: "",
+        EpisodeUrl: "",
+        title: "",
+        podcastStartTime: 0
+    },
+    podcastEpisode2: {
+        title: "",
+        EpisodeUrl: "",
+        podcastStartTime: 0,
+        audioUrl: "",
+        description: ""
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [],
+    ref1: "",
+    ref2: "",
+    resources: [
+        {
+            title: "What Doesn't Belong Here? On Teaching Nonsense Words",
+            author: "Tim Shanahan",
+            url: "https://www.shanahanonliteracy.com/blog/what-doesnt-belong-here-on-teaching-nonsense-words",
+            description: ""
+        }
+    ],
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "pending",
+    userEmail: "ed.jones@gmail.com",
+    isAnonymous: false,
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    correctAnswers: [1],
+    submittedAt: {
+        seconds: 1741170304,
+        nanoseconds: 695000000
+    },
+    timestamp: {
+        seconds: 1741170304,
+        nanoseconds: 767000000
+    }
+},
+{
+    title: "Phonological Awareness",
+    subtitle: "Rhyming and Syllable instruction",
+    id: 46,
+    Question: "T/F: Rhyming and syllable segmentation are a critical part of Kindergarten",
+    questionP2: "",
+    answer_type: "mc",
+    option1: "True",
+    option2: "False",
+    option3: "",
+    option4: "",
+    option5: "",
+    correctAnswer: 2,
+    explanation: "They are an unnecessary use of precious time. This explanation was provided by Holly Lane, Director of the University of Florida Literacy Institute (UFLI):",
+    explanation2: "",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    modal: "It's hard to let go of this belief, but it really is worth it. The idea that larger units of sound are important came from research on phonological development that demonstrated a typical developmental sequence. This body of research showed that kids typically become aware of larger units of sound (words, syllables, onsets, rimes) before they tune into smaller units (phonemes).\nBUT...here's where the field went wrong. We ASSUMED (you know what happens when you assume! 😉) that because this was the typical order of development, it was a necessary order. We ASSUMED that children needed to learn to rhyme and segment syllables first, and then we could teach them to blend and segment phonemes. Well, we were wrong. As it turns out, we figured out that kids do just fine jumping right into phonemes.\nThis is a lot like how pediatricians used to be concerned when babies didn't crawl. They had identified a typical developmental sequence in which babies crawl before they walk. They were certain that kids who didn't crawl would suffer long-term developmental problems. Well, as it turns out many children walk without ever crawling and turn out just fine. Pediatricians figured out they were wrong about this, so they stopped suggesting parents take their kids through silly therapies to get them to crawl even though they had already learned to walk.\nEven more important, we figured out that learning to rhyme and segment syllables doesn't actually have any real benefit to reading or spelling. Remember, phonological awareness is not the goal of phonological awareness instruction. The whole purpose of working on phonological awareness in the first place it to help kids read and spell. Teaching kids to rhyme and segment syllables helps kids rhyme and segment syllables, but teaching kids to blend and segment phonemes helps them read and spell words.\nI hear teachers say all the time \"it's only 10 or 15 minutes a day, what's the harm?\" Well, maybe you've got tons of spare time in your school day, but most teachers don't. If you have 10-15 minutes available in your day, your time would be much better used doing additional practice on word work with manipulative letters (i.e., blending and segmenting phonemes with letters) or reading and spelling irregular words or reading connected text--things that will actually improve your kids' reading ability.\nI know the belief is strong, and the activities are fun and engaging, so it's hard to let it go. Believe me when I say I understand. I wrote and entire BOOK that included activities at the word, syllable, onset-rime, and phoneme level. You know that umbrella diagram that people use? That came from PD I did in the early 90s. I was invested in this stuff! But, now I know better, so I do better. I urge you to do the same!",
+    isAnonymous: false,
+    correctAnswers: [2],
+    podcastEpisode: {
+        title: "Episode Title",
+        EpisodeUrl: "",
+        audioUrl: "",
+        description: "",
+        podcastStartTime: 0
+    },
+    podcastEpisode2: {
+        title: "",
+        EpisodeUrl: "",
+        audioUrl: "",
+        description: "",
+        podcastStartTime: 0
+    },
+    cautionLevel: "",
+    caution: "If you can help us add the research to this section, we'd be very appreciative.",
+    citations: [],
+    ref1: "",
+    ref2: "",
+    resources: [
+        {
+            text: "Heggarty has issued updated guidance on lessons to omit.",
+            title: "Heggarty Alignment Guide",
+            author: "Literacy Resources, LLC",
+            url: "https://wp.heggerty.org/wp-content/uploads/2024/04/2020-2022-Edition-Alignment-Guide_Updated-July-2022.pdf",
+            description: ""
+        }
+    ],
+    closingText: "If you can help us add the research to this section, we'd be very appreciative.",
+    closingText2: "",
+    status: "draft",
+    version: 3,
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    updatedAt: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    userEmail: "ed.jones@gmail.com",
+    createdAt: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    timestamp: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    isPermanent: false,
+    originalId: "twUREPJ0nvIhbQXAeHRj"
+},
+{
+    title: "Researchers: The Simple View of Reading",
+    subtitle: "",
+    id: 47,
+    Question: "1986 saw the introduction of \"The Simple View of Reading\". It reduced reading research to a simple, but effective one-sentence definition.",
+    questionP2: "The authors of this were (pick all): ",
+    answer_type: "ms",
+    option1: "Wesley Hoover",
+    option2: "Phillip Gough",
+    option3: "Linnea Ehri",
+    option4: "William Tunmer",
+    option5: "Mark Seidenberg",
+    correctAnswer: 1,
+    correctAnswers: [
+        2,
+        4
+    ],
+    explanation: "Gough & Tunmer's Simple View of Reading (1986) transformed how teachers see the reading development process. ",
+    explanation2: "",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        title: "Episode Title",
+        podcastStartTime: 0,
+        audioUrl: "",
+        EpisodeUrl: "",
+        description: ""
+    },
+    podcastEpisode2: {
+        podcastStartTime: 0,
+        description: "",
+        EpisodeUrl: "",
+        title: "",
+        audioUrl: ""
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [
+        {
+            url: "https://journals.sagepub.com/doi/abs/10.1177/074193258600700104",
+            year: "1986",
+            title: "Decoding, Reading, and Reading Disability",
+            imageUrl: "https://express-readers.s3.us-west-1.amazonaws.com/express/wp-content/uploads/2023/07/28032903/Simple-View-RGB-2048x910.jpg",
+            author: "Philip B. Gough and William E. Tunmer"
+        }
+    ],
+    ref1: "",
+    ref2: "",
+    resources: [],
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "draft",
+    userEmail: "ed.jones@gmail.com",
+    originalId: "rNenkcoeaWhFxaDmZyG5",
+    submittedAt: {
+        seconds: 1741739243,
+        nanoseconds: 169000000
+    },
+    timestamp: {
+        seconds: 1741739445,
+        nanoseconds: 504000000
+    },
+    isAnonymous: false,
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1"
+},
+{
+    title: "Vowels and Consonants",
+    subtitle: "Deep in the phonetics",
+    id: 48,
+    Question: "What is a vowel? How is a consonant different?",
+    questionP2: "",
+    answer_type: "short_answer",
+    option1: "First option",
+    option2: "Second option",
+    option3: "Third option",
+    option4: "Fourth option",
+    option5: "Fifth option",
+    correctAnswer: 2,
+    correctAnswers: [],
+    explanation: "It's these details that can often hang up teachers working with struggling students. Hopefully experts will weigh in here with what teachers should know.",
+    explanation2: "Did you answer: \"A continuous, voiced speech sound produced by an open mouth with airflow unobstructed by your teeth, lips, tongue or airflow\"?",
+    videoUrl: "",
+    videoId: "9K3uPI3qu4c",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        title: "Episode Title",
+        podcastStartTime: 0,
+        description: "",
+        EpisodeUrl: "",
+        audioUrl: ""
+    },
+    podcastEpisode2: {
+        description: "",
+        EpisodeUrl: "",
+        podcastStartTime: 0,
+        title: "",
+        audioUrl: ""
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [],
+    ref1: "",
+    ref2: "",
+    resources: [],
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "draft",
+    version: 1,
+    timestamp: {
+        seconds: 1742151531,
+        nanoseconds: 914000000
+    },
+    userEmail: "ed.jones@gmail.com",
+    submittedAt: {
+        seconds: 1742204528,
+        nanoseconds: 804000000
+    },
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    originalId: "mZVtSMFOgWfHyoQGgM3x",
+    isAnonymous: false
+},
+{
+    title: "Causes of Dyslexia",
+    subtitle: "",
+    id: 49,
+    Question: "T/F: Researchers have a solid understanding of the neurobiological mechanisms which underly dyslexia.",
+    questionP2: "",
+    answer_type: "mc",
+    option1: "True",
+    option2: "False",
+    option3: "Third option",
+    option4: "Fourth option",
+    option5: "Fifth option",
+    correctAnswer: 2,
+    explanation: "Today, the Phonological Deficit Hypothesis (PDH) is the primary--and quite successful--scientific explanation behind dyslexia. However, the underlying neurobiological components of PDH are less well understood.",
+    explanation2: "It's critical to remember that Phonology is far more than just phonemic awareness. As Share says, \"There have unquestionably been genuine breakthroughs in the understanding the neurobiological circuitry of reading and dyslexia. However, the initial hype that neuroimaging would soon uncover the true 'cause' of dyslexia has since been tempered by an appreciation of neuroplasticity—the brain became a dependent (and not only independent) variable and no longer a constant in the dyslexia equation.\"",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        podcastStartTime: 0,
+        title: "Episode Title",
+        audioUrl: "",
+        description: "",
+        EpisodeUrl: ""
+    },
+    podcastEpisode2: {
+        title: "",
+        description: "",
+        audioUrl: "",
+        EpisodeUrl: "",
+        podcastStartTime: 0
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: {
+        0: {
+            url: "https://www.mdpi.com/2076-3425/11/11/1510",
+            imageUrl: "",
+            year: "2021",
+            author: "David L. Share",
+            title: "Common Misconceptions about the Phonological Deficit Theory of Dyslexia"
+        }
+    },
+    ref1: "",
+    ref2: "",
+    resources: {},
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "approved",
+    version: 8,
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    submittedAt: {
+        seconds: 1742905868,
+        nanoseconds: 257000000
+    },
+    timestamp: {
+        nanoseconds: 257000000,
+        seconds: 1742905868
+    },
+    createdAt: {
+        _methodName: "serverTimestamp"
+    },
+    userEmail: "ed.jones@gmail.com",
+    correctAnswers: [],
+    updatedAt: {
+        nanoseconds: 257000000,
+        seconds: 1742905868
+    }
+},
+{
+    title: "Linguistics",
+    subtitle: "",
+    id: 50,
+    Question: "Which of the following best describes the concept of allomorphs?",
+    questionP2: "",
+    answer_type: "mc",
+    option1: "Different words that have the same meaning in different languages.",
+    option2: "Variations of a morpheme that appear in different phonological or grammatical contexts.",
+    option3: "Words that share the same root but have different affixes.",
+    option4: "The smallest units of meaning in a language that cannot be broken down further.",
+    option5: "Fifth option",
+    correctAnswer: 2,
+    correctAnswers: [],
+    explanation: "Allomorphy refers to the different forms a morpheme can take depending on its surroundings.\n\nFor example, 'syn', like in 'synchrony' means 'together' but is changed to 'sym' before certain letters (to ease pronunciation) resulting in words like 'symphony' and 'sympathetic'. - @RyonWLeyshon on X.\n",
+    explanation2: "",
+    videoUrl: "",
+    videoId: "",
+    image: "",
+    imageUrl: "",
+    imageAltText: "",
+    podcastEpisode: {
+        audioUrl: "",
+        title: "Episode Title",
+        description: "",
+        EpisodeUrl: "",
+        podcastStartTime: 0
+    },
+    podcastEpisode2: {
+        description: "",
+        EpisodeUrl: "",
+        audioUrl: "",
+        title: "",
+        podcastStartTime: 0
+    },
+    cautionLevel: "",
+    caution: "",
+    citations: [],
+    ref1: "",
+    ref2: "",
+    resources: [
+        {
+            title: "Do morphemes always behave themselves?",
+            url: "https://x.com/RyonWLeyshon/status/1904799593826517291",
+            description: "Brilliant intro to allomorphs.",
+            author: "@RyonWLeyshon"
+        }
+    ],
+    closingText: "",
+    closingText2: "",
+    modal: "",
+    status: "draft",
+    version: 3,
+    userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+    updatedAt: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    userEmail: "ed.jones@gmail.com",
+    createdAt: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    timestamp: {
+        seconds: 1742991528,
+        nanoseconds: 633000000
+    },
+    isPermanent: false,
+    originalId: "twUREPJ0nvIhbQXAeHRj"
+},
+{
+  title: "Vocabulary",
+  subtitle: "",
+  id: 51,
+  Question: "T/F: The term 'academic vocabulary' is defined to include which of these words (choose all that apply): ",
+  questionP2: "",
+  answer_type: "ms",
+  option1: "Semantics",
+  option2: "Osmosis",
+  option3: "Coefficient",
+  option4: "Ecosystem",
+  option5: "Sovereign",
+  correctAnswer: 6,
+  correctAnswers: [
+    6
+  ],
+  explanation: "None of these are considered academic vocabulary.\n\n'Academic vocabulary' or 'Tier II words' are considered to be words that are neither commonly used in everyday spoken language, nor are specific to certain academic subjects, but are broadly used across different academic subject domains.",
+    explanation2: "Different major lists of these exist. The first, the EAP foundation list, contains ~3000 words in 570 word families. A second, from the Steinhardt school, contains many more word bases and word forms.\n\nThese words are on neither list.",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  
+podcastEpisode: 
+{
+EpisodeUrl: "https://share.snipd.com/episode/69f80d9d-fb63-414f-ad54-af9b11663fa4",
+description: "'Fifth-grade teacher Sean Morrisey joins us to discuss all things vocabulary! We discuss Tier 2 and 3 words and discuss how you can strategically select words to teach using research-based approaches.",
+podcastStartTime: 
+0,
+title: "Vocabulary Instruction with Sean Morrisey",
+audioUrl: "",
+snipdUrl: "https://share.snipd.com/snip/0b884cdd-0f1a-4569-8e24-831e2304d01f",
+snipdTitle: "Sean Morrissey on Tier I, III, and Tier II Academic vocabularies.",
+snipdDescription: "How do the three differ?"
+},
+  podcastEpisode2: {
+    title: "",
+    audioUrl: "",
+    podcastStartTime: 0,
+    description: "",
+    EpisodeUrl: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      imageUrl: "",
+      year: "2014",
+      author: "Lesaux, Nonie K.; Kieffer, Michael J.; Kelley Joan G.; Harris, Julie Russ",
+      url: "https://journals.sagepub.com/doi/abs/10.3102/0002831214532165",
+      title: "Effects of Academic Vocabulary Instruction for Linguistically Diverse Adolescents: Evidence From a Randomized Field Trial"
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [
+    {
+      url: "https://www.eapfoundation.com/vocab/academic/awllists/",
+      author: "Averil Coxhead / EAP Foundation",
+      description: "The original, 570 word-family list. (2000)",
+      title: "The Academic Word List"
+    },
+    {
+      description: "A second, larger list, compiled somewhat differently, with ~3000 base words. (2013)",
+      url: "https://docs.steinhardt.nyu.edu/pdfs/metrocenter/atn293/pdf/academic_vocabulary_list.pdf",
+      title: "Academic Vocabulary List (AVL)",
+      author: "Mark Davies and Dee Gardner"
+    }
+  ],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "draft",
+  version: 7,
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  originalId: "ycfZOgi6deBy20PqUrxd",
+  createdAt: {
+    seconds: 1744398475,
+    nanoseconds: 405000000
+  },
+  timestamp: {
+    seconds: 1744398475,
+    nanoseconds: 405000000
+  },
+  userEmail: "ed.jones@gmail.com",
+  updatedAt: {
+    seconds: 1744398475,
+    nanoseconds: 405000000
+  },
+  option6: "None of the above",
+  hasNoneOfTheAbove: true,
+  isPermanent: false
+},
+{
+  title: "Over-teaching",
+  subtitle: "",
+  id: 52,
+  Question: "Does the Science of Reading *movement* have an over-teaching problem? ",
+  questionP2: "",
+  answer_type: "mc",
+  option1: "Yes",
+  option2: "No",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 1,
+  explanation: "Yes, according to reading scientist emeritus Mark Seidenberg. \n\nThe problem arises mainly from too much of a good thing. The 'overteaching' happens in many different ways, in different places. Most well-known, perhaps, is the extreme overreaching of phonemic awareness. In other classrooms, it's the overteaching of spelling rules, or of etymology. In still other ELA classrooms, it's the overteaching of 'background knowledge' which is really unrelated to and unnecessary for, general reading abilities. ",
+  explanation2: "We hope that persistent development of these quizzes and the research base they highlight can be of great use in balancing many classrooms and schools. ",
+  videoUrl: "",
+  videoId: "mfeFw1ki2bU",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    audioUrl: "",
+    title: "Episode Title",
+    podcastStartTime: 0,
+    description: "",
+    EpisodeUrl: ""
+  },
+  podcastEpisode2: {
+    description: "",
+    audioUrl: "",
+    EpisodeUrl: "",
+    podcastStartTime: 0,
+    title: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      url: "",
+      year: "",
+      title: "",
+      imageUrl: "",
+      author: ""
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [
+    {
+      author: "",
+      description: "",
+      url: "",
+      title: ""
+    }
+  ],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 3,
+  acceptedAt: {
+    seconds: 1744496808,
+    nanoseconds: 192000000
+  },
+  updatedAt: {
+    seconds: 1744496808,
+    nanoseconds: 192000000
+  },
+  timestamp: {
+    seconds: 1744406878,
+    nanoseconds: 651000000
+  },
+  isPermanent: false,
+  createdAt: {
+    seconds: 1744406878,
+    nanoseconds: 651000000
+  },
+  originalId: "g3BTqgRiLnRQr1PD6Oso",
+  submittedAt: {
+    seconds: 1744406878,
+    nanoseconds: 651000000
+  },
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  userEmail: "ed.jones@gmail.com",
+  correctAnswers: []
+},
+{
+  title: "Upper Elementary / Middle School Vocabulary",
+  subtitle: "",
+  id: 53,
+  Question: "These words should generally be explicitly taught to mastery in (by) what grade?",
+  questionP2: "Characterize, Harmonious, Distinct, Intercede, Aggregate, Ingenious, Beneficial, Approximate.",
+  answer_type: "mc",
+  option1: "4th",
+  option2: "5th",
+  option3: "6th",
+  option4: "7th",
+  option5: "Fifth option",
+  correctAnswer: 2,
+  correctAnswers: [],
+  explanation: "No particular research can say that \"these words should be taught in Grade X\". That said, we have much research and evidence as to what it takes to close the equity gaps. While kids of wealthier educated parents will hear these words, and perhaps read them at home, not all kids will.",
+  explanation2: "Teaching Academic language as early as possible sets up far more kids for later success. ",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    EpisodeUrl: "",
+    title: "Episode Title",
+    audioUrl: "",
+    description: "",
+    podcastStartTime: 0
+  },
+  podcastEpisode2: {
+    title: "",
+    description: "",
+    EpisodeUrl: "",
+    audioUrl: "",
+    podcastStartTime: 0
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [],
+  ref1: "",
+  ref2: "",
+  resources: [
+    {
+      url: "https://docs.google.com/document/d/1T2sqyjqYmZKs9YWlpkK-hpXWx8XXSyszOC8rtqfVJB8/edit?usp=sharing",
+      title: "Gemini Deep Research Report on ",
+      description: "My first time with Gemini Deep research, I spent only ~15 seconds on the prompts. \n\"What does research say that 5th graders should learn, in terms of vocabulary?\n\"Right now, I'm less interested in pedagogy for achieving these goals than I am in research that says what the goals should be, and why.\"",
+      author: "Google Gemini as prompted by Ed Jones on 14 Mar 24"
+    }
+  ],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 1,
+  submittedAt: {
+    seconds: 1742205485,
+    nanoseconds: 312000000
+  },
+  isAnonymous: false,
+  userEmail: "ed.jones@gmail.com",
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  originalId: "qtlG2uLSL0gGymHwvjsG",
+  updatedAt: {
+    seconds: 1742205579,
+    nanoseconds: 481000000
+  },
+  timestamp: {
+    seconds: 1742142987,
+    nanoseconds: 994000000
+  },
+  approvedAt: {
+    seconds: 1742205579,
+    nanoseconds: 481000000
+  },
+  isPermanent: true
+},
+{
+  title: "Upper Elementary: Writing/Assessment",
+  subtitle: "",
+  id: 54,
+  Question: "\nT/F: The TIDE framework for writing about informational text is part of a normed assessment of of fourth graders; reliably predicting success on state and national tests.",
+  questionP2: "",
+  answer_type: "mc",
+  option1: "True",
+  option2: "False",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 1,
+  correctAnswers: [],
+  explanation: "The T.I.D.E. framework is: Topic Sentence, Ideas, Details or detailed examination, Ending or conclusion.",
+  explanation2: "Kids who can score of eight, meaning they have one topic sentence, one ending, and then three ideas, and three details, those students were most likely to be proficient in their informational writing.",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    EpisodeUrl: "https://www.buzzsprout.com/612361/episodes/16728500-s9-e12-explicit-instruction-of-academic-language-with-adrea-truckenmiller",
+    podcastStartTime: 0,
+    title: "Explicit instruction of academic language, with Adrea Truckenmiller, Ph.D.",
+    audioUrl: "",
+    description: ""
+  },
+  podcastEpisode2: {
+    podcastStartTime: 0,
+    description: "",
+    EpisodeUrl: "",
+    audioUrl: "",
+    title: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [],
+  ref1: "",
+  ref2: "",
+  resources: [],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 1,
+  draftId: "HQs0ztAvC87XaoUsjPC7",
+  createdAt: {
+    _methodName: "serverTimestamp"
+  },
+  updatedAt: {
+    seconds: 1742328491,
+    nanoseconds: 223000000
+  },
+  userEmail: "ed.jones@gmail.com",
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  timestamp: {
+    _methodName: "serverTimestamp"
+  },
+  originalId: "T3o4SPhvNNDfpBhx2r8d",
+  isPermanent: false
+},
+{
+  title: "Intervention Decisions--Dyslexia",
+  subtitle: "",
+  id: 55,
+  Question: "T/F: Decisions about providing intervention for dyslexia should consider the child's IQ.",
+  questionP2: "That is, since we cannot know a child's reading capacity directly, we wait and use a discrepancy assessment to determine if their reading abilities diverge too greatly from their intelligence expectations.",
+  answer_type: "mc",
+  option1: "True",
+  option2: "False",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 2,
+  correctAnswers: [],
+  explanation: "Completely false. The 'Discrepancy model' has been roundly debunked.",
+  explanation2: "",
+  videoUrl: "",
+  videoId: "96eGjuKRZMs",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    audioUrl: "",
+    EpisodeUrl: "",
+    title: "Episode Title",
+    description: "",
+    podcastStartTime: 0
+  },
+  podcastEpisode2: {
+    podcastStartTime: 0,
+    EpisodeUrl: "",
+    description: "",
+    title: "",
+    audioUrl: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      url: "https://pubmed.ncbi.nlm.nih.gov/31162463/",
+      year: "2018",
+      title: "A Misuse of IQ Scores: Using the Dual Discrepancy/Consistency Model for Identifying Specific Learning Disabilities",
+      imageUrl: "",
+      author: "A Alexander Beaujean, Nicholas F Benson, Ryan J McGill, Stefan C Dombrowski"
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 8,
+  draftId: "Ki4NALklytBYhlHbJDSZ",
+  approvedAt: {
+    seconds: 1744651288,
+    nanoseconds: 463000000
+  },
+  userEmail: "ed.jones@gmail.com",
+  modelValue: "Ki4NALklytBYhlHbJDSZ",
+  isPermanent: false,
+  updatedAt: {
+    seconds: 1744651288,
+    nanoseconds: 463000000
+  },
+  createdAt: {
+    seconds: 1744288825,
+    nanoseconds: 192000000
+  },
+  timestamp: {
+    seconds: 1744650212,
+    nanoseconds: 341000000
+  },
+  originalId: "Ki4NALklytBYhlHbJDSZ",
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  submittedAt: {
+    seconds: 1744650212,
+    nanoseconds: 341000000
+  },
+  acceptedAt: {
+    seconds: 1744650250,
+    nanoseconds: 109000000
+  }
+},
+{
+  title: "Working Memory",
+  subtitle: "",
+  id: 56,
+  Question: "Which of these is a better predictor (among young children) of future academic success?",
+  questionP2: "",
+  answer_type: "mc",
+  option1: "IQ",
+  option2: "Working memory",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 2,
+  correctAnswers: [],
+  explanation: "Working memory better predicts academic performance than IQ. ",
+  explanation2: "The seminal study showing this particularly focused on \n- Phonological Loop (Verbal Short-Term Memory). Children were assessed using tasks like Digit Recall and Word Recall, where participants repeated sequences of numbers or words.​\n- Central Executive (Verbal Working Memory). Children were evaluated through tasks such as Backward Digit Recall and Listening Recall, which required both processing and storage of information.​\n\nTasks involving the visuospatial sketchpad were not part of this study.",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    podcastStartTime: 0,
+    EpisodeUrl: "",
+    audioUrl: "",
+    title: "Episode Title",
+    description: ""
+  },
+  podcastEpisode2: {
+    description: "",
+    audioUrl: "",
+    EpisodeUrl: "",
+    podcastStartTime: 0,
+    title: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      imageUrl: "",
+      title: "Investigating the predictive roles of working memory and IQ in academic attainment",
+      year: "2010",
+      author: "Alloway, TP & Alloway, RG",
+      url: "https://www.research.ed.ac.uk/en/publications/investigating-the-predictive-roles-of-working-memory-and-iq-in-ac"
+    },
+    {
+      title: "",
+      author: "",
+      url: "",
+      imageUrl: "",
+      year: ""
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "pending",
+  version: 3,
+  draftId: "uimfZF9RTDLyr8Hy8XPR",
+  updatedAt: {
+    seconds: 1744977487,
+    nanoseconds: 636000000
+  },
+  userEmail: "ed.jones@gmail.com",
+  submittedAt: {
+    seconds: 1744978661,
+    nanoseconds: 661000000
+  },
+  createdAt: {
+    seconds: 1744977487,
+    nanoseconds: 636000000
+  },
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  timestamp: {
+    seconds: 1744977487,
+    nanoseconds: 636000000
+  },
+  isPermanent: false,
+  originalId: "uimfZF9RTDLyr8Hy8XPR",
+  modelValue: "uimfZF9RTDLyr8Hy8XPR"
+},
+{
+  title: "Working Memory",
+  subtitle: "",
+  id: 57,
+  Question: "T/F: Working memory capacity can be expanded or built up in young children.",
+  questionP2: "",
+  answer_type: "mc",
+  option1: "True",
+  option2: "False",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 2,
+  explanation: "False. While working memory capacity has been shown to be expanded in many studies, these effects were always limited to the short term, to the specific tasks being practiced.",
+  explanation2: "The implication is that we must design classrooms schools, and curricula accordingly. We reliably teach children at the lower range of working memory by:\n- Eliminating distractions, \n- making the instructional targets clear and crisp, \n- insuring that learners have the prerequisite knowledge and skills, and \n- providing timely (and precision) extra dosage to those who need it.",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    podcastStartTime: 0,
+    description: "",
+    title: "Episode Title",
+    audioUrl: "",
+    EpisodeUrl: ""
+  },
+  podcastEpisode2: {
+    description: "",
+    title: "",
+    podcastStartTime: 0,
+    EpisodeUrl: "",
+    audioUrl: ""
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      year: "2013",
+      title: "Is working memory training effective? A meta-analytic review.",
+      author: "Melby-Lervåg, Monica,Hulme, Charles",
+      imageUrl: "",
+      url: "https://pubmed.ncbi.nlm.nih.gov/31939109/"
+    },
+    {
+      year: "",
+      title: "",
+      imageUrl: "",
+      author: "",
+      url: ""
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 4,
+  draftId: "YgHnVjhBUQfosYBQL2A5",
+  updatedAt: {
+    seconds: 1744979415,
+    nanoseconds: 492000000
+  },
+  modelValue: "YgHnVjhBUQfosYBQL2A5",
+  originalId: "YgHnVjhBUQfosYBQL2A5",
+  userEmail: "ed.jones@gmail.com",
+  timestamp: {
+    seconds: 1744978468,
+    nanoseconds: 328000000
+  },
+  submittedAt: {
+    seconds: 1744979375,
+    nanoseconds: 836000000
+  },
+  correctAnswers: [],
+  acceptedAt: {
+    seconds: 1744979393,
+    nanoseconds: 915000000
+  },
+  approvedAt: {
+    seconds: 1744979415,
+    nanoseconds: 492000000
+  },
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  createdAt: {
+    seconds: 1744978468,
+    nanoseconds: 328000000
+  },
+  isPermanent: false
+},
+{
+  title: "Why Care? Teachers' Frustrations",
+  subtitle: "",
+  id: 58,
+  Question: "T/F: Teachers are as frustrated with popular practices as anyone.",
+  questionP2: "",
+  answer_type: "mc",
+  option1: "True",
+  option2: "False",
+  option3: "Third option",
+  option4: "Fourth option",
+  option5: "Fifth option",
+  correctAnswer: 1,
+  explanation: "True! Teachers regularly sense that their students need more than they can give them. ",
+  explanation2: "In this podcast, a teacher lays out how she thought she was doing well, until she realized she was passing on to her students' next teacher no meaningful information about their instructional progress or needs. \n\nAnd until her own child really struggled to read.",
+  videoUrl: "",
+  videoId: "",
+  image: "",
+  imageUrl: "",
+  imageAltText: "",
+  podcastEpisode: {
+    snipdDescription: "A teacher describes how she was a Readers Workshop trainer…until it failed her own son. ",
+    description: "",
+      EpisodeUrl: "https://podcasts.apple.com/us/podcast/why-are-teachers-so-quick-to-claim-dyslexia-is-bad-behavior/id1678869023?i=1000705153495",
+      title: "Why Are Teachers So Quick to Claim Dyslexia is Bad Behavior?",
+      snipdUrl: "https://share.snipd.com/snip/41bda6dd-3239-454b-aa72-909a7a392b46",
+    audioUrl: "",
+    podcastStartTime: 0,
+    snipdTitle: "Why Are Teachers So Quick to Claim Dyslexia is Bad Behavior? "
+  },
+  podcastEpisode2: {
+    title: "",
+    audioUrl: "",
+    EpisodeUrl: "",
+    description: "",
+    podcastStartTime: 0
+  },
+  cautionLevel: "",
+  caution: "",
+  citations: [
+    {
+      title: "",
+      author: "",
+      url: "",
+      year: "",
+      imageUrl: ""
+    }
+  ],
+  ref1: "",
+  ref2: "",
+  resources: [
+    {
+      text: "90% of surveyed teachers said they were not fully prepared to teach reading when they left their training programs.",
+      title: "Early Reading Instruction: Results of a National Survey",
+      author: "EdWeek Research Center",
+      url: "https://epe.brightspotcdn.com/1b/80/706eba6246599174b0199ac1f3b5/ed-week-reading-instruction-survey-report-final-1.24.20.pdf",
+      description: ""
+    }
+  ],
+  closingText: "",
+  closingText2: "",
+  modal: "",
+  status: "approved",
+  version: 1,
+  userEmail: "ed.jones@gmail.com",
+  updatedAt: {
+    _methodName: "serverTimestamp"
+  },
+  userId: "YcEgDO0BJQOVPuRZA9eMbvec4ty1",
+  timestamp: {
+    _methodName: "serverTimestamp"
+  },
+  isPermanent: false,
+  correctAnswers: [],
+  submittedAt: {
+    _methodName: "serverTimestamp"
+  },
+  draftId: "MwXtZL4MUf2Wk90z31T1"
 },
 {
     title: "Learning Science",
@@ -1585,13 +2768,6 @@ export const quizEntries = [{
     },
     cautionLevel: "",
     caution: "",
-    citations: [{
-        title: "",
-        author: "",
-        url: "",
-        year: "",
-        imageUrl: "",
-    }],
     ref1: "",
     ref2: "",
     resources: [{
diff --git a/src/data/quizSets.js b/src/data/quizSets.js
index 755c89a..d47de59 100644
--- a/src/data/quizSets.js
+++ b/src/data/quizSets.js
@@ -1,106 +1,146 @@
-export const quizSets = [{
-    setName: "expert",
-    basicMode: false,
-    items: [2, 1, 5, 4, 6, 15, 16, 17, 18, 19]
-},
-{
-    setName: "general",
-    basicMode: true,
-    items: [10, 22, 11, 14, 21, 4, 6, 12, 13, 3]
-},
-{
-    setName: "kinder-first",
-    basicMode: true,
-    items: [23, 42, 41, 24, 26, 25, 11]
-},
-{
-    setName: "admin",
-    basicMode: true,
-    items: [14, 30, 28, 18, 29, 32, 16, 27, 31]
-},
-{
-    setName: "test-expert",
-    basicMode: false,
-    inProgress: true,
-    items: [2, 1, 5]
-},
-{
-    setName: "Why Care?",
-    basicMode: true,
-    items: [34, 35, 37, 36, 38]
-},
-{
-    setName: "Learning Science",
-    basicMode: true,
-    items: [42],
-    inProgress: true,
-    podcastEpisodes: [{
-        title: "Why the science of reading needs the science of learning",
-        EpisodeUrl: "https://lnns.co/njyfzcC9hg0",
-        audioUrl: "/audio/geiger.mp3",
-        description: "'The science of reading tells us WHAT to teach... The science of learning tells us HOW to teach...' - Anna Geiger",
-        podcastStartTime: 0,
+export const quizSets = [
+    {
+        setName: "Basic",
+        basicMode: true,
+        items: [10, 22, 11, 14, 21, 4, 6, 12, 13, 3],
+        displayLevel: 1,
+        displayColumn: 1,
+        children: []
     },
     {
-        title: "S4E18: Blake Harvard on Attention and Memory Constraints",
-        EpisodeUrl: "https://educationrickshaw.com/2025/01/14/s4e18-blake-harvard-on-attention-and-memory-constraints/",
-        audioUrl: "https://educationrickshaw.com/wp-content/uploads/2025/01/blake-final-edit-1.mp3",
-        description: "A quick overview of the science of reading and how it relates to attention and memory constraints.",
-        podcastStartTime: 173,
-    }]
-},
-{
-    setName: "Legislation and Policy",
-    basicMode: true,
-    items: [40],
-    inProgress: true,
-    resource: {
-        title: "Science of Reading (SoR) Legislation and Implementation State Scan ",
-        url: "https://learning.ccsso.org/science-of-reading-legislation-and-implementation-state-scan",
-        description: "This guide provides a comprehensive overview of the science of reading, including its key principles, research findings, and implications for education policy and practice.",
-        resourceType: "PDF",
-        resourceUrl: "https://www.education.gov.au/sites/default/files/documents/2024/09/19/science-of-reading-guide-for-educators.pdf",
+        setName: "expert",
+        basicMode: false,
+        items: [2, 1, 5, 4, 6, 15, 16, 17, 18, 19],
+        displayLevel: 1,
+        displayColumn: 1,
+        children: []
     },
-    podcastEpisodes: [{
-        title: "Why the science of reading needs the science of learning",
-        EpisodeUrl: "https://lnns.co/njyfzcC9hg0",
-        audioUrl: "/audio/geiger.mp3",
-        description: "'The science of reading tells us WHAT to teach... The science of learning tells us HOW to teach...' - Anna Geiger",
-        podcastStartTime: 0,
-    }]
-},
-{
-    setName: "3rd-5th grade",
-    basicMode: true,
-    items: [41],
-    inProgress: true,
-    podcastEpisodes: [{
-        title: "",
-        EpisodeUrl: "",
-        audioUrl: "",
-        description: "",
-        podcastStartTime: 0,
-    }]
-},
-{
-    setName: "Repeated Reading",
-    basicMode: true,
-    items: [41],
-    inProgress: true,
-    inProgressText: "We put this here to show the deeper areas the quizzes should go in to. Do you know what content belongs here?",
-    resource: {
-        title: "",
-        url: "https://www.facebook.com/groups/704498996666615/permalink/2098428430606991/?mibextid=wwXIfr&rdid=1wqUY6YtQWPFMeu8",
-        description: "'How do you guys do repeated reading? I was doing the UFLI passages and...'",
-        resourceType: "Facebook Post",
-        resourceUrl: "https://www.facebook.com/groups/704498996666615/permalink/2098428430606991/",
+    {
+        setName: "New Items",
+        beta: true,
+        basicMode: true,
+        items: [43, 52,44, 46, 47, 48, 49, 50, 51, 53, 54, 55, 56, 57],
+        displayLevel: 2,
+        displayColumn: 1,
+        children: []
     },
-    podcastEpisodes: [{
-        title: "",
-        EpisodeUrl: "",
-        audioUrl: "",
-        description: "",
-        podcastStartTime: 0,
-    }]
-}
+    {
+        setName: "kinder-first",
+        basicMode: true,
+        items: [23, 42, 46, 24, 26, 25, 11, 45],
+        displayLevel: 1,
+        displayColumn: 2,
+        children: []
+    },
+    {
+        setName: "admin",
+        basicMode: true,
+        items: [14, 30, 28, 18, 29, 32, 16, 27, 31],
+        displayLevel: 1,
+        displayColumn: 3,
+        children: []
+    },
+    {
+        setName: "test-expert",
+        basicMode: false,
+        inProgress: true,
+        items: [2, 1, 5],
+        displayLevel: 3,
+        displayColumn: 1,
+        display: "debug",
+        children: []
+    },
+    {
+        setName: "Why Care?",
+        basicMode: true,
+        items: [34, 35, 37, 36, 38, 58],
+        displayLevel: 0,
+        children: []
+    },
+    {
+        setName: "Learning Science",
+        basicMode: true,
+        items: [42],
+        inProgress: true,
+        displayLevel: 2,
+        displayColumn: 1,
+        children: [],
+        podcastEpisodes: [{
+            title: "Why the science of reading needs the science of learning",
+            EpisodeUrl: "https://lnns.co/njyfzcC9hg0",
+            audioUrl: "/audio/geiger.mp3",
+            description: "'The science of reading tells us WHAT to teach... The science of learning tells us HOW to teach...' - Anna Geiger",
+            podcastStartTime: 0,
+        },
+        {
+            title: "S4E18: Blake Harvard on Attention and Memory Constraints",
+            EpisodeUrl: "https://educationrickshaw.com/2025/01/14/s4e18-blake-harvard-on-attention-and-memory-constraints/",
+            audioUrl: "https://educationrickshaw.com/wp-content/uploads/2025/01/blake-final-edit-1.mp3",
+            description: "A quick overview of the science of reading and how it relates to attention and memory constraints.",
+            podcastStartTime: 173,
+        }]
+    },
+    {
+        setName: "Legislation and Policy",
+        basicMode: true,
+        items: [40],
+        inProgress: true,
+        displayLevel: 1,
+        displayColumn: 3,
+        children: [],
+        resource: {
+            title: "Science of Reading (SoR) Legislation and Implementation State Scan ",
+            url: "https://learning.ccsso.org/science-of-reading-legislation-and-implementation-state-scan",
+            description: "This guide provides a comprehensive overview of the science of reading, including its key principles, research findings, and implications for education policy and practice.",
+            resourceType: "PDF",
+            resourceUrl: "https://www.education.gov.au/sites/default/files/documents/2024/09/19/science-of-reading-guide-for-educators.pdf",
+        },
+        podcastEpisodes: [{
+            title: "Why the science of reading needs the science of learning",
+            EpisodeUrl: "https://lnns.co/njyfzcC9hg0",
+            audioUrl: "/audio/geiger.mp3",
+            description: "'The science of reading tells us WHAT to teach... The science of learning tells us HOW to teach...' - Anna Geiger",
+            podcastStartTime: 0,
+        }]
+    },
+    {
+        setName: "3rd-5th grade",
+        basicMode: true,
+        items: [41],
+        inProgress: true,
+        displayLevel: 1,
+        displayColumn: 2,
+        children: [],
+        podcastEpisodes: [{
+            title: "",
+            EpisodeUrl: "",
+            audioUrl: "",
+            description: "",
+            podcastStartTime: 0,
+        }]
+    },
+    {
+        setName: "Repeated Reading",
+        basicMode: true,
+        items: [41],
+        inProgress: true,
+        displayLevel: 2,
+        displayColumn: 2,
+        children: [],
+        inProgressText: "We put this here to show the deeper areas the quizzes should go in to. Do you know what content belongs here?",
+        resource: {
+            title: "",
+            url: "https://www.facebook.com/groups/704498996666615/permalink/2098428430606991/?mibextid=wwXIfr&rdid=1wqUY6YtQWPFMeu8",
+            description: "'How do you guys do repeated reading? I was doing the UFLI passages and...'",
+            resourceType: "Facebook Post",
+            resourceUrl: "https://www.facebook.com/groups/704498996666615/permalink/2098428430606991/",
+        },
+        podcastEpisodes: [{
+            title: "",
+            EpisodeUrl: "",
+            audioUrl: "",
+            description: "",
+            podcastStartTime: 0,
+        }]
+    }
 ];
diff --git a/src/data/syllabification.txt b/src/data/syllabification.txt
new file mode 100644
index 0000000..d57a68b
--- /dev/null
+++ b/src/data/syllabification.txt
@@ -0,0 +1,24 @@
+Lyn Stone
+February 26 at 8:41 PM  · 
+"Syllabification" - another hangover from weird phonics practices that can't see beyond grapheme-phoneme correspondences:
+I received a text the other day from a lovely friend and colleague. She asked, "How do you syllabify 'ordinary'?"
+Well I don't. 
+Here is my response:
+“How would you syllabify X word? This person says you should do it this way and this person says you should do it that way and this person…”
+Is that not a red flag to you? If adults can’t even give you a straight answer, what hope do kids have?
+What is the end goal here? Pronunciation in a single unit of time or placement in LTM?
+Maybe ask better questions such as:
+What are the significant elements in this word? What other words share those elements?
+I’ll do your example word for you, but only if you promise to ask better questions next time and start using the Online Etymology Dictionary.
+Ordinary:
+The ordin- part denotes “customary, regular, usual, orderly,”
+The -ary part is an adjective and noun-forming suffix
+So where else do you see these parts?
+ordin:
+ordinal, ordinance, coordinate, inordinate, ordination, subordinate, inordinate, extraordinary
+-ary:
+primary, secondary, binary, dietary, honorary, literary, salivary, customary, imaginary etc.
+Who cares where you “syllabify” these parts? What’s that got to do with anything? 
+You might say that we need to teach kids to pronounce those words when reading. Sure. But a significant number of those words are already in their oral lexicon. They already know how to pronounce them, they need to now orthographically map them. 
+And the words they don’t know how to pronounce, well they need to understand their meaning, regardless. We all have words we can understand in print that we don’t have the 100% accurate pronunciation for. Why apply dodgy “syllabification” rules to these and use up the cognitive real estate we could use for meaning and schema-building instead? 
+Besides, there’s this concept of ‘set for variability’ that takes care of alternative pronunciations. Look it up, you’ll love it.
diff --git a/src/firebase.js b/src/firebase.js
index 35f64f7..a251150 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -17,6 +17,7 @@ const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
 
+// Initialize Github provider
 const githubProvider = new GithubAuthProvider();
 
 export const saveQuizAttempt = async (quizId, userAnswers) => {
diff --git a/src/main.js b/src/main.js
index ace3543..dadc346 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,6 +31,14 @@ import App from './App.vue'
 // 6. Setup
 inject();
 
+// Add global error handler for cross-origin issues
+window.addEventListener('error', (event) => {
+    if (event.message && event.message.includes('cross-origin')) {
+        console.warn('Cross-origin error detected:', event.message);
+        event.preventDefault(); // Prevent the error from propagating
+    }
+});
+
 library.add(
     faUserSecret,
     faCircleQuestion,
diff --git a/src/router/guards.js b/src/router/guards.js
index 022840a..37c5c05 100644
--- a/src/router/guards.js
+++ b/src/router/guards.js
@@ -2,20 +2,72 @@ import { useAuthStore } from '../stores/authStore';
 
 export async function requireAuth(to, from, next) {
   const authStore = useAuthStore();
-  
-  // Wait for auth state to be initialized
-  if (authStore.loading) {
+
+  try {
+    // Always wait for auth state to be initialized
     await authStore.init();
-  }
 
-  // Check if user can edit (non-anonymous user)
-  if (!authStore.canEdit) {
-    // Redirect to login page with return url
-    next({
+    // Log auth state for debugging
+    console.log('Auth guard state:', {
+      loading: authStore.loading,
+      isAuthenticated: authStore.isAuthenticated,
+      canEdit: authStore.canEdit,
+      user: authStore.user?.email,
+      targetPath: to.fullPath
+    });
+
+    // Check if user can edit (non-anonymous user)
+    if (!authStore.canEdit) {
+      console.log('Auth guard: User cannot edit, redirecting to login');
+      // Redirect to login page with return url
+      return next({
+        path: '/login',
+        query: { redirect: to.fullPath }
+      });
+    }
+
+    // User can edit, proceed
+    console.log('Auth guard: User can edit, proceeding to:', to.fullPath);
+    return next();
+  } catch (error) {
+    console.error('Auth guard error:', error);
+    // On error, redirect to login
+    return next({
       path: '/login',
       query: { redirect: to.fullPath }
     });
-  } else {
-    next();
+  }
+}
+
+export async function requireAdmin(to, from, next) {
+  const authStore = useAuthStore();
+
+  try {
+    // Always wait for auth state to be initialized
+    await authStore.init();
+
+    // Log auth state for debugging
+    console.log('Admin guard state:', {
+      loading: authStore.loading,
+      isAuthenticated: authStore.isAuthenticated,
+      isAdmin: authStore.isAdmin,
+      user: authStore.user?.email,
+      targetPath: to.fullPath
+    });
+
+    // Check if user is admin
+    if (!authStore.isAdmin) {
+      console.log('Admin guard: User is not admin, redirecting to home');
+      // Redirect to home page
+      return next({ path: '/' });
+    }
+
+    // User is admin, proceed
+    console.log('Admin guard: User is admin, proceeding to:', to.fullPath);
+    return next();
+  } catch (error) {
+    console.error('Admin guard error:', error);
+    // On error, redirect to home
+    return next({ path: '/' });
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index dbaeb89..bbf83e6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,26 +1,29 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { requireAuth } from './guards';
+import { requireAuth, requireAdmin } from './guards';
 import LoginForm from '../components/auth/LoginForm.vue';
 import Home from '../components/Home.vue';
-import NewItem from '../components/NewItem.vue';
 import GitHubIssues from '../components/GitHubIssues.vue';
 import QuizSetView from '../views/QuizSetView.vue';
+import QuizItemEditor from '../views/QuizItemEditor.vue';
+import QuizItemSelectorView from '../views/QuizItemSelectorView.vue';
+import AdminPage from '../views/AdminPage.vue';
+import AboutView from '../views/AboutView.vue';
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
   {
     path: '/login',
     name: 'Login',
     component: LoginForm
   },
   {
-    path: '/new-item',
-    name: 'NewItem',
-    component: NewItem
+    path: '/quiz-item-editor/:id?',
+    name: 'quizItemEditor',
+    component: QuizItemEditor,
+    beforeEnter: requireAuth,
+    props: route => ({
+      itemId: route.params.id,
+      isNew: route.query.new === 'true'
+    })
   },
   {
     path: '/quiz/:id',
@@ -37,7 +40,29 @@ const routes = [
     name: 'QuizSetView',
     component: QuizSetView
   },
-  // Catch all route for 404
+  {
+    path: '/about',
+    name: 'About',
+    component: AboutView
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+    component: AdminPage,
+    beforeEnter: requireAdmin
+  },
+  {
+    path: '/quiz-item-selector',
+    name: 'quizItemSelector',
+    component: QuizItemSelectorView,
+    meta: { requiresAuth: true }
+  },
+  // Catch all route for 404 - must be last
   {
     path: '/:pathMatch(.*)*',
     redirect: '/'
@@ -49,4 +74,33 @@ const router = createRouter({
   routes
 });
 
+// Add navigation debugging
+router.beforeEach((to, from, next) => {
+  console.log('Global navigation guard:', {
+    from: from.fullPath,
+    to: to.fullPath,
+    timestamp: Date.now()
+  });
+  next();
+});
+
+// Prevent immediate redirects to home
+router.beforeEach((to, from, next) => {
+  // If we're navigating from a protected route to home without user interaction
+  if (from.matched.some(record => record.beforeEnter === requireAuth) &&
+    to.path === '/' &&
+    // Check if this is happening right after a successful navigation
+    Date.now() - (window._lastSuccessfulNav || 0) < 1000) {
+    console.log('Preventing automatic redirect to home');
+    return next(false);
+  }
+  next();
+});
+
+// Track successful navigations
+router.afterEach((to) => {
+  window._lastSuccessfulNav = Date.now();
+  console.log('Navigation completed successfully to:', to.fullPath);
+});
+
 export default router;
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index 34f0622..74b4dde 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { auth, githubProvider } from '../firebase';
+import { auth, githubProvider, db } from '../firebase';
 import {
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
@@ -7,27 +7,38 @@ import {
   GoogleAuthProvider,
   signInAnonymously,
   signOut as firebaseSignOut,
-  onAuthStateChanged
+  onAuthStateChanged,
+  updateProfile
 } from 'firebase/auth';
+import { doc, setDoc, updateDoc, getDoc } from 'firebase/firestore';
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     user: null,
     loading: true,
-    error: null
+    error: null,
+    isAdminUser: false
   }),
 
   getters: {
     isAuthenticated: (state) => !!state.user,
     isAnonymous: (state) => state.user?.isAnonymous ?? true,
     canEdit: (state) => state.user && !state.user.isAnonymous,
+    isAdmin: (state) => state.isAdminUser
   },
 
   actions: {
     async init() {
       return new Promise((resolve) => {
-        onAuthStateChanged(auth, (user) => {
+        onAuthStateChanged(auth, async (user) => {
           this.user = user;
+          if (user && !user.isAnonymous) {
+            // Check admin status
+            const userDoc = await getDoc(doc(db, 'users', user.uid));
+            this.isAdminUser = userDoc.exists() && userDoc.data().isAdmin === true;
+          } else {
+            this.isAdminUser = false;
+          }
           this.loading = false;
           resolve(user);
         });
@@ -48,12 +59,22 @@ export const useAuthStore = defineStore('auth', {
       }
     },
 
-    async registerWithEmail(email, password) {
+    async registerWithEmail(email, password, username) {
       this.loading = true;
       this.error = null;
       try {
         const result = await createUserWithEmailAndPassword(auth, email, password);
         this.user = result.user;
+        await updateProfile(this.user, {
+          displayName: username
+        });
+
+        // Add user profile to Firestore
+        await setDoc(doc(db, 'users', this.user.uid), {
+          username: username,
+          email: email,
+          createdAt: new Date()
+        });
       } catch (error) {
         this.error = error.message;
         throw error;
@@ -121,6 +142,36 @@ export const useAuthStore = defineStore('auth', {
 
     setUser(user) {
       this.user = user;
+    },
+
+    async updateUsername(username) {
+      this.loading = true;
+      this.error = null;
+      try {
+        if (!this.user) throw new Error('No user logged in');
+
+        // Update Firebase Auth profile
+        await updateProfile(this.user, {
+          displayName: username
+        });
+
+        // Update or create Firestore user document
+        const userRef = doc(db, 'users', this.user.uid);
+        await setDoc(userRef, {
+          username: username,
+          email: this.user.email,
+          updatedAt: new Date(),
+          createdAt: new Date() // Only used if document is being created
+        }, { merge: true }); // Use merge to preserve existing fields if document exists
+
+        // Update local state
+        this.user = auth.currentUser;
+      } catch (error) {
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.loading = false;
+      }
     }
   }
 });
diff --git a/src/stores/discussStore.js b/src/stores/discussStore.js
new file mode 100644
index 0000000..ac95921
--- /dev/null
+++ b/src/stores/discussStore.js
@@ -0,0 +1,145 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { db } from '../firebase';
+import { collection, query, orderBy, limit, addDoc, onSnapshot, serverTimestamp, where } from 'firebase/firestore';
+import { useAuthStore } from './authStore';
+
+export const useDiscussStore = defineStore('discuss', () => {
+    const messages = ref({});  // Map of quizSetId to messages
+    const unreadCount = ref({});  // Map of quizSetId to unread count
+    const lastReadTimestamp = ref({});  // Map of quizSetId to last read timestamp
+    const isLoading = ref({});
+    const error = ref(null);
+    const subscriptions = ref({});  // Map of quizSetId to unsubscribe function
+
+    const authStore = useAuthStore();
+
+    // Get current user's display name
+    const getUserDisplayName = () => {
+        if (!authStore.user) return 'Anonymous';
+        if (authStore.user.displayName) return authStore.user.displayName;
+        return authStore.user.email ? authStore.user.email.split('@')[0] : 'Anonymous';
+    };
+
+    // Subscribe to messages for a specific quiz set
+    const subscribeToMessages = async (quizSetId) => {
+        try {
+            console.log(`Creating subscription for quiz set: ${quizSetId}`);
+
+            // Initialize state for this quiz set
+            messages[quizSetId] = [];
+            isLoading[quizSetId] = true;
+            error.value = null;
+            unreadCount[quizSetId] = 0;
+            lastReadTimestamp[quizSetId] = Date.now();
+
+            // Create query based on quiz set ID
+            const q = query(
+                collection(db, 'discussions'),
+                where('quizSetId', '==', quizSetId === '_general' ? 'general' : quizSetId),
+                orderBy('timestamp', 'asc'),
+                limit(100)
+            );
+
+            // Subscribe to messages
+            const unsubscribe = onSnapshot(q, (snapshot) => {
+                console.log(`Received update for quiz set: ${quizSetId}`);
+                messages[quizSetId] = snapshot.docs.map(doc => ({
+                    id: doc.id,
+                    ...doc.data()
+                }));
+
+                // Update unread count
+                updateUnreadCount(quizSetId);
+                isLoading[quizSetId] = false;
+            }, (error) => {
+                console.error(`Error in subscription for quiz set ${quizSetId}:`, error);
+                error.value = error;
+                isLoading[quizSetId] = false;
+            });
+
+            // Store unsubscribe function
+            subscriptions[quizSetId] = unsubscribe;
+            console.log(`Subscription created for quiz set: ${quizSetId}`);
+
+        } catch (err) {
+            console.error(`Error setting up subscription for quiz set ${quizSetId}:`, err);
+            error.value = err;
+            isLoading[quizSetId] = false;
+        }
+    };
+
+    // Send a new message
+    const sendMessage = async (messageData) => {
+        try {
+            console.log('Sending message:', messageData);
+            const { quizSetId, text, userId, userName } = messageData;
+
+            const message = {
+                quizSetId: quizSetId === '_general' ? 'general' : quizSetId,
+                text,
+                userId,
+                userName,
+                timestamp: serverTimestamp()
+            };
+
+            await addDoc(collection(db, 'discussions'), message);
+            console.log('Message sent successfully');
+        } catch (err) {
+            console.error('Error sending message:', err);
+            throw err;
+        }
+    };
+
+    // Update unread count for a specific quiz set
+    const updateUnreadCount = (quizSetId) => {
+        if (!lastReadTimestamp.value[quizSetId]) {
+            lastReadTimestamp.value[quizSetId] = new Date();
+            unreadCount.value[quizSetId] = 0;
+            return;
+        }
+
+        unreadCount.value[quizSetId] = (messages.value[quizSetId] || []).filter(
+            msg => msg.timestamp > lastReadTimestamp.value[quizSetId] && msg.userId !== authStore.user?.uid
+        ).length;
+    };
+
+    // Mark messages as read for a specific quiz set
+    const markAsRead = (quizSetId) => {
+        lastReadTimestamp.value[quizSetId] = new Date();
+        unreadCount.value[quizSetId] = 0;
+    };
+
+    // Get total unread count across all quiz sets
+    const totalUnreadCount = computed(() => {
+        return Object.values(unreadCount.value).reduce((sum, count) => sum + count, 0);
+    });
+
+    // Cleanup on unmount
+    const cleanup = (quizSetId) => {
+        if (quizSetId) {
+            if (subscriptions.value[quizSetId]) {
+                console.log('Cleaning up subscription for quiz set:', quizSetId);
+                subscriptions.value[quizSetId]();
+                delete subscriptions.value[quizSetId];
+            }
+        } else {
+            // Cleanup all subscriptions
+            console.log('Cleaning up all subscriptions');
+            Object.values(subscriptions.value).forEach(unsub => unsub?.());
+            subscriptions.value = {};
+        }
+    };
+
+    return {
+        messages,
+        unreadCount,
+        isLoading,
+        error,
+        sendMessage,
+        subscribeToMessages,
+        markAsRead,
+        cleanup,
+        totalUnreadCount
+    };
+}); 
\ No newline at end of file
diff --git a/src/stores/quizStore.js b/src/stores/quizStore.js
index ffa514c..ab0ffe2 100644
--- a/src/stores/quizStore.js
+++ b/src/stores/quizStore.js
@@ -9,10 +9,16 @@ import {
     setDoc,
     query,
     where,
-    getDocs
+    getDocs,
+    or,
+    orderBy,
+    limit,
+    updateDoc,
+    getDoc
 } from 'firebase/firestore';
 import { useAuthStore } from './authStore';
 import { useProgressStore } from './progressStore';
+import { quizEntries } from '../data/quiz-items';
 
 export const quizStore = defineStore('quiz', {
     state: () => ({
@@ -24,6 +30,7 @@ export const quizStore = defineStore('quiz', {
         draftQuizItems: [],
         draftQuizItemsLoading: false,
         draftQuizItemsError: null,
+        lastSavedDraftQuizEntry: null,
         draftQuizEntry: {
             title: '',
             subtitle: '',
@@ -67,7 +74,7 @@ export const quizStore = defineStore('quiz', {
             closingText2: '',
             modal: '',
             status: 'draft',
-            id: null
+            version: 1
         },
         saveStatus: {
             message: '',
@@ -105,6 +112,34 @@ export const quizStore = defineStore('quiz', {
             this.simpleAnswers[index] = selectedAnswer;
 
             if (Array.isArray(selectedAnswer)) {
+                // For multiple select questions
+                if (quizEntry.answer_type === 'ms') {
+                    const correctAnswers = quizEntry.correctAnswers || [];
+                    const isCorrect = selectedAnswer.length === correctAnswers.length &&
+                        selectedAnswer.every(answer => correctAnswers.includes(answer));
+
+                    this.userAnswers[index] = {
+                        selected: selectedAnswer,
+                        correct: isCorrect,
+                        questionId: questionId || '',
+                        questionTitle: questionTitle || '',
+                        timestamp: new Date().toISOString()
+                    };
+
+                    if (!isCorrect && !this.incorrectQuestions.some(q => q.id === questionId)) {
+                        const chosenOptionsText = selectedAnswer
+                            .map(answer => quizEntry[`option${answer}`])
+                            .filter(Boolean)
+                            .join(', ');
+                        this.incorrectQuestions.push({
+                            id: questionId || '',
+                            title: questionTitle || '',
+                            chosenAnswer: chosenOptionsText.substring(0, 100) || ''
+                        });
+                    }
+                    return;
+                }
+                // For sortable list answers
                 console.log('Sortable list answer - skipping correctness check');
                 this.userAnswers[index] = {
                     selected: selectedAnswer,
@@ -115,6 +150,27 @@ export const quizStore = defineStore('quiz', {
                 return;
             }
 
+            // For short answer questions
+            if (quizEntry.answer_type === 'short_answer') {
+                const isCorrect = correctAnswer === true; // Use the correctAnswer parameter as the correctness flag
+                this.userAnswers[index] = {
+                    selected: selectedAnswer,
+                    correct: isCorrect,
+                    questionId: questionId || '',
+                    questionTitle: questionTitle || '',
+                    timestamp: new Date().toISOString()
+                };
+
+                if (!isCorrect && !this.incorrectQuestions.some(q => q.id === questionId)) {
+                    this.incorrectQuestions.push({
+                        id: questionId || '',
+                        title: questionTitle || '',
+                        chosenAnswer: selectedAnswer?.substring(0, 100) || ''
+                    });
+                }
+                return;
+            }
+
             // For multiple choice, ensure consistent string comparison
             const isCorrect = String(selectedAnswer) === String(correctAnswer);
 
@@ -192,9 +248,14 @@ export const quizStore = defineStore('quiz', {
                     userAnswers: this.userAnswers
                 });
 
+                // Create a consistent document ID
+                const attemptId = `${auth.currentUser.uid}_${this.currentQuizId}_${Date.now()}`;
+                const attemptRef = doc(db, 'quizAttempts', attemptId);
+
                 // Add quiz attempt to Firestore
-                const quizAttemptRef = await addDoc(collection(db, 'quizAttempts'), {
+                await setDoc(attemptRef, {
                     userId: auth.currentUser.uid,
+                    userEmail: auth.currentUser.email || 'Anonymous',
                     quizId: this.currentQuizId,
                     quizStarted: serverTimestamp(),
                     completedAt: serverTimestamp(),
@@ -204,7 +265,7 @@ export const quizStore = defineStore('quiz', {
                     isAnonymous: auth.currentUser.isAnonymous
                 });
 
-                console.log('Quiz attempt recorded:', quizAttemptRef.id);
+                console.log('Quiz attempt recorded:', attemptRef.id);
 
                 // Save final progress using the original system
                 const progressStore = useProgressStore();
@@ -255,24 +316,77 @@ export const quizStore = defineStore('quiz', {
             try {
                 console.log('Fetching draft quiz items...');
                 const draftsRef = collection(db, 'quizEntries');
+                const permanentRef = collection(db, 'permanentQuizEntries');
+
                 // Log the query parameters
-                console.log('Querying for status == draft');
+                console.log('Querying for all items in quizEntries');
+
+                // Fetch all items from quizEntries
+                const draftsQuery = query(draftsRef, orderBy('timestamp', 'desc'));
+                const draftsSnapshot = await getDocs(draftsQuery);
+                console.log('Found items in quizEntries:', draftsSnapshot.docs.length);
+
+                // Fetch permanent (approved) items
+                const permanentQuery = query(permanentRef, orderBy('timestamp', 'desc'));
+                const permanentSnapshot = await getDocs(permanentQuery);
+                console.log('Found items in permanentQuizEntries:', permanentSnapshot.docs.length);
+
+                // Combine both sets of items
+                const allItems = [
+                    ...draftsSnapshot.docs.map(doc => ({
+                        id: doc.id,
+                        ...doc.data(),
+                        isPermanent: false
+                    })),
+                    ...permanentSnapshot.docs.map(doc => ({
+                        id: doc.id,
+                        ...doc.data(),
+                        isPermanent: true
+                    }))
+                ];
 
-                const q = query(draftsRef, where('status', '==', 'draft'));
-                const querySnapshot = await getDocs(q);
+                console.log('Total items found:', allItems.length);
+                console.log('Items by status:', allItems.reduce((acc, item) => {
+                    acc[item.status] = (acc[item.status] || 0) + 1;
+                    return acc;
+                }, {}));
+
+                // Group items by title to handle multiple versions
+                const itemsByTitle = new Map();
+                for (const item of allItems) {
+                    const title = item.title;
+                    if (!itemsByTitle.has(title)) {
+                        itemsByTitle.set(title, []);
+                    }
+                    itemsByTitle.get(title).push({
+                        ...item,
+                        version: item.version || 1 // Ensure version is at least 1
+                    });
+                }
 
-                // Log the raw results
-                console.log('Raw query results:', querySnapshot.docs.map(doc => ({
-                    id: doc.id,
-                    status: doc.data().status
-                })));
+                // For each title, keep only the latest version
+                this.draftQuizItems = Array.from(itemsByTitle.values())
+                    .map(versions => {
+                        // Sort by version number (descending) and then by timestamp (descending)
+                        versions.sort((a, b) => {
+                            if (a.version !== b.version) {
+                                return b.version - a.version;
+                            }
+                            return (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0);
+                        });
+                        return versions[0]; // Return the latest version
+                    });
 
-                this.draftQuizItems = querySnapshot.docs.map(doc => ({
-                    id: doc.id,
-                    ...doc.data()
-                }));
+                // Log processed items with versions
+                console.log('Processed items with versions:', this.draftQuizItems.map(item => ({
+                    id: item.id,
+                    status: item.status,
+                    version: item.version,
+                    title: item.title,
+                    timestamp: item.timestamp,
+                    isPermanent: item.isPermanent
+                })));
 
-                console.log('Fetched draft items:', this.draftQuizItems.length);
                 return this.draftQuizItems;
             } catch (error) {
                 console.error('Error fetching draft items:', error);
@@ -280,97 +394,176 @@ export const quizStore = defineStore('quiz', {
             }
         },
 
+        async recordQuizEdit(versionMessage = '') {
+            const auth = useAuthStore();
+
+            // Create sanitized versions of the states
+            const sanitizeData = (obj) => {
+                const result = {};
+                for (const [key, value] of Object.entries(obj)) {
+                    if (value === undefined) {
+                        result[key] = null;  // Convert undefined to null for Firestore
+                    } else if (typeof value === 'object' && value !== null) {
+                        if (Array.isArray(value)) {
+                            // Handle arrays, ensuring they exist
+                            result[key] = value.map(item => {
+                                if (typeof item === 'object' && item !== null) {
+                                    return sanitizeData(item);
+                                }
+                                return item;
+                            });
+                        } else {
+                            result[key] = sanitizeData(value);  // Recursively sanitize nested objects
+                        }
+                    } else {
+                        result[key] = value;
+                    }
+                }
+                return result;
+            };
+
+            const beforeState = this.lastSavedDraftQuizEntry ?
+                sanitizeData({ ...this.lastSavedDraftQuizEntry }) :
+                null;
+
+            const afterState = sanitizeData({ ...this.draftQuizEntry });
+
+            // Ensure arrays are initialized
+            if (!afterState.citations) afterState.citations = [];
+            if (!afterState.resources) afterState.resources = [];
+
+            // Ensure we're using the correct quiz item ID
+            const quizItemId = afterState?.id || beforeState?.id;
+            if (!quizItemId) {
+                console.error('No quiz item ID found for version history');
+                return;
+            }
+
+            try {
+                // Get the current version from the quiz item
+                const quizItemRef = doc(db, 'quizEntries', quizItemId);
+                const quizItemDoc = await getDoc(quizItemRef);
+                const currentVersion = quizItemDoc.data()?.version || 1;
+
+                // Create the version history entry
+                const editHistoryRef = collection(db, 'quizEditHistory');
+                await addDoc(editHistoryRef, {
+                    quizItemId,
+                    userId: auth.user?.uid,
+                    userEmail: auth.user?.email,
+                    timestamp: serverTimestamp(),
+                    versionMessage,
+                    version: currentVersion, // Use the same version number as the quiz item
+                    changes: {
+                        before: beforeState,
+                        after: afterState
+                    },
+                    status: afterState.status || 'draft' // Add status to version history
+                });
+
+            } catch (error) {
+                console.error('Error recording version:', error);
+                throw error;
+            }
+        },
+
         async saveDraftQuizEntry() {
             try {
-                const user = auth.currentUser;
-                if (!user) throw new Error('No user found');
+                const authStore = useAuthStore();
+                console.log('Starting saveDraftQuizEntry with:', {
+                    currentUser: authStore.user?.uid,
+                    draftEntry: this.draftQuizEntry,
+                    lastSavedEntry: this.lastSavedDraftQuizEntry
+                });
 
-                // Create a copy of the draft entry without the id field
-                const { id, ...entryWithoutId } = this.draftQuizEntry;
+                if (!this.draftQuizEntry) {
+                    throw new Error('No draft entry to save');
+                }
 
+                // Check if we have an authenticated user
+                if (!authStore.user) {
+                    console.error('No authenticated user found when trying to save entry');
+                    throw new Error('You must be logged in to save entries');
+                }
+
+                // Get the current ID from the entry
+                const currentId = this.draftQuizEntry.id;
+
+                // Create a clean copy of the entry data, explicitly excluding the id field
+                const { id, ...entryDataWithoutId } = this.draftQuizEntry;
                 const entryToSave = {
-                    ...entryWithoutId,
-                    userId: user.uid,
-                    userEmail: user.email,
-                    isAnonymous: user.isAnonymous,
-                    status: 'draft',
-                    podcastEpisode: this.draftQuizEntry.podcastEpisode || {
-                        title: '',
-                        EpisodeUrl: '',
-                        audioUrl: '',
-                        description: '',
-                        podcastStartTime: 0
-                    },
-                    podcastEpisode2: this.draftQuizEntry.podcastEpisode2 || {
-                        title: '',
-                        EpisodeUrl: '',
-                        audioUrl: '',
-                        description: '',
-                        podcastStartTime: 0
-                    },
-                    timestamp: serverTimestamp(),
+                    ...entryDataWithoutId,
+                    updatedAt: new Date().toISOString(),
+                    timestamp: new Date().toISOString(),
+                    version: 1,
+                    userId: authStore.user.uid,
+                    userEmail: authStore.user.email,
+                    status: 'draft'
                 };
 
-                let docRef;
+                let savedId;
 
-                // Always create a new document if this is a copy (originalId exists)
-                if (this.draftQuizEntry.originalId) {
-                    // Create new document
-                    docRef = await addDoc(collection(db, 'quizEntries'), entryToSave);
-                    // Update store state with new ID
-                    this.draftQuizEntry = {
-                        ...this.draftQuizEntry,
-                        id: docRef.id
-                    };
-                    console.log('Created new copy with ID:', docRef.id);
-                }
-                // If we have an ID, try to update the existing draft
-                else if (this.draftQuizEntry.id) {
-                    const existingDraft = this.draftQuizItems.find(item => item.id === this.draftQuizEntry.id);
-                    if (existingDraft && existingDraft.userId === user.uid) {
-                        // Update existing draft
-                        docRef = doc(db, 'quizEntries', this.draftQuizEntry.id);
-                        await setDoc(docRef, entryToSave, { merge: true });
-                        console.log('Updated existing draft:', this.draftQuizEntry.id);
-                    } else {
-                        // Create new draft if we can't update the existing one
-                        docRef = await addDoc(collection(db, 'quizEntries'), entryToSave);
-                        // Update store state with new ID
-                        this.draftQuizEntry = {
-                            ...this.draftQuizEntry,
-                            id: docRef.id
-                        };
-                        console.log('Created new draft from existing with ID:', docRef.id);
+                if (currentId) {
+                    // Update existing entry
+                    console.log('Updating existing entry:', {
+                        entryId: currentId,
+                        currentVersion: this.draftQuizEntry.version,
+                        title: this.draftQuizEntry.title
+                    });
+
+                    // Get the current version from the existing entry
+                    const existingEntryRef = doc(db, 'quizEntries', currentId);
+                    const existingEntryDoc = await getDoc(existingEntryRef);
+                    
+                    if (!existingEntryDoc.exists()) {
+                        throw new Error('Existing entry not found');
                     }
+
+                    const existingEntry = existingEntryDoc.data();
+                    const currentVersion = existingEntry.version || 1;
+                    const newVersion = currentVersion + 1;
+
+                    // Update the document with new version
+                    await updateDoc(existingEntryRef, {
+                        ...entryToSave,
+                        version: newVersion,
+                        updatedAt: serverTimestamp(),
+                        timestamp: serverTimestamp()
+                    });
+
+                    savedId = currentId;
                 } else {
-                    // Create new draft
-                    docRef = await addDoc(collection(db, 'quizEntries'), entryToSave);
-                    // Update store state with new ID
-                    this.draftQuizEntry = {
-                        ...this.draftQuizEntry,
-                        id: docRef.id
-                    };
-                    console.log('Created new draft with ID:', docRef.id);
+                    // Create new entry
+                    console.log('Creating new entry');
+                    const docRef = await addDoc(collection(db, 'quizEntries'), {
+                        ...entryToSave,
+                        createdAt: serverTimestamp(),
+                        updatedAt: serverTimestamp(),
+                        timestamp: serverTimestamp()
+                    });
+                    savedId = docRef.id;
                 }
 
-                // Refresh the draft items list
-                await this.fetchDraftQuizItems();
-
-                this.saveStatus = {
-                    message: 'Draft saved successfully!',
-                    type: 'success',
-                    show: true
+                // Update the draft and last saved entries with the new ID
+                const updatedEntry = {
+                    ...entryToSave,
+                    id: savedId
                 };
 
-                return this.draftQuizEntry.id;
-            } catch (e) {
-                console.error('Error saving draft:', e);
-                this.saveStatus = {
-                    message: e.message || 'Error saving draft',
-                    type: 'error',
-                    show: true
-                };
-                throw e;
+                this.draftQuizEntry = updatedEntry;
+                this.lastSavedDraftQuizEntry = updatedEntry;
+
+                return savedId;
+
+            } catch (error) {
+                console.error('Error in saveDraftQuizEntry:', {
+                    error,
+                    errorMessage: error.message,
+                    errorStack: error.stack,
+                    currentUser: useAuthStore().user?.uid,
+                    draftEntry: this.draftQuizEntry
+                });
+                throw error;
             }
         },
 
@@ -388,12 +581,17 @@ export const quizStore = defineStore('quiz', {
                     throw new Error('You can only edit your own drafts');
                 }
 
+                // Increment version number
+                const currentVersion = existingDraft.version || 1;
+                const newVersion = currentVersion + 1;
+
                 const entryToUpdate = {
                     ...this.draftQuizEntry,
                     userId: user.uid,
                     userEmail: user.email,
                     isAnonymous: user.isAnonymous,
                     status: 'draft',
+                    version: newVersion,  // Add incremented version number
                     timestamp: serverTimestamp(),
                 };
 
@@ -419,174 +617,102 @@ export const quizStore = defineStore('quiz', {
             }
         },
 
-        async submitForReview(draftId) {
+        async submitForReview(quizId) {
             try {
-                const user = auth.currentUser;
-                if (!user) throw new Error('No user found');
-                if (user.isAnonymous) throw new Error('Must be signed in to submit for review');
+                const docRef = doc(db, 'quizEntries', quizId);
 
-                // Make sure we have the latest draft items
-                await this.fetchDraftQuizItems();
+                // Create a complete entry update that includes all current data
+                const entryToUpdate = {
+                    ...this.draftQuizEntry,
+                    status: 'pending',
+                    submittedAt: serverTimestamp(),
+                    version: (this.draftQuizEntry.version || 1)  // Preserve current version
+                };
 
-                // Verify ownership before submitting
-                const existingDraft = this.draftQuizItems.find(item => item.id === draftId);
-                if (!existingDraft) {
-                    throw new Error('Draft not found - please try saving again');
-                }
-                if (existingDraft.userId !== user.uid) {
-                    throw new Error('You can only submit your own drafts');
-                }
+                // Update the document with all data
+                await setDoc(docRef, entryToUpdate);
 
-                // Final validation before submission
-                const validation = this.validateDraftQuizEntry(this.draftQuizEntry);
-                if (validation.errors.length > 0) {
-                    this.saveStatus = {
-                        message: 'Cannot submit: ' + validation.errors.join(', '),
-                        type: 'error',
-                        show: true
-                    };
-                    throw new Error('Validation failed: ' + validation.errors.join(', '));
-                }
+                // Update the local draft entry status
+                this.draftQuizEntry = entryToUpdate;
 
-                const docRef = doc(db, 'quizEntries', draftId);
-                await setDoc(docRef, {
-                    status: 'pending',
-                    submittedAt: serverTimestamp(),
-                    timestamp: serverTimestamp(),
-                }, { merge: true });
+                // Record this change in version history
+                await this.recordQuizEdit('Submitted for review');
 
-                // Refresh the draft items list after submission
+                // Refresh the draft items list to reflect the new status
                 await this.fetchDraftQuizItems();
 
+                // Update the save status to show success
                 this.saveStatus = {
-                    message: 'Quiz entry submitted for review!',
+                    message: 'Successfully submitted for review!',
                     type: 'success',
                     show: true
                 };
-                return draftId;
-            } catch (e) {
-                console.error('Error submitting for review:', e);
+
+            } catch (error) {
+                console.error('Error submitting for review:', error);
                 this.saveStatus = {
-                    message: e.message || 'Error submitting for review',
+                    message: 'Error submitting for review: ' + error.message,
                     type: 'error',
                     show: true
                 };
-                throw e;
+                throw error;
             }
         },
 
-        validateDraftQuizEntry(draft) {
-            const validation = {
-                errors: [],
-                invalidFields: new Set()
-            };
+        validateDraftQuizEntry(entry) {
+            const errors = [];
+            const invalidFields = new Set();
 
-            // Default values to check against
-            const defaultValues = {
-                title: '',
-                subtitle: '',
-                Question: 'What is your question?',
-                questionP2: '',
-                option1: 'First option',
-                option2: 'Second option',
-                option3: 'Third option',
-                option4: 'Fourth option',
-                option5: 'Fifth option',
-                explanation: 'Here is why option 1 is correct...'
-            };
-
-            // Required fields - check for empty or default values
-            if (!draft.title?.trim() || draft.title === defaultValues.title) {
-                validation.errors.push('Title is required');
-                validation.invalidFields.add('title');
+            // Required fields validation
+            if (!entry.title?.trim()) {
+                errors.push('Title is required');
+                invalidFields.add('title');
             }
 
-            if (!draft.Question?.trim() || draft.Question === defaultValues.Question) {
-                validation.errors.push('Question is required');
-                validation.invalidFields.add('Question');
+            if (!entry.Question?.trim()) {
+                errors.push('Question is required');
+                invalidFields.add('Question');
             }
 
-            // Answer type specific validation
-            if (draft.answer_type === 'mc') {
-                // For multiple choice, need at least 2 options and a correct answer
-                const options = [
-                    draft.option1,
-                    draft.option2,
-                    draft.option3,
-                    draft.option4,
-                    draft.option5
-                ];
-
-                // Check if options are just default values
-                const nonDefaultOptions = options.filter(
-                    (opt, index) => opt?.trim() && opt !== defaultValues[`option${index + 1}`]
-                );
-
-                if (nonDefaultOptions.length < 2) {
-                    validation.errors.push('Multiple choice questions require at least 2 non-default options');
-                    // Mark all empty or default options as invalid
-                    options.forEach((opt, index) => {
-                        if (!opt?.trim() || opt === defaultValues[`option${index + 1}`]) {
-                            validation.invalidFields.add(`option${index + 1}`);
-                        }
-                    });
-                }
-
-                if (!draft.correctAnswer || draft.correctAnswer < 1 || draft.correctAnswer > nonDefaultOptions.length) {
-                    validation.errors.push('Please select a valid correct answer');
-                    validation.invalidFields.add('correctAnswer');
+            // Validate options based on answer type
+            if (entry.answer_type === 'mc' || entry.answer_type === 'ms') {
+                let optionCount = 0;
+                for (let i = 1; i <= 6; i++) {
+                    if (entry[`option${i}`]?.trim()) {
+                        optionCount++;
+                    }
                 }
 
-                // Check if the selected correct answer is still a default value
-                const correctOptionIndex = draft.correctAnswer - 1;
-                if (correctOptionIndex >= 0 &&
-                    options[correctOptionIndex] === defaultValues[`option${draft.correctAnswer}`]) {
-                    validation.errors.push('The correct answer cannot be a default option');
-                    validation.invalidFields.add(`option${draft.correctAnswer}`);
+                if (optionCount < 2) {
+                    errors.push('At least 2 options are required');
+                    for (let i = 1; i <= 2; i++) {
+                        invalidFields.add(`option${i}`);
+                    }
                 }
-            }
-
-            // Explanation validation - check for default value
-            if (!draft.explanation?.trim() || draft.explanation === defaultValues.explanation) {
-                validation.errors.push('Explanation is required');
-                validation.invalidFields.add('explanation');
-            }
 
-            // Media validation - if URLs are provided, they should be valid
-            if (draft.videoUrl && !this.isValidUrl(draft.videoUrl)) {
-                validation.errors.push('Invalid video URL');
-                validation.invalidFields.add('videoUrl');
-            }
-            if (draft.imageUrl && !this.isValidUrl(draft.imageUrl)) {
-                validation.errors.push('Invalid image URL');
-                validation.invalidFields.add('imageUrl');
-            }
-
-            // Podcast episode validation
-            if (draft.podcastEpisode?.EpisodeUrl && !this.isValidUrl(draft.podcastEpisode.EpisodeUrl)) {
-                validation.errors.push('Invalid podcast episode URL');
-                validation.invalidFields.add('podcastEpisodeUrl');
-            }
-            if (draft.podcastEpisode?.audioUrl && !this.isValidUrl(draft.podcastEpisode.audioUrl)) {
-                validation.errors.push('Invalid podcast audio URL');
-                validation.invalidFields.add('podcastAudioUrl');
-            }
-
-            // Citations validation
-            if (draft.citations?.length > 0) {
-                draft.citations.forEach((citation, index) => {
-                    if (!citation.title?.trim()) {
-                        validation.errors.push(`Citation ${index + 1} requires a title`);
-                        validation.invalidFields.add(`citation-${index}-title`);
-                    }
-                    if (citation.url && !this.isValidUrl(citation.url)) {
-                        validation.errors.push(`Citation ${index + 1} has an invalid URL`);
-                        validation.invalidFields.add(`citation-${index}-url`);
+                // Validate correct answer selection
+                if (entry.answer_type === 'mc' && !entry.correctAnswer) {
+                    errors.push('Please select a correct answer');
+                } else if (entry.answer_type === 'ms') {
+                    if (entry.hasNoneOfTheAbove) {
+                        // For "None of the Above" case, only one correct answer is allowed
+                        if (!entry.correctAnswers || entry.correctAnswers.length !== 1) {
+                            errors.push('When "None of the Above" is selected, exactly one correct answer is required');
+                        }
+                    } else {
+                        // For regular multiple select, at least two correct answers are required
+                        if (!entry.correctAnswers || entry.correctAnswers.length < 2) {
+                            errors.push('Please select at least two correct answers');
+                        }
                     }
-                });
+                }
             }
 
-            return validation;
+            return {
+                isValid: errors.length === 0,
+                errors,
+                invalidFields
+            };
         },
 
         isValidUrl(string) {
@@ -599,12 +725,80 @@ export const quizStore = defineStore('quiz', {
         },
 
         updateDraftQuizEntry(entry) {
-            const currentId = this.draftQuizEntry.id;
-            this.draftQuizEntry = {
-                ...this.draftQuizEntry,
-                ...entry,
-                id: entry.id || currentId // Keep existing ID if new entry doesn't have one
+            // Log the incoming entry details
+            console.log('updateDraftQuizEntry called with:', {
+                entryId: entry.id,
+                entryVersion: entry.version,
+                entryTitle: entry.title,
+                currentId: this.draftQuizEntry.id,
+                currentEntry: this.draftQuizEntry,
+                modelValue: entry.modelValue,
+                template: entry.template
+            });
+
+            // Get the ID from the entry or the current draft
+            let templateId = entry.id || this.draftQuizEntry.id;
+            
+            // If we still don't have an ID, try to get it from the entry's properties
+            if (!templateId && entry.entryId) {
+                templateId = entry.entryId;
+            }
+
+            // If we still don't have an ID, try to get it from the template
+            if (!templateId && entry.template) {
+                templateId = entry.template;
+            }
+
+            // If we still don't have an ID, try to get it from the modelValue
+            if (!templateId && entry.modelValue) {
+                templateId = entry.modelValue;
+            }
+
+            // If we still don't have an ID, try to get it from the current draft's modelValue
+            if (!templateId && this.draftQuizEntry.modelValue) {
+                templateId = this.draftQuizEntry.modelValue;
+            }
+
+            // If we still don't have an ID, throw an error
+            if (!templateId) {
+                console.error('No ID found in template or current draft entry:', {
+                    entry,
+                    currentDraft: this.draftQuizEntry,
+                    template: entry.template,
+                    modelValue: entry.modelValue,
+                    currentDraftModelValue: this.draftQuizEntry.modelValue
+                });
+                throw new Error('Cannot update draft: No document ID found');
+            }
+
+            const updatedEntry = {
+                ...this.draftQuizEntry,  // Start with current draft to preserve existing values
+                ...entry,                 // Override with new values
+                id: templateId,           // Use the template ID
+                version: entry.version || this.draftQuizEntry.version || 1,
+                status: entry.status || 'draft',
+                // Initialize correctAnswers array for multiple select questions
+                correctAnswers: entry.answer_type === 'ms' ? (entry.correctAnswers || []) : []
             };
+
+            // Log the final updated entry
+            console.log('Final updated entry:', {
+                id: updatedEntry.id,
+                version: updatedEntry.version,
+                title: updatedEntry.title,
+                status: updatedEntry.status,
+                hasRequiredFields: {
+                    title: !!updatedEntry.title,
+                    Question: !!updatedEntry.Question,
+                    answer_type: !!updatedEntry.answer_type,
+                    correctAnswer: !!updatedEntry.correctAnswer,
+                    explanation: !!updatedEntry.explanation
+                }
+            });
+
+            // Update both the draft entry and the last saved entry
+            this.draftQuizEntry = updatedEntry;
+            this.lastSavedDraftQuizEntry = { ...updatedEntry };
         },
 
         resetDraftQuizEntry() {
@@ -620,6 +814,7 @@ export const quizStore = defineStore('quiz', {
                 option4: 'Fourth option',
                 option5: 'Fifth option',
                 correctAnswer: 1,
+                correctAnswers: [], // For multiple select questions
                 explanation: 'Here is why option 1 is correct...',
                 explanation2: '',
                 videoUrl: '',
@@ -650,33 +845,11 @@ export const quizStore = defineStore('quiz', {
                 closingText: '',
                 closingText2: '',
                 modal: '',
-                status: 'draft'
+                status: 'draft',
+                version: 1  // Initialize version number
             };
         },
 
-        async recordQuizEdit() {
-            try {
-                const auth = useAuthStore();
-                const editData = {
-                    userId: auth.user?.uid || 'anonymous',
-                    userEmail: auth.user?.email || 'anonymous',
-                    timestamp: serverTimestamp(),
-                    quizStarted: false,  // Set a default value
-                    quizCompleted: false,  // Set a default value if needed
-                    editType: 'draft',
-                    draftId: this.draftQuizEntry.id || null,
-                    originalId: this.draftQuizEntry.originalId || null
-                };
-
-                const docRef = await addDoc(collection(db, 'quizEdits'), editData);
-                console.log('Quiz edit recorded:', docRef.id);
-                return docRef.id;
-            } catch (error) {
-                console.error('Error recording quiz edit:', error);
-                throw error;
-            }
-        },
-
         clearSaveStatus() {
             this.saveStatus = {
                 message: '',
@@ -771,6 +944,252 @@ export const quizStore = defineStore('quiz', {
             } finally {
                 this.githubIssuesLoading = false;
             }
+        },
+
+        async updateQuizItemStatus(itemId, status) {
+            try {
+                const quizRef = doc(db, 'quizEntries', itemId);
+                await updateDoc(quizRef, {
+                    status: status,
+                    updatedAt: serverTimestamp()
+                });
+
+                // Refresh the draft items list
+                await this.fetchDraftQuizItems();
+
+                return true;
+            } catch (error) {
+                console.error('Error updating quiz item status:', error);
+                throw error;
+            }
+        },
+
+        async acceptQuizItem(itemId) {
+            try {
+                // Get the quiz item
+                const quizRef = doc(db, 'quizEntries', itemId);
+                const quizDoc = await getDoc(quizRef);
+
+                if (!quizDoc.exists()) {
+                    throw new Error('Quiz item not found');
+                }
+
+                const quizData = quizDoc.data();
+
+                // Verify it's a pending item
+                if (quizData.status !== 'pending') {
+                    throw new Error('Quiz item is not pending review');
+                }
+
+                // Update the status to accepted
+                await updateDoc(quizRef, {
+                    status: 'accepted',
+                    acceptedAt: serverTimestamp(),
+                    updatedAt: serverTimestamp()
+                });
+
+                // Record this change in version history
+                this.draftQuizEntry = { ...quizData, id: itemId };
+                await this.recordQuizEdit('Quiz item accepted');
+
+                // Refresh the draft items list
+                await this.fetchDraftQuizItems();
+
+                return true;
+            } catch (error) {
+                console.error('Error accepting quiz item:', error);
+                throw error;
+            }
+        },
+
+        async approveQuizItem(itemId) {
+            try {
+                console.log('Starting approveQuizItem for ID:', itemId);
+                
+                // Get the quiz item
+                const quizRef = doc(db, 'quizEntries', itemId);
+                const quizDoc = await getDoc(quizRef);
+
+                if (!quizDoc.exists()) {
+                    console.error('Quiz item not found in quizEntries:', itemId);
+                    throw new Error('Quiz item not found');
+                }
+
+                const quizData = quizDoc.data();
+                console.log('Found quiz item:', {
+                    id: itemId,
+                    status: quizData.status,
+                    title: quizData.title
+                });
+
+                // Verify it's an accepted item
+                if (quizData.status !== 'accepted') {
+                    console.error('Quiz item is not accepted:', {
+                        currentStatus: quizData.status,
+                        requiredStatus: 'accepted'
+                    });
+                    throw new Error('Quiz item must be accepted before it can be approved');
+                }
+
+                // Update the status to approved
+                console.log('Updating status to approved in quizEntries');
+                await updateDoc(quizRef, {
+                    status: 'approved',
+                    approvedAt: serverTimestamp(),
+                    updatedAt: serverTimestamp()
+                });
+
+                // Add to permanent quiz entries
+                console.log('Adding to permanentQuizEntries');
+                const permanentRef = doc(db, 'permanentQuizEntries', itemId);
+                await setDoc(permanentRef, {
+                    ...quizData,
+                    status: 'approved',
+                    approvedAt: serverTimestamp(),
+                    updatedAt: serverTimestamp()
+                });
+
+                // Record this change in version history
+                console.log('Recording version history');
+                this.draftQuizEntry = { ...quizData, id: itemId };
+                await this.recordQuizEdit('Quiz item approved and moved to permanent entries');
+
+                // Refresh the draft items list
+                console.log('Refreshing draft items list');
+                await this.fetchDraftQuizItems();
+
+                return true;
+            } catch (error) {
+                console.error('Error approving quiz item:', error);
+                throw error;
+            }
+        },
+
+        async fetchAllQuizItems() {
+            try {
+                const quizRef = collection(db, 'quizEntries');
+                const querySnapshot = await getDocs(quizRef);
+                return querySnapshot.docs.map(doc => ({
+                    id: doc.id,
+                    ...doc.data()
+                }));
+            } catch (error) {
+                console.error('Error fetching all quiz items:', error);
+                throw error;
+            }
+        },
+
+        async forkQuizEntry(quizId) {
+            try {
+                // Ensure quizId is a string for Firestore operations
+                const quizIdStr = String(quizId);
+                const quizIdNum = Number.parseInt(quizIdStr, 10);
+                
+                // First try to get the quiz entry from the quizEntries array
+                const quizEntry = quizEntries.find(entry => entry.id === quizIdNum);
+                if (quizEntry) {
+                    console.log('Found quiz entry in quizEntries array:', {
+                        id: quizEntry.id,
+                        title: quizEntry.title
+                    });
+
+                    // Create a new draft entry with fork information
+                    const forkedEntry = {
+                        ...quizEntry,
+                        id: null, // Will be set when saved
+                        status: 'draft',
+                        version: 1,
+                        forkedFrom: {
+                            id: quizIdStr,
+                            originalId: quizIdNum,
+                            version: 1,
+                            title: quizEntry.title,
+                            timestamp: serverTimestamp(),
+                            isPermanent: true
+                        },
+                        createdAt: serverTimestamp(),
+                        updatedAt: serverTimestamp(),
+                        timestamp: serverTimestamp()
+                    };
+
+                    // Save the forked entry
+                    const docRef = await addDoc(collection(db, 'quizEntries'), forkedEntry);
+                    
+                    // Update the draft entry in the store
+                    this.draftQuizEntry = { ...forkedEntry, id: docRef.id };
+                    this.lastSavedDraftQuizEntry = { ...forkedEntry, id: docRef.id };
+
+                    return docRef.id;
+                }
+
+                // If not found in quizEntries array, try to get it from Firestore collections
+                const quizRef = doc(db, 'quizEntries', quizIdStr);
+                const permanentRef = doc(db, 'permanentQuizEntries', quizIdStr);
+                
+                // Try to get the document from quizEntries first
+                let quizDoc = await getDoc(quizRef);
+                let isPermanent = false;
+                
+                // If not found in quizEntries, try permanentQuizEntries
+                if (!quizDoc.exists()) {
+                    quizDoc = await getDoc(permanentRef);
+                    isPermanent = true;
+                }
+                
+                if (!quizDoc.exists()) {
+                    // If not found in either collection, try to find it by integer ID
+                    const quizEntriesRef = collection(db, 'quizEntries');
+                    const permanentEntriesRef = collection(db, 'permanentQuizEntries');
+                    
+                    // Search in both collections
+                    const [quizEntriesSnapshot, permanentEntriesSnapshot] = await Promise.all([
+                        getDocs(query(quizEntriesRef, where('id', '==', quizIdNum))),
+                        getDocs(query(permanentEntriesRef, where('id', '==', quizIdNum)))
+                    ]);
+                    
+                    if (quizEntriesSnapshot.docs.length > 0) {
+                        quizDoc = quizEntriesSnapshot.docs[0];
+                    } else if (permanentEntriesSnapshot.docs.length > 0) {
+                        quizDoc = permanentEntriesSnapshot.docs[0];
+                        isPermanent = true;
+                    } else {
+                        throw new Error('Quiz entry not found in either collection');
+                    }
+                }
+
+                const quizData = quizDoc.data();
+                
+                // Create a new draft entry with fork information
+                const forkedEntry = {
+                    ...quizData,
+                    id: null, // Will be set when saved
+                    status: 'draft',
+                    version: 1,
+                    forkedFrom: {
+                        id: quizIdStr,
+                        originalId: quizIdNum, // Store the original integer ID
+                        version: quizData.version || 1,
+                        title: quizData.title,
+                        timestamp: serverTimestamp(),
+                        isPermanent: isPermanent // Add flag to indicate if it was forked from permanent collection
+                    },
+                    createdAt: serverTimestamp(),
+                    updatedAt: serverTimestamp(),
+                    timestamp: serverTimestamp()
+                };
+
+                // Save the forked entry
+                const docRef = await addDoc(collection(db, 'quizEntries'), forkedEntry);
+                
+                // Update the draft entry in the store
+                this.draftQuizEntry = { ...forkedEntry, id: docRef.id };
+                this.lastSavedDraftQuizEntry = { ...forkedEntry, id: docRef.id };
+
+                return docRef.id;
+            } catch (error) {
+                console.error('Error forking quiz entry:', error);
+                throw error;
+            }
         }
     },
 });
diff --git a/src/stores/scoreStore copy.js b/src/stores/scoreStore copy.js
new file mode 100644
index 0000000..dcce142
--- /dev/null
+++ b/src/stores/scoreStore copy.js	
@@ -0,0 +1,638 @@
+import { defineStore } from 'pinia';
+import {
+    doc,
+    getDoc,
+    setDoc,
+    collection,
+    getDocs,
+    query,
+    where,
+    orderBy,
+    limit,
+    serverTimestamp
+} from 'firebase/firestore';
+import { db } from '../firebase';
+import { useAuthStore } from './authStore';
+import { quizSets } from '../data/quizSets';
+
+export const useScoreStore = defineStore('scores', {
+    state: () => ({
+        topScores: [],
+        allScores: [],
+        totalAvailableQuestions: 0,
+        lastUpdated: null,
+        isLoading: false,
+        error: null
+    }),
+
+    getters: {
+        // Get the next user with a valid email
+        nextEmailUser: (state) => {
+            // Filter users with valid emails (excluding the top 5 users to avoid duplication)
+            const topFiveIds = state.topScores.map(score => score.userId);
+
+            const usersWithEmail = state.allScores.filter(score =>
+                score.email &&
+                score.email !== 'Anonymous' &&
+                !score.email?.includes('undefined') &&
+                !topFiveIds.includes(score.userId) // Exclude users already in top 5
+            );
+
+            console.log('Users with email (excluding top 5):', usersWithEmail);
+
+            // Return the first one (highest score) if available
+            return usersWithEmail.length > 0 ? usersWithEmail[0] : null;
+        }
+    },
+
+    actions: {
+        // Format display name from email
+        formatDisplayName(email) {
+            if (!email || email === 'Anonymous') return 'Anon_user';
+
+            // If it's a valid email, only show the part before the @ symbol
+            if (email.includes('@') && !email.includes('undefined')) {
+                return email.split('@')[0];
+            }
+
+            // Otherwise return the email as is, or Anon_user if it's Anonymous
+            return email === 'Anonymous' ? 'Anon_user' : email;
+        },
+
+        // Calculate total questions from all published quiz sets
+        calculateTotalQuestions() {
+            let total = 0;
+            quizSets.forEach(set => {
+                if (!set.inProgress) { // Only count published quiz sets
+                    total += set.items.length;
+                }
+            });
+            return total;
+        },
+
+        // Save top scores to Firestore
+        async saveTopScoresToFirestore(scores) {
+            try {
+                console.log('Saving top scores to Firestore:', scores);
+
+                // Get current timestamp as a Date object instead of serverTimestamp()
+                const now = new Date();
+
+                // Create a document in the topScores collection
+                const topScoresRef = doc(db, 'topScores', 'latest');
+
+                // Prepare the data to save
+                const topScoresData = {
+                    scores: scores.map(score => ({
+                        userId: score.userId,
+                        displayName: score.displayName,
+                        email: score.email,
+                        totalScore: score.totalScore,
+                        quizCount: score.quizCount,
+                        // Use a regular Date object instead of serverTimestamp()
+                        lastUpdated: now
+                    })),
+                    totalAvailableQuestions: this.totalAvailableQuestions,
+                    // Use serverTimestamp() only at the top level
+                    lastUpdated: serverTimestamp()
+                };
+
+                // Save to Firestore
+                await setDoc(topScoresRef, topScoresData);
+                console.log('Top scores saved successfully');
+
+                // Also save individual user scores
+                for (const score of scores) {
+                    if (score.userId) {
+                        const userScoreRef = doc(db, 'userScores', score.userId);
+                        await setDoc(userScoreRef, {
+                            userId: score.userId,
+                            displayName: score.displayName,
+                            email: score.email,
+                            totalScore: score.totalScore,
+                            quizCount: score.quizCount,
+                            // This is fine because it's not in an array
+                            lastUpdated: serverTimestamp()
+                        }, { merge: true }); // Use merge to update only these fields
+                    }
+                }
+                console.log('Individual user scores saved successfully');
+
+            } catch (err) {
+                console.error('Error saving top scores to Firestore:', err);
+                this.error = 'Failed to save scores';
+            }
+        },
+
+        // Fetch top scores from Firestore
+        async fetchTopScoresFromFirestore() {
+            this.isLoading = true;
+            this.error = null;
+            try {
+                // Get the top scores document from Firestore
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+
+                if (topScoresDoc.exists()) {
+                    const data = topScoresDoc.data();
+                    console.log('Fetched top scores from Firestore:', data);
+
+                    // Set the total available questions
+                    this.totalAvailableQuestions = data.totalAvailableQuestions || this.calculateTotalQuestions();
+
+                    // Get all user documents for the scores to fetch usernames
+                    const processedScores = await Promise.all(
+                        (data.scores || []).map(async (score) => {
+                            if (score.userId) {
+                                const userDoc = await getDoc(doc(db, 'users', score.userId));
+                                // Get username from user document or from existing score data
+                                const username = userDoc.exists() ?
+                                    userDoc.data().username :
+                                    score.username || null;
+
+                                // Format display name consistently
+                                let displayName;
+                                if (username) {
+                                    displayName = username;
+                                } else if (score.email && score.email !== 'Anonymous' && !score.email.includes('undefined') && score.email.includes('@')) {
+                                    displayName = this.formatDisplayName(score.email);
+                                } else {
+                                    displayName = `Anon_${score.userId.substring(0, 6)}...`;
+                                }
+
+                                console.log('Processing score:', {
+                                    userId: score.userId,
+                                    username,
+                                    displayName,
+                                    originalUsername: score.username
+                                });
+
+                                return {
+                                    ...score,
+                                    username,
+                                    displayName
+                                };
+                            }
+                            return {
+                                ...score,
+                                username: null,
+                                displayName: score.userId ? `Anon_${score.userId.substring(0, 6)}...` : 'Anon_user'
+                            };
+                        })
+                    );
+
+                    // Store all scores
+                    this.allScores = processedScores;
+
+                    // Only show top 5 in the list
+                    this.topScores = processedScores.slice(0, 5);
+
+                    this.lastUpdated = data.lastUpdated?.toDate() || new Date();
+                    console.log('Processed scores:', this.topScores);
+                } else {
+                    console.log('No top scores document found in Firestore');
+                    this.topScores = [];
+                    this.allScores = [];
+                }
+            } catch (error) {
+                console.error('Error fetching top scores:', error);
+                this.error = error.message;
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        // Check and update top scores when a quiz is completed
+        async checkAndUpdateTopScores(userId, quizId, score, userEmail) {
+            try {
+                console.log(`Checking if user ${userId} is now a top scorer with score ${score} on quiz ${quizId}`);
+
+                // Get the user's document to fetch the username
+                const userDoc = await getDoc(doc(db, 'users', userId));
+                const username = userDoc.exists() ? userDoc.data().username : null;
+
+                // Get the user's current score document
+                const userScoreRef = doc(db, 'userScores', userId);
+                const userScoreDoc = await getDoc(userScoreRef);
+
+                let userTotalScore = 0;
+                let userQuizCount = 0;
+                let displayName;
+                let mostRecentAttempts = {};
+
+                // Get most recent attempts for each quiz set
+                const attemptsRef = collection(db, 'quizAttempts');
+                const attemptsQuery = query(attemptsRef, where('userId', '==', userId));
+                const attemptsSnapshot = await getDocs(attemptsQuery);
+
+                // Group attempts by quizId and keep only the most recent
+                attemptsSnapshot.forEach(doc => {
+                    const attempt = doc.data();
+                    if (!mostRecentAttempts[attempt.quizId] ||
+                        attempt.completedAt > mostRecentAttempts[attempt.quizId].completedAt) {
+                        mostRecentAttempts[attempt.quizId] = {
+                            totalCorrect: attempt.score,
+                            totalAnswered: attempt.totalQuestions
+                        };
+                    }
+                });
+
+                // Set display name with preference order: username > email > anonymous format
+                if (username) {
+                    displayName = username;
+                } else if (userEmail && userEmail !== 'Anonymous' && !userEmail.includes('undefined') && userEmail.includes('@')) {
+                    displayName = this.formatDisplayName(userEmail);
+                } else {
+                    displayName = `Anon_${userId.substring(0, 6)}...`;
+                }
+
+                // If user already has a score document, use that data
+                if (userScoreDoc.exists()) {
+                    const userData = userScoreDoc.data();
+                    userTotalScore = userData.totalScore || 0;
+                    userQuizCount = userData.quizCount || 0;
+                    // Preserve existing attempts that haven't been updated
+                    if (userData.mostRecentAttempts) {
+                        mostRecentAttempts = {
+                            ...userData.mostRecentAttempts,
+                            ...mostRecentAttempts
+                        };
+                    }
+                }
+
+                // Add the new score
+                userTotalScore += score;
+                userQuizCount += 1;
+
+                // Calculate totalRecentAnswers from mostRecentAttempts
+                const totalRecentAnswers = Object.values(mostRecentAttempts).reduce((sum, attempt) =>
+                    sum + (attempt.totalAnswered || 0), 0);
+
+                // Update the user's score document
+                await setDoc(userScoreRef, {
+                    userId,
+                    displayName,
+                    username,
+                    email: userEmail,
+                    totalScore: userTotalScore,
+                    quizCount: userQuizCount,
+                    mostRecentAttempts,
+                    totalRecentAnswers,
+                    lastUpdated: serverTimestamp()
+                }, { merge: true });
+
+                // Get the current top scores document
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+                const totalAvailableQs = this.calculateTotalQuestions();
+
+                let scores = [];
+                if (topScoresDoc.exists()) {
+                    scores = topScoresDoc.data().scores || [];
+                }
+
+                // Find if the user is already in the scores
+                const userScoreIndex = scores.findIndex(s => s.userId === userId);
+
+                if (userScoreIndex >= 0) {
+                    // Update the user's score
+                    scores[userScoreIndex] = {
+                        ...scores[userScoreIndex],
+                        totalScore: userTotalScore,
+                        quizCount: userQuizCount,
+                        displayName,
+                        username,
+                        email: userEmail,
+                        mostRecentAttempts,
+                        totalRecentAnswers,
+                        lastUpdated: new Date()
+                    };
+                } else {
+                    // Add the user to the scores
+                    scores.push({
+                        userId,
+                        displayName,
+                        username,
+                        email: userEmail,
+                        totalScore: userTotalScore,
+                        quizCount: userQuizCount,
+                        mostRecentAttempts,
+                        totalRecentAnswers,
+                        lastUpdated: new Date()
+                    });
+                }
+
+                // Sort the scores
+                scores.sort((a, b) => b.totalScore - a.totalScore);
+
+                // Save the updated scores
+                await setDoc(topScoresRef, {
+                    scores,
+                    totalAvailableQuestions: totalAvailableQs,
+                    lastUpdated: serverTimestamp()
+                });
+
+                console.log('Top scores updated successfully after quiz completion');
+
+                // Refresh the store's data
+                await this.fetchTopScoresFromFirestore();
+
+                return true;
+            } catch (err) {
+                console.error('Error checking and updating top scores:', err);
+                this.error = 'Failed to update scores';
+                return false;
+            }
+        },
+
+        // Fetch top scores (first try from Firestore, then calculate if needed)
+        async fetchTopScores() {
+            this.isLoading = true;
+            this.error = null;
+
+            try {
+                // Calculate total available questions
+                this.totalAvailableQuestions = this.calculateTotalQuestions();
+
+                // First get existing scores from Firestore
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+
+                let existingScores = [];
+                if (topScoresDoc.exists()) {
+                    const data = topScoresDoc.data();
+                    existingScores = data.scores || [];
+                    console.log('Existing scores from Firestore:', existingScores);
+                }
+
+                // Then fetch from userProgress
+                const progressRef = collection(db, 'userProgress');
+                const progressSnapshot = await getDocs(progressRef);
+
+                console.log(`Found ${progressSnapshot.docs.length} documents in userProgress`);
+
+                // First get all user documents to have email data ready
+                const userDocs = await Promise.all(
+                    [...new Set(progressSnapshot.docs.map(doc => doc.id.split('_')[0]))].map(async userId => {
+                        const userDoc = await getDoc(doc(db, 'users', userId));
+                        return {
+                            userId,
+                            data: userDoc.exists() ? userDoc.data() : null
+                        };
+                    })
+                );
+
+                // Create a map of user data
+                const userDataMap = new Map(userDocs.map(doc => [doc.userId, doc.data]));
+                console.log('User data map:', Object.fromEntries(userDataMap));
+
+                // Create a map of quiz set names
+                const quizSetNames = {};
+                // Map quiz IDs to their set names
+                quizSets.forEach((set, index) => {
+                    if (set.display !== "debug") {
+                        // Map both the setName and the numeric index
+                        quizSetNames[set.setName] = set.setName;
+                        quizSetNames[String(index)] = set.setName;
+                    }
+                });
+                // Map legacy ID "0" to "general"
+                quizSetNames["0"] = "general";
+
+                console.log('Quiz set names:', quizSetNames);
+
+                // Group progress by userId
+                const userProgressMap = new Map();
+
+                progressSnapshot.docs.forEach(doc => {
+                    const progressData = doc.data();
+                    const [userId, quizId] = doc.id.split('_');
+
+                    // Map quiz ID to set name
+                    const mappedQuizId = quizId === "0" ? "general" : quizId;
+                    const quizSetName = quizSetNames[mappedQuizId] || quizSets[Number(mappedQuizId)]?.setName || mappedQuizId;
+
+                    if (!userProgressMap.has(userId)) {
+                        userProgressMap.set(userId, new Map());
+                    }
+
+                    const userAttempts = userProgressMap.get(userId);
+                    const existingAttempt = userAttempts.get(mappedQuizId);
+
+                    if (!existingAttempt || progressData.lastUpdated > existingAttempt.lastUpdated) {
+                        userAttempts.set(mappedQuizId, {
+                            totalCorrect: progressData.totalCorrect || 0,
+                            totalAnswered: progressData.totalQuestions || 0,
+                            lastUpdated: progressData.lastUpdated,
+                            quizSetName: quizSetName
+                        });
+                    }
+                });
+
+                const progressArray = Array.from(userProgressMap.values())
+                    .map(data => ({
+                        ...data,
+                        quizAttempts: Array.from(data.quizAttempts)
+                    }));
+                console.log('Aggregated user progress by base ID:', progressArray);
+
+                // Get the auth store to access current user
+                const authStore = useAuthStore();
+
+                // Convert progress data to score format
+                const progressScores = progressArray
+                    .filter(progress => progress.totalAnswered > 0 && progress.totalCorrect > 0)
+                    .map(progress => {
+                        const userData = userDataMap.get(progress.userId);
+                        let email = progress.email || userData?.email;
+                        let displayName = null;
+
+                        // Try to get display name in order of preference:
+                        // 1. Username from user data
+                        // 2. Email username if available
+                        // 3. First 8 chars of user ID + "..."
+                        if (userData?.username) {
+                            displayName = userData.username;
+                        } else if (email && email !== 'Anonymous' && !email.includes('undefined')) {
+                            displayName = this.formatDisplayName(email);
+                        } else {
+                            displayName = `Anon_${progress.userId.substring(0, 6)}...`;
+                        }
+
+                        const scoreData = {
+                            userId: progress.userId,
+                            totalScore: progress.totalCorrect,
+                            quizCount: progress.totalAnswered,
+                            email: email || 'Anonymous',
+                            username: userData?.username || null,
+                            displayName,
+                            lastUpdated: progress.lastUpdated?.toDate() || new Date(),
+                            quizAttempts: progress.quizAttempts
+                        };
+
+                        console.log(`Created score data for ${progress.userId}:`, scoreData);
+                        return scoreData;
+                    });
+
+                console.log('Valid progress scores:', progressScores);
+
+                // Merge scores, preferring progress scores over existing ones
+                const mergedScores = [...existingScores];
+
+                progressScores.forEach(progressScore => {
+                    const existingIndex = mergedScores.findIndex(s => s.userId === progressScore.userId);
+                    if (existingIndex >= 0) {
+                        // Update existing score if progress score is higher
+                        if (progressScore.totalScore > mergedScores[existingIndex].totalScore) {
+                            mergedScores[existingIndex] = progressScore;
+                        }
+                    } else {
+                        // Add new score
+                        mergedScores.push(progressScore);
+                    }
+                });
+
+                // Filter and sort by total score, but keep anonymous users
+                const finalScores = mergedScores
+                    .filter(score => score.totalScore > 0) // Only filter out zero scores
+                    .sort((a, b) => b.totalScore - a.totalScore);
+
+                console.log('Final merged scores:', finalScores);
+
+                if (finalScores.length > 0) {
+                    // Update topScores document with merged scores
+                    await setDoc(topScoresRef, {
+                        scores: finalScores,
+                        totalAvailableQuestions: this.totalAvailableQuestions,
+                        lastUpdated: serverTimestamp()
+                    });
+
+                    // Update store state
+                    this.allScores = finalScores;
+                    this.topScores = finalScores.slice(0, 5);
+                    console.log('Updated store with top scores:', this.topScores);
+                } else {
+                    console.log('No valid scores found after merging');
+                    this.allScores = [];
+                    this.topScores = [];
+                }
+
+                this.isLoading = false;
+            } catch (err) {
+                console.error('Error fetching top scores:', err);
+                this.error = 'Failed to load top scores';
+                this.isLoading = false;
+            }
+        },
+        // For use by AdminTools.vue
+        // One-time function to collect mostRecentAttempts from userProgress and update topScores
+        async collectAndUpdateMostRecentAttempts() {
+            try {
+                // Get all userProgress documents
+                const progressRef = collection(db, 'userProgress');
+                const progressSnapshot = await getDocs(progressRef);
+
+                // Create a map of quiz set names
+                const quizSetNames = {};
+                // Map quiz IDs to their set names
+                quizSets.forEach((set, index) => {
+                    if (set.display !== "debug") {
+                        // Map both the setName and the numeric index
+                        quizSetNames[set.setName] = set.setName;
+                        quizSetNames[String(index)] = set.setName;
+                    }
+                });
+                // Map legacy ID "0" to "general"
+                quizSetNames["0"] = "general";
+
+                console.log('Quiz set names:', quizSetNames);
+
+                // Group progress by userId
+                const userProgressMap = new Map();
+
+                progressSnapshot.docs.forEach(doc => {
+                    const progressData = doc.data();
+                    const [userId, quizId] = doc.id.split('_');
+
+                    // Map quiz ID to set name
+                    const mappedQuizId = quizId === "0" ? "general" : quizId;
+                    const quizSetName = quizSetNames[mappedQuizId] || quizSets[Number(mappedQuizId)]?.setName || mappedQuizId;
+
+                    if (!userProgressMap.has(userId)) {
+                        userProgressMap.set(userId, new Map());
+                    }
+
+                    const userAttempts = userProgressMap.get(userId);
+                    const existingAttempt = userAttempts.get(mappedQuizId);
+
+                    if (!existingAttempt || progressData.lastUpdated > existingAttempt.lastUpdated) {
+                        userAttempts.set(mappedQuizId, {
+                            totalCorrect: progressData.totalCorrect || 0,
+                            totalAnswered: progressData.totalQuestions || 0,
+                            lastUpdated: progressData.lastUpdated,
+                            quizSetName: quizSetName
+                        });
+                    }
+                });
+
+                // Get current top scores
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+
+                if (!topScoresDoc.exists()) {
+                    console.log('No top scores document found');
+                    return;
+                }
+
+                const data = topScoresDoc.data();
+                let scores = data.scores || [];
+
+                // Update each score with mostRecentAttempts
+                scores = scores.map(score => {
+                    const userAttempts = userProgressMap.get(score.userId);
+                    if (!userAttempts) return score;
+
+                    const mostRecentAttempts = {};
+                    userAttempts.forEach((attempt, quizId) => {
+                        mostRecentAttempts[quizId] = {
+                            totalCorrect: attempt.totalCorrect,
+                            totalAnswered: attempt.totalAnswered,
+                            quizSetName: attempt.quizSetName
+                        };
+                    });
+
+                    // Calculate totalRecentAnswers
+                    const totalRecentAnswers = Object.values(mostRecentAttempts).reduce((sum, attempt) =>
+                        sum + (attempt.totalAnswered || 0), 0);
+
+                    console.log(`Processing user ${score.userId}:`, {
+                        mostRecentAttempts,
+                        totalRecentAnswers
+                    });
+
+                    return {
+                        ...score,
+                        mostRecentAttempts,
+                        totalRecentAnswers
+                    };
+                });
+
+                // Save updated scores
+                await setDoc(topScoresRef, {
+                    ...data,
+                    scores,
+                    lastUpdated: serverTimestamp()
+                });
+
+                console.log('Successfully updated top scores with mostRecentAttempts and quiz set names');
+
+                // Refresh the store's data
+                await this.fetchTopScoresFromFirestore();
+
+            } catch (error) {
+                console.error('Error collecting and updating most recent attempts:', error);
+                this.error = 'Failed to update most recent attempts';
+            }
+        }
+    }
+}); 
\ No newline at end of file
diff --git a/src/stores/scoreStore.js b/src/stores/scoreStore.js
new file mode 100644
index 0000000..4166684
--- /dev/null
+++ b/src/stores/scoreStore.js
@@ -0,0 +1,401 @@
+import { defineStore } from 'pinia';
+import {
+    doc,
+    getDoc,
+    setDoc,
+    collection,
+    getDocs,
+    query,
+    where,
+    orderBy,
+    limit,
+    serverTimestamp
+} from 'firebase/firestore';
+import { db } from '../firebase';
+import { useAuthStore } from './authStore';
+import { quizSets } from '../data/quizSets';
+
+export const useScoreStore = defineStore('scores', {
+    state: () => ({
+        topScores: [],
+        allScores: [],
+        totalAvailableQuestions: 0,
+        lastUpdated: null,
+        isLoading: false,
+        error: null
+    }),
+
+    getters: {
+        // Get the next user with a valid email
+        nextEmailUser: (state) => {
+            // Filter users with valid emails (excluding the top 5 users to avoid duplication)
+            const topFiveIds = state.topScores.map(score => score.userId);
+
+            const usersWithEmail = state.allScores.filter(score =>
+                score.email &&
+                score.email !== 'Anonymous' &&
+                !score.email?.includes('undefined') &&
+                !topFiveIds.includes(score.userId) // Exclude users already in top 5
+            );
+
+            console.log('Users with email (excluding top 5):', usersWithEmail);
+
+            // Return the first one (highest score) if available
+            return usersWithEmail.length > 0 ? usersWithEmail[0] : null;
+        }
+    },
+
+    actions: {
+        // Format display name from email
+        formatDisplayName(email) {
+            if (!email || email === 'Anonymous') return 'Anon_user';
+
+            // If it's a valid email, only show the part before the @ symbol
+            if (email.includes('@') && !email.includes('undefined')) {
+                return email.split('@')[0];
+            }
+
+            // Otherwise return the email as is, or Anon_user if it's Anonymous
+            return email === 'Anonymous' ? 'Anon_user' : email;
+        },
+
+        // Calculate total questions from all published quiz sets
+        calculateTotalQuestions() {
+            let total = 0;
+            quizSets.forEach(set => {
+                if (!set.inProgress) { // Only count published quiz sets
+                    total += set.items.length;
+                }
+            });
+            return total;
+        },
+
+        // Save top scores to Firestore
+        async saveTopScoresToFirestore(scores) {
+            try {
+                console.log('Saving top scores to Firestore:', scores);
+
+                // Get current timestamp as a Date object instead of serverTimestamp()
+                const now = new Date();
+
+                // Create a document in the topScores collection
+                const topScoresRef = doc(db, 'topScores', 'latest');
+
+                // Prepare the data to save
+                const topScoresData = {
+                    scores: scores.map(score => ({
+                        userId: score.userId,
+                        displayName: score.displayName,
+                        email: score.email,
+                        totalScore: score.totalScore,
+                        quizCount: score.quizCount,
+                        // Use a regular Date object instead of serverTimestamp()
+                        lastUpdated: now
+                    })),
+                    totalAvailableQuestions: this.totalAvailableQuestions,
+                    // Use serverTimestamp() only at the top level
+                    lastUpdated: serverTimestamp()
+                };
+
+                // Save to Firestore
+                await setDoc(topScoresRef, topScoresData);
+                console.log('Top scores saved successfully');
+
+                // Also save individual user scores
+                for (const score of scores) {
+                    if (score.userId) {
+                        const userScoreRef = doc(db, 'userScores', score.userId);
+                        await setDoc(userScoreRef, {
+                            userId: score.userId,
+                            displayName: score.displayName,
+                            email: score.email,
+                            totalScore: score.totalScore,
+                            quizCount: score.quizCount,
+                            // This is fine because it's not in an array
+                            lastUpdated: serverTimestamp()
+                        }, { merge: true }); // Use merge to update only these fields
+                    }
+                }
+                console.log('Individual user scores saved successfully');
+
+            } catch (err) {
+                console.error('Error saving top scores to Firestore:', err);
+                this.error = 'Failed to save scores';
+            }
+        },
+
+        // Fetch top scores from Firestore
+        async fetchTopScoresFromFirestore() {
+            this.isLoading = true;
+            this.error = null;
+            try {
+                // Get the top scores document from Firestore
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+
+                if (topScoresDoc.exists()) {
+                    const data = topScoresDoc.data();
+                    console.log('Fetched top scores from Firestore:', data);
+
+                    // Set the total available questions
+                    this.totalAvailableQuestions = data.totalAvailableQuestions || this.calculateTotalQuestions();
+
+                    // Get all user documents for the scores to fetch usernames
+                    const processedScores = await Promise.all(
+                        (data.scores || []).map(async (score) => {
+                            if (score.userId) {
+                                const userDoc = await getDoc(doc(db, 'users', score.userId));
+                                // Get username from user document or from existing score data
+                                const username = userDoc.exists() ?
+                                    userDoc.data().username :
+                                    score.username || null;
+
+                                // Format display name consistently
+                                let displayName;
+                                if (username) {
+                                    displayName = username;
+                                } else if (score.email && score.email !== 'Anonymous' && !score.email.includes('undefined') && score.email.includes('@')) {
+                                    displayName = this.formatDisplayName(score.email);
+                                } else {
+                                    displayName = `Anon_${score.userId.substring(0, 6)}...`;
+                                }
+
+                                console.log('Processing score:', {
+                                    userId: score.userId,
+                                    username,
+                                    displayName,
+                                    originalUsername: score.username
+                                });
+
+                                return {
+                                    ...score,
+                                    username,
+                                    displayName
+                                };
+                            }
+                            return {
+                                ...score,
+                                username: null,
+                                displayName: score.userId ? `Anon_${score.userId.substring(0, 6)}...` : 'Anon_user'
+                            };
+                        })
+                    );
+
+                    // Store all scores
+                    this.allScores = processedScores;
+
+                    // Only show top 5 in the list
+                    this.topScores = processedScores.slice(0, 5);
+
+                    this.lastUpdated = data.lastUpdated?.toDate() || new Date();
+                    console.log('Processed scores:', this.topScores);
+                } else {
+                    console.log('No top scores document found in Firestore');
+                    this.topScores = [];
+                    this.allScores = [];
+                }
+            } catch (error) {
+                console.error('Error fetching top scores:', error);
+                this.error = error.message;
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        // Check and update top scores when a quiz is completed
+        async checkAndUpdateTopScores(userId, quizId, score, userEmail) {
+            try {
+                console.log(`Checking if user ${userId} score ${score} on quiz ${quizId} belongs in top 10`);
+
+                // Get the user's document to fetch the username
+                const userDoc = await getDoc(doc(db, 'users', userId));
+                const username = userDoc.exists() ? userDoc.data().username : null;
+
+                // Set display name with preference order: username > email > anonymous format
+                let displayName;
+                if (username) {
+                    displayName = username;
+                } else if (userEmail && userEmail !== 'Anonymous' && !userEmail.includes('undefined') && userEmail.includes('@')) {
+                    displayName = this.formatDisplayName(userEmail);
+                } else {
+                    displayName = `Anon_${userId.substring(0, 6)}...`;
+                }
+
+                // Get current top scores
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+                const data = topScoresDoc.exists() ? topScoresDoc.data() : { scores: [] };
+                let scores = data.scores || [];
+
+                // Find if the user already has a score
+                const existingScoreIndex = scores.findIndex(s => s.userId === userId);
+                const now = new Date();
+
+                if (existingScoreIndex >= 0) {
+                    // Update existing score if the new score is higher
+                    const existingScore = scores[existingScoreIndex];
+                    if (score > existingScore.totalScore) {
+                        scores[existingScoreIndex] = {
+                            ...existingScore,
+                            totalScore: score,
+                            displayName,
+                            username,
+                            email: userEmail,
+                            lastUpdated: now
+                        };
+                        scores.sort((a, b) => b.totalScore - a.totalScore);
+                    }
+                } else {
+                    // Add new score
+                    const newScore = {
+                        userId,
+                        displayName,
+                        username,
+                        email: userEmail,
+                        totalScore: score,
+                        lastUpdated: now
+                    };
+
+                    // Add to scores array if it's in top 10
+                    scores.push(newScore);
+                    scores.sort((a, b) => b.totalScore - a.totalScore);
+                    scores = scores.slice(0, 10); // Keep only top 10
+                }
+
+                // Save updated scores if there were changes
+                await setDoc(topScoresRef, {
+                    scores,
+                    totalAvailableQuestions: this.calculateTotalQuestions(),
+                    lastUpdated: serverTimestamp()
+                });
+
+                console.log('Top scores updated successfully');
+
+                // Refresh the store's data
+                await this.fetchTopScoresFromFirestore();
+
+                return true;
+            } catch (err) {
+                console.error('Error checking and updating top scores:', err);
+                this.error = 'Failed to update scores';
+                return false;
+            }
+        },
+
+        // Fetch top scores (first try from Firestore, then calculate if needed)
+        async fetchTopScores() {
+            return this.fetchTopScoresFromFirestore();
+        },
+
+        // For use by AdminTools.vue
+        // One-time function to collect mostRecentAttempts from userProgress and update topScores
+        async collectAndUpdateMostRecentAttempts() {
+            try {
+                // Get all userProgress documents
+                const progressRef = collection(db, 'userProgress');
+                const progressSnapshot = await getDocs(progressRef);
+
+                // Create a map of quiz set names
+                const quizSetNames = {};
+                // Map quiz IDs to their set names
+                quizSets.forEach((set, index) => {
+                    if (set.display !== "debug") {
+                        // Map both the setName and the numeric index
+                        quizSetNames[set.setName] = set.setName;
+                        quizSetNames[String(index)] = set.setName;
+                    }
+                });
+                // Map legacy ID "0" to "general"
+                quizSetNames["0"] = "general";
+
+                console.log('Quiz set names:', quizSetNames);
+
+                // Group progress by userId
+                const userProgressMap = new Map();
+
+                progressSnapshot.docs.forEach(doc => {
+                    const progressData = doc.data();
+                    const [userId, quizId] = doc.id.split('_');
+
+                    // Map quiz ID to set name
+                    const mappedQuizId = quizId === "0" ? "general" : quizId;
+                    const quizSetName = quizSetNames[mappedQuizId] || quizSets[Number(mappedQuizId)]?.setName || mappedQuizId;
+
+                    if (!userProgressMap.has(userId)) {
+                        userProgressMap.set(userId, new Map());
+                    }
+
+                    const userAttempts = userProgressMap.get(userId);
+                    const existingAttempt = userAttempts.get(mappedQuizId);
+
+                    if (!existingAttempt || progressData.lastUpdated > existingAttempt.lastUpdated) {
+                        userAttempts.set(mappedQuizId, {
+                            totalCorrect: progressData.totalCorrect || 0,
+                            totalAnswered: progressData.totalQuestions || 0,
+                            lastUpdated: progressData.lastUpdated,
+                            quizSetName: quizSetName
+                        });
+                    }
+                });
+
+                // Get current top scores
+                const topScoresRef = doc(db, 'topScores', 'latest');
+                const topScoresDoc = await getDoc(topScoresRef);
+
+                if (!topScoresDoc.exists()) {
+                    console.log('No top scores document found');
+                    return;
+                }
+
+                const data = topScoresDoc.data();
+                let scores = data.scores || [];
+
+                // Update each score with mostRecentAttempts
+                scores = scores.map(score => {
+                    const userAttempts = userProgressMap.get(score.userId);
+                    if (!userAttempts) return score;
+
+                    const mostRecentAttempts = {};
+                    userAttempts.forEach((attempt, quizId) => {
+                        mostRecentAttempts[quizId] = {
+                            totalCorrect: attempt.totalCorrect,
+                            totalAnswered: attempt.totalAnswered,
+                            quizSetName: attempt.quizSetName
+                        };
+                    });
+
+                    // Calculate totalRecentAnswers
+                    const totalRecentAnswers = Object.values(mostRecentAttempts).reduce((sum, attempt) =>
+                        sum + (attempt.totalAnswered || 0), 0);
+
+                    console.log(`Processing user ${score.userId}:`, {
+                        mostRecentAttempts,
+                        totalRecentAnswers
+                    });
+
+                    return {
+                        ...score,
+                        mostRecentAttempts,
+                        totalRecentAnswers
+                    };
+                });
+
+                // Save updated scores
+                await setDoc(topScoresRef, {
+                    ...data,
+                    scores,
+                    lastUpdated: serverTimestamp()
+                });
+
+                console.log('Successfully updated top scores with mostRecentAttempts and quiz set names');
+
+                // Refresh the store's data
+                await this.fetchTopScoresFromFirestore();
+
+            } catch (error) {
+                console.error('Error collecting and updating most recent attempts:', error);
+                this.error = 'Failed to update most recent attempts';
+            }
+        }
+    }
+}); 
\ No newline at end of file
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
new file mode 100644
index 0000000..15be682
--- /dev/null
+++ b/src/views/AboutView.vue
@@ -0,0 +1,213 @@
+<template>
+    <div class="about-container">
+        <div class="flex justify-between">
+            <h1>&nbsp;</h1>
+            <h1 class="flex justify-center">About </h1> <img src="../assets/partners.png" alt="SOR"
+                class="flex justify-end w-32 h-32 mr-20 object-scale-down">
+        </div>
+
+        <section class="about-section">
+            <h2>A community-driven, open-source effort.</h2>
+            <ul>
+                <li class="list-none">
+                    <p @click="showOpenSourceModal" class="text-blue-400 hover:text-blue-300">
+                        <span class="text-blue-400 hover:text-blue-300">What is a Culture of Open Source?</span>
+                    </p>
+                </li>
+            </ul>
+
+        </section>
+
+        <section class="about-section">
+            <h2>Origins</h2>
+            <p>
+                The Science of Reading community has a source of truth problem:
+            </p>
+            <ul>
+                <li>
+                    <a href="https://righttoreadproject.com/2024/07/06/hoping-for-the-best-is-not-a-viable-strategy/"
+                        target="_blank">Hoping for the Best Is Not a Viable Strategy</a> <span
+                        class="text-sm text-gray-300">Margaret Goldberg</span>
+                </li>
+                <li>
+                    <a href="https://www.aei.org/education/the-science-of-reading-is-on-a-winning-streak-and-thats-a-problem/"
+                        target="_blank">The "Science of Reading" Is on a Winning
+                        Streak. And That's a Problem.</a> <span class="text-sm text-gray-300">Robert Pondiscio</span>
+                </li>
+                <li>
+                    <a href="https://seidenbergreading.net/2024/06/24/where-does-the-science-of-reading-go-from-here-2/"
+                        target="_blank">Where does the Science of Reading go from here?</a> <span
+                        class="text-sm text-gray-300">Mark Seidenberg</span>
+                </li>
+            </ul>
+
+            Today, teachers are hard-pressed to find the most current, evidence-based information about the science
+            of reading and structured literacy practices.
+
+        </section>
+
+        <section class="about-section">
+            <h2>Contributing</h2>
+            <p>
+                This app will only make sense when validated and refined by the community.
+            </p>
+            <p>
+                Please consider <router-link to="/QuizSetView" class="">making this better</router-link>.
+            </p>
+            <ul>
+                <li class="list-none text-xs">Repository: <a
+                        href="https://github.com/EdJones/sor-quizzes">github.com/EdJones/sor-quizzes</a>
+                </li>
+            </ul>
+
+        </section>
+
+
+
+
+        <section class="about-section donation-box">
+            <h2>Support This App</h2>
+            <p>
+                I built this as a gift to the structured literacy community and the young learners it can help.
+            </p>
+            <p>
+                While mine is the vision behind
+                <a href="https://skunkworks-edu.com">Skunkworks\edu</a>,
+                I've never
+                been paid
+                for work in K12.
+            </p>
+            <p>
+                Can you help me attend Research Ed events or pay the expenses of this app?
+            </p>
+            <div class="flex justify-end mr-10">
+                <div class="shrink-0 right-4">
+                    <img class="size-10 rounded-full" src="/images/ed_on_superbus.jpg" alt="Avatar">
+                </div>
+                <div class="ms-4">
+                    <div class="text-base font-semibold text-gray-800 dark:text-neutral-400">Ed Jones</div>
+                </div>
+            </div>
+
+            <div class="paypal-button-container">
+                <form action="https://www.paypal.com/donate" method="post" target="_blank">
+                    <input type="hidden" name="hosted_button_id" value="55QUG7FD4HTN4" />
+                    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0"
+                        name="submit" title="PayPal - The safer, easier way to pay online!"
+                        alt="Donate with PayPal button" />
+                </form>
+            </div>
+        </section>
+        <div class="text-xs text-gray-500 mt-8">
+            <a href="https://www.flaticon.com/free-icons/collaboration" title="collaboration icons"
+                class="text-gray-500">Collaboration icons created by small.smiles - Flaticon</a>
+        </div>
+        <OpenSourceModal ref="openSourceModal" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import partners from '../assets/partners.png';
+import OpenSourceModal from '../components/OpenSourceModal.vue';
+
+const openSourceModal = ref(null);
+
+const showOpenSourceModal = () => {
+    openSourceModal.value?.show();
+};
+</script>
+
+<style scoped>
+.about-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    background-color: #222;
+}
+
+.about-section {
+    margin-bottom: .2rem;
+    color: ivory;
+    background-color: #222;
+    padding: 1rem;
+    text-align: left;
+}
+
+.about-section h2 {
+    color: ivory;
+    font-weight: 600;
+}
+
+h1 {
+    color: ivory;
+    margin-bottom: 2rem;
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+h2 {
+    color: ivory;
+    margin-bottom: 1rem;
+}
+
+p {
+    line-height: 1.6;
+    color: ivory;
+    margin-bottom: 1rem;
+}
+
+ul {
+    list-style-type: disc;
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+}
+
+li {
+    line-height: 1.6;
+    color: ivory;
+    margin-bottom: 0.5rem;
+}
+
+a {
+    color: #3498db;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.donation-box {
+    background-color: #c8cbcd;
+    border-radius: 8px;
+    padding: 2rem;
+    margin-top: 2rem;
+    border: 1px solid #212327;
+    color: rgb(55, 19, 19);
+}
+
+.donation-box h2 {
+    color: black;
+}
+
+.donation-box p {
+    color: black;
+}
+
+.paypal-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 1.5rem;
+    color: black;
+}
+
+.paypal-button-container p {
+    color: black;
+}
+
+.paypal-button-container input[type="image"] {
+    max-width: 200px;
+    height: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/AdminPage.vue b/src/views/AdminPage.vue
new file mode 100644
index 0000000..14f151b
--- /dev/null
+++ b/src/views/AdminPage.vue
@@ -0,0 +1,589 @@
+<template>
+    <div class="admin-container">
+        <h1 class="text-2xl font-bold mb-6">Quiz Entries Administration</h1>
+
+        <!-- Add new section for entries with edit history -->
+        
+
+        <!-- Add new section for entries without edit history -->
+        <div class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Entries Without Edit History</h2>
+                <button @click="createInitialHistoryEntries"
+                    :disabled="isProcessing || entriesWithoutHistory.length === 0"
+                    class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                    {{ isProcessing ? 'Processing...' : `Create History (${entriesWithoutHistory.length})` }}
+                </button>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full bg-gray-800 rounded-lg overflow-hidden">
+                    <thead class="bg-gray-900">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                                Title</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                                Author</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                                Status</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                                Date</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                                Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-700">
+                        <tr v-for="entry in entriesWithoutHistory" :key="entry.id"
+                            class="hover:bg-gray-700 transition-colors duration-200">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-white">{{ entry.title }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-gray-300">{{ entry.userEmail || 'Anonymous' }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span :class="[
+                                    'px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full',
+                                    {
+                                        'bg-yellow-200 text-yellow-800': entry.status === 'pending',
+                                        'bg-green-200 text-green-800': entry.status === 'approved',
+                                        'bg-blue-200 text-blue-800': entry.status === 'accepted',
+                                        'bg-red-200 text-red-800': entry.status === 'rejected',
+                                        'bg-gray-200 text-gray-800': entry.status === 'draft',
+                                        'bg-purple-200 text-purple-800': entry.status === 'deleted'
+                                    }
+                                ]">
+                                    {{ entry.status }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                                {{ formatDate(entry.timestamp) }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                                <button @click="viewEntry(entry)"
+                                    class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
+                                    View
+                                </button>
+                                <button @click="editEntry(entry)"
+                                    class="text-green-400 hover:text-green-300 transition-colors duration-200">
+                                    Edit
+                                </button>
+                                <button @click="viewEditHistory(entry)"
+                                    class="text-purple-400 hover:text-purple-300 transition-colors duration-200">
+                                    View History
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div>
+            <h2 class="text-xl font-bold">Entries </h2>
+        </div>
+        <!-- Filters -->
+        <div class="filters-section mb-6 p-4 bg-gray-800 rounded-lg">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="filter-group">
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Status</label>
+                    <select v-model="filters.status" class="w-full bg-gray-700 text-white rounded-md border-gray-600">
+                        <option value="all">All</option>
+                        <option value="pending">Pending Review</option>
+                        <option value="accepted">Accepted</option>
+                        <option value="approved">Approved</option>
+                        <option value="rejected">Rejected</option>
+                        <option value="deleted">Deleted</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Sort By</label>
+                    <select v-model="filters.sortBy" class="w-full bg-gray-700 text-white rounded-md border-gray-600">
+                        <option value="date">Submission Date</option>
+                        <option value="title">Title</option>
+                        <option value="author">Author</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Search</label>
+                    <input type="text" v-model="filters.search" placeholder="Search by title or author..."
+                        class="w-full bg-gray-700 text-white rounded-md border-gray-600 placeholder-gray-400">
+                </div>
+            </div>
+        </div>
+
+        <!-- Quiz Entries Table -->
+        <div class="overflow-x-auto">
+            <table class="min-w-full bg-gray-800 rounded-lg overflow-hidden">
+                <thead class="bg-gray-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Title
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                            Author</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                            Status</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                            Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-700">
+                    <tr v-for="entry in filteredEntries" :key="entry.id"
+                        class="hover:bg-gray-700 transition-colors duration-200">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="text-sm text-white">{{ entry.title }}</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="text-sm text-gray-300">{{ entry.userEmail || 'Anonymous' }}</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span :class="[
+                                'px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full',
+                                {
+                                    'bg-yellow-200 text-yellow-800': entry.status === 'pending',
+                                    'bg-green-200 text-green-800': entry.status === 'approved',
+                                    'bg-blue-200 text-blue-800': entry.status === 'accepted',
+                                    'bg-red-200 text-red-800': entry.status === 'rejected',
+                                    'bg-gray-200 text-gray-800': entry.status === 'draft',
+                                    'bg-purple-200 text-purple-800': entry.status === 'deleted'
+                                }
+                            ]">
+                                {{ entry.status }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                            {{ formatDate(entry.timestamp) }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                            <button @click="viewEntry(entry)"
+                                class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
+                                View
+                            </button>
+                            <button @click="editEntry(entry)"
+                                class="text-green-400 hover:text-green-300 transition-colors duration-200">
+                                Edit
+                            </button>
+                            <template v-if="entry.status === 'pending'">
+                                <button @click="acceptEntry(entry)"
+                                    class="text-green-400 hover:text-green-300 transition-colors duration-200">
+                                    Accept
+                                </button>
+                                <button @click="rejectEntry(entry)"
+                                    class="text-red-400 hover:text-red-300 transition-colors duration-200">
+                                    Reject
+                                </button>
+                            </template>
+                            <template v-if="entry.status === 'accepted'">
+                                <button @click="approveEntry(entry)"
+                                    class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
+                                    Approve
+                                </button>
+                            </template>
+                            <template v-if="entry.status !== 'deleted'">
+                                <button @click="deleteEntry(entry)"
+                                    class="text-purple-400 hover:text-purple-300 transition-colors duration-200">
+                                    Delete
+                                </button>
+                            </template>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Preview Modal -->
+        <div v-if="selectedEntry" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+            <div class="bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold text-white">Quiz Entry Preview</h2>
+                        <button @click="selectedEntry = null" class="text-gray-400 hover:text-gray-300">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    <QuizItem :currentQuizItem="selectedEntry" :itemNum="0" :reviewMode="true" :basicMode="false"
+                        :debug="false" :userAnswer="selectedEntry.correctAnswer" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Edit History Modal -->
+        <div v-if="showEditHistory" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+            <div class="bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold text-white">Edit History for: {{ selectedEntry?.title }}</h2>
+                        <button @click="showEditHistory = false" class="text-gray-400 hover:text-gray-300">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="space-y-4">
+                        <div v-for="history in editHistory" :key="history.id" class="bg-gray-700 p-4 rounded-lg">
+                            <div class="flex justify-between items-start mb-2">
+                                <div class="text-sm text-gray-300">
+                                    <span class="font-semibold">Revision {{ history.revisionNumber }}</span>
+                                    <span class="mx-2">•</span>
+                                    <span>{{ history.userEmail }}</span>
+                                    <span class="mx-2">•</span>
+                                    <span>{{ history.timestamp?.toLocaleString() || 'Unknown date' }}</span>
+                                </div>
+                            </div>
+                            <div class="text-sm text-gray-300 mb-2"><span class="font-semibold">Message:</span> {{
+                                history.versionMessage || 'No message provided' }}</div>
+                            <div class="text-sm text-gray-300">
+                                <span class="font-semibold">Status:</span> {{ history.status }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '../stores/authStore';
+import AdminTools from '../components/AdminTools.vue';
+import { doc, getDoc, collection, query, where, getDocs, orderBy, addDoc, serverTimestamp } from 'firebase/firestore';
+import { db } from '../firebase';
+import { quizStore } from '../stores/quizStore';
+import QuizItem from '../components/QuizItem.vue';
+
+const router = useRouter();
+const authStore = useAuthStore();
+const isAdmin = ref(false);
+const store = quizStore();
+const selectedEntry = ref(null);
+const showEditHistory = ref(false);
+const editHistory = ref([]);
+const isProcessing = ref(false);
+
+const filters = ref({
+    status: 'all',
+    sortBy: 'date',
+    search: ''
+});
+
+onMounted(async () => {
+    if (!authStore.user) {
+        router.push('/');
+        return;
+    }
+
+    // Check if user is admin
+    const userDoc = await getDoc(doc(db, 'users', authStore.user.uid));
+    if (userDoc.exists()) {
+        isAdmin.value = userDoc.data().isAdmin === true;
+    }
+
+    if (!isAdmin.value) {
+        router.push('/');
+    }
+
+    await store.fetchDraftQuizItems();
+    await fetchEditHistory();
+});
+
+// Computed property for filtered and sorted entries
+const filteredEntries = computed(() => {
+    let entries = store.draftQuizItems;
+
+    // Filter by status
+    if (filters.value.status !== 'all') {
+        entries = entries.filter(entry => entry.status === filters.value.status);
+    }
+
+    // Filter by search term
+    if (filters.value.search) {
+        const searchTerm = filters.value.search.toLowerCase();
+        entries = entries.filter(entry =>
+            entry.title?.toLowerCase().includes(searchTerm) ||
+            entry.userEmail?.toLowerCase().includes(searchTerm)
+        );
+    }
+
+    // Sort entries
+    entries = [...entries].sort((a, b) => {
+        switch (filters.value.sortBy) {
+            case 'date':
+                return (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0);
+            case 'title':
+                return (a.title || '').localeCompare(b.title || '');
+            case 'author':
+                return (a.userEmail || '').localeCompare(b.userEmail || '');
+            default:
+                return 0;
+        }
+    });
+
+    return entries;
+});
+
+// Format timestamp to readable date
+const formatDate = (timestamp) => {
+    if (!timestamp) return 'N/A';
+    const date = new Date(timestamp.seconds * 1000);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+};
+
+// View entry details
+const viewEntry = (entry) => {
+    selectedEntry.value = entry;
+};
+
+// Accept entry
+const acceptEntry = async (entry) => {
+    try {
+        await store.acceptQuizItem(entry.id);
+        // Show success message
+        alert('Quiz item accepted successfully!');
+    } catch (error) {
+        console.error('Error accepting entry:', error);
+        alert('Error accepting quiz item: ' + error.message);
+    }
+};
+
+// Reject entry
+const rejectEntry = async (entry) => {
+    try {
+        await store.updateQuizItemStatus(entry.id, 'rejected');
+        await store.fetchDraftQuizItems(); // Refresh the list
+    } catch (error) {
+        console.error('Error rejecting entry:', error);
+    }
+};
+
+// Approve entry
+const approveEntry = async (entry) => {
+    try {
+        await store.approveQuizItem(entry.id);
+        // Show success message
+        alert('Quiz item approved successfully!');
+    } catch (error) {
+        console.error('Error approving entry:', error);
+        alert('Error approving quiz item: ' + error.message);
+    }
+};
+
+// Delete entry
+const deleteEntry = async (entry) => {
+    if (!confirm('Are you sure you want to mark this quiz item as deleted?')) {
+        return;
+    }
+    try {
+        // First update the status
+        await store.updateQuizItemStatus(entry.id, 'deleted');
+
+        // Then record this change in the edit history
+        store.draftQuizEntry = { ...entry };
+        store.lastSavedDraftQuizEntry = { ...entry, status: entry.status }; // Store the previous status
+        await store.recordQuizEdit('Quiz item marked as deleted');
+
+        // Refresh the list
+        await store.fetchDraftQuizItems();
+    } catch (error) {
+        console.error('Error marking entry as deleted:', error);
+        alert('Error marking quiz item as deleted: ' + error.message);
+    }
+};
+
+// Add new computed property for entries with edit history
+const entriesWithHistory = computed(() => {
+    return store.draftQuizItems.filter(entry => entry.hasEditHistory);
+});
+
+// Add new function to fetch edit history
+const fetchEditHistory = async () => {
+    try {
+        const editHistoryRef = collection(db, 'quizEditHistory');
+        const querySnapshot = await getDocs(editHistoryRef);
+
+        // Get unique quiz item IDs from edit history, normalized to strings
+        const quizItemIds = new Set();
+        querySnapshot.forEach(doc => {
+            const quizItemId = doc.data().quizItemId;
+            // Normalize to string to handle both string and numeric IDs
+            quizItemIds.add(String(quizItemId));
+        });
+
+        console.log('Edit history quiz item IDs:', Array.from(quizItemIds));
+        console.log('Quiz entries IDs:', store.draftQuizItems.map(entry => ({ id: entry.id, type: typeof entry.id, title: entry.title })));
+
+        // Fetch ALL items from both collections to check for edit history across all versions
+        const draftsRef = collection(db, 'quizEntries');
+        const permanentRef = collection(db, 'permanentQuizEntries');
+        
+        const [allDraftsSnapshot, allPermanentSnapshot] = await Promise.all([
+            getDocs(query(draftsRef, orderBy('timestamp', 'desc'))),
+            getDocs(query(permanentRef, orderBy('timestamp', 'desc')))
+        ]);
+
+        // Get all item IDs from the database (all versions)
+        const allItemIds = new Set();
+        allDraftsSnapshot.docs.forEach(doc => {
+            allItemIds.add(String(doc.id));
+        });
+        allPermanentSnapshot.docs.forEach(doc => {
+            allItemIds.add(String(doc.id));
+        });
+
+        console.log('All item IDs in database:', Array.from(allItemIds));
+
+        // Mark entries that have edit history, comparing normalized string IDs
+        store.draftQuizItems.forEach(entry => {
+            // Normalize entry ID to string for comparison
+            const normalizedEntryId = String(entry.id);
+            const hasHistory = quizItemIds.has(normalizedEntryId);
+            entry.hasEditHistory = hasHistory;
+            
+            // Debug logging for entries without history
+            if (!hasHistory) {
+                console.log(`Entry "${entry.title}" (ID: ${entry.id}, type: ${typeof entry.id}) has no edit history`);
+            }
+        });
+
+        // Check for edit history across all versions of each item
+        console.log('Checking for edit history across all versions...');
+        for (const entry of store.draftQuizItems) {
+            if (!entry.hasEditHistory) {
+                // Check if any version of this item (by title) has edit history
+                // We need to check all items in the database, not just the filtered list
+                const allItemsWithSameTitle = [
+                    ...allDraftsSnapshot.docs.filter(doc => doc.data().title === entry.title),
+                    ...allPermanentSnapshot.docs.filter(doc => doc.data().title === entry.title)
+                ];
+                
+                const allIdsForTitle = allItemsWithSameTitle.map(doc => String(doc.id));
+                
+                // Check if any of these IDs have edit history
+                const hasHistoryForAnyVersion = allIdsForTitle.some(id => quizItemIds.has(id));
+                
+                if (hasHistoryForAnyVersion) {
+                    console.log(`Found edit history for "${entry.title}" in a different version. All IDs for this title:`, allIdsForTitle);
+                    entry.hasEditHistory = true;
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching edit history:', error);
+    }
+};
+
+// View edit history
+const viewEditHistory = async (entry) => {
+    try {
+        const editHistoryRef = collection(db, 'quizEditHistory');
+        const q = query(
+            editHistoryRef,
+            where('quizItemId', '==', entry.id),
+            orderBy('timestamp', 'desc')
+        );
+
+        const querySnapshot = await getDocs(q);
+        editHistory.value = querySnapshot.docs.map(doc => ({
+            id: doc.id,
+            ...doc.data(),
+            timestamp: doc.data().timestamp?.toDate?.() || null
+        }));
+
+        selectedEntry.value = entry;
+        showEditHistory.value = true;
+    } catch (error) {
+        console.error('Error fetching edit history:', error);
+        alert('Error fetching edit history: ' + error.message);
+    }
+};
+
+// Add new computed property for entries without edit history
+const entriesWithoutHistory = computed(() => {
+    return store.draftQuizItems.filter(entry => !entry.hasEditHistory);
+});
+
+// Add function to create initial history entries
+const createInitialHistoryEntries = async () => {
+    if (!confirm('This will create initial history entries for all quiz items without history. Continue?')) {
+        return;
+    }
+
+    isProcessing.value = true;
+    let successCount = 0;
+    let errorCount = 0;
+
+    try {
+        for (const entry of entriesWithoutHistory.value) {
+            try {
+                // Create the initial history entry
+                const editHistoryRef = collection(db, 'quizEditHistory');
+                await addDoc(editHistoryRef, {
+                    quizItemId: entry.id,
+                    userId: entry.userId || 'system',
+                    userEmail: entry.userEmail || 'system',
+                    timestamp: entry.timestamp || serverTimestamp(),
+                    versionMessage: 'Initial history entry created by admin tool',
+                    revisionNumber: 1,
+                    changes: {
+                        before: null,
+                        after: entry
+                    },
+                    status: entry.status || 'draft'
+                });
+                successCount++;
+            } catch (error) {
+                console.error(`Error creating history for entry ${entry.id}:`, error);
+                errorCount++;
+            }
+        }
+
+        // Refresh the list
+        await store.fetchDraftQuizItems();
+        await fetchEditHistory();
+
+        alert(`Operation completed. Successfully created ${successCount} history entries. ${errorCount} errors occurred.`);
+    } catch (error) {
+        console.error('Error in createInitialHistoryEntries:', error);
+        alert('Error creating history entries: ' + error.message);
+    } finally {
+        isProcessing.value = false;
+    }
+};
+
+// Add the editEntry function in the script section
+const editEntry = (entry) => {
+    router.push(`/quiz-item-editor/${entry.id}`);
+};
+</script>
+
+<style scoped>
+.admin-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.filters-section {
+    backdrop-filter: blur(8px);
+}
+
+input,
+select {
+    padding: 0.5rem;
+    border: 1px solid;
+}
+
+input:focus,
+select:focus {
+    outline: none;
+    ring-width: 2px;
+    ring-offset-width: 2px;
+    ring-color: #3b82f6;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OpenSourceView.vue b/src/views/OpenSourceView.vue
new file mode 100644
index 0000000..f0348e9
--- /dev/null
+++ b/src/views/OpenSourceView.vue
@@ -0,0 +1,210 @@
+<template>
+    <div class="open-source-container">
+        <h1>Open Source Communities</h1>
+
+        <section class="content-section">
+            <h2>Overview</h2>
+            <p>
+                An open source community is a group of individuals who collaborate to develop software, with
+                contributions made voluntarily based on their interests and needs, rather than being assigned tasks by
+                executives. [1, 2]
+            </p>
+            <p>
+                Open source communities are characterized by collaboration, transparency, and a meritocratic approach
+                where contributions are valued based on their merit, fostering a spirit of innovation and shared
+                learning.
+            </p>
+        </section>
+
+        <section class="content-section">
+            <h2>Key Principles and Values</h2>
+            <ul>
+                <li><strong>Collaboration and Transparency:</strong> Open source projects are built through the
+                    collective efforts of individuals, with source code and development processes being openly
+                    accessible.</li>
+                <li><strong>Meritocracy:</strong> Contributions are evaluated based on their quality and impact, rather
+                    than factors like title or position.</li>
+                <li><strong>Openness and Inclusivity:</strong> Open source communities generally welcome contributions
+                    from anyone, regardless of their background or experience.</li>
+                <li><strong>Respect and Reciprocity:</strong> Open source communities value respectful communication and
+                    mutual support among members.</li>
+                <li><strong>Self-Organization:</strong> Open source projects often have a decentralized structure,
+                    allowing for flexibility and adaptability.</li>
+                <li><strong>Freedom to Share:</strong> Open source encourages the free distribution and modification of
+                    software, fostering innovation and experimentation.</li>
+                <li><strong>Volunteerism:</strong> Many open source projects are driven by volunteers who contribute
+                    their time and expertise.</li>
+                <li><strong>Community-Driven Development:</strong> Open source communities are dynamic ecosystems driven
+                    by shared goals, mutual support, and evolving motivations.</li>
+                <li><strong>Learning and Innovation:</strong> Open source communities are spaces where people can learn
+                    from each other, share knowledge, and contribute to the advancement of technology.</li>
+            </ul>
+        </section>
+
+        <section class="content-section">
+            <h2>Key Characteristics</h2>
+            <ul>
+                <li><strong>Decentralized and Collaborative:</strong> Open source projects are typically managed by
+                    developers or programmers who may use the project for various reasons, or by software companies that
+                    have an interest in the project's success. [2, 3]</li>
+                <li><strong>Open Source Software:</strong> Open source software is characterized by its source code
+                    being freely available for anyone to use, study, modify, and distribute. [4, 5]</li>
+                <li><strong>Community Driven:</strong> Open source communities are built around a shared goal of
+                    developing and improving software, with contributions coming from a diverse group of individuals.
+                    [1, 2]</li>
+                <li><strong>Examples of Open Source Software:</strong> Popular examples include Linux, Mozilla Firefox,
+                    WordPress, and Android. [6]</li>
+                <li><strong>Benefits of Open Source:</strong> Open source software offers benefits such as freedom and
+                    flexibility, high quality, lower costs, security, and innovation through community collaboration.
+                    [7, 8]</li>
+                <li><strong>Types of Open Source Communities:</strong> There are various types of open source
+                    communities, including developer communities, open source competence centers, and single-vendor
+                    commercial open source projects. [2, 3, 9, 10]</li>
+                <li><strong>Open Source Organizations:</strong> Organizations like the Apache Software Foundation and
+                    the Open Source Geospatial Foundation provide organizational, legal, and financial support for open
+                    source projects. [11, 12, 13]</li>
+                <li><strong>Open Source Licenses:</strong> Open source licenses grant users permission to use, study,
+                    modify, and distribute the software, with some licenses requiring that any modifications also be
+                    released as open source. [14]</li>
+            </ul>
+        </section>
+
+        <section class="content-section">
+            <h2>How Open Source Communities Work</h2>
+            <ul>
+                <li><strong>Voluntary Contributions:</strong> Individuals contribute to open source projects based on
+                    their interests and expertise, rather than being paid employees. [1, 2]</li>
+                <li><strong>Open Communication:</strong> Open source communities rely on open communication and
+                    collaboration to share ideas, discuss issues, and coordinate development efforts. [15, 16]</li>
+                <li><strong>Version Control Systems:</strong> Tools like Git are used to track changes to the source
+                    code and facilitate collaboration among developers. [16]</li>
+                <li><strong>Community Forums and Mailing Lists:</strong> Open source communities often use forums,
+                    mailing lists, and other online platforms to facilitate communication and discussion among members.
+                    [16]</li>
+                <li><strong>Code Reviews:</strong> Open source projects often have a process of code review, where
+                    developers review each other's code to ensure quality and identify potential issues. [16]</li>
+            </ul>
+        </section>
+
+        <section class="content-section">
+            <h2>References</h2>
+            <ol>
+                <li><a href="https://www.sciencedirect.com/topics/computer-science/open-source-community"
+                        target="_blank">ScienceDirect - Open Source Community</a></li>
+                <li><a href="https://mdubravski.medium.com/common-types-of-open-source-communities-93c9fdd0e84c"
+                        target="_blank">Common Types of Open Source Communities</a></li>
+                <li><a href="https://opensource.com/business/13/6/four-types-organizational-structures-within-open-source-communities"
+                        target="_blank">Four Types of Organizational Structures Within Open Source Communities</a></li>
+                <li><a href="https://www.quora.com/What-are-the-largest-open-source-communities" target="_blank">What
+                        are the largest open source communities?</a></li>
+                <li><a href="https://www.blackduck.com/glossary/what-is-open-source-software.html" target="_blank">What
+                        is Open Source Software?</a></li>
+                <li><a href="https://www.investopedia.com/terms/o/open-source.asp" target="_blank">Open Source
+                        Definition</a></li>
+                <li><a href="https://www.openlogic.com/blog/top-5-benefits-open-source-software" target="_blank">Top 5
+                        Benefits of Open Source Software</a></li>
+                <li><a href="https://skill-mine.com/5-benefits-of-open-source-software-for-your-organization/"
+                        target="_blank">5 Benefits of Open Source Software for Your Organization</a></li>
+                <li><a href="https://www.znetlive.com/blog/8-advantages-of-using-open-source-software/"
+                        target="_blank">8 Advantages of Using Open Source Software</a></li>
+                <li><a href="https://dl.acm.org/doi/10.1007/s10257-010-0149-x" target="_blank">Open Source Software
+                        Development</a></li>
+                <li><a href="https://cyberpanel.net/blog/what-is-apache-server-how-it-works" target="_blank">What is
+                        Apache Server & How it Works</a></li>
+                <li><a href="https://opensource.com/resources/organizations" target="_blank">Open Source
+                        Organizations</a></li>
+                <li><a href="https://wiki.osgeo.org/wiki/British_Columbia_Chapter" target="_blank">OSGeo British
+                        Columbia Chapter</a></li>
+                <li><a href="https://opensource.com/resources/what-open-source" target="_blank">What is Open Source?</a>
+                </li>
+                <li><a href="https://en.wikiversity.org/wiki/Open_community_approach" target="_blank">Open Community
+                        Approach</a></li>
+                <li><a href="https://github.blog/open-source/maintainers/four-steps-toward-building-an-open-source-community/"
+                        target="_blank">Four Steps Toward Building an Open Source Community</a></li>
+            </ol>
+        </section>
+
+        <div class="ai-note">
+            <p>
+                <strong>Note:</strong> Generated by Google AI on 3/20/25.
+            </p>
+            <p>
+                Generative AI is experimental.
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'OpenSourceView'
+}
+</script>
+
+<style scoped>
+.open-source-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    color: ivory;
+    background-color: #222;
+}
+
+.content-section {
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background-color: #333;
+    border-radius: 8px;
+}
+
+h1 {
+    color: ivory;
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+}
+
+h2 {
+    color: ivory;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+
+p {
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+
+ul,
+ol {
+    list-style-type: none;
+    padding-left: 1rem;
+}
+
+li {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+strong {
+    color: #3498db;
+}
+
+a {
+    color: #3498db;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.ai-note {
+    margin-top: 2rem;
+    padding: 1rem;
+    background-color: #444;
+    border-radius: 4px;
+    text-align: center;
+    font-style: italic;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/QuizItemEditor.vue b/src/views/QuizItemEditor.vue
new file mode 100644
index 0000000..ede09ee
--- /dev/null
+++ b/src/views/QuizItemEditor.vue
@@ -0,0 +1,2374 @@
+<template>
+  <div class="new-item-form">
+    <div v-if="submitStatus.show" :class="['status-message', submitStatus.type]">
+      <div class="button-group mb-4">
+        <button @click="resetForm" class="preview-toggle">
+          Add Another Quiz Item
+        </button>
+        <button @click="returnToQuizzes" class="preview-toggle">
+          Return to Quizzes
+        </button>
+      </div>
+
+      {{ submitStatus.message }}
+
+      <div v-if="submitStatus.type === 'success' && submittedEntry" class="submitted-preview mt-4">
+        <h3>Your submitted quiz item:</h3>
+        <QuizItem :currentQuizItem="submittedEntry" :itemNum="0" :reviewMode="true" :basicMode="false"
+          :userAnswer="submittedEntry.correctAnswer" :debug="false" />
+      </div>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <span class="preview-controls-text">{{ store.draftQuizEntry.originalId ? `Editing Quiz Item:
+        ${store.draftQuizEntry.originalId}` : 'Create New Quiz Item' }}</span>
+      <div class="preview-controls">
+        <div class="button-group">
+          <div class="flex flex-col gap-1">
+            <button type="button" @click="returnToQuizzes"
+              :class="['return-button smaller-button', { active: returnButton.active }]">
+              Return to Quizzes
+            </button>
+            <button type="button" @click="$router.push('/quizSetView')"
+              class="return-button smaller-button bg-indigo-600 hover:bg-indigo-700 text-white">
+              View Quiz Sets
+            </button>
+          </div>
+          <button type="button" @click="togglePreviewMode" :class="['preview-toggle', { active: previewMode }]">
+            {{ previewMode ? 'Edit Mode' : 'Preview Mode' }}
+          </button>
+          <button type="button" @click="jsonPreviewMode = !jsonPreviewMode"
+            :class="['preview-toggle', { active: jsonPreviewMode }]">
+            {{ jsonPreviewMode ? 'Hide JSON' : 'Show JSON' }}
+          </button>
+          <button @click="$router.push('/issues')" class="github-button">
+            View/Add Issues
+          </button>
+
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!auth.user" class="alert alert-info mb-4">
+      <p><span class="text-yellow-500">You are currently using the quiz builder anonymously.</span> Your quiz
+        entry
+        will be saved as a draft.</p>
+      <p>To submit your quiz for review, please <router-link to="/login" class="text-blue-600 hover:text-blue-800">sign
+          in</router-link>.</p>
+    </div>
+
+    <div v-if="auth.user && auth.user.isAnonymous" class="alert alert-info mb-4">
+      <p>You are currently using the quiz builder anonymously. Your quiz entry will be saved as a draft.</p>
+      <p>To submit your quiz for review, please <router-link to="/login" class="text-blue-600 hover:text-blue-800">sign
+          in</router-link> with an email account.</p>
+    </div>
+
+    <div v-if="jsonPreviewMode" class="json-preview">
+      <div class="json-header">
+        <h3>JSON Preview</h3>
+        <button @click="copyToClipboard" class="copy-button">
+          <span v-if="!copySuccess">Copy JSON</span>
+          <span v-else>Copied!</span>
+        </button>
+      </div>
+      <VueJsonPretty :data="newEntry" :deep="2" :showLength="true" :showDoubleQuotes="false" :showLine="true"
+        :selectableType="'single'" />
+    </div>
+
+    <div v-if="previewMode">
+      <div class="preview-container">
+        <QuizItem :currentQuizItem="newEntry" :itemNum="0" :reviewMode="true" :basicMode="false" :previewMode="true"
+          :userAnswer="newEntry.correctAnswer" :debug="false" />
+      </div>
+    </div>
+
+    <form v-else @submit.prevent="submitForm">
+      <!-- Template selector -->
+      <div class="template-selector">
+        <div class="form1-section bg-indigo-950/10 dark:bg-indigo-950/30">
+          <div class="form-group1">
+            <QuizSelector v-if="route.params.id === 'new'" :existingItem="null" />
+            <QuizSelector v-else :existingItem="store.draftQuizEntry" />
+          </div>
+        </div>
+      </div>
+      <div class="form-group-section flex justify-end">
+        <!--Item History-->
+        <button type="button" @click="showVersionHistory = true" class="flex items-center gap-1 px-3 py-1 text-sm
+        border-green-400 bg-gray-700 hover:bg-gray-600 text-green-400 rounded-lg transition-colors duration-200 mr-9"
+          v-if="store.draftQuizEntry?.id || store.draftQuizEntry?.originalId">
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Version History
+        </button>
+      </div>
+      <!-- Question Group -->
+      <div class="form-group-section question-section">
+        <div class="question-content-wrapper">
+          <!-- Basic Information -->
+          <details>
+            <summary class="section-summary">
+              <span class="summary-text">Pose a Question</span>
+              <span class="arrow-indicator">▼</span>
+            </summary>
+            <div class="form-section">
+              <div class="form-group">
+                <label for="title">Title:</label>
+                <input type="text" id="title" v-model="newEntry.title"
+                  :class="['form-input', { 'invalid-field': invalidFields.has('title') }]"
+                  :data-error="getFieldError('title')" :placeholder="newEntry.title"
+                  @focus="handleFocus($event, 'title')" @blur="handleBlur($event, 'title')" />
+              </div>
+              <div class="form-group">
+                <label for="subtitle">Subtitle:</label>
+                <input type="text" id="subtitle" v-model="newEntry.subtitle"
+                  :class="['form-input', { 'invalid-field': invalidFields.has('subtitle') }]"
+                  :data-error="getFieldError('subtitle')" :placeholder="newEntry.subtitle"
+                  @focus="handleFocus($event, 'subtitle')" @blur="handleBlur($event, 'subtitle')" />
+              </div>
+              <div class="form-group">
+                <label for="question">Question:</label>
+                <textarea id="question" v-model="newEntry.Question"
+                  :class="['form-textarea', { 'invalid-field': invalidFields.has('Question') }]"
+                  :data-error="getFieldError('Question')" :placeholder="newEntry.Question"
+                  @focus="handleFocus($event, 'Question')" @blur="handleBlur($event, 'Question')"></textarea>
+              </div>
+              <div class="form-group">
+                <label for="questionP2">Question Line 2 (optional):</label>
+                <textarea id="questionP2" v-model="newEntry.questionP2"
+                  :class="['form-textarea', { 'invalid-field': invalidFields.has('questionP2') }]"
+                  :data-error="getFieldError('questionP2')" :placeholder="newEntry.questionP2"
+                  @focus="handleFocus($event, 'questionP2')" @blur="handleBlur($event, 'questionP2')"></textarea>
+              </div>
+            </div>
+          </details>
+
+          <!-- Multiple Choice Options -->
+          <details>
+            <summary class="section-summary">
+              <span class="summary-text">
+                Add/Edit Answer Options
+                <span v-if="hasAnswerSectionErrors" class="section-error-indicator"
+                  title="This section contains validation errors">⚠️</span>
+              </span>
+              <span class="arrow-indicator">▼</span>
+            </summary>
+            <div class="form-section">
+              <!-- Answer Type Selection -->
+              <div class="form-group">
+                <label for="answer-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Answer Type
+                </label>
+                <select id="answer-type" v-model="newEntry.answer_type"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                  <option value="mc">Multiple Choice (Single Answer)</option>
+                  <option value="ms">Multiple Choice (Multiple Answers)</option>
+                  <option value="true_false">True/False</option>
+                  <option value="short_answer">Short Answer</option>
+                  <option value="sortable">Sortable List</option>
+                </select>
+              </div>
+
+              <!-- Options -->
+              <div v-if="newEntry.answer_type === 'mc' || newEntry.answer_type === 'ms'" class="space-y-4">
+                <div v-for="n in 6" :key="n" class="form-group">
+                  <label :for="'option' + n">Option {{ n }}:</label>
+                  <div class="flex items-center gap-2">
+                    <input type="text" :id="'option' + n" v-model="newEntry['option' + n]"
+                      :class="['form-input flex-1', { 'invalid-field': invalidFields.has('option' + n) }]"
+                      @focus="handleFocus($event, 'option' + n)" @blur="handleBlur($event, 'option' + n)" />
+
+                    <!-- Single correct answer for MC -->
+                    <template v-if="newEntry.answer_type === 'mc'">
+                      <input type="radio" :value="n" v-model="newEntry.correctAnswer" :name="'correct-answer'"
+                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 dark:bg-gray-700" />
+                      <label :for="'option' + n" class="text-sm text-gray-600 dark:text-gray-400">
+                      </label>
+                    </template>
+
+                    <!-- Multiple correct answers for MS -->
+                    <template v-else>
+                      <input type="checkbox" :value="n" v-model="newEntry.correctAnswers"
+                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 dark:bg-gray-700" />
+                      <label :for="'option' + n" class="text-sm text-gray-600 dark:text-gray-400">
+                      </label>
+                    </template>
+                  </div>
+                </div>
+
+                <!-- None of the Above toggle for multiple select -->
+                <div v-if="newEntry.answer_type === 'ms'" class="form-group mt-4">
+                  <div class="flex items-center gap-2">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Include "None of the Above" option
+                    </label>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" v-model="newEntry.hasNoneOfTheAbove" class="sr-only peer" @change="handleNoneOfTheAboveToggle">
+                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <!-- Explanation toggle -->
+          <div class="section-summary" @click="showExplanationSection = !showExplanationSection">
+            <span class="summary-text">
+              Add/Edit Explanation Section
+              <span v-if="hasExplanationSectionErrors" class="section-error-indicator"
+                title="This section contains validation errors">⚠️</span>
+            </span>
+            <span class="arrow-indicator" :class="{ 'rotated': !showExplanationSection }">▼</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Wrap explanation section in v-show -->
+      <div v-show="showExplanationSection" class="form-group-section explanation-section">
+        <div class="explanation-toggles">
+          <button type="button" @click="activeSection = activeSection === 'explanations' ? '' : 'explanations'"
+            :class="['section-button', { active: activeSection === 'explanations' }]">
+            Explanations
+          </button>
+          <button type="button" @click="activeSection = activeSection === 'media' ? '' : 'media'"
+            :class="['section-button', { active: activeSection === 'media' }]">
+            Media
+          </button>
+          <button type="button" @click="activeSection = activeSection === 'podcasts' ? '' : 'podcasts'"
+            :class="['section-button', { active: activeSection === 'podcasts' }]">
+            Podcasts
+          </button>
+          <button type="button" @click="handleCitationsClick"
+            :class="['section-button', { active: activeSection === 'citations' }]">
+            Citations
+          </button>
+          <button type="button" @click="handleResourcesClick"
+            :class="['section-button', { active: activeSection === 'resources' }]">
+            Resources
+          </button>
+          <button type="button" @click="activeSection = activeSection === 'cautions' ? '' : 'cautions'"
+            :class="['section-button', { active: activeSection === 'cautions' }]">
+            Cautions
+          </button>
+          <button type="button" @click="activeSection = activeSection === 'closing' ? '' : 'closing'"
+            :class="['section-button', { active: activeSection === 'closing' }]">
+            Closing
+          </button>
+        </div>
+
+        <div class="explanation-content-wrapper">
+          <!-- Explanations -->
+          <div v-show="activeSection === 'explanations'" class="form-section">
+            <div class="form-group">
+              <label for="explanation">Primary Explanation:</label>
+              <textarea id="explanation" v-model="newEntry.explanation"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('explanation') }]"
+                :data-error="getFieldError('explanation')" :placeholder="newEntry.explanation"
+                @focus="handleFocus($event, 'explanation')" @blur="handleBlur($event, 'explanation')"></textarea>
+            </div>
+            <div class="form-group">
+              <label for="explanation2">Secondary Explanation:</label>
+              <textarea id="explanation2" v-model="newEntry.explanation2"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('explanation2') }]"
+                :data-error="getFieldError('explanation2')" :placeholder="newEntry.explanation2"
+                @focus="handleFocus($event, 'explanation2')" @blur="handleBlur($event, 'explanation2')"></textarea>
+            </div>
+          </div>
+
+          <!-- Media -->
+          <div v-show="activeSection === 'media'" class="form-section">
+            <div class="form-group">
+              <label for="videoId">YouTube Video ID:</label>
+              <input type="text" id="videoId" v-model="newEntry.videoId"
+                :class="['form-input', { 'invalid-field': invalidFields.has('videoId') }]"
+                :data-error="getFieldError('videoId')" :placeholder="newEntry.videoId"
+                @focus="handleFocus($event, 'videoId')" @blur="handleBlur($event, 'videoId')" />
+            </div>
+            <div class="form-group">
+              <label for="imageUrl">Image URL:</label>
+              <input type="text" id="imageUrl" v-model="newEntry.imageUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('imageUrl') }]"
+                :data-error="getFieldError('imageUrl')" :placeholder="newEntry.imageUrl"
+                @focus="handleFocus($event, 'imageUrl')" @blur="handleBlur($event, 'imageUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="imageAltText">Image Alt Text:</label>
+              <input type="text" id="imageAltText" v-model="newEntry.imageAltText"
+                :class="['form-input', { 'invalid-field': invalidFields.has('imageAltText') }]"
+                :data-error="getFieldError('imageAltText')" :placeholder="newEntry.imageAltText"
+                @focus="handleFocus($event, 'imageAltText')" @blur="handleBlur($event, 'imageAltText')" />
+            </div>
+          </div>
+
+          <!-- Podcast Episodes -->
+          <div v-show="activeSection === 'podcasts'" class="form-section">
+            <div class="form-group">
+              <label for="podcastEpisode1-title">Episode 1 Title:</label>
+              <input type="text" id="podcastEpisode1-title" v-model="newEntry.podcastEpisode.title"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.title') }]"
+                :data-error="getFieldError('podcastEpisode.title')" :placeholder="newEntry.podcastEpisode.title"
+                @focus="handleFocus($event, 'podcastEpisode.title')"
+                @blur="handleBlur($event, 'podcastEpisode.title')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-url">Episode 1 URL:</label>
+              <input type="text" id="podcastEpisode1-url" v-model="newEntry.podcastEpisode.EpisodeUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.EpisodeUrl') }]"
+                :data-error="getFieldError('podcastEpisode.EpisodeUrl')"
+                :placeholder="newEntry.podcastEpisode.EpisodeUrl"
+                @focus="handleFocus($event, 'podcastEpisode.EpisodeUrl')"
+                @blur="handleBlur($event, 'podcastEpisode.EpisodeUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-audio">Episode 1 Audio URL:</label>
+              <input type="text" id="podcastEpisode1-audio" v-model="newEntry.podcastEpisode.audioUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.audioUrl') }]"
+                :data-error="getFieldError('podcastEpisode.audioUrl')" :placeholder="newEntry.podcastEpisode.audioUrl"
+                @focus="handleFocus($event, 'podcastEpisode.audioUrl')"
+                @blur="handleBlur($event, 'podcastEpisode.audioUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-desc">Episode 1 Description:</label>
+              <textarea id="podcastEpisode1-desc" v-model="newEntry.podcastEpisode.description"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('podcastEpisode.description') }]"
+                :data-error="getFieldError('podcastEpisode.description')"
+                :placeholder="newEntry.podcastEpisode.description"
+                @focus="handleFocus($event, 'podcastEpisode.description')"
+                @blur="handleBlur($event, 'podcastEpisode.description')"></textarea>
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-time">Episode 1 Start Time (seconds):</label>
+              <input type="number" id="podcastEpisode1-time" v-model="newEntry.podcastEpisode.podcastStartTime"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.podcastStartTime') }]"
+                :data-error="getFieldError('podcastEpisode.podcastStartTime')" min="0"
+                :placeholder="newEntry.podcastEpisode.podcastStartTime"
+                @focus="handleFocus($event, 'podcastEpisode.podcastStartTime')"
+                @blur="handleBlur($event, 'podcastEpisode.podcastStartTime')" />
+            </div>
+
+            <!-- Add Snipd Snip fields for Episode 1 -->
+            <div class="form-group">
+              <label for="podcastEpisode1-snipd-url">Episode 1 Snipd URL:</label>
+              <input type="text" id="podcastEpisode1-snipd-url" v-model="newEntry.podcastEpisode.snipdUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.snipdUrl') }]"
+                :data-error="getFieldError('podcastEpisode.snipdUrl')" 
+                :placeholder="newEntry.podcastEpisode.snipdUrl"
+                @focus="handleFocus($event, 'podcastEpisode.snipdUrl')"
+                @blur="handleBlur($event, 'podcastEpisode.snipdUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-snipd-title">Episode 1 Snipd Title:</label>
+              <input type="text" id="podcastEpisode1-snipd-title" v-model="newEntry.podcastEpisode.snipdTitle"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode.snipdTitle') }]"
+                :data-error="getFieldError('podcastEpisode.snipdTitle')" 
+                :placeholder="newEntry.podcastEpisode.snipdTitle"
+                @focus="handleFocus($event, 'podcastEpisode.snipdTitle')"
+                @blur="handleBlur($event, 'podcastEpisode.snipdTitle')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode1-snipd-description">Episode 1 Snipd Description:</label>
+              <textarea id="podcastEpisode1-snipd-description" v-model="newEntry.podcastEpisode.snipdDescription"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('podcastEpisode.snipdDescription') }]"
+                :data-error="getFieldError('podcastEpisode.snipdDescription')"
+                :placeholder="newEntry.podcastEpisode.snipdDescription"
+                @focus="handleFocus($event, 'podcastEpisode.snipdDescription')"
+                @blur="handleBlur($event, 'podcastEpisode.snipdDescription')"></textarea>
+            </div>
+
+            <hr class="section-divider">
+
+            <div class="form-group">
+              <label for="podcastEpisode2-title">Episode 2 Title:</label>
+              <input type="text" id="podcastEpisode2-title" v-model="newEntry.podcastEpisode2.title"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.title') }]"
+                :data-error="getFieldError('podcastEpisode2.title')" :placeholder="newEntry.podcastEpisode2.title"
+                @focus="handleFocus($event, 'podcastEpisode2.title')"
+                @blur="handleBlur($event, 'podcastEpisode2.title')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-url">Episode 2 URL:</label>
+              <input type="text" id="podcastEpisode2-url" v-model="newEntry.podcastEpisode2.EpisodeUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.EpisodeUrl') }]"
+                :data-error="getFieldError('podcastEpisode2.EpisodeUrl')"
+                :placeholder="newEntry.podcastEpisode2.EpisodeUrl"
+                @focus="handleFocus($event, 'podcastEpisode2.EpisodeUrl')"
+                @blur="handleBlur($event, 'podcastEpisode2.EpisodeUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-audio">Episode 2 Audio URL:</label>
+              <input type="text" id="podcastEpisode2-audio" v-model="newEntry.podcastEpisode2.audioUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.audioUrl') }]"
+                :data-error="getFieldError('podcastEpisode2.audioUrl')" :placeholder="newEntry.podcastEpisode2.audioUrl"
+                @focus="handleFocus($event, 'podcastEpisode2.audioUrl')"
+                @blur="handleBlur($event, 'podcastEpisode2.audioUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-desc">Episode 2 Description:</label>
+              <textarea id="podcastEpisode2-desc" v-model="newEntry.podcastEpisode2.description"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('podcastEpisode2.description') }]"
+                :data-error="getFieldError('podcastEpisode2.description')"
+                :placeholder="newEntry.podcastEpisode2.description"
+                @focus="handleFocus($event, 'podcastEpisode2.description')"
+                @blur="handleBlur($event, 'podcastEpisode2.description')"></textarea>
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-time">Episode 2 Start Time (seconds):</label>
+              <input type="number" id="podcastEpisode2-time" v-model="newEntry.podcastEpisode2.podcastStartTime"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.podcastStartTime') }]"
+                :data-error="getFieldError('podcastEpisode2.podcastStartTime')" min="0"
+                :placeholder="newEntry.podcastEpisode2.podcastStartTime"
+                @focus="handleFocus($event, 'podcastEpisode2.podcastStartTime')"
+                @blur="handleBlur($event, 'podcastEpisode2.podcastStartTime')" />
+            </div>
+
+            <!-- Add Snipd Snip fields for Episode 2 -->
+            <div class="form-group">
+              <label for="podcastEpisode2-snipd-url">Episode 2 Snipd URL:</label>
+              <input type="text" id="podcastEpisode2-snipd-url" v-model="newEntry.podcastEpisode2.snipdUrl"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.snipdUrl') }]"
+                :data-error="getFieldError('podcastEpisode2.snipdUrl')" 
+                :placeholder="newEntry.podcastEpisode2.snipdUrl"
+                @focus="handleFocus($event, 'podcastEpisode2.snipdUrl')"
+                @blur="handleBlur($event, 'podcastEpisode2.snipdUrl')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-snipd-title">Episode 2 Snipd Title:</label>
+              <input type="text" id="podcastEpisode2-snipd-title" v-model="newEntry.podcastEpisode2.snipdTitle"
+                :class="['form-input', { 'invalid-field': invalidFields.has('podcastEpisode2.snipdTitle') }]"
+                :data-error="getFieldError('podcastEpisode2.snipdTitle')" 
+                :placeholder="newEntry.podcastEpisode2.snipdTitle"
+                @focus="handleFocus($event, 'podcastEpisode2.snipdTitle')"
+                @blur="handleBlur($event, 'podcastEpisode2.snipdTitle')" />
+            </div>
+            <div class="form-group">
+              <label for="podcastEpisode2-snipd-description">Episode 2 Snipd Description:</label>
+              <textarea id="podcastEpisode2-snipd-description" v-model="newEntry.podcastEpisode2.snipdDescription"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('podcastEpisode2.snipdDescription') }]"
+                :data-error="getFieldError('podcastEpisode2.snipdDescription')"
+                :placeholder="newEntry.podcastEpisode2.snipdDescription"
+                @focus="handleFocus($event, 'podcastEpisode2.snipdDescription')"
+                @blur="handleBlur($event, 'podcastEpisode2.snipdDescription')"></textarea>
+            </div>
+          </div>
+
+          <!-- Citations -->
+          <div v-show="activeSection === 'citations'" class="form-section">
+            <div v-for="(citation, index) in newEntry.citations" :key="index" class="citation-group">
+              <h3>Citation {{ index + 1 }}</h3>
+              <div class="form-group">
+                <label :for="`citation-${index}-title`">Title:</label>
+                <input type="text" :id="`citation-${index}-title`" v-model="citation.title"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`citation-${index}-title`) }]"
+                  :data-error="getFieldError(`citation-${index}-title`)" :placeholder="citation.title"
+                  @focus="handleFocus($event, `citation-${index}-title`)"
+                  @blur="handleBlur($event, `citation-${index}-title`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`citation-${index}-author`">Author:</label>
+                <input type="text" :id="`citation-${index}-author`" v-model="citation.author"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`citation-${index}-author`) }]"
+                  :data-error="getFieldError(`citation-${index}-author`)" :placeholder="citation.author"
+                  @focus="handleFocus($event, `citation-${index}-author`)"
+                  @blur="handleBlur($event, `citation-${index}-author`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`citation-${index}-url`">URL:</label>
+                <input type="text" :id="`citation-${index}-url`" v-model="citation.url"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`citation-${index}-url`) }]"
+                  :data-error="getFieldError(`citation-${index}-url`)" :placeholder="citation.url"
+                  @focus="handleFocus($event, `citation-${index}-url`)"
+                  @blur="handleBlur($event, `citation-${index}-url`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`citation-${index}-year`">Year:</label>
+                <input type="text" :id="`citation-${index}-year`" v-model="citation.year"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`citation-${index}-year`) }]"
+                  :data-error="getFieldError(`citation-${index}-year`)" :placeholder="citation.year"
+                  @focus="handleFocus($event, `citation-${index}-year`)"
+                  @blur="handleBlur($event, `citation-${index}-year`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`citation-${index}-image`">Image URL:</label>
+                <input type="text" :id="`citation-${index}-image`" v-model="citation.imageUrl"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`citation-${index}-image`) }]"
+                  :data-error="getFieldError(`citation-${index}-image`)" :placeholder="citation.imageUrl"
+                  @focus="handleFocus($event, `citation-${index}-image`)"
+                  @blur="handleBlur($event, `citation-${index}-image`)" />
+              </div>
+            </div>
+            <button type="button" @click="addCitation" class="add-button">Add Another Citation</button>
+          </div>
+
+          <!-- Resources -->
+          <div v-show="activeSection === 'resources'" class="form-section">
+            <div v-for="(resource, index) in newEntry.resources" :key="index" class="resource-group">
+              <h3>Resource {{ index + 1 }}</h3>
+              <div class="form-group">
+                <label :for="`resource-${index}-title`">Title:</label>
+                <input type="text" :id="`resource-${index}-title`" v-model="resource.title"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`resource-${index}-title`) }]"
+                  :data-error="getFieldError(`resource-${index}-title`)" :placeholder="resource.title"
+                  @focus="handleFocus($event, `resource-${index}-title`)"
+                  @blur="handleBlur($event, `resource-${index}-title`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`resource-${index}-author`">Author:</label>
+                <input type="text" :id="`resource-${index}-author`" v-model="resource.author"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`resource-${index}-author`) }]"
+                  :data-error="getFieldError(`resource-${index}-author`)" :placeholder="resource.author"
+                  @focus="handleFocus($event, `resource-${index}-author`)"
+                  @blur="handleBlur($event, `resource-${index}-author`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`resource-${index}-url`">URL:</label>
+                <input type="text" :id="`resource-${index}-url`" v-model="resource.url"
+                  :class="['form-input', { 'invalid-field': invalidFields.has(`resource-${index}-url`) }]"
+                  :data-error="getFieldError(`resource-${index}-url`)" :placeholder="resource.url"
+                  @focus="handleFocus($event, `resource-${index}-url`)"
+                  @blur="handleBlur($event, `resource-${index}-url`)" />
+              </div>
+              <div class="form-group">
+                <label :for="`resource-${index}-description`">Description:</label>
+                <textarea :id="`resource-${index}-description`" v-model="resource.description"
+                  :class="['form-textarea', { 'invalid-field': invalidFields.has(`resource-${index}-description`) }]"
+                  :data-error="getFieldError(`resource-${index}-description`)" :placeholder="resource.description"
+                  @focus="handleFocus($event, `resource-${index}-description`)"
+                  @blur="handleBlur($event, `resource-${index}-description`)"></textarea>
+              </div>
+            </div>
+            <button type="button" @click="addResource" class="add-button">Add Another Resource</button>
+          </div>
+
+          <!-- Cautions -->
+          <div v-show="activeSection === 'cautions'" class="form-section">
+            <div class="form-group">
+              <label for="cautionLevel">Caution Level:</label>
+              <input type="text" id="cautionLevel" v-model="newEntry.cautionLevel"
+                :class="['form-input', { 'invalid-field': invalidFields.has('cautionLevel') }]"
+                :data-error="getFieldError('cautionLevel')" :placeholder="newEntry.cautionLevel"
+                @focus="handleFocus($event, 'cautionLevel')" @blur="handleBlur($event, 'cautionLevel')" />
+            </div>
+            <div class="form-group">
+              <label for="caution">Caution Text:</label>
+              <textarea id="caution" v-model="newEntry.caution"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('caution') }]"
+                :data-error="getFieldError('caution')" :placeholder="newEntry.caution"
+                @focus="handleFocus($event, 'caution')" @blur="handleBlur($event, 'caution')"></textarea>
+            </div>
+          </div>
+
+          <!-- Closing -->
+          <div v-show="activeSection === 'closing'" class="form-section">
+            <div class="form-group">
+              <label for="closingText">Closing Text:</label>
+              <textarea id="closingText" v-model="newEntry.closingText"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('closingText') }]"
+                :data-error="getFieldError('closingText')" :placeholder="newEntry.closingText"
+                @focus="handleFocus($event, 'closingText')" @blur="handleBlur($event, 'closingText')"></textarea>
+            </div>
+            <div class="form-group">
+              <label for="closingText2">Additional Closing Text:</label>
+              <textarea id="closingText2" v-model="newEntry.closingText2"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('closingText2') }]"
+                :data-error="getFieldError('closingText2')" :placeholder="newEntry.closingText2"
+                @focus="handleFocus($event, 'closingText2')" @blur="handleBlur($event, 'closingText2')"></textarea>
+            </div>
+            <div class="form-group">
+              <label for="modal">Modal Content:</label>
+              <textarea id="modal" v-model="newEntry.modal"
+                :class="['form-textarea', { 'invalid-field': invalidFields.has('modal') }]"
+                :data-error="getFieldError('modal')" :placeholder="newEntry.modal" @focus="handleFocus($event, 'modal')"
+                @blur="handleBlur($event, 'modal')"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4 flex justify-between items-center">
+        <div class="flex gap-2">
+          <button type="button" @click="saveDraft"
+            class="px-6 py-2 bg-black hover:bg-gray-900 text-[#02b87d] rounded-lg flex items-center transition-colors border-2 border-[#02b87d]">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 4v16a2 2 0 002 2h12a2 2 0 002-2V8.342a2 2 0 00-.602-1.43l-4.44-4.342A2 2 0 0013.56 2H6a2 2 0 00-2 2z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6" />
+            </svg>
+            Save Draft
+          </button>
+        </div>
+        <button type="submit" :class="[
+          'submit-btn',
+          {
+            'submit-btn-disabled': !canSubmit,
+            'submit-btn-ready': canSubmit
+          }
+        ]" :disabled="!canSubmit" :title="submitButtonTitle">
+          Submit for Review
+        </button>
+      </div>
+    </form>
+
+    <!-- Save status indicator -->
+    <div v-if="saveStatus.show" :class="['save-status-indicator', saveStatus.type]" role="status" aria-live="polite">
+      {{ saveStatus.message }}
+    </div>
+
+    <ProgressSteps :currentStep="currentStep" />
+
+    <!-- Keep VersionInfoModal here, outside of any v-if conditions -->
+    <VersionInfoModal @save="handleSaveDraftWithVersion" ref="versionInfoModal" />
+
+    <!-- Add this before the closing </div> tag of the template -->
+    <VersionHistoryModal :show="showVersionHistory" :quiz-item-id="store.draftQuizEntry?.id"
+      :original-id="store.draftQuizEntry?.originalId" @close="showVersionHistory = false" />
+  </div>
+</template>
+
+<script>
+import { quizStore } from '../stores/quizStore';
+import { useAuthStore } from '../stores/authStore';
+import QuizItem from '../components/QuizItem.vue';
+import VueJsonPretty from 'vue-json-pretty'
+import 'vue-json-pretty/lib/styles.css'
+import { quizEntries } from '../data/quiz-items';
+import { ref, watch, onMounted, computed } from 'vue';
+import ProgressSteps from '../components/ProgressSteps.vue';
+import { useRoute, useRouter } from 'vue-router';
+import QuizSelector from '../components/QuizSelector.vue';
+import VersionInfoModal from '../components/VersionInfoModal.vue';
+import VersionHistoryModal from '../components/VersionHistoryModal.vue';
+import { collection, query, where, orderBy, limit, getDocs, addDoc, doc, updateDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+import { serverTimestamp } from 'firebase/firestore';
+
+export default {
+  components: {
+    QuizItem,
+    VueJsonPretty,
+    QuizSelector,
+    ProgressSteps,
+    VersionInfoModal,
+    VersionHistoryModal
+  },
+  setup() {
+    const store = quizStore();
+    const auth = useAuthStore();
+    const route = useRoute();
+    const router = useRouter();
+    const showVersionHistory = ref(false);
+
+
+    // Function to handle item loading
+    const loadItem = async (itemId) => {
+      try {
+        console.log('Loading item:', itemId);
+
+        // If itemId is undefined or null, and we're on the new route, create a new item
+        if ((!itemId || itemId === 'new') && route.query.new === 'true') {
+          console.log('Creating new item');
+          store.resetDraftQuizEntry();
+          return;
+        }
+
+        // If we have an itemId, try to load it
+        if (itemId && itemId !== 'new') {
+          // First check if it's a permanent quiz item
+          const permanentItem = quizEntries[itemId];
+
+          if (permanentItem) {
+            console.log('Found permanent item:', permanentItem.id);
+            
+            // Fetch version history first
+            const editHistoryRef = collection(db, 'quizEditHistory');
+            const q = query(
+              editHistoryRef,
+              where('quizItemId', '==', itemId),
+              orderBy('revisionNumber', 'desc'),
+              limit(1)
+            );
+
+            const querySnapshot = await getDocs(q);
+            const latestRevision = querySnapshot.empty ? null : querySnapshot.docs[0].data();
+            
+            // Create an entry that preserves version history
+            const entryToUpdate = {
+              ...permanentItem,
+              id: itemId,  // Keep the original ID
+              version: latestRevision ? latestRevision.revisionNumber : (permanentItem.version || 1),
+              status: 'draft',
+              originalId: route.query.new === 'true' ? itemId : permanentItem.originalId // Only set originalId if creating new from template
+            };
+
+            console.log('Updating draft entry with:', entryToUpdate);
+            store.updateDraftQuizEntry(entryToUpdate);
+            return;
+          }
+
+          // If not found in permanent items, fetch and check draft items
+          console.log('Fetching draft items...');
+          await store.fetchDraftQuizItems();
+
+          const draftItem = store.draftQuizItems.find(item =>
+            item.id &&
+            item.id.toString() === itemId.toString() &&
+            item.status !== 'deleted'
+          );
+
+          if (draftItem) {
+            console.log('Found draft item:', draftItem.id);
+
+            // Fetch the latest revision
+            const editHistoryRef = collection(db, 'quizEditHistory');
+            const q = query(
+              editHistoryRef,
+              where('quizItemId', '==', itemId),
+              orderBy('revisionNumber', 'desc'),
+              limit(1)
+            );
+
+            const querySnapshot = await getDocs(q);
+            if (!querySnapshot.empty) {
+              const latestRevision = querySnapshot.docs[0].data();
+              console.log('Found latest revision:', latestRevision);
+
+              if (latestRevision.changes && latestRevision.changes.after) {
+                const afterState = latestRevision.changes.after;
+                store.updateDraftQuizEntry({
+                  ...afterState,
+                  id: itemId,  // Keep the original ID
+                  version: latestRevision.revisionNumber,
+                  status: draftItem.status,
+                  originalId: draftItem.originalId // Preserve original ID if it exists
+                });
+                return;
+              }
+            }
+
+            // If no revision history, use the draft item as is
+            store.updateDraftQuizEntry({
+              ...draftItem,
+              id: itemId,
+              version: draftItem.version || 1
+            });
+            return;
+          }
+
+          // If we get here, the item was not found or is deleted
+          console.warn('Item not found or deleted:', itemId);
+          store.saveStatus = {
+            show: true,
+            type: 'error',
+            message: `Quiz item ${itemId} was not found or has been deleted.`
+          };
+        }
+
+        // If we get here and we're on the new route, create a new item
+        if (route.query.new === 'true') {
+          console.log('Creating new item as fallback');
+          store.resetDraftQuizEntry();
+        }
+      } catch (error) {
+        console.error('Error in QuizItemEditor setup:', error);
+        store.saveStatus = {
+          show: true,
+          type: 'error',
+          message: 'Error loading quiz item. Please try again.'
+        };
+      }
+    };
+
+    // Watch for route changes
+    watch(
+      () => route.params.id,
+      async (newId, oldId) => {
+        if (newId !== oldId) {
+          console.log('Route changed from', oldId, 'to', newId);
+          await loadItem(newId);
+        }
+      }
+    );
+
+    // Initial load
+    onMounted(async () => {
+      await loadItem(route.params.id);
+    });
+
+    // Watch for changes in draft quiz entry ID and reset version history if ID changes
+    watch(() => store.draftQuizEntry?.id, (newId) => {
+      if (!newId) {
+        showVersionHistory.value = false;
+      }
+    });
+
+    return {
+      store,
+      auth,
+      route,
+      showVersionHistory
+    };
+  },
+  created() {
+    // Initialize new entry if this is a new item
+    if (this.$route.params.id === 'new' || this.$route.query.new === 'true') {
+      this.initializeNewEntry();
+    }
+  },
+  watch: {
+    // Watch for changes in the route that indicate a new item
+    '$route.params.id'(newId) {
+      if (newId === 'new' || this.$route.query.new === 'true') {
+        this.initializeNewEntry();
+      }
+    }
+  },
+  computed: {
+    newEntry: {
+      get() {
+        return this.store.draftQuizEntry;
+      },
+      set(value) {
+        this.store.updateDraftQuizEntry(value);
+      }
+    },
+    formattedJson() {
+      return JSON.stringify(this.newEntry, null, 2);
+    },
+    isLoadingDrafts() {
+      return this.store.draftQuizItemsLoading;
+    },
+    draftLoadError() {
+      return this.store.draftQuizItemsError;
+    },
+    canSubmit() {
+      return this.store.draftQuizEntry.id && this.validationState.isValid;
+    },
+    submitButtonTitle() {
+      if (!this.store.draftQuizEntry.id) {
+        return 'Please save your draft first';
+      }
+      if (!this.validationState.isValid) {
+        return 'Please fix validation errors: ' + this.validationState.errors.join(', ');
+      }
+      return 'Submit quiz entry for review';
+    },
+    invalidFields() {
+      return this.validationState.invalidFields;
+    },
+    hasExplanationSectionErrors() {
+      if (!this.hasBeenSaved) return false;
+
+      const explanationFields = [
+        'explanation',
+        'explanation2',
+        'videoId',
+        'imageUrl',
+        'imageAltText',
+        'podcastEpisode.title',
+        'podcastEpisode.EpisodeUrl',
+        'podcastEpisode.audioUrl',
+        'podcastEpisode.description',
+        'podcastEpisode.podcastStartTime',
+        'podcastEpisode2.title',
+        'podcastEpisode2.EpisodeUrl',
+        'podcastEpisode2.audioUrl',
+        'podcastEpisode2.description',
+        'podcastEpisode2.podcastStartTime'
+      ];
+
+      return explanationFields.some(field => this.validationState.invalidFields.has(field));
+    },
+    hasAnswerSectionErrors() {
+      if (!this.hasBeenSaved) return false;
+
+      const answerFields = [
+        'option1',
+        'option2',
+        'option3',
+        'option4',
+        'option5',
+        'correctAnswer',
+        'correctAnswers'
+      ];
+
+      return answerFields.some(field => this.validationState.invalidFields.has(field));
+    },
+    currentStep() {
+      let completedSteps = 0;
+
+      // Step 1: Question section
+      const questionFields = ['title', 'Question'];
+      const hasQuestionErrors = questionFields.some(field =>
+        this.validationState.invalidFields.has(field)
+      );
+      if (!hasQuestionErrors) completedSteps = 1;
+
+      // Step 2: Answers section
+      const answerFields = ['option1', 'option2', 'option3', 'option4', 'option5', 'correctAnswer', 'correctAnswers'];
+      const hasAnswerErrors = answerFields.some(field =>
+        this.validationState.invalidFields.has(field)
+      );
+      if (!hasAnswerErrors) completedSteps = 2;
+
+      // Step 3: Explanation section
+      const explanationFields = [
+        'explanation',
+        'explanation2',
+        'videoUrl',
+        'imageUrl',
+        'imageAltText',
+        'podcastEpisode.title',
+        'podcastEpisode.EpisodeUrl',
+        'podcastEpisode.audioUrl',
+        'podcastEpisode.description',
+        'podcastEpisode.podcastStartTime',
+        'podcastEpisode2.title',
+        'podcastEpisode2.EpisodeUrl',
+        'podcastEpisode2.audioUrl',
+        'podcastEpisode2.description',
+        'podcastEpisode2.podcastStartTime'
+      ];
+      const hasExplanationErrors = explanationFields.some(field =>
+        this.validationState.invalidFields.has(field)
+      );
+      if (!hasExplanationErrors) completedSteps = 3;
+
+      return completedSteps;
+    }
+  },
+  data() {
+    return {
+      validationState: {
+        isValid: true,
+        errors: [],
+        invalidFields: new Set()
+      },
+      hasBeenSaved: false,
+      defaultValues: {
+        title: 'Enter title here',
+        subtitle: 'Enter subtitle here',
+        Question: 'Enter your question here',
+        questionP2: 'Enter additional question text here (optional)',
+        option1: 'Enter option 1',
+        option2: 'Enter option 2',
+        option3: 'Enter option 3',
+        option4: 'Enter option 4',
+        option5: 'Enter option 5',
+        option6: 'Enter option 6',
+        explanation: 'Enter explanation here',
+        explanation2: 'Enter additional explanation here',
+        closingText: 'Enter closing text here',
+        closingText2: 'Enter additional closing text here',
+        modal: 'Enter modal content here',
+        'podcastEpisode.title': 'Enter podcast title',
+        'podcastEpisode.EpisodeUrl': 'Enter podcast URL',
+        'podcastEpisode.audioUrl': 'Enter audio URL',
+        'podcastEpisode.description': 'Enter podcast description',
+        'podcastEpisode.podcastStartTime': 0,
+        'podcastEpisode.snipdUrl': 'Enter Snipd URL',
+        'podcastEpisode.snipdTitle': 'Enter Snipd title',
+        'podcastEpisode.snipdDescription': 'Enter Snipd description',
+        'podcastEpisode2.title': 'Enter second podcast title',
+        'podcastEpisode2.EpisodeUrl': 'Enter second podcast URL',
+        'podcastEpisode2.audioUrl': 'Enter second audio URL',
+        'podcastEpisode2.description': 'Enter second podcast description',
+        'podcastEpisode2.podcastStartTime': 0,
+        'podcastEpisode2.snipdUrl': 'Enter second Snipd URL',
+        'podcastEpisode2.snipdTitle': 'Enter second Snipd title',
+        'podcastEpisode2.snipdDescription': 'Enter second Snipd description',
+        caution: 'Enter caution text here'
+      },
+      activeSection: '',
+      showExplanationSection: false,
+      previewMode: false,
+      jsonPreviewMode: false,
+      copySuccess: false,
+      submitStatus: {
+        show: false,
+        type: '',
+        message: ''
+      },
+      saveStatus: {
+        show: false,
+        type: '',
+        message: ''
+      },
+      submittedEntry: null,
+      returnButton: {
+        active: false
+      }
+    };
+  },
+  methods: {
+    validateForm() {
+      const errors = [];
+      const invalidFields = new Set();
+
+      // Required fields validation
+      if (!this.newEntry.title?.trim()) {
+        errors.push('Title is required');
+        invalidFields.add('title');
+      }
+
+      if (!this.newEntry.Question?.trim()) {
+        errors.push('Question is required');
+        invalidFields.add('Question');
+      }
+
+      // Validate options based on answer type
+      if (this.newEntry.answer_type === 'mc' || this.newEntry.answer_type === 'ms') {
+        let optionCount = 0;
+        for (let i = 1; i <= 6; i++) {
+          if (this.newEntry[`option${i}`]?.trim()) {
+            optionCount++;
+          }
+        }
+
+        if (optionCount < 2) {
+          errors.push('At least 2 options are required');
+          for (let i = 1; i <= 2; i++) {
+            invalidFields.add(`option${i}`);
+          }
+        }
+
+        // Validate correct answer selection
+        if (this.newEntry.answer_type === 'mc' && !this.newEntry.correctAnswer) {
+          errors.push('Please select a correct answer');
+        } else if (this.newEntry.answer_type === 'ms') {
+          if (this.newEntry.hasNoneOfTheAbove) {
+            // For "None of the Above" case, only one correct answer is allowed
+            if (!this.newEntry.correctAnswers || this.newEntry.correctAnswers.length !== 1) {
+              errors.push('When "None of the Above" is selected, exactly one correct answer is required');
+            }
+          } else {
+            // For regular multiple select, at least two correct answers are required
+            if (!this.newEntry.correctAnswers || this.newEntry.correctAnswers.length < 2) {
+              errors.push('Please select at least two correct answers');
+            }
+          }
+        }
+      }
+
+      this.validationState = {
+        isValid: errors.length === 0,
+        errors,
+        invalidFields
+      };
+
+      return errors.length === 0;
+    },
+    getFieldError(fieldName) {
+      if (this.validationState.invalidFields.has(fieldName)) {
+        return this.validationState.errors.find(error => error.toLowerCase().includes(fieldName.toLowerCase()));
+      }
+      return '';
+    },
+    handleFocus(event, fieldName) {
+      this.validationState.invalidFields.delete(fieldName);
+    },
+    handleBlur(event, fieldName) {
+      this.validateForm();
+    },
+    async submitForm() {
+      if (!this.validateForm()) {
+        return;
+      }
+
+      try {
+        await this.store.submitForReview(this.store.draftQuizEntry.id);
+        this.submittedEntry = { ...this.store.draftQuizEntry };
+        this.submitStatus = {
+          show: true,
+          type: 'success',
+          message: 'Quiz entry submitted for review successfully!'
+        };
+      } catch (error) {
+        console.error('Error submitting quiz entry:', error);
+        this.submitStatus = {
+          show: true,
+          type: 'error',
+          message: 'Error submitting quiz entry for review. Please try again.'
+        };
+      }
+    },
+    async saveDraft(event) {
+      // Prevent any default form submission
+      if (event) {
+        event.preventDefault();
+      }
+
+      // Show the version info modal with the current quiz item ID
+      this.$refs.versionInfoModal.show(this.store.draftQuizEntry.id);
+    },
+    async handleSaveDraftWithVersion(versionMessage) {
+      try {
+        console.log('Starting save process with:', {
+          versionMessage,
+          currentUser: this.auth.user?.uid,
+          draftEntry: this.store.draftQuizEntry,
+          hasBeenSaved: this.hasBeenSaved
+        });
+
+        // Validate the entry before saving
+        const validation = this.store.validateDraftQuizEntry(this.store.draftQuizEntry);
+        console.log('Validation result:', validation);
+
+        if (!validation.isValid) {
+          console.warn('Entry has validation errors:', validation.errors);
+        }
+
+        // Increment version if this is not the first save
+        if (this.hasBeenSaved) {
+          this.store.draftQuizEntry.version = (this.store.draftQuizEntry.version || 1) + 1;
+        } else {
+          this.store.draftQuizEntry.version = 1;
+        }
+
+        console.log('Saving draft with version:', this.store.draftQuizEntry.version);
+        const draftId = await this.store.saveDraftQuizEntry();
+        console.log('Draft saved with ID:', draftId);
+
+        if (!draftId) {
+          throw new Error('Failed to save draft - no ID returned');
+        }
+
+        console.log('Recording quiz edit with version message:', versionMessage);
+        await this.store.recordQuizEdit(versionMessage);
+        console.log('Quiz edit recorded successfully');
+
+        // Set hasBeenSaved to true after first successful save
+        this.hasBeenSaved = true;
+
+        // Check validation state after saving
+        await this.checkValidation();
+        console.log('Validation state after save:', this.validationState);
+
+        // Set submit status based on validation
+        this.submitStatus = {
+          show: true,
+          type: this.validationState.isValid ? 'success' : 'caution',
+          message: this.validationState.isValid
+            ? `Draft saved successfully! (Version ${this.store.draftQuizEntry.version})`
+            : `Draft saved with validation errors: ${this.validationState.errors.join(', ')} (Version ${this.store.draftQuizEntry.version})`
+        };
+
+        console.log('Save process completed successfully:', {
+          draftId,
+          version: this.store.draftQuizEntry.version,
+          validationState: this.validationState,
+          submitStatus: this.submitStatus
+        });
+      } catch (error) {
+        console.error('Error in save process:', {
+          error,
+          errorMessage: error.message,
+          errorStack: error.stack,
+          currentUser: this.auth.user?.uid,
+          draftEntry: this.store.draftQuizEntry
+        });
+        this.submitStatus = {
+          show: true,
+          type: 'error',
+          message: error.message || 'Error saving draft'
+        };
+      }
+    },
+    returnToQuizzes() {
+      this.$router.push('/');
+    },
+    handleCitationsClick() {
+      if (this.activeSection === 'citations') {
+        this.activeSection = '';
+      } else {
+        this.activeSection = 'citations';
+        if (!this.newEntry.citations || this.newEntry.citations.length === 0) {
+          this.addCitation();
+        }
+      }
+    },
+    handleResourcesClick() {
+      if (this.activeSection === 'resources') {
+        this.activeSection = '';
+      } else {
+        this.activeSection = 'resources';
+        if (!this.newEntry.resources || this.newEntry.resources.length === 0) {
+          this.addResource();
+        }
+      }
+    },
+    handleFocus(event, field) {
+      // Get the field value through the nested path if it exists
+      const fieldValue = field.split('.').reduce((obj, key) => obj?.[key], this.newEntry);
+      const defaultValue = this.getDefaultValue(field);
+
+      // Only clear if the current value matches the default value
+      if (defaultValue && fieldValue === defaultValue) {
+        // For nested fields (e.g., 'podcastEpisode.title')
+        if (field.includes('.')) {
+          const [parent, child] = field.split('.');
+          if (this.newEntry[parent]) {
+            this.newEntry[parent][child] = '';
+          }
+        } else {
+          this.newEntry[field] = '';
+        }
+      }
+    },
+    handleBlur(event, field) {
+      // Get the field value through the nested path if it exists
+      const fieldValue = field.split('.').reduce((obj, key) => obj?.[key], this.newEntry);
+      const defaultValue = this.getDefaultValue(field);
+
+      // Only restore default if field is empty and there was a default value
+      if ((!fieldValue || fieldValue.trim() === '') && defaultValue) {
+        // For nested fields
+        if (field.includes('.')) {
+          const [parent, child] = field.split('.');
+          if (this.newEntry[parent]) {
+            this.newEntry[parent][child] = defaultValue;
+          }
+        } else {
+          this.newEntry[field] = defaultValue;
+        }
+      }
+    },
+    getDefaultValue(field) {
+      return this.defaultValues[field] || '';
+    },
+    async copyToClipboard() {
+      try {
+        // Convert to string with custom replacer to remove property quotes
+        const jsonString = JSON.stringify(this.newEntry, null, 2)
+          .replace(/"(\w+)":/g, '$1:'); // Remove quotes around property names
+        await navigator.clipboard.writeText(jsonString);
+        this.copySuccess = true;
+        console.log('Copied to clipboard:', jsonString); // Debug log
+        setTimeout(() => {
+          this.copySuccess = false;
+        }, 2000);
+      } catch (err) {
+        console.error('Failed to copy text: ', err);
+        this.copySuccess = false;
+      }
+    },
+    async checkValidation() {
+      const validation = this.store.validateDraftQuizEntry(this.store.draftQuizEntry);
+      this.validationState = {
+        isValid: validation.errors.length === 0,
+        errors: validation.errors,
+        invalidFields: validation.invalidFields
+      };
+    },
+    triggerAutoSave() {
+      // Clear any existing timeout
+      if (this.autoSaveTimeout) {
+        clearTimeout(this.autoSaveTimeout);
+      }
+
+      // Set new timeout for 2 seconds after last change
+      this.autoSaveTimeout = setTimeout(async () => {
+        try {
+          await this.store.saveDraftQuizEntry();
+          this.lastSaved = new Date();
+          this.showSaveStatus('Auto-saved', 'success');
+        } catch (error) {
+          console.error('Auto-save failed:', error);
+          this.showSaveStatus('Auto-save failed', 'error');
+        }
+      }, 2000);
+    },
+    showSaveStatus(message, type) {
+      this.saveStatus = {
+        show: true,
+        message,
+        type
+      };
+
+      // Hide the status after 3 seconds
+      setTimeout(() => {
+        this.saveStatus.show = false;
+      }, 3000);
+    },
+    togglePreviewMode() {
+      this.previewMode = !this.previewMode;
+      // Hide JSON when toggling preview mode in either direction
+      this.jsonPreviewMode = false;
+    },
+    initializeNewEntry() {
+      console.log('Initializing new entry with current state:', {
+        draftEntry: this.store.draftQuizEntry,
+        defaultValues: this.defaultValues
+      });
+
+      // Get a clean entry from the store
+      const entry = this.store.draftQuizEntry;
+
+      // Initialize with default values only if the field doesn't exist or is empty
+      Object.entries(this.defaultValues).forEach(([field, value]) => {
+        if (field.includes('.')) {
+          const [parent, child] = field.split('.');
+          if (!entry[parent]) {
+            entry[parent] = {};
+          }
+          if (!entry[parent][child]) {
+            entry[parent][child] = value;
+          }
+        } else {
+          if (!entry[field]) {
+            entry[field] = value;
+          }
+        }
+      });
+
+      // Set default answer type if not set
+      if (!entry.answer_type) {
+        entry.answer_type = 'mc';
+      }
+
+      // Initialize arrays if not set
+      if (!entry.citations) entry.citations = [];
+      if (!entry.resources) entry.resources = [];
+      if (!entry.correctAnswers) entry.correctAnswers = [];
+
+      console.log('Final initialized entry:', entry);
+
+      this.store.updateDraftQuizEntry(entry);
+    },
+    addCitation() {
+      if (!this.newEntry.citations) {
+        this.newEntry.citations = [];
+      }
+      this.newEntry.citations.push({
+        title: '',
+        author: '',
+        url: '',
+        year: '',
+        imageUrl: ''
+      });
+    },
+    addResource() {
+      if (!this.newEntry.resources) {
+        this.newEntry.resources = [];
+      }
+      this.newEntry.resources.push({
+        title: '',
+        author: '',
+        url: '',
+        description: ''
+      });
+    },
+    handleNoneOfTheAboveToggle() {
+      if (this.newEntry.hasNoneOfTheAbove) {
+        // Add "None of the Above" option and set it as the only correct answer
+        this.newEntry.option6 = "None of the Above";
+        this.newEntry.correctAnswers = [6]; // Set it as the only correct answer
+      } else {
+        // Remove "None of the Above" option and clear correct answers
+        this.newEntry.option6 = "";
+        this.newEntry.correctAnswers = [];
+      }
+    }
+  },
+  beforeUnmount() {
+    if (this.autoSaveTimeout) {
+      clearTimeout(this.autoSaveTimeout);
+    }
+  },
+  watch: {
+    newEntry: {
+      handler(newVal) {
+        const validation = this.store.validateDraftQuizEntry(newVal);
+        this.validationState = {
+          isValid: validation.errors.length === 0,
+          errors: validation.errors,
+          invalidFields: validation.invalidFields
+        };
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.new-item-form {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background: linear-gradient(145deg, #2a2d3e, #1f2235);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
+  color: #fff;
+}
+
+#template-select {
+  background: rgba(34, 32, 125, 0.95);
+  border: 1px solid rgba(74, 144, 226, 0.2);
+  border-radius: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+  box-sizing: border-box;
+  color: #b1b3be;
+  dark: text-gray-200;
+}
+
+.section-summary {
+  /*  background: linear-gradient(135deg, #4a90e2, #357abd);*/
+
+  background: #1e1f26;
+  border-color: #01a6fc;
+  border-width: 2px;
+  color: #01a6fc;
+  padding: 0.75rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+}
+
+.section-summary:hover {
+  background: linear-gradient(135deg, #357abd, #2868a9);
+  transform: translateY(-1px);
+}
+
+/* Remove default details marker */
+details>summary {
+  list-style: none;
+}
+
+details>summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Handle the connected appearance when details is open */
+details[open] .section-summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+details[open] .form-section {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+/* Arrow indicator */
+.arrow-indicator {
+  transition: transform 0.2s;
+}
+
+details[open] .arrow-indicator {
+  transform: rotate(180deg);
+}
+
+.form1-section {
+  background: #3f3f88;
+  backdrop-filter: blur(10px);
+
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+.form-section {
+  background: #3f3f88;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(74, 144, 226, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.form-group1 {
+  position: relative;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
+.form-group label {
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  background: #3f3f88;
+  padding: 0 8px;
+  font-size: 0.85rem;
+  color: #fff;
+  border-radius: 4px;
+  z-index: 1;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+.form-group1 label {
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  background: #3f3f88;
+  padding: 0 8px;
+  font-size: 0.85rem;
+  color: #fff;
+  border-radius: 4px;
+  z-index: 1;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+input[type="text"],
+input[type="number"],
+textarea {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(74, 144, 226, 0.2);
+  border-radius: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+  box-sizing: border-box;
+  color: #333;
+}
+
+textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+input:focus,
+textarea:focus {
+  background: white;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+  outline: none;
+}
+
+/* Only style buttons that don't have specific classes */
+button:not([class]) {
+  padding: 5px 15px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:not([class]):hover {
+  background-color: #45a049;
+}
+
+.citation-group,
+.resource-group {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.citation-group:last-child,
+.resource-group:last-child {
+  border-bottom: none;
+  margin-bottom: 10px;
+}
+
+.citation-group h3,
+.resource-group h3 {
+  color: rgba(255, 255, 255, 0.95);
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+}
+
+.add-button,
+.remove-button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  margin-top: 10px;
+}
+
+.add-button {
+  background-color: #4a90e2;
+  color: white;
+}
+
+.remove-button {
+  background-color: #dc3545;
+  color: white;
+  margin-top: 15px;
+}
+
+.add-button:hover {
+  background-color: #357abd;
+}
+
+.remove-button:hover {
+  background-color: #c82333;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #333;
+}
+
+h3 {
+  margin-bottom: 15px;
+  color: #fff;
+}
+
+.save-status {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 15px 25px;
+  border-radius: 4px;
+  cursor: pointer;
+  animation: slideIn 0.3s ease-out;
+  z-index: 1000;
+}
+
+.success {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.error {
+  background-color: #f44336;
+  color: white;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+details {
+  margin-bottom: 0.5rem;
+}
+
+details[open] .section-summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+
+details[open] .form-section {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.section-divider {
+  margin: 16px 0;
+  border: none;
+  border-top: 1px solid #444;
+}
+
+.preview-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.preview-button,
+.json-button,
+.github-button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  background: linear-gradient(135deg, #4a90e2, #357abd);
+  color: white;
+}
+
+.preview-button:hover,
+.json-button:hover {
+  background: linear-gradient(135deg, #357abd, #2868a9);
+  transform: translateY(-1px);
+}
+
+.github-button {
+  background-color: #2ea043;
+  color: white;
+}
+
+.github-button:hover {
+  background-color: #2c974b;
+}
+
+.preview-controls-text {
+  padding-left: .8rem;
+  margin-right: 1rem;
+  font-size: 1rem;
+  color: #fff;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.button-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.button-group>div {
+  margin-right: 1rem;
+}
+
+.preview-toggle,
+.return-button {
+  background: linear-gradient(135deg, #4a90e2, #357abd);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+.preview-toggle:hover,
+.return-button:hover {
+  background: linear-gradient(135deg, #357abd, #2868a9);
+  transform: translateY(-1px);
+}
+
+.preview-toggle.active,
+.return-button.active {
+  background-color: #4a90e2;
+  color: white;
+  border-color: #357abd;
+}
+
+.smaller-button {
+  max-height: 35px;
+  font-size: 12px;
+  line-height: 1.1;
+  padding: 0.2rem 1rem;
+}
+
+.return-button.active {
+  background-color: #4CAF50;
+}
+
+.preview-toggle.active {
+  background-color: #4CAF50;
+}
+
+.preview-section {
+  background: linear-gradient(145deg, #ffffff, #f0f4ff);
+  border-radius: 12px;
+  padding: 24px;
+  margin: 20px 0;
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
+  @apply bg-white dark:bg-gray-800;
+}
+
+.preview-section :deep(.quiz-item) {
+  background: transparent;
+  @apply text-gray-900 dark:text-white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .preview-section {
+    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+  }
+}
+
+.form-group-section {
+  background: rgba(63, 63, 136, 0.95);
+  border: 0px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 1;
+}
+
+.form-group-section h2 {
+  color: #fff;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.25rem;
+  border-bottom: 0px solid #444;
+}
+
+.question-section {
+  position: relative;
+  z-index: 15;
+  /* Lower than template selector but higher than explanation */
+}
+
+.explanation-section {
+  position: relative;
+  z-index: 10;
+  /* Lower than question section */
+  border-left: 4px solid #2196F3;
+}
+
+/* Adjust spacing between sections within groups */
+.form-group-section details {
+  margin-bottom: 0.5rem;
+}
+
+.form-group-section details:last-child {
+  margin-bottom: 0;
+}
+
+/* Make the section summaries slightly indented */
+.form-group-section .section-summary {
+  margin-left: 0.5rem;
+}
+
+.question-content-wrapper,
+.explanation-content-wrapper {
+  background: linear-gradient(135deg,
+      rgba(63, 63, 136, 0.2) 0%,
+      rgba(63, 63, 136, 0.1) 100%);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  padding: 0.5rem;
+  border-radius: 4px;
+  position: relative;
+}
+
+.question-content-wrapper .form-section,
+.explanation-content-wrapper .form-section {
+  background-color: #3f3f88;
+  /* Slightly darker than the wrapper */
+}
+
+.preview-options {
+  display: flex;
+  gap: 1rem;
+  color: #fff;
+}
+
+.section-toggle {
+  width: 100%;
+  padding: 1rem;
+  margin: 1rem 0;
+  background-color: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.section-toggle:hover {
+  background-color: #333;
+}
+
+.json-preview {
+  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+/* Override vue-json-pretty theme for dark mode */
+:deep(.vjs-tree) {
+  color: #fff;
+  background-color: #1a1a1a;
+}
+
+:deep(.vjs-key) {
+  color: #9cdcfe;
+}
+
+:deep(.vjs-value) {
+  color: #ce9178;
+}
+
+:deep(.vjs-primitive) {
+  color: #b5cea8;
+}
+
+@media screen and (max-width: 991px) {
+  .preview-controls {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .preview-controls-text {
+    text-align: center;
+    margin-right: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .button-group {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  .preview-toggle,
+  .return-button {
+    font-size: 0.9rem;
+    padding: 0.4rem 0.8rem;
+    flex: 1 1 auto;
+    text-align: center;
+    min-width: 120px;
+  }
+
+  .smaller-button {
+    max-height: fit-content;
+    font-size: 12px;
+  }
+}
+
+.submit-status {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.submit-status.success {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.submit-status.error {
+  background-color: #f44336;
+  color: white;
+}
+
+.status-message {
+  margin: 1rem 0;
+  padding: 1.5rem;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: 500;
+  background: rgba(31, 41, 55, 0.8);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.status-message.success {
+  background: rgba(31, 41, 55, 0.8);
+  border-color: #02b87d;
+  box-shadow: 0 0 20px rgba(2, 184, 125, 0.2);
+}
+
+.status-message.error {
+  background: rgba(31, 41, 55, 0.8);
+  border-color: #ef4444;
+  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
+}
+
+.status-message.caution {
+  background: rgba(31, 41, 55, 0.8);
+  border-color: #f59e0b;
+  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
+}
+
+.submitted-preview {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: rgba(31, 41, 55, 0.8);
+  backdrop-filter: blur(10px);
+  border: 2px solid #02b87d;
+  box-shadow: 0 0 20px rgba(2, 184, 125, 0.2);
+  border-radius: 8px;
+}
+
+.submitted-preview h3 {
+  margin-bottom: 1rem;
+  color: #02b87d;
+  font-weight: 500;
+  font-size: 1.2rem;
+}
+
+.submitted-preview :deep(.quiz-item) {
+  background: #1f2937;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+.submitted-preview :deep(.question-text),
+.submitted-preview :deep(.answer),
+.submitted-preview :deep(.explanation),
+.submitted-preview :deep(.list-item-right) {
+  color: #fff !important;
+  opacity: 0.9;
+}
+
+.submitted-preview :deep(.quiz-item .answer) {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 0.5rem 0;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.submitted-preview :deep(.quiz-item .answer:hover) {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.submitted-preview :deep(.quiz-item .answer.selected) {
+  background: rgba(2, 184, 125, 0.2);
+  border-color: rgba(2, 184, 125, 0.4);
+}
+
+.explanation-toggles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: .7rem 1rem;
+  padding: .7rem;
+  background-color: white;
+  border-radius: 8px;
+}
+
+.section-button {
+  flex: 1;
+  padding: 0.3rem .7rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  background-color: #4a5568;
+  color: white;
+}
+
+.section-button:hover {
+  background-color: #2d3748;
+}
+
+.section-button.active {
+  background-color: #4a90e2;
+  color: white;
+  border-color: #357abd;
+}
+
+@media (prefers-color-scheme: dark) {
+  .section-button {
+    background-color: #4a5568;
+    color: white;
+  }
+
+  .section-button:hover {
+    background-color: #2d3748;
+  }
+
+  .section-button.active {
+    background-color: #4a90e2;
+  }
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Or slide transition */
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-enter-from {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.slide-leave-to {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+
+.form-group:has(textarea) {
+  margin-bottom: 12px;
+}
+
+.form-group:has(textarea) label {
+  margin-top: 0;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #aab7c4;
+  transition: opacity 0.2s ease;
+}
+
+input:focus::placeholder,
+textarea:focus::placeholder {
+  opacity: 0;
+}
+
+/* When focused and empty */
+input:focus:placeholder-shown,
+textarea:focus:placeholder-shown {
+  color: #ccc;
+}
+
+select {
+  width: 100%;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(74, 144, 226, 0.2);
+  border-radius: 8px;
+  color: #333;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+
+select:focus {
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+  outline: none;
+}
+
+optgroup {
+  font-weight: bold;
+  color: #4a90e2;
+}
+
+option {
+  padding: 8px;
+  color: #333;
+}
+
+.border-dashed {
+  border-style: dashed !important;
+}
+
+.save-status-indicator {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  z-index: 50;
+  animation: fadeInOut 3s ease-in-out;
+  pointer-events: none;
+}
+
+.save-status-indicator.success {
+  background-color: rgba(34, 197, 94, 0.9);
+  color: white;
+}
+
+.save-status-indicator.error {
+  background-color: rgba(239, 68, 68, 0.9);
+  color: white;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  90% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}
+
+.save-draft-btn {
+  background-color: #4a5568;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.save-draft-btn:hover {
+  background-color: #2d3748;
+}
+
+.submit-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.submit-btn-disabled {
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.submit-btn-disabled:hover {
+  background-color: #6b7280;
+}
+
+.submit-btn-ready {
+  background-color: #4f46e5;
+  color: white;
+}
+
+.submit-btn-ready:hover {
+  background-color: #4338ca;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 1px #4f46e5;
+  outline: none;
+}
+
+.invalid-field {
+  border: 2px solid #ef4444 !important;
+  background-color: #fef2f2;
+}
+
+.invalid-field:focus {
+  border-color: #ef4444 !important;
+  box-shadow: 0 0 0 1px #ef4444 !important;
+  outline: none;
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.invalid-field {
+  border: 2px solid #ef4444 !important;
+  background-color: #fef2f2;
+  position: relative;
+}
+
+.invalid-field:hover::before {
+  content: attr(data-error);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  background-color: #ef4444;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.invalid-field:hover::after {
+  content: '';
+  position: absolute;
+  bottom: calc(100% + 3px);
+  left: 10px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #ef4444 transparent transparent transparent;
+}
+
+.section-error-indicator {
+  color: #ef4444;
+  margin-left: 0.5rem;
+  font-size: 1rem;
+  vertical-align: middle;
+}
+
+/* Add this to your existing styles */
+#template-select option {
+  color: white !important;
+  background-color: #3f3f88 !important;
+}
+
+.github-button {
+  background-color: #2ea043;
+  color: white;
+}
+
+.github-button:hover {
+  background-color: #2c974b;
+}
+
+.yellow-text {
+  color: #ffd700;
+}
+
+.preview-container {
+  background: #f5f5f5;
+  border-radius: 12px;
+  padding: 24px;
+  margin: 20px 0;
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
+}
+
+.preview-container :deep(.quiz-item) {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+.preview-container :deep(.question-text),
+.preview-container :deep(.answer),
+.preview-container :deep(.list-item-right),
+.preview-container :deep(.explanation) {
+  color: #333 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .preview-container {
+    background: #2d3748;
+  }
+
+  .preview-container :deep(.quiz-item) {
+    background: #1a202c;
+    border-color: #4a5568;
+  }
+
+  .preview-container :deep(.question-text),
+  .preview-container :deep(.answer),
+  .preview-container :deep(.list-item-right),
+  .preview-container :deep(.explanation) {
+    color: #f7fafc !important;
+  }
+}
+
+.template-selector {
+  position: relative;
+  z-index: 20;
+  /* Higher than form sections to ensure dropdown is visible */
+}
+</style>
diff --git a/src/views/QuizItemEditorLite.vue b/src/views/QuizItemEditorLite.vue
new file mode 100644
index 0000000..0222618
--- /dev/null
+++ b/src/views/QuizItemEditorLite.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="editor-container p-4">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <div class="mb-6 flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ isNewProposal ? 'Propose Changes' : 'Edit Quiz Item' }}
+                </h2>
+                <div class="text-sm text-gray-500 dark:text-gray-400" v-if="originalId">
+                    Based on Quiz Item #{{ originalId }}
+                </div>
+            </div>
+
+            <!-- Preview Toggle -->
+            <div class="mb-4">
+                <button type="button" @click="previewMode = !previewMode"
+                    class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+                    {{ previewMode ? 'Edit Mode' : 'Preview Mode' }}
+                </button>
+            </div>
+
+            <!-- Preview Section -->
+            <div v-if="previewMode" class="mb-6">
+                <QuizItem :currentQuizItem="editedItem" :itemNum="0" :reviewMode="true" :basicMode="false"
+                    :debug="false" :userAnswer="editedItem.correctAnswer" />
+            </div>
+
+            <!-- Edit Form -->
+            <form v-else @submit.prevent="saveQuizItem"
+                class="space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+                <!-- Title -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Title
+                    </label>
+                    <input v-model="editedItem.title" type="text"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                        required />
+                </div>
+
+                <!-- Question -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Question
+                    </label>
+                    <textarea v-model="editedItem.Question" rows="3"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                        required></textarea>
+                </div>
+
+                <!-- Options -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Answer Options
+                    </label>
+                    <div v-for="n in 6" :key="n" class="mb-2">
+                        <div class="flex items-center gap-2">
+                            <input :id="'option' + n" v-model="editedItem['option' + n]" type="text"
+                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                                :placeholder="'Option ' + n" />
+                            <input type="radio" :value="n" v-model="editedItem.correctAnswer" :name="'correct-answer'"
+                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 dark:bg-gray-700" />
+                            <label :for="'option' + n" class="text-sm text-gray-600 dark:text-gray-400">
+                                Correct
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Explanation -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Explanation
+                    </label>
+                    <textarea v-model="editedItem.explanation" rows="4"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="flex justify-end gap-4">
+                    <button type="button" @click="$router.back()"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        {{ isNewProposal ? 'Submit Proposal' : 'Save Changes' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+import { useAuth } from '../composables/useAuth';
+import QuizItem from './QuizItem.vue';
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuth();
+const previewMode = ref(false);
+
+const editedItem = ref({
+    title: '',
+    Question: '',
+    option1: '',
+    option2: '',
+    option3: '',
+    option4: '',
+    option5: '',
+    option6: '',
+    correctAnswer: null,
+    explanation: '',
+    answer_type: 'mc'
+});
+
+const originalId = ref(null);
+const isNewProposal = ref(false);
+
+onMounted(async () => {
+    const itemId = route.params.id;
+    if (itemId) {
+        const docRef = doc(db, 'proposedQuizItems', itemId);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+            editedItem.value = { ...docSnap.data() };
+            originalId.value = editedItem.value.originalId;
+            isNewProposal.value = true;
+        }
+    }
+});
+
+const saveQuizItem = async () => {
+    try {
+        const itemId = route.params.id;
+        const docRef = doc(db, 'proposedQuizItems', itemId);
+
+        await setDoc(docRef, {
+            ...editedItem.value,
+            lastModified: new Date().toISOString(),
+            modifiedBy: auth.user.value?.uid || 'anonymous'
+        });
+
+        router.push('/quizSetView');
+    } catch (error) {
+        console.error('Error saving quiz item:', error);
+        alert('Failed to save changes. Please try again.');
+    }
+};
+</script>
+
+<style scoped>
+.editor-container {
+    min-height: 100vh;
+    background-color: #f3f4f6;
+}
+
+@media (prefers-color-scheme: dark) {
+    .editor-container {
+        background-color: #111827;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/QuizItemSelectorView.vue b/src/views/QuizItemSelectorView.vue
new file mode 100644
index 0000000..e953e6a
--- /dev/null
+++ b/src/views/QuizItemSelectorView.vue
@@ -0,0 +1,161 @@
+<!-- QuizItemSelectorView.vue -->
+<template>
+    <div class="min-h-screen bg-gray-900 text-white p-8">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl font-bold mb-8">Create or Edit Quiz Item</h1>
+
+            <!-- Main action buttons -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <!-- New Item Button -->
+                <button @click="createNewItem" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg 
+                       transition duration-200 ease-in-out transform hover:scale-105
+                       flex flex-col items-center justify-center gap-2">
+                    <span class="text-xl">New Item</span>
+                    <span class="text-sm text-blue-200">Create a quiz item from scratch</span>
+                </button>
+
+                <!-- My Drafts Button -->
+                <button @click="showDrafts = true" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-6 rounded-lg 
+                       transition duration-200 ease-in-out transform hover:scale-105
+                       flex flex-col items-center justify-center gap-2">
+                    <span class="text-xl">My Drafts</span>
+                    <span class="text-sm text-purple-200">Continue working on a draft</span>
+                </button>
+
+                <!-- Fork Item Button --
+                <button class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-4 px-6 rounded-lg 
+                       transition duration-200 ease-in-out transform hover:scale-105
+                       flex flex-col items-center justify-center gap-2
+                       opacity-50 cursor-not-allowed">
+                    <span class="text-xl">Fork Item</span>
+                    <span class="text-sm text-gray-300">Coming soon...</span>
+                </button> -->
+            </div>
+
+            <!-- My Drafts Modal -->
+            <div v-if="showDrafts" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+                <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-bold">My Draft Quiz Items</h2>
+                        <button @click="showDrafts = false" class="text-gray-400 hover:text-white">
+                            <span class="sr-only">Close</span>
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div v-if="isLoading" class="text-center py-8">
+                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto">
+                        </div>
+                        <p class="mt-4">Loading your drafts...</p>
+                    </div>
+
+                    <div v-else-if="userDrafts.length === 0" class="text-center py-8">
+                        <p class="text-gray-400">You don't have any drafts yet.</p>
+                        <button @click="createNewItem" class="mt-4 text-blue-400 hover:text-blue-300">
+                            Create your first quiz item
+                        </button>
+                    </div>
+
+                    <div v-else class="space-y-4 max-h-96 overflow-y-auto">
+                        <div v-for="draft in userDrafts" :key="draft.id" @click="editDraft(draft)" class="bg-gray-700 hover:bg-gray-600 rounded-lg p-4 cursor-pointer
+                        transition duration-200 ease-in-out">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h3 class="font-semibold text-lg">{{ draft.title || 'Untitled Draft' }}</h3>
+                                    <p class="text-sm text-gray-400">Version {{ draft.version }}</p>
+                                </div>
+                                <div class="text-right">
+                                    <span class="text-sm text-gray-400">
+                                        {{ formatDate(draft.timestamp) }}
+                                    </span>
+                                    <span :class="getStatusClass(draft.status)"
+                                        class="ml-2 px-2 py-1 rounded-full text-xs">
+                                        {{ draft.status }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { quizStore } from '../stores/quizStore';
+import { useAuthStore } from '../stores/authStore';
+
+const router = useRouter();
+const store = quizStore();
+const auth = useAuthStore();
+
+const showDrafts = ref(false);
+const isLoading = ref(false);
+
+// Computed property for user's drafts
+const userDrafts = computed(() => {
+    return store.draftQuizItems
+        .filter(item => item.userId === auth.user?.uid)
+        .sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
+});
+
+// Load drafts when component mounts
+onMounted(async () => {
+    isLoading.value = true;
+    try {
+        await store.fetchDraftQuizItems();
+    } catch (error) {
+        console.error('Error fetching drafts:', error);
+    } finally {
+        isLoading.value = false;
+    }
+});
+
+// Format timestamp for display
+const formatDate = (timestamp) => {
+    if (!timestamp) return 'No date';
+    const date = new Date(timestamp.seconds * 1000);
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+    }).format(date);
+};
+
+// Get status badge styling
+const getStatusClass = (status) => {
+    const classes = {
+        draft: 'bg-blue-900 text-blue-200',
+        pending: 'bg-yellow-900 text-yellow-200',
+        accepted: 'bg-blue-900 text-blue-200',
+        approved: 'bg-green-900 text-green-200',
+        rejected: 'bg-red-900 text-red-200',
+        deleted: 'bg-red-900 text-red-200'
+    };
+    return classes[status] || 'bg-gray-900 text-gray-200';
+};
+
+// Navigation functions
+const createNewItem = () => {
+    router.push({
+        name: 'quizItemEditor',
+        query: { new: 'true' }
+    });
+};
+
+const editDraft = (draft) => {
+    showDrafts.value = false;
+    router.push({
+        name: 'quizItemEditor',
+        params: { id: draft.id }
+    });
+};
+</script>
\ No newline at end of file
diff --git a/src/views/QuizSetView.vue b/src/views/QuizSetView.vue
index 3cc25f0..f33e9cb 100644
--- a/src/views/QuizSetView.vue
+++ b/src/views/QuizSetView.vue
@@ -1,50 +1,91 @@
 <template>
-    <div class="p-4">
-        <div class="flex justify-between items-center mb-6">
-            <h1 class="text-2xl">Quiz Set View</h1>
+    <div class="p-4 bg-gray-900">
+        <div class="flex justify-end gap-2 mb-4">
+
+            <button @click="handleNewQuizItem" class="bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200 flex items-center
+                       px-3 py-1 text-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                </svg>
+                <span class="hidden md:inline">Create/Edit A Quiz Item</span>
+                <span class="md:hidden">New Item</span>
+            </button>
             <button @click="showCreateModal = true"
-                class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors duration-200 flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                class="flex items-center gap-1 px-3 py-1 text-sm border-green-400 bg-gray-700 hover:bg-gray-600 text-green-400 rounded-lg transition-colors duration-200">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                 </svg>
-                Create New Quiz Set
+                <span class="hidden md:inline">Create New Quiz Set</span>
+                <span class="md:hidden">New Set</span>
             </button>
+
+            <button @click="router.push('/issues')"
+                class="flex items-center gap-1 px-3 py-1 text-sm border-green-400 bg-gray-700 hover:bg-gray-600 text-green-400 rounded-lg transition-colors duration-200">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span class="hidden md:inline">Issues</span>
+            </button>
+
+            <Discuss :quiz-sets="[...publishedQuizSets, ...proposedQuizSets]" />
+        </div>
+        <div> <span class="text-sm text-orange-300">Quiz Set editor is in fluid developent. Caveat emptor.</span></div>
+        <!-- Quiz Sets Overview Visualization with Tree -->
+        <QuizSetTree :publishedQuizSets="publishedQuizSets" :proposedQuizSets="proposedQuizSets"
+            @select-quiz-set="handleSelectQuizSet" />
+
+        <!-- Preview InProgress Component if a proposed quizset is selected -->
+        <div v-if="selectedQuizSet && selectedQuizSet.inProgress" class="my-4">
+            <InProgress :quizSet="selectedQuizSet" @close="selectedQuizSet = null" />
         </div>
 
         <!-- Tab Navigation -->
-        <div class="border-b border-gray-200">
-            <nav class="-mb-px flex">
-                <button @click="currentTab = 'current'" :class="[
-                    currentTab === 'current'
-                        ? 'border-blue-500 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                    'w-24 py-2 px-1 text-center border-b-2 font-medium text-sm'
-                ]">
-                    Current
-                </button>
-                <button @click="currentTab = 'proposed'" :class="[
-                    currentTab === 'proposed'
-                        ? 'border-blue-500 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                    'w-24 py-2 px-1 text-center border-b-2 font-medium text-sm'
-                ]">
-                    Proposed
-                </button>
+        <div class="border-b border-gray-700 mt-6">
+            <nav class="flex justify-between items-center">
+                <div class="flex space-x-1">
+                    <button @click="currentTab = 'current'" :class="[
+                        currentTab === 'current'
+                            ? 'border-blue-500 text-blue-400'
+                            : 'border-transparent text-gray-400 hover:text-gray-300',
+                        'px-4 py-2 text-center border-b-2 font-medium text-sm transition-colors duration-200'
+                    ]">
+                        Current Quiz Sets
+                    </button>
+                    <button @click="currentTab = 'proposed'" :class="[
+                        currentTab === 'proposed'
+                            ? 'border-blue-500 text-blue-400'
+                            : 'border-transparent text-gray-400 hover:text-gray-300',
+                        'px-4 py-2 text-center border-b-2 font-medium text-sm transition-colors duration-200'
+                    ]">
+                        Proposed Quiz Sets
+                    </button>
+                    <button @click="currentTab = 'new'" :class="[
+                        currentTab === 'new'
+                            ? 'border-blue-500 text-blue-400'
+                            : 'border-transparent text-gray-400 hover:text-gray-300',
+                        'px-4 py-2 text-center border-b-2 font-medium text-sm transition-colors duration-200 '
+                    ]">
+                        New Quiz Items
+                    </button>
+                </div>
             </nav>
         </div>
 
         <!-- Tab Content -->
-        <div class="mt-4">
+        <div class="mt-6">
             <!-- Current Quiz Sets -->
             <div v-if="currentTab === 'current'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <div v-for="quizSet in publishedQuizSets" :key="quizSet.setName"
-                    class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200">
+                    class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200">
                     <div class="flex justify-between items-start mb-3">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                        <h3 class="text-lg font-semibold text-white">
                             {{ quizSet.setName }}
                         </h3>
-                        <span class="text-sm text-gray-500 dark:text-gray-400">
+                        <span class="text-sm text-gray-400">
                             {{ quizSet.items.length }} items
                         </span>
                     </div>
@@ -53,12 +94,12 @@
                     <div class="space-y-2">
                         <!-- Basic/Expert Mode -->
                         <div class="flex items-center text-sm">
-                            <span class="text-gray-600 dark:text-gray-300">Mode:</span>
+                            <span class="text-gray-300">Mode:</span>
                             <span :class="[
                                 'ml-2 px-2 py-1 rounded text-xs font-medium',
                                 quizSet.basicMode
-                                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                                    : 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+                                    ? 'bg-green-900 text-green-200'
+                                    : 'bg-purple-900 text-purple-200'
                             ]">
                                 {{ quizSet.basicMode ? 'Basic' : 'Expert' }}
                             </span>
@@ -67,7 +108,8 @@
                         <!-- Quiz Items List -->
                         <div class="mt-3 space-y-1">
                             <div class="flex justify-between items-center">
-                                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Quiz Items:
+                                <h4 class="text-sm font-medium text-gray-500 text-left">Quiz
+                                    Items:
                                 </h4>
                                 <button @click="toggleQuestions(quizSet.setName)"
                                     class="text-sm text-blue-500 hover:text-blue-600 flex items-center">
@@ -81,23 +123,23 @@
                                     </svg>
                                 </button>
                             </div>
-                            <ul class="text-sm text-gray-600 dark:text-gray-400 list-disc pl-5 text-left">
+                            <ul class="text-sm text-gray-400 list-disc pl-5 text-left">
                                 <li v-for="itemId in quizSet.items" :key="itemId" class="mb-2">
                                     <div class="truncate relative">
-                                        <span class="cursor-help hover:text-blue-500"
-                                            @mouseenter="showQuizDetails(itemId)" @mouseleave="hideQuizDetails">
+                                        <span class="cursor-pointer hover:text-blue-500"
+                                            @click="handleEditClick(itemId)" @mouseenter="showQuizDetails(itemId)"
+                                            @mouseleave="hideQuizDetails">
                                             {{ getQuizItemTitle(itemId) || 'Untitled Question' }}
                                         </span>
                                         <!-- Quiz Details Hover Modal -->
                                         <div v-show="hoveredQuizId === itemId"
-                                            class="fixed z-[9999] ml-4 w-[600px] max-w-[90vw] bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-6"
+                                            class="fixed z-[9999] ml-4 w-[600px] max-w-[90vw] bg-gray-800 rounded-lg shadow-xl border border-gray-700 p-6"
                                             style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                             <div class="space-y-4">
-                                                <h4
-                                                    class="font-medium text-gray-900 dark:text-white text-lg break-words">
+                                                <h4 class="font-medium text-white text-lg break-words">
                                                     {{ getQuizItemTitle(itemId) }}
                                                 </h4>
-                                                <div class="text-gray-700 dark:text-gray-300">
+                                                <div class="text-gray-300">
                                                     <p class="font-medium mb-2">Question:</p>
                                                     <p class="mb-4 whitespace-normal break-words">{{
                                                         getQuizItemQuestion(itemId) }}</p>
@@ -106,10 +148,10 @@
                                                         <li v-for="(option, index) in getQuizItemOptions(itemId)"
                                                             :key="index"
                                                             class="whitespace-normal break-words flex items-center gap-1"
-                                                            :class="{ 'text-green-600 dark:text-green-400 font-medium': isCorrectAnswer(itemId, index + 1) }">
+                                                            :class="{ 'text-green-600 font-medium': isCorrectAnswer(itemId, index + 1) }">
                                                             <svg v-if="isCorrectAnswer(itemId, index + 1)"
                                                                 xmlns="http://www.w3.org/2000/svg"
-                                                                class="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0"
+                                                                class="h-4 w-4 text-green-600 flex-shrink-0"
                                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                                 <path stroke-linecap="round" stroke-linejoin="round"
                                                                     stroke-width="2.5" d="M5 13l4 4L19 7" />
@@ -122,7 +164,7 @@
                                         </div>
                                     </div>
                                     <div v-if="expandedSets.has(quizSet.setName)"
-                                        class="mt-1 pl-4 text-sm text-gray-500 dark:text-gray-400 italic">
+                                        class="mt-1 pl-4 text-sm text-gray-400 italic">
                                         {{ getQuizItemQuestion(itemId) }}
                                     </div>
                                 </li>
@@ -130,8 +172,7 @@
                         </div>
 
                         <!-- Additional Resources -->
-                        <div v-if="quizSet.podcastEpisodes || quizSet.resource"
-                            class="text-sm text-gray-600 dark:text-gray-300">
+                        <div v-if="quizSet.podcastEpisodes || quizSet.resource" class="text-sm text-gray-400">
                             <div v-if="quizSet.podcastEpisodes" class="flex items-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
@@ -150,15 +191,19 @@
                             </div>
                         </div>
 
-                        <!-- Start Quiz Button -->
+                        <!-- Edit Button -->
                         <div class="flex justify-end mt-4">
-                            <button @click="startQuiz(quizSet)"
-                                class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 flex items-center">
-                                <span>Start Quiz</span>
+                            <button @click="handleQuizSetClick(quizSet)" :class="[
+                                'px-3 py-1 text-sm rounded transition-colors duration-200 flex items-center text-white',
+                                isUserOwnedDraft(quizSet) ? 'bg-blue-500 hover:bg-blue-600' : 'bg-green-500 hover:bg-green-600'
+                            ]">
+                                <span>View Details</span>
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 5l7 7-7 7" />
+                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                 </svg>
                             </button>
                         </div>
@@ -167,14 +212,14 @@
             </div>
 
             <!-- Proposed Quiz Sets -->
-            <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div v-else-if="currentTab === 'proposed'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <div v-for="quizSet in proposedQuizSets" :key="quizSet.setName"
-                    class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200">
+                    class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200">
                     <div class="flex justify-between items-start mb-3">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                        <h3 class="text-lg font-semibold text-white">
                             {{ quizSet.setName }}
                         </h3>
-                        <span class="text-sm text-gray-500 dark:text-gray-400">
+                        <span class="text-sm text-gray-400">
                             {{ quizSet.items.length }} items
                         </span>
                     </div>
@@ -183,27 +228,27 @@
                     <div class="space-y-2">
                         <!-- Basic/Expert Mode -->
                         <div class="flex items-center text-sm">
-                            <span class="text-gray-600 dark:text-gray-300">Mode:</span>
+                            <span class="text-gray-300">Mode:</span>
                             <span :class="[
                                 'ml-2 px-2 py-1 rounded text-xs font-medium',
                                 quizSet.basicMode
-                                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                                    : 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+                                    ? 'bg-green-900 text-green-200'
+                                    : 'bg-purple-900 text-purple-200'
                             ]">
                                 {{ quizSet.basicMode ? 'Basic' : 'Expert' }}
                             </span>
                         </div>
 
                         <!-- In Progress Text -->
-                        <div v-if="quizSet.inProgressText"
-                            class="text-sm text-amber-600 dark:text-amber-400 italic mt-2">
+                        <div v-if="quizSet.inProgressText" class="text-sm text-amber-600 italic mt-2">
                             {{ quizSet.inProgressText }}
                         </div>
 
                         <!-- Quiz Items List -->
                         <div class="mt-3 space-y-1">
                             <div class="flex justify-between items-center">
-                                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Quiz Items:
+                                <h4 class="text-sm font-medium text-gray-700 text-left">Quiz
+                                    Items:
                                 </h4>
                                 <button @click="toggleQuestions(quizSet.setName)"
                                     class="text-sm text-blue-500 hover:text-blue-600 flex items-center">
@@ -217,23 +262,23 @@
                                     </svg>
                                 </button>
                             </div>
-                            <ul class="text-sm text-gray-600 dark:text-gray-400 list-disc pl-5 text-left">
+                            <ul class="text-sm text-gray-600 list-disc pl-5 text-left">
                                 <li v-for="itemId in quizSet.items" :key="itemId" class="mb-2">
                                     <div class="truncate relative">
-                                        <span class="cursor-help hover:text-blue-500"
-                                            @mouseenter="showQuizDetails(itemId)" @mouseleave="hideQuizDetails">
+                                        <span class="cursor-pointer hover:text-blue-500"
+                                            @click="handleEditClick(itemId)" @mouseenter="showQuizDetails(itemId)"
+                                            @mouseleave="hideQuizDetails">
                                             {{ getQuizItemTitle(itemId) || 'Untitled Question' }}
                                         </span>
                                         <!-- Quiz Details Hover Modal -->
                                         <div v-show="hoveredQuizId === itemId"
-                                            class="fixed z-[9999] ml-4 w-[600px] max-w-[90vw] bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-6"
+                                            class="fixed z-[9999] ml-4 w-[600px] max-w-[90vw] bg-gray-800 rounded-lg shadow-xl border border-gray-700 p-6"
                                             style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                             <div class="space-y-4">
-                                                <h4
-                                                    class="font-medium text-gray-900 dark:text-white text-lg break-words">
+                                                <h4 class="font-medium text-white text-lg break-words">
                                                     {{ getQuizItemTitle(itemId) }}
                                                 </h4>
-                                                <div class="text-gray-700 dark:text-gray-300">
+                                                <div class="text-gray-300">
                                                     <p class="font-medium mb-2">Question:</p>
                                                     <p class="mb-4 whitespace-normal break-words">{{
                                                         getQuizItemQuestion(itemId) }}</p>
@@ -242,10 +287,10 @@
                                                         <li v-for="(option, index) in getQuizItemOptions(itemId)"
                                                             :key="index"
                                                             class="whitespace-normal break-words flex items-center gap-1"
-                                                            :class="{ 'text-green-600 dark:text-green-400 font-medium': isCorrectAnswer(itemId, index + 1) }">
+                                                            :class="{ 'text-green-600 font-medium': isCorrectAnswer(itemId, index + 1) }">
                                                             <svg v-if="isCorrectAnswer(itemId, index + 1)"
                                                                 xmlns="http://www.w3.org/2000/svg"
-                                                                class="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0"
+                                                                class="h-4 w-4 text-green-600 flex-shrink-0"
                                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                                 <path stroke-linecap="round" stroke-linejoin="round"
                                                                     stroke-width="2.5" d="M5 13l4 4L19 7" />
@@ -258,7 +303,7 @@
                                         </div>
                                     </div>
                                     <div v-if="expandedSets.has(quizSet.setName)"
-                                        class="mt-1 pl-4 text-sm text-gray-500 dark:text-gray-400 italic">
+                                        class="mt-1 pl-4 text-sm text-gray-400 italic">
                                         {{ getQuizItemQuestion(itemId) }}
                                     </div>
                                 </li>
@@ -266,8 +311,7 @@
                         </div>
 
                         <!-- Additional Resources -->
-                        <div v-if="quizSet.podcastEpisodes || quizSet.resource"
-                            class="text-sm text-gray-600 dark:text-gray-300">
+                        <div v-if="quizSet.podcastEpisodes || quizSet.resource" class="text-sm text-gray-400">
                             <div v-if="quizSet.podcastEpisodes" class="flex items-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
@@ -286,18 +330,98 @@
                             </div>
                         </div>
 
-                        <!-- Start Quiz Button -->
+                        <!-- Edit Button -->
                         <div class="flex justify-end mt-4">
-                            <button @click="startQuiz(quizSet)"
-                                class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 flex items-center">
-                                <span>Start Quiz</span>
+                            <button @click="handleQuizSetClick(quizSet)" :class="[
+                                'px-3 py-1 text-sm rounded transition-colors duration-200 flex items-center text-white',
+                                isUserOwnedDraft(quizSet) ? 'bg-blue-500 hover:bg-blue-600' : 'bg-green-500 hover:bg-green-600'
+                            ]">
+                                <span>View Details</span>
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 5l7 7-7 7" />
+                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- New Quiz Items -->
+            <div v-else-if="currentTab === 'new'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200">
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-lg font-semibold text-white">
+                            New Quiz Items
+                        </h3>
+                        <span class="text-sm text-gray-400">
+                            {{ newQuizItems.length }} items
+                        </span>
+                    </div>
+
+                    <!-- Quiz Items List -->
+                    <div class="mt-3 space-y-1">
+                        <div class="flex justify-between items-center">
+                            <h4 class="text-sm font-medium text-gray-300 text-left">Quiz Items:</h4>
+                            <button @click="toggleQuestions('new')"
+                                class="text-sm text-blue-500 hover:text-blue-600 flex items-center">
+                                <span class="mr-1">{{ expandedSets.has('new') ? 'Hide' : 'Show' }}
+                                    Questions</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
+                                    :class="{ 'transform rotate-180': expandedSets.has('new') }" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M19 9l-7 7-7-7" />
                                 </svg>
                             </button>
                         </div>
+                        <ul class="mt-2 space-y-2">
+                            <li v-for="itemId in newQuizItems" :key="itemId" class="mb-2">
+                                <div class="truncate relative">
+                                    <span class="cursor-pointer hover:text-blue-500" @click="handleEditClick(itemId)"
+                                        @mouseenter="showQuizDetails(itemId)" @mouseleave="hideQuizDetails">
+                                        {{ getQuizItemTitle(itemId) || 'Untitled Question' }}
+                                    </span>
+                                    <!-- Quiz Details Hover Modal -->
+                                    <div v-show="hoveredQuizId === itemId"
+                                        class="fixed z-[9999] ml-4 w-[600px] max-w-[90vw] bg-gray-800 rounded-lg shadow-xl border border-gray-700 p-6"
+                                        style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
+                                        <div class="space-y-4">
+                                            <h4 class="font-medium text-white text-lg break-words">
+                                                {{ getQuizItemTitle(itemId) }}
+                                            </h4>
+                                            <div class="text-gray-300">
+                                                <p class="font-medium mb-2">Question:</p>
+                                                <p class="mb-4 whitespace-normal break-words">{{
+                                                    getQuizItemQuestion(itemId) }}</p>
+                                                <p class="font-medium mb-2">Options:</p>
+                                                <ul class="space-y-2 ml-4">
+                                                    <li v-for="(option, index) in getQuizItemOptions(itemId)"
+                                                        :key="index"
+                                                        class="whitespace-normal break-words flex items-center gap-1"
+                                                        :class="{ 'text-green-600 font-medium': isCorrectAnswer(itemId, index + 1) }">
+                                                        <svg v-if="isCorrectAnswer(itemId, index + 1)"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-4 w-4 text-green-600 flex-shrink-0"
+                                                            viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                                stroke-width="2.5" d="M5 13l4 4L19 7" />
+                                                        </svg>
+                                                        {{ index + 1 }}. {{ option }}
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-if="expandedSets.has('new')" class="mt-1 pl-4 text-sm text-gray-400 italic">
+                                    {{ getQuizItemQuestion(itemId) }}
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
@@ -306,9 +430,9 @@
         <!-- Create Quiz Set Modal -->
         <div v-if="showCreateModal"
             class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
+            <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full">
                 <div class="flex justify-between items-start mb-4">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">Create New Quiz Set</h2>
+                    <h2 class="text-xl font-bold text-white">Create New Quiz Set</h2>
                     <button @click="showCreateModal = false" class="text-gray-500 hover:text-gray-700">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
@@ -320,36 +444,36 @@
 
                 <form @submit.prevent="createQuizSet" class="space-y-4">
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">
                             Quiz Set Name
                         </label>
                         <input v-model="newQuizSet.setName" type="text" required
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
 
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">
                             Mode
                         </label>
                         <select v-model="newQuizSet.basicMode"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                             <option :value="true">Basic</option>
                             <option :value="false">Expert</option>
                         </select>
                     </div>
 
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">
                             Scope
                         </label>
                         <textarea v-model="newQuizSet.inProgressText" rows="2"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                             placeholder="Describe the scope of this quiz set..."></textarea>
                     </div>
 
                     <div class="flex justify-end space-x-3 mt-6">
                         <button type="button" @click="showCreateModal = false"
-                            class="px-4 py-2 text-sm text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
+                            class="px-4 py-2 text-sm text-gray-700 hover:text-gray-900">
                             Cancel
                         </button>
                         <button type="submit"
@@ -361,15 +485,57 @@
             </div>
         </div>
     </div>
+
+    <!-- Preview Modal -->
+    <div v-if="selectedQuizSet"
+        class="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center p-4 z-50 overflow-y-auto"
+        @click="selectedQuizSet = null">
+        <div class="relative my-8 bg-gray-800 rounded-lg p-6 max-w-4xl w-full mx-auto" @click.stop>
+            <div class="modal-header flex justify-between items-center mb-4 sticky top-0 bg-gray-800 z-10">
+                <h3 class="text-xl font-bold text-white">{{ selectedQuizSet.setName }}</h3>
+                <button @click="selectedQuizSet = null" class="text-gray-500 hover:text-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body overflow-y-auto">
+                <InProgress v-if="selectedQuizSet && selectedQuizSet.inProgress" :quizSet="selectedQuizSet"
+                    @close="selectedQuizSet = null" />
+                <div v-else class="space-y-6">
+                    <div v-for="itemId in selectedQuizSet.items" :key="itemId" class="quiz-item-container">
+                        <QuizItem :currentQuizItem="getQuizItem(itemId)" :itemNum="0" :reviewMode="false"
+                            :basicMode="selectedQuizSet.basicMode" :debug="false" :userAnswer="null" />
+                        <div class="edit-button-container">
+                            <button @click="handleEditClick(itemId)" :class="[
+                                'edit-button px-3 py-1 text-sm rounded transition-colors duration-200 flex items-center text-white',
+                                'bg-blue-500 hover:bg-blue-600'
+                            ]">
+                                Edit Quiz Item
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { quizSets } from '../data/quizSets';
 import { quizEntries } from '../data/quiz-items';
 import { useRouter } from 'vue-router';
 import { db } from '../firebase';
-import { doc, setDoc } from 'firebase/firestore';
+import { doc, setDoc, collection, addDoc } from 'firebase/firestore';
+import QuizSetTree from '../components/QuizSetTree.vue';
+import InProgress from '../components/InProgress.vue'; // Import the InProgress component
+import { useAuth } from '../composables/useAuth';
+import QuizItem from '../components/QuizItem.vue';
+import { quizStore } from '../stores/quizStore';
+import Discuss from '../components/Discuss.vue';
 
 const router = useRouter();
 const currentTab = ref('current');
@@ -386,14 +552,26 @@ const newQuizSet = reactive({
     items: []
 });
 
-// Filter quiz sets based on inProgress flag
+// Filtered quiz sets
 const publishedQuizSets = quizSets.filter(set => !set.inProgress);
 const proposedQuizSets = quizSets.filter(set => set.inProgress);
 
+// Use a ref to track the selected quiz set (for previewing the InProgress component)
+const selectedQuizSet = ref(null);
+
+// Add auth setup in script setup section after other const declarations
+const auth = useAuth();
+
+// Event handler for when a quiz set is selected from the QuizSetTree (via click)
+const handleSelectQuizSet = (quizSet) => {
+    selectedQuizSet.value = quizSet;
+    // Optionally, switch to the 'proposed' tab if the quiz set is in progress
+    currentTab.value = quizSet.inProgress ? 'proposed' : 'current';
+};
+
 // Create new quiz set
 const createQuizSet = async () => {
     try {
-        // Create a new quiz set document in Firestore
         const quizSetRef = doc(db, 'quizSets', newQuizSet.setName.toLowerCase().replace(/\s+/g, '-'));
         await setDoc(quizSetRef, {
             setName: newQuizSet.setName,
@@ -404,7 +582,6 @@ const createQuizSet = async () => {
             createdAt: new Date().toISOString()
         });
 
-        // Add the new quiz set to the local array
         quizSets.push({
             setName: newQuizSet.setName,
             basicMode: newQuizSet.basicMode,
@@ -413,7 +590,6 @@ const createQuizSet = async () => {
             items: []
         });
 
-        // Reset form and close modal
         Object.assign(newQuizSet, {
             setName: '',
             basicMode: true,
@@ -422,8 +598,6 @@ const createQuizSet = async () => {
             items: []
         });
         showCreateModal.value = false;
-
-        // Switch to appropriate tab
         currentTab.value = newQuizSet.inProgress ? 'proposed' : 'current';
     } catch (error) {
         console.error('Error creating quiz set:', error);
@@ -433,13 +607,13 @@ const createQuizSet = async () => {
 
 // Function to get quiz item title by ID
 const getQuizItemTitle = (id) => {
-    const quizItem = quizEntries.find(item => item.id === id);
+    const quizItem = quizEntries[id];
     return quizItem?.title || `Question ${id}`;
 };
 
 // Function to get quiz item question by ID
 const getQuizItemQuestion = (id) => {
-    const quizItem = quizEntries.find(item => item.id === id);
+    const quizItem = quizEntries[id];
     return quizItem?.Question || 'No question available';
 };
 
@@ -454,32 +628,48 @@ const toggleQuestions = (setName) => {
     expandedSets.value = newExpandedSets;
 };
 
-// Function to start a quiz
-const startQuiz = (quizSet) => {
-    // Find the index of the quiz set in the original quizSets array
-    const quizIndex = quizSets.findIndex(set => set.setName === quizSet.setName);
-    if (quizIndex !== -1) {
-        router.push(`/quiz/${quizIndex}`);
+// handle new quiz item
+const handleNewQuizItem = () => {
+    router.push('/quiz-item-editor/');
+};
+
+// Update handleEditClick function
+const handleEditClick = async (quizSetOrItemId) => {
+    router.push({
+        name: 'quizItemEditor',
+        params: { id: quizSetOrItemId }
+    });
+};
+
+// Function to check if a quiz set is user-owned and in draft status
+const isUserOwnedDraft = (quizSet) => {
+    return quizSet.isDraft && quizSet.createdBy === auth.user?.uid;
+};
+
+// Function to get edit button label
+const getEditButtonLabel = (quizSet) => {
+    if (isUserOwnedDraft(quizSet)) {
+        return 'Edit';
     }
+    return 'Propose Changes';
 };
 
 // Function to show quiz details
 const showQuizDetails = (id) => {
-    console.log('Showing quiz details for id:', id); // Debug log
+    console.log('Showing quiz details for id:', id);
     hoveredQuizId.value = id;
 };
 
 // Function to hide quiz details
 const hideQuizDetails = () => {
-    console.log('Hiding quiz details, current id:', hoveredQuizId.value); // Debug log
+    console.log('Hiding quiz details, current id:', hoveredQuizId.value);
     hoveredQuizId.value = null;
 };
 
 // Function to get quiz item options
 const getQuizItemOptions = (id) => {
-    const quizItem = quizEntries.find(item => item.id === id);
+    const quizItem = quizEntries[id];
     if (!quizItem) return [];
-
     return [
         quizItem.option1,
         quizItem.option2,
@@ -487,14 +677,53 @@ const getQuizItemOptions = (id) => {
         quizItem.option4,
         quizItem.option5,
         quizItem.option6
-    ].filter(option => option); // Filter out empty options
+    ].filter(option => option);
 };
 
 // Function to check if an option is the correct answer
 const isCorrectAnswer = (id, optionNumber) => {
-    const quizItem = quizEntries.find(item => item.id === id);
+    const quizItem = quizEntries[id];
     return quizItem?.correctAnswer === optionNumber;
 };
+
+// Update the click handler for quiz sets to show modal instead of direct edit
+const handleQuizSetClick = (quizSet) => {
+    selectedQuizSet.value = quizSet;
+};
+
+// Add getQuizItem function
+const getQuizItem = (id) => {
+    return quizEntries[id];
+};
+
+const userPublishedItems = computed(() => {
+    return quizEntries.filter(item =>
+        item.userEmail === auth.user?.email
+    );
+});
+
+// When displaying items, we can mark them as published
+const getItemStatus = (item) => {
+    if (quizEntries.some(qi =>
+        qi.userEmail === auth.user?.email &&
+        qi.title === item.title
+    )) {
+        return 'published';
+    }
+    return item.status || 'draft';
+};
+
+// Add this computed property in the script section
+const newQuizItems = computed(() => {
+    const newItemsSet = quizSets.find(set => set.setName === "New Items");
+    if (!newItemsSet) return [];
+
+    console.log('New Items Set:', newItemsSet);
+    console.log('All Items:', newItemsSet.items);
+
+    // Return all items from the New Items set
+    return newItemsSet.items;
+});
 </script>
 
 <style scoped>
@@ -515,4 +744,36 @@ const isCorrectAnswer = (id, optionNumber) => {
 [class*="z-9999"] {
     z-index: 9999 !important;
 }
+
+.modal-body {
+    max-height: calc(90vh - 100px);
+    overflow-y: auto;
+}
+
+.quiz-item-container {
+    position: relative;
+    padding-bottom: 3rem;
+    border-bottom: 1px solid rgba(156, 163, 175, 0.2);
+    background-color: rgb(31, 41, 55) !important;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+}
+
+.quiz-item-container:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.edit-button-container {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+}
+
+.edit-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 </style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 6a9ce7d..b7dfe08 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,4 +7,5 @@ export default defineConfig({
   build: {
     target: 'esnext'
   },
+  base: '/',
 })