diff --git a/package-lock.json b/package-lock.json
index c1f97db0..816bd5bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,8 @@
         "react-native-safe-area-context": "4.6.3",
         "react-native-screens": "~3.22.0",
         "react-native-url-polyfill": "^2.0.0",
-        "react-native-vector-icons": "^10.0.0"
+        "react-native-vector-icons": "^10.0.0",
+        "react-scroll-to-top": "^3.0.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -15413,6 +15414,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-scroll-to-top": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz",
+      "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || 17.x || ^18"
+      }
+    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
diff --git a/package.json b/package.json
index 42503c67..88493176 100644
--- a/package.json
+++ b/package.json
@@ -31,20 +31,20 @@
     "expo-status-bar": "~1.6.0",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-dom-parser": "^1.5.3",
+    "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
+    "react-native-ionicons": "^4.6.5",
     "react-native-render-html": "^6.3.4",
     "react-native-root-siblings": "^4.1.1",
     "react-native-root-toast": "^3.5.1",
-    "react-native-ionicons": "^4.6.5",
-    "react-native": "0.72.5",
-    "react-native-elements": "^3.4.3",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
+    "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-url-polyfill": "^2.0.0"
+    "react-scroll-to-top": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx
index b1a07624..d8c4da8a 100644
--- a/src/app/(tabs)/search/story.tsx
+++ b/src/app/(tabs)/search/story.tsx
@@ -1,11 +1,20 @@
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, ScrollView, Image } from 'react-native';
+import React, { createRef, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  Image,
+  Text,
+  Share,
+  Button,
+} from 'react-native';
 import HTMLView from 'react-native-htmlview';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import globalStyles from '../../../styles/globalStyles';
 
+import jsonStory from '../../../database/story.json';
+
 function htmlParser(html: string) {
-  const regex = /<h2(.*?)h2>(\n+<p(.*?)p>)+/; // regex grabs heading and paragraph tags for story
+  const regex = /(<h2(.*?)h2>)(\n+<p(.*?)p>)+()/; // regex grabs heading and paragraph tags for story
   const corresp = regex.exec(html);
   const story = corresp ? corresp[0] : ''; // <h2>heading<h2> <p>paragraph1</p> ...
   return story;
@@ -15,7 +24,10 @@ function StoryScreen() {
   const [isLoading, setLoading] = useState(true);
   const [title, setTitle] = useState(String);
   const [content, setContent] = useState(String);
+  const [author, setAuthor] = useState(String);
+  const [genres, setGenres] = useState(['']);
 
+  // Load Wordpress API and its contents
   const getStory = async (id: string) => {
     try {
       const url = `https://girlswritenow.org/wp-json/wp/v2/story/${id}`;
@@ -23,6 +35,8 @@ function StoryScreen() {
       const json = await response.json();
       setTitle(json.title.rendered);
       setContent(json.content.rendered);
+      setAuthor(jsonStory.author);
+      setGenres(jsonStory['genre-medium'].map(txt => `<li>${txt}</li>`)); // .map(txt => `<p>${txt}</p>`)
     } catch (error) {
       console.error(error);
     } finally {
@@ -30,6 +44,31 @@ function StoryScreen() {
     }
   };
 
+  // Share Story Button action
+  const onShare = async () => {
+    try {
+      const result = await Share.share({
+        message:
+          'React Native | A framework for building native apps using React',
+      });
+      if (result.action === Share.sharedAction) {
+        if (result.activityType) {
+          // shared with activity type of result.activityType
+        } else {
+          // shared
+        }
+      } else if (result.action === Share.dismissedAction) {
+        // dismissed
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  // const backToTop = () => {
+
+  // }
+
   useEffect(() => {
     getStory('170947');
   }, []);
@@ -40,10 +79,21 @@ function StoryScreen() {
         <ActivityIndicator />
       ) : (
         <ScrollView>
-          {/* <Image source={{
-          uri: "https://girlswritenow.org/wp-content/uploads/2023/08/Its-Carnvial-Allison-Elliott.png"}}/> */}
+          <Image
+            style={{ width: '100%', height: '5%' }}
+            source={{ uri: jsonStory.featured_media }}
+          />
+          <Text>By {author}</Text>
+          <HTMLView value={genres.toString().replace(',', '')} />
+
+          <Button onPress={onShare} title="Share Story" />
           <HTMLView value={title} />
           <HTMLView value={htmlParser(content)} />
+          <Button onPress={onShare} title="Share Story" />
+          {/* Need a way of getting the auhtor'sprocess/story can prolly be done in the regex */}
+          <Text>By {author}</Text>
+          {/* <Button onPress={backToTop} title="Back to Top" /> */}
+          <Text>{'\n\n\n\n\n\n\n\n\n\n\n\n\n\n'}</Text>
         </ScrollView>
       )}
     </SafeAreaView>