diff --git a/src/App.tsx b/src/App.tsx
index a25ac0a..ec2b9fa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const App = () => {
   return <h1>Univent Planner</h1>;
 };
diff --git a/src/calendarView/calendarView.tsx b/src/calendarView/calendarView.tsx
new file mode 100644
index 0000000..764d953
--- /dev/null
+++ b/src/calendarView/calendarView.tsx
@@ -0,0 +1,13 @@
+import { Wrapper, AddButton, Calendar } from './calendarViewStyles';
+
+export const CalendarView = () => {
+  return (
+    <Wrapper>
+      {/* temporary calendar component */}
+      <Calendar>calendar</Calendar>
+
+      <AddButton variant="contained">+ Dodaj wydarzenie dla siebie</AddButton>
+      <AddButton variant="contained">+ Dodaj wydarzenie dla grupy</AddButton>
+    </Wrapper>
+  );
+};
diff --git a/src/calendarView/calendarViewStyles.ts b/src/calendarView/calendarViewStyles.ts
new file mode 100644
index 0000000..6e78b99
--- /dev/null
+++ b/src/calendarView/calendarViewStyles.ts
@@ -0,0 +1,49 @@
+import { styled } from '@mui/material';
+import { Box, Button } from '@mui/material';
+
+export const Wrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 32px;
+  box-sizing: border-box;
+  position: relative;
+  @media (max-width: 600px) {
+    padding: 16px;
+  }
+`;
+
+export const Calendar = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  padding: 16px;
+  border-style: solid;
+  border-color: black;
+  margin-bottom: 15px;
+  @media (max-width: 600px) {
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+`;
+
+export const AddButton = styled(Button)`
+  background-color: #f13d42;
+  color: white;
+  &:hover {
+    background-color: #f13d42;
+  }
+  margin: 10px 0 15px;
+  padding: 16px 0;
+  font-size: 18px;
+  border-radius: 8px;
+  width: 100%;
+  @media (max-width: 600px) {
+    margin: 5px 0 10px;
+    padding: 12px 0;
+    font-size: 16px;
+  }
+`;