diff --git a/client/src/pages/presentationEditor/components/SlideDisplay.tsx b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
index 8326bf86a4a381dbe6b680d2f85c9b2fa235c7ed..da5bb92fa481c7d0e07cec900f57525d72e863f2 100644
--- a/client/src/pages/presentationEditor/components/SlideDisplay.tsx
+++ b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks'
 import PresentationComponent from '../../views/components/PresentationComponent'
 import Timer from '../../views/components/Timer'
 import RndComponent from './RndComponent'
-import { Center, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
+import { Center, SlideDisplayText, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
 
 type SlideDisplayProps = {
   //Prop to distinguish between editor and active competition
@@ -59,13 +59,13 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
     <SlideEditorContainer>
       <SlideEditorContainerRatio>
         <SlideEditorPaper ref={editorPaperRef}>
-          <Typography variant="h3" style={{ position: 'absolute', left: 5, top: 5 }}>
-            {variant === 'editor' && `Tid kvar: ${slide?.timer}`}
+          <SlideDisplayText scale={scale}>
+            {variant === 'editor' && slide?.timer ? `Tid kvar: ${slide?.timer}` : ''}
             {variant === 'presentation' && <Timer />}
-          </Typography>
-          <Typography variant="h3" style={{ position: 'absolute', right: 5, top: 5 }}>
+          </SlideDisplayText>
+          <SlideDisplayText scale={scale} right>
             {slide && `Sida: ${slide?.order + 1} / ${totalSlides}`}
-          </Typography>
+          </SlideDisplayText>
           {(competitionBackgroundImage || slideBackgroundImage) && (
             <img
               src={`/static/images/${
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
index c214a7ce1cdf896d0219e8794f87fb79b641bb6f..e46fc8b9d8d8f3ce6ef370a043f99f2aeb735379 100644
--- a/client/src/pages/presentationEditor/components/styled.tsx
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -145,3 +145,16 @@ export const QuestionComponent = styled.div`
 export const SettingsItemContainer = styled.div`
   padding: 5px;
 `
+
+interface SlideDisplayTextProps {
+  scale: number
+  right?: boolean
+}
+
+export const SlideDisplayText = styled(Typography)<SlideDisplayTextProps>`
+  position: absolute;
+  top: 5px;
+  left: ${(props) => (props.right ? undefined : 5)}px;
+  right: ${(props) => (props.right ? 5 : undefined)}px;
+  font-size: ${(props) => 24 * props.scale}px;
+`