diff --git a/frontend/src/components/FacilityBooking/BlockStyles.styled.ts b/frontend/src/components/FacilityBooking/BlockStyles.styled.ts
index 83b36af4f..6a6305f5e 100644
--- a/frontend/src/components/FacilityBooking/BlockStyles.styled.ts
+++ b/frontend/src/components/FacilityBooking/BlockStyles.styled.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 import { TimeBlockType } from '../../store/facilityBooking/types'
 
-export const BLOCK_HEIGHT = 90
+export const BLOCK_HEIGHT = 40
 export const TOP_DISTANCE = 10
 export const BLOCK_GAP = 5
 
@@ -10,10 +10,12 @@ export const DailyContainer = styled.div`
   flex-direction: column;
   padding: ${TOP_DISTANCE}px 5px;
   gap: ${BLOCK_GAP}px;
+  overflow: hidden;
 `
 
 const blockStyles = css`
   position: relative;
+  align-items: center;
   border-radius: 10px;
   padding: 10px 15px;
   color: #000;
diff --git a/frontend/src/components/FacilityBooking/ViewBlock.tsx b/frontend/src/components/FacilityBooking/ViewBlock.tsx
index 39f32f196..733656139 100644
--- a/frontend/src/components/FacilityBooking/ViewBlock.tsx
+++ b/frontend/src/components/FacilityBooking/ViewBlock.tsx
@@ -1,10 +1,18 @@
 import React, { useEffect, useRef } from 'react'
+import styled from 'styled-components'
 
 import { TimeBlock } from '../../store/facilityBooking/types'
 import { scrollToView } from './CurrentTimeLine'
 
 import { StyledViewBooking } from './BlockStyles.styled'
 
+const StyledBookingInfo = styled.span`
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
 type Props = {
   entry: TimeBlock
   scrollTo?: boolean
@@ -65,9 +73,9 @@ const ViewBlock = (props: Props) => {
         props.setViewBookingEntryId()
       }}
     >
-      {props.entry.ccaName}
-      <br />
-      {props.entry.eventName}
+      <StyledBookingInfo>
+        {props.entry.ccaName} - {props.entry.eventName}
+      </StyledBookingInfo>
     </StyledViewBooking>
   ) : (
     <StyledViewBooking ref={ref} isOccupied={false} blockId={props.entry.id} />