diff --git a/assets/icons.tsx b/assets/icons.tsx
index 7a5ed2ea..54d18bab 100644
--- a/assets/icons.tsx
+++ b/assets/icons.tsx
@@ -4,6 +4,7 @@ import { SvgXml } from 'react-native-svg';
 
 export type IconType =
   | 'home_outline'
+  | 'back_icon'
   | 'document_outline'
   | 'search_outline'
   | 'settings_gear'
@@ -11,6 +12,7 @@ export type IconType =
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
+  back_icon: <Ionicons name="chevron-back-outline" size={15} />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   settings_gear: <Ionicons name="settings-outline" size={32} />,
diff --git a/package-lock.json b/package-lock.json
index 36bbe3af..55331f68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "dom-parser": "^0.1.6",
         "expo": "~49.0.11",
         "expo-constants": "~14.4.2",
+        "expo-font": "~11.4.0",
         "expo-linking": "~5.0.2",
         "expo-router": "^2.0.0",
         "expo-status-bar": "~1.6.0",
diff --git a/package.json b/package.json
index 2d951965..0adf9e77 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,8 @@
     "react-native-svg": "13.9.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-scroll-to-top": "^3.0.0"
+    "react-scroll-to-top": "^3.0.0",
+    "expo-font": "~11.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
index 9a5f56bf..60ee9389 100644
--- a/src/app/(tabs)/_layout.tsx
+++ b/src/app/(tabs)/_layout.tsx
@@ -37,6 +37,13 @@ function TabNav() {
           tabBarIcon: SearchIcon,
         }}
       />
