diff --git a/src/SessionMessages/MessageActions.tsx b/src/SessionMessages/MessageActions.tsx
new file mode 100644
index 0000000..1a7f0b8
--- /dev/null
+++ b/src/SessionMessages/MessageActions.tsx
@@ -0,0 +1,159 @@
+import { SessionsContext } from '@/SessionsContext';
+import { Slot } from '@radix-ui/react-slot';
+import { cn, IconButton } from 'reablocks';
+import {
+  FC,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useContext
+} from 'react';
+import CopyIcon from '@/assets/copy.svg?react';
+import ThumbsDownIcon from '@/assets/thumbs-down.svg?react';
+import ThumbUpIcon from '@/assets/thumbs-up.svg?react';
+import RefreshIcon from '@/assets/refresh.svg?react';
+
+export interface MessageActionsProps extends PropsWithChildren {
+  /**
+   * Question to be copied
+   */
+  question: string;
+
+  /**
+   * Response to be copied
+   */
+  response?: string;
+
+  /**
+   * Icon to show for copy.
+   */
+  copyIcon?: ReactElement;
+
+  /**
+   * Icon to show for thumbs up.
+   */
+  thumbsUpIcon?: ReactElement;
+
+  /**
+   * Icon to show for thumbs down.
+   */
+  thumbsDownIcon?: ReactElement;
+
+  /**
+   * Icon to show for refresh.
+   */
+  refreshIcon?: ReactElement;
+
+  /**
+   * Callback function to handle copying.
+   */
+  onCopy?: () => void;
+
+  /**
+   * Callback function to handle upvoting.
+   */
+  onUpvote?: () => void;
+
+  /**
+   * Callback function to handle downvoting.
+   */
+  onDownvote?: () => void;
+
+  /**
+   * Callback function to handle refreshing.
+   */
+  onRefresh?: () => void;
+
+  /**
+   * Children to render as MessageAction slot.
+   */
+  children?: ReactNode;
+}
+
+export const MessageActions: FC<MessageActionsProps> = ({
+  children,
+  ...props
+}) => {
+  const { theme } = useContext(SessionsContext);
+  const {
+    question,
+    response,
+    copyIcon = <CopyIcon />,
+    thumbsUpIcon = <ThumbUpIcon />,
+    thumbsDownIcon = <ThumbsDownIcon />,
+    refreshIcon = <RefreshIcon />,
+    onCopy,
+    onUpvote,
+    onDownvote,
+    onRefresh
+  } = props;
+  const Comp = children ? Slot : 'div';
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        console.log('Text copied to clipboard');
+      })
+      .catch(err => {
+        console.error('Could not copy text: ', err);
+      });
+  };
+
+  return (
+    (copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && (
+      <Comp className={cn(theme.messages.message.footer.base)}>
+        {children || (
+          <>
+            {copyIcon && (
+              <IconButton
+                variant="text"
+                disablePadding
+                title="Copy question and response"
+                className={cn(theme.messages.message.footer.copy)}
+                onClick={
+                  onCopy ? onCopy : () => handleCopy(`${question}\n${response}`)
+                }
+              >
+                {copyIcon}
+              </IconButton>
+            )}
+            {thumbsUpIcon && (
+              <IconButton
+                variant="text"
+                disablePadding
+                title="Upvote"
+                className={cn(theme.messages.message.footer.upvote)}
+                onClick={onUpvote}
+              >
+                {thumbsUpIcon}
+              </IconButton>
+            )}
+            {thumbsDownIcon && (
+              <IconButton
+                variant="text"
+                disablePadding
+                title="Downvote"
+                className={cn(theme.messages.message.footer.downvote)}
+                onClick={onDownvote}
+              >
+                {thumbsDownIcon}
+              </IconButton>
+            )}
+            {refreshIcon && (
+              <IconButton
+                variant="text"
+                disablePadding
+                title="Refresh"
+                className={cn(theme.messages.message.footer.refresh)}
+                onClick={onRefresh}
+              >
+                {refreshIcon}
+              </IconButton>
+            )}
+          </>
+        )}
+      </Comp>
+    )
+  );
+};
diff --git a/src/SessionMessages/MessageFile.tsx b/src/SessionMessages/MessageFile.tsx
index 2fd69ad..5e5610a 100644
--- a/src/SessionMessages/MessageFile.tsx
+++ b/src/SessionMessages/MessageFile.tsx
@@ -4,11 +4,11 @@ import { SessionsContext } from '@/SessionsContext';
 import { Ellipsis, cn } from 'reablocks';
 import FileIcon from '@/assets/file.svg?react';
 
