diff --git a/docs/docs/sprint-4/postgres_setup/postgres_setup.md b/docs/docs/sprint-4/postgres_setup/postgres_setup.md
new file mode 100644
index 0000000..7d5a48d
--- /dev/null
+++ b/docs/docs/sprint-4/postgres_setup/postgres_setup.md
@@ -0,0 +1,68 @@
+---
+title: Setup do Postgres
+sidebar_position: 3
+---
+
+
+Essa implementação utiliza o GORM, uma biblioteca de mapeamento objeto-relacional para Go, para facilitar a interação com um banco de dados PostgreSQL. Cinco estruturas de dados são definidas: User, Sensor, Props, Elements, e Layout, cada uma representando entidades diferentes em um sistema.
+
+A estrutura User representa os usuários do sistema, com campos como nome, e-mail e senha, e associações com outras entidades como Directorate e Layout. Directorate representa as diretorias no sistema, enquanto Layout representa os layouts de interface. A estrutura Elements representa os elementos que compõem um layout, e Props armazena propriedades genéricas associadas a esses elementos.
+
+
+
+![shcema1](/img/schema1.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do usuário
+3) Name representa o nome do usuário
+4) Email é o endereço de e-mail do usuário
+5) Password é a senha do usuário
+6) Role é o papel do usuário, com um valor padrão de 1
+7) DirectorateRefer é uma referência à diretoria do usuário
+8) Directorate é a diretoria à qual o usuário pertence
+9) LayoutRefer é uma referência ao layout do usuário
+10) Layout é o layout associado ao usuário
+
+
+![schema2](/img/schema2.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única 
+3) Directorate representa o nome da diretoria
+
+
+![schema3](/img/schema3.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do elemento
+3) Name é o nome do elemento
+4) PropsRefer é uma referência aos atributos (props) do elemento
+5) Props é a estrutura de atributos associada ao elemento
+
+
+
+![schema4](/img/schema4.png)
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do atributo
+3) Value é o valor do atributo
+
+![schema5](/img/schema5.png)
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária do layout
+3) ElementsRefer é uma referência aos elementos do layout
+4) Elements é a estrutura de elementos associada ao layout
+5) Index é a posição do layout
+
+
+![schema6](/img/schema6.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) Identifier é o identificador do sensor
+3) Name é o nome do sensor
+3) CoordX é a coordenada X do sensor
+4) CoordY é a coordenada Y do sensor
+
+
+
+
+
diff --git a/docs/static/img/schema1.png b/docs/static/img/schema1.png
new file mode 100644
index 0000000..57f8954
Binary files /dev/null and b/docs/static/img/schema1.png differ
diff --git a/docs/static/img/schema2.png b/docs/static/img/schema2.png
new file mode 100644
index 0000000..cfc803f
Binary files /dev/null and b/docs/static/img/schema2.png differ
diff --git a/docs/static/img/schema3.png b/docs/static/img/schema3.png
new file mode 100644
index 0000000..d310d72
Binary files /dev/null and b/docs/static/img/schema3.png differ
diff --git a/docs/static/img/schema4.png b/docs/static/img/schema4.png
new file mode 100644
index 0000000..de2b6af
Binary files /dev/null and b/docs/static/img/schema4.png differ
diff --git a/docs/static/img/schema5.png b/docs/static/img/schema5.png
new file mode 100644
index 0000000..7c6d3ae
Binary files /dev/null and b/docs/static/img/schema5.png differ
diff --git a/docs/static/img/schema6.png b/docs/static/img/schema6.png
new file mode 100644
index 0000000..e916c54
Binary files /dev/null and b/docs/static/img/schema6.png differ
diff --git a/src/API-Collection.json b/src/API-Collection.json
index cb81b8f..42f2070 100644
--- a/src/API-Collection.json
+++ b/src/API-Collection.json
@@ -59,7 +59,7 @@
             "params": [],
             "body": {
                 "type": "json",
-                "raw": "{\n  \"name\": \"Meu Nome\",\n  \"email\":\"meu@email.com\",\n  \"password\": \"minhasenha\"\n}",
+                "raw": "{\n  \"name\": \"Meu Nome\",\n  \"email\":\"meuTimao@email.com\",\n  \"password\": \"minhasenha\"\n}",
                 "form": []
             },
             "tests": []
@@ -98,7 +98,7 @@
             "params": [],
             "body": {
                 "type": "json",
-                "raw": "{\n  \"email\": \"meu@email.com\",\n  \"password\": \"minhasenha\"\n}",
+                "raw": "{\n  \"email\": \"meuTimao@email.com\",\n  \"password\": \"minhasenha\"\n}",
                 "form": []
             },
             "tests": []
