diff --git a/packages/app/src/components/StewardsList.tsx b/packages/app/src/components/StewardsList.tsx
index 85fd7fe5..cf5c5b84 100644
--- a/packages/app/src/components/StewardsList.tsx
+++ b/packages/app/src/components/StewardsList.tsx
@@ -1,10 +1,8 @@
 import { Image, Text, View, StyleSheet } from 'react-native';
 import { InterRegular, InterSemiBold } from '../utils/webFonts';
 import { StewardBlueIcon, StewardGreenIcon, VerifiedIconUri } from '../@constants/ColorTypeIcons';
-// import { NoAvatarIcon } from '../@constants/EmptyPicture';
 import { useLocation } from 'react-router-native';
 import { Colors } from '../utils/colors';
-import profilePictureArray from '../@constants/pfps';
 import { useMediaQuery } from 'native-base';
 
 const placeholderUsers = [0, 1, 2, 3, 4, 5, 6];
@@ -12,7 +10,7 @@ const placeholderUsers = [0, 1, 2, 3, 4, 5, 6];
 interface StewardListProps {
   hideTitle?: boolean;
   imageUrl?: string;
-  listType: string;
+  listType: 'viewCollective' | 'viewStewards';
   stewardData: {
     username: string;
     actions?: number;
@@ -30,24 +28,25 @@ function StewardList({ imageUrl, listType, stewardData, stewards, hideTitle }: S
   return (
     <View style={styles.stewardsHeader}>
       {!hideTitle && (
-        <View style={styles.row}>
-          {/* {listType !== 'steward' && <Image source={{ uri: StewardGreenIcon }} style={styles.firstIcon} />}
-          {listType === 'steward' && <Image source={{ uri: StewardBlueIcon }} style={styles.firstIcon} />} */}
-          <Text style={styles.title}>Stewards {`(0)`}</Text>
+        <View style={[styles.row, { marginBottom: 24 }]}>
+          {listType === 'viewCollective' && <Image source={{ uri: StewardGreenIcon }} style={styles.titleIcon} />}
+          <Text style={styles.title}>Stewards{listType === 'viewCollective' ? ` (0)` : ''}</Text>
+          {listType === 'viewStewards' && <Image source={{ uri: StewardBlueIcon }} style={styles.titleIcon} />}
         </View>
       )}
       <View style={styles.list}>
-        {listType == 'steward' &&
-          (isDesktopResolution ? placeholderUsers.slice(0, 6) : placeholderUsers.slice(0, 5)).map((item) => (
-            <View style={styles.row}>
-              <Image source={null as any} style={styles.rowImg} />
-              <Text style={styles.title}>
-                {stewardData.username}{' '}
-                {stewardData.isVerified && <Image source={{ uri: VerifiedIconUri }} style={styles.verifiedIcon} />}
-              </Text>
-              {stewardData.actions && <Text style={styles.totalActions}>{stewardData.actions} actions</Text>}
-            </View>
-          ))}
+        {(isDesktopResolution ? placeholderUsers.slice(0, 6) : placeholderUsers.slice(0, 5)).map((item) => (
+          <View style={styles.row} key={item.toString()}>
+            <Image source={{ uri: StewardBlueIcon }} style={styles.rowImg} />
+            <Text style={styles.title}>
+              {stewardData.username}{' '}
+              {stewardData.isVerified && <Image source={{ uri: VerifiedIconUri }} style={styles.verifiedIcon} />}
+            </Text>
+            {listType === 'viewStewards' && stewardData.actions && (
+              <Text style={styles.totalActions}>{stewardData.actions} actions</Text>
+            )}
+          </View>
+        ))}
       </View>
     </View>
   );
@@ -55,14 +54,16 @@ function StewardList({ imageUrl, listType, stewardData, stewards, hideTitle }: S
 
 const styles = StyleSheet.create({
   stewardsHeader: { flex: 1 },
-  firstIcon: {
+  titleIcon: {
     height: 32,
     width: 32,
+    marginRight: 8,
   },
   rowImg: {
     height: 48,
     width: 48,
-    borderRadius: 26,
+    borderRadius: 24,
+    marginRight: 16,
   },
   verifiedIcon: {
     height: 16,
@@ -87,7 +88,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     ...InterSemiBold,
-    marginLeft: 16,
     width: '100%',
     color: Colors.black,
   },
diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
index 2d75a2f3..b81c624c 100644
--- a/packages/app/src/components/ViewCollective.tsx
+++ b/packages/app/src/components/ViewCollective.tsx
@@ -1,7 +1,5 @@
-import { useCallback } from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 import { useState } from 'react';
-// import oceanUri from '../@constants/SafariImagePlaceholder';
 import RowItem from './RowItem';
 import RoundedButton from './RoundedButton';
 import StewardList from './StewardsList';
@@ -18,21 +16,19 @@ import { Colors } from '../utils/colors';
 import { Link, useMediaQuery } from 'native-base';
 import Breadcrumb from './Breadcrumb';
 import { formatTime } from '../hooks/functions/formatTime';
-import { formatAmount } from '../hooks/functions/formatUsdAmount';
 
 interface ViewCollectiveProps {
-  imageUrl?: any;
-  title?: any;
+  imageUrl?: string;
+  title?: string;
   description?: string;
-  stewardsDesc?: any;
-  creationDate?: any;
-  stewardsPaid?: any;
-  paymentsMade?: any;
-  donationsReceived?: any;
-  totalPaidOut?: any;
-  currentPool?: any;
-  route?: any;
-
+  stewardsDesc?: string;
+  creationDate?: number;
+  stewardsPaid?: number;
+  paymentsMade?: number;
+  donationsReceived?: number;
+  totalPaidOut?: number;
+  currentPool?: number;
+  route?: string;
   stewards?: {};
   recentTransactions?: {};
   isDonating: boolean;
@@ -60,27 +56,27 @@ function ViewCollective({
   const [isDesktopResolution] = useMediaQuery({
     minWidth: 612,
   });
+  // TODO: need actual token price
   const tokenPrice = 0.00018672442844237;
-  const formattedDonations: any = (donationsReceived / 10 ** 18).toFixed(3);
-  const usdValue = tokenPrice * formattedDonations;
-  const renderDonorsButton = useCallback(
-    () =>
-      isDesktopResolution ? (
-        <></>
-      ) : (
-        <RoundedButton
-          title="See all donors"
-          backgroundColor={Colors.purple[100]}
-          color={Colors.purple[200]}
-          fontSize={18}
-          seeType={true}
-          onPress={() => {
-            navigate(`/collective/${route}/donors`);
-          }}
-        />
-      ),
-    [navigate, isDesktopResolution, route]
-  )();
+  const decimalDonations = (donationsReceived ?? 0) / 10 ** 18;
+  const formattedDonations: string = decimalDonations.toFixed(3);
+  const usdValue = tokenPrice * decimalDonations;
+
+  const renderDonorsButton = () =>
+    isDesktopResolution ? (
+      <></>
+    ) : (
+      <RoundedButton
+        title="See all donors"
+        backgroundColor={Colors.purple[100]}
+        color={Colors.purple[200]}
+        fontSize={18}
+        seeType={true}
+        onPress={() => {
+          navigate(`/collective/${route}/donors`);
+        }}
+      />
+    );
 
   if (isDesktopResolution) {
     return (
@@ -143,7 +139,7 @@ function ViewCollective({
                           console.log(stopDonationModal);
                         }}
                       />
-                      {renderDonorsButton}
+                      {renderDonorsButton()}
                     </View>
                   </View>
                 ) : (
@@ -158,7 +154,7 @@ function ViewCollective({
                         navigate(`/donate/${route}`);
                       }}
                     />
-                    {renderDonorsButton}
+                    {renderDonorsButton()}
                   </View>
                 )}
               </View>
@@ -167,16 +163,12 @@ function ViewCollective({
             <View style={styles.collectiveDesktopTimeline}>
               <View style={{ flex: 1 }}>
                 <RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(creationDate as any)} />
-                <RowItem
-                  imageUrl={StewardGreenIcon}
-                  rowInfo="Stewards Paid"
-                  rowData={stewardsPaid?.length ? stewardsPaid : 0}
-                />
+                <RowItem imageUrl={StewardGreenIcon} rowInfo="Stewards Paid" rowData={stewardsPaid ?? 0} />
 
                 <RowItem
                   imageUrl={GreenListIcon}
                   rowInfo="# of Payments Made"
-                  rowData={paymentsMade?.length ? paymentsMade : 0}
+                  rowData={paymentsMade ?? 0}
                   currency=""
                 />
               </View>
@@ -199,28 +191,20 @@ function ViewCollective({
                   />
                 )}
 
-                {totalPaidOut.length ? (
-                  <RowItem
-                    imageUrl={SendIcon}
-                    rowInfo="Total Paid Out"
-                    rowData={totalPaidOut}
-                    currency="G$"
-                    balance={0.00018672442844237 * totalPaidOut}
-                  />
-                ) : (
-                  <RowItem imageUrl={SendIcon} rowInfo="Total Paid Out" rowData={0} currency="G$" balance={0} />
-                )}
-                {currentPool.length ? (
-                  <RowItem
-                    imageUrl={SquaresIcon}
-                    rowInfo="Current Pool"
-                    rowData={currentPool}
-                    currency="G$"
-                    balance={0.00018672442844237 * currentPool}
-                  />
-                ) : (
-                  <RowItem imageUrl={SquaresIcon} rowInfo="Current Pool" rowData={0} currency="G$" balance={0} />
-                )}
+                <RowItem
+                  imageUrl={SendIcon}
+                  rowInfo="Total Paid Out"
+                  rowData={totalPaidOut ?? 0}
+                  currency="G$"
+                  balance={tokenPrice * (totalPaidOut ?? 0)}
+                />
+                <RowItem
+                  imageUrl={SquaresIcon}
+                  rowInfo="Current Pool"
+                  rowData={currentPool ?? 0}
+                  currency="G$"
+                  balance={tokenPrice * (currentPool ?? 0)}
+                />
               </View>
             </View>
           </View>
@@ -233,7 +217,7 @@ function ViewCollective({
                   isVerified: null as any,
                   actions: null as any,
                 }}
-                listType="steward"
+                listType="viewCollective"
               />
               <RoundedButton
                 title="See all stewards"
@@ -297,40 +281,32 @@ function ViewCollective({
           <RowItem
             imageUrl={StewardGreenIcon}
             rowInfo="Stewards Paid"
-            rowData={stewardsPaid?.length ? stewardsPaid : 0}
+            rowData={stewardsPaid ?? 0}
             currency="G$"
-            balance={stewardsPaid?.length ? 0.00018672442844237 * stewardsPaid : 0}
-          />
-          <RowItem
-            imageUrl={GreenListIcon}
-            rowInfo="# of Payments Made"
-            rowData={paymentsMade?.length ? paymentsMade : 0}
-            currency=""
+            balance={tokenPrice * (stewardsPaid ?? 0)}
           />
+          <RowItem imageUrl={GreenListIcon} rowInfo="# of Payments Made" rowData={paymentsMade ?? 0} currency="" />
           <RowItem
             imageUrl={ReceiveLightIcon}
             rowInfo="Total Donations Received"
-            rowData={donationsReceived?.length ? donationsReceived : 0}
+            rowData={donationsReceived ?? 0}
             currency="G$"
-            balance={donationsReceived?.length ? 0.00018672442844237 * donationsReceived : 0}
+            balance={tokenPrice * (donationsReceived ?? 0)}
           />
           <RowItem
             imageUrl={SendIcon}
             rowInfo="Total Paid Out"
-            rowData={totalPaidOut?.length ? totalPaidOut : 0}
+            rowData={totalPaidOut ?? 0}
             currency="G$"
-            balance={totalPaidOut?.length ? 0.00018672442844237 * totalPaidOut : 0}
+            balance={tokenPrice * (totalPaidOut ?? 0)}
           />
           <RowItem
             imageUrl={SquaresIcon}
             rowInfo="Current Pool"
-            rowData={currentPool?.length ? currentPool : 0}
+            rowData={currentPool ?? 0}
             currency="G$"
-            balance={currentPool?.length ? 0.00018672442844237 * currentPool : 0}
+            balance={tokenPrice * (currentPool ?? 0)}
           />
-          In this code, we're checking if each of the values (donationsReceived, totalPaidOut, and currentPool) is
-          truthy (not null or undefined) before rendering the corresponding section. If the value is truthy, it will use
-          the actual value; otherwise, it will use 0 as the default value.
         </View>
 
         {isDonating ? (
@@ -350,7 +326,7 @@ function ViewCollective({
                   console.log(stopDonationModal);
                 }}
               />
-              {renderDonorsButton}
+              {renderDonorsButton()}
             </View>
           </View>
         ) : (
@@ -365,7 +341,7 @@ function ViewCollective({
                 navigate(`/donate/${route}`);
               }}
             />
-            {renderDonorsButton}
+            {renderDonorsButton()}
           </View>
         )}
       </View>
@@ -377,7 +353,7 @@ function ViewCollective({
             isVerified: true,
             actions: 730,
           }}
-          listType="steward"
+          listType="viewCollective"
         />
         <RoundedButton
           title="See all stewards"
@@ -413,7 +389,7 @@ function ViewCollective({
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    padding: 24,
+    padding: 16,
     backgroundColor: Colors.white,
     gap: 24,
     shadowColor: Colors.black,
diff --git a/packages/app/src/pages/ViewCollectivePage.tsx b/packages/app/src/pages/ViewCollectivePage.tsx
index 079a9b2b..733b4858 100644
--- a/packages/app/src/pages/ViewCollectivePage.tsx
+++ b/packages/app/src/pages/ViewCollectivePage.tsx
@@ -38,29 +38,27 @@ function ViewCollectivePage() {
 
   return (
     <Layout>
-      <>
-        {isLoading ? (
-          <p>Loading...</p>
-        ) : (
-          subData?.map((t: any, index: number) => (
-            <ViewCollective
-              key={index}
-              imageUrl={oceanUri}
-              title={t.name}
-              description={t.description}
-              stewardsDesc={t.description}
-              creationDate={t.time}
-              stewardsPaid={28}
-              paymentsMade={374900}
-              donationsReceived={t.contributions}
-              totalPaidOut={299920000}
-              currentPool={381000}
-              isDonating={false}
-              route={t.id}
-            />
-          ))
-        )}
-      </>
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        subData?.map((t: any) => (
+          <ViewCollective
+            key={t.id}
+            imageUrl={oceanUri}
+            title={t.name}
+            description={t.description}
+            stewardsDesc={t.description}
+            creationDate={t.time}
+            stewardsPaid={28}
+            paymentsMade={374900}
+            donationsReceived={t.contributions}
+            totalPaidOut={299920000}
+            currentPool={381000}
+            isDonating={false}
+            route={t.id}
+          />
+        ))
+      )}
     </Layout>
   );
 }
diff --git a/packages/app/src/pages/ViewStewardsPage.tsx b/packages/app/src/pages/ViewStewardsPage.tsx
index 2021b280..037e4114 100644
--- a/packages/app/src/pages/ViewStewardsPage.tsx
+++ b/packages/app/src/pages/ViewStewardsPage.tsx
@@ -36,7 +36,7 @@ function ViewStewardsPage() {
                 isVerified: true,
                 actions: 730,
               }}
-              listType="steward"
+              listType="viewStewards"
             />
             {/* Repeat StewardList component for other items */}
           </View>
@@ -60,7 +60,7 @@ function ViewStewardsPage() {
                 isVerified: true,
                 actions: 730,
               }}
-              listType="steward"
+              listType="viewStewards"
             />
           </View>
         </View>