diff --git a/src/app/user/profile/page.tsx b/src/app/user/profile/page.tsx
index 85a69af..2299868 100644
--- a/src/app/user/profile/page.tsx
+++ b/src/app/user/profile/page.tsx
@@ -3,7 +3,6 @@
 import { HeaderProfile } from '@/features/page-profile/header/header'
 import { UserIntroductionComponent } from '@/features/page-profile/introduction/UserIntroduction'
 import { userMock } from '@/features/page-profile/mocks/mock'
-import { PlayerProfileSection } from '@/features/page-profile/playerProfileSection/PlayerProfileSection'
 import { SelectPage } from '@/features/page-profile/select-page/selectPage'
 import UserDescriptionComponent from '@/features/page-profile/user-description/user-description'
 import UserPreferenceCategorys from '@/features/page-profile/user-preference/userPreferences'
@@ -22,7 +21,7 @@ export default function Profile() {
   return (
     <>
       <HeaderProfile />
-      <section className='mx-auto mt-4 grid min-h-screen max-w-[1440px] grid-cols-1 gap-2 px-3 pb-5 md:grid-cols-12 md:grid-rows-none'>
+      <div className='mx-auto mt-4 grid min-h-screen max-w-[90rem] grid-cols-1 px-6 pb-5 md:grid-cols-12 md:grid-rows-none md:space-x-14 md:px-[4.844rem]'>
         <aside className='-mt-24 flex flex-col gap-8 md:col-span-4'>
           <div className=' flex flex-col items-center justify-start gap-2'>
             <Avatar className={cn(' flex h-36 w-36')}>
@@ -43,43 +42,36 @@ export default function Profile() {
               rpgStyle={userMock.preferences.rpgStyles}
               badges={userMock.badges}
             />
-            <PlayerProfileSection />
           </div>
         </aside>
-        <main className='hidden  flex-col gap-2 md:col-span-7 md:col-start-5 md:flex'>
+        <section className='hidden flex-col gap-2 md:col-span-8 md:col-start-5 md:flex'>
           <UserIntroductionComponent />
           <CardWithImgs.Root>
             <CardWithImgs.Text content='Titulo - imagens' />
             <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
           </CardWithImgs.Root>
-        </main>
+        </section>
         {/* mobile */}
-        <div className='min-h-screen md:hidden'>
-          <aside>
-            <SelectPage />
-          </aside>
-          <main className='col-span-12  flex items-center justify-center'>
-            <div className='flex w-full max-w-[400px] flex-col items-center justify-center'>
-              {showElemnt === 'profile' && (
-                <div className='flex w-full flex-col gap-8'>
-                  <UserIntroductionComponent />
-                  <UserPreferenceCategorys
-                    rpgStyle={userMock.preferences.rpgStyles}
-                    badges={userMock.badges}
-                  />
-                </div>
-              )}
-              {showElemnt === 'profile' && <PlayerProfileSection />}
-              {showElemnt === 'images' && (
-                <CardWithImgs.Root>
-                  <CardWithImgs.Text content='Titulo - imagens' />
-                  <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
-                </CardWithImgs.Root>
-              )}
-            </div>
-          </main>
+        <div className='mx-auto mt-8 flex min-h-screen w-full max-w-[28.125rem] flex-col gap-8 md:mt-0 md:hidden'>
+          <SelectPage />
+
+          {showElemnt === 'profile' && (
+            <>
+              <UserIntroductionComponent />
+              <UserPreferenceCategorys
+                rpgStyle={userMock.preferences.rpgStyles}
+                badges={userMock.badges}
+              />
+            </>
+          )}
+          {showElemnt === 'images' && (
+            <CardWithImgs.Root>
+              <CardWithImgs.Text content='Titulo - imagens' />
+              <CardWithImgs.CardWithImg urlImgs={arrayImgsMock} />
+            </CardWithImgs.Root>
+          )}
         </div>
-      </section>
+      </div>
     </>
   )
 }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index ce849b4..39ba630 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     <div
       ref={ref}
       className={cn(
-        'bg-card text-card-foreground rounded-lg border shadow-sm',
+        'rounded-2xl border border-neutral-100 bg-neutral-50 text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
         className,
       )}
       {...props}
@@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
     {...props}
   />
 ))
