diff --git a/Backend/app/__init__.py b/Backend/app/__init__.py
index 434a2ac..2163748 100644
--- a/Backend/app/__init__.py
+++ b/Backend/app/__init__.py
@@ -101,9 +101,11 @@ def invalid_token_callback(error_string):
     from app.auth.routes import auth as auth_blueprint
     from app.profile.routes import profile as profile_blueprint
     from app.main.routes import main as main_blueprint
+    from app.claude.routes import claude as claude_blueprint
 
     app.register_blueprint(auth_blueprint)
     app.register_blueprint(profile_blueprint)
     app.register_blueprint(main_blueprint)
+    app.register_blueprint(claude_blueprint)
 
     return app
diff --git a/Backend/app/claude/__init__.py b/Backend/app/claude/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Backend/app/claude/routes.py b/Backend/app/claude/routes.py
new file mode 100644
index 0000000..6e2dd36
--- /dev/null
+++ b/Backend/app/claude/routes.py
@@ -0,0 +1,122 @@
+from flask import Blueprint, request, jsonify
+from flask_jwt_extended import jwt_required, get_jwt_identity
+from anthropic import Anthropic, APIError
+import httpx
+import os
+import logging
+import sys
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+claude = Blueprint("claude", __name__)
+
+# Get API key
+logger.info("Current directory: %s", os.getcwd())
+logger.info("Python path: %s", sys.path)
+logger.info("Environment variables: %s", 
+    {k: v for k, v in os.environ.items() if 'KEY' in k or 'SECRET' in k or 'PASSWORD' in k})
+api_key = os.environ.get('ANTHROPIC_API_KEY')
+logger.info(f"API Key present: {bool(api_key)}")
+
+try:
+    client = httpx.Client()
+    anthropic = Anthropic(
+        api_key=api_key,
+        http_client=client
+    )
+    logger.info("Anthropic client initialized successfully")
+    logger.info(f"Anthropic client: {anthropic}")
+    logger.info("Api key: " + api_key)
+except Exception as e:
+    logger.error(f"Failed to initialize Anthropic client: {str(e)}")
+    anthropic = None
+
+@claude.route('/claude/generate', methods=['POST'])
+def generate_content():
+    """
+    Generate proposal content using Claude AI.
+    """
+    # Log request received
+    logger.info("Received generation request")
+    
+    # Check API key first
+    if not api_key:
+        logger.error("No API key found")
+        return jsonify({
+            'error': 'API key not configured',
+            'api_status': 'missing'
+        }), 500
+
+    # Check client initialization
+    if not anthropic:
+        logger.error("Anthropic client not initialized")
+        return jsonify({
+            'error': 'Anthropic client not initialized',
+            'api_status': 'client_error'
+        }), 500
+
+    try:
+        # Get and validate request data
+        data = request.get_json()
+        if not data:
+            logger.error("No JSON data in request")
+            return jsonify({'error': 'No JSON data provided'}), 400
+            
+        if 'prompt' not in data or 'section' not in data:
+            logger.error(f"Missing required fields. Received fields: {data.keys()}")
+            return jsonify({'error': 'Missing required fields: prompt and/or section'}), 400
+
+        logger.info(f"Generating content for section: {data['section']}")
+        
+        try:
+            # Generate content using Claude
+            message = anthropic.messages.create(
+                model="claude-3-haiku-20240307",
+                max_tokens=1500,
+                messages=[{
+                    "role": "user",
+                    "content": data['prompt']
+                }],
+                temperature=0.7,
+            )
+            
+            if not message.content:
+                logger.error("No content generated")
+                return jsonify({
+                    'error': 'Content generation failed',
+                    'api_status': 'generation_error'
+                }), 500
+
+            generated_content = message.content[0].text
+            logger.info("Content generated successfully")
+
+            return jsonify({
+                'content': generated_content,
+                'status': 'success'
+            }), 200
+
+        except APIError as ae:
+            logger.error(f"Anthropic API error: {str(ae)}")
+            return jsonify({
+                'error': 'Anthropic API error',
+                'details': str(ae),
+                'api_status': 'api_error'
+            }), 500
+            
+        except Exception as e:
+            logger.error(f"Generation error: {str(e)}")
+            return jsonify({
+                'error': 'Content generation failed',
+                'details': str(e),
+                'api_status': 'generation_error'
+            }), 500
+
+    except Exception as e:
+        logger.error(f"Request processing error: {str(e)}")
+        return jsonify({
+            'error': 'Request processing failed',
+            'details': str(e),
+            'api_status': 'request_error'
+        }), 500
\ No newline at end of file
diff --git a/Backend/app/config.py b/Backend/app/config.py
index 785afff..3b077b5 100644
--- a/Backend/app/config.py
+++ b/Backend/app/config.py
@@ -13,12 +13,12 @@ class AppConfig:
     database_url = os.getenv("DATABASE_URL")
     if database_url and database_url.startswith("postgres://"):
         database_url = database_url.replace("postgres://", "postgresql://")
-    
+
     # Determine environment and database connection
     IS_MIGRATION = os.getenv('IS_MIGRATION') == 'true'
     IS_CLOUD_RUN = os.getenv('K_SERVICE') is not None
     USE_CLOUD_SQL_PROXY = os.getenv('USE_CLOUD_SQL_PROXY') == 'true'
-    
+
     # Database URI Configuration
     if IS_MIGRATION or USE_CLOUD_SQL_PROXY:
         # Use Cloud SQL Proxy connection for migrations or when explicitly requested
@@ -29,13 +29,13 @@ class AppConfig:
     else:
         # Local development fallback
         SQLALCHEMY_DATABASE_URI = database_url or "sqlite:///db.sqlite"
-    
+
     # Determine database type to set appropriate configuration
     is_sqlite = SQLALCHEMY_DATABASE_URI.startswith('sqlite')
-    
+
     # Base SQLAlchemy configuration
     SQLALCHEMY_TRACK_MODIFICATIONS = False
-    
+
     # Configure engine options based on database type
     if is_sqlite:
         SQLALCHEMY_ENGINE_OPTIONS = {
@@ -55,25 +55,25 @@ class AppConfig:
                 'connect_timeout': 30
             } if not is_sqlite else {}
         }
