diff --git a/dfm-sideline-sidekick-app/App.tsx b/dfm-sideline-sidekick-app/App.tsx
index aa7b3df..4a84b92 100644
--- a/dfm-sideline-sidekick-app/App.tsx
+++ b/dfm-sideline-sidekick-app/App.tsx
@@ -14,8 +14,9 @@ import { BottomNavBar, NavItem } from "./components/bar";
 import BookmarkPage from "./pages/BookmarkPage";
 import ConditionsSection from "./pages/ConditionsSection";
 import SearchPage from "./pages/SearchPage";
-import TabPage from "./pages/TabPage";
+// import TabPage from "./pages/TabPage";
 import GeneralPrinciples from "./pages/generalPrinciples";
+import GeneralPrinciplesMain from "./pages/generalPrinciplesMain";
 
 type DocumentBase = {
   _id: string;
@@ -29,6 +30,7 @@ type DocumentBase = {
 type RootStackParamList = {
   Bookmark: undefined;
   Search: undefined;
+  GPM: undefined;
   Tab: undefined;
   MedicalConditions: { emergency: DocumentBase };
   GeneralPrinciples: { contentProp: DocumentBase };
@@ -62,7 +64,7 @@ const BottomNavBarComponent = () => {
       routeName: "Principles",
       icon: "principles",
       onClick: () => {
-        navigation.navigate("Tab");
+        navigation.navigate("GPM");
       },
     },
   ];
@@ -78,7 +80,11 @@ export default function App() {
         <Stack.Navigator initialRouteName="Search">
           <Stack.Screen name="Bookmark" component={BookmarkPage} options={{ headerShown: false }} />
           <Stack.Screen name="Search" component={SearchPage} options={{ headerShown: false }} />
-          <Stack.Screen name="Tab" component={TabPage} options={{ headerShown: false }} />
+          <Stack.Screen
+            name="GPM"
+            component={GeneralPrinciplesMain}
+            options={{ headerShown: false }}
+          />
           <Stack.Screen
             name="MedicalConditions"
             component={ConditionsSection}
diff --git a/dfm-sideline-sidekick-app/assets/fonts/Roboto-Medium.ttf b/dfm-sideline-sidekick-app/assets/fonts/Roboto-Medium.ttf
new file mode 100644
index 0000000..8798341
Binary files /dev/null and b/dfm-sideline-sidekick-app/assets/fonts/Roboto-Medium.ttf differ
diff --git a/dfm-sideline-sidekick-app/pages/SearchPage.tsx b/dfm-sideline-sidekick-app/pages/SearchPage.tsx
index f72b2ba..5ec01c1 100644
--- a/dfm-sideline-sidekick-app/pages/SearchPage.tsx
+++ b/dfm-sideline-sidekick-app/pages/SearchPage.tsx
@@ -20,9 +20,14 @@ type DocumentBase = {
   content?: object;
 };
 
+type SearchPageProps = {
+  onPage: boolean;
+  setShowing?: (param: boolean) => void;
+};
+
 type ConditionsNavigationProp = StackNavigationProp<RootStackParamList, "Conditions">;
 
-const SearchPage: React.FC = () => {
+const SearchPage: React.FC<SearchPageProps> = ({ onPage = true, setShowing }) => {
   const [query, setQuery] = useState<string>("");
   const [filteredDocuments, setFilteredDocuments] = useState<DocumentBase[]>([]);
   const [recentSearches, setRecentSearches] = useState<DocumentBase[]>([]);
@@ -100,6 +105,10 @@ const SearchPage: React.FC = () => {
     if (inputRef.current !== null) {
       inputRef.current.blur();
     }
+    if (setShowing !== undefined) {
+      setShowing(false);
+      return;
+    }
     if (navigation.canGoBack()) {
       navigation.goBack();
     } else {
@@ -116,56 +125,63 @@ const SearchPage: React.FC = () => {
         onClear={clearInput}
         onCancel={cancelSearch}
         inputRef={inputRef}
-        isFocused={true}
+        isFocused={onPage}
+        onFocus={() => {
+          if (setShowing !== undefined) {
+            setShowing(true);
+          }
+        }}
       />
-      <View>
-        {query.length === 0 ? (
-          <>
-            <Text style={styles.subtitle}>Recent</Text>
-            <FlatList
-              data={recentSearches}
-              keyExtractor={(item) => item._id}
-              ItemSeparatorComponent={() => <View style={styles.divider} />}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles.listItemContainer}
-                  onPress={() => {
-                    handlePress(item);
-                  }}
-                >
-                  <View style={styles.listItemTextContainer}>
-                    <Text style={styles.recentItemTitle}>{item.title}</Text>
-                    <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
-                  </View>
-                  <Icon name="chevron-right" size={20} color="#909090" />
-                </TouchableOpacity>
-              )}
-            />
-          </>
-        ) : (
-          <View style={styles.resultList}>
-            <FlatList
-              data={filteredDocuments}
-              keyExtractor={(item) => item._id}
-              ItemSeparatorComponent={() => <View style={styles.divider} />}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles.listItemContainer}
-                  onPress={() => {
-                    handlePress(item);
-                  }}
-                >
-                  <View style={styles.listItemTextContainer}>
-                    <Text style={styles.listItemTitle}>{highlightText(item.title, query)}</Text>
-                    <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
-                  </View>
-                  <Icon name="chevron-right" size={20} color="#909090" />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        )}
-      </View>
+      {onPage && (
+        <View>
+          {query.length === 0 ? (
+            <>
+              <Text style={styles.subtitle}>Recent</Text>
+              <FlatList
+                data={recentSearches}
+                keyExtractor={(item) => item._id}
+                ItemSeparatorComponent={() => <View style={styles.divider} />}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    style={styles.listItemContainer}
+                    onPress={() => {
+                      handlePress(item);
+                    }}
+                  >
+                    <View style={styles.listItemTextContainer}>
+                      <Text style={styles.recentItemTitle}>{item.title}</Text>
+                      <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
+                    </View>
+                    <Icon name="chevron-right" size={20} color="#909090" />
+                  </TouchableOpacity>
+                )}
+              />
+            </>
+          ) : (
+            <View style={styles.resultList}>
+              <FlatList
+                data={filteredDocuments}
+                keyExtractor={(item) => item._id}
+                ItemSeparatorComponent={() => <View style={styles.divider} />}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    style={styles.listItemContainer}
+                    onPress={() => {
+                      handlePress(item);
+                    }}
+                  >
+                    <View style={styles.listItemTextContainer}>
+                      <Text style={styles.listItemTitle}>{highlightText(item.title, query)}</Text>
+                      <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
+                    </View>
+                    <Icon name="chevron-right" size={20} color="#909090" />
+                  </TouchableOpacity>
+                )}
+              />
+            </View>
+          )}
+        </View>
+      )}
     </View>
   );
 };
