diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index f3207a6..1b3b0dc 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -48,6 +48,7 @@ dependencies {
     implementation(libs.material)
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
+    implementation(libs.github.glide)
     testImplementation(libs.junit)
     testImplementation(libs.kotlin.coroutines.test)
 }
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 063f4d1..0f330b5 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -2,9 +2,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
-        android:allowBackup="true"
         android:name=".App"
+        android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
         android:fullBackupContent="@xml/backup_rules"
         android:icon="@mipmap/ic_launcher"
diff --git a/app/src/main/kotlin/ru/otus/cookbook/MainActivity.kt b/app/src/main/kotlin/ru/otus/cookbook/MainActivity.kt
index 6e524b6..5d6e98e 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/MainActivity.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/MainActivity.kt
@@ -1,7 +1,9 @@
 package ru.otus.cookbook
 
 import android.os.Bundle
+import androidx.activity.addCallback
 import androidx.appcompat.app.AppCompatActivity
+import androidx.navigation.findNavController
 import ru.otus.cookbook.databinding.ActivityMainBinding
 
 class MainActivity : AppCompatActivity() {
@@ -12,5 +14,10 @@ class MainActivity : AppCompatActivity() {
         super.onCreate(savedInstanceState)
         binding = ActivityMainBinding.inflate(layoutInflater)
         setContentView(binding.root)
+        onBackPressedDispatcher.addCallback(this) {
+            if (!findNavController(R.id.fragment_main).popBackStack()) {
+                finish()
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookAdapter.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookAdapter.kt
new file mode 100644
index 0000000..b4d65fd
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookAdapter.kt
@@ -0,0 +1,103 @@
+package ru.otus.cookbook.ui
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView.ViewHolder
+import com.bumptech.glide.Glide
+import ru.otus.cookbook.data.RecipeListItem
+import ru.otus.cookbook.databinding.VhRecipeCategoryBinding
+import ru.otus.cookbook.databinding.VhRecipeItemBinding
+
+
+class CookbookAdapter(
+    private val onRecipeClick: (Int) -> Unit
+) :
+    ListAdapter<RecipeListItem, CookbookAdapter.CookbookViewHolder>(RecipeDiff) {
+
+    override fun getItemViewType(position: Int): Int {
+        return getItem(position).layoutId
+    }
+
+
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int
+    ) = when (viewType) {
+        RecipeListItem.CategoryItem.layoutId -> CookbookViewHolder.CategoryHolder(
+            VhRecipeCategoryBinding.inflate(
+                LayoutInflater.from(parent.context),
+                parent,
+                false
+            )
+        )
+
+        RecipeListItem.RecipeItem.layoutId -> CookbookViewHolder.RecipeHolder(
+            VhRecipeItemBinding.inflate(
+                LayoutInflater.from(parent.context),
+                parent,
+                false
+            ), onRecipeClick
+        )
+
+        else -> throw IllegalArgumentException("View is not supported")
+    }
+
+    override fun onBindViewHolder(holder: CookbookViewHolder, position: Int) {
+        when (holder) {
+            is CookbookViewHolder.CategoryHolder -> holder.bind(getItem(position) as RecipeListItem.CategoryItem)
+            is CookbookViewHolder.RecipeHolder -> holder.bind(getItem(position) as RecipeListItem.RecipeItem)
+        }
+    }
+
+    sealed class CookbookViewHolder(view: View) : ViewHolder(view) {
+        class RecipeHolder(
+            private val binding: VhRecipeItemBinding,
+            private val onClick: (Int) -> Unit
+        ) : CookbookViewHolder(binding.root) {
+            private var id: Int = -1
+
+            init {
+                binding.root.setOnClickListener { onClick(id) }
+            }
+
+            fun bind(recipe: RecipeListItem.RecipeItem) = with(binding) {
+                this@RecipeHolder.id = recipe.id
+                txtRecipeAvatar.text = recipe.title[0].uppercase()
+                txtRecipeName.text = recipe.title
+                txtRecipeDescription.text = recipe.description
+                Glide.with(root.context).load(recipe.imageUrl).centerCrop().into(imgRecipeImage)
+            }
+
+        }
+
+        class CategoryHolder(
+            private val binding: VhRecipeCategoryBinding
+        ) :
+            CookbookViewHolder(binding.root) {
+
+            fun bind(category: RecipeListItem.CategoryItem) = with(binding) {
+                txtCategoryName.text = category.name
+            }
+        }
+    }
+
+}
+
+private object RecipeDiff : DiffUtil.ItemCallback<RecipeListItem>() {
+    override fun areItemsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return when {
+            oldItem is RecipeListItem.RecipeItem && newItem is RecipeListItem.RecipeItem -> oldItem.id == newItem.id
+            oldItem is RecipeListItem.CategoryItem && newItem is RecipeListItem.CategoryItem -> oldItem.category == newItem.category
+            else -> false
+        }
+    }
+
+    override fun areContentsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return oldItem == newItem
+    }
+}
+
+
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
index efe6939..bdd8d78 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
@@ -4,10 +4,12 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.Toast
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.navigation.fragment.findNavController
 import kotlinx.coroutines.launch
 import ru.otus.cookbook.data.RecipeListItem
 import ru.otus.cookbook.databinding.FragmentCookbookBinding
@@ -17,6 +19,14 @@ class CookbookFragment : Fragment() {
     private val binding = FragmentBindingDelegate<FragmentCookbookBinding>(this)
     private val model: CookbookFragmentViewModel by viewModels { CookbookFragmentViewModel.Factory }
 
+    private val adapter = CookbookAdapter(
+        { id ->
+            val navController = findNavController()
+            val action = CookbookFragmentDirections.actionCookbookToRecipe(id)
+            navController.navigate(action)
+        }
+    )
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -29,6 +39,7 @@ class CookbookFragment : Fragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         setupRecyclerView()
+        setupAppBar()
         viewLifecycleOwner.lifecycleScope.launch {
             model.recipeList
                 .flowWithLifecycle(viewLifecycleOwner.lifecycle)
@@ -36,11 +47,20 @@ class CookbookFragment : Fragment() {
         }
     }
 
+    private fun setupAppBar() {
+        binding.withBinding {
+            cookbookToolbar.setNavigationOnClickListener {
+                Toast.makeText(requireContext(), "Close application?", Toast.LENGTH_LONG).show()
+            }
+        }
+    }
+
+
     private fun setupRecyclerView() = binding.withBinding {
-        // Setup RecyclerView
+        recViewCategory.adapter = adapter
     }
 
     private fun onRecipeListUpdated(recipeList: List<RecipeListItem>) {
-        // Handle recipe list
+        adapter.submitList(recipeList)
     }
 }
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/DialogFragmentDelete.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/DialogFragmentDelete.kt
new file mode 100644
index 0000000..cf2c766
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/DialogFragmentDelete.kt
@@ -0,0 +1,40 @@
+package ru.otus.cookbook.ui
+
+import android.app.AlertDialog
+import android.app.Dialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import androidx.navigation.fragment.findNavController
+import ru.otus.cookbook.R
+
+class DialogFragmentDelete : DialogFragment() {
+    private val title: String get() = DialogFragmentDeleteArgs.fromBundle(requireArguments()).title
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
+        requireContext().let {
+            val navController = findNavController()
+            AlertDialog.Builder(it)
+
+                .setTitle(getString(R.string.delete_dialog_title, title))
+                .setMessage(getString(R.string.delete_dialog_message, title))
+                .setPositiveButton(getString(R.string.delete_dialog_positive_button)) { _, _ ->
+                    navController.previousBackStackEntry?.savedStateHandle?.set(
+                        DIALOG_RESULT_KEY,
+                        true
+                    )
+                }
+                .setNegativeButton(getString(R.string.delete_dialog_negative_button)) { _, _ ->
+                    navController.previousBackStackEntry?.savedStateHandle?.set(
+                        DIALOG_RESULT_KEY,
+                        false
+                    )
+                }
+                .create()
+        }
+
+    companion object {
+        const val DIALOG_RESULT_KEY = "deleteResult"
+    }
+
+}
+
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
index e4460c1..969cf74 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
@@ -9,15 +9,18 @@ import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.viewmodel.MutableCreationExtras
+import androidx.navigation.fragment.findNavController
+import com.bumptech.glide.Glide
 import kotlinx.coroutines.launch
+import ru.otus.cookbook.R
 import ru.otus.cookbook.data.Recipe
 import ru.otus.cookbook.databinding.FragmentRecipeBinding
 
 class RecipeFragment : Fragment() {
 
-    private val recipeId: Int get() = TODO("Use Safe Args to get the recipe ID: https://developer.android.com/guide/navigation/use-graph/pass-data#Safe-args")
-
+    private val recipeId: Int get() = RecipeFragmentArgs.fromBundle(requireArguments()).recipeId
     private val binding = FragmentBindingDelegate<FragmentRecipeBinding>(this)
+
     private val model: RecipeFragmentViewModel by viewModels(
         extrasProducer = {
             MutableCreationExtras(defaultViewModelCreationExtras).apply {
@@ -27,6 +30,7 @@ class RecipeFragment : Fragment() {
         factoryProducer = { RecipeFragmentViewModel.Factory }
     )
 
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -38,6 +42,8 @@ class RecipeFragment : Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        setupAppBar()
+        setupDialogObserver()
         viewLifecycleOwner.lifecycleScope.launch {
             model.recipe
                 .flowWithLifecycle(viewLifecycleOwner.lifecycle)
@@ -45,6 +51,16 @@ class RecipeFragment : Fragment() {
         }
     }
 
+    private fun setupDialogObserver() {
+        findNavController().currentBackStackEntry?.savedStateHandle?.getLiveData<Boolean>(
+            DialogFragmentDelete.DIALOG_RESULT_KEY
+        )?.observe(viewLifecycleOwner) { result ->
+            if (result) {
+                deleteRecipe()
+            }
+        }
+    }
+
     /**
      * Use to get recipe title and pass to confirmation dialog
      */
@@ -52,11 +68,39 @@ class RecipeFragment : Fragment() {
         return model.recipe.value.title
     }
 
+    private fun setupAppBar() {
+        binding.withBinding {
+            recipeToolbar.setNavigationOnClickListener {
+                findNavController().navigate(R.id.action_recipe_to_cookbook)
+            }
+            recipeToolbar.setOnMenuItemClickListener { menuItem ->
+                when (menuItem.itemId) {
+                    R.id.delete_recipe -> {
+                        val navController = findNavController()
+                        val action = RecipeFragmentDirections.actionRecipeToDialogDelete(getTitle())
+                        navController.navigate(action)
+                        true
+                    }
+
+                    else -> false
+                }
+            }
+        }
+    }
+
     private fun displayRecipe(recipe: Recipe) {
-        // Display the recipe
+        binding.withBinding {
+            txtRecipeName.text = recipe.title
+            txtRecipeDescription.text = recipe.description
+            txtRecipeSteps.text =
+                recipe.steps.mapIndexed { index, step -> "${index + 1}. $step" }.joinToString("\n")
+            Glide.with(root.context).load(recipe.imageUrl).into(imgRecipeImageBig)
+            recipeToolbar.title = recipe.title
+        }
     }
 
     private fun deleteRecipe() {
         model.delete()
+        findNavController().navigate(R.id.action_dialog_delete_to_cookbook)
     }
 }
\ No newline at end of file
diff --git a/app/src/main/res/anim/slide_in_left.xml b/app/src/main/res/anim/slide_in_left.xml
new file mode 100644
index 0000000..2e2ffcd
--- /dev/null
+++ b/app/src/main/res/anim/slide_in_left.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <translate
+        android:duration="@android:integer/config_shortAnimTime"
+        android:fromXDelta="-100%"
+        android:toXDelta="0%" />
+</set>
\ No newline at end of file
diff --git a/app/src/main/res/anim/slide_in_right.xml b/app/src/main/res/anim/slide_in_right.xml
new file mode 100644
index 0000000..8669814
--- /dev/null
+++ b/app/src/main/res/anim/slide_in_right.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <translate
+        android:duration="@android:integer/config_shortAnimTime"
+        android:fromXDelta="100%"
+        android:toXDelta="0%" />
+</set>
\ No newline at end of file
diff --git a/app/src/main/res/anim/slide_out_left.xml b/app/src/main/res/anim/slide_out_left.xml
new file mode 100644
index 0000000..59195b4
--- /dev/null
+++ b/app/src/main/res/anim/slide_out_left.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <translate
+        android:duration="@android:integer/config_shortAnimTime"
+        android:fromXDelta="0%"
+        android:toXDelta="-100%" />
+</set>
\ No newline at end of file
diff --git a/app/src/main/res/anim/slide_out_right.xml b/app/src/main/res/anim/slide_out_right.xml
new file mode 100644
index 0000000..8669814
--- /dev/null
+++ b/app/src/main/res/anim/slide_out_right.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <translate
+        android:duration="@android:integer/config_shortAnimTime"
+        android:fromXDelta="100%"
+        android:toXDelta="0%" />
+</set>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/arrow_back_24dp.xml b/app/src/main/res/drawable/arrow_back_24dp.xml
new file mode 100644
index 0000000..1c25a9a
--- /dev/null
+++ b/app/src/main/res/drawable/arrow_back_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="m313,520 l224,224 -57,56 -320,-320 320,-320 57,56 -224,224h487v80L313,520Z"
+      android:fillColor="?attr/colorOnSurface"/>
+</vector>
diff --git a/app/src/main/res/drawable/category_80dp.xml b/app/src/main/res/drawable/category_80dp.xml
new file mode 100644
index 0000000..8642d79
--- /dev/null
+++ b/app/src/main/res/drawable/category_80dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="m261,434 l220,-354 220,354L261,434ZM705.65,880Q633,880 582.5,829.35q-50.5,-50.64 -50.5,-123Q532,634 582.65,583q50.64,-51 123,-51Q778,532 829,582.85q51,50.86 51,123.5 0,72.65 -50.85,123.15Q778.29,880 705.65,880ZM120,855v-304h304v304L120,855Z"
+      android:fillColor="#9AA0A6"/>
+</vector>
diff --git a/app/src/main/res/drawable/category_xxx_width.xml b/app/src/main/res/drawable/category_xxx_width.xml
new file mode 100644
index 0000000..0aa162e
--- /dev/null
+++ b/app/src/main/res/drawable/category_xxx_width.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:pathData="m261,434 l220,-354 220,354L261,434ZM705.65,880Q633,880 582.5,829.35q-50.5,-50.64 -50.5,-123Q532,634 582.65,583q50.64,-51 123,-51Q778,532 829,582.85q51,50.86 51,123.5 0,72.65 -50.85,123.15Q778.29,880 705.65,880ZM120,855v-304h304v304L120,855Z"
+        android:fillColor="#9AA0A6"/>
+</vector>
diff --git a/app/src/main/res/drawable/circle_background.xml b/app/src/main/res/drawable/circle_background.xml
new file mode 100644
index 0000000..d7c8e96
--- /dev/null
+++ b/app/src/main/res/drawable/circle_background.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="#EADDFF" />
+
+    <size
+        android:width="40dp"
+        android:height="40dp" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/close_24dp.xml b/app/src/main/res/drawable/close_24dp.xml
new file mode 100644
index 0000000..7393823
--- /dev/null
+++ b/app/src/main/res/drawable/close_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="m256,760 l-56,-56 224,-224 -224,-224 56,-56 224,224 224,-224 56,56 -224,224 224,224 -56,56 -224,-224 -224,224Z"
+      android:fillColor="?attr/colorOnSurface"/>
+</vector>
diff --git a/app/src/main/res/drawable/delete_24dp.xml b/app/src/main/res/drawable/delete_24dp.xml
new file mode 100644
index 0000000..7c0eee8
--- /dev/null
+++ b/app/src/main/res/drawable/delete_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="M280,840q-33,0 -56.5,-23.5T200,760v-520h-40v-80h200v-40h240v40h200v80h-40v520q0,33 -23.5,56.5T680,840L280,840ZM680,240L280,240v520h400v-520ZM360,680h80v-360h-80v360ZM520,680h80v-360h-80v360ZM280,240v520,-520Z"
+      android:fillColor="?attr/colorOnSurface"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 86a5d97..68a355d 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,19 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/main"
+    android:id="@+id/fragment_main"
+    android:name="androidx.navigation.fragment.NavHostFragment"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    app:navGraph="@navigation/nav_graph"
+    android:fitsSystemWindows="true"
     tools:context=".MainActivity">
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.fragment.app.FragmentContainerView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_cookbook.xml b/app/src/main/res/layout/fragment_cookbook.xml
index 77d9ef6..0657f10 100644
--- a/app/src/main/res/layout/fragment_cookbook.xml
+++ b/app/src/main/res/layout/fragment_cookbook.xml
@@ -1,6 +1,55 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:fitsSystemWindows="true">
+
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/cookbook_app_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.google.android.material.appbar.AppBarLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/top_bar_background_light">
+
+            <com.google.android.material.appbar.MaterialToolbar
+                android:id="@+id/cookbook_toolbar"
+                android:layout_width="match_parent"
+                android:layout_height="?attr/actionBarSize"
+
+                android:background="?attr/selectableItemBackgroundBorderless"
+                app:navigationIcon="@drawable/close_24dp"
+                app:title="@string/cookbook_bar_title">
+
+                <androidx.appcompat.widget.ActionMenuView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:gravity="end">
+
+                </androidx.appcompat.widget.ActionMenuView>
+
+            </com.google.android.material.appbar.MaterialToolbar>
+
+        </com.google.android.material.appbar.AppBarLayout>
+
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rec_view_category"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_margin="10dp"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/cookbook_app_bar"
+        tools:itemCount="2"
+        tools:listitem="@layout/vh_recipe_category">
+
+    </androidx.recyclerview.widget.RecyclerView>
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_recipe.xml b/app/src/main/res/layout/fragment_recipe.xml
index 77d9ef6..65ebc3f 100644
--- a/app/src/main/res/layout/fragment_recipe.xml
+++ b/app/src/main/res/layout/fragment_recipe.xml
@@ -1,6 +1,99 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:fitsSystemWindows="true">
+
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/recipe_app_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.google.android.material.appbar.AppBarLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/top_bar_background_light">
+
+            <com.google.android.material.appbar.MaterialToolbar
+                android:id="@+id/recipe_toolbar"
+                android:layout_width="match_parent"
+                android:layout_height="?attr/actionBarSize"
+                android:background="?attr/selectableItemBackgroundBorderless"
+                app:menu="@menu/recipe_menu"
+                app:navigationIcon="@drawable/arrow_back_24dp"
+                app:title="@string/recipe_name_placeholder">
+
+                <androidx.appcompat.widget.ActionMenuView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:gravity="end">
+
+                </androidx.appcompat.widget.ActionMenuView>
+
+            </com.google.android.material.appbar.MaterialToolbar>
+
+        </com.google.android.material.appbar.AppBarLayout>
+
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+
+    <ScrollView
+        android:id="@+id/scroll_recipe_steps"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/recipe_app_bar"
+        app:layout_constraintVertical_bias="0.0"
+        tools:layout_editor_absoluteX="10dp">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:paddingLeft="10dp"
+            android:paddingRight="10dp">
+
+            <ImageView
+                android:id="@+id/img_recipe_image_big"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/default_image_bg_light"
+                android:contentDescription="@string/recipe_image_description"
+                android:src="@drawable/category_xxx_width"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/txt_recipe_name"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:paddingBottom="@dimen/recipe_recipe_padding_bottom"
+                android:text="@string/recipe_name_placeholder"
+                android:textSize="@dimen/recipe_recipe_name"
+                app:layout_constraintTop_toBottomOf="@id/img_recipe_image_big" />
+
+            <TextView
+                android:id="@+id/txt_recipe_description"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:paddingBottom="10dp"
+                android:text="@string/recipe_description_placeholder"
+                android:textSize="@dimen/recipe_recipe_description"
+                app:layout_constraintTop_toBottomOf="@id/txt_recipe_name" />
+
+
+            <TextView
+                android:id="@+id/txt_recipe_steps"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="@string/recipe_recipe_steps_placeholder"
+                android:textSize="@dimen/recipe_recipe_steps"
+                app:layout_constraintTop_toBottomOf="@id/txt_recipe_description" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </ScrollView>
+
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/vh_recipe_category.xml b/app/src/main/res/layout/vh_recipe_category.xml
index 006fd49..becf3f4 100644
--- a/app/src/main/res/layout/vh_recipe_category.xml
+++ b/app/src/main/res/layout/vh_recipe_category.xml
@@ -1,6 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
     android:layout_height="wrap_content">
 
+    <TextView
+        android:id="@+id/txt_category_name"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="@color/color_on_primary_container"
+        android:text="@string/category_placeholder"
+        android:textSize="@dimen/category_name"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+
+        />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rec_recipe_in_category"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/txt_category_name"
+        tools:itemCount="3"
+        tools:listitem="@layout/vh_recipe_item" />
+
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/vh_recipe_item.xml b/app/src/main/res/layout/vh_recipe_item.xml
index 006fd49..53ad9a1 100644
--- a/app/src/main/res/layout/vh_recipe_item.xml
+++ b/app/src/main/res/layout/vh_recipe_item.xml
@@ -1,6 +1,79 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:padding="5dp">
 
+    <com.google.android.material.card.MaterialCardView
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/cookbook_card_height"
+        android:backgroundTint="@color/cookbook_card_bg_light"
+        app:cardCornerRadius="12dp"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/guideline_recipe"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="horizontal"
+                app:layout_constraintGuide_percent="0.5" />
+
+            <TextView
+                android:id="@+id/txt_recipe_avatar"
+                style="@style/Cookbook.Card.Avatar"
+                android:layout_width="@dimen/cookbook_card_avatar_diameter"
+                android:layout_height="@dimen/cookbook_card_avatar_diameter"
+                android:background="@drawable/circle_background"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/img_recipe_image"
+                style="Cookbook.Card.RecipeImage"
+                android:layout_width="@dimen/cookbook_card_height"
+                android:layout_height="@dimen/cookbook_card_height"
+                android:background="@color/default_image_bg_light"
+                android:contentDescription="@string/recipe_image_description"
+                android:src="@drawable/category_80dp"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_bias="0.0" />
+
+
+            <TextView
+                android:id="@+id/txt_recipe_name"
+                style="@style/Cookbook.Card.RecipeName"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/cookbook_recipe_name_margin_side"
+                android:layout_marginRight="@dimen/cookbook_recipe_name_margin_side"
+                android:layout_marginBottom="@dimen/cookbook_recipe_name_margin_bottom"
+                app:layout_constraintBottom_toTopOf="@id/guideline_recipe"
+                app:layout_constraintLeft_toRightOf="@id/txt_recipe_avatar"
+                app:layout_constraintRight_toLeftOf="@id/img_recipe_image" />
+
+            <TextView
+                android:id="@+id/txt_recipe_description"
+                style="@style/Cookbook.Card.RecipeDescription"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/cookbook_recipe_description_margin_top"
+                app:layout_constraintLeft_toLeftOf="@id/txt_recipe_name"
+                app:layout_constraintRight_toRightOf="@id/txt_recipe_name"
+                app:layout_constraintTop_toTopOf="@id/guideline_recipe" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+    </com.google.android.material.card.MaterialCardView>
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/menu/recipe_menu.xml b/app/src/main/res/menu/recipe_menu.xml
new file mode 100644
index 0000000..bf0e4cb
--- /dev/null
+++ b/app/src/main/res/menu/recipe_menu.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<menu xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+    <item
+        android:id="@+id/delete_recipe"
+        android:icon="@drawable/delete_24dp"
+        android:title="@string/menu_delete"
+        app:showAsAction="always" />
+</menu>
\ No newline at end of file
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
new file mode 100644
index 0000000..0905028
--- /dev/null
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<navigation xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/nav_graph.xml"
+    app:startDestination="@id/fragment_cookbook">
+
+    <fragment
+        android:id="@+id/fragment_cookbook"
+        android:name="ru.otus.cookbook.ui.CookbookFragment"
+        android:label="CookbookFragment"
+        tools:layout="@layout/fragment_cookbook">
+        <action
+            android:id="@+id/action_cookbook_to_recipe"
+            app:destination="@id/fragment_recipe"
+            app:enterAnim="@anim/slide_in_right"
+            app:exitAnim="@anim/slide_out_left"
+            app:popEnterAnim="@anim/slide_in_left"
+
+            />
+    </fragment>
+
+    <fragment
+        android:id="@+id/fragment_recipe"
+        android:name="ru.otus.cookbook.ui.RecipeFragment"
+        android:label="RecipeFragment"
+        tools:layout="@layout/fragment_recipe">
+        <argument
+            android:name="recipe_id"
+            app:argType="integer" />
+        <action
+            android:id="@+id/action_recipe_to_dialog_delete"
+            app:destination="@id/dialog_delete" />
+        <action
+            android:id="@+id/action_recipe_to_cookbook"
+            app:destination="@id/fragment_cookbook"
+            app:enterAnim="@anim/slide_in_left" />
+    </fragment>
+
+    <dialog
+        android:id="@+id/dialog_delete"
+        android:name="ru.otus.cookbook.ui.DialogFragmentDelete"
+        android:label="dialog_delete">
+        <argument
+            android:name="title"
+            app:argType="string" />
+        <action
+            android:id="@+id/action_dialog_delete_to_cookbook"
+            app:destination="@id/fragment_cookbook" />
+    </dialog>
+
+</navigation>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index c8524cd..7c49f40 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -2,4 +2,10 @@
 <resources>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+
+    <color name="top_bar_background_light">#F3EDF7</color>
+    <color name="default_image_bg_light">#DADCE0</color>
+
+    <color name="cookbook_card_bg_light">#F3EDF7</color>
+    <color name="color_on_primary_container">#4F378A</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
new file mode 100644
index 0000000..9bb1026
--- /dev/null
+++ b/app/src/main/res/values/dimens.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="recipe_recipe_name">32sp</dimen>
+    <dimen name="recipe_recipe_padding_bottom">10dp</dimen>
+    <dimen name="recipe_recipe_description">24sp</dimen>
+    <dimen name="recipe_recipe_steps">24sp</dimen>
+    <dimen name="category_name">36sp</dimen>
+    <dimen name="cookbook_card_height">80dp</dimen>
+    <dimen name="cookbook_card_avatar_diameter">40dp</dimen>
+    <dimen name="cookbook_avatar_text_size">16sp</dimen>
+    <dimen name="cookbook_avatar_margin">10dp</dimen>
+    <dimen name="cookbook_recipe_name_text_size">16sp</dimen>
+    <dimen name="cookbook_recipe_name_margin_side">10dp</dimen>
+    <dimen name="cookbook_recipe_name_margin_bottom">5dp</dimen>
+    <dimen name="cookbook_recipe_description_margin_top">5dp</dimen>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 8fce1d1..3f93997 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,19 @@
 <resources>
     <string name="app_name">Cookbook</string>
+    <string name="cookbook_bar_title">Cookbook</string>
+    <string name="recipe_name_placeholder">Recipe name placeholder</string>
+    <string name="recipe_image_description">A recipe image</string>
+    <string name="recipe_description_placeholder">Recipe Description placeholder</string>
+    <string name="recipe_recipe_steps_placeholder">Recipe steps Lorem ipsum Quisque blandit dolor vel ullamcorper fringilla. Etiam ut ultricies nibh. Maecenas sit amet ipsum at felis convallis luctus. Praesent at urna ac massa eleifend iaculis. Donec at venenatis metus. Donec malesuada sapien eget neque finibus, vel aliquam mi lacinia. Mauris a sem elementum, pretium diam nec, luctus neque. Praesent lacinia imperdiet erat, eget feugiat mi feugiat ut. Proin iaculis, massa eu lacinia tempor, dui lacus pellentesque dui, ut dapibus tellus purus at augue. Nam sagittis lobortis justo vel porta. Proin vel vulputate quam. Vivamus at vestibulum est. Phasellus a arcu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam elit mauris, pharetra vitae libero sit amet, efficitur rhoncus mauris.</string>
+    <string name="category_placeholder">Category placeholder</string>
+
+
+    <string name="delete_dialog_title">Delete %s recipe</string>
+    <string name="delete_dialog_message">Are you sure you want to delete the "%s" recipe?</string>
+    <string name="delete_dialog_positive_button">Yes</string>
+    <string name="delete_dialog_negative_button">No</string>
+    <string name="cookbook_avatar_placeholder">C</string>
+    <string name="menu_delete">delete</string>
+    <string name="cookbook_avatar_font_family">monospace</string>
+
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
new file mode 100644
index 0000000..3110cc2
--- /dev/null
+++ b/app/src/main/res/values/styles.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Cookbook" />
+
+    <style name="Cookbook.Card" />
+
+    <style name="Cookbook.Card.RecipeImage">
+        <item name="android:scaleType">centerCrop</item>
+        <item name="android:src">@drawable/category_80dp</item>
+    </style>
+
+    <style name="Cookbook.Card.RecipeName">
+        <item name="android:ellipsize">end</item>
+        <item name="android:lines">1</item>
+        <item name="android:text">@string/recipe_name_placeholder</item>
+        <item name="android:textSize">@dimen/cookbook_recipe_name_text_size</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+
+    <style name="Cookbook.Card.RecipeDescription">
+        <item name="android:ellipsize">end</item>
+        <item name="android:lines">1</item>
+        <item name="android:text">@string/recipe_description_placeholder</item>
+    </style>
+
+    <style name="Cookbook.Card.Avatar">
+        <item name="android:layout_margin">@dimen/cookbook_avatar_margin</item>
+        <item name="fontFamily">@string/cookbook_avatar_font_family</item>
+        <item name="android:gravity">center</item>
+        <item name="android:textColor">@color/color_on_primary_container</item>
+        <item name="android:text">@string/cookbook_avatar_placeholder</item>
+        <item name="android:textSize">@dimen/cookbook_avatar_text_size</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 515d8d1..594d23c 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,23 +1,25 @@
 [versions]
 agp = "8.7.3"
+glideVersion = "4.16.0"
 kotlin = "2.1.0"
-coreKtx = "1.15.0"
-fragmentKtx = "1.8.5"
+coreKtx = "1.16.0"
+fragmentKtx = "1.8.6"
 lifecycleKtx = "2.8.7"
-navigation = "2.8.5"
+navigation = "2.8.9"
 junit = "4.13.2"
 appcompat = "1.7.0"
 material = "1.12.0"
-activity = "1.9.3"
-constraintlayout = "2.2.0"
+activity = "1.10.1"
+constraintlayout = "2.2.1"
 coroutines = "1.9.0"
 junitVersion = "1.2.1"
 espressoCore = "3.6.1"
 serialization = "1.7.3"
-datastore = "1.1.1"
+datastore = "1.1.5"
 
 
 [libraries]
+github-glide = { module = "com.github.bumptech.glide:glide", version.ref = "glideVersion" }
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
 kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "coroutines" }
 kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "coroutines" }