-interface MessageFileProps extends ConversationFile {
-   /**
+export interface MessageFileProps extends ConversationFile {
+  /**
    * Icon to show for delete.
    */
-   fileIcon?: ReactElement;
+  fileIcon?: ReactElement;
 
   /**
    * Limit for the name.
diff --git a/src/SessionMessages/MessageFiles.tsx b/src/SessionMessages/MessageFiles.tsx
new file mode 100644
index 0000000..3be27ac
--- /dev/null
+++ b/src/SessionMessages/MessageFiles.tsx
@@ -0,0 +1,39 @@
+import { SessionsContext } from '@/SessionsContext';
+import { ConversationFile } from '@/types';
+import { cn } from 'reablocks';
+import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
+import { MessageFile } from './MessageFile';
+import { Slot } from '@radix-ui/react-slot';
+
+interface MessageFilesProps extends PropsWithChildren {
+  /**
+   * Files to render.
+   */
+  files: ConversationFile[];
+
+  /**
+   * Children to render as MessageFile slot.
+   */
+  children?: ReactNode;
+}
+
+export const MessageFiles: FC<MessageFilesProps> = ({ files, children }) => {
+  const { theme } = useContext(SessionsContext);
+  const Comp = children ? Slot : MessageFile;
+
+  if (!files || files.length === 0) {
+    return null;
+  }
+
+  return (
+    files.length > 0 && (
+      <div className={cn(theme.messages.message.files.base)}>
+        {files.map((file, index) => (
+          <Comp key={index} {...file}>
+            {children}
+          </Comp>
+        ))}
+      </div>
+    )
+  );
+};
diff --git a/src/SessionMessages/MessageQuestion.tsx b/src/SessionMessages/MessageQuestion.tsx
new file mode 100644
index 0000000..c2f8817
--- /dev/null
+++ b/src/SessionMessages/MessageQuestion.tsx
@@ -0,0 +1,38 @@
+import { SessionsContext } from '@/SessionsContext';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from 'reablocks';
+import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
+import { Markdown } from '@/Markdown';
+import { PluggableList } from 'react-markdown/lib';
+import remarkGfm from 'remark-gfm';
+import remarkYoutube from 'remark-youtube';
+
+export interface MessageQuestionProps extends PropsWithChildren {
+  /**
+   * Question to render.
+   */
+  question: string;
+
+  /**
+   * Children to render as MessageQuestion slot.
+   */
+  children?: ReactNode;
+}
+
+export const MessageQuestion: FC<MessageQuestionProps> = ({
+  question,
+  children
+}) => {
+  const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } =
+    useContext(SessionsContext);
+  const Comp = children ? Slot : 'div';
+  return (
+    <Comp className={cn(theme.messages.message.question)}>
+      {children || (
+        <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
+          {question}
+        </Markdown>
+      )}
+    </Comp>
+  );
+};
diff --git a/src/SessionMessages/MessageResponse.tsx b/src/SessionMessages/MessageResponse.tsx
new file mode 100644
index 0000000..47c040a
--- /dev/null
+++ b/src/SessionMessages/MessageResponse.tsx
@@ -0,0 +1,58 @@
+import { SessionsContext } from '@/SessionsContext';
+import { Slot } from '@radix-ui/react-slot';
+import { motion } from 'framer-motion';
+import { cn } from 'reablocks';
+import { FC, ReactNode, useContext } from 'react';
+import { Markdown } from '@/Markdown';
+import { PluggableList } from 'react-markdown/lib';
+import remarkGfm from 'remark-gfm';
+import remarkYoutube from 'remark-youtube';
+
+export interface MessageResponseProps {
+  /**
+   * Response to render.
+   */
+  response: string;
+
+  /**
+   * Whether the response is loading.
+   */
+  isLoading?: boolean;
+
+  /**
+   * Children to render as MessageResponse slot.
+   */
+  children?: ReactNode;
+}
+
+export const MessageResponse: FC<MessageResponseProps> = ({
+  response,
+  isLoading,
+  children
+}) => {
+  const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } =
+    useContext(SessionsContext);
+  const Comp = children ? Slot : 'div';
+  return (
+    <Comp className={cn(theme.messages.message.response)}>
+      {children || (
+        <>
+          <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
+            {response}
+          </Markdown>
+          {isLoading && (
+            <motion.div
+              className={cn(theme.messages.message.cursor)}
+              animate={{ opacity: [1, 0] }}
+              transition={{
+                duration: 0.7,
+                repeat: Infinity,
+                repeatType: 'reverse'
+              }}
+            />
+          )}
+        </>
+      )}
+    </Comp>
+  );
+};
diff --git a/src/SessionMessages/MessageSource.tsx b/src/SessionMessages/MessageSource.tsx
index 881a1ca..07cb5b7 100644
--- a/src/SessionMessages/MessageSource.tsx
+++ b/src/SessionMessages/MessageSource.tsx
@@ -3,7 +3,7 @@ import { ConversationSource } from '@/types';
 import { SessionsContext } from '@/SessionsContext';
 import { Ellipsis, cn } from 'reablocks';
 
