diff --git a/src/components/SelectionManager.vue b/src/components/SelectionManager.vue
index 5d9755f8..63371318 100644
--- a/src/components/SelectionManager.vue
+++ b/src/components/SelectionManager.vue
@@ -87,7 +87,7 @@ import { IHeadRow, IPhoto } from '../types';
 import { generateUrl } from '@nextcloud/router'
 import { NcActions, NcActionButton } from '@nextcloud/vue';
 
-import EditDate from "./EditDate.vue"
+import EditDate from "./modal/EditDate.vue"
 
 import Star from 'vue-material-design-icons/Star.vue';
 import Download from 'vue-material-design-icons/Download.vue';
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index d0a5bf2a..9f40548f 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -126,10 +126,10 @@ import moment from 'moment';
 import * as dav from "../services/DavRequests";
 import * as utils from "../services/Utils";
 import axios from '@nextcloud/axios'
-import Folder from "./Folder.vue";
-import Tag from "./Tag.vue";
-import Photo from "./Photo.vue";
-import TopMatter from "./TopMatter.vue";
+import Folder from "./frame/Folder.vue";
+import Tag from "./frame/Tag.vue";
+import Photo from "./frame/Photo.vue";
+import TopMatter from "./top-matter/TopMatter.vue";
 import SelectionManager from './SelectionManager.vue';
 import UserConfig from "../mixins/UserConfig";
 
diff --git a/src/components/Folder.vue b/src/components/frame/Folder.vue
similarity index 96%
rename from src/components/Folder.vue
rename to src/components/frame/Folder.vue
index 297991d3..506de4b4 100644
--- a/src/components/Folder.vue
+++ b/src/components/frame/Folder.vue
@@ -32,11 +32,11 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
-import { IFileInfo, IFolder } from '../types';
-import GlobalMixin from '../mixins/GlobalMixin';
+import { IFileInfo, IFolder } from '../../types';
+import GlobalMixin from '../../mixins/GlobalMixin';
 
-import * as dav from "../services/DavRequests";
-import { getPreviewUrl } from "../services/FileUtils";
+import * as dav from "../../services/DavRequests";
+import { getPreviewUrl } from "../../services/FileUtils";
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue';
 
diff --git a/src/components/Photo.vue b/src/components/frame/Photo.vue
similarity index 96%
rename from src/components/Photo.vue
rename to src/components/frame/Photo.vue
index 12b2f3c2..45124433 100644
--- a/src/components/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -37,14 +37,14 @@
 
 <script lang="ts">
 import { Component, Prop, Emit, Mixins } from 'vue-property-decorator';
-import { IDay, IPhoto } from "../types";
+import { IDay, IPhoto } from "../../types";
 import { subscribe, unsubscribe } from '@nextcloud/event-bus';
 
 import { showError } from '@nextcloud/dialogs'
-import { getPreviewUrl } from "../services/FileUtils";
-import * as dav from "../services/DavRequests";
-import errorsvg from "../assets/error.svg";
-import GlobalMixin from '../mixins/GlobalMixin';
+import { getPreviewUrl } from "../../services/FileUtils";
+import * as dav from "../../services/DavRequests";
+import errorsvg from "../../assets/error.svg";
+import GlobalMixin from '../../mixins/GlobalMixin';
 
 import Check from 'vue-material-design-icons/Check.vue';
 import Video from 'vue-material-design-icons/Video.vue';
diff --git a/src/components/Tag.vue b/src/components/frame/Tag.vue
similarity index 96%
rename from src/components/Tag.vue
rename to src/components/frame/Tag.vue
index a11aba55..532bbfc8 100644
--- a/src/components/Tag.vue
+++ b/src/components/frame/Tag.vue
@@ -33,14 +33,14 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Mixins, Emit } from 'vue-property-decorator';
-import { IPhoto, ITag } from '../types';
+import { IPhoto, ITag } from '../../types';
 import { generateUrl } from '@nextcloud/router'
-import { getPreviewUrl } from "../services/FileUtils";
+import { getPreviewUrl } from "../../services/FileUtils";
 
 import { NcCounterBubble } from '@nextcloud/vue'
 
