diff --git a/app.json b/app.json
index 61698d5..ccd26b6 100644
--- a/app.json
+++ b/app.json
@@ -7,6 +7,7 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
+    "jsEngine": "hermes",
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
diff --git a/app/components/EnvironmentCard.tsx b/app/components/EnvironmentCard.tsx
index f952ce4..a389b1a 100644
--- a/app/components/EnvironmentCard.tsx
+++ b/app/components/EnvironmentCard.tsx
@@ -1,19 +1,43 @@
-import { View, StyleSheet, Text, Pressable } from "react-native";
+import { View, Text, StyleSheet } from 'react-native';
 
+interface EnvironmentCardProps {
+  name: string;
+  publicUrl: string;
+  status: number;
+  url: string;
+}
 
-export default function EnvironmentCard() {
-    return (
-        <Pressable onPress={() => console.log('Environment card pressed')} style={styles.container}>
-            <Text>I'm pressable!</Text>
-        </Pressable>
-    );
+export default function EnvironmentCard({ name, publicUrl, status, url }: EnvironmentCardProps) {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{name}</Text>
+      {publicUrl && <Text>Public URL: {publicUrl}</Text>}
+      {status === 1 && <Text>Status: Running</Text>}
+      {status === 2 && <Text>Status: Stopped</Text>}
+      {status === 3 && <Text>Status: Pending</Text>}
+      <Text>URL: {url}</Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        backgroundColor: '#fff',
-        padding: 16,
-        margin: 8,
-        borderRadius: 8,
+  card: {
+    backgroundColor: 'white',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
 });
\ No newline at end of file
diff --git a/app/index.tsx b/app/index.tsx
index 74eb8d2..63b4d3a 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -6,10 +6,16 @@ import LoginForm from "./components/LoginForm";
 import LogoutButton from "./components/LogoutButton";
 import EnvironmentCard from "./components/EnvironmentCard";
 
-
 import { AuthProvider } from "./context/AuthContext";
 import { useAuth } from "./context/AuthContext";
 
+interface Environment {
+  Name: string;
+  PublicURL: string;
+  Status: number;
+  URL: string;
+}
+
 export default function Index() {
   return (
 
@@ -23,7 +29,7 @@ export default function Index() {
 
 function MainContent() {
   const { isAuthenticated, domain, username, authData } = useAuth();
-  const [environmentData, setEnvironmentData] = useState(null);
+  const [environmentData, setEnvironmentData] = useState<Environment[] | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
@@ -60,12 +66,20 @@ function MainContent() {
 
   return (
     <SafeAreaProvider>
-    <SafeAreaView style={{ flex: 1, padding: 16, width: '100%' }}>
-    <ScrollView>
-        <EnvironmentCard/>
-      </ScrollView>
-    </SafeAreaView>
-    <LogoutButton />
+      <SafeAreaView style={{ flex: 1, padding: 16, width: '100%' }}>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {environmentData && environmentData.map((environment, index) => (
+            <EnvironmentCard
+              key={index}
+              name={environment.Name}
+              publicUrl={environment.PublicURL}
+              status={environment.Status}
+              url={environment.URL}
+            />
+          ))}
+        </ScrollView>
+      </SafeAreaView>
+      <LogoutButton />
     </SafeAreaProvider>
   );
 }