diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index 212f137e8..98e2a1476 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -37,6 +37,12 @@
         margin: 0 auto;
         position: relative;
         overflow-y: auto;
+
+        @media screen and (max-width: 769px) {
+            & {
+                overflow-y: visible;
+            }
+        }
     }
 
 </style>
diff --git a/src/admin/components/fields-list.vue b/src/admin/components/fields-list.vue
index 9d6c6c3bf..84deb25b2 100644
--- a/src/admin/components/fields-list.vue
+++ b/src/admin/components/fields-list.vue
@@ -1,21 +1,218 @@
 <template>
     <div>
-        <h1>Fields List</h1>
-    </div>
+        <h1>Fields List and Edition Component</h1>
+        <b-loading :active.sync="isLoadingFieldTypes"></b-loading>
+        <div class="columns">
+            <div class="column">
+                <b-field :label="$i18n.get('label_active_fields')" is-grouped>
+                    <draggable 
+                        class="box active-fields-area"
+                        @change="handleChange"
+                        :class="{'fields-area-receive': isDraggingFromAvailable}" 
+                        :list="activeFieldList" 
+                        :options="{group:'fields', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
+                        <div 
+                            class="active-field-item" 
+                            :class="{'not-sortable-item': field.id == undefined}" 
+                            v-for="(field, index) in activeFieldList" :key="index">
+                            {{ field.name }}
+                            <span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span> <b-tag v-if="field.status != undefined">{{field.status}}</b-tag></span>
+                            <a @click.prevent="removeField(field)" v-if="field.id != undefined"><b-icon is-small icon="delete"></b-icon></a>
+                            <b-icon is-small icon="pencil" v-if="field.id != undefined"></b-icon>
+                        </div>
+                        <div class="not-sortable-item" slot="footer">Drag and drop Fields here to add them to Collection.</div>
+                    </draggable> 
+                </b-field>
+            </div>
+            <div class="column">
+                <b-field :label="$i18n.get('label_available_fields')" is-grouped>
+                    <draggable class="box available-fields-area" :list="availableFieldList" :options="{ sort: false, group: { name:'fields', pull: 'clone', put: 'false', revertClone: 'true' }}">
+                        <div class="available-field-item" v-for="(field, index) in availableFieldList" :key="index">
+                            {{ field.name }}
+                        </div>
+                    </draggable> 
+                </b-field>
+            </div>
+        </div>
+    </div> 
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
+
 export default {
     name: 'FieldsList',
-    data(){
+    data(){           
         return {
+            collectionId: '',
+            isDraggingFromAvailable: false,
+            isLoadingFieldTypes: true,
+            isLoadingFields: false
         }
+    },
+    methods: {
+        ...mapActions('collection', [
+            'fetchFieldTypes',
+            'fetchFields',
+            'sendField',
+            'deleteField',
+            'updateCollectionFieldsOrder'
+        ]),
+        ...mapGetters('collection',[
+            'getFieldTypes',
+            'getFields'
+        ]),
+        handleChange($event) {     
+            if ($event.added) {
+                this.addNewField($event.added.element, $event.added.newIndex);
+            } else if ($event.removed) {
+                this.removeField($event.removed.element);
+            } else if ($event.moved) {
+                this.updateFieldsOrder(); 
+            }
+        },
+        updateFieldsOrder() {
+            let fieldsOrder = [];
+            for (let field of this.activeFieldList) {
+                fieldsOrder.push({'id': field.id, 'enabled': true});
+            }
+            this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
+        },
+        addNewField(newField, newIndex) {
+            this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'auto-draft'})
+            .then((field) => {
+                this.activeFieldList.splice(newIndex, 1, field);
+                this.updateFieldsOrder();
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+        },
+        removeField(removedField) {
+            this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id })
+            .then((field) => {
+                let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
+                if (index >= 0) {  
+                    this.activeFieldList.splice(index, 1);
+                }
+                this.updateFieldsOrder(); 
+            })
+            .catch((error) => {
+            });
+        }
+    },
+    computed: {
+        availableFieldList() {
+            return this.getFieldTypes();
+        },
+        activeFieldList() {
+            return this.getFields();
+        }
+    },
+    created() {
+        this.isLoadingFieldTypes = true;
+        this.isLoadingFields = true;
+
+        this.collectionId = this.$route.params.id;
+        
+        this.fetchFieldTypes()
+            .then((res) => {
+                this.isLoadingFieldTypes = false;
+            })
+            .catch((error) => {
+                this.isLoadingFieldTypes = false;
+            });
+        this.fetchFields(this.collectionId)
+            .then((res) => {
+                this.isLoadingFields = false;
+            })
+            .catch((error) => {
+                this.isLoadingFields = false;
+            });
     }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