diff --git a/src/features/page-profile/box-image/components/cardWithImage.tsx b/src/features/page-profile/box-image/components/cardWithImage.tsx
index ce75ce9..93054e1 100644
--- a/src/features/page-profile/box-image/components/cardWithImage.tsx
+++ b/src/features/page-profile/box-image/components/cardWithImage.tsx
@@ -8,12 +8,10 @@ interface CardWithImgProps {
 }
 export function CardWithImg({ urlImgs }: CardWithImgProps) {
   return (
-    <Card
-      key={new Date().getTime().toString()}
-      className='flex w-full items-center justify-center gap-4 overflow-x-auto rounded-xl border-none pl-[68%]'
-    >
+    <Card className='flex w-full items-center justify-center gap-4 overflow-x-auto rounded-xl border-none pl-[68%]'>
       {urlImgs.map(url => (
         <Image
+          key={new Date().getTime() * Math.random()}
           src={url}
           alt=''
           width={259}
diff --git a/src/features/page-profile/box-image/components/text.tsx b/src/features/page-profile/box-image/components/text.tsx
index de58f62..734922f 100644
--- a/src/features/page-profile/box-image/components/text.tsx
+++ b/src/features/page-profile/box-image/components/text.tsx
@@ -10,7 +10,7 @@ export function Text({ content, as: Component = 'p', className }: TextProps) {
   return (
     <Component
       className={cn(
-        'color-neutral-950 pl-2 text-lg font-semibold leading-7',
+        'text-2xl font-semibold leading-10 text-neutral-950 md:leading-8',
         className,
       )}
     >
diff --git a/src/features/page-profile/introduction/UserIntroduction.tsx b/src/features/page-profile/introduction/UserIntroduction.tsx
index fd8f88d..6c6659a 100644
--- a/src/features/page-profile/introduction/UserIntroduction.tsx
+++ b/src/features/page-profile/introduction/UserIntroduction.tsx
@@ -4,29 +4,13 @@ import { UserIntroductionMock } from './mock'
 
 export function UserIntroductionComponent() {
   return (
-    <>
-      <UserIntroduction.SectionTitle
-        title='Bio'
-        className=' block sm:hidden'
-      />
-      <Card className='flex flex-col rounded-xl border-[1px] px-10 py-6 sm:px-6 sm:pt-4 '>
-        {/* <UserIntroduction.UserTitle
-          userName={UserIntroductionMock.user.first_name}
-          userNickname={UserIntroductionMock.user.nickname}
-          userRole={UserIntroductionMock.user.role}
-        /> */}
-        {/* <Separator className='hidden sm:block' /> */}
-        {/* <UserIntroduction.Quote text={UserIntroductionMock.user.info.quote} /> */}
-        <UserIntroduction.Section>
-          <UserIntroduction.SectionTitle
-            title='Bio'
-            className='hidden sm:block'
-          />
-          <UserIntroduction.Bio
-            description={UserIntroductionMock.user.info.bio}
-          />
-        </UserIntroduction.Section>
+    <UserIntroduction.Section>
+      <UserIntroduction.SectionTitle title='Bio' />
+      <Card className='flex flex-col gap-4 px-4 py-6'>
+        <UserIntroduction.Bio
+          description={UserIntroductionMock.user.info.bio}
+        />
       </Card>
-    </>
+    </UserIntroduction.Section>
   )
 }
diff --git a/src/features/page-profile/introduction/components/UserBio.tsx b/src/features/page-profile/introduction/components/UserBio.tsx
index 4196136..3466ce1 100644
--- a/src/features/page-profile/introduction/components/UserBio.tsx
+++ b/src/features/page-profile/introduction/components/UserBio.tsx
@@ -2,12 +2,14 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { useResize } from '../hooks/useResize'
 
 interface UserBioProps {
   description: string
 }
 
 export function UserBio({ description }: UserBioProps) {
+  const { width } = useResize()
   const truncatedTextRef = useRef<HTMLParagraphElement | null>(null)
   const [showMore, setShowMore] = useState(false)
   const [truncateText, setTruncateText] = useState(true)
@@ -16,8 +18,10 @@ export function UserBio({ description }: UserBioProps) {
     const text = truncatedTextRef.current
     if (text && text.offsetHeight < text.scrollHeight) {
       setShowMore(true)
+    } else {
+      setShowMore(false)
     }
-  }, [])
+  }, [width])
 
   return (
     <>
@@ -25,19 +29,15 @@ export function UserBio({ description }: UserBioProps) {
         ref={truncatedTextRef}
         className={`${
           truncateText ? 'truncated-text ' : ''
-        } text-sm leading-6 text-neutral-500 sm:text-xl`}
+        } font-notoSans text-sm leading-6 text-neutral-400 sm:text-base`}
       >
-        {description.length === 0 || description === '' ? (
-          <span className='block text-center'>Nenhuma bio cadastrada</span>
-        ) : (
-          description
-        )}
+        {description}
       </p>
       {showMore && (
         <Button
           onClick={() => setTruncateText(!truncateText)}
           variant='ghost'
-          className='my-[9px] ml-auto h-auto max-w-max p-0 text-base font-medium leading-none text-neutral-950 hover:bg-transparent'
+          className='my-[5px] h-auto justify-end p-0 font-notoSans text-base font-semibold text-neutral-950 hover:bg-transparent'
         >
           {truncateText ? 'Ver mais' : 'Ver menos'}
         </Button>
diff --git a/src/features/page-profile/introduction/components/UserSection.tsx b/src/features/page-profile/introduction/components/UserSection.tsx
index 208f2be..8d199d3 100644
--- a/src/features/page-profile/introduction/components/UserSection.tsx
+++ b/src/features/page-profile/introduction/components/UserSection.tsx
@@ -3,5 +3,5 @@ interface UserSectionProps {
 }
 
 export function UserSection({ children }: UserSectionProps) {
-  return <section className='mt-6 flex flex-col gap-4'>{children}</section>
+  return <section className='space-y-4 md:mt-[3.25rem]'>{children}</section>
 }
diff --git a/src/features/page-profile/introduction/components/UserSectionTitle.tsx b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
index c926e28..b742f30 100644
--- a/src/features/page-profile/introduction/components/UserSectionTitle.tsx
+++ b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
@@ -1,4 +1,3 @@
-import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 interface UserSectionTitleProps
@@ -6,8 +5,15 @@ interface UserSectionTitleProps
   title: string
 }
 
-const Title = cva('text-2xl text-neutral-950 h-10 leading-[3rem] sm:h-8 w-full')
-
 export function UserSectionTitle({ title, className }: UserSectionTitleProps) {
-  return <h2 className={cn(Title({ className }))}>{title}</h2>
+  return (
+    <h2
+      className={cn(
+        'w-full font-notoSans text-2xl font-semibold leading-10 text-neutral-950 md:leading-8',
+        className,
+      )}
+    >
+      {title}
+    </h2>
+  )
 }
diff --git a/src/features/page-profile/introduction/helpers/resizeDelay.ts b/src/features/page-profile/introduction/helpers/resizeDelay.ts
new file mode 100644
index 0000000..087dd8a
--- /dev/null
+++ b/src/features/page-profile/introduction/helpers/resizeDelay.ts
@@ -0,0 +1,12 @@
+export const resizeDelay = (func: () => void, milliseconds?: number) => {
+  const time = milliseconds || 400
+  let timer: number
+
+  return (event: Event): void => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    timer = setTimeout(func, time, event)
+  }
+}
diff --git a/src/features/page-profile/introduction/hooks/useResize.tsx b/src/features/page-profile/introduction/hooks/useResize.tsx
new file mode 100644
index 0000000..73cc594
--- /dev/null
+++ b/src/features/page-profile/introduction/hooks/useResize.tsx
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import { resizeDelay } from '../helpers/resizeDelay'
+
+export function useResize() {
+  const [size, setSize] = useState([window.innerWidth, window.innerHeight])
+
+  useEffect(() => {
+    const resize = resizeDelay(() => {
+      setSize([window.innerWidth, window.innerHeight])
+    })
+
+    window.addEventListener('resize', resize)
+
+    return () => {
+      window.removeEventListener('resize', resize)
+    }
+  }, [])
+
+  return { width: size[0], height: size[1] }
+}
diff --git a/src/features/page-profile/introduction/introduction.stories.tsx b/src/features/page-profile/introduction/introduction.stories.tsx
index aecb754..bcc903d 100644
--- a/src/features/page-profile/introduction/introduction.stories.tsx
+++ b/src/features/page-profile/introduction/introduction.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Separator } from '@/components/ui/separator'
 import { Card } from '@/components/ui/card'
 import { UserIntroduction } from '.'
 import { UserIntroductionMock } from './mock'
@@ -19,49 +18,15 @@ export default meta
 
 type Story = StoryObj<typeof UserIntroduction>
 
-export const FullIntroduction: Story = {
+export const Introduction: Story = {
   render: () => (
-    <>
-      <UserIntroduction.SectionTitle
-        title='Bio'
-        className='mb-4 block sm:hidden'
-      />
-      <Card className='flex max-w-[862px] flex-col rounded-xl border-[1px] px-4 py-6 sm:px-6 sm:pt-4'>
-        <UserIntroduction.UserTitle
-          userName={UserIntroductionMock.user.first_name}
-          userNickname={UserIntroductionMock.user.nickname}
-          userRole={UserIntroductionMock.user.role}
-        />
-        <Separator className='hidden sm:block' />
-        <UserIntroduction.Quote text={UserIntroductionMock.user.info.quote} />
-        <UserIntroduction.Section>
-          <UserIntroduction.SectionTitle
-            title='Bio'
-            className='hidden sm:block'
-          />
-          <UserIntroduction.Bio
-            description={UserIntroductionMock.user.info.bio}
-          />
-        </UserIntroduction.Section>
-      </Card>
-    </>
-  ),
-}
-
-export const MissingIntroduction: Story = {
-  render: () => (
-    <Card className='flex max-w-[862px] flex-col rounded-xl border-[1px] px-4 py-6 sm:px-6 sm:pt-4'>
-      <UserIntroduction.UserTitle
-        userName={UserIntroductionMock.user.first_name}
-        userRole='Jogador'
-      />
-      <Separator className='hidden sm:block' />
-      <UserIntroduction.Section>
-        <UserIntroduction.SectionTitle title='Bio' />
+    <UserIntroduction.Section>
+      <UserIntroduction.SectionTitle title='Bio' />
+      <Card className='flex flex-col gap-4 rounded-2xl border-neutral-200 px-4 py-6'>
         <UserIntroduction.Bio
           description={UserIntroductionMock.user.info.bio}
         />
-      </UserIntroduction.Section>
-    </Card>
+      </Card>
+    </UserIntroduction.Section>
   ),
 }
diff --git a/src/features/page-profile/select-page/selectPage.tsx b/src/features/page-profile/select-page/selectPage.tsx
index 4a31d6a..aceb29c 100644
--- a/src/features/page-profile/select-page/selectPage.tsx
+++ b/src/features/page-profile/select-page/selectPage.tsx
@@ -6,15 +6,15 @@ import { useSelectPage } from './useSelectPage'
 export function SelectPage() {
   const { handleSetParams, params, linksWithPath } = useSelectPage()
   return (
-    <ul className='mx-auto my-3 flex min-h-[43px] w-full max-w-[450px] flex-wrap items-center justify-center gap-3 rounded-md bg-[#EFEFEF] p-2'>
+    <ul className='mx-auto flex min-h-[43px] w-full flex-wrap items-center justify-center gap-3 rounded-md bg-neutral-100 p-2'>
       {linksWithPath.map(({ path, text }) => {
-        const bgBLink = params === text && 'bg-[#FFFFFF]'
+        const bgBLink = params === text && 'bg-neutral-50'
         const bgText =
-          params === text ? 'text-black font-extrabold' : 'text-[#989898] '
+          params === text ? 'text-black font-extrabold' : 'text-neutral-400 '
         return (
           <li
             key={text}
-            className={` flex items-center rounded-md px-4 py-2 ${bgBLink} w-[50px] min-w-[100px]`}
+            className={` flex items-center rounded-md px-4 py-2 font-notoSans ${bgBLink} w-[50px] min-w-[100px]`}
           >
             <Link
               href={path}
diff --git a/src/features/page-profile/user-description/components/Root.tsx b/src/features/page-profile/user-description/components/Root.tsx
index 3c50df3..98fc030 100644
--- a/src/features/page-profile/user-description/components/Root.tsx
+++ b/src/features/page-profile/user-description/components/Root.tsx
@@ -5,7 +5,7 @@ interface RootPros {
 }
 export function Root({ children }: RootPros) {
   return (
-    <section className='inline-flex w-full flex-col items-center justify-center gap-8 border-none'>
+    <section className='inline-flex w-full flex-col items-center justify-center gap-8'>
       {children}
     </section>
   )
diff --git a/src/features/page-profile/user-description/components/boxWithIcons.tsx b/src/features/page-profile/user-description/components/boxWithIcons.tsx
index d448ec1..9dbf084 100644
--- a/src/features/page-profile/user-description/components/boxWithIcons.tsx
+++ b/src/features/page-profile/user-description/components/boxWithIcons.tsx
@@ -18,8 +18,8 @@ export function BoxWithIcons() {
       {socialMedia.map(icon => {
         const IconName = icon
         return (
-          <button>
-            <IconName className='h-10  w-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 p-2 transition-all transition-all delay-75 hover:bg-neutral-900' />
+          <button key={new Date().getTime() * Math.random()}>
+            <IconName className='h-10 w-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 p-2 transition-all delay-75 hover:bg-neutral-900' />
           </button>
         )
       })}
diff --git a/src/features/page-profile/user-description/components/typograph.tsx b/src/features/page-profile/user-description/components/typograph.tsx
index c8c4b6c..97d0ee2 100644
--- a/src/features/page-profile/user-description/components/typograph.tsx
+++ b/src/features/page-profile/user-description/components/typograph.tsx
@@ -14,7 +14,7 @@ export function Typography({
   return (
     <Component
       className={cn(
-        'bg-card  text-card-foreground rounded-lg border border-none text-center font-notoSans text-xl font-semibold leading-normal',
+        'text-center font-notoSans text-xl font-semibold leading-normal',
         className,
       )}
     >
diff --git a/src/features/page-profile/user-description/user-description.tsx b/src/features/page-profile/user-description/user-description.tsx
index 9bf08b5..564be5e 100644
--- a/src/features/page-profile/user-description/user-description.tsx
+++ b/src/features/page-profile/user-description/user-description.tsx
@@ -19,15 +19,15 @@ export default function UserDescriptionComponent({
   return (
     <UserDescription.Root>
       <div className='flex flex-col items-center gap-2'>
-        <div className='flex flex-wrap items-end justify-center'>
+        <div className='flex flex-wrap items-end justify-center gap-1.5'>
           <UserDescription.Typography
             as='h2'
-            className=' text-2xl font-semibold'
+            className='text-2xl tracking-[0.0206em] text-neutral-950'
             content={username}
           />
           <UserDescription.Typography
             as='h2'
-            className='text-xl font-semibold text-neutral-500'
+            className='text-neutral-500'
             content={`(${pronomes})`}
           />
         </div>
@@ -40,7 +40,7 @@ export default function UserDescriptionComponent({
       <UserDescription.BoxWithIcons />
       <UserDescription.Typography
         as='h2'
-        className=' text-neutral-500 '
+        className=' text-neutral-600 '
         content={`${description}`}
       />
       <UserDescription.Typography
@@ -50,7 +50,7 @@ export default function UserDescriptionComponent({
       />
       <UserDescription.Typography
         as='h2'
-        className='text-xl font-semibold text-black'
+        className='text-black'
         content={age}
       />
     </UserDescription.Root>
diff --git a/src/features/page-profile/user-preference/card-category/components/List-categorys.tsx b/src/features/page-profile/user-preference/card-category/components/List-categorys.tsx
index ef815d2..190c491 100644
--- a/src/features/page-profile/user-preference/card-category/components/List-categorys.tsx
+++ b/src/features/page-profile/user-preference/card-category/components/List-categorys.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { Card } from '@/components/ui/card'
 import React from 'react'
 
 export default function ListCategorys({
@@ -8,18 +9,18 @@ export default function ListCategorys({
   children: React.ReactNode
 }) {
   return (
-    <>
+    <Card>
       {Array.from({ length: 1 }, (_, i) => i + 1).map(i => (
         <div
           key={i}
-          className='flex w-full flex-wrap items-center justify-center gap-4 p-4 md:justify-start'
+          className='flex w-full items-center justify-center gap-4 p-4 md:justify-start'
         >
-          <h3 className="mr-auto min-w-[90px] font-['Roboto'] text-base font-normal leading-[48px] text-neutral-700">
+          <h3 className='mr-auto min-w-[95px] font-mono text-base font-normal leading-[48px] text-neutral-700'>
             Categoria #{i}
           </h3>
           {children}
         </div>
       ))}
-    </>
+    </Card>
   )
 }
diff --git a/src/features/page-profile/user-preference/card-category/components/rpgStyle-list.tsx b/src/features/page-profile/user-preference/card-category/components/rpgStyle-list.tsx
index d5f5600..5f51ea4 100644
--- a/src/features/page-profile/user-preference/card-category/components/rpgStyle-list.tsx
+++ b/src/features/page-profile/user-preference/card-category/components/rpgStyle-list.tsx
@@ -1,17 +1,17 @@
 'use client'
 
 import React from 'react'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { cn } from '@/lib/utils'
-import { listValues, useRpgStyle } from '../hooks/useRpgStyle'
+// import {
+//   Select,
+//   SelectContent,
+//   SelectGroup,
+//   SelectItem,
+//   SelectLabel,
+//   SelectTrigger,
+//   SelectValue,
+// } from '@/components/ui/select'
+// import { cn } from '@/lib/utils'
+import { useRpgStyle } from '../hooks/useRpgStyle'
 import useCategory from '../../components/category'
 import { RPGStyle } from '../../types'
 import { EnumRPGTypes } from '../hooks/enumRPGType'
@@ -21,48 +21,55 @@ export interface RpgStylelistProps {
 }
 
 export function RpgStylelist({ rpgStyle }: RpgStylelistProps) {
-  const { handleSelectValue, selectValue } = useRpgStyle(rpgStyle)
+  const { selectValue } = useRpgStyle(rpgStyle)
   const { getBackgroundColor } = useCategory()
   return (
-    <div className='invisible-scrollbar flex w-full items-center gap-4 overflow-auto '>
-      <form className='flex w-full items-center gap-4 overflow-auto '>
+    <div className='invisible-scrollbar flex w-full items-center gap-4 overflow-auto'>
+      <form className='flex w-full items-center gap-4 overflow-auto'>
         {selectValue.map(({ id, name }) => {
           const backgroundColor = getBackgroundColor(name as EnumRPGTypes)
           return (
-            <Select
+            <span
               key={id}
-              value={name}
-              onValueChange={(value: string) => handleSelectValue(value, id)}
+              title={name}
+              className={`min-w-[78px] truncate rounded-[3px] px-3 py-1.5 font-mono text-sm font-medium ${backgroundColor}`}
             >
-              <SelectTrigger
-                title={name}
-                className={cn(
-                  `h-8  min-w-[150px] rounded-md px-4 py-2 text-center font-[Roboto] text-sm font-medium leading-tight shadow-none focus:outline-none  ${backgroundColor}`,
-                )}
-              >
-                <SelectValue>{name}</SelectValue>
-                <SelectValue placeholder='Selecione seu estilo prefirido' />
-              </SelectTrigger>
-              <SelectContent
-                className='styles'
-                id='styles'
-              >
-                <SelectGroup className={cn(`focus:outline-none`)}>
-                  <SelectLabel className='bg-neutral-50'>
-                    estilos de jogo
-                  </SelectLabel>
-                  {listValues.map(item => (
-                    <SelectItem
-                      className='z-30 bg-neutral-50'
-                      key={item.id}
-                      value={item.id}
-                    >
-                      {item.name}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+              {name}
+            </span>
+            // <Select
+            //   key={id}
+            //   value={name}
+            //   onValueChange={(value: string) => handleSelectValue(value, id)}
+            // >
+            //   <SelectTrigger
+            //     title={name}
+            //     className={cn(
+            //       `h-8 min-w-[150px] rounded-md px-4 py-2 text-center font-[Roboto] text-sm font-medium leading-tight shadow-none focus:outline-none ${backgroundColor}`,
+            //     )}
+            //   >
+            //     <SelectValue>{name}</SelectValue>
+            //     <SelectValue placeholder='Selecione seu estilo prefirido' />
+            //   </SelectTrigger>
+            //   <SelectContent
+            //     className='styles'
+            //     id='styles'
+            //   >
+            //     <SelectGroup className={cn(`focus:outline-none`)}>
+            //       <SelectLabel className='bg-neutral-50'>
+            //         estilos de jogo
+            //       </SelectLabel>
+            //       {listValues.map(item => (
+            //         <SelectItem
+            //           className='z-30 bg-neutral-50'
+            //           key={item.id}
+            //           value={item.id}
+            //         >
+            //           {item.name}
+            //         </SelectItem>
+            //       ))}
+            //     </SelectGroup>
+            //   </SelectContent>
+            // </Select>
           )
         })}
       </form>
diff --git a/src/features/page-profile/user-preference/components/Root.tsx b/src/features/page-profile/user-preference/components/Root.tsx
index 9dd624b..08b66d0 100644
--- a/src/features/page-profile/user-preference/components/Root.tsx
+++ b/src/features/page-profile/user-preference/components/Root.tsx
@@ -4,5 +4,5 @@ interface RootProps {
   children: React.ReactNode
 }
 export default function Root({ children }: RootProps) {
-  return <div className='flex w-full flex-col  '>{children}</div>
+  return <div className='flex w-full flex-col'>{children}</div>
 }
diff --git a/src/features/page-profile/user-preference/components/card-achievements.tsx b/src/features/page-profile/user-preference/components/card-achievements.tsx
index dfc65ca..b7fe01b 100644
--- a/src/features/page-profile/user-preference/components/card-achievements.tsx
+++ b/src/features/page-profile/user-preference/components/card-achievements.tsx
@@ -2,25 +2,25 @@ import Image from 'next/image'
 import React from 'react'
 
 interface CardAchievementsProps {
-  text?: string
-  src?: string
+  text: string
+  src: string
 }
 export default function CardAchievements({ text, src }: CardAchievementsProps) {
   return (
     <>
       {src && (
-        <div className='inline-flex h-[54px] w-[54px] items-center justify-center'>
+        <div className='size-[54px] inline-flex items-center justify-center'>
           <Image
-            className='relative h-[54px] w-[54px] rounded-[999px]'
+            className='size-[54px] relative rounded-[999px]'
             src={src}
-            alt=''
+            alt={text}
             width={54}
             height={54}
           />
         </div>
       )}
       {text && (
-        <p className="font-['Roboto'] text-xl font-normal leading-[48px] text-zinc-700">
+        <p className='font-mono text-xl leading-[48px] text-neutral-800'>
           {text}
         </p>
       )}
diff --git a/src/features/page-profile/user-preference/components/card-badge.tsx b/src/features/page-profile/user-preference/components/card-badge.tsx
index 3e73a81..d5bbd5f 100644
--- a/src/features/page-profile/user-preference/components/card-badge.tsx
+++ b/src/features/page-profile/user-preference/components/card-badge.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Card } from '@/components/ui/card'
 import CardAchievements from './card-achievements'
 
 type Badge = {
@@ -13,11 +14,11 @@ interface CardBadgeProps {
 export default function CardBadge({ badges }: CardBadgeProps) {
   return (
     <main>
-      <section className='flex flex-col'>
+      <Card className='flex flex-col'>
         {badges?.map(({ id, icon, name }) => (
           <div
             key={id}
-            className='flex items-center justify-start gap-4 p-4'
+            className='flex items-center justify-start gap-4 border-neutral-100 p-4 [&:not(:last-child)]:border-b'
           >
             <CardAchievements
               src={icon}
@@ -25,7 +26,7 @@ export default function CardBadge({ badges }: CardBadgeProps) {
             />
           </div>
         ))}
-      </section>
+      </Card>
     </main>
   )
 }
diff --git a/src/features/page-profile/user-preference/components/typograph.tsx b/src/features/page-profile/user-preference/components/typograph.tsx
index 5e9d08f..02d69d6 100644
--- a/src/features/page-profile/user-preference/components/typograph.tsx
+++ b/src/features/page-profile/user-preference/components/typograph.tsx
@@ -14,7 +14,7 @@ export function Typography({
   return (
     <Component
       className={cn(
-        'text-card-foreground w-full  rounded-lg border border-none bg-transparent pb-2 shadow-sm',
+        'mb-4 w-full font-mono text-2xl text-neutral-950',
         className,
       )}
     >
diff --git a/src/features/page-profile/user-preference/userPreferences.tsx b/src/features/page-profile/user-preference/userPreferences.tsx
index 11230fa..ee6104a 100644
--- a/src/features/page-profile/user-preference/userPreferences.tsx
+++ b/src/features/page-profile/user-preference/userPreferences.tsx
@@ -12,21 +12,19 @@ export default function UserPreferenceCategorys({
   badges,
 }: UserPreferenceCompoenteProps) {
   return (
-    <UserPreference.Root>
-      <UserPreference.Typography
-        as='h1'
-        className='mb-4 text-2xl text-neutral-950'
-      >
-        Estilos preferidos
-      </UserPreference.Typography>
-      <UserPreference.CardCategory rpgStyle={rpgStyle} />
-      <UserPreference.Typography
-        as='h1'
-        className='mb-4 text-2xl text-neutral-950'
-      >
-        Conquistas
-      </UserPreference.Typography>
-      <UserPreference.CardBadge badges={badges} />
-    </UserPreference.Root>
+    <>
+      <UserPreference.Root>
+        <UserPreference.Typography as='h1'>
+          Estilos preferidos
+        </UserPreference.Typography>
+        <UserPreference.CardCategory rpgStyle={rpgStyle} />
+      </UserPreference.Root>
+      <UserPreference.Root>
+        <UserPreference.Typography as='h1'>
+          Conquistas
+        </UserPreference.Typography>
+        <UserPreference.CardBadge badges={badges} />
+      </UserPreference.Root>
+    </>
   )
 }