diff --git a/web/app/schedules/home/components/GenerateScheduleButton.tsx b/web/app/schedules/home/components/GenerateScheduleButton.tsx
index e8dff75..c96dfdc 100644
--- a/web/app/schedules/home/components/GenerateScheduleButton.tsx
+++ b/web/app/schedules/home/components/GenerateScheduleButton.tsx
@@ -1,47 +1,110 @@
-'use router';
+'use client';
 
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import useClassesToShow from '@/app/hooks/useClassesToShow';
 import useSelectedClasses from '@/app/hooks/useSelectedClasses';
 import useSchedules from '@/app/hooks/useSchedules';
+import useUser from '@/app/hooks/useUser';
 
 import Button from '@/app/components/Button';
+import Modal from '@/app/components/Modal/Modal';
 
 import { ScheduleClassType } from '@/app/contexts/SchedulesContext';
 
-import generateSchedule from '@/app/utils/api/generateSchedule';
+import generateSchedule, { EachFieldNumber } from '@/app/utils/api/generateSchedule';
 import { errorToast } from '@/app/utils/errorToast';
 
+function PreferenceOrder({ setPreference }: {
+    setPreference: (preference: EachFieldNumber) => void
+}) {
+    return (
+        <select className='bg-white shadow-md h-14 p-2 rounded-xl' onChange={(event) => {
+            const preference = parseInt(event.target.value) as EachFieldNumber;
+            setPreference(preference);
+        }}>
+            <option value="1">Mínima</option>
+            <option value="2">Média</option>
+            <option value="3">Máxima</option>
+        </select>
+    );
+}
+
 export default function GenerateScheduleButton() {
     const router = useRouter();
 
+    const { setLoading } = useUser();
     const { setLocalSchedules } = useSchedules();
     const { selectedClasses } = useSelectedClasses();
     const { classesToShow } = useClassesToShow();
 
-    const createSchedule = async () => {
+    const [activeModal, setActiveModal] = useState(false);
+    const [morningPreference, setMorningPreference] = useState<EachFieldNumber>(1);
+    const [afternoonPreference, setAfternoonPreference] = useState<EachFieldNumber>(1);
+    const [nightPreference, setNightPreference] = useState<EachFieldNumber>(1);
+
+    const createSchedule = () => {
         let classes_id = new Array();
         selectedClasses.forEach((_class) => {
             Array.from(_class.keys()).forEach((key) => {
                 classes_id.push(key);
             });
         });
-        const response = await generateSchedule(classes_id);
-        if (response.status === 200) {
-            const schedules = response.data as Array<ScheduleClassType>;
-            if (!schedules.length) {
-                errorToast('Nenhuma grade conseguiu ser gerada!');
+
+        setLoading(true);
+        generateSchedule(classes_id, [morningPreference, afternoonPreference, nightPreference]).then((response) => {
+            if (response.status === 200) {
+                const schedules = response.data as Array<ScheduleClassType>;
+
+                if (!schedules.length) {
+                    errorToast('Nenhuma grade conseguiu ser gerada!');
+                    setLoading(false);
+                } else {
+                    setLocalSchedules(schedules);
+                    router.replace('/schedules/mygrades');
+                    setTimeout(() => {
+                        setLoading(false);
+                    }, 500);
+                }
             } else {
-                setLocalSchedules(schedules);
-                router.replace('/schedules/mygrades');
+                errorToast('Não foi possível gerar as grades, tente novamente mais tarde!');
+                setLoading(false);
             }
-        } else errorToast('Não foi possível gerar as grades, tente novamente mais tarde!');
+        });
     };
+
     return (
-        <div className='flex justify-center'>
-            <Button disabled={!classesToShow.length} onClick={createSchedule} className='fixed bottom-20 w-52 h-10 font-semibold bg-primary disabled:opacity-70'>
-                Gerar Grade
-            </Button>
-        </div>
+        <>
+            {activeModal &&
+                <Modal setActiveModal={setActiveModal} noExit>
+                    <div className='flex flex-col justify-center items-center gap-10 p-3 h-full'>
+                        <h1 className='font-semibold'>Período de preferência</h1>
+
+                        <div className='flex flex-col gap-3'>
+                            <div className='grid grid-cols-3 gap-3 font-medium text-center'>
+                                <span>Manhã</span>
+                                <span>Tarde</span>
+                                <span>Noite</span>
+                            </div>
+                            <div className='grid grid-cols-3 gap-3'>
+                                <PreferenceOrder setPreference={setMorningPreference} />
+                                <PreferenceOrder setPreference={setAfternoonPreference} />
+                                <PreferenceOrder setPreference={setNightPreference} />
+                            </div>
+                        </div>
+
+                        <div className='flex gap-16 justify-center items-center'>
+                            <Button className='bg-gray-400' onClick={() => setActiveModal(false)}>Cancelar</Button>
+                            <Button className='bg-primary' onClick={createSchedule}>Gerar</Button>
+                        </div>
+                    </div>
+                </Modal>
+            }
+            <div className='flex justify-center'>
+                <Button disabled={!classesToShow.length} onClick={() => setActiveModal(true)} className='fixed bottom-20 w-52 h-10 font-semibold bg-primary disabled:opacity-70'>
+                    Gerar Grade
+                </Button>
+            </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/web/app/schedules/layout.tsx b/web/app/schedules/layout.tsx
index ee61cec..8cefdd2 100644
--- a/web/app/schedules/layout.tsx
+++ b/web/app/schedules/layout.tsx
@@ -1,21 +1,22 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import useUser from '@/app/hooks/useUser';
 import { useCallback, useState } from 'react';
-import Button from '../components/Button';
-import Image from 'next/image';
+import useUser from '@/app/hooks/useUser';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
+import Image from 'next/image';
+import Button from '../components/Button';
 import AsideButton from '../components/AsideButton';
 import Protected from '../components/Protected';
 import InfoHeader from '../components/InfoHeader';
+import { LoadingScreen } from '../components/LoadingScreen';
 
 import homeIcon from '@/public/icons/home.jpg';
 import infoIcon from '@/public/icons/info.jpg';
 import googleIcon from '@/public/icons/google.jpg';
 import scheduleIcon from '@/public/icons/schedule.jpg';
 import profileIcon from '@/public/icons/profile.jpg';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 
 function calculatePositionOfBlob(node: any, width: number, footerWidth: number) {
     const infos = node.getBoundingClientRect();
@@ -33,7 +34,7 @@ function LogoReturnButton() {
         user.is_anonymous &&
         <Button onClick={() => router.replace('/')} className="fixed z-[6] top-4 right-6 !shadow-none !p-0 ">
             <div className="bg-white flex justify-center items-center rounded-full w-12 h-12">
-                <Image 
+                <Image
                     width={35} height={35}
                     src={googleIcon} alt='ícone do logotipo google'
                 />
@@ -99,13 +100,17 @@ function AsideButtonsJSX() {
 
 function LayoutJSX({ children }: { children: React.ReactNode }) {
     const { breakHeighPoint } = useWindowDimensions();
+    const { isLoading } = useUser();
 
     return (
         <>
             <InfoHeader />
-            <main className={`${breakHeighPoint ? 'pt-[136px]' : 'pt-16'} pb-36`}>
-                {children}
-            </main>
+            {!isLoading ?
+                <main className={`${breakHeighPoint ? 'pt-[136px]' : 'pt-16'} pb-36`}>
+                    {children}
+                </main> :
+                <LoadingScreen />
+            }
             <LogoReturnButton />
             <AsideButtonsJSX />
         </>
diff --git a/web/app/utils/api/generateSchedule.ts b/web/app/utils/api/generateSchedule.ts
index 73c72b6..d2353c1 100644
--- a/web/app/utils/api/generateSchedule.ts
+++ b/web/app/utils/api/generateSchedule.ts
@@ -1,7 +1,7 @@
 import request from '../request';
 import { settings } from '../settings';
 
-type EachFieldNumber = 1 | 2 | 3;
+export type EachFieldNumber = 1 | 2 | 3;
 type PreferenceType = [EachFieldNumber, EachFieldNumber, EachFieldNumber];
 
 //Promise<AxiosResponse<any, any>>