diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx
index 3ae28eb..7a98745 100644
--- a/src/pages/student-dashboard/StoryPage.tsx
+++ b/src/pages/student-dashboard/StoryPage.tsx
@@ -854,10 +854,10 @@ export function StoryPage() {
           <h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
         </div>
 
-       {/* Container de duas colunas */}
-        <div className="grid grid-cols-10 gap-6 border-b border-gray-200 pb-6">
-          {/* 3. Texto da História - Coluna Esquerda (40%) */}
-          <div className="col-span-4">
+       {/* Container responsivo */}
+        <div className="grid grid-cols-1 md:grid-cols-10 gap-6 border-b border-gray-200 pb-6">
+          {/* 3. Texto da História - Coluna Esquerda (40% em desktop) */}
+          <div className="col-span-1 md:col-span-4">
             <div 
               className="prose max-w-none overflow-hidden"
               style={{ 
@@ -871,9 +871,9 @@ export function StoryPage() {
             </div>
           </div>
 
-          {/* 5. Imagem da História - Coluna Direita (60%) */}
+          {/* 5. Imagem da História - Coluna Direita (60% em desktop) */}
           {!focusMode.isActive && (
-            <div className="col-span-6">
+            <div className="col-span-1 md:col-span-6">
               {story?.content?.pages?.[currentPage]?.image ? (
                 <ImageWithLoading
                   src={story.content.pages[currentPage].image}
@@ -891,26 +891,28 @@ export function StoryPage() {
 
         {/* 4. Controles de Navegação */}
         <div className="border-b border-gray-200 pb-6">
-          <div className="flex justify-between items-center">
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-2">
             <button
               onClick={() => setCurrentPage(prev => prev - 1)}
               disabled={currentPage === 0}
-              className="flex items-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <ArrowLeft className="h-5 w-5" />
-              Página Anterior
+              <span className="hidden sm:inline">Página Anterior</span>
+              <span className="sm:hidden">Anterior</span>
             </button>
 
-            <span className="text-sm text-gray-500">
+            <span className="text-sm text-gray-500 order-first sm:order-none">
               Página {currentPage + 1} de {story?.content?.pages?.length}
             </span>
 
             <button
               onClick={() => setCurrentPage(prev => prev + 1)}
               disabled={currentPage === (story?.content?.pages?.length ?? 0) - 1}
-              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              Próxima Página
+              <span className="hidden sm:inline">Próxima Página</span>
+              <span className="sm:hidden">Próxima</span>
               <ArrowRight className="h-5 w-5" />
             </button>
           </div>