+    @import "../scss/_variables.scss";
+
+    .active-fields-area {
+        min-height: 40px;
+        padding: 10px;
+
+        &.fields-area-receive {
+            background-color: whitesmoke;
+            border: 1px dashed gray;
+        }
+
+        .active-field-item {
+            background-color: white;
+            padding: 0.2em 0.5em;
+            margin: 10px;
+            border-radius: 5px;
+            border: 1px solid gainsboro;
+            display: block;
+            cursor: grab;
+            .icon { float: right }
+            .label-details {
+                font-weight: normal;
+                font-style: italic;
+                color: gray;
+            }
+
+            .loading-spinner {
+                animation: spinAround 500ms infinite linear;
+                border: 2px solid #dbdbdb;
+                border-radius: 290486px;
+                border-right-color: transparent;
+                border-top-color: transparent;
+                content: "";
+                display: inline-block;
+                height: 1em;
+                width: 1em;
+            }
+
+            &.not-sortable-item {
+                color: gray;
+                cursor: wait;
+            }
+        }
+        .active-field-item:hover {
+            box-shadow: 0px 0px 2px #777;
+        }
+
+        .sortable-chosen {
+            background-color: $primary-lighter;
+            padding: 0.2em 0.5em;
+            margin: 10px;
+            border-radius: 5px;
+            border: 2px dashed $primary-light;
+            display: block; 
+        }
+    }
+
+    .available-fields-area {
+        padding: 10px;
+        border-radius: 5px;
+        background-color: whitesmoke;
+
+        .available-field-item {
+            padding: 0.2em 0.5em;
+            margin: 10px;
+            border-radius: 5px;
+            background-color: white;
+            border: 1px solid gainsboro;
+            display: inline-flex;
+            cursor: grab;
+        }
+        .available-field-item:hover {
+            border: 1px solid lightgrey;
+            box-shadow: 0px 0px 2px #777;
+        }
+    }
 </style>
 
 
+
+
diff --git a/src/admin/components/items-list.vue b/src/admin/components/items-list.vue
index 7cb115099..9883cc88a 100644
--- a/src/admin/components/items-list.vue
+++ b/src/admin/components/items-list.vue
@@ -80,7 +80,7 @@
                             <router-link
                                         id="button-create" 
                                         tag="button" class="button is-primary"
-                                        :to="{ path: `/collections/${collectionId}/items/new` }">
+                                        :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
                                 Criar Item
                             </router-link>
                         </div>
