diff --git a/packages/page-calendar/src/DayHour.tsx b/packages/page-calendar/src/DayHour.tsx
index 6869c1f214..01afc478bf 100644
--- a/packages/page-calendar/src/DayHour.tsx
+++ b/packages/page-calendar/src/DayHour.tsx
@@ -1,6 +1,7 @@
 // Copyright 2017-2020 @polkadot/app-calendar authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ThemeProps } from '@polkadot/react-components/types';
 import type { EntryInfoTyped } from './types';
 
 import React, { useMemo } from 'react';
@@ -53,18 +54,14 @@ function DayHour ({ className = '', date, hour, index, minutes, scheduled }: Pro
   );
 }
 
-export default React.memo(styled(DayHour)`
+export default React.memo(styled(DayHour)(({ theme }: ThemeProps) => `
   align-items: center;
   display: flex;
   position: relative;
   z-index: 2;
 
-  // &:nth-child(even) {
-  //   background: #faf8f6;
-  // }
-
   &:nth-child(odd) {
-    background: white;
+    background: ${theme.bgTable};
   }
 
   &.isPast {
@@ -95,4 +92,4 @@ export default React.memo(styled(DayHour)`
     opacity: 1;
     padding: 0.7rem 1rem;
   }
-`);
+`));