diff --git a/src/App.vue b/src/App.vue
index 1063d29..164e5b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-  import TheHeader from "@/components/theComponents/TheHeader";
-  import TheSidebar from "@/components/theComponents/TheSidebar";
+  import TheHeader from "@/components/TheHeader";
+  import TheSidebar from "@/components/TheSidebar";
   export default {
     name: 'App',
     components: {TheHeader, TheSidebar}
@@ -16,25 +16,25 @@
 </script>
 
 <style lang="sass">
-#app
-  height: 100%
-  width: 100%
-  font-family: Raleway, sans-serif
-  font-style: normal
-  font-feature-settings: 'pnum' on, 'lnum' on
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-.pages-container
-  display: flex
-  flex: auto
-.app-container
-  height: 100%
-  width: 100%
-  row-gap: 8px
-  display: flex
-  flex-direction: column
-body
-  background-color: var(--bg-lavender-color)
-  margin: 0
-  padding: 0
+  #app
+    height: 100%
+    width: 100%
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-feature-settings: 'pnum' on, 'lnum' on
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+  .pages-container
+    display: flex
+    flex: auto
+  .app-container
+    height: 100%
+    width: 100%
+    row-gap: 8px
+    display: flex
+    flex-direction: column
+  body
+    background-color: var(--bg-lavender-color)
+    margin: 0
+    padding: 0
 </style>
diff --git a/src/components/theComponents/TheButtonSidebar.vue b/src/components/TheButtonSidebar.vue
similarity index 97%
rename from src/components/theComponents/TheButtonSidebar.vue
rename to src/components/TheButtonSidebar.vue
index 6f086d7..5aef79a 100644
--- a/src/components/theComponents/TheButtonSidebar.vue
+++ b/src/components/TheButtonSidebar.vue
@@ -20,7 +20,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .button-icon-item
     width: fit-content
     padding: 12px 16px 12px 12px
diff --git a/src/components/theComponents/TheHeader.vue b/src/components/TheHeader.vue
similarity index 97%
rename from src/components/theComponents/TheHeader.vue
rename to src/components/TheHeader.vue
index 8078c6a..bcce643 100644
--- a/src/components/theComponents/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -31,7 +31,7 @@
   }
 </script>
 
-<style lang='sass'>
+<style lang='sass' scoped>
   input
     padding: 0
 
@@ -119,7 +119,7 @@
     -moz-appearance: none
     -ms-appearance: none
     appearance: none
-    background: url(../../assets/icons/down-arrow-1.svg) no-repeat right top 4px
+    background: url(@/assets/icons/down-arrow-1.svg) no-repeat right top 4px
     overflow: hidden
     margin-right: 16px
     padding: 2px 20px 2px 30px