-interface MessageSourceProps extends ConversationSource {
+export interface MessageSourceProps extends ConversationSource {
   /**
    * Limit for the title.
    */
diff --git a/src/SessionMessages/MessageSources.tsx b/src/SessionMessages/MessageSources.tsx
new file mode 100644
index 0000000..21c56c0
--- /dev/null
+++ b/src/SessionMessages/MessageSources.tsx
@@ -0,0 +1,43 @@
+import { SessionsContext } from '@/SessionsContext';
+import { ConversationSource } from '@/types';
+import { cn } from 'reablocks';
+import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { MessageSource } from './MessageSource';
+
+interface MessageSourcesProps extends PropsWithChildren {
+  /**
+   * Sources to render.
+   */
+  sources: ConversationSource[];
+
+  /**
+   * Children to render as MessageSource slot.
+   */
+  children?: ReactNode;
+}
+
+export const MessageSources: FC<MessageSourcesProps> = ({
+  sources,
+  children
+}) => {
+  const { theme } = useContext(SessionsContext);
+  const Comp = children ? Slot : MessageSource;
+
+  if (!sources || sources.length === 0) {
+    return null;
+  }
+
+  return (
+    sources &&
+    sources.length > 0 && (
+      <div className={cn(theme.messages.message.sources.base)}>
+        {sources.map((source, index) => (
+          <Comp key={index} {...source}>
+            {children}
+          </Comp>
+        ))}
+      </div>
+    )
+  );
+};
diff --git a/src/SessionMessages/SessionMessage.tsx b/src/SessionMessages/SessionMessage.tsx
index 81125c8..ed99f55 100644
--- a/src/SessionMessages/SessionMessage.tsx
+++ b/src/SessionMessages/SessionMessage.tsx
@@ -1,169 +1,74 @@
-import { FC, ReactElement, useContext } from 'react';
+import { FC, PropsWithChildren, useContext } from 'react';
 import { SessionsContext } from '@/SessionsContext';
-import { Card, IconButton, cn } from 'reablocks';
-import remarkGfm from 'remark-gfm';
+import { Card, cn } from 'reablocks';
 import CopyIcon from '@/assets/copy.svg?react';
 import ThumbsDownIcon from '@/assets/thumbs-down.svg?react';
 import ThumbUpIcon from '@/assets/thumbs-up.svg?react';
 import RefreshIcon from '@/assets/refresh.svg?react';
-import { PluggableList } from 'react-markdown/lib';
-import { Markdown } from '@/Markdown';
-import remarkYoutube from 'remark-youtube';
 import { Conversation } from '@/types';
-import { MessageSource } from './MessageSource';
-import { MessageFile } from './MessageFile';
 import { motion } from 'framer-motion';
+import { MessageQuestion } from './MessageQuestion';
+import { MessageResponse } from './MessageResponse';
+import { MessageFiles } from './MessageFiles';
+import { MessageSources } from './MessageSources';
+import { MessageActions } from './MessageActions';
 
-export interface SessionMessageProps extends Conversation {
-  /**
-   * Icon to show for copy.
-   */
-  copyIcon?: ReactElement;
-
-  /**
-   * Icon to show for thumbs up.
-   */
-  thumbsUpIcon?: ReactElement;
-
-  /**
-   * Icon to show for thumbs down.
-   */
-  thumbsDownIcon?: ReactElement;
-
-  /**
-   * Icon to show for refresh.
-   */
-  refreshIcon?: ReactElement;
-
-  /**
-   * Whether to display a loading state.
-   */
-  isLoading?: boolean;
-
-  /**
-   * Callback function to handle upvoting.
-   */
-  onUpvote?: () => void;
+const messageVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.4
+    }
+  }
+};
 
+interface SessionMessageProps extends PropsWithChildren {
   /**
-   * Callback function to handle downvoting.
+   * Conversation to render.
    */
-  onDownvote?: () => void;
+  conversation: Conversation;
 
   /**
-   * Callback function to handle refreshing.
+   * Whether the message is the last one in the list.
    */
-  onRefresh?: () => void;
+  isLast?: boolean;
 }
 
 export const SessionMessage: FC<SessionMessageProps> = ({
-  question = '',
-  response = '',
-  copyIcon = <CopyIcon />,
-  thumbsUpIcon = <ThumbUpIcon />,
-  thumbsDownIcon = <ThumbsDownIcon />,
-  refreshIcon = <RefreshIcon />,
-  isLoading,
-  sources,
-  files,
-  onUpvote,
-  onDownvote,
-  onRefresh
+  conversation,
+  isLast,
+  children
 }) => {
-  const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = useContext(SessionsContext);
-
-  const handleCopy = (text: string) => {
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        console.log('Text copied to clipboard');
-      })
-      .catch(err => {
-        console.error('Could not copy text: ', err);
-      });
-  };
+  const { theme, isLoading } = useContext(SessionsContext);
 
   return (
-    <Card className={cn(theme.messages.message.base)}>
-      {files?.length > 0 && (
-        <div className={cn(theme.messages.message.files.base)}>
-          {files.map((file, index) => (
-            <MessageFile key={index} {...file} />
-          ))}
-        </div>
-      )}
-      <div className={cn(theme.messages.message.question)}>
-        <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
-          {question}
-        </Markdown>
-      </div>
-      <div className={cn(theme.messages.message.response)}>
-        <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
-          {response}
-        </Markdown>
-        {isLoading && (
-          <motion.div
-            className={cn(theme.messages.message.cursor)}
-            animate={{ opacity: [1, 0] }}
-            transition={{ duration: 0.7, repeat: Infinity, repeatType: 'reverse' }}
-          />
+    <motion.div key={conversation.id} variants={messageVariants}>
+      <Card className={cn(theme.messages.message.base)}>
+        {children || (
+          <>
+            <MessageFiles files={conversation.files} />
+            <MessageQuestion question={conversation.question} />
+            <MessageResponse
+              response={conversation.response}
+              isLoading={isLast && isLoading}
+            />
+            <MessageSources sources={conversation.sources} />
+            <MessageActions
+              question={conversation.question}
+              response={conversation.response}
+              copyIcon={<CopyIcon />}
+              thumbsUpIcon={<ThumbUpIcon />}
+              thumbsDownIcon={<ThumbsDownIcon />}
+              refreshIcon={<RefreshIcon />}
+            />
+          </>
         )}
-      </div>
-      {sources && sources.length > 0 && (
-        <div className={cn(theme.messages.message.sources.base)}>
-          {sources.map((source, index) => (
-            <MessageSource key={index} {...source} />
-          ))}
-        </div>
-      )}
-      {(copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && (
-        <div className={cn(theme.messages.message.footer.base)}>
-          {copyIcon && (
-            <IconButton
-              variant="text"
-              disablePadding
-              title="Copy question and response"
-              className={cn(theme.messages.message.footer.copy)}
-              onClick={() => handleCopy(`${question}\n${response}`)}
-            >
-              {copyIcon}
-            </IconButton>
-          )}
-          {thumbsUpIcon && (
-            <IconButton
-              variant="text"
-              disablePadding
-              title="Upvote"
-              className={cn(theme.messages.message.footer.upvote)}
-              onClick={onUpvote}
-            >
-              {thumbsUpIcon}
-            </IconButton>
-          )}
-          {thumbsDownIcon && (
-            <IconButton
-              variant="text"
-              disablePadding
-              title="Downvote"
-              className={cn(theme.messages.message.footer.downvote)}
-              onClick={onDownvote}
-            >
-              {thumbsDownIcon}
-            </IconButton>
-          )}
-          {refreshIcon && (
-            <IconButton
-              variant="text"
-              disablePadding
-              title="Refresh"
-              className={cn(theme.messages.message.footer.refresh)}
-              onClick={onRefresh}
-            >
-              {refreshIcon}
-            </IconButton>
-          )}
-        </div>
-      )}
-    </Card>
+      </Card>
+    </motion.div>
   );
 };
diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx
new file mode 100644
index 0000000..3bef877
--- /dev/null
+++ b/src/SessionMessages/SessionMessagePanel.tsx
@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren, useContext } from 'react';
+import { cn } from 'reablocks';
+import { SessionsContext } from '@/SessionsContext';
+
+export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
+  const { theme } = useContext(SessionsContext);
+
+  return (
+    <div className={cn(theme.messages.base)}>
+      <div className="flex-1 h-full flex flex-col">{children}</div>
+    </div>
+  );
+};
diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx
index bd60105..8ad3f79 100644
--- a/src/SessionMessages/SessionMessages.tsx
+++ b/src/SessionMessages/SessionMessages.tsx
@@ -1,5 +1,4 @@
 import React, {
-  PropsWithChildren,
   ReactNode,
   useContext,
   useEffect,
@@ -10,9 +9,10 @@ import React, {
 import { SessionEmpty } from './SessionEmpty';
 import { SessionMessage } from './SessionMessage';
 import { SessionsContext } from '@/SessionsContext';
-import { Button, cn, DateFormat, Ellipsis, useInfinityList } from 'reablocks';
+import { Button, cn, useInfinityList } from 'reablocks';
 import { Slot } from '@radix-ui/react-slot';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Conversation } from '@/types';
 
 const containerVariants = {
   hidden: {},
@@ -23,21 +23,8 @@ const containerVariants = {
   }
 };
 
-const messageVariants = {
-  hidden: {
-    opacity: 0,
-    y: 20
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 0.4
-    }
-  }
-};
 
