diff --git a/Living.WebAPP/api/types.ts b/Living.WebAPP/api/types.ts
new file mode 100644
index 0000000..23543e4
--- /dev/null
+++ b/Living.WebAPP/api/types.ts
@@ -0,0 +1,3 @@
+import type { components } from "~/api/schema";
+
+export type Post = components["schemas"]["CreatePostCommand"];
diff --git a/Living.WebAPP/assets/css/main.css b/Living.WebAPP/assets/css/main.css
index e5f4b0d..61e1501 100644
--- a/Living.WebAPP/assets/css/main.css
+++ b/Living.WebAPP/assets/css/main.css
@@ -1 +1,5 @@
-a { color: inherit; } 
\ No newline at end of file
+a { color: inherit; } 
+
+body {
+    margin: 0;
+}
\ No newline at end of file
diff --git a/Living.WebAPP/components/Posts/Post.vue b/Living.WebAPP/components/Posts/Post.vue
index ff3dde1..14f6350 100644
--- a/Living.WebAPP/components/Posts/Post.vue
+++ b/Living.WebAPP/components/Posts/Post.vue
@@ -1,81 +1,20 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import Menu from "primevue/menu";
+const { content } = defineProps<{
+	content: string;
 
-const items = ref([
-	{
-		label: "Refresh",
-		icon: "pi pi-refresh",
-	},
-	{
-		label: "Search",
-		icon: "pi pi-search",
-	},
-	{
-		separator: true,
-	},
-	{
-		label: "Delete",
-		icon: "pi pi-times",
-	},
-]);
+}>();
 </script>
 
 <template>
-	<div class="card">
-		<Toast />
-		<Panel toggleable>
-			<template #header>
-				<div class="flex items-center gap-2">
-					<Avatar
-						image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-						size="large"
-						shape="circle"
-					/>
-					<span class="font-bold">Amy Elsner</span>
-				</div>
-			</template>
-			<template #footer>
-				<div class="flex flex-wrap items-center justify-between gap-4">
-					<div class="flex items-center gap-2">
-						<Button
-							icon="pi pi-user"
-							rounded
-							text
-						/>
-						<Button
-							icon="pi pi-bookmark"
-							severity="secondary"
-							rounded
-							text
-						/>
-					</div>
-					<span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
-				</div>
-			</template>
-			<template #icons>
-				<Button
-					icon="pi pi-cog"
-					severity="secondary"
-					rounded
-					text
-					@click="toggle"
-				/>
-				<Menu
-					id="config_menu"
-					:model="items"
-					popup
-				/>
-			</template>
-			<p class="m-0">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna
-				aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat.
-				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-				Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-			</p>
-		</Panel>
-	</div>
+  <div class="card">
+    <Fieldset>
+      <template #legend>
+        <div class="flex items-center pl-2">
+          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+          <span class="font-bold p-2">Amy Elsner</span>
+        </div>
+      </template>
+      <p class="m-0" v-html="content" />
+    </Fieldset>
+  </div>
 </template>
