diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
new file mode 100644
index 0000000..5ea8c37
--- /dev/null
+++ b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import deleteSchedule from '@/api/server/schedules/deleteSchedule';
+import { ServerContext } from '@/state/server';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    scheduleId: number;
+    onDeleted: () => void;
+}
+
+export default ({ scheduleId, onDeleted }: Props) => {
+    const [ visible, setVisible ] = useState(false);
+    const [ isLoading, setIsLoading ] = useState(false);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const onDelete = () => {
+        setIsLoading(true);
+        clearFlashes('schedules');
+        deleteSchedule(uuid, scheduleId)
+            .then(() => {
+                setIsLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+
+                addError({ key: 'schedules', message: httpErrorToHuman(error) });
+                setIsLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={lang.schedule_delete}
+                buttonText={lang.schedule_yes_delete}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={isLoading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                {lang.schedule_are_you_sure_delete}
+            </ConfirmationModal>
+            <Button css={tw`flex-1 sm:flex-none mr-4 border-transparent`} color={'red'} isSecondary onClick={() => setVisible(true)}>
+                {lang.delete}
+            </Button>
+        </>
+    );
+};
diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
new file mode 100644
index 0000000..047b846
--- /dev/null
+++ b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
@@ -0,0 +1,131 @@
+import React, { useContext, useEffect } from 'react';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import Field from '@/components/elements/Field';
+import { Form, Formik, FormikHelpers } from 'formik';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import createOrUpdateSchedule from '@/api/server/schedules/createOrUpdateSchedule';
+import { ServerContext } from '@/state/server';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ModalContext from '@/context/ModalContext';
+import asModal from '@/hoc/asModal';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    schedule?: Schedule;
+}
+
+interface Values {
+    name: string;
+    dayOfWeek: string;
+    month: string;
+    dayOfMonth: string;
+    hour: string;
+    minute: string;
+    enabled: boolean;
+    onlyWhenOnline: boolean;
+}
+
+const EditScheduleModal = ({ schedule }: Props) => {
+    const { addError, clearFlashes } = useFlash();
+    const { dismiss } = useContext(ModalContext);
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+
+    useEffect(() => {
+        return () => {
+            clearFlashes('schedule:edit');
+        };
+    }, []);
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('schedule:edit');
+        createOrUpdateSchedule(uuid, {
+            id: schedule?.id,
+            name: values.name,
+            cron: {
+                minute: values.minute,
+                hour: values.hour,
+                dayOfWeek: values.dayOfWeek,
+                month: values.month,
+                dayOfMonth: values.dayOfMonth,
+            },
+            onlyWhenOnline: values.onlyWhenOnline,
+            isActive: values.enabled,
+        })
+            .then(schedule => {
+                setSubmitting(false);
+                appendSchedule(schedule);
+                dismiss();
+            })
+            .catch(error => {
+                console.error(error);
+
+                setSubmitting(false);
+                addError({ key: 'schedule:edit', message: httpErrorToHuman(error) });
+            });
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: schedule?.name || '',
+                minute: schedule?.cron.minute || '*/5',
+                hour: schedule?.cron.hour || '*',
+                dayOfMonth: schedule?.cron.dayOfMonth || '*',
+                month: schedule?.cron.month || '*',
+                dayOfWeek: schedule?.cron.dayOfWeek || '*',
+                enabled: schedule?.isActive ?? true,
+                onlyWhenOnline: schedule?.onlyWhenOnline ?? true,
+            } as Values}
+        >
+            {({ isSubmitting }) => (
+                <Form>
+                    <h3 css={tw`text-2xl mb-6`}>{schedule ? lang.schedule_edit : lang.schedule_create_new}</h3>
+                    <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
+                    <Field
+                        name={'name'}
+                        label={lang.schedule_name}
+                        description={lang.schedule_desc}
+                    />
+                    <div css={tw`grid grid-cols-2 sm:grid-cols-5 gap-4 mt-6`}>
+                        <Field name={'minute'} label={lang.minute}/>
+                        <Field name={'hour'} label={lang.hour}/>
+                        <Field name={'dayOfMonth'} label={lang.day_of_month}/>
+                        <Field name={'month'} label={lang.month}/>
+                        <Field name={'dayOfWeek'} label={lang.day_of_week}/>
+                    </div>
+                    <p css={tw`text-neutral-400 text-xs mt-2`}>
+                        {lang.the_schedule_system_stuff_blabla_no_one_fucking_cares}
+                    </p>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <FormikSwitch
+                            name={'onlyWhenOnline'}
+                            description={lang.schedule_only_excec}
+                            label={lang.only_when_server_is_online}
+                        />
+                    </div>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <FormikSwitch
+                            name={'enabled'}
+                            description={lang.schedule_will_be_exec_if_enabled}
+                            label={lang.sceeeeeedule_enabled}
+                        />
+                    </div>
+                    <div css={tw`mt-6 text-right`}>
+                        <Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
+                            {schedule ? lang.save_changes : lang.create_schedule}
+                        </Button>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};
+
+export default asModal<Props>()(EditScheduleModal);
diff --git a/resources/scripts/components/server/schedules/NewTaskButton.tsx b/resources/scripts/components/server/schedules/NewTaskButton.tsx
new file mode 100644
index 0000000..65fdd6c
--- /dev/null
+++ b/resources/scripts/components/server/schedules/NewTaskButton.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    schedule: Schedule;
+}
+
+export default ({ schedule }: Props) => {
+    const [ visible, setVisible ] = useState(false);
+
+    return (
+        <>
+            <TaskDetailsModal schedule={schedule} visible={visible} onModalDismissed={() => setVisible(false)}/>
+            <Button onClick={() => setVisible(true)} css={tw`flex-1`}>
+                {lang.new_task}
+            </Button>
+        </>
+    );
+};
diff --git a/resources/scripts/components/server/schedules/RunScheduleButton.tsx b/resources/scripts/components/server/schedules/RunScheduleButton.tsx
new file mode 100644
index 0000000..40d5d68
--- /dev/null
+++ b/resources/scripts/components/server/schedules/RunScheduleButton.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback, useState } from 'react';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
+import { ServerContext } from '@/state/server';
+import useFlash from '@/plugins/useFlash';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import lang from '../../../../../lang.json';
+
+const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
+    const [ loading, setLoading ] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+
+    const onTriggerExecute = useCallback(() => {
+        clearFlashes('schedule');
+        setLoading(true);
+        triggerScheduleExecution(id, schedule.id)
+            .then(() => {
+                setLoading(false);
+                appendSchedule({ ...schedule, isProcessing: true });
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ error, key: 'schedules' });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    return (
+        <>
+            <SpinnerOverlay visible={loading} size={'large'}/>
+            <Button
+                isSecondary
+                color={'grey'}
+                css={tw`flex-1 sm:flex-none border-transparent`}
+                disabled={schedule.isProcessing}
+                onClick={onTriggerExecute}
+            >
+                {lang.run_now}
+            </Button>
+        </>
+    );
+};
+
+export default RunScheduleButton;
diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
new file mode 100644
index 0000000..62e2af3
--- /dev/null
+++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import getServerSchedules from '@/api/server/schedules/getServerSchedules';
+import { ServerContext } from '@/state/server';
+import Spinner from '@/components/elements/Spinner';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import ScheduleRow from '@/components/server/schedules/ScheduleRow';
+import { httpErrorToHuman } from '@/api/http';
+import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
+import Can from '@/components/elements/Can';
+import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
+import Button from '@/components/elements/Button';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import lang from '../../../../../lang.json';
+
+export default () => {
+    const match = useRouteMatch();
+    const history = useHistory();
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { clearFlashes, addError } = useFlash();
+    const [ loading, setLoading ] = useState(true);
+    const [ visible, setVisible ] = useState(false);
+
+    const schedules = ServerContext.useStoreState(state => state.schedules.data);
+    const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules);
+
+    useEffect(() => {
+        clearFlashes('schedules');
+        getServerSchedules(uuid)
+            .then(schedules => setSchedules(schedules))
+            .catch(error => {
+                addError({ message: httpErrorToHuman(error), key: 'schedules' });
+                console.error(error);
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    return (
+        <ServerContentBlock title={'Schedules'}>
+            <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
+            {(!schedules.length && loading) ?
+                <Spinner size={'large'} centered/>
+                :
+                <>
+                    {
+                        schedules.length === 0 ?
+                            <p css={tw`text-sm text-center text-neutral-300`}>
+                                {lang.there_isnt_arent_schedules_for_server_smile}
+                            </p>
+                            :
+                            schedules.map(schedule => (
+                                <GreyRowBox
+                                    as={'a'}
+                                    key={schedule.id}
+                                    href={`${match.url}/${schedule.id}`}
+                                    css={tw`cursor-pointer mb-2 flex-wrap`}
+                                    onClick={(e: any) => {
+                                        e.preventDefault();
+                                        history.push(`${match.url}/${schedule.id}`);
+                                    }}
+                                >
+                                    <ScheduleRow schedule={schedule}/>
+                                </GreyRowBox>
+                            ))
+                    }
+                    <Can action={'schedule.create'}>
+                        <div css={tw`mt-8 flex justify-end`}>
+                            <EditScheduleModal visible={visible} onModalDismissed={() => setVisible(false)}/>
+                            <Button type={'button'} onClick={() => setVisible(true)}>
+                                {lang.create_schedule}
+                            </Button>
+                        </div>
+                    </Can>
+                </>
+            }
+        </ServerContentBlock>
+    );
+};
diff --git a/resources/scripts/components/server/schedules/ScheduleCronRow.tsx b/resources/scripts/components/server/schedules/ScheduleCronRow.tsx
new file mode 100644
index 0000000..716efcf
--- /dev/null
+++ b/resources/scripts/components/server/schedules/ScheduleCronRow.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import tw from 'twin.macro';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    cron: Schedule['cron'];
+    className?: string;
+}
+
+const ScheduleCronRow = ({ cron, className }: Props) => (
+    <div css={tw`flex`} className={className}>
+        <div css={tw`w-1/5 sm:w-auto text-center`}>
+            <p css={tw`font-medium`}>{cron.minute}</p>
+            <p css={tw`text-2xs text-neutral-500 uppercase`}>{lang.minute}</p>
+        </div>
+        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
+            <p css={tw`font-medium`}>{cron.hour}</p>
+            <p css={tw`text-2xs text-neutral-500 uppercase`}>{lang.hour}</p>
+        </div>
+        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
+            <p css={tw`font-medium`}>{cron.dayOfMonth}</p>
+            <p css={tw`text-2xs text-neutral-500 uppercase`}>{lang.day_month}</p>
+        </div>
+        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
+            <p css={tw`font-medium`}>{cron.month}</p>
+            <p css={tw`text-2xs text-neutral-500 uppercase`}>{lang.month}</p>
+        </div>
+        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
+            <p css={tw`font-medium`}>{cron.dayOfWeek}</p>
+            <p css={tw`text-2xs text-neutral-500 uppercase`}>{lang.day_week}</p>
+        </div>
+    </div>
+);
+
+export default ScheduleCronRow;
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
new file mode 100644
index 0000000..a59e40c
--- /dev/null
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import getServerSchedule from '@/api/server/schedules/getServerSchedule';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
+import NewTaskButton from '@/components/server/schedules/NewTaskButton';
+import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton';
+import Can from '@/components/elements/Can';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
+import isEqual from 'react-fast-compare';
+import { format } from 'date-fns';
+import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow';
+import RunScheduleButton from '@/components/server/schedules/RunScheduleButton';
+import lang from '../../../../../lang.json';
+
+interface Params {
+    id: string;
+}
+
+const CronBox = ({ title, value }: { title: string; value: string }) => (
+    <div css={tw`bg-neutral-700 rounded p-3`}>
+        <p css={tw`text-neutral-300 text-sm`}>{title}</p>
+        <p css={tw`text-xl font-medium text-neutral-100`}>{value}</p>
+    </div>
+);
+
+const ActivePill = ({ active }: { active: boolean }) => (
+    <span
+        css={[
+            tw`rounded-full px-2 py-px text-xs ml-4 uppercase`,
+            active ? tw`bg-green-600 text-green-100` : tw`bg-red-600 text-red-100`,
+        ]}
+    >
+        {active ? lang.active : lang.inactive}
+    </span>
+);
+
+export default () => {
+    const history = useHistory();
+    const { id: scheduleId } = useParams<Params>();
+
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const [ isLoading, setIsLoading ] = useState(true);
+    const [ showEditModal, setShowEditModal ] = useState(false);
+
+    const schedule = ServerContext.useStoreState(st => st.schedules.data.find(s => s.id === Number(scheduleId)), isEqual);
+    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+
+    useEffect(() => {
+        if (schedule?.id === Number(scheduleId)) {
+            setIsLoading(false);
+            return;
+        }
+
+        clearFlashes('schedules');
+        getServerSchedule(uuid, Number(scheduleId))
+            .then(schedule => appendSchedule(schedule))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ error, key: 'schedules' });
+            })
+            .then(() => setIsLoading(false));
+    }, [ scheduleId ]);
+
+    const toggleEditModal = useCallback(() => {
+        setShowEditModal(s => !s);
+    }, []);
+
+    return (
+        <PageContentBlock title={'Schedules'}>
+            <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
+            {!schedule || isLoading ?
+                <Spinner size={'large'} centered/>
+                :
+                <>
+                    <ScheduleCronRow cron={schedule.cron} css={tw`sm:hidden bg-neutral-700 rounded mb-4 p-3`}/>
+                    <div css={tw`rounded shadow`}>
+                        <div css={tw`sm:flex items-center bg-neutral-900 p-3 sm:p-6 border-b-4 border-neutral-600 rounded-t`}>
+                            <div css={tw`flex-1`}>
+                                <h3 css={tw`flex items-center text-neutral-100 text-2xl`}>
+                                    {schedule.name}
+                                    {schedule.isProcessing ?
+                                        <span
+                                            css={tw`flex items-center rounded-full px-2 py-px text-xs ml-4 uppercase bg-neutral-600 text-white`}
+                                        >
+                                            <Spinner css={tw`w-3! h-3! mr-2`}/>
+                                            {lang.processing}
+                                        </span>
+                                        :
+                                        <ActivePill active={schedule.isActive}/>
+                                    }
+                                </h3>
+                                <p css={tw`mt-1 text-sm text-neutral-200`}>
+                                    {lang.last_run_at}:&nbsp;
+                                    {schedule.lastRunAt ?
+                                        format(schedule.lastRunAt, 'MMM do \'at\' h:mma')
+                                        :
+                                        <span css={tw`text-neutral-300`}>n/a</span>
+                                    }
+                                    <span css={tw`ml-4 pl-4 border-l-4 border-neutral-600 py-px`}>
+                                        {lang.next_run_at}:&nbsp;
+                                        {schedule.nextRunAt ?
+                                            format(schedule.nextRunAt, 'MMM do \'at\' h:mma')
+                                            :
+                                            <span css={tw`text-neutral-300`}>n/a</span>
+                                        }
+                                    </span>
+                                </p>
+                            </div>
+                            <div css={tw`flex sm:block mt-3 sm:mt-0`}>
+                                <Can action={'schedule.update'}>
+                                    <Button
+                                        isSecondary
+                                        color={'grey'}
+                                        size={'small'}
+                                        css={tw`flex-1 mr-4 border-transparent`}
+                                        onClick={toggleEditModal}
+                                    >
+                                        {lang.edit}
+                                    </Button>
+                                    <NewTaskButton schedule={schedule}/>
+                                </Can>
+                            </div>
+                        </div>
+                        <div css={tw`hidden sm:grid grid-cols-5 md:grid-cols-5 gap-4 mb-4 mt-4`}>
+                            <CronBox title={lang.minute} value={schedule.cron.minute}/>
+                            <CronBox title={lang.hour} value={schedule.cron.hour}/>
+                            <CronBox title={lang.day_month} value={schedule.cron.dayOfMonth}/>
+                            <CronBox title={lang.month} value={schedule.cron.month}/>
+                            <CronBox title={lang.day_week} value={schedule.cron.dayOfWeek}/>
+                        </div>
+                        <div css={tw`bg-neutral-700 rounded-b`}>
+                            {schedule.tasks.length > 0 ?
+                                schedule.tasks.map(task => (
+                                    <ScheduleTaskRow key={`${schedule.id}_${task.id}`} task={task} schedule={schedule}/>
+                                ))
+                                :
+                                null
+                            }
+                        </div>
+                    </div>
+                    <EditScheduleModal visible={showEditModal} schedule={schedule} onModalDismissed={toggleEditModal}/>
+                    <div css={tw`mt-6 flex sm:justify-end`}>
+                        <Can action={'schedule.delete'}>
+                            <DeleteScheduleButton
+                                scheduleId={schedule.id}
+                                onDeleted={() => history.push(`/server/${id}/schedules`)}
+                            />
+                        </Can>
+                        {schedule.tasks.length > 0 &&
+                        <Can action={'schedule.update'}>
+                            <RunScheduleButton schedule={schedule}/>
+                        </Can>
+                        }
+                    </div>
+                </>
+            }
+        </PageContentBlock>
+    );
+};
diff --git a/resources/scripts/components/server/schedules/ScheduleRow.tsx b/resources/scripts/components/server/schedules/ScheduleRow.tsx
new file mode 100644
index 0000000..4deea98
--- /dev/null
+++ b/resources/scripts/components/server/schedules/ScheduleRow.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import { format } from 'date-fns';
+import tw from 'twin.macro';
+import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow';
+import lang from '../../../../../lang.json';
+
+export default ({ schedule }: { schedule: Schedule }) => (
+    <>
+        <div css={tw`hidden md:block`}>
+            <FontAwesomeIcon icon={faCalendarAlt} fixedWidth/>
+        </div>
+        <div css={tw`flex-1 md:ml-4`}>
+            <p>{schedule.name}</p>
+            <p css={tw`text-xs text-neutral-400`}>
+                {lang.last_run_at}: {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM do \'at\' h:mma') : 'never'}
+            </p>
+        </div>
+        <div>
+            <p
+                css={[
+                    tw`py-1 px-3 rounded text-xs uppercase text-white sm:hidden`,
+                    schedule.isActive ? tw`bg-green-600` : tw`bg-neutral-400`,
+                ]}
+            >
+                {schedule.isActive ? lang.active : lang.inactive}
+            </p>
+        </div>
+        <ScheduleCronRow cron={schedule.cron} css={tw`mx-auto sm:mx-8 w-full sm:w-auto mt-4 sm:mt-0`}/>
+        <div>
+            <p
+                css={[
+                    tw`py-1 px-3 rounded text-xs uppercase text-white hidden sm:block`,
+                    schedule.isActive && !schedule.isProcessing ? tw`bg-green-600` : tw`bg-neutral-400`,
+                ]}
+            >
+                {schedule.isProcessing ?
+                    lang.processing
+                    :
+                    schedule.isActive ? lang.active : lang.inactive
+                }
+            </p>
+        </div>
+    </>
+);
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
new file mode 100644
index 0000000..fc57db6
--- /dev/null
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+    faArrowCircleDown,
+    faClock,
+    faCode,
+    faFileArchive,
+    faPencilAlt,
+    faToggleOn,
+    faTrashAlt,
+} from '@fortawesome/free-solid-svg-icons';
+import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
+import { httpErrorToHuman } from '@/api/http';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
+import Can from '@/components/elements/Can';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import tw from 'twin.macro';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import Icon from '@/components/elements/Icon';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    schedule: Schedule;
+    task: Task;
+}
+
+const getActionDetails = (action: string): [ string, any ] => {
+    switch (action) {
+        case 'command':
+            return [ lang.send_command, faCode ];
+        case 'power':
+            return [ lang.send_power_action, faToggleOn ];
+        case 'backup':
+            return [ lang.create_backup, faFileArchive ];
+        default:
+            return [ lang.unknown_action, faCode ];
+    }
+};
+
+export default ({ schedule, task }: Props) => {
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { clearFlashes, addError } = useFlash();
+    const [ visible, setVisible ] = useState(false);
+    const [ isLoading, setIsLoading ] = useState(false);
+    const [ isEditing, setIsEditing ] = useState(false);
+    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+
+    const onConfirmDeletion = () => {
+        setIsLoading(true);
+        clearFlashes('schedules');
+        deleteScheduleTask(uuid, schedule.id, task.id)
+            .then(() => appendSchedule({
+                ...schedule,
+                tasks: schedule.tasks.filter(t => t.id !== task.id),
+            }))
+            .catch(error => {
+                console.error(error);
+                setIsLoading(false);
+                addError({ message: httpErrorToHuman(error), key: 'schedules' });
+            });
+    };
+
+    const [ title, icon ] = getActionDetails(task.action);
+
+    return (
+        <div css={tw`sm:flex items-center p-3 sm:p-6 border-b border-neutral-800`}>
+            <SpinnerOverlay visible={isLoading} fixed size={'large'}/>
+            <TaskDetailsModal
+                schedule={schedule}
+                task={task}
+                visible={isEditing}
+                onModalDismissed={() => setIsEditing(false)}
+            />
+            <ConfirmationModal
+                title={lang.confirm_task_deletion}
+                buttonText={lang.delete_task}
+                onConfirmed={onConfirmDeletion}
+                visible={visible}
+                onModalDismissed={() => setVisible(false)}
+            >
+                {lang.u_sure_u_wanna_delet_this_task}
+            </ConfirmationModal>
+            <FontAwesomeIcon icon={icon} css={tw`text-lg text-white hidden md:block`}/>
+            <div css={tw`flex-none sm:flex-1 w-full sm:w-auto overflow-x-auto`}>
+                <p css={tw`md:ml-6 text-neutral-200 uppercase text-sm`}>
+                    {title}
+                </p>
+                {task.payload &&
+                <div css={tw`md:ml-6 mt-2`}>
+                    {task.action === 'backup' &&
+                    <p css={tw`text-xs uppercase text-neutral-400 mb-1`}>{lang.ignoring_files_and_folders}</p>}
+                    <div css={tw`font-mono bg-neutral-800 rounded py-1 px-2 text-sm w-auto inline-block whitespace-pre-wrap break-all`}>
+                        {task.payload}
+                    </div>
+                </div>
+                }
+            </div>
+            <div css={tw`mt-3 sm:mt-0 flex items-center w-full sm:w-auto`}>
+                {task.continueOnFailure &&
+                <div css={tw`mr-6`}>
+                    <div css={tw`flex items-center px-2 py-1 bg-yellow-500 text-yellow-800 text-sm rounded-full`}>
+                        <Icon icon={faArrowCircleDown} css={tw`w-3 h-3 mr-2`}/>
+                        {lang.continue_on_failure}
+                    </div>
+                </div>
+                }
+                {task.sequenceId > 1 && task.timeOffset > 0 &&
+                <div css={tw`mr-6`}>
+                    <div css={tw`flex items-center px-2 py-1 bg-neutral-500 text-sm rounded-full`}>
+                        <Icon icon={faClock} css={tw`w-3 h-3 mr-2`}/>
+                        {task.timeOffset}s {lang.later}
+                    </div>
+                </div>
+                }
+                <Can action={'schedule.update'}>
+                    <button
+                        type={'button'}
+                        aria-label={'Edit scheduled task'}
+                        css={tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4 ml-auto sm:ml-0`}
+                        onClick={() => setIsEditing(true)}
+                    >
+                        <FontAwesomeIcon icon={faPencilAlt}/>
+                    </button>
+                </Can>
+                <Can action={'schedule.update'}>
+                    <button
+                        type={'button'}
+                        aria-label={'Delete scheduled task'}
+                        css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
+                        onClick={() => setVisible(true)}
+                    >
+                        <FontAwesomeIcon icon={faTrashAlt}/>
+                    </button>
+                </Can>
+            </div>
+        </div>
+    );
+};
diff --git a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
new file mode 100644
index 0000000..66538ff
--- /dev/null
+++ b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
@@ -0,0 +1,191 @@
+import React, { useContext, useEffect } from 'react';
+import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
+import { Field as FormikField, Form, Formik, FormikHelpers, useField } from 'formik';
+import { ServerContext } from '@/state/server';
+import createOrUpdateScheduleTask from '@/api/server/schedules/createOrUpdateScheduleTask';
+import { httpErrorToHuman } from '@/api/http';
+import Field from '@/components/elements/Field';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { boolean, number, object, string } from 'yup';
+import useFlash from '@/plugins/useFlash';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import tw from 'twin.macro';
+import Label from '@/components/elements/Label';
+import { Textarea } from '@/components/elements/Input';
+import Button from '@/components/elements/Button';
+import Select from '@/components/elements/Select';
+import ModalContext from '@/context/ModalContext';
+import asModal from '@/hoc/asModal';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import lang from '../../../../../lang.json';
+
+interface Props {
+    schedule: Schedule;
+    // If a task is provided we can assume we're editing it. If not provided,
+    // we are creating a new one.
+    task?: Task;
+}
+
+interface Values {
+    action: string;
+    payload: string;
+    timeOffset: string;
+    continueOnFailure: boolean;
+}
+
+const schema = object().shape({
+    action: string().required().oneOf([ 'command', 'power', 'backup' ]),
+    payload: string().when('action', {
+        is: v => v !== 'backup',
+        then: string().required('A task payload must be provided.'),
+        otherwise: string(),
+    }),
+    continueOnFailure: boolean(),
+    timeOffset: number().typeError('The time offset must be a valid number between 0 and 900.')
+        .required('A time offset value must be provided.')
+        .min(0, 'The time offset must be at least 0 seconds.')
+        .max(900, 'The time offset must be less than 900 seconds.'),
+});
+
+const ActionListener = () => {
+    const [ { value }, { initialValue: initialAction } ] = useField<string>('action');
+    const [ , { initialValue: initialPayload }, { setValue, setTouched } ] = useField<string>('payload');
+
+    useEffect(() => {
+        if (value !== initialAction) {
+            setValue(value === 'power' ? 'start' : '');
+            setTouched(false);
+        } else {
+            setValue(initialPayload || '');
+            setTouched(false);
+        }
+    }, [ value ]);
+
+    return null;
+};
+
+const TaskDetailsModal = ({ schedule, task }: Props) => {
+    const { dismiss } = useContext(ModalContext);
+    const { clearFlashes, addError } = useFlash();
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
+    const backupLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.backups);
+
+    useEffect(() => {
+        return () => {
+            clearFlashes('schedule:task');
+        };
+    }, []);
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('schedule:task');
+        if (backupLimit === 0 && values.action === 'backup') {
+            setSubmitting(false);
+            addError({ message: 'A backup task cannot be created when the server\'s backup limit is set to 0.', key: 'schedule:task' });
+        } else {
+            createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values)
+                .then(task => {
+                    let tasks = schedule.tasks.map(t => t.id === task.id ? task : t);
+                    if (!schedule.tasks.find(t => t.id === task.id)) {
+                        tasks = [ ...tasks, task ];
+                    }
+
+                    appendSchedule({ ...schedule, tasks });
+                    dismiss();
+                })
+                .catch(error => {
+                    console.error(error);
+                    setSubmitting(false);
+                    addError({ message: httpErrorToHuman(error), key: 'schedule:task' });
+                });
+        }
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            validationSchema={schema}
+            initialValues={{
+                action: task?.action || 'command',
+                payload: task?.payload || '',
+                timeOffset: task?.timeOffset.toString() || '0',
+                continueOnFailure: task?.continueOnFailure || false,
+            }}
+        >
+            {({ isSubmitting, values }) => (
+                <Form css={tw`m-0`}>
+                    <FlashMessageRender byKey={'schedule:task'} css={tw`mb-4`}/>
+                    <h2 css={tw`text-2xl mb-6`}>{task ? lang.edit_task : lang.create_task}</h2>
+                    <div css={tw`flex`}>
+                        <div css={tw`mr-2 w-1/3`}>
+                            <Label>{lang.action}</Label>
+                            <ActionListener/>
+                            <FormikFieldWrapper name={'action'}>
+                                <FormikField as={Select} name={'action'}>
+                                    <option value={'command'}>{lang.send_command}</option>
+                                    <option value={'power'}>{lang.send_power_action}</option>
+                                    <option value={'backup'}>{lang.create_backup}</option>
+                                </FormikField>
+                            </FormikFieldWrapper>
+                        </div>
+                        <div css={tw`flex-1 ml-6`}>
+                            <Field
+                                name={'timeOffset'}
+                                label={lang.time_offset}
+                                description={lang.time_offset_desc}
+                            />
+                        </div>
+                    </div>
+                    <div css={tw`mt-6`}>
+                        {values.action === 'command' ?
+                            <div>
+                                <Label>{lang.payload}</Label>
+                                <FormikFieldWrapper name={'payload'}>
+                                    <FormikField as={Textarea} name={'payload'} rows={6}/>
+                                </FormikFieldWrapper>
+                            </div>
+                            :
+                            values.action === 'power' ?
+                                <div>
+                                    <Label>{lang.payload}</Label>
+                                    <FormikFieldWrapper name={'payload'}>
+                                        <FormikField as={Select} name={'payload'}>
+                                            <option value={'start'}>{lang.start_the_server}</option>
+                                            <option value={'restart'}>{lang.restart_the_server}</option>
+                                            <option value={'stop'}>{lang.stop_the_server}</option>
+                                            <option value={'kill'}>{lang.terminate_the_server}</option>
+                                        </FormikField>
+                                    </FormikFieldWrapper>
+                                </div>
+                                :
+                                <div>
+                                    <Label>{lang.ignored_files}</Label>
+                                    <FormikFieldWrapper
+                                        name={'payload'}
+                                        description={lang.optional_backup_schedule_desc_thing}
+                                    >
+                                        <FormikField as={Textarea} name={'payload'} rows={6}/>
+                                    </FormikFieldWrapper>
+                                </div>
+                        }
+                    </div>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <FormikSwitch
+                            name={'continueOnFailure'}
+                            description={lang.future_tasks_will_run}
+                            label={lang.continue_on_failure}
+                        />
+                    </div>
+                    <div css={tw`flex justify-end mt-6`}>
+                        <Button type={'submit'} disabled={isSubmitting}>
+                            {task ? lang.save_changes : lang.create_task}
+                        </Button>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};
+
+export default asModal<Props>()(TaskDetailsModal);