diff --git a/src/App.tsx b/src/App.tsx
index 29099df..a3e2871 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,5 @@
 import { useState } from 'react'
-import { Grid, Paper, Typography } from '@mui/material'
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded'
-import WaterDropRoundedIcon from '@mui/icons-material/WaterDropRounded'
+import { Paper } from '@mui/material'
 import useIrrigationEvents from './hooks/useIrrigationEvents'
 import { Resource, ViewState } from '@devexpress/dx-react-scheduler'
 import {
@@ -18,6 +16,8 @@ import {
   CurrentTimeIndicator,
 } from '@devexpress/dx-react-scheduler-material-ui'
 import { startOfWeek, endOfWeek, startOfDay, endOfDay } from 'date-fns'
+import AppointmentWithIcon from './components/AppointmentWithIcon'
+import AppointmentTooltipWithIcon from './components/AppointmentTooltipWithIcon'
 
 const refreshIntervalMinutes = import.meta.env.VITE_REFRESH_INTERVAL_MINUTES as number
 
@@ -59,54 +59,8 @@ const resources: Resource[] = [
   },
 ]
 
-const AppointmentWithIcon = ({ children, data, ...restProps }: Appointments.AppointmentProps) => (
-  <Appointments.Appointment data={data} {...restProps}>
-    {data.warning && (
-      <WarningRoundedIcon fontSize="small" sx={{ color: 'text.secondary', margin: '2px' }} />
-    )}
-    {data.currentlyOn && (
-      <WaterDropRoundedIcon fontSize="small" sx={{ color: 'text.secondary', margin: '2px' }} />
-    )}
-    {children}
-  </Appointments.Appointment>
-)
-
-const AppointmentTooltipWithIcon = ({
-  children,
-  appointmentData,
-  ...restProps
-}: AppointmentTooltip.ContentProps) => (
-  <AppointmentTooltip.Content appointmentData={appointmentData} {...restProps}>
-    {children}
-    {appointmentData?.warning && (
-      <Grid container paddingTop={1}>
-        <Grid item xs={2} textAlign="center">
-          <WarningRoundedIcon color="error" />
-        </Grid>
-        <Grid item xs={10}>
-          <Typography variant="inherit" sx={{ color: 'text.secondary', fontWeight: 'bold' }}>
-            {appointmentData.warning}
-          </Typography>
-        </Grid>
-      </Grid>
-    )}
-    {appointmentData?.currentlyOn && (
-      <Grid container paddingTop={1}>
-        <Grid item xs={2} textAlign="center">
-          <WaterDropRoundedIcon color="success" />
-        </Grid>
-        <Grid item xs={10}>
-          <Typography variant="inherit" sx={{ color: 'text.secondary', fontWeight: 'bold' }}>
-            Device is currently on
-          </Typography>
-        </Grid>
-      </Grid>
-    )}
-  </AppointmentTooltip.Content>
-)
-
 function App() {
-  const [viewCurrentDate, setViewCurrentDate] = useState<Date>(new Date())
+  const [viewCurrentDate, setViewCurrentDate] = useState<Date>(() => new Date())
   const [currentViewName, setCurrentViewName] = useState<string>('Week')
   const { data: irrigationEvents } = useIrrigationEvents(
     getStartDate(viewCurrentDate, currentViewName),
diff --git a/src/components/AppointmentTooltipWithIcon.tsx b/src/components/AppointmentTooltipWithIcon.tsx
new file mode 100644
index 0000000..d95e05e
--- /dev/null
+++ b/src/components/AppointmentTooltipWithIcon.tsx
@@ -0,0 +1,40 @@
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded'
+import WaterDropRoundedIcon from '@mui/icons-material/WaterDropRounded'
+import { AppointmentTooltip } from '@devexpress/dx-react-scheduler-material-ui'
+import { Grid, Typography } from '@mui/material'
+
+export default function AppointmentTooltipWithIcon({
+  children,
+  appointmentData,
+  ...restProps
+}: AppointmentTooltip.ContentProps) {
+  return (
+    <AppointmentTooltip.Content appointmentData={appointmentData} {...restProps}>
+      {children}
+      {appointmentData?.warning && (
+        <Grid container paddingTop={1}>
+          <Grid item xs={2} textAlign="center">
+            <WarningRoundedIcon color="error" />
+          </Grid>
+          <Grid item xs={10}>
+            <Typography variant="inherit" sx={{ color: 'text.secondary', fontWeight: 'bold' }}>
+              {appointmentData.warning}
+            </Typography>
+          </Grid>
+        </Grid>
+      )}
+      {appointmentData?.currentlyOn && (
+        <Grid container paddingTop={1}>
+          <Grid item xs={2} textAlign="center">
+            <WaterDropRoundedIcon color="success" />
+          </Grid>
+          <Grid item xs={10}>
+            <Typography variant="inherit" sx={{ color: 'text.secondary', fontWeight: 'bold' }}>
+              Device is currently on
+            </Typography>
+          </Grid>
+        </Grid>
+      )}
+    </AppointmentTooltip.Content>
+  )
+}
diff --git a/src/components/AppointmentWithIcon.tsx b/src/components/AppointmentWithIcon.tsx
new file mode 100644
index 0000000..a584062
--- /dev/null
+++ b/src/components/AppointmentWithIcon.tsx
@@ -0,0 +1,21 @@
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded'
+import WaterDropRoundedIcon from '@mui/icons-material/WaterDropRounded'
+import { Appointments } from '@devexpress/dx-react-scheduler-material-ui'
+
+export default function AppointmentWithIcon({
+  children,
+  data,
+  ...restProps
+}: Appointments.AppointmentProps) {
+  return (
+    <Appointments.Appointment data={data} {...restProps}>
+      {data.warning && (
+        <WarningRoundedIcon fontSize="small" sx={{ color: 'text.secondary', margin: '2px' }} />
+      )}
+      {data.currentlyOn && (
+        <WaterDropRoundedIcon fontSize="small" sx={{ color: 'text.secondary', margin: '2px' }} />
+      )}
+      {children}
+    </Appointments.Appointment>
+  )
+}