diff --git a/app/_layout.tsx b/app/_layout.tsx
index d2a8b0b..2608639 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,5 +1,9 @@
 import { Stack } from "expo-router";
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
 }
diff --git a/app/index.tsx b/app/index.tsx
index 866b635..8ebbffe 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,15 +1,79 @@
-import { Text, View } from "react-native";
+import { Link } from "expo-router";
+import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
+import { styles } from "./styles";
+
+// Placeholder images - replace with actual local images!
+const netherImage = {
+  uri: "https://s1.qwant.com/thumbr/474x248/2/4/a24db6c90af628d74cc6f90c2a9c710035c23f71bbe60306da8c15048e3f0a/OIP.joos3K71NDyUnFa8KyqxmwHaD4.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.joos3K71NDyUnFa8KyqxmwHaD4%3Fpid%3DApi&q=0&b=1&p=0&a=0",
+};
+const todoImage = {
+  uri: "https://s1.qwant.com/thumbr/474x266/9/3/2f1096a5a780b8a5170c7f33984b1862d42724cdb70096f40df193dd4b8f76/OIP.KbL45cxF3QbBxlw-0fl2mQHaEK.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.KbL45cxF3QbBxlw-0fl2mQHaEK%3Fpid%3DApi&q=0&b=1&p=0&a=0",
+};
+const coordinatesImage = {
+  uri: "https://s1.qwant.com/thumbr/474x355/a/9/00d5edea1b711b9e35c9635bcbfcd537e3a40e81f9387482244c0bcd0daea2/OIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj%3Fpid%3DApi&q=0&b=1&p=0&a=0",
+};
+const motdImage = {
+  uri: "https://s1.qwant.com/thumbr/474x270/3/6/a8f9c3fe42ffaf1d234f19d7f669586eec59661cd788a047e5d9c4db3b7e6b/OIP.MSaLxXZ2qYeCextEVZckJgHaEO.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.MSaLxXZ2qYeCextEVZckJgHaEO%3Fpid%3DApi&q=0&b=1&p=0&a=0",
+};
 
 export default function Index() {
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
+    <View style={styles.container}>
+      <Text style={styles.title}>Minecraft Tools</Text>
+
+      <View style={styles.gridContainer}>
+        {/* Coordinate Converter */}
+        <View style={styles.gridItem}>
+          <Link href="/coordinate-converter" asChild style={styles.touchableWrapper}>
+            <TouchableOpacity style={styles.touchableWrapper}>
+              <ImageBackground source={netherImage} style={styles.imageBackground} resizeMode="cover">
+                <View style={styles.overlay}>
+                  <Text style={styles.linkButtonText}>Coordinate Converter (Nether / Overworld)</Text>
+                </View>
+              </ImageBackground>
+            </TouchableOpacity>
+          </Link>
+        </View>
+
+        {/* Todo List */}
+        <View style={styles.gridItem}>
+          <Link href="/todo" asChild style={styles.touchableWrapper}>
+            <TouchableOpacity style={styles.touchableWrapper}>
+              <ImageBackground source={todoImage} style={styles.imageBackground} resizeMode="cover">
+                <View style={styles.overlay}>
+                  <Text style={styles.linkButtonText}>Todo List</Text>
+                </View>
+              </ImageBackground>
+            </TouchableOpacity>
+          </Link>
+        </View>
+
+        {/* Saved Coordinates */}
+        <View style={styles.gridItem}>
+          <Link href="/coordinates" asChild style={styles.touchableWrapper}>
+            <TouchableOpacity style={styles.touchableWrapper}>
+              <ImageBackground source={coordinatesImage} style={styles.imageBackground} resizeMode="cover">
+                <View style={styles.overlay}>
+                  <Text style={styles.linkButtonText}>Saved Coordinates</Text>
+                </View>
+              </ImageBackground>
+            </TouchableOpacity>
+          </Link>
+        </View>
+
+        {/* MOTD Creator */}
+        <View style={styles.gridItem}>
+          <Link href="/motd" asChild style={styles.touchableWrapper}>
+            <TouchableOpacity style={styles.touchableWrapper}>
+              <ImageBackground source={motdImage} style={styles.imageBackground} resizeMode="cover">
+                <View style={styles.overlay}>
+                  <Text style={styles.linkButtonText}>MOTD Creator</Text>
+                </View>
+              </ImageBackground>
+            </TouchableOpacity>
+          </Link>
+        </View>
+      </View>
     </View>
   );
-}
+}
\ No newline at end of file
diff --git a/app/styles.ts b/app/styles.ts
new file mode 100644
index 0000000..b198bac
--- /dev/null
+++ b/app/styles.ts
@@ -0,0 +1,53 @@
+// styles.ts
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#2e2e2e",
+  },
+  title: {
+    fontSize: 38,
+    fontWeight: "bold",
+    color: "#fff",
+    textAlign: "center",
+    paddingTop: 60,
+    marginBottom: 20,
+    textShadowColor: "rgba(0, 0, 0, 0.75)",
+    textShadowOffset: { width: 2, height: 2 },
+    textShadowRadius: 5,
+  },
+  gridContainer: {
+    flex: 1,
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  gridItem: {
+    width: "50%",
+    height: "50%",
+  },
+  touchableWrapper: {
+    flex: 1,
+  },
+  imageBackground: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 10,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  linkButtonText: {
+    color: "#fff",
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    textShadowColor: "rgba(0, 0, 0, 0.7)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+});
\ No newline at end of file