diff --git a/.gitignore b/.gitignore
index aa724b7..e3c64bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,74 @@
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+# Files for the ART/Dalvik VM
+*.dex
+# Java class files
+*.class
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+# Gradle files
+.gradle/
+build/
+# Local configuration file (sdk path, etc)
+local.properties
+# Proguard folder generated by Eclipse
+proguard/
+# Log Files
+*.log
+# Android Studio Navigation editor temp files
+.navigation/
+# Android Studio captures folder
+captures/
+# IntelliJ
 *.iml
-.gradle
-/local.properties
-/.idea/caches
-/.idea/libraries
-/.idea/modules.xml
-/.idea/workspace.xml
-/.idea/navEditor.xml
-/.idea/assetWizardSettings.xml
-.DS_Store
-/build
-/captures
+.idea/
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/gradle.xml
+# .idea/assetWizardSettings.xml
+# .idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+*.jks
+*.keystore
+# External native build folder generated in Android Studio 2.2 and later
 .externalNativeBuild
-.cxx
-local.properties
+.cxx/
+# Google Services (e.g. APIs or Firebase)
+google-services.json
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+# Version control
+vcs.xml
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+# MacOS
+.DS_Store
+# App Specific cases
+app/release/output.json
+.idea/codeStyles/
\ No newline at end of file
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 26d3352..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
deleted file mode 100644
index b589d56..0000000
--- a/.idea/compiler.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="17" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
deleted file mode 100644
index 32522c1..0000000
--- a/.idea/gradle.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="GradleSettings">
-    <option name="linkedExternalProjectsSettings">
-      <GradleProjectSettings>
-        <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
-        <option name="modules">
-          <set>
-            <option value="$PROJECT_DIR$" />
-            <option value="$PROJECT_DIR$/app" />
-          </set>
-        </option>
-        <option name="resolveExternalAnnotations" value="false" />
-      </GradleProjectSettings>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/migrations.xml b/.idea/migrations.xml
deleted file mode 100644
index f8051a6..0000000
--- a/.idea/migrations.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectMigrations">
-    <option name="MigrateToGradleLocalJavaHome">
-      <set>
-        <option value="$PROJECT_DIR$" />
-      </set>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
deleted file mode 100644
index 6ba4969..0000000
--- a/.idea/misc.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17">
-    <output url="file://$PROJECT_DIR$/build/classes" />
-  </component>
-  <component name="ProjectType">
-    <option name="id" value="Android" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 473f27a..b8c9b25 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -59,6 +59,8 @@ dependencies {
     implementation("androidx.compose.ui:ui-graphics")
     implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.compose.material3:material3")
+    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
+    implementation("androidx.navigation:navigation-compose:2.7.7")
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
diff --git a/app/src/main/java/com/example/recipe/MainActivity.kt b/app/src/main/java/com/example/recipe/MainActivity.kt
index 4860c63..ce60feb 100644
--- a/app/src/main/java/com/example/recipe/MainActivity.kt
+++ b/app/src/main/java/com/example/recipe/MainActivity.kt
@@ -3,12 +3,9 @@ package com.example.recipe
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import com.example.recipe.ui.theme.RecipeTheme
 
@@ -17,30 +14,20 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             RecipeTheme {
-                // A surface container using the 'background' color from the theme
                 Surface(
-                    modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Greeting("Android")
+                    ComposeNavigation()
                 }
             }
         }
     }
 }
 
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
     RecipeTheme {
-        Greeting("Android")
+        ComposeNavigation()
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/recipe/Navication.kt b/app/src/main/java/com/example/recipe/Navication.kt
new file mode 100644
index 0000000..1d12b13
--- /dev/null
+++ b/app/src/main/java/com/example/recipe/Navication.kt
@@ -0,0 +1,24 @@
+package com.example.recipe
+
+import android.annotation.SuppressLint
+import androidx.compose.runtime.Composable
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.example.recipe.screens.RecipeDetails
+import com.example.recipe.screens.RecipeHomeScreen
+
+@SuppressLint("ComposableDestinationInComposeScope")
+@Composable
+fun ComposeNavigation() {
+
+    val navController = rememberNavController()
+    NavHost(navController = navController, startDestination = "S_1") {
+        composable("S_1") {
+            RecipeHomeScreen()
+        }
+        composable("S_2") {
+            RecipeDetails(navController)
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/recipe/RecipeCard.kt b/app/src/main/java/com/example/recipe/RecipeCard.kt
new file mode 100644
index 0000000..b8a7885
--- /dev/null
+++ b/app/src/main/java/com/example/recipe/RecipeCard.kt
@@ -0,0 +1,96 @@
+package com.example.recipe
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.example.recipe.ui.theme.RecipeTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RecipeCard(navHostController: NavHostController) {
+    Spacer(modifier = Modifier.padding(24.dp))
+
+    Card(
+        modifier = Modifier
+            .height(112.dp)
+            .padding(start = 16.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.Transparent),
+        shape = RoundedCornerShape(0),
+        onClick = {navHostController.navigate("S_2")}
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = "Meat Loaf",
+                    maxLines = 2,
+                    overflow = TextOverflow.Clip,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold,
+                )
+
+                Text(
+                    text = "Yummy home made meat loaf, great for left lovers.",
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.padding(bottom = 4.dp),
+                    fontSize = 13.sp,
+                    lineHeight = 18.sp,
+                    color = Color.Gray,
+                )
+
+                Spacer(Modifier.weight(1f))
+
+                Text(text = "01.05.2018")
+            }
+
+            Spacer(Modifier.width(16.dp))
+
+            Image(
+                painter = painterResource(id = R.drawable.meat_loaf_web),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .clip(RoundedCornerShape(bottomStart = 10.dp, topStart = 10.dp)),
+                contentScale = ContentScale.Crop,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RecipeCardPreview() {
+    val navController = rememberNavController()
+    RecipeTheme {
+        RecipeCard(navController)
+    }
+}
+
diff --git a/app/src/main/java/com/example/recipe/screens/RecipeDetails.kt b/app/src/main/java/com/example/recipe/screens/RecipeDetails.kt
new file mode 100644
index 0000000..1a2f1a9
--- /dev/null
+++ b/app/src/main/java/com/example/recipe/screens/RecipeDetails.kt
@@ -0,0 +1,11 @@
+package com.example.recipe.screens
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+
+@Composable
+fun RecipeDetails(
+    navHostController: NavHostController
+) {
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/recipe/screens/RecipeHomeScreen.kt b/app/src/main/java/com/example/recipe/screens/RecipeHomeScreen.kt
new file mode 100644
index 0000000..dfa5fa5
--- /dev/null
+++ b/app/src/main/java/com/example/recipe/screens/RecipeHomeScreen.kt
@@ -0,0 +1,77 @@
+package com.example.recipe.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.compose.rememberNavController
+import com.example.recipe.RecipeCard
+import com.example.recipe.ui.theme.RecipeTheme
+
+@Composable
+fun RecipeHomeScreen(names: List<String> = List(1000) { "$it" }) {
+    val navController = rememberNavController()
+    var text by remember { mutableStateOf("") }
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        Text(
+            text = "Recipes",
+            modifier = Modifier.padding(start = 16.dp, top = 46.dp),
+            fontSize = 34.sp,
+            fontWeight = FontWeight.Bold,
+        )
+
+        TextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(
+                    start = 8.dp,
+                    top = 11.dp,
+                    end = 8.dp,
+                    bottom = 6.dp),
+            value = text,
+            onValueChange = { text = it },
+            shape = RoundedCornerShape(10.dp),
+            colors = TextFieldDefaults.colors(
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent
+            ),
+            label = { Text("Search") },
+            leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },
+        )
+
+        LazyColumn {
+            items(items = names) {
+                RecipeCard(navController)
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RecipeHomeScreenPreview() {
+    RecipeTheme {
+        RecipeHomeScreen()
+    }
+}
diff --git a/app/src/main/res/drawable/caramelized_french.png b/app/src/main/res/drawable/caramelized_french.png
new file mode 100644
index 0000000..b0cd61c
Binary files /dev/null and b/app/src/main/res/drawable/caramelized_french.png differ
diff --git a/app/src/main/res/drawable/meat_loaf.png b/app/src/main/res/drawable/meat_loaf.png
new file mode 100644
index 0000000..23953cb
Binary files /dev/null and b/app/src/main/res/drawable/meat_loaf.png differ
diff --git a/app/src/main/res/drawable/meat_loaf_web.png b/app/src/main/res/drawable/meat_loaf_web.png
new file mode 100644
index 0000000..50f379e
Binary files /dev/null and b/app/src/main/res/drawable/meat_loaf_web.png differ