diff --git a/components/generate/GenerateStoryComponent.tsx b/components/generate/GenerateStoryComponent.tsx
index 1f792a9b0..a8bdb3cc2 100644
--- a/components/generate/GenerateStoryComponent.tsx
+++ b/components/generate/GenerateStoryComponent.tsx
@@ -5,11 +5,11 @@ import StoryPDFViewer from 'components/pdf/StoryPDFViewer';
 export default function GenerateStoryComponent() {
   return (
     <GenerateStoryContextProvider>
-      {({ story, loading }: IGenerateStoryContext) => {
+      {({ story, titleImage, loading }: IGenerateStoryContext) => {
         return (
           <div>
             {loading ? <div>Loading...</div> : null}
-            {story && <StoryPDFViewer story={story} />}
+            {story && <StoryPDFViewer story={story} titleImage={titleImage} />}
           </div>
         );
       }}
diff --git a/components/generate/GenerateStoryContext.tsx b/components/generate/GenerateStoryContext.tsx
index 251161cd5..700044d33 100644
--- a/components/generate/GenerateStoryContext.tsx
+++ b/components/generate/GenerateStoryContext.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import chatOperations, { IStory } from 'operations/chatOperations';
+import imageOperations from 'operations/imageOperations';
 import {
   PropsWithChildren,
   createContext,
@@ -12,29 +13,40 @@ import {
 
 export interface IGenerateStoryContext {
   story?: IStory;
+  titleImage?: string;
   loading: boolean;
 }
 
 const GenerateStoryContext = createContext<IGenerateStoryContext>({
   story: undefined,
+  titleImage: undefined,
   loading: false
 });
 
 function GenerateStoryContextProvider({ children }: { children: PropsWithChildren<any> }) {
   const [loading, setLoading] = useState<boolean>(false);
   const [story, setStory] = useState<IStory>();
+  const [titleImage, setTitleImage] = useState<string>();
 
-  const value = useMemo<IGenerateStoryContext>(() => ({ story, loading }), [story, loading]);
+  // TODO (Patricio->Benson): should we memoize the titleImage like this? It takes the image a second to come back from the API...
+  const value = useMemo<IGenerateStoryContext>(
+    () => ({ story, titleImage, loading }),
+    [story, titleImage, loading]
+  );
 
   /*
-  TODO(Benson -> Patricio): Make network call to get images
   TODO(Benson -> Patricio): Write a helper function in this directory /generate/utils.ts
   called mergeImages(story: IStory, images: string[]): IStory;
   */
+
+  /*
+  TODO(Patricio -> Benson): This Dalle call takes a while to come back. We should probably show a loading indicator in the meantime? We'll figure it out
+  */
   const getStoryAsync = useCallback(async () => {
     setLoading(true);
     const story = await chatOperations.createStoryAsync();
-    // const images = await imageOperations.getStoryImagesAsync(story);
+    const titleImage = await imageOperations.createImageAsync(story.introduction);
+    setTitleImage(titleImage);
     setStory(story);
     setLoading(false);
   }, []);
diff --git a/components/generate/utils.tsx b/components/generate/utils.tsx
new file mode 100644
index 000000000..e5a0aa169
--- /dev/null
+++ b/components/generate/utils.tsx
@@ -0,0 +1,10 @@
+import { IStory } from 'operations/chatOperations';
+
+function mergeImages(story: IStory, titleImage: string): IStory {
+  return {
+    ...story,
+    titleImage
+  };
+}
+
+export default mergeImages;
diff --git a/components/pdf/StoryPDFViewer.tsx b/components/pdf/StoryPDFViewer.tsx
index 9c66ea2a4..386a3e025 100644
--- a/components/pdf/StoryPDFViewer.tsx
+++ b/components/pdf/StoryPDFViewer.tsx
@@ -18,7 +18,7 @@ const PDFViewerNoSSR = dynamic(() => import('@react-pdf/renderer').then((mod) =>
   ssr: false
 });
 
-export default function StoryPDFViewer({ story }: { story: IStory }) {
+export default function StoryPDFViewer({ story }: { story: IStory }, titleImage: string) {
   return (
     <div
       style={{
@@ -28,7 +28,7 @@ export default function StoryPDFViewer({ story }: { story: IStory }) {
       }}
     >
       <PDFViewerNoSSR style={styles.pdfContainer}>
-        <Document pages={story.pages} />
+        <Document pages={story.pages} titleImage={titleImage} />
       </PDFViewerNoSSR>
     </div>
   );
@@ -125,7 +125,7 @@ with a solidified way at dispersing the text throughout the page.
 */
 
 // TODO(Benson -> Patricio): replace hardcoded images.
-const Document = ({ pages }: { pages: { text: string }[] }) => {
+const Document = ({ pages }: { pages: { text: string }[] }, titleImage: string) => {
   return (
     <PDFDocument>
       {pages.map(({ text }, index) => {
@@ -134,7 +134,7 @@ const Document = ({ pages }: { pages: { text: string }[] }) => {
             <View key={index} style={{ ...styles.section, bottom: '10%' }}>
               <Text>{text}</Text>
             </View>
-            <Image src={imgURL} style={styles.image} />
+            <Image src={titleImage} style={styles.image} />
           </Page>
         );
       })}
diff --git a/operations/chatOperations.ts b/operations/chatOperations.ts
index 85344345d..68a50a800 100644
--- a/operations/chatOperations.ts
+++ b/operations/chatOperations.ts
@@ -24,7 +24,7 @@ function getFunctionCallArguments<T>(response: any) {
  */
 export interface IStory {
   title: string;
-  // titleImage?: string;
+  titleImage?: string;
   topic: string;
   introduction: string;
   narrativeStructure: string;