diff --git a/client/src/pages/presentationEditor/components/SlideEditor.tsx b/client/src/pages/presentationEditor/components/SlideEditor.tsx
index 9baa97918f2b11276bd12bf17ba8fc4f466cf9b2..a71b9262727741ea7fd29e703374c913f0d8dbb3 100644
--- a/client/src/pages/presentationEditor/components/SlideEditor.tsx
+++ b/client/src/pages/presentationEditor/components/SlideEditor.tsx
@@ -4,7 +4,7 @@ import { useAppSelector } from '../../../hooks'
 import { ImageComponent, TextComponent } from '../../../interfaces/ApiModels'
 import CheckboxComponent from './CheckboxComponent'
 import ImageComponentDisplay from './ImageComponentDisplay'
-import { SlideEditorContainer } from './styled'
+import { SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
 import TextComponentDisplay from './TextComponentDisplay'
 
 const SlideEditor: React.FC = () => {
@@ -14,19 +14,23 @@ const SlideEditor: React.FC = () => {
   )
   return (
     <SlideEditorContainer>
-      {components &&
-        components.map((component) => {
-          switch (component.type_id) {
-            case ComponentTypes.Checkbox:
-              return <CheckboxComponent key={component.id} component={component} />
-            case ComponentTypes.Text:
-              return <TextComponentDisplay key={component.id} component={component as TextComponent} />
-            case ComponentTypes.Image:
-              return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
-            default:
-              break
-          }
-        })}
+      <SlideEditorContainerRatio>
+        <SlideEditorPaper>
+          {components &&
+            components.map((component) => {
+              switch (component.type_id) {
+                case ComponentTypes.Checkbox:
+                  return <CheckboxComponent key={component.id} component={component} />
+                case ComponentTypes.Text:
+                  return <TextComponentDisplay key={component.id} component={component as TextComponent} />
+                case ComponentTypes.Image:
+                  return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
+                default:
+                  break
+              }
+            })}
+        </SlideEditorPaper>
+      </SlideEditorContainerRatio>
     </SlideEditorContainer>
   )
 }
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
index c4584f87468ceea090ecabca872e8000d3b58988..d91e1db6f58216b26f56cc153f958afec360c7eb 100644
--- a/client/src/pages/presentationEditor/components/styled.tsx
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -7,11 +7,29 @@ export const SettingsTab = styled(Tab)`
 `
 
 export const SlideEditorContainer = styled.div`
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: rgba(0, 0, 0, 0.08);
+`
+
+export const SlideEditorContainerRatio = styled.div`
+  padding-top: 56.25%;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+`
+
+export const SlideEditorPaper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  background: white;
 `
 
 export const HiddenInput = styled.input`