diff --git a/src/components/CollectionList.vue b/src/components/CollectionList.vue
index 20b6552..ea0f8f3 100644
--- a/src/components/CollectionList.vue
+++ b/src/components/CollectionList.vue
@@ -1,12 +1,6 @@
 <template>
-    <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
-    >
-    </ion-loading>
     <ion-list>
-        <ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+        <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
             <ion-thumbnail slot="start"> 
                 <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
                 <ion-img v-else :src="image" :alt="collection.name"></ion-img>
@@ -17,39 +11,29 @@
 </template>
 
 <script lang="ts">
-import {
-    useCollectionsStore
-} from '../store/storeCollection';
+
 import {
     IonList,
     IonItem,
     IonImg,
     IonThumbnail,
-    IonLoading,
     IonLabel,
 } from '@ionic/vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 export default {
+    props: [
+        "collections"
+    ],
     components: {
         IonList,
         IonItem,
         IonImg,
         IonThumbnail,
         IonLabel,
-        IonLoading
     },
     setup() {
         const image = computed (() => require('../assets/placeholder_square_small.png'))
-        const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
-        let collectionStore = useCollectionsStore();
-        return { image, isOpenRef, setOpen, collectionStore }
-    },
-
-    async created(){
-        this.setOpen(true);
-        await this.collectionStore.fetchCollections();
-        this.setOpen(false);
+        return { image }
     },
 }
 </script>
diff --git a/src/components/base/BaseLayout.vue b/src/components/base/BaseLayout.vue
index c11b38d..91d740b 100644
--- a/src/components/base/BaseLayout.vue
+++ b/src/components/base/BaseLayout.vue
@@ -3,6 +3,9 @@
         <ion-header>
             <ion-toolbar>
                 <ion-img width="80" height="80" :src="image" />
+                <ion-button expand="block" @click="logOff">
+                    LogOff
+                </ion-button>
             </ion-toolbar>
             <ion-toolbar>
                 <ion-buttons slot="start">
@@ -24,6 +27,11 @@
 import {
     useCollectionsStore
 } from '../../store/storeCollection';
+
+import { 
+    useUserStore
+} from '../../store/storeUser';
+
 import {
     IonPage,
     IonHeader,
@@ -35,6 +43,7 @@ import {
     IonImg,
 } from '@ionic/vue';
 import { computed } from 'vue';
+
 export default {
     props: ['pageTitle', 'pageDefaultBackLink'],
     components: {
@@ -50,10 +59,17 @@ export default {
     setup(){
         const image = computed (() => require('../../assets/logo.png'))
         let collectionStore = useCollectionsStore();
+        let userStore = useUserStore();
         return {
-                image, collectionStore,
-            }
-        
+                image, collectionStore, userStore
+            }  
+    },
+    methods: {
+        async logOff(){
+            await this.userStore.userLogOff();
+            this.$router.go();
+        }
+
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/pages/ColletionsFull.vue b/src/pages/ColletionsFull.vue
index 6aa2a04..ebf9f3c 100644
--- a/src/pages/ColletionsFull.vue
+++ b/src/pages/ColletionsFull.vue
@@ -1,60 +1,44 @@
 <template>
-    <base-layout page-title="Collections List">
     <ion-loading
     :is-open="isOpenRef"
     cssClass="my-custom-class"
     message="Carregando..."
     >
     </ion-loading>
-        <ion-list>
-            <ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
-                <ion-thumbnail slot="start"> 
-                    <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
-                    <ion-img v-else :src="image" :alt="collection.name"></ion-img>
-                </ion-thumbnail>
-                <ion-label> {{ collection.name }} </ion-label>
-            </ion-item>
-        </ion-list> 
+    <base-layout>
+        <ion-toolbar>
+            <ion-label>Coleções</ion-label>
+        </ion-toolbar>
+        <base-collection-list :collections="collectionStore.collections"></base-collection-list>
     </base-layout>
 </template>
 
-<script lang="ts">
+<script>
+import BaseCollectionList from '@/components/CollectionList.vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+
 import {
     useCollectionsStore
 } from '../store/storeCollection';
-import {
-    IonList,
-    IonItem,
-    IonImg,
-    IonThumbnail,
-    IonLoading,
-    IonLabel,
-} from '@ionic/vue';
-import BaseLayout from '@/components/base/BaseLayout.vue';
-import { computed, ref } from 'vue';
+
+import { ref } from 'vue';
+
 export default {
     components: {
-        IonList,
-        IonItem,
-        IonImg,
-        IonThumbnail,
-        IonLabel,
-        IonLoading,
-        BaseLayout
+        BaseCollectionList,
+        BaseLayout,
     },
     setup() {
-        const image = computed (() => require('../assets/placeholder_square_small.png'))
         const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
+        const setOpen = (state) => isOpenRef.value = state;
         let collectionStore = useCollectionsStore();
-        return { image, isOpenRef, setOpen, collectionStore }
+        return { collectionStore, isOpenRef, setOpen }
     },
-
     async created(){
         this.setOpen(true);
-        await this.collectionStore.fetchFullCollections();
+        await this.collectionStore.fetchCollections();
         this.setOpen(false);
     },
 }
-</script>
 
+</script>
diff --git a/src/store/storeCollection.ts b/src/store/storeCollection.ts
index 4bf5686..6dfd67a 100644
--- a/src/store/storeCollection.ts
+++ b/src/store/storeCollection.ts
@@ -14,21 +14,10 @@ const useCollectionsStore = defineStore('collections', {
       },
 
     actions: {
-        async fetchCollections() {
+        async fetchCollections(perPage :string, orderBy :string) {
           try {
             const userStore = useUserStore();
-            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`);
-            this.collections = response.data;
-          } catch (err) {
-            this.collections = [];
-            console.error('Erro no carregamento das coleções:', err);
-            return err;
-          }
-        },
-        async fetchFullCollections() {
-          try {
-            const userStore = useUserStore();
-            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections`);
+            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?${perPage?"perpage="+perPage:""}&${orderBy?"orderby="+orderBy:""}`);
             this.collections = response.data;
           } catch (err) {
             this.collections = [];