diff --git a/components/Global/helpers/icon-card.tsx b/components/Global/helpers/icon-card.tsx
index fea3cd55..dfdeeefa 100644
--- a/components/Global/helpers/icon-card.tsx
+++ b/components/Global/helpers/icon-card.tsx
@@ -6,11 +6,13 @@ import Icon from "./icon";
 export default function IconCard({ 
     name, 
     onPress,
+    width,
     caption,
     subCaption,
  }: { 
     name: string, 
     onPress: () => void,
+    width?: number | undefined,
     caption?: string | undefined,
     subCaption?: string | undefined
 }) : React.JSX.Element {
@@ -26,8 +28,8 @@ export default function IconCard({
                 animation="bouncy"
                 hoverStyle={{ scale: 0.925 }}
                 pressStyle={{ scale: 0.875 }}
-                width={150}
-                height={150}
+                width={width ? width : 150}
+                height={width ? width : 150}
                 onPress={onPress}
             >
                 <Card.Header>
diff --git a/components/Library/screens/index.tsx b/components/Library/screens/index.tsx
index 3cbdbb0a..482692d5 100644
--- a/components/Library/screens/index.tsx
+++ b/components/Library/screens/index.tsx
@@ -1,5 +1,5 @@
 import { FlatList } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
 import Categories from "./categories";
 import IconCard from "@/components/Global/helpers/icon-card";
 import { StackParamList } from "@/components/types";
@@ -13,15 +13,20 @@ export default function LibraryScreen({
     route: RouteProp<StackParamList, "Library">,
     navigation: NativeStackNavigationProp<StackParamList>
 }): React.JSX.Element {
+
+    const { width } = useSafeAreaFrame();
+
     return (
-        <SafeAreaView>
+        <SafeAreaView edges={["top", "right", "left"]}>
             <FlatList
+                contentInsetAdjustmentBehavior="automatic"
                 data={Categories}
                 numColumns={2}
                 renderItem={({ index, item }) => {
                     return (
                         <IconCard 
                             name={item.iconName}
+                            width={width / 2.1}
                             onPress={() => {
                                 navigation.navigate(item.name)
                             }}