-    
+
     # Session configuration
     SESSION_TYPE = "filesystem"
     SESSION_COOKIE_SAMESITE = "None"
     SESSION_COOKIE_SECURE = True
     SESSION_COOKIE_HTTPONLY = True
     SESSION_COOKIE_DOMAIN = '.onrender.com' if os.getenv('FLASK_ENV') == 'production' else None
-    
+
     # Mail configuration
     MAIL_USERNAME = os.getenv("MAIL_USERNAME")
     MAIL_PASSWORD = os.getenv("MAIL_PASSWORD")
     MAIL_SERVER = "smtp.googlemail.com"
     MAIL_PORT = 587
     MAIL_USE_TLS = True
-    
+
     # File upload configuration
     UPLOAD_FOLDER = os.path.abspath("uploads")
     ENV = os.getenv("FLASK_ENV", "production")
-    
+
     # JWT settings
     JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY")
     JWT_ACCESS_TOKEN_EXPIRES = timedelta(days=1)
@@ -85,12 +85,14 @@ class AppConfig:
     # Google Cloud configuration
     GOOGLE_CLOUD_PROJECT = os.getenv("GOOGLE_CLOUD_PROJECT")
     GOOGLE_APPLICATION_CREDENTIALS = os.getenv("GOOGLE_APPLICATION_CREDENTIALS")
+    GCS_BUCKET_NAME = os.environ.get("GCS_BUCKET_NAME")
 
-    GCS_BUCKET_NAME = os.environ.get('GCS_BUCKET_NAME')
+    # Anthropic API key
+    ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
 
 class TestConfig(AppConfig):
     SQLALCHEMY_DATABASE_URI = "sqlite://"
     TESTING = True
     SQLALCHEMY_ENGINE_OPTIONS = {
         'pool_pre_ping': True
-    }  # Simplified options for testing
\ No newline at end of file
+    }  # Simplified options for testing
diff --git a/Backend/requirements.dev.txt b/Backend/requirements.dev.txt
index 7f8acc0..448d76f 100644
--- a/Backend/requirements.dev.txt
+++ b/Backend/requirements.dev.txt
@@ -1,4 +1,5 @@
 # Core dependencies
+anthropic>=0.10.0
 bcrypt>=4.0.1
 Flask>=2.2.3
 Flask-Bcrypt>=1.0.1
diff --git a/Backend/requirements.prod.txt b/Backend/requirements.prod.txt
index 8987514..851cf59 100644
--- a/Backend/requirements.prod.txt
+++ b/Backend/requirements.prod.txt
@@ -1,4 +1,5 @@
 # Core dependencies
+anthropic>=0.10.0
 bcrypt==4.0.1
 Flask==2.2.3
 Flask-Bcrypt==1.0.1
diff --git a/Frontend/src/App.js b/Frontend/src/App.js
index a6a9b2e..8bca853 100644
--- a/Frontend/src/App.js
+++ b/Frontend/src/App.js
@@ -17,7 +17,8 @@ import VolunteerPage from './pages/VolunteerPage';
 import SelectUserTypePage from './pages/SelectUserTypePage';
 import EstablishmentGuide from './pages/EstablishmentGuide';
 import EditProfile from './pages/EditProfilePage';