-import GlobalMixin from '../mixins/GlobalMixin';
-import { constants } from '../services/Utils';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import { constants } from '../../services/Utils';
 
 interface IFaceDetection extends IPhoto {
     x: number;
diff --git a/src/components/EditDate.vue b/src/components/modal/EditDate.vue
similarity index 98%
rename from src/components/EditDate.vue
rename to src/components/modal/EditDate.vue
index 5238ea1a..c24fd71b 100644
--- a/src/components/EditDate.vue
+++ b/src/components/modal/EditDate.vue
@@ -101,16 +101,16 @@
 
 <script lang="ts">
 import { Component, Emit, Mixins } from 'vue-property-decorator';
-import GlobalMixin from '../mixins/GlobalMixin';
-import { IPhoto } from '../types';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import { IPhoto } from '../../types';
 
 import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import Modal from './Modal.vue';
 import axios from '@nextcloud/axios'
-import * as utils from '../services/Utils';
-import * as dav from "../services/DavRequests";
+import * as utils from '../../services/Utils';
+import * as dav from "../../services/DavRequests";
 
 const INFO_API_URL = '/apps/memories/api/info/{id}';
 const EDIT_API_URL = '/apps/memories/api/edit/{id}';
diff --git a/src/components/FaceDeleteModal.vue b/src/components/modal/FaceDeleteModal.vue
similarity index 93%
rename from src/components/FaceDeleteModal.vue
rename to src/components/modal/FaceDeleteModal.vue
index 7a8b04bc..05f4613a 100644
--- a/src/components/FaceDeleteModal.vue
+++ b/src/components/modal/FaceDeleteModal.vue
@@ -19,8 +19,8 @@ import { Component, Emit, Mixins, Watch } from 'vue-property-decorator';
 import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
 import Modal from './Modal.vue';
-import GlobalMixin from '../mixins/GlobalMixin';
-import client from '../services/DavClient';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import client from '../../services/DavClient';
 
 @Component({
     components: {
diff --git a/src/components/FaceEditModal.vue b/src/components/modal/FaceEditModal.vue
similarity index 95%
rename from src/components/FaceEditModal.vue
rename to src/components/modal/FaceEditModal.vue
index 10d4cfb9..36be6ae4 100644
--- a/src/components/FaceEditModal.vue
+++ b/src/components/modal/FaceEditModal.vue
@@ -25,8 +25,8 @@ import { Component, Emit, Mixins, Watch } from 'vue-property-decorator';
 import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
 import Modal from './Modal.vue';
-import GlobalMixin from '../mixins/GlobalMixin';
-import client from '../services/DavClient';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import client from '../../services/DavClient';
 
 @Component({
     components: {
diff --git a/src/components/FaceMergeModal.vue b/src/components/modal/FaceMergeModal.vue
similarity index 94%
rename from src/components/FaceMergeModal.vue
rename to src/components/modal/FaceMergeModal.vue
index 132d6f0b..dd7ffd79 100644
--- a/src/components/FaceMergeModal.vue
+++ b/src/components/modal/FaceMergeModal.vue
@@ -29,13 +29,13 @@
 import { Component, Emit, Mixins, Watch } from 'vue-property-decorator';
 import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
-import { IFileInfo, IPhoto, ITag } from '../types';
-import Tag from './Tag.vue';
+import { IFileInfo, IPhoto, ITag } from '../../types';
+import Tag from '../frame/Tag.vue';
 
 import Modal from './Modal.vue';
-import GlobalMixin from '../mixins/GlobalMixin';
-import * as dav from '../services/DavRequests';
-import client from '../services/DavClient';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import client from '../../services/DavClient';
+import * as dav from '../../services/DavRequests';
 
 @Component({
     components: {
diff --git a/src/components/Modal.vue b/src/components/modal/Modal.vue
similarity index 100%
rename from src/components/Modal.vue
rename to src/components/modal/Modal.vue
diff --git a/src/components/FaceTopMatter.vue b/src/components/top-matter/FaceTopMatter.vue
similarity index 93%
rename from src/components/FaceTopMatter.vue
rename to src/components/top-matter/FaceTopMatter.vue
index ded8f6e9..3ee88086 100644
--- a/src/components/FaceTopMatter.vue
+++ b/src/components/top-matter/FaceTopMatter.vue
@@ -34,12 +34,12 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import GlobalMixin from '../mixins/GlobalMixin';
+import GlobalMixin from '../../mixins/GlobalMixin';
 
 import { NcActions, NcActionButton } from '@nextcloud/vue';
-import FaceEditModal from './FaceEditModal.vue';
-import FaceDeleteModal from './FaceDeleteModal.vue';
-import FaceMergeModal from './FaceMergeModal.vue';
+import FaceEditModal from '../modal/FaceEditModal.vue';
+import FaceDeleteModal from '../modal/FaceDeleteModal.vue';
+import FaceMergeModal from '../modal/FaceMergeModal.vue';
 import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
 import DeleteIcon from 'vue-material-design-icons/Close.vue';
diff --git a/src/components/FolderTopMatter.vue b/src/components/top-matter/FolderTopMatter.vue
similarity index 92%
rename from src/components/FolderTopMatter.vue
rename to src/components/top-matter/FolderTopMatter.vue
index 5b432944..af7deaa2 100644
--- a/src/components/FolderTopMatter.vue
+++ b/src/components/top-matter/FolderTopMatter.vue
@@ -12,9 +12,9 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { TopMatterFolder, TopMatterType } from "../types";
+import { TopMatterFolder, TopMatterType } from "../../types";
 import { NcBreadcrumbs, NcBreadcrumb } from '@nextcloud/vue';
-import GlobalMixin from '../mixins/GlobalMixin';
+import GlobalMixin from '../../mixins/GlobalMixin';
 import HomeIcon from 'vue-material-design-icons/Home.vue';
 
 @Component({
diff --git a/src/components/TagTopMatter.vue b/src/components/top-matter/TagTopMatter.vue
similarity index 95%
rename from src/components/TagTopMatter.vue
rename to src/components/top-matter/TagTopMatter.vue
index 483f3d9b..4cec0900 100644
--- a/src/components/TagTopMatter.vue
+++ b/src/components/top-matter/TagTopMatter.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import GlobalMixin from '../mixins/GlobalMixin';
+import GlobalMixin from '../../mixins/GlobalMixin';
 
 import { NcActions, NcActionButton } from '@nextcloud/vue';
 import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
diff --git a/src/components/TopMatter.vue b/src/components/top-matter/TopMatter.vue
similarity index 92%
rename from src/components/TopMatter.vue
rename to src/components/top-matter/TopMatter.vue
index 1c415b09..6976c881 100644
--- a/src/components/TopMatter.vue
+++ b/src/components/top-matter/TopMatter.vue
@@ -12,8 +12,8 @@ import FolderTopMatter from "./FolderTopMatter.vue";
 import TagTopMatter from "./TagTopMatter.vue";
 import FaceTopMatter from "./FaceTopMatter.vue";
 
-import GlobalMixin from '../mixins/GlobalMixin';
-import { TopMatterType } from '../types';
+import GlobalMixin from '../../mixins/GlobalMixin';
+import { TopMatterType } from '../../types';
 
 @Component({
     components: {