diff --git a/.teamcity/documentation/builds/WritersideBuilder.kt b/.teamcity/documentation/builds/WritersideBuilder.kt
index 24b408ad47e..90f3c5b7f52 100644
--- a/.teamcity/documentation/builds/WritersideBuilder.kt
+++ b/.teamcity/documentation/builds/WritersideBuilder.kt
@@ -13,7 +13,7 @@ abstract class WritersideBuilder(
     customInit: BuildType.() -> Unit = {},
     postProcessAdditions: String = postProcessingScript(),
 ) : BuildType({
-    val dockerImageTag = "2.1.2180-p8506"
+    val dockerImageTag = "2.1.2233-p8891"
     val frontend = "file:///opt/static/"
 
     name = "${instance.uppercase()} documentation build"
diff --git a/docs/kr.tree b/docs/kr.tree
index f99e98731bd..37e89e0d951 100644
--- a/docs/kr.tree
+++ b/docs/kr.tree
@@ -3,23 +3,28 @@
 <instance-profile id="kr" name="Kotlin" start-page="home.topic" status="release">
     <toc-element toc-title="Home" topic="home.topic"/>
     <toc-element toc-title="Get started" topic="getting-started.md"/>
-    <toc-element toc-title="Take Kotlin tour" topic="kotlin-tour-welcome.md">
-        <toc-element hidden="true" topic="kotlin-tour-hello-world.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-basic-types.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-collections.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-control-flow.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-classes.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-null-safety.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-extension-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-scope-functions.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-lambdas-receiver.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-classes-interfaces.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-objects.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-open-special-classes.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-properties.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-null-safety.md"/>
-        <toc-element hidden="true" topic="kotlin-tour-intermediate-libraries-and-apis.md"/>
+    <toc-element toc-title="Take Kotlin tour">
+        <toc-element toc-title="Kotlin tour overview" topic="kotlin-tour-welcome.md"/>
+        <toc-element toc-title="Beginner" progress-tracking="true" exclude-from-search="true">
+            <toc-element topic="kotlin-tour-hello-world.md"/>
+            <toc-element topic="kotlin-tour-basic-types.md"/>
+            <toc-element topic="kotlin-tour-collections.md"/>
+            <toc-element topic="kotlin-tour-control-flow.md"/>
+            <toc-element topic="kotlin-tour-functions.md"/>
+            <toc-element topic="kotlin-tour-classes.md"/>
+            <toc-element topic="kotlin-tour-null-safety.md"/>
+        </toc-element>
+        <toc-element toc-title="Intermediate" progress-tracking="true" exclude-from-search="true">
+            <toc-element topic="kotlin-tour-intermediate-extension-functions.md"/>
+            <toc-element topic="kotlin-tour-intermediate-scope-functions.md"/>
+            <toc-element topic="kotlin-tour-intermediate-lambdas-receiver.md"/>
+            <toc-element topic="kotlin-tour-intermediate-classes-interfaces.md"/>
+            <toc-element topic="kotlin-tour-intermediate-objects.md"/>
+            <toc-element topic="kotlin-tour-intermediate-open-special-classes.md"/>
+            <toc-element topic="kotlin-tour-intermediate-properties.md"/>
+            <toc-element topic="kotlin-tour-intermediate-null-safety.md"/>
+            <toc-element topic="kotlin-tour-intermediate-libraries-and-apis.md"/>
+        </toc-element>
     </toc-element>
     <toc-element toc-title="What's new in Kotlin">
         <toc-element toc-title="Kotlin 2.4.20-Beta1" topic="whatsnew-eap.md"/>
diff --git a/docs/topics/tour/kotlin-tour-basic-types.md b/docs/topics/tour/kotlin-tour-basic-types.md
index 712440d1793..ce6369cee18 100644
--- a/docs/topics/tour/kotlin-tour-basic-types.md
+++ b/docs/topics/tour/kotlin-tour-basic-types.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2.svg" width="20" alt="Second step" /> <strong>Basic types</strong><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Every variable and data structure in Kotlin has a type. Types are important because they tell the compiler what you are allowed to 
 do with that variable or data structure. In other words, what functions and properties it has.
@@ -99,7 +90,7 @@ fun main() {
 
 Now that you know how to declare basic types, it's time to learn about [collections](kotlin-tour-collections.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -131,7 +122,14 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-basic-types-solution"}
 
-## Next step
+<seealso></seealso>
 
-[Collections](kotlin-tour-collections.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-hello-world.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-collections.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
 
diff --git a/docs/topics/tour/kotlin-tour-classes.md b/docs/topics/tour/kotlin-tour-classes.md
index 45b7f56d218..84485411c1e 100644
--- a/docs/topics/tour/kotlin-tour-classes.md
+++ b/docs/topics/tour/kotlin-tour-classes.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6.svg" width="20" alt="Sixth step" /> <strong>Classes</strong><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Kotlin supports object-oriented programming with classes and objects. Objects are useful for storing data in your program.
 Classes allow you to declare a set of characteristics for an object. When you create objects from a class, you can save
@@ -255,7 +246,7 @@ For more information about data classes, see [Data classes](data-classes.md).
 
 The last chapter of this tour is about Kotlin's [null safety](kotlin-tour-null-safety.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -396,6 +387,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-classes-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Null safety](kotlin-tour-null-safety.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-functions.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-null-safety.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-collections.md b/docs/topics/tour/kotlin-tour-collections.md
index 15ce820b734..fdca0011270 100644
--- a/docs/topics/tour/kotlin-tour-collections.md
+++ b/docs/topics/tour/kotlin-tour-collections.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3.svg" width="20" alt="Third step" /> <strong>Collections</strong><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 When programming, it is useful to be able to group data into structures for later processing. Kotlin provides collections
 for exactly this purpose.
@@ -427,7 +418,7 @@ For more information on what you can do with collections, see [Collections](coll
 Now that you know about basic types and how to manage collections, it's time to explore the [control flow](kotlin-tour-control-flow.md)
 that you can use in your programs.
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -514,6 +505,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-collections-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Control flow](kotlin-tour-control-flow.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-basic-types.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-control-flow.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-control-flow.md b/docs/topics/tour/kotlin-tour-control-flow.md
index 5ead06ed77d..f604e8f9585 100644
--- a/docs/topics/tour/kotlin-tour-control-flow.md
+++ b/docs/topics/tour/kotlin-tour-control-flow.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4.svg" width="20" alt="Fourth step" /> <strong>Control flow</strong><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Like other programming languages, Kotlin is capable of making decisions based on whether a piece of code is evaluated to
 be true. Such pieces of code are called **conditional expressions**. Kotlin is also able to create and iterate
@@ -391,7 +382,7 @@ For more information and examples of conditional expressions and loops, see [Con
 
 Now that you know the fundamentals of Kotlin control flow, it's time to learn how to write your own [functions](kotlin-tour-functions.md).
 
-## Loops practice
+## Loops practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="loops-exercise-1"}
 
@@ -532,6 +523,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-control-flow-loops-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Functions](kotlin-tour-functions.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-collections.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-functions.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-functions.md b/docs/topics/tour/kotlin-tour-functions.md
index dfd24ac6195..69a50a62f98 100644
--- a/docs/topics/tour/kotlin-tour-functions.md
+++ b/docs/topics/tour/kotlin-tour-functions.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5.svg" width="20" alt="Fifth step" /> <strong>Functions</strong><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 You can declare your own functions in Kotlin using the `fun` keyword.
 
@@ -561,7 +552,7 @@ For more information on lambda expressions, see [Lambda expressions and anonymou
 
 The next step in our tour is to learn about [classes](kotlin-tour-classes.md) in Kotlin.
 
-## Lambda expressions practice
+## Lambda expressions practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="lambdas-exercise-1"}
 
@@ -626,6 +617,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-lambdas-solution-2"}
 
-## Next step
+<seealso></seealso>
 
-[Classes](kotlin-tour-classes.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-control-flow.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-classes.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-hello-world.md b/docs/topics/tour/kotlin-tour-hello-world.md
index 49c8f95e1bd..c8f842698ba 100644
--- a/docs/topics/tour/kotlin-tour-hello-world.md
+++ b/docs/topics/tour/kotlin-tour-hello-world.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1.svg" width="20" alt="First step" /> <strong>Hello world</strong><br />
-        <img src="icon-2-todo.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Final step" /> <a href="kotlin-tour-null-safety.md">Null safety</a></p>
-</tldr>
 
 Here is a simple program that prints "Hello, world!":
 
@@ -105,7 +96,7 @@ For more information, see [String templates](strings.md#string-templates).
 You will notice that there aren't any types declared for variables. Kotlin has inferred the type itself: `Int`. This tour
 explains the different Kotlin basic types and how to declare them in the [next chapter](kotlin-tour-basic-types.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -131,6 +122,11 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-hello-world-solution"}
 
-## Next step
+<seealso></seealso>
+
+<list id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-basic-types.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
 
-[Basic types](kotlin-tour-basic-types.md)
diff --git a/docs/topics/tour/kotlin-tour-intermediate-classes-interfaces.md b/docs/topics/tour/kotlin-tour-intermediate-classes-interfaces.md
index 6f1c7ef32f2..dffe40204f2 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-classes-interfaces.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-classes-interfaces.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Classes and interfaces)
+[//]: # (title: Classes and interfaces)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br /> 
-        <img src="icon-4.svg" width="20" alt="Fourth step" /> <strong>Classes and interfaces</strong><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In the beginner tour, you learned how to use classes and data classes to store data and maintain a collection of characteristics
 that can be shared in your code. Eventually, you will want to create a hierarchy to efficiently share code within your 
@@ -451,7 +440,7 @@ you don't have to add new lines of code for every inherited member function.
 
 For more information, see [Delegation](delegation.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="classes-interfaces-exercise-1"}
 
@@ -792,6 +781,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-classes-interfaces-solution-4"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Objects](kotlin-tour-intermediate-objects.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-lambdas-receiver.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-objects.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-extension-functions.md b/docs/topics/tour/kotlin-tour-intermediate-extension-functions.md
index 2ee8b913c75..6784c2baac6 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-extension-functions.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-extension-functions.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Extension functions)
+[//]: # (title: Extension functions)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1.svg" width="20" alt="First step" /> <strong>Extension functions</strong><br />
-        <img src="icon-2-todo.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In this chapter, you'll explore special Kotlin functions that make your code more concise and readable. Learn how they
 can help you use efficient design patterns to take your projects to the next level.
@@ -119,7 +108,7 @@ to help you work with strings.
 
 For more information about extension functions, see [Extensions](extensions.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="extension-functions-exercise-1"}
 
@@ -180,6 +169,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-extension-functions-solution-2"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Scope functions](kotlin-tour-intermediate-scope-functions.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-null-safety.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-scope-functions.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-lambdas-receiver.md b/docs/topics/tour/kotlin-tour-intermediate-lambdas-receiver.md
index 9c14ff42a38..aa979d0d5df 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-lambdas-receiver.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-lambdas-receiver.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Lambda expressions with receiver)
+[//]: # (title: Lambda expressions with receiver)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3.svg" width="20" alt="Third step" /> <strong>Lambda expressions with receiver</strong><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In this chapter, you'll learn how to use receivers with another type of function, lambda expressions, and how they
 can help you create a domain-specific language.
@@ -171,7 +160,7 @@ standard library.
 >
 {style="tip"}
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="lambda-receivers-exercise-1"}
 
@@ -321,6 +310,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-lambda-receivers-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Classes and interfaces](kotlin-tour-intermediate-classes-interfaces.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-scope-functions.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-classes-interfaces.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-libraries-and-apis.md b/docs/topics/tour/kotlin-tour-intermediate-libraries-and-apis.md
index ee2754e401f..049fd51b8a2 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-libraries-and-apis.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-libraries-and-apis.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Libraries and APIs)
+[//]: # (title: Libraries and APIs)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-done.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-done.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-done.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9.svg" width="20" alt="Ninth step" /> <strong>Libraries and APIs</strong><br /></p>
-</tldr>
 
 To get the most out of Kotlin, use existing libraries and APIs so you can spend more time coding and less time 
 reinventing the wheel.
@@ -176,7 +165,7 @@ fun main() {
 
 This is the easiest way to opt in, but there are other ways. To learn more, see [Opt-in requirements](opt-in-requirements.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="libraries-exercise-1"}
 
@@ -308,3 +297,11 @@ As a next step, check out our tutorials for popular Kotlin applications:
 * Create a cross-platform application for Android and iOS from scratch and:
     * [Share business logic while keeping the UI native](https://kotlinlang.org/docs/multiplatform/multiplatform-create-first-app.html)
     * [Share business logic and UI](https://kotlinlang.org/docs/multiplatform/compose-multiplatform-create-first-app.html)
+
+<seealso></seealso>
+
+<list id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-null-safety.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-null-safety.md b/docs/topics/tour/kotlin-tour-intermediate-null-safety.md
index 4da0d925644..a4ffb0baa11 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-null-safety.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-null-safety.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Null safety)
+[//]: # (title: Null safety)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-done.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-done.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8.svg" width="20" alt="Eighth step" /> <strong>Null safety</strong><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In the beginner tour, you learned how to handle `null` values in your code. This chapter covers common use cases for null
 safety features and how to make the most of them.
@@ -377,7 +366,7 @@ safer by stopping as soon as a `null` value or invalid case is detected.
 
 For more information about how you can use `return` in your code, see [Returns and jumps](returns.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="null-safety-exercise-1"}
 
@@ -693,6 +682,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-null-safety-solution-4"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Libraries and APIs](kotlin-tour-intermediate-libraries-and-apis.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-properties.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-libraries-and-apis.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-objects.md b/docs/topics/tour/kotlin-tour-intermediate-objects.md
index 151a72be292..88668838548 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-objects.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-objects.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Objects)
+[//]: # (title: Objects)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br /> 
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br /> 
-        <img src="icon-5.svg" width="20" alt="Fourth step" /> <strong>Objects</strong><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In this chapter, you'll expand your understanding of classes by exploring object declarations. This knowledge will help 
 you efficiently manage behavior across your projects.
@@ -162,7 +151,7 @@ at this point. The `getBongs()` function is called with parameter `12`.
 
 For more information, see [](object-declarations.md#companion-objects).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="objects-exercise-1"}
 
@@ -350,6 +339,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-objects-solution-3"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Open and special classes](kotlin-tour-intermediate-open-special-classes.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-classes-interfaces.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-open-special-classes.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-open-special-classes.md b/docs/topics/tour/kotlin-tour-intermediate-open-special-classes.md
index f9d5115f0e8..8b89968771b 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-open-special-classes.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-open-special-classes.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Open and special classes)
+[//]: # (title: Open and special classes)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6.svg" width="20" alt="Fourth step" /> <strong>Open and special classes</strong><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In this chapter, you'll learn about open classes, how they work with interfaces, and other special
 types of classes available in Kotlin.
@@ -390,7 +379,7 @@ This can significantly reduce memory footprint and improve your code's runtime p
 
 For more information about inline value classes, see [Inline value classes](inline-classes.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="special-classes-exercise-1"}
 
@@ -563,6 +552,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-special-classes-solution-2"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Properties](kotlin-tour-intermediate-properties.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-objects.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-properties.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-properties.md b/docs/topics/tour/kotlin-tour-intermediate-properties.md
index a8ddaf5989e..3a2a2776c68 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-properties.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-properties.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Properties)
+[//]: # (title: Properties)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-intermediate-scope-functions.md">Scope functions</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-done.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7.svg" width="20" alt="Seventh step" /> <strong>Properties</strong><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In the beginner tour, you learned how properties are used to declare characteristics of class instances and how to access
 them. This chapter digs deeper into how properties work in Kotlin and explores other ways that you can use them in your code.
@@ -426,7 +415,7 @@ updating a UI or to perform additional checks, like verifying the validity of da
 
 For more information, see [Observable properties](delegated-properties.md#observable-properties).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="properties-exercise-1"}
 
@@ -668,6 +657,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-properties-solution-4"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Null safety](kotlin-tour-intermediate-null-safety.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-open-special-classes.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-null-safety.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-intermediate-scope-functions.md b/docs/topics/tour/kotlin-tour-intermediate-scope-functions.md
index 9ccd2d0f826..8e0c9470036 100644
--- a/docs/topics/tour/kotlin-tour-intermediate-scope-functions.md
+++ b/docs/topics/tour/kotlin-tour-intermediate-scope-functions.md
@@ -1,18 +1,7 @@
-[//]: # (title: Intermediate: Scope functions)
+[//]: # (title: Scope functions)
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-intermediate-extension-functions.md">Extension functions</a><br />
-        <img src="icon-2.svg" width="20" alt="Second step" /> <strong>Scope functions</strong><br />
-        <img src="icon-3-todo.svg" width="20" alt="Third step" /> <a href="kotlin-tour-intermediate-lambdas-receiver.md">Lambda expressions with receiver</a><br />
-        <img src="icon-4-todo.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-intermediate-classes-interfaces.md">Classes and interfaces</a><br />
-        <img src="icon-5-todo.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-intermediate-objects.md">Objects</a><br />
-        <img src="icon-6-todo.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-intermediate-open-special-classes.md">Open and special classes</a><br />
-        <img src="icon-7-todo.svg" width="20" alt="Seventh step" /> <a href="kotlin-tour-intermediate-properties.md">Properties</a><br />
-        <img src="icon-8-todo.svg" width="20" alt="Eighth step" /> <a href="kotlin-tour-intermediate-null-safety.md">Null safety</a><br />
-        <img src="icon-9-todo.svg" width="20" alt="Ninth step" /> <a href="kotlin-tour-intermediate-libraries-and-apis.md">Libraries and APIs</a></p>
-</tldr>
 
 In this chapter, you'll build on your understanding of extension functions to learn how to use scope functions to 
 write more idiomatic code.
@@ -426,7 +415,7 @@ of how these functions work in order to use them in your code.
 
 For more information about scope functions, see [Scope functions](scope-functions.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise 1 {initial-collapse-state="collapsed" collapsible="true" id="scope-functions-exercise-1"}
 
@@ -547,6 +536,13 @@ fun main() {
 ```
 {initial-collapse-state="collapsed" collapsible="true" collapsed-title="Example solution" id="kotlin-tour-scope-functions-solution-2"}
 
-## Next step
+<seealso></seealso>
 
-[Intermediate: Lambda expressions with receiver](kotlin-tour-intermediate-lambdas-receiver.md)
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-extension-functions.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-lambdas-receiver.md" mode="classic" icon="arrow-right" icon-position="right">Next step</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-null-safety.md b/docs/topics/tour/kotlin-tour-null-safety.md
index 00cb968a717..6fd8caeecb3 100644
--- a/docs/topics/tour/kotlin-tour-null-safety.md
+++ b/docs/topics/tour/kotlin-tour-null-safety.md
@@ -2,15 +2,6 @@
 
 <no-index/>
 
-<tldr>
-    <p><img src="icon-1-done.svg" width="20" alt="First step" /> <a href="kotlin-tour-hello-world.md">Hello world</a><br />
-        <img src="icon-2-done.svg" width="20" alt="Second step" /> <a href="kotlin-tour-basic-types.md">Basic types</a><br />
-        <img src="icon-3-done.svg" width="20" alt="Third step" /> <a href="kotlin-tour-collections.md">Collections</a><br />
-        <img src="icon-4-done.svg" width="20" alt="Fourth step" /> <a href="kotlin-tour-control-flow.md">Control flow</a><br />
-        <img src="icon-5-done.svg" width="20" alt="Fifth step" /> <a href="kotlin-tour-functions.md">Functions</a><br />
-        <img src="icon-6-done.svg" width="20" alt="Sixth step" /> <a href="kotlin-tour-classes.md">Classes</a><br />
-        <img src="icon-7.svg" width="20" alt="Final step" /> <strong>Null safety</strong><br /></p>
-</tldr>
 
 In Kotlin, it's possible to have a `null` value. Kotlin uses `null` values when something is missing or not yet set.
 You've already seen an example of Kotlin returning a `null` value in the [Collections](kotlin-tour-collections.md#kotlin-tour-map-no-key)
@@ -156,7 +147,7 @@ fun main() {
 
 For more information about null safety in Kotlin, see [Null safety](null-safety.md).
 
-## Practice
+## Practice {completion-point="true"}
 
 ### Exercise {initial-collapse-state="collapsed" collapsible="true"}
 
@@ -209,4 +200,13 @@ fun main() {
 Congratulations! Now that you have completed the beginner tour, take your understanding of Kotlin to the next level with
 our intermediate tour:
 
-<a href="kotlin-tour-intermediate-extension-functions.md"><img src="start-intermediate-tour.svg" width="700" alt="Start the intermediate Kotlin tour" style="block"/></a>
+<seealso></seealso>
+
+<list columns="2" id="tour-nav">
+  <li>
+    <a as="button" href="kotlin-tour-classes.md" mode="outline" icon="arrow-left" icon-position="left">Previous step</a>
+  </li>
+  <li>
+    <a as="button" href="kotlin-tour-intermediate-extension-functions.md" mode="classic" icon="arrow-right" icon-position="right">Start intermediate Kotlin tour</a>
+  </li>
+</list>
diff --git a/docs/topics/tour/kotlin-tour-welcome.md b/docs/topics/tour/kotlin-tour-welcome.md
index 20825a4bf9e..4fa903e174e 100644
--- a/docs/topics/tour/kotlin-tour-welcome.md
+++ b/docs/topics/tour/kotlin-tour-welcome.md
@@ -10,12 +10,12 @@ Quickly learn the essentials of the Kotlin programming language through our tour
 tour. Deepen your understanding with the intermediate tour.
 
 <p></p> <!-- workaround for MRK057: Paragraph can only contain inline elements-->
-<list columns="2">
+<list columns="2" id="kotlin-tour-starting-page">
     <li>
-        <a href="kotlin-tour-hello-world.md"><img src="kotlin-tour-beginner.svg" alt="Start the beginner Kotlin tour" type="block"/></a>
+        <a href="kotlin-tour-hello-world.md" as="button" icon="arrow-right" icon-position="right">Beginner</a>
     </li>
     <li>
-        <a href="kotlin-tour-intermediate-extension-functions.md"><img src="kotlin-tour-intermediate.svg" alt="Start the intermediate Kotlin tour" type="block"/></a>
+        <a href="kotlin-tour-intermediate-extension-functions.md" as="button" icon="arrow-right" icon-position="right">Intermediate</a>
     </li>
     <li>
         <p><img src="icon-1.svg" width="20" /> <a href="kotlin-tour-hello-world.md">Hello world</a></p>