diff --git a/src/App.vue b/src/App.vue
index 0de6be4f1..fdb755f02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,54 +23,7 @@
 
 <template>
 	<NcContent app-name="libresign">
-		<NcAppNavigation :class="{'icon-loading' : loading }">
-			<template #list>
-				<NcAppNavigationItem v-if="back_to_signature"
-					class="back_to_signature"
-					icon="icon-history"
-					:name="t('libresign', 'Back to sign')"
-					@click="goToSign" />
-
-				<NcAppNavigationItem v-if="canRequestSign"
-					id="request-files"
-					:to="{name: 'requestFiles'}"
-					:name="t('libresign', 'Request')"
-					@click="unselectFile">
-					<template #icon>
-						<FileSignIcon :size="20" />
-					</template>
-				</NcAppNavigationItem>
-				<NcAppNavigationItem id="timeline"
-					:to="{ name: 'timeline' }"
-					:name="t('libresign', 'Files')"
-					@click="unselectFile">
-					<template #icon>
-						<FolderIcon :size="20" />
-					</template>
-				</NcAppNavigationItem>
-				<NcAppNavigationItem id="validation"
-					:to="{name: 'validation'}"
-					:name="t('libresign', 'Validate')"
-					@click="unselectFile">
-					<template #icon>
-						<FileCheckIcon :size="20" />
-					</template>
-				</NcAppNavigationItem>
-
-				<NcAppNavigationItem v-if="config.identificationDocumentsFlow && config.isApprover"
-					:to="{name: 'DocsAccountValidation'}"
-					:name="t('libresign', 'Documents Validation')">
-					<template #icon>
-						<AccountCheckIcon :size="20" />
-					</template>
-				</NcAppNavigationItem>
-			</template>
-			<template #footer>
-				<NcAppNavigationSettings :title="t('libresign', 'Settings')">
-					<CroppedLayoutSettings />
-				</NcAppNavigationSettings>
-			</template>
-		</NcAppNavigation>
+		<LeftSidebar />
 		<NcAppContent :class="{'icon-loading' : loading }">
 			<router-view v-if="!loading" :key="$route.name " :loading.sync="loading" />
 			<NcEmptyContent v-if="isRoot" :description="t('libresign', 'LibreSign, digital signature app for Nextcloud.')">
@@ -85,82 +38,38 @@
 
 <script>
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import LogoLibreSign from './../img/logo-gray.svg'
-import CroppedLayoutSettings from './Components/Settings/CroppedLayoutSettings.vue'
+import LeftSidebar from './Components/LeftSidebar/LeftSidebar.vue'
 import RightSidebar from './Components/RightSidebar/RightSidebar.vue'
