diff --git a/.idea/modules.xml b/.idea/modules.xml
index 3774a58aaf3e438c45c73f4dc885195b870ed2f7..09659ce2ea7484c677e788dc31e10edab4411ab4 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/dtek0065_project.iml" filepath="$PROJECT_DIR$/.idea/dtek0065_project.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/DTEK0065_project.iml" filepath="$PROJECT_DIR$/.idea/DTEK0065_project.iml" />
     </modules>
   </component>
 </project>
\ No newline at end of file
diff --git a/projekti/src/App.js b/projekti/src/App.js
index 5d36ceed67a064c7da3d602fc13b4ba4bacbcc5e..d6a881adcd5e16d83c5e860f09f9c3fef31804fd 100644
--- a/projekti/src/App.js
+++ b/projekti/src/App.js
@@ -1,11 +1,51 @@
 import React, {Component} from "react";
 
+
 class App extends Component {
 
   constructor() {
     super();
     this.state = initialState;
   }
+}
+
+  export interface ICanvasBoard {
+  height: number;
+  width: number;
+}
+
+const CanvasBoard = ({ height, width }: ICanvasBoard) => {
+  return (
+      <canvas
+          style={{
+            border: "3px solid black",
+          }}
+          height={height}
+          width={width}
+      />
+  );
+};
+
+import { ChakraProvider, Container, Heading } from "@chakra-ui/react";
+import { Provider } from "react-redux";
+import CanvasBoard from "./components/CanvasBoard";
+import ScoreCard from "./components/ScoreCard";
+import store from "./store";
+
+const App = () => {
+  return (
+      <Provider store={store}>
+        <ChakraProvider>
+          <Container maxW="container.lg" centerContent>
+            <Heading as="h1" size="xl">SNAKE GAME</Heading>
+            <CanvasBoard height={600} width={1000} /> //Canvasboard component added
+          </Container>
+        </ChakraProvider>
+      </Provider>
+  );
+};
+
+export default App;
 
   // how the snake moves on the board
   moveSnake() {
@@ -14,7 +54,6 @@ class App extends Component {
 
   // updates the direction of the snake from the input it gets
   changeDirection() {
-//homonaama
   }
 
   // checks if food is eaten