diff --git a/src/docker-compose.yaml b/src/docker-compose.yaml
index 8105ce8..ad02aa1 100644
--- a/src/docker-compose.yaml
+++ b/src/docker-compose.yaml
@@ -82,4 +82,10 @@ services:
       interval: 2s
       timeout: 2s
       retries: 20
-    restart: always
\ No newline at end of file
+    restart: always
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8089:8080
\ No newline at end of file
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 51356be..7f4aefb 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -21,10 +21,11 @@
         "i": "^0.3.7",
         "pinia": "^2.1.7",
         "primevue": "^3.49.1",
+        "universal-cookie": "^6.1.3",
         "vue": "^3.4.15",
-        "vue-echarts": "^6.6.9",
         "vue-router": "^4.2.5",
-        "vue3-google-map": "^0.20.0"
+        "vue3-cookies": "^1.0.6",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -1098,6 +1099,11 @@
         "vue": "^2.7.0 || ^3.0.0"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2275,6 +2281,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -3552,9 +3566,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -6164,6 +6178,11 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -6820,6 +6839,15 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/universal-cookie": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.3.tgz",
+      "integrity": "sha512-AETYRrhpRgl9T1YtnODmQE32G81U3A+f3HO3ZeK7efbXqe3x+RNOW4RTpV0iff7zJWhGYJA6EI0Mm+w50aFTAw==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -7343,22 +7371,6 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue3-google-map": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/vue3-google-map/-/vue3-google-map-0.20.0.tgz",
-      "integrity": "sha512-GUih2O3lhKKBjl9jODZgva5OtwX2DXQJEL+6EO7sEk9mD8AJbSjxbT8KjfKUP90fYIwUmZpwvcEU0cqiCLCeaA==",
-      "dependencies": {
-        "@googlemaps/js-api-loader": "^1.16.2",
-        "@googlemaps/markerclusterer": "^2.4.0",
-        "fast-deep-equal": "^3.1.3"
-      },
-      "engines": {
-        "node": ">=16.11.0"
-      },
-      "peerDependencies": {
-        "vue": "^3"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 1f76b27..bb951ee 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -27,10 +27,11 @@
     "i": "^0.3.7",
     "pinia": "^2.1.7",
     "primevue": "^3.49.1",
+    "universal-cookie": "^6.1.3",
     "vue": "^3.4.15",
-    "vue-echarts": "^6.6.9",
     "vue-router": "^4.2.5",
-    "vue3-google-map": "^0.20.0"
+    "vue3-cookies": "^1.0.6",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index fd2016a..473caee 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <script></script>
 <template>
-  <div class="bg-neutral-700 h-screen w-screen">
+  <div class="bg-root-color h-auto w-screen">
     <router-view></router-view>
   </div>
 </template>
diff --git a/src/frontend/src/components/Comum/DashboardContainer.vue b/src/frontend/src/components/Comum/DashboardContainer.vue
new file mode 100644
index 0000000..783db62
--- /dev/null
+++ b/src/frontend/src/components/Comum/DashboardContainer.vue
@@ -0,0 +1,47 @@
+<script setup>
+
+    import SideBar from '../SideBar.vue' 
+    import MainChart from '../MainChart.vue';
+    import GrapchA from '../GrapchA.vue';
+    import GrapchB from '../GrapchB.vue';
+    import GrapchC from '../GrapchC.vue';
+
+</script>
+
+<template>
+    <div class="grid grid-cols-6  w-screen h-auto min-h-96 ">
+        <div class=" bg-slate-100  sideMenu"></div>
+        <SideBar />
+
+        <div class="xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
+            
+            <div class="flex flex-wrap gap-10 h-full max-w-full m-10 items-center align-items: flex-start" >
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">MainChart</h1>
+                        <MainChart />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchA</h1>        
+                        <GrapchA />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchB</h1>
+                        <GrapchB  />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchC</h1>
+                        <GrapchC />
+                    </div>
+                </div>
+            </div> 
+        </div>
+    </div>
+</template>
+  
diff --git a/src/frontend/src/components/Comum/HeaderBar.vue b/src/frontend/src/components/Comum/HeaderBar.vue
index b6fe51c..1acb225 100644
--- a/src/frontend/src/components/Comum/HeaderBar.vue
+++ b/src/frontend/src/components/Comum/HeaderBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-slate-100">
+  <Disclosure as="nav" class="bg-slate-100 border-botton">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-16 items-center justify-between">
         <a href="/" class="flex flex-shrink-0 items-center">
diff --git a/src/frontend/src/components/DashboardContainer.vue b/src/frontend/src/components/DashboardContainer.vue
index 2f3d9f2..1b8baea 100644
--- a/src/frontend/src/components/DashboardContainer.vue
+++ b/src/frontend/src/components/DashboardContainer.vue
@@ -1,25 +1,73 @@
 <script setup>
-import SideBar from './SideBar.vue'
-import MainChart from './MainChart.vue';
-import HeatMap from './HeatMap.vue'
+
+    import SideBar from './SideBar.vue' 
+    import MainChart from './MainChart.vue';
+    import GrapchA from './GrapchA.vue';
+    import GrapchB from './GrapchB.vue';
+    import GrapchC from './GrapchC.vue';
+    
+    import axios from 'axios';
+    import { useCookies } from 'vue3-cookies'
+    import { ref, onMounted } from 'vue';
+    import draggable from 'vuedraggable';
+
+    const elements = ref(null);
+
+    const authTokenKey = 'authToken';
+    
+
+    const get_elements = async () =>{
+        try {
+            const url = '/api/platform/getComponents';
+            
+            const response = await axios.post( url,  {
+            Id: Number(useCookies().cookies.get(authTokenKey)),
+            });
+
+            console.log(response.data.elements)
+            if  (response.data.elements != null){
+                return response.data.elements}
+
+        } catch (error) {
+            console.error('Ocorreu um erro:', error);
+            
+        }
+        return [{"Name": "MainChart","Index": 1,"Value": "w-96"}]
+    } 
+
+
+   async function format_data() {
+       var  raw_elements = await get_elements()
+       elements.value = raw_elements
+    }
+
+    onMounted(() => {
+    format_data();
+  });
+
 
 </script>
 
 <template>
     <div class="grid grid-cols-6  w-screen h-auto min-h-96 ">
-        <div class=" bg-slate-100 sideMenu"></div>
+        <div class=" bg-slate-100  sideMenu"></div>
         <SideBar />
 
-        <div class="bg-white xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
+        <div class=" xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
             
-            <div class="flex flex-col gap-10 h-full max-w-full m-10 items-center justify-center align-items: flex-start">
-                <div style="width: 100%; ">
-                    <HeatMap />
-                </div>
-                <div style="width: 100%; max-height: 300px; height: 300px;">
-                    <MainChart />
-                </div>
-            </div>
+            <draggable v-model="elements" tag="div" class="flex flex-wrap gap-10 h-full max-w-full m-10 items-center align-items: flex-start" :animation="300">
+                <template #item="{ element: element_ }">
+                    <div :class="`${element_.Value} flex justify-center cursor-grab  items-center min-h-52 h-auto bg-slate-50 soft-shadow text-center`">
+                        <div class="flex flex-col w-auto">
+                            <h1 class="m-3">{{element_.Index}}</h1>
+                            <MainChart v-if="element_.Name == 'MainChart'" />
+                            <GrapchA v-if="element_.Name == 'GrapchA'" />
+                            <GrapchB v-if="element_.Name == 'GrapchB'" />
+                            <GrapchC v-if="element_.Name == 'GrapchC'" />
+                        </div>
+                    </div>
+                </template>
+            </draggable> 
         </div>
     </div>
 </template>
diff --git a/src/frontend/src/components/GrapchA.vue b/src/frontend/src/components/GrapchA.vue
new file mode 100644
index 0000000..f8c36b0
--- /dev/null
+++ b/src/frontend/src/components/GrapchA.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-stone-600 m-3">
+        GrapchA
+    </div>
+</template>
+  
diff --git a/src/frontend/src/components/GrapchB.vue b/src/frontend/src/components/GrapchB.vue
new file mode 100644
index 0000000..ee55ca6
--- /dev/null
+++ b/src/frontend/src/components/GrapchB.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-orange-300 m-3">
+        GrapchB
+    </div>
+</template>
+  
diff --git a/src/frontend/src/components/GrapchC.vue b/src/frontend/src/components/GrapchC.vue
new file mode 100644
index 0000000..71aa52d
--- /dev/null
+++ b/src/frontend/src/components/GrapchC.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-red-200 m-3">
+        GraphC
+    </div>
+</template>
+  
diff --git a/src/frontend/src/components/HeaderBar.vue b/src/frontend/src/components/HeaderBar.vue
index 03d381a..ebef029 100644
--- a/src/frontend/src/components/HeaderBar.vue
+++ b/src/frontend/src/components/HeaderBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-slate-100">
+  <Disclosure as="nav" class="bg-slate-100   border-botton">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-16 items-center justify-between">
         <a href="/" class="flex flex-shrink-0 items-center">
@@ -72,7 +72,8 @@
                 </MenuItem>
                 <MenuItem v-slot="{ active }">
                   <a
-                    href="/"
+                  href="/auth"
+                  @click="handler"
                     :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
                     >Sign out</a
                   >
@@ -90,4 +91,10 @@
 import { Disclosure, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { BellIcon } from '@heroicons/vue/24/outline'
 import SearchBar from '../components/SearchBar.vue'
+import { useCookies } from 'vue3-cookies'
+
+function handler(event) {
+  useCookies().cookies.remove("authToken")
+  
+}
 </script>
diff --git a/src/frontend/src/components/SideBar.vue b/src/frontend/src/components/SideBar.vue
index c91b99c..aff9d24 100644
--- a/src/frontend/src/components/SideBar.vue
+++ b/src/frontend/src/components/SideBar.vue
@@ -4,7 +4,7 @@ import SideBarTitleSection from './SideBarTitleSection.vue'
 import SideBarStats from './SideBarStats.vue'
 </script>
 <template>
-        <div class="SideBar  bg-slate-100  min-h-full  xl:block max-w-sm fixed">      
+        <div class="SideBar min-h-full  xl:block max-w-sm fixed">      
             <div class="flex flex-col gap-10 items-center m-6 h-auto"> 
                 <SideBarTitleSection title="Insights Recentes"/>
                 <InsightCard/>
diff --git a/src/frontend/src/components/btn.vue b/src/frontend/src/components/btn.vue
new file mode 100644
index 0000000..4254c46
--- /dev/null
+++ b/src/frontend/src/components/btn.vue
@@ -0,0 +1,8 @@
+<template>
+    <div class="absolute right-0 z-10 mr-2 mt-2 flex justify-end xl:mr-0 xl:-mt-10">
+        <button class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-midnight font-roboto text-2xl font-bold text-white hover:text-shamrock">
+        ×
+        </button>
+    </div>
+</template>
+  
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index b965cbf..1085ec2 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -71,29 +71,51 @@
   background-color: rgba(15, 3, 43, 0.356);
 }
 
+.soft-shadow{
+  border-radius: 10px;
+  box-shadow: 0px 0px 25px 0px rgba(24, 24, 24, 0.15);
+  
+}
 
 .SideBar{
   width: 275px;
   top: 75px;
   left: 10px;
+  background-color: aliceblue;
   transition: width 0.5s;
   transition: left 0.5s;
 
+}
 
+.bg-root-color{
+  background-color: rgb(126, 126, 126);
+}
+
+.ui-color{
+  background-color: #e5faf6;
 }
 
 .sideMenu {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
+  
+}
+
+.border-top{
   border-top: 1px solid rgb(71, 71, 71);
 
 }
 
+.border-botton{
+  border-bottom: 1px solid rgb(71, 71, 71);
+}
+
 @media (min-width: 640px){
   .SideBar{
     width: 275px;
     left: 10px;
+
   }
 }
 
@@ -101,5 +123,6 @@
   .SideBar{
     width: 15.9%;
     left: 0px;
+
   }
 }
