diff --git a/package-lock.json b/package-lock.json
index e7e54e9..8ff59d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1101,6 +1101,11 @@
       "resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
       "integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
     },
+    "@devexpress/dx-grid-core": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@devexpress/dx-grid-core/-/dx-grid-core-2.6.3.tgz",
+      "integrity": "sha512-hYgBM/vv70gjIpuHzS80CagzDenoT20ddIcFOLJQinsAk3mdFJr/fkJAMB819wop225S0Rtb+Z157EGNgMCAXA=="
+    },
     "@devexpress/dx-react-core": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
@@ -1110,6 +1115,23 @@
         "prop-types": "^15.7.2"
       }
     },
+    "@devexpress/dx-react-grid": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid/-/dx-react-grid-2.6.3.tgz",
+      "integrity": "sha512-s2RMhn6Ctbe/Tp066sWgscC2eZVTTQfKs2VOR/p9gD1vMIQFPGUkSS/XyDwMPb5MD7DRvFYJ2U8oQryobB2yoQ==",
+      "requires": {
+        "@devexpress/dx-grid-core": "2.6.3"
+      }
+    },
+    "@devexpress/dx-react-grid-material-ui": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid-material-ui/-/dx-react-grid-material-ui-2.6.3.tgz",
+      "integrity": "sha512-7tVQVrbGQNrkbOOF/xd8mTk7vAsDwQ8URRvRJGILthcnewPCJZqzmjsMV4GRQ1bEAQKAiCnRDbPunvR4vW0GEw==",
+      "requires": {
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@devexpress/dx-react-scheduler": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",
diff --git a/package.json b/package.json
index 7bb8896..db22b16 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,10 @@
   "private": true,
   "dependencies": {
     "-": "0.0.1",
+    "@devexpress/dx-grid-core": "^2.6.3",
     "@devexpress/dx-react-core": "^2.6.3",
+    "@devexpress/dx-react-grid": "^2.6.3",
+    "@devexpress/dx-react-grid-material-ui": "^2.6.3",
     "@devexpress/dx-react-scheduler": "^2.6.3",
     "@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
     "@material-ui/core": "^4.10.0",
diff --git a/src/App.tsx b/src/App.tsx
index bf12808..9becd7f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,45 +2,42 @@ import React, { useState } from "react";
 import TopBar from "./components/TopBar/";
 import Transfer from "./components/Transfer/";
 import "./App.scss";
-import Schedule from "./components/Calendar/";
+import Calendar from "./components/Calendar";
 import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
-
 function App() {
-  const [isOpenTransfer, setOpenTransfer] = useState(false);
-  const [text, setText] = useState("");
+	const [isOpenTransfer, setOpenTransfer] = useState(false);
+	const [text, setText] = useState("");
 
-  return (
-    <div className="App">
-      <TopBar
-        textChangeHandler={(e) => {
-          setText(e.target.value);
-        }}
-        handleTransfer={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-        onLangChange={(e) => {
-          console.log(e);
-        }}
-      />
-      <Transfer
-        isOpen={isOpenTransfer}
-        handleClose={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-      />
-      <div className="wraper">
-        <div className="wraper__calendar">
-          <Schedule data={appointments} />
-        </div>
-        <div className="wraper__rightbar">
-          <RightBar />
-        </div>
-      </div>
-
-      <h1>{text}</h1>
-    </div>
-  );
+	return (
+		<div className="App">
+			<TopBar
+				textChangeHandler={(e) => {
+					setText(e.target.value);
+				}}
+				handleTransfer={() => {
+					setOpenTransfer(!isOpenTransfer);
+				}}
+				onLangChange={() => {
+					console.log("Language has been changed");
+				}}
+			/>
+			<Transfer
+				isOpen={isOpenTransfer}
+				handleClose={() => {
+					setOpenTransfer(!isOpenTransfer);
+				}}
+			/>
+			<div className="wraper">
+				<div className="wraper__calendar">
+					<Calendar data={appointments} />
+				</div>
+				<div className="wraper__rightbar">
+					<RightBar />
+				</div>
+			</div>
+		</div>
+	);
 }
 
 export default App;
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index 33d3ba3..deb1dd2 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -1,127 +1,87 @@
 import * as React from "react";
 import { ViewState } from "@devexpress/dx-react-scheduler";
 import { AppointmentModel } from "@devexpress/dx-react-scheduler";
-import {
-  Scheduler,
-  WeekView,
-  Appointments,
-  AppointmentTooltip,
-} from "@devexpress/dx-react-scheduler-material-ui";
+import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
 import moment from "moment";
 import "moment/locale/pl";
 import "./index.scss";
-import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import { makeStyles, createStyles } from "@material-ui/core/styles";
 
 interface CalendarProps {
-  data: Array<AppointmentModel>;
+	data: Array<AppointmentModel>;
 }
 
 interface CalendarState {
-  currentDate: Date;
+	currentDate: Date;
 }
 
-const formatDayScaleDate = (
-  date: moment.MomentInput,
-  options: { weekday: any }
-) => {
-  const momentDate = moment(date).locale("pl");
-  const { weekday } = options;
-  return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
+const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
+	const momentDate = moment(date).locale("pl");
+	return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    dayScaleCell: {
-      paddingTop: 10,
-      paddingBottom: 10,
-    },
-    timeTableLayout: {
-      border: "1px solid rgba(224, 224, 224, 1);",
-      borderCollapse: "separate",
-    },
-    timeTableCell: {
-      //borderRadius: 15,
-    },
-    appointmentLayer: {
-      borderRadius: 15,
-      marginLeft: 5,
-      textAlign: "center",
-    },
-  })
+const useStyles = makeStyles(() =>
+	createStyles({
+		dayScaleCell: {
+			paddingTop: 10,
+			paddingBottom: 10,
+		},
+		timeTableLayout: {
+			border: "1px solid rgba(224, 224, 224, 1);",
+			borderCollapse: "separate",
+		},
+		appointmentLayer: {
+			borderRadius: 15,
+			marginLeft: 5,
+			textAlign: "center",
+		},
+	})
 );
 
-//don't know how to set proper type of function arguments
-const DayScaleCell = ({ formatDate, ...restProps }: any) => {
-  const classes = useStyles();
-  return (
-    <WeekView.DayScaleCell
-      {...restProps}
-      formatDate={formatDayScaleDate}
-      today={false}
-      className={classes.dayScaleCell}
-    />
-  );
+const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
+	const classes = useStyles();
+	return (
+		<WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
+	);
 };
 
-const TimeTableCell = ({ ...restProps }: any) => {
-  const classes = useStyles();
-  return (
-    <WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
-  );
+const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
+	const classes = useStyles();
+	return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
 };
 
-const TimeTableLayout = ({ ...restProps }: any) => {
-  const classes = useStyles();
-  return (
-    <WeekView.TimeTableLayout
-      {...restProps}
-      className={classes.timeTableLayout}
-    />
-  );
+const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
+	const classes = useStyles();
+	return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
 };
 
-const Appointment = ({ ...restProps }: any) => {
-  const classes = useStyles();
-  return (
-    <Appointments.Appointment
-      {...restProps}
-      className={classes.appointmentLayer}
-    />
-  );
-};
+export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
+	constructor(props: CalendarProps) {
+		super(props);
 
-export default class Calendar extends React.PureComponent<
-  CalendarProps,
-  CalendarState
-> {
+		this.state = {
+			currentDate: new Date("2020-06-01"),
+		};
+	}
 
-  constructor(props: CalendarProps) {
-    super(props);
+	render() {
+		const { data } = this.props;
+		const { currentDate } = this.state;
 
-    this.state = {
-      currentDate: new Date("2020-06-01"),
-    };
-  }
-
-  render() {
-    const { data } = this.props;
-    const { currentDate } = this.state;
-
-    return (
-      <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
-        <ViewState defaultCurrentDate={currentDate} />
-        <WeekView
-          startDayHour={8}
-          endDayHour={20}
-          excludedDays={[0, 6]}
-          cellDuration={60}
-          dayScaleCellComponent={DayScaleCell}
-          timeTableLayoutComponent={TimeTableLayout}
-          timeTableCellComponent={TimeTableCell}
-        />
-        <Appointments appointmentComponent={Appointment} />
-        <AppointmentTooltip />
-      </Scheduler>
-    );
-  }
+		return (
+			<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
+				<ViewState defaultCurrentDate={currentDate} />
+				<WeekView
+					startDayHour={8}
+					endDayHour={20}
+					excludedDays={[0, 6]}
+					cellDuration={60}
+					dayScaleCellComponent={DayScaleCell}
+					timeTableLayoutComponent={TimeTableLayout}
+				/>
+				<Appointments appointmentComponent={Appointment} />
+				<AppointmentTooltip />
+			</Scheduler>
+		);
+	}
 }
diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx
index ead1d0e..fbad157 100644
--- a/src/components/RightBar/index.tsx
+++ b/src/components/RightBar/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import "./index.scss";
 import Paper from "@material-ui/core/Paper";
+
 interface RightBarProps {}
 
 interface RightBarState {}
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 7d6303b..ac961a0 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -18,7 +18,7 @@ interface TopBarProps {
 
 interface TopBarState {
   isOpenProfile: boolean;
-  anchorEl: null | HTMLElement;
+  anchorEl: HTMLElement | null;
   isPolish: boolean;
 }