diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0481b633..f37aa757 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ## Added
 
 - 🤡(demo) generate dummy documents on dev users #120 
+- ✨(frontend) create side modal component #134
 
 ## Changed
 
diff --git a/src/frontend/apps/impress/src/components/SideModal.tsx b/src/frontend/apps/impress/src/components/SideModal.tsx
new file mode 100644
index 00000000..217088e3
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/SideModal.tsx
@@ -0,0 +1,44 @@
+import { Modal, ModalSize } from '@openfun/cunningham-react';
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+interface SideModalStyleProps {
+  side: 'left' | 'right';
+  width: string;
+}
+
+const SideModalStyle = createGlobalStyle<SideModalStyleProps>`
+  & .c__modal{
+    width: ${({ width }) => width};
+    ${({ side }) => side === 'right' && 'left: auto;'};
+    
+    .c__modal__scroller {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`;
+
+type SideModalType = Omit<ComponentPropsWithRef<typeof Modal>, 'size'>;
+
+interface SideModalProps extends SideModalType {
+  side: 'left' | 'right';
+  width: string;
+}
+
+export const SideModal = ({
+  children,
+  side,
+  width,
+  ...modalProps
+}: PropsWithChildren<SideModalProps>) => {
+  return (
+    <>
+      <SideModalStyle width={width} side={side} />
+      <Modal {...modalProps} size={ModalSize.FULL}>
+        {children}
+      </Modal>
+    </>
+  );
+};