diff --git a/src/router/index.ts b/src/router/index.ts
index adb2185..10e5ddd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,6 +25,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'Blog',
         component: () => import('../views/Blog.vue')
     },
+    {
+        path: '/color',
+        name: 'ColorPicker',
+        component: () => import('../views/color/ColorPickerTest.vue')
+    },
     {
         path: '/projects',
         name: 'Projects',
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 6e20d55..e9b47fe 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,24 +1,16 @@
 <template>
     <div id="Projects">
-        <ColorPicker v-model:color="color"></ColorPicker>
-        <button @click="log"></button>
+
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import MyColorPicker from "@/views/color/ColorPicker.vue";
-import {Color} from "three";
 
-@Options({components: {ColorPicker: MyColorPicker}})
+@Options({components: {}})
 export default class Projects extends Vue
 {
-    color = new Color('#ffffff')
 
-    log(): void
-    {
-        console.log(this.color)
-    }
 }
 </script>
 
diff --git a/src/views/color/ColorPickerTest.vue b/src/views/color/ColorPickerTest.vue
new file mode 100644
index 0000000..6e20d55
--- /dev/null
+++ b/src/views/color/ColorPickerTest.vue
@@ -0,0 +1,27 @@
+<template>
+    <div id="Projects">
+        <ColorPicker v-model:color="color"></ColorPicker>
+        <button @click="log"></button>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import MyColorPicker from "@/views/color/ColorPicker.vue";
+import {Color} from "three";
+
+@Options({components: {ColorPicker: MyColorPicker}})
+export default class Projects extends Vue
+{
+    color = new Color('#ffffff')
+
+    log(): void
+    {
+        console.log(this.color)
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+
+</style>