diff --git a/docs/api/autoplay.mdx b/docs/api/autoplay.mdx
index a168df22..6680f1c6 100644
--- a/docs/api/autoplay.mdx
+++ b/docs/api/autoplay.mdx
@@ -31,29 +31,3 @@ For accessibility, the carousel will pause when the user is interacting with it.
```
-
-## Initial page
-
-The carousel can start on any index within bounds of its length. Anything out of bounds will default back to `0` for its index. This list is `0` indexed.
-
-| Prop Name | Type | Default Value |
-| :------------ | :----- | :------------ |
-| `initialPage` | number | `0` |
-
-### Example
-
-
-
-
-
-
-
-#### Code
-
-```tsx
-
-
-
-
-
-```
diff --git a/docs/api/index.mdx b/docs/api/index.mdx
index bd77cfb1..fc47765c 100644
--- a/docs/api/index.mdx
+++ b/docs/api/index.mdx
@@ -78,12 +78,12 @@ Feel free to mix React components and HTML elements as children. Nuka Carousel w
:::caution
-Nuka Carousel uses a flex container for its magic
-
-:::
+### Nuka Carousel uses a flex container to hold its contents.
In order for Nuka to measure your slides, they must have a width that can be calculated.
+:::
+
### Images
If you're using images, Nuka will correctly calculate the width and height of the image after it has loaded.
@@ -114,6 +114,12 @@ However, it's recommended to set the width and height of the image in the HTML t
When using HTML block elements, such as `div`, you must set the min width in the HTML.
+:::info
+
+Most of the examples use Tailwind classes for styling
+
+:::
+
```jsx
.demo-slide {
min-width: 300px;
@@ -145,5 +151,5 @@ function CarouselImage() {
-
+;
```
diff --git a/docs/api/initial-page.mdx b/docs/api/initial-page.mdx
new file mode 100644
index 00000000..d678349c
--- /dev/null
+++ b/docs/api/initial-page.mdx
@@ -0,0 +1,31 @@
+---
+sidebar_position: 4
+---
+
+import { Carousel } from 'nuka-carousel';
+
+# Initial Page
+
+The carousel can start on any index within bounds of its length. Anything out of bounds will default back to `0` for its index. This list is `0` indexed.
+
+| Prop Name | Type | Default Value |
+| :------------ | :----- | :------------ |
+| `initialPage` | number | `0` |
+
+### Example
+
+
+
+
+
+
+
+#### Code
+
+```tsx
+
+
+
+
+
+```
diff --git a/docs/v8-upgrade-guide.mdx b/docs/v8-upgrade-guide.mdx
index 09a12b3e..dac6626c 100644
--- a/docs/v8-upgrade-guide.mdx
+++ b/docs/v8-upgrade-guide.mdx
@@ -45,7 +45,7 @@ The following props were removed becuase they are no longer valid or replaced by
- `pauseOnHover` - Enabled by default. See the autoplay docs.
- `renderTop{direction}Controls`
- `scrollMode` - Defaults to `remainder`.
-- `slideIndex` - Use initialPage to start on a certain page, use goToPage to change indices on command.
+- `slideIndex` - Use initialPage to start on a certain page, use goToPage to change indices on command.
- `slidesToShow` - Now based on media queries and how large the slides are.
- `speed` - Controlled by native browser settings.
- `style` - See the style guide.
- 
- 
-
```
-
-## Initial page
-
-The carousel can start on any index within bounds of its length. Anything out of bounds will default back to `0` for its index. This list is `0` indexed.
-
-| Prop Name | Type | Default Value |
-| :------------ | :----- | :------------ |
-| `initialPage` | number | `0` |
-
-### Example
-
-