diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 84c0d8f..844c736 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -8,11 +8,29 @@ export default defineConfig({
   lastUpdated: true,
   themeConfig: {
     nav: [
-      { text: 'Guide', link: '/guide' },
-      { text: 'Github', link: 'https://github.com/anatolykopyl/vue-three-d-mockup' }
+      { text: 'Guide', link: '/guide/' },
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Screen from assets', link: '/guide/screen-from-assets' },
+          { text: 'Video as screen', link: '/guide/video-as-screen' },
+          { text: 'Multiple mockups', link: '/guide/multiple-mockups' },
+          { text: 'Theming', link: '/guide/theming' },
+          { text: 'Props', link: '/guide/props' },
+        ]
+      }
     ],
     footer: {
       message: 'Released under the GPL-3.0 license.',
-    }
+    },
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/anatolykopyl/vue-three-d-mockup'
+      }
+    ]
   }
 })
diff --git a/docs/guide.md b/docs/guide.md
deleted file mode 100644
index 976ad4d..0000000
--- a/docs/guide.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# Guide
-
-## Installation
-
-```bash
-npm install vue-three-d-mockup
-```
-
-## Usage
-
-<script setup>
-import { ref } from 'vue';
-import Mockup from '../src/Mockup.vue'
-import screenImage from './assets/screen.png';
-import screenVideo from './assets/screen.mp4';
-
-const videoElement = ref(null);
-const vidReady = ref(false);
-</script>
-
-<Mockup
-  style="width: 100%; height: 400px;"
-  :screen="screenImage"
-/>
-
-### Simple example
-
-`screen.png` is a static asset in the public folder.
-
-```vue
-<template>
-  <Mockup screen="screen.png" />
-</template>
-
-<script setup>
-import Mockup from 'vue-three-d-mockup';
-</script>
-```
-
-### Using assets as the screen
-
-- #### In vite powered projects
-
-```vue
-<template>
-  <Mockup :screen="screenImage" />
-</template>
-
-<script setup>
-import Mockup from 'vue-three-d-mockup';
-import screenImage from './assets/screen.png';
-</script>
-```
-
-- #### In vue-cli powered projects
-
-```vue
-<template>
-  <Mockup :screen="require('./assets/screen.png')" />
-</template>
-
-<script setup>
-import Mockup from 'vue-three-d-mockup';
-</script>
-```
-
-### Multiple phones
-
-<Mockup
-  style="width: 100%; height: 400px;"
-  :screen="[screenImage, screenImage]"
-  :position="[
-    {
-      x: -50
-    },
-    {
-      x: 50
-    },
-  ]"
-  :rotation="[{}, {
-    y: -0.3,
-    z: -0.06,
-  }]"
-/>
-
-```vue
-<template>
-  <Mockup 
-    :screen="[screenImage, screenImage]"
-    :position="[
-      {
-        x: -50
-      },
-      {
-        x: 50
-      },
-    ]"
-    :rotation="[{}, {
-      y: -0.3,
-      z: -0.06,
-    }]" 
-  />
-</template>
-
-<script setup>
-import Mockup from 'vue-three-d-mockup';
-import screenImage from './assets/screen.png';
-</script>
-```
-
-### Video
-
-<Mockup
-  v-if="vidReady"
-  style="width: 100%; height: 400px;"
-  :screen="videoElement"
-/>
-
-<div>
-  <video
-    :src="screenVideo"
-    ref="videoElement"
-    @canplay="vidReady = true"
-    muted
-    autoplay
-    loop
-    style="
-      position: fixed;
-      top: 0;
-      left: 0;
-      visibility: hidden;
-    "
-  ></video>
-</div>
-
-```vue
-<template>
-  <Mockup 
-    v-if="vidReady"
-    :screen="videoElement"
-  />
-
-  <video
-    :src="screenVideo"
-    ref="videoElement"
-    @canplay="vidReady = true"
-    muted
-    autoplay
-    loop
-    style="
-      position: fixed;
-      top: 0;
-      left: 0;
-      visibility: hidden;
-    "
-  ></video>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import Mockup from 'vue-three-d-mockup';
-import screenVideo from './assets/screen.mp4';
-
-const videoElement = ref(null);
-const vidReady = ref(false);
-</script>
-```
-
-## Avaliable props
-
-| Prop       | Type                       | Required | Default                        | Description                                                                                                                                                                                                                 |
-| ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `screen`   | String \| Element \| Array | `true`   | none                           | Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. When using the latter there are [caveats](#caveats). Can also be an array of any of the options above. |
-| `lightClr` | String                     | `false`  | `"white"`                      | Color of the light as a CSS-style string.                                                                                                                                                                                   |
-| `phoneClr` | String                     | `false`  | `"white"`                      | Color of the phone as a CSS-style string.                                                                                                                                                                                   |
-| `position` | Object \| Array            | `false`  | `{ x: 0, y: 0, z: 0 }`         | The position of the phone. Can also be an array if multiple screens specified.                                                                                                                                              |  |
-| `rotation` | Object \| Array            | `false`  | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.                                                                                           |
-
-## Caveats
-
-- The `screen` prop is unreactive, so when using it as a video
-  it's important to only render the `Mockup` element when the video
-  is loaded. Check out the examples above to see how
-  to do this.
-- The video on the model will not be shown if the original `<video>`
-  element is hidden with `display: none`, so use `visibility: hidden`
-  instead.
-- The video may not be autoplaying if the original `<video>` element
-  is scrolled off screen.
-- Even with the mentioned above workarounds, the video may not be
-  working in Safari.
diff --git a/docs/guide/index.md b/docs/guide/index.md
new file mode 100644
index 0000000..8c180b5
--- /dev/null
+++ b/docs/guide/index.md
@@ -0,0 +1,31 @@
+# Introduction
+
+## Installation
+
+```bash
+npm install vue-three-d-mockup
+```
+
+## Simple usage example
+
+<script setup>
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="screenImage"
+/>
+
+`screen.png` is a static asset in the public folder.
+
+```vue
+<template>
+  <Mockup screen="screen.png" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+</script>
+```
diff --git a/docs/guide/multiple-mockups.md b/docs/guide/multiple-mockups.md
new file mode 100644
index 0000000..9fbc212
--- /dev/null
+++ b/docs/guide/multiple-mockups.md
@@ -0,0 +1,50 @@
+# Multiple mockups
+
+<script setup>
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="[screenImage, screenImage]"
+  :position="[
+    {
+      x: -50
+    },
+    {
+      x: 50
+    },
+  ]"
+  :rotation="[{}, {
+    y: -0.3,
+    z: -0.06,
+  }]"
+/>
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    :screen="[screenImage, screenImage]"
+    :position="[
+      {
+        x: -50
+      },
+      {
+        x: 50
+      },
+    ]"
+    :rotation="[{}, {
+      y: -0.3,
+      z: -0.06,
+    }]" 
+  />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+import screenImage from './assets/screen.png';
+</script>
+```
\ No newline at end of file
diff --git a/docs/guide/props.md b/docs/guide/props.md
new file mode 100644
index 0000000..f4a028a
--- /dev/null
+++ b/docs/guide/props.md
@@ -0,0 +1,35 @@
+# Props
+
+## `screen`
+Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. Can also be an array of any of the options above.
+
+- Type: `String | Element | Array[String | Element]`
+- Required: `true`
+
+## `lightClr`
+Color of the light as a CSS-style string.
+
+- Type: `String`
+- Required: `false`
+- Default: `"white"`
+
+## `phoneClr`
+Color of the phone as a CSS-style string.
+
+- Type: `String`
+- Required: `false`
+- Default: `"white"`
+
+## `position`
+The position of the phone. Can also be an array if multiple screens specified.
+
+- Type: `Object | Array[Object]`
+- Required: `false`
+- Default: `{ x: 0, y: 0, z: 0 }`
+
+## `rotation`
+The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.
+
+- Type: `Object | Array[Object]`
+- Required: `false`
+- Default: `{ x: -0.2, y: 0.3, z: 0.06 }`
diff --git a/docs/guide/screen-from-assets.md b/docs/guide/screen-from-assets.md
new file mode 100644
index 0000000..5723bc9
--- /dev/null
+++ b/docs/guide/screen-from-assets.md
@@ -0,0 +1,26 @@
+# Screen image from `assets` folder
+
+## In Vite powered projects
+
+```vue
+<template>
+  <Mockup :screen="screenImage" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+import screenImage from './assets/screen.png';
+</script>
+```
+
+## In Vue CLI powered projects
+
+```vue
+<template>
+  <Mockup :screen="require('./assets/screen.png')" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+</script>
+```
\ No newline at end of file
diff --git a/docs/guide/theming.md b/docs/guide/theming.md
new file mode 100644
index 0000000..cf9fd14
--- /dev/null
+++ b/docs/guide/theming.md
@@ -0,0 +1,62 @@
+# Theming
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+
+const darkTheme = ref(true);
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="screenImage"
+  :phoneClr="darkTheme ? '#fff' : '#222'"
+  :key="darkTheme"
+/>
+
+<div>
+  <button
+    class="button"
+    @click="darkTheme = !darkTheme"
+  >
+    Toggle theme
+  </button>
+  Theme: {{ darkTheme ? 'dark' : 'light' }}
+</div>
+
+<style scoped>
+.button {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand);
+  color: var(--vp-c-white);
+  text-decoration: none;
+  font-size: 16px;
+  margin: 0 8px;
+}
+</style>
+
+The `phoneClr` and `lightClr` props are not reactive, and are intended to be set when the component is mounted.
+But if you want to you still can force a rerender by giving the `Mockup` a key.
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    screen="screen.png" 
+    :phoneClr="darkTheme ? '#fff' : '#222'"
+    :key="darkTheme"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from 'vue-three-d-mockup';
+
+const darkTheme = ref(true);
+</script>
+```
diff --git a/docs/guide/video-as-screen.md b/docs/guide/video-as-screen.md
new file mode 100644
index 0000000..9b19965
--- /dev/null
+++ b/docs/guide/video-as-screen.md
@@ -0,0 +1,87 @@
+# Video as screen
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from '../../src/Mockup.vue'
+import screenVideo from '../assets/screen.mp4';
+
+const videoElement = ref(null);
+const vidReady = ref(false);
+</script>
+
+<Mockup
+  v-if="vidReady"
+  style="width: 100%; height: 400px;"
+  :screen="videoElement"
+/>
+
+<div>
+  <video
+    :src="screenVideo"
+    ref="videoElement"
+    @canplay="vidReady = true"
+    muted
+    autoplay
+    loop
+    style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+    "
+  ></video>
+</div>
+
+The `screen` prop accepts a `video` element. 
+
+The `screen` prop is unreactive, so when using it as a video
+it's important to only render the `Mockup` element when the video
+is loaded. Check out the code example to see how to do this.
+
+::: warning
+The video will not be visible on the model if it is set to `display: none` or `visibility: hidden`.
+Use `opacity: 0; pointer-events: none;` on the `<video>` element for best browser compatability.
+:::
+
+::: warning
+The video may not be autoplaying if the original `<video>` element is scrolled off screen.
+Some browsers check for viewport intersection so it may be best to set the video position to `fixed`. 
+:::
+
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    v-if="vidReady"
+    :screen="videoElement"
+  />
+
+  <video
+    :src="screenVideo"
+    ref="videoElement"
+    @canplay="vidReady = true"
+    muted
+    autoplay
+    loop
+    style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+    "
+  ></video>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from 'vue-three-d-mockup';
+import screenVideo from './assets/screen.mp4';
+
+const videoElement = ref(null);
+const vidReady = ref(false);
+</script>
+```
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 8bb19db..c65f81d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,7 +22,7 @@ import screenImage from './assets/screen.png';
 
   <div class="buttons">
     <a 
-      href="/vue-three-d-mockup/guide"
+      href="/vue-three-d-mockup/guide/"
       class="buttons__button"
     >
       Guide
diff --git a/src/Demo.vue b/src/Demo.vue
deleted file mode 100644
index a86de4b..0000000
--- a/src/Demo.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <h1>
-      vue-three-d-mockup
-    </h1>
-
-    <Mockup
-      v-if="vidReady"
-      class="mockup"
-      :screen="[$refs.video, screenImage]"
-      :position="[
-        {
-          x: -50
-        },
-        {
-          x: 50
-        },
-      ]"
-      :rotation="[{}, {
-        y: -0.3,
-        z: -0.06,
-      }]"
-    />
-    <!-- <Mockup
-      class="mockup"
-      :screen="require('./assets/screen.png')"
-    /> -->
-
-    <video
-      :src="screenVideo"
-      ref="video"
-      @canplay="vidReady = true"
-      muted
-      autoplay
-      loop
-    />
-  </div>
-</template>
-
-<script>
-import { defineAsyncComponent } from 'vue';
-import screenImage from './assets/screen.png';
-import screenVideo from './assets/screen.mp4';
-
-export default {
-  data() {
-    return {
-      vidReady: false,
-    };
-  },
-  components: {
-    Mockup: defineAsyncComponent(() => import('./Mockup.vue')),
-  },
-  setup() {
-    return {
-      screenImage,
-      screenVideo,
-    };
-  }
-};
-</script>
-
-<style>
-html, body {
-  height: 100%;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-video {
-  position: fixed;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-}
-
-.mockup {
-  width: 800px;
-  height: 500px;
-}
-</style>