@@ -186,10 +186,10 @@ export default {
             this.loadItems();
         },
         goToItemPage(itemId) {
-            this.$router.push(`/collections/${this.collectionId}/items/${itemId}`);
+            this.$router.push(this.$routerHelper.getItemPath(this.collectionId, itemId));
         },
         goToItemEditPage(itemId) {
-            this.$router.push(`/collections/${this.collectionId}/items/${itemId}/edit`);
+            this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId));
         },
         onPageChange(page) {
             this.page = page;
diff --git a/src/admin/components/secondary-menu.vue b/src/admin/components/secondary-menu.vue
index 15b4ab4c5..91a9ee9cb 100644
--- a/src/admin/components/secondary-menu.vue
+++ b/src/admin/components/secondary-menu.vue
@@ -9,16 +9,16 @@
             </div>
 
             <ul class="menu-list">
-                <li><router-link tag="a" :to="{ path: `/collections/${id}/items`}" :class="activeRoute == 'ItemsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('items')">
+                <li><router-link tag="a" :to="{ path: $routerHelper.getCollectionItemsPath(id, '') }" :class="activeRoute == 'ItemsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('items')">
                     {{ $i18n.get('items')}}
                 </router-link></li>
-                <li><router-link tag="a" :to="{ path: `/collections/${id}/edit`}" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''" :aria-label="$i18n.get('edit') + ' ' + $i18n.get('collection')">
+                <li><router-link tag="a" :to="{ path: $routerHelper.getCollectionEditPath(id) }" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''" :aria-label="$i18n.get('edit') + ' ' + $i18n.get('collection')">
                     {{ $i18n.get('edit')}}
                 </router-link></li>
-                <li><router-link tag="a" :to="{ path: `/collections/${id}/fields`}" :class="activeRoute == 'FieldsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('fields')">
+                <li><router-link tag="a" :to="{ path: $routerHelper.getCollectionFieldsPath(id) }" :class="activeRoute == 'FieldsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('fields')">
                     {{ $i18n.get('fields')}}
                 </router-link></li>
-                <li><router-link tag="a" :to="{ path: `/collections/${id}/filters`}" :class="activeRoute == 'FiltersList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('filters')">
+                <li><router-link tag="a" :to="{ path: $routerHelper.getCollectionFiltersPath(id) }" :class="activeRoute == 'FiltersList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('filters')">
                     {{ $i18n.get('filters')}}
                 </router-link></li>
             </ul>
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index 070be1e52..f7d5b97f1 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -5,7 +5,6 @@ import AdminPage from '../admin.vue'
 import CollectionsPage from '../pages/lists/collections-page.vue'
 import CollectionPage from '../pages/singles/collection-page.vue'
 import CollectionEditionPage from '../pages/edition/collection-edition-page.vue'
-import CollectionFieldsEditionPage from '../pages/edition/collection-fields-edition-page.vue'
 import ItemsPage from '../pages/lists/items-page.vue'
 import ItemPage from '../pages/singles/item-page.vue'
 import ItemEditionPage from '../pages/edition/item-edition-page.vue'
@@ -40,7 +39,7 @@ const routes = [
         { path: '', redirect: 'items'},
         { path: 'items', component: ItemsList, name: 'ItemsList', meta: {title: i18nGet('title_collection_page')} },
         { path: 'edit', component: CollectionEditionPage,  name: 'CollectionEditionPage', meta: {title: i18nGet('title_collection_edition')} },
-        { path: 'fields', component: CollectionFieldsEditionPage, name: 'CollectionFieldsEditionPage', meta: {title: i18nGet('title_collection_fields_edition')} }, 
+        { path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: i18nGet('title_collection_fields_edition')} }, 
         { path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_page')} }
       ]
     },
diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js
index 9515b8392..841f2c3aa 100644
--- a/src/admin/js/utilities.js
+++ b/src/admin/js/utilities.js
@@ -23,7 +23,13 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
             return '/collections/?' + qs.stringify(query);
         },
         getCollectionItemsPath(collectionId, query) {
-            return 'collections/'+ collectionId + '/items/?' + qs.stringify(query);
+            return '/collections/'+ collectionId + '/items/?' + qs.stringify(query);
+        },
+        getCollectionFieldsPath(collectionId) {
+            return '/collections/'+ collectionId + '/fields/';
+        },
+        getCollectionFiltersPath(collectionId) {
+            return '/collections/'+ collectionId + '/filters/';
         },
         getItemsPath(query) {
             return '/items/?' + qs.stringify(query);
@@ -66,7 +72,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
         getNewCollectionPath() {
             return '/collections/new';
         },
-        getNewItemPath() {
+        getNewItemPath(collectionId) {
             return '/collections/' + collectionId + '/items/new';
         },
         getNewFilterPath() {
diff --git a/src/admin/pages/edition/collection-edition-page.vue b/src/admin/pages/edition/collection-edition-page.vue
index 11bdef814..8eb8caae2 100644
--- a/src/admin/pages/edition/collection-edition-page.vue
+++ b/src/admin/pages/edition/collection-edition-page.vue
@@ -120,7 +120,7 @@ export default {
 
                 this.isLoading = false;
 
-                this.$router.push('/collections/' + this.collectionId);
+                this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
             });
         },
         getStatusColor(status) {
@@ -159,7 +159,7 @@ export default {
             .catch(error => console.log(error));
         },
         cancelBack(){
-            this.$router.push('/collections/' + this.collectionId);
+            this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
         }
     },
     created(){
diff --git a/src/admin/pages/edition/collection-fields-edition-page.vue b/src/admin/pages/edition/collection-fields-edition-page.vue
deleted file mode 100644
index 488fcb6b7..000000000
--- a/src/admin/pages/edition/collection-fields-edition-page.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-    <div>
-        <h1>Collection Fields Edition Page</h1>
-        <b-loading :active.sync="isLoadingFieldTypes"></b-loading>
-        <div class="columns">
-            <div class="column">
-                <b-field :label="$i18n.get('label_active_fields')" is-grouped>
-                    <draggable 
-                        class="box active-fields-area"
-                        @change="handleChange"
-                        :class="{'fields-area-receive': isDraggingFromAvailable}" 
-                        :list="activeFieldList" 
-                        :options="{group:'fields', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
-                        <div 
-                            class="active-field-item" 
-                            :class="{'not-sortable-item': field.id == undefined}" 
-                            v-for="(field, index) in activeFieldList" :key="index">
-                            {{ field.name }}
-                            <span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span> (not configured)</span>
-                            <a @click.prevent="removeField(field)" v-if="field.id != undefined"><b-icon is-small icon="delete"></b-icon></a>
-                            <b-icon is-small icon="pencil" v-if="field.id != undefined"></b-icon>
-                        </div>
-                        <div slot="footer">Drag and drop Fields here to add them to Collection.</div>
-                    </draggable> 
-                </b-field>
-            </div>
-            <div class="column">
-                <b-field :label="$i18n.get('label_available_fields')" is-grouped>
-                    <draggable class="box available-fields-area" :list="availableFieldList" :options="{ group: { name:'fields', pull: 'clone', put: 'false', revertClone: 'true' }}">
-                        <div class="available-field-item" v-for="(field, index) in availableFieldList" :key="index">
-                            {{ field.name }}
-                        </div>
-                    </draggable> 
-                </b-field>
-            </div>
-        </div>
-    </div> 
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex';
-
-export default {
-    name: 'CollectionFieldsEditionPage',
-    data(){           
-        return {
-            collectionId: '',
-            isDraggingFromAvailable: false,
-            isLoadingFieldTypes: true,
-            isLoadingFields: false
-        }
-    },
-    methods: {
-        ...mapActions('collection', [
-            'fetchFieldTypes',
-            'fetchFields',
-            'sendField',
-            'deleteField',
-            'updateCollectionFieldsOrder'
-        ]),
-        ...mapGetters('collection',[
-            'getFieldTypes',
-            'getFields'
-        ]),
-        handleChange($event) {
-            
-            if ($event.added) {
-                this.addNewField($event.added.element, $event.added.newIndex);
-            } else if ($event.removed) {
-                this.removeField($event.removed.element);
-            } else if ($event.moved) {
-                this.updateFieldsOrder(); 
-            }
-            
-        },
-        updateFieldsOrder() {
-            let fieldsOrder = [];
-            for (let field of this.activeFieldList) {
-                fieldsOrder.push({'id': field.id, 'enabled': true});
-            }
-            this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
-        },
-        addNewField(newField, newIndex) {
-            this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'publish'})
-            .then((field) => {
-                this.activeFieldList.splice(newIndex, 1, field);
-                this.updateFieldsOrder();
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-        },
-        removeField(removedField) {
-            this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id })
-            .then((field) => {
-                let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
-                if (index >= 0) {  
-                    this.activeFieldList.splice(index, 1);
-                }
-                this.updateFieldsOrder(); 
-            })
-            .catch((error) => {
-            });
-        }
-    },
-    computed: {
-        availableFieldList() {
-            return this.getFieldTypes();
-        },
-        activeFieldList() {
-            return this.getFields();
-        }
-    },
-    created() {
-        this.isLoadingFieldTypes = true;
-        this.isLoadingFields = true;
-
-        this.collectionId = this.$route.params.id;
-        
-        this.fetchFieldTypes()
-            .then((res) => {
-                this.isLoadingFieldTypes = false;
-            })
-            .catch((error) => {
-                this.isLoadingFieldTypes = false;
-            });
-        this.fetchFields(this.collectionId)
-            .then((res) => {
-                this.isLoadingFields = false;
-            })
-            .catch((error) => {
-                this.isLoadingFields = false;
-            });
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-
-    @import "../../scss/_variables.scss";
-
-    .active-fields-area {
-        min-height: 40px;
-        padding: 10px;
-
-        &.fields-area-receive {
-            background-color: whitesmoke;
-            border: 1px dashed gray;
-        }
-
-        .active-field-item {
-            background-color: white;
-            padding: 0.2em 0.5em;
-            margin: 10px;
-            border-radius: 5px;
-            border: 1px solid gainsboro;
-            display: block;
-            cursor: grab;
-            .icon { float: right }
-            .label-details {
-                font-weight: normal;
-                font-style: italic;
-                color: gray;
-            }
-
-            .loading-spinner {
-                animation: spinAround 500ms infinite linear;
-                border: 2px solid #dbdbdb;
-                border-radius: 290486px;
-                border-right-color: transparent;
-                border-top-color: transparent;
-                content: "";
-                display: inline-block;
-                height: 1em;
-                width: 1em;
-            }
-
-            &.not-sortable-item {
-                color: gray;
-            }
-        }
-        .active-field-item:hover {
-            box-shadow: 0px 0px 2px #777;
-        }
-
-        .sortable-chosen {
-            background-color: $primary-lighter;
-            padding: 0.2em 0.5em;
-            margin: 10px;
-            border-radius: 5px;
-            border: 3px dashed $primary-light;
-            display: block; 
-        }
-    }
-
-    .available-fields-area {
-        padding: 10px;
-        border: 1px dashed gray;
-        border-radius: 5px;
-        background-color: whitesmoke;
-
-        .available-field-item {
-            padding: 0.2em 0.5em;
-            margin: 10px;
-            border-radius: 5px;
-            background-color: white;
-            border: 1px solid gainsboro;
-            display: inline-flex;
-            cursor: grab;
-        }
-        .available-field-item:hover {
-            border: 1px solid lightgrey;
-            box-shadow: 0px 0px 2px #777;
-        }
-    }
-</style>
-
-
diff --git a/src/admin/pages/edition/item-edition-page.vue b/src/admin/pages/edition/item-edition-page.vue
index d9d72b018..b11dcd496 100644
--- a/src/admin/pages/edition/item-edition-page.vue
+++ b/src/admin/pages/edition/item-edition-page.vue
@@ -113,7 +113,7 @@ export default {
 
                 this.isLoading = false;
 
-                this.$router.push('/collections/' + this.form.collectionId + '/items/' + this.itemId);
+                this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
             }).catch(error => {
                 console.log(error);
 
@@ -160,7 +160,7 @@ export default {
             });
         },
         cancelBack(){
-            this.$router.push('/collections/' + this.collectionId);
+            this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
         }
     },
     computed: {
diff --git a/src/admin/pages/singles/collection-page.vue b/src/admin/pages/singles/collection-page.vue
index 8689fab32..cd8cedaa8 100644
--- a/src/admin/pages/singles/collection-page.vue
+++ b/src/admin/pages/singles/collection-page.vue
@@ -23,7 +23,7 @@
                     <router-link
                             tag="a"
                             class="card-footer-item"
-                            :to="{ path: `/collections/${collection.id}/items/new`, params: { collection_id: collection.id }}">
+                            :to="{ path: $routerHelper.getNewItemPath(collection.id), params: { collection_id: collection.id }}">
                         Criar Item
                     </router-link>
                 </footer>
diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue
index ef1cbc6e8..5b789d541 100644
--- a/src/admin/pages/singles/item-page.vue
+++ b/src/admin/pages/singles/item-page.vue
@@ -23,11 +23,11 @@
             </div>
             <footer class="card-footer">
                 <router-link
-                        class="card-footer-item" :to="{ path: `/collections/${collectionId}`}">
+                        class="card-footer-item" :to="{ path: $routerHelper.getCollectionPath(collectionId)}">
                     Ver Coleção
                 </router-link>
                 <router-link
-                        class="card-footer-item" :to="{ path: `/collections/${collectionId}/items/${itemId}/edit`}">
+                        class="card-footer-item" :to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
                     Editar Item
                 </router-link>
             </footer>
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index ddfed2f99..2bc1be675 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -8,7 +8,7 @@ $secondary: #1F2F56;
 $secondary-invert: findColorInvert($primary);
  
 $primary-light:#A5CDD7;
-$primary-lighter: lighten($primary-light, 10%);
+$primary-lighter: lighten($primary-light, 15%);
 $primary-dark: #55A0AF;
 $primary-darker: darken($primary-dark, 5%);