diff --git a/example.md b/example.md
index d0c07ad..d7e7da5 100644
--- a/example.md
+++ b/example.md
@@ -181,6 +181,45 @@ currentAction.value.play()
 </template>
 ```
 
+---
+layout: two-thirds
+---
+Awiwiiw
+
+```vue
+// Model.vue
+<script setup lang="ts">
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+
+const { scene: model, animations } = await useGLTF(
+  'models/ugly-bunny.gltf',
+)
+
+const { actions, mixer } = useAnimations(animations, model)
+const currentAction = ref(actions.Greeting)
+currentAction.value.play()
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>
+```
+
+::right::
+
+```vue
+<template>
+  <TresCanvas
+    clear-color="”#82DBC5”"
+    window-size
+  >
+    <TresPerspectiveCamera />
+    <Suspense>
+      <Model />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
 ---
 layout: text-window
 
@@ -195,8 +234,8 @@ Use code snippets and get the highlighting directly into a nice looking window!
 ```ts
 // main.ts
 
-import { createApp } from 'vue'
 import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
+import { createApp } from 'vue'
 
 const VueDynamicForms = createDynamicForms({
   // Global Options go here
diff --git a/layouts/two-thirds.vue b/layouts/two-thirds.vue
new file mode 100644
index 0000000..668e512
--- /dev/null
+++ b/layouts/two-thirds.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="slidev-layout">
+    <div class="flex gap-16">
+      <div class="prose w-2/3">
+        <slot name="default"></slot>
+      </div>
+      <div class="prose w-1/3">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/styles/layout.scss b/styles/layout.scss
index 7000b33..f61a06e 100644
--- a/styles/layout.scss
+++ b/styles/layout.scss
@@ -106,7 +106,7 @@ html:not(.dark) #slide-content {
   }
 
   .slidev-code-wrapper {
-    max-width: 400px;
+    max-width: 600px;
   }
 
   iframe label.btn {