diff --git a/src/views/color/ColorPicker.vue b/src/components/color/ColorPicker.vue
similarity index 100%
rename from src/views/color/ColorPicker.vue
rename to src/components/color/ColorPicker.vue
diff --git a/src/views/color/ColorPickerTest.vue b/src/components/color/ColorPickerTest.vue
similarity index 88%
rename from src/views/color/ColorPickerTest.vue
rename to src/components/color/ColorPickerTest.vue
index b48f47c..2f3afe0 100644
--- a/src/views/color/ColorPickerTest.vue
+++ b/src/components/color/ColorPickerTest.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import MyColorPicker from "@/views/color/ColorPicker.vue";
+import MyColorPicker from "@/components/color/ColorPicker.vue";
 import {Color} from "three";
 
 @Options({components: {MyColorPicker}})
diff --git a/src/scripts/router.ts b/src/scripts/router.ts
index de083ae..7f642c6 100644
--- a/src/scripts/router.ts
+++ b/src/scripts/router.ts
@@ -28,7 +28,7 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/color',
         name: 'ColorPicker',
-        component: () => import('../views/color/ColorPickerTest.vue')
+        component: () => import('../components/color/ColorPickerTest.vue')
     },
     {
         path: '/projects',
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 8c66c46..6f5c8a0 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -37,7 +37,7 @@ import {Options, Vue} from 'vue-class-component';
 import {camera, editor, objects, start} from "@/animation/Home";
 import {config} from "@/animation/Config";
 import {KeyHandler, range} from "@/utils";
-import MyColorPicker from "@/views/color/ColorPicker.vue";
+import MyColorPicker from "@/components/color/ColorPicker.vue";
 
 @Options({components: {MyColorPicker}})
 export default class NewHome extends KeyHandler