diff --git a/src/features/home/pages/home-page.tsx b/src/features/home/pages/home-page.tsx
index cc28c6a..92bc51d 100644
--- a/src/features/home/pages/home-page.tsx
+++ b/src/features/home/pages/home-page.tsx
@@ -131,7 +131,7 @@ const owners = [
   {
     name: 'Júlia Galhardi Cerqueira',
     image: 'https://d1b8zs4rmj3xdl.cloudfront.net/julia.jpeg',
-    role: 'Estagiária',
+    role: 'Estagiária de Implementação e Suporte na Bastos Tecnologia',
     linkedin: 'https://www.linkedin.com/in/j%C3%BAliacerqueira/'
   },
   {
@@ -223,7 +223,7 @@ export function HomePage() {
       <Layout className="space-y-32 md:space-y-0">
         <motion.section
           id="home"
-          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-8 sm:max-w-none"
+          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-8 pt-32 sm:max-w-none sm:pt-0"
           initial="hidden"
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
diff --git a/src/features/playground/pages/playground.tsx b/src/features/playground/pages/playground.tsx
index a0d57cd..fc37cc8 100644
--- a/src/features/playground/pages/playground.tsx
+++ b/src/features/playground/pages/playground.tsx
@@ -161,7 +161,7 @@ export function PlaygroundPage() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="mx-auto flex h-full max-h-full w-full flex-col pl-24"
+            className="mx-auto flex h-full max-h-full w-full flex-col sm:pl-24"
           >
             {/* Header */}
             <div className="mb-4 flex-shrink-0">
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 7d851cb..1fa9639 100644
--- a/src/features/user-area/components/knowledge-base-detail-modal.tsx
+++ b/src/features/user-area/components/knowledge-base-detail-modal.tsx
@@ -272,286 +272,304 @@ echo $data['response'];`
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[80vh] max-w-2xl overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="text-foreground flex items-center gap-2">
-            {knowledgeBase.displayName}
-            <Badge className={getStatusColor(knowledgeBase.status)}>
-              {knowledgeBase.status}
-            </Badge>
-          </DialogTitle>
-          <DialogDescription>{knowledgeBase.description}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6">
-          {/* Informações gerais */}
-          <div className="grid grid-cols-2 gap-4 text-sm">
-            <div>
-              <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-foreground font-medium">
-                Última modificação:
-              </span>
-              <p className="text-muted-foreground">
-                {knowledgeBase.updatedAt.toLocaleDateString('pt-BR')}
-              </p>
-            </div>
-            <div>
-              <span className="text-foreground font-medium">
-                Total de arquivos:
+      <DialogContent className="max-h-[90vh] w-[96vw] max-w-2xl overflow-hidden rounded-2xl p-5 md:max-h-[85vh] md:rounded-lg md:p-6">
+        <div className="max-h-[calc(90vh-2.5rem)] overflow-x-hidden overflow-y-auto md:max-h-[calc(85vh-3rem)]">
+          <DialogHeader className="space-y-3 pr-2">
+            <DialogTitle className="text-foreground flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+              <span className="max-w-full pr-2 break-words">
+                {knowledgeBase.displayName}
               </span>
-              <p className="text-muted-foreground">
-                {knowledgeBase.files.length} arquivo
-                {knowledgeBase.files.length !== 1 ? 's' : ''}
-              </p>
+              <Badge className={getStatusColor(knowledgeBase.status)}>
+                {knowledgeBase.status}
+              </Badge>
+            </DialogTitle>
+            <DialogDescription className="max-w-full items-start pr-2 break-words">
+              {knowledgeBase.description}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-5 pr-2 md:space-y-6">
+            {/* Informações gerais */}
+            <div className="grid w-full max-w-full grid-cols-1 gap-3 text-sm sm:grid-cols-2 sm:gap-4">
+              <div className="min-w-0 overflow-hidden">
+                <span className="text-foreground font-medium">Criada em:</span>
+                <p className="text-muted-foreground truncate">
+                  {knowledgeBase.createdAt.toLocaleDateString('pt-BR')}
+                </p>
+              </div>
+              <div className="min-w-0 overflow-hidden">
+                <span className="text-foreground font-medium">
+                  Última modificação:
+                </span>
+                <p className="text-muted-foreground truncate">
+                  {knowledgeBase.updatedAt.toLocaleDateString('pt-BR')}
+                </p>
+              </div>
+              <div className="min-w-0 overflow-hidden">
+                <span className="text-foreground font-medium">
+                  Total de arquivos:
+                </span>
+                <p className="text-muted-foreground truncate">
+                  {knowledgeBase.files.length} arquivo
+                  {knowledgeBase.files.length !== 1 ? 's' : ''}
+                </p>
+              </div>
+              <div className="min-w-0 overflow-hidden">
+                <span className="text-foreground font-medium">
+                  Tamanho total:
+                </span>
+                <p className="text-muted-foreground truncate">
+                  {knowledgeBase.totalSizeMB.toFixed(1)} MB
+                </p>
+              </div>
             </div>
-            <div>
-              <span className="text-foreground font-medium">
-                Tamanho total:
-              </span>
-              <p className="text-muted-foreground">
-                {knowledgeBase.totalSizeMB.toFixed(1)} MB
-              </p>
+
+            <Separator />
+
+            {/* API Keys */}
+            <div className="w-full max-w-full space-y-4 overflow-hidden">
+              <h3 className="text-foreground text-lg font-semibold">
+                API Keys
+              </h3>
+              {knowledgeBase.keys.length === 0 ? (
+                <div className="text-foreground py-4 text-center text-sm">
+                  Nenhuma chave de API encontrada
+                </div>
+              ) : (
+                <div className="w-full max-w-full space-y-3">
+                  {knowledgeBase.keys.map((key, index) => {
+                    const keyId = `${key.kbKey}-${index}`
+                    const isVisible = visibleKeys.has(keyId)
+                    const isCopied = copiedKeys.has(keyId)
+
+                    return (
+                      <div
+                        key={keyId}
+                        className="hover:bg-muted/50 border-border w-full max-w-full overflow-hidden rounded-xl border-1 p-4 transition-colors md:rounded-lg md:p-4"
+                      >
+                        <div className="mb-2 flex min-w-0 items-center justify-between overflow-hidden">
+                          <span className="text-foreground max-w-full truncate text-sm font-medium">
+                            {key.kbKeyAlias}
+                          </span>
+                        </div>
+                        <div className="flex w-full max-w-full min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
+                          <div className="bg-muted text-muted-foreground w-full min-w-0 flex-1 overflow-hidden rounded-lg px-3 py-2 font-mono text-xs break-all sm:text-sm">
+                            {isVisible ? key.kbKey : maskKey(key.kbKey)}
+                          </div>
+                          <div className="flex flex-shrink-0 gap-2">
+                            <Button
+                              onClick={() => toggleKeyVisibility(keyId)}
+                              size="sm"
+                              variant="outline"
+                              className="flex flex-1 items-center justify-center gap-1 rounded-lg sm:flex-initial"
+                            >
+                              {isVisible ? (
+                                <EyeOff className="text-foreground h-4 w-4" />
+                              ) : (
+                                <Eye className="text-foreground h-4 w-4" />
+                              )}
+                              <span className="sm:hidden">
+                                {isVisible ? 'Ocultar' : 'Mostrar'}
+                              </span>
+                            </Button>
+                            <Button
+                              onClick={() =>
+                                copyKeyToClipboard(key.kbKey, keyId)
+                              }
+                              size="sm"
+                              variant="outline"
+                              className="flex flex-1 items-center justify-center gap-1 rounded-lg sm:flex-initial"
+                            >
+                              {isCopied ? (
+                                <Check className="text-foreground h-4 w-4" />
+                              ) : (
+                                <Copy className="text-foreground h-4 w-4" />
+                              )}
+                              <span className="sm:hidden">
+                                {isCopied ? 'Copiado' : 'Copiar'}
+                              </span>
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
             </div>
-          </div>
 
-          <Separator />
+            <Separator />
 
-          {/* API Keys */}
-          <div className="space-y-4">
-            <h3 className="text-foreground text-lg font-semibold">API Keys</h3>
-            {knowledgeBase.keys.length === 0 ? (
-              <div className="text-foreground py-4 text-center text-sm">
-                Nenhuma chave de API encontrada
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {knowledgeBase.keys.map((key, index) => {
-                  const keyId = `${key.kbKey}-${index}`
-                  const isVisible = visibleKeys.has(keyId)
-                  const isCopied = copiedKeys.has(keyId)
-
-                  return (
-                    <div
-                      key={keyId}
-                      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-foreground text-sm font-medium">
-                          {key.kbKeyAlias}
-                        </span>
+            {/* Code Snippets */}
+            <div className="w-full max-w-full space-y-4">
+              <button
+                onClick={() => setIsCodeSectionExpanded(!isCodeSectionExpanded)}
+                className="hover:bg-muted/50 flex w-full items-center justify-between rounded-lg p-2 transition-colors"
+              >
+                <div className="flex min-w-0 items-center gap-2">
+                  <Code2 className="text-foreground h-5 w-5 flex-shrink-0" />
+                  <h3 className="text-foreground truncate text-lg font-semibold">
+                    Exemplos de Código
+                  </h3>
+                </div>
+                {isCodeSectionExpanded ? (
+                  <ChevronUp className="text-foreground h-5 w-5 flex-shrink-0" />
+                ) : (
+                  <ChevronDown className="text-foreground h-5 w-5 flex-shrink-0" />
+                )}
+              </button>
+
+              <div
+                className={`grid transition-all duration-300 ease-in-out ${
+                  isCodeSectionExpanded
+                    ? 'grid-rows-[1fr] opacity-100'
+                    : 'grid-rows-[0fr] opacity-0'
+                }`}
+              >
+                <div className="min-w-0 overflow-hidden">
+                  {knowledgeBase.keys.length === 0 ? (
+                    <div className="text-foreground py-4 text-center text-sm">
+                      Crie uma API Key para ver os exemplos de código
+                    </div>
+                  ) : (
+                    <div className="w-full max-w-full space-y-3 pt-2">
+                      {/* Language selector */}
+                      <div className="flex w-full flex-wrap gap-2">
+                        {languages.map((lang) => (
+                          <Button
+                            key={lang.id}
+                            onClick={() => setSelectedLanguage(lang.id)}
+                            size="sm"
+                            variant={
+                              selectedLanguage === lang.id
+                                ? 'secondary'
+                                : 'outline'
+                            }
+                            className="text-foreground flex items-center gap-1.5 rounded-lg"
+                          >
+                            <span>{lang.icon}</span>
+                            <span>{lang.name}</span>
+                          </Button>
+                        ))}
                       </div>
-                      <div className="flex items-center gap-2">
-                        <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
-                          onClick={() => toggleKeyVisibility(keyId)}
-                          size="sm"
-                          variant="outline"
-                          className="flex items-center gap-1"
-                        >
-                          {isVisible ? (
-                            <EyeOff className="text-foreground h-4 w-4" />
-                          ) : (
-                            <Eye className="text-foreground h-4 w-4" />
-                          )}
-                        </Button>
+
+                      {/* Code snippet */}
+                      <div className="relative w-full max-w-full">
+                        <pre className="bg-muted max-h-96 w-full overflow-x-auto overflow-y-auto rounded-xl p-4 pr-12 text-xs sm:p-4 sm:pr-20 sm:text-sm">
+                          <code className="text-foreground block break-words whitespace-pre-wrap">
+                            {getCodeSnippet(
+                              selectedLanguage,
+                              knowledgeBase.keys[0]?.kbKey || 'YOUR_API_KEY'
+                            )}
+                          </code>
+                        </pre>
                         <Button
-                          onClick={() => copyKeyToClipboard(key.kbKey, keyId)}
+                          onClick={copyCodeToClipboard}
                           size="sm"
-                          variant="outline"
-                          className="flex items-center gap-1"
+                          variant="secondary"
+                          className="absolute top-2 right-2 flex items-center gap-1 rounded-lg text-xs sm:text-sm"
                         >
-                          {isCopied ? (
-                            <Check className="text-foreground h-4 w-4" />
+                          {copiedCode ? (
+                            <>
+                              <Check className="h-3 w-3 sm:h-4 sm:w-4" />
+                              <span className="hidden sm:inline">Copiado!</span>
+                            </>
                           ) : (
-                            <Copy className="text-foreground h-4 w-4" />
+                            <>
+                              <Copy className="h-3 w-3 sm:h-4 sm:w-4" />
+                              <span className="hidden sm:inline">Copiar</span>
+                            </>
                           )}
                         </Button>
                       </div>
                     </div>
-                  )
-                })}
+                  )}
+                </div>
               </div>
-            )}
-          </div>
+            </div>
 
-          <Separator />
+            <Separator />
 
-          {/* Code Snippets */}
-          <div className="space-y-4">
-            <button
-              onClick={() => setIsCodeSectionExpanded(!isCodeSectionExpanded)}
-              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="text-foreground h-5 w-5" />
+            {/* Lista de arquivos */}
+            <div className="w-full max-w-full space-y-4">
+              <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                 <h3 className="text-foreground text-lg font-semibold">
-                  Exemplos de Código
+                  Arquivos
                 </h3>
+                <Button
+                  onClick={handleAddFiles}
+                  size="sm"
+                  variant="outline"
+                  className="text-foreground flex flex-shrink-0 items-center justify-center gap-2 rounded-lg"
+                >
+                  <Plus className="h-4 w-4" />
+                  <span>Adicionar arquivos</span>
+                </Button>
               </div>
-              {isCodeSectionExpanded ? (
-                <ChevronUp className="text-foreground h-5 w-5" />
-              ) : (
-                <ChevronDown className="text-foreground h-5 w-5" />
-              )}
-            </button>
-
-            <div
-              className={`grid transition-all duration-300 ease-in-out ${
-                isCodeSectionExpanded
-                  ? 'grid-rows-[1fr] opacity-100'
-                  : 'grid-rows-[0fr] opacity-0'
-              }`}
-            >
-              <div className="overflow-hidden">
-                {knowledgeBase.keys.length === 0 ? (
-                  <div className="text-foreground py-4 text-center text-sm">
-                    Crie uma API Key para ver os exemplos de código
-                  </div>
-                ) : (
-                  <div className="space-y-3 pt-2">
-                    {/* Language selector */}
-                    <div className="flex flex-wrap gap-2">
-                      {languages.map((lang) => (
-                        <Button
-                          key={lang.id}
-                          onClick={() => setSelectedLanguage(lang.id)}
-                          size="sm"
-                          variant={
-                            selectedLanguage === lang.id
-                              ? 'secondary'
-                              : 'outline'
-                          }
-                          className="text-foreground flex items-center gap-1.5"
-                        >
-                          <span>{lang.icon}</span>
-                          <span>{lang.name}</span>
-                        </Button>
-                      ))}
-                    </div>
 
-                    {/* Code snippet */}
-                    <div className="relative">
-                      <pre className="bg-muted max-h-96 overflow-y-auto rounded-lg p-4 pr-20 text-sm">
-                        <code className="text-foreground block break-words whitespace-pre-wrap">
-                          {getCodeSnippet(
-                            selectedLanguage,
-                            knowledgeBase.keys[0]?.kbKey || 'YOUR_API_KEY'
-                          )}
-                        </code>
-                      </pre>
+              {knowledgeBase.files.length === 0 ? (
+                <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>
+              ) : (
+                <div className="max-h-60 w-full space-y-2 overflow-x-hidden overflow-y-auto">
+                  {knowledgeBase.files.map((file, index) => (
+                    <div
+                      key={`${file.fileName}-${index}`}
+                      className="hover:bg-muted/50 border-border flex w-full max-w-full min-w-0 flex-col gap-2 rounded-xl border-1 p-4 transition-colors sm:flex-row sm:items-center sm:justify-between md:rounded-lg"
+                    >
+                      <div
+                        className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 overflow-hidden"
+                        onClick={() => window.open(file.url, '_blank')}
+                      >
+                        <FileText className="text-primary h-5 w-5 flex-shrink-0" />
+                        <div className="min-w-0 flex-1 overflow-hidden">
+                          <p
+                            className="text-muted-foreground truncate text-sm font-medium"
+                            title={file.fileName}
+                          >
+                            {file.fileName}
+                          </p>
+                          <p className="text-foreground text-xs">
+                            {formatFileSize(file.sizeMB)}
+                          </p>
+                        </div>
+                      </div>
                       <Button
-                        onClick={copyCodeToClipboard}
+                        onClick={() => handleRemoveFile(file.fileName)}
                         size="sm"
-                        variant="secondary"
-                        className="absolute top-2 right-2 flex items-center gap-1"
+                        variant="ghost"
+                        className="text-destructive hover:text-destructive hover:bg-destructive/10 flex w-full flex-shrink-0 items-center justify-center gap-1 rounded-lg sm:w-auto"
                       >
-                        {copiedCode ? (
-                          <>
-                            <Check className="h-4 w-4" />
-                            Copiado!
-                          </>
-                        ) : (
-                          <>
-                            <Copy className="h-4 w-4" />
-                            Copiar
-                          </>
-                        )}
+                        <Trash2 className="h-4 w-4" />
+                        <span>Remover</span>
                       </Button>
                     </div>
-                  </div>
-                )}
-              </div>
+                  ))}
+                </div>
+              )}
             </div>
-          </div>
 
-          <Separator />
+            <Separator />
 
-          {/* Lista de arquivos */}
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-foreground text-lg font-semibold">
-                Arquivos
-              </h3>
+            {/* Botões de ação */}
+            <div className="flex w-full flex-col gap-2 sm:flex-row sm:justify-end sm:gap-3">
               <Button
-                onClick={handleAddFiles}
-                size="sm"
+                onClick={() => onOpenChange(false)}
                 variant="outline"
-                className="text-foreground flex items-center gap-2"
+                className="text-foreground w-full rounded-lg sm:w-auto"
               >
-                <Plus className="h-4 w-4" />
-                Adicionar arquivos
+                Fechar
+              </Button>
+              <Button
+                onClick={handleTestKnowledgeBase}
+                className="flex w-full items-center justify-center gap-2 rounded-lg sm:w-auto"
+              >
+                <Play className="h-4 w-4" />
+                Testar
               </Button>
             </div>
-
-            {knowledgeBase.files.length === 0 ? (
-              <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>
-            ) : (
-              <div className="max-h-60 space-y-2 overflow-y-auto">
-                {knowledgeBase.files.map((file, index) => (
-                  <div
-                    key={`${file.fileName}-${index}`}
-                    className="hover:bg-muted/50 border-border flex items-center justify-between rounded-lg border-1 p-3 transition-colors"
-                  >
-                    <div
-                      className="flex min-w-0 flex-1 items-center gap-3"
-                      onClick={() => window.open(file.url, '_blank')}
-                    >
-                      <FileText className="text-primary h-5 w-5 flex-shrink-0" />
-                      <div className="min-w-0 flex-1">
-                        <p
-                          className="text-muted-foreground truncate text-sm font-medium"
-                          title={file.fileName}
-                        >
-                          {file.fileName}
-                        </p>
-                        <p className="text-foreground text-xs">
-                          {formatFileSize(file.sizeMB)}
-                        </p>
-                      </div>
-                    </div>
-                    <Button
-                      onClick={() => handleRemoveFile(file.fileName)}
-                      size="sm"
-                      variant="ghost"
-                      className="text-destructive hover:text-destructive hover:bg-destructive/10 flex items-center gap-1"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                      Remover
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <Separator />
-
-          {/* Botões de ação */}
-          <div className="flex justify-end gap-3">
-            <Button
-              onClick={() => onOpenChange(false)}
-              variant="outline"
-              className="text-foreground"
-            >
-              Fechar
-            </Button>
-            <Button
-              onClick={handleTestKnowledgeBase}
-              className="flex items-center gap-2"
-            >
-              <Play className="h-4 w-4" />
-              Testar
-            </Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/user-area/pages/create-base-pipeline.tsx b/src/features/user-area/pages/create-base-pipeline.tsx
index 935fedc..df6137b 100644
--- a/src/features/user-area/pages/create-base-pipeline.tsx
+++ b/src/features/user-area/pages/create-base-pipeline.tsx
@@ -354,7 +354,7 @@ export function CreateBasePipeline() {
   return (
     <Background className="justify-start">
       <Layout className="h-full w-full pt-28">
-        <main className="flex flex-col p-6 md:p-12">
+        <main className="flex flex-col p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
diff --git a/src/features/user-area/pages/create-base.tsx b/src/features/user-area/pages/create-base.tsx
index 3d450f0..ae8931c 100644
--- a/src/features/user-area/pages/create-base.tsx
+++ b/src/features/user-area/pages/create-base.tsx
@@ -78,7 +78,7 @@ export function CreateBase() {
   return (
     <Background className="justify-start">
       <Layout className="h-full w-full pt-28">
-        <main className="flex flex-col p-6 md:p-12">
+        <main className="flex flex-col p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
diff --git a/src/features/user-area/pages/user-info.tsx b/src/features/user-area/pages/user-info.tsx
index 6531d06..a44e533 100644
--- a/src/features/user-area/pages/user-info.tsx
+++ b/src/features/user-area/pages/user-info.tsx
@@ -117,7 +117,7 @@ export function UserInfoPage() {
   return (
     <Background>
       <Layout className="h-full w-full">
-        <main className="flex flex-col items-center justify-center p-12">
+        <main className="flex flex-col items-center justify-center p-6 pb-24 md:p-12 md:pb-12">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
diff --git a/src/shared/components/layout.tsx b/src/shared/components/layout.tsx
index 7883dbb..284674c 100644
--- a/src/shared/components/layout.tsx
+++ b/src/shared/components/layout.tsx
@@ -8,7 +8,7 @@ export function Layout({ children, className, ...props }: LayoutProps) {
   return (
     <div
       className={cn(
-        'flex w-5/6 max-w-[1920px] flex-col items-center justify-center',
+        'flex w-5/6 max-w-[1920px] flex-col items-center justify-center pb-20 md:pb-0',
         className
       )}
       {...props}
diff --git a/src/shared/components/page-with-sidebar.tsx b/src/shared/components/page-with-sidebar.tsx
index 511a284..52db239 100644
--- a/src/shared/components/page-with-sidebar.tsx
+++ b/src/shared/components/page-with-sidebar.tsx
@@ -7,7 +7,11 @@ import { UserProvider } from '@/shared/contexts/user-context'
 export function PageWithSidebar() {
   return (
     <UserProvider>
-      <Toaster position="bottom-right" reverseOrder={false} />
+      <Toaster
+        position="bottom-right"
+        reverseOrder={false}
+        containerClassName="mb-16 md:mb-0"
+      />
       <Navbar />
       <Sidebar />
       <Outlet />
diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx
index ada4dce..a236dd6 100644
--- a/src/shared/components/sidebar.tsx
+++ b/src/shared/components/sidebar.tsx
@@ -12,7 +12,7 @@ export type SidebarItem = {
 
 const items: SidebarItem[] = [
   { label: 'Dados de cadastro', icon: <User />, key: 'user' },
-  { label: 'Minhas bases', icon: <BrainCircuit />, key: 'bases' },
+  { label: 'Bases', icon: <BrainCircuit />, key: 'bases' },
   { label: 'Assinatura', icon: <Wallet />, key: 'subscription' }
 ]
 
@@ -45,58 +45,96 @@ export function Sidebar() {
   }
 
   return (
-    <motion.aside
-      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"
-      whileInView="visible"
-      transition={{ staggerChildren: 0.04 }}
-    >
-      {/* Botão para toggle da sidebar */}
-      <div className="flex flex-col justify-center gap-4">
-        <motion.div transition={transition} variants={variants}>
-          <Button
-            variant="ghost"
-            className="hover:bg-muted/50 text-foreground self-start"
-            onClick={toggleSidebar}
-          >
-            <Menu />
-          </Button>
-        </motion.div>
-
-        <motion.nav className="flex flex-col gap-2">
-          {items.map((item) => (
-            <motion.button
-              key={item.key}
-              className={`flex items-center gap-3 rounded-lg font-medium transition-colors ${
-                selected === item.key
-                  ? 'bg-primary/10 text-primary'
-                  : 'hover:bg-muted/50 text-foreground/80'
-              } ${isCollapsed ? 'justify-center px-2 py-3' : 'px-4 py-3'}`}
-              onClick={() => handleNavigation(item.key)}
-              title={isCollapsed ? item.label : undefined}
-              transition={transition}
-              variants={variants}
+    <>
+      {/* Desktop Sidebar */}
+      <motion.aside
+        className={`bg-background fixed z-10 hidden h-full flex-col justify-between border-r-[1px] border-gray-100/20 px-4 py-8 pt-24 transition-all duration-300 md:flex ${
+          isCollapsed ? 'w-20' : 'w-96'
+        }`}
+        initial="hidden"
+        whileInView="visible"
+        transition={{ staggerChildren: 0.04 }}
+      >
+        {/* Botão para toggle da sidebar */}
+        <div className="flex flex-col justify-center gap-4">
+          <motion.div transition={transition} variants={variants}>
+            <Button
+              variant="ghost"
+              className="hover:bg-muted/50 text-foreground self-start"
+              onClick={toggleSidebar}
             >
-              {item.icon}
-              {!isCollapsed && item.label}
-            </motion.button>
-          ))}
-        </motion.nav>
-      </div>
+              <Menu />
+            </Button>
+          </motion.div>
 
-      <Button
-        variant="ghost"
-        className={`hover:bg-muted/50 flex items-center text-red-600 ${
-          isCollapsed ? 'justify-center px-2 py-3' : 'gap-2 px-4 py-3'
-        }`}
-        onClick={handleLogout}
-        title={isCollapsed ? 'Sair' : undefined}
+          <motion.nav className="flex flex-col gap-2">
+            {items.map((item) => (
+              <motion.button
+                key={item.key}
+                className={`flex items-center gap-3 rounded-lg font-medium transition-colors ${
+                  selected === item.key
+                    ? 'bg-primary/10 text-primary'
+                    : 'hover:bg-muted/50 text-foreground/80'
+                } ${isCollapsed ? 'justify-center px-2 py-3' : 'px-4 py-3'}`}
+                onClick={() => handleNavigation(item.key)}
+                title={isCollapsed ? item.label : undefined}
+                transition={transition}
+                variants={variants}
+              >
+                {item.icon}
+                {!isCollapsed && item.label}
+              </motion.button>
+            ))}
+          </motion.nav>
+        </div>
+
+        <Button
+          variant="ghost"
+          className={`hover:bg-muted/50 flex items-center text-red-600 ${
+            isCollapsed ? 'justify-center px-2 py-3' : 'gap-2 px-4 py-3'
+          }`}
+          onClick={handleLogout}
+          title={isCollapsed ? 'Sair' : undefined}
+        >
+          <LogOut className="h-5 w-5" />
+          {!isCollapsed && 'Sair'}
+        </Button>
+      </motion.aside>
+
+      {/* Mobile Bottom Navigation */}
+      <motion.nav
+        className="bg-background/95 fixed right-0 bottom-0 left-0 z-10 flex items-center justify-around border-t border-gray-100/20 px-4 py-3 backdrop-blur-lg md:hidden"
+        initial="hidden"
+        whileInView="visible"
+        transition={{ staggerChildren: 0.04 }}
       >
-        <LogOut className="h-5 w-5" />
-        {!isCollapsed && 'Sair'}
-      </Button>
-    </motion.aside>
+        {items.map((item) => (
+          <motion.button
+            key={item.key}
+            className={`flex flex-col items-center gap-1 rounded-lg px-4 py-2 font-medium transition-colors ${
+              selected === item.key
+                ? 'text-primary'
+                : 'text-foreground/60 hover:text-foreground'
+            }`}
+            onClick={() => handleNavigation(item.key)}
+            transition={transition}
+            variants={variants}
+          >
+            <span className="text-xl">{item.icon}</span>
+            <span className="text-xs">{item.label.split(' ')[0]}</span>
+          </motion.button>
+        ))}
+
+        <motion.button
+          className="flex flex-col items-center gap-1 rounded-lg px-4 py-2 font-medium text-red-600 transition-colors hover:text-red-700"
+          onClick={handleLogout}
+          transition={transition}
+          variants={variants}
+        >
+          <LogOut className="h-5 w-5" />
+          <span className="text-xs">Sair</span>
+        </motion.button>
+      </motion.nav>
+    </>
   )
 }