diff --git a/Living.WebAPP/components/forms/FormError.vue b/Living.WebAPP/components/forms/FormError.vue
index c5eff1c..6be5ffb 100644
--- a/Living.WebAPP/components/forms/FormError.vue
+++ b/Living.WebAPP/components/forms/FormError.vue
@@ -9,26 +9,26 @@ const { t } = useI18n({
 </script>
 
 <template>
-	<div
-		v-if="errors"
-		class="mt-2"
-	>
-		<div
-			v-for="(codes, key) in errors"
-			:key="key"
-		>
-			<div v-if="keys.includes(key as unknown as string)">
-				<div
-					v-for="code in codes"
-					:key="`${key}.${code}`"
-				>
-					<div class="text-red-500">
-						{{ t(`${key}.${code}`) }}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div
+    v-if="errors"
+    class="mt-2"
+  >
+    <div
+      v-for="(codes, key) in errors"
+      :key="key"
+    >
+      <div v-if="keys.includes(key as unknown as string)">
+        <div
+          v-for="code in codes"
+          :key="`${key}.${code}`"
+        >
+          <div class="text-red-500">
+            {{ t(`${key}.${code}`) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <i18n lang="json">
diff --git a/Living.WebAPP/layouts/Feed.vue b/Living.WebAPP/layouts/Feed.vue
index d0b0bd2..11b17c0 100644
--- a/Living.WebAPP/layouts/Feed.vue
+++ b/Living.WebAPP/layouts/Feed.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Card from "primevue/card";
 import type { MenuItem } from "primevue/menuitem";
 import { ref } from "vue";
 
@@ -9,6 +10,11 @@ const items = ref<MenuItem[]>([
 		url: "/feed",
 
 	},
+	{
+		label: "Criar",
+		icon: "pi pi-pencil",
+		url: "/posts/create",
+	},
 	{
 		label: "Explorar",
 		icon: "pi pi-objects-column",
@@ -22,52 +28,81 @@ const items = ref<MenuItem[]>([
 		icon: "pi pi-inbox",
 
 	},
+
 	{
-		label: "Profile",
-		icon: "pi pi-user",
-		url: "/me",
+		label: "Settings",
+		icon: "pi pi-cog",
 	},
 	{
-		label: "Mais",
-		icon: "pi pi-ellipsis-h",
-		items: [
-			{
-				label: "Settings",
-				icon: "pi pi-cog",
-			},
-			{
-				label: "Logout",
-				icon: "pi pi-sign-out",
-			},
-		],
+		label: "Logout",
+		icon: "pi pi-sign-out",
 	},
+
 ]);
 </script>
 
 <template>
-	<div class="card flex justify-center">
-		<PanelMenu
-			:model="items"
-			class="w-full md:w-80 max-w-19rem mt-8	"
-		>
-			<template #item="{ item }">
-				<NuxtLink
-					v-ripple
-					class="flex items-center px-4 py-2 cursor-pointer group"
-					:to="item.url"
-				>
-					<span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
-					<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
-					<Badge
-						v-if="item.badge"
-						class="ml-auto"
-						:value="item.badge"
-					/>
-				</NuxtLink>
-			</template>
-		</PanelMenu>
-		<div class="ml-5 w-full">
-			<slot />
-		</div>
-	</div>
+  <div class="card flex justify-center">
+    <div class="sidebar">
+      <PanelMenu
+        :model="items"
+        class="w-full md:w-80 max-w-19rem mt-8	"
+      >
+        <template #item="{ item }">
+          <NuxtLink
+            v-ripple
+            class="flex items-center px-4 py-2 cursor-pointer group"
+            :to="item.url"
+          >
+            <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
+            <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
+            <Badge
+              v-if="item.badge"
+              class="ml-auto"
+              :value="item.badge"
+            />
+          </NuxtLink>
+        </template>
+      </PanelMenu>
+      <div class="profile-card">
+        <Card>
+          <template #title>
+            Perfil
+          </template>
+          <template #content>
+            <div class="flex">
+              <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" class="mt-2" />
+              <p class="ml-2">
+                Miguel Oliveira
+              </p>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+    <div class="m-5 w-full">
+      <slot />
+    </div>
+  </div>
 </template>
+
+<style lang="css" scoped>
+.sidebar {
+  border-right: 0.3px solid #e0e0e0;
+  padding-right: 5px;
+  height: 100vh;
+  overflow-y: auto;
+  width: 19rem;
+  z-index: 100;
+  position: relative;
+}
+
+.profile-card {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+  border-top: 0.3px solid #e0e0e0;
+}
+</style>
diff --git a/Living.WebAPP/layouts/Home.vue b/Living.WebAPP/layouts/Home.vue
index 9b8d6ab..c0b1f14 100644
--- a/Living.WebAPP/layouts/Home.vue
+++ b/Living.WebAPP/layouts/Home.vue
@@ -28,44 +28,44 @@ const items = computed<MenuItem[]>(() => [
 </script>
 
 <template>
-	<div>
-		<Menubar :model="items">
-			<template #item="{ item, hasSubmenu, root }">
-				<NuxtLink
-					v-ripple
-					class="flex items-center"
-					:to="item.url"
-				>
-					<span :class="item.icon" />
-					<span class="ml-2">{{ item.label }}</span>
-					<Badge
-						v-if="item.badge"
-						:class="{ 'ml-auto': !root, 'ml-2': root }"
-						:value="item.badge"
-					/>
-					<span
-						v-if="item.shortcut"
-						class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"
-					>
-						{{ item.shortcut }}
-					</span>
-					<i
-						v-if="hasSubmenu"
-						:class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"
-					/>
-				</NuxtLink>
-			</template>
-			<template #end>
-				<Dropdown
-					model-value="locale"
-					:options="languages"
-					option-label="option"
-					placeholder="Selecione um idioma"
-					class="w-full md:w-14rem"
-					@change="(e) => (locale = e.value.code)"
-				/>
-			</template>
-		</Menubar>
-		<slot />
-	</div>
+  <div>
+    <Menubar :model="items">
+      <template #item="{ item, hasSubmenu, root }">
+        <NuxtLink
+          v-ripple
+          class="flex items-center"
+          :to="item.url"
+        >
+          <span :class="item.icon" />
+          <span class="ml-2">{{ item.label }}</span>
+          <Badge
+            v-if="item.badge"
+            :class="{ 'ml-auto': !root, 'ml-2': root }"
+            :value="item.badge"
+          />
+          <span
+            v-if="item.shortcut"
+            class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"
+          >
+            {{ item.shortcut }}
+          </span>
+          <i
+            v-if="hasSubmenu"
+            :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"
+          />
+        </NuxtLink>
+      </template>
+      <template #end>
+        <Dropdown
+          model-value="locale"
+          :options="languages"
+          option-label="option"
+          placeholder="Selecione um idioma"
+          class="w-full md:w-14rem"
+          @change="(e) => (locale = e.value.code)"
+        />
+      </template>
+    </Menubar>
+    <slot />
+  </div>
 </template>
diff --git a/Living.WebAPP/pages/feed/index.vue b/Living.WebAPP/pages/feed/index.vue
index d37a2ed..1d2ab06 100644
--- a/Living.WebAPP/pages/feed/index.vue
+++ b/Living.WebAPP/pages/feed/index.vue
@@ -3,7 +3,13 @@
 </script>
 
 <template>
-	<NuxtLayout name="feed">
-		<Post v-for="number in Array(5)" :key="number" class="mt-2" />
-	</NuxtLayout>
+  <NuxtLayout name="feed">
+    <Post
+      v-for="number in Array(5)"
+      :key="number"
+      class="mt-2"
+      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    />
+  </NuxtLayout>
 </template>
diff --git a/Living.WebAPP/pages/index.vue b/Living.WebAPP/pages/index.vue
index eb332cf..b201bd4 100644
--- a/Living.WebAPP/pages/index.vue
+++ b/Living.WebAPP/pages/index.vue
@@ -2,9 +2,9 @@
 </script>
 
 <template>
-	<NuxtLayout name="home">
-		<p>Home</p>
-	</NuxtLayout>
+  <NuxtLayout name="home">
+    <p>Home</p>
+  </NuxtLayout>
 </template>
 
 <i18n lang="json">
diff --git a/Living.WebAPP/pages/login/index.vue b/Living.WebAPP/pages/login/index.vue
index cd5fc7e..db244e2 100644
--- a/Living.WebAPP/pages/login/index.vue
+++ b/Living.WebAPP/pages/login/index.vue
@@ -3,55 +3,55 @@ const { form, errors, submit } = useForm("/api/auth/login", "post");
 </script>
 
 <template>
-	<NuxtLayout name="home">
-		<div class="flex justify-content-center align-items-center h-screen">
-			<Card style="width: 25rem; overflow: hidden">
-				<template #title>
-					Login
-				</template>
-				<template #subtitle>
-					Digite seu email e senha para fazer login
-				</template>
-				<template #content>
-					<InputGroup>
-						<InputGroupAddon>
-							<i class="pi pi-user" />
-						</InputGroupAddon>
-						<InputText
-							v-model="form.emailOrUsername"
-							placeholder="Email"
-						/>
-					</InputGroup>
-					<FormError
-						:errors="errors"
-						:keys="['USER', 'EMAIL']"
-					/>
-					<InputGroup class="mt-5">
-						<InputGroupAddon>
-							<i class="pi pi-lock" />
-						</InputGroupAddon>
-						<Password
-							v-model="form.password"
-							toggle-mask
-							:feedback="false"
-							placeholder="Password"
-						/>
-					</InputGroup>
-					<FormError
-						:errors="errors"
-						:keys="['PASSWORD']"
-					/>
-				</template>
-				<template #footer>
-					<div class="flex gap-3 mt-1">
-						<Button
-							label="Enviar"
-							class="w-full"
-							@click="submit"
-						/>
-					</div>
-				</template>
-			</Card>
-		</div>
-	</NuxtLayout>
+  <NuxtLayout name="home">
+    <div class="flex justify-content-center align-items-center h-screen">
+      <Card style="width: 25rem; overflow: hidden">
+        <template #title>
+          Login
+        </template>
+        <template #subtitle>
+          Digite seu email e senha para fazer login
+        </template>
+        <template #content>
+          <InputGroup>
+            <InputGroupAddon>
+              <i class="pi pi-user" />
+            </InputGroupAddon>
+            <InputText
+              v-model="form.emailOrUsername"
+              placeholder="Email"
+            />
+          </InputGroup>
+          <FormError
+            :errors="errors"
+            :keys="['USER', 'EMAIL']"
+          />
+          <InputGroup class="mt-5">
+            <InputGroupAddon>
+              <i class="pi pi-lock" />
+            </InputGroupAddon>
+            <Password
+              v-model="form.password"
+              toggle-mask
+              :feedback="false"
+              placeholder="Password"
+            />
+          </InputGroup>
+          <FormError
+            :errors="errors"
+            :keys="['PASSWORD']"
+          />
+        </template>
+        <template #footer>
+          <div class="flex gap-3 mt-1">
+            <Button
+              label="Enviar"
+              class="w-full"
+              @click="submit"
+            />
+          </div>
+        </template>
+      </Card>
+    </div>
+  </NuxtLayout>
 </template>
diff --git a/Living.WebAPP/pages/me/index.vue b/Living.WebAPP/pages/me/index.vue
index 4a13f26..210513e 100644
--- a/Living.WebAPP/pages/me/index.vue
+++ b/Living.WebAPP/pages/me/index.vue
@@ -16,71 +16,71 @@ const profileData = ref({
 </script>
 
 <template>
-	<NuxtLayout name="feed">
-		<div class="flex justify-content-center p-4">
-			<Card class="w-full">
-				<template #title>
-					<div class="flex align-items-center mb-3">
-						<Avatar
-							image="https://via.placeholder.com/350"
-							shape="circle"
-							size="large"
-							class="mr-3"
-						/>
-						<div class="flex-grow-1">
-							<h2 class="m-0">
-								{{ profileData.name }}
-							</h2>
-							<p class="text-sm text-500">
-								@{{ profileData.username }}
-							</p>
-						</div>
-						<div class="flex gap-2">
-							<Button
-								label="Seguir"
-								icon="pi pi-user-plus"
-								class="p-button-rounded p-button-outlined"
-							/>
-							<Button
-								label="Editar Perfil"
-								icon="pi pi-pencil"
-								class="p-button-rounded"
-								severity="secondary"
-							/>
-						</div>
-					</div>
-				</template>
-				<template #content>
-					<Divider class="my-2" />
-					<div class="text-left">
-						<p class="text-base mb-2">
-							{{ profileData.bio }}
-						</p>
-					</div>
-					<Divider class="my-2" />
-					<div class="flex justify-content-around surface-border py-3">
-						<div class="text-center">
-							<span class="text-xl font-bold">{{ profileData.followers }}</span>
-							<p class="text-sm text-600">
-								Seguidores
-							</p>
-						</div>
-						<div class="text-center">
-							<span class="text-xl font-bold">{{ profileData.following }}</span>
-							<p class="text-sm text-600">
-								Seguindo
-							</p>
-						</div>
-					</div>
-				</template>
-				<template #footer>
-					<div class="flex justify-content-end flex-wrap">
-						<p class="text-sm text-500">
-							Membro desde: {{ profileData.createdAt }}
-						</p>
-					</div>
-				</template>
-			</Card>
-		</div>
-	</NuxtLayout>
+  <NuxtLayout name="feed">
+    <div class="flex justify-content-center p-4">
+      <Card class="w-full">
+        <template #title>
+          <div class="flex align-items-center mb-3">
+            <Avatar
+              image="https://via.placeholder.com/350"
+              shape="circle"
+              size="large"
+              class="mr-3"
+            />
+            <div class="flex-grow-1">
+              <h2 class="m-0">
+                {{ profileData.name }}
+              </h2>
+              <p class="text-sm text-500">
+                @{{ profileData.username }}
+              </p>
+            </div>
+            <div class="flex gap-2">
+              <Button
+                label="Seguir"
+                icon="pi pi-user-plus"
+                class="p-button-rounded p-button-outlined"
+              />
+              <Button
+                label="Editar Perfil"
+                icon="pi pi-pencil"
+                class="p-button-rounded"
+                severity="secondary"
+              />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <Divider class="my-2" />
+          <div class="text-left">
+            <p class="text-base mb-2">
+              {{ profileData.bio }}
+            </p>
+          </div>
+          <Divider class="my-2" />
+          <div class="flex justify-content-around surface-border py-3">
+            <div class="text-center">
+              <span class="text-xl font-bold">{{ profileData.followers }}</span>
+              <p class="text-sm text-600">
+                Seguidores
+              </p>
+            </div>
+            <div class="text-center">
+              <span class="text-xl font-bold">{{ profileData.following }}</span>
+              <p class="text-sm text-600">
+                Seguindo
+              </p>
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div class="flex justify-content-end flex-wrap">
+            <p class="text-sm text-500">
+              Membro desde: {{ profileData.createdAt }}
+            </p>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </NuxtLayout>
 </template>
diff --git a/Living.WebAPP/pages/posts/create.vue b/Living.WebAPP/pages/posts/create.vue
new file mode 100644
index 0000000..ff37cda
--- /dev/null
+++ b/Living.WebAPP/pages/posts/create.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const value = ref("");
+</script>
+
+<template>
+  <NuxtLayout name="feed">
+    <Tabs value="0">
+      <TabList>
+        <Tab value="0">
+          Escrever
+        </Tab>
+        <Tab value="1">
+          Pré-visualizar
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel value="0">
+          <Editor v-model="value" editor-style="height: 320px" />
+        </TabPanel>
+        <TabPanel value="1">
+          <Post :content="value" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </NuxtLayout>
+</template>
+
+<style>
+
+</style>
diff --git a/Living.WebAPP/pages/register/index.vue b/Living.WebAPP/pages/register/index.vue
index 3b275be..36df2b6 100644
--- a/Living.WebAPP/pages/register/index.vue
+++ b/Living.WebAPP/pages/register/index.vue
@@ -5,91 +5,91 @@ const { form, errors, submit } = useForm("/api/auth/register", "post", {}, () =>
 </script>
 
 <template>
-	<NuxtLayout name="home">
-		<form @submit.prevent="submit">
-			<div class="flex justify-content-center align-items-center h-screen">
-				<Card style="width: 25rem; overflow: hidden">
-					<template #title>
-						Registro
-					</template>
-					<template #subtitle>
-						Preencha os seguintes dados para fazer seu cadastro
-					</template>
-					<template #content>
-						<InputGroup class="mt-3">
-							<InputGroupAddon>
-								<i class="pi pi-user" />
-							</InputGroupAddon>
-							<InputText
-								v-model="form.name"
-								placeholder="Miguel Oliveira"
-								required
-							/>
-						</InputGroup>
-						<small class="text-muted">Seu nome</small>
-						<FormError
-							:errors="errors"
-							:keys="['NAME']"
-						/>
-						<InputGroup class="mt-3">
-							<InputGroupAddon>
-								<i class="pi pi-user" />
-							</InputGroupAddon>
-							<InputText
-								v-model="form.username"
-								placeholder="migueloliveira"
-								required
-							/>
-						</InputGroup>
-						<small class="text-muted">Seu nome de usuário</small>
-						<FormError
-							:errors="errors"
-							:keys="['USERNAME']"
-						/>
-						<InputGroup class="mt-3">
-							<InputGroupAddon>
-								<i class="pi pi-user" />
-							</InputGroupAddon>
-							<InputText
-								v-model="form.email"
-								placeholder="contato@migueloliveira.com"
-								required
-							/>
-						</InputGroup>
-						<small class="text-muted">Seu email</small>
-						<FormError
-							:errors="errors"
-							:keys="['USER', 'EMAIL']"
-						/>
-						<InputGroup class="mt-3">
-							<InputGroupAddon>
-								<i class="pi pi-lock" />
-							</InputGroupAddon>
-							<Password
-								v-model="form.password"
-								toggle-mask
-								:feedback="false"
-								placeholder="oliveira@123!"
-								required
-							/>
-						</InputGroup>
-						<small class="text-muted">Sua senha</small>
-						<FormError
-							:errors="errors"
-							:keys="['PASSWORD']"
-						/>
-					</template>
-					<template #footer>
-						<div class="flex gap-3 mt-1">
-							<Button
-								label="Enviar"
-								class="w-full"
-								type="submit"
-							/>
-						</div>
-					</template>
-				</Card>
-			</div>
-		</form>
-	</NuxtLayout>
+  <NuxtLayout name="home">
+    <form @submit.prevent="submit">
+      <div class="flex justify-content-center align-items-center h-screen">
+        <Card style="width: 25rem; overflow: hidden">
+          <template #title>
+            Registro
+          </template>
+          <template #subtitle>
+            Preencha os seguintes dados para fazer seu cadastro
+          </template>
+          <template #content>
+            <InputGroup class="mt-3">
+              <InputGroupAddon>
+                <i class="pi pi-user" />
+              </InputGroupAddon>
+              <InputText
+                v-model="form.name"
+                placeholder="Miguel Oliveira"
+                required
+              />
+            </InputGroup>
+            <small class="text-muted">Seu nome</small>
+            <FormError
+              :errors="errors"
+              :keys="['NAME']"
+            />
+            <InputGroup class="mt-3">
+              <InputGroupAddon>
+                <i class="pi pi-user" />
+              </InputGroupAddon>
+              <InputText
+                v-model="form.username"
+                placeholder="migueloliveira"
+                required
+              />
+            </InputGroup>
+            <small class="text-muted">Seu nome de usuário</small>
+            <FormError
+              :errors="errors"
+              :keys="['USERNAME']"
+            />
+            <InputGroup class="mt-3">
+              <InputGroupAddon>
+                <i class="pi pi-user" />
+              </InputGroupAddon>
+              <InputText
+                v-model="form.email"
+                placeholder="contato@migueloliveira.com"
+                required
+              />
+            </InputGroup>
+            <small class="text-muted">Seu email</small>
+            <FormError
+              :errors="errors"
+              :keys="['USER', 'EMAIL']"
+            />
+            <InputGroup class="mt-3">
+              <InputGroupAddon>
+                <i class="pi pi-lock" />
+              </InputGroupAddon>
+              <Password
+                v-model="form.password"
+                toggle-mask
+                :feedback="false"
+                placeholder="oliveira@123!"
+                required
+              />
+            </InputGroup>
+            <small class="text-muted">Sua senha</small>
+            <FormError
+              :errors="errors"
+              :keys="['PASSWORD']"
+            />
+          </template>
+          <template #footer>
+            <div class="flex gap-3 mt-1">
+              <Button
+                label="Enviar"
+                class="w-full"
+                type="submit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </form>
+  </NuxtLayout>
 </template>