diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
index b344334..1125019 100644
--- a/components/ui/Icon.tsx
+++ b/components/ui/Icon.tsx
@@ -14,6 +14,7 @@ export type AvailableIcons =
   | "Diners"
   | "Discord"
   | "Discount"
+  | "Download"
   | "Elo"
   | "Ecanna"
   | "Edit"
diff --git a/components/ui/MyDocs.tsx b/components/ui/MyDocs.tsx
index 1571a18..f8f389c 100644
--- a/components/ui/MyDocs.tsx
+++ b/components/ui/MyDocs.tsx
@@ -1,5 +1,6 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Modal from "../../components/ui/Modal.tsx";
+import PageWrap from "../../components/ui/PageWrap.tsx";
 import { useEffect, useState } from "preact/hooks";
 import { useUI } from "../../sdk/useUI.ts";
 import { h } from "preact";
@@ -20,14 +21,18 @@ const DocList = ({ docs }: { docs: DocListType[] }) => {
       <ul>
         {docs.map((d) => {
           return (
-            <li class="flex items-center">
+            <li class="flex items-center gap-4">
               <a class="w-full" href={d.file_url}>
-                <div class="flex justify-between rounded-xl bg-slate-300 w-full px-5 h-10 items-center">
+                <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
                   <div class="flex gap-2">
-                    <Icon id="Anexo" size={24} />
-                    <span>{d.title}</span>
+                    <span class="text-[#8F8D8D]">
+                      <Icon id="Anexo" size={24} />
+                    </span>
+                    <span class="text-[#393939] font-semibold">{d.title}</span>
                   </div>
-                  <span class="badge">{d.category}</span>
+                  <span class="text-[#8F8D8D] flex justify-end w-6">
+                    <Icon id="Download" height={19} />
+                  </span>
                 </div>
               </a>
               <Icon id="Trash" size={24} />
@@ -39,12 +44,12 @@ const DocList = ({ docs }: { docs: DocListType[] }) => {
   } else {
     return (
       <div
-        class="flex justify-between rounded-xl bg-red-300 w-full px-5 h-10 items-center cursor-pointer gap-4 text-red-600"
+        class="flex flex-col rounded-md bg-[#E9932E] w-full px-5 p-4 items-center cursor-pointer gap-4 text-[#954409]"
         onClick={() => {
           displayNewDocModal.value = true;
         }}
       >
-        <span class="">
+        <span class="font-semibold">
           Você ainda não tem documentos deste tipo. Clique para fazer upload
         </span>
         <Icon id="Upload" size={24} />
@@ -142,10 +147,12 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
       open={displayNewDocModal.value}
       onClose={() => displayNewDocModal.value = false}
     >
-      <div class="flex flex-col p-16 gap-3 bg-white">
-        <h3>Subir novo Documento</h3>
+      <div class="flex flex-col p-16 gap-3 bg-[#EDEDED] rounded-xl">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+          Subir novo Documento
+        </h3>
         <input
-          class="input input-bordered"
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white"
           placeholder="Título do Documento"
           value={docTitle}
           onChange={(e) => {
@@ -157,7 +164,7 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
           onChange={(e) => {
             setDocCategory(e.currentTarget.value);
           }}
-          class="select select-primary w-full max-w-xs"
+          class="select select-primary w-full max-w-xs text-[#8b8b8b] border-none disabled:bg-[#e3e3e3] bg-white"
         >
           <option disabled selected>Tipo de Documento</option>
           <option value="habeas_corpus">Jurídico / Habeas Corpus</option>
@@ -172,16 +179,24 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
           </div>
           <input
             type="file"
-            class="file-input file-input-bordered file-input-xs w-full max-w-xs"
+            class="file-input file-input-primary w-full max-w-xs"
             onChange={(e) => handleStoreDocument(e)}
           />
         </label>
 
-        <button class="btn btn-primary" onClick={handleCreate}>
+        <button class="btn btn-secondary text-white" onClick={handleCreate}>
           Subir Documento{"   "}{isUploading
             ? <span class="loading loading-spinner text-white"></span>
             : <Icon id="Upload" size={24} />}
         </button>
+        <button
+          onClick={() => {
+            displayNewDocModal.value = false;
+          }}
+          class="btn btn-ghost uppercase font-medium"
+        >
+          Cancelar
+        </button>
       </div>
     </Modal>
   );
@@ -223,16 +238,19 @@ function MyDocs() {
   const idDocs = docs.filter((d) => d.category === "identification");
 
   return (
-    <div class="">
-      <div class="flex justify-between mb-10">
-        <h3>Meus Documentos</h3>
+    <PageWrap>
+      <div class="flex justify-between gap-4 mb-10">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+          Meus Documentos
+        </h3>
         <button
-          class="btn btn-success"
+          class="rounded-md bg-secondary h-8 w-[85px] flex items-center p-3 justify-between text-white"
           onClick={() => {
             displayNewDocModal.value = true;
           }}
         >
-          Subir novo Documento
+          <span class="text-sm font-medium">Subir</span>
+          <Icon id="Upload" size={18} />
         </button>
         <NewDocModal onFinishCreate={getDocuments} />
         <PlanLimitAlert
@@ -242,32 +260,32 @@ function MyDocs() {
         />
       </div>
       <div class="flex flex-col gap-3">
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos de Anvisa</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={anvisaDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos Médicos</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={medicalDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos Judiciais</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={habeasDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos de Identificação</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={idDocs} />}
-        </div>
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Dados Pessoais
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={anvisaDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos Médicos
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={medicalDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos Judiciais
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={habeasDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos de Identificação
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={idDocs} />}
       </div>
-    </div>
+    </PageWrap>
   );
 }
 
diff --git a/static/sprites.svg b/static/sprites.svg
index 16124a6..bd94eb2 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -1,4 +1,20 @@
 <svg style="display:none">
+	<symbol fill="none" viewBox="0 0 22 16" id="Upload" xmlns="http://www.w3.org/2000/svg">
+	<path d="M5.5 16c-1.517 0-2.812-.525-3.887-1.575C.538 13.375 0 12.092 0 10.575c0-1.3.392-2.458 1.175-3.475S2.983 5.433 4.25 5.15c.417-1.533 1.25-2.775 2.5-3.725C8 .475 9.417 0 11 0c1.95 0 3.604.679 4.962 2.037C17.321 3.396 18 5.05 18 7c1.15.133 2.104.629 2.863 1.487A4.41 4.41 0 0 1 22 11.5c0 1.25-.437 2.313-1.312 3.188S18.75 16 17.5 16H12c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 14V8.85L8.4 10.4 7 9l4-4 4 4-1.4 1.4L12 8.85V14h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C18.792 9.242 18.2 9 17.5 9H16V7c0-1.383-.487-2.563-1.462-3.538C13.563 2.487 12.383 2 11 2s-2.562.487-3.537 1.462C6.488 4.437 6 5.617 6 7h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 2 10.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 5.5 14H8v2H5.5Z" fill="currentColor"/>
+	</symbol>
+	<symbol fill="none" viewBox="0 0 96 96" id="Anexo" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#aa)">
+	<path d="M56 8H24c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V32L56 8Zm16 72H24V16h32v16h16v48ZM48 68c-4.4 0-8-3.6-8-8V38c0-1.12.88-2 2-2s2 .88 2 2v22h8V38c0-5.52-4.48-10-10-10s-10 4.48-10 10v22c0 8.84 7.16 16 16 16s16-7.16 16-16V44h-8v16c0 4.4-3.6 8-8 8Z" fill="currentColor"/>
+	</g>
+	<defs>
+	<clipPath id="aa">
+	<path fill="#fff" d="M0 0h96v96H0z"/>
+	</clipPath>
+	</defs>
+	</symbol>
+	<symbol fill="none" viewBox="0 0 19 15" id="Download" xmlns="http://www.w3.org/2000/svg">
+	<path d="M3.167 13.287v-1.208h12.666v1.208H3.167ZM9.5 10.871 3.958 5.436h3.167V1.208h4.75v4.228h3.167L9.5 10.87Zm0-1.963 2.296-2.264h-1.504V2.416H8.708v4.228H7.204L9.5 8.908Z" fill="currentColor"/>
+	</symbol>
 	<symbol fill="none" viewBox="0 0 12 12" id="Edit" xmlns="http://www.w3.org/2000/svg">
 	<path d="M0 12h2.5l7.374-7.374-2.5-2.5L0 9.5V12Zm1.333-1.947 6.041-6.04.614.613-6.041 6.04h-.614v-.613ZM10.248.192a.664.664 0 0 0-.94 0l-1.22 1.22 2.5 2.5 1.22-1.22c.26-.26.26-.68 0-.94l-1.56-1.56Z" fill="currentColor"/>
 	</symbol>