diff --git a/docs/cookbook/aspect-ratio.md b/docs/cookbook/aspect-ratio.md
index 264dc88..e85feda 100644
--- a/docs/cookbook/aspect-ratio.md
+++ b/docs/cookbook/aspect-ratio.md
@@ -1,9 +1,14 @@
-# Cookbook
-
-## Setting Aspect Ratio for Blurry Placeholders
+# Aspect Ratio for Blurry Placeholders
 
 In certain cases, the blurry placeholder might not have the full image width and height. To ensure that the layout does not change when the full-quality image loads and to maintain a consistent user experience, you can add the `aspect-ratio` CSS property to the `style` attribute to your images.
 
+By setting the aspect ratio for your blurry placeholders, you can:
+
+- Prevent layout shifts as the full-quality image loads.
+- Ensure that the image container maintains its dimensions even before the full-quality image is loaded.
+
+## Usage
+
 Calculate the aspect ratio using the dimensions of the full-quality image (width / height) and apply it to the `<img>` tag:
 
 ```html
@@ -14,11 +19,6 @@ Calculate the aspect ratio using the dimensions of the full-quality image (width
   data-sizes="auto"
   width="1600"
   height="900"
-  style="aspect-ratio: 16 / 9;"
+  style="aspect-ratio: 16/9;"
 >
 ```
-
-By setting the aspect ratio for your blurry placeholders, you can:
-
-- Prevent layout shifts as the full-quality image loads.
-- Ensure that the image container maintains its dimensions even before the full-quality image is loaded.
diff --git a/docs/cookbook/index.md b/docs/cookbook/index.md
index 741ecbe..a80dac0 100644
--- a/docs/cookbook/index.md
+++ b/docs/cookbook/index.md
@@ -1 +1,5 @@
 # Cookbook
+
+This is a collection of recipes for common use cases, since unlazy is a flexible library that can be used in many ways. If you have a use case that is not covered here, please [open an issue](https://github.com/johannschopplich/unlazy/issues).
+
+- [Aspect Ratio for Blurry Placeholders](/cookbook/aspect-ratio)