diff --git a/demo/index.tsx b/demo/index.tsx
index 5bf9dc6..9064c74 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -19,7 +19,7 @@ function App() {
           rel='noopener noreferrer'
           href='https://github.com/ahmedalatawi/react-beautiful-schedule/tree/main/demo'
         >
-          demo source code
+          source code
         </a>
       </TitleContainer>
       <WeeklyScheduleDemo showDateNavigator showFooter className='demo-schedule' events={eventsData} />
@@ -30,8 +30,7 @@ function App() {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 20px;
+  padding-top: 20px;
 `
 
 const Title = styled.h1`
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index fd6b38a..6107267 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -36,7 +36,7 @@ function DateNavigator({ date, onSelectDate, disablePrev, disableNext, ...props
     <Container className='date-navigator' {...props}>
       <Prev onClick={handlePrev} className='date-navigator-prev' disabled={disablePrev} />
       <DateContainer className='date-navigator-date'>
-        <span>{startDate.toLocaleString()}</span> - <span>{endDate.toLocaleString()}</span>
+        <span>{startDate.toFormat('MMM dd')}</span>-<span>{endDate.toFormat('dd, yyyy')}</span>
       </DateContainer>
       <Next onClick={handleNext} className='date-navigator-next' disabled={disableNext} />
     </Container>
@@ -58,7 +58,7 @@ const DateContainer = styled.div`
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
 `
 
 const Next = styled.div<{ disabled?: boolean }>`