-import ProfileImages from './components/OrgProfileFormComponents/ProfileImages';
+import ProfileImages from "./components/OrgProfileFormComponents/ProfileImages";
+import ProposalBuilderPage from './pages/ProposalBuilderPage';
 
 
 function App() {
@@ -37,7 +38,6 @@ function App() {
               <Route path="/home" element={<DisplayPage />} />
               <Route path="/find-gos" element={<DisplayPage />} />
               <Route path="/" element={<Navigate to="/find-gos" />} />
-              
               <Route path="/onboarding" element={<OnboardingForm />} />
               <Route path="/org_profile_form" element={<OrgProfileForm />} />
               <Route path="/org_profile" element={<OrgProfile />} />
@@ -45,11 +45,12 @@ function App() {
               <Route path="/edit_profile" element={<EditProfile />} />
 
               <Route path="/establishment-guide" element={<EstablishmentGuide />} />
+              <Route path="/proposal-builder" element={<ProposalBuilderPage />} />
             </Routes>
-            </TranslationProvider>
+          </TranslationProvider>
         </ApiProvider>
-        </AuthProvider>
-    </BrowserRouter>
+      </AuthProvider>
+      </BrowserRouter>
     </Container>
   );
 }
diff --git a/Frontend/src/components/Header.js b/Frontend/src/components/Header.js
index ce1be62..d36b6fc 100644
--- a/Frontend/src/components/Header.js
+++ b/Frontend/src/components/Header.js
@@ -15,6 +15,7 @@ const navigation = [
     { name: "Home", href: "/" },
     { name: "Find GOs", href: "/find-gos" },
     { name: "Establishment Guide", href: "/establishment-guide" },
+    { name: "Proposal Builder", href: "/proposal-builder" },
     { name: "Volunteer", href: "/volunteer" },
     { name: "About", href: "/about" },
 ];
diff --git a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
new file mode 100644
index 0000000..f9ac08a
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    DocumentTextIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
+import GeneratedContent from './GeneratedContent';
+
+/**
+ * ExecutiveSummarySection
+ * 
+ * Creates a compelling executive summary that synthesizes all proposal sections.
+ * Written last but appears first in the final document.
+ * Pulls context from organization info, project narrative, and budget sections.
+ */
+export default function ExecutiveSummarySection() {
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+
+    const [inputs, setInputs] = useState({
+        keyHighlights: '', // Additional points to emphasize
+        uniqueValue: '', // What makes this project special
+        urgency: '', // Why now/why this project
+        impact: '' // Expected outcomes worth highlighting
+    });
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem(`${userId}_executiveSummary`);
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    const handleInputChange = (field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [field]: value
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            // Get content from all previous sections
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
+            const narrativeContent = localStorage.getItem(`${userId}_projectNarrative`);
+            const budgetContent = localStorage.getItem(`${userId}_proposalBudget`);
+
+            const prompt = `You are an expert grant writer. Create a compelling executive summary that synthesizes all sections of the grant proposal into a powerful opening statement. 
+            
+            Use these sections for context:
+            
+            Organization Information:
+            ${orgContent}
+
+            Project Narrative:
+            ${narrativeContent}
+
+            Budget Information:
+            ${budgetContent}
+
+            Additional Emphasis Points:
+            Key Highlights: ${inputs.keyHighlights}
+            Unique Value: ${inputs.uniqueValue}
+            Urgency: ${inputs.urgency}
+            Impact: ${inputs.impact}
+
+            Create an executive summary that:
+            1. Captures attention in the first paragraph
+            2. Clearly states the problem and your solution
+            3. Emphasizes your organization's unique capability
+            4. Includes key financial figures and project timeline
+            5. Highlights expected impact and outcomes
+            6. Maintains professional tone while conveying urgency
+            7. Stays under 500 words
+            
+            Note: This summary will appear first in the proposal but synthesizes all sections.`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'executiveSummary'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem(`${userId}_executiveSummary`, response.body.content);
+
+            
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate executive summary. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Executive Summary</h2>
+
+            {/* Information Notice */}
+            <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                <p className="text-blue-800 font-normal">
+                    <ul className="list-disc list-inside">
+                        <li><span className="font-bold">This is your opening pitch</span> - make every word count.</li>
+                        <li><span className="font-bold">Write this section last</span> but present it first in your proposal.</li>
+                        <li><span className="font-bold">Focus on key points</span> from each section of your proposal.</li>
+                        <li><span className="font-bold">Keep it concise</span> - aim for 500 words or less.</li>
+                        <li>Remember: Many readers will only see this section.</li>
+                    </ul>
+                </p>
+            </div>
+
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
+
+            <div className="mb-8 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                <p className="text-yellow-800">
+                    <span className="font-bold">Note:</span> Before generating the executive summary, make sure you've completed all other sections of your proposal. The AI will use that context to create a comprehensive summary.
+                </p>
+            </div>
+
+            {/* Input Form */}
+            <div className="space-y-6">
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Key Points to Emphasize
+                    </label>
+                    <textarea
+                        value={inputs.keyHighlights}
+                        onChange={(e) => handleInputChange('keyHighlights', e.target.value)}
+                        placeholder="What are the most important points that should stand out?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Unique Value Proposition
+                    </label>
+                    <textarea
+                        value={inputs.uniqueValue}
+                        onChange={(e) => handleInputChange('uniqueValue', e.target.value)}
+                        placeholder="What makes your organization/project uniquely qualified to address this need?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Urgency and Timing
+                    </label>
+                    <textarea
+                        value={inputs.urgency}
+                        onChange={(e) => handleInputChange('urgency', e.target.value)}
+                        placeholder="Why is this project critical now? What makes the timing important?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Impact Highlights
+                    </label>
+                    <textarea
+                        value={inputs.impact}
+                        onChange={(e) => handleInputChange('impact', e.target.value)}
+                        placeholder="What are the most compelling outcomes and impacts to highlight?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            </div>
+
+            {/* Generate Button */}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <DocumentTextIcon className="h-5 w-5 mr-2" />
+                        Generate Executive Summary
+                    </>
+                )}
+            </button>
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                    storageKey="executiveSummary"
+                    title="Generated Executive Summary"
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
new file mode 100644
index 0000000..a167626
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowPathIcon, DocumentDuplicateIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useAuth } from '../../contexts/AuthProvider';
+
+/**
+ * GeneratedContent
+ * 
+ * A reusable component for displaying and managing AI-generated content.
+ * Handles content display, copying, regeneration, and storage management.
+ * 
+ * @param {string} content - The content to display
+ * @param {function} onRegenerate - Callback function to regenerate content
+ * @param {string} storageKey - Key for localStorage (e.g., 'projectNarrative', 'executiveSummary')
+ * @param {string} title - Optional custom title for the content section
+ */
+const GeneratedContent = ({ 
+    content, 
+    onRegenerate, 
+    storageKey, 
+    title = 'Generated Content'
+}) => {
+    const [copied, setCopied] = useState(false);
+    const [localContent, setLocalContent] = useState('');
+    const [isRegenerating, setIsRegenerating] = useState(false);
+    const [showAlert, setShowAlert] = useState(false);
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+
+    // Create full storage key with user ID if available
+    const fullStorageKey = userId ? `${userId}_${storageKey}` : storageKey;
+
+    // Load content from localStorage on mount and when content prop changes
+    useEffect(() => {
+        const storedContent = localStorage.getItem(fullStorageKey);
+        setLocalContent(content || storedContent || '');
+    }, [content, fullStorageKey]);
+
+    // Format content with proper line breaks and spacing
+    const formatContent = (text) => {
+        if (!text) return null;
+        
+        const paragraphs = text.split('\n\n');
+        return paragraphs.map((paragraph, index) => {
+            const lines = paragraph.split('\n');
+            return (
+                <div key={index} className="mb-4">
+                    {lines.map((line, lineIndex) => (
+                        <React.Fragment key={lineIndex}>
+                            {line}
+                            {lineIndex < lines.length - 1 && <br />}
+                        </React.Fragment>
+                    ))}
+                </div>
+            );
+        });
+    };
+
+    // Handle copying content to clipboard
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(localContent);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy text:', err);
+            setShowAlert(true);
+        }
+    };
+
+    // Handle regeneration of content
+    const handleRegenerate = async () => {
+        setIsRegenerating(true);
+        try {
+            await onRegenerate();
+        } catch (error) {
+            console.error('Regeneration failed:', error);
+            setShowAlert(true);
+        } finally {
+            setIsRegenerating(false);
+        }
+    };
+
+    // Clear content from localStorage
+    const handleClear = () => {
+        localStorage.removeItem(fullStorageKey);
+        setLocalContent('');
+        setShowAlert(true);
+        setTimeout(() => setShowAlert(false), 3000);
+    };
+
+    // Don't render if no content available
+    if (!localContent) {
+        return null;
+    }
+
+    return (
+        <div className="mt-8 bg-white border border-gray-200 rounded-xl shadow-sm">
+            {/* Header */}
+            <div className="px-6 py-4 border-b border-gray-200">
+                <h3 className="text-lg font-semibold text-gray-900">
+                    {title}
+                </h3>
+            </div>
+
+            {/* Content */}
+            <div className="px-6 py-4">
+                <div className="prose max-w-none">
+                    {formatContent(localContent)}
+                </div>
+            </div>
+
+            {/* Footer with actions */}
+            <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 rounded-b-xl">
+                <div className="flex justify-between items-center">
+                    <div className="flex gap-2">
+                        <button
+                            onClick={handleRegenerate}
+                            disabled={isRegenerating}
+                            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+                        >
+                            <ArrowPathIcon className={`h-4 w-4 mr-2 ${isRegenerating ? 'animate-spin' : ''}`} />
+                            {isRegenerating ? 'Regenerating...' : 'Regenerate'}
+                        </button>
+
+                        <button
+                            onClick={handleClear}
+                            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50 hover:border-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                        >
+                            <TrashIcon className="h-4 w-4 mr-2" />
+                            Clear Saved
+                        </button>
+                    </div>
+
+                    <button
+                        onClick={handleCopy}
+                        className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                    >
+                        {copied ? (
+                            <>
+                                <CheckIcon className="h-4 w-4 mr-2 text-green-500" />
+                                Copied!
+                            </>
+                        ) : (
+                            <>
+                                <DocumentDuplicateIcon className="h-4 w-4 mr-2" />
+                                Copy to Clipboard
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GeneratedContent;
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
new file mode 100644
index 0000000..122c427
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from 'react';
+import { BuildingOfficeIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
+import GeneratedContent from './GeneratedContent';
+
+/**
+ * OrganizationInfoSection
+ * 
+ * Displays and manages organization information for grant proposals.
+ * Loads data from the API and allows for proposal-specific additions.
+ * 
+ * Features:
+ * - Uses auth context for user identification
+ * - Loads existing org profile data from API
+ * - Displays loading states and error handling
+ * - Allows additional proposal-specific details
+ * - Generates AI-enhanced content for grant proposals
+ * - Saves to localStorage for proposal persistence
+ */
+export default function OrganizationInfoSection() {
+    const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+    
+    const [loading, setLoading] = useState(true);
+    const [orgData, setOrgData] = useState(null);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const [generatedContent, setGeneratedContent] = useState('');
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem(`${userId}_organizationContent`);
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    // State for form inputs, will be populated with org data
+    const [inputs, setInputs] = useState({
+        // Basic Info (pre-populated)
+        orgName: '',
+        yearEstablished: '',
+        registrationNumber: '',
+        missionStatement: '',
+        
+        // Contact Info (pre-populated)
+        location: {
+            country: '',
+            county: '',
+            district: ''
+        },
+        contact: {
+            email: '',
+            phone: '',
+            website: ''
+        },
+
+        // Grant-Specific Info (user input)
+        grantSpecific: {
+            orgCapacity: '',
+            previousGrants: '',
+            successStories: '',
+            teamQualifications: '',
+            partnershipHistory: '',
+            relevantInitiatives: '',
+            ongoingProjects: ''
+        }
+    });
+
+    // Load org data when userId is available
+    useEffect(() => {
+        const loadOrgData = async () => {
+            if (!userId) {
+                setLoading(false);
+                return;
+            }
+
+            try {
+                const response = await apiClient.get(`/profile/load_org?user_id=${userId}`);
+                
+                if (response.ok) {
+                    setOrgData(response.body);
+                    
+                    // Update inputs with loaded data
+                    const { orgProfile, orgInitiatives, orgProjects } = response.body;
+                    
+                    setInputs(prev => ({
+                        ...prev,
+                        orgName: orgProfile.org_name,
+                        yearEstablished: orgProfile.org_year_established,
+                        registrationNumber: orgProfile.org_registration_number,
+                        missionStatement: orgProfile.org_mission_statement,
+                        location: {
+                            country: orgProfile.org_country,
+                            county: orgProfile.org_county,
+                            district: orgProfile.org_district_town
+                        },
+                        contact: {
+                            email: orgProfile.org_email,
+                            phone: orgProfile.org_phone,
+                            website: orgProfile.org_website || ''
+                        },
+                        // Pre-populate relevant initiatives and projects
+                        grantSpecific: {
+                            ...prev.grantSpecific,
+                            relevantInitiatives: orgInitiatives
+                                .map(init => `${init.initiative_name}: ${init.initiative_description}`)
+                                .join('\n\n'),
+                            ongoingProjects: orgProjects
+                                .filter(proj => proj.project_status === 'ongoing')
+                                .map(proj => `${proj.project_name}: ${proj.project_description}`)
+                                .join('\n\n')
+                        }
+                    }));
+                } else {
+                    setError("Failed to load organization data");
+                    console.error("Error fetching data: ", response.body);
+                }
+            } catch (error) {
+                setError("Error connecting to server");
+                console.error("Error fetching data: ", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadOrgData();
+    }, [apiClient, userId]);
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: section === 'grantSpecific' || section === 'location' || section === 'contact'
+                ? { ...prev[section], [field]: value }
+                : value
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            const prompt = `Create a professional organization background section for a grant proposal using the following information:
+
+            Organization Name: ${inputs.orgName}
+            Year Established: ${inputs.yearEstablished}
+            Registration: ${inputs.registrationNumber}
+            Mission: ${inputs.missionStatement}
+
+            Location: ${inputs.location.district}, ${inputs.location.county}, ${inputs.location.country}
+
+            Current Initiatives:
+            ${inputs.grantSpecific.relevantInitiatives}
+
+            Ongoing Projects:
+            ${inputs.grantSpecific.ongoingProjects}
+
+            Additional Context:
+            Organizational Capacity: ${inputs.grantSpecific.orgCapacity}
+            Previous Grants: ${inputs.grantSpecific.previousGrants}
+            Success Stories: ${inputs.grantSpecific.successStories}
+            Team Qualifications: ${inputs.grantSpecific.teamQualifications}
+            Partnership History: ${inputs.grantSpecific.partnershipHistory}
+
+            Please create a compelling narrative that:
+            1. Establishes organizational credibility
+            2. Highlights relevant experience and success
+            3. Demonstrates capacity to implement projects
+            4. Showcases strong governance and accountability
+            5. Uses professional grant writing language`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'organizationInfo'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem(`${userId}_organizationContent`, response.body.content);
+
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate content. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-64">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Organization Information</h2>
+            
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
+
+            <div className="space-y-8">
+                {/* Information Notice */}
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800">
+                        This section builds upon your organization's existing profile information. The following fields are optional 
+                        and should only be filled if they provide additional context specific to this grant application. 
+                        If the information is already covered in your organization profile, you may leave these fields blank.
+                    </p>
+                </div>
+
+                {/* Pre-populated Organization Information */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Basic Information</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">Organization Name</label>
+                            <input
+                                type="text"
+                                value={inputs.orgName}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                readOnly
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">Year Established</label>
+                            <input
+                                type="text"
+                                value={inputs.yearEstablished}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                readOnly
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Current Initiatives & Projects */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Current Work</h3>
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Initiatives
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.relevantInitiatives}
+                                onChange={(e) => handleInputChange('grantSpecific', 'relevantInitiatives', e.target.value)}
+                                rows={4}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Ongoing Projects
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.ongoingProjects}
+                                onChange={(e) => handleInputChange('grantSpecific', 'ongoingProjects', e.target.value)}
+                                rows={4}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Grant-Specific Information */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Additional Grant-Specific Details (Optional)</h3>
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Project-Specific Organizational Capacity
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.orgCapacity}
+                                onChange={(e) => handleInputChange('grantSpecific', 'orgCapacity', e.target.value)}
+                                placeholder="If relevant, describe any additional capacity specific to this project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Grant Experience
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.previousGrants}
+                                onChange={(e) => handleInputChange('grantSpecific', 'previousGrants', e.target.value)}
+                                placeholder="If applicable, mention specific grants relevant to this application..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Project-Specific Success Stories
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.successStories}
+                                onChange={(e) => handleInputChange('grantSpecific', 'successStories', e.target.value)}
+                                placeholder="If relevant, share success stories related to similar projects..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Additional Team Qualifications
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.teamQualifications}
+                                onChange={(e) => handleInputChange('grantSpecific', 'teamQualifications', e.target.value)}
+                                placeholder="If applicable, mention specific team qualifications relevant to this project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Partnership History
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.partnershipHistory}
+                                onChange={(e) => handleInputChange('grantSpecific', 'partnershipHistory', e.target.value)}
+                                placeholder="If applicable, describe partnerships relevant to this specific project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Generate Button */}
+                <button
+                    onClick={handleGenerate}
+                    disabled={isGenerating}
+                    className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+                >
+                    {isGenerating ? (
+                        <>
+                            <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                            Generating...
+                        </>
+                    ) : (
+                        <>
+                            <BuildingOfficeIcon className="h-5 w-5 mr-2" />
+                            Generate Organization Section
+                        </>
+                    )}
+                </button>
+            </div>
+            
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                    storageKey="organizationInfo"
+                    title="Generated Organization Information"
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
new file mode 100644
index 0000000..1c266eb
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -0,0 +1,343 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    DocumentTextIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
+import GeneratedContent from './GeneratedContent';
+/**
+ * ProjectNarrativeSection
+ * 
+ * Collects project details and generates a comprehensive narrative section
+ * using AI assistance. Uses organization context to maintain consistency.
+ * 
+ * Features:
+ * - Problem statement inputs
+ * - Solution/approach details
+ * - Goals and outcomes
+ * - Timeline information
+ * - Considers org context for cohesive narrative
+ */
+export default function ProjectNarrativeSection({ }) {
+
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem(`${userId}_projectNarrative`);
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    const [inputs, setInputs] = useState({
+        problem: {
+            statement: '',
+            affectedPopulation: '',
+            currentSituation: '',
+            relevance: ''
+        },
+        solution: {
+            approach: '',
+            methodology: '',
+            innovation: ''
+        },
+        impact: {
+            shortTerm: '',
+            longTerm: '',
+            beneficiaries: '',
+            measurement: ''
+        },
+        timeline: {
+            duration: '',
+            majorPhases: '',
+            keyMilestones: ''
+        }
+    });
+
+    const sections = [
+        {
+            title: 'Problem Statement',
+            stateKey: 'problem',
+            fields: [
+                {
+                    id: 'statement',
+                    label: 'What specific problem are you addressing?',
+                    placeholder: 'Describe the core issue your project tackles...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'affectedPopulation',
+                    label: 'Who is affected by this problem?',
+                    placeholder: 'Detail the communities or groups impacted...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'currentSituation',
+                    label: 'What is the current situation?',
+                    placeholder: 'Explain the existing conditions and challenges...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'relevance',
+                    label: 'Why is addressing this important now?',
+                    placeholder: 'Describe the urgency and significance...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Proposed Solution',
+            stateKey: 'solution',
+            fields: [
+                {
+                    id: 'approach',
+                    label: 'What is your approach to solving this problem?',
+                    placeholder: 'Outline your solution strategy...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'methodology',
+                    label: 'How will you implement this solution?',
+                    placeholder: 'Detail your implementation methods...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'innovation',
+                    label: 'What makes your approach innovative or effective?',
+                    placeholder: 'Highlight unique aspects of your solution...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Expected Impact',
+            stateKey: 'impact',
+            fields: [
+                {
+                    id: 'shortTerm',
+                    label: 'What are the immediate outcomes?',
+                    placeholder: 'List expected results in first year...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'longTerm',
+                    label: 'What are the long-term impacts?',
+                    placeholder: 'Describe lasting changes...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'beneficiaries',
+                    label: 'Who will benefit and how?',
+                    placeholder: 'Detail direct and indirect beneficiaries...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'measurement',
+                    label: 'How will you measure success?',
+                    placeholder: 'Outline key metrics and evaluation methods...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Timeline',
+            stateKey: 'timeline',
+            fields: [
+                {
+                    id: 'duration',
+                    label: 'What is the project duration?',
+                    placeholder: 'e.g., 18 months, 2 years...',
+                    type: 'text'
+                },
+                {
+                    id: 'majorPhases',
+                    label: 'What are the major project phases?',
+                    placeholder: 'List main implementation phases...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'keyMilestones',
+                    label: 'What are the key milestones?',
+                    placeholder: 'List important project milestones...',
+                    type: 'textarea'
+                }
+            ]
+        }
+    ];
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [field]: value
+            }
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            // Get previous content for context
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
+
+            const prompt = `You are an expert grant writer. Using the provided information, create a compelling project narrative section for a grant proposal. 
+            Make it professional, clear, and persuasive.
+
+            Organization Context:
+            ${orgContent}
+
+            Problem Information:
+            ${inputs.problem.statement}
+            Affected Population: ${inputs.problem.affectedPopulation}
+            Current Situation: ${inputs.problem.currentSituation}
+            Relevance: ${inputs.problem.relevance}
+
+            Proposed Solution:
+            Approach: ${inputs.solution.approach}
+            Methodology: ${inputs.solution.methodology}
+            Innovation: ${inputs.solution.innovation}
+
+            Expected Impact:
+            Short-term Outcomes: ${inputs.impact.shortTerm}
+            Long-term Impact: ${inputs.impact.longTerm}
+            Beneficiaries: ${inputs.impact.beneficiaries}
+            Success Metrics: ${inputs.impact.measurement}
+
+            Timeline:
+            Duration: ${inputs.timeline.duration}
+            Major Phases: ${inputs.timeline.majorPhases}
+            Key Milestones: ${inputs.timeline.keyMilestones}
+
+            Generate a cohesive project narrative that:
+            1. Clearly states the problem and its significance
+            2. Presents a compelling solution
+            3. Details expected outcomes and impact
+            4. Outlines a clear implementation timeline
+            5. Maintains consistency with the organization's context
+            6. Uses professional grant writing language and structure`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'projectNarrative'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem(`${userId}_projectNarrative`, response.body.content);
+            
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate content. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Narrative</h2>
+
+            {/* Information Notice */}
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800 font-normal">
+                        <ul className="list-disc list-inside">
+                            <li><span class="font-bold">Be thorough and specific</span> in your responses.</li>
+                            <li><span class="font-bold">Provide context</span> where necessary, and include relevant details to support your points.</li>
+                            <li><span class="font-bold">Ensure you highlight key information</span> that helps convey the urgency, impact, and effectiveness of your approach.</li>
+                            <li>Keep your answers clear and focused while making sure to address all aspects of the request.</li>
+                        </ul>
+                    </p>
+                </div>
+
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
+            
+            {/* Input Form */}
+            <div className="space-y-8">
+                {sections.map((section) => (
+                    <div key={section.title} className="border-b border-gray-200 pb-6">
+                        <h3 className="text-xl font-medium text-gray-900 mb-4">
+                            {section.title}
+                        </h3>
+                        <div className="space-y-4">
+                            {section.fields.map((field) => (
+                                <div key={field.id}>
+                                    <label className="block text-m font-medium text-gray-700 mb-1">
+                                        {field.label}
+                                    </label>
+                                    {field.type === 'textarea' ? (
+                                    <textarea
+                                        value={inputs[section.stateKey][field.id]}
+                                        onChange={(e) => handleInputChange(
+                                            section.stateKey,  // Use the explicit key
+                                            field.id,
+                                            e.target.value
+                                        )}
+                                        placeholder={field.placeholder}
+                                        rows={3}
+                                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                    />
+                                ) : (
+                                    <input
+                                        type="text"
+                                        value={inputs[section.stateKey][field.id]}
+                                        onChange={(e) => handleInputChange(
+                                            section.stateKey,  // Use the explicit key
+                                            field.id,
+                                            e.target.value
+                                        )}
+                                        placeholder={field.placeholder}
+                                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                    />
+                                )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Generate button that calls handleGenerate */}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <DocumentTextIcon className="h-5 w-5 mr-2" />
+                        Generate Narrative
+                    </>
+                )}
+            </button>
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                    storageKey="projectNarrative"
+                    title="Generated Project Narrative"
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
new file mode 100644
index 0000000..2decd49
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
@@ -0,0 +1,295 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    CurrencyDollarIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
+import GeneratedContent from './GeneratedContent';
+
+/**
+ * ProposalBudgetSection
+ * 
+ * A flexible budget component that handles both specific grant requirements
+ * and open-ended proposals. Adapts to different funding situations and
+ * generates appropriate budget narratives.
+ */
+export default function ProposalBudgetSection() {
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+
+    // Initialize form state
+    const [inputs, setInputs] = useState({
+        grantType: 'open', // 'open' or 'specific'
+        grantRequirements: '', // For pasting specific grant budget requirements
+        budget: {
+            totalAmount: '',
+            breakdown: '', // Flexible text area for budget breakdown
+            justification: '' // Explanation of costs
+        },
+        sustainability: {
+            additionalFunding: '', // Other funding sources or plans
+            continuationPlan: '' // How the project will continue after funding
+        }
+    });
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem(`${userId}_proposalBudget`);
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [field]: value
+            }
+        }));
+    };
+
+    const handleGrandTypeChange = (type) => {
+        setInputs(prev => ({
+            ...prev,
+            grantType: type
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            // Get previous content for context
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
+            const narrativeContent = localStorage.getItem(`${userId}_projectNarrative`);
+
+            const prompt = `You are an expert grant writer. Using the provided information, create a budget narrative that ${
+                inputs.grantType === 'specific' 
+                ? 'addresses the specific grant requirements provided'
+                : 'follows standard grant writing best practices'
+            }.
+
+            Organization Context:
+            ${orgContent}
+
+            Project Narrative Context:
+            ${narrativeContent}
+
+            ${inputs.grantType === 'specific' ? `Grant Requirements:
+            ${inputs.grantRequirements}` : ''}
+
+            Budget Information:
+            Total Amount: ${inputs.budget.totalAmount}
+            Budget Breakdown: ${inputs.budget.breakdown}
+            Budget Justification: ${inputs.budget.justification}
+
+            Additional Funding: ${inputs.sustainability.additionalFunding}
+            Continuation Plan: ${inputs.sustainability.continuationPlan}
+
+            Generate a professional budget narrative that:
+            1. ${inputs.grantType === 'specific' ? 'Directly addresses the grant requirements' : 'Follows standard grant writing best practices'}
+            2. Clearly justifies all costs
+            3. Demonstrates fiscal responsibility
+            4. Shows alignment with project goals
+            5. Explains sustainability plans`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'proposalBudget'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem(`${userId}_proposalBudget`, response.body.content);
+            
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate budget narrative. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Budget</h2>
+
+            {/* Grant Type Selection */}
+            <div className="mb-8">
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800 font-normal">
+                        <ul className="list-disc list-inside">
+                            <li><span className="font-bold">Be detailed and specific</span> with all cost estimates and line items.</li>
+                            <li><span className="font-bold">Explain the rationale</span> behind each budget category and how it supports project goals.</li>
+                            <li><span className="font-bold">Include all funding sources</span> and demonstrate responsible financial planning.</li>
+                            <li><span className="font-bold">Show sustainability</span> by explaining how the project will continue beyond the grant period.</li>
+                            <li>Use clear, professional language and accurate calculations.</li>
+                        </ul>
+                    </p>
+                </div>
+
+                <label className="block text-xl font-medium text-gray-700 mb-2">
+                    Are you applying for a specific grant or creating an open proposal?
+                </label>
+                
+                <div className="mb-4 bg-gray-50 p-4 rounded-lg">
+                    <h3 className="text-lg font-medium text-gray-900 mb-2">Choose your approach:</h3>
+                    <div className="space-y-3 text-gray-600">
+                        <div>
+                            <span className="font-semibold text-gray-900">Specific Grant:</span> Choose this if you're responding to a particular grant opportunity with defined requirements and guidelines. You'll be able to paste the grant's budget requirements and ensure your proposal aligns perfectly with the funder's expectations.
+                        </div>
+                        <div>
+                            <span className="font-semibold text-gray-900">Open Proposal:</span> Select this if you're creating a general funding proposal or planning to approach multiple funders. This will help you create a flexible budget narrative that follows grant writing best practices and can be adapted for different opportunities.
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex space-x-4">
+                    <button
+                        onClick={() => handleGrandTypeChange('specific')}
+                        className={`px-4 py-2 rounded-md ${
+                            inputs.grantType === 'specific'
+                                ? 'bg-teal-600 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                    >
+                        Specific Grant
+                    </button>
+                    <button
+                        onClick={() => handleGrandTypeChange('open')}
+                        className={`px-4 py-2 rounded-md ${
+                            inputs.grantType === 'open'
+                                ? 'bg-teal-600 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                    >
+                        Open Proposal
+                    </button>
+                </div>
+            </div>
+
+            {/* Grant Requirements (if specific grant selected) */}
+            {inputs.grantType === 'specific' && (
+                <div className="mb-6">
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Paste Grant Budget Requirements
+                    </label>
+                    <textarea
+                        value={inputs.grantRequirements}
+                        onChange={(e) => setInputs(prev => ({
+                            ...prev,
+                            grantRequirements: e.target.value
+                        }))}
+                        placeholder="Paste the budget-related requirements from the grant listing..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            )}
+
+            {/* Budget Information */}
+            <div className="space-y-6">
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Total Amount Requested
+                    </label>
+                    <input
+                        type="text"
+                        value={inputs.budget.totalAmount}
+                        onChange={(e) => handleInputChange('budget', 'totalAmount', e.target.value)}
+                        placeholder="e.g., $50,000"
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Budget Breakdown
+                    </label>
+                    <textarea
+                        value={inputs.budget.breakdown}
+                        onChange={(e) => handleInputChange('budget', 'breakdown', e.target.value)}
+                        placeholder="List major budget categories and amounts..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Budget Justification
+                    </label>
+                    <textarea
+                        value={inputs.budget.justification}
+                        onChange={(e) => handleInputChange('budget', 'justification', e.target.value)}
+                        placeholder="Explain why each cost is necessary..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Additional Funding Sources
+                    </label>
+                    <textarea
+                        value={inputs.sustainability.additionalFunding}
+                        onChange={(e) => handleInputChange('sustainability', 'additionalFunding', e.target.value)}
+                        placeholder="Describe any matching funds, other grants, or revenue sources..."
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Project Continuation Plan
+                    </label>
+                    <textarea
+                        value={inputs.sustainability.continuationPlan}
+                        onChange={(e) => handleInputChange('sustainability', 'continuationPlan', e.target.value)}
+                        placeholder="How will the project continue after the grant period?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            </div>
+
+            {/* Generate Button */}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <CurrencyDollarIcon className="h-5 w-5 mr-2" />
+                        Generate Budget Content
+                    </>
+                )}
+            </button>
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                    storageKey="proposalBudget"
+                    title="Generated Budget"
+                />
+            )}
+        </div>
+    );
+}
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
new file mode 100644
index 0000000..d77cd06
--- /dev/null
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    BuildingOfficeIcon, 
+    DocumentIcon,
+    CurrencyDollarIcon,
+    DocumentTextIcon,
+    CheckCircleIcon,
+    ArrowDownIcon
+} from '@heroicons/react/24/outline';
+import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
+import OrganizationInfoSection from '../components/ProposalBuilderComponents/OrganizationInfoSection';
+import ProposalBudgetSection from '../components/ProposalBuilderComponents/ProposalBudgetSection';
+import ExecutiveSummarySection from '../components/ProposalBuilderComponents/ExecutiveSummarySection';
+import Header from '../components/Header';
+import { useAuth } from '../contexts/AuthProvider';
+
+/**
+ * ProposalBuilder
+ * 
+ * A step-by-step grant proposal generator that creates professional proposal content
+ * based on user inputs. The tool guides users through four main sections:
+ * 
+ * 1. Organization Information - Details about your organization
+ * 2. Project Narrative - Core project description and goals
+ * 3. Budget - Financial requirements and justification
+ * 4. Executive Summary - Comprehensive overview (generated last, displayed first)
+ * 
+ * Each section:
+ * - Collects specific inputs
+ * - Generates content using AI
+ * - Builds upon previous sections' content
+ * - Can be regenerated as needed
+ * 
+ * Content is saved to localStorage for persistence between sessions.
+ */
+export default function ProposalBuilder() {
+    const [activeSection, setActiveSection] = useState('organizationInfo');
+    const [showTip, setShowTip] = useState(true);
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+    const [completedSections, setCompletedSections] = useState(() => {
+        // Initialize from localStorage
+        const saved = localStorage.getItem(`${userId}_completedSections`);
+        return saved ? JSON.parse(saved) : [];
+    });
+
+    const sections = [
+        { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
+        { id: 'projectNarrative', label: 'Project Narrative', icon: DocumentIcon },
+        { id: 'proposalBudget', label: 'Budget', icon: CurrencyDollarIcon },
+        { id: 'executiveSummary', label: 'Executive Summary', icon: DocumentTextIcon }
+    ];
+
+    // Track section completion
+    useEffect(() => {
+        const handleStorageChange = () => {
+            const completed = [];
+            if (localStorage.getItem(`${userId}_organizationContent`)) completed.push('organizationInfo');
+            if (localStorage.getItem(`${userId}_projectNarrative`)) completed.push('projectNarrative');
+            if (localStorage.getItem(`${userId}_proposalBudget`)) completed.push('proposalBudget');
+            if (localStorage.getItem(`${userId}_executiveSummary`)) completed.push('executiveSummary');
+            
+            setCompletedSections(completed);
+            localStorage.setItem(`${userId}_completedSection`, JSON.stringify(completed));
+        };
+
+        // Check on mount and when localStorage changes
+        handleStorageChange();
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, []);
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <Header />
+            <main>
+                <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+                    {/* Introduction section */}
+                    <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+                        <div className="max-w-3xl">
+                            <h1 className="text-3xl font-bold text-gray-900 mb-4">
+                                AI-Powered Grant Proposal Builder
+                            </h1>
+                            <div className="space-y-4 text-gray-600">
+                                <p className="text-lg">
+                                    Transform your project ideas into professionally written grant proposals. Our AI assistant guides you through each section, ensuring comprehensive and compelling content.
+                                </p>
+                                <div className="flex space-x-4">
+                                    <div className="border-l-4 border-teal-500 pl-4">
+                                        <h2 className="font-medium text-gray-900">Professional Quality</h2>
+                                        <p className="text-lg mt-1">Generate polished, funder-ready content that follows grant writing best practices.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Progress Overview */}
+                    {showTip && (
+                        <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                            <div className="flex justify-between items-start">
+                                <div className="flex space-x-2">
+                                    <ArrowDownIcon className="h-5 w-5 text-yellow-600" />
+                                    <div>
+                                        <p className="text 
+                                        text-yellow-800">
+                                            <span className="font-bold">Recommended order:</span> Complete sections from left to right. The Executive Summary should be written last as it draws from all other sections.
+                                        </p>
+                                        <p className="text-yellow-600 text-sm mt-1">
+                                            Progress is automatically saved as you work.
+                                        </p>
+                                    </div>
+                                </div>
+                                <button 
+                                    onClick={() => setShowTip(false)}
+                                    className="text-yellow-600 hover:text-yellow-800"
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Section Navigation */}
+                    <div className="mb-6 border-b border-gray-200">
+                        <nav className="flex space-x-4" aria-label="Sections">
+                            {sections.map((section) => (
+                                <button
+                                    key={section.id}
+                                    onClick={() => setActiveSection(section.id)}
+                                    className={`
+                                        relative py-4 px-1 border-b-2 font-medium text-lg
+                                        ${activeSection === section.id
+                                            ? 'border-teal-500 text-teal-600'
+                                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                        }
+                                    `}
+                                >
+                                    <section.icon className="h-5 w-5 inline-block mr-2" />
+                                    {section.label}
+                                    {completedSections.includes(section.id) && (
+                                        <CheckCircleIcon className="h-5 w-5 text-green-500 absolute -top-2 -right-2" />
+                                    )}
+                                </button>
+                            ))}
+                        </nav>
+                    </div>
+
+                    <div className="mb-8">
+                        {!userId ? (
+                            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                                <p className="text-yellow-800">
+                                    Please log in to access organization information.
+                                </p>
+                            </div>
+                        ) : (
+                            <>
+                                {activeSection === 'projectNarrative' && <ProjectNarrativeSection />}
+                                {activeSection === 'organizationInfo' && <OrganizationInfoSection />}
+                                {activeSection === 'proposalBudget' && <ProposalBudgetSection />}
+                                {activeSection === 'executiveSummary' && <ExecutiveSummarySection />}
+                            </>
+                        )}
+                    </div>
+
+                    {/* Section Navigation Footer */}
+                    <div className="mt-8 flex justify-between">
+                        <button
+                            onClick={() => {
+                                const currentIndex = sections.findIndex(s => s.id === activeSection);
+                                if (currentIndex > 0) {
+                                    setActiveSection(sections[currentIndex - 1].id);
+                                }
+                            }}
+                            disabled={activeSection === sections[0].id}
+                            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            Previous Section
+                        </button>
+                        <button
+                            onClick={() => {
+                                const currentIndex = sections.findIndex(s => s.id === activeSection);
+                                if (currentIndex < sections.length - 1) {
+                                    setActiveSection(sections[currentIndex + 1].id);
+                                }
+                            }}
+                            disabled={activeSection === sections[sections.length - 1].id}
+                            className="px-4 py-2 text-sm font-medium text-white bg-teal-600 border border-transparent rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            Next Section
+                        </button>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 56c56e6..b6085bf 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -28,6 +28,8 @@ services:
       - PORT=5162
       - DEBUG=True
       - GOOGLE_APPLICATION_CREDENTIALS=/app/credentials/google-credentials.json
+    env_file:
+      - ./Backend/.env
     volumes:
       - ./backend:/app
       - ./Backend/flawless-snow-443501-q3-85e4441a1dd7.json:/app/credentials/google-credentials.json