diff --git a/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx b/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx
index 63fa8b3..39454f4 100644
--- a/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx
+++ b/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx
@@ -1,24 +1,35 @@
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
+
+const { width, height } = Dimensions.get("window");
+const minDimension = Math.min(width, height);
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 17.5,
-    paddingTop: 50,
+    paddingHorizontal: width * 0.05, // 5% of screen width/height
+    paddingTop: height * 0.06927, // ~7% of screen width/height
   },
   listItemContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingVertical: 15,
+    paddingVertical: height * 0.015, // 1.5% of screen width/height
+    //paddingHorizontal: width * 0.005, // 4% of screen width/height
+  },
+  cancelButton: {
+    paddingLeft: width * 0.02, // 2% of screen width/height
+    marginBottom: height * 0.008, // 0.8% of screen width/height
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "visible",
   },
   listItemTextContainer: {
     flex: 1,
-    marginRight: 30,
+    //marginRight: 30,
   },
   listItemTitle: {
-    fontSize: 18,
+    fontSize: 18, //minDimension * 0.06, // 6% of screen width/height
     fontWeight: "500",
-    paddingBottom: 10,
+    paddingBottom: height * 0.012, // 1.2% of screen width/height
   },
   recentItemTitle: {
     color: "#484848",
@@ -27,32 +38,57 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   listItemSubtitle: {
-    fontSize: 13,
+    fontSize: 13, //minDimension * 0.035, // 3.5% of screen width/height
     color: "grey",
   },
+  subtitle: {
+    color: "#182B49",
+    fontSize: 18,
+    fontFamily: "Roboto",
+    fontWeight: "500",
+    paddingTop: 15,
+  },
   divider: {
     height: 1,
     backgroundColor: "lightgrey",
-    marginVertical: 10,
+    //marginHorizontal: width * 0.04, // 4% of screen width/height
+    marginVertical: height * 0.01, // 1% of screen width/height
   },
   title: {
     color: "#182B49",
-    fontSize: 28,
-    fontFamily: "Roboto",
+    fontSize: 28, //minDimension * 0.1, // 10% of screen width/height
     fontWeight: "700",
-    marginBottom: 20,
+    marginBottom: height * 0.02, // 2% of screen width/height
     textAlign: "left",
-    paddingTop: 10,
+    paddingTop: height * 0.007, // 0.7% of screen width/height
+    fontFamily: "Roboto-Regular",
   },
-  subtitle: {
-    color: "#182B49",
-    fontSize: 18,
-    fontFamily: "Roboto",
-    fontWeight: "500",
-    paddingTop: 15,
+  searchContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  searchSection: {
+    flexDirection: "row",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(0, 0, 0, 0.4)",
+    borderRadius: minDimension * 0.02, // 2% of screen width
+    margin: 0,
+    marginBottom: height * 0.01, // 1% of screen height
+  },
+  searchIcon: {
+    padding: minDimension * 0.02, // 2% of screen width
+  },
+  input: {
+    flex: 1,
+    paddingVertical: height * 0.01, // 1% of screen height
+    color: "#424242",
   },
   itemTitle: {
-    padding: 10,
+    padding: minDimension * 0.02, // 2% of screen height/width
   },
   highlightedText: {
     color: "#00629B",
@@ -61,4 +97,5 @@ const styles = StyleSheet.create({
     paddingBottom: 350,
   },
 });
+
 export default styles;
diff --git a/dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx b/dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx
new file mode 100644
index 0000000..4a5b86a
--- /dev/null
+++ b/dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx
@@ -0,0 +1,74 @@
+import * as Font from "expo-font";
+import React, { useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+
+import SearchPage from "./SearchPage";
+import styles from "./generalPrinciplesMainStyles";
+
+const GeneralPrinciplesMain = () => {
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(false);
+  const [searchShowing, setSearchShowing] = useState(false);
+
+  React.useEffect(() => {
+    async function loadFont() {
+      try {
+        await Font.loadAsync({
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Medium": require("../assets/fonts/Roboto-Medium.ttf"),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Bold": require("../assets/fonts/Roboto-Bold.ttf"),
+        });
+        setFontsLoaded(true);
+      } catch (error) {
+        console.error("Error loading fonts:", error);
+      }
+    }
+
+    void loadFont();
+  }, []);
+
+  if (!fontsLoaded) {
+    return <Text>Loading...</Text>;
+  }
+
+  const renderPressables = () => {
+    const pressableData = [
+      ["Emergency Action Plan", "Trauma Centers"],
+      ["Burn Centers", "Stroke Centers"],
+      ["Inclement Weather", "Serious On-Field Injury"],
+      ["Catastrophic Incident", "Administering Medication"],
+      ["Muscle Injuries", "Ligament Injuries"],
+      ["Dislocations/Subluxations", "Fractures"],
+    ];
+
+    return pressableData.map((row, index) => (
+      <View key={index} style={styles.row}>
+        {row.map((label, colIndex) => (
+          <Pressable key={`${index}-${colIndex}`} style={styles.pressable}>
+            <Text style={styles.pressableText} numberOfLines={0}>
+              {label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+    ));
+  };
+
+  return (
+    <View>
+      <SearchPage onPage={searchShowing} setShowing={setSearchShowing} />
+      {!searchShowing && (
+        <ScrollView alwaysBounceHorizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
+          <View style={styles.container}>
+            <View style={styles.subheader}>
+              <Text style={styles.subheaderText}>Browse by Category</Text>
+            </View>
+            <View style={styles.grid}>{renderPressables()}</View>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+export default GeneralPrinciplesMain;
diff --git a/dfm-sideline-sidekick-app/pages/generalPrinciplesMainStyles.tsx b/dfm-sideline-sidekick-app/pages/generalPrinciplesMainStyles.tsx
new file mode 100644
index 0000000..6a71661
--- /dev/null
+++ b/dfm-sideline-sidekick-app/pages/generalPrinciplesMainStyles.tsx
@@ -0,0 +1,79 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+const { width, height } = Dimensions.get("screen");
+const minDimension = Math.min(width, height);
+let pressableRatio = 0;
+
+// Calculate border radius and padding based on device dimensions
+//const borderRadius = (10.75 / 130) * Math.min(width, height);
+// const padding = 0.025 * Math.min(width, height);
+//
+//iPad = 0.3
+//phone=0.45
+
+//if (deviceWidth < deviceHeight): then ratio = 0.45
+//if (deviceHeight < deviceWidth): then ratio = 0.3
+const borderRadius = 0.035 * minDimension;
+
+if (width > height) {
+  pressableRatio = 0.3;
+} else {
+  pressableRatio = 0.5;
+}
+
+// Get the width of the device screen
+// const screenWidth = Dimensions.get("window").width;
+
+// // Calculate the number of columns based on the screen width
+// const numColumns = Math.floor(screenWidth / 140); // Adjust the width of Pressable components
+
+// // Calculate the width of each Pressable component
+// const pressableWidth = screenWidth / numColumns;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "column",
+    paddingBottom: 0.42 * height, //Give user leeway for optimal scroll space
+    // padding - We should not apply padding here as per Figma specification
+  },
+  subheader: {
+    justifyContent: "center", // Center the text vertically
+    // alignItems: "center", // Center the text horizontally
+    paddingLeft: (16 / 390) * width,
+    paddingVertical: (10 / 930.25) * height,
+  },
+  subheaderText: {
+    color: "#182b49",
+    fontFamily: "Roboto-Medium",
+    fontSize: 18, //0.05 * minDimension,
+    fontWeight: "500",
+  },
+  grid: {
+    flexDirection: "column",
+    // alignItems: "space-evenly",
+    justifyContent: "space-between", // Adjust this as per your spacing requirements
+  },
+  row: {
+    flexDirection: "row",
+    // alignItems: "flex-start",
+    justifyContent: "space-evenly", // Adjust this as per your spacing requirements
+    marginBottom: (10 / 930.25) * height, // Add margin to separate rows
+  },
+  pressable: {
+    backgroundColor: "#00629b",
+    borderColor: "#00000033",
+    borderRadius,
+    width: (170 / 390.0) * width, //uses Figma measurements to set a width
+    height: pressableRatio * (170 / 390.0) * width, //aspect ratio applied to width to set a height
+  },
+  pressableText: {
+    fontFamily: "Roboto-Bold",
+    fontSize: 0.049 * minDimension,
+    textAlignVertical: "top",
+    color: "#ffffff",
+    paddingHorizontal: (13.98 / (1 * 390)) * width, //Figma measurements for padding horizontal
+    paddingVertical: (15.06 / (1 * 930.25)) * height, //Figma measurements for padding vertical
+  },
+});
+
+export default styles;