-import { loadState } from '@nextcloud/initial-state'
-import FileSignIcon from 'vue-material-design-icons/FileSign.vue'
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import FileCheckIcon from 'vue-material-design-icons/FileCheck.vue'
-import AccountCheckIcon from 'vue-material-design-icons/AccountCheck.vue'
-import { useFilesStore } from './store/files.js'
 
 export default {
 	name: 'App',
 	components: {
 		NcContent,
-		NcAppNavigation,
-		NcAppNavigationItem,
-		NcAppNavigationSettings,
 		NcAppContent,
 		NcEmptyContent,
-		CroppedLayoutSettings,
+		LeftSidebar,
 		RightSidebar,
-		FileSignIcon,
-		FolderIcon,
-		FileCheckIcon,
-		AccountCheckIcon,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return { filesStore }
 	},
 	data() {
 		return {
-			canRequestSign: loadState('libresign', 'can_request_sign', false),
-			config: loadState('libresign', 'config', {
-				hasSignatureFile: false,
-				identificationDocumentsFlow: false,
-				isApprover: false,
-				phoneNumber: '',
-			}),
 			loading: false,
 			LogoLibreSign,
 		}
 	},
 	computed: {
-		back_to_signature() {
-			return this.$route.query._back_to_signature
-		},
 		isRoot() {
 			return this.$route.path === '/'
 		},
 	},
-	methods: {
-		unselectFile() {
-			this.filesStore.selectFile()
-		},
-		goToSign() {
-			const route = this.$router.resolve({ name: 'SignPDF', params: { uuid: this.back_to_signature } })
-
-			window.location = route.href
-		},
-	},
 }
 </script>
 
 <style lang="scss">
 .app-libresign {
 	.app-navigation {
-		.back_to_signature
-			.app-navigation-entry__title {
-			color: var(--color-warning, #eca700);
-		}
 		.app-navigation-entry.active {
 			background-color: var(--color-primary-element) !important;
 			.app-navigation-entry-link{
diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
new file mode 100644
index 000000000..e99c056ae
--- /dev/null
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -0,0 +1,137 @@
+<!--
+- @copyright Copyright (c) 2024 Vitor Mattos <vitor@php.rio>
+-
+- @author Vitor Mattos <vitor@php.rio>
+-
+- @license GNU AGPL version 3 or any later version
+-
+- This program is free software: you can redistribute it and/or modify
+- it under the terms of the GNU Affero General Public License as
+- published by the Free Software Foundation, either version 3 of the
+- License, or (at your option) any later version.
+-
+- This program is distributed in the hope that it will be useful,
+- but WITHOUT ANY WARRANTY; without even the implied warranty of
+- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+- GNU Affero General Public License for more details.
+-
+- You should have received a copy of the GNU Affero General Public License
+- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<NcAppNavigation>
+		<template #list>
+			<NcAppNavigationItem v-if="back_to_signature"
+				class="back_to_signature"
+				icon="icon-history"
+				:name="t('libresign', 'Back to sign')"
+				@click="goToSign" />
+
+			<NcAppNavigationItem v-if="canRequestSign"
+				id="request-files"
+				:to="{name: 'requestFiles'}"
+				:name="t('libresign', 'Request')"
+				@click="unselectFile">
+				<template #icon>
+					<FileSignIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
+			<NcAppNavigationItem id="timeline"
+				:to="{ name: 'timeline' }"
+				:name="t('libresign', 'Files')"
+				@click="unselectFile">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
+			<NcAppNavigationItem id="validation"
+				:to="{name: 'validation'}"
+				:name="t('libresign', 'Validate')"
+				@click="unselectFile">
+				<template #icon>
+					<FileCheckIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
+
+			<NcAppNavigationItem v-if="config.identificationDocumentsFlow && config.isApprover"
+				:to="{name: 'DocsAccountValidation'}"
+				:name="t('libresign', 'Documents Validation')">
+				<template #icon>
+					<AccountCheckIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</template>
+		<template #footer>
+			<NcAppNavigationSettings :title="t('libresign', 'Settings')">
+				<CroppedLayoutSettings />
+			</NcAppNavigationSettings>
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
+import { loadState } from '@nextcloud/initial-state'
+import { useFilesStore } from '../../store/files.js'
+import AccountCheckIcon from 'vue-material-design-icons/AccountCheck.vue'
+import FileCheckIcon from 'vue-material-design-icons/FileCheck.vue'
+import FileSignIcon from 'vue-material-design-icons/FileSign.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import CroppedLayoutSettings from '../Settings/CroppedLayoutSettings.vue'
+
+export default {
+	name: 'LeftSidebar',
+	components: {
+		NcAppNavigation,
+		NcAppNavigationItem,
+		NcAppNavigationSettings,
+		AccountCheckIcon,
+		FileCheckIcon,
+		FolderIcon,
+		FileSignIcon,
+		CroppedLayoutSettings,
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		return { filesStore }
+	},
+	data() {
+		return {
+			canRequestSign: loadState('libresign', 'can_request_sign', false),
+			config: loadState('libresign', 'config', {
+				identificationDocumentsFlow: false,
+				isApprover: false,
+			}),
+		}
+	},
+	computed: {
+		back_to_signature() {
+			return this.$route.query._back_to_signature
+		},
+	},
+	methods: {
+		unselectFile() {
+			this.filesStore.selectFile()
+		},
+		goToSign() {
+			const route = this.$router.resolve({ name: 'SignPDF', params: { uuid: this.back_to_signature } })
+
+			window.location = route.href
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.app-libresign {
+	.app-navigation {
+		.back_to_signature
+			.app-navigation-entry__title {
+			color: var(--color-warning, #eca700);
+		}
+	}
+}
+</style>