diff --git a/src/layouts/default.vue b/src/layouts/default.vue
new file mode 100644
index 0000000..bd76a56
--- /dev/null
+++ b/src/layouts/default.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const showMenu = ref<boolean>(true);
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="content">
+      <button v-if="!showMenu" class="button" @click="showMenu = true">
+        <IconMenu/>
+      </button>
+      <template v-else>
+        <div class="controls">
+          <slot/>
+        </div>
+        <button class="button" @click="showMenu = false">
+          <IconHide/>
+        </button>
+      </template>
+    </div>
+    <canvas class="canvas"/>
+  </div>
+</template>
+
+<style scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+.content {
+  position: relative;
+  height: max-content;
+  margin: 20px;
+  display: flex;
+  column-gap: 16px;
+}
+
+.controls {
+  position: relative;
+  box-sizing: border-box;
+  padding: 28px 24px;
+  background-color: white;
+  border-radius: 8px;
+  width: 480px;
+  height: max-content;
+  max-height: calc(100% - 40px);
+  overflow-y: auto;
+  border: var(--border);
+  box-shadow: var(--shadow);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+
+.button {
+  margin-top: 8px;
+  z-index: 3;
+}
+
+.canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+</style>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
new file mode 100644
index 0000000..7bb0a05
--- /dev/null
+++ b/src/pages/catalog.vue
@@ -0,0 +1,7 @@
+<template>
+Test
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a308175..8671aea 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,17 +1,25 @@
+<script setup lang="ts">
+const axes = ['x', 'y', 'z'];
+</script>
+
 <template>
-  <div>
-    <Head>
-      <Title>Главная</Title>
-    </Head>
-    <h1>Hello, Nuxt ✌</h1>
+  <div class="container">
+    <Accordion title="Перемещение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Вращение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Масштабирование">
+      <FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1" :defaultValue="1"/>
+    </Accordion>
   </div>
 </template>
 
 <style scoped>
-div {
-  height: 100%;
+.container {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+  row-gap: 16px;
 }
 </style>
