diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 081375d..980d0cc 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -7,7 +7,7 @@
         <option name="testRunner" value="GRADLE" />
         <option name="distributionType" value="DEFAULT_WRAPPED" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="20" />
+        <option name="gradleJvm" value="corretto-18" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 54d5acd..54b4442 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_18" default="true" project-jdk-name="corretto-18" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/app/build.gradle b/app/build.gradle
index 53acdf7..991f470 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -48,6 +48,9 @@ android {
 
 dependencies {
 
+    def nav_version = "2.6.0"
+
+    implementation "androidx.navigation:navigation-compose:$nav_version"
     implementation 'androidx.core:core-ktx:1.10.1'
     implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
     implementation 'androidx.activity:activity-compose:1.7.1'
diff --git a/app/src/main/java/com/ics342/labs/MainActivity.kt b/app/src/main/java/com/ics342/labs/MainActivity.kt
index dad3a49..514d29e 100644
--- a/app/src/main/java/com/ics342/labs/MainActivity.kt
+++ b/app/src/main/java/com/ics342/labs/MainActivity.kt
@@ -3,10 +3,12 @@ package com.ics342.labs
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -20,6 +22,12 @@ import androidx.compose.ui.text.font.FontWeight.Companion.Bold
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.NavType
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.navArgument
 import com.ics342.labs.data.DataItem
 import com.ics342.labs.ui.theme.LabsTheme
 
@@ -52,15 +60,44 @@ class MainActivity : ComponentActivity() {
         setContent {
             LabsTheme {
                 // A surface container using the 'background' color from the theme
-                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
-//                    Greeting("Android")
-                    DataItemList(dataItems = dataItems)
+//                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+//                    DataItemList(dataItems = dataItems)
+                    val navController = rememberNavController()
+                    NavHost(navController = navController, startDestination = "Start") {
+                        composable(route = "Start") {
+                            DataItemList(dataItems = dataItems, navController = navController)
+                    }
+                        composable(route = "DetailsScreen/{id}", arguments = listOf(navArgument("id") {
+                            type = NavType.IntType
+                            defaultValue = 0
+                        })) {
+                            entry -> DetailsScreenView(dataItem = dataItems[entry.arguments!!.getInt("id") -1])
+                        }
+
                 }
             }
         }
     }
 }
 
+//display id, title, and description
+@Composable
+fun DetailsScreenView(dataItem:DataItem) {
+    Column(modifier = Modifier.fillMaxSize()) {
+        Row(modifier = Modifier.fillMaxWidth()) {
+            Text(text = dataItem.id.toString(),
+            style = MaterialTheme.typography.bodyMedium)
+            Spacer(modifier = Modifier.size(8.dp))
+            Text(text = dataItem.name,
+                style = MaterialTheme.typography.bodyMedium)
+            Spacer(modifier = Modifier.size(8.dp))
+            Text(text = dataItem.description,
+                style = MaterialTheme.typography.bodyMedium)
+            Spacer(modifier = Modifier.size(8.dp))
+        }
+    }
+}
+
 @Composable
 fun Greeting(name: String, modifier: Modifier = Modifier) {
     Text(
@@ -70,10 +107,16 @@ fun Greeting(name: String, modifier: Modifier = Modifier) {
 }
 
 @Composable
-fun DataItemView(dataItem: DataItem) {
+fun DataItemView(dataItem: DataItem, navController : NavController) {
     /* Create the view for the data item her. */
     Row (
-        Modifier.padding(bottom = 8.dp)){
+        Modifier.padding(bottom = 8.dp)
+            .clickable(onClick = {
+                navController.navigate(route = buildString {
+                    append("DetailsScreen/")
+                    append(dataItem.id)
+                })
+            })){
         Text(text = dataItem.id.toString())
         Spacer(modifier = Modifier.size(8.dp))
 
@@ -85,16 +128,18 @@ fun DataItemView(dataItem: DataItem) {
 
 }
 
+
 @Composable
-fun DataItemList(dataItems: List<DataItem>) {
+fun DataItemList(dataItems: List<DataItem>, navController : NavController) {
     /* Create the list here. This function will call DataItemView() */
     LazyColumn {
         for(data in dataItems){
-            item{DataItemView(data)}
+            item{DataItemView(data, navController = navController)}
         }
     }
 }
 
+
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {