diff --git a/src/features/home/pages/home-page.tsx b/src/features/home/pages/home-page.tsx
index 3c2da9f..d1ceeff 100644
--- a/src/features/home/pages/home-page.tsx
+++ b/src/features/home/pages/home-page.tsx
@@ -16,6 +16,7 @@ import {
 import { ArrowDown, ArrowRight, Check } from 'lucide-react'
 import { BackgroundBlobs } from '@/shared/components/background-blobs'
 import { Footer } from '@/features/home/components/footer'
+import { Link } from 'react-router-dom'
 
 const plans = [
   {
@@ -130,7 +131,8 @@ const owners = [
   {
     name: 'Júlia Galhardi Cerqueira',
     image: 'https://d1b8zs4rmj3xdl.cloudfront.net/julia.jpeg',
-    role: 'Estagiária'
+    role: 'Estagiária',
+    linkedin: 'https://www.linkedin.com/in/j%C3%BAliacerqueira/'
   },
   {
     name: 'Vinícius Berti',
@@ -255,14 +257,16 @@ export function HomePage() {
             transition={transition}
             variants={variants}
           >
-            <Button>Começar</Button>
-            <a
-              href="https://github.com/knowlyai/knowly"
+            <Link to="/docs">
+              <Button>Começar</Button>
+            </Link>
+            <Link
+              to="https://github.com/knowlyai/knowly"
               target="_blank"
               rel="noreferrer"
             >
               <Button variant="outline">GitHub</Button>
-            </a>
+            </Link>
           </motion.div>
           <LogoCarousel />
         </motion.section>
@@ -444,9 +448,9 @@ export function HomePage() {
             variants={variants}
           >
             {owners.map((owner, index) => (
-              <a
+              <Link
                 key={index}
-                href={owner.linkedin}
+                to={owner.linkedin}
                 target="_blank"
                 rel="noreferrer"
                 className="flex h-full w-full items-center justify-center"
@@ -464,7 +468,7 @@ export function HomePage() {
                     {owner.role}
                   </span>
                 </Card>
-              </a>
+              </Link>
             ))}
           </motion.div>
         </motion.section>
diff --git a/src/features/sign-up/pages/sign-up-page.tsx b/src/features/sign-up/pages/sign-up-page.tsx
index 7107a90..37d5ae0 100644
--- a/src/features/sign-up/pages/sign-up-page.tsx
+++ b/src/features/sign-up/pages/sign-up-page.tsx
@@ -27,11 +27,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Checkbox } from '@/shared/components/checkbox'
 import { Label } from '@/shared/components/label'
-import {
-  formatCNPJ,
-  formatCPF,
-  formatPhone
-} from '@/shared/utils/format-documents'
 import toast from 'react-hot-toast'
 import { BackgroundBlobs } from '@/shared/components/background-blobs'
 import { motion } from 'framer-motion'
@@ -41,6 +36,12 @@ import { containerVariants, cardVariants } from '@/shared/utils/animations'
 import { useCreateUserMutation } from '@/shared/hooks/use-user'
 import { AxiosError } from 'axios'
 import { useNavigate } from 'react-router-dom'
+import { DOCUMENT_TYPE } from '@/shared/enums/document-type'
+import {
+  handleCNPJChange,
+  handleCPFChange,
+  handlePhoneChange
+} from '@/shared/utils/string-extensions'
 
 export function SignUpPage() {
   const [showPassword, setShowPassword] = useState(false)
@@ -55,33 +56,9 @@ export function SignUpPage() {
     mode: 'onBlur'
   })
 
-  const handleCPFChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatCPF(value)
-    onChange(formattedValue)
-  }
-
-  const handleCNPJChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatCNPJ(value)
-    onChange(formattedValue)
-  }
-
-  const handlePhoneChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatPhone(value)
-    onChange(formattedValue)
-  }
-
   async function onSubmit(values: SignUpFormData) {
     try {
-      const isIndividual = values.documentType === 'individual'
+      const isIndividual = values.documentType === DOCUMENT_TYPE.INDIVIDUAL
 
       // Convert birthDate to seconds since epoch if provided
       const birthDateSeconds = values.birthDate
@@ -196,9 +173,11 @@ export function SignUpPage() {
                             >
                               <Checkbox
                                 id="type-individual"
-                                checked={field.value === 'individual'}
+                                checked={
+                                  field.value === DOCUMENT_TYPE.INDIVIDUAL
+                                }
                                 onCheckedChange={() => {
-                                  field.onChange('individual')
+                                  field.onChange(DOCUMENT_TYPE.INDIVIDUAL)
                                   form.setValue('document', '')
                                 }}
                               />
@@ -210,9 +189,9 @@ export function SignUpPage() {
                             >
                               <Checkbox
                                 id="type-business"
-                                checked={field.value === 'business'}
+                                checked={field.value === DOCUMENT_TYPE.BUSINESS}
                                 onCheckedChange={() => {
-                                  field.onChange('business')
+                                  field.onChange(DOCUMENT_TYPE.BUSINESS)
                                   form.setValue('document', '')
                                   form.setValue('birthDate', undefined)
                                 }}
@@ -231,7 +210,8 @@ export function SignUpPage() {
                     render={({ field }) => (
                       <FormItem className="w-full">
                         <FormLabel>
-                          {form.getValues('documentType') === 'individual'
+                          {form.getValues('documentType') ===
+                          DOCUMENT_TYPE.INDIVIDUAL
                             ? 'CPF'
                             : 'CNPJ'}
                         </FormLabel>
@@ -240,7 +220,8 @@ export function SignUpPage() {
                             {...field}
                             onChange={(e) => {
                               if (
-                                form.getValues('documentType') === 'individual'
+                                form.getValues('documentType') ===
+                                DOCUMENT_TYPE.INDIVIDUAL
                               ) {
                                 handleCPFChange(e.target.value, field.onChange)
                               } else {
@@ -248,12 +229,14 @@ export function SignUpPage() {
                               }
                             }}
                             placeholder={
-                              form.getValues('documentType') === 'individual'
+                              form.getValues('documentType') ===
+                              DOCUMENT_TYPE.INDIVIDUAL
                                 ? '000.000.000-00'
                                 : '00.000.000/0000-00'
                             }
                             maxLength={
-                              form.getValues('documentType') === 'individual'
+                              form.getValues('documentType') ===
+                              DOCUMENT_TYPE.INDIVIDUAL
                                 ? 14
                                 : 18
                             }
@@ -263,7 +246,8 @@ export function SignUpPage() {
                       </FormItem>
                     )}
                   />
-                  {form.getValues('documentType') === 'individual' && (
+                  {form.getValues('documentType') ===
+                    DOCUMENT_TYPE.INDIVIDUAL && (
                     <FormField
                       control={form.control}
                       name="birthDate"
diff --git a/src/features/sign-up/types/sign-up-schema.ts b/src/features/sign-up/types/sign-up-schema.ts
index 1642bf0..1631038 100644
--- a/src/features/sign-up/types/sign-up-schema.ts
+++ b/src/features/sign-up/types/sign-up-schema.ts
@@ -68,7 +68,7 @@ export const signUpFormSchema = z
       })
     }
 
-    if (data.documentType === 'individual' && !data.birthDate) {
+    if (data.documentType === DOCUMENT_TYPE.INDIVIDUAL && !data.birthDate) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: 'A data de nascimento é obrigatória para pessoa física.',
@@ -76,7 +76,7 @@ export const signUpFormSchema = z
       })
     }
 
-    if (data.documentType === 'individual') {
+    if (data.documentType === DOCUMENT_TYPE.INDIVIDUAL) {
       // Validação CPF
       const cpfRegex = /^\d{3}\.?\d{3}\.?\d{3}-?\d{2}$/
       if (!cpfRegex.test(data.document)) {
@@ -104,7 +104,7 @@ export const signUpFormInitialValues: SignUpFormData = {
   name: '',
   email: '',
   phone: '',
-  documentType: 'individual',
+  documentType: DOCUMENT_TYPE.INDIVIDUAL,
   document: '',
   birthDate: undefined,
   password: '',
diff --git a/src/features/user-area/components/knowledge-base-detail-modal.tsx b/src/features/user-area/components/knowledge-base-detail-modal.tsx
index 3145035..7d851cb 100644
--- a/src/features/user-area/components/knowledge-base-detail-modal.tsx
+++ b/src/features/user-area/components/knowledge-base-detail-modal.tsx
@@ -274,7 +274,7 @@ echo $data['response'];`
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[80vh] max-w-2xl overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
+          <DialogTitle className="text-foreground flex items-center gap-2">
             {knowledgeBase.displayName}
             <Badge className={getStatusColor(knowledgeBase.status)}>
               {knowledgeBase.status}
@@ -287,31 +287,35 @@ echo $data['response'];`
           {/* Informações gerais */}
           <div className="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <span className="text-muted-foreground font-medium">
-                Criada em:
-              </span>
-              <p>{knowledgeBase.createdAt.toLocaleDateString('pt-BR')}</p>
+              <span className="text-foreground font-medium">Criada em:</span>
+              <p className="text-muted-foreground">
+                {knowledgeBase.createdAt.toLocaleDateString('pt-BR')}
+              </p>
             </div>
             <div>
-              <span className="text-muted-foreground font-medium">
+              <span className="text-foreground font-medium">
                 Última modificação:
               </span>
-              <p>{knowledgeBase.updatedAt.toLocaleDateString('pt-BR')}</p>
+              <p className="text-muted-foreground">
+                {knowledgeBase.updatedAt.toLocaleDateString('pt-BR')}
+              </p>
             </div>
             <div>
-              <span className="text-muted-foreground font-medium">
+              <span className="text-foreground font-medium">
                 Total de arquivos:
               </span>
-              <p>
+              <p className="text-muted-foreground">
                 {knowledgeBase.files.length} arquivo
                 {knowledgeBase.files.length !== 1 ? 's' : ''}
               </p>
             </div>
             <div>
-              <span className="text-muted-foreground font-medium">
+              <span className="text-foreground font-medium">
                 Tamanho total:
               </span>
-              <p>{knowledgeBase.totalSizeMB.toFixed(1)} MB</p>
+              <p className="text-muted-foreground">
+                {knowledgeBase.totalSizeMB.toFixed(1)} MB
+              </p>
             </div>
           </div>
 
@@ -319,9 +323,9 @@ echo $data['response'];`
 
           {/* API Keys */}
           <div className="space-y-4">
-            <h3 className="text-lg font-semibold">API Keys</h3>
+            <h3 className="text-foreground text-lg font-semibold">API Keys</h3>
             {knowledgeBase.keys.length === 0 ? (
-              <div className="text-muted-foreground py-4 text-center text-sm">
+              <div className="text-foreground py-4 text-center text-sm">
                 Nenhuma chave de API encontrada
               </div>
             ) : (
@@ -337,12 +341,12 @@ echo $data['response'];`
                       className="hover:bg-muted/50 border-border rounded-lg border-1 p-4 transition-colors"
                     >
                       <div className="mb-2 flex items-center justify-between">
-                        <span className="text-sm font-medium">
+                        <span className="text-foreground text-sm font-medium">
                           {key.kbKeyAlias}
                         </span>
                       </div>
                       <div className="flex items-center gap-2">
-                        <div className="bg-muted flex-1 rounded px-3 py-2 font-mono text-sm">
+                        <div className="bg-muted text-muted-foreground flex-1 rounded px-3 py-2 font-mono text-sm">
                           {isVisible ? key.kbKey : maskKey(key.kbKey)}
                         </div>
                         <Button
@@ -352,9 +356,9 @@ echo $data['response'];`
                           className="flex items-center gap-1"
                         >
                           {isVisible ? (
-                            <EyeOff className="h-4 w-4" />
+                            <EyeOff className="text-foreground h-4 w-4" />
                           ) : (
-                            <Eye className="h-4 w-4" />
+                            <Eye className="text-foreground h-4 w-4" />
                           )}
                         </Button>
                         <Button
@@ -364,9 +368,9 @@ echo $data['response'];`
                           className="flex items-center gap-1"
                         >
                           {isCopied ? (
-                            <Check className="h-4 w-4" />
+                            <Check className="text-foreground h-4 w-4" />
                           ) : (
-                            <Copy className="h-4 w-4" />
+                            <Copy className="text-foreground h-4 w-4" />
                           )}
                         </Button>
                       </div>
@@ -386,13 +390,15 @@ echo $data['response'];`
               className="hover:bg-muted/50 flex w-full items-center justify-between rounded-lg p-2 transition-colors"
             >
               <div className="flex items-center gap-2">
-                <Code2 className="h-5 w-5" />
-                <h3 className="text-lg font-semibold">Exemplos de Código</h3>
+                <Code2 className="text-foreground h-5 w-5" />
+                <h3 className="text-foreground text-lg font-semibold">
+                  Exemplos de Código
+                </h3>
               </div>
               {isCodeSectionExpanded ? (
-                <ChevronUp className="text-muted-foreground h-5 w-5" />
+                <ChevronUp className="text-foreground h-5 w-5" />
               ) : (
-                <ChevronDown className="text-muted-foreground h-5 w-5" />
+                <ChevronDown className="text-foreground h-5 w-5" />
               )}
             </button>
 
@@ -405,7 +411,7 @@ echo $data['response'];`
             >
               <div className="overflow-hidden">
                 {knowledgeBase.keys.length === 0 ? (
-                  <div className="text-muted-foreground py-4 text-center text-sm">
+                  <div className="text-foreground py-4 text-center text-sm">
                     Crie uma API Key para ver os exemplos de código
                   </div>
                 ) : (
@@ -418,9 +424,11 @@ echo $data['response'];`
                           onClick={() => setSelectedLanguage(lang.id)}
                           size="sm"
                           variant={
-                            selectedLanguage === lang.id ? 'default' : 'outline'
+                            selectedLanguage === lang.id
+                              ? 'secondary'
+                              : 'outline'
                           }
-                          className="flex items-center gap-1.5"
+                          className="text-foreground flex items-center gap-1.5"
                         >
                           <span>{lang.icon}</span>
                           <span>{lang.name}</span>
@@ -468,12 +476,14 @@ echo $data['response'];`
           {/* Lista de arquivos */}
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold">Arquivos</h3>
+              <h3 className="text-foreground text-lg font-semibold">
+                Arquivos
+              </h3>
               <Button
                 onClick={handleAddFiles}
                 size="sm"
                 variant="outline"
-                className="flex items-center gap-2"
+                className="text-foreground flex items-center gap-2"
               >
                 <Plus className="h-4 w-4" />
                 Adicionar arquivos
@@ -481,7 +491,7 @@ echo $data['response'];`
             </div>
 
             {knowledgeBase.files.length === 0 ? (
-              <div className="text-muted-foreground py-8 text-center">
+              <div className="text-foreground py-8 text-center">
                 <FileText className="mx-auto mb-2 h-12 w-12 opacity-50" />
                 <p>Nenhum arquivo encontrado</p>
               </div>
@@ -499,12 +509,12 @@ echo $data['response'];`
                       <FileText className="text-primary h-5 w-5 flex-shrink-0" />
                       <div className="min-w-0 flex-1">
                         <p
-                          className="truncate text-sm font-medium"
+                          className="text-muted-foreground truncate text-sm font-medium"
                           title={file.fileName}
                         >
                           {file.fileName}
                         </p>
-                        <p className="text-muted-foreground text-xs">
+                        <p className="text-foreground text-xs">
                           {formatFileSize(file.sizeMB)}
                         </p>
                       </div>
@@ -528,7 +538,11 @@ echo $data['response'];`
 
           {/* Botões de ação */}
           <div className="flex justify-end gap-3">
-            <Button onClick={() => onOpenChange(false)} variant="outline">
+            <Button
+              onClick={() => onOpenChange(false)}
+              variant="outline"
+              className="text-foreground"
+            >
               Fechar
             </Button>
             <Button
diff --git a/src/features/user-area/pages/create-base-pipeline.tsx b/src/features/user-area/pages/create-base-pipeline.tsx
index a74fdab..935fedc 100644
--- a/src/features/user-area/pages/create-base-pipeline.tsx
+++ b/src/features/user-area/pages/create-base-pipeline.tsx
@@ -25,6 +25,7 @@ import { CreateBaseData } from '../types/create-base-schema'
 import { useCreateKnowledgeBaseMutation } from '../hooks/use-kb'
 import { knowledgeBaseService } from '@/services/knowledge-base'
 import { bucketName } from '@/shared/enviroment'
+import { AxiosError } from 'axios'
 
 type PipelineStep = {
   id: string
@@ -257,7 +258,6 @@ export function CreateBasePipeline() {
         navigate('/bases')
       }, 5000)
     } catch (error) {
-      console.error('Pipeline error:', error)
       const currentStepIndex = pipeline.currentStep
       updateStepStatus(
         currentStepIndex,
@@ -265,7 +265,9 @@ export function CreateBasePipeline() {
         'Erro inesperado durante o processo'
       )
       toast.error(
-        'Erro ao criar base de conhecimento: ' + (error as Error).message
+        'Erro ao criar base de conhecimento: ' +
+          (error as AxiosError<{ details: string }>).response?.data?.details ||
+          (error as Error).message
       )
     }
   }
diff --git a/src/features/user-area/pages/user-info.tsx b/src/features/user-area/pages/user-info.tsx
index 2f7ac09..6531d06 100644
--- a/src/features/user-area/pages/user-info.tsx
+++ b/src/features/user-area/pages/user-info.tsx
@@ -23,15 +23,15 @@ import {
   TooltipTrigger
 } from '@/shared/components/tooltip'
 import { DOCUMENT_TYPE } from '@/shared/enums/document-type'
-import {
-  formatCNPJ,
-  formatCPF,
-  formatPhone
-} from '@/shared/utils/format-documents'
 import { Background } from '@/shared/components/background'
 import { useUpdateUserMutation, useUser } from '@/shared/hooks/use-user'
 import { UpdateUserRequest } from '@/services/user'
 import toast from 'react-hot-toast'
+import {
+  formatCPF,
+  formatCNPJ,
+  handlePhoneChange
+} from '@/shared/utils/string-extensions'
 
 export function UserInfoPage() {
   const [isEditing, setIsEditing] = useState(false)
@@ -45,7 +45,7 @@ export function UserInfoPage() {
       name: user?.name || '',
       email: user?.email || '',
       cellphone: user?.cellphone || '',
-      personType: user?.personType || 'individual',
+      personType: user?.personType || DOCUMENT_TYPE.INDIVIDUAL,
       cpfCnpj: user?.cpfCnpj || '',
       birthDate: user?.birthDate
     },
@@ -56,30 +56,6 @@ export function UserInfoPage() {
     return <div>Loading</div>
   }
 
-  const handleCPFChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatCPF(value)
-    onChange(formattedValue)
-  }
-
-  const handleCNPJChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatCNPJ(value)
-    onChange(formattedValue)
-  }
-
-  const handlePhoneChange = (
-    value: string,
-    onChange: (value: string) => void
-  ) => {
-    const formattedValue = formatPhone(value)
-    onChange(formattedValue)
-  }
-
   function handleEdit() {
     if (!user) return
 
@@ -129,8 +105,10 @@ export function UserInfoPage() {
       await updateUser(changedData as UpdateUserRequest)
       refetch?.()
     } catch (error) {
-      console.error('Failed to update user:', error)
-      toast.error('Erro ao atualizar os dados. Tente novamente.')
+      toast.error(
+        'Erro ao atualizar os dados. Tente novamente. ' +
+          (error as Error).message || (error as { details: string }).details
+      )
     } finally {
       setIsEditing(false)
     }
@@ -258,7 +236,7 @@ export function UserInfoPage() {
                       <FormField
                         control={form.control}
                         name="personType"
-                        render={({ field: _ }) => (
+                        render={({ field }) => (
                           <FormItem>
                             <FormLabel>Tipo de Pessoa</FormLabel>
                             <FormControl>
@@ -266,8 +244,7 @@ export function UserInfoPage() {
                                 <TooltipTrigger asChild>
                                   <Input
                                     value={
-                                      user.personType ===
-                                      DOCUMENT_TYPE.INDIVIDUAL
+                                      field.value === DOCUMENT_TYPE.INDIVIDUAL
                                         ? 'Pessoa física'
                                         : 'Pessoa jurídica'
                                     }
@@ -290,25 +267,22 @@ export function UserInfoPage() {
                           <FormItem>
                             <FormLabel>Documento</FormLabel>
                             <FormControl>
-                              <Input
-                                {...field}
-                                onChange={(e) => {
-                                  if (
-                                    form.getValues('personType') ===
-                                    'individual'
-                                  ) {
-                                    handleCPFChange(
-                                      e.target.value,
-                                      field.onChange
-                                    )
-                                  } else {
-                                    handleCNPJChange(
-                                      e.target.value,
-                                      field.onChange
-                                    )
-                                  }
-                                }}
-                              />
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Input
+                                    value={
+                                      form.getValues('personType') ===
+                                      DOCUMENT_TYPE.INDIVIDUAL
+                                        ? formatCPF(field.value)
+                                        : formatCNPJ(field.value)
+                                    }
+                                    disabled
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>Não é possível alterar o documento</p>
+                                </TooltipContent>
+                              </Tooltip>
                             </FormControl>
                             <FormMessage />
                           </FormItem>
@@ -331,9 +305,7 @@ export function UserInfoPage() {
                                           .split('T')[0]
                                       : ''
                                   }
-                                  onChange={(e) =>
-                                    field.onChange(new Date(e.target.value))
-                                  }
+                                  disabled
                                 />
                               </FormControl>
                               <FormMessage />
diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx
index e34d2da..44bb29f 100644
--- a/src/shared/components/docs-sidebar.tsx
+++ b/src/shared/components/docs-sidebar.tsx
@@ -108,7 +108,7 @@ export function DocsSidebar() {
       {/* Sidebar */}
       <motion.aside
         className={cn(
-          'bg-background/95 border-border fixed top-16 left-0 z-30 flex h-[calc(100vh-4rem)] flex-col border-r-1 backdrop-blur transition-all duration-300',
+          'bg-background/95 fixed top-16 left-0 z-30 flex h-[calc(100vh-4rem)] flex-col border-r-1 border-gray-100/20 backdrop-blur transition-all duration-300',
           // Desktop styles
           'hidden md:flex',
           isCollapsed ? 'md:w-20' : 'md:w-64',
diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx
index 0c223fd..ada4dce 100644
--- a/src/shared/components/sidebar.tsx
+++ b/src/shared/components/sidebar.tsx
@@ -46,7 +46,7 @@ export function Sidebar() {
 
   return (
     <motion.aside
-      className={`bg-background border-border fixed z-10 flex h-full flex-col justify-between border-1 px-4 py-8 pt-24 transition-all duration-300 ${
+      className={`bg-background fixed z-10 flex h-full flex-col justify-between border-r-[1px] border-gray-100/20 px-4 py-8 pt-24 transition-all duration-300 ${
         isCollapsed ? 'w-20' : 'w-96'
       }`}
       initial="hidden"
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index 65c1036..1cae253 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -4,101 +4,103 @@
 :root {
   --radius: 0.625rem;
 
-  /* neutros de fundo / texto (modo claro: mais claro e contrastante) */
-  --background: oklch(0.995 0.02 280); /* quase branco com leve toque violeta */
-  --foreground: oklch(0.15 0.07 280); /* texto roxo escuro para contraste */
+  /* neutros de fundo / texto (modo claro) */
+  --background: oklch(0.995 0.02 280);
+  --foreground: oklch(0.15 0.07 280);
 
   /* cards e popovers */
-  --card: oklch(0.995 0.02 280); /* quase branco */
+  --card: oklch(0.995 0.02 280);
   --card-foreground: oklch(0.15 0.07 280);
   --popover: oklch(0.98 0.02 280);
   --popover-foreground: oklch(0.15 0.07 280);
 
-  /* cores principais – roxo brilhante */
-  --primary: oklch(0.5 0.2 280); /* roxo vivo e claro */
-  --primary-foreground: oklch(0.995 0.02 280); /* texto quase branco */
+  /* cores principais */
+  --primary: oklch(0.5 0.2 280);
+  --primary-foreground: oklch(0.995 0.02 280);
 
   /* secundárias e neutras */
-  --secondary: oklch(0.95 0.05 280);
-  --secondary-foreground: oklch(0.5 0.2 280);
-  --muted: oklch(0.97 0.03 280);
-  --muted-foreground: oklch(0.6 0.05 280);
+  --secondary: oklch(0.92 0.05 280);
+  --secondary-foreground: oklch(0.2 0.15 280);
+  --muted: oklch(0.94 0.03 280);
+  --muted-foreground: oklch(0.45 0.05 280);
 
   /* acentos e destrutivo */
-  --accent: oklch(0.9 0.15 280);
-  --accent-foreground: oklch(0.5 0.2 280);
-  --destructive: oklch(0.6338 0.1801 15.35);
+  --accent: oklch(0.88 0.12 280);
+  --accent-foreground: oklch(0.2 0.15 280);
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.98 0.02 280);
 
   /* bordas, inputs e foco */
-  --border: oklch(0.9 0.01 280);
-  --input: oklch(0.9 0.01 280);
-  --ring: oklch(0.75 0.02 280);
-
-  /* paleta para charts – cores destacadas */
-  --chart-1: oklch(0.7 0.25 260);
-  --chart-2: oklch(0.65 0.2 280);
-  --chart-3: oklch(0.6 0.15 300);
-  --chart-4: oklch(0.75 0.22 280);
-  --chart-5: oklch(0.7 0.18 300);
-
-  /* sidebar (modo claro aprimorado) */
-  --sidebar: oklch(0.98 0.02 280);
-  --sidebar-foreground: oklch(0.15 0.07 280);
+  --border: oklch(0.88 0.02 280);
+  --input: oklch(0.88 0.02 280);
+  --ring: oklch(0.5 0.2 280);
+
+  /* charts */
+  --chart-1: oklch(0.65 0.25 260);
+  --chart-2: oklch(0.6 0.22 280);
+  --chart-3: oklch(0.55 0.18 300);
+  --chart-4: oklch(0.7 0.24 280);
+  --chart-5: oklch(0.65 0.2 300);
+
+  /* sidebar */
+  --sidebar: oklch(0.97 0.02 280);
+  --sidebar-foreground: oklch(0.2 0.1 280);
   --sidebar-primary: oklch(0.5 0.2 280);
   --sidebar-primary-foreground: oklch(0.995 0.02 280);
-  --sidebar-accent: oklch(0.9 0.15 280);
-  --sidebar-accent-foreground: oklch(0.5 0.2 280);
-  --sidebar-border: oklch(0.9 0.01 280);
-  --sidebar-ring: oklch(0.75 0.02 280);
+  --sidebar-accent: oklch(0.88 0.12 280);
+  --sidebar-accent-foreground: oklch(0.2 0.15 280);
+  --sidebar-border: oklch(0.88 0.02 280);
+  --sidebar-ring: oklch(0.5 0.2 280);
 }
 
 .dark {
-  /* fundo escuro profundo e texto claro */
-  --background: oklch(0.15 0.08 280);
-  --foreground: oklch(0.9 0.02 280);
-
-  /* cards e popovers */
-  --card: oklch(0.3 0.05 280);
-  --card-foreground: oklch(0.9 0.02 280);
-  --popover: oklch(0.35 0.06 280);
-  --popover-foreground: oklch(0.9 0.02 280);
-
-  /* principais */
-  --primary: oklch(0.7 0.05 280);
-  --primary-foreground: oklch(0.25 0.12 280);
-
-  /* secundárias e neutras */
-  --secondary: oklch(0.35 0.07 280);
-  --secondary-foreground: oklch(0.9 0.02 280);
-  --muted: oklch(0.35 0.07 280);
-  --muted-foreground: oklch(0.7 0.02 280);
-
-  /* acento e destrutivo */
-  --accent: oklch(0.5 0.08 280);
-  --accent-foreground: oklch(0.9 0.02 280);
-  --destructive: oklch(0.6 0.2 300);
-
-  /* bordas, inputs e foco */
-  --border: oklch(0.25 0 280 / 10%);
-  --input: oklch(0.25 0 280 / 15%);
-  --ring: oklch(0.5 0.02 280);
-
-  /* charts */
-  --chart-1: oklch(0.4 0.15 260);
-  --chart-2: oklch(0.5 0.12 280);
-  --chart-3: oklch(0.55 0.1 300);
-  --chart-4: oklch(0.38 0.2 280);
-  --chart-5: oklch(0.45 0.12 300);
-
-  /* sidebar */
-  --sidebar: oklch(0.3 0.05 280);
-  --sidebar-foreground: oklch(0.9 0.02 280);
-  --sidebar-primary: oklch(0.4 0.15 260);
-  --sidebar-primary-foreground: oklch(0.9 0.02 280);
-  --sidebar-accent: oklch(0.35 0.07 280);
-  --sidebar-accent-foreground: oklch(0.9 0.02 280);
-  --sidebar-border: oklch(0.25 0 280 / 10%);
-  --sidebar-ring: oklch(0.45 0.02 280);
+  /* fundo escuro e texto claro com melhor contraste */
+  --background: oklch(0.15 0.04 280);
+  --foreground: oklch(0.98 0.005 280);
+
+  /* cards e popovers com contraste aprimorado */
+  --card: oklch(0.2 0.04 280);
+  --card-foreground: oklch(0.98 0.005 280);
+  --popover: oklch(0.18 0.04 280);
+  --popover-foreground: oklch(0.98 0.005 280);
+
+  /* cores principais com melhor visibilidade */
+  --primary: oklch(0.7 0.18 280);
+  --primary-foreground: oklch(0.98 0.005 280);
+
+  /* secundárias e neutras otimizadas */
+  --secondary: oklch(0.28 0.05 280);
+  --secondary-foreground: oklch(0.98 0.005 280);
+  --muted: oklch(0.25 0.04 280);
+  --muted-foreground: oklch(0.75 0.02 280);
+
+  /* acento e destrutivo com contraste adequado */
+  --accent: oklch(0.35 0.08 280);
+  --accent-foreground: oklch(0.98 0.005 280);
+  --destructive: oklch(0.6 0.25 25);
+  --destructive-foreground: oklch(0.98 0.005 280);
+
+  /* bordas, inputs e foco mais visíveis */
+  --border: oklch(0.35 0.04 280);
+  --input: oklch(0.35 0.04 280);
+  --ring: oklch(0.7 0.18 280);
+
+  /* charts com cores distintas e visíveis */
+  --chart-1: oklch(0.65 0.2 260);
+  --chart-2: oklch(0.7 0.18 280);
+  --chart-3: oklch(0.75 0.15 300);
+  --chart-4: oklch(0.63 0.22 280);
+  --chart-5: oklch(0.68 0.18 300);
+
+  /* sidebar otimizada */
+  --sidebar: oklch(0.18 0.04 280);
+  --sidebar-foreground: oklch(0.98 0.005 280);
+  --sidebar-primary: oklch(0.7 0.18 280);
+  --sidebar-primary-foreground: oklch(0.98 0.005 280);
+  --sidebar-accent: oklch(0.28 0.05 280);
+  --sidebar-accent-foreground: oklch(0.98 0.005 280);
+  --sidebar-border: oklch(0.35 0.04 280);
+  --sidebar-ring: oklch(0.7 0.18 280);
 }
 
 @theme {
@@ -139,6 +141,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -157,17 +160,16 @@
     0%,
     100% {
       transform: translateX(0);
-      animation-timing-function: cubic-bezier(0.8, 0, 1, 1); /* saída rápida */
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
     }
     50% {
-      transform: translateX(25%); /* “salto” → */
-      animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* volta suave */
+      transform: translateX(25%);
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
 }
 
 html {
   scroll-behavior: smooth;
-  /* background-color: var(--background); */
   font-family: 'Geist', sans-serif;
 }
diff --git a/src/shared/utils/format-documents.ts b/src/shared/utils/format-documents.ts
index a753172..e69de29 100644
--- a/src/shared/utils/format-documents.ts
+++ b/src/shared/utils/format-documents.ts
@@ -1,51 +0,0 @@
-export const formatCPF = (value: string) => {
-  // Remove tudo que não é dígito
-  const cleanValue = value.replace(/\D/g, '')
-
-  // Aplica a máscara conforme o usuário digita
-  if (cleanValue.length <= 3) {
-    return cleanValue
-  } else if (cleanValue.length <= 6) {
-    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3)}`
-  } else if (cleanValue.length <= 9) {
-    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6)}`
-  } else {
-    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6, 9)}-${cleanValue.slice(9, 11)}`
-  }
-}
-
-export const formatCNPJ = (value: string) => {
-  // Remove tudo que não é dígito
-  const cleanValue = value.replace(/\D/g, '')
-
-  // Aplica a máscara conforme o usuário digita
-  if (cleanValue.length <= 2) {
-    return cleanValue
-  } else if (cleanValue.length <= 5) {
-    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2)}`
-  } else if (cleanValue.length <= 8) {
-    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5)}`
-  } else if (cleanValue.length <= 12) {
-    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8)}`
-  } else {
-    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8, 12)}-${cleanValue.slice(12, 14)}`
-  }
-}
-
-export const formatPhone = (value: string) => {
-  // Remove tudo que não é dígito
-  const cleanValue = value.replace(/\D/g, '')
-
-  // Aplica a máscara conforme o usuário digita
-  if (cleanValue.length <= 2) {
-    return cleanValue
-  } else if (cleanValue.length <= 6) {
-    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2)}`
-  } else if (cleanValue.length <= 10) {
-    // Para telefone fixo (8 dígitos): (11) 5320-2121
-    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 6)}-${cleanValue.slice(6)}`
-  } else {
-    // Para celular (9 dígitos): (11) 95320-2121
-    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 7)}-${cleanValue.slice(7, 11)}`
-  }
-}
diff --git a/src/shared/utils/string-extensions.ts b/src/shared/utils/string-extensions.ts
new file mode 100644
index 0000000..ebc39a6
--- /dev/null
+++ b/src/shared/utils/string-extensions.ts
@@ -0,0 +1,75 @@
+export const formatCPF = (value: string) => {
+  // Remove tudo que não é dígito
+  const cleanValue = value.replace(/\D/g, '')
+
+  // Aplica a máscara conforme o usuário digita
+  if (cleanValue.length <= 3) {
+    return cleanValue
+  } else if (cleanValue.length <= 6) {
+    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3)}`
+  } else if (cleanValue.length <= 9) {
+    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6)}`
+  } else {
+    return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6, 9)}-${cleanValue.slice(9, 11)}`
+  }
+}
+
+export const formatCNPJ = (value: string) => {
+  // Remove tudo que não é dígito
+  const cleanValue = value.replace(/\D/g, '')
+
+  // Aplica a máscara conforme o usuário digita
+  if (cleanValue.length <= 2) {
+    return cleanValue
+  } else if (cleanValue.length <= 5) {
+    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2)}`
+  } else if (cleanValue.length <= 8) {
+    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5)}`
+  } else if (cleanValue.length <= 12) {
+    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8)}`
+  } else {
+    return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8, 12)}-${cleanValue.slice(12, 14)}`
+  }
+}
+
+export const formatPhone = (value: string) => {
+  // Remove tudo que não é dígito
+  const cleanValue = value.replace(/\D/g, '')
+
+  // Aplica a máscara conforme o usuário digita
+  if (cleanValue.length <= 2) {
+    return cleanValue
+  } else if (cleanValue.length <= 6) {
+    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2)}`
+  } else if (cleanValue.length <= 10) {
+    // Para telefone fixo (8 dígitos): (11) 5320-2121
+    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 6)}-${cleanValue.slice(6)}`
+  } else {
+    // Para celular (9 dígitos): (11) 95320-2121
+    return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 7)}-${cleanValue.slice(7, 11)}`
+  }
+}
+
+export const handleCPFChange = (
+  value: string,
+  onChange: (value: string) => void
+) => {
+  const formattedValue = formatCPF(value)
+  onChange(formattedValue)
+}
+
+export const handleCNPJChange = (
+  value: string,
+  onChange: (value: string) => void
+) => {
+  const formattedValue = formatCNPJ(value)
+  onChange(formattedValue)
+}
+
+export const handlePhoneChange = (
+  value: string,
+  onChange: (value: string) => void
+) => {
+  const formattedValue = formatPhone(value)
+  onChange(formattedValue)
+}