\ No newline at end of file
diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
index 19e11dc..4fe316e 100644
--- a/src/frontend/src/main.js
+++ b/src/frontend/src/main.js
@@ -1,15 +1,17 @@
 import './index.css'
 
-import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Toaster from '@meforma/vue-toaster'
+import { createSSRApp } from "vue";
+
 
 import App from './App.vue'
 import router from './router'
 
-const app = createApp(App)
+const app = createSSRApp(App)
 app.use(Toaster)
+//app.use(VueCookies)
 app.use(createPinia())
 app.use(router)
 app.use(PrimeVue, {
diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
index cb7dca2..0c52e08 100644
--- a/src/frontend/src/router/index.js
+++ b/src/frontend/src/router/index.js
@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import PathNotFound from '../views/PathNotFound.vue'
 
@@ -9,7 +8,7 @@ const router = createRouter({
     {
       path: '/', 
       name: 'home',
-      component: () => import('../views/ComumView.vue')
+      component: () => import('../views/DefaultView.vue')
 
     },
     {
@@ -17,14 +16,6 @@ const router = createRouter({
       name: 'auth',
       component: LoginView
     },
-    {
-      path: '/default', 
-      name: 'default',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/DefaultView.vue')
-    },
     { path: '/:pathMatch(.*)*', component: PathNotFound },
     
   ],strict: true
diff --git a/src/frontend/src/views/ComumView.vue b/src/frontend/src/views/ComumView.vue
deleted file mode 100644
index d957ee5..0000000
--- a/src/frontend/src/views/ComumView.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-import HeaderBar from '../components/Comum/HeaderBar.vue'
-import DashboardContainer from '../components/DashboardContainer.vue'
-
-</script>
-<template>
-  <div class="default" >
-    <HeaderBar />
-    <DashboardContainer />
-
-  </div>
-</template>
-
-
diff --git a/src/frontend/src/views/DefaultView.vue b/src/frontend/src/views/DefaultView.vue
index 84361af..5d756ec 100644
--- a/src/frontend/src/views/DefaultView.vue
+++ b/src/frontend/src/views/DefaultView.vue
@@ -1,18 +1,66 @@
 <script setup>
 
 import HeaderBar from '../components/HeaderBar.vue';
-import DashboardContainer from '../components/DashboardContainer.vue';
+
+import HeaderBarComun from '../components/Comum/HeaderBar.vue'
+import DashboardContainerComum from '../components/Comum/DashboardContainer.vue'
+
+import { useCookies } from 'vue3-cookies'
+
+
+import { defineAsyncComponent } from 'vue'
+
+const DashboardContainer = defineAsyncComponent(() =>
+  import('../components/DashboardContainer.vue')
+)
+
+const authTokenKey = 'authToken';
+
 
 function apiData(){
+  if (useCookies().cookies.get(authTokenKey) == null){
+    return  false
+  } 
+
+
   return true
 }
 
 </script>
 
-<template>
-  <div class="default">
-    <!-- Renderiza os componentes somente se apiData for definido -->
-    <HeaderBar v-if="apiData" />
-    <DashboardContainer v-if="apiData" />
+<template >
+  <div class="default" v-if="apiData() == true">
+    <!-- Renderiza os componentes com base na apiData -->
+    <HeaderBar  />
+    <DashboardContainer />
+  </div>
+  <div class="commun"  v-else>
+    <HeaderBarComun />
+    <DashboardContainerComum />
   </div>
 </template>
+
+
+
+
+<!-- {
+  "elements": [
+    {
+      "Name": "Grafico A",
+      "Index": 1,
+      "Value": "50vw"
+    },
+    {
+      "Name": "Grafico C",
+      "Index": 3,
+      "Value": "25vw"
+    },
+    {
+      "Name": "Grafico B",
+      "Index": 2,
+      "Value": "70vw"
+    }
+  ],
+  "id": 1,
+  "status": "ok"
+} -->
\ No newline at end of file
diff --git a/src/frontend/src/views/HomeView.vue b/src/frontend/src/views/HomeView.vue
deleted file mode 100644
index 206a5f2..0000000
--- a/src/frontend/src/views/HomeView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup></script>
-
-<template>
-  <main></main>
-</template>
diff --git a/src/frontend/src/views/LoginView.vue b/src/frontend/src/views/LoginView.vue
index 4faf36b..8c2a3dc 100644
--- a/src/frontend/src/views/LoginView.vue
+++ b/src/frontend/src/views/LoginView.vue
@@ -78,6 +78,7 @@
 <script>
 
 import axios from 'axios';
+import { useCookies } from 'vue3-cookies'
 
 export default {
   data() {
@@ -89,25 +90,25 @@ export default {
   methods: {
     async login() {
       try {
-        const url = '/auth/login';
-
+        const url = '/api/auth/login';
+        
 
         const response = await axios.post( url,  {
           email: String(this.email),
           password: this.password
         });
 
-        console.log(response.data);
-
+        
+        useCookies().cookies.set('authToken', response.data.id)
         if (!response.data) {
-          this.$toast.error(`Usuário ou senha estão incorretos.`);
           throw new Error('Erro ao fazer requisição para o servidor.');
         }
 
-        this.$toast.success(`Login successful! Welcome, ${this.email}`);
-        window.user = this.email;
-        this.$router.push('/default');
+        this.$toast.success(`Login successful! Welcome, ${response.data.name}`);
+        window.user = response.data.id;
+        this.$router.push('/');
       } catch (error) {
+        this.$toast.error(`Usuário ou senha estão incorretos.`);
         console.error('Ocorreu um erro:', error);
         // Aqui você pode exibir uma mensagem de erro para o usuário, informando que houve um problema durante a autenticação
       }
@@ -115,3 +116,4 @@ export default {
   }
 }
 </script>
+
diff --git a/src/frontend/src/views/PathNotFound.vue b/src/frontend/src/views/PathNotFound.vue
index e5fe56d..a6b1f07 100644
--- a/src/frontend/src/views/PathNotFound.vue
+++ b/src/frontend/src/views/PathNotFound.vue
@@ -5,6 +5,8 @@
 <template>
     <div class="flex h-auto justify-center w-screen">
         <h1>Erro 404</h1>
-        
+        <div class="flex flex-wrap h-auto w-full">
+
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/frontend/vite.config.js b/src/frontend/vite.config.js
index ec63f3a..ccf17c4 100644
--- a/src/frontend/vite.config.js
+++ b/src/frontend/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
   },
   server:{
     port: 3000,
+    
     proxy:{
       '/api': {
         target: 'http://localhost:8080',
diff --git a/src/server/auth/auth.go b/src/server/auth/auth.go
index 21db82d..c37b798 100644
--- a/src/server/auth/auth.go
+++ b/src/server/auth/auth.go
@@ -2,6 +2,7 @@ package auth
 
 import (
 	"g5/server/db"
+
 	"github.com/gin-gonic/gin"
 	"github.com/go-playground/validator/v10"
 	"gorm.io/gorm"
@@ -9,13 +10,14 @@ import (
 )
 
 type RegisterInput struct {
-	Email    string `json:"email" validate:"required,email"`
-	Password string `json:"password" validate:"required"`
-	Name     string `json:"name" validate:"required"`
+	Email       string `json:"email" validate:"required,email"`
+	Password    string `json:"password" validate:"required"`
+	Name        string `json:"name" validate:"required"`
+	Directorate int    `json:"directorate" validate:"required"`
 }
 
 type LoginInput struct {
-	Email    string `json:"email" validate:"required,email"`
+	Email    string `json:"email" validate:"required"`
 	Password string `json:"password" validate:"required"`
 }
 
@@ -35,14 +37,14 @@ func Login(c *gin.Context, pg *gorm.DB) {
 		return
 	}
 
-	token, err := LoginCheck(input.Email, input.Password, pg)
+	token, name, id, err := LoginCheck(input.Email, input.Password, pg)
 
 	if err != nil {
 		c.JSON(400, gin.H{"error": err.Error()})
 		return
 	}
 	c.SetCookie("token", token, 3600, "/", "localhost", false, true)
-	c.JSON(200, gin.H{"token": token})
+	c.JSON(200, gin.H{"token": token, "name": name, "id": id})
 
 }
 
@@ -72,15 +74,15 @@ func Register(c *gin.Context, pg *gorm.DB) {
 	hashedPassword := HashPassword(input.Password)
 
 	u := db.User{
-		Email:    input.Email,
-		Password: hashedPassword,
-		Name:     input.Name,
+		Email:            input.Email,
+		Password:         hashedPassword,
+		Name:             input.Name,
+		DirectorateRefer: input.Directorate,
 	}
 
-	
 	u.SaveUser(pg, &u)
-	
-	token, _ := GenerateToken(u.ID, u.Role)
+
+	token, _ := GenerateToken(uint(u.ID), u.Role)
 
 	c.SetCookie("token", token, 3600, "/", "localhost", false, true)
 
@@ -96,7 +98,7 @@ func ChangeRole(c *gin.Context, pg *gorm.DB) {
 		c.JSON(400, gin.H{"error": "You don't have the necessary role to access this resource"})
 		return
 	}
-	
+
 	var validate = validator.New()
 	var input struct {
 		Email string `json:"email" validate:"required,email"`
@@ -125,4 +127,4 @@ func ChangeRole(c *gin.Context, pg *gorm.DB) {
 
 	c.JSON(200, gin.H{"status": "ok"})
 
-}
\ No newline at end of file
+}
diff --git a/src/server/auth/utils.go b/src/server/auth/utils.go
index 03fe795..56970f3 100644
--- a/src/server/auth/utils.go
+++ b/src/server/auth/utils.go
@@ -3,12 +3,13 @@ package auth
 import (
 	"fmt"
 	"g5/server/db"
-	jwt "github.com/dgrijalva/jwt-go"
-	"golang.org/x/crypto/bcrypt"
-	"gorm.io/gorm"
 	"os"
 	"strconv"
 	"time"
+
+	jwt "github.com/dgrijalva/jwt-go"
+	"golang.org/x/crypto/bcrypt"
+	"gorm.io/gorm"
 )
 
 func HashPassword(password string) string {
@@ -37,11 +38,11 @@ func GenerateToken(user_id uint, role uint) (string, error) {
 	claims["exp"] = time.Now().Add(time.Hour * time.Duration(token_lifespan)).Unix()
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
 
-	return token.SignedString([]byte("teste"))
+	return token.SignedString([]byte("PRODam$%#Ah"))
 
 }
 
-func LoginCheck(email string, password string, pg *gorm.DB) (string, error) {
+func LoginCheck(email string, password string, pg *gorm.DB) (string, string, int, error) {
 
 	var err error
 
@@ -51,14 +52,13 @@ func LoginCheck(email string, password string, pg *gorm.DB) (string, error) {
 
 	if err != nil {
 		fmt.Println("email not found in database")
-		return "", err
+		return "", "Erro", 0, err
 	}
 
 	err = bcrypt.CompareHashAndPassword([]byte(u.Password), []byte(password))
-
 	if err != nil {
 		fmt.Println("password does not match (ERROR in bcrypt)")
-		return "", err
+		return "", "", 0, bcrypt.CompareHashAndPassword([]byte(u.Password), []byte(password))
 	} else {
 		fmt.Println("password matches")
 	}
@@ -68,9 +68,9 @@ func LoginCheck(email string, password string, pg *gorm.DB) (string, error) {
 	if err != nil {
 		fmt.Println("error generating token")
 		fmt.Println(err)
-		return "", err
+		return "", "", 0, err
 	}
 
-	return token, nil
+	return token, u.Name, int(u.ID), nil
 
 }
diff --git a/src/server/db/setupPostgres.go b/src/server/db/setupPostgres.go
index 9c75d24..f03730d 100644
--- a/src/server/db/setupPostgres.go
+++ b/src/server/db/setupPostgres.go
@@ -7,32 +7,68 @@ import (
 
 type User struct {
 	gorm.Model
-	Name      string
-	Email     string
-	Password  string
-	Role 		uint `gorm:"default:1"`
+	ID               uint `gorm:"primaryKey;unique;autoIncrement;"`
+	Name             string
+	Email            string
+	Password         string
+	Role             uint        `gorm:"default:1"`
+	DirectorateRefer int         `gorm:"default:1"`
+	Directorate      Directorate `gorm:"foreignKey:DirectorateRefer"`
+}
+
+type Directorate struct {
+	gorm.Model
+	ID          int `gorm:"primaryKey;unique;autoIncrement;"`
+	Directorate string
+}
+
+type Elements struct {
+	gorm.Model
+	ID         int `gorm:"primaryKey;unique;autoIncrement;"`
+	Name       string
+	PropsRefer int
+	Props      Props `gorm:"foreignKey:PropsRefer"`
+}
+
+type Props struct {
+	gorm.Model
+	ID    int `gorm:"primaryKey;unique;autoIncrement;"`
+	Value string
+}
+
+type Layout struct {
+	gorm.Model
+	ID            int `gorm:"primaryKey;"`
+	Index         int
+	UserRefer     int
+	ElementsRefer int
+	Elements      Elements `gorm:"foreignKey:ElementsRefer"`
+	User          User     `gorm:"foreignKey:UserRefer"`
 }
 
 type Sensor struct {
 	gorm.Model
-	Identifier  string
-	Name    	string
-	CoordX 		float32
-	CoordY 		float32
+	Identifier string
+	Name       string
+	CoordX     float32
+	CoordY     float32
 }
 
 func SetupPostgres() *gorm.DB {
 
 	dsn := "host=postgres user=username password=password dbname=postgres port=5432 sslmode=disable TimeZone=America/Sao_Paulo"
 
-
 	db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})
 	if err != nil {
 		panic("failed to connect database")
 	}
 
-	db.AutoMigrate(&User{})
 	db.AutoMigrate(&Sensor{})
+	db.AutoMigrate(&Props{})
+	db.AutoMigrate(&Elements{})
+	db.AutoMigrate(&Layout{})
+	db.AutoMigrate(&Directorate{})
+	db.AutoMigrate(&User{})
 
 	return db
 }
diff --git a/src/server/main.go b/src/server/main.go
index c335fc5..72ea8c9 100644
--- a/src/server/main.go
+++ b/src/server/main.go
@@ -18,8 +18,8 @@ func main() {
 	pg := db.SetupPostgres()
 
 	routes.SetupDataRoutes(r, influx, pg)
-
 	routes.SetupAuthRoutes(r, pg)
+	routes.SetupPlatformRoutes(r, pg)
 
 	r.Use(cors.New(cors.Config{
 		AllowOrigins:           []string{"http://localhost:5173"},
diff --git a/src/server/middleware/middleware.go b/src/server/middleware/middleware.go
index fe4fbbb..ebdc019 100644
--- a/src/server/middleware/middleware.go
+++ b/src/server/middleware/middleware.go
@@ -2,10 +2,11 @@ package middleware
 
 import (
 	"fmt"
-	"github.com/dgrijalva/jwt-go"
-	"github.com/gin-gonic/gin"
 	"net/http"
 	"strings"
+
+	"github.com/dgrijalva/jwt-go"
+	"github.com/gin-gonic/gin"
 )
 
 var SecretKey = []byte("teste")
@@ -27,7 +28,7 @@ func TokenAuthMiddleware() gin.HandlerFunc {
 			}
 		}
 
-		bearerToken := strings.TrimPrefix(tokenString, "Bearer ")
+		bearerToken := strings.TrimPrefix(tokenString, "Bearer")
 
 		token, err := jwt.Parse(bearerToken, func(token *jwt.Token) (interface{}, error) {
 			if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
diff --git a/src/server/platform/platform.go b/src/server/platform/platform.go
new file mode 100644
index 0000000..04cc698
--- /dev/null
+++ b/src/server/platform/platform.go
@@ -0,0 +1,46 @@
+package platform
+
+import (
+	"fmt"
+
+	"os"
+
+	"github.com/gin-gonic/gin"
+	"github.com/go-playground/validator/v10"
+	"gorm.io/gorm"
+)
+
+type GetInput struct {
+	Id int `json:"id"`
+}
+
+func GetAll(c *gin.Context, pg *gorm.DB) {
+
+	var validate = validator.New()
+	var input GetInput
+
+	if err := c.ShouldBindJSON(&input); err != nil {
+		c.JSON(400, gin.H{"error": err.Error()})
+		return
+	}
+
+	validationErr := validate.Struct(input)
+	if validationErr != nil {
+		c.JSON(400, gin.H{"error": validationErr.Error()})
+		return
+	}
+
+	type Result struct {
+		Name  string
+		Index int
+		Value string
+	}
+
+	var result []Result
+	fmt.Fprintln(os.Stdout, []any{input.Id}...)
+	// Raw SQL
+	pg.Raw("SELECT elements.name, layouts.index, props.value FROM users JOIN layouts ON users.id= layouts.user_refer  JOIN elements ON layouts.elements_refer = elements.ID JOIN props ON elements.props_refer = props.ID WHERE users.ID = ? ORDER BY layouts.index ASC", input.Id).Scan(&result)
+
+	c.JSON(200, gin.H{"status": "ok", "elements": result})
+
+}
diff --git a/src/server/routes/platform.go b/src/server/routes/platform.go
new file mode 100644
index 0000000..d7278aa
--- /dev/null
+++ b/src/server/routes/platform.go
@@ -0,0 +1,18 @@
+package routes
+
+import (
+	"g5/server/platform"
+
+	"github.com/gin-gonic/gin"
+	"gorm.io/gorm"
+)
+
+func SetupPlatformRoutes(r *gin.Engine, pg *gorm.DB) {
+
+	group := r.Group("/platform")
+
+	group.POST("/getComponents", func(c *gin.Context) { platform.GetAll(c, pg) })
+
+	//group.POST("/updateLayout", func(c *gin.Context) { platform.ChangeRole(c, pg) })
+
+}
diff --git a/src/simulator/main.go b/src/simulator/main.go
index c00ef59..104aed5 100644
--- a/src/simulator/main.go
+++ b/src/simulator/main.go
@@ -99,7 +99,7 @@ func (s *Sensor) generateWaveData(currentPosition float32) float32 {
 		//fmt.Println("Wave")
 		s.waveSize -= 1
 		loss := float32(math.Cos(float64(time.Now().Unix())) * 2)
-		fmt.Printf("Valor do loss %.2f", loss)
+		//fmt.Printf("Valor do loss %.2f", loss)
 		value = s.currentPosition + loss
 		if s.waveSize <= 0 {
 			s.status = "transtion"
@@ -224,6 +224,6 @@ func main() {
 	go simulateSensor(sslCertificate, "Moema")
 	go simulateSensor(sslCertificate, "Vila Mariana")
 	go simulateSensor(sslCertificate, "Paulista")
-	
+
 	select {}
 }
diff --git a/src/vue.config.js b/src/vue.config.js
deleted file mode 100644
index 7121b6f..0000000
--- a/src/vue.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-    devServer: {
-      proxy: 'http://localhost:8080'
-    }
-  }
-