diff --git a/frontend/src/documents/CandidateChatSystem.tsx b/frontend/src/documents/CandidateChatSystem.tsx
new file mode 100644
index 0000000..a5f3e8b
--- /dev/null
+++ b/frontend/src/documents/CandidateChatSystem.tsx
@@ -0,0 +1,486 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  Chip,
+  IconButton,
+  CircularProgress,
+  Divider,
+  Card,
+  CardContent,
+  Avatar,
+  Grid
+} from '@mui/material';
+
+// Mock API client (replace with your actual implementation)
+const mockApiClient = {
+  async createCandidateChatSession(username: string, chatType: any, aiParameters: any, title: any) {
+    return {
+      id: `session-${Date.now()}`,
+      title: title || `Chat about ${username}`,
+      userId: 'current-user-id',
+      createdAt: new Date().toISOString(),
+      lastActivity: new Date().toISOString(),
+      context: {
+        type: chatType,
+        relatedEntityId: `candidate-${username}`,
+        relatedEntityType: 'candidate',
+        aiParameters,
+        additionalContext: {
+          candidateInfo: {
+            id: `candidate-${username}`,
+            name: `${username} Candidate`,
+            email: `${username}@example.com`,
+            username: username,
+            skills: ['JavaScript', 'React', 'Python'],
+            experience: 3,
+            location: 'San Francisco'
+          }
+        }
+      }
+    };
+  },
+
+  async getCandidateChatSessions(username: string) {
+    return {
+      candidate: {
+        id: `candidate-${username}`,
+        username: username,
+        fullName: `${username} Candidate`,
+        email: `${username}@example.com`
+      },
+      sessions: {
+        data: [
+          {
+            id: 'session-1',
+            title: `Previous chat about ${username}`,
+            lastActivity: new Date(Date.now() - 86400000).toISOString(),
+            context: { type: 'candidate_screening' }
+          }
+        ],
+        total: 1,
+        page: 1,
+        limit: 20,
+        totalPages: 1,
+        hasMore: false
+      }
+    };
+  },
+
+  async getChatMessages(sessionId: any) {
+    return {
+      data: [
+        {
+          id: 'msg-1',
+          sessionId,
+          sender: 'user',
+          content: 'Tell me about this candidate',
+          timestamp: new Date(Date.now() - 60000).toISOString(),
+          status: 'done'
+        },
+        {
+          id: 'msg-2',
+          sessionId,
+          sender: 'ai',
+          content: 'This candidate has strong technical skills in JavaScript and React...',
+          timestamp: new Date(Date.now() - 30000).toISOString(),
+          status: 'done'
+        }
+      ],
+      total: 2,
+      page: 1,
+      limit: 50,
+      totalPages: 1,
+      hasMore: false
+    };
+  },
+
+  async sendMessageStream(sessionId: any, query: any, onMessage: any, onError: any, onComplete: any) {
+    // Simulate user message
+    const userMessage = {
+      id: `msg-user-${Date.now()}`,
+      sessionId,
+      sender: 'user',
+      content: typeof query === 'string' ? query : query.prompt,
+      timestamp: new Date().toISOString(),
+      status: 'done'
+    };
+    onMessage(userMessage);
+
+    // Simulate AI response with streaming
+    setTimeout(() => {
+      const aiMessage = {
+        id: `msg-ai-${Date.now()}`,
+        sessionId,
+        sender: 'ai',
+        content: 'This is a simulated AI response to your question...',
+        timestamp: new Date().toISOString(),
+        status: 'done'
+      };
+      onMessage(aiMessage);
+      onComplete();
+    }, 1000);
+  }
+};
+
+const CandidateChatSystem = () => {
+  const [username, setUsername] = useState('johndoe');
+  const [sessions, setSessions] = useState<any>(null);
+  const [currentSessionId, setCurrentSessionId] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [streaming, setStreaming] = useState(false);
+  const messagesEndRef = useRef(null);
+
+  const aiParameters = {
+    name: 'Chat Assistant',
+    model: 'gpt-4',
+    temperature: 0.7,
+    maxTokens: 2000,
+    topP: 0.95,
+    frequencyPenalty: 0.0,
+    presencePenalty: 0.0,
+    isDefault: false,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  };
+
+  // Load sessions for the candidate
+  const loadSessions = async () => {
+    if (!username) return;
+    
+    try {
+      setLoading(true);
+      const result = await mockApiClient.getCandidateChatSessions(username);
+      setSessions(result as any);
+    } catch (error) {
+      console.error('Failed to load sessions:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load messages for current session
+  const loadMessages = async () => {
+    if (!currentSessionId) return;
+    
+    try {
+      const result = await mockApiClient.getChatMessages(currentSessionId);
+      setMessages(result.data as any);
+    } catch (error) {
+      console.error('Failed to load messages:', error);
+    }
+  };
+
+  // Create new session
+  const createNewSession = async () => {
+    try {
+      setLoading(true);
+      const newSession = await mockApiClient.createCandidateChatSession(
+        username,
+        'candidate_screening',
+        aiParameters,
+        `Interview Discussion - ${username}`
+      );
+      
+      setCurrentSessionId(newSession.id as any);
+      setMessages([]);
+      await loadSessions(); // Refresh sessions list
+    } catch (error) {
+      console.error('Failed to create session:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Send message
+  const sendMessage = async () => {
+    if (!newMessage.trim() || !currentSessionId || streaming) return;
+
+    const messageContent = newMessage;
+    setNewMessage('');
+    setStreaming(true);
+
+    try {
+      await mockApiClient.sendMessageStream(
+        currentSessionId,
+        { prompt: messageContent },
+        (message : any) => {
+          setMessages(prev => {
+            const filtered = prev.filter((m : any)=> m.id !== message.id);
+            return [...filtered, message].sort((a, b) => 
+              new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+            ) as any;
+          });
+        },
+        (error: any) => {
+          console.error('Streaming error:', error);
+          setStreaming(false);
+        },
+        () => {
+          setStreaming(false);
+        }
+      );
+    } catch (error) {
+      console.error('Failed to send message:', error);
+      setStreaming(false);
+    }
+  };
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    (messagesEndRef.current as any)?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Load sessions when username changes
+  useEffect(() => {
+    loadSessions();
+  }, [username]);
+
+  // Load messages when session changes
+  useEffect(() => {
+    if (currentSessionId) {
+      loadMessages();
+    }
+  }, [currentSessionId]);
+
+  return (
+    <Box sx={{ p: 3, maxWidth: 1200, mx: 'auto' }}>
+      <Typography variant="h4" gutterBottom>
+        Candidate Chat System
+      </Typography>
+
+      {/* Username Input */}
+      <Paper sx={{ p: 2, mb: 3 }}>
+        <Grid container spacing={2} alignItems="center">
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth
+              label="Candidate Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  loadSessions();
+                }
+              }}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <Button
+              variant="contained"
+              onClick={loadSessions}
+              disabled={loading}
+              startIcon={loading ? <CircularProgress size={20} /> : null}
+            >
+              Load Sessions
+            </Button>
+          </Grid>
+        </Grid>
+      </Paper>
+
+      <Grid container spacing={3}>
+        {/* Sessions Sidebar */}
+        <Grid size={{ xs: 12, md: 4 }}>
+          <Paper sx={{ p: 2, height: '600px', display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" gutterBottom>
+              Chat Sessions
+              {sessions && (
+                <Chip 
+                  size="small" 
+                  label={`${sessions.sessions.total} total`} 
+                  sx={{ ml: 1 }}
+                />
+              )}
+            </Typography>
+
+            <Button
+              variant="outlined"
+              onClick={createNewSession}
+              disabled={loading || !username}
+              sx={{ mb: 2 }}
+            >
+              New Session
+            </Button>
+
+            <Box sx={{ flexGrow: 1, overflow: 'auto' }}>
+              {sessions ? (
+                <List>
+                  {sessions.sessions.data.map((session : any) => (
+                    <ListItem
+                      key={session.id}
+                      // selected={currentSessionId === session.id}
+                      onClick={() => setCurrentSessionId(session.id)}
+                      sx={{
+                        mb: 1,
+                        borderRadius: 1,
+                        border: '1px solid',
+                        borderColor: currentSessionId === session.id ? 'primary.main' : 'divider',
+                        cursor: 'pointer',
+                        '&:hover': {
+                          backgroundColor: 'action.hover'
+                        }
+                      }}
+                    >
+                      <ListItemText
+                        primary={session.title}
+                        secondary={`${new Date(session.lastActivity).toLocaleDateString()} • ${session.context.type}`}
+                      />
+                    </ListItem>
+                  ))}
+                </List>
+              ) : (
+                <Typography color="text.secondary" align="center">
+                  Enter a username and click "Load Sessions"
+                </Typography>
+              )}
+            </Box>
+
+            {sessions && (
+              <Box sx={{ mt: 2, p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
+                <Typography variant="subtitle2" gutterBottom>
+                  Candidate Info
+                </Typography>
+                <Typography variant="body2">
+                  <strong>Name:</strong> {sessions.candidate.fullName}
+                </Typography>
+                <Typography variant="body2">
+                  <strong>Email:</strong> {sessions.candidate.email}
+                </Typography>
+              </Box>
+            )}
+          </Paper>
+        </Grid>
+
+        {/* Chat Interface */}
+        <Grid size={{ xs: 12, md: 8 }}>
+          <Paper sx={{ height: '600px', display: 'flex', flexDirection: 'column' }}>
+            {currentSessionId ? (
+              <>
+                {/* Messages Area */}
+                <Box sx={{ flexGrow: 1, overflow: 'auto', p: 2 }}>
+                  {messages.map((message: any) => (
+                    <Box
+                      key={message.id}
+                      sx={{
+                        display: 'flex',
+                        mb: 2,
+                        alignItems: 'flex-start',
+                        justifyContent: message.sender === 'user' ? 'flex-end' : 'flex-start'
+                      }}
+                    >
+                      {message.sender === 'ai' && (
+                        <Avatar sx={{ mr: 1, bgcolor: 'primary.main' }}>
+                          🤖
+                        </Avatar>
+                      )}
+                      
+                      <Card
+                        sx={{
+                          maxWidth: '70%',
+                          bgcolor: message.sender === 'user' ? 'primary.main' : 'background.paper',
+                          color: message.sender === 'user' ? 'primary.contrastText' : 'text.primary'
+                        }}
+                      >
+                        <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
+                          <Typography variant="body2">
+                            {message.content}
+                          </Typography>
+                          <Typography variant="caption" sx={{ opacity: 0.7, mt: 1, display: 'block' }}>
+                            {new Date(message.timestamp).toLocaleTimeString()}
+                          </Typography>
+                        </CardContent>
+                      </Card>
+
+                      {message.sender === 'user' && (
+                        <Avatar sx={{ ml: 1, bgcolor: 'secondary.main' }}>
+                          👤
+                        </Avatar>
+                      )}
+                    </Box>
+                  ))}
+                  
+                  {streaming && (
+                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                      <Avatar sx={{ mr: 1, bgcolor: 'primary.main' }}>
+                        🤖
+                      </Avatar>
+                      <Card>
+                        <CardContent sx={{ display: 'flex', alignItems: 'center', p: 2 }}>
+                          <CircularProgress size={16} sx={{ mr: 1 }} />
+                          <Typography variant="body2">AI is typing...</Typography>
+                        </CardContent>
+                      </Card>
+                    </Box>
+                  )}
+                  
+                  <div ref={messagesEndRef} />
+                </Box>
+
+                <Divider />
+
+                {/* Message Input */}
+                <Box sx={{ p: 2, display: 'flex', gap: 1 }}>
+                  <TextField
+                    fullWidth
+                    variant="outlined"
+                    placeholder="Type your message about the candidate..."
+                    value={newMessage}
+                    onChange={(e) => setNewMessage(e.target.value)}
+                    onKeyPress={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        sendMessage();
+                      }
+                    }}
+                    disabled={streaming}
+                    multiline
+                    maxRows={4}
+                  />
+                  <Button
+                    variant="contained"
+                    onClick={sendMessage}
+                    disabled={!newMessage.trim() || streaming}
+                    sx={{ minWidth: 'auto', px: 2 }}
+                  >
+                    ▶
+                  </Button>
+                </Box>
+              </>
+            ) : (
+              <Box
+                sx={{
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  gap: 2
+                }}
+              >
+                <Typography variant="h1" sx={{ fontSize: 64, color: 'text.secondary' }}>
+                  🤖
+                </Typography>
+                <Typography variant="h6" color="text.secondary">
+                  Select a session to start chatting
+                </Typography>
+                <Typography variant="body2" color="text.secondary" align="center">
+                  Create a new session or choose from existing ones to begin discussing the candidate
+                </Typography>
+              </Box>
+            )}
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export { CandidateChatSystem };
\ No newline at end of file
diff --git a/frontend/src/pages/DocsPage.tsx b/frontend/src/pages/DocsPage.tsx
index 08a987d..6f6c92d 100644
--- a/frontend/src/pages/DocsPage.tsx
+++ b/frontend/src/pages/DocsPage.tsx
@@ -39,6 +39,7 @@ import { BackstoryAppAnalysisPage } from 'documents/BackstoryAppAnalysisPage';
 import { BackstoryThemeVisualizerPage } from 'documents/BackstoryThemeVisualizerPage';
 import { UserManagement } from 'documents/UserManagement';
 import { MockupPage } from 'documents/MockupPage';
+import { CandidateChatSystem } from 'documents/CandidateChatSystem';
 
 // Sidebar navigation component using MUI components
 const Sidebar: React.FC<{
@@ -144,6 +145,7 @@ const documents : DocType[] = [
   { title: "Application Architecture", route: "about-app", description: "System design and technical stack information", icon: <LayersIcon /> },
   { title: "UI Overview", route: "ui-overview", description: "Guide to the user interface components and interactions", icon: <DashboardIcon /> },
   { title: "UI Mockup", route: "ui-mockup", description: "Visual previews of interfaces and layout concepts", icon: <DashboardIcon /> },
+  { title: "Chat Mockup", route: "mockup-chat-system", description: "Mockup of chat system", icon: <DashboardIcon /> },
   { title: "Theme Visualizer", route: "theme-visualizer", description: "Explore and customize application themes and visual styles", icon: <PaletteIcon /> },
   { title: "App Analysis", route: "app-analysis", description: "Statistics and performance metrics of the application", icon: <AnalyticsIcon /> },
   { title: 'Text Mockups', route: "backstory-ui-mockups", description: "Early text mockups of many of the interaction points." },
@@ -255,6 +257,8 @@ const DocsPage = (props: BackstoryPageProps) => {
   // Render the appropriate content based on current page
   function renderContent() {
     switch (page) {
+      case 'mockup-chat-system':
+        return (<CandidateChatSystem />);
       case 'ui-overview':
         return (<BackstoryUIOverviewPage />);
       case 'theme-visualizer':