-interface SessionMessagesProps extends PropsWithChildren {
+interface SessionMessagesProps {
   /**
    * Content to display when there are no sessions selected or a new session is started.
    */
@@ -52,6 +39,11 @@ interface SessionMessagesProps extends PropsWithChildren {
    * Text to display for the show more button.
    */
   showMoreText?: string;
+
+  /**
+   * Render function for the session messages.
+   */
+  children?: (conversations: Conversation[]) => ReactNode;
 }
 
 export const SessionMessages: React.FC<SessionMessagesProps> = ({
@@ -83,7 +75,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
 
   // Reverse the conversations so the last one is the first one
   const reversedConvos = useMemo(
-    () => [...activeSession?.conversations ?? []].reverse(),
+    () => [...(activeSession?.conversations ?? [])].reverse(),
     [activeSession]
   );
 
@@ -103,50 +95,30 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
   }
 
   return (
-    <div className={cn(theme.messages.base)}>
-      <header className={cn(theme.messages.header)}>
-        <h2 className={cn(theme.messages.title)}>
-          <Ellipsis limit={125} value={activeSession.title} />
-        </h2>
-        <DateFormat className={cn(theme.messages.date)} date={activeSession.createdAt} />
-      </header>
-      <div className={cn(theme.messages.content)} ref={contentRef}>
-        {hasMore && (
-          <Button
-            variant="outline"
-            className={cn(theme.messages.showMore)}
-            fullWidth
-            onClick={handleShowMore}
-          >
-            {showMoreText}
-          </Button>
-        )}
-        <AnimatePresence>
-          <motion.div
-            variants={containerVariants}
-            key={activeSession?.id}
-            initial="hidden"
-            animate="visible"
-            onAnimationComplete={() => {
-              setIsAnimating(false);
-            }}
-          >
-            {convosToRender.map((conversation, index) => (
-              <motion.div
-                key={conversation.id}
-                variants={messageVariants}
-              >
-                <MessageComponent
-                  {...conversation}
-                  isLoading={isLoading && index === convosToRender.length - 1}
-                >
-                  {children}
-                </MessageComponent>
-              </motion.div>
-            ))}
-          </motion.div>
-        </AnimatePresence>
-      </div>
+    <div className={cn(theme.messages.content)} ref={contentRef}>
+      {hasMore && (
+        <Button
+          variant="outline"
+          className={cn(theme.messages.showMore)}
+          fullWidth
+          onClick={handleShowMore}
+        >
+          {showMoreText}
+        </Button>
+      )}
+      <AnimatePresence>
+        <motion.div
+          variants={containerVariants}
+          key={activeSession?.id}
+          initial="hidden"
+          animate="visible"
+          onAnimationComplete={() => {
+            setIsAnimating(false);
+          }}
+        >
+          {children(convosToRender)}
+        </motion.div>
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/src/SessionMessages/SessionMessagesHeader.tsx b/src/SessionMessages/SessionMessagesHeader.tsx
new file mode 100644
index 0000000..8dbf34c
--- /dev/null
+++ b/src/SessionMessages/SessionMessagesHeader.tsx
@@ -0,0 +1,27 @@
+import { SessionsContext } from '@/SessionsContext';
+import { Slot } from '@radix-ui/react-slot';
+import { cn, Ellipsis, DateFormat } from 'reablocks';
+import { FC, PropsWithChildren, useContext } from 'react';
+
+export const SessionMessagesHeader: FC<PropsWithChildren> = ({ children }) => {
+  const { activeSession, theme } = useContext(SessionsContext);
+  const Comp = children ? Slot : 'header';
+
+  if (!activeSession) return null;
+
+  return (
+    <Comp className={cn(theme.messages.header)}>
+      {children || (
+        <>
+          <h2 className={cn(theme.messages.title)}>
+            <Ellipsis limit={125} value={activeSession.title} />
+          </h2>
+          <DateFormat
+            className={cn(theme.messages.date)}
+            date={activeSession.createdAt}
+          />
+        </>
+      )}
+    </Comp>
+  );
+};
diff --git a/src/SessionMessages/index.ts b/src/SessionMessages/index.ts
index 4507d40..ef4fe4c 100644
--- a/src/SessionMessages/index.ts
+++ b/src/SessionMessages/index.ts
@@ -1,4 +1,6 @@
 export * from './SessionEmpty';
+export * from './SessionMessagesHeader';
+export * from './SessionMessagePanel';
 export * from './SessionMessage';
 export * from './SessionMessages';
 export * from './MessageSource';
diff --git a/src/SessionsList/SessionListItem.tsx b/src/SessionsList/SessionListItem.tsx
index a94ef2f..a4624cc 100644
--- a/src/SessionsList/SessionListItem.tsx
+++ b/src/SessionsList/SessionListItem.tsx
@@ -43,7 +43,9 @@ export const SessionListItem: FC<SessionListItemProps> = ({
       dense
       disableGutters
       active={session.id === activeSessionId}
-      className={cn(theme.sessions.session.base, { [theme.sessions.session.active]: session.id === activeSessionId })}
+      className={cn(theme.sessions.session.base, {
+        [theme.sessions.session.active]: session.id === activeSessionId
+      })}
       onClick={() => selectSession?.(session.id)}
       end={
         <>
diff --git a/stories/Demos.stories.tsx b/stories/Demos.stories.tsx
index b6e4714..61899e5 100644
--- a/stories/Demos.stories.tsx
+++ b/stories/Demos.stories.tsx
@@ -1,4 +1,11 @@
-import { useState, useCallback, useRef, useEffect, FC } from 'react';
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  FC,
+  useContext
+} from 'react';
 import OpenAI from 'openai';
 import { Meta } from '@storybook/react';
 import {
@@ -12,19 +19,40 @@ import {
   SessionMessages,
   SessionGroups,
   SessionInput,
-  SessionListItemProps
+  SessionListItemProps,
+  SessionMessagePanel,
+  SessionMessagesHeader,
+  SessionsContext,
+  SessionMessage
 } from '../src';
 import {
   Card,
+  Chip,
+  cn,
+  DateFormat,
   Divider,
   IconButton,
   Input,
   List,
   ListItem,
-  Menu
+  Menu,
+  RefreshIcon
 } from 'reablocks';
 import { subDays, subMinutes, subHours } from 'date-fns';
 import MenuIcon from '@/assets/menu.svg?react';
+import { motion } from 'framer-motion';
+import { MessageActions } from '@/SessionMessages/MessageActions';
+import { MessageFiles } from '@/SessionMessages/MessageFiles';
+import {
+  MessageQuestion,
+  MessageQuestionProps
+} from '@/SessionMessages/MessageQuestion';
+import {
+  MessageResponse,
+  MessageResponseProps
+} from '@/SessionMessages/MessageResponse';
+import { MessageSources } from '@/SessionMessages/MessageSources';
+import { MessageFileProps } from '@/SessionMessages/MessageFile';
 
 export default {
   title: 'Demos',
@@ -112,10 +140,17 @@ export const Console = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -194,10 +229,17 @@ export const Embeds = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -238,10 +280,18 @@ export const DefaultSession = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -308,38 +358,54 @@ export const Loading = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
-          <SessionInput  />
-        </div>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map((conversation, index) => (
+                <SessionMessage
+                  conversation={conversation}
+                  isLast={index === conversations.length - 1}
+                />
+              ))
+            }
+          </SessionMessages>
+          <SessionInput />
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
 };
 
-export const FileUploads = () => {
-  const sessionsWithFiles: Session[] = [
-    {
-      id: '1',
-      title: 'Session with Files',
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      conversations: [
-        {
-          id: '1',
-          question: 'Here are some files I uploaded',
-          response: 'Ive received your files. Let me know if you have any questions about them.',
-          createdAt: new Date(),
-          updatedAt: new Date(),
-          files: [
-            { name: 'document.pdf', size: 1024000, type: 'application/pdf' },
-            { name: 'report.docx', size: 512000, type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
-          ]
-        }
-      ]
-    }
-  ];
+const sessionsWithFiles: Session[] = [
+  {
+    id: 'session-files',
+    title: 'Session with Files',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        id: '1',
+        question: 'Here are some files I uploaded',
+        response:
+          'Ive received your files. Let me know if you have any questions about them.',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        files: [
+          { name: 'document.pdf', size: 1024000, type: 'application/pdf' },
+          {
+            name: 'report.docx',
+            size: 512000,
+            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+          }
+        ]
+      }
+    ]
+  }
+];
 
+export const FileUploads = () => {
   return (
     <div
       style={{
@@ -357,7 +423,7 @@ export const FileUploads = () => {
       <Sessions
         viewType="console"
         sessions={sessionsWithFiles}
-        activeSessionId="1"
+        activeSessionId="session-files"
         onDeleteSession={() => alert('delete!')}
       >
         <SessionsList>
@@ -374,10 +440,17 @@ export const FileUploads = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput allowedFiles={['.pdf', '.docx']} />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -418,10 +491,18 @@ export const DefaultInputValue = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
-          <SessionInput defaultValue="Pre-populate the prompt via the default value property" />
-        </div>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
+          <SessionInput />
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -457,24 +538,42 @@ export const UndeleteableSessions = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
 };
 
 export const SessionGrouping = () => {
-  const createSessionWithDate = (id: string, title: string, daysAgo: number): Session => ({
+  const createSessionWithDate = (
+    id: string,
+    title: string,
+    daysAgo: number
+  ): Session => ({
     id,
     title,
     createdAt: subDays(new Date(), daysAgo),
     updatedAt: subDays(new Date(), daysAgo),
     conversations: [
-      { id: `${id}-1`, question: 'Sample question', response: 'Sample response', createdAt: subDays(new Date(), daysAgo), updatedAt: subDays(new Date(), daysAgo) },
-    ],
+      {
+        id: `${id}-1`,
+        question: 'Sample question',
+        response: 'Sample response',
+        createdAt: subDays(new Date(), daysAgo),
+        updatedAt: subDays(new Date(), daysAgo)
+      }
+    ]
   });
 
   const sessionsWithVariousDates: Session[] = [
@@ -487,11 +586,23 @@ export const SessionGrouping = () => {
     createSessionWithDate('6', 'Two Months Ago Session', 65),
     createSessionWithDate('7', 'Six Months Ago Session', 180),
     createSessionWithDate('8', 'Last Year Session', 370),
-    createSessionWithDate('9', 'Two Years Ago Session', 740),
+    createSessionWithDate('9', 'Two Years Ago Session', 740)
   ];
 
   return (
-    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20, margin: 20, background: '#02020F', borderRadius: 5 }}>
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        background: '#02020F',
+        borderRadius: 5
+      }}
+    >
       <Sessions
         viewType="console"
         sessions={sessionsWithVariousDates}
@@ -512,10 +623,18 @@ export const SessionGrouping = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -571,10 +690,18 @@ export const HundredSessions = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -634,10 +761,18 @@ export const HundredConversations = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -689,10 +824,18 @@ export const LongSessionNames = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -810,10 +953,18 @@ export const MarkdownShowcase = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -889,10 +1040,18 @@ export const CVEExample = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -1037,35 +1196,88 @@ export const OpenAIIntegration = () => {
               }
             </SessionGroups>
           </SessionsList>
-          <div className="flex-1 h-full flex flex-col">
-            <SessionMessages />
+
+          <SessionMessagePanel>
+            <SessionMessagesHeader />
+            <SessionMessages>
+              {conversations =>
+                conversations.map(conversation => (
+                  <SessionMessage conversation={conversation} />
+                ))
+              }
+            </SessionMessages>
             <SessionInput />
-          </div>
+          </SessionMessagePanel>
         </Sessions>
       </div>
     </div>
   );
 };
 
-const CustomSessionMessage: FC<any> = ({
-  question,
-  response
-}) => (
-  <div className="p-4 border border-blue-500 rounded mb-4">
-    <span className="text-lg font-semibold text-blue-500">
-      This is my question: {question}
-    </span>
-    <br />
+const CustomMessagesHeader: FC<any> = () => {
+  const { activeSession } = useContext(SessionsContext);
+
+  return (
+    <div>
+      <h6 className="text-gray-400">
+        <DateFormat date={activeSession.createdAt} format="MMMM dd, yyyy" />
+      </h6>
+      <h1 className="text-2xl font-semibold">{activeSession?.title}</h1>
+    </div>
+  );
+};
+
+const CustomMessageQuestion: FC<any> = ({ question }) => (
+  <span className="text-lg font-semibold text-blue-500">
+    This is my question: {question}
+  </span>
+);
+
+const CustomMessageResponse: FC<any> = ({ response }) => (
+  <blockquote className="border-l border-blue-500 pl-2">
     This is the response: {response}
-  </div>
+  </blockquote>
 );
 
-const CustomSessionListItem: FC<SessionListItemProps> = ({ session }) => {
+const CustomMessageFile: FC<any> = ({ name, type }) => (
+  <Chip size="small" className="rounded-full border border-gray-700">
+    {name || type}
+  </Chip>
+);
+
+const CustomMessageSource: FC<any> = ({ title, url, image }) => {
+  const { theme } = useContext(SessionsContext);
+  return (
+    <Chip
+      size="small"
+      className="rounded-full border border-blue-500 border-opacity-50"
+      onClick={() => alert('take me to ' + url)}
+      start={
+        image && (
+          <img
+            src={image}
+            alt={title}
+            className={cn(theme.messages.message.sources.source.image)}
+          />
+        )
+      }
+    >
+      {title || url}
+    </Chip>
+  );
+};
+
+const CustomSessionListItem: FC<SessionListItemProps> = ({
+  session,
+  children,
+  ...rest
+}) => {
   const [open, setOpen] = useState(false);
   const btnRef = useRef(null);
   return (
     <>
       <ListItem
+        {...rest}
         end={
           <IconButton
             ref={btnRef}
@@ -1082,7 +1294,12 @@ const CustomSessionListItem: FC<SessionListItemProps> = ({ session }) => {
       >
         <span className="truncate">{session.title}</span>
       </ListItem>
-      <Menu open={open} onClose={() => setOpen(false)} reference={btnRef}>
+      <Menu
+        open={open}
+        onClose={() => setOpen(false)}
+        reference={btnRef}
+        appendToBody={false}
+      >
         <Card disablePadding>
           <List>
             <ListItem onClick={() => alert('rename')}>Rename</ListItem>
@@ -1109,7 +1326,14 @@ export const CustomComponents = () => {
         borderRadius: 5
       }}
     >
-      <Sessions sessions={fakeSessions}>
+      <Sessions
+        sessions={[
+          ...fakeSessions,
+          ...sessionsWithFiles,
+          ...sessionWithSources
+        ]}
+        activeSessionId="1"
+      >
         <SessionsList>
           <NewSessionButton>
             <button className="text-blue-500">New Session</button>
@@ -1129,12 +1353,39 @@ export const CustomComponents = () => {
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
+        <SessionMessagePanel>
+          <SessionMessagesHeader>
+            <CustomMessagesHeader />
+          </SessionMessagesHeader>
           <SessionMessages>
-            <CustomSessionMessage />
+            {conversations =>
+              conversations.map((conversation, index) => (
+                <SessionMessage
+                  conversation={conversation}
+                  isLast={index === conversations.length - 1}
+                >
+                  <MessageQuestion question={conversation.question}>
+                    <CustomMessageQuestion />
+                  </MessageQuestion>
+                  <MessageFiles files={conversation.files}>
+                    <CustomMessageFile />
+                  </MessageFiles>
+                  <MessageResponse response={conversation.response}>
+                    <CustomMessageResponse />
+                  </MessageResponse>
+                  <MessageSources sources={conversation.sources}>
+                    <CustomMessageSource />
+                  </MessageSources>
+                  <MessageActions
+                    question={conversation.question}
+                    response={conversation.response}
+                  />
+                </SessionMessage>
+              ))
+            }
           </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );
@@ -1174,7 +1425,9 @@ export const EmptyState = () => {
                 ))}
                 {groups.length === 0 && (
                   <div className="flex flex-1 items-center justify-center">
-                    <p className="text-gray-500">No sessions yet. Start a new session!</p>
+                    <p className="text-gray-500">
+                      No sessions yet. Start a new session!
+                    </p>
                   </div>
                 )}
               </>
@@ -1185,7 +1438,9 @@ export const EmptyState = () => {
           <SessionMessages
             newSessionContent={
               <div className="flex items-center justify-center h-full">
-                <p className="text-gray-500">No messages yet. Start a new conversation!</p>
+                <p className="text-gray-500">
+                  No messages yet. Start a new conversation!
+                </p>
               </div>
             }
           />
@@ -1196,18 +1451,17 @@ export const EmptyState = () => {
   );
 };
 
-export const ConversationSources = () => {
-  const sessionWithSources: Session[] = [
-    {
-      id: 'session-sources',
-      title: 'Session with Sources',
-      createdAt: subHours(new Date(), 1),
-      updatedAt: new Date(),
-      conversations: [
-        {
-          id: 'conversation-1',
-          question: 'What are the main causes of climate change?',
-          response: `Climate change is primarily caused by human activities that release greenhouse gases into the atmosphere. The main causes include:
+const sessionWithSources: Session[] = [
+  {
+    id: 'session-sources',
+    title: 'Session with Sources',
+    createdAt: subHours(new Date(), 1),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        id: 'conversation-1',
+        question: 'What are the main causes of climate change?',
+        response: `Climate change is primarily caused by human activities that release greenhouse gases into the atmosphere. The main causes include:
 
 1. Burning of fossil fuels (coal, oil, and natural gas)
 2. Deforestation and land-use changes
@@ -1215,24 +1469,27 @@ export const ConversationSources = () => {
 4. Agriculture and livestock farming
 
 These activities increase the concentration of greenhouse gases in the atmosphere, leading to the greenhouse effect and global warming.`,
-          createdAt: new Date(),
-          updatedAt: new Date(),
-          sources: [
-            {
-              title: 'NASA: Causes of Climate Change',
-              image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1224px-NASA_logo.svg.png',
-              url: 'https://climate.nasa.gov/causes/'
-            },
-            {
-              title: 'IPCC: Climate Change 2021: The Physical Science Basis and Global Warming Is the Last War We will Fight',
-              url: 'https://www.ipcc.ch/report/ar6/wg1/'
-            }
-          ]
-        }
-      ]
-    }
-  ];
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        sources: [
+          {
+            title: 'NASA: Causes of Climate Change',
+            image:
+              'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1224px-NASA_logo.svg.png',
+            url: 'https://climate.nasa.gov/causes/'
+          },
+          {
+            title:
+              'IPCC: Climate Change 2021: The Physical Science Basis and Global Warming Is the Last War We will Fight',
+            url: 'https://www.ipcc.ch/report/ar6/wg1/'
+          }
+        ]
+      }
+    ]
+  }
+];
 
+export const ConversationSources = () => {
   return (
     <div
       style={{
@@ -1266,10 +1523,18 @@ These activities increase the concentration of greenhouse gases in the atmospher
             }
           </SessionGroups>
         </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
-          <SessionMessages />
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages>
+            {conversations =>
+              conversations.map(conversation => (
+                <SessionMessage conversation={conversation} />
+              ))
+            }
+          </SessionMessages>
           <SessionInput />
-        </div>
+        </SessionMessagePanel>
       </Sessions>
     </div>
   );