diff --git a/src/components/theComponents/TheSidebar.vue b/src/components/TheSidebar.vue
similarity index 90%
rename from src/components/theComponents/TheSidebar.vue
rename to src/components/TheSidebar.vue
index 643a787..6519fc7 100644
--- a/src/components/theComponents/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-  import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
+  import TheButtonSidebar from "@/components/TheButtonSidebar";
 
   export default {
     name: "SidebarComponent",
@@ -21,7 +21,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   #person
     font-style: normal
   .sidebar-container
diff --git a/src/components/baseComponents/buttons/AddEventButton.vue b/src/components/base/buttons/AddEventButton.vue
similarity index 94%
rename from src/components/baseComponents/buttons/AddEventButton.vue
rename to src/components/base/buttons/AddEventButton.vue
index 8850ec7..70d87dd 100644
--- a/src/components/baseComponents/buttons/AddEventButton.vue
+++ b/src/components/base/buttons/AddEventButton.vue
@@ -8,7 +8,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .add-button-event
     outline: none
     border: none
diff --git a/src/components/baseComponents/buttons/ButtonPlus.vue b/src/components/base/buttons/ButtonPlus.vue
similarity index 93%
rename from src/components/baseComponents/buttons/ButtonPlus.vue
rename to src/components/base/buttons/ButtonPlus.vue
index a53e6a7..9a0eb41 100644
--- a/src/components/baseComponents/buttons/ButtonPlus.vue
+++ b/src/components/base/buttons/ButtonPlus.vue
@@ -8,7 +8,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .button-plus
     outline: none
     border: none
diff --git a/src/components/pages/calendarPages/CalendarPages.vue b/src/pages/calendar/TheCalendar.vue
similarity index 54%
rename from src/components/pages/calendarPages/CalendarPages.vue
rename to src/pages/calendar/TheCalendar.vue
index 95b9146..50cca94 100644
--- a/src/components/pages/calendarPages/CalendarPages.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script>
-  import FormAddEvent from "@/components/pages/calendarPages/FormAddEvent";
+  import FormAddEvent from './components/FormAddEvent.vue';
   export default {
-    name: "CalendarPages",
+    name: "TheCalendar",
     components: {FormAddEvent}
   }
 </script>
diff --git a/src/components/pages/calendarPages/FormAddEvent.vue b/src/pages/calendar/components/FormAddEvent.vue
similarity index 97%
rename from src/components/pages/calendarPages/FormAddEvent.vue
rename to src/pages/calendar/components/FormAddEvent.vue
index fbd8607..c1b9752 100644
--- a/src/components/pages/calendarPages/FormAddEvent.vue
+++ b/src/pages/calendar/components/FormAddEvent.vue
@@ -54,8 +54,8 @@
 </template>
 
 <script>
-import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
-import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
+import AddEventButton from "@/components/base/buttons/AddEventButton";
+import ButtonPlus from "@/components/base/buttons/ButtonPlus";
 export default {
   name: "FormChangeEvent",
   components: {AddEventButton, ButtonPlus},
@@ -118,7 +118,7 @@ export default {
 }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .event-form-change
     position: relative
     display: flex
diff --git a/src/components/pages/homePages/HomePages.vue b/src/pages/home/TheHome.vue
similarity index 66%
rename from src/components/pages/homePages/HomePages.vue
rename to src/pages/home/TheHome.vue
index 03a79c6..0724add 100644
--- a/src/components/pages/homePages/HomePages.vue
+++ b/src/pages/home/TheHome.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  div HomePages
+  div HomePage
 </template>
 
 <script>
   export default {
-    name: "HomePages"
+    name: "TheHome"
   }
 </script>
diff --git a/src/components/pages/settingsPages/SettingsPages.vue b/src/pages/settings/TheSettings.vue
similarity index 62%
rename from src/components/pages/settingsPages/SettingsPages.vue
rename to src/pages/settings/TheSettings.vue
index 4b9ec0d..5f879df 100644
--- a/src/components/pages/settingsPages/SettingsPages.vue
+++ b/src/pages/settings/TheSettings.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  div SettingsPages
+  div SettingsPage
 </template>
 
 <script>
   export default {
-    name: "SettingsPages"
+    name: "TheSettings"
   }
 </script>
diff --git a/src/components/pages/userPages/UserPages.vue b/src/pages/user/TheUser.vue
similarity index 66%
rename from src/components/pages/userPages/UserPages.vue
rename to src/pages/user/TheUser.vue
index 2f70aa7..1f42f73 100644
--- a/src/components/pages/userPages/UserPages.vue
+++ b/src/pages/user/TheUser.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  div UserPages
+  div UserPage
 </template>
 
 <script>
   export default {
-    name: "UserPages"
+    name: "TheUser"
   }
 </script>
diff --git a/src/router.js b/src/router.js
index aadc027..ca05a4b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,15 +1,15 @@
 import {createRouter, createWebHashHistory} from "vue-router";
-import HomePages from "./components/pages/homePages/HomePages.vue";
-import CalendarPages from "./components/pages/calendarPages/CalendarPages.vue";
-import UserPages from "./components/pages/userPages/UserPages.vue";
-import SettingsPages from "./components/pages/settingsPages/SettingsPages.vue";
+import TheHome from "@/pages/home/TheHome.vue";
+import TheCalendar from "@/pages/calendar/TheCalendar";
+import TheUser from "@/pages/user/TheUser";
+import TheSettings from "@/pages/settings/TheSettings";
 
 export default createRouter({
   history: createWebHashHistory(),
   routes: [
-    { path: "/", component: HomePages },
-    { path: "/calendar", component: CalendarPages },
-    { path: "/user", component: UserPages },
-    { path: "/settings", component: SettingsPages }
+    { path: "/", component: TheHome },
+    { path: "/calendar", component: TheCalendar },
+    { path: "/user", component: TheUser },
+    { path: "/settings", component: TheSettings }
   ]
 })