diff --git a/source/_lovelace/alarm-panel.markdown b/source/_lovelace/alarm-panel.markdown
index a31020d0ac0..edb26ff053d 100644
--- a/source/_lovelace/alarm-panel.markdown
+++ b/source/_lovelace/alarm-panel.markdown
@@ -4,13 +4,17 @@ sidebar_label: Alarm Panel
 description: "The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations."
 ---
 
-The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations.
+The Alarm Panel card allows you to Arm and Disarm your [alarm control panel](/integrations/#alarm) integrations.
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
 Screenshot of the Alarm Panel card.
 </p>
 
+To add the Alarm Panel card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Alarm Panel** from the card picker. All options for this card can be configured via the user interface.
+
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: alarm-panel
 entity: alarm_control_panel.alarm
diff --git a/source/_lovelace/button.markdown b/source/_lovelace/button.markdown
index cfb15ad8e7e..683015300eb 100644
--- a/source/_lovelace/button.markdown
+++ b/source/_lovelace/button.markdown
@@ -11,6 +11,10 @@ The Button card allows you to add buttons to perform tasks.
 Screenshot of the Button card.
 </p>
 
+To add the Button card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Button** from the card picker. All options for this card can be configured via the user interface.
+
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: button
 entity: light.living_room
diff --git a/source/_lovelace/calendar.markdown b/source/_lovelace/calendar.markdown
index cd01ccb4366..2194b4e9c70 100644
--- a/source/_lovelace/calendar.markdown
+++ b/source/_lovelace/calendar.markdown
@@ -4,13 +4,15 @@ sidebar_label: Calendar
 description: "The calendar card displays your calendar entities in a month, day and list view"
 ---
 
-The Calendar card displays your calendar entities in a month, day and list view.
+The Calendar card displays your [calendar](/integrations/#calendar) entities in a month, day and list view.
 
 <p class='img'>
   <img src='/images/lovelace/lovelace_calendar_card.png' alt='Screenshot of the calendar card'>
-  Screenshot of the calendar card.
+  Screenshot of the Calendar card.
 </p>
 
+To add the Calendar card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Calendar** from the card picker. All options for this card can be configured via the user interface.
+
 ### Card Settings
 
 {% configuration_basic %}
diff --git a/source/_lovelace/conditional.markdown b/source/_lovelace/conditional.markdown
index a82ba6c9212..eceb1dc9efd 100644
--- a/source/_lovelace/conditional.markdown
+++ b/source/_lovelace/conditional.markdown
@@ -6,6 +6,8 @@ description: The Conditional card displays another card based on entity states.
 
 The Conditional card displays another card based on entity states.
 
+To add the Conditional card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Conditional** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
diff --git a/source/_lovelace/entities.markdown b/source/_lovelace/entities.markdown
index f6f4bd443c9..91b8cc1acc0 100644
--- a/source/_lovelace/entities.markdown
+++ b/source/_lovelace/entities.markdown
@@ -6,6 +6,8 @@ description: "The Entities card is the most common type of card. It groups items
 
 The Entities card is the most common type of card. It groups items together into lists.
 
+To add the Entities card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Entities** from the card picker.
+
 {% configuration %}
 type:
   required: true
diff --git a/source/_lovelace/entity.markdown b/source/_lovelace/entity.markdown
index 737fd6e3265..82cae39e3b3 100644
--- a/source/_lovelace/entity.markdown
+++ b/source/_lovelace/entity.markdown
@@ -8,9 +8,11 @@ The Entity card gives you a quick overview of your entity's state.
 
 <p class='img'>
   <img src='/images/lovelace/lovelace_entity_card.png' alt='Screenshot of the entity card'>
-  Screenshot of the entity card.
+  Screenshot of the Entity card.
 </p>
 
+To add the Entity card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Entity** from the card picker.
+
 {% configuration %}
 type:
   required: true
@@ -50,6 +52,8 @@ footer:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 - type: entity
   entity: cover.kitchen_window
diff --git a/source/_lovelace/gauge.markdown b/source/_lovelace/gauge.markdown
index 4d0f362f1ac..2afea9267ad 100644
--- a/source/_lovelace/gauge.markdown
+++ b/source/_lovelace/gauge.markdown
@@ -8,9 +8,13 @@ The Gauge card is a basic card that allows visually seeing sensor data.
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_gauge_card.gif' alt='Screenshot of the gauge card'>
-Screenshot of the gauge card.
+Screenshot of the Gauge card.
 </p>
 
+To add the Gauge card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface.
+
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: gauge
 entity: sensor.cpu_usage
diff --git a/source/_lovelace/glance.markdown b/source/_lovelace/glance.markdown
index 45b808d4c9f..bc6d15a4c1e 100644
--- a/source/_lovelace/glance.markdown
+++ b/source/_lovelace/glance.markdown
@@ -8,9 +8,11 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_glance_card.png' alt='Screenshot of the glance card'>
-Screenshot of the glance card.
+Screenshot of the Glance card.
 </p>
 
+To add the Glance card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Glance** from the card picker.
+
 {% configuration %}
 type:
   required: true
diff --git a/source/_lovelace/history-graph.markdown b/source/_lovelace/history-graph.markdown
index 04fa9819ced..f5669bfd83c 100644
--- a/source/_lovelace/history-graph.markdown
+++ b/source/_lovelace/history-graph.markdown
@@ -8,14 +8,16 @@ The History Graph card allows you to display a graph for each of the entities li
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_history_graph.png' alt='Screenshot of the history graph card for entities without a unit_of_measurement'>
-Screenshot of the history graph card, when the sensor has no `unit_of_measurement` defined.
+Screenshot of the History Graph card, when the sensor has no `unit_of_measurement` defined.
 </p>
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_history_graph_lines.png' alt='Screenshot of the history graph card for entities with a unit_of_measurement'>
-Screenshot of the history graph card, when the sensor has a `unit_of_measurement` defined.
+Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
 </p>
 
+To add the History Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **History Graph** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -58,6 +60,8 @@ name:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: history-graph
 title: 'My Graph'
diff --git a/source/_lovelace/horizontal-stack.markdown b/source/_lovelace/horizontal-stack.markdown
index 4fc74ed3aa3..fdbfaf6607f 100644
--- a/source/_lovelace/horizontal-stack.markdown
+++ b/source/_lovelace/horizontal-stack.markdown
@@ -6,6 +6,8 @@ description: "The Horizontal Stack card allows you to stack together multiple ca
 
 The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column.
 
+To add the Horizontal Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Horizontal Stack** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -37,5 +39,5 @@ cards:
 
 <p class='img'>
   <img src='/images/lovelace/lovelace_horizontal_stack.PNG' alt='Two picture cards in a horizontal stack card'>
-  Two picture cards in a horizontal stack card.
+  Two Picture cards in a Horizontal Stack card.
 </p>
diff --git a/source/_lovelace/humidifier.markdown b/source/_lovelace/humidifier.markdown
index ce853fbfc8f..3735d50d1ed 100644
--- a/source/_lovelace/humidifier.markdown
+++ b/source/_lovelace/humidifier.markdown
@@ -11,6 +11,8 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and
   Screenshot of the humidifier card.
 </p>
 
+To add the Humidifier card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Humidifier** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -33,6 +35,8 @@ theme:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 - type: humidifier
   entity: humidifier.bedroom
diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown
index 24db48ba9ee..71490ecd710 100644
--- a/source/_lovelace/iframe.markdown
+++ b/source/_lovelace/iframe.markdown
@@ -15,6 +15,8 @@ You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
   Windy weather radar as Webpage.
 </p>
 
+To add the Webpage card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Webpage** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -37,6 +39,8 @@ title:
 
 ### Examples
 
+The card can also be configured using YAML, some examples below:
+
 ```yaml
 type: iframe
 url: https://grafana.localhost/d/000000027/worldping-endpoint-summary?var-probe=All&panelId=2&fullscreen&orgId=3&theme=light
diff --git a/source/_lovelace/light.markdown b/source/_lovelace/light.markdown
index 013e1b93117..97f7a73aca3 100644
--- a/source/_lovelace/light.markdown
+++ b/source/_lovelace/light.markdown
@@ -11,6 +11,10 @@ The Light card allows you to change the brightness of the light.
 Screenshot of the Light card.
 </p>
 
+To add the Light card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Light** from the card picker. All options for this card can be configured via the user interface.
+
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: light
 entity: light.bedroom
diff --git a/source/_lovelace/map.markdown b/source/_lovelace/map.markdown
index 611ad44655c..75f83599340 100644
--- a/source/_lovelace/map.markdown
+++ b/source/_lovelace/map.markdown
@@ -11,6 +11,8 @@ The Map card that allows you to display entities on a map
 Screenshot of the map card.
 </p>
 
+To add the Map card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Map** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -63,6 +65,8 @@ hours_to_show:
 
 ## Examples
 
+The card can also be configured using YAML, some examples below:
+
 ```yaml
 type: map
 aspect_ratio: 16:9
diff --git a/source/_lovelace/markdown.markdown b/source/_lovelace/markdown.markdown
index 6b443900371..2de258affc3 100644
--- a/source/_lovelace/markdown.markdown
+++ b/source/_lovelace/markdown.markdown
@@ -10,9 +10,11 @@ The renderer uses [Marked.js](https://marked.js.org), which supports [several sp
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_markdown.png' alt='Screenshot of the markdown card'>
-Screenshot of the markdown card.
+Screenshot of the Markdown card.
 </p>
 
+To add the Markdown card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Markdown** from the card picker.
+
 {% configuration %}
 type:
   required: true
@@ -45,6 +47,8 @@ theme:
 
 ## Example
 
+The card can also be configured using YAML, some examples below:
+
 ```yaml
 type: markdown
 content: >
diff --git a/source/_lovelace/media-control.markdown b/source/_lovelace/media-control.markdown
index 61460487489..181662cc289 100644
--- a/source/_lovelace/media-control.markdown
+++ b/source/_lovelace/media-control.markdown
@@ -8,9 +8,11 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_mediaplayer.png' alt='Screenshot of the media player control card'>
-Screenshot of the media player control card.
+Screenshot of the Media Control card.
 </p>
 
+To add the Media Control card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Media Control** from the card picker.
+
 {% configuration %}
 type:
   required: true
@@ -29,6 +31,8 @@ name:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: media-control
 entity: media_player.lounge_room
diff --git a/source/_lovelace/plant-status.markdown b/source/_lovelace/plant-status.markdown
index 221345752a1..edcbd4912f6 100644
--- a/source/_lovelace/plant-status.markdown
+++ b/source/_lovelace/plant-status.markdown
@@ -11,6 +11,8 @@ The Plant Status card is for all the lovely botanists out there.
 Screenshot of the plant status card.
 </p>
 
+To add the Plant Status card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Plant Status** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -33,6 +35,8 @@ theme:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: plant-status
 entity: plant.bonsai
diff --git a/source/_lovelace/sensor.markdown b/source/_lovelace/sensor.markdown
index d47eef1de3a..01949b77cc8 100644
--- a/source/_lovelace/sensor.markdown
+++ b/source/_lovelace/sensor.markdown
@@ -11,6 +11,8 @@ The Sensor card gives you a quick overview of your sensors state with an optiona
   Screenshot of the sensor card.
 </p>
 
+To add the Sensor card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Sensor** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -54,6 +56,8 @@ theme:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: sensor
 entity: sensor.illumination
diff --git a/source/_lovelace/shopping-list.markdown b/source/_lovelace/shopping-list.markdown
index 276128687cc..ba1893b3960 100644
--- a/source/_lovelace/shopping-list.markdown
+++ b/source/_lovelace/shopping-list.markdown
@@ -6,13 +6,18 @@ description: "The Shopping List card allows you to add, edit, check-off, and cle
 
 The Shopping List card allows you to add, edit, check-off, and clear items from your shopping list.
 
-Setup of the [Shopping List Intent](/integrations/shopping_list/) is required
+Setup of the [Shopping List integration](/integrations/shopping_list/) is required.
 
 <p class='img'>
 <img src='/images/lovelace/lovelace_shopping_list_card.gif' alt='Screenshot of the shopping list card'>
 Screenshot of the Shopping List card.
 </p>
 
+
+To add the Shopping List card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Shopping List** from the card picker. All options for this card can be configured via the user interface.
+
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: shopping-list
 ```
diff --git a/source/_lovelace/thermostat.markdown b/source/_lovelace/thermostat.markdown
index b56883fe984..ffba79e7b41 100644
--- a/source/_lovelace/thermostat.markdown
+++ b/source/_lovelace/thermostat.markdown
@@ -1,16 +1,18 @@
 ---
 title: "Thermostat Card"
 sidebar_label: Thermostat
-description: "The Thermostat card gives control of your climate entity. Allowing you to change the temperature and mode of the entity."
+description: "The Thermostat card gives control of your climate entity, allowing you to change the temperature and mode of the entity."
 ---
 
-The Thermostat card gives control of your climate entity. Allowing you to change the temperature and mode of the entity.
+The Thermostat card gives control of your [climate](/integrations/#climate) entity, allowing you to change the temperature and mode of the entity.
 
 <p class='img'>
   <img src='/images/lovelace/lovelace_thermostat_card.gif' alt='Screenshot of the thermostat card'>
-  Screenshot of the thermostat card.
+  Screenshot of the Thermostat card.
 </p>
 
+To add the Thermostat card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Thermostat** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -33,6 +35,8 @@ theme:
 
 ## Example
 
+Alternatively, the card can be configured using YAML:
+
 ```yaml
 type: thermostat
 entity: climate.nest
diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown
index 6d12f2dc03c..23bb093243e 100644
--- a/source/_lovelace/vertical-stack.markdown
+++ b/source/_lovelace/vertical-stack.markdown
@@ -6,6 +6,8 @@ description: "The Vertical Stack card allows you to group multiple cards so they
 
 The Vertical Stack card allows you to group multiple cards so they always sit in the same column.
 
+To add the Vertical Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Vertical Stack** from the card picker. All options for this card can be configured via the user interface.
+
 {% configuration %}
 type:
   required: true
@@ -23,6 +25,8 @@ cards:
 
 ### Examples
 
+Alternatively, the card can be configured using YAML:
+
 Basic example:
 
 ```yaml
@@ -39,7 +43,7 @@ cards:
 
 <p class="img">
   <img src="/images/lovelace/lovelace_vertical-stack.png" alt="Picture- and entities-card in a stack">
-  Picture- and entities-card in a stack.
+  Picture and entities-card in a stack.
 </p>
 
 Combination of vertical and horizontal stack card:
diff --git a/source/_lovelace/weather-forecast.markdown b/source/_lovelace/weather-forecast.markdown
index f8f47cb37db..b363b5d32e0 100644
--- a/source/_lovelace/weather-forecast.markdown
+++ b/source/_lovelace/weather-forecast.markdown
@@ -8,9 +8,10 @@ The Weather Forecast card displays the weather. Very useful to include on interf
 
 <p class='img'>
   <img src='/images/lovelace/lovelace_weather.png' alt='Screenshot of the weather card'>
-  Screenshot of the weather card.
+  Screenshot of the Weather card.
 </p>
 
+To add the Weather card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Weather** from the card picker.
 
 ### Card Settings
 
@@ -83,7 +84,7 @@ entity: weather.openweathermap
 
 ##### Themeable Icons
 
-The default weather icons are themable via a [Theme](https://www.home-assistant.io/integrations/frontend/#themes). Theme variables include: 
+The default weather icons are themable via a [theme](/integrations/frontend/#themes). Theme variables include: 
 
 ```yaml
 --weather-icon-cloud-front-color
@@ -106,7 +107,7 @@ Example theme configuration:
 
 ##### Personal Icons
 
-Weather icons can be overwritten with your own personal images via a [Theme](https://www.home-assistant.io/integrations/frontend/#themes). Theme variables include:
+Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include:
 
 ```yaml
 --weather-icon-clear-night