diff --git a/web/app/components/SchedulePreview/SchedulePreview.tsx b/web/app/components/SchedulePreview/SchedulePreview.tsx
index a969cb0..b805258 100644
--- a/web/app/components/SchedulePreview/SchedulePreview.tsx
+++ b/web/app/components/SchedulePreview/SchedulePreview.tsx
@@ -21,8 +21,7 @@ import deleteSchedule from '@/app/utils/api/deleteSchedule';
 import { errorToast, successToast } from '@/app/utils/toast';
 
 import jsPDF from 'jspdf';
-import toast from 'react-hot-toast';
-import { Axios, AxiosError } from 'axios';
+import { AxiosError } from 'axios';
 
 const commonError = () => errorToast('Houve um erro na atualização das grades!');
 
@@ -94,34 +93,9 @@ function BottomPart(props: {
     }
 }) {
     const { user } = useUser();
-    const { setCloudSchedules } = useSchedules();
 
     const [changeDate, setChangeDate] = useState('');
 
-    /**
-    * Tenta salvar a grade na nuvem, se der certo, atualiza as grades locais.
-    * Caso contrário, exibe errotToast com mensagem retornada pela API.
-    */
-    async function handleUploadToCloud() {
-        try {
-            const saveResponse = await saveSchedule(props.schedules.localSchedule, user.access);
-
-            if (saveResponse.status == 201) {
-                getSchedules(user.access).then(response => {
-                    props.handleDelete();
-                    setCloudSchedules(response.data);
-                }).catch(() => commonError());
-                successToast('Grade salva com sucesso!');
-            }
-        } catch (error) {
-            const axiosError = error as AxiosError;
-            if (axiosError.response) {
-                const data = axiosError.response.data as { errors: string };
-                errorToast(data.errors);
-            }
-        }
-    }
-
     useEffect(() => {
         if (props.isCloud && props.schedules.cloudSchedule?.created_at) {
             setChangeDate(handleDate(props.schedules.cloudSchedule.created_at));
@@ -130,18 +104,12 @@ function BottomPart(props: {
 
     return (
         <div className={`flex justify-between items-center w-full ${props.isCloud ? '-bottom-14' : '-bottom-7'}`}>
-            <div
-                className='text-[#000000] opacity-40 text-lg font-bold'
-            >
+            <div className='text-[#000000] opacity-40 text-lg font-bold' >
                 Grade {props.position} <br />
                 {props.isCloud && changeDate && <span className='text-sm font-normal'>{changeDate}</span>}
             </div>
             <div className='flex gap-4 h-[25px] opacity-50'>
-                {!props.isCloud && !user.is_anonymous &&
-                    <button onClick={() => handleUploadToCloud()}>
-                        <Image width={25} src={uploadIcon} alt="ícone de upload" />
-                    </button>
-                }
+                {!props.isCloud && !user.is_anonymous && <UploadToCloudButton schedules={props.schedules} handleDelete={props.handleDelete} />}
                 <button onClick={() => {
                     props.setters.setActiveScheduleModal(true);
                     props.setters.setToDownload(true);
@@ -154,6 +122,47 @@ function BottomPart(props: {
     );
 }
 
+function UploadToCloudButton({ ...props }: {
+    schedules: {
+        localSchedule?: Array<ScheduleClassType>;
+    };
+    handleDelete: () => void;
+}) {
+    const { user } = useUser();
+    const { setCloudSchedules } = useSchedules();
+
+    function handleSuccessToSave() {
+        getSchedules(user.access).then(response => {
+            props.handleDelete();
+            setCloudSchedules(response.data);
+        }).catch(() => commonError());
+        successToast('Grade salva com sucesso!');
+    }
+
+    function handleErrorToSave(axiosError: AxiosError) {
+        if (axiosError.response) {
+            const data = axiosError.response.data as { errors: string };
+            errorToast(data.errors);
+        }
+    }
+
+    /**
+    * Tenta salvar a grade na nuvem, se der certo, atualiza as grades locais.
+    * Caso contrário, exibe errorToast com mensagem retornada pela API.
+    */
+    async function handleUploadToCloud() {
+        saveSchedule(props.schedules.localSchedule, user.access).then(response => {
+            if (response.status == 201) handleSuccessToSave();
+        }).catch((error: any) => handleErrorToSave(error));
+    }
+
+    return (
+        <button onClick={() => handleUploadToCloud()}>
+            <Image width={25} src={uploadIcon} alt="ícone de upload" />
+        </button>
+    );
+}
+
 function handleDownloadPDF(isCloud: boolean, index: number) {
     const doc = document.getElementById('download-content')!;