+      <Tabs.Screen
+        name="author"
+        options={{
+          headerShown: false,
+          href: null,
+        }}
+      />
       <Tabs.Screen
         name="story"
         options={{
diff --git a/src/app/(tabs)/author/_layout.tsx b/src/app/(tabs)/author/_layout.tsx
new file mode 100644
index 00000000..d021a461
--- /dev/null
+++ b/src/app/(tabs)/author/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;
diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
new file mode 100644
index 00000000..d98f9c57
--- /dev/null
+++ b/src/app/(tabs)/author/index.tsx
@@ -0,0 +1,146 @@
+import { useLocalSearchParams, router } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import styles from './styles';
+import Icon from '../../../../assets/icons';
+import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
+import {
+  fetchAuthor,
+  fetchAuthorStoryPreviews,
+} from '../../../queries/authors';
+import { Author, StoryPreview } from '../../../queries/types';
+import globalStyles from '../../../styles/globalStyles';
+
+function AuthorScreen() {
+  const [authorInfo, setAuthorInfo] = useState<Author>();
+  const [authorStoryPreview, setAuthorStoryPreview] =
+    useState<StoryPreview[]>();
+  const [isLoading, setLoading] = useState(true);
+  const params = useLocalSearchParams<{ author: string }>();
+  const { author } = params;
+
+  useEffect(() => {
+    (async () => {
+      const storyData: StoryPreview[] = await fetchAuthorStoryPreviews(
+        parseInt(author as string, 10),
+      );
+      const authorData: Author = await fetchAuthor(
+        parseInt(author as string, 10),
+      );
+      try {
+        setAuthorInfo(authorData);
+        console.log('TESTING AUTHOR INFO QUERY OUTPUT:', authorInfo);
+      } catch (error) {
+        console.log(
+          `There was an error while trying to output authorinfo ${error}`,
+        );
+      }
+      try {
+        setAuthorStoryPreview(storyData);
+        console.log('TESTING STORY PREVIEW INFO QUERY OUTPUT:', storyData);
+      } catch (error) {
+        console.log(
+          `There was an error while trying to output author story preview info ${error}`,
+        );
+      }
+      setLoading(false);
+    })();
+  }, [author]);
+
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <ScrollView>
+          <View style={styles.backButton}>
+            <Icon type="back_icon" />
+            <TouchableOpacity
+              onPress={() => {
+                router.back();
+              }}
+            >
+              <Text>BACK</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.authorCardContainer}>
+            <Image
+              style={styles.image}
+              source={{ uri: authorInfo ? authorInfo.image : '' }}
+            />
+            <View style={styles.authorTextContainer}>
+              <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>
+                {authorInfo ? authorInfo.name : ''}
+              </Text>
+              <Text style={styles.pronouns}>
+                {authorInfo ? authorInfo.pronouns : ' '}
+              </Text>
+            </View>
+            <HorizontalLine />
+
+            <Text style={styles.bioText}>
+              {authorInfo ? authorInfo.bio : ''}
+            </Text>
+
+            <HorizontalLine />
+
+            <View style={styles.authorStatementContainer}>
+              <Text style={styles.authorStatementTitle}>
+                Artist's Statement
+              </Text>
+              <Text style={styles.authorStatement}>
+                {authorInfo ? authorInfo.artist_statement : ''}
+              </Text>
+            </View>
+            <HorizontalLine />
+          </View>
+          <View />
+
+          <Text style={styles.storyCountText}>
+            {authorStoryPreview?.length + ' '}
+            {authorStoryPreview
+              ? authorStoryPreview?.length > 1
+                ? 'Stories'
+                : 'Story'
+              : ''}
+          </Text>
+
+          {authorStoryPreview
+            ? authorStoryPreview.map(story => (
+                <PreviewCard
+                  key={story.title}
+                  title={story.title}
+                  image={story.featured_media}
+                  author={story.author_name}
+                  authorImage={story.author_image}
+                  excerpt={story.excerpt}
+                  tags={story.genre_medium
+                    .concat(story.tone)
+                    .concat(story.topic)}
+                  pressFunction={() =>
+                    router.push({
+                      pathname: '/story',
+                      params: { storyId: story.id.toString() },
+                    })
+                  }
+                />
+              ))
+            : ''}
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
+}
+
+export default AuthorScreen;
diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx
new file mode 100644
index 00000000..13f419bc
--- /dev/null
+++ b/src/app/(tabs)/author/styles.tsx
@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../../styles/colors';
+
+const styles = StyleSheet.create({
+  authorCardContainer: {
+    marginRight: 20,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+  },
+  name: {
+    paddingTop: 15,
+    fontWeight: 'bold',
+    fontSize: 25,
+    fontFamily: 'Avenir',
+    marginLeft: -10,
+  },
+  image: {
+    height: 68,
+    width: 68,
+    backgroundColor: colors.darkGrey,
+    borderRadius: 4,
+    marginBottom: 12,
+    marginTop: 12,
+  },
+  bioText: {
+    paddingTop: 15,
+    paddingBottom: 15,
+    color: 'black',
+    fontFamily: 'Avenir',
+    fontSize: 14,
+    width: 324,
+  },
+  authorStatementContainer: {
+    paddingTop: 15,
+    paddingBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  authorStatement: {
+    paddingBottom: 15,
+    fontSize: 14,
+    color: 'black',
+    fontWeight: '400',
+    fontFamily: 'Avenir',
+    width: 324,
+  },
+  authorTextContainer: {
+    paddingLeft: 20,
+  },
+  line: {
+    borderTopColor: 'black',
+    borderTopWidth: 20,
+  },
+  authorStatementTitle: {
+    fontWeight: 'bold',
+    fontFamily: 'Avenir',
+    fontSize: 17,
+    paddingBottom: 2,
+  },
+  backButton: {
+    paddingTop: 20,
+    paddingBottom: 15,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    color: colors.lightGrey,
+  },
+  storyCountText: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    fontWeight: 'bold',
+  },
+  pronouns: {
+    color: '#797979',
+    marginLeft: -10,
+  },
+});
+
+export default styles;
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index 8ee38ffd..c55bf17a 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -1,21 +1,36 @@
 import { SearchBar } from '@rneui/themed';
 import { Link, router } from 'expo-router';
 import React, { useEffect, useState } from 'react';
-import { Button, FlatList, View } from 'react-native';
+import {
+  Button,
+  FlatList,
+  View,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import FilterModal from '../../../components/FilterModal/FilterModal';
+import LandingCard from '../../../components/LandingCard/LandingCard';
 import SearchCard from '../../../components/PreviewCard/PreviewCard';
+import { fetchGenres } from '../../../queries/genres';
 import { fetchAllStoryPreviews } from '../../../queries/stories';
-import { StoryPreview } from '../../../queries/types';
-import globalStyles from '../../../styles/globalStyles';
+import { StoryPreview, Genre } from '../../../queries/types';
 
 function SearchScreen() {
   const [allStories, setAllStories] = useState<StoryPreview[]>([]);
+  const [allGenres, setAllGenres] = useState<Genre[]>([]);
   const [searchResults, setSearchResults] = useState<StoryPreview[]>([]);
   const [search, setSearch] = useState('');
   const [filterVisible, setFilterVisible] = useState(false);
+  const [showGenreCarousals, setShowGenreCarousals] = useState(true);
+
+  const getColor = (index: number) => {
+    const genreColors = ['#E66E3F', '#ACC073', '#B49BC6'];
+    return genreColors[index % genreColors.length];
+  };
 
   const searchFunction = (text: string) => {
     if (text === '') {
@@ -31,20 +46,30 @@ function SearchScreen() {
     });
     setSearch(text);
     setSearchResults(updatedData);
+    setShowGenreCarousals(false);
   };
 
   useEffect(() => {
     (async () => {
       const data: StoryPreview[] = await fetchAllStoryPreviews();
       setAllStories(data);
+      const genreData: Genre[] = await fetchGenres();
+      console.log('testing use effect fetch of genre data:', genreData);
+      setAllGenres(genreData);
     })();
   }, []);
 
+  const handleCancelButtonPress = () => {
+    setSearchResults([]);
+    setShowGenreCarousals(true);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={[filterVisible ? styles.greyOverlay : styles.noOverlay]} />
       <SearchBar
-        platform="default"
+        platform="ios"
+        onCancel={() => handleCancelButtonPress()}
         searchIcon={false}
         clearIcon
         containerStyle={styles.searchContainer}
@@ -52,44 +77,75 @@ function SearchScreen() {
         inputStyle={{ color: 'black' }}
         leftIconContainerStyle={{}}
         rightIconContainerStyle={{}}
-        lightTheme
+        // lightTheme
         loadingProps={{}}
         placeholder="Search"
         placeholderTextColor="black"
         onChangeText={text => searchFunction(text)}
         value={search}
       />
-      <Button
+      {/* <Button
         title="Show Filter Modal"
         onPress={() => setFilterVisible(true)}
-      />
-      <FlatList
-        showsVerticalScrollIndicator={false}
-        data={searchResults}
-        contentContainerStyle={{}}
-        renderItem={({ item }) => (
-          <SearchCard
-            key={item.title}
-            title={item.title}
-            image={item.featured_media}
-            author={item.author_name}
-            authorImage={item.author_image}
-            excerpt={item.excerpt}
-            tags={item.genre_medium}
-            pressFunction={() =>
-              router.push({
-                pathname: '/story',
-                params: { storyId: item.id.toString() },
-              })
-            }
+      /> */}
+      {showGenreCarousals ? (
+        <ScrollView>
+          {allGenres.map((genre, index) => (
+            <View>
+              <View style={styles.genreText}>
+                <Text style={styles.parentName}>{genre.parent_name}</Text>
+                <Text style={styles.seeAll}>See All</Text>
+              </View>
+              <View style={styles.scrollView}>
+                <ScrollView
+                  horizontal
+                  showsVerticalScrollIndicator
+                  bounces={false}
+                  contentContainerStyle={{ paddingHorizontal: 8 }}
+                >
+                  {genre.subgenres.map(subgenre => (
+                    <LandingCard
+                      subgenres={subgenre.name}
+                      cardColor={getColor(index)}
+                      pressFunction={() => null}
+                    />
+                  ))}
+                </ScrollView>
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+      ) : (
+        <View>
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            data={searchResults}
+            contentContainerStyle={{}}
+            renderItem={({ item }) => (
+              <SearchCard
+                key={item.title}
+                title={item.title}
+                image={item.featured_media}
+                author={item.author_name}
+                authorImage={item.author_image}
+                excerpt={item.excerpt}
+                tags={item.genre_medium}
+                pressFunction={() =>
+                  router.push({
+                    pathname: '/story',
+                    params: { storyId: item.id.toString() },
+                  })
+                }
+              />
+            )}
           />
-        )}
-      />
-      <FilterModal
-        isVisible={filterVisible}
-        setIsVisible={setFilterVisible}
-        title="Genre"
-      />
+          <FilterModal
+            isVisible={filterVisible}
+            setIsVisible={setFilterVisible}
+            title="Genre"
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 }
diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
index f069ff55..79a12642 100644
--- a/src/app/(tabs)/search/styles.ts
+++ b/src/app/(tabs)/search/styles.ts
@@ -1,5 +1,7 @@
 import { Dimensions, StyleSheet } from 'react-native';
 
+import colors from '../../../styles/colors';
+
 const { width, height } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
@@ -43,6 +45,24 @@ const styles = StyleSheet.create({
     width,
     height,
   },
+  scrollView: {
+    flexGrow: 0,
+  },
+
+  genreText: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  parentName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingBottom: 10,
+    paddingLeft: 10,
+  },
+  seeAll: {
+    color: '#2D2D2D',
+    textDecorationLine: 'underline',
+  },
 });
 
 export default styles;
diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
index 899e8632..381a937f 100644
--- a/src/app/(tabs)/story/index.tsx
+++ b/src/app/(tabs)/story/index.tsx
@@ -1,4 +1,4 @@
-import { useLocalSearchParams } from 'expo-router';
+import { useLocalSearchParams, router } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
@@ -7,6 +7,7 @@ import {
   ScrollView,
   Share,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { Button } from 'react-native-paper';
@@ -68,17 +69,25 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
-          <Image style={styles.image} source={{ uri: story.featured_media }} />
+          {/* <Image style={styles.image} source={{ uri: story.featured_media }} /> */}
 
           <Text style={styles.title}>{story?.title}</Text>
-
-          <View style={styles.author}>
-            <Image
-              style={styles.authorImage}
-              source={{ uri: story.author_image }}
-            />
-            <Text style={styles.authorText}>By {story.author_name}</Text>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              router.push({
+                pathname: '/author',
+                params: { author: story.author_id.toString() },
+              });
+            }}
+          >
+            <View style={styles.author}>
+              <Image
+                style={styles.authorImage}
+                source={{ uri: story.author_image ? story.author_image : '' }}
+              />
+              <Text style={styles.authorText}>By {story.author_name}</Text>
+            </View>
+          </TouchableOpacity>
 
           <View>
             <FlatList
diff --git a/src/components/AuthorCard/AuthorCard.tsx b/src/components/AuthorCard/AuthorCard.tsx
new file mode 100644
index 00000000..afdd2b57
--- /dev/null
+++ b/src/components/AuthorCard/AuthorCard.tsx
@@ -0,0 +1,60 @@
+import { Image, Pressable, Text, View } from 'react-native';
+
+import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
+
+type AuthorCardProps = {
+  name: string;
+  pronouns: string;
+  image: string;
+  bio: string;
+  artist_statement: string;
+};
+function AuthorCard({
+  name,
+  pronouns,
+  image,
+  bio,
+  artist_statement,
+}: AuthorCardProps) {
+  return (
+    <View style={styles.authorCardContainer}>
+      <View style={styles.authorInfo}>
+        <View style={styles.imageContainer}>
+          <Image style={styles.image} source={{ uri: image }} />
+        </View>
+        <View style={styles.authorTextContainer}>
+          <Text style={styles.name}>{name}</Text>
+          <Text>{pronouns}</Text>
+          <Text style={{ fontWeight: 'bold' }}>Mentee</Text>
+        </View>
+      </View>
+
+      <View style={styles.bioContainer}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+        </View>
+
+        <Text style={styles.bioText}>{bio}</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+        </View>
+      </View>
+
+      <View>
+        <Text style={styles.authorStatementContainer}>Artist's Statement</Text>
+        <Text style={styles.authorStatement}>{artist_statement}</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+          <View style={{ flex: 1, height: 1, backgroundColor: 'lightgray' }} />
+        </View>
+      </View>
+
+      <Text style={{ fontWeight: 'bold' }}> 1 Story</Text>
+    </View>
+  );
+}
+export default AuthorCard;
diff --git a/src/components/AuthorCard/styles.ts b/src/components/AuthorCard/styles.ts
new file mode 100644
index 00000000..a5e7b1ca
--- /dev/null
+++ b/src/components/AuthorCard/styles.ts
@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  authorCardContainer: {
+    marginRight: 20,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+  },
+  authorInfo: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  name: {
+    paddingTop: 15,
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  image: {
+    height: 76,
+    width: 84,
+    backgroundColor: colors.darkGrey,
+    borderRadius: 4,
+    marginBottom: 12,
+    marginTop: 12,
+  },
+
+  bioContainer: {},
+  bioText: {
+    paddingTop: 15,
+    paddingBottom: 15,
+    color: 'gray',
+  },
+  authorStatementContainer: {
+    paddingTop: 15,
+    paddingBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 15,
+  },
+  authorStatement: {
+    paddingBottom: 15,
+    color: 'gray',
+  },
+  imageContainer: {},
+  authorTextContainer: {
+    paddingLeft: 20,
+  },
+  line: {
+    borderTopColor: 'black',
+    borderTopWidth: 20,
+  },
+});
+
+export default styles;
diff --git a/src/components/HorizontalLine/HorizontalLine.tsx b/src/components/HorizontalLine/HorizontalLine.tsx
new file mode 100644
index 00000000..b29a1f73
--- /dev/null
+++ b/src/components/HorizontalLine/HorizontalLine.tsx
@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+
+import styles from './styles';
+
+function HorizontalLine() {
+  return <View style={styles.line} />;
+}
+
+export default HorizontalLine;
diff --git a/src/components/HorizontalLine/styles.ts b/src/components/HorizontalLine/styles.ts
new file mode 100644
index 00000000..2b6089ff
--- /dev/null
+++ b/src/components/HorizontalLine/styles.ts
@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  line: {
+    borderBottomColor: colors.darkGrey,
+    borderBottomWidth: 1,
+    width: 500,
+  },
+});
+
+export default styles;
diff --git a/src/components/LandingCard/LandingCard.tsx b/src/components/LandingCard/LandingCard.tsx
new file mode 100644
index 00000000..50fa8985
--- /dev/null
+++ b/src/components/LandingCard/LandingCard.tsx
@@ -0,0 +1,38 @@
+import {
+  GestureResponderEvent,
+  Image,
+  Pressable,
+  Text,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+
+import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
+
+type LandingCardProps = {
+  subgenres: string;
+  cardColor: string;
+  pressFunction: (event: GestureResponderEvent) => void;
+};
+
+function LandingCard({
+  subgenres,
+  pressFunction,
+  cardColor,
+}: LandingCardProps) {
+  return (
+    <TouchableOpacity onPress={pressFunction}>
+      <View style={styles.contentCardContainer}>
+        <View style={[styles.card, { backgroundColor: cardColor }]} />
+        <View style={styles.overlayContainer}>
+          <Text style={styles.overlayText}>{subgenres}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default LandingCard;
+
+//landing scroll will pass a color prop into the landingcard component?
diff --git a/src/components/LandingCard/styles.ts b/src/components/LandingCard/styles.ts
new file mode 100644
index 00000000..7f56e111
--- /dev/null
+++ b/src/components/LandingCard/styles.ts
@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  contentCardContainer: {
+    marginRight: 15,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  card: {
+    height: 145,
+    width: 135,
+    borderRadius: 4,
+    marginBottom: 8,
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject, // This makes the overlay cover the entire parent container
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  overlayText: {
+    color: 'white',
+    alignSelf: 'flex-end',
+    textAlign: 'right',
+    whiteSpace: 'pre-wrap',
+    paddingBottom: 15,
+    paddingRight: 10,
+    fontSize: 12.5,
+  },
+});
+
+export default styles;
diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index 3e87022f..bd1d0c6b 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -25,6 +25,10 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     paddingLeft: 12,
     paddingRight: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
   },
   bottom: {
     flex: 1,
diff --git a/src/queries/authors.tsx b/src/queries/authors.tsx
new file mode 100644
index 00000000..5d8e5dbf
--- /dev/null
+++ b/src/queries/authors.tsx
@@ -0,0 +1,33 @@
+import { Author, StoryPreview } from './types';
+import supabase from '../utils/supabase';
+
+export async function fetchAuthor(authorID: number): Promise<Author> {
+  const { data, error } = await supabase
+    .from('authors')
+    .select('*')
+    .eq('id', authorID);
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch author information:' ${error}`,
+    );
+  } else {
+    return data[0] as unknown as Author;
+  }
+}
+
+export async function fetchAuthorStoryPreviews(
+  author_id: number,
+): Promise<StoryPreview[]> {
+  const { data, error } = await supabase.rpc('fetch_author_story_previews', {
+    input_author_id: author_id,
+  });
+  if (error) {
+    throw new Error(
+      `An error occured when trying to fetch all author story previews: ${error}`,
+    );
+  } else {
+    return data;
+  }
+}
diff --git a/src/queries/genres.tsx b/src/queries/genres.tsx
new file mode 100644
index 00000000..01be5f74
--- /dev/null
+++ b/src/queries/genres.tsx
@@ -0,0 +1,14 @@
+import { Genre } from './types';
+import supabase from '../utils/supabase';
+
+export async function fetchGenres(): Promise<Genre[]> {
+  const { data, error } = await supabase.rpc('fetch_subgenres');
+  console.log('TESTING SUPABASE QUERY OUTPUT:', data);
+  if (error) {
+    throw new Error(
+      `An error occured when trying to fetch all author story previews: ${error}`,
+    );
+  } else {
+    return data;
+  }
+}
diff --git a/src/queries/types.tsx b/src/queries/types.tsx
index 24808d20..c40ac039 100644
--- a/src/queries/types.tsx
+++ b/src/queries/types.tsx
@@ -11,6 +11,15 @@ export interface StoryPreview {
   genre_medium: string[];
 }
 
+export interface Author {
+  id: number;
+  name: string;
+  pronouns: string;
+  bio: string;
+  artist_statement: string;
+  image: string;
+}
+
 export interface Story {
   id: number;
   date: string;
@@ -34,3 +43,14 @@ export interface StoryCard {
   author_name: string;
   featured_media: string;
 }
+
+export interface Subgenre {
+  id: number;
+  name: string;
+}
+
+export interface Genre {
+  parent_id: number;
+  parent_name: string;
+  subgenres: Subgenre[];
+}
diff --git a/tsconfig.json b/tsconfig.json
index b9567f60..a0863d0f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "jsx": "react-jsx"
   }
 }